miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity
nx/packages/storybook/docs/configuration-generator-examples.md
Leosvel Pérez Espinosa 2b820a274e
docs(misc): update /packages/ links to /nx-api/ (#26128) 
- Update `/packages/` links to `/nx-api/`
- Convert some unneeded absolute links to relative
- Remove leftover examples doc for the already removed `cypress-project`
generator

<!-- Please make sure you have read the submission guidelines before
posting an PR -->
<!--
https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md#-submitting-a-pr
-->

<!-- Please make sure that your commit message follows our format -->
<!-- Example: `fix(nx): must begin with lowercase` -->

## Current Behavior
<!-- This is the behavior we have today -->

## Expected Behavior
<!-- This is the behavior we should expect with the changes in this PR
-->

## Related Issue(s)
<!-- Please link the issue being fixed so it gets closed when this is
merged. -->

Fixes #26126
2024-05-28 09:44:48 -04:00

3.1 KiB
Raw Blame History

title description
Storybook configuration generator examples This page contains examples for the @nx/storybook:configuration generator.

This is a framework-agnostic generator for setting up Storybook configuration for a project.

nx g @nx/storybook:configuration

{% callout type="info" title="Nx uses Storybook 7" %} Nx does not support Storybook v6 any more. So, Nx will configure your project to use Storybook v7. If you are not on Storybook 7 yet, please migrate. Please follow our Storybook 7 migration generator guide. {% /callout %}

If you are using Angular, React, Next.js, Vue or React Native in your project, it's best to use the framework specific Storybook configuration generator:

If you are not using one of the framework-specific generators mentioned above, when running this generator you will be prompted to provide the following:

  • The name of the project you want to generate the configuration for.
  • The uiFramework you want to use. Supported values are:
    • @storybook/angular
    • @storybook/html-webpack5
    • @storybook/nextjs
    • @storybook/preact-webpack5
    • @storybook/react-webpack5
    • @storybook/react-vite
    • @storybook/server-webpack5
    • @storybook/svelte-webpack5
    • @storybook/svelte-vite
    • @storybook/sveltekit
    • @storybook/vue-webpack5
    • @storybook/vue-vite
    • @storybook/vue3-webpack5
    • @storybook/vue3-vite
    • @storybook/web-components-webpack5
    • @storybook/web-components-vite
  • Whether you want to set up Storybook interaction tests (interactionTests). If you choose yes, all the necessary dependencies will be installed. Also, a test-storybook target will be generated in your project's project.json, with a command to invoke the Storybook test-runner. You can read more about this in the Nx Storybook interaction tests documentation page.

You must provide a name and a uiFramework for the generator to work.

You can read more about how this generator works, in the Storybook package overview page.

Examples

Generate Storybook configuration using JavaScript

nx g @nx/storybook:configuration ui --uiFramework=@storybook/web-components-vite --tsConfiguration=false

By default, our generator generates TypeScript Storybook configuration files. You can choose to use JavaScript for the Storybook configuration files of your project (the files inside the .storybook directory, eg. .storybook/main.js).