@corp-products/ui-components 0.0.1

package/README.md

@@ -0,0 +1,3 @@
+# ui-components
+
+This library was generated with [Nx](https://nx.dev).

package/eslint.config.js

@@ -0,0 +1,34 @@
+const nx = require('@nx/eslint-plugin');
+const baseConfig = require('../../eslint.config.js');
+
+module.exports = [
+  ...baseConfig,
+  ...nx.configs['flat/angular'],
+  ...nx.configs['flat/angular-template'],
+  {
+    files: ['**/*.ts'],
+    rules: {
+      '@angular-eslint/directive-selector': [
+        'error',
+        {
+          type: 'attribute',
+          prefix: 'app',
+          style: 'camelCase',
+        },
+      ],
+      '@angular-eslint/component-selector': [
+        'error',
+        {
+          type: 'element',
+          prefix: 'app',
+          style: 'kebab-case',
+        },
+      ],
+    },
+  },
+  {
+    files: ['**/*.html'],
+    // Override or add rules here
+    rules: {},
+  },
+];

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/libs/ui-components",
+  "lib": {
+    "entryFile": "src/index.ts"
+  }
+}

package/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@corp-products/ui-components",
+  "version": "0.0.1",
+  "author": "shireen Omar",
+  "description": "shared UI components across our apps",
+  "peerDependencies": {
+    "@angular/common": "^18.2.0",
+    "@angular/core": "^18.2.0"
+  },
+  "keywords": [
+    "angular",
+    "library"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "sideEffects": false
+}

package/project.json

@@ -0,0 +1,29 @@
+{
+  "name": "ui-components",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/ui-components/src",
+  "prefix": "",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "build": {
+      "executor": "@nx/angular:package",
+      "outputs": ["{workspaceRoot}/dist/{projectRoot}"],
+      "options": {
+        "project": "libs/ui-components/ng-package.json"
+      },
+      "configurations": {
+        "production": {
+          "tsConfig": "libs/ui-components/tsconfig.lib.prod.json"
+        },
+        "development": {
+          "tsConfig": "libs/ui-components/tsconfig.lib.json"
+        }
+      },
+      "defaultConfiguration": "production"
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint"
+    }
+  }
+}

package/src/index.ts

@@ -0,0 +1,13 @@
+export * from './lib/app-button';
+export * from './lib/app-tabs';
+export * from './lib/app-dropdown-menu';
+export * from './lib/side-bar/side-bar.component';
+export * from './lib/ico-moon-icon/ico-moon-icon.component';
+export * from './lib/user-info/user-info.component';
+export * from './lib/confirmation-dialog/confirmation-dialog.component';
+export * from './lib/read-more/read-more.component';
+export * from './lib/app-accordion/app-accordion.component';
+export * from './lib/dynamic-form/dynamic-form.interface';
+export * from './lib/dynamic-form/dynamic-form.component';
+export * from './lib/form-components';
+export * from './lib/user-autocomplete-card/user-autocomplete-card.component';

package/src/lib/app-accordion/app-accordion.component.html

@@ -0,0 +1,15 @@
+<p-accordion value="0">
+  <p-accordion-panel value="0" [class.!border-0]="!accordionPanelBorder">
+    <p-accordion-header>
+            <span class="flex items-center gap-2 w-full">
+                <app-ico-moon-card [iconClass]="'text-[24px] text-secondary'" [iconName]="'font-icon-'+iconName" />
+                <span class="font-bold whitespace-nowrap">{{title}}</span>
+            </span>
+    </p-accordion-header>
+    <p-accordion-content>
+      <div [ngClass]="{'border-t-2 border-gray-light pt-2': contentBorderTop, }">
+        <ng-content></ng-content>
+      </div>
+    </p-accordion-content>
+  </p-accordion-panel>
+</p-accordion>

package/src/lib/app-accordion/app-accordion.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { AppAccordionComponent } from "./app-accordion.component";
+
+describe("HeaderCardComponent", () => {
+  let component: AppAccordionComponent;
+  let fixture: ComponentFixture<AppAccordionComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AppAccordionComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(AppAccordionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/app-accordion/app-accordion.component.ts

@@ -0,0 +1,21 @@
+import { Component, Input } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { IcoMoonIconComponent } from '../ico-moon-icon/ico-moon-icon.component';
+import { AccordionModule } from 'primeng/accordion';
+import { DividerModule } from 'primeng/divider';
+
+@Component({
+  selector: "app-accordion",
+  standalone: true,
+  imports: [CommonModule, DividerModule, AccordionModule, IcoMoonIconComponent],
+  templateUrl: "./app-accordion.component.html",
+  styleUrl: "./app-accordion.component.scss"
+})
+export class AppAccordionComponent {
+  @Input() iconName!: string;
+  @Input() iconClass!: string;
+  @Input() iconPathCount = 0;
+  @Input({required: true}) title!: string;
+  @Input() contentBorderTop: boolean = true;
+  @Input() accordionPanelBorder: boolean = true;
+}

package/src/lib/app-accordion/index.ts

@@ -0,0 +1,2 @@
+// export * from './app-button';
+export * from './app-accordion.component';

package/src/lib/app-button/app-button.component.html

@@ -0,0 +1,13 @@
+<p-button
+  (click)="clickEmitter.emit()"
+  [class]="class"
+  [disabled]="disabled"
+  [iconPos]="iconPos"
+  [icon]="icon"
+  [label]="title"
+  [rounded]="rounded"
+  [severity]="style"
+  [styleClass]="'w-full'"
+  [text]="text"
+  [variant]="variant">
+</p-button>

package/src/lib/app-button/app-button.component.ts

@@ -0,0 +1,28 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { ButtonModule } from 'primeng/button';
+import { AppButtonIconPos, AppButtonSeverity, AppButtonSize, AppButtonVariant } from './app-button';
+
+@Component({
+  imports: [RouterModule, ButtonModule, CommonModule],
+  selector: 'app-button',
+  standalone: true,
+  encapsulation: ViewEncapsulation.None,
+  styleUrl: './app-button.component.scss',
+  templateUrl: './app-button.component.html',
+})
+export class AppButtonComponent {
+  @Input() title: string;
+  @Input() class: string;
+  @Input() icon: string;
+  @Input() size: AppButtonSize;
+  @Input() style: AppButtonSeverity;
+  @Input() iconPos: AppButtonIconPos;
+  @Input() variant: AppButtonVariant;
+  @Input() disabled = false;
+  @Input() text = false;
+  @Input() rounded = false;
+
+  @Output() clickEmitter = new EventEmitter<void>();
+}

package/src/lib/app-button/app-button.ts

@@ -0,0 +1,15 @@
+export type AppButtonSeverity =
+  | 'success'
+  | 'info'
+  | 'warn'
+  | 'danger'
+  | 'help'
+  | 'primary'
+  | 'secondary'
+  | 'contrast';
+
+export type AppButtonSize = 'large' | 'small';
+
+export type AppButtonIconPos = 'left' | 'right' | 'top' | 'bottom';
+
+export type AppButtonVariant = 'outlined' | 'text' | undefined;

package/src/lib/app-button/index.ts

@@ -0,0 +1,2 @@
+export * from './app-button';
+export * from './app-button.component';

package/src/lib/app-dropdown-menu/app-dropdown-menu.component.html

@@ -0,0 +1,25 @@
+@if (showMenu) {
+  <app-button (click)="op.toggle($event)" [class]="buttonClass"
+              [iconPos]="buttonIconPosition"
+              [icon]="buttonIcon" [title]="buttonTitle"
+              [style]="buttonStyle"/>
+}
+<p-popover #op [styleClass]="popupMenuStyle === 'white' ? 'white-menu' : 'purple-menu'">
+  <div class="flex flex-col gap-4 text-sm md:text-xs">
+    <ul>
+      @for (item of menuItems; track $index) {
+        @if (item.show) {
+          <li
+            [ngClass]="{'flex-row-reverse': item.iconPosition === 'right'}"
+            [class]="'flex justify-between min-w-[130px] gap-3 items-center cursor-pointer text-sm ' + (item.textColor | popupTextColorClass)"
+            (click)="onMenuItemClick(item)">
+            {{ item.title | translate }}
+            @if (item.icon) {
+              <i [class]="item.icon"></i>
+            }
+          </li>
+        }
+      }
+    </ul>
+  </div>
+</p-popover>

package/src/lib/app-dropdown-menu/app-dropdown-menu.component.scss

@@ -0,0 +1,39 @@
+.p-popover.p-component {
+  box-shadow: none;
+  &:is(.purple-menu) {
+    @apply bg-primary text-white text-sm mt-2;
+    li:not(:last-child) {
+      @apply border-b-2 border-purple-700;
+    }
+  }
+  &:is(.white-menu) {
+    li:not(:last-child) {
+      @apply border-b;
+    }
+  }
+  border-radius: 3px;
+  margin-top: 13px;
+  &::before, &::after {
+    display: none;
+  }
+  .p-popover-content {
+    width: auto;
+    min-width: unset;
+
+    ul {
+      li {
+        @apply py-3;
+        &:hover {
+          opacity: 0.7;
+        }
+      }
+      li:first-child {
+        @apply pt-0
+      }
+      li:last-child {
+        @apply pb-0
+      }
+    }
+
+  }
+}

package/src/lib/app-dropdown-menu/app-dropdown-menu.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AppDropdownMenuComponent } from './app-dropdown-menu.component';
+
+describe('AppDropdownMenuComponent', () => {
+  let component: AppDropdownMenuComponent;
+  let fixture: ComponentFixture<AppDropdownMenuComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AppDropdownMenuComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(AppDropdownMenuComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/app-dropdown-menu/app-dropdown-menu.component.ts

@@ -0,0 +1,43 @@
+import {Component, inject, Input, OnInit, ViewEncapsulation} from '@angular/core';
+import { AppButtonComponent } from '../app-button';
+import { Popover } from 'primeng/popover';
+import { DropdownMenuItem } from './app-dropdown-menu';
+import {Router} from '@angular/router';
+import {AppButtonIconPos, AppButtonSeverity} from '../app-button';
+import { TranslateModule } from '@ngx-translate/core';
+import {NgClass} from "@angular/common";
+import {MenuPopupTextColorPipe} from "./menu-popup.pipe";
+
+@Component({
+  selector: "app-dropdown-menu",
+  standalone: true,
+  imports: [AppButtonComponent, Popover, TranslateModule, NgClass, MenuPopupTextColorPipe],
+  templateUrl: "./app-dropdown-menu.component.html",
+  styleUrl: "./app-dropdown-menu.component.scss",
+  encapsulation: ViewEncapsulation.None
+})
+export class AppDropdownMenuComponent implements OnInit {
+  @Input({ required: true }) buttonTitle: string;
+  @Input({ required: true }) menuItems: DropdownMenuItem[] = [];
+  @Input() popupMenuStyle: "white" | "purple" = "purple";
+  @Input() buttonIcon = "font-icon-plus";
+  @Input() buttonClass: string;
+  @Input() buttonStyle: AppButtonSeverity;
+  @Input() buttonIconPosition: AppButtonIconPos = "left";
+  router = inject(Router);
+
+  showMenu: boolean;
+
+  ngOnInit() {
+    this.showMenu = this.menuItems.some((item) => {
+      return item.show;
+    });
+  }
+  onMenuItemClick(item: DropdownMenuItem): void {
+    if (item.callback) {
+      item.callback();
+    } else if (item.routerLink) {
+      this.router.navigate(Array.isArray(item.routerLink) ? item.routerLink : [item.routerLink], { queryParams: item.queryParams || {} });
+    }
+  }
+}

package/src/lib/app-dropdown-menu/app-dropdown-menu.ts

@@ -0,0 +1,17 @@
+import {Params} from "@angular/router";
+import {AppButtonIconPos} from "../app-button";
+
+export interface DropdownMenuItem {
+  title: string;
+  routerLink?: string;
+  queryParams?: Params;
+  callback?: () => void;
+  icon?: string;
+  show?: boolean;
+  // TODO: add type
+  permissionKey?: string;
+  permissionAction?: string;
+  iconPosition?: AppButtonIconPos;
+  textColor?: DropdownTextColor;
+}
+export type DropdownTextColor = 'white' | 'purple' | 'green';

package/src/lib/app-dropdown-menu/index.ts

@@ -0,0 +1,2 @@
+export * from './app-dropdown-menu';
+export * from './app-dropdown-menu.component';

package/src/lib/app-dropdown-menu/menu-popup.pipe.ts

@@ -0,0 +1,18 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import {DropdownTextColor} from "./app-dropdown-menu";
+
+@Pipe({
+  name: 'popupTextColorClass',
+  standalone: true,
+  pure: true
+})
+export class MenuPopupTextColorPipe implements PipeTransform {
+  transform(color?: DropdownTextColor): string {
+    switch (color) {
+      case 'white': return 'text-white';
+      case 'purple': return 'text-purple-500';
+      case 'green': return 'text-green-500';
+      default: return 'text-white';
+    }
+  }
+}

package/src/lib/app-tabs/app-tab.interface.ts

@@ -0,0 +1,26 @@
+import { TemplateRef } from "@angular/core";
+
+interface Tab {
+  title: string;
+  iconName?: string;
+  iconPathCount?: number;
+  disabled?: boolean;
+  count?: number;
+  permissionKey?: string;
+}
+
+export interface RoutedTab extends Tab {
+  link: string;
+}
+export interface TemplateTab extends Tab {
+  contentTemplate: TemplateRef<unknown>;
+}
+
+
+export type AppTabs = ({
+  isRouted: true;
+  items: RoutedTab[];
+} | {
+  isRouted: false;
+  items: TemplateTab[];
+})

package/src/lib/app-tabs/app-tabs.component.html

@@ -0,0 +1,35 @@
+@if (tabs && tabs.items.length) {
+  <div [class]="tabsStyle + (responsive ? ' full-width' : '') + ' tabs-container'">
+    <p-tabs [value]="activeTabIndex" scrollable>
+      <p-tablist>
+
+        @for (tab of tabs.items; let i = $index; track i) {
+          <p-tab [value]="i" [routerLink]="tabs.isRouted ? $any(tab).link : null" [disabled]="tab.disabled"
+                 (click)="onTabChange(i)">
+            @if (tab.iconName) {
+              <app-ico-moon-card [iconClass]="'text-[17px]'" [iconName]="tab.iconName"
+                                 [iconPathCount]="tab.iconPathCount || 0"/>
+            }
+            <span>{{ tab.title | translate }} @if (tab.count) {
+              <span>({{ tab.count }})</span>
+            } </span>
+          </p-tab>
+        }
+
+      </p-tablist>
+
+      <p-tabpanels>
+        @if (tabs.isRouted) {
+          <router-outlet></router-outlet>
+        } @else {
+          @for (tab of tabs.items; let i = $index; track i) {
+            <p-tabpanel [value]="i">
+              <ng-container [ngTemplateOutlet]="tab.contentTemplate"></ng-container>
+            </p-tabpanel>
+          }
+        }
+
+      </p-tabpanels>
+    </p-tabs>
+  </div>
+}

package/src/lib/app-tabs/app-tabs.component.scss

@@ -0,0 +1,103 @@
+.tabs-container {
+  &.full-width {
+    .p-tabs .p-tablist-tab-list .p-tab {
+      @apply flex-grow flex justify-center max-w-[50%];
+    }
+  }
+
+  .p-tabs {
+    .p-tablist-tab-list {
+      @apply relative;
+
+      &:after {
+        @apply content-[''] w-full h-[3px] bg-purple-800/5 absolute bottom-0 right-0 z-[1];
+      }
+
+      .p-tab {
+        @apply text-sm text-gray-400 font-normal text-[16px] border-b-[4px] border-transparent z-[2];
+
+        &:not(.p-tab-active) {
+          app-ico-moon-card {
+            @apply grayscale;
+          }
+
+        }
+      }
+    }
+
+    .p-tablist-active-bar {
+      @apply hidden;
+    }
+
+    .p-tabpanels.p-component {
+      @apply mt-5 rounded-lg;
+    }
+  }
+
+  &.basic {
+    .p-tabs {
+      .p-tablist-tab-list {
+        @apply bg-transparent;
+
+        .p-tab {
+          &.p-tab-active {
+            @apply text-primary border-primary;
+          }
+        }
+      }
+    }
+  }
+
+  &.primary_light {
+    .p-tabs {
+      .p-tablist-tab-list {
+        .p-tab {
+          @apply rounded-t-lg text-[14px];
+
+          &.p-tab-active {
+            @apply bg-purple-800/5 font-semibold text-primary border-primary;
+          }
+        }
+      }
+    }
+  }
+
+  &.primary {
+    .p-tabs {
+      .p-tablist-tab-list {
+        &:after {
+          @apply bg-purple-800/5;
+        }
+
+        .p-tab {
+          @apply rounded-t-lg text-[14px];
+
+          &.p-tab-active {
+            @apply bg-primary font-semibold text-white border-secondary;
+          }
+        }
+      }
+    }
+  }
+}
+
+[dir='rtl'] {
+  .p-tabs .p-tablist{
+    .p-iconwrapper {
+      @apply rotate-180deg;
+    }
+
+    .p-tablist-next-button {
+      @apply right-auto left-0;
+    }
+
+    .p-tablist-prev-button {
+      @apply right-0 left-auto;
+    }
+  }
+}
+
+// TODO : CHECK
+// .p-tabpanels.p-component {
+//   @apply mt-5 rounded-[1.5rem];
+// }

package/src/lib/app-tabs/app-tabs.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AppTabsComponent } from './app-tabs.component';
+
+describe('AppTabsComponent', () => {
+  let component: AppTabsComponent;
+  let fixture: ComponentFixture<AppTabsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AppTabsComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(AppTabsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/app-tabs/app-tabs.component.ts

@@ -0,0 +1,48 @@
+import { CommonModule } from "@angular/common";
+import { Component, Input, OnInit, ViewEncapsulation } from "@angular/core";
+import { TabsModule } from "primeng/tabs";
+import { AppTabs } from "./app-tab.interface";
+import { IcoMoonIconComponent } from "../ico-moon-icon/ico-moon-icon.component";
+import { TranslateModule } from "@ngx-translate/core";
+import { ActivatedRoute, NavigationEnd, Router, RouterLink, RouterOutlet } from "@angular/router";
+import { filter } from "rxjs";
+
+@Component({
+  selector: "app-tabs",
+  standalone: true,
+  encapsulation: ViewEncapsulation.None,
+  imports: [CommonModule, TabsModule, RouterLink, RouterOutlet, IcoMoonIconComponent, TranslateModule],
+  templateUrl: "./app-tabs.component.html",
+  styleUrl: "./app-tabs.component.scss"
+})
+export class AppTabsComponent implements OnInit {
+  @Input() tabs: AppTabs;
+  @Input() tabsStyle: "basic" | "primary_light" | "primary" = "basic";
+  @Input() responsive = false;
+  activeTabIndex = 0;
+  constructor(private route: ActivatedRoute, private router: Router) {}
+
+  ngOnInit(): void {
+    this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe(() => {
+      this.updateActiveTab();
+    });
+    // to be refactor
+    this.updateActiveTab();
+  }
+
+  // Updates the active tab index based on the current route
+  private updateActiveTab(): void {
+    if (!this.tabs.isRouted) return;
+    const currentUrl = this.router.url;
+    const matchingTabIndex = this.tabs.items.findIndex((tab) => currentUrl.includes(tab.link));
+    this.activeTabIndex = matchingTabIndex !== -1 ? matchingTabIndex : 0;
+  }
+
+  onTabChange(index: number): void {
+    if (!this.tabs.isRouted) return;
+    const selectedTab = this.tabs.items[index];
+    if (selectedTab && !selectedTab.disabled) {
+      this.router.navigate([selectedTab.link], { relativeTo: this.route });
+    }
+  }
+}

package/src/lib/app-tabs/index.ts

@@ -0,0 +1,2 @@
+export * from './app-tab.interface';
+export * from './app-tabs.component';