diff --git a/lib/cli/bin/generate.js b/lib/cli/bin/generate.js index 24697a093fa5..5b73e5e03ce3 100755 --- a/lib/cli/bin/generate.js +++ b/lib/cli/bin/generate.js @@ -39,7 +39,7 @@ updateNotifier({ let projectType; -let done = commandLog('Detecting project type'); +const done = commandLog('Detecting project type'); try { projectType = detect({ force: program.force, @@ -50,89 +50,67 @@ try { } done(); +const end = () => { + installDeps(npmOptions); + + logger.log('\nTo run your storybook, type:\n'); + codeLog([runStorybookCommand]); + logger.log('\nFor more information visit:', chalk.cyan('https://storybooks.js.org')); + + // Add a new line for the clear visibility. + logger.log(); +}; + switch (projectType) { case types.ALREADY_HAS_STORYBOOK: logger.log(); paddedLog('There seems to be a storybook already available in this project.'); paddedLog('Apply following command to force:\n'); codeLog(['getstorybook -f']); + + // Add a new line for the clear visibility. + logger.log(); break; case types.REACT_SCRIPTS: - done = commandLog('Adding storybook support to your "Create React App" based project'); - require('../generators/REACT_SCRIPTS'); - done(); - - installDeps(npmOptions); - - logger.log('\nTo run your storybook, type:\n'); - codeLog([runStorybookCommand]); - logger.log('\nFor more information visit:', chalk.cyan('http://getstorybook.io')); + require('../generators/REACT_SCRIPTS') + .then(commandLog('Adding storybook support to your "Create React App" based project')) + .then(end); break; case types.REACT: - done = commandLog('Adding storybook support to your "React" app'); - require('../generators/REACT'); - done(); - - installDeps(npmOptions); - - logger.log('\nTo run your storybook, type:\n'); - codeLog([runStorybookCommand]); - logger.log('\nFor more information visit:', chalk.cyan('http://getstorybook.io')); + require('../generators/REACT') + .then(commandLog('Adding storybook support to your "React" app')) + .then(end); break; case types.REACT_NATIVE: - done = commandLog('Adding storybook support to your "React Native" app'); - require('../generators/REACT_NATIVE'); - done(); - - installDeps(npmOptions); - - logger.log('\nTo run your storybook, type:\n'); - codeLog([runStorybookCommand]); - logger.log('\nFor more information visit:', chalk.cyan('http://getstorybook.io')); + require('../generators/REACT_NATIVE') + .then(commandLog('Adding storybook support to your "React Native" app')) + .then(end); break; case types.METEOR: - done = commandLog('Adding storybook support to your "Meteor" app'); - require('../generators/METEOR'); - done(); - - installDeps(npmOptions); - - logger.log('\nTo run your storybook, type:\n'); - codeLog([runStorybookCommand]); - logger.log('\nFor more information visit:', chalk.cyan('http://getstorybook.io')); + require('../generators/METEOR') + .then(commandLog('Adding storybook support to your "Meteor" app')) + .then(end); break; case types.WEBPACK_REACT: - done = commandLog('Adding storybook support to your "Webpack React" app'); - require('../generators/WEBPACK_REACT'); - done(); - - installDeps(npmOptions); - - logger.log('\nTo run your storybook, type:\n'); - codeLog([runStorybookCommand]); - logger.log('\nFor more information visit:', chalk.cyan('http://getstorybook.io')); + require('../generators/WEBPACK_REACT') + .then(commandLog('Adding storybook support to your "Webpack React" app')) + .then(end); break; case types.REACT_PROJECT: - done = commandLog('Adding storybook support to your "React" library'); - require('../generators/REACT'); - done(); - - installDeps(npmOptions); - - logger.log('\nTo run your storybook, type:\n'); - codeLog([runStorybookCommand]); - logger.log('\nFor more information visit:', chalk.cyan('http://getstorybook.io')); + require('../generators/REACT') + .then(commandLog('Adding storybook support to your "React" library')) + .then(end); break; default: paddedLog(`Unsupported Project type. (code: ${projectType})`); - paddedLog('Visit http://getstorybook.io for more information.'); -} + paddedLog('Visit https://storybooks.js.org for more information.'); -// Add a new line for the clear visibility. -logger.log(); + // Add a new line for the clear visibility. + logger.log(); +} diff --git a/lib/cli/generators/METEOR/index.js b/lib/cli/generators/METEOR/index.js index d3e9dcbefed1..b958156583f5 100644 --- a/lib/cli/generators/METEOR/index.js +++ b/lib/cli/generators/METEOR/index.js @@ -4,51 +4,76 @@ const path = require('path'); const fs = require('fs'); const sh = require('shelljs'); const JSON5 = require('json5'); +const latestVersion = require('latest-version'); -mergeDirs(path.resolve(__dirname, 'template/'), '.', 'overwrite'); - -const packageJson = helpers.getPackageJson(); -packageJson.devDependencies = packageJson.devDependencies || {}; -packageJson.scripts = packageJson.scripts || {}; -packageJson.dependencies = packageJson.dependencies || {}; - -// create or update .babelrc -let babelrc = null; -if (fs.existsSync('.babelrc')) { - const babelrcContent = fs.readFileSync('.babelrc', 'utf8'); - babelrc = JSON5.parse(babelrcContent); - babelrc.plugins = babelrc.plugins || []; - - if (babelrc.plugins.indexOf('babel-root-slash-import') < 0) { - babelrc.plugins.push('babel-root-slash-import'); - packageJson.devDependencies['babel-root-slash-import'] = '^1.1.0'; - } -} else { - babelrc = { - presets: ['es2015', 'es2016', 'react', 'stage-1'], - plugins: ['babel-root-slash-import'], - }; - - packageJson.devDependencies['babel-preset-es2015'] = '^6.9.0'; - packageJson.devDependencies['babel-preset-es2016'] = '^6.11.3'; - packageJson.devDependencies['babel-preset-react'] = '^6.11.1'; - packageJson.devDependencies['babel-preset-stage-1'] = '^6.13.0'; - packageJson.devDependencies['babel-root-slash-import'] = '^1.1.0'; -} - -fs.writeFileSync('.babelrc', JSON.stringify(babelrc, null, 2), 'utf8'); - -// write the new package.json. -packageJson.devDependencies['@storybook/react'] = '^2.21.0'; -packageJson.scripts['storybook'] = 'start-storybook -p 6006'; -packageJson.scripts['build-storybook'] = 'build-storybook'; - -// add react packages. -if (!packageJson.dependencies.react) { - packageJson.dependencies.react = '^15.3.0'; -} -if (!packageJson.dependencies['react-dom']) { - packageJson.dependencies['react-dom'] = '^15.3.0'; -} - -helpers.writePackageJson(packageJson); +module.exports = Promise.all([ + latestVersion('@storybook/react'), + latestVersion('react'), + latestVersion('react-dom'), + latestVersion('babel-preset-es2015'), + latestVersion('babel-preset-es2016'), + latestVersion('babel-preset-react'), + latestVersion('babel-preset-stage-1'), + latestVersion('babel-root-slash-import'), +]).then( + ( + [ + storybookVersion, + reactVersion, + reactDomVersion, + presetEs2015Version, + presetEs2016Version, + presetReactVersion, + presetStage1Version, + rootSlashImportVersion, + ], + ) => { + mergeDirs(path.resolve(__dirname, 'template/'), '.', 'overwrite'); + + const packageJson = helpers.getPackageJson(); + packageJson.devDependencies = packageJson.devDependencies || {}; + packageJson.scripts = packageJson.scripts || {}; + packageJson.dependencies = packageJson.dependencies || {}; + + // create or update .babelrc + let babelrc = null; + if (fs.existsSync('.babelrc')) { + const babelrcContent = fs.readFileSync('.babelrc', 'utf8'); + babelrc = JSON5.parse(babelrcContent); + babelrc.plugins = babelrc.plugins || []; + + if (babelrc.plugins.indexOf('babel-root-slash-import') < 0) { + babelrc.plugins.push('babel-root-slash-import'); + packageJson.devDependencies['babel-root-slash-import'] = `^${rootSlashImportVersion}`; + } + } else { + babelrc = { + presets: ['es2015', 'es2016', 'react', 'stage-1'], + plugins: ['babel-root-slash-import'], + }; + + packageJson.devDependencies['babel-preset-es2015'] = `^${presetEs2015Version}`; + packageJson.devDependencies['babel-preset-es2016'] = `^${presetEs2016Version}`; + packageJson.devDependencies['babel-preset-react'] = `^${presetReactVersion}`; + packageJson.devDependencies['babel-preset-stage-1'] = `^${presetStage1Version}`; + packageJson.devDependencies['babel-root-slash-import'] = `^${rootSlashImportVersion}`; + } + + fs.writeFileSync('.babelrc', JSON.stringify(babelrc, null, 2), 'utf8'); + + // write the new package.json. + packageJson.devDependencies['@storybook/react'] = `^${storybookVersion}`; + packageJson.scripts['storybook'] = 'start-storybook -p 6006'; + packageJson.scripts['build-storybook'] = 'build-storybook'; + + // add react packages. + if (!packageJson.dependencies.react) { + packageJson.dependencies.react = `^${reactVersion}`; + } + if (!packageJson.dependencies['react-dom']) { + packageJson.dependencies['react-dom'] = `^${reactDomVersion}`; + } + + helpers.writePackageJson(packageJson); + }, +); diff --git a/lib/cli/generators/REACT/index.js b/lib/cli/generators/REACT/index.js index d85df39ccf9c..744d917b405a 100644 --- a/lib/cli/generators/REACT/index.js +++ b/lib/cli/generators/REACT/index.js @@ -1,17 +1,19 @@ const mergeDirs = require('merge-dirs').default; const helpers = require('../../lib/helpers'); const path = require('path'); +const latestVersion = require('latest-version'); -mergeDirs(path.resolve(__dirname, 'template/'), '.', 'overwrite'); +module.exports = latestVersion('@storybook/react').then(version => { + mergeDirs(path.resolve(__dirname, 'template/'), '.', 'overwrite'); -const packageJson = helpers.getPackageJson(); + const packageJson = helpers.getPackageJson(); -// TODO: Get the latest version of storybook here. -packageJson.devDependencies = packageJson.devDependencies || {}; -packageJson.devDependencies['@storybook/react'] = '^2.21.0'; + packageJson.devDependencies = packageJson.devDependencies || {}; + packageJson.devDependencies['@storybook/react'] = `^${version}`; -packageJson.scripts = packageJson.scripts || {}; -packageJson.scripts['storybook'] = 'start-storybook -p 6006'; -packageJson.scripts['build-storybook'] = 'build-storybook'; + packageJson.scripts = packageJson.scripts || {}; + packageJson.scripts['storybook'] = 'start-storybook -p 6006'; + packageJson.scripts['build-storybook'] = 'build-storybook'; -helpers.writePackageJson(packageJson); + helpers.writePackageJson(packageJson); +}); diff --git a/lib/cli/generators/REACT_NATIVE/index.js b/lib/cli/generators/REACT_NATIVE/index.js index 4662b91d6770..a5c263bc7455 100644 --- a/lib/cli/generators/REACT_NATIVE/index.js +++ b/lib/cli/generators/REACT_NATIVE/index.js @@ -2,26 +2,28 @@ const mergeDirs = require('merge-dirs').default; const helpers = require('../../lib/helpers'); const path = require('path'); const shell = require('shelljs'); +const latestVersion = require('latest-version'); -// copy all files from the template directory to project directory -mergeDirs(path.resolve(__dirname, 'template/'), '.', 'overwrite'); +module.exports = latestVersion('@storybook/react-native').then(version => { + // copy all files from the template directory to project directory + mergeDirs(path.resolve(__dirname, 'template/'), '.', 'overwrite'); -// set correct project name on entry files if possible -const dirname = shell.ls('-d', 'ios/*.xcodeproj').stdout; -const projectName = - dirname && dirname.slice('ios/'.length, dirname.length - '.xcodeproj'.length - 1); -if (projectName) { - shell.sed('-i', '%APP_NAME%', projectName, 'storybook/index.ios.js'); - shell.sed('-i', '%APP_NAME%', projectName, 'storybook/index.android.js'); -} + // set correct project name on entry files if possible + const dirname = shell.ls('-d', 'ios/*.xcodeproj').stdout; + const projectName = + dirname && dirname.slice('ios/'.length, dirname.length - '.xcodeproj'.length - 1); + if (projectName) { + shell.sed('-i', '%APP_NAME%', projectName, 'storybook/index.ios.js'); + shell.sed('-i', '%APP_NAME%', projectName, 'storybook/index.android.js'); + } -const packageJson = helpers.getPackageJson(); + const packageJson = helpers.getPackageJson(); -// TODO: Get the latest version of storybook here. -packageJson.devDependencies = packageJson.devDependencies || {}; -packageJson.devDependencies['@storybook/react-native'] = '^2.0.0'; + packageJson.devDependencies = packageJson.devDependencies || {}; + packageJson.devDependencies['@storybook/react-native'] = `^${version}`; -packageJson.scripts = packageJson.scripts || {}; -packageJson.scripts['storybook'] = 'storybook start -p 7007'; + packageJson.scripts = packageJson.scripts || {}; + packageJson.scripts['storybook'] = 'storybook start -p 7007'; -helpers.writePackageJson(packageJson); + helpers.writePackageJson(packageJson); +}); diff --git a/lib/cli/generators/REACT_SCRIPTS/index.js b/lib/cli/generators/REACT_SCRIPTS/index.js index cfd01b298aa3..6023bf2182b8 100644 --- a/lib/cli/generators/REACT_SCRIPTS/index.js +++ b/lib/cli/generators/REACT_SCRIPTS/index.js @@ -2,20 +2,22 @@ const mergeDirs = require('merge-dirs').default; const helpers = require('../../lib/helpers'); const path = require('path'); const fs = require('fs'); +const latestVersion = require('latest-version'); -mergeDirs(path.resolve(__dirname, 'template/'), '.', 'overwrite'); +module.exports = latestVersion('@storybook/react').then(version => { + mergeDirs(path.resolve(__dirname, 'template/'), '.', 'overwrite'); -const packageJson = helpers.getPackageJson(); + const packageJson = helpers.getPackageJson(); -// TODO: Get the latest version of storybook here. -packageJson.devDependencies['@storybook/react'] = '^2.21.0'; -packageJson.scripts['storybook'] = 'start-storybook -p 9009'; -packageJson.scripts['build-storybook'] = 'build-storybook'; + packageJson.devDependencies['@storybook/react'] = `^${version}`; + packageJson.scripts['storybook'] = 'start-storybook -p 9009'; + packageJson.scripts['build-storybook'] = 'build-storybook'; -if (fs.existsSync(path.resolve('./public'))) { - // has a public folder and add support to it. - packageJson.scripts['storybook'] += ' -s public'; - packageJson.scripts['build-storybook'] += ' -s public'; -} + if (fs.existsSync(path.resolve('./public'))) { + // has a public folder and add support to it. + packageJson.scripts['storybook'] += ' -s public'; + packageJson.scripts['build-storybook'] += ' -s public'; + } -helpers.writePackageJson(packageJson); + helpers.writePackageJson(packageJson); +}); diff --git a/lib/cli/generators/WEBPACK_REACT/index.js b/lib/cli/generators/WEBPACK_REACT/index.js index d85df39ccf9c..744d917b405a 100644 --- a/lib/cli/generators/WEBPACK_REACT/index.js +++ b/lib/cli/generators/WEBPACK_REACT/index.js @@ -1,17 +1,19 @@ const mergeDirs = require('merge-dirs').default; const helpers = require('../../lib/helpers'); const path = require('path'); +const latestVersion = require('latest-version'); -mergeDirs(path.resolve(__dirname, 'template/'), '.', 'overwrite'); +module.exports = latestVersion('@storybook/react').then(version => { + mergeDirs(path.resolve(__dirname, 'template/'), '.', 'overwrite'); -const packageJson = helpers.getPackageJson(); + const packageJson = helpers.getPackageJson(); -// TODO: Get the latest version of storybook here. -packageJson.devDependencies = packageJson.devDependencies || {}; -packageJson.devDependencies['@storybook/react'] = '^2.21.0'; + packageJson.devDependencies = packageJson.devDependencies || {}; + packageJson.devDependencies['@storybook/react'] = `^${version}`; -packageJson.scripts = packageJson.scripts || {}; -packageJson.scripts['storybook'] = 'start-storybook -p 6006'; -packageJson.scripts['build-storybook'] = 'build-storybook'; + packageJson.scripts = packageJson.scripts || {}; + packageJson.scripts['storybook'] = 'start-storybook -p 6006'; + packageJson.scripts['build-storybook'] = 'build-storybook'; -helpers.writePackageJson(packageJson); + helpers.writePackageJson(packageJson); +}); diff --git a/lib/cli/lib/detect.js b/lib/cli/lib/detect.js index 5310df97af7f..ef62f94435a1 100644 --- a/lib/cli/lib/detect.js +++ b/lib/cli/lib/detect.js @@ -38,7 +38,10 @@ module.exports = function detect(options) { return types.REACT_NATIVE; } - if (packageJson.dependencies && packageJson.dependencies.react) { + if ( + (packageJson.dependencies && packageJson.dependencies.react) || + (packageJson.devDependencies && packageJson.devDependencies.react) + ) { return types.REACT; }