@multiplatform.one/components 7.4.0 → 7.5.0

package/src/views/ReportBuilder.tsx

@@ -64,12 +64,6 @@ export interface ReportBuilderProps extends Omit<YStackProps, "children"> {
 
 const numericFieldTypes = new Set(["Int", "Float", "Currency", "Percent", "Rating", "Duration"]);
 
-const reportTextSizeMap: Record<string, "$1" | "$2" | "$3"> = {
-  $3: "$1",
-  $4: "$2",
-  $5: "$3",
-};
-
 type SortDir = "asc" | "desc";
 type SortState = { field: string; dir: SortDir } | null;
 type FocusItem =
@@ -135,7 +129,7 @@ function SimpleBarChart({
     <YStack
       {...knobProps.surface}
       {...knobProps.containerRadius}
-      padding="$2"
+      {...knobProps.panelPadding}
       overflow="hidden"
     >
       <BarChart data={data} height={height} />
@@ -168,8 +162,9 @@ export function ReportBuilder({
 }: ReportBuilderProps) {
   const { t } = useTranslation();
   const { knobProps } = useResolvedKnobs();
-  const reportFontSize = reportTextSizeMap[knobProps.sizeToken] ?? "$2";
   const nestedPx = knobProps.nestedControl.px;
+  const edgePad = knobProps.panelPadding.padding;
+  const iconPx = knobProps.controlIcon.width;
   const isRTL = useDirection() === "rtl";
   const CollapsedCaretIcon = isRTL ? CaretLeftIcon : CaretRightIcon;
   const hasError = resolveAsyncStatus({ error }) === "error";
@@ -498,33 +493,25 @@ export function ReportBuilder({
           <XStack
             key={col.fieldname}
             role="columnheader"
-            aria-sort={
-              active ? (sort?.dir === "asc" ? "ascending" : "descending") : "none"
-            }
+            aria-sort={active ? (sort?.dir === "asc" ? "ascending" : "descending") : "none"}
             flex={1}
             minWidth={0}
             minHeight={nestedPx}
             hitSlop={knobProps.nestedControl.hitSlop}
             alignItems="center"
             justifyContent={cellAlign(col) === "right" ? "flex-end" : "flex-start"}
-            gap="$1"
-            paddingHorizontal="$2"
+            gap={knobProps.control.gap}
+            paddingHorizontal={edgePad}
             cursor="pointer"
             tabIndex={-1}
             onPress={() => cycleSort(col.fieldname)}
             hoverStyle={{ backgroundColor: componentColors.interactive.background }}
           >
-            <Text
-              fontWeight="600"
-              fontSize={reportFontSize}
-              color="$color"
-              numberOfLines={1}
-              textAlign={cellAlign(col)}
-            >
+            <Text {...knobProps.label} color="$color" numberOfLines={1} textAlign={cellAlign(col)}>
               {col.label}
             </Text>
             <SortIcon
-              size={10}
+              size={iconPx}
               weight="bold"
               color={active ? componentColors.text.primary : componentColors.text.muted}
               opacity={active ? 1 : 0.35}
@@ -578,9 +565,10 @@ export function ReportBuilder({
             role="cell"
             flex={1}
             minWidth={0}
-            fontSize={reportFontSize}
+            {...knobProps.body}
+            {...knobProps.controlType}
             color="$color"
-            paddingHorizontal="$2"
+            paddingHorizontal={edgePad}
             numberOfLines={1}
             textAlign={cellAlign(col)}
           >
@@ -622,11 +610,11 @@ export function ReportBuilder({
           {...(isFocused ? { "data-focused": true } : {})}
           minHeight={nestedPx}
           hitSlop={knobProps.nestedControl.hitSlop}
-          paddingHorizontal="$2"
+          paddingHorizontal={edgePad}
           backgroundColor={isFocused ? "$accentBackground" : componentColors.interactive.background}
           {...(groupIndex === groupEntries.length - 1 && isCollapsed ? {} : hairline.bottom)}
           alignItems="center"
-          gap="$2"
+          {...knobProps.gap}
           cursor="pointer"
           {...rowRing(isFocused)}
           onPress={() => {
@@ -639,19 +627,18 @@ export function ReportBuilder({
           }}
         >
           {isCollapsed ? (
-            <CollapsedCaretIcon size={12} weight="bold" />
+            <CollapsedCaretIcon size={iconPx} weight="bold" />
           ) : (
-            <CaretDownIcon size={12} weight="bold" />
+            <CaretDownIcon size={iconPx} weight="bold" />
           )}
-          <Text fontWeight="600" fontSize={reportFontSize} color="$accentColor" numberOfLines={1}>
+          <Text {...knobProps.label} color="$accentColor" numberOfLines={1}>
             {groupByCol?.label ?? groupBy.field}: {groupKey}
           </Text>
-          <Text fontSize={reportFontSize} color={componentColors.text.muted}>
-            ({group.rows.length}{" "}
-            {group.rows.length === 1 ? t("record") : t("records")})
+          <Text {...knobProps.label} color={componentColors.text.muted}>
+            ({group.rows.length} {group.rows.length === 1 ? t("record") : t("records")})
           </Text>
           <XStack flex={1} />
-          <Text fontWeight="500" fontSize={reportFontSize} color="$accentColor" numberOfLines={1}>
+          <Text {...knobProps.label} color="$accentColor" numberOfLines={1}>
             {aggDisplay}
           </Text>
         </XStack>
@@ -697,6 +684,11 @@ export function ReportBuilder({
   return (
     <YStack
       testID="report-builder"
+      {...({
+        "data-testid": "report-builder",
+        "data-size": knobProps.size,
+        "data-density": knobProps.density,
+      } as Record<string, string>)}
       {...knobProps.gap}
       height={height}
       minHeight={minHeight}
@@ -729,9 +721,7 @@ export function ReportBuilder({
                   key={column.fieldname}
                   checked={checked}
                   disabled={lastEnabled}
-                  disabledReason={
-                    lastEnabled ? t("At least one column stays visible") : undefined
-                  }
+                  disabledReason={lastEnabled ? t("At least one column stays visible") : undefined}
                   onCheckedChange={() => toggleColumn(column.fieldname)}
                 >
                   {column.label}
@@ -744,9 +734,7 @@ export function ReportBuilder({
         <DropdownMenu>
           <DropdownMenu.Trigger asChild>
             <Button size={knobProps.sizeToken} chromeless {...pressTargetStyle()}>
-              {groupByCol
-                ? t("Group by: {{field}}", { field: groupByCol.label })
-                : t("Group by")}
+              {groupByCol ? t("Group by: {{field}}", { field: groupByCol.label }) : t("Group by")}
             </Button>
           </DropdownMenu.Trigger>
           <DropdownMenu.Content maxHeight={360}>
@@ -787,9 +775,7 @@ export function ReportBuilder({
                     checked={groupBy.aggregation === aggregation}
                     closeOnSelect
                     disabled={needsNumeric}
-                    disabledReason={
-                      needsNumeric ? t("No numeric fields to aggregate") : undefined
-                    }
+                    disabledReason={needsNumeric ? t("No numeric fields to aggregate") : undefined}
                     onCheckedChange={() => selectAggregation(aggregation)}
                   >
                     {aggregationLabels[aggregation]}
@@ -869,7 +855,7 @@ export function ReportBuilder({
         minHeight={bounded ? 0 : undefined}
       >
         {isInitialLoading ? (
-          <AsyncSkeleton layout="table" padding="$2" />
+          <AsyncSkeleton layout="table" padding={knobProps.panelPadding.padding} />
         ) : (
           <YStack
             ref={gridRef as any}
@@ -910,25 +896,23 @@ export function ReportBuilder({
                 role="row"
                 minHeight={nestedPx}
                 alignItems="center"
-                paddingHorizontal="$2"
+                paddingHorizontal={edgePad}
                 {...hairline.top}
                 backgroundColor={componentColors.surface.background}
-                gap="$3"
+                {...knobProps.gapLg}
                 flexWrap="wrap"
               >
-                <Text fontSize={reportFontSize} fontWeight="600" color={componentColors.text.muted}>
+                <Text {...knobProps.label} color={componentColors.text.muted}>
                   {t("Totals")}
                 </Text>
                 {totals.map(({ col, value }) => (
-                  <Text key={col.fieldname} fontSize={reportFontSize} color="$color">
+                  <Text key={col.fieldname} {...knobProps.label} color="$color">
                     {col.label}:{" "}
-                    <Text fontSize={reportFontSize} fontWeight="600">
-                      {formatCellValue(value, col.fieldtype)}
-                    </Text>
+                    <Text {...knobProps.label}>{formatCellValue(value, col.fieldtype)}</Text>
                   </Text>
                 ))}
                 <XStack flex={1} />
-                <Text fontSize={reportFontSize} color={componentColors.text.muted}>
+                <Text {...knobProps.label} color={componentColors.text.muted}>
                   {t("{{count}} row(s)", { count: data.length })}
                 </Text>
               </XStack>

package/src/views/TreeView.spec.tsx

@@ -0,0 +1,113 @@
+/**
+ * TreeView — design-law 100% (MPO-60). Size/space/type ride shared knobs;
+ * Home/End and selection are APG tree semantics; empty is EmptyState.
+ */
+import { cleanup, fireEvent, screen } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { defaultKnobs, Preset, resolveKnobs } from "@multiplatform.one/theme";
+import { afterEach, describe, expect, it } from "vitest";
+import { TreeView, type TreeNode } from "./TreeView";
+import { treeDefaultHeight, treeIndentStep } from "./treeViewLayout";
+
+afterEach(cleanup);
+
+const nodes: TreeNode[] = [
+  {
+    id: "root",
+    label: "Root Node",
+    children: [
+      { id: "child-1", label: "Child 1" },
+      {
+        id: "child-2",
+        label: "Child 2",
+        children: [{ id: "grandchild", label: "Grandchild" }],
+      },
+    ],
+  },
+  { id: "root-2", label: "Root 2" },
+];
+
+describe("TreeView named exports", () => {
+  it("exports TreeView as a named function", () => {
+    expect(typeof TreeView).toBe("function");
+    expect(TreeView.name).toBe("TreeView");
+  });
+});
+
+describe("TreeView knob wiring", () => {
+  it("publishes nestedControl px, indent step, and space on the tree", () => {
+    const { knobProps } = resolveKnobs(defaultKnobs);
+    renderWithProviders(
+      <TreeView nodes={nodes} expandByDefault ariaLabel="Knob tree" height={400} />,
+    );
+    const tree = screen.getByRole("tree");
+    expect(tree.getAttribute("data-nested-px")).toBe(String(knobProps.nestedControl.px));
+    expect(tree.getAttribute("data-indent-step")).toBe(
+      String(treeIndentStep(knobProps.nestedControl.px)),
+    );
+    expect(tree.getAttribute("data-space")).toBe(knobProps.space);
+    expect(tree.getAttribute("data-size")).toBe(knobProps.size);
+  });
+
+  it("default viewport follows nestedControl when height is omitted", () => {
+    const nestedPx = resolveKnobs(defaultKnobs).knobProps.nestedControl.px;
+    renderWithProviders(<TreeView nodes={nodes} ariaLabel="Hug tree" />);
+    const tree = screen.getByRole("tree");
+    expect(tree.getAttribute("data-viewport-height")).toBe(String(treeDefaultHeight(nestedPx)));
+  });
+
+  it("compact display steps space (LC-76) without a private compressed pad table", () => {
+    renderWithProviders(
+      <Preset cascade={false} overrides={{ space: "medium" }}>
+        <TreeView
+          nodes={nodes}
+          display="compressed"
+          expandByDefault
+          ariaLabel="Compact tree"
+          height={280}
+        />
+      </Preset>,
+    );
+    const tree = screen.getByRole("tree");
+    expect(tree.getAttribute("data-space")).toBe("small");
+    expect(tree.getAttribute("data-size")).toBe("medium");
+  });
+});
+
+describe("TreeView selection and keyboard", () => {
+  it("marks selectedId with aria-selected", () => {
+    renderWithProviders(
+      <TreeView
+        nodes={nodes}
+        defaultExpandedIds={["root"]}
+        selectedId="child-1"
+        ariaLabel="Selection tree"
+        height={400}
+      />,
+    );
+    const selected = screen.getByText("Child 1").closest('[role="treeitem"]');
+    expect(selected).toHaveAttribute("aria-selected", "true");
+  });
+
+  it("Home focuses the first row and End the last", () => {
+    renderWithProviders(
+      <TreeView nodes={nodes} expandByDefault ariaLabel="Home end tree" height={400} />,
+    );
+    const tree = screen.getByRole("tree");
+    tree.focus();
+    fireEvent.keyDown(tree, { key: "Home" });
+    expect(screen.getByText("Root Node").closest("[data-focused]")).toBeTruthy();
+    fireEvent.keyDown(tree, { key: "End" });
+    expect(screen.getByText("Root 2").closest("[data-focused]")).toBeTruthy();
+  });
+});
+
+describe("TreeView empty", () => {
+  it("renders EmptyState for an empty node list (Axiom 6: empty ≠ error)", () => {
+    renderWithProviders(
+      <TreeView nodes={[]} ariaLabel="Empty tree" emptyMessage="No files found" />,
+    );
+    expect(screen.getByText("No files found")).toBeInTheDocument();
+    expect(screen.queryByRole("tree")).toBeNull();
+  });
+});

package/src/views/TreeView.stories.tsx

@@ -1,7 +1,7 @@
-import type { Meta } from "@storybook/react-native-web-vite";
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useState } from "react";
 import { YStack } from "tamagui";
-import { TreeView, type TreeNode } from "./TreeView";
+import { TreeView, type TreeNode, type TreeViewProps } from "./TreeView";
 import { applyTreeMove } from "./treeViewDnd";
 
 const nodes: TreeNode[] = [
@@ -41,73 +41,104 @@ const nodes: TreeNode[] = [
   { id: "package", label: "package.json" },
 ];
 
-const meta: Meta = {
+const deepNodes: TreeNode[] = [
+  {
+    id: "a",
+    label: "workspace",
+    children: [
+      {
+        id: "b",
+        label: "packages",
+        children: [
+          {
+            id: "c",
+            label: "components",
+            children: [
+              {
+                id: "d",
+                label: "src",
+                children: [{ id: "e", label: "TreeView.tsx" }],
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+];
+
+const longLabelNodes: TreeNode[] = [
+  {
+    id: "long",
+    label:
+      "A very long tree label that must truncate instead of blowing the row (LC-10 frame containment)",
+    children: [
+      {
+        id: "long-child",
+        label: "another-extremely-long-filename-that-should-ellipsis.tsx",
+      },
+    ],
+  },
+];
+
+const meta: Meta<typeof TreeView> = {
   title: "Components/TreeView",
+  component: TreeView,
+  args: {
+    nodes,
+    ariaLabel: "Project files",
+    height: 400,
+    defaultExpandedIds: ["src", "components"],
+  },
   parameters: {
     status: { type: "stable" },
   },
 };
-
 export default meta;
 
-export const Default = {
+type Story = StoryObj<typeof TreeView>;
+
+function SelectableTree(args: TreeViewProps) {
+  const [selectedId, setSelectedId] = useState<string | undefined>(args.selectedId ?? "button");
+  return (
+    <YStack height={(args.height as number | undefined) ? Number(args.height) + 20 : 420}>
+      <TreeView
+        {...args}
+        selectedId={selectedId}
+        onNodeSelect={(node) => {
+          setSelectedId(node.id);
+          args.onNodeSelect?.(node);
+        }}
+      />
+    </YStack>
+  );
+}
+
+export const Default: Story = {
   name: "Main",
-  render: () => {
-    const [selectedId, setSelectedId] = useState<string | undefined>("button");
-    return (
-      <YStack height={420}>
-        <TreeView
-          nodes={nodes}
-          ariaLabel="Project files"
-          selectedId={selectedId}
-          defaultExpandedIds={["src", "components"]}
-          onNodeSelect={(node) => setSelectedId(node.id)}
-          height={400}
-        />
-      </YStack>
-    );
-  },
+  args: { selectedId: "button" },
+  render: (args) => <SelectableTree {...args} />,
 };
 
-export const Compressed = {
+export const Compressed: Story = {
   name: "Compressed",
-  render: () => {
-    const [selectedId, setSelectedId] = useState<string | undefined>();
-    return (
-      <YStack height={420}>
-        <TreeView
-          nodes={nodes}
-          ariaLabel="Compressed project files"
-          display="compressed"
-          showExpansionArrows
-          selectedId={selectedId}
-          defaultExpandedIds={["src", "components"]}
-          onNodeSelect={(node) => setSelectedId(node.id)}
-          height={400}
-        />
-      </YStack>
-    );
+  args: {
+    display: "compressed",
+    showExpansionArrows: true,
+    selectedId: undefined,
   },
+  render: (args) => <SelectableTree {...args} />,
 };
 
-export const ExpandByDefault = {
+export const ExpandByDefault: Story = {
   name: "Expand By Default",
-  render: () => {
-    const [selectedId, setSelectedId] = useState<string | undefined>();
-    return (
-      <YStack height={480}>
-        <TreeView
-          nodes={nodes}
-          ariaLabel="Fully expanded project files"
-          expandByDefault
-          showExpansionArrows
-          selectedId={selectedId}
-          onNodeSelect={(node) => setSelectedId(node.id)}
-          height={460}
-        />
-      </YStack>
-    );
+  args: {
+    expandByDefault: true,
+    showExpansionArrows: true,
+    defaultExpandedIds: undefined,
+    height: 460,
   },
+  render: (args) => <SelectableTree {...args} />,
 };
 
 /**
@@ -117,21 +148,20 @@ export const ExpandByDefault = {
  * sibling, left un-nests), Space drops, Escape cancels — with aria-live
  * position announcements. `applyTreeMove` applies the callback payload.
  */
-export const Reorder = {
+export const Reorder: Story = {
   name: "Reorder",
-  render: () => {
-    const [tree, setTree] = useState<TreeNode[]>(nodes);
+  args: { height: 420, selectedId: undefined },
+  render: function ReorderStory(args) {
+    const [tree, setTree] = useState<TreeNode[]>(args.nodes ?? nodes);
     const [selectedId, setSelectedId] = useState<string | undefined>();
     return (
       <YStack height={440}>
         <TreeView
+          {...args}
           nodes={tree}
-          ariaLabel="Reorderable project files"
           selectedId={selectedId}
-          defaultExpandedIds={["src", "components"]}
           onNodeSelect={(node) => setSelectedId(node.id)}
           onNodeMove={(nodeId, target) => setTree((prev) => applyTreeMove(prev, nodeId, target))}
-          height={420}
         />
       </YStack>
     );
@@ -143,29 +173,49 @@ export const Reorder = {
  * TreeView has no isLoading/error props; those states cannot be rendered here
  * (component-capability gap, see p-results/state-triplet-coverage.md).
  */
-export const Empty = {
-  render: () => (
-    <YStack height={200}>
-      <TreeView nodes={[]} ariaLabel="Empty tree" emptyMessage="No files found" height={180} />
-    </YStack>
-  ),
+export const Empty: Story = {
+  args: {
+    nodes: [],
+    ariaLabel: "Empty tree",
+    emptyMessage: "No files found",
+    height: 180,
+  },
+};
+
+export const DeepNesting: Story = {
+  name: "Deep Nesting",
+  args: {
+    nodes: deepNodes,
+    ariaLabel: "Deep tree",
+    expandByDefault: true,
+    defaultExpandedIds: undefined,
+    height: 280,
+  },
+  render: (args) => <SelectableTree {...args} />,
+};
+
+export const LongLabels: Story = {
+  name: "Long Labels",
+  args: {
+    nodes: longLabelNodes,
+    ariaLabel: "Long labels",
+    expandByDefault: true,
+    defaultExpandedIds: undefined,
+    height: 160,
+  },
+  render: (args) => <SelectableTree {...args} />,
 };
 
 /**
  * Carbon: a collapsed ancestor of the selected node keeps a muted fill so
  * the selection is not lost when its parent is closed.
  */
-export const ContainsSelection = {
+export const ContainsSelection: Story = {
   name: "Contains Selection",
-  render: () => (
-    <YStack height={280}>
-      <TreeView
-        nodes={nodes}
-        ariaLabel="Collapsed ancestor still shows selection"
-        selectedId="button"
-        defaultExpandedIds={["src"]}
-        height={260}
-      />
-    </YStack>
-  ),
+  args: {
+    selectedId: "button",
+    defaultExpandedIds: ["src"],
+    height: 260,
+    ariaLabel: "Collapsed ancestor still shows selection",
+  },
 };