kandi background
Explore Kits

storybook | frontend workshop for building UI components | Frontend Framework library

 by   storybookjs TypeScript Version: v6.5.16 License: MIT

 by   storybookjs TypeScript Version: v6.5.16 License: MIT

kandi X-RAY | storybook Summary

storybook is a TypeScript library typically used in User Interface, Frontend Framework, Vue, Angular, React applications. storybook has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. You can download it from GitHub.
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
Support
Support
Quality
Quality
Security
Security
License
License
Reuse
Reuse

kandi-support Support

  • storybook has a medium active ecosystem.
  • It has 76268 star(s) with 8079 fork(s). There are 951 watchers for this library.
  • There were 10 major release(s) in the last 6 months.
  • There are 1899 open issues and 8032 have been closed. On average issues are closed in 146 days. There are 47 open pull requests and 0 closed requests.
  • It has a neutral sentiment in the developer community.
  • The latest version of storybook is v6.5.16
storybook Support
Best in #Frontend Framework
Average in #Frontend Framework
storybook Support
Best in #Frontend Framework
Average in #Frontend Framework

quality kandi Quality

  • storybook has 0 bugs and 0 code smells.
storybook Quality
Best in #Frontend Framework
Average in #Frontend Framework
storybook Quality
Best in #Frontend Framework
Average in #Frontend Framework

securitySecurity

  • storybook has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
  • storybook code analysis shows 0 unresolved vulnerabilities.
  • There are 0 security hotspots that need review.
storybook Security
Best in #Frontend Framework
Average in #Frontend Framework
storybook Security
Best in #Frontend Framework
Average in #Frontend Framework

license License

  • storybook is licensed under the MIT License. This license is Permissive.
  • Permissive licenses have the least restrictions, and you can use them in most projects.
storybook License
Best in #Frontend Framework
Average in #Frontend Framework
storybook License
Best in #Frontend Framework
Average in #Frontend Framework

buildReuse

  • storybook releases are available to install and integrate.
  • Installation instructions, examples and code snippets are available.
  • It has 1621 lines of code, 0 functions and 2022 files.
  • It has low code complexity. Code complexity directly impacts maintainability of the code.
storybook Reuse
Best in #Frontend Framework
Average in #Frontend Framework
storybook Reuse
Best in #Frontend Framework
Average in #Frontend Framework
Top functions reviewed by kandi - BETA

kandi's functional review helps you automatically verify the functionalities of the libraries and avoid rework.
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample Here

Get all kandi verified functions for this library.

Get all kandi verified functions for this library.

storybook Key Features

Storybook is a frontend workshop for building UI components and pages in isolation. Made for UI development, testing, and documentation.

storybook Examples and Code Snippets

See all related Code Snippets

Community Discussions

Trending Discussions on storybook
  • Storybook couldn't resolve fs
  • Styled Components adding component name as class name
  • Storybook override import method
  • Tailwind - Conditional class rendering
  • Vue 2 based , vue-cli, vue-property-decorator, vue-class-component, Vuetify, project migration to Vue 3
  • Type Error: this.getOptions is not a function For style-loader
  • MUI v5 + Storybook: Theme and font family do not work in storybook
  • Global SCSS style is no longer loaded in Storybook with Angular 12
  • Storybook error when using Webpack5 with Next.JS app + Typescript
  • NPM CI error bindings not accessible from watchpack-chokidar2:fsevents
Trending Discussions on storybook

QUESTION

Storybook couldn't resolve fs

Asked 2022-Mar-22 at 08:55

I am setting up a Storybook with RemixJS. I got the following error when trying to import a component

ERROR in ./node_modules/@remix-run/node/errors.js
Module not found: Error: Can't resolve 'fs' in '/Users/ht/Desktop/a/node_modules/@remix-run/node'
ERROR in ./node_modules/@remix-run/node/node_modules/source-map/lib/read-wasm.js
Module not found: Error: Can't resolve 'fs' in '/Users/ht/Desktop/a/node_modules/@remix-run/node/node_modules/source-map/lib'
ERROR in ./node_modules/@remix-run/node/sessions/fileStorage.js
Module not found: Error: Can't resolve 'fs' in '/Users/ht/Desktop/a/node_modules/@remix-run/node/sessions'
ERROR in ./node_modules/busboy/lib/main.js
Module not found: Error: Can't resolve 'fs' in '/Users/ht/Desktop/a/node_modules/busboy/lib'
ERROR in ./node_modules/@remix-run/node/errors.js
Module not found: Error: Can't resolve 'fs/promises' in '/Users/ht/Desktop/a/node_modules/@remix-run/node'
ERROR in ./node_modules/@remix-run/node/upload/fileUploadHandler.js 124:15
Module parse failed: Unexpected token (124:15)
You may need an appropriate loader to handle this file type, currently, no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| }
| class NodeOnDiskFile {
>   lastModified = 0;
|   webkitRelativePath = "";
| 
ERROR in ./node_modules/@remix-run/node/formData.js 53:73
Module parse failed: Unexpected token (53:73)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   get(name) {
|     let arr = this._fields[name];
>     return (arr === null || arr === void 0 ? void 0 : arr.slice(-1)[0]) ?? null;
|   }
|

I got the suggestion that I should add this to the web pack

{
  resolve: {
    fallback: {
      fs: false
    }
  }
}

How could I do it with a storybook? I use storybook version 6.4.19

I added this to .storybook/main.js but without success

 webpackFinal: async (config, { configType }) => {
      config.node = {
        ...config.node,
        fs: 'empty'
      };
      return config;
    },

Thank you

ANSWER

Answered 2022-Mar-11 at 12:09

Depending on the webpack version you are using to build your Storybook you need to add fs, stream and other Node core module used by Remix packages.

As a rule of thumb you can use the list from Webpack documentation on resolve.fallback here.

If you are using Stroybook with Webpack 4 the config should look like :

module.exports = {
// Storybook config
webpackFinal: async (config, { configType }) => {
    config.node = {
      ...config.node,
      fs: "empty",
      assert: "empty",
      buffer: "empty",
      console: "empty",
      constants: "empty",
      crypto: "empty",
      domain: "empty",
      events: "empty",
      http: "empty",
      https: "empty",
      os: "empty",
      path: "empty",
      punycode: "empty",
      process: "empty",
      querystring: "empty",
      stream: "empty",
      string_decoder: "empty",
      sys: "empty",
      timers: "empty",
      tty: "empty",
      url: "empty",
      util: "empty",
      vm: "empty",
      zlib: "empty",
    };
    return config;
  },
};

Or with Webpack 5

module.exports = {
// Storybook config
webpackFinal: async (config, { configType }) => {
    config.resolve.fallback = {
      fs: false,
      assert: false,
      buffer: false,
      console: false,
      constants: false,
      crypto: false,
      domain: false,
      events: false,
      http: false,
      https: false,
      os: false,
      path: false,
      punycode: false,
      process: false,
      querystring: false,
      stream: false,
      string_decoder: false,
      sys: false,
      timers: false,
      tty: false,
      url: false,
      util: false,
      vm: false,
      zlib: false,
    };
    return config;
  },
};

Source https://stackoverflow.com/questions/71158775

Community Discussions, Code Snippets contain sources that include Stack Exchange Network

Vulnerabilities

No vulnerabilities reported

Install storybook

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

Support

Documentation can be found Storybook's docs site.

Find more information at:

Reuse Trending Solutions

Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from
over 650 million Knowledge Items
Find more libraries
Reuse Solution Kits and Libraries Curated by Popular Use Cases
Explore Kits

Save this library and start creating your kit

Clone

  • HTTPS

    https://github.com/storybookjs/storybook.git

  • CLI

    gh repo clone storybookjs/storybook

  • SSH

    git@github.com:storybookjs/storybook.git

Share this Page

share link

See Similar Libraries in

Reuse Pre-built Kits with storybook
Reuse Frontend Framework Kits
Reuse User Interface Kits
Consider Popular Frontend Framework Libraries
Try Top Libraries by storybookjs
Compare Frontend Framework Libraries with Highest Support
Compare Frontend Framework Libraries with Highest Quality
Compare Frontend Framework Libraries with Highest Security
Compare Frontend Framework Libraries with Permissive License
Compare Frontend Framework Libraries with Highest Reuse
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from
over 650 million Knowledge Items
Find more libraries
Reuse Solution Kits and Libraries Curated by Popular Use Cases
Explore Kits

Save this library and start creating your kit

Open Weaver – Develop Applications Faster with Open Source

kandi

Develop Custom Functions

Develop Projects with Kits

Explore Popular Libraries

Product Tour

FAQ

Community and Support

Live Bootcamps

Self Paced Certifications

Hackathons and Events

FutureSkills Prime

kandi Support

Company

About us

Join the Team

Contact Us

Follow

  • © 2023 Open Weaver Inc.