@anker-in/ui

React UI components library for demo room booking system with full TypeScript support.

Features

• 🎨 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

Installation

npm install @anker-in/ui
# or
pnpm add @anker-in/ui
# or
yarn add @anker-in/ui

Required Dependencies

The package requires the following peer dependencies:

pnpm add react react-dom antd antd-mobile swiper dayjs clsx tailwind-merge

Quick Start

1. Import Styles

import '@anker-in/ui/styles.css'

2. Use Components

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'
  }}
/>

Multi-language Support

All components support customizable text through the pageData prop:

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 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

// From @anker-in/ui
export type {
  BookingFormPageData,
  BookingSuccessPageData,
  BookingFormProps,
  BookingSuccessProps,
  QuestionnaireFormProps
}

// From @anker-in/ui/demo-room
export type {
  DemoRoomPageData,
  DemoRoomProps
}

API Utilities

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:

module.exports = {
  transpilePackages: ['@anker-in/ui'],
}

Documentation

• USAGE_EXAMPLE.md - Complete usage examples and integration guide
• PAGEDATA_COMPLETE_GUIDE.md - Full pageData configuration reference
• 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

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

# Install dependencies
pnpm install

# Build the package
pnpm build

# Type check
pnpm type-check

# Lint
pnpm lint

Version

Current version: 0.1.6

License

ISC