@valbuild/ui 0.26.0 → 0.27.0

package/src/components/dashboard/Grid2.tsx

@@ -1,72 +0,0 @@
-import classNames from "classnames";
-import { Children, cloneElement, useRef } from "react";
-
-interface GridProps {
-  children: React.ReactNode | React.ReactNode[];
-}
-export function Grid({ children }: GridProps): React.ReactElement {
-  const leftColHeaderRef = useRef<HTMLDivElement>(null);
-  const leftColBodyRef = useRef<HTMLDivElement>(null);
-  const rightColHeaderRef = useRef<HTMLDivElement>(null);
-  const rightColBodyRef = useRef<HTMLDivElement>(null);
-
-  const [headerRow, bodyRow] = Children.toArray(children);
-
-  return (
-    <div className="flex flex-col w-full h-screen bg-warm-black overflow-clip">
-      {cloneElement(headerRow as React.ReactElement, {
-        leftColRef: leftColHeaderRef,
-        rightColRef: rightColHeaderRef,
-      })}
-      {cloneElement(bodyRow as React.ReactElement, {
-        leftColRef: leftColBodyRef,
-        rightColRef: rightColBodyRef,
-      })}
-    </div>
-  );
-}
-
-type GridRowProps = {
-  children: React.ReactNode | React.ReactNode[];
-  leftColRef?: React.RefObject<HTMLDivElement>;
-  rightColRef?: React.RefObject<HTMLDivElement>;
-  fill?: boolean;
-};
-
-Grid.Row = ({
-  children,
-  leftColRef,
-  rightColRef,
-  fill: bottomRow = false,
-}: GridRowProps): React.ReactElement => {
-  const [leftCol, middleCol, rightCol] = Children.toArray(children);
-  //implement mouseover event to share hover-event between rows
-  console;
-  return (
-    <div
-      className={classNames("flex w-full py-2 border-b border-dark-gray", {
-        "h-full": bottomRow,
-      })}
-    >
-      <div className="relative" style={{ width: "300px" }} ref={leftColRef}>
-        {leftCol}
-        {bottomRow && (
-          <div
-            className="absolute inset-y-0 right-0 cursor-col-resize w-[1px] bg-dark-gray hover:w-[2px] hover:bg-light-gray -my-[100px]"
-            //   onMouseDown={handleMouseDown("left")}
-          ></div>
-        )}
-      </div>
-      <div className="flex-auto">{middleCol}</div>
-      <div className="relative" style={{ width: "300px" }} ref={rightColRef}>
-        {rightCol}
-        {bottomRow && (
-          <div
-            //   onMouseDown={handleMouseDown("right")}
-            className="absolute inset-y-0 left-0 cursor-col-resize w-[1px]  bg-dark-gray hover:w-[2px] hover:bg-light-gray -my-2"
-          ></div>
-        )}
-      </div>
-    </div>
-  );
-};

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

@@ -1,91 +0,0 @@
-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

@@ -1,72 +0,0 @@
-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 w-full py-2 text-xs">
-      {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 group py-2 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/ValDashboardEditor.tsx

@@ -1,269 +0,0 @@
-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>
-  );
-};

package/src/components/dashboard/ValDashboardGrid.tsx

@@ -1,142 +0,0 @@
-import { SerializedModule } from "@valbuild/core";
-import { ValApi } from "@valbuild/core";
-import classNames from "classnames";
-import React, { useState, FC, ReactNode, useEffect } from "react";
-import { ValDashboardEditor } from "./ValDashboardEditor";
-import { ValTreeNavigator } from "./ValTreeNavigator";
-
-interface PanelProps {
-  header?: ReactNode;
-  width?: number;
-  onResize?: (width: number) => void;
-  collapsible?: boolean;
-  collapsed?: boolean;
-  onCollapse?: () => void;
-  children: ReactNode;
-}
-
-const Panel: FC<PanelProps> = ({
-  header,
-  width,
-  onResize,
-  collapsible,
-  collapsed,
-  onCollapse,
-  children,
-}) => {
-  const handleMouseDown = (e: React.MouseEvent) => {
-    if (!onResize) return;
-
-    e.preventDefault();
-    const initialX = e.clientX;
-    const initialWidth = width || 0;
-
-    const handleMouseMove = (moveEvent: MouseEvent) => {
-      const newWidth = initialWidth + moveEvent.clientX - initialX;
-      onResize(newWidth);
-    };
-
-    const handleMouseUp = () => {
-      window.removeEventListener("mousemove", handleMouseMove);
-      window.removeEventListener("mouseup", handleMouseUp);
-    };
-
-    window.addEventListener("mousemove", handleMouseMove);
-    window.addEventListener("mouseup", handleMouseUp);
-  };
-  return (
-    <>
-      {!collapsed ? (
-        <div
-          className={classNames(
-            "relative border border-dark-gray min-w-0 h-full overflow-auto",
-            {
-              "flex-grow": !width,
-            }
-          )}
-          style={width ? { width: `${width}px` } : {}}
-        >
-          {onResize && (
-            <div
-              className="absolute inset-y-0 right-0 cursor-col-resize w-[1px] bg-dark-gray hover:w-[2px] hover:bg-light-gray"
-              onMouseDown={handleMouseDown}
-            />
-          )}
-          <div className="bg-gray-300 border border-dark-gray flex justify-between items-center h-[75px] w-full font-serif px-4">
-            {header}
-            {collapsible && (
-              <button
-                onClick={onCollapse}
-                className="px-2 py-1 font-bold text-white bg-red-500 rounded hover:bg-red-700"
-              >
-                {collapsed ? "Expand" : "Collapse"}
-              </button>
-            )}
-          </div>
-          <div>{children}</div>
-        </div>
-      ) : (
-        <button
-          onClick={onCollapse}
-          className="absolute inset-y-0 right-[16px] w-fit  flex items-center justify-end"
-        >
-          open panel again
-        </button>
-      )}
-    </>
-  );
-};
-
-interface ValDashboardGridProps {
-  valApi: ValApi;
-  editMode: boolean;
-}
-
-export const ValDashboardGrid: FC<ValDashboardGridProps> = ({
-  valApi,
-  editMode,
-}) => {
-  const [widths, setWidths] = useState([300, (2 * window.innerWidth) / 3]);
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [modules, setModules] = useState<SerializedModule[]>([]);
-  const [selectedPath, setSelectedPath] = useState<string>("");
-  useEffect(() => {
-    // valApi.getTree({}).then((modules) => {
-    //   setModules(modules);
-    // });
-  }, [editMode]);
-
-  const handleResize = (index: number) => (width: number) => {
-    setWidths((prevWidths) => {
-      const newWidths = [...prevWidths];
-      newWidths[index] = Math.max(width, 300);
-      return newWidths;
-    });
-  };
-
-  return (
-    <div className="flex justify-start h-screen">
-      <Panel width={widths[0]} onResize={handleResize(0)}>
-        <ValTreeNavigator
-          modules={modules}
-          selectedModule={selectedPath}
-          setSelectedModule={setSelectedPath}
-          valApi={valApi}
-        />
-      </Panel>
-      <Panel
-        header={
-          selectedPath && (
-            <div className="w-full max-w-[1000px] bg-dark-gray px-4 py-2 rounded-lg">
-              {selectedPath}
-            </div>
-          )
-        }
-        width={widths[1]}
-        onResize={handleResize(1)}
-      >
-        <ValDashboardEditor selectedPath={selectedPath} valApi={valApi} />
-      </Panel>
-    </div>
-  );
-};