@sarasanalytics-com/design-system 0.0.3 → 0.0.5

package/src/app/app.component.ts

@@ -1,505 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

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

package/src/app/data.ts

@@ -1,52 +0,0 @@
-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

@@ -1,29 +0,0 @@
-.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

@@ -1,7 +0,0 @@
-<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

@@ -1,23 +0,0 @@
-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();
-  });
-});