@acceldata/cosmos-ui

A modern UI component library for Angular applications, built on top of PrimeNG.

Installation

npm install @acceldata/cosmos-ui

Dependencies

This library requires the following dependencies:

npm install primeng primeicons @angular/animations @fortawesome/angular-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-brands-svg-icons

Usage

Import the components you need in your module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ButtonModule, CheckboxModule } from '@acceldata/cosmos-ui';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ButtonModule,
    CheckboxModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Then use the components in your templates:

<!-- Button Component -->
<lib-button label="Click me" severity="primary"></lib-button>

<!-- Checkbox Component -->
<lib-checkbox label="Accept terms" [(ngModel)]="accepted"></lib-checkbox>

Storybook

This library includes a Storybook instance to showcase and document the components. To run Storybook:

npm run storybook

This will start the Storybook server at http://localhost:6007.

To build the Storybook static site:

npm run build-storybook

This will generate the static Storybook site in the dist/storybook/ui-lib directory.

Theming

Setting up the Theme

To use the theming system, you need to import the theme styles in your angular.json file:

"styles": [
  "node_modules/@acceldata/cosmos-ui/lib/styles/styles.scss",
  "src/styles.scss"
]

Alternatively, you can import the styles in your styles.scss file:

@import '@acceldata/cosmos-ui/lib/styles/styles.scss';

Using the Theme Service

To enable theme switching in your application, import the ThemeModule in your app module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ButtonModule, CheckboxModule, ThemeModule } from '@acceldata/cosmos-ui';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ThemeModule,
    ButtonModule,
    CheckboxModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Then you can inject the ThemeService in your components:

import { Component } from '@angular/core';
import { ThemeService } from '@acceldata/cosmos-ui';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  constructor(public themeService: ThemeService) {}

  toggleTheme(): void {
    this.themeService.toggleTheme();
  }
}

And use it in your templates:

<button (click)="toggleTheme()">
  Toggle Theme (Current: {{ themeService.theme }})
</button>

Theme Variables

You can access the theme variables in your components:

import { Component } from '@angular/core';
import { THEME_VARIABLES, AD_THEME_VARIABLES } from '@acceldata/cosmos-ui';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  // Use theme variables
  primaryColor = THEME_VARIABLES.primaryColor;
  accentColor = AD_THEME_VARIABLES.accent;
}

Available Components

Button

A versatile button component with various styles and states.

<lib-button 
  label="Submit" 
  severity="primary" 
  [raised]="true"
  [loading]="isLoading"
  (onClick)="handleClick($event)">
</lib-button>

Checkbox

A customizable checkbox component that supports template-driven and reactive forms.

<lib-checkbox 
  label="I agree to the terms" 
  [(ngModel)]="agreed"
  [required]="true"
  (onChange)="handleChange($event)">
</lib-checkbox>

Development

Building the Library

To build the library:

npm run build:lib

For production build:

npm run build:lib:prod

Publishing the Library

To publish the library to npm:

npm run publish:lib

License

MIT