@taskon/widget-react 0.0.1-beta.2 → 0.0.1-beta.3

package/README.md

@@ -93,7 +93,7 @@ const YourApp = () => {
     <div>
       {userId && <p>TaskOn User ID: {userId}</p>}
       {/* Theme configured in TaskOn Dashboard */}
-      <QuestWidget configId="cfg_abc123" />
+      <QuestWidget widgetId={123} />
     </div>
   );
 };
@@ -107,13 +107,13 @@ const YourApp = () => {
 │  Purpose: Authentication only                            │
 │                                                          │
 │  ┌─ Mode A: Cloud Config ──────────────────────────────┐ │
-│  │  <QuestWidget configId="cfg_abc123" />              │ │
+│  │  <QuestWidget widgetId={123} />                     │ │
 │  │  → Theme from TaskOn cloud                          │ │
 │  └─────────────────────────────────────────────────────┘ │
 │                                                          │
 │  ┌─ Mode B: Local Theme ───────────────────────────────┐ │
 │  │  <ThemeProvider theme={{ mode: 'dark' }}>           │ │
-│  │    <QuestWidget />  /* no configId */               │ │
+│  │    <QuestWidget />  /* no widgetId */               │ │
 │  │  </ThemeProvider>                                   │ │
 │  └─────────────────────────────────────────────────────┘ │
 └──────────────────────────────────────────────────────────┘
@@ -123,8 +123,8 @@ const YourApp = () => {
 
 | Mode                  | Theme Source                         |
 | --------------------- | ------------------------------------ |
-| `configId` provided | Cloud config (ThemeProvider ignored) |
-| No `configId`       | ThemeProvider or default theme       |
+| `widgetId` provided | Cloud config (ThemeProvider ignored) |
+| No `widgetId`       | ThemeProvider or default theme       |
 
 ## Security
 
@@ -239,7 +239,7 @@ const App = () => {
         <option value="ko">한국어</option>
         <option value="ja">日本語</option>
       </select>
-      <QuestWidget configId="cfg_abc123" />
+      <QuestWidget widgetId={123} />
     </TaskOnProvider>
   );
 };
@@ -268,6 +268,9 @@ interface TaskOnThemeConfig {
   // Theme mode
   mode?: "light" | "dark" | "auto"; // default: 'light'
 
+  // Theme mode strategy (mainly for cloud dual mode)
+  modeStrategy?: "auto" | "toggle"; // default: 'auto'
+
   // Compact mode
   compact?: boolean; // default: false
 
@@ -316,6 +319,8 @@ interface MapToken {
   colorTextSecondary?: string;
   colorTextTertiary?: string;
   colorTextDisabled?: string;
+  colorLink?: string;
+  colorTextOnPrimary?: string;
 
   // Border
   colorBorder?: string;
@@ -341,6 +346,28 @@ interface MapToken {
 }
 ```
 
+### themeMode Override
+
+SDK can control theme mode per widget using `themeMode`:
+
+```tsx
+<QuestWidget widgetId={123} themeMode="light" />
+<QuestWidget widgetId={123} themeMode="dark" />
+<QuestWidget widgetId={123} themeMode="auto" />
+```
+
+`themeMode` is supported by:
+
+- `QuestWidget`
+- `CommunityTaskList`
+- `LeaderboardWidget`
+- `UserCenterWidget`
+
+Priority rule:
+
+- `themeMode` (widget prop) has the highest priority when provided.
+- Recommended usage: `dual + toggle` in B-end for clearer mode ownership.
+
 ### Token Priority
 
 ```
@@ -417,19 +444,23 @@ Use `inherit={false}` for completely independent themes:
 
 ### Cloud Configuration
 
-Widgets support cloud configuration via `configId`. Configure in TaskOn Dashboard and load at runtime:
+Widgets support cloud configuration via `widgetId`. Configure in TaskOn Dashboard and load at runtime:
 
 ```tsx
 // Cloud config includes: theme, feature flags, custom texts
-<QuestWidget configId="cfg_abc123" />
+<QuestWidget widgetId={123} />
 ```
 
 ### Widget Props
 
 ```typescript
 interface WidgetProps {
-  // Cloud config ID from TaskOn Dashboard
-  configId?: string;
+  // Cloud widget ID from TaskOn Dashboard
+  widgetId?: number;
+
+  // Manual theme mode override (highest priority when provided)
+  // Recommended usage: pair with cloud dual+toggle for clearer ownership
+  themeMode?: "light" | "dark" | "auto";
 
   // Custom class names for widget parts
   classNames?: {
@@ -458,7 +489,7 @@ Widgets support fine-grained styling via `classNames` and `styles` props:
 ```tsx
 // Using classNames
 <QuestWidget
-  configId="cfg_abc123"
+  widgetId={123}
   classNames={{
     root: 'my-quest-widget',
     header: 'my-quest-header',
@@ -468,7 +499,7 @@ Widgets support fine-grained styling via `classNames` and `styles` props:
 
 // Using inline styles
 <QuestWidget
-  configId="cfg_abc123"
+  widgetId={123}
   styles={{
     root: { maxWidth: 400 },
     header: { borderBottom: '1px solid #eee' },
@@ -478,7 +509,7 @@ Widgets support fine-grained styling via `classNames` and `styles` props:
 
 // Combining both
 <QuestWidget
-  configId="cfg_abc123"
+  widgetId={123}
   classNames={{ root: 'custom-widget' }}
   styles={{ header: { backgroundColor: 'transparent' } }}
 />
@@ -491,8 +522,8 @@ Each widget documents its available parts in its own API reference.
 ```tsx
 // Example 1: Using cloud config (theme from Dashboard)
 <TaskOnProvider config={{ apiKey: 'your-api-key' }}>
-  <QuestWidget configId="cfg_abc123" />
-  <TaskWidget configId="cfg_xyz789" />
+  <QuestWidget widgetId={123} />
+  <TaskWidget widgetId={456} />
 </TaskOnProvider>
 
 // Example 2: Using local theme (no cloud config)
@@ -517,7 +548,7 @@ Each widget documents its available parts in its own API reference.
 // Example 4: Mixed - some with cloud config, some with local theme
 <TaskOnProvider config={{ apiKey: 'your-api-key' }}>
   {/* Cloud config */}
-  <QuestWidget configId="cfg_abc123" />
+  <QuestWidget widgetId={123} />
 
   {/* Local theme */}
   <ThemeProvider theme={{ mode: 'dark' }}>
@@ -1060,6 +1091,14 @@ Get your WalletConnect Project ID at https://cloud.walletconnect.com
 
 If not configured, the WalletConnect option will be disabled in the wallet binding dialog.
 
+## Limitations
+
+- Quest Widget does not support opening pre-task targets from `CommunityPreTask` eligibility.
+  - In eligibility rows, pre-task names are displayed as plain text (non-clickable).
+  - Community names are hidden for `CommunityPreTask`, `CommunityUserPoints`, and `CommunityUserLevel` rows.
+  - `DiscordRole` keeps original `in {community}` display and uses `server_url` as link when available.
+- CommunityTask eligibility `CommunityPreTask` supports clicking task names to switch task dialogs.
+
 ## License
 
 MIT