slice-machine-ui 2.20.4-beta.5 → 2.20.5-alpha.jp-import-slice-base.1

package/src/features/customTypes/customTypesBuilder/ImportSlicesFromLibraryModal/utils/sliceWithoutConflicts.ts

@@ -0,0 +1,51 @@
+import { SharedSlice } from "@prismicio/types-internal/lib/customtypes";
+
+import { NewSlice } from "../types";
+
+/**
+ * If needed, assigns new ids and names to avoid conflicts with existing slices.
+ * Names are compared case-insensitively to avoid conflicts
+ * between folder names with different casing.
+ */
+export function sliceWithoutConflicts({
+  existingSlices,
+  newSlices,
+  slice,
+}: {
+  existingSlices: SharedSlice[];
+  newSlices: NewSlice[];
+  slice: SharedSlice;
+}): SharedSlice {
+  const existingIds = new Set<string>();
+  const existingNames = new Set<string>();
+
+  for (const { id, name } of existingSlices) {
+    existingIds.add(id);
+    existingNames.add(name.toLowerCase());
+  }
+
+  for (const s of newSlices) {
+    existingIds.add(s.model.id);
+    existingNames.add(s.model.name.toLowerCase());
+  }
+
+  let id = slice.id;
+  let counter = 2;
+  while (existingIds.has(id)) {
+    id = `${slice.id}_${counter}`;
+    counter++;
+  }
+
+  let name = slice.name;
+  counter = 2;
+  while (existingNames.has(name.toLowerCase())) {
+    name = `${slice.name}${counter}`;
+    counter++;
+  }
+
+  return {
+    ...slice,
+    id,
+    name,
+  };
+}

package/src/features/customTypes/customTypesBuilder/SliceZoneBlankSlate.tsx

@@ -16,6 +16,7 @@ export type SliceZoneBlankSlateProps = {
   openCreateSliceModal: () => void;
   openCreateSliceFromImageModal: () => void;
   openSlicesTemplatesModal: () => void;
+  openImportSlicesFromLibraryModal: () => void;
   projectHasAvailableSlices: boolean;
   isSlicesTemplatesSupported: boolean;
 };
@@ -24,6 +25,7 @@ export const SliceZoneBlankSlate: FC<SliceZoneBlankSlateProps> = ({
   openCreateSliceModal,
   openCreateSliceFromImageModal,
   openUpdateSliceZoneModal,
+  openImportSlicesFromLibraryModal,
   openSlicesTemplatesModal,
   projectHasAvailableSlices,
   isSlicesTemplatesSupported,
@@ -88,6 +90,15 @@ export const SliceZoneBlankSlate: FC<SliceZoneBlankSlateProps> = ({
               {sliceCreationOptions.fromExisting.title}
             </ActionListItem>
           )}
+          <ActionListItem
+            renderStartIcon={() =>
+              sliceCreationOptions.importFromExternal.BackgroundIcon
+            }
+            onClick={openImportSlicesFromLibraryModal}
+            description={sliceCreationOptions.importFromExternal.description}
+          >
+            {sliceCreationOptions.importFromExternal.title}
+          </ActionListItem>
         </ActionList>
       </BlankSlateActions>
     </BlankSlate>

package/src/features/customTypes/customTypesBuilder/shared/getSubmitButtonLabel.ts

@@ -0,0 +1,12 @@
+export const getSubmitButtonLabel = (
+  location: "custom_type" | "page_type" | "slices",
+) => {
+  switch (location) {
+    case "custom_type":
+      return "Add to type";
+    case "page_type":
+      return "Add to page";
+    case "slices":
+      return "Add to slices";
+  }
+};

package/src/features/customTypes/customTypesBuilder/shared/useExistingSlices.ts

@@ -0,0 +1,26 @@
+import { SharedSlice } from "@prismicio/types-internal/lib/customtypes";
+import { useEffect, useRef } from "react";
+
+import { managerClient } from "@/managerClient";
+
+/**
+ * Keeps track of the existing slices in the project.
+ * Re-fetches them when the modal is opened.
+ */
+export function useExistingSlices({ open }: { open: boolean }) {
+  const ref = useRef<SharedSlice[]>([]);
+
+  useEffect(() => {
+    if (!open) return;
+
+    ref.current = [];
+    managerClient.slices
+      .readAllSlices()
+      .then((slices) => {
+        ref.current = slices.models.map(({ model }) => model);
+      })
+      .catch(() => null);
+  }, [open]);
+
+  return ref;
+}

package/src/features/customTypes/customTypesBuilder/sliceCreationOptions.tsx

@@ -64,5 +64,19 @@ export const getSliceCreationOptions = (args: SliceCreationOptionArgs) => {
       title: "Reuse an existing slice",
       description: "Select from your created slices.",
     },
+    importFromExternal: {
+      BackgroundIcon: (
+        <BackgroundIcon
+          name="cloudUpload"
+          size={menuType === "ActionList" ? "small" : "extraSmall"}
+          iconSize={menuType === "ActionList" ? "medium" : "small"}
+          color="white"
+          variant="solid"
+          radius={6}
+        />
+      ),
+      title: "Add from external library",
+      description: "Import slices from a github repository.",
+    },
   };
 };

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

@@ -17,6 +17,7 @@ import { telemetry } from "@/apiClient";
 import { ListHeader } from "@/components/List";
 import { CreateSliceFromImageModal } from "@/features/customTypes/customTypesBuilder/CreateSliceFromImageModal";
 import { useCustomTypeState } from "@/features/customTypes/customTypesBuilder/CustomTypeProvider";
+import { ImportSlicesFromLibraryModal } from "@/features/customTypes/customTypesBuilder/ImportSlicesFromLibraryModal";
 import { getSliceCreationOptions } from "@/features/customTypes/customTypesBuilder/sliceCreationOptions";
 import { SliceZoneBlankSlate } from "@/features/customTypes/customTypesBuilder/SliceZoneBlankSlate";
 import { useOnboarding } from "@/features/onboarding/useOnboarding";
@@ -121,6 +122,10 @@ const SliceZone: React.FC<SliceZoneProps> = ({
   const [isCreateSliceModalOpen, setIsCreateSliceModalOpen] = useState(false);
   const [isCreateSliceFromImageModalOpen, setIsCreateSliceFromImageModalOpen] =
     useState(false);
+  const [
+    isImportSlicesFromLibraryModalOpen,
+    setIsImportSlicesFromLibraryModalOpen,
+  ] = useState(false);
   const { remoteSlices, libraries } = useSelector(
     (store: SliceMachineStoreType) => ({
       remoteSlices: getRemoteSlices(store),
@@ -197,6 +202,10 @@ const SliceZone: React.FC<SliceZoneProps> = ({
     });
   };
 
+  const openImportSlicesFromLibraryModal = () => {
+    setIsImportSlicesFromLibraryModalOpen(true);
+  };
+
   const closeUpdateSliceZoneModal = () => {
     setIsUpdateSliceZoneModalOpen(false);
   };
@@ -213,6 +222,10 @@ const SliceZone: React.FC<SliceZoneProps> = ({
     setIsSlicesTemplatesModalOpen(false);
   };
 
+  const closeImportSlicesFromLibraryModal = () => {
+    setIsImportSlicesFromLibraryModalOpen(false);
+  };
+
   return (
     <>
       <ListHeader
@@ -272,6 +285,17 @@ const SliceZone: React.FC<SliceZoneProps> = ({
                     {sliceCreationOptions.fromExisting.title}
                   </DropdownMenuItem>
                 ) : undefined}
+                <DropdownMenuItem
+                  onSelect={openImportSlicesFromLibraryModal}
+                  renderStartIcon={() =>
+                    sliceCreationOptions.importFromExternal.BackgroundIcon
+                  }
+                  description={
+                    sliceCreationOptions.importFromExternal.description
+                  }
+                >
+                  {sliceCreationOptions.importFromExternal.title}
+                </DropdownMenuItem>
               </DropdownMenuContent>
             </DropdownMenu>
           ) : undefined
@@ -324,6 +348,9 @@ const SliceZone: React.FC<SliceZoneProps> = ({
               openCreateSliceFromImageModal={() =>
                 void openCreateSliceFromImageModal()
               }
+              openImportSlicesFromLibraryModal={() =>
+                void openImportSlicesFromLibraryModal()
+              }
               openSlicesTemplatesModal={openSlicesTemplatesModal}
               projectHasAvailableSlices={availableSlicesToAdd.length > 0}
               isSlicesTemplatesSupported={availableSlicesTemplates.length > 0}
@@ -444,6 +471,30 @@ const SliceZone: React.FC<SliceZoneProps> = ({
         }}
         onClose={closeCreateSliceFromImageModal}
       />
+      <ImportSlicesFromLibraryModal
+        open={isImportSlicesFromLibraryModalOpen}
+        location={`${customType.format}_type`}
+        onSuccess={({ slices, library }) => {
+          const newCustomType = addSlicesToSliceZone({
+            customType,
+            tabId,
+            slices: slices.map((slice) => slice.model),
+          });
+          setCustomType({
+            customType: CustomTypes.fromSM(newCustomType),
+            onSaveCallback: () => {
+              toast.success(
+                <ToastMessageWithPath
+                  message="Slice(s) added to slice zone and created at: "
+                  path={library}
+                />,
+              );
+            },
+          });
+          closeImportSlicesFromLibraryModal();
+        }}
+        onClose={closeImportSlicesFromLibraryModal}
+      />
     </>
   );
 };

package/src/pages/slices.tsx

@@ -15,6 +15,7 @@ import { BaseStyles, Flex, Link, Text } from "theme-ui";
 
 import { BreadcrumbItem } from "@/components/Breadcrumb";
 import { CreateSliceFromImageModal } from "@/features/customTypes/customTypesBuilder/CreateSliceFromImageModal";
+import { ImportSlicesFromLibraryModal } from "@/features/customTypes/customTypesBuilder/ImportSlicesFromLibraryModal";
 import { getSliceCreationOptions } from "@/features/customTypes/customTypesBuilder/sliceCreationOptions";
 import { SharedSliceCard } from "@/features/slices/sliceCards/SharedSliceCard";
 import { SLICES_CONFIG } from "@/features/slices/slicesConfig";
@@ -64,6 +65,10 @@ const SlicesIndex: React.FunctionComponent = () => {
   const [isRenameSliceModalOpen, setIsRenameSliceModalOpen] = useState(false);
   const [isCreateSliceFromImageModalOpen, setIsCreateSliceFromImageModalOpen] =
     useState(false);
+  const [
+    isImportSlicesFromLibraryModalOpen,
+    setIsImportSlicesFromLibraryModalOpen,
+  ] = useState(false);
 
   const localLibraries: LibraryUI[] = libraries.filter(
     (library) => library.isLocal,
@@ -145,6 +150,17 @@ const SlicesIndex: React.FunctionComponent = () => {
                 >
                   {sliceCreationOptions.fromScratch.title}
                 </DropdownMenuItem>
+                <DropdownMenuItem
+                  renderStartIcon={() =>
+                    sliceCreationOptions.importFromExternal.BackgroundIcon
+                  }
+                  onSelect={() => setIsImportSlicesFromLibraryModalOpen(true)}
+                  description={
+                    sliceCreationOptions.importFromExternal.description
+                  }
+                >
+                  {sliceCreationOptions.importFromExternal.title}
+                </DropdownMenuItem>
               </DropdownMenuContent>
             </DropdownMenu>
           ) : undefined}
@@ -340,6 +356,20 @@ const SlicesIndex: React.FunctionComponent = () => {
             }}
             onClose={closeCreateSliceFromImageModal}
           />
+          <ImportSlicesFromLibraryModal
+            open={isImportSlicesFromLibraryModalOpen}
+            location="slices"
+            onSuccess={({ library }: { library: string }) => {
+              toast.success(
+                <ToastMessageWithPath
+                  message="Slice(s) added to slice zone and created at: "
+                  path={library}
+                />,
+              );
+              setIsImportSlicesFromLibraryModalOpen(false);
+            }}
+            onClose={() => setIsImportSlicesFromLibraryModalOpen(false)}
+          />
         </AppLayoutContent>
       </AppLayout>
     </>

package/out/_next/static/9dRDwSkN862Z880iYSr4h/_buildManifest.js

@@ -1 +0,0 @@
-self.__BUILD_MANIFEST=function(s,c,a,e,t,i,b,n,u,f,d,h,k,j,l,p,g,o,r,m,_,y,I){return{__rewrites:{afterFiles:[],beforeFiles:[],fallback:[]},"/":[s,t,g,o,"static/chunks/pages/index-0d8cb369de720a35.js"],"/_error":["static/chunks/pages/_error-fedd2c6ebd3d27b9.js"],"/changelog":[c,i,"static/chunks/870-a72b74312773efea.js","static/chunks/pages/changelog-8514e0696e90a1b2.js"],"/changes":[c,b,"static/chunks/8eec4907-b712959d9f984b68.js",a,"static/chunks/125-00b909bdbab2ca15.js",e,u,"static/css/d98ebc475f8423a3.css","static/chunks/pages/changes-e66094f57453cf9c.js"],"/custom-types":[s,t,g,o,"static/chunks/pages/custom-types-5acd56959b60346f.js"],"/custom-types/[customTypeId]":[c,f,d,h,k,s,a,i,n,j,r,e,t,l,p,m,_,"static/chunks/pages/custom-types/[customTypeId]-6d613b67e6967ae5.js"],"/labs":["static/chunks/pages/labs-56fd818a63553497.js"],"/page-types/[pageTypeId]":[c,f,d,h,k,s,a,i,n,j,r,e,t,l,p,m,_,"static/chunks/pages/page-types/[pageTypeId]-40207b66190e3fcd.js"],"/slices":[c,b,y,s,a,n,I,e,p,u,"static/css/efa5152b7c0f35c0.css","static/chunks/pages/slices-ec56b94b35794675.js"],"/slices/[lib]/[sliceName]/[variation]":[c,b,f,d,h,k,y,s,a,i,n,j,I,"static/chunks/484-3e011e79c41f0342.js",e,l,u,"static/css/e8e03c0d4003d1eb.css","static/chunks/pages/slices/[lib]/[sliceName]/[variation]-22ffa2561ac66557.js"],"/slices/[lib]/[sliceName]/[variation]/simulator":[b,"static/chunks/72585f70-28b4d7d5384b3703.js","static/chunks/429-aab52070cad2884b.js","static/chunks/pages/slices/[lib]/[sliceName]/[variation]/simulator-faeb6d2f77d97096.js"],sortedPages:["/","/_app","/_error","/changelog","/changes","/custom-types","/custom-types/[customTypeId]","/labs","/page-types/[pageTypeId]","/slices","/slices/[lib]/[sliceName]/[variation]","/slices/[lib]/[sliceName]/[variation]/simulator"]}}("static/chunks/397-e6c340070a3bcb41.js","static/chunks/59b4e022-ef680789f7cc9b11.js","static/chunks/66-d9d3bcb5d041cb6d.js","static/chunks/882-48d61b2fabee28d8.js","static/chunks/647-aa094286bc248d52.js","static/chunks/183-4ea255b867ff171b.js","static/chunks/c8eae200-966ce352f7b5d2b9.js","static/chunks/344-b64f09e670634ed1.js","static/chunks/593-7ffd1197c3405ef8.js","static/chunks/f36c6662-1f3a854183168b10.js","static/chunks/4c744e84-480e426e4b1cfef3.js","static/chunks/065a3ddb-9a38ca0d60f0bf2f.js","static/chunks/1cc2734a-09fb3b997ad1eb70.js","static/chunks/256-07f768a2b19b0a0e.js","static/chunks/630-2bf927bca082a191.js","static/chunks/633-74a9ae6d5200cefc.js","static/chunks/248-84a5987f0499b074.js","static/css/4e475d945cf8a890.css","static/chunks/422-c9192a1dbdd2ae0e.js","static/chunks/489-32281540712d98bb.js","static/css/56f2a6684a524374.css","static/chunks/52d4c156-89c6ec6efca0a0bb.js","static/chunks/444-d39213143f782fec.js"),self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();