rl-core-front 0.1.0

package/src/components/ui/filter-rule.tsx

@@ -0,0 +1,221 @@
+"use client";
+
+import { X } from "lucide-react";
+import type { JSX } from "react";
+
+import type { AdvancedRule } from "#core/_utils/advanced-filter";
+import {
+  LIST_OPERATORS,
+  NULLABILITY_OPERATORS,
+  RANGE_OPERATORS,
+} from "#core/_utils/advanced-filter";
+import type { FilterField } from "#core/_utils/filter";
+import { Button } from "#core/components/ui/button";
+import { DateRangePicker } from "#core/components/ui/date-range-picker";
+import { Input } from "#core/components/ui/input";
+import { useI18n } from "#core/contexts";
+
+export interface FilterRuleRowProps {
+  rule: AdvancedRule;
+  schema: FilterField[];
+  onChange: (rule: AdvancedRule) => void;
+  onRemove: () => void;
+  /** Rótulo traduzido de cada campo, resolvido pelo painel. */
+  labelFor: (field: FilterField) => string;
+}
+
+const SELECT_CLASS =
+  "h-9 rounded-md border border-input bg-transparent px-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";
+
+/**
+ * Uma linha do modo avançado: campo, operador e valor.
+ *
+ * O operador é escolhido pelo usuário — é o que separa este modo do simples,
+ * onde ele é implícito no tipo do campo.
+ */
+export function FilterRuleRow({
+  rule,
+  schema,
+  onChange,
+  onRemove,
+  labelFor,
+}: FilterRuleRowProps): JSX.Element {
+  const { t } = useI18n();
+  const field = schema.find((item) => item.field === rule.field) ?? schema[0];
+
+  const changeField = (name: string): void => {
+    const next = schema.find((item) => item.field === name);
+    if (!next) {
+      return;
+    }
+    // Operador e valor pertencem ao campo antigo: trocar o campo os invalida.
+    onChange({
+      ...rule,
+      field: name,
+      operator: next.operators[0],
+      value: "",
+      value2: undefined,
+      values: undefined,
+    });
+  };
+
+  const isDate = field?.type === "DATE" || field?.type === "DATETIME";
+
+  const valueControl = (): JSX.Element => {
+    if (NULLABILITY_OPERATORS.includes(rule.operator)) {
+      return (
+        <select
+          aria-label={t("filters.value")}
+          className={`${SELECT_CLASS} flex-1`}
+          value={rule.value}
+          onChange={(event) => onChange({ ...rule, value: event.target.value })}
+        >
+          <option value="">{t("filters.null")}</option>
+          <option value="true">{t("common.yes")}</option>
+          <option value="false">{t("common.no")}</option>
+        </select>
+      );
+    }
+
+    if (RANGE_OPERATORS.includes(rule.operator)) {
+      if (isDate) {
+        return (
+          <div className="flex-1">
+            <DateRangePicker
+              label={labelFor(field)}
+              value={{ from: rule.value, to: rule.value2 }}
+              onChange={(range) =>
+                onChange({ ...rule, value: range.from ?? "", value2: range.to })
+              }
+            />
+          </div>
+        );
+      }
+      return (
+        <div className="flex flex-1 items-center gap-2">
+          <Input
+            className="h-9"
+            aria-label={t("filters.from")}
+            placeholder={t("filters.from")}
+            value={rule.value}
+            onChange={(event) => onChange({ ...rule, value: event.target.value })}
+          />
+          <span className="text-sm text-muted-foreground">–</span>
+          <Input
+            className="h-9"
+            aria-label={t("filters.to")}
+            placeholder={t("filters.to")}
+            value={rule.value2 ?? ""}
+            onChange={(event) => onChange({ ...rule, value2: event.target.value })}
+          />
+        </div>
+      );
+    }
+
+    if (field?.options?.length) {
+      const multiple = LIST_OPERATORS.includes(rule.operator);
+      const selected = multiple ? (rule.values ?? []) : [rule.value];
+      return (
+        <select
+          multiple={multiple}
+          aria-label={t("filters.value")}
+          className={`${SELECT_CLASS} flex-1 ${multiple ? "h-20" : ""}`}
+          value={multiple ? selected : (selected[0] ?? "")}
+          onChange={(event) => {
+            if (multiple) {
+              const values = Array.from(event.target.selectedOptions, (o) => o.value);
+              onChange({ ...rule, values, value: values.join(", ") });
+              return;
+            }
+            onChange({ ...rule, value: event.target.value });
+          }}
+        >
+          {!multiple && <option value="">—</option>}
+          {field.options.map((option) => (
+            <option key={option.value} value={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </select>
+      );
+    }
+
+    if (isDate) {
+      return (
+        <div className="flex-1">
+          <DateRangePicker
+            label={labelFor(field)}
+            // Operador de ponta única: só a primeira data conta.
+            value={{ from: rule.value }}
+            onChange={(range) => onChange({ ...rule, value: range.from ?? "" })}
+            presets={[]}
+          />
+        </div>
+      );
+    }
+
+    return (
+      <Input
+        className="h-9 flex-1"
+        aria-label={t("filters.value")}
+        placeholder={
+          LIST_OPERATORS.includes(rule.operator)
+            ? t("filters.listHint")
+            : undefined
+        }
+        value={rule.value}
+        onChange={(event) =>
+          onChange({ ...rule, value: event.target.value, values: undefined })
+        }
+      />
+    );
+  };
+
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      <select
+        aria-label={t("filters.field")}
+        className={SELECT_CLASS}
+        value={rule.field}
+        onChange={(event) => changeField(event.target.value)}
+      >
+        {schema.map((item) => (
+          <option key={item.field} value={item.field}>
+            {labelFor(item)}
+          </option>
+        ))}
+      </select>
+
+      <select
+        aria-label={t("filters.operator")}
+        className={SELECT_CLASS}
+        value={rule.operator}
+        onChange={(event) =>
+          onChange({
+            ...rule,
+            operator: event.target.value as AdvancedRule["operator"],
+            values: undefined,
+          })
+        }
+      >
+        {(field?.operators ?? []).map((operator) => (
+          <option key={operator} value={operator}>
+            {t(`filters.operators.${operator.replace("$", "")}`)}
+          </option>
+        ))}
+      </select>
+
+      {valueControl()}
+
+      <Button
+        type="button"
+        variant="ghost"
+        size="iconSm"
+        aria-label={t("filters.removeRule")}
+        onClick={onRemove}
+      >
+        <X className="h-4 w-4" />
+      </Button>
+    </div>
+  );
+}

package/src/components/ui/filter-sheet.tsx

@@ -0,0 +1,201 @@
+"use client";
+
+import type { JSX } from "react";
+import { useEffect, useState } from "react";
+
+import type { AdvancedGroup } from "#core/_utils/advanced-filter";
+import { countConditions, initialTree } from "#core/_utils/advanced-filter";
+import type { FilterDraftValue, FilterField, FilterValues } from "#core/_utils/filter";
+import { activeFilterCount } from "#core/_utils/filter";
+import { Button } from "#core/components/ui/button";
+import { FilterFieldControl } from "#core/components/ui/filter-field";
+import { FilterGroupBlock } from "#core/components/ui/filter-group";
+import { Separator } from "#core/components/ui/separator";
+import {
+  Sheet,
+  SheetBody,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from "#core/components/ui/sheet";
+import { Spinner } from "#core/components/ui/spinner";
+import { useI18n } from "#core/contexts";
+import type { FilterMode, FiltersState } from "#core/hooks/use-filters";
+import { cn } from "#core/lib/utils";
+
+export interface FilterSheetProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  filters: FiltersState;
+}
+
+/**
+ * Rótulo do campo: chave de i18n quando existir, senão o `label` que o backend
+ * mandou (em português). É o que deixa o `en` melhorar aos poucos sem que uma
+ * listagem nova precise de tradução para funcionar.
+ */
+export const useFieldLabel = (): ((field: FilterField) => string) => {
+  const { t } = useI18n();
+  return (field: FilterField): string => {
+    const key = `filters.fields.${field.field}`;
+    const translated = t(key);
+    return translated === key ? field.label : translated;
+  };
+};
+
+/**
+ * Painel de filtros, nos dois modos.
+ *
+ * Trabalha sobre um rascunho e só devolve no "Aplicar" — cada tecla digitada
+ * não pode virar uma requisição.
+ */
+export function FilterSheet({
+  open,
+  onOpenChange,
+  filters,
+}: FilterSheetProps): JSX.Element {
+  const { t } = useI18n();
+  const labelFor = useFieldLabel();
+  const { schema, loading, mode, values, tree, validation } = filters;
+
+  const [draft, setDraft] = useState<FilterValues>(values);
+  const [draftTree, setDraftTree] = useState<AdvancedGroup | null>(tree);
+  const [draftMode, setDraftMode] = useState<FilterMode>(mode);
+
+  useEffect(() => {
+    if (open) {
+      setDraft(values);
+      setDraftTree(tree);
+      setDraftMode(mode);
+    }
+  }, [open, values, tree, mode]);
+
+  const setField = (field: string, value: FilterDraftValue): void => {
+    setDraft((current) => ({ ...current, [field]: value }));
+  };
+
+  const switchMode = (next: FilterMode): void => {
+    setDraftMode(next);
+    if (next === "advanced") {
+      setDraftTree((current) => current ?? initialTree(schema));
+    }
+  };
+
+  const apply = (): void => {
+    filters.setMode(draftMode);
+    if (draftMode === "advanced") {
+      if (draftTree) {
+        filters.setTree(draftTree);
+      }
+    } else {
+      filters.setValues(draft);
+    }
+    onOpenChange(false);
+  };
+
+  const clear = (): void => {
+    setDraft({});
+    setDraftTree(initialTree(schema));
+    if (draftMode === "advanced") {
+      filters.setTree(initialTree(schema));
+    } else {
+      filters.setValues({});
+    }
+    onOpenChange(false);
+  };
+
+  const activeCount =
+    draftMode === "advanced"
+      ? draftTree
+        ? countConditions(draftTree)
+        : 0
+      : activeFilterCount(draft);
+
+  const modes: { id: FilterMode; label: string }[] = [
+    { id: "simple", label: t("filters.simple") },
+    { id: "advanced", label: t("filters.advanced") },
+  ];
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent
+        aria-describedby={undefined}
+        className={cn(draftMode === "advanced" && "sm:max-w-2xl")}
+      >
+        <SheetHeader>
+          <SheetTitle>{t("filters.title")}</SheetTitle>
+          <SheetDescription>
+            {draftMode === "advanced" ? t("filters.advancedHint") : t("filters.hint")}
+          </SheetDescription>
+        </SheetHeader>
+
+        <div className="inline-flex overflow-hidden rounded-md border border-border">
+          {modes.map((item) => (
+            <button
+              key={item.id}
+              type="button"
+              onClick={() => switchMode(item.id)}
+              className={cn(
+                "px-3 py-1.5 text-sm transition-colors",
+                draftMode === item.id
+                  ? "bg-primary text-primary-foreground"
+                  : "hover:bg-accent",
+              )}
+            >
+              {item.label}
+            </button>
+          ))}
+        </div>
+
+        <SheetBody className="-mx-1 space-y-5 px-1">
+          {loading && <Spinner className="mx-auto mt-8" />}
+
+          {!loading && schema.length === 0 && (
+            <p className="mt-8 text-center text-sm text-muted-foreground">
+              {t("filters.empty")}
+            </p>
+          )}
+
+          {!loading && schema.length > 0 && draftMode === "simple" && (
+            <>
+              {schema.map((field) => (
+                <FilterFieldControl
+                  key={field.field}
+                  field={field}
+                  label={labelFor(field)}
+                  value={draft[field.field] ?? {}}
+                  onChange={(value) => setField(field.field, value)}
+                />
+              ))}
+            </>
+          )}
+
+          {!loading && schema.length > 0 && draftMode === "advanced" && draftTree && (
+            <FilterGroupBlock
+              group={draftTree}
+              schema={schema}
+              labelFor={labelFor}
+              onChange={setDraftTree}
+            />
+          )}
+        </SheetBody>
+
+        {draftMode === "advanced" && !validation.valid && validation.reason && (
+          <p className="text-sm text-destructive">
+            {t(`filters.${validation.reason}`)}
+          </p>
+        )}
+
+        <Separator />
+        <SheetFooter>
+          <Button variant="outline" onClick={clear} disabled={activeCount === 0}>
+            {t("filters.clear")}
+          </Button>
+          <Button onClick={apply}>{t("filters.apply")}</Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}

package/src/components/ui/index.ts

@@ -0,0 +1,30 @@
+// Barrel da pasta — importe daqui de fora; dentro da pasta use o caminho direto.
+export * from "./alert";
+export * from "./avatar";
+export * from "./badge";
+export * from "./button";
+export * from "./card";
+export * from "./checkbox";
+export * from "./column-visibility-modal";
+export * from "./confirm-dialog";
+export * from "./data-table";
+export * from "./date-range-picker";
+export * from "./dialog";
+export * from "./dropdown-menu";
+export * from "./field";
+export * from "./filter-chips";
+export * from "./filter-field";
+export * from "./filter-group";
+export * from "./filter-rule";
+export * from "./filter-sheet";
+export * from "./input";
+export * from "./label";
+export * from "./row-actions";
+export * from "./select";
+export * from "./separator";
+export * from "./sheet";
+export * from "./sonner";
+export * from "./spinner";
+export * from "./switch";
+export * from "./table";
+export * from "./tabs";

package/src/components/ui/input.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import * as React from "react";
+
+import { cn } from "#core/lib/utils";
+
+const Input = React.forwardRef<
+  HTMLInputElement,
+  React.InputHTMLAttributes<HTMLInputElement>
+>(({ className, type, ...props }, ref) => {
+  return (
+    <input
+      type={type}
+      className={cn(
+        "flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+Input.displayName = "Input";
+
+export { Input };

package/src/components/ui/label.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import * as LabelPrimitive from "@radix-ui/react-label";
+import * as React from "react";
+
+import { cn } from "#core/lib/utils";
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(
+      "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+      className,
+    )}
+    {...props}
+  />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };

package/src/components/ui/row-actions.tsx

@@ -0,0 +1,32 @@
+import * as React from "react";
+
+import { cn } from "#core/lib/utils";
+
+export interface RowActionsProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+/**
+ * Grupo de botões de ação de uma linha de tabela: centralizado e sem folga
+ * entre os botões.
+ *
+ * Só cuida do arranjo — o tamanho de cada botão é escolha dele
+ * (`size="iconSm"` nos de ícone), e quem impede a coluna de esticar é o
+ * `meta: { shrink: true }` na definição dela.
+ */
+export function RowActions({
+  children,
+  className,
+}: RowActionsProps): React.JSX.Element {
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-center gap-0.5",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}

package/src/components/ui/select.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "#core/lib/utils";
+
+const Select = SelectPrimitive.Root;
+const SelectGroup = SelectPrimitive.Group;
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1 focus:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 data-[placeholder]:text-muted-foreground",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        position === "popper" && "data-[side=bottom]:translate-y-1",
+        className,
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectPrimitive.ScrollUpButton className="flex cursor-default items-center justify-center py-1">
+        <ChevronUp className="h-4 w-4" />
+      </SelectPrimitive.ScrollUpButton>
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectPrimitive.ScrollDownButton className="flex cursor-default items-center justify-center py-1">
+        <ChevronDown className="h-4 w-4" />
+      </SelectPrimitive.ScrollDownButton>
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+};

package/src/components/ui/separator.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import * as React from "react";
+
+import { cn } from "#core/lib/utils";
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref,
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };