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

Projects

Supported Frameworks

Framework Demo
React v6.2.x React
Vue v6.2.x Vue
Angular v6.2.x Angular
Web components v6.2.x Svelte
React Native - React Native
HTML v6.2.x HTML
Ember v6.2.x Ember
Svelte v6.2.x Svelte
Preact v6.2.x Preact
Marionette.js - Marionette.js
Mithril v6.2.x Mithril
Marko v6.2.x Marko
Riot v6.2.x Riot
Rax v6.2.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 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 
    opened by aericson 155
  • Framework support - Stencil.js

    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

    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
  • wait until bundle finished, stopped at 99% [webpack 5]

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

    ┆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

    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

    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 
    opened by gaetanmaisse 81
  • 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
  • vue3: rendering slots if are set and passed from controls

    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 image

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

    • [ ] 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

    [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
    [email protected]://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
    [email protected]://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-U5HOB67C.js?v=10e388c1:2931:19
    [email protected]://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
    [email protected]://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-CJEASUMU.js?v=10e388c1:1475:45
    [email protected]://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-U5HOB67C.js?v=10e388c1:3053:23
    [email protected]://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-U5HOB67C.js?v=10e388c1:3165:21
    [email protected]://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-U5HOB67C.js?v=10e388c1:3314:12
    [email protected]://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

    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

    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

    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)

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

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

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

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

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

  • 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

    Dependency Upgrades

    • Add optional TypeScript peer dependency #20244
    Source code(tar.gz)
    Source code(zip)
  • v7.0.0-beta.6(Dec 13, 2022)

  • 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

    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)

  • v7.0.0-beta.3(Dec 10, 2022)

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

  • 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 [email protected] 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)

  • v7.0.0-alpha.60(Dec 7, 2022)

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

  • 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)
Ember-cli addon for using Bootstrap as native Ember components.

ember-bootstrap An ember-cli addon for using Bootstrap 4 und 5 in Ember applications. The addon includes the Bootstrap CSS (or Sass, Less) in your pro

kaliber5 491 Dec 25, 2022
Ember.js addon allowing you to easily implement non-CRUD actions for your Ember Data models

@mainmatter/ember-api-actions This is an Ember.js addon allowing you to easily implement non-CRUD actions for your Ember Data models. Compatibility Em

Mainmatter 6 Dec 15, 2022
Mobile app development framework and SDK using HTML5 and JavaScript. Create beautiful and performant cross-platform mobile apps. Based on Web Components, and provides bindings for Angular 1, 2, React and Vue.js.

Onsen UI - Cross-Platform Hybrid App and PWA Framework Onsen UI is an open source framework that makes it easy to create native-feeling Progressive We

null 8.7k Jan 8, 2023
we are make our components in story book. So if we add some components you can find document and example of useage in storybook.

we are make our components in story book. So if we add some components you can find document and example of useage in storybook.

고슀락 6 Aug 12, 2022
Document Typescript React components with TSDoc and export Storybook-friendly JSON πŸ€–

✨ Document React components with @prop ✨ react-tsdoc ?? react-tsdoc is an tool to extract information from React Typescript component files with TSDoc

Noah Buscher 13 Oct 15, 2022
Vue-hero-icons - A set of free MIT-licensed high-quality SVG icons, sourced from @tailwindlabs/heroicons, as Vue 2 functional components.

vue-hero-icons For Vue3, install the official package @heroicons/vue A set of free MIT-licensed high-quality SVG icons, sourced from @tailwindlabs/her

Mathieu Schimmerling 97 Dec 16, 2022
An accessible dropdown component for use in Ember apps.

ember-a11y-dropdown This is an accessible dropdown that you can use in your Ember app for a menu dropdown. I'm making it so people can stop using the

Melanie Sumner 2 Feb 10, 2022
An Ember CLI Addon that provides a variety of UI components.

We use https://waffle.io/softlayer/sl-ember-components to work our issues. What sl-ember-components is An Ember CLI Addon that provides UI components

SoftLayer 115 May 7, 2022
Rich components for Ember.js framework.

Ember Components Ember Components is a comprehensive set of rich web components written purely in Ember.js that let you create an astonishing UI for a

Indexia Technologies, ltd. 185 Dec 18, 2020
JSON Hero is an open-source, beautiful JSON explorer for the web that lets you browse, search and navigate your JSON files at speed. πŸš€

JSON Hero makes reading and understand JSON files easy by giving you a clean and beautiful UI packed with extra features.

JSON Hero 7.2k Jan 9, 2023
A react component available on npm to easily link to your project on github and is made using React, TypeScript and styled-components.

fork-me-corner fork-me-corner is a react component available on npm to easily link to your project on github and is made using React, TypeScript and s

Victor Dantas 9 Jun 30, 2022
JavaScript data grid with a spreadsheet look & feel. Works for React, Angular, and Vue. Supported by the Handsontable team ⚑

Handsontable is a JavaScript component that combines data grid features with spreadsheet-like UX. It provides data binding, data validation, filtering

Handsontable 17.4k Jan 1, 2023
The best JavaScript Data Table for building Enterprise Applications. Supports React / Angular / Vue / Plain JavaScript.

Module SonarCloud Status ag-grid-community ag-grid-enterprise AG Grid AG Grid is a fully-featured and highly customizable JavaScript data grid. It del

AG Grid 9.5k Dec 30, 2022
Migrating from πŸ…°οΈ to βš›οΈ ? πŸ‘‰ Use React components in Angular, and vice versa

ngx-react allows you to seamlessy use βš›οΈ React and ??️ Angular components together. ?? This package will be the a perfect match to migrate from Angula

Olivier Guimbal 9 Apr 14, 2022
A React utility belt for function components and higher-order components.

A Note from the Author (acdlite, Oct 25 2018): Hi! I created Recompose about three years ago. About a year after that, I joined the React team. Today,

Andrew Clark 14.8k Jan 4, 2023
Nextjs-components: A collection of React components

nextjs-components A collection of React components, transcribed from https://vercel.com/design. 1 Motivation Blog post from 01/09/2022 Todo's Unit tes

null 94 Nov 30, 2022
Material-UI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.

Material-UI Quickly build beautiful React apps. Material-UI is a simple and customizable component library to build faster, beautiful, and more access

Material-UI 83.6k Dec 30, 2022
A document head manager for React

React Helmet This reusable React component will manage all of your changes to the document head. Helmet takes plain HTML tags and outputs plain HTML t

National Football League 16.7k Dec 30, 2022
Demonstration of how to use statecharts as and with actors in Ember.js

statechart-actors This app demonstrate how we can use ember-statecharts and XState's actor feature together. The demo-use case: Show a blog posts over

Michael Klein 3 Jan 9, 2022