@multiplatform.one/components 6.1.0 → 6.3.0

package/src/Accordion/index.tsx

@@ -0,0 +1,419 @@
+import { CaretDownIcon } from "@phosphor-icons/react";
+import { isWeb } from "@multiplatform.one/platform";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import type { ReactNode } from "react";
+import { createContext, useCallback, useContext, useId, useMemo, useState } from "react";
+// tamagui 2.0.0-rc dropped the StackProps alias; YStackProps is the same shape.
+import type { YStackProps as StackProps, TamaguiElement } from "tamagui";
+import { Accordion as TamaguiAccordion, Text, View, YStack, withStaticProperties } from "tamagui";
+import { forwardRef } from "react";
+import { componentColors } from "../componentColors";
+import { themed } from "../icons/themed";
+
+// ── Types ─────────────────────────────────────────────────────
+
+export type AccordionVariant = "plain" | "card";
+export type AccordionType = "single" | "multiple";
+
+interface AccordionCommonProps extends Omit<StackProps, "onChange"> {
+  /** Visual variant: "plain" = edge-to-edge divider rows, "card" = each item on its own surface */
+  variant?: AccordionVariant;
+  /** Disable every item */
+  disabled?: boolean;
+  children?: ReactNode;
+}
+
+export interface AccordionSingleModeProps extends AccordionCommonProps {
+  /** Only one item open at a time (default) */
+  type?: "single";
+  /** Controlled open item value ("" = none) */
+  value?: string;
+  /** Uncontrolled initial open item value */
+  defaultValue?: string;
+  /** Fires with the open item value ("" when all closed) */
+  onValueChange?: (value: string) => void;
+  /** Whether the open item can be closed again. @default true */
+  collapsible?: boolean;
+}
+
+export interface AccordionMultipleModeProps extends AccordionCommonProps {
+  /** Any number of items open at once */
+  type: "multiple";
+  /** Controlled open item values */
+  value?: string[];
+  /** Uncontrolled initial open item values */
+  defaultValue?: string[];
+  /** Fires with the list of open item values */
+  onValueChange?: (value: string[]) => void;
+}
+
+export type AccordionProps = AccordionSingleModeProps | AccordionMultipleModeProps;
+
+/**
+ * Internal destructuring shape for AccordionRoot. Intersecting the two mode
+ * interfaces reduces to `never` (disjoint `type` literal discriminants), so
+ * merge them into one non-discriminated shape instead.
+ */
+type AccordionAnyModeProps = AccordionCommonProps & {
+  type?: AccordionType;
+  value?: string | string[];
+  defaultValue?: string | string[];
+  onValueChange?: (value: any) => void;
+  collapsible?: boolean;
+};
+
+export interface AccordionItemProps extends StackProps {
+  /** Unique value identifying this item within the accordion */
+  value: string;
+  /** Disable just this item */
+  disabled?: boolean;
+  children?: ReactNode;
+}
+
+export interface AccordionTriggerProps extends Omit<StackProps, "children"> {
+  /** Header title (string or custom node) */
+  children?: ReactNode;
+  /** Secondary line under the title */
+  description?: ReactNode;
+  /** Leading adornment (icon etc.) */
+  icon?: ReactNode;
+}
+
+export interface AccordionContentProps extends StackProps {
+  children?: ReactNode;
+}
+
+// ── Contexts ──────────────────────────────────────────────────
+
+interface AccordionCtxValue {
+  variant: AccordionVariant;
+  openValues: string[];
+  disabled?: boolean;
+}
+
+interface AccordionItemCtxValue {
+  open: boolean;
+  disabled?: boolean;
+  triggerId: string;
+  contentId: string;
+}
+
+const AccordionCtx = createContext<AccordionCtxValue>({
+  variant: "plain",
+  openValues: [],
+});
+
+const AccordionItemCtx = createContext<AccordionItemCtxValue>({
+  open: false,
+  triggerId: "",
+  contentId: "",
+});
+
+// ── Elevation ─────────────────────────────────────────────────
+// The card item frame is a plain (Collapsible) View — tamagui's `elevation`
+// token shorthand only resolves to a box-shadow on Card/Stack-family frames,
+// so convert the knob's elevation token to explicit shadow props (values
+// mirror forms/InputParts + elevationToProps; native theme emits numeric
+// tokens 20/28/44 per SB-N-04).
+
+const cardElevationShadow: Record<string, Record<string, any>> = {
+  $1: {
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.12,
+    // house light angle: blur = 2 x y-offset on every tier (Axiom 14)
+    shadowRadius: 2,
+    elevation: 2,
+  },
+  $2: {
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 3 },
+    shadowOpacity: 0.15,
+    shadowRadius: 6,
+    elevation: 4,
+  },
+  $4: {
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 10 },
+    shadowOpacity: 0.15,
+    shadowRadius: 20,
+    elevation: 8,
+  },
+};
+
+const elevationKeyAlias: Record<string, string> = { "20": "$1", "28": "$2", "44": "$4" };
+
+function getCardElevationProps(token: string | number | undefined): Record<string, any> {
+  if (token == null) return {};
+  const key = elevationKeyAlias[String(token)] ?? String(token);
+  const shadow = cardElevationShadow[key] ?? cardElevationShadow.$2;
+  if (isWeb) {
+    const { elevation: _elevation, ...webShadow } = shadow;
+    return webShadow;
+  }
+  return shadow;
+}
+
+// ── Chevron ───────────────────────────────────────────────────
+
+const ThemedCaretDown = themed(CaretDownIcon as any);
+
+function Chevron({ open }: { open: boolean }) {
+  const { knobProps } = useResolvedKnobs();
+  return (
+    <View
+      alignItems="center"
+      justifyContent="center"
+      rotate={open ? "180deg" : "0deg"}
+      {...(knobProps.transition ? { transition: knobProps.transition } : {})}
+    >
+      <ThemedCaretDown color={componentColors.text.secondary} size={16} />
+    </View>
+  );
+}
+
+// ── Root ──────────────────────────────────────────────────────
+
+const AccordionRoot = forwardRef<TamaguiElement, AccordionProps>(function Accordion(props, ref) {
+  const {
+    type = "single",
+    value: valueProp,
+    defaultValue,
+    onValueChange,
+    variant = "plain",
+    disabled,
+    children,
+    ...stackProps
+  } = props as AccordionAnyModeProps;
+  const collapsible =
+    type === "single" ? ((props as AccordionSingleModeProps).collapsible ?? true) : true;
+  const { knobProps } = useResolvedKnobs();
+
+  // Controlled-or-uncontrolled shim: MP1 always drives the tamagui primitive
+  // as controlled so items can render open state (chevron, card styling).
+  const isControlled = valueProp !== undefined;
+  const [internalValue, setInternalValue] = useState<string | string[]>(
+    defaultValue ?? (type === "multiple" ? [] : ""),
+  );
+  const current = isControlled ? valueProp : internalValue;
+
+  const handleValueChange = useCallback(
+    (next: string | string[]) => {
+      if (!isControlled) setInternalValue(next);
+      onValueChange?.(next as any);
+    },
+    [isControlled, onValueChange],
+  );
+
+  const openValues = useMemo<string[]>(
+    () => (Array.isArray(current) ? current : current ? [current] : []),
+    [current],
+  );
+
+  const ctx = useMemo<AccordionCtxValue>(
+    () => ({ variant, openValues, disabled }),
+    [variant, openValues, disabled],
+  );
+
+  const cardProps = variant === "card" ? { gap: knobProps.gap.gap } : {};
+
+  return (
+    <AccordionCtx.Provider value={ctx}>
+      <TamaguiAccordion
+        ref={ref}
+        // union-narrowing across single/multiple modes; collapsible only
+        // exists on the single-mode primitive — passing it in multiple mode
+        // leaks a non-boolean `collapsible` attribute onto the DOM node
+        {...({
+          type,
+          value: current,
+          onValueChange: handleValueChange,
+          ...(type === "single" ? { collapsible } : {}),
+        } as any)}
+        disabled={disabled}
+        width="100%"
+        {...cardProps}
+        {...stackProps}
+      >
+        {children}
+      </TamaguiAccordion>
+    </AccordionCtx.Provider>
+  );
+});
+
+// ── Item ──────────────────────────────────────────────────────
+
+const AccordionItem = forwardRef<TamaguiElement, AccordionItemProps>(function AccordionItem(
+  { value, disabled: disabledProp, children, ...props },
+  ref,
+) {
+  const { knobProps } = useResolvedKnobs();
+  const { variant, openValues, disabled: rootDisabled } = useContext(AccordionCtx);
+  const open = openValues.includes(value);
+  const disabled = rootDisabled || disabledProp;
+
+  // Stable ids for aria wiring (React.useId is stable across renders —
+  // the FrappeUI Heading unstable-id failure mode does not apply).
+  const uid = useId();
+  const itemCtx = useMemo<AccordionItemCtxValue>(
+    () => ({
+      open,
+      disabled,
+      triggerId: `mp1-accordion-trigger-${uid}`,
+      contentId: `mp1-accordion-content-${uid}`,
+    }),
+    [open, disabled, uid],
+  );
+
+  const { elevation: elevationToken, ...elevatedSurfaceRest } = knobProps.elevatedSurface as any;
+  const variantProps =
+    variant === "card"
+      ? {
+          // card surface honoring radius/elevation/border knobs
+          ...elevatedSurfaceRest,
+          ...getCardElevationProps(elevationToken),
+        }
+      : {
+          // plain: edge-to-edge divider rows (SP-EDGE)
+          borderBottomWidth: 1,
+          borderColor: componentColors.surface.border,
+        };
+
+  return (
+    <AccordionItemCtx.Provider value={itemCtx}>
+      <TamaguiAccordion.Item
+        ref={ref}
+        value={value}
+        disabled={disabled}
+        {...variantProps}
+        {...props}
+      >
+        {children}
+      </TamaguiAccordion.Item>
+    </AccordionItemCtx.Provider>
+  );
+});
+
+// ── Trigger (header row) ──────────────────────────────────────
+
+const AccordionTrigger = forwardRef<TamaguiElement, AccordionTriggerProps>(
+  function AccordionTrigger({ children, description, icon, ...props }, ref) {
+    const { knobProps } = useResolvedKnobs();
+    const { variant } = useContext(AccordionCtx);
+    const item = useContext(AccordionItemCtx);
+    const paddingToken = knobProps.panelPadding.padding;
+
+    return (
+      // Heading wrapper for the ARIA accordion pattern. NOT tamagui's
+      // Accordion.Header — that renders a styled H1 whose 64px font/line
+      // height cascades into the row texts (and an h1 per section is wrong
+      // outline semantics anyway). View ignores `tag`, so use explicit
+      // role="heading" + aria-level for AT parity with an h3.
+      <View role="heading" aria-level={3} margin={0} width="100%">
+        <TamaguiAccordion.Trigger
+          ref={ref}
+          unstyled
+          id={item.triggerId}
+          aria-controls={item.contentId}
+          flexDirection="row"
+          alignItems="center"
+          justifyContent="space-between"
+          width="100%"
+          gap="$3"
+          minHeight={44}
+          paddingHorizontal={paddingToken}
+          paddingVertical="$3"
+          backgroundColor="transparent"
+          borderWidth={0}
+          cursor={item.disabled ? "auto" : "pointer"}
+          opacity={item.disabled ? 0.5 : 1}
+          outlineStyle="none"
+          // Interaction rows are R-SCALE (List-row class): the hover/press
+          // surface rounds with the radius knob in both variants (LC-18).
+          borderRadius={knobProps.borderRadius.borderRadius}
+          {...(!item.disabled && {
+            hoverStyle: { backgroundColor: componentColors.interactive.background },
+            pressStyle: { backgroundColor: componentColors.interactive.hover },
+          })}
+          focusVisibleStyle={{
+            outlineColor: "$outlineColor",
+            outlineWidth: 2,
+            outlineStyle: "solid",
+            outlineOffset: -2,
+          }}
+          {...(knobProps.transition ? { transition: knobProps.transition } : {})}
+          {...props}
+        >
+          {icon ? (
+            <View alignItems="center" justifyContent="center">
+              {icon}
+            </View>
+          ) : null}
+          <YStack flex={1} gap="$1">
+            {typeof children === "string" ? (
+              <Text
+                {...knobProps.body}
+                fontWeight="600"
+                // Row title type scale follows the size knob (LC-18).
+                fontSize={knobProps.sizeToken as any}
+                lineHeight={knobProps.sizeToken as any}
+                color={componentColors.text.primary}
+              >
+                {children}
+              </Text>
+            ) : (
+              children
+            )}
+            {description != null &&
+              (typeof description === "string" ? (
+                <Text
+                  {...knobProps.body}
+                  fontSize="$2"
+                  lineHeight="$2"
+                  color={componentColors.text.secondary}
+                >
+                  {description}
+                </Text>
+              ) : (
+                description
+              ))}
+          </YStack>
+          <Chevron open={item.open} />
+        </TamaguiAccordion.Trigger>
+      </View>
+    );
+  },
+);
+
+// ── Content ───────────────────────────────────────────────────
+
+const AccordionContent = forwardRef<TamaguiElement, AccordionContentProps>(
+  function AccordionContent({ children, ...props }, ref) {
+    const { knobProps } = useResolvedKnobs();
+    const item = useContext(AccordionItemCtx);
+    const paddingToken = knobProps.panelPadding.padding;
+
+    return (
+      <TamaguiAccordion.Content
+        ref={ref}
+        unstyled
+        id={item.contentId}
+        aria-labelledby={item.triggerId}
+        paddingHorizontal={paddingToken}
+        paddingBottom={paddingToken}
+        paddingTop="$1"
+        {...props}
+      >
+        {children}
+      </TamaguiAccordion.Content>
+    );
+  },
+);
+
+// ── Compound export ───────────────────────────────────────────
+
+export const Accordion = withStaticProperties(AccordionRoot, {
+  Item: AccordionItem,
+  Trigger: AccordionTrigger,
+  Content: AccordionContent,
+});

package/src/Alert/Alert.spec.tsx

@@ -0,0 +1,83 @@
+import { __resetDevWarnSeen } from "@multiplatform.one/theme";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { fireEvent } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { Alert } from "./index";
+
+describe("Alert", () => {
+  it("renders title and description with role=status for info", () => {
+    const { container } = renderWithProviders(
+      <Alert intent="info" title="Heads up">
+        Something changed.
+      </Alert>,
+    );
+    const region = container.querySelector('[role="status"]');
+    expect(region).toBeTruthy();
+    expect(container.textContent).toContain("Heads up");
+    expect(container.textContent).toContain("Something changed.");
+  });
+
+  it("uses role=alert for error and warning intents", () => {
+    const error = renderWithProviders(<Alert intent="error" title="Save failed" />);
+    expect(error.container.querySelector('[role="alert"]')).toBeTruthy();
+    const warning = renderWithProviders(<Alert intent="warning" title="Unsaved changes" />);
+    expect(warning.container.querySelector('[role="alert"]')).toBeTruthy();
+  });
+
+  it("dismisses itself (uncontrolled) and calls onDismiss", () => {
+    const onDismiss = vi.fn();
+    const { container } = renderWithProviders(
+      <Alert intent="info" title="Bye" dismissible onDismiss={onDismiss} />,
+    );
+    const dismiss = container.querySelector('[aria-label="Dismiss"]');
+    expect(dismiss).toBeTruthy();
+    fireEvent.click(dismiss as Element);
+    expect(onDismiss).toHaveBeenCalledTimes(1);
+    expect(container.querySelector('[role="status"]')).toBeFalsy();
+  });
+
+  it("stays visible when controlled visible=true despite dismiss press", () => {
+    const onDismiss = vi.fn();
+    const { container } = renderWithProviders(
+      <Alert intent="info" title="Pinned" dismissible visible onDismiss={onDismiss} />,
+    );
+    fireEvent.click(container.querySelector('[aria-label="Dismiss"]') as Element);
+    expect(onDismiss).toHaveBeenCalledTimes(1);
+    expect(container.querySelector('[role="status"]')).toBeTruthy();
+  });
+
+  it("renders the convenience action button", () => {
+    const onAction = vi.fn();
+    const { container } = renderWithProviders(
+      <Alert intent="error" title="Connection lost" actionLabel="Retry" onAction={onAction} />,
+    );
+    const button = container.querySelector('[role="button"]');
+    expect(button?.textContent).toContain("Retry");
+    fireEvent.click(button as Element);
+    expect(onAction).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe("Alert banned-error-word DEV warn", () => {
+  let warnSpy: ReturnType<typeof vi.spyOn>;
+
+  beforeEach(() => {
+    __resetDevWarnSeen();
+    warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    warnSpy.mockRestore();
+    __resetDevWarnSeen();
+  });
+
+  it("warns when title uses banned wording", () => {
+    renderWithProviders(<Alert intent="error" title="Sorry, an error occurred" />);
+    expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining("banned-error-word"));
+  });
+
+  it("is silent for clean copy", () => {
+    renderWithProviders(<Alert intent="error" title="Save failed" />);
+    expect(warnSpy).not.toHaveBeenCalledWith(expect.stringContaining("banned-error-word"));
+  });
+});