Add grid-lite package and create all 13 sample components

Co-authored-by: ChronosSF <2188411+ChronosSF@users.noreply.github.com>

Author: Copilot

browser/package.json

@@ -24,6 +24,7 @@
     "dompurify": "^3.3.0",
     "file-saver": "1.3.8",
     "igniteui-dockmanager": "^1.17.0",
+    "igniteui-grid-lite": "^1.0.0-alpha.9",
     "igniteui-react": "^19.3.0",
     "igniteui-react-charts": "19.3.0-beta.0",
     "igniteui-react-core": "19.3.0-beta.0",

browser/src/typedecls.d.ts

@@ -2,6 +2,12 @@
 declare module JSX {
     interface IntrinsicElements {
       "igc-dockmanager": any;
+      "igc-grid-lite": any;
+      "igc-avatar": any;
+      "igc-rating": any;
+      "igc-checkbox": any;
+      "igc-select": any;
+      "igc-select-item": any;
     }
   }
   /* tslint:enable */

samples/grids/grid-lite/column-config-basic/src/GridLiteColumnConfigBasic.css

@@ -0,0 +1,9 @@
+.grid-lite-wrapper {
+  width: 100%;
+  height: 100%;
+}
+
+igc-grid-lite {
+  min-height: 65vh;
+  --ig-size: 2;
+}

samples/grids/grid-lite/column-config-basic/src/GridLiteColumnConfigBasic.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { GridLiteDataService, ProductInfo } from './GridLiteDataService';
+import './GridLiteColumnConfigBasic.css';
+
+// Import the web component
+import { IgcGridLite } from 'igniteui-grid-lite';
+import { 
+  defineComponents,
+  IgcRatingComponent
+} from 'igniteui-webcomponents';
+
+import "igniteui-webcomponents/themes/light/bootstrap.css";
+
+// Register components
+IgcGridLite.register();
+defineComponents(IgcRatingComponent);
+
+export default class Sample extends React.Component<any, any> {
+  private dataService: GridLiteDataService;
+  private formatter: Intl.NumberFormat;
+  private gridRef: React.RefObject<any>;
+
+  constructor(props: any) {
+    super(props);
+    this.dataService = new GridLiteDataService();
+    this.formatter = new Intl.NumberFormat('en-EN', {
+      style: 'currency',
+      currency: 'EUR'
+    });
+    this.gridRef = React.createRef();
+  }
+
+  componentDidMount() {
+    if (this.gridRef.current) {
+      const data: ProductInfo[] = this.dataService.generateProducts(50);
+      
+      const columns = [
+        { 
+          key: 'name', 
+          headerText: 'Product Name' 
+        },
+        {
+          key: 'price',
+          headerText: 'Price',
+          type: 'number',
+          cellTemplate: (params: any) => {
+            const span = document.createElement('span');
+            span.textContent = this.formatter.format(params.value);
+            return span;
+          }
+        },
+        { 
+          key: 'sold', 
+          type: 'number', 
+          headerText: 'Units sold' 
+        },
+        { 
+          key: 'total', 
+          headerText: 'Total sold',
+          cellTemplate: (params: any) => {
+            const span = document.createElement('span');
+            span.textContent = this.formatter.format(params.value);
+            return span;
+          }
+        },
+        {
+          key: 'rating',
+          type: 'number',
+          headerText: 'Customer rating',
+          cellTemplate: (params: any) => {
+            const rating = document.createElement('igc-rating');
+            rating.setAttribute('readonly', '');
+            rating.setAttribute('step', '0.01');
+            rating.setAttribute('value', params.value.toString());
+            return rating;
+          }
+        }
+      ];
+
+      this.gridRef.current.columns = columns;
+      this.gridRef.current.data = data;
+    }
+  }
+
+  public render(): JSX.Element {
+    return (
+      <div className="container sample ig-typography">
+        <div className="grid-lite-wrapper">
+          <igc-grid-lite ref={this.gridRef} id="grid-lite"></igc-grid-lite>
+        </div>
+      </div>
+    );
+  }
+}
+
+// rendering above component in the React DOM
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(<Sample/>);

samples/grids/grid-lite/column-config-basic/src/GridLiteDataService.ts

@@ -0,0 +1,122 @@
+export type UserSimple = {
+  id: string;
+  username: string;
+  email: string;
+  subscribed: boolean;
+};
+
+export type ProductInfo = {
+  id: string;
+  name: string;
+  price: number;
+  sold: number;
+  rating: number;
+  total: number;
+};
+
+export type User = {
+  id: string;
+  firstName: string;
+  lastName: string;
+  age: number;
+  email: string;
+  avatar: string;
+  active: boolean;
+  priority: 'Low' | 'Standard' | 'High';
+  satisfaction: number;
+  registeredAt: Date;
+};
+
+export class GridLiteDataService {
+  private counter = 0;
+
+  private firstNames = ['John', 'Jane', 'Bob', 'Alice', 'Charlie', 'Diana', 'Eve', 'Frank', 'Grace', 'Henry', 
+    'Ivy', 'Jack', 'Kate', 'Liam', 'Mia', 'Noah', 'Olivia', 'Peter', 'Quinn', 'Rachel'];
+  private lastNames = ['Smith', 'Johnson', 'Williams', 'Brown', 'Jones', 'Garcia', 'Miller', 'Davis', 
+    'Rodriguez', 'Martinez', 'Wilson', 'Anderson', 'Taylor', 'Thomas', 'Moore', 'Jackson', 'White', 'Harris'];
+  private productNames = ['Widget', 'Gadget', 'Doohickey', 'Thingamajig', 'Gizmo', 'Contraption', 
+    'Device', 'Tool', 'Apparatus', 'Instrument', 'Machine', 'Equipment'];
+  private priorities: ('Low' | 'Standard' | 'High')[] = ['Low', 'Standard', 'High'];
+
+  private randomInt(min: number, max: number): number {
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+  }
+
+  private randomFloat(min: number, max: number, precision = 2): number {
+    const array = new Uint32Array(1);
+    window.crypto.getRandomValues(array);
+    const random01 = array[0] / 2 ** 32;
+    return parseFloat((random01 * (max - min) + min).toFixed(precision));
+  }
+
+  private randomElement<T>(array: T[]): T {
+    return array[this.randomInt(0, array.length - 1)];
+  }
+
+  private randomBoolean(): boolean {
+    const array = new Uint8Array(1);
+    window.crypto.getRandomValues(array);
+    return (array[0] & 1) === 0;
+  }
+
+  private generateId(): string {
+    return `${Date.now()}-${this.counter++}-${this.randomInt(1000, 9999)}`;
+  }
+
+  createProductInfo(): ProductInfo {
+    const price = this.randomFloat(50, 500, 2);
+    const sold = this.randomInt(10, 100);
+    const total = parseFloat((price * sold).toFixed(2));
+
+    return {
+      price,
+      sold,
+      total,
+      id: this.generateId(),
+      name: `${this.randomElement(this.productNames)} ${this.randomElement(['Pro', 'Plus', 'Max', 'Ultra', 'Mini', 'Lite'])}`,
+      rating: this.randomFloat(0, 5, 1)
+    };
+  }
+
+  createUserSimple(): UserSimple {
+    const firstName = this.randomElement(this.firstNames);
+    const lastName = this.randomElement(this.lastNames);
+    return {
+      id: this.generateId(),
+      username: `${firstName.toLowerCase()}.${lastName.toLowerCase()}${this.randomInt(1, 99)}`,
+      email: `${firstName.toLowerCase()}.${lastName.toLowerCase()}@example.com`,
+      subscribed: this.randomBoolean()
+    };
+  }
+
+  createUser(): User {
+    const firstName = this.randomElement(this.firstNames);
+    const lastName = this.randomElement(this.lastNames);
+    const email = `${firstName.toLowerCase()}.${lastName.toLowerCase()}@example.com`;
+
+    return {
+      id: this.generateId(),
+      firstName,
+      lastName,
+      age: this.randomInt(18, 90),
+      email,
+      avatar: `https://i.pravatar.cc/150?img=${this.randomInt(1, 70)}`,
+      active: this.randomBoolean(),
+      priority: this.randomElement(this.priorities),
+      satisfaction: this.randomInt(0, 5),
+      registeredAt: new Date(Date.now() - this.randomInt(0, 365 * 24 * 60 * 60 * 1000))
+    };
+  }
+
+  generateUsers(count: number): User[] {
+    return Array.from({ length: count }, () => this.createUser());
+  }
+
+  generateProducts(count: number): ProductInfo[] {
+    return Array.from({ length: count }, () => this.createProductInfo());
+  }
+
+  generateSimpleUsers(count: number): UserSimple[] {
+    return Array.from({ length: count }, () => this.createUserSimple());
+  }
+}

samples/grids/grid-lite/column-config-basic/src/index.tsx

@@ -0,0 +1 @@
+export { default } from './GridLiteColumnConfigBasic';

samples/grids/grid-lite/column-config-dynamic/src/GridLiteColumnConfigDynamic.css

@@ -0,0 +1,38 @@
+#panel {
+    margin: 1rem 0;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.config-key {
+    flex: 2 1 25% !important;
+    font-weight: bold;
+}
+
+.config {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-evenly;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.config * {
+    flex: 1;
+}
+
+igc-dropdown-item {
+    padding: 0.5rem 1rem;
+}
+
+.grid-lite-wrapper {
+    width: 100%;
+    height: 100%;
+}
+
+igc-grid-lite {
+    min-height: 65vh;
+    --ig-size: 2;
+}