<img style="margin-bottom: 20px;" src="https://myvaltech.s3.us-east-2.amazonaws.com/logo-terminal-rounded.png" width="60px" />

# Valtech Components

[![npm version](https://img.shields.io/npm/v/valtech-components.svg)](https://www.npmjs.com/package/valtech-components)
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)

Component library for Angular + Ionic + Capacitor apps. **145 components** and **23+ services** for auth, Firebase, i18n, and more.

**[Full documentation → ui.myvaltech.com](https://ui.myvaltech.com)**

---

## Installation

```bash
npm install valtech-components
```

**Peer dependencies (required):**

```bash
npm install @angular/common @angular/core @ionic/angular ionicons rxjs
```

**Optional — only if you use these features:**

```bash
npm install @angular/fire firebase          # Firebase services
npm install @capacitor/app @capacitor/clipboard  # Native features
npm install qr-code-styling                 # QR code component
npm install prismjs                         # Code highlighting
npm install swiper                          # Carousel component
```

---

## Usage

### UI only (no backend needed)

144 of 145 components work standalone — no Firebase, no backend:

```typescript
import { ButtonComponent, CardComponent, TextComponent } from 'valtech-components';

@Component({
  standalone: true,
  imports: [ButtonComponent, CardComponent, TextComponent],
  template: `
    <val-card [props]="{ title: 'My Card' }">
      <val-text [props]="{ content: 'Hello World' }" />
      <val-button [props]="{ text: 'Click me', color: 'primary' }" />
    </val-card>
  `
})
export class MyComponent {}
```

### Full integration (auth + Firebase + i18n)

Add providers in `main.ts`:

```typescript
import {
  provideValtechFirebase,
  provideValtechAuth,
  provideValtechI18n,
  createFirebaseConfig,
} from 'valtech-components';
import firebaseConfig from './config/firebase.config.json';

bootstrapApplication(AppComponent, {
  providers: [
    provideValtechFirebase(createFirebaseConfig(firebaseConfig)),
    provideValtechAuth({ apiUrl: 'https://api.yourapp.com' }),
    provideValtechI18n({ defaultLang: 'en', supportedLangs: ['en', 'es', 'pt'] }),
  ],
});
```

---

## Components

| Category | Count | Includes |
|----------|------:|---------|
| Atoms | 24 | avatar, button, icon, text, image, skeleton, progress-bar, qr-code… |
| Molecules | 81 | inputs (text, email, phone, pin, date), cards, tabs, accordion, pagination… |
| Organisms | 31 | forms, data-table, menu, toolbar, login, comment-section, infinite-list… |
| Templates | 9 | page-wrapper, page-content, docs-shell, auth-background, maintenance-page… |
| **Total** | **145** | |

Components requiring a backend API: `LoginComponent`, `ContentReactionComponent`.

---

## Services

**No setup required:**
`ThemeService` · `ToastService` · `NavigationService` · `DownloadService` · `IconsService` · `LocaleService` · `LocalStorageService` · `ModalService` · `ConfirmationDialogService` · `QrGeneratorService` · `PaginationService` · `SkeletonService`

**Requires `provideValtechAuth`:**
`AuthService` · `OAuthService` · `SessionService` · `TokenService` · `AuthStateService` · `DeviceService`

**Requires `provideValtechFirebase`:**
`FirebaseService` · `AnalyticsService` · `FirestoreService` · `MessagingService` · `NotificationsService` · `FirebaseStorageService`

**Requires `provideValtechI18n`:**
`I18nService`

---

## Technologies

Angular 18+ · Ionic 8+ · Capacitor 6+ · Firebase 10+ · RxJS 7.8+

---

## Development

```bash
npm install
npm run storybook     # http://localhost:6006
npm run build         # build library
npm run test          # unit tests
```

---

## License

[MIT](https://opensource.org/licenses/MIT)