[DT-3158] feat: import from github in reuse existing slices dialog

packages/slice-machine/package.json

@@ -42,9 +42,9 @@
     "@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",

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

@@ -0,0 +1,32 @@
+import {
+  DialogActionButton,
+  DialogActions,
+  DialogCancelButton,
+} from "@prismicio/editor-ui";
+
+import { CommonDialogProps } from "./types";
+
+type DialogButtonsProps = {
+  totalSelected: number;
+  isSubmitting?: boolean;
+  onSubmit: () => void | Promise<void>;
+  typeName: CommonDialogProps["typeName"];
+};
+
+export function DialogButtons(props: DialogButtonsProps) {
+  const { totalSelected, onSubmit, isSubmitting, typeName } = props;
+
+  return (
+    <DialogActions>
+      <DialogCancelButton disabled={isSubmitting} size="medium" />
+      <DialogActionButton
+        disabled={totalSelected === 0}
+        loading={isSubmitting}
+        onClick={() => void onSubmit()}
+        size="medium"
+      >
+        Add to {typeName} ({totalSelected})
+      </DialogActionButton>
+    </DialogActions>
+  );
+}

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

@@ -0,0 +1,25 @@
+import { Box } from "@prismicio/editor-ui";
+import { ReactNode } from "react";
+
+interface DialogContentProps {
+  children: ReactNode;
+  selected: boolean;
+}
+
+export function DialogContent(args: DialogContentProps) {
+  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>
+  );
+}

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

@@ -0,0 +1,34 @@
+import { Box, Tab } from "@prismicio/editor-ui";
+import { ReactNode } from "react";
+
+import { DialogTab } from "./types";
+
+interface DialogTabsProps {
+  selectedTab: DialogTab;
+  onSelectTab: (tab: DialogTab) => void;
+  rightContent?: ReactNode;
+}
+
+export function DialogTabs(props: DialogTabsProps) {
+  const { selectedTab, onSelectTab, rightContent } = props;
+
+  return (
+    <Box justifyContent="space-between" padding={16} border={{ bottom: true }}>
+      <Box gap={8}>
+        <Tab
+          selected={selectedTab === "local"}
+          onClick={() => onSelectTab("local")}
+        >
+          Local Slices
+        </Tab>
+        <Tab
+          selected={selectedTab === "library"}
+          onClick={() => onSelectTab("library")}
+        >
+          Library Slices
+        </Tab>
+      </Box>
+      {rightContent}
+    </Box>
+  );
+}