BvsLib — BVSTech Design System Library

bvs-lib is the generic design system library of BVSTech, built with Angular standalone components and a dynamic, theme-responsive SASS tokens design system.

🚀 Design Principles

1. Strict Genericity: Components inside bvs-lib are domain-agnostic. No business logic (e.g. keycloak auth, user profile services, occurrence calculations) is allowed here. Business contexts are handled by local wrapper components in applications.
2. Open Composition & Transclusion: Molecules and organisms are designed to support open composition using <ng-content> slots (transclusion).
3. Responsive Themes & Mode Adaptability: All components automatically adapt their colors, borders, and shadows to the light/dark mode and active brand configuration (default, emerald, sunset, amethyst, ruby).

📦 Components Library

🔹 Atoms

AvatarComponent (<bvs-avatar>)

• Purpose: Displays user initials in a styled circle.
• Selector: bvs-avatar
• Inputs:
  • fullName: string (required): Full name used to extract initials (e.g., 'John Doe' -> 'JD').
• Styling: Gradient background derived from active brand colors.

BadgeComponent ([bvs-badge])

• Purpose: Displays a status label with semantic coloring and size.
• Selector: [bvs-badge] (attribute)
• Inputs:
  • color: 'info' | 'success' | 'warning' | 'danger' | 'neutral'
  • size: 'sm' | 'md' | 'lg'

ButtonComponent ([bvs-button])

• Purpose: Generic interactive button.
• Selector: [bvs-button] (attribute)
• Inputs:
  • variant: 'primary' | 'secondary' | 'danger' | 'ghost'
  • size: 'sm' | 'md' | 'lg'
  • block: boolean: Whether the button takes full width.

CardComponent ([bvs-card])

• Purpose: Premium glassmorphism container for dashboard widgets/content.
• Selector: [bvs-card] (attribute)
• Styling: Adaptable glassmorphism backdrop filter and border thickness.

ErrorMessageComponent ([bvs-error-message])

• Purpose: Displays a styled, animated validation error message.
• Selector: [bvs-error-message] (attribute)
• Styling: Slide-in animation, adapts background and text color to theme.

InputComponent (input[bvs-input], textarea[bvs-input])

• Purpose: Reusable input and textarea fields.
• Selector: input[bvs-input], textarea[bvs-input] (attribute)
• Inputs:
  • variant: 'primary' | 'secondary' | 'danger'
  • size: 'sm' | 'md' | 'lg'
  • block: boolean

🔸 Molecules

FormFieldComponent (<bvs-form-field>)

• Purpose: Combines label, input, and errors, featuring a premium floating label animation.
• Selector: bvs-form-field
• Inputs:
  • label: string (required)
  • forId: string (optional)
• Usage:

  <bvs-form-field label="E-mail" forId="email-input">
    <input bvs-input id="email-input" placeholder=" " />
  </bvs-form-field>

🌐 Organisms

NavbarComponent (<bvs-navbar>)

• Purpose: Header container exposing brand and action slots.
• Selector: bvs-navbar
• Slots:
  • [navbar-brand]: Main title/logo
  • [navbar-actions]: User menus, buttons, action items
• Usage:

  <bvs-navbar>
    <div navbar-brand>⬡ BVSTech</div>
    <div navbar-actions>
      <button bvs-button variant="secondary">Login</button>
    </div>
  </bvs-navbar>

🛠️ CLI Commands

Build

To build the library, run the following in frontend/bvs-material:

npm run build

Unit Tests

To run unit tests via Vitest:

npm run test

Storybook Showcase

To start the Storybook sandbox to preview all configurations and brand presets:

npm run storybook