@datenlotse/jsonjoy-builder 0.4.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Ophir LOJKINE
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,203 @@
+# JSON Schema Builder
+
+[![image](https://github.com/user-attachments/assets/6be1cecf-e0d9-4597-ab04-7124e37e332d)](https://json.ophir.dev)
+
+A modern, React-based visual JSON Schema editor for creating and manipulating JSON Schema definitions with an intuitive interface.
+
+**Try online**: https://json.ophir.dev
+
+[![NPM Downloads](https://img.shields.io/npm/dw/jsonjoy-builder)](https://www.npmjs.com/package/jsonjoy-builder)
+[![NPM Version](https://img.shields.io/npm/v/jsonjoy-builder)](https://www.npmjs.com/package/jsonjoy-builder)
+[![NPM License](https://img.shields.io/npm/l/jsonjoy-builder)](https://www.npmjs.com/package/jsonjoy-builder)
+
+## Features
+
+- **Visual Schema Editor**: Design your JSON Schema through an intuitive interface without writing raw JSON
+- **Real-time JSON Preview**: See your schema in JSON format as you build it visually
+- **Schema Inference**: Generate schemas automatically from existing JSON data
+- **JSON Validation**: Test JSON data against your schema with detailed validation feedback
+- **Responsive Design**: Fully responsive interface that works on desktop and mobile devices
+
+## Getting Started
+
+### Installing
+
+```bash
+npm install jsonjoy-builder
+```
+
+Also install react if you haven't done so yet.
+
+Then use like this:
+
+```jsx
+import "jsonjoy-builder/styles.css";
+import { type JSONSchema, SchemaVisualEditor } from "jsonjoy-builder";
+import { useState } from "react";
+
+export function App() {
+  const [schema, setSchema] = useState<JSONSchema>({});
+  return (
+    <div>
+      <h1>JSONJoy Builder</h1>
+      <SchemaVisualEditor schema={schema} onChange={setSchema}/>
+    </div>
+  );
+}
+```
+
+### Styling
+
+To style the component, add custom CSS. For basic styling, there are some CSS custom properties ("variables")
+you can set:
+
+```css
+.jsonjoy {
+  --jsonjoy-background: #f8fafc;
+  --jsonjoy-foreground: #020817;
+  --jsonjoy-card: #fff;
+  --jsonjoy-card-foreground: #020817;
+  --jsonjoy-popover: #fff;
+  --jsonjoy-popover-foreground: #020817;
+  --jsonjoy-primary: #0080ff;
+  --jsonjoy-primary-foreground: #f8fafc;
+  --jsonjoy-secondary: #f1f5f9;
+  --jsonjoy-secondary-foreground: #0f172a;
+  --jsonjoy-muted: #f1f5f9;
+  --jsonjoy-muted-foreground: #64748b;
+  --jsonjoy-accent: #f1f5f9;
+  --jsonjoy-accent-foreground: #0f172a;
+  --jsonjoy-destructive: #ef4444;
+  --jsonjoy-destructive-foreground: #f8fafc;
+  --jsonjoy-border: #e2e8f0;
+  --jsonjoy-input: #e2e8f0;
+  --jsonjoy-ring: #020817;
+  --jsonjoy-radius: .8rem;
+  --jsonjoy-font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+}
+.jsonjoy.dark {
+  /** same, but for dark mode */
+}
+```
+
+### Localization
+
+By default, the editor uses English. To localize, you need to set a language via the `TranslationContext`:
+
+```jsx
+import "jsonjoy-builder/styles.css";
+import { type JSONSchema, SchemaVisualEditor, TranslationContext, de } from "jsonjoy-builder";
+import { useState } from "react";
+
+export function App() {
+  const [schema, setSchema] = useState<JSONSchema>({});
+  return (
+    <TranslationContext value={de}>
+      <SchemaVisualEditor schema={schema} onChange={setSchema}/>
+    </TranslationContext>
+  );
+}
+```
+
+Currently we have localizations for English, German, French, Russian, Ukrainian, Spanish and Chinese. You can define your own translation like this.
+If you do, consider opening a PR with the translations!
+
+```ts
+import { type Translation } from "jsonjoy-builder";
+
+const es: Translation = {
+	// add translations here (see type Translation for the available keys and default values)
+};
+```
+
+See also the [English localizations file](https://github.com/lovasoa/jsonjoy-builder/blob/main/src/i18n/locales/en.ts) for the default localizations.
+
+### Development
+
+```bash
+git clone https://github.com/lovasoa/jsonjoy-builder.git
+cd jsonjoy-builder
+npm install
+```
+
+Start the development server:
+
+```bash
+npm run dev
+```
+
+The demo application will be available at http://localhost:5173
+
+### Building for Production
+
+Build this library for production:
+
+```bash
+npm run build
+```
+
+The built files will be available in the `dist` directory.
+
+## Project Architecture
+
+### Core Components
+
+- **JsonSchemaEditor**: The main component that provides tabs for switching between visual and JSON views
+- **SchemaVisualEditor**: Handles the visual representation and editing of schemas
+- **JsonSchemaVisualizer**: Provides JSON view with Monaco editor for direct schema editing
+- **SchemaInferencer**: Dialog component for generating schemas from JSON data
+- **JsonValidator**: Dialog component for validating JSON against the current schema
+
+### Key Features
+
+#### Schema Inference
+
+The `SchemaInferencer` component can automatically generate JSON Schema definitions from existing JSON data. This feature uses a recursion-based inference system to detect:
+
+- Object structures and properties
+- Array types and their item schemas
+- String formats (dates, emails, URIs)
+- Numeric types (integers vs. floats)
+- Required fields
+
+#### JSON Validation
+
+Validate any JSON document against your schema with:
+- Real-time feedback
+- Detailed error reporting
+- Format validation for emails, dates, and other special formats
+
+## Technology Stack
+
+- **React**: UI framework
+- **TypeScript**: Type-safe development
+- **Rsbuild** / **Rslib**: Build tool and development server
+- **ShadCN UI**: Component library
+- **Monaco Editor**: Code editor for JSON viewing/editing
+- **Ajv**: JSON Schema validation
+- **Zod**: Type-safe json parsing in ts
+- **Lucide Icons**: Icon library
+- **Node.js Test Runner**: Simple built-in testing
+
+## Development Scripts
+
+| Command | Description |
+|---------|-------------|
+| `npm run dev` | Start development server |
+| `npm run build` | Build for production |
+| `npm run build:dev` | Build with development settings |
+| `npm run lint` | Run linter |
+| `npm run format` | Format code |
+| `npm run check` | Type check the project |
+| `npm run fix` | Fix linting issues |
+| `npm run typecheck` | Type check with TypeScript |
+| `npm run preview` | Preview production build |
+| `npm run test` | Run tests |
+
+## License
+
+This project is licensed under the MIT License - see the LICENSE file for details.
+
+## Author
+
+[@ophir.dev](https://ophir.dev)

package/dist/components/SchemaEditor/AddFieldButton.js

@@ -0,0 +1,312 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { CirclePlus, HelpCircle, Info } from "lucide-react";
+import { 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";
+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" })=>{
+    const [dialogOpen, setDialogOpen] = useState(false);
+    const [fieldName, setFieldName] = useState("");
+    const [fieldType, setFieldType] = useState("string");
+    const [fieldDesc, setFieldDesc] = useState("");
+    const [fieldRequired, setFieldRequired] = useState(false);
+    const fieldNameId = useId();
+    const fieldDescId = useId();
+    const fieldRequiredId = useId();
+    const fieldTypeId = useId();
+    const t = useTranslation();
+    const handleSubmit = (e)=>{
+        e.preventDefault();
+        if (!fieldName.trim()) return;
+        onAddField({
+            name: fieldName,
+            type: fieldType,
+            description: fieldDesc,
+            required: fieldRequired
+        });
+        setFieldName("");
+        setFieldType("string");
+        setFieldDesc("");
+        setFieldRequired(false);
+        setDialogOpen(false);
+    };
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsxs(Button, {
+                type: "button",
+                onClick: ()=>setDialogOpen(true),
+                variant: "primary" === variant ? "default" : "outline",
+                size: "sm",
+                className: "flex items-center gap-1.5 group",
+                children: [
+                    /*#__PURE__*/ jsx(CirclePlus, {
+                        size: 16,
+                        className: "group-hover:scale-110 transition-transform"
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        children: t.fieldAddNewButton
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(Dialog, {
+                open: dialogOpen,
+                onOpenChange: setDialogOpen,
+                children: /*#__PURE__*/ jsxs(DialogContent, {
+                    className: "md:max-w-[1200px] max-h-[85vh] w-[95vw] p-4 sm:p-6 jsonjoy",
+                    children: [
+                        /*#__PURE__*/ jsxs(DialogHeader, {
+                            className: "mb-4",
+                            children: [
+                                /*#__PURE__*/ jsxs(DialogTitle, {
+                                    className: "text-xl flex flex-wrap items-center gap-2",
+                                    children: [
+                                        t.fieldAddNewLabel,
+                                        /*#__PURE__*/ jsx(Badge, {
+                                            variant: "secondary",
+                                            className: "text-xs",
+                                            children: t.fieldAddNewBadge
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsx(DialogDescription, {
+                                    className: "text-sm",
+                                    children: t.fieldAddNewDescription
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ jsxs("form", {
+                            onSubmit: handleSubmit,
+                            className: "space-y-6",
+                            children: [
+                                /*#__PURE__*/ jsxs("div", {
+                                    className: "grid grid-cols-1 lg:grid-cols-2 gap-6",
+                                    children: [
+                                        /*#__PURE__*/ jsxs("div", {
+                                            className: "space-y-4 min-w-[280px]",
+                                            children: [
+                                                /*#__PURE__*/ jsxs("div", {
+                                                    children: [
+                                                        /*#__PURE__*/ jsxs("div", {
+                                                            className: "flex flex-wrap items-center gap-2 mb-1.5",
+                                                            children: [
+                                                                /*#__PURE__*/ jsx("label", {
+                                                                    htmlFor: fieldNameId,
+                                                                    className: "text-sm font-medium",
+                                                                    children: t.fieldNameLabel
+                                                                }),
+                                                                /*#__PURE__*/ jsx(TooltipProvider, {
+                                                                    children: /*#__PURE__*/ jsxs(Tooltip, {
+                                                                        children: [
+                                                                            /*#__PURE__*/ jsx(TooltipTrigger, {
+                                                                                asChild: true,
+                                                                                children: /*#__PURE__*/ jsx(Info, {
+                                                                                    className: "h-4 w-4 text-muted-foreground shrink-0"
+                                                                                })
+                                                                            }),
+                                                                            /*#__PURE__*/ jsx(TooltipContent, {
+                                                                                className: "max-w-[90vw]",
+                                                                                children: /*#__PURE__*/ jsx("p", {
+                                                                                    children: t.fieldNameTooltip
+                                                                                })
+                                                                            })
+                                                                        ]
+                                                                    })
+                                                                })
+                                                            ]
+                                                        }),
+                                                        /*#__PURE__*/ jsx(Input, {
+                                                            id: fieldNameId,
+                                                            value: fieldName,
+                                                            onChange: (e)=>setFieldName(e.target.value),
+                                                            placeholder: t.fieldNamePlaceholder,
+                                                            className: "font-mono text-sm w-full",
+                                                            required: true
+                                                        })
+                                                    ]
+                                                }),
+                                                /*#__PURE__*/ jsxs("div", {
+                                                    children: [
+                                                        /*#__PURE__*/ jsxs("div", {
+                                                            className: "flex flex-wrap items-center gap-2 mb-1.5",
+                                                            children: [
+                                                                /*#__PURE__*/ jsx("label", {
+                                                                    htmlFor: fieldDescId,
+                                                                    className: "text-sm font-medium",
+                                                                    children: t.fieldDescription
+                                                                }),
+                                                                /*#__PURE__*/ jsx(TooltipProvider, {
+                                                                    children: /*#__PURE__*/ jsxs(Tooltip, {
+                                                                        children: [
+                                                                            /*#__PURE__*/ jsx(TooltipTrigger, {
+                                                                                asChild: true,
+                                                                                children: /*#__PURE__*/ jsx(Info, {
+                                                                                    className: "h-4 w-4 text-muted-foreground shrink-0"
+                                                                                })
+                                                                            }),
+                                                                            /*#__PURE__*/ jsx(TooltipContent, {
+                                                                                className: "max-w-[90vw]",
+                                                                                children: /*#__PURE__*/ jsx("p", {
+                                                                                    children: t.fieldDescriptionTooltip
+                                                                                })
+                                                                            })
+                                                                        ]
+                                                                    })
+                                                                })
+                                                            ]
+                                                        }),
+                                                        /*#__PURE__*/ jsx(Input, {
+                                                            id: fieldDescId,
+                                                            value: fieldDesc,
+                                                            onChange: (e)=>setFieldDesc(e.target.value),
+                                                            placeholder: t.fieldDescriptionPlaceholder,
+                                                            className: "text-sm w-full"
+                                                        })
+                                                    ]
+                                                }),
+                                                /*#__PURE__*/ jsxs("div", {
+                                                    className: "flex items-center gap-3 p-3 rounded-lg border bg-muted/50",
+                                                    children: [
+                                                        /*#__PURE__*/ jsx("input", {
+                                                            type: "checkbox",
+                                                            id: fieldRequiredId,
+                                                            checked: fieldRequired,
+                                                            onChange: (e)=>setFieldRequired(e.target.checked),
+                                                            className: "rounded border-gray-300 shrink-0"
+                                                        }),
+                                                        /*#__PURE__*/ jsx("label", {
+                                                            htmlFor: fieldRequiredId,
+                                                            className: "text-sm",
+                                                            children: t.fieldRequiredLabel
+                                                        })
+                                                    ]
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ jsxs("div", {
+                                            className: "space-y-4 min-w-[280px]",
+                                            children: [
+                                                /*#__PURE__*/ jsxs("div", {
+                                                    children: [
+                                                        /*#__PURE__*/ jsxs("div", {
+                                                            className: "flex flex-wrap items-center gap-2 mb-1.5",
+                                                            children: [
+                                                                /*#__PURE__*/ jsx("label", {
+                                                                    htmlFor: fieldTypeId,
+                                                                    className: "text-sm font-medium",
+                                                                    children: t.fieldType
+                                                                }),
+                                                                /*#__PURE__*/ jsx(TooltipProvider, {
+                                                                    children: /*#__PURE__*/ jsxs(Tooltip, {
+                                                                        children: [
+                                                                            /*#__PURE__*/ jsx(TooltipTrigger, {
+                                                                                asChild: true,
+                                                                                children: /*#__PURE__*/ jsx(HelpCircle, {
+                                                                                    className: "h-4 w-4 text-muted-foreground shrink-0"
+                                                                                })
+                                                                            }),
+                                                                            /*#__PURE__*/ jsx(TooltipContent, {
+                                                                                side: "left",
+                                                                                className: "w-72 max-w-[90vw]",
+                                                                                children: /*#__PURE__*/ jsxs("div", {
+                                                                                    className: "grid grid-cols-2 gap-x-4 gap-y-1 text-xs",
+                                                                                    children: [
+                                                                                        /*#__PURE__*/ jsxs("div", {
+                                                                                            children: [
+                                                                                                "• ",
+                                                                                                t.fieldTypeTooltipString
+                                                                                            ]
+                                                                                        }),
+                                                                                        /*#__PURE__*/ jsxs("div", {
+                                                                                            children: [
+                                                                                                "• ",
+                                                                                                t.fieldTypeTooltipNumber
+                                                                                            ]
+                                                                                        }),
+                                                                                        /*#__PURE__*/ jsxs("div", {
+                                                                                            children: [
+                                                                                                "• ",
+                                                                                                t.fieldTypeTooltipBoolean
+                                                                                            ]
+                                                                                        }),
+                                                                                        /*#__PURE__*/ jsxs("div", {
+                                                                                            children: [
+                                                                                                "• ",
+                                                                                                t.fieldTypeTooltipObject
+                                                                                            ]
+                                                                                        }),
+                                                                                        /*#__PURE__*/ jsxs("div", {
+                                                                                            className: "col-span-2",
+                                                                                            children: [
+                                                                                                "• ",
+                                                                                                t.fieldTypeTooltipArray
+                                                                                            ]
+                                                                                        })
+                                                                                    ]
+                                                                                })
+                                                                            })
+                                                                        ]
+                                                                    })
+                                                                })
+                                                            ]
+                                                        }),
+                                                        /*#__PURE__*/ jsx(SchemaTypeSelector, {
+                                                            id: fieldTypeId,
+                                                            value: fieldType,
+                                                            onChange: setFieldType
+                                                        })
+                                                    ]
+                                                }),
+                                                /*#__PURE__*/ jsxs("div", {
+                                                    className: "rounded-lg border bg-muted/50 p-3 hidden md:block",
+                                                    children: [
+                                                        /*#__PURE__*/ jsx("p", {
+                                                            className: "text-xs font-medium mb-2",
+                                                            children: t.fieldTypeExample
+                                                        }),
+                                                        /*#__PURE__*/ jsxs("code", {
+                                                            className: "text-sm bg-background/80 p-2 rounded block overflow-x-auto",
+                                                            children: [
+                                                                "string" === fieldType && '"example"',
+                                                                "number" === fieldType && "42",
+                                                                "boolean" === fieldType && "true",
+                                                                "object" === fieldType && '{ "key": "value" }',
+                                                                "array" === fieldType && '["item1", "item2"]'
+                                                            ]
+                                                        })
+                                                    ]
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsxs(DialogFooter, {
+                                    className: "mt-6 gap-2 flex-wrap",
+                                    children: [
+                                        /*#__PURE__*/ jsx(Button, {
+                                            type: "button",
+                                            variant: "outline",
+                                            size: "sm",
+                                            onClick: ()=>setDialogOpen(false),
+                                            children: t.fieldAddNewCancel
+                                        }),
+                                        /*#__PURE__*/ jsx(Button, {
+                                            type: "submit",
+                                            size: "sm",
+                                            children: t.fieldAddNewConfirm
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+};
+const SchemaEditor_AddFieldButton = AddFieldButton;
+export { SchemaEditor_AddFieldButton as default };