feat: add select all checkbox back

fix: overflowing container

Author: jomifepe

packages/slice-machine/src/features/customTypes/customTypesBuilder/ImportSlicesFromLibraryModal/ImportSlicesFromLibraryModal.tsx

@@ -129,11 +129,15 @@ function TabContent(args: TabContentProps) {
   const { children, selected } = args;
 
   if (!selected) {
-    return <Box display="none">{children}</Box>;
+    return (
+      <Box display="none" minHeight={0}>
+        {children}
+      </Box>
+    );
   }
 
   return (
-    <Box display="flex" flexDirection="column" flexGrow={1}>
+    <Box display="flex" flexDirection="column" flexGrow={1} minHeight={0}>
       {children}
     </Box>
   );

packages/slice-machine/src/features/customTypes/customTypesBuilder/ImportSlicesFromLibraryModal/LibrarySlicesTab.tsx

@@ -1,5 +1,13 @@
-import { Box, Button, ScrollArea, Text, TextInput } from "@prismicio/editor-ui";
-import { useEffect, useState } from "react";
+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";
@@ -12,12 +20,30 @@ export function LibrarySlicesTab() {
   const { selectedLibrarySlices, toggleLibrarySlice, setAllLibrarySlices } =
     useReuseExistingSlicesContext();
 
-  useEffect(() => {
-    if (slices.length === 0) return;
+  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]);
 
-    // Set all slices as selected by default
-    setAllLibrarySlices(slices);
-  }, [slices, setAllLibrarySlices]);
+  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 (
@@ -38,7 +64,7 @@ export function LibrarySlicesTab() {
               onValueChange={setGithubUrl}
             />
             <Button
-              onClick={() => void handleImportFromGithub(githubUrl)}
+              onClick={() => void onImport()}
               disabled={!githubUrl.trim() || isLoadingSlices}
               loading={isLoadingSlices}
               color="purple"
@@ -51,31 +77,49 @@ export function LibrarySlicesTab() {
     );
   }
 
+  let selectAllLabel = "Select all slices";
+  if (allSelected) {
+    selectAllLabel = `Selected all slices (${selectedLibrarySlices.length})`;
+  } else if (someSelected) {
+    selectAllLabel = `${selectedLibrarySlices.length} of ${slices.length} selected`;
+  }
+
   return (
-    <ScrollArea stableScrollbar={false}>
-      <Box
-        display="grid"
-        gridTemplateColumns="1fr 1fr 1fr"
-        gap={16}
-        padding={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 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>
+      <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>
   );
 }

packages/slice-machine/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);
-        return;
+        throw new Error("Invalid GitHub URL format");
       }
 
       const branch = await getDefaultBranch({ owner, repo });
@@ -43,14 +43,14 @@ export function useImportSlicesFromGithub() {
           }`,
         );
         setIsLoadingSlices(false);
-        return;
+        throw error;
       }
 
       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;
+        throw new Error("No libraries were found in the SM config.");
       }
 
       const fetchedSlices = await fetchSlicesFromLibraries({
@@ -63,14 +63,16 @@ export function useImportSlicesFromGithub() {
       if (fetchedSlices.length === 0) {
         toast.error("Error fetching slices from the repository");
         setIsLoadingSlices(false);
-        return;
+        throw new Error("No slices were found in the libraries.");
       }
 
       setSlices(fetchedSlices);
       setIsLoadingSlices(false);
       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(
@@ -79,6 +81,7 @@ export function useImportSlicesFromGithub() {
         }`,
       );
       setIsLoadingSlices(false);
+      return [];
     }
   };