@valbuild/ui 0.26.0 → 0.28.0

package/src/assets/icons/TextIcon.tsx

@@ -1,20 +0,0 @@
-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/assets/icons/Underline.tsx

@@ -1,22 +0,0 @@
-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={12}
-      height={12}
-    >
-      <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

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

@@ -1,68 +0,0 @@
-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;
-}
-
-/**
- *
- * @deprecated Use ui/Button
- */
-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,
-  children,
-  icon,
-  // active = false,
-  disabled = false,
-}) => {
-  return (
-    <button
-      disabled={disabled}
-      className={classNames(
-        "font-sans font-[12px] tracking-[0.04em] py-1 px-2 rounded whitespace-nowrap group relative text-primary",
-        {
-          "font-bold": variant === "primary",
-          "bg-background hover:bg-background text-fill disabled:bg-fill disabled:text-background":
-            variant === "primary",
-          "bg-transparent border border-primary text-primary hover:border-highlight hover:text-highlight disabled:bg-fill disabled:text-background":
-            variant !== "primary",
-        }
-      )}
-      onClick={onClick}
-    >
-      <span className="flex flex-row items-center justify-center gap-2">
-        {icon && icon}
-        {children}
-      </span>
-    </button>
-  );
-};
-
-/**
- *
- * @deprecated Use ui/Button
- */
-export default Button;

package/src/components/Checkbox.tsx

@@ -1,51 +0,0 @@
-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/DraggableList.stories.tsx

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

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

@@ -1,101 +0,0 @@
-import React, { SVGProps, useEffect, useRef, useState } from "react";
-import Chevron from "../assets/icons/Chevron";
-import Button from "./Button";
-import { useValOverlayContext } from "./ValOverlayContext";
-
-export interface DropdownProps {
-  options: string[];
-  label: string;
-  onChange: (selectedOption: string) => void;
-  icon?: React.ReactElement<SVGProps<SVGSVGElement>>;
-  variant?: "primary" | "secondary";
-}
-
-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 { windowSize } = useValOverlayContext();
-
-  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 className="text-[12px]" ref={dropdownRef}>
-      <Button
-        onClick={(ev) => {
-          ev.preventDefault();
-          handleToggle();
-        }}
-        icon={
-          <Chevron
-            className={`rotate-[-90deg] transition-transform duration-150 ease-in-out ${
-              isOpen ? "" : "rotate-[90deg]"
-            }`}
-          />
-        }
-      >
-        <div className="relative">
-          <span className="flex flex-row items-center justify-center gap-1">
-            {label}
-            {icon && icon}
-          </span>
-          {isOpen && (
-            <div
-              className="absolute -top-[4px] overflow-scroll shadow-lg -left-2 text-primary bg-border w-fit z-overlay"
-              style={{ maxHeight: windowSize?.innerHeight }}
-            >
-              <div className="flex flex-col ">
-                {options?.map((option, idx) => (
-                  <button
-                    key={option}
-                    onClick={(ev) => {
-                      ev.preventDefault();
-                      handleSelect(option, idx);
-                    }}
-                    className={`text-left px-2 py-1 hover:bg-background hover:text-highlight  ${
-                      idx === selectedOption &&
-                      "font-bold bg-background hover:bg-background truncate"
-                    }`}
-                  >
-                    {option}
-                  </button>
-                ))}
-              </div>
-            </div>
-          )}
-        </div>
-      </Button>
-    </div>
-  );
-};
-
-export default Dropdown;

package/src/components/EditButton.tsx

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

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

package/src/components/ExpandLogo.tsx

@@ -1,72 +0,0 @@
-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/Grid.stories.tsx

@@ -1,43 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Grid } from "./Grid";
-import { Tree } from "./dashboard/Tree";
-import { Dropdown } from "./dashboard/Dropdown";
-
-const meta: Meta<typeof Grid> = { component: Grid };
-
-export default meta;
-type Story = StoryObj<typeof Grid>;
-export const Default: Story = {
-  render: () => (
-    <Grid>
-      <Dropdown options={["/blogs", "/journals"]} />
-      <Tree>
-        <Tree.Node path="Main nav" type="section" />
-        <Tree.Node path="H1" type="string">
-          <Tree.Node path="Section 3" type="string" />
-          <Tree.Node path="Section 4" type="section">
-            <Tree.Node path="Section 5" type="string" />
-            <Tree.Node path="Section 6" type="section">
-              <Tree.Node path="Section 7" type="string" />
-            </Tree.Node>
-          </Tree.Node>
-        </Tree.Node>
-      </Tree>
-      <div className="flex items-center justify-between w-full h-full px-3 font-serif text-xs text-white">
-        <p>Content</p>
-        <button className="flex justify-between flex-shrink-0 gap-1">
-          <span className="w-fit">+</span>
-          <span className="w-fit">Add item</span>
-        </button>
-      </div>
-      <div>
-        <div>Object 1</div>
-        <div>Object 2</div>
-        <div>Object 3</div>
-        <div>Object 4</div>
-      </div>
-      <div className="text-white">History</div>
-      <div className="text-white">hey</div>
-    </Grid>
-  ),
-};

package/src/components/Grid.tsx

@@ -1,139 +0,0 @@
-import classNames from "classnames";
-import { Children, useEffect, useRef } from "react";
-import { ScrollArea } from "./ui/scroll-area";
-
-type GridProps = {
-  children: React.ReactNode | React.ReactNode[];
-};
-
-export function Grid({ children }: GridProps): React.ReactElement {
-  const leftColRef = useRef<HTMLDivElement>(null);
-  const rightColRef = useRef<HTMLDivElement>(null);
-
-  const isResizing = useRef(false);
-  const x = useRef(0);
-  const dragRef = useRef<"left" | "right" | null>(null);
-  const originalWidth = useRef(0);
-
-  const handleMouseUp = () => {
-    isResizing.current = false;
-    dragRef.current = null;
-    x.current = 0;
-    originalWidth.current = 0;
-  };
-
-  const handleMouseMove = (event: MouseEvent) => {
-    event.preventDefault();
-    const targetRef = dragRef.current === "left" ? leftColRef : rightColRef;
-    if (targetRef.current && isResizing.current) {
-      const dx =
-        dragRef.current === "left"
-          ? event.screenX - x.current
-          : x.current - event.screenX;
-      targetRef.current.style.width = `${Math.max(
-        originalWidth.current + dx,
-        150
-      )}px`;
-    }
-  };
-
-  const handleMouseDown =
-    (column: "left" | "right") =>
-    (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-      const target = event.target as HTMLDivElement;
-      if (target) {
-        const columnRef =
-          column === "left"
-            ? leftColRef
-            : column === "right"
-            ? rightColRef
-            : null;
-        isResizing.current = true;
-        if (columnRef && columnRef.current) {
-          x.current = event.screenX;
-          dragRef.current = column;
-          if (columnRef.current) {
-            originalWidth.current = columnRef.current.offsetWidth;
-          }
-        }
-      }
-    };
-
-  const [header1, body1, header2, body2, header3, body3] =
-    Children.toArray(children);
-  useEffect(() => {
-    document.addEventListener("mouseup", handleMouseUp);
-    document.addEventListener("mousemove", handleMouseMove);
-
-    return () => {
-      document.removeEventListener("mouseup", handleMouseUp);
-      document.removeEventListener("mousemove", handleMouseMove);
-    };
-  }, []);
-
-  return (
-    <div className="flex h-screen">
-      <div
-        ref={leftColRef}
-        className="relative border-r border-border"
-        style={{ width: 300 }}
-      >
-        <Grid.Column>
-          {header1}
-          <ScrollArea style={{ height: "calc(100vh - 50px)" }}>
-            {body1}
-          </ScrollArea>
-        </Grid.Column>
-        <div
-          className="absolute inset-y-0 right-0 cursor-col-resize w-[1px] hover:w-[3px] h-full hover:bg-border"
-          onMouseDown={handleMouseDown("left")}
-        ></div>
-      </div>
-      <div
-        className={classNames("", {
-          "w-full": !header3 && !body3,
-        })}
-      >
-        <Grid.Column>
-          {header2}
-          <ScrollArea style={{ height: "calc(100vh - 50px)" }}>
-            {body2}
-          </ScrollArea>
-        </Grid.Column>
-      </div>
-      {header3 ||
-        (body3 && (
-          <div
-            ref={rightColRef}
-            className="relative h-screen border-l border-border"
-            style={{ width: 300 }}
-          >
-            <Grid.Column>
-              {header3}
-              <ScrollArea style={{ height: "calc(100vh - 50px)" }}>
-                {body3}
-              </ScrollArea>
-            </Grid.Column>
-            <div
-              onMouseDown={handleMouseDown("right")}
-              className="absolute inset-y-0 left-0 cursor-col-resize w-[1px] bg-border hover:w-[3px] hover:bg-border"
-            ></div>
-          </div>
-        ))}
-    </div>
-  );
-}
-
-type GridChildProps = {
-  children: React.ReactNode | React.ReactNode[];
-};
-
-Grid.Column = ({ children }: GridChildProps): React.ReactElement => {
-  const [header, body] = Children.toArray(children);
-  return (
-    <div className="flex flex-col">
-      <div className="flex items-center border-b border-border">{header}</div>
-      {body}
-    </div>
-  );
-};