@suada/angular v1.0.0-rc.18

@suada/angular

Angular components and services for Suada integrations. This package provides ready-to-use Angular components that integrate with @suada/core.

Installation

npm install @suada/angular @suada/core

Setup

1. Import the SuadaModule in your app.module.ts:

import { SuadaModule } from '@suada/angular';

@NgModule({
  imports: [
    SuadaModule.forRoot({
      apiKey: 'your-api-key',
      organizationId: 'your-organization-id' // Optional
    })
  ]
})
export class AppModule { }

2. Use Suada components in your templates:

<!-- Integration Button -->
<suada-integration-button
  [provider]="'notion'"
  [redirectUri]="'https://your-app.com/callback'"
  (success)="onIntegrationSuccess($event)"
  (error)="onIntegrationError($event)">
  Connect Notion
</suada-integration-button>

<!-- Integration List -->
<suada-integration-list
  [filter]="{ provider: 'notion' }"
  (select)="onIntegrationSelect($event)">
</suada-integration-list>

Components

SuadaIntegrationButton

A button component that handles the OAuth flow for integrations.

Properties

• provider: string - The integration provider (e.g., 'notion')
• redirectUri: string - The OAuth callback URL
• buttonText: string - Optional custom button text
• buttonClass: string - Optional CSS class for styling

Events

• success - Emitted when integration is successful
• error - Emitted when an error occurs
• click - Emitted when the button is clicked

SuadaIntegrationList

A component that displays a list of integrated services.

Properties

• filter: IntegrationFilter - Optional filter for the integrations list
• layout: 'grid' | 'list' - Display layout (default: 'grid')
• loading: boolean - Show loading state

Events

• select - Emitted when an integration is selected
• delete - Emitted when an integration is deleted

Services

SuadaService

Angular service wrapper for the @suada/core client.

import { SuadaService } from '@suada/angular';

@Component({...})
export class YourComponent {
  constructor(private suada: SuadaService) {}

  async connectNotion() {
    try {
      const authUrl = await this.suada.initializeOAuth('notion', {
        redirectUri: 'https://your-app.com/callback'
      });
      window.location.href = authUrl;
    } catch (error) {
      console.error('Failed to initialize OAuth:', error);
    }
  }

  async handleCallback(code: string, state: string) {
    try {
      const result = await this.suada.handleOAuthCallback('notion', { code, state });
      console.log('Integration successful:', result);
    } catch (error) {
      console.error('Failed to complete OAuth:', error);
    }
  }
}

Development

# Install dependencies
npm install

# Build the library
npm run build

# Run tests
npm test

# 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