Merge pull request #153 from dimaip/storybook

TASK: Storybook integration

.storybook/config.js

@@ -0,0 +1,9 @@
+import {configure} from '@kadira/storybook';
+
+const req = require.context('./../Resources/Private/JavaScript', true, /story\.js$/);
+
+function loadStories() {
+    req.keys().forEach(req);
+}
+
+configure(loadStories, module);

.storybook/webpack.config.js

@@ -0,0 +1,12 @@
+const defaultConfig = require('./../webpack.config');
+
+module.exports = Object.assign({}, defaultConfig, {
+    module: {
+        loaders: [
+            {
+                test: /\.css$/,
+                loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader'
+            }
+        ]
+    }
+});

Build/Utilities/Environment.js

@@ -1,4 +1,5 @@
 module.exports = {
     isCi: process.env.CI,
-    isTesting: process.env.TEST
+    isTesting: process.env.TEST,
+    isStorybook: process.env.STORY
 };

Resources/Private/JavaScript/Components/Bar/index.story.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import {storiesOf} from '@kadira/storybook';
+import Bar from './index.js';
+
+storiesOf('Bar', module)
+    .add('default', () => (
+        <div>
+            <Bar position="top">
+                Top bar
+            </Bar>
+            <Bar position="bottom">
+                Bottom bar
+            </Bar>
+        </div>
+    ));

Resources/Private/JavaScript/Components/Button/index.js

@@ -25,7 +25,6 @@ const Button = props => {
         [styles['btn--lighter']]: style === 'lighter',
         [styles['btn--transparent']]: style === 'transparent',
         [styles['btn--cleanHover']]: hoverStyle === 'clean',
-        [styles['btn--lighterHover']]: hoverStyle === 'lighter',
         [styles['btn--brandHover']]: hoverStyle === 'brand',
         [styles['btn--darkenHover']]: hoverStyle === 'darken',
         [styles['btn--brandActive']]: isActive,

Resources/Private/JavaScript/Components/Button/index.story.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import {storiesOf, action} from '@kadira/storybook';
+import Button from './index.js';
+
+storiesOf('Button', module)
+    .add('states', () => (
+        <div>
+            <Button onClick={action('onClick')}>Normal state</Button>
+            <Button onClick={action('onClick')} isActive={true}>Active</Button>
+            <Button onClick={action('onClick')} isDisabled={true}>Disabled</Button>
+            <Button onClick={action('onClick')} isFocused={true}>Focused</Button>
+        </div>
+    ))
+    .add('background styles', () => (
+        <div style={{backgroundColor: 'gray'}}>
+            <Button onClick={action('onClick')} style="clean">Clean button</Button>
+            <Button onClick={action('onClick')} style="lighter">Lighter button</Button>
+            <Button onClick={action('onClick')} style="transparent">Transparent button</Button>
+        </div>
+    ))
+    .add('hover styles', () => (
+        <div>
+            <Button onClick={action('onClick')} hoverStyle="clean">Hover clean</Button>
+            <Button onClick={action('onClick')} hoverStyle="darken">Hover darken</Button>
+            <Button onClick={action('onClick')} hoverStyle="brand">Hover brand</Button>
+        </div>
+    ))
+    .add('events', () => (
+        <div>
+            <Button onClick={action('onClick')}>onClick</Button>
+            <Button onClick={action('onClick')} onMouseEnter={action('onMouseEnter')}>onMouseEnter</Button>
+            <Button onClick={action('onClick')} onMouseLeave={action('onMouseLeave')}>onMouseLeave</Button>
+            <Button onClick={action('onClick')} onMouseDown={action('onMouseDown')}>onMouseDown</Button>
+            <Button onClick={action('onClick')} onMouseUp={action('onMouseUp')}>onMouseUp</Button>
+        </div>
+    ));

Resources/Private/JavaScript/Components/CheckBox/index.story.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import {storiesOf, action} from '@kadira/storybook';
+import CheckBox from './index.js';
+
+storiesOf('CheckBox', module)
+    .add('default', () => (
+        <div>
+            <p>Unchecked:</p>
+            <CheckBox onChange={action('onChange')} isChecked={false}/>
+            <p>Checked:</p>
+            <CheckBox onChange={action('onChange')} isChecked={true}/>
+        </div>
+    ));

Resources/Private/JavaScript/Components/Dialog/index.story.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import {storiesOf, action} from '@kadira/storybook';
+import Dialog from './index.js';
+
+storiesOf('Dialog', module)
+    .add('default', () => (
+        <div>
+            <Dialog
+                isOpen={true}
+                wide={true}
+                title="Hello dialog!"
+                onRequestClose={action('onRequestClose')}
+                actions={[
+                    <div>Button</div>
+                ]}
+                >
+                H1ello world
+            </Dialog>
+            <div id="dialog" />
+        </div>
+    ));

Resources/Private/JavaScript/Components/DropDown/index.story.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import {storiesOf} from '@kadira/storybook';
+import DropDown from './index.js';
+
+storiesOf('DropDown', module)
+    .add('default', () => (
+        <DropDown isOpened={true}>
+            <DropDown.Header>
+                Dropdown header
+            </DropDown.Header>
+            <DropDown.Contents>
+                Dropdown contents
+            </DropDown.Contents>
+        </DropDown>
+    ));

Resources/Private/JavaScript/Components/Grid/index.story.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import {storiesOf} from '@kadira/storybook';
+import Grid from './index.js';
+import GridItem from './GridItem/index.js';
+
+storiesOf('Grid', module)
+    .add('default', () => (
+        <Grid>
+            <GridItem width="33%">Item 1</GridItem>
+            <GridItem width="33%">Item 2</GridItem>
+            <GridItem width="33%">Item 3</GridItem>
+            <GridItem width="33%">Item 4</GridItem>
+            <GridItem width="33%">Item 5</GridItem>
+            <GridItem width="33%">Item 6</GridItem>
+        </Grid>
+    ));

Resources/Private/JavaScript/Components/Headline/index.story.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import {storiesOf} from '@kadira/storybook';
+import Headline from './index.js';
+
+storiesOf('Headline', module)
+    .add('default', () => (
+        <div>
+            <Headline type="h1">Heading 1</Headline>
+            <Headline type="h2">Heading 2</Headline>
+            <Headline type="h3">Heading 3</Headline>
+            <Headline type="h4">Heading 4</Headline>
+            <Headline type="h5">Heading 5</Headline>
+            <Headline type="h6">Heading 6</Headline>
+        </div>
+    ));

Resources/Private/JavaScript/Components/Icon/index.story.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import {storiesOf} from '@kadira/storybook';
+import Icon from './index.js';
+
+storiesOf('Icon', module)
+    .add('size', () => (
+        <div>
+            <div><Icon icon="search" size="big" /></div>
+            <div><Icon icon="search" size="small" /></div>
+            <div><Icon icon="search" size="tiny" /></div>
+        </div>
+    ))
+    .add('padded', () => (
+        <div>
+            <div><Icon icon="search" padded="none" /></div>
+            <div><Icon icon="search" padded="left" /></div>
+            <div><Icon icon="search" padded="right" /></div>
+        </div>
+    ))
+    .add('spin', () => (
+        <div>
+            <Icon icon="search" spin={true} />
+        </div>
+    ));

Resources/Private/JavaScript/Components/IconButton/index.story.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import {storiesOf, action} from '@kadira/storybook';
+import IconButton from './index.js';
+
+storiesOf('IconButton', module)
+    .add('default', () => (
+        <div>
+            <IconButton icon="search" onClick={action('onClick')} style="lighter" />
+        </div>
+    ));

Resources/Private/JavaScript/Components/IconButtonDropDown/index.story.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import {storiesOf, action} from '@kadira/storybook';
+import IconButtonDropDown from './index.js';
+import Icon from './../Icon/index.js';
+
+storiesOf('IconButtonDropDown', module)
+    .add('default', () => (
+        <div>
+            <IconButtonDropDown
+                icon="plus"
+                modeIcon="long-arrow-right"
+                onClick={action('onClick')}
+                onItemSelect={action('onItemSelect')}
+                >
+                <Icon dropDownId="prepend" icon="long-arrow-up" />
+                <Icon dropDownId="insert" icon="long-arrow-right" />
+                <Icon dropDownId="append" icon="long-arrow-down" />
+            </IconButtonDropDown>
+        </div>
+    ));

Resources/Private/JavaScript/Components/Label/index.story.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import {storiesOf} from '@kadira/storybook';
+import Label from './index.js';
+
+storiesOf('Label', module)
+    .add('default', () => (
+        <div>
+            <Label htmlFor="test">Test label</Label>
+        </div>
+    ));

Resources/Private/JavaScript/Components/Portal/index.story.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import {storiesOf} from '@kadira/storybook';
+import Portal from './index.js';
+
+storiesOf('Portal', module)
+    .add('default', () => (
+        <Portal isOpened={true}><div>Test portal</div></Portal>
+    ));

Resources/Private/JavaScript/Components/SideBar/index.story.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import {storiesOf} from '@kadira/storybook';
+import SideBar from './index.js';
+
+storiesOf('SideBar', module)
+    .add('default', () => (
+        <div>
+            <SideBar position="left">Left sidebar</SideBar>
+            <SideBar position="right">Right sidebar</SideBar>
+        </div>
+    ));

Resources/Private/JavaScript/Components/Tabs/index.story.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import {storiesOf} from '@kadira/storybook';
+import Tabs from './index.js';
+
+storiesOf('Tabs', module)
+    .add('default', () => (
+        <div>
+            <Tabs>
+                <Tabs.Panel title="Tab 1" icon="search">Tab 1 contents</Tabs.Panel>
+                <Tabs.Panel title="Tab 2" icon="search">Tab 2 contents</Tabs.Panel>
+            </Tabs>
+        </div>
+    ));

Resources/Private/JavaScript/Components/TextInput/index.story.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import {storiesOf, action} from '@kadira/storybook';
+import TextInput from './index.js';
+
+storiesOf('TextInput', module)
+    .add('default', () => (
+        <div>
+            <TextInput
+                isValid={true}
+                placeholder="Valid input"
+                onChange={action('onChange')}
+                onFocus={action('onFocus')}
+                onBlur={action('onBlur')}
+                />
+            <TextInput
+                isValid={false}
+                placeholder="Invalid input"
+                onChange={action('onChange')}
+                onFocus={action('onFocus')}
+                onBlur={action('onBlur')}
+                />
+        </div>
+    ));

Resources/Private/JavaScript/Components/ToggablePanel/index.story.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import {storiesOf} from '@kadira/storybook';
+import ToggablePanel from './index.js';
+
+storiesOf('ToggablePanel', module)
+    .add('default', () => (
+        <div>
+            <ToggablePanel isOpened={true}>Panel contents</ToggablePanel>
+        </div>
+    ));

Resources/Private/JavaScript/Components/Tree/index.story.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import {storiesOf, action} from '@kadira/storybook';
+import Tree from './index.js';
+
+storiesOf('Tree', module)
+    .add('default', () => (
+        <div>
+            adfasdfa
+            <Tree>
+                <Tree.Node>
+                    <Tree.Node.Header
+                        item={{
+                            hasChildren: true,
+                            isCollapsed: false,
+                            isActive: true,
+                            isFocused: true,
+                            isLoading: false,
+                            hasError: false,
+                            label: 'Active focused node with children'
+                        }}
+                        onNodeToggle={action('onNodeToggle')}
+                        onNodeClick={action('onNodeClick')}
+                        onNodeFocus={action('onNodeFocus')}
+                        />
+                    <Tree.Node.Contents>
+                        <Tree.Node>
+                            <Tree.Node.Header
+                                item={{
+                                    hasChildren: false,
+                                    isCollapsed: true,
+                                    isActive: false,
+                                    isFocused: false,
+                                    isLoading: false,
+                                    hasError: false,
+                                    label: 'Normal node'
+                                }}
+                                onNodeToggle={action('onNodeToggle')}
+                                onNodeClick={action('onNodeClick')}
+                                onNodeFocus={action('onNodeFocus')}
+                                />
+                        </Tree.Node>
+                        <Tree.Node>
+                            <Tree.Node.Header
+                                item={{
+                                    hasChildren: false,
+                                    isCollapsed: true,
+                                    isActive: true,
+                                    isFocused: false,
+                                    isLoading: false,
+                                    hasError: false,
+                                    label: 'Active node'
+                                }}
+                                onNodeToggle={action('onNodeToggle')}
+                                onNodeClick={action('onNodeClick')}
+                                onNodeFocus={action('onNodeFocus')}
+                                />
+                        </Tree.Node>
+                        <Tree.Node>
+                            <Tree.Node.Header
+                                item={{
+                                    hasChildren: false,
+                                    isCollapsed: true,
+                                    isActive: false,
+                                    isFocused: true,
+                                    isLoading: false,
+                                    hasError: false,
+                                    label: 'Focused node'
+                                }}
+                                onNodeToggle={action('onNodeToggle')}
+                                onNodeClick={action('onNodeClick')}
+                                onNodeFocus={action('onNodeFocus')}
+                                />
+                        </Tree.Node>
+                    </Tree.Node.Contents>
+                </Tree.Node>
+            </Tree>
+        </div>
+    ));