@exotic-holidays/ui 0.1.0

package/README.md

@@ -0,0 +1,46 @@
+# @exotic-holidays/ui
+
+EHI Travel Platform design system (**AceUI**). Shared base components, theme tokens, and helpers
+consumed by every portal app (Hotelier, Agent, Back Office).
+
+## Install (within the monorepo)
+
+Already linked via npm workspaces. In a portal app's `package.json`:
+
+```json
+"dependencies": { "@exotic-holidays/ui": "*" }
+```
+
+And in the app's `next.config.ts`:
+
+```ts
+const nextConfig = { transpilePackages: ["@exotic-holidays/ui"] };
+```
+
+## Usage
+
+```tsx
+// app/globals.css
+@import "tailwindcss";
+@import "@exotic-holidays/ui/theme.css";
+
+// any component / page
+import { Button, Input, Card, Table, ListPage } from "@exotic-holidays/ui";
+```
+
+## What's inside
+
+| Path | Contents |
+|---|---|
+| `src/theme.css` | AceUI `@theme` tokens + `.dark` scope (teal primary, semantic surface/foreground/border ramps) |
+| `src/base-components/` | Button, Input, Select, Card, Modal, Badge, Table (+TLoader), Pagination, PopConfirm, EmptyState, SearchableSelect, Checkbox, ChipInput, Dropdown, Divider, ButtonGroup, Accordion, Toaster, ThemeProvider |
+| `src/components/ListPage.tsx` | Standardized index/list page scaffold (header + search + filter button + table slot + pagination) |
+| `src/helpers/` | `cn` (clsx + tailwind-merge), `bem` |
+
+## Rules
+
+- **Never use raw Tailwind palette colours** (`bg-slate-800`, `bg-[#0c1220]`) — only semantic tokens
+  (`surface-*`, `foreground-*`, `border-*`, `primary`/`success`/`warning`/`danger`).
+- **Invertible accents** (work in light + dark): tints `bg-{c}-50 / text-{c}-700 / border-{c}-200`;
+  solids `bg-{c}-500 / text-{c}-foreground`.
+- Components are client components (`"use client"`); apps must list `@exotic-holidays/ui` in `transpilePackages`.

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@exotic-holidays/ui",
+  "version": "0.1.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "EHI Travel Platform design system (AceUI) — base components, theme tokens, helpers.",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": "./src/index.ts",
+    "./theme.css": "./src/theme.css",
+    "./base-components": "./src/base-components/index.ts"
+  },
+  "scripts": {
+    "lint": "eslint src",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "framer-motion": "^12.40.0",
+    "libphonenumber-js": "^1.13.7",
+    "lucide-react": "^1.17.0",
+    "react-international-phone": "^4.8.0",
+    "tailwind-merge": "^3.6.0"
+  },
+  "peerDependencies": {
+    "react": "^19",
+    "react-dom": "^19"
+  },
+  "devDependencies": {
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "react": "^19",
+    "react-dom": "^19",
+    "typescript": "^5"
+  }
+}

package/src/base-components/Accordion.tsx

@@ -0,0 +1,561 @@
+'use client';
+
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  useId,
+  useMemo,
+  useRef,
+  useEffect,
+  type ReactNode,
+} from 'react';
+import { cva } from 'class-variance-authority';
+import { block, element, modifier } from '../helpers/bem';
+import { cn } from '../helpers/cn';
+
+/* ============================================
+   Types
+   ============================================ */
+
+export type AccordionVariant = 'light' | 'bordered' | 'splitted';
+export type AccordionSelectionMode = 'single' | 'multiple';
+export type AccordionRenderStrategy = 'default' | 'lazy';
+export type AccordionHeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+
+export type AccordionIndicatorRender = (params: {
+  isOpen: boolean;
+  isDisabled: boolean;
+  defaultIndicator: ReactNode;
+}) => ReactNode;
+
+export interface AccordionProps {
+  /** Child AccordionItem components */
+  children?: ReactNode;
+  /** Visual style variant */
+  variant?: AccordionVariant;
+  /** Single: one item open at a time. Multiple: many items can be open */
+  selectionMode?: AccordionSelectionMode;
+  /** Keys of items expanded by default (uncontrolled) */
+  defaultExpandedKeys?: (string | number)[];
+  /** Keys of items that are expanded (controlled) */
+  expandedKeys?: (string | number)[];
+  /** Keys of items that are disabled */
+  disabledKeys?: (string | number)[];
+  /** When to render item content: default (all) or lazy (on expand) */
+  renderStrategy?: AccordionRenderStrategy;
+  /** Disable all accordion items */
+  isDisabled?: boolean;
+  /** Called when expansion state changes */
+  onExpandedChange?: (keys: (string | number)[]) => void;
+  /** Additional CSS classes */
+  className?: string;
+  /** BEM class name prefix (default 'aceui'). Usually set via AceUIProvider when using @aceuidev/core. */
+  prefix?: string;
+  /** Accessible label for the accordion region */
+  ariaLabel?: string;
+  /** Test ID for testing */
+  testId?: string;
+}
+
+export interface AccordionItemProps {
+  /** Unique identifier for this item (used for expansion state) */
+  itemKey: string | number;
+  /** Main heading text */
+  title: ReactNode;
+  /** Optional secondary text below title */
+  subtitle?: ReactNode;
+  /** Expandable body content */
+  children: ReactNode;
+  /** Custom content before title (e.g. avatar, icon) */
+  startContent?: ReactNode;
+  /** Custom expand/collapse indicator: ReactNode or function (isOpen, isDisabled, defaultIndicator) => ReactNode */
+  indicator?: ReactNode | AccordionIndicatorRender;
+  /** Disable this item */
+  isDisabled?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+  /** BEM class name prefix (default from Accordion context). Override per item if needed. */
+  prefix?: string;
+  /** Accessible label override */
+  ariaLabel?: string;
+  /** Semantic heading level for title */
+  headingLevel?: AccordionHeadingLevel;
+  /** Test ID for testing */
+  testId?: string;
+}
+
+/* ============================================
+   Context
+   ============================================ */
+
+interface AccordionContextValue {
+  expandedKeys: Set<string | number>;
+  renderedKeys: Set<string | number>;
+  toggle: (key: string | number) => void;
+  isExpanded: (key: string | number) => boolean;
+  isDisabled: (key: string | number) => boolean;
+  variant: AccordionVariant;
+  selectionMode: AccordionSelectionMode;
+  renderStrategy: AccordionRenderStrategy;
+  accordionId: string;
+  focusedKey: string | number | null;
+  setFocusedKey: (key: string | number | null) => void;
+  registerItem: (key: string | number) => void;
+  itemKeys: (string | number)[];
+  prefix: string;
+}
+
+const AccordionContext = createContext<AccordionContextValue | null>(null);
+
+function useAccordionContext(): AccordionContextValue {
+  const ctx = useContext(AccordionContext);
+  if (!ctx) {
+    throw new Error('AccordionItem must be used within Accordion');
+  }
+  return ctx;
+}
+
+/* ============================================
+   Chevron Icon
+   ============================================ */
+
+const ChevronRightIcon = () => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    aria-hidden
+  >
+    <path d="M9 18l6-6-6-6" />
+  </svg>
+);
+
+/* ============================================
+   Accordion Variants (CVA)
+   ============================================ */
+
+export const accordionVariants = cva(
+  'flex flex-col gap-0 w-full min-w-0 font-[inherit]',
+  {
+    variants: {
+      variant: {
+        light: 'bg-transparent',
+        bordered:
+          'bg-transparent border-2 border-border-default rounded-[var(--aceui-accordion-border-radius)] overflow-hidden px-[12px]',
+        splitted: 'bg-transparent gap-[8px]',
+      },
+    },
+    defaultVariants: {
+      variant: 'light',
+    },
+  }
+);
+
+/* ============================================
+   Accordion
+   ============================================ */
+
+/**
+ * Accordion component for expandable/collapsible content sections.
+ * Supports single/multiple expansion, variants, keyboard navigation, and lazy rendering.
+ */
+export const Accordion = ({
+  children,
+  variant = 'light',
+  selectionMode = 'single',
+  defaultExpandedKeys = [],
+  expandedKeys: controlledExpandedKeys,
+  disabledKeys = [],
+  renderStrategy = 'default',
+  isDisabled = false,
+  onExpandedChange,
+  className = '',
+  prefix = 'aceui',
+  ariaLabel,
+  testId,
+}: AccordionProps) => {
+  const accordionId = useId();
+  const itemKeysRef = useRef<(string | number)[]>([]);
+  const [itemKeys, setItemKeys] = useState<(string | number)[]>([]);
+
+  const isControlled = controlledExpandedKeys !== undefined;
+
+  const [internalExpandedKeys, setInternalExpandedKeys] = useState<Set<string | number>>(() => {
+    const keys = defaultExpandedKeys;
+    const set = new Set(keys);
+    if (selectionMode === 'single' && keys.length > 1) {
+      return new Set([keys[0]]);
+    }
+    return set;
+  });
+
+  const expandedKeys = isControlled
+    ? new Set(controlledExpandedKeys)
+    : internalExpandedKeys;
+
+  const [focusedKey, setFocusedKey] = useState<string | number | null>(null);
+
+  const [renderedKeys, setRenderedKeys] = useState<Set<string | number>>(() => {
+    if (renderStrategy === 'lazy') {
+      const keys = controlledExpandedKeys !== undefined ? (controlledExpandedKeys ?? []) : defaultExpandedKeys;
+      const arr = selectionMode === 'single' && keys.length > 1 ? [keys[0]] : keys;
+      return new Set(arr);
+    }
+    return new Set();
+  });
+
+  useEffect(() => {
+    if (renderStrategy !== 'lazy') return;
+    const keys = isControlled && controlledExpandedKeys ? controlledExpandedKeys : Array.from(internalExpandedKeys);
+    setRenderedKeys((prev) => {
+      const hasNew = keys.some((k) => !prev.has(k));
+      if (!hasNew) return prev;
+      const next = new Set(prev);
+      keys.forEach((k) => next.add(k));
+      return next;
+    });
+  }, [renderStrategy, isControlled, controlledExpandedKeys, internalExpandedKeys]);
+
+  const registerItem = useCallback((key: string | number) => {
+    itemKeysRef.current = Array.from(new Set([...itemKeysRef.current, key]));
+    setItemKeys([...itemKeysRef.current]);
+  }, []);
+
+  const toggle = useCallback(
+    (key: string | number) => {
+      if (isDisabled) return;
+      const disabledSet = new Set(disabledKeys);
+      if (disabledSet.has(key)) return;
+
+      const nextKeys = new Set(expandedKeys);
+      if (nextKeys.has(key)) {
+        nextKeys.delete(key);
+      } else {
+        if (selectionMode === 'single') {
+          nextKeys.clear();
+        }
+        nextKeys.add(key);
+      }
+
+      if (!isControlled) {
+        setInternalExpandedKeys(nextKeys);
+      }
+      onExpandedChange?.(Array.from(nextKeys));
+    },
+    [isDisabled, disabledKeys, expandedKeys, selectionMode, isControlled, onExpandedChange]
+  );
+
+  const isExpanded = useCallback(
+    (key: string | number) => expandedKeys.has(key),
+    [expandedKeys]
+  );
+
+  const isDisabledCheck = useCallback(
+    (key: string | number) => isDisabled || disabledKeys.includes(key),
+    [isDisabled, disabledKeys]
+  );
+
+  const contextValue: AccordionContextValue = useMemo(
+    () => ({
+      expandedKeys,
+      renderedKeys,
+      toggle,
+      isExpanded,
+      isDisabled: isDisabledCheck,
+      variant,
+      selectionMode,
+      renderStrategy,
+      accordionId,
+      focusedKey,
+      setFocusedKey,
+      registerItem,
+      itemKeys,
+      prefix,
+    }),
+    [
+      expandedKeys,
+      renderedKeys,
+      toggle,
+      isExpanded,
+      isDisabledCheck,
+      variant,
+      selectionMode,
+      renderStrategy,
+      accordionId,
+      focusedKey,
+      registerItem,
+      itemKeys,
+      prefix,
+    ]
+  );
+
+  const blockClass = block(prefix, 'accordion');
+  const accordionBemClasses = [
+    blockClass,
+    modifier(prefix, 'accordion', variant),
+    isDisabled && modifier(prefix, 'accordion', 'disabled'),
+  ].filter(Boolean) as string[];
+
+  return (
+    <AccordionContext.Provider value={contextValue}>
+      <div
+        className={cn(accordionBemClasses, accordionVariants({ variant }), className)}
+        role="region"
+        aria-label={ariaLabel}
+        data-testid={testId}
+      >
+        {children}
+      </div>
+    </AccordionContext.Provider>
+  );
+};
+
+Accordion.displayName = 'Accordion';
+
+/* ============================================
+   AccordionItem
+   ============================================ */
+
+function getItemVariantClasses(variant: AccordionVariant): string {
+  switch (variant) {
+    case 'light':
+    case 'bordered':
+      return 'border-b border-border-default last:border-b-0';
+    case 'splitted':
+      return 'bg-surface-1 border border-border-subtle rounded-[16px] overflow-hidden shadow-none';
+    default:
+      return '';
+  }
+}
+
+function getHeaderVariantClasses(variant: AccordionVariant): string {
+  if (variant === 'splitted') {
+    return 'px-[20px] pr-[24px] rounded-[16px]';
+  }
+  return '';
+}
+
+function getContentInnerVariantClasses(variant: AccordionVariant): string {
+  if (variant === 'splitted') {
+    return 'px-[20px]';
+  }
+  return '';
+}
+
+export const AccordionItem = ({
+  itemKey,
+  title,
+  subtitle,
+  children,
+  startContent,
+  indicator,
+  isDisabled: itemDisabled = false,
+  className = '',
+  prefix: prefixProp,
+  ariaLabel,
+  headingLevel = 'h3',
+  testId,
+}: AccordionItemProps) => {
+  const ctx = useAccordionContext();
+  const {
+    toggle,
+    isExpanded,
+    isDisabled,
+    accordionId,
+    focusedKey,
+    setFocusedKey,
+    registerItem,
+    itemKeys,
+    renderStrategy,
+    renderedKeys,
+    variant,
+    prefix: contextPrefix,
+  } = ctx;
+
+  const prefix = prefixProp ?? contextPrefix;
+
+  const expanded = isExpanded(itemKey);
+  const disabled = isDisabled(itemKey) || itemDisabled;
+
+  const headerId = `${accordionId}-header-${itemKey}`;
+  const contentId = `${accordionId}-content-${itemKey}`;
+
+  useEffect(() => {
+    registerItem(itemKey);
+  }, [itemKey, registerItem]);
+
+  const index = itemKeys.indexOf(itemKey);
+  const isFocused = focusedKey === itemKey;
+  const tabIndex = isFocused || (focusedKey === null && index === 0) ? 0 : -1;
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (disabled) return;
+
+    switch (e.key) {
+      case 'Enter':
+      case ' ':
+        e.preventDefault();
+        toggle(itemKey);
+        break;
+      case 'ArrowDown':
+        e.preventDefault();
+        if (index < itemKeys.length - 1) {
+          setFocusedKey(itemKeys[index + 1]);
+          document.getElementById(`${accordionId}-header-${itemKeys[index + 1]}`)?.focus();
+        }
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        if (index > 0) {
+          setFocusedKey(itemKeys[index - 1]);
+          document.getElementById(`${accordionId}-header-${itemKeys[index - 1]}`)?.focus();
+        }
+        break;
+      case 'Home':
+        e.preventDefault();
+        if (itemKeys.length > 0) {
+          setFocusedKey(itemKeys[0]);
+          document.getElementById(`${accordionId}-header-${itemKeys[0]}`)?.focus();
+        }
+        break;
+      case 'End':
+        e.preventDefault();
+        if (itemKeys.length > 0) {
+          const lastKey = itemKeys[itemKeys.length - 1];
+          setFocusedKey(lastKey);
+          document.getElementById(`${accordionId}-header-${lastKey}`)?.focus();
+        }
+        break;
+    }
+  };
+
+  const handleClick = () => {
+    if (!disabled) toggle(itemKey);
+  };
+
+  const handleFocus = () => setFocusedKey(itemKey);
+  const handleBlur = () => setFocusedKey(null);
+
+  const shouldRenderContent =
+    renderStrategy === 'default' || (renderStrategy === 'lazy' && renderedKeys.has(itemKey));
+
+  const HeadingTag = headingLevel;
+
+  const defaultIndicator = <ChevronRightIcon />;
+  const resolvedIndicator =
+    typeof indicator === 'function'
+      ? indicator({ isOpen: expanded, isDisabled: disabled, defaultIndicator })
+      : (indicator ?? defaultIndicator);
+
+  const itemBlockClass = block(prefix, 'accordion-item');
+  const itemBemClasses = [
+    itemBlockClass,
+    expanded && modifier(prefix, 'accordion-item', 'expanded'),
+    disabled && modifier(prefix, 'accordion-item', 'disabled'),
+  ].filter(Boolean) as string[];
+
+  const itemClasses = cn(
+    itemBemClasses,
+    'flex flex-col w-full',
+    disabled && 'opacity-[0.5] pointer-events-none',
+    getItemVariantClasses(variant),
+    className
+  );
+
+  const headerElementClass = element(prefix, 'accordion-item', 'header');
+  const headerClasses = cn(
+    headerElementClass,
+    'flex items-center gap-[8px] w-full py-[12px] border-none bg-transparent font-[inherit] text-[1rem] leading-[1.5rem] text-text-default text-left cursor-pointer outline-none transition-colors duration-200',
+    'focus-visible:outline-2 focus-visible:outline-[var(--aceui-color-focus)] focus-visible:outline-offset-2',
+    disabled && 'cursor-not-allowed',
+    getHeaderVariantClasses(variant)
+  );
+
+  const contentElementClass = element(prefix, 'accordion-item', 'content');
+  const contentInnerClasses = cn(
+    'overflow-hidden min-h-0',
+    getContentInnerVariantClasses(variant)
+  );
+
+  const contentTransition = '0.3s cubic-bezier(0.4, 0, 0.2, 1)';
+  const contentWrapperStyle: React.CSSProperties = {
+    display: 'grid',
+    gridTemplateRows: expanded ? '1fr' : '0fr',
+    transition: `grid-template-rows ${contentTransition}`,
+  };
+  const contentInnerStyle: React.CSSProperties = expanded
+    ? {
+      visibility: 'visible',
+      paddingBlock: '12px',
+      transition: `visibility 0s linear 0s, padding-block ${contentTransition}`,
+    }
+    : {
+      visibility: 'hidden',
+      paddingBlock: 0,
+      transition: `visibility 0s linear 0.3s, padding-block ${contentTransition}`,
+    };
+
+  return (
+    <div className={itemClasses} data-testid={testId}>
+      <div
+        id={headerId}
+        className={headerClasses}
+        role="button"
+        tabIndex={tabIndex}
+        aria-expanded={expanded}
+        aria-controls={contentId}
+        aria-disabled={disabled ? 'true' : undefined}
+        aria-label={ariaLabel}
+        onClick={handleClick}
+        onKeyDown={handleKeyDown}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+      >
+        {startContent && (
+          <div className="shrink-0 flex items-center">{startContent}</div>
+        )}
+        <div className="flex-1 min-w-0 flex flex-col gap-0.5">
+          <HeadingTag className="!m-0 !text-[inherit] !font-medium">{title}</HeadingTag>
+          {subtitle && (
+            <span className="text-[0.875rem] text-text-muted leading-[1.25rem]">
+              {subtitle}
+            </span>
+          )}
+        </div>
+        <div
+          className={cn(
+            element(prefix, 'accordion-item', 'indicator'),
+            'shrink-0 flex items-center justify-center transition-transform duration-200',
+            expanded && 'rotate-90'
+          )}
+          aria-hidden
+        >
+          {resolvedIndicator}
+        </div>
+      </div>
+
+      {shouldRenderContent && (
+        <div
+          id={contentId}
+          className={cn(contentElementClass, 'overflow-hidden')}
+          style={contentWrapperStyle}
+          role="region"
+          aria-labelledby={headerId}
+        >
+          <div className={contentInnerClasses} style={contentInnerStyle}>
+            {children}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+AccordionItem.displayName = 'AccordionItem';