stackkit 0.3.5 → 0.3.6

package/modules/components/files/shared/shadcn/global/form-field/multi-select-field.tsx

@@ -0,0 +1,207 @@
+"use client";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+    Command,
+    CommandEmpty,
+    CommandGroup,
+    CommandInput,
+    CommandItem,
+    CommandList,
+} from "@/components/ui/command";
+import {
+    Field,
+    FieldContent,
+    FieldError,
+    FieldLabel,
+} from "@/components/ui/field";
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
+} from "@/components/ui/popover";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import clsx from "clsx";
+import { Check, ChevronsUpDown } from "lucide-react";
+import * as React from "react";
+import { Controller } from "react-hook-form";
+
+export type MultiOption = { label: string; value: string };
+
+type Props = {
+  name: string;
+  label?: string;
+  options: MultiOption[];
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+  renderCreate?: React.ReactNode;
+  summaryFormatter?: (
+    selected: string[],
+    all: MultiOption[],
+  ) => React.ReactNode;
+  listMaxHeight?: number;
+  showChips?: boolean;
+};
+
+export default function MultiSelectField({
+  name,
+  label,
+  options,
+  placeholder = "Select options",
+  disabled = false,
+  className,
+  renderCreate,
+  summaryFormatter,
+  listMaxHeight = 260,
+  showChips = true,
+}: Props) {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <Controller
+      name={name}
+      render={({ field, fieldState }) => {
+        const value: string[] = Array.isArray(field.value) ? field.value : [];
+
+        const toggle = (v: string) => {
+          const set = new Set(value);
+          if (set.has(v)) {
+            set.delete(v);
+          } else {
+            set.add(v);
+          }
+          field.onChange(Array.from(set));
+        };
+
+        const clearAll = () => field.onChange([]);
+        const selectAll = () => field.onChange(options.map((o) => o.value));
+
+        const allSelected =
+          options.length > 0 && value.length === options.length;
+
+        const defaultSummary = () => {
+          if (!value.length)
+            return <span className="text-muted-foreground">{placeholder}</span>;
+
+          const labels = value
+            .map((v) => options.find((o) => o.value === v)?.label || v)
+            .filter(Boolean);
+
+          if (!showChips) {
+            return (
+              <span>
+                {labels.length > 2
+                  ? `${labels.length} selected`
+                  : labels.join(", ")}
+              </span>
+            );
+          }
+          return (
+            <div className="flex gap-1">
+              {labels.slice(0, 3).map((lab, i) => {
+                const val = value[i];
+                return (
+                  <Badge
+                    key={val}
+                    variant="secondary"
+                    className="max-w-[100px] shrink-0 cursor-pointer px-2"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      field.onChange(value.filter((v) => v !== val));
+                    }}
+                  >
+                    <span className="block truncate" title={lab}>
+                      {lab}
+                    </span>
+                  </Badge>
+                );
+              })}
+              {labels.length > 3 && (
+                <Badge variant="outline" className="shrink-0">
+                  +{labels.length - 3}
+                </Badge>
+              )}
+            </div>
+          );
+        };
+
+        return (
+          <Field className={clsx("space-y-2", className)} data-invalid={fieldState.invalid}>
+            {label && <FieldLabel>{label}</FieldLabel>}
+            <FieldContent>
+              <Popover open={open} onOpenChange={setOpen}>
+                <PopoverTrigger className="overflow-hidden">
+                  <Button
+                    type="button"
+                    variant="outline"
+                    role="combobox"
+                    aria-expanded={open}
+                    className="w-full justify-between"
+                    disabled={disabled}
+                  >
+                    {summaryFormatter
+                      ? summaryFormatter(value, options)
+                      : defaultSummary()}
+                    <ChevronsUpDown className="h-4 w-4 opacity-50" />
+                  </Button>
+                </PopoverTrigger>
+
+                {/* Use width override here since you can't change the Popover wrapper */}
+                <PopoverContent className="w-[--radix-popover-trigger-width] p-0">
+                  {renderCreate ? (
+                    <div className="border-b p-2">{renderCreate}</div>
+                  ) : null}
+
+                  <Command>
+                    {/* MUST live inside <Command> */}
+                    <div className="flex items-center gap-2 px-2 pt-2">
+                      <CommandInput placeholder="Search..." />
+                      <div className="ml-auto flex items-center gap-1">
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="sm"
+                          onClick={allSelected ? clearAll : selectAll}
+                          disabled={!options.length}
+                        >
+                          {allSelected ? "Clear all" : "Select all"}
+                        </Button>
+                      </div>
+                    </div>
+
+                    <CommandList>
+                      <CommandEmpty>No option found.</CommandEmpty>
+                      <ScrollArea style={{ maxHeight: listMaxHeight }}>
+                        <CommandGroup>
+                          {options.map((opt) => {
+                            const checked = value.includes(opt.value);
+                            return (
+                              <CommandItem
+                                key={opt.value}
+                                value={`${opt.label} ${opt.value}`}
+                                className="cursor-pointer"
+                                onSelect={() => toggle(opt.value)}
+                              >
+                                <Checkbox checked={checked} className="mr-2" />
+                                <span className="flex-1">{opt.label}</span>
+                                {checked && <Check className="h-4 w-4" />}
+                              </CommandItem>
+                            );
+                          })}
+                        </CommandGroup>
+                      </ScrollArea>
+                    </CommandList>
+                  </Command>
+                </PopoverContent>
+              </Popover>
+            </FieldContent>
+            {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+          </Field>
+        );
+      }}
+    />
+  );
+}

package/modules/components/files/shared/shadcn/global/form-field/select-field.tsx

@@ -0,0 +1,247 @@
+"use client";
+
+import {
+    Field,
+    FieldContent,
+    FieldDescription,
+    FieldError,
+    FieldLabel,
+} from "@/components/ui/field";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@/components/ui/select";
+import { cn } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+import * as React from "react";
+import type { FieldPath, FieldValues } from "react-hook-form";
+import { Controller } from "react-hook-form";
+
+/** Types */
+type Option = {
+  label: React.ReactNode;
+  value: string | number;
+  disabled?: boolean;
+  icon?: LucideIcon;
+};
+
+type BaseProps = {
+  id?: string;
+  icon?: LucideIcon;
+  label?: React.ReactNode;
+  options: Option[];
+  placeholder?: string;
+  description?: React.ReactNode;
+  className?: string;
+  triggerClassName?: string;
+  contentClassName?: string;
+  disabled?: boolean;
+  required?: boolean;
+  allowClear?: boolean;
+  clearLabel?: string;
+  value?: string | number | undefined;
+  onValueChange?: (value: string | number | undefined) => void;
+  defaultValue?: string | number | undefined;
+  valueAsNumber?: boolean;
+  error?: React.ReactNode;
+};
+
+export type SelectFieldProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = BaseProps & {
+  name?: TName;
+};
+
+/** Helpers */
+const CLEAR_TOKEN = "__CLEAR__";
+
+function normalizeOut(
+  raw: string,
+  { valueAsNumber }: { valueAsNumber?: boolean },
+): string | number | undefined {
+  if (raw === CLEAR_TOKEN) return undefined;
+  if (!valueAsNumber) return raw;
+  const n = Number(raw);
+  return Number.isFinite(n) ? n : undefined;
+}
+
+function normalizeIn(v: string | number | undefined | null): string {
+  if (v === null || v === undefined) return "";
+  return String(v);
+}
+
+export default function SelectField<
+  TFieldValues extends FieldValues,
+  TName extends FieldPath<TFieldValues>,
+>({
+  name,
+  id,
+  icon: Icon,
+  label,
+  options,
+  placeholder = "Select an option",
+  description,
+  className,
+  triggerClassName,
+  contentClassName,
+  disabled = false,
+  required = false,
+  allowClear = false,
+  clearLabel = "Clear",
+  valueAsNumber = false,
+
+  value: externalValue,
+  onValueChange,
+  defaultValue,
+  error,
+}: SelectFieldProps<TFieldValues, TName>) {
+  const autoId = React.useId();
+  const triggerId = id ?? autoId;
+
+  const [internal, setInternal] = React.useState<string | number | undefined>(
+    defaultValue,
+  );
+
+  // Renderers
+  const renderStandalone = () => {
+    const current = externalValue !== undefined ? externalValue : internal;
+    const selectValue = normalizeIn(current);
+
+    const handleChange = (raw: string | null) => {
+      const next = raw ? normalizeOut(raw, { valueAsNumber }) : undefined;
+      if (onValueChange) onValueChange(next);
+      else setInternal(next);
+    };
+
+    return (
+      <div className={className}>
+        {label ? (
+          <FieldLabel htmlFor={triggerId} className="mb-2 inline-flex items-center gap-2">
+            {Icon && <Icon className="h-4 w-4" />}
+            {label}
+            {required && <span className="ml-0.5 text-destructive">*</span>}
+          </FieldLabel>
+        ) : null}
+
+        <div className="overflow-hidden rounded-md dark:bg-transparent">
+          <Select
+            value={selectValue}
+            onValueChange={handleChange}
+            disabled={disabled}
+          >
+            <SelectTrigger
+              id={triggerId}
+              className={cn("w-full", triggerClassName)}
+            >
+              <SelectValue placeholder={placeholder} />
+            </SelectTrigger>
+
+            <SelectContent className={contentClassName}>
+              {allowClear && (
+                <SelectItem value={CLEAR_TOKEN}>{clearLabel}</SelectItem>
+              )}
+              {options.map((opt) => {
+                const IconComp = opt.icon;
+                return (
+                  <SelectItem
+                    key={String(opt.value)}
+                    value={String(opt.value)}
+                    disabled={opt.disabled}
+                  >
+                    <span className="flex items-center gap-2">
+                      {IconComp && <IconComp className="h-4 w-4" />}
+                      {opt.label}
+                    </span>
+                  </SelectItem>
+                );
+              })}
+            </SelectContent>
+          </Select>
+        </div>
+
+        {description ? (
+          <FieldDescription>{description}</FieldDescription>
+        ) : null}
+        {error ? (
+          <p className="text-[0.8rem] font-medium text-destructive">{error}</p>
+        ) : null}
+      </div>
+    );
+  };
+
+  const renderFormControlled = () => (
+    <Controller
+      name={name as TName}
+      render={({ field, fieldState }) => {
+        const effectiveDisabled = disabled || field.disabled;
+        const current =
+          externalValue !== undefined
+            ? externalValue
+            : (field.value as string | number | undefined);
+        const selectValue = normalizeIn(current);
+
+        const handleChange = (raw: string | null) => {
+          const next = raw ? normalizeOut(raw, { valueAsNumber }) : undefined;
+          field.onChange(next);
+          onValueChange?.(next);
+        };
+
+        return (
+          <Field className={className} data-invalid={fieldState.invalid}>
+            {label ? (
+              <FieldLabel className="mb-2 inline-flex items-center gap-2" htmlFor={triggerId}>
+                {Icon && <Icon className="h-4 w-4" />}
+                {label}
+                {required && <span className="ml-0.5 text-destructive">*</span>}
+              </FieldLabel>
+            ) : null}
+
+            <FieldContent>
+              <div className="overflow-hidden rounded-md dark:bg-transparent">
+                <Select
+                  value={selectValue}
+                  onValueChange={handleChange}
+                  disabled={effectiveDisabled}
+                >
+                  <SelectTrigger
+                    id={triggerId}
+                    className={cn("w-full", triggerClassName)}
+                  >
+                    <SelectValue placeholder={placeholder} />
+                  </SelectTrigger>
+
+                  <SelectContent className={contentClassName}>
+                    {allowClear && (
+                      <SelectItem value={CLEAR_TOKEN}>{clearLabel}</SelectItem>
+                    )}
+                    {options.map((opt) => (
+                      <SelectItem
+                        key={String(opt.value)}
+                        value={String(opt.value)}
+                        disabled={opt.disabled}
+                      >
+                        {opt.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            </FieldContent>
+
+            {description ? (
+              <FieldDescription>{description}</FieldDescription>
+            ) : null}
+            {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+          </Field>
+        );
+      }}
+    />
+  );
+
+  const content = name ? renderFormControlled() : renderStandalone();
+  return content;
+}