feat: Add Angular Material-style barrel modules for better DX

.github/copilot-instructions.md

@@ -13,6 +13,21 @@ Always use **yarn** instead of npm for all package management operations:
 - Use `yarn build` instead of `npm run build`
 - Use `yarn test` instead of `npm test`
 
+## Library Package.json Peer Dependencies
+
+**CRITICAL**: When upgrading Angular versions, ALWAYS update the peer dependencies in `projects/ngx-mat-components/package.json` to match:
+
+```json
+"peerDependencies": {
+  "@angular/common": "^X.0.0",   // Must match Angular version
+  "@angular/core": "^X.0.0",      // Must match Angular version
+  "@angular/material": "^X.0.0",  // Must match Angular version
+  "date-fns": "^4.0.0"
+}
+```
+
+Example: For Angular 20, use `^20.0.0` for all Angular peer dependencies. This prevents peer dependency warnings when consuming the library.
+
 ## Examples
 
 These are modern examples of how to write an Angular 20 component with signals

projects/lib-workspace/src/app/app.ts

@@ -28,20 +28,11 @@ import {
   PaintBucketIcon,
 } from 'lucide-angular';
 import {
-  FsNavFrameComponent,
-  FsNavFrameSidebar,
-  FsNavFrameSidebarItemComponent,
-  FsNavUserProfileComponent,
-  FsNavUserProfileActionsDirective,
-  FsNavFrameToolbarComponent,
-  FsNavFrameToolbarStartDirective,
-  FsNavFrameToolbarCenterDirective,
-  FsNavFrameToolbarEndDirective,
-  FsNavFrameContentDirective,
+  FsNavFrameModule,
+  FsThemeMenuModule,
   NavFrameConfig,
   NavFrameSizing,
   NavRoutes,
-  FsThemeMenu,
 } from 'projects/ngx-mat-components/src/public-api';
 import { MockUserService } from './services/mockuser.service';
 
@@ -62,18 +53,9 @@ import { MockUserService } from './services/mockuser.service';
     MatCardModule,
     MatSlideToggleModule,
     MatDialogModule,
-    /* Lib components */
-    FsNavFrameComponent,
-    FsNavFrameSidebar,
-    FsNavFrameSidebarItemComponent,
-    FsNavUserProfileComponent,
-    FsNavUserProfileActionsDirective,
-    FsNavFrameToolbarComponent,
-    FsNavFrameToolbarStartDirective,
-    FsNavFrameToolbarCenterDirective,
-    FsNavFrameToolbarEndDirective,
-    FsNavFrameContentDirective,
-    FsThemeMenu,
+    /* Lib components - Barrel Modules */
+    ...FsNavFrameModule,
+    ...FsThemeMenuModule,
   ],
   templateUrl: './app.html',
   styleUrl: './app.scss',

projects/ngx-mat-components/package.json

@@ -22,9 +22,9 @@
   },
   "homepage": "https://github.com/fullstack-devops/ngx-mat-components",
   "peerDependencies": {
-    "@angular/common": "^19.0.0",
-    "@angular/core": "^19.0.0",
-    "@angular/material": "^19.0.0",
+    "@angular/common": "^20.0.0",
+    "@angular/core": "^20.0.0",
+    "@angular/material": "^20.0.0",
     "date-fns": "^4.0.0"
   },
   "dependencies": {

projects/ngx-mat-components/src/fs-calendar/fs-calendar.module.ts

@@ -0,0 +1,44 @@
+/**
+ * FsCalendarModule - Barrel Module for Calendar Components
+ *
+ * Import this single module to get all Calendar components and directives.
+ * Follows Angular Material's module pattern for better DX.
+ *
+ * @example
+ * ```typescript
+ * import { FsCalendarModule } from '@fullstack-devops/ngx-mat-components';
+ *
+ * @Component({
+ *   imports: [FsCalendarModule]
+ * })
+ * export class AppComponent {}
+ * ```
+ */
+
+import { FsCalendarPanelsComponent } from './calendar-panels/calendar-panels.component';
+import { FsCalendarTableComponent } from './calendar-table/fs-calendar-table.component';
+import { FsCalendarTableNameDirective } from './directives/fs-calendar-table-name.directive';
+
+/**
+ * All Calendar related components and directives
+ */
+export const FS_CALENDAR_COMPONENTS = [
+  FsCalendarPanelsComponent,
+  FsCalendarTableComponent,
+  FsCalendarTableNameDirective,
+] as const;
+
+/**
+ * Convenience array for importing all Calendar components
+ *
+ * Use this in your component's imports array:
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   imports: [FsCalendarModule]
+ * })
+ * export class AppComponent {}
+ * ```
+ */
+export const FsCalendarModule = FS_CALENDAR_COMPONENTS;

projects/ngx-mat-components/src/fs-calendar/public-api.ts

@@ -8,3 +8,6 @@ export * from './calendar.models';
 export { FsCalendarTableNameDirective } from './directives/fs-calendar-table-name.directive';
 // Removed: export { FsCalendarModule } - Using standalone components now
 export { FsCalendarService } from './services/fs-calendar.service';
+
+// Barrel Module - Import ALL components at once (like Angular Material)
+export { FsCalendarModule, FS_CALENDAR_COMPONENTS } from './fs-calendar.module';

projects/ngx-mat-components/src/fs-nav-frame/fs-nav-frame.module.ts

@@ -0,0 +1,62 @@
+/**
+ * FsNavFrameModule - Barrel Module for Nav Frame Components
+ *
+ * Import this single module to get all Nav Frame components and directives.
+ * Follows Angular Material's module pattern for better DX.
+ *
+ * @example
+ * ```typescript
+ * import { FsNavFrameModule } from '@fullstack-devops/ngx-mat-components';
+ *
+ * @Component({
+ *   imports: [FsNavFrameModule]
+ * })
+ * export class AppComponent {}
+ * ```
+ */
+
+import { FsNavFrameComponent } from './fs-nav-frame.component';
+import { FsNavFrameSidebar } from './components/fs-nav-frame-sidebar';
+import { FsNavFrameSidebarItemComponent } from './components/fs-nav-frame-sidebar-item/fs-nav-frame-sidebar-item.component';
+import { FsNavUserProfileComponent } from './fs-nav-user-profile/fs-nav-user-profile.component';
+import { FsNavUserProfileActionsDirective } from './fs-nav-user-profile/directives/fs-nav-user-profile-actions.directive';
+import { FsNavUserProfileNameDirective } from './fs-nav-user-profile/directives/fs-nav-user-profile-name.directive';
+import { FsNavUserProfileSubNameDirective } from './fs-nav-user-profile/directives/fs-nav-user-profile-subname.directive';
+import { FsNavFrameToolbarComponent } from './nav-frame-toolbar/fs-nav-frame-toolbar.component';
+import { FsNavFrameToolbarStartDirective } from './nav-frame-toolbar/directives/fs-nav-frame-toolbar-start.directive';
+import { FsNavFrameToolbarCenterDirective } from './nav-frame-toolbar/directives/fs-nav-frame-toolbar-center.directive';
+import { FsNavFrameToolbarEndDirective } from './nav-frame-toolbar/directives/fs-nav-frame-toolbar-end.directive';
+import { FsNavFrameContentDirective } from './directives/fs-nav-frame-content.directive';
+
+/**
+ * All Nav Frame related components and directives
+ */
+export const FS_NAV_FRAME_COMPONENTS = [
+  FsNavFrameComponent,
+  FsNavFrameSidebar,
+  FsNavFrameSidebarItemComponent,
+  FsNavUserProfileComponent,
+  FsNavUserProfileActionsDirective,
+  FsNavUserProfileNameDirective,
+  FsNavUserProfileSubNameDirective,
+  FsNavFrameToolbarComponent,
+  FsNavFrameToolbarStartDirective,
+  FsNavFrameToolbarCenterDirective,
+  FsNavFrameToolbarEndDirective,
+  FsNavFrameContentDirective,
+] as const;
+
+/**
+ * Convenience array for importing all Nav Frame components
+ *
+ * Use this in your component's imports array:
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   imports: [FsNavFrameModule]
+ * })
+ * export class AppComponent {}
+ * ```
+ */
+export const FsNavFrameModule = FS_NAV_FRAME_COMPONENTS;

projects/ngx-mat-components/src/fs-nav-frame/public-api.ts

@@ -17,3 +17,6 @@ export { FsNavFrameToolbarEndDirective } from './nav-frame-toolbar/directives/fs
 export { FsNavFrameToolbarStartDirective } from './nav-frame-toolbar/directives/fs-nav-frame-toolbar-start.directive';
 export { FsNavFrameToolbarComponent } from './nav-frame-toolbar/fs-nav-frame-toolbar.component';
 export { FsNavFrameService } from './services/fs-nav-frame.service';
+
+// Barrel Module - Import ALL components at once (like Angular Material)
+export { FsNavFrameModule, FS_NAV_FRAME_COMPONENTS } from './fs-nav-frame.module';

projects/ngx-mat-components/src/fs-theme-menu/fs-theme-menu.module.ts

@@ -0,0 +1,54 @@
+import { FsThemeMenu } from './fs-theme-menu';
+import { FsThemeIcon } from './fs-theme-icon/fs-theme-icon';
+import { FsCheckSvg } from './fs-check-svg';
+
+/**
+ * Array of all FsThemeMenu components and directives.
+ *
+ * Use this if you need to import components individually or create
+ * a custom subset of components.
+ */
+export const FS_THEME_MENU_COMPONENTS = [
+  FsThemeMenu,
+  FsThemeIcon,
+  FsCheckSvg,
+] as const;
+
+/**
+ * Barrel module for FsThemeMenu - Import all theme menu components at once.
+ *
+ * This follows the Angular Material pattern where a single import gives you
+ * all related components for a feature.
+ *
+ * @example
+ * ```typescript
+ * import { FsThemeMenuModule } from '@fsdevops/ngx-mat-components/fs-theme-menu';
+ *
+ * @Component({
+ *   imports: [FsThemeMenuModule],
+ *   template: `
+ *     <fs-theme-menu
+ *       [theme]="currentTheme()"
+ *       (themeChange)="onThemeChange($event)">
+ *     </fs-theme-menu>
+ *   `
+ * })
+ * export class MyComponent {
+ *   currentTheme = signal(FsThemeColorSchemes.Auto);
+ *   onThemeChange(theme: FsThemeColorSchemes) {
+ *     this.currentTheme.set(theme);
+ *   }
+ * }
+ * ```
+ *
+ * @remarks
+ * Instead of importing:
+ * - FsThemeMenu
+ * - FsThemeIcon
+ * - FsCheckSvg
+ *
+ * You can now import just `FsThemeMenuModule` to get all components.
+ *
+ * @public
+ */
+export const FsThemeMenuModule = FS_THEME_MENU_COMPONENTS;

projects/ngx-mat-components/src/fs-theme-menu/public-api.ts

@@ -3,3 +3,6 @@
  */
 export { FsThemeMenu } from './fs-theme-menu';
 export { FsThemeColorSchemes } from './fs-theme-menu';
+
+// Barrel Module - Import ALL components at once (like Angular Material)
+export { FsThemeMenuModule, FS_THEME_MENU_COMPONENTS } from './fs-theme-menu.module';