@valbuild/ui 0.13.4 → 0.17.0

package/src/components/dashboard/Tree.stories.tsx

@@ -0,0 +1,91 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Tree } from "./Tree";
+
+const meta: Meta<typeof Tree> = { component: Tree };
+
+export default meta;
+type Story = StoryObj<typeof Tree>;
+
+type Node = {
+  path: string;
+  type: "string" | "image" | "section";
+  children: Node[];
+};
+
+const nodes: Node[] = [
+  {
+    path: "Main nav",
+    type: "section",
+    children: [],
+  },
+  {
+    path: "H1",
+    type: "string",
+    children: [
+      {
+        path: "Section 3",
+        type: "string",
+        children: [],
+      },
+      {
+        path: "Section 4",
+        type: "section",
+        children: [
+          {
+            path: "Section 5",
+            type: "string",
+            children: [],
+          },
+          {
+            path: "Section 6",
+            type: "section",
+            children: [
+              {
+                path: "Section 7",
+                type: "string",
+                children: [],
+              },
+              {
+                path: "Image 1",
+                type: "image",
+                children: [],
+              },
+              {
+                path: "Image 2",
+                type: "image",
+                children: [],
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+];
+
+const renderNodes = (node: Node) => (
+  <Tree.Node path={node.path} type={node.type}>
+    {node.children.map(renderNodes)}
+  </Tree.Node>
+);
+
+export const Default: Story = {
+  render: () => (
+    <Tree rootPath="root">
+      <Tree.Node path="Main nav" type="section" />
+      <Tree.Node path="H1" type="string">
+        <Tree.Node path="Section 3" type="string" />
+        <Tree.Node path="Section 4" type="section">
+          <Tree.Node path="Section 5" type="string" />
+          <Tree.Node path="Section 6" type="section">
+            <Tree.Node path="Section 7" type="string" />
+          </Tree.Node>
+        </Tree.Node>
+      </Tree.Node>
+    </Tree>
+  ),
+};
+
+export const TestData: Story = {
+  render: () => <Tree rootPath="root">{nodes.map(renderNodes)}</Tree>,
+};

package/src/components/dashboard/Tree.tsx

@@ -0,0 +1,72 @@
+import { Children, cloneElement } from "react";
+import ImageIcon from "../../assets/icons/ImageIcon";
+import Section from "../../assets/icons/Section";
+import TextIcon from "../../assets/icons/TextIcon";
+
+type TreeProps = {
+  children: React.ReactNode | React.ReactNode[];
+  rootPath?: string;
+};
+export function Tree({ children, rootPath }: TreeProps): React.ReactElement {
+  return (
+    <div className="flex flex-col bg-warm-black text-white font-sans text-xs w-full py-2">
+      {Children.map(children, (child) => {
+        return cloneElement(child as React.ReactElement, {
+          paths: [rootPath],
+        });
+      })}
+    </div>
+  );
+}
+type TreeNodeProps = {
+  children?: React.ReactNode | React.ReactNode[];
+  path: string;
+  paths?: string[];
+  level?: number;
+  type: "string" | "image" | "section";
+  setActivePath?: (path: string) => void;
+};
+Tree.Node = ({
+  children,
+  paths = [],
+  path,
+  level = 1,
+  type,
+  setActivePath,
+}: TreeNodeProps): React.ReactElement => {
+  const paddingLeft = level * 30;
+  const logo =
+    type === "string" ? (
+      <TextIcon />
+    ) : type === "image" ? (
+      <ImageIcon className="h-[9px] w-[9px]" />
+    ) : (
+      <Section />
+    );
+  return (
+    <div className="w-full">
+      <button
+        className="flex justify-between w-full text-white hover:bg-dark-gray group py-2 hover:text-warm-black text-xs font-[400] shrink-0"
+        onClick={() => {
+          setActivePath && setActivePath(path);
+        }}
+        style={{ paddingLeft: paddingLeft }}
+      >
+        <div className="flex items-center justify-center gap-2">
+          {logo}
+          <p>{path}</p>
+        </div>
+      </button>
+      {children && (
+        <>
+          {Children.map(children, (child) => {
+            return cloneElement(child as React.ReactElement, {
+              level: level + 1,
+              paths: [...paths, path],
+            });
+          })}
+        </>
+      )}
+    </div>
+  );
+};

package/src/components/dashboard/ValDashboard.tsx

@@ -0,0 +1,148 @@
+import { SerializedModule } from "@valbuild/core";
+import { Json } from "@valbuild/core/src/Json";
+import { ValApi } from "@valbuild/core";
+import { FC, useEffect, useState } from "react";
+import { Dropdown } from "./Dropdown";
+import { FormGroup } from "./FormGroup";
+import { Grid } from "./Grid";
+import { Tree } from "./Tree";
+
+interface ValDashboardProps {
+  showDashboard: boolean;
+  editMode: boolean;
+  valApi: ValApi;
+}
+export const ValDashboard: FC<ValDashboardProps> = ({
+  showDashboard,
+  editMode,
+}) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [modules, setModules] = useState<SerializedModule[]>([]);
+  const [selectedPath, setSelectedPath] = useState<string>("");
+  const [selectedModule, setSelectedModule] = useState<
+    | {
+        [key: string]: {
+          path: string;
+          type: string;
+        };
+      }[]
+    | undefined
+  >();
+
+  useEffect(() => {
+    // valApi.getModules({ patch: true, includeSource: true }).then((modules) => {
+    //   // TODO:
+    // });
+  }, []);
+
+  useEffect(() => {
+    const newModule = modules.find((module) => module.path === selectedPath);
+    if (newModule) {
+      const children = mapChildren(newModule);
+      console.log("children", children);
+      setSelectedModule(children);
+    }
+  }, [selectedPath]);
+
+  const mapChildren = (module: SerializedModule) => {
+    if (module) {
+      if (module.schema.type === "array") {
+        return (module.source as Json[]).map((child) => {
+          const newModule: {
+            [key: string]: {
+              path: string;
+              type: string;
+            };
+          } = {};
+          if (child) {
+            for (const key of Object.keys(child)) {
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              const type = (module.schema as any).item.items[key]
+                .type as string;
+              if (key !== "rank" && type !== "richtext") {
+                newModule[key] = {
+                  path: key,
+                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                  type: (module.schema as any).item.items[key].type as string,
+                };
+              }
+            }
+          }
+          return newModule;
+        });
+      } else {
+        const child = module.source as Json;
+        const newModule: {
+          [key: string]: {
+            path: string;
+            type: string;
+          };
+        } = {};
+        if (child) {
+          for (const key of Object.keys(child)) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const type = (module.schema as any).items[key].type as string;
+            if (key !== "rank" && type !== "richtext") {
+              newModule[key] = {
+                path: key,
+                type: type,
+              };
+            }
+          }
+        }
+        return [newModule];
+      }
+    }
+  };
+
+  return (
+    <>
+      {showDashboard && editMode && (
+        <div className="bg-base w-screen fixed z-10 top-[68.54px] text-white overflow-hidden">
+          <Grid>
+            {modules && (
+              <Dropdown
+                options={modules.map((module) => module.path)}
+                onClick={(path) => setSelectedPath(path)}
+              />
+            )}
+            {selectedModule && (
+              <Tree>
+                {selectedModule.map((child, idx) => {
+                  return (
+                    <Tree.Node
+                      key={idx}
+                      path={`Section ${idx + 1}`}
+                      type="section"
+                    >
+                      {Object.values(child).map((value, idx2) => (
+                        <Tree.Node
+                          key={idx2}
+                          path={value.path}
+                          type={value.type as "string" | "image" | "section"}
+                        />
+                      ))}
+                    </Tree.Node>
+                  );
+                })}
+              </Tree>
+            )}
+            <div className="flex items-center justify-between w-full h-full px-3 font-serif text-xs text-white">
+              <p>Content</p>
+              <button className="flex justify-between flex-shrink-0 gap-1">
+                <span className="w-fit">+</span>
+                <span className="w-fit">Add item</span>
+              </button>
+            </div>
+            <FormGroup>
+              <div>test</div>
+              <div>test</div>
+              <div>test</div>
+            </FormGroup>
+            <div>content</div>
+          </Grid>
+        </div>
+      )}
+    </>
+  );
+};

package/src/components/dashboard/ValDashboardEditor.tsx

@@ -0,0 +1,269 @@
+import { SerializedModule } from "@valbuild/core";
+import { ValApi } from "@valbuild/core";
+import { LexicalEditor } from "lexical";
+import { FC, useEffect, useState } from "react";
+import { Inputs, RichTextEditor } from "../../exports";
+import Button from "../Button";
+import { ImageForm } from "../forms/ImageForm";
+import { TextArea } from "../forms/TextArea";
+
+interface ValDashboardEditorProps {
+  selectedPath: string;
+  valApi: ValApi;
+}
+
+export const ValDashboardEditor: FC<ValDashboardEditorProps> = ({
+  selectedPath,
+}) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [selectedModule, setSelectedModule] = useState<SerializedModule>();
+  const [inputs, setInputs] = useState<Inputs>({});
+  const [inputIsDirty, setInputIsDirty] = useState<{ [path: string]: boolean }>(
+    {}
+  );
+  const [richTextEditor, setRichTextEditor] = useState<{
+    [path: string]: LexicalEditor;
+  }>();
+
+  useEffect(() => {
+    // if (selectedPath) {
+    //   valApi.getModule(selectedPath).then((module) => {
+    //     setSelectedModule(module);
+    //   });
+    // }
+  }, [selectedPath]);
+
+  useEffect(() => {
+    // if (selectedModule && selectedModule?.source) {
+    //   setInputs({});
+    //   for (const key of Object.keys(selectedModule?.source)) {
+    //     if (key !== "rank") {
+    //     valApi
+    //       .getModule(`${selectedModule.path}.${key}`)
+    //       .then((serializedModule) => {
+    //         let input: Inputs[string] | undefined;
+    //         if (
+    //           serializedModule.schema.type === "string" &&
+    //           typeof serializedModule.source === "string"
+    //         ) {
+    //           input = {
+    //             status: "completed",
+    //             type: "text",
+    //             data: serializedModule.source,
+    //           };
+    //         } else if (
+    //           serializedModule.schema.type === "richtext" &&
+    //           typeof serializedModule.source === "object"
+    //         ) {
+    //           input = {
+    //             status: "completed",
+    //             type: "richtext",
+    //             data: serializedModule.source as RichText, // TODO: validate
+    //           };
+    //         } else if (
+    //           serializedModule.schema.type === "image" &&
+    //           serializedModule.source &&
+    //           typeof serializedModule.source === "object" &&
+    //           FILE_REF_PROP in serializedModule.source &&
+    //           typeof serializedModule.source[FILE_REF_PROP] === "string" &&
+    //           VAL_EXTENSION in serializedModule.source &&
+    //           typeof serializedModule.source[VAL_EXTENSION] === "string"
+    //         ) {
+    //           input = {
+    //             status: "completed",
+    //             type: "image",
+    //             data: Internal.convertImageSource(
+    //               serializedModule.source as FileSource<ImageMetadata>
+    //             ),
+    //           };
+    //         }
+    //         if (!input) {
+    //           throw new Error(
+    //             `Unsupported module type: ${serializedModule.schema.type}`
+    //           );
+    //         }
+    //         setInputs((inputs) => {
+    //           return {
+    //             ...inputs,
+    //             [serializedModule.path]: input,
+    //           } as Inputs;
+    //         });
+    //       });
+    //   }
+    // }
+    // }
+  }, [selectedModule]);
+
+  useEffect(() => {
+    for (const key of Object.keys(inputs)) {
+      if (!Object.keys(inputIsDirty).includes(key)) {
+        setInputIsDirty({
+          ...inputIsDirty,
+          [key]: false,
+        });
+      }
+    }
+  }, [inputs]);
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const patchElement = async (path: string) => {
+    // Promise.all(
+    //   Object.entries(inputs)
+    //     .filter(([k]) => k === key)
+    //     .map(([path, input]) => {
+    //       if (input.status === "completed") {
+    //         const [moduleId, modulePath] = Internal.splitModuleIdAndModulePath(
+    //           path as SourcePath
+    //         );
+    //         if (input.type === "text") {
+    //           const patch: PatchJSON = [
+    //             {
+    //               value: input.data,
+    //               op: "replace",
+    //               path: `/${modulePath
+    //                 .split(".")
+    //                 .map((p) => {
+    //                   return JSON.parse(p);
+    //                 })
+    //                 .join("/")}`,
+    //             },
+    //           ];
+    //           console.log("patch", patch);
+    //           return valApi.patchModuleContent(moduleId, patch);
+    //         } else if (input.type === "image") {
+    //           const pathParts = modulePath.split(".").map((p) => JSON.parse(p));
+    //           if (!input?.data || !("src" in input.data)) {
+    //             // TODO: We probably need to have an Output type that is different from the Input: we have a union of both cases in Input right now, and we believe we do not want that
+    //             console.warn(
+    //               "No .src on input provided - this might mean no changes was made"
+    //             );
+    //             return;
+    //           }
+    //           const patch: PatchJSON = [
+    //             {
+    //               value: input.data.src,
+    //               op: "replace",
+    //               path: `/${pathParts.slice(0, -1).join("/")}/$${
+    //                 pathParts[pathParts.length - 1]
+    //               }`,
+    //             },
+    //           ];
+    //           if (input.data.metadata) {
+    //             if (input.data.addMetadata) {
+    //               patch.push({
+    //                 value: input.data.metadata,
+    //                 op: "add",
+    //                 path: `/${pathParts.join("/")}/metadata`,
+    //               });
+    //             } else {
+    //               patch.push({
+    //                 value: input.data.metadata,
+    //                 op: "replace",
+    //                 path: `/${pathParts.join("/")}/metadata`,
+    //               });
+    //             }
+    //           }
+    //           console.log("patch", patch);
+    //           return valApi.patchModuleContent(moduleId, patch);
+    //         } else if (input.type === "richtext") {
+    //           const patch: PatchJSON = [
+    //             {
+    //               value: input.data,
+    //               op: "replace",
+    //               path: `/${modulePath
+    //                 .split(".")
+    //                 .map((p) => JSON.parse(p))
+    //                 .join("/")}`,
+    //             },
+    //           ];
+    //           return valApi.patchModuleContent(moduleId, patch);
+    //         }
+    //         // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    //         throw new Error(`Unsupported input type: ${(input as any).type}`);
+    //       } else {
+    //         console.error("Submitted incomplete input, ignoring...");
+    //         return Promise.resolve();
+    //       }
+    //     })
+    // ).then((res) => {
+    //   console.log("patched", res);
+    // });
+  };
+
+  return (
+    <div className="flex flex-col items-start px-4">
+      {selectedModule ? (
+        <div className="flex flex-col items-start w-full py-3 gap-[36px] font-normal">
+          {Object.entries(inputs).map(([path, input]) => {
+            return (
+              <div key={path} className={"flex flex-col justify-start "}>
+                {input.status === "requested" && (
+                  <div className="p-2 text-center text-primary">Loading...</div>
+                )}
+                <div className="flex flex-col gap-1 font-[550]">
+                  <p>{path.split(".").slice(-1)[0].split('"').join("")}</p>
+                  {input.status === "completed" && input.type === "image" && (
+                    <ImageForm
+                      name={path}
+                      data={input.data}
+                      onChange={(data) => {
+                        if (data.value) {
+                          setInputs({
+                            ...inputs,
+                            [path]: {
+                              status: "completed",
+                              type: "image",
+                              data: data.value,
+                            },
+                          });
+                          setInputIsDirty({ ...inputIsDirty, [path]: true });
+                        }
+                      }}
+                      error={null}
+                    />
+                  )}
+                  {input.status === "completed" && input.type === "text" && (
+                    <TextArea
+                      name={path}
+                      text={input.data}
+                      onChange={(data) => {
+                        setInputs({
+                          ...inputs,
+                          [path]: {
+                            status: "completed",
+                            type: "text",
+                            data: data,
+                          },
+                        });
+                        setInputIsDirty({ ...inputIsDirty, [path]: true });
+                      }}
+                    />
+                  )}
+                  {input.status === "completed" &&
+                    input.type === "richtext" && (
+                      <RichTextEditor
+                        richtext={input.data}
+                        onEditor={(editor) => {
+                          setRichTextEditor({
+                            ...richTextEditor,
+                            [path]: editor,
+                          });
+                        }}
+                      />
+                    )}
+                  {inputIsDirty[path] && (
+                    <Button onClick={() => patchElement(path)}>
+                      Save changes
+                    </Button>
+                  )}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      ) : (
+        <h1 className="px-4 py-3">No module selected</h1>
+      )}
+    </div>
+  );
+};