@valbuild/ui 0.13.4 → 0.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@valbuild/ui",
-  "version": "0.13.4",
+  "version": "0.17.0",
   "sideEffects": false,
   "scripts": {
     "typecheck": "tsc --noEmit",
@@ -17,11 +17,14 @@
     "@types/express": "^4.17.17",
     "@types/react": "^18.0.26",
     "classnames": "^2.3.2",
+    "esbuild": "^0.17.19",
     "lexical": "^0.10.0",
     "react-feather": "^2.0.10",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-typescript2": "^0.34.1"
+    "rollup-plugin-typescript2": "^0.34.1",
+    "zod": "^3.22.2",
+    "@valbuild/core": "~0.17.0"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "^7.0.12",

package/src/assets/icons/ImageIcon.tsx

@@ -3,17 +3,25 @@ import { FC } from "react";
 const ImageIcon: FC<{ className?: string }> = ({ className }) => {
   return (
     <svg
+      width="9"
+      height="10"
+      viewBox="0 0 9 10"
+      fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 32 32"
       className={className}
-      width={25}
-      height={25}
-      strokeWidth="4"
     >
-      <g>
-        <path d="M25,2H7A5,5,0,0,0,2,7V25a5,5,0,0,0,5,5H25a5,5,0,0,0,5-5V7A5,5,0,0,0,25,2ZM7,4H25a3,3,0,0,1,3,3v5.59l-1.88-1.88a3,3,0,0,0-4.24,0l-7.95,8-3-2.42a3,3,0,0,0-3.8,0L4,18.86V7A3,3,0,0,1,7,4ZM25,28H7a3,3,0,0,1-3-3V21.47l4.38-3.66a1,1,0,0,1,1.27,0l3.73,3a1,1,0,0,0,1.33-.07l8.58-8.59a1,1,0,0,1,1.42,0L28,15.41V25A3,3,0,0,1,25,28Z" />
-        <path d="M10,13a3,3,0,1,0-3-3A3,3,0,0,0,10,13Zm0-4a1,1,0,1,1-1,1A1,1,0,0,1,10,9Z" />
+      <g clipPath="url(#clip0_1225_1638)">
+        <rect y="0.5" width="9" height="9" />
+
+        <path d="M0 7L8.5 5" stroke="currentColor" />
+        <circle cx="3" cy="3.5" r="1" fill="currentColor" />
       </g>
+      <rect x="0.5" y="1" width="8" height="8" stroke="currentColor" />
+      <defs>
+        <clipPath id="clip0_1225_1638">
+          <rect y="0.5" width="9" height="9" fill="white" />
+        </clipPath>
+      </defs>
     </svg>
   );
 };

package/src/assets/icons/Section.tsx

@@ -0,0 +1,41 @@
+import { FC } from "react";
+
+const Section: FC<{ className?: string }> = ({ className }) => {
+  return (
+    <svg
+      width="9"
+      height="10"
+      viewBox="0 0 9 10"
+      className={className}
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath="url(#clip0_1222_1618)">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M9 1.5H0V0.5H9V1.5Z"
+          fill="currentColor"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M9 9.5H0V8.5H9V9.5Z"
+          fill="currentColor"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_1222_1618">
+          <rect
+            width="9"
+            height="9"
+            fill="white"
+            transform="translate(0 0.5)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export default Section;

package/src/assets/icons/TextIcon.tsx

@@ -0,0 +1,20 @@
+import { FC } from "react";
+
+const TextIcon: FC<{ className?: string }> = ({ className }) => {
+  return (
+    <svg
+      width="9"
+      height="10"
+      viewBox="0 0 9 10"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g clipPath="url(#clip0_1229_1625)">
+        <path d="M0.0145513 0.5H8.98545L9 3.18569H8.57074C8.43007 2.2276 8.02749 1.57948 7.36298 1.24133C6.98949 1.05491 6.43169 0.953035 5.68957 0.935694V7.94581C5.68957 8.43569 5.78416 8.76084 5.97332 8.92124C6.16734 9.08165 6.5675 9.16185 7.17381 9.16185V9.5H1.86257V9.16185C2.44462 9.16185 2.83023 9.08165 3.0194 8.92124C3.21342 8.7565 3.31043 8.43136 3.31043 7.94581V0.935694C2.58286 0.953035 2.02506 1.05491 1.63703 1.24133C0.92401 1.58815 0.521423 2.23627 0.429264 3.18569H0L0.0145513 0.5Z" />
+      </g>
+    </svg>
+  );
+};
+
+export default TextIcon;

package/src/components/Button.tsx

@@ -9,6 +9,24 @@ export interface ButtonProps
   disabled?: boolean;
   tooltip?: string;
 }
+
+export function PrimaryButton({
+  children,
+  onClick,
+}: {
+  children: React.ReactNode;
+  onClick?: () => void;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      className="px-4 py-[2px] font-serif border rounded-sm border-border bg-fill text-primary hover:dark:bg-yellow hover:bg-warm-black hover:dark:text-dark-gray hover:text-white focus-visible:border-highlight focus:outline-none"
+    >
+      {children}
+    </button>
+  );
+}
+
 const Button: FC<ButtonProps> = ({
   variant = "primary",
   onClick,
@@ -49,10 +67,3 @@ const Button: FC<ButtonProps> = ({
 };
 
 export default Button;
-export function PrimaryButton({ children }: { children: React.ReactNode }) {
-  return (
-    <button className="px-4 py-[2px] font-serif border rounded-sm border-border bg-fill text-primary hover:dark:bg-yellow hover:bg-warm-black hover:dark:text-dark-gray hover:text-white focus-visible:border-highlight focus:outline-none">
-      {children}
-    </button>
-  );
-}

package/src/components/DraggableList.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { DraggableList } from "./DraggableList";
+
+const meta: Meta<typeof DraggableList> = { component: DraggableList };
+
+export default meta;
+type Story = StoryObj<typeof DraggableList>;
+
+export const Default: Story = {
+  args: {
+    children: [
+      <div className="p-4 bg-white w-fit">test 1</div>,
+      <div className="p-4 bg-white w-fit">test 2</div>,
+      <div className="p-4 bg-white w-fit">test 3</div>,
+      <div className="p-4 bg-white w-fit">test 4</div>,
+      <div className="p-4 bg-white w-fit">test 5</div>,
+    ],
+  },
+};

package/src/components/DraggableList.tsx

@@ -0,0 +1,95 @@
+import classNames from "classnames";
+import { createRef, useEffect, useState } from "react";
+
+export type DraggableResult = {
+  from: number;
+  to: number;
+};
+
+export type DraggableListProps = {
+  children: React.ReactNode | React.ReactNode[];
+  onDragEnd?: (result: DraggableResult) => void;
+};
+
+export const DraggableList = ({
+  children: rawChildren,
+  onDragEnd,
+}: DraggableListProps): React.ReactElement => {
+  const [from, setFrom] = useState<number | undefined>();
+  const [dragOver, setDragOver] = useState<number | undefined>();
+  const [children, setChildren] = useState<React.ReactNode[]>([]);
+  const [dropHappened, setDropHappened] = useState<boolean>(false);
+  useEffect(() => {
+    setChildren(Array.isArray(rawChildren) ? rawChildren : [rawChildren]);
+  }, [rawChildren]);
+
+  return (
+    <div className="bg-transparent">
+      {[...children, <div className="h-[1px]"></div>].map((child, idx) => {
+        const ref = createRef<HTMLDivElement>();
+        return (
+          <div key={idx} className="relative">
+            {dragOver === idx && (
+              <div className="flex items-center">
+                <div className="border-[2px] border-yellow w-3 h-3 rounded-full" />
+                <div className="bg-yellow border-yellow w-full h-[1px]" />
+                <div className="border-[2px] border-yellow w-3 h-3 rounded-full" />
+              </div>
+            )}
+            <div
+              ref={ref}
+              draggable
+              className={classNames("cursor-grab transition-opacity")}
+              onDragStart={(ev) => {
+                ev.dataTransfer.setDragImage(new Image(), 0, 0);
+                setFrom(idx);
+              }}
+              onDragOver={(ev) => {
+                ev.preventDefault();
+                setDragOver(idx);
+              }}
+              onDragEnd={(ev) => {
+                ev.preventDefault();
+                if (
+                  from !== undefined &&
+                  !dropHappened &&
+                  dragOver !== undefined
+                ) {
+                  const copy = [...children];
+                  const end = Math.min(dragOver, children.length - 1);
+                  copy.splice(from, 1);
+                  copy.splice(end, 0, children[from]);
+                  setChildren(copy);
+                  if (onDragEnd) {
+                    onDragEnd({ from: from, to: end });
+                  }
+                }
+                setDropHappened(false);
+                setFrom(undefined);
+                setDragOver(undefined);
+              }}
+              onDrop={(ev) => {
+                ev.preventDefault();
+                if (from !== undefined) {
+                  const copy = [...children];
+                  copy.splice(from, 1);
+                  const end = Math.min(idx, children.length - 1);
+                  copy.splice(end, 0, children[from]);
+                  if (onDragEnd) {
+                    onDragEnd({ from: from, to: end });
+                  }
+                  setChildren(copy);
+                  setDragOver(undefined);
+                  setFrom(undefined);
+                  setDropHappened(true);
+                }
+              }}
+            >
+              {child}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};

package/src/components/Dropdown.tsx

@@ -7,6 +7,7 @@ export interface DropdownProps {
   label: string;
   onChange: (selectedOption: string) => void;
   icon?: React.ReactElement<SVGProps<SVGSVGElement>>;
+  variant?: "primary" | "secondary";
 }
 
 const Dropdown: React.FC<DropdownProps> = ({
@@ -14,6 +15,7 @@ const Dropdown: React.FC<DropdownProps> = ({
   onChange,
   label,
   icon,
+  // variant = "primary",
 }) => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const dropdownRef = useRef<HTMLDivElement>(null);

package/src/components/ExpandLogo.tsx

@@ -0,0 +1,72 @@
+import { FC } from "react";
+
+const ExpandLogo: FC<{ expanded: boolean; className?: string }> = ({
+  expanded,
+  className,
+}) => {
+  return (
+    <div>
+      {expanded ? (
+        <svg
+          width="11"
+          height="11"
+          viewBox="0 0 11 11"
+          xmlns="http://www.w3.org/2000/svg"
+          className={className}
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M0.606061 9.39394V6.25H0V10H3.75V9.39394H0.606061Z"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M9.4319 0.644146L9.4319 3.78809L10.038 3.78809L10.038 0.0380859L6.28796 0.0380863L6.28796 0.644146L9.4319 0.644146Z"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M3.11371e-05 9.59583L3.34602 6.24995L3.78796 6.6919L0.441965 10.0378L3.11371e-05 9.59583Z"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M10.0379 0.441766L6.69194 3.78764L6.25001 3.3457L9.596 -0.000183055L10.0379 0.441766Z"
+          />
+        </svg>
+      ) : (
+        <svg
+          width="11"
+          height="11"
+          viewBox="0 0 11 11"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          className={className}
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M3.14394 6.85606L3.14394 10L3.75 10L3.75 6.25L-3.27835e-07 6.25L-2.74852e-07 6.85606L3.14394 6.85606Z"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M6.89402 3.18203V0.0380859L6.28796 0.0380859L6.28796 3.78809L10.038 3.78809V3.18203L6.89402 3.18203Z"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M3.11371e-05 9.59583L3.34602 6.24995L3.78796 6.6919L0.441965 10.0378L3.11371e-05 9.59583Z"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M10.0379 0.441766L6.69194 3.78764L6.25001 3.3457L9.596 -0.000183055L10.0379 0.441766Z"
+          />
+        </svg>
+      )}
+    </div>
+  );
+};
+export default ExpandLogo;

package/src/components/RichTextEditor/Plugins/Toolbar.tsx

@@ -284,22 +284,7 @@ const Toolbar: FC<ToolbarSettingsProps> = ({
   };
 
   return (
-    <div className="flex flex-row items-center gap-6 p-2 overflow-scroll">
-      {/* <div className="flex flex-row gap-2">
-        <button className="hidden w-0 h-0 " disabled></button>
-        <Button
-          icon={<Undo />}
-          onClick={() => {
-            editor.dispatchCommand(UNDO_COMMAND, undefined);
-          }}
-        ></Button>
-        <Button
-          icon={<Undo className="transform -scale-x-100" />}
-          onClick={() => {
-            editor.dispatchCommand(REDO_COMMAND, undefined);
-          }}
-        />
-      </div> */}
+    <div className="flex flex-row items-center gap-6 p-2 overflow-clip">
       <div className="flex flex-row gap-2">
         <Dropdown
           options={Object.values(blockTypes)}

package/src/components/RichTextEditor/RichTextEditor.tsx

@@ -152,13 +152,13 @@ export const RichTextEditor: FC<RichTextEditorProps> = ({
     onError,
   };
   return (
-    <div className=" relative bg-base min-h-[200px] mt-2 border border-highlight rounded">
+    <div className=" relative bg-base min-h-[200px] mt-2 border border-highlight rounded overflow-none resize">
       <LexicalComposer initialConfig={initialConfig}>
         <Toolbar onEditor={onEditor} />
         <ImagesPlugin />
         <RichTextPlugin
           contentEditable={
-            <LexicalContentEditable className="relative bg-fill flex flex-col h-full w-full min-h-[200px] text-primary outline-none" />
+            <LexicalContentEditable className="relative bg-fill flex flex-col h-full w-full min-h-[200px] min-w-[566px] text-primary outline-none overflow-auto resize" />
           }
           placeholder={
             <div className="absolute top-[calc(58px+1rem)] left-4 text-base/25 text-primary">

package/src/components/User.tsx

@@ -0,0 +1,17 @@
+import { FC } from "react";
+
+const User: FC<{ name: string }> = ({ name }) => {
+  return (
+    <div className="flex flex-row items-center gap-2">
+      <div className="w-[32px] h-[32px] rounded-full bg-light-gray flex justify-center items-center">
+        {name
+          .split(" ")
+          .map((name) => name.charAt(0))
+          .join("")}
+      </div>
+      <div className="text-white">{name}</div>
+    </div>
+  );
+};
+
+export default User;

package/src/components/ValMenu.tsx

@@ -0,0 +1,40 @@
+import { Edit2, Edit3, Moon, Power, Sun } from "react-feather";
+import { useValOverlayContext } from "./ValOverlayContext";
+import { ValApi } from "@valbuild/core";
+
+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"
+        onClick={() => {
+          setEditMode((prev) => (prev === "off" ? "hover" : "off"));
+        }}
+      >
+        <div className="h-[24px] w-[24px] flex justify-center items-center">
+          {editMode === "off" ? <Edit2 size={18} /> : <Edit3 size={18} />}
+        </div>
+      </button>
+      <button
+        className="p-1 border rounded-full shadow bg-base border-highlight"
+        onClick={() => {
+          setTheme(theme === "dark" ? "light" : "dark");
+        }}
+      >
+        <div className="h-[24px] w-[24px] flex justify-center items-center">
+          {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()}
+      >
+        <div className="h-[24px] w-[24px] flex justify-center items-center">
+          <Power size={18} />
+        </div>
+      </a>
+    </div>
+  );
+}