npm package: @suada/angular
Description: Angular components for Suada integrations
Latest version: 1.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

```bash
npm install @suada/angular @suada/core
```

## Setup

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

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

```html
<!-- 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.

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

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