StatsHouse UI: update on vite

VKCOM · Jan 13, 2025 · 3a413d4 · 3a413d4
1 parent 1707ce1
commit 3a413d4
Show file tree

Hide file tree

Showing 273 changed files with 18,069 additions and 28,626 deletions.
diff --git a/statshouse-ui/.env b/statshouse-ui/.env
@@ -1,5 +1,8 @@
-INLINE_RUNTIME_CHUNK=false
+# INLINE_RUNTIME_CHUNK=false
 
+REACT_APP_BUILD_VERSION="dev"
+REACT_APP_DEV_PORT=3000
+#REACT_APP_DEV_HOST=localhost
 #REACT_APP_PROXY=
 #REACT_APP_PROXY_COOKIE=""
 #REACT_APP_CONFIG=""
diff --git a/statshouse-ui/.eslintignore b/statshouse-ui/.eslintignore
diff --git a/statshouse-ui/.eslintrc.json b/statshouse-ui/.eslintrc.json
diff --git a/statshouse-ui/env.d.ts b/statshouse-ui/env.d.ts
@@ -0,0 +1,15 @@
+/// <reference types="vite/client" />
+interface ImportMetaEnv {
+  readonly VITE_PROXY: string;
+  readonly REACT_APP_PROXY: string;
+  readonly REACT_APP_PROXY_COOKIE: string;
+  readonly REACT_APP_CONFIG: string;
+  readonly REACT_APP_BUILD_VERSION: string;
+  readonly REACT_APP_DEV_PORT: string;
+  readonly REACT_APP_DEV_HOST: string;
+  // more env variables...
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
diff --git a/statshouse-ui/eslint.config.js b/statshouse-ui/eslint.config.js
@@ -0,0 +1,83 @@
+import js from '@eslint/js';
+import globals from 'globals';
+import react from 'eslint-plugin-react';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import prettier from 'eslint-plugin-prettier';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config({
+  ignores: ['src/lib/**'],
+  extends: [js.configs.recommended, ...tseslint.configs.recommended],
+  files: ['src/**/*.{ts,tsx,js,jsx}'],
+  languageOptions: {
+    ecmaVersion: 2020,
+    globals: globals.browser,
+  },
+  settings: {
+    react: { version: 'detect' },
+  },
+  plugins: {
+    'react-hooks': reactHooks,
+    'react-refresh': reactRefresh,
+    prettier,
+    react,
+  },
+  rules: {
+    ...reactHooks.configs.recommended.rules,
+    ...react.configs.recommended.rules,
+    ...react.configs['jsx-runtime'].rules,
+    'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+    // 'react-hooks/rules-of-hooks': 'warn',
+    'react-hooks/exhaustive-deps': [
+      'error',
+      {
+        enableDangerousAutofixThisMayCauseInfiniteLoops: true,
+      },
+    ],
+    // indent: 'off',
+    'prettier/prettier': 'warn',
+    'arrow-body-style': ['warn', 'as-needed'],
+    //       'prefer-arrow-callback': 'off',
+    'react/no-unescaped-entities': 'off',
+    'no-console': 'warn',
+    'no-empty': ['error', { allowEmptyCatch: true }],
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      {
+        args: 'after-used',
+        argsIgnorePattern: '^_',
+        caughtErrors: 'all',
+        caughtErrorsIgnorePattern: '^_',
+        destructuredArrayIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
+        ignoreRestSiblings: true,
+      },
+    ],
+    '@typescript-eslint/no-explicit-any': ['error', { fixToUnknown: true, ignoreRestArgs: true }],
+    'prefer-const': [
+      'error',
+      {
+        destructuring: 'all',
+        ignoreReadBeforeAssign: true,
+      },
+    ],
+    '@typescript-eslint/no-empty-object-type': [
+      'error',
+      {
+        allowWithName: 'Props$',
+      },
+    ],
+    '@typescript-eslint/no-import-type-side-effects': 'error',
+    'sort-imports': [
+      'error',
+      {
+        ignoreCase: true,
+        ignoreDeclarationSort: true,
+        ignoreMemberSort: false,
+        memberSyntaxSortOrder: ['none', 'all', 'multiple', 'single'],
+        allowSeparatedGroups: false,
+      },
+    ],
+  },
+});
diff --git a/statshouse-ui/global-setup.js b/statshouse-ui/global-setup.js
diff --git a/statshouse-ui/index.html b/statshouse-ui/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <% if (env.PROD) { %>
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="default-src 'none'; base-uri 'none'; form-action 'none'; img-src 'self' data: blob:; font-src 'self'; manifest-src 'self'; connect-src 'self'; style-src 'self' 'unsafe-inline'; script-src 'self';"
+    />
+    <% } else { %>
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="default-src 'none'; base-uri 'none'; form-action 'none'; img-src 'self' data: blob:; font-src 'self'; manifest-src 'self'; connect-src 'self' ws: wss:; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline';"
+    />
+    <% } %>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <link rel="shortcut icon" href="favicon.ico" />
+    <link rel="apple-touch-icon" href="logo192.png" />
+    <link rel="manifest" href="manifest.json" />
+    <title>StatsHouse UI</title>
+    <meta name="build-version" content="%REACT_APP_BUILD_VERSION%" />
+    <% if (env.PROD) { %>
+    <meta name="settings" content="{{.Settings}}" />
+    <% } else { %>
+    <meta name="settings" content="%REACT_APP_CONFIG%" />
+    <% } %> <% if (env.PROD) { %><!--{{ if .OpenGraph }}-->
+    <meta property="og:title" content="{{.OpenGraph.Title}}" />
+    <meta property="og:image" content="{{.OpenGraph.Image}}" />
+    <meta property="og:image:width" content="{{.OpenGraph.ImageWidth}}" />
+    <meta property="og:image:height" content="{{.OpenGraph.ImageHeight}}" />
+    <!--{{ end }}--> <% } %>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run StatsHouse UI.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/statshouse-ui/jest.config.js b/statshouse-ui/jest.config.js
@@ -0,0 +1,25 @@
+/** @returns {Promise<import('jest').Config>} */
+
+const jestConfig = async () => {
+  process.env.TZ = 'Europe/Moscow';
+  return {
+    clearMocks: true,
+    coveragePathIgnorePatterns: ['/node_modules/'],
+    moduleDirectories: ['node_modules'],
+    moduleFileExtensions: ['js', 'mjs', 'cjs', 'jsx', 'ts', 'tsx', 'json', 'node'],
+    moduleNameMapper: {
+      '^@/(.*)$': '<rootDir>/src/$1',
+      '^~(.*)$': '<rootDir>/node_modules/$1',
+      // '^.+\\.(css|scss)$': '<rootDir>/src/testMock/styleMock.ts',
+    },
+    setupFilesAfterEnv: ['./src/setupTests.ts'],
+    testEnvironment: 'jsdom',
+    transform: {
+      '^.+\\.(t|j)sx?$': ['@swc/jest'],
+      '^.+\\.(css|scss)$': 'jest-css-modules-transform',
+    },
+    transformIgnorePatterns: ['/node_modules/'],
+  };
+};
+
+export default jestConfig;