slice-machine-ui 1.26.1-beta.9 → 2.0.0

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

@@ -0,0 +1,253 @@
+import { Box, Button, Gradient, Text, theme } from "@prismicio/editor-ui";
+import { useRouter } from "next/router";
+import { type Dispatch, type FC, type SetStateAction, useState } from "react";
+import { toast } from "react-toastify";
+
+import { updateSlice } from "@/apiClient";
+import { Divider } from "@/components/Divider";
+import { copySliceVariation } from "@/domain/slice";
+import { useSliceState } from "@/features/slices/sliceBuilder/SliceBuilderProvider";
+import { SharedSliceCard } from "@/features/slices/sliceCards/SharedSliceCard";
+import { SLICES_CONFIG } from "@/features/slices/slicesConfig";
+import {
+  type Payload,
+  useScreenshotChangesModal,
+} from "@/hooks/useScreenshotChangesModal";
+import { DeleteVariationModal } from "@/legacy/components/DeleteVariationModal";
+import { RenameVariationModal } from "@/legacy/components/Forms/RenameVariationModal";
+import ScreenshotChangesModal from "@/legacy/components/ScreenshotChangesModal";
+import AddVariationModal from "@/legacy/lib/builders/SliceBuilder/VariationsList/AddVariationModal";
+import type { VariationSM } from "@/legacy/lib/models/common/Slice";
+import useSliceMachineActions from "@/modules/useSliceMachineActions";
+
+import styles from "./VariationsList.module.css";
+
+type DialogState =
+  | { type: "ADD_VARIATION"; variation?: undefined; loading?: boolean }
+  | { type: "RENAME_VARIATION"; variation: VariationSM; loading?: boolean }
+  | { type: "DELETE_VARIATION"; variation: VariationSM; loading?: boolean }
+  | undefined;
+
+type VariationsListProps = {
+  horizontalScroll: boolean;
+};
+
+export const VariationsList: FC<VariationsListProps> = (props) => {
+  const { horizontalScroll = false } = props;
+  const { slice, variation, setSlice } = useSliceState();
+  const [dialog, setDialog] = useState<DialogState>();
+  const screenshotChangesModal = useScreenshotChangesModal();
+  const { sliceFilterFn, defaultVariationSelector, onUploadSuccess } =
+    screenshotChangesModal.modalPayload;
+  const router = useRouter();
+  const { saveSliceSuccess } = useSliceMachineActions();
+
+  const variationCount = slice.model.variations.length;
+
+  return (
+    <>
+      <Box flexDirection="column" gap={16}>
+        {horizontalScroll ? (
+          <>
+            <Divider variant="edgeFaded" color="grey6" />
+            <Box justifyContent="space-between">
+              <Text color="grey11">
+                {variationCount} variation{variationCount !== 1 && "s"}
+              </Text>
+              <Button
+                onClick={() => {
+                  setDialog({ type: "ADD_VARIATION" });
+                }}
+                startIcon="add"
+                color="grey"
+              />
+            </Box>
+            <div
+              className={styles.hideScrollbar}
+              style={{
+                height: "240px",
+                position: "relative",
+                marginRight: "-32px",
+                overflowX: "scroll",
+                scrollSnapType: "x mandatory",
+              }}
+            >
+              <div
+                style={{
+                  position: "absolute",
+                  paddingRight: "32px",
+                }}
+              >
+                <Box flexDirection="row" gap={16}>
+                  <SharedSliceCards
+                    screenshotChangesModal={screenshotChangesModal}
+                    setDialog={setDialog}
+                    width={320}
+                  />
+                </Box>
+              </div>
+            </div>
+          </>
+        ) : (
+          <>
+            <SharedSliceCards
+              screenshotChangesModal={screenshotChangesModal}
+              setDialog={setDialog}
+            />
+            {/*
+             * As `PageLayoutContent` has a `16px` bottom padding, we need to apply
+             * an equal negative margin to the `div` if we want it to sit flush with
+             * the bottom of the page.
+             * TODO(PBD-1080): write the new `ScrollAreaEndGradient` component
+             * instead of using a `div`.
+             */}
+            <div
+              style={{
+                bottom: theme.space[0],
+                marginBottom: `-${theme.space[16]}`,
+                position: "sticky",
+              }}
+            >
+              <Box
+                backgroundColor="grey2"
+                flexDirection="column"
+                padding={{ bottom: 40, inline: 24 }}
+              >
+                <Gradient sx={{ left: 0, position: "absolute", right: 0 }} />
+                <Button
+                  color="grey"
+                  onClick={() => {
+                    setDialog({ type: "ADD_VARIATION" });
+                  }}
+                  startIcon="add"
+                  // Set `position` to `relative` to position `Button` on top of
+                  // `Gradient`.
+                  sx={{ position: "relative" }}
+                >
+                  Add a new variation
+                </Button>
+              </Box>
+            </div>
+          </>
+        )}
+      </Box>
+      <ScreenshotChangesModal
+        slices={sliceFilterFn([slice])}
+        defaultVariationSelector={defaultVariationSelector}
+        onUploadSuccess={onUploadSuccess}
+      />
+      <RenameVariationModal
+        isOpen={dialog?.type === "RENAME_VARIATION"}
+        onClose={() => {
+          setDialog(undefined);
+        }}
+        slice={slice}
+        variation={dialog?.variation}
+      />
+      <DeleteVariationModal
+        isOpen={dialog?.type === "DELETE_VARIATION"}
+        onClose={() => {
+          setDialog(undefined);
+        }}
+        slice={slice}
+        variation={dialog?.variation}
+      />
+      <AddVariationModal
+        initialVariation={variation}
+        isOpen={dialog?.type === "ADD_VARIATION"}
+        onClose={() => {
+          setDialog(undefined);
+        }}
+        onSubmit={async (id, name, copiedVariation) => {
+          try {
+            const { slice: newSlice, variation: newVariation } =
+              copySliceVariation({ slice, id, name, copiedVariation });
+
+            await updateSlice(newSlice);
+            saveSliceSuccess(newSlice);
+            setSlice(newSlice);
+
+            const url = SLICES_CONFIG.getBuilderPagePathname({
+              libraryName: newSlice.href,
+              sliceName: newSlice.model.name,
+              variationId: newVariation.id,
+            });
+
+            void router.replace(url);
+          } catch (error) {
+            const message = `Could not add variation \`${name}\``;
+            console.error(message, error);
+
+            toast.error(message);
+          }
+        }}
+        variations={slice.model.variations}
+      />
+    </>
+  );
+};
+
+type SharedSliceCardsProps = {
+  screenshotChangesModal: Payload;
+  setDialog: Dispatch<SetStateAction<DialogState>>;
+  width?: 320;
+};
+
+export const SharedSliceCards = (props: SharedSliceCardsProps) => {
+  const { screenshotChangesModal, setDialog, width } = props;
+  const { slice, variation, setSlice } = useSliceState();
+
+  const defaultCardStyle = { scrollSnapAlign: "start" };
+
+  return (
+    <>
+      {slice.model.variations.map((v) => (
+        <div
+          style={
+            width !== undefined
+              ? { ...defaultCardStyle, width }
+              : defaultCardStyle
+          }
+        >
+          <SharedSliceCard
+            action={{
+              type: "menu",
+              onRename: () => {
+                setDialog({
+                  type: "RENAME_VARIATION",
+                  variation: v,
+                });
+              },
+              onRemove: () => {
+                setDialog({
+                  type: "DELETE_VARIATION",
+                  variation: v,
+                });
+              },
+              removeDisabled: slice.model.variations.length <= 1,
+            }}
+            key={v.id}
+            mode="navigation"
+            onUpdateScreenshot={() => {
+              screenshotChangesModal.onOpenModal({
+                sliceFilterFn: (s) => s,
+                defaultVariationSelector: {
+                  sliceID: slice.model.id,
+                  variationID: v.id,
+                },
+                onUploadSuccess: (newSlice) => {
+                  setSlice(newSlice);
+                },
+              });
+            }}
+            replace
+            selected={v.id === variation.id}
+            slice={slice}
+            variant="outlined"
+            variationId={v.id}
+          />
+        </div>
+      ))}
+    </>
+  );
+};

package/{lib → src/legacy/lib}/builders/SliceBuilder/index.tsx

@@ -1,10 +1,10 @@
-import { Box } from "@prismicio/editor-ui";
+import { Box, useMediaQuery } from "@prismicio/editor-ui";
 import { type FC } from "react";
 
-import FieldZones from "./FieldZones";
-import { Sidebar } from "./Sidebar";
-
-import SimulatorButton from "@builders/SliceBuilder/SimulatorButton";
+import { BreadcrumbItem } from "@/components/Breadcrumb";
+import { AutoSaveStatusIndicator } from "@/features/autoSave/AutoSaveStatusIndicator";
+import { FloatingBackButton } from "@/features/slices/sliceBuilder/FloatingBackButton";
+import { useSliceState } from "@/features/slices/sliceBuilder/SliceBuilderProvider";
 import {
   AppLayout,
   AppLayoutActions,
@@ -12,14 +12,19 @@ import {
   AppLayoutBreadcrumb,
   AppLayoutContent,
   AppLayoutHeader,
-} from "@components/AppLayout";
-import { BreadcrumbItem } from "@src/components/Breadcrumb";
-import { FloatingBackButton } from "@src/features/slices/sliceBuilder/FloatingBackButton";
-import { useSliceState } from "@src/features/slices/sliceBuilder/SliceBuilderProvider";
-import { AutoSaveStatusIndicator } from "@src/features/autoSave/AutoSaveStatusIndicator";
+} from "@/legacy/components/AppLayout";
+import SimulatorButton from "@/legacy/lib/builders/SliceBuilder/SimulatorButton";
+
+import FieldZones from "./FieldZones";
+import { VariationsList } from "./VariationsList";
 
 export const SliceBuilder: FC = () => {
   const { slice, actionQueueStatus } = useSliceState();
+  const horizontalScroll = useMediaQuery({ max: "medium" });
+
+  const contentDisplayProps = horizontalScroll
+    ? { gridTemplateRows: "304px 1fr" }
+    : { gridTemplateColumns: "320px 1fr" };
 
   return (
     <AppLayout>
@@ -36,12 +41,12 @@ export const SliceBuilder: FC = () => {
       </AppLayoutHeader>
       <AppLayoutContent>
         <Box
-          alignItems="flex-start"
           display="grid"
+          alignItems="flex-start"
           gap={16}
-          gridTemplateColumns="320px 1fr"
+          {...contentDisplayProps}
         >
-          <Sidebar />
+          <VariationsList horizontalScroll={horizontalScroll} />
           <FieldZones />
         </Box>
         <FloatingBackButton />

package/{lib → src/legacy/lib}/builders/common/EditModal/Field.jsx

@@ -1,16 +1,14 @@
-import { Fragment } from "react";
-
 import { useField } from "formik";
+import { Fragment } from "react";
+import { Box } from "theme-ui";
 
 import {
   FormFieldCheckbox,
   FormFieldInput,
-} from "../../../../components/FormFields";
+} from "@/legacy/components/FormFields";
 
 import { FormTypes } from "../../../forms/types";
 
-import { Box } from "theme-ui";
-
 const WidgetFormField = ({ fieldName, formField, fields, initialValues }) => {
   // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
   const [field, meta, helpers] = useField(fieldName);

package/{lib → src/legacy/lib}/builders/common/EditModal/Form.jsx

@@ -1,5 +1,5 @@
+import { Form, Formik } from "formik";
 import { memo } from "react";
-import { Formik, Form } from "formik";
 import { Box } from "theme-ui";
 
 const WidgetForm = ({

package/{lib → src/legacy/lib}/builders/common/EditModal/index.jsx

@@ -1,24 +1,22 @@
 import Modal from "react-modal";
-import SliceMachineModal from "@components/SliceMachineModal";
-
-import { Box, Close, Flex, Button, useThemeUI } from "theme-ui";
-
+import { Box, Button, Close, Flex, useThemeUI } from "theme-ui";
 import * as yup from "yup";
-import * as Widgets from "@lib/models/common/widgets/withGroup";
-
-import { createInitialValues, createFieldNameFromKey } from "@lib/forms";
 
-import Card from "@components/Card/WithTabs";
-import ItemHeader from "@components/ItemHeader";
-import { Flex as FlexGrid, Col } from "@components/Flex";
-
-import WidgetForm from "./Form";
-import WidgetFormField from "./Field";
+import Card from "@/legacy/components/Card/WithTabs";
+import { Col, Flex as FlexGrid } from "@/legacy/components/Flex";
+import ItemHeader from "@/legacy/components/ItemHeader";
+import SliceMachineModal from "@/legacy/components/SliceMachineModal";
+import {
+  createFieldNameFromKey,
+  createInitialValues,
+} from "@/legacy/lib/forms";
+import { DeprecatedMockConfigMessage } from "@/legacy/lib/models/common/DeprecatedMockConfigMessage";
+import * as Widgets from "@/legacy/lib/models/common/widgets/withGroup";
+import { removeProp } from "@/legacy/lib/utils";
 
 import { findWidgetByConfigOrType } from "../../utils";
-import { removeProp } from "@lib/utils";
-
-import { DeprecatedMockConfigMessage } from "@lib/models/common/DeprecatedMockConfigMessage";
+import WidgetFormField from "./Field";
+import WidgetForm from "./Form";
 
 if (process.env.NODE_ENV !== "test") {
   Modal.setAppElement("#__next");

package/{lib → src/legacy/lib}/builders/common/SelectFieldTypeModal/index.jsx

@@ -1,10 +1,9 @@
 import Modal from "react-modal";
-import SliceMachineModal from "@components/SliceMachineModal";
-
 import { Close, Flex, Heading } from "theme-ui";
 
-import Card from "@components/Card";
-import { Flex as FlexGrid, Col } from "@components/Flex";
+import Card from "@/legacy/components/Card";
+import { Col, Flex as FlexGrid } from "@/legacy/components/Flex";
+import SliceMachineModal from "@/legacy/components/SliceMachineModal";
 
 import FieldTypeCard from "./FieldTypeCard";
 

package/{lib → src/legacy/lib}/builders/common/Zone/Card/components/ErrorTooltip.tsx

@@ -1,7 +1,7 @@
-import ReactTooltip from "react-tooltip";
 import { FaRegQuestionCircle } from "react-icons/fa";
+import ReactTooltip from "react-tooltip";
 
-import { ReactTooltipPortal } from "@components/ReactTooltipPortal";
+import { ReactTooltipPortal } from "@/legacy/components/ReactTooltipPortal";
 
 interface ErrorTooltip {
   error?: string;

package/{lib → src/legacy/lib}/builders/common/Zone/Card/components/Hints/CodeBlock.tsx

@@ -1,12 +1,11 @@
+import { NestableWidget, UID } from "@prismicio/types-internal/lib/customtypes";
 import React, { useState } from "react";
-import { useThemeUI, Text, Button, Flex, Box } from "theme-ui";
-
-import { BsCode } from "react-icons/bs";
 import { BiCopy } from "react-icons/bi";
+import { BsCode } from "react-icons/bs";
 import { MdCheck } from "react-icons/md";
-import Code from "@components/CodeBlock";
+import { Box, Button, Flex, Text, useThemeUI } from "theme-ui";
 
-import { NestableWidget, UID } from "@prismicio/types-internal/lib/customtypes";
+import Code from "@/legacy/components/CodeBlock";
 
 const buttonIconStyle: React.CSSProperties = {
   position: "relative",

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

@@ -1,6 +1,7 @@
 import React from "react";
 import useSWR from "swr";
-import { managerClient } from "@src/managerClient";
+
+import { managerClient } from "@/managerClient";
 
 import CodeBlock, { Item, RenderHintBaseFN } from "./CodeBlock";
 

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

@@ -1,22 +1,25 @@
-import { Ref, SetStateAction, useEffect, useRef, useState } from "react";
-import { Formik, Form, Field } from "formik";
-import { Input, Flex, Text, useThemeUI } from "theme-ui";
+import { Button } from "@prismicio/editor-ui";
 import * as CSS from "csstype";
+import { Field, Form, Formik } from "formik";
+import { Ref, SetStateAction, useEffect, useRef, useState } from "react";
+import { Flex, Input, Text, useThemeUI } from "theme-ui";
 import { AnyObjectSchema } from "yup";
-import { Button } from "@prismicio/editor-ui";
-
-import { validateId } from "@lib/forms/defaults";
-import { createInitialValues, createValidationSchema } from "@lib/forms";
-import * as Widgets from "@lib/models/common/widgets/withGroup";
-import { slugify } from "@lib/utils/str";
-import { AnyWidget } from "@lib/models/common/widgets/Widget";
 
-import { ErrorTooltip } from "./ErrorTooltip";
-import { InputType } from "@lib/forms/fields";
 import {
   getInputFieldStyles,
   InputFieldStyles,
-} from "@components/FormFields/Input";
+} from "@/legacy/components/FormFields/Input";
+import {
+  createInitialValues,
+  createValidationSchema,
+} from "@/legacy/lib/forms";
+import { validateId } from "@/legacy/lib/forms/defaults";
+import { InputType } from "@/legacy/lib/forms/fields";
+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";
 
 interface NewField {
   widgetTypeName: string;

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

@@ -1,9 +1,9 @@
 import { DragDropContext, Droppable } from "react-beautiful-dnd";
 import { Box, Text } from "theme-ui";
 
-import Li from "@components/Li";
-import ListItem from "@components/ListItem";
-import * as Widgets from "@lib/models/common/widgets/withGroup";
+import Li from "@/legacy/components/Li";
+import ListItem from "@/legacy/components/ListItem";
+import * as Widgets from "@/legacy/lib/models/common/widgets/withGroup";
 
 import { findWidgetByConfigOrType } from "../../../utils";
 import Hint from "./components/Hints";
@@ -17,6 +17,7 @@ const FieldZone = ({
   onDragEnd,
   renderFieldAccessor,
   onDeleteItem,
+  onSave,
   showHints,
   newField,
   renderHintBase,
@@ -82,6 +83,8 @@ const FieldZone = ({
                   parentSnapshot: snapshot,
                   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
                   deleteItem: onDeleteItem,
+                  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+                  saveItem: onSave,
                   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/restrict-template-expressions, @typescript-eslint/no-unsafe-member-access
                   draggableId: `list-item-${item.key}`,
                   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
@@ -90,12 +93,6 @@ const FieldZone = ({
                   testId: `list-item-${item.key}`,
                 };
 
-                // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
-                if (widget.CustomListItem) {
-                  const { CustomListItem } = widget;
-                  return <CustomListItem {...props} />;
-                }
-
                 const HintElement = (
                   <Hint
                     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/restrict-template-expressions, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment
@@ -111,6 +108,15 @@ const FieldZone = ({
                     typeName={widget.CUSTOM_NAME || widget.TYPE_NAME}
                   />
                 );
+
+                // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+                if (widget.CustomListItem) {
+                  const { CustomListItem } = widget;
+                  return (
+                    <CustomListItem {...props} HintElement={HintElement} />
+                  );
+                }
+
                 return <ListItem {...props} HintElement={HintElement} />;
               })
             }

package/src/legacy/lib/builders/common/Zone/components/ZoneEmptyState/ZoneEmptyState.module.css

@@ -0,0 +1,12 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  background-color: var(--grey3);
+  text-align: center;
+  padding-top: 32px;
+  padding-bottom: 32px;
+  min-height: 288px;
+}

package/src/legacy/lib/builders/common/Zone/components/ZoneEmptyState/ZoneEmptyState.module.css.d.ts

@@ -0,0 +1,5 @@
+declare const styles: {
+  readonly "root": string;
+};
+export = styles;
+

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

@@ -0,0 +1,39 @@
+import { Button, Text } from "@prismicio/editor-ui";
+import { FC, ReactNode } from "react";
+
+import styles from "./ZoneEmptyState.module.css";
+
+type ZoneEmptyStateProps = {
+  zoneType: "custom type" | "page type" | "slice";
+  heading?: ReactNode;
+  onActionClick: () => void;
+  actionTestId?: string;
+};
+
+export const ZoneEmptyState: FC<ZoneEmptyStateProps> = (props) => {
+  const {
+    zoneType,
+    heading = `Your ${zoneType} has no fields yet`,
+    onActionClick,
+    actionTestId,
+  } = props;
+
+  return (
+    <div className={styles.root}>
+      <div>
+        <Text variant="bold">{heading}</Text>
+        <Text color="grey11">
+          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>
+    </div>
+  );
+};

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

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