@ponti-studios/ui 0.7.1 → 0.8.0

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"}');
-  },
-};