add storybook component previews

[cypressf]

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.

[cypressf]

I tried adding storybook with

npx storybook init

but there are two issues.

1. There are some build warnings about missing deps
2. Storybook isn't using my css modules correctly

[cypressf]

Build warnings might be this issue: https://github.com/storybookjs/storybook/issues/18241

[cypressf]

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?

[cypressf]

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.

[cypressf]

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.