@datenlotse/jsonjoy-builder 0.5.0 → 0.5.1

package/dist/components/SchemaEditor/AddFieldButton.js

@@ -1,6 +1,6 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { CirclePlus, HelpCircle, Info } from "lucide-react";
-import { useId, useState } from "react";
+import { useEffect, useId, useState } from "react";
 import { Badge } from "../ui/badge.js";
 import { Button } from "../ui/button.js";
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "../ui/dialog.js";
@@ -8,30 +8,64 @@ import { Input } from "../ui/input.js";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip.js";
 import { useTranslation } from "../../hooks/use-translation.js";
 import SchemaTypeSelector from "./SchemaTypeSelector.js";
-const AddFieldButton = ({ onAddField, variant = "primary" })=>{
+import TypeEditor from "./TypeEditor.js";
+const ENUM_TYPES = [
+    "string",
+    "number",
+    "integer"
+];
+function createEmptyDraftSchema(type) {
+    return {
+        type
+    };
+}
+const AddFieldButton = ({ parentSchema, onAddField, variant = "primary" })=>{
     const [dialogOpen, setDialogOpen] = useState(false);
     const [fieldName, setFieldName] = useState("");
     const [fieldType, setFieldType] = useState("string");
     const [fieldDesc, setFieldDesc] = useState("");
     const [fieldRequired, setFieldRequired] = useState(false);
+    const [draftSchema, setDraftSchema] = useState(()=>createEmptyDraftSchema("string"));
     const fieldNameId = useId();
     const fieldDescId = useId();
     const fieldRequiredId = useId();
     const fieldTypeId = useId();
     const t = useTranslation();
+    useEffect(()=>{
+        setDraftSchema((prev)=>{
+            const nextType = fieldType;
+            const prevType = prev.type;
+            if (prevType === nextType) return prev;
+            return createEmptyDraftSchema(nextType);
+        });
+    }, [
+        fieldType
+    ]);
+    useEffect(()=>{
+        if (dialogOpen) setDraftSchema(createEmptyDraftSchema(fieldType));
+    }, [
+        dialogOpen
+    ]);
     const handleSubmit = (e)=>{
         e.preventDefault();
         if (!fieldName.trim()) return;
+        const validation = ENUM_TYPES.includes(fieldType) && Object.keys(draftSchema).length > 1 ? {
+            ...draftSchema,
+            type: fieldType
+        } : void 0;
         onAddField({
-            name: fieldName,
+            name: fieldName.trim(),
             type: fieldType,
             description: fieldDesc,
-            required: fieldRequired
+            required: fieldRequired,
+            default: draftSchema.default,
+            validation
         });
         setFieldName("");
         setFieldType("string");
         setFieldDesc("");
         setFieldRequired(false);
+        setDraftSchema(createEmptyDraftSchema("string"));
         setDialogOpen(false);
     };
     return /*#__PURE__*/ jsxs(Fragment, {
@@ -283,6 +317,27 @@ const AddFieldButton = ({ onAddField, variant = "primary" })=>{
                                         })
                                     ]
                                 }),
+                                ENUM_TYPES.includes(fieldType) && /*#__PURE__*/ jsxs("details", {
+                                    className: "group rounded-lg border bg-muted/30",
+                                    children: [
+                                        /*#__PURE__*/ jsx("summary", {
+                                            className: "cursor-pointer list-none px-4 py-3 text-sm font-medium",
+                                            children: t.stringAllowedValuesEnumLabel
+                                        }),
+                                        /*#__PURE__*/ jsx("div", {
+                                            className: "border-t px-4 pb-4 pt-2",
+                                            children: /*#__PURE__*/ jsx(TypeEditor, {
+                                                schema: draftSchema,
+                                                readOnly: false,
+                                                parentSchema: parentSchema,
+                                                propertyName: fieldName.trim() || void 0,
+                                                validationNode: void 0,
+                                                onChange: setDraftSchema,
+                                                depth: 1
+                                            })
+                                        })
+                                    ]
+                                }),
                                 /*#__PURE__*/ jsxs(DialogFooter, {
                                     className: "mt-6 gap-2 flex-wrap",
                                     children: [

package/dist/components/SchemaEditor/SchemaVisualEditor.js

@@ -44,6 +44,7 @@ const SchemaVisualEditor = ({ schema, onChange, readOnly = false })=>{
             !readOnly && /*#__PURE__*/ jsx("div", {
                 className: "mb-6 shrink-0",
                 children: /*#__PURE__*/ jsx(AddFieldButton, {
+                    parentSchema: asObjectSchema(schema),
                     onAddField: handleAddField
                 })
             }),

package/dist/components/SchemaEditor/types/ObjectEditor.js

@@ -79,6 +79,7 @@ const ObjectEditor = ({ schema, validationNode, onChange, depth = 0, readOnly =
             !readOnly && /*#__PURE__*/ jsx("div", {
                 className: "mt-4",
                 children: /*#__PURE__*/ jsx(AddFieldButton, {
+                    parentSchema: normalizedSchema,
                     onAddField: handleAddProperty,
                     variant: "secondary"
                 })

package/dist/i18n/locales/de.js

@@ -30,7 +30,7 @@ const de = {
     fieldTypeBooleanDescription: "Für Wahr/Falsch-Werte",
     fieldTypeObjectLabel: "Gruppe",
     fieldTypeObjectDescription: "Zum Gruppieren verwandter Felder",
-    fieldTypeArrayLabel: "Liste",
+    fieldTypeArrayLabel: "Mehrfach-Auswahl",
     fieldTypeArrayDescription: "Für Sammlungen von Elementen",
     propertyDescriptionPlaceholder: "Beschreibung hinzufügen...",
     propertyDescriptionButton: "Beschreibung hinzufügen...",
@@ -112,10 +112,10 @@ const de = {
     whenPropertyEquals: "Wenn {property} = {value}",
     stringFormatSelectPlaceholder: "Format auswählen",
     stringValidationErrorLengthRange: "'Minimale Länge' darf nicht größer als 'Maximale Länge' sein.",
-    schemaTypeArray: "Liste",
+    schemaTypeArray: "Mehrfach-Auswahl",
     schemaTypeBoolean: "Ja/Nein",
     schemaTypeNumber: "Zahl",
-    schemaTypeObject: "Objekt",
+    schemaTypeObject: "Gruppe",
     schemaTypeString: "Text",
     schemaTypeNull: "Leer",
     inferrerTitle: "JSON-Schema ableiten",

package/dist/index.css

@@ -1356,6 +1356,10 @@
     cursor: text;
   }
 
+  .jsonjoy .list-none, .jsonjoy.list-none {
+    list-style-type: none;
+  }
+
   .jsonjoy .grid-cols-1, .jsonjoy.grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
@@ -1719,7 +1723,17 @@
     background-color: var(--jsonjoy-color-green-50);
   }
 
-  .jsonjoy .bg-muted, .jsonjoy.bg-muted, .jsonjoy .bg-muted\/40, .jsonjoy.bg-muted\/40 {
+  .jsonjoy .bg-muted, .jsonjoy.bg-muted, .jsonjoy .bg-muted\/30, .jsonjoy.bg-muted\/30 {
+    background-color: var(--jsonjoy-color-muted);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .jsonjoy .bg-muted\/30, .jsonjoy.bg-muted\/30 {
+      background-color: color-mix(in oklab, var(--jsonjoy-color-muted) 30%, transparent);
+    }
+  }
+
+  .jsonjoy .bg-muted\/40, .jsonjoy.bg-muted\/40 {
     background-color: var(--jsonjoy-color-muted);
   }
 
@@ -1968,6 +1982,10 @@
     padding-bottom: calc(var(--jsonjoy-spacing) * 2);
   }
 
+  .jsonjoy .pb-4, .jsonjoy.pb-4 {
+    padding-bottom: calc(var(--jsonjoy-spacing) * 4);
+  }
+
   .jsonjoy .pb-24, .jsonjoy.pb-24 {
     padding-bottom: calc(var(--jsonjoy-spacing) * 24);
   }

package/dist/lib/schemaEditor.js

@@ -129,7 +129,9 @@ function renameObjectProperty(schema, oldName, newName) {
     const propertyOrder = newSchema.$propertyOrder || Object.keys(newSchema.properties);
     for (const key of propertyOrder)if (key === oldName) newProperties[newName] = newSchema.properties[oldName];
     else if (key in newSchema.properties) newProperties[key] = newSchema.properties[key];
-    for (const [key, value] of Object.entries(newSchema.properties))if (!(key in newProperties)) newProperties[key] = value;
+    for (const [key, value] of Object.entries(newSchema.properties))if (key !== oldName) {
+        if (!(key in newProperties)) newProperties[key] = value;
+    }
     newSchema.properties = newProperties;
     if (newSchema.required) newSchema.required = newSchema.required.map((field)=>field === oldName ? newName : field);
     if (newSchema.$propertyOrder) newSchema.$propertyOrder = newSchema.$propertyOrder.map((name)=>name === oldName ? newName : name);

package/package.json

@@ -14,7 +14,7 @@
     "react"
   ],
   "private": false,
-  "version": "0.5.0",
+  "version": "0.5.1",
   "type": "module",
   "sideEffects": false,
   "repository": {