The Connection.Settings component renders a dynamic form based on connector settings. It provides:

  • Dynamic form generation based on connector configuration
  • Real-time form validation
  • Internationalization support
  • Automatic state management
  • Default value handling

​
Installation

yarn add @runmorph/atoms

​
Usage

"use client"
import { Connection } from "@runmorph/atoms";

function ConnectorSettings() {
    return (
        <Connection.Provider sessionToken={sessionToken}>
            <Connection.Settings />
        </Connection.Provider>
    );
}

export default ConnectorSettings;

​
States

The component handles various states:

  1. Loading: Displays a loading message while fetching connector configuration
  2. Error: Shows error message if configuration fetch fails
  3. Empty: Indicates when no connector is found
  4. Form: Renders the settings form when configuration is available

​
Internationalization

The component supports translation keys for:

​
Status Messages

  • settings.status.loading
  • settings.status.error
  • settings.status.noConnector

​
Error Messages

  • settings.errors.missingMethod
  • settings.errors.fetchFailed

​
Connector-specific Translations

  • settings.connectors.{connectorId}.{settingKey}.label
  • settings.connectors.{connectorId}.{settingKey}.description
  • settings.connectors.{connectorId}.{settingKey}.placeholder
  • settings.connectors.{connectorId}.{settingKey}.options.{optionValue}
  • settings.connectors.{connectorId}.{settingKey}.required