working storybook (steemit#2146)

.storybook/addons.js

@@ -0,0 +1 @@
+import '@storybook/addon-knobs/register';

.storybook/config.js

@@ -0,0 +1,10 @@
+import { configure } from '@storybook/react';
+
+const req = require.context('../src/app/components', true, /story\.jsx$/);
+
+function loadStories() {
+  req.keys().forEach(req);
+}
+
+
+configure(loadStories, module);

.storybook/webpack.config.js

@@ -0,0 +1,2 @@
+require('babel-register');
+module.exports = require('../webpack/storybook.config.js');

component_counter.sh

@@ -0,0 +1,19 @@
+#!/bin/bash
+
+declare -A components
+
+for file in $1/*.jsx
+do
+    name=${file##*/}
+    base=${name%.jsx}
+    cd ./src
+    count=$(grep -r -o "<$base" | wc -l)
+    components+=([$base]=$count)
+    cd ../
+done
+
+for i in "${!components[@]}"
+do
+    echo "$i: ${components[$i]}"
+done |
+sort -rn -k2

package.json

@@ -19,7 +19,9 @@
     "production": "NODE_ENV=production node lib/server/index.js",
     "start": "NODE_ENV=development babel-node ./webpack/dev-server.js",
     "webpush": "node ./scripts/webpush_notify.js",
-    "checktranslations": "node scripts/check_translations.js"
+    "checktranslations": "node scripts/check_translations.js",
+    "storybook": "start-storybook -p 9001 -c .storybook",
+    "storybook-build": "build-storybook -c .storybook -o docs" 
   },
   "author": "Steemit, Inc.",
   "license": "MIT",
@@ -150,6 +152,8 @@
     "xmldom": "^0.1.22"
   },
   "devDependencies": {
+    "@storybook/addon-knobs": "^3.2.17",
+    "@storybook/react": "^3.2.16",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "chai": "^3.5.0",
     "chai-immutable": "^1.5.3",
@@ -191,6 +195,9 @@
     "npm": ">=5.4.2"
   },
   "lint-staged": {
-    "src/**/*.js*": ["prettier --write", "git add"]
+    "src/**/*.js*": [
+      "prettier --write",
+      "git add"
+    ]
   }
 }

src/app/components/elements/Author.story.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withKnobs } from '@storybook/addon-knobs';
+import rootReducer from 'app/redux/RootReducer';
+import { Provider } from 'react-redux';
+import { createStore } from 'redux';
+import Author from './Author';
+import { Center } from './Tooltip.story';
+import { IntlProvider } from 'react-intl';
+
+const store = createStore(rootReducer);
+
+storiesOf('Elements', module)
+    .addDecorator(withKnobs)
+    .addDecorator(getStory => <Provider store={store}>{getStory()}</Provider>)
+    .add('Author', () => (
+        <IntlProvider locale="en">
+            <Center>
+                <Author author={'maitland'} />
+            </Center>
+        </IntlProvider>
+    ));

src/app/components/elements/Callout.story.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withKnobs, select } from '@storybook/addon-knobs';
+import Callout from './Callout';
+import { Center } from './Tooltip.story';
+
+const selectOptions = ['error', 'default'];
+
+storiesOf('Elements', module)
+    .addDecorator(withKnobs)
+    .add('Callout', () => (
+        <Center>
+            <Callout type={select('Callout style', selectOptions, 'default')}>
+                <span> Callout, you can add an error style with the knob</span>
+            </Callout>
+        </Center>
+    ));

src/app/components/elements/DropdownMenu.story.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withKnobs, select } from '@storybook/addon-knobs';
+import DropdownMenu from './DropdownMenu';
+import { Center } from './Tooltip.story';
+
+const selectOptions = ['transfer', 'transfer to savings', 'power up'];
+
+const mockMenu = [
+    {
+        value: 'transfer',
+        link: '#',
+        onClick: () => {},
+    },
+    {
+        value: 'transfer to savings',
+        link: '#',
+        onClick: () => {},
+    },
+    {
+        value: 'power up',
+        link: '#',
+        onClick: () => {},
+    },
+];
+
+storiesOf('Elements', module)
+    .addDecorator(withKnobs)
+    .add('DropdownMenu', () => (
+        <Center>
+            <h3>Dropdown Menu</h3>
+            <DropdownMenu
+                title={'Other actions'}
+                key="_others"
+                items={mockMenu}
+                el={'div'}
+                selected={select(
+                    'Currently Selected',
+                    selectOptions,
+                    'power up'
+                )}
+            />
+        </Center>
+    ));

src/app/components/elements/FoundationDropdown.story.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withKnobs, boolean } from '@storybook/addon-knobs';
+import FoundationDropdown from './FoundationDropdown';
+import { Center } from './Tooltip.story';
+
+storiesOf('Elements', module)
+    .addDecorator(withKnobs)
+    .add('FoundationDropdown', () => (
+        <Center>
+            <h3> Use the Knob to toggle the Foundation Dropdown </h3>
+            <FoundationDropdown
+                show={boolean('Is Open?', false)}
+                onHide={() =>
+                    alert(
+                        'You clicked someplace that triggered the onHide prop.'
+                    )
+                }
+            >
+                <div className="Voting__adjust_weight">
+                    <h3> Cool Stuff </h3>
+                    <p> Has a handler to detect outside clicks...</p>
+                </div>
+            </FoundationDropdown>
+        </Center>
+    ));

src/app/components/elements/FoundationDropdownMenu.story.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withKnobs, select } from '@storybook/addon-knobs';
+import FoundationDropdownMenu from './FoundationDropdownMenu';
+import { Center } from './Tooltip.story';
+
+const positionOptions = ['bottom', 'top'];
+
+const alignmentOptions = ['left', 'right'];
+
+const mockMenu = [
+    {
+        value: 'transfer',
+        link: '#',
+        onClick: () => {},
+    },
+    {
+        value: 'transfer to savings',
+        link: '#',
+        onClick: () => {},
+    },
+    {
+        value: 'power up',
+        link: '#',
+        onClick: () => {},
+    },
+];
+
+storiesOf('Elements', module)
+    .addDecorator(withKnobs)
+    .add('FoundationDropdownMenu', () => (
+        <Center>
+            <h3> Foundation Dropdown Menu</h3>
+            <FoundationDropdownMenu
+                className="Wallet_dropdown"
+                dropdownPosition={select('position', positionOptions, 'bottom')}
+                dropdownAlignment={select(
+                    'alignment',
+                    alignmentOptions,
+                    'right'
+                )}
+                label={8 + ' Jahweh'}
+                menu={mockMenu}
+            />
+        </Center>
+    ));

src/app/components/elements/Icon.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-const icons = [
+export const icons = [
     'user',
     'share',
     'chevron-up-circle',

src/app/components/elements/Icon.story.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withKnobs, select } from '@storybook/addon-knobs';
+import Icon from './Icon';
+import { icons } from './Icon';
+
+const styles = {
+    textAlign: 'center',
+    display: 'grid',
+    gridTemplateColumns: 'repeat(3, 1fr)',
+    gridAutoRows: 'minmax(80px, auto)',
+};
+
+export const Grid = ({ children }) => <div style={styles}>{children}</div>;
+
+const options = ['1x', '1_5x', '2x', '3x', '4x', '5x', '10x'];
+
+storiesOf('Elements', module)
+    .addDecorator(withKnobs)
+    .add('Icon', () => (
+        <Grid>
+            {icons.map(icon => (
+                <div key={'icon_' + icon}>
+                    <Icon name={icon} size={select('size', options, '2x')} />
+                    <p> {icon} </p>
+                </div>
+            ))}
+        </Grid>
+    ));

src/app/components/elements/LoadingIndicator.story.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import LoadingIndicator from './LoadingIndicator';
+import styles from './LoadingIndicator.scss';
+
+storiesOf('Elements', module).add('LoadingIndicator', () => (
+    <LoadingIndicator />
+));

src/app/components/elements/MarkNotificationRead.story.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withKnobs } from '@storybook/addon-knobs';
+import rootReducer from 'app/redux/RootReducer';
+import { Provider } from 'react-redux';
+import { createStore } from 'redux';
+import MarkNotificationRead from './MarkNotificationRead';
+import { Center } from './Tooltip.story';
+
+const store = createStore(rootReducer);
+
+storiesOf('Elements', module)
+    .addDecorator(withKnobs)
+    .addDecorator(getStory => <Provider store={store}>{getStory()}</Provider>)
+    .add('MarkNotificationRead', () => (
+        <Center>
+            <p>
+                {' '}
+                This is a curious component, that will always render null...{' '}
+            </p>
+            <MarkNotificationRead
+                fields={'send,receive'}
+                account={'maitland'}
+            />
+        </Center>
+    ));

src/app/components/elements/NotifiCounter.story.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withKnobs, number } from '@storybook/addon-knobs';
+import NotifiCounter from './NotifiCounter';
+import { Center } from './Tooltip.story';
+
+const options = {
+    range: true,
+    min: 0,
+    max: 1001,
+    step: 1,
+};
+
+const mockStore = {
+    dispatch: () => {},
+    value: 300,
+    subscribe: () => {},
+    getState: () => ({
+        app: {
+            get: () => {
+                return {
+                    get: () => number('number of notifications', 10, options),
+                };
+            },
+        },
+    }),
+};
+
+storiesOf('Elements', module)
+    .addDecorator(withKnobs)
+    .add('NotifCounter', () => (
+        <Center>
+            <NotifiCounter store={mockStore} fields={'not relevant'} />
+            <span> Notifications</span>
+        </Center>
+    ));

src/app/components/elements/Orderbook.story.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withKnobs, select } from '@storybook/addon-knobs';
+import Orderbook from './Orderbook';
+
+const selectOptions = ['error', 'default'];
+
+const mockOrder = {
+    getSBDAmount: () => 999,
+    getStringSBD: () => 'nine hundred and ninety nine',
+    getStringSteem: () => 'two hundred steem',
+    getStringPrice: () => '55',
+    equals: () => 55,
+};
+
+const mockOrder2 = {
+    getSBDAmount: () => 111,
+    getStringSBD: () => 'one hundred and eleven',
+    getStringSteem: () => 'one steem',
+    getStringPrice: () => '55',
+    equals: () => 55,
+};
+
+storiesOf('Elements', module)
+    .addDecorator(withKnobs)
+    .add('Orderbook', () => (
+        <Orderbook
+            side={'bids'}
+            orders={[mockOrder, mockOrder2]}
+            onClick={price => {
+                setFormPrice(price);
+            }}
+        />
+    ));