slice-machine-ui 2.20.5-alpha.jp-import-slices-2.1 → 2.20.5-alpha.lg-import-slices.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slice-machine-ui",
-  "version": "2.20.5-alpha.jp-import-slices-2.1",
+  "version": "2.20.5-alpha.lg-import-slices.1",
   "license": "MIT",
   "description": "A visual builder for your Slice Models with all the tools you need to generate data models and mock CMS content locally.",
   "repository": {
@@ -35,16 +35,16 @@
     "start-slicemachine": "./bin/start-slicemachine.cjs"
   },
   "dependencies": {
-    "@slicemachine/manager": "0.26.5-alpha.jp-import-slices-2.1",
-    "start-slicemachine": "0.12.70-alpha.jp-import-slices-2.1"
+    "@slicemachine/manager": "0.26.5-alpha.lg-import-slices.1",
+    "start-slicemachine": "0.12.70-alpha.lg-import-slices.1"
   },
   "devDependencies": {
     "@emotion/react": "11.11.1",
     "@extractus/oembed-extractor": "3.1.8",
     "@prismicio/client": "7.17.0",
-    "@prismicio/editor-fields": "0.4.89-alpha.jp-box-display-none.1",
-    "@prismicio/editor-support": "0.4.89-alpha.jp-box-display-none.1",
-    "@prismicio/editor-ui": "0.4.89-alpha.jp-box-display-none.1",
+    "@prismicio/editor-fields": "0.4.88",
+    "@prismicio/editor-support": "0.4.88",
+    "@prismicio/editor-ui": "0.4.88",
     "@prismicio/mock": "0.7.1",
     "@prismicio/mocks": "2.14.0",
     "@prismicio/simulator": "0.1.4",

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

@@ -1,5 +1,7 @@
 import {
   Box,
+  Button,
+  Checkbox,
   Dialog,
   DialogActionButton,
   DialogActions,
@@ -7,149 +9,328 @@ import {
   DialogContent,
   DialogDescription,
   DialogHeader,
-  Tab,
+  InlineLabel,
+  ScrollArea,
+  Text,
+  TextInput,
 } from "@prismicio/editor-ui";
 import { SharedSlice } from "@prismicio/types-internal/lib/customtypes";
-import { ReactNode, useState } from "react";
+import { useEffect, useRef, useState } from "react";
+import { toast } from "react-toastify";
 
-import { ComponentUI } from "@/legacy/lib/models/common/ComponentUI";
+import { getState, telemetry } from "@/apiClient";
+import { useOnboarding } from "@/features/onboarding/useOnboarding";
+import { useAutoSync } from "@/features/sync/AutoSyncProvider";
+import useSliceMachineActions from "@/modules/useSliceMachineActions";
 
 import { getSubmitButtonLabel } from "../shared/getSubmitButtonLabel";
 import { useExistingSlices } from "../shared/useExistingSlices";
 import { useImportSlicesFromGithub } from "./hooks/useImportSlicesFromGithub";
-import { LibrarySlicesTab } from "./LibrarySlicesTab";
-import { LocalSlicesTab } from "./LocalSlicesTab";
-import {
-  ReuseExistingSlicesProvider,
-  useReuseExistingSlicesContext,
-} from "./ReuseExistingSlicesContext";
+import { SliceCard } from "./SliceCard";
+import { NewSlice } from "./types";
+import { addSlices } from "./utils/addSlices";
+import { sliceWithoutConflicts } from "./utils/sliceWithoutConflicts";
 
-interface ImportSlicesFromLibraryModalContent {
+interface ImportSlicesFromLibraryModalProps {
   open: boolean;
-  location: "custom_type" | "page_type";
-  typeName: string;
-  availableSlices?: ReadonlyArray<ComponentUI>;
-  onSuccess: (args: { slices: SharedSlice[]; library?: string }) => void;
+  location: "custom_type" | "page_type" | "slices";
+  onSuccess: (args: {
+    slices: {
+      model: SharedSlice;
+      langSmithUrl?: string;
+    }[];
+    library: string;
+  }) => void;
   onClose: () => void;
 }
 
-function ImportSlicesFromLibraryModalContent(
-  props: ImportSlicesFromLibraryModalContent,
+export function ImportSlicesFromLibraryModal(
+  props: ImportSlicesFromLibraryModalProps,
 ) {
-  const {
-    open,
-    location,
-    typeName,
-    availableSlices = [],
-    onSuccess,
-    onClose,
-  } = props;
-  const [selectedTab, setSelectedTab] = useState("local");
+  const { open, location, onSuccess, onClose } = props;
+
+  const [isCreatingSlices, setIsCreatingSlices] = useState(false);
+  const [githubUrl, setGithubUrl] = useState("");
+  const [selectedSliceIds, setSelectedSliceIds] = useState<Set<string>>(
+    new Set(),
+  );
 
+  const { syncChanges } = useAutoSync();
+  const { createSliceSuccess, updateSliceMockSuccess } =
+    useSliceMachineActions();
+  const { completeStep } = useOnboarding();
   const existingSlices = useExistingSlices({ open });
-  const { resetSlices } = useImportSlicesFromGithub();
-  const { submit, isSubmitting, totalSelected, reset } =
-    useReuseExistingSlicesContext();
+  const { isLoadingSlices, handleImportFromGithub, slices, resetSlices } =
+    useImportSlicesFromGithub();
+
+  useEffect(() => {
+    if (slices.length === 0) return;
+
+    // Set all slices as selected by default
+    const allSliceIds = new Set<string>();
+    for (const slice of slices) {
+      allSliceIds.add(slice.model.id);
+    }
+    setSelectedSliceIds(allSliceIds);
+  }, [slices]);
+
+  /**
+   * Keeps track of the current instance id.
+   * When the modal is closed, the id is reset.
+   */
+  const id = useRef(crypto.randomUUID());
 
   const onOpenChange = (open: boolean) => {
-    if (open || isSubmitting) return;
+    if (open || isCreatingSlices) return;
     onClose();
-    reset();
+    id.current = crypto.randomUUID();
+    setGithubUrl("");
+    setSelectedSliceIds(new Set());
     resetSlices();
-    setSelectedTab("local");
   };
 
-  const onSubmit = async () => {
-    try {
-      const result = await submit({ existingSlices, location, resetSlices });
-      onSuccess(result);
-    } catch (error) {
-      // Error is already handled in the submit function
+  const onSubmit = () => {
+    const newSlices = slices.reduce<NewSlice[]>((acc, slice) => {
+      if (selectedSliceIds.has(slice.model.id)) {
+        acc.push({
+          image: slice.image,
+          model: slice.model,
+          files: slice.files,
+          componentContents: slice.componentContents,
+          mocks: slice.mocks,
+          screenshots: slice.screenshots,
+        });
+      }
+      return acc;
+    }, []);
+    if (!newSlices.length) {
+      toast.error("Please select at least one slice to import");
+      return;
+    }
+
+    // Ensure ids and names are conflict-free against existing and newly-added slices
+    const conflictFreeSlices: NewSlice[] = [];
+    for (const s of newSlices) {
+      const adjustedModel = sliceWithoutConflicts({
+        existingSlices: existingSlices.current,
+        newSlices: conflictFreeSlices,
+        slice: s.model,
+      });
+      conflictFreeSlices.push({ ...s, model: adjustedModel });
     }
+
+    const currentId = id.current;
+    setIsCreatingSlices(true);
+    addSlices(conflictFreeSlices)
+      .then(async ({ slices, library }) => {
+        if (currentId !== id.current) return;
+
+        // Wait a moment to ensure all file writes are complete
+        await new Promise((resolve) => setTimeout(resolve, 100));
+
+        const serverState = await getState();
+
+        // Ensure mocks are included in the libraries data before updating store
+        const librariesWithMocks = serverState.libraries.map((lib) => {
+          if (lib.name !== library) return lib;
+
+          return {
+            ...lib,
+            components: lib.components.map((component) => {
+              // Find the corresponding slice from newSlices to get its mocks
+              const importedSlice = conflictFreeSlices.find(
+                (s) => s.model.id === component.model.id,
+              );
+
+              // If mocks are already in component, use them; otherwise use imported mocks
+              const mocks =
+                component.mocks && component.mocks.length > 0
+                  ? component.mocks
+                  : importedSlice?.mocks;
+
+              return {
+                ...component,
+                mocks: mocks ?? component.mocks,
+              };
+            }),
+          };
+        });
+
+        createSliceSuccess(librariesWithMocks);
+
+        // Also update mocks individually to ensure they're in the store
+        for (const slice of newSlices) {
+          if (
+            slice.mocks &&
+            Array.isArray(slice.mocks) &&
+            slice.mocks.length > 0
+          ) {
+            updateSliceMockSuccess({
+              libraryID: library,
+              sliceID: slice.model.id,
+              mocks: slice.mocks,
+            });
+          }
+        }
+
+        syncChanges();
+
+        onSuccess({ slices, library });
+
+        setIsCreatingSlices(false);
+        id.current = crypto.randomUUID();
+        resetSlices();
+
+        void completeStep("createSlice");
+
+        for (const { model } of slices) {
+          void telemetry.track({
+            event: "slice:created",
+            id: model.id,
+            name: model.name,
+            library,
+            location,
+            mode: "import",
+          });
+        }
+      })
+      .catch(() => {
+        if (currentId !== id.current) return;
+        setIsCreatingSlices(false);
+        toast.error("An unexpected error happened while adding slices.");
+      });
   };
 
+  const selectedSlices = slices.filter((slice) =>
+    selectedSliceIds.has(slice.model.id),
+  );
+
+  const allSelected =
+    slices.length > 0 && selectedSliceIds.size === slices.length;
+  const someSelected =
+    selectedSliceIds.size > 0 && selectedSliceIds.size < slices.length;
+
+  const handleSelectAll = (selected: boolean) => {
+    if (selected) {
+      const allSliceIds = new Set<string>();
+      for (const slice of slices) {
+        allSliceIds.add(slice.model.id);
+      }
+      setSelectedSliceIds(allSliceIds);
+    } else {
+      setSelectedSliceIds(new Set());
+    }
+  };
+
+  let selectAllLabel = "Select all slices";
+  if (allSelected) {
+    selectAllLabel = `Selected all slices (${selectedSliceIds.size})`;
+  } else if (someSelected) {
+    selectAllLabel = `${selectedSliceIds.size} of ${slices.length} selected`;
+  }
+
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogHeader title="Reuse an existing slice" />
+      <DialogHeader title="Import slices from library" />
       <DialogContent gap={0}>
         <DialogDescription hidden>
-          Select existing slices or import slices from a GitHub repository
+          Import slices from a github repository
         </DialogDescription>
-        <Box flexDirection="column" flexGrow={1} minHeight={0}>
-          <Box
-            justifyContent="space-between"
-            padding={16}
-            border={{ bottom: true }}
-          >
-            <Box gap={8}>
-              <Tab
-                selected={selectedTab === "local"}
-                onClick={() => setSelectedTab("local")}
+        {slices.length === 0 ? (
+          <Box padding={16} height="100%" flexDirection="column" gap={16}>
+            <Box flexDirection="column" gap={8}>
+              <Box
+                display="flex"
+                flexDirection="column"
+                gap={8}
+                padding={16}
+                border
+                borderRadius={8}
               >
-                Local Slices
-              </Tab>
-              <Tab
-                selected={selectedTab === "library"}
-                onClick={() => setSelectedTab("library")}
-              >
-                Library Slices
-              </Tab>
+                <Text color="grey11">Import from GitHub</Text>
+                <TextInput
+                  placeholder="https://github.com/username/repository"
+                  value={githubUrl}
+                  onValueChange={setGithubUrl}
+                />
+                <Button
+                  onClick={() => void handleImportFromGithub(githubUrl)}
+                  disabled={!githubUrl.trim() || isLoadingSlices}
+                  loading={isLoadingSlices}
+                  color="purple"
+                >
+                  {isLoadingSlices ? "Loading slices..." : "Import from GitHub"}
+                </Button>
+              </Box>
             </Box>
-            {selectedTab === "library" && "<repo-select>"}
           </Box>
-          <TabContent selected={selectedTab === "local"}>
-            <LocalSlicesTab availableSlices={availableSlices} />
-          </TabContent>
-          <TabContent selected={selectedTab === "library"}>
-            <LibrarySlicesTab />
-          </TabContent>
-        </Box>
+        ) : (
+          <>
+            <Box
+              display="flex"
+              alignItems="center"
+              justifyContent="space-between"
+              padding={16}
+              border={{ bottom: true }}
+            >
+              <Box display="flex" alignItems="center" gap={8}>
+                <InlineLabel value={selectAllLabel}>
+                  <Checkbox
+                    checked={allSelected}
+                    indeterminate={someSelected}
+                    onCheckedChange={handleSelectAll}
+                  />
+                </InlineLabel>
+              </Box>
+            </Box>
+            <ScrollArea stableScrollbar={false}>
+              <Box
+                display="grid"
+                gridTemplateColumns="1fr 1fr 1fr"
+                gap={16}
+                padding={16}
+              >
+                {slices.map((slice) => {
+                  return (
+                    <SliceCard
+                      model={slice.model}
+                      thumbnailUrl={slice.thumbnailUrl}
+                      key={slice.model.id}
+                      selected={selectedSliceIds.has(slice.model.id)}
+                      onSelectedChange={(selected) => {
+                        if (selected) {
+                          setSelectedSliceIds((prev) => {
+                            const next = new Set(prev);
+                            next.add(slice.model.id);
+                            return next;
+                          });
+                        } else {
+                          setSelectedSliceIds((prev) => {
+                            const next = new Set(prev);
+                            next.delete(slice.model.id);
+                            return next;
+                          });
+                        }
+                      }}
+                    />
+                  );
+                })}
+              </Box>
+            </ScrollArea>
+          </>
+        )}
 
         <DialogActions>
-          <DialogCancelButton disabled={isSubmitting} size="medium" />
+          <DialogCancelButton disabled={isCreatingSlices} />
           <DialogActionButton
-            disabled={totalSelected === 0}
-            loading={isSubmitting}
-            onClick={() => void onSubmit()}
-            size="medium"
+            disabled={selectedSlices.length === 0}
+            loading={isCreatingSlices}
+            onClick={onSubmit}
           >
-            {getSubmitButtonLabel(location, typeName)} ({totalSelected})
+            {getSubmitButtonLabel(location)} ({selectedSlices.length})
           </DialogActionButton>
         </DialogActions>
       </DialogContent>
     </Dialog>
   );
 }
-
-interface TabContentProps {
-  children: ReactNode;
-  selected: boolean;
-}
-
-function TabContent(args: TabContentProps) {
-  const { children, selected } = args;
-
-  if (!selected) {
-    return (
-      <Box display="none" minHeight={0}>
-        {children}
-      </Box>
-    );
-  }
-
-  return (
-    <Box display="flex" flexDirection="column" flexGrow={1} minHeight={0}>
-      {children}
-    </Box>
-  );
-}
-
-export function ImportSlicesFromLibraryModal(
-  props: ImportSlicesFromLibraryModalContent,
-) {
-  return (
-    <ReuseExistingSlicesProvider>
-      <ImportSlicesFromLibraryModalContent {...props} />
-    </ReuseExistingSlicesProvider>
-  );
-}

package/src/features/customTypes/customTypesBuilder/ImportSlicesFromLibraryModal/hooks/useImportSlicesFromGithub.ts

@@ -26,7 +26,7 @@ export function useImportSlicesFromGithub() {
       if (!owner || !repo) {
         toast.error("Invalid GitHub URL format");
         setIsLoadingSlices(false);
-        throw new Error("Invalid GitHub URL format");
+        return;
       }
 
       const branch = await getDefaultBranch({ owner, repo });
@@ -43,14 +43,14 @@ export function useImportSlicesFromGithub() {
           }`,
         );
         setIsLoadingSlices(false);
-        throw error;
+        return;
       }
 
       if (libraries.length === 0) {
         console.warn("No libraries were found in the SM config.");
         setIsLoadingSlices(false);
         toast.error("No libraries were found in the SM config.");
-        throw new Error("No libraries were found in the SM config.");
+        return;
       }
 
       const fetchedSlices = await fetchSlicesFromLibraries({
@@ -63,7 +63,7 @@ export function useImportSlicesFromGithub() {
       if (fetchedSlices.length === 0) {
         toast.error("Error fetching slices from the repository");
         setIsLoadingSlices(false);
-        throw new Error("No slices were found in the libraries.");
+        return;
       }
 
       setSlices(fetchedSlices);
@@ -71,8 +71,6 @@ export function useImportSlicesFromGithub() {
       toast.success(
         `Found ${fetchedSlices.length} slice(s) from ${libraries.length} library/libraries`,
       );
-
-      return fetchedSlices;
     } catch (error) {
       console.error("Error importing from GitHub:", error);
       toast.error(
@@ -81,7 +79,6 @@ export function useImportSlicesFromGithub() {
         }`,
       );
       setIsLoadingSlices(false);
-      return [];
     }
   };
 

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,7 +25,9 @@ export const SliceZoneBlankSlate: FC<SliceZoneBlankSlateProps> = ({
   openCreateSliceModal,
   openCreateSliceFromImageModal,
   openUpdateSliceZoneModal,
+  openImportSlicesFromLibraryModal,
   openSlicesTemplatesModal,
+  projectHasAvailableSlices,
   isSlicesTemplatesSupported,
 }) => {
   const sliceCreationOptions = getSliceCreationOptions({
@@ -76,14 +79,25 @@ export const SliceZoneBlankSlate: FC<SliceZoneBlankSlateProps> = ({
               {sliceCreationOptions.fromTemplate.title}
             </ActionListItem>
           )}
+          {projectHasAvailableSlices && (
+            <ActionListItem
+              renderStartIcon={() =>
+                sliceCreationOptions.fromExisting.BackgroundIcon
+              }
+              onClick={openUpdateSliceZoneModal}
+              description={sliceCreationOptions.fromExisting.description}
+            >
+              {sliceCreationOptions.fromExisting.title}
+            </ActionListItem>
+          )}
           <ActionListItem
             renderStartIcon={() =>
-              sliceCreationOptions.fromExisting.BackgroundIcon
+              sliceCreationOptions.importFromExternal.BackgroundIcon
             }
-            onClick={openUpdateSliceZoneModal}
-            description={sliceCreationOptions.fromExisting.description}
+            onClick={openImportSlicesFromLibraryModal}
+            description={sliceCreationOptions.importFromExternal.description}
           >
-            {sliceCreationOptions.fromExisting.title}
+            {sliceCreationOptions.importFromExternal.title}
           </ActionListItem>
         </ActionList>
       </BlankSlateActions>

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

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

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/UpdateSliceZoneModal.tsx

@@ -0,0 +1,72 @@
+import { SharedSlice } from "@prismicio/types-internal/lib/customtypes";
+import { Text } from "theme-ui";
+
+import ModalFormCard from "@/legacy/components/ModalFormCard";
+import { ComponentUI } from "@/legacy/lib/models/common/ComponentUI";
+
+import UpdateSliceZoneModalList from "./UpdateSliceZoneModalList";
+
+interface UpdateSliceModalProps {
+  formId: string;
+  close: () => void;
+  onSubmit: (slices: SharedSlice[]) => void;
+  availableSlices: ReadonlyArray<ComponentUI>;
+}
+
+export type SliceZoneFormValues = {
+  sliceKeys: string[];
+};
+
+const UpdateSliceZoneModal: React.FC<UpdateSliceModalProps> = ({
+  formId,
+  close,
+  onSubmit,
+  availableSlices,
+}) => {
+  return (
+    <ModalFormCard
+      isOpen
+      buttonLabel="Add"
+      formId={formId}
+      close={close}
+      onSubmit={(values: SliceZoneFormValues) => {
+        const { sliceKeys } = values;
+        const slices = sliceKeys
+          .map(
+            (sliceKey) =>
+              availableSlices.find((s) => s.model.id === sliceKey)?.model,
+          )
+          .filter((slice) => slice !== undefined) as SharedSlice[];
+        onSubmit(slices);
+      }}
+      initialValues={{
+        sliceKeys: [],
+      }}
+      content={{
+        title: "Select existing slices",
+      }}
+      testId="update-slices-modal"
+      validate={(values) => {
+        if (values.sliceKeys.length === 0) {
+          return {
+            sliceKeys: "Select at least one slice to add",
+          };
+        }
+      }}
+      actionMessage={({ errors }) =>
+        errors.sliceKeys !== undefined ? (
+          <Text sx={{ color: "error" }}>{errors.sliceKeys}</Text>
+        ) : undefined
+      }
+    >
+      {({ values }) => (
+        <UpdateSliceZoneModalList
+          values={values}
+          availableSlices={availableSlices}
+        />
+      )}
+    </ModalFormCard>
+  );
+};
+
+export default UpdateSliceZoneModal;