@altruist03/ui 0.1.0 → 0.2.1

package/src/components/UploadDropzone2/UploadDropzone.tsx

@@ -0,0 +1,222 @@
+import React, { useRef, useCallback, useState } from "react";
+import type { UploadDropzoneProps } from "./UploadDropzone.types";
+import { useTokens } from "../../ThemeProvider/ThemeContext";
+import { getUploadDropzoneTokensFromResolved } from "../../tokens";
+import CloudUploadIcon from '@mui/icons-material/CloudUpload';
+
+export const UploadDropzone = ({
+  title = "Visa",
+  instructionText = "Drag & drop or click to upload",
+  hintText = "JPG, PNG or PDF",
+  buttonText = "Required",
+  accept,
+  multiple = false,
+  disabled = false,
+  fullWidth = true,
+  value,
+  onChange,
+  id,
+  name,
+  inputRef: inputRefProp,
+}: UploadDropzoneProps) => {
+  const internalInputRef = useRef<HTMLInputElement>(null);
+  const inputRef = inputRefProp ?? internalInputRef;
+
+  const [isDragOver, setIsDragOver] = useState(false);
+
+  const resolvedTokens = useTokens();
+  const tokens = getUploadDropzoneTokensFromResolved(resolvedTokens);
+  const currentFiles = value ?? null;
+  const hasUploadedFile = Array.isArray(currentFiles)
+    ? currentFiles.length > 0
+    : Boolean(currentFiles);
+  const uploadedBorder = tokens.zoneBorderActive.includes("dashed")
+    ? tokens.zoneBorderActive.replace("dashed", "solid")
+    : tokens.zoneBorderActive;
+
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const files = e.target.files;
+      if (!files || files.length === 0) {
+        onChange?.(null);
+        return;
+      }
+      const result = multiple ? Array.from(files) : files[0];
+      onChange?.(result);
+      e.target.value = "";
+    },
+    [multiple, onChange],
+  );
+
+  const handleClick = useCallback(() => {
+    if (disabled) return;
+    inputRef.current?.click();
+  }, [disabled, inputRef]);
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDragOver(false);
+      if (disabled) return;
+      const files = Array.from(e.dataTransfer.files || []);
+      if (files.length === 0) return;
+      const result = multiple ? files : files[0];
+      onChange?.(result);
+    },
+    [disabled, multiple, onChange],
+  );
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOver(true);
+  }, []);
+
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOver(false);
+  }, []);
+
+  const inputId = id ?? name ?? "upload-dropzone";
+
+  const zoneStyle: React.CSSProperties = {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    position: "relative",
+    width: fullWidth ? "100%" : undefined,
+    minHeight: "230px",
+    padding: `${tokens.zonePaddingY} ${tokens.zonePaddingX}`,
+    gap: tokens.zoneGap,
+    background:
+      isDragOver || hasUploadedFile
+        ? tokens.zoneBackgroundActive
+        : tokens.zoneBackground,
+    border:
+      hasUploadedFile && !isDragOver
+        ? uploadedBorder
+        : isDragOver
+          ? tokens.zoneBorderActive
+          : tokens.zoneBorder,
+    borderRadius: tokens.zoneBorderRadius,
+    cursor: disabled ? "not-allowed" : "pointer",
+    opacity: disabled ? tokens.disabledOpacity : 1,
+    boxSizing: "border-box",
+    transition: "all 0.2s ease",
+  };
+
+  const iconStyle: React.CSSProperties = {
+    width: tokens.iconSize,
+    height: tokens.iconSize,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    color: tokens.iconColor,
+    marginBottom: tokens.iconMarginBottom,
+  };
+
+  const titleStyle: React.CSSProperties = {
+    fontSize: tokens.titleFontSize,
+    fontWeight: tokens.titleFontWeight,
+    fontFamily: tokens.titleFontFamily,
+    lineHeight: tokens.titleLineHeight,
+    color: tokens.titleColor,
+    marginBottom: tokens.titleMarginBottom,
+    textAlign: "center",
+  };
+
+  const instructionStyle: React.CSSProperties = {
+    fontSize: tokens.instructionFontSize,
+    fontWeight: tokens.instructionFontWeight,
+    fontFamily: tokens.instructionFontFamily,
+    lineHeight: tokens.instructionLineHeight,
+    color: tokens.instructionColor,
+    marginBottom: tokens.instructionMarginBottom,
+    textAlign: "center",
+  };
+
+  const hintStyle: React.CSSProperties = {
+    fontSize: tokens.hintFontSize,
+    fontWeight: tokens.hintFontWeight,
+    fontFamily: tokens.hintFontFamily,
+    lineHeight: tokens.hintLineHeight,
+    color: tokens.hintColor,
+    marginBottom: tokens.hintMarginBottom,
+    textAlign: "center",
+  };
+
+  const requiredBadgeStyle: React.CSSProperties = {
+    fontSize: tokens.buttonFontSize,
+    fontWeight: tokens.buttonFontWeight,
+    fontFamily: tokens.buttonFontFamily,
+    lineHeight: tokens.instructionLineHeight,
+    color: tokens.buttonColor,
+    backgroundColor: tokens.buttonBackground,
+    border: tokens.buttonBorder,
+    borderRadius: tokens.buttonBorderRadius,
+    padding: `${tokens.buttonPaddingY} ${tokens.buttonPaddingX}`,
+    marginTop: tokens.selectedFileMarginTop,
+  };
+
+  const doneBadgeStyle: React.CSSProperties = {
+    position: "absolute",
+    top: "12px",
+    right: "12px",
+    backgroundColor: tokens.buttonColor,
+    color: tokens.buttonBackground,
+    borderRadius: "999px",
+    padding: "6px 12px",
+    fontSize: tokens.buttonFontSize,
+    fontWeight: tokens.buttonFontWeight,
+    lineHeight: tokens.instructionLineHeight,
+    display: "flex",
+    alignItems: "center",
+    gap: "4px",
+  };
+
+  return (
+    <div style={{ width: fullWidth ? "100%" : undefined }}>
+      <div
+        role="button"
+        tabIndex={disabled ? -1 : 0}
+        onClick={handleClick}
+        onDrop={handleDrop}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            handleClick();
+          }
+        }}
+        style={zoneStyle}
+        aria-label={instructionText}
+        aria-disabled={disabled}
+      >
+        {hasUploadedFile && <div style={doneBadgeStyle}>✓ Done</div>}
+        <div style={iconStyle}>
+        <CloudUploadIcon sx={{ fontSize: tokens.iconSize, color: tokens.iconColor }} />
+        </div>
+        {title && <div style={titleStyle}>{title}</div>}
+        <div style={instructionStyle}>{instructionText}</div>
+        <div style={hintStyle}>{hintText}</div>
+        <div style={requiredBadgeStyle}>{buttonText}</div>
+      </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
+      />
+    </div>
+  );
+};

package/src/components/UploadDropzone2/UploadDropzone.types.ts

@@ -0,0 +1,54 @@
+export interface UploadDropzoneProps {
+  /**
+   * Title shown above the drop zone
+   */
+  title?: string;
+  /**
+   * Main instruction text (e.g. "Drag & Drop Or Choose Files to Upload")
+   */
+  instructionText?: string;
+  /**
+   * Hint/restriction text (e.g. "Max file size - 5MB Allowed file extension - txt, csv, xlsx")
+   */
+  hintText?: string;
+  /**
+   * Button text
+   */
+  buttonText?: string;
+  /**
+   * Accepted file types (e.g. ".txt,.csv,.xlsx")
+   */
+  accept?: string;
+  /**
+   * Whether multiple files can be selected
+   */
+  multiple?: boolean;
+  /**
+   * Disables the drop zone
+   */
+  disabled?: boolean;
+  /**
+   * Makes the drop zone stretch to full container width
+   */
+  fullWidth?: boolean;
+  /**
+   * Selected file(s)
+   */
+  value?: 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;
+  /**
+   * Ref for the hidden file input element
+   */
+  inputRef?: React.RefObject<HTMLInputElement | null>;
+}

package/src/components/ViewEditToggle/ViewEditToggle.stories.tsx

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React, { useState } from 'react';
+
+import { ViewEditToggle } from './ViewEditToggle';
+import type { ViewEditToggleProps } from './ViewEditToggle.types';
+
+const meta: Meta<typeof ViewEditToggle> = {
+  title: 'Design System/ViewEditToggle',
+  component: ViewEditToggle,
+  decorators: [
+    (Story) => (
+      <div style={{ padding: 24, display: 'flex', justifyContent: 'flex-end' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    value: 'view',
+    ready: true,
+    size: 'md',
+  } as ViewEditToggleProps,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ViewEditToggle>;
+
+export const Playground: Story = {
+  render: function PlaygroundRender(args) {
+    const [value, setValue] = useState(args.value);
+    return <ViewEditToggle {...args} value={value} onChange={setValue} />;
+  },
+};
+
+export const EditMode: Story = {
+  render: function EditModeRender() {
+    const [value, setValue] = useState<'view' | 'edit'>('edit');
+    return <ViewEditToggle value={value} onChange={setValue} ready />;
+  },
+};

package/src/components/ViewEditToggle/ViewEditToggle.tsx

@@ -0,0 +1,239 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+import { ToggleButton } from '../ToggleButton/ToggleButton';
+import { useTokens } from '../../ThemeProvider/ThemeContext';
+import type { ViewEditToggleProps } from './ViewEditToggle.types';
+
+const VIEW_EDIT_OPTIONS = [
+  { value: 'view', label: 'View' },
+  { value: 'edit', label: 'Edit' },
+] as const;
+
+const DEFAULT_SPOTLIGHT_MESSAGE = (
+  <>
+    Switch between <strong style={{ color: '#111827' }}>View</strong> and{' '}
+    <strong style={{ color: '#52760A' }}>Edit</strong> mode to update employee details
+  </>
+);
+
+function defaultIsDismissed(key: string): boolean {
+  try {
+    return localStorage.getItem(key) === 'true';
+  } catch {
+    return false;
+  }
+}
+
+function defaultOnDismiss(key: string): void {
+  try {
+    localStorage.setItem(key, 'true');
+  } catch {
+    /* ignore */
+  }
+}
+
+export const ViewEditToggle = ({
+  value,
+  onChange,
+  ready = false,
+  size = 'md',
+  disabled = false,
+  showView = true,
+  showEdit = true,
+  spotlight,
+  ...rest
+}: ViewEditToggleProps) => {
+  const toggleRef = useRef<HTMLDivElement>(null);
+  const [spotlightRect, setSpotlightRect] = useState<DOMRect | null>(null);
+  const [showSpotlight, setShowSpotlight] = useState(false);
+
+  const isDismissed = spotlight?.isDismissed ?? defaultIsDismissed;
+  const onDismiss = spotlight?.onDismiss ?? defaultOnDismiss;
+
+  const options = VIEW_EDIT_OPTIONS.filter((option) => {
+    if (option.value === 'view') return showView;
+    if (option.value === 'edit') return showEdit;
+    return true;
+  });
+
+  const canShowToggle = options.length > 0;
+  const canShowSpotlight = canShowToggle && showView && showEdit;
+
+  useEffect(() => {
+    if (!ready || !spotlight?.storageKey || !canShowSpotlight) return;
+    if (isDismissed(spotlight.storageKey)) return;
+
+    const timer = window.setTimeout(() => {
+      if (toggleRef.current) {
+        setSpotlightRect(toggleRef.current.getBoundingClientRect());
+        setShowSpotlight(true);
+      }
+    }, 400);
+
+    return () => window.clearTimeout(timer);
+  }, [ready, spotlight?.storageKey, isDismissed, canShowSpotlight]);
+
+  const handleSkip = () => {
+    if (spotlight?.storageKey) {
+      onDismiss(spotlight.storageKey);
+    }
+    setShowSpotlight(false);
+  };
+
+  if (!canShowToggle) return null;
+
+  return (
+    <>
+      <div ref={toggleRef} {...rest}>
+        <ToggleButton
+          options={[...options]}
+          value={value}
+          onChange={(next) => onChange(next as 'view' | 'edit')}
+          size={size}
+          variant="pill"
+          disabled={disabled}
+        />
+      </div>
+
+      {showSpotlight && spotlightRect && spotlight && canShowSpotlight && (
+        <SpotlightOverlay
+          rect={spotlightRect}
+          onSkip={handleSkip}
+          message={spotlight.message ?? DEFAULT_SPOTLIGHT_MESSAGE}
+          dismissLabel={spotlight.dismissLabel ?? 'Skip'}
+        />
+      )}
+    </>
+  );
+};
+
+interface SpotlightOverlayProps {
+  rect: DOMRect;
+  onSkip: () => void;
+  message: React.ReactNode;
+  dismissLabel: string;
+}
+
+function SpotlightOverlay({ rect, onSkip, message, dismissLabel }: SpotlightOverlayProps) {
+  const resolvedTokens = useTokens();
+  const accentColor =
+    resolvedTokens.semantic?.color?.primary?.default ??
+    resolvedTokens.foundation?.colors?.green?.['500'] ??
+    '#52760A';
+
+  const pad = 10;
+  const x = rect.left - pad;
+  const y = rect.top - pad;
+  const w = rect.width + pad * 2;
+  const h = rect.height + pad * 2;
+  const rx = (h / 2).toFixed(1);
+
+  const tooltipLeft = Math.min(Math.max(x + w / 2, 120), window.innerWidth - 120);
+
+  return createPortal(
+    <div style={{ position: 'fixed', inset: 0, zIndex: 9999 }} onClick={onSkip}>
+      <svg
+        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <defs>
+          <mask id="ds-ve-spotlight-mask">
+            <rect width="100%" height="100%" fill="white" />
+            <rect x={x} y={y} width={w} height={h} rx={rx} ry={rx} fill="black" />
+          </mask>
+        </defs>
+        <rect
+          width="100%"
+          height="100%"
+          fill="rgba(0,0,0,0.58)"
+          mask="url(#ds-ve-spotlight-mask)"
+        />
+      </svg>
+
+      <div
+        style={{
+          position: 'absolute',
+          left: x - 3,
+          top: y - 3,
+          width: w + 6,
+          height: h + 6,
+          borderRadius: `calc(${rx}px + 3px)`,
+          border: `2px solid color-mix(in srgb, ${accentColor} 80%, transparent)`,
+          boxShadow: `0 0 0 4px color-mix(in srgb, ${accentColor} 20%, transparent)`,
+          pointerEvents: 'none',
+          animation: 'ds-ve-pulse 1.6s ease-in-out infinite',
+        }}
+      />
+
+      <div
+        style={{
+          position: 'absolute',
+          top: y + h + 16,
+          left: tooltipLeft,
+          transform: 'translateX(-50%)',
+          background: '#FFFFFF',
+          borderRadius: 10,
+          padding: '14px 18px',
+          boxShadow: '0 6px 24px rgba(0,0,0,0.18)',
+          minWidth: 240,
+          maxWidth: 280,
+          textAlign: 'center',
+          pointerEvents: 'auto',
+        }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div
+          style={{
+            position: 'absolute',
+            top: -7,
+            left: '50%',
+            transform: 'translateX(-50%)',
+            width: 0,
+            height: 0,
+            borderLeft: '8px solid transparent',
+            borderRight: '8px solid transparent',
+            borderBottom: '8px solid #FFFFFF',
+          }}
+        />
+
+        <p
+          style={{
+            margin: '0 0 12px',
+            fontSize: 13,
+            color: '#374151',
+            fontWeight: 500,
+            lineHeight: 1.5,
+          }}
+        >
+          {message}
+        </p>
+
+        <button
+          type="button"
+          onClick={onSkip}
+          style={{
+            background: accentColor,
+            color: '#FFFFFF',
+            border: 'none',
+            borderRadius: 6,
+            padding: '6px 20px',
+            fontSize: 13,
+            cursor: 'pointer',
+            fontWeight: 600,
+          }}
+        >
+          {dismissLabel}
+        </button>
+      </div>
+
+      <style>{`
+        @keyframes ds-ve-pulse {
+          0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, ${accentColor} 20%, transparent); }
+          50%       { box-shadow: 0 0 0 8px color-mix(in srgb, ${accentColor} 8%, transparent); }
+        }
+      `}</style>
+    </div>,
+    document.body
+  );
+}

package/src/components/ViewEditToggle/ViewEditToggle.types.ts

@@ -0,0 +1,27 @@
+import type { ReactNode } from 'react';
+
+export type ViewEditMode = 'view' | 'edit';
+
+export interface ViewEditToggleSpotlightProps {
+  storageKey: string;
+  isDismissed?: (key: string) => boolean;
+  onDismiss?: (key: string) => void;
+  message?: ReactNode;
+  dismissLabel?: string;
+}
+
+export interface ViewEditToggleProps extends Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  'onChange'
+> {
+  value: ViewEditMode;
+  onChange: (value: ViewEditMode) => void;
+  ready?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+  disabled?: boolean;
+  /** When false, hides the View option. Defaults to true. */
+  showView?: boolean;
+  /** When false, hides the Edit option. Defaults to true. */
+  showEdit?: boolean;
+  spotlight?: ViewEditToggleSpotlightProps;
+}