chore: use webpack

Author: shafin-deriv

.eslintrc.cjs

@@ -0,0 +1,79 @@
+const webpackConfig = require('./webpack.config');
+
+module.exports = {
+    parser: '@typescript-eslint/parser',
+    parserOptions: {
+        ecmaVersion: 2021,
+        sourceType: 'module',
+        ecmaFeatures: {
+            jsx: true,
+        },
+    },
+    globals: {
+        Blockly: false,
+        trackJs: false,
+        jest: false,
+        dataLayer: false,
+        goog: false,
+        google: false,
+        gapi: false,
+        __webpack_public_path__: false,
+        window: true,
+        performance: true,
+        process: true,
+    },
+    extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
+    settings: {
+        'import/resolver': {
+            webpack: { config: webpackConfig },
+        },
+    },
+    plugins: ['simple-import-sort', '@typescript-eslint'],
+    rules: {
+        'simple-import-sort/imports': 'warn',
+        'simple-import-sort/exports': 'warn',
+    },
+    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'],
+};

.eslintrc.js

@@ -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"
 }

.lintstagedrc.json

@@ -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'] }],

.stylelintrc.cjs

@@ -0,0 +1,14 @@
+{
+    "presets": ["@babel/preset-env", ["@babel/preset-react", { "runtime": "automatic" }], "@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-optional-chaining"
+    ]
+}

babel.config.json

@@ -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="root"></div>
         <script type="module" src="/src/main.tsx"></script>