@ponti-studios/ui 0.7.0 → 0.8.0

package/src/components/forms/group-by-select.tsx

@@ -1,47 +0,0 @@
-import { useId } from "react";
-
-import { Label } from "../primitives/label";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select";
-
-type GroupByOption = "month" | "week" | "day";
-
-export interface GroupBySelectProps {
-  groupBy: GroupByOption;
-  onGroupByChange: (value: GroupByOption) => void;
-  label?: string;
-  className?: string;
-}
-
-/** Month/week/day grouping select. */
-export function GroupBySelect({
-  groupBy,
-  onGroupByChange,
-  label = "Group By",
-  className,
-}: GroupBySelectProps) {
-  const id = useId();
-
-  return (
-    <div className={`space-y-2 ${className || ""}`}>
-      <Label htmlFor={id}>{label}</Label>
-      <Select
-        name="groupBy"
-        value={groupBy}
-        onValueChange={(value) => {
-          if (value === "month" || value === "week" || value === "day") {
-            onGroupByChange(value);
-          }
-        }}
-      >
-        <SelectTrigger id={id}>
-          <SelectValue />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="month">Month</SelectItem>
-          <SelectItem value="week">Week</SelectItem>
-          <SelectItem value="day">Day</SelectItem>
-        </SelectContent>
-      </Select>
-    </div>
-  );
-}

package/src/components/navigation/route-link.stories.tsx

@@ -1,30 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-import { RouteLink } from "./route-link";
-
-const meta = {
-  title: "Navigation/RouteLink",
-  component: RouteLink,
-  tags: ["autodocs"],
-} satisfies Meta<typeof RouteLink>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    children: "View accounts",
-    href: "#",
-    className: "text-accent underline",
-  },
-};
-
-export const WithOnNavigate: Story = {
-  name: "With onNavigate callback",
-  args: {
-    children: "Go to analytics",
-    href: "#",
-    className: "text-accent underline",
-    onNavigate: () => console.log("route loading started"),
-  },
-};

package/src/components/navigation/route-link.tsx

@@ -1,42 +0,0 @@
-import type { ComponentPropsWithoutRef, ElementType, MouseEvent, ReactNode } from "react";
-import { useCallback } from "react";
-
-type RouteLinkOwnProps<T extends ElementType> = {
-  as?: T;
-  children: ReactNode;
-  /** Called before the click is forwarded — e.g. to flip a route-loading store. */
-  onNavigate?: () => void;
-};
-
-export type RouteLinkProps<T extends ElementType = "a"> = RouteLinkOwnProps<T> &
-  Omit<ComponentPropsWithoutRef<T>, keyof RouteLinkOwnProps<T>>;
-
-/**
- * Polymorphic link that fires `onNavigate` before `onClick`. Pass your
- * router's `Link` component as `as` for client-side navigation (e.g.
- * `as={Link} to="/accounts"`); the host app owns any route-loading state via
- * `onNavigate` instead of a hardcoded store.
- */
-export function RouteLink<T extends ElementType = "a">({
-  as,
-  children,
-  onNavigate,
-  onClick,
-  ...props
-}: RouteLinkProps<T>) {
-  const Component = (as ?? "a") as ElementType;
-
-  const handleClick = useCallback(
-    (e: MouseEvent) => {
-      onNavigate?.();
-      (onClick as ((e: MouseEvent) => void) | undefined)?.(e);
-    },
-    [onNavigate, onClick],
-  );
-
-  return (
-    <Component onClick={handleClick} {...props}>
-      {children}
-    </Component>
-  );
-}

package/src/hooks/use-derived-filter-state.stories.tsx

@@ -1,136 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { expect, userEvent, within } from 'storybook/test';
-import { useRef } from 'react';
-
-import { useDerivedFilterState, type FilterConfig } from './use-derived-filter-state';
-
-function createMemorySync(initial: Record<string, string>) {
-  const store = { ...initial };
-  return {
-    read: () => ({ ...store }),
-    write: (values: Record<string, string>) => Object.assign(store, values),
-  };
-}
-
-const fields = {
-  status: { default: "", label: (v: string) => `Status: ${v}` } satisfies FilterConfig,
-  search: { default: "" } satisfies FilterConfig,
-};
-
-function Harness() {
-  const sync = useRef(createMemorySync({ status: "", search: "" }));
-  const { values, setValue, activeFilters, clearAll, hasActive } =
-    useDerivedFilterState({ fields, sync: sync.current });
-
-  return (
-    <div data-testid="harness">
-      <span data-testid="values">{JSON.stringify(values)}</span>
-      <span data-testid="active-filters">
-        {activeFilters.map((f) => f.label).join(',')}
-      </span>
-      <span data-testid="has-active">{String(hasActive)}</span>
-      <button
-        data-testid="set-status"
-        onClick={() => setValue('status', 'active')}
-      >
-        Set status
-      </button>
-      <button
-        data-testid="set-search"
-        onClick={() => setValue('search', 'hello')}
-      >
-        Set search
-      </button>
-      <button
-        data-testid="clear-status"
-        onClick={() => setValue('status', '')}
-      >
-        Clear status
-      </button>
-      <button data-testid="clear-all" onClick={() => clearAll()}>
-        Clear all
-      </button>
-    </div>
-  );
-}
-
-const meta: Meta<typeof Harness> = {
-  title: 'Internal/useDerivedFilterState',
-  component: Harness,
-  tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const InitialState: Story = {
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await expect(canvas.getByTestId('values')).toHaveTextContent(
-      '{"status":"","search":""}',
-    );
-    await expect(canvas.getByTestId('has-active')).toHaveTextContent('false');
-    await expect(canvas.getByTestId('active-filters')).toHaveTextContent('');
-  },
-};
-
-export const SetValueCreatesActiveFilter: Story = {
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await userEvent.click(canvas.getByTestId('set-status'));
-    await expect(canvas.getByTestId('values')).toHaveTextContent(
-      '{"status":"active","search":""}',
-    );
-    await expect(canvas.getByTestId('active-filters')).toHaveTextContent(
-      'Status: active',
-    );
-    await expect(canvas.getByTestId('has-active')).toHaveTextContent('true');
-  },
-};
-
-export const ClearValueRemovesActiveFilter: Story = {
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await userEvent.click(canvas.getByTestId('set-status'));
-    await userEvent.click(canvas.getByTestId('clear-status'));
-    await expect(canvas.getByTestId('values')).toHaveTextContent(
-      '{"status":"","search":""}',
-    );
-    await expect(canvas.getByTestId('has-active')).toHaveTextContent('false');
-  },
-};
-
-export const ClearAllResetsEverything: Story = {
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await userEvent.click(canvas.getByTestId('set-status'));
-    await userEvent.click(canvas.getByTestId('set-search'));
-    await userEvent.click(canvas.getByTestId('clear-all'));
-    await expect(canvas.getByTestId('values')).toHaveTextContent(
-      '{"status":"","search":""}',
-    );
-    await expect(canvas.getByTestId('has-active')).toHaveTextContent('false');
-    await expect(canvas.getByTestId('active-filters')).toHaveTextContent('');
-  },
-};
-
-export const ActiveFilterOnRemoveClearsValue: Story = {
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await userEvent.click(canvas.getByTestId('set-status'));
-    await expect(canvas.getByTestId('active-filters')).toHaveTextContent(
-      'Status: active',
-    );
-  },
-};
-
-export const MultipleActiveFilters: Story = {
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await userEvent.click(canvas.getByTestId('set-status'));
-    await userEvent.click(canvas.getByTestId('set-search'));
-    await expect(canvas.getByTestId('active-filters')).toHaveTextContent(
-      'Status: active,search: hello',
-    );
-  },
-};

package/src/hooks/use-filter-state.stories.tsx

@@ -1,102 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { expect, userEvent, within } from 'storybook/test';
-import { useFilterState } from './use-filter-state';
-
-type Filters = Record<string, string>;
-
-function Harness({
-  initialFilters,
-  debounceMs,
-}: {
-  initialFilters: Filters;
-  debounceMs?: number;
-}) {
-  const { filters, updateFilter, setFilters, clearFilters } = useFilterState<Filters>({
-    initialFilters,
-    debounceMs,
-  });
-
-  return (
-    <div data-testid="harness">
-      <span data-testid="filters">{JSON.stringify(filters)}</span>
-      <button
-        data-testid="update-status"
-        onClick={() => updateFilter('status', 'active')}
-      >
-        Set status to active
-      </button>
-      <button
-        data-testid="update-search"
-        onClick={() => updateFilter('search', 'hello')}
-      >
-        Set search to hello
-      </button>
-      <button
-        data-testid="set-filters"
-        onClick={() => setFilters({ status: 'rejected', search: 'test' })}
-      >
-        Set all filters
-      </button>
-      <button data-testid="clear" onClick={() => clearFilters()}>
-        Clear
-      </button>
-    </div>
-  );
-}
-
-const meta: Meta<typeof Harness> = {
-  title: 'Internal/useFilterState',
-  component: Harness,
-  tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const InitialState: Story = {
-  args: {
-    initialFilters: { status: '', search: '' },
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const output = canvas.getByTestId('filters');
-    await expect(output).toHaveTextContent('{"status":"","search":""}');
-  },
-};
-
-export const UpdateSingleFilter: Story = {
-  args: {
-    initialFilters: { status: '', search: '' },
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await userEvent.click(canvas.getByTestId('update-status'));
-    const output = canvas.getByTestId('filters');
-    await expect(output).toHaveTextContent('{"status":"active","search":""}');
-  },
-};
-
-export const SetAllFilters: Story = {
-  args: {
-    initialFilters: { status: '', search: '' },
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await userEvent.click(canvas.getByTestId('set-filters'));
-    const output = canvas.getByTestId('filters');
-    await expect(output).toHaveTextContent('{"status":"rejected","search":"test"}');
-  },
-};
-
-export const ClearResetsToInitial: Story = {
-  args: {
-    initialFilters: { status: 'pending', search: 'default' },
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await userEvent.click(canvas.getByTestId('update-status'));
-    await userEvent.click(canvas.getByTestId('clear'));
-    const output = canvas.getByTestId('filters');
-    await expect(output).toHaveTextContent('{"status":"pending","search":"default"}');
-  },
-};