npm package: @suada/next
Description: Next.js SDK for Suada Integrations
Latest version: 0.0.1

# @suada/next

A Next.js SDK for integrating with Suada's integration platform.

## Installation

```bash
npm install @suada/next @suada/core
# or
yarn add @suada/next @suada/core
# or
pnpm add @suada/next @suada/core
```

## Usage

First, configure your Suada integration client:

```typescript
import { SuadaIntegrationsConfig } from '@suada/core';

const config: SuadaIntegrationsConfig = {
  apiKey: 'your-api-key',
  externalUserIdentifier: 'user-123',
  theme: {
    primary: '#4F46E5', // Indigo-600
    secondary: '#6B7280', // Gray-500
    text: '#111827', // Gray-900
    background: '#FFFFFF',
    error: '#DC2626', // Red-600
    success: '#059669', // Green-600
  },
  // Optional: Enable only specific integrations
  enabledIntegrations: ['slack', 'notion', 'jira'],
  // Optional: Configure pagination
  pagination: {
    enabled: true,
    itemsPerPage: 6,
    showPageNumbers: true,
  },
  // Optional: Event handlers
  onIntegrationConnected: (integration) => {
    console.log(`Connected to ${integration}`);
  },
  onIntegrationDisconnected: (integration) => {
    console.log(`Disconnected from ${integration}`);
  },
  onError: (error) => {
    console.error('Integration error:', error);
  },
};
```

Then, use the `IntegrationManager` component in your Next.js application:

```typescript
'use client';

import { IntegrationManager } from '@suada/next';
import { config } from './config';

export default function IntegrationsPage() {
  return (
    <div className="container mx-auto py-8">
      <h1 className="text-2xl font-bold mb-6">Integrations</h1>
      <IntegrationManager config={config} />
    </div>
  );
}
```

### Dark Mode Support

The SDK supports dark mode out of the box. Simply pass the `isDarkMode` prop to enable dark mode:

```typescript
<IntegrationManager config={config} isDarkMode={true} />
```

### Custom Styling

You can customize the appearance of the integration manager using Tailwind CSS classes:

```typescript
<IntegrationManager
  config={config}
  className="max-w-4xl mx-auto"
  isDarkMode={true}
/>
```

### Individual Integration Cards

If you need more control over the layout, you can use the `IntegrationCard` component directly:

```typescript
import { IntegrationCard } from '@suada/next';

function CustomIntegrationLayout({ integration, status }) {
  return (
    <IntegrationCard
      integration={integration}
      status={status}
      isDarkMode={false}
      onConnect={(credentials) => {
        // Handle connection
      }}
      onDisconnect={() => {
        // Handle disconnection
      }}
    />
  );
}
```

### Utility Functions

The SDK exports a `cn` utility function for merging Tailwind CSS classes:

```typescript
import { cn } from '@suada/next';

const className = cn(
  'base-class',
  condition && 'conditional-class',
  'override-class'
);
```

## TypeScript Support

This SDK is written in TypeScript and includes full type definitions for all components and utilities.

## Contributing

Please read our [Contributing Guide](../../CONTRIBUTING.md) for details on our code of conduct and the process for submitting pull requests.

## License

This project is licensed under the MIT License - see the [LICENSE](../../LICENSE) file for details.