Merge pull request #1 from ar-io/PE-5963-setup-frameworks

chore(PE-5963): setup application frameworks

.eslintignore

@@ -0,0 +1,5 @@
+node_modules
+build
+public
+dist
+landing

.eslintrc

@@ -0,0 +1,48 @@
+{
+    "root": true, // Make sure eslint picks up the config at the root of the directory
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+      "ecmaVersion": 12, // Use the latest ecmascript standard
+      "sourceType": "module", // Allows using import/export statements
+      "ecmaFeatures": {
+        "-": true, // Enable JSX since we"re using React
+      },
+    },
+    "settings": {
+      "react": {
+        "version": "detect", // Automatically detect the react version
+      },
+    },
+    "env": {
+      "browser": true, // Enables browser globals like window and document
+      "amd": true, // Enables require() and define() as global variables as per the amd spec.
+      "node": true, // Enables Node.js global variables and Node.js scoping.
+    },
+    "extends": [
+      "eslint:recommended",
+      "plugin:jest-formatting/recommended",
+      "plugin:@typescript-eslint/eslint-recommended",
+      "plugin:@typescript-eslint/recommended",
+      "plugin:react/recommended",
+      "plugin:react-hooks/recommended",
+      "plugin:jsx-a11y/recommended",
+      "plugin:tailwindcss/recommended",
+      //"plugin:prettier/recommended" // Make this the last element so prettier config overrides other formatting rules
+    ],
+    "plugins": [
+      "jest-formatting",
+      "simple-import-sort",
+      "import",
+      "react-hooks",
+      "jsx-no-inline-style",
+    ],
+    "rules": {
+      //  "prettier/prettier": ["error", {}, { "usePrettierrc": true }], // Use our .prettierrc file as source - disabled because conflict no-inline-style
+      "react/react-in-jsx-scope": "off",
+      "no-unused-vars": "off",
+      "@typescript-eslint/no-unused-vars": ["error"],
+      "jsx-no-inline-style/no-inline-style": "error",
+      "@typescript-eslint/no-explicit-any": "off",
+    },
+  }
+

.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "ar-io-network-portal-a40ee"
+  }
+}

.github/workflows/build_and_test.yml

@@ -0,0 +1,65 @@
+name: Staging deploy
+
+on:
+  push:
+    branches:
+      - develop
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        step: [
+            'lint:check',
+            #'test',
+            'build',
+          ]
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v2
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'yarn'
+
+      - run: yarn install --frozen-lockfile
+      - run: yarn ${{ matrix.step }}
+
+  deploy-to-github:
+    runs-on: ubuntu-latest
+    needs: build
+    environment: develop
+    if: ${{ github.ref == 'refs/heads/develop' }}
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v4
+      - uses: actions/setup-node@v3
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'yarn'
+
+      - name: Install and Build 🔧
+        run: |
+          yarn install --frozen-lockfile
+          yarn build
+        env:
+          # FOR BUILD
+          VITE_NODE_ENV: develop
+          VITE_SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+          VITE_SENTRY_RELEASE: ${{ github.sha }}
+          VITE_SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
+          VITE_SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
+          VITE_SENTRY_DSN_PUBLIC_KEY: ${{ secrets.SENTRY_DSN_PUBLIC_KEY }}
+          VITE_SENTRY_DSN_PROJECT_URI: ${{ secrets.SENTRY_DSN_PROJECT_URI }}
+          VITE_SENTRY_DSN_PROJECT_ID: ${{ secrets.SENTRY_DSN_PROJECT_ID }}
+          VITE_GITHUB_HASH: ${{ github.sha }}
+      - name: Add CNAME Record
+        run: |
+          echo ${{ vars.DOMAIN_NAME }} > dist/CNAME
+          cp ./404.html ./dist
+
+      - name: Deploy 🚀
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: dist

.github/workflows/pr.yml

@@ -0,0 +1,50 @@
+name: PR deploy
+
+on: pull_request
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        step: [
+            'lint:check',
+            #'test',
+            'build',
+          ]
+    steps:
+      - uses: actions/checkout@v3
+      - run: yarn install --frozen-lockfile
+      - run: yarn ${{ matrix.step }}
+
+  deploy-to-firebase:
+    runs-on: ubuntu-latest
+    needs: build
+    environment: develop
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v4
+      - uses: actions/setup-node@v3
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'yarn'
+      - name: Install and Build 🔧
+        run: |
+          yarn install --frozen-lockfile
+          yarn build
+        env:
+          # FOR BUILD
+          VITE_NODE_ENV: develop
+
+          VITE_SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+          VITE_SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
+          VITE_SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
+
+          VITE_GITHUB_HASH: ${{ github.sha }}
+
+      # Disribute to Firebase
+      - name: Deploy 🚀
+        uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: '${{ secrets.GITHUB_TOKEN }}'
+          firebaseServiceAccount: '${{ secrets.FIREBASE_CI_SERVICE_ACCOUNT }}'
+          expires: 14d

.github/workflows/production.yml

@@ -0,0 +1,60 @@
+name: Production Deploy
+
+on:
+  push:
+    branches:
+      - main
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        step: [
+            'lint:check',
+            #'test',
+            'build',
+          ]
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v3
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'yarn'
+      - run: yarn install --frozen-lockfile
+      - run: yarn ${{ matrix.step }}
+
+  deploy-to-firebase:
+    runs-on: ubuntu-latest
+    needs: build
+    environment: production
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v4
+      - uses: actions/setup-node@v3
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'yarn'
+
+      - name: Install and Build 🔧
+        run: |
+          yarn install --frozen-lockfile
+          yarn build
+        env:
+          # FOR BUILD
+          VITE_NODE_ENV: production
+          VITE_SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+          VITE_SENTRY_RELEASE: ${{ github.sha }}
+          VITE_SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
+          VITE_SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
+          VITE_SENTRY_DSN_PUBLIC_KEY: ${{ secrets.SENTRY_DSN_PUBLIC_KEY }}
+          VITE_SENTRY_DSN_PROJECT_URI: ${{ secrets.SENTRY_DSN_PROJECT_URI }}
+          VITE_SENTRY_DSN_PROJECT_ID: ${{ secrets.SENTRY_DSN_PROJECT_ID }}
+          VITE_GITHUB_HASH: ${{ github.sha }}
+
+      # Disribute to Firebase
+      - name: Deploy 🚀
+        uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: '${{ secrets.GITHUB_TOKEN }}'
+          firebaseServiceAccount: '${{ secrets.FIREBASE_CI_SERVICE_ACCOUNT }}'
+          channelId: live

.gitignore

@@ -0,0 +1,6 @@
+coverage
+dist
+node_modules
+cache
+*.log
+.idea

.nvmrc

@@ -0,0 +1 @@
+20.6.0

.prettierignore

@@ -0,0 +1,6 @@
+node_modules
+build
+public
+dist
+coverage
+CODEOWNERS

.prettierrc

@@ -0,0 +1,16 @@
+{
+    "semi": true,
+    "printWidth": 80,
+    "trailingComma": "all",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "endOfLine": "lf",
+    "plugins": [
+      "@trivago/prettier-plugin-sort-imports",
+      "prettier-plugin-tailwindcss"
+    ],
+    "importOrder": ["^[.{1,2}/]"],
+    "importOrderSeparation": true,
+    "importOrderSortSpecifiers": true
+  }
+

404.html

@@ -0,0 +1,77 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <!-- <link rel="icon" type="image/svg+xml" href="relative url to svg" />
+    <meta property="og:title" content="title" />
+    <meta
+      property="og:image"
+      content="url to image"
+    />
+    <meta
+      property="og:description"
+      content="description"
+    />
+    <meta property="og:url" content="site url" />
+    -->
+    <!-- Twitter -->
+    <!-- <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="title" />
+    <meta
+      name="twitter:image"
+      content="image url"
+    />
+    <meta
+      name="twitter:description"
+      content="description"
+    />-->
+    <title>Awesome react template</title>
+
+    <script type="text/javascript">
+      // Single Page Apps for GitHub Pages
+      // MIT License
+      // https://github.com/rafgraph/spa-github-pages
+      // This script takes the current url and converts the path and query
+      // string into just a query string, and then redirects the browser
+      // to the new url with only a query string and hash fragment,
+      // e.g. https://www.foo.tld/one/two?a=b&c=d#qwe, becomes
+      // https://www.foo.tld/?/one/two&a=b~and~c=d#qwe
+      // Note: this 404.html file must be at least 512 bytes for it to work
+      // with Internet Explorer (it is currently > 512 bytes)
+
+      // If you're creating a Project Pages site and NOT using a custom domain,
+      // then set pathSegmentsToKeep to 1 (enterprise users may need to set it to > 1).
+      // This way the code will only replace the route part of the path, and not
+      // the real directory in which the app resides, for example:
+      // https://username.github.io/repo-name/one/two?a=b&c=d#qwe becomes
+      // https://username.github.io/repo-name/?/one/two&a=b~and~c=d#qwe
+      // Otherwise, leave pathSegmentsToKeep as 0.
+      var pathSegmentsToKeep = 0;
+
+      var l = window.location;
+      l.replace(
+        l.protocol +
+          '//' +
+          l.hostname +
+          (l.port ? ':' + l.port : '') +
+          l.pathname
+            .split('/')
+            .slice(0, 1 + pathSegmentsToKeep)
+            .join('/') +
+          '/?/' +
+          l.pathname
+            .slice(1)
+            .split('/')
+            .slice(pathSegmentsToKeep)
+            .join('/')
+            .replace(/&/g, '~and~') +
+          (l.search ? '&' + l.search.slice(1).replace(/&/g, '~and~') : '') +
+          l.hash,
+      );
+    </script>
+  </head>
+  <body></body>
+</html>