@valbuild/ui 0.21.2 → 0.22.0

package/src/richtext/shadowRootPolyFill.js

@@ -0,0 +1,115 @@
+// POLYFILL
+// getSelection on shawdowRoot polyfill for safari and firefox
+// https://github.com/GoogleChromeLabs/shadow-selection-polyfill/issues/11
+// https://github.com/GoogleChromeLabs/shadow-selection-polyfill/issues/11#issue-834214496
+// Alternative:
+// https://github.com/codemirror/view/blob/5dfda8ed7929915f63bc82251f2b6229c789c4a4/src/domobserver.ts#L447
+
+const SUPPORTS_SHADOW_SELECTION =
+  typeof window.ShadowRoot.prototype.getSelection === "function";
+const SUPPORTS_BEFORE_INPUT =
+  typeof window.InputEvent.prototype.getTargetRanges === "function";
+const IS_FIREFOX =
+  window.navigator.userAgent.toLowerCase().indexOf("firefox") > -1;
+
+class ShadowSelection {
+  constructor() {
+    this._ranges = [];
+  }
+
+  getRangeAt(index) {
+    return this._ranges[index];
+  }
+
+  addRange(range) {
+    this._ranges.push(range);
+  }
+
+  removeAllRanges() {
+    this._ranges = [];
+  }
+
+  // todo: implement remaining `Selection` methods and properties.
+}
+
+function getActiveElement() {
+  let active = document.activeElement;
+
+  // eslint-disable-next-line no-constant-condition
+  while (true) {
+    if (active && active.shadowRoot && active.shadowRoot.activeElement) {
+      active = active.shadowRoot.activeElement;
+    } else {
+      break;
+    }
+  }
+
+  return active;
+}
+
+if (IS_FIREFOX && !SUPPORTS_SHADOW_SELECTION) {
+  window.ShadowRoot.prototype.getSelection = function () {
+    return document.getSelection();
+  };
+}
+
+if (!IS_FIREFOX && !SUPPORTS_SHADOW_SELECTION && SUPPORTS_BEFORE_INPUT) {
+  let processing = false;
+  let selection = new ShadowSelection();
+
+  window.ShadowRoot.prototype.getSelection = function () {
+    return selection;
+  };
+
+  window.addEventListener(
+    "selectionchange",
+    () => {
+      if (!processing) {
+        processing = true;
+
+        const active = getActiveElement();
+
+        if (active && active.getAttribute("contenteditable") === "true") {
+          //https://stackoverflow.com/questions/60581285/execcommand-is-now-obsolete-whats-the-alternative
+          //TLDR: its deprecated but there is not alternative (as of 2023-10-26)
+          document.execCommand("indent");
+        } else {
+          selection.removeAllRanges();
+        }
+
+        processing = false;
+      }
+    },
+    true
+  );
+
+  window.addEventListener(
+    "beforeinput",
+    (event) => {
+      if (processing) {
+        const ranges = event.getTargetRanges();
+        const range = ranges[0];
+
+        const newRange = new Range();
+
+        newRange.setStart(range.startContainer, range.startOffset);
+        newRange.setEnd(range.endContainer, range.endOffset);
+
+        selection.removeAllRanges();
+        selection.addRange(newRange);
+
+        event.preventDefault();
+        event.stopImmediatePropagation();
+      }
+    },
+    true
+  );
+
+  window.addEventListener(
+    "selectstart",
+    () => {
+      selection.removeAllRanges();
+    },
+    true
+  );
+}

package/src/server.ts

@@ -9,11 +9,14 @@
 
 import type { RequestHandler } from "express";
 
+type Vite = typeof import("vite");
 export function createRequestHandler(): RequestHandler {
   if (typeof window === "undefined") {
     const vite = (async () => {
       const { fileURLToPath, URL: URL_noresolve } = await import("node:url");
-      const { createServer } = await import(/* @vite-ignore */ "v" + "ite");
+      const { createServer } = await (import(
+        /* @vite-ignore */ "v" + "ite"
+      ) as Promise<Vite>);
       const vite = await createServer({
         root: fileURLToPath(new URL_noresolve("..", import.meta.url)),
         configFile: fileURLToPath(
@@ -31,8 +34,42 @@ export function createRequestHandler(): RequestHandler {
         res.statusCode = 200;
         res.setHeader("Content-Type", "text/css");
         return res.end(style);
+      } else if (req.url.startsWith("/edit")) {
+        const html = (await vite).transformIndexHtml(
+          req.url,
+          `
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Val</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
+`
+        );
+        return res.end(await html);
       } else {
-        return next();
+        // TODO: error handling
+        try {
+          const transformed = await (await vite).transformRequest(req.url);
+          if (transformed) {
+            const { code, etag } = transformed;
+            return res
+              .header({ "Content-Type": "application/javascript", Etag: etag })
+              .end(code);
+          }
+          return next();
+        } catch (e) {
+          if (e instanceof Error) {
+            (await vite).ssrFixStacktrace(e);
+          }
+          return next(e);
+        }
       }
     };
   } else {

package/src/utils/resolvePath.ts

@@ -13,7 +13,6 @@ export function resolvePath(sourcePath: SourcePath, modules: Modules) {
   const [moduleId, modulePath] =
     Internal.splitModuleIdAndModulePath(sourcePath);
   const valModule = modules[moduleId];
-  console.log("resolvePath", sourcePath, moduleId, modulePath, modules);
   if (!valModule?.source) {
     return result.err({
       message: `Module "${moduleId}" has no source`,

package/src/vite-server.ts

@@ -1,8 +1,25 @@
 import type { RequestHandler } from "express";
 
+const script = "/**REPLACE:SCRIPT*/";
+
 export function createRequestHandler(): RequestHandler {
-  return (_req, _res, next) => {
-    // NO-OP
-    next();
+  return (req, res, next) => {
+    if (req.url.startsWith("/edit")) {
+      res.end(`<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Val</title>
+    <script>${Buffer.from(script, "base64").toString("utf-8")}</script>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
+`);
+    } else {
+      next();
+    }
   };
 }

package/tailwind.config.js

@@ -3,69 +3,81 @@ module.exports = {
   content: [__dirname + "/src/**/*.{js,ts,jsx,tsx}"],
   darkMode: ["class", '[data-mode="dark"]'],
   theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
     zIndex: {
       hover: 1,
       window: 2,
       full: 3,
       overlay: 4,
+      50: 50,
     },
-    colors: {
-      base: "var(--val-theme-base)",
-      highlight: "var(--val-theme-highlight)",
-      border: "var(--val-theme-border)",
-      fill: "var(--val-theme-fill)",
-      primary: "var(--val-theme-primary)",
-      //
-      white: "#FCFCFC",
-      "light-gray": "#D6D6D6",
-      "dark-gray": "#575757",
-      "medium-black": "#303030",
-      "warm-black": "#1A1A1A",
-      yellow: "#FFFF00",
-      red: "#F02929",
-      green: "#1CED1C",
-    },
-    spacing: {
-      0: "0px",
-      1: "4px",
-      2: "8px",
-      3: "12px",
-      4: "16px",
-    },
-    screens: {
-      tablet: "640px",
-    },
+
     fontFamily: {
       sans: "'Roboto', sans-serif",
-      serif: "'JetBrains Mono', monospace",
+      serif: "'Space Mono', monospace",
     },
-    keyframes: {
-      rotateLeft: {
-        "0%": { transform: "rotate(0deg)" },
-        "100%": { transform: "rotate(45deg)" },
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
       },
-      rotateRight: {
-        "0%": { transform: "rotate(0deg)" },
-        "100%": { transform: "rotate(-45deg)" },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
       },
-      spin: {
-        "0%": { transform: "rotate(0deg)" },
-        "100%": { transform: "rotate(360deg)" },
+      keyframes: {
+        "accordion-down": {
+          from: { height: 0 },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: 0 },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
       },
-    },
-    animation: {
-      rotateLeft: "rotateLeft 200ms ease-in-out",
-      rotateRight: "rotateRight 200ms ease-in-out",
-      spin: "spin 1s linear infinite",
-    },
-    transitionProperty: {
-      opacity: ["opacity"],
     },
   },
-  plugins: [
-    function ({ addVariant }) {
-      addVariant("all-but-last-child", "& > *:not(:last-child)");
-      addVariant("children", "& *");
-    },
-  ],
+  plugins: [require("tailwindcss-animate")],
 };

package/tsconfig.json

@@ -12,7 +12,8 @@
     "target": "ES5",
     "outDir": "dist",
     "rootDir": "src",
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "baseUrl": "."
   },
   "include": ["src/**/*"]
 }

package/vite.config.ts

@@ -1,9 +1,16 @@
+import path from "path";
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  base: "/api/val/static",
   plugins: [react()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
   build: {
     lib: {
       entry: {
@@ -30,4 +37,7 @@ export default defineConfig({
       external: ["react", "react/jsx-runtime", "react/jsx-dev-runtime"],
     },
   },
+  optimizeDeps: {
+    include: ["react/jsx-runtime", "react/jsx-dev-runtime"],
+  },
 });

package/src/components/dashboard/ValDashboard.tsx

@@ -1,150 +0,0 @@
-"use client";
-
-import { SerializedModule } from "@valbuild/core";
-import { Json } from "@valbuild/core/src/Json";
-import { ValApi } from "@valbuild/core";
-import { FC, useEffect, useState } from "react";
-import { Dropdown } from "./Dropdown";
-import { FormGroup } from "./FormGroup";
-import { Grid } from "./Grid";
-import { Tree } from "./Tree";
-
-interface ValDashboardProps {
-  showDashboard: boolean;
-  editMode: boolean;
-  valApi: ValApi;
-}
-export const ValDashboard: FC<ValDashboardProps> = ({
-  showDashboard,
-  editMode,
-}) => {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [modules, setModules] = useState<SerializedModule[]>([]);
-  const [selectedPath, setSelectedPath] = useState<string>("");
-  const [selectedModule, setSelectedModule] = useState<
-    | {
-        [key: string]: {
-          path: string;
-          type: string;
-        };
-      }[]
-    | undefined
-  >();
-
-  useEffect(() => {
-    // valApi.getModules({ patch: true, includeSource: true }).then((modules) => {
-    //   // TODO:
-    // });
-  }, []);
-
-  useEffect(() => {
-    const newModule = modules.find((module) => module.path === selectedPath);
-    if (newModule) {
-      const children = mapChildren(newModule);
-      console.log("children", children);
-      setSelectedModule(children);
-    }
-  }, [selectedPath]);
-
-  const mapChildren = (module: SerializedModule) => {
-    if (module) {
-      if (module.schema.type === "array") {
-        return (module.source as Json[]).map((child) => {
-          const newModule: {
-            [key: string]: {
-              path: string;
-              type: string;
-            };
-          } = {};
-          if (child) {
-            for (const key of Object.keys(child)) {
-              // eslint-disable-next-line @typescript-eslint/no-explicit-any
-              const type = (module.schema as any).item.items[key]
-                .type as string;
-              if (key !== "rank" && type !== "richtext") {
-                newModule[key] = {
-                  path: key,
-                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                  type: (module.schema as any).item.items[key].type as string,
-                };
-              }
-            }
-          }
-          return newModule;
-        });
-      } else {
-        const child = module.source as Json;
-        const newModule: {
-          [key: string]: {
-            path: string;
-            type: string;
-          };
-        } = {};
-        if (child) {
-          for (const key of Object.keys(child)) {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            const type = (module.schema as any).items[key].type as string;
-            if (key !== "rank" && type !== "richtext") {
-              newModule[key] = {
-                path: key,
-                type: type,
-              };
-            }
-          }
-        }
-        return [newModule];
-      }
-    }
-  };
-
-  return (
-    <>
-      {showDashboard && editMode && (
-        <div className="bg-base w-screen fixed z-10 top-[68.54px] text-white overflow-hidden">
-          <Grid>
-            {modules && (
-              <Dropdown
-                options={modules.map((module) => module.path)}
-                onClick={(path) => setSelectedPath(path)}
-              />
-            )}
-            {selectedModule && (
-              <Tree>
-                {selectedModule.map((child, idx) => {
-                  return (
-                    <Tree.Node
-                      key={idx}
-                      path={`Section ${idx + 1}`}
-                      type="section"
-                    >
-                      {Object.values(child).map((value, idx2) => (
-                        <Tree.Node
-                          key={idx2}
-                          path={value.path}
-                          type={value.type as "string" | "image" | "section"}
-                        />
-                      ))}
-                    </Tree.Node>
-                  );
-                })}
-              </Tree>
-            )}
-            <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 flex-shrink-0 gap-1">
-                <span className="w-fit">+</span>
-                <span className="w-fit">Add item</span>
-              </button>
-            </div>
-            <FormGroup>
-              <div>test</div>
-              <div>test</div>
-              <div>test</div>
-            </FormGroup>
-            <div>content</div>
-          </Grid>
-        </div>
-      )}
-    </>
-  );
-};