@stackshift-ui/date-picker 1.0.0-beta.1

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@stackshift-ui/date-picker",
+  "description": "A date picker component with range and presets.",
+  "version": "1.0.0-beta.1",
+  "private": false,
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist/**",
+    "src"
+  ],
+  "author": "WebriQ <info@webriq.com>",
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^22.7.0",
+    "@types/react": "^18.3.9",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "@vitest/coverage-v8": "^2.1.1",
+    "esbuild-plugin-rdi": "^0.0.0",
+    "esbuild-plugin-react18": "^0.2.5",
+    "esbuild-plugin-react18-css": "^0.0.4",
+    "jsdom": "^25.0.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tsup": "^8.3.0",
+    "typescript": "^5.6.2",
+    "vite-tsconfig-paths": "^5.0.1",
+    "vitest": "^2.1.1",
+    "@stackshift-ui/typescript-config": "6.0.10",
+    "@stackshift-ui/eslint-config": "6.0.10"
+  },
+  "dependencies": {
+    "classnames": "^2.5.1",
+    "date-fns": "^4.1.0",
+    "lucide-react": "^0.468.0",
+    "@stackshift-ui/button": "6.1.0-beta.0",
+    "@stackshift-ui/scripts": "6.1.0-beta.0",
+    "@stackshift-ui/popover": "1.0.0-beta.1",
+    "@stackshift-ui/system": "6.1.0-beta.0",
+    "@stackshift-ui/calendar": "1.0.0-beta.1",
+    "@stackshift-ui/input": "7.0.0-beta.0",
+    "@stackshift-ui/label": "1.0.0-beta.1"
+  },
+  "peerDependencies": {
+    "@stackshift-ui/system": ">=6.1.0-beta.0",
+    "@types/react": "16.8 - 19",
+    "next": "10 - 14",
+    "react": "16.8 - 19",
+    "react-dom": "16.8 - 19"
+  },
+  "peerDependenciesMeta": {
+    "next": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "build": "tsup && tsc -p tsconfig-build.json",
+    "clean": "rm -rf dist",
+    "dev": "tsup --watch && tsc -p tsconfig-build.json -w",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src/",
+    "test": "vitest run --coverage"
+  }
+}

package/src/date-picker.test.tsx

@@ -0,0 +1,289 @@
+import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, test, vi } from "vitest";
+import { DatePicker } from "./date-picker";
+
+describe("DatePicker", () => {
+  afterEach(cleanup);
+
+  test("Common: DatePicker - test if renders without errors", ({ expect }) => {
+    const { unmount } = render(<DatePicker data-testid="date-picker" label="Select a date" />);
+    expect(screen.getByText("Select a date")).toBeInTheDocument();
+    unmount();
+  });
+
+  test("Common: DatePicker - test if renders with correct label", ({ expect }) => {
+    const { unmount } = render(<DatePicker data-testid="date-picker" label="Choose your date" />);
+    expect(screen.getByText("Choose your date")).toBeInTheDocument();
+    unmount();
+  });
+
+  test("Common: DatePicker - test if renders with default date", ({ expect }) => {
+    const defaultDate = new Date(2024, 0, 15);
+    const { unmount } = render(<DatePicker selectedDate={defaultDate} label="Select date" />);
+    expect(screen.getByText(defaultDate.toLocaleDateString())).toBeInTheDocument();
+    unmount();
+  });
+
+  test("Common: DatePicker - test if shows current date when no date is provided", ({ expect }) => {
+    const { unmount } = render(<DatePicker label="Select date" />);
+    const today = new Date();
+    expect(screen.getByText(today.toLocaleDateString())).toBeInTheDocument();
+    unmount();
+  });
+
+  test("Common: DatePicker - test if opens calendar when trigger is clicked", async ({
+    expect,
+  }) => {
+    const user = userEvent.setup();
+    const { unmount } = render(<DatePicker label="Select date" />);
+
+    const trigger = screen.getByRole("button");
+    await user.click(trigger);
+
+    await waitFor(() => {
+      expect(screen.getByRole("dialog")).toBeInTheDocument();
+    });
+    unmount();
+  });
+
+  test("Common: DatePicker - test if closes calendar when clicking outside", async ({ expect }) => {
+    const user = userEvent.setup();
+    const { unmount } = render(
+      <div>
+        <DatePicker label="Select date" />
+        <button>Outside button</button>
+      </div>,
+    );
+
+    const trigger = screen.getByRole("button", { name: /select date/i });
+    await user.click(trigger);
+
+    await waitFor(() => {
+      expect(screen.getByRole("dialog")).toBeInTheDocument();
+    });
+
+    const outsideButton = screen.getByRole("button", { name: /outside/i });
+    await user.click(outsideButton);
+
+    await waitFor(() => {
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    });
+
+    unmount();
+  });
+
+  test("Common: DatePicker - test if calls onSelect when calendar day is clicked", async ({
+    expect,
+  }) => {
+    const user = userEvent.setup();
+    const onSelect = vi.fn();
+
+    const { unmount } = render(<DatePicker label="Select date" onSelect={onSelect} />);
+
+    const trigger = screen.getByRole("button");
+    await user.click(trigger);
+
+    await waitFor(() => {
+      expect(screen.getByRole("dialog")).toBeInTheDocument();
+    });
+
+    // Find all day buttons and click one that's not disabled
+    const dayButtons = screen
+      .getAllByRole("button")
+      .filter(
+        btn => btn.textContent && /^\d+$/.test(btn.textContent) && !btn.hasAttribute("disabled"),
+      );
+
+    if (dayButtons.length > 0) {
+      await user.click(dayButtons[0]);
+      expect(onSelect).toHaveBeenCalled();
+    }
+    unmount();
+  });
+
+  // Keyboard navigation tests
+  test("Common: DatePicker - test if opens calendar with Enter key", async ({ expect }) => {
+    const user = userEvent.setup();
+    const { unmount } = render(<DatePicker label="Select date" />);
+
+    const trigger = screen.getByRole("button");
+    trigger.focus();
+    await user.keyboard("{Enter}");
+
+    await waitFor(() => {
+      expect(screen.getByRole("dialog")).toBeInTheDocument();
+    });
+    unmount();
+  });
+
+  test("Common: DatePicker - test if opens calendar with Space key", async ({ expect }) => {
+    const user = userEvent.setup();
+    const { unmount } = render(<DatePicker label="Select date" />);
+
+    const trigger = screen.getByRole("button");
+    trigger.focus();
+    await user.keyboard(" ");
+
+    await waitFor(() => {
+      expect(screen.getByRole("dialog")).toBeInTheDocument();
+    });
+    unmount();
+  });
+
+  test("Common: DatePicker - test if closes calendar with Escape key", async ({ expect }) => {
+    const user = userEvent.setup();
+    const { unmount } = render(<DatePicker label="Select date" />);
+
+    const trigger = screen.getByRole("button");
+    await user.click(trigger);
+
+    await waitFor(() => {
+      expect(screen.getByRole("dialog")).toBeInTheDocument();
+    });
+
+    await user.keyboard("{Escape}");
+
+    await waitFor(() => {
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    });
+    unmount();
+  });
+
+  test("Common: DatePicker - test if displays date in correct format", ({ expect }) => {
+    const testDate = new Date(2024, 5, 15); // June 15, 2024
+    const { unmount } = render(<DatePicker selectedDate={testDate} label="Select date" />);
+
+    const expectedFormat = testDate.toLocaleDateString();
+    expect(screen.getByText(expectedFormat)).toBeInTheDocument();
+    unmount();
+  });
+
+  test("Common: DatePicker - test if has proper ARIA attributes", ({ expect }) => {
+    const { unmount } = render(<DatePicker label="Select date" />);
+
+    const trigger = screen.getByRole("button");
+    expect(trigger).toHaveAttribute("aria-haspopup", "dialog");
+    expect(trigger).toHaveAttribute("aria-expanded", "false");
+    unmount();
+  });
+
+  test("Common: DatePicker - test if updates ARIA expanded when calendar opens", async ({
+    expect,
+  }) => {
+    const user = userEvent.setup();
+    const { unmount } = render(<DatePicker label="Select date" />);
+
+    const trigger = screen.getByRole("button");
+    await user.click(trigger);
+
+    await waitFor(() => {
+      expect(trigger).toHaveAttribute("aria-expanded", "true");
+    });
+    unmount();
+  });
+
+  test("Common: DatePicker - test if has proper label association", ({ expect }) => {
+    const { unmount } = render(<DatePicker label="Birth date" />);
+
+    const trigger = screen.getByRole("button");
+    const label = screen.getByText("Birth date");
+
+    expect(trigger).toHaveAttribute("id", "date");
+    expect(label).toHaveAttribute("for", "date");
+    unmount();
+  });
+
+  test("Common: DatePicker - test if handles leap year dates correctly", ({ expect }) => {
+    const leapYearDate = new Date(2024, 1, 29); // Feb 29, 2024
+    const { unmount } = render(<DatePicker selectedDate={leapYearDate} label="Select date" />);
+
+    const expectedFormat = leapYearDate.toLocaleDateString();
+    expect(screen.getByText(expectedFormat)).toBeInTheDocument();
+  });
+
+  test("Common: DatePicker - test if cleans up event listeners on unmount", ({ expect }) => {
+    const { unmount } = render(<DatePicker label="Select date" />);
+
+    expect(() => unmount()).not.toThrow();
+  });
+
+  test("Common: DatePicker - test if handles rapid clicks without errors", async ({ expect }) => {
+    const user = userEvent.setup();
+    const onSelect = vi.fn();
+
+    const { unmount } = render(<DatePicker label="Select date" onSelect={onSelect} />);
+
+    const trigger = screen.getByRole("button");
+
+    await user.click(trigger);
+    await user.click(trigger);
+    await user.click(trigger);
+
+    await waitFor(() => {
+      expect(screen.getByRole("dialog")).toBeInTheDocument();
+    });
+    unmount();
+  });
+
+  test("Common: DatePicker - test if passes through additional props", ({ expect }) => {
+    const { unmount } = render(
+      <DatePicker label="Select date" data-testid="custom-picker" className="custom-class" />,
+    );
+
+    const container = screen.getByTestId("custom-picker");
+    expect(container).toBeInTheDocument();
+    expect(container).toHaveClass("custom-class");
+    unmount();
+  });
+
+  test("Common: DatePicker - test if handles different date selections", async ({ expect }) => {
+    const user = userEvent.setup();
+    const onSelect = vi.fn();
+
+    const { unmount } = render(<DatePicker label="Select date" onSelect={onSelect} />);
+
+    const trigger = screen.getByRole("button");
+    await user.click(trigger);
+
+    await waitFor(() => {
+      expect(screen.getByRole("dialog")).toBeInTheDocument();
+    });
+
+    const dayButtons = screen
+      .getAllByRole("button")
+      .filter(
+        btn => btn.textContent && /^\d+$/.test(btn.textContent) && !btn.hasAttribute("disabled"),
+      );
+
+    if (dayButtons.length > 1) {
+      await user.click(dayButtons[0]);
+      expect(onSelect).toHaveBeenCalledTimes(1);
+
+      await waitFor(
+        () => {
+          expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+        },
+        { timeout: 2000 },
+      );
+
+      await user.click(trigger);
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument();
+      });
+
+      const newDayButtons = screen
+        .getAllByRole("button")
+        .filter(
+          btn => btn.textContent && /^\d+$/.test(btn.textContent) && !btn.hasAttribute("disabled"),
+        );
+
+      if (newDayButtons.length > 1) {
+        await user.click(newDayButtons[1]);
+        expect(onSelect).toHaveBeenCalledTimes(2);
+      }
+    }
+    unmount();
+  });
+});

package/src/date-picker.tsx

@@ -0,0 +1,228 @@
+"use client";
+
+import { Calendar as CalendarIcon, ChevronDownIcon } from "lucide-react";
+import * as React from "react";
+
+import { Button } from "@stackshift-ui/button";
+import { Calendar } from "@stackshift-ui/calendar";
+import { Input } from "@stackshift-ui/input";
+import { Label } from "@stackshift-ui/label";
+import { Popover, PopoverContent, PopoverTrigger } from "@stackshift-ui/popover";
+import { cn, DefaultComponent, useStackShiftUIComponents } from "@stackshift-ui/system";
+
+const displayName = "DatePicker";
+const displayNameInput = "DatePickerInput";
+const displayNameTime = "DatePickerTime";
+
+export interface DatePickerProps {
+  label?: string;
+  mode?: "single" | "multiple" | "range" | undefined;
+  selectedDate?: Date;
+  onSelect?: (date: Date) => void;
+  required?: boolean;
+  min?: number;
+  max?: number;
+  className?: string;
+}
+
+export function DatePicker({
+  label,
+  mode = "range",
+  selectedDate,
+  onSelect,
+  ...props
+}: DatePickerProps) {
+  const { [displayName]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  const [open, setOpen] = React.useState(false);
+  const date = selectedDate || new Date();
+
+  const handleSelect = (date: Date) => {
+    setOpen(false);
+    onSelect?.(date);
+  };
+
+  return (
+    <Component className={cn("flex flex-col gap-3", props.className)} {...props}>
+      <Label htmlFor="date" className="px-1">
+        {label}
+      </Label>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button variant="outline" id="date" className="w-48 justify-between font-normal">
+            {date ? date.toLocaleDateString() : "Select date"}
+            <ChevronDownIcon />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto overflow-hidden p-0" align="start">
+          {/* @ts-ignore-error */}
+          <Calendar mode={mode} selected={date} captionLayout="dropdown" onSelect={handleSelect} />
+        </PopoverContent>
+      </Popover>
+    </Component>
+  );
+}
+DatePicker.displayName = displayName;
+
+function formatDate(date: Date | undefined) {
+  if (!date) {
+    return "";
+  }
+  return date.toLocaleDateString("en-US", {
+    day: "2-digit",
+    month: "long",
+    year: "numeric",
+  });
+}
+function isValidDate(date: Date | undefined) {
+  if (!date) {
+    return false;
+  }
+  return !isNaN(date.getTime());
+}
+
+export interface DatePickerInputProps extends Omit<DatePickerProps, "mode"> {
+  selectedMonth?: Date;
+  onMonthChange?: (date: Date) => void;
+}
+
+export function DatePickerInput({
+  label,
+  selectedDate,
+  onSelect,
+  selectedMonth,
+  onMonthChange,
+  ...props
+}: DatePickerInputProps) {
+  const { [displayNameInput]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  const [open, setOpen] = React.useState(false);
+  const [date, setDate] = React.useState(selectedDate || new Date());
+  const [month, setMonth] = React.useState(selectedMonth || date);
+  const [value, setValue] = React.useState(formatDate(date));
+
+  const handleSelect = (date: Date | undefined) => {
+    if (!date) return;
+    setDate(date);
+    setValue(formatDate(date));
+    setOpen(false);
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const date = new Date(e.target.value);
+    setValue(e.target.value);
+    if (isValidDate(date)) {
+      setDate(date);
+      setMonth(date);
+      onSelect?.(date);
+      onMonthChange?.(date);
+    }
+  };
+
+  return (
+    <Component className="flex flex-col gap-3" {...props}>
+      <Label htmlFor="date" className="px-1">
+        {label}
+      </Label>
+      <div className="relative flex gap-2">
+        <Input
+          id="date"
+          value={value}
+          placeholder="June 01, 2025"
+          className="bg-background pr-10"
+          onChange={handleInputChange}
+          onKeyDown={e => {
+            if (e.key === "ArrowDown") {
+              e.preventDefault();
+              setOpen(true);
+            }
+          }}
+        />
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              id="date-picker"
+              variant="ghost"
+              className="absolute top-1/2 right-2 size-6 -translate-y-1/2">
+              <CalendarIcon className="size-3.5" />
+              <span className="sr-only">Select date</span>
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent
+            className="w-auto overflow-hidden p-0"
+            align="end"
+            alignOffset={-8}
+            sideOffset={10}>
+            <Calendar
+              mode="single"
+              selected={date}
+              captionLayout="dropdown"
+              month={month}
+              onMonthChange={setMonth}
+              onSelect={handleSelect}
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
+    </Component>
+  );
+}
+DatePickerInput.displayName = displayNameInput;
+
+export interface DatePickerTimeProps extends Omit<DatePickerProps, "mode"> {
+  selectedTime?: string;
+  onTimeChange?: (time: string) => void;
+}
+
+export function DatePickerTime({ label, selectedDate, onSelect, ...props }: DatePickerTimeProps) {
+  const { [displayNameTime]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  const [open, setOpen] = React.useState(false);
+  const [date, setDate] = React.useState<Date | undefined>(selectedDate);
+
+  const handleSelect = (date: Date | undefined) => {
+    setDate(date);
+    setOpen(false);
+    if (!date) return;
+    onSelect?.(date);
+  };
+
+  return (
+    <Component className="flex gap-4" {...props}>
+      <div className="flex flex-col gap-3">
+        <Label htmlFor="date-picker" className="px-1">
+          {label}
+        </Label>
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button variant="outline" id="date-picker" className="w-32 justify-between font-normal">
+              {date ? date.toLocaleDateString() : "Select date"}
+              <ChevronDownIcon />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-auto overflow-hidden p-0" align="start">
+            <Calendar
+              mode="single"
+              selected={date}
+              captionLayout="dropdown"
+              onSelect={handleSelect}
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
+      <div className="flex flex-col gap-3">
+        <Label htmlFor="time-picker" className="px-1">
+          Time
+        </Label>
+        <Input
+          /* @ts-ignore-error */
+          type="time"
+          id="time-picker"
+          step="1"
+          defaultValue="10:30:00"
+          className="bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+        />
+      </div>
+    </Component>
+  );
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+"use client";
+
+// component exports
+export * from "./date-picker";

package/src/setupTests.ts

@@ -0,0 +1,4 @@
+import '@testing-library/jest-dom';
+
+export { };
+