Refactoring for reusable React components + Docker build (#1)

* Consume LensIcon component from shared package

* Docker build support

.dockerignore

@@ -0,0 +1,6 @@
+/.husky/
+/.openapi/
+/.vscode/
+/examples/
+node_modules/
+/test/

.gitignore

@@ -102,7 +102,6 @@ web_modules/
 .yarn/
 
 # dotenv environment variable files
-.env
 !scripts/**/.env
 .env.development.local
 .env.test.local

.yarnrc.yml

@@ -1,3 +1,7 @@
 nodeLinker: node-modules
 
+plugins:
+  - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
+    spec: "@yarnpkg/plugin-workspace-tools"
+
 yarnPath: .yarn/releases/yarn-3.6.4.cjs

Dockerfile

@@ -0,0 +1,59 @@
+###########################################################
+# Build container
+###########################################################
+FROM launcher.gcr.io/google/nodejs AS builder
+
+# Prepare arguments
+ARG service
+ARG APP_ENV=production
+ARG CLIENT_URL=https://ud.me
+
+# Use development environment during build to allow development dependencies
+# to be installed which includes build tools
+ENV NODE_ENV development
+ENV APP_ENV $APP_ENV
+ENV CLIENT_URL $CLIENT_URL
+
+# Prepare dependencies
+RUN install_node v16.13.0
+RUN yarn set version 3.2.0
+
+# Copy project files
+WORKDIR /app
+COPY . .
+
+# Build project dependencies including dev dependencies
+RUN yarn install
+RUN yarn build
+RUN NODE_ENV=production yarn workspace server build:next
+
+## Remove extra files to reduce image size
+RUN rm -rf node_modules && \
+  NODE_ENV=production yarn install
+RUN rm -rf .yarn/cache
+
+###########################################################
+# Runtime container
+###########################################################
+FROM launcher.gcr.io/google/nodejs
+
+# Prepare arguments
+ARG service
+ARG APP_ENV=production
+ARG CLIENT_URL=https://ud.me
+
+# Prepare dependencies
+RUN install_node v16.13.0
+RUN yarn set version 3.2.0
+
+# Copy project files
+WORKDIR /app
+COPY --from=builder /app  .
+
+# Setup env vars
+ENV NODE_ENV production
+ENV APP_ENV $APP_ENV
+ENV CLIENT_URL $CLIENT_URL
+
+# Server start command
+CMD ["yarn", "workspace", "server", "run", "start"]

package.json

@@ -16,6 +16,9 @@
     "test": "DOTENV_CONFIG_PATH=./.env.test jest"
   },
   "devDependencies": {
+    "@swc/cli": "^0.1.57",
+    "@swc/core": "^1.2.219",
+    "@swc/jest": "^0.2.22",
     "@trivago/prettier-plugin-sort-imports": "3.2.0",
     "@types/classnames": "^2.2.11",
     "@types/node": "^16.11.21",
@@ -57,5 +60,8 @@
     "tsconfig-paths": "^4.1.0",
     "typescript": "5.0.4"
   },
+  "optionalDependencies": {
+    "@next/swc-linux-x64-gnu": "^12.2.5"
+  },
   "packageManager": "[email protected]"
 }

packages.base.tsconfig.json

@@ -1,27 +1,44 @@
 {
   "compilerOptions": {
+    "allowJs": false,
+    "allowSyntheticDefaultImports": true,
+    "allowUnreachableCode": true,
     "composite": true,
     "declaration": true,
-    "incremental": true,
     "declarationMap": true,
-    "sourceMap": true,
-    "skipLibCheck": true,
-
+    "downlevelIteration": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "ignoreDeprecations": "5.0",
+    "importHelpers": true,
+    "incremental": true,
+    "isolatedModules": false,
     "jsx": "react",
-    "target": "ES5",
     "module": "commonjs",
     "moduleResolution": "node",
-
-    "resolveJsonModule": true,
-    "allowSyntheticDefaultImports": true,
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-
-    "strict": true,
+    "noFallthroughCasesInSwitch": true,
     "noImplicitAny": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true
-  }
-}
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strict": true,
+    "strictNullChecks": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "target": "ESNext"
+  },
+  "exclude": [
+    "node_modules",
+    "**/node_modules",
+    "test",
+    "**/test"
+  ],
+  "include": [
+    "**/*.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ]
+}

packages.build.tsconfig.json

@@ -21,5 +21,8 @@
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true
   },
-  "references": [{"path": "packages/config"}]
+  "references": [
+    {"path": "packages/config"},
+    {"path": "packages/ui-components"}
+  ]
 }

packages/config/src/env/staging.ts

@@ -3,7 +3,7 @@ import type {ConfigOverride} from './types';
 export default function getStagingConfig(): ConfigOverride {
   return {
     APP_ENV: 'staging',
-    UD_ME_BASE_URL: 'https://www.ud-staging.com/d',
+    UD_ME_BASE_URL: 'https://www.ud-me-staging.com',
     LOGIN_WITH_UNSTOPPABLE: {
       CLIENT_ID: '93d7efca-a5c6-409c-94b5-91adf1b33904',
       REDIRECT_URI: process.env.NEXT_PUBLIC_CLIENT_URL,

packages/ui-components/.eslintrc.js

@@ -0,0 +1,128 @@
+module.exports = {
+  env: {
+    browser: true,
+    es6: true,
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+  parserOptions: {
+    // Allows for the parsing of modern ECMAScript features
+    ecmaVersion: 2020,
+    ecmaFeatures: {
+      // allows for the parsing of JSX
+      jsx: true,
+    },
+    tsconfigRootDir: __dirname,
+    project: ['./tsconfig.json'],
+    sourceType: 'module',
+  },
+  plugins: ['react', 'tss-unused-classes'],
+  extends: ['airbnb/hooks', 'plugin:@next/next/recommended'],
+  rules: {
+    'tss-unused-classes/unused-classes': 'off',
+    '@next/next/link-passhref': 'off',
+    '@next/next/no-img-element': 'off',
+    'jsx-a11y/alt-text': 'off',
+    'jsx-a11y/anchor-is-valid': 'off',
+    'jsx-a11y/click-events-have-key-events': 'off',
+    'jsx-a11y/iframe-has-title': 'off',
+    'jsx-a11y/label-has-associated-control': 'off',
+    'jsx-a11y/no-noninteractive-element-interactions': 'off',
+    'jsx-a11y/no-noninteractive-tabindex': 'off',
+    'jsx-a11y/no-static-element-interactions': 'off',
+    'jsx-a11y/tabindex-no-positive': 'off',
+    'no-console': 'off',
+    'promise/prefer-await-to-then': 'off',
+    'react/button-has-type': 'off',
+    'react/destructuring-assignment': 'off',
+    'react/function-component-definition': 'off',
+    'react/no-invalid-html-attribute': 'off',
+    'react-hooks/exhaustive-deps': 'off',
+    'react-hooks/rules-of-hooks': 'off',
+    'react/jsx-boolean-value': 'off',
+    'react/jsx-curly-brace-presence': 'off',
+    'react/jsx-fragments': 'off',
+    'react/jsx-no-bind': 'off',
+    'react/jsx-no-constructed-context-values': 'off',
+    'react/jsx-no-duplicate-props': 'off',
+    'react/jsx-no-useless-fragment': 'off',
+    'react/jsx-pascal-case': 'off',
+    'react/jsx-props-no-spreading': 'off',
+    'react/no-array-index-key': 'off',
+    'react/no-danger': 'off',
+    'react/no-unstable-nested-components': 'off',
+    'react/no-unused-prop-types': 'off',
+    'react/require-default-props': 'off',
+    'react/self-closing-comp': 'off',
+    'react/state-in-constructor': 'off',
+    'spaced-comment': 'off',
+    'react/display-name': 'off',
+    'react/prop-types': 'off',
+    'import/no-duplicates': ['error'],
+
+    '@typescript-eslint/consistent-type-imports': [
+      'error',
+      {
+        disallowTypeAnnotations: false,
+      },
+    ],
+
+    'import/order': [
+      'error',
+      {
+        groups: [],
+      },
+    ],
+
+    'no-restricted-imports': [
+      'error',
+      {
+        patterns: [
+          {
+            // https://mui.com/material-ui/guides/minimizing-bundle-size#option-one-use-path-imports
+            group: ['@mui/*/*/*'],
+            message: `Please use second-level imports: '@mui/*/*'. `,
+          },
+        ],
+        paths: [
+          {
+            name: '@unstoppabledomains/ui-kit/colors',
+            message: `Please use '@mui/material/colors' instead. `,
+          },
+          {
+            name: '@unstoppabledomains/ui-kit/icons',
+            message: `Please use '@mui/icons-material/*' path imports instead. `,
+          },
+          {
+            name: '@mui/icons-material',
+            message: `Please use '@mui/icons-material/*' path imports instead. `,
+          },
+          {
+            name: '@unstoppabledomains/ui-kit/lab',
+            message: `Please use '@mui/lab/*' path imports instead. `,
+          },
+          {
+            name: '@mui/lab',
+            message: `Please use '@mui/lab/*' path imports instead. `,
+          },
+          {
+            name: '@unstoppabledomains/ui-kit',
+            message: `Please use '@mui/material/*' or '@unstoppabledomains/ui-kit/components' path imports instead. `,
+          },
+          {
+            name: '@mui/material',
+            message: `Please use '@mui/material/*' path imports instead. `,
+          },
+          {
+            name: '@mui/material/Alert',
+            importNames: ['default', 'AlertProps', 'AlertClasses'],
+            message: `Please use '@unstoppabledomains/ui-kit/components' instead. `,
+          },
+        ],
+      },
+    ],
+  },
+};