@altruist03/ui 0.0.0-stage → 0.2.0

package/src/components/Menu/Menu.tsx

@@ -0,0 +1,143 @@
+import React, { useEffect, useRef, useCallback } from "react";
+import { useTokens } from "../../ThemeProvider/ThemeContext";
+import { getMenuTokensFromResolved } from "../../tokens";
+import type { MenuProps } from "./Menu.types";
+
+export function Menu({
+  open,
+  onClose,
+  items,
+  value,
+  onSelect,
+  minWidth,
+  anchorRef,
+  closeOnSelect = true,
+}: MenuProps) {
+  const resolvedTokens = useTokens();
+  const t = getMenuTokensFromResolved(resolvedTokens);
+  const resolvedMinWidth =
+    minWidth ??
+    (typeof t.minWidth === "string" && /^\d+$/.test(t.minWidth)
+      ? `${t.minWidth}px`
+      : t.minWidth);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  const handleClickOutside = useCallback(
+    (e: MouseEvent) => {
+      const target = e.target as Node;
+      if (
+        !anchorRef.current?.contains(target) &&
+        !menuRef.current?.contains(target)
+      ) {
+        onClose();
+      }
+    },
+    [anchorRef, onClose]
+  );
+
+  useEffect(() => {
+    if (!open) return;
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [open, handleClickOutside]);
+
+  const handleItemClick = useCallback(
+    (itemValue: string) => {
+      onSelect?.(itemValue);
+      if (closeOnSelect) onClose();
+    },
+    [onSelect, onClose, closeOnSelect]
+  );
+
+  if (!open) return null;
+
+  const panelStyle: React.CSSProperties = {
+    position: "absolute",
+    top: "100%",
+    right: 0,
+    marginTop: t.marginTop,
+    minWidth:
+      typeof resolvedMinWidth === "number"
+        ? `${resolvedMinWidth}px`
+        : resolvedMinWidth,
+    maxHeight: /^\d+$/.test(String(t.listMaxHeight))
+      ? `${t.listMaxHeight}px`
+      : t.listMaxHeight,
+    overflowY: "auto",
+    background: t.background,
+    borderRadius: t.borderRadius,
+    boxShadow: "0 4px 12px rgba(0, 0, 0, 0.12)",
+    padding: t.padding,
+    listStyle: "none",
+    zIndex: 1000,
+  };
+
+  const panel = (
+    <div
+      ref={menuRef}
+      role="menu"
+      aria-orientation="vertical"
+      style={panelStyle}
+    >
+      {items.map((item) => {
+        const selected = value != null && item.value === value;
+        return (
+          <div
+            key={item.value}
+            role="menuitem"
+            aria-selected={selected}
+            aria-disabled={item.disabled}
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: t.itemIconLabelGap,
+              padding: `${t.itemPaddingY} ${t.itemPaddingX}`,
+              borderRadius: t.itemBorderRadius,
+              fontFamily: t.fontFamily,
+              fontSize: t.fontSize,
+              fontWeight: t.fontWeight,
+              lineHeight: t.lineHeight,
+              color: t.textColor,
+              cursor: item.disabled ? "not-allowed" : "pointer",
+              backgroundColor: selected ? t.selectedBackground : "transparent",
+              opacity: item.disabled ? 0.6 : 1,
+            }}
+            onMouseEnter={(e) => {
+              if (!item.disabled)
+                e.currentTarget.style.backgroundColor = t.hoverBackground;
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.backgroundColor = selected
+                ? t.selectedBackground
+                : "transparent";
+            }}
+            onMouseDown={(e) => {
+              e.preventDefault();
+              if (!item.disabled) handleItemClick(item.value);
+            }}
+          >
+            {item.icon != null && (
+              <span
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  fontSize: 20,
+                  width: 20,
+                  height: 20,
+                  color: "inherit",
+                  flexShrink: 0,
+                }}
+              >
+                {item.icon}
+              </span>
+            )}
+            <span style={{ flex: 1, textAlign: "left" }}>{item.label}</span>
+          </div>
+        );
+      })}
+    </div>
+  );
+
+  return panel;
+}

package/src/components/Menu/Menu.types.ts

@@ -0,0 +1,28 @@
+import type { ReactNode, RefObject } from "react";
+
+export interface MenuItem {
+  value: string;
+  label: string;
+  /** Optional icon (e.g. MUI icon) shown left of label */
+  icon?: ReactNode;
+  disabled?: boolean;
+}
+
+export interface MenuProps {
+  /** Whether the menu is open */
+  open: boolean;
+  /** Called when menu should close (outside click or selection) */
+  onClose: () => void;
+  /** Menu options (icon + label); selected state derived from value */
+  items: MenuItem[];
+  /** Currently selected value */
+  value?: string | null;
+  /** Called when an item is selected */
+  onSelect?: (value: string) => void;
+  /** Minimum width of the dropdown panel (default from design) */
+  minWidth?: number | string;
+  /** Ref of the trigger element to position menu below */
+  anchorRef: RefObject<HTMLElement | null>;
+  /** Close when an item is selected (default true) */
+  closeOnSelect?: boolean;
+}

package/src/components/MenuButton/MenuButton.stories.tsx

@@ -0,0 +1,140 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState, useRef } from "react";
+import { MenuButton } from "./MenuButton";
+import { Menu } from "../Menu/Menu";
+import type { MenuItem } from "../Menu/Menu.types";
+import type { MenuButtonProps } from "./MenuButton.types";
+import BusinessIcon from "@mui/icons-material/Business";
+import LockIcon from "@mui/icons-material/Lock";
+import ScheduleIcon from "@mui/icons-material/Schedule";
+
+const meta: Meta<typeof MenuButton> = {
+  title: "Design System/MenuButton",
+  component: MenuButton,
+  tags: [],
+  decorators: [
+    (Story) => (
+      <div style={{ padding: "24px", maxWidth: "420px" }}>
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    children: "Button",
+    open: false,
+    disabled: false,
+    minWidth: 120,
+    variant: "blue",
+    size: "md",
+    useDefaultLabel: false,
+  } as MenuButtonProps,
+  argTypes: {
+    variant: {
+      control: { type: "select" },
+      options: ["blue", "red", "grey"],
+    },
+    size: {
+      control: { type: "radio" },
+      options: ["sm", "md", "lg"],
+    },
+    open: {
+      control: { type: "boolean" },
+      description: "Whether the menu is open (rotates chevron)",
+    },
+    disabled: {
+      control: { type: "boolean" },
+    },
+    minWidth: {
+      control: { type: "number" },
+    },
+    children: {
+      control: { type: "text" },
+      description: "Trigger label",
+    },
+    useDefaultLabel: {
+      control: { type: "boolean" },
+      description: "When true, show default label 'Button' instead of children",
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof MenuButton>;
+
+export const Playground: Story = {
+  args: {
+    children: "Button",
+    open: false,
+    minWidth: 120,
+    variant: "blue",
+    size: "md",
+  },
+};
+
+const menuItems: MenuItem[] = [
+  { value: "company", label: "Company", icon: <BusinessIcon /> },
+  { value: "security", label: "Security", icon: <LockIcon /> },
+  { value: "short-visit", label: "Short visit", icon: <ScheduleIcon /> },
+];
+
+export const Showcase: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "24px" }}>
+      {/* Default / Closed */}
+      <MenuButton open={false} minWidth={120}>
+        Button
+      </MenuButton>
+
+      {/* Open (chevron rotated) */}
+      <MenuButton open minWidth={120}>
+        Button
+      </MenuButton>
+
+      {/* With Menu – interactive */}
+      <WithMenuExample />
+
+      {/* Disabled */}
+      <MenuButton open={false} disabled minWidth={120}>
+        Button
+      </MenuButton>
+
+      {/* Grey variant */}
+      <MenuButton open={false} variant="grey" minWidth={120}>
+        Options
+      </MenuButton>
+
+      {/* useDefaultLabel: children is "Security" but label shows "Button" */}
+      <MenuButton open={false} minWidth={120} useDefaultLabel>
+        Security
+      </MenuButton>
+    </div>
+  ),
+};
+
+function WithMenuExample() {
+  const [open, setOpen] = useState(false);
+  const [value, setValue] = useState<string | null>("security");
+  const anchorRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <div
+      ref={anchorRef}
+      style={{ position: "relative", display: "inline-block" }}
+    >
+      <MenuButton open={open} onClick={() => setOpen((o) => !o)} minWidth={120}>
+        {(menuItems.find((i) => i.value === value) ?? menuItems[0]).label}
+      </MenuButton>
+      <Menu
+        open={open}
+        onClose={() => setOpen(false)}
+        anchorRef={anchorRef}
+        items={menuItems}
+        value={value}
+        onSelect={setValue}
+        minWidth={180}
+      />
+    </div>
+  );
+}

package/src/components/MenuButton/MenuButton.tsx

@@ -0,0 +1,45 @@
+import { Button } from '../Button/Button';
+import type { MenuButtonProps } from './MenuButton.types';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+
+const DEFAULT_MIN_WIDTH = 120;
+
+export function MenuButton({
+  children,
+  open = false,
+  variant = 'blue',
+  size = 'md',
+  disabled = false,
+  minWidth = DEFAULT_MIN_WIDTH,
+  style,
+  leftIcon,
+  ...rest
+}: MenuButtonProps) {
+  return (
+    <Button
+      type="button"
+      variant={variant}
+      size={size}
+      shape="pill"
+      disabled={disabled}
+      leftIcon={leftIcon ?? null}
+      rightIcon={
+        <ExpandMoreIcon
+          style={{
+            transform: open ? 'rotate(180deg)' : 'rotate(0deg)',
+            transition: 'transform 0.2s ease',
+          }}
+        />
+      }
+      style={{
+        minWidth: typeof minWidth === 'number' ? `${minWidth}px` : minWidth,
+        ...style,
+      }}
+      aria-expanded={open}
+      aria-haspopup="menu"
+      {...rest}
+    >
+      {children}
+    </Button>
+  );
+}

package/src/components/MenuButton/MenuButton.types.ts

@@ -0,0 +1,21 @@
+import type { ButtonVariant, ButtonSize } from "../Button/Button.types";
+import type { ButtonHTMLAttributes, ReactNode, MouseEvent } from "react";
+
+export interface MenuButtonProps
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "color" | "children"> {
+  /** Trigger label (e.g. "Button", or current menu selection) */
+  children: ReactNode;
+  /** Whether the menu is open (used to rotate chevron) */
+  open?: boolean;
+  /** Button variant; default "blue" per Figma */
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  disabled?: boolean;
+  leftIcon?: ReactNode;
+  /** Minimum width of the button (default from design) */
+  minWidth?: number | string;
+  /** When true, show default label "Button" and do not change it on menu item click. Default false. */
+  useDefaultLabel?: boolean;
+  /** Click handler */
+  onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
+}

package/src/components/Modal/Modal.stories.tsx

@@ -0,0 +1,266 @@
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import Modal from './Modal';
+import { Button } from '../Button/Button';
+
+const meta: Meta<typeof Modal> = {
+  title: 'Design System/Modal',
+  component: Modal,
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <div style={{ padding: '24px', fontFamily: 'Inter, sans-serif' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    title: 'Modal Title',
+    size: 'sm',
+  },
+  argTypes: {
+    size: {
+      control: { type: 'radio' },
+      options: ['sm', 'lg'],
+    },
+    title: {
+      control: { type: 'text' },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Modal>;
+
+export const Playground: Story = {
+  render: (args) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [isOpen, setIsOpen] = useState(false);
+    return (
+      <>
+        <Button onClick={() => setIsOpen(true)}>Open Playground Modal</Button>
+        <Modal {...args} isOpen={isOpen} onClose={() => setIsOpen(false)}>
+          <div style={{ padding: '20px' }}>
+            <p>
+              This is the playground modal. You can adjust its size, title, and other properties
+              through the Storybook controls below.
+            </p>
+          </div>
+        </Modal>
+      </>
+    );
+  },
+  args: {
+    title: 'Playground Modal',
+    size: 'sm',
+  },
+};
+
+export const Showcase: Story = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [openSmall, setOpenSmall] = useState(false);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [openLarge, setOpenLarge] = useState(false);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [openConfirmation, setOpenConfirmation] = useState(false);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [openError, setOpenError] = useState(false);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [openAlert, setOpenAlert] = useState(false);
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
+        <div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }}>
+          <Button onClick={() => setOpenSmall(true)}>Open Default (Small)</Button>
+          <Button onClick={() => setOpenLarge(true)}>Open Large (1200px)</Button>
+          <Button onClick={() => setOpenConfirmation(true)}>Open Confirmation Variant</Button>
+          <Button variant="red" onClick={() => setOpenError(true)}>
+            Open Error Variant
+          </Button>
+          <Button variant="grey" onClick={() => setOpenAlert(true)}>
+            Open Alert (reset form)
+          </Button>
+        </div>
+
+        {/* Small Modal */}
+        <Modal
+          title="Default Size Modal"
+          size="sm"
+          isOpen={openSmall}
+          onClose={() => setOpenSmall(false)}
+        >
+          <div style={{ padding: '20px' }}>
+            <p>
+              This is the standard modal content. It uses the design system's spacing and typography
+              sizes automatically.
+            </p>
+          </div>
+        </Modal>
+
+        {/* Large Modal with Footer */}
+        <Modal
+          title="Large Modal Title"
+          size="lg"
+          isOpen={openLarge}
+          onClose={() => setOpenLarge(false)}
+        >
+          <div style={{ padding: '20px', display: 'flex', flexDirection: 'column', gap: '16px' }}>
+            <p>
+              This is a standard "lg" size modal. The backdrop overlay covers the entire viewport.
+              This example includes a custom action section in the body.
+            </p>
+            <div
+              style={{
+                display: 'flex',
+                justifyContent: 'flex-end',
+                gap: '10px',
+                borderTop: '1px solid #e5e7eb',
+                paddingTop: '12px',
+              }}
+            >
+              <Button variant="grey" onClick={() => setOpenLarge(false)}>
+                Cancel
+              </Button>
+              <Button onClick={() => setOpenLarge(false)}>Save Changes</Button>
+            </div>
+          </div>
+        </Modal>
+
+        {/* Confirmation Variant */}
+        <Modal
+          title="Confirm Changes"
+          size="sm"
+          isOpen={openConfirmation}
+          onClose={() => setOpenConfirmation(false)}
+          variant="confirmation"
+        >
+          <div style={{ padding: '20px', display: 'flex', flexDirection: 'column', gap: '18px' }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+              <div
+                style={{
+                  width: '36px',
+                  height: '36px',
+                  borderRadius: '999px',
+                  backgroundColor: '#d1fadf',
+                  color: '#027a48',
+                  display: 'grid',
+                  placeItems: 'center',
+                  fontWeight: 700,
+                  fontSize: '16px',
+                }}
+              >
+                Y
+              </div>
+              <div>
+                <div style={{ fontWeight: 600, color: '#111827' }}>Everything looks good</div>
+                <div style={{ fontSize: '14px', color: '#4b5563', marginTop: '2px' }}>
+                  Please confirm to apply the updated client information.
+                </div>
+              </div>
+            </div>
+            <div
+              style={{
+                backgroundColor: '#f8fafc',
+                border: '1px solid #e2e8f0',
+                borderRadius: '10px',
+                padding: '12px',
+                fontSize: '14px',
+                color: '#475467',
+              }}
+            >
+              This action will immediately save changes and refresh the client profile details.
+            </div>
+            <div
+              style={{
+                display: 'flex',
+                justifyContent: 'flex-end',
+                gap: '10px',
+                borderTop: '1px solid #e5e7eb',
+                paddingTop: '12px',
+              }}
+            >
+              <Button variant="grey" onClick={() => setOpenConfirmation(false)}>
+                Review Again
+              </Button>
+              <Button onClick={() => setOpenConfirmation(false)}>Confirm</Button>
+            </div>
+          </div>
+        </Modal>
+
+        {/* Alert variant — centered reset-style confirmation */}
+        <Modal
+          variant="alert"
+          title="Reset Form"
+          isOpen={openAlert}
+          onClose={() => setOpenAlert(false)}
+          onAlertConfirm={() => setOpenAlert(false)}
+        />
+
+        {/* Error Variant */}
+        <Modal
+          title="Unable to Continue"
+          size="sm"
+          isOpen={openError}
+          onClose={() => setOpenError(false)}
+          variant="error"
+        >
+          <div style={{ padding: '20px', display: 'flex', flexDirection: 'column', gap: '18px' }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+              <div
+                style={{
+                  width: '36px',
+                  height: '36px',
+                  borderRadius: '999px',
+                  backgroundColor: '#fee4e2',
+                  color: '#b42318',
+                  display: 'grid',
+                  placeItems: 'center',
+                  fontWeight: 700,
+                  fontSize: '16px',
+                }}
+              >
+                !
+              </div>
+              <div>
+                <div style={{ fontWeight: 600, color: '#111827' }}>Submission failed</div>
+                <div style={{ fontSize: '14px', color: '#4b5563', marginTop: '2px' }}>
+                  We could not save your request because of a validation error.
+                </div>
+              </div>
+            </div>
+            <div
+              style={{
+                backgroundColor: '#fffbfa',
+                border: '1px solid #fecdca',
+                borderRadius: '10px',
+                padding: '12px',
+                fontSize: '14px',
+                color: '#b42318',
+              }}
+            >
+              Please verify required fields and try again. If this continues, contact support.
+            </div>
+            <div
+              style={{
+                display: 'flex',
+                justifyContent: 'flex-end',
+                gap: '10px',
+                borderTop: '1px solid #e5e7eb',
+                paddingTop: '12px',
+              }}
+            >
+              <Button variant="grey" onClick={() => setOpenError(false)}>
+                Dismiss
+              </Button>
+              <Button variant="red" onClick={() => setOpenError(false)}>
+                Try Again
+              </Button>
+            </div>
+          </div>
+        </Modal>
+      </div>
+    );
+  },
+};