@bearmenu/ui 0.8.52 → 0.8.54

package/src/components/filter-option-group.stories.tsx

@@ -0,0 +1,250 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { ArrowLeft, X } from "lucide-react";
+import { FilterOptionGroup } from "./filter-option-group";
+import { Button } from "./button";
+import { FilterPanelFooter } from "./filter-panel-footer";
+
+const meta: Meta<typeof FilterOptionGroup> = {
+  title: "Places/Filters redesign",
+  component: FilterOptionGroup,
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "Issue #255 design review. Native wrapping options with immediate selection, persistent reset/results actions and selected summaries. Demo counts are fixtures, not live results. App URL, search flush and map navigation are verified during integration.",
+      },
+    },
+  },
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function FiltersPreview({
+  width = 390,
+  english = false,
+  pending = false,
+  zero = false,
+  largeText = false,
+  initiallyOpenNow = false,
+}: {
+  width?: number;
+  english?: boolean;
+  pending?: boolean;
+  zero?: boolean;
+  largeText?: boolean;
+  initiallyOpenNow?: boolean;
+}) {
+  const [values, setValues] = useState<Record<string, string[]>>({
+    type: ["Restaurant"],
+    service: [english ? "Table service" : "La masă"],
+    openNow: initiallyOpenNow ? [english ? "Open now" : "Deschis acum"] : [],
+  });
+  const [results, setResults] = useState(false);
+  const groups = [
+    {
+      key: "type",
+      title: english ? "Place type" : "Tipul localului",
+      open: true,
+      options: english
+        ? ["Restaurant", "Bistro", "Café", "Pub", "Bar", "Bakery"]
+        : ["Restaurant", "Bistro", "Cafenea", "Pub", "Bar", "Brutărie"],
+    },
+    {
+      key: "food",
+      title: english ? "Cuisine" : "Bucătărie",
+      open: true,
+      options: english
+        ? [
+            "Romanian",
+            "Italian",
+            "Mediterranean",
+            "Japanese",
+            "International",
+            "French",
+            "Greek",
+            "Turkish",
+            "Mexican",
+          ]
+        : [
+            "Românească",
+            "Italiană",
+            "Mediteraneană",
+            "Japoneză",
+            "Internațională",
+            "Franceză",
+            "Grecească",
+            "Turcească",
+            "Mexicană",
+          ],
+    },
+    {
+      key: "service",
+      title: english ? "Service" : "Servire",
+      options: english
+        ? ["Table service", "Self service", "Takeaway"]
+        : ["La masă", "Autoservire", "La pachet"],
+    },
+    {
+      key: "openNow",
+      title: english ? "Open now" : "Deschis acum",
+      open: true,
+      options: [english ? "Open now" : "Deschis acum"],
+    },
+    {
+      key: "dietary",
+      title: english ? "Dietary preferences" : "Preferințe alimentare",
+      options: english
+        ? [
+            "Vegetarian options",
+            "Vegan options",
+            "Gluten-free options available on request",
+          ]
+        : [
+            "Opțiuni vegetariene",
+            "Opțiuni vegane",
+            "Opțiuni fără gluten disponibile la cerere",
+          ],
+    },
+    {
+      key: "vibe",
+      title: english ? "Atmosphere" : "Atmosferă",
+      options: english
+        ? ["Cozy", "Romantic", "Family friendly", "Lively", "Quiet"]
+        : [
+            "Primitoare",
+            "Romantică",
+            "Potrivit pentru familii",
+            "Animată",
+            "Liniștită",
+          ],
+    },
+    {
+      key: "amenities",
+      title: english ? "Amenities" : "Facilități",
+      options: english
+        ? ["Terrace", "Wi-Fi", "Parking", "Step-free wheelchair access"]
+        : [
+            "Terasă",
+            "Wi-Fi",
+            "Parcare",
+            "Acces fără trepte pentru scaun rulant",
+          ],
+    },
+  ];
+  const canReset = Object.values(values).some((value) => value.length > 0);
+  return (
+    <div
+      style={{ width, maxWidth: "100%" }}
+      className="mx-auto flex h-[760px] max-h-dvh flex-col overflow-hidden rounded-t-3xl border border-border bg-background text-foreground shadow-lg"
+    >
+      {largeText && <style>{"html { font-size: 20px; }"}</style>}
+      <div
+        aria-hidden
+        className="mx-auto mt-3 h-1 w-10 shrink-0 rounded-full bg-muted-foreground/30"
+      />
+      <header className="flex shrink-0 items-center justify-between gap-3 border-b border-border/60 px-4 py-2">
+        <Button
+          variant="ghost"
+          size="icon"
+          aria-label={english ? "Back to results" : "Înapoi la rezultate"}
+          onClick={() => setResults(true)}
+        >
+          <ArrowLeft aria-hidden />
+        </Button>
+        <h1 className="text-lg font-semibold">
+          {english ? "Filters" : "Filtre"}
+        </h1>
+        <Button
+          variant="ghost"
+          size="icon"
+          aria-label={english ? "Close filters" : "Închide filtrele"}
+          onClick={() => setResults(true)}
+        >
+          <X aria-hidden />
+        </Button>
+      </header>
+      {results ? (
+        <div className="flex flex-1 flex-col items-center justify-center gap-4 p-5">
+          <p>
+            {english
+              ? "Your selections are kept."
+              : "Selecțiile tale sunt păstrate."}
+          </p>
+          <Button onClick={() => setResults(false)}>
+            {english ? "Reopen filters" : "Redeschide filtrele"}
+          </Button>
+        </div>
+      ) : (
+        <>
+          <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain px-4 pb-4">
+            {groups.map((group) => (
+              <FilterOptionGroup
+                key={group.key}
+                title={group.title}
+                defaultOpen={group.open}
+                options={group.options.map((label, index) => ({
+                  value: label,
+                  label,
+                  count:
+                    pending || group.key === "openNow"
+                      ? null
+                      : zero
+                        ? 0
+                        : [159, 42, 26, 18, 12, 7, 6, 4, 2][index],
+                }))}
+                value={values[group.key] ?? []}
+                onValueChange={(value) =>
+                  setValues((previous) => ({
+                    ...previous,
+                    [group.key]: value.map(String),
+                  }))
+                }
+                showAllLabel={
+                  english
+                    ? `Show all (${group.options.length})`
+                    : `Arată toate (${group.options.length})`
+                }
+                showLessLabel={english ? "Show fewer" : "Arată mai puține"}
+              />
+            ))}
+          </div>
+          <FilterPanelFooter
+            resetLabel={english ? "Reset" : "Resetează"}
+            resultsLabel={`${english ? "View results" : "Vezi rezultatele"}${pending ? "" : ` (${zero ? 0 : 159})`}`}
+            canReset={canReset}
+            onReset={() => setValues({})}
+            onResults={() => setResults(true)}
+            resetHint={
+              english
+                ? "Reset clears all filters, including place type and service."
+                : "Resetarea șterge toate filtrele, inclusiv tipul localului și servirea."
+            }
+          />
+        </>
+      )}
+    </div>
+  );
+}
+
+export const Mobile390: Story = { render: () => <FiltersPreview /> };
+export const OpenNowSelected: Story = {
+  render: () => <FiltersPreview initiallyOpenNow />,
+};
+export const Narrow360: Story = {
+  render: () => <FiltersPreview width={360} />,
+};
+export const Wide430: Story = { render: () => <FiltersPreview width={430} /> };
+export const English: Story = { render: () => <FiltersPreview english /> };
+export const PendingCounts: Story = {
+  render: () => <FiltersPreview pending />,
+};
+export const ZeroResults: Story = { render: () => <FiltersPreview zero /> };
+export const LargerText: Story = {
+  render: () => <FiltersPreview width={360} largeText />,
+};
+export const Dark: Story = {
+  globals: { theme: "dark" },
+  render: () => <FiltersPreview />,
+};

package/src/components/filter-option-group.test.tsx

@@ -0,0 +1,100 @@
+import { useState } from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { FilterOptionGroup } from "./filter-option-group";
+import { FacetGroup } from "./facet-group";
+
+describe("FilterOptionGroup", () => {
+  it("keeps selected options outside the cap reachable and summarizes them on collapse", async () => {
+    const user = userEvent.setup();
+    const options = Array.from({ length: 9 }, (_, i) => ({
+      value: String(i),
+      label: `Cuisine ${i}`,
+    }));
+    render(
+      <FilterOptionGroup
+        title="Cuisine"
+        options={options}
+        value={["8"]}
+        onValueChange={() => {}}
+        defaultOpen
+        showAllLabel="Show all"
+        showLessLabel="Show less"
+      />,
+    );
+    expect(screen.getByRole("checkbox", { name: "Cuisine 8" })).toBeChecked();
+    expect(
+      screen.queryByRole("checkbox", { name: "Cuisine 7" }),
+    ).not.toBeInTheDocument();
+    await user.click(screen.getByRole("button", { name: "Show all" }));
+    expect(screen.getByRole("checkbox", { name: "Cuisine 7" })).toBeVisible();
+    await user.click(screen.getByRole("button", { name: /^Cuisine/ }));
+    expect(screen.getByRole("button", { name: /Cuisine 8/ })).toBeVisible();
+    expect(screen.queryByRole("checkbox")).not.toBeInTheDocument();
+  });
+
+  it("leaves the group open after the last selection is removed", async () => {
+    function Example() {
+      const [value, setValue] = useState<(string | number)[]>(["open"]);
+      return (
+        <FilterOptionGroup
+          title="Opening hours"
+          options={[{ value: "open", label: "Open now" }]}
+          value={value}
+          onValueChange={setValue}
+          defaultOpen
+        />
+      );
+    }
+    render(<Example />);
+    await userEvent.click(screen.getByRole("checkbox", { name: "Open now" }));
+    expect(
+      screen.getByRole("checkbox", { name: "Open now" }),
+    ).not.toBeChecked();
+    expect(
+      screen.getByRole("button", { name: "Opening hours" }),
+    ).toHaveAttribute("aria-expanded", "true");
+  });
+
+  it("caps each vocabulary independently", () => {
+    const options = ["Dishes", "Cuisines"].flatMap((section) =>
+      Array.from({ length: 8 }, (_, i) => ({
+        value: `${section}-${i}`,
+        label: `${section} ${i}`,
+        section,
+      })),
+    );
+    render(
+      <FilterOptionGroup
+        title="Food"
+        options={options}
+        value={[]}
+        onValueChange={() => {}}
+        defaultOpen
+        showAllLabel="All"
+        showLessLabel="Less"
+      />,
+    );
+    expect(screen.getAllByRole("checkbox")).toHaveLength(12);
+    expect(screen.getAllByRole("button", { name: "All" })).toHaveLength(2);
+  });
+
+  it("adapts the existing FacetGroup single selection contract", async () => {
+    const onToggle = vi.fn();
+    render(
+      <FacetGroup
+        layout="chips"
+        title="When"
+        selection="single"
+        options={[
+          { id: "today", label: "Today", count: 1, checked: true },
+          { id: "tomorrow", label: "Tomorrow", count: 2 },
+        ]}
+        onToggle={onToggle}
+      />,
+    );
+    await userEvent.click(screen.getByRole("radio", { name: "Tomorrow" }));
+    expect(onToggle).toHaveBeenCalledExactlyOnceWith("tomorrow", true);
+  });
+});

package/src/components/filter-option-group.tsx

@@ -0,0 +1,231 @@
+"use client";
+
+import { type ReactNode, useId, useState } from "react";
+import { ChevronDown } from "lucide-react";
+import { FilterOptionChip } from "./filter-option-chip";
+import { Badge } from "./badge";
+import { Button } from "./button";
+import { Separator } from "./separator";
+import { Text } from "./text";
+import { cn } from "../lib/utils";
+
+export type FilterOptionValue = string | number;
+export type FilterOptionGroupProps = {
+  title: string;
+  options: {
+    value: FilterOptionValue;
+    label: string;
+    count?: number | null;
+    icon?: ReactNode;
+    section?: string;
+  }[];
+  value: FilterOptionValue[];
+  onValueChange: (value: FilterOptionValue[]) => void;
+  selection?: "multiple" | "single";
+  name?: string;
+  defaultOpen?: boolean;
+  collapsible?: boolean;
+  visibleLimit?: number;
+  showAllLabel?: string | ((count: number) => string);
+  showLessLabel?: string;
+  /** Extra controls or a selection explanation, before the options. */
+  children?: ReactNode;
+  footer?: ReactNode;
+  clearLabel?: string;
+  onClear?: () => void;
+  /** Omit neutral choices from the active summary without changing radio selection. */
+  summaryValues?: FilterOptionValue[];
+  className?: string;
+  divider?: boolean;
+  disabled?: boolean;
+};
+
+/** Presentation only: callers own filter rules, URL state, counts and translations. */
+export function FilterOptionGroup({
+  title,
+  options,
+  value,
+  onValueChange,
+  selection = "multiple",
+  name,
+  defaultOpen = false,
+  collapsible = true,
+  visibleLimit = 6,
+  showAllLabel,
+  showLessLabel,
+  children,
+  footer,
+  clearLabel,
+  onClear,
+  summaryValues = value,
+  className,
+  divider = true,
+  disabled,
+}: FilterOptionGroupProps) {
+  const id = useId();
+  const [isOpen, setOpen] = useState(defaultOpen);
+  const open = !collapsible || isOpen;
+  const [expanded, setExpanded] = useState<string[]>([]);
+  const selected = options.filter((option) =>
+    summaryValues.includes(option.value),
+  );
+  const sections: { label?: string; options: typeof options }[] = [];
+  for (const option of options) {
+    const last = sections[sections.length - 1];
+    if (!last || last.label !== option.section)
+      sections.push({ label: option.section, options: [option] });
+    else last.options.push(option);
+  }
+  const heading = (
+    <>
+      <span className="min-w-0 flex-1">
+        <Text
+          as="span"
+          id={`${id}-title`}
+          className="block"
+          variant="body-sm"
+          weight="semibold"
+        >
+          {title}
+        </Text>
+        {!open && selected.length > 0 && (
+          <Text
+            as="span"
+            variant="caption"
+            color="muted"
+            className="mt-1 block leading-relaxed [overflow-wrap:anywhere]"
+          >
+            {selected.map((option) => option.label).join(" · ")}
+          </Text>
+        )}
+      </span>
+      {selected.length > 0 && (
+        <Badge variant="secondary" className="tabular-nums">
+          {selected.length}
+        </Badge>
+      )}
+      {collapsible && (
+        <ChevronDown
+          aria-hidden
+          className={cn(
+            "size-4 shrink-0 text-muted-foreground transition-transform motion-reduce:transition-none",
+            open && "rotate-180",
+          )}
+        />
+      )}
+    </>
+  );
+  return (
+    <section className={cn("min-w-0", className)}>
+      <div className="py-2">
+        <div className="flex items-center gap-2">
+          {collapsible ? (
+            <button
+              type="button"
+              onClick={() => setOpen((previous) => !previous)}
+              aria-expanded={open}
+              aria-controls={id}
+              className="flex min-h-11 min-w-0 flex-1 items-center gap-3 rounded-lg py-2 text-left focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+            >
+              {heading}
+            </button>
+          ) : (
+            <div className="flex min-h-11 min-w-0 flex-1 items-center gap-3 py-2">
+              {heading}
+            </div>
+          )}
+          {onClear && clearLabel && summaryValues.length > 0 && (
+            <Button
+              type="button"
+              variant="ghost"
+              className="min-h-11 shrink-0 px-2 text-xs"
+              onClick={onClear}
+            >
+              {clearLabel}
+            </Button>
+          )}
+        </div>
+        <div id={id} hidden={!open}>
+          {children}
+          {sections.map((section, index) => {
+            const sectionId = `${id}-section-${index}`;
+            const key = section.label ?? "";
+            const isExpanded = expanded.includes(key);
+            const limit = showAllLabel ? visibleLimit : Infinity;
+            const visible = isExpanded
+              ? section.options
+              : section.options.filter(
+                  (option, i) => i < limit || value.includes(option.value),
+                );
+            return (
+              <div key={key}>
+                {section.label && (
+                  <Text
+                    as="h4"
+                    id={sectionId}
+                    variant="caption"
+                    weight="semibold"
+                    color="muted"
+                    className="mt-3 mb-1"
+                  >
+                    {section.label}
+                  </Text>
+                )}
+                <fieldset
+                  aria-labelledby={`${id}-title${section.label ? ` ${sectionId}` : ""}`}
+                  disabled={disabled}
+                  className="m-0 flex min-w-0 flex-wrap gap-2 border-0 px-0 pt-2 pb-3"
+                >
+                  {visible.map((option) => (
+                    <FilterOptionChip
+                      key={option.value}
+                      label={option.label}
+                      count={option.count}
+                      icon={option.icon}
+                      type={selection === "single" ? "radio" : "checkbox"}
+                      name={selection === "single" ? (name ?? id) : undefined}
+                      value={option.value}
+                      checked={value.includes(option.value)}
+                      onChange={(event) =>
+                        onValueChange(
+                          selection === "single"
+                            ? [option.value]
+                            : event.target.checked
+                              ? [...value, option.value]
+                              : value.filter((item) => item !== option.value),
+                        )
+                      }
+                    />
+                  ))}
+                </fieldset>
+                {section.options.length > limit && (
+                  <Button
+                    type="button"
+                    variant="link"
+                    aria-expanded={isExpanded}
+                    onClick={() =>
+                      setExpanded((previous) =>
+                        isExpanded
+                          ? previous.filter((item) => item !== key)
+                          : [...previous, key],
+                      )
+                    }
+                    className="mb-1 min-h-11 px-0"
+                  >
+                    {isExpanded
+                      ? showLessLabel
+                      : typeof showAllLabel === "function"
+                        ? showAllLabel(section.options.length)
+                        : showAllLabel}
+                  </Button>
+                )}
+              </div>
+            );
+          })}
+          {footer}
+        </div>
+      </div>
+      {divider && <Separator />}
+    </section>
+  );
+}

package/src/components/filter-panel-footer.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { Button } from "./button";
+import { Text } from "./text";
+
+export type FilterPanelFooterProps = {
+  resetLabel: string;
+  resultsLabel: string;
+  onReset: () => void;
+  onResults: () => void;
+  canReset: boolean;
+  pending?: boolean;
+  resetHint?: string;
+};
+
+/** Persistent actions belong outside the panel's scroll container. */
+export function FilterPanelFooter({
+  resetLabel,
+  resultsLabel,
+  onReset,
+  onResults,
+  canReset,
+  pending,
+  resetHint,
+}: FilterPanelFooterProps) {
+  return (
+    <footer
+      className="shrink-0 border-t border-border bg-card px-4 pt-3 pb-[max(1rem,env(safe-area-inset-bottom))]"
+      data-slot="filter-panel-footer"
+    >
+      <div className="flex flex-wrap gap-2">
+        <Button
+          type="button"
+          variant="outline"
+          className="min-h-11 h-auto flex-1 whitespace-normal py-2"
+          disabled={!canReset}
+          onClick={onReset}
+        >
+          {resetLabel}
+        </Button>
+        <Button
+          type="button"
+          className="min-h-11 h-auto flex-[2] whitespace-normal py-2"
+          disabled={pending}
+          aria-busy={pending || undefined}
+          onClick={onResults}
+        >
+          {resultsLabel}
+        </Button>
+      </div>
+      {resetHint && (
+        <Text
+          as="p"
+          variant="caption"
+          color="muted"
+          className="mt-2 leading-relaxed"
+        >
+          {resetHint}
+        </Text>
+      )}
+    </footer>
+  );
+}