689 lines
15 KiB
JavaScript
689 lines
15 KiB
JavaScript
const React = require('react');
|
|
const {
|
|
storiesOf,
|
|
action,
|
|
// linkTo
|
|
} = require('@kadira/storybook');
|
|
|
|
const {
|
|
Base,
|
|
Button,
|
|
Container,
|
|
Checkbox,
|
|
Row,
|
|
Column,
|
|
AddMetric,
|
|
Avatar,
|
|
Input,
|
|
List: {
|
|
ListItemDescription,
|
|
ListItemHeader,
|
|
ListItem,
|
|
ListItemMeta,
|
|
ListItemOptions,
|
|
ListItemOutlet,
|
|
ListItemSubTitle,
|
|
ListItemTitle,
|
|
ListItemView,
|
|
ListItemGroupView
|
|
},
|
|
MiniMetric,
|
|
Modal,
|
|
Notificaton,
|
|
Pagination,
|
|
RangeSlider,
|
|
Select,
|
|
SelectCustom,
|
|
Tabs,
|
|
Tab,
|
|
Toggle,
|
|
Tooltip,
|
|
Widget,
|
|
Radio,
|
|
RadioGroup
|
|
} = require('../src/');
|
|
|
|
|
|
|
|
const seed = require('./seed');
|
|
const {
|
|
selectData
|
|
} = seed;
|
|
|
|
const styles = {
|
|
base: {
|
|
backgroundColor: '#FFEBEE'
|
|
},
|
|
row: {
|
|
backgroundColor: '#EF5350'
|
|
},
|
|
column: {
|
|
backgroundColor: '#B71C1C',
|
|
textAlign: 'center',
|
|
color: 'white'
|
|
}
|
|
};
|
|
|
|
storiesOf('Grid', module)
|
|
.add('Row and Column', () => (
|
|
<Base>
|
|
<Container fluid>
|
|
<Row>
|
|
<Column
|
|
md={10}
|
|
sm={9}
|
|
style={styles.base}
|
|
xs={12}
|
|
>
|
|
<Row around style={styles.row}>
|
|
<Column
|
|
lg={4}
|
|
md={3}
|
|
sm={2}
|
|
style={styles.column}
|
|
xs={1}
|
|
>1</Column>
|
|
<Column
|
|
lg={4}
|
|
md={3}
|
|
sm={2}
|
|
style={styles.column}
|
|
xs={1}
|
|
>2</Column>
|
|
<Column
|
|
lg={4}
|
|
md={3}
|
|
sm={2}
|
|
style={styles.column}
|
|
xs={1}
|
|
>3</Column>
|
|
</Row>
|
|
</Column>
|
|
</Row>
|
|
</Container>
|
|
</Base>
|
|
));
|
|
|
|
const profile =
|
|
'https://pbs.twimg.com/profile_images/' +
|
|
'641289584580493312/VBfsPlff_400x400.jpg';
|
|
|
|
storiesOf('Add Metric', module)
|
|
.add('Add Metric', () => (
|
|
<Base>
|
|
<Row>
|
|
<Column>
|
|
<AddMetric
|
|
addLabel='Add'
|
|
addedLabel='Added'
|
|
description='CPU usages accross all of the CPU cores.'
|
|
link='http://somelink.com'
|
|
linkLabel='Learn more'
|
|
onAddToggle={action('toggle-added')}
|
|
title='Aggregated CPU usage'
|
|
/>
|
|
</Column>
|
|
</Row>
|
|
</Base>
|
|
))
|
|
.add('Added Metric', () => (
|
|
<Base>
|
|
<Row>
|
|
<Column>
|
|
<AddMetric
|
|
addLabel='Add'
|
|
added
|
|
addedLabel='Added'
|
|
description='CPU usages accross all of the CPU cores.'
|
|
link='http://somelink.com'
|
|
linkLabel='Learn more'
|
|
onAddToggle={action('toggle-added')}
|
|
title='Aggregated CPU usage'
|
|
/>
|
|
</Column>
|
|
</Row>
|
|
</Base>
|
|
));
|
|
|
|
storiesOf('Avatar', module)
|
|
.add('Avatar Picture', () => (
|
|
<Avatar
|
|
color='#ef6176'
|
|
name='Tom'
|
|
src={profile}
|
|
/>
|
|
))
|
|
.add('Avatar Text', () => (
|
|
<Base>
|
|
<Avatar
|
|
color='#35a8c0'
|
|
name='Alex'
|
|
/>
|
|
<Avatar
|
|
color='#35a8c0'
|
|
name='Thomas'
|
|
/>
|
|
<Avatar
|
|
color='#35a8c0'
|
|
name='귀여운 오리'
|
|
/>
|
|
</Base>
|
|
));
|
|
|
|
storiesOf('Button', module)
|
|
.add('With text', () => (
|
|
<Button>
|
|
Inspire the lazy
|
|
</Button>
|
|
)).add('Secondary', () => (
|
|
<Button secondary>
|
|
Inspire the brave
|
|
</Button>
|
|
)).add('Disabled', () => (
|
|
<Button disabled>
|
|
Inspire the liars
|
|
</Button>
|
|
)).add('Anchor', () => (
|
|
<div>
|
|
<Button href='#'>
|
|
Inspire the anchor
|
|
</Button>
|
|
</div>
|
|
));
|
|
|
|
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>
|
|
));
|
|
|
|
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 type="success">
|
|
<span>This is the success content</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('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 colors = {
|
|
perc: 'rgba(54, 74, 205, 0.2)',
|
|
alt: 'rgba(245, 93, 93, 0.2)'
|
|
};
|
|
storiesOf('Metrics', module)
|
|
.add('Mini Metric', () => (
|
|
<MiniMetric
|
|
datasets={[{
|
|
backgroundColor: colors['perc'],
|
|
altBackgroundColor: colors['alt'],
|
|
data: [
|
|
{
|
|
firstQuartile: 15,
|
|
thirdQuartile: 15,
|
|
median: 15,
|
|
max: 15,
|
|
min: 15,
|
|
},
|
|
{
|
|
firstQuartile: 26,
|
|
thirdQuartile: 26,
|
|
median: 26,
|
|
max: 26,
|
|
min: 26,
|
|
},
|
|
{
|
|
firstQuartile: 17,
|
|
thirdQuartile: 17,
|
|
median: 17,
|
|
max: 17,
|
|
min: 17,
|
|
},
|
|
{
|
|
firstQuartile: 15,
|
|
thirdQuartile: 25,
|
|
median: 19,
|
|
max: 19,
|
|
min: 20,
|
|
},
|
|
{
|
|
firstQuartile: 19,
|
|
thirdQuartile: 25,
|
|
median: 21,
|
|
max: 20,
|
|
min: 25,
|
|
},
|
|
{
|
|
firstQuartile: 24,
|
|
thirdQuartile: 30,
|
|
median: 25,
|
|
max: 26,
|
|
min: 27,
|
|
},
|
|
{
|
|
firstQuartile: 28,
|
|
thirdQuartile: 34,
|
|
median: 30,
|
|
max: 30,
|
|
min: 30,
|
|
},
|
|
{
|
|
firstQuartile: 30,
|
|
thirdQuartile: 45,
|
|
median: 35,
|
|
max: 40,
|
|
min: 40,
|
|
},
|
|
{
|
|
firstQuartile: 20,
|
|
thirdQuartile: 55,
|
|
median: 45,
|
|
max: 44,
|
|
min: 44,
|
|
},
|
|
{
|
|
firstQuartile: 55,
|
|
thirdQuartile: 55,
|
|
median: 55,
|
|
max: 55,
|
|
min: 55,
|
|
},
|
|
{
|
|
firstQuartile: 57,
|
|
thirdQuartile: 56,
|
|
median: 57,
|
|
max: 58,
|
|
min: 57,
|
|
},
|
|
{
|
|
firstQuartile: 57,
|
|
thirdQuartile: 56,
|
|
median: 56,
|
|
max: 56,
|
|
min: 56,
|
|
},
|
|
{
|
|
firstQuartile: 60,
|
|
thirdQuartile: 56,
|
|
median: 60,
|
|
max: 60,
|
|
min: 60,
|
|
},
|
|
{
|
|
firstQuartile: 57,
|
|
thirdQuartile: 57,
|
|
median: 57,
|
|
max: 57,
|
|
min: 57,
|
|
},
|
|
{
|
|
firstQuartile: 57,
|
|
thirdQuartile: 55,
|
|
median: 55,
|
|
max: 55,
|
|
min: 55,
|
|
},
|
|
{
|
|
firstQuartile: 20,
|
|
thirdQuartile: 45,
|
|
median: 45,
|
|
max: 45,
|
|
min: 45,
|
|
},
|
|
{
|
|
firstQuartile: 15,
|
|
thirdQuartile: 40,
|
|
median: 30,
|
|
max: 49,
|
|
min: 30,
|
|
},
|
|
]
|
|
}]}
|
|
labels={17}
|
|
name='Memory'
|
|
/>
|
|
));
|
|
|
|
storiesOf('ListItem', module)
|
|
.add('default', () => (
|
|
<Base>
|
|
<ListItem>
|
|
<ListItemView>
|
|
<ListItemMeta>
|
|
<ListItemTitle>Nginx 01</ListItemTitle>
|
|
<ListItemSubTitle>4 instances</ListItemSubTitle>
|
|
<ListItemDescription>Flags</ListItemDescription>
|
|
</ListItemMeta>
|
|
<ListItemOutlet>
|
|
Metrics
|
|
</ListItemOutlet>
|
|
</ListItemView>
|
|
<ListItemOptions>
|
|
…
|
|
</ListItemOptions>
|
|
</ListItem>
|
|
</Base>
|
|
))
|
|
.add('collapsed', () => (
|
|
<Base>
|
|
<ListItem collapsed>
|
|
<ListItemView>
|
|
<ListItemMeta>
|
|
<ListItemTitle>Nginx 01</ListItemTitle>
|
|
<ListItemSubTitle>4 instances</ListItemSubTitle>
|
|
<ListItemDescription>Flags</ListItemDescription>
|
|
</ListItemMeta>
|
|
<ListItemOutlet>
|
|
Metrics
|
|
</ListItemOutlet>
|
|
</ListItemView>
|
|
<ListItemOptions>
|
|
…
|
|
</ListItemOptions>
|
|
</ListItem>
|
|
</Base>
|
|
))
|
|
.add('headed', () => (
|
|
<Base>
|
|
<ListItem headed>
|
|
<ListItemHeader>
|
|
<ListItemMeta>
|
|
<ListItemTitle>Nginx 01</ListItemTitle>
|
|
<ListItemSubTitle>4 instances</ListItemSubTitle>
|
|
<ListItemDescription>Flags</ListItemDescription>
|
|
</ListItemMeta>
|
|
<ListItemOptions>
|
|
…
|
|
</ListItemOptions>
|
|
</ListItemHeader>
|
|
<ListItemView>
|
|
<ListItemMeta>
|
|
<ListItemDescription>Flags</ListItemDescription>
|
|
</ListItemMeta>
|
|
<ListItemOutlet>
|
|
Metrics
|
|
</ListItemOutlet>
|
|
</ListItemView>
|
|
</ListItem>
|
|
</Base>
|
|
))
|
|
.add('headed collapsed', () => (
|
|
<Base>
|
|
<ListItem collapsed headed>
|
|
<ListItemHeader>
|
|
<ListItemMeta>
|
|
<ListItemTitle>Nginx 01</ListItemTitle>
|
|
<ListItemSubTitle>4 instances</ListItemSubTitle>
|
|
<ListItemDescription>Flags</ListItemDescription>
|
|
</ListItemMeta>
|
|
<ListItemOptions>
|
|
…
|
|
</ListItemOptions>
|
|
</ListItemHeader>
|
|
<ListItemView>
|
|
<ListItemMeta>
|
|
<ListItemDescription>Flags</ListItemDescription>
|
|
</ListItemMeta>
|
|
<ListItemOutlet>
|
|
Metrics
|
|
</ListItemOutlet>
|
|
</ListItemView>
|
|
</ListItem>
|
|
</Base>
|
|
))
|
|
.add('stacked', () => (
|
|
<Base>
|
|
<ListItem stacked>
|
|
<ListItemView>
|
|
<ListItemMeta>
|
|
<ListItemTitle>Nginx 01</ListItemTitle>
|
|
<ListItemSubTitle>4 instances</ListItemSubTitle>
|
|
<ListItemDescription>Flags</ListItemDescription>
|
|
</ListItemMeta>
|
|
<ListItemOutlet>
|
|
Metrics
|
|
</ListItemOutlet>
|
|
</ListItemView>
|
|
<ListItemOptions>
|
|
…
|
|
</ListItemOptions>
|
|
</ListItem>
|
|
</Base>
|
|
))
|
|
.add('view-group', () => (
|
|
<Base>
|
|
<ListItem headed>
|
|
<ListItemHeader>
|
|
<ListItemMeta>
|
|
<ListItemTitle>Percona</ListItemTitle>
|
|
<ListItemSubTitle>5 instances</ListItemSubTitle>
|
|
<ListItemDescription>Flags</ListItemDescription>
|
|
</ListItemMeta>
|
|
<ListItemOptions>…</ListItemOptions>
|
|
</ListItemHeader>
|
|
<ListItemGroupView>
|
|
<ListItem flat>
|
|
<ListItemView>
|
|
<ListItemMeta>
|
|
<ListItemTitle>percona_database</ListItemTitle>
|
|
</ListItemMeta>
|
|
<ListItemOutlet>
|
|
Metrics
|
|
</ListItemOutlet>
|
|
</ListItemView>
|
|
</ListItem>
|
|
<ListItem flat stacked>
|
|
<ListItemView>
|
|
<ListItemMeta>
|
|
<ListItemTitle>percona_database</ListItemTitle>
|
|
<ListItemSubTitle>5 instances</ListItemSubTitle>
|
|
</ListItemMeta>
|
|
<ListItemOutlet>
|
|
Metrics
|
|
</ListItemOutlet>
|
|
</ListItemView>
|
|
</ListItem>
|
|
</ListItemGroupView>
|
|
</ListItem>
|
|
</Base>
|
|
));
|