@socprime/master-configuration 1.0.6

package/.editorconfig

@@ -0,0 +1,7 @@
+[*]
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+charset = utf-8

package/.eslintrc.js

@@ -0,0 +1,140 @@
+const { join } = require('path');
+
+const tsConfigFile = require(join(__dirname, 'tsconfig.json'));
+
+const extendAirBnBRules = [
+  'airbnb-base',
+  'airbnb/hooks',
+];
+
+const javascriptRules = {
+  'no-plusplus': 0,
+  'arrow-body-style': 0,
+  'no-nested-ternary': 0,
+  'no-await-in-loop': 1,
+  'no-param-reassign': 1,
+  'no-unused-vars': 1,
+  'no-undef': 0,
+  'no-shadow': 0,
+  'no-use-before-define': 0,
+  'global-require': 1,
+  'import/order': 0,
+  'import/prefer-default-export': 0,
+  'import/extensions': 0,
+  'import/no-extraneous-dependencies': 0,
+  'import/no-relative-packages': 0,
+};
+
+const html = [
+  {
+    files: ['*.html'],
+    parser: '@html-eslint/parser',
+    plugins: [
+      '@html-eslint',
+      'html',
+    ],
+    extends: ['plugin:@html-eslint/recommended'],
+    rules: {
+      '@html-eslint/no-duplicate-id': 'error',
+      '@html-eslint/indent': ['error', 2],
+    },
+  },
+];
+
+const json = [
+  {
+    files: ['*.json'],
+    parser: 'jsonc-eslint-parser',
+    extends: [
+      'plugin:jsonc/all',
+    ],
+    rules: {
+      'jsonc/indent': ['error', 2],
+    },
+  },
+  {
+    files: ['tsconfig.json', 'package.json'],
+    rules: {
+      'jsonc/key-name-casing': 0,
+      'jsonc/sort-keys': 0,
+    },
+  },
+];
+
+const js = [
+  {
+    files: ['*.js', '*.jsx', '*.mjs'],
+    extends: [
+      ...extendAirBnBRules,
+    ],
+    parser: '@babel/eslint-parser',
+    rules: {
+      ...javascriptRules,
+    },
+  },
+  {
+    files: ['.eslintrc.js'],
+    rules: {
+      'import/no-dynamic-require': 0,
+    },
+  },
+];
+
+const typescript = [
+  {
+    files: ['*.ts', '*.tsx'],
+    parser: '@typescript-eslint/parser',
+    extends: [
+      ...extendAirBnBRules,
+      'plugin:@typescript-eslint/recommended',
+    ],
+    rules: {
+      ...javascriptRules,
+      '@typescript-eslint/no-shadow': 1,
+      '@typescript-eslint/no-empty-function': 0,
+      '@typescript-eslint/ban-ts-comment': 0,
+      '@typescript-eslint/no-explicit-any': 1,
+    },
+    plugins: ['@typescript-eslint'],
+    settings: {
+      'import/resolver': {
+        node: {
+          extensions: ['.ts', '.tsx', '.d.ts'],
+        },
+        typescript: {
+          project: tsConfigFile,
+        },
+      },
+    },
+  },
+];
+
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    es2021: true,
+    jest: true,
+    node: true,
+  },
+  extends: [
+    'eslint:recommended',
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+  },
+  ignorePatterns: [
+    '!.storybook',
+    'package-lock.json',
+    'node_modules',
+    'storybook-static',
+    'tmp'
+  ],
+  overrides: [
+    ...js,
+    ...typescript,
+    ...html,
+    ...json,
+  ],
+};

package/README.md

@@ -0,0 +1,12 @@
+# Master Configuration
+
+## Getting started
+
+Contain all configuration files for all projects
+
+
+## Install package
+
+```npm
+npm install @socprime/master-configuration
+```

package/babel.config.js

@@ -0,0 +1,16 @@
+module.exports = {
+  sourceType: 'unambiguous',
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        targets: {
+          chrome: 100,
+        },
+      },
+    ],
+    '@babel/preset-typescript',
+    ['@babel/preset-react', { runtime: 'automatic' }],
+  ],
+  plugins: [],
+};

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@socprime/master-configuration",
+  "version": "1.0.6",
+  "author": "Pavel Nedzelskiy <pavlo.nedzelskyi@socprime.com>",
+  "license": "ISC",
+  "scripts": {
+    "stylelint": "npx stylelint \"**/*.{css,scss,sass}\" --allow-empty-input",
+    "test": "npx jest",
+    "eslint": "npx eslint --quiet ."
+  },
+  "peerDependencies": {
+    "@babel/core": "^7.23.0",
+    "@babel/eslint-parser": "^7.22.15",
+    "@babel/preset-env": "^7.22.20",
+    "@babel/preset-react": "^7.22.15",
+    "@babel/preset-typescript": "^7.23.0",
+    "@html-eslint/eslint-plugin": "^0.19.1",
+    "@html-eslint/parser": "^0.19.1",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
+    "@typescript-eslint/eslint-plugin": "^6.7.4",
+    "@typescript-eslint/parser": "^6.7.4",
+    "eslint": "^8.50.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-plugin-html": "^7.1.0",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-jsonc": "^2.9.0",
+    "eslint-plugin-local-rules": "^2.0.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "mini-css-extract-plugin": "^2.7.6",
+    "postcss": "^8.4.31",
+    "postcss-loader": "^7.3.3",
+    "postcss-preset-env": "^9.1.4",
+    "postcss-sass": "^0.5.0",
+    "react-refresh-typescript": "^2.0.9",
+    "stylelint": "^15.10.3",
+    "stylelint-config-sass-guidelines": "^10.0.0",
+    "stylelint-scss": "^5.2.1",
+    "terser-webpack-plugin": "^5.3.9",
+    "ts-loader": "^9.4.4",
+    "ts-node": "^10.9.1",
+    "typescript": "^5.2.2",
+    "webpack": "^5.88.2",
+    "webpack-cli": "^5.1.4"
+  }
+}

package/stylelint.config.js

@@ -0,0 +1,30 @@
+module.exports = {
+  extends: [
+    'stylelint-config-sass-guidelines',
+  ],
+  ignoreFiles: [
+    'node_modules',
+    'tmp',
+    '**/*.md',
+    '**/*.html',
+  ],
+  plugins: [
+    'stylelint-scss',
+  ],
+  rules: {
+    indentation: 2,
+    'selector-max-id': 1,
+    'max-nesting-depth': 5,
+  },
+  overrides: [
+    {
+      files: ['*.sass', '**/*.sass'],
+      customSyntax: 'postcss-sass',
+      rules: {
+        'color-named': null,
+        'selector-no-qualifying-type': null,
+        'selector-max-compound-selectors': 5,
+      },
+    },
+  ],
+};

package/tsconfig.json

@@ -0,0 +1,44 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "jsx": "react",
+    "lib": [
+      "dom",
+      "ES5",
+      "ES6",
+      "ES7",
+      "ES2018",
+      "ES2020"
+    ],
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "noImplicitAny": true,
+    "noImplicitReturns": true,
+    "noUnusedLocals": true,
+    "removeComments": false,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strictNullChecks": true,
+    "target": "ESNext",
+    "typeRoots": [
+      "node_modules/@types",
+      "./@types"
+    ]
+  },
+  "exclude": [
+    "**/*.js",
+    "**/*.mjs",
+    "node_modules",
+    "tmp"
+  ],
+  "ts-node": {
+    "compilerOptions": {
+      "module": "CommonJS"
+    },
+    "require": ["tsconfig-paths/register"]
+  }
+}

package/webpack.ts

@@ -0,0 +1,133 @@
+import { CallableOption, WebpackConfiguration } from 'webpack-cli/lib/types';
+import { ModuleOptions, Compiler as WebpackCompiler } from 'webpack';
+import TerserPlugin from 'terser-webpack-plugin';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import ReactRefreshTypeScript from 'react-refresh-typescript';
+import ReactRefreshPlugin from '@pmmmwh/react-refresh-webpack-plugin';
+
+type LoaderType = 'typescript-file' | 'style-file';
+
+export const getLoaderIndex = (
+  type: LoaderType,
+  rules: ModuleOptions['rules'],
+): number => {
+  return (rules || []).findIndex((rule) => {
+    return Object.getOwnPropertySymbols(rule).some((symbol) => {
+      return symbol.toString() === 'Symbol(webpack-rule-name)' && (rule as any)[symbol] === type;
+    });
+  });
+};
+
+export const adaptStorybookWebpackConfig = (
+  config: WebpackConfiguration,
+  options?: {
+    modulesNamesToMap?: string[];
+    aliases?: Required<WebpackConfiguration>['resolve']['alias'];
+  },
+): WebpackConfiguration => {
+  const {
+    modulesNamesToMap = [],
+  } = options || {};
+
+  config.resolve = {
+    ...(config.resolve || {}),
+  };
+
+  if (options?.aliases) {
+    config.resolve.alias = {
+      ...(config.resolve.alias || {}),
+      ...options.aliases,
+    };
+  }
+
+  const tsLoader = { loader: 'ts-loader' };
+
+  config.module = {
+    ...(config.module || {}),
+    rules: [
+      ...(config.module?.rules || []),
+    ],
+  };
+
+  config.module.rules!.forEach((r: any) => {
+    if (r?.test?.test?.('.tsx') || r?.test?.test?.('.ts')
+    ) {
+      r.use = [tsLoader];
+    }
+  });
+
+  modulesNamesToMap.forEach((alias) => {
+    config.module!.rules!.push({
+      test: new RegExp(`${alias}\\/[^.]+\\.tsx?`, 'i'),
+      use: [tsLoader],
+    });
+  });
+
+  return config;
+};
+
+export const getDefaultConfig = (
+  env: Parameters<CallableOption>[0],
+  mode: string,
+): WebpackConfiguration => {
+  return {
+    resolve: {
+      extensions: ['.ts', '.tsx', '.js'],
+    },
+    optimization: {
+      minimizer: [
+        new TerserPlugin({ extractComments: false }),
+      ],
+    },
+    devServer: {
+      hot: true,
+      compress: true,
+    },
+    module: {
+      rules: [
+        {
+          [Symbol('webpack-rule-name')]: 'typescript-file',
+          test: /\.tsx?$/,
+          use: [
+            {
+              loader: 'ts-loader',
+              options: {
+                getCustomTransformers: () => ({
+                  before: [
+                    env?.WEBPACK_SERVE && ReactRefreshTypeScript(),
+                  ].filter(Boolean),
+                }),
+                transpileOnly: true,
+              },
+            },
+          ],
+        },
+        {
+          [Symbol('webpack-rule-name')]: 'style-file',
+          test: /\.(s[ac]ss|css)$/i,
+          use: [
+            env?.WEBPACK_SERVE ? 'style-loader' : MiniCssExtractPlugin.loader,
+            'css-loader',
+            'postcss-loader',
+            'sass-loader',
+          ],
+        },
+      ],
+    },
+    plugins: [
+      env?.WEBPACK_SERVE && new ReactRefreshPlugin(),
+      !env?.WEBPACK_SERVE && new MiniCssExtractPlugin({
+        filename: '[name].css',
+      }),
+      {
+        apply(compiler: WebpackCompiler) {
+          compiler.hooks.done.tap('webpackOnDone', () => {
+            setTimeout(() => {
+              console.log(`===> [${mode}] done`);
+            }, 0);
+          });
+        },
+      },
+    ].filter(Boolean),
+  } as WebpackConfiguration;
+};