nx-storybook-plugin.md

⬅️  README

Nx Storybook Plugin

• Storybook | Nx Docs

  • Upgrading to Storybook 6 (and Nx versions >10.1.x)

Commands

• run: nx run {project name}:storybook

• build: nx run {project name}:build-storybook

• print affected: nx print-affected --target=build-storybook

Useful references

• Storybook

  • Storybook for React - remember that the global styles them must be imported on .storybook/preview.js

    • Essential addons

    • Storybook Controls Addon

  • Storybook 6 Migration Guide

  • Storybook 6.0

• [YouTube] Nx Tutorial: Nx Storybook Integration

• [YouTube] Nx Tutorial: Group all your stories into a single viewable Storybook with Nx

• Creating a Storybook instance including stories from multiple libraries in a Nrwl Nx workspace

• VS Code Jest, Improved ESLint Support, Typescript 4, Storybook 6, and more with Nx 10.3 | Nx Blog

• Storybook for React tutorial | Storybook Tutorials

• What is Storybook and How Can I Use It to Create a Component Library in React? | freeCodeCamp

• Guest Post: High Quality React apps with Nx & Cypress | Cypress

  • [GitHub] juristr/nx-react-cypress-blogpost

• Use Cypress and Storybook to test your React Components in Isolation

• Add Custom fonts to react-storybook | DEV - github code | youtube

Known issues

Import path from other libraries

reported: [GitHub] nrwl/nx - React storybook: issue importing from other libraries #2320

fixed: [GitHub] nrwl/nx - fix(storybook): properly resolve TS paths in storybook webpack config #3032

requires: [npm] tsconfig-paths-webpack-plugin

changes needed based on the @nrwl/storybook plugin - library schematic configuration:

• tsconfig.json__tmpl__

• webpack.config.js__tmpl__

Note: it's possible to define it on the <root>/.storybook/webpack.config.js