rl-core-front 0.1.0

package/src/components/ui/dialog.tsx

@@ -0,0 +1,138 @@
+"use client";
+
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "#core/lib/utils";
+
+const Dialog = DialogPrimitive.Root;
+const DialogTrigger = DialogPrimitive.Trigger;
+const DialogPortal = DialogPrimitive.Portal;
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/60 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-[calc(100%-2rem)] max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-card p-6 shadow-lg rounded-xl data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 max-h-[calc(100%-2rem)] overflow-y-auto",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+/**
+ * Corpo do modal como formulário — é o que faz o `Enter` submeter.
+ * O `preventDefault` fica aqui porque, sem ele, o Enter recarrega a página.
+ * O `DialogFooter` com o botão `type="submit"` precisa ficar dentro deste form.
+ */
+const DialogForm = React.forwardRef<
+  HTMLFormElement,
+  React.ComponentPropsWithoutRef<"form">
+>(({ className, onSubmit, ...props }, ref) => (
+  <form
+    ref={ref}
+    onSubmit={(e) => {
+      e.preventDefault();
+      onSubmit?.(e);
+    }}
+    className={cn("flex flex-col gap-4", className)}
+    {...props}
+  />
+));
+DialogForm.displayName = "DialogForm";
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element => (
+  <div
+    className={cn("flex flex-col space-y-1.5 text-left", className)}
+    {...props}
+  />
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className,
+    )}
+    {...props}
+  />
+);
+DialogFooter.displayName = "DialogFooter";
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className,
+    )}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogForm,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+};

package/src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "#core/lib/utils";
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[10rem] overflow-hidden rounded-md border border-border bg-popover p-1 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 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+        className,
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-sm font-semibold", className)}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    {...props}
+  />
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground",
+      className,
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+));
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName;
+
+export {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+};

package/src/components/ui/field.tsx

@@ -0,0 +1,20 @@
+import type { JSX } from "react";
+
+import { Label } from "#core/components/ui/label";
+
+interface FieldProps {
+  label?: string;
+  error?: string;
+  htmlFor?: string;
+  children: React.ReactNode;
+}
+
+export function Field({ label, error, htmlFor, children }: FieldProps): JSX.Element {
+  return (
+    <div className="space-y-1.5">
+      {label && <Label htmlFor={htmlFor}>{label}</Label>}
+      {children}
+      {error && <p className="text-xs font-medium text-destructive">{error}</p>}
+    </div>
+  );
+}

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

@@ -0,0 +1,88 @@
+"use client";
+
+import { SlidersHorizontal, X } from "lucide-react";
+import type { JSX } from "react";
+
+import { countConditions } from "#core/_utils/advanced-filter";
+import { describeValue, hasValue } from "#core/_utils/filter";
+import { Button } from "#core/components/ui/button";
+import { useFieldLabel } from "#core/components/ui/filter-sheet";
+import { useI18n } from "#core/contexts";
+import type { FiltersState } from "#core/hooks/use-filters";
+
+export interface FilterChipsProps {
+  filters: FiltersState;
+}
+
+/**
+ * Filtros ativos em forma de chip, cada um removível.
+ *
+ * Existe para o usuário não precisar abrir o painel só para lembrar o que está
+ * filtrando — e para não olhar uma tabela vazia sem saber por quê. No modo
+ * avançado a expressão não cabe num chip por campo, então vira um resumo com a
+ * contagem de condições.
+ */
+export function FilterChips({ filters }: FilterChipsProps): JSX.Element | null {
+  const { t, locale } = useI18n();
+  const labelFor = useFieldLabel();
+  const { schema, values, mode, tree } = filters;
+
+  if (mode === "advanced") {
+    const total = tree ? countConditions(tree) : 0;
+    if (total === 0 || !filters.filter) {
+      return null;
+    }
+    return (
+      <div className="mb-3 flex flex-wrap items-center gap-2">
+        <span className="flex items-center gap-1.5 rounded-full border border-border bg-muted/40 px-3 py-1 text-xs">
+          <SlidersHorizontal className="h-3 w-3" />
+          {t("filters.advancedSummary", { count: total })}
+        </span>
+        <Button variant="ghost" size="sm" onClick={() => filters.setMode("simple")}>
+          {t("filters.clearAll")}
+        </Button>
+      </div>
+    );
+  }
+
+  const active = schema.filter((field) => hasValue(values[field.field]));
+  if (active.length === 0) {
+    return null;
+  }
+
+  const remove = (field: string): void => {
+    const next = { ...values };
+    delete next[field];
+    filters.setValues(next);
+  };
+
+  const labels = {
+    from: t("filters.fromChip"),
+    to: t("filters.toChip"),
+    yes: t("common.yes"),
+    no: t("common.no"),
+    locale,
+  };
+
+  return (
+    <div className="mb-3 flex flex-wrap items-center gap-2">
+      {active.map((field) => (
+        <button
+          key={field.field}
+          type="button"
+          onClick={() => remove(field.field)}
+          className="flex items-center gap-1.5 rounded-full border border-border bg-muted/40 px-3 py-1 text-xs transition-colors hover:bg-muted"
+        >
+          <span className="text-muted-foreground">{labelFor(field)}:</span>
+          <span className="font-medium">
+            {describeValue(field, values[field.field], labels)}
+          </span>
+          <X className="h-3 w-3" />
+        </button>
+      ))}
+      <Button variant="ghost" size="sm" onClick={() => filters.setValues({})}>
+        {t("filters.clearAll")}
+      </Button>
+    </div>
+  );
+}

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

@@ -0,0 +1,137 @@
+"use client";
+
+import type { JSX } from "react";
+
+import type { FilterDraftValue, FilterField } from "#core/_utils/filter";
+import { Checkbox } from "#core/components/ui/checkbox";
+import { DateRangePicker } from "#core/components/ui/date-range-picker";
+import { Input } from "#core/components/ui/input";
+import { Label } from "#core/components/ui/label";
+import { useI18n } from "#core/contexts";
+
+export interface FilterFieldControlProps {
+  field: FilterField;
+  /** Rótulo já traduzido pelo painel. */
+  label: string;
+  value: FilterDraftValue;
+  onChange: (value: FilterDraftValue) => void;
+}
+
+/**
+ * Controle de um campo, escolhido pelo `type` que o backend declarou.
+ *
+ * O componente não conhece nenhuma feature: o que ele desenha vem do catálogo,
+ * então uma listagem nova não mexe aqui.
+ */
+export function FilterFieldControl({
+  field,
+  label,
+  value,
+  onChange,
+}: FilterFieldControlProps): JSX.Element {
+  const { t } = useI18n();
+
+  // Período de datas: um calendário só, com atalhos. Dois `<input type="date">`
+  // obrigavam a digitar duas datas e conferir na mão qual era a maior.
+  if (field.type === "DATE" || field.type === "DATETIME") {
+    return (
+      <div className="space-y-2">
+        <span className="text-sm font-medium">{label}</span>
+        <DateRangePicker
+          label={label}
+          value={{ from: value.from, to: value.to }}
+          onChange={(range) => onChange(range)}
+        />
+      </div>
+    );
+  }
+
+  if (field.type === "NUMBER") {
+    return (
+      <fieldset className="space-y-2">
+        <legend className="text-sm font-medium">{label}</legend>
+        <div className="flex items-center gap-2">
+          <Input
+            type="number"
+            aria-label={`${label} — ${t("filters.from")}`}
+            placeholder={t("filters.from")}
+            value={value.from ?? ""}
+            onChange={(event) => onChange({ ...value, from: event.target.value })}
+          />
+          <span className="text-sm text-muted-foreground">–</span>
+          <Input
+            type="number"
+            aria-label={`${label} — ${t("filters.to")}`}
+            placeholder={t("filters.to")}
+            value={value.to ?? ""}
+            onChange={(event) => onChange({ ...value, to: event.target.value })}
+          />
+        </div>
+      </fieldset>
+    );
+  }
+
+  if (field.type === "BOOLEAN") {
+    return (
+      <div className="space-y-2">
+        <Label htmlFor={`filter-${field.field}`}>{label}</Label>
+        <select
+          id={`filter-${field.field}`}
+          className="flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          value={value.value ?? ""}
+          onChange={(event) => onChange({ value: event.target.value })}
+        >
+          <option value="">{t("filters.all")}</option>
+          <option value="true">{t("common.yes")}</option>
+          <option value="false">{t("common.no")}</option>
+        </select>
+      </div>
+    );
+  }
+
+  if (field.type === "ENUM" || field.type === "SELECT") {
+    const selected = value.values ?? [];
+    const toggle = (option: string): void => {
+      onChange({
+        values: selected.includes(option)
+          ? selected.filter((item) => item !== option)
+          : [...selected, option],
+      });
+    };
+
+    return (
+      <fieldset className="space-y-2">
+        <legend className="text-sm font-medium">{label}</legend>
+        {field.options?.length ? (
+          <div className="max-h-44 space-y-2 overflow-y-auto rounded-md border border-border p-3">
+            {field.options.map((option) => (
+              <label
+                key={option.value}
+                className="flex cursor-pointer items-center gap-2 text-sm"
+              >
+                <Checkbox
+                  checked={selected.includes(option.value)}
+                  onCheckedChange={() => toggle(option.value)}
+                />
+                {option.label}
+              </label>
+            ))}
+          </div>
+        ) : (
+          <p className="text-sm text-muted-foreground">{t("filters.noOptions")}</p>
+        )}
+      </fieldset>
+    );
+  }
+
+  return (
+    <div className="space-y-2">
+      <Label htmlFor={`filter-${field.field}`}>{label}</Label>
+      <Input
+        id={`filter-${field.field}`}
+        value={value.value ?? ""}
+        onChange={(event) => onChange({ value: event.target.value })}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,155 @@
+"use client";
+
+import { Plus, Trash2 } from "lucide-react";
+import type { JSX } from "react";
+
+import type {
+  AdvancedGroup,
+  AdvancedNode,
+  Combinator,
+} from "#core/_utils/advanced-filter";
+import {
+  isGroup,
+  MAX_DEPTH,
+  newGroup,
+  newRule,
+} from "#core/_utils/advanced-filter";
+import type { FilterField } from "#core/_utils/filter";
+import { Button } from "#core/components/ui/button";
+import { FilterRuleRow } from "#core/components/ui/filter-rule";
+import { useI18n } from "#core/contexts";
+import { cn } from "#core/lib/utils";
+
+export interface FilterGroupBlockProps {
+  group: AdvancedGroup;
+  schema: FilterField[];
+  onChange: (group: AdvancedGroup) => void;
+  /** Ausente na raiz — o grupo de fora não pode ser removido. */
+  onRemove?: () => void;
+  /** 1 é a raiz; usado para não deixar aninhar além do teto do backend. */
+  level?: number;
+  labelFor: (field: FilterField) => string;
+}
+
+/**
+ * Um grupo do modo avançado: escolhe `E`/`OU` e contém regras e subgrupos.
+ *
+ * O aninhamento para em `MAX_DEPTH` porque é o teto que o backend aplica — o
+ * botão some antes de o usuário montar algo que voltaria 400.
+ */
+export function FilterGroupBlock({
+  group,
+  schema,
+  onChange,
+  onRemove,
+  level = 1,
+  labelFor,
+}: FilterGroupBlockProps): JSX.Element {
+  const { t } = useI18n();
+
+  const setChild = (index: number, child: AdvancedNode | null): void => {
+    const children = [...group.children];
+    if (child === null) {
+      children.splice(index, 1);
+    } else {
+      children[index] = child;
+    }
+    onChange({ ...group, children });
+  };
+
+  const setCombinator = (combinator: Combinator): void =>
+    onChange({ ...group, combinator });
+
+  const addRule = (): void => {
+    if (schema.length === 0) {
+      return;
+    }
+    onChange({ ...group, children: [...group.children, newRule(schema[0])] });
+  };
+
+  const addGroup = (): void =>
+    onChange({ ...group, children: [...group.children, newGroup("$AND")] });
+
+  return (
+    <div
+      className={cn(
+        "space-y-3 rounded-lg border border-border p-3",
+        level > 1 && "bg-muted/30",
+      )}
+    >
+      <div className="flex items-center justify-between gap-2">
+        <div className="inline-flex overflow-hidden rounded-md border border-border">
+          {(["$AND", "$OR"] as const).map((combinator) => (
+            <button
+              key={combinator}
+              type="button"
+              onClick={() => setCombinator(combinator)}
+              className={cn(
+                "px-3 py-1 text-xs transition-colors",
+                group.combinator === combinator
+                  ? "bg-primary text-primary-foreground"
+                  : "hover:bg-accent",
+              )}
+            >
+              {combinator === "$AND" ? t("filters.and") : t("filters.or")}
+            </button>
+          ))}
+        </div>
+
+        {onRemove && (
+          <Button
+            type="button"
+            variant="ghost"
+            size="iconSm"
+            aria-label={t("filters.removeGroup")}
+            onClick={onRemove}
+          >
+            <Trash2 className="h-4 w-4" />
+          </Button>
+        )}
+      </div>
+
+      {group.children.length === 0 && (
+        <p className="text-sm text-muted-foreground">{t("filters.emptyGroup")}</p>
+      )}
+
+      <div className="space-y-3">
+        {group.children.map((child, index) =>
+          isGroup(child) ? (
+            <FilterGroupBlock
+              key={child.id}
+              group={child}
+              schema={schema}
+              level={level + 1}
+              labelFor={labelFor}
+              onChange={(next) => setChild(index, next)}
+              onRemove={() => setChild(index, null)}
+            />
+          ) : (
+            <FilterRuleRow
+              key={child.id}
+              rule={child}
+              schema={schema}
+              labelFor={labelFor}
+              onChange={(next) => setChild(index, next)}
+              onRemove={() => setChild(index, null)}
+            />
+          ),
+        )}
+      </div>
+
+      <div className="flex flex-wrap gap-2">
+        <Button type="button" variant="outline" size="sm" onClick={addRule}>
+          <Plus className="h-4 w-4" />
+          {t("filters.addCondition")}
+        </Button>
+        {level < MAX_DEPTH && (
+          <Button type="button" variant="ghost" size="sm" onClick={addGroup}>
+            <Plus className="h-4 w-4" />
+            {t("filters.addGroup")}
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}