@anker-in/ui 0.1.5 → 0.1.8

package/README.md

@@ -1,55 +1,187 @@
-# @anker-dtc/ui
+# @anker-in/ui
 
-React UI components with Tailwind CSS for Anker DTC projects.
+React UI components library for demo room booking system with full TypeScript support.
 
-## Installation
+## Features
 
-### For Production (via npm/pnpm)
+- 🎨 **Three Main Components**: DemoRoom, BookingForm, and BookingSuccess
+- 🌍 **Multi-language Support**: Configurable text through pageData props
+- 📱 **Responsive Design**: Works on desktop and mobile devices
+- 🎯 **TypeScript**: Full type safety with TypeScript
+- 🎨 **Tailwind CSS**: Styled with Tailwind CSS
+- 🔧 **Customizable**: Easy to customize through props
 
-When installing from npm registry, all dependencies will be automatically installed:
+## Installation
 
 ```bash
-pnpm add @anker-dtc/ui
+npm install @anker-in/ui
+# or
+pnpm add @anker-in/ui
+# or
+yarn add @anker-in/ui
 ```
 
-### For Development (via pnpm link)
+### Required Dependencies
 
-When using `pnpm link` for local development, you need to manually install the required dependencies in your Next.js project:
+The package requires the following peer dependencies:
 
 ```bash
-# Required dependencies
-pnpm add antd antd-mobile swiper dayjs clsx tailwind-merge @anker-in/headless-ui
-
-# Also install dom-helpers if you encounter Module not found errors
-pnpm add dom-helpers
+pnpm add react react-dom antd antd-mobile swiper dayjs clsx tailwind-merge
 ```
 
-## Usage
+## Quick Start
+
+### 1. Import Styles
+
+```tsx
+import '@anker-in/ui/styles.css'
+```
 
-### Import Components
+### 2. Use Components
 
 ```tsx
-import { DemoRoom } from '@anker-dtc/ui/demo-room'
-import '@anker-dtc/ui/styles.css'
+import { DemoRoom, BookingForm, BookingSuccess } from '@anker-in/ui'
+import type { DemoRoomPageData, BookingFormPageData, BookingSuccessPageData } from '@anker-in/ui'
+
+// Demo room list page
+<DemoRoom
+  apiConfig={{
+    baseUrl: '/api/demoroom',
+    locale: 'en-US',
+    apiKey: 'your-api-key'
+  }}
+  teamCode='your-team-code'
+  onSchedule={(code) => {
+    window.location.href = `/book?code=${code}`
+  }}
+/>
+
+// Booking form page
+<BookingForm
+  apiConfig={{
+    baseUrl: '/api/demoroom',
+    locale: 'en-US',
+    apiKey: 'your-api-key'
+  }}
+  demoRoomCode={code}
+  handleBookingSuccess={(token) => {
+    window.location.href = `/result?token=${token}`
+  }}
+/>
+
+// Booking success page
+<BookingSuccess
+  apiConfig={{
+    baseUrl: '/api/demoroom',
+    locale: 'en-US',
+    apiKey: 'your-api-key'
+  }}
+  token={token}
+  onScheduleAgain={() => {
+    window.location.href = '/demoroom'
+  }}
+/>
 ```
 
-### Next.js Configuration
+## Multi-language Support
+
+All components support customizable text through the `pageData` prop:
 
-Add `@anker-dtc/ui` to `transpilePackages` in your `next.config.js`:
+```typescript
+import type { DemoRoomPageData } from '@anker-in/ui/demo-room'
+
+const pageData: DemoRoomPageData = {
+  title: '查找附近的展厅',
+  locationFilter: {
+    country: '国家',
+    state: '州/省',
+    city: '城市'
+  },
+  studioCard: {
+    scheduleNow: '立即预约',
+    available: '可预约时间'
+  }
+}
+
+<DemoRoom pageData={pageData} {...otherProps} />
+```
+
+See [PAGEDATA_COMPLETE_GUIDE.md](./PAGEDATA_COMPLETE_GUIDE.md) for complete configuration examples.
+
+## Available Exports
+
+### Components
+
+- `DemoRoom` - Demo room list with map and location filtering
+- `BookingForm` - Booking form with calendar and questionnaire
+- `BookingSuccess` - Booking confirmation and cancellation
+- `QuestionnaireForm` - Standalone questionnaire form
+
+### Types
+
+```typescript
+// From @anker-in/ui
+export type {
+  BookingFormPageData,
+  BookingSuccessPageData,
+  BookingFormProps,
+  BookingSuccessProps,
+  QuestionnaireFormProps
+}
+
+// From @anker-in/ui/demo-room
+export type {
+  DemoRoomPageData,
+  DemoRoomProps
+}
+```
+
+### API Utilities
+
+```typescript
+import { createDemoRoomApi } from '@anker-in/ui'
+
+const apiClient = createDemoRoomApi({
+  baseUrl: 'https://api.example.com',
+  apiKey: 'your-api-key',
+  locale: 'en-US'
+})
+```
+
+## Next.js Configuration
+
+Add the package to `transpilePackages` in `next.config.js`:
 
 ```javascript
 module.exports = {
-  transpilePackages: ['@anker-dtc/ui'],
-  // ... other config
+  transpilePackages: ['@anker-in/ui'],
 }
 ```
 
-## Available Exports
+## Documentation
+
+- [USAGE_EXAMPLE.md](./USAGE_EXAMPLE.md) - Complete usage examples and integration guide
+- [PAGEDATA_COMPLETE_GUIDE.md](./PAGEDATA_COMPLETE_GUIDE.md) - Full pageData configuration reference
+- [CHANGELOG_v0.1.6.md](./CHANGELOG_v0.1.6.md) - Latest version changes
+
+## Component Structure
+
+### DemoRoom Page
+- Main component with room list and map
+- Location filtering sidebar/modal
+- Studio cards with distance and availability
+- Google Maps integration
 
-- `@anker-dtc/ui` - Main components
-- `@anker-dtc/ui/demo-room` - Demo room components
-- `@anker-dtc/ui/theme` - Theme configuration
-- `@anker-dtc/ui/styles.css` - CSS styles
+### BookingForm Page
+- Demo room details display
+- Calendar and time slot selection
+- Questionnaire form with validation
+- HTML support in agreement checkboxes
+
+### BookingSuccess Page
+- Booking confirmation details
+- Cancellation functionality with confirmation dialog
+- Google Maps integration
 
 ## Development
 
@@ -60,9 +192,6 @@ pnpm install
 # Build the package
 pnpm build
 
-# Run tests
-pnpm test
-
 # Type check
 pnpm type-check
 
@@ -70,14 +199,10 @@ pnpm type-check
 pnpm lint
 ```
 
-## Link for Local Development
+## Version
 
-```bash
-# In this package directory
-pnpm link --global
+Current version: **0.1.6**
 
-# In your Next.js project
-pnpm link --global @anker-dtc/ui
+## License
 
-# Don't forget to install the required dependencies (see above)
-```
+ISC

package/dist/DemoRoom-Dx3PluHP.d.mts

@@ -0,0 +1,85 @@
+import React from 'react';
+
+/**
+ * DemoRoom 页面的可配置数据类型
+ */
+interface DemoRoomPageData {
+    /**
+     * 页面标题
+     */
+    title?: string;
+    /**
+     * 加载状态文案
+     */
+    loadingText?: string;
+    /**
+     * 加载失败文案
+     */
+    errorTitle?: string;
+    /**
+     * 位置筛选相关文案
+     */
+    locationFilter?: {
+        allLocations?: string;
+        clear?: string;
+        country?: string;
+        state?: string;
+        city?: string;
+        noStudiosFound?: string;
+    };
+    /**
+     * 工作室卡片相关文案
+     */
+    studioCard?: {
+        scheduleNow?: string;
+        available?: string;
+        away?: string;
+    };
+    /**
+     * 地图相关文案
+     */
+    map?: {
+        apiKeyRequired?: string;
+        loadingMap?: string;
+        scheduleNow?: string;
+        available?: string;
+    };
+    /**
+     * 其他配置
+     */
+    defaultCountry?: string;
+    noAvailableTime?: string;
+}
+
+interface DemoRoomProps extends React.HTMLAttributes<HTMLDivElement> {
+    layoutClassName?: string;
+    /**
+     * 谷歌地图 API Key
+     */
+    googleMapsApiKey?: string;
+    /**
+     * API 配置
+     */
+    apiConfig: {
+        baseUrl: string;
+        apiKey: string;
+        locale?: string;
+    };
+    /**
+     * 团队编码或品牌站点（二选一）
+     */
+    teamCode?: string;
+    brandWebsite?: string;
+    /**
+     * Callback when user clicks "Schedule Now" button
+     * @param demoRoomCode - The demo room code
+     */
+    onSchedule?: (demoRoomCode: string) => void;
+    /**
+     * 页面可配置数据（文案、图标等）
+     */
+    pageData?: DemoRoomPageData;
+}
+declare const DemoRoom: React.FC<DemoRoomProps>;
+
+export { DemoRoom as D, type DemoRoomProps as a, type DemoRoomPageData as b };

package/dist/DemoRoom-Dx3PluHP.d.ts

@@ -0,0 +1,85 @@
+import React from 'react';
+
+/**
+ * DemoRoom 页面的可配置数据类型
+ */
+interface DemoRoomPageData {
+    /**
+     * 页面标题
+     */
+    title?: string;
+    /**
+     * 加载状态文案
+     */
+    loadingText?: string;
+    /**
+     * 加载失败文案
+     */
+    errorTitle?: string;
+    /**
+     * 位置筛选相关文案
+     */
+    locationFilter?: {
+        allLocations?: string;
+        clear?: string;
+        country?: string;
+        state?: string;
+        city?: string;
+        noStudiosFound?: string;
+    };
+    /**
+     * 工作室卡片相关文案
+     */
+    studioCard?: {
+        scheduleNow?: string;
+        available?: string;
+        away?: string;
+    };
+    /**
+     * 地图相关文案
+     */
+    map?: {
+        apiKeyRequired?: string;
+        loadingMap?: string;
+        scheduleNow?: string;
+        available?: string;
+    };
+    /**
+     * 其他配置
+     */
+    defaultCountry?: string;
+    noAvailableTime?: string;
+}
+
+interface DemoRoomProps extends React.HTMLAttributes<HTMLDivElement> {
+    layoutClassName?: string;
+    /**
+     * 谷歌地图 API Key
+     */
+    googleMapsApiKey?: string;
+    /**
+     * API 配置
+     */
+    apiConfig: {
+        baseUrl: string;
+        apiKey: string;
+        locale?: string;
+    };
+    /**
+     * 团队编码或品牌站点（二选一）
+     */
+    teamCode?: string;
+    brandWebsite?: string;
+    /**
+     * Callback when user clicks "Schedule Now" button
+     * @param demoRoomCode - The demo room code
+     */
+    onSchedule?: (demoRoomCode: string) => void;
+    /**
+     * 页面可配置数据（文案、图标等）
+     */
+    pageData?: DemoRoomPageData;
+}
+declare const DemoRoom: React.FC<DemoRoomProps>;
+
+export { DemoRoom as D, type DemoRoomProps as a, type DemoRoomPageData as b };

package/dist/demo-room.d.mts

@@ -1,4 +1,4 @@
-export { D as DemoRoom, a as DemoRoomProps } from './DemoRoom-CZyrsxWe.mjs';
+export { D as DemoRoom, b as DemoRoomPageData, a as DemoRoomProps } from './DemoRoom-Dx3PluHP.mjs';
 import React from 'react';
 
 interface EventCardButton {
@@ -103,6 +103,15 @@ interface StudioMapProps extends React.HTMLAttributes<HTMLDivElement> {
      * 点击 Schedule Now 的回调
      */
     onSchedule?: (demoRoomCode: string) => void;
+    /**
+     * 可配置的文案数据
+     */
+    pageData?: {
+        apiKeyRequired?: string;
+        loadingMap?: string;
+        scheduleNow?: string;
+        available?: string;
+    };
 }
 declare const StudioMap: React.FC<StudioMapProps>;
 
@@ -139,6 +148,14 @@ interface StudioCardProps extends React.HTMLAttributes<HTMLDivElement> {
      * Callback when "Schedule Now" is clicked, receives demo room code
      */
     onSchedule?: (code: string) => void;
+    /**
+     * 可配置的文案数据
+     */
+    pageData?: {
+        scheduleNow?: string;
+        available?: string;
+        away?: string;
+    };
 }
 declare const StudioCard: React.FC<StudioCardProps>;
 

package/dist/demo-room.d.ts

@@ -1,4 +1,4 @@
-export { D as DemoRoom, a as DemoRoomProps } from './DemoRoom-CZyrsxWe.js';
+export { D as DemoRoom, b as DemoRoomPageData, a as DemoRoomProps } from './DemoRoom-Dx3PluHP.js';
 import React from 'react';
 
 interface EventCardButton {
@@ -103,6 +103,15 @@ interface StudioMapProps extends React.HTMLAttributes<HTMLDivElement> {
      * 点击 Schedule Now 的回调
      */
     onSchedule?: (demoRoomCode: string) => void;
+    /**
+     * 可配置的文案数据
+     */
+    pageData?: {
+        apiKeyRequired?: string;
+        loadingMap?: string;
+        scheduleNow?: string;
+        available?: string;
+    };
 }
 declare const StudioMap: React.FC<StudioMapProps>;
 
@@ -139,6 +148,14 @@ interface StudioCardProps extends React.HTMLAttributes<HTMLDivElement> {
      * Callback when "Schedule Now" is clicked, receives demo room code
      */
     onSchedule?: (code: string) => void;
+    /**
+     * 可配置的文案数据
+     */
+    pageData?: {
+        scheduleNow?: string;
+        available?: string;
+        away?: string;
+    };
 }
 declare const StudioCard: React.FC<StudioCardProps>;