@feelflow/ffid-sdk 0.1.0
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 +270 -0
- package/dist/chunk-A63MX52D.js +861 -0
- package/dist/chunk-YCMQXJOS.cjs +872 -0
- package/dist/components/index.cjs +22 -0
- package/dist/components/index.d.cts +3 -0
- package/dist/components/index.d.ts +3 -0
- package/dist/components/index.js +1 -0
- package/dist/index-CtBBLbTn.d.cts +322 -0
- package/dist/index-CtBBLbTn.d.ts +322 -0
- package/dist/index.cjs +68 -0
- package/dist/index.d.cts +181 -0
- package/dist/index.d.ts +181 -0
- package/dist/index.js +31 -0
- package/dist/legal/index.cjs +180 -0
- package/dist/legal/index.d.cts +332 -0
- package/dist/legal/index.d.ts +332 -0
- package/dist/legal/index.js +176 -0
- package/package.json +84 -0
package/README.md
ADDED
|
@@ -0,0 +1,270 @@
|
|
|
1
|
+
# @feelflow/ffid-sdk
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/@feelflow/ffid-sdk)
|
|
4
|
+
[](https://opensource.org/licenses/MIT)
|
|
5
|
+
|
|
6
|
+
FeelFlow ID Platform SDK for React/Next.js applications.
|
|
7
|
+
|
|
8
|
+
**5行のコードでFFID認証を導入！**
|
|
9
|
+
|
|
10
|
+
## インストール
|
|
11
|
+
|
|
12
|
+
```bash
|
|
13
|
+
npm install @feelflow/ffid-sdk
|
|
14
|
+
# or
|
|
15
|
+
yarn add @feelflow/ffid-sdk
|
|
16
|
+
# or
|
|
17
|
+
pnpm add @feelflow/ffid-sdk
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
## クイックスタート
|
|
21
|
+
|
|
22
|
+
### 1. プロバイダーを設定（5行で完了！）
|
|
23
|
+
|
|
24
|
+
```tsx
|
|
25
|
+
// app/layout.tsx
|
|
26
|
+
import { FFIDProvider } from '@feelflow/ffid-sdk'
|
|
27
|
+
|
|
28
|
+
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
|
29
|
+
return (
|
|
30
|
+
<html lang="ja">
|
|
31
|
+
<body>
|
|
32
|
+
<FFIDProvider serviceCode="chatbot">{children}</FFIDProvider>
|
|
33
|
+
</body>
|
|
34
|
+
</html>
|
|
35
|
+
)
|
|
36
|
+
}
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
### 2. 認証情報を使用
|
|
40
|
+
|
|
41
|
+
```tsx
|
|
42
|
+
import { useFFID, useSubscription } from '@feelflow/ffid-sdk'
|
|
43
|
+
|
|
44
|
+
function Dashboard() {
|
|
45
|
+
const { user, isAuthenticated, login, logout } = useFFID()
|
|
46
|
+
const { isActive, planCode } = useSubscription()
|
|
47
|
+
|
|
48
|
+
if (!isAuthenticated) {
|
|
49
|
+
return <button onClick={login}>ログイン</button>
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
return (
|
|
53
|
+
<div>
|
|
54
|
+
<p>Welcome, {user.displayName ?? user.email}!</p>
|
|
55
|
+
<p>プラン: {planCode}</p>
|
|
56
|
+
<button onClick={logout}>ログアウト</button>
|
|
57
|
+
</div>
|
|
58
|
+
)
|
|
59
|
+
}
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
## UIコンポーネント
|
|
63
|
+
|
|
64
|
+
```tsx
|
|
65
|
+
import {
|
|
66
|
+
FFIDLoginButton,
|
|
67
|
+
FFIDUserMenu,
|
|
68
|
+
FFIDOrganizationSwitcher,
|
|
69
|
+
FFIDSubscriptionBadge,
|
|
70
|
+
} from '@feelflow/ffid-sdk/components'
|
|
71
|
+
|
|
72
|
+
function Header() {
|
|
73
|
+
return (
|
|
74
|
+
<header>
|
|
75
|
+
<FFIDLoginButton>ログイン</FFIDLoginButton>
|
|
76
|
+
<FFIDOrganizationSwitcher />
|
|
77
|
+
<FFIDSubscriptionBadge />
|
|
78
|
+
<FFIDUserMenu />
|
|
79
|
+
</header>
|
|
80
|
+
)
|
|
81
|
+
}
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
### コンポーネントのスタイリング（classNames パターン）
|
|
85
|
+
|
|
86
|
+
各UIコンポーネントは [Radix UI スタイルパターン](https://www.radix-ui.com/primitives/docs/guides/styling) に従った `classNames` プロップをサポートしています。これにより、コンポーネントの各パーツに個別のクラスを適用できます。
|
|
87
|
+
|
|
88
|
+
#### FFIDUserMenu
|
|
89
|
+
|
|
90
|
+
```tsx
|
|
91
|
+
<FFIDUserMenu
|
|
92
|
+
classNames={{
|
|
93
|
+
container: 'relative', // ラッパー要素
|
|
94
|
+
button: 'focus:ring-2', // アバターボタン（トリガー）
|
|
95
|
+
avatar: 'rounded-full', // アバター画像/フォールバック
|
|
96
|
+
menu: 'shadow-lg', // ドロップダウンメニュー
|
|
97
|
+
userInfo: 'border-b', // ユーザー情報セクション
|
|
98
|
+
menuItem: 'hover:bg-gray-100', // カスタムメニュー項目
|
|
99
|
+
logout: 'text-red-600', // ログアウトボタン
|
|
100
|
+
}}
|
|
101
|
+
/>
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
#### FFIDOrganizationSwitcher
|
|
105
|
+
|
|
106
|
+
```tsx
|
|
107
|
+
<FFIDOrganizationSwitcher
|
|
108
|
+
classNames={{
|
|
109
|
+
container: 'relative', // ラッパー要素
|
|
110
|
+
button: 'border rounded', // トリガーボタン
|
|
111
|
+
dropdown: 'shadow-md', // ドロップダウンメニュー
|
|
112
|
+
option: 'px-4 py-2', // 各組織オプション
|
|
113
|
+
optionSelected: 'bg-blue-50', // 選択中の組織（optionに加えて適用）
|
|
114
|
+
}}
|
|
115
|
+
/>
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
#### FFIDSubscriptionBadge
|
|
119
|
+
|
|
120
|
+
```tsx
|
|
121
|
+
<FFIDSubscriptionBadge
|
|
122
|
+
classNames={{
|
|
123
|
+
badge: 'font-semibold', // バッジspan要素
|
|
124
|
+
}}
|
|
125
|
+
/>
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
> **Note**: `FFIDLoginButton` はシンプルな単一要素コンポーネントのため、標準の `className` プロップのみをサポートしています。
|
|
129
|
+
|
|
130
|
+
## API リファレンス
|
|
131
|
+
|
|
132
|
+
### FFIDProvider
|
|
133
|
+
|
|
134
|
+
アプリケーション全体をラップするプロバイダーコンポーネント。
|
|
135
|
+
|
|
136
|
+
```tsx
|
|
137
|
+
<FFIDProvider
|
|
138
|
+
serviceCode="chatbot" // 必須: サービスコード
|
|
139
|
+
apiBaseUrl="..." // オプション: カスタムAPIエンドポイント
|
|
140
|
+
debug={true} // オプション: デバッグログ有効化（非推奨、loggerを使用）
|
|
141
|
+
logger={customLogger} // オプション: カスタムロガー（下記参照）
|
|
142
|
+
refreshInterval={300000} // オプション: セッション更新間隔（ms）
|
|
143
|
+
onAuthStateChange={(user) => {}} // オプション: 認証状態変更時コールバック
|
|
144
|
+
onError={(error) => {}} // オプション: エラー時コールバック
|
|
145
|
+
>
|
|
146
|
+
{children}
|
|
147
|
+
</FFIDProvider>
|
|
148
|
+
```
|
|
149
|
+
|
|
150
|
+
### カスタムロガー
|
|
151
|
+
|
|
152
|
+
SDKのデバッグ出力をカスタマイズできます。デフォルトではログは出力されません（サイレント）。
|
|
153
|
+
|
|
154
|
+
```tsx
|
|
155
|
+
import type { FFIDLogger } from '@feelflow/ffid-sdk'
|
|
156
|
+
import pino from 'pino' // または winston, bunyan 等
|
|
157
|
+
|
|
158
|
+
// アプリケーションのロガーインスタンス
|
|
159
|
+
const appLogger = pino({ level: 'debug' })
|
|
160
|
+
|
|
161
|
+
// FFID SDK用にラップ
|
|
162
|
+
const ffidLogger: FFIDLogger = {
|
|
163
|
+
debug: (...args) => appLogger.debug({ sdk: 'ffid' }, ...args),
|
|
164
|
+
info: (...args) => appLogger.info({ sdk: 'ffid' }, ...args),
|
|
165
|
+
warn: (...args) => appLogger.warn({ sdk: 'ffid' }, ...args),
|
|
166
|
+
error: (...args) => appLogger.error({ sdk: 'ffid' }, ...args),
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
// 使用例
|
|
170
|
+
<FFIDProvider serviceCode="chatbot" logger={ffidLogger}>
|
|
171
|
+
{children}
|
|
172
|
+
</FFIDProvider>
|
|
173
|
+
```
|
|
174
|
+
|
|
175
|
+
**ロガー優先順位:**
|
|
176
|
+
|
|
177
|
+
1. `logger` が指定されている場合 → カスタムロガーを使用
|
|
178
|
+
2. `debug: true` で `logger` なし → `console` を使用（後方互換性）
|
|
179
|
+
3. 両方なし → サイレント（no-op）
|
|
180
|
+
|
|
181
|
+
### useFFID()
|
|
182
|
+
|
|
183
|
+
ユーザー・組織情報を取得するフック。
|
|
184
|
+
|
|
185
|
+
```tsx
|
|
186
|
+
const {
|
|
187
|
+
user, // FFIDUser | null - 現在のユーザー
|
|
188
|
+
organizations, // FFIDOrganization[] - 所属組織一覧
|
|
189
|
+
currentOrganization, // FFIDOrganization | null - 現在の組織
|
|
190
|
+
isLoading, // boolean - ロード中
|
|
191
|
+
isAuthenticated, // boolean - 認証済み
|
|
192
|
+
login, // () => void - ログインページへリダイレクト
|
|
193
|
+
logout, // () => Promise<void> - ログアウト
|
|
194
|
+
switchOrganization, // (id: string) => void - 組織切り替え
|
|
195
|
+
refresh, // () => Promise<void> - セッション更新
|
|
196
|
+
} = useFFID()
|
|
197
|
+
```
|
|
198
|
+
|
|
199
|
+
### useSubscription()
|
|
200
|
+
|
|
201
|
+
契約情報を取得するフック。
|
|
202
|
+
|
|
203
|
+
```tsx
|
|
204
|
+
const {
|
|
205
|
+
subscription, // FFIDSubscription | null - 現在のサブスクリプション
|
|
206
|
+
planCode, // string | null - プランコード
|
|
207
|
+
isActive, // boolean - アクティブ契約
|
|
208
|
+
isTrialing, // boolean - トライアル中
|
|
209
|
+
isCanceled, // boolean - 解約済み
|
|
210
|
+
hasPlan, // (plans: string | string[]) => boolean - プラン確認
|
|
211
|
+
hasAccess, // () => boolean - アクセス権確認
|
|
212
|
+
} = useSubscription()
|
|
213
|
+
```
|
|
214
|
+
|
|
215
|
+
### withSubscription()
|
|
216
|
+
|
|
217
|
+
サブスクリプション確認HOC。
|
|
218
|
+
|
|
219
|
+
```tsx
|
|
220
|
+
const PremiumFeature = withSubscription(MyComponent, {
|
|
221
|
+
plans: ['pro', 'enterprise'],
|
|
222
|
+
fallback: <UpgradePrompt />,
|
|
223
|
+
loading: <Spinner />,
|
|
224
|
+
})
|
|
225
|
+
```
|
|
226
|
+
|
|
227
|
+
## 型定義
|
|
228
|
+
|
|
229
|
+
```typescript
|
|
230
|
+
interface FFIDUser {
|
|
231
|
+
id: string
|
|
232
|
+
email: string
|
|
233
|
+
displayName: string | null
|
|
234
|
+
avatarUrl: string | null
|
|
235
|
+
locale: string | null
|
|
236
|
+
timezone: string | null
|
|
237
|
+
createdAt: string
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
interface FFIDOrganization {
|
|
241
|
+
id: string
|
|
242
|
+
name: string
|
|
243
|
+
slug: string
|
|
244
|
+
role: 'owner' | 'admin' | 'member'
|
|
245
|
+
status: 'active' | 'invited' | 'suspended'
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
interface FFIDSubscription {
|
|
249
|
+
id: string
|
|
250
|
+
serviceCode: string
|
|
251
|
+
serviceName: string
|
|
252
|
+
planCode: string
|
|
253
|
+
planName: string
|
|
254
|
+
status: 'trialing' | 'active' | 'past_due' | 'canceled' | 'paused'
|
|
255
|
+
currentPeriodEnd: string | null
|
|
256
|
+
}
|
|
257
|
+
```
|
|
258
|
+
|
|
259
|
+
## 環境変数
|
|
260
|
+
|
|
261
|
+
オプションで環境変数を使用してデフォルト設定を上書きできます：
|
|
262
|
+
|
|
263
|
+
```bash
|
|
264
|
+
NEXT_PUBLIC_FFID_API_URL=https://id.feelflow.co.jp
|
|
265
|
+
NEXT_PUBLIC_FFID_SERVICE_CODE=chatbot
|
|
266
|
+
```
|
|
267
|
+
|
|
268
|
+
## ライセンス
|
|
269
|
+
|
|
270
|
+
MIT
|