@valbuild/ui 0.13.4 → 0.17.0

package/src/components/ValWindow.tsx

@@ -11,7 +11,6 @@ export type ValWindowProps = {
 
 export function ValWindow({
   position,
-  isInitialized: isInitializedProp,
   onClose,
   children,
 }: ValWindowProps): React.ReactElement {
@@ -32,26 +31,27 @@ export function ValWindow({
 
   //
   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",
+        "absolute inset-0 h-[100svh] w-full tablet:w-auto tablet:h-auto tablet:min-h-fit tablet:rounded bg-base text-primary drop-shadow-2xl min-w-[320px] transition-opacity duration-300 delay-75 max-w-full",
         {
-          "opacity-0": !(isInitialized || isInitializedProp),
-          "opacity-100": isInitialized || isInitializedProp,
+          "opacity-0": !isInitialized,
+          "opacity-100": isInitialized,
         }
       )}
       ref={resizeRef}
       style={{
         left: draggedPosition.left,
         top: draggedPosition.top,
-        width: size?.width,
-        height: size?.height,
+        width: size?.width || 320,
+        height: size?.height || 320,
       }}
     >
       <div
         ref={dragRef}
-        className="relative flex justify-center px-2 pt-2 text-primary pb-[16px]"
+        className="relative flex justify-center px-2 pt-2 text-primary"
       >
         <AlignJustify
           size={16}
@@ -69,7 +69,7 @@ export function ValWindow({
           <X size={16} />
         </button>
       </div>
-      {children}
+      <div style={{ height: (size?.height || 320) - 64 }}>{children}</div>
       <div
         className="absolute bottom-0 right-0 hidden ml-auto select-none tablet:block text-border cursor-nwse-resize"
         style={{
@@ -109,8 +109,8 @@ function useResize() {
         const nextHeight =
           startSize.height - startPosition.y + mouseMoveEvent.pageY;
         setSize({
-          width: nextWidth,
-          height: nextHeight,
+          width: nextWidth > 320 ? nextWidth : 320,
+          height: nextHeight > 320 ? nextHeight : 320,
         });
       }
     }
@@ -131,11 +131,20 @@ function useDrag({
   const [position, setPosition] = useState({ left: 0, top: 0 });
   useEffect(() => {
     if (initPosition) {
+      const left =
+        initPosition.left -
+        (ref?.current?.getBoundingClientRect()?.width || 0) / 2;
+      const top = initPosition.top - 16;
+      setPosition({
+        left: left < 0 ? 0 : left,
+        top: top < 0 ? 0 : top,
+      });
+    } else {
+      const left = window.innerWidth / 2 - 320 / 2 - window.scrollX;
+      const top = window.innerHeight / 2 - 320 / 2 + window.scrollY;
       setPosition({
-        left:
-          initPosition.left -
-          (ref?.current?.getBoundingClientRect()?.width || 0) / 2,
-        top: initPosition.top - 16,
+        left,
+        top,
       });
     }
   }, [initPosition]);
@@ -150,14 +159,13 @@ function useDrag({
       if (mouseDown) {
         e.preventDefault();
         e.stopPropagation();
+        const left =
+          -((ref?.current?.getBoundingClientRect()?.width || 0) / 2) + e.pageX;
         const top =
           -((ref?.current?.getBoundingClientRect()?.height || 0) / 2) +
           +e.pageY;
-
         setPosition({
-          left:
-            -((ref?.current?.getBoundingClientRect()?.width || 0) / 2) +
-            e.pageX,
+          left: left < 0 ? 0 : left,
           top: top < 0 ? 0 : top,
         });
       }

package/src/components/dashboard/DashboardButton.tsx

@@ -0,0 +1,25 @@
+import { FC, ReactNode } from "react";
+import ExpandLogo from "../ExpandLogo";
+
+export const DashboardButton: FC<{
+  onClick?: () => void;
+  expanded: boolean;
+  children: ReactNode;
+}> = ({ onClick, children, expanded }) => {
+  return (
+    <button
+      onClick={onClick}
+      className="py-2 px-3 font-serif text-[12px] tracking-[0.04em] font-[500] border rounded-md text-white dark:border-white border-warm-black bg-warm-black group dark:hover:border-highlight hover:text-highlight "
+    >
+      <span className="flex flex-row items-center justify-center gap-2">
+        {
+          <ExpandLogo
+            expanded={expanded}
+            className="fill-white group-hover:fill-highlight"
+          />
+        }
+        {children}
+      </span>
+    </button>
+  );
+};

package/src/components/dashboard/DashboardDropdown.tsx

@@ -0,0 +1,59 @@
+import { SerializedModule } from "@valbuild/core";
+import React, { FC, useRef, useState } from "react";
+import classNames from "classnames";
+import Chevron from "../../assets/icons/Chevron";
+
+interface DashboardDropdownProps {
+  selectedModule: SerializedModule;
+  setSelectedModule: React.Dispatch<React.SetStateAction<SerializedModule>>;
+  modules: SerializedModule[];
+}
+export const DashboardDropdown: FC<DashboardDropdownProps> = ({
+  selectedModule,
+  setSelectedModule,
+  modules,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <div ref={dropdownRef} className="font-serif relative w-full max-w-[300px]">
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className={classNames("w-full")}
+      >
+        <span className="flex flex-row items-center justify-between w-full">
+          <p>
+            {selectedModule ? selectedModule.path : "No module selected..."}
+          </p>
+          <Chevron className={classNames({ "rotate-90": !isOpen })} />
+        </span>
+      </button>
+      <div
+        className={classNames(
+          { block: isOpen, hidden: !isOpen },
+          "absolute right-0 flex flex-col bg-dark-gray z-10"
+        )}
+      >
+        {modules.map((module, idx) => (
+          <button
+            key={idx}
+            className={classNames(
+              {
+                "bg-light-gray hover:bg-dark-gray ": selectedModule === module,
+                "hover:bg-light-gray": selectedModule !== module,
+              },
+              " w-full px-4 py-4"
+            )}
+            onClick={() => {
+              setSelectedModule(module);
+              setIsOpen(false);
+            }}
+          >
+            {module.path}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+};

package/src/components/dashboard/Dropdown.stories.tsx

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Dropdown } from "./Dropdown";
+
+const meta: Meta<typeof Dropdown> = { component: Dropdown };
+
+export default meta;
+type Story = StoryObj<typeof Dropdown>;
+
+export const Default: Story = {
+  render: () => <Dropdown options={["/blogs", "/journals"]} />,
+};

package/src/components/dashboard/Dropdown.tsx

@@ -0,0 +1,70 @@
+import classNames from "classnames";
+import { ReactElement, ReactNode, useRef, useState } from "react";
+
+type DropdownProps = {
+  options?: string[];
+  onClick?: (path: string) => void;
+};
+export function Dropdown({
+  options = [],
+  onClick,
+}: DropdownProps): ReactElement {
+  const [selected, setSelected] = useState<string>(options[0]);
+  const dropdownRef = useRef<HTMLSelectElement>(null);
+
+  const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    setSelected(event.target.value);
+    if (onClick) onClick(event.target.value);
+  };
+
+  return (
+    <select
+      className="relative justify-start w-full px-4 mx-2 font-serif text-xs text-white group bg-warm-black hover:bg-dark-gray"
+      onChange={handleChange}
+      ref={dropdownRef}
+    >
+      {options.map((option, index) => (
+        <option
+          key={index}
+          value={option}
+          className={classNames(
+            { "bg-yellow": selected === option },
+            { "bg-red": selected !== option }
+          )}
+        >
+          {option}
+        </option>
+      ))}
+    </select>
+  );
+}
+
+type DropdownChildProps = {
+  children?: ReactNode | ReactNode[];
+  id?: string | number;
+  onClick?: () => void;
+  selected?: boolean;
+};
+
+Dropdown.Child = ({
+  children,
+  onClick,
+  selected,
+}: DropdownChildProps): ReactElement => {
+  return (
+    <div
+      onClick={() => {
+        if (onClick) {
+          onClick();
+        }
+      }}
+      className={classNames(
+        "flex flex-col py-2 px-3 w-full justify-start items-start  bg-warm-black group-hover:bg-dark-gray hover:bg-dark-gray tracking-wider text-[12px] font-[400] font-serif hover:cursor-pointer",
+        { "bg-yellow text-warm-black ": selected },
+        { "text-white ": !selected }
+      )}
+    >
+      {children}
+    </div>
+  );
+};

package/src/components/dashboard/FormGroup.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { FormGroup } from "./FormGroup";
+
+const meta: Meta<typeof FormGroup> = { component: FormGroup };
+
+export default meta;
+type Story = StoryObj<typeof FormGroup>;
+
+export const Default: Story = {
+  render: () => (
+    <FormGroup>
+      <div>Object 1</div>
+      <div>Object 2</div>
+      <div>Object 3</div>
+      <div>Object 4</div>
+    </FormGroup>
+  ),
+};
+
+export const SeveralGroups: Story = {
+  render: () => (
+    <div>
+      <FormGroup>
+        <div>Object 1</div>
+        <div>Object 2</div>
+        <div>Object 3</div>
+        <div>Object 4</div>
+      </FormGroup>
+      <FormGroup>
+        <div>Object 5</div>
+        <div>Object 6</div>
+        <div>Object 7</div>
+        <div>Object 8</div>
+      </FormGroup>
+    </div>
+  ),
+};

package/src/components/dashboard/FormGroup.tsx

@@ -0,0 +1,36 @@
+import classNames from "classnames";
+import { Children, ReactNode, useState } from "react";
+
+interface FormGroupProps {
+  children: ReactNode | ReactNode[];
+}
+
+export const FormGroup = ({ children }: FormGroupProps) => {
+  const [firstChild, ...rest] = Children.toArray(children);
+  const [expanded, setExpanded] = useState<boolean>(false);
+  const defaultClass =
+    "px-4 py-3 border-b border-dark-gray hover:bg-light-gray hover:border-light-gray";
+  return (
+    <div>
+      <div className="flex flex-col font-serif text-xs leading-4 tracking-wider text-white">
+        <button
+          className={classNames(
+            defaultClass,
+            "bg-warm-black flex justify-between items-center"
+          )}
+          onClick={() => setExpanded(!expanded)}
+        >
+          {firstChild}
+          <div>{expanded ? "Collapse" : "Expand"}</div>
+        </button>
+        {expanded && (
+          <div className="flex flex-col bg-medium-black">
+            {Children.map(rest, (child) => (
+              <div className={classNames(defaultClass)}>{child}</div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/components/dashboard/Grid.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Grid } from "./Grid";
+import { Tree } from "./Tree";
+import { Dropdown } from "./Dropdown";
+import { FormGroup } from "./FormGroup";
+
+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="font-serif text-xs w-full h-full flex justify-between items-center px-3 text-white">
+        <p>Content</p>
+        <button className="flex justify-between gap-1 flex-shrink-0">
+          <span className="w-fit">+</span>
+          <span className="w-fit">Add item</span>
+        </button>
+      </div>
+      <div>
+        <FormGroup>
+          <div>Object 1</div>
+          <div>Object 2</div>
+          <div>Object 3</div>
+          <div>Object 4</div>
+        </FormGroup>
+        <FormGroup>
+          <div>Object 5</div>
+          <div>Object 6</div>
+          <div>Object 7</div>
+          <div>Object 8</div>
+        </FormGroup>
+      </div>
+      <div className="text-white">History</div>
+      <div className="text-white">hey</div>
+    </Grid>
+  ),
+};

package/src/components/dashboard/Grid.tsx

@@ -0,0 +1,126 @@
+import { Children, useEffect, useRef } from "react";
+
+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 w-full h-screen">
+      <div
+        ref={leftColRef}
+        className="relative h-full border-r border-dark-gray"
+        style={{ width: 300 }}
+      >
+        <Grid.Column>
+          {header1}
+          {body1}
+        </Grid.Column>
+        <div
+          className="absolute inset-y-0 right-0 cursor-col-resize w-[1px] bg-dark-gray hover:w-[2px] hover:bg-light-gray"
+          onMouseDown={handleMouseDown("left")}
+        ></div>
+      </div>
+      <div className="flex-auto bg-warm-black">
+        <Grid.Column>
+          {header2}
+          {body2}
+        </Grid.Column>
+      </div>
+      <div
+        ref={rightColRef}
+        className="relative border-l border-dark-gray bg-warm-black"
+        style={{ width: 300 }}
+      >
+        <Grid.Column>
+          {header3}
+          {body3}
+        </Grid.Column>
+        <div
+          onMouseDown={handleMouseDown("right")}
+          className="absolute inset-y-0 left-0 cursor-col-resize w-[1px]  bg-dark-gray hover:w-[2px] hover:bg-light-gray"
+        ></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 h-full overflow-auto bg-warm-black">
+      <div className="h-[50px] flex items-center border-b border-dark-gray">
+        {header}
+      </div>
+      {body}
+    </div>
+  );
+};

package/src/components/dashboard/Grid2.stories.tsx

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Grid } from "./Grid2";
+import { Tree } from "./Tree";
+import { Dropdown } from "./Dropdown";
+import { FormGroup } from "./FormGroup";
+
+const meta: Meta<typeof Grid> = { component: Grid };
+
+export default meta;
+type Story = StoryObj<typeof Grid>;
+export const Default: Story = {
+  render: () => (
+    <Grid>
+      <Grid.Row>
+        <Dropdown options={["/blogs", "/journals"]} />
+        <div className="font-serif text-xs w-full h-full flex justify-between items-center px-3 text-white">
+          <p>Content</p>
+          <button className="flex justify-between gap-1 flex-shrink-0">
+            <span className="w-fit">+</span>
+            <span className="w-fit">Add item</span>
+          </button>
+        </div>
+        <div className="text-white">History</div>
+      </Grid.Row>
+      <Grid.Row fill>
+        <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>
+          <FormGroup>
+            <div>Object 1</div>
+            <div>Object 2</div>
+            <div>Object 3</div>
+            <div>Object 4</div>
+          </FormGroup>
+          <FormGroup>
+            <div>Object 5</div>
+            <div>Object 6</div>
+            <div>Object 7</div>
+            <div>Object 8</div>
+          </FormGroup>
+        </div>
+        <div className="text-white">hey</div>
+      </Grid.Row>
+    </Grid>
+  ),
+};

package/src/components/dashboard/Grid2.tsx

@@ -0,0 +1,72 @@
+import classNames from "classnames";
+import { Children, cloneElement, useRef } from "react";
+
+interface GridProps {
+  children: React.ReactNode | React.ReactNode[];
+}
+export function Grid({ children }: GridProps): React.ReactElement {
+  const leftColHeaderRef = useRef<HTMLDivElement>(null);
+  const leftColBodyRef = useRef<HTMLDivElement>(null);
+  const rightColHeaderRef = useRef<HTMLDivElement>(null);
+  const rightColBodyRef = useRef<HTMLDivElement>(null);
+
+  const [headerRow, bodyRow] = Children.toArray(children);
+
+  return (
+    <div className="flex flex-col w-full h-screen bg-warm-black overflow-clip">
+      {cloneElement(headerRow as React.ReactElement, {
+        leftColRef: leftColHeaderRef,
+        rightColRef: rightColHeaderRef,
+      })}
+      {cloneElement(bodyRow as React.ReactElement, {
+        leftColRef: leftColBodyRef,
+        rightColRef: rightColBodyRef,
+      })}
+    </div>
+  );
+}
+
+type GridRowProps = {
+  children: React.ReactNode | React.ReactNode[];
+  leftColRef?: React.RefObject<HTMLDivElement>;
+  rightColRef?: React.RefObject<HTMLDivElement>;
+  fill?: boolean;
+};
+
+Grid.Row = ({
+  children,
+  leftColRef,
+  rightColRef,
+  fill: bottomRow = false,
+}: GridRowProps): React.ReactElement => {
+  const [leftCol, middleCol, rightCol] = Children.toArray(children);
+  //implement mouseover event to share hover-event between rows
+  console;
+  return (
+    <div
+      className={classNames("flex w-full py-2 border-b border-dark-gray", {
+        "h-full": bottomRow,
+      })}
+    >
+      <div className="relative" style={{ width: "300px" }} ref={leftColRef}>
+        {leftCol}
+        {bottomRow && (
+          <div
+            className="absolute inset-y-0 right-0 cursor-col-resize w-[1px] bg-dark-gray hover:w-[2px] hover:bg-light-gray -my-[100px]"
+            //   onMouseDown={handleMouseDown("left")}
+          ></div>
+        )}
+      </div>
+      <div className="flex-auto">{middleCol}</div>
+      <div className="relative" style={{ width: "300px" }} ref={rightColRef}>
+        {rightCol}
+        {bottomRow && (
+          <div
+            //   onMouseDown={handleMouseDown("right")}
+            className="absolute inset-y-0 left-0 cursor-col-resize w-[1px]  bg-dark-gray hover:w-[2px] hover:bg-light-gray -my-2"
+          ></div>
+        )}
+      </div>
+    </div>
+  );
+};