@12-apps/ui 4.0.1 → 4.1.0

package/src/components/form/CategorySelect/CategoryPanel.tsx

@@ -0,0 +1,155 @@
+'use client';
+
+import { Box } from '@mui/material';
+
+import { removeChip } from './category-tree';
+import { CategoryMultiFoot, CategorySingleFoot } from './CategoryPanelFoot';
+import { CategoryPanelHead, CategoryPinnedTray } from './CategoryPanelHead';
+import { CategoryPanelList } from './CategoryPanelList';
+import { CategoryQuickActions } from './CategoryQuickActions';
+import { panelSx, sheetSx } from './CategorySelect.styles';
+import type { CategoryGroup, CategorySelectionChip } from './CategorySelect.types';
+import type { CategorySelectState } from './useCategorySelect';
+
+export interface CategoryPanelProps {
+  state: CategorySelectState;
+  chips: CategorySelectionChip[];
+  rowIds: string[];
+  /** True when the applied selection differs from the draft. */
+  changed: boolean;
+  single: boolean;
+  sheet: boolean;
+  loading: boolean;
+  showCounts: boolean;
+  allowParentSelection: boolean;
+  ariaLabel: string;
+  onKeyDown: (event: React.KeyboardEvent) => void;
+  onActivateCategory: (group: CategoryGroup) => void;
+  onActivateSubcategory: (id: string) => void;
+  onApply: () => void;
+  onCancel: () => void;
+  onCreateCategory?: () => void;
+  searchInputRef: React.RefObject<HTMLInputElement | null>;
+  listRef: React.RefObject<HTMLDivElement | null>;
+  dataTestId: string;
+}
+
+/** Search + pinned selection + tree + footer, in the panel's own chrome. */
+export function CategoryPanel({
+  state,
+  chips,
+  rowIds,
+  changed,
+  single,
+  sheet,
+  loading,
+  showCounts,
+  allowParentSelection,
+  ariaLabel,
+  onKeyDown,
+  onActivateCategory,
+  onActivateSubcategory,
+  onApply,
+  onCancel,
+  onCreateCategory,
+  searchInputRef,
+  listRef,
+  dataTestId,
+}: CategoryPanelProps): React.JSX.Element {
+  return (
+    <Box
+      onKeyDown={onKeyDown}
+      role="dialog"
+      aria-label={ariaLabel}
+      data-testid={`${dataTestId}-panel`}
+      sx={(theme) => ({ ...panelSx(theme), ...(sheet ? sheetSx(theme) : {}) })}
+    >
+      <CategoryPanelHead
+        query={state.query}
+        placeholder={single ? 'Buscar categoria…' : 'Buscar categoria ou subcategoria'}
+        sheet={sheet}
+        quickActions={
+          single ? undefined : <CategoryQuickActions state={state} dataTestId={dataTestId} />
+        }
+        onQueryChange={state.setQuery}
+        searchInputRef={searchInputRef}
+        dataTestId={dataTestId}
+      />
+      {!single && !loading && (
+        <PinnedTray state={state} chips={chips} dataTestId={dataTestId} />
+      )}
+      <CategoryPanelList
+        groups={state.visibleGroups}
+        query={state.query}
+        draft={state.draft}
+        rowIds={rowIds}
+        activeIndex={state.activeIndex}
+        sheet={sheet}
+        single={single}
+        loading={loading}
+        showCounts={showCounts}
+        allowParentSelection={allowParentSelection}
+        isExpanded={state.isExpanded}
+        onToggleExpanded={state.toggleExpanded}
+        onActivateCategory={onActivateCategory}
+        onActivateSubcategory={onActivateSubcategory}
+        onClearQuery={() => state.setQuery('')}
+        onCreateCategory={onCreateCategory}
+        listRef={listRef}
+        dataTestId={dataTestId}
+      />
+      <PanelFooter
+        state={state}
+        changed={changed}
+        single={single}
+        sheet={sheet}
+        onApply={onApply}
+        onCancel={onCancel}
+        dataTestId={dataTestId}
+      />
+    </Box>
+  );
+}
+
+/** The selected-category chips, wired to remove from the draft. */
+function PinnedTray({
+  state,
+  chips,
+  dataTestId,
+}: Pick<CategoryPanelProps, 'state' | 'chips' | 'dataTestId'>): React.JSX.Element {
+  return (
+    <CategoryPinnedTray
+      chips={chips}
+      onRemove={(chipId) => state.setDraft(removeChip(state.allGroups, chipId, state.draft))}
+      dataTestId={dataTestId}
+    />
+  );
+}
+
+/** Whichever footer the mode calls for. */
+function PanelFooter({
+  state,
+  changed,
+  single,
+  sheet,
+  onApply,
+  onCancel,
+  dataTestId,
+}: Pick<
+  CategoryPanelProps,
+  'state' | 'changed' | 'single' | 'sheet' | 'onApply' | 'onCancel' | 'dataTestId'
+>): React.JSX.Element {
+  if (single) {
+    return <CategorySingleFoot sheet={sheet} onCancel={onCancel} dataTestId={dataTestId} />;
+  }
+  return (
+    <CategoryMultiFoot
+      count={state.draft.size}
+      changed={changed}
+      sheet={sheet}
+      onClear={() => state.setDraft(new Set())}
+      onApply={onApply}
+      dataTestId={dataTestId}
+    />
+  );
+}

package/src/components/form/CategorySelect/CategoryPanelFoot.tsx

@@ -0,0 +1,94 @@
+'use client';
+
+import { Box, Button } from '@mui/material';
+
+import { footerSx, METRICS } from './CategorySelect.styles';
+
+const buttonSx = (sheet: boolean) =>
+  ({
+    height: sheet ? METRICS.sheetFooterButton : METRICS.footerButton,
+    padding: '0 13px',
+    borderRadius: '8px',
+    fontSize: 12.5,
+    fontWeight: 600,
+    textTransform: 'none',
+    minWidth: 0,
+  }) as const;
+
+interface MultiFootProps {
+  count: number;
+  /** False once the draft matches what is already applied — Apply becomes Close. */
+  changed: boolean;
+  sheet: boolean;
+  onClear: () => void;
+  onApply: () => void;
+  dataTestId: string;
+}
+
+/**
+ * Multi-select footer: the running count, Clear, and the Apply that publishes
+ * the draft. The primary button reads "Fechar" when nothing changed, so it never
+ * promises an update it would not make.
+ */
+export function CategoryMultiFoot({
+  count,
+  changed,
+  sheet,
+  onClear,
+  onApply,
+  dataTestId,
+}: MultiFootProps): React.JSX.Element {
+  return (
+    <Box sx={footerSx} data-testid={`${dataTestId}-footer`}>
+      <Box component="span" sx={{ fontSize: 12, color: 'text.secondary' }}>
+        <strong>{count}</strong> selecionada{count === 1 ? '' : 's'}
+      </Box>
+      <Box sx={{ display: 'flex', gap: '6px' }}>
+        <Button
+          variant="outlined"
+          disabled={count === 0}
+          sx={buttonSx(sheet)}
+          onClick={onClear}
+          data-testid={`${dataTestId}-clear`}
+        >
+          Limpar
+        </Button>
+        <Button
+          variant="contained"
+          sx={buttonSx(sheet)}
+          onClick={onApply}
+          data-testid={`${dataTestId}-apply`}
+        >
+          {changed ? 'Aplicar' : 'Fechar'}
+        </Button>
+      </Box>
+    </Box>
+  );
+}
+
+/** Single-select footer: a hint and a way out. Picking a row commits directly. */
+export function CategorySingleFoot({
+  sheet,
+  onCancel,
+  dataTestId,
+}: {
+  sheet: boolean;
+  onCancel: () => void;
+  dataTestId: string;
+}): React.JSX.Element {
+  return (
+    <Box sx={footerSx} data-testid={`${dataTestId}-footer`}>
+      <Box component="span" sx={{ fontSize: 12, color: 'text.secondary' }}>
+        Escolha uma categoria
+      </Box>
+      <Button
+        variant="outlined"
+        sx={buttonSx(sheet)}
+        onClick={onCancel}
+        data-testid={`${dataTestId}-cancel`}
+      >
+        Cancelar
+      </Button>
+    </Box>
+  );
+}

package/src/components/form/CategorySelect/CategoryPanelHead.tsx

@@ -0,0 +1,167 @@
+'use client';
+
+import { Box, InputBase } from '@mui/material';
+
+import { SearchGlyph } from './CategoryIcons';
+import {
+  chipSx,
+  chipWrapSx,
+  panelHeadSx,
+  pinnedLabelSx,
+  pinnedSx,
+} from './CategorySelect.styles';
+import type { CategorySelectionChip } from './CategorySelect.types';
+
+interface PanelHeadProps {
+  query: string;
+  placeholder: string;
+  sheet: boolean;
+  /** Quick actions belong to multi-select only; single-select has nothing to bulk-do. */
+  quickActions?: React.ReactNode;
+  onQueryChange: (next: string) => void;
+  searchInputRef: React.RefObject<HTMLInputElement | null>;
+  dataTestId: string;
+}
+
+const searchFieldSx = {
+  position: 'relative',
+  display: 'flex',
+  alignItems: 'center',
+  '& input': {
+    width: '100%',
+    height: 36,
+    padding: '0 30px 0 32px',
+    fontSize: 13,
+    border: '1px solid',
+    borderColor: 'divider',
+    borderRadius: '9px',
+    background: 'background.paper',
+    color: 'text.primary',
+    '&:focus': {
+      outline: 'none',
+      borderColor: 'primary.main',
+      boxShadow: (theme: { palette: { primary: { main: string } } }) =>
+        `0 0 0 3px ${theme.palette.primary.main}26`,
+    },
+  },
+} as const;
+
+const clearButtonSx = {
+  position: 'absolute',
+  right: 7,
+  width: 20,
+  height: 20,
+  border: 0,
+  background: 'action.selected',
+  color: 'text.secondary',
+  borderRadius: '50%',
+  display: 'grid',
+  placeItems: 'center',
+  cursor: 'pointer',
+  fontSize: 12,
+  padding: 0,
+  lineHeight: 1,
+} as const;
+
+/** Search field, its clear affordance, and the optional quick-action row. */
+export function CategoryPanelHead({
+  query,
+  placeholder,
+  sheet,
+  quickActions,
+  onQueryChange,
+  searchInputRef,
+  dataTestId,
+}: PanelHeadProps): React.JSX.Element {
+  return (
+    <Box sx={(theme) => panelHeadSx(theme, sheet)}>
+      <Box sx={searchFieldSx}>
+        <SearchGlyph
+          style={{
+            position: 'absolute',
+            left: 10,
+            width: 15,
+            height: 15,
+            opacity: 0.55,
+            pointerEvents: 'none',
+          }}
+        />
+        <InputBase
+          inputRef={searchInputRef}
+          value={query}
+          placeholder={placeholder}
+          autoComplete="off"
+          inputProps={{ 'aria-label': placeholder, 'data-testid': `${dataTestId}-search` }}
+          onChange={(event) => onQueryChange(event.target.value)}
+          sx={{ width: '100%' }}
+        />
+        {query.length > 0 && (
+          <Box
+            component="button"
+            type="button"
+            aria-label="Limpar busca"
+            data-testid={`${dataTestId}-search-clear`}
+            sx={clearButtonSx}
+            onClick={() => onQueryChange('')}
+          >
+            ×
+          </Box>
+        )}
+      </Box>
+      {quickActions && (
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '10px',
+            marginTop: '8px',
+            fontSize: 12,
+          }}
+        >
+          {quickActions}
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+interface PinnedTrayProps {
+  chips: CategorySelectionChip[];
+  onRemove: (chipId: string) => void;
+  dataTestId: string;
+}
+
+/**
+ * The selected categories, pinned above the list.
+ *
+ * Pinned rather than left in place because a selection made at the bottom of a
+ * ten-category tree scrolls out of sight the moment you look for the next one —
+ * and a search hides it entirely. Here it survives both.
+ */
+export function CategoryPinnedTray({
+  chips,
+  onRemove,
+  dataTestId,
+}: PinnedTrayProps): React.JSX.Element | null {
+  if (chips.length === 0) return null;
+  return (
+    <Box sx={pinnedSx} data-testid={`${dataTestId}-pinned`}>
+      <Box sx={pinnedLabelSx}>Selecionadas · {chips.length}</Box>
+      <Box sx={chipWrapSx}>
+        {chips.map((chip) => (
+          <Box component="span" key={chip.id} sx={chipSx}>
+            {chip.label}
+            <button
+              type="button"
+              aria-label={`Remover ${chip.label}`}
+              data-testid={`${dataTestId}-unpin-${chip.id}`}
+              onClick={() => onRemove(chip.id)}
+            >
+              ×
+            </button>
+          </Box>
+        ))}
+      </Box>
+    </Box>
+  );
+}

package/src/components/form/CategorySelect/CategoryPanelList.tsx

@@ -0,0 +1,207 @@
+'use client';
+
+import { Box, Button, Skeleton } from '@mui/material';
+
+import { categoryCheckState } from './category-tree';
+import {
+  CategoryHeadRow,
+  CategorySectionHeading,
+  SubcategoryRow,
+} from './CategoryRows';
+import { emptySx, listSx, skeletonSx } from './CategorySelect.styles';
+import type { CategoryGroup } from './CategorySelect.types';
+
+/** The design sets these labels in sentence case, not MUI's default caps. */
+const SENTENCE_CASE = { textTransform: 'none' } as const;
+
+/** How many skeleton rows stand in for the catalogue while it loads. */
+const SKELETON_ROWS = 6;
+
+interface PanelListProps {
+  groups: CategoryGroup[];
+  query: string;
+  draft: ReadonlySet<string>;
+  rowIds: string[];
+  activeIndex: number;
+  sheet: boolean;
+  single: boolean;
+  loading: boolean;
+  showCounts: boolean;
+  allowParentSelection: boolean;
+  isExpanded: (categoryId: string) => boolean;
+  onToggleExpanded: (categoryId: string) => void;
+  onActivateCategory: (group: CategoryGroup) => void;
+  onActivateSubcategory: (id: string) => void;
+  onClearQuery: () => void;
+  onCreateCategory?: (name?: string) => void;
+  listRef: React.RefObject<HTMLDivElement | null>;
+  dataTestId: string;
+}
+
+function LoadingRows(): React.JSX.Element {
+  return (
+    <>
+      {Array.from({ length: SKELETON_ROWS }, (_unused, index) => (
+        <Skeleton key={index} variant="rounded" sx={skeletonSx} />
+      ))}
+    </>
+  );
+}
+
+/** No categories exist at all — an onboarding moment, not an error. */
+function EmptyCatalogue({
+  onCreateCategory,
+  dataTestId,
+}: {
+  onCreateCategory?: (name?: string) => void;
+  dataTestId: string;
+}): React.JSX.Element {
+  return (
+    <Box sx={emptySx} data-testid={`${dataTestId}-empty-catalogue`}>
+      <strong>Nenhuma categoria ainda</strong>
+      <p>Categorias organizam o cardápio e os filtros da loja.</p>
+      {onCreateCategory && (
+        <Button variant="contained" size="small" sx={SENTENCE_CASE} onClick={() => onCreateCategory()}>
+          Criar categoria
+        </Button>
+      )}
+    </Box>
+  );
+}
+
+/** The search found nothing — offer creation, or the way back. */
+function NoResults({
+  query,
+  onClearQuery,
+  onCreateCategory,
+  dataTestId,
+}: {
+  query: string;
+  onClearQuery: () => void;
+  onCreateCategory?: (name?: string) => void;
+  dataTestId: string;
+}): React.JSX.Element {
+  return (
+    <Box sx={emptySx} data-testid={`${dataTestId}-no-results`}>
+      <strong>Nada encontrado para “{query}”</strong>
+      <p>Tente outro termo ou verifique a grafia.</p>
+      <Box sx={{ display: 'flex', gap: '6px', justifyContent: 'center' }}>
+        <Button variant="outlined" size="small" sx={SENTENCE_CASE} onClick={onClearQuery}>
+          Limpar busca
+        </Button>
+        {onCreateCategory && (
+          <Button
+            variant="contained"
+            size="small"
+            sx={SENTENCE_CASE}
+            data-testid={`${dataTestId}-create`}
+            onClick={() => onCreateCategory(query.trim())}
+          >
+            Criar “{query.trim()}”
+          </Button>
+        )}
+      </Box>
+    </Box>
+  );
+}
+
+/** One group: its heading or head row, then whichever children are visible. */
+function CategoryGroupRows({
+  group,
+  props,
+}: {
+  group: CategoryGroup;
+  props: PanelListProps;
+}): React.JSX.Element {
+  const { draft, query, single, allowParentSelection, rowIds, activeIndex, sheet } = props;
+  const categoryId = group.category.id;
+  const expanded = props.isExpanded(categoryId);
+  const asHeading = single && !allowParentSelection;
+  const selectedCount = group.subcategories.filter((sub) => draft.has(sub.id)).length;
+
+  return (
+    <>
+      {asHeading ? (
+        <CategorySectionHeading option={group.category} query={query} />
+      ) : (
+        <CategoryHeadRow
+          option={group.category}
+          query={query}
+          expanded={expanded}
+          active={rowIds[activeIndex] === categoryId}
+          sheet={sheet}
+          checkState={
+            allowParentSelection ? categoryCheckState(group, draft) : undefined
+          }
+          selectedCount={selectedCount}
+          showCounts={props.showCounts}
+          onToggleExpanded={() => props.onToggleExpanded(categoryId)}
+          onActivate={() => props.onActivateCategory(group)}
+          dataTestId={props.dataTestId}
+        />
+      )}
+      {(expanded || asHeading) &&
+        group.subcategories.map((sub) => (
+          <SubcategoryRow
+            key={sub.id}
+            option={sub}
+            query={query}
+            selected={draft.has(sub.id)}
+            active={rowIds[activeIndex] === sub.id}
+            sheet={sheet}
+            single={single}
+            showCounts={props.showCounts}
+            onActivate={() => props.onActivateSubcategory(sub.id)}
+            dataTestId={props.dataTestId}
+          />
+        ))}
+    </>
+  );
+}
+
+/** The scrolling body of the panel, including its three non-list states. */
+export function CategoryPanelList(props: PanelListProps): React.JSX.Element {
+  const { groups, loading, query, listRef, sheet, dataTestId } = props;
+
+  const body = (): React.JSX.Element => {
+    if (loading) return <LoadingRows />;
+    if (groups.length === 0 && query.trim().length > 0) {
+      return (
+        <NoResults
+          query={query}
+          onClearQuery={props.onClearQuery}
+          onCreateCategory={props.onCreateCategory}
+          dataTestId={dataTestId}
+        />
+      );
+    }
+    if (groups.length === 0) {
+      return (
+        <EmptyCatalogue
+          onCreateCategory={props.onCreateCategory}
+          dataTestId={dataTestId}
+        />
+      );
+    }
+    return (
+      <>
+        {groups.map((group) => (
+          <CategoryGroupRows key={group.category.id} group={group} props={props} />
+        ))}
+      </>
+    );
+  };
+
+  return (
+    <Box
+      ref={listRef}
+      role="listbox"
+      aria-multiselectable={props.single ? undefined : true}
+      tabIndex={-1}
+      data-testid={`${dataTestId}-list`}
+      sx={listSx(sheet)}
+    >
+      {body()}
+    </Box>
+  );
+}

package/src/components/form/CategorySelect/CategoryPanelSurface.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { Drawer, Popover } from '@mui/material';
+
+/** Chrome-free surface props: the panel draws its own border and shadow. */
+const BARE_PAPER = { background: 'transparent', boxShadow: 'none' } as const;
+
+interface SurfaceProps {
+  open: boolean;
+  /** True below the sheet breakpoint — anchor to the bottom edge instead. */
+  sheet: boolean;
+  anchorEl: HTMLElement | null;
+  onClose: () => void;
+  children: React.ReactNode;
+}
+
+/**
+ * Where the panel lives: anchored under the trigger on a pointer, or a bottom
+ * sheet on a phone.
+ *
+ * Both surfaces are modal, which is what gives the panel its dismiss-on-outside,
+ * Esc handling and focus containment for free rather than hand-rolled.
+ */
+export function CategoryPanelSurface({
+  open,
+  sheet,
+  anchorEl,
+  onClose,
+  children,
+}: SurfaceProps): React.JSX.Element {
+  if (sheet) {
+    return (
+      <Drawer
+        anchor="bottom"
+        open={open}
+        onClose={onClose}
+        slotProps={{ paper: { sx: BARE_PAPER } }}
+      >
+        {children}
+      </Drawer>
+    );
+  }
+  return (
+    <Popover
+      open={open}
+      anchorEl={anchorEl}
+      onClose={onClose}
+      anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+      transformOrigin={{ vertical: 'top', horizontal: 'left' }}
+      marginThreshold={8}
+      slotProps={{ paper: { sx: { ...BARE_PAPER, marginTop: '6px', overflow: 'visible' } } }}
+    >
+      {children}
+    </Popover>
+  );
+}