Support js in .hbs files

.eslintrc.js

@@ -0,0 +1,128 @@
+module.exports = {
+  parserOptions: {
+    sourceType: 'module',
+  },
+  parser: '@typescript-eslint/parser',
+  extends: [
+    'plugin:prettier/recommended',
+    'plugin:import/recommended',
+    'plugin:import/errors',
+    'plugin:import/warnings',
+    'plugin:@typescript-eslint/recommended',
+  ],
+  plugins: ['prettier', 'jsx-a11y', 'simple-import-sort', '@typescript-eslint'],
+  rules: {
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    '@typescript-eslint/no-var-requires': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+
+    'import/no-unresolved': 'off',
+    'no-use-before-define': 'off',
+    '@typescript-eslint/no-use-before-define': ['error'],
+    'no-shadow': 'off',
+    '@typescript-eslint/no-shadow': ['error'],
+    'no-unused-vars': 'off',
+    '@typescript-eslint/no-unused-vars': 'error',
+    semi: ['error', 'never'],
+    'linebreak-style': 'off',
+    'max-len': ['error', 140],
+    'jsx-a11y/anchor-has-content': 'off',
+    'jsx-a11y/no-static-element-interactions': 'off',
+    'no-console': 'off',
+    'spaced-comment': 'off',
+    'import/no-cycle': 'off',
+    'import/no-extraneous-dependencies': 'off',
+    'import/no-useless-path-segments': 'off',
+    'import/extensions': 'off',
+    'import/no-commonjs': 'error',
+    'no-param-reassign': 'off',
+    'dot-notation': 'off',
+    'no-restricted-syntax': [
+      'error',
+      {
+        selector: 'VariableDeclarator > ObjectPattern ObjectPattern',
+        message: 'Вложенная деструктуризация сложно воспринимается!',
+      },
+    ],
+    'no-restricted-imports': ['error', 'lodash'],
+    'operator-linebreak': 'off',
+    'implicit-arrow-linebreak': 'off',
+    'prefer-destructuring': 'off',
+    'object-curly-newline': [
+      'off',
+      {
+        ObjectExpression: { minProperties: 0, multiline: true },
+        ObjectPattern: { minProperties: 0, multiline: true },
+      },
+    ],
+    'function-paren-newline': 'off',
+    'no-else-return': ['error', { allowElseIf: true }],
+    'padded-blocks': ['error', 'never'],
+    camelcase: ['error', { properties: 'never' }],
+    'no-multiple-empty-lines': ['error', { max: 2, maxEOF: 1 }],
+    'arrow-parens': 'off',
+    'no-mixed-operators': 'off',
+    'jsx-a11y/click-events-have-key-events': 'off',
+    'jsx-a11y/anchor-is-valid': 'off',
+    'jsx-a11y/iframe-has-title': 'off',
+    'jsx-a11y/alt-text': 'off',
+    'jsx-a11y/label-has-for': 'off',
+    'jsx-a11y/label-has-associated-control': 'off',
+    'jsx-a11y/no-noninteractive-element-interactions': 'off',
+    'jsx-a11y/media-has-caption': 'off',
+    'jsx-a11y/control-has-associated-label': 'off',
+    'no-restricted-globals': 'off',
+    'no-multi-spaces': 'error',
+    'import/no-named-default': 'off',
+    'import/prefer-default-export': 'off',
+    'no-useless-escape': 'error',
+    'brace-style': ['error', '1tbs', { allowSingleLine: true }],
+    'no-return-assign': ['error', 'except-parens'],
+    'lines-between-class-members': 'off',
+    'comma-dangle': [
+      'error',
+      {
+        arrays: 'always-multiline',
+        exports: 'always-multiline',
+        functions: 'ignore',
+        imports: 'always-multiline',
+        objects: 'always-multiline',
+      },
+    ],
+    'max-classes-per-file': 'off',
+    'prettier/prettier': ['error', { endOfLine: 'auto' }],
+    'padding-line-between-statements': [
+      'error',
+      { blankLine: 'always', prev: 'block-like', next: 'const' },
+      { blankLine: 'always', prev: 'const', next: 'block-like' },
+      { blankLine: 'always', prev: '*', next: 'return' },
+      { blankLine: 'always', prev: 'if', next: 'block-like' },
+      { blankLine: 'always', prev: 'block-like', next: 'if' },
+    ],
+    'simple-import-sort/imports': [
+      'error',
+      {
+        groups: [
+          [
+            '^react',
+            '^@?\\w',
+            '^(@|@company|@ui|components|utils|config|vendored-lib)(/.*|$)',
+            '^\\u0000',
+            '^\\.\\.(?!/?$)',
+            '^\\.\\./?$',
+            '^\\./(?=.*/)(?!/?$)',
+            '^\\.(?!/?$)',
+            '^\\./?$',
+            '^.+\\.s?css$',
+          ],
+        ],
+      },
+    ],
+    '@typescript-eslint/no-empty-interface': [
+      'error',
+      {
+        allowSingleExtends: true,
+      },
+    ],
+  },
+}

.gitignore

@@ -5,6 +5,8 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 lerna-debug.log*
+.DS_Store
+.idea
 
 # Diagnostic reports (https://nodejs.org/api/report.html)
 report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
@@ -105,3 +107,6 @@ dist
 
 # Antora
 build
+
+# lint-staged
+tsconfig.*.lint.json

.husky/pre-commit

@@ -0,0 +1,9 @@
+yarn lint-staged --allow-empty
+
+status=$?
+
+if [ $status -ne 0 ]; then
+  echo -e "\033[0;31mLinting failed\033[0m"
+  exit 1
+fi
+

.lintstagedrc.cjs

@@ -0,0 +1,23 @@
+const fs = require('node:fs')
+
+const generateTSConfig = stagedFilenames => {
+  return type => {
+    const tsconfig = JSON.parse(fs.readFileSync('tsconfig.json', 'utf8'))
+    if (stagedFilenames.length === 0) return ''
+
+    tsconfig.include = [...stagedFilenames, 'src/**/*.d.ts']
+    fs.writeFileSync(`tsconfig.${type}.lint.json`, JSON.stringify(tsconfig))
+
+    return `${type} --skipLibCheck --noEmit --pretty --project tsconfig.${type}.lint.json`
+  }
+}
+
+const lintTypes = (fileName) => generateTSConfig(fileName)('tsc')
+
+module.exports = {
+  'src/**/*.(ts)': [lintTypes],
+  'src/**/*.(ts|js)': ['eslint --fix'],
+  'config/**/*.(ts)': [lintTypes],
+  'config/**/*.(ts|js)': ['eslint --fix'],
+  '**/*.(yml|yaml)': ['npx yaml-lint'],
+}

.prettierrc

@@ -0,0 +1,11 @@
+{
+  "printWidth": 100,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "arrowParens": "avoid"
+}

antora-playbook-en.yml

@@ -1,6 +1,6 @@
 site:
   title: Taymyr Antora UI
-  url: /
+  url: /en
   start_page: ROOT::index.adoc
 content:
   sources:
@@ -15,7 +15,7 @@ ui:
 
 output:
   clean: false
-  dir: build/site
+  dir: build/site/en
 
 antora:
   extensions:

config/constants/Env.ts

@@ -0,0 +1,7 @@
+const mode = process.env.NODE_ENV
+
+export const Env = {
+  isDev: mode === 'development',
+  isProd: mode === 'production',
+  cwd: process.cwd(),
+}

config/helpers/getDirectoryFileNames.ts

@@ -0,0 +1,12 @@
+import fs from 'node:fs'
+import path from 'node:path'
+
+export const getDirectoryFileNames = (dirPath: string): string[] => {
+  const files = fs.readdirSync(dirPath, { withFileTypes: true }).map(dirent => {
+    const fullPath = path.join(dirPath, dirent.name)
+
+    return dirent.isDirectory() ? getDirectoryFileNames(fullPath) : fullPath
+  })
+
+  return files.flat()
+}

config/helpers/htmlPlugin/createHtmlPlugin.ts

@@ -0,0 +1,33 @@
+import HtmlWebpackPlugin from 'html-webpack-plugin'
+import get from 'lodash/get'
+
+interface IHtmlPluginCreatingOptions {
+  fileName: string
+  filterKey: string
+  filterValue: string
+  filterByTagNode?: (tagNode: Record<string, unknown>) => boolean
+}
+
+export const createHtmlPlugin = (config: IHtmlPluginCreatingOptions) => {
+  const { fileName, filterKey, filterValue, filterByTagNode = () => true } = config
+
+  const getTemplateContent: HtmlWebpackPlugin.Options['templateContent'] = htmlWebpackPlugin => {
+    return (
+      htmlWebpackPlugin.tags.headTags
+        .filter(
+          (tagNode: Record<string, unknown>) =>
+            get(tagNode, filterKey) === filterValue && filterByTagNode(tagNode),
+        )
+        .join('')
+        // It must be Handlebars template with root path as variable
+        .replaceAll('uiRootPath', '{{{uiRootPath}}}')
+    )
+  }
+
+  return new HtmlWebpackPlugin({
+    publicPath: 'uiRootPath',
+    templateContent: ({ htmlWebpackPlugin }) => `${getTemplateContent(htmlWebpackPlugin)}`,
+    filename: fileName,
+    inject: false,
+  })
+}

config/helpers/htmlPlugin/filterInjectingScriptByScriptNames.ts

@@ -0,0 +1,19 @@
+import { IHtmlPluginCreatingOptions } from './types'
+
+export const filterInjectingScriptByScriptNames = (scriptNames: string[]) => {
+  const filterByTagNode: IHtmlPluginCreatingOptions['filterByTagNode'] = tagNode => {
+    if ('attributes' in tagNode) {
+      const { attributes } = tagNode
+
+      if (typeof attributes === 'object' && attributes !== null && 'src' in attributes) {
+        const src = attributes.src
+
+        return typeof src === 'string' && scriptNames.some(scriptName => src.endsWith(scriptName))
+      }
+    }
+
+    return false
+  }
+
+  return filterByTagNode
+}

config/helpers/htmlPlugin/index.ts

@@ -0,0 +1,2 @@
+export { createHtmlPlugin } from './createHtmlPlugin'
+export { filterInjectingScriptByScriptNames } from './filterInjectingScriptByScriptNames'

config/helpers/htmlPlugin/types/IHtmlPluginCreatingOptions.ts

@@ -0,0 +1,6 @@
+export interface IHtmlPluginCreatingOptions {
+  fileName: string
+  filterKey: string
+  filterValue: string
+  filterByTagNode?: (tagNode: Record<string, unknown>) => boolean
+}

config/helpers/htmlPlugin/types/index.ts

@@ -0,0 +1 @@
+export type { IHtmlPluginCreatingOptions } from './IHtmlPluginCreatingOptions'

config/helpers/index.ts

@@ -0,0 +1,2 @@
+export { spawnCommand } from './spawnCommand'
+export { getDirectoryFileNames } from './getDirectoryFileNames'

config/helpers/spawnCommand.ts

@@ -0,0 +1,29 @@
+import { spawn, SpawnOptions } from 'node:child_process'
+
+export const spawnCommand = (commandStr: string, options?: SpawnOptions) => {
+  const [command, ...args] = commandStr.split(' ')
+
+  if (!command) return Promise.reject()
+
+  return new Promise((resolve, reject) => {
+    const spawnedProcess = spawn(command, args, {
+      shell: true,
+      stdio: 'inherit',
+      env: { FORCE_COLOR: 'true', ...process.env },
+      ...options,
+    })
+
+    spawnedProcess.stdout?.on('data', data => {
+      console.log(data.toString())
+    })
+
+    spawnedProcess?.on('close', code => {
+      if (code === 1) {
+        //eslint-disable-next-line
+                reject()
+      }
+
+      resolve(null)
+    })
+  })
+}

config/plugins/BuildAntoraPlugin.ts

@@ -0,0 +1,21 @@
+import type { Compiler } from 'webpack'
+import { spawnCommand } from '../helpers/spawnCommand'
+
+export class BuildAntoraPlugin {
+  apply(compiler: Compiler) {
+    let shouldUpdateAntora = true
+    compiler.hooks.done.tap('Build antora', async stats => {
+      if (shouldUpdateAntora) {
+        await spawnCommand('npm run build-antora')
+        shouldUpdateAntora = false
+        setTimeout(() => {
+          compiler.hooks.done.callAsync(stats, () => {
+            return
+          })
+        }, 500)
+      } else {
+        shouldUpdateAntora = true
+      }
+    })
+  }
+}