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

feat(storybook): upgrade to Storybook v6.3 support (#6104)

Browse Source
This commit is contained in:
Juri Strumpflohner 2021-06-24 18:25:37 +02:00 committed by GitHub
parent d3ba0caf7c
commit ad9d201013
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 1274 additions and 1013 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
e2e/angular/src/storybook.test.ts
View File

@ -34,7 +34,7 @@ describe('Storybook schematics', () => {
`
module.exports = {
stories: [],
addons: ['@storybook/addon-knobs/register'],
addons: ['@storybook/addon-knobs'],
};
console.log('hi there');

8
package.json
View File

@ -79,10 +79,10 @@
"@rollup/plugin-json": "^4.1.0",
"@rollup/plugin-node-resolve": "7.1.1",
"@schematics/angular": "^12.0.0",
"@storybook/addon-knobs": "6.2.9",
"@storybook/angular": "6.2.9",
"@storybook/core": "6.1.21",
"@storybook/react": "6.2.9",
"@storybook/addon-knobs": "~6.3.0",
"@storybook/angular": "~6.3.0",
"@storybook/core": "~6.3.0",
"@storybook/react": "~6.3.0",
"@svgr/webpack": "^5.4.0",
"@tailwindcss/typography": "^0.4.0",
"@testing-library/react": "11.2.5",

6
packages/storybook/migrations.json
View File

@ -48,6 +48,12 @@
"cli": "nx",
"description": "Update storybook if installed and above 6 but below 6.2.7",
"factory": "./src/migrations/update-11-6-0/update-storybook"
},
"update-12-5-0": {
"version": "12.5.0-beta.5",
"cli": "nx",
"description": "Upgrade Storybook to v6.3",
"factory": "./src/migrations/update-12-5-0/migrate-storybook-6-3"
}
},
"packageJsonUpdates": {

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

@ -86,7 +86,7 @@ describe('@nrwl/storybook:configuration', () => {
const newContents = `module.exports = {
stories: [],
addons: ['@storybook/addon-knobs/register', 'new-addon'],
addons: ['@storybook/addon-knobs', 'new-addon'],
};
`;
// Setup a new lib

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

@ -24,6 +24,8 @@ import { cypressProjectGenerator } from '../cypress-project/cypress-project';
import { StorybookConfigureSchema } from './schema';
import { storybookVersion } from '../../utils/versions';
import { initGenerator } from '../init/init';
import { checkAndCleanWithSemver } from '@nrwl/workspace/src/utilities/version-utils';
import { gte } from 'semver';
export async function configurationGenerator(
tree: Tree,
@ -353,8 +355,10 @@ function readCurrentWorkspaceStorybookVersion(tree: Tree): string {
}
}
if (
workspaceStorybookVersion.startsWith('6') ||
workspaceStorybookVersion.startsWith('^6')
gte(
checkAndCleanWithSemver('@storybook/core', workspaceStorybookVersion),
'6.0.0'
)
) {
workspaceStorybookVersion = '6';
}

2
packages/storybook/src/generators/configuration/root-files/.storybook/main.js
View File

@ -1,4 +1,4 @@
module.exports = {
stories: [],
addons: ['@storybook/addon-knobs/register'],
addons: ['@storybook/addon-knobs'],
};

9
packages/storybook/src/generators/init/__snapshots__/init.spec.ts.snap
View File

@ -7,10 +7,11 @@ Object {
},
"devDependencies": Object {
"@angular/forms": "*",
"@nrwl/storybook": "6.2.9",
"@storybook/addon-knobs": "6.2.9",
"@storybook/angular": "6.2.9",
"@storybook/builder-webpack5": "6.2.9",
"@nrwl/storybook": "~6.3.0",
"@storybook/addon-knobs": "~6.3.0",
"@storybook/angular": "~6.3.0",
"@storybook/builder-webpack5": "~6.3.0",
"@storybook/manager-webpack5": "~6.3.0",
"existing": "1.0.0",
},
"name": "test-name",

7
packages/storybook/src/generators/init/init.ts
View File

@ -56,6 +56,13 @@ function checkDependenciesInstalled(host: Tree, schema: Schema) {
devDependencies['@storybook/builder-webpack5'] = storybookVersion;
}
if (
!packageJson.dependencies['@storybook/manager-webpack5'] &&
!packageJson.devDependencies['@storybook/manager-webpack5']
) {
devDependencies['@storybook/manager-webpack5'] = storybookVersion;
}
if (
!packageJson.dependencies['@angular/forms'] &&
!packageJson.devDependencies['@angular/forms']

203
packages/storybook/src/migrations/update-12-5-0/migrate-storybook-6-3.spec.ts Normal file
View File

@ -0,0 +1,203 @@
import { readJson, Tree, writeJson } from '@nrwl/devkit';
import { createTree, createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing';
import updateStorybookv63 from './migrate-storybook-6-3';
describe('Upgrade to Storybook v6.3', () => {
let tree: Tree;
beforeEach(async () => {
tree = createTreeWithEmptyWorkspace();
});
describe('migrate addon-knobs registration', () => {
beforeEach(() => {
writeJson(tree, 'workspace.json', {
projects: {
['home-ui-react']: {
projectType: 'library',
root: 'libs/home/ui-react',
sourceRoot: 'libs/home/ui-react/src',
targets: {
storybook: {
builder: '@nrwl/storybook:storybook',
options: {
uiFramework: '@storybook/react',
port: 4400,
config: {
configFolder: 'libs/home/ui-react/.storybook',
},
},
},
},
},
['home-ui-angular']: {
projectType: 'library',
root: 'libs/home/ui-angular',
sourceRoot: 'libs/home/ui-angular/src',
targets: {
storybook: {
builder: '@nrwl/storybook:storybook',
options: {
uiFramework: '@storybook/angular',
port: 4400,
config: {
configFolder: 'libs/home/ui-angular/.storybook',
},
},
},
},
},
},
});
const mainJSFile = `
module.exports = {
stories: [],
addons: ['@storybook/addon-knobs/register'],
};
`;
tree.write('.storybook/main.js', mainJSFile);
tree.write('libs/home/ui-angular/.storybook/main.js', mainJSFile);
tree.write('libs/home/ui-react/.storybook/main.js', mainJSFile);
writeJson(tree, 'package.json', {
devDependencies: {
'@storybook/addon-knobs': '6.3.0',
},
});
});
it('should update the main config files to fix the addon-knobs registration', async () => {
await updateStorybookv63(tree);
const globalMainJS = tree.read('.storybook/main.js', 'utf-8');
const angularMainJS = tree.read(
'libs/home/ui-angular/.storybook/main.js',
'utf-8'
);
const reactMainJS = tree.read(
'libs/home/ui-react/.storybook/main.js',
'utf-8'
);
const regex = /@storybook\/addon-knobs\/register/;
expect(regex.test(globalMainJS)).toBeFalsy();
expect(regex.test(angularMainJS)).toBeFalsy();
expect(regex.test(reactMainJS)).toBeFalsy();
const correctRegistrationRegex = /@storybook\/addon-knobs/;
expect(correctRegistrationRegex.test(globalMainJS)).toBeTruthy();
expect(correctRegistrationRegex.test(angularMainJS)).toBeTruthy();
expect(correctRegistrationRegex.test(reactMainJS)).toBeTruthy();
});
});
describe('package.json version upgrades', () => {
it('should update storybook packages', async () => {
writeJson(tree, 'package.json', {
devDependencies: {
'@storybook/angular': '^6.0.0',
'@storybook/react': '^6.0.0',
'@storybook/addon-knobs': '^6.0.0',
'@storybook/addon-controls': '^6.0.0',
},
});
await updateStorybookv63(tree);
expect(
readJson(tree, 'package.json').devDependencies['@storybook/angular']
).toBe('~6.3.0');
expect(
readJson(tree, 'package.json').devDependencies['@storybook/react']
).toBe('~6.3.0');
expect(
readJson(tree, 'package.json').devDependencies['@storybook/addon-knobs']
).toBe('~6.3.0');
expect(
readJson(tree, 'package.json').devDependencies[
'@storybook/addon-controls'
]
).toBe('~6.3.0');
});
it('should install the webpack5 packages when Angular 12 is being used', async () => {
writeJson(tree, 'package.json', {
dependencies: {
'@angular/core': '12.0.0',
},
devDependencies: {
'@storybook/angular': '~6.0.0',
'@storybook/react': '^6.0.0',
'@storybook/addon-knobs': '^6.0.0',
'@storybook/addon-controls': '^6.0.0',
},
});
await updateStorybookv63(tree);
expect(
readJson(tree, 'package.json').devDependencies[
'@storybook/builder-webpack5'
]
).toBe('~6.3.0');
expect(
readJson(tree, 'package.json').devDependencies[
'@storybook/manager-webpack5'
]
).toBe('~6.3.0');
});
it('should not install the Storybook Webpack 5 deps if not Angular 12 is being used', async () => {
writeJson(tree, 'package.json', {
dependencies: {
'@angular/core': '11.0.0',
},
devDependencies: {
'@storybook/angular': '^6.0.0',
'@storybook/react': '^6.0.0',
'@storybook/addon-knobs': '^6.0.0',
'@storybook/addon-controls': '^6.0.0',
},
});
await updateStorybookv63(tree);
expect(
readJson(tree, 'package.json').devDependencies[
'@storybook/builder-webpack5'
]
).toBeUndefined();
expect(
readJson(tree, 'package.json').devDependencies[
'@storybook/manager-webpack5'
]
).toBeUndefined();
});
it('should not update storybook packages that are below v6.x', async () => {
writeJson(tree, 'package.json', {
devDependencies: {
'@storybook/angular': '^5.3.1',
'@storybook/react': '^5.3.1',
'@storybook/addon-knobs': '^5.3.1',
'@storybook/addon-controls': '^5.3.1',
},
});
await updateStorybookv63(tree);
expect(
readJson(tree, 'package.json').devDependencies['@storybook/angular']
).toBe('^5.3.1');
expect(
readJson(tree, 'package.json').devDependencies['@storybook/react']
).toBe('^5.3.1');
expect(
readJson(tree, 'package.json').devDependencies['@storybook/addon-knobs']
).toBe('^5.3.1');
expect(
readJson(tree, 'package.json').devDependencies[
'@storybook/addon-controls'
]
).toBe('^5.3.1');
});
});
});

159
packages/storybook/src/migrations/update-12-5-0/migrate-storybook-6-3.ts Normal file
View File

@ -0,0 +1,159 @@
import {
formatFiles,
getProjects,
joinPathFragments,
logger,
readJson,
Tree,
updateJson,
} from '@nrwl/devkit';
import { checkAndCleanWithSemver } from '@nrwl/workspace/src/utilities/version-utils';
import { gte, lt } from 'semver';
let needsInstall = false;
const targetStorybookVersion = '6.3.0';
function getPackageVersion(json, packageName: string) {
let packageVersion = json.dependencies[packageName];
if (!packageVersion) {
packageVersion = json.devDependencies[packageName];
}
if (packageVersion) {
return checkAndCleanWithSemver(packageName, packageVersion);
} else {
return null;
}
}
/**
* Upgrades to Storybook v6.3 (if currently a 6.x version is installed).
* Also for Angular projects makes sure the `@storybook/builder-webpack5` and `@storybook/manager-webpack5`
* are installed
*/
function upgradeStorybook63(tree: Tree) {
updateJson(tree, 'package.json', (json) => {
json.dependencies = json.dependencies || {};
json.devDependencies = json.devDependencies || {};
function updatePackageSection(
storybookPackageName: string,
packageSection: 'dependencies' | 'devDependencies'
) {
if (json[packageSection][storybookPackageName]) {
const version = checkAndCleanWithSemver(
storybookPackageName,
json[packageSection][storybookPackageName]
);
if (gte(version, '6.0.0') && lt(version, targetStorybookVersion)) {
json[packageSection][
storybookPackageName
] = `~${targetStorybookVersion}`;
needsInstall = true;
}
}
}
const storybookPackages = [
'@storybook/angular',
'@storybook/react',
'@storybook/addon-knobs',
'@storybook/addon-controls',
];
storybookPackages.forEach((storybookPackageName) => {
updatePackageSection(storybookPackageName, 'dependencies');
updatePackageSection(storybookPackageName, 'devDependencies');
});
// check if Angular & Angular 12 => install Storybook Webpack 5 deps
const storybookAngularVersion = getPackageVersion(
json,
'@storybook/angular'
);
if (storybookAngularVersion && gte(storybookAngularVersion, '6.0.0')) {
const angularVersion = getPackageVersion(json, '@angular/core');
if (angularVersion && gte(angularVersion, '12.0.0')) {
json.devDependencies[
'@storybook/builder-webpack5'
] = `~${targetStorybookVersion}`;
json.devDependencies[
'@storybook/manager-webpack5'
] = `~${targetStorybookVersion}`;
needsInstall = true;
}
}
return json;
});
}
function replaceStorybookAddonKnobRegistration(
tree: Tree,
storybookMainJSpath
) {
let storybookMainContent = tree.read(storybookMainJSpath, 'utf-8');
storybookMainContent = storybookMainContent.replace(
/'(@storybook\/addon-knobs)\/register'/g,
"'$1'"
);
tree.write(storybookMainJSpath, storybookMainContent);
}
function migrateKnobsRegistration(tree: Tree) {
const projects = getProjects(tree);
// we only need to migrate if we are on Storybook v6.3
const json = readJson(tree, 'package.json');
const storybookKnobVersion = getPackageVersion(
json,
'@storybook/addon-knobs'
);
if (storybookKnobVersion && gte(storybookKnobVersion, '6.3.0')) {
// migrate the root config
const rootStoryMainFilePath = `.storybook/main.js`;
if (tree.exists(rootStoryMainFilePath)) {
replaceStorybookAddonKnobRegistration(tree, rootStoryMainFilePath);
}
projects.forEach((projConfig, projName) => {
const targets = projConfig.targets;
const storybookMainJS = joinPathFragments(
projConfig.root,
'.storybook/main.js'
);
const storybookExecutor = Object.keys(targets).find(
(x) => targets[x].executor === '@nrwl/storybook:storybook'
);
const hasStorybookConfig =
storybookExecutor && tree.exists(storybookMainJS);
if (!hasStorybookConfig) {
return;
}
replaceStorybookAddonKnobRegistration(tree, storybookMainJS);
});
}
}
export default async function updateStorybookv63(tree: Tree) {
upgradeStorybook63(tree);
// we only need to migrate knobs if the current storybook version is 6.3 or higher
migrateKnobsRegistration(tree);
await formatFiles(tree);
if (needsInstall) {
logger.info(
'Please make sure to run npm install or yarn install to get the latest packages added by this migration'
);
}
}

2
packages/storybook/src/utils/versions.ts
View File

@ -1,5 +1,5 @@
export const nxVersion = '*';
export const storybookVersion = '6.2.9';
export const storybookVersion = '~6.3.0';
export const babelCoreVersion = '7.12.13';
export const babelLoaderVersion = '8.1.0';
export const babelPresetTypescriptVersion = '7.12.13';

1879
yarn.lock
View File

File diff suppressed because it is too large Load Diff