@vertebr/react 0.3.0 → 0.4.0

package/dist/styles/modal.css

@@ -25,6 +25,24 @@
   font-family: var(--vb-font);
 }
 
+.vertebr-modal-form {
+  width: min(100%, 960px);
+  max-height: min(92vh, 920px);
+}
+
+.vertebr-modal-form .vertebr-modal-body {
+  padding: 0;
+  min-height: 0;
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.vertebr-modal-form .vertebr-form {
+  min-height: 0;
+}
+
 .vertebr-modal-head {
   display: flex;
   align-items: flex-start;

package/dist/styles/panel.css

@@ -33,6 +33,12 @@
   color: var(--vb-text-subtle);
 }
 
+.vertebr-panel-head-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.55rem;
+}
+
 .vertebr-count {
   font-family: var(--vb-mono);
   font-size: 0.7rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertebr/react",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Vertebr admin dashboard UI",
   "type": "module",
   "main": "./dist/index.js",
@@ -18,7 +18,7 @@
     "dist"
   ],
   "scripts": {
-    "build": "tsc -p tsconfig.json && rm -rf dist/styles dist/themes && cp src/styles.css dist/styles.css && cp -R src/styles dist/styles && cp -R src/themes dist/themes",
+    "build": "rm -rf dist && tsc -p tsconfig.json && cp src/styles.css dist/styles.css && cp -R src/styles dist/styles && cp -R src/themes dist/themes",
     "typecheck": "tsc -p tsconfig.json --noEmit",
     "prepublishOnly": "npm run typecheck && npm run build"
   },

package/dist/components/config/form/helpers.d.ts

@@ -1,16 +0,0 @@
-import { z } from "zod";
-import type { FieldSchema } from "@vertebr/client";
-import type { ConfigFormVariant, FieldGroup } from "./types";
-export declare function buildZodSchema(schema: Record<string, FieldSchema>): z.ZodObject<Record<string, z.ZodTypeAny>, "strip", z.ZodTypeAny, {
-    [x: string]: any;
-}, {
-    [x: string]: any;
-}>;
-export declare function humanizeKey(key: string): string;
-export declare function isStockField(key: string, field?: FieldSchema): boolean;
-export declare function spanFor(key: string, field: FieldSchema, variant: ConfigFormVariant): "wide" | "full" | undefined;
-export declare function displayLabel(key: string, field: FieldSchema, group: string): string;
-export declare function groupFields(schema: Record<string, FieldSchema>, variant: ConfigFormVariant): FieldGroup[];
-export declare function firstImageUrl(value: unknown): string | null;
-export declare function findPrimaryImageKey(schema: Record<string, FieldSchema>, values: Record<string, unknown> | undefined): string | null;
-//# sourceMappingURL=helpers.d.ts.map

package/dist/components/config/form/helpers.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/components/config/form/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAGnD,OAAO,KAAK,EACV,iBAAiB,EAEjB,UAAU,EACX,MAAM,SAAS,CAAC;AAWjB,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC;;;;GAyBjE;AAED,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAK/C;AAMD,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,WAAW,GAAG,OAAO,CAGtE;AAED,wBAAgB,OAAO,CACrB,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,WAAW,EAClB,OAAO,EAAE,iBAAiB,GACzB,MAAM,GAAG,MAAM,GAAG,SAAS,CAK7B;AA0CD,wBAAgB,YAAY,CAC1B,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,WAAW,EAClB,KAAK,EAAE,MAAM,GACZ,MAAM,CAcR;AAgBD,wBAAgB,WAAW,CACzB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,EACnC,OAAO,EAAE,iBAAiB,GACzB,UAAU,EAAE,CA4Cd;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,CAU3D;AAED,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,EACnC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,GAC1C,MAAM,GAAG,IAAI,CASf"}

package/dist/components/config/form/helpers.js

@@ -1,186 +0,0 @@
-import { z } from "zod";
-import { isDescriptionField } from "../../../lib/description";
-import { isImageField, looksLikeUrl } from "../../../lib/images";
-const RECORD_GROUP_ORDER = [
-    "Details",
-    "Content",
-    "Pricing",
-    "Inventory",
-    "Media",
-    "Status",
-];
-export function buildZodSchema(schema) {
-    const shape = {};
-    for (const [key, field] of Object.entries(schema)) {
-        let zodField;
-        switch (field.type) {
-            case "number":
-                zodField = z.number();
-                if (field.min != null)
-                    zodField = zodField.min(field.min);
-                if (field.max != null)
-                    zodField = zodField.max(field.max);
-                break;
-            case "boolean":
-                zodField = z.boolean();
-                break;
-            case "file[]":
-                zodField = z.array(z.string());
-                break;
-            default:
-                zodField = z.string();
-        }
-        if (!field.required) {
-            zodField = zodField.optional();
-        }
-        shape[key] = zodField;
-    }
-    return z.object(shape);
-}
-export function humanizeKey(key) {
-    return key
-        .replace(/([a-z])([A-Z])/g, "$1 $2")
-        .replace(/[_-]+/g, " ")
-        .trim();
-}
-function escapeRegExp(value) {
-    return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-}
-export function isStockField(key, field) {
-    const hay = `${key} ${field?.label ?? ""}`;
-    return /(stock|inventory|qty|quantity)/i.test(hay);
-}
-export function spanFor(key, field, variant) {
-    if (field.type === "boolean")
-        return "full";
-    if (field.type === "richtext" || isDescriptionField(key, field))
-        return "full";
-    if (variant === "record" && isImageField(key, field))
-        return "full";
-    return undefined;
-}
-function inferConfigGroup(key, field) {
-    if (field.group?.trim())
-        return field.group.trim();
-    const source = field.label?.trim() || humanizeKey(key);
-    const words = source.split(/\s+/).filter(Boolean);
-    if (words.length >= 2)
-        return words[0];
-    return "General";
-}
-function inferRecordGroup(key, field) {
-    if (field.group?.trim())
-        return field.group.trim();
-    const k = key.toLowerCase();
-    const label = (field.label ?? "").toLowerCase();
-    const hay = `${k} ${label}`;
-    if (/(image|img|photo|avatar|thumbnail|thumb|cover|media_url)/i.test(hay)) {
-        return "Media";
-    }
-    if (/(price|cost|cents|amount|msrp)/i.test(hay)) {
-        return "Pricing";
-    }
-    if (/(stock|inventory|qty|quantity)/i.test(hay)) {
-        return "Inventory";
-    }
-    if (field.type === "boolean" ||
-        /(^|_)(active|enabled|published|status|visible)(_|$)/i.test(k) ||
-        /^(active|enabled|published|status|visible)$/i.test(label)) {
-        return "Status";
-    }
-    if (field.type === "richtext" ||
-        /(description|body|content|summary|bio)/i.test(hay)) {
-        return "Content";
-    }
-    return "Details";
-}
-export function displayLabel(key, field, group) {
-    const label = field.label?.trim() || humanizeKey(key);
-    const stripped = label.replace(new RegExp(`^${escapeRegExp(group)}\\s+`, "i"), "");
-    if (/^inventory$/i.test(group)) {
-        const stock = label.replace(/^stock\s+/i, "").trim();
-        if (stock && stock !== label)
-            return stock;
-    }
-    if (/^pricing$/i.test(group) && /cents/i.test(label)) {
-        return label.replace(/\s*\(cents\)/i, "").trim() || label;
-    }
-    return stripped || label;
-}
-function sortGroups(groups, variant) {
-    if (variant !== "record")
-        return groups;
-    const rank = (id) => {
-        const index = RECORD_GROUP_ORDER.indexOf(id);
-        return index === -1 ? RECORD_GROUP_ORDER.length + 1 : index;
-    };
-    return [...groups].sort((a, b) => rank(a.id) - rank(b.id));
-}
-export function groupFields(schema, variant) {
-    const order = [];
-    const map = new Map();
-    const explicit = new Set();
-    for (const entry of Object.entries(schema)) {
-        const [key, field] = entry;
-        const group = variant === "record"
-            ? inferRecordGroup(key, field)
-            : inferConfigGroup(key, field);
-        if (field.group?.trim())
-            explicit.add(group);
-        if (!map.has(group)) {
-            map.set(group, []);
-            order.push(group);
-        }
-        map.get(group).push(entry);
-    }
-    if (variant === "config") {
-        for (const [group, fields] of [...map.entries()]) {
-            if (fields.length > 1 || explicit.has(group) || group === "General") {
-                continue;
-            }
-            if (!map.has("General")) {
-                map.set("General", []);
-                order.unshift("General");
-            }
-            map.get("General").push(...fields);
-            map.delete(group);
-            const idx = order.indexOf(group);
-            if (idx >= 0)
-                order.splice(idx, 1);
-        }
-    }
-    const groups = order
-        .filter((id) => map.has(id))
-        .map((id) => ({
-        id,
-        label: id,
-        fields: map.get(id),
-    }));
-    return sortGroups(groups, variant);
-}
-export function firstImageUrl(value) {
-    const items = Array.isArray(value) ? value : [value];
-    for (const item of items) {
-        if (typeof item === "string" && looksLikeUrl(item))
-            return item;
-        if (item && typeof item === "object" && "url" in item) {
-            const url = item.url;
-            if (typeof url === "string" && looksLikeUrl(url))
-                return url;
-        }
-    }
-    return null;
-}
-export function findPrimaryImageKey(schema, values) {
-    for (const [key, field] of Object.entries(schema)) {
-        if (!isImageField(key, field))
-            continue;
-        if (firstImageUrl(values?.[key]))
-            return key;
-    }
-    for (const [key, field] of Object.entries(schema)) {
-        if (isImageField(key, field))
-            return key;
-    }
-    return null;
-}