@djangocfg/ui-nextjs 2.1.89 → 2.1.91

package/src/tools/JsonForm/JsonSchemaForm.tsx

@@ -1,197 +0,0 @@
-'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

@@ -1,249 +0,0 @@
-'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

@@ -1,161 +0,0 @@
-'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

@@ -1,46 +0,0 @@
-"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

@@ -1,47 +0,0 @@
-"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>
-  );
-}