slice-machine-ui 2.2.2-alpha.lg-nested-group-snippets.1 → 2.2.2-beta.1

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

@@ -1,4 +1,3 @@
-import { GroupFieldType } from "@prismicio/types-internal/lib/customtypes/widgets";
 import { Fragment, useState } from "react";
 import { DragDropContext, Droppable } from "react-beautiful-dnd";
 import { flushSync } from "react-dom";
@@ -18,17 +17,16 @@ import Hint from "@/legacy/lib/builders/common/Zone/Card/components/Hints";
 import NewField from "@/legacy/lib/builders/common/Zone/Card/components/NewField";
 import { findWidgetByConfigOrType } from "@/legacy/lib/builders/utils";
 import { Groups } from "@/legacy/lib/models/common/Group";
+import * as Widgets from "@/legacy/lib/models/common/widgets";
+import groupBuilderWidgetsArray from "@/legacy/lib/models/common/widgets/groupBuilderArray";
 import { ensureDnDDestination } from "@/legacy/lib/utils";
 import { transformKeyAccessor } from "@/legacy/lib/utils/str";
 import { getContentTypeForTracking } from "@/utils/getContentTypeForTracking";
 
 /* eslint-disable */
-export const CustomListItem = ({
+const CustomListItem = ({
   tabId,
   widget,
-  Widgets,
-  widgetsArray,
-  hintBase,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   parentSnapshot,
   showHints,
@@ -88,7 +86,7 @@ export const CustomListItem = ({
       group: Groups.fromSM(groupItem.value),
       previousFieldId: previousKey,
       newFieldId: newKey,
-      field: value.type === GroupFieldType ? Groups.fromSM(value) : value,
+      field: value,
     });
 
     saveItem({
@@ -217,8 +215,6 @@ export const CustomListItem = ({
                           key: item.key,
                           enterEditMode,
                           deleteItem: onDeleteItem,
-                          saveItem: onSaveField,
-                          showHints,
                           renderFieldAccessor: (key) =>
                             `item${transformKeyAccessor(item.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
@@ -236,25 +232,13 @@ export const CustomListItem = ({
                             isRepeatable={isRepeatable}
                             renderHintBase={({ item }) =>
                               // eslint-disable-next-line @typescript-eslint/restrict-template-expressions, @typescript-eslint/no-unsafe-member-access
-                              `${hintBase}${transformKeyAccessor(item.key)}`
+                              `item${transformKeyAccessor(item.key)}`
                             }
-                            hintItemName={widget.hintItemName}
                             Widgets={Widgets}
                             // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
                             typeName={widget.CUSTOM_NAME || widget.TYPE_NAME}
                           />
                         );
-
-                        if (widget.CustomListItem) {
-                          const { CustomListItem } = widget;
-                          return (
-                            <CustomListItem
-                              {...props}
-                              HintElement={HintElement}
-                            />
-                          );
-                        }
-
                         return (
                           <ListItem {...props} HintElement={HintElement} />
                         );
@@ -286,7 +270,7 @@ export const CustomListItem = ({
         data={{ isOpen: selectMode }}
         close={() => setSelectMode(false)}
         onSelect={onSelectFieldType}
-        widgetsArray={widgetsArray}
+        widgetsArray={groupBuilderWidgetsArray}
       />
       <EditModal
         data={editModalData}
@@ -298,4 +282,6 @@ export const CustomListItem = ({
     </Fragment>
   );
 };
+
+export default CustomListItem;
 /* eslint-enable */

package/src/legacy/lib/models/common/widgets/Group/index.ts

@@ -0,0 +1,44 @@
+import { MdPlaylistAdd } from "react-icons/md";
+import * as yup from "yup";
+
+import { GroupSM } from "@/legacy/lib/models/common/Group";
+
+import { Widget } from "../Widget";
+import Form, { FormFields } from "./Form";
+import CustomListItem from "./ListItem";
+
+const Meta = {
+  icon: MdPlaylistAdd,
+  title: "Group",
+  description: "A repeatable set of fields",
+};
+
+const schema = yup.object().shape({
+  type: yup
+    .string()
+    .matches(/^Group$/, { excludeEmptyString: true })
+    .required(),
+  config: yup.object().shape({
+    fields: yup.array(),
+    label: yup.string(),
+    placeholder: yup.string(),
+    repeat: yup.boolean().optional(),
+  }),
+});
+
+export const GroupWidget: Widget<GroupSM, typeof schema> = {
+  Meta,
+  Form,
+  FormFields,
+  schema,
+  create: (label: string) => ({
+    type: "Group",
+    config: {
+      label,
+      repeat: true,
+      fields: [],
+    },
+  }),
+  CustomListItem,
+  TYPE_NAME: "Group",
+};

package/src/legacy/lib/models/common/widgets/Widget.ts

@@ -3,9 +3,8 @@ import { IconType } from "react-icons";
 import { AnyObjectSchema } from "yup";
 
 import { TabField } from "@/legacy/lib/models/common/CustomType";
-import { GroupSM, NestedGroupSM } from "@/legacy/lib/models/common/Group";
 
-interface WidgetBase<F extends TabField, S extends AnyObjectSchema> {
+export interface Widget<F extends TabField, S extends AnyObjectSchema> {
   TYPE_NAME: FieldType;
   create: (label: string) => F;
   Meta: {
@@ -24,13 +23,5 @@ interface WidgetBase<F extends TabField, S extends AnyObjectSchema> {
   prepareInitialValues?: (props: F["config"]) => F["config"];
 }
 
-export type Widget<F extends TabField, S extends AnyObjectSchema> = F extends
-  | GroupSM
-  | NestedGroupSM
-  ? WidgetBase<F, S> & {
-      hintItemName: string;
-    }
-  : WidgetBase<F, S>;
-
 // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-explicit-any, @typescript-eslint/no-explicit-any
 export type AnyWidget = Widget<any, any>;

package/src/legacy/lib/models/common/widgets/ctBuilderArray.ts

@@ -0,0 +1,20 @@
+import * as Widgets from "./withGroup";
+
+export default [
+  Widgets.UID,
+  Widgets.Group,
+  Widgets.StructuredText,
+  Widgets.Image,
+  Widgets.Link,
+  Widgets.LinkToMedia,
+  Widgets.ContentRelationship,
+  Widgets.Select,
+  Widgets.Boolean,
+  Widgets.Date,
+  Widgets.Timestamp,
+  Widgets.Embed,
+  Widgets.Number,
+  Widgets.GeoPoint,
+  Widgets.Color,
+  Widgets.Text,
+];

package/src/legacy/lib/models/common/widgets/groupBuilderArray.ts

@@ -0,0 +1,18 @@
+import * as Widgets from ".";
+
+export default [
+  Widgets.StructuredText,
+  Widgets.Image,
+  Widgets.Link,
+  Widgets.LinkToMedia,
+  Widgets.ContentRelationship,
+  Widgets.Select,
+  Widgets.Boolean,
+  Widgets.Date,
+  Widgets.Timestamp,
+  Widgets.Embed,
+  Widgets.Number,
+  Widgets.GeoPoint,
+  Widgets.Color,
+  Widgets.Text,
+];

package/src/legacy/lib/models/common/widgets/index.ts

@@ -1,9 +1,33 @@
-import { GroupWidget as Group } from "./Group";
-import { NestedGroupWidget as NestedGroup } from "./NestedGroup";
-import { NonGroupWidgets } from "./nonGroupWidgets";
+import { BooleanWidget } from "./Boolean";
+import { ColorWidget } from "./Color";
+import { ContentRelationshipWidget } from "./ContentRelationship";
+import { DateWidget } from "./Date";
+import { EmbedWidget } from "./Embed";
+import { GeoPointWidget } from "./GeoPoint";
+import { ImageWidget } from "./Image";
+import { LinkWidget } from "./Link";
+import { LinkToMediaWidget } from "./LinkToMedia";
+import { NumberWidget } from "./Number";
+import { SelectWidget } from "./Select";
+import { StructuredTextWidget } from "./StructuredText";
+import { TextWidget } from "./Text";
+import { TimestampWidget } from "./Timestamp";
+import { UIDWidget } from "./UID";
 
-export const Widgets = {
-  Group,
-  NestedGroup,
-  ...NonGroupWidgets,
+export {
+  BooleanWidget as Boolean,
+  ColorWidget as Color,
+  ContentRelationshipWidget as ContentRelationship,
+  DateWidget as Date,
+  EmbedWidget as Embed,
+  GeoPointWidget as GeoPoint,
+  ImageWidget as Image,
+  LinkWidget as Link,
+  LinkToMediaWidget as LinkToMedia,
+  NumberWidget as Number,
+  SelectWidget as Select,
+  StructuredTextWidget as StructuredText,
+  TextWidget as Text,
+  TimestampWidget as Timestamp,
+  UIDWidget as UID,
 };

package/src/legacy/lib/models/common/widgets/sliceBuilderArray.ts

@@ -0,0 +1,19 @@
+import * as Widgets from "./withGroup";
+
+export default [
+  Widgets.Group,
+  Widgets.StructuredText,
+  Widgets.Image,
+  Widgets.Link,
+  Widgets.LinkToMedia,
+  Widgets.ContentRelationship,
+  Widgets.Select,
+  Widgets.Boolean,
+  Widgets.Date,
+  Widgets.Timestamp,
+  Widgets.Embed,
+  Widgets.Number,
+  Widgets.GeoPoint,
+  Widgets.Color,
+  Widgets.Text,
+];

package/src/legacy/lib/models/common/widgets/withGroup.ts

@@ -0,0 +1,2 @@
+export * from ".";
+export { GroupWidget as Group } from "./Group";

package/test/lib/builders/buildersUtils.test.ts

@@ -1,7 +1,7 @@
 import { describe, expect, test } from "vitest";
 
 import { findWidgetByConfigOrType } from "@/legacy/lib/builders/utils";
-import { Widgets } from "@/legacy/lib/models/common/widgets";
+import * as Widgets from "@/legacy/lib/models/common/widgets/withGroup";
 
 const dumbConfig = {
   label: "",

package/test/lib/models/common/widgets/index.test.ts

@@ -7,7 +7,7 @@ import {
   CustomTypes,
   CustomTypeSM,
 } from "@/legacy/lib/models/common/CustomType";
-import { NonGroupWidgets as Widgets } from "@/legacy/lib/models/common/widgets/nonGroupWidgets";
+import * as Widgets from "@/legacy/lib/models/common/widgets";
 
 const widgetEntries = Object.entries(Widgets);