Skip to content

Commit

Permalink
fix(storybook): make v7 generator ignore uiFramework (nrwl#15023)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mandarini
mandarini authored Feb 16, 2023
1 parent 8748660 commit a364dab
Show file tree
Hide file tree
Showing 6 changed files with 140 additions and 53 deletions.
2 changes: 1 addition & 1 deletion docs/generated/packages/storybook/generators/configuration.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@
},
"storybook7UiFramework": {
"type": "string",
"description": "Storybook UI Framework to use.",
"description": "Storybook UI Framework to use, for Storybook version 7.",
"enum": [
"@storybook/angular",
"@storybook/html-webpack5",
Expand Down
112 changes: 108 additions & 4 deletions packages/storybook/src/generators/configuration/__snapshots__/configuration-v7.spec.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -443,6 +443,114 @@ 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/reapp/.storybook/" 1`] = `
"const config = {
stories: [
'../src/app/**/*.stories.@(js|jsx|ts|tsx|mdx)'
],
addons: ['@storybook/addon-essentials'
],
framework: {
name: '@storybook/react-vite',
options: {
builder: {
viteConfigPath: 'apps/reapp/vite.config.ts',
},
},
},
};
export default 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 Storybook v7 generate Storybook configuration for all types of projects should contain the correct configuration in "apps/reapp/.storybook/" 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 Storybook v7 generate Storybook configuration for all types of projects should contain the correct configuration in "apps/reappw/.storybook/" 1`] = `
"const config = {
stories: [
'../src/app/**/*.stories.@(js|jsx|ts|tsx|mdx)'
],
addons: ['@storybook/addon-essentials' , '@nrwl/react/plugins/storybook'
],
framework: {
name: '@storybook/react-webpack5',
options: {
},
},
};
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
"
`;

exports[`@nrwl/storybook:configuration for Storybook v7 generate Storybook configuration for all types of projects should contain the correct configuration in "apps/reappw/.storybook/" 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 Storybook v7 generate Storybook configuration for all types of projects should contain the correct configuration in "apps/wv1/.storybook/" 1`] = `
"const config = {
stories: [
Expand Down Expand Up @@ -1704,7 +1812,6 @@ Map {
"options": Object {
"configDir": "apps/reapp/.storybook",
"outputDir": "dist/storybook/reapp",
"uiFramework": "@storybook/react",
},
"outputs": Array [
"{options.outputDir}",
Expand Down Expand Up @@ -1748,7 +1855,6 @@ Map {
"options": Object {
"configDir": "apps/reapp/.storybook",
"port": 4400,
"uiFramework": "@storybook/react",
},
},
"test": Object {
Expand Down Expand Up @@ -1864,7 +1970,6 @@ Map {
"options": Object {
"configDir": "apps/reappw/.storybook",
"outputDir": "dist/storybook/reappw",
"uiFramework": "@storybook/react",
},
"outputs": Array [
"{options.outputDir}",
Expand Down Expand Up @@ -1908,7 +2013,6 @@ Map {
"options": Object {
"configDir": "apps/reappw/.storybook",
"port": 4400,
"uiFramework": "@storybook/react",
},
},
"test": Object {
Expand Down
49 changes: 16 additions & 33 deletions packages/storybook/src/generators/configuration/configuration-v7.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ describe('@nrwl/storybook:configuration for Storybook v7', () => {
it('should generate TypeScript Configuration files', async () => {
await configurationGenerator(tree, {
name: 'test-ui-lib',
uiFramework: '@storybook/angular',
uiFramework: '@storybook/react', // it's wrong on purpose to verify that it's being ignored
standaloneConfig: false,
tsConfiguration: true,
storybook7betaConfiguration: true,
Expand All @@ -66,40 +66,10 @@ describe('@nrwl/storybook:configuration for Storybook v7', () => {
).toBeTruthy();
});

it('should not update root files after generating them once', async () => {
await configurationGenerator(tree, {
name: 'test-ui-lib',
uiFramework: '@storybook/angular',
standaloneConfig: false,
storybook7betaConfiguration: true,
storybook7UiFramework: '@storybook/angular',
});

const newContents = `module.exports = {
stories: [],
addons: ['@storybook/addon-essentials', 'new-addon'],
};
`;
await libraryGenerator(tree, {
name: 'test-ui-lib-2',
standaloneConfig: false,
});

tree.write('.storybook/main.js', newContents);
await configurationGenerator(tree, {
name: 'test-ui-lib-2',
uiFramework: '@storybook/angular',
standaloneConfig: false,
storybook7betaConfiguration: true,
});

expect(tree.read('.storybook/main.js', 'utf-8')).toEqual(newContents);
});

it('should update `tsconfig.lib.json` file', async () => {
await configurationGenerator(tree, {
name: 'test-ui-lib',
uiFramework: '@storybook/react',
uiFramework: '@storybook/angular', // it's wrong on purpose to verify that it's being ignored
standaloneConfig: false,
storybook7betaConfiguration: true,
storybook7UiFramework: '@storybook/react-webpack5',
Expand Down Expand Up @@ -159,7 +129,7 @@ describe('@nrwl/storybook:configuration for Storybook v7', () => {

await configurationGenerator(tree, {
name: 'test-ui-lib2',
uiFramework: '@storybook/react',
uiFramework: '@storybook/angular', // it's wrong on purpose to verify that it's being ignored
standaloneConfig: false,
storybook7betaConfiguration: true,
storybook7UiFramework: '@storybook/react-webpack5',
Expand Down Expand Up @@ -273,6 +243,13 @@ describe('@nrwl/storybook:configuration for Storybook v7', () => {
tree.write('apps/reapp/vite.config.ts', 'export default {}');
tree.write('apps/wv1/vite.config.custom.ts', 'export default {}');

await configurationGenerator(tree, {
name: 'reapp',
tsConfiguration: false,
uiFramework: '@storybook/react',
storybook7betaConfiguration: true,
storybook7UiFramework: '@storybook/react-vite',
});
await configurationGenerator(tree, {
name: 'main-vite',
tsConfiguration: false,
Expand All @@ -293,6 +270,12 @@ describe('@nrwl/storybook:configuration for Storybook v7', () => {
storybook7betaConfiguration: true,
storybook7UiFramework: '@storybook/react-webpack5',
});
await configurationGenerator(tree, {
name: 'reappw',
uiFramework: '@storybook/react',
storybook7betaConfiguration: true,
storybook7UiFramework: '@storybook/react-webpack5',
});
await configurationGenerator(tree, {
name: 'react-rollup',
uiFramework: '@storybook/react',
Expand Down
17 changes: 9 additions & 8 deletions packages/storybook/src/generators/configuration/configuration.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,10 +132,13 @@ export async function configurationGenerator(
}
}

// If we're on Storybook 7, ignore schema.uiFramework
const uiFrameworkUsed = schema.storybook7betaConfiguration
? schema.storybook7UiFramework
: schema.uiFramework;

const initTask = initGenerator(tree, {
uiFramework: schema.storybook7betaConfiguration
? schema.storybook7UiFramework
: schema.uiFramework,
uiFramework: uiFrameworkUsed,
bundler: schema.bundler,
storybook7betaConfiguration: schema.storybook7betaConfiguration,
});
Expand All @@ -144,9 +147,7 @@ export async function configurationGenerator(
createProjectStorybookDir(
tree,
schema.name,
schema.storybook7betaConfiguration
? schema.storybook7UiFramework
: schema.uiFramework,
uiFrameworkUsed,
schema.js,
schema.tsConfiguration,
root,
Expand All @@ -166,13 +167,13 @@ export async function configurationGenerator(
addBuildStorybookToCacheableOperations(tree);
addStorybookToNamedInputs(tree);

if (schema.uiFramework === '@storybook/angular') {
if (uiFrameworkUsed === '@storybook/angular') {
addAngularStorybookTask(tree, schema.name, schema.configureTestRunner);
} else {
addStorybookTask(
tree,
schema.name,
schema.uiFramework,
uiFrameworkUsed,
schema.configureTestRunner,
schema.storybook7betaConfiguration
);
Expand Down
2 changes: 1 addition & 1 deletion packages/storybook/src/generators/configuration/schema.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@
},
"storybook7UiFramework": {
"type": "string",
"description": "Storybook UI Framework to use.",
"description": "Storybook UI Framework to use, for Storybook version 7.",
"enum": [
"@storybook/angular",
"@storybook/html-webpack5",
Expand Down
11 changes: 5 additions & 6 deletions packages/storybook/src/generators/configuration/util-functions.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,6 @@ export function addStorybookTask(
projectConfig.targets['storybook'] = {
executor: '@nrwl/storybook:storybook',
options: {
uiFramework,
port: DEFAULT_PORT,
configDir: `${projectConfig.root}/.storybook`,
},
Expand All @@ -58,7 +57,6 @@ export function addStorybookTask(
executor: '@nrwl/storybook:build',
outputs: ['{options.outputDir}'],
options: {
uiFramework,
outputDir: joinPathFragments('dist/storybook', projectName),
configDir: `${projectConfig.root}/.storybook`,
},
Expand All @@ -69,9 +67,9 @@ export function addStorybookTask(
},
};

if (usesV7) {
delete projectConfig.targets['storybook'].options.uiFramework;
delete projectConfig.targets['build-storybook'].options.uiFramework;
if (!usesV7) {
projectConfig.targets['storybook'].options.uiFramework = uiFramework;
projectConfig.targets['build-storybook'].options.uiFramework = uiFramework;
}

if (configureTestRunner === true) {
Expand Down Expand Up @@ -174,7 +172,8 @@ export function configureTsProjectConfig(
'**/*.stories.ts',
'**/*.stories.js',
...(schema.uiFramework === '@storybook/react' ||
schema.uiFramework === '@storybook/react-native'
schema.uiFramework === '@storybook/react-native' ||
schema.storybook7UiFramework?.startsWith('@storybook/react')
? ['**/*.stories.jsx', '**/*.stories.tsx']
: []),
];
Expand Down

0 comments on commit a364dab

Please sign in to comment.