@softize/opus 30.0.0 → 31.1.0

package/src/core/types.ts

@@ -598,6 +598,8 @@ export type OptionsSpec =
 
 /** Overrides declarativos nativos reconhecidos pelo ActionForm. */
 export type BuiltInFieldWidget =
+  | 'date'
+  | 'password'
   | 'textarea'
   | 'code'
   | 'lines'

package/src/ui/components/patterns/form.tsx

@@ -18,7 +18,7 @@
  */
 
 import { createContext, useContext, useEffect, useId } from "react";
-import type { UseFormReturn } from "react-hook-form";
+import { Controller, type UseFormReturn } from "react-hook-form";
 import {
   getLogicalType,
   type FieldWidget,
@@ -38,6 +38,7 @@ import { toast } from "../primitives/sonner.tsx";
 import { Button, type ButtonVariant } from "../primitives/button.tsx";
 import { ButtonGroup } from "../primitives/button-group.tsx";
 import { Input } from "../primitives/input.tsx";
+import { DateInput } from "../primitives/date-input.tsx";
 import { Textarea } from "../primitives/textarea.tsx";
 import { Checkbox } from "../primitives/checkbox.tsx";
 import { IconPicker } from "../primitives/icon-picker.tsx";
@@ -680,9 +681,29 @@ export function ActionFormField({
           aria-describedby={describedBy}
           {...form.register(name)}
         />
+      ) : spec.widget === "date" ? (
+        <Controller
+          name={name}
+          control={form.control}
+          render={({ field }) => (
+            <DateInput
+              id={name}
+              name={field.name}
+              ref={field.ref}
+              value={(field.value as string | undefined) ?? ""}
+              onValueChange={field.onChange}
+              onBlur={field.onBlur}
+              placeholder={spec.placeholder}
+              aria-invalid={errorMessage !== undefined}
+              aria-describedby={describedBy}
+            />
+          )}
+        />
       ) : (
         <Input
           id={name}
+          type={spec.widget === "password" ? "password" : undefined}
+          autoComplete={spec.widget === "password" ? "new-password" : undefined}
           placeholder={spec.placeholder ?? ""}
           aria-invalid={errorMessage !== undefined}
           aria-describedby={describedBy}

package/src/ui/components/patterns/grouped-list.ts

@@ -15,7 +15,7 @@ export interface ListActionGroup<TItem> {
 
 /** Implementação interna do ActionList para executar um recorte paginado por grupo. */
 export function useGroupedListQueries<TItem = unknown, TInput extends Record<string, unknown> = Record<string, unknown>>(
-  client: ClientAdapter,
+  client: ClientAdapter | null,
   action: { name: string; kind: 'list' },
   input: TInput,
   field: string | null,
@@ -52,7 +52,7 @@ export function useGroupedListQueries<TItem = unknown, TInput extends Record<str
       return {
         queryKey: [action.name, groupInput],
         queryFn: async (): Promise<Paginated<TItem>> => {
-          const result = await client.run<Paginated<TItem>>(action as unknown as ActionDef, groupInput)
+          const result = await client!.run<Paginated<TItem>>(action as unknown as ActionDef, groupInput)
           if (!result.ok) throw result.error
           return result.data
         },

package/src/ui/components/patterns/list-calendar.tsx

@@ -0,0 +1,129 @@
+import * as React from "react";
+import { cn } from "../../lib/cn.ts";
+
+export interface CalendarMonthViewProps<TItem> {
+  /** Mês civil no formato YYYY-MM. */
+  month: string;
+  items: readonly TItem[];
+  dateOf: (item: TItem) => string;
+  renderDay: (date: string, items: readonly TItem[]) => React.ReactNode;
+  dayLabel: (date: string, items: readonly TItem[]) => string;
+  onDayClick: (date: string, items: readonly TItem[]) => void;
+  label: string;
+  className?: string;
+}
+
+/** Grade mensal para ActionList.views. Consulta e estados continuam pertencendo à lista. */
+export function CalendarMonthView<TItem>({
+  month,
+  items,
+  dateOf,
+  renderDay,
+  dayLabel,
+  onDayClick,
+  label,
+  className,
+}: CalendarMonthViewProps<TItem>) {
+  const root = React.useRef<HTMLDivElement>(null);
+  const [focused, setFocused] = React.useState(`${month}-01`);
+  if (!/^[1-9]\d{3}-(?:0[1-9]|1[0-2])$/.test(month))
+    throw new RangeError("CalendarMonthView requires YYYY-MM");
+  const first = new Date(`${month}-01T00:00:00Z`);
+  const last = new Date(first);
+  last.setUTCMonth(last.getUTCMonth() + 1, 0);
+  const length = last.getUTCDate();
+  const offset = first.getUTCDay();
+  const rows = Math.ceil((offset + length) / 7);
+  const focusDate = focused.startsWith(`${month}-`) ? focused : `${month}-01`;
+  const grouped = new Map<string, TItem[]>();
+  for (const item of items) {
+    const date = dateOf(item);
+    const group = grouped.get(date) ?? [];
+    group.push(item);
+    grouped.set(date, group);
+  }
+  function move(event: React.KeyboardEvent, day: number) {
+    const weekday = (offset + day - 1) % 7;
+    const delta = {
+      ArrowLeft: -1,
+      ArrowRight: 1,
+      ArrowUp: -7,
+      ArrowDown: 7,
+      Home: -weekday,
+      End: 6 - weekday,
+    }[event.key];
+    if (delta === undefined) return;
+    event.preventDefault();
+    const next = Math.max(1, Math.min(length, day + delta));
+    const date = `${month}-${String(next).padStart(2, "0")}`;
+    setFocused(date);
+    root.current
+      ?.querySelector<HTMLButtonElement>(`[data-calendar-date="${date}"]`)
+      ?.focus();
+  }
+  return (
+    <div className={cn("overflow-x-auto", className)}>
+      <div
+        ref={root}
+        data-slot="calendar-month-view"
+        role="grid"
+        aria-label={label}
+        className="min-w-[35rem] overflow-hidden rounded-lg border"
+      >
+        <div role="row" className="grid grid-cols-7 border-b">
+          {["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sáb"].map((day) => (
+            <div
+              role="columnheader"
+              key={day}
+              className="p-2 text-center text-sm text-muted-foreground"
+            >
+              {day}
+            </div>
+          ))}
+        </div>
+        {Array.from({ length: rows }, (_, row) => (
+          <div
+            role="row"
+            key={row}
+            className="grid grid-cols-7 not-last:border-b"
+          >
+            {Array.from({ length: 7 }, (_, column) => {
+              const day = row * 7 + column - offset + 1;
+              if (day < 1 || day > length)
+                return (
+                  <div
+                    role="gridcell"
+                    key={column}
+                    className="bg-muted/20 not-last:border-r"
+                  />
+                );
+              const date = `${month}-${String(day).padStart(2, "0")}`;
+              const entries = grouped.get(date) ?? [];
+              return (
+                <div
+                  role="gridcell"
+                  key={column}
+                  className="min-w-0 not-last:border-r"
+                >
+                  <button
+                    type="button"
+                    data-calendar-date={date}
+                    tabIndex={date === focusDate ? 0 : -1}
+                    aria-label={dayLabel(date, entries)}
+                    onFocus={() => setFocused(date)}
+                    onKeyDown={(event) => move(event, day)}
+                    onClick={() => onDayClick(date, entries)}
+                    className="flex min-h-28 w-full flex-col gap-2 p-3 text-left text-sm text-foreground hover:bg-muted/40 focus-visible:relative focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-ring focus-visible:-outline-offset-2"
+                  >
+                    <span className="font-medium">{day}</span>
+                    {renderDay(date, entries)}
+                  </button>
+                </div>
+              );
+            })}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}