@valbuild/ui 0.26.0 → 0.27.0

package/src/components/dashboard/ValTreeNavigator.tsx

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

@@ -1,126 +0,0 @@
-import { AnyRichTextOptions, RichTextSource } from "@valbuild/core";
-import { LexicalEditor } from "lexical";
-import { useEffect, useState } from "react";
-import { RichTextEditor } from "../RichTextEditor/RichTextEditor";
-import { FormContainer } from "./FormContainer";
-import { ImageForm, ImageData } from "./ImageForm";
-import { TextData, TextArea } from "./TextArea";
-
-export type Inputs = {
-  [path: string]:
-    | { status: "requested" }
-    | {
-        status: "completed";
-        type: "text";
-        data: TextData;
-      }
-    | { status: "completed"; type: "image"; data: ImageData }
-    | {
-        status: "completed";
-        type: "richtext";
-        data: RichTextSource<AnyRichTextOptions>;
-      };
-};
-
-export type FormProps = {
-  onSubmit: (nextInputs: Inputs) => void;
-  inputs: Inputs;
-};
-
-export function Form({ onSubmit, inputs }: FormProps): React.ReactElement {
-  const [currentInputs, setCurrentInputs] = useState<Inputs>();
-  const [richTextEditor, setRichTextEditor] = useState<{
-    [path: string]: LexicalEditor;
-  }>();
-
-  useEffect(() => {
-    setCurrentInputs(inputs);
-  }, [inputs]);
-
-  return (
-    <FormContainer
-      onSubmit={() => {
-        if (currentInputs) {
-          onSubmit(
-            Object.fromEntries(
-              Object.entries(currentInputs).map(([path, input]) => {
-                if (input.status === "completed" && input.type === "richtext") {
-                  if (!richTextEditor) {
-                    throw Error(
-                      "Cannot save rich text - editor not initialized"
-                    );
-                  }
-                  return [
-                    path,
-                    {
-                      status: "completed",
-                      type: "richtext",
-                      data: richTextEditor[path].getEditorState().toJSON()
-                        ?.root,
-                    },
-                  ];
-                }
-                return [path, input];
-              })
-            )
-          );
-        }
-      }}
-    >
-      {currentInputs &&
-        Object.entries(currentInputs).map(([path, input]) => (
-          <div key={path}>
-            {input.status === "requested" && (
-              <div className="p-2 text-center text-primary">Loading...</div>
-            )}
-            {input.status === "completed" && input.type === "image" && (
-              <ImageForm
-                name={path}
-                data={input.data}
-                onChange={(data) => {
-                  if (data.value) {
-                    setCurrentInputs({
-                      ...currentInputs,
-                      [path]: {
-                        status: "completed",
-                        type: "image",
-                        data: data.value,
-                      },
-                    });
-                  }
-                }}
-                error={null}
-              />
-            )}
-            {input.status === "completed" && input.type === "text" && (
-              <TextArea
-                name={path}
-                text={input.data}
-                onChange={(data) => {
-                  setCurrentInputs({
-                    ...currentInputs,
-                    [path]: {
-                      status: "completed",
-                      type: "text",
-                      data: data,
-                    },
-                  });
-                }}
-              />
-            )}
-            {input.status === "completed" && input.type === "richtext" && (
-              <RichTextEditor
-                richtext={input.data}
-                onEditor={(editor) => {
-                  setRichTextEditor({
-                    ...richTextEditor,
-                    [path]: editor,
-                  });
-                }}
-              />
-            )}
-          </div>
-        ))}
-    </FormContainer>
-  );
-}

package/src/components/forms/FormContainer.tsx

@@ -1,24 +0,0 @@
-import { PrimaryButton } from "../Button";
-
-export function FormContainer({
-  children,
-  onSubmit,
-}: {
-  children: React.ReactNode;
-  onSubmit: () => void;
-}) {
-  return (
-    <form
-      className="flex flex-col justify-between w-full px-4 py-2"
-      onSubmit={(ev) => {
-        ev.preventDefault();
-        onSubmit();
-      }}
-    >
-      {children}
-      <div className="flex justify-end">
-        <PrimaryButton>Save</PrimaryButton>
-      </div>
-    </form>
-  );
-}

package/src/components/forms/ImageForm.tsx

@@ -1,195 +0,0 @@
-import { useEffect, useState } from "react";
-import { UploadCloud } from "react-feather";
-import { ErrorText } from "../ErrorText";
-
-type Error = "invalid-file" | "file-too-large";
-export type ImageData =
-  | {
-      src: string;
-      addMetadata: boolean;
-      metadata?: { width: number; height: number; sha256: string };
-    }
-  | {
-      url: string;
-      metadata?: { width: number; height: number; sha256: string };
-    }
-  | null;
-export type ImageInputProps = {
-  name: string;
-  data: ImageData;
-  maxSize?: number;
-  error: Error | null;
-  onChange: (
-    result: { error: null; value: ImageData } | { error: Error; value: null }
-  ) => void;
-};
-
-const textEncoder = new TextEncoder();
-// TODO: handle hashes some other way
-const getSHA256Hash = async (bits: Uint8Array) => {
-  const hashBuffer = await window.crypto.subtle.digest("SHA-256", bits);
-  const hashArray = Array.from(new Uint8Array(hashBuffer));
-  const hash = hashArray
-    .map((item) => item.toString(16).padStart(2, "0"))
-    .join("");
-  return hash;
-};
-
-export function ImageForm({
-  name,
-  data: data,
-  maxSize,
-  error,
-  onChange,
-}: ImageInputProps) {
-  const [currentData, setCurrentData] = useState<ImageData>(null);
-  useEffect(() => {
-    setCurrentData(data);
-  }, [data]);
-  const [currentError, setCurrentError] = useState<Error | null>(null);
-  useEffect(() => {
-    setCurrentError(error);
-  }, [data]);
-
-  // TODO: we should update the Input type - we should never have a url here?
-  const src =
-    (currentData &&
-      (("src" in currentData && currentData.src) ||
-        ("url" in currentData && currentData.url))) ||
-    undefined;
-
-  return (
-    <div className="w-full py-2 max-w-[90vw] object-contain">
-      <label htmlFor={name}>
-        <div className="flex items-center justify-center w-full h-full min-h-[200px] cursor-pointer">
-          {currentData !== null && (
-            <img className="object-contain max-h-[300px]" src={src} />
-          )}
-          {!src && <UploadCloud size={24} className="text-primary" />}
-        </div>
-        <input
-          hidden
-          type="file"
-          id={name}
-          name={name}
-          onChange={(e) => {
-            const file = e.target.files?.[0];
-            if (file) {
-              if (maxSize && file.size > maxSize) {
-                onChange({ error: "file-too-large", value: null });
-                return;
-              }
-              const reader = new FileReader();
-              reader.addEventListener("load", () => {
-                const result = reader.result;
-                if (typeof result === "string") {
-                  const image = new Image();
-                  image.onload = async () => {
-                    const nextSource = {
-                      src: result,
-                      metadata: {
-                        width: image.naturalWidth,
-                        height: image.naturalHeight,
-                        sha256: await getSHA256Hash(textEncoder.encode(result)),
-                      },
-                      addMetadata: !currentData?.metadata,
-                    };
-                    setCurrentData(nextSource);
-                    setCurrentError(null);
-                    onChange({
-                      error: null,
-                      value: nextSource,
-                    });
-                  };
-                  image.src = result;
-                } else {
-                  onChange({ error: "invalid-file", value: null });
-                }
-              });
-              reader.readAsDataURL(file);
-            }
-          }}
-        />
-      </label>
-      {currentData &&
-        (!currentData.metadata ||
-          typeof currentData.metadata.height === "undefined" ||
-          typeof currentData.metadata.width === "undefined" ||
-          typeof currentData.metadata.sha256 === "undefined") && (
-          <ErrorText>
-            <div className="">
-              <div>Validation failed: missing metadata</div>
-              <button
-                className="px-4 py-2 border border-dark-gray"
-                onClick={async (ev) => {
-                  ev.preventDefault();
-
-                  const image = new Image();
-                  image.onload = async () => {
-                    const nextSource = {
-                      src: image.src,
-                      metadata: {
-                        width: image.naturalWidth,
-                        height: image.naturalHeight,
-                        sha256: await getSHA256Hash(
-                          textEncoder.encode(image.src)
-                        ),
-                      },
-                      addMetadata: !currentData?.metadata,
-                    };
-                    setCurrentData(nextSource);
-                    setCurrentError(null);
-                    onChange({
-                      error: null,
-                      value: nextSource,
-                    });
-                  };
-
-                  if ("url" in currentData) {
-                    const src = await fetch(currentData.url)
-                      .then((response) => response.blob())
-                      .then((blob) => {
-                        return new Promise<string>((resolve, reject) => {
-                          const reader = new FileReader();
-                          reader.onload = function () {
-                            if (typeof this.result !== "string") {
-                              return reject(
-                                Error(
-                                  `Could not read file from url: ${currentData.url}`
-                                )
-                              );
-                            }
-                            resolve(this.result);
-                          }; // <--- `this.result` contains a base64 data URI
-                          reader.readAsDataURL(blob);
-                        });
-                      });
-                    image.src = src;
-                  } else {
-                    image.src = currentData.src;
-                  }
-                }}
-              >
-                Fix
-              </button>
-            </div>
-          </ErrorText>
-        )}
-      {currentData?.metadata && (
-        <div className="ml-auto text-primary">
-          Dimensions: {currentData.metadata.width}x{currentData.metadata.height}
-        </div>
-      )}
-      {currentError && <ImageError error={currentError} />}
-    </div>
-  );
-}
-
-function ImageError({ error }: { error: Error }): React.ReactElement | null {
-  if (error === "invalid-file") {
-    return <ErrorText>Invalid file</ErrorText>;
-  } else if (error === "file-too-large") {
-    return <ErrorText>File is too large</ErrorText>;
-  }
-  return null;
-}

package/src/components/forms/TextArea.tsx

@@ -1,24 +0,0 @@
-export type TextData = string;
-export type TextInputProps = {
-  name?: string;
-  text: TextData;
-  disabled?: boolean;
-  onChange: (value: string) => void;
-};
-
-export function TextArea({ name, disabled, text, onChange }: TextInputProps) {
-  return (
-    <div
-      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="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)}
-      />
-    </div>
-  );
-}

package/src/components/ui/accordion.tsx

@@ -1,58 +0,0 @@
-import * as React from "react";
-import * as AccordionPrimitive from "@radix-ui/react-accordion";
-import { ChevronDown } from "lucide-react";
-
-import { cn } from "../../lib/utils";
-
-const Accordion = AccordionPrimitive.Root;
-
-const AccordionItem = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <AccordionPrimitive.Item
-    ref={ref}
-    className={cn("border-b", className)}
-    {...props}
-  />
-));
-AccordionItem.displayName = "AccordionItem";
-
-const AccordionTrigger = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Header className="flex">
-    <AccordionPrimitive.Trigger
-      ref={ref}
-      className={cn(
-        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronDown className="w-4 h-4 transition-transform duration-200 shrink-0" />
-    </AccordionPrimitive.Trigger>
-  </AccordionPrimitive.Header>
-));
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
-
-const AccordionContent = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Content
-    ref={ref}
-    className={cn(
-      "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
-      className
-    )}
-    {...props}
-  >
-    <div className="pt-0 pb-4">{children}</div>
-  </AccordionPrimitive.Content>
-));
-AccordionContent.displayName = AccordionPrimitive.Content.displayName;
-
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };