selisk
0 Followers · 0 Following
  • Joined on 2024-10-28
Repositories
1
 Projects Packages Public Activity Starred Repositories

selisk-starter-kit (0.0.2)

Published 2026-02-04 20:06:55 +01:00 by selisk

Installation

registry=
npm install selisk-starter-kit@0.0.2
"selisk-starter-kit": "0.0.2"

About this package

Selisk Starter Kit

A reusable Angular library containing services, components, and auth pages for quickly bootstrapping applications.

Installation

npm install selisk-starter-kit

Setup

1. Configure the library in your app.config.ts:

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { provideSeliskStarterKit, authInterceptor } from 'selisk-starter-kit';

import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideHttpClient(withInterceptors([authInterceptor])),
    provideSeliskStarterKit({
      apiUrl: '/api/v1',
      loginRoute: '/login',
      homeRoute: '/dashboard',
      signupRoute: '/signup',
      forgotPasswordRoute: '/forgot-password'
    })
  ]
};

2. Import the theme in your styles.css:

@import 'selisk-starter-kit/lib/styles/theme.css';

/* Override theme variables if needed */
:root {
  --selisk-primary: #3b82f6; /* Custom primary color */
}

3. Set up your routes in app.routes.ts:

import { Routes } from '@angular/router';
import {
  LoginPage,
  SignUpPage,
  RequestPasswordResetPage,
  ResetPasswordPage,
  AuthGuard
} from 'selisk-starter-kit';

export const routes: Routes = [
  { path: 'login', component: LoginPage },
  { path: 'signup', component: SignUpPage },
  { path: 'forgot-password', component: RequestPasswordResetPage },
  { path: 'reset-password', component: ResetPasswordPage },
  {
    path: '',
    canActivate: [AuthGuard],
    children: [
      // Your protected routes here
    ]
  }
];

Configuration Options

Option Type Default Description
apiUrl string (required) Base URL for API requests
loginRoute string '/login' Route to redirect for login
homeRoute string '/' Route to redirect after login
signupRoute string '/signup' Route for sign up page
forgotPasswordRoute string '/forgot-password' Route for password reset request
tokenKeys.access string 'access_token' localStorage key for access token
tokenKeys.refresh string 'refresh_token' localStorage key for refresh token

Components

Atoms (Basic UI Components)

  • selisk-button - Configurable button with icon support
  • selisk-card - Card container
  • selisk-column - Flex column layout
  • selisk-row - Flex row layout
  • selisk-text-input - Text input with icon support
  • selisk-password-input - Password input with validation
  • selisk-date-input - Date picker input
  • selisk-select - Dropdown select
  • selisk-tabs - Tab navigation
  • selisk-toggle - Toggle switch
  • selisk-pagination - Pagination controls
  • selisk-progress-bar - Progress bar
  • selisk-skeleton - Loading skeleton
  • selisk-skeleton-tabs - Skeleton for tabs
  • selisk-error-text - Error message display
  • selisk-success-text - Success message display
  • selisk-hint-text - Hint text display

Molecules (Composite Components)

  • selisk-loading-screen - Full-screen loading overlay
  • selisk-file-upload - File upload with drag & drop
  • selisk-skeleton-profile - Profile loading skeleton

Pages

  • selisk-login-page - Complete login page
  • selisk-signup-page - Complete sign up page
  • selisk-request-password-reset-page - Password reset request page
  • selisk-reset-password-page - Password reset page

Services

AuthApiService

Handles authentication operations:

import { AuthApiService } from 'selisk-starter-kit';

@Component({...})
export class MyComponent {
  private authService = inject(AuthApiService);

  // Check if user is authenticated
  isLoggedIn = this.authService.hasToken();

  // Observable for auth state changes
  isAuthenticated$ = this.authService.isAuthenticated$;

  // Login
  login() {
    this.authService.login({ username: 'user', password: 'pass' }).subscribe();
  }

  // Logout
  logout() {
    this.authService.logout().subscribe();
  }
}

BaseApiService

Extend this service for your API services:

import { Injectable } from '@angular/core';
import { BaseApiService } from 'selisk-starter-kit';

@Injectable({ providedIn: 'root' })
export class UsersApiService extends BaseApiService {
  getUsers() {
    return this.get<User[]>('/users');
  }

  createUser(user: User) {
    return this.post<User>('/users', user);
  }
}

FileUploadService

Handle file uploads with progress:

import { FileUploadService } from 'selisk-starter-kit';

@Component({...})
export class UploadComponent {
  private uploadService = inject(FileUploadService);

  uploadFile(file: File) {
    this.uploadService.uploadFileWithProgress(file, '/files/upload')
      .subscribe(result => {
        if ('progress' in result) {
          console.log(`Upload progress: ${result.progress}%`);
        } else {
          console.log('Upload complete:', result);
        }
      });
  }
}

LoadingScreenService

Global loading state management:

import { LoadingScreenService } from 'selisk-starter-kit';

@Component({...})
export class MyComponent {
  private loadingService = inject(LoadingScreenService);

  loadData() {
    this.loadingService.wrap(
      this.api.getData()
    ).subscribe();
  }
}

Theming

Override CSS custom properties to customize the theme:

:root {
  /* Core colors */
  --selisk-darker: #0f0f0f;
  --selisk-dark: #1a1a1a;
  --selisk-mid: #333333;
  --selisk-border: #252525;
  --selisk-bright: #ececec;

  /* Primary accent color */
  --selisk-primary: #d05aff;

  /* Semantic colors */
  --selisk-red: #ff5a5a;
  --selisk-green: #5aff5a;
  --selisk-disabled: #666666;

  /* Skeleton loader */
  --selisk-skeleton-base: #252525;
  --selisk-skeleton-highlight: #3a3a3a;

  /* Typography */
  --selisk-font-family: 'Inter', sans-serif;
}

Building

ng build selisk-starter-kit

Publishing

cd dist/selisk-starter-kit
npm publish

License

MIT

Dependencies

Dependencies

ID Version
tslib ^2.3.0

Peer Dependencies

ID Version
@angular/common ^20.0.0 || ^21.0.0
@angular/core ^20.0.0 || ^21.0.0
@angular/forms ^20.0.0 || ^21.0.0
@angular/router ^20.0.0 || ^21.0.0
@fortawesome/angular-fontawesome ^1.0.0 || ^2.0.0
@fortawesome/fontawesome-svg-core ^6.0.0
@fortawesome/free-solid-svg-icons ^6.0.0
rxjs ^7.0.0

Keywords

angular starter-kit auth components ui-kit
Details
npm
2026-02-04 20:06:55 +01:00
10
Project Site
MIT
45 KiB
Assets (1)
selisk-starter-kit-0.0.2.tgz 45 KiB
Versions (3) View all
0.1.1 2026-02-05
0.0.2 2026-02-04
0.0.1 2026-02-04