[examples] Add a storybook example

[jp3492]

Adding storybook documentation

I'm so excited to be using stylexjs for out companies new component library. Unfortunately I am not able to get the project setup using storybook and webpack. Following the documentation for creating variables and themes, I am not able to get those variables to load into storybook globally. As soon as I use a color variable that I have defined with defineVars it is not being applied. I can also not see any CSS variables being applied to the dom. I wish there was some sort of documentation for setting this up as there is very little support on this topic on the internet. Thanks a lot

[nmn]

The PostCSS plugin is likely the best approach for making this work. I don't have a lot of experience using Storybook myself, so if you could provide a basic setup you need we might be able to help.

The Discussions tab might also reveal some information about storybook. There have been previous members of the community who got it to work.

[javascripter]

https://github.com/javascripter/next-storybook-vite Here's the example setup for Storybook with Next.js.

The repo uses:

• @stylexjs/postcss-plugin for both Next.js main application and Storybook to extract CSS statically
• babel-loader to setup source code compilation for Next.js (see next.config.ts)
• Vite to compile source code for Storybook (see vite.config.ts)
  • @storybook/experimental-nextjs-vite is used as the storybook framework

I think Vite config could possibly be moved to Storybook framework options for babel compilation but this is what I've been using for our production monorepo and haven't encountered issues so far.

[necolas]

Nice. Feel free to submit a PR that fills out examples/example-storybook with that setup