@valbuild/react 0.12.0 → 0.13.3

package/src/ValUI.tsx

@@ -0,0 +1,353 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useEffect, useState } from "react";
+import { ValApi } from "./ValApi";
+import { ValStore } from "./ValStore";
+import { Inputs, Style, ValOverlay } from "@valbuild/ui";
+import {
+  FileSource,
+  FILE_REF_PROP,
+  Internal,
+  RichText,
+  SourcePath,
+  VAL_EXTENSION,
+} from "@valbuild/core";
+import { PatchJSON } from "@valbuild/core/patch";
+import { ImageMetadata } from "@valbuild/core/src/schema/image";
+import { AuthStatus } from "./AuthStatus";
+import { ShadowRoot } from "./ShadowRoot";
+
+export type ValUIProps = {
+  valStore: ValStore;
+  valApi: ValApi;
+};
+
+export default function ValUI({ valApi, valStore }: ValUIProps) {
+  const [selectedSources, setSelectedSources] = useState<string[]>([]);
+  const [editMode, setEditMode] = useState(false);
+  const [editFormPosition, setEditFormPosition] = useState<{
+    left: number;
+    top: number;
+  } | null>(null);
+
+  const [authentication, setAuthentication] = useState<AuthStatus>({
+    status: "not-asked",
+  });
+
+  useEffect(() => {
+    if (editMode) {
+      valStore.updateAll();
+    }
+  }, [editMode]);
+  useEffect(() => {
+    let openValFormListener: ((e: MouseEvent) => void) | undefined = undefined;
+    let styleElement: HTMLStyleElement | undefined = undefined;
+    const editButtonClickOptions = {
+      capture: true,
+      passive: true,
+    };
+    if (editMode) {
+      // highlight val element by appending a new style
+      styleElement = document.createElement("style");
+      styleElement.id = "val-edit-highlight";
+      styleElement.innerHTML = `
+        .val-edit-mode >* [data-val-path] {
+          outline: #ffff00 solid 1px;
+          cursor: pointer;
+        }
+      `;
+      document.body.appendChild(styleElement);
+
+      // capture event clicks on data-val-path elements
+      openValFormListener = (e: MouseEvent) => {
+        if (e.target instanceof Element) {
+          let parent = e.target;
+          while (parent && parent !== document.body) {
+            if (parent.getAttribute("data-val-path")) {
+              break;
+            }
+            if (parent.parentElement) {
+              parent = parent.parentElement;
+            } else {
+              break;
+            }
+          }
+          const valSources = parent?.getAttribute("data-val-path");
+          if (valSources) {
+            e.stopPropagation();
+            setSelectedSources(
+              valSources.split(
+                ","
+              ) /* TODO: just split on commas will not work if path contains , */
+            );
+            setEditFormPosition({
+              left: e.pageX,
+              top: e.pageY,
+            });
+            // } else if (!isValElement(e.target)) {
+            //   console.log("click outside", e.target);
+            //   setEditFormPosition(null);
+            //   setSelectedSources([]);
+          }
+        }
+      };
+      document.addEventListener(
+        "click",
+        openValFormListener,
+        editButtonClickOptions
+      );
+    }
+    return () => {
+      if (openValFormListener) {
+        document.removeEventListener(
+          "click",
+          openValFormListener,
+          editButtonClickOptions
+        );
+      }
+      styleElement?.remove();
+    };
+  }, [editMode]);
+  useEffect(() => {
+    if (editMode) {
+      document.body.classList.add("val-edit-mode");
+    } else {
+      document.body.classList.remove("val-edit-mode");
+    }
+
+    if (editMode) {
+      if (authentication.status !== "authenticated") {
+        valApi
+          .getSession()
+          .then(async (res) => {
+            if (res.status === 401) {
+              setAuthentication({
+                status: "unauthenticated",
+              });
+            } else if (res.ok) {
+              const data = await res.json();
+              if (data.mode === "local") {
+                setAuthentication({ status: "local" });
+              } else if (data.mode === "proxy") {
+                setAuthentication({
+                  status: "authenticated",
+                });
+              } else {
+                setAuthentication({
+                  status: "error",
+                  message: "Unknown authentication mode",
+                });
+              }
+            } else {
+              let message = "Unknown error";
+              try {
+                message = await res.text();
+              } catch {
+                // ignore
+              }
+              setAuthentication({
+                status: "error",
+                message,
+              });
+            }
+          })
+          .catch((err) => {
+            console.error("Failed to fetch session", err);
+            setAuthentication({
+              status: "error",
+              message: "Unknown authentication mode",
+            });
+          });
+      }
+    } else {
+      if (authentication.status === "error") {
+        setAuthentication({
+          status: "not-asked",
+        });
+      }
+    }
+  }, [editMode, authentication.status]);
+
+  const [showEditButton, setShowEditButton] = useState(false);
+  useEffect(() => {
+    setShowEditButton(true);
+  }, []);
+
+  const [inputs, setInputs] = useState<Inputs>({});
+
+  useEffect(() => {
+    setInputs({});
+    for (const path of selectedSources) {
+      valApi.getModule(path).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>
+            ),
+          };
+        }
+        console.log("input path", path);
+        console.log("serialized path", serializedModule.path);
+        if (!input) {
+          throw new Error(
+            `Unsupported module type: ${serializedModule.schema.type}`
+          );
+        }
+        setInputs((inputs) => {
+          return {
+            ...inputs,
+            [serializedModule.path]: input,
+          } as Inputs;
+        });
+      });
+    }
+  }, [selectedSources.join(",")]);
+  if (!showEditButton) {
+    return null;
+  }
+  return (
+    <ShadowRoot>
+      {/* TODO: */}
+      <link rel="preconnect" href="https://fonts.googleapis.com" />
+      <link
+        rel="preconnect"
+        href="https://fonts.gstatic.com"
+        crossOrigin="anonymous"
+      />
+      <link
+        href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,400;1,700&display=swap"
+        rel="stylesheet"
+      />
+      <Style />
+      <div data-mode="dark">
+        <ValOverlay
+          editMode={editMode}
+          setEditMode={setEditMode}
+          closeValWindow={() => {
+            setEditFormPosition(null);
+            setSelectedSources([]);
+            setInputs({});
+          }}
+          valWindow={
+            (editFormPosition && {
+              position: editFormPosition,
+              inputs,
+              onSubmit: (inputs) => {
+                Promise.all(
+                  Object.entries(inputs).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) => JSON.parse(p))
+                              .join("/")}`,
+                          },
+                        ];
+                        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);
+                      }
+                      throw new Error(
+                        `Unsupported input type: ${(input as any).type}`
+                      );
+                    } else {
+                      console.error("Submitted incomplete input, ignoring...");
+                      return Promise.resolve();
+                    }
+                  })
+                ).then(() => {
+                  setEditFormPosition(null);
+                  setSelectedSources([]);
+                  setInputs({});
+                });
+              },
+            }) ??
+            undefined
+          }
+        />
+      </div>
+    </ShadowRoot>
+  );
+}

package/src/assets.ts

@@ -0,0 +1,124 @@
+import * as base64 from "base64-arraybuffer";
+
+function dataUrl(mimeType: string, data: string): string {
+  return `data:${mimeType};base64,${base64.encode(
+    new TextEncoder().encode(data)
+  )}`;
+}
+
+// TODO: stroke should be currentColor
+export const editIcon = (size: number, stroke: string) =>
+  dataUrl(
+    "image/svg+xml",
+    `
+<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="${stroke}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
+   `
+  );
+
+export const logo = dataUrl(
+  "image/svg+xml",
+  `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="101.83195mm"
+   height="103.55328mm"
+   viewBox="0 0 101.83195 103.55328"
+   version="1.1"
+   id="svg974"
+   inkscape:export-filename="logo.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview976"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     inkscape:zoom="1.4040232"
+     inkscape:cx="39.173141"
+     inkscape:cy="503.90904"
+     inkscape:window-width="3832"
+     inkscape:window-height="2087"
+     inkscape:window-x="0"
+     inkscape:window-y="69"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs971" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-46.162121,-16.863144)">
+    <ellipse
+       style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:4.41854;stroke-dasharray:none;stroke-opacity:1"
+       id="path2242"
+       ry="49.567371"
+       rx="48.706703"
+       cy="68.639786"
+       cx="97.078094" />
+    <path
+       style="fill:#000000;fill-opacity:1;stroke:#f2f2f2;stroke-width:9.9912;stroke-dasharray:none;stroke-opacity:1"
+       d="m 65.105895,44.462411 18.85692,45.934668 13.064363,-39.90188 15.829132,39.947835 23.07956,-0.1822"
+       id="path4245"
+       sodipodi:nodetypes="ccccc" />
+    <path
+       style="fill:#000000;fill-opacity:1;stroke:#f2f2f2;stroke-width:4.85097;stroke-dasharray:none;stroke-opacity:1"
+       d="M 108.18755,79.963752 C 101.58768,84.940963 94.021144,82.50121 86.406627,79.693345"
+       id="path4249"
+       sodipodi:nodetypes="cc" />
+  </g>
+</svg>`
+);
+
+export const valcmsLogo = dataUrl(
+  "image/svg+xml",
+  `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   width="20"
+   height="20"
+   viewBox="0 0 52.916665 52.916668"
+   version="1.1"
+   id="svg8">
+  <defs
+     id="defs2" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="layer1">
+    <path
+       style="fill:none;stroke:white;stroke-width:5.00377;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="M 3.9337727,9.883415 14.718441,43.556958 25.597715,9.9678121 35.530965,43.388176 h 15.798599 v 0 h 0.09461"
+       id="path10" />
+    <path
+       style="fill:none;stroke:white;stroke-width:5.00377;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 19.826972,27.859518 11.257682,0.0844 v 0 0"
+       id="path837" />
+  </g>
+</svg>`
+);

package/src/hooks/useVal.test.tsx

@@ -0,0 +1,57 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { useVal } from "./useVal";
+import { initVal, Val } from "@valbuild/core";
+import { renderHook } from "@testing-library/react";
+import { ValContext } from "../ValProvider";
+import { ReactElement } from "react";
+import { ValStore } from "../ValStore";
+import { ValApi } from "../ValApi";
+
+const valApi = new ValApi("mock");
+const valStore = new ValStore(valApi);
+
+const Providers = ({ children }: { children: ReactElement }) => (
+  <ValContext.Provider
+    value={{
+      valStore,
+      valApi,
+    }}
+  >
+    {children}
+  </ValContext.Provider>
+);
+
+// const { s, val } = initVal();
+
+describe("useVal", () => {
+  test.skip("extracts ValString from string", () => {
+    // const mod = val.content("foo", s.string(), "bar");
+    // const { result } = renderHook(() => useVal(mod, "en_US"), {
+    //   wrapper: Providers,
+    // });
+    // expect(result.current).toStrictEqual<Val<string>>({
+    //   val: "bar",
+    //   valSrc: "foo?en_US?",
+    // });
+  });
+
+  test.skip("extracts ValString from ValObject", () => {
+    // const mod = val.content("baz", s.object({ foo: s.string() }), {
+    //   foo: "bar",
+    // });
+    // const { result } = renderHook(() => useVal(mod, "en_US"), {
+    //   wrapper: Providers,
+    // });
+    // const vo: Val<{ foo: string }> = result.current;
+    // expect(vo.foo).toStrictEqual<Val<string>>({
+    //   valSrc: `baz?en_US?."foo"`,
+    //   val: "bar",
+    // });
+    // expect(val).toStrictEqual<ValObject<{ foo: string }>>({
+    //   foo: {
+    //     id: "baz.foo",
+    //     val: "bar",
+    //   },
+    // });
+  });
+});

package/src/hooks/useVal.ts

@@ -0,0 +1,35 @@
+import {
+  SelectorSource,
+  SelectorOf,
+  GenericSelector,
+  Val,
+  Internal,
+} from "@valbuild/core";
+import { JsonOfSource } from "@valbuild/core/src/val";
+
+export function useVal<T extends SelectorSource>(
+  selector: T,
+  locale?: string
+): SelectorOf<T> extends GenericSelector<infer S>
+  ? Val<JsonOfSource<S>>
+  : never {
+  // const mod = selectable.getModule();
+  // const valStore = useValStore();
+  // const remoteContent = useSyncExternalStore(
+  //   valStore.subscribe(mod.id),
+  //   valStore.getSnapshot(mod.id),
+  //   valStore.getServerSnapshot(mod.id)
+  // );
+  // if (remoteContent) {
+  //   return selectable.getVal(remoteContent.source as S, locale);
+  // }
+  // const content = mod.content;
+  // const validationError = content.validate();
+  // if (validationError) {
+  //   throw new Error(
+  //     `Invalid source value. Errors:\n${validationError.join("\n")}`
+  //   );
+  // }
+
+  return Internal.getVal(selector, locale);
+}

package/src/index.ts

@@ -0,0 +1,6 @@
+/* export { useContent } from "./useContent";
+export { useText } from "./useText";
+export { WithVal } from "./WithVal"; */
+export { ValProviderWrapper as ValProvider } from "./ValProviderWrapper";
+export { useVal } from "./hooks/useVal";
+export { ValRichText } from "./ValRichText";

package/src/jsx-dev-runtime.js

@@ -0,0 +1,47 @@
+import { Internal } from "@valbuild/core";
+import * as ReactJSXRuntimeDev from "react/jsx-dev-runtime";
+export * from "react/jsx-dev-runtime";
+
+const isIntrinsicElement = (type) => {
+  // TODO: think this is not correct, but good enough for now?
+  return typeof type === "string";
+};
+
+const devalProps = (type, props) => {
+  const valSources = [];
+
+  if (isIntrinsicElement(type)) {
+    for (const [key, value] of Object.entries(props)) {
+      if (typeof value === "object" && value !== null && "val" in value) {
+        const valPath = Internal.getValPath(value);
+        if (valPath) {
+          valSources.push(valPath);
+          if (typeof value.val === "string" || value.val === null) {
+            props[key] = value.val;
+          } else {
+            throw Error("TODO: unhandled value type");
+          }
+        }
+      }
+    }
+  }
+
+  if (valSources.length > 0) {
+    props["data-val-path"] = valSources.join(",");
+  }
+};
+
+export function jsxDEV(type, props, key, isStaticChildren, source, self) {
+  // console.log("jsxDEV", type, props, key, isStaticChildren, source, self);
+
+  devalProps(type, props);
+
+  return ReactJSXRuntimeDev.jsxDEV(
+    type,
+    props,
+    key,
+    isStaticChildren,
+    source,
+    self
+  );
+}

package/src/jsx-namespace.d.ts

@@ -0,0 +1,46 @@
+import { Source, Val } from "@valbuild/core";
+
+// unpack all here to avoid infinite self-referencing when defining our own JSX namespace
+type ReactJSXElement = JSX.Element;
+type ReactJSXElementClass = JSX.ElementClass;
+type ReactJSXElementAttributesProperty = JSX.ElementAttributesProperty;
+type ReactJSXElementChildrenAttribute = JSX.ElementChildrenAttribute;
+type ReactJSXLibraryManagedAttributes<C, P> = JSX.LibraryManagedAttributes<
+  C,
+  P
+>;
+type ReactJSXIntrinsicAttributes = JSX.IntrinsicAttributes;
+type ReactJSXIntrinsicClassAttributes<T> = JSX.IntrinsicClassAttributes<T>;
+type ReactJSXIntrinsicElements = JSX.IntrinsicElements;
+
+type MaybeVal<T> = T extends Source ? Val<T> | T : T;
+type WithVal<T extends object> = {
+  [K in keyof T]: K extends "key" | "ref" | "className"
+    ? T[K]
+    : K extends "style"
+    ? WithVal<React.CSSProperties>
+    : T[K] extends object
+    ? T[K]
+    : MaybeVal<T[K]>;
+};
+
+export namespace ValJSX {
+  export type Element = ReactJSXElement;
+  export type ElementClass = ReactJSXElementClass;
+  export type ElementAttributesProperty = ReactJSXElementAttributesProperty;
+  export type ElementChildrenAttribute = ReactJSXElementChildrenAttribute;
+
+  export type LibraryManagedAttributes<C, P> = ReactJSXLibraryManagedAttributes<
+    C,
+    P
+  >;
+
+  export type IntrinsicAttributes = ReactJSXIntrinsicAttributes;
+  export type IntrinsicClassAttributes<T> = ReactJSXIntrinsicClassAttributes<T>;
+
+  export type IntrinsicElements = {
+    [K in keyof ReactJSXIntrinsicElements]: WithVal<
+      ReactJSXIntrinsicElements[K]
+    >;
+  };
+}

package/src/jsx-runtime.d.ts

@@ -0,0 +1 @@
+export { ValJSX as JSX } from "./jsx-namespace";

package/src/jsx-runtime.dev.d.ts

@@ -0,0 +1 @@
+export { ValJSX as JSX } from "./jsx-namespace";