PM Common UI

Shared React component library for PM projects.

Components

Navigation & Menu Components

• DropdownMenu - Production-ready dropdown with keyboard navigation
  • Smart positioning (auto-flip, auto-shift)
  • Multiple triggers (click, hover, right-click)
  • Nested submenus
  • Icons, descriptions, shortcuts, badges
  • WCAG 2.1 AA+ accessible
• DropdownButton - Button with dropdown menu
• ActionsMenu - Three-dot actions menu
• ContextMenu - Right-click context menu

Scheduler Components

• AppointmentScheduler - Professional salon/spa booking system
  • DayView - Time-based grid with staff columns
  • WeekView - 7-day staff scheduling grid
  • MonthView - Calendar month view
  • SharedSchedulerHeader - Common navigation header
  • DetailedStatsModal - Analytics dashboard

Core UI Components

• Button, Input, Select, Textarea
• Popup, Toast, Snackbar
• Calendar, DatePicker, TimePicker
• Form, FormField
• Card, List, Page
• Tab, Segmented, Stepper
• and many more...

Installation

Local Development (Link Method)

\\ash

In pm-common-ui directory

npm install npm link

In your app directory (salon-scheduler-app or flowycart)

npm link @pm/common-ui \\

Direct Path Import

Update your app's package.json: \\json { "dependencies": { "@pm/common-ui": "file:../pm-common-ui" } } \\

Usage

1. Import Design System (Required)

// In your main entry file (main.tsx or App.tsx)
import '@pm/common-ui/index.css';  // Includes all design tokens

2. Use Components

// Import components
import { Button, DropdownMenu, DropdownButton } from '@pm/common-ui';
import { AppointmentScheduler } from '@pm/common-ui/components/scheduler/AppointmentScheduler';
import { Card } from '@pm/common-ui';

// Use in your app
function MyApp() {
  const menuItems = [
    { id: '1', label: 'Profile', icon: <Icon name="AccountCircle" /> },
    { id: '2', label: 'Settings', icon: <Icon name="Settings" /> },
    { id: '3', label: 'Logout', icon: <Icon name="Logout" />, danger: true },
  ];
  
  return (
    <div>
      <Button>Click Me</Button>
      <DropdownButton buttonLabel="Menu" items={menuItems} />
      <Card title="Hello" content="Using design tokens!" />
      <AppointmentScheduler />
    </div>
  );
}

3. Design Tokens Only (Optional)

// If you only need design tokens without components
import '@pm/common-ui/styles/design-tokens.css';

See DESIGN_SYSTEM.md for complete design token documentation.

## Development

\\\ash
npm install
npm run dev       # Start development server
npm run build     # Build library
npm run type-check # Type checking
\\\

## Structure

\\\
pm-common-ui/
 src/
    components/     # All UI components
       button/
       input/
       scheduler/
       ...
    shared/         # Shared types and utilities
    util/          # Utility functions
 package.json
 README.md
\\\

## Projects Using This Library

1. **salon-scheduler-app** - Dedicated salon appointment scheduler
2. **flowycart-ecommerce-react-redux-master** - Main e-commerce platform with scheduler

## 📄 License

MIT License - Copyright (c) 2025 PM Team

See [LICENSE](./LICENSE) file for details.

### Third-Party Licenses

This project uses several open-source packages. See [NOTICE](./NOTICE) file for complete attribution and license information for all dependencies.

All dependencies are MIT-licensed and compatible with commercial use