@aiquants/drag-drop-panels 0.8.0 → 0.8.1

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.
Files changed (8) hide show
  1. package/README.md +81 -81
  2. package/dist/DragDropLayout.d.ts.map +1 -1
  3. package/dist/index.es.js +174 -165
  4. package/dist/index.umd.js +1 -1
  5. package/dist/styles/drag-drop-panels.standalone.css +1 -1
  6. package/package.json +1 -1
  7. package/src/DragDropLayout.spec.tsx +64 -0
  8. package/src/DragDropLayout.tsx +10 -1
package/README.md CHANGED
@@ -1,30 +1,31 @@
1
1
  # Drag & Drop Panel Package
2
2
 
3
- 再利用可能な Drag & Drop パネルレイアウトコンポーネントパッケージです。
3
+ Reusable Drag & Drop panel layout component package.
4
4
 
5
- ## パッケージ情報
5
+ ## Package Info
6
6
 
7
- - **名前**: `@aiquants/drag-drop-panels`
8
- - **場所**: `/workspace/packages/drag-drop-panels`
7
+ - **Name**: `@aiquants/drag-drop-panels`
8
+ - **Location**: `/workspace/packages/drag-drop-panels`
9
9
 
10
- ## 機能
10
+ ## Features
11
11
 
12
- - 複数カラムのドラッグ&ドロップレイアウト
13
- - パネルの並び替え
14
- - カラム間でのパネル移動
15
- - カラム幅のリサイズ
16
- - パネルの表示/非表示切り替え
17
- - カスタムドラッグハンドラーのサポート
18
- - FLIP アニメーション
19
- - エッジスクロール機能
20
- - デバッグオーバーレイ
12
+ - Multi-column Drag & Drop layouts
13
+ - Panel reordering
14
+ - Panel movement across columns
15
+ - Column width resizing
16
+ - Panel visibility toggle
17
+ - Custom drag handler support
18
+ - FLIP animations
19
+ - Edge scrolling support
20
+ - Debug overlay
21
21
 
22
- ## インストール
22
+ ## Installation
23
23
 
24
- ```json
24
+ ```jsonc
25
+ // consumer package.json
25
26
  {
26
27
  "dependencies": {
27
- "@aiquants/drag-drop-panels": "workspace:*"
28
+ "@aiquants/drag-drop-panels": "workspace:*"
28
29
  }
29
30
  }
30
31
  ```
@@ -33,39 +34,42 @@
33
34
  pnpm install
34
35
  ```
35
36
 
36
- ## 使用方法
37
+ ## Usage
37
38
 
38
- ### CSS の読み込み
39
+ ### CSS Integration
39
40
 
40
- 構造系スタイル (レイアウト・リサイズハンドル) は全ホスト共通で読み込む。素のプレーン CSS (実質 Artifact A) で、`:root` テーマ変数・Tailwind ユーティリティ・preflight を含まない:
41
+ Structural styles (layouts, resize handles) are required for all hosts. Ships plain CSS without `:root` theme variables, Tailwind utilities, or preflight:
41
42
 
42
- - `@aiquants/drag-drop-panels/css` (`./css` export、`dist/drag-drop-panels.css`) - レイアウト構造系スタイル (JS から import するか `?url` でルート単位に読み込む)
43
+ - `@aiquants/drag-drop-panels/css` (`./css` export, `dist/drag-drop-panels.css`) - Structural layout styles (import in JS or load per route via `?url`).
43
44
 
44
- JSX ベタ書きの Tailwind ユーティリティはホストの種類で読み込み方が分かれる:
45
+ Tailwind utilities in JSX depend on the host environment:
45
46
 
46
- - **Tailwind v4 ホスト**: パッケージ `src` をスキャン対象に追加し、自アプリの単一ビルドの正準順序でユーティリティを生成する。事前生成 CSS の `@import` 併用は不可 — ホスト側と同名ユーティリティが重複し、base とバリアントの勝敗が反転する。
47
+ - **Tailwind v4 Host**: Add the package `src` directory to your scan targets to generate utilities in your host build:
47
48
 
48
49
  ```css
49
50
  /* app tailwind.css */
50
51
  @source "../node_modules/@aiquants/drag-drop-panels/src/**/*.{ts,tsx}";
51
- /* モノレポ: @source "../../../../packages/drag-drop-panels/src/**/*.{ts,tsx}"; */
52
+ /* monorepo: @source "../../../../packages/drag-drop-panels/src/**/*.{ts,tsx}"; */
52
53
  ```
53
54
 
54
- - **非 Tailwind ホスト**: 自己完結の standalone ビルド (`pnpm run build:css` → `dist/styles/drag-drop-panels.standalone.css`) を 1 本だけ import する。構造系 CSS と全ユーティリティを同梱するため `./css` の別読み込みは不要。ダークは `<html>` の `.dark` クラス基準。
55
+ - **Non-Tailwind Host**: Import the self-contained standalone CSS bundle (`pnpm run build:css` → `dist/styles/drag-drop-panels.standalone.css`):
55
56
 
56
57
  ```css
57
58
  @import "@aiquants/drag-drop-panels/styles/drag-drop-panels.standalone.css";
58
59
  ```
59
60
 
60
- ### 基本的な使用例
61
+ Dark mode activates based on the `.dark` class on `<html>`.
62
+
63
+ ### Basic Usage Example
61
64
 
62
65
  ```tsx
63
66
  import { DragDropLayout } from "@aiquants/drag-drop-panels"
64
- import type { ColumnConfig, DragOverPosition } from "@aiquants/drag-drop-panels"
67
+ import type { ColumnConfig } from "@aiquants/drag-drop-panels"
65
68
  import "@aiquants/drag-drop-panels/css"
69
+ import { useState } from "react"
66
70
 
67
71
  function MyApp() {
68
- // カラム設定
72
+ // Column configuration
69
73
  const columns: ColumnConfig[] = [
70
74
  {
71
75
  id: "column-1",
@@ -77,18 +81,18 @@ function MyApp() {
77
81
  },
78
82
  ]
79
83
 
80
- // カラムごとのパネルID配置
84
+ // Panel ID layout per column
81
85
  const [columnPanels, setColumnPanels] = useState({
82
86
  column1: ["panel1", "panel2"],
83
87
  })
84
88
 
85
- // パネルの可視性
89
+ // Panel visibility
86
90
  const [panelVisibility, setPanelVisibility] = useState({
87
91
  panel1: true,
88
92
  panel2: true,
89
93
  })
90
94
 
91
- // パネルコンポーネントのマッピング
95
+ // Panel component mapping
92
96
  const panelComponentMap = {
93
97
  panel1: { component: MyPanel1, title: "Panel 1" },
94
98
  panel2: { component: MyPanel2, title: "Panel 2" },
@@ -108,61 +112,61 @@ function MyApp() {
108
112
  }
109
113
  ```
110
114
 
111
- ## デモページ
115
+ ## Demo App
112
116
 
113
- `quants-react-router` アプリケーションでデモページを確認できます。
117
+ You can view the interactive demo in the web application.
114
118
 
115
- ### デモページへのアクセス
119
+ ### Running the Demo
116
120
 
117
- 1. `quants-react-router` を起動:
121
+ 1. Start the web application:
118
122
 
119
123
  ```bash
120
124
  cd /workspace/apps/quants-react-router
121
125
  pnpm dev
122
126
  ```
123
127
 
124
- 2. ブラウザで以下の URL にアクセス:
128
+ 2. Open the following URL in your browser:
125
129
 
126
130
  ```text
127
131
  http://localhost:5173/drag-drop-demo
128
132
  ```
129
133
 
130
- ### デモページの機能
134
+ ### Demo Features
131
135
 
132
- - 3 カラムのレイアウト
133
- - 4 つのサンプルパネル
134
- - ドラッグ&ドロップによるパネル移動
135
- - カラム幅のリサイズ
136
- - パネルの表示/非表示切り替え
136
+ - 3-column layout
137
+ - 4 sample panels
138
+ - Drag & Drop panel movement
139
+ - Column width resizing
140
+ - Panel visibility toggles
137
141
 
138
- ## API リファレンス
142
+ ## API Reference
139
143
 
140
144
  ### DragDropLayout Props
141
145
 
142
- | プロパティ | 型 | 必須 | 説明 |
146
+ | Property | Type | Required | Description |
143
147
  | --- | --- | --- | --- |
144
- | `columns` | `ColumnConfig[]` | ✓ | カラムの設定配列 |
145
- | `columnPanels` | `Record<string, string[]>` | ✓ | カラムごとのパネル ID 配列 |
146
- | `onColumnPanelsChange` | `(panels: Record<string, string[]>) => void` | ✓ | パネル配置変更時のコールバック |
147
- | `panelVisibility` | `Record<string, boolean>` | ✓ | パネルの可視性 |
148
- | `onPanelVisibilityChange` | `(visibility: Record<string, boolean>) => void` | ✓ | 可視性変更時のコールバック |
149
- | `panelComponentMap` | `Record<string, PanelConfig>` | ✓ | パネルコンポーネントのマッピング |
150
- | `columnWidths` | `Record<string, number>` | - | カラム幅 |
151
- | `onColumnWidthsChange` | `(widths: Record<string, number>) => void` | - | カラム幅変更時のコールバック |
152
- | `enableResize` | `boolean` | - | リサイズ機能の有効化 (デフォルト: false) |
153
- | `debugConfig` | `DebugConfig` | - | デバッグ設定 |
148
+ | `columns` | `ColumnConfig[]` | ✓ | Column configurations array |
149
+ | `columnPanels` | `Record<string, string[]>` | ✓ | Panel IDs map per column key |
150
+ | `onColumnPanelsChange` | `(panels: Record<string, string[]>) => void` | ✓ | Panel placement change callback |
151
+ | `panelVisibility` | `Record<string, boolean>` | ✓ | Panel visibility map |
152
+ | `onPanelVisibilityChange` | `(visibility: Record<string, boolean>) => void` | ✓ | Visibility change callback |
153
+ | `panelComponentMap` | `Record<string, PanelConfig>` | ✓ | Component registry map for panel keys |
154
+ | `columnWidths` | `Record<string, number>` | - | Column width overrides |
155
+ | `onColumnWidthsChange` | `(widths: Record<string, number>) => void` | - | Column width change callback |
156
+ | `enableResize` | `boolean` | - | Enables column resizing (default: false) |
157
+ | `debugConfig` | `DebugConfig` | - | Debug overlay settings |
154
158
 
155
159
  ### ColumnConfig
156
160
 
157
161
  ```typescript
158
162
  interface ColumnConfig {
159
- id: string // カラムの一意な ID
160
- key: string // カラムのキー (columnPanels で使用)
161
- initialWidth?: number // 初期幅 (px)
162
- minWidth?: number // 最小幅 (px)
163
- maxWidth?: number // 最大幅 (px)
164
- resizable?: boolean // リサイズ可能かどうか
165
- className?: string // カスタム CSS クラス
163
+ id: string // Unique column ID
164
+ key: string // Column key (referenced in columnPanels)
165
+ initialWidth?: number // Initial width in px
166
+ minWidth?: number // Minimum width in px
167
+ maxWidth?: number // Maximum width in px
168
+ resizable?: boolean // Whether column is resizable
169
+ className?: string // Custom CSS class
166
170
  }
167
171
  ```
168
172
 
@@ -170,39 +174,35 @@ interface ColumnConfig {
170
174
 
171
175
  ```typescript
172
176
  interface PanelConfig {
173
- component: ComponentType // パネルのコンポーネント
174
- title: string // パネルのタイトル
175
- props?: Record<string, unknown> // コンポーネントに渡す props
177
+ component: ComponentType // Panel component reference
178
+ title: string // Panel title
179
+ props?: Record<string, unknown> // Props passed to component
176
180
  }
177
181
  ```
178
182
 
179
- ## ビルド
183
+ ## Build
180
184
 
181
185
  ```bash
182
186
  cd /workspace/packages/drag-drop-panels
183
187
  pnpm build
184
188
  ```
185
189
 
186
- ビルド出力:
187
-
188
- - `dist/index.es.js` - ES モジュール
189
- - `dist/index.umd.js` - UMD モジュール
190
- - `dist/index.d.ts` - TypeScript 型定義
191
- - `dist/drag-drop-panels.css` - 構造系スタイルシート (`./css` export、実質 Artifact A)
192
- - `dist/styles/drag-drop-panels.standalone.css` - 非 Tailwind ホスト向けの自己完結 CSS (構造系 + 全ユーティリティ、`./styles/drag-drop-panels.standalone.css` export、`pnpm run build:css` で生成)
193
-
194
- ## 開発
190
+ Build outputs:
195
191
 
196
- ### パッケージの修正
192
+ - `dist/index.es.js` - ES module
193
+ - `dist/index.umd.js` - UMD module
194
+ - `dist/index.d.ts` - TypeScript type definitions
195
+ - `dist/drag-drop-panels.css` - Structural stylesheet (`./css` export)
196
+ - `dist/styles/drag-drop-panels.standalone.css` - Standalone CSS for non-Tailwind hosts
197
197
 
198
- 1. `/workspace/packages/drag-drop-panels/src` でソースを編集
199
- 2. ビルド: `pnpm build`
200
- 3. `quants-react-router` でテスト
198
+ ## Development
201
199
 
202
- ### 既知の問題
200
+ ### Modifying Package
203
201
 
204
- 現時点では特にありません。
202
+ 1. Edit source files in `/workspace/packages/drag-drop-panels/src`
203
+ 2. Build: `pnpm build`
204
+ 3. Test in application
205
205
 
206
- ## ライセンス
206
+ ## License
207
207
 
208
208
  MIT
package/dist/DragDropLayout.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"DragDropLayout.d.ts","sourceRoot":"","sources":["../src/DragDropLayout.tsx"],"names":[],"mappings":"AAWA,OAAO,gCAAgC,CAAA;AAGvC,OAAO,KAAK,EAAE,YAAY,EAAE,eAAe,EAAE,WAAW,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,SAAS,EAAE,qBAAqB,EAAE,WAAW,EAAE,eAAe,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAEhP;;;;GAIG;AACH,MAAM,WAAW,mBAAoB,SAAQ,qBAAqB,EAAE,qBAAqB,EAAE,YAAY;IAEnG,OAAO,EAAE,YAAY,EAAE,CAAA;IAGvB,MAAM,EAAE,WAAW,EAAE,CAAA;IAGrB,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAA;IAGtC,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAGxC,SAAS,EAAE,SAAS,CAAA;IACpB,gBAAgB,EAAE,gBAAgB,GAAG,IAAI,CAAA;IACzC,qBAAqB,EAAE,qBAAqB,GAAG,IAAI,CAAA;IAGnD,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,GAAG,QAAQ,CAAC,CAAA;IAG9C,WAAW,EAAE,WAAW,CAAA;IAGxB,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAA;IAGzC,UAAU,CAAC,EAAE,eAAe,CAAA;IAG5B,UAAU,CAAC,EAAE,eAAe,CAAA;IAG5B,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAI9B,cAAc,CAAC,EAAE,MAAM,CAAA;IAGvB,KAAK,CAAC,EAAE,MAAM,CAAA;IAGd,SAAS,CAAC,EAAE;QACR,aAAa,EAAE,MAAM,CAAA;QACrB,QAAQ,CAAC,EAAE,MAAM,CAAA;KACpB,CAAA;IAGD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CAC1C;AAwCD;;;;;;;;GAQG;AACH,eAAO,MAAM,cAAc,GAAI,4oBA6C5B,mBAAmB,gCAwkBrB,CAAA"}
1
+ {"version":3,"file":"DragDropLayout.d.ts","sourceRoot":"","sources":["../src/DragDropLayout.tsx"],"names":[],"mappings":"AAWA,OAAO,gCAAgC,CAAA;AAGvC,OAAO,KAAK,EAAE,YAAY,EAAE,eAAe,EAAE,WAAW,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,SAAS,EAAE,qBAAqB,EAAE,WAAW,EAAE,eAAe,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAEhP;;;;GAIG;AACH,MAAM,WAAW,mBAAoB,SAAQ,qBAAqB,EAAE,qBAAqB,EAAE,YAAY;IAEnG,OAAO,EAAE,YAAY,EAAE,CAAA;IAGvB,MAAM,EAAE,WAAW,EAAE,CAAA;IAGrB,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAA;IAGtC,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAGxC,SAAS,EAAE,SAAS,CAAA;IACpB,gBAAgB,EAAE,gBAAgB,GAAG,IAAI,CAAA;IACzC,qBAAqB,EAAE,qBAAqB,GAAG,IAAI,CAAA;IAGnD,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,GAAG,QAAQ,CAAC,CAAA;IAG9C,WAAW,EAAE,WAAW,CAAA;IAGxB,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAA;IAGzC,UAAU,CAAC,EAAE,eAAe,CAAA;IAG5B,UAAU,CAAC,EAAE,eAAe,CAAA;IAG5B,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAI9B,cAAc,CAAC,EAAE,MAAM,CAAA;IAGvB,KAAK,CAAC,EAAE,MAAM,CAAA;IAGd,SAAS,CAAC,EAAE;QACR,aAAa,EAAE,MAAM,CAAA;QACrB,QAAQ,CAAC,EAAE,MAAM,CAAA;KACpB,CAAA;IAGD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CAC1C;AAwCD;;;;;;;;GAQG;AACH,eAAO,MAAM,cAAc,GAAI,4oBA6C5B,mBAAmB,gCAilBrB,CAAA"}