@kanmon-hq/tollgate-ui 0.0.1 → 0.0.4
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 +140 -140
- package/package.json +57 -57
package/README.md
CHANGED
|
@@ -1,140 +1,140 @@
|
|
|
1
|
-
# @kanmon-hq/tollgate-ui
|
|
2
|
-
|
|
3
|
-
Tollgate API Gateway & Key Broker 向けの組み込み型 Web Components UI ライブラリ。
|
|
4
|
-
Vue 3、React、Next.js、Vanilla HTML などあらゆるフロントエンド環境に単一のカスタム要素として簡単に組み込み可能です。
|
|
5
|
-
|
|
6
|
-
## 特徴
|
|
7
|
-
|
|
8
|
-
- ⚡ **Web Components (Custom Elements)**: フレームワークに依存せず `<tollgate-console>` タグで利用可能
|
|
9
|
-
- 🛡️ **Shadow DOM スコープ保護**: ホストアプリケーションの CSS と干渉しない完全隔離スタイリング
|
|
10
|
-
- 🎨 **リッチな管理 UI**: API キーの発行・クォータ管理・レートリミット制御・Graceful ローテーション・キー単体認可検証テスターを内蔵
|
|
11
|
-
- 🏢 **マルチテナント完全対応**: テナント切り替え、スコープ管理、サービスキー分離に対応
|
|
12
|
-
|
|
13
|
-
## インストール
|
|
14
|
-
|
|
15
|
-
### npm からインストール (推奨)
|
|
16
|
-
|
|
17
|
-
```bash
|
|
18
|
-
npm install @kanmon-hq/tollgate-ui
|
|
19
|
-
# または
|
|
20
|
-
pnpm add @kanmon-hq/tollgate-ui
|
|
21
|
-
# または
|
|
22
|
-
yarn add @kanmon-hq/tollgate-ui
|
|
23
|
-
```
|
|
24
|
-
|
|
25
|
-
### GitHub Packages からインストール
|
|
26
|
-
|
|
27
|
-
プロジェクト直下の `.npmrc` に以下を設定してインストールします：
|
|
28
|
-
|
|
29
|
-
```ini
|
|
30
|
-
@kanmon-hq:registry=https://npm.pkg.github.com
|
|
31
|
-
```
|
|
32
|
-
|
|
33
|
-
```bash
|
|
34
|
-
npm install @kanmon-hq/tollgate-ui
|
|
35
|
-
```
|
|
36
|
-
|
|
37
|
-
## 使い方
|
|
38
|
-
|
|
39
|
-
### 1. Vanilla HTML / CDN
|
|
40
|
-
|
|
41
|
-
```html
|
|
42
|
-
<!DOCTYPE html>
|
|
43
|
-
<html lang="ja">
|
|
44
|
-
<head>
|
|
45
|
-
<meta charset="UTF-8">
|
|
46
|
-
<script type="module" src="https://unpkg.com/@kanmon-hq/tollgate-ui/dist/tollgate-ui.js"></script>
|
|
47
|
-
</head>
|
|
48
|
-
<body class="bg-slate-950 p-8">
|
|
49
|
-
<tollgate-console
|
|
50
|
-
api-base-url="http://localhost:8000"
|
|
51
|
-
admin-token="your-admin-secret"
|
|
52
|
-
tenants-json='[{"id":"tenant-corp-a","name":"Corp A"},{"id":"tenant-corp-b","name":"Corp B"}]'
|
|
53
|
-
></tollgate-console>
|
|
54
|
-
</body>
|
|
55
|
-
</html>
|
|
56
|
-
```
|
|
57
|
-
|
|
58
|
-
### 2. Vue 3 での利用
|
|
59
|
-
|
|
60
|
-
```vue
|
|
61
|
-
<script setup lang="ts">
|
|
62
|
-
import '@kanmon-hq/tollgate-ui'
|
|
63
|
-
// または
|
|
64
|
-
// import { registerTollgateUI } from '@kanmon-hq/tollgate-ui'
|
|
65
|
-
// registerTollgateUI()
|
|
66
|
-
|
|
67
|
-
const tenants = [
|
|
68
|
-
{ id: 'tenant-corp-a', name: '企業 A' },
|
|
69
|
-
{ id: 'tenant-corp-b', name: '企業 B' }
|
|
70
|
-
]
|
|
71
|
-
</script>
|
|
72
|
-
|
|
73
|
-
<template>
|
|
74
|
-
<div class="p-6">
|
|
75
|
-
<tollgate-console
|
|
76
|
-
api-base-url="/api"
|
|
77
|
-
admin-token="secret-token"
|
|
78
|
-
:tenants-json="tenants"
|
|
79
|
-
/>
|
|
80
|
-
</div>
|
|
81
|
-
</template>
|
|
82
|
-
```
|
|
83
|
-
|
|
84
|
-
> **Note (Vue 3)**: Vite 設定等でカスタム要素として扱う場合は `compilerOptions.isCustomElement: (tag) => tag.startsWith('tollgate-')` を指定してください。
|
|
85
|
-
|
|
86
|
-
### 3. React / Next.js での利用
|
|
87
|
-
|
|
88
|
-
```tsx
|
|
89
|
-
import React, { useEffect } from 'react'
|
|
90
|
-
|
|
91
|
-
export function TollgateAdminPage() {
|
|
92
|
-
useEffect(() => {
|
|
93
|
-
import('@kanmon-hq/tollgate-ui')
|
|
94
|
-
}, [])
|
|
95
|
-
|
|
96
|
-
const tenants = [
|
|
97
|
-
{ id: 'tenant-corp-a', name: '企業 A' },
|
|
98
|
-
{ id: 'tenant-corp-b', name: '企業 B' }
|
|
99
|
-
]
|
|
100
|
-
|
|
101
|
-
return (
|
|
102
|
-
<div className="p-6">
|
|
103
|
-
{/* @ts-ignore custom element */}
|
|
104
|
-
<tollgate-console
|
|
105
|
-
api-base-url={process.env.NEXT_PUBLIC_TOLLGATE_API_URL}
|
|
106
|
-
admin-token="your-admin-secret"
|
|
107
|
-
tenants-json={JSON.stringify(tenants)}
|
|
108
|
-
/>
|
|
109
|
-
</div>
|
|
110
|
-
)
|
|
111
|
-
}
|
|
112
|
-
```
|
|
113
|
-
|
|
114
|
-
## Props (Attributes / Properties)
|
|
115
|
-
|
|
116
|
-
| 属性名 | 型 | 説明 | デフォルト値 |
|
|
117
|
-
| :--- | :--- | :--- | :--- |
|
|
118
|
-
| `api-base-url` | `string` | Tollgate サーバーの Base URL (例: `http://localhost:8000`) | `""` |
|
|
119
|
-
| `admin-token` | `string` | 管理者認可シークレット / Bearer トークン | `""` |
|
|
120
|
-
| `tenant-id` | `string` | 特定テナントに限定する場合のテナントID | `""` |
|
|
121
|
-
| `tenants-json` | `string` \| `TenantOption[]` | テナント一覧の配列（またはJSON文字列） | `[]` |
|
|
122
|
-
| `embedded` | `boolean` | ヘッダーを非表示にしてコンポーネントのみ埋め込むモード | `false` |
|
|
123
|
-
| `title` | `string` | ヘッダータイトル | `"API Key Gateway (Tollgate) 管理コンソール"` |
|
|
124
|
-
|
|
125
|
-
## 開発
|
|
126
|
-
|
|
127
|
-
```bash
|
|
128
|
-
# 依存関係インストール
|
|
129
|
-
npm install
|
|
130
|
-
|
|
131
|
-
# 開発サーバー起動
|
|
132
|
-
npm run dev
|
|
133
|
-
|
|
134
|
-
# Web Components ライブラリビルド
|
|
135
|
-
npm run build
|
|
136
|
-
```
|
|
137
|
-
|
|
138
|
-
## ライセンス
|
|
139
|
-
|
|
140
|
-
Apache-2.0
|
|
1
|
+
# @kanmon-hq/tollgate-ui
|
|
2
|
+
|
|
3
|
+
Tollgate API Gateway & Key Broker 向けの組み込み型 Web Components UI ライブラリ。
|
|
4
|
+
Vue 3、React、Next.js、Vanilla HTML などあらゆるフロントエンド環境に単一のカスタム要素として簡単に組み込み可能です。
|
|
5
|
+
|
|
6
|
+
## 特徴
|
|
7
|
+
|
|
8
|
+
- ⚡ **Web Components (Custom Elements)**: フレームワークに依存せず `<tollgate-console>` タグで利用可能
|
|
9
|
+
- 🛡️ **Shadow DOM スコープ保護**: ホストアプリケーションの CSS と干渉しない完全隔離スタイリング
|
|
10
|
+
- 🎨 **リッチな管理 UI**: API キーの発行・クォータ管理・レートリミット制御・Graceful ローテーション・キー単体認可検証テスターを内蔵
|
|
11
|
+
- 🏢 **マルチテナント完全対応**: テナント切り替え、スコープ管理、サービスキー分離に対応
|
|
12
|
+
|
|
13
|
+
## インストール
|
|
14
|
+
|
|
15
|
+
### npm からインストール (推奨)
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
npm install @kanmon-hq/tollgate-ui
|
|
19
|
+
# または
|
|
20
|
+
pnpm add @kanmon-hq/tollgate-ui
|
|
21
|
+
# または
|
|
22
|
+
yarn add @kanmon-hq/tollgate-ui
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
### GitHub Packages からインストール
|
|
26
|
+
|
|
27
|
+
プロジェクト直下の `.npmrc` に以下を設定してインストールします：
|
|
28
|
+
|
|
29
|
+
```ini
|
|
30
|
+
@kanmon-hq:registry=https://npm.pkg.github.com
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
```bash
|
|
34
|
+
npm install @kanmon-hq/tollgate-ui
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
## 使い方
|
|
38
|
+
|
|
39
|
+
### 1. Vanilla HTML / CDN
|
|
40
|
+
|
|
41
|
+
```html
|
|
42
|
+
<!DOCTYPE html>
|
|
43
|
+
<html lang="ja">
|
|
44
|
+
<head>
|
|
45
|
+
<meta charset="UTF-8">
|
|
46
|
+
<script type="module" src="https://unpkg.com/@kanmon-hq/tollgate-ui/dist/tollgate-ui.js"></script>
|
|
47
|
+
</head>
|
|
48
|
+
<body class="bg-slate-950 p-8">
|
|
49
|
+
<tollgate-console
|
|
50
|
+
api-base-url="http://localhost:8000"
|
|
51
|
+
admin-token="your-admin-secret"
|
|
52
|
+
tenants-json='[{"id":"tenant-corp-a","name":"Corp A"},{"id":"tenant-corp-b","name":"Corp B"}]'
|
|
53
|
+
></tollgate-console>
|
|
54
|
+
</body>
|
|
55
|
+
</html>
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
### 2. Vue 3 での利用
|
|
59
|
+
|
|
60
|
+
```vue
|
|
61
|
+
<script setup lang="ts">
|
|
62
|
+
import '@kanmon-hq/tollgate-ui'
|
|
63
|
+
// または
|
|
64
|
+
// import { registerTollgateUI } from '@kanmon-hq/tollgate-ui'
|
|
65
|
+
// registerTollgateUI()
|
|
66
|
+
|
|
67
|
+
const tenants = [
|
|
68
|
+
{ id: 'tenant-corp-a', name: '企業 A' },
|
|
69
|
+
{ id: 'tenant-corp-b', name: '企業 B' }
|
|
70
|
+
]
|
|
71
|
+
</script>
|
|
72
|
+
|
|
73
|
+
<template>
|
|
74
|
+
<div class="p-6">
|
|
75
|
+
<tollgate-console
|
|
76
|
+
api-base-url="/api"
|
|
77
|
+
admin-token="secret-token"
|
|
78
|
+
:tenants-json="tenants"
|
|
79
|
+
/>
|
|
80
|
+
</div>
|
|
81
|
+
</template>
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
> **Note (Vue 3)**: Vite 設定等でカスタム要素として扱う場合は `compilerOptions.isCustomElement: (tag) => tag.startsWith('tollgate-')` を指定してください。
|
|
85
|
+
|
|
86
|
+
### 3. React / Next.js での利用
|
|
87
|
+
|
|
88
|
+
```tsx
|
|
89
|
+
import React, { useEffect } from 'react'
|
|
90
|
+
|
|
91
|
+
export function TollgateAdminPage() {
|
|
92
|
+
useEffect(() => {
|
|
93
|
+
import('@kanmon-hq/tollgate-ui')
|
|
94
|
+
}, [])
|
|
95
|
+
|
|
96
|
+
const tenants = [
|
|
97
|
+
{ id: 'tenant-corp-a', name: '企業 A' },
|
|
98
|
+
{ id: 'tenant-corp-b', name: '企業 B' }
|
|
99
|
+
]
|
|
100
|
+
|
|
101
|
+
return (
|
|
102
|
+
<div className="p-6">
|
|
103
|
+
{/* @ts-ignore custom element */}
|
|
104
|
+
<tollgate-console
|
|
105
|
+
api-base-url={process.env.NEXT_PUBLIC_TOLLGATE_API_URL}
|
|
106
|
+
admin-token="your-admin-secret"
|
|
107
|
+
tenants-json={JSON.stringify(tenants)}
|
|
108
|
+
/>
|
|
109
|
+
</div>
|
|
110
|
+
)
|
|
111
|
+
}
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
## Props (Attributes / Properties)
|
|
115
|
+
|
|
116
|
+
| 属性名 | 型 | 説明 | デフォルト値 |
|
|
117
|
+
| :--- | :--- | :--- | :--- |
|
|
118
|
+
| `api-base-url` | `string` | Tollgate サーバーの Base URL (例: `http://localhost:8000`) | `""` |
|
|
119
|
+
| `admin-token` | `string` | 管理者認可シークレット / Bearer トークン | `""` |
|
|
120
|
+
| `tenant-id` | `string` | 特定テナントに限定する場合のテナントID | `""` |
|
|
121
|
+
| `tenants-json` | `string` \| `TenantOption[]` | テナント一覧の配列（またはJSON文字列） | `[]` |
|
|
122
|
+
| `embedded` | `boolean` | ヘッダーを非表示にしてコンポーネントのみ埋め込むモード | `false` |
|
|
123
|
+
| `title` | `string` | ヘッダータイトル | `"API Key Gateway (Tollgate) 管理コンソール"` |
|
|
124
|
+
|
|
125
|
+
## 開発
|
|
126
|
+
|
|
127
|
+
```bash
|
|
128
|
+
# 依存関係インストール
|
|
129
|
+
npm install
|
|
130
|
+
|
|
131
|
+
# 開発サーバー起動
|
|
132
|
+
npm run dev
|
|
133
|
+
|
|
134
|
+
# Web Components ライブラリビルド
|
|
135
|
+
npm run build
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
## ライセンス
|
|
139
|
+
|
|
140
|
+
Apache-2.0
|
package/package.json
CHANGED
|
@@ -1,57 +1,57 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@kanmon-hq/tollgate-ui",
|
|
3
|
-
"version": "0.0.
|
|
4
|
-
"description": "Web Components UI suite for Tollgate API Gateway & Key Broker",
|
|
5
|
-
"type": "module",
|
|
6
|
-
"main": "./dist/tollgate-ui.umd.cjs",
|
|
7
|
-
"module": "./dist/tollgate-ui.js",
|
|
8
|
-
"types": "./dist/index.d.ts",
|
|
9
|
-
"exports": {
|
|
10
|
-
".": {
|
|
11
|
-
"types": "./dist/index.d.ts",
|
|
12
|
-
"import": "./dist/tollgate-ui.js",
|
|
13
|
-
"require": "./dist/tollgate-ui.umd.cjs"
|
|
14
|
-
}
|
|
15
|
-
},
|
|
16
|
-
"repository": {
|
|
17
|
-
"type": "git",
|
|
18
|
-
"url": "git+https://github.com/kanmon-hq/tollgate-ui.git"
|
|
19
|
-
},
|
|
20
|
-
"publishConfig": {
|
|
21
|
-
"registry": "https://npm.pkg.github.com"
|
|
22
|
-
},
|
|
23
|
-
"files": [
|
|
24
|
-
"dist",
|
|
25
|
-
"README.md"
|
|
26
|
-
],
|
|
27
|
-
"scripts": {
|
|
28
|
-
"dev": "vite",
|
|
29
|
-
"build": "vue-tsc --noEmit && vite build",
|
|
30
|
-
"preview": "vite preview"
|
|
31
|
-
},
|
|
32
|
-
"keywords": [
|
|
33
|
-
"tollgate",
|
|
34
|
-
"web-components",
|
|
35
|
-
"vue",
|
|
36
|
-
"react",
|
|
37
|
-
"api-gateway",
|
|
38
|
-
"api-keys",
|
|
39
|
-
"ui"
|
|
40
|
-
],
|
|
41
|
-
"author": "Kanmon HQ",
|
|
42
|
-
"license": "Apache-2.0",
|
|
43
|
-
"dependencies": {
|
|
44
|
-
"lucide-vue-next": "^0.475.0",
|
|
45
|
-
"vue": "^3.5.13"
|
|
46
|
-
},
|
|
47
|
-
"devDependencies": {
|
|
48
|
-
"@vitejs/plugin-vue": "^5.2.1",
|
|
49
|
-
"autoprefixer": "^10.4.20",
|
|
50
|
-
"postcss": "^8.5.1",
|
|
51
|
-
"tailwindcss": "^3.4.17",
|
|
52
|
-
"typescript": "~5.7.2",
|
|
53
|
-
"vite": "^6.1.0",
|
|
54
|
-
"vite-plugin-dts": "^4.5.0",
|
|
55
|
-
"vue-tsc": "^2.2.0"
|
|
56
|
-
}
|
|
57
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@kanmon-hq/tollgate-ui",
|
|
3
|
+
"version": "0.0.4",
|
|
4
|
+
"description": "Web Components UI suite for Tollgate API Gateway & Key Broker",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "./dist/tollgate-ui.umd.cjs",
|
|
7
|
+
"module": "./dist/tollgate-ui.js",
|
|
8
|
+
"types": "./dist/index.d.ts",
|
|
9
|
+
"exports": {
|
|
10
|
+
".": {
|
|
11
|
+
"types": "./dist/index.d.ts",
|
|
12
|
+
"import": "./dist/tollgate-ui.js",
|
|
13
|
+
"require": "./dist/tollgate-ui.umd.cjs"
|
|
14
|
+
}
|
|
15
|
+
},
|
|
16
|
+
"repository": {
|
|
17
|
+
"type": "git",
|
|
18
|
+
"url": "git+https://github.com/kanmon-hq/tollgate-ui.git"
|
|
19
|
+
},
|
|
20
|
+
"publishConfig": {
|
|
21
|
+
"registry": "https://npm.pkg.github.com"
|
|
22
|
+
},
|
|
23
|
+
"files": [
|
|
24
|
+
"dist",
|
|
25
|
+
"README.md"
|
|
26
|
+
],
|
|
27
|
+
"scripts": {
|
|
28
|
+
"dev": "vite",
|
|
29
|
+
"build": "vue-tsc --noEmit && vite build",
|
|
30
|
+
"preview": "vite preview"
|
|
31
|
+
},
|
|
32
|
+
"keywords": [
|
|
33
|
+
"tollgate",
|
|
34
|
+
"web-components",
|
|
35
|
+
"vue",
|
|
36
|
+
"react",
|
|
37
|
+
"api-gateway",
|
|
38
|
+
"api-keys",
|
|
39
|
+
"ui"
|
|
40
|
+
],
|
|
41
|
+
"author": "Kanmon HQ",
|
|
42
|
+
"license": "Apache-2.0",
|
|
43
|
+
"dependencies": {
|
|
44
|
+
"lucide-vue-next": "^0.475.0",
|
|
45
|
+
"vue": "^3.5.13"
|
|
46
|
+
},
|
|
47
|
+
"devDependencies": {
|
|
48
|
+
"@vitejs/plugin-vue": "^5.2.1",
|
|
49
|
+
"autoprefixer": "^10.4.20",
|
|
50
|
+
"postcss": "^8.5.1",
|
|
51
|
+
"tailwindcss": "^3.4.17",
|
|
52
|
+
"typescript": "~5.7.2",
|
|
53
|
+
"vite": "^6.1.0",
|
|
54
|
+
"vite-plugin-dts": "^4.5.0",
|
|
55
|
+
"vue-tsc": "^2.2.0"
|
|
56
|
+
}
|
|
57
|
+
}
|