@thhein04/ui-kit

Lightweight Angular UI kit library for Micro Frontend ecosystems. The package is publishable, tree-shakable (sideEffects: false), and uses a signal store with duplicate-instance detection.

Installation

npm install @thhein04/ui-kit

Peer dependencies:

• @angular/core ^21.0.0
• @angular/common ^21.0.0
• rxjs ^7.8.0

Usage Examples

Import from the package root only:

import { UiBannerComponent, UiKitNotifierService, UiKitStore } from '@thhein04/ui-kit';

Component usage:

import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { UiBannerComponent, UiKitNotifierService } from '@thhein04/ui-kit';

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [UiBannerComponent],
  template: `<lib-ui-banner title="design system" subtitle="shared UI primitives" />`,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DemoComponent {
  private readonly notifier = inject(UiKitNotifierService);

  constructor() {
    this.notifier.notify('UI kit loaded', 'success');
  }
}

Signal Store

UiKitStore is a root-provided signal store that exposes:

• Writable update APIs (updateTheme, addNotification, markNotificationRead, clearNotifications)
• Derived computed signals (theme, notifications, unreadCount)
• Runtime duplicate-instance warning for Module Federation safety

When multiple copies of the package are loaded in the same browser runtime, the store logs a warning and does not crash:

[ui-kit] Multiple UiKitStore instances detected...

Angular Version Compatibility

• Angular: v21+
• TypeScript: strict mode enabled by library tsconfig
• APIs: standalone components, inject(), Angular signals

Module Federation Setup

Always share the library as a singleton in hosts/remotes to avoid multiple runtime instances.

shared: {
  '@thhein04/ui-kit': {
    singleton: true,
    strictVersion: true,
    requiredVersion: 'auto',
  },
  '@angular/core': {
    singleton: true,
    strictVersion: true,
    requiredVersion: 'auto',
  },
  '@angular/common': {
    singleton: true,
    strictVersion: true,
    requiredVersion: 'auto',
  },
  rxjs: {
    singleton: true,
    strictVersion: true,
    requiredVersion: 'auto',
  },
}

Module Federation Example

1. Build and publish:
   • npx nx build ui-kit
   • npm publish dist/ui-kit
2. Install in host and remotes.
3. Configure each webpack federation config with the shared singleton block above.
4. Import only from @thhein04/ui-kit (no deep imports).

Development Commands

• npx nx lint ui-kit
• npx nx test ui-kit
• npx nx build ui-kit