slice-machine-ui 2.20.5-alpha.jp-import-slice-base.2 → 2.20.5-alpha.jp-import-slices-2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slice-machine-ui",
-  "version": "2.20.5-alpha.jp-import-slice-base.2",
+  "version": "2.20.5-alpha.jp-import-slices-2.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-slice-base.2",
-    "start-slicemachine": "0.12.70-alpha.jp-import-slice-base.2"
+    "@slicemachine/manager": "0.26.5-alpha.jp-import-slices-2.1",
+    "start-slicemachine": "0.12.70-alpha.jp-import-slices-2.1"
   },
   "devDependencies": {
     "@emotion/react": "11.11.1",
     "@extractus/oembed-extractor": "3.1.8",
     "@prismicio/client": "7.17.0",
-    "@prismicio/editor-fields": "0.4.88",
-    "@prismicio/editor-support": "0.4.88",
-    "@prismicio/editor-ui": "0.4.88",
+    "@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/mock": "0.7.1",
     "@prismicio/mocks": "2.14.0",
     "@prismicio/simulator": "0.1.4",

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

@@ -1,7 +1,5 @@
 import {
   Box,
-  Button,
-  Checkbox,
   Dialog,
   DialogActionButton,
   DialogActions,
@@ -9,328 +7,149 @@ import {
   DialogContent,
   DialogDescription,
   DialogHeader,
-  InlineLabel,
-  ScrollArea,
-  Text,
-  TextInput,
+  Tab,
 } from "@prismicio/editor-ui";
 import { SharedSlice } from "@prismicio/types-internal/lib/customtypes";
-import { useEffect, useRef, useState } from "react";
-import { toast } from "react-toastify";
+import { ReactNode, useState } from "react";
 
-import { getState, telemetry } from "@/apiClient";
-import { useOnboarding } from "@/features/onboarding/useOnboarding";
-import { useAutoSync } from "@/features/sync/AutoSyncProvider";
-import useSliceMachineActions from "@/modules/useSliceMachineActions";
+import { ComponentUI } from "@/legacy/lib/models/common/ComponentUI";
 
 import { getSubmitButtonLabel } from "../shared/getSubmitButtonLabel";
 import { useExistingSlices } from "../shared/useExistingSlices";
 import { useImportSlicesFromGithub } from "./hooks/useImportSlicesFromGithub";
-import { SliceCard } from "./SliceCard";
-import { NewSlice } from "./types";
-import { addSlices } from "./utils/addSlices";
-import { sliceWithoutConflicts } from "./utils/sliceWithoutConflicts";
+import { LibrarySlicesTab } from "./LibrarySlicesTab";
+import { LocalSlicesTab } from "./LocalSlicesTab";
+import {
+  ReuseExistingSlicesProvider,
+  useReuseExistingSlicesContext,
+} from "./ReuseExistingSlicesContext";
 
-interface ImportSlicesFromLibraryModalProps {
+interface ImportSlicesFromLibraryModalContent {
   open: boolean;
-  location: "custom_type" | "page_type" | "slices";
-  onSuccess: (args: {
-    slices: {
-      model: SharedSlice;
-      langSmithUrl?: string;
-    }[];
-    library: string;
-  }) => void;
+  location: "custom_type" | "page_type";
+  typeName: string;
+  availableSlices?: ReadonlyArray<ComponentUI>;
+  onSuccess: (args: { slices: SharedSlice[]; library?: string }) => void;
   onClose: () => void;
 }
 
-export function ImportSlicesFromLibraryModal(
-  props: ImportSlicesFromLibraryModalProps,
+function ImportSlicesFromLibraryModalContent(
+  props: ImportSlicesFromLibraryModalContent,
 ) {
-  const { open, location, onSuccess, onClose } = props;
-
-  const [isCreatingSlices, setIsCreatingSlices] = useState(false);
-  const [githubUrl, setGithubUrl] = useState("");
-  const [selectedSliceIds, setSelectedSliceIds] = useState<Set<string>>(
-    new Set(),
-  );
+  const {
+    open,
+    location,
+    typeName,
+    availableSlices = [],
+    onSuccess,
+    onClose,
+  } = props;
+  const [selectedTab, setSelectedTab] = useState("local");
 
-  const { syncChanges } = useAutoSync();
-  const { createSliceSuccess, updateSliceMockSuccess } =
-    useSliceMachineActions();
-  const { completeStep } = useOnboarding();
   const existingSlices = useExistingSlices({ open });
-  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 { resetSlices } = useImportSlicesFromGithub();
+  const { submit, isSubmitting, totalSelected, reset } =
+    useReuseExistingSlicesContext();
 
   const onOpenChange = (open: boolean) => {
-    if (open || isCreatingSlices) return;
+    if (open || isSubmitting) return;
     onClose();
-    id.current = crypto.randomUUID();
-    setGithubUrl("");
-    setSelectedSliceIds(new Set());
+    reset();
     resetSlices();
+    setSelectedTab("local");
   };
 
-  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 onSubmit = async () => {
+    try {
+      const result = await submit({ existingSlices, location, resetSlices });
+      onSuccess(result);
+    } catch (error) {
+      // Error is already handled in the submit function
     }
-
-    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="Import slices from library" />
+      <DialogHeader title="Reuse an existing slice" />
       <DialogContent gap={0}>
         <DialogDescription hidden>
-          Import slices from a github repository
+          Select existing slices or import slices from a GitHub repository
         </DialogDescription>
-        {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}
+        <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")}
               >
-                <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>
+                Local Slices
+              </Tab>
+              <Tab
+                selected={selectedTab === "library"}
+                onClick={() => setSelectedTab("library")}
+              >
+                Library Slices
+              </Tab>
             </Box>
+            {selectedTab === "library" && "<repo-select>"}
           </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>
-          </>
-        )}
+          <TabContent selected={selectedTab === "local"}>
+            <LocalSlicesTab availableSlices={availableSlices} />
+          </TabContent>
+          <TabContent selected={selectedTab === "library"}>
+            <LibrarySlicesTab />
+          </TabContent>
+        </Box>
 
         <DialogActions>
-          <DialogCancelButton disabled={isCreatingSlices} />
+          <DialogCancelButton disabled={isSubmitting} size="medium" />
           <DialogActionButton
-            disabled={selectedSlices.length === 0}
-            loading={isCreatingSlices}
-            onClick={onSubmit}
+            disabled={totalSelected === 0}
+            loading={isSubmitting}
+            onClick={() => void onSubmit()}
+            size="medium"
           >
-            {getSubmitButtonLabel(location)} ({selectedSlices.length})
+            {getSubmitButtonLabel(location, typeName)} ({totalSelected})
           </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/LibrarySlicesTab.tsx

@@ -0,0 +1,125 @@
+import {
+  Box,
+  Button,
+  Checkbox,
+  InlineLabel,
+  ScrollArea,
+  Text,
+  TextInput,
+} from "@prismicio/editor-ui";
+import { useMemo, useState } from "react";
+
+import { useImportSlicesFromGithub } from "./hooks/useImportSlicesFromGithub";
+import { useReuseExistingSlicesContext } from "./ReuseExistingSlicesContext";
+import { SliceCard } from "./SliceCard";
+
+export function LibrarySlicesTab() {
+  const [githubUrl, setGithubUrl] = useState("");
+  const { isLoadingSlices, handleImportFromGithub, slices } =
+    useImportSlicesFromGithub();
+  const { selectedLibrarySlices, toggleLibrarySlice, setAllLibrarySlices } =
+    useReuseExistingSlicesContext();
+
+  const { allSelected, someSelected } = useMemo(() => {
+    if (slices.length === 0) return { allSelected: false, someSelected: false };
+    return {
+      allSelected: slices.every((slice) =>
+        selectedLibrarySlices.some((s) => s.model.id === slice.model.id),
+      ),
+      someSelected: slices.some((slice) =>
+        selectedLibrarySlices.some((s) => s.model.id === slice.model.id),
+      ),
+    };
+  }, [slices, selectedLibrarySlices]);
+
+  const onSelectAll = (checked: boolean) => {
+    if (checked) {
+      setAllLibrarySlices(slices);
+    } else {
+      setAllLibrarySlices([]);
+    }
+  };
+
+  const onImport = async () => {
+    const fetchedSlices = await handleImportFromGithub(githubUrl);
+    setAllLibrarySlices(fetchedSlices);
+  };
+
+  if (slices.length === 0) {
+    return (
+      <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}
+          >
+            <Text color="grey11">Import from GitHub</Text>
+            <TextInput
+              placeholder="https://github.com/username/repository"
+              value={githubUrl}
+              onValueChange={setGithubUrl}
+            />
+            <Button
+              onClick={() => void onImport()}
+              disabled={!githubUrl.trim() || isLoadingSlices}
+              loading={isLoadingSlices}
+              color="purple"
+            >
+              {isLoadingSlices ? "Loading slices..." : "Import from GitHub"}
+            </Button>
+          </Box>
+        </Box>
+      </Box>
+    );
+  }
+
+  let selectAllLabel = "Select all slices";
+  if (allSelected) {
+    selectAllLabel = `Selected all slices (${selectedLibrarySlices.length})`;
+  } else if (someSelected) {
+    selectAllLabel = `${selectedLibrarySlices.length} of ${slices.length} selected`;
+  }
+
+  return (
+    <Box flexDirection="column" flexGrow={1} minHeight={0}>
+      <Box padding={{ block: 12, inline: 16 }} alignItems="center" gap={8}>
+        <InlineLabel value={selectAllLabel}>
+          <Checkbox
+            checked={allSelected}
+            indeterminate={someSelected && !allSelected}
+            onCheckedChange={onSelectAll}
+          />
+        </InlineLabel>
+      </Box>
+      <ScrollArea stableScrollbar={false}>
+        <Box
+          display="grid"
+          gridTemplateColumns="1fr 1fr 1fr"
+          gap={16}
+          padding={{ inline: 16, bottom: 16 }}
+        >
+          {slices.map((slice) => {
+            const isSelected = selectedLibrarySlices.some(
+              (s) => s.model.id === slice.model.id,
+            );
+            return (
+              <SliceCard
+                model={slice.model}
+                thumbnailUrl={slice.thumbnailUrl}
+                key={slice.model.id}
+                selected={isSelected}
+                onSelectedChange={() => {
+                  toggleLibrarySlice(slice);
+                }}
+              />
+            );
+          })}
+        </Box>
+      </ScrollArea>
+    </Box>
+  );
+}

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

@@ -0,0 +1,67 @@
+import { Box, ScrollArea } from "@prismicio/editor-ui";
+
+import { SharedSliceCard } from "@/features/slices/sliceCards/SharedSliceCard";
+import { ComponentUI } from "@/legacy/lib/models/common/ComponentUI";
+
+import { useReuseExistingSlicesContext } from "./ReuseExistingSlicesContext";
+
+interface LocalSlicesTabProps {
+  availableSlices: ReadonlyArray<ComponentUI>;
+}
+
+export function LocalSlicesTab(props: LocalSlicesTabProps) {
+  const { availableSlices } = props;
+  const { selectedLocalSlices, toggleLocalSlice } =
+    useReuseExistingSlicesContext();
+
+  if (availableSlices.length === 0) {
+    return (
+      <Box padding={16} height="100%" flexDirection="column" gap={16}>
+        <Box flexDirection="column" gap={8}>
+          <Box
+            display="flex"
+            flexDirection="column"
+            gap={8}
+            padding={16}
+            alignItems="center"
+            justifyContent="center"
+          >
+            No local slices available
+          </Box>
+        </Box>
+      </Box>
+    );
+  }
+
+  return (
+    <ScrollArea stableScrollbar={false}>
+      <Box
+        display="grid"
+        gridTemplateColumns="1fr 1fr 1fr"
+        gap={16}
+        flexGrow={1}
+        padding={16}
+        minHeight={0}
+      >
+        {availableSlices.map((slice) => {
+          const isSelected = selectedLocalSlices.some(
+            (s) => s.model.id === slice.model.id,
+          );
+          return (
+            <SharedSliceCard
+              key={`${slice.from}-${slice.model.name}`}
+              action={{ type: "checkbox" }}
+              mode="selection"
+              onSelectedChange={() => {
+                toggleLocalSlice(slice);
+              }}
+              selected={isSelected}
+              slice={slice}
+              variant="outlined"
+            />
+          );
+        })}
+      </Box>
+    </ScrollArea>
+  );
+}