@valbuild/ui 0.21.2 → 0.22.0

package/server.vite.config.ts

@@ -4,9 +4,11 @@ import { defineConfig } from "vite";
 export default defineConfig({
   build: {
     outDir: "./server/dist",
+    manifest: true,
     lib: {
       entry: {
         "valbuild-ui-server": "./src/vite-server.ts",
+        "valbuild-ui-main": "./src/main.jsx",
       },
       formats: ["cjs", "es"],
       /**

package/src/App.tsx

@@ -0,0 +1,73 @@
+import { ValApi } from "@valbuild/core";
+import { ValFullscreen } from "./components/ValFullscreen";
+import { ErrorBoundary } from "react-error-boundary";
+
+import {
+  Accordion,
+  AccordionItem,
+  AccordionContent,
+  AccordionTrigger,
+} from "./components/ui/accordion";
+import Logo from "./assets/icons/Logo";
+import { X } from "lucide-react";
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function fallbackRender({ error, resetErrorBoundary }: any) {
+  console.error(error);
+  return (
+    <div className="absolute top-0 left-0 flex items-center justify-center w-screen h-screen bg-card-foreground">
+      <div className="w-full h-full p-10">
+        <div className="w-full h-full p-10 bg-card text-primary">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-[0.5em] text-lg font-bold text-center py-2">
+              <Logo /> encountered an error
+            </div>
+            <button onClick={resetErrorBoundary}>
+              <X />
+            </button>
+          </div>
+          <div className="text-4xl font-normal ">Message:</div>
+          <pre>{error.message}</pre>
+          {error.stack && (
+            <Accordion
+              type="single"
+              className="font-serif"
+              collapsible
+              defaultValue="error"
+            >
+              <AccordionItem value={"error"}>
+                <AccordionTrigger>Stack trace:</AccordionTrigger>
+                <AccordionContent className="p-4 bg-popover text-popover-foreground">
+                  {error.stack && <pre>{error.stack}</pre>}
+                </AccordionContent>
+              </AccordionItem>
+            </Accordion>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function App() {
+  const router = createBrowserRouter(
+    [
+      {
+        path: "/*",
+        element: (
+          <ErrorBoundary fallbackRender={fallbackRender}>
+            <ValFullscreen valApi={new ValApi("/api/val")} />
+          </ErrorBoundary>
+        ),
+      },
+    ],
+    {
+      basename: "/api/val/static/edit",
+    }
+  );
+
+  return <RouterProvider router={router} />;
+}
+
+export default App;

package/src/assets/icons/Logo.tsx

@@ -0,0 +1,103 @@
+import { FC } from "react";
+
+const Logo: FC<{ className?: string }> = ({ className }) => {
+  return (
+    <svg
+      width="58"
+      height="34"
+      viewBox="0 0 58 34"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g filter="url(#filter0_d_21_1677)">
+        <path
+          d="M5 5.36426C5 5.16309 5.16309 5 5.36426 5H17.6581C17.8593 5 18.0223 5.16309 18.0223 5.36426V28.4949C18.0223 28.696 17.8593 28.8591 17.6581 28.8591H5.36426C5.16309 28.8591 5 28.696 5 28.4949V5.36426Z"
+          fill="#38CD98"
+        />
+      </g>
+      <g filter="url(#filter1_i_21_1677)">
+        <circle cx="11.4656" cy="23.7595" r="2.18557" fill="currentColor" />
+      </g>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M52.8588 23.839H48.7257H48.537H48.1128C47.6715 23.839 47.4508 23.5942 47.4508 23.1044V13.7293C47.4508 13.5784 47.3285 13.4561 47.1777 13.4561H45.8118C45.6609 13.4561 45.5386 13.5784 45.5386 13.7293V15.1836C45.5386 15.2844 45.4569 15.3661 45.3561 15.3661C45.2876 15.3661 45.225 15.3275 45.1924 15.2672C44.805 14.5503 44.283 14.02 43.6264 13.6765C42.9563 13.301 42.2045 13.1132 41.3709 13.1132C40.6028 13.1132 39.8755 13.252 39.189 13.5295C38.5026 13.8071 37.8979 14.2152 37.3748 14.7539C36.8682 15.2764 36.4678 15.9212 36.1736 16.6885C35.8794 17.4558 35.7323 18.3374 35.7323 19.3332V19.725C35.7323 20.7372 35.8794 21.627 36.1736 22.3942C36.4678 23.1615 36.8682 23.8146 37.3748 24.3533C37.8979 24.8757 38.5026 25.2757 39.189 25.5532C39.8755 25.8144 40.6191 25.945 41.42 25.945C42.1881 25.945 42.9154 25.7491 43.6019 25.3573C44.2751 24.982 44.8058 24.4119 45.1941 23.6471C45.2255 23.5852 45.2886 23.5452 45.358 23.5452H45.3917C45.4728 23.5452 45.5386 23.611 45.5386 23.6921C45.5386 23.7904 45.544 23.8856 45.5547 23.9777V25.1392C45.5547 25.3904 45.7584 25.5941 46.0096 25.5941H47.2261C47.2914 25.5995 47.3581 25.6022 47.4263 25.6022H48.537H48.7257H57.7268C57.8777 25.6022 58 25.4799 58 25.329V24.1122C58 23.9614 57.8777 23.839 57.7268 23.839H55.3174C55.1665 23.839 55.0442 23.7167 55.0442 23.5659V8.73368C55.0442 8.58279 54.9219 8.46048 54.771 8.46048H50.5054C50.3545 8.46048 50.2322 8.58279 50.2322 8.73368V9.95043C50.2322 10.1013 50.3545 10.2236 50.5054 10.2236H52.8588C53.0097 10.2236 53.132 10.3459 53.132 10.4968V23.5659C53.132 23.7167 53.0097 23.839 52.8588 23.839ZM41.6161 24.1329C42.1881 24.1329 42.7111 24.0268 43.1851 23.8146C43.6754 23.6023 44.0922 23.3003 44.4354 22.9085C44.7786 22.5167 45.0483 22.0514 45.2444 21.5127C45.4406 20.9576 45.5386 20.3454 45.5386 19.6761V19.3822C45.5386 18.7292 45.4406 18.1333 45.2444 17.5946C45.0483 17.0395 44.7705 16.5661 44.4109 16.1743C44.0677 15.7824 43.6509 15.4804 43.1606 15.2682C42.6866 15.0396 42.1718 14.9254 41.6161 14.9254C41.044 14.9254 40.521 15.0315 40.0471 15.2437C39.5731 15.4559 39.1563 15.758 38.7968 16.1498C38.4535 16.5252 38.1839 16.9905 37.9877 17.5456C37.7916 18.0843 37.6936 18.6802 37.6936 19.3332V19.725C37.6936 21.1127 38.0531 22.1983 38.7722 22.982C39.5077 23.7493 40.4557 24.1329 41.6161 24.1329ZM31.1115 25.4191C31.0732 25.5287 30.9698 25.6022 30.8536 25.6022H27.4661C27.35 25.6022 27.2465 25.5287 27.2082 25.4191L23.1578 13.8193C23.0958 13.6417 23.2276 13.4561 23.4157 13.4561H25.089C25.2068 13.4561 25.3114 13.5316 25.3484 13.6435L28.9666 24.581C28.9942 24.6643 29.0721 24.7206 29.1599 24.7206C29.2477 24.7206 29.3256 24.6643 29.3532 24.581L32.9714 13.6435C33.0084 13.5316 33.1129 13.4561 33.2308 13.4561H34.9041C35.0922 13.4561 35.224 13.6417 35.162 13.8193L31.1115 25.4191Z"
+        fill="currentColor"
+      />
+      <defs>
+        <filter
+          id="filter0_d_21_1677"
+          x="0.124722"
+          y="0.124722"
+          width="22.7729"
+          height="33.6097"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset />
+          <feGaussianBlur stdDeviation="2.43764" />
+          <feComposite in2="hardAlpha" operator="out" />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 0.219608 0 0 0 0 0.803922 0 0 0 0 0.501961 0 0 0 0.3 0"
+          />
+          <feBlend
+            mode="normal"
+            in2="BackgroundImageFix"
+            result="effect1_dropShadow_21_1677"
+          />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="effect1_dropShadow_21_1677"
+            result="shape"
+          />
+        </filter>
+        <filter
+          id="filter1_i_21_1677"
+          x="9.28003"
+          y="21.5739"
+          width="4.37112"
+          height="4.37112"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="BackgroundImageFix"
+            result="shape"
+          />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset />
+          <feGaussianBlur stdDeviation="0.546392" />
+          <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 0.219608 0 0 0 0 0.803922 0 0 0 0 0.501961 0 0 0 0.3 0"
+          />
+          <feBlend
+            mode="normal"
+            in2="shape"
+            result="effect1_innerShadow_21_1677"
+          />
+        </filter>
+      </defs>
+    </svg>
+  );
+};
+export default Logo;

package/src/components/Button.tsx

@@ -9,6 +9,10 @@ export interface ButtonProps
   disabled?: boolean;
 }
 
+/**
+ *
+ * @deprecated Use ui/Button
+ */
 export function PrimaryButton({
   children,
   onClick,
@@ -41,9 +45,9 @@ const Button: FC<ButtonProps> = ({
         "font-sans font-[12px] tracking-[0.04em] py-1 px-2 rounded whitespace-nowrap group relative text-primary",
         {
           "font-bold": variant === "primary",
-          "bg-base hover:bg-base text-fill disabled:bg-fill disabled:text-base":
+          "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-base":
+          "bg-transparent border border-primary text-primary hover:border-highlight hover:text-highlight disabled:bg-fill disabled:text-background":
             variant !== "primary",
         }
       )}
@@ -57,4 +61,8 @@ const Button: FC<ButtonProps> = ({
   );
 };
 
+/**
+ *
+ * @deprecated Use ui/Button
+ */
 export default Button;

package/src/components/Dropdown.tsx

@@ -81,9 +81,9 @@ const Dropdown: React.FC<DropdownProps> = ({
                       ev.preventDefault();
                       handleSelect(option, idx);
                     }}
-                    className={`text-left px-2 py-1 hover:bg-base hover:text-highlight  ${
+                    className={`text-left px-2 py-1 hover:bg-background hover:text-highlight  ${
                       idx === selectedOption &&
-                      "font-bold bg-base hover:bg-base truncate"
+                      "font-bold bg-background hover:bg-background truncate"
                     }`}
                   >
                     {option}

package/src/components/{dashboard/Grid.stories.tsx → Grid.stories.tsx}

@@ -1,8 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { Grid } from "./Grid";
-import { Tree } from "./Tree";
-import { Dropdown } from "./Dropdown";
-import { FormGroup } from "./FormGroup";
+import { Tree } from "./dashboard/Tree";
+import { Dropdown } from "./dashboard/Dropdown";
 
 const meta: Meta<typeof Grid> = { component: Grid };
 
@@ -24,26 +23,18 @@ export const Default: Story = {
           </Tree.Node>
         </Tree.Node>
       </Tree>
-      <div className="font-serif text-xs w-full h-full flex justify-between items-center px-3 text-white">
+      <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 gap-1 flex-shrink-0">
+        <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>
-        <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>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>

package/src/components/{dashboard/Grid.tsx → Grid.tsx}

@@ -1,4 +1,6 @@
+import classNames from "classnames";
 import { Children, useEffect, useRef } from "react";
+import { ScrollArea } from "./ui/scroll-area";
 
 type GridProps = {
   children: React.ReactNode | React.ReactNode[];
@@ -70,41 +72,54 @@ export function Grid({ children }: GridProps): React.ReactElement {
   }, []);
 
   return (
-    <div className="flex w-full h-screen">
+    <div className="flex h-screen">
       <div
         ref={leftColRef}
-        className="relative h-full border-r border-dark-gray"
+        className="relative border-r border-border"
         style={{ width: 300 }}
       >
         <Grid.Column>
           {header1}
-          {body1}
+          <ScrollArea style={{ height: "calc(100vh - 50px)" }}>
+            {body1}
+          </ScrollArea>
         </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"
+          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="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 }}
+        className={classNames("", {
+          "w-full": !header3 && !body3,
+        })}
       >
         <Grid.Column>
-          {header3}
-          {body3}
+          {header2}
+          <ScrollArea style={{ height: "calc(100vh - 50px)" }}>
+            {body2}
+          </ScrollArea>
         </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>
+      {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>
   );
 }
@@ -116,10 +131,8 @@ type GridChildProps = {
 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>
+    <div className="flex flex-col">
+      <div className="flex items-center border-b border-border">{header}</div>
       {body}
     </div>
   );

package/src/components/RichTextEditor/ContentEditable.tsx

@@ -1,4 +1,112 @@
-import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import * as React from "react";
+import { useCallback, useState } from "react";
+import "../../richtext/shadowRootPolyFill";
+
+export type Props = {
+  ariaActiveDescendant?: React.AriaAttributes["aria-activedescendant"];
+  ariaAutoComplete?: React.AriaAttributes["aria-autocomplete"];
+  ariaControls?: React.AriaAttributes["aria-controls"];
+  ariaDescribedBy?: React.AriaAttributes["aria-describedby"];
+  ariaExpanded?: React.AriaAttributes["aria-expanded"];
+  ariaLabel?: React.AriaAttributes["aria-label"];
+  ariaLabelledBy?: React.AriaAttributes["aria-labelledby"];
+  ariaMultiline?: React.AriaAttributes["aria-multiline"];
+  ariaOwns?: React.AriaAttributes["aria-owns"];
+  ariaRequired?: React.AriaAttributes["aria-required"];
+  autoCapitalize?: HTMLDivElement["autocapitalize"];
+  "data-testid"?: string | null | undefined;
+} & React.AllHTMLAttributes<HTMLDivElement>;
+
+export function ContentEditable({
+  ariaActiveDescendant,
+  ariaAutoComplete,
+  ariaControls,
+  ariaDescribedBy,
+  ariaExpanded,
+  ariaLabel,
+  ariaLabelledBy,
+  ariaMultiline,
+  ariaOwns,
+  ariaRequired,
+  autoCapitalize,
+  className,
+  id,
+  role = "textbox",
+  spellCheck = true,
+  style,
+  tabIndex,
+  "data-testid": testid,
+  ...rest
+}: Props): JSX.Element {
+  const [editor] = useLexicalComposerContext();
+  const [isEditable, setEditable] = useState(false);
+
+  const ref = useCallback(
+    (rootElement: null | HTMLElement) => {
+      editor.setRootElement(rootElement);
+      const shadowRoot = document.getElementById("val-ui")?.shadowRoot;
+      if (!shadowRoot) {
+        return;
+      }
+      // Lexical doesnt officially support shadow dom yet, but this is a workaround
+      // It happens to work in firefox since their document.getSelection pierces shadow dom
+      // Chrome does not do this,. but has getSelection on the shadowRoot
+      // Safari does not have getSelection on the shadowRoot, and document.getSelection does not pierce shadow dom
+      // So for Safari this is polyfilled in shadowRootPolyFill.js
+      // https://github.com/facebook/lexical/issues/2119
+      //
+      // In the code below we have a hack to override the window object on the editor with the shadowRoot
+      // then it will call getSelection on the shadowRoot instead of the document
+      if ("getSelection" in shadowRoot) {
+        // safari (if polyfilled) and chrome
+        editor._window = shadowRoot as unknown as Window;
+        return;
+      }
+    },
+    [editor]
+  );
+
+  React.useLayoutEffect(() => {
+    setEditable(editor.isEditable());
+    return editor.registerEditableListener((currentIsEditable) => {
+      setEditable(currentIsEditable);
+    });
+  }, [editor]);
+
+  return (
+    <div
+      {...rest}
+      aria-activedescendant={!isEditable ? undefined : ariaActiveDescendant}
+      aria-autocomplete={!isEditable ? "none" : ariaAutoComplete}
+      aria-controls={!isEditable ? undefined : ariaControls}
+      aria-describedby={ariaDescribedBy}
+      aria-expanded={
+        !isEditable
+          ? undefined
+          : role === "combobox"
+          ? !!ariaExpanded
+          : undefined
+      }
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledBy}
+      aria-multiline={ariaMultiline}
+      aria-owns={!isEditable ? undefined : ariaOwns}
+      aria-readonly={!isEditable ? true : undefined}
+      aria-required={ariaRequired}
+      autoCapitalize={autoCapitalize}
+      className={className}
+      contentEditable={isEditable}
+      data-testid={testid}
+      id={id}
+      ref={ref}
+      role={role}
+      spellCheck={spellCheck}
+      style={style}
+      tabIndex={tabIndex}
+    />
+  );
+}
 
 export default function LexicalContentEditable({
   className,

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

@@ -300,7 +300,7 @@ const Toolbar: FC<ToolbarSettingsProps> = ({
   };
 
   return (
-    <div className="sticky top-0 border-b bg-base border-highlight flex flex-col">
+    <div className="sticky top-0 border-b bg-background border-highlight flex flex-col">
       <div className="flex flex-row gap-1">
         <Dropdown
           options={Object.values(blockTypes)}
@@ -379,7 +379,7 @@ const Toolbar: FC<ToolbarSettingsProps> = ({
           <input
             type="text"
             placeholder="Enter URL"
-            className="w-1/3 text-primary bg-base px-2"
+            className="w-1/3 text-primary bg-background px-2"
             value={url}
             onChange={(ev) => {
               ev.preventDefault();

package/src/components/RichTextEditor/RichTextEditor.tsx

@@ -82,7 +82,7 @@ export const RichTextEditor: FC<RichTextEditorProps> = ({
       <RichTextPlugin
         contentEditable={
           <div
-            className="text-white border-b border-highlight font-roboto"
+            className="font-sans border-b text-primary border-highlight"
             style={{
               minHeight: windowSize?.innerHeight
                 ? windowSize?.innerHeight - TOOLBAR_HEIGHT