build: init project

.commitlintrc.json

@@ -0,0 +1,27 @@
+{
+    "extends": ["@commitlint/config-conventional"],
+    "rules": {
+        "subject-case": [0, "always"],
+        "type-enum": [
+            2,
+            "always",
+            [
+                "build",
+                "bugfix",
+                "ci",
+                "chore",
+                "docs",
+                "feat",
+                "fix",
+                "hotfix",
+                "perf",
+                "refactor",
+                "revert",
+                "style",
+                "test",
+                "redeploy",
+                "translations"
+            ]
+        ]
+    }
+}

.eslintignore

@@ -0,0 +1,5 @@
+dist/*.js
+src/**/__tests__/*.js
+src/_common/lib/**/*.js
+.eslintrc.js
+.eslintrc.cjs

.eslintrc.cjs

@@ -0,0 +1,69 @@
+module.exports = {
+    extends: ['@deriv-com/eslint-config-deriv'],
+    rules: {
+        'global-require': 'off',
+    },
+    overrides: [
+        {
+            files: ['*.ts', '*.tsx'],
+            rules: {
+                'react/prop-types': 'off',
+                'react/react-in-jsx-scope': 'off',
+                'react/jsx-uses-react': 'off',
+            },
+        },
+        {
+            files: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
+            excludedFiles: '**/integration-tests/**/*.[jt]s?(x)',
+            extends: ['plugin:testing-library/react'],
+        },
+        {
+            files: ['*.{ts,tsx}'],
+            parser: '@typescript-eslint/parser',
+            plugins: ['@typescript-eslint'],
+            extends: [
+                'plugin:@typescript-eslint/recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin
+                'prettier/@typescript-eslint', // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
+                'plugin:react/recommended',
+                'plugin:@typescript-eslint/recommended',
+                'plugin:prettier/recommended',
+                'plugin:react/jsx-runtime',
+            ],
+            parserOptions: {
+                ecmaversion: 2018,
+                sourceType: 'module',
+                ecmaFeatures: {
+                    jsx: true,
+                },
+                babelOptions: {
+                    presets: ['@babel/preset-react', '@babel/preset-typescript'],
+                    plugins: [
+                        ['@babel/plugin-proposal-decorators', { legacy: true }],
+                        ['@babel/plugin-proposal-class-properties', { 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/plugin-proposal-nullish-coalescing-operator',
+                    ],
+                },
+            },
+            settings: {
+                react: {
+                    version: 'detect',
+                },
+                'import/resolver': {
+                    typescript: {
+                        // use an array
+                        project: 'packages/**/tsconfig.json',
+                    },
+                    node: {
+                        extensions: ['.ts', '.tsx'],
+                        moduleDirectory: ['src', 'node_modules'],
+                    },
+                },
+            },
+        },
+    ],
+};

.github/workflows/build-and-deploy-staging.yml

@@ -0,0 +1,71 @@
+name: Build staging and Deploy to Cloudflare Pages
+
+on:
+    push:
+        branches:
+            - 'main'
+
+concurrency:
+    group: cloudflare-pages-build-staging
+    cancel-in-progress: true
+
+jobs:
+    build_to_cloudflare_pages:
+        timeout-minutes: 30
+        runs-on: ubuntu-latest
+        environment: staging
+        steps:
+            - name: Checkout to main branch
+              uses: actions/checkout@v3
+
+            - name: Setup node
+              uses: actions/setup-node@v3
+              with:
+                  node-version: 20.x
+                  cache: 'npm'
+
+            - name: Get cached dependencies
+              id: cache-npm
+              uses: actions/cache/restore@e12d46a63a90f2fae62d114769bbf2a179198b5c
+              with:
+                  path: node_modules
+                  key: npm-${{ hashFiles('./package-lock.json') }}
+
+            - name: Install dependencies
+              if: ${{ steps.cache-npm.outputs.cache-hit != 'true' }}
+              run: npm ci
+              shell: bash
+
+            - name: Build staging
+              run: npm run build
+
+            - name: Run tests for Eslint
+              run: npm run test:eslint
+
+            - name: Run unit tests and coverage report
+              run: npm run test
+
+            - name: Publish to Cloudflare Pages
+              id: publish-to-pages
+              env:
+                  CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+                  CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+                  HEAD_BRANCH: ${{ github.head_ref }}
+              run: |
+                  echo "Installing Wrangler CLI"
+                  npm i -g wrangler
+                  echo "Deploying build to Cloudflare Pages"
+                  directory='public'
+                  projectName=${{ secrets.CLOUDFLARE_PROJECT_NAME }}
+                  branch=$(echo "$HEAD_BRANCH" | head -c 20 | sed 's/[\/_\.]/-/g; s/[^a-zA-Z0-9]$/1/')
+                  cf_preview_url=$(wrangler pages deploy $directory --project-name=$projectName --branch=$branch > log.txt 2>&1; echo $?)
+                  echo "------"
+                  preview_url=https://$branch.$projectName.pages.dev
+                  cat log.txt
+                  if grep -q "Deployment complete" log.txt; then
+                    echo "preview_url=$preview_url" >> "$GITHUB_OUTPUT"
+                    echo $preview_url > .pr/PREVIEW_URL
+                  else
+                    echo "Deployment to Cloudflare Pages failed."
+                    exit 1
+                  fi

.github/workflows/build-and-deploy-test.yml

@@ -0,0 +1,155 @@
+name: Build test link and Deploy to Cloudflare Pages
+
+permissions:
+    actions: write # Necessary to cancel workflow executions
+    checks: write # Necessary to write reports
+    pull-requests: write # Necessary to comment on PRs
+    contents: read
+
+on:
+    pull_request_target:
+        types: [opened, synchronize]
+        branches:
+            - '**'
+
+concurrency:
+    group: cloudflare-pages-build-${{github.head_ref}}
+    cancel-in-progress: true
+
+jobs:
+    build_to_cloudflare_pages:
+        timeout-minutes: 30
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout to branch
+              uses: actions/checkout@v3
+              with:
+                  ref: ${{ github.event.pull_request.head.sha }}
+
+            - name: Setup node
+              uses: actions/setup-node@v3
+              with:
+                  node-version: 18.x
+                  cache: 'npm'
+
+            - name: Post Cloudflare Pages Preview comment
+              uses: marocchino/sticky-pull-request-comment@efaaab3fd41a9c3de579aba759d2552635e590fd
+              with:
+                  header: Cloudflare Pages Preview Comment
+                  number: ${{github.event.pull_request.user.login}}
+                  message: ${{steps.generate_action_url.outputs.comment}}
+                  recreate: true
+
+            - name: Create npmrc file
+              shell: bash
+              run: echo "@deriv-com:registry=https://npm.pkg.github.com" >> .npmrc
+
+            - name: Get cached dependencies
+              id: cache-npm
+              uses: actions/cache/restore@e12d46a63a90f2fae62d114769bbf2a179198b5c
+              with:
+                  path: node_modules
+                  key: npm-${{ hashFiles('./package-lock.json') }}
+
+            - name: Install dependencies
+              if: ${{ steps.cache-npm.outputs.cache-hit != 'true' }}
+              run: npm ci
+              shell: bash
+
+            - name: Build staging
+              run: npm run build
+
+            - name: Run tests for Eslint
+              run: npm run test:eslint
+
+            - name: Run unit tests and coverage report
+              run: npm run test
+
+            - name: Retrieve PR information
+              env:
+                  EVENT_NUMBER: ${{ github.event.number }}
+                  EVENT_USERNAME: ${{ github.event.pull_request.user.login }}
+                  HEAD_REF: ${{ github.head_ref }}
+                  DRAFT: ${{ github.event.pull_request.draft }}
+              run: |
+                  mkdir -p .pr
+                  echo "$EVENT_NUMBER" > .pr/NR
+                  echo "$EVENT_USERNAME" > .pr/USERNAME
+                  echo "$HEAD_REF" > .pr/BRANCHNAME
+                  echo "$DRAFT" > .pr/DRAFT
+
+            - name: Publish to Cloudflare Pages
+              id: publish-to-pages
+              env:
+                  CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_TEST_LINK_TOKEN }}
+                  CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+                  HEAD_BRANCH: ${{ github.head_ref }}
+              run: |
+                  echo "Installing Wrangler CLI"
+                  npm i -g wrangler
+                  echo "Deploying build to Cloudflare Pages"
+                  directory='public'
+                  projectName=${{ secrets.CLOUDFLARE_PROJECT_NAME }}
+                  branch=$(echo "$HEAD_BRANCH" | head -c 20 | sed 's/[\/_\.]/-/g; s/[^a-zA-Z0-9]$/1/')
+                  cf_preview_url=$(wrangler pages deploy $directory --project-name=$projectName --branch=$branch > log.txt 2>&1; echo $?)
+                  echo "------"
+                  preview_url=https://$branch.$projectName.pages.dev
+                  cat log.txt
+                  if grep -q "Deployment complete" log.txt; then
+                    echo "preview_url=$preview_url" >> "$GITHUB_OUTPUT"
+                    echo $preview_url > .pr/PREVIEW_URL
+                  else
+                    echo "Deployment to Cloudflare Pages failed."
+                    exit 1
+                  fi
+
+            - name: 'Generate preview link comment'
+              if: success()
+              id: generate_preview_url
+              uses: actions/github-script@ffc2c79a5b2490bd33e0a41c1de74b877714d736
+              with:
+                  github-token: ${{ github.token }}
+                  script: |
+                      const action_url = "${{github.server_url}}/${{github.repository}}/actions/runs/${{github.run_id}}"
+                      const preview_url = "${{steps.publish-to-pages.outputs.preview_url}}"
+                      const comment = [
+                          `**Preview Link**: ${preview_url}`,
+                          '| Name | Result |',
+                          '| :--- | :------ |',
+                          `| **Build status**  | Completed ✅ |`,
+                          `| **Preview URL**  | [Visit Preview](${preview_url}) |`,
+                          `| **Action URL**  | [Visit Action](${action_url}) |`,
+                          ''
+                        ].join('\n')
+                      core.setOutput("comment", comment);
+            - name: 'Generate failure comment'
+              if: failure()
+              id: generate_failure_comment
+              uses: actions/github-script@ffc2c79a5b2490bd33e0a41c1de74b877714d736
+              with:
+                  github-token: ${{ github.token }}
+                  script: |
+                      const action_url = "${{github.server_url}}/${{github.repository}}/actions/runs/${{github.run_id}}"
+                      const comment = [
+                        '| Name | Result |',
+                        '| :--- | :------ |',
+                        `| **Build status**  | Failed ❌ |`,
+                        `| **Action URL**  | [Visit Action](${action_url}) |`,
+                        ''
+                      ].join('\n')
+                      core.setOutput("comment", comment);
+
+            - name: Post Cloudflare Pages Preview comment
+              if: success() || failure()
+              uses: marocchino/sticky-pull-request-comment@efaaab3fd41a9c3de579aba759d2552635e590fd
+              with:
+                  header: Cloudflare Pages Preview Comment
+                  number: ${{github.event.number}}
+                  message: ${{steps.generate_preview_url.outputs.comment || steps.generate_failure_comment.outputs.comment }}
+                  recreate: true
+
+            - name: Upload PR information to artifact
+              uses: actions/upload-artifact@82c141cc518b40d92cc801eee768e7aafc9c2fa2
+              with:
+                  name: 'pr-${{github.run_id}}'
+                  path: .pr

.gitignore

@@ -0,0 +1,32 @@
+*~
+.idea/
+.grunt/
+.sass-cache/
+.vscode/
+dist/
+node_modules/
+packages/**/scripts/CNAME
+.DS_Store
+tsconfig.tsbuildinfo
+*.swp
+npm-debug.log
+lerna-debug.log
+coverage
+
+.env
+.env.local
+*.secret
+nx-cloud.env
+test-results/
+playwright-report/
+playwright/.cache/
+.nx
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx --no -- commitlint --edit 

.husky/post-merge

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+bash ./hooks/post-merge.sh

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged --allow-empty

.lintstagedrc.json

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

.prettierignore

@@ -0,0 +1 @@
+*.yml

.prettierrc

@@ -0,0 +1,11 @@
+{
+  "endOfLine": "lf",
+  "singleQuote": true,
+  "useTabs": false,
+  "tabWidth": 4,
+  "trailingComma": "es5",
+  "printWidth": 120,
+  "jsxSingleQuote": true,
+  "arrowParens": "avoid",
+  "proseWrap": "preserve"
+}