@multiplatform.one/backoffice 7.34.4 → 7.36.0

package/src/formBuilder/FieldPalette.tsx

@@ -0,0 +1,119 @@
+import {
+  Card,
+  Chip,
+  EmptyState,
+  Paragraph,
+  SizableText,
+  XStack,
+  YStack,
+} from "@multiplatform.one/components";
+import { Button, Chip as FilterChip, SearchInput } from "@multiplatform.one/forms";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { PlusIcon } from "@phosphor-icons/react";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
+import { fieldtypeCatalog } from "./fieldtypes";
+import type { BuilderPointerEvent } from "./useFormBuilderDrag";
+
+export function FieldPalette({
+  onAdd,
+  onPointerDown,
+}: {
+  onAdd: (fieldtype: string) => void;
+  onPointerDown: (fieldtype: string, event: BuilderPointerEvent) => void;
+}) {
+  const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const { knobProps } = useResolvedKnobs();
+  const iconSize = Number(knobProps.controlIcon.width);
+  const [search, setSearch] = useState("");
+  const [group, setGroup] = useState("all");
+  const groupOptions = [
+    { value: "all", label: t("formBuilder.groups.all", "All") },
+    { value: "standard", label: t("formBuilder.groups.standard", "Standard") },
+    { value: "layout", label: t("formBuilder.groups.layout", "Layout") },
+    { value: "advanced", label: t("formBuilder.groups.advanced", "Advanced") },
+  ];
+  const entries = fieldtypeCatalog.filter(
+    (entry) =>
+      (group === "all" || entry.group === group) &&
+      `${t(entry.labelKey, entry.label)} ${t(entry.descriptionKey, entry.description)}`
+        .toLowerCase()
+        .includes(search.toLowerCase()),
+  );
+  return (
+    <YStack {...knobProps.gap} minWidth={0}>
+      <XStack {...knobProps.gapSm} alignItems="center" minWidth={0}>
+        <SizableText {...knobProps.heading} flex={1}>
+          {t("formBuilder.fieldTypes", "Field types")}
+        </SizableText>
+        <Chip size="$2">
+          {t("formBuilder.typeCount", "{{count}} types", { count: entries.length })}
+        </Chip>
+      </XStack>
+      <SearchInput
+        label={t("formBuilder.search", "Search field types")}
+        value={search}
+        onChange={setSearch}
+      />
+      <YStack {...knobProps.gapSm} role="group" aria-label={t("formBuilder.group", "Field group")}>
+        <SizableText {...knobProps.label}>{t("formBuilder.group", "Field group")}</SizableText>
+        <XStack {...knobProps.gapSm} flexWrap="wrap" minWidth={0}>
+          {groupOptions.map((option) => (
+            <FilterChip
+              key={option.value}
+              size="$3"
+              variant="outline"
+              selected={group === option.value}
+              onPress={() => setGroup(option.value)}
+            >
+              {option.label}
+            </FilterChip>
+          ))}
+        </XStack>
+      </YStack>
+      {entries.length === 0 ? (
+        <EmptyState size="$2" title={t("formBuilder.noTypes", "No matching field types")} />
+      ) : null}
+      {Array.from({ length: Math.ceil(entries.length / 2) }, (_, row) => (
+        <XStack key={row} {...knobProps.gapSm} minWidth={0}>
+          {entries.slice(row * 2, row * 2 + 2).map((entry) => (
+            <Card
+              key={entry.fieldtype}
+              tier="elevated"
+              flex={1}
+              minWidth={0}
+              alignItems="flex-start"
+              data-fb-palette={entry.fieldtype}
+              onPress={(event) => {
+                const target = event.target as unknown as HTMLElement;
+                if (target.closest?.("button, [role=button]")) return;
+                onAdd(entry.fieldtype);
+              }}
+              {...{
+                onPointerDown: (event: BuilderPointerEvent) =>
+                  onPointerDown(entry.fieldtype, event),
+              }}
+            >
+              <Button
+                size="$2"
+                chromeless
+                maxWidth="100%"
+                icon={<PlusIcon size={iconSize} />}
+                aria-label={t("formBuilder.addType", "Add {{type}} field", {
+                  type: t(entry.labelKey, entry.label),
+                })}
+                onPress={() => onAdd(entry.fieldtype)}
+              >
+                {t(entry.labelKey, entry.label)}
+              </Button>
+              <Paragraph {...knobProps.body} color="$color11" numberOfLines={2} maxWidth="100%">
+                {t(entry.descriptionKey, entry.description)}
+              </Paragraph>
+            </Card>
+          ))}
+        </XStack>
+      ))}
+    </YStack>
+  );
+}

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>
+  );
+}