superset/superset-frontend/temporary_superset_ui/superset-ui/temporary-plugins/superset-ui-plugins-demo
Krist Wongsuphasawat 81ca3b9801 feat: migrate chart plugins (#375)
* feat(legacy-plugin-chart-rose): migrate package and lint

* feat(legacy-plugin-chart-sankey): migrate

* feat(legacy-plugin-chart-sankey-loop): migrate

* feat(legacy-plugin-chart-sunburst): migrate and lint

* feat(legacy-plugin-chart-treemap): migrate

* feat(legacy-plugin-chart-world-map): migrate

* docs: update storybooks

* feat(legacy-plugin-chart-force-directed): migrate and lint

* feat(legacy-plugin-chart-map-box): migrate and lint

* feat(legacy-plugin-chart-histogram): migrate and lint

* docs: update storybooks
2021-11-26 11:46:06 +08:00
..
.storybook chore: move unmigrated files 2021-11-26 11:46:03 +08:00
storybook feat: migrate chart plugins (#375) 2021-11-26 11:46:06 +08:00
package.json docs: update url in package.json and readme 2021-11-26 11:46:04 +08:00
README.md chore: move unmigrated files 2021-11-26 11:46:03 +08:00

@superset-ui/demo

David (path)

Storybook of @superset-ui-plugins packages. See it live at apache-superset.github.io/superset-ui-plugins

Development

Run storybook

To view the storybook locally, you should:

  1. Clone superset-ui-plugins repo.
  2. Run yarn install && yarn build in the superset-ui-plugins root directory.
  3. Change to the demo directory cd packages/superset-ui-plugins-demo.
  4. Run yarn run storybook. This will open up a dev server at http://localhost:9001.

Adding new stories

Existing package

If stories already exist for the package you are adding, simply extend the examples already exported for that package in the storybook/stories/<package>/index.js file.

New package

If you are creating stories for a package that doesn't yet have any stories, follow these steps:

  1. Add any new package dependencies via yarn add <package>, but if it is @superset-ui/* packages, manually add it to peerDependencies.

  2. Create a new folder that mirrors the package name

    e.g., mkdir storybook/stories/superset-ui-color/

  3. Add an index.js file to that folder with a default export with the following shape:

you can use the | separator within the storyPath string to denote nested stories e.g., storyPath: '@superset-ui/package|Nested i|Nested ii'

 default export {
   examples: [
     {
       storyPath: <string>,
       storyName: <string>,
       renderStory: <func> () => node,
     },
     ...
   ]
 };