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.

.devcontainer/.env

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

.devcontainer/compose.yml

@@ -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/devcontainer.json

@@ -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"
+}

.editorconfig

@@ -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
+

.env

@@ -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.development

@@ -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

.eslintrc.js

@@ -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",
+  },
+};

.gitignore

@@ -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?

LICENSE

@@ -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.
-

README.md

@@ -1,132 +1,95 @@
-sample-ui-react
----
+## sample-ui-react
 
-### はじめに
+## Preface
 
-[Material-UI](http://www.material-ui.com) / [React.js](https://facebook.github.io/react/) / [Redux](https://github.com/reactjs/redux) を元にしたプロジェクト Web リソース ( HTML / CSS / JS ) です。 SPA ( Single Page Application ) モデルを前提としています。  
+Project web resource ( HTML / CSS / JS ) based on [React](https://github.com/facebook/react) / [TypeScript](https://www.typescriptlang.org/) / [shadcn/ui](https://ui.shadcn.com/). It assumes the SPA ( Single Page Application ) model.
 
-サンプル確認用の API サーバとして [sample-boot-hibernate](https://github.com/jkazama/sample-boot-hibernate) を期待します。
+This is a simple implementation sample using the above libraries, not the library.
 
-`※ライブラリではなく上記ライブラリを用いた単純な実装サンプルです。`
+We expect one of the following as an API server for sample confirmation.
 
-> Flux 風な Redux を利用していますが、純粋な Flux サンプルとは異なる点に注意してください
+- [sample-boot-jpa](https://github.com/jkazama/sample-boot-jpa)
 
-#### ビルド/テスト稼働環境構築
+#### Getting Started
 
-ビルドは [Node.js](http://nodejs.jp/) + [Webpack](https://webpack.github.io/) + [Gulp](http://gulpjs.com/) + [Yarn](https://yarnpkg.com/) or [npm](https://www.npmjs.com/) で行います。以下の手順でインストールしてください。
+Frontend Start (VSCode DevContainer)
+It is necessary to do the following step.
 
-1. Node.js の[公式サイト](http://nodejs.jp/)からインストーラをダウンロードしてインストール。
-1. 「 `npm install -g gulp` 」 を実行して Gulp をインストール。
-    - Mac ユーザは 「 `sudo npm install -g gulp` 」 で。
-1. 「 `npm install -g yarn` 」を実行して Yarn をインストール。
-    - Mac ユーザは 「 `sudo npm install -g yarn` 」 で。
-    - インストール作業を npm 経由で直接実行する場合は不要です
-1. コンソールで本ディレクトリ直下へ移動後、「 `yarn` 」を実行して `package.json` 内のライブラリをインストール
-    - Yarn を利用しない時は 「 `npm install` 」 を実行。
-    - node-sass あたりでビルドに失敗した場合は、 「 `npm uninstall node-sass` 」 を実行してから再度試してみてください。
+- Check Instablled Docker.
+- Check Instablled VSCode with DevContainer Extension.
+- API Server Started.
 
-### 動作確認
+Do the preparations for this sample in the next step.
 
-動作確認は以下の手順で行ってください。
+- You move to the cloned `sample-ui-react` directory.
+- Run command `code .`
+- Choose Open Container
 
-1. clone した [sample-boot-hibernate](https://github.com/jkazama/sample-boot-hibernate) を起動する。
-    - 起動方法は該当サイトの解説を参照
-    - application.yml の `extension.security.auth.enabled` を true にして起動すればログイン機能の確認も可能
-1. コンソールで本ディレクトリ直下へ移動し、 「 `gulp` 」 を実行
-    - 確認用のブラウザが自動的に起動する。うまく起動しなかったときは 「 http://localhost:3000 」 へアクセス
+Do the dev server start in the next step.
 
-### 開発の流れ
+- Open VSCode Terminal.
+- `npm run dev`
+- Open Browser with `http://localhost:3000`
+  - User Login ID/Pass. `sample` / `sample`
 
-基本的にテンプレート ( .pug / .scss / .js ( Babel ) ) を Web リソース ( .html / .css / .js ) へ Gulp / Webpack でリアルタイム変換させながら開発をしていきます。  
-動作確認は Gulp で独自に Web サーバを立ち上げた後、ブラウザ上で行います。  
+#### Use policy of React
 
-#### 各種テンプレートファイルの解説
+- BtoB management sites in mind.
+- [Vite](https://github.com/vitejs/vite) is used as it is based on SPA
+- Layout in shadcn/ui and [Tailwind CSS](https://tailwindcss.com/)
+- State management is used by React Hooks, [React Hook Form](https://react-hook-form.com/) with [Zod](https://github.com/colinhacks/zod), [Jotai](https://jotai.org/) and [TanStackQuery](https://tanstack.com/query/latest).
+- Page transitions use [React Router](https://reactrouter.com/en/main).
 
-- [Pug](https://github.com/pugjs/pug)
-    - HTML を生成するテンプレートツール。公式サイト TOP にある簡素な記法が特徴。
-- [Sass (SCSS)](http://sass-lang.com/)
-    - CSS 表記を拡張するツール。変数や mixin 、ネスト表記などが利用可能。
-- [Babel](https://babeljs.io/)
-    - ES201x 用の Polyfill 。 ES5 でも ES201x 風に記述が可能。
+#### Resource
 
-#### 各種テンプレートファイルの変更監視 / Web サーバ起動
-
-+ コンソールで本ディレクトリ直下へ移動し、 「 `gulp` 」 を実行
-
-### 配布用ビルドの流れ
-
-配布リソース生成の流れは開発時と同様ですが、監視の必要が無いことと、配布リソースに対する minify や revison の付与などを行う必要があるため、別タスク （ build-prod ） で実行します。
-
-#### 配布用 Web リソースのビルド / リリース
-
-+ コンソールで本ディレクトリ直下へ移動し、 「 `gulp build-prod` 」 を実行
-+ `public` ディレクトリ直下に出力されたファイルをリリース先のディレクトリへコピー
-
-### ポリシー
-
-- JS / CSS の外部ライブラリは npm で管理する
-    - ビルド時は vendor.bundle.js へ分割
-- プロジェクト固有の JS は Webpack を利用して生成する
-- React / Redux はとりあえず以下の方針で
-    - ページ遷移周りは react-router / react-router-redux を利用
-    - React / Redux の Component 向けにサポートクラスを用意 ( see /js/platform/redux-support.js )
-    - Redux Actions 概念をサポートクラスで簡易に ( see /js/platform/redux-action-support.js )
-    - グローバルなステートで管理するのは横断的に保持したいもののみに限定
-        - 入力や検索結果などの揮発性高いものはローカルなステートで
-    - ページルートは container 配下へ配置
-        - コンポーネントを進めていく時は component or container のサブディレクトリを掘る感じで
-    - スタイル指定は theme.js へ集約
-        - material-ui だとクラスベースの指定が負けそうなのでベタに指定
-
-#### ディレクトリ構成
-
-ディレクトリ構成については以下を参照してください。
+Refer to the following for the package / resource constitution.
 
 ```
-gulpfile.babel.js                    … gulp configuration
-package.json                         … npm dependency
-yarn.lock                            … yarn semantic versioning
-public                               … deploy resources (auto generate)
-  css
-    - style.css                      … from source/css
-  fonts                              … icon font
-  js
-    - main.bundle.js                 … from source/js (by Webpack)
-    - vendor.bundle.js               … from vendor dist resource
-  index.html                         … from source/html
-source
-  css                                … css template files  [SCSS]
-  html                               … html template files [Pug]
-  js
-    actions                          … redux actions
-    api                              … server acccess api
-    constants
-    container                        … redux container component
-    platform
-      - plain.js                     … simple js library
-      - react-support.js             … project react support
-      - redux-support.js             … project redux support
-      - redux-action-support.js      … project redux actions support
-    reducer                          … redux reducer
-    - main.js                        … SPA entry
-    - routes.js                      … SPA routing
-    - theme.js                       … material ui style
-  static                             … static resources (.png/.ico/robots.txt etc)
++ .devcontainer      … DevContainer Related definitions
++ .vscode            … VS Code Related Definitions
++ public             … Vite Public Resources (Web Root)
++ src                … Vite Development Resources
+- .editorconfig      … Format Auto-Formatting Rules (EditorConfig)
+- .env               … Environment Variable (Production)
+- .env.development   … Environment Variable (Development)
+- .eslintrc.js       … ES Lint Rule
+- components.json    … shadcn/ui Related Definitions
+- index.html         … Vite SPA Entry file
+- package.json       … NPM Package
+- postcss.config.cjs … CSS-Related Definitions
+- tailwind.confg.js  … TailwindCSS Related Definitions
+- tsconfig.json      … TypeScript Related Definitions
+- vite.config.ts     … Vite Related Definitions
 ```
 
-※ gulp コマンドを実行して変更監視を有効にしておくと、 source 配下のリソースを修正した際にリアルタイムで public 直下のファイルが更新されていきます。
-
-### 依存ライブラリ
-
-| ライブラリ               | バージョン | 用途/追加理由 |
-| ----------------------- | -------- | ------------- |
-| `react`　　　　　　　　　  | 16.7.+    | アプリケーションの UI 機能を提供 |
-| `redux`                   | 4.0.+     | Flux 風な状態/イベント概念をサポート |
-| `material-ui`             | 3.9.+    | マテリアルデザインな UI ライブラリ |
-
-※ 詳細は package.json を参照してください
+```
+/src
+
++ assets         … Static Resources where references via code.
++ components     … UI Component Implementation (global domain)
+  + auth         … UI Components for Authentication
+  + layout       … UI Components for Site Layouts
+  + ui           … UI components using shadcn/ui
++ features       … Feature (Domain) Specific Implementation
+  + *domain*     … Specific Domain Implementation
+    + components … UI Component Implementation
+    + hooks      … Hooks Implementation for Business Processes
+      + api      … API Integration Implementation with Backend
+    + types      … Type Definitions
++ hooks          … Hooks Implementation for Business Processes (global domain)
++ lib            … Simple Libraries that are not Dependent on a Framework
++ providers      … Infrastructure Provider
+  - app.ts       … React Common Processes
+  - query.tsx    … TanStack Query Common Processes
++ routes         … Routing Definition using ReactRouter.
++ types          … Type Definitions (global domain)
+- App.tsx        … Root Component
+- index.css      … Standard CSS Definition
+- main.tsx       … SPA Entry Implementation
+- vite-env.d.ts  … TypeScript Extension Definition for Vite
+```
 
 ### License
 
-本サンプルのライセンスはコード含めて全て *MIT License* です。  
-プロジェクト立ち上げ時のベース実装サンプルとして気軽にご利用ください。
+The license of this sample includes a code and is all _MIT License_.
+Use it as a base implementation at the time of the project start using Spring Boot.