๐Ÿ““ The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!

Last update: May 9, 2022

Storybook

Build bulletproof UI components faster


Build Status on CircleCI CodeFactor Known Vulnerabilities codecov License
Storybook Community Backers on Open Collective Sponsors on Open Collective Official Twitter Handle

Storybook is a development environment for UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components. Find out more at https://storybook.js.org.

View README for:
latest next

Table of contents

Getting Started

Visit Storybook's website to learn more about Storybook, and to get started.

Documentation

Documentation can be found Storybook's docs site.

Examples

Here are some featured examples that you can reference to see how Storybook works: https://storybook.js.org/docs/react/get-started/examples

Storybook comes with a lot of addons for component design, documentation, testing, interactivity, and so on. Storybook's API makes it possible to configure and extend in various ways. It has even been extended to support React Native development for mobile.

Community

For additional help, join us in our Discord or Slack (legacy).

Projects

Supported Frameworks

Framework Demo
React v6.1.x React
Vue v6.1.x Vue
Angular v6.1.x Angular
Web components v6.1.x Svelte
React Native - React Native
HTML v6.1.x HTML
Ember v6.1.x Ember
Svelte v6.1.x Svelte
Preact v6.1.x Preact
Marionette.js - Marionette.js
Mithril v6.1.x Mithril
Marko v6.1.x Marko
Riot v6.1.x Riot
Rax v6.1.x Rax

Sub Projects

  • CLI - Streamlined installation for a variety of app types
  • examples - Code examples to illustrate different Storybook use cases

Addons

Addons
a11y Test components for user accessibility in Storybook
actions Log actions as users interact with components in the Storybook UI
backgrounds Let users choose backgrounds in the Storybook UI
cssresources Dynamically add/remove css resources to the component iframe
design assets View images, videos, weblinks alongside your story
docs Add high quality documentation to your components
events Interactively fire events to components that respond to EventEmitter
google-analytics Reports google analytics on stories
graphql Query a GraphQL server within Storybook stories
jest View the results of components' unit tests in Storybook
knobs Interactively edit component prop data in the Storybook UI
links Create links between stories
query params Mock query params
storyshots Snapshot testing for components in Storybook
storysource View the code of your stories within the Storybook UI
viewport Change display sizes and layouts for responsive components using Storybook

See Addon / Framework Support Table

Deprecated Addons

Addons
info Annotate stories with extra component usage information
notes Annotate Storybook stories with notes
contexts Addon for driving your components under dynamic contexts
options Customize the Storybook UI in code

In order to continue improving your experience, we have to eventually deprecate certain addons in favor of new, better tools.

If you're using info/notes, we highly recommend you to migrate to docs instead, and here is a guide to help you.

If you're using contexts, we highly recommend you to migrate to toolbars and here is a guide to help you.

Badges & Presentation materials

We have a badge! Link it to your live Storybook example.

Storybook

[![Storybook](https://cdn.jsdelivr.net/gh/storybookjs/[email protected]/badge/badge-storybook.svg)](link to site)

If you're looking for material to use in your presentation about storybook, like logo's video material and the colors we use etc, you can find all of that at our brand repo.

Community

Contributing

We welcome contributions to Storybook!

  • ๐Ÿ“ฅ Pull requests and ๐ŸŒŸ Stars are always welcome.
  • Read our contributing guide to get started, or find us on Discord, we will take the time to guide you

Looking for a first issue to tackle?

  • We tag issues with Good First Issue when we think they are well suited for people who are new to the codebase or OSS in general.
  • Talk to us, we'll find something to suits your skills and learning interest.

Development scripts

Storybook is organized as a monorepo using Lerna. Useful scripts include:

yarn bootstrap

Installs package dependencies and links packages together - using lerna

yarn lint

boolean check if code conforms to linting rules - uses remark & eslint

  • yarn lint:js - will check js
  • yarn lint:md - will check markdown + code samples
  • yarn lint:js --fix - will automatically fix js

yarn test

boolean check if unit tests all pass - uses jest

  • yarn run test --core --watch - will run core tests in watch-mode

Sponsors

Become a sponsor and get your logo on our README on Github with a link to your site. [Become a sponsor]

Backers

Support us with a monthly donation and help us continue our activities. [Become a backer]

License

MIT

-the end-

GitHub

https://github.com/storybookjs/storybook
Comments
  • 1. Vue: Add Vue3 support

    I just tried to run storybook with a Vue3 (beta) app and got some errorsโ€ฆ A few I was able to work-around merging our Webpack config and pushing the Vue3 loader plugin:

    const wltConfig = require('../apps/webpack-dev');
    const { VueLoaderPlugin } = require('vue-loader');
    
    module.exports = {
    	stories: ['../**/*.stories.[tj]s'],
    
    	webpackFinal: (config, ...args) => {
    		config.plugins.push(new VueLoaderPlugin());
    		return { ...config, module: { ...config.module, rules: wltConfig().module.rules } };
    	}
    };
    

    I still get a warning and an error in the shell:

    WARN   Failed to load preset: "/home/tobi/Projects/modul/portal/client/node_modules/@storybook/vue/dist/server/framework-preset-vue.js"
    ERR! Error: Cannot find module 'vue-loader/lib/plugin'
    

    โ€“ nevertheless storybook builds and opens the browser. There I am stuck with this error message:

    Uncaught TypeError: _vue.default is not a constructor
        at Object../node_modules/@storybook/vue/dist/client/preview/render.js (render.js:43)
        at __webpack_require__ (bootstrap:848)
        at fn (bootstrap:150)
        at Object../node_modules/@storybook/vue/dist/client/preview/index.js (index.js:24)
        at __webpack_require__ (bootstrap:848)
        at fn (bootstrap:150)
        at Object.<anonymous> (index.js:55)
        at Object../node_modules/@storybook/vue/dist/client/index.js (index.js:59)
        at __webpack_require__ (bootstrap:848)
        at fn (bootstrap:150)
    

    Is there a better approach than this? I am a total n00b to storybook so would be glad about any pointer or assistance. (I searched the issues for vue3 without any meaningful results, at least as far as I can tell.)

    Reviewed by p3k at 2020-05-05 11:15
  • 2. babel-loader conflicts with create-react-app version

    Describe the bug After creating a new project with create-react-app yarn start and yarn test do not run. There is a conflict with babel-loader version.

    Changing the line in package.json to "babel-loader": "8.0.4" seems to fix it.

    To Reproduce Steps to reproduce the behavior:

    1. Start a project with npx create-react-app taskbox
    2. Init storybook npx -p @storybook/cli sb init
    3. Run yarn test

    Expected behavior Should run the tests.

    Code snippets

    npx create-react-app taskbox
    
    Creating a new React app in /Users/aericson/projects/taskbox.
    
    Installing packages. This might take a couple of minutes.
    Installing react, react-dom, and react-scripts...
    
    yarn add v1.12.3
    [1/4] ๐Ÿ”  Resolving packages...
    [2/4] ๐Ÿšš  Fetching packages...
    [3/4] ๐Ÿ”—  Linking dependencies...
    [4/4] ๐Ÿ“ƒ  Building fresh packages...
    success Saved lockfile.
    success Saved 5 new dependencies.
    info Direct dependencies
    โ”œโ”€ [email protected]
    โ”œโ”€ [email protected]
    โ””โ”€ [email protected]
    info All dependencies
    โ”œโ”€ [email protected]
    โ”œโ”€ [email protected]
    โ”œโ”€ [email protected]
    โ”œโ”€ [email protected]
    โ””โ”€ [email protected]
    โœจ  Done in 75.22s.
    
    Initialized a git repository.
    
    Success! Created taskbox at /Users/aericson/projects/taskbox
    Inside that directory, you can run several commands:
    
      yarn start
        Starts the development server.
    
      yarn build
        Bundles the app into static files for production.
    
      yarn test
        Starts the test runner.
    
      yarn eject
        Removes this tool and copies build dependencies, configuration files
        and scripts into the app directory. If you do this, you canโ€™t go back!
    
    We suggest that you begin by typing:
    
      cd taskbox
      yarn start
    
    Happy hacking!
    โžœ  projects cd taskbox
    โžœ  taskbox git:(master) npx -p @storybook/cli sb init
    npx: installed 423 in 38.734s
    [BABEL] Note: The code generator has deoptimised the styling of /Users/aericson/.npm/_npx/7855/lib/node_modules/@storybook/cli/node_modules/lodash/lodash.js as it exceeds the max of 500KB.
    
     sb init - the simplest way to add a storybook to your project.
    
     โ€ข Detecting project type. โœ“
     โ€ข Adding storybook support to your "Create React App" based project. โœ“
     โ€ข Preparing to install dependencies. โœ“
    
    yarn install v1.12.3
    [1/4] ๐Ÿ”  Resolving packages...
    [2/4] ๐Ÿšš  Fetching packages...
    [3/4] ๐Ÿ”—  Linking dependencies...
    warning "@storybook/react > @emotion/styled > @emotion/[email protected]" has unmet peer dependency "@emotion/[email protected]".
    warning " > [email protected]" has unmet peer dependency "[email protected]>=2".
    [4/4] ๐Ÿ“ƒ  Building fresh packages...
    success Saved lockfile.
    โœจ  Done in 58.11s.
    
     โ€ข Installing dependencies. โœ“
    
    To run your storybook, type:
    
       yarn storybook
    
    For more information visit: https://storybook.js.org
    
    โžœ  taskbox git:(master) โœ— yarn test
    yarn run v1.12.3
    $ react-scripts test
    
    There might be a problem with the project dependency tree.
    It is likely not a bug in Create React App, but something you need to fix locally.
    
    The react-scripts package provided by Create React App requires a dependency:
    
      "babel-loader": "8.0.4"
    
    Don't try to install it manually: your package manager does it automatically.
    However, a different version of babel-loader was detected higher up in the tree:
    
      /Users/aericson/projects/taskbox/node_modules/babel-loader (version: 8.0.5)
    
    Manually installing incompatible versions is known to cause hard-to-debug issues.
    
    If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
    That will permanently disable this message but you might encounter other issues.
    
    To fix the dependency tree, try following the steps below in the exact order:
    
      1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
      2. Delete node_modules in your project folder.
      3. Remove "babel-loader" from dependencies and/or devDependencies in the package.json file in your project folder.
      4. Run npm install or yarn, depending on the package manager you use.
    
    In most cases, this should be enough to fix the problem.
    If this has not helped, there are a few other things you can try:
    
      5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
         This may help because npm has known issues with package hoisting which may get resolved in future versions.
    
      6. Check if /Users/aericson/projects/taskbox/node_modules/babel-loader is outside your project directory.
         For example, you might have accidentally installed something in your home folder.
    
      7. Try running npm ls babel-loader in your project folder.
         This will tell you which other package (apart from the expected react-scripts) installed babel-loader.
    
    If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
    That would permanently disable this preflight check in case you want to proceed anyway.
    
    P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!
    
    error Command failed with exit code 1.
    info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
    โžœ  taskbox git:(master) โœ—
    

    Here are the versions installed:

    npx create-react-app --version
    2.1.3
    
    and the versions that storybook added with `sb init`
    
      "devDependencies": {
        "@storybook/react": "^4.1.4",
        "@storybook/addon-actions": "^4.1.4",
        "@storybook/addon-links": "^4.1.4",
        "@storybook/addons": "^4.1.4",
        "@babel/core": "^7.2.2",
        "babel-loader": "^8.0.5"
      }
    

    System:

    • OS: MacOS
    • Device: Macbook Pro 2018
    • Framework: react
    • Version: 4.1.4
    Reviewed by aericson at 2019-01-08 15:52
  • 3. Dependencies.io troubleshooting

    We're opening this issue to inform you about problems with your dependencies.io configuration or build failures.

    We'll add a comment here when we see problems. You can close this issue when you have things resolved -- we'll open it back up if we detect new problems.

    Helpful links:

    Note: To help keep your repo as clean as possible, this is the only issue that we're going to open and comment on. Feel free to delete the comments that are made as you resolve them, if you want to keep this issue short and tidy.

    Reviewed by dependencies[bot] at 2017-09-30 19:08
  • 4. Storybook v5 breaks when using core-js ^3.0

    Describe the bug Storybook doesn't compile after upgrading core-js to version 3.

    This might have something to do with symbol polyfill required in https://github.com/storybooks/storybook/blob/0bdb2ca94e5ec732d84d3b330aa3b5bedfc534ec/lib/core/src/server/common/polyfills.js#L3

    To Reproduce Steps to reproduce the behavior:

    1. Install core-js version 3.0 or higher
    2. Have corejs: { version: 3 }, in @babel/env options
    3. Try running storybook server
    4. Observe error
    ERROR in ./.storybook/config.js
    Module not found: Error: Can't resolve 'core-js/modules/web.dom-collections.iterator' in '/Users/Work/react/.storybook'
     @ ./.storybook/config.js 3:0-55
     @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true
    

    System:

    Reviewed by ilyaulyanov at 2019-03-20 19:33
  • 5. Storybook 6.4 build failing with Angular 13.1

    Describe the bug Angular 13.1 was released yesterday, however when trying to build Storybook 6.4 with Angular 13.1, there is an error thrown:

    ERR! TypeError: getTypescriptWorkerPlugin is not a function
    ERR!     at /sb-angular13.1-repro/node_modules/@storybook/angular/dist/ts3.9/server/angular-cli-webpack-13.x.x.js:79:206
    ERR!     at /sb-angular13.1-repro/node_modules/@angular-devkit/build-angular/src/utils/webpack-browser-config.js:72:16
    ERR!     at generateWebpackConfig (/sb-angular13.1-repro/node_modules/@angular-devkit/build-angular/src/utils/webpack-browser-config.js:61:40)
    ERR!     at async generateBrowserWebpackConfigFromContext (/sb-angular13.1-repro/node_modules/@angular-devkit/build-angular/src/utils/webpack-browser-config.js:123:20)
    ERR!     at async generateI18nBrowserWebpackConfigFromContext (/sb-angular13.1-repro/node_modules/@angular-devkit/build-angular/src/utils/webpack-browser-config.js:70:20)
    ERR!  TypeError: getTypescriptWorkerPlugin is not a function
    ERR!     at /sb-angular13.1-repro/node_modules/@storybook/angular/dist/ts3.9/server/angular-cli-webpack-13.x.x.js:79:206
    ERR!     at /sb-angular13.1-repro/node_modules/@angular-devkit/build-angular/src/utils/webpack-browser-config.js:72:16
    ERR!     at generateWebpackConfig (/sb-angular13.1-repro/node_modules/@angular-devkit/build-angular/src/utils/webpack-browser-config.js:61:40)
    ERR!     at async generateBrowserWebpackConfigFromContext (/sb-angular13.1-repro/node_modules/@angular-devkit/build-angular/src/utils/webpack-browser-config.js:123:20)
    ERR!     at async generateI18nBrowserWebpackConfigFromContext (/sb-angular13.1-repro/node_modules/@angular-devkit/build-angular/src/utils/webpack-browser-config.js:70:20)
    

    To Reproduce Basically you just need to run npx [email protected] repro and select angular. It's already broken then.

    https://github.com/dsimon-onventis/sb-angular13.1

    System Environment Info:

    System: OS: Linux 5.10 Ubuntu 20.04.3 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i5-8365U CPU @ 1.60GHz Yarn: 3.1.1 - /usr/bin/yarn npm: 8.2.0 - ~/.npm-global/bin/npm Browsers: Chrome: 96.0.4664.93 npmPackages: @storybook/addon-actions: ^6.4.9 => 6.4.9 @storybook/addon-docs: ^6.4.9 => 6.4.9 @storybook/addon-essentials: ^6.4.9 => 6.4.9 @storybook/addon-links: ^6.4.9 => 6.4.9 @storybook/angular: ^6.4.9 => 6.4.9 @storybook/builder-webpack5: ^6.4.9 => 6.4.9 @storybook/manager-webpack5: ^6.4.9 => 6.4.9

    Reviewed by dsimon-onventis at 2021-12-10 10:38
  • 6. Angular 12 Support

    Describe

    Angular 12 was released a few hours ago, release post, and it looks like Storybook isn't working with it out of the box for now.

    When running yarn storybook, it throws the following error:

    info @storybook/angular v6.3.0-alpha.25
    info
    info => Loading presets
    info => Loading 1 config file in "/private/var/folders/vz/y7q44gbj4ks8ykwqgh8qgxxc0000gn/T/tmp.svpVK5CL/angular/.storybook"
    info => Loading 7 other files in "/private/var/folders/vz/y7q44gbj4ks8ykwqgh8qgxxc0000gn/T/tmp.svpVK5CL/angular/.storybook"
    info => Adding stories defined in "/private/var/folders/vz/y7q44gbj4ks8ykwqgh8qgxxc0000gn/T/tmp.svpVK5CL/angular/.storybook/main.js"
    info => Found custom tsconfig.json
    info => Using implicit CSS loaders
    info => Cleared cached manager config
    โ„น ๏ฝขwdm๏ฝฃ: wait until bundle finished:
    info => Loading angular-cli config
    info => Using angular project "angular" for configuring Storybook
    info => Using angular-cli webpack config
    info => Using default Webpack4 setup
    ERR! WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
    ERR!  - configuration.module.rules[9] has an unknown property 'mimetype'. These properties are valid:
    ERR!    object { compiler?, enforce?, exclude?, include?, issuer?, loader?, loaders?, oneOf?, options?, parser?, query?, realResource?, resolve?, resource?, resourceQuery?, rules?, sideEffects?, test?, type?, use? }
    ERR!    -> A rule
    ERR!     at Object.webpack [as get] (/private/var/folders/vz/y7q44gbj4ks8ykwqgh8qgxxc0000gn/T/tmp.svpVK5CL/angular/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/webpack.js:31:9)
    ERR!     at Object.start (/private/var/folders/vz/y7q44gbj4ks8ykwqgh8qgxxc0000gn/T/tmp.svpVK5CL/angular/node_modules/@storybook/builder-webpack4/dist/cjs/index.js:92:27)
    ERR!     at async Promise.all (index 0)
    ERR!     at async storybookDevServer (/private/var/folders/vz/y7q44gbj4ks8ykwqgh8qgxxc0000gn/T/tmp.svpVK5CL/angular/node_modules/@storybook/core-server/dist/cjs/dev-server.js:114:28)
    ERR!     at async buildDevStandalone (/private/var/folders/vz/y7q44gbj4ks8ykwqgh8qgxxc0000gn/T/tmp.svpVK5CL/angular/node_modules/@storybook/core-server/dist/cjs/build-dev.js:109:31)
    ERR!     at async Object.buildDev (/private/var/folders/vz/y7q44gbj4ks8ykwqgh8qgxxc0000gn/T/tmp.svpVK5CL/angular/node_modules/@storybook/core-server/dist/cjs/build-dev.js:150:5)
    ERR!  WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
    ERR!  - configuration.module.rules[9] has an unknown property 'mimetype'. These properties are valid:
    ERR!    object { compiler?, enforce?, exclude?, include?, issuer?, loader?, loaders?, oneOf?, options?, parser?, query?, realResource?, resolve?, resource?, resourceQuery?, rules?, sideEffects?, test?, type?, use? }
    ERR!    -> A rule
    ERR!     at Object.webpack [as get] (/private/var/folders/vz/y7q44gbj4ks8ykwqgh8qgxxc0000gn/T/tmp.svpVK5CL/angular/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/webpack.js:31:9)
    ERR!     at Object.start (/private/var/folders/vz/y7q44gbj4ks8ykwqgh8qgxxc0000gn/T/tmp.svpVK5CL/angular/node_modules/@storybook/builder-webpack4/dist/cjs/index.js:92:27)
    ERR!     at async Promise.all (index 0)
    ERR!     at async storybookDevServer (/private/var/folders/vz/y7q44gbj4ks8ykwqgh8qgxxc0000gn/T/tmp.svpVK5CL/angular/node_modules/@storybook/core-server/dist/cjs/dev-server.js:114:28)
    ERR!     at async buildDevStandalone (/private/var/folders/vz/y7q44gbj4ks8ykwqgh8qgxxc0000gn/T/tmp.svpVK5CL/angular/node_modules/@storybook/core-server/dist/cjs/build-dev.js:109:31)
    ERR!     at async Object.buildDev (/private/var/folders/vz/y7q44gbj4ks8ykwqgh8qgxxc0000gn/T/tmp.svpVK5CL/angular/node_modules/@storybook/core-server/dist/cjs/build-dev.js:150:5)
    
    WARN Broken build, fix the error above.
    WARN You may need to refresh the browser.
    

    To Reproduce

    To bootstrap a fresh Angular 12 + Storybook 6.3 alpha just run npx [email protected] repro ./a_directory --framework angular --template angular

    System

      System:
        OS: macOS 11.3
        CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
      Binaries:
        Node: 14.15.5 - ~/.nvm/versions/node/v14.15.5/bin/node
        Yarn: 2.4.1 - /usr/local/bin/yarn
        npm: 6.14.11 - ~/.nvm/versions/node/v14.15.5/bin/npm
      Browsers:
        Chrome: 90.0.4430.212
        Firefox: 87.0
        Safari: 14.1
      npmPackages:
        @storybook/addon-actions: ^6.3.0-alpha.25 => 6.3.0-alpha.25
        @storybook/addon-docs: ^6.3.0-alpha.25 => 6.3.0-alpha.25
        @storybook/addon-essentials: ^6.3.0-alpha.25 => 6.3.0-alpha.25
        @storybook/addon-links: ^6.3.0-alpha.25 => 6.3.0-alpha.25
        @storybook/angular: ^6.3.0-alpha.25 => 6.3.0-alpha.25
    
        @angular-devkit/build-angular: ~12.0.0
        @angular/cli: ~12.0.0
        @angular/compiler-cli: ~12.0.0
    

    Additional context

    Maybe also related to https://github.com/storybookjs/storybook/issues/14044#issuecomment-839110931?

    Reviewed by gaetanmaisse at 2021-05-13 06:48
  • 7. Substories/Hierarchy

    Would be nice to be able to have "Substories" or a Hierarchy of stories. My case involves various mini "apps" being contained in the same repo. A simple solution would be an option to display stores named like ui.core.foo and ui.core.bar like:

    ui
    โ””โ”€โ”€ core
        โ”œโ”€โ”€ bar
        โ””โ”€โ”€ foo
    

    With support for expanding and collapsing nodes.

    Reviewed by joeruello at 2016-04-28 03:54
  • 8. Storybook build fails with "Cannot find module 'webpack/lib/util/makeSerializable.js" after upgrading storybook packages to 6.3.0

    Describe the bug start-storybook and build-storybook fail with Error: Cannot find module 'webpack/lib/util/makeSerializable.js'

    To Reproduce See this commit: https://github.com/ismay/superwolff/commit/2ef03b79734af55c87d8b58f84422c1e1894a2c2. Chromatic tests here are unchanged, so on CI the build isn't failing. However a local npm install (even after clearing node_modules) of this commit, and running npm run storybook:start yields the following output:

    > storybook:start
    > start-storybook -p 6006 --quiet
    
    info @storybook/react v6.3.0
    info 
    info => Loading presets
    info => Loading 1 config file in "/Users/ismay/Projects/github/ismay/superwolff/.storybook"
    info => Loading 9 other files in "/Users/ismay/Projects/github/ismay/superwolff/.storybook"
    info => Adding stories defined in "/Users/ismay/Projects/github/ismay/superwolff/.storybook/main.js"
    info => Using prebuilt manager
    info => Using implicit CSS loaders
    info => Using default Webpack5 setup
    <i> [webpack-dev-middleware] wait until bundle finished
    node:internal/modules/cjs/loader:927
      throw err;
      ^
    
    Error: Cannot find module 'webpack/lib/util/makeSerializable.js'
    Require stack:
    - /Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/react-docgen-typescript-plugin/dist/dependency.js
    - /Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/react-docgen-typescript-plugin/dist/plugin.js
    - /Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/react-docgen-typescript-plugin/dist/index.js
    - /Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/react/dist/cjs/server/framework-preset-react-docgen.js
    - /Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/core-common/dist/cjs/presets.js
    - /Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/core-common/dist/cjs/index.js
    - /Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/core-server/dist/cjs/index.js
    - /Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/core/dist/cjs/server.js
    - /Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/core/server.js
    - /Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/react/dist/cjs/server/index.js
    - /Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/react/bin/index.js
        at Function.Module._resolveFilename (node:internal/modules/cjs/loader:924:15)
        at Function.Module._load (node:internal/modules/cjs/loader:769:27)
        at Module.require (node:internal/modules/cjs/loader:996:19)
        at require (node:internal/modules/cjs/helpers:92:18)
        at Object.<anonymous> (/Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/react-docgen-typescript-plugin/dist/dependency.js:6:55)
        at Module._compile (node:internal/modules/cjs/loader:1092:14)
        at Object.Module._extensions..js (node:internal/modules/cjs/loader:1121:10)
        at Module.load (node:internal/modules/cjs/loader:972:32)
        at Function.Module._load (node:internal/modules/cjs/loader:813:14)
        at Module.require (node:internal/modules/cjs/loader:996:19)
        at require (node:internal/modules/cjs/helpers:92:18)
        at /Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/react-docgen-typescript-plugin/dist/plugin.js:108:42
        at _next0 (eval at create (/Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/builder-webpack5/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:203:1)
        at Hook.eval [as call] (eval at create (/Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/builder-webpack5/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:286:1)
        at Hook.CALL_DELEGATE [as _call] (/Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/builder-webpack5/node_modules/webpack/node_modules/tapable/lib/Hook.js:14:14)
        at Compiler.newCompilation (/Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/Compiler.js:1017:26) {
      code: 'MODULE_NOT_FOUND',
      requireStack: [
        '/Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/react-docgen-typescript-plugin/dist/dependency.js',
        '/Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/react-docgen-typescript-plugin/dist/plugin.js',
        '/Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/react-docgen-typescript-plugin/dist/index.js',
        '/Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/react/dist/cjs/server/framework-preset-react-docgen.js',
        '/Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/core-common/dist/cjs/presets.js',
        '/Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/core-common/dist/cjs/index.js',
        '/Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/core-server/dist/cjs/index.js',
        '/Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/core/dist/cjs/server.js',
        '/Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/core/server.js',
        '/Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/react/dist/cjs/server/index.js',
        '/Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/react/bin/index.js'
      ]
    }
    

    System

    Environment Info:
    
      System:
        OS: macOS 11.3
        CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
      Binaries:
        Node: 15.14.0 - /var/folders/61/0bv_jh4j7jv0znfdbw6p5c180000gn/T/fnm_multishells/21506_1624468041471/bin/node
        npm: 7.9.0 - /var/folders/61/0bv_jh4j7jv0znfdbw6p5c180000gn/T/fnm_multishells/21506_1624468041471/bin/npm
      Browsers:
        Chrome: 91.0.4472.114
        Firefox: 89.0.1
        Safari: 14.1
      npmPackages:
        @storybook/addon-actions: ^6.3.0 => 6.3.0 
        @storybook/addon-essentials: ^6.3.0 => 6.3.0 
        @storybook/addon-links: ^6.3.0 => 6.3.0 
        @storybook/builder-webpack5: ^6.3.0 => 6.3.0 
        @storybook/manager-webpack5: ^6.3.0 => 6.3.0 
        @storybook/react: ^6.3.0 => 6.3.0 
    
    Reviewed by ismay at 2021-06-23 17:15
  • 9. Error: exports is not defined

    I'm trying to use storybook for the first time, so I decided to follow the guides. I can get it working with the examples, but as soon as i pull in my own components i get exports is not defined. It doesn't matter if I use the "Quick Start Guide" or the "Slow Start Guide (React)" I always get the same unhelpful error.

    exports is not defined

    ReferenceError: exports is not defined at Object. (http://localhost:6006/static/preview.bundle.js:43176:23) at webpack_require (http://localhost:6006/static/preview.bundle.js:679:30) at fn (http://localhost:6006/static/preview.bundle.js:89:20) at Object. (http://localhost:6006/static/preview.bundle.js:43132:76) at Object. (http://localhost:6006/static/preview.bundle.js:43142:30) at webpack_require (http://localhost:6006/static/preview.bundle.js:679:30) at fn (http://localhost:6006/static/preview.bundle.js:89:20) at loadStories (http://localhost:6006/static/preview.bundle.js:40160:3) at ConfigApi._renderMain (http://localhost:6006/static/preview.bundle.js:41134:20) at render (http://localhost:6006/static/preview.bundle.js:41092:17) at ConfigApi.configure (http://localhost:6006/static/preview.bundle.js:41117:9) at Object. (http://localhost:6006/static/preview.bundle.js:40164:68) at Object.defineProperty.value (http://localhost:6006/static/preview.bundle.js:40165:30) at webpack_require (http://localhost:6006/static/preview.bundle.js:679:30) at fn (http://localhost:6006/static/preview.bundle.js:89:20) at Object.window.STORYBOOK_REACT_CLASSES (http://localhost:6006/static/preview.bundle.js:38867:18) at webpack_require (http://localhost:6006/static/preview.bundle.js:679:30) at http://localhost:6006/static/preview.bundle.js:725:39 at http://localhost:6006/static/preview.bundle.js:728:10

    That error doesn't really help much, and when I look up the error I end up at some issues from last year all saying that this problem has been patched out... I know that it's probably my component that is exported in some way that storybook doesn't like. But since all I'm getting is exports is not defined (along with some mess of a stacktrace) its kind of hard to debug.

    I'm using typescript and I'm compiling it with just plain old tsc.

    //tsconfig.json
    {
      "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "jsx": "react",
        "declaration": true,
        "sourceMap": true,
        "outDir": "./dist",
        "esModuleInterop": true
      },
      "include": [
        "./src/**/*.tsx"
      ],
      "exclude": [
        "node_modules"
      ]
    }
    

    And then importing the compiled js into storybooks.

    //index.stories.jsx
    import React from 'react';
    import { storiesOf } from '@storybook/react';
    import { action } from '@storybook/addon-actions';
    
    import { MatrixEffect } from '../dist/index';
    
    storiesOf('MatrixEffect', module)
      .add('100x100', () => 
        <MatrixEffect height={100} width={100} />
      );
    
    

    Version

    • @storybook/react 3.4.0
    • @storybook/addon-actions 3.4.0
    • babel-core 6.26.0
    • react 16.3.0

    What am I missing? (if there's a way to just import the ts straight away then that would preferable. But since I haven't found any official docs for it, this is what I've got so far)

    Reviewed by Olian04 at 2018-04-03 18:15
  • 10. Angular 2 support

    I realize Angular 2 support was on the roadmap, and I'm pretty happy about that. I wanted to share my related attempt at adapting the repo to that end, and didn't find a relevant thread here yet, so figured I might as well make one. I hadn't managed to put a PoC together yet, but perhaps the Angular bits from my first commit here may help provide some inspiration. I realize it's forking an outdated version of this repo too, but I guess the concepts should still apply.

    Reviewed by KiaraGrouwstra at 2016-06-22 14:08
  • 11. @storybook 5.1.1 is throwing an error on build

    Just upgraded to 5.1.1 from 5.0.1 and the build fails. I downgraded to 5.0.1, removed my nodes_modules folder and reinstall all my packages but the issues remain.

    I've never installed the core-js package before and even after installing it the issues remain.

    Screen Shot 2019-06-05 at 18 21 55 Screen Shot 2019-06-05 at 18 25 55

    System:

    • OS: MacOS
    • Device: Macbook Pro 2016
    • Framework: vue
    • Version: 2.6.6
    Reviewed by ChucKN0risK at 2019-06-05 16:27
  • 12. Number precision lost when parsing args param

    Describe the bug When parsing args param from url, if the value str is larger than Number.MAX_SAFE_INTEGER, it will lost it's precision, for example, 12345678912345678911 will be changed to 12345678912345680000.

    The reason is that the QS_OPTIONS's decoder in parseArgsParam (the code is in @storybook/preview-web package) use NUMBER_REGEXP to test the value and then use Number to transform it.

    To Reproduce Reproduction deployed with Chromatic: (https://6278daae5c4c08004af772e2-pwgaxlawbd.chromatic.com/?path=/story/bigint--template

    type 12345678912345678911 in num, then refresh the page, the number will be changed to 12345678912345680000

    The reproduction can be cloned from the following repo: https://github.com/evont/my-storybook-reproduction

    System OS: macOS 12.2.1 CPU: (10) arm64 Apple M1 Pro Binaries: Node: 17.4.0 - /opt/homebrew/bin/node Yarn: 3.2.0 - /opt/homebrew/bin/yarn npm: 8.3.1 - /opt/homebrew/bin/npm Browsers: Chrome: 101.0.4951.54 Safari: 15.3 npmPackages: @storybook/addon-actions: ^6.5.0-beta.7 => 6.5.0-beta.7 @storybook/addon-docs: ^6.5.0-beta.7 => 6.5.0-beta.7 @storybook/addon-essentials: ^6.5.0-beta.7 => 6.5.0-beta.7 @storybook/addon-interactions: ^6.5.0-beta.7 => 6.5.0-beta.7 @storybook/addon-links: ^6.5.0-beta.7 => 6.5.0-beta.7 @storybook/builder-webpack4: ^6.5.0-beta.7 => 6.5.0-beta.7 @storybook/manager-webpack4: ^6.5.0-beta.7 => 6.5.0-beta.7 @storybook/react: ^6.5.0-beta.7 => 6.5.0-beta.7 @storybook/testing-library: ^0.0.11 => 0.0.11

    Reviewed by evont at 2022-05-11 04:29
  • 13. >= v6.5.0-beta.2 breaks on build-storybook; looking for package.json in wrong directory

    Describe the bug After updating storybook packages from v6.5.0-beta.1 to v6.5.0-beta.2, I receive this error when running build-storybook:

    ERR! Error: /Users/stephenhebert/source/repos/teamup_all/package.json: ENOENT: no such file or directory, open '/Users/stephenhebert/source/repos/teamup_all/package.json'
    

    My repo is a monorepo and this project/storybook/package.json are located in a subdirectory of the one referenced in the error.

    System Environment Info:

    System: OS: macOS 11.6 CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz Binaries: Node: 14.17.3 - ~/.nvm/versions/node/v14.17.3/bin/node Yarn: 1.22.17 - /usr/local/bin/yarn npm: 6.14.13 - ~/.nvm/versions/node/v14.17.3/bin/npm Browsers: Chrome: 101.0.4951.54 Safari: 15.1 npmPackages: @storybook/addon-a11y: 6.5.0-beta.2 => 6.5.0-beta.2 @storybook/addon-actions: 6.5.0-beta.2 => 6.5.0-beta.2 @storybook/addon-essentials: 6.5.0-beta.2 => 6.5.0-beta.2 @storybook/addon-storysource: 6.5.0-beta.2 => 6.5.0-beta.2 @storybook/addons: 6.5.0-beta.2 => 6.5.0-beta.2 @storybook/api: 6.5.0-beta.2 => 6.5.0-beta.2 @storybook/builder-vite: ^0.1.28 => 0.1.28 @storybook/components: 6.5.0-beta.2 => 6.5.0-beta.2 @storybook/core-common: 6.5.0-beta.2 => 6.5.0-beta.2 @storybook/core-events: 6.5.0-beta.2 => 6.5.0-beta.2 @storybook/theming: 6.5.0-beta.2 => 6.5.0-beta.2 @storybook/vue3: 6.5.0-beta.2 => 6.5.0-beta.2

    Reviewed by stephenhebert at 2022-05-11 01:30
  • 14. Storyshots fail on Node 18

    Describe the bug Storyshots no longer work due to an error when calling initStoryshots().

     TypeError: Cannot redefine property: onkeydown
    
          18 | };
          19 |
        > 20 | initStoryshots(...
    

    To Reproduce [ I'm currently doing the repro]

    Upgrade to Node 18.0.0. Call initStoryshots(). Works if Node downgraded < 18.0.0.

    System System: OS: macOS 12.3.1 CPU: (10) arm64 Apple M1 Max Binaries: Node: 18.0.0 - /opt/homebrew/bin/node Yarn: 1.22.15 - /usr/local/bin/yarn npm: 8.6.0 - /opt/homebrew/bin/npm Browsers: Chrome: 101.0.4951.54 Firefox: 97.0.2 Safari: 15.4

    Additional context

    Reviewed by chrischen at 2022-05-10 21:57
  • 15. Build difference between local and action

    Describe the bug I get this error when building storybook via the chromaui/action

    ERR! => Failed to build the preview
    ERR! ./node_modules/@aw-web-design/styled-system/dist/esm/core/parser.js 41:44
    ERR! Module parse failed: Unexpected token (41:44)
    ERR! You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
    ERR! |         let styles = {};
    ERR! |         let shouldSort = false;
    ERR! >         const isCacheDisabled = props.theme?.disableStyledSystemCache;
    ERR! |         Object.keys(props).forEach(key => {
    ERR! |             if (!config[key]) {
    

    but when i run the exact same build command locally it builds no issue.

    To Reproduce I have a repo here https://github.com/The-Code-Monkey/TechStack that has the issue on it.

    System Environment Info:

    System: OS: macOS 12.3.1 CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz Binaries: Node: 16.15.0 - ~/.nvm/versions/node/v16.15.0/bin/node Yarn: 1.22.15 - /usr/local/bin/yarn npm: 8.5.5 - ~/.nvm/versions/node/v16.15.0/bin/npm Browsers: Chrome: 101.0.4951.54 Safari: 15.4

    Additional context I am running on the latest beta of storybook, so im not sure why there is an issue this has been working recently.

    Reviewed by The-Code-Monkey at 2022-05-10 07:37
  • 16. Add common devices top url bars and bottom toolbars to addon/viewport.

    Is your feature request related to a problem? Please describe I'm working on a mobile website, and the mockups in Figma, have the URL bar (and browser buttons), and back/home buttons below. For example, mockups might come drawn inside something like this.

    Describe the solution you'd like I'd like to be able to setup extra options for viewports like url bars for common devices, showing a configurable url with the right color (like android does), and navigation buttons that are still common in lots of devices.

    Describe alternatives you've considered I have considered adding a decorator for stories which re-implements something like this, but it would be nice if it was supported out of the box, since I think getting mockups surrounded with web browsers is very common.

    Are you able to assist to bring the feature to reality? Not currently, but if instructed in how to do so I might be able to help

    Reviewed by DamianPereira at 2022-05-09 21:10
An isolated development space with integrated fuzz testing for your components. See them individually, explore them in different states and quickly and confidently develop them.
An isolated development space with integrated fuzz testing for your components. See them individually, explore them in different states and quickly and confidently develop them.

Carte Blanche IMPORTANT: This project is unfinished and not maintained. Do not try to use it, it likely does not work anymore. Carte Blanche is an iso

Mar 6, 2022
โœ It has never been so easy to document your things!
โœ It has never been so easy to document your things!

Docz makes it easy to write and publish beautiful interactive documentation for your code. Create MDX files showcasing your code and Docz turns them i

May 10, 2022
Create, isolate and test modular UI components in React.
Create, isolate and test modular UI components in React.

ui-harness Isolate, test and document modular UI with React using familiar describe/it testing semantics. http://uiharness.com Quick Start (1-minute)

Dec 24, 2021
Typing test website build with React
Typing test website build with React

typing-test NOTE: This is my recreation of already existing monkeytype This site is currently live: Visit Here How to run locally git clone https://gi

May 9, 2022
Brief notes about React with Test Suites

React Camp Spec All ideas, tasks and some solutions was created during the watching "The Complete React Developer Course" by Andrew Mead and "React -

Dec 2, 2021
Lightweight unit test library for ReactJS

react-unit React Unit is a lightweight unit test library for ReactJS with very few (js-only) dependencies. By using react-unit you can run your ReactJ

Jul 22, 2021
Test-new-app - Next.js + Tailwind CSS + TypeScript starter packed with useful development features
Test-new-app - Next.js + Tailwind CSS + TypeScript starter packed with useful development features

?? ts-nextjs-tailwind-starter Next.js + Tailwind CSS + TypeScript starter packed

May 14, 2022
Show More Less: React library to manage long paragraphs

ShowMoreLess React library to manage long paragraphs Install npm install --save show-more-less Usage import React, { useState } from 'react' import st

Dec 19, 2021
:hourglass_flowing_sand: A higher order component for loading components with promises.
:hourglass_flowing_sand: A higher order component for loading components with promises.

A higher order component for loading components with dynamic imports. Install yarn add react-loadable Example import Loadable from 'react-loadable'; i

May 17, 2022
Component to build simple, flexible, and accessible toggle components
Component to build simple, flexible, and accessible toggle components

react-toggled โš›๏ธ Component to build simple, flexible, and accessible toggle components The problem You want a toggle component that's simple and gives

Mar 15, 2022
React Gatsby static web tool for generative artists working on token based NFT artwork (ex: Artblocks)
React Gatsby static web tool for generative artists working on token based NFT artwork (ex: Artblocks)

token-art-tools React Gatsby static web tool for generative artists working on hash based art (ex: Artblocks)

Apr 22, 2022
A lightweight, easy to extend web debugging tool developed based on react.
A lightweight, easy to extend web debugging tool developed based on react.

English | ็ฎ€ไฝ“ไธญๆ–‡ A lightweight, easy to extend web debugging tool developed based on react. Easy to use Full-featured Easy to expand high performance Us

Apr 22, 2022
An upgradable boilerplate for Progressive web applications (PWA) with server side rendering, build with SEO in mind and achieving max page speed and optimized user experience.
An upgradable boilerplate for Progressive web applications (PWA) with server side rendering, build with SEO in mind and achieving max page speed and optimized user experience.

React PWA v2 A highly scalable, Progressive Web Application foundation,boilerplate, with the best Developer Experience. Demo: https://demo.reactpwa.co

May 13, 2022
Collaborate & label any type of data, images, text, or documents, in an easy web interface or desktop app.
Collaborate & label any type of data, images, text, or documents, in an easy web interface or desktop app.

Universal Data Tool Try it out at udt.dev, download the desktop app or run on-premise. Docs โ€ข Website โ€ข Playground โ€ข Library Usage โ€ข On-Premise The Un

May 16, 2022
A Web library to simply integrate Agora Video Calling or Live Video Streaming to your website with just a few lines of code

Agora React Web UIKit Instantly integrate Agora video calling or streaming into your web application using a React based UIKit for the Agora Web SDK.

Mar 30, 2022
Seamlessly integrate a search engine to find live ticker symbols into your web app
Seamlessly integrate a search engine to find live ticker symbols into your web app

Ticker Symbol Search Seamlessly integrate a search engine to find live ticker symbols into your web app View Demo ยท Report Bug ยท Request Feature Usage

Dec 17, 2021
Tweak React components in real time. (Deprecated: use Fast Refresh instead.)

React Hot Loader Tweak React components in real time โš›๏ธ โšก๏ธ Watch Dan Abramov's talk on Hot Reloading with Time Travel. Moving towards next step React-

May 11, 2022
๐Ÿ“‘ CLI tool for creating demos of React components
๐Ÿ“‘  CLI tool for creating demos of React components

React DemoTab CLI ?? Easily create demos of React components Maintaining example code and demo separately makes it painful, it's easy to get them out

May 10, 2022
Chai.js assertions and convenience functions for testing React Components with enzyme
Chai.js assertions and convenience functions for testing React Components with enzyme

chai-enzyme Chai.js assertions for enzyme. Table of Contents Installation Setup Debug output in assertion exceptions Assertions 1. checked() 1. classN

Apr 24, 2022