https://github.com/spurreiter/storybook-apprun

A small guide to setup apprun with storybook
https://github.com/spurreiter/storybook-apprun

apprun storybook

Last synced: about 1 month ago
JSON representation

A small guide to setup apprun with storybook

• Host: GitHub
• URL: https://github.com/spurreiter/storybook-apprun
• Owner: spurreiter
• License: mit
• Created: 2020-04-26T16:16:22.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2020-04-26T16:17:00.000Z (almost 5 years ago)
• Last Synced: 2024-11-10T09:18:49.588Z (3 months ago)
• Topics: apprun, storybook
• Language: JavaScript
• Size: 2.93 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# storybook-apprun

A small guide to setup [apprun][] with [storybook][]

1. Setup storybook for HTML

    ```bash

    npx -p @storybook/cli sb init --type html

    ```

2. install additional packages

    ```bash

    npm i -D apprun @babel/preset-react

    ```

3. modify _.storybook/main.js_

   

   ```js

    const path = require('path');

    module.exports = {

      stories: ['../stories/**/*.stories.js'],

      webpackFinal: async (config, { configType }) => {

        for (let rule of config.module.rules) {

          if (rule.use && rule.use[0].loader === 'babel-loader') {

            rule.use[0].options.presets.push('@babel/preset-react')

          }

        }

        return config;

      },

    };

   ```

   

4. add a utility function in stories

    _stories/render.js_

   

   ```js

    export const render = (Node) => {

      const el = document.createElement('section')

      if (typeof Node === 'function') {

        new Node().start(el)

      } else {

        app.render(el, Node)

      }

      return el

    }

   ```

   

5. test your apprun component

   e.g. _stories/apprun.stories.js_

   

   ```js

    import { apprun, Component } from 'apprun'

    import { render } from './render'

    export default {

      title: 'Demo',

    }

    export const Counter = () => {

      class Counter extends Component {

        state = 0;

        view = state => (

          


            
{state}

            -1

            +1

          

        );

        update = {

          '+1': state => state + 1,

          '-1': state => state - 1

        };

      }

      return render(Counter)

    }

   ```

   


# License

MIT licensed

[apprun]: https://apprunjs.org

[storybook]: https://storybook.js.org