Merge pull request #7 from devitools/feat/slot-field-factory

feat(core,react-web): add slot() field factory for custom renderers

Author: wilcorrea

packages/core/src/fields/index.ts

@@ -10,5 +10,6 @@ export { CurrencyFieldDefinition, currency } from './currency'
 export { FileFieldDefinition, file, image } from './file'
 export { ListFieldDefinition, list } from './list'
 export { TreeFieldDefinition, tree } from './tree'
+export { SlotFieldDefinition, slot } from './slot'
 
 export type { TextKind } from './text'

packages/core/src/fields/slot.ts

@@ -0,0 +1,11 @@
+import { FieldDefinition } from './base'
+
+export class SlotFieldDefinition extends FieldDefinition<unknown> {
+  constructor(attrs: Record<string, unknown> = {}) {
+    super('slot', 'unknown', attrs)
+  }
+}
+
+export function slot(attrs?: Record<string, unknown>): SlotFieldDefinition {
+  return new SlotFieldDefinition(attrs)
+}

packages/core/src/index.ts

@@ -16,6 +16,7 @@ export {
   FileFieldDefinition, file, image,
   ListFieldDefinition, list,
   TreeFieldDefinition, tree,
+  SlotFieldDefinition, slot,
 } from './fields'
 export type { TextKind } from './fields'
 

packages/react-web/src/components/Form.tsx

@@ -1,4 +1,5 @@
 import { useCallback } from "react";
+import React from "react";
 import { useTranslation } from "react-i18next";
 import { useDataForm } from "@ybyra/react";
 import type { UseDataFormOptions } from "@ybyra/react";
@@ -10,16 +11,17 @@ import { ActionBar } from "./ActionBar";
 import { FieldsGrid as DefaultFieldsGrid } from "./defaults/FieldsGrid";
 import { DebugPanel } from "./defaults/DebugPanel";
 import { ds } from "../support/ds";
-import type { DataFormComponents } from "../types";
+import type { DataFormComponents, SlotRendererProps } from "../types";
 import "../renderers";
 
 interface DataFormProps extends UseDataFormOptions {
   debug?: boolean;
   components?: DataFormComponents;
   filler?: FillerRegistry;
+  slots?: Record<string, React.ComponentType<SlotRendererProps>>;
 }
 
-export function DataForm({ debug, components, filler, ...props }: DataFormProps) {
+export function DataForm({ debug, components, filler, slots, ...props }: DataFormProps) {
   const { t } = useTranslation();
   const theme = useTheme();
   const form = useDataForm({ ...props, translate: props.translate ?? t });
@@ -61,6 +63,7 @@ export function DataForm({ debug, components, filler, ...props }: DataFormProps)
                 <ResolvedFieldsGrid
                   fields={section.fields}
                   getFieldProps={form.getFieldProps}
+                  slots={slots}
                 />
               </GroupWrapper>
             );
@@ -77,6 +80,7 @@ export function DataForm({ debug, components, filler, ...props }: DataFormProps)
               <ResolvedFieldsGrid
                 fields={section.fields}
                 getFieldProps={form.getFieldProps}
+                slots={slots}
               />
             </div>
           );
@@ -90,6 +94,7 @@ export function DataForm({ debug, components, filler, ...props }: DataFormProps)
             <ResolvedFieldsGrid
               fields={section.fields}
               getFieldProps={form.getFieldProps}
+              slots={slots}
             />
           </div>
         );

packages/react-web/src/components/defaults/FieldsGrid.tsx

@@ -2,11 +2,30 @@ import { getRenderer } from "@ybyra/react";
 import { ds } from "../../support/ds";
 import type { FieldsGridProps } from "../../types";
 
-export function FieldsGrid({ fields, getFieldProps }: FieldsGridProps) {
+export function FieldsGrid({ fields, getFieldProps, slots }: FieldsGridProps) {
   return (
     <div style={{ display: "grid", gridTemplateColumns: "repeat(100, 1fr)" }}>
       {fields.map((field) => {
         if (field.proxy.hidden) return null;
+
+        const isSlot = field.config.component === "slot";
+        const SlotRenderer = isSlot ? slots?.[field.name] : undefined;
+
+        if (isSlot && !SlotRenderer) return null;
+
+        if (isSlot && SlotRenderer) {
+          const { value, proxy, scope, domain } = getFieldProps(field.name);
+          return (
+            <div
+              key={field.name}
+              style={{ gridColumn: `span ${field.proxy.width}` }}
+              {...ds(`field:${field.name}`)}
+            >
+              <SlotRenderer domain={domain} name={field.name} value={value} proxy={proxy} scope={scope} />
+            </div>
+          );
+        }
+
         const Renderer = getRenderer(field.config.component);
         if (!Renderer) return null;
         return (

packages/react-web/src/index.ts

@@ -24,6 +24,7 @@ export type {
   LoadingProps,
   DividerProps,
   DataFormComponents,
+  SlotRendererProps,
   PaginationProps,
   ColumnSelectorProps,
   EmptyStateProps,

packages/react-web/src/types.ts

@@ -1,6 +1,14 @@
 import type { ReactNode, ComponentType } from "react";
 import type { ResolvedAction, ResolvedField, UseDataFormReturn, ResolvedColumn } from "@ybyra/react";
-import type { PositionValue } from "@ybyra/core";
+import type { FieldProxy, PositionValue, ScopeValue } from "@ybyra/core";
+
+export interface SlotRendererProps {
+  domain: string;
+  name: string;
+  value: unknown;
+  proxy: FieldProxy;
+  scope: ScopeValue;
+}
 
 export interface ActionButtonProps {
   action: { name: string; config: { variant: string }; execute: () => void };
@@ -16,6 +24,7 @@ export interface ActionBarProps {
 export interface FieldsGridProps {
   fields: ResolvedField[];
   getFieldProps: UseDataFormReturn["getFieldProps"];
+  slots?: Record<string, ComponentType<SlotRendererProps>>;
 }
 
 export interface GroupWrapperProps {
@@ -35,6 +44,7 @@ export interface DataFormComponents {
   GroupWrapper?: ComponentType<GroupWrapperProps>;
   Loading?: ComponentType<LoadingProps>;
   Divider?: ComponentType<DividerProps>;
+  Slot?: ComponentType<SlotRendererProps>;
 }
 
 export interface PaginationProps {