🌸 feat: major update #50 (#56)

* install vite react typescript

* implement ui #51 (#52)

* npm install

* remove unnecessary text

* install tailwind css

* implement ui

* 🌸 feat: create basic logic #53 (#55)

* add data.json

* wip

* useRef

* onClick to Button

* set prefix initial selected

* set generated commit message

* isFirstRender

* control first load

* refactor formPrefixOption

* todo matome

* recreate #53

* set tiloption

* delete console.log

* rafactor

* create basic except reset btn, copy btn

* fix details

* done

* 📖 docs: update README.md

*  github: set GitHub Actions for deploy

Author: pss-aileen

.github/workflows/vite.yml

@@ -0,0 +1,51 @@
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy static content to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["main"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow one concurrent deployment
+concurrency:
+  group: "pages"
+  cancel-in-progress: true
+
+jobs:
+  # Single deploy job since we're just deploying
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Set up Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: "npm"
+      - name: Install dependencies
+        run: npm ci
+      - name: Build
+        run: npm run build
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          # Upload dist folder
+          path: "./dist"
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

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

.prettierrc

@@ -1,43 +1,46 @@
-![Commit Easily](_project/images/image-screen.jpg)
+<!-- ![Commit Easily](_project/images/image-screen.jpg) -->
 
-# Commit Easily 
-Commit Easilyはコミットメッセージを簡単に何も考えずに作成できるWebアプリです。
-[Version 3.0.0]からforkして、ご自身に合ったprefixを簡単に作成することができます。
+# Commit Easily
 
+Commit Easily はコミットメッセージを簡単に何も考えずに作成できる Web アプリです。
+[Version 3.0.0]から fork して、ご自身に合った prefix を簡単に作成することができます。
 
 ## 概要
-- prefixの入力を簡単にしたい
-- プロジェクトごとのprefixを簡単に取得、閲覧したい
-- 何のためのprefixかの解説も同時に見たい
+
+- prefix の入力を簡単にしたい
+- プロジェクトごとの prefix を簡単に取得、閲覧したい
+- 何のための prefix かの解説も同時に見たい
 - スペースの開け方を統一したい
 - ターミナルの入力途中に間違ってエンターキーを押してやりなおしたくない
 - とにかく頭を無にして何も考えることなくコミットメッセージを考えたい
 
-そんな人（自分）の悩みを解決するWebアプリです。
+そんな人（自分）の悩みを解決する Web アプリです。
 
 URL: https://pss-aileen.github.io/project-github-commit-message/
 
-
 ## 使い方
-1. prefixのタイプを選択
-1. prefixを選択
+
+1. prefix のタイプを選択
+1. prefix を選択
 1. 変更内容の概要を入力
 1. 詳細を書く（必要であれば）
-1. issue番号を書く（必要であれば）
-1. GENERATEをクリックしてコミットメッセージを生成
-1. COPYをクリックしてターミナルに貼り付け
-
+1. issue 番号を書く（必要であれば）
+1. GENERATE をクリックしてコミットメッセージを生成
+1. COPY をクリックしてターミナルに貼り付け
 
 ## 使用技術
+
 - HTML/CSS
-- JavaScript
+- React
+- TypeScript
 - Tailwind CSS
 - その他
-  - jsonにprefixを保管し、オブジェクト指向をでプログラムを書きました（Version 3から）
+  - json に prefix を保管し、オブジェクト指向をでプログラムを書きました（Version 3 から）
 
 ## 制作について
-- 制作期間
-  - 3日
+
+- 制作期間（初回リリース）
+  - 3 日
 - こだわり
   - 気分が上がるように可愛いアイコンを使ってデザインをまとめました
 
@@ -49,52 +52,50 @@ URL: https://pss-aileen.github.io/project-github-commit-message/
 
 <summary>show detail</summary>
 
+- **[Version 4.0.0] 2024/09/07**
+  - 改修
+    - React で全面的に改修
+    - git コマンドの生成を廃止 -> GitHub Desktop 用のメッセージ生成に変更
 - **[Version 3.0.2] 2024/03/23**
   - 修正
     - NORMAL の PREFIX を変更
 - **[Version 3.0.1] 2024/03/10**
   - 修正
     - TYPE PRACTICE PROJECT に WATCH を追加
-      - Udemy講座を視聴して、見た動画ごとにコミットする場合のprefix
+      - Udemy 講座を視聴して、見た動画ごとにコミットする場合の prefix
 - **[Version 3.0.0] 2024/02/24**
   - 内部構造作り替え
     - オブジェクト指向でプログラムを組み直し
-    - prefixの情報をjsonで管理するように変更
+    - prefix の情報を json で管理するように変更
 - **[Version 2.0.7] 2024/01/30**
   - 修正
     - 選択肢にアイコン追加
-    - PAIZAの選択肢の順番変更
+    - PAIZA の選択肢の順番変更
 - **[Version 2.0.6]**
   - skip
 - **[Version 2.0.5] 2024/01/03**
   - 新機能
     - ダークモードに対応
   - 修正
-    - RELEASE、NEWの時、SUBJECTを自動的に出力
+    - RELEASE、NEW の時、SUBJECT を自動的に出力
 - **[Version 2.0.4] 2024/01/01**
   - 修正
-    - UPDATEの日付を2411→240101になるよう変更
+    - UPDATE の日付を 2411→240101 になるよう変更
 - **[Version 2.0.3] 2023/12/23**
   - 修正
-    - UPDATEの自動日付を20231223から231223になるように変更
+    - UPDATE の自動日付を 20231223 から 231223 になるように変更
 - **[Version 2.0.2] 2023/12/22**
   - 新機能
-    - prefixでUPDATEを選んだ時、日付が自動でSUBJECTに入るようにした
+    - prefix で UPDATE を選んだ時、日付が自動で SUBJECT に入るようにした
 - **[Version 2.0.1] 2023/12/17**
   - 新機能
     - リセットボタン: 自分のインターネット回線が遅くでリロードして書いた内容を消していると面倒だったので、リセットボタンを作成
-  - practice-project用のprefixの追加
+  - practice-project 用の prefix の追加
 - **[Version 2.0.0] 2023/12/13**
   - 新機能
-    - プロジェクトごとにprefixを切り替えられる機能を追加
+    - プロジェクトごとに prefix を切り替えられる機能を追加
   - 修正
-    - prefixが複数選択できる問題を解決（HTMLのSelectからmultipleを削除）
+    - prefix が複数選択できる問題を解決（HTML の Select から multiple を削除）
 - **[Version 1.0.0] 2023/12/03**
 
 </details>
-
----
-
-- `npm run dev`: 開発
-- `npm run deploy`: deployブランチにアップ→publicフォルダとして生成される
-