Skip to main content

storybook

@ensono-stacks/next:storybook

Add Storybook to your next application

The storybook generator will install and configure Storybook into an existing Next application. It will add storybook configuration, a custom component command and storybook extensions. The following extensions are:

        {
"@storybook/addon-essentials": "7.4.5",
"@storybook/addon-actions": "7.4.5",
"@storybook/addon-links": "7.4.5",
"@storybook/manager-api": "7.4.5",
"@storybook/preview-api": "7.4.5",
"@storybook/addon-a11y": "7.4.5",
"@storybook/addon-jest": "7.4.5",
"@storybook/theming": "7.4.5",
},

Prerequisites

An existing Next application

Usage

nx g @ensono-stacks/next:storybook

Command line arguments

The following command line arguments are available:

OptionDescriptionTypeAccepted ValuesDefault
--projectThe name of the projectnameOfApplicationstringN/A
--skipPackageJsonDo not add dependencies to package.jsonbooleantrue/falsefalse

Generator Output

The generator creates the following:

  • creates a new folder .storybook. This contains information for the storybook package.
    • main.js file is created
    • preview.js file is created
  • creates a new file tsconfig.storybook.json to store configuration for storybook

The generator updates the following:

  • updates the project.json file to add the custom-component command

The generator installs the follow dependencies unless the --skipPackageJson option was used:

/package.json
{
"dependencies": {
"@storybook/core-server": "7.4.5"
},
"devDependencies": {
"@nx/storybook": "16.9.1",
"@storybook/nextjs": "7.4.5",
"@storybook/addon-essentials": "7.4.5",
"@storybook/addon-actions": "7.4.5",
"@storybook/addon-links": "7.4.5",
"@storybook/manager-api": "7.4.5",
"@storybook/preview-api": "7.4.5",
"@storybook/addon-a11y": "7.4.5",
"@storybook/addon-jest": "7.4.5",
"@storybook/theming": "7.4.5",
"eslint-plugin-storybook": "0.6.15"
}
}

Custom command for app

After the Storybook generator has been installed you can now run the new command custom-component that will add the following:

  • creates a component under a specified name
  • creates a test for the new component
  • creates a story for the new component
note

my-app is an example of your app's name.

nx run my-app:custom-component --name=component-x --folderPath=components

The flags are the following:

  • name: name of the component
  • folderPath: path of the new component folder (based on the app as the root of the path)