kandi background
Explore Kits

storybook | Develop , document , & test React | Frontend Framework library

 by   storybookjs TypeScript Version: v6.5.0-alpha.64 License: MIT

 by   storybookjs TypeScript Version: v6.5.0-alpha.64 License: MIT

Download this library from

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 https://storybook.js.org.
Support
Support
Quality
Quality
Security
Security
License
License
Reuse
Reuse

kandi-support Support

  • storybook has a medium active ecosystem.
  • It has 70458 star(s) with 7280 fork(s). There are 932 watchers for this library.
  • There were 10 major release(s) in the last 6 months.
  • There are 1679 open issues and 7236 have been closed. On average issues are closed in 177 days. There are 128 open pull requests and 0 closed requests.
  • It has a neutral sentiment in the developer community.
  • The latest version of storybook is v6.5.0-alpha.64
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

Coming Soon for all Libraries!

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

storybook Key Features

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

storybook Examples and Code Snippets

Badges & Presentation materials

copy iconCopydownload iconDownload
[![Storybook](https://cdn.jsdelivr.net/gh/storybookjs/brand@main/badge/badge-storybook.svg)](link to site)

Storybook couldn't resolve fs

copy iconCopydownload iconDownload
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;
  },
};

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;
  },
};
----------------------- 
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;
  },
};

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;
  },
};
----------------------- 
module.exports = {
    stories: ["../.slicemachine/assets/**/*.stories.@(js|jsx|ts|tsx)"],
    addons: [
        "@storybook/addon-links",
        "@storybook/addon-essentials",
        "@storybook/addon-interactions",
    ],
    framework: "@storybook/react",
    core: {
        builder: "webpack5",
    },
    webpackFinal: async (config, { configType }) => {
        config.resolve = {
            ...config.resolve,
            fallback: {
                ...(config.resolve || {}).fallback,
                fs: false,
                stream: false,
                os: false,
            },
        }

        // Return the altered config
        return config
    },
}

Styled Components adding component name as class name

copy iconCopydownload iconDownload
{
  "plugins": [
    [
      "babel-plugin-styled-components",
      {
        "displayName": false, // generate other classname
        "fileName": false, // generate other classname
      }
    ]
  ]
}

Storybook override import method

copy iconCopydownload iconDownload
module.exports = {
  webpackFinal: async (config, { configType }) => {
    config.plugins.push(
      new webpack.NormalModuleReplacementPlugin(
        /some\/path\/to\/dataFetcher\.js/,
        path.join(__dirname, 'mockedDataFetcher.js')
      )
    );
  }
}
----------------------- 
const FirstComponent = ({getReportData}) => {
  const [data,setData]=useState();
  useEffect(()=>{
    const fetchData=async()=>{
      if(getReportData){
        let response = getReportData();
        if(response.status === 200)
          setData(response.data)
      }
    }
    fetchData();
  })
  return (
    <div>
      {data}
    </div>
  );
};



const SecondComponent = () => {
  const axiosTest=async()=> {
    let response = await axios.get("ajax/api/..")
    setData(response.data)
}
  return (
    <FirstComponent getReportData={axiosTest} />
  );
};
----------------------- 
const FirstComponent = ({getReportData}) => {
  const [data,setData]=useState();
  useEffect(()=>{
    const fetchData=async()=>{
      if(getReportData){
        let response = getReportData();
        if(response.status === 200)
          setData(response.data)
      }
    }
    fetchData();
  })
  return (
    <div>
      {data}
    </div>
  );
};



const SecondComponent = () => {
  const axiosTest=async()=> {
    let response = await axios.get("ajax/api/..")
    setData(response.data)
}
  return (
    <FirstComponent getReportData={axiosTest} />
  );
};

Type Error: this.getOptions is not a function For style-loader

copy iconCopydownload iconDownload
yarn add -D @storybook/preset-scss css-loader@5.2.6 sass sass-loader@10.1.1 style-loader@2.0.0
----------------------- 
{
                test: /\.css$/,
                use:
                    [
                        {
                            loader: 'style-loader'
                        },
                        {
                            loader: 'css-loader',
                            options: {
                                importLoaders: 1,
                                modules: true
                            }
                        }
                        // ,
                        // {
                        //     loader: 'sass-loader'
                        // }
                        // ,
                        // {
                        //     loader: 'scss-loader'
                        // }
                    ]
            }

npm start
----------------------- 
{
                test: /\.css$/,
                use:
                    [
                        {
                            loader: 'style-loader'
                        },
                        {
                            loader: 'css-loader',
                            options: {
                                importLoaders: 1,
                                modules: true
                            }
                        }
                        // ,
                        // {
                        //     loader: 'sass-loader'
                        // }
                        // ,
                        // {
                        //     loader: 'scss-loader'
                        // }
                    ]
            }

npm start

MUI v5 + Storybook: Theme and font family do not work in storybook

copy iconCopydownload iconDownload
react-storybook-typescript main % git diff
diff --git a/.storybook/main.js b/.storybook/main.js
index b53b802..bb5fb01 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -1,4 +1,8 @@
 module.exports = {
-    stories: ['../src/**/*.stories.tsx'],
-    addons: ['@storybook/addon-docs']
-};
\ No newline at end of file
+  stories: ["../src/**/*.stories.tsx"],
+  addons: ["@storybook/addon-docs"],
+  features: {
+    emotionAlias: false,
+  },
+};
+
diff --git a/package-lock.json b/package-lock.json
index 456a0ac..c066ac7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,8 @@
       "name": "cra-ts",
       "version": "0.1.0",
       "dependencies": {
+        "@emotion/react": "^11.7.0", // <--- not sure if this is required
+        "@emotion/styled": "^11.6.0", // <--- not sure if this is required
         "@mui/lab": "5.0.0-alpha.59",
         "@mui/material": "5.2.2",
         "@mui/styles": "^5.2.3",
@@ -29,8 +31,8 @@
       },
       "devDependencies": {
         "@babel/core": "^7.10.2",
-        "@storybook/addon-docs": "6.3.12",
-        "@storybook/react": "6.3.12",
+        "@storybook/addon-docs": "^6.4.8",
+        "@storybook/react": "^6.4.8",
         "babel-loader": "^8.1.0"
       }
     },
----------------------- 
features: {
  emotionAlias: false,
},
----------------------- 
import { ThemeProvider as MUIThemeProvider, createTheme } from '@mui/material/styles';
import { ThemeProvider } from 'emotion-theming';

const theme = createTheme({
    palette: {
        primary: {
            main: '#000000'
        },
        secondary: {
            main: '#ff00ff'
        }
    }
});

export const decorators = [
    (Story) => (
        <MUIThemeProvider theme={theme}>
            <ThemeProvider theme={theme}>
                {Story()}
            </ThemeProvider>
        </MUIThemeProvider>
    )
];

Global SCSS style is no longer loaded in Storybook with Angular 12

copy iconCopydownload iconDownload
"your-project": {
  ...
  "storybook": {
      "builder": "@storybook/angular:start-storybook",
      "options": {
          ...
          "projectBuildConfig": "your-lib:build-storybook",
          "styles": [
              "path-to-the-stylesheet/styles.scss",
              "path-to-the-stylesheet/your-theme.scss"
          ],
          ...
      },
      ...
  
    },
    ...
}

Storybook error when using Webpack5 with Next.JS app + Typescript

copy iconCopydownload iconDownload
reactDocgen: false

module.exports = {
   "core": {
      builder: "webpack5"
   },
   "stories": [
      "../stories/**/*.stories.mdx",
      "../stories/**/*.stories.@(js|jsx|ts|tsx)"
   ],
   "addons": [
      "@storybook/addon-links",
      "@storybook/addon-essentials"
   ],
   "framework": "@storybook/react",
   typescript: {
      check: false,
      checkOptions: {},
      reactDocgen: false,
      reactDocgenTypescriptOptions: {
         shouldExtractLiteralValuesFromEnum: true,
         propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
      },
   },
}
----------------------- 
reactDocgen: false

module.exports = {
   "core": {
      builder: "webpack5"
   },
   "stories": [
      "../stories/**/*.stories.mdx",
      "../stories/**/*.stories.@(js|jsx|ts|tsx)"
   ],
   "addons": [
      "@storybook/addon-links",
      "@storybook/addon-essentials"
   ],
   "framework": "@storybook/react",
   typescript: {
      check: false,
      checkOptions: {},
      reactDocgen: false,
      reactDocgenTypescriptOptions: {
         shouldExtractLiteralValuesFromEnum: true,
         propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
      },
   },
}

NPM CI error bindings not accessible from watchpack-chokidar2:fsevents

copy iconCopydownload iconDownload
      - uses: actions/setup-node@v1
        with:
          node-version: "14"

Lit components do not automatically request an update on property change (problem only in my storybook)

copy iconCopydownload iconDownload
config.module.rules.push({
   test: /\.(ts|tsx)$/,
   include: path.resolve(__dirname, '../src'),
   loader: require.resolve('ts-loader')
})
----------------------- 
const path = require('path')

module.exports = {
  //...
  webpackFinal: async (config) => {
    //...
    config.module.rules.push({
      test: /\.(ts|tsx)$/,
      include: path.resolve(__dirname, '../src'),
      loader: require.resolve('ts-loader'),
    })

    return config
  },
}

next-i18next translation not working in storybook, console logs missingKey

copy iconCopydownload iconDownload
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import HttpApi from 'i18next-http-backend';

i18n
  .use(HttpApi)
  .use(initReactI18next).init({
    fallbackLng: 'de',
    debug: true,
});

export default i18n;

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.

DOWNLOAD this Library from

Reuse Trending Solutions

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

Save this library and start creating your kit

Explore Related Topics

Share this Page

share link
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 430 million Knowledge Items
Find more libraries
Reuse Solution Kits and Libraries Curated by Popular Use Cases

Save this library and start creating your kit

  • © 2022 Open Weaver Inc.