adiun · ShravanKarnati · Apr 9, 2022 · Apr 9, 2022 · Apr 9, 2022 · Apr 9, 2022
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -20,5 +20,6 @@
     "**/dist": true,
     "**/lib": true,
     "**/node_modules": true
-  }
+  },
+  "cSpell.words": ["adiun", "coreui", "stylelint", "tsup", "vite"]
 }
diff --git a/app/.env b/app/.env
diff --git a/app/.eslintrc.js b/app/.eslintrc.js
@@ -1,44 +1,3 @@
-const scaffold = require("@adiun/vm-scaffold/.eslintrc.ui");
-
-// https://github.com/dotansimha/graphql-eslint/tree/master/docs
-const graphqlRules = {
-  "@typescript-eslint/naming-convention": "off",
-  "unicorn/filename-case": "off",
-  "@graphql-eslint/avoid-duplicate-fields": "error",
-  "@graphql-eslint/fields-on-correct-type": "error",
-  "@graphql-eslint/known-argument-names": "error",
-  "@graphql-eslint/known-type-names": "error",
-  "@graphql-eslint/no-undefined-variables": "error",
-  "@graphql-eslint/no-unreachable-types": "error",
-  "@graphql-eslint/no-unused-variables": "error",
-  "@graphql-eslint/unique-variable-names": "error",
-  "@graphql-eslint/provided-required-arguments": "error",
-  "@graphql-eslint/value-literals-of-correct-type": "error",
-  "@graphql-eslint/variables-are-input-types": "error",
-  "@graphql-eslint/variables-in-allowed-position": "error",
-};
-
 module.exports = {
-  ...scaffold,
-  overrides: [
-    {
-      files: ["*.tsx", "*.ts", "*.jsx", "*.js"],
-      processor: "@graphql-eslint/graphql",
-      rules: graphqlRules,
-    },
-    {
-      files: ["*.graphql"],
-      parser: "@graphql-eslint/eslint-plugin",
-      plugins: ["@graphql-eslint"],
-      rules: {
-        // NOTE: Prettier is disabled within GraphQL snippets.
-        "prettier/prettier": "off",
-        ...graphqlRules,
-      },
-    },
-  ],
-  parserOptions: {
-    ...scaffold.parserOptions,
-    project: "./tsconfig.json",
-  },
+  extends: ["@adiun/vm-scaffold", "@adiun/vm-scaffold/eslint/react"],
 };
diff --git a/app/.gitignore b/app/.gitignore
diff --git a/app/.storybook/main.js b/app/.storybook/main.js
diff --git a/app/.storybook/preview-head.html b/app/.storybook/preview-head.html
diff --git a/app/.storybook/preview.js b/app/.storybook/preview.js
diff --git a/app/.stylelintrc.js b/app/.stylelintrc.js
@@ -1,5 +1,3 @@
-const scaffoldConfig = require("@adiun/vm-scaffold/.stylelintrc");
-
 module.exports = {
-  ...scaffoldConfig,
+  extends: ["@adiun/vm-scaffold/stylelint"],
 };
diff --git a/app/build/assets/index.26077974.js b/app/build/assets/index.26077974.js
diff --git a/app/build/index.html b/app/build/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite Monorepo | App</title>
+    <script type="module" crossorigin src="/assets/index.26077974.js"></script>
+  </head>
+  <body>
+    <div id="root"></div>
+
+  </body>
+</html>
diff --git a/app/package.json b/app/package.json
@@ -2,62 +2,26 @@
   "name": "@adiun/vm-frontend",
   "version": "0.1.0",
   "sideEffects": false,
+  "scripts": {
+    "build": "npm-run-all --parallel build:types build:react",
+    "build:react": "vite build",
+    "build:types": "tsc --build",
+    "serve": "vite preview",
+    "start": "vite"
+  },
   "dependencies": {
-    "@adiun/vm-coreui": "0.1.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "@types/react": "18.0.0",
+    "@types/react-dom": "18.0.0",
+    "react": "18.0.0",
+    "react-dom": "18.0.0"
   },
   "devDependencies": {
-    "@graphql-eslint/eslint-plugin": "1.1.0",
-    "@microsoft/eslint-plugin-sdl": "0.1.6",
-    "@storybook/addon-a11y": "6.3.2",
-    "@storybook/addon-actions": "6.3.2",
-    "@storybook/addon-docs": "6.3.2",
-    "@storybook/addon-essentials": "6.3.2",
-    "@storybook/addon-links": "6.3.2",
-    "@storybook/cli": "6.3.2",
-    "@storybook/node-logger": "6.3.2",
-    "@storybook/react": "6.3.2",
-    "@types/jest": "26.0.23",
-    "@types/node": "15.12.4",
-    "@types/react-dom": "17.0.8",
-    "@types/react": "17.0.11",
-    "@typescript-eslint/eslint-plugin": "4.9.1",
-    "@typescript-eslint/parser": "4.9.1",
-    "@vitejs/plugin-react-refresh": "1.3.3",
-    "eslint-config-prettier": "6.15.0",
-    "eslint-import-resolver-typescript": "2.4.0",
-    "eslint-plugin-functional": "3.1.0",
-    "eslint-plugin-import": "2.23.4",
-    "eslint-plugin-mui-unused-classes": "1.0.3",
-    "eslint-plugin-prettier": "3.1.4",
-    "eslint-plugin-react-hooks": "4.2.0",
-    "eslint-plugin-react": "7.24.0",
-    "eslint-plugin-simple-import-sort": "7.0.0",
-    "eslint-plugin-testing-library": "4.6.0",
-    "eslint-plugin-unicorn": "23.0.0",
-    "jest-dom": "4.0.0",
-    "jest-junit": "12.2.0",
-    "jest": "27.0.5",
-    "prettier": "2.3.0",
-    "rollup-plugin-typescript2": "0.30.0",
-    "storybook-addon-designs": "6.0.1",
-    "storybook-builder-vite": "0.0.10",
-    "stylelint-config-idiomatic-order": "8.1.0",
+    "@vitejs/plugin-react": "1.3.0",
+    "eslint": "8.13.0",
+    "prettier": "2.6.2",
     "stylelint": "13.13.1",
-    "typescript": "4.3.4",
-    "vite": "2.3.8"
-  },
-  "scripts": {
-    "build:types": "tsc --build",
-    "build:vite": "vite build",
-    "build": "npm-run-all --parallel build:vite build:types",
-    "lint:eslint": "eslint ./src --ext js,ts,tsx --max-warnings 0",
-    "lint:stylelint": "stylelint '**/*.ts[x]'",
-    "lint": "npm-run-all --parallel lint:eslint lint:stylelint",
-    "serve": "vite preview",
-    "start": "vite",
-    "storybook:build": "build-storybook",
-    "storybook": "start-storybook -p 6007"
+    "typescript": "4.6.3",
+    "vite": "2.9.1",
+    "vite-plugin-svgr": "1.1.0"
   }
 }
diff --git a/app/src/App.tsx b/app/src/App.tsx
@@ -1,10 +1,7 @@
-import { TestCoreComponent } from "@adiun/vm-coreui";
-
 function App(): JSX.Element {
   return (
     <div>
-      <TestCoreComponent />
-      <div>Vite + React + Typescript + Storybook test</div>
+      <div>Vite + React + Typescript</div>
     </div>
   );
 }

diff --git a/app/src/components/Shell.stories.tsx b/app/src/components/Shell.stories.tsx
diff --git a/app/src/define.d.ts b/app/src/define.d.ts
diff --git a/app/src/env.d.ts b/app/src/env.d.ts
@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+// https://vitejs.dev/guide/env-and-mode.html#intellisense-for-typescript
+interface ImportMetaEnv {
+  readonly VITE_APP_BASE_URL: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
diff --git a/app/src/main.tsx b/app/src/main.tsx
@@ -1,11 +1,12 @@
 import { StrictMode } from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 
 import App from "./App";
 
-ReactDOM.render(
+const container = document.getElementById("root") as Element;
+const root = createRoot(container);
+root.render(
   <StrictMode>
     <App />
-  </StrictMode>,
-  document.querySelector("#root")
+  </StrictMode>
 );
diff --git a/app/src/mocks/MockAppServices.ts b/app/src/mocks/MockAppServices.ts
@@ -1,5 +1,5 @@
 import { AppServices } from "../contracts/AppServices";
 
 export const createMockAppServices = (): AppServices => ({
-  setFlights: jest.fn(),
+  setFlights: () => {},
 });
diff --git a/app/tsconfig.json b/app/tsconfig.json
@@ -1,13 +1,23 @@
 {
   "extends": "@adiun/vm-scaffold/tsconfig.ui.json",
+  "include": ["src"],
   "compilerOptions": {
+    "allowJs": true,
+    "allowSyntheticDefaultImports": true,
+    "baseUrl": ".",
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "module": "ESNext",
     "noEmit": true,
-    "rootDir": "src"
-  },
-  "include": ["src"],
-  "references": [
-    {
-      "path": "../coreui"
-    }
-  ]
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "rootDir": "src",
+    "skipLibCheck": true,
+    "target": "ESNext",
+    "types": ["vite-plugin-svgr/client"],
+    "useDefineForClassFields": true
+  }
 }
diff --git a/app/vite.config.ts b/app/vite.config.ts
@@ -1,17 +1,41 @@
-import reactRefresh from "@vitejs/plugin-react-refresh";
-import { defineConfig } from "vite";
+import { defineConfig, loadEnv } from "vite";
+import react from "@vitejs/plugin-react";
+import svgrPlugin from "vite-plugin-svgr";
 
-import { name, version } from "./package.json";
+// https://vitejs.dev/config/
+export default defineConfig(({ command, mode }) => {
+  process.env = { ...process.env, ...loadEnv(mode, process.cwd()) };
 
-export default defineConfig({
-  define: {
-    pkgJson: { name, version },
-  },
-  esbuild: {
-    jsxInject: `import React from 'react'`,
-  },
-  plugins: [reactRefresh()],
-  server: {
-    open: true,
-  },
+  return {
+    base: process.env.VITE_APP_BASE_URL || "/",
+    resolve: {
+      alias: {
+        "~/": "src/",
+      },
+    },
+    server: {
+      open: true,
+      proxy: {
+        "/api": {
+          target: "http://localhost:8080",
+          changeOrigin: true,
+        },
+      },
+    },
+    build: {
+      outDir: "build",
+      sourcemap: mode === "development",
+      minify: command === "build" ? "esbuild" : false,
+    },
+    plugins: [
+      react({
+        exclude: /\.stories\.(t|j)sx?$/,
+      }),
+      svgrPlugin({
+        svgrOptions: {
+          icon: true,
+        },
+      }),
+    ],
+  };
 });