UNPKG

13.5 kBJavaScriptView Raw
1"use strict";
2
3Object.defineProperty(exports, "__esModule", {
4 value: true
5});
6exports.initiate = initiate;
7
8require("core-js/modules/es.promise.js");
9
10require("core-js/modules/es.array.sort.js");
11
12var _updateNotifier = require("update-notifier");
13
14var _chalk = _interopRequireDefault(require("chalk"));
15
16var _prompts = _interopRequireDefault(require("prompts"));
17
18var _telemetry = require("@storybook/telemetry");
19
20var _project_types = require("./project_types");
21
22var _detect = require("./detect");
23
24var _helpers = require("./helpers");
25
26var _ANGULAR = _interopRequireDefault(require("./generators/ANGULAR"));
27
28var _AURELIA = _interopRequireDefault(require("./generators/AURELIA"));
29
30var _EMBER = _interopRequireDefault(require("./generators/EMBER"));
31
32var _METEOR = _interopRequireDefault(require("./generators/METEOR"));
33
34var _REACT = _interopRequireDefault(require("./generators/REACT"));
35
36var _REACT_NATIVE = _interopRequireDefault(require("./generators/REACT_NATIVE"));
37
38var _REACT_SCRIPTS = _interopRequireDefault(require("./generators/REACT_SCRIPTS"));
39
40var _SFC_VUE = _interopRequireDefault(require("./generators/SFC_VUE"));
41
42var _UPDATE_PACKAGE_ORGANIZATIONS = _interopRequireDefault(require("./generators/UPDATE_PACKAGE_ORGANIZATIONS"));
43
44var _VUE = _interopRequireDefault(require("./generators/VUE"));
45
46var _VUE2 = _interopRequireDefault(require("./generators/VUE3"));
47
48var _WEBPACK_REACT = _interopRequireDefault(require("./generators/WEBPACK_REACT"));
49
50var _MITHRIL = _interopRequireDefault(require("./generators/MITHRIL"));
51
52var _MARIONETTE = _interopRequireDefault(require("./generators/MARIONETTE"));
53
54var _MARKO = _interopRequireDefault(require("./generators/MARKO"));
55
56var _HTML = _interopRequireDefault(require("./generators/HTML"));
57
58var _WEBCOMPONENTS = _interopRequireDefault(require("./generators/WEB-COMPONENTS"));
59
60var _RIOT = _interopRequireDefault(require("./generators/RIOT"));
61
62var _PREACT = _interopRequireDefault(require("./generators/PREACT"));
63
64var _SVELTE = _interopRequireDefault(require("./generators/SVELTE"));
65
66var _RAX = _interopRequireDefault(require("./generators/RAX"));
67
68var _SERVER = _interopRequireDefault(require("./generators/SERVER"));
69
70var _jsPackageManager = require("./js-package-manager");
71
72var _automigrate = require("./automigrate");
73
74function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
75
76const logger = console;
77
78const installStorybook = (projectType, packageManager, options) => {
79 const npmOptions = {
80 installAsDevDependencies: true,
81 skipInstall: options.skipInstall
82 };
83 const language = (0, _detect.detectLanguage)();
84 const generatorOptions = {
85 language,
86 builder: options.builder || (0, _detect.detectBuilder)(packageManager),
87 linkable: !!options.linkable,
88 commonJs: options.commonJs
89 };
90
91 const runGenerator = () => {
92 switch (projectType) {
93 case _project_types.ProjectType.ALREADY_HAS_STORYBOOK:
94 logger.log();
95 (0, _helpers.paddedLog)('There seems to be a Storybook already available in this project.');
96 (0, _helpers.paddedLog)('Apply following command to force:\n');
97 (0, _helpers.codeLog)(['sb init [options] -f']); // Add a new line for the clear visibility.
98
99 logger.log();
100 return Promise.resolve();
101
102 case _project_types.ProjectType.UPDATE_PACKAGE_ORGANIZATIONS:
103 return (0, _UPDATE_PACKAGE_ORGANIZATIONS.default)(packageManager, options.parser, npmOptions).then(() => null) // commandLog doesn't like to see output
104 .then((0, _helpers.commandLog)('Upgrading your project to the new Storybook packages.\n'));
105
106 case _project_types.ProjectType.REACT_SCRIPTS:
107 return (0, _REACT_SCRIPTS.default)(packageManager, npmOptions, generatorOptions).then((0, _helpers.commandLog)('Adding Storybook support to your "Create React App" based project'));
108
109 case _project_types.ProjectType.REACT:
110 return (0, _REACT.default)(packageManager, npmOptions, generatorOptions).then((0, _helpers.commandLog)('Adding Storybook support to your "React" app\n'));
111
112 case _project_types.ProjectType.REACT_NATIVE:
113 {
114 return (options.yes ? Promise.resolve({
115 server: true
116 }) : (0, _prompts.default)([{
117 type: 'confirm',
118 name: 'server',
119 message: 'Do you want to install dependencies necessary to run Storybook server? You can manually do it later by install @storybook/react-native-server',
120 initial: false
121 }])).then(({
122 server
123 }) => (0, _REACT_NATIVE.default)(packageManager, npmOptions, server)).then((0, _helpers.commandLog)('Adding Storybook support to your "React Native" app\n'));
124 }
125
126 case _project_types.ProjectType.METEOR:
127 return (0, _METEOR.default)(packageManager, npmOptions, generatorOptions).then((0, _helpers.commandLog)('Adding Storybook support to your "Meteor" app\n'));
128
129 case _project_types.ProjectType.WEBPACK_REACT:
130 return (0, _WEBPACK_REACT.default)(packageManager, npmOptions, generatorOptions).then((0, _helpers.commandLog)('Adding Storybook support to your "Webpack React" app\n'));
131
132 case _project_types.ProjectType.REACT_PROJECT:
133 return (0, _REACT.default)(packageManager, npmOptions, generatorOptions).then((0, _helpers.commandLog)('Adding Storybook support to your "React" library\n'));
134
135 case _project_types.ProjectType.SFC_VUE:
136 return (0, _SFC_VUE.default)(packageManager, npmOptions, generatorOptions).then((0, _helpers.commandLog)('Adding Storybook support to your "Single File Components Vue" app\n'));
137
138 case _project_types.ProjectType.VUE:
139 return (0, _VUE.default)(packageManager, npmOptions, generatorOptions).then((0, _helpers.commandLog)('Adding Storybook support to your "Vue" app\n'));
140
141 case _project_types.ProjectType.VUE3:
142 return (0, _VUE2.default)(packageManager, npmOptions, generatorOptions).then((0, _helpers.commandLog)('Adding Storybook support to your "Vue 3" app\n'));
143
144 case _project_types.ProjectType.ANGULAR:
145 return (0, _ANGULAR.default)(packageManager, npmOptions, generatorOptions).then((0, _helpers.commandLog)('Adding Storybook support to your "Angular" app\n'));
146
147 case _project_types.ProjectType.EMBER:
148 return (0, _EMBER.default)(packageManager, npmOptions, generatorOptions).then((0, _helpers.commandLog)('Adding Storybook support to your "Ember" app\n'));
149
150 case _project_types.ProjectType.MITHRIL:
151 return (0, _MITHRIL.default)(packageManager, npmOptions, generatorOptions).then((0, _helpers.commandLog)('Adding Storybook support to your "Mithril" app\n'));
152
153 case _project_types.ProjectType.MARIONETTE:
154 return (0, _MARIONETTE.default)(packageManager, npmOptions, generatorOptions).then((0, _helpers.commandLog)('Adding Storybook support to your "Marionette.js" app\n'));
155
156 case _project_types.ProjectType.MARKO:
157 return (0, _MARKO.default)(packageManager, npmOptions, generatorOptions).then((0, _helpers.commandLog)('Adding Storybook support to your "Marko" app\n'));
158
159 case _project_types.ProjectType.HTML:
160 return (0, _HTML.default)(packageManager, npmOptions, generatorOptions).then((0, _helpers.commandLog)('Adding Storybook support to your "HTML" app\n'));
161
162 case _project_types.ProjectType.WEB_COMPONENTS:
163 return (0, _WEBCOMPONENTS.default)(packageManager, npmOptions, generatorOptions).then((0, _helpers.commandLog)('Adding Storybook support to your "web components" app\n'));
164
165 case _project_types.ProjectType.RIOT:
166 return (0, _RIOT.default)(packageManager, npmOptions, generatorOptions).then((0, _helpers.commandLog)('Adding Storybook support to your "riot.js" app\n'));
167
168 case _project_types.ProjectType.PREACT:
169 return (0, _PREACT.default)(packageManager, npmOptions, generatorOptions).then((0, _helpers.commandLog)('Adding Storybook support to your "Preact" app\n'));
170
171 case _project_types.ProjectType.SVELTE:
172 return (0, _SVELTE.default)(packageManager, npmOptions, generatorOptions).then((0, _helpers.commandLog)('Adding Storybook support to your "Svelte" app\n'));
173
174 case _project_types.ProjectType.RAX:
175 return (0, _RAX.default)(packageManager, npmOptions, generatorOptions).then((0, _helpers.commandLog)('Adding Storybook support to your "Rax" app\n'));
176
177 case _project_types.ProjectType.AURELIA:
178 return (0, _AURELIA.default)(packageManager, npmOptions, generatorOptions).then((0, _helpers.commandLog)('Adding Storybook support to your "Aurelia" app\n'));
179
180 case _project_types.ProjectType.SERVER:
181 return (0, _SERVER.default)(packageManager, npmOptions, generatorOptions).then((0, _helpers.commandLog)('Adding Storybook support to your "Server" app\n'));
182
183 case _project_types.ProjectType.UNSUPPORTED:
184 (0, _helpers.paddedLog)(`We detected a project type that we don't support yet.`);
185 (0, _helpers.paddedLog)(`If you'd like your framework to be supported, please let use know about it at https://github.com/storybookjs/storybook/issues`); // Add a new line for the clear visibility.
186
187 logger.log();
188 return Promise.resolve();
189
190 default:
191 (0, _helpers.paddedLog)(`We couldn't detect your project type. (code: ${projectType})`);
192 (0, _helpers.paddedLog)('You can specify a project type explicitly via `sb init --type <type>`, see our docs on how to configure Storybook for your framework: https://storybook.js.org/docs/react/get-started/install'); // Add a new line for the clear visibility.
193
194 logger.log();
195 return projectTypeInquirer(options, packageManager);
196 }
197 };
198
199 return runGenerator().catch(ex => {
200 logger.error(`\n ${_chalk.default.red(ex.stack)}`);
201 process.exit(1);
202 });
203};
204
205const projectTypeInquirer = async (options, packageManager) => {
206 const manualAnswer = options.yes ? true : await (0, _prompts.default)([{
207 type: 'confirm',
208 name: 'manual',
209 message: 'Do you want to manually choose a Storybook project type to install?'
210 }]);
211
212 if (manualAnswer !== true && manualAnswer.manual) {
213 const frameworkAnswer = await (0, _prompts.default)([{
214 type: 'select',
215 name: 'manualFramework',
216 message: 'Please choose a project type from the following list:',
217 choices: _project_types.installableProjectTypes.map(type => ({
218 title: type,
219 value: type.toUpperCase()
220 }))
221 }]);
222 return installStorybook(frameworkAnswer.manualFramework, packageManager, options);
223 }
224
225 return Promise.resolve();
226};
227
228async function initiate(options, pkg) {
229 const packageManager = _jsPackageManager.JsPackageManagerFactory.getPackageManager(options.useNpm);
230
231 const welcomeMessage = 'storybook init - the simplest way to add a Storybook to your project.';
232 logger.log(_chalk.default.inverse(`\n ${welcomeMessage} \n`));
233
234 if (!options.disableTelemetry) {
235 (0, _telemetry.telemetry)('init');
236 } // Update notify code.
237
238
239 new _updateNotifier.UpdateNotifier({
240 pkg,
241 updateCheckInterval: 1000 * 60 * 60 // every hour (we could increase this later on.)
242
243 }).notify();
244 let projectType;
245 const projectTypeProvided = options.type;
246 const infoText = projectTypeProvided ? `Installing Storybook for user specified project type: ${projectTypeProvided}` : 'Detecting project type';
247 const done = (0, _helpers.commandLog)(infoText);
248 const packageJson = packageManager.retrievePackageJson();
249 const isEsm = packageJson && packageJson.type === 'module';
250
251 try {
252 if (projectTypeProvided) {
253 if (_project_types.installableProjectTypes.includes(projectTypeProvided)) {
254 const storybookInstalled = (0, _detect.isStorybookInstalled)(packageJson, options.force);
255 projectType = storybookInstalled ? _project_types.ProjectType.ALREADY_HAS_STORYBOOK : projectTypeProvided.toUpperCase();
256 } else {
257 done(`The provided project type was not recognized by Storybook: ${projectTypeProvided}`);
258 logger.log(`\nThe project types currently supported by Storybook are:\n`);
259
260 _project_types.installableProjectTypes.sort().forEach(framework => (0, _helpers.paddedLog)(`- ${framework}`));
261
262 logger.log();
263 process.exit(1);
264 }
265 } else {
266 projectType = (0, _detect.detect)(options);
267 }
268 } catch (ex) {
269 done(ex.message);
270 process.exit(1);
271 }
272
273 done();
274 await installStorybook(projectType, packageManager, Object.assign({}, options, isEsm ? {
275 commonJs: true
276 } : undefined));
277
278 if (!options.skipInstall) {
279 packageManager.installDependencies();
280 }
281
282 await (0, _automigrate.automigrate)({
283 yes: process.env.CI === 'true'
284 });
285 logger.log('\nTo run your Storybook, type:\n');
286 (0, _helpers.codeLog)([packageManager.getRunStorybookCommand()]);
287 logger.log('\nFor more information visit:', _chalk.default.cyan('https://storybook.js.org'));
288
289 if (projectType === _project_types.ProjectType.REACT_NATIVE) {
290 const REACT_NATIVE_REPO = 'https://github.com/storybookjs/react-native';
291 logger.log();
292 logger.log(_chalk.default.red('NOTE: installation is not 100% automated.'));
293 logger.log(`To quickly run Storybook, replace contents of your app entry with:\n`);
294 (0, _helpers.codeLog)(["export {default} from './storybook';"]);
295 logger.log('\n For more in information, see the github readme:\n');
296 logger.log(_chalk.default.cyan(REACT_NATIVE_REPO));
297 logger.log();
298 } // Add a new line for the clear visibility.
299
300
301 logger.log();
302}
\No newline at end of file