@12-apps/ui 1.0.0 → 1.3.0

package/src/components/form/Command/Command.tsx

@@ -4,7 +4,6 @@ import {
   alpha,
   Box,
   Chip,
-  CircularProgress,
   Dialog,
   DialogContent,
   Divider,
@@ -20,209 +19,33 @@ import {
   Typography,
   useTheme,
 } from '@mui/material';
-import React, { useCallback, useEffect, useMemo,useRef, useState } from 'react';
+import React, { useMemo } from 'react';
 
+import { resolveCommandProps, useCommandPalette } from './Command.hooks';
+import { CommandEmpty, CommandLoading } from './Command.parts';
+import { commandPaperStyles, commandSizeStyles } from './Command.styles';
 import type {
-  CommandEmptyProps,
   CommandGroupProps,
   CommandInputProps,
   CommandItem,
   CommandItemProps,
   CommandListProps,
-  CommandLoadingProps,
   CommandProps,
-  CommandSeparatorProps,
 } from './Command.types';
 
-export const Command: React.FC<CommandProps> = ({
-  open = false,
-  onOpenChange,
-  items = [],
-  placeholder = 'Type a command or search...',
-  value = '',
-  onValueChange,
-  onSelect,
-  variant = 'default',
-  size = 'md',
-  color = 'primary',
-  glow = false,
-  pulse = false,
-  loading = false,
-  disabled = false,
-  className,
-  style,
-  maxHeight = 400,
-  emptyMessage = 'No results found',
-  showCategories = true,
-  showShortcuts = true,
-  showDescriptions = true,
-  autoFocus = true,
-  closeOnSelect = true,
-  customFilter,
-  onFocus,
-  onBlur,
-  onClick,
-  children,
-  dataTestId,
-}) => {
-  const theme = useTheme();
-  const [internalValue, setInternalValue] = useState(value);
-  const [selectedIndex, setSelectedIndex] = useState(0);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    setInternalValue(value);
-  }, [value]);
-
-  useEffect(() => {
-    if (open && autoFocus) {
-      window.setTimeout(() => inputRef.current?.focus(), 100);
-    }
-  }, [open, autoFocus]);
-
-  const handleValueChange = useCallback((newValue: string) => {
-    setInternalValue(newValue);
-    onValueChange?.(newValue);
-    setSelectedIndex(0);
-  }, [onValueChange]);
-
-  const filteredItems = useMemo(() => {
-    if (!internalValue) return items;
-    
-    if (customFilter) {
-      return items.filter(item => customFilter(item, internalValue));
-    }
-
-    const searchLower = internalValue.toLowerCase();
-    return items.filter(item => {
-      const searchTargets = [
-        item.label.toLowerCase(),
-        item.description?.toLowerCase(),
-        ...(item.keywords || []).map(k => k.toLowerCase()),
-      ];
-      return searchTargets.some(target => target?.includes(searchLower));
-    });
-  }, [items, internalValue, customFilter]);
+export { CommandEmpty, CommandLoading, CommandSeparator } from './Command.parts';
 
-  const highlightedId = useMemo(() => {
-    const flatItems = filteredItems.filter(item => !item.disabled);
-    return flatItems[selectedIndex]?.id;
-  }, [filteredItems, selectedIndex]);
+const makeTestId = (dataTestId?: string) => (suffix: string) =>
+  dataTestId ? `${dataTestId}-${suffix}` : undefined;
 
+export const Command: React.FC<CommandProps> = (rawProps) => {
+  const props = resolveCommandProps(rawProps);
+  const { open, onOpenChange, variant, dataTestId } = props;
+  const theme = useTheme();
+  const testId = makeTestId(dataTestId);
 
-  const handleSelect = useCallback((item: CommandItem) => {
-    if (item.disabled) return;
-    
-    item.action?.();
-    onSelect?.(item);
-    
-    if (closeOnSelect) {
-      onOpenChange?.(false);
-      setInternalValue('');
-    }
-  }, [onSelect, onOpenChange, closeOnSelect]);
-
-  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
-    const flatItems = filteredItems.filter(item => !item.disabled);
-    
-    switch (e.key) {
-      case 'ArrowDown':
-        e.preventDefault();
-        setSelectedIndex(prev => (prev + 1) % flatItems.length);
-        break;
-      case 'ArrowUp':
-        e.preventDefault();
-        setSelectedIndex(prev => (prev - 1 + flatItems.length) % flatItems.length);
-        break;
-      case 'Enter':
-        e.preventDefault();
-        if (flatItems[selectedIndex]) {
-          handleSelect(flatItems[selectedIndex]);
-        }
-        break;
-      case 'Escape':
-        e.preventDefault();
-        onOpenChange?.(false);
-        break;
-    }
-  }, [filteredItems, selectedIndex, handleSelect, onOpenChange]);
-
-  const getVariantStyles = () => {
-    const baseStyles = {
-      transition: theme.transitions.create(['all'], {
-        duration: theme.transitions.duration.standard,
-      }),
-    };
-
-    const glowStyles = glow ? {
-      boxShadow: `0 0 20px ${alpha(theme.palette[color].main, 0.4)}`,
-    } : {};
-
-    const pulseStyles = pulse ? {
-      animation: 'pulse 2s infinite',
-      '@keyframes pulse': {
-        '0%': { boxShadow: `0 0 0 0 ${alpha(theme.palette[color].main, 0.4)}` },
-        '70%': { boxShadow: `0 0 0 10px ${alpha(theme.palette[color].main, 0)}` },
-        '100%': { boxShadow: `0 0 0 0 ${alpha(theme.palette[color].main, 0)}` },
-      },
-    } : {};
-
-    switch (variant) {
-      case 'glass':
-        return {
-          ...baseStyles,
-          ...glowStyles,
-          ...pulseStyles,
-          backgroundColor: alpha(theme.palette.background.paper, 0.1),
-          backdropFilter: 'blur(20px)',
-          border: `1px solid ${alpha(theme.palette[color].main, 0.2)}`,
-        };
-      
-      case 'gradient':
-        return {
-          ...baseStyles,
-          ...glowStyles,
-          ...pulseStyles,
-          background: `linear-gradient(135deg, ${theme.palette[color].main}, ${theme.palette[color].dark})`,
-          color: theme.palette[color].contrastText,
-        };
-      
-      case 'elevated':
-        return {
-          ...baseStyles,
-          ...glowStyles,
-          ...pulseStyles,
-          boxShadow: theme.shadows[8],
-        };
-      
-      case 'minimal':
-        return {
-          ...baseStyles,
-          ...glowStyles,
-          ...pulseStyles,
-          border: 'none',
-          boxShadow: 'none',
-        };
-      
-      default:
-        return {
-          ...baseStyles,
-          ...glowStyles,
-          ...pulseStyles,
-        };
-    }
-  };
-
-  const getSizeStyles = () => {
-    switch (size) {
-      case 'xs': return { width: 400, fontSize: '0.75rem' };
-      case 'sm': return { width: 450, fontSize: '0.875rem' };
-      case 'md': return { width: 500, fontSize: '1rem' };
-      case 'lg': return { width: 550, fontSize: '1.125rem' };
-      case 'xl': return { width: 600, fontSize: '1.25rem' };
-      default: return { width: 500, fontSize: '1rem' };
-    }
-  };
+  const { internalValue, filteredItems, highlightedId, handleValueChange, handleSelect, handleKeyDown } =
+    useCommandPalette(props);
 
   return (
     <Dialog
@@ -231,56 +54,74 @@ export const Command: React.FC<CommandProps> = ({
       maxWidth={false}
       PaperProps={{
         sx: {
-          ...getVariantStyles(),
-          ...getSizeStyles(),
+          ...commandPaperStyles(theme, props),
+          ...commandSizeStyles(props.size),
           overflow: 'hidden',
-          ...style,
+          ...props.style,
         },
-        className,
+        className: props.className,
         'data-testid': dataTestId,
       }}
       TransitionComponent={variant === 'glass' ? Fade : Grow}
-      onClick={onClick}
+      onClick={props.onClick}
     >
       <Box sx={{ p: 0 }}>
         <CommandInput
-          placeholder={placeholder}
+          placeholder={props.placeholder}
           value={internalValue}
           onChange={handleValueChange}
-          onFocus={onFocus}
-          onBlur={onBlur}
-          disabled={disabled}
-          autoFocus={autoFocus}
+          onFocus={props.onFocus}
+          onBlur={props.onBlur}
+          disabled={props.disabled}
+          autoFocus={props.autoFocus}
           onKeyDown={handleKeyDown}
-          dataTestId={dataTestId ? `${dataTestId}-input` : undefined}
+          dataTestId={testId('input')}
         />
 
         <Divider />
 
-        <DialogContent sx={{ p: 0, maxHeight, overflow: 'auto' }}>
-          {loading ? (
-            <CommandLoading dataTestId={dataTestId ? `${dataTestId}-loading` : undefined} />
-          ) : filteredItems.length === 0 ? (
-            <CommandEmpty message={emptyMessage} dataTestId={dataTestId ? `${dataTestId}-empty` : undefined} />
-          ) : (
-            <CommandList
-              items={filteredItems}
-              value={internalValue}
-              onSelect={handleSelect}
-              selectedId={highlightedId}
-              showCategories={showCategories}
-              showShortcuts={showShortcuts}
-              showDescriptions={showDescriptions}
-              dataTestId={dataTestId ? `${dataTestId}-list` : undefined}
-            />
-          )}
-          {children}
+        <DialogContent sx={{ p: 0, maxHeight: props.maxHeight, overflow: 'auto' }}>
+          <CommandBody
+            loading={props.loading}
+            items={filteredItems}
+            value={internalValue}
+            emptyMessage={props.emptyMessage}
+            onSelect={handleSelect}
+            selectedId={highlightedId}
+            showCategories={props.showCategories}
+            showShortcuts={props.showShortcuts}
+            showDescriptions={props.showDescriptions}
+            testId={testId}
+          />
+          {props.children}
         </DialogContent>
       </Box>
     </Dialog>
   );
 };
 
+type CommandBodyProps = Pick<
+  CommandListProps,
+  'items' | 'value' | 'onSelect' | 'selectedId' | 'showCategories' | 'showShortcuts' | 'showDescriptions'
+> & {
+  loading: boolean;
+  emptyMessage: string;
+  testId: (suffix: string) => string | undefined;
+};
+
+/** Three mutually exclusive states share the scrolling area: busy, empty, or a list. */
+const CommandBody: React.FC<CommandBodyProps> = ({ loading, emptyMessage, testId, ...list }) => {
+  if (loading) {
+    return <CommandLoading dataTestId={testId('loading')} />;
+  }
+
+  if (!list.items?.length) {
+    return <CommandEmpty message={emptyMessage} dataTestId={testId('empty')} />;
+  }
+
+  return <CommandList {...list} dataTestId={testId('list')} />;
+};
+
 export const CommandInput: React.FC<CommandInputProps> = ({
   placeholder,
   value,
@@ -493,53 +334,3 @@ const CommandItemComponent: React.FC<CommandItemProps> = ({
     </ListItemButton>
   );
 };
-
-export const CommandEmpty: React.FC<CommandEmptyProps> = ({
-  message = 'No results found',
-  className,
-  style,
-  dataTestId,
-}) => (
-    <Box
-      className={className}
-      data-testid={dataTestId}
-      sx={{
-        p: 4,
-        textAlign: 'center',
-        color: 'text.secondary',
-        ...style,
-      }}
-    >
-      <Typography variant="body2">{message}</Typography>
-    </Box>
-  );
-
-export const CommandLoading: React.FC<CommandLoadingProps> = ({
-  message = 'Loading...',
-  className,
-  style,
-  dataTestId,
-}) => (
-    <Box
-      className={className}
-      data-testid={dataTestId}
-      sx={{
-        p: 4,
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        gap: 2,
-        ...style,
-      }}
-    >
-      <CircularProgress size={24} />
-      <Typography variant="body2" color="text.secondary">
-        {message}
-      </Typography>
-    </Box>
-  );
-
-export const CommandSeparator: React.FC<CommandSeparatorProps> = ({
-  className,
-  style,
-}) => <Divider className={className} sx={{ my: 1, ...style }} />;

package/src/components/form/CreatableSelect/CreatableSelect.md

@@ -15,7 +15,7 @@ Type to filter the options; when the typed text matches nothing, an optional
 
 ## Props Documentation
 
-- **options** (`CreatableSelectOption[]`): available options, each `{ value, label }`.
+- **options** (`CreatableSelectOption[]`): available options, each `{ value, label, depth? }`. `depth` (0 = top level) indents the option ROW for a hierarchical list; `label` stays the bare name, so the closed field and anything else reading the selected option never shows the tree drawing.
 - **value** (`string | null`): the selected option's `value` (`null`/`""` = none).
 - **onChange** (`(value: string | null) => void`): fired with the chosen `value`, or `null` when cleared.
 - **onCreate** (`(label: string) => void | Promise<void>`): enables create-on-Enter. When the typed text matches no option, a create row appears; choosing it calls `onCreate` with the raw text. The parent persists it and feeds the new option back through `options`/`value`. Omit to make the field a plain searchable select.

package/src/components/form/CreatableSelect/CreatableSelect.test.stories.tsx

@@ -92,7 +92,7 @@ export const NoCreateRowWhenOnCreateOmitted: Story = {
       await userEvent.click(input);
       await userEvent.type(input, 'Zzz');
       await waitFor(() => expect(canvas.getByText('Nada encontrado')).toBeInTheDocument());
-      expect(canvas.queryByText(/^Criar /)).not.toBeInTheDocument();
+      await waitFor(() => expect(canvas.queryByText(/^Criar /)).not.toBeInTheDocument());
     });
   },
 };

package/src/components/form/CreatableSelect/CreatableSelect.tsx

@@ -2,6 +2,7 @@
 
 import { alpha } from '@mui/material';
 import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
+import type { AutocompleteRenderInputParams } from '@mui/material/Autocomplete';
 import CircularProgress from '@mui/material/CircularProgress';
 import TextField from '@mui/material/TextField';
 import { useId, useMemo } from 'react';
@@ -20,6 +21,145 @@ const CREATE_PREFIX = ' create:';
 
 const filterOptions = createFilterOptions<InternalOption>();
 
+/** How far one nesting level indents a dropdown row, in px. */
+const INDENT_STEP = 16;
+
+/** `sm`/`md` → MUI's own scale, the same mapping {@link Input} uses. */
+const MUI_SIZE = { sm: 'small', md: 'medium' } as const;
+
+/** Match the outlined border treatment of `Input` so siblings look identical. */
+const fieldSx = {
+  '& .MuiOutlinedInput-root': {
+    '& fieldset': {
+      borderColor: (theme: { palette: { divider: string } }) => alpha(theme.palette.divider, 0.23),
+    },
+    '&:hover fieldset': { borderColor: 'primary.main' },
+    '&.Mui-focused fieldset': { borderColor: 'primary.main', borderWidth: 2 },
+    '&.Mui-error fieldset': { borderColor: 'error.main' },
+  },
+} as const;
+
+/**
+ * The filter that appends the synthetic "create" row when the typed text matches
+ * no existing option. Built per render from the two props it closes over.
+ */
+function buildFilter(
+  onCreate: CreatableSelectProps['onCreate'],
+  createOptionLabel: (input: string) => string,
+) {
+  return (available: InternalOption[], params: { inputValue: string }): InternalOption[] => {
+    const filtered = filterOptions(available, params as Parameters<typeof filterOptions>[1]);
+    const input = params.inputValue.trim();
+    const alreadyExists = available.some(
+      (option) => option.label.toLowerCase() === input.toLowerCase(),
+    );
+    if (input && !alreadyExists && onCreate) {
+      filtered.push({
+        value: `${CREATE_PREFIX}${input}`,
+        label: createOptionLabel(input),
+        isCreate: true,
+      });
+    }
+    return filtered;
+  };
+}
+
+/**
+ * A nested option is indented on its ROW; the label itself stays the bare name,
+ * so the closed field never shows the tree drawing (see `depth`).
+ */
+function renderIndentedOption(
+  props: React.HTMLAttributes<HTMLLIElement>,
+  option: InternalOption,
+): React.JSX.Element {
+  const { key, ...rest } = props as typeof props & { key?: string };
+  return (
+    <li
+      key={key ?? option.value}
+      {...rest}
+      style={{ paddingLeft: INDENT_STEP * (1 + (option.depth ?? 0)) }}
+    >
+      {option.label}
+    </li>
+  );
+}
+
+/** The text field Autocomplete renders, with the library's border + a loading adornment. */
+function renderField(
+  params: AutocompleteRenderInputParams,
+  field: {
+    inputId: string;
+    placeholder?: string;
+    error?: string;
+    loading: boolean;
+    size: 'sm' | 'md';
+    dataTestId: string;
+  },
+): React.JSX.Element {
+  return (
+    <TextField
+      {...params}
+      id={field.inputId}
+      placeholder={field.placeholder}
+      error={Boolean(field.error)}
+      size={MUI_SIZE[field.size]}
+      sx={fieldSx}
+      inputProps={{ ...params.inputProps, 'data-testid': `${field.dataTestId}-input` }}
+      slotProps={{
+        input: {
+          ...params.InputProps,
+          endAdornment: (
+            <>
+              {field.loading ? <CircularProgress color="inherit" size={18} /> : null}
+              {params.InputProps.endAdornment}
+            </>
+          ),
+        },
+      }}
+    />
+  );
+}
+
+/**
+ * The option list, plus the selected OBJECT MUI wants, from the controlled value.
+ * `depth` is carried through: it is what {@link renderIndentedOption} draws.
+ */
+function useInternalOptions(
+  options: CreatableSelectOption[],
+  value: string | null,
+): { items: InternalOption[]; selected: InternalOption | null } {
+  const items = useMemo<InternalOption[]>(
+    () => options.map(({ value: optionValue, label, depth }) => ({
+      value: optionValue,
+      label,
+      depth,
+    })),
+    [options],
+  );
+  const selected = useMemo<InternalOption | null>(
+    () => items.find((option) => option.value === value) ?? null,
+    [items, value],
+  );
+  return { items, selected };
+}
+
+/** Route a picked row: cleared, the synthetic create row, or a real option. */
+function handlePick(
+  next: InternalOption | null,
+  onChange: CreatableSelectProps['onChange'],
+  onCreate: CreatableSelectProps['onCreate'],
+): void {
+  if (!next) {
+    onChange(null);
+    return;
+  }
+  if (next.isCreate) {
+    void onCreate?.(next.value.slice(CREATE_PREFIX.length));
+    return;
+  }
+  onChange(next.value);
+}
+
 /**
  * A single-select, searchable combobox that can create a new option on the fly.
  *
@@ -29,8 +169,9 @@ const filterOptions = createFilterOptions<InternalOption>();
  * the parent persists it, then feeds the new option back via `options`/`value`.
  *
  * Chrome matches the library's other form fields: an external {@link FormLabel}
- * above the control (not a floating label) and the same outlined border treatment
- * as {@link Input}, so it lines up with sibling fields in a grid row.
+ * above the control (not a floating label), the same outlined border treatment as
+ * {@link Input} and the same `sm`/`md` scale, so it lines up with sibling fields
+ * in a grid row.
  */
 export function CreatableSelect({
   options,
@@ -45,20 +186,11 @@ export function CreatableSelect({
   disabled = false,
   loading = false,
   fullWidth = true,
+  size = 'md',
   dataTestId = 'creatable-select',
 }: CreatableSelectProps): React.JSX.Element {
   const inputId = useId();
-
-  const items = useMemo<InternalOption[]>(
-    () => options.map((option) => ({ value: option.value, label: option.label })),
-    [options],
-  );
-
-  // MUI holds the selected *option object*; derive it from the controlled value.
-  const selected = useMemo<InternalOption | null>(
-    () => items.find((option) => option.value === value) ?? null,
-    [items, value],
-  );
+  const { items, selected } = useInternalOptions(options, value);
 
   return (
     <FormControl fullWidth={fullWidth} error={Boolean(error)}>
@@ -73,6 +205,7 @@ export function CreatableSelect({
         disabled={disabled}
         loading={loading}
         fullWidth={fullWidth}
+        size={MUI_SIZE[size]}
         handleHomeEndKeys
         selectOnFocus
         clearOnBlur
@@ -84,64 +217,12 @@ export function CreatableSelect({
         slotProps={{ popper: { sx: { zIndex: (theme) => theme.zIndex.modal + 100 } } }}
         getOptionLabel={(option) => (typeof option === 'string' ? option : option.label)}
         isOptionEqualToValue={(option, current) => option.value === current.value}
-        filterOptions={(available, params) => {
-          const filtered = filterOptions(available, params);
-          const input = params.inputValue.trim();
-          const alreadyExists = available.some(
-            (option) => option.label.toLowerCase() === input.toLowerCase(),
-          );
-          if (input && !alreadyExists && onCreate) {
-            filtered.push({
-              value: `${CREATE_PREFIX}${input}`,
-              label: createOptionLabel(input),
-              isCreate: true,
-            });
-          }
-          return filtered;
-        }}
-        onChange={(_event, next) => {
-          if (!next) {
-            onChange(null);
-            return;
-          }
-          if (next.isCreate) {
-            void onCreate?.(next.value.slice(CREATE_PREFIX.length));
-            return;
-          }
-          onChange(next.value);
-        }}
-        renderInput={(params) => (
-          <TextField
-            {...params}
-            id={inputId}
-            placeholder={placeholder}
-            error={Boolean(error)}
-            // Match the outlined border treatment of the `Input` component so the
-            // field is visually identical to its siblings.
-            sx={{
-              '& .MuiOutlinedInput-root': {
-                '& fieldset': {
-                  borderColor: (theme) => alpha(theme.palette.divider, 0.23),
-                },
-                '&:hover fieldset': { borderColor: 'primary.main' },
-                '&.Mui-focused fieldset': { borderColor: 'primary.main', borderWidth: 2 },
-                '&.Mui-error fieldset': { borderColor: 'error.main' },
-              },
-            }}
-            inputProps={{ ...params.inputProps, 'data-testid': `${dataTestId}-input` }}
-            slotProps={{
-              input: {
-                ...params.InputProps,
-                endAdornment: (
-                  <>
-                    {loading ? <CircularProgress color="inherit" size={18} /> : null}
-                    {params.InputProps.endAdornment}
-                  </>
-                ),
-              },
-            }}
-          />
-        )}
+        renderOption={renderIndentedOption}
+        filterOptions={buildFilter(onCreate, createOptionLabel)}
+        onChange={(_event, next) => handlePick(next, onChange, onCreate)}
+        renderInput={(params) =>
+          renderField(params, { inputId, placeholder, error, loading, size, dataTestId })
+        }
       />
       {error && <FormMessage error dataTestId={`${dataTestId}-message`}>{error}</FormMessage>}
     </FormControl>

package/src/components/form/CreatableSelect/CreatableSelect.types.ts

@@ -2,6 +2,14 @@
 export interface CreatableSelectOption {
   value: string;
   label: string;
+  /**
+   * Nesting level for a hierarchical list (0 = top level), rendered as INDENT on
+   * the dropdown row only. Callers used to bake the indent into `label`
+   * ("— Chocolate"), which then travelled everywhere the label goes: the closed
+   * field, the search text, and whatever else reads the selected option's label.
+   * Keeping it a separate number leaves `label` the category's actual name.
+   */
+  depth?: number;
 }
 
 export interface CreatableSelectProps {
@@ -32,6 +40,11 @@ export interface CreatableSelectProps {
   loading?: boolean;
   /** Stretch to the container width (default: true). */
   fullWidth?: boolean;
+  /**
+   * Control height, matching {@link Input}'s scale so the two line up when they
+   * share a grid row (default: `md`).
+   */
+  size?: 'sm' | 'md';
   /** Base test id; the input is `<dataTestId>-input`. */
   dataTestId?: string;
 }