@ponti-studios/ui 1.5.0 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ponti-studios/ui",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "private": false,
   "description": "Shared UI component library for Ponti Studios",
   "license": "MIT",

package/src/components/filters/filter-select.stories.tsx

@@ -25,7 +25,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-  args: { value: "" },
+  args: { value: null },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     const trigger = canvas.getByRole("combobox", { name: "Status" });
@@ -44,7 +44,7 @@ export const WithValue: Story = {
 };
 
 export const Loading: Story = {
-  args: { value: "", isLoading: true, options: [] },
+  args: { value: null, isLoading: true, options: [] },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     await expect(canvas.getByRole("combobox", { name: "Status" })).toBeInTheDocument();
@@ -53,7 +53,7 @@ export const Loading: Story = {
 };
 
 export const Empty: Story = {
-  args: { value: "", options: [], emptyLabel: "No statuses found" },
+  args: { value: null, options: [], emptyLabel: "No statuses found" },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     await expect(canvas.getByRole("combobox", { name: "Status" })).toBeInTheDocument();

package/src/components/filters/filter-select.tsx

@@ -1,8 +1,8 @@
 import { useId, useMemo } from "react";
 
 import { cn } from "../../lib/utils";
-import { Label } from "../primitives/label";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../forms/select";
+import { Label } from "../primitives/label";
 
 export interface FilterSelectOption {
   value: string;
@@ -10,8 +10,8 @@ export interface FilterSelectOption {
 }
 
 export interface FilterSelectProps {
-  value: string;
-  onChange: (value: string) => void;
+  value: string | null;
+  onChange: (value: string | null) => void;
   options: FilterSelectOption[];
   label: string;
   loadingText?: string;
@@ -23,8 +23,6 @@ export interface FilterSelectProps {
   id?: string;
 }
 
-const ALL_VALUE = "";
-
 export function FilterSelect({
   label,
   value,
@@ -41,7 +39,7 @@ export function FilterSelect({
   const generatedId = useId();
   const selectId = id ?? generatedId;
   const items = useMemo(
-    () => [{ value: ALL_VALUE, label: placeholder }, ...options],
+    () => [{ value: null, label: placeholder }, ...options],
     [options, placeholder],
   );
 
@@ -53,7 +51,7 @@ export function FilterSelect({
           <SelectValue placeholder={placeholder} />
         </SelectTrigger>
         <SelectContent className="bg-background max-h-[250px] min-w-36 overflow-y-auto">
-          <SelectItem value={ALL_VALUE}>{placeholder}</SelectItem>
+          <SelectItem>{placeholder}</SelectItem>
           {isLoading ? (
             <div className="text-muted-foreground px-2 py-1.5 text-sm">{loadingText}</div>
           ) : options.length === 0 ? (

package/src/components/forms/calendar.tsx

@@ -16,7 +16,12 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }: C
         months: "flex flex-col gap-4 sm:flex-row",
         month: "flex flex-col gap-4",
         month_caption: "relative flex h-8 items-center justify-center",
-        caption_label: "text-sm font-medium",
+        caption_label: "flex items-center gap-1 text-sm font-medium",
+        dropdowns: "flex items-center gap-1",
+        dropdown_root: "relative",
+        dropdown: "absolute inset-0 z-10 cursor-pointer opacity-0",
+        months_dropdown: "",
+        years_dropdown: "",
         nav: "absolute inset-x-4 top-4 z-10 flex items-center justify-between",
         button_previous:
           "inline-flex size-8 p-2 items-center justify-center rounded-full border bg-background text-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50",

package/src/components/forms/date-field.stories.tsx

@@ -102,6 +102,44 @@ export const Disabled: Story = {
   },
 };
 
+// No play function — this one is for manually driving the interaction
+// (e.g. screen recordings), not automated assertions.
+export const DropdownEmpty: Story = {
+  args: {
+    name: "startDate",
+    label: "Start date",
+    captionLayout: "dropdown",
+  },
+};
+
+export const WithDropdownCaption: Story = {
+  args: {
+    mode: "range",
+    startName: "startDate",
+    endName: "endDate",
+    defaultValue: { from: "2018-03-01" },
+    label: "Employment period",
+    captionLayout: "dropdown",
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Jumping back to a date years ago is a month/year select, not repeated
+    // prev-month clicks.
+    const trigger = canvas.getByRole("button", { name: "Employment period" });
+    await userEvent.click(trigger);
+    const dialog = await screen.findByRole("dialog");
+
+    const yearSelect = within(dialog).getByRole("combobox", { name: /year/i });
+    await userEvent.selectOptions(yearSelect, "2009");
+    const monthSelect = within(dialog).getByRole("combobox", { name: /month/i });
+    await userEvent.selectOptions(monthSelect, "May");
+
+    await userEvent.click(within(dialog).getByText("12"));
+    await expect(hiddenValue(canvasElement, "startDate")).toBe("2009-05-12");
+  },
+};
+
 export const WithRangeDefaultValue: Story = {
   args: {
     mode: "range",

package/src/components/forms/date-field.tsx

@@ -23,6 +23,7 @@ interface DateFieldCommonProps {
   containerClassName?: string;
   popoverAlign?: DatePickerProps["popoverAlign"];
   variant?: DatePickerProps["variant"];
+  captionLayout?: DatePickerProps["captionLayout"];
 }
 
 export interface SingleDateFieldProps extends DateFieldCommonProps {
@@ -55,6 +56,7 @@ function SingleDateField({
   containerClassName,
   popoverAlign,
   variant,
+  captionLayout,
 }: SingleDateFieldProps) {
   const generatedId = useId();
   const inputId = id ?? generatedId;
@@ -72,6 +74,7 @@ function SingleDateField({
         containerClassName={containerClassName}
         popoverAlign={popoverAlign}
         variant={variant}
+        captionLayout={captionLayout}
         value={value}
         onSelect={setValue}
       />
@@ -93,6 +96,7 @@ function RangeDateField({
   containerClassName = "flex-1 min-w-0",
   popoverAlign = "start",
   variant = "outline",
+  captionLayout = "label",
 }: RangeDateFieldProps) {
   const generatedId = useId();
   const inputId = id ?? generatedId;
@@ -140,6 +144,7 @@ function RangeDateField({
             defaultMonth={range.from ?? range.to}
             resetOnSelect
             onSelect={(next) => setRange({ from: next?.from, to: next?.to })}
+            captionLayout={captionLayout}
           />
         </PopoverContent>
       </Popover>

package/src/components/forms/date-picker.tsx

@@ -17,6 +17,12 @@ export interface DatePickerProps {
   containerClassName?: string;
   popoverAlign?: "start" | "center" | "end";
   variant?: "outline" | "default" | "destructive" | "secondary" | "ghost" | "link";
+  /**
+   * Calendar caption style. `"dropdown"` swaps the month/year label for
+   * select dropdowns, which is much faster for picking dates years in the
+   * past (e.g. a job start date) than clicking prev/next repeatedly.
+   */
+  captionLayout?: "label" | "dropdown" | "dropdown-months" | "dropdown-years";
 }
 
 export function DatePicker({
@@ -31,6 +37,7 @@ export function DatePicker({
   containerClassName = "flex-1 min-w-0",
   popoverAlign = "start",
   variant = "outline",
+  captionLayout = "label",
 }: DatePickerProps) {
   return (
     <div className={containerClassName}>
@@ -60,7 +67,13 @@ export function DatePicker({
           align={popoverAlign}
           aria-label={label ?? "Choose a date"}
         >
-          <Calendar mode="single" selected={value} defaultMonth={value} onSelect={onSelect} />
+          <Calendar
+            mode="single"
+            selected={value}
+            defaultMonth={value}
+            onSelect={onSelect}
+            captionLayout={captionLayout}
+          />
         </PopoverContent>
       </Popover>
     </div>

package/src/components/forms/select.stories.tsx

@@ -1,4 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
+import * as React from "react";
+import { expect, userEvent, within } from "storybook/test";
 
 import {
   Select,
@@ -36,6 +38,117 @@ export const Default: Story = {
   ),
 };
 
+export const SelectedValue: Story = {
+  render: () => (
+    <Select defaultValue="banana">
+      <SelectTrigger className="w-[180px]" aria-label="Selected fruit">
+        <SelectValue placeholder="Select a fruit" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="apple">Apple</SelectItem>
+        <SelectItem value="banana">Banana</SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+  play: async ({ canvasElement }) => {
+    await expect(within(canvasElement).getByRole("combobox", { name: "Selected fruit" })).toHaveTextContent(
+      "Banana",
+    );
+  },
+};
+
+export const ExplicitItems: Story = {
+  render: () => (
+    <Select
+      defaultValue="us"
+      items={[
+        { value: "us", label: "United States" },
+        { value: "ca", label: "Canada" },
+      ]}
+    >
+      <SelectTrigger aria-label="Country">
+        <SelectValue placeholder="Select a country" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="us">US</SelectItem>
+        <SelectItem value="ca">CA</SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+  play: async ({ canvasElement }) => {
+    await expect(within(canvasElement).getByRole("combobox", { name: "Country" })).toHaveTextContent(
+      "United States",
+    );
+  },
+};
+
+export const NullItem: Story = {
+  render: () => (
+    <Select
+      defaultValue={null}
+      items={[{ value: null, label: "All options" }]}
+    >
+      <SelectTrigger aria-label="Filter">
+        <SelectValue placeholder="Choose a filter" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem>All options</SelectItem>
+        <SelectItem value="active">Active</SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+  play: async ({ canvasElement }) => {
+    await expect(within(canvasElement).getByRole("combobox", { name: "Filter" })).toHaveTextContent(
+      "All options",
+    );
+  },
+};
+
+function ControlledNullSelection() {
+  const [value, setValue] = React.useState<string | null>("active");
+  const [lastChange, setLastChange] = React.useState<string | null>("active");
+
+  return (
+    <div>
+      <Select
+        value={value}
+        onValueChange={(nextValue) => {
+          setValue(nextValue);
+          setLastChange(nextValue);
+        }}
+        items={[
+          { value: null, label: "All options" },
+          { value: "active", label: "Active" },
+        ]}
+      >
+        <SelectTrigger aria-label="Controlled filter">
+          <SelectValue placeholder="Choose a filter" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem>All options</SelectItem>
+          <SelectItem value="active">Active</SelectItem>
+        </SelectContent>
+      </Select>
+      <output aria-label="Last selected value">{lastChange ?? "null"}</output>
+    </div>
+  );
+}
+
+export const ControlledNullChange: Story = {
+  render: () => <ControlledNullSelection />,
+  parameters: { a11y: { test: "off" } },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const trigger = canvas.getByRole("combobox", { name: "Controlled filter" });
+
+    await userEvent.click(trigger);
+    await userEvent.click(await within(document.body).findByRole("option", { name: "All options" }));
+    await expect(trigger).toHaveTextContent("All options");
+    await expect(canvas.getByRole("status", { name: "Last selected value" })).toHaveTextContent("null");
+    await userEvent.keyboard("{Escape}");
+  },
+};
+
 export const WithGroups: Story = {
   render: () => (
     <Select>
@@ -70,6 +183,9 @@ export const Disabled: Story = {
       </SelectContent>
     </Select>
   ),
+  play: async ({ canvasElement }) => {
+    await expect(within(canvasElement).getByRole("combobox", { name: "Select a fruit" })).toBeDisabled();
+  },
 };
 
 export const Small: Story = {

package/src/components/forms/select.tsx

@@ -6,22 +6,19 @@ import { cn } from "../../lib/utils";
 
 type SelectProps = Omit<
   React.ComponentProps<typeof SelectPrimitive.Root<string>>,
-  "onValueChange" | "value" | "defaultValue"
+  "value" | "defaultValue"
 > & {
-  value?: string;
-  defaultValue?: string;
-  onValueChange?: (value: string) => void;
+  value?: string | null;
+  defaultValue?: string | null;
 };
 
-function Select({ onValueChange, ...props }: SelectProps) {
+function Select({ children, items, ...props }: SelectProps) {
+  const resolvedItems = items ?? getItemsFromChildren(children);
+
   return (
-    <SelectPrimitive.Root
-      data-slot="select"
-      {...props}
-      onValueChange={(value) => {
-        if (value !== null) onValueChange?.(value);
-      }}
-    />
+    <SelectPrimitive.Root data-slot="select" items={resolvedItems} {...props}>
+      {children}
+    </SelectPrimitive.Root>
   );
 }
 
@@ -129,6 +126,33 @@ function SelectItem({
   );
 }
 
+function getItemsFromChildren(children: React.ReactNode): Record<string, React.ReactNode> {
+  const items: Record<string, React.ReactNode> = {};
+
+  React.Children.forEach(children, (child) => {
+    if (!React.isValidElement(child)) return;
+
+    const element = child as React.ReactElement<{
+      children?: React.ReactNode;
+      value?: unknown;
+    }>;
+
+    if (element.type === SelectItem) {
+      const value = element.props.value;
+      if (typeof value === "string") {
+        items[value] = element.props.children;
+      }
+      return;
+    }
+
+    if (element.props.children) {
+      Object.assign(items, getItemsFromChildren(element.props.children));
+    }
+  });
+
+  return items;
+}
+
 function SelectScrollUpButton({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <SelectPrimitive.ScrollUpArrow

package/src/components/navigation/app-navigation.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import * as React from "react";
+import { userEvent, within } from "storybook/test";
 
 import { Button } from "../primitives/button";
 import { Navigation } from "./app-navigation";
@@ -173,3 +174,44 @@ export const WithExtraContent: Story = {
     </>
   ),
 };
+
+/**
+ * `@internal` — undocumented Nokia 3310-style LCD skin for the mobile Sheet
+ * menu, opted into via `variant="nokia"`. Only affects the mobile Sheet, so
+ * this story forces a mobile viewport and auto-opens the menu trigger.
+ */
+export const Nokia: Story = {
+  parameters: {
+    viewport: { defaultViewport: "mobile1" },
+    chromatic: { viewports: [375] },
+  },
+  render: () => (
+    <>
+      <Navigation variant="nokia">
+        <Navigation.Brand>
+          <a href="/">Acme</a>
+        </Navigation.Brand>
+
+        <Navigation.List>
+          {defaultLinks.map((link) => (
+            <Navigation.Item key={link.href} href={link.href} active={link.href === "/pricing"}>
+              {link.label}
+            </Navigation.Item>
+          ))}
+        </Navigation.List>
+
+        <Navigation.Action>
+          <Button size="md" asChild>
+            <a href="/get-started">Get started</a>
+          </Button>
+        </Navigation.Action>
+      </Navigation>
+      <PageContent message="Open the menu button to see the Nokia 3310-style LCD skin." />
+    </>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const trigger = canvas.getByRole("button", { name: /open menu/i });
+    await userEvent.click(trigger);
+  },
+};

package/src/styles/nokia.css

@@ -3,14 +3,12 @@
  * skin for the mobile Sheet menu. Not part of the public API surface (no
  * README/Storybook entry); opt in via `<Navigation variant="nokia">`.
  */
-@import url("https://fonts.googleapis.com/css2?family=VT323&display=swap");
-
 @theme {
   --color-nokia-screen: #c8d6a6;
   --color-nokia-screen-deep: #b0c188;
   --color-nokia-ink: #26331b;
   --color-nokia-bezel: #1a1a1a;
-  --font-nokia: "VT323", "Courier New", monospace;
+  --font-nokia: ui-monospace, "SF Mono", "Courier New", monospace;
 }
 
 /* No `position: relative` here — SheetContent is `position: fixed` via its