npm package: @suada/react
Description: React components for Suada integrations
Latest version: 1.0.0-rc.26

# @suada/react

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

## Installation

```bash
npm install @suada/react
```

## Usage

```tsx
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

```bash
# 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