json-schema-builder-react 0.0.1 → 0.0.2

package/dist-lib/components/JsonOutput.d.ts

@@ -0,0 +1,5 @@
+interface JsonOutputProps {
+    schema: any;
+}
+export default function JsonOutput({ schema }: JsonOutputProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist-lib/components/JsonSchemaBuilder.d.ts

@@ -0,0 +1,64 @@
+import { type TypeLabels } from "@/contexts/TypeLabelsContext";
+export interface JsonSchemaBuilderProps {
+    /**
+     * Initial schema to load into the builder
+     */
+    initialSchema?: any;
+    /**
+     * Callback fired when the schema changes
+     */
+    onSchemaChange?: (schema: any) => void;
+    /**
+     * Whether to show metadata fields (title, description, version)
+     * @default false
+     */
+    showMetadata?: boolean;
+    /**
+     * Whether to show the import button
+     * @default true
+     */
+    showImport?: boolean;
+    /**
+     * Whether to show the clear all button
+     * @default true
+     */
+    showClear?: boolean;
+    /**
+     * Whether to show the JSON output panel
+     * @default true
+     */
+    showOutput?: boolean;
+    /**
+     * Custom class name for the container
+     */
+    className?: string;
+    showHeader?: boolean;
+    /**
+     * Custom labels for property types
+     * @example { string: 'Text', boolean: 'Yes/No', object: 'Form', array: 'List' }
+     */
+    typeLabels?: TypeLabels;
+    /**
+     * Whether to show summary in the bottom of the document area
+     * @default true
+     */
+    showSummary?: boolean;
+    /**
+     * Custom label for top-level properties
+     * @example { singular: 'input', plural: 'inputs' }
+     * @default { singular: 'property', plural: 'properties' }
+     */
+    propertyLabel?: {
+        singular: string;
+        plural: string;
+    };
+    /**
+     * Whether to show the regex pattern field in string constraints
+     * @default false
+     */
+    showRegex?: boolean;
+}
+/**
+ * A visual JSON Schema builder component that allows building JSON schemas interactively
+ */
+export declare function JsonSchemaBuilder({ initialSchema, onSchemaChange, showMetadata, showImport, showClear, showOutput, showHeader, className, showSummary, typeLabels, propertyLabel, showRegex, }: JsonSchemaBuilderProps): import("react/jsx-runtime").JSX.Element;

package/dist-lib/components/PropertyDocument.d.ts

@@ -0,0 +1,11 @@
+import type { PropertyData } from "@/types/schema";
+interface PropertyDocumentProps {
+    property: PropertyData;
+    onUpdate: (property: PropertyData) => void;
+    onDelete: () => void;
+    level?: number;
+    isArrayItem?: boolean;
+    showRegex?: boolean;
+}
+export default function PropertyDocument({ property, onUpdate, onDelete, level, isArrayItem, showRegex, }: PropertyDocumentProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist-lib/components/PropertyEditDialog.d.ts

@@ -0,0 +1,16 @@
+import type { PropertyData } from "@/types/schema";
+interface PropertyEditDialogProps {
+    property: PropertyData;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onUpdate: (property: PropertyData) => void;
+    isArrayItem?: boolean;
+    isNewProperty?: boolean;
+    propertyLabel?: {
+        singular: string;
+        plural: string;
+    };
+    showRegex?: boolean;
+}
+export default function PropertyEditDialog({ property, open, onOpenChange, onUpdate, isArrayItem, isNewProperty, propertyLabel, showRegex, }: PropertyEditDialogProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist-lib/components/SchemaMetadata.d.ts

@@ -0,0 +1,8 @@
+interface SchemaMetadataProps {
+    title: string;
+    description: string;
+    version: string;
+    onUpdate: (field: string, value: string) => void;
+}
+export default function SchemaMetadata({ title, description, version, onUpdate, }: SchemaMetadataProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist-lib/components/ThemeToggle.d.ts

@@ -0,0 +1 @@
+export default function ThemeToggle(): import("react/jsx-runtime").JSX.Element;

package/dist-lib/components/ui/button.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { Button, buttonVariants };

package/dist-lib/components/ui/card.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent, };

package/dist-lib/components/ui/checkbox.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { Checkbox };

package/dist-lib/components/ui/dialog.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
+declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
+declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DialogHeader: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const DialogFooter: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, };

package/dist-lib/components/ui/input.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare const Input: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export { Input };

package/dist-lib/components/ui/label.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { type VariantProps } from "class-variance-authority";
+declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string> & React.RefAttributes<HTMLLabelElement>>;
+export { Label };

package/dist-lib/components/ui/select.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+declare const Select: React.FC<SelectPrimitive.SelectProps>;
+declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
+declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectScrollDownButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, };

package/dist-lib/components/ui/textarea.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare const Textarea: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
+export { Textarea };

package/dist-lib/components/ui/tooltip.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+declare const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps>;
+declare const Tooltip: React.FC<TooltipPrimitive.TooltipProps>;
+declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/dist-lib/contexts/TypeLabelsContext.d.ts

@@ -0,0 +1,12 @@
+import type { PropertyType } from "@/types/schema";
+export type TypeLabels = Partial<Record<PropertyType, string>>;
+interface TypeLabelsContextValue {
+    getTypeLabel: (type: PropertyType) => string;
+    typeLabels: Record<PropertyType, string>;
+}
+export declare function TypeLabelsProvider({ children, customLabels, }: {
+    children: React.ReactNode;
+    customLabels?: TypeLabels;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useTypeLabels(): TypeLabelsContextValue;
+export {};

package/dist-lib/hooks/usePropertyEditor.d.ts

@@ -0,0 +1,9 @@
+import type { PropertyData } from "@/types/schema";
+export interface UsePropertyEditorReturn {
+    handleTitleChange: (title: string) => void;
+    handleTitleBlur: () => void;
+    handleKeyChange: (key: string) => void;
+    handleFieldChange: (field: keyof PropertyData, value: any) => void;
+    handleConstraintChange: (field: string, value: any) => void;
+}
+export declare const usePropertyEditor: (property: PropertyData, onUpdate: (property: PropertyData) => void, isNewProperty?: boolean) => UsePropertyEditorReturn;

package/dist-lib/hooks/useSchemaBuilder.d.ts

@@ -0,0 +1,15 @@
+import type { PropertyData, SchemaMetadata } from "@/types/schema";
+export interface UseSchemaBuilderReturn {
+    properties: PropertyData[];
+    metadata: SchemaMetadata;
+    schema: any;
+    addProperty: () => PropertyData;
+    updateProperty: (id: string, updated: PropertyData) => void;
+    deleteProperty: (id: string) => void;
+    clearAll: () => void;
+    updateMetadata: (field: keyof SchemaMetadata, value: string) => void;
+    importSchema: () => Promise<void>;
+    downloadSchema: () => void;
+    loadSchema: (schema: any) => void;
+}
+export declare const useSchemaBuilder: (includeMetadata?: boolean) => UseSchemaBuilderReturn;

package/dist-lib/index.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @packageDocumentation
+ * JSON Schema Builder - A React component library for building JSON schemas visually
+ */
+export { JsonSchemaBuilder } from "./components/JsonSchemaBuilder";
+export type { JsonSchemaBuilderProps } from "./components/JsonSchemaBuilder";
+export type { TypeLabels } from "./contexts/TypeLabelsContext";
+export { useSchemaBuilder } from "./hooks/useSchemaBuilder";
+export type { UseSchemaBuilderReturn } from "./hooks/useSchemaBuilder";
+export { usePropertyEditor } from "./hooks/usePropertyEditor";
+export { generateSchema } from "./lib/schema-generator";
+export { parseSchema } from "./lib/schema-parser";
+export { downloadJsonFile, importJsonFile } from "./lib/file-utils";
+export type { PropertyData, PropertyType, SchemaMetadata, } from "./types/schema";
+export { default as PropertyDocument } from "./components/PropertyDocument";
+export { default as PropertyEditDialog } from "./components/PropertyEditDialog";
+export { default as JsonOutput } from "./components/JsonOutput";
+export { default as SchemaMetadataComponent } from "./components/SchemaMetadata";

package/dist-lib/lib/file-utils.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Open a file picker and read a JSON file
+ */
+export declare const importJsonFile: () => Promise<any>;
+/**
+ * Download a JSON object as a file
+ */
+export declare const downloadJsonFile: (data: any, filename?: string) => void;

package/dist-lib/lib/id-generator.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Generate a unique ID for properties
+ * Uses timestamp and random number for uniqueness
+ *
+ * @example
+ * generatePropertyId() // "1699632000000-0.123456789"
+ */
+export declare const generatePropertyId: () => string;

package/dist-lib/lib/schema-generator.d.ts

@@ -0,0 +1,6 @@
+import type { PropertyData, SchemaMetadata } from "@/types/schema";
+import { JSONSchema7 } from "json-schema";
+/**
+ * Generate a JSON Schema from property definitions
+ */
+export declare const generateSchema: (properties: PropertyData[], metadata?: SchemaMetadata, includeMetadata?: boolean) => JSONSchema7;

package/dist-lib/lib/schema-parser.d.ts

@@ -0,0 +1,14 @@
+import { JSONSchema7 } from "json-schema";
+import type { PropertyData, SchemaMetadata } from "@/types/schema";
+export interface ParsedSchema {
+    properties: PropertyData[];
+    metadata?: SchemaMetadata;
+}
+/**
+ * Parse a JSON Schema into PropertyData array
+ */
+export declare const parseSchema: (schema: JSONSchema7) => ParsedSchema;
+/**
+ * Recursively parse properties from a JSON Schema
+ */
+export declare const parseProperties: (props: Record<string, JSONSchema7 | boolean>, requiredList?: string[]) => PropertyData[];

package/dist-lib/lib/string-utils.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Convert a string to snake_case format
+ * Removes special characters and replaces spaces with underscores
+ *
+ * @example
+ * toSnakeCase("User Name") // "user_name"
+ * toSnakeCase("First Name!") // "first_name"
+ */
+export declare const toSnakeCase: (str: string) => string;

package/dist-lib/lib/utils.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from "clsx";
+export declare function cn(...inputs: ClassValue[]): string;

package/dist-lib/types/schema.d.ts

@@ -0,0 +1,30 @@
+import type { JSONSchema7TypeName } from "json-schema";
+export type PropertyType = JSONSchema7TypeName | "file";
+/**
+ * Internal UI representation of a JSON Schema property
+ * This extends JSONSchema7 with additional metadata needed for the builder UI
+ */
+export interface PropertyData {
+    id: string;
+    key: string;
+    required: boolean;
+    type: PropertyType;
+    title?: string;
+    description?: string;
+    minLength?: number;
+    maxLength?: number;
+    pattern?: string;
+    enum?: string[];
+    minimum?: number;
+    maximum?: number;
+    minItems?: number;
+    maxItems?: number;
+    uniqueItems?: boolean;
+    items?: PropertyData;
+    children?: PropertyData[];
+}
+export interface SchemaMetadata {
+    title: string;
+    description: string;
+    version: string;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "json-schema-builder-react",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "A React component library for building and editing JSON schemas visually",
   "type": "module",
   "license": "MIT",