slice-machine-ui 1.22.3-beta.1 → 1.22.3-beta.3

package/lib/builders/CustomTypeBuilder/TabZone/index.tsx

@@ -1,67 +1,74 @@
 import { Box, ErrorBoundary, ProgressCircle } from "@prismicio/editor-ui";
 import { FC, Suspense } from "react";
+import { flushSync } from "react-dom";
 import type { DropResult } from "react-beautiful-dnd";
-import { useSelector } from "react-redux";
 import type { AnyObjectSchema } from "yup";
 import { useRouter } from "next/router";
 
 import ctBuilderArray from "@lib/models/common/widgets/ctBuilderArray";
-import type {
-  CustomTypeSM,
-  TabField,
-  TabFields,
+import {
+  TabSM,
+  type TabField,
+  type TabFields,
+  CustomTypes,
+  TabFieldsModel,
 } from "@lib/models/common/CustomType";
-import type { SlicesSM } from "@lib/models/common/Slices";
+import type { AnyWidget } from "@lib/models/common/widgets/Widget";
 import { ensureDnDDestination, ensureWidgetTypeExistence } from "@lib/utils";
 import { List } from "@src/components/List";
-import useSliceMachineActions from "@src/modules/useSliceMachineActions";
-import type { SliceMachineStoreType } from "@src/redux/type";
 import { telemetry } from "@src/apiClient";
 import { transformKeyAccessor } from "@utils/str";
+import { useCustomTypeState } from "@src/features/customTypes/customTypesBuilder/CustomTypeProvider";
+import {
+  createSectionSliceZone,
+  deleteSectionSliceZone,
+  deleteSliceZoneSlice,
+  addField,
+  deleteField,
+  reorderField,
+  updateField,
+} from "@src/domain/customType";
 
 import * as Widgets from "../../../../lib/models/common/widgets/withGroup";
-import { selectCurrentPoolOfFields } from "../../../../src/modules/selectedCustomType";
-import type { Widget } from "../../../models/common/widgets/Widget";
 import EditModal from "../../common/EditModal";
 import Zone from "../../common/Zone";
 import SliceZone from "../SliceZone";
+import {
+  Group,
+  NestableWidget,
+  UID,
+} from "@prismicio/types-internal/lib/customtypes";
 
 interface TabZoneProps {
-  customType: CustomTypeSM;
   tabId: string;
-  sliceZone?: SlicesSM | null | undefined;
-  fields: TabFields;
 }
 
-const TabZone: FC<TabZoneProps> = ({
-  customType,
-  tabId,
-  fields,
-  sliceZone,
-}) => {
-  const {
-    deleteCustomTypeField,
-    addCustomTypeField,
-    reorderCustomTypeField,
-    replaceCustomTypeField,
-    createSliceZone,
-    deleteSliceZone,
-    deleteCustomTypeSharedSlice,
-  } = useSliceMachineActions();
+type PoolOfFields = ReadonlyArray<{ key: string; value: TabField }>;
 
-  const { query } = useRouter();
-
-  const { poolOfFields } = useSelector((store: SliceMachineStoreType) => ({
-    poolOfFields: selectCurrentPoolOfFields(store),
-  }));
+const TabZone: FC<TabZoneProps> = ({ tabId }) => {
+  const { customType, setCustomType } = useCustomTypeState();
+  const customTypeSM = CustomTypes.toSM(customType);
+  const sliceZone = customTypeSM.tabs.find((tab) => tab.key === tabId)
+    ?.sliceZone;
+  const fields: TabFields =
+    customTypeSM.tabs.find((tab) => tab.key === tabId)?.value ?? [];
 
-  // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
-  if (!poolOfFields) {
-    return null;
-  }
+  const { query } = useRouter();
+  const poolOfFields = customTypeSM.tabs.reduce<PoolOfFields>(
+    (acc: PoolOfFields, curr: TabSM) => {
+      return [...acc, ...curr.value];
+    },
+    [],
+  );
 
   const onDeleteItem = (fieldId: string) => {
-    deleteCustomTypeField(tabId, fieldId);
+    const newCustomType = deleteField({
+      customType,
+      fieldId,
+      sectionId: tabId,
+    });
+
+    setCustomType(newCustomType);
   };
 
   const onSaveNewField = ({
@@ -80,27 +87,67 @@ const TabZone: FC<TabZoneProps> = ({
     // @ts-expect-error We have to create a widget map or a service instead of using export name
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     const widget: Widget<TabField, AnyObjectSchema> = Widgets[widgetTypeName];
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-assignment
+    const field: TabField = widget.create(label);
+
+    if (
+      field.type === "Range" ||
+      field.type === "IntegrationFields" ||
+      field.type === "Separator"
+    ) {
+      throw new Error(`Unsupported Field Type: ${field.type}`);
+    }
+
+    const CurrentWidget: AnyWidget = Widgets[field.type];
+
+    try {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
+      CurrentWidget.schema.validateSync(field, { stripUnknown: false });
+    } catch (error) {
+      throw new Error(`Add field: Model is invalid for field "${field.type}".`);
+    }
+
+    const newField: NestableWidget | UID | Group = TabFieldsModel.fromSM(field);
+    const newCustomType = addField({
+      customType,
+      newField,
+      newFieldId: id,
+      sectionId: tabId,
+    });
+
+    setCustomType(newCustomType);
+
     void telemetry.track({
       event: "custom-type:field-added",
       id,
       name: customType.id,
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment
       type: widget.TYPE_NAME,
       zone: "static",
     });
-    addCustomTypeField(tabId, id, widget.create(label));
   };
 
   const onDragEnd = (result: DropResult) => {
     if (ensureDnDDestination(result)) {
       return;
     }
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
-    reorderCustomTypeField(
-      tabId,
-      result.source.index,
-      // @ts-expect-error We have to change the typeGuard above to cast properly the "result" property
-      result.destination.index,
-    );
+
+    const { source, destination } = result;
+    if (!destination) {
+      return;
+    }
+
+    const newCustomType = reorderField({
+      customType,
+      sourceIndex: source.index,
+      destinationIndex: destination.index,
+      sectionId: tabId,
+    });
+
+    // When removing redux and replacing it by a simple useState, react-beautiful-dnd (that is deprecated library) was making the fields flickering on reorder.
+    // The problem seems to come from the react non-synchronous way to handle our state update that didn't work well with the library.
+    // It's a hack and since it's used on an old pure JavaScript code with a deprecated library it will be removed when updating the UI of the fields.
+    flushSync(() => setCustomType(newCustomType));
   };
 
   const onSave = ({
@@ -117,19 +164,39 @@ const TabZone: FC<TabZoneProps> = ({
     if (ensureWidgetTypeExistence(Widgets, value.type)) {
       return;
     }
-    replaceCustomTypeField(tabId, previousKey, newKey, value);
+
+    const newField: NestableWidget | UID | Group = TabFieldsModel.fromSM(value);
+    const newCustomType = updateField({
+      customType,
+      previousFieldId: previousKey,
+      newFieldId: newKey,
+      newField,
+      sectionId: tabId,
+    });
+
+    setCustomType(newCustomType);
   };
 
   const onCreateSliceZone = () => {
-    createSliceZone(tabId);
+    const newCustomType = createSectionSliceZone(customType, tabId);
+
+    setCustomType(newCustomType);
   };
 
   const onDeleteSliceZone = () => {
-    deleteSliceZone(tabId);
+    const newCustomType = deleteSectionSliceZone(customType, tabId);
+
+    setCustomType(newCustomType);
   };
 
   const onRemoveSharedSlice = (sliceId: string) => {
-    deleteCustomTypeSharedSlice(tabId, sliceId);
+    const newCustomType = deleteSliceZoneSlice({
+      customType,
+      sectionId: tabId,
+      sliceId,
+    });
+
+    setCustomType(newCustomType);
   };
 
   return (
@@ -169,13 +236,13 @@ const TabZone: FC<TabZoneProps> = ({
                 // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-argument
                 `data${transformKeyAccessor(key)}`
               }
-              dataCy="ct-static-zone"
+              dataCy="static-zone-content"
               isRepeatableCustomType={customType.repeatable}
             />
           ) : undefined}
 
           <SliceZone
-            customType={customType}
+            customType={customTypeSM}
             // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
             tabId={tabId}
             // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment

package/lib/builders/CustomTypeBuilder/index.tsx

@@ -1,8 +1,7 @@
 import { DropdownMenuItem, Icon } from "@prismicio/editor-ui";
-import { type FC, useState } from "react";
+import { useState } from "react";
 import { useRouter } from "next/router";
 
-import type { CustomTypeSM } from "@lib/models/common/CustomType";
 import {
   Window,
   WindowFrame,
@@ -11,33 +10,35 @@ import {
   WindowTabsList,
   WindowTabsTrigger,
 } from "@src/components/Window";
-import useSliceMachineActions from "@src/modules/useSliceMachineActions";
+import { useCustomTypeState } from "@src/features/customTypes/customTypesBuilder/CustomTypeProvider";
+import { CustomTypes } from "@lib/models/common/CustomType";
+import {
+  createSection,
+  deleteSection,
+  renameSection,
+} from "@src/domain/customType";
 
 import CreateModal from "./TabModal/create";
 import DeleteModal from "./TabModal/delete";
 import UpdateModal from "./TabModal/update";
 import TabZone from "./TabZone";
 
-type CustomTypeBuilderProps = { customType: CustomTypeSM };
-
 type DialogState =
-  | { type: "CREATE_CUSTOM_TYPE" }
-  | { type: "UPDATE_CUSTOM_TYPE"; tabKey: string }
-  | { type: "DELETE_CUSTOM_TYPE"; tabKey: string }
+  | { type: "CREATE_CUSTOM_TYPE_TAB" }
+  | { type: "UPDATE_CUSTOM_TYPE_TAB"; tabKey: string }
+  | { type: "DELETE_CUSTOM_TYPE_TAB"; tabKey: string }
   | undefined;
 
-export const CustomTypeBuilder: FC<CustomTypeBuilderProps> = (props) => {
-  const { customType } = props;
-
-  const [tabValue, setTabValue] = useState(customType.tabs[0]?.key);
+export const CustomTypeBuilder = () => {
+  const { customType, setCustomType } = useCustomTypeState();
+  const customTypeSM = CustomTypes.toSM(customType);
+  const [tabValue, setTabValue] = useState(customTypeSM.tabs[0]?.key);
 
   const [dialog, setDialog] = useState<DialogState>();
-  const { createCustomTypeTab, updateCustomTypeTab, deleteCustomTypeTab } =
-    useSliceMachineActions();
 
   const { query } = useRouter();
   const sliceZoneEmpty =
-    customType.tabs.find((tab) => tab.key === tabValue)?.sliceZone?.value
+    customTypeSM.tabs.find((tab) => tab.key === tabValue)?.sliceZone?.value
       .length === 0;
 
   return (
@@ -45,20 +46,15 @@ export const CustomTypeBuilder: FC<CustomTypeBuilderProps> = (props) => {
       <Window style={sliceZoneEmpty ? { flexGrow: 1 } : undefined}>
         {customType.format === "page" ? <WindowFrame /> : undefined}
         {query.newPageType === "true" ? (
-          <TabZone
-            customType={customType}
-            fields={customType.tabs[0].value}
-            sliceZone={customType.tabs[0].sliceZone}
-            tabId={customType.tabs[0].key}
-          />
+          <TabZone tabId={customTypeSM.tabs[0].key} />
         ) : (
           <WindowTabs onValueChange={setTabValue} value={tabValue}>
             <WindowTabsList
               onAddNewTab={() => {
-                setDialog({ type: "CREATE_CUSTOM_TYPE" });
+                setDialog({ type: "CREATE_CUSTOM_TYPE_TAB" });
               }}
             >
-              {customType.tabs.map((tab) => (
+              {customTypeSM.tabs.map((tab) => (
                 <WindowTabsTrigger
                   key={tab.key}
                   menu={
@@ -66,7 +62,7 @@ export const CustomTypeBuilder: FC<CustomTypeBuilderProps> = (props) => {
                       <DropdownMenuItem
                         onSelect={() => {
                           setDialog({
-                            type: "UPDATE_CUSTOM_TYPE",
+                            type: "UPDATE_CUSTOM_TYPE_TAB",
                             tabKey: tab.key,
                           });
                         }}
@@ -76,10 +72,10 @@ export const CustomTypeBuilder: FC<CustomTypeBuilderProps> = (props) => {
                       </DropdownMenuItem>
                       <DropdownMenuItem
                         color="tomato"
-                        disabled={customType.tabs.length <= 1}
+                        disabled={customTypeSM.tabs.length <= 1}
                         onSelect={() => {
                           setDialog({
-                            type: "DELETE_CUSTOM_TYPE",
+                            type: "DELETE_CUSTOM_TYPE_TAB",
                             tabKey: tab.key,
                           });
                         }}
@@ -95,57 +91,58 @@ export const CustomTypeBuilder: FC<CustomTypeBuilderProps> = (props) => {
                 </WindowTabsTrigger>
               ))}
             </WindowTabsList>
-            {customType.tabs.map((tab) => (
+            {customTypeSM.tabs.map((tab) => (
               <WindowTabsContent key={tab.key} value={tab.key}>
-                <TabZone
-                  customType={customType}
-                  fields={tab.value}
-                  sliceZone={tab.sliceZone}
-                  tabId={tab.key}
-                />
+                <TabZone tabId={tab.key} />
               </WindowTabsContent>
             ))}
           </WindowTabs>
         )}
       </Window>
-      {dialog?.type === "CREATE_CUSTOM_TYPE" ? (
+      {dialog?.type === "CREATE_CUSTOM_TYPE_TAB" ? (
         <CreateModal
           close={() => {
             setDialog(undefined);
           }}
           isOpen
           onSubmit={({ id }) => {
-            createCustomTypeTab(id);
+            const newCustomType = createSection(customType, id);
+            setCustomType(newCustomType);
             setTabValue(id);
           }}
-          tabIds={customType.tabs.map((tab) => tab.key.toLowerCase())}
+          tabIds={customTypeSM.tabs.map((tab) => tab.key.toLowerCase())}
         />
       ) : undefined}
-      {dialog?.type === "UPDATE_CUSTOM_TYPE" ? (
+      {dialog?.type === "UPDATE_CUSTOM_TYPE_TAB" ? (
         <UpdateModal
           close={() => {
             setDialog(undefined);
           }}
+          initialTabKey={dialog.tabKey}
           isOpen
           onSubmit={({ id }) => {
-            updateCustomTypeTab(dialog.tabKey, id);
+            const newCustomType = renameSection(customType, dialog.tabKey, id);
+            setCustomType(newCustomType);
+
             if (tabValue === dialog.tabKey) setTabValue(id);
           }}
-          tabIds={customType.tabs
+          tabIds={customTypeSM.tabs
             .filter((tab) => tab.key !== dialog.tabKey)
             .map((tab) => tab.key.toLowerCase())}
         />
       ) : undefined}
-      {dialog?.type === "DELETE_CUSTOM_TYPE" ? (
+      {dialog?.type === "DELETE_CUSTOM_TYPE_TAB" ? (
         <DeleteModal
           close={() => {
             setDialog(undefined);
           }}
           isOpen
           onSubmit={() => {
-            deleteCustomTypeTab(dialog.tabKey);
+            const newCustomType = deleteSection(customType, dialog.tabKey);
+            setCustomType(newCustomType);
+
             if (tabValue === dialog.tabKey) {
-              const otherTabValue = customType.tabs.find(
+              const otherTabValue = customTypeSM.tabs.find(
                 (tab) => tab.key !== dialog.tabKey,
               )?.key;
               if (otherTabValue !== undefined) setTabValue(otherTabValue);

package/lib/builders/SliceBuilder/FieldZones/index.tsx

@@ -1,18 +1,24 @@
+import { FC } from "react";
+import { flushSync } from "react-dom";
+import { DropResult } from "react-beautiful-dnd";
+import { NestableWidget } from "@prismicio/types-internal/lib/customtypes";
+
 import { ensureDnDDestination } from "@lib/utils";
 import { transformKeyAccessor } from "@utils/str";
-
-import Zone from "../../common/Zone";
-import EditModal from "../../common/EditModal";
-
 import * as Widgets from "@lib/models/common/widgets";
 import sliceBuilderWidgetsArray from "@lib/models/common/widgets/sliceBuilderArray";
-
-import { DropResult } from "react-beautiful-dnd";
 import { List } from "@src/components/List";
-import useSliceMachineActions from "@src/modules/useSliceMachineActions";
-import { VariationSM, WidgetsArea } from "@lib/models/common/Slice";
-
-import { NestableWidget } from "@prismicio/types-internal/lib/customtypes";
+import { WidgetsArea } from "@lib/models/common/Slice";
+import { useSliceState } from "@src/features/slices/sliceBuilder/SliceBuilderProvider";
+import {
+  addField,
+  deleteField,
+  reorderField,
+  updateField,
+} from "@src/domain/slice";
+import Zone from "@lib/builders/common/Zone";
+import EditModal from "@lib/builders/common/EditModal";
+import { AnyWidget } from "@lib/models/common/widgets/Widget";
 
 const dataTipText = ` The non-repeatable zone
   is for fields<br/> that should appear once, like a<br/>
@@ -22,24 +28,18 @@ const dataTipText2 = `The repeatable zone is for a group<br/>
   of fields that you want to be able to repeat an<br/>
   indeterminate number of times, like FAQs`;
 
-type FieldZonesProps = {
-  variation: VariationSM;
-};
+const FieldZones: FC = () => {
+  const { slice, setSlice, variation } = useSliceState();
 
-const FieldZones: React.FunctionComponent<FieldZonesProps> = ({
-  variation,
-}) => {
-  const {
-    addSliceWidget,
-    replaceSliceWidget,
-    reorderSliceWidget,
-    removeSliceWidget,
-    updateSliceWidgetMock,
-    deleteSliceWidgetMock,
-  } = useSliceMachineActions();
   const _onDeleteItem = (widgetArea: WidgetsArea) => (key: string) => {
-    deleteSliceWidgetMock(variation.id, widgetArea, key);
-    removeSliceWidget(variation.id, widgetArea, key);
+    const newSlice = deleteField({
+      slice,
+      variationId: variation.id,
+      widgetArea,
+      fieldId: key,
+    });
+
+    setSlice(newSlice);
   };
 
   const _onSave =
@@ -48,30 +48,23 @@ const FieldZones: React.FunctionComponent<FieldZonesProps> = ({
       apiId: previousKey,
       newKey,
       value,
-      mockValue,
     }: {
       apiId: string;
       newKey: string;
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       value: any;
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      mockValue: any;
     }) => {
-      // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
-      if (mockValue) {
-        updateSliceWidgetMock(
-          variation.id,
-          widgetArea,
-          previousKey,
-          newKey,
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-          mockValue,
-        );
-      } else {
-        deleteSliceWidgetMock(variation.id, widgetArea, newKey);
-      }
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-      replaceSliceWidget(variation.id, widgetArea, previousKey, newKey, value);
+      const newSlice = updateField({
+        slice,
+        variationId: variation.id,
+        widgetArea,
+        previousFieldId: previousKey,
+        newFieldId: newKey,
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        newField: value,
+      });
+
+      setSlice(newSlice);
     };
 
   const _onSaveNewField =
@@ -96,24 +89,56 @@ const FieldZones: React.FunctionComponent<FieldZonesProps> = ({
         );
       }
 
-      addSliceWidget(
-        variation.id,
-        widgetArea,
-        id,
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
+      const newField = widget.create(label) as NestableWidget;
+
+      if (
+        newField.type === "Range" ||
+        newField.type === "IntegrationFields" ||
+        newField.type === "Separator"
+      ) {
+        throw new Error(`Unsupported Field Type: ${newField.type}`);
+      }
+
+      try {
+        const CurrentWidget: AnyWidget = Widgets[newField.type];
         // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
-        widget.create(label) as NestableWidget,
-      );
+        CurrentWidget.schema.validateSync(newField, { stripUnknown: false });
+      } catch (error) {
+        throw new Error(`Model is invalid for widget "${newField.type}".`);
+      }
+
+      const newSlice = addField({
+        slice,
+        variationId: variation.id,
+        widgetArea,
+        newFieldId: id,
+        newField,
+      });
+
+      setSlice(newSlice);
     };
 
   const _onDragEnd = (widgetArea: WidgetsArea) => (result: DropResult) => {
     if (ensureDnDDestination(result)) return;
 
-    reorderSliceWidget(
-      variation.id,
+    const { source, destination } = result;
+    if (!destination) {
+      return;
+    }
+
+    const newSlice = reorderField({
+      slice,
+      variationId: variation.id,
       widgetArea,
-      result.source.index,
-      result.destination?.index ?? undefined,
-    );
+      sourceIndex: source.index,
+      destinationIndex: destination.index,
+    });
+
+    // When removing redux and replacing it by a simple useState, react-beautiful-dnd (that is deprecated library) was making the fields flickering on reorder.
+    // The problem seems to come from the react non-synchronous way to handle our state update that didn't work well with the library.
+    // It's a hack and since it's used on an old pure JavaScript code with a deprecated library it will be removed when updating the UI of the fields.
+    flushSync(() => setSlice(newSlice));
   };
 
   return (
@@ -141,7 +166,7 @@ const FieldZones: React.FunctionComponent<FieldZonesProps> = ({
           // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
           `slice.primary${transformKeyAccessor(key)}`
         }
-        dataCy="slice-non-repeatable-zone"
+        dataCy="static-zone-content"
         isRepeatableCustomType={undefined}
       />
       <Zone