@yumehiko/jp-ui 0.2.0 → 0.2.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 yumehiko
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+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.

package/README.md

@@ -7,6 +7,7 @@
 ## Usage
 
 ```tsx
+import '@yumehiko/jp-ui/style.css';
 import { Button } from '@yumehiko/jp-ui';
 
 export function App() {
@@ -14,6 +15,46 @@ export function App() {
 }
 ```
 
+## Providers / Theme
+
+```tsx
+import {
+  TooltipProvider,
+  ToastProvider,
+  ToastViewport,
+  createToastManager,
+} from '@yumehiko/jp-ui';
+
+const toastManager = createToastManager();
+
+export function AppProviders({ children }: { children: React.ReactNode }) {
+  return (
+    <TooltipProvider>
+      <ToastProvider manager={toastManager}>
+        {children}
+        <ToastViewport />
+      </ToastProvider>
+    </TooltipProvider>
+  );
+}
+```
+
+To enable dark tokens, add `theme-dark` to a root element.
+
+## Docs
+
+- `docs/usage.md`
+- `docs/components.md`
+- `docs/tokens.md`
+
+## Codex skill (optional)
+
+Copy the skill into your project so coding agents can load jp-ui usage guidance.
+
+```sh
+mkdir -p .codex/skills && cp -R node_modules/@yumehiko/jp-ui/docs/skills/jp-ui-consumer .codex/skills/
+```
+
 ## Scripts
 
 - `pnpm dev`

package/docs/components.md

@@ -0,0 +1,72 @@
+# Components
+
+Exports from `@yumehiko/jp-ui`:
+
+## Layout / Structure
+
+- Collapsible
+- ScrollArea
+- Separator
+- Toolbar
+
+## Navigation
+
+- NavigationMenu
+- Menubar
+
+## Overlay / Feedback
+
+- AlertDialog
+- Dialog
+- Popover
+- PreviewCard
+- Toast
+- ToastManager
+- Tooltip
+
+## Data entry
+
+- Autocomplete
+- AutocompleteInputBox
+- Checkbox
+- CheckboxGroup
+- Combobox
+- Field
+- Fieldset
+- Form
+- Input
+- InputBox
+- MenuInputBox
+- NumberField
+- Radio
+- RadioGroup
+- Select
+- Slider
+- Switch
+- Toggle
+- ToggleGroup
+
+## Data display
+
+- Avatar
+- ColorChip
+- Meter
+- Progress
+
+## Actions
+
+- Button
+- IconButton
+
+## Menus
+
+- ContextMenu
+- Menu
+- MenuSizeContext
+
+## Collections
+
+- Accordion
+- Tabs
+
+If you need prop-level details, inspect `node_modules/@yumehiko/jp-ui/dist/index.d.ts`.

package/docs/feedback-for-jp-ui.md

@@ -0,0 +1,55 @@
+feedback for jp-ui
+
+目的
+- Diff-pdf の全画面・全機能UIを jp-ui で置き換えるために、事前に必要な情報を整理する
+- jp-ui の使い勝手テスト用のフィードバック観点をまとめる
+
+現状のフロント構成（調査結果）
+- Electron + Vite + React 構成
+- 入口: `src/main.tsx`
+- 画面本体: `src/App.tsx` と `src/components/**`
+- 既存のスタイル: CSS ファイル個別（`src/components/**.css`, `src/index.css`, `src/App.css`）
+
+jp-ui について、現状不足している情報
+- README 現状は「インストール + Button の最小例のみ」
+- インストール後の最小動作例（import 例と最小 JSX）
+- 依存/peer 依存（例: react/react-dom/@base-ui/react のバージョン条件）
+- 必須のグローバル CSS / reset / font 取り込み
+- Theme/Provider の有無と、適用方法
+- デザイントークン（color/space/typography/radius/shadow/motion）
+- レイアウト/フォーム/ボタン/ダイアログなど主要コンポーネントの一覧と API
+- Icon やアセットの依存（フォント/アイコン/画像）
+- デフォルトの見た目を確認できる「スクリーンショット or デモ」
+
+README を読んで分かったこと
+- インストール手順と Button の最小 JSX は確認できる
+- それ以外の利用情報（Provider/CSS/テーマ/トークン/API/依存）は未記載
+
+jp-ui 側で共有してもらえると助かるもの（最小セット）
+- npm パッケージの `README.md` に以下を追加
+  - インストール手順（pnpm の例）
+  - 3分で動く最小サンプル
+  - Provider / Theme / CSS の導入手順
+  - 基本コンポーネントの一覧（名前だけでも）
+- jp-ui の簡易デモ
+  - Storybook を静的公開するか、`docs/` に HTML でも可
+  - 主要コンポーネントの見た目が一括で見れるページ
+- トークン一覧のテキスト（CSS 変数 or JSON）
+
+もし private で共有するなら（実務向けの現実案）
+- npm パッケージの `README` を充実させる（最優先）
+- 追加で、以下いずれかを選択
+  - A: jp-ui リポジトリを一時的に read-only で共有
+  - B: `pnpm pack` で tgz を渡し、docs を同梱
+  - C: デモページの静的 HTML を共有（社内/ローカル配布でもOK）
+
+この改修を進めるための具体的な質問
+- jp-ui は Provider 必須？（例: `<JpUiProvider>` など）
+- CSS の読み込みは 1 ファイル？複数？
+- ボタン/入力/ダイアログ/トースト/メニューの API をざっくり教えてほしい
+- デフォルトのフォントは何を想定している？
+
+次の進め方の提案
+- まず `README + 最小サンプル + 主要コンポーネント一覧` を共有
+- 次に、Diff-pdf の主要画面を jp-ui で置き換える PoC を作成
+- 問題点をこのファイルに追記して、jp-ui の改善に反映

package/docs/skills/jp-ui-consumer/SKILL.md

@@ -0,0 +1,16 @@
+---
+name: jp-ui-consumer
+description: Use when consuming jp-ui in an app: installation, CSS/theme setup, component selection, and token usage; guide Codex to the jp-ui docs and types for implementation details.
+---
+
+# jp-ui Consumer
+
+## Quick start
+
+- Read `docs/usage.md` for install, CSS import, and providers.
+- Read `docs/components.md` to find exported component names.
+- Read `docs/tokens.md` for token sources and theming.
+
+## Component details
+
+- For prop-level details, inspect `node_modules/@yumehiko/jp-ui/dist/index.d.ts`.

package/docs/tokens.md

@@ -0,0 +1,10 @@
+# Tokens
+
+The default theme and tokens are shipped in `@yumehiko/jp-ui/style.css`.
+
+Source files:
+
+- `tokens/tones.css` and `tokens/tones.json` for tone palettes
+- `tokens/roles.css` plus `tokens/roles.light.json` and `tokens/roles.dark.json` for role tokens
+
+You can override tokens by redefining CSS variables in your app.

package/docs/usage.md

@@ -0,0 +1,58 @@
+# jp-ui Usage
+
+## Install
+
+```sh
+pnpm add @yumehiko/jp-ui @base-ui/react react react-dom
+```
+
+## Import styles
+
+```ts
+import '@yumehiko/jp-ui/style.css';
+```
+
+## Minimal example
+
+```tsx
+import { Button } from '@yumehiko/jp-ui';
+
+export function App() {
+  return <Button>OK</Button>;
+}
+```
+
+## Providers
+
+- Use `TooltipProvider` once near the app root when you use Tooltip components.
+- Use `ToastProvider` once near the app root when you use Toast components.
+- Use `createToastManager` or `useToastManager` to manage toast state.
+
+### Minimal providers example
+
+```tsx
+import {
+  TooltipProvider,
+  ToastProvider,
+  ToastViewport,
+  createToastManager,
+} from '@yumehiko/jp-ui';
+
+const toastManager = createToastManager();
+
+export function AppProviders({ children }: { children: React.ReactNode }) {
+  return (
+    <TooltipProvider>
+      <ToastProvider manager={toastManager}>
+        {children}
+        <ToastViewport />
+      </ToastProvider>
+    </TooltipProvider>
+  );
+}
+```
+
+## Theme
+
+- Default is light tokens.
+- Add `theme-dark` to a root element to enable dark tokens.

package/package.json

@@ -1,7 +1,16 @@
 {
   "name": "@yumehiko/jp-ui",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/yumehiko/jp-ui.git"
+  },
+  "homepage": "https://github.com/yumehiko/jp-ui#readme",
+  "bugs": {
+    "url": "https://github.com/yumehiko/jp-ui/issues"
+  },
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "style": "./dist/style.css",
@@ -15,6 +24,8 @@
   },
   "files": [
     "dist",
+    "docs",
+    "LICENSE",
     "README.md"
   ],
   "sideEffects": [