-
-
Notifications
You must be signed in to change notification settings - Fork 9.3k
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
CLI refactor #4168
Changes from 8 commits
b9255b2
01d7080
d80dc8f
86184c8
48c0f4a
7c096b0
fc59925
e09dec6
db75294
79532d4
fbf0a86
14f7b5f
fa40eef
30298fb
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
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). |
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). |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,201 +1,49 @@ | ||
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('To install storybook, use the following command instead:\n')); | ||
codeLog(['storybook init']); | ||
logger.log(); | ||
process.exit(0); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The depreciation should actually work. I assume There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Sounds logical, will do |
||
} | ||
|
||
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 Storybook server') | ||
.option('-N --use-npm', 'Use NPM to start the Storybook server') | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 commentThe 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 commentThe reason will be displayed to describe this comment to others. Learn more. also |
||
.action(options => yarnSpawnSync(options, ['run', 'storybook'])); | ||
|
||
let projectType; | ||
program | ||
.command('build') | ||
.description('Build the Storybook server') | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. maybe something like "Build the Storybook static app" ? |
||
.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 => { | ||
console.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(); | ||
} |
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.
oops
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.
--riot parameter does not exist yet
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.
I will address this in another PR, see #4168 (comment)