@natu/storybook

💻 Storybook

Storybook (opens in a new tab) is used to build in isolation, test and showcase UI components.

This package contains basic configuration of Storybook which can be used to create a functional, deployable app for particular needs.

Files in the package:

1. /src/main.ts - provides basic Storybook config:

• options: framework, source files, creating auto-docs etc., see all options ↗ (opens in a new tab)
• addons for additional functionalities: see all essential ↗ (opens in a new tab) / additional ↗ (opens in a new tab) ones

2. /src/preview.ts - provides additional preview settings, ex. custom:

• viewports ↗ (opens in a new tab)
• backgrounds ↗ (opens in a new tab)
• actions ↗ (opens in a new tab)
• controls ↗ (opens in a new tab)

🤓 Usage

Import the package as a dev dependency in the Storybook showcase app /apps/APP_NAME in package.json file:

"devDependencies": {
    "@natu/storybook": "*"
}

In the same file, add the Storybook commands:

"scripts": {
  "storybook": "storybook dev -p 6006", // runs locally
  "storybook:build": "storybook build" // build static for deploy
},

Then you can create your Storybook stories ↗ (opens in a new tab) in the /apps/APP_NAME/src folder.

📖 Essential docs

• Creating stories ↗ (opens in a new tab)
• Creating components docs ↗ (opens in a new tab)