@valbuild/ui 0.21.2 → 0.22.0

package/src/components/ValMenu.tsx

@@ -1,23 +1,35 @@
-import { Edit2, Edit3, Moon, Power, Sun } from "react-feather";
 import { useValOverlayContext } from "./ValOverlayContext";
 import { ValApi } from "@valbuild/core";
+import classNames from "classnames";
+import {
+  Maximize,
+  Minimize,
+  Moon,
+  Pause,
+  Play,
+  Power,
+  Sun,
+} from "lucide-react";
+import React from "react";
+
+const className = "p-1 border rounded-full shadow border-accent";
+const PREV_URL_KEY = "valbuild:urlBeforeNavigation";
 
 export function ValMenu({ api }: { api: ValApi }) {
   const { theme, setTheme, editMode, setEditMode } = useValOverlayContext();
   return (
-    <div className="flex flex-row items-center justify-center w-full h-full space-x-4 text-primary">
-      <button
-        className="p-1 border rounded-full shadow bg-base border-highlight"
+    <div className="flex flex-row items-center justify-center w-full h-full px-1 py-2 border-2 rounded-full gap-x-3 text-primary bg-background border-fill">
+      <MenuButton
+        active={editMode === "hover"}
         onClick={() => {
-          setEditMode((prev) => (prev === "off" ? "hover" : "off"));
+          setEditMode((prev) => (prev === "hover" ? "off" : "hover"));
         }}
       >
         <div className="h-[24px] w-[24px] flex justify-center items-center">
-          {editMode === "off" ? <Edit2 size={18} /> : <Edit3 size={18} />}
+          {editMode === "hover" ? <Pause size={18} /> : <Play size={18} />}
         </div>
-      </button>
-      <button
-        className="p-1 border rounded-full shadow bg-base border-highlight"
+      </MenuButton>
+      <MenuButton
         onClick={() => {
           setTheme(theme === "dark" ? "light" : "dark");
         }}
@@ -26,11 +38,30 @@ export function ValMenu({ api }: { api: ValApi }) {
           {theme === "dark" && <Sun size={15} />}
           {theme === "light" && <Moon size={15} />}
         </div>
-      </button>
-      <a
-        className="p-1 border rounded-full shadow bg-base border-highlight"
-        href={api.getDisableUrl()}
+      </MenuButton>
+      <MenuButton
+        active={editMode === "full"}
+        onClick={() => {
+          // Save the current url so we can go back to it when returning from fullscreen mode
+          if (editMode !== "full") {
+            localStorage.setItem(PREV_URL_KEY, window.location.href);
+            window.location.href = api.getEditUrl();
+          } else if (editMode === "full") {
+            const prevUrl = localStorage.getItem(PREV_URL_KEY);
+            window.location.href = prevUrl || "/";
+          }
+        }}
       >
+        <div className="h-[24px] w-[24px] flex justify-center items-center">
+          {editMode === "full" ? (
+            <Minimize size={15} />
+          ) : (
+            <Maximize size={15} />
+          )}
+        </div>
+      </MenuButton>
+
+      <a className={className} href={api.getDisableUrl()}>
         <div className="h-[24px] w-[24px] flex justify-center items-center">
           <Power size={18} />
         </div>
@@ -38,3 +69,24 @@ export function ValMenu({ api }: { api: ValApi }) {
     </div>
   );
 }
+
+function MenuButton({
+  active,
+  onClick,
+  children,
+}: {
+  active?: boolean;
+  children: React.ReactNode;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      className={classNames(className, {
+        "bg-accent drop-shadow-[0px_0px_12px_rgba(56,205,152,0.60)]": active,
+      })}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+}

package/src/components/ValOverlay.tsx

@@ -5,50 +5,30 @@ import {
   SetStateAction,
   useCallback,
   useEffect,
-  useRef,
   useState,
 } from "react";
 import { Session } from "../dto/Session";
 import { ValMenu } from "./ValMenu";
-import {
-  EditMode,
-  Theme,
-  ValOverlayContext,
-  WindowSize,
-} from "./ValOverlayContext";
+import { EditMode, ValOverlayContext, WindowSize } from "./ValOverlayContext";
 import { Remote } from "../utils/Remote";
 import { ValWindow } from "./ValWindow";
 import { result } from "@valbuild/core/fp";
-import {
-  AnyRichTextOptions,
-  FileSource,
-  Internal,
-  RichTextSource,
-  SerializedSchema,
-  SourcePath,
-  VAL_EXTENSION,
-} from "@valbuild/core";
+import { Internal, SerializedSchema, SourcePath } from "@valbuild/core";
 import { Modules, resolvePath } from "../utils/resolvePath";
 import { ValApi } from "@valbuild/core";
-import { RichTextEditor } from "../exports";
-import { LexicalEditor } from "lexical";
-import { LexicalRootNode } from "../richtext/conversion/richTextSourceToLexical";
-import { PatchJSON } from "@valbuild/core/patch";
-import { readImage } from "../utils/readImage";
-import { lexicalToRichTextSource } from "../richtext/conversion/lexicalToRichTextSource";
+import { ValFormField } from "./ValFormField";
+import { usePatch } from "./usePatch";
+import { Button } from "./ui/button";
+import { useTheme } from "./useTheme";
+import { IValStore } from "../lib/IValStore";
 
 export type ValOverlayProps = {
   defaultTheme?: "dark" | "light";
   api: ValApi;
+  store: IValStore;
 };
 
-type ImageSource = FileSource<{
-  height: number;
-  width: number;
-  sha256: string;
-}>;
-
-export function ValOverlay({ defaultTheme, api }: ValOverlayProps) {
+export function ValOverlay({ defaultTheme, api, store }: ValOverlayProps) {
   const [theme, setTheme] = useTheme(defaultTheme);
   const session = useSession(api);
 
@@ -61,37 +41,16 @@ export function ValOverlay({ defaultTheme, api }: ValOverlayProps) {
     windowTarget?.path
   );
 
-  const [state, setState] = useState<{
-    [path: SourcePath]: () => Promise<PatchJSON>;
-  }>({});
-  const initPatchCallback = useCallback((currentPath: SourcePath | null) => {
-    return (callback: PatchCallback) => {
-      // TODO: revaluate this logic when we have multiple paths
-      // NOTE: see cleanup of state in useEffect below
-      if (!currentPath) {
-        setState({});
-      } else {
-        const patchPath = Internal.createPatchJSONPath(
-          Internal.splitModuleIdAndModulePath(currentPath)[1]
-        );
-        setState((prev) => {
-          return {
-            ...prev,
-            [currentPath]: () => callback(patchPath),
-          };
-        });
-      }
-    };
-  }, []);
-  useEffect(() => {
-    setState((prev) => {
-      return Object.fromEntries(
-        Object.entries(prev).filter(([path]) => path === windowTarget?.path)
-      );
-    });
-  }, [windowTarget?.path]);
+  const { initPatchCallback, onSubmitPatch } = usePatch(
+    windowTarget?.path ? [windowTarget.path] : [],
+    api,
+    store
+  );
 
   const [windowSize, setWindowSize] = useState<WindowSize>();
+  useEffect(() => {
+    store.updateAll();
+  }, []);
 
   return (
     <ValOverlayContext.Provider
@@ -108,7 +67,7 @@ export function ValOverlay({ defaultTheme, api }: ValOverlayProps) {
         setWindowSize,
       }}
     >
-      <div data-mode={theme}>
+      <div data-mode={theme} className="antialiased">
         <div className="fixed -translate-x-1/2 z-overlay left-1/2 bottom-4">
           <ValMenu api={api} />
         </div>
@@ -135,61 +94,17 @@ export function ValOverlay({ defaultTheme, api }: ValOverlayProps) {
             </div>
             {loading && <div className="text-primary">Loading...</div>}
             {error && <div className="text-red">{error}</div>}
-            {typeof selectedSource === "string" &&
-              selectedSchema?.type === "string" && (
-                <TextField
-                  defaultValue={selectedSource}
-                  isLoading={loading}
-                  registerPatchCallback={initPatchCallback(windowTarget.path)}
-                />
-              )}
-            {selectedSource &&
-              typeof selectedSource === "object" &&
-              VAL_EXTENSION in selectedSource &&
-              selectedSource[VAL_EXTENSION] === "richtext" && (
-                <RichTextField
-                  registerPatchCallback={initPatchCallback(windowTarget.path)}
-                  defaultValue={
-                    selectedSource as RichTextSource<AnyRichTextOptions>
-                  }
-                />
-              )}
-            {selectedSource &&
-              typeof selectedSource === "object" &&
-              VAL_EXTENSION in selectedSource &&
-              selectedSource[VAL_EXTENSION] === "file" && (
-                <ImageField
-                  registerPatchCallback={initPatchCallback(windowTarget.path)}
-                  defaultValue={selectedSource as ImageSource}
-                />
-              )}
-            <div className="flex items-end justify-end py-2">
-              <SubmitButton
-                disabled={false}
-                onClick={() => {
-                  if (state[windowTarget.path]) {
-                    const [moduleId] = Internal.splitModuleIdAndModulePath(
-                      windowTarget.path
-                    );
-                    const res = state[windowTarget.path]();
-                    if (res) {
-                      res
-                        .then((patch) => {
-                          console.log("Submitting", patch);
-                          return api.postPatches(moduleId, patch);
-                        })
-                        .then((res) => {
-                          console.log(res);
-                        })
-                        .finally(() => {
-                          console.log("done");
-                        });
-                    } else {
-                      console.error("No patch");
-                    }
-                  }
-                }}
+            {selectedSchema !== undefined && selectedSource !== undefined && (
+              <ValFormField
+                path={windowTarget.path}
+                disabled={loading}
+                source={selectedSource}
+                schema={selectedSchema}
+                registerPatchCallback={initPatchCallback(windowTarget.path)}
               />
+            )}
+            <div className="flex items-end justify-end py-2">
+              <SubmitButton disabled={false} onClick={onSubmitPatch} />
             </div>
           </ValWindow>
         )}
@@ -198,183 +113,6 @@ export function ValOverlay({ defaultTheme, api }: ValOverlayProps) {
   );
 }
 
-type PatchCallback = (modulePath: string) => Promise<PatchJSON>;
-
-function ImageField({
-  defaultValue,
-  registerPatchCallback,
-}: {
-  registerPatchCallback: (callback: PatchCallback) => void;
-  defaultValue?: ImageSource;
-}) {
-  const [data, setData] = useState<string | null>(null);
-  const [metadata, setMetadata] = useState<{
-    width?: number;
-    height?: number;
-    sha256: string;
-  } | null>(null);
-  const url = defaultValue && Internal.convertFileSource(defaultValue).url;
-  useEffect(() => {
-    registerPatchCallback(async (path) => {
-      const pathParts = path.split("/");
-      if (!data) {
-        return [];
-      }
-      return [
-        {
-          value: {
-            ...defaultValue,
-            metadata,
-          },
-          op: "replace",
-          path,
-        },
-        // update the contents of the file:
-        {
-          value: data,
-          op: "replace",
-          path: `${pathParts.slice(0, -1).join("/")}/$${
-            pathParts[pathParts.length - 1]
-          }`,
-        },
-      ];
-    });
-  }, [data]);
-
-  return (
-    <div>
-      <label htmlFor="img_input" className="">
-        <img src={data || url} />
-        <input
-          id="img_input"
-          type="file"
-          hidden
-          onChange={(ev) => {
-            readImage(ev)
-              .then((res) => {
-                setData(res.src);
-                setMetadata({
-                  sha256: res.sha256,
-                  width: res.width,
-                  height: res.height,
-                });
-              })
-              .catch((err) => {
-                console.error(err.message);
-                setData(null);
-                setMetadata(null);
-              });
-          }}
-        />
-      </label>
-    </div>
-  );
-}
-
-function RichTextField({
-  defaultValue,
-  registerPatchCallback,
-}: {
-  registerPatchCallback: (callback: PatchCallback) => void;
-  defaultValue?: RichTextSource<AnyRichTextOptions>;
-}) {
-  const [editor, setEditor] = useState<LexicalEditor | null>(null);
-  useEffect(() => {
-    if (editor) {
-      registerPatchCallback(async (path) => {
-        const { templateStrings, exprs, files } = editor?.toJSON()?.editorState
-          ? await lexicalToRichTextSource(
-              editor?.toJSON()?.editorState.root as LexicalRootNode
-            )
-          : ({
-              [VAL_EXTENSION]: "richtext",
-              templateStrings: [""],
-              exprs: [],
-              files: {},
-            } as RichTextSource<AnyRichTextOptions> & {
-              files: Record<string, string>;
-            });
-        return [
-          {
-            op: "replace" as const,
-            path,
-            value: {
-              templateStrings,
-              exprs,
-              [VAL_EXTENSION]: "richtext",
-            },
-          },
-          ...Object.entries(files).map(([path, value]) => {
-            return {
-              op: "file" as const,
-              path,
-              value,
-            };
-          }),
-        ];
-      });
-    }
-  }, [editor]);
-  return (
-    <RichTextEditor
-      onEditor={(editor) => {
-        setEditor(editor);
-      }}
-      richtext={
-        defaultValue ||
-        ({
-          children: [],
-          [VAL_EXTENSION]: "root",
-        } as unknown as RichTextSource<AnyRichTextOptions>)
-      }
-    />
-  );
-}
-
-function TextField({
-  isLoading,
-  defaultValue,
-  registerPatchCallback,
-}: {
-  registerPatchCallback: (callback: PatchCallback) => void;
-  isLoading: boolean;
-  defaultValue?: string;
-}) {
-  const [value, setValue] = useState(defaultValue || "");
-
-  // ref is used to get the value of the textarea without closing over the value field
-  // to avoid registering a new callback every time the value changes
-  const ref = useRef<HTMLTextAreaElement>(null);
-  useEffect(() => {
-    registerPatchCallback(async (path) => {
-      return [
-        {
-          op: "replace",
-          path,
-          value: ref.current?.value || "",
-        },
-      ];
-    });
-  }, []);
-
-  return (
-    <div className="flex flex-col justify-between h-full px-4">
-      <div
-        className="w-full h-full py-2 overflow-y-scroll grow-wrap"
-        data-replicated-value={value} /* see grow-wrap */
-      >
-        <textarea
-          ref={ref}
-          disabled={isLoading}
-          className="p-2 border outline-none resize-none bg-fill text-primary border-border focus-visible:border-highlight"
-          defaultValue={value}
-          onChange={(e) => setValue(e.target.value)}
-        />
-      </div>
-    </div>
-  );
-}
-
 function SubmitButton({
   disabled,
   onClick,
@@ -383,13 +121,13 @@ function SubmitButton({
   onClick?: () => void;
 }) {
   return (
-    <button
+    <Button
       className="px-4 py-2 border border-highlight disabled:border-border"
       disabled={disabled}
       onClick={onClick}
     >
       Submit
-    </button>
+    </Button>
   );
 }
 
@@ -503,7 +241,7 @@ function ValHover({
   return (
     <div
       id="val-hover"
-      className="fixed border-2 cursor-pointer z-overlay-hover border-base"
+      className="fixed border-2 cursor-pointer z-overlay-hover border-highlight drop-shadow-[0px_0px_12px_rgba(56,205,152,0.60)]"
       style={{
         top: rect?.top,
         left: rect?.left,
@@ -521,7 +259,7 @@ function ValHover({
     >
       <div className="flex items-center justify-end w-full text-xs">
         <div
-          className="flex items-center justify-center px-3 py-1 text-primary bg-base"
+          className="flex items-center justify-center px-3 py-1 text-primary bg-highlight"
           style={{
             maxHeight: rect?.height && rect.height - 4,
             fontSize:
@@ -548,7 +286,6 @@ function useHoverTarget(editMode: EditMode) {
         // TODO: use .contains?
         do {
           if (curr?.dataset.valPath) {
-            console.log("setter target");
             setTargetElement(curr);
             setTargetPath(curr.dataset.valPath as SourcePath);
             setTargetRect(curr.getBoundingClientRect());
@@ -668,49 +405,6 @@ function useInitEditMode() {
   return [editMode, setEditMode] as const;
 }
 
-function useTheme(defaultTheme: Theme = "dark") {
-  const [theme, setTheme] = useState<Theme>(defaultTheme);
-
-  useEffect(() => {
-    if (localStorage.getItem("val-theme") === "light") {
-      setTheme("light");
-    } else if (localStorage.getItem("val-theme") === "dark") {
-      setTheme("dark");
-    } else if (
-      window.matchMedia &&
-      window.matchMedia("(prefers-color-scheme: dark)").matches
-    ) {
-      setTheme("dark");
-    } else if (
-      window.matchMedia &&
-      window.matchMedia("(prefers-color-scheme: light)").matches
-    ) {
-      setTheme("light");
-    }
-    const themeListener = (e: MediaQueryListEvent) => {
-      if (!localStorage.getItem("val-theme")) {
-        setTheme(e.matches ? "dark" : "light");
-      }
-    };
-    window
-      .matchMedia("(prefers-color-scheme: dark)")
-      .addEventListener("change", themeListener);
-    return () => {
-      window
-        .matchMedia("(prefers-color-scheme: dark)")
-        .removeEventListener("change", themeListener);
-    };
-  }, []);
-
-  return [
-    theme,
-    (theme: Theme) => {
-      localStorage.setItem("val-theme", theme);
-      setTheme(theme);
-    },
-  ] as const;
-}
-
 function useSession(api: ValApi) {
   const [session, setSession] = useState<Remote<Session>>({
     status: "not-asked",

package/src/components/ValWindow.tsx

@@ -1,8 +1,9 @@
 import React, { useEffect, useRef, useState } from "react";
-import { AlignJustify, X } from "react-feather";
 import classNames from "classnames";
 import { Resizable } from "react-resizable";
 import { useValOverlayContext } from "./ValOverlayContext";
+import { AlignJustifyIcon, XIcon } from "lucide-react";
+import { ScrollArea } from "./ui/scroll-area";
 
 export type ValWindowProps = {
   children:
@@ -54,11 +55,13 @@ export function ValWindow({
 
   return (
     <Resizable
+      minConstraints={[MIN_WIDTH, MIN_HEIGHT]}
       width={windowSize?.width || MIN_WIDTH}
       height={windowSize?.height || MIN_HEIGHT}
       onResize={(_, { size }) =>
         setWindowSize({
           ...size,
+
           innerHeight:
             (windowSize?.height || MIN_HEIGHT) -
             (64 + (bottomRef.current?.getBoundingClientRect()?.height || 0)),
@@ -81,7 +84,7 @@ export function ValWindow({
       }
       draggableOpts={{}}
       className={classNames(
-        "absolute inset-0  tablet:w-auto tablet:h-auto tablet:min-h-fit tablet:rounded bg-base text-primary drop-shadow-2xl min-w-[320px] transition-opacity duration-300 delay-75",
+        "absolute inset-0 tablet:w-auto tablet:h-auto tablet:min-h-fit rounded-lg bg-background text-primary drop-shadow-2xl min-w-[320px]",
         {
           "opacity-0": !isInitialized,
           "opacity-100": isInitialized,
@@ -100,9 +103,9 @@ export function ValWindow({
           ref={dragRef}
           className="relative flex items-center justify-center px-2 pt-2 text-primary"
         >
-          <AlignJustify
+          <AlignJustifyIcon
             size={16}
-            className="hidden w-full cursor-grab tablet:block"
+            className="w-full cursor-grab tablet:block"
             onMouseDown={(e) => {
               e.preventDefault();
               e.stopPropagation();
@@ -110,10 +113,10 @@ export function ValWindow({
             }}
           />
           <button
-            className="absolute top-0 right-0 px-4 py-2 focus:outline-none focus-visible:outline-highlight"
+            className="absolute top-0 right-0 px-4 py-2 focus:outline-none focus-visible:outline-accent"
             onClick={onClose}
           >
-            <X size={16} />
+            <XIcon size={16} />
           </button>
         </div>
         <form
@@ -123,14 +126,14 @@ export function ValWindow({
           }}
         >
           {Array.isArray(children) && children.slice(0, 1)}
-          <div
-            className="relative overflow-scroll"
+          <ScrollArea
+            className="relative"
             style={{
               height: windowSize?.innerHeight,
             }}
           >
             {Array.isArray(children) ? children.slice(1, -1) : children}
-          </div>
+          </ScrollArea>
           <div ref={bottomRef} className="w-full px-4 pb-0">
             {Array.isArray(children) && children.slice(-1)}
           </div>

package/src/components/dashboard/FormGroup.tsx

@@ -3,20 +3,26 @@ import { Children, ReactNode, useState } from "react";
 
 interface FormGroupProps {
   children: ReactNode | ReactNode[];
+  className?: string;
+  defaultExpanded?: boolean;
 }
 
-export const FormGroup = ({ children }: FormGroupProps) => {
+export const FormGroup = ({
+  children,
+  className,
+  defaultExpanded,
+}: FormGroupProps) => {
   const [firstChild, ...rest] = Children.toArray(children);
-  const [expanded, setExpanded] = useState<boolean>(false);
-  const defaultClass =
-    "px-4 py-3 border-b border-dark-gray hover:bg-light-gray hover:border-light-gray";
+  const [expanded, setExpanded] = useState<boolean>(defaultExpanded ?? true);
+  const defaultClass = "py-3 " + (className ? ` ${className}` : "");
   return (
     <div>
       <div className="flex flex-col font-serif text-xs leading-4 tracking-wider text-white">
         <button
           className={classNames(
             defaultClass,
-            "bg-warm-black flex justify-between items-center"
+            "bg-warm-black flex justify-between items-center",
+            { "border-y border-highlight": !expanded }
           )}
           onClick={() => setExpanded(!expanded)}
         >
@@ -24,7 +30,7 @@ export const FormGroup = ({ children }: FormGroupProps) => {
           <div>{expanded ? "Collapse" : "Expand"}</div>
         </button>
         {expanded && (
-          <div className="flex flex-col bg-medium-black">
+          <div className="flex flex-col bg-background">
             {Children.map(rest, (child) => (
               <div className={classNames(defaultClass)}>{child}</div>
             ))}