TimsIonicLibrary

TimsIonicLibrary is an early-stage development project aimed at creating a reusable component library for Ionic applications, with backend support powered by Supabase. This library enables easy integration of frequently used Ionic components into new projects, making it simple to deploy with backend configurations managed by Supabase.

Project Status

⚠️ Early Development Notice: TimsIonicLibrary is currently in the early stages of development. While some features are functional, others are still under construction, and breaking changes may occur. You are welcome to use it to explore or integrate components, but production use is not recommended at this time.

Key Features

• Reusable Components: A set of standalone, reusable components built for Ionic.
• Supabase Integration: Seamless integration with Supabase for backend functionalities.
• Easy to Use: Designed for flexibility, allowing integration into various Ionic projects.

Installation

To use this library in your Ionic project, install it with

npm i tims-ionic-library@latest

You need to add this const in your environment.ts & environement.prod.ts

export const tim_environment = {
  global_config : {
    // Name of the app
    app_name: 'my-app',
    // Logo of the app
    app_logo: 'assets/icon/favicon.png',
    // Version of the app (while changed a pop up will be shown)
    app_version: '1.0.0',
    // Default Font Family of the app
    app_font_family: 'Roboto',
    // Default Theme of the app ( Default, Light , Dark , Red, Purple, Pink, Lemon, Ocean)
    app_theme: 'Default',
    // Modules activated in the app
    modules_activated: ['display', 'articles', 'users' , 'settings', 'mc servers', 'Sponsor', 'logs'],
  },
  auth_config : {
    // Auth Settings
    oauth_providers: ['discord', 'google', 'account'],
    login_redirect_url: '/home',
    logout_redirect_url: '/auth/login',
    // Styles
    // ** button **
    button_fill: 'solid',
    button_shape: '',
    button_color: 'primary',
    // ** input **
    input_fill: 'outline',
    input_color: 'primary',
    input_label_placement: 'stacked',

  },
  supabase_config : {
    // Supabase Settings
    // URL of the supabase instance
    supabase_url: '<SupaBase URL>',
    // Public Key of the supabase instance ( service key )
    supabase_key: '<SupaBase Key>',
  },
  admin_dashboard_config : {
    // Admin Dashboard Settings
    // Data displayed in the admin display
    data_module_activated: ['user_count', 'player_count']
  }
}

You also need to import the main module in your main.ts file and link your environment variables with a providers

import { bootstrapApplication } from '@angular/platform-browser';
import { RouteReuseStrategy, provideRouter, withPreloading, PreloadAllModules } from '@angular/router';
import { IonicRouteStrategy, provideIonicAngular } from '@ionic/angular/standalone';

import { routes } from './app/app.routes';
import { AppComponent } from './app/app.component';
import {importProvidersFrom} from "@angular/core";
import {TimIonicLibraryModule} from "tims-ionic-library";
import { TIM_ENVIRONMENT } from 'tims-ionic-library';
import {environment} from "./environments/environment.prod";


bootstrapApplication(AppComponent, {
  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    {provide: TIM_ENVIRONMENT, useValue: tim_environment},
    provideIonicAngular(),
    importProvidersFrom(TimIonicLibraryModule),
    provideRouter(routes, withPreloading(PreloadAllModules)),
  ],
});

You will be able to use the actual working components of the library

• Auth components
• login/logout button
• Admin User List

License

MIT License

Thank you for exploring TimsIonicLibrary! Feel free to reach out with questions or suggestions as we continue development towards a reliable library for the Ionic and Supabase ecosystem.