[BOT] shafin/chore: use webpack

.eslintrc.js

@@ -0,0 +1,86 @@
+const webpackConfig = require('./webpack.config');
+
+module.exports = {
+    parser: '@typescript-eslint/parser',
+    parserOptions: {
+        ecmaVersion: 2021,
+        sourceType: 'module',
+        ecmaFeatures: {
+            jsx: true,
+        },
+    },
+    env: {
+        browser: true,
+        node: true,
+        jest: true,
+    },
+    globals: {
+        Blockly: 'readonly',
+        trackJs: 'readonly',
+        dataLayer: 'readonly',
+        goog: 'readonly',
+        google: 'readonly',
+        gapi: 'readonly',
+        __webpack_public_path__: 'readonly',
+    },
+    extends: ['eslint:recommended', 'plugin:react/recommended', 'plugin:@typescript-eslint/recommended'],
+    settings: {
+        'import/resolver': {
+            webpack: { config: webpackConfig },
+        },
+    },
+    plugins: ['react', 'react-hooks', 'simple-import-sort', '@typescript-eslint'],
+    rules: {
+        'simple-import-sort/imports': 'warn',
+        'simple-import-sort/exports': 'warn',
+        'react-hooks/exhaustive-deps': 'warn',
+        'react/react-in-jsx-scope': 'off',
+        'react/jsx-uses-react': 'off',
+        'react/prop-types': 'off',
+        '@typescript-eslint/no-explicit-any': 'warn',
+        '@typescript-eslint/no-var-requires': 'off',
+    },
+    overrides: [
+        {
+            files: ['**/*.js', '**/*.ts', '**/*.tsx', '**/*.jsx'],
+            rules: {
+                'simple-import-sort/imports': [
+                    'warn',
+                    {
+                        groups: [
+                            [
+                                'public-path',
+                                // `react` first, then packages starting with a character
+                                '^react$',
+                                '^[a-z]',
+                                // Packages starting with `@`
+                                '^@',
+                                // Packages starting with `~`
+                                '^~',
+                                '^Components',
+                                '^Constants',
+                                '^Utils',
+                                '^Types',
+                                '^Stores',
+                                // 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*',
+                            ],
+                        ],
+                    },
+                ],
+            },
+        },
+    ],
+    ignorePatterns: ['node_modules/', 'dist/', '**/webpack.config.js'],
+};

.lintstagedrc.json

@@ -1,5 +1,5 @@
 {
     "*.{js,jsx,ts,tsx,md,html,css,scss}": "prettier --write",
-    "*.{js,jsx,ts,tsx}": "eslint --fix --config .eslintrc.cjs",
+    "*.{js,jsx,ts,tsx}": "eslint --fix --config .eslintrc.js",
     "*.{css,scss}": "npx stylelint --fix"
 }

.stylelintrc.cjs

@@ -1,6 +1,9 @@
 module.exports = {
     plugins: ['stylelint-no-unsupported-browser-features'],
     rules: {
+        'scss/at-mixin-pattern': null,
+        'scss/no-global-function-names': null,
+        'scss/dollar-variable-pattern': null,
         'color-named': 'never',
         'color-no-invalid-hex': true,
         'declaration-block-no-duplicate-properties': [true, { ignore: ['consecutive-duplicates'] }],

__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub';

__mocks__/react-dom-server.js

@@ -0,0 +1,4 @@
+module.exports = {
+    renderToString: jest.fn(() => '<div>mocked HTML</div>'),
+    renderToStaticMarkup: jest.fn(() => '<Xml xmlns=`http://www.w3.org/1999/xhtml` id=`toolbox`>mocked XML</Xml>'),
+};

__mocks__/styleMock.js

@@ -0,0 +1 @@
+module.exports = {};

__mocks__/translation.mock.js

@@ -0,0 +1,22 @@
+const Localize = ({ i18n_default_text, values }) => {
+    // Replace placeholders in the default text with actual values
+    const localizedText = i18n_default_text.replace(/\{\{(\w+)\}\}/g, (match, key) => values[key] || match);
+
+    return localizedText || null;
+};
+
+// Mock for useTranslations hook
+const useTranslations = () => ({
+    localize: jest.fn((text, args) => {
+        return text.replace(/{{(.*?)}}/g, (_, match) => args[match.trim()]);
+    }),
+    currentLang: 'EN',
+});
+
+const localize = jest.fn(text => text);
+
+const getAllowedLanguages = jest.fn(() => ({ EN: 'English', VI: 'Tiếng Việt' }));
+
+const initializeI18n = jest.fn(() => {});
+
+export { getAllowedLanguages, initializeI18n, Localize, localize, useTranslations };

babel.config.js

@@ -0,0 +1,44 @@
+module.exports = {
+    presets: [
+        '@babel/preset-env',
+        '@babel/preset-typescript',
+        [
+            '@babel/preset-react',
+            {
+                runtime: 'automatic',
+            },
+        ],
+    ],
+    plugins: [
+        'syntax-dynamic-import',
+        [
+            '@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-optional-chaining',
+    ],
+};

index.html

@@ -5,7 +5,42 @@
         <link rel="icon" type="image/svg+xml" href="/deriv-logo.svg" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>Deriv Bot</title>
+        <style>
+            :root {
+                --logo-loading-color: rgba(0, 0, 0, 0.8);
+                --header-footer-bg-color: rgba(0, 0, 0, 0.04);
+                --content-bg-color: #fff;
+                --general-main-1: #ffffff;
+                --general-section-1: #f2f3f4;
+                --text-prominent: #333333;
+                font-size: 62.5%;
+            }
+
+            #platform_name:after {
+                content: var(--app-shell-platform-name);
+                margin-left: 8px;
+            }
+
+            .deriv-app > .header__loading {
+                background-color: var(--general-main-1);
+                border-bottom: var(--general-main-1);
+            }
+
+            .deriv-app > .app-contents__loading {
+                background-color: var(--general-main-1);
+            }
+
+            .deriv-app > .footer__loading {
+                background-color: var(--general-main-1);
+                border-bottom: var(--general-main-1);
+            }
+
+            .initial-loader__loading {
+                background-color: var(--general-main-1);
+            }
+        </style>
     </head>
+
     <body class="body">
         <div id="modal_root" class="modal-root"></div>
         <div id="root"></div>