mirror of
https://github.com/reduxjs/redux-devtools.git
synced 2025-02-07 15:10:45 +03:00
chore(devui): upgrade storybook (#626)
* stash * stash * stash * fix * stash * fix css * stash * stash * stash * Fix tests
This commit is contained in:
Nathan Bierema
GitHub
parent
c7b0c7aa6e
commit
cd4f022671
|
|
@ -1,12 +0,0 @@
|
||||||
// IMPORTANT
|
|
||||||
// ---------
|
|
||||||
// This is an auto generated file with React CDK.
|
|
||||||
// Do not modify this file.
|
|
||||||
|
|
||||||
const parse = require('git-url-parse');
|
|
||||||
var ghUrl = process.argv[2];
|
|
||||||
const parsedUrl = parse(ghUrl);
|
|
||||||
|
|
||||||
const ghPagesUrl =
|
|
||||||
'https://' + parsedUrl.owner + '.github.io/' + parsedUrl.name;
|
|
||||||
console.log(ghPagesUrl);
|
|
||||||
|
|
@ -1,16 +0,0 @@
|
||||||
#!/bin/bash
|
|
||||||
|
|
||||||
# IMPORTANT
|
|
||||||
# ---------
|
|
||||||
# This is an auto generated file with React CDK.
|
|
||||||
# Do not modify this file.
|
|
||||||
# Use `.scripts/user/prepublish.sh instead`.
|
|
||||||
|
|
||||||
echo "=> Transpiling 'src' into ES5 ..."
|
|
||||||
echo ""
|
|
||||||
rm -rf ./dist
|
|
||||||
./node_modules/.bin/babel --ignore tests,stories --plugins "transform-runtime" ./src --out-dir ./lib
|
|
||||||
echo ""
|
|
||||||
echo "=> Transpiling completed."
|
|
||||||
|
|
||||||
. .scripts/user/prepublish.sh
|
|
||||||
|
|
@ -1,47 +0,0 @@
|
||||||
#!/bin/bash
|
|
||||||
|
|
||||||
# IMPORTANT
|
|
||||||
# ---------
|
|
||||||
# This is an auto generated file with React CDK.
|
|
||||||
# Do not modify this file.
|
|
||||||
|
|
||||||
set -e # exit with nonzero exit code if anything fails
|
|
||||||
|
|
||||||
# get GIT url
|
|
||||||
|
|
||||||
GIT_URL=`git config --get remote.origin.url`
|
|
||||||
if [[ $GIT_URL == "" ]]; then
|
|
||||||
echo "This project is not configured with a remote git repo".
|
|
||||||
exit 1
|
|
||||||
fi
|
|
||||||
|
|
||||||
# clear and re-create the out directory
|
|
||||||
rm -rf .out || exit 0;
|
|
||||||
mkdir .out;
|
|
||||||
|
|
||||||
# run our compile script, discussed above
|
|
||||||
build-storybook -o .out
|
|
||||||
|
|
||||||
# go to the out directory and create a *new* Git repo
|
|
||||||
cd .out
|
|
||||||
git init
|
|
||||||
|
|
||||||
# inside this git repo we'll pretend to be a new user
|
|
||||||
git config user.name "GH Pages Bot"
|
|
||||||
git config user.email "hello@ghbot.com"
|
|
||||||
|
|
||||||
# The first and only commit to this new Git repo contains all the
|
|
||||||
# files present with the commit message "Deploy to GitHub Pages".
|
|
||||||
git add .
|
|
||||||
git commit -m "Deploy Storybook to GitHub Pages"
|
|
||||||
|
|
||||||
# Force push from the current repo's master branch to the remote
|
|
||||||
# repo's gh-pages branch. (All previous history on the gh-pages branch
|
|
||||||
# will be lost, since we are overwriting it.) We redirect any output to
|
|
||||||
# /dev/null to hide any sensitive credential data that might otherwise be exposed.
|
|
||||||
git push --force --quiet $GIT_URL master:gh-pages > /dev/null 2>&1
|
|
||||||
cd ..
|
|
||||||
rm -rf .out
|
|
||||||
|
|
||||||
echo ""
|
|
||||||
echo "=> Storybook deployed to: `node .scripts/get_gh_pages_url.js $GIT_URL`"
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
# Use this file to your own code to run at NPM `prepublish` event.
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
// Use this file to setup any test utilities.
|
|
||||||
|
|
@ -1,4 +0,0 @@
|
||||||
import '@storybook/addon-knobs/register';
|
|
||||||
import '@storybook/addon-actions/register';
|
|
||||||
import '@storybook/addon-options/register';
|
|
||||||
import './themeAddon/register';
|
|
||||||
|
|
@ -1,30 +0,0 @@
|
||||||
import { configure, setAddon, addDecorator } from '@storybook/react';
|
|
||||||
import { withOptions } from '@storybook/addon-options';
|
|
||||||
import { withInfo } from '@storybook/addon-info';
|
|
||||||
import { withKnobs } from '@storybook/addon-knobs';
|
|
||||||
import { withTheme } from './themeAddon/theme';
|
|
||||||
import '../src/presets.js';
|
|
||||||
|
|
||||||
addDecorator(
|
|
||||||
withOptions({
|
|
||||||
name: 'DevUI',
|
|
||||||
url: 'https://github.com/reduxjs/redux-devtools/tree/master/packages/devui',
|
|
||||||
goFullScreen: false,
|
|
||||||
showStoriesPanel: true,
|
|
||||||
showAddonPanel: true,
|
|
||||||
showSearchBox: false,
|
|
||||||
addonPanelInRight: true,
|
|
||||||
})
|
|
||||||
);
|
|
||||||
|
|
||||||
addDecorator(withTheme);
|
|
||||||
addDecorator(withKnobs);
|
|
||||||
addDecorator(withInfo);
|
|
||||||
|
|
||||||
const req = require.context('../src/', true, /stories\/index\.js$/);
|
|
||||||
|
|
||||||
function loadStories() {
|
|
||||||
req.keys().forEach((filename) => req(filename));
|
|
||||||
}
|
|
||||||
|
|
||||||
configure(loadStories, module);
|
|
||||||
11
packages/devui/.storybook/main.js
Normal file
11
packages/devui/.storybook/main.js
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
module.exports = {
|
||||||
|
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
|
||||||
|
addons: [
|
||||||
|
{
|
||||||
|
name: '@storybook/addon-essentials',
|
||||||
|
options: {
|
||||||
|
backgrounds: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
@ -1,28 +0,0 @@
|
||||||
<style>
|
|
||||||
html {
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
overflow: hidden;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
min-width: 350px;
|
|
||||||
min-height: 400px;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
font-family: 'Helvetica Neue', 'Lucida Grande', sans-serif;
|
|
||||||
font-size: 11px;
|
|
||||||
}
|
|
||||||
#root,
|
|
||||||
#root > div {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
#root > div > div {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
48
packages/devui/.storybook/preview.js
Normal file
48
packages/devui/.storybook/preview.js
Normal file
|
|
@ -0,0 +1,48 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { Container } from '../src';
|
||||||
|
import { listSchemes, listThemes } from '../src/utils/theme';
|
||||||
|
import '../src/presets.js';
|
||||||
|
|
||||||
|
export const parameters = {
|
||||||
|
actions: { argTypesRegex: '^on[A-Z].*' },
|
||||||
|
};
|
||||||
|
|
||||||
|
export const globalTypes = {
|
||||||
|
theme: {
|
||||||
|
name: 'Theme',
|
||||||
|
description: 'Global theme for components',
|
||||||
|
defaultValue: 'default',
|
||||||
|
toolbar: {
|
||||||
|
items: listThemes(),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
scheme: {
|
||||||
|
name: 'Color Scheme',
|
||||||
|
description: 'Global color scheme for components',
|
||||||
|
defaultValue: 'default',
|
||||||
|
toolbar: {
|
||||||
|
items: listSchemes(),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
color: {
|
||||||
|
name: 'Color',
|
||||||
|
description: 'Global color for components',
|
||||||
|
defaultValue: 'light',
|
||||||
|
toolbar: {
|
||||||
|
items: ['light', 'dark'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const withThemeProvider = (Story, context) => (
|
||||||
|
<Container
|
||||||
|
themeData={{
|
||||||
|
theme: context.globals.theme,
|
||||||
|
scheme: context.globals.scheme,
|
||||||
|
light: context.globals.color === 'light',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Story {...context} />
|
||||||
|
</Container>
|
||||||
|
);
|
||||||
|
export const decorators = [withThemeProvider];
|
||||||
|
|
@ -1,60 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import Form from '@storybook/addon-knobs/dist/components/PropForm';
|
|
||||||
import styled from 'styled-components';
|
|
||||||
import { EVENT_ID_DATA, DEFAULT_THEME_STATE } from './constant';
|
|
||||||
import { listSchemes, listThemes } from '../../src/utils/theme';
|
|
||||||
|
|
||||||
const FormWrapper = styled.div`
|
|
||||||
width: 100%;
|
|
||||||
padding: 5px;
|
|
||||||
|
|
||||||
label {
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const schemes = listSchemes();
|
|
||||||
const themes = listThemes();
|
|
||||||
|
|
||||||
export default class Panel extends React.Component {
|
|
||||||
state = DEFAULT_THEME_STATE;
|
|
||||||
|
|
||||||
onChange = (o) => {
|
|
||||||
const state = { [o.name.split(' ').slice(-1)[0]]: o.value };
|
|
||||||
this.props.channel.emit(EVENT_ID_DATA, state);
|
|
||||||
this.setState(state);
|
|
||||||
};
|
|
||||||
|
|
||||||
onClick = () => {};
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { theme, scheme, light } = this.state;
|
|
||||||
return (
|
|
||||||
<FormWrapper>
|
|
||||||
<Form
|
|
||||||
knobs={[
|
|
||||||
{
|
|
||||||
type: 'select',
|
|
||||||
name: 'theme',
|
|
||||||
value: theme,
|
|
||||||
options: themes,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'select',
|
|
||||||
name: 'color scheme',
|
|
||||||
value: scheme,
|
|
||||||
options: schemes,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'boolean',
|
|
||||||
name: 'light',
|
|
||||||
value: light,
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
onFieldChange={this.onChange}
|
|
||||||
onFieldClick={this.onClick}
|
|
||||||
/>
|
|
||||||
</FormWrapper>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
export const ADDON_ID = 'redux-devtools-themes-storybook';
|
|
||||||
export const PANEL_ID = `${ADDON_ID}/panel`;
|
|
||||||
export const EVENT_ID_DATA = `${ADDON_ID}/event/data`;
|
|
||||||
export const CSS_CLASS = 'redux-devtools-storybook';
|
|
||||||
export const DEFAULT_THEME_STATE = {
|
|
||||||
theme: 'default',
|
|
||||||
scheme: 'default',
|
|
||||||
light: true,
|
|
||||||
};
|
|
||||||
|
|
@ -1,13 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import addons from '@storybook/addons';
|
|
||||||
import Panel from './Panel';
|
|
||||||
import { ADDON_ID, PANEL_ID } from './constant';
|
|
||||||
|
|
||||||
addons.register(ADDON_ID, (api) => {
|
|
||||||
const channel = addons.getChannel();
|
|
||||||
addons.addPanel(PANEL_ID, {
|
|
||||||
title: 'Theme',
|
|
||||||
render: ({ active }) =>
|
|
||||||
active ? <Panel channel={channel} api={api} /> : null,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
@ -1,28 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import addons from '@storybook/addons';
|
|
||||||
import { EVENT_ID_DATA, DEFAULT_THEME_STATE } from './constant';
|
|
||||||
import { Container } from '../../src';
|
|
||||||
|
|
||||||
const channel = addons.getChannel();
|
|
||||||
|
|
||||||
class Theme extends React.Component {
|
|
||||||
state = DEFAULT_THEME_STATE;
|
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
channel.on(EVENT_ID_DATA, this.onChannel);
|
|
||||||
}
|
|
||||||
|
|
||||||
componentWillUnmount() {
|
|
||||||
channel.removeListener(EVENT_ID_DATA, this.onChannel);
|
|
||||||
}
|
|
||||||
|
|
||||||
onChannel = (state) => {
|
|
||||||
this.setState(state);
|
|
||||||
};
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return <Container themeData={this.state}>{this.props.children}</Container>;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export const withTheme = (story) => <Theme>{story()}</Theme>;
|
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
const path = require('path');
|
|
||||||
|
|
||||||
module.exports = (baseConfig, env, defaultConfig) => {
|
|
||||||
// Add custom webpack config here like:
|
|
||||||
// defaultConfig.module.rules.push
|
|
||||||
|
|
||||||
return defaultConfig;
|
|
||||||
};
|
|
||||||
|
|
@ -18,8 +18,8 @@
|
||||||
"lint:css": "stylelint \"./src/**/*.js\"",
|
"lint:css": "stylelint \"./src/**/*.js\"",
|
||||||
"test:update": "npm run jest -- -u",
|
"test:update": "npm run jest -- -u",
|
||||||
"test": "jest --no-cache",
|
"test": "jest --no-cache",
|
||||||
"storybook": "start-storybook -p 9001 -c .storybook -s ./fonts",
|
"storybook": "start-storybook -p 6006 -s ./fonts",
|
||||||
"publish-storybook": "bash .scripts/publish_storybook.sh",
|
"build-storybook": "build-storybook -s ./fonts",
|
||||||
"prepare": "npm run build",
|
"prepare": "npm run build",
|
||||||
"prepublishOnly": "npm run test && npm run build"
|
"prepublishOnly": "npm run test && npm run build"
|
||||||
},
|
},
|
||||||
|
|
@ -36,20 +36,17 @@
|
||||||
"@babel/plugin-transform-runtime": "^7.11.0",
|
"@babel/plugin-transform-runtime": "^7.11.0",
|
||||||
"@babel/preset-env": "^7.11.0",
|
"@babel/preset-env": "^7.11.0",
|
||||||
"@babel/preset-react": "^7.10.4",
|
"@babel/preset-react": "^7.10.4",
|
||||||
"@storybook/addon-actions": "^4.1.18",
|
"@storybook/addon-essentials": "^6.0.21",
|
||||||
"@storybook/addon-info": "^4.1.18",
|
"@storybook/react": "^6.0.21",
|
||||||
"@storybook/addon-knobs": "^4.1.18",
|
|
||||||
"@storybook/addon-options": "^4.1.18",
|
|
||||||
"@storybook/react": "4.1.18",
|
|
||||||
"babel-loader": "^8.1.0",
|
"babel-loader": "^8.1.0",
|
||||||
"enzyme": "^3.11.0",
|
"enzyme": "^3.11.0",
|
||||||
"enzyme-adapter-react-16": "^1.15.3",
|
"enzyme-adapter-react-16": "^1.15.3",
|
||||||
"enzyme-to-json": "^3.5.0",
|
"enzyme-to-json": "^3.5.0",
|
||||||
"git-url-parse": "^11.1.2",
|
|
||||||
"jest": "^26.2.2",
|
"jest": "^26.2.2",
|
||||||
"jsdom": "^16.4.0",
|
"jsdom": "^16.4.0",
|
||||||
"react": "^16.13.1",
|
"react": "^16.13.1",
|
||||||
"react-dom": "^16.13.1",
|
"react-dom": "^16.13.1",
|
||||||
|
"react-is": "^16.13.1",
|
||||||
"react-test-renderer": "^16.13.1",
|
"react-test-renderer": "^16.13.1",
|
||||||
"rimraf": "^3.0.2",
|
"rimraf": "^3.0.2",
|
||||||
"stylelint": "^13.6.1",
|
"stylelint": "^13.6.1",
|
||||||
|
|
|
||||||
54
packages/devui/src/Button/Button.stories.js
Normal file
54
packages/devui/src/Button/Button.stories.js
Normal file
|
|
@ -0,0 +1,54 @@
|
||||||
|
import React from 'react';
|
||||||
|
import styled from 'styled-components';
|
||||||
|
import { MdFiberManualRecord } from 'react-icons/md';
|
||||||
|
import Button from './';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
title: 'Button',
|
||||||
|
component: Button,
|
||||||
|
};
|
||||||
|
|
||||||
|
const Container = styled.div`
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const Template = (args) => (
|
||||||
|
<Container>
|
||||||
|
<Button {...args} />
|
||||||
|
</Container>
|
||||||
|
);
|
||||||
|
|
||||||
|
export const Default = Template.bind({});
|
||||||
|
Default.args = {
|
||||||
|
title: 'Hello Tooltip! \\a And from new line hello!',
|
||||||
|
primary: true,
|
||||||
|
size: 'normal',
|
||||||
|
disabled: false,
|
||||||
|
children: 'Hello Button',
|
||||||
|
};
|
||||||
|
Default.argTypes = {
|
||||||
|
onClick: { control: { disable: true } },
|
||||||
|
type: { control: { disable: true } },
|
||||||
|
mark: { control: { disable: true } },
|
||||||
|
theme: { control: { disable: true } },
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Mark = Template.bind({});
|
||||||
|
Mark.args = {
|
||||||
|
mark: 'base08',
|
||||||
|
title: 'Hello Tooltip',
|
||||||
|
size: 'normal',
|
||||||
|
disabled: false,
|
||||||
|
children: <MdFiberManualRecord />,
|
||||||
|
};
|
||||||
|
Mark.argTypes = {
|
||||||
|
children: { control: { disable: true } },
|
||||||
|
onClick: { control: { disable: true } },
|
||||||
|
type: { control: { disable: true } },
|
||||||
|
primary: { control: { disable: true } },
|
||||||
|
theme: { control: { disable: true } },
|
||||||
|
};
|
||||||
|
|
@ -1,77 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import styled from 'styled-components';
|
|
||||||
import { storiesOf } from '@storybook/react';
|
|
||||||
import { action } from '@storybook/addon-actions';
|
|
||||||
import { withKnobs, text, boolean, select } from '@storybook/addon-knobs';
|
|
||||||
import { MdFiberManualRecord } from 'react-icons/md';
|
|
||||||
import Button from '../';
|
|
||||||
|
|
||||||
export const Container = styled.div`
|
|
||||||
display: flex;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
`;
|
|
||||||
|
|
||||||
storiesOf('Button', module)
|
|
||||||
.addDecorator(withKnobs)
|
|
||||||
.add('default', () => (
|
|
||||||
<Container>
|
|
||||||
<Button
|
|
||||||
title={text('Title', 'Hello Tooltip! \\a And from new line hello!')}
|
|
||||||
tooltipPosition={select('tooltipPosition', [
|
|
||||||
'top',
|
|
||||||
'bottom',
|
|
||||||
'left',
|
|
||||||
'right',
|
|
||||||
'bottom-left',
|
|
||||||
'bottom-right',
|
|
||||||
'top-left',
|
|
||||||
'top-right',
|
|
||||||
])}
|
|
||||||
primary={boolean('primary', true)}
|
|
||||||
size={select('size', ['big', 'normal', 'small'], 'normal')}
|
|
||||||
disabled={boolean('Disabled', false)}
|
|
||||||
onClick={action('button clicked')}
|
|
||||||
>
|
|
||||||
{text('Label', 'Hello Button')}
|
|
||||||
</Button>
|
|
||||||
</Container>
|
|
||||||
))
|
|
||||||
.add('mark', () => (
|
|
||||||
<Container>
|
|
||||||
<Button
|
|
||||||
mark={select(
|
|
||||||
'mark',
|
|
||||||
[
|
|
||||||
'base08',
|
|
||||||
'base09',
|
|
||||||
'base0A',
|
|
||||||
'base0B',
|
|
||||||
'base0C',
|
|
||||||
'base0D',
|
|
||||||
'base0E',
|
|
||||||
'base0F',
|
|
||||||
],
|
|
||||||
'base08'
|
|
||||||
)}
|
|
||||||
title={text('Title', 'Hello Tooltip')}
|
|
||||||
tooltipPosition={select('tooltipPosition', [
|
|
||||||
'top',
|
|
||||||
'bottom',
|
|
||||||
'left',
|
|
||||||
'right',
|
|
||||||
'bottom-left',
|
|
||||||
'bottom-right',
|
|
||||||
'top-left',
|
|
||||||
'top-right',
|
|
||||||
])}
|
|
||||||
size={select('size', ['big', 'normal', 'small'], 'normal')}
|
|
||||||
disabled={boolean('Disabled', false)}
|
|
||||||
onClick={action('button clicked')}
|
|
||||||
>
|
|
||||||
<MdFiberManualRecord />
|
|
||||||
</Button>
|
|
||||||
</Container>
|
|
||||||
));
|
|
||||||
36
packages/devui/src/ContextMenu/ContextMenu.stories.js
Normal file
36
packages/devui/src/ContextMenu/ContextMenu.stories.js
Normal file
|
|
@ -0,0 +1,36 @@
|
||||||
|
import React from 'react';
|
||||||
|
import styled from 'styled-components';
|
||||||
|
import ContextMenu from './';
|
||||||
|
import { items } from './data';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
title: 'ContextMenu',
|
||||||
|
component: ContextMenu,
|
||||||
|
};
|
||||||
|
|
||||||
|
const Container = styled.div`
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const Template = (args) => (
|
||||||
|
<Container>
|
||||||
|
<ContextMenu {...args} />
|
||||||
|
</Container>
|
||||||
|
);
|
||||||
|
|
||||||
|
export const Default = Template.bind({});
|
||||||
|
Default.args = {
|
||||||
|
visible: true,
|
||||||
|
x: 100,
|
||||||
|
y: 100,
|
||||||
|
items,
|
||||||
|
};
|
||||||
|
Default.argTypes = {
|
||||||
|
visible: { control: { disable: true } },
|
||||||
|
items: { control: { disable: true } },
|
||||||
|
onClick: { control: { disable: true } },
|
||||||
|
};
|
||||||
|
|
@ -1,29 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import { storiesOf } from '@storybook/react';
|
|
||||||
import { action } from '@storybook/addon-actions';
|
|
||||||
import styled from 'styled-components';
|
|
||||||
import { withKnobs, number } from '@storybook/addon-knobs';
|
|
||||||
import ContextMenu from '../';
|
|
||||||
import { items } from './data';
|
|
||||||
|
|
||||||
export const Container = styled.div`
|
|
||||||
display: flex;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
`;
|
|
||||||
|
|
||||||
storiesOf('ContextMenu', module)
|
|
||||||
.addDecorator(withKnobs)
|
|
||||||
.add('default', () => (
|
|
||||||
<Container>
|
|
||||||
<ContextMenu
|
|
||||||
visible
|
|
||||||
onClick={action('menu item clicked')}
|
|
||||||
x={number('x', 100)}
|
|
||||||
y={number('y', 100)}
|
|
||||||
items={items}
|
|
||||||
/>
|
|
||||||
</Container>
|
|
||||||
));
|
|
||||||
49
packages/devui/src/Dialog/Dialog.stories.js
Normal file
49
packages/devui/src/Dialog/Dialog.stories.js
Normal file
|
|
@ -0,0 +1,49 @@
|
||||||
|
import React from 'react';
|
||||||
|
import Dialog from './';
|
||||||
|
import { schema, uiSchema, formData } from '../Form/schema';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
title: 'Dialog',
|
||||||
|
component: Dialog,
|
||||||
|
};
|
||||||
|
|
||||||
|
const Template = (args) => <Dialog {...args} />;
|
||||||
|
|
||||||
|
export const Default = Template.bind({});
|
||||||
|
Default.args = {
|
||||||
|
title: 'Dialog Title',
|
||||||
|
submitText: 'Submit!',
|
||||||
|
open: true,
|
||||||
|
noHeader: false,
|
||||||
|
noFooter: false,
|
||||||
|
modal: false,
|
||||||
|
fullWidth: false,
|
||||||
|
children: 'Hello Dialog!',
|
||||||
|
};
|
||||||
|
Default.argTypes = {
|
||||||
|
actions: { control: { disable: true } },
|
||||||
|
onDismiss: { control: { disable: true } },
|
||||||
|
onSubmit: { control: { disable: true } },
|
||||||
|
theme: { control: { disable: true } },
|
||||||
|
};
|
||||||
|
|
||||||
|
export const WithForm = Template.bind({});
|
||||||
|
WithForm.args = {
|
||||||
|
open: true,
|
||||||
|
noHeader: false,
|
||||||
|
noFooter: false,
|
||||||
|
fullWidth: false,
|
||||||
|
submitText: 'Submit!',
|
||||||
|
formData,
|
||||||
|
schema,
|
||||||
|
uiSchema,
|
||||||
|
};
|
||||||
|
WithForm.argTypes = {
|
||||||
|
title: { control: { disable: true } },
|
||||||
|
children: { control: { disable: true } },
|
||||||
|
actions: { control: { disable: true } },
|
||||||
|
modal: { control: { disable: true } },
|
||||||
|
onDismiss: { control: { disable: true } },
|
||||||
|
onSubmit: { control: { disable: true } },
|
||||||
|
theme: { control: { disable: true } },
|
||||||
|
};
|
||||||
|
|
@ -1,39 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import { storiesOf } from '@storybook/react';
|
|
||||||
import { action } from '@storybook/addon-actions';
|
|
||||||
import { withKnobs, text, boolean, object } from '@storybook/addon-knobs';
|
|
||||||
import Dialog from '../';
|
|
||||||
import { schema, uiSchema, formData } from '../../Form/stories/schema';
|
|
||||||
|
|
||||||
storiesOf('Dialog', module)
|
|
||||||
.addDecorator(withKnobs)
|
|
||||||
.add('default', () => (
|
|
||||||
<Dialog
|
|
||||||
title={text('title', 'Dialog Title')}
|
|
||||||
submitText={text('submitText', 'Submit!')}
|
|
||||||
open={boolean('open', true)}
|
|
||||||
noHeader={boolean('noHeader', false)}
|
|
||||||
noFooter={boolean('noFooter', false)}
|
|
||||||
modal={boolean('modal', false)}
|
|
||||||
fullWidth={boolean('fullWidth', false)}
|
|
||||||
onDismiss={action('dialog dismissed')}
|
|
||||||
onSubmit={action('dialog submitted')}
|
|
||||||
>
|
|
||||||
{text('children', 'Hello Dialog!')}
|
|
||||||
</Dialog>
|
|
||||||
))
|
|
||||||
.add('with form', () => (
|
|
||||||
<Dialog
|
|
||||||
open={boolean('open', true)}
|
|
||||||
noHeader={boolean('noHeader', false)}
|
|
||||||
noFooter={boolean('noFooter', false)}
|
|
||||||
fullWidth={boolean('fullWidth', false)}
|
|
||||||
submitText={text('submitText', 'Submit!')}
|
|
||||||
formData={object('formData', formData)}
|
|
||||||
schema={object('schema', schema)}
|
|
||||||
uiSchema={object('uiSchema', uiSchema)}
|
|
||||||
onChange={action('form changed')}
|
|
||||||
onSubmit={action('form submitted')}
|
|
||||||
onDismiss={action('dialog dismissed')}
|
|
||||||
/>
|
|
||||||
));
|
|
||||||
|
|
@ -8,6 +8,9 @@ const EditorContainer = styled.div('', ({ theme }) =>
|
||||||
theme.scheme === 'default' && theme.light ? defaultStyle : themedStyle(theme)
|
theme.scheme === 'default' && theme.light ? defaultStyle : themedStyle(theme)
|
||||||
);
|
);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Based on [CodeMirror](http://codemirror.net/).
|
||||||
|
*/
|
||||||
export default class Editor extends Component {
|
export default class Editor extends Component {
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
this.cm = CodeMirror(this.node, {
|
this.cm = CodeMirror(this.node, {
|
||||||
|
|
|
||||||
52
packages/devui/src/Editor/Editor.stories.js
Normal file
52
packages/devui/src/Editor/Editor.stories.js
Normal file
|
|
@ -0,0 +1,52 @@
|
||||||
|
import React from 'react';
|
||||||
|
import Editor from './';
|
||||||
|
import { default as WithTabsComponent } from './WithTabs';
|
||||||
|
|
||||||
|
const value = `
|
||||||
|
var themes = [];
|
||||||
|
|
||||||
|
function getThemes() {
|
||||||
|
return themes;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
export default {
|
||||||
|
title: 'Editor',
|
||||||
|
component: Editor,
|
||||||
|
};
|
||||||
|
|
||||||
|
const Template = (args) => <Editor {...args} />;
|
||||||
|
|
||||||
|
export const Default = Template.bind({});
|
||||||
|
Default.args = {
|
||||||
|
value,
|
||||||
|
lineNumbers: true,
|
||||||
|
lineWrapping: false,
|
||||||
|
foldGutter: true,
|
||||||
|
readOnly: false,
|
||||||
|
autofocus: true,
|
||||||
|
};
|
||||||
|
Default.argTypes = {
|
||||||
|
autofocus: { control: { disable: true } },
|
||||||
|
mode: { control: { disable: true } },
|
||||||
|
theme: { control: { disable: true } },
|
||||||
|
onChange: { control: { disable: true } },
|
||||||
|
};
|
||||||
|
|
||||||
|
const WithTabsTemplate = (args) => <WithTabsComponent {...args} />;
|
||||||
|
|
||||||
|
export const WithTabs = WithTabsTemplate.bind({});
|
||||||
|
WithTabs.args = {
|
||||||
|
lineNumbers: true,
|
||||||
|
align: 'left',
|
||||||
|
};
|
||||||
|
WithTabs.argTypes = {
|
||||||
|
value: { control: { disable: true } },
|
||||||
|
mode: { control: { disable: true } },
|
||||||
|
lineWrapping: { control: { disable: true } },
|
||||||
|
readOnly: { control: { disable: true } },
|
||||||
|
theme: { control: { disable: true } },
|
||||||
|
foldGutter: { control: { disable: true } },
|
||||||
|
autofocus: { control: { disable: true } },
|
||||||
|
onChange: { control: { disable: true } },
|
||||||
|
};
|
||||||
|
|
@ -1,7 +1,6 @@
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import { select } from '@storybook/addon-knobs';
|
import Editor from './';
|
||||||
import Editor from '../';
|
import Tabs from '../Tabs';
|
||||||
import Tabs from '../../Tabs';
|
|
||||||
|
|
||||||
const value1 = `
|
const value1 = `
|
||||||
const func1 = () => {}
|
const func1 = () => {}
|
||||||
|
|
@ -18,7 +17,7 @@ export default class WithTabs extends Component {
|
||||||
};
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { lineNumbers } = this.props;
|
const { align, lineNumbers } = this.props;
|
||||||
return (
|
return (
|
||||||
<Tabs
|
<Tabs
|
||||||
tabs={[
|
tabs={[
|
||||||
|
|
@ -37,7 +36,7 @@ export default class WithTabs extends Component {
|
||||||
onClick={(selected) => {
|
onClick={(selected) => {
|
||||||
this.setState({ selected });
|
this.setState({ selected });
|
||||||
}}
|
}}
|
||||||
align={select('align', ['left', 'right', 'center'], 'left')}
|
align={align}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
@ -1,35 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import { storiesOf } from '@storybook/react';
|
|
||||||
import { action } from '@storybook/addon-actions';
|
|
||||||
import { withKnobs, text, boolean } from '@storybook/addon-knobs';
|
|
||||||
import Editor from '../';
|
|
||||||
import WithTabs from './WithTabs';
|
|
||||||
|
|
||||||
const value = `
|
|
||||||
var themes = [];
|
|
||||||
|
|
||||||
function getThemes() {
|
|
||||||
return themes;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
storiesOf('Editor', module)
|
|
||||||
.addDecorator(withKnobs)
|
|
||||||
.add(
|
|
||||||
'default',
|
|
||||||
() => (
|
|
||||||
<Editor
|
|
||||||
value={text('value', value)}
|
|
||||||
lineNumbers={boolean('lineNumbers', true)}
|
|
||||||
lineWrapping={boolean('lineWrapping', false)}
|
|
||||||
foldGutter={boolean('foldGutter', true)}
|
|
||||||
readOnly={boolean('readOnly', false)}
|
|
||||||
onChange={action('change')}
|
|
||||||
autofocus
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
{ info: 'Based on [CodeMirror](http://codemirror.net/).' }
|
|
||||||
)
|
|
||||||
.add('with tabs', () => (
|
|
||||||
<WithTabs lineNumbers={boolean('lineNumbers', true)} />
|
|
||||||
));
|
|
||||||
|
|
@ -8,6 +8,9 @@ import customWidgets from './widgets';
|
||||||
|
|
||||||
const FormContainer = createStyledComponent(styles, JSONSchemaForm);
|
const FormContainer = createStyledComponent(styles, JSONSchemaForm);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Wrapper around [`react-jsonschema-form`](https://github.com/mozilla-services/react-jsonschema-form) with custom widgets.
|
||||||
|
*/
|
||||||
export default class Form extends (PureComponent || Component) {
|
export default class Form extends (PureComponent || Component) {
|
||||||
render() {
|
render() {
|
||||||
const {
|
const {
|
||||||
|
|
|
||||||
24
packages/devui/src/Form/Form.stories.js
Normal file
24
packages/devui/src/Form/Form.stories.js
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
import React from 'react';
|
||||||
|
import Form from './';
|
||||||
|
import { schema, uiSchema, formData } from './schema';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
title: 'Form',
|
||||||
|
component: Form,
|
||||||
|
};
|
||||||
|
|
||||||
|
const Template = (args) => <Form {...args} />;
|
||||||
|
|
||||||
|
export const Default = Template.bind({});
|
||||||
|
Default.args = {
|
||||||
|
formData,
|
||||||
|
schema,
|
||||||
|
uiSchema,
|
||||||
|
submitText: 'Submit',
|
||||||
|
};
|
||||||
|
Default.argTypes = {
|
||||||
|
children: { control: { disable: true } },
|
||||||
|
primaryButton: { control: { disable: true } },
|
||||||
|
noSubmit: { control: { disable: true } },
|
||||||
|
widgets: { control: { disable: true } },
|
||||||
|
};
|
||||||
|
|
@ -1,27 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import { storiesOf } from '@storybook/react';
|
|
||||||
import { action } from '@storybook/addon-actions';
|
|
||||||
import { withKnobs, object, text } from '@storybook/addon-knobs';
|
|
||||||
import Form from '../';
|
|
||||||
import { schema, uiSchema, formData } from './schema';
|
|
||||||
|
|
||||||
storiesOf('Form', module)
|
|
||||||
.addDecorator(withKnobs)
|
|
||||||
.add(
|
|
||||||
'default',
|
|
||||||
() => (
|
|
||||||
<Form
|
|
||||||
formData={object('formData', formData)}
|
|
||||||
schema={object('schema', schema)}
|
|
||||||
uiSchema={object('uiSchema', uiSchema)}
|
|
||||||
submitText={text('submitText', 'Submit')}
|
|
||||||
onChange={action('form changed')}
|
|
||||||
onSubmit={action('form submitted')}
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
{
|
|
||||||
info:
|
|
||||||
'Wrapper around [`react-jsonschema-form`](https://github.com/mozilla-services/react-jsonschema-form)' +
|
|
||||||
' with custom widgets.',
|
|
||||||
}
|
|
||||||
);
|
|
||||||
32
packages/devui/src/Notification/Notification.stories.js
Normal file
32
packages/devui/src/Notification/Notification.stories.js
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
import React from 'react';
|
||||||
|
import styled from 'styled-components';
|
||||||
|
import Notification from './';
|
||||||
|
|
||||||
|
const Container = styled.div`
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
`;
|
||||||
|
|
||||||
|
export default {
|
||||||
|
title: 'Notification',
|
||||||
|
component: Notification,
|
||||||
|
};
|
||||||
|
|
||||||
|
const Template = (args) => (
|
||||||
|
<Container>
|
||||||
|
<Notification {...args} />
|
||||||
|
</Container>
|
||||||
|
);
|
||||||
|
|
||||||
|
export const Default = Template.bind({});
|
||||||
|
Default.args = {
|
||||||
|
type: 'warning',
|
||||||
|
children: 'Hello Notification',
|
||||||
|
};
|
||||||
|
Default.argTypes = {
|
||||||
|
onClose: { control: { disable: true } },
|
||||||
|
theme: { control: { disable: true } },
|
||||||
|
};
|
||||||
|
|
@ -1,31 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import { storiesOf } from '@storybook/react';
|
|
||||||
import { action } from '@storybook/addon-actions';
|
|
||||||
import styled from 'styled-components';
|
|
||||||
import { withKnobs, text, select } from '@storybook/addon-knobs';
|
|
||||||
import Notification from '../';
|
|
||||||
|
|
||||||
export const Container = styled.div`
|
|
||||||
display: flex;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
`;
|
|
||||||
|
|
||||||
storiesOf('Notification', module)
|
|
||||||
.addDecorator(withKnobs)
|
|
||||||
.add('default', () => (
|
|
||||||
<Container>
|
|
||||||
<Notification
|
|
||||||
type={select(
|
|
||||||
'type',
|
|
||||||
['info', 'success', 'warning', 'error'],
|
|
||||||
'warning'
|
|
||||||
)}
|
|
||||||
onClose={action('notification closed')}
|
|
||||||
>
|
|
||||||
{text('Message', 'Hello Notification')}
|
|
||||||
</Notification>
|
|
||||||
</Container>
|
|
||||||
));
|
|
||||||
|
|
@ -0,0 +1,33 @@
|
||||||
|
import React from 'react';
|
||||||
|
import styled from 'styled-components';
|
||||||
|
import SegmentedControl from './';
|
||||||
|
|
||||||
|
const Container = styled.div`
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
`;
|
||||||
|
|
||||||
|
export default {
|
||||||
|
title: 'SegmentedControl',
|
||||||
|
component: SegmentedControl,
|
||||||
|
};
|
||||||
|
|
||||||
|
const Template = (args) => (
|
||||||
|
<Container>
|
||||||
|
<SegmentedControl values={['Button1', 'Button2', 'Button3']} {...args} />
|
||||||
|
</Container>
|
||||||
|
);
|
||||||
|
|
||||||
|
export const Default = Template.bind({});
|
||||||
|
Default.args = {
|
||||||
|
selected: 'Button1',
|
||||||
|
disabled: false,
|
||||||
|
};
|
||||||
|
Default.argTypes = {
|
||||||
|
values: { control: { disable: true } },
|
||||||
|
onClick: { control: { disable: true } },
|
||||||
|
theme: { control: { disable: true } },
|
||||||
|
};
|
||||||
|
|
@ -1,27 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import { storiesOf } from '@storybook/react';
|
|
||||||
import { action } from '@storybook/addon-actions';
|
|
||||||
import styled from 'styled-components';
|
|
||||||
import { withKnobs, text, boolean } from '@storybook/addon-knobs';
|
|
||||||
import SegmentedControl from '../';
|
|
||||||
|
|
||||||
export const Container = styled.div`
|
|
||||||
display: flex;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
`;
|
|
||||||
|
|
||||||
storiesOf('SegmentedControl', module)
|
|
||||||
.addDecorator(withKnobs)
|
|
||||||
.add('default', () => (
|
|
||||||
<Container>
|
|
||||||
<SegmentedControl
|
|
||||||
values={['Button1', 'Button2', 'Button3']}
|
|
||||||
selected={text('selected', 'Button1')}
|
|
||||||
onClick={action('button selected')}
|
|
||||||
disabled={boolean('Disabled', false)}
|
|
||||||
/>
|
|
||||||
</Container>
|
|
||||||
));
|
|
||||||
|
|
@ -6,6 +6,9 @@ import styles from './styles';
|
||||||
|
|
||||||
const SelectContainer = createStyledComponent(styles, ReactSelect);
|
const SelectContainer = createStyledComponent(styles, ReactSelect);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Wrapper around [React Select](https://github.com/JedWatson/react-select) with themes and new props like `openOuterUp` and `menuMaxHeight`.
|
||||||
|
*/
|
||||||
export default class Select extends (PureComponent || Component) {
|
export default class Select extends (PureComponent || Component) {
|
||||||
render() {
|
render() {
|
||||||
return <SelectContainer {...this.props} />;
|
return <SelectContainer {...this.props} />;
|
||||||
|
|
|
||||||
44
packages/devui/src/Select/Select.stories.js
Normal file
44
packages/devui/src/Select/Select.stories.js
Normal file
|
|
@ -0,0 +1,44 @@
|
||||||
|
import React from 'react';
|
||||||
|
import styled from 'styled-components';
|
||||||
|
import Select from './';
|
||||||
|
import { options } from './options';
|
||||||
|
|
||||||
|
const Container = styled.div`
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
> div {
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
export default {
|
||||||
|
title: 'Select',
|
||||||
|
component: Select,
|
||||||
|
};
|
||||||
|
|
||||||
|
const Template = (args) => (
|
||||||
|
<Container>
|
||||||
|
<Select options={options} {...args} />
|
||||||
|
</Container>
|
||||||
|
);
|
||||||
|
|
||||||
|
export const Default = Template.bind({});
|
||||||
|
Default.args = {
|
||||||
|
value: 'one',
|
||||||
|
menuMaxHeight: 200,
|
||||||
|
autosize: false,
|
||||||
|
clearable: false,
|
||||||
|
disabled: false,
|
||||||
|
isLoading: false,
|
||||||
|
multi: false,
|
||||||
|
searchable: true,
|
||||||
|
openOuterUp: false,
|
||||||
|
};
|
||||||
|
Default.argTypes = {
|
||||||
|
simpleValue: { control: { disable: true } },
|
||||||
|
valueKey: { control: { disable: true } },
|
||||||
|
};
|
||||||
|
|
@ -1,47 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import styled from 'styled-components';
|
|
||||||
import { storiesOf } from '@storybook/react';
|
|
||||||
import { action } from '@storybook/addon-actions';
|
|
||||||
import { withKnobs, text, number, boolean } from '@storybook/addon-knobs';
|
|
||||||
import Select from '../';
|
|
||||||
import { options } from './options';
|
|
||||||
|
|
||||||
export const Container = styled.div`
|
|
||||||
display: flex;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
> div {
|
|
||||||
width: 90%;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
storiesOf('Select', module)
|
|
||||||
.addDecorator(withKnobs)
|
|
||||||
.add(
|
|
||||||
'default',
|
|
||||||
() => (
|
|
||||||
<Container>
|
|
||||||
<Select
|
|
||||||
value={text('value', 'one')}
|
|
||||||
menuMaxHeight={number('menuMaxHeight', 200)}
|
|
||||||
options={options}
|
|
||||||
onChange={action('selected')}
|
|
||||||
autosize={boolean('autosize', false)}
|
|
||||||
clearable={boolean('clearable', false)}
|
|
||||||
disabled={boolean('disabled', false)}
|
|
||||||
isLoading={boolean('isLoading', false)}
|
|
||||||
multi={boolean('multiselect', false)}
|
|
||||||
searchable={boolean('searchable', true)}
|
|
||||||
openOuterUp={boolean('openOuterUp', false)}
|
|
||||||
/>
|
|
||||||
</Container>
|
|
||||||
),
|
|
||||||
{
|
|
||||||
info:
|
|
||||||
'Wrapper around [React Select](https://github.com/JedWatson/react-select) with themes ' +
|
|
||||||
'and new props like `openOuterUp` and `menuMaxHeight`.',
|
|
||||||
}
|
|
||||||
);
|
|
||||||
37
packages/devui/src/Slider/Slider.stories.js
Normal file
37
packages/devui/src/Slider/Slider.stories.js
Normal file
|
|
@ -0,0 +1,37 @@
|
||||||
|
import React from 'react';
|
||||||
|
import styled from 'styled-components';
|
||||||
|
import Slider from './';
|
||||||
|
|
||||||
|
const Container = styled.div`
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
`;
|
||||||
|
|
||||||
|
export default {
|
||||||
|
title: 'Slider',
|
||||||
|
component: Slider,
|
||||||
|
};
|
||||||
|
|
||||||
|
const Template = (args) => (
|
||||||
|
<Container>
|
||||||
|
<Slider {...args} />
|
||||||
|
</Container>
|
||||||
|
);
|
||||||
|
|
||||||
|
export const Default = Template.bind({});
|
||||||
|
Default.args = {
|
||||||
|
value: 0,
|
||||||
|
min: 0,
|
||||||
|
max: 100,
|
||||||
|
label: 'Slider label',
|
||||||
|
sublabel: '(sublabel}',
|
||||||
|
withValue: false,
|
||||||
|
disabled: false,
|
||||||
|
};
|
||||||
|
Default.argTypes = {
|
||||||
|
onChange: { control: { disable: true } },
|
||||||
|
theme: { control: { disable: true } },
|
||||||
|
};
|
||||||
|
|
@ -1,31 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import { storiesOf } from '@storybook/react';
|
|
||||||
import { action } from '@storybook/addon-actions';
|
|
||||||
import styled from 'styled-components';
|
|
||||||
import { withKnobs, number, text, boolean } from '@storybook/addon-knobs';
|
|
||||||
import Slider from '../';
|
|
||||||
|
|
||||||
export const Container = styled.div`
|
|
||||||
display: flex;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
`;
|
|
||||||
|
|
||||||
storiesOf('Slider', module)
|
|
||||||
.addDecorator(withKnobs)
|
|
||||||
.add('default', () => (
|
|
||||||
<Container>
|
|
||||||
<Slider
|
|
||||||
value={number('value', 0)}
|
|
||||||
min={number('min', 0)}
|
|
||||||
max={number('max', 100)}
|
|
||||||
label={text('label', 'Slider label')}
|
|
||||||
sublabel={text('sublabel', '(sublabel)')}
|
|
||||||
withValue={boolean('withValue', false)}
|
|
||||||
disabled={boolean('disabled', false)}
|
|
||||||
onChange={action('slider changed')}
|
|
||||||
/>
|
|
||||||
</Container>
|
|
||||||
));
|
|
||||||
49
packages/devui/src/Tabs/Tabs.stories.js
Normal file
49
packages/devui/src/Tabs/Tabs.stories.js
Normal file
|
|
@ -0,0 +1,49 @@
|
||||||
|
import React from 'react';
|
||||||
|
import styled from 'styled-components';
|
||||||
|
import Tabs from './';
|
||||||
|
import { tabs, simple10Tabs } from './data';
|
||||||
|
|
||||||
|
const Container = styled.div`
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
`;
|
||||||
|
|
||||||
|
export default {
|
||||||
|
title: 'Tabs',
|
||||||
|
component: Tabs,
|
||||||
|
};
|
||||||
|
|
||||||
|
const Template = (args) => (
|
||||||
|
<Container>
|
||||||
|
<Tabs {...args} />
|
||||||
|
</Container>
|
||||||
|
);
|
||||||
|
|
||||||
|
export const Default = Template.bind({});
|
||||||
|
Default.args = {
|
||||||
|
tabs: simple10Tabs,
|
||||||
|
selected: '2',
|
||||||
|
main: true,
|
||||||
|
collapsible: true,
|
||||||
|
position: 'left',
|
||||||
|
};
|
||||||
|
Default.argTypes = {
|
||||||
|
tabs: { control: { disable: true } },
|
||||||
|
onClick: { control: { disable: true } },
|
||||||
|
};
|
||||||
|
|
||||||
|
export const WithContent = Template.bind({});
|
||||||
|
WithContent.args = {
|
||||||
|
tabs,
|
||||||
|
selected: 'Tab2',
|
||||||
|
main: false,
|
||||||
|
collapsible: false,
|
||||||
|
position: 'left',
|
||||||
|
};
|
||||||
|
WithContent.argTypes = {
|
||||||
|
tabs: { control: { disable: true } },
|
||||||
|
onClick: { control: { disable: true } },
|
||||||
|
};
|
||||||
|
|
@ -1,40 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import { storiesOf } from '@storybook/react';
|
|
||||||
import { action } from '@storybook/addon-actions';
|
|
||||||
import { withKnobs, text, boolean, select } from '@storybook/addon-knobs';
|
|
||||||
import styled from 'styled-components';
|
|
||||||
import Tabs from '../';
|
|
||||||
import { tabs, simple10Tabs } from './data';
|
|
||||||
|
|
||||||
const Container = styled.div`
|
|
||||||
display: flex;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
`;
|
|
||||||
|
|
||||||
storiesOf('Tabs', module)
|
|
||||||
.addDecorator(withKnobs)
|
|
||||||
.add('default', () => (
|
|
||||||
<Container>
|
|
||||||
<Tabs
|
|
||||||
tabs={simple10Tabs}
|
|
||||||
selected={text('selected', '2')}
|
|
||||||
main={boolean('main', true)}
|
|
||||||
onClick={action('tab selected')}
|
|
||||||
collapsible={boolean('collapsible', true)}
|
|
||||||
position={select('position', ['left', 'right', 'center'], 'left')}
|
|
||||||
/>
|
|
||||||
</Container>
|
|
||||||
))
|
|
||||||
.add('with content', () => (
|
|
||||||
<Tabs
|
|
||||||
tabs={tabs}
|
|
||||||
selected={text('selected', 'Tab2')}
|
|
||||||
main={boolean('main', false)}
|
|
||||||
onClick={action('tab selected')}
|
|
||||||
collapsible={boolean('collapsible', false)}
|
|
||||||
position={select('position', ['left', 'right', 'center'], 'left')}
|
|
||||||
/>
|
|
||||||
));
|
|
||||||
296
packages/devui/src/Toolbar/Toolbar.stories.js
Normal file
296
packages/devui/src/Toolbar/Toolbar.stories.js
Normal file
|
|
@ -0,0 +1,296 @@
|
||||||
|
import React from 'react';
|
||||||
|
import styled from 'styled-components';
|
||||||
|
import { MdPlayArrow } from 'react-icons/md';
|
||||||
|
import { MdFiberManualRecord } from 'react-icons/md';
|
||||||
|
import { MdKeyboardArrowLeft } from 'react-icons/md';
|
||||||
|
import { MdKeyboardArrowRight } from 'react-icons/md';
|
||||||
|
import {
|
||||||
|
Toolbar,
|
||||||
|
Divider,
|
||||||
|
Spacer,
|
||||||
|
Button,
|
||||||
|
Select,
|
||||||
|
Slider,
|
||||||
|
SegmentedControl,
|
||||||
|
Tabs as TabsComponent,
|
||||||
|
} from '../';
|
||||||
|
import { options } from '../Select/options';
|
||||||
|
import { simple10Tabs } from '../Tabs/data';
|
||||||
|
|
||||||
|
const Container = styled.div`
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const SliderContainer = styled.div`
|
||||||
|
width: 90%;
|
||||||
|
height: 80px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
export default {
|
||||||
|
title: 'Toolbar',
|
||||||
|
component: Toolbar,
|
||||||
|
};
|
||||||
|
|
||||||
|
const Template = ({
|
||||||
|
borderPosition,
|
||||||
|
title,
|
||||||
|
tooltipPosition,
|
||||||
|
disabled,
|
||||||
|
onClick,
|
||||||
|
label,
|
||||||
|
}) => (
|
||||||
|
<Container>
|
||||||
|
<Toolbar borderPosition={borderPosition}>
|
||||||
|
<Button
|
||||||
|
title={title}
|
||||||
|
tooltipPosition={tooltipPosition}
|
||||||
|
disabled={disabled}
|
||||||
|
onClick={onClick}
|
||||||
|
>
|
||||||
|
{label}
|
||||||
|
</Button>
|
||||||
|
<Divider />
|
||||||
|
<Button
|
||||||
|
title={title}
|
||||||
|
tooltipPosition={tooltipPosition}
|
||||||
|
disabled={disabled}
|
||||||
|
onClick={onClick}
|
||||||
|
>
|
||||||
|
<MdFiberManualRecord />
|
||||||
|
</Button>
|
||||||
|
<Divider />
|
||||||
|
<Spacer />
|
||||||
|
<Select options={options} />
|
||||||
|
</Toolbar>
|
||||||
|
</Container>
|
||||||
|
);
|
||||||
|
|
||||||
|
export const Default = Template.bind({});
|
||||||
|
Default.args = {
|
||||||
|
borderPosition: 'top',
|
||||||
|
title: 'Hello Tooltip',
|
||||||
|
tooltipPosition: 'top',
|
||||||
|
disabled: false,
|
||||||
|
label: 'Hello Button',
|
||||||
|
};
|
||||||
|
Default.argTypes = {
|
||||||
|
borderPosition: {
|
||||||
|
control: {
|
||||||
|
type: 'select',
|
||||||
|
options: ['top', 'bottom'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
tooltipPosition: {
|
||||||
|
control: {
|
||||||
|
type: 'select',
|
||||||
|
options: [
|
||||||
|
'top',
|
||||||
|
'bottom',
|
||||||
|
'left',
|
||||||
|
'right',
|
||||||
|
'bottom-left',
|
||||||
|
'bottom-right',
|
||||||
|
'top-left',
|
||||||
|
'top-right',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
onClick: {
|
||||||
|
action: 'button clicked',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const TabsTemplate = ({
|
||||||
|
title,
|
||||||
|
tooltipPosition,
|
||||||
|
disabled,
|
||||||
|
buttonOnClick,
|
||||||
|
label,
|
||||||
|
selected,
|
||||||
|
main,
|
||||||
|
tabOnClick,
|
||||||
|
collapsible,
|
||||||
|
position,
|
||||||
|
}) => (
|
||||||
|
<Container>
|
||||||
|
<Toolbar>
|
||||||
|
<Button
|
||||||
|
title={title}
|
||||||
|
tooltipPosition={tooltipPosition}
|
||||||
|
disabled={disabled}
|
||||||
|
onClick={buttonOnClick}
|
||||||
|
>
|
||||||
|
{label}
|
||||||
|
</Button>
|
||||||
|
<TabsComponent
|
||||||
|
tabs={simple10Tabs}
|
||||||
|
selected={selected}
|
||||||
|
main={main}
|
||||||
|
onClick={tabOnClick}
|
||||||
|
collapsible={collapsible}
|
||||||
|
position={position}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
title={title}
|
||||||
|
tooltipPosition={tooltipPosition}
|
||||||
|
disabled={disabled}
|
||||||
|
onClick={buttonOnClick}
|
||||||
|
>
|
||||||
|
{label}
|
||||||
|
</Button>
|
||||||
|
</Toolbar>
|
||||||
|
</Container>
|
||||||
|
);
|
||||||
|
|
||||||
|
export const Tabs = TabsTemplate.bind({});
|
||||||
|
Tabs.args = {
|
||||||
|
title: 'Hello Tooltip',
|
||||||
|
tooltipPosition: 'top',
|
||||||
|
disabled: false,
|
||||||
|
label: 'Hello Button',
|
||||||
|
selected: '2',
|
||||||
|
main: true,
|
||||||
|
collapsible: true,
|
||||||
|
position: 'center',
|
||||||
|
};
|
||||||
|
Tabs.argTypes = {
|
||||||
|
tooltipPosition: {
|
||||||
|
control: {
|
||||||
|
type: 'select',
|
||||||
|
options: [
|
||||||
|
'top',
|
||||||
|
'bottom',
|
||||||
|
'left',
|
||||||
|
'right',
|
||||||
|
'bottom-left',
|
||||||
|
'bottom-right',
|
||||||
|
'top-left',
|
||||||
|
'top-right',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
buttonOnClick: {
|
||||||
|
action: 'button clicked',
|
||||||
|
},
|
||||||
|
tabOnClick: {
|
||||||
|
action: 'tab selected',
|
||||||
|
},
|
||||||
|
position: {
|
||||||
|
control: {
|
||||||
|
type: 'select',
|
||||||
|
options: ['left', 'right', 'center'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const WithSliderTemplate = ({
|
||||||
|
title,
|
||||||
|
tooltipPosition,
|
||||||
|
playOnClick,
|
||||||
|
value,
|
||||||
|
min,
|
||||||
|
max,
|
||||||
|
label,
|
||||||
|
withValue,
|
||||||
|
onChange,
|
||||||
|
previousStateOnClick,
|
||||||
|
nextStateOnClick,
|
||||||
|
selected,
|
||||||
|
segmentedControlOnClick,
|
||||||
|
}) => (
|
||||||
|
<Container>
|
||||||
|
<SliderContainer>
|
||||||
|
<Toolbar noBorder fullHeight compact>
|
||||||
|
<Button
|
||||||
|
title={title}
|
||||||
|
tooltipPosition={tooltipPosition}
|
||||||
|
onClick={playOnClick}
|
||||||
|
>
|
||||||
|
<MdPlayArrow />
|
||||||
|
</Button>
|
||||||
|
<Slider
|
||||||
|
value={value}
|
||||||
|
min={min}
|
||||||
|
max={max}
|
||||||
|
label={label}
|
||||||
|
withValue={withValue}
|
||||||
|
onChange={onChange}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
title="Previous state"
|
||||||
|
tooltipPosition={tooltipPosition}
|
||||||
|
disabled
|
||||||
|
onClick={previousStateOnClick}
|
||||||
|
>
|
||||||
|
<MdKeyboardArrowLeft />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
title="Next state"
|
||||||
|
tooltipPosition={tooltipPosition}
|
||||||
|
onClick={nextStateOnClick}
|
||||||
|
>
|
||||||
|
<MdKeyboardArrowRight />
|
||||||
|
</Button>
|
||||||
|
<SegmentedControl
|
||||||
|
values={['live', '1x']}
|
||||||
|
selected={selected}
|
||||||
|
onClick={segmentedControlOnClick}
|
||||||
|
/>
|
||||||
|
</Toolbar>
|
||||||
|
</SliderContainer>
|
||||||
|
</Container>
|
||||||
|
);
|
||||||
|
|
||||||
|
export const WithSlider = WithSliderTemplate.bind({});
|
||||||
|
WithSlider.args = {
|
||||||
|
title: 'Play',
|
||||||
|
tooltipPosition: 'top',
|
||||||
|
value: 80,
|
||||||
|
min: 0,
|
||||||
|
max: 100,
|
||||||
|
label: 'Slider label',
|
||||||
|
withValue: false,
|
||||||
|
selected: 'live',
|
||||||
|
};
|
||||||
|
WithSlider.argTypes = {
|
||||||
|
tooltipPosition: {
|
||||||
|
control: {
|
||||||
|
type: 'select',
|
||||||
|
options: [
|
||||||
|
'top',
|
||||||
|
'bottom',
|
||||||
|
'left',
|
||||||
|
'right',
|
||||||
|
'bottom-left',
|
||||||
|
'bottom-right',
|
||||||
|
'top-left',
|
||||||
|
'top-right',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
playOnClick: {
|
||||||
|
action: 'button clicked',
|
||||||
|
},
|
||||||
|
onChange: {
|
||||||
|
action: 'slider changed',
|
||||||
|
},
|
||||||
|
previousStateOnClick: {
|
||||||
|
action: 'previous state clicked',
|
||||||
|
},
|
||||||
|
nextStateOnClick: {
|
||||||
|
action: 'next state clicked',
|
||||||
|
},
|
||||||
|
selected: {
|
||||||
|
control: {
|
||||||
|
type: 'select',
|
||||||
|
options: ['live', '1x'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
segmentedControlOnClick: {
|
||||||
|
action: 'button selected',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
@ -1,205 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import { storiesOf } from '@storybook/react';
|
|
||||||
import { action } from '@storybook/addon-actions';
|
|
||||||
import styled from 'styled-components';
|
|
||||||
import {
|
|
||||||
withKnobs,
|
|
||||||
text,
|
|
||||||
number,
|
|
||||||
boolean,
|
|
||||||
select,
|
|
||||||
} from '@storybook/addon-knobs';
|
|
||||||
import { MdPlayArrow } from 'react-icons/md';
|
|
||||||
import { MdFiberManualRecord } from 'react-icons/md';
|
|
||||||
import { MdKeyboardArrowLeft } from 'react-icons/md';
|
|
||||||
import { MdKeyboardArrowRight } from 'react-icons/md';
|
|
||||||
import {
|
|
||||||
Toolbar,
|
|
||||||
Divider,
|
|
||||||
Spacer,
|
|
||||||
Button,
|
|
||||||
Select,
|
|
||||||
Slider,
|
|
||||||
SegmentedControl,
|
|
||||||
Tabs,
|
|
||||||
} from '../../';
|
|
||||||
import { options } from '../../Select/stories/options';
|
|
||||||
import { simple10Tabs } from '../../Tabs/stories/data';
|
|
||||||
|
|
||||||
export const Container = styled.div`
|
|
||||||
display: flex;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
`;
|
|
||||||
|
|
||||||
export const SliderContainer = styled.div`
|
|
||||||
width: 90%;
|
|
||||||
height: 80px;
|
|
||||||
`;
|
|
||||||
|
|
||||||
storiesOf('Toolbar', module)
|
|
||||||
.addDecorator(withKnobs)
|
|
||||||
.add('default', () => (
|
|
||||||
<Container>
|
|
||||||
<Toolbar borderPosition={select('borderPosition', ['top', 'bottom'])}>
|
|
||||||
<Button
|
|
||||||
title={text('Title', 'Hello Tooltip')}
|
|
||||||
tooltipPosition={select('tooltipPosition', [
|
|
||||||
'top',
|
|
||||||
'bottom',
|
|
||||||
'left',
|
|
||||||
'right',
|
|
||||||
'bottom-left',
|
|
||||||
'bottom-right',
|
|
||||||
'top-left',
|
|
||||||
'top-right',
|
|
||||||
])}
|
|
||||||
disabled={boolean('Disabled', false)}
|
|
||||||
onClick={action('button clicked')}
|
|
||||||
>
|
|
||||||
{text('Label', 'Hello Button')}
|
|
||||||
</Button>
|
|
||||||
<Divider />
|
|
||||||
<Button
|
|
||||||
title={text('Title', 'Hello Tooltip')}
|
|
||||||
tooltipPosition={select('tooltipPosition', [
|
|
||||||
'top',
|
|
||||||
'bottom',
|
|
||||||
'left',
|
|
||||||
'right',
|
|
||||||
'bottom-left',
|
|
||||||
'bottom-right',
|
|
||||||
'top-left',
|
|
||||||
'top-right',
|
|
||||||
])}
|
|
||||||
disabled={boolean('Disabled', false)}
|
|
||||||
onClick={action('button clicked')}
|
|
||||||
>
|
|
||||||
<MdFiberManualRecord />
|
|
||||||
</Button>
|
|
||||||
<Divider />
|
|
||||||
<Spacer />
|
|
||||||
<Select options={options} />
|
|
||||||
</Toolbar>
|
|
||||||
</Container>
|
|
||||||
))
|
|
||||||
.add('tabs', () => (
|
|
||||||
<Container>
|
|
||||||
<Toolbar>
|
|
||||||
<Button
|
|
||||||
title={text('Title', 'Hello Tooltip')}
|
|
||||||
tooltipPosition={select('tooltipPosition', [
|
|
||||||
'top',
|
|
||||||
'bottom',
|
|
||||||
'left',
|
|
||||||
'right',
|
|
||||||
'bottom-left',
|
|
||||||
'bottom-right',
|
|
||||||
'top-left',
|
|
||||||
'top-right',
|
|
||||||
])}
|
|
||||||
disabled={boolean('Disabled', false)}
|
|
||||||
onClick={action('button clicked')}
|
|
||||||
>
|
|
||||||
{text('Label', 'Hello Button')}
|
|
||||||
</Button>
|
|
||||||
<Tabs
|
|
||||||
tabs={simple10Tabs}
|
|
||||||
selected={text('selected', '2')}
|
|
||||||
main={boolean('main', true)}
|
|
||||||
onClick={action('tab selected')}
|
|
||||||
collapsible={boolean('collapsible', true)}
|
|
||||||
position={select('position', ['left', 'right', 'center'], 'center')}
|
|
||||||
/>
|
|
||||||
<Button
|
|
||||||
title={text('Title', 'Hello Tooltip')}
|
|
||||||
tooltipPosition={select('tooltipPosition', [
|
|
||||||
'top',
|
|
||||||
'bottom',
|
|
||||||
'left',
|
|
||||||
'right',
|
|
||||||
'bottom-left',
|
|
||||||
'bottom-right',
|
|
||||||
'top-left',
|
|
||||||
'top-right',
|
|
||||||
])}
|
|
||||||
disabled={boolean('Disabled', false)}
|
|
||||||
onClick={action('button clicked')}
|
|
||||||
>
|
|
||||||
{text('Label', 'Hello Button')}
|
|
||||||
</Button>
|
|
||||||
</Toolbar>
|
|
||||||
</Container>
|
|
||||||
))
|
|
||||||
.add('with slider', () => (
|
|
||||||
<Container>
|
|
||||||
<SliderContainer>
|
|
||||||
<Toolbar noBorder fullHeight compact>
|
|
||||||
<Button
|
|
||||||
title={text('play title', 'Play')}
|
|
||||||
tooltipPosition={select('tooltipPosition', [
|
|
||||||
'top',
|
|
||||||
'bottom',
|
|
||||||
'left',
|
|
||||||
'right',
|
|
||||||
'bottom-left',
|
|
||||||
'bottom-right',
|
|
||||||
'top-left',
|
|
||||||
'top-right',
|
|
||||||
])}
|
|
||||||
onClick={action('button clicked')}
|
|
||||||
>
|
|
||||||
<MdPlayArrow />
|
|
||||||
</Button>
|
|
||||||
<Slider
|
|
||||||
value={number('value', 80)}
|
|
||||||
min={number('min', 0)}
|
|
||||||
max={number('max', 100)}
|
|
||||||
label={text('label', 'Slider label')}
|
|
||||||
withValue={boolean('withValue', false)}
|
|
||||||
onChange={action('slider changed')}
|
|
||||||
/>
|
|
||||||
<Button
|
|
||||||
title="Previous state"
|
|
||||||
tooltipPosition={select('tooltipPosition', [
|
|
||||||
'top',
|
|
||||||
'bottom',
|
|
||||||
'left',
|
|
||||||
'right',
|
|
||||||
'bottom-left',
|
|
||||||
'bottom-right',
|
|
||||||
'top-left',
|
|
||||||
'top-right',
|
|
||||||
])}
|
|
||||||
disabled
|
|
||||||
onClick={action('previous state clicked')}
|
|
||||||
>
|
|
||||||
<MdKeyboardArrowLeft />
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
title="Next state"
|
|
||||||
tooltipPosition={select('tooltipPosition', [
|
|
||||||
'top',
|
|
||||||
'bottom',
|
|
||||||
'left',
|
|
||||||
'right',
|
|
||||||
'bottom-left',
|
|
||||||
'bottom-right',
|
|
||||||
'top-left',
|
|
||||||
'top-right',
|
|
||||||
])}
|
|
||||||
onClick={action('next state clicked')}
|
|
||||||
>
|
|
||||||
<MdKeyboardArrowRight />
|
|
||||||
</Button>
|
|
||||||
<SegmentedControl
|
|
||||||
values={['live', '1x']}
|
|
||||||
selected={select('selected', ['live', '1x'], 'live')}
|
|
||||||
onClick={action('button selected')}
|
|
||||||
/>
|
|
||||||
</Toolbar>
|
|
||||||
</SliderContainer>
|
|
||||||
</Container>
|
|
||||||
));
|
|
||||||
|
|
@ -2,7 +2,7 @@ import React from 'react';
|
||||||
import { render, mount } from 'enzyme';
|
import { render, mount } from 'enzyme';
|
||||||
import { renderToJson } from 'enzyme-to-json';
|
import { renderToJson } from 'enzyme-to-json';
|
||||||
import { ContextMenu } from '../src';
|
import { ContextMenu } from '../src';
|
||||||
import { items } from '../src/ContextMenu/stories/data';
|
import { items } from '../src/ContextMenu/data';
|
||||||
|
|
||||||
describe('ContextMenu', function () {
|
describe('ContextMenu', function () {
|
||||||
it('renders correctly', () => {
|
it('renders correctly', () => {
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@ import React from 'react';
|
||||||
import { shallow, mount } from 'enzyme';
|
import { shallow, mount } from 'enzyme';
|
||||||
import { shallowToJson } from 'enzyme-to-json';
|
import { shallowToJson } from 'enzyme-to-json';
|
||||||
import { Form } from '../src';
|
import { Form } from '../src';
|
||||||
import { schema, uiSchema, formData } from '../src/Form/stories/schema';
|
import { schema, uiSchema, formData } from '../src/Form/schema';
|
||||||
|
|
||||||
describe('Form', function () {
|
describe('Form', function () {
|
||||||
it('renders correctly', () => {
|
it('renders correctly', () => {
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@ import React from 'react';
|
||||||
import { render, mount } from 'enzyme';
|
import { render, mount } from 'enzyme';
|
||||||
import { renderToJson, mountToJson } from 'enzyme-to-json';
|
import { renderToJson, mountToJson } from 'enzyme-to-json';
|
||||||
import { Select } from '../src';
|
import { Select } from '../src';
|
||||||
import { options } from '../src/Select/stories/options';
|
import { options } from '../src/Select/options';
|
||||||
|
|
||||||
describe('Select', function () {
|
describe('Select', function () {
|
||||||
it('renders correctly', () => {
|
it('renders correctly', () => {
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@ import React from 'react';
|
||||||
import { render, mount } from 'enzyme';
|
import { render, mount } from 'enzyme';
|
||||||
import { renderToJson } from 'enzyme-to-json';
|
import { renderToJson } from 'enzyme-to-json';
|
||||||
import { Tabs } from '../src';
|
import { Tabs } from '../src';
|
||||||
import { tabs, simple10Tabs } from '../src/Tabs/stories/data';
|
import { tabs, simple10Tabs } from '../src/Tabs/data';
|
||||||
|
|
||||||
describe('Tabs', function () {
|
describe('Tabs', function () {
|
||||||
it('renders correctly', () => {
|
it('renders correctly', () => {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user