@valbuild/ui 0.21.2 → 0.23.0

package/src/components/ValFormField.tsx

@@ -0,0 +1,574 @@
+import {
+  AnyRichTextOptions,
+  FileSource,
+  ImageMetadata,
+  Internal,
+  Json,
+  RichTextSource,
+  SerializedSchema,
+  SourcePath,
+  VAL_EXTENSION,
+} from "@valbuild/core";
+import type { PatchJSON } from "@valbuild/core/patch";
+import { LexicalEditor } from "lexical";
+import { useState, useEffect, useRef } from "react";
+import { RichTextEditor } from "../exports";
+import { lexicalToRichTextSource } from "../richtext/conversion/lexicalToRichTextSource";
+import { LexicalRootNode } from "../richtext/conversion/richTextSourceToLexical";
+import { readImage } from "../utils/readImage";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "./ui/select";
+import { PatchCallback } from "./usePatch";
+import { useValModuleFromPath } from "./ValFullscreen";
+
+type ImageSource = FileSource<ImageMetadata>;
+export type OnSubmit = (callback: PatchCallback) => Promise<void>;
+
+export function ValFormField({
+  path,
+  disabled,
+  source: source,
+  schema: schema,
+  registerPatchCallback,
+  onSubmit,
+}: {
+  path: string;
+  disabled: boolean;
+  source: Json;
+  schema: SerializedSchema;
+  onSubmit?: OnSubmit;
+  registerPatchCallback?: (callback: PatchCallback) => void;
+}) {
+  if (
+    (typeof source === "string" || source === null) &&
+    schema?.type === "string"
+  ) {
+    return (
+      <StringField
+        defaultValue={source}
+        disabled={disabled}
+        registerPatchCallback={registerPatchCallback}
+        onSubmit={onSubmit}
+      />
+    );
+  }
+  if (
+    (typeof source === "number" || source === null) &&
+    schema?.type === "number"
+  ) {
+    return (
+      <NumberField
+        defaultValue={source}
+        disabled={disabled}
+        registerPatchCallback={registerPatchCallback}
+        onSubmit={onSubmit}
+      />
+    );
+  }
+  if (
+    (typeof source === "number" ||
+      typeof source === "string" ||
+      source === null) &&
+    schema?.type === "keyOf"
+  ) {
+    return (
+      <KeyOfField
+        defaultValue={source}
+        disabled={disabled}
+        registerPatchCallback={registerPatchCallback}
+        onSubmit={onSubmit}
+        selector={schema.selector}
+      />
+    );
+  }
+  if (
+    (typeof source === "object" || source === null) &&
+    schema?.type === "richtext"
+  ) {
+    return (
+      <RichTextField
+        registerPatchCallback={registerPatchCallback}
+        onSubmit={onSubmit}
+        defaultValue={source as RichTextSource<AnyRichTextOptions>}
+      />
+    );
+  }
+  if (
+    (typeof source === "object" || source === null) &&
+    schema?.type === "image"
+  ) {
+    return (
+      <ImageField
+        path={path}
+        registerPatchCallback={registerPatchCallback}
+        onSubmit={onSubmit}
+        defaultValue={source as ImageSource}
+      />
+    );
+  }
+  return <div>Unsupported schema: {schema.type}</div>;
+}
+
+async function createImagePatch(
+  path: string,
+  data: string | null,
+  metadata: ImageMetadata,
+  defaultValue?: ImageSource
+): Promise<PatchJSON> {
+  const pathParts = path.split("/");
+  if (!data || !metadata) {
+    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]
+      }`,
+    },
+  ];
+}
+
+function ImageField({
+  path,
+  defaultValue,
+  onSubmit,
+  registerPatchCallback,
+}: {
+  path: string;
+  onSubmit?: OnSubmit;
+  registerPatchCallback?: (callback: PatchCallback) => void;
+  defaultValue?: ImageSource;
+}) {
+  const [data, setData] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [metadata, setMetadata] = useState<ImageMetadata>();
+  const [url, setUrl] = useState<string>();
+  useEffect(() => {
+    setUrl(defaultValue && Internal.convertFileSource(defaultValue).url);
+  }, [defaultValue]);
+
+  useEffect(() => {
+    if (registerPatchCallback) {
+      registerPatchCallback(async (path) => {
+        return createImagePatch(path, data, metadata, defaultValue);
+      });
+    }
+  }, [data, defaultValue]);
+
+  return (
+    <div className="max-w-4xl p-4" key={path}>
+      <label htmlFor={`img_input:${path}`} className="">
+        {data || url ? <img src={data || url} /> : <div>Empty</div>}
+        <input
+          id={`img_input:${path}`}
+          type="file"
+          hidden
+          onChange={(ev) => {
+            readImage(ev)
+              .then((res) => {
+                setData(res.src);
+                if (res.width && res.height) {
+                  setMetadata({
+                    sha256: res.sha256,
+                    width: res.width,
+                    height: res.height,
+                  });
+                } else {
+                  setMetadata(undefined);
+                }
+              })
+              .catch((err) => {
+                console.error(err.message);
+                setData(null);
+                setMetadata(undefined);
+              });
+          }}
+        />
+      </label>
+      {onSubmit && (
+        <div>
+          {data && (
+            <Button
+              disabled={loading}
+              onClick={() => {
+                setLoading(true);
+                onSubmit((path) =>
+                  createImagePatch(path, data, metadata, defaultValue)
+                ).finally(() => {
+                  setLoading(false);
+                  setData(null);
+                  setMetadata(undefined);
+                });
+              }}
+            >
+              {loading ? "Saving..." : "Submit"}
+            </Button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+async function createRichTextPatch(path: string, editor: LexicalEditor) {
+  const { templateStrings, exprs, files } = editor
+    ? await lexicalToRichTextSource(
+        editor.getEditorState().toJSON().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(([filePath, value]) => {
+      return {
+        op: "file" as const,
+        path,
+        filePath,
+        value,
+      };
+    }),
+  ];
+}
+function RichTextField({
+  defaultValue,
+  onSubmit,
+  registerPatchCallback,
+}: {
+  onSubmit?: OnSubmit;
+  registerPatchCallback?: (callback: PatchCallback) => void;
+  defaultValue?: RichTextSource<AnyRichTextOptions>;
+}) {
+  const [editor, setEditor] = useState<LexicalEditor | null>(null);
+  const [didChange, setDidChange] = useState(false);
+  const [loading, setLoading] = useState(false);
+  useEffect(() => {
+    if (editor) {
+      setDidChange(false);
+      editor.registerTextContentListener(() => {
+        setDidChange(true);
+      });
+      editor.registerDecoratorListener(() => {
+        setDidChange(true);
+      });
+    }
+  }, [editor]);
+  useEffect(() => {
+    if (editor && registerPatchCallback) {
+      registerPatchCallback((path) => createRichTextPatch(path, editor));
+    }
+  }, [editor]);
+  return (
+    <div className="p-4 border rounded border-card">
+      <RichTextEditor
+        onEditor={(editor) => {
+          setEditor(editor);
+        }}
+        richtext={
+          defaultValue ||
+          ({
+            children: [],
+            [VAL_EXTENSION]: "root",
+          } as unknown as RichTextSource<AnyRichTextOptions>)
+        }
+      />
+      {onSubmit && (
+        <div>
+          {didChange && (
+            <Button
+              disabled={loading || !editor}
+              onClick={() => {
+                if (editor) {
+                  setLoading(true);
+                  onSubmit((path) => createRichTextPatch(path, editor)).finally(
+                    () => {
+                      setLoading(false);
+                      setDidChange(false);
+                    }
+                  );
+                }
+              }}
+            >
+              {loading ? "Saving..." : "Submit"}
+            </Button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function KeyOfField({
+  disabled,
+  defaultValue,
+  registerPatchCallback,
+  onSubmit,
+  selector,
+}: {
+  registerPatchCallback?: (callback: PatchCallback) => void;
+  onSubmit?: OnSubmit;
+  disabled: boolean;
+  defaultValue?: string | number | null;
+  selector: SourcePath;
+}) {
+  const valModule = useValModuleFromPath(selector);
+  const getValuesFromModule = (module: typeof valModule) => {
+    if (Array.isArray(module.moduleSource)) {
+      return {
+        type: "number",
+        values: Object.keys(module.moduleSource).map((key) => parseInt(key)),
+      };
+    }
+    return {
+      type: "string",
+      values: Object.keys(module.moduleSource ?? ["ERROR fetching source"]),
+    };
+  };
+  const typeAndValues = getValuesFromModule(valModule);
+  const [value, setValue] = useState(defaultValue ?? typeAndValues.values[0]);
+  const [loading, setLoading] = useState(false);
+  useEffect(() => {
+    setLoading(disabled);
+  }, [disabled]);
+
+  const parse = (value: string) => {
+    if (typeAndValues.type === "number") {
+      if (value === "") {
+        throw new Error("Value cannot be empty");
+      }
+      if (Number.isNaN(Number(value))) {
+        throw new Error("Value was not a number: " + JSON.stringify(value));
+      }
+      return Number(value);
+    }
+    return value;
+  };
+
+  useEffect(() => {
+    if (registerPatchCallback) {
+      registerPatchCallback(async (path) => {
+        return [
+          {
+            op: "replace",
+            path,
+            value: value,
+          },
+        ];
+      });
+    }
+  }, [value]);
+  return (
+    <div className="flex flex-col justify-between h-full gap-y-4">
+      <Select
+        defaultValue={value.toString()}
+        disabled={loading}
+        onValueChange={(value) => {
+          setValue(parse(value));
+        }}
+      >
+        <SelectTrigger>
+          <SelectValue placeholder="Select a value" />
+        </SelectTrigger>
+        <SelectContent>
+          {typeAndValues.values.map((value) => (
+            <SelectItem key={value} value={value.toString()}>
+              {value.toString()}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+      {onSubmit && (
+        <div>
+          {defaultValue !== value && (
+            <Button
+              disabled={loading}
+              onClick={() => {
+                setLoading(true);
+                onSubmit(async (path) => [
+                  {
+                    op: "replace",
+                    path,
+                    value: value,
+                  },
+                ]).finally(() => {
+                  setLoading(false);
+                });
+              }}
+            >
+              {loading ? "Saving..." : "Submit"}
+            </Button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+function NumberField({
+  disabled,
+  defaultValue,
+  registerPatchCallback,
+  onSubmit,
+}: {
+  registerPatchCallback?: (callback: PatchCallback) => void;
+  onSubmit?: OnSubmit;
+  disabled: boolean;
+  defaultValue?: number | null;
+}) {
+  const [value, setValue] = useState(defaultValue || 0);
+  const [loading, setLoading] = useState(false);
+  useEffect(() => {
+    setLoading(disabled);
+  }, [disabled]);
+
+  // 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<HTMLInputElement>(null);
+  useEffect(() => {
+    if (registerPatchCallback) {
+      registerPatchCallback(async (path) => {
+        return [
+          {
+            op: "replace",
+            path,
+            value: Number(ref.current?.value) || 0,
+          },
+        ];
+      });
+    }
+  }, []);
+
+  return (
+    <div className="flex flex-col justify-between h-full gap-y-4">
+      <Input
+        ref={ref}
+        disabled={loading}
+        defaultValue={value ?? 0}
+        onChange={(e) => setValue(Number(e.target.value))}
+        type="number"
+      />
+      {onSubmit && (
+        <div>
+          {defaultValue !== value && (
+            <Button
+              disabled={loading}
+              onClick={() => {
+                setLoading(true);
+                onSubmit(async (path) => [
+                  {
+                    op: "replace",
+                    path,
+                    value: Number(ref.current?.value) || 0,
+                  },
+                ]).finally(() => {
+                  setLoading(false);
+                });
+              }}
+            >
+              {loading ? "Saving..." : "Submit"}
+            </Button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function StringField({
+  disabled,
+  defaultValue,
+  registerPatchCallback,
+  onSubmit,
+}: {
+  registerPatchCallback?: (callback: PatchCallback) => void;
+  onSubmit?: OnSubmit;
+  disabled: boolean;
+  defaultValue?: string | null;
+}) {
+  const [value, setValue] = useState(defaultValue || "");
+  const [loading, setLoading] = useState(false);
+  useEffect(() => {
+    setLoading(disabled);
+  }, [disabled]);
+
+  // 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<HTMLInputElement>(null);
+  useEffect(() => {
+    if (registerPatchCallback) {
+      registerPatchCallback(async (path) => {
+        return [
+          {
+            op: "replace",
+            path,
+            value: ref.current?.value || "",
+          },
+        ];
+      });
+    }
+  }, []);
+
+  return (
+    <div className="flex flex-col justify-between h-full gap-y-4">
+      <Input
+        ref={ref}
+        disabled={loading}
+        defaultValue={value ?? ""}
+        onChange={(e) => setValue(e.target.value)}
+      />
+      {onSubmit && (
+        <div>
+          {defaultValue !== value && (
+            <Button
+              disabled={loading}
+              onClick={() => {
+                setLoading(true);
+                onSubmit(async (path) => [
+                  {
+                    op: "replace",
+                    path,
+                    value: ref.current?.value || "",
+                  },
+                ]).finally(() => {
+                  setLoading(false);
+                });
+              }}
+            >
+              {loading ? "Saving..." : "Submit"}
+            </Button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}