@multiplatform.one/frappe-ui 7.34.4 → 7.36.0

package/src/list/ListControlsSheet.spec.tsx

@@ -0,0 +1,42 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, fireEvent, screen, within } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { ListControlsSheet } from "./ListControlsSheet";
+import { fixtureControls, fixtureList } from "./listControls.fixture";
+
+afterEach(cleanup);
+
+function renderBand(update = vi.fn()) {
+  renderWithProviders(
+    <ListControlsSheet
+      controls={{ bands: fixtureControls.bands }}
+      list={fixtureList({ bands: { generation: "1" } }, update)}
+      searchId="roster-search"
+      showSearch={false}
+      showFavorites={false}
+      separator={false}
+      noun="Pokemon"
+      testID="roster"
+    />,
+  );
+  return update;
+}
+
+describe("ListControlsSheet band filters", () => {
+  it("counts an active band and lets its chip clear it", () => {
+    const update = renderBand();
+    const trigger = screen.getByTestId("roster-filters");
+    expect(trigger.querySelector('[data-badge="count"]')?.textContent).toContain("1");
+    fireEvent.click(screen.getByRole("button", { name: "Generation I" }));
+    expect(update).toHaveBeenCalledWith({ bands: { generation: "" } });
+  });
+
+  it("shows the band options and clears bands on Reset", async () => {
+    const update = renderBand();
+    fireEvent.click(screen.getByTestId("roster-filters"));
+    const sheet = await screen.findByTestId("roster-filters-sheet");
+    expect(within(sheet).getByText("Generation II")).toBeTruthy();
+    fireEvent.click(screen.getByTestId("roster-reset"));
+    expect(update).toHaveBeenCalledWith(expect.objectContaining({ bands: { generation: "" } }));
+  });
+});

package/src/list/ListControlsSheet.tsx

@@ -0,0 +1,342 @@
+import {
+  Badge,
+  Chip,
+  SheetModal,
+  Text,
+  ViewSwitcher,
+  XStack,
+  YStack,
+  isWeb,
+} from "@multiplatform.one/components";
+import { Button, SearchInput, Select, Switch } from "@multiplatform.one/forms";
+import {
+  DiceFiveIcon,
+  HeartIcon,
+  ListIcon,
+  SlidersHorizontalIcon,
+  SquaresFourIcon,
+  TableIcon,
+} from "@phosphor-icons/react";
+import type React from "react";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { BandFilter } from "./BandFilters";
+import { activeFilterCount, type FrappeListViewMode } from "./listState";
+import type { ListControlsProps } from "./ListControls";
+import { RangeFilter, rangeCeiling } from "./RangeFilter";
+
+export interface ListControlsSheetProps extends ListControlsProps {
+  /** The view switch, drawn at the end of the active-filter row. */
+  view?: { current: FrappeListViewMode; onChange: (mode: FrappeListViewMode) => void };
+  /** Names the records on the sheet's commit button ("Show 3 Pokemon"). */
+  noun: string;
+}
+
+const viewIcons: Record<FrappeListViewMode, React.ComponentType<{ size?: number }>> = {
+  grid: SquaresFourIcon,
+  list: ListIcon,
+  table: TableIcon,
+};
+
+/**
+ * The phone layout of a list's controls: search beside a counted Filters
+ * button, then the filters in force as chips (a tap drops one) with the
+ * view switch; sort, favorites-only, the facets, the bands and the ranges
+ * live in a bottom sheet whose edits apply as they are made.
+ */
+export function ListControlsSheet({
+  controls,
+  list,
+  searchId,
+  searchPlaceholder,
+  showSearch,
+  showFavorites,
+  shuffle,
+  shufflePanel,
+  view,
+  noun,
+  testID,
+}: ListControlsSheetProps) {
+  const { t } = useTranslation();
+  const { state, update, favorites } = list;
+  const [open, setOpen] = useState(false);
+  const sorts = controls.sorts ?? [];
+  const facets = controls.facets ?? [];
+  const ranges = controls.ranges ?? [];
+  const bands = controls.bands ?? [];
+  const count = activeFilterCount(state);
+  const hasSheet =
+    sorts.length > 0 || facets.length > 0 || ranges.length > 0 || bands.length > 0 || showFavorites;
+
+  useEffect(() => {
+    if (!isWeb || typeof document === "undefined" || !open) return;
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [open]);
+
+  const reset = () =>
+    update({
+      sort: sorts[0]?.value,
+      favoritesOnly: false,
+      facets: Object.fromEntries(facets.map((facet) => [facet.param, ""])),
+      ranges: Object.fromEntries(ranges.map((range) => [range.param, 0])),
+      bands: Object.fromEntries(bands.map((band) => [band.param, ""])),
+    });
+
+  const activeFacets = facets.filter((facet) => state.facets[facet.param]);
+  const activeRanges = ranges.filter((range) => (state.ranges[range.param] ?? 0) > 0);
+  const activeBands = bands.filter((band) => state.bands?.[band.param]);
+  const shown = (() => {
+    if (count === 0) return list.total;
+    if (count !== 1) return undefined;
+    if (state.favoritesOnly) return favorites.count;
+    const facet = activeFacets[0];
+    if (facet) return list.facets[facet.param]?.counts[state.facets[facet.param]];
+    const band = activeBands[0];
+    return band ? list.bandCounts[band.param]?.[state.bands?.[band.param] ?? ""] : undefined;
+  })();
+
+  const chips = (
+    <XStack gap="$2" flexWrap="wrap" flexShrink={1} minWidth={0} alignItems="center">
+      {activeFacets.map((facet) => {
+        const value = state.facets[facet.param];
+        return (
+          <Chip
+            key={facet.param}
+            variant="filled"
+            onPress={() => update({ facets: { [facet.param]: "" } })}
+          >
+            {facet.optionLabel?.(value) ?? value}
+          </Chip>
+        );
+      })}
+      {activeRanges.map((range) => (
+        <Chip
+          key={range.param}
+          variant="filled"
+          onPress={() => update({ ranges: { [range.param]: 0 } })}
+        >
+          {`${range.label} ${state.ranges[range.param]}+`}
+        </Chip>
+      ))}
+      {activeBands.map((band) => {
+        const value = state.bands?.[band.param] ?? "";
+        return (
+          <Chip
+            key={band.param}
+            variant="filled"
+            onPress={() => update({ bands: { [band.param]: "" } })}
+          >
+            {band.options.find((option) => option.value === value)?.label ?? value}
+          </Chip>
+        );
+      })}
+      {state.favoritesOnly ? (
+        <Chip
+          variant="filled"
+          icon={<HeartIcon weight="regular" />}
+          onPress={() => update({ favoritesOnly: false })}
+        >
+          {t("Favorites")}
+        </Chip>
+      ) : null}
+    </XStack>
+  );
+
+  return (
+    <YStack gap="$3" testID={`${testID}-controls`}>
+      <XStack gap="$2" alignItems="center">
+        {showSearch ? (
+          <YStack id={searchId} flex={1} minWidth={0}>
+            <SearchInput
+              value={list.searchText}
+              onChange={list.setSearchText}
+              onSearch={(text) => update({ search: text })}
+              placeholder={searchPlaceholder ?? t("Search...")}
+              aria-label={searchPlaceholder ?? t("Search...")}
+              debounceMs={200}
+              clearable
+            />
+          </YStack>
+        ) : null}
+        {hasSheet ? (
+          <Button
+            onPress={() => setOpen(true)}
+            icon={SlidersHorizontalIcon}
+            iconAfter={count > 0 ? <Badge count={count} color="gray" /> : undefined}
+            aria-label={count > 0 ? t("Filters ({{count}})", { count }) : t("Filters", "Filters")}
+            testID={`${testID}-filters`}
+          >
+            {t("Filters", "Filters")}
+          </Button>
+        ) : null}
+      </XStack>
+      {count > 0 || view || shuffle ? (
+        <XStack gap="$2" alignItems="center">
+          {chips}
+          <XStack gap="$2" alignItems="center" flexShrink={0}>
+            {shuffle ? (
+              <Button
+                circular
+                chromeless
+                onPress={shuffle.toggle}
+                icon={DiceFiveIcon}
+                aria-label={t("Surprise me")}
+                aria-expanded={shuffle.open}
+                aria-controls={shuffle.panelId}
+                testID={`${testID}-shuffle-toggle`}
+              />
+            ) : null}
+            {view && (controls.views?.length ?? 0) > 1 ? (
+              <ViewSwitcher
+                views={(controls.views ?? []).map((mode) => ({
+                  type: mode,
+                  label: mode === "grid" ? t("Cards") : mode === "list" ? t("List") : t("Table"),
+                  icon: viewIcons[mode],
+                  iconOnly: true,
+                }))}
+                currentView={view.current}
+                onViewChange={(mode) => view.onChange(mode as FrappeListViewMode)}
+                testID={`${testID}-views`}
+              />
+            ) : null}
+          </XStack>
+        </XStack>
+      ) : null}
+      {shufflePanel}
+      <SheetModal
+        open={open}
+        onOpenChange={setOpen}
+        scrollable
+        header={
+          <XStack alignItems="center" gap="$2">
+            <Text fontSize="$6" fontWeight="700" color="$color12">
+              {t("Filters", "Filters")}
+            </Text>
+            <Button chromeless onPress={reset} testID={`${testID}-reset`}>
+              {t("Reset")}
+            </Button>
+            <Button chromeless onPress={() => setOpen(false)}>
+              {t("Done")}
+            </Button>
+          </XStack>
+        }
+      >
+        <YStack gap="$5" paddingBottom="$4" testID={`${testID}-filters-sheet`}>
+          {sorts.length > 0 ? (
+            <YStack gap="$2">
+              <Text fontSize="$4" fontWeight="600" color="$color12">
+                {t("Sort by")}
+              </Text>
+              <Select
+                native
+                value={state.sort}
+                onChange={(value) => update({ sort: String(value) })}
+                options={sorts.map((sort) => ({ label: sort.label, value: sort.value }))}
+                aria-label={t("Sort by")}
+              />
+            </YStack>
+          ) : null}
+          {showFavorites ? (
+            <XStack alignItems="center" gap="$3">
+              <Text fontSize="$4" fontWeight="600" color="$color12">
+                {t("Favorites only")}
+              </Text>
+              <Switch
+                checked={state.favoritesOnly}
+                onChange={(checked) => update({ favoritesOnly: checked })}
+                aria-label={t("Favorites only")}
+              />
+            </XStack>
+          ) : null}
+          {facets.map((facet) => {
+            const reading = list.facets[facet.param];
+            const selected = state.facets[facet.param] ?? "";
+            const options = [
+              { value: "", label: facet.allLabel ?? t("All"), count: list.total },
+              ...facet.options.map((value) => ({
+                value,
+                label: facet.optionLabel?.(value) ?? value,
+                count: reading?.counts[value],
+              })),
+            ];
+            return (
+              <YStack key={facet.param} gap="$2">
+                <Text fontSize="$4" fontWeight="600" color="$color12">
+                  {facet.label}
+                </Text>
+                <XStack
+                  gap="$2"
+                  flexWrap="wrap"
+                  role="radiogroup"
+                  aria-label={facet.label}
+                  testID={`${testID}-${facet.param}`}
+                >
+                  {options.map((option) => (
+                    <Chip
+                      key={option.value || "__all"}
+                      variant={option.value === selected ? "filled" : "outlined"}
+                      onPress={() =>
+                        update({
+                          facets: {
+                            [facet.param]:
+                              option.value === selected && option.value !== "" ? "" : option.value,
+                          },
+                        })
+                      }
+                    >
+                      {option.label}
+                      {typeof option.count === "number" ? (
+                        <Text color={option.value === selected ? "$color6" : "$color10"}>
+                          {`  ${option.count}`}
+                        </Text>
+                      ) : null}
+                    </Chip>
+                  ))}
+                </XStack>
+              </YStack>
+            );
+          })}
+          {bands.map((band) => (
+            <YStack key={band.param} gap="$2">
+              <Text fontSize="$4" fontWeight="600" color="$color12">
+                {band.label}
+              </Text>
+              <BandFilter
+                band={band}
+                list={list}
+                layout="list"
+                testID={`${testID}-${band.param}`}
+              />
+            </YStack>
+          ))}
+          {ranges.map((range) => {
+            const max = rangeCeiling(list.highest[range.param] ?? 0);
+            return (
+              <YStack key={range.param} gap="$2">
+                <RangeFilter
+                  label={range.label}
+                  value={state.ranges[range.param] ?? 0}
+                  max={max}
+                  step={range.step}
+                  onChange={(value) => update({ ranges: { [range.param]: value } })}
+                />
+                <Text fontSize="$2" color="$color10">
+                  {`0–${max}`}
+                </Text>
+              </YStack>
+            );
+          })}
+          <Button theme="accent" onPress={() => setOpen(false)} testID={`${testID}-show`}>
+            {typeof shown === "number"
+              ? t("Show {{count}} {{noun}}", { count: shown, noun })
+              : t("Show results")}
+          </Button>
+        </YStack>
+      </SheetModal>
+    </YStack>
+  );
+}

package/src/list/ListFilterPanel.tsx

@@ -0,0 +1,140 @@
+import { Text, XStack, YStack } from "@multiplatform.one/components";
+import { Button, Select } from "@multiplatform.one/forms";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { HeartIcon } from "@phosphor-icons/react";
+import type { ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import { BandFilter } from "./BandFilters";
+import { FacetList } from "./FacetList";
+import { activeFilterCount, type FrappeListControls } from "./listState";
+import { RangeFilter, rangeCeiling } from "./RangeFilter";
+import type { ListControlsResult } from "./useListControls";
+
+export interface ListFilterPanelProps {
+  controls: FrappeListControls;
+  list: ListControlsResult;
+  showFavorites: boolean;
+  /** The sort select joins the panel (the phone sheet, where no toolbar holds it). */
+  showSort?: boolean;
+  testID: string;
+}
+
+/** One group of the panel under its caps label. */
+function PanelGroup({ label, children }: { label: string; children: ReactNode }) {
+  const { knobProps } = useResolvedKnobs();
+  return (
+    <YStack {...knobProps.gapSm} role="group" aria-label={label}>
+      <Text
+        {...knobProps.label}
+        fontWeight="700"
+        color="$color10"
+        textTransform="uppercase"
+        letterSpacing={1}
+        userSelect="none"
+        aria-hidden
+      >
+        {label}
+      </Text>
+      {children}
+    </YStack>
+  );
+}
+
+/**
+ * A list's filters as one vertical panel: each facet and band as a list of
+ * values with counts, each range as a stock slider, favorites as a toggle,
+ * and Clear filters once any is set. The desktop sidebar and the phone
+ * sheet draw the same panel, so both offer the same filters.
+ */
+export function ListFilterPanel({
+  controls,
+  list,
+  showFavorites,
+  showSort = false,
+  testID,
+}: ListFilterPanelProps) {
+  const { t } = useTranslation();
+  const { knobProps } = useResolvedKnobs();
+  const { state, update, favorites } = list;
+  const sorts = controls.sorts ?? [];
+  const active = activeFilterCount(state);
+
+  return (
+    <YStack {...knobProps.gapLg} testID={`${testID}-filters`}>
+      {showSort && sorts.length > 0 ? (
+        <PanelGroup label={t("Sort by")}>
+          <Select
+            value={state.sort}
+            onChange={(value) => update({ sort: String(value) })}
+            options={sorts.map((sort) => ({ label: sort.label, value: sort.value }))}
+            aria-label={t("Sort by")}
+          />
+        </PanelGroup>
+      ) : null}
+      {(controls.facets ?? []).map((facet) => {
+        const reading = list.facets[facet.param];
+        return (
+          <PanelGroup key={facet.param} label={facet.label}>
+            <FacetList
+              label={facet.label}
+              value={state.facets[facet.param] ?? ""}
+              onChange={(value) => update({ facets: { [facet.param]: value } })}
+              columns={2}
+              testID={`${testID}-${facet.param}`}
+              options={[
+                { value: "", label: facet.allLabel ?? t("All"), count: list.total },
+                ...facet.options.map((value) => ({
+                  value,
+                  label: facet.optionLabel?.(value) ?? value,
+                  tint: facet.tint?.(value),
+                  count:
+                    reading && list.total !== undefined ? (reading.counts[value] ?? 0) : undefined,
+                })),
+              ]}
+            />
+          </PanelGroup>
+        );
+      })}
+      {(controls.bands ?? []).map((band) => (
+        <PanelGroup key={band.param} label={band.label}>
+          <BandFilter band={band} list={list} layout="list" testID={`${testID}-${band.param}`} />
+        </PanelGroup>
+      ))}
+      {(controls.ranges ?? []).map((range) => (
+        <RangeFilter
+          key={range.param}
+          layout="stack"
+          label={range.label}
+          value={state.ranges[range.param] ?? 0}
+          max={rangeCeiling(list.highest[range.param] ?? 0)}
+          step={range.step}
+          onChange={(value) => update({ ranges: { [range.param]: value } })}
+          testID={`${testID}-${range.param}-slider`}
+        />
+      ))}
+      {showFavorites ? (
+        <XStack>
+          <Button
+            outlined={!state.favoritesOnly}
+            theme={state.favoritesOnly ? "accent" : undefined}
+            onPress={() => update({ favoritesOnly: !state.favoritesOnly })}
+            aria-pressed={state.favoritesOnly}
+            icon={<HeartIcon size={16} weight={state.favoritesOnly ? "fill" : "regular"} />}
+            testID={`${testID}-favorites-filter`}
+          >
+            {favorites.count > 0
+              ? t("Favorites ({{count}})", { count: favorites.count })
+              : t("Favorites")}
+          </Button>
+        </XStack>
+      ) : null}
+      {active > 0 ? (
+        <XStack>
+          <Button chromeless onPress={list.clear} testID={`${testID}-clear`}>
+            {t("Clear filters")}
+          </Button>
+        </XStack>
+      ) : null}
+    </YStack>
+  );
+}