slice-machine-ui 2.2.2-beta.1 → 2.2.2-beta.11

package/src/features/onboarding/OnboardingStepDialog/OnboardingStepDialog.tsx

@@ -0,0 +1,46 @@
+import {
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogHeader,
+} from "@prismicio/editor-ui";
+
+import { useOnboardingContext } from "@/features/onboarding/OnboardingProvider";
+import { OnboardingStepDialogContent } from "@/features/onboarding/OnboardingStepDialog/OnboardingStepDialogContent";
+import type { OnboardingStep } from "@/features/onboarding/types";
+
+type OnboardingStepDialogProps = {
+  step: OnboardingStep;
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+export const OnboardingStepDialog = ({
+  step,
+  isOpen,
+  onClose,
+}: OnboardingStepDialogProps) => {
+  const { toggleStepComplete, isStepComplete } = useOnboardingContext();
+
+  const markAsDone = () => {
+    if (!isOpen) return;
+    toggleStepComplete(step.id);
+    onClose();
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogHeader title="Learn" />
+      <DialogContent>
+        <OnboardingStepDialogContent step={step} />
+        <DialogActions
+          ok={{
+            text: isStepComplete(step.id) ? "Undo step" : "Mark as done",
+            onClick: markAsDone,
+          }}
+          cancel={{ text: "Close" }}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+};

package/src/features/onboarding/OnboardingStepDialog/OnboardingStepDialogContent.tsx

@@ -0,0 +1,38 @@
+import { Box, ScrollArea, Text, Video } from "@prismicio/editor-ui";
+
+import { getOnboardingStepsContent } from "@/features/onboarding/content";
+import { useOnboardingContext } from "@/features/onboarding/OnboardingProvider";
+import { OnboardingStep } from "@/features/onboarding/types";
+import { useRepositoryInformation } from "@/hooks/useRepositoryInformation";
+
+type OnboardingStepDialogContentProps = {
+  step: OnboardingStep;
+};
+
+export const OnboardingStepDialogContent = ({
+  step,
+}: OnboardingStepDialogContentProps) => {
+  const { getStepIndex } = useOnboardingContext();
+  const { repositoryUrl } = useRepositoryInformation();
+
+  const {
+    content: Content,
+    videoUrl,
+    title,
+  } = getOnboardingStepsContent({ repositoryUrl })[step.id];
+
+  return (
+    <ScrollArea>
+      <Box as="article" flexDirection="column" padding={16} gap={16}>
+        <section>
+          <Text sx={{ marginBottom: 4 }} color="purple9" variant="bold">
+            Step {getStepIndex(step.id) + 1}
+          </Text>
+          <Text variant="h3">{title}</Text>
+          <Content />
+        </section>
+        <Video src={videoUrl} sizing="contain" autoPlay loop />
+      </Box>
+    </ScrollArea>
+  );
+};

package/src/features/onboarding/OnboardingStepDialog/index.ts

@@ -0,0 +1 @@
+export { OnboardingStepDialog } from "./OnboardingStepDialog";

package/src/features/onboarding/content.tsx

@@ -0,0 +1,115 @@
+import { Text } from "@prismicio/editor-ui";
+
+import type {
+  OnboardingStep,
+  OnboardingStepContentDefinition,
+  OnboardingStepType,
+} from "@/features/onboarding/types";
+
+export const onboardingSteps: OnboardingStep[] = [
+  {
+    id: "createPage",
+    title: "Create Your Page",
+    description: "Setup a new page.",
+  },
+  {
+    id: "codePage",
+    title: "Code your page",
+    description: "Build your page's structure",
+  },
+  {
+    id: "addSlice",
+    title: "Add a Slice",
+    description: "Insert reusable sections.",
+  },
+  {
+    id: "pushModels",
+    title: "Push Your Models",
+    description: "Deploy your models.",
+  },
+  {
+    id: "writeContent",
+    title: "Write Content",
+    description: "Add engaging content.",
+  },
+];
+
+type GetOnboardingStepsContentProps = {
+  repositoryUrl: string;
+};
+
+export const getOnboardingStepsContent = ({
+  repositoryUrl,
+}: GetOnboardingStepsContentProps): Record<
+  OnboardingStepType,
+  OnboardingStepContentDefinition
+> => ({
+  createPage: {
+    videoUrl:
+      "https://res.cloudinary.com/dmtf1daqp/video/upload/v1700213517/IN-APP-GUIDE-SM/ADD_SLICE.mp4",
+    content: () => (
+      <Text>
+        Commodo irure ipsum exercitation consequat enim velit amet commodo.
+        Excepteur proident Lorem sunt enim amet tempor qui Lorem non non Lorem.
+        Ex sint elit ea. Proident veniam dolor cupidatat amet aute consectetur.
+        Non ad consectetur irure adipisicing aliquip. Ipsum nulla velit mollit
+        magna aliqua eu veniam. Commodo elit labore veniam nulla dolor aliqua
+        esse proident pariatur nostrud.
+      </Text>
+    ),
+  },
+  codePage: {
+    videoUrl:
+      "https://res.cloudinary.com/dmtf1daqp/video/upload/v1700213517/IN-APP-GUIDE-SM/CODE_SNIP.mp4",
+    content: () => (
+      <Text>
+        Nulla consequat occaecat ut ut ex culpa veniam sunt nisi nisi. Velit
+        excepteur excepteur do anim incididunt in cillum ullamco occaecat minim
+        reprehenderit eu enim. Nulla irure est fugiat aliqua elit excepteur
+        labore ipsum occaecat eu minim duis non sit. Ea eu irure dolore duis
+        labore ad. Quis sunt eu commodo sit nisi ullamco qui aliqua nostrud
+        labore nostrud ut nostrud nostrud.
+      </Text>
+    ),
+  },
+  addSlice: {
+    videoUrl:
+      "https://res.cloudinary.com/dmtf1daqp/video/upload/v1700213517/IN-APP-GUIDE-SM/PUSH.mp4",
+    content: () => (
+      <Text>
+        Minim anim velit laboris cupidatat cupidatat culpa labore sunt eiusmod.
+        Consequat culpa mollit enim dolore aliquip ex voluptate ex eiusmod
+        incididunt eu. Cillum magna cillum magna consectetur. Id aliquip
+        excepteur adipisicing officia excepteur et pariatur aliquip aliquip
+        laborum.
+      </Text>
+    ),
+  },
+  pushModels: {
+    videoUrl:
+      "https://res.cloudinary.com/dmtf1daqp/video/upload/v1700213517/IN-APP-GUIDE-SM/PREVIEW.mp4",
+    content: () => (
+      <Text>
+        Ipsum aliqua do consequat eiusmod id. Reprehenderit consectetur sit
+        officia consequat velit non officia aliquip laboris incididunt cillum
+        proident incididunt. Ad quis laborum tempor dolor duis ea cillum aliqua
+        occaecat. Sunt reprehenderit fugiat et ullamco proident pariatur
+        deserunt minim. Irure enim nulla et ad ut id anim elit. Voluptate culpa
+        esse qui et reprehenderit aute est.
+      </Text>
+    ),
+  },
+  writeContent: {
+    videoUrl:
+      "https://res.cloudinary.com/dmtf1daqp/video/upload/v1700213517/IN-APP-GUIDE-SM/WRITE.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>
+    ),
+  },
+});

package/src/features/onboarding/types.ts

@@ -0,0 +1,32 @@
+import { z } from "zod";
+
+export const onboardingStepStatusesSchema = z.object({
+  createPage: z.boolean(),
+  codePage: z.boolean(),
+  addSlice: z.boolean(),
+  writeContent: z.boolean(),
+  pushModels: 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/useNestedGroupExperiment.ts

@@ -0,0 +1,8 @@
+import { useExperimentVariant } from "@/hooks/useExperimentVariant";
+
+type UseNestedGroupExperimentReturnType = { eligible: boolean };
+
+export function useNestedGroupExperiment(): UseNestedGroupExperimentReturnType {
+  const variant = useExperimentVariant("slicemachine-nested-groups");
+  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/ListItem/index.tsx

@@ -14,7 +14,7 @@ import Li from "../Li";
 import SliceMachineIconButton from "../SliceMachineIconButton";
 import ItemHeader from "./Header";
 
-type Item<F extends TabField> = { key: string; value: F };
+export type Item<F extends TabField> = { key: string; value: F };
 
 interface ListItemProps<F extends TabField, S extends AnyObjectSchema> {
   item: Item<F>;

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

@@ -30,7 +30,7 @@ import {
   TabFieldsModel,
   TabSM,
 } from "@/legacy/lib/models/common/CustomType";
-import ctBuilderArray from "@/legacy/lib/models/common/widgets/ctBuilderArray";
+import { Widgets } from "@/legacy/lib/models/common/widgets";
 import type { AnyWidget } from "@/legacy/lib/models/common/widgets/Widget";
 import {
   ensureDnDDestination,
@@ -39,11 +39,30 @@ import {
 import { transformKeyAccessor } from "@/legacy/lib/utils/str";
 import { getContentTypeForTracking } from "@/utils/getContentTypeForTracking";
 
-import * as Widgets from "../../../../lib/models/common/widgets/withGroup";
 import EditModal from "../../common/EditModal";
 import Zone from "../../common/Zone";
 import SliceZone from "../SliceZone";
 
+const widgetsArray = [
+  Widgets.UID,
+  Widgets.Image,
+  Widgets.Text,
+  Widgets.StructuredText,
+  Widgets.Link,
+  Widgets.Select,
+  Widgets.Boolean,
+  Widgets.Number,
+  Widgets.Color,
+  Widgets.Date,
+  Widgets.Embed,
+  Widgets.Timestamp,
+  Widgets.GeoPoint,
+  Widgets.ContentRelationship,
+  Widgets.LinkToMedia,
+  Widgets.Group,
+  Widgets.NestedGroup,
+];
+
 interface TabZoneProps {
   tabId: string;
 }
@@ -227,7 +246,7 @@ const TabZone: FC<TabZoneProps> = ({ tabId }) => {
               poolOfFieldsToCheck={poolOfFields}
               showHints={true}
               EditModal={EditModal}
-              widgetsArray={ctBuilderArray}
+              widgetsArray={widgetsArray}
               onDeleteItem={onDeleteItem}
               onSave={onSave}
               onSaveNewField={onSaveNewField}
@@ -242,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

@@ -27,9 +27,7 @@ import {
   SlicePrimaryFieldSM,
   WidgetsArea,
 } from "@/legacy/lib/models/common/Slice";
-import * as Widgets from "@/legacy/lib/models/common/widgets";
-import groupBuilderWidgetsArray from "@/legacy/lib/models/common/widgets/groupBuilderArray";
-import sliceBuilderWidgetsArray from "@/legacy/lib/models/common/widgets/sliceBuilderArray";
+import { Widgets } from "@/legacy/lib/models/common/widgets";
 import { ensureDnDDestination } from "@/legacy/lib/utils";
 import { transformKeyAccessor } from "@/legacy/lib/utils/str";
 import { getContentTypeForTracking } from "@/utils/getContentTypeForTracking";
@@ -42,6 +40,25 @@ 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`;
 
+const itemsWidgetsArray = [
+  Widgets.Image,
+  Widgets.Text,
+  Widgets.StructuredText,
+  Widgets.Link,
+  Widgets.Select,
+  Widgets.Boolean,
+  Widgets.Number,
+  Widgets.Color,
+  Widgets.Date,
+  Widgets.Embed,
+  Widgets.Timestamp,
+  Widgets.GeoPoint,
+  Widgets.ContentRelationship,
+  Widgets.LinkToMedia,
+];
+
+const primaryWidgetsArray = [Widgets.Group, ...itemsWidgetsArray];
+
 const FieldZones: FC = () => {
   const { slice, setSlice, variation } = useSliceState();
   const [
@@ -110,7 +127,7 @@ const FieldZones: FC = () => {
       label: string;
       widgetTypeName: keyof typeof Widgets;
     }) => {
-      const widget = sliceBuilderWidgetsArray.find(
+      const widget = primaryWidgetsArray.find(
         (sliceBuilderWidget) =>
           sliceBuilderWidget.CUSTOM_NAME === widgetTypeName ||
           sliceBuilderWidget.TYPE_NAME === widgetTypeName,
@@ -188,7 +205,7 @@ const FieldZones: FC = () => {
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         fields={variation.primary}
         EditModal={EditModal}
-        widgetsArray={sliceBuilderWidgetsArray}
+        widgetsArray={primaryWidgetsArray}
         onDeleteItem={_onDeleteItem(WidgetsArea.Primary)}
         onSave={_onSave(WidgetsArea.Primary)}
         onSaveNewField={_onSaveNewField(WidgetsArea.Primary)}
@@ -206,7 +223,6 @@ const FieldZones: FC = () => {
         testId="static-zone-content"
         isRepeatableCustomType={undefined}
         emptyStateHeading={undefined}
-        emptyStateActionTestId="add-Static-field"
       />
       {hasItems ? (
         <Zone
@@ -216,7 +232,7 @@ const FieldZones: FC = () => {
           isRepeatable
           title="Repeatable Zone"
           dataTip={dataTipText2}
-          widgetsArray={groupBuilderWidgetsArray}
+          widgetsArray={itemsWidgetsArray}
           // eslint-disable-next-line @typescript-eslint/ban-ts-comment
           fields={variation.items}
           EditModal={EditModal}
@@ -235,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

@@ -60,7 +60,9 @@ export const VariationsList: FC<VariationsListProps> = (props) => {
                 }}
                 startIcon="add"
                 color="grey"
-              />
+              >
+                Add a variation
+              </Button>
             </Box>
             <div
               className={styles.hideScrollbar}
@@ -124,7 +126,7 @@ export const VariationsList: FC<VariationsListProps> = (props) => {
                   // `Gradient`.
                   sx={{ position: "relative" }}
                 >
-                  Add a new variation
+                  Add a variation
                 </Button>
               </Box>
             </div>
@@ -203,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/SliceBuilder/index.tsx

@@ -20,7 +20,7 @@ import { VariationsList } from "./VariationsList";
 
 export const SliceBuilder: FC = () => {
   const { slice, actionQueueStatus } = useSliceState();
-  const horizontalScroll = useMediaQuery({ max: "medium" });
+  const horizontalScroll = useMediaQuery({ max: "large" });
 
   const contentDisplayProps = horizontalScroll
     ? { gridTemplateRows: "304px 1fr" }

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

@@ -11,7 +11,7 @@ import {
   createInitialValues,
 } from "@/legacy/lib/forms";
 import { DeprecatedMockConfigMessage } from "@/legacy/lib/models/common/DeprecatedMockConfigMessage";
-import * as Widgets from "@/legacy/lib/models/common/widgets/withGroup";
+import { Widgets } from "@/legacy/lib/models/common/widgets";
 import { removeProp } from "@/legacy/lib/utils";
 
 import { findWidgetByConfigOrType } from "../../utils";

package/src/legacy/lib/builders/common/Zone/Card/components/Hints/index.tsx

@@ -9,9 +9,15 @@ interface HintProps {
   show: boolean;
   item: Item;
   renderHintBase: RenderHintBaseFN;
+  hintItemName?: string;
 }
 
-const Hint: React.FC<HintProps> = ({ show, renderHintBase, item }) => {
+const Hint: React.FC<HintProps> = ({
+  show,
+  renderHintBase,
+  item,
+  hintItemName,
+}) => {
   const fieldPathString = renderHintBase({ item });
 
   // TODO: Call `swr`'s global `mutate` function when something changes to clear the cache.
@@ -20,6 +26,7 @@ const Hint: React.FC<HintProps> = ({ show, renderHintBase, item }) => {
     return await managerClient.snippets.readSnippets({
       fieldPath: fieldPathString.split("."),
       model: item.value,
+      itemName: hintItemName,
     });
   });
 

package/src/legacy/lib/builders/common/Zone/Card/components/NewField.tsx

@@ -15,8 +15,8 @@ import {
 } from "@/legacy/lib/forms";
 import { validateId } from "@/legacy/lib/forms/defaults";
 import { InputType } from "@/legacy/lib/forms/fields";
+import { Widgets } from "@/legacy/lib/models/common/widgets";
 import { AnyWidget } from "@/legacy/lib/models/common/widgets/Widget";
-import * as Widgets from "@/legacy/lib/models/common/widgets/withGroup";
 import { slugify } from "@/legacy/lib/utils/str";
 
 import { ErrorTooltip } from "./ErrorTooltip";

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

@@ -3,7 +3,7 @@ import { Box, Text } from "theme-ui";
 
 import Li from "@/legacy/components/Li";
 import ListItem from "@/legacy/components/ListItem";
-import * as Widgets from "@/legacy/lib/models/common/widgets/withGroup";
+import { Widgets } from "@/legacy/lib/models/common/widgets";
 
 import { findWidgetByConfigOrType } from "../../../utils";
 import Hint from "./components/Hints";
@@ -103,6 +103,8 @@ const FieldZone = ({
                     isRepeatable={isRepeatable}
                     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
                     renderHintBase={renderHintBase}
+                    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+                    hintItemName={widget.hintItemName}
                     Widgets={Widgets}
                     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/strict-boolean-expressions
                     typeName={widget.CUSTOM_NAME || widget.TYPE_NAME}

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>
   );
 };