Due to the recent upgrade to Storybook 7, the source blocks of Canvases
were broken, they were only showing args. This was mainly due to the fact
that as of Storybook 7 the meta tags of the MDX files have changed, thus
causing the issue. These are now based on imports. We also needed to rename
index.stories.mdx files to index.mdx because Storybook was throwing errors,
maybe due to a conflicts with index.stories.tsx files and new imports.
Anyway this way of naming MDX files seems to be the recommend one based on
the official documentation.
The package @storybook/storybook-deployer that seems to not directly work
with Storybook 7 was expecting that command named "build-storybook" to
exist. With the bin updates of Storybook 7 this bin does not longer exist,
so I created a specfic script inside package.json that is named
"build-storybook" too in order to make everything work. Also now that
Storybook uses directly the local vite config, the fact that our config
generates types was causing issues when building Storybook, that why
we filter plugins in main.ts in order to remove "vite:dts".
The DataGrid component can be considered as the core one, which provides
a full controlled component, but more complicated than SimpleDataGrid
which is based on DataGrid. SimpleDataGrid is intended to give a simple
ready-to-use data grid for client side data for example.
We need to ensure that our components are accessible. In order to ease
this task, we decide to install this package to display an a11y report
for each component into the storybook interface. In this way, developer
can check if the component it is developing violates or miss so a11y
rules.
Fonts were de-facto included in the bundled dist/style.css file which
wasn't convenient in situations were consumers wanted to import fonts
by themselves.
Updated various parts of existing documentations to make a clean path
to learn how to install the library. I let the most complicated part in
the tokens's README.md file, which is referenced from the Storybook.
In order to make the storybook visible to everyone. Some changes
had to be made to make index.scss compiled with the rest of the
codebase, it had to be imported from preview.js, not directly from
preview.html.
Previously the docs order was defined by the default behavior of
Storybook: discovery order. But, in our situation we want the
"Getting Started" part to appear above "Components", and "Doc"
above any other stories. So we needed to create a custom sort callback.
In order to make this storySort callback to be taken into account by Storybook
it was needed to rename the file to preview.js. Strange but .. meh.
Based on the work delivered by designers, we simply replicates those
in the storybook documentation in order to centralize everything
related to the Button component.
These files will be used to define the custom design tokens per components.
They are automatically aggregated by the packages/react/cunningham.ts file,
this is why handling typescript config file was important.
