chore: plugins to use context data instead of props

henrynoowah · Jan 11, 2025 · 9c96aa0 · 9c96aa0
1 parent d344caf
commit 9c96aa0
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 17 deletions.
diff --git a/packages/ui/src/components/editor/Editor.tsx b/packages/ui/src/components/editor/Editor.tsx
@@ -47,7 +47,11 @@ const Editor = ({ view = "web", data, onSubmit, children }: EditorProps) => {
 
   const { handleSubmit, control, setValue, watch } = methods;
 
-  const { fields: sections, update: updateSection } = useFieldArray({
+  const {
+    fields: sections,
+    update: updateSection,
+    append: addSection,
+  } = useFieldArray({
     control,
     name: `sections`,
     keyName: "keyId",
@@ -92,6 +96,10 @@ const Editor = ({ view = "web", data, onSubmit, children }: EditorProps) => {
     }
   };
 
+  const addSectionHandler = (section: Section) => {
+    addSection(section);
+  };
+
   const sensors = useSensors(
     useSensor(PointerSensor, {
       activationConstraint: { distance: 250 },
@@ -131,6 +139,7 @@ const Editor = ({ view = "web", data, onSubmit, children }: EditorProps) => {
         updateSelectedSection: updateSectionHandler,
         updateSelectedBlock: updateBlockHandler,
         addBlock: addBlockHandler,
+        addSection: addSectionHandler,
       }}
     >
       <FormProvider {...methods}>

diff --git a/packages/ui/src/components/editor/plugins/settings/Settings.tsx b/packages/ui/src/components/editor/plugins/settings/Settings.tsx
@@ -1,20 +1,22 @@
-import { Block, EditorContextProps } from "@/types";
+import { Block, EditorContextProps, Section } from "@/types";
 import { CSSProperties } from "react";
-import { Controller, FormProvider, useForm } from "react-hook-form";
+import { FormProvider, useForm } from "react-hook-form";
+import { useEditorContext } from "../../Editor";
 
 interface Params
   extends Partial<
     Pick<EditorContextProps, "selectedBlock" | "selectedSection">
   > {}
 
-const SettingsTab = ({
-  // data,
-  selectedSection,
-  updateSelectedSection,
-  selectedBlock,
-  updateSelectedBlock,
-  addBlock,
-}: EditorContextProps) => {
+const SettingsTab = () => {
+  const {
+    selectedSection,
+    selectedBlock,
+    updateSelectedSection,
+    updateSelectedBlock,
+    addBlock,
+    addSection,
+  } = useEditorContext();
   const methods = useForm<Params>({
     mode: "onSubmit",
     values: {
@@ -63,13 +65,47 @@ const SettingsTab = ({
     }
   };
 
+  const handleAddSection = () => {
+    const newSection: Section = {
+      id: "new-section",
+      style: {
+        display: "grid",
+        gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
+      },
+      blocks: [],
+    };
+    addSection?.(newSection);
+    onSubmitHandler({ selectedSection: newSection });
+  };
+
   return (
     <FormProvider {...methods}>
       <form
         onSubmit={handleSubmit(onSubmitHandler, (e) => console.error(e))}
-        className="nwcb-w-80 nwcb-h-full nwcb-bg-slate-100 nwcb-p-4 nwcb-shadow-lg"
+        className="nwcb-w-80 nwcb-h-full nwcb-bg-slate-100 nwcb-p-4 nwcb-shadow-lg nwcb-pt-20"
       >
-        <div className="nwcb-w-full nwcb-h-fit nwcb-overflow-y-scroll">
+        {/* Add new section after the selected section */}
+        <button
+          type="button"
+          onClick={handleAddSection}
+          className="nwcb-w-full nwcb-px-3 nwcb-py-2 nwcb-mb-4 nwcb-bg-blue-500 nwcb-text-white nwcb-rounded hover:nwcb-bg-blue-600"
+        >
+          Add New Section
+        </button>
+
+        {/* Add button which adds new block to a selected section */}
+        {/* Add button which adds new block to a selected section */}
+        {selectedSection && (
+          <button
+            type="button"
+            onClick={handleAddBlock}
+            className="nwcb-w-full nwcb-px-3 nwcb-py-2 nwcb-mb-4 nwcb-bg-blue-500 nwcb-text-white nwcb-rounded hover:nwcb-bg-blue-600"
+          >
+            Add New Block
+          </button>
+        )}
+
+        {/* <div className="nwcb-w-full nwcb-h-fit nwcb-overflow-y-scroll">
           <div className="nwcb-flex nwcb-flex-col nwcb-gap-4 ">
             <Controller
               control={control}
@@ -153,7 +189,7 @@ const SettingsTab = ({
             )}
           />
           <button type="submit">Submit</button>
-        </div>
+        </div> */}
       </form>
     </FormProvider>
   );

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

diff --git a/packages/ui/src/types.ts b/packages/ui/src/types.ts
@@ -8,6 +8,7 @@ interface EditorContextProps {
   updateSelectedSection?: (section: Section) => void;
   updateSelectedBlock?: (block: Block) => void;
   addBlock?: (sectionId: string, block: Block) => void;
+  addSection?: (section: Section) => void;
 }
 
 type Page = {

diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
@@ -6,6 +6,7 @@
     "noEmit": true,
     "allowImportingTsExtensions": true,
     "baseUrl": ".",
+    "lib": ["dom", "es2015", "es2016", "es2017"],
     "paths": {
       "@/*": ["src/*"]
     }