@hotelcard/ui 0.0.3 → 0.0.5

package/README.md

@@ -1,283 +1,163 @@
 # @hotelcard/ui
 
-Shared UI component library for HotelCard applications (mobile app and website).
+Shared UI components for HotelCard website and mobile app.
 
-## Quick Start
+[![npm version](https://img.shields.io/npm/v/@hotelcard/ui.svg)](https://www.npmjs.com/package/@hotelcard/ui)
+
+---
 
-### Installation
+## Installation
 
 ```bash
-# In your project
 npm install @hotelcard/ui
-
-# Or with local development (file: protocol)
-"@hotelcard/ui": "file:../hotelcard-monorepo/packages/ui"
-```
-
-### Import Components
-
-```tsx
-import { Button, Badge, Rating, Input, Checkbox, Modal } from '@hotelcard/ui';
-import type { ButtonProps, BadgeProps, InputProps } from '@hotelcard/ui';
+# or
+pnpm add @hotelcard/ui
+# or
+yarn add @hotelcard/ui
 ```
 
-### Import Styles (REQUIRED)
+## Peer Dependencies
 
-You **must** import the CSS in your app's entry point (e.g., `main.tsx`):
+Make sure you have these installed:
 
-```tsx
-// main.tsx or App.tsx
-import '@hotelcard/ui/dist/index.css';
+```bash
+npm install react react-dom
 ```
 
-**If you skip this step, components will render without styling!**
-
 ---
 
-## Available Components
-
-### Button
+## Quick Start
 
 ```tsx
-import { Button } from '@hotelcard/ui';
-
-// Primary button (default)
-<Button onClick={handleClick}>Submit</Button>
+import { Button, Card, Badge } from '@hotelcard/ui';
 
-// Secondary button
-<Button variant="secondary">Cancel</Button>
-
-// Small size
-<Button size="small">Small Button</Button>
-
-// Link style
-<Button variant="link">Learn More</Button>
-
-// With icons
-<Button leftIcon={<SearchIcon />}>Search</Button>
+// Import styles (required - do this once in your app entry)
+import '@hotelcard/ui/dist/index.css';
 
-// Icon-only button
-<Button iconOnly><HeartIcon /></Button>
+function App() {
+  return (
+    <div>
+      <Button variant="primary" onClick={() => alert('Clicked!')}>
+        Book Now
+      </Button>
+
+      <Card
+        image="https://example.com/hotel.jpg"
+        title="Hotel Schweizerhof"
+        location="Luzern, Switzerland"
+        stars={5}
+        price="CHF 195"
+        originalPrice="CHF 390"
+        onClick={() => console.log('Card clicked')}
+      >
+        <Badge color="primary" size="small">-50%</Badge>
+      </Card>
+    </div>
+  );
+}
 ```
 
-**Props:**
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `variant` | `'primary' \| 'secondary' \| 'link'` | `'primary'` | Button style |
-| `size` | `'small' \| 'medium'` | `'medium'` | Button size |
-| `iconOnly` | `boolean` | `false` | Icon-only circular button |
-| `leftIcon` | `ReactNode` | - | Icon on the left |
-| `rightIcon` | `ReactNode` | - | Icon on the right |
-| `disabled` | `boolean` | `false` | Disabled state |
-
-### Badge
+---
 
-```tsx
-import { Badge } from '@hotelcard/ui';
+## Available Components
 
-// Discount badge
-<Badge color="primary" size="small" style="heavy">
-  -50%
-</Badge>
+### UI Components
+
+| Component | Description |
+|-----------|-------------|
+| `Button` | Primary, secondary, link buttons with icon support |
+| `Input` | Text input with label, helper text, and validation |
+| `Badge` | Status and discount badges |
+| `Card` | Hotel card component |
+| `CompactCard` | Compact hotel card for carousels |
+| `Chip` | Filter and tag chips |
+| `Checkbox` | Checkbox with label |
+| `RadioButton` | Radio button with label |
+| `Rating` | Star rating display |
+| `Divider` | Horizontal/vertical divider |
+| `Dropdown` | Select dropdown |
+| `Modal` | Modal dialog |
+| `SectionHeader` | Section title with "Show all" button |
 
-// Status badge
-<Badge color="success" style="light">
-  Available
-</Badge>
-```
+### Icons
 
-**Props:**
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `color` | `'primary' \| 'secondary' \| 'neutral' \| 'success' \| 'warning'` | `'primary'` | Badge color |
-| `size` | `'small' \| 'large'` | `'large'` | Badge size |
-| `style` | `'heavy' \| 'light'` | `'heavy'` | Solid or light background |
+| Icon | Description |
+|------|-------------|
+| `HeartIcon` | Heart icon (filled/outline) |
+| `StarIcon` | Star icon for ratings |
+| `ChevronLeftIcon` | Left arrow |
+| `ChevronRightIcon` | Right arrow |
+| `PinIcon` | Location pin |
 
-### Rating
+---
 
-```tsx
-import { Rating } from '@hotelcard/ui';
+## Component Examples
 
-// Star rating
-<Rating value={4.5} />
+### Button
 
-// Show numeric value
-<Rating value={4.5} showValue />
+```tsx
+import { Button } from '@hotelcard/ui';
 
-// Different sizes
-<Rating value={3} size="small" />
-<Rating value={3} size="large" />
+<Button variant="primary">Primary</Button>
+<Button variant="secondary">Secondary</Button>
+<Button variant="link">Link Style</Button>
+<Button size="small">Small Button</Button>
+<Button disabled>Disabled</Button>
+<Button leftIcon={<SearchIcon />}>Search</Button>
+<Button iconOnly><HeartIcon /></Button>
 ```
 
-**Props:**
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `value` | `number` | - | Rating value (0-5) |
-| `maxValue` | `number` | `5` | Maximum stars |
-| `showValue` | `boolean` | `false` | Show numeric value |
-| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | Star size |
-
 ### Input
 
 ```tsx
 import { Input } from '@hotelcard/ui';
 
-// Basic input
 <Input
   label="Email"
-  placeholder="Enter your email"
+  type="email"
+  placeholder="you@example.com"
   value={email}
   onChange={setEmail}
+  helper="We'll never share your email"
 />
 
-// With helper text
 <Input
   label="Password"
   type="password"
-  helper="Must be at least 8 characters"
-/>
-
-// Error state
-<Input
-  label="Email"
   error
-  helper="Invalid email address"
-/>
-
-// With icons
-<Input
-  leftIcon={<SearchIcon />}
-  placeholder="Search..."
-/>
-
-// Disabled
-<Input
-  label="Disabled"
-  disabled
-  value="Cannot edit"
+  helper="Password is required"
 />
 ```
 
-**Props:**
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `label` | `string` | - | Label text above input |
-| `placeholder` | `string` | `'Placeholder'` | Placeholder text |
-| `helper` | `string` | - | Helper text below input |
-| `value` | `string` | - | Controlled value |
-| `onChange` | `(value: string) => void` | - | Change handler |
-| `type` | `'text' \| 'email' \| 'password' \| 'tel' \| 'number'` | `'text'` | Input type |
-| `error` | `boolean` | `false` | Show error state |
-| `disabled` | `boolean` | `false` | Disable input |
-| `leftIcon` | `ReactNode` | - | Icon on the left |
-| `rightIcon` | `ReactNode` | - | Icon on the right |
-
-### Checkbox
-
-```tsx
-import { Checkbox } from '@hotelcard/ui';
-
-// Controlled checkbox
-<Checkbox
-  label="Accept terms"
-  checked={accepted}
-  onChange={setAccepted}
-/>
-
-// Uncontrolled with default
-<Checkbox
-  label="Remember me"
-  defaultChecked
-/>
-
-// Error state
-<Checkbox
-  label="Required field"
-  error
-/>
-
-// Sizes
-<Checkbox label="Medium" size="medium" />
-<Checkbox label="Small" size="small" />
-```
-
-**Props:**
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `label` | `string` | - | Label text |
-| `checked` | `boolean` | - | Controlled checked state |
-| `defaultChecked` | `boolean` | `false` | Default checked state |
-| `onChange` | `(checked: boolean) => void` | - | Change handler |
-| `size` | `'small' \| 'medium'` | `'medium'` | Checkbox size |
-| `disabled` | `boolean` | `false` | Disable checkbox |
-| `error` | `boolean` | `false` | Show error state |
-
-### RadioButton
+### Badge
 
 ```tsx
-import { RadioButton } from '@hotelcard/ui';
+import { Badge } from '@hotelcard/ui';
 
-// Radio group
-<RadioButton
-  label="Option 1"
-  checked={selected === '1'}
-  onChange={() => setSelected('1')}
-  name="options"
-/>
-<RadioButton
-  label="Option 2"
-  checked={selected === '2'}
-  onChange={() => setSelected('2')}
-  name="options"
-/>
+<Badge color="primary" size="small" style="heavy">-50%</Badge>
+<Badge color="success" style="light">Available</Badge>
+<Badge color="warning">Limited</Badge>
 ```
 
-**Props:**
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `label` | `string` | - | Label text |
-| `checked` | `boolean` | - | Checked state (required) |
-| `onChange` | `(checked: boolean) => void` | - | Change handler (required) |
-| `name` | `string` | - | Group name for form |
-| `disabled` | `boolean` | `false` | Disable radio |
-
-### Dropdown
+### Card
 
 ```tsx
-import { Dropdown } from '@hotelcard/ui';
-
-const options = [
-  { value: '1', label: 'Option 1' },
-  { value: '2', label: 'Option 2' },
-  { value: '3', label: 'Option 3' },
-];
-
-// Controlled
-<Dropdown
-  options={options}
-  value={selected}
-  onChange={setSelected}
-  placeholder="Select..."
-/>
+import { Card } from '@hotelcard/ui';
 
-// Uncontrolled with default
-<Dropdown
-  options={options}
-  defaultValue="1"
+<Card
+  image="/hotel.jpg"
+  title="Grand Hotel Belvedere"
+  location="Lauterbrunnen"
+  stars={5}
+  price="From CHF 170"
+  originalPrice="CHF 340"
+  badge={{ text: '-50%', variant: 'primary' }}
+  isFavorite={false}
+  onFavoriteClick={() => toggleFavorite()}
+  onClick={() => navigateToHotel()}
 />
 ```
 
-**Props:**
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `options` | `Array<{value, label}>` | `[]` | Dropdown options |
-| `value` | `string` | - | Controlled value |
-| `defaultValue` | `string` | - | Default value |
-| `onChange` | `(value: string) => void` | - | Change handler |
-| `placeholder` | `string` | `'Select...'` | Placeholder text |
-| `disabled` | `boolean` | `false` | Disable dropdown |
-| `error` | `boolean` | `false` | Show error state |
-
 ### Modal
 
 ```tsx
@@ -291,464 +171,105 @@ import { Modal } from '@hotelcard/ui';
   <h2>Modal Title</h2>
   <p>Modal content goes here.</p>
 </Modal>
-
-// Without close button
-<Modal
-  isOpen={isOpen}
-  onClose={handleClose}
-  showCloseButton={false}
->
-  <CustomCloseButton />
-</Modal>
-
-// Disable backdrop click
-<Modal
-  isOpen={isOpen}
-  onClose={handleClose}
-  disableBackdropClick
->
-  Must use close button
-</Modal>
 ```
 
-**Props:**
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `isOpen` | `boolean` | - | Show/hide modal |
-| `onClose` | `() => void` | - | Close handler |
-| `children` | `ReactNode` | - | Modal content |
-| `width` | `string` | `'600px'` | Max width |
-| `showCloseButton` | `boolean` | `true` | Show X button |
-| `disableBackdropClick` | `boolean` | `false` | Prevent backdrop close |
-
-### Chip
+### Checkbox & RadioButton
 
 ```tsx
-import { Chip } from '@hotelcard/ui';
-
-// Basic chip
-<Chip label="Filter" />
-
-// With count
-<Chip label="Hotels" count={42} />
-
-// Active state
-<Chip label="Selected" state="active" />
-
-// Non-removable
-<Chip label="Category" removable={false} onClick={() => {}} />
-
-// Sizes
-<Chip label="Medium" size="medium" />
-<Chip label="Small" size="small" />
-```
-
-**Props:**
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `label` | `string` | - | Chip text |
-| `count` | `number \| string` | - | Badge count |
-| `state` | `'idle' \| 'active' \| 'disabled'` | `'idle'` | State variant |
-| `size` | `'small' \| 'medium'` | `'small'` | Chip size |
-| `removable` | `boolean` | `true` | Show X button |
-| `onRemove` | `() => void` | - | Remove handler |
-| `onClick` | `() => void` | - | Click handler |
+import { Checkbox, RadioButton } from '@hotelcard/ui';
 
-### Divider
-
-```tsx
-import { Divider } from '@hotelcard/ui';
-
-// Horizontal divider
-<Divider />
-
-// With label
-<Divider label="OR" />
-
-// Vertical divider
-<Divider orientation="vertical" />
-```
-
-**Props:**
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `label` | `string` | - | Center label text |
-| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Divider direction |
-
-### SectionHeader
-
-```tsx
-import { SectionHeader } from '@hotelcard/ui';
-
-// With "Show all" button
-<SectionHeader
-  title="Latest Hotels"
-  showAllLabel="Show all"
-  onShowAllClick={() => navigate('/hotels')}
-/>
-
-// Title only
-<SectionHeader title="Featured" />
-```
-
-**Props:**
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `title` | `string` | - | Section title |
-| `showAllLabel` | `string` | - | "Show all" button text |
-| `onShowAllClick` | `() => void` | - | Button click handler |
-
-### CompactCard
-
-```tsx
-import { CompactCard } from '@hotelcard/ui';
-
-<CompactCard
-  image="/hotel.jpg"
-  imageAlt="Hotel Grand"
-  label="Hotel Grand Zurich"
-  price="From CHF 120"
-  stars={4}
-  isSuperior
-  badge={{ text: '-30%', variant: 'primary' }}
-  onClick={() => navigate('/hotel/123')}
+<Checkbox
+  label="Accept terms"
+  checked={accepted}
+  onChange={setAccepted}
 />
 
-// Swiss Lodge (stars = 6)
-<CompactCard
-  label="Swiss Lodge Hotel"
-  stars={6}
-  swissLodgeLabel="Swiss Lodge"
+<RadioButton
+  label="Option A"
+  checked={selected === 'a'}
+  onChange={() => setSelected('a')}
+  name="options"
 />
 ```
 
-**Props:**
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `image` | `string` | - | Image URL |
-| `imageAlt` | `string` | `''` | Image alt text |
-| `label` | `string` | - | Hotel name |
-| `price` | `string` | - | Price text |
-| `stars` | `number` | - | Star rating (1-6) |
-| `isSuperior` | `boolean` | `false` | Superior indicator |
-| `badge` | `{text, variant}` | - | Badge config |
-| `onClick` | `() => void` | - | Click handler |
-| `swissLodgeLabel` | `string` | `'Swiss Lodge'` | Label for 6-star |
-
-### Icons
-
-```tsx
-import { HeartIcon, StarIcon, ChevronLeftIcon, ChevronRightIcon, PinIcon } from '@hotelcard/ui';
-
-<HeartIcon filled={false} size={24} />
-<StarIcon size={9} />
-<ChevronLeftIcon size={20} />
-<ChevronRightIcon size={20} />
-<PinIcon size={16} />
-```
-
----
-
-## CSS Variables (Theming)
-
-Components use CSS variables for theming. Your app should define these in a global CSS file:
-
-```css
-:root {
-  /* Colors */
-  --background-action-primary-idle: #C81E4C;
-  --background-action-primary-hover: #a3183d;
-  --content-action-primary-inverse-idle: #ffffff;
-  --content-general-primary: #1F2937;
-  --content-general-secondary: #6B7280;
-  --border-general-divider: #D1D5DB;
-
-  /* Typography */
-  --font-primary: system-ui, -apple-system, sans-serif;
-  --font-weight-medium: 500;
-  --font-weight-semibold: 600;
-
-  /* Spacing & Sizing */
-  --radius-lg: 12px;
-  --radius-full: 9999px;
-
-  /* ... see tokens.css for full list */
-}
-```
-
-Components have fallback values, so they work without custom CSS variables.
-
 ---
 
 ## Types
 
-```tsx
+All components export their prop types:
+
+```typescript
 import type {
   ButtonProps,
   BadgeProps,
-  RatingProps,
   InputProps,
+  CardProps,
+  CompactCardProps,
   CheckboxProps,
   RadioButtonProps,
   DropdownProps,
   ModalProps,
   ChipProps,
+  RatingProps,
   DividerProps,
   SectionHeaderProps,
-  CompactCardProps,
 } from '@hotelcard/ui';
 ```
 
 ---
 
-## Development Guide
-
-### Project Structure
-
-```
-packages/ui/
-├── src/
-│   ├── components/
-│   │   ├── Button/
-│   │   │   ├── Button.tsx
-│   │   │   ├── Button.css       # Prefixed classes (hc-btn-*)
-│   │   │   ├── Button.types.ts
-│   │   │   └── index.ts
-│   │   ├── Badge/
-│   │   ├── Rating/
-│   │   ├── Input/
-│   │   ├── Checkbox/
-│   │   ├── RadioButton/
-│   │   ├── Dropdown/
-│   │   ├── Modal/
-│   │   ├── Chip/
-│   │   ├── Divider/
-│   │   ├── SectionHeader/
-│   │   ├── CompactCard/
-│   │   └── icons/
-│   └── index.ts                  # Main exports
-├── dist/                         # Built output
-├── package.json
-└── tsup.config.ts
-```
-
-### Adding a New Component
-
-1. **Create component folder:**
-   ```
-   src/components/NewComponent/
-   ├── NewComponent.tsx
-   ├── NewComponent.css
-   ├── NewComponent.types.ts
-   └── index.ts
-   ```
-
-2. **Use prefixed CSS classes** (NOT CSS modules):
-   ```tsx
-   // NewComponent.tsx
-   import './NewComponent.css';
-
-   const cx = (className: string) => `hc-newcomp-${className}`;
-
-   export const NewComponent = () => (
-     <div className={cx('container')}>
-       <span className={cx('text')}>Hello</span>
-     </div>
-   );
-   ```
-
-3. **Define CSS with prefixes:**
-   ```css
-   /* NewComponent.css */
-   .hc-newcomp-container {
-     display: flex;
-     padding: var(--size-rem-1, 16px);
-   }
-
-   .hc-newcomp-text {
-     color: var(--content-general-primary, #1F2937);
-   }
-   ```
-
-4. **Export from index.ts:**
-   ```tsx
-   // src/index.ts
-   export { NewComponent } from './components/NewComponent';
-   export type { NewComponentProps } from './components/NewComponent';
-   ```
-
-5. **Build and test:**
-   ```bash
-   pnpm build
-   ```
-
-### CSS Class Naming Convention
-
-**Why prefixed classes instead of CSS Modules?**
-
-CSS Modules don't work well with tsup bundling - the class name mappings become empty objects. We use prefixed classes instead:
-
-- `hc-btn-*` for Button
-- `hc-badge-*` for Badge
-- `hc-input-*` for Input
-- `hc-checkbox-*` for Checkbox
-- `hc-radio-*` for RadioButton
-- `hc-dropdown-*` for Dropdown
-- `hc-modal-*` for Modal
-- `hc-chip-*` for Chip
-- `hc-divider-*` for Divider
-- `hc-section-*` for SectionHeader
-- `hc-compact-*` for CompactCard
-
-This prevents conflicts with consuming app's styles while ensuring styles are always applied.
-
-### Building
+## Styling
 
-```bash
-cd packages/ui
-
-# Build once
-pnpm build
+Components use CSS variables for theming. Import the styles once in your app entry:
 
-# Watch mode for development
-pnpm dev
+```tsx
+// main.tsx or App.tsx
+import '@hotelcard/ui/dist/index.css';
 ```
 
-### Testing Changes Locally
-
-1. Build the package: `pnpm build`
-2. In consuming app, reinstall: `npm install`
-3. Restart dev server if needed
-
----
-
-## Publishing to NPM
-
-### Prerequisites
-
-1. NPM account with access to `@hotelcard` organization
-2. Logged in: `npm login`
+### Customizing with CSS Variables
 
-### Publish Process
+Override these variables in your app's CSS:
 
-```bash
-cd packages/ui
+```css
+:root {
+  /* Primary brand color */
+  --background-action-primary-idle: #C81E4C;
+  --background-action-primary-hover: #a3183d;
 
-# 1. Make sure everything builds
-pnpm build
+  /* Text colors */
+  --content-general-primary: #1F2937;
+  --content-general-secondary: #6B7280;
 
-# 2. Update version
-npm version patch   # 0.0.2 -> 0.0.3
-# or
-npm version minor   # 0.0.2 -> 0.1.0
-# or
-npm version major   # 0.0.2 -> 1.0.0
+  /* Border colors */
+  --border-general-divider: #D1D5DB;
 
-# 3. Publish
-npm publish --access public
+  /* Typography */
+  --font-primary: system-ui, -apple-system, sans-serif;
 
-# 4. Commit version bump
-git add package.json
-git commit -m "chore(ui): release v0.0.3"
-git push
+  /* Border radius */
+  --radius-lg: 12px;
+  --radius-full: 9999px;
+}
 ```
 
-### Version Guidelines
-
-- `patch` (0.0.x): Bug fixes, style tweaks
-- `minor` (0.x.0): New components, new features
-- `major` (x.0.0): Breaking changes (API changes, removed props)
+Components have built-in fallback values, so they work without custom CSS variables.
 
 ---
 
-## Using in Apps
-
-### hotelcard-app-v2 (Mobile App)
-
-```tsx
-// src/main.tsx
-import '@hotelcard/ui/dist/index.css';  // REQUIRED
+## Requirements
 
-// src/library/index.ts (barrel export)
-export { Button, Badge, Input, Checkbox } from '@hotelcard/ui';
-export type { ButtonProps, BadgeProps, InputProps } from '@hotelcard/ui';
-
-// src/pages/SomePage.tsx
-import { Button, Input } from '@/library';
-```
-
-### hotelcard-ui (Website)
-
-```tsx
-// src/main.tsx or app entry
-import '@hotelcard/ui/dist/index.css';  // REQUIRED
-
-// Use directly
-import { Button, Badge, Modal } from '@hotelcard/ui';
-```
-
-### Updating the Package
-
-```bash
-# After a new version is published
-npm update @hotelcard/ui
-
-# Or for local development
-rm -rf node_modules/.cache
-npm install
-```
+- React 18+
+- react-dom 18+
 
 ---
 
-## Troubleshooting
-
-### "Components render without styles"
-
-Make sure you imported the CSS:
-```tsx
-import '@hotelcard/ui/dist/index.css';
-```
-
-### "Module not found" errors
-
-```bash
-# Clear cache and reinstall
-rm -rf node_modules/.cache
-npm install
-```
-
-### "Types not found"
-
-Make sure you're importing types with `type`:
-```tsx
-import type { ButtonProps } from '@hotelcard/ui';
-```
-
-### Local changes not reflecting
-
-```bash
-# In @hotelcard/ui
-pnpm build
+## License
 
-# In consuming app
-npm install
-# Restart dev server
-```
+MIT
 
 ---
 
-## Component Checklist
-
-When adding/modifying components:
-
-- [ ] Uses prefixed CSS classes (not CSS modules)
-- [ ] All CSS variables have fallback values
-- [ ] Props are typed in `.types.ts`
-- [ ] Exported from `src/index.ts`
-- [ ] Build passes: `pnpm build`
-- [ ] Tested in consuming app
-- [ ] README updated if new component
+## Maintained By
 
-## License
-
-MIT
+HotelCard AG - [hotelcard.ch](https://hotelcard.ch)