Merge pull request #1027 from IgniteUI/didimmova/add-config-themes-sample

sample(grid-lite): add grid-lite sample with switchable themes

Author: simeonoff

browser/package-lock.json

@@ -49,4 +49,4 @@ export default defineConfig(({ mode }) => ({
   server: {
     open: false
   },
-}));
+}));

browser/vite.config.js

@@ -0,0 +1,78 @@
+// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project
+module.exports = {
+    parser: "@typescript-eslint/parser", // Specifies the ESLint parser
+    parserOptions: {
+        ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
+        sourceType: "module", // Allows for the use of imports
+        ecmaFeatures: {
+            jsx: true // Allows for the parsing of JSX
+        }
+    },
+    settings: {
+        react: {
+            version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use
+        }
+    },
+    extends: [
+        "eslint:recommended",
+        "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
+        "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin
+    ],
+    rules: {
+      // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
+      "default-case": "off",
+      "jsx-a11y/alt-text": "off",
+      "jsx-a11y/iframe-has-title": "off",
+      "no-undef": "off",
+      "no-unused-vars": "off",
+      "no-extend-native": "off",
+      "no-throw-literal": "off",
+      "no-useless-concat": "off",
+      "no-mixed-operators": "off",
+      "no-prototype-builtins": "off",
+      "no-mixed-spaces-and-tabs": 0,
+      "prefer-const": "off",
+      "prefer-rest-params": "off",
+      "@typescript-eslint/no-unused-vars": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-inferrable-types": "off",
+      "@typescript-eslint/no-useless-constructor": "off",
+      "@typescript-eslint/no-use-before-define": "off",
+      "@typescript-eslint/no-non-null-assertion": "off",
+      "@typescript-eslint/interface-name-prefix": "off",
+      "@typescript-eslint/prefer-namespace-keyword": "off",
+      "@typescript-eslint/explicit-function-return-type": "off",
+      "@typescript-eslint/explicit-module-boundary-types": "off"
+    },
+    "overrides": [
+      {
+        "files": ["*.ts", "*.tsx"],
+        "rules": {
+            "default-case": "off",
+            "jsx-a11y/alt-text": "off",
+            "jsx-a11y/iframe-has-title": "off",
+            "no-var": "off",
+            "no-undef": "off",
+            "no-unused-vars": "off",
+            "no-extend-native": "off",
+            "no-throw-literal": "off",
+            "no-useless-concat": "off",
+            "no-mixed-operators": "off",
+	    "no-mixed-spaces-and-tabs": 0,
+            "no-prototype-builtins": "off",
+            "prefer-const": "off",
+            "prefer-rest-params": "off",
+            "@typescript-eslint/no-unused-vars": "off",
+            "@typescript-eslint/no-explicit-any": "off",
+            "@typescript-eslint/no-inferrable-types": "off",
+            "@typescript-eslint/no-useless-constructor": "off",
+            "@typescript-eslint/no-use-before-define": "off",
+            "@typescript-eslint/no-non-null-assertion": "off",
+            "@typescript-eslint/interface-name-prefix": "off",
+            "@typescript-eslint/prefer-namespace-keyword": "off",
+            "@typescript-eslint/explicit-function-return-type": "off",
+            "@typescript-eslint/explicit-module-boundary-types": "off"
+        }
+      }
+    ]
+  };

samples/grids/grid-lite/styling-config-themes/.eslintrc.js

@@ -0,0 +1,56 @@
+<!-- NOTE: do not change this file because it's auto re-generated from template: -->
+<!-- https://github.com/IgniteUI/igniteui-react-examples/tree/vnext/templates/sample/ReadMe.md -->
+
+This folder contains implementation of React application with example of Styling Config Themes feature using [Grid Lite](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component.
+
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+    <body>
+        <a target="_blank" href="https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem" alt="View Docs" src="https://dl.infragistics.com/x/img/browsers/button-docs.png"/>
+        </a>
+        <a target="_blank" href="./src/index.tsx" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://dl.infragistics.com/x/img/browsers/button-code.png"/>
+        </a>
+        <a target="_blank" href="https://www.infragistics.com/react-demos/samples/grids/grid-lite/styling-config-themes" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://dl.infragistics.com/x/img/browsers/button-run.png"/>
+        </a>
+        <a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-react-examples/tree/master/samples/grids/grid-lite/styling-config-themes?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/index.tsx" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://dl.infragistics.com/x/img/browsers/button-sandbox.png"/>
+        </a>
+    </body>
+</html>
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+Follow these instructions to run this example:
+
+
+```
+git clone https://github.com/IgniteUI/igniteui-react-examples.git
+git checkout master
+cd ./igniteui-react-examples
+cd ./samples/grids/grid-lite/styling-config-themes
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+```
+npm install --legacy-peer-deps
+npm run-script start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html).

samples/grids/grid-lite/styling-config-themes/ReadMe.md

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Sample | Ignite UI | React | infragistics</title>
+    <link rel="shortcut icon" href="https://dl.infragistics.com/x/img/browsers/react.png" >
+    <link rel="stylesheet"    href="https://dl.infragistics.com/x/css/samples/shared.v8.css" />
+  </head>
+  <body data-theme="bootstrap-light">
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>

samples/grids/grid-lite/styling-config-themes/index.html

@@ -0,0 +1,49 @@
+{
+  "name": "example-ignite-ui-react",
+  "description": "This project provides example of using Ignite UI for React components",
+  "author": "Infragistics",
+  "version": "1.4.0",
+  "license": "",
+  "homepage": ".",
+  "private": true,
+  "scripts": {
+    "start": "vite --port 4200",
+    "build": "tsc && node --max-old-space-size=4096 node_modules/vite/bin/vite build",
+    "preview": "vite preview",
+    "test": "vitest",
+    "lint": "eslint ./src/**/*.{ts,tsx}"
+  },
+  "dependencies": {
+    "igniteui-grid-lite": "~0.6.0",
+    "igniteui-react": "^19.4.0",
+    "igniteui-theming": "^25.0.1",
+    "igniteui-webcomponents": "^6.3.0",
+    "lit-html": "^3.2.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "tslib": "^2.4.0"
+  },
+  "devDependencies": {
+    "@types/jest": "^29.2.0",
+    "@types/node": "^24.7.1",
+    "@types/react": "^18.3.28",
+    "@types/react-dom": "^18.0.8",
+    "@vitejs/plugin-react": "^5.0.4",
+    "@vitest/browser": "^3.2.4",
+    "eslint": "^8.33.0",
+    "eslint-config-react": "^1.1.7",
+    "eslint-plugin-react": "^7.20.0",
+    "sass": "^1.83.0",
+    "typescript": "^4.8.4",
+    "vite": "^7.1.9",
+    "vitest": "^3.2.4",
+    "vitest-canvas-mock": "^0.3.3",
+    "worker-loader": "^3.0.8"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}

samples/grids/grid-lite/styling-config-themes/package.json

@@ -0,0 +1,5 @@
+{
+    "infiniteLoopProtection": false,
+    "hardReloadOnChange": false,
+    "view": "browser"
+}

samples/grids/grid-lite/styling-config-themes/sandbox.config.json

@@ -0,0 +1,136 @@
+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 namesMen = ['John', 'Bob', 'Mark', 'Charlie', 'Martin', 'Bill', 'Frank', 'Larry', 'Henry', 'Steve', 'Mike', 'Andrew'];
+  private namesWomen = ['Jane', 'Alice', 'Diana', 'Eve', 'Grace' , 'Katie', 'Irene', 'Liz', 'Fiona', 'Pam', 'Val', 'Mindy'];
+  private lastNames = ['Smith', 'Johnson', 'Mendoza', 'Brown', 'Spencer', 'Stone', 'Stark', 'Rooney'];
+  private productNames = ['Widget', 'Gadget', 'Gizmo', 'Device', 'Tool', 'Instrument', 'Machine', 'Equipment'];
+  private productModels = ['Pro', 'Plus', 'Max', 'Ultra', 'Mini', 'Lite'];
+  private priorities: ('Low' | 'Standard' | 'High')[] = ['Low', 'Standard', 'High'];
+
+  private randomInt(min: number, max: number): number {
+    const array = new Uint32Array(1);
+    window.crypto.getRandomValues(array);
+    const random01 = array[0] / 2 ** 32;
+    return Math.floor(random01 * (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 `1000-${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));
+    const product = this.randomElement(this.productNames) + ' ' + this.randomElement(this.productModels);
+
+    return {
+      price,
+      sold,
+      total,
+      id: this.generateId(),
+      name: product,
+      rating: this.randomFloat(0, 5, 1)
+    };
+  }
+
+  createUserSimple(): UserSimple {
+    const firstName = this.randomElement(this.namesMen.concat(this.namesWomen)).toLowerCase();
+    const lastName = this.randomElement(this.lastNames).toLowerCase();
+    const email = firstName + '.' + lastName + '@example.com';
+    const username = firstName + '.' + lastName + this.randomInt(1, 99);
+    return {
+      id: this.generateId(),
+      username: username,
+      email: email,
+      subscribed: this.randomBoolean()
+    };
+  }
+
+  createUser(): User {
+    let imagePath: string = "";
+    let firstName: string = "";
+    const gender = this.randomInt(0, 1);
+    if (gender === 0) {
+       imagePath = "https://dl.infragistics.com/x/img/people/men/" + this.randomInt(10, 40) + ".png";
+       firstName = this.randomElement(this.namesMen);
+    } else {
+       imagePath = "https://dl.infragistics.com/x/img/people/women/" + this.randomInt(10, 40) + ".png";
+       firstName = this.randomElement(this.namesWomen);
+    }
+    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: imagePath,
+      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/styling-config-themes/src/GridLiteDataService.ts

@@ -0,0 +1,40 @@
+@use 'sass:list';
+@use 'igniteui-theming' as *;
+@use 'igniteui-theming/sass/color/presets' as *;
+@use 'igniteui-theming/sass/typography/presets' as *;
+
+.container {
+    padding: rem(20px);
+}
+
+.options {
+    background: var(--ig-gray-100);
+    gap: rem(10px);
+    padding: rem(20px);
+    margin-bottom: rem(20px);
+    border-radius: rem(6px);
+}
+
+.grid-lite-wrapper {
+    height: 100vh;
+}
+
+// Theme configurations
+$themes: (
+    'bootstrap-light': ($light-bootstrap-palette, $bootstrap-typeface, $bootstrap-type-scale),
+    'material-light': ($light-material-palette, $material-typeface, $material-type-scale),
+    'fluent-light': ($light-fluent-palette, $fluent-typeface, $fluent-type-scale),
+    'indigo-light': ($light-indigo-palette, $indigo-typeface, $indigo-type-scale),
+    'bootstrap-dark': ($dark-bootstrap-palette, $bootstrap-typeface, $bootstrap-type-scale),
+    'material-dark': ($dark-material-palette, $material-typeface, $material-type-scale),
+    'fluent-dark': ($dark-fluent-palette, $fluent-typeface, $fluent-type-scale),
+    'indigo-dark': ($dark-indigo-palette, $indigo-typeface, $indigo-type-scale)
+);
+
+// Generate theme classes
+@each $name, $config in $themes {
+    body[data-theme="#{$name}"] .grid-lite-wrapper {
+        @include palette(list.nth($config, 1));
+        @include typography(list.nth($config, 2), list.nth($config, 3));
+    }
+}