Valtech Components

Documentation

A comprehensive component library for building modern web and hybrid applications with Angular, Ionic, and Capacitor. Includes 134 UI components and 23+ specialized services for authentication, Firebase integration, internationalization, and more.

Features

• 134 UI Components — Atoms, molecules, organisms, and templates ready to use
• Authentication System — Complete auth with OAuth (Google, Apple), session management, and token handling
• Firebase Integration — Analytics, Firestore, Cloud Messaging, and Storage services
• i18n with Signals — Modern internationalization using Angular Signals for reactive translations
• Remote App Configuration — Feature flags and remote config management
• Google Ad Manager — Built-in ad slot integration
• User Feedback System — Collect and manage user feedback
• Storybook Documentation — Interactive component documentation

Technologies

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

Installation

npm install valtech-components

Peer Dependencies

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

Optional peer dependencies for additional features:

# Firebase services
npm install @angular/fire firebase

# QR code generation
npm install qr-code-styling

# Code highlighting
npm install prismjs

# Carousel support
npm install swiper

Usage Paths

Choose the path that fits your needs:

UI Only (Quick Start)

133 of 134 components work without any backend or Firebase configuration. Just install and use:

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 {}

No providers needed. No Firebase. No backend. Just import and use.

Full Integration

For authentication, Firebase services, and i18n, add providers to your main.ts:

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'] }),
  ],
});

Full Integration Guide — Firebase setup, Auth configuration, i18n, and more.

Components Requiring Backend

| Component | Requirement | |-----------|-------------| | LoginComponent | AuthService configured with API endpoint | | ContentReactionComponent | FeedbackService configured with API endpoint |

All other 132 components are fully standalone.

Components

| Category | Count | Description | |----------|-------|-------------| | Atoms | 19 | Basic UI elements: avatar, button, icon, text, image, skeleton, progress-bar, qr-code, etc. | | Molecules | 81 | Compound components: inputs (text, email, phone, pin, date), cards, searchbar, tabs, accordion, pagination, etc. | | Organisms | 24 | Complex components: forms, data-table, menu, toolbar, login, comment-section, infinite-list, etc. | | Templates | 10 | Page layouts: page-wrapper, page-content, docs-shell, auth-background, maintenance-page, etc. |

View full component catalog

Services

Basic Services (No Configuration Required)

These services work out of the box:

| Service | Description | |---------|-------------| | ThemeService | Theme management (light/dark mode) | | ToastService | Toast notifications | | NavigationService | Routing utilities | | DownloadService | File download helpers | | IconsService | Ionicons management | | LocaleService | Simple locale management with localStorage | | LocalStorageService | localStorage abstraction | | LinkProcessorService | Automatic URL and markdown link processing | | InAppBrowserService | Capacitor in-app browser | | ModalService | Modal dialog management | | ConfirmationDialogService | Confirmation dialogs | | QrGeneratorService | QR code generation | | PresetService | Reusable configuration presets | | PaginationService | Pagination state management | | SkeletonService | Skeleton loading states |

Authentication Services (Requires provideValtechAuth)

Requires backend API. See Auth Setup Guide.

| Service | Description | |---------|-------------| | AuthService | Main authentication service | | OAuthService | OAuth providers (Google, Apple) | | SessionService | Session management | | TokenService | JWT token handling | | AuthStateService | Authentication state management | | DeviceService | Device information |

Firebase Services (Requires provideValtechFirebase)

Requires Firebase project. See Firebase Setup Guide.

| Service | Description | |---------|-------------| | FirebaseService | Firebase initialization | | AnalyticsService | Firebase Analytics with custom events | | FirestoreService | Firestore database operations | | MessagingService | Cloud Messaging (push notifications) | | NotificationsService | Notification management | | FirebaseStorageService | Firebase Storage operations |

i18n Service (Requires provideValtechI18n)

| Service | Description | |---------|-------------| | I18nService | Internationalization with Angular Signals |

Backend-Dependent Services

These services require a configured backend API:

| Service | Description | |---------|-------------| | AppConfigService | Remote configuration and feature flags | | FeedbackService | User feedback collection |

Quick Start

Basic Component Usage

import { Component } from '@angular/core';
import { TextComponent, ButtonComponent, CardComponent } from 'valtech-components';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [TextComponent, ButtonComponent, CardComponent],
  template: `
    <val-card [props]="{ title: 'Welcome' }">
      <val-text [props]="{ content: 'Hello, World!', size: 'medium' }" />
      <val-button
        [props]="{ text: 'Get Started', color: 'primary' }"
        (onClick)="handleClick()"
      />
    </val-card>
  `
})
export class ExampleComponent {
  handleClick() {
    console.log('Button clicked');
  }
}

i18n with Signals

import { Component, inject, computed } from '@angular/core';
import { I18nService, TextComponent } from 'valtech-components';

@Component({
  selector: 'app-i18n-example',
  standalone: true,
  imports: [TextComponent],
  template: `
    <val-text [props]="{ content: welcomeText() }" />
  `
})
export class I18nExampleComponent {
  private i18n = inject(I18nService);

  // Use computed() for reactive translations
  welcomeText = computed(() => this.i18n.t('home.welcome'));
}

Authentication

import { Component, inject } from '@angular/core';
import { AuthService } from 'valtech-components';

@Component({
  selector: 'app-auth-example',
  template: `...`
})
export class AuthExampleComponent {
  private auth = inject(AuthService);

  async loginWithGoogle() {
    await this.auth.loginWithGoogle();
  }

  async logout() {
    await this.auth.logout();
  }

  get isAuthenticated() {
    return this.auth.isAuthenticated();
  }
}

Firebase Analytics

import { Component, inject } from '@angular/core';
import { AnalyticsService } from 'valtech-components';

@Component({
  selector: 'app-analytics-example',
  template: `...`
})
export class AnalyticsExampleComponent {
  private analytics = inject(AnalyticsService);

  trackEvent() {
    this.analytics.logEvent('button_click', {
      button_name: 'signup',
      page: 'home'
    });
  }
}

Development

Prerequisites

• Node.js 18+
• npm 9+

Setup

# Install dependencies
npm install

# Start Storybook
npm run storybook
# Open http://localhost:6006

Available Scripts

| Command | Description | |---------|-------------| | npm run build | Build the library | | npm run build:prod | Production build (optimized) | | npm run storybook | Start Storybook dev server (port 6006) | | npm run build-storybook | Build static Storybook | | npm run test | Run unit tests | | npm run prettier | Format source files |

Documentation

For complete documentation, examples, and API reference, visit:

https://ui.myvaltech.com

License

MIT