feat: add table field

prismicio · Jan 21, 2025 · 657ce47 · 657ce47
1 parent 73433f1
commit 657ce47
Show file tree

Hide file tree

Showing 7 changed files with 117 additions and 17 deletions.
diff --git a/packages/slice-machine/src/domain/fields.ts b/packages/slice-machine/src/domain/fields.ts
@@ -130,6 +130,15 @@ export const numberField: NestableField = {
   type: "Number",
 };
 
+export const richTextField: NestableField = {
+  name: "Rich Text",
+  description: "Text with formatting options.",
+  icon: "textFields",
+  thumbnail:
+    "https://res.cloudinary.com/dmtf1daqp/image/upload/v1721295530/DEV_TOOLS/SM_FIELDS/Type_Rich_Text_fxdyar.png",
+  type: "StructuredText",
+};
+
 export const selectField: NestableField = {
   name: "Select",
   description: "A dropdown of options.",
@@ -139,13 +148,13 @@ export const selectField: NestableField = {
   type: "Select",
 };
 
-export const richTextField: NestableField = {
-  name: "Rich Text",
-  description: "Text with formatting options.",
-  icon: "textFields",
+export const tableField: NestableField = {
+  name: "Table",
+  description: "A structured table.",
+  icon: "table",
   thumbnail:
-    "https://res.cloudinary.com/dmtf1daqp/image/upload/v1721295530/DEV_TOOLS/SM_FIELDS/Type_Rich_Text_fxdyar.png",
-  type: "StructuredText",
+    "https://res.cloudinary.com/dmtf1daqp/image/upload/v1737381854/FIELDS_SM/Table_f47jnq.png",
+  type: "Table",
 };
 
 export const textField: NestableField = {
@@ -177,6 +186,7 @@ export const nestableFields: NestableField[] = [
   LinkToMediaField,
   colorField,
   dateField,
+  tableField,
   timestampField,
   embedField,
   geoPointField,

diff --git a/packages/slice-machine/src/legacy/lib/builders/CustomTypeBuilder/TabZone/index.tsx b/packages/slice-machine/src/legacy/lib/builders/CustomTypeBuilder/TabZone/index.tsx
@@ -20,6 +20,7 @@ import {
   updateField,
 } from "@/domain/customType";
 import { ErrorBoundary } from "@/ErrorBoundary";
+import { useTableFieldExperiment } from "@/features/builder/useTableFieldExperiment";
 import { useCustomTypeState } from "@/features/customTypes/customTypesBuilder/CustomTypeProvider";
 import {
   CustomTypes,
@@ -53,6 +54,7 @@ const widgetsArray = [
   Widgets.Number,
   Widgets.Color,
   Widgets.Date,
+  Widgets.Table,
   Widgets.Embed,
   Widgets.Timestamp,
   Widgets.GeoPoint,
@@ -76,6 +78,11 @@ type OnSaveFieldProps = {
 };
 
 const TabZone: FC<TabZoneProps> = ({ tabId }) => {
+  const tableFieldExperiment = useTableFieldExperiment();
+  const maybeFilteredWidgetsArray = tableFieldExperiment.eligible
+    ? widgetsArray
+    : widgetsArray.filter((widget) => widget.TYPE_NAME !== "Table");
+
   const { customType, setCustomType } = useCustomTypeState();
   const customTypeSM = CustomTypes.toSM(customType);
 
@@ -258,7 +265,7 @@ const TabZone: FC<TabZoneProps> = ({ tabId }) => {
             poolOfFieldsToCheck={poolOfFields}
             showHints={true}
             EditModal={EditModal}
-            widgetsArray={widgetsArray}
+            widgetsArray={maybeFilteredWidgetsArray}
             onDeleteItem={onDeleteItem}
             onSave={onCreateOrSave}
             onDragEnd={onDragEnd}

diff --git a/packages/slice-machine/src/legacy/lib/builders/SliceBuilder/FieldZones/index.tsx b/packages/slice-machine/src/legacy/lib/builders/SliceBuilder/FieldZones/index.tsx
@@ -24,6 +24,7 @@ import {
   reorderField,
   updateField,
 } from "@/domain/slice";
+import { useTableFieldExperiment } from "@/features/builder/useTableFieldExperiment";
 import { useSliceState } from "@/features/slices/sliceBuilder/SliceBuilderProvider";
 import EditModal from "@/legacy/lib/builders/common/EditModal";
 import Zone from "@/legacy/lib/builders/common/Zone";
@@ -56,6 +57,7 @@ const itemsWidgetsArray = [
   Widgets.Number,
   Widgets.Color,
   Widgets.Date,
+  Widgets.Table,
   Widgets.Embed,
   Widgets.Timestamp,
   Widgets.GeoPoint,
@@ -79,6 +81,11 @@ const FieldZones: FC = () => {
     setIsDeleteRepeatableZoneDialogOpen,
   ] = useState(false);
 
+  const tableFieldExperiment = useTableFieldExperiment();
+  const maybeFilteredItemsWidgetsArray = tableFieldExperiment.eligible
+    ? itemsWidgetsArray
+    : itemsWidgetsArray.filter((widget) => widget.TYPE_NAME !== "Table");
+
   // We won't show the Repeatable Zone if no items are configured.
   const hasItems = Boolean(
     variation.items && Object.keys(variation.items).length > 0,
@@ -244,7 +251,7 @@ const FieldZones: FC = () => {
           isRepeatable
           title="Repeatable Zone"
           dataTip={dataTipText2}
-          widgetsArray={itemsWidgetsArray}
+          widgetsArray={maybeFilteredItemsWidgetsArray}
           // eslint-disable-next-line @typescript-eslint/ban-ts-comment
           fields={variation.items}
           EditModal={EditModal}

diff --git a/packages/slice-machine/src/legacy/lib/models/common/widgets/Group/index.tsx b/packages/slice-machine/src/legacy/lib/models/common/widgets/Group/index.tsx
@@ -1,6 +1,7 @@
 import { type DroppableStateSnapshot } from "react-beautiful-dnd";
 
 import { useNestedGroupExperiment } from "@/features/builder/useNestedGroupExperiment";
+import { useTableFieldExperiment } from "@/features/builder/useTableFieldExperiment";
 import { type Item } from "@/legacy/components/ListItem";
 import { type TabField } from "@/legacy/lib/models/common/CustomType";
 import { type GroupSM } from "@/legacy/lib/models/common/Group";
@@ -20,6 +21,7 @@ const widgetsArray = [
   Widgets.Number,
   Widgets.Color,
   Widgets.Date,
+  Widgets.Table,
   Widgets.Embed,
   Widgets.Timestamp,
   Widgets.GeoPoint,
@@ -54,9 +56,17 @@ const hintItemName = "item";
 
 const GroupListItem = (props: GroupListItemProps<GroupSM>): JSX.Element => {
   const nestedGroupExperiment = useNestedGroupExperiment();
-  const maybeFilteredWidgetsArray = nestedGroupExperiment.eligible
+  let maybeFilteredWidgetsArray = nestedGroupExperiment.eligible
     ? widgetsArray
     : widgetsArray.filter((widget) => widget.CUSTOM_NAME !== "NestedGroup");
+
+  const tableFieldExperiment = useTableFieldExperiment();
+  maybeFilteredWidgetsArray = tableFieldExperiment.eligible
+    ? maybeFilteredWidgetsArray
+    : maybeFilteredWidgetsArray.filter(
+        (widget) => widget.TYPE_NAME !== "Table",
+      );
+
   return (
     <CustomListItem
       Widgets={Widgets}

diff --git a/packages/slice-machine/src/legacy/lib/models/common/widgets/NestedGroup/index.tsx b/packages/slice-machine/src/legacy/lib/models/common/widgets/NestedGroup/index.tsx
@@ -1,3 +1,4 @@
+import { useTableFieldExperiment } from "@/features/builder/useTableFieldExperiment";
 import { type NestedGroupSM } from "@/legacy/lib/models/common/Group";
 import { type GroupListItemProps } from "@/legacy/lib/models/common/widgets/Group";
 import { createGroupWidget } from "@/legacy/lib/models/common/widgets/Group/createGroupWidget";
@@ -14,6 +15,7 @@ const widgetsArray = [
   Widgets.Number,
   Widgets.Color,
   Widgets.Date,
+  Widgets.Table,
   Widgets.Embed,
   Widgets.Timestamp,
   Widgets.GeoPoint,
@@ -23,14 +25,21 @@ const widgetsArray = [
 
 const hintItemName = "subItem";
 
-const NestedGroupListItem = (props: GroupListItemProps<NestedGroupSM>) => (
-  <CustomListItem
-    Widgets={Widgets}
-    widgetsArray={widgetsArray}
-    hintBase={hintItemName}
-    {...props}
-  />
-);
+const NestedGroupListItem = (props: GroupListItemProps<NestedGroupSM>) => {
+  const tableFieldExperiment = useTableFieldExperiment();
+  const maybeFilteredWidgetsArray = tableFieldExperiment.eligible
+    ? widgetsArray
+    : widgetsArray.filter((widget) => widget.TYPE_NAME !== "Table");
+
+  return (
+    <CustomListItem
+      Widgets={Widgets}
+      widgetsArray={maybeFilteredWidgetsArray}
+      hintBase={hintItemName}
+      {...props}
+    />
+  );
+};
 
 export const NestedGroupWidget = createGroupWidget({
   schemaTypeRegex: /^NestedGroup$/,

diff --git a/packages/slice-machine/src/legacy/lib/models/common/widgets/Table/index.ts b/packages/slice-machine/src/legacy/lib/models/common/widgets/Table/index.ts
@@ -0,0 +1,55 @@
+import { Table } from "@prismicio/types-internal/lib/customtypes/widgets/nestable";
+import { FaTable } from "react-icons/fa";
+import * as yup from "yup";
+
+import { DefaultFields } from "../../../../forms/defaults";
+import { Widget } from "../Widget";
+
+/** : {
+  "type" : "Table",
+  "config" : {
+    "label" : "Gable's Fabled Table"
+  }
+} */
+
+const FormFields = {
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
+  label: DefaultFields.label,
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
+  id: DefaultFields.id,
+};
+
+const schema = yup.object().shape({
+  type: yup
+    .string()
+    .matches(/^Table$/, { excludeEmptyString: true })
+    .required(),
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
+  config: yup
+    .object()
+    .shape({
+      label: yup.string(),
+    })
+    .required()
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+    .default(undefined)
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+    .noUnknown(true),
+});
+
+const Meta = {
+  icon: FaTable,
+};
+
+export const TableWidget: Widget<Table, typeof schema> = {
+  create: (label: string) => ({
+    type: "Table",
+    config: {
+      label,
+    },
+  }),
+  FormFields,
+  TYPE_NAME: "Table",
+  schema,
+  Meta,
+};
diff --git a/packages/slice-machine/src/legacy/lib/models/common/widgets/nonGroupWidgets.ts b/packages/slice-machine/src/legacy/lib/models/common/widgets/nonGroupWidgets.ts
@@ -10,6 +10,7 @@ import { LinkToMediaWidget } from "./LinkToMedia";
 import { NumberWidget } from "./Number";
 import { SelectWidget } from "./Select";
 import { StructuredTextWidget } from "./StructuredText";
+import { TableWidget } from "./Table";
 import { TextWidget } from "./Text";
 import { TimestampWidget } from "./Timestamp";
 import { UIDWidget } from "./UID";
@@ -27,6 +28,7 @@ export const NonGroupWidgets = {
   Number: NumberWidget,
   Select: SelectWidget,
   StructuredText: StructuredTextWidget,
+  Table: TableWidget,
   Text: TextWidget,
   Timestamp: TimestampWidget,
   UID: UIDWidget,