@valbuild/ui 0.21.2 → 0.22.0

package/src/components/ui/select.tsx

@@ -0,0 +1,119 @@
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown } from "lucide-react";
+
+import { cn } from "../../lib/utils";
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="w-4 h-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+    {...props}
+  />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="w-4 h-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+};

package/src/components/ui/switch.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+
+import { cn } from "../../lib/utils";
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-[22px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-accent data-[state=unchecked]:bg-primary",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-[18px] w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+      )}
+    />
+  </SwitchPrimitives.Root>
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch };

package/src/components/ui/tabs.tsx

@@ -0,0 +1,53 @@
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+
+import { cn } from "../../lib/utils";
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      className
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/src/components/ui/toggle.tsx

@@ -0,0 +1,43 @@
+import * as React from "react";
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../../lib/utils";
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-10 px-3",
+        sm: "h-9 px-2.5",
+        lg: "h-11 px-5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+const Toggle = React.forwardRef<
+  React.ElementRef<typeof TogglePrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, ...props }, ref) => (
+  <TogglePrimitive.Root
+    ref={ref}
+    className={cn(toggleVariants({ variant, size, className }))}
+    {...props}
+  />
+));
+
+Toggle.displayName = TogglePrimitive.Root.displayName;
+
+export { Toggle, toggleVariants };

package/src/components/ui/tooltip.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+
+import { cn } from "../../lib/utils";
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/src/components/usePatch.ts

@@ -0,0 +1,86 @@
+import { SourcePath, Internal, ModuleId, ValApi } from "@valbuild/core";
+import { result } from "@valbuild/core/fp";
+import { PatchJSON } from "@valbuild/core/patch";
+import { useCallback, useEffect, useState } from "react";
+import { IValStore } from "../exports";
+
+export type PatchCallback = (modulePath: string) => Promise<PatchJSON>;
+
+export type InitPatchCallback = (
+  currentPath: SourcePath
+) => (callback: PatchCallback) => void;
+
+export type PatchCallbackState = {
+  [path: SourcePath]: () => Promise<PatchJSON>;
+};
+
+export function usePatch(
+  paths: SourcePath[],
+  api: ValApi,
+  valStore: IValStore
+) {
+  const [state, setState] = useState<PatchCallbackState>({});
+
+  const initPatchCallback: InitPatchCallback = useCallback(
+    (currentPath: SourcePath) => {
+      return (callback: PatchCallback) => {
+        const patchPath = Internal.createPatchJSONPath(
+          Internal.splitModuleIdAndModulePath(currentPath)[1]
+        );
+        setState((prev) => {
+          return {
+            ...prev,
+            [currentPath]: () => callback(patchPath),
+          };
+        });
+      };
+    },
+    []
+  );
+  useEffect(() => {
+    setState((prev) => {
+      const newState: PatchCallbackState = {};
+      // filter out paths that no longer are selected
+      for (const path of paths) {
+        if (prev[path]) {
+          newState[path] = prev[path];
+        }
+      }
+      if (Object.keys(newState).length === Object.keys(prev).length) {
+        // avoid infinite loops
+        return prev;
+      }
+      return newState;
+    });
+  }, [paths]);
+
+  const onSubmitPatch = useCallback(async () => {
+    const patches: Record<ModuleId, PatchJSON> = {};
+    for (const path in state) {
+      const [moduleId] = Internal.splitModuleIdAndModulePath(
+        path as SourcePath
+      );
+      const patch = await state[path as SourcePath]();
+      patches[moduleId] = patch;
+    }
+    return Promise.all(
+      Object.entries(patches).map(([moduleId, patch]) =>
+        api.postPatches(moduleId as ModuleId, patch).then((res) => {
+          if (result.isErr(res)) {
+            throw res.error;
+          } else {
+            res.value;
+          }
+        })
+      )
+    ).then(() => {
+      return valStore.update(
+        paths.map(
+          (path) => Internal.splitModuleIdAndModulePath(path as SourcePath)[0]
+        )
+      );
+    });
+  }, [state]);
+
+  return { initPatchCallback, onSubmitPatch };
+}

package/src/components/useTheme.ts

@@ -0,0 +1,45 @@
+import { useState, useEffect } from "react";
+import { Theme } from "./ValOverlayContext";
+
+export function useTheme(defaultTheme: Theme = "dark") {
+  const [theme, setTheme] = useState<Theme>(defaultTheme);
+
+  useEffect(() => {
+    if (localStorage.getItem("val-theme") === "light") {
+      setTheme("light");
+    } else if (localStorage.getItem("val-theme") === "dark") {
+      setTheme("dark");
+    } else if (
+      window.matchMedia &&
+      window.matchMedia("(prefers-color-scheme: dark)").matches
+    ) {
+      setTheme("dark");
+    } else if (
+      window.matchMedia &&
+      window.matchMedia("(prefers-color-scheme: light)").matches
+    ) {
+      setTheme("light");
+    }
+    const themeListener = (e: MediaQueryListEvent) => {
+      if (!localStorage.getItem("val-theme")) {
+        setTheme(e.matches ? "dark" : "light");
+      }
+    };
+    window
+      .matchMedia("(prefers-color-scheme: dark)")
+      .addEventListener("change", themeListener);
+    return () => {
+      window
+        .matchMedia("(prefers-color-scheme: dark)")
+        .removeEventListener("change", themeListener);
+    };
+  }, []);
+
+  return [
+    theme,
+    (theme: Theme) => {
+      localStorage.setItem("val-theme", theme);
+      setTheme(theme);
+    },
+  ] as const;
+}

package/src/exports.ts

@@ -1,5 +1,6 @@
 export { RichTextEditor } from "./components/RichTextEditor/RichTextEditor";
 export { ValOverlay } from "./components/ValOverlay";
 export { type Inputs } from "./components/forms/Form";
-export { ValDashboard } from "./components/dashboard/ValDashboard";
+export { ValFullscreen } from "./components/ValFullscreen";
 export { parseRichTextSource } from "./richtext/conversion/parseRichTextSource";
+export { type IValStore } from "./lib/IValStore";

package/src/index.css

@@ -4,76 +4,112 @@
 */
 @config "../tailwind.config.js";
 
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 @layer base {
-  /* For use with Shadow DOM, copied from the TailwindCSS prelude */
+  /* :host for use with Shadow DOM, copied from the TailwindCSS prelude */
   :host {
-    line-height: 1.5;
-    -webkit-text-size-adjust: 100%;
-    tab-size: 4;
-    font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont,
-      "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
-      "Helvetica Neue", sans-serif;
-    font-feature-settings: normal;
-    margin: 0;
-
-    /* theme properties - if updated remember to update the .storybook/theme.css file as well */
-    --val-theme-white: #fcfcfc;
-    --val-theme-light-gray: #d6d6d6;
-    --val-theme-dark-gray: #575757;
-    --val-theme-medium-black: #303030;
-    --val-theme-warm-black: #1a1a1a;
-    --val-theme-yellow: #ffff00;
-    --val-theme-red: #f02929;
-    --val-theme-green: #1ced1c;
-
-    /* light theme */
-    --val-theme-base: var(--val-theme-white);
-    --val-theme-highlight: var(--val-theme-yellow);
-    --val-theme-border: var(--val-theme-light-gray);
-    --val-theme-fill: var(--val-theme-light-gray);
-    --val-theme-primary: var(--val-theme-warm-black);
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+
+    --muted: 0 0% 57.3%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+
+    --accent: 159, 60%, 51%, 1;
+    --accent-foreground: 222.2 47.4% 11.2%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+
+    --radius: 0.5rem;
+  }
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+
+    --muted: 0 0% 57.3%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+
+    --accent: 159, 60%, 51%, 1;
+    --accent-foreground: 222.2 47.4% 11.2%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+
+    --radius: 0.5rem;
   }
 
   /* dark theme */
   *[data-mode="dark"] {
-    --val-theme-base: var(--val-theme-warm-black);
-    --val-theme-highlight: var(--val-theme-yellow);
-    --val-theme-border: var(--val-theme-dark-gray);
-    --val-theme-fill: var(--val-theme-medium-black);
-    --val-theme-primary: var(--val-theme-white);
-  }
+    --background: 0 0% 4%;
+    --foreground: 210 40% 98%;
 
-  /* text area auto-grow */
-  .grow-wrap {
-    /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
-    display: grid;
-  }
-  .grow-wrap::after {
-    /* Note the weird space! Needed to preventy jumpy behavior */
-    content: attr(data-replicated-value) " ";
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
 
-    /* This is how textarea text behaves */
-    white-space: pre-wrap;
+    --muted: 178, 23%, 76%, 1;
+    --muted-foreground: 215 20.2% 65.1%;
 
-    /* Hidden from view, clicks, and screen readers */
-    visibility: hidden;
+    --accent: 159, 60%, 51%, 1;
+    --accent-foreground: 210 40% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
   }
-  .grow-wrap > textarea {
-    /* Firefox shows scrollbar on growth, you can hide like this. */
-    overflow: hidden;
+}
+
+@layer base {
+  * {
+    @apply border-border;
   }
-  .grow-wrap > textarea,
-  .grow-wrap::after {
-    /* Identical styling required!! */
-    border: 1px solid black;
-    padding: 0.5rem;
-    font: inherit;
-
-    /* Place on top of each other */
-    grid-area: 1 / 1 / 2 / 2;
+  body {
+    @apply bg-background text-foreground;
   }
 }
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;

package/src/lib/IValStore.ts

@@ -0,0 +1,6 @@
+import { ModuleId } from "@valbuild/core";
+
+export interface IValStore {
+  updateAll(): Promise<void>;
+  update(moduleIds: ModuleId[]): Promise<void>;
+}

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/main.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import "./index.css";
+
+ReactDOM.createRoot(document.getElementById("root")).render(
+  <React.StrictMode>
+    <App></App>
+  </React.StrictMode>
+);

package/src/richtext/conversion/lexicalToRichTextSource.ts

@@ -229,7 +229,6 @@ async function fromLexicalImageNode(
   files: Record<string, string>
 ) {
   if (node.src.startsWith("data:")) {
-    console.log("node", node);
     const sha256 = await Internal.getSHA256Hash(textEncoder.encode(node.src));
     const mimeType = getMimeType(node.src);
     if (mimeType === undefined) {