mautourco-components 0.2.4 → 0.2.7

package/src/components/molecules/TabGroup/TabGroup.tsx

@@ -1,60 +1,60 @@
-import React from 'react';
-import Tab, { TabProps } from '../../atoms/Tab/Tab';
-
-export type TabItem<T = string> = {
-  label: string;
-  value: T;
-  disabled?: boolean;
-};
-
-export interface TabGroupProps<T = string> {
-  items: TabItem<T>[];
-  size?: TabProps['size'];
-  variant?: TabProps['variant'];
-  active?: T;
-  defaultActive?: T;
-  onChange?: (value: T) => void;
-  className?: string;
-}
-
-export function TabGroup<T = string>({
-  items,
-  size = 'lg',
-  variant = 'inline',
-  active,
-  defaultActive,
-  onChange,
-  className = '',
-}: TabGroupProps<T>) {
-  const [internalActive, setInternalActive] = React.useState<T | undefined>(
-    defaultActive ?? items[0]?.value
-  );
-
-  const isControlled = active !== undefined;
-  const current = (isControlled ? active : internalActive) as T | undefined;
-
-  const handleClick = (item: TabItem<T>) => {
-    if (item.disabled) return;
-    if (!isControlled) setInternalActive(item.value);
-    onChange?.(item.value);
-  };
-
-  return (
-    <div className={`tab-group flex ${className}`} role="tablist">
-      {items.map((it) => (
-        <Tab
-          key={String(it.value)}
-          isActive={current === it.value}
-          size={size}
-          variant={variant}
-          disabled={it.disabled}
-          onClick={() => handleClick(it)}
-        >
-          {it.label}
-        </Tab>
-      ))}
-    </div>
-  );
-}
-
-export default TabGroup;
+import React from 'react';
+import Tab, { TabProps } from '../../atoms/Tab/Tab';
+
+export type TabItem<T = string> = {
+  label: string;
+  value: T;
+  disabled?: boolean;
+};
+
+export interface TabGroupProps<T = string> {
+  items: TabItem<T>[];
+  size?: TabProps['size'];
+  variant?: TabProps['variant'];
+  active?: T;
+  defaultActive?: T;
+  onChange?: (value: T) => void;
+  className?: string;
+}
+
+export function TabGroup<T = string>({
+  items,
+  size = 'lg',
+  variant = 'inline',
+  active,
+  defaultActive,
+  onChange,
+  className = '',
+}: TabGroupProps<T>) {
+  const [internalActive, setInternalActive] = React.useState<T | undefined>(
+    defaultActive ?? items[0]?.value
+  );
+
+  const isControlled = active !== undefined;
+  const current = (isControlled ? active : internalActive) as T | undefined;
+
+  const handleClick = (item: TabItem<T>) => {
+    if (item.disabled) return;
+    if (!isControlled) setInternalActive(item.value);
+    onChange?.(item.value);
+  };
+
+  return (
+    <div className={`tab-group flex ${className}`} role="tablist">
+      {items.map((it) => (
+        <Tab
+          key={String(it.value)}
+          isActive={current === it.value}
+          size={size}
+          variant={variant}
+          disabled={it.disabled}
+          onClick={() => handleClick(it)}
+        >
+          {it.label}
+        </Tab>
+      ))}
+    </div>
+  );
+}
+
+export default TabGroup;

package/src/components/molecules/UserCard/UserCard.stories.tsx

@@ -1,36 +1,36 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { UserCard } from './UserCard';
-
-const meta = {
-  title: 'Molecules/UserCard',
-  component: UserCard,
-  argTypes: {
-    onSelectAgency: { action: 'agency selected' },
-  }
-} satisfies Meta<typeof UserCard>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args:{
-    user: {
-      name: "John Doe",
-      agency: "Beachcomber SA",
-      isAdmin: true,
-    },
-    agencies: [
-      { id: 1, name: "Beachcomber SA", localisation: "Mauritius" },
-      { id: 2, name: "Sun Resorts", localisation: "Maldives" },
-      { id: 3, name: "Tropical Escapes", localisation: "Seychelles" },
-    ],
-    selectedAgency: { id: 1, name: "Beachcomber SA", localisation: "Mauritius" },
-  },
-  render: (args) => (
-    <div className='flex justify-center w-full'>
-      <UserCard {...args} />
-    </div>
-),
-};
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { UserCard } from './UserCard';
+
+const meta = {
+  title: 'Molecules/UserCard',
+  component: UserCard,
+  argTypes: {
+    onSelectAgency: { action: 'agency selected' },
+  }
+} satisfies Meta<typeof UserCard>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args:{
+    user: {
+      name: "John Doe",
+      agency: "Beachcomber SA",
+      isAdmin: true,
+    },
+    agencies: [
+      { id: 1, name: "Beachcomber SA", localisation: "Mauritius" },
+      { id: 2, name: "Sun Resorts", localisation: "Maldives" },
+      { id: 3, name: "Tropical Escapes", localisation: "Seychelles" },
+    ],
+    selectedAgency: { id: 1, name: "Beachcomber SA", localisation: "Mauritius" },
+  },
+  render: (args) => (
+    <div className='flex justify-center w-full'>
+      <UserCard {...args} />
+    </div>
+),
+};

package/src/components/molecules/UserCard/UserCard.tsx

@@ -1,173 +1,173 @@
-import React, { useEffect, useMemo, useRef, useState } from "react";
-import { Avatar } from "../../atoms/Avatar/Avatar";
-
-type User = {
-  name: string;
-  agency: string;
-  isAdmin: boolean;
-};
-
-type Agency = {
-  id: number;
-  name: string;
-  localisation: string;
-};
-
-export interface UserCardProps {
-  user: User;
-  agencies: Agency[];
-  onSelectAgency?: (agency: Agency) => void;
-  selectedAgency?: Agency; // ✅ keep type as Agency
-  className?: string;
-}
-
-export const UserCard: React.FC<UserCardProps> = ({
-  user,
-  agencies,
-  onSelectAgency,
-  selectedAgency,
-  className = "",
-}) => {
-  const [open, setOpen] = useState(false);
-  const [query, setQuery] = useState("");
-  const rootRef = useRef<HTMLDivElement>(null);
-  const searchRef = useRef<HTMLInputElement>(null);
-
-  // Close dropdown on outside click
-  useEffect(() => {
-    if (!user.isAdmin || !open) return;
-    const handleClickOutside = (e: MouseEvent) => {
-      if (!rootRef.current?.contains(e.target as Node)) setOpen(false);
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, [open, user.isAdmin]);
-
-  // Auto-focus search input when dropdown opens
-  useEffect(() => {
-    if (user.isAdmin && open) setTimeout(() => searchRef.current?.focus(), 0);
-  }, [open, user.isAdmin]);
-
-  // Filter agencies based on query
-  const filteredAgencies = useMemo(() => {
-    const q = query.trim().toLowerCase();
-    if (!q) return agencies;
-    return agencies.filter(
-      (a) =>
-        a.name.toLowerCase().includes(q) ||
-        a.localisation.toLowerCase().includes(q)
-    );
-  }, [agencies, query]);
-
-  const handleSelect = (a: Agency) => {
-    onSelectAgency?.(a);
-    setOpen(false);
-    setQuery("");
-  };
-
-  return (
-    <div ref={rootRef} className={`relative inline-flex items-center gap-3 ${className} ${user.isAdmin ? "cursor-pointer rounded-[11px] border border-[#D9D9D9] bg-white px-[13px] py-2" : ""}`}>
-      {/* Greeting */}
-      <div className="flex items-center gap-3">
-        <Avatar name={user.name} size="md" shape="circle" />
-        <div className="flex flex-col leading-tight">
-          <div className="text-[13px] text-muted-foreground">
-            Welcome back,{" "}
-            <span className="font-medium text-foreground">{user.name}</span>{" "}
-            <span aria-hidden>👋</span>
-          </div>
-          <div className="text-[13px] font-semibold text-foreground">
-            {selectedAgency ? selectedAgency.name : user.agency}
-          </div>
-        </div>
-      </div>
-
-      {/* Admin-only: Dropdown selector */}
-      {user.isAdmin && (
-        <>
-          <button
-            type="button"
-            aria-expanded={open}
-            aria-haspopup="listbox"
-            onClick={() => setOpen((v) => !v)}
-            className="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-teal-600 text-white shadow-[0_2px_6px_rgba(0,0,0,0.15)] outline-none focus-visible:ring-2 focus-visible:ring-teal-300"
-            title="Open agency selector"
-          >
-            <svg
-              width="18"
-              height="18"
-              viewBox="0 0 24 24"
-              aria-hidden="true"
-              className={`transition-transform ${open ? "rotate-180" : ""}`}
-            >
-              <path
-                d="M6 9l6 6 6-6"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-            </svg>
-          </button>
-
-          {open && (
-            <div className="absolute right-0 top-12 z-50 w-[340px] rounded-2xl border border-black/5 bg-white p-3 shadow-[0_12px_30px_rgba(0,0,0,0.15)]">
-              {/* Search */}
-              <div className="relative mb-3">
-                <input
-                  ref={searchRef}
-                  value={query}
-                  onChange={(e) => setQuery(e.target.value)}
-                  placeholder="Search"
-                  className="w-full rounded-xl border border-black/10 bg-white px-10 py-2 text-sm outline-none focus:border-black/20 shadow-[inset_0_1px_2px_rgba(0,0,0,0.06)]"
-                />
-                <div className="absolute -translate-y-1/2 pointer-events-none left-3 top-1/2">
-                  <svg width="18" height="18" viewBox="0 0 24 24">
-                    <path
-                      d="M21 21l-4.3-4.3M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15z"
-                      fill="none"
-                      stroke="currentColor"
-                      strokeWidth="1.6"
-                      strokeLinecap="round"
-                    />
-                  </svg>
-                </div>
-              </div>
-
-              {/* Agency List */}
-              <ul role="listbox" className="pr-1 overflow-auto max-h-64">
-                {filteredAgencies.map((a) => {
-                  const isActive = selectedAgency?.id === a.id;
-                  return (
-                    <li key={a.id}>
-                      <button
-                        type="button"
-                        onClick={() => handleSelect(a)}
-                        className={`flex w-full items-center justify-between gap-3 rounded-lg px-2 py-2 text-left hover:bg-black/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-300 ${
-                          isActive ? "bg-black/[0.04]" : ""
-                        }`}
-                        aria-selected={isActive}
-                        role="option"
-                      >
-                        <span className="text-[14px]">{a.name}</span>
-                        <span className="text-[13px] font-semibold">
-                          {a.localisation}
-                        </span>
-                      </button>
-                    </li>
-                  );
-                })}
-                {filteredAgencies.length === 0 && (
-                  <li className="px-2 py-6 text-sm text-center text-muted-foreground">
-                    No results
-                  </li>
-                )}
-              </ul>
-            </div>
-          )}
-        </>
-      )}
-    </div>
-  );
-};
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { Avatar } from "../../atoms/Avatar/Avatar";
+
+type User = {
+  name: string;
+  agency: string;
+  isAdmin: boolean;
+};
+
+type Agency = {
+  id: number;
+  name: string;
+  localisation: string;
+};
+
+export interface UserCardProps {
+  user: User;
+  agencies: Agency[];
+  onSelectAgency?: (agency: Agency) => void;
+  selectedAgency?: Agency; // ✅ keep type as Agency
+  className?: string;
+}
+
+export const UserCard: React.FC<UserCardProps> = ({
+  user,
+  agencies,
+  onSelectAgency,
+  selectedAgency,
+  className = "",
+}) => {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const rootRef = useRef<HTMLDivElement>(null);
+  const searchRef = useRef<HTMLInputElement>(null);
+
+  // Close dropdown on outside click
+  useEffect(() => {
+    if (!user.isAdmin || !open) return;
+    const handleClickOutside = (e: MouseEvent) => {
+      if (!rootRef.current?.contains(e.target as Node)) setOpen(false);
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [open, user.isAdmin]);
+
+  // Auto-focus search input when dropdown opens
+  useEffect(() => {
+    if (user.isAdmin && open) setTimeout(() => searchRef.current?.focus(), 0);
+  }, [open, user.isAdmin]);
+
+  // Filter agencies based on query
+  const filteredAgencies = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return agencies;
+    return agencies.filter(
+      (a) =>
+        a.name.toLowerCase().includes(q) ||
+        a.localisation.toLowerCase().includes(q)
+    );
+  }, [agencies, query]);
+
+  const handleSelect = (a: Agency) => {
+    onSelectAgency?.(a);
+    setOpen(false);
+    setQuery("");
+  };
+
+  return (
+    <div ref={rootRef} className={`relative inline-flex items-center gap-3 ${className} ${user.isAdmin ? "cursor-pointer rounded-[11px] border border-[#D9D9D9] bg-white px-[13px] py-2" : ""}`}>
+      {/* Greeting */}
+      <div className="flex items-center gap-3">
+        <Avatar name={user.name} size="md" shape="circle" />
+        <div className="flex flex-col leading-tight">
+          <div className="text-[13px] text-muted-foreground">
+            Welcome back,{" "}
+            <span className="font-medium text-foreground">{user.name}</span>{" "}
+            <span aria-hidden>👋</span>
+          </div>
+          <div className="text-[13px] font-semibold text-foreground">
+            {selectedAgency ? selectedAgency.name : user.agency}
+          </div>
+        </div>
+      </div>
+
+      {/* Admin-only: Dropdown selector */}
+      {user.isAdmin && (
+        <>
+          <button
+            type="button"
+            aria-expanded={open}
+            aria-haspopup="listbox"
+            onClick={() => setOpen((v) => !v)}
+            className="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-teal-600 text-white shadow-[0_2px_6px_rgba(0,0,0,0.15)] outline-none focus-visible:ring-2 focus-visible:ring-teal-300"
+            title="Open agency selector"
+          >
+            <svg
+              width="18"
+              height="18"
+              viewBox="0 0 24 24"
+              aria-hidden="true"
+              className={`transition-transform ${open ? "rotate-180" : ""}`}
+            >
+              <path
+                d="M6 9l6 6 6-6"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+          </button>
+
+          {open && (
+            <div className="absolute right-0 top-12 z-50 w-[340px] rounded-2xl border border-black/5 bg-white p-3 shadow-[0_12px_30px_rgba(0,0,0,0.15)]">
+              {/* Search */}
+              <div className="relative mb-3">
+                <input
+                  ref={searchRef}
+                  value={query}
+                  onChange={(e) => setQuery(e.target.value)}
+                  placeholder="Search"
+                  className="w-full rounded-xl border border-black/10 bg-white px-10 py-2 text-sm outline-none focus:border-black/20 shadow-[inset_0_1px_2px_rgba(0,0,0,0.06)]"
+                />
+                <div className="absolute -translate-y-1/2 pointer-events-none left-3 top-1/2">
+                  <svg width="18" height="18" viewBox="0 0 24 24">
+                    <path
+                      d="M21 21l-4.3-4.3M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15z"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="1.6"
+                      strokeLinecap="round"
+                    />
+                  </svg>
+                </div>
+              </div>
+
+              {/* Agency List */}
+              <ul role="listbox" className="pr-1 overflow-auto max-h-64">
+                {filteredAgencies.map((a) => {
+                  const isActive = selectedAgency?.id === a.id;
+                  return (
+                    <li key={a.id}>
+                      <button
+                        type="button"
+                        onClick={() => handleSelect(a)}
+                        className={`flex w-full items-center justify-between gap-3 rounded-lg px-2 py-2 text-left hover:bg-black/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-300 ${
+                          isActive ? "bg-black/[0.04]" : ""
+                        }`}
+                        aria-selected={isActive}
+                        role="option"
+                      >
+                        <span className="text-[14px]">{a.name}</span>
+                        <span className="text-[13px] font-semibold">
+                          {a.localisation}
+                        </span>
+                      </button>
+                    </li>
+                  );
+                })}
+                {filteredAgencies.length === 0 && (
+                  <li className="px-2 py-6 text-sm text-center text-muted-foreground">
+                    No results
+                  </li>
+                )}
+              </ul>
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+};

package/src/components/organisms/CardContainer/CardContainer.tsx

@@ -1,66 +1,66 @@
-import React from 'react';
-
-export type CardContainerSpacing = 'compact' | 'normal' | 'relaxed' | 'chill';
-
-export interface CardContainerProps {
-  /**
-   * The content to be displayed inside the card container
-   */
-  children: React.ReactNode;
-  
-  /**
-   * Spacing variant for the card container padding
-   * - compact: 8px padding
-   * - normal: 12px padding
-   * - relaxed: 16px padding
-   * - chill: 24px padding
-   */
-  spacing?: CardContainerSpacing;
-  
-  /**
-   * Additional CSS classes to apply to the card container
-   */
-  className?: string;
-  
-  /**
-   * Optional click handler
-   */
-  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
-  
-  /**
-   * Optional data attributes for testing or tracking
-   */
-  'data-testid'?: string;
-}
-
-/**
- * CardContainer is a versatile UI element that groups related content,
- * such as text, images, buttons, or interactive elements.
- * 
- * It supports different spacing variants to control the visual density
- * and padding of the container.
- */
-export const CardContainer: React.FC<CardContainerProps> = ({
-  children,
-  spacing = 'normal',
-  className = '',
-  onClick,
-  'data-testid': testId,
-}) => {
-  const baseClass = 'card-container';
-  const spacingClass = `card-container--spacing-${spacing}`;
-  const classes = [baseClass, spacingClass, className].filter(Boolean).join(' ');
-
-  return (
-    <div
-      className={classes}
-      onClick={onClick}
-      data-testid={testId}
-    >
-      {children}
-    </div>
-  );
-};
-
-export default CardContainer;
-
+import React from 'react';
+
+export type CardContainerSpacing = 'compact' | 'normal' | 'relaxed' | 'chill';
+
+export interface CardContainerProps {
+  /**
+   * The content to be displayed inside the card container
+   */
+  children: React.ReactNode;
+  
+  /**
+   * Spacing variant for the card container padding
+   * - compact: 8px padding
+   * - normal: 12px padding
+   * - relaxed: 16px padding
+   * - chill: 24px padding
+   */
+  spacing?: CardContainerSpacing;
+  
+  /**
+   * Additional CSS classes to apply to the card container
+   */
+  className?: string;
+  
+  /**
+   * Optional click handler
+   */
+  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+  
+  /**
+   * Optional data attributes for testing or tracking
+   */
+  'data-testid'?: string;
+}
+
+/**
+ * CardContainer is a versatile UI element that groups related content,
+ * such as text, images, buttons, or interactive elements.
+ * 
+ * It supports different spacing variants to control the visual density
+ * and padding of the container.
+ */
+export const CardContainer: React.FC<CardContainerProps> = ({
+  children,
+  spacing = 'normal',
+  className = '',
+  onClick,
+  'data-testid': testId,
+}) => {
+  const baseClass = 'card-container';
+  const spacingClass = `card-container--spacing-${spacing}`;
+  const classes = [baseClass, spacingClass, className].filter(Boolean).join(' ');
+
+  return (
+    <div
+      className={classes}
+      onClick={onClick}
+      data-testid={testId}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default CardContainer;
+