Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Storybook Integration still not supports @storybook/web-components as uiFramework option in config generator

See original GitHub issue

Current Behavior

currently storybook config generator only supports two values only @storybook/angular , @storybook/react

Expected Behavior

it should support more options (ex. @storybook/web-components). And also update relevant docs and add examples.

Environment

Nx 13.4.4

Issue Analytics

State:
Created 2 years ago
Comments:23 (10 by maintainers)

Top GitHub Comments

5reactions

DzmVasileuskycommented, May 30, 2022

I had to switch to the branch without storybook and init it again with nx then copy the initial config. May be helpful to someone

Old

        "storybook": {
            "executor": "@nrwl/storybook:storybook",
            "options": {
                "uiFramework": "@storybook/angular",
                "port": 4400,
                "config": {
                    "configFolder": "libs/ui-kit/.storybook"
                },
                "projectBuildConfig": "ui-kit:build-storybook"
            },
            "configurations": {
                "ci": {
                    "quiet": true
                }
            }
        },
        "build-storybook": {
            "executor": "@nrwl/storybook:build",
            "outputs": ["{options.outputPath}"],
            "options": {
                "uiFramework": "@storybook/angular",
                "outputPath": "dist/storybook/ui-kit",
                "config": {
                    "configFolder": "libs/ui-kit/.storybook"
                },
                "projectBuildConfig": "ui-kit:build-storybook",
                "stylePreprocessorOptions": {
                    "includePaths": ["libs/ui-kit/src/styles"]
                },
                "styles": [
                    "libs/shared/content/fonts/proxima-nova.css",
                    "libs/ui-kit/src/styles/global.scss",
                    "libs/ui-kit/.storybook/docs-typography.scss"
                ]
            },
            "configurations": {
                "ci": {
                    "quiet": true
                }
            }
        }

New

        "storybook": {
            "executor": "@storybook/angular:start-storybook",
            "options": {
                "port": 4400,
                "configDir": "libs/ui-kit/.storybook",
                "browserTarget": "ui-kit:build-storybook",
                "compodoc": false
            },
            "configurations": {
                "ci": {
                    "quiet": true
                }
            }
        },
        "build-storybook": {
            "executor": "@storybook/angular:build-storybook",
            "outputs": ["{options.outputPath}"],
            "options": {
                "outputDir": "dist/storybook/ui-kit",
                "configDir": "libs/ui-kit/.storybook",
                "browserTarget": "ui-kit:build-storybook",
                "compodoc": false,
                "stylePreprocessorOptions": {
                    "includePaths": ["libs/ui-kit/src/styles"]
                },
                "styles": [
                    "libs/shared/content/fonts/proxima-nova.css",
                    "libs/ui-kit/src/styles/global.scss",
                    "libs/ui-kit/.storybook/docs-typography.scss"
                ]
            },
            "configurations": {
                "ci": {
                    "quiet": true
                }
            }
        }

4reactions

mandarinicommented, May 27, 2022

So, Storybook now can be configured as you would configure it in any app without Nx. So, you can just use the pure Storybook documentation!

Here is a link I found regarding assets:

https://storybook.js.org/docs/angular/configure/images-and-assets

Top Results From Across the Web

Storybook: Frontend workshop for UI development

Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and...

Build your design system with Storybook + Nx

Automatically add Storybook setup to any Nx library ... The fact that Storybook is also integrated within your workspace, and as part of...

How to resolve aliases in Storybook? - Stack Overflow

module . Not 100% sure about the webpack export/import issue but do note that your webpack config export is a function, not a...

ECMAScript 6 Tools Awesome - DirDev.com

Transpilers. Babel - Turn ES6+ code into vanilla ES5 with no runtime; Traceur compiler - ES6 features > ES5. Includes classes, generators, promises, ......

Set up Storybook for Angular Projects - Nx

You first need to set up Storybook for your Nx workspace, if you haven't already. ... The @nrwl/angular:storybook-configuration generator has the option to ......