feat(format): Move to trailing commas (seek-oss#330)

@storybook/addon-knobs.ts

@@ -17,7 +17,7 @@ import {
   array,
   button,
   withKnobs,
-  withKnobsOptions
+  withKnobsOptions,
 } from '@storybook/addon-knobs';
 
 export {
@@ -34,5 +34,5 @@ export {
   array,
   button,
   withKnobs,
-  withKnobsOptions
+  withKnobsOptions,
 };

@storybook/react.ts

@@ -11,7 +11,7 @@ import {
   setAddon,
   storiesOf,
   forceReRender,
-  getStorybook
+  getStorybook,
 } from '@storybook/react';
 
 export {
@@ -22,5 +22,5 @@ export {
   setAddon,
   storiesOf,
   forceReRender,
-  getStorybook
+  getStorybook,
 };

config/babel/babelConfig.js

@@ -3,13 +3,13 @@ const { cwd } = require('../../lib/cwd');
 
 const browserEnvOptions = {
   modules: false,
-  targets: supportedBrowsers
+  targets: supportedBrowsers,
 };
 
 const nodeEnvOptions = {
   targets: {
-    node: 'current'
-  }
+    node: 'current',
+  },
 };
 
 module.exports = ({ target, lang = 'js' }) => {
@@ -25,12 +25,12 @@ module.exports = ({ target, lang = 'js' }) => {
       require.resolve('babel-plugin-module-resolver'),
       {
         root: [cwd()],
-        extensions: ['.mjs', '.js', '.json', '.ts', '.tsx']
-      }
+        extensions: ['.mjs', '.js', '.json', '.ts', '.tsx'],
+      },
     ],
     require.resolve('@babel/plugin-transform-runtime'),
     require.resolve('babel-plugin-macros'),
-    require.resolve('@loadable/babel-plugin')
+    require.resolve('@loadable/babel-plugin'),
   ];
 
   if (isBrowser) {
@@ -41,7 +41,7 @@ module.exports = ({ target, lang = 'js' }) => {
     plugins.push(
       require.resolve('@babel/plugin-transform-react-inline-elements'),
       require.resolve('babel-plugin-transform-react-remove-prop-types'),
-      require.resolve('@babel/plugin-transform-react-constant-elements')
+      require.resolve('@babel/plugin-transform-react-constant-elements'),
     );
   }
 
@@ -51,8 +51,8 @@ module.exports = ({ target, lang = 'js' }) => {
           require.resolve('@babel/preset-typescript'),
           {
             isTSX: true,
-            allExtensions: true
-          }
+            allExtensions: true,
+          },
         ]
       : require.resolve('@babel/preset-flow');
 
@@ -62,8 +62,8 @@ module.exports = ({ target, lang = 'js' }) => {
     presets: [
       languagePreset,
       [require.resolve('@babel/preset-env'), envPresetOptions],
-      require.resolve('@babel/preset-react')
+      require.resolve('@babel/preset-react'),
     ],
-    plugins
+    plugins,
   };
 };

config/eslint/eslintConfig.js

@@ -1,6 +1,6 @@
 const { eslintDecorator } = require('../../context');
 const baseConfig = {
-  extends: require.resolve('eslint-config-seek')
+  extends: require.resolve('eslint-config-seek'),
 };
 
 module.exports = eslintDecorator(baseConfig);

config/jest/cssJsTransform.js

@@ -36,13 +36,13 @@ module.exports = {
       const cssModule = {};
       classNames.forEach(className => {
         cssModule[className] = [${JSON.stringify(
-          fileName.replace('.css', '')
+          fileName.replace('.css', ''),
         )}, '__', className].join('');
       });
 
       module.exports = cssModule;
     `;
 
     return generatedCode;
-  }
+  },
 };

config/jest/cssModulesTransform.js

@@ -12,5 +12,5 @@ module.exports = {
     });
 
     return `module.exports = ${JSON.stringify(cssModule)}`;
-  }
+  },
 };

config/jest/jestConfig.js

@@ -10,15 +10,15 @@ module.exports = {
     // Default values, but with 'ts' + 'tsx' support
     // (https://jestjs.io/docs/en/configuration.html#testmatch-array-string)
     '**/__tests__/**/*.(j|t)s?(x)',
-    '**/?(*.)+(spec|test).(j|t)s?(x)'
+    '**/?(*.)+(spec|test).(j|t)s?(x)',
   ],
   testPathIgnorePatterns: [
-    `<rootDir>${slash}(${paths.target}|node_modules)${slash}`
+    `<rootDir>${slash}(${paths.target}|node_modules)${slash}`,
   ],
   moduleFileExtensions: ['js', 'json', 'ts', 'tsx'],
   moduleNameMapper: {
     '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|svg)$': require.resolve(
-      './fileMock'
+      './fileMock',
     ),
 
     // Mock seek-style-guide and seek-asia-style-guide components
@@ -28,7 +28,7 @@ module.exports = {
     // these packages get updated, which happens regularly. There's
     // still room for debate about whether this is a good idea or not...
     '^seek-style-guide/react': require.resolve('identity-obj-proxy'),
-    '^seek-asia-style-guide/react': require.resolve('identity-obj-proxy')
+    '^seek-asia-style-guide/react': require.resolve('identity-obj-proxy'),
   },
   transform: {
     '^.+\\.css\\.js$': require.resolve('./cssJsTransform.js'),
@@ -38,16 +38,16 @@ module.exports = {
     // Match any `.js` file that isn't a `.css.js` file.
     // We do this by asserting the 4 characters before `.js` aren't `.css`
     // or that it has fewer than 4 characters (e.g. `foo.js`)
-    '((?!(\\.css)).{4}|^.{1,3})\\.js': require.resolve('./jsBabelTransform.js')
+    '((?!(\\.css)).{4}|^.{1,3})\\.js': require.resolve('./jsBabelTransform.js'),
   },
   transformIgnorePatterns: [
     // Allow 'compilePackages' code to be transformed in tests by overriding
     // the default, which normally excludes everything in node_modules.
-    `node_modules${slash}(?!(${compilePackagesRegex}))`
+    `node_modules${slash}(?!(${compilePackagesRegex}))`,
   ],
   testURL: 'http://localhost', // @see https://github.com/facebook/jest/issues/6766
   watchPlugins: [
     require.resolve('jest-watch-typeahead/filename'),
-    require.resolve('jest-watch-typeahead/testname')
-  ]
+    require.resolve('jest-watch-typeahead/testname'),
+  ],
 };

config/jest/tsBabelTransform.js

@@ -2,5 +2,5 @@ const babelJest = require('babel-jest');
 const babelConfig = require('../babel/babelConfig');
 
 module.exports = babelJest.createTransformer(
-  babelConfig({ target: 'node', lang: 'ts' })
+  babelConfig({ target: 'node', lang: 'ts' }),
 );

config/prettier/prettierConfig.js

@@ -1,4 +1,5 @@
 module.exports = {
   singleQuote: true,
-  tabWidth: 2
+  tabWidth: 2,
+  trailingComma: 'all',
 };

config/storybook/config.js

@@ -4,7 +4,7 @@ import { withKnobs } from '@storybook/addon-knobs';
 import 'storybook-chromatic';
 
 addParameters({
-  chromatic: { viewports: [320, 1200] }
+  chromatic: { viewports: [320, 1200] },
 });
 
 addDecorator(withKnobs);
@@ -19,7 +19,7 @@ addDecorator(story =>
   // prevent margins from collapsing, otherwise screenshot services will
   // ignore bottom margins, leading to missed changes when margin values
   // change, or unwanted diffs when migrating from margin to padding.
-  React.createElement('div', { style: { paddingBottom: '0.05px' } }, story())
+  React.createElement('div', { style: { paddingBottom: '0.05px' } }, story()),
 );
 
 const reqs = [
@@ -34,7 +34,7 @@ const reqs = [
   require.context(__SKU_SRC_PATHS_6__, true, /\.stories\.(j|t)sx?$/),
   require.context(__SKU_SRC_PATHS_7__, true, /\.stories\.(j|t)sx?$/),
   require.context(__SKU_SRC_PATHS_8__, true, /\.stories\.(j|t)sx?$/),
-  require.context(__SKU_SRC_PATHS_9__, true, /\.stories\.(j|t)sx?$/)
+  require.context(__SKU_SRC_PATHS_9__, true, /\.stories\.(j|t)sx?$/),
 ];
 
 function loadStories() {

config/storybook/webpack.config.js

@@ -6,7 +6,7 @@ const webpackMerge = require('webpack-merge');
 const makeWebpackConfig = require('../webpack/webpack.config');
 const clientWebpackConfig = find(
   makeWebpackConfig({ isStorybook: true }),
-  config => config.name === 'client'
+  config => config.name === 'client',
 );
 
 module.exports = webpackMerge(
@@ -16,7 +16,7 @@ module.exports = webpackMerge(
     // which would break the Storybook build.
     module: clientWebpackConfig.module,
     resolve: clientWebpackConfig.resolve,
-    plugins: clientWebpackConfig.plugins
+    plugins: clientWebpackConfig.plugins,
   },
   {
     plugins: [
@@ -39,8 +39,8 @@ module.exports = webpackMerge(
         __SKU_SRC_PATHS_6__: JSON.stringify(paths.src[6] || __dirname),
         __SKU_SRC_PATHS_7__: JSON.stringify(paths.src[7] || __dirname),
         __SKU_SRC_PATHS_8__: JSON.stringify(paths.src[8] || __dirname),
-        __SKU_SRC_PATHS_9__: JSON.stringify(paths.src[9] || __dirname)
-      })
-    ]
-  }
+        __SKU_SRC_PATHS_9__: JSON.stringify(paths.src[9] || __dirname),
+      }),
+    ],
+  },
 );

config/typescript/tsconfig.js

@@ -20,9 +20,9 @@ module.exports = () => ({
     lib: ['dom', 'es2015'],
     baseUrl: cwd(),
     paths: {
-      '*': ['*']
-    }
+      '*': ['*'],
+    },
   },
   include: paths.src,
-  exclude: [getPathFromCwd('node_modules')]
+  exclude: [getPathFromCwd('node_modules')],
 });

config/webpack/plugins/bundleAnalyzer.js

@@ -7,10 +7,10 @@ const bundleAnalyzerPlugin = ({ name }) =>
   new BundleAnalyzerPlugin({
     analyzerMode: 'static',
     openAnalyzer: false,
-    reportFilename: getPathFromCwd(`${bundleReportFolder}/${name}.html`)
+    reportFilename: getPathFromCwd(`${bundleReportFolder}/${name}.html`),
   });
 
 module.exports = {
   bundleAnalyzerPlugin,
-  bundleReportFolder
+  bundleReportFolder,
 };

config/webpack/plugins/createHtmlRenderPlugin.js

@@ -8,7 +8,7 @@ const {
   environments,
   sites,
   transformOutputPath,
-  publicPath
+  publicPath,
 } = require('../../../context');
 
 // mapStatsToParams runs once for each render. It's purpose is
@@ -20,7 +20,7 @@ const mapStatsToParams = ({ webpackStats }) => {
 
   return {
     webpackStats: stats,
-    publicPath
+    publicPath,
   };
 };
 
@@ -31,12 +31,12 @@ const getStartRoutes = () => {
   // first option in start mode.
   return product({
     site: sites,
-    route: routes
+    route: routes,
   }).map(({ route, site = {} }) => ({
     environment: environments.length > 0 ? environments[0] : undefined, // eslint-disable-line no-undefined
     site: site.name,
     routeName: route.name,
-    route: route.route
+    route: route.route,
   }));
 };
 
@@ -47,12 +47,12 @@ const getBuildRoutes = () =>
   product({
     environment: environments,
     site: sites,
-    route: routes
+    route: routes,
   }).map(({ route, site = {}, ...rest }) => ({
     ...rest,
     site: site.name,
     routeName: route.name,
-    route: route.route
+    route: route.route,
   }));
 
 module.exports = () => {
@@ -63,6 +63,6 @@ module.exports = () => {
     routes: isStartScript ? getStartRoutes() : getBuildRoutes(),
     transformFilePath: transformOutputPath,
     mapStatsToParams,
-    verbose: false
+    verbose: false,
   });
 };

config/webpack/utils/cssInJsLoader.js

@@ -35,7 +35,7 @@ function produce(loader, request, callback) {
   var outputOptions = { filename: childFilename };
   var childCompiler = getRootCompilation(loader).createChildCompiler(
     'css-in-js-compiler',
-    outputOptions
+    outputOptions,
   );
   new NodeTemplatePlugin(outputOptions).apply(childCompiler);
   new LibraryTemplatePlugin(null, 'commonjs2').apply(childCompiler);
@@ -53,15 +53,15 @@ function produce(loader, request, callback) {
   // a child compiler so we don't spawn another child compilers from there.
   childCompiler.hooks.thisCompilation.tap(CSSInJsLoader, function(compilation) {
     compilation.hooks.normalModuleLoader.tap(CSSInJsLoader, function(
-      loaderContext
+      loaderContext,
     ) {
       loaderContext[__dirname] = false;
     });
   });
   var source;
   childCompiler.hooks.afterCompile.tapAsync(CSSInJsLoader, function(
     compilation,
-    callback
+    callback,
   ) {
     source =
       compilation.assets[childFilename] &&

config/webpack/utils/index.js

@@ -5,5 +5,5 @@ const { resolvePackage } = require('./resolvePackage');
 module.exports = {
   ...env,
   ...loaders,
-  resolvePackage
+  resolvePackage,
 };