@altruist03/ui 0.1.0 → 0.2.1

package/src/components/FilterPopover/FilterPopover.stories.tsx

@@ -0,0 +1,173 @@
+import React, { useState, useRef } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { FilterPopover } from "./FilterPopover";
+import type { FilterPopoverProps } from "./FilterPopover.types";
+import { MenuButton } from "../MenuButton/MenuButton";
+import Selector from "../Selector/Selector";
+
+const meta: Meta<typeof FilterPopover> = {
+  title: "Design System/FilterPopover",
+  component: FilterPopover,
+  tags: [],
+  decorators: [
+    (Story) => (
+      <div style={{ padding: "24px", maxWidth: "520px" }}>
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    title: "Filter",
+    applyLabel: "Apply",
+    resetLabel: "Reset",
+  } as Partial<FilterPopoverProps>,
+  argTypes: {
+    title: {
+      control: { type: "text" },
+    },
+    applyLabel: {
+      control: { type: "text" },
+    },
+    resetLabel: {
+      control: { type: "text" },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof FilterPopover>;
+
+function PlaygroundWrapper(props: Partial<FilterPopoverProps>) {
+  const anchorRef = useRef<HTMLDivElement>(null);
+  const [status, setStatus] = useState<string | null>("Verified");
+  const [category, setCategory] = useState<string | null>("Type");
+  const [type, setType] = useState<string | null>("All");
+
+  const handleReset = () => {
+    setStatus(null);
+    setCategory(null);
+    setType(null);
+  };
+
+  return (
+    <div ref={anchorRef} style={{ position: "relative", display: "inline-block", minHeight: 480 }}>
+      <FilterPopover
+        open={true}
+        onClose={() => {}}
+        anchorRef={anchorRef}
+        onReset={handleReset}
+        onApply={() => {}}
+        {...props}
+      >
+        <Selector
+          label="Status Type"
+          required
+          options={["Verified", "Pending", "Rejected"]}
+          value={status}
+          onChange={(v) => setStatus(v as string | null)}
+          placeholder="Select status"
+          size="md"
+        />
+        <Selector
+          label="Select Search Category"
+          required
+          options={["Type", "Name", "ID"]}
+          value={category}
+          onChange={(v) => setCategory(v as string | null)}
+          placeholder="Select category"
+          size="md"
+        />
+        <Selector
+          label="Select Type"
+          required
+          options={["All", "SMS", "WhatsApp", "Email"]}
+          value={type}
+          onChange={(v) => setType(v as string | null)}
+          placeholder="Select type"
+          size="md"
+        />
+      </FilterPopover>
+    </div>
+  );
+}
+
+export const Playground: Story = {
+  render: (args) => <PlaygroundWrapper {...args} />,
+  args: {
+    title: "Filter",
+  },
+};
+
+function WithMenuButtonExample() {
+  const [open, setOpen] = useState(false);
+  const anchorRef = useRef<HTMLDivElement>(null);
+  const [status, setStatus] = useState<string | null>("Verified");
+  const [category, setCategory] = useState<string | null>("Type");
+  const [type, setType] = useState<string | null>("All");
+
+  const handleReset = () => {
+    setStatus(null);
+    setCategory(null);
+    setType(null);
+  };
+
+  return (
+    <div ref={anchorRef} style={{ position: "relative", display: "inline-block" }}>
+      <MenuButton open={open} onClick={() => setOpen((o) => !o)} minWidth={140}>
+        Filter
+      </MenuButton>
+      <FilterPopover
+        open={open}
+        onClose={() => setOpen(false)}
+        anchorRef={anchorRef}
+        onReset={handleReset}
+        onApply={() => {}}
+      >
+        <Selector
+          label="Status Type"
+          required
+          options={["Verified", "Pending", "Rejected"]}
+          value={status}
+          onChange={(v) => setStatus(v as string | null)}
+          placeholder="Select status"
+          size="md"
+        />
+        <Selector
+          label="Select Search Category"
+          required
+          options={["Type", "Name", "ID"]}
+          value={category}
+          onChange={(v) => setCategory(v as string | null)}
+          placeholder="Select category"
+          size="md"
+        />
+        <Selector
+          label="Select Type"
+          required
+          options={["All", "SMS", "WhatsApp", "Email"]}
+          value={type}
+          onChange={(v) => setType(v as string | null)}
+          placeholder="Select type"
+          size="md"
+        />
+      </FilterPopover>
+    </div>
+  );
+}
+
+export const Showcase: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "48px" }}>
+      {/* Always open */}
+      <div style={{ minHeight: 480 }}>
+        <PlaygroundWrapper title="Filter" />
+      </div>
+
+      {/* With MenuButton trigger (click to open) */}
+      <div style={{ display: "flex", justifyContent: "flex-end" }}>
+        <WithMenuButtonExample />
+      </div>
+    </div>
+  ),
+};

package/src/components/FilterPopover/FilterPopover.tsx

@@ -0,0 +1,310 @@
+import React, { useEffect, useRef, useCallback, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { CloseButton } from '../CloseButton/CloseButton';
+import { Button } from '../Button/Button';
+import type { FilterPopoverProps } from './FilterPopover.types';
+import { useTokens } from '../../ThemeProvider/ThemeContext';
+import { getFilterPopoverTokensFromResolved } from '../../tokens';
+
+const VIEWPORT_EDGE_MARGIN_PX = 16;
+const POPOVER_GAP_PX = 8;
+const FILTER_POPOVER_Z_INDEX = 1300;
+
+type PopoverPosition = {
+  top: number;
+  left: number;
+  width: number;
+  maxHeight: number;
+};
+
+function parseCssSize(value: string | number | undefined, viewportSize: number): number {
+  if (typeof value === 'number' && Number.isFinite(value)) return value;
+  if (value == null) return 0;
+
+  const normalized = String(value).trim();
+  if (!normalized) return 0;
+
+  if (normalized.endsWith('px')) {
+    const parsed = parseFloat(normalized);
+    return Number.isFinite(parsed) ? parsed : 0;
+  }
+
+  if (normalized.endsWith('vh')) {
+    const parsed = parseFloat(normalized);
+    return Number.isFinite(parsed) ? (parsed / 100) * viewportSize : 0;
+  }
+
+  if (/^\d+$/.test(normalized)) {
+    return parseInt(normalized, 10);
+  }
+
+  const calcMatch = normalized.match(/calc\(\s*100vh\s*-\s*(\d+)px\s*\)/i);
+  if (calcMatch) {
+    const offset = parseInt(calcMatch[1], 10);
+    return Number.isFinite(offset) ? Math.max(0, viewportSize - offset) : viewportSize;
+  }
+
+  const parsed = parseFloat(normalized);
+  return Number.isFinite(parsed) ? parsed : 0;
+}
+
+function getPopoverMinWidth(
+  minWidth: FilterPopoverProps['minWidth'],
+  tokenMinWidth: string | number | undefined,
+  viewportWidth: number
+): number {
+  const resolved =
+    minWidth ??
+    (typeof tokenMinWidth === 'string' && /^\d+$/.test(tokenMinWidth) ?
+      `${tokenMinWidth}px`
+    : tokenMinWidth);
+
+  const parsed = parseCssSize(resolved, viewportWidth);
+  return parsed > 0 ? parsed : 320;
+}
+
+export function FilterPopover({
+  open,
+  onClose,
+  anchorRef,
+  children,
+  onReset,
+  onApply,
+  applyLabel = 'Apply',
+  resetLabel = 'Reset',
+  minWidth,
+  minHeight,
+  title = 'Filter',
+}: FilterPopoverProps) {
+  const popoverRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [popoverPosition, setPopoverPosition] = useState<PopoverPosition | null>(null);
+  const resolvedTokens = useTokens();
+  const tokens = getFilterPopoverTokensFromResolved(resolvedTokens);
+
+  const resolvedMinHeight =
+    minHeight ??
+    (typeof tokens.minHeight === 'string' && /^\d+$/.test(tokens.minHeight) ?
+      `${tokens.minHeight}px`
+    : tokens.minHeight);
+
+  const updatePosition = useCallback(() => {
+    const anchor = anchorRef.current;
+    const popover = popoverRef.current;
+    if (!anchor) return;
+
+    const rect = anchor.getBoundingClientRect();
+    const viewportWidth = Math.max(0, window.innerWidth || document.documentElement.clientWidth);
+    const viewportHeight = Math.max(0, window.innerHeight || document.documentElement.clientHeight);
+    const margin = VIEWPORT_EDGE_MARGIN_PX;
+    const gap = POPOVER_GAP_PX;
+
+    const minWidthPx = getPopoverMinWidth(minWidth, tokens.minWidth, viewportWidth);
+    const maxAllowedWidth = Math.max(0, viewportWidth - margin * 2);
+    const width = Math.min(Math.max(minWidthPx, rect.width), maxAllowedWidth);
+
+    let left = rect.right - width;
+    left = Math.max(margin, Math.min(left, viewportWidth - margin - width));
+
+    const maxHeightTokenPx = parseCssSize(tokens.maxHeight, viewportHeight) || viewportHeight * 0.6;
+    const measuredHeight = popover?.offsetHeight ?? 0;
+    const spaceBelow = Math.max(0, viewportHeight - rect.bottom - gap - margin);
+    const spaceAbove = Math.max(0, rect.top - gap - margin);
+
+    let top = rect.bottom + gap;
+    let maxHeight = Math.min(maxHeightTokenPx, spaceBelow);
+
+    if (measuredHeight > 0 && measuredHeight > spaceBelow && spaceAbove > spaceBelow) {
+      maxHeight = Math.min(maxHeightTokenPx, spaceAbove);
+      top = Math.max(margin, rect.top - gap - Math.min(measuredHeight, maxHeight));
+    }
+
+    setPopoverPosition({ top, left, width, maxHeight });
+  }, [anchorRef, minWidth, tokens.maxHeight, tokens.minWidth]);
+
+  const handleClickOutside = useCallback(
+    (e: MouseEvent) => {
+      const target = e.target as Node;
+      const element = target as Element;
+
+      const isInsideAnchor = anchorRef.current?.contains(target);
+      const isInsidePopover = popoverRef.current?.contains(target);
+
+      const isInsideSelectorListbox =
+        element?.closest?.('.selector-listbox') || element?.closest?.('.select-scroll-listbox');
+      const isInsideSelectorOption = element?.closest?.('[role="option"]');
+      const isInsideSelectorContainer = element?.closest?.('[role="combobox"]');
+
+      const isInsideDatePicker =
+        element?.closest?.('.react-datepicker-popper') ||
+        element?.closest?.('.react-datepicker') ||
+        element?.closest?.('#react-datepicker-portal');
+
+      if (
+        !isInsideAnchor &&
+        !isInsidePopover &&
+        !isInsideSelectorListbox &&
+        !isInsideSelectorOption &&
+        !isInsideSelectorContainer &&
+        !isInsideDatePicker
+      ) {
+        onClose();
+      }
+    },
+    [anchorRef, onClose]
+  );
+
+  useEffect(() => {
+    if (!open) {
+      setPopoverPosition(null);
+      return;
+    }
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [open, handleClickOutside]);
+
+  useEffect(() => {
+    if (!open) return;
+
+    const runPositionUpdate = () => {
+      updatePosition();
+      requestAnimationFrame(updatePosition);
+    };
+
+    runPositionUpdate();
+
+    window.addEventListener('resize', runPositionUpdate);
+    window.addEventListener('scroll', runPositionUpdate, true);
+
+    const resizeObserver = new ResizeObserver(runPositionUpdate);
+    if (anchorRef.current) {
+      resizeObserver.observe(anchorRef.current);
+    }
+    if (popoverRef.current) {
+      resizeObserver.observe(popoverRef.current);
+    }
+    if (contentRef.current) {
+      resizeObserver.observe(contentRef.current);
+    }
+
+    return () => {
+      window.removeEventListener('resize', runPositionUpdate);
+      window.removeEventListener('scroll', runPositionUpdate, true);
+      resizeObserver.disconnect();
+    };
+  }, [open, updatePosition, anchorRef, children]);
+
+  if (!open || typeof document === 'undefined') return null;
+
+  const panelMinHeight =
+    typeof resolvedMinHeight === 'number' ? `${resolvedMinHeight}px` : resolvedMinHeight;
+
+  const panelStyle: React.CSSProperties = {
+    position: 'fixed',
+    top: popoverPosition?.top ?? -9999,
+    left: popoverPosition?.left ?? -9999,
+    width: popoverPosition?.width,
+    minWidth: popoverPosition?.width,
+    maxWidth: popoverPosition?.width,
+    minHeight: panelMinHeight,
+    maxHeight: popoverPosition?.maxHeight ?? tokens.maxHeight,
+    background: tokens.background,
+    border: tokens.border,
+    borderRadius: tokens.borderRadius,
+    boxShadow: tokens.boxShadow,
+    zIndex: FILTER_POPOVER_Z_INDEX,
+    display: 'flex',
+    flexDirection: 'column',
+    boxSizing: 'border-box',
+    overflow: 'hidden',
+    visibility: popoverPosition ? 'visible' : 'hidden',
+  };
+
+  return createPortal(
+    <div ref={popoverRef} role="dialog" aria-label={title} style={panelStyle}>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          padding: tokens.headerPadding,
+          background: tokens.headerBackground,
+          marginBottom: tokens.headerMarginBottom,
+          borderRadius: tokens.innerBorderRadius,
+          flexShrink: 0,
+        }}
+      >
+        <span
+          style={{
+            margin: 0,
+            fontSize: tokens.headerTitleFontSize,
+            fontWeight: parseInt(tokens.headerTitleFontWeight, 10),
+            color: tokens.headerTitleColor,
+            lineHeight: '24px',
+            fontFamily: 'inherit',
+          }}
+        >
+          {title}
+        </span>
+        <CloseButton size="lg" variant="filled" aria-label="Close filter" onClick={onClose} />
+      </div>
+
+      <div
+        ref={contentRef}
+        style={{
+          flex: 1,
+          display: 'flex',
+          flexDirection: 'column',
+          gap: tokens.contentGap,
+          padding: tokens.contentPadding,
+          minHeight: 0,
+          overflowY: 'auto',
+          overflowX: 'hidden',
+        }}
+      >
+        {children}
+      </div>
+
+      {(onReset || onApply) && (
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            flexWrap: 'wrap',
+            gap: tokens.footerGap,
+            padding: tokens.footerPadding,
+            marginTop: tokens.footerMarginTop,
+            flexShrink: 0,
+          }}
+        >
+          {onReset && (
+            <Button
+              variant="grey"
+              size="sm"
+              onClick={() => {
+                onReset();
+              }}
+            >
+              {resetLabel}
+            </Button>
+          )}
+          {onApply && (
+            <Button
+              variant="blue"
+              size="sm"
+              onClick={() => {
+                onApply();
+                onClose();
+              }}
+            >
+              {applyLabel}
+            </Button>
+          )}
+        </div>
+      )}
+    </div>,
+    document.body
+  );
+}

package/src/components/FilterPopover/FilterPopover.types.ts

@@ -0,0 +1,26 @@
+import type { ReactNode } from "react";
+
+export interface FilterPopoverProps {
+  /** Whether the popover is open */
+  open: boolean;
+  /** Callback to close the popover */
+  onClose: () => void;
+  /** Ref to the anchor element (e.g. MenuButton wrapper) for positioning */
+  anchorRef: React.RefObject<HTMLElement | null>;
+  /** Filter fields and content - pass Selectors or custom form fields */
+  children: ReactNode;
+  /** Callback when Reset button is clicked */
+  onReset?: () => void;
+  /** Callback when Apply button is clicked */
+  onApply?: () => void;
+  /** Label for the Apply button */
+  applyLabel?: string;
+  /** Label for the Reset button */
+  resetLabel?: string;
+  /** Override minimum width */
+  minWidth?: number | string;
+  /** Override minimum height */
+  minHeight?: number | string;
+  /** Header title */
+  title?: string;
+}

package/src/components/ImageViewer/ImageViewerToolbar.jsx

@@ -0,0 +1,81 @@
+import React from 'react';
+
+import RestartAltOutlinedIcon from '@mui/icons-material/RestartAltOutlined';
+import RotateRightOutlinedIcon from '@mui/icons-material/RotateRightOutlined';
+import ZoomInOutlinedIcon from '@mui/icons-material/ZoomInOutlined';
+import ZoomOutOutlinedIcon from '@mui/icons-material/ZoomOutOutlined';
+import { IconButton } from '@mui/material';
+
+// Shared toolbar for image preview modals: zoom in/out, rotate and reset,
+// each independently toggleable so callers can enable only what they need.
+export default function ImageViewerToolbar({
+  isZoom = true,
+  isRotate = true,
+  isReset = true,
+  zoom = 1,
+  minZoom = 0.5,
+  maxZoom = 3,
+  onZoomIn,
+  onZoomOut,
+  onRotate,
+  onReset,
+  style,
+  className = '',
+}) {
+  if (!isZoom && !isRotate && !isReset) return null;
+
+  return (
+    <div
+      className={['image-viewer-toolbar', className].filter(Boolean).join(' ')}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+        gap: 2,
+        ...style,
+      }}
+    >
+      {isRotate ?
+        <IconButton size="small" aria-label="Rotate image" onClick={onRotate}>
+          <RotateRightOutlinedIcon sx={{ fontSize: 20 }} />
+        </IconButton>
+      : null}
+      {isZoom ?
+        <>
+          <IconButton
+            size="small"
+            aria-label="Zoom out"
+            disabled={zoom <= minZoom}
+            onClick={onZoomOut}
+          >
+            <ZoomOutOutlinedIcon sx={{ fontSize: 20 }} />
+          </IconButton>
+          <span
+            style={{
+              minWidth: 44,
+              fontSize: 13,
+              fontWeight: 600,
+              color: '#374151',
+              textAlign: 'center',
+            }}
+          >
+            {Math.round(zoom * 100)}%
+          </span>
+          <IconButton
+            size="small"
+            aria-label="Zoom in"
+            disabled={zoom >= maxZoom}
+            onClick={onZoomIn}
+          >
+            <ZoomInOutlinedIcon sx={{ fontSize: 20 }} />
+          </IconButton>
+        </>
+      : null}
+      {isReset ?
+        <IconButton size="small" aria-label="Reset image" onClick={onReset}>
+          <RestartAltOutlinedIcon sx={{ fontSize: 20 }} />
+        </IconButton>
+      : null}
+    </div>
+  );
+}

package/src/components/ImageViewer/useImagePanRotate.js

@@ -0,0 +1,102 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+// Shared drag-to-pan + rotate behaviour for image preview modals.
+// Zoom stays owned by the caller (it is often lifted to a parent component
+// so it can be reset alongside document/image navigation). Panning works by
+// dragging the scrollable preview container itself (`containerRef`), so it
+// composes with the existing width%-based zoom + native scrollbars instead
+// of fighting them with a separate CSS transform.
+/**
+ * @param {{
+ *   isRotate?: boolean,
+ *   showHand?: boolean,
+ *   resetKey?: unknown,
+ *   containerRef?: import('react').RefObject<HTMLElement>,
+ * }} [options]
+ */
+export default function useImagePanRotate({
+  isRotate = true,
+  showHand = true,
+  resetKey,
+  containerRef,
+} = {}) {
+  const [rotation, setRotation] = useState(0);
+  const [isDragging, setIsDragging] = useState(false);
+  const dragStateRef = useRef({ startX: 0, startY: 0, scrollLeft: 0, scrollTop: 0 });
+
+  // A new document/image should always open flat and scrolled to the top-left.
+  useEffect(() => {
+    setRotation(0);
+    setIsDragging(false);
+    const el = containerRef?.current;
+    if (el) {
+      el.scrollLeft = 0;
+      el.scrollTop = 0;
+    }
+  }, [resetKey]);
+
+  const rotate = useCallback(() => {
+    if (!isRotate) return;
+    setRotation((prev) => (prev + 90) % 360);
+  }, [isRotate]);
+
+  const resetTransform = useCallback(() => {
+    setRotation(0);
+    const el = containerRef?.current;
+    if (el) {
+      el.scrollLeft = 0;
+      el.scrollTop = 0;
+    }
+  }, [containerRef]);
+
+  const onMouseDown = useCallback(
+    (e) => {
+      if (!showHand) return;
+      const el = containerRef?.current;
+      if (!el) return;
+      e.preventDefault();
+      setIsDragging(true);
+      dragStateRef.current = {
+        startX: e.clientX,
+        startY: e.clientY,
+        scrollLeft: el.scrollLeft,
+        scrollTop: el.scrollTop,
+      };
+    },
+    [showHand, containerRef]
+  );
+
+  useEffect(() => {
+    if (!showHand || !isDragging) return undefined;
+
+    const handleMove = (e) => {
+      const el = containerRef?.current;
+      if (!el) return;
+      const dx = e.clientX - dragStateRef.current.startX;
+      const dy = e.clientY - dragStateRef.current.startY;
+      el.scrollLeft = dragStateRef.current.scrollLeft - dx;
+      el.scrollTop = dragStateRef.current.scrollTop - dy;
+    };
+    const handleUp = () => setIsDragging(false);
+
+    window.addEventListener('mousemove', handleMove);
+    window.addEventListener('mouseup', handleUp);
+    return () => {
+      window.removeEventListener('mousemove', handleMove);
+      window.removeEventListener('mouseup', handleUp);
+    };
+  }, [showHand, isDragging, containerRef]);
+
+  return {
+    rotation,
+    isDragging,
+    rotate,
+    resetTransform,
+    dragHandlers: showHand ? { onMouseDown } : {},
+    cursor:
+      showHand ?
+        isDragging ? 'grabbing'
+        : 'grab'
+      : 'default',
+  };
+}