Closed cypressf closed 2 years ago
I tried adding storybook with
npx storybook init
but there are two issues.
Build warnings might be this issue: https://github.com/storybookjs/storybook/issues/18241
The css module for YearSelector
wasn't working because the classname .sub-selector
was being used in typescript as subSelector
. I configured vite to use camelCase for css class names via the following in the vite.config.ts
css: {
modules: {
localsConvention: 'camelCaseOnly',
},
},
It seems that the @storybook/builder-vite
library doesn't correctly use the vite config's css.modules.localsConvention
. Perhaps there's a configuration for it in the storybook's main.js
?
Indeed, the docs for builder-vite
say that it will not read the vite.config
by default: https://github.com/storybookjs/builder-vite#customize-vite-config. We can override the config in the storybook config.
I overrode the config in order to use camelcase css. The build warnings are going to have to stay for now, since it's a storybook bug.
Problem
components can be difficult to develop if they rely on a specific app state that's hard to get to.
Solution
instead of developing components inside of the whole website, I want to be able to develop them in isolation using storybook.