prototype: Show patterns select in AddComponentModal

apps/editor.planx.uk/src/pages/FlowEditor/components/forms/AddComponentModal.stories.tsx

@@ -1,8 +1,10 @@
 import Paper from "@mui/material/Paper";
 import type { Meta, StoryObj } from "@storybook/tanstack-react";
+import React, { useState } from "react";
 
 import AddComponentModal, {
   AddComponentModalContent,
+  type ModalTab,
 } from "./AddComponentModal";
 
 const meta: Meta<typeof AddComponentModal> = {
@@ -14,20 +16,31 @@ export default meta;
 
 type Story = StoryObj<typeof AddComponentModal>;
 
-export const Default: Story = {
-  render: () => (
+const AddComponentModalContentDemo: React.FC = () => {
+  const [activeTab, setActiveTab] = useState<ModalTab>("components");
+
+  return (
     <Paper
       sx={{
-        width: 300,
-        maxHeight: "min(480px, 85vh)",
+        width: activeTab === "patterns" ? 560 : 300,
+        height: "min(480px, 85vh)",
         display: "flex",
         flexDirection: "column",
         overflow: "hidden",
         border: 1,
         borderColor: "divider",
       }}
     >
-      <AddComponentModalContent onSelect={() => {}} />
+      <AddComponentModalContent
+        onSelect={() => {}}
+        onInsertPattern={() => {}}
+        activeTab={activeTab}
+        onTabChange={setActiveTab}
+      />
     </Paper>
-  ),
+  );
+};
+
+export const Default: Story = {
+  render: () => <AddComponentModalContentDemo />,
 };

apps/editor.planx.uk/src/pages/FlowEditor/components/forms/AddComponentModal.tsx

@@ -1,8 +1,11 @@
 import Box from "@mui/material/Box";
 import Popover from "@mui/material/Popover";
+import { styled } from "@mui/material/styles";
+import Tabs, { tabsClasses } from "@mui/material/Tabs";
 import Tooltip from "@mui/material/Tooltip";
 import Typography from "@mui/material/Typography";
 import { ICONS } from "@planx/components/shared/icons";
+import type { Graph } from "@planx/graph";
 import { useNavigate, useParams } from "@tanstack/react-router";
 import { hangerAnchor } from "pages/FlowEditor/lib/hangerAnchor";
 import { useStore } from "pages/FlowEditor/lib/store";
@@ -16,6 +19,7 @@ import React, {
 import type { NodeSearchParams } from "routes/_authenticated/app/$team/$flow/_flowEditor/nodes/route";
 import { FONT_WEIGHT_SEMI_BOLD } from "theme";
 import { AiChip } from "ui/editor/AiChip";
+import StyledTab from "ui/editor/StyledTab";
 import { SearchBox } from "ui/shared/SearchBox/SearchBox";
 import { getNodeRoute } from "utils/routeUtils/utils";
 
@@ -25,6 +29,26 @@ import {
   type Category,
   type ComponentItem,
 } from "./componentData";
+import {
+  DETAIL_PANEL_WIDTH,
+  PatternsTabContent,
+} from "./Patterns/PatternsTabContent";
+
+export type ModalTab = "components" | "patterns";
+
+const TabList = styled(Box)(({ theme }) => ({
+  position: "relative",
+  borderBottom: `1px solid ${theme.palette.divider}`,
+  backgroundColor: theme.palette.background.paper,
+  width: "100%",
+  [`& .${tabsClasses.root}`]: {
+    minHeight: 0,
+    padding: theme.spacing(0, 1),
+  },
+  [`& .${tabsClasses.indicator}`]: {
+    display: "none",
+  },
+}));
 
 const POPOVER_WIDTH = 300;
 
@@ -92,15 +116,26 @@ const ComponentRow: React.FC<ComponentRowProps> = ({
 
 interface AddComponentModalContentProps {
   onSelect: (slug: string) => void;
+  onInsertPattern: (graph: Graph) => void;
+  activeTab: ModalTab;
+  onTabChange: (tab: ModalTab) => void;
+  showPatternsTab?: boolean;
 }
 
 export const AddComponentModalContent: React.FC<
   AddComponentModalContentProps
-> = ({ onSelect }) => {
+> = ({
+  onSelect,
+  onInsertPattern,
+  activeTab,
+  onTabChange,
+  showPatternsTab = true,
+}) => {
   const [searchedItems, setSearchedItems] = useState<ComponentItem[] | null>(
     null,
   );
   const listRef = useRef<HTMLDivElement>(null);
+  const effectiveTab: ModalTab = showPatternsTab ? activeTab : "components";
 
   const filteredCategories = useMemo<Category[]>(() => {
     if (!searchedItems) return ALL_CATEGORIES;
@@ -112,65 +147,88 @@ export const AddComponentModalContent: React.FC<
   }, [searchedItems]);
 
   useEffect(() => {
+    if (effectiveTab !== "components") return;
     const timer = setTimeout(() => {
       (document.getElementById("search") as HTMLInputElement | null)?.focus();
     }, 50);
     return () => clearTimeout(timer);
-  }, []);
+  }, [effectiveTab]);
 
   return (
     <>
-      <Box
-        sx={{
-          px: 1.5,
-          py: 1.25,
-          borderBottom: 1,
-          borderColor: "divider",
-          backgroundColor: "background.paper",
-        }}
-      >
-        <SearchBox<ComponentItem>
-          records={ALL_ITEMS}
-          setRecords={setSearchedItems}
-          searchKey={["title", "description"]}
-          compact
-          hideLabel
-          fullWidth
-          placeholder="Search components"
-        />
-      </Box>
-      <Box ref={listRef} sx={{ overflowY: "auto", pb: 2 }}>
-        {filteredCategories.length === 0 ? (
-          <Typography color="textSecondary" variant="body2" sx={{ p: 2 }}>
-            No components match your search.
-          </Typography>
-        ) : (
-          filteredCategories.map((cat) => (
-            <Box key={cat.label}>
-              <Typography
-                variant="body3"
-                sx={{
-                  fontWeight: FONT_WEIGHT_SEMI_BOLD,
-                  display: "block",
-                  p: 1.5,
-                  pb: 0.5,
-                  color: "text.primary",
-                }}
-              >
-                {cat.label}
+      {showPatternsTab && (
+        <TabList>
+          <Box sx={{ maxWidth: "300px" }}>
+            <Tabs
+              value={effectiveTab}
+              onChange={(_event, value: ModalTab) => onTabChange(value)}
+              aria-label="Add component modal tabs"
+              variant="fullWidth"
+            >
+              <StyledTab value="components" label="Components" />
+              <StyledTab value="patterns" label="Patterns" />
+            </Tabs>
+          </Box>
+        </TabList>
+      )}
+      {effectiveTab === "components" && (
+        <>
+          <Box
+            sx={{
+              px: 1.5,
+              py: 1.25,
+              borderBottom: 1,
+              borderColor: "divider",
+              backgroundColor: "background.paper",
+            }}
+          >
+            <SearchBox<ComponentItem>
+              records={ALL_ITEMS}
+              setRecords={setSearchedItems}
+              searchKey={["title", "description"]}
+              compact
+              hideLabel
+              fullWidth
+              placeholder="Search components"
+            />
+          </Box>
+          <Box ref={listRef} sx={{ overflowY: "auto", pb: 2 }}>
+            {filteredCategories.length === 0 ? (
+              <Typography color="textSecondary" variant="body2" sx={{ p: 2 }}>
+                No components match your search.
               </Typography>
-              {cat.items.map((item) => (
-                <ComponentRow
-                  key={item.slug}
-                  item={item}
-                  onClick={() => onSelect(item.slug)}
-                  scrollContainerRef={listRef}
-                />
-              ))}
-            </Box>
-          ))
-        )}
-      </Box>
+            ) : (
+              filteredCategories.map((cat) => (
+                <Box key={cat.label}>
+                  <Typography
+                    variant="body3"
+                    sx={{
+                      fontWeight: FONT_WEIGHT_SEMI_BOLD,
+                      display: "block",
+                      p: 1.5,
+                      pb: 0.5,
+                      color: "text.primary",
+                    }}
+                  >
+                    {cat.label}
+                  </Typography>
+                  {cat.items.map((item) => (
+                    <ComponentRow
+                      key={item.slug}
+                      item={item}
+                      onClick={() => onSelect(item.slug)}
+                      scrollContainerRef={listRef}
+                    />
+                  ))}
+                </Box>
+              ))
+            )}
+          </Box>
+        </>
+      )}
+      {effectiveTab === "patterns" && (
+        <PatternsTabContent onInsertPattern={onInsertPattern} />
+      )}
     </>
   );
 };
@@ -180,12 +238,17 @@ interface AddComponentModalProps {
   before?: string;
 }
 
+const PATTERNS_POPOVER_WIDTH = POPOVER_WIDTH + DETAIL_PANEL_WIDTH;
+
 const AddComponentModal: React.FC<AddComponentModalProps> = ({
   parent,
   before,
 }) => {
   const navigate = useNavigate();
   const { team, flow } = useParams({ from: "/_authenticated/app/$team/$flow" });
+  const [activeTab, setActiveTab] = useState<ModalTab>("components");
+  const popoverWidth =
+    activeTab === "patterns" ? PATTERNS_POPOVER_WIDTH : POPOVER_WIDTH;
 
   const handleSelect = useCallback(
     (slug: string) => {
@@ -204,6 +267,14 @@ const AddComponentModal: React.FC<AddComponentModalProps> = ({
     [navigate, team, flow, parent, before],
   );
 
+  const handleInsertPattern = useCallback(
+    (graph: Graph) => {
+      useStore.getState().insertPatternGraph(graph, parent, before);
+      useStore.getState().closeComponentSelector();
+    },
+    [parent, before],
+  );
+
   const handleClose = useCallback(() => {
     useStore.getState().closeComponentSelector();
   }, []);
@@ -215,10 +286,10 @@ const AddComponentModal: React.FC<AddComponentModalProps> = ({
 
   const buttonCenterX = rect
     ? Math.max(
-        POPOVER_WIDTH / 2 + 8,
+        popoverWidth / 2 + 8,
         Math.min(
           rect.left + (rect.right - rect.left) / 2,
-          window.innerWidth - POPOVER_WIDTH / 2 - 8,
+          window.innerWidth - popoverWidth / 2 - 8,
         ),
       )
     : window.innerWidth / 2;
@@ -244,8 +315,8 @@ const AddComponentModal: React.FC<AddComponentModalProps> = ({
       slotProps={{
         paper: {
           sx: {
-            width: POPOVER_WIDTH,
-            maxHeight: "min(480px, 85vh)",
+            width: popoverWidth,
+            height: "min(480px, 85vh)",
             display: "flex",
             flexDirection: "column",
             overflow: "hidden",
@@ -258,7 +329,12 @@ const AddComponentModal: React.FC<AddComponentModalProps> = ({
         },
       }}
     >
-      <AddComponentModalContent onSelect={handleSelect} />
+      <AddComponentModalContent
+        onSelect={handleSelect}
+        onInsertPattern={handleInsertPattern}
+        activeTab={activeTab}
+        onTabChange={setActiveTab}
+      />
     </Popover>
   );
 };

apps/editor.planx.uk/src/pages/FlowEditor/components/forms/ChangeComponentHeader.tsx

@@ -5,7 +5,10 @@ import React, { useState } from "react";
 import ComponentTypeHeader from "ui/editor/ComponentTypeHeader";
 
 import { fromSlug } from "../../data/types";
-import { AddComponentModalContent } from "./AddComponentModal";
+import { AddComponentModalContent, type ModalTab } from "./AddComponentModal";
+
+// The Patterns tab is hidden here (showPatternsTab={false}), so this is never called
+const noop = () => undefined;
 
 interface Props {
   type: string;
@@ -19,6 +22,7 @@ const ChangeComponentHeader: React.FC<Props> = ({
   canChange,
 }) => {
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+  const [activeTab, setActiveTab] = useState<ModalTab>("components");
 
   const componentType = fromSlug(type);
 
@@ -65,7 +69,13 @@ const ChangeComponentHeader: React.FC<Props> = ({
           },
         }}
       >
-        <AddComponentModalContent onSelect={handleSelect} />
+        <AddComponentModalContent
+          onSelect={handleSelect}
+          onInsertPattern={noop}
+          activeTab={activeTab}
+          onTabChange={setActiveTab}
+          showPatternsTab={false}
+        />
       </Popover>
     </>
   );