@ponti-studios/ui 2.0.1 → 3.0.0

package/src/components/filters/active-filters-bar.stories.tsx

@@ -1,114 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { expect, userEvent, within } from "storybook/test";
-import { fn } from "storybook/test";
-
-import { ActiveFiltersBar } from "./active-filters-bar";
-
-const meta = {
-  title: "Filters/ActiveFiltersBar",
-  component: ActiveFiltersBar,
-  tags: ["autodocs"],
-  decorators: [
-    (Story) => (
-      <div className="w-[600px]">
-        <Story />
-      </div>
-    ),
-  ],
-} satisfies Meta<typeof ActiveFiltersBar>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    filters: [
-      { id: "1", label: "Status: Active", onRemove: fn() },
-      { id: "2", label: "Created after Jan 1", onRemove: fn() },
-    ],
-    onClearAll: fn(),
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const list = canvas.getByRole("list");
-    await expect(list).toBeInTheDocument();
-    const items = within(list).getAllByRole("listitem");
-    expect(items.length).toBe(2);
-    await expect(canvas.getByText("Status: Active")).toBeInTheDocument();
-    await expect(canvas.getByText("Created after Jan 1")).toBeInTheDocument();
-    await expect(canvas.getByRole("button", { name: "Clear all" })).toBeInTheDocument();
-  },
-};
-
-export const WithClearAll: Story = {
-  args: {
-    filters: [
-      { id: "1", label: "Status: Active", onRemove: fn() },
-      { id: "2", label: "Role: Engineer", onRemove: fn() },
-    ],
-    onClearAll: fn(),
-  },
-  play: async ({ canvasElement, args }) => {
-    const canvas = within(canvasElement);
-    const list = canvas.getByRole("list");
-    const items = within(list).getAllByRole("listitem");
-    expect(items.length).toBe(2);
-    const clearButton = canvas.getByRole("button", { name: "Clear all" });
-    await expect(clearButton).toBeInTheDocument();
-    await userEvent.click(clearButton);
-    await expect(args.onClearAll).toHaveBeenCalledTimes(1);
-  },
-};
-
-export const WithSortOnly: Story = {
-  args: {
-    filters: [{ id: "1", label: "Date", onRemove: fn(), variant: "sort", direction: "desc" }],
-    onClearAll: fn(),
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const list = canvas.getByRole("list");
-    const items = within(list).getAllByRole("listitem");
-    expect(items.length).toBe(1);
-    await expect(canvas.getByText("Date")).toBeInTheDocument();
-    await expect(canvas.getByRole("button", { name: "Clear all" })).toBeInTheDocument();
-  },
-};
-
-export const WithSortAndFilter: Story = {
-  args: {
-    filters: [
-      { id: "filter-1", label: "Status: Active", onRemove: fn(), variant: "filter" },
-      { id: "sort-1", label: "Date", onRemove: fn(), variant: "sort", direction: "desc" },
-    ],
-    onClearAll: fn(),
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const list = canvas.getByRole("list");
-    const items = within(list).getAllByRole("listitem");
-    expect(items.length).toBe(2);
-    await expect(canvas.getByText("Status: Active")).toBeInTheDocument();
-    await expect(canvas.getByText("Date")).toBeInTheDocument();
-    await expect(canvas.getByRole("button", { name: "Clear all" })).toBeInTheDocument();
-  },
-};
-
-export const Empty: Story = {
-  args: { filters: [] },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    expect(canvas.queryByRole("list")).toBeNull();
-  },
-};
-
-export const WithClassName: Story = {
-  args: {
-    filters: [{ id: "1", label: "Status: Active", onRemove: fn() }],
-    className: "mt-4",
-  },
-  play: async ({ canvasElement }) => {
-    const container = canvasElement.querySelector(".mt-4");
-    await expect(container).not.toBeNull();
-  },
-};

package/src/components/filters/active-filters-bar.tsx

@@ -1,61 +0,0 @@
-import { X } from "lucide-react";
-
-import { cn } from "../../lib/utils";
-import { FilterChip } from "./filter-chip";
-
-export interface ActiveFilter {
-  id: string;
-  label: string;
-  onRemove: () => void;
-  onClick?: () => void;
-  variant?: "filter" | "sort";
-  direction?: "asc" | "desc";
-}
-
-export interface ActiveFiltersBarProps {
-  filters: ActiveFilter[];
-  className?: string;
-  onClearAll?: () => void;
-}
-
-export function ActiveFiltersBar({ filters, className, onClearAll }: ActiveFiltersBarProps) {
-  if (filters.length === 0) {
-    return null;
-  }
-
-  return (
-    <div
-      className={cn(
-        "flex w-full items-center h-10 gap-2 rounded-lg border border-border pr-0",
-        className,
-      )}
-    >
-      <span className="text-muted-foreground shrink-0 self-stretch flex items-center text-sm border-r px-4">
-        Filters
-      </span>
-      <ul className="flex flex-1 min-w-0 items-center gap-2 overflow-x-auto scroll-fade-x pl-4 py-1.5">
-        {filters.map((filter) => (
-          <li key={filter.id} className="shrink-0">
-            <FilterChip
-              label={filter.label}
-              onRemove={filter.onRemove}
-              onClick={filter.onClick}
-              variant={filter.variant === "sort" ? "sort" : "default"}
-              direction={filter.direction}
-            />
-          </li>
-        ))}
-      </ul>
-      {onClearAll ? (
-        <button
-          type="button"
-          onClick={onClearAll}
-          className="hover:bg-muted text-muted-foreground hover:text-foreground focus-visible:ring-ring inline-flex shrink-0 items-center justify-center self-stretch aspect-square rounded-r-lg border-l border-border transition-colors focus-visible:ring-2 focus-visible:outline-none"
-          aria-label="Clear all"
-        >
-          <X className="size-4" aria-hidden />
-        </button>
-      ) : null}
-    </div>
-  );
-}

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

@@ -1,57 +0,0 @@
-import { ArrowDown, ArrowUp, X } from "lucide-react";
-import type { ReactNode } from "react";
-
-import { cn } from "../../lib/utils";
-
-export interface FilterChipProps {
-  label: ReactNode;
-  onRemove: () => void;
-  onClick?: () => void;
-  className?: string;
-  variant?: "default" | "sort";
-  direction?: "asc" | "desc";
-  role?: string;
-}
-
-export function FilterChip({
-  label,
-  onRemove,
-  onClick,
-  className,
-  variant = "default",
-  direction,
-  role,
-}: FilterChipProps) {
-  const isSort = variant === "sort";
-  const DirIcon = direction === "asc" ? ArrowUp : direction === "desc" ? ArrowDown : null;
-
-  return (
-    <span
-      role={role}
-      aria-label={typeof label === "string" ? `${label} filter` : "filter"}
-      className={cn(
-        "border-border bg-secondary text-secondary-foreground inline-flex items-center rounded-full border text-xs font-medium",
-        isSort && "border-dashed",
-        className,
-      )}
-    >
-      <button
-        type="button"
-        disabled={!onClick}
-        className="focus-visible:ring-ring inline-flex items-center rounded-full px-3 transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-default"
-        onClick={onClick}
-      >
-        {isSort && DirIcon ? <DirIcon className="mr-1 size-4" /> : null}
-        {label}
-      </button>
-      <button
-        type="button"
-        className="text-muted-foreground hover:text-foreground focus-visible:ring-ring mr-0.5 flex size-6 items-center justify-center rounded-full transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
-        onClick={onRemove}
-        aria-label={`Remove filter: ${typeof label === "string" ? label : "selected filter"}`}
-      >
-        <X className="size-4" aria-hidden />
-      </button>
-    </span>
-  );
-}

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

@@ -1,71 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { expect, within } from "storybook/test";
-
-import { FilterSelect } from "./filter-select";
-
-const meta = {
-  title: "Filters/FilterSelect",
-  component: FilterSelect,
-  tags: ["autodocs"],
-  args: {
-    options: [
-      { value: "active", label: "Active" },
-      { value: "interview", label: "Interview" },
-      { value: "offer", label: "Offer" },
-      { value: "rejected", label: "Rejected" },
-      { value: "archived", label: "Archived" },
-    ],
-    placeholder: "All statuses",
-    label: "Status",
-    onChange: () => {},
-  },
-} satisfies Meta<typeof FilterSelect>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: { value: null },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const trigger = canvas.getByRole("combobox", { name: "Status" });
-    await expect(trigger).toBeInTheDocument();
-    await expect(trigger).toHaveTextContent("All statuses");
-  },
-};
-
-export const WithValue: Story = {
-  args: { value: "active" },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const trigger = canvas.getByRole("combobox", { name: "Status" });
-    await expect(trigger).toHaveTextContent("Active");
-  },
-};
-
-export const Loading: Story = {
-  args: { value: null, isLoading: true, options: [] },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await expect(canvas.getByRole("combobox", { name: "Status" })).toBeInTheDocument();
-    await expect(canvas.getByText("Status")).toBeInTheDocument();
-  },
-};
-
-export const Empty: Story = {
-  args: { value: null, options: [], emptyLabel: "No statuses found" },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await expect(canvas.getByRole("combobox", { name: "Status" })).toBeInTheDocument();
-    await expect(canvas.getByText("Status")).toBeInTheDocument();
-  },
-};
-
-export const Disabled: Story = {
-  args: { value: "active", disabled: true },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const trigger = canvas.getByRole("combobox", { name: "Status" });
-    await expect(trigger).toBeDisabled();
-  },
-};

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

@@ -1,68 +0,0 @@
-import { useId, useMemo } from "react";
-
-import { cn } from "../../lib/utils";
-import { Spinner } from "../feedback/spinner";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../forms/select";
-
-export interface FilterSelectOption {
-  value: string;
-  label: string;
-}
-
-export interface FilterSelectProps {
-  value: string | null;
-  onChange: (value: string | null) => void;
-  options: FilterSelectOption[];
-  label: string;
-  placeholder?: string;
-  disabled?: boolean;
-  isLoading?: boolean;
-  emptyLabel?: string;
-  className?: string;
-  id?: string;
-}
-
-export function FilterSelect({
-  label,
-  value,
-  options,
-  onChange,
-  placeholder = "All",
-  disabled = false,
-  isLoading = false,
-  emptyLabel = "No options available",
-  className,
-  id,
-}: FilterSelectProps) {
-  const generatedId = useId();
-  const selectId = id ?? generatedId;
-  const items = useMemo(
-    () => [{ value: null, label: placeholder }, ...options],
-    [options, placeholder],
-  );
-
-  return (
-    <div className={cn("space-y-2 min-w-36", className)}>
-      <label htmlFor={selectId}>{label}</label>
-      <Select value={value} onValueChange={onChange} items={items}>
-        <SelectTrigger id={selectId} disabled={disabled} aria-label={label} className="w-full">
-          <SelectValue placeholder={placeholder} />
-        </SelectTrigger>
-        <SelectContent className="bg-background max-h-[250px] min-w-36 overflow-y-auto">
-          <SelectItem>{placeholder}</SelectItem>
-          {isLoading ? (
-            <Spinner presentation="centered" size="sm" />
-          ) : options.length === 0 ? (
-            <div className="text-muted-foreground px-2 py-1.5 text-sm">{emptyLabel}</div>
-          ) : (
-            options.map((option) => (
-              <SelectItem key={option.value} value={option.value}>
-                {option.label}
-              </SelectItem>
-            ))
-          )}
-        </SelectContent>
-      </Select>
-    </div>
-  );
-}

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

@@ -1,35 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-import { Checkbox } from "./checkbox";
-import { Label } from "./label";
-
-const meta = {
-  title: "Forms/Checkbox",
-  component: Checkbox,
-  tags: ["autodocs"],
-} satisfies Meta<typeof Checkbox>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: { "aria-label": "Accept terms" },
-  render: (args) => (
-    <div className="flex items-center gap-2">
-      <Checkbox {...args} id="terms" />
-      <Label htmlFor="terms">Accept terms</Label>
-    </div>
-  ),
-};
-
-export const Checked: Story = {
-  args: { "aria-label": "Checked", defaultChecked: true },
-};
-
-export const Indeterminate: Story = {
-  args: { "aria-label": "Partially selected", indeterminate: true },
-};
-
-export const Disabled: Story = {
-  args: { "aria-label": "Disabled", disabled: true },
-};

package/src/components/forms/checkbox.tsx

@@ -1,38 +0,0 @@
-"use client";
-
-import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
-import { CheckIcon, MinusIcon } from "lucide-react";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
-  return (
-    <CheckboxPrimitive.Root
-      data-slot="checkbox"
-      className={cn(
-        "border-input bg-background aria-checked:bg-primary aria-checked:text-primary-foreground aria-checked:border-primary focus-visible:outline-ring size-4 shrink-0 rounded-[4px] border transition-colors focus-visible:outline-2 focus-visible:outline-offset-2",
-        "aria-[checked=mixed]:bg-primary aria-[checked=mixed]:text-primary-foreground aria-[checked=mixed]:border-primary",
-        "data-disabled:pointer-events-none data-disabled:opacity-50",
-        className,
-      )}
-      {...props}
-    >
-      <CheckboxPrimitive.Indicator
-        data-slot="checkbox-indicator"
-        className="flex items-center justify-center text-current transition-none"
-        render={(props, state) => (
-          <span {...props}>
-            {state.indeterminate ? (
-              <MinusIcon className="size-3" />
-            ) : (
-              <CheckIcon className="size-3" />
-            )}
-          </span>
-        )}
-      />
-    </CheckboxPrimitive.Root>
-  );
-}
-
-export { Checkbox };

package/src/components/forms/date-month-select.stories.tsx

@@ -1,26 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { useState } from "react";
-
-import { DateMonthSelect, getCurrentMonthYear } from "./date-month-select";
-
-const meta = {
-  title: "Forms/DateMonthSelect",
-  component: DateMonthSelect,
-  tags: ["autodocs"],
-} satisfies Meta<typeof DateMonthSelect>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-function DateMonthSelectPreview() {
-  const [value, setValue] = useState(getCurrentMonthYear());
-  return <DateMonthSelect selectedMonthYear={value} onMonthChange={setValue} />;
-}
-
-export const Default: Story = {
-  args: {
-    selectedMonthYear: getCurrentMonthYear(),
-    onMonthChange: () => {},
-  },
-  render: () => <DateMonthSelectPreview />,
-};

package/src/components/forms/date-month-select.tsx

@@ -1,79 +0,0 @@
-import { Calendar } from "lucide-react";
-import { useMemo } from "react";
-
-import { cn } from "../../lib/utils";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select";
-
-interface MonthOption {
-  value: string;
-  label: string;
-}
-
-export interface DateMonthSelectProps {
-  selectedMonthYear: string;
-  onMonthChange: (value: string) => void;
-  monthsBack?: number;
-  className?: string;
-  placeholder?: string;
-}
-
-/** Select a `YYYY-MM` month from the last `monthsBack` months. */
-export function DateMonthSelect({
-  selectedMonthYear,
-  onMonthChange,
-  monthsBack = 12,
-  className = "w-[200px]",
-  placeholder = "Select month",
-}: DateMonthSelectProps) {
-  const monthOptions = useMemo<MonthOption[]>(() => {
-    const options: MonthOption[] = [];
-    const today = new Date();
-    for (let i = 0; i < monthsBack; i++) {
-      const date = new Date(today.getFullYear(), today.getMonth() - i, 1);
-      const year = date.getFullYear();
-      const month = (date.getMonth() + 1).toString().padStart(2, "0");
-      options.push({
-        value: `${year}-${month}`,
-        label: date.toLocaleString("default", { month: "long", year: "numeric" }),
-      });
-    }
-    return options;
-  }, [monthsBack]);
-
-  return (
-    <div className="flex items-center">
-      <div className="border-border bg-background text-foreground flex size-10 items-center justify-center rounded-l-xl border">
-        <Calendar className="size-4" />
-      </div>
-      <Select
-        value={selectedMonthYear}
-        onValueChange={(v: string | null) => v != null && onMonthChange(v)}
-      >
-        <SelectTrigger
-          className={cn(
-            "border-border bg-background text-foreground min-h-10 max-h-10 rounded-l-none rounded-r-xl border-l-0",
-            className,
-          )}
-          aria-label={placeholder}
-        >
-          <SelectValue placeholder={placeholder} />
-        </SelectTrigger>
-        <SelectContent>
-          {monthOptions.map((option) => (
-            <SelectItem key={option.value} value={option.value}>
-              {option.label}
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
-    </div>
-  );
-}
-
-/** Current month in `YYYY-MM` format. */
-export const getCurrentMonthYear = () => {
-  const now = new Date();
-  const year = now.getFullYear();
-  const month = (now.getMonth() + 1).toString().padStart(2, "0");
-  return `${year}-${month}`;
-};