Feature/upgrade storybook #37
Conversation
| @@ -4,7 +4,7 @@ import turbosnap from 'vite-plugin-turbosnap'; | |||
| import { StorybookConfig } from '@storybook/web-components-vite'; | |||
|
|
|||
| const config: StorybookConfig = { | |||
| stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], | |||
| stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], | |||
There was a problem hiding this comment.
That was an automatic Storybook migration.
| @@ -50,16 +49,31 @@ properties. | |||
|
|
|||
| ## Typography | |||
|
|
|||
| <Canvas> | |||
There was a problem hiding this comment.
Canvas now always has to reference a story, but creating a Typeface story will also show the story in the sidebar. The Typedef Storyblock does not handle the fonts as we used to show it so I set up a little structure that shows the typefaces nicely
| @@ -84,7 +98,7 @@ properties. | |||
| return numberA - numberB; | |||
| }) | |||
| .map(([, token], index) => ( | |||
| <React.Fragment key={index}> | |||
| <div key={index} style={{display: 'contents'}}> | |||
There was a problem hiding this comment.
React has been removed as a peer dependency of Storbook, so since we only use it here, we can remove it and use the display: contents to have HTML Elements that don't interfere with the CSS Grid
| @@ -28,7 +28,8 @@ | |||
| "test": "vitest run --reporter=verbose --reporter=junit --coverage", | |||
| "test:watch": "vitest", | |||
| "design-tokens:generate": "node ./tokens/style-dictionary.cjs", | |||
| "icons:generate": "node src/components/icon/generate-icon-types.js" | |||
| "icons:generate": "node src/components/icon/generate-icon-types.js", | |||
| "chromatic": "VITE_IS_CHROMATIC=true chromatic" | |||
There was a problem hiding this comment.
turns out I forgot to add this script in the last PR that actually makes sure, chromatic has the proper ENV var passed during build
Had some time over the weekend to upgrade storybook