@metadiv-studio/system-setting

A React component library for managing system settings with a clean, intuitive interface. This package provides a flexible and customizable system settings management component that supports various data types and integrates seamlessly with the Metadiv Studio ecosystem.

Installation

npm i @metadiv-studio/system-setting

Description

The @metadiv-studio/system-setting package provides a comprehensive React component for managing system configuration settings. It features:

• Multiple Data Type Support: Handles string, integer, float, boolean, image, and file types
• Admin & User Modes: Separate interfaces for administrative and regular user operations
• Custom Rendering: Extensible rendering system for custom field types
• Real-time Updates: Live preview of changes with save/cancel functionality
• Internationalization: Built-in translation support
• Responsive Design: Modern UI with Tailwind CSS styling
• TypeScript Support: Full TypeScript definitions included

Features

• 🔧 Automatic Type Detection: Automatically renders appropriate input controls based on setting type
• 👥 Role-based Access: Separate admin and user interfaces
• 🎨 Customizable UI: Extensible rendering system for complex field types
• 🌐 i18n Ready: Built-in translation support
• 📱 Responsive: Mobile-friendly design
• 🔒 Secure: Proper API integration with authentication

Usage

Basic Usage

import { SystemSetting } from '@metadiv-studio/system-setting';

const MyComponent = () => {
  const settings = [
    { label: 'Site Name', key: 'site_name' },
    { label: 'Max Users', key: 'max_users' },
    { label: 'Enable Registration', key: 'enable_registration' },
    { label: 'Site Logo', key: 'site_logo' }
  ];

  return (
    <SystemSetting 
      items={settings}
      admin={false} // Set to true for admin mode
    />
  );
};

Admin Mode

import { SystemSetting } from '@metadiv-studio/system-setting';

const AdminSettings = () => {
  const adminSettings = [
    { label: 'Database URL', key: 'db_url' },
    { label: 'API Key', key: 'api_key' },
    { label: 'Debug Mode', key: 'debug_mode' },
    { label: 'Backup Schedule', key: 'backup_schedule' }
  ];

  return (
    <SystemSetting 
      items={adminSettings}
      admin={true} // Admin mode with elevated permissions
    />
  );
};

Custom Rendering

import { SystemSetting, SystemSettingItem } from '@metadiv-studio/system-setting';

const CustomSettings = () => {
  const customSettings: SystemSettingItem[] = [
    {
      label: 'Theme Configuration',
      key: 'theme_config',
      render: (setting) => (
        <div className="p-4 border rounded">
          <h3 className="font-bold mb-2">Custom Theme Editor</h3>
          <textarea 
            value={setting.value}
            onChange={(e) => {
              // Custom change handling
            }}
            className="w-full h-32 p-2 border rounded"
          />
        </div>
      )
    },
    {
      label: 'Email Template',
      key: 'email_template',
      render: (setting) => (
        <div className="p-4 bg-gray-50 rounded">
          <h3 className="font-bold mb-2">Email Template Editor</h3>
          <div className="space-y-2">
            <input 
              type="text" 
              placeholder="Subject"
              className="w-full p-2 border rounded"
            />
            <textarea 
              placeholder="Email body"
              className="w-full h-24 p-2 border rounded"
            />
          </div>
        </div>
      )
    }
  ];

  return (
    <SystemSetting 
      items={customSettings}
      admin={false}
    />
  );
};

Advanced Configuration

import { SystemSetting } from '@metadiv-studio/system-setting';

const AdvancedSettings = () => {
  const advancedSettings = [
    // String type - renders as text input
    { label: 'Company Name', key: 'company_name' },
    
    // Integer type - renders as number input
    { label: 'Session Timeout (minutes)', key: 'session_timeout' },
    
    // Float type - renders as number input
    { label: 'Tax Rate (%)', key: 'tax_rate' },
    
    // Boolean type - renders as switch/toggle
    { label: 'Enable Notifications', key: 'enable_notifications' },
    
    // Image type - renders as image upload
    { label: 'Company Logo', key: 'company_logo' },
    
    // File type - renders as file upload
    { label: 'Terms of Service', key: 'terms_of_service' }
  ];

  return (
    <div className="max-w-4xl mx-auto p-6">
      <h1 className="text-2xl font-bold mb-6">System Configuration</h1>
      <SystemSetting 
        items={advancedSettings}
        admin={true}
      />
    </div>
  );
};

API Reference

SystemSetting Component

Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | items | SystemSettingItem[] | Yes | Array of setting items to display | | admin | boolean | No | Enable admin mode (default: false) |

SystemSettingItem Interface

interface SystemSettingItem {
  label: string;        // Display label for the setting
  key: string;          // Unique identifier for the setting
  render?: (setting: SystemSettingDTO) => React.ReactNode; // Custom render function
}

SystemSettingDTO Interface

interface SystemSettingDTO {
  id: number;
  created_at: number;
  updated_at: number;
  workspace_id: number;
  type: string;         // 'string', 'int', 'float', 'bool', 'image', 'file'
  key: string;
  value: any;
}

Supported Data Types

| Type | Description | Default Renderer | |------|-------------|------------------| | string | Text input | <Input /> component | | int | Number input | <Input /> component | | float | Number input | <Input /> component | | bool | Toggle switch | <Switch /> component | | image | Image upload | <ImageUpload /> component | | file | File upload | <FileUpload /> component |

Dependencies

This package has the following peer dependencies:

• react ^18
• react-dom ^18

And integrates with these Metadiv Studio packages:

• @metadiv-studio/axios-configurator - HTTP client configuration
• @metadiv-studio/button - Button components
• @metadiv-studio/input - Input components
• @metadiv-studio/switch - Switch/toggle components
• @metadiv-studio/translation - Internationalization
• @metadiv-studio/upload - File upload components

Styling

The component uses Tailwind CSS for styling and is fully responsive. All styling classes can be customized by overriding the default classes or extending the Tailwind configuration.

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This package is licensed under the UNLICENSED license.

Support

For support and questions, please contact the Metadiv Studio team or open an issue in the repository.