json-schema-builder-react 0.0.4 → 0.0.6

package/README.md

@@ -24,7 +24,29 @@ yarn add json-schema-builder-react
 pnpm add json-schema-builder-react
 ```
 
-### Styling
+## Prerequisites
+
+This library requires the following peer dependencies to be installed in your project:
+
+### 1. Install shadcn/ui Components
+
+This library uses [shadcn/ui](https://ui.shadcn.com/) components. You'll need to set up shadcn/ui and install the required components:
+
+```bash
+# Initialize shadcn/ui (if not already done)
+npx shadcn@latest init
+
+# Install required components
+npx shadcn@latest add button dialog input select checkbox tooltip card label textarea
+```
+
+### 2. Install Radix UI and Utility Libraries
+
+```bash
+npm install @radix-ui/react-checkbox @radix-ui/react-dialog @radix-ui/react-label @radix-ui/react-select @radix-ui/react-slot @radix-ui/react-tooltip lucide-react class-variance-authority clsx tailwind-merge
+```
+
+### 3. Tailwind CSS Setup
 
 This library uses Tailwind CSS utility classes. You'll need Tailwind CSS configured in your project.
 
@@ -232,6 +254,38 @@ function App() {
 }
 ```
 
+### Editable Property Keys (Advanced)
+
+By default, property keys are **immutable after creation** to prevent breaking existing references in your codebase. However, you can enable key editing with the `keyEditable` prop:
+
+```tsx
+import { useState } from 'react';
+import { JsonSchemaBuilder } from 'json-schema-builder-react';
+
+function App() {
+  const [schema, setSchema] = useState({
+    type: 'object',
+    properties: {
+      user_name: {
+        type: 'string',
+        title: 'User Name'
+      }
+    },
+    required: []
+  });
+
+  return (
+    <JsonSchemaBuilder
+      schema={schema}
+      onChange={setSchema}
+      keyEditable={true} // ⚠️ Allows changing keys after creation
+    />
+  );
+}
+```
+
+**⚠️ Warning:** Enabling `keyEditable` allows users to change property keys even after they've been created. This can break existing code that references these keys. Use with caution, primarily in development environments or when you have proper migration strategies in place.
+
 ## API Reference
 
 ### JsonSchemaBuilder Props
@@ -247,6 +301,7 @@ function App() {
 | `showHeader` | `boolean` | `true` | Show header with action buttons |
 | `showSummary` | `boolean` | `false` | Show summary at bottom |
 | `showRegex` | `boolean` | `false` | Show regex pattern field for strings |
+| `keyEditable` | `boolean` | `false` | Allow editing property keys after initialization (⚠️ may break references) |
 | `className` | `string` | `"h-screen"` | Custom className for container |
 | `typeLabels` | `TypeLabels` | Default labels | Custom labels for property types |
 | `propertyLabel` | `{ singular: string, plural: string }` | `{ singular: 'property', plural: 'properties' }` | Custom labels for properties |

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

@@ -57,8 +57,13 @@ export interface JsonSchemaBuilderProps {
      * @default false
      */
     showRegex?: boolean;
+    /**
+     * Whether to allow editing property keys after initialization
+     * @default false
+     */
+    keyEditable?: boolean;
 }
 /**
  * A visual JSON Schema builder component that allows building JSON schemas interactively
  */
-export declare function JsonSchemaBuilder({ schema, onChange, showMetadata, showImport, showClear, showOutput, showHeader, className, showSummary, typeLabels, propertyLabel, showRegex, }: JsonSchemaBuilderProps): import("react/jsx-runtime").JSX.Element;
+export declare function JsonSchemaBuilder({ schema, onChange, showMetadata, showImport, showClear, showOutput, showHeader, className, showSummary, typeLabels, propertyLabel, showRegex, keyEditable, }: JsonSchemaBuilderProps): import("react/jsx-runtime").JSX.Element;

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

@@ -6,6 +6,7 @@ interface PropertyDocumentProps {
     level?: number;
     isArrayItem?: boolean;
     showRegex?: boolean;
+    keyEditable?: boolean;
 }
-export default function PropertyDocument({ property, onUpdate, onDelete, level, isArrayItem, showRegex, }: PropertyDocumentProps): import("react/jsx-runtime").JSX.Element;
+export default function PropertyDocument({ property, onUpdate, onDelete, level, isArrayItem, showRegex, keyEditable, }: PropertyDocumentProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -11,6 +11,7 @@ interface PropertyEditDialogProps {
         plural: string;
     };
     showRegex?: boolean;
+    keyEditable?: boolean;
 }
-export default function PropertyEditDialog({ property, open, onOpenChange, onUpdate, isArrayItem, isNewProperty, propertyLabel, showRegex, }: PropertyEditDialogProps): import("react/jsx-runtime").JSX.Element;
+export default function PropertyEditDialog({ property, open, onOpenChange, onUpdate, isArrayItem, isNewProperty, propertyLabel, showRegex, keyEditable, }: PropertyEditDialogProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | 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> {

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

@@ -16,4 +16,4 @@ declare const DialogFooter: {
 };
 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, };
+export { Dialog, DialogPortal, DialogOverlay, DialogTrigger, DialogClose, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, };

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

@@ -0,0 +1,60 @@
+import type { PropertyData } from "@/types/schema";
+export interface UseChildManagerReturn {
+    /**
+     * Add a new child property (opens dialog)
+     */
+    addChild: () => void;
+    /**
+     * Update an existing child property
+     */
+    updateChild: (childId: string, updated: PropertyData) => void;
+    /**
+     * Delete a child property
+     */
+    deleteChild: (childId: string) => void;
+    /**
+     * Dialog manager for adding new children
+     */
+    addChildDialog: {
+        isOpen: boolean;
+        data: PropertyData | null;
+        setIsOpen: (isOpen: boolean) => void;
+        confirm: (data: PropertyData) => void;
+    };
+}
+/**
+ * Hook for managing child properties (nested properties within an object).
+ * Handles adding, updating, and deleting children with dialog state management.
+ *
+ * @param property - The parent property that contains children
+ * @param onUpdate - Callback to update the parent property
+ *
+ * @example
+ * ```tsx
+ * const childManager = useChildManager(property, onUpdate);
+ *
+ * // Add child button
+ * <Button onClick={childManager.addChild}>Add Child</Button>
+ *
+ * // Render children
+ * {property.children?.map((child) => (
+ *   <PropertyDocument
+ *     key={child.id}
+ *     property={child}
+ *     onUpdate={(updated) => childManager.updateChild(child.id, updated)}
+ *     onDelete={() => childManager.deleteChild(child.id)}
+ *   />
+ * ))}
+ *
+ * // Add child dialog
+ * {childManager.addChildDialog.isOpen && childManager.addChildDialog.data && (
+ *   <PropertyEditDialog
+ *     property={childManager.addChildDialog.data}
+ *     open={childManager.addChildDialog.isOpen}
+ *     onOpenChange={childManager.addChildDialog.setIsOpen}
+ *     onUpdate={childManager.addChildDialog.confirm}
+ *   />
+ * )}
+ * ```
+ */
+export declare function useChildManager(property: PropertyData, onUpdate: (property: PropertyData) => void): UseChildManagerReturn;

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

@@ -0,0 +1,75 @@
+export interface UseDialogManagerReturn<T> {
+    /**
+     * Whether the dialog is currently open
+     */
+    isOpen: boolean;
+    /**
+     * The data associated with the dialog (e.g., the item being edited/created)
+     */
+    data: T | null;
+    /**
+     * Open the dialog with optional data
+     */
+    open: (data?: T) => void;
+    /**
+     * Close the dialog without saving
+     */
+    close: () => void;
+    /**
+     * Confirm and close the dialog (typically calls the onConfirm callback)
+     */
+    confirm: (data: T) => void;
+    /**
+     * Set the dialog open state directly
+     */
+    setIsOpen: (isOpen: boolean) => void;
+}
+export interface UseDialogManagerOptions<T> {
+    /**
+     * Callback when dialog is confirmed/saved
+     */
+    onConfirm?: (data: T) => void;
+    /**
+     * Callback when dialog is cancelled/closed without saving
+     */
+    onCancel?: () => void;
+    /**
+     * Factory function to create initial data when opening dialog
+     */
+    createInitialData?: () => T;
+}
+/**
+ * Generic hook for managing dialog state with associated data.
+ * Useful for dialogs that create/edit items with temporary state.
+ *
+ * @param options - Configuration options
+ *
+ * @example
+ * ```tsx
+ * // For adding a new property
+ * const addDialog = useDialogManager<PropertyData>({
+ *   createInitialData: () => ({
+ *     id: generateId(),
+ *     key: "",
+ *     type: "string",
+ *     required: false
+ *   }),
+ *   onConfirm: (property) => {
+ *     updateProperty(property.id, property);
+ *   }
+ * });
+ *
+ * // Usage in JSX
+ * <Button onClick={() => addDialog.open()}>Add Property</Button>
+ *
+ * {addDialog.isOpen && addDialog.data && (
+ *   <PropertyEditDialog
+ *     property={addDialog.data}
+ *     open={addDialog.isOpen}
+ *     onOpenChange={addDialog.setIsOpen}
+ *     onUpdate={addDialog.confirm}
+ *   />
+ * )}
+ * ```
+ */
+export declare function useDialogManager<T>(options?: UseDialogManagerOptions<T>): UseDialogManagerReturn<T>;

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

@@ -0,0 +1,71 @@
+export interface UseInlineEditorOptions {
+    /**
+     * Whether to allow empty values. If false, reverts to original value on blur when empty.
+     * @default false
+     */
+    allowEmpty?: boolean;
+    /**
+     * Callback when editing starts
+     */
+    onEditStart?: () => void;
+    /**
+     * Callback when editing is cancelled
+     */
+    onEditCancel?: () => void;
+}
+export interface UseInlineEditorReturn {
+    /**
+     * Whether the field is currently being edited
+     */
+    isEditing: boolean;
+    /**
+     * The current edited value
+     */
+    value: string;
+    /**
+     * Start editing mode
+     */
+    startEdit: () => void;
+    /**
+     * Handle value changes
+     */
+    handleChange: (newValue: string) => void;
+    /**
+     * Handle blur event - saves or reverts changes
+     */
+    handleBlur: () => void;
+    /**
+     * Handle keyboard events (Enter to save, Escape to cancel)
+     */
+    handleKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+}
+/**
+ * Hook for managing inline editing state and behavior.
+ * Handles common patterns like Enter/Escape keys, blur to save, and syncing with external value changes.
+ *
+ * @param initialValue - The initial/current value from props
+ * @param onSave - Callback when value should be saved (on blur or Enter)
+ * @param options - Optional configuration
+ *
+ * @example
+ * ```tsx
+ * const titleEditor = useInlineEditor(
+ *   property.title || "",
+ *   (newValue) => onUpdate({ ...property, title: newValue }),
+ *   { allowEmpty: false }
+ * );
+ *
+ * {titleEditor.isEditing ? (
+ *   <Input
+ *     value={titleEditor.value}
+ *     onChange={(e) => titleEditor.handleChange(e.target.value)}
+ *     onBlur={titleEditor.handleBlur}
+ *     onKeyDown={titleEditor.handleKeyDown}
+ *     autoFocus
+ *   />
+ * ) : (
+ *   <span onClick={titleEditor.startEdit}>{property.title}</span>
+ * )}
+ * ```
+ */
+export declare function useInlineEditor(initialValue: string, onSave: (value: string) => void, options?: UseInlineEditorOptions): UseInlineEditorReturn;

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

@@ -6,4 +6,4 @@ export interface UsePropertyEditorReturn {
     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;
+export declare const usePropertyEditor: (property: PropertyData, onUpdate: (property: PropertyData) => void, isNewProperty?: boolean, keyEditable?: boolean) => UsePropertyEditorReturn;

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

@@ -0,0 +1,49 @@
+import type { PropertyData, PropertyType } from "@/types/schema";
+export interface UseTypeSelectorReturn {
+    /**
+     * Whether the type selector is currently open
+     */
+    isChangingType: boolean;
+    /**
+     * Set whether the type selector is open
+     */
+    setIsChangingType: (isOpen: boolean) => void;
+    /**
+     * Handle type change with automatic cleanup of type-specific constraints
+     */
+    handleTypeChange: (newType: PropertyType) => void;
+    /**
+     * List of available types that can be selected
+     */
+    availableTypes: PropertyType[];
+}
+/**
+ * Hook for managing property type selection with automatic constraint cleanup.
+ * When changing types, automatically removes constraints that don't apply to the new type.
+ *
+ * @param property - The property being edited
+ * @param onUpdate - Callback to update the property
+ *
+ * @example
+ * ```tsx
+ * const typeSelector = useTypeSelector(property, onUpdate);
+ *
+ * {typeSelector.isChangingType ? (
+ *   <Select
+ *     value={property.type}
+ *     onValueChange={typeSelector.handleTypeChange}
+ *     open={typeSelector.isChangingType}
+ *     onOpenChange={typeSelector.setIsChangingType}
+ *   >
+ *     {typeSelector.availableTypes.map(type => (
+ *       <SelectItem key={type} value={type}>{type}</SelectItem>
+ *     ))}
+ *   </Select>
+ * ) : (
+ *   <button onClick={() => typeSelector.setIsChangingType(true)}>
+ *     {property.type}
+ *   </button>
+ * )}
+ * ```
+ */
+export declare function useTypeSelector(property: PropertyData, onUpdate: (property: PropertyData) => void): UseTypeSelectorReturn;