From a80241185a678cd7ab5e622147040a6cd4b4213f Mon Sep 17 00:00:00 2001 From: Eike Haller <58111764+eksrha@users.noreply.github.com> Date: Mon, 20 Oct 2025 23:07:26 +0200 Subject: [PATCH] feat: add barrel modules for better DX --- .github/copilot-instructions.md | 15 +++++ projects/lib-workspace/src/app/app.ts | 28 ++------- projects/ngx-mat-components/package.json | 6 +- .../src/fs-calendar/fs-calendar.module.ts | 44 +++++++++++++ .../src/fs-calendar/public-api.ts | 3 + .../src/fs-nav-frame/fs-nav-frame.module.ts | 62 +++++++++++++++++++ .../src/fs-nav-frame/public-api.ts | 3 + .../src/fs-theme-menu/fs-theme-menu.module.ts | 54 ++++++++++++++++ .../src/fs-theme-menu/public-api.ts | 3 + 9 files changed, 192 insertions(+), 26 deletions(-) create mode 100644 projects/ngx-mat-components/src/fs-calendar/fs-calendar.module.ts create mode 100644 projects/ngx-mat-components/src/fs-nav-frame/fs-nav-frame.module.ts create mode 100644 projects/ngx-mat-components/src/fs-theme-menu/fs-theme-menu.module.ts diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md index d5f6663..367b940 100644 --- a/.github/copilot-instructions.md +++ b/.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 diff --git a/projects/lib-workspace/src/app/app.ts b/projects/lib-workspace/src/app/app.ts index df7a0fc..f7f5f60 100644 --- a/projects/lib-workspace/src/app/app.ts +++ b/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', diff --git a/projects/ngx-mat-components/package.json b/projects/ngx-mat-components/package.json index 355e594..9b658ad 100644 --- a/projects/ngx-mat-components/package.json +++ b/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": { diff --git a/projects/ngx-mat-components/src/fs-calendar/fs-calendar.module.ts b/projects/ngx-mat-components/src/fs-calendar/fs-calendar.module.ts new file mode 100644 index 0000000..b16befd --- /dev/null +++ b/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; diff --git a/projects/ngx-mat-components/src/fs-calendar/public-api.ts b/projects/ngx-mat-components/src/fs-calendar/public-api.ts index 5ce44da..ebc8f18 100644 --- a/projects/ngx-mat-components/src/fs-calendar/public-api.ts +++ b/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'; diff --git a/projects/ngx-mat-components/src/fs-nav-frame/fs-nav-frame.module.ts b/projects/ngx-mat-components/src/fs-nav-frame/fs-nav-frame.module.ts new file mode 100644 index 0000000..3ae50dd --- /dev/null +++ b/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; diff --git a/projects/ngx-mat-components/src/fs-nav-frame/public-api.ts b/projects/ngx-mat-components/src/fs-nav-frame/public-api.ts index c9b0416..f60c491 100644 --- a/projects/ngx-mat-components/src/fs-nav-frame/public-api.ts +++ b/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'; diff --git a/projects/ngx-mat-components/src/fs-theme-menu/fs-theme-menu.module.ts b/projects/ngx-mat-components/src/fs-theme-menu/fs-theme-menu.module.ts new file mode 100644 index 0000000..f4d6849 --- /dev/null +++ b/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: ` + * + * + * ` + * }) + * 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; diff --git a/projects/ngx-mat-components/src/fs-theme-menu/public-api.ts b/projects/ngx-mat-components/src/fs-theme-menu/public-api.ts index a80930c..8c61b70 100644 --- a/projects/ngx-mat-components/src/fs-theme-menu/public-api.ts +++ b/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';