[account-v2]/likhith/chore: initial setup

.github/workflows/test.yml

@@ -33,12 +33,18 @@ jobs:
       run: npx tsc --project packages/wallets/tsconfig.json -noEmit
     - name: Check TypeScript for @deriv/tradershub
       run: npx tsc --project packages/tradershub/tsconfig.json -noEmit
+    - name: Check TypeScript for @deriv/account-v2
+      run: npx tsc --project packages/account-v2/tsconfig.json -noEmit
     - name: Check ESLint for @deriv/wallets
       run: npx eslint --fix --ignore-path packages/wallets/.eslintignore --config packages/wallets/.eslintrc.js packages/wallets
     - name: Check ESLint for @deriv/tradershub
       run: npx eslint --fix --ignore-path packages/tradershub/.eslintignore --config packages/tradershub/.eslintrc.js packages/tradershub
+    - name: Check ESLint for @deriv/account-v2
+      run: npx eslint --fix --ignore-path packages/account-v2/.eslintignore --config packages/account-v2/.eslintrc.js packages/account-v2
     - name: Check Stylelint for @deriv/wallets
       run: npx stylelint packages/wallets/**/*.scss
+    - name: Check Stylelint for @deriv/account-v2
+      run: npx stylelint packages/account-v2/**/*.scss
     - name: Check tests for @deriv/hooks
       run: bash ./scripts/check-tests.sh packages/hooks/src
     - name: Check tests for @deriv/utils

packages/account-v2/.eslintignore

@@ -0,0 +1,2 @@
+dist/*.js
+*.config.*

packages/account-v2/.eslintrc.js

@@ -0,0 +1,81 @@
+module.exports = {
+    env: { browser: true, es6: true, jest: true },
+    extends: [
+        '../../.eslintrc.js',
+        'eslint:recommended',
+        'plugin:react/recommended',
+        'plugin:react-hooks/recommended',
+        'plugin:sonarjs/recommended',
+    ],
+    overrides: [
+        {
+            files: ['*.ts', '*.mts', '*.cts', '*.tsx'],
+            rules: {
+                'no-undef': 'off',
+            },
+        },
+    ],
+    parser: '@typescript-eslint/parser',
+    parserOptions: { sourceType: 'module' },
+    plugins: [
+        'eslint-plugin-local-rules',
+        'sonarjs',
+        'simple-import-sort',
+        'sort-destructure-keys',
+        'typescript-sort-keys',
+    ],
+    root: true,
+    ignorePatterns: ['**/node_modules/**', '**/dist/**', '**/*.js', '**/*.config.*'],
+    rules: {
+        '@typescript-eslint/array-type': 'error',
+        '@typescript-eslint/no-explicit-any': 'error',
+        '@typescript-eslint/no-unused-vars': 'error',
+        '@typescript-eslint/sort-type-constituents': 'error',
+        camelcase: 'error',
+        'import/first': 'error',
+        'import/newline-after-import': 'error',
+        'import/no-duplicates': 'error',
+        'import/no-extraneous-dependencies': ['off', { devDependencies: ['**/*.spec.*', '**/*.test.*', '**/*.d.ts*'] }],
+        'lines-around-comment': ['error', { allowObjectStart: true }],
+        'local-rules/no-react-namespace': 'error',
+        'no-unneeded-ternary': 'error',
+        'no-useless-return': 'error',
+        'object-shorthand': 'error',
+        'prefer-const': 'error',
+        'react/jsx-pascal-case': 'error',
+        'react/jsx-sort-props': 'error',
+        'simple-import-sort/exports': 'error',
+        'simple-import-sort/imports': [
+            'error',
+            {
+                groups: [
+                    [
+                        'public-path',
+                        // `react` first, then packages starting with a character
+                        '^react$',
+                        '^[a-z]',
+                        // Packages starting with `@`
+                        '^@',
+                        // Imports starting with `../`
+                        '^\\.\\.(?!/?$)',
+                        '^\\.\\./?$',
+                        // Imports starting with `./`
+                        '^\\./(?=.*/)(?!/?$)',
+                        '^\\.(?!/?$)',
+                        '^\\./?$',
+                        // Style imports
+                        '^.+\\.s?css$',
+                        // Side effect imports
+                        '^\\u0000',
+                        // Delete the empty line copied as the next line of the last import
+                        '\\s*',
+                    ],
+                ],
+            },
+        ],
+        'sort-destructure-keys/sort-destructure-keys': 'error',
+        'sort-keys': 'error',
+        'typescript-sort-keys/interface': 'error',
+        'typescript-sort-keys/string-enum': 'error',
+    },
+};

packages/account-v2/.stylelintrc.js

@@ -0,0 +1,16 @@
+module.exports = {
+    extends: ['../../.stylelintrc.js'],
+    rules: {
+        'declaration-block-no-redundant-longhand-properties': true,
+        'declaration-no-important': true,
+        'color-no-hex': true,
+        'color-named': 'never',
+        'max-nesting-depth': 3,
+        'selector-class-pattern': [
+            '^[A-Za-z]+((-){0,2}(_){0,2}[A-Za-z]+)*[A-Za-z]$',
+            {
+                message: 'Expected selector to match BEM CSS pattern',
+            },
+        ],
+    },
+};

packages/account-v2/babel.config.json

@@ -0,0 +1,16 @@
+{
+    "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
+    "plugins": [
+        ["@babel/plugin-proposal-decorators", { "legacy": true }],
+        ["@babel/plugin-proposal-class-properties", { "loose": true }],
+        ["@babel/plugin-proposal-private-methods", { "loose": true }],
+        ["@babel/plugin-proposal-private-property-in-object", { "loose": true }],
+        "@babel/plugin-proposal-export-default-from",
+        "@babel/plugin-proposal-object-rest-spread",
+        "@babel/plugin-proposal-export-namespace-from",
+        "@babel/plugin-syntax-dynamic-import",
+        ["@babel/plugin-proposal-unicode-property-regex", { "useUnicodeFlag": false }],
+        "@babel/plugin-proposal-optional-chaining",
+        "@babel/plugin-proposal-nullish-coalescing-operator"
+    ]
+}

packages/account-v2/build/build-loaders.ts

@@ -0,0 +1,121 @@
+import { RuleSetRule } from 'webpack';
+import { TBuildOptions } from './types/build-types';
+
+export const buildLoaders = (options: TBuildOptions): RuleSetRule[] => {
+    const svgLoaders = [
+        {
+            loader: 'babel-loader',
+            options: {
+                cacheDirectory: true,
+                rootMode: 'upward',
+            },
+        },
+        {
+            loader: 'react-svg-loader',
+            options: {
+                jsx: true,
+                svgo: {
+                    floatPrecision: 3,
+                    plugins: [
+                        { removeTitle: false },
+                        { removeUselessStrokeAndFill: false },
+                        { removeUnknownsAndDefaults: false },
+                        { removeViewBox: false },
+                    ],
+                },
+            },
+        },
+    ];
+    const babelLoader = {
+        exclude: /node_modules/,
+        test: /\.(js|jsx|ts|tsx)$/,
+        use: [
+            {
+                loader: 'babel-loader',
+                options: {
+                    cacheDirectory: true,
+                    rootMode: 'upward',
+                },
+            },
+        ],
+    };
+    const styleLoader = {
+        test: /\.(sc|sa|c)ss$/,
+        use: [
+            'style-loader',
+            {
+                loader: 'css-loader',
+                options: {
+                    modules: {
+                        auto: (path: string) => path.includes('.module.'),
+                        localIdentName: options.isRelease ? '[hash:base64]' : '[path][name]__[local]',
+                    },
+                    url: true,
+                },
+            },
+            {
+                loader: 'postcss-loader',
+                options: {
+                    postcssOptions: {
+                        config: options.paths.root,
+                    },
+                },
+            },
+            {
+                loader: 'resolve-url-loader',
+                options: {
+                    keepQuery: true,
+                    sourceMap: true,
+                },
+            },
+            'sass-loader',
+            {
+                loader: 'sass-resources-loader',
+                options: {
+                    // Provide path to the file with resources
+                    resources: [
+                        // eslint-disable-next-line global-require, import/no-dynamic-require
+                        ...require('../../shared/src/styles/index.js'),
+                    ],
+                },
+            },
+        ],
+    };
+    const sourceMapLoader = {
+        loader: 'source-map-loader',
+        test: (input: string) => options.isRelease && /\.js$/.test(input),
+    };
+
+    return [
+        {
+            // https://github.com/webpack/webpack/issues/11467
+            include: /node_modules/,
+            resolve: {
+                fullySpecified: false,
+            },
+            test: /\.m?js/,
+        },
+        babelLoader,
+        //TODO: Uncomment this line when type script migrations on all packages done
+        // plugins: [new CleanWebpackPlugin(), new ForkTsCheckerWebpackPlugin()],
+        sourceMapLoader,
+        styleLoader,
+        {
+            exclude: /node_modules/,
+            generator: {
+                filename: 'account-v2/public/[name].[contenthash][ext]',
+            },
+            include: /public\//,
+            issuer: /\/packages\/account-v2\/[^/]*\.scss/,
+            test: /\.svg$/,
+            type: 'asset/resource',
+        },
+        {
+            exclude: /node_modules/,
+            include: /public\//,
+            issuer: /\/packages\/account-v2\/[^/]*\.tsx/,
+            test: /\.svg$/,
+            use: svgLoaders,
+        },
+    ];
+};

packages/account-v2/build/build-optimization.ts

@@ -0,0 +1,45 @@
+import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
+import TerserPlugin from 'terser-webpack-plugin';
+import { Configuration } from 'webpack';
+import { TBuildOptions } from './types/build-types';
+
+export const buildOptimization = (options: TBuildOptions): Configuration['optimization'] => ({
+    minimize: options.isRelease,
+    minimizer: options.isRelease
+        ? [
+              new TerserPlugin({
+                  parallel: 2,
+                  test: /\.js$/,
+              }),
+              new CssMinimizerPlugin(),
+          ]
+        : [],
+    splitChunks: {
+        automaticNameDelimiter: '~',
+        cacheGroups: {
+            default: {
+                minChunks: 2,
+                minSize: 102400,
+                priority: -20,
+                reuseExistingChunk: true,
+            },
+            defaultVendors: {
+                idHint: 'vendors',
+                priority: -10,
+                test: /[\\/]node_modules[\\/]/,
+            },
+            shared: {
+                chunks: 'all',
+                name: 'shared',
+                test: /[\\/]shared[\\/]/,
+            },
+        },
+        chunks: 'all',
+        enforceSizeThreshold: 500000,
+        maxAsyncRequests: 30,
+        maxInitialRequests: 3,
+        minChunks: 1,
+        minSize: 102400,
+        minSizeReduction: 102400,
+    },
+});

packages/account-v2/build/build-resolvers.ts

@@ -0,0 +1,5 @@
+import { ResolveOptions } from 'webpack';
+
+export const buildResolvers = (): ResolveOptions => ({
+    extensions: ['.js', '.jsx', '.ts', '.tsx'],
+});

packages/account-v2/build/build-webpack-config.ts

@@ -0,0 +1,36 @@
+import { Configuration } from 'webpack';
+import { TBuildOptions } from './types/build-types';
+import { buildLoaders } from './build-loaders';
+import { buildOptimization } from './build-optimization';
+import { buildResolvers } from './build-resolvers';
+
+export const buildWebpackConfig = (options: TBuildOptions): Configuration => ({
+    devtool: options.isRelease ? 'source-map' : 'eval-cheap-module-source-map',
+    entry: {
+        index: options.paths.entry,
+    },
+    externals: [
+        {
+            '@deriv/api': true,
+            react: true,
+            'react-dom': true,
+            'react-router-dom': true,
+        },
+    ],
+    mode: options.isRelease ? 'production' : 'development',
+    module: {
+        rules: buildLoaders(options),
+    },
+    optimization: buildOptimization(options),
+    output: {
+        chunkFilename: 'account-v2/js/account-v2.[name].[contenthash].js',
+        filename: 'account-v2/js/[name].js',
+        library: '@deriv/account-v2',
+        libraryExport: 'default',
+        libraryTarget: 'umd',
+        path: options.paths.output,
+        publicPath: options.base,
+    },
+
+    resolve: buildResolvers(),
+});

packages/account-v2/build/types/build-types.ts

@@ -0,0 +1,15 @@
+export interface TBuildPaths {
+    entry: string;
+    output: string;
+    root: string;
+}
+
+export interface TBuildEnv {
+    base?: boolean | string;
+}
+
+export interface TBuildOptions {
+    base: string;
+    isRelease: boolean;
+    paths: TBuildPaths;
+}

packages/account-v2/jest.config.ts

@@ -0,0 +1,9 @@
+import baseConfigForPackages from '../../jest.config.base';
+
+export default {
+    ...baseConfigForPackages,
+    moduleNameMapper: {
+        '\\.s(c|a)ss$': '<rootDir>/../../__mocks__/styleMock.js',
+        '^.+\\.svg$': '<rootDir>/../../__mocks__/fileMock.js',
+    },
+};