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

[eksrha]

Summary

Introduces barrel modules (readonly component arrays) following Angular Material's proven pattern to drastically improve developer experience. Instead of importing 10+ individual components, developers can now use single barrel module imports.

Motivation

Problem: Using ngx-mat-components required importing many individual components/directives:

// Tedious! 😫
import { 
  FsNavFrameComponent,
  FsNavFrameSidebar,
  FsNavFrameSidebarItemComponent,
  FsNavUserProfileComponent,
  FsNavUserProfileActionsDirective,
  FsNavFrameToolbarComponent,
  FsNavFrameToolbarStartDirective,
  FsNavFrameToolbarCenterDirective,
  FsNavFrameToolbarEndDirective,
  FsNavFrameContentDirective,
  // ... and more
} from '@fullstack-devops/ngx-mat-components';

Solution: Angular Material-style barrel modules for clean imports:

// Clean! 🎉
import { 
  FsNavFrameModule,
  FsCalendarModule,
  FsThemeMenuModule,
} from '@fullstack-devops/ngx-mat-components';

@Component({
  imports: [
    ...FsNavFrameModule,  // All 12 components at once
    ...FsCalendarModule,
    ...FsThemeMenuModule,
  ]
})

Changes Made

New Barrel Modules

1. FsNavFrameModule (fs-nav-frame/fs-nav-frame.module.ts)

   • Exports: 12 components/directives
   • Components: FsNavFrameComponent, FsNavFrameSidebar, FsNavFrameSidebarItemComponent, FsNavUserProfileComponent, FsNavFrameToolbarComponent
   • Directives: 4 toolbar directives (Start, Center, End, Content), 3 user profile directives (Name, Avatar, Actions)

2. FsCalendarModule (fs-calendar/fs-calendar.module.ts)

   • Exports: 3 components/directives
   • Components: FsCalendarPanelsComponent, FsCalendarTableComponent, FsCalendarTableNameDirective

3. FsThemeMenuModule (fs-theme-menu/fs-theme-menu.module.ts)

   • Exports: 3 components
   • Components: FsThemeMenu, FsThemeIcon, FsCheckSvg

Implementation Pattern

// Type-safe readonly array pattern
export const FS_NAV_FRAME_COMPONENTS = [
  Component1,
  Component2,
  // ...
] as const;

export const FsNavFrameModule = FS_NAV_FRAME_COMPONENTS;

Updated Public APIs

• fs-nav-frame/public-api.ts - Exports FsNavFrameModule and FS_NAV_FRAME_COMPONENTS
• fs-calendar/public-api.ts - Exports FsCalendarModule and FS_CALENDAR_COMPONENTS
• fs-theme-menu/public-api.ts - Exports FsThemeMenuModule and FS_THEME_MENU_COMPONENTS

Testing

• ✅ Updated lib-workspace/src/app/app.ts to use barrel modules
• ✅ Reduced imports from 13 individual components to 2 barrel modules
• ✅ All components render correctly
• ✅ TypeScript compilation successful
• ✅ No runtime errors

Benefits

1. Better Developer Experience

   • 1 import line instead of 10+
   • Cleaner, more readable code
   • Follows Angular Material conventions

2. Type Safety

   • as const ensures readonly arrays
   • Full TypeScript inference
   • No type casting needed

3. Tree-Shakable

   • Barrel modules are just arrays
   • Bundlers still eliminate unused components
   • No bundle size penalty

4. Backward Compatible

   • Individual component imports still work
   • No breaking changes
   • Opt-in improvement

5. Consistent with Ecosystem

   • Matches Angular Material pattern
   • Familiar to Angular developers
   • Easy to understand and adopt

Migration Guide

No action required! This is a non-breaking feature addition.

To adopt barrel modules (recommended):

// Before
import { 
  FsNavFrameComponent,
  FsNavFrameSidebar,
  FsNavFrameSidebarItemComponent,
  // ... 10+ more imports
} from '@fullstack-devops/ngx-mat-components';

@Component({
  imports: [
    FsNavFrameComponent,
    FsNavFrameSidebar,
    FsNavFrameSidebarItemComponent,
    // ... 10+ more components
  ]
})

// After
import { 
  FsNavFrameModule,
  FsCalendarModule,
} from '@fullstack-devops/ngx-mat-components';

@Component({
  imports: [
    ...FsNavFrameModule,  // Spread operator!
    ...FsCalendarModule,
  ]
})

Documentation

• Updated CHANGELOG-local.md with complete feature documentation
• Added JSDoc comments to all barrel module files
• Included usage examples in each module file

Checklist

• All barrel modules created and exported
• Public APIs updated
• lib-workspace tested with new imports
• TypeScript compilation successful
• CHANGELOG updated
• JSDoc documentation added
• Backward compatibility verified
• No breaking changes

Related Issues

Resolves internal DX improvement initiative.

---

🏷️ Version Bump

From: 20.0.0 (Angular 20 migration)
To: 20.1.0 (Minor feature release)

Semver Reasoning:

• ✅ Minor version (new feature)
• ✅ No breaking changes
• ✅ Backward compatible
• ✅ Opt-in improvement

[github-actions]

Possible awesome-ci commands for this Pull Request

command	description
aci_patch_level: major	create a major version bump
aci_version_override: 2.1.0	set the version to 2.1.0 using only semver compatible syntax!

Need more help?

Have a look at my repo

This message was created by awesome-ci and can be disabled by the env variable ACI_SILENT=true

[Copilot]

Pull Request Overview

This PR introduces Angular Material-style barrel modules to simplify component imports. Instead of importing 10+ individual components, developers can now import a single barrel module (e.g., FsNavFrameModule) and spread it into the imports array. The implementation uses readonly component arrays following Angular Material's proven pattern while maintaining full backward compatibility.

Key Changes

• Created three barrel modules: FsNavFrameModule (12 components/directives), FsCalendarModule (3 components/directives), and FsThemeMenuModule (3 components)
• Updated peer dependencies in library package.json from Angular 19 to Angular 20
• Demonstrated usage in lib-workspace by reducing imports from 13 individual components to 2 barrel modules

Reviewed Changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
projects/ngx-mat-components/src/fs-theme-menu/public-api.ts	Exports new FsThemeMenuModule barrel module
projects/ngx-mat-components/src/fs-theme-menu/fs-theme-menu.module.ts	Creates barrel module with 3 theme menu components
projects/ngx-mat-components/src/fs-nav-frame/public-api.ts	Exports new FsNavFrameModule barrel module
projects/ngx-mat-components/src/fs-nav-frame/fs-nav-frame.module.ts	Creates barrel module with 12 nav frame components/directives
projects/ngx-mat-components/src/fs-calendar/public-api.ts	Exports new FsCalendarModule barrel module
projects/ngx-mat-components/src/fs-calendar/fs-calendar.module.ts	Creates barrel module with 3 calendar components
projects/ngx-mat-components/package.json	Updates peer dependencies from Angular 19 to 20
projects/lib-workspace/src/app/app.ts	Demonstrates barrel module usage with spread operator
.github/copilot-instructions.md	Adds documentation for managing peer dependencies during Angular upgrades

Comments suppressed due to low confidence (5)

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

• The example shows direct import of FsThemeMenuModule, but the actual usage pattern requires spreading the array with ...FsThemeMenuModule. This inconsistency between documentation and implementation could confuse developers. Update the example to show imports: [...FsThemeMenuModule] to match the actual usage pattern demonstrated in app.ts.

import { FsThemeMenu } from './fs-theme-menu';

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

• The example shows direct import of FsNavFrameModule, but the actual usage requires spreading the array with ...FsNavFrameModule. This inconsistency between documentation and implementation could confuse developers. Update the example to show imports: [...FsNavFrameModule] to match the actual usage pattern demonstrated in app.ts.

/**

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

• The example shows direct import of FsCalendarModule, but the actual usage requires spreading the array with ...FsCalendarModule. This inconsistency between documentation and implementation could confuse developers. Update the example to show imports: [...FsCalendarModule] to match the actual usage pattern demonstrated in app.ts.

/**

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

• The example shows direct import of FsNavFrameModule, but the actual usage requires spreading the array with ...FsNavFrameModule. This inconsistency between documentation and implementation could confuse developers. Update the example to show imports: [...FsNavFrameModule] to match the actual usage pattern demonstrated in app.ts.

/**

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

• The example shows direct import of FsCalendarModule, but the actual usage requires spreading the array with ...FsCalendarModule. This inconsistency between documentation and implementation could confuse developers. Update the example to show imports: [...FsCalendarModule] to match the actual usage pattern demonstrated in app.ts.

/**