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

Last update: Jan 4, 2023

Overview

Build bulletproof UI components faster

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:

🚀 Getting Started
📒 Projects
- 🛠 Supported Frameworks & Examples
- 🚇 Sub Projects
- 🔗 Addons
🏅 Badges & Presentation materials
👥 Community
👏 Contributing
- 👨‍💻 Development scripts
- 💵 Backers
- 💸 Sponsors
📝 License

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 the Storybook Discord.

Projects

Supported Frameworks

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

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](https://cdn.jsdelivr.net/gh/storybookjs/brand@master/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

Tweeting via @storybookjs
Blogging at storybook.js.org and Medium
Chatting on Discord
Streaming saved at Youtube

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

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

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 app: vue3

opened by p3k 157

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:

Start a project with npx create-react-app taskbox
Init storybook npx -p @storybook/cli sb init
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 "webpack@>=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

opened by aericson 155

Framework support - Stencil.js

Describe the solution you'd like I'd like to see Stencil.js support, as I see Storybook to be very component focused, and Stencil being a very component focus framework - these tools would compliment each other very well.

Are you able to assist bring the feature to reality? yes, I can...
feature request todo app: html app: web-components

opened by maraisr 144
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:

dependencies.io/docs

https://app.dependencies.io/

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
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:

Install core-js version 3.0 or higher

Have corejs: { version: 3 }, in @babel/env options

Try running storybook server

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:

OS: MacOS

Framework: react

Addons: [email protected], [email protected], [email protected], [email protected], [email protected], [email protected]

Version: 5.0.3

question / support dependencies babel / webpack has workaround core
opened by ilyaulyanov 100

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 sb@next 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 "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

wait until bundle finished, stopped at 99% [webpack 5]

when I run start, the progress bar is stuck at 99%. and then my local web page opened but just keep loading. I use npm to install packages.

OS: window 10 node: V10.22.0 npm : V6.14.6

storybook config:

const custom = require('../../webpack.config.js');

module.exports = {
  stories: [
    '../../src/components/V2/**/*.stories.js',
    '../../src/services/Templates/**/*.stories.js',
  ],
  addons: [
    '@storybook/addon-actions',
    '@storybook/addon-links',
    '@storybook/addon-notes',
    '@storybook/addon-knobs',
  ],
  core: {
    builder: "webpack5",
  },
  webpackFinal: async (config) => {
    config.plugins.push(new MiniCssExtractPlugin());
    
    return {
      ...config,
      module: {
        ...config.module,
        rules: [
          ...custom.module.rules,
          ...config.module.rules.filter((rule) => rule.test.toString() !== '/\\.css$/'),
        ]
      },
      resolve: {
        ...config.resolve,
        fallback: {
          ...config.resolve.fallback,
          ...custom.resolve.fallback,
        },
        alias: {
          ...config.resolve.alias,
          ...custom.resolve.alias,
        }
      }
    };
  }
}

devDependencies

"devDependencies": {
    "@babel/core": "^7.13.8",
    "@babel/plugin-proposal-class-properties": "^7.13.0",
    "@babel/plugin-transform-runtime": "^7.10.5",
    "@babel/preset-env": "^7.13.8",
    "@babel/preset-react": "^7.12.13",
    "@kooneko/livereload-webpack-plugin": "^1.2.1",
    "@storybook/addon-actions": "^6.2.0-rc.4",
    "@storybook/addon-info": "^5.3.21",
    "@storybook/addon-knobs": "^6.2.0-rc.4",
    "@storybook/addon-links": "^6.2.0-rc.4",
    "@storybook/addon-notes": "^5.3.21",
    "@storybook/addons": "^6.2.0-rc.4",
    "@storybook/builder-webpack5": "^6.2.0-rc.4",
    "@storybook/channels": "^6.2.0-rc.4",
    "@storybook/react": "^6.2.0-rc.4",
    "@testing-library/dom": "^7.21.7",
    "@testing-library/jest-dom": "^5.11.2",
    "@testing-library/react": "^10.4.7",
    "@testing-library/user-event": "^12.1.0",
    "@types/sortablejs": "^1.10.6",
    "@webpack-cli/serve": "^1.3.0",
    "autoprefixer": "^9.8.6",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.0.2",
    "enzyme": "3.11.0",
    "enzyme-adapter-react-16": "1.15.2",
    "eslint": "^7.3.1",
    "eslint-config-airbnb": "^18.2.0",
    "eslint-import-resolver-alias": "^1.1.2",
    "eslint-plugin-babel": "^5.3.1",
    "eslint-plugin-import": "^2.22.0",
    "eslint-plugin-jsx-a11y": "^6.3.1",
    "eslint-plugin-prefer-object-spread": "^1.2.1",
    "eslint-plugin-react": "^7.20.3",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^6.2.0",
    "html-loader": "^2.0.0",
    "html-webpack-plugin": "^5.3.1",
    "husky": "^4.2.5",
    "jest": "^25.5.4",
    "jest-canvas-mock": "^2.2.0",
    "jest-cli": "^25.5.4",
    "lint-staged": "^10.2.11",
    "node-sass": "^4.14.1",
    "postcss-loader": "^5.0.0",
    "react-markdown": "^4.3.1",
    "resolve-url-loader": "^3.1.2",
    "sass-loader": "^11.0.1",
    "sass-resources-loader": "^2.1.1",
    "sortablejs": "^1.13.0",
    "style-loader": "^1.3.0",
    "url-loader": "^3.0.0",
    "webpack": "^5.22.0",
    "webpack-cli": "^4.5.0",
    "webpack-dev-middleware": "^4.1.0",
    "webpack-dev-server": "^3.11.2",
    "webpack-virtual-modules": "^0.4.2"
  }

Screenshots

┆Issue is synchronized with this Asana task by Unito

question / support needs reproduction has workaround webpack5

opened by leslie555 91

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 82

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 sb@next 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

opened by gaetanmaisse 81

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
vue3: rendering slots if are set and passed from controls
Issue:

What I did

currently, the slots are not rendered even though they are detected in the controls and set which is unexpected behaviour So I added code to be rendered if the component has slots and the user passe slot value via the controls

How to test

using the vue3-vite/default-ts. add slots to the Button.vue

the slots will be detected on the control so you can set these values to see them rendered on the component

[ ] 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.
opened by chakAs3 0

[Bug]: The `IconGallery` doesn't work with SvelteKit

Describe the bug

At https://storybook.js.org/docs/svelte/writing-docs/doc-block-icongallery, there's an example that shows how to use an IconGallery. However, when I try to use it with SvelteKit, it just crashes.

Example:

import { Meta, Title, IconGallery, IconItem } from '@storybook/addon-docs'
import AcademicCap from '../lib/heroicons/20/solid/academic-cap.svelte'

<Meta title="Heroicons/Mini" />

# Mini

<IconGallery>
	<IconItem name="academic-cap">
		<AcademicCap />
	</IconItem>
</IconGallery>

Log:

Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot [react-dom.development.js:86:29](http://localhost:6006/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js)
Uncaught TypeError: class constructors must be invoked with 'new'
    React 16
    render chunk-MA2MUXQN.mjs:1
    promise callback*DocsRenderer/this.render chunk-MA2MUXQN.mjs:1
    renderDocs runtime.mjs:75
    renderDocs runtime.mjs:75
    renderToElement runtime.mjs:75
    renderSelection runtime.mjs:84
    onSetCurrentStory runtime.mjs:84
    handleEvent runtime.mjs:5
    handleEvent runtime.mjs:5
    Channel runtime.mjs:5
    handler runtime.mjs:10
    handleEvent runtime.mjs:10
    PostmsgTransport runtime.mjs:10
    createChannel runtime.mjs:10
    <anonymous> null:5
[react-dom.development.js:16305:27](http://localhost:6006/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js)
The above error occurred in the <Proxy<Academic-cap>> component:

Proxy<Academic-cap>
div
withEmotionCache/<@http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-CJEASUMU.js?v=10e388c1:1449:46
div
withEmotionCache/<@http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-CJEASUMU.js?v=10e388c1:1449:46
IconItem@http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-U5HOB67C.js?v=10e388c1:2930:16
div
withEmotionCache/<@http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-CJEASUMU.js?v=10e388c1:1449:46
div
withEmotionCache/<@http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-CJEASUMU.js?v=10e388c1:1449:46
IconGallery@http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-U5HOB67C.js?v=10e388c1:2931:19
MDXContent@http://localhost:6006/src/stories/Mini.mdx?t=1673172255195&import:7:50
div
withEmotionCache/<@http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-CJEASUMU.js?v=10e388c1:1449:46
div
withEmotionCache/<@http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-CJEASUMU.js?v=10e388c1:1449:46
ThemeProvider@http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-CJEASUMU.js?v=10e388c1:1475:45
SourceContainer@http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-U5HOB67C.js?v=10e388c1:3053:23
DocsContainer@http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-U5HOB67C.js?v=10e388c1:3165:21
Docs@http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-U5HOB67C.js?v=10e388c1:3314:12
MDXProvider@http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-WNDIUHYG.js?v=10e388c1:28:21

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries. [react-dom.development.js:18687:14](http://localhost:6006/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js)
Uncaught (in promise) TypeError: class constructors must be invoked with 'new'
    React 13
    render chunk-MA2MUXQN.mjs:1
    promise callback*DocsRenderer/this.render chunk-MA2MUXQN.mjs:1
    renderDocs runtime.mjs:75
    renderDocs runtime.mjs:75
    renderToElement runtime.mjs:75
    renderSelection runtime.mjs:84
    onSetCurrentStory runtime.mjs:84
    handleEvent runtime.mjs:5
    handleEvent runtime.mjs:5
    Channel runtime.mjs:5
    handler runtime.mjs:10
    handleEvent runtime.mjs:10
    PostmsgTransport runtime.mjs:10
    createChannel runtime.mjs:10
    <anonymous> null:5
[react-dom.development.js:16305:27](http://localhost:6006/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js)

To Reproduce

git clone [email protected]:NatoBoram/heroicons.svelte.git
cd heroicons.svelte
pnpm i
pnpm storybook

System

Environment Info:

  System:
    OS: Linux 6.0 Pop!_OS 22.04 LTS
    CPU: (12) x64 AMD Ryzen 5 5600X 6-Core Processor
  Binaries:
    Node: 19.3.0 - /usr/bin/node
    npm: 9.2.0 - ~/.local/share/pnpm/npm
  Browsers:
    Chrome: 108.0.5359.124
    Firefox: 108.0
  npmPackages:
    @storybook/addon-docs: 7.0.0-beta.20 => 7.0.0-beta.20 
    @storybook/addon-essentials: 7.0.0-beta.20 => 7.0.0-beta.20 
    @storybook/addon-interactions: 7.0.0-beta.20 => 7.0.0-beta.20 
    @storybook/addon-links: 7.0.0-beta.20 => 7.0.0-beta.20 
    @storybook/blocks: 7.0.0-beta.20 => 7.0.0-beta.20 
    @storybook/svelte: 7.0.0-beta.20 => 7.0.0-beta.20 
    @storybook/sveltekit: 7.0.0-beta.20 => 7.0.0-beta.20 
    @storybook/testing-library: ^0.0.13 => 0.0.13 
    @storybook/types: 7.0.0-alpha.44 => 7.0.0-alpha.44

Additional context

No response

bug needs triage

opened by NatoBoram 0

Docs: Fix attachment logic
Telescoping on https://github.com/storybookjs/storybook/pull/20517

What I did

Rationalized how attachment works:

For CSF (template) files, we attach to the (one or more) CSF files we are templating, immediately. (You can have more than one with autodocs and stories spread over > 1 CSF file.

For MDX files, we attach when you call <Meta of={} />.

How to test

See unit tests

Check doc blocks stories

Check docs pages

bug addon: docs
opened by tmeasday 0
Docs: Refactor props of Story block
Issue: N/A

What I did

Big refactor of the Story block/component that was long overdue.

Rename docs.inlineStories parameter to docs.story.inline.

Rename iframeHeight to story.height.

Rename autoplay to story.autoplay.

Add autoplay prop to

How to test

E2E tests + blocks stories.

We need to check external docs manually.

maintenance addon: docs
opened by tmeasday 0
Community outreach to upgrade addons to 7.0
Top non-monorepo addons by npm downloads:

[ ] @storybook/addon-knobs

[ ] chromatic

[ ] storybook-addon-designs

[ ] @storybook/addon-postcss

[ ] msw-storybook-addon

[ ] @storybook/testing-react

[ ] storybook-addon-next-router

[ ] storybook-addon-outline

[ ] @storybook/addon-info

[ ] @storybook/test-runner

[ ] storybook-addon-next

[ ] storybook-docs-toc

[ ] @storybook/addon-google-analytics

[ ] storybook-addon-gatsby

[ ] @etchteam/storybook-addon-css-variables-theme

[ ] storybook-addon-angular-router

[ ] @storybook/addon-cssresources

[ ] @storybook/addon-ie11

[ ] storybook-addon-grid

[ ] storybook-multilevel-sort

[ ] storybook-addon-i18next

[ ] storybook-source-link

[ ] babel-plugin-storybook-csf-title

[ ] @urql/storybook-addon

api: addons maintenance
opened by shilman 0

Releases(v7.0.0-beta.20)

v7.0.0-beta.20(Jan 6, 2023)
Bug Fixes

Telemetry: Move 'dev'/'build' events to the end of the process #20380

Blocks: Export Unstyled block in index.ts #20489

Vite: Fix missing await in builder #20409

Maintenance

Build: use tsup for csf-plugin #20150

Migration: Update autodocs migration to deal with docs.docsPage #20379

Build

Blocks: Use example Button for stories #20483

Build: cleanup prep script where possible #20151

cleanup CI config #20510

Build: Fix CI parallelism #20476

Web-components: Restore missing script stories #20477

Source code(tar.gz)
Source code(zip)
v7.0.0-beta.19(Jan 1, 2023)
Features

NextJS: Add next/head support #20436

Bug Fixes

CLI: Do not use legacy-peer-deps for npm #20456

CLI: Use closest lockfile to determine package manager #20464

CLI: Use correct package manager for automigrate #20428

CLI: Add prop-types dependency if not using TypeScript #20449

CLI: Add peer dependency on react #20459

Maintenance

Vue3: Add TS / legacy TS CLI templates #20434

Core: Delete outdated onerror handler #20462

Build

Build: Add extensions to lodash imports #20443

Source code(tar.gz)
Source code(zip)
v7.0.0-beta.17(Dec 30, 2022)
Bug Fixes

Svelte: Do not warn about .svelte files in storyStoreV7 #20442

Core: Fix import paths on Windows #20430

UI: Set min-height relative to the viewport and the zoom level. #20352

Maintenance

Docs: Use stories-mdx and autodocs tags instead of standalone: false in index #20424

Docs: Use 'stories-mdx' tag to indicate story defined in MDX file #20417

Preact-Vite: Minor readme and dependency cleanups #20432

Build

Tech: ESLint allow devDependencies imports in prebundled packages #20440

Fix yarn task command on Windows machines #20431

Source code(tar.gz)
Source code(zip)
v7.0.0-beta.16(Dec 28, 2022)
Features

Preact-Vite: Add framework #20390

Maintenance

NextJS: Fix unnecessary addon-actions dev dep #20426

Source code(tar.gz)
Source code(zip)
v7.0.0-beta.15(Dec 24, 2022)
Bug Fixes

Codemods: Fix peer dependency issue #20399

Core: Wrap manager entries to handle exports using a cache directory #20331

UI: fix deprecated ReactDOM.findDOMNode calls #20368

Maintenance

Build: Use tsup for core-server #20134

Build

Build: Make tests use SWC, not babel #20397

Build: Fix trim vulnerability #20371

Source code(tar.gz)
Source code(zip)
v7.0.0-beta.14(Dec 23, 2022)
Features

CLI: Write into a log file if automigrations fail #20310

CLI: Add nodejs check in automigrations #20342

Bug Fixes

UI: Disable React.strictmode to avoid findNode deprecation warnings #20345

Vite: Fix peerDep warning by updating @joshwooding/vite-plugin-react-docgen-typescript #20359

Maintenance

Don't allow setting Meta of={X} if X is tagged with 'autodocs' #20373

Rename docsPage => autodocs #20364

Rename docsOptions.enabled to docsOptions.disable #20363

Angular: Switch to default to inlineStories=true #20118

Types: Add Addon_OptionsParameterV7 type #20384

Build

Build: regen lockfiles #20386

Build: fix prettydocs CI flakyness #20385

Build: Update Playwright to 1.29.1 #20372

Build: store extra metadata for each sandbox test #20365

Build: Remove the non-cross-platform dash-S option #20360

Build: sync issues of next packages #20354

Source code(tar.gz)
Source code(zip)
v7.0.0-beta.13(Dec 20, 2022)
Features

Angular: Support compodoc output arg #20338

NextJS: Support @next/font #20291

NextJS: Support useSelectedLayoutSegment and useSelectedLayoutSegments #20330

Preview Api: export userOrAutoTitle function #20325

Bug Fixes

Fix: peer dependency warning for vite-react #20328

UI: swap react-sizeme for react-resize-detector #20333

Vite: Detect React SWC plugin #20335

CLI: Fix automigrate filtering #20329

Vite: Include user config optimizeDeps in final optimizeDeps #20313

Maintenance

Tech: improve global types #20184

CLI: Fix sb migrate csf-2-to-3 for multiple file extensions #20290

CLI: Replace update-notifier with simple-update-notifier #20266

Build

Build: remove borders in task error message #20305

Build: Fix pretty-docs CI job #20319

Build: Update Playwright to 1.29 #20318

Dependencies

NextJS: Make addon-actions a regular dependency #20324

NextJS: Fix addon-actions peerdependency #20324

Vite-react: Fix peer dependency warning #20328

Source code(tar.gz)
Source code(zip)
v6.5.15(Dec 20, 2022)
Bug Fixes

Support Angular 15.0.4 #20287

CLI: execute automigrations when pressing enter in the prompts #20208

Maintenance

Ember: Remove global Ember usage #17843

Source code(tar.gz)
Source code(zip)
v6.5.15-alpha.1(Dec 20, 2022)
Bug Fixes

Support Angular 15.0.4 #20287

CLI: execute automigrations when pressing enter in the prompts #20208

Source code(tar.gz)
Source code(zip)
v7.0.0-beta.12(Dec 16, 2022)
Other

Revert "Core: Wrap manager entries to handle exports" #20311

Source code(tar.gz)
Source code(zip)
v7.0.0-beta.11(Dec 16, 2022)
Features

CLI: Improve automigration to show prompt-only migrations #20292

Bug Fixes

Angular: Fix webpackStatsJson types in angular-builder #20296

Fix: addon-storysource has no managerEntry, but defines a register and preset #20304

Maintenance

Core: Wrap manager entries to handle exports #20308

Core: improve manager-entries failure message #20306

Telemetry: Fix flakey test #20282

Dependency Upgrades

Vite: Make vite a peer dependency, update plugins #20281

Vite/Svelte: Remove addon-svelte-csf dep #20280

Source code(tar.gz)
Source code(zip)
v7.0.0-beta.10(Dec 16, 2022)
Build

Build: compile detection was using a non-conforming package, causing cache to miss always. #20297

Dependency Upgrades

React-vite: Pin react-docgen version #20300

Source code(tar.gz)
Source code(zip)
v7.0.0-beta.9(Dec 15, 2022)
Features

CLI: Add interactive babel config file generation #20234

CLI: Add automigration summary #20276

Bug Fixes

UI: Fix enableShortcuts support in manager.ts #20264

UI: Ensure manager entries load even if preceding ones failed #20286

Addon-viewport: Fix composition support #20289

Support Angular 15.0.4 #20287

Fix: peerDependencies issues reported #20279

Build

Build: ui/.storybook should not import from dist #20284

Build: bundle script a bit less repetitive, add a completion indicator #20277

Build: regen lockfiles #20278

Source code(tar.gz)
Source code(zip)
v7.0.0-beta.8(Dec 14, 2022)
Features

Addon-docs: Use jsxOptions instead of mdxBabelOptions #20271

Maintenance

Svelte-vite: remove svelteOptions in automigration #20270

Build

Fix handling of inverted yes flag in task steps #20268

Source code(tar.gz)
Source code(zip)
v7.0.0-beta.7(Dec 14, 2022)
Features

CLI: Add Next.js framework automigration #19574

Bug Fixes

Don't export renderer from framework #20259

Upgrade sb dep as well in sb upgrade #20258

Vite: Make the bail function work if the server fails to start #20243

Csf-tools: Fix local vars handling in MDX-generated CSF #20255

Csf-plugin: Fix spurious storiesOf warnings #20256

Core: Remove unnecessary peer deps #20231

Fix issues with running SSv6 #20253

Core: Fix config.base relative paths #20232

Fix: vite devmode with storyStoreV6 by ensuring singleton via global #20207

Maintenance

Addon-docs: Upgrade mdx2-csf and use its JSX handling #20261

Vite: Use mdx2 babel pre-processing #20241

Addon-docs: Restore deprecated blocks entry point #20246

Build

Add Next 12 sandbox #20092

Dependency Upgrades

Add optional TypeScript peer dependency #20244

Source code(tar.gz)
Source code(zip)
v7.0.0-beta.6(Dec 13, 2022)
Dependency Upgrades

Vite: Use Vite 3 (temporarily) #20216

Source code(tar.gz)
Source code(zip)
v7.0.0-beta.5(Dec 13, 2022)
Features

CLI: Split sb-scripts into two different migrations #20223

Bug Fixes

Vite: Support async Vite plugins #20194

Telemetry: Don't send boot event when cliOptions.disableTelemetry is passed #20144

Maintenance

CLI: Add React peer dep runtime check #20206

Dependency Upgrades

Upgrade esbuild #20199

Source code(tar.gz)
Source code(zip)
v7.0.0-beta.4(Dec 13, 2022)
Features

Re-enable TS 4.9 CLI templates #20159

Bug Fixes

CLI: execute automigrations when pressing enter in the prompts #20208

Interactions: Fix storyId access in instrumenter #20201

Typescript: Fix bug with meta not working well as generic parameter for StoryObj #20165

SvelteKit: Support v1.0.0-next.574 and above #20181

Build

Svelte: Fix argTypes inference in Button component #20212

React-Vite: Ignore React MDX stories in sandbox #20210

Source code(tar.gz)
Source code(zip)
v6.5.15-alpha.0(Dec 12, 2022)
Maintenance

Ember: Remove global Ember usage #17843

Source code(tar.gz)
Source code(zip)
v7.0.0-beta.3(Dec 10, 2022)
Bug Fixes

CLI: Fix sb migrate codemods #20191

Measure: Fix measure not working on disabled elements #19985

Maintenance

SvelteKit: Automigration #20094

Tech: change package.json engines fields, set to minimal node16 and up #20170

Source code(tar.gz)
Source code(zip)
v7.0.0-beta.2(Dec 9, 2022)
Bug Fixes

Core: Catch and do nothing to avoid triggering unhandled exception problems #20177

Controls: Fix color control not resetting when initial value is defined #20049

Core: Fix typescript.checkOptions not a valid interface #20166

NextJS: Fixlogic around next/future/image #20173

Maintenance

Revert "Revert "Telemetry: Add precedingUpgrade data to dev/build/error events"" #20176

Telemetry: Add chromatic to addons list #20143

Vite: Support vite 4 #20139

Source code(tar.gz)
Source code(zip)
v7.0.0-beta.1(Dec 8, 2022)
Bug Fixes

Revert "Telemetry: Add precedingUpgrade data to dev/build/error events" #20168

Controls: Fix file controls not resetting #19998

Dependency Upgrades

Upgrade express to fix security warning #20152

Source code(tar.gz)
Source code(zip)
v7.0.0-beta.0(Dec 8, 2022)
We made it to beta, folks! 🎉

SB7 overhauls our build architecture, modernizes ESM output, promotes Vite to a first-class peer to Webpack, rethinks our Docs addon, cleans up the UI, and contains hundreds of improvements at every level of the stack. We've been sharing some of these changes on the Storybook blog and will share more over the coming weeks.

Beta means that we don't have any more major changes on the radar for 7.0 and it's mostly stabilization from here on out. The core team is doing some basic testing now, and once we have a good QA plan, we'd love your help to make that happen. Please keep an eye out on the blog and on our Twitter or Mastodon (coming soon!) or Discord if you're interested in helping.

In the meantime, to upgrade to the beta:

npx sb@next upgrade --prerelease

Bug Fixes since 7.0.0-alpha.62

Extend Angular Zone.js peer dependency range #20107

Vite: Fix static source handling for addon-docs #20147

Controls: Arrow keys don't work on number controls #19954

Source code(tar.gz)
Source code(zip)
v7.0.0-alpha.62(Dec 7, 2022)
Bug Fixes

Fix new-frameworks automigration failing to read frameworkOptions field #20128

Fix Next.js lower than 12.2.0 #20129

Fix iframe.html not available upon early browser opening #20123

Maintenance

Add args generic to CSFExports #20135

Modernize favicon #20130

Telemetry: Add precedingUpgrade data to dev/build/error events #20136

CLI: Replace addon-docs Meta with blocks and add blocks dep #20133

CLI: Fix upgrade --prerelease to upgrade to the next tag #20126

Source code(tar.gz)
Source code(zip)
v7.0.0-alpha.61(Dec 7, 2022)
Features

NextJS: Support next/navigation in Next.js v13 #20065

Maintenance

Vite/MDX: Fix mdx compiler for vite #20121

Fix more peerDependencies issues #20120

Source code(tar.gz)
Source code(zip)
v7.0.0-alpha.60(Dec 7, 2022)
Bug Fixes

Deal with a lot of different edge cases for git URLs #20115

Maintenance

Clean up babelModeV7 migration and code #20117

Fix peer dependencies for npm8/pnpm/yarn pnp #20110

Remove peer deps from core-common #20109

Build

Add more linting config to vs-code settings.json #20101

Source code(tar.gz)
Source code(zip)
v7.0.0-alpha.59(Dec 6, 2022)
Features

CSF: Add satisfies support to csf-tools #20088

Bug Fixes

Next.js: only set next/future/image mocks from version 12.2 #20098

Core: Batch the loading of CSF files for extract() etc #20055

Fix SSR in external docs via node exports #20083

CLI: Improve sb-scripts automigration logic #20035

Maintenance

Revert "Telemetry: Add precedingUpgrade data to dev/build events" #20105

Telemetry: Instrument init event #20097

Build

Fix next #20106

Build: Run sb init locally in sandbox creation #20100

Build: Add missing dependencies to manager, unify TS to ~4.9.3 #20021

Dependency Upgrades

Bump store2 to 2.14.2 license clarification #19899

Source code(tar.gz)
Source code(zip)
v7.0.0-alpha.58(Dec 5, 2022)
Features

Add --tag option to upgrade script #20075

HTML: Add html-vite framework #19698

SvelteKit: Create framework #20039

Maintenance

Core: Remove postcss feature flag #20003

Telemetry: Add precedingUpgrade data to dev/build events #20084

Core: make managerEntries load as ESM, for improved tree-shaking #20070

Source code(tar.gz)
Source code(zip)
v7.0.0-alpha.57(Dec 3, 2022)
Bug Fixes

Vite: Reinstate (deprecated) StorybookViteConfig #20057

Docs: using targeted styles, not components to style MDX #19958

Docs: Return to filtering toolbars in docs mode, but don't filter menu #19959

Angular: Don't set argType.defaultValue in angular/compodoc #19935

NextJS: Support next/image component in v12/13 properly #20028

Svelte: Use JSDocs in JS CLI templates and put manual enum arg type back as it is not inferred #20042

Maintenance

CLI: Add a new version-update check telemetry event #20074

CLI: Add upgrade telemetry details #20064

Core: added .entries property to error thrown when duplicate stories are present #20038

Build

Improve framework version specific story handling #20027

Fix repro templates script #20063

Build: replace image placeholder url in example stories for nextjs #20069

Build: improve inDevelopment mode for yarn task #20067

Build: revamp interactions e2e test #20060

Dependency Upgrades

Build: Update jest pretty-format to 29 #20047

Source code(tar.gz)
Source code(zip)
v6.5.14(Dec 2, 2022)
Bug Fixes

Angular: Fix "webpack_require.nmd is not a function issue" in Angular 15 #20043

CLI/React native: Fix addons template to import register instead of manager #19620

Maintenance

Core: Patch preview-web and refs to support React Native #19975

Dependency Upgrades

Upgrade loader-utils to 2.0.4 in storysource and source-loader #19891

Source code(tar.gz)
Source code(zip)

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

Related tags

Overview

Table of contents

Getting Started

Documentation

Examples

Community

Projects

Supported Frameworks

Sub Projects

Addons

Deprecated Addons

Badges & Presentation materials

Community

Contributing

Development scripts

yarn bootstrap

yarn lint

yarn test

Sponsors

Backers

License

Comments

Version

What I did

How to test

Describe the bug

To Reproduce

System

Additional context

What I did

How to test

What I did

How to test

Releases(v7.0.0-beta.20)

v7.0.0-beta.20(Jan 6, 2023)

Bug Fixes

Maintenance

Build

v7.0.0-beta.19(Jan 1, 2023)

Features

Bug Fixes

Maintenance

Build

v7.0.0-beta.17(Dec 30, 2022)

Bug Fixes

Maintenance

Build

v7.0.0-beta.16(Dec 28, 2022)

Features

Maintenance

v7.0.0-beta.15(Dec 24, 2022)

Bug Fixes

Maintenance

Build

v7.0.0-beta.14(Dec 23, 2022)

Features

Bug Fixes

Maintenance

Build

v7.0.0-beta.13(Dec 20, 2022)

Features

Bug Fixes

Maintenance

Build

Dependencies

v6.5.15(Dec 20, 2022)

Bug Fixes

Maintenance

v6.5.15-alpha.1(Dec 20, 2022)

Bug Fixes

v7.0.0-beta.12(Dec 16, 2022)

Other

v7.0.0-beta.11(Dec 16, 2022)

Features

Bug Fixes

Maintenance

Dependency Upgrades

v7.0.0-beta.10(Dec 16, 2022)

`yarn bootstrap`

`yarn lint`

`yarn test`