modulor-js/modulor-storybook

modulor-storybook's Issues

print local ip address when run storybook server

Semver?

Now we are adopting semver in modulor-html; shall we follow same for storybook as well?

Refactor storybook components using modulor-html

adapt storybook for mobile

Change routing

Change routing of manager and preview apps, pass all parameter via query string
format:

?story=<story>&story_kind=<storykind>[&plugin=<plugin>][&...]

App chrashes when no stories defined

error:

Uncaught TypeError: Cannot read property 'storyName' of undefined

branding and mobile storybook

Todo:

• Add Branding to storybook
  • Branding related Components
  • Configure branding and favicon from config
• Mobile Storybook
  • Conditional Split.js render
  • Mobile attribute support for the sandbox-application component
  • Switch to Mobile UI on resize
  • Allow panes to be collapsible on Mobile (maybe Desktop as well)

create readme

create proper readme of how to install, write stories, plugins, etc

upgrade webpack to v4

Define loaders for project internal files + add webcomponents polyfill

Add babel and other loaders only for internal files

Can we adopt Malvid?

https://malvid.io/
Repo: https://github.com/Malvid/Malvid
Demo: https://malvid.io/ui/#/806a662853767cf69a120de2ef3618cb644edbc0/view

enhanced stories grouping

api proposal:

storiesOf('Stories group')
  .add(
    //grouping stories
    storiesOf('Main story')
      .add(...story1...)
      .add(...story1...)
  )
  //old way to keep consistency
  .add(...story...)

Add hot module replacement support

https://webpack.js.org/concepts/hot-module-replacement/

Better output of webpack build

Implement short and meaningful output of webpack build process

Improve installation

Create .storybook directory with needed files on installation

support story as HTML Node

example:

import { storiesOf } from 'modulor-storybook';

const $el = document.createElement('my-component');

storiesOf('My component')
  .add('default', () => $el);

This is needed to render react, vue, etc components and templates rendered by hyperhtml, bel, yoyo, etc

Implement build-storybook script

Implement script which builds static storybook that can be hosted on github pages or any other place

Handle file changes and new files

Application should handle following cases:

• new story was created,
• webpack config was changed
• server config was changed

Can probably be solved with nodemon

storybook jumps into the node_modules to include other stories

I have two components and and one of them is devDependency for another named inspector-component and dates respectively and both of them have some stories.

When I run stories in dates, storybook grabs stories from inspector-component as well.

dates has following config:

module.exports = {
  storiesMask: '**/stories/*'
}

Event Data along with the Events

It will be great to show the eventData along with the event being fired, this will reduce the need to open the debugger.

extract tree as separate component

extract tree as separate component, use it in stories tree + story to make it a demo component

http requests mock plugin

api proposal:

storiesOf('Foo')
  //as decorator
  .addDecorator(withMock({
    ...mocks map (see below)...
  }))
  //in story
  .add('some story', withMock({
    "foo/bar": (url, params) => {},
    "foo/baz*": { bla: baz },
    "foo/baz*": [{
      mock: () => {},
      times: 1,
      delay: 2000
    }, {
      mock: () => {}
    }],
  })

example mock lib:
http://www.wheresrhys.co.uk/fetch-mock