在演示页面中安装和使用 Storybook

Question

I am creating a personal project in TypeScript. It should be a library that exports React components and TypeScript functions. The idea is therefore to publish this library on npm in the future. There is also a demo page within the project and this is where I would like to use Storybook to test React components.

This is the structure of the project:

.
├── demo/              # demo page
│   └── Home.tsx       # where I would like to use Storybook
│   └── index.html
│   └── index.tss
│   └── style.css
├── dist/              # distributable version of app built using Parcel
├── node_modules/      # npm managed libraries
├── src/               # project source code
│   └── lib/           # folder for your library
│      └── myFuncion.ts # function to export
│      └── MyComponent.tsx # react component to export
│   └── index.ts    # app entry point (it simply contains the exports of myFunction and myComponent)
├── .eslintrc.js
├── .gitignore
├── package.json
├── tsconfig.json
├── ...

I have read the Storybook documentation and it recommends to install Storybook by running npx sb init . I tried but the problem is that the stories are put in the project src directory, not in the demo page:

.
├── demo/              # demo page
│   └── Home.tsx       # where I would like to use Storybook
│   └── index.html
│   └── index.tss
│   └── style.css
├── dist/              # distributable version of app built using Parcel
├── node_modules/      # npm managed libraries
├── src/               # project source code
│   └── lib/           # folder for your library
│      └── myFuncion.ts # function to export
│      └── MyComponent.tsx # react component to export
│   └── stories/    # Storybook <<---
│   └── index.ts    # app entry point (it simply contains the exports of myFunction and myComponent)
├── .eslintrc.js
├── .gitignore
├── package.json
├── tsconfig.json
├── ...

And the storybook script that is created is this:

"scripts": {
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
},

but I would like something like:

"scripts": {
    "storybook:demo": "start-storybook -p 6006",
    "build-storybook:demo": "build-storybook"
},

So how can I install and use Storybook only on the demo page?

Answer 1

Looks like you're ultimately trying to have multiple source directories. This is supported by both TypeScript and Storybook, it just needs a bit of configuration.

tsconfig.json should have the include option set to:

"include": [ "src", "demo" ]

This tells TypeScript (or its Babel loader) to compile files in src and demo .

.storybook/main.js should have the stories option set to:

stories: [
  '../demo/**/*.stories.mdx',
  '../demo/**/*.stories.@(js|jsx|ts|tsx)',
],

This specifies which files should be interpreted as stories and in our case it would load *.stories.mdx / js / jsx / ts / tsx recursively from the demo folder.

Also note that the stories folder is just an example folder created by Storybook and you can safely delete it. Stories can be in any of the directories processed by TypeScript as long as it matches the patterns specified in .storybook/main.js .

You can even have multiple Storybooks with multiple configs in a single project, but that may not be what you're after. Just in case, though, the command would be start-storybook -p 6006 -c path/to/config/.storybook

Answer 2

If I understood correctly, you want to build a components library and have demo app for your components.

I don't think there is a way to use Storybook in an existing app. This would mean you would have to build your demo app and use some components from Storybook to show case components in your app. To my knowledge this is not possible. It might be, but it seems complicated and I don't know of any docs on this.

I think the Storybook app is (or should be) your demo app. Storybook can render mdx files so you can add any content to it and get a demo app.

What you could try:

1. Move your demo app content and component stories to the demo folder
2. Migrate Home.tsx to a mdx file
3. Change Storybook's config to load stories from '/demo`

To a degree, you can change Storybook's styling and "make it your own" and this can become your demo app.

---

Until I discovered Storybook I used a home-made components show case app with react-live . Might want to take a look at it but I think Storybook is is better and easier to maintain.