slice-machine-ui 1.22.2 → 1.22.3-alpha.chore-introduce-css-modules.1

package/lib/models/common/CustomType/tab.ts

@@ -11,8 +11,6 @@ import { Groups, GroupSM } from "../Group";
 
 import { SlicesSM, SliceZone } from "../Slices";
 
-import { SliceZone as SliceZoneOperations } from "./sliceZone";
-
 export const TabFields = t.array(
   t.type({
     key: t.string,
@@ -88,145 +86,15 @@ export const Tabs = {
   },
 };
 
-export type TabField = NestableWidget | UID | GroupSM;
-
-interface OrganisedFields {
-  fields: ReadonlyArray<{ key: string; value: TabField }>;
-  groups: ReadonlyArray<{ key: string; value: GroupSM }>;
-  sliceZone?: DynamicSlices;
-}
-
-export const Tab = {
-  init(id: string): TabSM {
-    return { key: id, value: [] };
-  },
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  updateSliceZone(tab: TabSM): Function {
-    return (mutate: (v: SlicesSM) => TabSM) => {
-      return {
-        ...tab,
-        sliceZone: tab.sliceZone && mutate(tab.sliceZone),
-      };
-    };
-  },
-  updateGroup(tab: TabSM, groupId: string) {
-    return (mutate: (v: GroupSM) => GroupSM): TabSM => {
-      return {
-        ...tab,
-        value: tab.value.map((field) => {
-          if (field.key === groupId && field.value.type === "Group") {
-            return {
-              key: groupId,
-              value: mutate(field.value),
-            };
-          }
-          return field;
-        }),
-      };
-    };
-  },
-  addWidget(tab: TabSM, id: string, widget: TabField): TabSM {
-    const elem = { key: id, value: widget };
-
-    return {
-      ...tab,
-      value: [...tab.value, elem],
-    };
-  },
-  replaceWidget(
-    tab: TabSM,
-    previousKey: string,
-    newKey: string,
-    value: TabField,
-  ): TabSM {
-    return {
-      ...tab,
-      value: tab.value.map((t) => {
-        if (t.key === previousKey) {
-          return {
-            key: newKey,
-            value,
-          };
-        }
-        return t;
-      }),
-    };
-  },
-  reorderWidget(tab: TabSM, start: number, end: number): TabSM {
-    const reorderedWidget: { key: string; value: TabField } | undefined =
-      tab.value[start];
-    // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
-    if (!reorderedWidget)
-      throw new Error(`Unable to reorder the widget at index ${start}.`);
-
-    const reorderedArea = tab.value.reduce<
-      Array<{ key: string; value: TabField }>
-    >((acc, widget, index: number) => {
-      const elems = [widget, reorderedWidget];
-      switch (index) {
-        case start:
-          return acc;
-        case end:
-          return [...acc, ...(end > start ? elems : elems.reverse())];
-        default:
-          return [...acc, widget];
-      }
-    }, []);
-    return {
-      ...tab,
-      value: reorderedArea,
-    };
-  },
-  removeWidget(tab: TabSM, id: string): TabSM {
-    const newTab = {
-      ...tab,
-      value: tab.value.filter((e) => e.key !== id),
-    };
-    return newTab;
-  },
-  createSliceZone(tab: TabSM, key: string): TabSM {
-    return {
-      ...tab,
-      sliceZone: SliceZoneOperations.createEmpty(key),
-    };
-  },
-  deleteSliceZone(tab: TabSM): TabSM {
-    const { sliceZone: _, ...restTab } = tab;
-
-    return restTab;
-  },
-
-  organiseFields(tabSM: TabSM) {
-    const { fields, groups } = tabSM.value.reduce<OrganisedFields>(
-      (acc: OrganisedFields, current: { key: string; value: TabField }) => {
-        switch (current.value.type) {
-          case "UID":
-            return acc;
-          case "Group":
-            return {
-              ...acc,
-              groups: [
-                ...acc.groups,
-                { key: current.key, value: current.value },
-              ],
-            };
-            return acc;
-          default:
-            return {
-              ...acc,
-              fields: [
-                ...acc.fields,
-                current as { key: string; value: TabField },
-              ],
-            };
-        }
-      },
-      { fields: [], groups: [] },
-    );
-    return {
-      fields,
-      groups,
-      sliceZone: tabSM.sliceZone,
-    };
+export const TabFieldsModel = {
+  fromSM(field: TabField): NestableWidget | UID | Group {
+    switch (field.type) {
+      case "Group":
+        return Groups.fromSM(field);
+      default:
+        return field;
+    }
   },
 };
+
+export type TabField = NestableWidget | UID | GroupSM;

package/lib/models/common/widgets/Group/ListItem/index.jsx

@@ -1,4 +1,5 @@
 import { Fragment, useState } from "react";
+import { flushSync } from "react-dom";
 
 import { DragDropContext, Droppable } from "react-beautiful-dnd";
 
@@ -21,7 +22,14 @@ import sliceBuilderArray from "@lib/models/common/widgets/sliceBuilderArray";
 import Hint from "@lib/builders/common/Zone/Card/components/Hints";
 
 import ListItem from "@components/ListItem";
-import useSliceMachineActions from "@src/modules/useSliceMachineActions";
+import { useCustomTypeState } from "@src/features/customTypes/customTypesBuilder/CustomTypeProvider";
+import { TabFieldsModel } from "@lib/models/common/CustomType";
+import {
+  addGroupField,
+  deleteGroupField,
+  reorderGroupField,
+  updateGroupField,
+} from "@src/domain/customType";
 
 /* eslint-disable */
 const CustomListItem = ({
@@ -40,12 +48,7 @@ const CustomListItem = ({
   const [selectMode, setSelectMode] = useState(false);
   const [newFieldData, setNewFieldData] = useState(null);
   const [editModalData, setEditModalData] = useState({ isOpen: false });
-  const {
-    addFieldIntoGroup,
-    deleteFieldIntoGroup,
-    replaceFieldIntoGroup,
-    reorderFieldIntoGroup,
-  } = useSliceMachineActions();
+  const { customType, setCustomType } = useCustomTypeState();
 
   const onSelectFieldType = (widgetTypeName) => {
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
@@ -68,8 +71,16 @@ const CustomListItem = ({
     // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-assignment
     const newWidget = widget.create(label);
 
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-argument
-    addFieldIntoGroup(tabId, groupItem.key, id, newWidget);
+    const newField = TabFieldsModel.fromSM(newWidget);
+    const newCustomType = addGroupField({
+      customType,
+      sectionId: tabId,
+      groupFieldId: groupItem.key,
+      newField,
+      newFieldId: id,
+    });
+
+    setCustomType(newCustomType);
   };
 
   const onSaveField = ({ apiId: previousKey, newKey, value }) => {
@@ -77,8 +88,18 @@ const CustomListItem = ({
     if (ensureWidgetTypeExistence(Widgets, value.type)) {
       return;
     }
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-argument
-    replaceFieldIntoGroup(tabId, groupItem.key, previousKey, newKey, value);
+
+    const newField = TabFieldsModel.fromSM(value);
+    const newCustomType = updateGroupField({
+      customType,
+      sectionId: tabId,
+      groupFieldId: groupItem.key,
+      previousFieldId: previousKey,
+      newFieldId: newKey,
+      newField,
+    });
+
+    setCustomType(newCustomType);
   };
 
   const onDragEnd = (result) => {
@@ -87,21 +108,37 @@ const CustomListItem = ({
       return;
     }
 
-    reorderFieldIntoGroup(
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-      tabId,
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-member-access
-      groupItem.key,
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-member-access
-      result.source.index,
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-member-access
-      result.destination.index,
-    );
+    const { source, destination } = result;
+    if (!destination) {
+      return;
+    }
+
+    const { index: sourceIndex } = source;
+    const { index: destinationIndex } = destination;
+
+    const newCustomType = reorderGroupField({
+      customType,
+      sectionId: tabId,
+      groupFieldId: groupItem.key,
+      sourceIndex,
+      destinationIndex,
+    });
+
+    // 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 onDeleteItem = (key) => {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
-    deleteFieldIntoGroup(tabId, groupItem.key, key);
+    const newCustomType = deleteGroupField({
+      customType,
+      sectionId: tabId,
+      groupFieldId: groupItem.key,
+      fieldId: key,
+    });
+
+    setCustomType(newCustomType);
   };
 
   const enterEditMode = (field) => {
@@ -172,6 +209,7 @@ const CustomListItem = ({
                             `data.${groupItem.key}.${key}`,
                           // eslint-disable-next-line @typescript-eslint/restrict-template-expressions, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/restrict-template-expressions, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/restrict-template-expressions
                           draggableId: `group-${groupItem.key}-${item.key}-${index}`,
+                          dataCy: `list-item-group-${groupItem.key}-${item.key}`,
                         };
 
                         const HintElement = (

package/out/404.html

@@ -1 +1 @@
-<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link rel="preload" href="/_next/static/css/1bbf650dfd37ce69.css" as="style"/><link rel="stylesheet" href="/_next/static/css/1bbf650dfd37ce69.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-2f903acb0cccbf9e.js" defer=""></script><script src="/_next/static/chunks/framework-cdccea7a52cc6e81.js" defer=""></script><script src="/_next/static/chunks/main-5e6780279ca21cb9.js" defer=""></script><script src="/_next/static/chunks/pages/_app-f88a66f6532a8e87.js" defer=""></script><script src="/_next/static/chunks/pages/_error-69b4f498bafdd188.js" defer=""></script><script src="/_next/static/3vLhj_JZ10e4rwC2sTZNQ/_buildManifest.js" defer=""></script><script src="/_next/static/3vLhj_JZ10e4rwC2sTZNQ/_ssgManifest.js" defer=""></script></head><body><div id="__next"></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"statusCode":404}},"page":"/_error","query":{},"buildId":"3vLhj_JZ10e4rwC2sTZNQ","runtimeConfig":{"sentryEnvironment":"production"},"nextExport":true,"isFallback":false,"gip":true,"scriptLoader":[]}</script></body></html>
+<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link rel="preload" href="/_next/static/css/538ecf581b0e7c11.css" as="style"/><link rel="stylesheet" href="/_next/static/css/538ecf581b0e7c11.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-2f903acb0cccbf9e.js" defer=""></script><script src="/_next/static/chunks/framework-cdccea7a52cc6e81.js" defer=""></script><script src="/_next/static/chunks/main-5e6780279ca21cb9.js" defer=""></script><script src="/_next/static/chunks/pages/_app-3bb7f58b43c87166.js" defer=""></script><script src="/_next/static/chunks/pages/_error-69b4f498bafdd188.js" defer=""></script><script src="/_next/static/QLcban0JdGEoFu6NgapR9/_buildManifest.js" defer=""></script><script src="/_next/static/QLcban0JdGEoFu6NgapR9/_ssgManifest.js" defer=""></script></head><body><div id="__next"></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"statusCode":404}},"page":"/_error","query":{},"buildId":"QLcban0JdGEoFu6NgapR9","runtimeConfig":{"sentryEnvironment":"alpha"},"nextExport":true,"isFallback":false,"gip":true,"scriptLoader":[]}</script></body></html>

package/out/_next/static/QLcban0JdGEoFu6NgapR9/_buildManifest.js

@@ -0,0 +1 @@
+self.__BUILD_MANIFEST=function(s,c,a,e,t,i,f,b,n,u,d,h,l,k,j,p,g,o,r){return{__rewrites:{beforeFiles:[],afterFiles:[],fallback:[]},"/":[a,j,p,"static/chunks/pages/index-64cfb8b0948ba8ef.js"],"/_error":["static/chunks/pages/_error-69b4f498bafdd188.js"],"/changelog":[s,e,"static/chunks/870-0c7a8a9622de78b7.js","static/chunks/pages/changelog-68d115a14f1423d7.js"],"/changes":[s,t,"static/chunks/8eec4907-b712959d9f984b68.js",i,"static/chunks/918-5bb55fb464e34768.js",c,b,"static/css/37153180c3b0dd66.css","static/chunks/pages/changes-1cf9e7888029f113.js"],"/custom-types":[a,j,p,"static/chunks/pages/custom-types-94b8f8dbf7727412.js"],"/custom-types/[customTypeId]":[s,n,u,d,h,e,f,i,l,g,c,a,k,o,r,"static/chunks/pages/custom-types/[customTypeId]-3f862ad6111a1fc0.js"],"/labs":["static/chunks/pages/labs-526bb7d60a1b90f4.js"],"/page-types/[pageTypeId]":[s,n,u,d,h,e,f,i,l,g,c,a,k,o,r,"static/chunks/pages/page-types/[pageTypeId]-d1ffca11c42f2603.js"],"/slices":[s,t,f,c,b,"static/css/f8eb526e10bc2441.css","static/chunks/pages/slices-7b09cb5130c63bb3.js"],"/slices/[lib]/[sliceName]/[variation]":[s,t,n,u,d,h,e,f,i,l,c,k,b,"static/css/b22c0750c14cc089.css","static/chunks/pages/slices/[lib]/[sliceName]/[variation]-73dd999915509965.js"],"/slices/[lib]/[sliceName]/[variation]/simulator":[t,"static/chunks/72585f70-28b4d7d5384b3703.js","static/chunks/18539003-7b2711e6c51d6fac.js","static/chunks/376-0ed5822f8afcaa7c.js","static/chunks/pages/slices/[lib]/[sliceName]/[variation]/simulator-897ca93c114a1435.js"],sortedPages:["/","/_app","/_error","/changelog","/changes","/custom-types","/custom-types/[customTypeId]","/labs","/page-types/[pageTypeId]","/slices","/slices/[lib]/[sliceName]/[variation]","/slices/[lib]/[sliceName]/[variation]/simulator"]}}("static/chunks/59b4e022-7a3b5554b806349f.js","static/chunks/25-8fedd33ad9b6de5b.js","static/chunks/731-501990ebe6a71b32.js","static/chunks/183-4feb6bb3eddbc768.js","static/chunks/c8eae200-966ce352f7b5d2b9.js","static/chunks/543-f8766685f7f451e2.js","static/chunks/50-cfc2514205b86001.js","static/chunks/286-ed90373e9a469944.js","static/chunks/f36c6662-03bb5e9d9aa0b0aa.js","static/chunks/4c744e84-e3161d754618373f.js","static/chunks/065a3ddb-9a38ca0d60f0bf2f.js","static/chunks/1cc2734a-2c5b6c0367fcde86.js","static/chunks/696-b12edad30a3617e5.js","static/chunks/318-541db69860d31138.js","static/chunks/727-15cf3f2fea9a37e5.js","static/css/be1f49e49a5aa7eb.css","static/chunks/474-5a072e6fac61f703.js","static/chunks/904-ccd8ca3368ce29fc.js","static/css/72465cc1225f28a2.css"),self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();

package/out/_next/static/chunks/065a3ddb-9a38ca0d60f0bf2f.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[461],{77245:function(c,t,h){h.d(t,{LhG:function(){return u}});var n=h(68281);function u(c){return(0,n.w_)({tag:"svg",attr:{viewBox:"0 0 24 24"},child:[{tag:"path",attr:{d:"M20 2H10c-1.103 0-2 .897-2 2v4H4c-1.103 0-2 .897-2 2v10c0 1.103.897 2 2 2h10c1.103 0 2-.897 2-2v-4h4c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2zM4 20V10h10l.002 10H4zm16-6h-4v-4c0-1.103-.897-2-2-2h-4V4h10v10z"}}]})(c)}}}]);