slice-machine-ui 1.11.1-dev-slices-templates-feature.3 → 1.11.1-dev-next-release.5

package/components/ModalFormCard/index.tsx

@@ -6,9 +6,8 @@ import {
   FormikErrors,
   FormikTouched,
   FormikValues,
-  FormikProps,
 } from "formik";
-import { SetStateAction } from "react";
+import { ReactNode, SetStateAction } from "react";
 import { Flex, Heading, Close, Button as ThemeButton } from "theme-ui";
 
 import { Button } from "@components/Button";
@@ -45,9 +44,7 @@ type ModalCardProps<T extends FormikValues> = {
   omitFooter?: boolean;
   isLoading?: boolean;
   dataCy?: string;
-  actionMessage?:
-    | ((props: FormikProps<T>) => React.ReactNode)
-    | React.ReactNode;
+  actionMessage?: ReactNode;
 };
 
 function ModalCard<Values extends FormikValues>({
@@ -91,108 +88,102 @@ function ModalCard<Values extends FormikValues>({
           onSubmit(values);
         }}
       >
-        {(formikProps) => {
-          const {
-            isValid,
-            isSubmitting,
-            values,
-            errors,
-            touched,
-            setFieldValue,
-            setValues,
-          } = formikProps;
-
-          return (
-            <Form
-              id={formId}
-              {...(dataCy != null ? { "data-cy": dataCy } : null)}
-            >
-              <Card
-                borderFooter
-                footerSx={{
-                  p: 3,
-                  position: "sticky",
-                  bottom: 0,
-                  background: "gray",
-                }}
-                bodySx={{ px: 4, py: 4 }}
-                sx={{ border: "none" }}
-                {...cardProps}
-                Header={({ radius }: { radius: string | number }) => (
+        {({
+          isValid,
+          isSubmitting,
+          values,
+          errors,
+          touched,
+          setFieldValue,
+          setValues,
+        }) => (
+          <Form
+            id={formId}
+            {...(dataCy != null ? { "data-cy": dataCy } : null)}
+          >
+            <Card
+              borderFooter
+              footerSx={{
+                p: 3,
+                position: "sticky",
+                bottom: 0,
+                background: "gray",
+              }}
+              bodySx={{ px: 4, py: 4 }}
+              sx={{ border: "none" }}
+              {...cardProps}
+              Header={({ radius }: { radius: string | number }) => (
+                <Flex
+                  sx={{
+                    position: "sticky",
+                    top: 0,
+                    zIndex: 1,
+                    p: "16px",
+                    pl: 4,
+                    bg: "headSection",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    borderTopLeftRadius: radius,
+                    borderTopRightRadius: radius,
+                    // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+                    borderBottom: (t) => `1px solid ${t.colors?.borders}`,
+                  }}
+                >
+                  <Heading sx={{ fontSize: "20px" }}>{title}</Heading>
+                  <Close type="button" onClick={close} />
+                </Flex>
+              )}
+              Footer={
+                !omitFooter ? (
                   <Flex
                     sx={{
-                      position: "sticky",
-                      top: 0,
-                      zIndex: 1,
-                      p: "16px",
-                      pl: 4,
-                      bg: "headSection",
-                      alignItems: "center",
-                      justifyContent: "space-between",
-                      borderTopLeftRadius: radius,
-                      borderTopRightRadius: radius,
-                      // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-                      borderBottom: (t) => `1px solid ${t.colors?.borders}`,
+                      alignItems: "space-between",
                     }}
                   >
-                    <Heading sx={{ fontSize: "20px" }}>{title}</Heading>
-                    <Close type="button" onClick={close} />
-                  </Flex>
-                )}
-                Footer={
-                  !omitFooter ? (
-                    <Flex
-                      sx={{
-                        alignItems: "space-between",
-                      }}
-                    >
-                      <Flex sx={{ fontSize: "14px", alignItems: "center" }}>
-                        {typeof actionMessage === "function"
-                          ? actionMessage(formikProps)
-                          : actionMessage}
-                      </Flex>
-                      <Flex sx={{ ml: "auto" }}>
-                        <ThemeButton
-                          mr={2}
-                          type="button"
-                          onClick={close}
-                          variant="secondary"
-                          disabled={isSubmitting || isLoading}
-                        >
-                          Cancel
-                        </ThemeButton>
-                        <Button
-                          label={buttonLabel}
-                          form={formId}
-                          type="submit"
-                          disabled={!isValid || isSubmitting || isLoading}
-                          isLoading={isSubmitting || isLoading}
-                          sx={{
-                            fontWeight: "400",
-                            paddingBlock: "8px",
-                            paddingInline: "16px",
-                            fontSize: "14px",
-                            borderRadius: "4px",
-                          }}
-                        />
-                      </Flex>
+                    <Flex sx={{ fontSize: "14px", alignItems: "center" }}>
+                      {actionMessage}
                     </Flex>
-                  ) : null
-                }
-              >
-                {children({
-                  isValid,
-                  isSubmitting,
-                  values,
-                  errors,
-                  touched,
-                  setFieldValue,
-                  setValues,
-                })}
-              </Card>
-            </Form>
-          );
-        }}
+                    <Flex sx={{ ml: "auto" }}>
+                      <ThemeButton
+                        mr={2}
+                        type="button"
+                        onClick={close}
+                        variant="secondary"
+                        disabled={isSubmitting || isLoading}
+                      >
+                        Cancel
+                      </ThemeButton>
+                      <Button
+                        label={buttonLabel}
+                        form={formId}
+                        type="submit"
+                        disabled={!isValid || isSubmitting || isLoading}
+                        isLoading={isSubmitting || isLoading}
+                        sx={{
+                          fontWeight: "400",
+                          paddingBlock: "8px",
+                          paddingInline: "16px",
+                          fontSize: "14px",
+                          borderRadius: "4px",
+                        }}
+                      />
+                    </Flex>
+                  </Flex>
+                ) : null
+              }
+            >
+              {children({
+                isValid,
+                isSubmitting,
+                values,
+                errors,
+                touched,
+                setFieldValue,
+                setValues,
+              })}
+            </Card>
+          </Form>
+        )}
       </Formik>
     </SliceMachineModal>
   );

package/lib/builders/CustomTypeBuilder/SliceZone/UpdateSliceZoneModal.tsx

@@ -1,6 +1,7 @@
-import { ComponentUI } from "@lib/models/common/ComponentUI";
 import ModalFormCard from "../../../../components/ModalFormCard";
+
 import UpdateSliceZoneModalList from "./UpdateSliceZoneModalList";
+import { ComponentUI } from "@lib/models/common/ComponentUI";
 
 interface UpdateSliceModalProps {
   isOpen: boolean;
@@ -37,7 +38,7 @@ const UpdateSliceZoneModal: React.FC<UpdateSliceModalProps> = ({
         sliceKeys: slicesInSliceZone.map((slice) => slice.model.id),
       }}
       content={{
-        title: "Update slices",
+        title: "Update Slices",
       }}
       dataCy="update-slices-modal"
     >

package/lib/builders/CustomTypeBuilder/SliceZone/UpdateSliceZoneModalList.tsx

@@ -1,5 +1,5 @@
 import { FieldArray } from "formik";
-import { Checkbox, Box, Text } from "theme-ui";
+import { Checkbox, Box } from "theme-ui";
 
 import { SharedSlice } from "@lib/models/ui/Slice";
 
@@ -10,8 +10,7 @@ import { ComponentUI } from "@lib/models/common/ComponentUI";
 const UpdateSliceZoneModalList: React.FC<{
   availableSlices: ReadonlyArray<ComponentUI>;
   values: SliceZoneFormValues;
-  placeholderSlices?: ReadonlyArray<ComponentUI>;
-}> = ({ availableSlices, values, placeholderSlices }) => (
+}> = ({ availableSlices, values }) => (
   <FieldArray
     name="sliceKeys"
     render={(arrayHelpers) => (
@@ -20,10 +19,6 @@ const UpdateSliceZoneModalList: React.FC<{
         elems={availableSlices}
         defineElementKey={(slice: ComponentUI) => slice.model.name}
         renderElem={(slice: ComponentUI) => {
-          const isPlaceholderSlice = placeholderSlices?.find(
-            (s) => s.model.id === slice.model.id
-          );
-
           return SharedSlice.render({
             slice: slice,
             Wrapper: ({ slice, children, sx }) => {
@@ -31,10 +26,6 @@ const UpdateSliceZoneModalList: React.FC<{
                 <Box
                   data-testid="slicezone-modal-item"
                   onClick={() => {
-                    if (isPlaceholderSlice) {
-                      return;
-                    }
-
                     const isInSliceZone = values.sliceKeys.includes(
                       slice.model.id
                     );
@@ -46,37 +37,16 @@ const UpdateSliceZoneModalList: React.FC<{
                     arrayHelpers.push(slice.model.id);
                   }}
                   key={`${slice.from}-${slice.model.name}`}
-                  sx={
-                    !isPlaceholderSlice
-                      ? {
-                          cursor: "pointer",
-                          ...sx,
-                        }
-                      : {
-                          opacity: 0.5,
-                          ...sx,
-                        }
-                  }
+                  sx={{
+                    cursor: "pointer",
+                    ...sx,
+                  }}
                 >
                   {children}
                 </Box>
               );
             },
             StatusOrCustom: ({ slice }: { slice: ComponentUI }) => {
-              if (isPlaceholderSlice) {
-                return (
-                  <Text
-                    sx={{
-                      fontSize: 12,
-                      color: "purpleStrong",
-                      fontWeight: "bold",
-                    }}
-                  >
-                    Coming soon
-                  </Text>
-                );
-              }
-
               const isInSliceZone = values.sliceKeys.includes(slice.model.id);
 
               return (

package/lib/builders/CustomTypeBuilder/SliceZone/index.tsx

@@ -1,13 +1,4 @@
-import {
-  Button,
-  Box,
-  Switch,
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  Icon,
-} from "@prismicio/editor-ui";
+import { Button, Box, Switch } from "@prismicio/editor-ui";
 import { useEffect, useMemo, useState } from "react";
 import { useSelector } from "react-redux";
 import { BaseStyles } from "theme-ui";
@@ -24,22 +15,16 @@ import type { SlicesSM } from "@lib/models/common/Slices";
 import { List, ListHeader } from "@src/components/List";
 import { SliceZoneBlankSlate } from "@src/features/customTypes/customTypesBuilder/SliceZoneBlankSlate";
 import { useModelStatus } from "@src/hooks/useModelStatus";
-import { telemetry } from "@src/apiClient";
 import {
   getFrontendSlices,
   getLibraries,
   getRemoteSlices,
 } from "@src/modules/slices";
 import type { SliceMachineStoreType } from "@src/redux/type";
-import { useSlicesTemplates } from "@src/features/slicesTemplates/useSlicesTemplates";
-import { createSlicesTemplates } from "@src/features/slicesTemplates/actions/createSlicesTemplates";
 
 import { DeleteSliceZoneModal } from "./DeleteSliceZoneModal";
 import { SlicesList } from "./List";
 import UpdateSliceZoneModal from "./UpdateSliceZoneModal";
-import { SlicesTemplatesModal } from "./SlicesTemplatesModal";
-import { getState } from "@src/apiClient";
-import useSliceMachineActions from "@src/modules/useSliceMachineActions";
 
 const mapAvailableAndSharedSlices = (
   sliceZone: SlicesSM,
@@ -115,11 +100,7 @@ const SliceZone: React.FC<SliceZoneProps> = ({
   sliceZone,
   tabId,
 }) => {
-  const availableSlicesTemplates = useSlicesTemplates();
-  const [isSlicesTemplatesModalOpen, setIsSlicesTemplatesModalOpen] =
-    useState(false);
-  const [isUpdateSliceZoneModalOpen, setIsUpdateSliceZoneModalOpen] =
-    useState(false);
+  const [formIsOpen, setFormIsOpen] = useState(false);
   const [isCreateSliceModalOpen, setIsCreateSliceModalOpen] = useState(false);
   const { remoteSlices, libraries, slices } = useSelector(
     (store: SliceMachineStoreType) => ({
@@ -128,7 +109,6 @@ const SliceZone: React.FC<SliceZoneProps> = ({
       slices: getFrontendSlices(store),
     })
   );
-  const { createSliceSuccess } = useSliceMachineActions();
   const localLibraries: readonly LibraryUI[] = libraries.filter(
     (library) => library.isLocal
   );
@@ -162,69 +142,33 @@ const SliceZone: React.FC<SliceZoneProps> = ({
     .map((e) => (e.payload as NonSharedSliceInSliceZone).key);
 
   const onAddNewSlice = () => {
-    setIsUpdateSliceZoneModalOpen(true);
+    setFormIsOpen(true);
   };
 
   const onCreateNewSlice = () => {
     setIsCreateSliceModalOpen(true);
   };
 
-  const openSlicesTemplatesModal = () => {
-    setIsSlicesTemplatesModalOpen(true);
-
-    void telemetry.track({
-      event: "custom-type:open-add-from-templates",
-      customTypeId: customType.id,
-      customTypeFormat: customType.format,
-    });
-  };
-
   return (
     <Box flexDirection="column">
       <List>
         <ListHeader
           actions={
-            sliceZone && slicesInSliceZone.length > 0 ? (
-              <Box gap={8}>
-                <DropdownMenu>
-                  <DropdownMenuTrigger>
-                    <Button variant="secondary" startIcon="add">
-                      Add
-                    </Button>
-                  </DropdownMenuTrigger>
-
-                  <DropdownMenuContent align="end">
-                    <DropdownMenuItem
-                      startIcon={<Icon name="add" />}
-                      onSelect={onCreateNewSlice}
-                    >
-                      Blank slice
-                    </DropdownMenuItem>
-
-                    {availableSlicesTemplates.length > 0 ? (
-                      <DropdownMenuItem
-                        onSelect={() => {
-                          openSlicesTemplatesModal();
-                        }}
-                        startIcon={<Icon name="contentCopy" />}
-                      >
-                        Slice template
-                      </DropdownMenuItem>
-                    ) : undefined}
-                  </DropdownMenuContent>
-                </DropdownMenu>
-
+            sliceZone ? (
+              <>
+                <Button onClick={onCreateNewSlice} startIcon="add">
+                  New slice
+                </Button>
                 {availableSlices.length > 0 ? (
                   <Button
                     data-cy="update-slices"
                     onClick={onAddNewSlice}
                     startIcon="edit"
-                    variant="secondary"
                   >
-                    Update slices
+                    Update Slices
                   </Button>
                 ) : undefined}
-              </Box>
+              </>
             ) : undefined
           }
           toggle={
@@ -260,14 +204,12 @@ const SliceZone: React.FC<SliceZoneProps> = ({
           <SliceZoneBlankSlate
             onAddNewSlice={onAddNewSlice}
             onCreateNewSlice={onCreateNewSlice}
-            openSlicesTemplatesModal={openSlicesTemplatesModal}
             projectHasAvailableSlices={availableSlices.length > 0}
-            isSlicesTemplatesSupported={availableSlicesTemplates.length > 0}
           />
         )
       ) : undefined}
       <UpdateSliceZoneModal
-        isOpen={isUpdateSliceZoneModalOpen}
+        isOpen={formIsOpen}
         formId={`tab-slicezone-form-${tabId}`}
         availableSlices={availableSlices}
         slicesInSliceZone={sharedSlicesInSliceZone}
@@ -275,36 +217,7 @@ const SliceZone: React.FC<SliceZoneProps> = ({
           // eslint-disable-next-line @typescript-eslint/no-unsafe-return
           onSelectSharedSlices(sliceKeys, nonSharedSlicesKeysInSliceZone)
         }
-        close={() => setIsUpdateSliceZoneModalOpen(false)}
-      />
-      <SlicesTemplatesModal
-        isOpen={isSlicesTemplatesModalOpen}
-        formId={`tab-slicezone-form-${tabId}`}
-        availableSlicesTemplates={availableSlicesTemplates}
-        onSubmit={({ sliceKeys }) =>
-          void createSlicesTemplates({
-            templateIDs: sliceKeys,
-            localLibrariesNames: localLibraries.map((library) => library.name),
-            onSuccess: async (slicesIds: string[]) => {
-              // TODO(DT-1453): Remove the need of the global getState
-              const serverState = await getState();
-
-              // Update Redux store
-              createSliceSuccess(serverState.libraries);
-
-              // eslint-disable-next-line @typescript-eslint/no-unsafe-return
-              onSelectSharedSlices(
-                slicesIds.concat(
-                  sharedSlicesInSliceZone.map((s) => s.model.id)
-                ),
-                nonSharedSlicesKeysInSliceZone
-              );
-
-              setIsSlicesTemplatesModalOpen(false);
-            },
-          })
-        }
-        close={() => setIsSlicesTemplatesModalOpen(false)}
+        close={() => setFormIsOpen(false)}
       />
       <DeleteSliceZoneModal
         isDeleteSliceZoneModalOpen={isDeleteSliceZoneModalOpen}

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

@@ -1,5 +1,5 @@
-import { Box, ErrorBoundary, Text } from "@prismicio/editor-ui";
-import { FC, Suspense } from "react";
+import { Box } from "@prismicio/editor-ui";
+import type { FC } from "react";
 import type { DropResult } from "react-beautiful-dnd";
 import { useSelector } from "react-redux";
 import type { AnyObjectSchema } from "yup";
@@ -139,54 +139,43 @@ const TabZone: FC<TabZoneProps> = ({
 
   return (
     <Box backgroundColor="grey2" flexDirection="column" gap={8}>
-      <ErrorBoundary>
-        <Suspense
-          fallback={
-            <Box padding={32}>
-              <Text>Loading...</Text>
-            </Box>
-          }
-        >
-          <Zone
-            zoneType="customType"
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-            tabId={tabId}
-            title="Static Zone"
-            dataTip={""}
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-            fields={fields}
-            // @ts-expect-error propsType and typescript are incompatible on this type, we can remove the error when migrating the Zone component
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
-            poolOfFieldsToCheck={poolOfFields}
-            showHints={true}
-            EditModal={EditModal}
-            widgetsArray={ctBuilderArray}
-            onDeleteItem={onDeleteItem}
-            onSave={onSave}
-            onSaveNewField={onSaveNewField}
-            onDragEnd={onDragEnd}
-            renderHintBase={({ item }) =>
-              // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-member-access
-              `data${transformKeyAccessor(item.key)}`
-            }
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-argument
-            renderFieldAccessor={(key) => `data${transformKeyAccessor(key)}`}
-            dataCy="ct-static-zone"
-            isRepeatableCustomType={customType.repeatable}
-          />
-          <SliceZone
-            customType={customType}
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-            tabId={tabId}
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-            sliceZone={sliceZone}
-            onRemoveSharedSlice={onRemoveSharedSlice}
-            onCreateSliceZone={onCreateSliceZone}
-            onDeleteSliceZone={onDeleteSliceZone}
-            onSelectSharedSlices={onSelectSharedSlices}
-          />
-        </Suspense>
-      </ErrorBoundary>
+      <Zone
+        zoneType="customType"
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        tabId={tabId}
+        title="Static Zone"
+        dataTip={""}
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        fields={fields}
+        // @ts-expect-error propsType and typescript are incompatible on this type, we can remove the error when migrating the Zone component
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
+        poolOfFieldsToCheck={poolOfFields}
+        showHints={true}
+        EditModal={EditModal}
+        widgetsArray={ctBuilderArray}
+        onDeleteItem={onDeleteItem}
+        onSave={onSave}
+        onSaveNewField={onSaveNewField}
+        onDragEnd={onDragEnd}
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-member-access
+        renderHintBase={({ item }) => `data${transformKeyAccessor(item.key)}`}
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-argument
+        renderFieldAccessor={(key) => `data${transformKeyAccessor(key)}`}
+        dataCy="ct-static-zone"
+        isRepeatableCustomType={customType.repeatable}
+      />
+
+      <SliceZone
+        customType={customType}
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        tabId={tabId}
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        sliceZone={sliceZone}
+        onRemoveSharedSlice={onRemoveSharedSlice}
+        onCreateSliceZone={onCreateSliceZone}
+        onDeleteSliceZone={onDeleteSliceZone}
+        onSelectSharedSlices={onSelectSharedSlices}
+      />
     </Box>
   );
 };

package/lib/builders/common/Zone/components/EmptyState/index.tsx

@@ -1,5 +1,5 @@
-import { Box, Text, Heading } from "theme-ui";
-import { Button } from "@prismicio/editor-ui";
+import { Box, Button, Text, Heading } from "theme-ui";
+import { FaPlus } from "react-icons/fa";
 
 const ZoneEmptyState = ({
   onEnterSelectMode,
@@ -16,17 +16,18 @@ const ZoneEmptyState = ({
         Add a field to your {zoneName} Zone
       </Text>
     </Box>
-    <Box sx={{ display: "flex", justifyContent: "center", marginTop: 16 }}>
-      <Button
-        variant="secondary"
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-return
-        onClick={() => onEnterSelectMode()}
-        data-cy={`add-${zoneName}-field`}
-        startIcon="add"
-      >
-        Add a new field
-      </Button>
-    </Box>
+    <Button
+      mt={3}
+      variant="buttons.darkSmall"
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+      onClick={() => onEnterSelectMode()}
+      data-cy={`add-${zoneName}-field`}
+    >
+      <FaPlus
+        style={{ marginRight: "8px", position: "relative", top: "2px" }}
+      />{" "}
+      Add a new field
+    </Button>
   </Box>
 );