バージョンアップや機能を追加 (#44)

Author: su-u

.gitignore

@@ -12,6 +12,9 @@
 /.next/
 /out/
 
+# typescript
+*.tsbuildinfo
+
 # production
 /build
 
@@ -21,8 +24,6 @@
 
 # debug
 npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
 
 # local env files
 .env.local

.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

.replit

@@ -1,11 +1,11 @@
-modules = ["nodejs-20", "nodejs-21"]
-run = "yarn run dev"
+modules = ["nodejs-22"]
+run = "npm run dev"
 
 [nix]
 channel = "stable-24_05"
 
 [deployment]
-run = ["sh", "-c", "yarn run dev"]
+run = ["sh", "-c", "npm run dev"]
 
 [[ports]]
 localPort = 3000

.tool-versions

@@ -1 +1 @@
-nodejs 21.1.0
+nodejs 22.22.1

CLAUDE.md

@@ -0,0 +1,62 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Overview
+
+`tools.su-u.dev` is a collection of browser-based developer utilities (encoding, text manipulation, JSON tools, date/time conversion, hashing, UUID/image generation). All logic runs client-side in the browser — there is no backend. The UI is in Japanese. Deployed on Vercel; live at https://tools.su-u.dev/.
+
+## Commands
+
+```bash
+npm run dev          # Next.js dev server at http://localhost:3000
+npm run build        # Production build
+npm test             # Run all Jest tests
+npm test path/to/file.test.ts   # Run a single test file
+npm run lint         # next lint
+npm run lint-fix     # next lint --fix
+npm run format       # Prettier on all .ts/.tsx
+```
+
+Node version is pinned to `22.22.1` (see `.tool-versions`). Use `npm` (a `package-lock.json` is committed). Note: `.npmrc` sets `legacy-peer-deps=true` to tolerate the eslint 9 / eslint-config-next 14 peer-dependency conflict.
+
+Note: ESLint errors do **not** fail the production build (`ignoreDuringBuilds: true` in `.eslintrc.js`), and `tsconfig.json` has `strict: false`. Run `npm run lint` and `npm test` explicitly to catch problems.
+
+## Architecture
+
+Next.js 14 App Router. Each tool is a self-contained directory under `src/app/<tool_name>/` following a consistent 3-file pattern:
+
+- **`page.tsx`** — server component. Exports `metadata` (page `<title>`) and a default-exported page that renders the feature component. Keep it thin.
+- **`<Feature>.tsx`** — `'use client'` component. Wraps everything in `<FormProvider {...methods}><AppLayout>...`. Uses rsuite `Grid/Row/Col/Panel` for layout and `react-hook-form` `Controller` to bind inputs.
+- **`use<Feature>.ts`** — the hook holding all state/logic. Returns `{ methods, output, ... }`. This is where the actual tool logic lives.
+
+Pure, testable logic is extracted into a separate `*Lib.ts` file (e.g. `json_formatter/jsonFormatterLib.ts` with a colocated `jsonFormatterLib.test.ts`). Tests live next to the code they test.
+
+### Forms and state (the central pattern)
+
+All tools manage input state through `react-hook-form`:
+
+1. The hook calls `useCustomForm<FormType>({ defaultValues })` (`src/components/common/Form/useCustomForm.ts`) — a thin wrapper that sets `mode: 'onChange'`.
+2. Output is derived from form values via `watch()` + `useEffect`, stored in local `useState`.
+3. `useFormPersistence(featureName, methods, setCallback)` (`src/hooks/useFormPersistence.ts`) persists form data to `localStorage` under the key `devtools.formData.<featureName>` and restores it on mount via the `setCallback`. Every tool calls this with a unique `featureName`.
+
+When adding a new tool, replicate this pattern: define a `FormType` and `DEFAULT_VALUES`, wire `useCustomForm`, call `useFormPersistence` with a unique name, and derive output in a `useEffect`.
+
+### Registering a new tool
+
+A tool is not visible until it's added to the `features` array in `src/components/common/Features.tsx`. This single array is the source of truth for the sidebar navigation (`SideNavBar.tsx`) and the home page cards (`src/app/home/`). Add an item (`key`, `title`, `path`, optional `shortTitle`/`description`) under the appropriate group. The `path` must match the App Router directory route.
+
+### Shared building blocks
+
+- **`src/Layout/App.tsx`** — `AppLayout` renders the `Provider` + `SideNavBar` + content shell. Every feature component wraps its body in `AppLayout`.
+- **`src/app/Provider.tsx`** — sets up rsuite `CustomProvider` (dark theme) and antd `ConfigProvider` (dark algorithm, Japanese locale). Dark theme is hardcoded app-wide.
+- **`src/components/common/`** — reusable UI: `PageTitle`, `PanelHeader`, `Editor` (CodeMirror wrapper, exports `ex` for extensions like `lineWrapping`), and `Form/` (form-aware `Input`, `TextArea`, `Select`, `DatePicker`, `CopyButton`, `ClearButton`, etc. — these read from the surrounding `FormProvider` context).
+- **`src/lib/`** — pure helpers: `encoding.ts`, `hashAlgorithms.ts`, `dayjs.ts` (configured dayjs instance — import from here), `gtag.ts`.
+- **`src/hooks/`** — `useFormPersistence`, `useCopy`.
+
+### Conventions
+
+- **UI libraries**: primarily **rsuite** for layout/components, with **antd** also available. **Emotion** (`@emotion/styled`) for styled components.
+- **Imports**: use the `@/*` path alias (maps to `src/*`). ESLint enforces alphabetized import order (`import/order`).
+- **Prettier**: single quotes, semicolons, trailing commas, 100-char width, 2-space tabs.
+- Client components that use hooks/state must start with `'use client'`.

README.md

@@ -1,28 +1,41 @@
+# Dev Toolkit
 
-#  Dev Toolkit
 Web utility tools for developers
 
 開発者のための、Webユーティリティツール
 
 https://tools.su-u.dev/
 
-## 現在利用できる機能
+すべての処理はブラウザ上（クライアントサイド）で完結し、サーバーへはデータを送信しません。
 
-- base64エンコードへの変換
-- 文字数（行数など）カウント
-- 文字列置換
-- punycode変換（日本語ドメイン変換）
-- テキスト差分
-- 数値に区切り文字追加
-- JSONフォーマット
+## 技術スタック
+
+- [Next.js 14](https://nextjs.org/)（App Router）/ React 18 / TypeScript
+- UI: [Ant Design (antd)](https://ant.design/) + [Emotion](https://emotion.sh/)
+- フォーム: [react-hook-form](https://react-hook-form.com/)
+- エディタ: [CodeMirror](https://codemirror.net/)（差分は [Monaco Editor](https://microsoft.github.io/monaco-editor/)）
+- テスト: [Jest](https://jestjs.io/)
+- デプロイ: [Vercel](https://vercel.com/)
+
+Node.js のバージョンは `.tool-versions`（`22.22.1`）に固定しています。パッケージマネージャーは npm を使用します。
 
 ## 開発の始め方
 
 ```bash
-yarn install
+npm install
 
-yarn dev
+npm run dev
 ```
 
 [http://localhost:3000](http://localhost:3000) を開く
 
+## コマンド
+
+```bash
+npm run dev          # 開発サーバー
+npm run build        # 本番ビルド
+npm start            # 本番サーバー
+npm test             # テスト実行
+npm run lint         # Lint
+npm run format       # Prettier
+```

next.config.js

@@ -0,0 +1,11 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  eslint: {
+    // ESLint エラーでも本番ビルドを失敗させない（lint は `npm run lint` で明示的に実行する）
+    ignoreDuringBuilds: true,
+  },
+  // @faker-js/faker は ESM 専用配布のため、ビルド／テスト時にトランスパイル対象に含める
+  transpilePackages: ['@faker-js/faker'],
+};
+
+module.exports = nextConfig;