diff --git a/.eslintignore b/.eslintignore index b5bb780..3bf0a37 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,5 +1,3 @@ /coverage -/es -/lib /node_modules /templates diff --git a/.gitignore b/.gitignore index dd2d28e..a2f3813 100644 --- a/.gitignore +++ b/.gitignore @@ -1,7 +1,5 @@ /.nyc_output /coverage -/es -/lib /node_modules npm-debug.log* .DS_Store \ No newline at end of file diff --git a/.husky/commit-msg b/.husky/commit-msg new file mode 100755 index 0000000..5a85000 --- /dev/null +++ b/.husky/commit-msg @@ -0,0 +1,4 @@ +#!/bin/sh +. "$(dirname "$0")/_/husky.sh" + +npx --no -- commitlint --edit $1 diff --git a/.husky/pre-commit b/.husky/pre-commit new file mode 100755 index 0000000..786ba1b --- /dev/null +++ b/.husky/pre-commit @@ -0,0 +1,4 @@ +#!/bin/sh +. "$(dirname "$0")/_/husky.sh" + +npm run eslint && npm run test diff --git a/.nvmrc b/.nvmrc new file mode 100644 index 0000000..da2d398 --- /dev/null +++ b/.nvmrc @@ -0,0 +1 @@ +14 \ No newline at end of file diff --git a/.travis.yml b/.travis.yml index 3bfa8ef..957400a 100644 --- a/.travis.yml +++ b/.travis.yml @@ -2,8 +2,7 @@ if: tag IS blank language: node_js node_js: - - "12" - - "10" + - "14" env: global: - NO_UPDATE_NOTIFIER=1 diff --git a/.versionrc.js b/.versionrc.js index 7c22983..49a6150 100644 --- a/.versionrc.js +++ b/.versionrc.js @@ -13,6 +13,6 @@ module.exports = { { type: 'refactor', section: 'Code Refactoring' }, { type: 'test', section: 'Tests' }, { type: 'build', section: 'Build System' }, - { type: 'ci', section: 'Continuous Integration' } - ] + { type: 'ci', section: 'Continuous Integration' }, + ], }; diff --git a/MIGRATE-7-to-8.md b/MIGRATE-7-to-8.md new file mode 100644 index 0000000..9b4b052 --- /dev/null +++ b/MIGRATE-7-to-8.md @@ -0,0 +1,151 @@ +# Migrate from 7x to 8x + +`create-react-styleguide@8` introduced breaking changes around the build processes and config files. + +## Package config + +You will need to modify output file pointers and dependencies. + +## Output files + +The new build process uses Rollup and creates 4 bundles, dev and prod for ESM and CJS. An application, which imports your package, will select a correct bundle, based on node environment and bundler capabilities. In example, ESM for Vite or CJS for Webpack 4. + +Modify your `package.json` to use the following: + +```json +{ + "main": "dist/cjs/index.js", + "module": "dist/es/index.js", + "exports": { + ".": { + "import": "./dist/es/index.js", + "require": "./dist/cjs/index.js" + } + } +} +``` + +### Dependencies + +All `babel`, `eslint`, and `jest` packages are now required by CRS and not needed as dependencies in your project. Also, all peer dependencies became regular dependencies. Rollup build will exclude them from the final bundle, but they will still be available in `node_modules` as transient dependencies. Please be mindful that a project, which uses your library, can overwrite the dependencies, in example `react` or `lodash` version. + +Your project package dependencies should look like this: + +```json +{ + "dependencies": { + "prop-types": "x.y.z", + "react": "x.y.z", + "react-dom": "x.y.z", + "styled-components": "x.y.z", + "// other-prod-packages": "x.y.z" + }, + "devDependencies": { + "create-react-styleguide": "x.y.z", + "husky": "x.y.z", + "react-test-renderer": "x.y.z", + "// other-dev-packages": "x.y.z" + } +} +``` + +## NEW Rollup config + +Add `rollup.config.js` to the root of your project with the snippet from `./templates/base/rollup.config.js`. + +Feel free to customize it to your liking. In example: + +```diff +const { rollupConfig } = require('create-react-styleguide'); ++const yourRollupPlugin = require('your-rollup-plugin'); + +module.exports = { + ...rollupConfig, ++ plugins: [...rollupConfig.plugins, yourRollupPlugin()], +}; +``` + +## NEW Prettier config + +Add, or modify, `prettier.config.js` on the root of your project with the snippet from `./templates/base/prettier.config.js`. + +## Babel config + +Modify your `babel.config.js` and use the snippet from `./templates/base/babel.config.js` as inspiration. + +Feel free to customize it to your liking. In example: + +```diff +const { babelConfig } = require('create-react-styleguide'); + +module.exports = { + ...babelConfig, ++ presets: [...babelConfig.presets, ['your-babel-preset', {}]], ++ plugins: [...babelConfig.plugins, ['your-babel-plugin', {}]], +}; +``` + +In order to modify `babel-preset-zillow` you will need a more advanced changes, in example: + +```js +const { babelConfig, NODE_ENVIRONMENTS } = require('create-react-styleguide'); + +const { NODE_ENV } = process.env; +const isTest = NODE_ENV === NODE_ENVIRONMENTS.TEST; + +// Find our custom `babel-zillow-preset` config +const zillowPreset = babelConfig.presets.find(preset => preset[0] === 'babel-preset-zillow'); + +// Modify `styled-components` preset config +zillowPreset[1]['styled-components'] = { + ...zillowPreset[1]['styled-components'], + namespace: isTest ? 'sc' : `my-library-name`, +}; + +// Modify `remove-prop-types` preset config +zillowPreset[1].removePropTypes = { + ...zillowPreset[1].removePropTypes, + additionalLibraries: [/\/custom-prop-types$/], +}; + +// Export custom config +module.exports = { + ...babelConfig, + presets: [...babelConfig.presets.filter(preset => preset[0] !== zillowPreset[0]), zillowPreset], +}; +``` + +### Remove prop types config + +Previously, `prop-types` import and object would remain in the output bundle. In 8x we try our best to remove them in production mode. However, in some components, the import and prop types object persist. In those cases you can annotate a component and force a removal. [See here](https://github.com/oliviertassinari/babel-plugin-transform-react-remove-prop-types#with-comment-annotation) for more information. + +```jsx +SomeComponent.propTypes /* remove-proptypes */ = {}; +``` + +## Jest config + +Modify your `jest.config.js` and use the snippet from `./templates/base/jest.config.js` as inspiration. + +Feel free to customize it to your liking. In example: + +```diff +const { jestConfig } = require('create-react-styleguide'); + +module.exports = { + ...jestConfig, ++ setupFilesAfterEnv: [...jestConfig.setupFilesAfterEnv, '/jest.setup.js'], ++ coveragePathIgnorePatterns: [ ++ ...jestConfig.coveragePathIgnorePatterns, ++ '/src/thirdparty/', ++ ], ++ coverageThreshold: { ++ global: { ++ branches: 80, ++ functions: 80, ++ lines: 80, ++ statements: 80, ++ }, ++ }, +}; +``` diff --git a/README.md b/README.md index 7dd789d..39c75fd 100644 --- a/README.md +++ b/README.md @@ -29,7 +29,7 @@ You can see all options for project generation with the following command: npx create-react-styleguide --help ``` -#### `--stable` +### `--stable` By default, the project will be built with the latest caret (^) version of all dependencies. If this configuration fails, use the `--stable` flag to generate with a known working configuration. @@ -37,14 +37,14 @@ By default, the project will be built with the latest caret (^) version of all d npx create-react-styleguide new my-new-styleguide --stable ``` -## npm scripts +## NPM Scripts Generated projects include the following npm scripts out of the box: | Script | Description | | ------------------------ | ----------------------------------------------------------- | | npm start | Start the styleguide server on http://localhost:6060 | -| npm run build | Build the component library to the `lib` folder | +| npm run build | Build the component library to the `dist` folder | | npm run build:styleguide | Build the styleguide to the `styleguide` folder | | npm run build:watch | Watch the `src` folder for changes and run the build script | | npm run clean | Clean generated folders | @@ -55,36 +55,95 @@ Generated projects include the following npm scripts out of the box: | npm run test:update | Update unit test snapshots | | npm run test:watch | Run unit tests while watching for changes | -## Document your styleguide +## Document Styleguide By default, we expose some meta data from your `package.json` file at the top of your styleguide -- at the very least, make sure you set the `"version"`, `"homepage"`, and `"author"` properties. You can further document your library with markdown files using the [`sections`](https://react-styleguidist.js.org/docs/configuration.html#sections-1) configuration from [React Styleguidist](https://react-styleguidist.js.org/). By convention, additional markdown documentation should go in the `docs` folder so that they get properly packaged when [linking multiple styleguides](#linking-multiple-styleguides). ![Customized style guide](assets/customized.png) -## Adding SVG support +## Modify Rollup Config -You can add SVG support with the [inline-react-svg](https://github.com/airbnb/babel-plugin-inline-react-svg) babel plugin. `npm i --save-dev babel-plugin-inline-react-svg` and then update your `babel.config.js` file as follows: +You can customize Rollup configuration to your requirements. In example, you can update `rollup.config.js` with a sample plugin and a banner for each output file. ```diff - module.exports = { - presets: [['zillow', { modules: false }]], -+ plugins: ['inline-react-svg'], - env: { - cjs: { - presets: ['zillow'] - }, - test: { - presets: ['zillow'] - } - } - }; +const { rollupConfig } = require('create-react-styleguide'); ++const sampleRollupPlugin = require('sample-rollup-plugin'); + +module.exports = { + ...rollupConfig, + ++ output: { ++ ...rollupConfig.output, ++ banner: '/* (c) My Company Inc. */', ++ }, + ++ plugins: [ ++ ...rollupConfig.plugins, ++ sampleRollupPlugin(), ++ ], +}; +``` + +## Modify Babel Config + +You can customize Babel configuration to your requirements. In example, you can add SVG support with the [inline-react-svg](https://github.com/airbnb/babel-plugin-inline-react-svg) babel plugin. `npm i --save-dev babel-plugin-inline-react-svg` and then update `babel.config.js` file as follows: + +```diff +const { babelConfig } = require('create-react-styleguide'); + +module.exports = { + ...babelConfig, ++ plugins: [ ++ ...babelConfig.plugins, ++ 'inline-react-svg', ++ ], +}; ``` You should now be able to import and use SVGs as if they were react components! -## Linking multiple styleguides +## Modify Jest Config + +You can customize Jest configuration to your requirements. In example, you can update `jest.config.js` with new threshold values. + +```diff +const { jestConfig } = require('create-react-styleguide'); + +module.exports = { + ...jestConfig, ++ coverageThreshold: { ++ global: { ++ branches: 80, ++ functions: 80, ++ lines: 80, ++ statements: 80, ++ }, ++ }, +}; +``` + +## Styleguide Config + +Require the module: -A useful feature of create-react-styleguide is the ability to link multiple CRS component libraries into a single project. This means that separate teams can manage and own their own individual CRS libraries, and then bring them all together into a master project for broader visibility. +```js +// styleguide.config.js +const { createStyleguideConfig } = require('create-react-styleguide'); +``` + +### `createStyleguideConfig(config, options)` + +Creates a [React Styleguidist configuration object](https://react-styleguidist.js.org/docs/configuration.html) with some default configuration. + +- `config [object]` - A configuration object to be shallowly merged with the rest of the configuration +- `options.styleguides [array]` - An array of CRS npm modules (the module must be installed as a dependency to your project) +- `options.packageSection [boolean]` - Include `package.json` details as a top level section (default: `true`) +- `options.packageSectionComponents [boolean]` - Include `components` configuration in the top-level package section (default: `false`) +- `options.componentsSection [boolean]` - Include `components` configuration as its own separate section (default: `true`) + +## Linking Styleguides + +A useful feature of `create-react-styleguide` is the ability to link multiple CRS component libraries into a single project. This means that separate teams can manage and own their own individual CRS libraries, and then bring them all together into a master project for broader visibility. For a styleguide to be linked, it must first be published to npm. Running `npm publish` will build and publish your component library so that it can be consumed by the master project. @@ -107,7 +166,7 @@ That's it! Running `npm start` will now show components from all linked librarie ![Linked style guide](assets/linked.png) -## Deploying your styleguide to GitHub Pages +## Deploying Styleguide to GitHub Pages Install the `gh-pages` module: @@ -126,36 +185,11 @@ Add the following scripts to your `package.json`: Running `npm run deploy` will now deploy your styleguide to Github Pages! -## Node API - -Require the module: - -```javascript -const { createStyleguideConfig, createJestConfig } = require('create-react-styleguide'); -``` - -### `createStyleguideConfig(config, options)` - -Creates a [React Styleguidist configuration object](https://react-styleguidist.js.org/docs/configuration.html) with some default configuration. - -- `config [object]` - A configuration object to be shallowly merged with the rest of the configuration -- `options.styleguides [array]` - An array of CRS npm modules (the module must be installed as a dependency to your project) -- `options.packageSection [boolean]` - Include `package.json` details as a top level section (default: `true`) -- `options.packageSectionComponents [boolean]` - Include `components` configuration in the top-level package section (default: `false`) -- `options.componentsSection [boolean]` - Include `components` configuration as its own separate section (default: `true`) -- `options.ie11Transforms [array]` - An array of additional modules that need babel transforms for IE11 compatibility ([#1327](https://github.com/styleguidist/react-styleguidist/pull/1327)) - -### `createJestConfig(config)` - -Creates a [Jest configuration object](https://jestjs.io/docs/en/configuration) with some default configuration. - -- `config [object]` - A configuration object to be shallowly merged with the rest of the configuration - ## Environment Variables ### `DEBUG` -Both `createStyleguideConfig` and `createJestConfig` will log their results to the console when the `DEBUG` environment variable is set to any non-empty value (such as `true` or `1`). A quick way to see the configuration these functions are creating is to run the following: +All config files will log their results to the console when the `DEBUG` environment variable is set to any non-empty value (such as `true` or `1`). A quick way to see the configuration these functions are creating is to run the following: ``` DEBUG=true node styleguide.config.js @@ -179,4 +213,8 @@ PORT=12345 npm start `create-react-styleguide` leverages [react-styleguidist](https://react-styleguidist.js.org/) under the covers for its living style guide. -Builds are created by simple running the `src` directory through [Babel](https://babeljs.io/) using whatever configuration is in your `.babelrc` file. The build will run twice, once with the default configuration which builds ES modules compatible with tree shaking, and once with the `"cjs"` env configuration which builds CommonJS modules. +Builds are created by running the `src` directory through [Rollup](https://rollupjs.org/) and [Babel](https://babeljs.io/). The build will create 4 bundles, dev and prod for CJS and ESM formats. An application, which imports your package, will select a correct bundle, based on node environment and bundler capabilities. In example, ESM for Vite or CJS for Webpack 4. + +## Migration Guide from 7x to 8x + +Please read our [migration guide](./MIGRATE-7-to-8.md) to streamline your update efforts. diff --git a/babel.config.js b/babel.config.js deleted file mode 100644 index be1bc8d..0000000 --- a/babel.config.js +++ /dev/null @@ -1,12 +0,0 @@ -module.exports = { - presets: [ - [ - 'babel-preset-zillow', - { - targets: { - node: 'current', - }, - }, - ], - ], -}; diff --git a/src/bin/commands/new.js b/bin/commands/new.js similarity index 57% rename from src/bin/commands/new.js rename to bin/commands/new.js index a1d3fba..6979c5c 100644 --- a/src/bin/commands/new.js +++ b/bin/commands/new.js @@ -3,77 +3,43 @@ * https://github.com/insin/nwb/blob/v0.22.0/src/createProject.js */ const path = require('path'); -const chalk = require('chalk'); -const copyTemplateDir = require('copy-template-dir'); const runSeries = require('run-series'); +const semver = require('semver'); const install = require('../util/install'); -const pkg = require('../../../package.json'); +const pkg = require('../../package.json'); const { initGit, initialCommit } = require('../util/git'); const inquirer = require('inquirer'); +const copyTemplate = require('../util/copy-template'); -const STABLE_VERSIONS = { - // dependencies - 'prop-types': '15.7.2', - 'styled-components': '5.2.2', - // devDependencies - 'babel-plugin-styled-components': '1.12.0', - 'babel-preset-zillow': '4.4.0', - 'eslint-plugin-jest': '24.3.2', - 'eslint-plugin-zillow': '4.0.0', - 'husky': '4.3.8', - 'jest-styled-components': '7.0.3', - 'react': '17.0.2', - 'react-dom': '17.0.2', - 'react-test-renderer': '17.0.2', - // Always use the latest version of create-react-styleguide - 'create-react-styleguide': '', +const STABLE_DEPENDENCIES = { + 'prop-types': pkg.devDependencies['prop-types'], + 'react': pkg.devDependencies.react, + 'react-dom': pkg.devDependencies['react-dom'], + 'styled-components': pkg.devDependencies['styled-components'], }; -/** - * Copy a project template and log created files if successful. - */ -function copyTemplate(templateDir, targetDir, templateVars, cb) { - copyTemplateDir(templateDir, targetDir, templateVars, (err, createdFiles) => { - if (err) { - cb(err); - return; - } - createdFiles.sort().forEach(createdFile => { - const relativePath = path.relative(targetDir, createdFile); - // eslint-disable-next-line no-console - console.log(` ${chalk.green('create')} ${relativePath}`); - }); - cb(); - }); -} +const STABLE_DEV_DEPENDENCIES = { + 'create-react-styleguide': pkg.version, + 'husky': '4.3.8', + 'react-test-renderer': pkg.devDependencies['react-test-renderer'], +}; /** * Create an npm module project skeleton. */ function createModuleProject(args, name, targetDir, cliAnswers, cb) { - let devDependencies = [ - 'react', - 'react-dom', - 'create-react-styleguide', - 'babel-preset-zillow', - 'husky', - 'react-test-renderer', - ]; - if (args.eslint === 'zillow') { - devDependencies.push('eslint-plugin-zillow', 'eslint-plugin-jest'); - } + let dependencies = Object.keys(STABLE_DEPENDENCIES); + let devDependencies = Object.keys(STABLE_DEV_DEPENDENCIES); - let dependencies = ['prop-types']; - if (args.styles === 'styled-components') { - dependencies.push('styled-components'); - devDependencies.push('babel-plugin-styled-components', 'jest-styled-components'); + if (args.styles !== 'styled-components') { + dependencies = dependencies.filter(dep => dep !== 'styled-components'); } - const baseTemplateDir = path.join(__dirname, '../../../templates/base'); + const baseTemplateDir = path.join(__dirname, '../../templates/base'); - let templateDir = path.join(__dirname, '../../../templates/inline-styles'); + let templateDir = path.join(__dirname, '../../templates/inline-styles'); if (args.styles === 'styled-components') { - templateDir = path.join(__dirname, '../../../templates/styled-components'); + templateDir = path.join(__dirname, '../../templates/styled-components'); } const templateVars = { @@ -84,16 +50,12 @@ function createModuleProject(args, name, targetDir, cliAnswers, cb) { args.eslint === 'zillow' ? '\n "eslint": "create-react-styleguide script eslint",\n "eslint:fix": "create-react-styleguide script eslint:fix",' : '', - createReactStyleguideVersion: pkg.version, huskyConfig: args.eslint === 'zillow' ? 'npm run eslint && npm run test' : 'npm run test', }; - // TODO Get from npm so we don't have to manually update on major releases - templateVars.reactPeerVersion = '^16 || ^17'; - let copyEslintTemplate = callback => callback(); if (args.eslint === 'zillow') { - const eslintTemplateDir = path.join(__dirname, '../../../templates/zillow-eslint'); + const eslintTemplateDir = path.join(__dirname, '../../templates/zillow-eslint'); copyEslintTemplate = callback => copyTemplate(eslintTemplateDir, targetDir, templateVars, callback); } @@ -101,7 +63,7 @@ function createModuleProject(args, name, targetDir, cliAnswers, cb) { // By default, the latest caret version of all dependencies are installed. // If for some reason that fails, we can fall back to a previously known stable release. const versionMap = dep => { - const version = STABLE_VERSIONS[dep]; + const version = semver.clean({ ...STABLE_DEPENDENCIES, ...STABLE_DEV_DEPENDENCIES }[dep]); if (version) { return `${dep}@${args.stable ? '' : '^'}${version}`; } diff --git a/src/bin/commands/script.js b/bin/commands/script.js similarity index 100% rename from src/bin/commands/script.js rename to bin/commands/script.js diff --git a/bin/commands/scripts/build.js b/bin/commands/scripts/build.js new file mode 100644 index 0000000..32a9a48 --- /dev/null +++ b/bin/commands/scripts/build.js @@ -0,0 +1,38 @@ +const { join } = require('path'); +const runSeries = require('run-series'); +const { spawn } = require('child_process'); +const { rollup } = require('../../util/executables'); +const noop = require('../../util/noop'); +const copyTemplate = require('../../util/copy-template'); +const { DIRECTORIES, MODULE_FORMATS, NODE_ENVIRONMENTS } = require('../../../lib'); + +const distTemplateDirectory = join(__dirname, `../../../templates/${DIRECTORIES.DIST}`); +const distTargetDirectory = join(process.cwd(), DIRECTORIES.DIST); + +const build = ({ env, format, flags, cb }) => + spawn(rollup, ['-c', ...flags], { + stdio: 'inherit', + env: { + ...process.env, + NODE_ENV: env, + MODULE_FORMAT: format, + }, + }).on('close', cb); + +module.exports = ({ callback = noop, flags }) => { + const steps = [ + cb => copyTemplate(distTemplateDirectory, distTargetDirectory, {}, cb), + cb => build({ env: NODE_ENVIRONMENTS.DEV, format: MODULE_FORMATS.ESM, flags, cb }), + ...(flags.includes('-w') + ? [] + : [ + cb => + build({ env: NODE_ENVIRONMENTS.DEV, format: MODULE_FORMATS.CJS, flags, cb }), + cb => + build({ env: NODE_ENVIRONMENTS.PROD, format: MODULE_FORMATS.ESM, flags, cb }), + cb => + build({ env: NODE_ENVIRONMENTS.PROD, format: MODULE_FORMATS.CJS, flags, cb }), + ]), + ]; + runSeries(steps, callback); +}; diff --git a/src/bin/commands/scripts/build_styleguide.js b/bin/commands/scripts/build_styleguide.js similarity index 100% rename from src/bin/commands/scripts/build_styleguide.js rename to bin/commands/scripts/build_styleguide.js diff --git a/src/bin/commands/scripts/build_watch.js b/bin/commands/scripts/build_watch.js similarity index 100% rename from src/bin/commands/scripts/build_watch.js rename to bin/commands/scripts/build_watch.js diff --git a/src/bin/commands/scripts/clean.js b/bin/commands/scripts/clean.js similarity index 80% rename from src/bin/commands/scripts/clean.js rename to bin/commands/scripts/clean.js index 1977faa..c91d405 100644 --- a/src/bin/commands/scripts/clean.js +++ b/bin/commands/scripts/clean.js @@ -3,9 +3,10 @@ const runSeries = require('run-series'); const rimraf = require('rimraf'); const ora = require('ora'); const noop = require('../../util/noop'); +const { DIRECTORIES } = require('../../../lib'); const currentDir = process.cwd(); -const dirs = ['lib', 'es', 'styleguide', 'coverage']; +const dirs = [DIRECTORIES.COVERAGE, DIRECTORIES.DIST, DIRECTORIES.STYLEGUIDE]; module.exports = ({ callback = noop }) => { runSeries( diff --git a/src/bin/commands/scripts/eslint.js b/bin/commands/scripts/eslint.js similarity index 100% rename from src/bin/commands/scripts/eslint.js rename to bin/commands/scripts/eslint.js diff --git a/src/bin/commands/scripts/eslint_fix.js b/bin/commands/scripts/eslint_fix.js similarity index 100% rename from src/bin/commands/scripts/eslint_fix.js rename to bin/commands/scripts/eslint_fix.js diff --git a/src/bin/commands/scripts/prepublishOnly.js b/bin/commands/scripts/prepublishOnly.js similarity index 100% rename from src/bin/commands/scripts/prepublishOnly.js rename to bin/commands/scripts/prepublishOnly.js diff --git a/src/bin/commands/scripts/start.js b/bin/commands/scripts/start.js similarity index 100% rename from src/bin/commands/scripts/start.js rename to bin/commands/scripts/start.js diff --git a/src/bin/commands/scripts/test.js b/bin/commands/scripts/test.js similarity index 57% rename from src/bin/commands/scripts/test.js rename to bin/commands/scripts/test.js index 97bc82e..8e23208 100644 --- a/src/bin/commands/scripts/test.js +++ b/bin/commands/scripts/test.js @@ -1,9 +1,14 @@ const { spawn } = require('child_process'); const { jest } = require('../../util/executables'); const noop = require('../../util/noop'); +const { NODE_ENVIRONMENTS } = require('../../../lib'); module.exports = ({ callback = noop, flags = [] }) => { - spawn(jest, flags, { + spawn(jest, [...flags], { stdio: 'inherit', + env: { + ...process.env, + NODE_ENV: NODE_ENVIRONMENTS.TEST, + }, }).on('close', callback); }; diff --git a/src/bin/commands/scripts/test_coverage.js b/bin/commands/scripts/test_coverage.js similarity index 100% rename from src/bin/commands/scripts/test_coverage.js rename to bin/commands/scripts/test_coverage.js diff --git a/src/bin/commands/scripts/test_update.js b/bin/commands/scripts/test_update.js similarity index 100% rename from src/bin/commands/scripts/test_update.js rename to bin/commands/scripts/test_update.js diff --git a/src/bin/commands/scripts/test_watch.js b/bin/commands/scripts/test_watch.js similarity index 100% rename from src/bin/commands/scripts/test_watch.js rename to bin/commands/scripts/test_watch.js diff --git a/src/bin/create-react-styleguide.js b/bin/index.js similarity index 79% rename from src/bin/create-react-styleguide.js rename to bin/index.js index 3029b5f..84d8f01 100755 --- a/src/bin/create-react-styleguide.js +++ b/bin/index.js @@ -1,6 +1,7 @@ #!/usr/bin/env node -const yargs = require('yargs'); +const yargs = require('yargs/yargs'); +const { hideBin } = require('yargs/helpers'); const onCommandComplete = code => process.exit(code); @@ -10,24 +11,23 @@ const commandHandler = argv => { }; // eslint-disable-next-line no-unused-expressions -yargs - .wrap(120) +yargs(hideBin(process.argv)) .usage('Usage: create-react-styleguide [options]') - .command({ - command: 'new ', - desc: 'Create a new project in the given directory', - builder: y => { + .demandCommand(1) + .command( + 'new ', + 'Create a new project in the given directory', + y => y.positional('project-directory', { describe: 'The directory to create', type: 'string', - }); - }, - handler: commandHandler, - }) - .command({ - command: 'script