diff --git a/samples/grids/grid-lite/styling-config-themes/.eslintrc.js b/samples/grids/grid-lite/styling-config-themes/.eslintrc.js new file mode 100644 index 0000000000..7168b71441 --- /dev/null +++ b/samples/grids/grid-lite/styling-config-themes/.eslintrc.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" + } + } + ] + }; \ No newline at end of file diff --git a/samples/grids/grid-lite/styling-config-themes/ReadMe.md b/samples/grids/grid-lite/styling-config-themes/ReadMe.md new file mode 100644 index 0000000000..420c6cfed8 --- /dev/null +++ b/samples/grids/grid-lite/styling-config-themes/ReadMe.md @@ -0,0 +1,56 @@ + + + +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. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## 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). diff --git a/samples/grids/grid-lite/styling-config-themes/index.html b/samples/grids/grid-lite/styling-config-themes/index.html new file mode 100644 index 0000000000..272184ef96 --- /dev/null +++ b/samples/grids/grid-lite/styling-config-themes/index.html @@ -0,0 +1,12 @@ + + + + Sample | Ignite UI | React | infragistics + + + + +
+ + + diff --git a/samples/grids/grid-lite/styling-config-themes/package.json b/samples/grids/grid-lite/styling-config-themes/package.json new file mode 100644 index 0000000000..8c431949c5 --- /dev/null +++ b/samples/grids/grid-lite/styling-config-themes/package.json @@ -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.0.1", + "igniteui-react": "^19.4.0", + "igniteui-theming": "^24.0.2", + "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.0.24", + "@types/react-dom": "^18.0.8", + "@vitejs/plugin-react": "^5.0.4", + "@vitest/browser": "^3.2.4", + "eslint": "^8.33.0", + "sass": "^1.83.0", + "eslint-config-react": "^1.1.7", + "eslint-plugin-react": "^7.20.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" + ] +} diff --git a/samples/grids/grid-lite/styling-config-themes/sandbox.config.json b/samples/grids/grid-lite/styling-config-themes/sandbox.config.json new file mode 100644 index 0000000000..49a80d1d8b --- /dev/null +++ b/samples/grids/grid-lite/styling-config-themes/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} diff --git a/samples/grids/grid-lite/styling-config-themes/src/GridLiteDataService.ts b/samples/grids/grid-lite/styling-config-themes/src/GridLiteDataService.ts new file mode 100644 index 0000000000..4f1b40d1cd --- /dev/null +++ b/samples/grids/grid-lite/styling-config-themes/src/GridLiteDataService.ts @@ -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(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()); + } +} \ No newline at end of file diff --git a/samples/grids/grid-lite/styling-config-themes/src/index.scss b/samples/grids/grid-lite/styling-config-themes/src/index.scss new file mode 100644 index 0000000000..28258bfed0 --- /dev/null +++ b/samples/grids/grid-lite/styling-config-themes/src/index.scss @@ -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 { + .grid-lite-wrapper[data-theme="#{$name}"] { + @include palette(list.nth($config, 1)); + @include typography(list.nth($config, 2), list.nth($config, 3)); + } +} diff --git a/samples/grids/grid-lite/styling-config-themes/src/index.tsx b/samples/grids/grid-lite/styling-config-themes/src/index.tsx new file mode 100644 index 0000000000..f5a4a36e31 --- /dev/null +++ b/samples/grids/grid-lite/styling-config-themes/src/index.tsx @@ -0,0 +1,167 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import { GridLiteDataService, ProductInfo } from './GridLiteDataService'; + +// Import the web component +import { IgcGridLite } from 'igniteui-grid-lite'; +import { + defineComponents, + IgcRatingComponent, + IgcSelectComponent +} from 'igniteui-webcomponents'; + +import "igniteui-webcomponents/themes/light/bootstrap.css"; +import "./index.scss"; + +// Add custom elements to JSX namespace for TypeScript +declare global { + namespace JSX { + interface IntrinsicElements { + 'igc-select': React.DetailedHTMLProps, HTMLElement>; + 'igc-select-item': React.DetailedHTMLProps, HTMLElement>; + 'igc-grid-lite': React.DetailedHTMLProps, HTMLElement>; + 'igc-rating': React.DetailedHTMLProps, HTMLElement>; + } + } +} + +// Register components +IgcGridLite.register(); +defineComponents(IgcRatingComponent, IgcSelectComponent); + +export default class Sample extends React.Component { + private dataService: GridLiteDataService; + private gridRef: React.RefObject; + private wrapperRef: React.RefObject; + private selectRef: React.RefObject; + + constructor(props: any) { + super(props); + this.dataService = new GridLiteDataService(); + this.gridRef = React.createRef(); + this.wrapperRef = React.createRef(); + this.selectRef = React.createRef(); + this.state = { + currentTheme: 'bootstrap-light' + }; + } + + componentDidMount() { + if (this.gridRef.current) { + const data: ProductInfo[] = this.dataService.generateProducts(50); + + const columns = [ + { + key: 'name', + headerText: 'Product', + sort: true, + filter: true + }, + { + key: 'price', + headerText: 'Price', + sort: true, + filter: true, + type: 'number' + }, + { + key: 'sold', + headerText: 'Sold', + sort: true, + filter: true, + type: 'number' + }, + { + key: 'total', + headerText: 'Total', + sort: true, + filter: true, + type: 'number' + }, + { + key: 'rating', + headerText: 'Rating', + type: 'number', + sort: true, + filter: true, + cellTemplate: (params: any) => { + const rating = document.createElement('igc-rating'); + rating.setAttribute('readonly', ''); + rating.setAttribute('value', params.value.toString()); + return rating; + } + } + ]; + + this.gridRef.current.columns = columns; + this.gridRef.current.data = data; + } + + // Set up theme select listener + if (this.selectRef.current) { + this.selectRef.current.addEventListener('igcChange', (event: any) => { + const selectedValue = event.detail.value; + this.changeTheme(selectedValue); + }); + } + + // Apply initial theme + this.changeTheme(this.state.currentTheme); + } + + private changeTheme = (theme: string) => { + this.setState({ currentTheme: theme }); + if (this.wrapperRef.current) { + this.wrapperRef.current.setAttribute('data-theme', theme); + } + // Force grid refresh by reassigning data + if (this.gridRef.current) { + const currentData = this.gridRef.current.data; + this.gridRef.current.data = [...currentData]; + } + } + + public render(): JSX.Element { + return ( +
+
+ + + + Light Bootstrap + + + Light Material + + + Light Fluent + + + Light Indigo + + + Dark Bootstrap + + + Dark Material + + + Dark Fluent + + + Dark Indigo + + +
+ +
+ +
+
+ ); + } +} + +// rendering above component in the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/grids/grid-lite/styling-config-themes/tsconfig.json b/samples/grids/grid-lite/styling-config-themes/tsconfig.json new file mode 100644 index 0000000000..8c0d146f95 --- /dev/null +++ b/samples/grids/grid-lite/styling-config-themes/tsconfig.json @@ -0,0 +1,44 @@ +{ + "compilerOptions": { + "resolveJsonModule": true, + "esModuleInterop": true, + "baseUrl": ".", + "outDir": "build/dist", + "module": "esnext", + "target": "es5", + "lib": [ + "es6", + "dom" + ], + "sourceMap": true, + "allowJs": true, + "jsx": "react-jsx", + "moduleResolution": "node", + "rootDir": "src", + "forceConsistentCasingInFileNames": true, + "noImplicitReturns": true, + "noImplicitThis": true, + "noImplicitAny": true, + "noUnusedLocals": false, + "importHelpers": true, + "allowSyntheticDefaultImports": true, + "skipLibCheck": true, + "strict": false, + "isolatedModules": true, + "noEmit": true + }, + "exclude": [ + "node_modules", + "build", + "scripts", + "acceptance-tests", + "webpack", + "jest", + "src/setupTests.ts", + "**/odatajs-4.0.0.js", + "config-overrides.js" + ], + "include": [ + "src" + ] +} diff --git a/samples/grids/grid-lite/styling-config-themes/vite.config.js b/samples/grids/grid-lite/styling-config-themes/vite.config.js new file mode 100644 index 0000000000..a5f23b02e9 --- /dev/null +++ b/samples/grids/grid-lite/styling-config-themes/vite.config.js @@ -0,0 +1,20 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; +import { resolve } from 'path'; + +export default defineConfig({ + plugins: [react()], + css: { + preprocessorOptions: { + scss: { + loadPaths: [resolve(__dirname, 'node_modules')] + } + } + }, + build: { + outDir: 'build' + }, + server: { + open: false + }, +});