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

Overview

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-

Comments
  • Vue: Add Vue3 support

    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.)

    feature request help wanted app: vue todo P1 app: vue3 
    opened by p3k 157
  • babel-loader conflicts with create-react-app version

    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
    bug documentation app: react has workaround cra P0 
    opened by aericson 155
  • Dependencies.io troubleshooting

    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.

    dependencies inactive 
    opened by dependencies[bot] 142
  • Storybook v5 breaks when using core-js ^3.0

    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:

    question / support dependencies babel / webpack has workaround core 
    opened by ilyaulyanov 100
  • Storybook 6.4 build failing with Angular 13.1

    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

    bug app: angular linear 
    opened by dkimmich-onventis 94
  • Storybook build fails with

    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 
    
    bug needs reproduction has workaround webpack5 linear 
    opened by ismay 92
  • Angular 12 Support

    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?

    feature request app: angular P1 
    opened by gaetanmaisse 81
  • Error: exports is not defined

    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)

    compatibility with other tools babel / webpack has workaround typescript 
    opened by Olian04 80
  • Substories/Hierarchy

    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.

    feature request api: stories ui 
    opened by joeruello 80
  • Add support for React 18

    Add support for React 18

    Is your feature request related to a problem? Please describe

    Only so far as upgrading to React 18 is concerned :)

    Specifically, when I try to update my devDependencies, @storybook/addon-controls throws an error, because it's peerDependencies is set to only React 16 and 17.

    Doublechecked in the package.json https://github.com/storybookjs/storybook/blob/next/addons/controls/package.json#L61-L64

    There's probably already some awareness of this and/or a fix in flight, but just in case I thought I'd mention it.

    Describe the solution you'd like

    Ideally I think it's as simple as updating the peerDependencies throughout Storybook's packages, but I'm sure there's some additional work in the ReactDOM.render > ReactDOM.createRoot transition that would affect Storybook's rendering cycle.

    Describe alternatives you've considered

    None as yet

    Are you able to assist to bring the feature to reality?

    I'm happy to make a PR to update the peerDeps, if it was deeper than that I'd be lost :)

    feature request app: react linear 
    opened by GrossDesignCo 77
  • Angular 2 support

    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.

    feature request help wanted app: angular 
    opened by KiaraGrouwstra 76
  • npm run build-storybook gives SyntaxError: Invalid regular expression: /%npm_config_

    npm run build-storybook gives SyntaxError: Invalid regular expression: /%npm_config_"errors" : [ {%/: Unterminated character class ...

    Describe the bug Using storybook for the first time and does not work on my mac. The same repo works for other colleagues. But for some reason gives ERR! SyntaxError: Invalid regular expression: /%npm_config_"errors" : [ {%/: Unterminated character class ERR! at new RegExp () ERR! at test-story-book/node_modules/@storybook/core-common/dist/cjs/utils/template.js:22:24

    See details below.

    test-story-book git:(master) โœ— npm run build-storybook

    [email protected] build-storybook build-storybook -s public

    info @storybook/react v6.5.12 info info => Cleaning outputDir: test-story-book/storybook-static (node:21182) DeprecationWarning: --static-dir CLI flag is deprecated, see:

    https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated---static-dir-cli-flag (Use node --trace-deprecation ... to show where the warning was created) info => Loading presets info => Copying static files: ./public => ./ info => Compiling manager.. info => Compiling preview.. info Addon-docs: using MDX1 info => Loading Webpack configuration from node_modules/react-scripts info => Removing existing JavaScript and TypeScript rules. info => Modifying Create React App rules. info => Using default Webpack5 setup ERR! SyntaxError: Invalid regular expression: /%npm_config_"errors" : [ {%/: Unterminated character class ERR! at new RegExp () ERR! at test-story-book/node_modules/@storybook/core-common/dist/cjs/utils/template.js:22:24 ERR! at Array.reduce () ERR! at interpolate (test-story-book/node_modules/@storybook/core-common/dist/cjs/utils/template.js:21:31) ERR! at getManagerHeadTemplate (test-story-book/node_modules/@storybook/core-common/dist/cjs/utils/template.js:65:10) ERR! at callee$ (test-story-book/node_modules/@storybook/manager-webpack5/dist/cjs/presets/manager-preset.js:116:88) ERR! at tryCatch (test-story-book/node_modules/regenerator-runtime/runtime.js:63:40) ERR! at Generator.invoke [as _invoke] (test-story-book/node_modules/regenerator-runtime/runtime.js:294:22) ERR! at Generator.next (test-story-book/node_modules/regenerator-runtime/runtime.js:119:21) ERR! at asyncGeneratorStep (test-story-book/node_modules/@storybook/manager-webpack5/dist/cjs/presets/manager-preset.js:83:103) ERR! SyntaxError: Invalid regular expression: /%npm_config"errors" : [ {%/: Unterminated character class ERR! at new RegExp () ERR! at test-story-book/node_modules/@storybook/core-common/dist/cjs/utils/template.js:22:24 ERR! at Array.reduce () ERR! at interpolate (test-story-book/node_modules/@storybook/core-common/dist/cjs/utils/template.js:21:31) ERR! at getManagerHeadTemplate (test-story-book/node_modules/@storybook/core-common/dist/cjs/utils/template.js:65:10) ERR! at _callee$ (test-story-book/node_modules/@storybook/manager-webpack5/dist/cjs/presets/manager-preset.js:116:88) ERR! at tryCatch (test-story-book/node_modules/regenerator-runtime/runtime.js:63:40) ERR! at Generator.invoke [as _invoke] (test-story-book/node_modules/regenerator-runtime/runtime.js:294:22) ERR! at Generator.next (test-story-book/node_modules/regenerator-runtime/runtime.js:119:21) ERR! at asyncGeneratorStep (test-story-book/node_modules/@storybook/manager-webpack5/dist/cjs/presets/manager-preset.js:83:103) info => Loading presets

    To Reproduce An error occurred while executing: yarn set version berry && yarn config set enableGlobalCache true && yarn config set nodeLinker node-modules ๐Ÿšจ Installing Yarn 2 failed ๐Ÿšจ Failed to create repro ERR! Error: command exited with code: 1: ERR! at ChildProcess. (.npm/_npx/eebb2d3a7d26a7f1/node_modules/@storybook/cli/dist/generate.js:201:264) ERR! at ChildProcess.emit (node:events:527:28) ERR! at Process.ChildProcess._handle.onexit (node:internal/child_process:291:12) ERR! Error: command exited with code: 1: ERR! at ChildProcess. (.npm/_npx/eebb2d3a7d26a7f1/node_modules/@storybook/cli/dist/generate.js:201:264) ERR! at ChildProcess.emit (node:events:527:28) ERR! at Process.ChildProcess._handle.onexit (node:internal/child_process:291:12)

    System Environment Info:

    System: OS: macOS 12.6 CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz Binaries: Node: 17.9.0 - /usr/local/bin/node Yarn: 1.22.19 - ~/Documents/Learning/test-story-book/node_modules/.bin/yarn npm: 8.5.5 - /usr/local/bin/npm Browsers: Chrome: 106.0.5249.61 Safari: 16.0 npmPackages: @storybook/addon-actions: ^6.5.12 => 6.5.12 @storybook/addon-essentials: ^6.5.12 => 6.5.12 @storybook/addon-interactions: ^6.5.12 => 6.5.12 @storybook/addon-links: ^6.5.12 => 6.5.12 @storybook/builder-webpack5: ^6.5.12 => 6.5.12 @storybook/manager-webpack5: ^6.5.12 => 6.5.12 @storybook/node-logger: ^6.5.12 => 6.5.12 @storybook/preset-create-react-app: ^4.1.2 => 4.1.2 @storybook/react: ^6.5.12 => 6.5.12 @storybook/testing-library: ^0.0.13 => 0.0.13

    Additional context Add any other context about the problem here.

    bug needs triage 
    opened by koolksh 0
  • Re-enable `svelte-vite/default-ts` template

    Re-enable `svelte-vite/default-ts` template

    This PR re-enables the svelte-vite/default-ts template.

    It was originally disabled in an attempt to fix the flaky sandbox smoke tests at https://github.com/storybookjs/storybook/commit/cddd1957bd669afb4a5c9e6b7c482f15a27dcaf9 but it didn't appear to have worked, so I don't think it makes sense to have it disabled anymore.

    Related to https://github.com/storybookjs/storybook/issues/19351 and https://github.com/storybookjs/storybook/issues/19351

    app: svelte build 
    opened by JReinhold 0
  • refactor(angular): drop support for angular < 13

    refactor(angular): drop support for angular < 13

    What I did

    According to the Angular LTS plan, Angular 12 support ends in Nov 2022. A lot of code exists to support Angular < 13 which increases the maintenance effort and decreases the contribution DX of framework/angular.

    This PR removes all code related to Angular < 13 in preparation for Storybook 7.0

    How to test

    • [x] Is this testable with Jest or Chromatic screenshots?
    • [ ] Does this need a new example in the kitchen sink apps?
    • [ ] Does this need an update to the documentation?

    If your answer is yes to any of these, please make sure to include it in your PR.

    maintenance app: angular 
    opened by kroeder 4
  • fix(cli): don't use `npx` in scripts

    fix(cli): don't use `npx` in scripts

    Issue: https://github.com/yarnpkg/berry/actions/runs/3191237001/jobs/5207299422

    https://github.com/storybookjs/storybook/pull/17898 updated the scripts added to the project to use npx.

    What I did

    Removed npx from the scripts added to the project package.json during

    yarn dlx -p @storybook/[email protected] sb init --yes
    

    How to test

    The e2e tests should have covered this but seems it was removed in https://github.com/storybookjs/storybook/pull/19303.

    opened by merceyz 0
  • The symbol

    The symbol "prevRefreshReg" has already been declared

    Describe the bug In the new 7.0 Alpha 35 it seems to break vite-plugin-react while launching storybook with storybook dev.

    ERROR: The symbol "prevRefreshReg" has already been declared

    Does not happen in Alpha 34.

    System

    Environment Info:
    
      System:
        OS: macOS 12.6
        CPU: (10) arm64 Apple M1 Max
      Binaries:
        Node: 16.14.2 - /usr/local/bin/node
        Yarn: 1.22.19 - /usr/local/bin/yarn
        npm: 8.8.0 - /usr/local/bin/npm
      Browsers:
        Chrome: 105.0.5195.125
        Firefox: 103.0.2
        Safari: 16.0
      npmPackages:
        @storybook/addon-essentials: 7.0.0-alpha.34 => 7.0.0-alpha.34
        @storybook/addon-links: 7.0.0-alpha.34 => 7.0.0-alpha.34
        @storybook/addons: ^7.0.0-alpha.34 => 7.0.0-alpha.34
        @storybook/cli: 7.0.0-alpha.34 => 7.0.0-alpha.34
        @storybook/react: 7.0.0-alpha.34 => 7.0.0-alpha.34
        @storybook/react-vite: ^7.0.0-alpha.34 => 7.0.0-alpha.34
        @storybook/theming: ^7.0.0-alpha.34 => 7.0.0-alpha.34
    
    bug needs triage 
    opened by hummal 0
Releases(v7.0.0-alpha.35)
  • v7.0.0-alpha.35(Oct 5, 2022)

    Features

    • Angular: Disable ngcc when not needed #19307
    • Vite: Add vue-vite framework for Vue2 #19230
    • Storyshots-puppeteer: Add browserLaunchOptions to CommonConfig #18927

    Bug Fixes

    • Vite: Fix svelte docgen and svelte-native stories #19339
    • CLI: Exclude @storybook/testing-react from outdated check #19272
    • Interactions: Fix path to checkActionsLoaded #19334
    • Webpack: Fix resolution of webpack config relating to resolve fallbacks (assert) #19358
    • Vite: Add vite framework plugin if not found #19259
    • Vue2: Fix play function within & args updating in decorators #19207

    Maintenance

    • Addon-docs: Remove STORYBOOK_REACT_CLASSES and global/globals.ts #19300
    • Cleanup premature merge #19332
    • CLI: Update sb add for main.js #19312
    • React: Move argType stories to template/stories folder #19265

    Build

    • Build: Add react17 + webpack5 template #19342
    • Build: Add react18 + webpack5 template #19341
    • Build: Forward parameters in nx command execution #19283
    • Build: cleanup after moving to tsup #19268
    • Build: change the vue e2e test to use webpack5, since we stopped supporting webpack4 in 7.0 #19257
    • Build: Add vue-cli/vue2 repro template #19314
    • Build: Bundle addons-actions with ts-up #18775
    • Build: Bundle lib/addons with ts-up #18805
    • Build: improve the tsconfig #19346
    • Build: Bundle lib/telemetry with ts-up #19317
    • Build: Bundle lib/store with tsup #19308
    • Build: Bundle lib/source-loader with ts-up #19313
    • Build: Bundle lib/csf-tools with ts-up #18914
    • Build: Bundle lib/core-client with ts-up #19276
    • Build: Bundle lib/client-api with ts-up #19271
    • Build: Bundle lib/postinstall with ts-up #19327
    • Build: Add react18 + webpack5 template #19341
    • Build: Remove cypress from monorepo #19303
    • Build: Disable smoke test on cra/default-ts #19352
    • Build: Fix prepare bundle on Windows #19243
    • Build: Bundle addons/essentials with ts-up #19322
    Source code(tar.gz)
    Source code(zip)
  • v6.5.13-alpha.0(Sep 28, 2022)

  • v7.0.0-alpha.34(Sep 27, 2022)

    Features

    • Vite: Export storybook utilities from frameworks for better pnpm support #19216

    Bug Fixes

    • Vite: Do not add Webpack loaders when using Vite builder #19263
    • Source-loader: Fix invalid call to CSF sanitize #18930
    • Svelte: generate preview file with js extension always #19253
    • UI: Fix react runtime for addons in manager #19226
    • Svelte: Fix button component not accepting the onClick handler #19249
    • Vite: Support runStep in Vite builder SSv6 #19235
    • Angular: Alias decorateStory as applyDecorators #19189
    • UI: Recalculate height of ZoomElement when child element updates #15472
    • UI: Fix copy button copying outdated snippet #18888
    • UI: Fix clipboard issue #18999
    • CLI: Do not remove framework dependency in automigration #19129
    • TS: Type storyIdToEntry explicitly #19123

    Maintenance

    • Vue3: Add generic renderer stories & delete vue3 example #19219
    • Build: Remove unused angular_modern_inline_rendering #19254
    • Build: bundle csf-tools with tsup #19141
    • Build: Enforce @ts-expect-error via eslint #19198
    • Vue: Add repro template for vue-cli #19165
    • Build: Link renderer-specific stories inside the sandbox's real stories dir #19185
    • Build: Remove cra-kitchen-sink example #19179
    • Build: Fix the check script #19184
    • Build: Build lib/node-logger with ts-up #19173
    • Build: Fix sandbox running multiple versions of react #19156
    • Build: fix playwright version again #19250
    • Build: upgrade playwright version (and lock it) #19227

    Dependency Upgrades

    • Remove @nicolo-ribaudo/chokidar-2 #19244
    Source code(tar.gz)
    Source code(zip)
  • v6.5.12(Sep 14, 2022)

  • v7.0.0-alpha.33(Sep 13, 2022)

    Features

    • Core: Add a new throwPlayFunctionExceptions parameter #19143

    Bug Fixes

    • Fix issue in instrumenter with waitFor #19145
    • Core: Fix static dirs targeting same destination #19064
    • React: Fix issue with react 18 implementation #19125
    • CLI: Fix spawning child processes on windows #19019
    • Vite: Ensure we set DOCS_OPTIONS in the vite builder #19127

    Maintenance

    • Build: Bundle @storybook/cli with tsup #19138
    • Examples: Remove cra-ts-essentials #19170
    • Added some basic interactions stories #19153
    • Presets: Replace config with previewAnnotations, remove previewEntries #19152
    • Addon-links: Move stories into addon #19124
    • Addon-a11y: Move stories into addon #19114
    • Toolbars: Generic example stories #19166
    • TypeScript: Revert a few @ts-expect-errors #19168
    • Addon-docs: Generic stories for DocsPage #19162
    • Controls: Generic stories for sorting #19161
    • Build: Generic stories for addon-controls #19149
    • remove node12 from the matrix #19147
    • Build libs/router with ts-up #19140
    • Build: Bundle addon-interactions with tsup #19139
    • Generic stories for remaining core features #19118
    • Add parameter, loader and decorator stories to lib/store #19105
    • Convert @ts-ignore to @ts-expect-error #19122

    Dependency Upgrades

    • Upgrade emotion deps again #19054
    Source code(tar.gz)
    Source code(zip)
  • v6.5.11(Sep 13, 2022)

    Bug Fixes

    • CLI: Fix race condition in sb init #19083
    • Core: Fix WebProjectAnnotations export in preview-web for back-compat #19048
    • Addon-interactions: Fix IE support by replacing array includes #18993
    • Vue: Fix enum check in extractArgTypes #18959
    • React: Fix callback behavior in [email protected] #18737
    • Store: always call composeConfigs in setProjectAnnotations #18916
    • Telemetry: improve addon extraction logic #18868
    • Addon-docs: Check for undefined before reading property in extractArgTypes.ts #18710nance
    Source code(tar.gz)
    Source code(zip)
  • v7.0.0-alpha.31(Sep 7, 2022)

  • v6.5.11-alpha.2(Sep 7, 2022)

  • v7.0.0-alpha.30(Sep 5, 2022)

    Bug Fixes

    • CLI: Fix include rendererAssets in npm bundle #19115

    Maintenance

    • CLI: remove outdated comment in Angular starter #19097

    Dependency Upgrades

    • Remove deprecated stable dependency #19103
    • Svelte: Update sveltedoc dependencies #19111
    • Deps: Remove core-js from most packages #19098
    • Deps: Upgrade react-element-to-jsx-string and react-inspector for React 18 #19104
    Source code(tar.gz)
    Source code(zip)
  • v7.0.0-alpha.29(Sep 2, 2022)

    Bug Fixes

    • CLI/Vite: Don't add babel dependencies during init #19088
    • CLI: Fix sb init to use renderer assets instead of frameworks #19091
    • Core: Ensure if a docs render is torndown during preparation, it throws #19071

    Maintenance

    • Addon-viewport: Move stories into addon #19086
    • Addon-backgrounds: Move stories into addon #19085
    • Addon-actions: Move stories into addon #19082
    • Build: Exit yarn bootstrap with nonzero code if failed #19089
    • Vite: cleanup custom plugins #19087
    • Build: Prefix generic addon stories in sandbox storybooks #19092
    Source code(tar.gz)
    Source code(zip)
  • v7.0.0-alpha.28(Sep 1, 2022)

    Features

    • Vite: Automatically use vite.config.js #19026

    Bug Fixes

    • CLI: Fix race condition in sb init #19083
    • Vite: Fix framework option checks, and SSv6 #19062
    • Core: Fix WebProjectAnnotations export in preview-web for back-compat #19048

    Maintenance

    • Update to new TS reference format (?) #19072
    • Build: Conditionally force vite rebuilds in sandbox #19063
    • Build: Fix CRA bench #19066
    Source code(tar.gz)
    Source code(zip)
  • v7.0.0-alpha.27(Aug 31, 2022)

    Features

    • Vite: Set resolve.preserveSymlinks based on env vars #19039

    Bug Fixes

    • Core: Restore /preview etc package exports; return unresolved path from presets. #19045

    Maintenance

    • Core: Add previewHead and previewBody to StorybookConfig interface #19047
    • Build: Fix the sb-bench CI step #19029
    • Remove sandbox from .ignore #19040
    • Build: Use new test runner with builtin junit #19028

    Dependency Upgrades

    • Vite: Clean up framework dependencies / unused files #19035
    Source code(tar.gz)
    Source code(zip)
  • v7.0.0-alpha.26(Aug 26, 2022)

  • v7.0.0-alpha.25(Aug 25, 2022)

  • v7.0.0-alpha.24(Aug 24, 2022)

    Breaking changes

    • Preview: Rename Storybook DOM root IDs #10638

    Features

    • Interactions: Add step function and support multiple levels of nesting #18555

    Bug Fixes

    • Addon-docs: Fix canvas support expand code for non-story #18808
    • Components: Avoid including line numbers when copying the code #18725
    • Vue: Fix enum check in extractArgTypes #18959
    • Core: Fix frameworkOptions preset #18979

    Maintenance

    • Addon-a11y: Remove achromatomaly color filter #18852
    • Build: Use ts-up to build core-webpack #18912
    • Build: Use ts-up to build addon-viewport #18943
    • Build: Improve generate-repros-next #19001
    • Examples: Remove refs in angular example #18986
    • Build: Use ts-up to build client-logger #18893
    • Generate-repros: Run local registry on --local-registry option #18997
    • Build: Remove unused bootstrap --cleanup #18981
    • CLI: Fix local repro publishing #18977
    • Build: Run verdaccio on 6001 to enable web UI #18983
    • CLI: determine whether to add interactive stories from renderer rather than framework #18968
    • CLI: Auto-accept migrations when running generate-repros-next #18969
    Source code(tar.gz)
    Source code(zip)
  • v6.5.11-alpha.1(Aug 22, 2022)

  • v7.0.0-alpha.23(Aug 18, 2022)

  • v7.0.0-alpha.21(Aug 17, 2022)

  • v6.5.11-alpha.0(Aug 17, 2022)

  • v7.0.0-alpha.20(Aug 15, 2022)

    Features

    • CLI: Automigration for new frameworks #18919

    Bug Fixes

    • UI: Fix the order of addons appearing in prebuilt manager #18918

    Maintenance

    • Exit sandbox gracefully on cancel #18936
    • Disable telemetry in monorepo and CI #18935
    • Convert cypress e2e tests to playwright #18932
    • CI: Refactor to use tasks #18922
    • Angular: Add renderer components / stories #18934
    • Examples: Add angular repro template and refactor #18931
    Source code(tar.gz)
    Source code(zip)
  • v7.0.0-alpha.19(Aug 12, 2022)

    Features

    • CLI: add "storybook scripts 7.0" automigrate command #18769
    • Interactions: Run conditionally based on query param #18706

    Bug Fixes

    • API: Return defaultValue in useParameter if story is not prepared #18887
    • Store: always call composeConfigs in setProjectAnnotations #18916
    • CLI: install the same version as the user in sb-scripts automigration #18917
    • Theming: Add create export for lib/theming #18906
    • Telemetry: Improve addon extraction logic #18868
    • UI: Add image support to builder-manager #18857
    • ArgTypes: Fix check for undefined before #18710

    Maintenance

    • Build: use ts-up to build addon-toolbars #18847
    • Build: Use ts-up to build channels #18882
    • Build: Use ts-up to build addon-links #18908
    • CLI: Fix remove dependencies logic #18905
    • CLI: Add uninstall deps to jsPackageManager #18900
    • Examples: Improve sandbox command error handling and debugging #18869
    • Examples: Change to self-hosted placeholder images #18878
    • CLI: add --no-init to repro-next command #18866
    • Build: Got verdaccio working, borrowing heavily from the old repro command #18844
    • Core-server: Move webpack to be a devDependency #18856
    Source code(tar.gz)
    Source code(zip)
  • v6.5.10(Aug 4, 2022)

    Maintenance

    • Interactions: Run conditionally based on query param #18706
    • Components: Re-bundle the syntax highlighter #18425
    • Svelte: Make svelte-loader optional dependency #18645
    • Theming: Replace references to themes.normal with themes.light #17034

    Bug Fixes

    • HTML: Fix missing ability to set docs.extractArgTypes #18831
    • CLI: Throw error on failure in sb init #18816
    • CLI: Hook up the npm7 migration #18522
    • Preview: Ensure docs container re-renders when globals change #18711
    • Toolbars: Fall back to name if both title and icon are not specified #17430
    • CLI: Fix addons register in RN template #18693
    • CLI: Fix detection of type: module when initializing storybook #18714
    • CLI/Svelte: Always create main with cjs extension #18648
    • Fix typo in CSS pseudo selector #17708
    • UI: Fix sidebar a11y by moving aria-expanded attribute to button #18354
    • CLI: Add npm7 migration for legacy peer deps #18510
    • UI: Fix display skip to sidebar button #18479
    • Core: Fix process is not defined when using components #18469

    Dependency Upgrades

    • Core: Fix process is not defined #18367
    • Core: Fix PnP compatibility for @storybook/ui and @storybook/router packages #18412
    Source code(tar.gz)
    Source code(zip)
  • v7.0.0-alpha.18(Aug 2, 2022)

    Features

    • CLI: Add temporary sb repro-next command that only degits repros #18834
    • Interactions: Add step function to play context #18673
    • UI: Add preloading to stories highlighted in the sidebar #17964

    Bug Fixes

    • UI: Fix refs with authentication being broken if the fetch for iframe.html succeeds (but with a request to authenticate) #18160
    • HTML: Fix missing ability to set docs.extractArgTypes #18831
    • React: Fix callback behavior in [email protected] #18737
    • CLI: Throw error on failure in sb init #18816
    • CLI: Fix package.json version detection #18806

    Maintenance

    • Build: Use ts-up to build addon-outline #18842
    • Core: Fix default framework options handling #18676
    • Build: Use tsup to build addon-measure and fix related imports in examples/official-storybook #18837
    • Build: Use tsup to build addon-jest #18836
    • Examples: Use repro-next in the example script! #18839
    • Examples: Rename example => sandbox #18838
    • Examples: Use a set of test components in addon stories #18825
    • Examples: Copy example stories over from renderer + addons #18824
    • Examples: Set resolve.symlinks based on node option #18827
    • Examples: Add command to publish repros + GH action #18800
    • Examples: Create a new yarn example command #18781
    • Build: Fix yarn build command #18817
    • Build: Use tsup to build core-event #18798
    Source code(tar.gz)
    Source code(zip)
  • v6.5.10-alpha.1(Aug 2, 2022)

  • v7.0.0-alpha.17(Jul 27, 2022)

    Features

    • Addon-docs: Support DocsPage in v6 store #18763

    Bug Fixes

    • Preact: Typescript pragma fix #15564
    • Core: Clear addon cache directory before starting the manager #18731
    • UI: Pass full docs options to manager #18762
    • Preview: Fix standalone MDX files not HMR-ing #18747

    Maintenance

    • CLI: Add next-repro command #18787
    • Build: Remove old scripts that are no longer used #18790
    • Build: Addon-backgrounds with ts-up #18784
    • Build: Addon-controls with tsup #18786
    • Build: Use updated circleci node images #18785
    • Build: Move all code into a code directory #18759
    • Build: Lint css, html, json, md, mdx, yml files #18735
    Source code(tar.gz)
    Source code(zip)
  • v6.5.10-alpha.0(Jul 26, 2022)

    Bug Fixes

    • CLI: Hook up the npm7 migration #18522
    • Preview: Ensure docs container re-renders when globals change #18711
    • Toolbars: Fall back to name if both title and icon are not specified #17430
    • CLI: Fix addons register in RN template #18693
    • CLI: Fix detection of type: module when initializing storybook #18714
    • CLI/Svelte: Always create main with cjs extension #18648
    • Fix typo in CSS pseudo selector #17708
    • UI: Fix sidebar a11y by moving aria-expanded attribute to button #18354
    • CLI: Add npm7 migration for legacy peer deps #18510
    • UI: Fix display skip to sidebar button #18479
    • Core: Fix process is not defined when using components #18469

    Maintenance

    • Components: Re-bundle the syntax highlighter #18425
    • Svelte: Make svelte-loader optional dependency #18645
    • Theming: Replace references to themes.normal with themes.light #17034

    Dependency Upgrades

    • Core: Fix process is not defined #18367
    • Core: fix PnP compatibility for @storybook/ui and @storybook/router packages #18412
    Source code(tar.gz)
    Source code(zip)
  • v7.0.0-alpha.16(Jul 25, 2022)

    Bug Fixes

    • Addon docs: Pass remarks plugins to mdx loader #18740
    • Preview: Ensure docs container re-renders when globals change #18711
    • Core: Set other manager-side constants in build #18728
    • CLI: Fix detection of type: module when initializing storybook #18714
    • UI: Include full URL in the "Copy Canvas Link" button #17498
    • Toolbars: Fallback to name if title and icon are unspecified #17430
    • CLI: Fix addons register in RN template #18693
    • Index: Support { csfData as default } CSF exports #18588
    • Svelte: Always create main with cjs extension #18648

    Maintenance

    • Build addons/a11y with ts-up #18772
    • Typescript: Drop Emotion 10 types in lib/theming #18598
    • Tests: Don't run the docs e2e in [email protected] #18736
    • Addon-docs: Localize channel to docs context #18730
    • Addon-docs: Move DocsRenderer back to addon-docs #18708
    • Addon-docs: Remove AddContext from mdx packages #18709
    • Preview: Simplify docsMode #18729
    • Examples: Upgrade @storybook/jest in examples #18582
    • Svelte: Make svelte-loader optional dependency #18645
    • Build: Fix dts-localize script for windows #18664

    Dependency Upgrades

    • Storyshots: Allow react-test-renderer 18 #18296
    • Core: Remove unnecessary webpack dependency #18651
    Source code(tar.gz)
    Source code(zip)
  • v7.0.0-alpha.13(Jul 12, 2022)

  • v7.0.0-alpha.12(Jul 8, 2022)

    Features

    • Addon-docs: Produce docs page entries in the index (#18574)
    • Svelte: Supports action auto configuration (#18174)
    • Addon-docs: Add docs index configuration via main.js (#18573)
    • Preview: Handle new docs-page index entries (#18595)

    Bug Fixes

    • CLI: Remove addon-actions install from sb init (#18255)
    • Angular: Fix compodoc with spaces in workspace root (#18140)
    • Core: Add type guard for globalWindow (#18251)
    • Core: Fix builder stats typings to be optional (#18377)

    Maintenance

    • Core: Async load presets, replace interpret with esbuild-register (#18619)
    • Build: Improve linting a bit (#18642)

    Dependency Upgrades

    • Deps: Use dequal for equality checks (#18608)
    Source code(tar.gz)
    Source code(zip)
  • v7.0.0-alpha.11(Jul 6, 2022)

    Features

    • Interactions: Show exceptions by non-instrumented code in panel (#16592)

    Maintenance

    • Build: Add linter for ejs (#18637)
    • Core: Improve interopRequireDefault (#18638)
    • Core: Pre-built manager using esbuild (#18550)
    • Build: Add check-packages script plus misc improvements (#18633)
    • Core: Typing useArgs (#17735)
    • Build: Add a check script to each package (#18603)
    • Build: Use playwright in benchmark (#18606)
    Source code(tar.gz)
    Source code(zip)
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

Carte Blanche 1.5k Aug 3, 2022
โœ 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

Docz 22.9k Sep 26, 2022
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)

Phil Cockfield 269 Dec 24, 2021
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

Salman Shaikh 76 Oct 4, 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 -

Dmytro Somliev 0 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

Patricio Zavolinsky 194 May 30, 2022
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

Luรญs Freitas 10 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

101Loop 5 Dec 19, 2021
: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

Jamie Kyle 16.4k Sep 27, 2022
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

Kent C. Dodds 461 Jul 30, 2022
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)

ctrlshiftmake design 68 Aug 12, 2022
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

่…พ่ฎฏTNTWebๅ‰็ซฏๅ›ข้˜Ÿ 230 Sep 26, 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.

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

Atyantik 2.5k Oct 2, 2022
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

Universal Data Tool 1.7k Sep 29, 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.

Agora.io Community 23 Sep 9, 2022
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

Harsohail Brar 13 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-

Dan Abramov 12.2k Oct 2, 2022
๐Ÿ“‘ 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

mkosir 45 Jun 28, 2022
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

Product Hunt 793 Jul 31, 2022