build: upgrade to storybook 6.3 and convert to workspace #1231
Conversation
- create useBaseTheme to merge selected theme and backgroundColor
- set baseTheme on all stories via useBaseTheme hook
- Replace STORYBOOK_LIGHT_THEME with backgrounds: { default: 'White' }
- remove unnecessary story-chart class
- fix linting errors
| "circular-dependency-plugin": "^5.2.2", | ||
| "sass": "~1.32.0", | ||
| "sass-loader": "^10.1.1", | ||
| "storybook-addon-themes": "git://github.com/nickofthyme/storybook-addon-themes.git", |
There was a problem hiding this comment.
are we going to move in the future those forks within the chart library or within the elastic github account?
| { name: 'White', value: '#fff' }, | ||
| // { name: 'White', value: euiLightVars.euiPageBackgroundColor }, | ||
| { name: 'Black', value: '#1D1E24' }, | ||
| // { name: 'Black', value: euiDarkVars.euiPageBackgroundColor }, |
There was a problem hiding this comment.
I think we can keep our own, EUI has it's won chart theme and I don't want to be dependent on them right now
storybook/webpack.config.js
Outdated
| @@ -30,32 +33,38 @@ const MAX_CYCLES = 0; | |||
| let numCyclesDetected = 0; | |||
|
|
|||
| module.exports = async ({ config }) => { | |||
| const FAST = Boolean(JSON.parse(process.env.VRT)) ?? false; | |||
There was a problem hiding this comment.
Please remember that we don't execute VRT against storybook, but the full process is actually on a different server and configuration.
There are also multiple commands related to CI and VRT associated with storybook like the current start script:
VRT=true start-storybook -s ./public -p 9001 -c storybook --ci --no-version-updates
I think we can remove VRT and --ci
| import { mocks } from '../../packages/charts/src/mocks/hierarchical/index'; | ||
| import { config } from '../../packages/charts/src/chart_types/partition_chart/layout/config'; | ||
| import { ShapeTreeNode } from '../../packages/charts/src/chart_types/partition_chart/layout/types/viewmodel_types'; | ||
| import { Chart, Datum, Partition, PartitionLayout } from '@elastic/charts'; |
There was a problem hiding this comment.
file name could change to sunburST
|
Jenkins retest this please |
|
Jenkins retest this please There is only a slow startup for the VRT server. |
Summary
Upgrade
storybook/tostorybook@^6.3.0and convert to yarn workspace.Details
List of changes
storybookandstorybook-docsto yarn workspace.v6.3.0, including various config file and story param changes. Seestorybook/MIGRATION.mdfor all migration changes.storybookdependencies from top-levelpackage.jsonto respective workspaces.stories/tostorybook/stories/.src/instories/to@elastic/charts.@storybook/addon-infoto show info inlinestorybook-docs,docsto be used in new kibana docs in future changes.List of changes to stories
This has a big diff to the stories where every story is changed. The changes include:
@elastic/chartsuseBaseThemehook to all stories to allow for global theme and background color switcherstory-chartclass onChartsExample.story.parameterstoExample.parametersparameters.info.storyproperty to customparameters.markdownpropertySTORYBOOK_LIGHT_THEMEusage, mainly in partition charts, with backgrounds default (e.g.backgrounds: { default: 'White' })Theme and background color toggle
Leveraging the
@storybook/addon-backgroundsandstorybook-addon-themeswe can now switch theme or background color for every story automatically (kinda -- we need to adduseBaseThemehook).Screen.Recording.2021-07-26.at.04.27.44.PM.mp4
Futre Todos
@storybook/addon-knobsto@storybook/addon-controls.@elastic/charts/*into separate package [optional].Checklist
packages/charts/src/index.ts(and stories only import from../srcexcept for test data & storybook)