@multiplatform.one/components 6.1.0 → 6.3.0

package/src/images/Image/index.tsx

@@ -53,9 +53,24 @@ export function Image({
 
   if (!resolvedSrc && typeof source !== "number") return null;
 
+  // Height-only images: without this, a stretch-aligned flex parent widens the
+  // <img> to the full container width and breaks the intrinsic aspect ratio.
+  // Deriving width from the aspect (width: auto + no cross-axis stretch)
+  // mirrors how the width-only path keeps its ratio.
+  const { width, height, aspectRatio } = props as {
+    width?: unknown;
+    height?: unknown;
+    aspectRatio?: unknown;
+  };
+  const heightOnly =
+    typeof height !== "undefined" &&
+    typeof width === "undefined" &&
+    typeof aspectRatio === "undefined";
+
   return (
     <TamaguiImage
       {...(props as any)}
+      {...(heightOnly && { width: "auto", alignSelf: "flex-start" })}
       alt={alt}
       crossOrigin={crossOrigin}
       objectFit={objectFit}

package/src/images/SvgUri/SvgUri.stories.tsx

@@ -35,13 +35,28 @@ type Story = StoryObj<typeof SvgUri>;
 
 export const Basic: Story = {
   name: "Main",
-  render: () => (
-    <SvgUri
-      uri="https://raw.githubusercontent.com/simple-icons/simple-icons/develop/icons/react.svg"
-      width={100}
-      height={100}
-    />
-  ),
+  args: {
+    uri: "https://raw.githubusercontent.com/simple-icons/simple-icons/develop/icons/react.svg",
+    width: 100,
+    height: 100,
+  },
+  render: (args) => <SvgUri {...args} />,
+};
+
+export const WidthOnly: Story = {
+  args: {
+    uri: "https://raw.githubusercontent.com/simple-icons/simple-icons/develop/icons/react.svg",
+    width: 120,
+  },
+  render: (args) => <SvgUri {...args} />,
+};
+
+export const HeightOnly: Story = {
+  args: {
+    uri: "https://raw.githubusercontent.com/simple-icons/simple-icons/develop/icons/react.svg",
+    height: 120,
+  },
+  render: (args) => <SvgUri {...args} />,
 };
 
 export const DifferentSizes = () => (

package/src/index.ts

@@ -1,8 +1,17 @@
+export * from "./Alert";
 export * from "./Badge";
 export * from "./Carousel";
 export * from "./Chip";
 export * from "./DotIndicator";
+export * from "./DropdownMenu";
+export * from "./ProgressSteps";
+export * from "./Quote";
 export * from "./Skeleton";
+export * from "./SkipLink";
+export * from "./Toast";
+export * from "./Video";
+export * from "./feedback";
+export * from "./actions";
 export * from "./Wheel";
 export * from "./ErrorBoundary/index";
 export * from "./code/index";
@@ -16,8 +25,23 @@ export * from "./layouts/index";
 export * from "./surfaces";
 export * from "./views/index";
 export { unwrapText } from "./utils/unwrapText";
-export { Pagination } from "./Pagination";
-export type { PaginationProps } from "./Pagination";
+export { Pagination, getPaginationItems } from "./Pagination";
+export type { PaginationProps, PaginationItem } from "./Pagination";
+export { Accordion } from "./Accordion";
+export type {
+  AccordionProps,
+  AccordionVariant,
+  AccordionType,
+  AccordionSingleModeProps,
+  AccordionMultipleModeProps,
+  AccordionItemProps,
+  AccordionTriggerProps,
+  AccordionContentProps,
+} from "./Accordion";
+// Explicit named export wins over the `export * from "tamagui"` star export
+// (same pattern as Tooltip) so MP1 Tabs shadows the tamagui primitive.
+export { Tabs } from "./Tabs";
+export type { TabsProps, TabsItem, TabsVariant, TabsSize, TabsTriggerProps } from "./Tabs";
 export { Tooltip } from "./Tooltip";
 export type {
   TooltipProps,
@@ -25,7 +49,45 @@ export type {
   TooltipArrowProps,
   TooltipTextProps,
 } from "./Tooltip";
-export * from "tamagui";
+// Explicit named exports win over the `export * from "tamagui"` star export
+// (same pattern as Tabs/Tooltip) so the MP1 knob-aware surfaces shadow the
+// raw tamagui primitives (Card, CardHeader, CardFooter, DialogContent,
+// PopoverContent). The unthemed originals stay reachable via `tamagui`.
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  DialogContent,
+  PopoverContent,
+  SheetFrame,
+  Panel,
+} from "./surfaces";
+export type { CardProps, SurfaceTier } from "./surfaces";
+// Curated tamagui surface — replaces the old `export * from "tamagui"` star
+// export that leaked raw interactive primitives (Checkbox, Switch, Select, …)
+// under the house package name. See ./tamagui.ts for the allowlist rules and
+// tamagui.spec.ts for the guardrail locking it.
+export * from "./tamagui";
+
+// The local Toast module (star-exported above) must win over any toast names;
+// re-export it explicitly so the bare `Toast` name is unambiguous.
+export { Toast, ToastViewport, useToast } from "./Toast";
+export type { ToastProps, ToastViewportProps } from "./Toast";
+
+// lucide hamburger icon — alias bare `Menu` explicitly (tamagui's Menu is not
+// re-exported by the curated surface; the icon owns the bare name).
+export { MenuIcon as Menu, MenuIcon } from "./icons/lucide";
+
+// Raw @tamagui/toast primitives for consumers that need the imperative
+// controller/state API or the unshadowed Toast compound (MP1 Toast above
+// wins for the bare `Toast` name). Prefer useToast() for new code.
+export { Toast as TamaguiToast, useToastController, useToastState } from "@tamagui/toast";
+
+// Shadow tamagui Avatar / Fieldset with MP1 gallery components.
+export { Avatar, getInitials } from "./Avatar";
+export type { AvatarProps, AvatarSize } from "./Avatar";
+export { Fieldset } from "@multiplatform.one/forms";
+export type { FieldsetProps } from "@multiplatform.one/forms";
 
 export type { ImageProps } from "./images/Image";
 export { Image } from "./images/Image";

package/src/layouts/AsyncBoundary.spec.tsx

@@ -0,0 +1,142 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { fireEvent, screen } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { Text } from "tamagui";
+import { Badge } from "../Badge";
+import {
+  AsyncBoundary,
+  resolveAsyncStatus,
+  useAsyncCount,
+  __resetAsyncDevWarnSeen,
+} from "./AsyncBoundary";
+
+afterEach(() => {
+  __resetAsyncDevWarnSeen();
+});
+
+describe("resolveAsyncStatus", () => {
+  it("prioritizes error over loading and empty (DG-ST-01)", () => {
+    expect(resolveAsyncStatus({ error: "fail", loading: true, empty: true })).toBe("error");
+    expect(resolveAsyncStatus({ loading: true, empty: true })).toBe("loading");
+    expect(resolveAsyncStatus({ empty: true })).toBe("empty");
+    expect(resolveAsyncStatus({})).toBe("data");
+  });
+});
+
+describe("AsyncBoundary", () => {
+  let warnSpy: ReturnType<typeof vi.spyOn>;
+
+  beforeEach(() => {
+    warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    warnSpy.mockRestore();
+  });
+
+  it("renders data children when ready", () => {
+    renderWithProviders(
+      <AsyncBoundary>
+        <Text>Ready rows</Text>
+      </AsyncBoundary>,
+    );
+    expect(screen.getByText("Ready rows")).toBeInTheDocument();
+    expect(document.querySelector('[data-async-status="data"]')).toBeTruthy();
+  });
+
+  it("shows layout skeleton when loading=true (DG-ST-02)", () => {
+    renderWithProviders(<AsyncBoundary loading layout="list" />);
+    expect(document.querySelector('[data-async-skeleton="list"]')).toBeTruthy();
+    expect(document.querySelector('[data-async-status="loading"]')).toBeTruthy();
+    expect(screen.queryByText("No items found")).toBeNull();
+  });
+
+  it("shows empty chrome only when empty and not error (DG-ST-01)", () => {
+    renderWithProviders(<AsyncBoundary empty emptyTitle="Nothing here" compact />);
+    expect(screen.getByText("Nothing here")).toBeInTheDocument();
+    expect(document.querySelector('[data-async-state="empty"]')).toBeTruthy();
+    expect(document.querySelector('[data-empty-intent="neutral"]')).toBeTruthy();
+  });
+
+  it("forbids empty chrome when error is set — even if empty=true", () => {
+    renderWithProviders(
+      <AsyncBoundary
+        empty
+        emptyTitle="No items found"
+        error="Network unreachable"
+        errorTitle="Couldn't load data"
+        compact
+      />,
+    );
+    expect(screen.queryByText("No items found")).toBeNull();
+    expect(screen.getByText("Couldn't load data")).toBeInTheDocument();
+    expect(screen.getByText("Network unreachable")).toBeInTheDocument();
+    expect(document.querySelector('[data-async-state="error"]')).toBeTruthy();
+    expect(document.querySelector('[data-empty-intent="error"]')).toBeTruthy();
+    expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining("empty-chrome-ignored-on-error"));
+  });
+
+  it("calls onRetry from default error action", () => {
+    const onRetry = vi.fn();
+    renderWithProviders(<AsyncBoundary error compact onRetry={onRetry} />);
+    fireEvent.click(screen.getByText("Retry"));
+    expect(onRetry).toHaveBeenCalledTimes(1);
+  });
+
+  it("hides chrome and Badge counts on error (DG-ST-04)", () => {
+    function CountProbe() {
+      const count = useAsyncCount(12);
+      return <Text data-testid="count">{count == null ? "hidden" : String(count)}</Text>;
+    }
+    renderWithProviders(
+      <AsyncBoundary
+        error="boom"
+        chrome={
+          <Badge count={9}>
+            <Text>Inbox</Text>
+          </Badge>
+        }
+      >
+        <CountProbe />
+      </AsyncBoundary>,
+    );
+    // Chrome suppressed on error
+    expect(screen.queryByText("Inbox")).toBeNull();
+    expect(screen.queryByText("9")).toBeNull();
+    // Children not rendered in error status either
+    expect(screen.queryByTestId("count")).toBeNull();
+  });
+
+  it("exposes hideBadges to nested Badge when error slot is custom", () => {
+    renderWithProviders(
+      <AsyncBoundary
+        error={
+          <>
+            <Text>Custom failure</Text>
+            <Badge count={3}>
+              <Text>Nested</Text>
+            </Badge>
+          </>
+        }
+      />,
+    );
+    expect(screen.getByText("Custom failure")).toBeInTheDocument();
+    expect(screen.getByText("Nested")).toBeInTheDocument();
+    // Count badge suppressed via context even inside custom error slot
+    expect(screen.queryByText("3")).toBeNull();
+  });
+});
+
+describe("AsyncBoundary layout skeletons", () => {
+  it.each(["list", "table", "kanban", "dashboard", "generic"] as const)(
+    "renders %s skeleton",
+    (layout) => {
+      renderWithProviders(<AsyncBoundary loading layout={layout} />);
+      expect(document.querySelector(`[data-async-skeleton="${layout}"]`)).toBeTruthy();
+    },
+  );
+});

package/src/layouts/AsyncBoundary.stories.tsx

@@ -0,0 +1,147 @@
+import { action } from "@multiplatform.one/storybook";
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { Button } from "@multiplatform.one/forms";
+import { useState } from "react";
+import { Paragraph, Text, XStack, YStack } from "tamagui";
+import { Badge } from "../Badge";
+import { AsyncBoundary, type AsyncBoundaryLayout } from "./AsyncBoundary";
+
+const meta: Meta<typeof AsyncBoundary> = {
+  title: "Components/AsyncBoundary",
+  component: AsyncBoundary,
+  parameters: {
+    status: { type: "beta" },
+    docs: {
+      description: {
+        component:
+          "Async-state wrapper for data views (W9 / DG-ST-01,02,04 / DG-TBL-06). Priority: error → loading → empty → data. Empty chrome is forbidden when `error` is set; loading uses a layout-matched skeleton; count badges hide on failure.",
+      },
+    },
+  },
+  argTypes: {
+    layout: {
+      control: "select",
+      options: ["list", "table", "kanban", "dashboard", "generic"] satisfies AsyncBoundaryLayout[],
+    },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof AsyncBoundary>;
+
+export const Data: Story = {
+  args: {
+    layout: "list",
+  },
+  render: (args) => (
+    <AsyncBoundary {...args}>
+      <YStack gap="$2" padding="$3">
+        <Text>Row A</Text>
+        <Text>Row B</Text>
+        <Text>Row C</Text>
+      </YStack>
+    </AsyncBoundary>
+  ),
+};
+
+export const LoadingListSkeleton: Story = {
+  args: { loading: true, layout: "list" },
+};
+
+export const LoadingTableSkeleton: Story = {
+  args: { loading: true, layout: "table" },
+};
+
+export const LoadingKanbanSkeleton: Story = {
+  args: { loading: true, layout: "kanban" },
+};
+
+export const LoadingDashboardSkeleton: Story = {
+  args: { loading: true, layout: "dashboard" },
+};
+
+export const Empty: Story = {
+  args: {
+    empty: true,
+    emptyTitle: "No items found",
+    emptyDescription: "Try adjusting filters or create a new item.",
+    layout: "list",
+  },
+};
+
+export const Error: Story = {
+  args: {
+    error: "The server did not respond.",
+    errorTitle: "Couldn't load data",
+    layout: "list",
+    onRetry: action("retry"),
+  },
+};
+
+/** DG-ST-01 — empty title must not appear when error is also set. */
+export const ErrorWinsOverEmpty: Story = {
+  render: () => (
+    <AsyncBoundary
+      empty
+      emptyTitle="No items found"
+      error="Timed out waiting for the API"
+      errorTitle="Couldn't load data"
+      layout="list"
+      onRetry={action("retry")}
+    />
+  ),
+};
+
+/** DG-ST-04 — chrome/badges suppressed on failure. */
+export const HideBadgesOnFailure: Story = {
+  render: () => (
+    <AsyncBoundary
+      error="Secondary feed unavailable"
+      errorTitle="Couldn't load notifications"
+      chrome={
+        <XStack gap="$3" padding="$3" alignItems="center">
+          <Badge count={12}>
+            <Text>Inbox</Text>
+          </Badge>
+          <Paragraph>This chrome (and the count) must not render on error.</Paragraph>
+        </XStack>
+      }
+      onRetry={action("retry")}
+    />
+  ),
+};
+
+export const InteractiveCycle: Story = {
+  render: () => {
+    const [status, setStatus] = useState<"loading" | "empty" | "error" | "data">("loading");
+    return (
+      <YStack gap="$3" padding="$3" minHeight={320}>
+        <XStack gap="$2" flexWrap="wrap">
+          {(["loading", "empty", "error", "data"] as const).map((s) => (
+            <Button key={s} size="$3" onPress={() => setStatus(s)}>
+              {s}
+            </Button>
+          ))}
+        </XStack>
+        <AsyncBoundary
+          loading={status === "loading"}
+          empty={status === "empty"}
+          error={status === "error" ? "Simulated failure" : null}
+          layout="list"
+          emptyTitle="No items found"
+          onRetry={() => setStatus("loading")}
+          chrome={
+            <Badge count={4}>
+              <Text>Count</Text>
+            </Badge>
+          }
+        >
+          <YStack gap="$2">
+            <Text>Loaded item 1</Text>
+            <Text>Loaded item 2</Text>
+          </YStack>
+        </AsyncBoundary>
+      </YStack>
+    );
+  },
+};