Storybook setup

.storybook.addons.js

import '@storybook/addon-knobs/register';
import '@storybook/addon-actions/register';
import '@storybook/addon-notes/register';

.storybook.config.js

import { configure } from '@storybook/react';

/** 
 * @name Javascript
 * @description automatically import all files ending in *.stories.js
 **/
// configure(require.context('../src', true, /\.stories\.js$/), module);

/** 
 * @name Typescript
 * @description OR automatically import all files ending in *.stories.tsx
 **/
configure(require.context('../src', true, /\.stories\.tsx?$/), module);

.storybook.webpack.config.js

module.exports = ({ config }) => {
    config.module.rules.push({
        test: /\.(ts|tsx)$/,
        use: [
            {
                loader: require.resolve('awesome-typescript-loader'),
            },
            // Optional
            {
                loader: require.resolve('react-docgen-typescript-loader'),
            },
        ],
    });
    config.resolve.extensions.push('.ts', '.tsx');
    return config;
};

example.actions.stories.tsx

import React from 'react';

import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';

import { Button } from '@storybook/react/demo';


/**
 * @optional Decorator
 * @param {String} categoryName - the tab name 
 * @param {Function:JSX.Element} storyFn - story function that returns JSX Element 
 */
const OptionalDecorator = (storyFn) => {
    return (<section>
        {storyFn()}
    </section>)
}

/**
 * Story Category
 * @param {String} categoryName - the tab name 
 * @param {NodeModule} module - no diea what this does? 
 */
const stories = storiesOf('Category', module);

/** 
 * Stories 
 * @name add 
 * @param {string} storyName - story name which is the name of the tab 
 * @param {Function:JSX.Element} fn - returns the react element 
 */
stories
    .addDecorator(OptionalDecorator) // <--- this is optional 
    .add('Actions addon', ()=>{
        return (<Button onClick={action('on click')}> 
            <span>
                Cool
            </span>
        </Button>)
    })

example.knobs.stories.tsx

import React from 'react';

import { storiesOf } from '@storybook/react';
import { withKnobs, text, boolean, number, object as objectAddOn, array as arrayAddOn, select, radios, optionsKnob, files, date, button as buttonAddOn } from '@storybook/addon-knobs';

// import { Button } from '@storybook/react/demo';


/**
 * @optional Decorator
 * @param {String} categoryName - the tab name 
 * @param {Function:JSX.Element} storyFn - story function that returns JSX Element 
 */
const OptionalDecorator = (storyFn) => {
    return (<section>
        {storyFn()}
    </section>)
}

/**
 * Story Category
 * @param {String} categoryName - the tab name 
 * @param {NodeModule} module - no diea what this does? 
 */
const stories = storiesOf('Knobs Addons', module);

/** 
 * Stories 
 * @name add 
 * @param {string} storyName - story name which is the name of the tab 
 * @param {Function:JSX.Element} fn - returns the react element 
 */
var groupId = 'groupId';
stories
    .addDecorator(withKnobs) // <--- add knobs 
    .addDecorator(OptionalDecorator) // <--- this is optional 
    .add('Boolean add ons', ()=>{

        const boolName = 'booleanName', 
            boolValue = true;

        const props = boolean(boolName, boolValue, groupId) ? 'Yes': 'No';    

        return (<section>
            <label>
                Boolean: 
            </label>
            <div>
                {props}
            </div>
        </section>)
    })
    .add('text add ons', ()=>{

        const textName = 'textName', 
            textValue = 'Text Value';

        const props = text(textName, textValue, groupId);            

        return (<section>
            <label>
                textName: 
            </label>
            <div>
                {props}
            </div>
        </section>)
    })
    .add('number add on', ()=>{

        const numberName = 'numberName', 
            numberValue = 50;

        const options = {
            range: true,
            min: 0,
            max: 100,
            step: 1,
        };

        const props = number(numberName, numberValue, options, groupId);

        return (<section>
            <label>
                numberName: 
            </label>
            <div>
                {props}
            </div>
        </section>)
    })
    .add('object add on', ()=>{

        const label = 'Styles';
        const defaultValue = {
            backgroundColor: 'red'
        };

        const obj = objectAddOn(label, defaultValue, groupId);

        return (<section>
            <label>
                objectValue: 
            </label>
            <pre>
                {JSON.stringify(obj)}
            </pre>
        </section>)
    })
    .add('array add on', ()=>{

        const label = 'Styles';
        const defaultValue = [
            'Nick',
            'Mitchell'
        ];
        const separator = ',';

        const array = arrayAddOn(label, defaultValue, separator, groupId);

        return (<section>
            <label>
                array value: 
            </label>
            <pre>
                {array}
            </pre>
        </section>)
    })
    .add('select add on', ()=>{

        const label = 'Colors';
        const options = {
            Red: 'red',
            Blue: 'blue',
            Yellow: 'yellow',
            Rainbow: ['red', 'orange', 'etc'],
            None: null,
        };
        const defaultValue = 'red';

        const value = select(label, options, defaultValue, groupId);

        return (<section>
            <label>
                select: 
            </label>
            <pre>
                {value}
            </pre>
        </section>)
    })
    .add('select add on', ()=>{

        const label = 'Colors';
        const options = {
            Red: 'red',
            Blue: 'blue',
            Yellow: 'yellow',
            Rainbow: ['red', 'orange', 'etc'],
            None: null,
        };
        const defaultValue = 'red';

        const value = select(label, options, defaultValue, groupId);

        return (<section>
            <label>
                select: 
            </label>
            <pre>
                {value}
            </pre>
        </section>)
    })
    .add('radio add on', ()=>{

        const label = 'Fruits';
        const options = {
            Kiwi: 'kiwi',
            Guava: 'guava',
            Watermelon: 'watermelon',
        };
        const defaultValue = 'kiwi';
        // const groupId = 'GROUP-ID1';

        const value = radios(label, options, defaultValue, groupId);

        return (<section>
            <label>
                radio: 
            </label>
            <pre>
                {value}
            </pre>
        </section>)
    })
    .add('options add on', ()=>{

        const label = 'Fruits';
        const valuesObj = {
            Kiwi: 'kiwi',
            Guava: 'guava',
            Watermelon: 'watermelon',
        };
        const defaultValue = 'kiwi';
        const optionsObj = {
            display: 'inline-radio' as const
        };

        const value = optionsKnob(label, valuesObj, defaultValue, optionsObj, groupId);

        return (<section>
            <label>
                option knobs: 
            </label>
            <pre>
                {value}
            </pre>
        </section>)
    })
    .add('date add on', ()=>{

        const label = 'Event Date';
        const defaultValue = new Date('Jan 20 2017');
        const groupId = 'GROUP-ID1';

        const value = date(label, defaultValue, groupId);

        return (<section>
            <label>
                Date knob: 
            </label>
            <pre>
                { `Date: ${new Date(value)}` }
            </pre>
        </section>)
    })
    .add('files add on', ()=>{
        
        const label = 'Images';
        const accept = '.png, .jpeg, .jpg';
        const defaultValue = [];
        const groupId = 'GROUP-ID1';
        
        const value = files(label, accept, defaultValue, groupId);
        
        return (<section style={{display: 'block', height: '100vh'}}>
            <h3>
                files knobs: 
            </h3>
            <p style={{fontStyle: 'italic'}}>
                Upload image with filetype of `.png` or `.jpeg`
            </p>

            <h3>Value as image:</h3>
            <img src={`${value}`} />

            <h3>Value as string:</h3>
            <pre>
                {value}
            </pre>
        </section>)
    });

var clicked = 0;    
stories    
    .add('button add on', ()=>{

        const label = 'Button Add On';

        const handler = () => { return ++clicked };
        

        buttonAddOn(label, handler);

        return (<section>
            <label>
                Button knob: 
            </label>
            <pre>
                { handler() }
            </pre>
        </section>)
    })
    

setup-storybook.sh

#!/bin/bash 

# ##########################
#
# @name Install deps
# Install cli tools needed 
# @param json - needed to add to CRUD the package.json from cli
# @parm surge - needed to push storybook docs online
#
npm install -g json surge

# ##########################
#
# @name varRoot 
# @description change to dir 
# @param {string} varRoot - root directory 
#
echo What is the path to the installation root?
varRoot=./
read varRoot
echo Opening the directory: $varRoot 

# ##########################
#
# @description change to dir 
#
cd $varRoot
pwd 
mkdir .storybook
ls 


# ##########################
#
# @name Storybook 
# @description install storybook for react
#
yarn add -D @storybook/react
yarn add -D @types/storybook__react
yarn add -D awesome-typescript-loader
yarn add -D react-docgen-typescript-loader


# ##########################
#
# @name story config
# @description create config to find all stories 
#
wget https://gist.githubusercontent.com/mitni455/bed361dc969848bced2a37ef50b25acc/raw/f858f15ee1515c49a5d1144b92079f67856e36e3/.storybook.config.js --output-document=storybook.config.js
mv storybook.config.js .storybook/config.js 

wget https://gist.githubusercontent.com/mitni455/bed361dc969848bced2a37ef50b25acc/raw/296a0165e8a3233f8532fb8aa8af8b7d21619da9/.storybook.webpack.config.js --output-document=storybook.webpack.config.js
mv storybook.webpack.config.js .storybook/webpack.config.js


# ##########################
#
# @name story add ons
# @description addons for actions, knobs and notes 
#
yarn add -D @storybook/addon-actions
yarn add -D @storybook/addon-info
yarn add -D @storybook/addon-knobs
yarn add -D @storybook/addon-links
yarn add -D @storybook/addon-notes
yarn add -D @storybook/addons

wget https://gist.githubusercontent.com/mitni455/bed361dc969848bced2a37ef50b25acc/raw/3b9f0b2b24721a05aec100386a6c747bf68cc784/.storybook.addons.js --output-document=storybook.addons.js
mv storybook.addons.js .storybook/addons.js 

# ##########################
#
# @name package.json
# @description add run and build to scripts of npm package 
# @requires json 
# @returns 
#       scripts: {
#           "story": "start-storybook -p 6006",
#           "story:build": "build-storybook -c .storybook -o docs/storybook",
#           "story:publish": "yarn run story:build && cd docs/storybook && surge projectname-story.surge.sh"
#       }
#
mkdir -p docs/storybook
json -I -f package.json -e 'this.scripts.story="start-storybook -p 6006"' 
json -I -f package.json -e 'this.scripts["story:build"]="build-storybook -c .storybook -o docs/storybook"' 
json -I -f package.json -e 'this.scripts["story:publish"]="yarn run story:build && cd docs/storybook && surge projectname-story.surge.sh"' 



# ##########################
#
# @name Examples
# @description Install example storybooks
#
mkdir -p src/example-stories
cd src/example-stories 
wget https://gist.githubusercontent.com/mitni455/bed361dc969848bced2a37ef50b25acc/raw/3e39c60e54ba313ad5d78cb4a732cb33e590a551/example.actions.stories.tsx --output-document=example.actions.stories.tsx
wget https://gist.githubusercontent.com/mitni455/bed361dc969848bced2a37ef50b25acc/raw/3e39c60e54ba313ad5d78cb4a732cb33e590a551/example.knobs.stories.tsx --output-document=example.knobs.stories.tsx