React v16 to v18 (#44)

- React v16 to v18
- Gulp (Webpack) to Vite
- Vanilla Js to TypeScript
- Material UI to shadcn/ui with Tailwind CSS
- Add State Management
- Many other changes have been made with recent trends.

Author: jkazama

.babelrc

@@ -0,0 +1,2 @@
+UID=1000
+GID=1000

.devcontainer/.env

@@ -0,0 +1,15 @@
+services:
+  workspace:
+    image: mcr.microsoft.com/vscode/devcontainers/javascript-node:20-bullseye
+    init: true
+    command: /bin/sh -c "chown -R $UID:$GID /home/node/workspace/node_modules; while sleep 1000; do :; done"
+    extra_hosts:
+      - "host.docker.internal:host-gateway"
+    volumes:
+      - ..:/home/node/workspace:cached
+      - ~/.ssh:/home/node/.ssh
+      - node-modules:/home/node/workspace/node_modules
+    working_dir: /home/node/workspace
+
+volumes:
+  node-modules:

.devcontainer/compose.yml

@@ -0,0 +1,35 @@
+// https://aka.ms/devcontainer.json
+{
+  "name": "sample-ui-react",
+  "dockerComposeFile": ["./compose.yml"],
+  "service": "workspace",
+  "shutdownAction": "stopCompose",
+  "customizations": {
+    "vscode": {
+      "settings": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode",
+        "editor.formatOnSave": true,
+        "editor.formatOnPaste": true,
+        "editor.formatOnType": true,
+        "editor.codeActionsOnSave": {
+          "source.fixAll.eslint": "explicit",
+          "source.organizeImports": "explicit"
+        }
+      },
+      "extensions": [
+        "mhutchie.git-graph",
+        "mikestead.dotenv",
+        "EditorConfig.EditorConfig",
+        "dbaeumer.vscode-eslint",
+        "esbenp.prettier-vscode",
+        "xabikos.javascriptsnippets",
+        "dsznajder.es7-react-js-snippets",
+        "bradlc.vscode-tailwindcss"
+      ]
+    }
+  },
+  "workspaceFolder": "/home/node/workspace",
+  "postCreateCommand": "npm install",
+  "forwardPorts": [3000],
+  "remoteUser": "node"
+}

.devcontainer/devcontainer.json

@@ -0,0 +1,24 @@
+[*.{js,jsx,ts,tsx}]
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.html]
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.json]
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.yml]
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true
+

.editorconfig

@@ -0,0 +1,10 @@
+# environment for devcontainer
+COMPOSE_PROJECT_NAME=sample-ui-react
+
+# environment for productuion
+
+## API base path to Application Server
+VITE_APP_API_ROOT=/api
+
+## Application Log Level
+VITE_APP_LOG_LEVEL=INFO

.env

@@ -0,0 +1,7 @@
+# environment for development
+
+## API base path to Application Server
+VITE_APP_API_ROOT=http://localhost:8080/api
+
+## Application Log Level
+VITE_APP_LOG_LEVEL=DEBUG

.env.development

@@ -0,0 +1,35 @@
+/* eslint-env node */
+
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/recommended-requiring-type-checking",
+    "plugin:react-hooks/recommended",
+  ],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+    project: true,
+    tsconfigRootDir: __dirname,
+  },
+  plugins: ["react-refresh"],
+  rules: {
+    "react-refresh/only-export-components": [
+      "warn",
+      { allowConstantExport: true },
+    ],
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": [
+      "warn",
+      {
+        additionalHooks: "(useRecoilCallback|useRecoilTransaction_UNSTABLE)",
+      },
+    ],
+    "react-hooks/exhaustive-deps": "warn",
+  },
+};

.eslintrc.js

@@ -1,5 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
 node_modules
-bower_components
-public
-npm-debug.log
-/.vscode
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.gitignore

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2015-2019 jkazama
+Copyright (c) 2024 jkazama
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -19,4 +19,3 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
-