Skip to main content

UI Components

Shared and reusable UI components across the Gauzy frontend.

Component Libraries​

LibraryPackagePurpose
Nebular@nebular/themePrimary UI framework
Angular Material@angular/materialAdditional components
Smart Tableangular2-smart-tableData tables
FullCalendar@fullcalendar/angularCalendar views
CKEditor@ckeditor/ckeditor5-angularRich 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],
});