Skip to content

Commit b70ab1e

Browse files
eksrhaeksrha
authored
feat: Add Angular Material-style barrel modules for better DX (#148)
1 parent 44aafef commit b70ab1e

9 files changed

Lines changed: 192 additions & 26 deletions

File tree

‎.github/copilot-instructions.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,21 @@ Always use **yarn** instead of npm for all package management operations:
1313
- Use `yarn build` instead of `npm run build`
1414
- Use `yarn test` instead of `npm test`
1515

16+
## Library Package.json Peer Dependencies
17+
18+
**CRITICAL**: When upgrading Angular versions, ALWAYS update the peer dependencies in `projects/ngx-mat-components/package.json` to match:
19+
20+
```json
21+
"peerDependencies": {
22+
"@angular/common": "^X.0.0", // Must match Angular version
23+
"@angular/core": "^X.0.0", // Must match Angular version
24+
"@angular/material": "^X.0.0", // Must match Angular version
25+
"date-fns": "^4.0.0"
26+
}
27+
```
28+
29+
Example: For Angular 20, use `^20.0.0` for all Angular peer dependencies. This prevents peer dependency warnings when consuming the library.
30+
1631
## Examples
1732

1833
These are modern examples of how to write an Angular 20 component with signals

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

Lines changed: 5 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -28,20 +28,11 @@ import {
2828
PaintBucketIcon,
2929
} from 'lucide-angular';
3030
import {
31-
FsNavFrameComponent,
32-
FsNavFrameSidebar,
33-
FsNavFrameSidebarItemComponent,
34-
FsNavUserProfileComponent,
35-
FsNavUserProfileActionsDirective,
36-
FsNavFrameToolbarComponent,
37-
FsNavFrameToolbarStartDirective,
38-
FsNavFrameToolbarCenterDirective,
39-
FsNavFrameToolbarEndDirective,
40-
FsNavFrameContentDirective,
31+
FsNavFrameModule,
32+
FsThemeMenuModule,
4133
NavFrameConfig,
4234
NavFrameSizing,
4335
NavRoutes,
44-
FsThemeMenu,
4536
} from 'projects/ngx-mat-components/src/public-api';
4637
import { MockUserService } from './services/mockuser.service';
4738

@@ -62,18 +53,9 @@ import { MockUserService } from './services/mockuser.service';
6253
MatCardModule,
6354
MatSlideToggleModule,
6455
MatDialogModule,
65-
/* Lib components */
66-
FsNavFrameComponent,
67-
FsNavFrameSidebar,
68-
FsNavFrameSidebarItemComponent,
69-
FsNavUserProfileComponent,
70-
FsNavUserProfileActionsDirective,
71-
FsNavFrameToolbarComponent,
72-
FsNavFrameToolbarStartDirective,
73-
FsNavFrameToolbarCenterDirective,
74-
FsNavFrameToolbarEndDirective,
75-
FsNavFrameContentDirective,
76-
FsThemeMenu,
56+
/* Lib components - Barrel Modules */
57+
...FsNavFrameModule,
58+
...FsThemeMenuModule,
7759
],
7860
templateUrl: './app.html',
7961
styleUrl: './app.scss',

‎projects/ngx-mat-components/package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,9 @@
2222
},
2323
"homepage": "https://github.com/fullstack-devops/ngx-mat-components",
2424
"peerDependencies": {
25-
"@angular/common": "^19.0.0",
26-
"@angular/core": "^19.0.0",
27-
"@angular/material": "^19.0.0",
25+
"@angular/common": "^20.0.0",
26+
"@angular/core": "^20.0.0",
27+
"@angular/material": "^20.0.0",
2828
"date-fns": "^4.0.0"
2929
},
3030
"dependencies": {

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

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
/**
2+
* FsCalendarModule - Barrel Module for Calendar Components
3+
*
4+
* Import this single module to get all Calendar components and directives.
5+
* Follows Angular Material's module pattern for better DX.
6+
*
7+
* @example
8+
* ```typescript
9+
* import { FsCalendarModule } from '@fullstack-devops/ngx-mat-components';
10+
*
11+
* @Component({
12+
* imports: [FsCalendarModule]
13+
* })
14+
* export class AppComponent {}
15+
* ```
16+
*/
17+
18+
import { FsCalendarPanelsComponent } from './calendar-panels/calendar-panels.component';
19+
import { FsCalendarTableComponent } from './calendar-table/fs-calendar-table.component';
20+
import { FsCalendarTableNameDirective } from './directives/fs-calendar-table-name.directive';
21+
22+
/**
23+
* All Calendar related components and directives
24+
*/
25+
export const FS_CALENDAR_COMPONENTS = [
26+
FsCalendarPanelsComponent,
27+
FsCalendarTableComponent,
28+
FsCalendarTableNameDirective,
29+
] as const;
30+
31+
/**
32+
* Convenience array for importing all Calendar components
33+
*
34+
* Use this in your component's imports array:
35+
*
36+
* @example
37+
* ```typescript
38+
* @Component({
39+
* imports: [FsCalendarModule]
40+
* })
41+
* export class AppComponent {}
42+
* ```
43+
*/
44+
export const FsCalendarModule = FS_CALENDAR_COMPONENTS;

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,3 +8,6 @@ export * from './calendar.models';
88
export { FsCalendarTableNameDirective } from './directives/fs-calendar-table-name.directive';
99
// Removed: export { FsCalendarModule } - Using standalone components now
1010
export { FsCalendarService } from './services/fs-calendar.service';
11+
12+
// Barrel Module - Import ALL components at once (like Angular Material)
13+
export { FsCalendarModule, FS_CALENDAR_COMPONENTS } from './fs-calendar.module';

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

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
/**
2+
* FsNavFrameModule - Barrel Module for Nav Frame Components
3+
*
4+
* Import this single module to get all Nav Frame components and directives.
5+
* Follows Angular Material's module pattern for better DX.
6+
*
7+
* @example
8+
* ```typescript
9+
* import { FsNavFrameModule } from '@fullstack-devops/ngx-mat-components';
10+
*
11+
* @Component({
12+
* imports: [FsNavFrameModule]
13+
* })
14+
* export class AppComponent {}
15+
* ```
16+
*/
17+
18+
import { FsNavFrameComponent } from './fs-nav-frame.component';
19+
import { FsNavFrameSidebar } from './components/fs-nav-frame-sidebar';
20+
import { FsNavFrameSidebarItemComponent } from './components/fs-nav-frame-sidebar-item/fs-nav-frame-sidebar-item.component';
21+
import { FsNavUserProfileComponent } from './fs-nav-user-profile/fs-nav-user-profile.component';
22+
import { FsNavUserProfileActionsDirective } from './fs-nav-user-profile/directives/fs-nav-user-profile-actions.directive';
23+
import { FsNavUserProfileNameDirective } from './fs-nav-user-profile/directives/fs-nav-user-profile-name.directive';
24+
import { FsNavUserProfileSubNameDirective } from './fs-nav-user-profile/directives/fs-nav-user-profile-subname.directive';
25+
import { FsNavFrameToolbarComponent } from './nav-frame-toolbar/fs-nav-frame-toolbar.component';
26+
import { FsNavFrameToolbarStartDirective } from './nav-frame-toolbar/directives/fs-nav-frame-toolbar-start.directive';
27+
import { FsNavFrameToolbarCenterDirective } from './nav-frame-toolbar/directives/fs-nav-frame-toolbar-center.directive';
28+
import { FsNavFrameToolbarEndDirective } from './nav-frame-toolbar/directives/fs-nav-frame-toolbar-end.directive';
29+
import { FsNavFrameContentDirective } from './directives/fs-nav-frame-content.directive';
30+
31+
/**
32+
* All Nav Frame related components and directives
33+
*/
34+
export const FS_NAV_FRAME_COMPONENTS = [
35+
FsNavFrameComponent,
36+
FsNavFrameSidebar,
37+
FsNavFrameSidebarItemComponent,
38+
FsNavUserProfileComponent,
39+
FsNavUserProfileActionsDirective,
40+
FsNavUserProfileNameDirective,
41+
FsNavUserProfileSubNameDirective,
42+
FsNavFrameToolbarComponent,
43+
FsNavFrameToolbarStartDirective,
44+
FsNavFrameToolbarCenterDirective,
45+
FsNavFrameToolbarEndDirective,
46+
FsNavFrameContentDirective,
47+
] as const;
48+
49+
/**
50+
* Convenience array for importing all Nav Frame components
51+
*
52+
* Use this in your component's imports array:
53+
*
54+
* @example
55+
* ```typescript
56+
* @Component({
57+
* imports: [FsNavFrameModule]
58+
* })
59+
* export class AppComponent {}
60+
* ```
61+
*/
62+
export const FsNavFrameModule = FS_NAV_FRAME_COMPONENTS;

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,3 +17,6 @@ export { FsNavFrameToolbarEndDirective } from './nav-frame-toolbar/directives/fs
1717
export { FsNavFrameToolbarStartDirective } from './nav-frame-toolbar/directives/fs-nav-frame-toolbar-start.directive';
1818
export { FsNavFrameToolbarComponent } from './nav-frame-toolbar/fs-nav-frame-toolbar.component';
1919
export { FsNavFrameService } from './services/fs-nav-frame.service';
20+
21+
// Barrel Module - Import ALL components at once (like Angular Material)
22+
export { FsNavFrameModule, FS_NAV_FRAME_COMPONENTS } from './fs-nav-frame.module';

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

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import { FsThemeMenu } from './fs-theme-menu';
2+
import { FsThemeIcon } from './fs-theme-icon/fs-theme-icon';
3+
import { FsCheckSvg } from './fs-check-svg';
4+
5+
/**
6+
* Array of all FsThemeMenu components and directives.
7+
*
8+
* Use this if you need to import components individually or create
9+
* a custom subset of components.
10+
*/
11+
export const FS_THEME_MENU_COMPONENTS = [
12+
FsThemeMenu,
13+
FsThemeIcon,
14+
FsCheckSvg,
15+
] as const;
16+
17+
/**
18+
* Barrel module for FsThemeMenu - Import all theme menu components at once.
19+
*
20+
* This follows the Angular Material pattern where a single import gives you
21+
* all related components for a feature.
22+
*
23+
* @example
24+
* ```typescript
25+
* import { FsThemeMenuModule } from '@fsdevops/ngx-mat-components/fs-theme-menu';
26+
*
27+
* @Component({
28+
* imports: [FsThemeMenuModule],
29+
* template: `
30+
* <fs-theme-menu
31+
* [theme]="currentTheme()"
32+
* (themeChange)="onThemeChange($event)">
33+
* </fs-theme-menu>
34+
* `
35+
* })
36+
* export class MyComponent {
37+
* currentTheme = signal(FsThemeColorSchemes.Auto);
38+
* onThemeChange(theme: FsThemeColorSchemes) {
39+
* this.currentTheme.set(theme);
40+
* }
41+
* }
42+
* ```
43+
*
44+
* @remarks
45+
* Instead of importing:
46+
* - FsThemeMenu
47+
* - FsThemeIcon
48+
* - FsCheckSvg
49+
*
50+
* You can now import just `FsThemeMenuModule` to get all components.
51+
*
52+
* @public
53+
*/
54+
export const FsThemeMenuModule = FS_THEME_MENU_COMPONENTS;

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,6 @@
33
*/
44
export { FsThemeMenu } from './fs-theme-menu';
55
export { FsThemeColorSchemes } from './fs-theme-menu';
6+
7+
// Barrel Module - Import ALL components at once (like Angular Material)
8+
export { FsThemeMenuModule, FS_THEME_MENU_COMPONENTS } from './fs-theme-menu.module';

0 commit comments

Comments
 (0)