@ponti-studios/ui 0.6.0 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ponti-studios/ui",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "private": false,
   "description": "Shared UI component library for Ponti Studios",
   "license": "MIT",
@@ -34,6 +34,10 @@
       "types": "./src/components/feedback/index.ts",
       "import": "./src/components/feedback/index.ts"
     },
+    "./filters": {
+      "types": "./src/components/filters/index.ts",
+      "import": "./src/components/filters/index.ts"
+    },
     "./overlays": {
       "types": "./src/components/overlays/index.ts",
       "import": "./src/components/overlays/index.ts"

package/src/components/data-display/index.ts

@@ -1,6 +1,8 @@
 export { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./accordion";
-export { FilterChip } from "./filter-chip";
-export type { FilterChipProps } from "./filter-chip";
+export { ActiveFiltersBar } from "../filters/active-filters-bar";
+export type { ActiveFilter, ActiveFiltersBarProps } from "../filters/active-filters-bar";
+export { FilterChip } from "../filters/filter-chip";
+export type { FilterChipProps } from "../filters/filter-chip";
 export { MetricCard } from "./metric-card";
 export { SortControls } from "./sort-controls";
 export type { SortControlsProps } from "./sort-controls";

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

@@ -0,0 +1,114 @@
+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() },
+    ],
+  },
+  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' },
+    ],
+  },
+  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

@@ -0,0 +1,63 @@
+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>
+      <div
+        role="list"
+        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) => (
+          <FilterChip
+            key={filter.id}
+            role="listitem"
+            className="shrink-0"
+            label={filter.label}
+            onRemove={filter.onRemove}
+            onClick={filter.onClick}
+            variant={filter.variant === "sort" ? "sort" : "default"}
+            direction={filter.direction}
+          />
+        ))}
+      </div>
+      <button
+        type="button"
+        onClick={onClearAll}
+        className="hover:bg-muted text-muted-foreground hover:text-foreground inline-flex shrink-0 items-center justify-center self-stretch aspect-square rounded-r-lg border-l border-border transition-colors"
+        aria-label="Clear all"
+      >
+        <X className="size-4" />
+      </button>
+    </div>
+  );
+}

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

@@ -0,0 +1,57 @@
+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

@@ -0,0 +1,71 @@
+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: '' },
+  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: '', 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: '', 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

@@ -0,0 +1,75 @@
+import { useId, useMemo } from "react";
+
+import { cn } from "../../lib/utils";
+import { Label } from "../primitives/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../forms/select";
+
+export interface FilterSelectOption {
+  value: string;
+  label: string;
+}
+
+export interface FilterSelectProps {
+  value: string;
+  onChange: (value: string) => void;
+  options: FilterSelectOption[];
+  label: string;
+  placeholder?: string;
+  disabled?: boolean;
+  isLoading?: boolean;
+  emptyLabel?: string;
+  className?: string;
+  id?: string;
+}
+
+const ALL_VALUE = "";
+
+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: ALL_VALUE, 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 value={ALL_VALUE}>{placeholder}</SelectItem>
+          {isLoading ? (
+            <div className="text-muted-foreground px-2 py-1.5 text-sm">Loading…</div>
+          ) : 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/filters/filters.stories.tsx

@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { expect, within } from 'storybook/test';
+
+import { Input } from '../forms/input';
+import { Filters } from './filters';
+
+const meta = {
+  title: 'Filters/Compound',
+  component: Filters,
+  tags: ['autodocs'],
+  args: {
+    children: null,
+  },
+} satisfies Meta<typeof Filters>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const statusOptions = [
+  { value: 'active', label: 'Active' },
+  { value: 'interview', label: 'Interview' },
+  { value: 'offer', label: 'Offer' },
+];
+
+export const Default: Story = {
+  render: () => (
+    <div className="w-[720px]">
+      <Filters>
+        <Filters.Search label="Search">
+          <Input placeholder="Search applications..." aria-label="Search applications" />
+        </Filters.Search>
+        <Filters.Select
+          value="active"
+          options={statusOptions}
+          onChange={() => {}}
+          placeholder="All statuses"
+          label="Status"
+        />
+        <Filters.Select
+          value=""
+          options={[{ value: 'engineer', label: 'Engineer' }]}
+          onChange={() => {}}
+          placeholder="All roles"
+          label="Role"
+        />
+        <Filters.Active
+          filters={[
+            { id: 'status', label: 'Status: Active', onRemove: () => {} },
+            { id: 'sort', label: 'Date', onRemove: () => {}, variant: 'sort', direction: 'desc' },
+          ]}
+          onClearAll={() => {}}
+        />
+      </Filters>
+    </div>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await expect(canvas.getByText('Search')).toBeInTheDocument();
+    await expect(canvas.getByRole('textbox', { name: 'Search applications' })).toBeInTheDocument();
+
+    await expect(canvas.getByText('Status')).toBeInTheDocument();
+    await expect(canvas.getByRole('combobox', { name: 'Status' })).toBeInTheDocument();
+
+    await expect(canvas.getByText('Role')).toBeInTheDocument();
+    await expect(canvas.getByRole('combobox', { name: 'Role' })).toBeInTheDocument();
+
+    await expect(canvas.getByText('Status: Active')).toBeInTheDocument();
+    await expect(canvas.getByText('Date')).toBeInTheDocument();
+    await expect(canvas.getByRole('button', { name: 'Clear all' })).toBeInTheDocument();
+  },
+};

package/src/components/filters/filters.tsx

@@ -0,0 +1,78 @@
+import { Children, isValidElement, type ReactNode } from "react";
+
+import { cn } from "../../lib/utils";
+import { ActiveFiltersBar, type ActiveFiltersBarProps } from "./active-filters-bar";
+import { FilterSelect, type FilterSelectProps } from "./filter-select";
+import { Label } from "../primitives/label";
+
+export function FiltersSearch({
+  label,
+  children,
+}: {
+  label: string;
+  children: ReactNode;
+}) {
+  const id = `filters-search-${label.toLowerCase().replace(/\s+/g, "-")}`;
+  return (
+    <div className="flex-1 space-y-2">
+      <Label htmlFor={id}>{label}</Label>
+      {children}
+    </div>
+  );
+}
+FiltersSearch.slot = "search";
+
+export function FiltersSelect(props: FilterSelectProps) {
+  return <FilterSelect {...props} label={props.label ?? props.placeholder} />;
+}
+FiltersSelect.slot = "select";
+
+export function FiltersActive(props: ActiveFiltersBarProps) {
+  return <ActiveFiltersBar {...props} />;
+}
+FiltersActive.slot = "active";
+
+export interface FiltersProps {
+  children: ReactNode;
+  className?: string;
+}
+
+function FiltersRoot({ children, className }: FiltersProps) {
+  const search: ReactNode[] = [];
+  const selects: ReactNode[] = [];
+  const active: ReactNode[] = [];
+
+  Children.forEach(children, (child) => {
+    if (!isValidElement(child)) return;
+    const slot = (child.type as any)?.slot;
+    if (slot === "search") search.push(child);
+    else if (slot === "select") selects.push(child);
+    else if (slot === "active") active.push(child);
+  });
+
+  return (
+    <div className={cn("flex flex-col gap-4", className)}>
+      <div className="flex flex-col gap-3 lg:flex-row lg:items-start">
+        {search}
+        {selects.map((s, i) => (
+          <div key={i} className="sm:w-48">
+            {s}
+          </div>
+        ))}
+      </div>
+      {active}
+    </div>
+  );
+}
+
+type FiltersComponent = typeof FiltersRoot & {
+  Search: typeof FiltersSearch;
+  Select: typeof FiltersSelect;
+  Active: typeof FiltersActive;
+};
+
+export const Filters: FiltersComponent = Object.assign(FiltersRoot, {
+  Search: FiltersSearch,
+  Select: FiltersSelect,
+  Active: FiltersActive,
+});

package/src/components/filters/index.ts

@@ -0,0 +1,10 @@
+export { ActiveFiltersBar } from "./active-filters-bar";
+export type { ActiveFilter, ActiveFiltersBarProps } from "./active-filters-bar";
+export { FilterChip } from "./filter-chip";
+export type { FilterChipProps } from "./filter-chip";
+export { FilterSelect } from "./filter-select";
+export type { FilterSelectOption, FilterSelectProps } from "./filter-select";
+export { Filters } from "./filters";
+export type { FiltersProps } from "./filters";
+export { SearchFilterBar } from "./search-filter-bar";
+export type { SearchFilterBarProps } from "./search-filter-bar";

package/src/components/filters/search-filter-bar.stories.tsx

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Input } from '../forms/input';
+import { FilterSelect } from './filter-select';
+import { SearchFilterBar } from './search-filter-bar';
+
+const meta = {
+  title: 'Filters/SearchFilterBar',
+  component: SearchFilterBar,
+  tags: ['autodocs'],
+} satisfies Meta<typeof SearchFilterBar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Legacy: Story = {
+  args: {
+    activeFilters: [],
+  },
+  render: () => (
+    <div className="w-[720px]">
+      <SearchFilterBar
+        activeFilters={[
+          { id: 'status', label: 'Status: Active', onRemove: () => {} },
+        ]}
+        onClearAll={() => {}}
+        search={<Input placeholder="Search..." aria-label="Search" />}
+        filters={[
+          <FilterSelect
+            key="status"
+            value="active"
+            options={[{ value: 'active', label: 'Active' }]}
+            onChange={() => {}}
+            placeholder="All"
+            label="Status"
+          />,
+        ]}
+      />
+    </div>
+  ),
+};

package/src/components/filters/search-filter-bar.tsx

@@ -0,0 +1,48 @@
+import { type ReactNode } from 'react';
+
+import { cn } from '../../lib/utils';
+import { ActiveFiltersBar, type ActiveFilter } from './active-filters-bar';
+
+export interface SearchFilterBarProps {
+  activeFilters: ActiveFilter[];
+  onClearAll?: () => void;
+  search?: ReactNode;
+  filters?: ReactNode[];
+  results?: ReactNode;
+  children?: ReactNode;
+  className?: string;
+  filterItemClassName?: string;
+}
+
+export function SearchFilterBar({
+  activeFilters,
+  onClearAll,
+  search,
+  filters,
+  results,
+  children,
+  className,
+  filterItemClassName = 'sm:w-48',
+}: SearchFilterBarProps) {
+  return (
+    <div className={cn('flex flex-col gap-4', className)}>
+      <div className="flex flex-col gap-3 lg:flex-row lg:items-center">
+        {search ? <div className="flex-1">{search}</div> : null}
+
+        {filters?.map((filter, index) => (
+          <div key={index} className={filterItemClassName}>
+            {filter}
+          </div>
+        ))}
+
+        {results ? (
+          <div className="self-start lg:ml-auto lg:self-auto">{results}</div>
+        ) : null}
+
+        {children}
+      </div>
+
+      <ActiveFiltersBar filters={activeFilters} onClearAll={onClearAll} />
+    </div>
+  );
+}

package/src/components/forms/index.ts

@@ -6,10 +6,10 @@ export { DateMonthSelect, getCurrentMonthYear } from "./date-month-select";
 export type { DateMonthSelectProps } from "./date-month-select";
 export { DropZone } from "./drop-zone";
 export type { DropZoneProps } from "./drop-zone";
-export { EntitySelect } from "./entity-select";
-export type { EntitySelectOption, EntitySelectProps } from "./entity-select";
 export { Field } from "./field";
 export type { FieldProps } from "./field";
+export { FilterSelect } from "../filters/filter-select";
+export type { FilterSelectOption, FilterSelectProps } from "../filters/filter-select";
 export { GroupBySelect } from "./group-by-select";
 export type { GroupBySelectProps } from "./group-by-select";
 export { Input } from "./input";