@suada/next

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

Installation

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:

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:

'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:

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

Custom Styling

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

<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:

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:

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 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 file for details.