@nettyapps/ntybase 0.0.1

package/README.md

@@ -0,0 +1,166 @@
+# Netty Base Library
+
+Netty Base Library
+The @nettyapps/ntybase library provides foundational services and components for Angular applications, including theme management, authentication, alerts, menus, and AG-Grid integration.
+
+## Installation
+
+```bash
+npm install @nettyapps/ntybase
+```
+
+## Theme Management Systems
+
+The `@nettyapps/ntybase` library provides flexible theme management through two complementary systems:
+
+1. Color Palette - For primary/secondary color schemes
+2. App Theme - For light/dark mode system
+
+### Adding New Color Themes
+
+#### Generating Custom Color Palettes with Angular Material
+
+Angular Material provides a powerful schematic for automatically generating complete color palettes from base colors, eliminating the need to manually create theme files.
+
+#### 1. Install Required Packages
+
+First ensure you have `@angular/material` and `@angular/cdk` installed:
+
+```bash
+npm install @angular/material @angular/cdk
+```
+
+##### 2. Generate a Custom Palette
+
+Use the Angular CLI to generate a custom palette:
+
+```bash
+ng generate @angular/material:theme-color
+```
+
+#### 3. Output Structure
+
+The schematic will generate:
+
+```
+src/
+└── app/
+    └── themes/
+        ├── custom-themes.css   # Your custom palette definition
+        └── deep-bluetheme.css  # Generated palette variables
+```
+
+#### 4. Using the Generated Theme
+
+Import and use your theme:
+
+`custom-themes.css`:
+
+```scss
+@import "./deep-bluetheme.css";
+```
+
+`styles.scss`:
+
+```scss
+@use "@angular/material" as mat;
+@include mat.core();
+@import "./app/themes/custom-themes.css";
+```
+
+Here's an example of the generated theme CSS that will be available in `deep-blue-theme.css`
+
+```scss
+/* Note: Color palettes are generated from primary: #1976D2 */
+.deep-blue-theme {
+  /* COLOR SYSTEM VARIABLES */
+  color-scheme: dark;
+
+  /* Required field */
+  --mat-sys-required: light-dark(var(--mat-sys-secondary-container), var(--mat-sys-inverse-primary));
+  --mat-sys-user-info: light-dark(var(--mat-sys-secondary-container), var(--mat-sys-primary));
+  --mat-sys-user-text: light-dark(var(--mat-sys-on-primary-container), var(--mat-sys-on-primary));
+
+  /* Primary palette variables */
+  --mat-sys-primary: light-dark(#005faf, #a5c8ff);
+  --mat-sys-on-primary: light-dark(#ffffff, #00315f);
+  --mat-sys-primary-container: light-dark(#d4e3ff, #004786);
+  --mat-sys-on-primary-container: light-dark(#001c3a, #d4e3ff);
+  --mat-sys-inverse-primary: light-dark(#a5c8ff, #005faf);
+  --mat-sys-primary-fixed: light-dark(#d4e3ff, #d4e3ff);
+  --mat-sys-primary-fixed-dim: light-dark(#a5c8ff, #a5c8ff);
+  --mat-sys-on-primary-fixed: light-dark(#001c3a, #001c3a);
+  --mat-sys-on-primary-fixed-variant: light-dark(#004786, #004786);
+
+  /* Secondary palette variables */
+  --mat-sys-secondary: light-dark(#475f84, #afc8f1);
+  --mat-sys-on-secondary: light-dark(#ffffff, #163153);
+  --mat-sys-secondary-container: light-dark(#d4e3ff, #2f486a);
+  --mat-sys-on-secondary-container: light-dark(#001c3a, #d4e3ff);
+  --mat-sys-secondary-fixed: light-dark(#d4e3ff, #d4e3ff);
+  --mat-sys-secondary-fixed-dim: light-dark(#afc8f1, #afc8f1);
+  --mat-sys-on-secondary-fixed: light-dark(#001c3a, #001c3a);
+  --mat-sys-on-secondary-fixed-variant: light-dark(#2f486a, #2f486a);
+}
+```
+
+### Configuring ColorPalette Service
+
+#### Define Your Theme Colors
+
+After generating your palettes, integrate them with the ColorPalette service:
+
+```typescript
+import { ColorPalette } from '@nettyapps/ntybase';
+
+private colorPalette = inject(ColorPalette);
+
+constructor() {
+  this.loadCustomThemes();
+}
+
+private loadCustomThemes(): void {
+  const customThemes = [
+    {
+      id: 'deep-blue',
+      primary: '#1976D2',
+      displayName: 'Deep Blue',
+    },
+    {
+      id: 'green',
+      primary: '#00796B',
+      displayName: 'Green'
+    },
+    {
+      id: 'orange',
+      primary: '#E65100',
+      displayName: 'Orange'
+    },
+    {
+      id: 'purple',
+      primary: '#6200EE',
+      displayName: 'Purple'
+    },
+    {
+      id: 'red',
+      primary: '#C2185B',
+      displayName: 'Red'
+    },
+    {
+      id: 'blue-orange',
+      primary: '#0D5EA6',
+      displayName: 'Blue/Orange'
+    },
+    {
+      id: 'gray',
+      primary: '#555',
+      displayName: 'Gray'
+    },
+  ];
+
+  this.colorPalette.setThemes(customThemes);
+
+  // Set default theme
+  this.colorPalette.setTheme('green');
+}
+```