@yumehiko/jp-ui 0.2.1 → 0.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +41 -0
- package/docs/components.md +72 -0
- package/docs/feedback-for-jp-ui.md +55 -0
- package/docs/skills/jp-ui-consumer/SKILL.md +16 -0
- package/docs/tokens.md +10 -0
- package/docs/usage.md +58 -0
- package/package.json +19 -20
package/README.md
CHANGED
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
## Usage
|
|
8
8
|
|
|
9
9
|
```tsx
|
|
10
|
+
import '@yumehiko/jp-ui/style.css';
|
|
10
11
|
import { Button } from '@yumehiko/jp-ui';
|
|
11
12
|
|
|
12
13
|
export function App() {
|
|
@@ -14,6 +15,46 @@ export function App() {
|
|
|
14
15
|
}
|
|
15
16
|
```
|
|
16
17
|
|
|
18
|
+
## Providers / Theme
|
|
19
|
+
|
|
20
|
+
```tsx
|
|
21
|
+
import {
|
|
22
|
+
TooltipProvider,
|
|
23
|
+
ToastProvider,
|
|
24
|
+
ToastViewport,
|
|
25
|
+
createToastManager,
|
|
26
|
+
} from '@yumehiko/jp-ui';
|
|
27
|
+
|
|
28
|
+
const toastManager = createToastManager();
|
|
29
|
+
|
|
30
|
+
export function AppProviders({ children }: { children: React.ReactNode }) {
|
|
31
|
+
return (
|
|
32
|
+
<TooltipProvider>
|
|
33
|
+
<ToastProvider manager={toastManager}>
|
|
34
|
+
{children}
|
|
35
|
+
<ToastViewport />
|
|
36
|
+
</ToastProvider>
|
|
37
|
+
</TooltipProvider>
|
|
38
|
+
);
|
|
39
|
+
}
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
To enable dark tokens, add `theme-dark` to a root element.
|
|
43
|
+
|
|
44
|
+
## Docs
|
|
45
|
+
|
|
46
|
+
- `docs/usage.md`
|
|
47
|
+
- `docs/components.md`
|
|
48
|
+
- `docs/tokens.md`
|
|
49
|
+
|
|
50
|
+
## Codex skill (optional)
|
|
51
|
+
|
|
52
|
+
Copy the skill into your project so coding agents can load jp-ui usage guidance.
|
|
53
|
+
|
|
54
|
+
```sh
|
|
55
|
+
mkdir -p .codex/skills && cp -R node_modules/@yumehiko/jp-ui/docs/skills/jp-ui-consumer .codex/skills/
|
|
56
|
+
```
|
|
57
|
+
|
|
17
58
|
## Scripts
|
|
18
59
|
|
|
19
60
|
- `pnpm dev`
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
# Components
|
|
2
|
+
|
|
3
|
+
Exports from `@yumehiko/jp-ui`:
|
|
4
|
+
|
|
5
|
+
## Layout / Structure
|
|
6
|
+
|
|
7
|
+
- Collapsible
|
|
8
|
+
- ScrollArea
|
|
9
|
+
- Separator
|
|
10
|
+
- Toolbar
|
|
11
|
+
|
|
12
|
+
## Navigation
|
|
13
|
+
|
|
14
|
+
- NavigationMenu
|
|
15
|
+
- Menubar
|
|
16
|
+
|
|
17
|
+
## Overlay / Feedback
|
|
18
|
+
|
|
19
|
+
- AlertDialog
|
|
20
|
+
- Dialog
|
|
21
|
+
- Popover
|
|
22
|
+
- PreviewCard
|
|
23
|
+
- Toast
|
|
24
|
+
- ToastManager
|
|
25
|
+
- Tooltip
|
|
26
|
+
|
|
27
|
+
## Data entry
|
|
28
|
+
|
|
29
|
+
- Autocomplete
|
|
30
|
+
- AutocompleteInputBox
|
|
31
|
+
- Checkbox
|
|
32
|
+
- CheckboxGroup
|
|
33
|
+
- Combobox
|
|
34
|
+
- Field
|
|
35
|
+
- Fieldset
|
|
36
|
+
- Form
|
|
37
|
+
- Input
|
|
38
|
+
- InputBox
|
|
39
|
+
- MenuInputBox
|
|
40
|
+
- NumberField
|
|
41
|
+
- Radio
|
|
42
|
+
- RadioGroup
|
|
43
|
+
- Select
|
|
44
|
+
- Slider
|
|
45
|
+
- Switch
|
|
46
|
+
- Toggle
|
|
47
|
+
- ToggleGroup
|
|
48
|
+
|
|
49
|
+
## Data display
|
|
50
|
+
|
|
51
|
+
- Avatar
|
|
52
|
+
- ColorChip
|
|
53
|
+
- Meter
|
|
54
|
+
- Progress
|
|
55
|
+
|
|
56
|
+
## Actions
|
|
57
|
+
|
|
58
|
+
- Button
|
|
59
|
+
- IconButton
|
|
60
|
+
|
|
61
|
+
## Menus
|
|
62
|
+
|
|
63
|
+
- ContextMenu
|
|
64
|
+
- Menu
|
|
65
|
+
- MenuSizeContext
|
|
66
|
+
|
|
67
|
+
## Collections
|
|
68
|
+
|
|
69
|
+
- Accordion
|
|
70
|
+
- Tabs
|
|
71
|
+
|
|
72
|
+
If you need prop-level details, inspect `node_modules/@yumehiko/jp-ui/dist/index.d.ts`.
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
feedback for jp-ui
|
|
2
|
+
|
|
3
|
+
目的
|
|
4
|
+
- Diff-pdf の全画面・全機能UIを jp-ui で置き換えるために、事前に必要な情報を整理する
|
|
5
|
+
- jp-ui の使い勝手テスト用のフィードバック観点をまとめる
|
|
6
|
+
|
|
7
|
+
現状のフロント構成（調査結果）
|
|
8
|
+
- Electron + Vite + React 構成
|
|
9
|
+
- 入口: `src/main.tsx`
|
|
10
|
+
- 画面本体: `src/App.tsx` と `src/components/**`
|
|
11
|
+
- 既存のスタイル: CSS ファイル個別（`src/components/**.css`, `src/index.css`, `src/App.css`）
|
|
12
|
+
|
|
13
|
+
jp-ui について、現状不足している情報
|
|
14
|
+
- README 現状は「インストール + Button の最小例のみ」
|
|
15
|
+
- インストール後の最小動作例（import 例と最小 JSX）
|
|
16
|
+
- 依存/peer 依存（例: react/react-dom/@base-ui/react のバージョン条件）
|
|
17
|
+
- 必須のグローバル CSS / reset / font 取り込み
|
|
18
|
+
- Theme/Provider の有無と、適用方法
|
|
19
|
+
- デザイントークン（color/space/typography/radius/shadow/motion）
|
|
20
|
+
- レイアウト/フォーム/ボタン/ダイアログなど主要コンポーネントの一覧と API
|
|
21
|
+
- Icon やアセットの依存（フォント/アイコン/画像）
|
|
22
|
+
- デフォルトの見た目を確認できる「スクリーンショット or デモ」
|
|
23
|
+
|
|
24
|
+
README を読んで分かったこと
|
|
25
|
+
- インストール手順と Button の最小 JSX は確認できる
|
|
26
|
+
- それ以外の利用情報（Provider/CSS/テーマ/トークン/API/依存）は未記載
|
|
27
|
+
|
|
28
|
+
jp-ui 側で共有してもらえると助かるもの（最小セット）
|
|
29
|
+
- npm パッケージの `README.md` に以下を追加
|
|
30
|
+
- インストール手順（pnpm の例）
|
|
31
|
+
- 3分で動く最小サンプル
|
|
32
|
+
- Provider / Theme / CSS の導入手順
|
|
33
|
+
- 基本コンポーネントの一覧（名前だけでも）
|
|
34
|
+
- jp-ui の簡易デモ
|
|
35
|
+
- Storybook を静的公開するか、`docs/` に HTML でも可
|
|
36
|
+
- 主要コンポーネントの見た目が一括で見れるページ
|
|
37
|
+
- トークン一覧のテキスト（CSS 変数 or JSON）
|
|
38
|
+
|
|
39
|
+
もし private で共有するなら（実務向けの現実案）
|
|
40
|
+
- npm パッケージの `README` を充実させる（最優先）
|
|
41
|
+
- 追加で、以下いずれかを選択
|
|
42
|
+
- A: jp-ui リポジトリを一時的に read-only で共有
|
|
43
|
+
- B: `pnpm pack` で tgz を渡し、docs を同梱
|
|
44
|
+
- C: デモページの静的 HTML を共有（社内/ローカル配布でもOK）
|
|
45
|
+
|
|
46
|
+
この改修を進めるための具体的な質問
|
|
47
|
+
- jp-ui は Provider 必須？（例: `<JpUiProvider>` など）
|
|
48
|
+
- CSS の読み込みは 1 ファイル？複数？
|
|
49
|
+
- ボタン/入力/ダイアログ/トースト/メニューの API をざっくり教えてほしい
|
|
50
|
+
- デフォルトのフォントは何を想定している？
|
|
51
|
+
|
|
52
|
+
次の進め方の提案
|
|
53
|
+
- まず `README + 最小サンプル + 主要コンポーネント一覧` を共有
|
|
54
|
+
- 次に、Diff-pdf の主要画面を jp-ui で置き換える PoC を作成
|
|
55
|
+
- 問題点をこのファイルに追記して、jp-ui の改善に反映
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: jp-ui-consumer
|
|
3
|
+
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.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# jp-ui Consumer
|
|
7
|
+
|
|
8
|
+
## Quick start
|
|
9
|
+
|
|
10
|
+
- Read `docs/usage.md` for install, CSS import, and providers.
|
|
11
|
+
- Read `docs/components.md` to find exported component names.
|
|
12
|
+
- Read `docs/tokens.md` for token sources and theming.
|
|
13
|
+
|
|
14
|
+
## Component details
|
|
15
|
+
|
|
16
|
+
- For prop-level details, inspect `node_modules/@yumehiko/jp-ui/dist/index.d.ts`.
|
package/docs/tokens.md
ADDED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
# Tokens
|
|
2
|
+
|
|
3
|
+
The default theme and tokens are shipped in `@yumehiko/jp-ui/style.css`.
|
|
4
|
+
|
|
5
|
+
Source files:
|
|
6
|
+
|
|
7
|
+
- `tokens/tones.css` and `tokens/tones.json` for tone palettes
|
|
8
|
+
- `tokens/roles.css` plus `tokens/roles.light.json` and `tokens/roles.dark.json` for role tokens
|
|
9
|
+
|
|
10
|
+
You can override tokens by redefining CSS variables in your app.
|
package/docs/usage.md
ADDED
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
# jp-ui Usage
|
|
2
|
+
|
|
3
|
+
## Install
|
|
4
|
+
|
|
5
|
+
```sh
|
|
6
|
+
pnpm add @yumehiko/jp-ui @base-ui/react react react-dom
|
|
7
|
+
```
|
|
8
|
+
|
|
9
|
+
## Import styles
|
|
10
|
+
|
|
11
|
+
```ts
|
|
12
|
+
import '@yumehiko/jp-ui/style.css';
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Minimal example
|
|
16
|
+
|
|
17
|
+
```tsx
|
|
18
|
+
import { Button } from '@yumehiko/jp-ui';
|
|
19
|
+
|
|
20
|
+
export function App() {
|
|
21
|
+
return <Button>OK</Button>;
|
|
22
|
+
}
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
## Providers
|
|
26
|
+
|
|
27
|
+
- Use `TooltipProvider` once near the app root when you use Tooltip components.
|
|
28
|
+
- Use `ToastProvider` once near the app root when you use Toast components.
|
|
29
|
+
- Use `createToastManager` or `useToastManager` to manage toast state.
|
|
30
|
+
|
|
31
|
+
### Minimal providers example
|
|
32
|
+
|
|
33
|
+
```tsx
|
|
34
|
+
import {
|
|
35
|
+
TooltipProvider,
|
|
36
|
+
ToastProvider,
|
|
37
|
+
ToastViewport,
|
|
38
|
+
createToastManager,
|
|
39
|
+
} from '@yumehiko/jp-ui';
|
|
40
|
+
|
|
41
|
+
const toastManager = createToastManager();
|
|
42
|
+
|
|
43
|
+
export function AppProviders({ children }: { children: React.ReactNode }) {
|
|
44
|
+
return (
|
|
45
|
+
<TooltipProvider>
|
|
46
|
+
<ToastProvider manager={toastManager}>
|
|
47
|
+
{children}
|
|
48
|
+
<ToastViewport />
|
|
49
|
+
</ToastProvider>
|
|
50
|
+
</TooltipProvider>
|
|
51
|
+
);
|
|
52
|
+
}
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
## Theme
|
|
56
|
+
|
|
57
|
+
- Default is light tokens.
|
|
58
|
+
- Add `theme-dark` to a root element to enable dark tokens.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@yumehiko/jp-ui",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.2",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -11,23 +11,6 @@
|
|
|
11
11
|
"bugs": {
|
|
12
12
|
"url": "https://github.com/yumehiko/jp-ui/issues"
|
|
13
13
|
},
|
|
14
|
-
"scripts": {
|
|
15
|
-
"dev": "vite",
|
|
16
|
-
"build": "tsc -b && vite build",
|
|
17
|
-
"build:lib": "vite build --config vite.lib.config.ts",
|
|
18
|
-
"build:types": "tsc -p tsconfig.build.json",
|
|
19
|
-
"build:package": "pnpm build:lib && pnpm build:types",
|
|
20
|
-
"lint": "eslint .",
|
|
21
|
-
"preview": "vite preview",
|
|
22
|
-
"storybook": "storybook dev -p 6006",
|
|
23
|
-
"build-storybook": "storybook build",
|
|
24
|
-
"gen:icons": "node scripts/generate-icons.mjs",
|
|
25
|
-
"gen:tones": "node scripts/generate-tones.mjs",
|
|
26
|
-
"gen:roles": "node scripts/extract-roles.mjs",
|
|
27
|
-
"gen:roles-css": "node scripts/generate-roles-css.mjs",
|
|
28
|
-
"typecheck": "tsc -b",
|
|
29
|
-
"prepublishOnly": "pnpm build:package"
|
|
30
|
-
},
|
|
31
14
|
"main": "./dist/index.js",
|
|
32
15
|
"module": "./dist/index.js",
|
|
33
16
|
"style": "./dist/style.css",
|
|
@@ -41,6 +24,7 @@
|
|
|
41
24
|
},
|
|
42
25
|
"files": [
|
|
43
26
|
"dist",
|
|
27
|
+
"docs",
|
|
44
28
|
"LICENSE",
|
|
45
29
|
"README.md"
|
|
46
30
|
],
|
|
@@ -77,5 +61,20 @@
|
|
|
77
61
|
"vite": "^7.3.0",
|
|
78
62
|
"vite-plugin-svgr": "^4.5.0"
|
|
79
63
|
},
|
|
80
|
-
"
|
|
81
|
-
|
|
64
|
+
"scripts": {
|
|
65
|
+
"dev": "vite",
|
|
66
|
+
"build": "tsc -b && vite build",
|
|
67
|
+
"build:lib": "vite build --config vite.lib.config.ts",
|
|
68
|
+
"build:types": "tsc -p tsconfig.build.json",
|
|
69
|
+
"build:package": "pnpm build:lib && pnpm build:types",
|
|
70
|
+
"lint": "eslint .",
|
|
71
|
+
"preview": "vite preview",
|
|
72
|
+
"storybook": "storybook dev -p 6006",
|
|
73
|
+
"build-storybook": "storybook build",
|
|
74
|
+
"gen:icons": "node scripts/generate-icons.mjs",
|
|
75
|
+
"gen:tones": "node scripts/generate-tones.mjs",
|
|
76
|
+
"gen:roles": "node scripts/extract-roles.mjs",
|
|
77
|
+
"gen:roles-css": "node scripts/generate-roles-css.mjs",
|
|
78
|
+
"typecheck": "tsc -b"
|
|
79
|
+
}
|
|
80
|
+
}
|