chore: update dependencies and improve MDX components

.vscode/settings.json

@@ -3,7 +3,7 @@
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
     "source.fixAll": "always",
-    "source.organizeImports": "always"
+    "source.organizeImports": "explicit"
   },
   "astro.content-intellisense": true,
   "yaml.schemas": {
@@ -13,6 +13,9 @@
   "[xml]": {
     "editor.defaultFormatter": "redhat.vscode-xml"
   },
+  "[mdx]": {
+    "editor.defaultFormatter": "unifiedjs.vscode-mdx"
+  },
   "typescript.tsdk": "node_modules/typescript/lib",
   "workbench.editor.customLabels.patterns": {
     // Astro
@@ -25,5 +28,8 @@
     "**/src/content/creators/*.mdx": "Creators ${filename}.${extname}",
     "**/src/content/docs/**/*.md": "Docs ${filename}.${extname}",
     "**/src/content/docs/**/*.mdx": "Docs ${filename}.${extname}"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   }
 }

src/components/client/MDX/MDX.tsx

@@ -3,6 +3,7 @@ import { Hash } from "lucide-react";
 import type React from "react";
 import { UI } from "../../ui/ui";
 import { getSurfaceStyle } from "../Surface/getSurfaceStyle";
+
 import { MDXCheckboxField } from "./mdx-components/state/MDXCheckboxField";
 import { MDXList } from "./mdx-components/state/MDXList";
 import { MDXNumberField } from "./mdx-components/state/MDXNumberField";
@@ -12,6 +13,7 @@ import { MDXTextAreaField } from "./mdx-components/state/MDXTextAreaField";
 import { MDXTextField } from "./mdx-components/state/MDXTextField";
 import { MDXTracker } from "./mdx-components/state/MDXTracker";
 import { MDXBox } from "./mdx-components/ui/MDXBox";
+import { MDXCodeBox } from "./mdx-components/ui/MDXCodeBox";
 import { MDXColumns } from "./mdx-components/ui/MDXColumns";
 import { MDXDetail } from "./mdx-components/ui/MDXDetail";
 import { MDXDivider } from "./mdx-components/ui/MDXDivider";
@@ -42,7 +44,7 @@ export function MDXProseSheetWrapper(props: { children: React.ReactNode }) {
 
 export function Fields(props: { children: React.ReactNode }) {
   return (
-    <div className="flex w-full flex-col gap-4 py-4 [&_*]:m-0">
+    <div className="flex w-full flex-col gap-4 py-2 [&_*]:m-0">
       {props.children}
     </div>
   );
@@ -91,6 +93,7 @@ export function getMdxComponents(arg: { allowH1s?: boolean } = {}) {
     Row: MDXRow as any,
     Columns: MDXColumns as any,
     Box: MDXBox as any,
+    CodeBox: MDXCodeBox as any,
     Stack: MDXStack as any,
     Heading: MDXHeading as any,
     Label: MDXLabel as any,

src/components/client/MDX/mdx-components/state/MDXCheckboxField.tsx

@@ -1,8 +1,8 @@
-import { useContext, useState } from "react";
+import { useState } from "react";
 import { z } from "zod";
 import {
-  CampaignContext,
   CampaignState,
+  useCampaignManager,
 } from "../../../../../domains/campaign/useCampaign";
 import { parseProps } from "../../../../../domains/utils/parseProps";
 import { UI } from "../../../../ui/ui";
@@ -24,7 +24,7 @@ export function MDXCheckboxField(p: Props) {
   });
   const name = useName({ name: props.name });
 
-  const campaignManager = useContext(CampaignContext);
+  const campaignManager = useCampaignManager();
   const [value, setValue] = useState<boolean>(() => {
     return (
       campaignManager.getCurrentFormValue({ name: name }) || props.defaultValue
@@ -33,7 +33,7 @@ export function MDXCheckboxField(p: Props) {
 
   return (
     <UI.Text data-mdx-type="text-field" as="label" size="2">
-      <div className="flex gap-2">
+      <div className="flex items-center gap-2">
         <UI.Checkbox
           name={name}
           size="3"

src/components/client/MDX/mdx-components/state/MDXList.tsx

@@ -1,19 +1,17 @@
-import React, { useContext, useEffect, useState } from "react";
+import { ArrowDown, ArrowUp, PlusIcon, Trash2 } from "lucide-react";
+import React, { useEffect, useState } from "react";
 import { z } from "zod";
-import { CampaignContext } from "../../../../../domains/campaign/useCampaign";
+import { useCampaignManager } from "../../../../../domains/campaign/useCampaign";
 import { parseProps } from "../../../../../domains/utils/parseProps";
 import { UI } from "../../../../ui/ui";
 import { MDXStack } from "../ui/MDXStack";
 
 const propsSchema = z.object({
   name: z.string(),
-  min: z
-    .number()
-    .optional()
-    .default(1)
-    .refine((v) => v >= 1),
+  min: z.number().optional().default(1),
   max: z.number().optional(),
   children: z.any().optional(),
+  addButtonLabel: z.string().optional().default("Add Item"),
 });
 
 type Props = z.input<typeof propsSchema>;
@@ -41,8 +39,7 @@ export function MDXList(p: Props) {
     componentName: "MDXList",
   });
 
-  const campaignManager = useContext(CampaignContext);
-
+  const campaignManager = useCampaignManager();
   const [ids, setIds] = useState<Array<string>>([]);
 
   useEffect(() => {
@@ -68,8 +65,10 @@ export function MDXList(p: Props) {
     setIds([...idsToSet]);
   }, []);
 
-  function handleAddBelow(id: string) {
+  function handleAddBelow(id?: string) {
     setIds((prev) => {
+      debugger;
+      if (!id) return [...prev, crypto.randomUUID()];
       return prev.reduce((acc, currentId) => {
         if (currentId === id) {
           return [...acc, currentId, crypto.randomUUID()];
@@ -90,11 +89,10 @@ export function MDXList(p: Props) {
     setIds((prev) => {
       const newIds = [...prev];
       const fromIndex = newIds.indexOf(id);
-      const toIndex = fromIndex - 1 <= 0 ? 0 : fromIndex - 1;
-      const element = newIds[fromIndex];
-      newIds.splice(fromIndex, 1);
-      newIds.splice(toIndex, 0, element);
-
+      if (fromIndex > 0) {
+        const [removed] = newIds.splice(fromIndex, 1);
+        newIds.splice(fromIndex - 1, 0, removed);
+      }
       return newIds;
     });
   }
@@ -103,83 +101,94 @@ export function MDXList(p: Props) {
     setIds((prev) => {
       const newIds = [...prev];
       const fromIndex = newIds.indexOf(id);
-      const toIndex =
-        fromIndex + 1 >= newIds.length ? newIds.length - 1 : fromIndex + 1;
-      const element = newIds[fromIndex];
-      newIds.splice(fromIndex, 1);
-      newIds.splice(toIndex, 0, element);
-
+      if (fromIndex < newIds.length - 1) {
+        const [removed] = newIds.splice(fromIndex, 1);
+        newIds.splice(fromIndex + 1, 0, removed);
+      }
       return newIds;
     });
   }
 
   return (
-    <div className="flex w-full flex-col gap-2" data-mdx-type="list">
-      {ids.map((id) => {
-        const isFirst = id === ids[0];
-        const isLast = id === ids[ids.length - 1];
-        const shouldRenderDeleteButton = ids.length > props.min;
-        const shouldRenderMoveButtons = !(isFirst && isLast);
-
-        return (
-          <ListContext.Provider
-            value={{
-              name: props.name,
-              id,
-            }}
-            key={id}
-          >
-            <UI.ContextMenu.Root>
-              <UI.Tooltip
-                content={"Right click the card's background for options..."}
-              >
-                <UI.ContextMenu.Trigger>
-                  <UI.Card size="2" className={"w-full"}>
-                    <div className="flex items-start gap-4">
-                      <MDXStack>{props.children}</MDXStack>
-                      <UI.ContextMenu.Content color="gray">
-                        <UI.ContextMenu.Item onClick={() => handleAddBelow(id)}>
-                          Add Below
-                        </UI.ContextMenu.Item>
-                        {shouldRenderMoveButtons && (
-                          <>
-                            <UI.ContextMenu.Separator />
-                            {!isFirst && (
-                              <UI.ContextMenu.Item
-                                onClick={() => handleMoveUp(id)}
-                              >
-                                Move Up
-                              </UI.ContextMenu.Item>
-                            )}
-                            {!isLast && (
-                              <UI.ContextMenu.Item
-                                onClick={() => handleMoveDown(id)}
-                              >
-                                Move Down
-                              </UI.ContextMenu.Item>
-                            )}
-                          </>
-                        )}
-                        {shouldRenderDeleteButton && (
-                          <>
-                            <UI.ContextMenu.Separator />
-                            <UI.ContextMenu.Item
-                              color="red"
-                              onClick={() => handleDelete(id)}
-                            >
-                              Delete
-                            </UI.ContextMenu.Item>
-                          </>
-                        )}
-                      </UI.ContextMenu.Content>
+    <div className="mx-auto flex w-full max-w-3xl flex-col items-end gap-3">
+      <div className="flex w-full flex-col gap-4">
+        {ids.map((id, index) => {
+          const isFirst = index === 0;
+          const isLast = index === ids.length - 1;
+          const shouldRenderDeleteButton = ids.length > props.min;
+
+          const canMoveUp = !isFirst;
+          const canMoveDown = !isLast;
+          const canDelete = shouldRenderDeleteButton;
+          const hasActions = canMoveUp || canMoveDown || canDelete;
+
+          return (
+            <ListContext.Provider value={{ name: props.name, id }} key={id}>
+              {hasActions ? (
+                <UI.HoverCard.Root>
+                  <UI.HoverCard.Trigger>
+                    <UI.Card
+                      size="2"
+                      className="group flex w-full flex-row items-center gap-2 p-4"
+                    >
+                      <div className="flex-1">
+                        <MDXStack className="w-full">{props.children}</MDXStack>
+                      </div>
+                    </UI.Card>
+                  </UI.HoverCard.Trigger>
+                  <UI.HoverCard.Content side="right" size="1">
+                    <div className="flex flex-row gap-2">
+                      {canMoveUp && (
+                        <UI.IconButton
+                          variant="soft"
+                          aria-label="Move up"
+                          onClick={() => handleMoveUp(id)}
+                        >
+                          <ArrowUp size={20} />
+                        </UI.IconButton>
+                      )}
+                      {canMoveDown && (
+                        <UI.IconButton
+                          aria-label="Move down"
+                          variant="soft"
+                          onClick={() => handleMoveDown(id)}
+                        >
+                          <ArrowDown size={20} />
+                        </UI.IconButton>
+                      )}
+                      {canDelete && (
+                        <UI.IconButton
+                          aria-label="Delete"
+                          variant="outline"
+                          color="red"
+                          onClick={() => handleDelete(id)}
+                        >
+                          <Trash2 size={20} />
+                        </UI.IconButton>
+                      )}
                     </div>
-                  </UI.Card>
-                </UI.ContextMenu.Trigger>
-              </UI.Tooltip>
-            </UI.ContextMenu.Root>
-          </ListContext.Provider>
-        );
-      })}
+                  </UI.HoverCard.Content>
+                </UI.HoverCard.Root>
+              ) : (
+                <UI.Card
+                  size="2"
+                  className="group flex w-full flex-row items-center gap-2 p-4"
+                >
+                  <div className="flex-1">
+                    <MDXStack className="w-full">{props.children}</MDXStack>
+                  </div>
+                </UI.Card>
+              )}
+            </ListContext.Provider>
+          );
+        })}
+      </div>
+      <div className="flex-end flex items-center">
+        <UI.Button onClick={() => handleAddBelow()} size="2" variant="soft">
+          <PlusIcon size={16} />
+          {props.addButtonLabel}
+        </UI.Button>
+      </div>
     </div>
   );
 }