UI Components
Shared and reusable UI components across the Gauzy frontend.
Component Librariesโ
| Library | Package | Purpose |
|---|---|---|
| Nebular | @nebular/theme | Primary UI framework |
| Angular Material | @angular/material | Additional components |
| Smart Table | angular2-smart-table | Data tables |
| FullCalendar | @fullcalendar/angular | Calendar views |
| CKEditor | @ckeditor/ckeditor5-angular | Rich text editor |
Custom Componentsโ
Smart Tableโ
Used extensively for data grids:
settings = {
columns: {
name: { title: "Name", type: "string" },
email: { title: "Email", type: "string" },
role: { title: "Role", type: "string" },
},
actions: { add: false, edit: true, delete: true },
pager: { perPage: 10 },
};
Date/Time Pickersโ
- Nebular datepicker for date selection
- Custom time range pickers
- Calendar integration for scheduling
Tag Selectorsโ
Multi-select tag components for:
- Employee skills
- Task labels
- Project tags
Avatar & Statusโ
Employee avatar components with online/offline status indicators.
Design Patternsโ
Container/Presentationalโ
Container Component (Smart)
โโโ Fetches data from store/service
โโโ Handles user interactions
โโโ Passes data to presentational components
Presentational Component (Dumb)
โโโ Receives data via @Input()
โโโ Emits events via @Output()
โโโ Purely visual, no service dependencies
Form Componentsโ
Reactive forms with validation:
this.form = this.fb.group({
name: ["", [Validators.required, Validators.minLength(3)]],
email: ["", [Validators.required, Validators.email]],
role: ["", Validators.required],
});