@valbuild/ui 0.15.0 → 0.17.0

package/src/components/dashboard/ValDashboardGrid.tsx

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

package/src/components/dashboard/ValTreeNavigator.tsx

@@ -0,0 +1,253 @@
+import { Internal, SerializedModule, SourcePath } from "@valbuild/core";
+import { Json, JsonArray } from "@valbuild/core/src/Json";
+import { ValApi } from "@valbuild/core";
+import classNames from "classnames";
+import { Dispatch, FC, SetStateAction, useState } from "react";
+import Chevron from "../../assets/icons/Chevron";
+import { DraggableList, DraggableResult } from "../DraggableList";
+
+const ValTreeArrayModuleItem: FC<{
+  submodule: Json;
+  selectedModule: string;
+  setSelectedModule: Dispatch<SetStateAction<string>>;
+  idx: number;
+  path: string;
+  reOrder: (oldIdx: number, newIdx: number) => void;
+  reorderMode: boolean;
+}> = ({
+  submodule,
+  selectedModule,
+  setSelectedModule,
+  idx,
+  path,
+  reOrder,
+  reorderMode,
+}) => {
+  const title = resolveTitle(submodule);
+  return (
+    <div className="w-fit" draggable id={idx.toString()}>
+      <div className="flex gap-4">
+        <button
+          onClick={() => setSelectedModule(path + idx.toString())}
+          className={classNames(
+            "px-4 py-2 text-start hover:bg-light-gray/20 hover:rounded-lg",
+            {
+              "font-extrabold ":
+                module.path + idx.toString() === selectedModule,
+            }
+          )}
+        >
+          {title}
+        </button>
+        {reorderMode && (
+          <div className="flex gap-2">
+            <button
+              onClick={() => reOrder(idx, idx + 1)}
+              className="disabled:text-dark-gray"
+            >
+              <Chevron className="rotate-90" />
+            </button>
+            <button
+              onClick={() => reOrder(idx, idx - 1)}
+              className="disabled:text-dark-gray"
+            >
+              <Chevron className="-rotate-90" />
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+const DEFAULT_TITLE = "Untitled";
+function resolveTitle(submodule: Json): string {
+  if (!submodule) {
+    return DEFAULT_TITLE;
+  }
+  if (typeof submodule === "string") {
+    return submodule;
+  }
+  if (typeof submodule === "object") {
+    if ("title" in submodule && typeof submodule.title === "string") {
+      return submodule.title;
+    }
+    if ("name" in submodule && typeof submodule.name === "string") {
+      return submodule.name;
+    }
+    const firstStringField = Object.entries(submodule).find(([, value]) => {
+      return typeof value === "string";
+    })?.[1];
+    if (typeof firstStringField === "string") {
+      return firstStringField;
+    }
+  }
+  return DEFAULT_TITLE;
+}
+
+const ValTreeNavigatorArrayModule: FC<{
+  module: SerializedModule;
+  selectedModule: string;
+  setSelectedModule: Dispatch<SetStateAction<string>>;
+  valApi: ValApi;
+}> = ({ module, selectedModule, setSelectedModule }) => {
+  const [collapsed, setCollapsed] = useState(true);
+  const [items, setItems] = useState<Json[]>(
+    (module.source as JsonArray).map((submodule) => submodule as Json)
+  );
+  const [reOrderMode, setReOrderMode] = useState(false);
+
+  const reOrder = async (oldIndex: number, newIndex: number) => {
+    const sanitizedNewIndex =
+      newIndex < 0 ? items.length - 1 : newIndex % items.length;
+    const path = module.path + oldIndex.toString();
+    const newPath = module.path + sanitizedNewIndex.toString();
+    // const [moduleId, modulePath] = Internal.splitModuleIdAndModulePath(
+    //   path as SourcePath
+    // );
+
+    const [newModuleId, newModulePath] = Internal.splitModuleIdAndModulePath(
+      newPath as SourcePath
+    );
+    // const patch: PatchJSON = [
+    //   {
+    //     op: "move",
+    //     from: `/${modulePath
+    //       .split(".")
+    //       .map((p) => {
+    //         return JSON.parse(p);
+    //       })
+    //       .join("/")}`,
+    //     path: `/${newModulePath
+    //       .split(".")
+    //       .map((p) => {
+    //         return JSON.parse(p);
+    //       })
+    //       .join("/")}`,
+    //   },
+    // ];
+    // await valApi.patchModuleContent(moduleId, patch);
+    if (selectedModule === path) {
+      setSelectedModule(`${newModuleId}.${newModulePath}`);
+    }
+    setItems((items) => {
+      const newItems = [...items];
+      const item = newItems.splice(oldIndex, 1)[0];
+      newItems.splice(sanitizedNewIndex, 0, item);
+      return newItems;
+    });
+  };
+
+  const toggleReorderMode = () => {
+    setReOrderMode(!reOrderMode);
+    if (collapsed) setCollapsed(false);
+  };
+
+  return (
+    <div className="relative flex flex-col gap-3">
+      <div className="flex items-center justify-between ">
+        <button
+          className="flex items-center justify-between px-4 py-2 hover:bg-light-gray/20 hover:rounded-lg "
+          onClick={() => {
+            setSelectedModule(`${module.path.toString()}`);
+            setCollapsed(!collapsed);
+          }}
+        >
+          <div className="flex items-center gap-2">
+            <Chevron className={classNames({ "rotate-90": !collapsed })} />
+            <h1 className="text-xl">{module.path}</h1>
+          </div>
+        </button>
+        <div className="flex gap-2">
+          <button
+            className="relative w-[20px] h-[20px] flex flex-col justify-between items-center"
+            onClick={toggleReorderMode}
+          >
+            <Chevron className="top-0 -rotate-90" />
+            <Chevron className="rotate-90 " />
+          </button>
+          <button className="text-2xl w-[20px] h-[20px] rounded-full flex justify-center items-center">
+            +
+          </button>
+        </div>
+      </div>
+
+      {!collapsed && (
+        <DraggableList
+          onDragEnd={(res: DraggableResult) => reOrder(res.from, res.to)}
+        >
+          {items.map((submodule, idx) => (
+            <ValTreeArrayModuleItem
+              submodule={submodule}
+              idx={idx}
+              selectedModule={selectedModule}
+              setSelectedModule={setSelectedModule}
+              path={module.path}
+              key={idx}
+              reOrder={reOrder}
+              reorderMode={reOrderMode}
+            />
+          ))}
+        </DraggableList>
+      )}
+    </div>
+  );
+};
+
+const ValTreeNavigatorModule: FC<{
+  module: SerializedModule;
+  setSelectedModule: Dispatch<SetStateAction<string>>;
+}> = ({ module, setSelectedModule }) => {
+  return (
+    <div className="relative flex flex-col gap-3 px-4 py-2 hover:bg-light-gray/20 hover:rounded-lg ">
+      <button
+        className="flex items-center justify-between"
+        onClick={() => setSelectedModule(module.path)}
+      >
+        <div className="flex items-center gap-2">
+          <Chevron className={classNames("opacity-0")} />
+          <h1 className="text-xl">{module.path}</h1>
+        </div>
+      </button>
+    </div>
+  );
+};
+
+interface ValTreeNavigator {
+  modules: SerializedModule[];
+  selectedModule: string;
+  setSelectedModule: Dispatch<SetStateAction<string>>;
+  valApi: ValApi;
+}
+export const ValTreeNavigator: FC<ValTreeNavigator> = ({
+  modules,
+  selectedModule,
+  setSelectedModule,
+  valApi,
+}) => {
+  console.log("hello?????????????", modules);
+  return (
+    <div
+      className={classNames("flex flex-col gap-4 font-serif text-lg px-4 py-3")}
+    >
+      {modules.map((module, idx) => (
+        <div key={idx}>
+          {module.schema.type === "array" ? (
+            <ValTreeNavigatorArrayModule
+              module={module}
+              key={idx}
+              selectedModule={selectedModule}
+              setSelectedModule={setSelectedModule}
+              valApi={valApi}
+            />
+          ) : (
+            <ValTreeNavigatorModule
+              module={module}
+              setSelectedModule={setSelectedModule}
+            />
+          )}
+        </div>
+      ))}
+    </div>
+  );
+};

package/src/components/forms/Form.tsx

@@ -4,7 +4,7 @@ import { useEffect, useState } from "react";
 import { RichTextEditor } from "../RichTextEditor/RichTextEditor";
 import { FormContainer } from "./FormContainer";
 import { ImageForm, ImageData } from "./ImageForm";
-import { TextData, TextForm } from "./TextForm";
+import { TextData, TextArea } from "./TextArea";
 
 export type Inputs = {
   [path: string]:
@@ -89,7 +89,7 @@ export function Form({ onSubmit, inputs }: FormProps): React.ReactElement {
               />
             )}
             {input.status === "completed" && input.type === "text" && (
-              <TextForm
+              <TextArea
                 name={path}
                 text={input.data}
                 onChange={(data) => {

package/src/components/forms/{TextForm.tsx → TextArea.tsx}

@@ -2,18 +2,20 @@ export type TextData = string;
 export type TextInputProps = {
   name: string;
   text: TextData;
+  disabled?: boolean;
   onChange: (value: string) => void;
 };
 
-export function TextForm({ name, text, onChange }: TextInputProps) {
+export function TextArea({ name, disabled, text, onChange }: TextInputProps) {
   return (
     <div
-      className="w-full py-2 grow-wrap"
+      className="w-full h-full py-2 overflow-y-scroll grow-wrap"
       data-replicated-value={text} /* see grow-wrap */
     >
       <textarea
+        disabled={disabled}
         name={name}
-        className="w-full p-2 border outline-none bg-fill text-primary border-border focus-visible:border-highlight"
+        className="p-2 border outline-none resize-none bg-fill text-primary border-border focus-visible:border-highlight"
         defaultValue={text}
         onChange={(e) => onChange(e.target.value)}
       />

package/src/dto/SerializedSchema.ts

@@ -0,0 +1,69 @@
+export default {};
+// TODO:
+// import type { SerializedSchema as SerializedSchemaT } from "@valbuild/core";
+// import { z } from "zod";
+//
+// export const SerializedSchema: z.ZodType<SerializedSchemaT> = z.lazy(() => {
+//   const SerializedStringSchema = z.object({
+//     _type: z.literal("string"),
+//     opt: z.boolean(),
+//   });
+//   const SerializedBooleanSchema = z.object({
+//     _type: z.literal("boolean"),
+//     opt: z.boolean(),
+//   });
+//   const SerializedNumberSchema = z.object({
+//     _type: z.literal("number"),
+//     opt: z.boolean(),
+//   });
+//   const SerializedLiteralSchema = z.object({
+//     _type: z.literal("literal"),
+//     value: z.string(),
+//     opt: z.boolean(),
+//   });
+//   const SerializedObjectSchema = z.object({
+//     _type: z.literal("object"),
+//     opt: z.boolean(),
+//     items: z.record(SerializedSchema),
+//   });
+//   const SerializedOneOfSchema = z.object({
+//     _type: z.literal("oneOf"),
+//     opt: z.boolean(),
+//   });
+//   const SerializedArraySchema = z.object({
+//     _type: z.literal("array"),
+//     item: SerializedSchema,
+//     opt: z.boolean(),
+//   });
+//   const SerializedUnionSchema = z.object({
+//     _type: z.literal("union"),
+//     opt: z.boolean(),
+//   });
+//   const SerializedRichTextSchema = z.object({
+//     _type: z.literal("richtext"),
+//     opt: z.boolean(),
+//   });
+//   const SerializedImageSchema = z.object({
+//     _type: z.literal("image"),
+//     opt: z.boolean(),
+//   });
+//   const SerializedI18nSchema = z.object({
+//     _type: z.literal("i18n"),
+//     locales: z.array(z.string()),
+//     item: SerializedSchema,
+//     opt: z.boolean(),
+//   });
+//   return z.union([
+//     SerializedStringSchema,
+//     SerializedLiteralSchema,
+//     SerializedBooleanSchema,
+//     SerializedNumberSchema,
+//     SerializedObjectSchema,
+//     SerializedOneOfSchema,
+//     SerializedArraySchema,
+//     SerializedUnionSchema,
+//     SerializedRichTextSchema,
+//     SerializedImageSchema,
+//     SerializedI18nSchema,
+//   ]);
+// });

package/src/dto/Session.ts

@@ -0,0 +1,12 @@
+import { z } from "zod";
+import { SessionMode } from "./SessionMode";
+
+export const Session = z.object({
+  id: z.string(),
+  mode: SessionMode,
+  full_name: z.string().nullable(),
+  username: z.string().nullable(),
+  avatar_url: z.string().url().nullable(),
+});
+
+export type Session = z.infer<typeof Session>;

package/src/dto/SessionMode.ts

@@ -0,0 +1,5 @@
+import { z } from "zod";
+
+export const SessionMode = z.union([z.literal("local"), z.literal("proxy")]);
+
+export type SessionMode = z.infer<typeof SessionMode>;

package/src/dto/Tree.ts

@@ -0,0 +1,18 @@
+import { z } from "zod";
+
+export const Tree = z.object({
+  git: z.object({
+    commit: z.string(),
+    branch: z.string(),
+  }),
+  modules: z.record(
+    z.object({
+      // TODO: types!
+      schema: z.any().optional(),
+      source: z.any().optional(),
+      // TODO: patches
+    })
+  ),
+});
+
+export type Tree = z.infer<typeof Tree>;

package/src/exports.ts

@@ -1,3 +1,4 @@
 export { RichTextEditor } from "./components/RichTextEditor/RichTextEditor";
 export { ValOverlay } from "./components/ValOverlay";
 export { type Inputs } from "./components/forms/Form";
+export { ValDashboard } from "./components/dashboard/ValDashboard";

package/src/utils/Remote.ts

@@ -0,0 +1,15 @@
+export type Remote<T> =
+  | {
+      status: "not-asked";
+    }
+  | {
+      status: "loading";
+    }
+  | {
+      status: "success";
+      data: T;
+    }
+  | {
+      status: "error";
+      error: string;
+    };

package/src/utils/resolvePath.ts

@@ -0,0 +1,33 @@
+import {
+  ApiTreeResponse,
+  Internal,
+  Json,
+  SerializedSchema,
+  SourcePath,
+} from "@valbuild/core";
+import { result } from "@valbuild/core/fp";
+
+export type Modules = ApiTreeResponse["modules"];
+
+export function resolvePath(sourcePath: SourcePath, modules: Modules) {
+  const [moduleId, modulePath] =
+    Internal.splitModuleIdAndModulePath(sourcePath);
+  const valModule = modules[moduleId];
+  console.log("resolvePath", sourcePath, moduleId, modulePath, modules);
+  if (!valModule?.source) {
+    return result.err({
+      message: `Module "${moduleId}" has no source`,
+    });
+  }
+  if (!valModule?.schema) {
+    return result.err({
+      message: `Module "${moduleId}" has no schema`,
+    });
+  }
+  return result.ok(
+    Internal.resolvePath(modulePath, valModule.source, valModule.schema) as {
+      source: Json;
+      schema: SerializedSchema;
+    }
+  );
+}

package/tailwind.config.js

@@ -3,6 +3,12 @@ module.exports = {
   content: [__dirname + "/src/**/*.{js,ts,jsx,tsx}"],
   darkMode: ["class", '[data-mode="dark"]'],
   theme: {
+    zIndex: {
+      overlay: 8999, // 1 less than the NextJS error z-index: 9000
+      hover: 8996,
+      window: 8997,
+      full: 8998,
+    },
     colors: {
       base: "var(--val-theme-base)",
       highlight: "var(--val-theme-highlight)",
@@ -42,11 +48,24 @@ module.exports = {
         "0%": { transform: "rotate(0deg)" },
         "100%": { transform: "rotate(-45deg)" },
       },
+      spin: {
+        "0%": { transform: "rotate(0deg)" },
+        "100%": { transform: "rotate(360deg)" },
+      },
     },
     animation: {
       rotateLeft: "rotateLeft 200ms ease-in-out",
       rotateRight: "rotateRight 200ms ease-in-out",
+      spin: "spin 1s linear infinite",
+    },
+    transitionProperty: {
+      opacity: ["opacity"],
     },
   },
-  plugins: [],
+  plugins: [
+    function ({ addVariant }) {
+      addVariant("all-but-last-child", "& > *:not(:last-child)");
+      addVariant("children", "& *");
+    },
+  ],
 };