@anker-in/ui 0.1.0

package/README.md

@@ -0,0 +1,83 @@
+# @anker-dtc/ui
+
+React UI components with Tailwind CSS for Anker DTC projects.
+
+## Installation
+
+### For Production (via npm/pnpm)
+
+When installing from npm registry, all dependencies will be automatically installed:
+
+```bash
+pnpm add @anker-dtc/ui
+```
+
+### For Development (via pnpm link)
+
+When using `pnpm link` for local development, you need to manually install the required dependencies in your Next.js project:
+
+```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
+```
+
+## Usage
+
+### Import Components
+
+```tsx
+import { DemoRoom } from '@anker-dtc/ui/demo-room'
+import '@anker-dtc/ui/styles.css'
+```
+
+### Next.js Configuration
+
+Add `@anker-dtc/ui` to `transpilePackages` in your `next.config.js`:
+
+```javascript
+module.exports = {
+  transpilePackages: ['@anker-dtc/ui'],
+  // ... other config
+}
+```
+
+## Available Exports
+
+- `@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
+
+## Development
+
+```bash
+# Install dependencies
+pnpm install
+
+# Build the package
+pnpm build
+
+# Run tests
+pnpm test
+
+# Type check
+pnpm type-check
+
+# Lint
+pnpm lint
+```
+
+## Link for Local Development
+
+```bash
+# In this package directory
+pnpm link --global
+
+# In your Next.js project
+pnpm link --global @anker-dtc/ui
+
+# Don't forget to install the required dependencies (see above)
+```

package/dist/DemoRoom-CZyrsxWe.d.mts

@@ -0,0 +1,30 @@
+import React from 'react';
+
+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;
+}
+declare const DemoRoom: React.FC<DemoRoomProps>;
+
+export { DemoRoom as D, type DemoRoomProps as a };

package/dist/DemoRoom-CZyrsxWe.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+
+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;
+}
+declare const DemoRoom: React.FC<DemoRoomProps>;
+
+export { DemoRoom as D, type DemoRoomProps as a };

package/dist/demo-room.css

@@ -0,0 +1,33 @@
+/* src/components/DemoRoom/components/RoomsList.module.css */
+.antdMobileScope {
+  all: unset;
+  display: block;
+  position: absolute;
+  box-sizing: border-box;
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    "Helvetica Neue",
+    Arial,
+    sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #333;
+  --adm-color-primary: #1677ff;
+  --adm-color-text: #333333;
+  --adm-font-size-main: 14px;
+}
+.antdMobileScope *,
+.antdMobileScope *::before,
+.antdMobileScope *::after {
+  box-sizing: border-box;
+}
+.antd-mobile-isolated-container .antdMobileScope :not([class*=adm-]) {
+  all: unset;
+}
+.antd-mobile-isolated-container .antdMobileScope [class*=adm-] {
+  all: revert;
+}
+/*# sourceMappingURL=demo-room.css.map */

package/dist/demo-room.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DemoRoom/components/RoomsList.module.css"],"sourcesContent":["/* antd-mobile 样式隔离 - 使用更强的隔离策略 */\n.antdMobileScope {\n  /* 重置所有继承样式，但保持布局相关属性 */\n  all: unset;\n\n  /* 恢复必要的属性 */\n  display: block;\n  position: absolute;\n  box-sizing: border-box;\n\n  /* 阻止继承字体样式 */\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n  font-size: 14px;\n  line-height: 1.5;\n  color: #333;\n\n  /* 重置 CSS 变量影响 */\n  --adm-color-primary: #1677ff;\n  --adm-color-text: #333333;\n  --adm-font-size-main: 14px;\n}\n\n/* 确保 antd-mobile 组件内部样式正常工作 */\n.antdMobileScope *,\n.antdMobileScope *::before,\n.antdMobileScope *::after {\n  box-sizing: border-box;\n}\n\n/* 阻止全局样式继承 */\n.antd-mobile-isolated-container .antdMobileScope :not([class*=\"adm-\"]) {\n  all: unset;\n}\n\n/* 保持 antd-mobile 组件样式 */\n.antd-mobile-isolated-container .antdMobileScope [class*=\"adm-\"] {\n  all: revert;\n}\n"],"mappings":";AACA,CAAC;AAEC,OAAK;AAGL,WAAS;AACT,YAAU;AACV,cAAY;AAGZ;AAAA,IAAa,aAAa;AAAA,IAAE,kBAAkB;AAAA,IAAE,UAAU;AAAA,IAAE,MAAM;AAAA,IAAE,gBAAgB;AAAA,IAAE,KAAK;AAAA,IAAE;AAC7F,aAAW;AACX,eAAa;AACb,SAAO;AAGP,uBAAqB;AACrB,oBAAkB;AAClB,wBAAsB;AACxB;AAGA,CAtBC,gBAsBgB;AACjB,CAvBC,gBAuBgB,CAAC;AAClB,CAxBC,gBAwBgB,CAAC;AAChB,cAAY;AACd;AAGA,CAAC,+BAA+B,CA7B/B,gBA6BgD,KAAK,CAAC;AACrD,OAAK;AACP;AAGA,CALC,+BAK+B,CAlC/B,gBAkCgD,CAAC;AAChD,OAAK;AACP;","names":[]}

package/dist/demo-room.d.mts

@@ -0,0 +1,198 @@
+export { D as DemoRoom, a as DemoRoomProps } from './DemoRoom-CZyrsxWe.mjs';
+import React from 'react';
+
+interface HelpNavTab {
+    id: string;
+    label: string;
+    showNewTag?: boolean;
+}
+interface HelpNavProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * 标签页数组
+     */
+    tabs?: HelpNavTab[];
+    /**
+     * 当前激活的标签页 ID
+     */
+    activeTabId?: string;
+    /**
+     * 标签页切换回调
+     */
+    onTabChange?: (tabId: string) => void;
+    /**
+     * "New" 标签的背景色
+     * @default "#3ADB67"
+     */
+    newTagColor?: string;
+    /**
+     * 激活标签的底部边框色
+     * @default "#3ADB67"
+     */
+    activeBorderColor?: string;
+}
+declare const HelpNav: React.FC<HelpNavProps>;
+
+interface EventCardButton {
+    label: string;
+    variant?: 'primary' | 'secondary';
+    onClick?: () => void;
+}
+interface EventCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Event title
+     */
+    title: string;
+    /**
+     * Event description
+     */
+    description?: string;
+    /**
+     * Background image URL
+     */
+    backgroundImage?: string;
+    aspectRatio?: string;
+    /**
+     * Card variant - determines styling
+     */
+    variant?: 'large' | 'medium' | 'product';
+    /**
+     * Buttons/actions for the card
+     */
+    buttons?: EventCardButton[];
+    /**
+     * Additional subtitle (for product variant)
+     */
+    subtitle?: string;
+}
+declare const EventCard: React.FC<EventCardProps>;
+
+interface UpcomingEventsProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Section title
+     * @default "Upcoming Events"
+     */
+    title?: string;
+    /**
+     * Array of event cards to display
+     */
+    events?: EventCardProps[];
+    /**
+     * Show "View More" button
+     * @default true
+     */
+    showViewMore?: boolean;
+    /**
+     * Callback when "View More" is clicked
+     */
+    onViewMore?: () => void;
+}
+declare const UpcomingEvents: React.FC<UpcomingEventsProps>;
+
+interface StudioLocation {
+    id: string;
+    name: string;
+    address: string;
+    city: string;
+    state: string;
+    zipCode: string;
+    country: string;
+    lat: number;
+    lng: number;
+    availableTime?: string;
+    euifyMakeModel?: string;
+}
+interface StudioMapProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * 谷歌地图 API Key
+     */
+    googleMapsApiKey: string;
+    /**
+     * 工作室位置数据
+     */
+    locations?: StudioLocation[];
+    /**
+     * 默认中心点
+     */
+    defaultCenter?: {
+        lat: number;
+        lng: number;
+    };
+    /**
+     * 默认缩放级别
+     */
+    defaultZoom?: number;
+    /**
+     * 地图高度
+     */
+    mapHeight?: string;
+    /**
+     * 点击 Schedule Now 的回调
+     */
+    onSchedule?: (location: StudioLocation) => void;
+}
+declare const StudioMap: React.FC<StudioMapProps>;
+
+interface StudioCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Demo room code (unique identifier)
+     */
+    code: string;
+    /**
+     * Studio name
+     */
+    name: string;
+    /**
+     * Available time
+     */
+    availableTime: string;
+    /**
+     * Full address
+     */
+    address: string;
+    city: string;
+    state: string;
+    zipCode: string;
+    country?: string;
+    /**
+     * Available euifyMake models
+     */
+    euifyMakeModel: string;
+    /**
+     * Callback when "Schedule Now" is clicked, receives demo room code
+     */
+    onSchedule?: (code: string) => void;
+}
+declare const StudioCard: React.FC<StudioCardProps>;
+
+interface EasyStep {
+    /**
+     * Step number (1-4)
+     */
+    stepNumber: number;
+    /**
+     * Step title
+     */
+    title: string;
+    /**
+     * Step description
+     */
+    description: string;
+    /**
+     * Map image URL for this step
+     */
+    mapImage: string;
+}
+interface EasyStepsProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Section title
+     * @default "Schedule in 4 Easy Steps"
+     */
+    title?: string;
+    /**
+     * Array of steps to display
+     */
+    steps?: EasyStep[];
+}
+declare const EasySteps: React.FC<EasyStepsProps>;
+
+export { type EasyStep, EasySteps, type EasyStepsProps, EventCard, type EventCardButton, type EventCardProps, HelpNav, type HelpNavProps, type HelpNavTab, StudioCard, type StudioCardProps, type StudioLocation, StudioMap, type StudioMapProps, UpcomingEvents, type UpcomingEventsProps };

package/dist/demo-room.d.ts

@@ -0,0 +1,198 @@
+export { D as DemoRoom, a as DemoRoomProps } from './DemoRoom-CZyrsxWe.js';
+import React from 'react';
+
+interface HelpNavTab {
+    id: string;
+    label: string;
+    showNewTag?: boolean;
+}
+interface HelpNavProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * 标签页数组
+     */
+    tabs?: HelpNavTab[];
+    /**
+     * 当前激活的标签页 ID
+     */
+    activeTabId?: string;
+    /**
+     * 标签页切换回调
+     */
+    onTabChange?: (tabId: string) => void;
+    /**
+     * "New" 标签的背景色
+     * @default "#3ADB67"
+     */
+    newTagColor?: string;
+    /**
+     * 激活标签的底部边框色
+     * @default "#3ADB67"
+     */
+    activeBorderColor?: string;
+}
+declare const HelpNav: React.FC<HelpNavProps>;
+
+interface EventCardButton {
+    label: string;
+    variant?: 'primary' | 'secondary';
+    onClick?: () => void;
+}
+interface EventCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Event title
+     */
+    title: string;
+    /**
+     * Event description
+     */
+    description?: string;
+    /**
+     * Background image URL
+     */
+    backgroundImage?: string;
+    aspectRatio?: string;
+    /**
+     * Card variant - determines styling
+     */
+    variant?: 'large' | 'medium' | 'product';
+    /**
+     * Buttons/actions for the card
+     */
+    buttons?: EventCardButton[];
+    /**
+     * Additional subtitle (for product variant)
+     */
+    subtitle?: string;
+}
+declare const EventCard: React.FC<EventCardProps>;
+
+interface UpcomingEventsProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Section title
+     * @default "Upcoming Events"
+     */
+    title?: string;
+    /**
+     * Array of event cards to display
+     */
+    events?: EventCardProps[];
+    /**
+     * Show "View More" button
+     * @default true
+     */
+    showViewMore?: boolean;
+    /**
+     * Callback when "View More" is clicked
+     */
+    onViewMore?: () => void;
+}
+declare const UpcomingEvents: React.FC<UpcomingEventsProps>;
+
+interface StudioLocation {
+    id: string;
+    name: string;
+    address: string;
+    city: string;
+    state: string;
+    zipCode: string;
+    country: string;
+    lat: number;
+    lng: number;
+    availableTime?: string;
+    euifyMakeModel?: string;
+}
+interface StudioMapProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * 谷歌地图 API Key
+     */
+    googleMapsApiKey: string;
+    /**
+     * 工作室位置数据
+     */
+    locations?: StudioLocation[];
+    /**
+     * 默认中心点
+     */
+    defaultCenter?: {
+        lat: number;
+        lng: number;
+    };
+    /**
+     * 默认缩放级别
+     */
+    defaultZoom?: number;
+    /**
+     * 地图高度
+     */
+    mapHeight?: string;
+    /**
+     * 点击 Schedule Now 的回调
+     */
+    onSchedule?: (location: StudioLocation) => void;
+}
+declare const StudioMap: React.FC<StudioMapProps>;
+
+interface StudioCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Demo room code (unique identifier)
+     */
+    code: string;
+    /**
+     * Studio name
+     */
+    name: string;
+    /**
+     * Available time
+     */
+    availableTime: string;
+    /**
+     * Full address
+     */
+    address: string;
+    city: string;
+    state: string;
+    zipCode: string;
+    country?: string;
+    /**
+     * Available euifyMake models
+     */
+    euifyMakeModel: string;
+    /**
+     * Callback when "Schedule Now" is clicked, receives demo room code
+     */
+    onSchedule?: (code: string) => void;
+}
+declare const StudioCard: React.FC<StudioCardProps>;
+
+interface EasyStep {
+    /**
+     * Step number (1-4)
+     */
+    stepNumber: number;
+    /**
+     * Step title
+     */
+    title: string;
+    /**
+     * Step description
+     */
+    description: string;
+    /**
+     * Map image URL for this step
+     */
+    mapImage: string;
+}
+interface EasyStepsProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Section title
+     * @default "Schedule in 4 Easy Steps"
+     */
+    title?: string;
+    /**
+     * Array of steps to display
+     */
+    steps?: EasyStep[];
+}
+declare const EasySteps: React.FC<EasyStepsProps>;
+
+export { type EasyStep, EasySteps, type EasyStepsProps, EventCard, type EventCardButton, type EventCardProps, HelpNav, type HelpNavProps, type HelpNavTab, StudioCard, type StudioCardProps, type StudioLocation, StudioMap, type StudioMapProps, UpcomingEvents, type UpcomingEventsProps };