slice-machine-ui 1.11.1-dev-next-release.4 → 1.11.1-dev-slice-tenplate-feature-2.0

package/components/ModalFormCard/index.tsx

@@ -6,8 +6,9 @@ import {
   FormikErrors,
   FormikTouched,
   FormikValues,
+  FormikProps,
 } from "formik";
-import { ReactNode, SetStateAction } from "react";
+import { SetStateAction } from "react";
 import { Flex, Heading, Close, Button as ThemeButton } from "theme-ui";
 
 import { Button } from "@components/Button";
@@ -44,7 +45,9 @@ type ModalCardProps<T extends FormikValues> = {
   omitFooter?: boolean;
   isLoading?: boolean;
   dataCy?: string;
-  actionMessage?: ReactNode;
+  actionMessage?:
+    | ((props: FormikProps<T>) => React.ReactNode)
+    | React.ReactNode;
 };
 
 function ModalCard<Values extends FormikValues>({
@@ -88,102 +91,108 @@ function ModalCard<Values extends FormikValues>({
           onSubmit(values);
         }}
       >
-        {({
-          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 ? (
+        {(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 }) => (
                   <Flex
                     sx={{
-                      alignItems: "space-between",
+                      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}`,
                     }}
                   >
-                    <Flex sx={{ fontSize: "14px", alignItems: "center" }}>
-                      {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>
+                    <Heading sx={{ fontSize: "20px" }}>{title}</Heading>
+                    <Close type="button" onClick={close} />
                   </Flex>
-                ) : null
-              }
-            >
-              {children({
-                isValid,
-                isSubmitting,
-                values,
-                errors,
-                touched,
-                setFieldValue,
-                setValues,
-              })}
-            </Card>
-          </Form>
-        )}
+                )}
+                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>
+                  ) : null
+                }
+              >
+                {children({
+                  isValid,
+                  isSubmitting,
+                  values,
+                  errors,
+                  touched,
+                  setFieldValue,
+                  setValues,
+                })}
+              </Card>
+            </Form>
+          );
+        }}
       </Formik>
     </SliceMachineModal>
   );

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

@@ -0,0 +1,88 @@
+import { FC } from "react";
+import { Text } from "theme-ui";
+
+import { SliceTemplate } from "@src/features/slicesTemplates/useSlicesTemplates";
+import { Slices } from "@lib/models/common/Slice";
+import { ComponentUI } from "@lib/models/common/ComponentUI";
+import UpdateSliceZoneModalList from "./UpdateSliceZoneModalList";
+import ModalFormCard from "../../../../components/ModalFormCard";
+import { sliceTemplatesComingSoon } from "./sliceTemplatesComingSoon";
+
+interface UpdateSliceModalProps {
+  isOpen: boolean;
+  formId: string;
+  close: () => void;
+  onSubmit: (values: SliceZoneFormValues) => void;
+  availableSlicesTemplates: SliceTemplate[];
+}
+
+export type SliceZoneFormValues = {
+  sliceKeys: string[];
+};
+
+export const SlicesTemplatesModal: FC<UpdateSliceModalProps> = ({
+  isOpen,
+  formId,
+  close,
+  onSubmit,
+  availableSlicesTemplates,
+}) => {
+  return (
+    <ModalFormCard
+      buttonLabel="Create"
+      isOpen={isOpen}
+      formId={formId}
+      close={close}
+      onSubmit={(values: SliceZoneFormValues) => {
+        onSubmit(values);
+      }}
+      initialValues={{
+        sliceKeys: [],
+      }}
+      content={{
+        title: "Create slices from template",
+      }}
+      validate={(values) => {
+        if (values.sliceKeys.length === 0) {
+          return {
+            sliceKeys: "Please select at least one slice template",
+          };
+        }
+      }}
+      actionMessage={({ errors }) =>
+        errors.sliceKeys !== undefined ? (
+          <Text sx={{ color: "error" }}>{errors.sliceKeys}</Text>
+        ) : undefined
+      }
+    >
+      {({ values }) => (
+        <UpdateSliceZoneModalList
+          values={values}
+          placeholderSlices={sliceTemplatesComingSoon}
+          availableSlices={[
+            ...availableSlicesTemplates.map(
+              (slice): ComponentUI => ({
+                extension: "",
+                fileName: "",
+                from: "",
+                href: "",
+                pathToSlice: "",
+                model: Slices.toSM(slice.model),
+                screenshots: Object.entries(slice.screenshots).reduce(
+                  (acc, curr) => ({
+                    ...acc,
+                    [curr[0]]: {
+                      url: curr[1],
+                    },
+                  }),
+                  {}
+                ),
+              })
+            ),
+            ...sliceTemplatesComingSoon,
+          ]}
+        />
+      )}
+    </ModalFormCard>
+  );
+};

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

@@ -1,7 +1,6 @@
+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;
@@ -38,7 +37,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 } from "theme-ui";
+import { Checkbox, Box, Text } from "theme-ui";
 
 import { SharedSlice } from "@lib/models/ui/Slice";
 
@@ -10,7 +10,8 @@ import { ComponentUI } from "@lib/models/common/ComponentUI";
 const UpdateSliceZoneModalList: React.FC<{
   availableSlices: ReadonlyArray<ComponentUI>;
   values: SliceZoneFormValues;
-}> = ({ availableSlices, values }) => (
+  placeholderSlices?: ReadonlyArray<ComponentUI>;
+}> = ({ availableSlices, values, placeholderSlices }) => (
   <FieldArray
     name="sliceKeys"
     render={(arrayHelpers) => (
@@ -19,6 +20,10 @@ 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 }) => {
@@ -26,6 +31,10 @@ const UpdateSliceZoneModalList: React.FC<{
                 <Box
                   data-testid="slicezone-modal-item"
                   onClick={() => {
+                    if (isPlaceholderSlice) {
+                      return;
+                    }
+
                     const isInSliceZone = values.sliceKeys.includes(
                       slice.model.id
                     );
@@ -37,16 +46,37 @@ const UpdateSliceZoneModalList: React.FC<{
                     arrayHelpers.push(slice.model.id);
                   }}
                   key={`${slice.from}-${slice.model.name}`}
-                  sx={{
-                    cursor: "pointer",
-                    ...sx,
-                  }}
+                  sx={
+                    !isPlaceholderSlice
+                      ? {
+                          cursor: "pointer",
+                          ...sx,
+                        }
+                      : {
+                          opacity: 0.5,
+                          ...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,4 +1,13 @@
-import { Button, Box, Switch } from "@prismicio/editor-ui";
+import {
+  Button,
+  Box,
+  Switch,
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  Icon,
+} from "@prismicio/editor-ui";
 import { useEffect, useMemo, useState } from "react";
 import { useSelector } from "react-redux";
 import { BaseStyles } from "theme-ui";
@@ -21,10 +30,15 @@ import {
   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,
@@ -100,7 +114,11 @@ const SliceZone: React.FC<SliceZoneProps> = ({
   sliceZone,
   tabId,
 }) => {
-  const [formIsOpen, setFormIsOpen] = useState(false);
+  const availableSlicesTemplates = useSlicesTemplates();
+  const [isSlicesTemplatesModalOpen, setIsSlicesTemplatesModalOpen] =
+    useState(false);
+  const [isUpdateSliceZoneModalOpen, setIsUpdateSliceZoneModalOpen] =
+    useState(false);
   const [isCreateSliceModalOpen, setIsCreateSliceModalOpen] = useState(false);
   const { remoteSlices, libraries, slices } = useSelector(
     (store: SliceMachineStoreType) => ({
@@ -109,6 +127,7 @@ const SliceZone: React.FC<SliceZoneProps> = ({
       slices: getFrontendSlices(store),
     })
   );
+  const { createSliceSuccess } = useSliceMachineActions();
   const localLibraries: readonly LibraryUI[] = libraries.filter(
     (library) => library.isLocal
   );
@@ -142,33 +161,63 @@ const SliceZone: React.FC<SliceZoneProps> = ({
     .map((e) => (e.payload as NonSharedSliceInSliceZone).key);
 
   const onAddNewSlice = () => {
-    setFormIsOpen(true);
+    setIsUpdateSliceZoneModalOpen(true);
   };
 
   const onCreateNewSlice = () => {
     setIsCreateSliceModalOpen(true);
   };
 
+  const openSlicesTemplatesModal = () => {
+    setIsSlicesTemplatesModalOpen(true);
+  };
+
   return (
     <Box flexDirection="column">
       <List>
         <ListHeader
           actions={
-            sliceZone ? (
-              <>
-                <Button onClick={onCreateNewSlice} startIcon="add">
-                  New slice
-                </Button>
+            sliceZone && slicesInSliceZone.length > 0 ? (
+              <Box gap={8}>
+                <DropdownMenu>
+                  <DropdownMenuTrigger>
+                    <Button variant="secondary" startIcon="add">
+                      Create
+                    </Button>
+                  </DropdownMenuTrigger>
+
+                  <DropdownMenuContent align="end">
+                    <DropdownMenuItem
+                      startIcon={<Icon name="add" />}
+                      onSelect={onCreateNewSlice}
+                    >
+                      Blank slice
+                    </DropdownMenuItem>
+
+                    {availableSlicesTemplates.length > 0 ? (
+                      <DropdownMenuItem
+                        onSelect={() => {
+                          openSlicesTemplatesModal();
+                        }}
+                        startIcon={<Icon name="centerFocusWeak" />}
+                      >
+                        Use a template
+                      </DropdownMenuItem>
+                    ) : undefined}
+                  </DropdownMenuContent>
+                </DropdownMenu>
+
                 {availableSlices.length > 0 ? (
                   <Button
                     data-cy="update-slices"
                     onClick={onAddNewSlice}
                     startIcon="edit"
+                    variant="secondary"
                   >
-                    Update Slices
+                    Update slices
                   </Button>
                 ) : undefined}
-              </>
+              </Box>
             ) : undefined
           }
           toggle={
@@ -204,12 +253,14 @@ const SliceZone: React.FC<SliceZoneProps> = ({
           <SliceZoneBlankSlate
             onAddNewSlice={onAddNewSlice}
             onCreateNewSlice={onCreateNewSlice}
+            openSlicesTemplatesModal={openSlicesTemplatesModal}
             projectHasAvailableSlices={availableSlices.length > 0}
+            isSlicesTemplatesSupported={availableSlicesTemplates.length > 0}
           />
         )
       ) : undefined}
       <UpdateSliceZoneModal
-        isOpen={formIsOpen}
+        isOpen={isUpdateSliceZoneModalOpen}
         formId={`tab-slicezone-form-${tabId}`}
         availableSlices={availableSlices}
         slicesInSliceZone={sharedSlicesInSliceZone}
@@ -217,7 +268,36 @@ const SliceZone: React.FC<SliceZoneProps> = ({
           // eslint-disable-next-line @typescript-eslint/no-unsafe-return
           onSelectSharedSlices(sliceKeys, nonSharedSlicesKeysInSliceZone)
         }
-        close={() => setFormIsOpen(false)}
+        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)}
       />
       <DeleteSliceZoneModal
         isDeleteSliceZoneModalOpen={isDeleteSliceZoneModalOpen}