@softize/opus 30.0.0 → 31.1.0

package/src/ui/components/patterns/presentation-fields.tsx

@@ -0,0 +1,246 @@
+import type { PresentationCompositionRuntime } from "./presentation-sections.tsx";
+import { meetsPresentationRequirement } from "../../../core/presentation.ts";
+import { Fragment, useRef, type ReactNode } from "react";
+import type { ActionContract } from "../../../core/contracts.ts";
+import type {
+  PresentationActionBody,
+  PresentationActionRegistry,
+  PresentationBindingContext,
+  PresentationColumn,
+} from "../../../core/presentation.ts";
+import { resolvePresentationBindings } from "../../../core/presentation.ts";
+import { useListAction, useTriggerAction } from "../../drivers/react.tsx";
+import { ActionFormField } from "./form.tsx";
+import { DataState } from "./data-state.tsx";
+import { Surface } from "./surface.tsx";
+import { EmptyValue } from "../primitives/empty-value.tsx";
+import { Switch } from "../primitives/switch.tsx";
+import { toast } from "../primitives/sonner.tsx";
+
+export function PresentationSwitch({
+  column,
+  item,
+  checked,
+  actions,
+  can,
+  context,
+}: {
+  column: Extract<PresentationColumn, { kind: "switch" }>;
+  item: Record<string, unknown>;
+  checked: boolean;
+  actions: PresentationActionRegistry;
+  can?: (permission: string) => boolean;
+  context: PresentationBindingContext;
+}) {
+  const action = actions[column.action];
+  if (!action) throw new Error(`Action “${column.action}” não registrada.`);
+  const update = useTriggerAction(action);
+  const pending = useRef(false);
+  const disabled =
+    !meetsPresentationRequirement(column.requires, can) ||
+    !meetsPresentationRequirement(action.requires, can);
+  return (
+    <Switch
+      checked={checked}
+      disabled={disabled || update.isLoading}
+      aria-label={`${column.label}: ${String(item[column.itemLabel] ?? "")}`}
+      onClick={(event) => event.stopPropagation()}
+      onCheckedChange={async (value) => {
+        if (disabled || pending.current) return;
+        pending.current = true;
+        try {
+          const result = await update.trigger({
+            ...resolvePresentationBindings(column.input, { ...context, item }),
+            [column.valueField]: value,
+          });
+          if (!result.isSuccess)
+            toast.error(
+              result.error?.message ?? "Não foi possível salvar a alteração.",
+            );
+        } catch {
+          update.reset();
+          toast.error("Não foi possível salvar a alteração.");
+        } finally {
+          pending.current = false;
+        }
+      }}
+    />
+  );
+}
+
+export function presentationTextCell(
+  value: unknown,
+  column: Extract<PresentationColumn, { kind: "text" }>,
+  icons?: Readonly<Record<string, ReactNode>>,
+): ReactNode {
+  if (value === null || value === undefined || value === "")
+    return column.empty ?? <EmptyValue compact />;
+  const text =
+    column.labels === undefined
+      ? `${column.prefix ?? ""}${String(value)}`
+      : Object.hasOwn(column.labels, String(value))
+        ? column.labels[String(value)]
+        : (column.fallback ?? String(value));
+  if (column.icon === undefined) return text;
+  if (!Object.hasOwn(icons ?? {}, column.icon))
+    throw new Error(`Ícone “${column.icon}” não registrado.`);
+  return (
+    <span className="flex items-center gap-2">
+      <span aria-hidden className="size-4 shrink-0 [&>svg]:size-4">
+        {icons![column.icon]}
+      </span>
+      {text}
+    </span>
+  );
+}
+
+function PresentationLookupField({
+  name,
+  lookup,
+  actions,
+  runtime,
+  can,
+}: {
+  name: string;
+  lookup: NonNullable<PresentationActionBody["lookups"]>[string];
+  actions: PresentationActionRegistry;
+  runtime?: PresentationCompositionRuntime;
+  can?: (permission: string) => boolean;
+}) {
+  const action = actions[lookup.action];
+  if (action?.kind !== "list")
+    throw new Error(`Lookup “${lookup.action}” não é uma list action.`);
+  if (action.paginate !== false)
+    throw new Error(`Lookup “${lookup.action}” exige paginate false.`);
+  const allowed = meetsPresentationRequirement(action.requires, can);
+  const result = useListAction<Record<string, unknown>>(
+    action,
+    {},
+    { enabled: allowed },
+  );
+  if (!allowed) return <p role="alert">Sem acesso às opções deste campo.</p>;
+  const adapter =
+    lookup.format === undefined ? undefined : runtime?.options?.[lookup.format];
+  return (
+    <DataState
+      loading={result.isLoading}
+      error={result.isError ? (result.error ?? {}) : null}
+      onRetry={result.refetch}
+    >
+      <ActionFormField
+        name={name}
+        options={[
+          ...(lookup.prepend ?? []),
+          ...result.items.map(
+            (item) =>
+              adapter?.format(item) ?? {
+                value: String(item[lookup.value]),
+                label: String(item[lookup.label]),
+              },
+          ),
+        ]}
+      />
+    </DataState>
+  );
+}
+
+export function PresentationFormFields({
+  body,
+  action,
+  actions,
+  runtime,
+  can,
+  context,
+}: {
+  body: PresentationActionBody;
+  action: ActionContract;
+  actions: PresentationActionRegistry;
+  runtime?: PresentationCompositionRuntime;
+  can?: (permission: string) => boolean;
+  context: PresentationBindingContext;
+}) {
+  if (body.formGroups)
+    return (
+      <>
+        {body.formGroups.map((group, index) => (
+          <Surface key={index} as="fieldset" title={group.title}>
+            <PresentationFormFields
+              {...{ action, actions, runtime, can, context }}
+              body={{
+                ...body,
+                formGroups: undefined,
+                formFields: group.fields,
+              }}
+            />
+          </Surface>
+        ))}
+      </>
+    );
+  const fields = body.formFields ?? [
+    ...new Set([
+      ...Object.keys(action.kind === "form" ? (action.fields ?? {}) : {}),
+      ...Object.keys(body.fieldComponents ?? {}),
+    ]),
+  ];
+  return (
+    <>
+      {fields.map((name) =>
+        body.fieldComponents?.[name] !== undefined ? (
+          <Fragment key={name}>
+            {runtime!.fields![body.fieldComponents[name]!]!.render({
+              name,
+              context,
+            })}
+          </Fragment>
+        ) : body.lookups?.[name] === undefined ? (
+          <ActionFormField key={name} name={name} />
+        ) : (
+          <PresentationLookupField
+            key={name}
+            name={name}
+            lookup={body.lookups[name]!}
+            actions={actions}
+            runtime={runtime}
+            can={can}
+          />
+        ),
+      )}
+    </>
+  );
+}
+
+export function PresentationViewSections({
+  fields,
+  data,
+}: {
+  fields: NonNullable<PresentationActionBody["fields"]>;
+  data: unknown;
+}) {
+  const record = data as Record<string, unknown>;
+  return (
+    <div className="space-y-4">
+      {fields.map((field) => {
+        const value = record[field.key];
+        return (
+          <Surface key={field.key} as="section" level={3} title={field.label}>
+            {field.format === "html" ? (
+              <iframe
+                title={field.label}
+                sandbox=""
+                referrerPolicy="no-referrer"
+                srcDoc={`<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline'">${String(value ?? "")}`}
+                className="h-64 w-full rounded-md border bg-white"
+              />
+            ) : (
+              <pre className="whitespace-pre-wrap rounded-md border bg-muted/30 p-3 font-sans text-sm">
+                {value == null
+                  ? (field.empty ?? <EmptyValue compact />)
+                  : String(value)}
+              </pre>
+            )}
+          </Surface>
+        );
+      })}
+    </div>
+  );
+}