@altruist03/ui 0.0.0-stage → 0.2.0

package/package.json

@@ -1,6 +1,53 @@
 {
   "name": "@altruist03/ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.2.0",
+  "description": "Altruist design system components (ported from Tawseel Storybook).",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css",
+    "**/*.json"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./datepicker.css": "react-datepicker/dist/react-datepicker.css"
+  },
+  "files": [
+    "dist",
+    "src",
+    "assets"
+  ],
+  "scripts": {
+    "build": "tsup"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@mui/icons-material": "^6.1.0",
+    "@mui/material": "^6.1.0",
+    "@types/react-table": "^7.7.20",
+    "date-fns": "^2.30.0",
+    "react-datepicker": "^7.6.0",
+    "react-loading-skeleton": "^3.5.0",
+    "react-table": "^7.8.0"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/ThemeProvider/ThemeContext.tsx

@@ -0,0 +1,75 @@
+import { createContext, useContext, useMemo, useState, useEffect, ReactNode } from 'react';
+import {
+  getTokens,
+  getScreen,
+  getBreakpoints,
+  type ResolvedTokens,
+  type BrandKey,
+  type ThemeMode,
+} from '../tokens';
+
+export interface ThemeContextValue {
+  brand: BrandKey;
+  mode: ThemeMode;
+  tokens: ResolvedTokens;
+}
+
+const defaultTokens = getTokens({
+  brand: 'cpc',
+  mode: 'light',
+  screen: 'desktop',
+});
+
+export const ThemeContext = createContext<ThemeContextValue>({
+  brand: 'cpc',
+  mode: 'light',
+  tokens: defaultTokens,
+});
+
+export interface DesignSystemThemeProviderProps {
+  brand?: BrandKey;
+  mode?: ThemeMode;
+  children: ReactNode;
+}
+
+export function DesignSystemThemeProvider({
+  brand = 'cpc',
+  mode = 'light',
+  children,
+}: DesignSystemThemeProviderProps) {
+  const breakpoints = useMemo(() => getBreakpoints(), []);
+  // Start with "desktop" so we never use a wrong read from before viewport is applied
+  const [screen, setScreen] = useState<ReturnType<typeof getScreen>>('desktop');
+
+  useEffect(() => {
+    const updateScreen = () => setScreen(getScreen(breakpoints));
+    // Run immediately (correct on many loads)
+    updateScreen();
+    // Run again after paint so we catch the real viewport when it was wrong on first read
+    const rafId = requestAnimationFrame(updateScreen);
+    // One more time after a short delay for slow viewport application (e.g. mobile)
+    const timeoutId = window.setTimeout(updateScreen, 100);
+    window.addEventListener('resize', updateScreen);
+    return () => {
+      cancelAnimationFrame(rafId);
+      window.clearTimeout(timeoutId);
+      window.removeEventListener('resize', updateScreen);
+    };
+  }, [breakpoints]);
+
+  const value = useMemo<ThemeContextValue>(
+    () => ({
+      brand,
+      mode,
+      tokens: getTokens({ brand, mode, screen }),
+    }),
+    [brand, mode, screen]
+  );
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+}
+
+/** Hook to read resolved tokens (mode + brand) from ThemeProvider. Falls back to default tokens if no provider. */
+export function useTokens(): ResolvedTokens {
+  const ctx = useContext(ThemeContext);
+  return ctx.tokens;
+}

package/src/ThemeProvider/index.ts

@@ -0,0 +1,7 @@
+export {
+  DesignSystemThemeProvider,
+  useTokens,
+  ThemeContext,
+  type ThemeContextValue,
+  type DesignSystemThemeProviderProps,
+} from './ThemeContext';

package/src/assets.d.ts

@@ -0,0 +1,10 @@
+declare module '*.webp' {
+  const src: string
+  export default src
+}
+
+declare module '*.css'
+declare module '*.json' {
+  const value: Record<string, unknown>
+  export default value
+}

package/src/components/Accordion/Accordion.stories.tsx

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Accordion } from "./Accordion";
+import { ToggleButton } from "../ToggleButton/ToggleButton";
+
+const meta: Meta<typeof Accordion> = {
+  title: "Design System/Accordion",
+  component: Accordion,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div style={{ padding: "24px", maxWidth: "1024px" }}>
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    title: "Nationality Category",
+    subtitle: "Expatriate",
+    showStatusIcon: true,
+    showActionIcon: true,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Accordion>;
+
+const Content = () => (
+  <div style={{ width: "100%", maxWidth: "420px" }}>
+    <div
+      style={{
+        marginBottom: "12px",
+        fontWeight: 600,
+        color: "#22313A",
+        fontSize: "14px",
+        lineHeight: "40px",
+      }}
+    >
+      What is the nationality category? <span style={{ color: "#D61F1F" }}>*</span>
+    </div>
+    <ToggleButton
+      value="expatriate"
+      options={[
+        { value: "citizen", label: "Citizen" },
+        { value: "expatriate", label: "Expatriate" },
+      ]}
+      onChange={() => {}}
+    />
+  </div>
+);
+
+export const Default: Story = {
+  args: {
+    defaultExpanded: false,
+    children: <Content />,
+  },
+};
+
+export const Expanded: Story = {
+  args: {
+    defaultExpanded: true,
+    children: <Content />,
+  },
+};
+

package/src/components/Accordion/Accordion.tsx

@@ -0,0 +1,219 @@
+import React from "react";
+import { useTokens } from "../../ThemeProvider/ThemeContext";
+import { getAccordionTokensFromResolved } from "../../tokens";
+import type { AccordionProps } from "./Accordion.types";
+
+export const Accordion = ({
+  title,
+  subtitle,
+  children,
+  expanded,
+  defaultExpanded = false,
+  onToggle,
+  disabled = false,
+  showStatusIcon = true,
+  showActionIcon = true,
+  actionLabel = "Edit section",
+  onActionClick,
+  style,
+  ...rest
+}: AccordionProps) => {
+  const resolvedTokens = useTokens();
+  const t = getAccordionTokensFromResolved(resolvedTokens);
+
+  const isControlled = typeof expanded === "boolean";
+  const [internalExpanded, setInternalExpanded] = React.useState(defaultExpanded);
+  const [isHovered, setIsHovered] = React.useState(false);
+  const [contentHeight, setContentHeight] = React.useState("0px");
+  const contentInnerRef = React.useRef<HTMLDivElement>(null);
+  const isExpanded = isControlled ? expanded : internalExpanded;
+
+  React.useEffect(() => {
+    const nextHeight = contentInnerRef.current?.scrollHeight ?? 0;
+    setContentHeight(`${nextHeight}px`);
+  }, [isExpanded, children]);
+
+  const toggleExpanded = () => {
+    if (disabled) return;
+    const next = !isExpanded;
+    if (!isControlled) setInternalExpanded(next);
+    onToggle?.(next);
+  };
+
+  const headerBackground = isExpanded
+    ? t.header.expandedBackground
+    : isHovered
+      ? t.header.hoverBackground
+      : t.header.defaultBackground;
+
+  return (
+    <div
+      style={{
+        width: t.container.width,
+        border: `${t.container.borderWidth} solid ${t.container.borderColor}`,
+        borderRadius: t.container.borderRadius,
+        overflow: "hidden",
+        backgroundColor: t.container.background,
+        ...style,
+      }}
+      {...rest}
+    >
+      <div
+        role="button"
+        tabIndex={disabled ? -1 : 0}
+        aria-expanded={isExpanded}
+        aria-disabled={disabled}
+        onClick={toggleExpanded}
+        onKeyDown={(event) => {
+          if (disabled) return;
+          if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            toggleExpanded();
+          }
+        }}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+        style={{
+          width: "100%",
+          backgroundColor: headerBackground,
+          border: "none",
+          borderBottom:
+            isExpanded && children
+              ? `${t.container.borderWidth} solid ${t.container.borderColor}`
+              : "none",
+          padding: t.header.padding,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          gap: t.header.gap,
+          cursor: disabled ? "not-allowed" : "pointer",
+          textAlign: "left",
+        }}
+      >
+        <span
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: t.header.contentGap,
+            minWidth: 0,
+            flex: 1,
+          }}
+        >
+          {showStatusIcon ? (
+            <span
+              aria-hidden
+              style={{
+                width: t.statusIcon.size,
+                height: t.statusIcon.size,
+                minWidth: t.statusIcon.size,
+                borderRadius: "50%",
+                backgroundColor: t.statusIcon.background,
+                color: t.statusIcon.color,
+                display: "inline-flex",
+                alignItems: "center",
+                justifyContent: "center",
+                fontSize: t.statusIcon.fontSize,
+                lineHeight: t.statusIcon.lineHeight,
+                fontWeight: t.statusIcon.fontWeight,
+              }}
+            >
+              {t.statusIcon.symbol}
+            </span>
+          ) : null}
+
+          <span style={{ display: "flex", flexDirection: "column", minWidth: 0 }}>
+            <span
+              style={{
+                color: t.title.color,
+                fontFamily: t.title.fontFamily,
+                fontSize: t.title.fontSize,
+                fontWeight: t.title.fontWeight,
+                lineHeight: t.title.lineHeight,
+              }}
+            >
+              {title}
+            </span>
+            {subtitle ? (
+              <span
+                style={{
+                  color: t.subtitle.color,
+                  fontFamily: t.subtitle.fontFamily,
+                  fontSize: t.subtitle.fontSize,
+                  fontStyle: t.subtitle.fontStyle,
+                  fontWeight: t.subtitle.fontWeight,
+                  lineHeight: t.subtitle.lineHeight,
+                }}
+              >
+                {subtitle}
+              </span>
+            ) : null}
+          </span>
+        </span>
+
+        {showActionIcon ? (
+          <button
+            type="button"
+            aria-label={actionLabel}
+            onClick={(event) => {
+              event.stopPropagation();
+              onActionClick?.(event);
+            }}
+            style={{
+              width: t.actionIcon.size,
+              height: t.actionIcon.size,
+              minWidth: t.actionIcon.size,
+              border: "none",
+              background: "transparent",
+              color: t.actionIcon.color,
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              padding: "0",
+              cursor: disabled ? "not-allowed" : "pointer",
+            }}
+          >
+            <svg
+              width={t.actionIcon.size}
+              height={t.actionIcon.size}
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              aria-hidden
+            >
+              <path
+                d="M14.06 4.94L19.06 9.94M5 19H10L20.06 8.94C20.651 8.34911 20.9831 7.54761 20.9831 6.712C20.9831 5.87639 20.651 5.07489 20.06 4.484C19.4691 3.89311 18.6676 3.56102 17.832 3.56102C16.9964 3.56102 16.1949 3.89311 15.604 4.484L5.544 14.544C5.189 14.899 5 15.38 5 15.882V19Z"
+                stroke="currentColor"
+                strokeWidth={t.actionIcon.strokeWidth}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+          </button>
+        ) : null}
+      </div>
+
+      {children ? (
+        <div
+          aria-hidden={!isExpanded}
+          style={{
+            maxHeight: isExpanded ? contentHeight : "0px",
+            opacity: isExpanded ? 1 : 0,
+            overflow: "hidden",
+            transition: "max-height 280ms ease, opacity 220ms ease",
+            willChange: "max-height, opacity",
+          }}
+        >
+          <div
+            ref={contentInnerRef}
+            style={{
+              padding: t.content.padding,
+              backgroundColor: t.content.background,
+            }}
+          >
+            {children}
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+};

package/src/components/Accordion/Accordion.types.ts

@@ -0,0 +1,16 @@
+import type React from "react";
+
+export interface AccordionProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onToggle"> {
+  title: string;
+  subtitle?: string;
+  children?: React.ReactNode;
+  expanded?: boolean;
+  defaultExpanded?: boolean;
+  onToggle?: (expanded: boolean) => void;
+  disabled?: boolean;
+  showStatusIcon?: boolean;
+  showActionIcon?: boolean;
+  actionLabel?: string;
+  onActionClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}