feat: add prettier config support

.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' },
+    ],
 };

MIGRATE-7-to-8.md

@@ -65,6 +65,10 @@ module.exports = {
 };
 ```
 
+## 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.

.prettierrc.js → lib/configs/prettier.config.js

@@ -1,2 +1 @@
-// just here so the editor plugins don't get fired
 module.exports = require('prettier-config-zillow');

lib/configs/rollup.config.js

@@ -9,8 +9,15 @@ const NODE_ENVIRONMENTS = require('../constants/NODE_ENVIRONMENTS');
 
 const currentDirectory = process.cwd();
 
-// eslint-disable-next-line zillow/import/no-dynamic-require
-const pkg = require(`${join(currentDirectory, 'package.json')}`);
+let pkg = {};
+
+try {
+    // eslint-disable-next-line zillow/import/no-dynamic-require, global-require
+    pkg = require(`${join(currentDirectory, 'package.json')}`);
+} catch (error) {
+    // eslint-disable-next-line no-console
+    console.log(error);
+}
 
 const { MODULE_FORMAT, NODE_ENV } = process.env;
 const isProduction = NODE_ENV === NODE_ENVIRONMENTS.PROD;

lib/index.js

@@ -1,5 +1,6 @@
 const babelConfig = require('./configs/babel.config');
 const jestConfig = require('./configs/jest.config');
+const prettierConfig = require('./configs/prettier.config');
 const rollupConfig = require('./configs/rollup.config');
 const createStyleguideConfig = require('./configs/createStyleguideConfig');
 const DIRECTORIES = require('./constants/DIRECTORIES');
@@ -9,6 +10,7 @@ const NODE_ENVIRONMENTS = require('./constants/NODE_ENVIRONMENTS');
 module.exports = {
     babelConfig,
     jestConfig,
+    prettierConfig,
     rollupConfig,
     createStyleguideConfig,
     DIRECTORIES,

package.json

@@ -61,6 +61,7 @@
     "jest-styled-components": "^7.0.5",
     "ora": "^5.4.1",
     "prettier": "^2.5.1",
+    "prettier-config-zillow": "^1.3.0",
     "react-styleguidist": "^11.1.6",
     "resolve": "^1.20.0",
     "resolve-pkg": "^2.0.0",

prettier.config.js

@@ -0,0 +1,5 @@
+const { prettierConfig } = require('./lib');
+
+module.exports = {
+    ...prettierConfig,
+};

templates/base/CONTRIBUTING.md

@@ -4,24 +4,24 @@
 
 ## Installation
 
-- Running `npm install` in the component's root directory will install everything you need for development.
+-   Running `npm install` in the component's root directory will install everything you need for development.
 
 ## Demo Development Server
 
-- `npm start` will run a development server with the style guide components at [http://localhost:6060](http://localhost:6060).
+-   `npm start` will run a development server with the style guide components at [http://localhost:6060](http://localhost:6060).
 
 ## Running Tests
 
-- `npm test` will run the tests once.
+-   `npm test` will run the tests once.
 
-- `npm run test:coverage` will run the tests and produce a coverage report in `coverage/`.
+-   `npm run test:coverage` will run the tests and produce a coverage report in `coverage/`.
 
-- `npm run test:update` will update the test snapshots.
+-   `npm run test:update` will update the test snapshots.
 
-- `npm run test:watch` will run the tests on every change.
+-   `npm run test:watch` will run the tests on every change.
 
 ## Building
 
-- `npm run build` will build the component for publishing to npm and also bundle the demo app.
+-   `npm run build` will build the component for publishing to npm and also bundle the demo app.
 
-- `npm run clean` will delete built resources.
+-   `npm run clean` will delete built resources.

templates/base/prettier.config.js

@@ -0,0 +1,11 @@
+// eslint-disable-next-line zillow/import/no-extraneous-dependencies
+const { prettierConfig } = require('create-react-styleguide');
+
+if (process.env.DEBUG) {
+    // eslint-disable-next-line no-console
+    console.log('prettierConfig object:', JSON.stringify(prettierConfig, null, 4));
+}
+
+module.exports = {
+    ...prettierConfig,
+};

templates/base/styleguide.config.js

@@ -2,8 +2,10 @@ const { createStyleguideConfig } = require('create-react-styleguide');
 
 module.exports = createStyleguideConfig({
     /* your own config shallowly merged here */
-    sections: [{
-        name: 'Introduction',
-        content: 'docs/introduction.md'
-    }],
+    sections: [
+        {
+            name: 'Introduction',
+            content: 'docs/introduction.md',
+        },
+    ],
 });