mirror of
https://github.com/reduxjs/redux-devtools.git
synced 2025-01-31 11:51:41 +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\"",
|
||||
"test:update": "npm run jest -- -u",
|
||||
"test": "jest --no-cache",
|
||||
"storybook": "start-storybook -p 9001 -c .storybook -s ./fonts",
|
||||
"publish-storybook": "bash .scripts/publish_storybook.sh",
|
||||
"storybook": "start-storybook -p 6006 -s ./fonts",
|
||||
"build-storybook": "build-storybook -s ./fonts",
|
||||
"prepare": "npm run build",
|
||||
"prepublishOnly": "npm run test && npm run build"
|
||||
},
|
||||
|
|
@ -36,20 +36,17 @@
|
|||
"@babel/plugin-transform-runtime": "^7.11.0",
|
||||
"@babel/preset-env": "^7.11.0",
|
||||
"@babel/preset-react": "^7.10.4",
|
||||
"@storybook/addon-actions": "^4.1.18",
|
||||
"@storybook/addon-info": "^4.1.18",
|
||||
"@storybook/addon-knobs": "^4.1.18",
|
||||
"@storybook/addon-options": "^4.1.18",
|
||||
"@storybook/react": "4.1.18",
|
||||
"@storybook/addon-essentials": "^6.0.21",
|
||||
"@storybook/react": "^6.0.21",
|
||||
"babel-loader": "^8.1.0",
|
||||
"enzyme": "^3.11.0",
|
||||
"enzyme-adapter-react-16": "^1.15.3",
|
||||
"enzyme-to-json": "^3.5.0",
|
||||
"git-url-parse": "^11.1.2",
|
||||
"jest": "^26.2.2",
|
||||
"jsdom": "^16.4.0",
|
||||
"react": "^16.13.1",
|
||||
"react-dom": "^16.13.1",
|
||||
"react-is": "^16.13.1",
|
||||
"react-test-renderer": "^16.13.1",
|
||||
"rimraf": "^3.0.2",
|
||||
"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)
|
||||
);
|
||||
|
||||
/**
|
||||
* Based on [CodeMirror](http://codemirror.net/).
|
||||
*/
|
||||
export default class Editor extends Component {
|
||||
componentDidMount() {
|
||||
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 { select } from '@storybook/addon-knobs';
|
||||
import Editor from '../';
|
||||
import Tabs from '../../Tabs';
|
||||
import Editor from './';
|
||||
import Tabs from '../Tabs';
|
||||
|
||||
const value1 = `
|
||||
const func1 = () => {}
|
||||
|
|
@ -18,7 +17,7 @@ export default class WithTabs extends Component {
|
|||
};
|
||||
|
||||
render() {
|
||||
const { lineNumbers } = this.props;
|
||||
const { align, lineNumbers } = this.props;
|
||||
return (
|
||||
<Tabs
|
||||
tabs={[
|
||||
|
|
@ -37,7 +36,7 @@ export default class WithTabs extends Component {
|
|||
onClick={(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);
|
||||
|
||||
/**
|
||||
* Wrapper around [`react-jsonschema-form`](https://github.com/mozilla-services/react-jsonschema-form) with custom widgets.
|
||||
*/
|
||||
export default class Form extends (PureComponent || Component) {
|
||||
render() {
|
||||
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);
|
||||
|
||||
/**
|
||||
* 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) {
|
||||
render() {
|
||||
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 { renderToJson } from 'enzyme-to-json';
|
||||
import { ContextMenu } from '../src';
|
||||
import { items } from '../src/ContextMenu/stories/data';
|
||||
import { items } from '../src/ContextMenu/data';
|
||||
|
||||
describe('ContextMenu', function () {
|
||||
it('renders correctly', () => {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import React from 'react';
|
|||
import { shallow, mount } from 'enzyme';
|
||||
import { shallowToJson } from 'enzyme-to-json';
|
||||
import { Form } from '../src';
|
||||
import { schema, uiSchema, formData } from '../src/Form/stories/schema';
|
||||
import { schema, uiSchema, formData } from '../src/Form/schema';
|
||||
|
||||
describe('Form', function () {
|
||||
it('renders correctly', () => {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import React from 'react';
|
|||
import { render, mount } from 'enzyme';
|
||||
import { renderToJson, mountToJson } from 'enzyme-to-json';
|
||||
import { Select } from '../src';
|
||||
import { options } from '../src/Select/stories/options';
|
||||
import { options } from '../src/Select/options';
|
||||
|
||||
describe('Select', function () {
|
||||
it('renders correctly', () => {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import React from 'react';
|
|||
import { render, mount } from 'enzyme';
|
||||
import { renderToJson } from 'enzyme-to-json';
|
||||
import { Tabs } from '../src';
|
||||
import { tabs, simple10Tabs } from '../src/Tabs/stories/data';
|
||||
import { tabs, simple10Tabs } from '../src/Tabs/data';
|
||||
|
||||
describe('Tabs', function () {
|
||||
it('renders correctly', () => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user