@valbuild/ui 0.26.0 → 0.28.0

package/src/components/ValWindow.stories.tsx

@@ -1,146 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { RichTextEditor } from "../exports";
-import { FormContainer } from "./forms/FormContainer";
-import { ImageForm } from "./forms/ImageForm";
-import { TextArea } from "./forms/TextArea";
-
-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={() => {
-          /* */
-        }}
-      >
-        <TextArea
-          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={() => {
-          /* */
-        }}
-      >
-        <div className="h-full grid grid-rows-[1fr,_min-content] ">
-          <TextArea
-            name="/apps/blogs.0.title"
-            text={EXAMPLE_TEXT}
-            onChange={() => {
-              console.log("onChange");
-            }}
-          />
-        </div>
-      </FormContainer>
-    ),
-  },
-};
-
-export const RichText: Story = {
-  args: {
-    isInitialized: true,
-    children: (
-      <FormContainer
-        onSubmit={() => {
-          /* */
-        }}
-      >
-        <RichTextEditor
-          richtext={{
-            _type: "richtext",
-            templateStrings: ["# Title 1"],
-            exprs: [],
-          }}
-        />
-      </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: (
-      <div className="h-full grid grid-rows-[1fr,_min-content] overflow-scroll">
-        <img src={EXAMPLE_IMAGE} />
-        <div className="flex justify-end">
-          <button className="px-4 py-2 border border-highlight">Submit</button>
-        </div>
-      </div>
-    ),
-  },
-};
-
-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

@@ -1,220 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-import classNames from "classnames";
-import { Resizable } from "react-resizable";
-import { useValOverlayContext } from "./ValOverlayContext";
-import { AlignJustifyIcon, XIcon } from "lucide-react";
-import { ScrollArea } from "./ui/scroll-area";
-
-export type ValWindowProps = {
-  children:
-    | [React.ReactNode, React.ReactNode, React.ReactNode]
-    | React.ReactNode;
-
-  onClose: () => void;
-  position?: { left: number; top: number };
-  isInitialized?: true;
-};
-
-const MIN_WIDTH = 320;
-const MIN_HEIGHT = 320;
-
-export function ValWindow({
-  position,
-  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 { windowSize, setWindowSize } = useValOverlayContext();
-  useEffect(() => {
-    if (!windowSize) {
-      setWindowSize({
-        height: MIN_HEIGHT,
-        width: MIN_WIDTH,
-        innerHeight:
-          MIN_HEIGHT -
-          (64 + (bottomRef.current?.getBoundingClientRect()?.height || 0)),
-      });
-    }
-  }, [windowSize]);
-  //
-  const bottomRef = useRef<HTMLDivElement>(null);
-
-  return (
-    <Resizable
-      minConstraints={[MIN_WIDTH, MIN_HEIGHT]}
-      width={windowSize?.width || MIN_WIDTH}
-      height={windowSize?.height || MIN_HEIGHT}
-      onResize={(_, { size }) =>
-        setWindowSize({
-          ...size,
-
-          innerHeight:
-            (windowSize?.height || MIN_HEIGHT) -
-            (64 + (bottomRef.current?.getBoundingClientRect()?.height || 0)),
-        })
-      }
-      handle={
-        <div className="fixed bottom-0 right-0 cursor-se-resize">
-          <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>
-      }
-      draggableOpts={{}}
-      className={classNames(
-        "absolute inset-0 tablet:w-auto tablet:h-auto tablet:min-h-fit rounded-lg bg-background text-primary drop-shadow-2xl min-w-[320px]",
-        {
-          "opacity-0": !isInitialized,
-          "opacity-100": isInitialized,
-        }
-      )}
-    >
-      <div
-        style={{
-          width: windowSize?.width || MIN_WIDTH,
-          height: windowSize?.height || MIN_HEIGHT,
-          left: draggedPosition.left,
-          top: draggedPosition.top,
-        }}
-      >
-        <div
-          ref={dragRef}
-          className="relative flex items-center justify-center px-2 pt-2 text-primary"
-        >
-          <AlignJustifyIcon
-            size={16}
-            className="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-accent"
-            onClick={onClose}
-          >
-            <XIcon size={16} />
-          </button>
-        </div>
-        <form
-          className="h-full"
-          onSubmit={(ev) => {
-            ev.preventDefault();
-          }}
-        >
-          {Array.isArray(children) && children.slice(0, 1)}
-          <ScrollArea
-            className="relative"
-            style={{
-              height: windowSize?.innerHeight,
-            }}
-          >
-            {Array.isArray(children) ? children.slice(1, -1) : children}
-          </ScrollArea>
-          <div ref={bottomRef} className="w-full px-4 pb-0">
-            {Array.isArray(children) && children.slice(-1)}
-          </div>
-        </form>
-      </div>
-    </Resizable>
-  );
-}
-
-function useDrag({
-  position: initPosition,
-}: {
-  position?: { left: number; top: number };
-}) {
-  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 - MIN_WIDTH / 2 - window.scrollX;
-      const top = window.innerHeight / 2 - MIN_HEIGHT / 2 + window.scrollY;
-      setPosition({
-        left,
-        top,
-      });
-    }
-  }, [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 left =
-          -((ref?.current?.getBoundingClientRect()?.width || 0) / 2) + e.pageX;
-        const top =
-          -((ref?.current?.getBoundingClientRect()?.height || 0) / 2) +
-          +e.pageY;
-        setPosition({
-          left: left < 0 ? 0 : left,
-          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 < MIN_WIDTH * 2) {
-        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/dashboard/DashboardButton.tsx

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

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

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

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

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

@@ -1,42 +0,0 @@
-import classNames from "classnames";
-import { Children, ReactNode, useState } from "react";
-
-interface FormGroupProps {
-  children: ReactNode | ReactNode[];
-  className?: string;
-  defaultExpanded?: boolean;
-}
-
-export const FormGroup = ({
-  children,
-  className,
-  defaultExpanded,
-}: FormGroupProps) => {
-  const [firstChild, ...rest] = Children.toArray(children);
-  const [expanded, setExpanded] = useState<boolean>(defaultExpanded ?? true);
-  const defaultClass = "py-3 " + (className ? ` ${className}` : "");
-  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",
-            { "border-y border-highlight": !expanded }
-          )}
-          onClick={() => setExpanded(!expanded)}
-        >
-          {firstChild}
-          <div>{expanded ? "Collapse" : "Expand"}</div>
-        </button>
-        {expanded && (
-          <div className="flex flex-col bg-background">
-            {Children.map(rest, (child) => (
-              <div className={classNames(defaultClass)}>{child}</div>
-            ))}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};

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

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