-
-
Notifications
You must be signed in to change notification settings - Fork 9.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
CLI refactor #4168
Merged
Merged
CLI refactor #4168
Changes from all commits
Commits
Show all changes
14 commits
Select commit
Hold shift + click to select a range
b9255b2
Change getstorybook command to storybook init
Keraito 01d7080
Add fallback for unknown commands and help on storybook
Keraito d80dc8f
Add start and build command
Keraito 86184c8
Change storybook run command and update naming in initiate function
Keraito 48c0f4a
Apperently I didn't add storybook command
Keraito 7c096b0
Update tests and snapshots
Keraito fc59925
Deprecate getstorybook
Keraito e09dec6
Update getstorybook occurences in docs
Keraito db75294
Update missed getstorybook occurrences
Keraito 79532d4
Fix linter
Keraito fbf0a86
Update CLi snapshots
Keraito 14f7b5f
Change descriptions of commands
Keraito fa40eef
Also init storybook on deprecated getstorybook
Keraito 30298fb
Remove --riot flag from doc
Keraito File filter
Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,3 @@ | ||
# CRNA Kitchen Sink | ||
|
||
This project was bootstrapped with [Create React Native App](https://github.com/react-community/create-react-native-app) and storybook using [getstorybook](https://www.npmjs.com/package/@storybook/cli). | ||
This project was bootstrapped with [Create React Native App](https://github.com/react-community/create-react-native-app) and storybook using [storybook CLI](https://www.npmjs.com/package/@storybook/cli). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,3 @@ | ||
# Marko Kitchen Sink | ||
|
||
This project was bootstrapped with [Marko cli (create command)](https://github.com/marko-js/marko-cli) and storybook using [getstorybook](https://www.npmjs.com/package/@storybook/cli). | ||
This project was bootstrapped with [Marko cli (create command)](https://github.com/marko-js/marko-cli) and storybook using [storybook CLI](https://www.npmjs.com/package/@storybook/cli). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,201 +1,50 @@ | ||
import updateNotifier from 'update-notifier'; | ||
import program from 'commander'; | ||
import chalk from 'chalk'; | ||
import detect from '../lib/detect'; | ||
import hasYarn from '../lib/has_yarn'; | ||
import types from '../lib/project_types'; | ||
import { commandLog, codeLog, paddedLog, installDeps } from '../lib/helpers'; | ||
import pkg from '../package.json'; | ||
import angularGenerator from '../generators/ANGULAR'; | ||
import meteorGenerator from '../generators/METEOR'; | ||
import reactGenerator from '../generators/REACT'; | ||
import reactNativeGenerator from '../generators/REACT_NATIVE'; | ||
import reactNativeScriptsGenerator from '../generators/REACT_NATIVE_SCRIPTS'; | ||
import reactScriptsGenerator from '../generators/REACT_SCRIPTS'; | ||
import sfcVueGenerator from '../generators/SFC_VUE'; | ||
import updateOrganisationsGenerator from '../generators/UPDATE_PACKAGE_ORGANIZATIONS'; | ||
import vueGenerator from '../generators/VUE'; | ||
import polymerGenerator from '../generators/POLYMER'; | ||
import webpackReactGenerator from '../generators/WEBPACK_REACT'; | ||
import mithrilGenerator from '../generators/MITHRIL'; | ||
import markoGenerator from '../generators/MARKO'; | ||
import htmlGenerator from '../generators/HTML'; | ||
import riotGenerator from '../generators/RIOT'; | ||
import initiate from '../lib/initiate'; | ||
import yarnSpawnSync from '../lib/yarn_spawn_sync'; | ||
import { codeLog } from '../lib/helpers'; | ||
|
||
const logger = console; | ||
|
||
if (process.argv[1].includes('getstorybook')) { | ||
logger.log(chalk.yellow('WARNING: getstorybook is deprecated.')); | ||
logger.log(chalk.yellow('The official command to install Storybook from now on is:\n')); | ||
codeLog(['storybook init']); | ||
logger.log(); | ||
initiate({}, pkg); | ||
process.exit(0); | ||
} | ||
|
||
program | ||
.version(pkg.version) | ||
.command('init') | ||
.description('Initialize Storybook into your project.') | ||
.option('-f --force', 'Forcely add storybook') | ||
.option('-s --skip-install', 'Skip installing deps') | ||
.option('-N --use-npm', 'Use npm to install deps') | ||
.option('-p --parser <babel | babylon | flow>', 'jscodeshift parser') | ||
.option('-h --html', 'Add storybook for HTML') | ||
.parse(process.argv); | ||
|
||
const welcomeMessage = 'getstorybook - the simplest way to add a storybook to your project.'; | ||
logger.log(chalk.inverse(`\n ${welcomeMessage} \n`)); | ||
|
||
const useYarn = Boolean(program.useNpm !== true) && hasYarn(); | ||
.action(options => initiate(options, pkg)); | ||
|
||
const npmOptions = { | ||
useYarn, | ||
}; | ||
|
||
const runStorybookCommand = useYarn ? 'yarn run storybook' : 'npm run storybook'; | ||
|
||
// Update notify code. | ||
updateNotifier({ | ||
pkg, | ||
updateCheckInterval: 1000 * 60 * 60, // every hour (we could increase this later on.) | ||
}).notify(); | ||
program | ||
.command('start') | ||
.description('Start the local Storybook server') | ||
.option('-N --use-npm', 'Use NPM to start the Storybook server') | ||
.action(options => yarnSpawnSync(options, ['run', 'storybook'])); | ||
|
||
let projectType; | ||
program | ||
.command('build') | ||
.description('Build the Storybook static application') | ||
.option('-N --use-npm', 'Use NPM to build the Storybook server') | ||
.action(options => yarnSpawnSync(options, ['build', 'storybook'])); | ||
|
||
const done = commandLog('Detecting project type'); | ||
try { | ||
projectType = detect(program); | ||
} catch (ex) { | ||
done(ex.message); | ||
program.command('*', { noHelp: true }).action(cmd => { | ||
logger.error('Invalid command: %s.\nSee --help for a list of available commands.', cmd); | ||
process.exit(1); | ||
} | ||
done(); | ||
|
||
const end = () => { | ||
if (!program.skipInstall) { | ||
installDeps(npmOptions); | ||
} | ||
|
||
logger.log('\nTo run your storybook, type:\n'); | ||
codeLog([runStorybookCommand]); | ||
logger.log('\nFor more information visit:', chalk.cyan('https://storybook.js.org')); | ||
|
||
// Add a new line for the clear visibility. | ||
logger.log(); | ||
}; | ||
|
||
const CRNA_DISCUSSION = | ||
'https://github.com/storybooks/storybook/blob/master/app/react-native/docs/manual-setup.md'; | ||
|
||
const runGenerator = () => { | ||
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(); | ||
return Promise.resolve(); | ||
|
||
case types.UPDATE_PACKAGE_ORGANIZATIONS: | ||
return updateOrganisationsGenerator(program.parser, npmOptions) | ||
.then(() => null) // commmandLog doesn't like to see output | ||
.then(commandLog('Upgrading your project to the new storybook packages.')) | ||
.then(end); | ||
|
||
case types.REACT_SCRIPTS: | ||
return reactScriptsGenerator(npmOptions) | ||
.then(commandLog('Adding storybook support to your "Create React App" based project')) | ||
.then(end); | ||
|
||
case types.REACT: | ||
return reactGenerator(npmOptions) | ||
.then(commandLog('Adding storybook support to your "React" app')) | ||
.then(end); | ||
|
||
case types.REACT_NATIVE_SCRIPTS: { | ||
const app = chalk.bold('"./App.js"'); | ||
return reactNativeScriptsGenerator(npmOptions) | ||
.then(commandLog('Adding storybook support to your "Create React Native App" app')) | ||
.then(end) | ||
.then(() => { | ||
logger.log(chalk.red('NOTE: CRNA app installation is not 100% automated.')); | ||
logger.log(`To quickly run storybook, replace contents of ${app} with:\n`); | ||
codeLog(["export default from './storybook';"]); | ||
logger.log('\nFor a more complete discussion of options, see:\n'); | ||
logger.log(chalk.cyan(CRNA_DISCUSSION)); | ||
logger.log(); | ||
}); | ||
} | ||
|
||
case types.REACT_NATIVE: | ||
return reactNativeGenerator(npmOptions) | ||
.then(commandLog('Adding storybook support to your "React Native" app')) | ||
.then(end); | ||
|
||
case types.METEOR: | ||
return meteorGenerator(npmOptions) | ||
.then(commandLog('Adding storybook support to your "Meteor" app')) | ||
.then(end); | ||
|
||
case types.WEBPACK_REACT: | ||
return webpackReactGenerator(npmOptions) | ||
.then(commandLog('Adding storybook support to your "Webpack React" app')) | ||
.then(end); | ||
|
||
case types.REACT_PROJECT: | ||
return reactGenerator(npmOptions) | ||
.then(commandLog('Adding storybook support to your "React" library')) | ||
.then(end); | ||
|
||
case types.SFC_VUE: | ||
return sfcVueGenerator(npmOptions) | ||
.then(commandLog('Adding storybook support to your "Single File Components Vue" app')) | ||
.then(end); | ||
|
||
case types.VUE: | ||
return vueGenerator(npmOptions) | ||
.then(commandLog('Adding storybook support to your "Vue" app')) | ||
.then(end); | ||
|
||
case types.ANGULAR: | ||
return angularGenerator(npmOptions) | ||
.then(commandLog('Adding storybook support to your "Angular" app')) | ||
.then(end); | ||
|
||
case types.POLYMER: | ||
return polymerGenerator(npmOptions) | ||
.then(commandLog('Adding storybook support to your "Polymer" app')) | ||
.then(end); | ||
|
||
case types.MITHRIL: | ||
return mithrilGenerator(npmOptions) | ||
.then(commandLog('Adding storybook support to your "Mithril" app')) | ||
.then(end); | ||
|
||
case types.MARKO: | ||
return markoGenerator(npmOptions) | ||
.then(commandLog('Adding storybook support to your "Marko" app')) | ||
.then(end); | ||
|
||
case types.HTML: | ||
return htmlGenerator(npmOptions) | ||
.then(commandLog('Adding storybook support to your "HTML" app')) | ||
.then(end); | ||
|
||
case types.RIOT: | ||
return riotGenerator(npmOptions) | ||
.then(commandLog('Adding storybook support to your "riot.js" app')) | ||
.then(end); | ||
|
||
default: | ||
paddedLog(`We couldn't detect your project type. (code: ${projectType})`); | ||
paddedLog( | ||
"Please make sure you are running the `getstorybook` command in your project's root directory." | ||
); | ||
paddedLog( | ||
'You can also install storybook for plain HTML snippets with `getstorybook --html` or follow some of the slow start guides: https://storybook.js.org/basics/slow-start-guide/' | ||
); | ||
}); | ||
|
||
// Add a new line for the clear visibility. | ||
logger.log(); | ||
return Promise.resolve(); | ||
} | ||
}; | ||
program.version(pkg.version).parse(process.argv); | ||
|
||
runGenerator().catch(ex => { | ||
logger.error(`\n ${chalk.red(ex.stack)}`); | ||
process.exit(1); | ||
}); | ||
if (!program.args.length) { | ||
program.help(); | ||
} |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
npm is widely used outside storybook in my opinion. We can identify that easily but figuring out wether we have a package-lock.json or a yarn.lock
np is able to do that (https://github.com/sindresorhus/np)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sorry to say that at the very end of the review process, I did not see your PR earlier.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
When the CLI was made, I don't think NPM had the lockfile yet (i think), that's why the flag was added to the command. On the other hand, we can also argue that what should happen when both files are present (for whatever reason). Although I definitely agree with your solution if we want to prioritize NPM over Yarn, or the other way around which happens now, it would be a great idea
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
also
npm-shrinkwrap.json
😅