@multiplatform.one/components 6.7.0 → 7.1.0

package/src/views/List.stories.tsx

@@ -1,26 +1,102 @@
 import { action } from "@multiplatform.one/storybook";
 import type { Meta } from "@storybook/react-native-web-vite";
-import { Text } from "tamagui";
-import { List } from "./List";
+import { FileCodeIcon, FilePdfIcon, FileTextIcon, ListChecksIcon } from "@phosphor-icons/react";
+import type { ReactNode } from "react";
+import { List, ListRow, ListRowMeta } from "./List";
 
-interface ListItemData {
+interface DocumentRow {
   id: string;
   title: string;
-  description: string;
+  subtitle: string;
+  modified: string;
+  size: string;
+  kind: string;
+  status: string;
+  statusTone?: "success" | "warning";
+  icon: ReactNode;
 }
 
-const items: ListItemData[] = [
+const documents: DocumentRow[] = [
   {
     id: "1",
-    title: "Setup Project",
-    description: "Initialize the repository and install dependencies",
+    title: "Q3 Vendor Contract",
+    subtitle: "Legal · Shared with Finance",
+    modified: "Yesterday",
+    size: "124 KB",
+    kind: "PDF",
+    status: "Open",
+    icon: <FilePdfIcon />,
+  },
+  {
+    id: "2",
+    title: "Onboarding Checklist",
+    subtitle: "People · Template",
+    modified: "Tue",
+    size: "18 KB",
+    kind: "Doc",
+    status: "Open",
+    icon: <ListChecksIcon />,
+  },
+  {
+    id: "3",
+    title: "Invoice 1842",
+    subtitle: "Finance · Acme Corp",
+    modified: "12 Aug",
+    size: "56 KB",
+    kind: "PDF",
+    status: "Paid",
+    statusTone: "success",
+    icon: <FilePdfIcon />,
+  },
+  {
+    id: "4",
+    title: "Brand Guidelines",
+    subtitle: "Design · Internal",
+    modified: "3 Aug",
+    size: "2.4 MB",
+    kind: "PDF",
+    status: "Open",
+    icon: <FileTextIcon />,
+  },
+  {
+    id: "5",
+    title: "Architecture RFC",
+    subtitle: "Engineering · Draft for review",
+    modified: "28 Jul",
+    size: "41 KB",
+    kind: "MD",
+    status: "Draft",
+    statusTone: "warning",
+    icon: <FileCodeIcon />,
   },
-  { id: "2", title: "Design System", description: "Create component library and theme tokens" },
-  { id: "3", title: "Authentication", description: "Implement login and registration flows" },
-  { id: "4", title: "API Layer", description: "Build REST and WebSocket APIs" },
-  { id: "5", title: "Testing", description: "Write unit and integration tests" },
 ];
 
+function DocumentItem({ item }: { item: DocumentRow }) {
+  const statusColor =
+    item.statusTone === "success"
+      ? "$green11"
+      : item.statusTone === "warning"
+        ? "$orange11"
+        : undefined;
+  return (
+    <ListRow
+      icon={item.icon}
+      title={item.title}
+      subtitle={item.subtitle}
+      meta={
+        <>
+          <ListRowMeta width={80}>{item.modified}</ListRowMeta>
+          <ListRowMeta width={56}>{item.size}</ListRowMeta>
+          <ListRowMeta width={40}>{item.kind}</ListRowMeta>
+          <ListRowMeta width={48} color={statusColor}>
+            {item.status}
+          </ListRowMeta>
+        </>
+      }
+    />
+  );
+}
+
 const meta: Meta = {
   title: "Components/List",
   parameters: {
@@ -33,22 +109,24 @@ export default meta;
 export const Default = {
   name: "Main",
   render: () => (
-    <List<ListItemData>
-      items={items}
-      renderItem={(item) => <Text fontSize="$3">{item.title}</Text>}
+    <List<DocumentRow>
+      items={documents}
+      aria-label="Documents"
+      defaultSelectedIndex={2}
+      renderItem={(item) => <DocumentItem item={item} />}
       onItemClick={action("onItemClick")}
-      height={400}
+      estimateSize={60}
     />
   ),
 };
 
 export const Loading = {
   render: () => (
-    <List<ListItemData>
+    <List<DocumentRow>
       items={[]}
-      renderItem={(item) => <Text fontSize="$3">{item.title}</Text>}
+      renderItem={(item) => <DocumentItem item={item} />}
       isLoading
-      height={400}
+      height={280}
     />
   ),
 };
@@ -56,11 +134,11 @@ export const Loading = {
 /** No items, no filters, no failure — the neutral empty state (Axiom 6: empty ≠ error). */
 export const Empty = {
   render: () => (
-    <List<ListItemData>
+    <List<DocumentRow>
       items={[]}
-      renderItem={(item) => <Text fontSize="$3">{item.title}</Text>}
-      emptyMessage="No tasks yet"
-      height={400}
+      renderItem={(item) => <DocumentItem item={item} />}
+      emptyMessage="No documents yet"
+      height={280}
     />
   ),
 };
@@ -68,12 +146,12 @@ export const Empty = {
 /** Failed load wins over empty — error chrome with retry, never empty chrome (DG-ST-01). */
 export const Error = {
   render: () => (
-    <List<ListItemData>
+    <List<DocumentRow>
       items={[]}
-      renderItem={(item) => <Text fontSize="$3">{item.title}</Text>}
+      renderItem={(item) => <DocumentItem item={item} />}
       error="The server did not respond."
       onRetry={action("onRetry")}
-      height={400}
+      height={280}
     />
   ),
 };
@@ -85,11 +163,11 @@ export const Error = {
  */
 export const NoResults = {
   render: () => (
-    <List<ListItemData>
+    <List<DocumentRow>
       items={[]}
-      renderItem={(item) => <Text fontSize="$3">{item.title}</Text>}
-      emptyMessage='No tasks match "deployment"'
-      height={400}
+      renderItem={(item) => <DocumentItem item={item} />}
+      emptyMessage='No documents match "deployment"'
+      height={280}
     />
   ),
 };