diff --git a/CHANGELOG.md b/CHANGELOG.md index b38e8a9..2cd0a74 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ # Changelog -### v1.5.1 +### v1.5.2 07-Oct-2016 * Update more user friendly welcome screen to REACT_SCRIPTS generator. diff --git a/README.md b/README.md index 7c60b69..f4e3002 100644 --- a/README.md +++ b/README.md @@ -20,4 +20,25 @@ That's all you've to do. --- +## Yarn support + +getstorybook also supports yarn. If you are using yarn, this is how to use it: + +``` +yarn global add getstorybook +getstorybook --use-yarn +``` + +`getstorybook` will identify it's installed with yarn and it'll use yarn to install deps. + +> This is the way, if you wanna use yarn for all of your storybook projects. + +If that's not the case, you can do this: + +``` +npm i -g getstorybook +getstorybook --use-yarn + +``` + For more information, refer [React Storybook](https://github.com/kadirahq/react-storybook) documentation. diff --git a/bin/generate.js b/bin/generate.js index cc9e924..86ff0d3 100755 --- a/bin/generate.js +++ b/bin/generate.js @@ -9,7 +9,7 @@ var types = require('../lib/project_types'); var commandLog = require('../lib/helpers').commandLog; var codeLog = require('../lib/helpers').codeLog; var paddedLog = require('../lib/helpers').paddedLog; -var installNpmDeps = require('../lib/helpers').installNpmDeps; +var installDeps = require('../lib/helpers').installDeps; var chalk = require('chalk'); var logger = console; @@ -18,12 +18,21 @@ var pkg = require('../package.json'); program .version(pkg.version) .option('-f --force', 'Forcely add storybook') + .option('-Y --use-yarn', 'Use yarn to install deps') .parse(process.argv); var welcomeMessage = 'getstorybook - the simplest way to add a storybook to your project.'; logger.log(chalk.inverse('\n ' + welcomeMessage + ' \n')); +var useYarn = Boolean(program.useYarn) || /\.yarn-cache/.test(__dirname); + +var npmOptions = { + useYarn: useYarn +}; + +var runStorybookCommand = useYarn? 'yarn run storybook' : 'npm run storybook'; + // Update notify code. updateNotifier({ pkg: pkg, @@ -55,11 +64,11 @@ switch (projectType) { require('../generators/REACT_SCRIPTS'); done(); - installNpmDeps(); + installDeps(npmOptions); logger.log('\nTo run your storybook, type:\n'); codeLog([ - 'npm run storybook' + runStorybookCommand ]); logger.log('\nFor more information visit:', chalk.cyan('http://getstorybook.io')); break; @@ -69,11 +78,11 @@ switch (projectType) { require('../generators/REACT'); done(); - installNpmDeps(); + installDeps(npmOptions); logger.log('\nTo run your storybook, type:\n'); codeLog([ - 'npm run storybook' + runStorybookCommand ]); logger.log('\nFor more information visit:', chalk.cyan('http://getstorybook.io')); break; @@ -83,11 +92,11 @@ switch (projectType) { require('../generators/REACT_NATIVE'); done(); - installNpmDeps(); + installDeps(npmOptions); logger.log('\nTo run your storybook, type:\n'); codeLog([ - 'npm run storybook' + runStorybookCommand ]); logger.log('\nFor more information visit:', chalk.cyan('http://getstorybook.io')); break; @@ -97,11 +106,11 @@ switch (projectType) { require('../generators/METEOR'); done(); - installNpmDeps(); + installDeps(npmOptions); logger.log('\nTo run your storybook, type:\n'); codeLog([ - 'npm run storybook' + runStorybookCommand ]); logger.log('\nFor more information visit:', chalk.cyan('http://getstorybook.io')); break; @@ -111,11 +120,11 @@ switch (projectType) { require('../generators/WEBPACK_REACT'); done(); - installNpmDeps(); + installDeps(npmOptions); logger.log('\nTo run your storybook, type:\n'); codeLog([ - 'npm run storybook' + runStorybookCommand ]); logger.log('\nFor more information visit:', chalk.cyan('http://getstorybook.io')); break; @@ -125,11 +134,11 @@ switch (projectType) { require('../generators/REACT'); done(); - installNpmDeps(); + installDeps(npmOptions); logger.log('\nTo run your storybook, type:\n'); codeLog([ - 'npm run storybook' + runStorybookCommand ]); logger.log('\nFor more information visit:', chalk.cyan('http://getstorybook.io')); break; diff --git a/generators/REACT_SCRIPTS/template/src/stories/Welcome.js b/generators/REACT_SCRIPTS/template/src/stories/Welcome.js index 2060daf..2170d7b 100644 --- a/generators/REACT_SCRIPTS/template/src/stories/Welcome.js +++ b/generators/REACT_SCRIPTS/template/src/stories/Welcome.js @@ -81,8 +81,8 @@ export default class Welcome extends React.Component { />

- Usually we create stories with smaller UI components in your app.
- Have a look at the Writing Stories section in our documentation. + Usually we create stories with smaller UI components in the app.
+ Have a look at the Writing Stories section in our documentation.

); diff --git a/lib/helpers.js b/lib/helpers.js index f827bc1..7e3eb6e 100644 --- a/lib/helpers.js +++ b/lib/helpers.js @@ -86,14 +86,22 @@ exports.codeLog = function codeLog(codeLines, leftPadAmount) { logger.log(finalResult); }; -exports.installNpmDeps = function () { - var done = exports.commandLog('Preparing to install NPM dependencies'); +exports.installDeps = function (options) { + var done = exports.commandLog('Preparing to install dependencies'); done(); + console.log(); - var result = spawnSync('npm', ['install'], { stdio: 'inherit' }); - done = exports.commandLog('Installing NPM dependencies'); + var result; + if (options.useYarn) { + result = spawnSync('yarn', { stdio: 'inherit' }); + } else { + result = spawnSync('npm', ['install'], { stdio: 'inherit' }); + } + + console.log(); + done = exports.commandLog('Installing dependencies'); if (result.status !== 0) { - done('An error occured while running `npm install`.'); + done('An error occured while installing dependencies`.'); process.exit(1); } done(); diff --git a/package.json b/package.json index 1d64bc5..a879351 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "getstorybook", - "version": "1.5.1", + "version": "1.5.3", "description": "Easiest way to add Storybook support to your project.", "bin": { "getstorybook": "./bin/generate.js"