@suada/react

React components for Suada's integration management system. This package provides React-specific implementations of Suada's integration UI components.

Installation

npm install @suada/react

Usage

import { IntegrationManager } from '@suada/react';

function App() {
  return (
    <IntegrationManager
      config={{
        apiKey: 'your-api-key',
        externalUserIdentifier: 'user-123',
        gridColumns: 3,
        onIntegrationConnected: (integration) => {
          console.log(`${integration} connected`);
        },
        onIntegrationDisconnected: (integration) => {
          console.log(`${integration} disconnected`);
        }
      }}
    />
  );
}

Components

IntegrationManager

The main component for managing integrations. Displays a list of available integrations and their current status.

IntegrationCard

A standalone component for displaying a single integration with its status and controls.

Props

IntegrationManager Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | config | SuadaIntegrationsConfig | Yes | Configuration object for the integration manager | | className | string | No | Additional CSS class name | | style | React.CSSProperties | No | Additional inline styles |

Configuration Options

| Option | Type | Required | Default | Description | |--------|------|----------|---------|-------------| | apiKey | string | Yes | - | Your Suada API key | | externalUserIdentifier | string | Yes | - | Identifier for the user | | baseUrl | string | No | Suada API URL | Custom API URL if needed | | theme | object | No | Default theme | Custom theme options | | size | 'small' \| 'medium' \| 'large' | No | 'medium' | Size of the component | | gridColumns | number | No | 3 | Number of columns in the integration grid | | enabledIntegrations | string[] | No | All integrations | List of integration types to enable | | onIntegrationConnected | function | No | - | Callback when integration is connected | | onIntegrationDisconnected | function | No | - | Callback when integration is disconnected | | onError | function | No | - | Callback when an error occurs |

IntegrationCard Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | integration | Integration | Yes | Integration details | | status | IntegrationStatus | Yes | Current status of the integration | | config | SuadaIntegrationsConfig | Yes | Configuration object | | className | string | No | Additional CSS class name | | style | React.CSSProperties | No | Additional inline styles |

Development

# Install dependencies
npm install

# Run tests
npm test

# Build the package
npm run build

# Run linting
npm run lint

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

MIT