@valbuild/ui 0.26.0 → 0.28.0

package/src/components/ui/switch.tsx

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

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

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

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

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

@@ -1,45 +0,0 @@
-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/dto/SerializedSchema.ts

@@ -1,69 +0,0 @@
-export default {};
-// TODO:
-// import type { SerializedSchema as SerializedSchemaT } from "@valbuild/core";
-// import { z } from "zod";
-//
-// export const SerializedSchema: z.ZodType<SerializedSchemaT> = z.lazy(() => {
-//   const SerializedStringSchema = z.object({
-//     _type: z.literal("string"),
-//     opt: z.boolean(),
-//   });
-//   const SerializedBooleanSchema = z.object({
-//     _type: z.literal("boolean"),
-//     opt: z.boolean(),
-//   });
-//   const SerializedNumberSchema = z.object({
-//     _type: z.literal("number"),
-//     opt: z.boolean(),
-//   });
-//   const SerializedLiteralSchema = z.object({
-//     _type: z.literal("literal"),
-//     value: z.string(),
-//     opt: z.boolean(),
-//   });
-//   const SerializedObjectSchema = z.object({
-//     _type: z.literal("object"),
-//     opt: z.boolean(),
-//     items: z.record(SerializedSchema),
-//   });
-//   const SerializedOneOfSchema = z.object({
-//     _type: z.literal("oneOf"),
-//     opt: z.boolean(),
-//   });
-//   const SerializedArraySchema = z.object({
-//     _type: z.literal("array"),
-//     item: SerializedSchema,
-//     opt: z.boolean(),
-//   });
-//   const SerializedUnionSchema = z.object({
-//     _type: z.literal("union"),
-//     opt: z.boolean(),
-//   });
-//   const SerializedRichTextSchema = z.object({
-//     _type: z.literal("richtext"),
-//     opt: z.boolean(),
-//   });
-//   const SerializedImageSchema = z.object({
-//     _type: z.literal("image"),
-//     opt: z.boolean(),
-//   });
-//   const SerializedI18nSchema = z.object({
-//     _type: z.literal("i18n"),
-//     locales: z.array(z.string()),
-//     item: SerializedSchema,
-//     opt: z.boolean(),
-//   });
-//   return z.union([
-//     SerializedStringSchema,
-//     SerializedLiteralSchema,
-//     SerializedBooleanSchema,
-//     SerializedNumberSchema,
-//     SerializedObjectSchema,
-//     SerializedOneOfSchema,
-//     SerializedArraySchema,
-//     SerializedUnionSchema,
-//     SerializedRichTextSchema,
-//     SerializedImageSchema,
-//     SerializedI18nSchema,
-//   ]);
-// });

package/src/dto/Session.ts

@@ -1,12 +0,0 @@
-import { z } from "zod";
-import { SessionMode } from "./SessionMode";
-
-export const Session = z.object({
-  id: z.string(),
-  mode: SessionMode,
-  full_name: z.string().nullable(),
-  username: z.string().nullable(),
-  avatar_url: z.string().url().nullable(),
-});
-
-export type Session = z.infer<typeof Session>;

package/src/dto/SessionMode.ts

@@ -1,5 +0,0 @@
-import { z } from "zod";
-
-export const SessionMode = z.union([z.literal("local"), z.literal("proxy")]);
-
-export type SessionMode = z.infer<typeof SessionMode>;

package/src/dto/Tree.ts

@@ -1,18 +0,0 @@
-import { z } from "zod";
-
-export const Tree = z.object({
-  git: z.object({
-    commit: z.string(),
-    branch: z.string(),
-  }),
-  modules: z.record(
-    z.object({
-      // TODO: types!
-      schema: z.any().optional(),
-      source: z.any().optional(),
-      // TODO: patches
-    })
-  ),
-});
-
-export type Tree = z.infer<typeof Tree>;

package/src/exports.ts

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

package/src/index.css

@@ -1,115 +0,0 @@
-/*
-  Need to explicitly set config path, otherwise it may fail to resolve when
-  built from outside packages/ui.
-*/
-@config "../tailwind.config.js";
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  /* :host for use with Shadow DOM, copied from the TailwindCSS prelude */
-  :host {
-    --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"] {
-    --background: 0 0% 4%;
-    --foreground: 210 40% 98%;
-
-    --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%;
-
-    --muted: 178, 23%, 76%, 1;
-    --muted-foreground: 215 20.2% 65.1%;
-
-    --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%;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}

package/src/index.tsx

@@ -1,14 +0,0 @@
-/*
- * This module is the entrypoint of @valbuild/ui until the package is built with
- * Vite. It is used only as a shim during local development, and is actually not
- * part of the build output meant for consumers.
- *
- * After building with Vite, this entrypoint is replaced by ./vite-index.tsx,
- * which is optimized for consumers.
- */
-
-export * from "./exports";
-
-export function Style(): JSX.Element | null {
-  return <link rel="stylesheet" href="/api/val/static/style.css" />;
-}

package/src/lib/IValStore.ts

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

package/src/lib/utils.ts

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

package/src/main.jsx

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