@multiplatform.one/components 7.6.1 → 7.6.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/components",
-  "version": "7.6.1",
+  "version": "7.6.2",
   "description": "multiplatform.one ui components",
   "keywords": [
     "components",
@@ -75,11 +75,11 @@
     "link": "^2.1.2",
     "shiki": "^4.0.2",
     "tamagui": "2.7.6",
-    "@multiplatform.one/forms": "7.6.1",
-    "@multiplatform.one/i18n": "7.6.1",
-    "@multiplatform.one/platform": "7.6.1",
-    "@multiplatform.one/router": "7.6.1",
-    "@multiplatform.one/theme": "7.6.1"
+    "@multiplatform.one/forms": "7.6.2",
+    "@multiplatform.one/i18n": "7.6.2",
+    "@multiplatform.one/platform": "7.6.2",
+    "@multiplatform.one/router": "7.6.2",
+    "@multiplatform.one/theme": "7.6.2"
   },
   "devDependencies": {
     "@tamagui/build": "2.7.6",
@@ -99,9 +99,9 @@
     "react-native-svg": "15.15.4",
     "react-native-web": "^0.21.2",
     "vitest": "^4.1.5",
-    "@multiplatform.one/config": "7.6.1",
-    "@multiplatform.one/storybook": "7.6.1",
-    "@multiplatform.one/test-utils": "7.6.1"
+    "@multiplatform.one/config": "7.6.2",
+    "@multiplatform.one/storybook": "7.6.2",
+    "@multiplatform.one/test-utils": "7.6.2"
   },
   "peerDependencies": {
     "@mdx-js/mdx": "^3.1.1",

package/src/layouts/AsyncSkeleton.stories.tsx

@@ -0,0 +1,55 @@
+/**
+ * AsyncSkeleton — the layout-matched loading face AsyncBoundary uses on
+ * first load. The boundary has stories; this export did not, so Kitchen
+ * Sink never showed the skeleton itself.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { YStack } from "tamagui";
+import { AsyncSkeleton, type AsyncBoundaryLayout } from "./AsyncBoundary";
+
+const LAYOUTS: AsyncBoundaryLayout[] = ["list", "table", "kanban", "dashboard", "generic"];
+
+const meta: Meta<typeof AsyncSkeleton> = {
+  title: "Components/AsyncSkeleton",
+  component: AsyncSkeleton,
+  parameters: {
+    status: { type: "stable" },
+    skeletonSpecimen: true,
+    docs: {
+      description: {
+        component:
+          "SKELETON SPECIMEN (D-10). Layout-matched loading placeholder (DG-ST-02). These skeletons persist because the skeleton is the subject.",
+      },
+    },
+  },
+  argTypes: {
+    layout: { control: "select", options: LAYOUTS },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof AsyncSkeleton>;
+
+export const Main: Story = {
+  name: "Main",
+  args: { layout: "list" },
+};
+
+export const List: Story = { args: { layout: "list" } };
+export const Table: Story = { args: { layout: "table" } };
+export const Kanban: Story = { args: { layout: "kanban" } };
+export const Dashboard: Story = { args: { layout: "dashboard" } };
+export const Generic: Story = { args: { layout: "generic" } };
+
+export const AllLayouts: Story = {
+  render: () => (
+    <YStack gap="$6" padding="$4">
+      {LAYOUTS.map((layout) => (
+        <YStack key={layout} gap="$2">
+          <AsyncSkeleton layout={layout} />
+        </YStack>
+      ))}
+    </YStack>
+  ),
+};

package/src/views/ListCard.stories.tsx

@@ -0,0 +1,44 @@
+/**
+ * ListCard — Frappe link card / Polaris resource list / Grafana table-lite.
+ */
+
+import { action } from "@multiplatform.one/storybook";
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { YStack } from "tamagui";
+import { ListCard } from "./Dashboard";
+
+const meta: Meta<typeof ListCard> = {
+  title: "Components/ListCard",
+  component: ListCard,
+  parameters: {
+    status: { type: "stable" },
+    docs: {
+      description: {
+        component: "Dashboard list widget: a titled card of clickable rows with optional meta.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ListCard>;
+
+export const Main: Story = {
+  name: "Main",
+  args: {
+    config: {
+      id: "links",
+      title: "Shortcuts",
+      items: [
+        { id: "open", label: "Open quotations", meta: "12", onClick: action("list:open") },
+        { id: "overdue", label: "Overdue invoices", meta: "4", onClick: action("list:overdue") },
+        { id: "draft", label: "Draft orders", meta: "9", onClick: action("list:draft") },
+      ],
+    },
+  },
+  render: (args) => (
+    <YStack width={320} padding="$4">
+      <ListCard {...args} />
+    </YStack>
+  ),
+};

package/src/views/ProgressCard.stories.tsx

@@ -0,0 +1,60 @@
+/**
+ * ProgressCard — dashboard bar-gauge. The rail is Meter (position within
+ * bounds), not Progress-the-task. Composed Dashboard already mounts one;
+ * this file is the export's own Kitchen Sink title.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { YStack } from "tamagui";
+import { ProgressCard } from "./Dashboard";
+
+const meta: Meta<typeof ProgressCard> = {
+  title: "Components/ProgressCard",
+  component: ProgressCard,
+  parameters: {
+    status: { type: "stable" },
+    docs: {
+      description: {
+        component:
+          "Dashboard bar-gauge card. The rail is Meter — capacity, not activity toward completion.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ProgressCard>;
+
+export const Main: Story = {
+  name: "Main",
+  args: {
+    config: {
+      id: "quota",
+      title: "Quota filled",
+      value: 72,
+      max: 100,
+      format: "percent",
+    },
+  },
+  render: (args) => (
+    <YStack width={280} padding="$4">
+      <ProgressCard {...args} />
+    </YStack>
+  ),
+};
+
+export const NumberFormat: Story = {
+  render: () => (
+    <YStack width={280} padding="$4">
+      <ProgressCard
+        config={{
+          id: "seats",
+          title: "Seats used",
+          value: 18,
+          max: 25,
+          format: "number",
+        }}
+      />
+    </YStack>
+  ),
+};

package/src/views/ShortcutCard.stories.tsx

@@ -0,0 +1,60 @@
+/**
+ * ShortcutCard — Frappe workspace shortcut: label + nested count pill.
+ */
+
+import { action } from "@multiplatform.one/storybook";
+import { ShoppingCartIcon } from "@phosphor-icons/react";
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { YStack } from "tamagui";
+import { ShortcutCard } from "./Dashboard";
+
+const iconSize = 16;
+
+const meta: Meta<typeof ShortcutCard> = {
+  title: "Components/ShortcutCard",
+  component: ShortcutCard,
+  parameters: {
+    status: { type: "stable" },
+    docs: {
+      description: {
+        component: "Frappe workspace shortcut: label plus a nested count pill.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ShortcutCard>;
+
+export const Main: Story = {
+  name: "Main",
+  args: {
+    config: {
+      id: "orders",
+      title: "Sales Orders",
+      count: 18,
+      icon: <ShoppingCartIcon size={iconSize} />,
+      onClick: action("shortcut:orders"),
+    },
+  },
+  render: (args) => (
+    <YStack width={280} padding="$4">
+      <ShortcutCard {...args} />
+    </YStack>
+  ),
+};
+
+export const NoCount: Story = {
+  render: () => (
+    <YStack width={280} padding="$4">
+      <ShortcutCard
+        config={{
+          id: "new-order",
+          title: "New Order",
+          icon: <ShoppingCartIcon size={iconSize} />,
+          onClick: action("shortcut:new"),
+        }}
+      />
+    </YStack>
+  ),
+};