@papillonarts/setup 0.8.0 → 0.10.0

package/babel/index.js

@@ -1,7 +1,7 @@
 "use strict";
 
 module.exports = {
-  presets: ['@babel/preset-env', '@babel/preset-react'],
+  presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'],
   plugins: [['@babel/plugin-transform-react-jsx', {
     runtime: 'automatic'
   }], '@babel/plugin-transform-runtime', 'syntax-async-functions']

package/eslint/index.js

@@ -1,5 +1,7 @@
 "use strict";
 
+// https://typescript-eslint.io/users/configs/
+
 module.exports = {
   env: {
     amd: true,
@@ -11,7 +13,7 @@ module.exports = {
     mocha: true,
     node: true
   },
-  "extends": ['eslint:recommended', 'plugin:import/errors', 'plugin:import/warnings', 'airbnb', 'airbnb/hooks', 'plugin:react/recommended', 'plugin:jsx-a11y/recommended', 'plugin:jest/recommended', 'prettier'],
+  "extends": ['eslint:recommended', 'plugin:import/errors', 'plugin:import/warnings', 'plugin:react/recommended', 'plugin:jsx-a11y/recommended', 'plugin:jest/recommended', 'prettier', 'plugin:@typescript-eslint/stylistic-type-checked'],
   globals: {
     document: false,
     expect: false,
@@ -20,17 +22,19 @@ module.exports = {
     renderMount: false,
     renderShallow: false
   },
-  parser: '@babel/eslint-parser',
+  parser: '@typescript-eslint/parser',
+  // https://typescript-eslint.io/packages/parser/#configuration
   parserOptions: {
     ecmaFeatures: {
       jsx: true
     },
     ecmaVersion: 16,
-    sourceType: 'module'
+    projectService: {
+      allowDefaultProject: ['*.js', '*.jsx', '*.ts', '*.tsx']
+    }
   },
   plugins: ['react', 'react-hooks', 'jsx-a11y', 'jest', 'prettier'],
   rules: {
-    'comma-dangle': 2,
     'import/named': 2,
     'import/no-extraneous-dependencies': [0, {
       devDependencies: ['**/*.test.js', '**/*.story.js']
@@ -38,28 +42,39 @@ module.exports = {
     'import/prefer-default-export': 'off',
     'import/no-relative-packages': 'off',
     'jsx-a11y/accessible-emoji': 0,
-    'object-curly-spacing': 2,
     'prettier/prettier': 'error',
     'react-hooks/exhaustive-deps': 'warn',
     'react-hooks/rules-of-hooks': 'error',
     'react/jsx-boolean-value': 0,
     'react/jsx-filename-extension': [2, {
-      extensions: ['.js', '.jsx']
+      extensions: ['.js', '.jsx', '.ts', '.tsx']
     }],
     'react/jsx-fragments': 0,
     'react/jsx-props-no-spreading': 0,
     'react/jsx-uses-react': 'off',
     'react/react-in-jsx-scope': 'off',
-    semi: ['error', 'never']
+    semi: ['error', 'never'],
+    'import/extensions': ['error', 'ignorePackages', {
+      js: 'never',
+      jsx: 'never',
+      ts: 'never',
+      tsx: 'never'
+    }],
+    '@typescript-eslint/no-empty-function': 0,
+    '@typescript-eslint/strict-boolean-expressions': 0,
+    '@typescript-eslint/prefer-nullish-coalescing': 0,
+    'object-curly-spacing': 0,
+    'comma-dangle': 0,
+    'no-unused-vars': 0
   },
   settings: {
     'import/resolver': {
       alias: {
         map: [['@papillonarts/components', '@papillonarts/components/build']],
-        extensions: ['.js']
+        extensions: ['.js', '.jsx', '.ts', '.tsx']
       },
       node: {
-        extensions: ['.js', '.jsx']
+        extensions: ['.js', '.jsx', '.ts', '.tsx']
       }
     },
     react: {

package/jest/config.js

@@ -4,6 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getJestSetup = getJestSetup;
+// https://jestjs.io/docs/getting-started#using-typescript
+
 function getJestSetup(_ref) {
   var testPathIgnorePatterns = _ref.testPathIgnorePatterns,
     coverageDirectory = _ref.coverageDirectory,
@@ -11,11 +13,11 @@ function getJestSetup(_ref) {
     collectCoverageFrom = _ref.collectCoverageFrom,
     coverageThreshold = _ref.coverageThreshold;
   return {
-    testMatch: ['**/?(*.)test.js?(x)'],
+    testMatch: ['**/?(*.)test.(js|ts)?(x)'],
     testPathIgnorePatterns: testPathIgnorePatterns,
     roots: ['<rootDir>'],
     transform: {
-      '^.+\\.(js|jsx)$': 'babel-jest'
+      '^.+\\.(js|jsx|ts|tsx)$': 'babel-jest'
     },
     coverageDirectory: coverageDirectory,
     collectCoverage: collectCoverage,
@@ -28,7 +30,7 @@ function getJestSetup(_ref) {
     },
     // https://jestjs.io/docs/tutorial-react-native#transformignorepatterns-customization
     transformIgnorePatterns: ['node_modules/(?!((@)?uuid|parse5|jsdom/node_modules/parse5)/)'],
-    moduleFileExtensions: ['js', 'jsx'],
+    moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx'],
     coverageThreshold: coverageThreshold
   };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@papillonarts/setup",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "description": "Papillon Arts Setup",
   "homepage": "https://github.com/papillonarts/papillonarts/tree/master/packages/setup",
   "repository": {
@@ -29,5 +29,5 @@
     "build-acceptance": "npm run build",
     "build-release": "npm run build"
   },
-  "gitHead": "20dbfd5958c9d5cbbfbc8efd7103983409861851"
+  "gitHead": "bd716a6232e363ba61f8c1367faefbb20d4b503f"
 }

package/storybook/index.ts

@@ -0,0 +1,3 @@
+export { getStorybookMainSetup } from './mainSetup'
+export { setStorybookManagerSetup } from './managerSetup'
+export { getStorybookPreviewSetup } from './previewSetup'

package/storybook/mainSetup.ts

@@ -0,0 +1,277 @@
+/* https://storybook.js.org/docs/configure/integration/typescript */
+/* eslint-disable no-unused-vars */
+/* eslint-disable no-param-reassign */
+/* eslint-disable global-require */
+import webpack from 'webpack'
+import type { StorybookConfig } from '@storybook/react-webpack5'
+import { isEmptyObject } from '@papillonarts/library/object'
+import { getBabelLoaderAdvancedSetup } from '@papillonarts/setup/webpack'
+
+export function getStorybookMainSetup({ storiesBasePath, includeBasePath, modulesBasePath, rootAttributesDefaults }): StorybookConfig {
+  // https://storybook.js.org/docs/react/api/main-config
+  return {
+    // https://storybook.js.org/docs/api/main-config/main-config-preview-body
+    previewBody: (body) => {
+      if (rootAttributesDefaults) {
+        // https://github.com/storybookjs/storybook/issues/24429
+        return `
+          ${body}
+          <script type="text/javascript">
+          (() => {
+            document.addEventListener('DOMContentLoaded', function() {
+              const storybookRootElement = document.getElementById("storybook-root")
+
+              // https://primer.style/foundations/primitives/getting-started
+              storybookRootElement.setAttribute("data-color-mode", "light")
+              storybookRootElement.setAttribute("data-light-theme", "light")
+              storybookRootElement.setAttribute("data-dark-theme", "dark")
+            });
+          })()
+          </script>
+        `
+      }
+      return `${body}`
+    },
+    // https://storybook.js.org/docs/react/configure/frameworks
+    framework: {
+      name: '@storybook/react-webpack5',
+      options: {
+        fastRefresh: false,
+        strictMode: false,
+        legacyRootApi: false,
+      },
+    },
+
+    // https://storybook.js.org/docs/react/api/main-config-stories
+    stories: [storiesBasePath],
+
+    // https://storybook.js.org/docs/react/api/main-config-addons
+    // https://storybook.js.org/docs/react/addons/introduction
+    // https://storybook.js.org/integrations
+    addons: [
+      // https://storybook.js.org/addons/@storybook/addon-a11y
+      '@storybook/addon-a11y',
+
+      // included by default in @storybook/addon-essentials
+      // https://storybook.js.org/docs/react/essentials/actions
+      // https://storybook.js.org/addons/@storybook/addon-actions
+      // '@storybook/addon-actions',
+
+      // included by default in @storybook/addon-essentials
+      // https://storybook.js.org/docs/react/essentials/backgrounds
+      // https://storybook.js.org/addons/@storybook/addon-backgrounds
+      // '@storybook/addon-backgrounds',
+
+      // https://storybook.js.org/addons/chromatic
+      // chromatic
+
+      // included by default in @storybook/addon-essentials
+      // https://storybook.js.org/docs/react/essentials/controls
+      // https://storybook.js.org/addons/@storybook/addon-controls
+      // '@storybook/addon-controls',
+
+      // https://storybook.js.org/addons/storybook-addon-designs
+      // storybook-addon-designs
+
+      // included by default in @storybook/addon-essentials
+      // https://storybook.js.org/docs/react/essentials/docs (404)
+      // https://storybook.js.org/addons/@storybook/addon-docs
+      // {
+      //   name: '@storybook/addon-docs',
+      //   options: {
+      //     jsxOptions: {},
+      //     csfPluginOptions: null,
+      //     mdxPluginOptions: {},
+      //     transcludeMarkdown: true,
+      //   },
+      // },
+
+      // https://storybook.js.org/docs/react/essentials/introduction
+      // https://storybook.js.org/integrations/tag/essentials
+      // '@storybook/addon-essentials',
+
+      // included by default in @storybook/addon-essentials
+      // https://storybook.js.org/docs/react/essentials/highlight (404)
+      // https://storybook.js.org/addons/@storybook/addon-highlight
+      // '@storybook/addon-highlight',
+
+      // https://storybook.js.org/addons/@storybook/addon-interactions
+      // '@storybook/addon-interactions',
+
+      // https://storybook.js.org/addons/@storybook/addon-jest
+      '@storybook/addon-jest',
+
+      // https://storybook.js.org/addons/@storybook/addon-links
+      '@storybook/addon-links',
+
+      // https://storybook.js.org/addons/msw-storybook-addon
+      // msw-storybook-addon
+
+      // included by default in @storybook/addon-essentials
+      // https://storybook.js.org/docs/react/essentials/measure-and-outline
+      // https://storybook.js.org/addons/@storybook/addon-measure
+      // https://storybook.js.org/addons/@storybook/addon-outline
+      // '@storybook/addon-measure',
+      // '@storybook/addon-outline',
+
+      // included by default in @storybook/addon-essentials
+      // https://storybook.js.org/docs/react/essentials/toolbars-and-globals
+      // https://storybook.js.org/addons/@storybook/addon-toolbars
+      // '@storybook/addon-toolbars',
+
+      // included by default in @storybook/addon-essentials
+      // https://storybook.js.org/docs/react/essentials/viewport
+      // https://storybook.js.org/addons/@storybook/addon-viewport
+      // '@storybook/addon-viewport',
+
+      '@chromatic-com/storybook',
+
+      // https://storybook.js.org/addons/@storybook/addon-styling-webpack
+      '@storybook/addon-styling-webpack',
+
+      // https://storybook.js.org/addons/@storybook/addon-themes
+      '@storybook/addon-themes',
+
+      '@storybook/addon-webpack5-compiler-babel',
+    ],
+
+    // https://storybook.js.org/docs/react/api/main-config-babel
+    // ...
+
+    // https://storybook.js.org/docs/react/api/main-config-babel-default
+    // ...
+
+    // https://storybook.js.org/docs/react/api/main-config-core
+    // https://storybook.js.org/docs/api/main-config/main-config-core#builder
+    core: { builder: { name: '@storybook/builder-webpack5', options: null } },
+
+    // https://storybook.js.org/docs/react/api/main-config-docs
+    // https://storybook.js.org/docs/react/writing-docs/autodocs
+    // https://storybook.js.org/docs/react/writing-docs/mdx
+    // https://storybook.js.org/docs/writing-docs/autodocs
+    docs: { defaultName: 'Documentation', docsMode: false },
+
+    // https://storybook.js.org/docs/react/api/main-config-env
+    // ...
+
+    // https://storybook.js.org/docs/react/api/main-config-features
+    // ...
+
+    // https://storybook.js.org/docs/react/api/main-config-log-level
+    logLevel: 'debug',
+
+    // https://storybook.js.org/docs/react/api/main-config-manager-head
+    // ...
+
+    // https://storybook.js.org/docs/react/api/main-config-preview-annotations
+    // ...
+
+    // https://storybook.js.org/docs/react/api/main-config-preview-body
+    // ...
+
+    // https://storybook.js.org/docs/react/api/main-config-preview-head
+    // ...
+
+    // https://storybook.js.org/docs/react/api/main-config-refs
+    // ...
+
+    // https://storybook.js.org/docs/react/api/main-config-static-dirs
+    // ...
+
+    // https://storybook.js.org/docs/react/api/main-config-typescript
+    // ...
+
+    // https://storybook.js.org/docs/react/api/main-config-webpack-final
+    webpackFinal: async (config, { configType }) => {
+      // @ts-ignore
+      const fileLoaderRuleSVG = config.module.rules.find((rule) => !isEmptyObject(rule) && rule.test.test?.('.svg'))
+      // @ts-ignore
+      fileLoaderRuleSVG.exclude = /\.svg$/
+
+      config.module.rules = config.module.rules.concat([
+        {
+          test: /\.(css|scss)$/,
+          use: [
+            {
+              loader: 'style-loader',
+            },
+            {
+              loader: 'css-loader',
+              options: {
+                importLoaders: 2,
+                sourceMap: true,
+                modules: {
+                  localIdentName: '[name]__[local]___[hash:base64:5]',
+                  /* https://webpack.js.org/loaders/css-loader/#exportlocalsconvention */
+                  exportLocalsConvention: 'as-is',
+                },
+                /* https://stackoverflow.com/questions/78589664/style-loader-does-not-recoginize-default-imports-of-css-modules-in-storybooks */
+                esModule: false,
+              },
+            },
+            {
+              loader: 'postcss-loader',
+              options: {
+                postcssOptions: {
+                  sourceMap: true,
+                  plugins: () => [require('postcss-preset-env')()],
+                  parser: 'postcss-scss',
+                },
+              },
+            },
+            {
+              loader: 'sass-loader',
+              options: {
+                sassOptions: {
+                  includePaths: [modulesBasePath],
+                  // https://sass-lang.com/documentation/js-api/interfaces/options/#quietDeps
+                  // https://sass-lang.com/documentation/js-api/interfaces/options/#silenceDeprecations
+                  // https://sass-lang.com/documentation/js-api/interfaces/deprecations/
+                  quietDeps: true,
+                  silenceDeprecations: ['import', 'global-builtin'],
+                },
+              },
+            },
+          ],
+        },
+        {
+          test: /\.svg$/i,
+          issuer: /\.[jt]sx?$/,
+          use: ['@svgr/webpack'],
+        },
+        {
+          test: /\.int.story\.mdx$/,
+          use: [
+            {
+              loader: 'babel-loader',
+              options: {
+                plugins: ['@babel/plugin-transform-react-jsx'],
+              },
+            },
+            {
+              loader: '@mdx-js/loader',
+              options: {},
+            },
+          ],
+        },
+        getBabelLoaderAdvancedSetup(),
+      ])
+      config.plugins.push(
+        new webpack.ProvidePlugin({
+          process: 'process/browser',
+        }),
+      )
+
+      config.resolve.fallback = {
+        ...config.resolve.fallback,
+        tty: require.resolve('tty-browserify'),
+      }
+
+      return config
+    },
+    typescript: {
+      reactDocgen: 'react-docgen-typescript',
+      check: true,
+    },
+  }
+}

package/storybook/managerSetup.ts

@@ -0,0 +1,9 @@
+import { addons } from 'storybook/manager-api'
+import { create } from 'storybook/theming'
+
+export function setStorybookManagerSetup({ panelPosition, theme }) {
+  addons.setConfig({
+    panelPosition,
+    theme: create(theme),
+  })
+}

package/storybook/previewSetup.tsx

@@ -0,0 +1,50 @@
+import { MemoryRouter } from 'react-router-dom'
+import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks'
+
+export function getStorybookPreviewSetup({ parameters: { a11y, decorators, docs } }) {
+  let parameters = {}
+
+  if (a11y) {
+    parameters = {
+      ...parameters,
+      a11y: {
+        ...{
+          // optional selector which element to inspect
+          // element: '#root',
+          // axe-core configurationOptions (https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#parameters-1)
+          config: {},
+          // axe-core optionsParameter (https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#options-parameter)
+          options: {},
+          // optional flag to prevent the automatic check
+          // manual: true,
+        },
+      },
+    }
+  }
+
+  if (decorators) {
+    parameters = {
+      ...parameters,
+      decorators: [
+        ...[
+          (Story) => (
+            <MemoryRouter>
+              <Story />
+            </MemoryRouter>
+          ),
+        ],
+      ],
+    }
+  }
+
+  if (docs) {
+    parameters = {
+      ...parameters,
+      docs: {
+        ...{ container: DocsContainer, page: DocsPage },
+      },
+    }
+  }
+
+  return { parameters }
+}

package/webpack/constant/index.ts

@@ -0,0 +1,24 @@
+export const coreJSVersion = '3.46.0'
+
+export const targetBrowsers = {
+  production: ['> 1%', 'last 2 versions', 'Firefox ESR'],
+  legacyBrowsers: ['> 1%', 'last 2 versions', 'Firefox ESR'],
+  modernBrowsers: [
+    'last 2 Chrome versions',
+    'not Chrome < 60',
+    'last 2 Safari versions',
+    'not Safari < 10.1',
+    'last 2 iOS versions',
+    'not iOS < 10.3',
+    'last 2 Firefox versions',
+    'not Firefox < 54',
+    'last 2 Edge versions',
+    'not Edge < 15',
+  ],
+}
+
+export const manifestFileName = 'manifest.json'
+
+export const indexHTMLName = 'index.html'
+
+export const extensions = ['.js', '.jsx', '.json', '.scss']

package/webpack/index.ts

@@ -0,0 +1,27 @@
+export { getBabelLoaderAdvancedSetup } from './loader/babelLoader'
+export { getCSSLoaderStandardSetup } from './loader/cssLoader'
+export { getFontLoaderStandardSetup } from './loader/fontLoader'
+export { getImageLoaderStandardSetup } from './loader/imageLoader'
+export { getMarkdownLoaderStandardSetup } from './loader/markdownLoader'
+export { getPostCSSLoaderStandardSetup } from './loader/postCSSLoader'
+export { getSassLoaderStandardSetup } from './loader/sassLoader'
+export { getSVGRLoaderStandardSetup, getSVGRLoaderAdvancedSetup } from './loader/svgrLoader'
+export { getBannerPluginStandardSetup } from './plugin/bannerPlugin'
+export { getCleanWebpackPluginStandardSetup, getCleanWebpackPluginAdvancedSetup } from './plugin/cleanWebpackPlugin'
+export { getCopyWebpackPluginStandardSetup } from './plugin/copyWebpackPlugin'
+export { getCSSMinimizerWebpackPluginStandardSetup } from './plugin/cssMinimizerWebpackPlugin'
+export { getDotenvWebpackStandardSetup, getDotenvWebpackAdvancedSetup } from './plugin/dotenvWebpack'
+export { getHotModuleReplacementPluginStandardSetup } from './plugin/hotModuleReplacementPlugin'
+export { getHtmlWebpackPluginStandardSetup, getHtmlWebpackPluginAdvancedSetup } from './plugin/htmlWebpackPlugin'
+export {
+  MiniCSSExtractPluginLoader,
+  getMiniCSSExtractPluginStandardSetup,
+  getMiniCSSExtractPluginAdvancedSetup,
+} from './plugin/miniCSSExtractPlugin'
+export { getModuleConcatenationPluginStandardSetup } from './plugin/moduleConcatenationPlugin'
+export { getWebpackBundleAnalyzerStandardSetup } from './plugin/webpackBundleAnalyzer'
+export { getWebpackManifestPluginStandardSetup } from './plugin/webpackManifestPlugin'
+export { getDevServerStandardSetup } from './server/devServer'
+export { getWebpackCommonSetup } from './setup/commonSetup'
+export { getWebpackDevelopmentSetup } from './setup/developmentSetup'
+export { getWebpackProductionSetup } from './setup/productionSetup'

package/webpack/loader/babelLoader.ts

@@ -0,0 +1,38 @@
+// https://github.com/babel/babel-loader
+
+import { coreJSVersion, targetBrowsers } from '../constant'
+
+export function getBabelLoaderAdvancedSetup() {
+  return {
+    test: /\.(js|jsx)$/,
+    exclude: /node_modules/,
+    use: {
+      loader: 'babel-loader',
+      options: {
+        presets: [
+          [
+            '@babel/preset-env',
+            {
+              modules: false,
+              useBuiltIns: 'entry',
+              corejs: coreJSVersion,
+              targets: { browsers: Object.values(targetBrowsers.modernBrowsers) },
+            },
+          ],
+          '@babel/preset-react',
+          '@babel/preset-typescript',
+        ],
+        plugins: [
+          [
+            '@babel/plugin-transform-react-jsx',
+            {
+              runtime: 'automatic',
+            },
+          ],
+          '@babel/plugin-transform-runtime',
+          'syntax-async-functions',
+        ],
+      },
+    },
+  }
+}

package/webpack/loader/cssLoader.ts

@@ -0,0 +1,13 @@
+// https://github.com/webpack-contrib/css-loader
+
+export function getCSSLoaderStandardSetup({ sourceMap, modules, esModule }) {
+  return {
+    loader: 'css-loader',
+    options: {
+      importLoaders: 2,
+      sourceMap,
+      modules,
+      esModule,
+    },
+  }
+}

package/webpack/loader/fontLoader.ts

@@ -0,0 +1,8 @@
+// https://webpack.js.org/guides/asset-management/#loading-fonts
+
+export function getFontLoaderStandardSetup() {
+  return {
+    test: /\.(woff|woff2|eot|ttf|otf)$/i,
+    type: 'asset/resource',
+  }
+}

package/webpack/loader/imageLoader.ts

@@ -0,0 +1,8 @@
+// https://webpack.js.org/guides/asset-management/#loading-images
+
+export function getImageLoaderStandardSetup() {
+  return {
+    test: /\.(png|jpg|jpeg|gif)$/i,
+    type: 'asset/resource',
+  }
+}

package/webpack/loader/markdownLoader.ts

@@ -0,0 +1,17 @@
+// https://github.com/webpack-contrib/html-loader
+// https://github.com/peerigon/markdown-loader
+
+export function getMarkdownLoaderStandardSetup() {
+  return {
+    test: /\.md$/,
+    use: [
+      {
+        loader: 'html-loader',
+      },
+      {
+        loader: 'markdown-loader',
+        options: {},
+      },
+    ],
+  }
+}

package/webpack/loader/postCSSLoader.ts

@@ -0,0 +1,14 @@
+// https://github.com/webpack-contrib/postcss-loader
+
+export function getPostCSSLoaderStandardSetup() {
+  return {
+    loader: 'postcss-loader',
+    options: {
+      postcssOptions: {
+        sourceMap: true,
+        plugins: () => ['postcss-preset-env'],
+        parser: 'postcss-scss',
+      },
+    },
+  }
+}