chore: updated plugins to use context value instead of children props

henrynoowah · Jan 10, 2025 · d344caf · d344caf
1 parent 181e299
commit d344caf
Show file tree

Hide file tree

Showing 8 changed files with 155 additions and 193 deletions.
diff --git a/apps/docs/stories/plugins.stories.tsx b/apps/docs/stories/plugins.stories.tsx
@@ -5,7 +5,11 @@ import { SettingsButton } from "@noowah/content-builder/editor/plugins/settings"
 
 const meta: Meta<typeof Editor> = {
   title: "UI/Plugins",
-  component: Editor,
+  component: (props) => (
+    <Editor {...props}>
+      <SettingsButton />
+    </Editor>
+  ),
   decorators: [(Story) => <Story />],
   tags: ["autodocs"],
   parameters: { layout: "full" },
@@ -15,11 +19,10 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const WithSettings: Story = {
+export const Settings: Story = {
   args: {
     onSubmit: () => {},
     onChange: () => {},
-    children: (props) => <SettingsButton {...props} />,
     data,
   },
 };
diff --git a/packages/config-eslint/next.ts b/packages/config-eslint/next.ts
diff --git a/packages/ui/src/components/editor/Editor.tsx b/packages/ui/src/components/editor/Editor.tsx
@@ -14,18 +14,30 @@ import {
   rectSortingStrategy,
   SortableContext,
 } from "@dnd-kit/sortable";
-import { lazy, useRef, useState } from "react";
+import { createContext, lazy, useContext, useRef, useState } from "react";
 import { FormProvider, useFieldArray, useForm } from "react-hook-form";
 import { twMerge } from "tailwind-merge";
 import { convertJSONToCSS } from "../../lib";
 import type {
   Block,
+  EditorContextProps,
   EditorProps,
   Page,
   Section,
   SectionEditor,
 } from "../../types";
 
+// Create the EditorContext
+const EditorContext = createContext<EditorContextProps | undefined>(undefined);
+
+export const useEditorContext = () => {
+  const context = useContext(EditorContext);
+  if (!context) {
+    throw new Error("useEditorContext must be used within an EditorProvider");
+  }
+  return context;
+};
+
 const SectionEditor = lazy(() => import("./section-editor"));
 
 const Editor = ({ view = "web", data, onSubmit, children }: EditorProps) => {
@@ -111,104 +123,108 @@ const Editor = ({ view = "web", data, onSubmit, children }: EditorProps) => {
   };
 
   return (
-    <FormProvider {...methods}>
-      <form
-        style={{
-          ...data?.style,
-          containerName,
-          maxWidth: view === "web" ? undefined : "768px",
-        }}
-        onSubmit={handleSubmit(onSubmitHandler, (err) => console.error(err))}
-      >
-        <DndContext
-          sensors={sensors}
-          collisionDetection={closestCenter}
-          onDragStart={onDragStart}
-          onDragEnd={onDragEnd}
+    <EditorContext.Provider
+      value={{
+        data,
+        selectedSection,
+        selectedBlock,
+        updateSelectedSection: updateSectionHandler,
+        updateSelectedBlock: updateBlockHandler,
+        addBlock: addBlockHandler,
+      }}
+    >
+      <FormProvider {...methods}>
+        <form
+          style={{
+            ...data?.style,
+            containerName,
+            maxWidth: view === "web" ? undefined : "768px",
+          }}
+          onSubmit={handleSubmit(onSubmitHandler, (err) => console.error(err))}
         >
-          <SortableContext items={sections} strategy={rectSortingStrategy}>
-            {sections.map((section, i) => {
-              const css = `
-                #${section.id} {
-                  ${convertJSONToCSS(section.style)}
-                }
-                @container ${containerName} (max-width: 768px) {
+          <DndContext
+            sensors={sensors}
+            collisionDetection={closestCenter}
+            onDragStart={onDragStart}
+            onDragEnd={onDragEnd}
+          >
+            <SortableContext items={sections} strategy={rectSortingStrategy}>
+              {sections.map((section, i) => {
+                const css = `
                   #${section.id} {
-                    ${convertJSONToCSS(section.style_mobile)}
-                }
-              `;
-              return (
+                    ${convertJSONToCSS(section.style)}
+                  }
+                  @container ${containerName} (max-width: 768px) {
+                    #${section.id} {
+                      ${convertJSONToCSS(section.style_mobile)}
+                  }
+                `;
+                return (
+                  <div
+                    key={`${section.id}`}
+                    onClick={() => setSelectedSection(section)}
+                    style={{
+                      containerType: "inline-size",
+                      containerName: containerName,
+                    }}
+                    // ? Apply container properties
+                    className={twMerge(
+                      "nwcb-w-full nwcb-relative nwcb-ring-2 nwcb-transition nwcb-duration-200 nwcb-ease-in-out",
+                      selectedSection?.id === section.id
+                        ? "nwcb-ring-blue-400"
+                        : "nwcb-ring-blue-400/20 hover:nwcb-ring-blue-400"
+                    )}
+                  >
+                    <style>{css}</style>
+
+                    <SectionEditor
+                      ref={
+                        i ===
+                        sections.findIndex(
+                          (section) => section.id === selectedSection?.id
+                        )
+                          ? selectedSectionRef
+                          : undefined
+                      }
+                      key={`${section.id}`}
+                      section={section}
+                      index={i}
+                      onSectionSelect={setSelectedSection}
+                      onSwap={(section) => updateSection(i, section)}
+                      onBlockSelect={setSelectedBlock}
+                      containerName={containerName}
+                    />
+                  </div>
+                );
+              })}
+            </SortableContext>
+
+            <DragOverlay
+            // modifiers={[snapCenterToCursor]}
+            // dropAnimation={dropAnimation}
+            >
+              {activeId ? (
                 <div
-                  key={`${section.id}`}
-                  onClick={() => setSelectedSection(section)}
-                  style={{
-                    containerType: "inline-size",
-                    containerName: containerName,
-                  }}
-                  // ? Apply container properties
-                  className={twMerge(
-                    "nwcb-w-full nwcb-relative nwcb-ring-2 nwcb-transition nwcb-duration-200 nwcb-ease-in-out",
-                    selectedSection?.id === section.id
-                      ? "nwcb-ring-blue-400"
-                      : "nwcb-ring-blue-400/20 hover:nwcb-ring-blue-400"
-                  )}
+                  style={{ opacity: 0.4 }}
+                  className="nwcb-ring-2 nwcb-ring-blue-400 nwcb-w-full"
                 >
-                  <style>{css}</style>
-
                   <SectionEditor
-                    ref={
-                      i ===
-                      sections.findIndex(
-                        (section) => section.id === selectedSection?.id
-                      )
-                        ? selectedSectionRef
-                        : undefined
-                    }
-                    key={`${section.id}`}
-                    section={section}
-                    index={i}
-                    onSectionSelect={setSelectedSection}
-                    onSwap={(section) => updateSection(i, section)}
-                    onBlockSelect={setSelectedBlock}
+                    section={sections.find((x) => x.id === activeId) as Section}
+                    onSwap={() => {}}
+                    onSectionSelect={() => {}}
+                    onBlockSelect={() => {}}
+                    index={0}
                     containerName={containerName}
                   />
                 </div>
-              );
-            })}
-          </SortableContext>
-
-          <DragOverlay
-          // modifiers={[snapCenterToCursor]}
-          // dropAnimation={dropAnimation}
-          >
-            {activeId ? (
-              <div
-                style={{ opacity: 0.4 }}
-                className="nwcb-ring-2 nwcb-ring-blue-400 nwcb-w-full"
-              >
-                <SectionEditor
-                  section={sections.find((x) => x.id === activeId) as Section}
-                  onSwap={() => {}}
-                  onSectionSelect={() => {}}
-                  onBlockSelect={() => {}}
-                  index={0}
-                  containerName={containerName}
-                />
-              </div>
-            ) : null}
-          </DragOverlay>
-        </DndContext>
-      </form>
-
-      {children?.({
-        data: watch(),
-        selectedSection,
-        selectedBlock,
-        updateSelectedSection: updateSectionHandler,
-        updateSelectedBlock: updateBlockHandler,
-        addBlock: addBlockHandler,
-      })}
-    </FormProvider>
+              ) : null}
+            </DragOverlay>
+          </DndContext>
+        </form>
+
+        {children}
+      </FormProvider>
+    </EditorContext.Provider>
   );
 };
 

diff --git a/packages/ui/src/components/editor/EditorProvider.tsx b/packages/ui/src/components/editor/EditorProvider.tsx
diff --git a/packages/ui/src/components/editor/plugins/settings/SettingsButton.tsx b/packages/ui/src/components/editor/plugins/settings/SettingsButton.tsx
@@ -1,8 +1,9 @@
-import { EditorContextProps } from "@/types";
 import { useState } from "react";
+import { useEditorContext } from "../../Editor";
 import Settings from "./Settings";
 
-const SettingsButton = (props: EditorContextProps) => {
+const SettingsButton = () => {
+  const ctx = useEditorContext();
   const [toggle, setToggle] = useState<boolean>(false);
   return (
     <>
@@ -18,7 +19,7 @@ const SettingsButton = (props: EditorContextProps) => {
         <div
           className={`nwcb-fixed nwcb-end-0 nwcb-top-0 nwcb-transition nwcb-duration-150 nwcb-ease-in-out`}
         >
-          <Settings {...props} />
+          <Settings {...ctx} />
         </div>
       )}
     </>