@sarasanalytics-com/design-system 0.0.3

package/src/app/app.component.ts

@@ -0,0 +1,505 @@
+import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+import { ButtonComponent } from '../../projects/component-library/src/lib/button/button.component';
+import { KitchenSinkComponent } from './kitchen-sink/kitchen-sink.component';
+import { ChipsComponent } from '../../projects/component-library/src/lib/chips/chips.component';
+import { AvatarComponent } from '../../projects/component-library/src/lib/avatar/avatar.component';
+import { GridCellComponent } from '../../projects/component-library/src/lib/grid-cell/grid-cell.component';
+import { ColDef, GridReadyEvent } from 'ag-grid-community';
+import { AgGridAngular } from 'ag-grid-angular';
+import { FormlyFieldConfig } from '@ngx-formly/core';
+import rawData from './data';
+import { GridInterface } from '../../projects/component-library/src/interfaces/grid-interface';
+import { FormsModule } from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
+import { FormlyModule } from '@ngx-formly/core';
+import { CommonModule } from '@angular/common';
+import { NgSelectModule } from '@ng-select/ng-select';
+import { ToolTipComponent } from '../../projects/component-library/src/lib/tool-tip/tool-tip.component';
+import { ToastComponent } from '../../projects/component-library/src/lib/toast/toast.component';
+import { HeaderComponent } from '../../projects/component-library/src/lib/header/header.component';
+import { TabsComponent } from '../../projects/component-library/src/lib/tabs/tabs.component';
+import { TabInterface } from '../../projects/component-library/src/interfaces/tab-interface';
+import { DatepickerComponent } from '../../projects/component-library/src/lib/datepicker/datepicker.component';
+import { Renderer2 } from '@angular/core';
+import { SelectInterface } from '../../projects/component-library/src/interfaces/select-interface';
+import { FormControl, FormGroup } from '@angular/forms';
+import { StepperComponent } from '../../projects/component-library/src/public-api';
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [
+    CommonModule,
+    RouterOutlet,
+
+    ButtonComponent,
+
+    KitchenSinkComponent,
+
+    ChipsComponent,
+
+    AvatarComponent,
+
+    GridCellComponent,
+    AgGridAngular,
+    //imports for grid
+
+    ReactiveFormsModule,
+    FormlyModule,
+    ReactiveFormsModule,
+    NgSelectModule,
+    FormsModule,
+    //imports for sa-select and sa-stepper
+    ToolTipComponent,
+    ToastComponent,
+    HeaderComponent,
+    TabsComponent,
+    DatepickerComponent,
+    StepperComponent
+  ],
+  templateUrl: './app.component.html',
+  styleUrl: './app.component.css'
+})
+export class AppComponent {
+  global_theme: string = 'saras-theme';
+
+  constructor(private renderer: Renderer2) {
+    this.renderer.addClass(document.body, this.global_theme);
+  }
+
+  testComp = ButtonComponent;
+  testInputs = [
+    ["primary", "outline", "transparent"],     // type
+    ["default", "error", "disabled"],          // state
+    ["small", "medium", "large"],              // size
+    ["Button"],                                // text
+    ["../assets/Sources.svg"],                 // ImagePath
+    ["both"],                                  // iconPosition 
+    ["https://sarasanalytics.com"],            // href
+    ["self"],                                  // hrefTarget 
+  ]
+  testParams = [
+    "type",
+    "state",
+    "size",
+    "text",
+    "ImagePath",
+    "iconPosition",
+    "href",
+    "hrefTarget",
+  ]
+
+  testCompChip = ChipsComponent;
+  testInputsChip = [
+    ["regular", "small", "large"],                                            // type
+    ["primary", "secondary", "neutral", "success", "error", "warning"],       // state
+    ["filled", "outline"],                                                    // filling
+    ["Chip text"],                                                            // text
+    ["../assets/Frame.svg"],                                                  // iconPath
+    ["both"],                                                                 // iconPosition
+    ["../assets/dot.svg"],                                                    // largeStateIcon
+    ["Good"],                                                                 // largeStateText
+  ];
+  testParamsChip = [
+    "type",
+    "state",
+    "filling",
+    "text",
+    "iconPath",
+    "iconPosition",
+    "largeStateIcon",
+    "largeStateText",
+  ]
+
+  testCompAvatar = AvatarComponent;
+  testInputsAvatar = [
+    ["../assets/avatar.svg", ""],
+    ["extra-small", "small", "medium", "large", "extra-large"],
+    ["AB"]
+  ];
+  testParamsAvatar = ["imagePath", "size", "altText"];
+
+  params: GridInterface = {
+    cellType: '',
+    viewText: false,
+    viewLeadingIcon: false,
+    viewTrailingIcon: false,
+    viewButton: false,
+    viewChip: false,
+    viewAvatar: false,
+  }
+
+  handleChipClick(evt: any) {
+    let prevData = this.rowData[evt.rowId]["Chip"].chipConfig;
+    if (prevData == undefined) return;
+    for (let i = 0; i < prevData.length; i++) {
+      if (prevData[i].id == evt.id) {
+        this.rowData[evt.rowId]["Chip"].chipConfig?.splice(i, 1);
+        break;
+      }
+    }
+  }
+
+  // for every in cell in a row, returning a grid-interface object to specify how it should be rendered.
+  rowData = rawData.map((current): { [key: string]: GridInterface } => {
+    return {
+      "Text": {
+        ...this.params,
+        viewText: true,
+        cellType: 'row',
+        text: current.rowNo,
+      },
+      "Numeric": {
+        ...this.params,
+        viewText: true,
+        cellType: 'numeric',
+        text: Math.floor(((current.rowNo * 23) / 77) * 75),
+      },
+      "Leading Icon": {
+        ...this.params,
+        viewText: true,
+        cellType: 'interactive',
+        text: current.name,
+        iconPath: '../assets/Scan.svg',
+        viewLeadingIcon: true,
+        interactiveLinkTarget: 'blank',
+        linkClicked: (evt: Event) => {
+          console.log(evt);
+        }
+      },
+      "Chip": {
+        ...this.params,
+        cellType: 'row',
+        viewChip: true,
+        chipConfig: [
+          {
+            id: 0,
+            text: current.chip,
+            type: 'primary',
+            state: 'regular',
+            filling: 'filled',
+            iconPath: '../assets/Frame.svg',
+            iconPosition: 'left',
+            largeStateIcon: '',
+            largeStateText: '',
+          },
+          {
+            id: 1,
+            text: current.chip2,
+            type: 'secondary',
+            state: 'regular',
+            filling: 'filled',
+            iconPath: '../assets/Frame.svg',
+            iconPosition: 'left',
+            largeStateIcon: '',
+            largeStateText: '',
+          },
+          {
+            id: 2,
+            text: current.chip3,
+            type: 'error',
+            state: 'regular',
+            filling: 'filled',
+            iconPath: '../assets/Frame.svg',
+            iconPosition: 'left',
+            largeStateIcon: '',
+            largeStateText: '',
+          },
+        ],
+        chipClicked: (evt: Event) => {
+          console.log(evt);
+          this.handleChipClick(evt);
+        }
+      },
+      "Button": {
+        ...this.params,
+        cellType: "row",
+        viewButton: true,
+        buttonConfig: {
+          id: 0,
+          type: 'outline',
+          state: current.buttonState,
+          size: 'small',
+          text: 'Button',
+          href: current.link,
+          imagePath: '../assets/Sources.svg',
+          iconPosition: 'both',
+          hrefTarget: 'blank',
+        },
+        buttonClicked: (evt: Event) => {
+          console.log(evt);
+        }
+      },
+      "Avatar": {
+        ...this.params,
+        viewText: true,
+        cellType: "row",
+        avatarConfig: {
+          id: 0,
+          size: 'small',
+          imagePath: current.personPhoto,
+          altText: 'AB'
+        },
+        viewAvatar: true,
+        text: current.personName,
+        subText: current.personDesignation,
+        avatarClicked: (evt: Event) => {
+          console.log(evt);
+        }
+      },
+      "Subtext": {
+        ...this.params,
+        viewText: true,
+        cellType: "row",
+        text: "Text",
+        subText: "Subtext"
+      },
+      "All": {
+        cellType: 'row',
+        viewText: true,
+        viewLeadingIcon: true,
+        viewTrailingIcon: true,
+        viewButton: true,
+        viewChip: true,
+        viewAvatar: true,
+        iconPath: '../assets/Scan.svg',
+        chipConfig: [
+          {
+            id: 2,
+            text: current.chip3,
+            type: 'error',
+            state: 'regular',
+            filling: 'filled',
+            iconPath: '../assets/Sources.svg',
+            iconPosition: 'left',
+            largeStateIcon: '',
+            largeStateText: '',
+          }
+        ],
+        buttonConfig: {
+          id: 0,
+          type: 'outline',
+          state: current.buttonState,
+          size: 'small',
+          text: 'Button',
+          href: current.link,
+          imagePath: '../assets/Sources.svg',
+          iconPosition: 'both',
+          hrefTarget: 'blank',
+        },
+        avatarConfig: {
+          id: 0,
+          size: 'small',
+          imagePath: '../assets/avatar.svg',
+          altText: 'AB'
+        },
+        text: "Text",
+        subText: "subText",
+      }
+    }
+  }
+  );
+  colDefs: ColDef[] = [
+    {
+      field: "Text",
+      comparator: (_valueA, _valueB, nodeA, nodeB) => {
+        return Number(nodeA.data.Text.text) - Number(nodeB.data.Text.text)
+      },
+      resizable: false,
+      cellRenderer: GridCellComponent,
+    },
+    {
+      field: "Numeric",
+      comparator: (_valueA, _valueB, nodeA, nodeB) => {
+        return Number(nodeA.data.Numeric.text) - Number(nodeB.data.Numeric.text)
+      },
+      resizable: false,
+      filter: 'agNumberColumnFilter',
+      valueFormatter: p => p.data.Numeric.text,
+      cellRenderer: GridCellComponent,
+    },
+    {
+      field: "Leading Icon",
+      headerCheckboxSelection: true,
+      resizable: false,
+      cellRenderer: GridCellComponent,
+    },
+    {
+      field: "Chip",
+      resizable: false,
+      cellRenderer: GridCellComponent,
+    },
+    {
+      field: "Button",
+      resizable: false,
+      cellRenderer: GridCellComponent,
+    },
+    {
+      field: "Avatar",
+      resizable: false,
+      cellRenderer: GridCellComponent,
+    },
+    {
+      field: "Subtext",
+      resizable: false,
+      cellRenderer: GridCellComponent,
+    },
+    {
+      field: "All",
+      resizable: false,
+      cellRenderer: GridCellComponent,
+    }
+  ]
+  onGridReady(evt: GridReadyEvent) {
+    evt.api.autoSizeAllColumns();
+  }
+
+  model: any = {
+    "Test-select": [{
+      "id": 0,
+      "name": "One"
+    }],
+    "Test-stepper": {
+      "id": 2,
+    }
+  };
+
+  selectProps: SelectInterface = {
+    options: [
+      { id: 0, name: 'Zero' },
+      { id: 1, name: 'One' },
+      { id: 2, name: 'Two' },
+      { id: 3, name: 'Three' },
+    ],
+    disabled: false,
+    change: () => {
+      console.log(this.model);
+    },
+    params: {
+      label: 'Label',
+      supportText: "Supporting text",
+      dropIcon: '../assets/Chevron.svg',
+      dropIconPosition: 'both',
+      multiple: true,
+      iconPath: "../assets/Frame.svg",
+      type: "regular",
+      state: "primary",
+      filling: "filled",
+      iconPosition: "left",
+    }
+  };
+
+  fields: FormlyFieldConfig[] = [
+    {
+      key: 'Test-select',
+      type: 'sa-select',
+      props: this.selectProps
+    },
+    {
+      key: 'Test-stepper',
+      type: 'sa-stepper',
+      props: {
+        disabled: false,
+        options: [
+          { id: 0, name: 'Zero' },
+          { id: 1, name: 'One' },
+          { id: 2, name: 'Two' },
+          { id: 3, name: 'Three' },
+        ],
+        params: {
+          editable: true,
+          doneIcon: "../assets/tick-icon.svg"
+        }
+      }
+    }
+  ];
+
+  submit(model: any) {
+    console.log(model);
+  }
+
+  stepLabels = [
+    { id: 0, name: 'Zero' },
+    { id: 1, name: 'One' },
+    { id: 2, name: 'Two' },
+    { id: 3, name: 'Three' },
+  ];
+  editable = true;
+  doneIcon = "../assets/tick-icon.svg";
+  stepped(evt: any) {
+    console.log(evt);
+  }
+
+  skip = () => { console.log("skipped") };
+  seen = () => { console.log("seen") };
+
+  messages: string[] = [
+    "This first line can act as the subheading of this onboarding tooltip",
+    "This second line can act as the subheading of this onboarding tooltip",
+    "This third line can act as the subheading of this onboarding tooltip",
+    "This fourth line can act as the subheading of this onboarding tooltip",
+  ]
+
+  heading: string = "Heading";
+  subHeading: string = "Subheading text"
+  percent = 30
+  statusIcon = "../assets/warningmark.svg"
+  clicked(num: number) { num ? this.percent += 5 : this.percent -= 5 }
+
+  info = [
+    ["Info Text 1", "../assets/Person.svg"],
+    ["Info Text 2", "../assets/Location.svg"],
+    ["Info Text 3", "../assets/Mail.svg"]
+  ]
+  chipConfig = [
+    ["Chip 1", "success"],
+    ["Chip 2", "warning"],
+    ["Chip 3", "error"],
+  ]
+  mainButton = "+ Button"
+  helperButton = "Helper"
+  header = "Header"
+
+  tabs: TabInterface[] = [
+    {
+      tabName: "Tab 1",
+      tabIcon: "../assets/Sources.svg",
+      iconPosition: "left",
+      badgeContent: "3 new",
+    },
+    {
+      tabName: "Tab 2",
+      tabIcon: "../assets/Grid.svg",
+      iconPosition: "right",
+      badgeContent: "9 new",
+    },
+    {
+      tabName: "Tab 3",
+      tabIcon: "../assets/warningmark.svg",
+      iconPosition: "left",
+      badgeContent: "17 new",
+    },
+    {
+      tabName: "Tab 4",
+      tabIcon: "../assets/Person.svg",
+      iconPosition: "right",
+    },
+    {
+      tabName: "Tab 5",
+      tabIcon: "../assets/Mail.svg",
+      badgeContent: "6 new",
+      iconPosition: "both",
+    }
+  ]
+
+  defaultTab = 2;
+  tabSwitch(evt: any) {
+    console.log(evt);
+  }
+
+  range = new FormGroup({
+    start: new FormControl(),
+    end: new FormControl(),
+  });
+
+}

package/src/app/app.config.ts

@@ -0,0 +1,27 @@
+import { ApplicationConfig, importProvidersFrom } from '@angular/core';
+import { provideRouter } from '@angular/router';
+import { FormlyModule } from '@ngx-formly/core';
+import { FormSelectComponent } from '../../projects/component-library/src/lib/form-select/form-select.component';
+import { routes } from './app.routes';
+import { StepperComponent } from '../../projects/component-library/src/lib/stepper/stepper.component';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideRouter(routes),
+    importProvidersFrom([
+      FormlyModule.forRoot({
+        types: [
+          {
+            name: 'sa-select',
+            component: FormSelectComponent,
+          },
+          {
+            name: 'sa-stepper',
+            component: StepperComponent,
+          }
+        ]
+      })
+    ]), provideAnimationsAsync(), provideAnimationsAsync()
+  ]
+};

package/src/app/app.routes.ts

@@ -0,0 +1,3 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [];

package/src/app/data.ts

@@ -0,0 +1,52 @@
+const rawData = [
+  {
+    rowNo: 1,
+    name: 'Cell Name 1',
+    chip: 'Chip 1',
+    chip2: 'Chip 2',
+    chip3: 'Chip 3',
+    personPhoto: '../assets/avatar.svg',
+    personName: 'Nithish',
+    personDesignation: 'Developer',
+    buttonState: 'default',
+    link: 'https://google.com'
+  },
+  {
+    rowNo: 2,
+    name: 'Cell Name 2',
+    chip: 'Chip 1',
+    chip2: 'Chip 2',
+    chip3: 'Chip 3',
+    personPhoto: '../assets/avatar.svg',
+    personName: 'Shoaib',
+    personDesignation: 'Data Engineer',
+    buttonState: 'error',
+    link: 'https://adobe.com'
+  },
+  {
+    rowNo: 3,
+    name: 'Cell Name 3',
+    chip: 'Chip 1',
+    chip2: 'Chip 2',
+    chip3: 'Chip 3',
+    personPhoto: '../assets/avatar.svg',
+    personName: 'Rithwik',
+    personDesignation: 'Consultant',
+    buttonState: 'default',
+    link: 'https://sarasanalytics.com'
+  },
+  {
+    rowNo: 4,
+    name: 'Cell Name 4',
+    chip: 'Chip 1',
+    chip2: 'Chip 2',
+    chip3: 'Chip 3',
+    personPhoto: '../assets/avatar.svg',
+    personName: 'Siddartha',
+    personDesignation: 'Consultant',
+    buttonState: 'error',
+    link: 'https://youtube.com'
+  },
+];
+
+export default rawData;

package/src/app/kitchen-sink/kitchen-sink.component.css

@@ -0,0 +1,29 @@
+.all-variants {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+}
+
+.variant {
+  display: flex;
+  position: relative;
+  justify-content: center;
+  text-align: center;
+  padding: 10px;
+  border: 0.5px solid gray;
+}
+
+.variant:hover>.copy-icon {
+  display: block;
+}
+
+.copy-area {
+  transform: scale(0.6);
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  cursor: pointer;
+}
+
+.copy-icon {
+  display: none;
+}

package/src/app/kitchen-sink/kitchen-sink.component.html

@@ -0,0 +1,7 @@
+<div class="all-variants">
+  <div class="variant" *ngFor="let variant of paramCombinations; let i = index">
+    <ng-container *ngComponentOutlet="inputComponent; inputs: variant;" />
+    <mat-icon (click)="copy(i)" class="copy-area copy-icon">filter_none</mat-icon>
+    <p [style.display]="displayCopiedText[i] ? 'block': 'none'" class="copy-area copied-text">Copied!</p>
+  </div>
+</div>

package/src/app/kitchen-sink/kitchen-sink.component.spec.ts

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