feat(react): add base react app directory in root of the application (#…

…1819)

* chore: add initial packages and lint tooling

* feat(design-system): add base colours to theme

* feat(design-system): add base typography to theme

* feat(design-system): add Button styling variants

* feat(design-system): add initial Input outline styling

* feat(design-system): extend theme to use new colours/text/components

* chore(github-actions): add Chromatic CI/CD

* feat(Spinner): add Spinner custom component

* feat(Button): add Button component and story

* chore(storybook): set up storybook

* chore: update chromatic to only run on form-v2 branches

* chore: update chromatic action with correct working directory

* chore: update root ts-config to ignore src/frontend

* chore: add lint scripts to react frontend directory

* build: move React app to root, skip preflight checks

preflight checks due to conflicting node modules, but can ignore for now

* fix: update chromatic github action to the correct directory

* chore: use eslint's sort import instead of prettier's and update lint

prettier config is not very customization

* feat(storybook): add withPerformance addon

* fix: correct lint:fix script, set frontend eslint as root

setting eslint as root means it will not converge with root's eslint, preventing conflicts

* feat: add better stories for Buttons

* chore: update storybook addons to latest for perf

* fix: add correct working directory for Chromatic action

* fix: remove deleted storybook addon

* fix: add all missing node_modules in frontend

didn't get any errors locally due to having a root node_module.. which is not always going to be possible

* fix: update lint-staged to account for multi-folder repo

* fix: lint-staged not working for multi-repo

* ref: remove usage of FC, indexes now default export for code split

* feat: add aliases to frontend configuration

* refactor: make export default a one-liner

* refactor: use alias instead of aliasDangerous in cra rewire

* chore: delete react app readme

.eslintrc

@@ -4,6 +4,7 @@
     "es6": true,
     "node": true
   },
+  "ignorePatterns": ["./frontend"],
   "extends": ["eslint:recommended", "plugin:prettier/recommended"],
   "globals": {
     "Atomics": "readonly",

.github/workflows/chromatic.yml

@@ -0,0 +1,37 @@
+# .github/workflows/chromatic.yml
+
+# Workflow name
+name: 'Chromatic'
+
+defaults:
+  run:
+    working-directory: frontend
+
+# Event for the workflow
+on:
+  push:
+    # Sequence of patterns matched against refs/heads
+    branches:
+      # Push events to branches matching refs/heads/form-v2
+      - 'form-v2'
+      - 'form-v2/**'
+
+# List of jobs
+jobs:
+  chromatic-deployment:
+    # Operating System
+    runs-on: ubuntu-latest
+    # Job steps
+    steps:
+      - uses: actions/checkout@v1
+      - name: Install dependencies
+        run: npm i
+        # 👇 Adds Chromatic as a step in the workflow
+      - name: Publish to Chromatic
+        uses: chromaui/action@v1
+        # Chromatic GitHub Action options
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          # 👇 Chromatic projectToken, refer to the manage page to obtain it.
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          workingDir: frontend

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-npm run pre-commit && sh secrets-check.sh
+npm run pre-commit && sh secrets-check.sh && cd frontend && npm run pre-commit

.lintstagedrc.yml

@@ -0,0 +1,5 @@
+'{src,tests}/**/*.{js,ts}':
+  - eslint --fix
+'{src,tests}/**/*.html':
+  - htmlhint
+  - prettier --write

frontend/.eslintignore

@@ -0,0 +1,7 @@
+# production
+/build
+
+# testing
+/coverage
+
+node_modules

frontend/.eslintrc

@@ -0,0 +1,66 @@
+{
+  "root": true,
+  "plugins": ["import", "simple-import-sort", "prettier"],
+  "overrides": [
+    {
+      "files": ["*.test.ts"],
+      "extends": ["react-app/jest"]
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "extends": ["react-app", "plugin:@typescript-eslint/recommended"],
+      "parser": "@typescript-eslint/parser"
+    },
+    {
+      "files": ["*.stories.*"],
+      "rules": {
+        "@typescript-eslint/explicit-module-boundary-types": "off"
+      }
+    }
+  ],
+  "ignorePatterns": ["build/**/*", "!.storybook"],
+  "env": { "es6": true },
+  "parserOptions": {
+    "ecmaVersion": 2018,
+    "sourceType": "module"
+  },
+  "rules": {
+    // Rules for auto sort of imports
+    "simple-import-sort/imports": [
+      "error",
+      {
+        "groups": [
+          // Side effect imports.
+          ["^\\u0000"],
+          // Packages.
+          // Packages. `react` related packages come first.
+          // Things that start with a letter (or digit or underscore), or
+          // `@` followed by a letter.
+          ["^react", "^@?\\w"],
+          // Root imports
+          // Shared imports should be separate from application imports.
+          ["^(~)(/.*|$)"],
+          ["^(~typings)(/.*|$)"],
+          [
+            "^(~assets|~theme)(/.*|$)",
+            "^(~contexts)(/.*|$)",
+            "^(~constants)(/.*|$)",
+            "^(~hooks)(/.*|$)",
+            "^(~utils)(/.*|$)",
+            "^(~services)(/.*|$)",
+            "^(~components)(/.*|$)"
+          ],
+          ["^(~pages)(/.*|$)"],
+          // Parent imports. Put `..` last.
+          ["^\\.\\.(?!/?$)", "^\\.\\./?$"],
+          // Other relative imports. Put same-folder imports and `.` last.
+          ["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"]
+        ]
+      }
+    ],
+    "simple-import-sort/exports": "error",
+    "import/first": "error",
+    "import/newline-after-import": "error",
+    "import/no-duplicates": "error"
+  }
+}

frontend/.gitignore

@@ -0,0 +1,26 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+storybook-static
+build-storybook.log

frontend/.lintstagedrc.yml

@@ -0,0 +1,3 @@
+'*.{js,ts,tsx}':
+  - prettier --write
+  - eslint --fix

frontend/.prettierignore

@@ -0,0 +1,26 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+storybook-static
+build-storybook.log

frontend/.prettierrc

@@ -0,0 +1,6 @@
+{
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": true
+}

frontend/.storybook/Welcome/Welcome.stories.tsx

@@ -0,0 +1,10 @@
+import { Meta } from '@storybook/react'
+
+import { Welcome as Component } from './Welcome'
+
+export default {
+  title: 'Welcome',
+  component: Component,
+} as Meta
+
+export const Welcome = () => <Component />

frontend/.storybook/Welcome/Welcome.tsx

@@ -0,0 +1,10 @@
+import { Box, Text } from '@chakra-ui/layout'
+
+export const Welcome = (): JSX.Element => {
+  return (
+    <Box>
+      <Text>Form Design System</Text>
+      <Text>Todo: Add readme, add quick links</Text>
+    </Box>
+  )
+}

frontend/.storybook/main.js

@@ -0,0 +1,61 @@
+// Required to sync aliases between storybook and overriden configs
+const config = require('../config-overrides')
+const path = require('path')
+
+const toPath = (_path) => path.join(process.cwd(), _path)
+
+module.exports = {
+  // Welcome story set first so it will show up first.
+  stories: [
+    './Welcome/Welcome.stories.tsx',
+    '../src/**/*.stories.mdx',
+    '../src/**/*.stories.@(js|jsx|ts|tsx)',
+  ],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-a11y',
+    'storybook-addon-pseudo-states',
+    '@storybook/preset-create-react-app',
+  ],
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+    reactDocgenTypescriptOptions: {
+      // Allows typed string unions to be generated properly.
+      shouldExtractLiteralValuesFromEnum: true,
+      compilerOptions: {
+        allowSyntheticDefaultImports: false,
+        esModuleInterop: false,
+      },
+      // Prevents extraneous props from showing up in controls.
+      // See https://github.com/chakra-ui/chakra-ui/issues/2009#issuecomment-765538309.
+      propFilter: (prop) =>
+        prop.parent !== undefined &&
+        (!prop.parent.fileName.includes('node_modules') ||
+          (prop.parent.fileName.includes('node_modules') &&
+            prop.parent.fileName.includes('node_modules/@chakra-ui/') &&
+            !prop.parent.fileName.includes(
+              'node_modules/@chakra-ui/styled-system',
+            ))),
+    },
+  },
+  // webpackFinal setup retrieved from ChakraUI's own Storybook setup
+  // https://github.com/chakra-ui/chakra-ui/blob/main/.storybook/main.js
+  webpackFinal: async (storybookConfig) => {
+    // Required to sync aliases between storybook and overriden configs
+    const customConfig = config(storybookConfig)
+    return {
+      ...storybookConfig,
+      resolve: {
+        ...storybookConfig.resolve,
+        alias: {
+          ...customConfig.resolve.alias,
+          // Required so storybook knows where the npm package is to render ChakraUI components
+          // as this is not directly installed in package.json.
+          '@emotion/core': toPath('node_modules/@emotion/react'),
+          'emotion-theming': toPath('node_modules/@emotion/react'),
+        },
+      },
+    }
+  },
+}

frontend/.storybook/preview.tsx

@@ -0,0 +1,15 @@
+import 'focus-visible/dist/focus-visible'
+import '../src/index.css'
+
+import { ChakraProvider } from '@chakra-ui/react'
+import { DecoratorFn } from '@storybook/react'
+
+import { theme } from '../src/theme'
+
+const withChakra: DecoratorFn = (storyFn) => (
+  <ChakraProvider resetCSS theme={theme}>
+    {storyFn()}
+  </ChakraProvider>
+)
+
+export const decorators = [withChakra]

frontend/config-overrides.js

@@ -0,0 +1,19 @@
+/**
+ * Config overrides for CRA to allow importing of aliases.
+ * This will not work if aliasing folders that is outside of React app's `/src`
+ * folder. If aliasing outside of `/src`, then another function aliasDangerous
+ * will be needed.
+ * See https://www.npmjs.com/package/react-app-rewire-alias#outside-of-root.
+ */
+
+const { alias, configPaths, aliasJest } = require('react-app-rewire-alias')
+
+const aliasMap = configPaths('tsconfig.paths.json')
+
+module.exports = function override(config) {
+  alias(aliasMap)(config)
+
+  return config
+}
+
+module.exports.jest = aliasJest(aliasMap)