Skip to content

v2.11.0 - Compound Component API for ProfileHeaderGlass

Choose a tag to compare

View all tags
@artyhoo artyhoo released this 25 Dec 04:43
v2.11.0
fad1b8e

What's Changed

New Feature: Compound Component API (Issue #31)

ProfileHeaderGlass now supports a compound component pattern for maximum flexibility:

<ProfileHeaderGlass.Root layout="horizontal">
  <ProfileHeaderGlass.Profile user={user} showStatus status="online" />
  <ProfileHeaderGlass.AI
    onGenerate={handleGenerate}
    features={['Code review', 'Security audit', 'Performance tips']}
    estimatedTime="~1 minute"
    className="p-6"
  />
</ProfileHeaderGlass.Root>

Sub-Components

  • ProfileHeaderGlass.Root - Container with layout context (horizontal | stacked)
  • ProfileHeaderGlass.Profile - User information (wraps ProfileHeaderExtendedGlass)
  • ProfileHeaderGlass.AI - AI card with full props access (features, estimatedTime, className)

Benefits

  • ✅ Custom AICardGlass props (features, estimatedTime, className)
  • ✅ Replace AICardGlass entirely with custom component
  • ✅ Layout variants: 'horizontal' (50/50 split) | 'stacked' (vertical)
  • ✅ Context-based layout propagation to sub-components
  • ✅ Error handling for components used outside Root

Backward Compatible

Legacy props-based API is fully preserved:

<ProfileHeaderGlass
  name="John Doe"
  username="johndoe"
  onAIGenerate={() => console.log('Generate')}
/>

Testing & Documentation

  • 20 new unit tests (47 total for ProfileHeaderGlass)
  • 3 new Storybook stories demonstrating compound usage
  • JSDoc with TypeScript examples
  • Re-exported types for consumers

Full Changelog: v2.10.0...v2.11.0

Assets 2
Loading