mirror of
https://github.com/yldio/copilot.git
synced 2024-11-11 05:40:11 +02:00
moving stories to directory folders
This commit is contained in:
parent
466fe72459
commit
8f2e140cbe
18
ui/src/components/checkbox/story.js
Normal file
18
ui/src/components/checkbox/story.js
Normal file
@ -0,0 +1,18 @@
|
||||
const React = require('react');
|
||||
|
||||
const {
|
||||
storiesOf
|
||||
} = require('@kadira/storybook');
|
||||
|
||||
const Checkbox = require('./');
|
||||
|
||||
storiesOf('Checkbox', module)
|
||||
.add('Default', () => (
|
||||
<Checkbox />
|
||||
))
|
||||
.add('Checked', () => (
|
||||
<Checkbox checked onChange={function noop() {}} />
|
||||
))
|
||||
.add('Disabled', () => (
|
||||
<Checkbox disabled />
|
||||
));
|
20
ui/src/components/close/story.js
Normal file
20
ui/src/components/close/story.js
Normal file
@ -0,0 +1,20 @@
|
||||
const React = require('react');
|
||||
|
||||
const {
|
||||
storiesOf
|
||||
} = require('@kadira/storybook');
|
||||
|
||||
const Base = require('../base');
|
||||
const Close = require('./');
|
||||
|
||||
storiesOf('Close', module)
|
||||
.add('Default', () => (
|
||||
<Base
|
||||
style={{
|
||||
position: 'relative',
|
||||
width: 60
|
||||
}}
|
||||
>
|
||||
<Close onClick={function noop() {}} />
|
||||
</Base>
|
||||
));
|
35
ui/src/components/input/story.js
Normal file
35
ui/src/components/input/story.js
Normal file
@ -0,0 +1,35 @@
|
||||
const React = require('react');
|
||||
|
||||
const {
|
||||
storiesOf
|
||||
} = require('@kadira/storybook');
|
||||
|
||||
const Base= require('../base');
|
||||
const Input = require('./');
|
||||
|
||||
storiesOf('Input', module)
|
||||
.add('Default', () => (
|
||||
<Base>
|
||||
<Input placeholder="I am the placeholder" />
|
||||
</Base>
|
||||
))
|
||||
.add('type=email', () => (
|
||||
<Base>
|
||||
<Input
|
||||
label='Email Address'
|
||||
placeholder='Enter email'
|
||||
type='email'
|
||||
>
|
||||
<small>We'll never share your email with anyone else.</small>
|
||||
</Input>
|
||||
</Base>
|
||||
))
|
||||
.add('Error', () => (
|
||||
<Base>
|
||||
<Input
|
||||
error="Somethings missing"
|
||||
placeholder="There was an error"
|
||||
value="alexw/makeusproud.com"
|
||||
/>
|
||||
</Base>
|
||||
));
|
17
ui/src/components/modal/story.js
Normal file
17
ui/src/components/modal/story.js
Normal file
@ -0,0 +1,17 @@
|
||||
const React = require('react');
|
||||
|
||||
const {
|
||||
storiesOf
|
||||
} = require('@kadira/storybook');
|
||||
|
||||
const Base= require('../base');
|
||||
const Modal = require('./');
|
||||
|
||||
storiesOf('Modal', module)
|
||||
.add('Default', () => (
|
||||
<Base>
|
||||
<Modal>
|
||||
<h2>This is the Modal</h2>
|
||||
</Modal>
|
||||
</Base>
|
||||
));
|
34
ui/src/components/notification/story.js
Normal file
34
ui/src/components/notification/story.js
Normal file
@ -0,0 +1,34 @@
|
||||
const React = require('react');
|
||||
|
||||
const {
|
||||
storiesOf
|
||||
} = require('@kadira/storybook');
|
||||
|
||||
const Base= require('../base');
|
||||
const Notificaton = require('./');
|
||||
|
||||
storiesOf('Notificaton', module)
|
||||
.add('Default', () => (
|
||||
<Base>
|
||||
<Notificaton>
|
||||
<span>This is the default content</span>
|
||||
</Notificaton>
|
||||
</Base>
|
||||
))
|
||||
.add('Success', () => (
|
||||
<Base>
|
||||
<Notificaton
|
||||
close={function noop() {}}
|
||||
type="success"
|
||||
>
|
||||
<span>This is a success notification that is closable</span>
|
||||
</Notificaton>
|
||||
</Base>
|
||||
))
|
||||
.add('Alert', () => (
|
||||
<Base>
|
||||
<Notificaton type="alert">
|
||||
<span>This is the alert content</span>
|
||||
</Notificaton>
|
||||
</Base>
|
||||
));
|
20
ui/src/components/pagination/story.js
Normal file
20
ui/src/components/pagination/story.js
Normal file
@ -0,0 +1,20 @@
|
||||
const React = require('react');
|
||||
|
||||
const {
|
||||
storiesOf
|
||||
} = require('@kadira/storybook');
|
||||
|
||||
const Pagination = require('./');
|
||||
|
||||
storiesOf('Pagination', module)
|
||||
.add('Default', () => (
|
||||
<Pagination>
|
||||
<a>
|
||||
<span>«</span>
|
||||
<span>Previous</span>
|
||||
</a>
|
||||
<a>1</a>
|
||||
<a active>2</a>
|
||||
<a>3</a>
|
||||
</Pagination>
|
||||
));
|
27
ui/src/components/radio-group/story.js
Normal file
27
ui/src/components/radio-group/story.js
Normal file
@ -0,0 +1,27 @@
|
||||
const React = require('react');
|
||||
|
||||
const {
|
||||
storiesOf
|
||||
} = require('@kadira/storybook');
|
||||
|
||||
const Base= require('../base');
|
||||
const RadioGroup = require('./');
|
||||
const Radio = require('./item');
|
||||
|
||||
|
||||
storiesOf('Radio Group', module)
|
||||
.add('Default', () => (
|
||||
<Base>
|
||||
<RadioGroup>
|
||||
<Radio name='hello' value='default'>
|
||||
Video killed the radio star
|
||||
</Radio>
|
||||
<Radio name='hello' value='fancy'>
|
||||
Video killed the radio star
|
||||
</Radio>
|
||||
<Radio name='hello' value='none'>
|
||||
Video killed the radio star
|
||||
</Radio>
|
||||
</RadioGroup>
|
||||
</Base>
|
||||
));
|
20
ui/src/components/radio/story.js
Normal file
20
ui/src/components/radio/story.js
Normal file
@ -0,0 +1,20 @@
|
||||
const React = require('react');
|
||||
|
||||
const {
|
||||
storiesOf
|
||||
} = require('@kadira/storybook');
|
||||
|
||||
const Radio = require('./');
|
||||
|
||||
storiesOf('Radio', module)
|
||||
.add('Default', () => (
|
||||
<Radio>
|
||||
Video killed the radio star
|
||||
</Radio>
|
||||
))
|
||||
.add('Checked', () => (
|
||||
<Radio checked onChange={function noop() {}} />
|
||||
))
|
||||
.add('Disabled', () => (
|
||||
<Radio disabled />
|
||||
));
|
12
ui/src/components/range-slider/story.js
Normal file
12
ui/src/components/range-slider/story.js
Normal file
@ -0,0 +1,12 @@
|
||||
const React = require('react');
|
||||
|
||||
const {
|
||||
storiesOf
|
||||
} = require('@kadira/storybook');
|
||||
|
||||
const RangeSlider = require('./');
|
||||
|
||||
storiesOf('Range Slider', module)
|
||||
.add('Default', () => (
|
||||
<RangeSlider />
|
||||
));
|
28
ui/src/components/select-custom/story.js
Normal file
28
ui/src/components/select-custom/story.js
Normal file
@ -0,0 +1,28 @@
|
||||
const React = require('react');
|
||||
|
||||
const {
|
||||
storiesOf
|
||||
} = require('@kadira/storybook');
|
||||
|
||||
const {
|
||||
selectData
|
||||
} = require('../../shared/fake-data');
|
||||
|
||||
const SelectCustom = require('./');
|
||||
|
||||
storiesOf('Select Custom', module)
|
||||
.add('Default', () => (
|
||||
<SelectCustom
|
||||
label="This is the label"
|
||||
onChange={function noop() {}}
|
||||
options={selectData}
|
||||
/>
|
||||
))
|
||||
.add('Multiple', () => (
|
||||
<SelectCustom
|
||||
label="This is the label"
|
||||
multi
|
||||
onChange={function noop() {}}
|
||||
options={selectData}
|
||||
/>
|
||||
));
|
26
ui/src/components/select/story.js
Normal file
26
ui/src/components/select/story.js
Normal file
@ -0,0 +1,26 @@
|
||||
const React = require('react');
|
||||
|
||||
const {
|
||||
storiesOf
|
||||
} = require('@kadira/storybook');
|
||||
|
||||
const Select = require('./');
|
||||
|
||||
storiesOf('Select', module)
|
||||
.add('Default', () => (
|
||||
<Select label='example select'>
|
||||
<option>Apple</option>
|
||||
<option>Banana</option>
|
||||
<option>Pear</option>
|
||||
<option>Orange</option>
|
||||
</Select>
|
||||
))
|
||||
.add('multiple', () => (
|
||||
<Select label='example multiple select' multiple>
|
||||
<option>1</option>
|
||||
<option>2</option>
|
||||
<option>3</option>
|
||||
<option>4</option>
|
||||
<option>5</option>
|
||||
</Select>
|
||||
));
|
20
ui/src/components/tabs/story.js
Normal file
20
ui/src/components/tabs/story.js
Normal file
@ -0,0 +1,20 @@
|
||||
const React = require('react');
|
||||
|
||||
const {
|
||||
storiesOf
|
||||
} = require('@kadira/storybook');
|
||||
|
||||
const Tabs = require('./');
|
||||
const Tab = require('./tab');
|
||||
|
||||
storiesOf('Tabs', module)
|
||||
.add('Default', () => (
|
||||
<Tabs name='my-tab-group'>
|
||||
<Tab title='Containers'>
|
||||
<h1>Containers</h1>
|
||||
</Tab>
|
||||
<Tab title='Users'>
|
||||
<h1>User</h1>
|
||||
</Tab>
|
||||
</Tabs>
|
||||
));
|
30
ui/src/components/toggle/story.js
Normal file
30
ui/src/components/toggle/story.js
Normal file
@ -0,0 +1,30 @@
|
||||
const React = require('react');
|
||||
|
||||
const {
|
||||
storiesOf
|
||||
} = require('@kadira/storybook');
|
||||
|
||||
const Toggle = require('./');
|
||||
|
||||
storiesOf('Toggle', module)
|
||||
.add('default', () => (
|
||||
<Toggle checked />
|
||||
))
|
||||
.add('checked', () => (
|
||||
<Toggle
|
||||
defaultChecked
|
||||
options={[
|
||||
{
|
||||
label: 'Topology',
|
||||
checked: true
|
||||
},
|
||||
{
|
||||
label: 'List',
|
||||
checked: false
|
||||
}
|
||||
]}
|
||||
/>
|
||||
))
|
||||
.add('no props', () => (
|
||||
<Toggle />
|
||||
));
|
29
ui/src/components/tooltip/story.js
Normal file
29
ui/src/components/tooltip/story.js
Normal file
@ -0,0 +1,29 @@
|
||||
const React = require('react');
|
||||
|
||||
const {
|
||||
storiesOf
|
||||
} = require('@kadira/storybook');
|
||||
|
||||
const Tooltip = require('./');
|
||||
|
||||
storiesOf('Tooltip', module)
|
||||
.add('default', () => (
|
||||
<Tooltip>
|
||||
<li>One</li>
|
||||
<li>Two</li>
|
||||
<li>Three</li>
|
||||
</Tooltip>
|
||||
))
|
||||
.add('custom position', () => {
|
||||
const arrowPosition = {
|
||||
left: '90%',
|
||||
bottom: '100%'
|
||||
};
|
||||
return (
|
||||
<Tooltip arrowPosition={arrowPosition}>
|
||||
<li>One</li>
|
||||
<li>Two</li>
|
||||
<li>Three</li>
|
||||
</Tooltip>
|
||||
);
|
||||
});
|
24
ui/src/components/widget/story.js
Normal file
24
ui/src/components/widget/story.js
Normal file
@ -0,0 +1,24 @@
|
||||
const React = require('react');
|
||||
|
||||
const {
|
||||
storiesOf
|
||||
} = require('@kadira/storybook');
|
||||
|
||||
const Widget = require('./');
|
||||
|
||||
storiesOf('Widget', module)
|
||||
.add('single', () => (
|
||||
<Widget
|
||||
checked
|
||||
name='flag'
|
||||
selectable='single'
|
||||
value='flag_1'
|
||||
>
|
||||
<img
|
||||
alt='england flag'
|
||||
// eslint-disable-next-line max-len
|
||||
src='https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Union_flag_1606_(Kings_Colors).svg/2000px-Union_flag_1606_(Kings_Colors).svg.png'
|
||||
/>
|
||||
<p>Some text</p>
|
||||
</Widget>
|
||||
));
|
@ -8,10 +8,8 @@ const {
|
||||
const {
|
||||
Base,
|
||||
Container,
|
||||
Checkbox,
|
||||
Row,
|
||||
Column,
|
||||
Close,
|
||||
AddMetric: {
|
||||
AddMetricButton,
|
||||
AddMetricDescription,
|
||||
@ -19,7 +17,6 @@ const {
|
||||
AddMetricTile,
|
||||
AddMetricTitle
|
||||
},
|
||||
Input,
|
||||
List: {
|
||||
ListItemDescription,
|
||||
ListItemHeader,
|
||||
@ -39,27 +36,8 @@ const {
|
||||
MiniMetricSubtitle,
|
||||
MiniMetricView
|
||||
},
|
||||
Modal,
|
||||
Notificaton,
|
||||
Pagination,
|
||||
RangeSlider,
|
||||
Select,
|
||||
SelectCustom,
|
||||
Tabs,
|
||||
Tab,
|
||||
Toggle,
|
||||
Tooltip,
|
||||
Widget,
|
||||
Radio,
|
||||
RadioGroup
|
||||
} = require('../src/');
|
||||
|
||||
const fakeData = require('../src/shared/fake-data');
|
||||
|
||||
const {
|
||||
selectData
|
||||
} = fakeData;
|
||||
|
||||
const styles = {
|
||||
base: {
|
||||
backgroundColor: '#FFEBEE'
|
||||
@ -148,245 +126,6 @@ storiesOf('Add Metric', module)
|
||||
</Base>
|
||||
));
|
||||
|
||||
storiesOf('Checkbox', module)
|
||||
.add('Default', () => (
|
||||
<Checkbox />
|
||||
))
|
||||
.add('Checked', () => (
|
||||
<Checkbox checked onChange={function noop() {}} />
|
||||
))
|
||||
.add('Disabled', () => (
|
||||
<Checkbox disabled />
|
||||
));
|
||||
|
||||
storiesOf('Radio', module)
|
||||
.add('Default', () => (
|
||||
<Radio>
|
||||
Video killed the radio star
|
||||
</Radio>
|
||||
))
|
||||
.add('Checked', () => (
|
||||
<Radio checked onChange={function noop() {}} />
|
||||
))
|
||||
.add('Disabled', () => (
|
||||
<Radio disabled />
|
||||
));
|
||||
|
||||
storiesOf('Input', module)
|
||||
.add('Default', () => (
|
||||
<Base>
|
||||
<Input placeholder="I am the placeholder" />
|
||||
</Base>
|
||||
))
|
||||
.add('type=email', () => (
|
||||
<Base>
|
||||
<Input
|
||||
label='Email Address'
|
||||
placeholder='Enter email'
|
||||
type='email'
|
||||
>
|
||||
<small>We'll never share your email with anyone else.</small>
|
||||
</Input>
|
||||
</Base>
|
||||
))
|
||||
.add('Error', () => (
|
||||
<Base>
|
||||
<Input
|
||||
error="Somethings missing"
|
||||
placeholder="There was an error"
|
||||
value="alexw/makeusproud.com"
|
||||
/>
|
||||
</Base>
|
||||
));
|
||||
|
||||
storiesOf('Modal', module)
|
||||
.add('Default', () => (
|
||||
<Modal>
|
||||
<h2>This is the Modal</h2>
|
||||
</Modal>
|
||||
));
|
||||
|
||||
storiesOf('Notificaton', module)
|
||||
.add('Default', () => (
|
||||
<Base>
|
||||
<Notificaton>
|
||||
<span>This is the default content</span>
|
||||
</Notificaton>
|
||||
</Base>
|
||||
))
|
||||
.add('Success', () => (
|
||||
<Base>
|
||||
<Notificaton
|
||||
close={function noop() {}}
|
||||
type="success"
|
||||
>
|
||||
<span>This is a success notification that is closable</span>
|
||||
</Notificaton>
|
||||
</Base>
|
||||
))
|
||||
.add('Alert', () => (
|
||||
<Base>
|
||||
<Notificaton type="alert">
|
||||
<span>This is the alert content</span>
|
||||
</Notificaton>
|
||||
</Base>
|
||||
));
|
||||
|
||||
storiesOf('Pagination', module)
|
||||
.add('Default', () => (
|
||||
<Pagination>
|
||||
<a>
|
||||
<span>«</span>
|
||||
<span>Previous</span>
|
||||
</a>
|
||||
<a>1</a>
|
||||
<a active>2</a>
|
||||
<a>3</a>
|
||||
</Pagination>
|
||||
));
|
||||
|
||||
storiesOf('Radio Group', module)
|
||||
.add('Default', () => (
|
||||
<RadioGroup>
|
||||
<Radio name='hello' value='default'>
|
||||
Video killed the radio star
|
||||
</Radio>
|
||||
<Radio name='hello' value='fancy'>
|
||||
Video killed the radio star
|
||||
</Radio>
|
||||
<Radio name='hello' value='none'>
|
||||
Video killed the radio star
|
||||
</Radio>
|
||||
</RadioGroup>
|
||||
));
|
||||
|
||||
storiesOf('RangeSlider', module)
|
||||
.add('Default', () => (
|
||||
<RangeSlider />
|
||||
));
|
||||
|
||||
storiesOf('Select', module)
|
||||
.add('Default', () => (
|
||||
<Select label='example select'>
|
||||
<option>Apple</option>
|
||||
<option>Banana</option>
|
||||
<option>Pear</option>
|
||||
<option>Orange</option>
|
||||
</Select>
|
||||
))
|
||||
.add('multiple', () => (
|
||||
<Select label='example multiple select' multiple>
|
||||
<option>1</option>
|
||||
<option>2</option>
|
||||
<option>3</option>
|
||||
<option>4</option>
|
||||
<option>5</option>
|
||||
</Select>
|
||||
));
|
||||
|
||||
storiesOf('Select Custom', module)
|
||||
.add('Default', () => (
|
||||
<SelectCustom
|
||||
label="This is the label"
|
||||
onChange={function noop() {}}
|
||||
options={selectData}
|
||||
/>
|
||||
))
|
||||
.add('Multiple', () => (
|
||||
<SelectCustom
|
||||
label="This is the label"
|
||||
multi
|
||||
onChange={function noop() {}}
|
||||
options={selectData}
|
||||
/>
|
||||
));
|
||||
|
||||
storiesOf('Tabs', module)
|
||||
.add('Default', () => (
|
||||
<Tabs name='my-tab-group'>
|
||||
<Tab title='Containers'>
|
||||
<h1>Containers</h1>
|
||||
</Tab>
|
||||
<Tab title='Users'>
|
||||
<h1>User</h1>
|
||||
</Tab>
|
||||
</Tabs>
|
||||
));
|
||||
|
||||
storiesOf('Close', module)
|
||||
.add('Default', () => (
|
||||
<Base
|
||||
style={{
|
||||
position: 'relative',
|
||||
width: 60
|
||||
}}
|
||||
>
|
||||
<Close onClick={function noop() {}} />
|
||||
</Base>
|
||||
));
|
||||
|
||||
storiesOf('Toggle', module)
|
||||
.add('default', () => (
|
||||
<Toggle checked />
|
||||
))
|
||||
.add('checked', () => (
|
||||
<Toggle
|
||||
defaultChecked
|
||||
options={[
|
||||
{
|
||||
label: 'Topology',
|
||||
checked: true
|
||||
},
|
||||
{
|
||||
label: 'List',
|
||||
checked: false
|
||||
}
|
||||
]}
|
||||
/>
|
||||
))
|
||||
.add('no props', () => (
|
||||
<Toggle />
|
||||
));
|
||||
|
||||
storiesOf('Tooltip', module)
|
||||
.add('default', () => (
|
||||
<Tooltip>
|
||||
<li>One</li>
|
||||
<li>Two</li>
|
||||
<li>Three</li>
|
||||
</Tooltip>
|
||||
))
|
||||
.add('custom position', () => {
|
||||
const arrowPosition = {
|
||||
left: '90%',
|
||||
bottom: '100%'
|
||||
};
|
||||
return (
|
||||
<Tooltip arrowPosition={arrowPosition}>
|
||||
<li>One</li>
|
||||
<li>Two</li>
|
||||
<li>Three</li>
|
||||
</Tooltip>
|
||||
);
|
||||
});
|
||||
|
||||
storiesOf('Widget', module)
|
||||
.add('single', () => (
|
||||
<Widget
|
||||
checked
|
||||
name='flag'
|
||||
selectable='single'
|
||||
value='flag_1'
|
||||
>
|
||||
<img
|
||||
alt='england flag'
|
||||
// eslint-disable-next-line max-len
|
||||
src='https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Union_flag_1606_(Kings_Colors).svg/2000px-Union_flag_1606_(Kings_Colors).svg.png'
|
||||
/>
|
||||
<p>Some text</p>
|
||||
</Widget>
|
||||
));
|
||||
|
||||
const minMetricData = [{
|
||||
firstQuartile: 15,
|
||||
thirdQuartile: 15,
|
||||
|
Loading…
Reference in New Issue
Block a user