transitive-bullshit / create-react-library

CLI for creating reusable react libraries.
https://transitivebullsh.it/javascript-dev-tools-in-2022
4.78k stars 300 forks source link

How to add Storybook? #165

Open sachinkotwal opened 5 years ago

flearsnetwork commented 5 years ago

+1

brightpixels commented 5 years ago

+1

martinmcneela commented 5 years ago

+1

joey-lucky commented 4 years ago

+1

ummahusla commented 4 years ago

I've spent a bit of the time on this one, but I wasn't been able to set up it properly. At some point probably next week, I will give it another go.

KindArt commented 4 years ago

+1

sachinkotwal commented 4 years ago

As a workaround, I able to integrate storybook inside the example folder inside this library. This is straightforward as example project in this library is created using create-react-app

ericmasiello commented 4 years ago

+1

brightpixels commented 4 years ago

@sachinkotwal could you share your example please?

AdventureBeard commented 4 years ago

@brightpixels , I got this working by initializing storybook in example/ and installing react-scripts in example/. Starting storybook and importing from your library should work great after that.

cd example
npx -p @storybook/cli sb init
yarn add react-scripts
yarn storybook

EDIT: Looks like this might be a shortcut to that outcome, but haven't tested: npx -p @storybook/cli sb init --type react_scripts

dasm30 commented 4 years ago

For anyone encountering this issue, even with the above solution I had an error Cannot find module ......./example/node_modules/react-scripts/config/webpack.config' I noticed the react-scripts version installed with this library is too old, I updated the package version to 3.4 at this time, and issue was solved

JFernandoGomez commented 4 years ago

3.4

yup, this solved my issue

saraahso commented 3 years ago

I've added storybook in the root of create-react-library and it works fine. I don't need to use example folder anymore. I simply create the [file].stories.js inside each component and it works good. 👍🏽