slice-machine-ui 2.2.2-beta.8 → 2.3.0

package/src/features/onboarding/content.tsx

@@ -0,0 +1,99 @@
+import { Text } from "@prismicio/editor-ui";
+
+import type {
+  OnboardingStep,
+  OnboardingStepContentDefinition,
+  OnboardingStepType,
+} from "@/features/onboarding/types";
+
+export const onboardingSteps: OnboardingStep[] = [
+  {
+    id: "addSlice",
+    title: "Add Slices",
+    description: "Add slices to your page type.",
+  },
+  {
+    id: "codePage",
+    title: "Code your page",
+    description: "Build your page's structure",
+  },
+  {
+    id: "pushModels",
+    title: "Push Your Page",
+    description: "Push to your Page Builder.",
+  },
+  {
+    id: "createContent",
+    title: "Create content",
+    description: "Create engaging content.",
+  },
+  {
+    id: "renderPage",
+    title: "Render your page",
+    description: "Render your page on localhost.",
+  },
+];
+
+type GetOnboardingStepsContentProps = {
+  repositoryUrl: string;
+};
+
+export const getOnboardingStepsContent = ({
+  repositoryUrl,
+}: GetOnboardingStepsContentProps): Record<
+  OnboardingStepType,
+  OnboardingStepContentDefinition
+> => ({
+  addSlice: {
+    videoUrl:
+      "https://res.cloudinary.com/dmtf1daqp/video/upload/v1700213517/IN-APP-GUIDE-SM/ADD_SLICE.mp4",
+    content: () => (
+      <Text>Use slice templates and add them to your page type.</Text>
+    ),
+  },
+  codePage: {
+    videoUrl:
+      "https://res.cloudinary.com/dmtf1daqp/video/upload/v1700213517/IN-APP-GUIDE-SM/CODE_SNIP.mp4",
+    content: () => (
+      <Text>
+        If you don't already have a page component, copy-paste the page snippets
+        provided in your page type to create one.
+      </Text>
+    ),
+  },
+  pushModels: {
+    videoUrl:
+      "https://res.cloudinary.com/dmtf1daqp/video/upload/v1700213517/IN-APP-GUIDE-SM/PUSH.mp4",
+    content: () => (
+      <Text>
+        You have just created some models, but you can't use them yet. First,
+        you must push them to the Page Builder. The Page Builder is where you
+        create content. Go head — push your models.
+      </Text>
+    ),
+  },
+  createContent: {
+    videoUrl:
+      "https://res.cloudinary.com/dmtf1daqp/video/upload/v1700213517/IN-APP-GUIDE-SM/PREVIEW.mp4",
+    content: () => (
+      <Text>
+        Open your{" "}
+        <Text href={repositoryUrl} underline>
+          Page Builder
+        </Text>
+        , create a page, add slices, save, and publish. Then, come back here.
+      </Text>
+    ),
+  },
+  renderPage: {
+    videoUrl:
+      "https://res.cloudinary.com/dmtf1daqp/video/upload/v1700213517/IN-APP-GUIDE-SM/WRITE.mp4",
+    content: () => (
+      <Text>
+        To render the page, run your project in your terminal and visit the page
+        on localhost (e.g.{" "}
+        <Text component="code">localhost:3000/example-page</Text>).
+      </Text>
+    ),
+  },
+});

package/src/features/onboarding/types.ts

@@ -0,0 +1,32 @@
+import { z } from "zod";
+
+export const onboardingStepStatusesSchema = z.object({
+  addSlice: z.boolean(),
+  codePage: z.boolean(),
+  pushModels: z.boolean(),
+  createContent: z.boolean(),
+  renderPage: z.boolean(),
+});
+
+export type OnboardingStepStatuses = z.infer<
+  typeof onboardingStepStatusesSchema
+>;
+
+export type OnboardingStepType = keyof OnboardingStepStatuses;
+
+export type OnboardingStep = {
+  id: OnboardingStepType;
+  title: string;
+  description: string;
+};
+
+export type OnboardingStepContentDefinition = {
+  title?: string;
+  content: () => JSX.Element;
+  videoUrl: string;
+};
+
+export type OnboardingStepContent = Record<
+  OnboardingStepType,
+  OnboardingStepContentDefinition
+>;

package/src/features/onboarding/useOnboardingExperiment.ts

@@ -0,0 +1,6 @@
+import { useExperimentVariant } from "@/hooks/useExperimentVariant";
+
+export const useOnboardingExperiment = () => {
+  const variant = useExperimentVariant("slice-machine-onboarding");
+  return { eligible: variant?.value === "on" };
+};

package/src/hooks/usePersistedState.ts

@@ -1,20 +1,37 @@
 import { Dispatch, SetStateAction, useEffect, useState } from "react";
+import { ZodType, ZodTypeDef } from "zod";
 
 type PersistedState<T> = [T, Dispatch<SetStateAction<T>>];
 
 const SLICE_MACHINE_STORAGE_PREFIX = "slice-machine";
 
+type UsePersistedStateOptions<T> = {
+  schema?: ZodType<T, ZodTypeDef, unknown>;
+};
+
+export function usePersistedState<T>(
+  key: string,
+): PersistedState<T | undefined>;
 export function usePersistedState<T>(
   key: string,
   defaultValue: T,
-): PersistedState<T> {
+  options?: UsePersistedStateOptions<T>,
+): PersistedState<T>;
+export function usePersistedState<T>(
+  key: string,
+  defaultValue?: T,
+  options?: UsePersistedStateOptions<T>,
+): PersistedState<T | undefined> {
+  const { schema } = options ?? {};
   const computedKey = `${SLICE_MACHINE_STORAGE_PREFIX}_${key}`;
 
-  const [value, setValue] = useState<T>(() => {
+  const [value, setValue] = useState<T | undefined>(() => {
     try {
       const value = localStorage.getItem(computedKey);
 
-      return value !== null ? (JSON.parse(value) as T) : defaultValue;
+      if (value == null) return defaultValue;
+      if (!schema) return JSON.parse(value) as T;
+      return schema.parse(JSON.parse(value));
     } catch (error) {
       console.warn(`Error reading localStorage key “${computedKey}”:`, error);
 

package/src/legacy/components/Navigation/index.tsx

@@ -17,6 +17,7 @@ import { ErrorBoundary } from "@/ErrorBoundary";
 import { CUSTOM_TYPES_CONFIG } from "@/features/customTypes/customTypesConfig";
 import { CUSTOM_TYPES_MESSAGES } from "@/features/customTypes/customTypesMessages";
 import { MasterSliceLibraryPreviewModal } from "@/features/masterSliceLibrary/SliceLibraryPreviewModal";
+import { OnboardingGuide } from "@/features/onboarding/OnboardingGuide";
 import { useGitIntegrationExperiment } from "@/features/settings/git/useGitIntegrationExperiment";
 import { useMarketingContent } from "@/hooks/useMarketingContent";
 import { useRepositoryInformation } from "@/hooks/useRepositoryInformation";
@@ -123,6 +124,7 @@ const Navigation: FC = () => {
       </ErrorBoundary>
 
       <SideNavList position="bottom">
+        <OnboardingGuide />
         {masterSliceLibrary !== undefined && (
           <SideNavListItem>
             <MasterSliceLibraryPreviewModal

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

@@ -45,21 +45,22 @@ import SliceZone from "../SliceZone";
 
 const widgetsArray = [
   Widgets.UID,
-  Widgets.Group,
-  Widgets.StructuredText,
   Widgets.Image,
+  Widgets.Text,
+  Widgets.StructuredText,
   Widgets.Link,
-  Widgets.LinkToMedia,
-  Widgets.ContentRelationship,
   Widgets.Select,
   Widgets.Boolean,
+  Widgets.Number,
+  Widgets.Color,
   Widgets.Date,
-  Widgets.Timestamp,
   Widgets.Embed,
-  Widgets.Number,
+  Widgets.Timestamp,
   Widgets.GeoPoint,
-  Widgets.Color,
-  Widgets.Text,
+  Widgets.ContentRelationship,
+  Widgets.LinkToMedia,
+  Widgets.Group,
+  Widgets.NestedGroup,
 ];
 
 interface TabZoneProps {
@@ -260,7 +261,6 @@ const TabZone: FC<TabZoneProps> = ({ tabId }) => {
               }
               testId="static-zone-content"
               isRepeatableCustomType={customType.repeatable}
-              emptyStateActionTestId="add-Static-field"
             />
           ) : undefined}
 

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

@@ -41,20 +41,20 @@ const dataTipText2 = `The repeatable zone is for a group<br/>
   indeterminate number of times, like FAQs`;
 
 const itemsWidgetsArray = [
-  Widgets.StructuredText,
   Widgets.Image,
+  Widgets.Text,
+  Widgets.StructuredText,
   Widgets.Link,
-  Widgets.LinkToMedia,
-  Widgets.ContentRelationship,
   Widgets.Select,
   Widgets.Boolean,
+  Widgets.Number,
+  Widgets.Color,
   Widgets.Date,
-  Widgets.Timestamp,
   Widgets.Embed,
-  Widgets.Number,
+  Widgets.Timestamp,
   Widgets.GeoPoint,
-  Widgets.Color,
-  Widgets.Text,
+  Widgets.ContentRelationship,
+  Widgets.LinkToMedia,
 ];
 
 const primaryWidgetsArray = [Widgets.Group, ...itemsWidgetsArray];
@@ -223,7 +223,6 @@ const FieldZones: FC = () => {
         testId="static-zone-content"
         isRepeatableCustomType={undefined}
         emptyStateHeading={undefined}
-        emptyStateActionTestId="add-Static-field"
       />
       {hasItems ? (
         <Zone
@@ -252,7 +251,6 @@ const FieldZones: FC = () => {
           testId="slice-repeatable-zone"
           isRepeatableCustomType={undefined}
           emptyStateHeading="No fields"
-          emptyStateActionTestId="add-Repeatable-field"
         />
       ) : null}
       <Dialog

package/src/legacy/lib/builders/SliceBuilder/VariationsList/index.tsx

@@ -205,6 +205,7 @@ export const SharedSliceCards = (props: SharedSliceCardsProps) => {
     <>
       {slice.model.variations.map((v) => (
         <div
+          key={v.id}
           style={
             width !== undefined
               ? { ...defaultCardStyle, width }

package/src/legacy/lib/builders/common/Zone/components/ZoneEmptyState/ZoneEmptyState.tsx

@@ -1,4 +1,4 @@
-import { Button, Text } from "@prismicio/editor-ui";
+import { Text } from "@prismicio/editor-ui";
 import { FC, ReactNode } from "react";
 
 import styles from "./ZoneEmptyState.module.css";
@@ -6,16 +6,14 @@ import styles from "./ZoneEmptyState.module.css";
 type ZoneEmptyStateProps = {
   zoneType: "custom type" | "page type" | "slice";
   heading?: ReactNode;
-  onActionClick: () => void;
-  actionTestId?: string;
+  action: ReactNode;
 };
 
 export const ZoneEmptyState: FC<ZoneEmptyStateProps> = (props) => {
   const {
     zoneType,
     heading = `Your ${zoneType} has no fields yet`,
-    onActionClick,
-    actionTestId,
+    action,
   } = props;
 
   return (
@@ -26,14 +24,7 @@ export const ZoneEmptyState: FC<ZoneEmptyStateProps> = (props) => {
           A field is an input for content (e.g. text, images, links).
         </Text>
       </div>
-      <Button
-        color="grey"
-        onClick={() => onActionClick()}
-        data-testid={actionTestId}
-        startIcon="add"
-      >
-        Add a field
-      </Button>
+      {action}
     </div>
   );
 };

package/src/legacy/lib/builders/common/Zone/index.jsx

@@ -1,13 +1,14 @@
-import { Button, Switch, Text } from "@prismicio/editor-ui";
+import { Switch, Text } from "@prismicio/editor-ui";
 import { array, arrayOf, bool, func, object, shape, string } from "prop-types";
 import { useState } from "react";
 import { BaseStyles } from "theme-ui";
 
 import { telemetry } from "@/apiClient";
 import { ListHeader } from "@/components/List";
+import { fields as allFields } from "@/domain/fields";
+import { AddFieldDropdown } from "@/features/builder/AddFieldDropdown";
 import { getContentTypeForTracking } from "@/utils/getContentTypeForTracking";
 
-import SelectFieldTypeModal from "../SelectFieldTypeModal";
 import Card from "./Card";
 import NewField from "./Card/components/NewField";
 import { ZoneEmptyState } from "./components/ZoneEmptyState";
@@ -32,7 +33,6 @@ const Zone = ({
   testId,
   isRepeatableCustomType,
   emptyStateHeading,
-  emptyStateActionTestId,
 }) => {
   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
   const widgetsArrayWithCondUid = (() => {
@@ -50,7 +50,6 @@ const Zone = ({
 
   const [showHints, setShowHints] = useState(false);
   const [editModalData, setEditModalData] = useState({ isOpen: false });
-  const [selectModalData, setSelectModalData] = useState({ isOpen: false });
   const [newFieldData, setNewFieldData] = useState(null);
 
   /** @param {[string, import("@prismicio/types-internal/lib/customtypes").NestableWidget]} field */
@@ -68,22 +67,38 @@ const Zone = ({
       contentType: getContentTypeForTracking(window.location.pathname),
     });
   };
-  const enterSelectMode = () => {
-    setSelectModalData({ isOpen: true });
-  };
 
   const closeEditModal = () => {
     setEditModalData({ isOpen: false });
   };
-  const closeSelectModal = () => setSelectModalData({ isOpen: false });
 
   const onSelectFieldType = (widgetTypeName) => {
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-assignment
     setNewFieldData({ widgetTypeName, fields });
-    setSelectModalData({ isOpen: false });
   };
 
   const onCancelNewField = () => setNewFieldData(null);
+  const addFieldDropdown = (
+    <AddFieldDropdown
+      disabled={newFieldData !== null}
+      onSelectField={onSelectFieldType}
+      fields={
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
+        widgetsArrayWithCondUid.filter(Boolean).map((widget) => {
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          const { TYPE_NAME, CUSTOM_NAME } = widget;
+          return allFields.find(
+            (f) =>
+              f.type === TYPE_NAME &&
+              (CUSTOM_NAME === undefined || f.variant === CUSTOM_NAME),
+          );
+        })
+      }
+      triggerDataTestId={
+        Boolean(isRepeatable) ? "add-field-in-items" : undefined
+      }
+    />
+  );
 
   return (
     <>
@@ -103,18 +118,7 @@ const Zone = ({
                 style={{ flexShrink: 0 }}
                 data-testid="code-snippets-switch"
               />
-              <Button
-                data-testid={`add-${
-                  // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
-                  isRepeatable ? "Repeatable" : "Static"
-                }-field`}
-                onClick={enterSelectMode}
-                startIcon="add"
-                color="grey"
-                disabled={newFieldData !== null}
-              >
-                Add a field
-              </Button>
+              {addFieldDropdown}
             </>
           ) : undefined
         }
@@ -129,9 +133,8 @@ const Zone = ({
             zoneType={getResolvedZoneType(zoneType, zoneTypeFormat)}
             // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
             heading={emptyStateHeading}
-            onActionClick={() => enterSelectMode()}
             // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-            actionTestId={emptyStateActionTestId}
+            action={addFieldDropdown}
           />
         ) : // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/strict-boolean-expressions
         fields.length > 0 || newFieldData ? (
@@ -153,7 +156,6 @@ const Zone = ({
               // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-assignment
               renderHintBase={renderHintBase}
               enterEditMode={enterEditMode}
-              enterSelectMode={enterSelectMode}
               // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
               onDragEnd={onDragEnd}
               // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
@@ -194,13 +196,6 @@ const Zone = ({
         // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
         zoneType={zoneType}
       />
-      <SelectFieldTypeModal
-        data={selectModalData}
-        close={closeSelectModal}
-        onSelect={onSelectFieldType}
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-        widgetsArray={widgetsArrayWithCondUid}
-      />
     </>
   );
 };

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

@@ -1,5 +1,5 @@
 import { BooleanField } from "@prismicio/types-internal/lib/customtypes/widgets/nestable";
-import { BsToggleOn } from "react-icons/bs";
+import { MdOutlineToggleOff } from "react-icons/md";
 import * as yup from "yup";
 
 import { createValidationSchema } from "../../../../forms";
@@ -18,9 +18,7 @@ import { removeProp } from "../../../../utils";
 import { Widget } from "../Widget";
 
 const Meta = {
-  icon: BsToggleOn,
-  title: "Boolean",
-  description: "An input that is either true or false",
+  icon: MdOutlineToggleOff,
 };
 
 const FormFields = {

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

@@ -1,5 +1,5 @@
 import { Color } from "@prismicio/types-internal/lib/customtypes/widgets/nestable";
-import { MdColorLens } from "react-icons/md";
+import { MdOutlineColorLens } from "react-icons/md";
 
 import { createDefaultWidgetValues } from "../../../../utils";
 import { Widget } from "../Widget";
@@ -12,9 +12,7 @@ import { Widget } from "../Widget";
 } */
 
 const Meta = {
-  icon: MdColorLens,
-  title: "Color",
-  description: "A color picker",
+  icon: MdOutlineColorLens,
 };
 
 // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment

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

@@ -25,8 +25,6 @@ import Form, { FormFields } from "./Form";
 
 const Meta = {
   icon: MdSettingsEthernet,
-  title: "Content Relationship",
-  description: "Define content relations & internal links",
 };
 
 // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call

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

@@ -17,8 +17,6 @@ const { FormFields, schema } = createDefaultWidgetValues("Date");
 
 const Meta = {
   icon: MdDateRange,
-  title: "Date",
-  description: "A calendar date picker",
 };
 
 export const DateWidget: Widget<Date, typeof schema> = {

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

@@ -1,5 +1,5 @@
 import { Embed } from "@prismicio/types-internal/lib/customtypes/widgets/nestable";
-import { FiCode } from "react-icons/fi";
+import { MdCode } from "react-icons/md";
 
 import { createDefaultWidgetValues } from "../../../../utils";
 import { Widget } from "../Widget";
@@ -16,9 +16,7 @@ import { Widget } from "../Widget";
 const { FormFields, schema } = createDefaultWidgetValues("Embed");
 
 const Meta = {
-  icon: FiCode,
-  title: "Embed",
-  description: "Embed videos, songs, tweets, slides, …",
+  icon: MdCode,
 };
 
 export const EmbedWidget: Widget<Embed, typeof schema> = {

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

@@ -1,5 +1,5 @@
 import { GeoPoint } from "@prismicio/types-internal/lib/customtypes/widgets/nestable";
-import { MdPlace } from "react-icons/md";
+import { MdOutlinePlace } from "react-icons/md";
 import * as yup from "yup";
 
 import { DefaultFields } from "../../../../forms/defaults";
@@ -36,9 +36,7 @@ const schema = yup.object().shape({
 });
 
 const Meta = {
-  icon: MdPlace,
-  title: "GeoPoint",
-  description: "A field for storing geo-coordinates",
+  icon: MdOutlinePlace,
 };
 
 export const GeoPointWidget: Widget<GeoPoint, typeof schema> = {

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

@@ -2,18 +2,19 @@ import { GroupFieldType } from "@prismicio/types-internal/lib/customtypes/widget
 import { Fragment, useState } from "react";
 import { DragDropContext, Droppable } from "react-beautiful-dnd";
 import { flushSync } from "react-dom";
-import { Box, Button } from "theme-ui";
+import { Box } from "theme-ui";
 
 import { telemetry } from "@/apiClient";
+import { fields as allFields } from "@/domain/fields";
 import {
   addFieldToGroup,
   deleteFieldFromGroup,
   reorderFieldInGroup,
   updateFieldInGroup,
 } from "@/domain/group";
+import { AddFieldDropdown } from "@/features/builder/AddFieldDropdown";
 import ListItem from "@/legacy/components/ListItem";
 import EditModal from "@/legacy/lib/builders/common/EditModal";
-import SelectFieldTypeModal from "@/legacy/lib/builders/common/SelectFieldTypeModal";
 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";
@@ -39,14 +40,12 @@ export const CustomListItem = ({
   HintElement,
   ...rest
 }) => {
-  const [selectMode, setSelectMode] = useState(false);
   const [newFieldData, setNewFieldData] = useState(null);
   const [editModalData, setEditModalData] = useState({ isOpen: false });
 
   const onSelectFieldType = (widgetTypeName) => {
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     setNewFieldData({ widgetTypeName });
-    setSelectMode(false);
   };
 
   const onCancelNewField = () => {
@@ -171,15 +170,28 @@ export const CustomListItem = ({
         {...rest}
         HintElement={HintElement}
         CustomEditElements={[
-          <Button
-            // eslint-disable-next-line @typescript-eslint/restrict-template-expressions, @typescript-eslint/no-unsafe-member-access
-            key={`custom-edit-element-${groupItem.key}`}
-            mr={2}
-            variant="buttons.darkSmall"
-            onClick={() => setSelectMode(true)}
-          >
-            Add Field
-          </Button>,
+          <AddFieldDropdown
+            key="add-field-dropdown"
+            disabled={newFieldData !== null}
+            onSelectField={onSelectFieldType}
+            fields={widgetsArray.filter(Boolean).map((widget) => {
+              const { TYPE_NAME, CUSTOM_NAME } = widget;
+
+              const field = allFields.find(
+                (f) =>
+                  f.type === TYPE_NAME &&
+                  (CUSTOM_NAME === undefined || f.variant === CUSTOM_NAME),
+              );
+
+              if (!field) {
+                throw new Error(
+                  `Field not found for widget: ${TYPE_NAME} - ${CUSTOM_NAME}`,
+                );
+              }
+
+              return field;
+            })}
+          />,
         ]}
         children={
           <Box sx={{ ml: 4 }}>
@@ -282,12 +294,6 @@ export const CustomListItem = ({
           </Box>
         }
       />
-      <SelectFieldTypeModal
-        data={{ isOpen: selectMode }}
-        close={() => setSelectMode(false)}
-        onSelect={onSelectFieldType}
-        widgetsArray={widgetsArray}
-      />
       <EditModal
         data={editModalData}
         close={closeEditModal}

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

@@ -1,4 +1,4 @@
-import { MdPlaylistAdd } from "react-icons/md";
+import { MdOutlineCreateNewFolder } from "react-icons/md";
 import * as yup from "yup";
 
 import { TabField } from "@/legacy/lib/models/common/CustomType";
@@ -12,9 +12,7 @@ import { type GroupListItemProps } from ".";
 import Form, { FormFields } from "./Form";
 
 const Meta = {
-  icon: MdPlaylistAdd,
-  title: "Group",
-  description: "A repeatable set of fields",
+  icon: MdOutlineCreateNewFolder,
 };
 
 const createSchema = (typeRegex: RegExp) =>