@multiplatform.one/forms 6.7.0 → 7.1.0

package/src/fields/Duration/Duration.spec.tsx

@@ -1,17 +1,40 @@
 import { describe, expect, it } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { Form } from "../../Form";
-import { Duration } from "./index";
+import { Duration, normalizeSeconds, parseDurationText, secondsToParts } from "./index";
 
 describe("Duration", () => {
+  describe("math", () => {
+    it("clamps negative and non-finite values to zero", () => {
+      expect(normalizeSeconds(-100)).toBe(0);
+      expect(normalizeSeconds(Number.NaN)).toBe(0);
+      expect(normalizeSeconds(1.9)).toBe(1);
+    });
+
+    it("folds days into hours when hideDays", () => {
+      const parts = secondsToParts(100000, true);
+      expect(parts.days).toBe(0);
+      expect(parts.hours).toBe(27);
+      expect(parts.minutes).toBe(46);
+      expect(parts.seconds).toBe(40);
+    });
+
+    it("parses Frappe-style duration text", () => {
+      expect(parseDurationText("1d 2h 3m 4s")).toBe(93784);
+      expect(parseDurationText("01h 30m")).toBe(5400);
+      expect(parseDurationText("1:30")).toBe(5400);
+      expect(parseDurationText("-100")).toBe(0);
+    });
+  });
+
   describe("without form context", () => {
     it("renders with label and placeholder", () => {
       const result = renderWithProviders(
         <Duration label="Duration" name="dur" placeholder="Select duration" />,
       );
       expect(result.findTextElement("Duration")).toBeDefined();
-      const input = result.container.querySelector("input");
-      expect(input?.getAttribute("placeholder")).toBe("Select duration");
+      const hours = result.container.querySelector('input[aria-label="Hours"]');
+      expect(hours?.getAttribute("placeholder")).toBe("Select duration");
     });
 
     it("renders required label with asterisk", () => {
@@ -36,6 +59,7 @@ describe("Duration", () => {
       const result = renderWithProviders(<Duration label="Disabled" name="d" disabled />);
       const input = result.container.querySelector("input");
       expect(input?.getAttribute("aria-disabled")).toBe("true");
+      expect(input?.getAttribute("tabindex")).toBe("-1");
     });
 
     it("renders readOnly with formatted value", () => {
@@ -45,6 +69,37 @@ describe("Duration", () => {
       const input = result.container.querySelector("input");
       expect(input?.getAttribute("aria-readonly")).toBe("true");
     });
+
+    it("supplies a default clock affordance", () => {
+      const result = renderWithProviders(<Duration label="Clock" name="c" value={3600} />);
+      expect(result.container.querySelector("svg")).toBeTruthy();
+    });
+
+    it("hides the clock when clockIcon is null", () => {
+      const result = renderWithProviders(
+        <Duration label="No clock" name="c" value={3600} clockIcon={null} />,
+      );
+      expect(result.container.querySelector("svg")).toBeNull();
+    });
+
+    it("normalises a negative value in the hours segment", () => {
+      const result = renderWithProviders(<Duration label="Neg" name="n" value={-100} />);
+      const hours = result.container.querySelector('input[aria-label="Hours"]');
+      expect(hours?.getAttribute("value") ?? (hours as HTMLInputElement | null)?.value).toBe("0");
+    });
+
+    it("shows hours above 23 when hideDays", () => {
+      const result = renderWithProviders(<Duration label="Long" name="l" value={100000} />);
+      const hours = result.container.querySelector('input[aria-label="Hours"]');
+      expect(hours?.getAttribute("value") ?? (hours as HTMLInputElement | null)?.value).toBe("27");
+    });
+
+    it("shows a days segment when hideDays is false", () => {
+      const result = renderWithProviders(
+        <Duration label="Days" name="d" value={100000} hideDays={false} />,
+      );
+      expect(result.container.querySelector('input[aria-label="Days"]')).toBeTruthy();
+    });
   });
 
   describe("with form context", () => {

package/src/fields/Duration/Duration.stories.tsx

@@ -1,6 +1,5 @@
 import { action } from "@multiplatform.one/storybook";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-import { ClockIcon } from "@phosphor-icons/react";
 import { useForm } from "@tanstack/react-form";
 import { useState } from "react";
 import { Text, YStack } from "tamagui";
@@ -15,7 +14,7 @@ const meta: Meta<typeof Duration> = {
     docs: {
       description: {
         component:
-          "A duration picker with scrollable hour/minute/second columns and quick-select presets.",
+          "A duration field with day/hour/minute/second segments in one outer box, plus quick-select presets.",
       },
     },
   },
@@ -27,7 +26,8 @@ const meta: Meta<typeof Duration> = {
     disabled: { control: "boolean" },
     size: { control: "select", options: ["$2", "$3", "$4"] },
     value: { control: "number", description: "Duration in seconds" },
-    showSeconds: { control: "boolean", description: "Show seconds column" },
+    showSeconds: { control: "boolean", description: "Show seconds segment" },
+    hideDays: { control: "boolean", description: "Fold days into hours" },
     placeholder: { control: "text" },
   },
 };
@@ -52,18 +52,8 @@ export const Main: Story = {
       return (
         <Form form={form} maxWidth={400}>
           <YStack gap="$4">
-            <Duration
-              label="Work Duration"
-              name="workTime"
-              helperText="How long did you work?"
-              clockIcon={<ClockIcon size={16} />}
-            />
-            <Duration
-              label="Break Duration"
-              name="breakTime"
-              helperText="Total break time"
-              clockIcon={<ClockIcon size={16} />}
-            />
+            <Duration label="Work Duration" name="workTime" helperText="How long did you work?" />
+            <Duration label="Break Duration" name="breakTime" helperText="Total break time" />
             <Button action="submit">Log Time</Button>
           </YStack>
         </Form>
@@ -81,7 +71,6 @@ export const Standalone: Story = {
     showSeconds: false,
     placeholder: "Select duration",
   },
-  render: (args) => <Duration {...args} clockIcon={<ClockIcon size={16} />} />,
 };
 
 export const Basic: Story = {
@@ -91,7 +80,6 @@ export const Basic: Story = {
     value: 5400,
     onChange: action("onChange"),
   },
-  render: (args) => <Duration {...args} clockIcon={<ClockIcon size={16} />} />,
 };
 
 export const Disabled: Story = {
@@ -102,7 +90,6 @@ export const Disabled: Story = {
     disabled: true,
     onChange: action("onChange"),
   },
-  render: (args) => <Duration {...args} clockIcon={<ClockIcon size={16} />} />,
 };
 
 export const WithError: Story = {
@@ -114,36 +101,17 @@ export const WithError: Story = {
     error: "Duration is required",
     onChange: action("onChange"),
   },
-  render: (args) => <Duration {...args} clockIcon={<ClockIcon size={16} />} />,
 };
 
 export const Sizes: Story = {
   render: () => (
     <YStack gap="$4" maxWidth={300}>
       <Text fontWeight="bold">Size $2</Text>
-      <Duration
-        label="Small"
-        value={3600}
-        size="$2"
-        clockIcon={<ClockIcon size={16} />}
-        onChange={action("onChange")}
-      />
+      <Duration label="Small" value={3600} size="$2" onChange={action("onChange")} />
       <Text fontWeight="bold">Size $3</Text>
-      <Duration
-        label="Medium"
-        value={3600}
-        size="$3"
-        clockIcon={<ClockIcon size={16} />}
-        onChange={action("onChange")}
-      />
+      <Duration label="Medium" value={3600} size="$3" onChange={action("onChange")} />
       <Text fontWeight="bold">Size $4</Text>
-      <Duration
-        label="Large"
-        value={3600}
-        size="$4"
-        clockIcon={<ClockIcon size={16} />}
-        onChange={action("onChange")}
-      />
+      <Duration label="Large" value={3600} size="$4" onChange={action("onChange")} />
     </YStack>
   ),
 };
@@ -156,7 +124,17 @@ export const WithSeconds: Story = {
     showSeconds: true,
     onChange: action("onChange"),
   },
-  render: (args) => <Duration {...args} clockIcon={<ClockIcon size={16} />} />,
+};
+
+export const WithDays: Story = {
+  args: {
+    label: "Resolution Time",
+    helperText: "Days stay first-class (Frappe hide_days off)",
+    value: 100000,
+    hideDays: false,
+    showSeconds: true,
+    onChange: action("onChange"),
+  },
 };
 
 export const Interactive: Story = {
@@ -175,9 +153,8 @@ export const Interactive: Story = {
               setValue(v);
               action("onChange")(v);
             }}
-            clockIcon={<ClockIcon size={16} />}
           />
-          <Duration label="Disabled" value={7200} disabled clockIcon={<ClockIcon size={16} />} />
+          <Duration label="Disabled" value={7200} disabled />
         </YStack>
       );
     };
@@ -188,5 +165,4 @@ export const Interactive: Story = {
 /** Loading placeholder — the skeleton mirrors the field's anatomy (LC-20 / DG-ST-02). */
 export const SkeletonState: Story = {
   args: { label: "Estimated Time", skeleton: true },
-  render: (args) => <Duration {...args} clockIcon={<ClockIcon size={16} />} />,
 };