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

package/lib/builders/SliceBuilder/Sidebar/AddVariationModal.tsx

@@ -1,13 +1,13 @@
-import { Variation } from "@models/common/Variation";
-import { VariationSM } from "@lib/models/common/Slice";
 import React, { useEffect, useState } from "react";
+import Select from "react-select";
 import { Formik, Form, Field } from "formik";
-import SliceMachineModal from "@components/SliceMachineModal";
+import { Button, Box } from "@prismicio/editor-ui";
+import { Text, Label, Input } from "theme-ui";
+import { camelCase } from "lodash";
 
+import SliceMachineModal from "@components/SliceMachineModal";
 import Card from "@components/Card/Default";
-import Select from "react-select";
-
-import { Text, Box, Button, Label, Input, Flex } from "theme-ui";
+import { VariationSM } from "@lib/models/common/Slice";
 
 const Error = ({ msg }: { msg?: string }) => (
   <Text as="span" sx={{ fontSize: 12, color: "error", mt: "5px", ml: 2 }}>
@@ -17,9 +17,14 @@ const Error = ({ msg }: { msg?: string }) => (
 );
 const AddVariationModal: React.FunctionComponent<{
   isOpen: boolean;
+  loading?: boolean;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   onClose: () => any;
-  onSubmit: (id: string, name: string, copiedVariation: VariationSM) => void;
+  onSubmit: (
+    id: string,
+    name: string,
+    copiedVariation: VariationSM,
+  ) => Promise<void>;
   initialVariation: VariationSM;
   variations: ReadonlyArray<VariationSM>;
 }> = ({ isOpen, onClose, onSubmit, initialVariation, variations }) => {
@@ -31,6 +36,7 @@ const AddVariationModal: React.FunctionComponent<{
     value: initialVariation.id,
     label: initialVariation.name,
   });
+  const [isAddingVariation, setIsAddingVariation] = useState(false);
 
   function validateForm({
     id,
@@ -70,7 +76,7 @@ const AddVariationModal: React.FunctionComponent<{
   }
 
   function generateId(str: string) {
-    const slug = Variation.generateId(str);
+    const slug = camelCase(str);
     setGeneratedId(slug);
   }
 
@@ -110,7 +116,9 @@ const AddVariationModal: React.FunctionComponent<{
     else {
       const copiedVariation = variations.find((v) => v.id === origin.value);
       if (copiedVariation) {
-        onSubmit(generatedId, name, copiedVariation);
+        setIsAddingVariation(true);
+        await onSubmit(generatedId, name, copiedVariation);
+        setIsAddingVariation(false);
         handleClose();
       }
     }
@@ -148,16 +156,16 @@ const AddVariationModal: React.FunctionComponent<{
               sx={{ textAlign: "left" }}
               HeaderContent={<Text as="h2">Add new Variation</Text>}
               FooterContent={
-                <Flex sx={{ justifyContent: "flex-end" }}>
-                  <Button onClick={handleClose} mr={2} variant="secondary">
+                <Box gap={16} alignItems="center">
+                  <Button onClick={handleClose} color="grey">
                     Cancel
                   </Button>
-                  <Button type="submit">Submit</Button>
-                </Flex>
+                  <Button loading={isAddingVariation}>Submit</Button>
+                </Box>
               }
               close={handleClose}
             >
-              <Box sx={{ pb: 4, mt: 4 }}>
+              <Box flexDirection="column" padding={{ block: 16 }}>
                 <Label htmlFor="name" sx={{ mb: 1 }}>
                   Variation name*
                   {errors.name ? <Error msg={errors.name} /> : ""}
@@ -179,7 +187,7 @@ const AddVariationModal: React.FunctionComponent<{
                   in Prismic
                 </Text>
               </Box>
-              <Box sx={{ pb: 4 }}>
+              <Box flexDirection="column" padding={{ bottom: 16 }}>
                 <Label htmlFor="id" sx={{ mb: 1 }}>
                   Variation ID*{errors.id ? <Error msg={errors.id} /> : ""}
                 </Label>
@@ -201,7 +209,7 @@ const AddVariationModal: React.FunctionComponent<{
                 </Text>
               </Box>
 
-              <Box sx={{ pb: 4 }}>
+              <Box flexDirection="column" padding={{ bottom: 8 }}>
                 <Label htmlFor="origin" sx={{ mb: 1 }}>
                   Duplicate from
                 </Label>

package/lib/builders/SliceBuilder/Sidebar/index.tsx

@@ -1,44 +1,35 @@
 import { Box, Button, Gradient } from "@prismicio/editor-ui";
 import { useRouter } from "next/router";
-import { type Dispatch, type FC, type SetStateAction, useState } from "react";
+import { type FC, useState } from "react";
+import { toast } from "react-toastify";
 
 import AddVariationModal from "@builders/SliceBuilder/Sidebar/AddVariationModal";
-import type { SliceBuilderState } from "@builders/SliceBuilder";
 import { DeleteVariationModal } from "@components/DeleteVariationModal";
 import { RenameVariationModal } from "@components/Forms/RenameVariationModal";
 import ScreenshotChangesModal from "@components/ScreenshotChangesModal";
-import type { ComponentUI } from "@lib/models/common/ComponentUI";
 import type { VariationSM } from "@lib/models/common/Slice";
-import { Variation } from "@lib/models/common/Variation";
 import { SharedSliceCard } from "@src/features/slices/sliceCards/SharedSliceCard";
 import { SLICES_CONFIG } from "@src/features/slices/slicesConfig";
 import { useScreenshotChangesModal } from "@src/hooks/useScreenshotChangesModal";
+import { updateSlice } from "@src/apiClient";
+import { copySliceVariation } from "@src/domain/slice";
+import { useSliceState } from "@src/features/slices/sliceBuilder/SliceBuilderProvider";
 import useSliceMachineActions from "@src/modules/useSliceMachineActions";
 
-type SidebarProps = {
-  slice: ComponentUI;
-  variation: VariationSM;
-  sliceBuilderState: SliceBuilderState;
-  setSliceBuilderState: Dispatch<SetStateAction<SliceBuilderState>>;
-};
-
 type DialogState =
-  | { type: "ADD_VARIATION"; variation?: undefined }
-  | { type: "RENAME_VARIATION"; variation: VariationSM }
-  | { type: "DELETE_VARIATION"; variation: VariationSM }
+  | { type: "ADD_VARIATION"; variation?: undefined; loading?: boolean }
+  | { type: "RENAME_VARIATION"; variation: VariationSM; loading?: boolean }
+  | { type: "DELETE_VARIATION"; variation: VariationSM; loading?: boolean }
   | undefined;
 
-export const Sidebar: FC<SidebarProps> = (props) => {
-  const { slice, variation, sliceBuilderState, setSliceBuilderState } = props;
-
+export const Sidebar: FC = () => {
+  const { slice, variation, setSlice } = useSliceState();
   const [dialog, setDialog] = useState<DialogState>();
-
   const screenshotChangesModal = useScreenshotChangesModal();
-  const { sliceFilterFn, defaultVariationSelector } =
+  const { sliceFilterFn, defaultVariationSelector, onUploadSuccess } =
     screenshotChangesModal.modalPayload;
-
-  const { copyVariationSlice, updateSlice } = useSliceMachineActions();
   const router = useRouter();
+  const { saveSliceSuccess } = useSliceMachineActions();
 
   return (
     <>
@@ -48,10 +39,16 @@ export const Sidebar: FC<SidebarProps> = (props) => {
             action={{
               type: "menu",
               onRename: () => {
-                setDialog({ type: "RENAME_VARIATION", variation: v });
+                setDialog({
+                  type: "RENAME_VARIATION",
+                  variation: v,
+                });
               },
               onRemove: () => {
-                setDialog({ type: "DELETE_VARIATION", variation: v });
+                setDialog({
+                  type: "DELETE_VARIATION",
+                  variation: v,
+                });
               },
               removeDisabled: slice.model.variations.length <= 1,
             }}
@@ -64,6 +61,9 @@ export const Sidebar: FC<SidebarProps> = (props) => {
                   sliceID: slice.model.id,
                   variationID: v.id,
                 },
+                onUploadSuccess: (newSlice) => {
+                  setSlice(newSlice);
+                },
               });
             }}
             replace
@@ -103,6 +103,7 @@ export const Sidebar: FC<SidebarProps> = (props) => {
       <ScreenshotChangesModal
         slices={sliceFilterFn([slice])}
         defaultVariationSelector={defaultVariationSelector}
+        onUploadSuccess={onUploadSuccess}
       />
       <RenameVariationModal
         isOpen={dialog?.type === "RENAME_VARIATION"}
@@ -111,8 +112,6 @@ export const Sidebar: FC<SidebarProps> = (props) => {
         }}
         slice={slice}
         variation={dialog?.variation}
-        sliceBuilderState={sliceBuilderState}
-        setSliceBuilderState={setSliceBuilderState}
       />
       <DeleteVariationModal
         isOpen={dialog?.type === "DELETE_VARIATION"}
@@ -121,8 +120,6 @@ export const Sidebar: FC<SidebarProps> = (props) => {
         }}
         slice={slice}
         variation={dialog?.variation}
-        sliceBuilderState={sliceBuilderState}
-        setSliceBuilderState={setSliceBuilderState}
       />
       <AddVariationModal
         initialVariation={variation}
@@ -130,27 +127,28 @@ export const Sidebar: FC<SidebarProps> = (props) => {
         onClose={() => {
           setDialog(undefined);
         }}
-        onSubmit={(id, name, copiedVariation) => {
-          copyVariationSlice(id, name, copiedVariation);
+        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,
+            });
 
-          // We have to immediately save the new variation to prevent an
-          // infinite loop related to screenshots handling.
-          const newVariation = Variation.copyValue(copiedVariation, id, name);
-          const newSlice = {
-            ...slice,
-            model: {
-              ...slice.model,
-              variations: [...slice.model.variations, newVariation],
-            },
-          };
-          updateSlice(newSlice, setSliceBuilderState);
+            void router.replace(url);
+          } catch (error) {
+            const message = `Could not add variation \`${name}\``;
+            console.error(message, error);
 
-          const url = SLICES_CONFIG.getBuilderPagePathname({
-            libraryName: newSlice.href,
-            sliceName: newSlice.model.name,
-            variationId: newVariation.id,
-          });
-          void router.replace(url);
+            toast.error(message);
+          }
         }}
         variations={slice.model.variations}
       />

package/lib/builders/SliceBuilder/SimulatorButton/index.tsx

@@ -70,24 +70,10 @@ const SimulatorOnboardingTooltip: React.FC<
   );
 };
 
-const NeedToSaveTooltip: React.FC = () => (
-  <ReactTooltipPortal>
-    <ReactTooltip
-      clickable
-      place="bottom"
-      effect="solid"
-      delayHide={500}
-      id="simulator-button-tooltip"
-    >
-      Save your work in order to simulate
-    </ReactTooltip>
-  </ReactTooltipPortal>
-);
-
 const SimulatorButton: React.FC<{
   isSimulatorAvailableForFramework: boolean;
-  isTouched: boolean;
-}> = ({ isSimulatorAvailableForFramework, isTouched }) => {
+  disabled: boolean;
+}> = ({ isSimulatorAvailableForFramework, disabled }) => {
   const router = useRouter();
 
   const ref = useRef<HTMLButtonElement | null>(null);
@@ -115,16 +101,9 @@ const SimulatorButton: React.FC<{
     }
   };
 
-  const disabled = !isSimulatorAvailableForFramework || isTouched;
-
   const shouldShowSimulatorTooltip =
     isSimulatorAvailableForFramework && !hasSeenSimulatorTooltip;
 
-  const shouldShowNeedToSaveTooltip =
-    isSimulatorAvailableForFramework &&
-    shouldShowSimulatorTooltip === false &&
-    isTouched;
-
   return (
     <span
       data-tip={true}
@@ -146,7 +125,7 @@ const SimulatorButton: React.FC<{
           disabled={disabled}
           renderStartIcon={() => (
             <PlayCircleIcon
-              color={tokens.color.greyLight11}
+              color={tokens.color.greyLight1}
               height={tokens.size[24]}
               style={{
                 // TODO(DT-1538): our icons should have a `viewBox` of 24px.
@@ -155,16 +134,13 @@ const SimulatorButton: React.FC<{
               width={tokens.size[24]}
             />
           )}
-          color="grey"
         >
           Simulate
         </Button>
       </SimulatorOnboardingTooltip>
       {isSimulatorAvailableForFramework === false ? (
         <SimulatorNotSupportedTooltip />
-      ) : shouldShowNeedToSaveTooltip ? (
-        <NeedToSaveTooltip />
-      ) : null}
+      ) : undefined}
     </span>
   );
 };

package/lib/builders/SliceBuilder/index.tsx

@@ -1,23 +1,10 @@
-import { Box, Button } from "@prismicio/editor-ui";
-import {
-  type Dispatch,
-  type FC,
-  type SetStateAction,
-  useEffect,
-  useState,
-} from "react";
-
-import {
-  type ToastPayload,
-  handleRemoteResponse,
-} from "@src/modules/toaster/utils";
+import { Box } from "@prismicio/editor-ui";
+import { type FC } from "react";
 
 import FieldZones from "./FieldZones";
 import { Sidebar } from "./Sidebar";
 
-import useSliceMachineActions from "src/modules/useSliceMachineActions";
 import { useSelector } from "react-redux";
-import { SliceMachineStoreType } from "@src/redux/type";
 
 import SimulatorButton from "@builders/SliceBuilder/SimulatorButton";
 import {
@@ -28,76 +15,17 @@ import {
   AppLayoutContent,
   AppLayoutHeader,
 } from "@components/AppLayout";
-import { VariationSM } from "@lib/models/common/Slice";
-import { ComponentUI } from "@lib/models/common/ComponentUI";
-
 import { FloatingBackButton } from "@src/features/slices/sliceBuilder/FloatingBackButton";
 import { selectIsSimulatorAvailableForFramework } from "@src/modules/environment";
-import { isSelectedSliceTouched } from "@src/modules/selectedSlice/selectors";
-import { ComponentWithSliceProps } from "@src/layouts/WithSlice";
+import { useSliceState } from "@src/features/slices/sliceBuilder/SliceBuilderProvider";
+import { AutoSaveStatusIndicator } from "@src/features/autoSave/AutoSaveStatusIndicator";
 
-export type SliceBuilderState = ToastPayload & { loading: boolean };
-
-export const initialState: SliceBuilderState = {
-  loading: false,
-  done: false,
-};
-
-const SliceBuilder: ComponentWithSliceProps = ({ slice, variation }) => {
-  const { openToaster } = useSliceMachineActions();
-  const isTouched = useSelector((store: SliceMachineStoreType) =>
-    isSelectedSliceTouched(store, slice.from, slice.model.id),
-  );
+export const SliceBuilder: FC = () => {
+  const { slice, autoSaveStatus } = useSliceState();
 
-  // We need to move this state to somewhere global to update the UI if any action from anywhere save or update to the filesystem I'd guess
-  const [state, setState] = useState<SliceBuilderState>(initialState);
-
-  useEffect(() => {
-    if (isTouched) {
-      setState(initialState);
-    }
-  }, [isTouched]);
-
-  // activate/deactivate Success message
-  useEffect(() => {
-    if (state.done) {
-      handleRemoteResponse(openToaster)(state);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [state]);
-
-  // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
-  if (!variation) return <AppLayout />;
-  else
-    return (
-      <SliceBuilderForVariation
-        setState={setState}
-        slice={slice}
-        variation={variation}
-        isTouched={isTouched}
-        state={state}
-      />
-    );
-};
-
-type SliceBuilderForVariationProps = {
-  setState: Dispatch<SetStateAction<SliceBuilderState>>;
-  slice: ComponentUI;
-  variation: VariationSM;
-  isTouched: boolean;
-  state: SliceBuilderState;
-};
-const SliceBuilderForVariation: FC<SliceBuilderForVariationProps> = ({
-  setState,
-  slice,
-  variation,
-  isTouched,
-  state,
-}) => {
   const isSimulatorAvailableForFramework = useSelector(
     selectIsSimulatorAvailableForFramework,
   );
-  const { updateSlice } = useSliceMachineActions();
 
   return (
     <AppLayout>
@@ -105,20 +33,11 @@ const SliceBuilderForVariation: FC<SliceBuilderForVariationProps> = ({
         <AppLayoutBackButton url="/slices" />
         <AppLayoutBreadcrumb folder="Slices" page={slice.model.name} />
         <AppLayoutActions>
+          <AutoSaveStatusIndicator status={autoSaveStatus} />
           <SimulatorButton
             isSimulatorAvailableForFramework={isSimulatorAvailableForFramework}
-            isTouched={!!isTouched}
+            disabled={autoSaveStatus !== "saved"}
           />
-          <Button
-            loading={state.loading}
-            disabled={!isTouched || state.loading}
-            onClick={() => {
-              updateSlice(slice, setState);
-            }}
-            data-cy="builder-save-button"
-          >
-            Save
-          </Button>
         </AppLayoutActions>
       </AppLayoutHeader>
       <AppLayoutContent>
@@ -128,13 +47,8 @@ const SliceBuilderForVariation: FC<SliceBuilderForVariationProps> = ({
           gap={16}
           gridTemplateColumns="320px 1fr"
         >
-          <Sidebar
-            slice={slice}
-            variation={variation}
-            sliceBuilderState={state}
-            setSliceBuilderState={setState}
-          />
-          <FieldZones variation={variation} />
+          <Sidebar />
+          <FieldZones />
         </Box>
         <FloatingBackButton />
       </AppLayoutContent>

package/lib/builders/common/Zone/Card/components/Hints/CodeBlock.tsx

@@ -83,7 +83,11 @@ const CodeBlock: React.FC<CodeBlockProps> = ({ code, lang }) => {
         </Code>
       </Flex>
       <Box>
-        <Button onClick={copy} variant="textButton">
+        <Button
+          aria-label={isCopied ? "Code snippet copied" : "Copy code snippet"}
+          onClick={copy}
+          variant="textButton"
+        >
           {isCopied ? (
             <MdCheck
               size={16}

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

@@ -1,8 +1,9 @@
 import { Ref, SetStateAction, useEffect, useRef, useState } from "react";
 import { Formik, Form, Field } from "formik";
-import { Input, Flex, Text, Button, useThemeUI } from "theme-ui";
+import { Input, Flex, Text, useThemeUI } from "theme-ui";
 import * as CSS from "csstype";
 import { AnyObjectSchema } from "yup";
+import { Button } from "@prismicio/editor-ui";
 
 import { validateId } from "@lib/forms/defaults";
 import { createInitialValues, createValidationSchema } from "@lib/forms";
@@ -118,7 +119,7 @@ const NewField: React.FC<NewField> = ({
       validationSchema={validationSchema}
       initialValues={initialValues}
     >
-      {({ errors, values, setValues, setFieldValue }) => (
+      {({ errors, values, setValues, setFieldValue, submitForm }) => (
         <Form data-cy="new-field-form">
           <Flex
             as="li"
@@ -162,6 +163,11 @@ const NewField: React.FC<NewField> = ({
                 onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                   handleLabelChange(e, values, setValues)
                 }
+                onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
+                  if (e.key === "Enter") {
+                    void submitForm();
+                  }
+                }}
                 name="label"
                 placeholder="Field Name"
                 type="text"
@@ -206,6 +212,11 @@ const NewField: React.FC<NewField> = ({
                 onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                   handleIdChange(e, setFieldValue)
                 }
+                onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
+                  if (e.key === "Enter") {
+                    void submitForm();
+                  }
+                }}
                 name="id"
                 placeholder="e.g. buttonLink"
                 type="text"
@@ -237,23 +248,13 @@ const NewField: React.FC<NewField> = ({
               <ErrorTooltip error={errors.id} />
             </Flex>
             <Flex sx={{ gap: 2 }}>
-              <Button
-                onClick={onCancelNewField}
-                variant="secondary"
-                type="button"
-              >
+              <Button onClick={onCancelNewField} color="grey">
                 Cancel
               </Button>
               <Button
-                sx={{
-                  fontWeight: "400",
-                  paddingBlock: "8px",
-                  paddingInline: "16px",
-                  fontSize: "14px",
-                  borderRadius: "4px",
-                  lineHeight: "21px",
+                onClick={() => {
+                  void submitForm();
                 }}
-                type="submit"
               >
                 Add
               </Button>

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

@@ -86,6 +86,8 @@ const FieldZone = ({
                   draggableId: `list-item-${item.key}`,
                   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
                   isRepeatableCustomType,
+                  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/restrict-template-expressions, @typescript-eslint/no-unsafe-member-access
+                  dataCy: `list-item-${item.key}`,
                 };
 
                 // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions

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

@@ -85,6 +85,7 @@ const Zone = ({
                 size="small"
                 // TODO(DT-1710): add the missing `flexShrink: 0` property to the Editor's Switch component.
                 style={{ flexShrink: 0 }}
+                data-cy="code-snippets-switch"
               />
               <Button
                 data-cy={`add-${
@@ -93,7 +94,8 @@ const Zone = ({
                 }-field`}
                 onClick={enterSelectMode}
                 startIcon="add"
-                grey="grey"
+                color="grey"
+                disabled={newFieldData !== null}
               >
                 Add a new field
               </Button>

package/lib/models/common/ComponentUI.ts

@@ -58,18 +58,4 @@ export const ComponentUI = {
       return component.model.variations[0];
     }
   },
-
-  updateVariation(component: ComponentUI, variationId: string) {
-    return (mutateCallbackFn: (v: VariationSM) => VariationSM): ComponentUI => {
-      const variations = component.model.variations.map((v) => {
-        if (v.id === variationId) return mutateCallbackFn(v);
-        else return v;
-      });
-
-      return {
-        ...component,
-        model: { ...component.model, variations },
-      };
-    };
-  },
 };

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

@@ -3,7 +3,6 @@ import {
   CompositeSlice,
   LegacySlice,
 } from "@prismicio/types-internal/lib/customtypes/widgets/slices";
-import { SlicesSM } from "../Slices";
 import { ComponentUI } from "../ComponentUI";
 
 export type NonSharedSliceInSliceZone = {
@@ -14,31 +13,3 @@ export interface SliceZoneSlice {
   type: SlicesTypes;
   payload: ComponentUI | NonSharedSliceInSliceZone;
 }
-
-export const SliceZone = {
-  addSharedSlice(sz: SlicesSM, key: string): SlicesSM {
-    const value = sz.value.concat([
-      {
-        key,
-        value: {
-          type: "SharedSlice",
-        },
-      },
-    ]);
-    return {
-      ...sz,
-      value,
-    };
-  },
-  removeSharedSlice(sz: SlicesSM, key: string): SlicesSM {
-    const value = sz.value.filter(({ key: k }) => k !== key);
-
-    return {
-      ...sz,
-      value,
-    };
-  },
-  createEmpty(key: string): SlicesSM {
-    return { key, value: [] };
-  },
-};