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

feat(storybook): v7 mainjs new format and remove root config (#14777)

Browse Source
This commit is contained in:
Katerina Skroumpelou 2023-02-03 12:13:59 +02:00 committed by GitHub
parent 0f5d2c3530
commit ff3cf720af
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 78 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

150
packages/storybook/src/generators/configuration/__snapshots__/configuration-v7.spec.ts.snap
View File

@ -1,16 +1,13 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`@nrwl/storybook:configuration for Storybook v7 basic functionalities should generate TS config for project if root config is TS 1`] = `
"import { rootMain } from '../../../.storybook/main';
import type { StorybookConfig, Options } from '@storybook/core-common';
"import type { StorybookConfig } from '@storybook/angular';
const config: StorybookConfig = {
...rootMain,
stories: [
...rootMain.stories,
'../**/*.stories.@(js|jsx|ts|tsx|mdx)' ],
addons: [...(rootMain.addons || [])
addons: ['@storybook/addon-essentials'
],
framework: {
@ -21,7 +18,7 @@ const config: StorybookConfig = {
},
};
module.exports = config;
export default config;
// To customize your webpack configuration you can use the webpackFinal field.
@ -103,15 +100,7 @@ Object {
}
`;
exports[`@nrwl/storybook:configuration for Storybook v7 basic functionalities should generate TypeScript Configuration files 2`] = `
"import type { StorybookConfig } from '@storybook/core-common';
export const rootMain: StorybookConfig = {
stories: [],
addons: ['@storybook/addon-essentials']
};
"
`;
exports[`@nrwl/storybook:configuration for Storybook v7 basic functionalities should generate TypeScript Configuration files 2`] = `null`;
exports[`@nrwl/storybook:configuration for Storybook v7 basic functionalities should generate TypeScript Configuration files 3`] = `
"{
@ -135,16 +124,13 @@ exports[`@nrwl/storybook:configuration for Storybook v7 basic functionalities sh
`;
exports[`@nrwl/storybook:configuration for Storybook v7 basic functionalities should generate TypeScript Configuration files 4`] = `
"import { rootMain } from '../../../.storybook/main';
import type { StorybookConfig, Options } from '@storybook/core-common';
"import type { StorybookConfig } from '@storybook/angular';
const config: StorybookConfig = {
...rootMain,
stories: [
...rootMain.stories,
'../**/*.stories.@(js|jsx|ts|tsx|mdx)' ],
addons: [...(rootMain.addons || [])
addons: ['@storybook/addon-essentials'
],
framework: {
@ -155,7 +141,7 @@ const config: StorybookConfig = {
},
};
module.exports = config;
export default config;
// To customize your webpack configuration you can use the webpackFinal field.
@ -191,16 +177,12 @@ exports[`@nrwl/storybook:configuration for Storybook v7 basic functionalities sh
`;
exports[`@nrwl/storybook:configuration for Storybook v7 generate Storybook configuration for all types of projects should contain the correct configuration in "apps/main-vite/.storybook/" 1`] = `
"const rootMain = require('../../../.storybook/main');
module.exports = {
...rootMain,
"const config = {
stories: [
...rootMain.stories,
'../src/app/**/*.stories.@(js|jsx|ts|tsx|mdx)'
],
addons: [...rootMain.addons
addons: ['@storybook/addon-essentials'
],
framework: {
@ -215,6 +197,9 @@ module.exports = {
},
};
export default config;
// To customize your Vite configuration you can use the viteFinal field.
@ -248,16 +233,14 @@ exports[`@nrwl/storybook:configuration for Storybook v7 generate Storybook confi
`;
exports[`@nrwl/storybook:configuration for Storybook v7 generate Storybook configuration for all types of projects should contain the correct configuration in "apps/main-vite-ts/.storybook/" 1`] = `
"const rootMain = require('../../../.storybook/main');
"import type { StorybookConfig } from '@storybook/react-vite';
module.exports = {
...rootMain,
const config: StorybookConfig = {
stories: [
...rootMain.stories,
'../src/app/**/*.stories.@(js|jsx|ts|tsx|mdx)'
],
addons: [...rootMain.addons
addons: ['@storybook/addon-essentials'
],
framework: {
@ -272,6 +255,9 @@ module.exports = {
},
};
export default config;
// To customize your Vite configuration you can use the viteFinal field.
@ -299,22 +285,19 @@ exports[`@nrwl/storybook:configuration for Storybook v7 generate Storybook confi
\\"../src/**/*.stories.jsx\\",
\\"../src/**/*.stories.tsx\\",
\\"../src/**/*.stories.mdx\\",
\\"*.ts\\",
\\"*.js\\"]
}
"
`;
exports[`@nrwl/storybook:configuration for Storybook v7 generate Storybook configuration for all types of projects should contain the correct configuration in "apps/main-webpack/.storybook/" 1`] = `
"const rootMain = require('../../../.storybook/main');
module.exports = {
...rootMain,
"const config = {
stories: [
...rootMain.stories,
'../src/app/**/*.stories.@(js|jsx|ts|tsx|mdx)'
],
addons: [...rootMain.addons , '@nrwl/react/plugins/storybook'
addons: ['@storybook/addon-essentials' , '@nrwl/react/plugins/storybook'
],
framework: {
@ -325,6 +308,9 @@ module.exports = {
},
};
export default config;
// To customize your webpack configuration you can use the webpackFinal field.
// Check https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config
// and https://nx.dev/packages/storybook/documents/custom-builder-configs
@ -358,16 +344,12 @@ exports[`@nrwl/storybook:configuration for Storybook v7 generate Storybook confi
`;
exports[`@nrwl/storybook:configuration for Storybook v7 generate Storybook configuration for all types of projects should contain the correct configuration in "apps/nextapp/.storybook/" 1`] = `
"const rootMain = require('../../../.storybook/main');
module.exports = {
...rootMain,
"const config = {
stories: [
...rootMain.stories,
'../components/**/*.stories.@(js|jsx|ts|tsx|mdx)'
],
addons: [...rootMain.addons
addons: ['@storybook/addon-essentials'
],
framework: {
@ -378,6 +360,9 @@ module.exports = {
},
};
export default config;
// To customize your webpack configuration you can use the webpackFinal field.
// Check https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config
// and https://nx.dev/packages/storybook/documents/custom-builder-configs
@ -407,16 +392,12 @@ exports[`@nrwl/storybook:configuration for Storybook v7 generate Storybook confi
`;
exports[`@nrwl/storybook:configuration for Storybook v7 generate Storybook configuration for all types of projects should contain the correct configuration in "apps/react-swc/.storybook/" 1`] = `
"const rootMain = require('../../../.storybook/main');
module.exports = {
...rootMain,
"const config = {
stories: [
...rootMain.stories,
'../src/app/**/*.stories.@(js|jsx|ts|tsx|mdx)'
],
addons: [...rootMain.addons , '@nrwl/react/plugins/storybook'
addons: ['@storybook/addon-essentials' , '@nrwl/react/plugins/storybook'
, 'storybook-addon-swc'
],
framework: {
@ -427,6 +408,9 @@ module.exports = {
},
};
export default config;
// To customize your webpack configuration you can use the webpackFinal field.
// Check https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config
// and https://nx.dev/packages/storybook/documents/custom-builder-configs
@ -460,16 +444,12 @@ exports[`@nrwl/storybook:configuration for Storybook v7 generate Storybook confi
`;
exports[`@nrwl/storybook:configuration for Storybook v7 generate Storybook configuration for all types of projects should contain the correct configuration in "apps/wv1/.storybook/" 1`] = `
"const rootMain = require('../../../.storybook/main');
module.exports = {
...rootMain,
"const config = {
stories: [
...rootMain.stories,
'../src/app/**/*.stories.@(js|jsx|ts|tsx|mdx)'
],
addons: [...rootMain.addons
addons: ['@storybook/addon-essentials'
],
framework: {
@ -484,6 +464,9 @@ module.exports = {
},
};
export default config;
// To customize your Vite configuration you can use the viteFinal field.
@ -513,16 +496,12 @@ exports[`@nrwl/storybook:configuration for Storybook v7 generate Storybook confi
`;
exports[`@nrwl/storybook:configuration for Storybook v7 generate Storybook configuration for all types of projects should contain the correct configuration in "apps/ww1/.storybook/" 1`] = `
"const rootMain = require('../../../.storybook/main');
module.exports = {
...rootMain,
"const config = {
stories: [
...rootMain.stories,
'../src/app/**/*.stories.@(js|jsx|ts|tsx|mdx)'
],
addons: [...rootMain.addons
addons: ['@storybook/addon-essentials'
],
framework: {
@ -533,6 +512,9 @@ module.exports = {
},
};
export default config;
// To customize your webpack configuration you can use the webpackFinal field.
// Check https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config
// and https://nx.dev/packages/storybook/documents/custom-builder-configs
@ -562,16 +544,12 @@ exports[`@nrwl/storybook:configuration for Storybook v7 generate Storybook confi
`;
exports[`@nrwl/storybook:configuration for Storybook v7 generate Storybook configuration for all types of projects should contain the correct configuration in "libs/react-rollup/.storybook/" 1`] = `
"const rootMain = require('../../../.storybook/main');
module.exports = {
...rootMain,
"const config = {
stories: [
...rootMain.stories,
'../src/lib/**/*.stories.@(js|jsx|ts|tsx|mdx)'
],
addons: [...rootMain.addons , '@nrwl/react/plugins/storybook'
addons: ['@storybook/addon-essentials' , '@nrwl/react/plugins/storybook'
],
framework: {
@ -582,6 +560,9 @@ module.exports = {
},
};
export default config;
// To customize your webpack configuration you can use the webpackFinal field.
// Check https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config
// and https://nx.dev/packages/storybook/documents/custom-builder-configs
@ -615,16 +596,12 @@ exports[`@nrwl/storybook:configuration for Storybook v7 generate Storybook confi
`;
exports[`@nrwl/storybook:configuration for Storybook v7 generate Storybook configuration for all types of projects should contain the correct configuration in "libs/react-vite/.storybook/" 1`] = `
"const rootMain = require('../../../.storybook/main');
module.exports = {
...rootMain,
"const config = {
stories: [
...rootMain.stories,
'../src/lib/**/*.stories.@(js|jsx|ts|tsx|mdx)'
],
addons: [...rootMain.addons
addons: ['@storybook/addon-essentials'
],
framework: {
@ -639,6 +616,9 @@ module.exports = {
},
};
export default config;
// To customize your Vite configuration you can use the viteFinal field.

4
packages/storybook/src/generators/configuration/configuration.ts
View File

@ -159,7 +159,9 @@ export async function configurationGenerator(
viteConfigFilePath
);
} else {
createRootStorybookDir(tree, schema.js, schema.tsConfiguration);
if (!schema.storybook7betaConfiguration) {
createRootStorybookDir(tree, schema.js, schema.tsConfiguration);
}
createProjectStorybookDir(
tree,
schema.name,

11
packages/storybook/src/generators/configuration/project-files-7-ts/.storybook/main.ts__tmpl__
View File

@ -1,15 +1,12 @@
<% if (!isRootProject){ %>import { rootMain } from '<%= offsetFromRoot %>../.storybook/<%= rootMainName %>';<% } %>
<% if (isRootProject){ %>import { rootMain } from './main.root';<% } %>
import type { StorybookConfig, Options } from '@storybook/core-common';
import type { StorybookConfig } from '<%= uiFramework %>';
const config: StorybookConfig = {
...rootMain,
stories: [
...rootMain.stories,<% if(uiFramework === '@storybook/angular' && projectType === 'library') { %>
<% if(uiFramework === '@storybook/angular' && projectType === 'library') { %>
'../**/*.stories.@(js|jsx|ts|tsx|mdx)' <% } else { %>
'../<%= projectDirectory %>/**/*.stories.@(js|jsx|ts|tsx|mdx)'
<% } %>],
addons: [...(rootMain.addons || []) <% if(uiFramework === '@storybook/react-webpack5') { %>, '@nrwl/react/plugins/storybook' <% } %><% if(uiFramework === '@storybook/react-native') { %>, '@storybook/addon-ondevice-actions', '@storybook/addon-ondevice-backgrounds', '@storybook/addon-ondevice-controls', '@storybook/addon-ondevice-notes' <% } %>
addons: ['@storybook/addon-essentials' <% if(uiFramework === '@storybook/react-webpack5') { %>, '@nrwl/react/plugins/storybook' <% } %><% if(uiFramework === '@storybook/react-native') { %>, '@storybook/addon-ondevice-actions', '@storybook/addon-ondevice-backgrounds', '@storybook/addon-ondevice-controls', '@storybook/addon-ondevice-notes' <% } %>
<% if(usesSwc) { %>, 'storybook-addon-swc' <% } %>
],
framework: {
@ -24,7 +21,7 @@ const config: StorybookConfig = {
},
};
module.exports = config;
export default config;
<% if(!usesVite) { %>
// To customize your webpack configuration you can use the webpackFinal field.

13
packages/storybook/src/generators/configuration/project-files-7/.storybook/main.js__tmpl__
View File

@ -1,14 +1,10 @@
<% if (!isRootProject){ %>const rootMain = require('<%= offsetFromRoot %>../.storybook/<%= rootMainName %>');<% } %>
<% if (isRootProject){ %>const rootMain = require('./main.root');<% } %>
module.exports = {
...rootMain,
const config = {
stories: [
...rootMain.stories,<% if(uiFramework === '@storybook/angular' && projectType === 'library') { %>
<% if(uiFramework === '@storybook/angular' && projectType === 'library') { %>
'../**/*.stories.@(js|jsx|ts|tsx|mdx)' <% } else { %>
'../<%= projectDirectory %>/**/*.stories.@(js|jsx|ts|tsx|mdx)'
<% } %>],
addons: [...rootMain.addons <% if(uiFramework === '@storybook/react-webpack5') { %>, '@nrwl/react/plugins/storybook' <% } %><% if(uiFramework === '@storybook/react-native') { %>, '@storybook/addon-ondevice-actions', '@storybook/addon-ondevice-backgrounds', '@storybook/addon-ondevice-controls', '@storybook/addon-ondevice-notes' <% } %>
addons: ['@storybook/addon-essentials' <% if(uiFramework === '@storybook/react-webpack5') { %>, '@nrwl/react/plugins/storybook' <% } %><% if(uiFramework === '@storybook/react-native') { %>, '@storybook/addon-ondevice-actions', '@storybook/addon-ondevice-backgrounds', '@storybook/addon-ondevice-controls', '@storybook/addon-ondevice-notes' <% } %>
<% if(usesSwc) { %>, 'storybook-addon-swc' <% } %>
],
framework: {
@ -22,6 +18,9 @@ module.exports = {
},
},
};
export default config;
<% if(!usesVite) { %>
// To customize your webpack configuration you can use the webpackFinal field.
// Check https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config