@storybook/cli 6.4.0-beta.2 → 6.4.0-beta.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/automigrate/fixes/angular12.js +79 -0
- package/dist/cjs/automigrate/fixes/cra5.js +79 -0
- package/dist/cjs/automigrate/fixes/index.js +33 -0
- package/dist/cjs/automigrate/fixes/mainjsFramework.js +89 -0
- package/dist/cjs/automigrate/fixes/webpack5.js +156 -0
- package/dist/cjs/automigrate/helpers/getStorybookConfiguration.js +27 -0
- package/dist/cjs/automigrate/helpers/getStorybookInfo.js +94 -0
- package/dist/cjs/automigrate/index.js +72 -0
- package/dist/cjs/automigrate/types.js +1 -0
- package/dist/cjs/frameworks/web-components/js/Button.js +1 -1
- package/dist/cjs/frameworks/web-components/ts/Button.ts +1 -1
- package/dist/cjs/generate.js +11 -2
- package/dist/cjs/generators/ANGULAR/index.js +1 -1
- package/dist/cjs/generators/AURELIA/index.js +1 -1
- package/dist/cjs/generators/REACT_NATIVE/index.js +2 -2
- package/dist/cjs/generators/REACT_NATIVE/template-csf/storybook/index.js +1 -1
- package/dist/cjs/generators/REACT_SCRIPTS/index.js +21 -4
- package/dist/cjs/generators/SERVER/index.js +1 -1
- package/dist/cjs/generators/baseGenerator.js +6 -2
- package/dist/cjs/helpers.js +3 -11
- package/dist/cjs/initiate.js +2 -17
- package/dist/cjs/project_types.js +1 -10
- package/dist/cjs/upgrade.js +37 -5
- package/dist/cjs/versions.json +57 -55
- package/dist/esm/automigrate/fixes/angular12.js +79 -0
- package/dist/esm/automigrate/fixes/cra5.js +79 -0
- package/dist/esm/automigrate/fixes/index.js +33 -0
- package/dist/esm/automigrate/fixes/mainjsFramework.js +89 -0
- package/dist/esm/automigrate/fixes/webpack5.js +156 -0
- package/dist/esm/automigrate/helpers/getStorybookConfiguration.js +27 -0
- package/dist/esm/automigrate/helpers/getStorybookInfo.js +94 -0
- package/dist/esm/automigrate/index.js +72 -0
- package/dist/esm/automigrate/types.js +1 -0
- package/dist/esm/frameworks/web-components/js/Button.js +1 -1
- package/dist/esm/frameworks/web-components/ts/Button.ts +1 -1
- package/dist/esm/generate.js +11 -2
- package/dist/esm/generators/ANGULAR/index.js +1 -1
- package/dist/esm/generators/AURELIA/index.js +1 -1
- package/dist/esm/generators/REACT_NATIVE/index.js +2 -2
- package/dist/esm/generators/REACT_NATIVE/template-csf/storybook/index.js +1 -1
- package/dist/esm/generators/REACT_SCRIPTS/index.js +21 -4
- package/dist/esm/generators/SERVER/index.js +1 -1
- package/dist/esm/generators/baseGenerator.js +6 -2
- package/dist/esm/helpers.js +3 -11
- package/dist/esm/initiate.js +2 -17
- package/dist/esm/project_types.js +1 -10
- package/dist/esm/upgrade.js +37 -5
- package/dist/esm/versions.json +57 -55
- package/dist/modern/automigrate/fixes/angular12.js +79 -0
- package/dist/modern/automigrate/fixes/cra5.js +79 -0
- package/dist/modern/automigrate/fixes/index.js +33 -0
- package/dist/modern/automigrate/fixes/mainjsFramework.js +89 -0
- package/dist/modern/automigrate/fixes/webpack5.js +156 -0
- package/dist/modern/automigrate/helpers/getStorybookConfiguration.js +27 -0
- package/dist/modern/automigrate/helpers/getStorybookInfo.js +94 -0
- package/dist/modern/automigrate/index.js +72 -0
- package/dist/modern/automigrate/types.js +1 -0
- package/dist/modern/frameworks/web-components/js/Button.js +1 -1
- package/dist/modern/generate.js +11 -2
- package/dist/modern/generators/ANGULAR/index.js +1 -1
- package/dist/modern/generators/AURELIA/index.js +1 -1
- package/dist/modern/generators/REACT_NATIVE/index.js +2 -2
- package/dist/modern/generators/REACT_NATIVE/template-csf/storybook/index.js +1 -1
- package/dist/modern/generators/REACT_SCRIPTS/index.js +21 -4
- package/dist/modern/generators/SERVER/index.js +1 -1
- package/dist/modern/generators/baseGenerator.js +6 -2
- package/dist/modern/helpers.js +3 -11
- package/dist/modern/initiate.js +2 -17
- package/dist/modern/project_types.js +1 -10
- package/dist/modern/upgrade.js +37 -5
- package/dist/modern/versions.json +57 -55
- package/dist/ts3.4/automigrate/fixes/angular12.d.ts +15 -0
- package/dist/ts3.4/automigrate/fixes/cra5.d.ts +15 -0
- package/dist/ts3.4/automigrate/fixes/index.d.ts +3 -0
- package/dist/ts3.4/automigrate/fixes/mainjsFramework.d.ts +8 -0
- package/dist/ts3.4/automigrate/fixes/webpack5.d.ts +26 -0
- package/dist/ts3.4/automigrate/helpers/getStorybookConfiguration.d.ts +1 -0
- package/dist/ts3.4/automigrate/helpers/getStorybookInfo.d.ts +11 -0
- package/dist/ts3.4/automigrate/index.d.ts +7 -0
- package/dist/ts3.4/automigrate/types.d.ts +15 -0
- package/dist/ts3.4/generators/REACT_NATIVE/index.d.ts +1 -2
- package/dist/ts3.4/generators/baseGenerator.d.ts +1 -2
- package/dist/ts3.4/helpers.d.ts +2 -2
- package/dist/ts3.4/initiate.d.ts +1 -2
- package/dist/ts3.4/project_types.d.ts +0 -7
- package/dist/ts3.4/upgrade.d.ts +7 -3
- package/dist/ts3.9/automigrate/fixes/angular12.d.ts +15 -0
- package/dist/ts3.9/automigrate/fixes/cra5.d.ts +15 -0
- package/dist/ts3.9/automigrate/fixes/index.d.ts +3 -0
- package/dist/ts3.9/automigrate/fixes/mainjsFramework.d.ts +8 -0
- package/dist/ts3.9/automigrate/fixes/webpack5.d.ts +26 -0
- package/dist/ts3.9/automigrate/helpers/getStorybookConfiguration.d.ts +1 -0
- package/dist/ts3.9/automigrate/helpers/getStorybookInfo.d.ts +11 -0
- package/dist/ts3.9/automigrate/index.d.ts +7 -0
- package/dist/ts3.9/automigrate/types.d.ts +15 -0
- package/dist/ts3.9/generators/REACT_NATIVE/index.d.ts +1 -2
- package/dist/ts3.9/generators/baseGenerator.d.ts +1 -2
- package/dist/ts3.9/helpers.d.ts +2 -2
- package/dist/ts3.9/initiate.d.ts +1 -2
- package/dist/ts3.9/project_types.d.ts +0 -7
- package/dist/ts3.9/upgrade.d.ts +7 -3
- package/package.json +7 -6
|
@@ -0,0 +1,156 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.webpack5 = void 0;
|
|
7
|
+
|
|
8
|
+
require("core-js/modules/es.promise.js");
|
|
9
|
+
|
|
10
|
+
var _chalk = _interopRequireDefault(require("chalk"));
|
|
11
|
+
|
|
12
|
+
var _tsDedent = _interopRequireDefault(require("ts-dedent"));
|
|
13
|
+
|
|
14
|
+
var _semver = _interopRequireDefault(require("@storybook/semver"));
|
|
15
|
+
|
|
16
|
+
var _csfTools = require("@storybook/csf-tools");
|
|
17
|
+
|
|
18
|
+
var _getStorybookInfo = require("../helpers/getStorybookInfo");
|
|
19
|
+
|
|
20
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
21
|
+
|
|
22
|
+
const logger = console;
|
|
23
|
+
|
|
24
|
+
/**
|
|
25
|
+
* Is the user using webpack5 in their project?
|
|
26
|
+
*
|
|
27
|
+
* If the user is using a version of SB >= 6.3,
|
|
28
|
+
* prompt them to upgrade to webpack5.
|
|
29
|
+
*
|
|
30
|
+
* - Add manager-webpack5 builder-webpack5 as dev dependencies
|
|
31
|
+
* - Add core.builder = 'webpack5' to main.js
|
|
32
|
+
* - Add 'webpack5' as a project dependency
|
|
33
|
+
*/
|
|
34
|
+
const webpack5 = {
|
|
35
|
+
id: 'webpack5',
|
|
36
|
+
|
|
37
|
+
async checkWebpack5Builder(packageJson) {
|
|
38
|
+
var _semver$coerce;
|
|
39
|
+
|
|
40
|
+
const {
|
|
41
|
+
mainConfig,
|
|
42
|
+
version: storybookVersion
|
|
43
|
+
} = (0, _getStorybookInfo.getStorybookInfo)(packageJson);
|
|
44
|
+
const storybookCoerced = storybookVersion && ((_semver$coerce = _semver.default.coerce(storybookVersion)) === null || _semver$coerce === void 0 ? void 0 : _semver$coerce.version);
|
|
45
|
+
|
|
46
|
+
if (!storybookCoerced) {
|
|
47
|
+
logger.warn((0, _tsDedent.default)`
|
|
48
|
+
❌ Unable to determine storybook version, skipping ${_chalk.default.cyan('webpack5')} fix.
|
|
49
|
+
🤔 Are you running automigrate from your project directory?
|
|
50
|
+
`);
|
|
51
|
+
return null;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
if (_semver.default.lt(storybookCoerced, '6.3.0')) {
|
|
55
|
+
logger.warn((0, _tsDedent.default)`
|
|
56
|
+
Detected SB 6.3 or below, please upgrade storybook to use webpack5.
|
|
57
|
+
|
|
58
|
+
To upgrade to the latest stable release, run this from your project directory:
|
|
59
|
+
|
|
60
|
+
${_chalk.default.cyan('npx sb upgrade')}
|
|
61
|
+
|
|
62
|
+
Add the ${_chalk.default.cyan('--prerelease')} flag to get the latest prerelease.
|
|
63
|
+
`.trim());
|
|
64
|
+
return null;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
if (_semver.default.gte(storybookCoerced, '7.0.0')) {
|
|
68
|
+
return null;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
if (!mainConfig) {
|
|
72
|
+
logger.warn('Unable to find storybook main.js config');
|
|
73
|
+
return null;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
const main = await (0, _csfTools.readConfig)(mainConfig);
|
|
77
|
+
const builder = main.getFieldValue(['core', 'builder']);
|
|
78
|
+
|
|
79
|
+
if (builder && builder !== 'webpack4') {
|
|
80
|
+
logger.info(`Found builder ${builder}, skipping`);
|
|
81
|
+
return null;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
return {
|
|
85
|
+
storybookVersion,
|
|
86
|
+
main
|
|
87
|
+
};
|
|
88
|
+
},
|
|
89
|
+
|
|
90
|
+
async check({
|
|
91
|
+
packageManager
|
|
92
|
+
}) {
|
|
93
|
+
var _semver$coerce2;
|
|
94
|
+
|
|
95
|
+
const packageJson = packageManager.retrievePackageJson();
|
|
96
|
+
const {
|
|
97
|
+
dependencies,
|
|
98
|
+
devDependencies
|
|
99
|
+
} = packageJson;
|
|
100
|
+
const webpackVersion = dependencies.webpack || devDependencies.webpack;
|
|
101
|
+
const webpackCoerced = (_semver$coerce2 = _semver.default.coerce(webpackVersion)) === null || _semver$coerce2 === void 0 ? void 0 : _semver$coerce2.version;
|
|
102
|
+
if (!webpackCoerced || _semver.default.lt(webpackCoerced, '5.0.0') || _semver.default.gte(webpackCoerced, '6.0.0')) return null;
|
|
103
|
+
const builderInfo = await this.checkWebpack5Builder(packageJson);
|
|
104
|
+
return builderInfo ? Object.assign({
|
|
105
|
+
webpackVersion
|
|
106
|
+
}, builderInfo) : null;
|
|
107
|
+
},
|
|
108
|
+
|
|
109
|
+
prompt({
|
|
110
|
+
webpackVersion,
|
|
111
|
+
storybookVersion
|
|
112
|
+
}) {
|
|
113
|
+
const webpackFormatted = _chalk.default.cyan(`webpack ${webpackVersion}`);
|
|
114
|
+
|
|
115
|
+
const sbFormatted = _chalk.default.cyan(`Storybook ${storybookVersion}`);
|
|
116
|
+
|
|
117
|
+
return (0, _tsDedent.default)`
|
|
118
|
+
We've detected you're running ${webpackFormatted}.
|
|
119
|
+
${sbFormatted} runs webpack4 by default, which may not be compatible.
|
|
120
|
+
|
|
121
|
+
To run Storybook in webpack5-mode, we can install Storybook's ${_chalk.default.cyan('webpack5 builder')} for you.
|
|
122
|
+
|
|
123
|
+
More info: ${_chalk.default.yellow('https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#webpack-5-manager-build')}
|
|
124
|
+
`;
|
|
125
|
+
},
|
|
126
|
+
|
|
127
|
+
async run({
|
|
128
|
+
result: {
|
|
129
|
+
main,
|
|
130
|
+
storybookVersion,
|
|
131
|
+
webpackVersion
|
|
132
|
+
},
|
|
133
|
+
packageManager,
|
|
134
|
+
dryRun
|
|
135
|
+
}) {
|
|
136
|
+
const deps = [`@storybook/manager-webpack5@${storybookVersion}`, `@storybook/builder-webpack5@${storybookVersion}`]; // this also gets called by 'cra5' fix so we need to add
|
|
137
|
+
// webpack5 at the project root so that it gets hoisted
|
|
138
|
+
|
|
139
|
+
if (!webpackVersion) {
|
|
140
|
+
deps.push('webpack@5');
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
logger.info(`✅ Adding dependencies: ${deps}`);
|
|
144
|
+
if (!dryRun) packageManager.addDependencies({
|
|
145
|
+
installAsDevDependencies: true
|
|
146
|
+
}, deps);
|
|
147
|
+
logger.info('✅ Setting `core.builder` to `webpack5` in main.js');
|
|
148
|
+
|
|
149
|
+
if (!dryRun) {
|
|
150
|
+
main.setFieldValue(['core', 'builder'], 'webpack5');
|
|
151
|
+
await (0, _csfTools.writeConfig)(main);
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
};
|
|
156
|
+
exports.webpack5 = webpack5;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.getStorybookConfiguration = getStorybookConfiguration;
|
|
7
|
+
|
|
8
|
+
/*
|
|
9
|
+
* Lifted from chromatic-cli
|
|
10
|
+
*
|
|
11
|
+
* This is not exactly clever but it works most of the time
|
|
12
|
+
* we receive the full text of the npm script, and we look if we can find the cli flag
|
|
13
|
+
*/
|
|
14
|
+
function getStorybookConfiguration(storybookScript, shortName, longName) {
|
|
15
|
+
const parts = storybookScript.split(/[\s='"]+/);
|
|
16
|
+
let index = parts.indexOf(longName);
|
|
17
|
+
|
|
18
|
+
if (index === -1) {
|
|
19
|
+
index = parts.indexOf(shortName);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
if (index === -1) {
|
|
23
|
+
return null;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
return parts[index + 1];
|
|
27
|
+
}
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.getStorybookInfo = void 0;
|
|
7
|
+
|
|
8
|
+
var _path = _interopRequireDefault(require("path"));
|
|
9
|
+
|
|
10
|
+
var _fsExtra = _interopRequireDefault(require("fs-extra"));
|
|
11
|
+
|
|
12
|
+
var _getStorybookConfiguration = require("./getStorybookConfiguration");
|
|
13
|
+
|
|
14
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
|
+
|
|
16
|
+
const viewLayers = {
|
|
17
|
+
'@storybook/react': 'react',
|
|
18
|
+
'@storybook/vue': 'vue',
|
|
19
|
+
'@storybook/vue3': 'vue3',
|
|
20
|
+
'@storybook/angular': 'angular',
|
|
21
|
+
'@storybook/html': 'html',
|
|
22
|
+
'@storybook/web-components': 'web-components',
|
|
23
|
+
'@storybook/polymer': 'polymer',
|
|
24
|
+
'@storybook/ember': 'ember',
|
|
25
|
+
'@storybook/marko': 'marko',
|
|
26
|
+
'@storybook/mithril': 'mithril',
|
|
27
|
+
'@storybook/riot': 'riot',
|
|
28
|
+
'@storybook/svelte': 'svelte',
|
|
29
|
+
'@storybook/preact': 'preact',
|
|
30
|
+
'@storybook/rax': 'rax'
|
|
31
|
+
};
|
|
32
|
+
const logger = console;
|
|
33
|
+
|
|
34
|
+
const findDependency = ({
|
|
35
|
+
dependencies,
|
|
36
|
+
devDependencies,
|
|
37
|
+
peerDependencies
|
|
38
|
+
}, predicate) => [Object.entries(dependencies || {}).find(predicate), Object.entries(devDependencies || {}).find(predicate), Object.entries(peerDependencies || {}).find(predicate)];
|
|
39
|
+
|
|
40
|
+
const getFrameworkInfo = packageJson => {
|
|
41
|
+
// Pull the viewlayer from dependencies in package.json
|
|
42
|
+
const [dep, devDep, peerDep] = findDependency(packageJson, ([key]) => viewLayers[key]);
|
|
43
|
+
const [pkg, version] = dep || devDep || peerDep || [];
|
|
44
|
+
const framework = viewLayers[pkg];
|
|
45
|
+
|
|
46
|
+
if (dep && devDep && dep[0] === devDep[0]) {
|
|
47
|
+
logger.warn(`Found "${dep[0]}" in both "dependencies" and "devDependencies". This is probably a mistake.`);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
if (dep && peerDep && dep[0] === peerDep[0]) {
|
|
51
|
+
logger.warn(`Found "${dep[0]}" in both "dependencies" and "peerDependencies". This is probably a mistake.`);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
return {
|
|
55
|
+
framework,
|
|
56
|
+
version
|
|
57
|
+
};
|
|
58
|
+
};
|
|
59
|
+
|
|
60
|
+
const validConfigExtensions = ['ts', 'js', 'tsx', 'jsx', 'mjs', 'cjs'];
|
|
61
|
+
|
|
62
|
+
const findConfigFile = (prefix, configDir) => {
|
|
63
|
+
const filePrefix = _path.default.join(configDir, prefix);
|
|
64
|
+
|
|
65
|
+
const extension = validConfigExtensions.find(ext => _fsExtra.default.existsSync(`${filePrefix}.${ext}`));
|
|
66
|
+
return extension ? `${filePrefix}.${extension}` : null;
|
|
67
|
+
};
|
|
68
|
+
|
|
69
|
+
const getConfigInfo = packageJson => {
|
|
70
|
+
var _packageJson$scripts;
|
|
71
|
+
|
|
72
|
+
let configDir = '.storybook';
|
|
73
|
+
const storybookScript = (_packageJson$scripts = packageJson.scripts) === null || _packageJson$scripts === void 0 ? void 0 : _packageJson$scripts.storybook;
|
|
74
|
+
|
|
75
|
+
if (storybookScript) {
|
|
76
|
+
const configParam = (0, _getStorybookConfiguration.getStorybookConfiguration)(storybookScript, '-c', '--config-dir');
|
|
77
|
+
if (configParam) configDir = configParam;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
return {
|
|
81
|
+
configDir,
|
|
82
|
+
mainConfig: findConfigFile('main', configDir),
|
|
83
|
+
previewConfig: findConfigFile('preview', configDir),
|
|
84
|
+
managerConfig: findConfigFile('manager', configDir)
|
|
85
|
+
};
|
|
86
|
+
};
|
|
87
|
+
|
|
88
|
+
const getStorybookInfo = packageJson => {
|
|
89
|
+
const frameworkInfo = getFrameworkInfo(packageJson);
|
|
90
|
+
const configInfo = getConfigInfo(packageJson);
|
|
91
|
+
return Object.assign({}, frameworkInfo, configInfo);
|
|
92
|
+
};
|
|
93
|
+
|
|
94
|
+
exports.getStorybookInfo = getStorybookInfo;
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.automigrate = void 0;
|
|
7
|
+
|
|
8
|
+
require("core-js/modules/es.promise.js");
|
|
9
|
+
|
|
10
|
+
var _prompts = _interopRequireDefault(require("prompts"));
|
|
11
|
+
|
|
12
|
+
var _chalk = _interopRequireDefault(require("chalk"));
|
|
13
|
+
|
|
14
|
+
var _boxen = _interopRequireDefault(require("boxen"));
|
|
15
|
+
|
|
16
|
+
var _jsPackageManager = require("../js-package-manager");
|
|
17
|
+
|
|
18
|
+
var _fixes = require("./fixes");
|
|
19
|
+
|
|
20
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
21
|
+
|
|
22
|
+
/* eslint-disable no-await-in-loop */
|
|
23
|
+
const logger = console;
|
|
24
|
+
|
|
25
|
+
const automigrate = async ({
|
|
26
|
+
fixId,
|
|
27
|
+
dryRun,
|
|
28
|
+
yes
|
|
29
|
+
}) => {
|
|
30
|
+
const packageManager = _jsPackageManager.JsPackageManagerFactory.getPackageManager();
|
|
31
|
+
|
|
32
|
+
const filtered = fixId ? _fixes.fixes.filter(f => f.id === fixId) : _fixes.fixes;
|
|
33
|
+
|
|
34
|
+
for (let i = 0; i < filtered.length; i += 1) {
|
|
35
|
+
const f = _fixes.fixes[i];
|
|
36
|
+
logger.info(`🔎 checking '${_chalk.default.cyan(f.id)}'`);
|
|
37
|
+
const result = await f.check({
|
|
38
|
+
packageManager
|
|
39
|
+
});
|
|
40
|
+
|
|
41
|
+
if (result) {
|
|
42
|
+
const message = f.prompt(result);
|
|
43
|
+
logger.info((0, _boxen.default)(message, {
|
|
44
|
+
borderStyle: 'round',
|
|
45
|
+
padding: 1,
|
|
46
|
+
borderColor: '#F1618C'
|
|
47
|
+
}));
|
|
48
|
+
const runAnswer = yes || dryRun ? {
|
|
49
|
+
fix: false
|
|
50
|
+
} : await (0, _prompts.default)([{
|
|
51
|
+
type: 'confirm',
|
|
52
|
+
name: 'fix',
|
|
53
|
+
message: `Do you want to run the '${_chalk.default.cyan(f.id)}' fix on your project?`
|
|
54
|
+
}]);
|
|
55
|
+
|
|
56
|
+
if (runAnswer.fix) {
|
|
57
|
+
await f.run({
|
|
58
|
+
result,
|
|
59
|
+
packageManager,
|
|
60
|
+
dryRun
|
|
61
|
+
});
|
|
62
|
+
logger.info(`✅ fixed ${_chalk.default.cyan(f.id)}`);
|
|
63
|
+
} else {
|
|
64
|
+
logger.info(`Skipping the ${_chalk.default.cyan(f.id)} fix.`);
|
|
65
|
+
logger.info();
|
|
66
|
+
logger.info(`If you change your mind, run '${_chalk.default.cyan('npx sb@next fix')}'`);
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
};
|
|
71
|
+
|
|
72
|
+
exports.automigrate = automigrate;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";
|
package/dist/modern/generate.js
CHANGED
|
@@ -28,6 +28,8 @@ var _repro = require("./repro");
|
|
|
28
28
|
|
|
29
29
|
var _link = require("./link");
|
|
30
30
|
|
|
31
|
+
var _automigrate = require("./automigrate");
|
|
32
|
+
|
|
31
33
|
var _babelConfig = require("./babel-config");
|
|
32
34
|
|
|
33
35
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -37,13 +39,13 @@ const pkg = (0, _readPkgUp.sync)({
|
|
|
37
39
|
}).packageJson;
|
|
38
40
|
const logger = console;
|
|
39
41
|
|
|
40
|
-
_commander.default.command('init').description('Initialize Storybook into your project.').option('-f --force', 'Force add Storybook').option('-s --skip-install', 'Skip installing deps').option('-N --use-npm', 'Use npm to install deps').option('-p --parser <babel | babylon | flow | ts | tsx>', 'jscodeshift parser').option('-t --type <type>', 'Add Storybook for a specific project type').option('
|
|
42
|
+
_commander.default.command('init').description('Initialize Storybook into your project.').option('-f --force', 'Force add Storybook').option('-s --skip-install', 'Skip installing deps').option('-N --use-npm', 'Use npm to install deps').option('-p --parser <babel | babylon | flow | ts | tsx>', 'jscodeshift parser').option('-t --type <type>', 'Add Storybook for a specific project type').option('-y --yes', 'Answer yes to all prompts').option('-b --builder <builder>', 'Builder library').option('-l --linkable', 'Prepare installation for link (contributor helper)').action(options => (0, _initiate.initiate)(options, pkg));
|
|
41
43
|
|
|
42
44
|
_commander.default.command('add <addon>').description('Add an addon to your Storybook').option('-N --use-npm', 'Use NPM to build the Storybook server').option('-s --skip-postinstall', 'Skip package specific postinstall config modifications').action((addonName, options) => (0, _add.add)(addonName, options));
|
|
43
45
|
|
|
44
46
|
_commander.default.command('babelrc').description('generate the default storybook babel config into your current working directory').action(() => (0, _babelConfig.generateStorybookBabelConfigInCWD)());
|
|
45
47
|
|
|
46
|
-
_commander.default.command('upgrade').description('Upgrade your Storybook packages to the latest').option('-N --use-npm', 'Use NPM to build the Storybook server').option('-n --dry-run', 'Only check for upgrades, do not install').option('-p --prerelease', 'Upgrade to the pre-release packages').option('-s --skip-check', 'Skip postinstall version
|
|
48
|
+
_commander.default.command('upgrade').description('Upgrade your Storybook packages to the latest').option('-N --use-npm', 'Use NPM to build the Storybook server').option('-y --yes', 'Skip prompting the user').option('-n --dry-run', 'Only check for upgrades, do not install').option('-p --prerelease', 'Upgrade to the pre-release packages').option('-s --skip-check', 'Skip postinstall version and automigration checks').action(options => (0, _upgrade.upgrade)(options));
|
|
47
49
|
|
|
48
50
|
_commander.default.command('info').description('Prints debugging information about the local environment').action(() => {
|
|
49
51
|
logger.log(_chalk.default.bold('\nEnvironment Info:'));
|
|
@@ -114,6 +116,13 @@ _commander.default.command('link <repo-url-or-directory>').description('Pull dow
|
|
|
114
116
|
process.exit(1);
|
|
115
117
|
}));
|
|
116
118
|
|
|
119
|
+
_commander.default.command('automigrate [fixId]').description('Check storybook for known problems or migrations and apply fixes').option('-y --yes', 'Skip prompting the user').option('-n --dry-run', 'Only check for fixes, do not actually run them').action((fixId, options) => (0, _automigrate.automigrate)(Object.assign({
|
|
120
|
+
fixId
|
|
121
|
+
}, options)).catch(e => {
|
|
122
|
+
logger.error(e);
|
|
123
|
+
process.exit(1);
|
|
124
|
+
}));
|
|
125
|
+
|
|
117
126
|
_commander.default.on('command:*', ([invalidCmd]) => {
|
|
118
127
|
logger.error(' Invalid command: %s.\n See --help for a list of available commands.', invalidCmd); // eslint-disable-next-line
|
|
119
128
|
|
|
@@ -59,7 +59,7 @@ const generator = async (packageManager, npmOptions, options) => {
|
|
|
59
59
|
extraPackages: ['@compodoc/compodoc', '@angular/elements', '@webcomponents/custom-elements'],
|
|
60
60
|
addScripts: false
|
|
61
61
|
});
|
|
62
|
-
(0, _helpers.copyTemplate)(__dirname
|
|
62
|
+
(0, _helpers.copyTemplate)(__dirname);
|
|
63
63
|
editAngularAppTsConfig();
|
|
64
64
|
(0, _angularHelpers.editStorybookTsConfig)(_path.default.resolve('./.storybook/tsconfig.json')); // edit scripts to generate docs
|
|
65
65
|
|
|
@@ -36,7 +36,7 @@ const generator = async (packageManager, npmOptions, options) => {
|
|
|
36
36
|
(0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'aurelia', {
|
|
37
37
|
extraPackages: ['aurelia']
|
|
38
38
|
});
|
|
39
|
-
(0, _helpers.copyTemplate)(__dirname
|
|
39
|
+
(0, _helpers.copyTemplate)(__dirname);
|
|
40
40
|
};
|
|
41
41
|
|
|
42
42
|
var _default = generator;
|
|
@@ -15,7 +15,7 @@ var _helpers = require("../../helpers");
|
|
|
15
15
|
|
|
16
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
17
|
|
|
18
|
-
const generator = async (packageManager, npmOptions, installServer
|
|
18
|
+
const generator = async (packageManager, npmOptions, installServer) => {
|
|
19
19
|
// set correct project name on entry files if possible
|
|
20
20
|
const dirname = _shelljs.default.ls('-d', 'ios/*.xcodeproj').stdout; // Only notify about app name if running in React Native vanilla (Expo projects do not have ios directory)
|
|
21
21
|
|
|
@@ -50,7 +50,7 @@ const generator = async (packageManager, npmOptions, installServer, options) =>
|
|
|
50
50
|
});
|
|
51
51
|
}
|
|
52
52
|
|
|
53
|
-
(0, _helpers.copyTemplate)(__dirname
|
|
53
|
+
(0, _helpers.copyTemplate)(__dirname);
|
|
54
54
|
};
|
|
55
55
|
|
|
56
56
|
var _default = generator;
|
|
@@ -14,7 +14,7 @@ configure(() => {
|
|
|
14
14
|
require('./stories');
|
|
15
15
|
}, module);
|
|
16
16
|
|
|
17
|
-
// Refer to https://github.com/storybookjs/
|
|
17
|
+
// Refer to https://github.com/storybookjs/react-native/tree/master/app/react-native#getstorybookui-options
|
|
18
18
|
// To find allowed options for getStorybookUI
|
|
19
19
|
const StorybookUIRoot = getStorybookUI({});
|
|
20
20
|
|
|
@@ -11,11 +11,17 @@ var _path = _interopRequireDefault(require("path"));
|
|
|
11
11
|
|
|
12
12
|
var _fs = _interopRequireDefault(require("fs"));
|
|
13
13
|
|
|
14
|
+
var _semver = _interopRequireDefault(require("@storybook/semver"));
|
|
15
|
+
|
|
14
16
|
var _baseGenerator = require("../baseGenerator");
|
|
15
17
|
|
|
18
|
+
var _project_types = require("../../project_types");
|
|
19
|
+
|
|
16
20
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
21
|
|
|
18
22
|
const generator = async (packageManager, npmOptions, options) => {
|
|
23
|
+
var _semver$coerce;
|
|
24
|
+
|
|
19
25
|
const extraMain = options.linkable ? {
|
|
20
26
|
webpackFinal: `%%(config) => {
|
|
21
27
|
const path = require('path');
|
|
@@ -29,10 +35,21 @@ const generator = async (packageManager, npmOptions, options) => {
|
|
|
29
35
|
}
|
|
30
36
|
%%`
|
|
31
37
|
} : {};
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
38
|
+
const craVersion = (_semver$coerce = _semver.default.coerce(packageManager.retrievePackageJson().dependencies['react-scripts'])) === null || _semver$coerce === void 0 ? void 0 : _semver$coerce.version;
|
|
39
|
+
|
|
40
|
+
const isCra5 = craVersion && _semver.default.gte(craVersion, '5.0.0');
|
|
41
|
+
|
|
42
|
+
const updatedOptions = isCra5 ? Object.assign({}, options, {
|
|
43
|
+
builder: _project_types.CoreBuilder.Webpack5
|
|
44
|
+
}) : options; // `@storybook/preset-create-react-app` has `@storybook/node-logger` as peerDep
|
|
45
|
+
|
|
46
|
+
const extraPackages = ['@storybook/node-logger'];
|
|
47
|
+
if (isCra5) extraPackages.push('webpack'); // preset v3 is compat with older versions of CRA, otherwise let version float
|
|
48
|
+
|
|
49
|
+
const extraAddons = [`@storybook/preset-create-react-app${isCra5 ? '' : '@3'}`];
|
|
50
|
+
await (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, updatedOptions, 'react', {
|
|
51
|
+
extraAddons,
|
|
52
|
+
extraPackages,
|
|
36
53
|
staticDir: _fs.default.existsSync(_path.default.resolve('./public')) ? 'public' : undefined,
|
|
37
54
|
addBabel: false,
|
|
38
55
|
addESLint: true,
|
|
@@ -15,7 +15,7 @@ const generator = async (packageManager, npmOptions, options) => {
|
|
|
15
15
|
(0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'server', {
|
|
16
16
|
extensions: ['json']
|
|
17
17
|
});
|
|
18
|
-
(0, _helpers.copyTemplate)(__dirname
|
|
18
|
+
(0, _helpers.copyTemplate)(__dirname);
|
|
19
19
|
};
|
|
20
20
|
|
|
21
21
|
var _default = generator;
|
|
@@ -49,6 +49,8 @@ const builderDependencies = builder => {
|
|
|
49
49
|
}
|
|
50
50
|
};
|
|
51
51
|
|
|
52
|
+
const stripVersions = addons => addons.map(addon => (0, _jsPackageManager.getPackageDetails)(addon)[0]);
|
|
53
|
+
|
|
52
54
|
async function baseGenerator(packageManager, npmOptions, {
|
|
53
55
|
language,
|
|
54
56
|
builder
|
|
@@ -74,7 +76,8 @@ async function baseGenerator(packageManager, npmOptions, {
|
|
|
74
76
|
const isNewFolder = !files.some(fname => fname.startsWith('.babel') || fname.startsWith('babel') || fname === 'package.json');
|
|
75
77
|
const packageJson = packageManager.retrievePackageJson();
|
|
76
78
|
const installedDependencies = new Set(Object.keys(packageJson.dependencies));
|
|
77
|
-
const
|
|
79
|
+
const frameworkPackage = `@storybook/${framework}`;
|
|
80
|
+
const packages = [frameworkPackage, ...addonPackages, ...extraPackages, ...extraAddons, ...yarn2Dependencies, ...builderDependencies(builder)].filter(Boolean).filter(packageToInstall => !installedDependencies.has((0, _jsPackageManager.getPackageDetails)(packageToInstall)[0]));
|
|
78
81
|
const versionedPackages = await packageManager.getVersionedPackages(...packages);
|
|
79
82
|
const mainOptions = builder !== _project_types.CoreBuilder.Webpack4 ? Object.assign({
|
|
80
83
|
core: {
|
|
@@ -82,7 +85,8 @@ async function baseGenerator(packageManager, npmOptions, {
|
|
|
82
85
|
}
|
|
83
86
|
}, extraMain) : extraMain;
|
|
84
87
|
(0, _configure.configure)(framework, Object.assign({
|
|
85
|
-
|
|
88
|
+
framework: frameworkPackage,
|
|
89
|
+
addons: [...addons, ...stripVersions(extraAddons)],
|
|
86
90
|
extensions,
|
|
87
91
|
commonJs: options.commonJs
|
|
88
92
|
}, mainOptions));
|
package/dist/modern/helpers.js
CHANGED
|
@@ -28,8 +28,6 @@ var _semver = require("@storybook/semver");
|
|
|
28
28
|
|
|
29
29
|
var _stripJsonComments = _interopRequireDefault(require("strip-json-comments"));
|
|
30
30
|
|
|
31
|
-
var _project_types = require("./project_types");
|
|
32
|
-
|
|
33
31
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
34
32
|
|
|
35
33
|
/* eslint-disable no-param-reassign */
|
|
@@ -178,17 +176,11 @@ function addToDevDependenciesIfNotPresent(packageJson, name, packageVersion) {
|
|
|
178
176
|
}
|
|
179
177
|
}
|
|
180
178
|
|
|
181
|
-
function copyTemplate(templateRoot
|
|
182
|
-
const templateDir = _path.default.resolve(templateRoot, `template
|
|
179
|
+
function copyTemplate(templateRoot) {
|
|
180
|
+
const templateDir = _path.default.resolve(templateRoot, `template-csf/`);
|
|
183
181
|
|
|
184
182
|
if (!_fs.default.existsSync(templateDir)) {
|
|
185
|
-
|
|
186
|
-
if (storyFormat === _project_types.StoryFormat.CSF_TYPESCRIPT) {
|
|
187
|
-
copyTemplate(templateRoot, _project_types.StoryFormat.CSF);
|
|
188
|
-
return;
|
|
189
|
-
}
|
|
190
|
-
|
|
191
|
-
throw new Error(`Unsupported story format: ${storyFormat}`);
|
|
183
|
+
throw new Error(`Couldn't find template dir`);
|
|
192
184
|
}
|
|
193
185
|
|
|
194
186
|
_fsExtra.default.copySync(templateDir, '.', {
|
package/dist/modern/initiate.js
CHANGED
|
@@ -63,8 +63,6 @@ var _RAX = _interopRequireDefault(require("./generators/RAX"));
|
|
|
63
63
|
|
|
64
64
|
var _SERVER = _interopRequireDefault(require("./generators/SERVER"));
|
|
65
65
|
|
|
66
|
-
var _warn = require("./warn");
|
|
67
|
-
|
|
68
66
|
var _jsPackageManager = require("./js-package-manager");
|
|
69
67
|
|
|
70
68
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -79,13 +77,7 @@ const installStorybook = (projectType, options) => {
|
|
|
79
77
|
skipInstall: options.skipInstall
|
|
80
78
|
};
|
|
81
79
|
const language = (0, _detect.detectLanguage)();
|
|
82
|
-
const hasTSDependency = language === _project_types.SupportedLanguage.TYPESCRIPT;
|
|
83
|
-
(0, _warn.warn)({
|
|
84
|
-
hasTSDependency
|
|
85
|
-
});
|
|
86
|
-
const defaultStoryFormat = hasTSDependency ? _project_types.StoryFormat.CSF_TYPESCRIPT : _project_types.StoryFormat.CSF;
|
|
87
80
|
const generatorOptions = {
|
|
88
|
-
storyFormat: options.storyFormat || defaultStoryFormat,
|
|
89
81
|
language,
|
|
90
82
|
builder: options.builder || _project_types.CoreBuilder.Webpack4,
|
|
91
83
|
linkable: !!options.linkable,
|
|
@@ -138,7 +130,7 @@ const installStorybook = (projectType, options) => {
|
|
|
138
130
|
initial: false
|
|
139
131
|
}])).then(({
|
|
140
132
|
server
|
|
141
|
-
}) => (0, _REACT_NATIVE.default)(packageManager, npmOptions, server
|
|
133
|
+
}) => (0, _REACT_NATIVE.default)(packageManager, npmOptions, server)).then((0, _helpers.commandLog)('Adding Storybook support to your "React Native" app')).then(end).then(() => {
|
|
142
134
|
logger.log(_chalk.default.red('NOTE: installation is not 100% automated.'));
|
|
143
135
|
logger.log(`To quickly run Storybook, replace contents of your app entry with:\n`);
|
|
144
136
|
(0, _helpers.codeLog)(["export {default} from './storybook';"]);
|
|
@@ -289,14 +281,7 @@ function initiate(options, pkg) {
|
|
|
289
281
|
}
|
|
290
282
|
|
|
291
283
|
done();
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
if (options.storyFormat === _project_types.StoryFormat.MDX) {
|
|
295
|
-
logger.warn(' The MDX CLI template is deprecated. The JS and TS templates already include MDX examples!');
|
|
296
|
-
cleanOptions.storyFormat = undefined;
|
|
297
|
-
}
|
|
298
|
-
|
|
299
|
-
return installStorybook(projectType, Object.assign({}, cleanOptions, isEsm ? {
|
|
284
|
+
return installStorybook(projectType, Object.assign({}, options, isEsm ? {
|
|
300
285
|
commonJs: true
|
|
301
286
|
} : undefined));
|
|
302
287
|
}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.installableProjectTypes = exports.unsupportedTemplate = exports.supportedTemplates = exports.SupportedLanguage = exports.CoreBuilder = exports.
|
|
6
|
+
exports.installableProjectTypes = exports.unsupportedTemplate = exports.supportedTemplates = exports.SupportedLanguage = exports.CoreBuilder = exports.SUPPORTED_FRAMEWORKS = exports.ProjectType = void 0;
|
|
7
7
|
|
|
8
8
|
var _semver = require("@storybook/semver");
|
|
9
9
|
|
|
@@ -52,15 +52,6 @@ exports.ProjectType = ProjectType;
|
|
|
52
52
|
|
|
53
53
|
const SUPPORTED_FRAMEWORKS = ['react', 'react-native', 'vue', 'vue3', 'angular', 'mithril', 'riot', 'ember', 'marionette', 'marko', 'meteor', 'preact', 'svelte', 'rax', 'aurelia'];
|
|
54
54
|
exports.SUPPORTED_FRAMEWORKS = SUPPORTED_FRAMEWORKS;
|
|
55
|
-
let StoryFormat;
|
|
56
|
-
exports.StoryFormat = StoryFormat;
|
|
57
|
-
|
|
58
|
-
(function (StoryFormat) {
|
|
59
|
-
StoryFormat["CSF"] = "csf";
|
|
60
|
-
StoryFormat["CSF_TYPESCRIPT"] = "csf-ts";
|
|
61
|
-
StoryFormat["MDX"] = "mdx";
|
|
62
|
-
})(StoryFormat || (exports.StoryFormat = StoryFormat = {}));
|
|
63
|
-
|
|
64
55
|
let CoreBuilder; // The `& {}` bit allows for auto-complete, see: https://github.com/microsoft/TypeScript/issues/29729
|
|
65
56
|
|
|
66
57
|
exports.CoreBuilder = CoreBuilder;
|