@valbuild/ui 0.12.0 → 0.13.3

package/src/components/ValWindow.stories.tsx

@@ -0,0 +1,182 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { RichTextEditor } from "../exports";
+import { FormContainer } from "./forms/FormContainer";
+import { ImageForm } from "./forms/ImageForm";
+import { TextForm } from "./forms/TextForm";
+
+import { ValWindow } from "./ValWindow";
+
+const meta: Meta<typeof ValWindow> = { component: ValWindow };
+
+export default meta;
+type Story = StoryObj<typeof ValWindow>;
+
+const EXAMPLE_IMAGE =
+  "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAFgAWAAD/4QDkRXhpZgAASUkqAAgAAAAJABIBAwABAAAAAQAAABoBBQABAAAAegAAABsBBQABAAAAggAAACgBAwABAAAAAgAAADEBAgANAAAAigAAADIBAgAUAAAAmAAAAGmHBAABAAAAygAAAHySAgAHAAAArAAAAIaSAgAWAAAAtAAAAAAAAAAWAAAAAQAAABYAAAABAAAAR0lNUCAyLjEwLjM0AAAyMDIzOjA1OjI0IDE0OjQ3OjA1AE9wZW5BSQAATWFkZSB3aXRoIE9wZW5BSSBMYWJzAAEAAaADAAEAAAABAAAAAAAAAP/hDM9odHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDQuNC4wLUV4aXYyIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6R0lNUD0iaHR0cDovL3d3dy5naW1wLm9yZy94bXAvIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9ImdpbXA6ZG9jaWQ6Z2ltcDo1NDk5MWU4Yy01YjkxLTQwYWYtYjk4ZC00ZjEwMWYwY2QxZWQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Y2JmMjFlNjMtNGZiYi00MjI5LThlM2UtN2MzMWI0ZDNiNWFhIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6YzQ3ZWZmNDktNzg4Yy00NzdjLWJkNTEtZGM5YzJjYTY4NzBjIiBkYzpGb3JtYXQ9ImltYWdlL2pwZWciIEdJTVA6QVBJPSIyLjAiIEdJTVA6UGxhdGZvcm09IkxpbnV4IiBHSU1QOlRpbWVTdGFtcD0iMTY4NDkzMjQyNzk4NDA2MCIgR0lNUDpWZXJzaW9uPSIyLjEwLjM0IiB4bXA6Q3JlYXRvclRvb2w9IkdJTVAgMi4xMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyMzowNToyNFQxNDo0NzowNSswMjowMCIgeG1wOk1vZGlmeURhdGU9IjIwMjM6MDU6MjRUMTQ6NDc6MDUrMDI6MDAiPiA8eG1wTU06SGlzdG9yeT4gPHJkZjpTZXE+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6Y2hhbmdlZD0iLyIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDoxNjIyMWEyMS0wZmMzLTQ1NmEtOWZlOC1hOTAyMmY0NjBhOTEiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkdpbXAgMi4xMCAoTGludXgpIiBzdEV2dDp3aGVuPSIyMDIzLTA1LTI0VDE0OjQ3OjA3KzAyOjAwIi8+IDwvcmRmOlNlcT4gPC94bXBNTTpIaXN0b3J5PiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8P3hwYWNrZXQgZW5kPSJ3Ij8+/+ICsElDQ19QUk9GSUxFAAEBAAACoGxjbXMEQAAAbW50clJHQiBYWVogB+cABQAYAAwALQAJYWNzcEFQUEwAAAAAAAAA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";
+const EXAMPLE_TEXT = `
+Vi gjør mange ting sammen i Blank, men det vi lever av er å designe og utvikle digitale tjenester for kundene våre.
+
+Noen av selskapene vi jobber med er små, andre er store. Alle har de høye ambisjoner for sine digitale løsninger, og stiller høye krav til hvem de jobber med.
+
+Noen ganger starter vi nye, egne, selskaper også, mest fordi det er gøy (og fordi vi liker å bygge ting), men også fordi smarte folk har gode idéer som fortjener å bli realisert.
+Ting vi har bygd for kundene våre
+`;
+export const ShortText: Story = {
+  args: {
+    isInitialized: true,
+    children: (
+      <FormContainer
+        onSubmit={() => {
+          /* */
+        }}
+      >
+        <TextForm
+          name="/apps/blogs.0.title"
+          text="Hva skjer'a, Bagera?"
+          onChange={() => {
+            console.log("onChange");
+          }}
+        />
+      </FormContainer>
+    ),
+  },
+};
+export const LongText: Story = {
+  args: {
+    isInitialized: true,
+    children: (
+      <FormContainer
+        onSubmit={() => {
+          /* */
+        }}
+      >
+        <TextForm
+          name="/apps/blogs.0.title"
+          text={EXAMPLE_TEXT}
+          onChange={() => {
+            console.log("onChange");
+          }}
+        />
+      </FormContainer>
+    ),
+  },
+};
+
+export const RichText: Story = {
+  args: {
+    isInitialized: true,
+    children: (
+      <FormContainer
+        onSubmit={() => {
+          /* */
+        }}
+      >
+        <RichTextEditor
+          richtext={{
+            children: [
+              {
+                children: [
+                  {
+                    detail: 0,
+                    format: 0,
+                    mode: "normal",
+                    style: "",
+                    text: "Heading 1",
+                    type: "text",
+                    version: 1,
+                  },
+                ],
+                direction: "ltr",
+                format: "",
+                indent: 0,
+                type: "heading",
+                version: 1,
+                tag: "h1",
+              },
+            ],
+            direction: "ltr",
+            format: "",
+            indent: 0,
+            type: "root",
+            version: 1,
+          }}
+        />
+      </FormContainer>
+    ),
+  },
+};
+
+export const EmptyImage: Story = {
+  args: {
+    isInitialized: true,
+    children: (
+      <FormContainer
+        onSubmit={() => {
+          /* */
+        }}
+      >
+        <ImageForm
+          name="/apps/blogs.0.image"
+          error={null}
+          data={null}
+          onChange={() => {
+            console.log("onChange");
+          }}
+        />
+      </FormContainer>
+    ),
+  },
+};
+
+export const Image: Story = {
+  args: {
+    isInitialized: true,
+    children: (
+      <FormContainer
+        onSubmit={() => {
+          /* */
+        }}
+      >
+        <ImageForm
+          name="/apps/blogs.0.image"
+          error={null}
+          data={{
+            url: EXAMPLE_IMAGE,
+            metadata: {
+              width: 32,
+              height: 32,
+              sha256: "123",
+            },
+          }}
+          onChange={() => {
+            console.log("onChange");
+          }}
+        />
+      </FormContainer>
+    ),
+  },
+};
+
+export const ImageError: Story = {
+  args: {
+    isInitialized: true,
+    children: (
+      <FormContainer
+        onSubmit={() => {
+          /* */
+        }}
+      >
+        <ImageForm
+          name="/apps/blogs.0.image"
+          error={"invalid-file"}
+          data={{
+            url: EXAMPLE_IMAGE,
+          }}
+          onChange={() => {
+            console.log("onChange");
+          }}
+        />
+      </FormContainer>
+    ),
+  },
+};

package/src/components/ValWindow.tsx

@@ -0,0 +1,192 @@
+import React, { useEffect, useRef, useState } from "react";
+import { AlignJustify, X } from "react-feather";
+import classNames from "classnames";
+
+export type ValWindowProps = {
+  children: React.ReactNode;
+  onClose: () => void;
+  position?: { left: number; top: number };
+  isInitialized?: true;
+};
+
+export function ValWindow({
+  position,
+  isInitialized: isInitializedProp,
+  onClose,
+  children,
+}: ValWindowProps): React.ReactElement {
+  const [draggedPosition, isInitialized, dragRef, onMouseDownDrag] = useDrag({
+    position,
+  });
+  useEffect(() => {
+    const closeOnEscape = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    };
+    document.addEventListener("keyup", closeOnEscape);
+    return () => {
+      document.removeEventListener("keyup", closeOnEscape);
+    };
+  }, []);
+
+  //
+  const [size, resizeRef, onMouseDownResize] = useResize();
+  return (
+    <div
+      className={classNames(
+        "absolute h-[100svh] w-full tablet:w-auto tablet:h-auto tablet:min-h-fit tablet:rounded bg-base drop-shadow-2xl min-w-[320px] transition-opacity duration-300 delay-75 max-w-full",
+        {
+          "opacity-0": !(isInitialized || isInitializedProp),
+          "opacity-100": isInitialized || isInitializedProp,
+        }
+      )}
+      ref={resizeRef}
+      style={{
+        left: draggedPosition.left,
+        top: draggedPosition.top,
+        width: size?.width,
+        height: size?.height,
+      }}
+    >
+      <div
+        ref={dragRef}
+        className="relative flex justify-center px-2 pt-2 text-primary pb-[16px]"
+      >
+        <AlignJustify
+          size={16}
+          className="hidden w-full cursor-grab tablet:block"
+          onMouseDown={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            onMouseDownDrag();
+          }}
+        />
+        <button
+          className="absolute top-0 right-0 px-4 py-2 focus:outline-none focus-visible:outline-highlight"
+          onClick={onClose}
+        >
+          <X size={16} />
+        </button>
+      </div>
+      {children}
+      <div
+        className="absolute bottom-0 right-0 hidden ml-auto select-none tablet:block text-border cursor-nwse-resize"
+        style={{
+          height: 16,
+          width: 16,
+        }}
+        onMouseDown={onMouseDownResize}
+      >
+        <svg
+          height="18"
+          viewBox="0 0 18 18"
+          width="18"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="m14.228 16.227a1 1 0 0 1 -.707-1.707l1-1a1 1 0 0 1 1.416 1.414l-1 1a1 1 0 0 1 -.707.293zm-5.638 0a1 1 0 0 1 -.707-1.707l6.638-6.638a1 1 0 0 1 1.416 1.414l-6.638 6.638a1 1 0 0 1 -.707.293zm-5.84 0a1 1 0 0 1 -.707-1.707l12.477-12.477a1 1 0 1 1 1.415 1.414l-12.478 12.477a1 1 0 0 1 -.707.293z"
+            fill="currentColor"
+          />
+        </svg>
+      </div>
+    </div>
+  );
+}
+
+function useResize() {
+  const ref = useRef<HTMLDivElement>(null);
+  const [size, setSize] = useState<{ height: number; width: number }>();
+
+  const handler = (mouseDownEvent: React.MouseEvent) => {
+    const startSize = ref.current?.getBoundingClientRect();
+
+    const startPosition = { x: mouseDownEvent.pageX, y: mouseDownEvent.pageY };
+    function onMouseMove(mouseMoveEvent: MouseEvent) {
+      if (startSize) {
+        const nextWidth =
+          startSize.width - startPosition.x + mouseMoveEvent.pageX;
+        const nextHeight =
+          startSize.height - startPosition.y + mouseMoveEvent.pageY;
+        setSize({
+          width: nextWidth,
+          height: nextHeight,
+        });
+      }
+    }
+    function onMouseUp() {
+      document.body.removeEventListener("mousemove", onMouseMove);
+    }
+    document.body.addEventListener("mousemove", onMouseMove);
+    document.body.addEventListener("mouseup", onMouseUp, { once: true });
+  };
+  return [size, ref, handler] as const;
+}
+
+function useDrag({
+  position: initPosition,
+}: {
+  position?: { left: number; top: number };
+}) {
+  const [position, setPosition] = useState({ left: 0, top: 0 });
+  useEffect(() => {
+    if (initPosition) {
+      setPosition({
+        left:
+          initPosition.left -
+          (ref?.current?.getBoundingClientRect()?.width || 0) / 2,
+        top: initPosition.top - 16,
+      });
+    }
+  }, [initPosition]);
+
+  const [mouseDown, setMouseDown] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const onMouseUp = () => {
+      setMouseDown(false);
+    };
+    const onMouseMove = (e: MouseEvent) => {
+      if (mouseDown) {
+        e.preventDefault();
+        e.stopPropagation();
+        const top =
+          -((ref?.current?.getBoundingClientRect()?.height || 0) / 2) +
+          +e.pageY;
+
+        setPosition({
+          left:
+            -((ref?.current?.getBoundingClientRect()?.width || 0) / 2) +
+            e.pageX,
+          top: top < 0 ? 0 : top,
+        });
+      }
+    };
+
+    document.addEventListener("mouseup", onMouseUp);
+    document.addEventListener("mousemove", onMouseMove);
+    return () => {
+      document.removeEventListener("mouseup", onMouseUp);
+      document.removeEventListener("mousemove", onMouseMove);
+    };
+  }, [mouseDown]);
+
+  // TODO: rename hook from useDrag to usePosition or something since we also check for screen width here?
+  useEffect(() => {
+    const onResize = () => {
+      if (window.screen.width < 640) {
+        setPosition({
+          left: 0,
+          top: 0,
+        });
+      }
+    };
+    window.addEventListener("resize", onResize);
+    return () => {
+      window.removeEventListener("resize", onResize);
+    };
+  }, []);
+  const handleMouseDown = () => setMouseDown(true);
+  const isInitialized = !!ref?.current?.getBoundingClientRect()?.width;
+  return [position, isInitialized, ref, handleMouseDown] as const;
+}

package/src/components/forms/Form.tsx

@@ -0,0 +1,122 @@
+import { RichText } 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, TextForm } from "./TextForm";
+
+export type Inputs = {
+  [path: string]:
+    | { status: "requested" }
+    | {
+        status: "completed";
+        type: "text";
+        data: TextData;
+      }
+    | { status: "completed"; type: "image"; data: ImageData }
+    | { status: "completed"; type: "richtext"; data: RichText };
+};
+
+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" && (
+              <TextForm
+                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

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