@altruist03/ui 0.1.0 → 0.2.0

package/src/components/Drawer/Drawer.tsx

@@ -0,0 +1,196 @@
+import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useTokens } from '../../ThemeProvider/ThemeContext';
+import { getDrawerTokensFromResolved } from '../../tokens/drawer';
+import type { DrawerProps, DrawerAnchor } from './Drawer.types';
+import { lockScroll, unlockScroll } from '../../utils/scrollLock';
+
+const ANCHOR_HORIZONTAL: DrawerAnchor[] = ['left', 'right'];
+const ANCHOR_VERTICAL: DrawerAnchor[] = ['top', 'bottom'];
+const MOBILE_MAX_WIDTH = 767;
+
+function useIsMobileScreen() {
+  const [isMobile, setIsMobile] = useState(
+    () => typeof window !== 'undefined' && window.innerWidth <= MOBILE_MAX_WIDTH
+  );
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia(`(max-width: ${MOBILE_MAX_WIDTH}px)`);
+    const update = () => setIsMobile(mediaQuery.matches);
+    update();
+    mediaQuery.addEventListener('change', update);
+    return () => mediaQuery.removeEventListener('change', update);
+  }, []);
+
+  return isMobile;
+}
+
+const BOX_SHADOW = '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)';
+
+function getTranslateValue(anchor: DrawerAnchor, isAnimating: boolean): string {
+  if (!isAnimating) return '0';
+  if (anchor === 'right' || anchor === 'bottom') return '100%';
+  return '-100%';
+}
+
+function getResolvedWidth(
+  width: string | number | undefined,
+  sizeToken: { width: string } | undefined,
+  fallback: string
+): string {
+  if (width === undefined) return sizeToken?.width ?? fallback;
+  return typeof width === 'number' ? `${width}px` : String(width);
+}
+
+const DrawerComponent: React.FC<DrawerProps> = ({
+  open,
+  onClose,
+  children,
+  anchor = 'right',
+  size = 'lg',
+  width,
+  className = '',
+  disableBackdropClose = false,
+  transitionDuration,
+}) => {
+  const resolvedTokens = useTokens();
+  const tokens = useMemo(() => getDrawerTokensFromResolved(resolvedTokens), [resolvedTokens]);
+  const isMobileScreen = useIsMobileScreen();
+
+  const [renderState, setRenderState] = useState<'unmounted' | 'entering' | 'entered' | 'exiting'>(
+    open ? 'entered' : 'unmounted'
+  );
+  const needsUnmountRef = useRef(false);
+
+  const durationMs = transitionDuration ?? 300;
+
+  useEffect(() => {
+    if (open) {
+      lockScroll();
+      setRenderState('entering');
+      const t = setTimeout(() => setRenderState('entered'), 10);
+      return () => {
+        clearTimeout(t);
+        unlockScroll();
+      };
+    }
+    setRenderState((prev) => {
+      if (prev === 'unmounted') return prev;
+      needsUnmountRef.current = true;
+      return 'exiting';
+    });
+    if (!needsUnmountRef.current) return;
+    needsUnmountRef.current = false;
+    const t = setTimeout(() => setRenderState('unmounted'), durationMs);
+    return () => clearTimeout(t);
+  }, [open, durationMs]);
+
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && open) onClose();
+    };
+    window.addEventListener('keydown', handleEscape);
+    return () => window.removeEventListener('keydown', handleEscape);
+  }, [open, onClose]);
+
+  const handleStopPropagation = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation();
+  }, []);
+
+  const isHorizontal = ANCHOR_HORIZONTAL.includes(anchor);
+  const isAnimating = renderState === 'entering' || renderState === 'exiting';
+  const translateValue = getTranslateValue(anchor, isAnimating);
+  const resolvedWidth = getResolvedWidth(width, tokens.size[size], tokens.size.lg.width);
+  const cornerRadius = isMobileScreen ? 0 : tokens.radius;
+
+  const panelStyle = useMemo<React.CSSProperties>(
+    () => ({
+      position: 'fixed',
+      top:
+        ANCHOR_VERTICAL.includes(anchor) ?
+          anchor === 'bottom' ?
+            'auto'
+          : 0
+        : 0,
+      left:
+        isHorizontal ?
+          anchor === 'right' ?
+            'auto'
+          : 0
+        : 0,
+      right:
+        isHorizontal ?
+          anchor === 'right' ?
+            0
+          : 'auto'
+        : 0,
+      bottom:
+        ANCHOR_VERTICAL.includes(anchor) ?
+          anchor === 'bottom' ?
+            0
+          : 'auto'
+        : 0,
+      maxWidth: isHorizontal ? resolvedWidth : '100%',
+      width: '100%',
+      height: isHorizontal ? '100%' : resolvedWidth,
+      backgroundColor: tokens.background,
+      boxShadow: BOX_SHADOW,
+      overflowY: 'auto',
+      overflowX: 'hidden',
+      zIndex: 1030,
+      transform: isHorizontal ? `translateX(${translateValue})` : `translateY(${translateValue})`,
+      transition: `transform ${durationMs}ms ease-in-out`,
+      borderTopLeftRadius: anchor === 'right' || anchor === 'bottom' ? cornerRadius : 0,
+      borderBottomLeftRadius: anchor === 'right' ? cornerRadius : 0,
+      borderTopRightRadius: anchor === 'left' || anchor === 'bottom' ? cornerRadius : 0,
+      borderBottomRightRadius: anchor === 'left' ? cornerRadius : 0,
+    }),
+    [
+      anchor,
+      isHorizontal,
+      resolvedWidth,
+      tokens.background,
+      cornerRadius,
+      translateValue,
+      durationMs,
+    ]
+  );
+
+  const backdropStyle = useMemo<React.CSSProperties>(
+    () => ({
+      position: 'fixed',
+      top: 0,
+      left: 0,
+      width: '100vw',
+      height: '100vh',
+      backgroundColor: tokens.backdrop.background,
+      zIndex: 1020,
+      opacity: Number(isAnimating ? tokens.backdrop.opacityHidden : tokens.backdrop.opacityVisible),
+      transition: 'opacity 0.3s ease-in-out',
+    }),
+    [isAnimating, tokens.backdrop]
+  );
+
+  if (renderState === 'unmounted') return null;
+
+  return (
+    <>
+      <div
+        role="presentation"
+        aria-hidden="true"
+        style={backdropStyle}
+        onClick={disableBackdropClose ? undefined : onClose}
+      />
+      <div
+        className={className}
+        role="dialog"
+        aria-modal="true"
+        style={panelStyle}
+        onClick={handleStopPropagation}
+      >
+        {children}
+      </div>
+    </>
+  );
+};
+
+export const Drawer = memo(DrawerComponent);

package/src/components/Drawer/Drawer.types.ts

@@ -0,0 +1,60 @@
+import type { ReactNode } from "react";
+
+/** Anchor position for the drawer panel */
+export type DrawerAnchor = "left" | "right" | "top" | "bottom";
+
+/** Size preset for drawer width/height */
+export type DrawerSize = "sm" | "md" | "lg";
+
+export interface DrawerProps {
+  /**
+   * Whether the drawer is open.
+   */
+  open: boolean;
+
+  /**
+   * Callback fired when the drawer requests to be closed
+   * (e.g. backdrop click, escape key).
+   */
+  onClose: () => void;
+
+  /**
+   * Content to render inside the drawer panel.
+   */
+  children: ReactNode;
+
+  /**
+   * Side from which the drawer slides in.
+   * @default "right"
+   */
+  anchor?: DrawerAnchor;
+
+  /**
+   * Size preset for drawer width (when anchor is left/right) or height (when anchor is top/bottom).
+   * @default "lg"
+   */
+  size?: DrawerSize;
+
+  /**
+   * Custom width or height (overrides size when anchor is left/right or top/bottom).
+   * Use for pixel values like "1200px" or "80%".
+   */
+  width?: string | number;
+
+  /**
+   * Optional CSS class name for the drawer panel (Paper).
+   */
+  className?: string;
+
+  /**
+   * Disable closing the drawer when clicking the backdrop.
+   * @default false
+   */
+  disableBackdropClose?: boolean;
+
+  /**
+   * Transition duration in ms.
+   * @default 300
+   */
+  transitionDuration?: number;
+}

package/src/components/FileUpload/FileUpload.stories.tsx

@@ -0,0 +1,162 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { FileUpload } from "./FileUpload";
+import type { FileUploadProps } from "./FileUpload.types";
+
+const meta: Meta<typeof FileUpload> = {
+  title: "Design System/FileUpload",
+  component: FileUpload,
+  tags: [],
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          padding: "24px",
+          maxWidth: "420px",
+          backgroundColor: "#E5E9EB",
+          borderRadius: "8px",
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    label: "Upload File",
+    required: true,
+    placeholder: "No file chosen",
+    buttonText: "Choose Files",
+    fullWidth: true,
+    size: "md",
+    color: "grey",
+  } as FileUploadProps,
+  argTypes: {
+    color: {
+      control: { type: "radio" },
+      options: ["grey", "white"],
+    },
+    size: {
+      control: { type: "radio" },
+      options: ["sm", "md", "lg"],
+    },
+    label: {
+      control: { type: "text" },
+    },
+    required: {
+      control: { type: "boolean" },
+    },
+    placeholder: {
+      control: { type: "text" },
+    },
+    buttonText: {
+      control: { type: "text" },
+    },
+    accept: {
+      control: { type: "text" },
+    },
+    multiple: {
+      control: { type: "boolean" },
+    },
+    disabled: {
+      control: { type: "boolean" },
+    },
+    error: {
+      control: { type: "boolean" },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof FileUpload>;
+
+export const Playground: Story = {
+  args: {
+    label: "Upload File",
+    required: true,
+    placeholder: "No file chosen",
+    buttonText: "Choose Files",
+  },
+};
+
+export const Showcase: Story = {
+  render: () => (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "24px",
+        padding: "24px",
+        backgroundColor: "#E5E9EB",
+        borderRadius: "8px",
+        maxWidth: "420px",
+      }}
+    >
+      {/* Default / Required */}
+      <FileUpload
+        label="Upload File"
+        required
+        placeholder="No file chosen"
+        buttonText="Choose Files"
+      />
+
+      {/* Optional label */}
+      <FileUpload
+        label="Upload File"
+        required={false}
+        placeholder="No file chosen"
+        buttonText="Choose Files"
+      />
+
+      {/* Multiple files */}
+      <FileUpload
+        label="Upload Multiple Files"
+        required
+        placeholder="No files chosen"
+        buttonText="Choose Files"
+        multiple
+      />
+
+      {/* Size variants */}
+      <FileUpload label="Small" size="sm" placeholder="No file chosen" buttonText="Choose Files" />
+      <FileUpload label="Medium" size="md" placeholder="No file chosen" buttonText="Choose Files" />
+      <FileUpload label="Large" size="lg" placeholder="No file chosen" buttonText="Choose Files" />
+
+      {/* With accept restriction */}
+      <FileUpload
+        label="Upload Document"
+        required
+        placeholder="No file chosen"
+        buttonText="Choose Files"
+        accept=".xlsx,.csv"
+      />
+
+      {/* Error state */}
+      <FileUpload
+        label="Upload File"
+        required
+        placeholder="No file chosen"
+        buttonText="Choose Files"
+        error
+        helperText="Please select a file to continue"
+      />
+
+      {/* Disabled state */}
+      <FileUpload
+        label="Upload File"
+        required
+        placeholder="No file chosen"
+        buttonText="Choose Files"
+        disabled
+      />
+
+      {/* Color: white */}
+      <FileUpload
+        label="Upload File (white)"
+        required
+        placeholder="No file chosen"
+        buttonText="Choose Files"
+        color="white"
+      />
+    </div>
+  ),
+};

package/src/components/FileUpload/FileUpload.tsx

@@ -0,0 +1,216 @@
+import React, { useRef, useCallback, useEffect, useContext } from "react";
+import type { FileUploadProps } from "./FileUpload.types";
+import { useTokens, ThemeContext } from "../../ThemeProvider/ThemeContext";
+import { getFileUploadTokensFromResolved } from "../../tokens";
+import { Button } from "../Button/Button";
+// import { Icon as FirebirdIcon } from "firebird-icon-lib";
+import Skeleton from "react-loading-skeleton";
+import "react-loading-skeleton/dist/skeleton.css";
+
+export const FileUpload = ({
+  size = "md",
+  color = "grey",
+  label = "Upload File",
+  required = false,
+  placeholder = "No file chosen",
+  buttonText = "Choose Files",
+  accept,
+  multiple = false,
+  disabled = false,
+  fullWidth = true,
+  value,
+  defaultValue,
+  onChange,
+  id,
+  name,
+  error = false,
+  helperText,
+  inputRef: inputRefProp,
+  skeletonLoading = false,
+}: FileUploadProps) => {
+  const internalInputRef = useRef<HTMLInputElement>(null);
+  const inputRef = inputRefProp ?? internalInputRef;
+
+  const theme = useContext(ThemeContext);
+  const resolvedTokens = useTokens();
+  const tokens = getFileUploadTokensFromResolved(resolvedTokens, size);
+  const buttonBackground =
+    theme.brand === "cpc" && theme.mode === "dark"
+      ? tokens.buttonBackground
+      : "#ffffff";
+
+  const [internalFiles, setInternalFiles] = React.useState<
+    File | File[] | null
+  >(defaultValue ?? null);
+
+  const currentFiles = value !== undefined ? value : internalFiles;
+  const displayText = React.useMemo(() => {
+    if (!currentFiles) return placeholder;
+    if (Array.isArray(currentFiles)) {
+      if (currentFiles.length === 0) return placeholder;
+      const count = currentFiles.length;
+      return count === 1 ? currentFiles[0].name : `${count} files chosen`;
+    }
+    return currentFiles.name;
+  }, [currentFiles, placeholder]);
+
+  useEffect(() => {
+    if (value !== undefined) {
+      setInternalFiles(value);
+    }
+  }, [value]);
+
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const files = e.target.files;
+      if (!files || files.length === 0) {
+        const result = null;
+        if (value === undefined) setInternalFiles(null);
+        onChange?.(result);
+        return;
+      }
+      const result = multiple ? Array.from(files) : files[0];
+      if (value === undefined) setInternalFiles(result);
+      onChange?.(result);
+      e.target.value = "";
+    },
+    [multiple, onChange, value],
+  );
+
+  const handleButtonClick = useCallback(() => {
+    if (disabled) return;
+    inputRef.current?.click();
+  }, [disabled, inputRef]);
+
+  const inputId =
+    id ??
+    name ??
+    (label ? String(label).replace(/\s+/g, "-").toLowerCase() : undefined);
+
+  const containerBackground =
+    color === "white"
+      ? tokens.containerBackgroundWhite
+      : tokens.containerBackground;
+  const containerStyle: React.CSSProperties = {
+    display: "flex",
+    alignItems: "center",
+    width: fullWidth ? "100%" : undefined,
+    minHeight: tokens.containerHeight,
+    padding: `${tokens.containerPaddingY}`,
+    gap: tokens.containerGap,
+    background: containerBackground || "#FFFFFF",
+    border: error ? tokens.containerBorderError : tokens.containerBorder,
+    borderRadius: tokens.containerBorderRadius,
+    boxSizing: "border-box",
+    opacity: disabled ? tokens.disabledOpacity : 1,
+    cursor: disabled ? "not-allowed" : "pointer",
+  };
+
+  const labelStyle: React.CSSProperties = {
+    display: "block",
+    marginBottom: tokens.labelMarginBottom,
+    fontSize: tokens.labelFontSize,
+    fontWeight: tokens.labelFontWeight,
+    fontFamily: tokens.labelFontFamily,
+    color: tokens.labelColor,
+  };
+
+  const placeholderStyle: React.CSSProperties = {
+    flex: 1,
+    minWidth: 0,
+    fontSize: tokens.placeholderFontSize,
+    fontFamily: tokens.placeholderFontFamily,
+    color: tokens.placeholderColor,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+  };
+
+  const helperStyle: React.CSSProperties = {
+    marginTop: 8,
+    fontSize: tokens.placeholderFontSize,
+    fontFamily: tokens.placeholderFontFamily,
+    color: error ? tokens.labelRequiredColor : tokens.placeholderColor,
+    display: "flex",
+    // alignItems: "center",
+    gap: 6,
+  };
+
+  const containerHeight = parseInt(tokens.containerHeight, 10) || 48;
+
+  if (skeletonLoading) {
+    return (
+      <div style={{ width: fullWidth ? "100%" : undefined }}>
+        {label != null && label !== "" && (
+          <label style={labelStyle}>
+            {required && (
+              <span
+                style={{ color: tokens.labelRequiredColor, marginRight: 4 }}
+              >
+                *
+              </span>
+            )}
+            {label}
+          </label>
+        )}
+        <Skeleton height={containerHeight} borderRadius={8} />
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ width: fullWidth ? "100%" : undefined }}>
+      {label != null && label !== "" && (
+        <label htmlFor={inputId} style={labelStyle}>
+          {required && (
+            <span style={{ color: tokens.labelRequiredColor, marginRight: 4 }}>
+              *
+            </span>
+          )}
+          {label}
+        </label>
+      )}
+      <div style={containerStyle} onClick={handleButtonClick}>
+        <Button
+          variant="grey"
+          size="sm"
+          disabled={disabled}
+          style={{
+            flexShrink: 0,
+            backgroundColor: buttonBackground,
+            border: tokens.buttonBorder?.startsWith("1px")
+              ? tokens.buttonBorder
+              : `1px solid ${tokens.buttonBorder}`,
+            color: tokens.buttonColor,
+          }}
+          onClick={(e) => {
+            e.stopPropagation();
+            handleButtonClick();
+          }}
+          type="button"
+        >
+          {buttonText}
+        </Button>
+        <span style={placeholderStyle}>{displayText}</span>
+      </div>
+      <input
+        ref={inputRef as React.RefObject<HTMLInputElement>}
+        id={inputId}
+        name={name}
+        type="file"
+        accept={accept}
+        multiple={multiple}
+        onChange={handleChange}
+        disabled={disabled}
+        style={{ display: "none" }}
+        aria-hidden
+      />
+      {helperText != null && helperText !== "" && (
+        <div style={helperStyle} role={error ? "alert" : undefined}>
+          {/* <FirebirdIcon name="info_circle" size={16} /> */}
+          <span>{helperText}</span>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/FileUpload/FileUpload.types.ts

@@ -0,0 +1,80 @@
+export type FileUploadSize = "sm" | "md" | "lg";
+
+export interface FileUploadProps {
+  /**
+   * Size of the file upload component
+   */
+  size?: FileUploadSize;
+  /**
+   * Background color variant
+   */
+  color?: "grey" | "white";
+  /**
+   * Field label shown above the input
+   */
+  label?: string;
+  /**
+   * Marks the field as required and appends "*" to the label
+   */
+  required?: boolean;
+  /**
+   * Placeholder text when no file is selected
+   */
+  placeholder?: string;
+  /**
+   * Button text for choosing files
+   */
+  buttonText?: string;
+  /**
+   * Accepted file types (e.g. ".xlsx,.csv" or "image/*")
+   */
+  accept?: string;
+  /**
+   * Whether multiple files can be selected
+   */
+  multiple?: boolean;
+  /**
+   * Disables the field
+   */
+  disabled?: boolean;
+  /**
+   * Makes the field stretch to full container width
+   */
+  fullWidth?: boolean;
+  /**
+   * Selected file(s)
+   */
+  value?: File | File[] | null;
+  /**
+   * Default file(s) for uncontrolled usage
+   */
+  defaultValue?: File | File[] | null;
+  /**
+   * Callback when file(s) are selected
+   */
+  onChange?: (files: File | File[] | null) => void;
+  /**
+   * HTML id attribute
+   */
+  id?: string;
+  /**
+   * Input name attribute
+   */
+  name?: string;
+  /**
+   * Shows error state
+   */
+  error?: boolean;
+  /**
+   * Helper or error text displayed below the field
+   */
+  helperText?: string;
+  /**
+   * Ref for the hidden file input element
+   */
+  inputRef?: React.RefObject<HTMLInputElement | null>;
+  /**
+   * Loading state - shows skeleton instead of component
+   */
+  skeletonLoading?: boolean;
+}