miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

fix(storybook): v7 vite settings docs remove rootMain (#14992)

Browse Source
This commit is contained in:
Katerina Skroumpelou 2023-02-15 13:10:28 +02:00 committed by GitHub
parent bd2a1aea03
commit 1b64e17d4e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 447 additions and 697 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
.storybook/main.js
View File

@ -1,11 +0,0 @@
module.exports = {
stories: [],
addons: ['@storybook/addon-essentials'],
// uncomment the property below if you want to apply some webpack config globally
// webpackFinal: async (config, { configType }) => {
// // Make whatever fine-grained changes you need that should apply to all storybook configs
// // Return the altered config
// return config;
// },
};

137
docs/generated/packages/storybook/documents/migrate-storybook-7.md
View File

@ -52,7 +52,7 @@ The Storybook CLI will prompt you to run some code generators and modifiers.
Say `yes` to the following:
- `mainjsFramework`: It will add the `framework` field in your root `.storybook/main.js|ts` file. We are going to delete it since it's not needed in the root file, but it's handy to have it ready to copy. Also, it shows you an indication of what it looks like.
- `mainjsFramework`: It will try to add the `framework` field in your project's `.storybook/main.js|ts` file.
- `eslintPlugin`: installs the `eslint-plugin-storybook`
- `storybook-binary`: installs Storybook's `storybook` binary
- `newFrameworks`: removes unused dependencies (eg. `@storybook/builder-webpack5`, `@storybook/manager-webpack5`, `@storybook/builder-vite`)
@ -61,21 +61,6 @@ Say `no` to the following:
- `autodocsTrue`: we don't need it and it can potentially cause issues with missing dependencies on your Nx workspace
### 3. Restore the root `.storybook/main.js|ts` file
You will have noticed that the Storybook automigrator added the `framework` option to your root `.storybook/main.js|ts` file. Let's remove that.
So, remove:
```ts
framework: {
name: '@storybook/angular',
options: {}
}
```
from your root `.storybook/main.js|ts` file.
### 3. Edit all the project-level `.storybook/main.js|ts` files
Find all your project-level `.storybook/main.js|ts` files and edit them to add the `framework` option. While you are at it, remove the `builder` from `core` options.
@ -87,7 +72,7 @@ In your project-level `.storybook/main.js|ts` files, remove the `builder` from `
Your core options most probably look like this:
```ts
core: { ...rootMain.core, builder: '@storybook/builder-vite' },
core: { builder: '@storybook/builder-vite' },
```
You must remove the `builder`, or you can also delete the `core` object entirely.
@ -126,12 +111,16 @@ Choose the `@storybook/angular` framework. So add this in your project-level `.s
#### For React projects using `'@storybook/builder-vite'`
Choose the `@storybook/react-vite` framework. So add this in your project-level `.storybook/main.js|ts` file:
Choose the `@storybook/react-vite` framework. You must also point the builder to the Vite configuration file path, so that it can read the settings from there. If your project's root path is `apps/my-app` and it's using a Vite configuration file at `apps/my-app/vite.config.ts`, then you must add this in your project-level `.storybook/main.js|ts` file:
```ts
framework: {
name: '@storybook/react-vite',
options: {}
options: {
builder: {
viteConfigPath: 'apps/my-app/vite.config.ts',
},
}
}
```
@ -159,12 +148,16 @@ Choose the `@storybook/nextjs` framework. So add this in your project-level `.st
#### For Web Components projects using `'@storybook/builder-vite'`
Choose the `@storybook/web-components-vite` framework. So add this in your project-level `.storybook/main.js|ts` file:
Choose the `@storybook/web-components-vite` framework. You must also point the builder to the Vite configuration file path, so that it can read the settings from there. If your project's root path is `apps/my-app` and it's using a Vite configuration file at `apps/my-app/vite.config.ts`, then you must add this in your project-level `.storybook/main.js|ts` file:
```ts
framework: {
name: '@storybook/web-components-vite',
options: {}
options: {
builder: {
viteConfigPath: 'apps/my-app/vite.config.ts',
},
}
}
```
@ -183,79 +176,67 @@ Choose the `@storybook/web-components-webpack5` framework. So add this in your p
You can easily find the correct framework by looking at the `builder` option in your project-level `.storybook/main.js|ts` file.
#### Resulting project-level `.storybook/main.js|ts` file
### 4. Check result of project-level `.storybook/main.js|ts` file
#### Full example for Angular projects
Here is an example of a project-level `.storybook/main.js|ts` file for an Angular project:
```ts
// apps/my-angular-app/.storybook/main.js|ts
const rootMain = require('../../../.storybook/main');
module.exports = {
...rootMain,
stories: [
...rootMain.stories,
'../src/app/**/*.stories.mdx',
'../src/app/**/*.stories.@(js|jsx|ts|tsx)',
],
addons: [...rootMain.addons],
```ts {% fileName="apps/my-angular-app/.storybook/main.js" %}
const config = {
stories: ['../src/app/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
addons: ['@storybook/addon-essentials'],
framework: {
name: '@storybook/angular',
options: {},
},
};
export default config;
```
### 4. For Vite.js projects
#### Full example for React projects with Vite
Make sure to add the `viteFinal` option to your project-level `.storybook/main.js|ts` files on projects that use Vite.js.
Here is an example of a project-level `.storybook/main.js|ts` file for a React project using Vite:
```ts
async viteFinal(config, { configType }) {
return mergeConfig(config, {
plugins: [
viteTsConfigPaths({
root: '<PATH_TO_PROJECT_ROOT>',
}),
],
});
},
```
This will take care of any path resolution issues.
An example of a project-level `.storybook/main.js|ts` file for a React project that uses Vite.js:
```ts
// apps/my-react-vite-app/.storybook/main.js|ts
const { mergeConfig } = require('vite');
const viteTsConfigPaths = require('vite-tsconfig-paths').default;
const rootMain = require('../../../.storybook/main');
module.exports = {
...rootMain,
stories: [
...rootMain.stories,
'../src/app/**/*.stories.mdx',
'../src/app/**/*.stories.@(js|jsx|ts|tsx)',
],
addons: [...rootMain.addons],
async viteFinal(config, { configType }) {
return mergeConfig(config, {
plugins: [
viteTsConfigPaths({
root: '../../../',
}),
],
});
},
```ts {% fileName="apps/my-react-app/.storybook/main.js" %}
const config = {
stories: ['../src/app/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
addons: ['@storybook/addon-essentials'],
framework: {
name: '@storybook/react-vite',
options: {},
options: {
builder: {
viteConfigPath: 'apps/rv1/vite.config.ts',
},
},
},
};
export default config;
```
### 5. Remove `uiFramework` from `project.json`
You can now remove the `uiFramework` option from your `storybook` and `build-storybook` targets in your project's `project.json` file.
So, for example, this is what a resulting `storybook` target would look for a non-Angular project:
```json {% fileName="apps/my-react-app/project.json" %}
{
...
"targets": {
...
"storybook": {
"executor": "@nrwl/storybook:storybook",
"options": {
"port": 4400,
"configDir": "apps/my-react-app/.storybook"
},
"configurations": {
...
}
},
```
## Use Storybook 7 beta

137
docs/shared/packages/storybook/migrate-storybook-7.md
View File

@ -52,7 +52,7 @@ The Storybook CLI will prompt you to run some code generators and modifiers.
Say `yes` to the following:
- `mainjsFramework`: It will add the `framework` field in your root `.storybook/main.js|ts` file. We are going to delete it since it's not needed in the root file, but it's handy to have it ready to copy. Also, it shows you an indication of what it looks like.
- `mainjsFramework`: It will try to add the `framework` field in your project's `.storybook/main.js|ts` file.
- `eslintPlugin`: installs the `eslint-plugin-storybook`
- `storybook-binary`: installs Storybook's `storybook` binary
- `newFrameworks`: removes unused dependencies (eg. `@storybook/builder-webpack5`, `@storybook/manager-webpack5`, `@storybook/builder-vite`)
@ -61,21 +61,6 @@ Say `no` to the following:
- `autodocsTrue`: we don't need it and it can potentially cause issues with missing dependencies on your Nx workspace
### 3. Restore the root `.storybook/main.js|ts` file
You will have noticed that the Storybook automigrator added the `framework` option to your root `.storybook/main.js|ts` file. Let's remove that.
So, remove:
```ts
framework: {
name: '@storybook/angular',
options: {}
}
```
from your root `.storybook/main.js|ts` file.
### 3. Edit all the project-level `.storybook/main.js|ts` files
Find all your project-level `.storybook/main.js|ts` files and edit them to add the `framework` option. While you are at it, remove the `builder` from `core` options.
@ -87,7 +72,7 @@ In your project-level `.storybook/main.js|ts` files, remove the `builder` from `
Your core options most probably look like this:
```ts
core: { ...rootMain.core, builder: '@storybook/builder-vite' },
core: { builder: '@storybook/builder-vite' },
```
You must remove the `builder`, or you can also delete the `core` object entirely.
@ -126,12 +111,16 @@ Choose the `@storybook/angular` framework. So add this in your project-level `.s
#### For React projects using `'@storybook/builder-vite'`
Choose the `@storybook/react-vite` framework. So add this in your project-level `.storybook/main.js|ts` file:
Choose the `@storybook/react-vite` framework. You must also point the builder to the Vite configuration file path, so that it can read the settings from there. If your project's root path is `apps/my-app` and it's using a Vite configuration file at `apps/my-app/vite.config.ts`, then you must add this in your project-level `.storybook/main.js|ts` file:
```ts
framework: {
name: '@storybook/react-vite',
options: {}
options: {
builder: {
viteConfigPath: 'apps/my-app/vite.config.ts',
},
}
}
```
@ -159,12 +148,16 @@ Choose the `@storybook/nextjs` framework. So add this in your project-level `.st
#### For Web Components projects using `'@storybook/builder-vite'`
Choose the `@storybook/web-components-vite` framework. So add this in your project-level `.storybook/main.js|ts` file:
Choose the `@storybook/web-components-vite` framework. You must also point the builder to the Vite configuration file path, so that it can read the settings from there. If your project's root path is `apps/my-app` and it's using a Vite configuration file at `apps/my-app/vite.config.ts`, then you must add this in your project-level `.storybook/main.js|ts` file:
```ts
framework: {
name: '@storybook/web-components-vite',
options: {}
options: {
builder: {
viteConfigPath: 'apps/my-app/vite.config.ts',
},
}
}
```
@ -183,79 +176,67 @@ Choose the `@storybook/web-components-webpack5` framework. So add this in your p
You can easily find the correct framework by looking at the `builder` option in your project-level `.storybook/main.js|ts` file.
#### Resulting project-level `.storybook/main.js|ts` file
### 4. Check result of project-level `.storybook/main.js|ts` file
#### Full example for Angular projects
Here is an example of a project-level `.storybook/main.js|ts` file for an Angular project:
```ts
// apps/my-angular-app/.storybook/main.js|ts
const rootMain = require('../../../.storybook/main');
module.exports = {
...rootMain,
stories: [
...rootMain.stories,
'../src/app/**/*.stories.mdx',
'../src/app/**/*.stories.@(js|jsx|ts|tsx)',
],
addons: [...rootMain.addons],
```ts {% fileName="apps/my-angular-app/.storybook/main.js" %}
const config = {
stories: ['../src/app/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
addons: ['@storybook/addon-essentials'],
framework: {
name: '@storybook/angular',
options: {},
},
};
export default config;
```
### 4. For Vite.js projects
#### Full example for React projects with Vite
Make sure to add the `viteFinal` option to your project-level `.storybook/main.js|ts` files on projects that use Vite.js.
Here is an example of a project-level `.storybook/main.js|ts` file for a React project using Vite:
```ts
async viteFinal(config, { configType }) {
return mergeConfig(config, {
plugins: [
viteTsConfigPaths({
root: '<PATH_TO_PROJECT_ROOT>',
}),
],
});
},
```
This will take care of any path resolution issues.
An example of a project-level `.storybook/main.js|ts` file for a React project that uses Vite.js:
```ts
// apps/my-react-vite-app/.storybook/main.js|ts
const { mergeConfig } = require('vite');
const viteTsConfigPaths = require('vite-tsconfig-paths').default;
const rootMain = require('../../../.storybook/main');
module.exports = {
...rootMain,
stories: [
...rootMain.stories,
'../src/app/**/*.stories.mdx',
'../src/app/**/*.stories.@(js|jsx|ts|tsx)',
],
addons: [...rootMain.addons],
async viteFinal(config, { configType }) {
return mergeConfig(config, {
plugins: [
viteTsConfigPaths({
root: '../../../',
}),
],
});
},
```ts {% fileName="apps/my-react-app/.storybook/main.js" %}
const config = {
stories: ['../src/app/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
addons: ['@storybook/addon-essentials'],
framework: {
name: '@storybook/react-vite',
options: {},
options: {
builder: {
viteConfigPath: 'apps/rv1/vite.config.ts',
},
},
},
};
export default config;
```
### 5. Remove `uiFramework` from `project.json`
You can now remove the `uiFramework` option from your `storybook` and `build-storybook` targets in your project's `project.json` file.
So, for example, this is what a resulting `storybook` target would look for a non-Angular project:
```json {% fileName="apps/my-react-app/project.json" %}
{
...
"targets": {
...
"storybook": {
"executor": "@nrwl/storybook:storybook",
"options": {
"port": 4400,
"configDir": "apps/my-react-app/.storybook"
},
"configurations": {
...
}
},
```
## Use Storybook 7 beta

1
docs/shared/recipes/one-storybook-per-scope.md
View File

@ -111,7 +111,6 @@ Thanks to our folder structure, we can easily configure Storybook to import all
For example, `libs/storybook-host-admin/.storybook/main.js`:
```javascript {% fileName="libs/storybook-host-admin/.storybook/main.js" %}
const rootMain = require('../../../.storybook/main');
module.exports = {
core: { builder: 'webpack5' },
stories: ['../../admin/ui/**/src/lib/**/*.stories.ts'],

11
graph/.storybook/main.js
View File

@ -1,11 +0,0 @@
module.exports = {
stories: [],
addons: ['@storybook/addon-essentials'],
// uncomment the property below if you want to apply some webpack config globally
// webpackFinal: async (config, { configType }) => {
// // Make whatever fine-grained changes you need that should apply to all storybook configs
// // Return the altered config
// return config;
// },
};

0
graph/.storybook/preview.js
View File

14
graph/.storybook/tsconfig.json
View File

@ -1,14 +0,0 @@
{
"extends": "../../tsconfig.base.json",
"exclude": [
"../**/*.spec.js",
"../**/*.test.js",
"../**/*.spec.ts",
"../**/*.test.ts",
"../**/*.spec.tsx",
"../**/*.test.tsx",
"../**/*.spec.jsx",
"../**/*.test.jsx"
],
"include": ["../**/*"]
}

20
graph/client/.storybook/main.js
View File

@ -1,28 +1,12 @@
const rootMain = require('../../.storybook/main');
module.exports = {
...rootMain,
core: { ...rootMain.core, builder: 'webpack5' },
core: { builder: 'webpack5' },
stories: [
...rootMain.stories,
'../src/app/**/*.stories.mdx',
'../src/app/**/*.stories.@(js|jsx|ts|tsx)',
],
addons: [
...rootMain.addons,
'@storybook/addon-essentials',
'@nrwl/react/plugins/storybook',
'storybook-dark-mode',
],
webpackFinal: async (config, { configType }) => {
// apply any global webpack configs that might have been specified in .storybook/main.js
if (rootMain.webpackFinal) {
config = await rootMain.webpackFinal(config, { configType });
}
// add your own webpack tweaks if needed
return config;
},
};

20
graph/ui-components/.storybook/main.js
View File

@ -1,24 +1,8 @@
const rootMain = require('../../.storybook/main');
module.exports = {
...rootMain,
core: { ...rootMain.core, builder: 'webpack5' },
core: { builder: 'webpack5' },
stories: [
...rootMain.stories,
'../src/lib/**/*.stories.mdx',
'../src/lib/**/*.stories.@(js|jsx|ts|tsx)',
],
addons: [...rootMain.addons, '@nrwl/react/plugins/storybook'],
webpackFinal: async (config, { configType }) => {
// apply any global webpack configs that might have been specified in .storybook/main.js
if (rootMain.webpackFinal) {
config = await rootMain.webpackFinal(config, { configType });
}
// add your own webpack tweaks if needed
return config;
},
addons: ['@storybook/addon-essentials', '@nrwl/react/plugins/storybook'],
};

20
graph/ui-graph/.storybook/main.js
View File

@ -1,24 +1,8 @@
const rootMain = require('../../.storybook/main');
module.exports = {
...rootMain,
core: { ...rootMain.core, builder: 'webpack5' },
core: { builder: 'webpack5' },
stories: [
...rootMain.stories,
'../src/lib/**/*.stories.mdx',
'../src/lib/**/*.stories.@(js|jsx|ts|tsx)',
],
addons: [...rootMain.addons, '@nrwl/react/plugins/storybook'],
webpackFinal: async (config, { configType }) => {
// apply any global webpack configs that might have been specified in .storybook/main.js
if (rootMain.webpackFinal) {
config = await rootMain.webpackFinal(config, { configType });
}
// add your own webpack tweaks if needed
return config;
},
addons: ['@storybook/addon-essentials', '@nrwl/react/plugins/storybook'],
};

18
graph/ui-tooltips/.storybook/main.js
View File

@ -1,22 +1,8 @@
const rootMain = require('../../.storybook/main');
module.exports = {
...rootMain,
core: { ...rootMain.core, builder: 'webpack5' },
core: { builder: 'webpack5' },
stories: [
...rootMain.stories,
'../src/lib/**/*.stories.mdx',
'../src/lib/**/*.stories.@(js|jsx|ts|tsx)',
],
addons: [...rootMain.addons, '@nrwl/react/plugins/storybook'],
webpackFinal: async (config, { configType }) => {
// apply any global webpack configs that might have been specified in .storybook/main.js
if (rootMain.webpackFinal) {
config = await rootMain.webpackFinal(config, { configType });
}
// add your own webpack tweaks if needed
return config;
},
addons: ['@storybook/addon-essentials', '@nrwl/react/plugins/storybook'],
};

37
packages/storybook/src/executors/utils.spec.ts
View File

@ -6,11 +6,8 @@ describe('testing utilities', () => {
describe('builderIsWebpackButNotWebpack5', () => {
it('should return false if builder is webpack5', () => {
const sourceCode = stripIndents`
const rootMain = require('../../../.storybook/main');
module.exports = {
...rootMain,
core: { ...rootMain.core, builder: 'webpack5' },
module.exports = {
core: { builder: 'webpack5' },
};
`;
@ -26,12 +23,9 @@ describe('testing utilities', () => {
it('should return false if builder is @storybook/webpack5', () => {
const sourceCode = stripIndents`
const rootMain = require('../../../.storybook/main');
module.exports = {
...rootMain,
core: { ...rootMain.core, builder: '@storybook/webpack5' },
};
module.exports = {
core: { builder: '@storybook/webpack5' },
};
`;
const source = ts.createSourceFile(
@ -46,11 +40,8 @@ describe('testing utilities', () => {
it('should return false if builder exists but does not contain webpack', () => {
const sourceCode = stripIndents`
const rootMain = require('../../../.storybook/main');
module.exports = {
...rootMain,
core: { ...rootMain.core, builder: '@storybook/vite-builder' },
module.exports = {
core: { builder: '@storybook/vite-builder' },
};
`;
@ -66,11 +57,8 @@ describe('testing utilities', () => {
it('should return true if builder is webpack4', () => {
const sourceCode = stripIndents`
const rootMain = require('../../../.storybook/main');
module.exports = {
...rootMain,
core: { ...rootMain.core, builder: 'webpack4' },
module.exports = {
core: { builder: 'webpack4' },
};
`;
@ -86,11 +74,8 @@ describe('testing utilities', () => {
it('should return true if builder does not exist because default is webpack', () => {
const sourceCode = stripIndents`
const rootMain = require('../../../.storybook/main');
module.exports = {
...rootMain,
};
module.exports = {
};
`;
const source = ts.createSourceFile(

455
packages/storybook/src/generators/configuration/__snapshots__/configuration.spec.ts.snap
View File

@ -1,21 +1,17 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`@nrwl/storybook:configuration basic functionalities should generate a webpackFinal into the main.js and reference a potential global webpackFinal definition 1`] = `
"const rootMain = require('../../../.storybook/main');
"
module.exports = {
...rootMain,
core: { ...rootMain.core, builder: 'webpack5' },
core: { builder: 'webpack5' },
stories: [
...rootMain.stories,
'../**/*.stories.mdx',
'../**/*.stories.@(js|jsx|ts|tsx)' ],
addons: [...rootMain.addons
addons: ['@storybook/addon-essentials'
]
@ -52,7 +48,7 @@ Object {
"inputs": Array [
"default",
"^production",
"{workspaceRoot}/.storybook/**/*",
"!{projectRoot}/.storybook/**/*",
],
},
"e2e": Object {
@ -100,27 +96,23 @@ Array [
]
`;
exports[`@nrwl/storybook:configuration for other types of projects - Next.js and the swc compiler for Storybook configurations with Vite should create correct main.ts and tsconfig.json for NextJS buildable libs 1`] = `
"import { rootMain } from '../../../.storybook/main';
exports[`@nrwl/storybook:configuration for other types of projects - Next.js and the swc compiler for Storybook configurations with Vite should create correct main.js and tsconfig.json for NextJS buildable libs 1`] = `
"const { mergeConfig } = require('vite');
const viteTsConfigPaths = require('vite-tsconfig-paths').default;
import type { StorybookConfig, Options } from '@storybook/core-common';
import { mergeConfig } from 'vite';
import viteTsConfigPaths from 'vite-tsconfig-paths';
const config: StorybookConfig = {
...rootMain,
core: { ...rootMain.core, builder: '@storybook/builder-vite' },
module.exports = {
core: { builder: '@storybook/builder-vite' },
stories: [
...rootMain.stories,
'../src/lib/**/*.stories.mdx',
'../src/lib/**/*.stories.@(js|jsx|ts|tsx)'
],
addons: [...(rootMain.addons || [])
addons: ['@storybook/addon-essentials'
],
async viteFinal(config: any) {
async viteFinal(config, { configType }) {
return mergeConfig(config, {
plugins: [
viteTsConfigPaths({
@ -129,9 +121,7 @@ const config: StorybookConfig = {
],
});
},
} as StorybookConfig;
module.exports = config;
};
@ -142,7 +132,127 @@ module.exports = config;
"
`;
exports[`@nrwl/storybook:configuration for other types of projects - Next.js and the swc compiler for Storybook configurations with Vite should create correct main.ts and tsconfig.json for NextJS buildable libs 2`] = `
exports[`@nrwl/storybook:configuration for other types of projects - Next.js and the swc compiler for Storybook configurations with Vite should create correct main.js and tsconfig.json for NextJS buildable libs 2`] = `
"{
\\"extends\\": \\"../tsconfig.json\\",
\\"compilerOptions\\": {
\\"emitDecoratorMetadata\\": true
, \\"outDir\\": \\"\\"
},
\\"files\\": [
\\"../../../node_modules/@nrwl/react/typings/styled-jsx.d.ts\\",
\\"../../../node_modules/@nrwl/react/typings/cssmodule.d.ts\\",
\\"../../../node_modules/@nrwl/react/typings/image.d.ts\\"
],
\\"exclude\\": [\\"../**/*.spec.ts\\" , \\"../**/*.spec.js\\", \\"../**/*.spec.tsx\\", \\"../**/*.spec.jsx\\"],
\\"include\\": [
\\"../src/**/*.stories.ts\\",
\\"../src/**/*.stories.js\\",
\\"../src/**/*.stories.jsx\\",
\\"../src/**/*.stories.tsx\\",
\\"../src/**/*.stories.mdx\\",
\\"*.js\\"]
}
"
`;
exports[`@nrwl/storybook:configuration for other types of projects - Next.js and the swc compiler for Storybook configurations with Vite should create correct main.js and tsconfig.json for React apps using the swc compiler 1`] = `
"const { mergeConfig } = require('vite');
const viteTsConfigPaths = require('vite-tsconfig-paths').default;
module.exports = {
core: { builder: '@storybook/builder-vite' },
stories: [
'../src/app/**/*.stories.mdx',
'../src/app/**/*.stories.@(js|jsx|ts|tsx)'
],
addons: ['@storybook/addon-essentials'
, 'storybook-addon-swc'
],
async viteFinal(config, { configType }) {
return mergeConfig(config, {
plugins: [
viteTsConfigPaths({
root: '../../../',
}),
],
});
},
};
// To customize your Vite configuration you can use the viteFinal field.
// Check https://storybook.js.org/docs/react/builders/vite#configuration
// and https://nx.dev/packages/storybook/documents/custom-builder-configs
"
`;
exports[`@nrwl/storybook:configuration for other types of projects - Next.js and the swc compiler for Storybook configurations with Vite should create correct main.js and tsconfig.json for React apps using the swc compiler 2`] = `
"{
\\"extends\\": \\"../tsconfig.json\\",
\\"compilerOptions\\": {
\\"emitDecoratorMetadata\\": true
, \\"outDir\\": \\"\\"
},
\\"files\\": [
\\"../../../node_modules/@nrwl/react/typings/styled-jsx.d.ts\\",
\\"../../../node_modules/@nrwl/react/typings/cssmodule.d.ts\\",
\\"../../../node_modules/@nrwl/react/typings/image.d.ts\\"
],
\\"exclude\\": [\\"../**/*.spec.ts\\" , \\"../**/*.spec.js\\", \\"../**/*.spec.tsx\\", \\"../**/*.spec.jsx\\"],
\\"include\\": [
\\"../src/**/*.stories.ts\\",
\\"../src/**/*.stories.js\\",
\\"../src/**/*.stories.jsx\\",
\\"../src/**/*.stories.tsx\\",
\\"../src/**/*.stories.mdx\\",
\\"*.js\\"]
}
"
`;
exports[`@nrwl/storybook:configuration for other types of projects - Next.js and the swc compiler for Storybook configurations with Vite should create correct main.js and tsconfig.json for React buildable libs 1`] = `
"const { mergeConfig } = require('vite');
const viteTsConfigPaths = require('vite-tsconfig-paths').default;
module.exports = {
core: { builder: '@storybook/builder-vite' },
stories: [
'../src/lib/**/*.stories.mdx',
'../src/lib/**/*.stories.@(js|jsx|ts|tsx)'
],
addons: ['@storybook/addon-essentials'
],
async viteFinal(config, { configType }) {
return mergeConfig(config, {
plugins: [
viteTsConfigPaths({
root: '../../../',
}),
],
});
},
};
// To customize your Vite configuration you can use the viteFinal field.
// Check https://storybook.js.org/docs/react/builders/vite#configuration
// and https://nx.dev/packages/storybook/documents/custom-builder-configs
"
`;
exports[`@nrwl/storybook:configuration for other types of projects - Next.js and the swc compiler for Storybook configurations with Vite should create correct main.js and tsconfig.json for React buildable libs 2`] = `
"{
\\"extends\\": \\"../tsconfig.json\\",
\\"compilerOptions\\": {
@ -161,29 +271,25 @@ exports[`@nrwl/storybook:configuration for other types of projects - Next.js and
\\"../src/**/*.stories.jsx\\",
\\"../src/**/*.stories.tsx\\",
\\"../src/**/*.stories.mdx\\",
\\"*.ts\\",
\\"*.js\\"]
}
"
`;
exports[`@nrwl/storybook:configuration for other types of projects - Next.js and the swc compiler for Storybook configurations with Vite should create correct main.ts and tsconfig.json for NextJS libs 1`] = `
"import { rootMain } from '../../../.storybook/main';
import type { StorybookConfig, Options } from '@storybook/core-common';
"import type { StorybookConfig } from '@storybook/core-common';
import { mergeConfig } from 'vite';
import viteTsConfigPaths from 'vite-tsconfig-paths';
const config: StorybookConfig = {
...rootMain,
core: { ...rootMain.core, builder: '@storybook/builder-vite' },
core: { builder: '@storybook/builder-vite' },
stories: [
...rootMain.stories,
'../src/lib/**/*.stories.mdx',
'../src/lib/**/*.stories.@(js|jsx|ts|tsx)'
],
addons: [...(rootMain.addons || [])
addons: ['@storybook/addon-essentials'
],
@ -235,22 +341,19 @@ exports[`@nrwl/storybook:configuration for other types of projects - Next.js and
`;
exports[`@nrwl/storybook:configuration for other types of projects - Next.js and the swc compiler for Storybook configurations with Vite should create correct main.ts and tsconfig.json for NextJs apps 1`] = `
"import { rootMain } from '../../../.storybook/main';
import type { StorybookConfig, Options } from '@storybook/core-common';
"import type { StorybookConfig } from '@storybook/core-common';
import path from 'path';
import { mergeConfig } from 'vite';
import viteTsConfigPaths from 'vite-tsconfig-paths';
const config: StorybookConfig = {
...rootMain,
core: { ...rootMain.core, builder: '@storybook/builder-vite' },
core: { builder: '@storybook/builder-vite' },
stories: [
...rootMain.stories,
'../components/**/*.stories.mdx',
'../components/**/*.stories.@(js|jsx|ts|tsx)'
],
addons: [...(rootMain.addons || [])
addons: ['@storybook/addon-essentials'
, 'storybook-addon-swc',
{
@ -309,22 +412,19 @@ exports[`@nrwl/storybook:configuration for other types of projects - Next.js and
`;
exports[`@nrwl/storybook:configuration for other types of projects - Next.js and the swc compiler for Storybook configurations with Vite should create correct main.ts and tsconfig.json for React apps 1`] = `
"import { rootMain } from '../../../.storybook/main';
import type { StorybookConfig, Options } from '@storybook/core-common';
"import type { StorybookConfig } from '@storybook/core-common';
import { mergeConfig } from 'vite';
import viteTsConfigPaths from 'vite-tsconfig-paths';
const config: StorybookConfig = {
...rootMain,
core: { ...rootMain.core, builder: '@storybook/builder-vite' },
core: { builder: '@storybook/builder-vite' },
stories: [
...rootMain.stories,
'../src/app/**/*.stories.mdx',
'../src/app/**/*.stories.@(js|jsx|ts|tsx)'
],
addons: [...(rootMain.addons || [])
addons: ['@storybook/addon-essentials'
],
@ -375,157 +475,20 @@ exports[`@nrwl/storybook:configuration for other types of projects - Next.js and
"
`;
exports[`@nrwl/storybook:configuration for other types of projects - Next.js and the swc compiler for Storybook configurations with Vite should create correct main.ts and tsconfig.json for React apps using the swc compiler 1`] = `
"import { rootMain } from '../../../.storybook/main';
import type { StorybookConfig, Options } from '@storybook/core-common';
import { mergeConfig } from 'vite';
import viteTsConfigPaths from 'vite-tsconfig-paths';
const config: StorybookConfig = {
...rootMain,
core: { ...rootMain.core, builder: '@storybook/builder-vite' },
stories: [
...rootMain.stories,
'../src/app/**/*.stories.mdx',
'../src/app/**/*.stories.@(js|jsx|ts|tsx)'
],
addons: [...(rootMain.addons || [])
, 'storybook-addon-swc'
],
async viteFinal(config: any) {
return mergeConfig(config, {
plugins: [
viteTsConfigPaths({
root: '../../../',
}),
],
});
},
} as StorybookConfig;
module.exports = config;
// To customize your Vite configuration you can use the viteFinal field.
// Check https://storybook.js.org/docs/react/builders/vite#configuration
// and https://nx.dev/packages/storybook/documents/custom-builder-configs
"
`;
exports[`@nrwl/storybook:configuration for other types of projects - Next.js and the swc compiler for Storybook configurations with Vite should create correct main.ts and tsconfig.json for React apps using the swc compiler 2`] = `
"{
\\"extends\\": \\"../tsconfig.json\\",
\\"compilerOptions\\": {
\\"emitDecoratorMetadata\\": true
, \\"outDir\\": \\"\\"
},
\\"files\\": [
\\"../../../node_modules/@nrwl/react/typings/styled-jsx.d.ts\\",
\\"../../../node_modules/@nrwl/react/typings/cssmodule.d.ts\\",
\\"../../../node_modules/@nrwl/react/typings/image.d.ts\\"
],
\\"exclude\\": [\\"../**/*.spec.ts\\" , \\"../**/*.spec.js\\", \\"../**/*.spec.tsx\\", \\"../**/*.spec.jsx\\"],
\\"include\\": [
\\"../src/**/*.stories.ts\\",
\\"../src/**/*.stories.js\\",
\\"../src/**/*.stories.jsx\\",
\\"../src/**/*.stories.tsx\\",
\\"../src/**/*.stories.mdx\\",
\\"*.ts\\",
\\"*.js\\"]
}
"
`;
exports[`@nrwl/storybook:configuration for other types of projects - Next.js and the swc compiler for Storybook configurations with Vite should create correct main.ts and tsconfig.json for React buildable libs 1`] = `
"import { rootMain } from '../../../.storybook/main';
import type { StorybookConfig, Options } from '@storybook/core-common';
import { mergeConfig } from 'vite';
import viteTsConfigPaths from 'vite-tsconfig-paths';
const config: StorybookConfig = {
...rootMain,
core: { ...rootMain.core, builder: '@storybook/builder-vite' },
stories: [
...rootMain.stories,
'../src/lib/**/*.stories.mdx',
'../src/lib/**/*.stories.@(js|jsx|ts|tsx)'
],
addons: [...(rootMain.addons || [])
],
async viteFinal(config: any) {
return mergeConfig(config, {
plugins: [
viteTsConfigPaths({
root: '../../../',
}),
],
});
},
} as StorybookConfig;
module.exports = config;
// To customize your Vite configuration you can use the viteFinal field.
// Check https://storybook.js.org/docs/react/builders/vite#configuration
// and https://nx.dev/packages/storybook/documents/custom-builder-configs
"
`;
exports[`@nrwl/storybook:configuration for other types of projects - Next.js and the swc compiler for Storybook configurations with Vite should create correct main.ts and tsconfig.json for React buildable libs 2`] = `
"{
\\"extends\\": \\"../tsconfig.json\\",
\\"compilerOptions\\": {
\\"emitDecoratorMetadata\\": true
, \\"outDir\\": \\"\\"
},
\\"files\\": [
\\"../../../node_modules/@nrwl/react/typings/styled-jsx.d.ts\\",
\\"../../../node_modules/@nrwl/react/typings/cssmodule.d.ts\\",
\\"../../../node_modules/@nrwl/react/typings/image.d.ts\\"
],
\\"exclude\\": [\\"../**/*.spec.ts\\" , \\"../**/*.spec.js\\", \\"../**/*.spec.tsx\\", \\"../**/*.spec.jsx\\"],
\\"include\\": [
\\"../src/**/*.stories.ts\\",
\\"../src/**/*.stories.js\\",
\\"../src/**/*.stories.jsx\\",
\\"../src/**/*.stories.tsx\\",
\\"../src/**/*.stories.mdx\\",
\\"*.ts\\",
\\"*.js\\"]
}
"
`;
exports[`@nrwl/storybook:configuration for other types of projects - Next.js and the swc compiler for TypeScript Storybook configurations should create correct main.ts and tsconfig.json for NextJS buildable libs 1`] = `
"import { rootMain } from '../../../.storybook/main';
import type { StorybookConfig, Options } from '@storybook/core-common';
"import type { StorybookConfig } from '@storybook/core-common';
const config: StorybookConfig = {
...rootMain,
core: { ...rootMain.core, builder: 'webpack5' },
core: { builder: 'webpack5' },
stories: [
...rootMain.stories,
'../src/lib/**/*.stories.mdx',
'../src/lib/**/*.stories.@(js|jsx|ts|tsx)'
],
addons: [...(rootMain.addons || []) , '@nrwl/react/plugins/storybook'
addons: ['@storybook/addon-essentials' , '@nrwl/react/plugins/storybook'
]
@ -568,22 +531,19 @@ exports[`@nrwl/storybook:configuration for other types of projects - Next.js and
`;
exports[`@nrwl/storybook:configuration for other types of projects - Next.js and the swc compiler for TypeScript Storybook configurations should create correct main.ts and tsconfig.json for NextJS libs 1`] = `
"import { rootMain } from '../../../.storybook/main';
import type { StorybookConfig, Options } from '@storybook/core-common';
"import type { StorybookConfig } from '@storybook/core-common';
const config: StorybookConfig = {
...rootMain,
core: { ...rootMain.core, builder: 'webpack5' },
core: { builder: 'webpack5' },
stories: [
...rootMain.stories,
'../src/lib/**/*.stories.mdx',
'../src/lib/**/*.stories.@(js|jsx|ts|tsx)'
],
addons: [...(rootMain.addons || []) , '@nrwl/react/plugins/storybook'
addons: ['@storybook/addon-essentials' , '@nrwl/react/plugins/storybook'
]
@ -626,22 +586,19 @@ exports[`@nrwl/storybook:configuration for other types of projects - Next.js and
`;
exports[`@nrwl/storybook:configuration for other types of projects - Next.js and the swc compiler for TypeScript Storybook configurations should create correct main.ts and tsconfig.json for NextJs apps 1`] = `
"import { rootMain } from '../../../.storybook/main';
import type { StorybookConfig, Options } from '@storybook/core-common';
"import type { StorybookConfig } from '@storybook/core-common';
import path from 'path';
const config: StorybookConfig = {
...rootMain,
core: { ...rootMain.core, builder: 'webpack5' },
core: { builder: 'webpack5' },
stories: [
...rootMain.stories,
'../components/**/*.stories.mdx',
'../components/**/*.stories.@(js|jsx|ts|tsx)'
],
addons: [...(rootMain.addons || []) , '@nrwl/react/plugins/storybook'
addons: ['@storybook/addon-essentials' , '@nrwl/react/plugins/storybook'
, 'storybook-addon-swc',
{
@ -691,22 +648,19 @@ exports[`@nrwl/storybook:configuration for other types of projects - Next.js and
`;
exports[`@nrwl/storybook:configuration for other types of projects - Next.js and the swc compiler for TypeScript Storybook configurations should create correct main.ts and tsconfig.json for React apps 1`] = `
"import { rootMain } from '../../../.storybook/main';
import type { StorybookConfig, Options } from '@storybook/core-common';
"import type { StorybookConfig } from '@storybook/core-common';
const config: StorybookConfig = {
...rootMain,
core: { ...rootMain.core, builder: 'webpack5' },
core: { builder: 'webpack5' },
stories: [
...rootMain.stories,
'../src/app/**/*.stories.mdx',
'../src/app/**/*.stories.@(js|jsx|ts|tsx)'
],
addons: [...(rootMain.addons || []) , '@nrwl/react/plugins/storybook'
addons: ['@storybook/addon-essentials' , '@nrwl/react/plugins/storybook'
]
@ -804,22 +758,19 @@ exports[`@nrwl/storybook:configuration for other types of projects - Next.js and
`;
exports[`@nrwl/storybook:configuration for other types of projects - Next.js and the swc compiler for TypeScript Storybook configurations should create correct main.ts and tsconfig.json for React buildable libs 1`] = `
"import { rootMain } from '../../../.storybook/main';
import type { StorybookConfig, Options } from '@storybook/core-common';
"import type { StorybookConfig } from '@storybook/core-common';
const config: StorybookConfig = {
...rootMain,
core: { ...rootMain.core, builder: 'webpack5' },
core: { builder: 'webpack5' },
stories: [
...rootMain.stories,
'../src/lib/**/*.stories.mdx',
'../src/lib/**/*.stories.@(js|jsx|ts|tsx)'
],
addons: [...(rootMain.addons || []) , '@nrwl/react/plugins/storybook'
addons: ['@storybook/addon-essentials' , '@nrwl/react/plugins/storybook'
]
@ -862,22 +813,18 @@ exports[`@nrwl/storybook:configuration for other types of projects - Next.js and
`;
exports[`@nrwl/storybook:configuration for other types of projects - Next.js and the swc compiler for js Storybook configurations should create correct main.js and tsconfig.json for NextJS buildable libs 1`] = `
"const rootMain = require('../../../.storybook/main');
"
module.exports = {
...rootMain,
core: { ...rootMain.core, builder: 'webpack5' },
core: { builder: 'webpack5' },
stories: [
...rootMain.stories,
'../src/lib/**/*.stories.mdx',
'../src/lib/**/*.stories.@(js|jsx|ts|tsx)'
],
addons: [...rootMain.addons , '@nrwl/react/plugins/storybook'
addons: ['@storybook/addon-essentials' , '@nrwl/react/plugins/storybook'
]
@ -917,22 +864,18 @@ exports[`@nrwl/storybook:configuration for other types of projects - Next.js and
`;
exports[`@nrwl/storybook:configuration for other types of projects - Next.js and the swc compiler for js Storybook configurations should create correct main.js and tsconfig.json for NextJS libs 1`] = `
"const rootMain = require('../../../.storybook/main');
"
module.exports = {
...rootMain,
core: { ...rootMain.core, builder: 'webpack5' },
core: { builder: 'webpack5' },
stories: [
...rootMain.stories,
'../src/lib/**/*.stories.mdx',
'../src/lib/**/*.stories.@(js|jsx|ts|tsx)'
],
addons: [...rootMain.addons , '@nrwl/react/plugins/storybook'
addons: ['@storybook/addon-essentials' , '@nrwl/react/plugins/storybook'
]
@ -972,22 +915,18 @@ exports[`@nrwl/storybook:configuration for other types of projects - Next.js and
`;
exports[`@nrwl/storybook:configuration for other types of projects - Next.js and the swc compiler for js Storybook configurations should create correct main.js and tsconfig.json for NextJs apps 1`] = `
"const rootMain = require('../../../.storybook/main');
"
const path = require('path');
module.exports = {
...rootMain,
core: { ...rootMain.core, builder: 'webpack5' },
core: { builder: 'webpack5' },
stories: [
...rootMain.stories,
'../components/**/*.stories.mdx',
'../components/**/*.stories.@(js|jsx|ts|tsx)'
],
addons: [...rootMain.addons , '@nrwl/react/plugins/storybook'
addons: ['@storybook/addon-essentials' , '@nrwl/react/plugins/storybook'
, 'storybook-addon-swc',
{
@ -1034,22 +973,18 @@ exports[`@nrwl/storybook:configuration for other types of projects - Next.js and
`;
exports[`@nrwl/storybook:configuration for other types of projects - Next.js and the swc compiler for js Storybook configurations should create correct main.js and tsconfig.json for React apps 1`] = `
"const rootMain = require('../../../.storybook/main');
"
module.exports = {
...rootMain,
core: { ...rootMain.core, builder: 'webpack5' },
core: { builder: 'webpack5' },
stories: [
...rootMain.stories,
'../src/app/**/*.stories.mdx',
'../src/app/**/*.stories.@(js|jsx|ts|tsx)'
],
addons: [...rootMain.addons , '@nrwl/react/plugins/storybook'
addons: ['@storybook/addon-essentials' , '@nrwl/react/plugins/storybook'
]
@ -1089,22 +1024,18 @@ exports[`@nrwl/storybook:configuration for other types of projects - Next.js and
`;
exports[`@nrwl/storybook:configuration for other types of projects - Next.js and the swc compiler for js Storybook configurations should create correct main.js and tsconfig.json for React apps using the swc compiler 1`] = `
"const rootMain = require('../../../.storybook/main');
"
module.exports = {
...rootMain,
core: { ...rootMain.core, builder: 'webpack5' },
core: { builder: 'webpack5' },
stories: [
...rootMain.stories,
'../src/app/**/*.stories.mdx',
'../src/app/**/*.stories.@(js|jsx|ts|tsx)'
],
addons: [...rootMain.addons , '@nrwl/react/plugins/storybook'
addons: ['@storybook/addon-essentials' , '@nrwl/react/plugins/storybook'
, 'storybook-addon-swc'
]
@ -1144,22 +1075,18 @@ exports[`@nrwl/storybook:configuration for other types of projects - Next.js and
`;
exports[`@nrwl/storybook:configuration for other types of projects - Next.js and the swc compiler for js Storybook configurations should create correct main.js and tsconfig.json for React buildable libs 1`] = `
"const rootMain = require('../../../.storybook/main');
"
module.exports = {
...rootMain,
core: { ...rootMain.core, builder: 'webpack5' },
core: { builder: 'webpack5' },
stories: [
...rootMain.stories,
'../src/lib/**/*.stories.mdx',
'../src/lib/**/*.stories.@(js|jsx|ts|tsx)'
],
addons: [...rootMain.addons , '@nrwl/react/plugins/storybook'
addons: ['@storybook/addon-essentials' , '@nrwl/react/plugins/storybook'
]

261
packages/storybook/src/generators/configuration/configuration.spec.ts
View File

@ -16,7 +16,7 @@ import configurationGenerator from './configuration';
import * as workspaceConfiguration from './test-configs/workspace-conifiguration.json';
describe('@nrwl/storybook:configuration', () => {
xdescribe('basic functionalities', () => {
describe('basic functionalities', () => {
let tree: Tree;
beforeEach(async () => {
@ -99,31 +99,6 @@ describe('@nrwl/storybook:configuration', () => {
).toMatchSnapshot();
});
it('should not update root files after generating them once', async () => {
await configurationGenerator(tree, {
name: 'test-ui-lib',
uiFramework: '@storybook/angular',
});
const newContents = `module.exports = {
stories: [],
addons: ['@storybook/addon-essentials', 'new-addon'],
};
`;
// Setup a new lib
await libraryGenerator(tree, {
name: 'test-ui-lib-2',
});
tree.write('.storybook/main.js', newContents);
await configurationGenerator(tree, {
name: 'test-ui-lib-2',
uiFramework: '@storybook/angular',
});
expect(tree.read('.storybook/main.js', 'utf-8')).toEqual(newContents);
});
it('should update workspace file for react libs', async () => {
await configurationGenerator(tree, {
name: 'test-ui-lib',
@ -317,14 +292,12 @@ describe('@nrwl/storybook:configuration', () => {
uiFramework: '@storybook/angular',
tsConfiguration: true,
});
expect(tree.exists('libs/test-ui-lib-2/.storybook/main.ts')).toBeTruthy();
expect(tree.exists('libs/test-ui-lib/.storybook/main.ts')).toBeTruthy();
expect(
tree.exists('libs/test-ui-lib-2/.storybook/preview.ts')
tree.exists('libs/test-ui-lib/.storybook/preview.ts')
).toBeTruthy();
expect(tree.exists('libs/test-ui-lib-2/.storybook/main.js')).toBeFalsy();
expect(
tree.exists('libs/test-ui-lib-2/.storybook/preview.js')
).toBeFalsy();
expect(tree.exists('libs/test-ui-lib/.storybook/main.js')).toBeFalsy();
expect(tree.exists('libs/test-ui-lib/.storybook/preview.js')).toBeFalsy();
});
it('should add test-storybook target', async () => {
@ -350,7 +323,7 @@ describe('@nrwl/storybook:configuration', () => {
});
describe('for other types of projects - Next.js and the swc compiler', () => {
xdescribe('for js Storybook configurations', () => {
describe('for js Storybook configurations', () => {
let tree: Tree;
beforeAll(async () => {
tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
@ -449,110 +422,6 @@ describe('@nrwl/storybook:configuration', () => {
});
describe('for TypeScript Storybook configurations', () => {
let tree: Tree;
beforeAll(async () => {
tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
writeConfig(tree, workspaceConfiguration);
writeJson(tree, 'apps/nxapp/tsconfig.json', {});
writeJson(tree, 'apps/reapp/tsconfig.json', {});
writeJson(tree, 'libs/nxlib/tsconfig.json', {});
writeJson(tree, 'libs/nxlib-buildable/tsconfig.json', {});
writeJson(tree, 'libs/relib-buildable/tsconfig.json', {});
writeJson(tree, 'apps/reapp-swc/tsconfig.json', {});
// await configurationGenerator(tree, {
// name: 'nxapp',
// uiFramework: '@storybook/react',
// tsConfiguration: true,
// });
// await configurationGenerator(tree, {
// name: 'reapp',
// uiFramework: '@storybook/react',
// tsConfiguration: true,
// });
// await configurationGenerator(tree, {
// name: 'nxlib',
// uiFramework: '@storybook/react',
// tsConfiguration: true,
// });
// await configurationGenerator(tree, {
// name: 'nxlib-buildable',
// uiFramework: '@storybook/react',
// tsConfiguration: true,
// });
// await configurationGenerator(tree, {
// name: 'relib-buildable',
// uiFramework: '@storybook/react',
// tsConfiguration: true,
// });
await configurationGenerator(tree, {
name: 'reapp-swc',
uiFramework: '@storybook/react',
tsConfiguration: true,
});
});
it(`should create correct main.ts and tsconfig.json for NextJs apps`, async () => {
expect(
tree.read('apps/nxapp/.storybook/main.ts', 'utf-8')
).toMatchSnapshot();
expect(
tree.read('apps/nxapp/.storybook/tsconfig.json', 'utf-8')
).toMatchSnapshot();
});
it(`should create correct main.ts and tsconfig.json for React apps`, async () => {
expect(
tree.read('apps/reapp/.storybook/main.ts', 'utf-8')
).toMatchSnapshot();
expect(
tree.read('apps/reapp/.storybook/tsconfig.json', 'utf-8')
).toMatchSnapshot();
});
it(`should create correct main.ts and tsconfig.json for NextJS libs`, async () => {
expect(
tree.read('libs/nxlib/.storybook/main.ts', 'utf-8')
).toMatchSnapshot();
expect(
tree.read('libs/nxlib/.storybook/tsconfig.json', 'utf-8')
).toMatchSnapshot();
});
it(`should create correct main.ts and tsconfig.json for NextJS buildable libs`, async () => {
expect(
tree.read('libs/nxlib-buildable/.storybook/main.ts', 'utf-8')
).toMatchSnapshot();
expect(
tree.read('libs/nxlib-buildable/.storybook/tsconfig.json', 'utf-8')
).toMatchSnapshot();
});
it(`should create correct main.ts and tsconfig.json for React buildable libs`, async () => {
expect(
tree.read('libs/relib-buildable/.storybook/main.ts', 'utf-8')
).toMatchSnapshot();
expect(
tree.read('libs/relib-buildable/.storybook/tsconfig.json', 'utf-8')
).toMatchSnapshot();
});
it.only(`should create correct main.ts and tsconfig.json for React apps using the swc compiler`, async () => {
expect(
tree.read('apps/reapp-swc/.storybook/main.ts', 'utf-8')
).toMatchSnapshot();
expect(
tree.read('apps/reapp-swc/.storybook/tsconfig.json', 'utf-8')
).toMatchSnapshot();
});
});
describe('for Storybook configurations with Vite', () => {
let tree: Tree;
beforeAll(async () => {
tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
@ -566,33 +435,32 @@ describe('@nrwl/storybook:configuration', () => {
await configurationGenerator(tree, {
name: 'nxapp',
uiFramework: '@storybook/react',
bundler: 'vite',
tsConfiguration: true,
});
await configurationGenerator(tree, {
name: 'reapp',
uiFramework: '@storybook/react',
bundler: 'vite',
tsConfiguration: true,
});
await configurationGenerator(tree, {
name: 'nxlib',
uiFramework: '@storybook/react',
bundler: 'vite',
tsConfiguration: true,
});
await configurationGenerator(tree, {
name: 'nxlib-buildable',
uiFramework: '@storybook/react',
bundler: 'vite',
tsConfiguration: true,
});
await configurationGenerator(tree, {
name: 'relib-buildable',
uiFramework: '@storybook/react',
bundler: 'vite',
tsConfiguration: true,
});
await configurationGenerator(tree, {
name: 'reapp-swc',
uiFramework: '@storybook/react',
bundler: 'vite',
tsConfiguration: true,
});
});
@ -656,6 +524,113 @@ describe('@nrwl/storybook:configuration', () => {
).toMatchSnapshot();
});
});
describe('for Storybook configurations with Vite', () => {
let tree: Tree;
beforeAll(async () => {
tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
writeConfig(tree, workspaceConfiguration);
writeJson(tree, 'apps/nxapp/tsconfig.json', {});
writeJson(tree, 'apps/reapp/tsconfig.json', {});
writeJson(tree, 'libs/nxlib/tsconfig.json', {});
writeJson(tree, 'libs/nxlib-buildable/tsconfig.json', {});
writeJson(tree, 'libs/relib-buildable/tsconfig.json', {});
writeJson(tree, 'apps/reapp-swc/tsconfig.json', {});
await configurationGenerator(tree, {
name: 'nxapp',
uiFramework: '@storybook/react',
bundler: 'vite',
tsConfiguration: true,
});
await configurationGenerator(tree, {
name: 'reapp',
uiFramework: '@storybook/react',
bundler: 'vite',
tsConfiguration: true,
});
await configurationGenerator(tree, {
name: 'nxlib',
uiFramework: '@storybook/react',
bundler: 'vite',
tsConfiguration: true,
});
await configurationGenerator(tree, {
name: 'nxlib-buildable',
uiFramework: '@storybook/react',
bundler: 'vite',
});
await configurationGenerator(tree, {
name: 'relib-buildable',
uiFramework: '@storybook/react',
bundler: 'vite',
});
await configurationGenerator(tree, {
name: 'reapp-swc',
uiFramework: '@storybook/react',
bundler: 'vite',
});
});
it(`should create correct main.ts and tsconfig.json for NextJs apps`, async () => {
expect(
tree.read('apps/nxapp/.storybook/main.ts', 'utf-8')
).toMatchSnapshot();
expect(
tree.read('apps/nxapp/.storybook/tsconfig.json', 'utf-8')
).toMatchSnapshot();
});
it(`should create correct main.ts and tsconfig.json for React apps`, async () => {
expect(
tree.read('apps/reapp/.storybook/main.ts', 'utf-8')
).toMatchSnapshot();
expect(
tree.read('apps/reapp/.storybook/tsconfig.json', 'utf-8')
).toMatchSnapshot();
});
it(`should create correct main.ts and tsconfig.json for NextJS libs`, async () => {
expect(
tree.read('libs/nxlib/.storybook/main.ts', 'utf-8')
).toMatchSnapshot();
expect(
tree.read('libs/nxlib/.storybook/tsconfig.json', 'utf-8')
).toMatchSnapshot();
});
it(`should create correct main.js and tsconfig.json for NextJS buildable libs`, async () => {
expect(
tree.read('libs/nxlib-buildable/.storybook/main.js', 'utf-8')
).toMatchSnapshot();
expect(
tree.read('libs/nxlib-buildable/.storybook/tsconfig.json', 'utf-8')
).toMatchSnapshot();
});
it(`should create correct main.js and tsconfig.json for React buildable libs`, async () => {
expect(
tree.read('libs/relib-buildable/.storybook/main.js', 'utf-8')
).toMatchSnapshot();
expect(
tree.read('libs/relib-buildable/.storybook/tsconfig.json', 'utf-8')
).toMatchSnapshot();
});
it(`should create correct main.js and tsconfig.json for React apps using the swc compiler`, async () => {
expect(
tree.read('apps/reapp-swc/.storybook/main.js', 'utf-8')
).toMatchSnapshot();
expect(
tree.read('apps/reapp-swc/.storybook/tsconfig.json', 'utf-8')
).toMatchSnapshot();
});
});
});
});

2
packages/storybook/src/migrations/update-15-7-0/add-addon-essentials-to-all.ts
View File

@ -82,7 +82,7 @@ export default async function (tree: Tree) {
logger.info(
`
Read more about our effort to deprecate the root .storybook folder here:
https://nx.dev/packages/storybook/configuring-storybook
https://nx.dev/packages/storybook/documents/configuring-storybook
`
);