@altruist03/ui 0.0.0-stage → 0.2.0

package/src/components/Modal/Modal.tsx

@@ -0,0 +1,399 @@
+import React, { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { useTokens } from '../../ThemeProvider/ThemeContext';
+import { getModalTokensFromResolved } from '../../tokens/modal';
+import { CloseButton } from '../CloseButton/CloseButton';
+import { Button } from '../Button/Button';
+import type { ModalProps } from './types';
+import { lockScroll, unlockScroll } from '../../utils/scrollLock';
+
+const DEFAULT_ALERT_ICON_COLOR = '#EF4444';
+const DEFAULT_ALERT_ICON_BACKGROUND = '#FEE2E2';
+const ALERT_TITLE_COLOR = '#111827';
+const ALERT_DESC_COLOR = '#6B7280';
+const LAPTOP_MAX_WIDTH = 1024;
+
+function useIsCompactScreen() {
+  const [isCompact, setIsCompact] = useState(
+    () => typeof window !== 'undefined' && window.innerWidth <= LAPTOP_MAX_WIDTH
+  );
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia(`(max-width: ${LAPTOP_MAX_WIDTH}px)`);
+    const update = () => setIsCompact(mediaQuery.matches);
+    update();
+    mediaQuery.addEventListener('change', update);
+    return () => mediaQuery.removeEventListener('change', update);
+  }, []);
+
+  return isCompact;
+}
+
+function AlertRefreshIcon({ size = 28 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden>
+      <path
+        d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M21 3v5h-5"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M3 21v-5h5"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export const ModalComponent: React.FC<ModalProps> = ({
+  title,
+  size = 'sm',
+  isOpen,
+  onClose,
+  children,
+  className = '',
+  headerId = 'modal-header-bg',
+  style,
+  modalWidth,
+  modalsStatus,
+  setModalsStatus,
+  contentClass,
+  title_background_color,
+  text_color,
+  borderRadius,
+  variant = 'default',
+  alertDescription = 'Are you sure you want to reset the form? All unsaved changes will be lost.',
+  onAlertCancel,
+  onAlertConfirm,
+  alertCancelLabel = 'Cancel',
+  alertConfirmLabel = 'Reset',
+  alertConfirmLoading = false,
+  alertIcon,
+  alertIconColor = DEFAULT_ALERT_ICON_COLOR,
+  alertIconBackgroundColor = DEFAULT_ALERT_ICON_BACKGROUND,
+  alertConfirmVariant = 'blue',
+  hideCloseButton = false,
+  headerIcon,
+}) => {
+  const resolvedTokens = useTokens();
+  const tokens = getModalTokensFromResolved(resolvedTokens);
+
+  const _isOpen = isOpen ?? modalsStatus ?? false;
+  const _onClose = onClose ?? (() => setModalsStatus?.(false));
+
+  const [renderState, setRenderState] = useState<'unmounted' | 'entering' | 'entered' | 'exiting'>(
+    _isOpen ? 'entered' : 'unmounted'
+  );
+  const isCompactScreen = useIsCompactScreen();
+  const closeButtonSize = isCompactScreen ? 'md' : 'lg';
+
+  // Prevent background scrolling when open and handle animation state
+  useEffect(() => {
+    if (_isOpen) {
+      lockScroll();
+      setRenderState('entering');
+      const timer = setTimeout(() => setRenderState('entered'), 10);
+      return () => {
+        clearTimeout(timer);
+        unlockScroll();
+      };
+    } else {
+      if (renderState !== 'unmounted') {
+        setRenderState('exiting');
+        const timer = setTimeout(() => setRenderState('unmounted'), 300);
+        return () => clearTimeout(timer);
+      }
+    }
+  }, [_isOpen]);
+
+  if (renderState === 'unmounted') return null;
+
+  const rawModalWidth = typeof modalWidth === 'object' ? modalWidth.width : modalWidth;
+  const finalModalWidth =
+    variant === 'alert' ?
+      rawModalWidth || '420px'
+    : rawModalWidth || tokens.size[size]?.width || '550px';
+
+  const finalBackground = tokens.background;
+  const finalRadius = borderRadius || tokens.radius;
+
+  const variantTitleBackground =
+    variant === 'error' ? '#F0645A'
+    : variant === 'confirmation' ? '#52760a'
+    : variant === 'alert' ? 'transparent'
+    : tokens.title.background;
+  const variantTitleColor =
+    variant === 'confirmation' || variant === 'error' ? '#ffffff'
+    : variant === 'alert' ? ALERT_TITLE_COLOR
+    : tokens.title.color;
+
+  const finalTitleBackground = title_background_color || variantTitleBackground || 'transparent';
+  const finalTitleColor = text_color || variantTitleColor;
+
+  let transformY = '0';
+  if (renderState === 'entering') transformY = '-100vh';
+  if (renderState === 'exiting') transformY = '-100vh';
+
+  const bgOpacity =
+    renderState === 'entering' || renderState === 'exiting' ?
+      tokens.backdrop.opacityHidden
+    : tokens.backdrop.opacityVisible;
+
+  const handleAlertCancel = () => {
+    (onAlertCancel ?? _onClose)();
+  };
+
+  const modalNode = (
+    <>
+      <div
+        className="cpc-modal-backdrop"
+        style={{
+          position: 'fixed',
+          top: 0,
+          left: 0,
+          width: '100vw',
+          height: '100vh',
+          backgroundColor: tokens.backdrop.background,
+          zIndex: 1200,
+          opacity: Number(bgOpacity),
+          transition: 'opacity 0.3s ease-in-out',
+        }}
+      />
+      <div
+        className={`cpc-modal-overlay ${className} ${contentClass || ''}`}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={headerId}
+        style={{
+          position: 'fixed',
+          top: 0,
+          left: 0,
+          width: '100vw',
+          height: '100vh',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          zIndex: 1210,
+          ...style,
+        }}
+      >
+        {/*
+        Stop propagation so clicking inside the modal content
+        doesn't trigger the overlay's onClose event
+      */}
+        <div
+          className="cpc-modal-content"
+          onClick={(e) => e.stopPropagation()}
+          style={{
+            backgroundColor: finalBackground,
+            borderRadius: finalRadius,
+            width: '100%',
+            maxWidth: finalModalWidth,
+            maxHeight: '90vh',
+            display: 'flex',
+            flexDirection: 'column',
+            boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+            margin: '1.75rem',
+            transform: `translateY(${transformY})`,
+            transition: 'transform 0.3s ease-in-out',
+          }}
+        >
+          {variant === 'alert' ?
+            <div style={{ position: 'relative', padding: '28px 32px 32px' }}>
+              {!hideCloseButton && (
+                <div style={{ position: 'absolute', top: 16, right: 16 }}>
+                  <CloseButton size={closeButtonSize} onClick={_onClose} aria-label="close" />
+                </div>
+              )}
+              <div
+                style={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'center',
+                  textAlign: 'center',
+                  gap: 16,
+                  paddingTop: 8,
+                }}
+              >
+                <div
+                  aria-hidden
+                  style={{
+                    width: 56,
+                    height: 56,
+                    borderRadius: '50%',
+                    backgroundColor: alertIconBackgroundColor,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    color: alertIconColor,
+                  }}
+                >
+                  {alertIcon ?? <AlertRefreshIcon size={28} />}
+                </div>
+                <h2
+                  id={headerId}
+                  className="cpc-modal-title m-0"
+                  style={{
+                    fontSize: 20,
+                    fontWeight: 700,
+                    color: text_color || ALERT_TITLE_COLOR,
+                    margin: 0,
+                    lineHeight: 1.3,
+                  }}
+                >
+                  {title}
+                </h2>
+                <p
+                  style={{
+                    margin: 0,
+                    fontSize: 15,
+                    fontWeight: 500,
+                    color: ALERT_DESC_COLOR,
+                    lineHeight: 1.5,
+                    maxWidth: 340,
+                  }}
+                >
+                  {alertDescription}
+                </p>
+                <div
+                  style={{
+                    display: 'flex',
+                    flexDirection: 'row',
+                    flexWrap: 'wrap',
+                    gap: 12,
+                    marginTop: 8,
+                    justifyContent: 'center',
+                  }}
+                >
+                  <Button
+                    variant="grey"
+                    type="button"
+                    disabled={alertConfirmLoading}
+                    onClick={handleAlertCancel}
+                  >
+                    {alertCancelLabel}
+                  </Button>
+                  <Button
+                    variant={alertConfirmVariant}
+                    type="button"
+                    loading={alertConfirmLoading}
+                    onClick={() => onAlertConfirm?.()}
+                  >
+                    {alertConfirmLabel}
+                  </Button>
+                </div>
+              </div>
+            </div>
+          : <>
+              {/* Header */}
+              <div
+                className="cpc-modal-header"
+                id={headerId}
+                style={{
+                  backgroundColor: finalTitleBackground,
+                  color: finalTitleColor,
+                  padding: `${tokens.padding} ${tokens.padding} 16px ${tokens.padding}`,
+                  borderTopLeftRadius: finalRadius,
+                  borderTopRightRadius: finalRadius,
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  alignItems: 'center',
+                  flexShrink: 0,
+                }}
+              >
+                <h5
+                  className="cpc-modal-title section_header m-0"
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '8px',
+                    fontSize: tokens.title.typography?.fontSize,
+                    fontWeight: tokens.title.typography?.fontWeight,
+                    lineHeight: tokens.title.typography?.lineHeight,
+                    color: finalTitleColor,
+                    margin: 0,
+                  }}
+                >
+                  {(variant === 'error' || variant === 'confirmation' || headerIcon) && (
+                    <span
+                      aria-hidden="true"
+                      style={{
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        width: '20px',
+                        height: '20px',
+                        borderRadius: '50%',
+                        fontSize: '12px',
+                        fontWeight: 700,
+                        lineHeight: 1,
+                        backgroundColor: 'rgba(255, 255, 255, 0.2)',
+                        color: finalTitleColor,
+                        flexShrink: 0,
+                      }}
+                    >
+                      {headerIcon ?? (variant === 'confirmation' ? '✓' : '!')}
+                    </span>
+                  )}
+                  {title}
+                </h5>
+                {!hideCloseButton && (
+                  <CloseButton size={closeButtonSize} onClick={_onClose} aria-label="close" />
+                )}
+              </div>
+              <div
+                className="content_dividers"
+                style={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  flex: '1 1 auto',
+                  minHeight: 0,
+                  overflow: 'hidden',
+                }}
+              >
+                {/* Body */}
+                <div
+                  className=""
+                  style={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    flex: '1 1 auto',
+                    minHeight: 0,
+                    overflowY: 'auto',
+                    overflowX: 'hidden',
+                  }}
+                >
+                  {children}
+                </div>
+              </div>
+            </>
+          }
+        </div>
+      </div>
+    </>
+  );
+
+  if (typeof document === 'undefined') return modalNode;
+  return createPortal(modalNode, document.body);
+};
+
+export default ModalComponent;

package/src/components/Modal/index.ts

@@ -0,0 +1,2 @@
+export { default as Modal } from "./Modal";
+export * from "./types";

package/src/components/Modal/types.ts

@@ -0,0 +1,126 @@
+import React from 'react';
+
+export interface ModalProps {
+  /**
+   * Title displayed at the top of the modal.
+   */
+  title: string | React.ReactNode;
+
+  /**
+   * Size of the modal.
+   * @default "sm"
+   */
+  size?: 'sm' | 'lg';
+
+  /**
+   * Whether the modal is open.
+   */
+  isOpen?: boolean;
+
+  /**
+   * Callback fired when the modal requests to be closed.
+   */
+  onClose?: () => void;
+
+  /**
+   * When `true`, the header close (X) button is not rendered.
+   * Useful for blocking flows (e.g. forced password reset) where the user
+   * must complete an action before the modal can be dismissed.
+   * @default false
+   */
+  hideCloseButton?: boolean;
+
+  /**
+   * Content to render inside the modal. Optional when `variant="alert"` (layout is built-in).
+   */
+  children?: React.ReactNode;
+
+  /**
+   * Optional CSS class name for the wrapper.
+   */
+  className?: string;
+
+  /**
+   * Accessibility ID for the modal header.
+   */
+  headerId?: string;
+
+  /**
+   * Custom style for the overlay wrapper, if any.
+   */
+  style?: React.CSSProperties;
+
+  /**
+   * Visual variant for modal header styling.
+   * `alert`: centered confirmation card (icon, title, description, actions); no colored header bar.
+   * @default "default"
+   */
+  variant?: 'default' | 'error' | 'confirmation' | 'alert';
+
+  /**
+   * Body copy for `variant="alert"`. Ignored for other variants.
+   */
+  alertDescription?: React.ReactNode;
+
+  /**
+   * Cancel control for `variant="alert"`. Defaults to `onClose`.
+   */
+  onAlertCancel?: () => void;
+
+  /**
+   * Primary action for `variant="alert"` (e.g. reset form).
+   */
+  onAlertConfirm?: () => void;
+
+  /** @default "Cancel" */
+  alertCancelLabel?: string;
+
+  /** @default "Reset" */
+  alertConfirmLabel?: string;
+
+  /**
+   * Shows the design-system button spinner on the alert confirm action.
+   * Also disables cancel while true.
+   * @default false
+   */
+  alertConfirmLoading?: boolean;
+
+  /**
+   * Icon for `variant="alert"`. When omitted, a default refresh glyph is shown.
+   */
+  alertIcon?: React.ReactNode;
+
+  /**
+   * Color for the alert icon (default refresh strokes, and `color` on the icon wrapper for `currentColor` icons).
+   * @default "#EF4444"
+   */
+  alertIconColor?: string;
+
+  /**
+   * Background color of the circular icon badge for `variant="alert"`.
+   * @default "#FEE2E2" (light red; pair with `alertIconColor` for destructive flows)
+   */
+  alertIconBackgroundColor?: string;
+
+  /**
+   * Design-system button variant for the alert primary action.
+   * @default "blue"
+   */
+  alertConfirmVariant?: 'blue' | 'red' | 'grey';
+
+  /**
+   * Optional icon shown in the header badge for `confirmation` / `error` variants.
+   * When omitted, defaults to ✓ (confirmation) or ! (error).
+   */
+  headerIcon?: React.ReactNode;
+
+  // --- Legacy Props (from Modal.jsx) ---
+  modalWidth?: { width?: string | number } | string | number;
+  modalsStatus?: boolean;
+  setModalsStatus?: (status: boolean) => void;
+  open?: boolean;
+  contentClass?: string;
+  title_background_color?: string;
+  text_color?: string;
+  borderRadius?: string;
+}

package/src/components/Pagination/Pagination.stories.tsx

@@ -0,0 +1,167 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { Pagination } from "./Pagination";
+import type { PaginationSize } from "./Pagination.types";
+
+const meta: Meta<typeof Pagination> = {
+  title: "Design System/Pagination",
+  component: Pagination,
+  tags: [],
+  decorators: [(Story) => <Story />],
+  args: {
+    page: 1,
+    count: 5,
+    size: "md",
+    showFirstLast: true,
+    siblingCount: 1,
+    disabled: false,
+  },
+  argTypes: {
+    page: {
+      control: { type: "number", min: 1 },
+      description: "Current page (1-based)",
+      table: { type: { summary: "number" }, defaultValue: { summary: "1" } },
+    },
+    count: {
+      control: { type: "number", min: 1 },
+      description: "Total number of pages",
+      table: { type: { summary: "number" }, defaultValue: { summary: "5" } },
+    },
+    onPageChange: { action: "pageChange" },
+    size: {
+      control: { type: "select" },
+      options: ["xs", "sm", "md", "lg"] as PaginationSize[],
+      description: "Size of page buttons and icons",
+      table: {
+        type: { summary: "xs | sm | md | lg" },
+        defaultValue: { summary: "md" },
+      },
+    },
+    showFirstLast: {
+      control: { type: "boolean" },
+      description: "Show first/last page buttons",
+      table: { type: { summary: "boolean" }, defaultValue: { summary: "true" } },
+    },
+    siblingCount: {
+      control: { type: "number", min: 0 },
+      description: "Sibling page numbers on each side of current",
+      table: { type: { summary: "number" }, defaultValue: { summary: "1" } },
+    },
+    disabled: {
+      control: { type: "boolean" },
+      description: "Disable all buttons",
+      table: { type: { summary: "boolean" }, defaultValue: { summary: "false" } },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Pagination>;
+
+// Interactive playground with state so page updates
+function PaginationWithState(props: {
+  count: number;
+  size?: PaginationSize;
+  showFirstLast?: boolean;
+  siblingCount?: number;
+  disabled?: boolean;
+}) {
+  const [page, setPage] = useState(1);
+  return (
+    <Pagination
+      page={page}
+      count={props.count}
+      onPageChange={setPage}
+      size={props.size}
+      showFirstLast={props.showFirstLast}
+      siblingCount={props.siblingCount}
+      disabled={props.disabled}
+    />
+  );
+}
+
+export const Playground: Story = {
+  render: (args) => (
+    <PaginationWithState
+      count={args.count ?? 5}
+      size={args.size}
+      showFirstLast={args.showFirstLast}
+      siblingCount={args.siblingCount}
+      disabled={args.disabled}
+    />
+  ),
+  args: {
+    page: 1,
+    count: 5,
+    size: "md",
+    showFirstLast: true,
+    siblingCount: 1,
+    disabled: false,
+  },
+};
+
+export const Showcase: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 32, padding: 20 }}>
+      <div>
+        <h3 style={{ fontSize: 18, fontWeight: "bold", marginBottom: 16 }}>
+          Default (page 1 of 5, with ellipsis when many pages)
+        </h3>
+        <PaginationWithState count={5} />
+      </div>
+
+      <div>
+        <h3 style={{ fontSize: 18, fontWeight: "bold", marginBottom: 16 }}>
+          Many pages (current page 1 – shows 1, 2, 3, … 5)
+        </h3>
+        <PaginationWithState count={10} />
+      </div>
+
+      <div>
+        <h3 style={{ fontSize: 18, fontWeight: "bold", marginBottom: 16 }}>
+          Size variants
+        </h3>
+        <div style={{ display: "flex", flexDirection: "column", gap: 16, alignItems: "flex-start" }}>
+          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
+            <span style={{ minWidth: 60, fontSize: 14 }}>XS:</span>
+            <PaginationWithState count={5} size="xs" />
+          </div>
+          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
+            <span style={{ minWidth: 60, fontSize: 14 }}>Small:</span>
+            <PaginationWithState count={5} size="sm" />
+          </div>
+          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
+            <span style={{ minWidth: 60, fontSize: 14 }}>Medium:</span>
+            <PaginationWithState count={5} size="md" />
+          </div>
+          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
+            <span style={{ minWidth: 60, fontSize: 14 }}>Large:</span>
+            <PaginationWithState count={5} size="lg" />
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <h3 style={{ fontSize: 18, fontWeight: "bold", marginBottom: 16 }}>
+          Without first/last buttons
+        </h3>
+        <PaginationWithState count={5} showFirstLast={false} />
+      </div>
+
+      <div>
+        <h3 style={{ fontSize: 18, fontWeight: "bold", marginBottom: 16 }}>
+          Disabled
+        </h3>
+        <PaginationWithState count={5} disabled />
+      </div>
+
+      <div>
+        <h3 style={{ fontSize: 18, fontWeight: "bold", marginBottom: 16 }}>
+          Single page (no navigation)
+        </h3>
+        <PaginationWithState count={1} />
+      </div>
+    </div>
+  ),
+};