@djangocfg/ui-tools 2.1.91

package/src/tools/JsonForm/JsonSchemaForm.tsx

@@ -0,0 +1,197 @@
+'use client';
+
+import consola from 'consola';
+import { AlertCircle } from 'lucide-react';
+import React, { useCallback, useMemo } from 'react';
+
+import { Alert, AlertDescription, Button } from '@djangocfg/ui-core/components';
+import Form from '@rjsf/core';
+import { RegistryWidgetsType } from '@rjsf/utils';
+import validator from '@rjsf/validator-ajv8';
+
+import {
+    ArrayFieldItemTemplate, ArrayFieldTemplate, BaseInputTemplate, ErrorListTemplate, FieldTemplate,
+    ObjectFieldTemplate
+} from './templates';
+import { JsonSchemaFormProps } from './types';
+import { normalizeFormData, validateSchema } from './utils';
+import {
+    CheckboxWidget, ColorWidget, NumberWidget, SelectWidget, SliderWidget, SwitchWidget, TextWidget
+} from './widgets';
+
+/**
+ * JSON Schema Form Component
+ *
+ * A fully-featured form generator that creates forms from JSON Schema.
+ * Built on top of react-jsonschema-form with custom widgets and templates
+ * using @djangocfg/ui components.
+ *
+ * @example
+ * ```tsx
+ * const schema = {
+ *   type: 'object',
+ *   required: ['name'],
+ *   properties: {
+ *     name: { type: 'string', title: 'Name' },
+ *     age: { type: 'number', title: 'Age' },
+ *     active: { type: 'boolean', title: 'Active' }
+ *   }
+ * };
+ *
+ * <JsonSchemaForm
+ *   schema={schema}
+ *   onSubmit={(data) => console.log(data.formData)}
+ * />
+ * ```
+ */
+export function JsonSchemaForm<T = any>(props: JsonSchemaFormProps<T>) {
+  const {
+    schema,
+    uiSchema,
+    formData,
+    onSubmit,
+    onChange,
+    onError,
+    showErrorList = 'top',
+    liveValidate = false,
+    disabled = false,
+    readonly = false,
+    className,
+    showSubmitButton = true,
+    submitButtonText = 'Submit',
+    ...restProps
+  } = props;
+
+  // Validate and normalize schema before render
+  const validatedSchema = useMemo(() => {
+    if (process.env.NODE_ENV === 'development') {
+      consola.info('[JsonSchemaForm] Validating schema...', schema);
+    }
+    const result = validateSchema(schema);
+    if (!result && process.env.NODE_ENV === 'development') {
+      consola.error('[JsonSchemaForm] Schema validation failed');
+    }
+    return result;
+  }, [schema]);
+
+  // Normalize form data before render
+  const normalizedFormData = useMemo(() => {
+    if (!validatedSchema) {
+      if (process.env.NODE_ENV === 'development') {
+        consola.warn('[JsonSchemaForm] Cannot normalize formData - invalid schema');
+      }
+      return null;
+    }
+    if (process.env.NODE_ENV === 'development') {
+      consola.info('[JsonSchemaForm] Normalizing formData...', formData);
+    }
+    const normalized = normalizeFormData<T>(formData, validatedSchema);
+    if (process.env.NODE_ENV === 'development') {
+      consola.info('[JsonSchemaForm] Normalized formData:', normalized);
+    }
+    return normalized;
+  }, [formData, validatedSchema]);
+
+  // Memoize widgets mapping to prevent recreation on every render
+  // IMPORTANT: Widget keys must match RJSF's expected names:
+  // - For type: string -> uses 'TextWidget' or 'text'
+  // - For type: number/integer -> uses 'updown' or 'range'
+  // - For type: boolean -> uses 'checkbox' or 'select'
+  // - For enum fields -> uses 'SelectWidget' or 'select'
+  const widgets: RegistryWidgetsType = useMemo(() => ({
+    // Standard widget names (PascalCase) - used by RJSF internally
+    TextWidget,
+    NumberWidget,
+    CheckboxWidget,
+    SelectWidget,
+    SwitchWidget,
+    ColorWidget,
+    SliderWidget,
+    // Lowercase aliases - for uiSchema 'ui:widget' references
+    text: TextWidget,
+    number: NumberWidget,
+    checkbox: CheckboxWidget,
+    select: SelectWidget,
+    switch: SwitchWidget,
+    color: ColorWidget,
+    slider: SliderWidget,
+    range: SliderWidget, // alias
+  }), []);
+
+  // Memoize templates to prevent recreation on every render
+  const templates = useMemo(() => ({
+    FieldTemplate,
+    ObjectFieldTemplate,
+    ArrayFieldTemplate,
+    ArrayFieldItemTemplate,
+    ErrorListTemplate,
+    BaseInputTemplate,
+  }), []);
+
+  // Memoize callbacks
+  const handleSubmit = useCallback((data: any) => {
+    if (onSubmit) {
+      // Ensure clean data on submit
+      const cleanData = {
+        ...data,
+        formData: normalizeFormData(data.formData, validatedSchema!),
+      };
+      onSubmit(cleanData);
+    }
+  }, [onSubmit, validatedSchema]);
+
+  const handleChange = useCallback((data: any) => {
+    if (onChange) {
+      onChange(data);
+    }
+  }, [onChange]);
+
+  const handleError = useCallback((errors: any) => {
+    if (onError) {
+      onError(errors);
+    }
+  }, [onError]);
+
+  // Early return if schema is invalid
+  if (!validatedSchema) {
+    return (
+      <div className={className}>
+        <Alert variant="destructive">
+          <AlertCircle className="h-4 w-4" />
+          <AlertDescription>
+            Invalid schema provided. Please check the schema format.
+          </AlertDescription>
+        </Alert>
+      </div>
+    );
+  }
+
+  return (
+    <div className={className}>
+      <Form
+        schema={validatedSchema}
+        uiSchema={uiSchema}
+        formData={normalizedFormData}
+        validator={validator}
+        widgets={widgets}
+        templates={templates}
+        onSubmit={handleSubmit}
+        onChange={handleChange}
+        onError={handleError}
+        showErrorList={showErrorList}
+        liveValidate={liveValidate}
+        disabled={disabled}
+        readonly={readonly}
+        {...restProps}
+      >
+        {showSubmitButton && (
+          <div className="mt-6 flex gap-2">
+            <Button type="submit" disabled={disabled}>
+              {submitButtonText}
+            </Button>
+          </div>
+        )}
+      </Form>
+    </div>
+  );
+}

package/src/tools/JsonForm/examples/BotConfigExample.tsx

@@ -0,0 +1,249 @@
+'use client';
+
+import consola from 'consola';
+import React, { useState } from 'react';
+
+import {
+    Card, CardContent, CardDescription, CardHeader, CardTitle
+} from '@djangocfg/ui-core/components';
+import { RJSFSchema, UiSchema } from '@rjsf/utils';
+
+import { JsonSchemaForm } from '../JsonSchemaForm';
+
+/**
+ * Example JSON Schema for Bot Configuration
+ */
+const botConfigSchema: RJSFSchema = {
+  $schema: 'http://json-schema.org/draft-07/schema#',
+  title: 'Bot Configuration',
+  type: 'object',
+  required: ['name', 'exchange', 'bot_type'],
+  properties: {
+    name: {
+      type: 'string',
+      title: 'Bot Name',
+      description: 'A unique name for your trading bot',
+      minLength: 3,
+      maxLength: 50,
+    },
+    active: {
+      type: 'boolean',
+      title: 'Active',
+      description: 'Enable or disable the bot',
+      default: true,
+    },
+    enabled: {
+      type: 'boolean',
+      title: 'Enabled',
+      description: 'Whether the bot is enabled for trading',
+      default: false,
+    },
+    exchange: {
+      type: 'string',
+      title: 'Exchange',
+      description: 'Select the trading exchange',
+      enum: ['binance', 'bybit', 'okx', 'kucoin'],
+    },
+    bot_type: {
+      type: 'string',
+      title: 'Bot Type',
+      description: 'Type of trading bot',
+      enum: ['spot', 'futures', 'margin'],
+    },
+    settings: {
+      type: 'object',
+      title: 'Bot Settings',
+      properties: {
+        max_trades: {
+          type: 'integer',
+          title: 'Maximum Trades',
+          description: 'Maximum number of concurrent trades',
+          minimum: 1,
+          maximum: 100,
+          default: 3,
+        },
+        trade_amount: {
+          type: 'number',
+          title: 'Trade Amount (USD)',
+          description: 'Amount to invest per trade',
+          minimum: 10,
+          maximum: 10000,
+          default: 100,
+        },
+        stop_loss: {
+          type: 'number',
+          title: 'Stop Loss (%)',
+          description: 'Stop loss percentage',
+          minimum: 0.1,
+          maximum: 50,
+          default: 5,
+        },
+        take_profit: {
+          type: 'number',
+          title: 'Take Profit (%)',
+          description: 'Take profit percentage',
+          minimum: 0.1,
+          maximum: 100,
+          default: 10,
+        },
+        strategy: {
+          type: 'string',
+          title: 'Trading Strategy',
+          enum: ['scalping', 'swing', 'arbitrage', 'grid'],
+        },
+      },
+    },
+    api_credentials: {
+      type: 'object',
+      title: 'API Credentials',
+      required: ['api_key', 'api_secret'],
+      properties: {
+        api_key: {
+          type: 'string',
+          title: 'API Key',
+          description: 'Your exchange API key',
+        },
+        api_secret: {
+          type: 'string',
+          title: 'API Secret',
+          description: 'Your exchange API secret',
+        },
+        testnet: {
+          type: 'boolean',
+          title: 'Use Testnet',
+          description: 'Use testnet environment for testing',
+          default: true,
+        },
+      },
+    },
+    notifications: {
+      type: 'object',
+      title: 'Notifications',
+      properties: {
+        email: {
+          type: 'boolean',
+          title: 'Email Notifications',
+          default: true,
+        },
+        telegram: {
+          type: 'boolean',
+          title: 'Telegram Notifications',
+          default: false,
+        },
+        webhook: {
+          type: 'string',
+          title: 'Webhook URL',
+          format: 'uri',
+        },
+      },
+    },
+  },
+};
+
+/**
+ * UI Schema for customizing form appearance
+ */
+const uiSchema: UiSchema = {
+  'ui:submitButtonOptions': {
+    submitText: 'Save Bot Configuration',
+  },
+  name: {
+    'ui:placeholder': 'My Trading Bot',
+  },
+  active: {
+    'ui:widget': 'SwitchWidget',
+  },
+  enabled: {
+    'ui:widget': 'SwitchWidget',
+  },
+  exchange: {
+    'ui:placeholder': 'Select exchange...',
+  },
+  bot_type: {
+    'ui:placeholder': 'Select bot type...',
+  },
+  settings: {
+    'ui:className': 'grid grid-cols-2 gap-4',
+    strategy: {
+      'ui:placeholder': 'Select strategy...',
+    },
+  },
+  api_credentials: {
+    api_secret: {
+      'ui:widget': 'password',
+    },
+    testnet: {
+      'ui:widget': 'SwitchWidget',
+    },
+  },
+  notifications: {
+    email: {
+      'ui:widget': 'SwitchWidget',
+    },
+    telegram: {
+      'ui:widget': 'SwitchWidget',
+    },
+    webhook: {
+      'ui:placeholder': 'https://example.com/webhook',
+    },
+  },
+};
+
+/**
+ * Example component demonstrating JsonSchemaForm usage
+ */
+export function BotConfigExample() {
+  const [formData, setFormData] = useState<any>();
+  const [submittedData, setSubmittedData] = useState<any>(null);
+
+  const handleSubmit = (data: any) => {
+    consola.success('Form submitted:', data.formData);
+    setSubmittedData(data.formData);
+  };
+
+  const handleChange = (data: any) => {
+    setFormData(data.formData);
+  };
+
+  return (
+    <div className="container mx-auto p-6 max-w-4xl">
+      <div className="space-y-6">
+        <Card>
+          <CardHeader>
+            <CardTitle>Bot Configuration Form</CardTitle>
+            <CardDescription>
+              Example of JSON Schema Form with Bot Configuration
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <JsonSchemaForm
+              schema={botConfigSchema}
+              uiSchema={uiSchema}
+              formData={formData}
+              onSubmit={handleSubmit}
+              onChange={handleChange}
+              liveValidate={false}
+              showErrorList="top"
+            />
+          </CardContent>
+        </Card>
+
+        {submittedData && (
+          <Card>
+            <CardHeader>
+              <CardTitle>Submitted Data</CardTitle>
+              <CardDescription>
+                The data that was submitted from the form
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <pre className="p-4 bg-muted rounded-md overflow-auto text-sm">
+                {JSON.stringify(submittedData, null, 2)}
+              </pre>
+            </CardContent>
+          </Card>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/tools/JsonForm/examples/RealBotConfigExample.tsx

@@ -0,0 +1,161 @@
+'use client';
+
+import consola from 'consola';
+import React, { useState } from 'react';
+
+import {
+    Card, CardContent, CardDescription, CardHeader, CardTitle
+} from '@djangocfg/ui-core/components';
+import { RJSFSchema } from '@rjsf/utils';
+
+import { JsonSchemaForm } from '../JsonSchemaForm';
+
+/**
+ * Real Bot Config Schema from API
+ * This is the actual schema returned by the backend
+ */
+const realBotConfigSchema: RJSFSchema = {
+  type: 'object',
+  title: 'BotConfig',
+  $schema: 'http://json-schema.org/draft-07/schema#',
+  required: ['name', 'exchange'],
+  properties: {
+    name: {
+      type: 'string',
+      description: 'Bot name',
+    },
+    active: {
+      type: 'boolean',
+      description: 'Bot active',
+    },
+    enabled: {
+      type: 'boolean',
+      description: 'Bot enabled',
+    },
+    exchange: {
+      type: 'string',
+      description: 'Exchange name (binance, bybit, etc)',
+    },
+    direction: {
+      type: 'string',
+      description: 'Trading direction (long, short, both)',
+    },
+    amount_usdt: {
+      type: 'number',
+      description: 'Amount in USDT',
+    },
+    market_type: {
+      type: 'string',
+      description: 'Market type (spot, futures, swap)',
+    },
+    signal_type: {
+      type: 'string',
+      description: 'Signal type (listing, technical, etc)',
+    },
+    allowed_quotes: {
+      type: 'array',
+      items: {
+        type: 'string',
+      },
+      description: 'Allowed quote currencies',
+    },
+    allowed_sources: {
+      type: 'array',
+      items: {
+        type: 'string',
+      },
+      description: 'Allowed signal sources',
+    },
+    force_market_close_timer: {
+      type: 'integer',
+      description: 'Force close timer in seconds',
+    },
+    force_market_close_enabled: {
+      type: 'boolean',
+      description: 'Enable forced market close',
+    },
+  },
+};
+
+/**
+ * Real settings data from bot
+ */
+const realSettings = {
+  version: '1.0.0',
+  hostname: 'botserver',
+  supported_exchanges: ['binance'],
+  supported_strategies: ['default'],
+};
+
+/**
+ * Example component with real bot config schema
+ */
+export function RealBotConfigExample() {
+  const [formData, setFormData] = useState<any>(realSettings);
+  const [submittedData, setSubmittedData] = useState<any>(null);
+
+  const handleSubmit = (data: any) => {
+    consola.success('Form submitted:', data.formData);
+    setSubmittedData(data.formData);
+  };
+
+  const handleChange = (data: any) => {
+    consola.info('Form changed:', data.formData);
+    setFormData(data.formData);
+  };
+
+  return (
+    <div className="container mx-auto p-6 max-w-4xl">
+      <div className="space-y-6">
+        <Card>
+          <CardHeader>
+            <CardTitle>Real Bot Configuration Form</CardTitle>
+            <CardDescription>
+              Using actual schema from API response
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <JsonSchemaForm
+              schema={realBotConfigSchema}
+              formData={formData}
+              onSubmit={handleSubmit}
+              onChange={handleChange}
+              liveValidate={false}
+              showErrorList="top"
+            />
+          </CardContent>
+        </Card>
+
+        {submittedData && (
+          <Card>
+            <CardHeader>
+              <CardTitle>Submitted Data</CardTitle>
+              <CardDescription>
+                The data that was submitted from the form
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <pre className="p-4 bg-muted rounded-md overflow-auto text-sm">
+                {JSON.stringify(submittedData, null, 2)}
+              </pre>
+            </CardContent>
+          </Card>
+        )}
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Current Form Data</CardTitle>
+            <CardDescription>
+              Real-time form data (onChange)
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <pre className="p-4 bg-muted rounded-md overflow-auto text-sm">
+              {JSON.stringify(formData, null, 2)}
+            </pre>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

package/src/tools/JsonForm/index.ts

@@ -0,0 +1,46 @@
+"use client"
+
+/**
+ * JSON Schema Form Module
+ *
+ * A complete solution for generating forms from JSON Schema 7
+ * Built with React JSON Schema Form (rjsf), Radix UI, and Tailwind CSS
+ *
+ * Features:
+ * - Automatic form generation from JSON Schema
+ * - Custom widgets using @djangocfg/ui components
+ * - Validation with ajv8
+ * - TypeScript support
+ * - Responsive design
+ * - Dark mode support
+ *
+ * @example
+ * ```tsx
+ * import { JsonSchemaForm } from '@/components/JsonForm';
+ *
+ * const schema = {
+ *   type: 'object',
+ *   properties: {
+ *     name: { type: 'string' },
+ *     age: { type: 'number' }
+ *   }
+ * };
+ *
+ * <JsonSchemaForm
+ *   schema={schema}
+ *   onSubmit={(data) => console.log(data)}
+ * />
+ * ```
+ */
+
+export { JsonSchemaForm } from './JsonSchemaForm';
+export type { JsonSchemaFormProps } from './types';
+
+// Export widgets for custom usage
+export * from './widgets';
+
+// Export templates for custom usage
+export * from './templates';
+
+// Export utilities for advanced usage
+export * from './utils';

package/src/tools/JsonForm/templates/ArrayFieldItemTemplate.tsx

@@ -0,0 +1,47 @@
+"use client"
+
+import React from 'react';
+
+import { cn } from '@djangocfg/ui-core/lib';
+import { ArrayFieldItemTemplateProps, getTemplate, getUiOptions } from '@rjsf/utils';
+
+/**
+ * Array field item template for JSON Schema Form
+ * Renders individual array items with proper styling and action buttons
+ *
+ * In RJSF v6, this template is responsible for rendering each item in an array,
+ * including the item content (children) and the action buttons (remove, move up/down, copy).
+ */
+export function ArrayFieldItemTemplate(props: ArrayFieldItemTemplateProps) {
+  const {
+    children,
+    className,
+    buttonsProps,
+    hasToolbar,
+    registry,
+    uiSchema,
+  } = props;
+
+  const uiOptions = getUiOptions(uiSchema);
+  const ArrayFieldItemButtonsTemplate = getTemplate(
+    'ArrayFieldItemButtonsTemplate',
+    registry,
+    uiOptions,
+  );
+
+  return (
+    <div
+      className={cn(
+        'flex gap-2 items-start p-4 rounded-md border bg-card',
+        className
+      )}
+    >
+      <div className="flex-1">{children}</div>
+      {hasToolbar && (
+        <div className="flex items-center gap-1">
+          <ArrayFieldItemButtonsTemplate {...buttonsProps} />
+        </div>
+      )}
+    </div>
+  );
+}