slice-machine-ui 2.20.1 → 2.20.2-alpha.lg-import-slices.1

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

@@ -0,0 +1,336 @@
+import {
+  Box,
+  Button,
+  Checkbox,
+  Dialog,
+  DialogActionButton,
+  DialogActions,
+  DialogCancelButton,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  InlineLabel,
+  ScrollArea,
+  Text,
+  TextInput,
+} from "@prismicio/editor-ui";
+import { SharedSlice } from "@prismicio/types-internal/lib/customtypes";
+import { useEffect, useRef, useState } from "react";
+import { toast } from "react-toastify";
+
+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 { SliceCard } from "./SliceCard";
+import { NewSlice } from "./types";
+import { addSlices } from "./utils/addSlices";
+import { sliceWithoutConflicts } from "./utils/sliceWithoutConflicts";
+
+interface ImportSlicesFromLibraryModalProps {
+  open: boolean;
+  location: "custom_type" | "page_type" | "slices";
+  onSuccess: (args: {
+    slices: {
+      model: SharedSlice;
+      langSmithUrl?: string;
+    }[];
+    library: string;
+  }) => void;
+  onClose: () => void;
+}
+
+export function ImportSlicesFromLibraryModal(
+  props: ImportSlicesFromLibraryModalProps,
+) {
+  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 { 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 || isCreatingSlices) return;
+    onClose();
+    id.current = crypto.randomUUID();
+    setGithubUrl("");
+    setSelectedSliceIds(new Set());
+    resetSlices();
+  };
+
+  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="Import slices from library" />
+      <DialogContent gap={0}>
+        <DialogDescription hidden>
+          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}
+              >
+                <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>
+          </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={isCreatingSlices} />
+          <DialogActionButton
+            disabled={selectedSlices.length === 0}
+            loading={isCreatingSlices}
+            onClick={onSubmit}
+          >
+            {getSubmitButtonLabel(location)} ({selectedSlices.length})
+          </DialogActionButton>
+        </DialogActions>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,48 @@
+import { Checkbox } from "@prismicio/editor-ui";
+import { SharedSlice } from "@prismicio/types-internal/lib/customtypes";
+
+import { Card, CardFooter, CardMedia } from "@/components/Card";
+
+interface SliceCardProps {
+  thumbnailUrl?: string;
+  model: SharedSlice;
+  selected: boolean;
+  onSelectedChange: (selected: boolean) => void;
+}
+
+export function SliceCard(props: SliceCardProps) {
+  const { thumbnailUrl, model, selected = true, onSelectedChange } = props;
+
+  const handleClick = () => {
+    onSelectedChange(!selected);
+  };
+
+  const cardContent = (
+    <>
+      {thumbnailUrl !== undefined && thumbnailUrl ? (
+        <CardMedia src={thumbnailUrl} />
+      ) : (
+        <CardMedia component="div" />
+      )}
+      <CardFooter
+        title={model.name}
+        action={
+          <div onClick={(event) => event.stopPropagation()}>
+            <Checkbox checked={selected} onCheckedChange={onSelectedChange} />
+          </div>
+        }
+      />
+    </>
+  );
+
+  return (
+    <Card
+      interactive={true}
+      onClick={handleClick}
+      checked={selected}
+      size="small"
+    >
+      {cardContent}
+    </Card>
+  );
+}

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

@@ -0,0 +1,91 @@
+import { useState } from "react";
+import { toast } from "react-toastify";
+
+import { SliceImport } from "../types";
+import {
+  fetchSlicesFromLibraries,
+  getDefaultBranch,
+  getSliceLibraries,
+  parseGithubUrl,
+} from "../utils/github";
+
+export function useImportSlicesFromGithub() {
+  const [isLoadingSlices, setIsLoadingSlices] = useState(false);
+  const [slices, setSlices] = useState<SliceImport[]>([]);
+
+  const resetSlices = () => {
+    setSlices([]);
+    setIsLoadingSlices(false);
+  };
+
+  const handleImportFromGithub = async (githubUrl: string) => {
+    try {
+      setIsLoadingSlices(true);
+
+      const { owner, repo } = parseGithubUrl(githubUrl);
+      if (!owner || !repo) {
+        toast.error("Invalid GitHub URL format");
+        setIsLoadingSlices(false);
+        return;
+      }
+
+      const branch = await getDefaultBranch({ owner, repo });
+
+      let libraries: string[] | undefined;
+
+      try {
+        libraries = await getSliceLibraries({ owner, repo, branch });
+      } catch (error) {
+        console.error("Failed to fetch slicemachine.config.json:", error);
+        toast.error(
+          `Failed to fetch slicemachine.config.json: ${
+            error instanceof Error ? error.message : "Unknown error"
+          }`,
+        );
+        setIsLoadingSlices(false);
+        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.");
+        return;
+      }
+
+      const fetchedSlices = await fetchSlicesFromLibraries({
+        owner,
+        repo,
+        branch,
+        libraries,
+      });
+
+      if (fetchedSlices.length === 0) {
+        toast.error("Error fetching slices from the repository");
+        setIsLoadingSlices(false);
+        return;
+      }
+
+      setSlices(fetchedSlices);
+      setIsLoadingSlices(false);
+      toast.success(
+        `Found ${fetchedSlices.length} slice(s) from ${libraries.length} library/libraries`,
+      );
+    } catch (error) {
+      console.error("Error importing from GitHub:", error);
+      toast.error(
+        `Error importing from GitHub: ${
+          error instanceof Error ? error.message : "Unknown error"
+        }`,
+      );
+      setIsLoadingSlices(false);
+    }
+  };
+
+  return {
+    isLoadingSlices,
+    slices,
+    resetSlices,
+    handleImportFromGithub,
+  };
+}

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

@@ -0,0 +1 @@
+export { ImportSlicesFromLibraryModal } from "./ImportSlicesFromLibraryModal";

package/src/features/customTypes/customTypesBuilder/ImportSlicesFromLibraryModal/types.ts

@@ -0,0 +1,28 @@
+import { SharedSliceContent } from "@prismicio/types-internal/lib/content";
+import { SharedSlice } from "@prismicio/types-internal/lib/customtypes";
+
+export type SliceImport = {
+  image: File;
+  model: SharedSlice;
+  thumbnailUrl?: string;
+  files?: SliceFile[];
+  componentContents?: string;
+  mocks?: SharedSliceContent[];
+  screenshots?: Record<string, File>;
+};
+
+export type SliceFile = {
+  path: string;
+  contents: string | File;
+  isBinary: boolean;
+};
+
+export type NewSlice = {
+  image: File;
+  model: SharedSlice;
+  langSmithUrl?: string;
+  files?: SliceFile[];
+  componentContents?: string;
+  mocks?: SharedSliceContent[];
+  screenshots?: Record<string, File>;
+};

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

@@ -0,0 +1,186 @@
+import { managerClient } from "@/managerClient";
+
+import { NewSlice, SliceFile } from "../types";
+import { mapWithConcurrency } from "./mapWithConcurrency";
+
+export async function addSlices(newSlices: NewSlice[]) {
+  // use the first library
+  const { libraries = [] } =
+    await managerClient.project.getSliceMachineConfig();
+  const library = libraries[0];
+  if (!library) {
+    throw new Error("No library found in the config.");
+  }
+
+  // Create slices with bounded concurrency
+  await mapWithConcurrency(newSlices, 3, async (slice: NewSlice) => {
+    const { errors } = await managerClient.slices.createSlice({
+      libraryID: library,
+      model: slice.model,
+      componentContents: slice.componentContents,
+    });
+    if (errors.length) {
+      throw new Error(`Failed to create slice ${slice.model.id}.`);
+    }
+  });
+
+  // Update mocks and screenshots, and write additional files
+  const slices = await mapWithConcurrency(
+    newSlices,
+    3,
+    async (slice: NewSlice) => {
+      const { model, image, langSmithUrl, mocks, files, screenshots } = slice;
+
+      // Update mocks if available
+      if (mocks && Array.isArray(mocks) && mocks.length > 0) {
+        const { errors: mocksErrors } =
+          await managerClient.slices.updateSliceMocks({
+            libraryID: library,
+            sliceID: model.id,
+            mocks,
+          });
+        if (mocksErrors.length) {
+          console.warn(
+            `Failed to update mocks for slice ${model.id}:`,
+            mocksErrors,
+          );
+        }
+      }
+
+      // Update screenshots for all variations
+      if (screenshots && Object.keys(screenshots).length > 0) {
+        await Promise.all(
+          Object.entries(screenshots).map(
+            async ([variationID, screenshotFile]) => {
+              if (screenshotFile.size > 0) {
+                await managerClient.slices.updateSliceScreenshot({
+                  libraryID: library,
+                  sliceID: model.id,
+                  variationID,
+                  data: screenshotFile,
+                });
+              }
+            },
+          ),
+        );
+      } else if (
+        image.size > 0 &&
+        model.variations !== undefined &&
+        model.variations.length > 0
+      ) {
+        // Fallback to using the first image if no screenshots were provided
+        await managerClient.slices.updateSliceScreenshot({
+          libraryID: library,
+          sliceID: model.id,
+          variationID: model.variations[0].id,
+          data: image,
+        });
+      }
+
+      // Write additional files (CSS, other assets, etc.)
+      console.log(
+        `About to write files for slice ${model.id}:`,
+        files
+          ? `${files.length} file(s) - ${files
+              .map((f: SliceFile) => f.path)
+              .join(", ")}`
+          : "no files",
+      );
+      if (files && files.length > 0) {
+        await writeSliceFiles({
+          libraryID: library,
+          sliceID: model.id,
+          files,
+        });
+      } else {
+        console.warn(`No files to write for slice ${model.id}. Files:`, files);
+      }
+
+      return { model, langSmithUrl };
+    },
+  );
+
+  return { library, slices };
+}
+
+/**
+ * Writes additional slice files to the filesystem using the manager's plugin runner
+ * Uses the manager client's RPC interface to write files
+ */
+async function writeSliceFiles(args: {
+  libraryID: string;
+  sliceID: string;
+  files: SliceFile[];
+}): Promise<void> {
+  const { libraryID, sliceID, files } = args;
+
+  if (files.length === 0) {
+    return;
+  }
+
+  // Filter out files that are already handled by other methods
+  // Note: We still write ALL files, but skip ones that are handled by createSlice/updateSliceMocks/updateSliceScreenshot
+  // This includes component files in subdirectories, CSS files, assets, etc.
+  const filesToWrite = files.filter(
+    (file) =>
+      // Skip mocks.json (handled by updateSliceMocks)
+      file.path !== "mocks.json" &&
+      // Skip screenshots (handled by updateSliceScreenshot)
+      !file.path.startsWith("screenshot-") &&
+      // Skip the main index component file (handled by createSlice with componentContents)
+      // But allow component files in subdirectories (e.g., components/Button.tsx)
+      !file.path.match(/^index\.(tsx?|jsx?|vue|svelte)$/),
+  );
+
+  console.log(
+    `Writing ${filesToWrite.length} additional file(s) for slice ${sliceID}:`,
+    filesToWrite.map((f) => f.path),
+  );
+
+  if (filesToWrite.length === 0) {
+    return;
+  }
+
+  try {
+    const filesForRPC = filesToWrite.map((file) => {
+      if (file.isBinary) {
+        return {
+          path: file.path,
+          contents: file.contents,
+          isBinary: true,
+        };
+      } else if (typeof file.contents === "string") {
+        return {
+          path: file.path,
+          contents: file.contents,
+          isBinary: false,
+        };
+      } else {
+        throw new Error(`Unexpected file contents type for ${file.path}`);
+      }
+    });
+
+    const result = await managerClient.slices.writeSliceFiles({
+      libraryID,
+      sliceID,
+      files: filesForRPC,
+    });
+
+    if (result.errors.length > 0) {
+      console.error(
+        `Errors writing files for slice ${sliceID}:`,
+        result.errors.map((e: { message?: string }) => e.message ?? String(e)),
+      );
+    } else {
+      console.log(
+        `Successfully wrote ${filesToWrite.length} file(s) for slice ${sliceID}`,
+      );
+    }
+  } catch (error) {
+    console.error(
+      `Error writing files for slice ${sliceID}:`,
+      error instanceof Error ? error.message : String(error),
+    );
+    // Don't throw - allow slice creation to succeed even if some files fail
+  }
+}