@multiplatform.one/backoffice 7.34.3 → 7.35.0

package/src/formBuilder/FieldPropertiesPanel.tsx

@@ -0,0 +1,213 @@
+import {
+  ConfirmDialog,
+  EmptyState,
+  SizableText,
+  Text,
+  YStack,
+} from "@multiplatform.one/components";
+import { Button, Checkbox, Input, Select, TextArea } from "@multiplatform.one/forms";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
+import { fieldtypeCatalog, holdsValue, optionsHint } from "./fieldtypes";
+import {
+  canDeleteField,
+  findField,
+  removeColumn,
+  removeField,
+  removeSection,
+  removeTab,
+  updateBreak,
+  updateField,
+  type BuilderDocField,
+  type BuilderLayout,
+  type FormBuilderMode,
+} from "./model";
+
+export type BuilderErrors = Record<string, Partial<Record<keyof BuilderDocField, string>>>;
+
+export function FieldPropertiesPanel({
+  layout,
+  selection,
+  mode,
+  errors,
+  onChange,
+}: {
+  layout: BuilderLayout;
+  selection?: string;
+  mode: FormBuilderMode;
+  errors: BuilderErrors;
+  onChange: (layout: BuilderLayout) => void;
+}) {
+  const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const { knobProps } = useResolvedKnobs();
+  const [confirm, setConfirm] = useState(false);
+  const field = selection ? findField(layout, selection) : undefined;
+  const tab = layout.tabs.find((node) => node.key === selection);
+  const section = layout.tabs
+    .flatMap((node) => node.sections)
+    .find((node) => node.key === selection);
+  const column = layout.tabs
+    .flatMap((node) => node.sections.flatMap((s) => s.columns))
+    .find((node) => node.key === selection);
+  const node = field ?? tab ?? section ?? column;
+  if (!node)
+    return (
+      <EmptyState
+        size="$2"
+        title={t("formBuilder.selectField", "Select a field to edit its properties")}
+      />
+    );
+  const df = node.df;
+  const error = errors[node.key] ?? {};
+  const update = (patch: Partial<BuilderDocField>) =>
+    onChange(field ? updateField(layout, node.key, patch) : updateBreak(layout, node.key, patch));
+  const remove = () =>
+    onChange(
+      field
+        ? removeField(layout, node.key)
+        : tab
+          ? removeTab(layout, node.key)
+          : section
+            ? removeSection(layout, node.key)
+            : removeColumn(layout, node.key),
+    );
+  const deletable = !field || canDeleteField(field, mode);
+  const removable =
+    field ||
+    (tab
+      ? layout.tabs.length > 1
+      : section
+        ? layout.tabs.length > 1 || layout.tabs[0].sections.length > 1
+        : layout.tabs.some((t) =>
+            t.sections.some(
+              (s) => s.columns.length > 1 && s.columns.some((c) => c.key === selection),
+            ),
+          ));
+  const hint = df ? optionsHint(df.fieldtype) : undefined;
+  return (
+    <YStack {...knobProps.gap} minWidth={0} testID="form-builder-properties">
+      <SizableText {...knobProps.heading}>
+        {field
+          ? t("formBuilder.properties", "Field properties")
+          : tab
+            ? t("formBuilder.tabProperties", "Tab properties")
+            : section
+              ? t("formBuilder.sectionProperties", "Section properties")
+              : t("formBuilder.columnProperties", "Column properties")}
+      </SizableText>
+      {field ? (
+        <YStack {...knobProps.gapSm} minWidth={0}>
+          <Text {...knobProps.label} numberOfLines={1}>
+            {field.df.label || field.df.fieldname}
+          </Text>
+          <Text {...knobProps.body} color="$color11" numberOfLines={1}>
+            {field.df.fieldname}
+          </Text>
+        </YStack>
+      ) : null}
+      <Input
+        label={t("formBuilder.label", "Label")}
+        value={df?.label ?? ""}
+        onChangeText={(label) => update({ label })}
+        error={error.label ?? (!field ? error.fieldname : undefined)}
+      />
+      {field ? (
+        <>
+          <Input
+            label={t("formBuilder.fieldname", "Fieldname")}
+            value={field.df.fieldname}
+            readOnly={!field.isNew}
+            onChangeText={(fieldname) => update({ fieldname })}
+            error={error.fieldname}
+          />
+          <Select
+            label={t("formBuilder.fieldType", "Field Type")}
+            value={field.df.fieldtype}
+            options={fieldtypeCatalog.map((entry) => ({
+              value: entry.fieldtype,
+              label: t(entry.labelKey, entry.label),
+            }))}
+            onChange={(value) => update({ fieldtype: String(value) })}
+            error={error.fieldtype}
+          />
+          {hint ? (
+            <TextArea
+              label={t("formBuilder.optionsLabel", "Options")}
+              helperText={t(hint.key, hint.default)}
+              value={String(df?.options ?? "")}
+              onChange={(options) => update({ options })}
+              error={error.options}
+            />
+          ) : null}
+          {holdsValue(field.df.fieldtype) ? (
+            <Input
+              label={t("formBuilder.default", "Default")}
+              value={String(df?.default ?? "")}
+              onChangeText={(value) => update({ default: value })}
+              error={error.default}
+            />
+          ) : null}
+          <TextArea
+            label={t("formBuilder.description", "Description")}
+            value={String(df?.description ?? "")}
+            onChange={(description) => update({ description })}
+            error={error.description}
+          />
+          <YStack {...knobProps.gapSm}>
+            <SizableText {...knobProps.label}>
+              {t("formBuilder.behaviour", "Behaviour")}
+            </SizableText>
+            {holdsValue(field.df.fieldtype) ? (
+              <>
+                <Checkbox
+                  label={t("formBuilder.mandatory", "Mandatory")}
+                  checked={!!df?.reqd}
+                  onChange={(value) => update({ reqd: value ? 1 : 0 })}
+                />
+                <Checkbox
+                  label={t("formBuilder.readOnly", "Read Only")}
+                  checked={!!df?.read_only}
+                  onChange={(value) => update({ read_only: value ? 1 : 0 })}
+                />
+                <Checkbox
+                  label={t("formBuilder.inListView", "In List View")}
+                  checked={!!df?.in_list_view}
+                  onChange={(value) => update({ in_list_view: value ? 1 : 0 })}
+                />
+              </>
+            ) : null}
+            <Checkbox
+              label={t("formBuilder.hidden", "Hidden")}
+              checked={!!df?.hidden}
+              onChange={(value) => update({ hidden: value ? 1 : 0 })}
+            />
+          </YStack>
+        </>
+      ) : null}
+      {removable ? (
+        <Button
+          error={deletable}
+          outlined
+          onPress={() => (deletable ? setConfirm(true) : update({ hidden: 1 }))}
+        >
+          {deletable ? t("formBuilder.delete", "Delete") : t("formBuilder.hide", "Hide")}
+        </Button>
+      ) : null}
+      <ConfirmDialog
+        open={confirm}
+        onOpenChange={setConfirm}
+        title={t("formBuilder.deleteTitle", "Remove this form item?")}
+        body={
+          field
+            ? t("formBuilder.deleteFieldBody", "This field will be removed when you save.")
+            : t("formBuilder.deleteBreakBody", "Fields will move into the neighbouring layout.")
+        }
+        confirmLabel={t("formBuilder.delete", "Delete")}
+        destructive
+        onConfirm={remove}
+      />
+    </YStack>
+  );
+}

package/src/formBuilder/FormBuilderCanvas.tsx

@@ -0,0 +1,468 @@
+import {
+  Card,
+  Chip,
+  ConfirmDialog,
+  DropdownMenu,
+  EmptyState,
+  LIFT_SCALE,
+  SizableText,
+  ScrollView,
+  SortableHandle,
+  Tabs,
+  Text,
+  VisuallyHidden,
+  XStack,
+  YStack,
+  isWeb,
+  type DropdownMenuEntry,
+} from "@multiplatform.one/components";
+import { Button } from "@multiplatform.one/forms";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { DotsThreeIcon, PlusIcon, WarningCircleIcon } from "@phosphor-icons/react";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
+import {
+  addColumn,
+  addSection,
+  addTab,
+  canDeleteField,
+  fieldLocation,
+  fieldsFromLayout,
+  insertField,
+  newFieldFromType,
+  moveFieldBy,
+  moveFieldToSection,
+  removeColumn,
+  removeField,
+  removeSection,
+  updateField,
+  type BuilderField,
+  type BuilderLayout,
+  type FormBuilderMode,
+} from "./model";
+import type { BuilderErrors } from "./FieldPropertiesPanel";
+import type { BuilderPointerEvent, FormBuilderDrag } from "./useFormBuilderDrag";
+
+export function FormBuilderCanvas({
+  layout,
+  activeTab,
+  selection,
+  stacked,
+  mode,
+  errors,
+  drag,
+  onChange,
+  onTab,
+  onSelect,
+  onAdd,
+}: {
+  layout: BuilderLayout;
+  activeTab: string;
+  selection?: string;
+  stacked: boolean;
+  mode: FormBuilderMode;
+  errors: BuilderErrors;
+  drag: FormBuilderDrag;
+  onChange: (layout: BuilderLayout) => void;
+  onTab: (key: string) => void;
+  onSelect: (key: string) => void;
+  onAdd: () => void;
+}) {
+  const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const { knobProps } = useResolvedKnobs();
+  const iconSize = Number(knobProps.controlIcon.width);
+  const [deleteKey, setDeleteKey] = useState<string>();
+  const tab = layout.tabs.find((node) => node.key === activeTab) ?? layout.tabs[0];
+  const sectionLabel = (label?: string) =>
+    label || t("formBuilder.untitledSection", "Untitled section");
+  const fieldTitle = (field: BuilderField) => field.df.label || field.df.fieldname;
+  function fieldMenu(field: BuilderField): DropdownMenuEntry[] {
+    const location = fieldLocation(layout, field.key);
+    if (!location) return [];
+    return [
+      {
+        key: "edit",
+        label: t("formBuilder.editProperties", "Edit properties"),
+        onSelect: () => onSelect(field.key),
+      },
+      {
+        key: "up",
+        label: t("formBuilder.moveUp", "Move up"),
+        onSelect: () => onChange(moveFieldBy(layout, field.key, -1)),
+      },
+      {
+        key: "down",
+        label: t("formBuilder.moveDown", "Move down"),
+        onSelect: () => onChange(moveFieldBy(layout, field.key, 1)),
+      },
+      ...layout.tabs
+        .flatMap((item) => item.sections)
+        .filter((section) => section.key !== location.sectionKey)
+        .map((section) => ({
+          key: section.key,
+          label: t("formBuilder.moveToSection", "Move to section: {{section}}", {
+            section: sectionLabel(section.df?.label),
+          }),
+          onSelect: () => {
+            const next = moveFieldToSection(layout, field.key, section.key);
+            onChange(next);
+            const nextLocation = fieldLocation(next, field.key);
+            if (nextLocation) onTab(nextLocation.tabKey);
+          },
+        })),
+      {
+        key: "remove",
+        label: canDeleteField(field, mode)
+          ? t("formBuilder.delete", "Delete")
+          : t("formBuilder.hide", "Hide"),
+        onSelect: () =>
+          canDeleteField(field, mode)
+            ? setDeleteKey(field.key)
+            : onChange(updateField(layout, field.key, { hidden: 1 })),
+      },
+    ];
+  }
+  function renderFieldCard(field: BuilderField) {
+    return (
+      <Card
+        minWidth={0}
+        tier="elevated"
+        {...(selection === field.key ? { borderColor: "$accentColor" } : undefined)}
+        onPress={(event) => {
+          const target = event.target as unknown as HTMLElement;
+          if (isWeb && target.closest?.("button, [role=button], [data-sortable-handle]")) return;
+          if (!drag.suppressClick.current) onSelect(field.key);
+        }}
+      >
+        <XStack {...knobProps.gapSm} alignItems="center" minWidth={0}>
+          {isWeb ? (
+            <SortableHandle
+              itemId={field.key}
+              label={fieldTitle(field)}
+              dragging={drag.drag?.field.key === field.key}
+              onPointerDown={(event) =>
+                drag.fieldPointerDown(field.key, event as BuilderPointerEvent)
+              }
+              onKeyDown={(event) => drag.keyDown(field.key, event)}
+            />
+          ) : null}
+          <YStack flex={1} minWidth={0} {...knobProps.gapSm}>
+            <XStack {...knobProps.gapSm} alignItems="center" minWidth={0}>
+              <Text {...knobProps.label} numberOfLines={1} flexShrink={1}>
+                {fieldTitle(field)}
+              </Text>
+              {field.df.reqd ? (
+                <Text
+                  {...knobProps.label}
+                  color="$red10"
+                  aria-label={t("formBuilder.required", "Required")}
+                >
+                  *
+                </Text>
+              ) : null}
+            </XStack>
+            <XStack {...knobProps.gapSm} flexWrap="wrap" minWidth={0} alignItems="center">
+              <Chip size="$2">{field.df.fieldtype}</Chip>
+              <Text {...knobProps.body} color="$color11" numberOfLines={1} flexShrink={1}>
+                {field.df.fieldname}
+              </Text>
+              {field.df.hidden ? <Chip size="$2">{t("formBuilder.hidden", "Hidden")}</Chip> : null}
+              {field.df.read_only ? (
+                <Chip size="$2">{t("formBuilder.readOnly", "Read Only")}</Chip>
+              ) : null}
+            </XStack>
+          </YStack>
+          {errors[field.key] ? (
+            <WarningCircleIcon
+              size={iconSize}
+              aria-label={t("formBuilder.fieldError", "Field needs attention")}
+            />
+          ) : null}
+          <YStack flexShrink={0}>
+            <DropdownMenu items={fieldMenu(field)}>
+              <Button
+                size="$2"
+                chromeless
+                icon={<DotsThreeIcon size={iconSize} />}
+                aria-label={t("formBuilder.fieldMenu", "Menu for {{field}}", {
+                  field: fieldTitle(field),
+                })}
+              />
+            </DropdownMenu>
+          </YStack>
+        </XStack>
+      </Card>
+    );
+  }
+  return (
+    <YStack
+      flex={1}
+      minWidth={0}
+      minHeight={0}
+      {...knobProps.gap}
+      testID="form-builder-canvas"
+      {...{
+        onClickCapture: (event: { target: HTMLElement; preventDefault: () => void }) => {
+          if (event.target.closest?.("[data-sortable-handle]")) event.preventDefault();
+        },
+      }}
+    >
+      <Tabs
+        value={tab.key}
+        onChange={onTab}
+        items={layout.tabs.map((item, index) => ({
+          value: item.key,
+          label:
+            item.df?.label ||
+            (index === 0
+              ? t("formBuilder.details", "Details")
+              : t("formBuilder.untitledTab", "Untitled tab")),
+        }))}
+      />
+      <XStack {...knobProps.gapSm} flexWrap="wrap">
+        <Button
+          size="$2"
+          outlined
+          icon={<PlusIcon size={iconSize} />}
+          onPress={() => {
+            const next = addTab(layout);
+            onChange(next);
+            onTab(next.tabs.at(-1)!.key);
+            onSelect(next.tabs.at(-1)!.key);
+          }}
+        >
+          {t("formBuilder.addTab", "Add tab")}
+        </Button>
+        <Button size="$2" onPress={() => onSelect(tab.key)}>
+          {t("formBuilder.tabProperties", "Tab properties")}
+        </Button>
+        <Button
+          size="$2"
+          outlined
+          onPress={() => {
+            const next = addSection(layout, tab.key);
+            onChange(next);
+            onSelect(next.tabs.find((item) => item.key === tab.key)!.sections.at(-1)!.key);
+          }}
+        >
+          {t("formBuilder.addSection", "Add section")}
+        </Button>
+      </XStack>
+      <ScrollView
+        flex={1}
+        minHeight={0}
+        minWidth={0}
+        ref={(node) => {
+          if (isWeb)
+            drag.scrollRef.current = ((
+              node as unknown as { getScrollableNode?: () => HTMLElement }
+            )?.getScrollableNode?.() ?? node) as unknown as HTMLElement | null;
+        }}
+      >
+        <YStack {...knobProps.gapLg} minWidth={0} flexShrink={0}>
+          {fieldsFromLayout(layout).length === 0 ? (
+            <EmptyState
+              size="$2"
+              title={t("formBuilder.emptyTitle", "This form has no fields")}
+              description={t(
+                "formBuilder.emptyDescription",
+                "Add a field to start building the form.",
+              )}
+              action={<Button onPress={onAdd}>{t("formBuilder.addField", "Add field")}</Button>}
+            />
+          ) : null}
+          {tab.sections.map((section) => (
+            <Card
+              key={section.key}
+              tier="content"
+              data-fb-section={section.key}
+              minWidth={0}
+              flexShrink={0}
+            >
+              <XStack alignItems="center" {...knobProps.gapSm} minWidth={0}>
+                <SizableText
+                  {...knobProps.heading}
+                  flex={1}
+                  minWidth={0}
+                  numberOfLines={1}
+                  {...(!section.df?.label ? { color: "$color11" } : undefined)}
+                >
+                  {sectionLabel(section.df?.label)}
+                </SizableText>
+                <Chip size="$2">
+                  {t("formBuilder.fieldCount", "{{count}} fields", {
+                    count: section.columns.reduce((n, column) => n + column.fields.length, 0),
+                  })}
+                </Chip>
+                <YStack flexShrink={0}>
+                  <DropdownMenu
+                    items={[
+                      {
+                        key: "section-properties",
+                        label: t("formBuilder.sectionProperties", "Section properties"),
+                        onSelect: () => onSelect(section.key),
+                      },
+                      ...section.columns.map((column, index) => ({
+                        key: column.key,
+                        label: t(
+                          "formBuilder.numberedColumnProperties",
+                          "Column {{number}} properties",
+                          { number: index + 1 },
+                        ),
+                        onSelect: () => onSelect(column.key),
+                      })),
+                      {
+                        key: "add-column",
+                        label: t("formBuilder.addColumn", "Add column"),
+                        onSelect: () => {
+                          const next = addColumn(layout, section.key);
+                          onChange(next);
+                        },
+                      },
+                      ...(section.columns.length > 1
+                        ? [
+                            {
+                              key: "remove-column",
+                              label: t("formBuilder.removeColumn", "Remove column"),
+                              onSelect: () =>
+                                onChange(
+                                  removeColumn(
+                                    layout,
+                                    section.columns.find((column) => column.key === selection)
+                                      ?.key ?? section.columns.at(-1)!.key,
+                                  ),
+                                ),
+                            },
+                          ]
+                        : []),
+                      {
+                        key: "add-section",
+                        label: t("formBuilder.addSectionBelow", "Add section below"),
+                        onSelect: () => onChange(addSection(layout, tab.key, section.key)),
+                      },
+                      ...(layout.tabs.length > 1 || tab.sections.length > 1
+                        ? [
+                            {
+                              key: "remove-section",
+                              label: t("formBuilder.removeSection", "Remove section"),
+                              onSelect: () => onChange(removeSection(layout, section.key)),
+                            },
+                          ]
+                        : []),
+                    ]}
+                  >
+                    <Button
+                      size="$2"
+                      chromeless
+                      icon={<DotsThreeIcon size={iconSize} />}
+                      aria-label={t("formBuilder.sectionMenu", "Menu for section {{section}}", {
+                        section: sectionLabel(section.df?.label),
+                      })}
+                    />
+                  </DropdownMenu>
+                </YStack>
+              </XStack>
+              <YStack
+                flexDirection={stacked ? "column" : "row"}
+                {...knobProps.gap}
+                minWidth={0}
+                data-fb-columns=""
+                data-fb-stacked={String(stacked)}
+              >
+                {section.columns.map((column, columnIndex) => (
+                  <YStack
+                    key={column.key}
+                    flex={stacked ? undefined : 1}
+                    flexShrink={0}
+                    minWidth={0}
+                    {...knobProps.gapSm}
+                    data-fb-column={column.key}
+                  >
+                    {column.fields.map((field, index) => (
+                      <YStack
+                        key={field.key}
+                        data-fb-field={field.key}
+                        data-fb-fieldname={field.df.fieldname}
+                        data-fb-selected={String(selection === field.key)}
+                        minWidth={0}
+                        flexShrink={0}
+                        y={drag.offset(column.key, index)}
+                        opacity={drag.drag?.field.key === field.key && !drag.drag.palette ? 0 : 1}
+                        transition={knobProps.transition}
+                      >
+                        {renderFieldCard(field)}
+                      </YStack>
+                    ))}
+                    <YStack minWidth={0} data-fb-dropzone={column.key}>
+                      <Button
+                        size="$2"
+                        outlined
+                        icon={<PlusIcon size={iconSize} />}
+                        aria-label={t("formBuilder.addFieldToColumn", "Add field to {{column}}", {
+                          column: t(
+                            "formBuilder.columnPosition",
+                            "{{section}}, column {{number}}",
+                            {
+                              section: sectionLabel(section.df?.label),
+                              number: columnIndex + 1,
+                            },
+                          ),
+                        })}
+                        onPress={() => {
+                          const inserted = insertField(layout, newFieldFromType(layout, "Data"), {
+                            columnId: column.key,
+                            index: column.fields.length,
+                          });
+                          onChange(inserted.layout);
+                          onSelect(inserted.key);
+                        }}
+                      >
+                        {t("formBuilder.addFieldHere", "Add field")}
+                      </Button>
+                    </YStack>
+                  </YStack>
+                ))}
+              </YStack>
+            </Card>
+          ))}
+        </YStack>
+      </ScrollView>
+      <VisuallyHidden>
+        <Text {...knobProps.body} role="status" aria-live="polite" aria-atomic="true">
+          {drag.announcement}
+        </Text>
+      </VisuallyHidden>
+      {isWeb && drag.drag ? (
+        <YStack
+          data-fb-overlay=""
+          position="fixed"
+          top={0}
+          left={0}
+          x={drag.drag.x}
+          y={drag.drag.y}
+          width={drag.drag.width}
+          pointerEvents="none"
+          zIndex={1000}
+          transition={drag.drag.mode === "pointer" ? "none" : knobProps.transition}
+          aria-hidden
+          {...{ inert: true }}
+        >
+          <YStack scale={LIFT_SCALE}>{renderFieldCard(drag.drag.field)}</YStack>
+        </YStack>
+      ) : null}
+      <ConfirmDialog
+        open={!!deleteKey}
+        onOpenChange={(open) => {
+          if (!open) setDeleteKey(undefined);
+        }}
+        title={t("formBuilder.deleteTitle", "Remove this form item?")}
+        confirmLabel={t("formBuilder.delete", "Delete")}
+        destructive
+        onConfirm={() => {
+          if (deleteKey) onChange(removeField(layout, deleteKey));
+        }}
+      />
+    </YStack>
+  );
+}