@valbuild/ui 0.12.0 → 0.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@valbuild/ui",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "sideEffects": false,
   "scripts": {
     "typecheck": "tsc --noEmit",

package/src/assets/icons/Bold.tsx

@@ -0,0 +1,23 @@
+import { FC } from "react";
+
+const Bold: FC<{ className?: string }> = ({ className }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      width={25}
+      height={25}
+    >
+      <path d="M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"></path>
+      <path d="M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"></path>
+    </svg>
+  );
+};
+
+export default Bold;

package/src/assets/icons/Chevron.tsx

@@ -0,0 +1,28 @@
+import { FC } from "react";
+
+const Chevron: FC<{ className?: string }> = ({ className }) => {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 12 12"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M3.70733 1.00015L8.7784 6.07121L8.07129 6.77832L3.00022 1.70725L3.70733 1.00015Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M3.00015 10.4709L8.07121 5.39983L8.77832 6.10693L3.70725 11.178L3.00015 10.4709Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default Chevron;

package/src/assets/icons/FontColor.tsx

@@ -0,0 +1,30 @@
+import { FC } from "react";
+
+const FontColor: FC<{ className?: string }> = ({ className }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      width={25}
+      height={25}
+    >
+      <g>
+        <path d="M29,27H3c-0.6,0-1,0.4-1,1s0.4,1,1,1h26c0.6,0,1-0.4,1-1S29.6,27,29,27z" />
+        <path
+          d="M6.4,16.7C6.4,16.7,6.4,16.7,6.4,16.7l7,7c0.2,0.2,0.4,0.3,0.7,0.3s0.5-0.1,0.7-0.3l6.9-6.9c0,0,0,0,0,0l1.5-1.5
+		c0.4-0.4,0.4-1,0-1.4l-8.9-9c0,0,0,0,0,0l-2.5-2.5c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l1.8,1.8l-7.7,7.7c-0.4,0.4-0.4,1,0,1.4
+		L6.4,16.7z M13.6,7L14,7.5c0,0,0,0,0,0l7,7L20.6,15H7.5l-1-1L13.6,7z"
+        />
+        <path d="M25,24c1.7,0,3-1.3,3-3c0-1.4-1.8-3.2-2.3-3.7c-0.4-0.4-1-0.4-1.4,0C23.8,17.8,22,19.6,22,21C22,22.7,23.3,24,25,24z" />
+      </g>
+    </svg>
+  );
+};
+
+export default FontColor;

package/src/assets/icons/ImageIcon.tsx

@@ -0,0 +1,21 @@
+import { FC } from "react";
+
+const ImageIcon: FC<{ className?: string }> = ({ className }) => {
+  return (
+    <svg
+      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>
+    </svg>
+  );
+};
+
+export default ImageIcon;

package/src/assets/icons/Italic.tsx

@@ -0,0 +1,24 @@
+import { FC } from "react";
+
+const Italic: FC<{ className?: string }> = ({ className }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      width={25}
+      height={25}
+    >
+      <line x1="19" y1="4" x2="10" y2="4"></line>
+      <line x1="14" y1="20" x2="5" y2="20"></line>
+      <line x1="15" y1="4" x2="9" y2="20"></line>
+    </svg>
+  );
+};
+
+export default Italic;

package/src/assets/icons/Strikethrough.tsx

@@ -0,0 +1,22 @@
+import { FC } from "react";
+
+const Strikethrough: FC<{ className?: string }> = ({ className }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      strokeWidth="1"
+      className={className}
+      width={25}
+      height={25}
+    >
+      <path
+        fillRule="evenodd"
+        d="M13,15 L13,21 C13,21.5522847 12.5522847,22 12,22 C11.4477153,22 11,21.5522847 11,21 L11,15 L13,15 Z M3,13 C2.44771525,13 2,12.5522847 2,12 C2,11.4477153 2.44771525,11 3,11 L21,11 C21.5522847,11 22,11.4477153 22,12 C22,12.5522847 21.5522847,13 21,13 L3,13 Z M19,2 C19.5522847,2 20,2.44771525 20,3 C20,3.55228475 19.5522847,4 19,4 L13,4 L13,9 L11,9 L11,4 L5,4 C4.44771525,4 4,3.55228475 4,3 C4,2.44771525 4.44771525,2 5,2 L19,2 Z"
+      />
+    </svg>
+  );
+};
+
+export default Strikethrough;

package/src/assets/icons/Underline.tsx

@@ -0,0 +1,22 @@
+import { FC } from "react";
+
+const Underline: FC<{ className?: string }> = ({ className }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      width={25}
+      height={25}
+    >
+      <path d="M18 4V11C18 14.3137 15.3137 17 12 17C8.68629 17 6 14.3137 6 11V4M4 21H20" />
+    </svg>
+  );
+};
+
+export default Underline;

package/src/assets/icons/Undo.tsx

@@ -0,0 +1,20 @@
+import { FC } from "react";
+
+const Undo: FC<{ className?: string }> = ({ className }) => {
+  return (
+    <svg
+      width="25"
+      height="25"
+      viewBox="0 0 256 256"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        d="M55.265 167.072c-.975-1.973-3.388-2.796-5.372-1.847L42 169s22.5 53.5 85.5 56c60-1.5 96.627-48.626 97-96.5.373-47.874-37-95.5-95.5-96-57.5-1-79.556 45.004-79.556 45.004-1.073 1.93-1.944 1.698-1.944-.501V51.997a4 4 0 0 0-4-3.997H37c-2.209 0-4 1.8-4 4.008v48.984A3.998 3.998 0 0 0 36.998 105h50.504a3.995 3.995 0 0 0 3.998-3.993v-6.014c0-2.205-1.79-4.02-4.008-4.053l-25.484-.38c-2.214-.033-3.223-1.679-2.182-3.628C59.826 86.932 78 45 128.5 45.5c49 .5 82.751 41.929 82.5 83.242C208 184 166 211 127.5 210c-54.5 0-72.235-42.928-72.235-42.928z"
+        fillRule="evenodd"
+      />
+    </svg>
+  );
+};
+
+export default Undo;

package/src/components/Button.tsx

@@ -0,0 +1,58 @@
+import classNames from "classnames";
+import { FC, SVGProps } from "react";
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "primary" | "secondary";
+  icon?: React.ReactElement<SVGProps<SVGSVGElement>>;
+  active?: boolean;
+  disabled?: boolean;
+  tooltip?: string;
+}
+const Button: FC<ButtonProps> = ({
+  variant = "primary",
+  onClick,
+  children,
+  icon,
+  // active = false,
+  disabled = false,
+  tooltip,
+}) => {
+  return (
+    <button
+      disabled={disabled}
+      className={classNames(
+        "font-sans font-[12px] tracking-[0.04em] py-[8px] px-[12px] h-[40px] rounded whitespace-nowrap group relative text-primary",
+        {
+          "font-bold": variant === "primary",
+          "bg-base hover:bg-base text-fill disabled:bg-fill disabled:text-base":
+            variant === "primary",
+          "bg-transparent border border-primary text-primary hover:border-highlight hover:text-highlight disabled:bg-fill disabled:text-base":
+            variant !== "primary",
+        }
+      )}
+      onClick={onClick}
+    >
+      {tooltip && (
+        <div
+          className={`absolute bottom-[-75%] left-0 z-20 bg-black w-fit h-fit text-base hidden group-hover:block`}
+        >
+          <div>{tooltip}</div>
+        </div>
+      )}
+      <span className="flex flex-row items-center justify-center gap-2">
+        {icon && icon}
+        {children}
+      </span>
+    </button>
+  );
+};
+
+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/Checkbox.tsx

@@ -0,0 +1,51 @@
+import classNames from "classnames";
+import { FC } from "react";
+
+export interface CheckboxProps {
+  label: string;
+  checked: boolean;
+  setChecked: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const Checkbox: FC<CheckboxProps> = ({ label, checked, setChecked }) => {
+  const handleChange = (checked: boolean) => {
+    setChecked(checked);
+  };
+
+  return (
+    <div>
+      <label className="flex items-center">
+        <input
+          type="checkbox"
+          checked={checked}
+          onChange={(event) => handleChange(event.target.checked)}
+          className="hidden"
+        />
+        <span
+          className={classNames(
+            "w-[14px] h-[14px] border rounded border-gray-400 flex items-center justify-center",
+            {
+              "bg-highlight": checked,
+              "bg-fill": !checked,
+            }
+          )}
+        >
+          {checked && (
+            <svg
+              width="10"
+              height="7"
+              viewBox="0 0 10 7"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path d="M1 1L5 6L9 1" stroke="#1A1A1A" stroke-linecap="square" />
+            </svg>
+          )}
+        </span>
+        <span className="ml-2 font-mono text-primary">{label}</span>
+      </label>
+    </div>
+  );
+};
+
+export default Checkbox;

package/src/components/Dropdown.tsx

@@ -0,0 +1,92 @@
+import React, { SVGProps, useEffect, useRef, useState } from "react";
+import Chevron from "../assets/icons/Chevron";
+import Button from "./Button";
+
+export interface DropdownProps {
+  options: string[];
+  label: string;
+  onChange: (selectedOption: string) => void;
+  icon?: React.ReactElement<SVGProps<SVGSVGElement>>;
+}
+
+const Dropdown: React.FC<DropdownProps> = ({
+  options,
+  onChange,
+  label,
+  icon,
+}) => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const [selectedOption, setSelectedOption] = useState<number>(0);
+
+  const handleToggle = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const handleSelect = (option: string, idx: number) => {
+    setSelectedOption(idx);
+    onChange(option);
+    setIsOpen(false);
+  };
+
+  useEffect(() => {
+    const handleOutsideClick = (event: MouseEvent) => {
+      if (
+        isOpen &&
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("click", handleOutsideClick);
+    return () => {
+      document.removeEventListener("click", handleOutsideClick);
+    };
+  }, []);
+
+  return (
+    <div ref={dropdownRef}>
+      <Button
+        onClick={(ev) => {
+          ev.preventDefault();
+          handleToggle();
+        }}
+        icon={
+          <Chevron
+            className={`rotate-[-90deg] transition-transform duration-150 ease-in-out ${
+              isOpen ? "" : "rotate-[90deg]"
+            }`}
+          />
+        }
+      >
+        <span className="flex flex-row items-center justify-center gap-1">
+          {label}
+          {icon && icon}
+        </span>
+      </Button>
+      {isOpen && (
+        <div className="absolute left-0 mt-2 w-48 border shadow-lg font-mono font-[500] tracking-[0.04em] text-[14px] border-base text-primary bg-border z-10">
+          <div className="py-1 rounded-md">
+            {options?.map((option, idx) => (
+              <button
+                key={option}
+                onClick={(ev) => {
+                  ev.preventDefault();
+                  handleSelect(option, idx);
+                }}
+                className={`w-full text-left px-4 py-2 hover:bg-base hover:text-highlight  ${
+                  idx === selectedOption && "font-bold bg-base hover:bg-base"
+                }`}
+              >
+                {option}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Dropdown;

package/src/components/EditButton.tsx

@@ -0,0 +1,10 @@
+export function EditButton({ onClick }: { onClick: () => void }) {
+  return (
+    <button
+      className="px-[24px] py-4 font-serif text-lg font-semibold border-2 rounded-md text-warm-black dark:border-white border-warm-black bg-highlight"
+      onClick={onClick}
+    >
+      Edit page
+    </button>
+  );
+}

package/src/components/ErrorText.tsx

@@ -0,0 +1,3 @@
+export function ErrorText({ children }: { children: React.ReactNode }) {
+  return <div className="p-4 text-red bg-yellow">{children}</div>;
+}

package/src/components/RichTextEditor/ContentEditable.tsx

@@ -0,0 +1,9 @@
+import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+
+export default function LexicalContentEditable({
+  className,
+}: {
+  className?: string;
+}): JSX.Element {
+  return <ContentEditable className={className} />;
+}

package/src/components/RichTextEditor/Nodes/ImageNode.tsx

@@ -0,0 +1,117 @@
+import {
+  DecoratorNode,
+  LexicalNode,
+  NodeKey,
+  SerializedLexicalNode,
+  Spread,
+} from "lexical";
+
+export interface ImagePayload {
+  altText: string;
+  height?: number;
+  key?: NodeKey;
+  maxWidth?: number;
+  src: string;
+  width?: number;
+}
+
+export type SerializedImageNode = Spread<
+  {
+    altText: string;
+    width?: number;
+    maxWidth: number;
+    height?: number;
+    src: string;
+  },
+  SerializedLexicalNode
+>;
+
+export class ImageNode extends DecoratorNode<JSX.Element> {
+  __src: string;
+  __altText: string;
+  __width: "inherit" | number;
+  __height: "inherit" | number;
+  __maxWidth: number;
+
+  static getType(): string {
+    return "image";
+  }
+
+  static clone(node: ImageNode): ImageNode {
+    return new ImageNode(
+      node.__src,
+      node.__altText,
+      node.__width,
+      node.__height,
+      node.__maxWidth,
+      node.__key
+    );
+  }
+
+  constructor(
+    src: string,
+    altText?: string,
+    width?: "inherit" | number,
+    height?: "inherit" | number,
+    maxWidth?: number,
+    key?: NodeKey
+  ) {
+    super(key);
+    this.__src = src;
+    this.__altText = altText || "";
+    this.__width = width || "inherit";
+    this.__height = height || "inherit";
+    this.__maxWidth = maxWidth || 0;
+  }
+
+  exportJSON(): SerializedImageNode {
+    return {
+      altText: this.__altText,
+      height: this.__height === "inherit" ? 0 : this.__height,
+      maxWidth: this.__maxWidth,
+      src: this.__src,
+      type: "image",
+      version: 1,
+      width: this.__width === "inherit" ? 0 : this.__width,
+    };
+  }
+
+  static importJSON(serializedNode: SerializedImageNode): ImageNode {
+    const { src } = serializedNode;
+    const node = $createImageNode(src);
+    return node;
+  }
+
+  createDOM(): HTMLElement {
+    return document.createElement("div");
+  }
+
+  updateDOM(): false {
+    return false;
+  }
+
+  decorate(): JSX.Element {
+    return (
+      <img
+        key={this.__key}
+        src={this.__src}
+        alt={this.__altText}
+        width={this.__width}
+        height={this.__height}
+      />
+    );
+  }
+}
+export function $createImageNode(
+  src: string,
+  altText?: string,
+  width?: "inherit" | number,
+  height?: "inherit" | number,
+  maxWidth?: number
+): ImageNode {
+  return new ImageNode(src, altText, width, height, maxWidth);
+}
+
+export function $isImageNode(node: LexicalNode | null): boolean {
+  return node instanceof ImageNode;
+}

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

@@ -0,0 +1,12 @@
+import { useEffect } from "react";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+
+export function AutoFocus() {
+  const [editor] = useLexicalComposerContext();
+
+  useEffect(() => {
+    editor.focus();
+  }, [editor]);
+
+  return null;
+}

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

@@ -0,0 +1,46 @@
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $wrapNodeInElement, mergeRegister } from "@lexical/utils";
+import {
+  $createParagraphNode,
+  $insertNodes,
+  $isRootOrShadowRoot,
+  COMMAND_PRIORITY_EDITOR,
+  createCommand,
+  LexicalCommand,
+} from "lexical";
+import { useEffect } from "react";
+
+import { $createImageNode, ImageNode, ImagePayload } from "../Nodes/ImageNode";
+
+export type InsertImagePayload = Readonly<ImagePayload>;
+
+export const INSERT_IMAGE_COMMAND: LexicalCommand<InsertImagePayload> =
+  createCommand("INSERT_IMAGE_COMMAND");
+
+export default function ImagesPlugin(): JSX.Element | null {
+  const [editor] = useLexicalComposerContext();
+
+  useEffect(() => {
+    if (!editor.hasNodes([ImageNode])) {
+      throw new Error("ImagesPlugin: ImageNode not registered on editor");
+    }
+
+    return mergeRegister(
+      editor.registerCommand<InsertImagePayload>(
+        INSERT_IMAGE_COMMAND,
+        (payload) => {
+          const imageNode = $createImageNode(payload.src);
+          $insertNodes([imageNode]);
+          if ($isRootOrShadowRoot(imageNode.getParentOrThrow())) {
+            $wrapNodeInElement(imageNode, $createParagraphNode).selectEnd();
+          }
+
+          return true;
+        },
+        COMMAND_PRIORITY_EDITOR
+      )
+    );
+  }, [editor]);
+
+  return null;
+}