diff --git a/samples/inputs/highlight/helper-text/.devcontainer/devcontainer.json b/samples/inputs/highlight/helper-text/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..e0b8e9c925 --- /dev/null +++ b/samples/inputs/highlight/helper-text/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} \ No newline at end of file diff --git a/samples/inputs/highlight/helper-text/.eslintrc.js b/samples/inputs/highlight/helper-text/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/inputs/highlight/helper-text/.eslintrc.js @@ -0,0 +1,75 @@ +// 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", + "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", + "prefer-const": "off", + "prefer-rest-params": "off", + "jsx-a11y/alt-text": "off", + "jsx-a11y/iframe-has-title": "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", + "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", + "prefer-const": "off", + "prefer-rest-params": "off", + "jsx-a11y/alt-text": "off", + "jsx-a11y/iframe-has-title": "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/inputs/highlight/helper-text/README.md b/samples/inputs/highlight/helper-text/README.md new file mode 100644 index 0000000000..6b6764182c --- /dev/null +++ b/samples/inputs/highlight/helper-text/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Helper Text feature using [Highlight](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/inputs/highlight/helper-text +``` + +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/inputs/highlight/helper-text/index.html b/samples/inputs/highlight/helper-text/index.html new file mode 100644 index 0000000000..7949be08be --- /dev/null +++ b/samples/inputs/highlight/helper-text/index.html @@ -0,0 +1,11 @@ + + + + Highlight Helper Text + + + +
+ + + \ No newline at end of file diff --git a/samples/inputs/highlight/helper-text/package.json b/samples/inputs/highlight/helper-text/package.json new file mode 100644 index 0000000000..e59f1d6cf9 --- /dev/null +++ b/samples/inputs/highlight/helper-text/package.json @@ -0,0 +1,42 @@ +{ + "name": "react-highlight-helper-text", + "description": "This project provides example of Highlight Helper Text using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "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" + }, + "dependencies": { + "igniteui-dockmanager": "^1.17.0", + "igniteui-react": "^19.6.2", + "igniteui-react-core": "19.6.0-beta.0", + "igniteui-webcomponents": "^7.1.3", + "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", + "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/inputs/highlight/helper-text/sandbox.config.json b/samples/inputs/highlight/helper-text/sandbox.config.json new file mode 100644 index 0000000000..00acba0c10 --- /dev/null +++ b/samples/inputs/highlight/helper-text/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/inputs/highlight/helper-text/src/index.css b/samples/inputs/highlight/helper-text/src/index.css new file mode 100644 index 0000000000..1f53b8aa05 --- /dev/null +++ b/samples/inputs/highlight/helper-text/src/index.css @@ -0,0 +1,2 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ \ No newline at end of file diff --git a/samples/inputs/highlight/helper-text/src/index.tsx b/samples/inputs/highlight/helper-text/src/index.tsx new file mode 100644 index 0000000000..e5d48a62e0 --- /dev/null +++ b/samples/inputs/highlight/helper-text/src/index.tsx @@ -0,0 +1,89 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import { IgrInput, IgrHighlight, IgrIconButton, IgrDivider, IgrExpansionPanel } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +export default class HighlightHelperText extends React.Component { + private highlightRef = React.createRef(); + private statusRef = React.createRef(); + + private updateStatus() { + const highlight = this.highlightRef.current; + const status = this.statusRef.current; + if (!highlight || !status) return; + + status.textContent = highlight.size + ? `${highlight.current + 1} of ${highlight.size} match${highlight.size === 1 ? '' : 'es'}` + : ''; + } + + private onInput = ({ detail }: CustomEvent) => { + if (!this.highlightRef.current) return; + this.highlightRef.current.searchText = detail; + this.updateStatus(); + }; + + private prev = () => { + this.highlightRef.current?.previous({preventScroll: true}); + this.updateStatus(); + }; + + private next = () => { + this.highlightRef.current?.next({preventScroll: true}); + this.updateStatus(); + }; + + public render(): JSX.Element { + return ( +
+
+ + + +

+ +
+ + +

Document Object Model

+ +

Overview

+
+

+ The Document Object Model (DOM) is a cross-platform and + language-independent interface that treats an HTML or XML document + as a tree structure wherein each node is an object representing a + part of the document. The DOM represents a document with a logical + tree. Each branch of the tree ends in a node, and each node + contains objects. DOM methods allow programmatic access to the + tree; with them one can change the structure, style or content of + a document. Nodes can have event handlers (also known as event + listeners) attached to them. Once an event is triggered, the event + handlers get executed. +

+

+ The principal standardization of the DOM was handled by the World + Wide Web Consortium (W3C), which last developed a recommendation + in 2004. WHATWG took over the development of the standard, + publishing it as a living document. The W3C now publishes stable + snapshots of the WHATWG standard. +

+

In HTML DOM (Document Object Model), every element is a node:

+
    +
  • A document is a document node.
    • +
  • All HTML elements are element nodes.
    • +
  • All HTML attributes are attribute nodes.
    • +
  • Text inserted into HTML elements are text nodes.
    • +
  • Comments are comment nodes.
    • +
+
+ + +
+ ); + } +} + +// rendering above class to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/inputs/highlight/helper-text/tsconfig.json b/samples/inputs/highlight/helper-text/tsconfig.json new file mode 100644 index 0000000000..e7db8a94f5 --- /dev/null +++ b/samples/inputs/highlight/helper-text/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", + "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/inputs/highlight/helper-text/vite.config.js b/samples/inputs/highlight/helper-text/vite.config.js new file mode 100644 index 0000000000..1744dbc719 --- /dev/null +++ b/samples/inputs/highlight/helper-text/vite.config.js @@ -0,0 +1,12 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { + outDir: 'build' + }, + server: { + open: false + }, +}); \ No newline at end of file diff --git a/samples/inputs/highlight/overview/.devcontainer/devcontainer.json b/samples/inputs/highlight/overview/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..e0b8e9c925 --- /dev/null +++ b/samples/inputs/highlight/overview/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} \ No newline at end of file diff --git a/samples/inputs/highlight/overview/.eslintrc.js b/samples/inputs/highlight/overview/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/inputs/highlight/overview/.eslintrc.js @@ -0,0 +1,75 @@ +// 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", + "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", + "prefer-const": "off", + "prefer-rest-params": "off", + "jsx-a11y/alt-text": "off", + "jsx-a11y/iframe-has-title": "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", + "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", + "prefer-const": "off", + "prefer-rest-params": "off", + "jsx-a11y/alt-text": "off", + "jsx-a11y/iframe-has-title": "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/inputs/highlight/overview/README.md b/samples/inputs/highlight/overview/README.md new file mode 100644 index 0000000000..481e4ce48a --- /dev/null +++ b/samples/inputs/highlight/overview/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Overview feature using [Highlight](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/inputs/highlight/overview +``` + +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/inputs/highlight/overview/index.html b/samples/inputs/highlight/overview/index.html new file mode 100644 index 0000000000..fe9f0b37f4 --- /dev/null +++ b/samples/inputs/highlight/overview/index.html @@ -0,0 +1,11 @@ + + + + Highlight Overview + + + +
+ + + \ No newline at end of file diff --git a/samples/inputs/highlight/overview/package.json b/samples/inputs/highlight/overview/package.json new file mode 100644 index 0000000000..ad63ac1856 --- /dev/null +++ b/samples/inputs/highlight/overview/package.json @@ -0,0 +1,42 @@ +{ + "name": "react-highlight-overview", + "description": "This project provides example of Highlight Overview using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "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" + }, + "dependencies": { + "igniteui-dockmanager": "^1.17.0", + "igniteui-react": "^19.6.2", + "igniteui-react-core": "19.6.0-beta.0", + "igniteui-webcomponents": "^7.1.3", + "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", + "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/inputs/highlight/overview/sandbox.config.json b/samples/inputs/highlight/overview/sandbox.config.json new file mode 100644 index 0000000000..00acba0c10 --- /dev/null +++ b/samples/inputs/highlight/overview/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/inputs/highlight/overview/src/index.css b/samples/inputs/highlight/overview/src/index.css new file mode 100644 index 0000000000..1f53b8aa05 --- /dev/null +++ b/samples/inputs/highlight/overview/src/index.css @@ -0,0 +1,2 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ \ No newline at end of file diff --git a/samples/inputs/highlight/overview/src/index.tsx b/samples/inputs/highlight/overview/src/index.tsx new file mode 100644 index 0000000000..552469569c --- /dev/null +++ b/samples/inputs/highlight/overview/src/index.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import { IgrHighlight } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +export default class HighlightOverview extends React.Component { + + public render(): JSX.Element { + return ( +
+ +

+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quae doloribus + odit id excepturi ipsum provident eaque dignissimos beatae! +

+ +
+ ); + } +} + +// rendering above class to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/inputs/highlight/overview/tsconfig.json b/samples/inputs/highlight/overview/tsconfig.json new file mode 100644 index 0000000000..e7db8a94f5 --- /dev/null +++ b/samples/inputs/highlight/overview/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", + "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/inputs/highlight/overview/vite.config.js b/samples/inputs/highlight/overview/vite.config.js new file mode 100644 index 0000000000..1744dbc719 --- /dev/null +++ b/samples/inputs/highlight/overview/vite.config.js @@ -0,0 +1,12 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { + outDir: 'build' + }, + server: { + open: false + }, +}); \ No newline at end of file diff --git a/samples/inputs/highlight/search/.devcontainer/devcontainer.json b/samples/inputs/highlight/search/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..e0b8e9c925 --- /dev/null +++ b/samples/inputs/highlight/search/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} \ No newline at end of file diff --git a/samples/inputs/highlight/search/.eslintrc.js b/samples/inputs/highlight/search/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/inputs/highlight/search/.eslintrc.js @@ -0,0 +1,75 @@ +// 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", + "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", + "prefer-const": "off", + "prefer-rest-params": "off", + "jsx-a11y/alt-text": "off", + "jsx-a11y/iframe-has-title": "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", + "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", + "prefer-const": "off", + "prefer-rest-params": "off", + "jsx-a11y/alt-text": "off", + "jsx-a11y/iframe-has-title": "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/inputs/highlight/search/README.md b/samples/inputs/highlight/search/README.md new file mode 100644 index 0000000000..98a542b83d --- /dev/null +++ b/samples/inputs/highlight/search/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Search feature using [Highlight](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/inputs/highlight/search +``` + +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/inputs/highlight/search/index.html b/samples/inputs/highlight/search/index.html new file mode 100644 index 0000000000..99fcb5dcd4 --- /dev/null +++ b/samples/inputs/highlight/search/index.html @@ -0,0 +1,11 @@ + + + + Highlight Search + + + +
+ + + \ No newline at end of file diff --git a/samples/inputs/highlight/search/package.json b/samples/inputs/highlight/search/package.json new file mode 100644 index 0000000000..5b82d56801 --- /dev/null +++ b/samples/inputs/highlight/search/package.json @@ -0,0 +1,42 @@ +{ + "name": "react-highlight-search", + "description": "This project provides example of Highlight Search using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "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" + }, + "dependencies": { + "igniteui-dockmanager": "^1.17.0", + "igniteui-react": "^19.6.2", + "igniteui-react-core": "19.6.0-beta.0", + "igniteui-webcomponents": "^7.1.3", + "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", + "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/inputs/highlight/search/sandbox.config.json b/samples/inputs/highlight/search/sandbox.config.json new file mode 100644 index 0000000000..00acba0c10 --- /dev/null +++ b/samples/inputs/highlight/search/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/inputs/highlight/search/src/index.css b/samples/inputs/highlight/search/src/index.css new file mode 100644 index 0000000000..c48f077603 --- /dev/null +++ b/samples/inputs/highlight/search/src/index.css @@ -0,0 +1,6 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +igc-divider { + margin-block-start: 20px; +} \ No newline at end of file diff --git a/samples/inputs/highlight/search/src/index.tsx b/samples/inputs/highlight/search/src/index.tsx new file mode 100644 index 0000000000..fca0a5600b --- /dev/null +++ b/samples/inputs/highlight/search/src/index.tsx @@ -0,0 +1,48 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import { IgrInput, IgrHighlight, IgrDivider, IgrIconButton } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; +import './index.css'; + +export default class HighlightSearch extends React.Component { + private highlightRef = React.createRef(); + + private onInput = ({ detail }: CustomEvent) => { + if (!this.highlightRef) return; + this.highlightRef.current.searchText = detail; + }; + + private prev = () => { + this.highlightRef?.current.previous({preventScroll: true}); + }; + + private next = () => { + this.highlightRef?.current.next({preventScroll: true}); + }; + + public render(): JSX.Element { + return ( +
+
+ + + + +
+ + +

+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quae doloribus + odit id excepturi ipsum provident eaque dignissimos beatae! Rerum vero + distinctio libero, quasi magni quod natus nesciunt doloremque temporibus + voluptate? +

+ +
+ ); + } +} + +// rendering above class to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/inputs/highlight/search/tsconfig.json b/samples/inputs/highlight/search/tsconfig.json new file mode 100644 index 0000000000..e7db8a94f5 --- /dev/null +++ b/samples/inputs/highlight/search/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", + "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/inputs/highlight/search/vite.config.js b/samples/inputs/highlight/search/vite.config.js new file mode 100644 index 0000000000..1744dbc719 --- /dev/null +++ b/samples/inputs/highlight/search/vite.config.js @@ -0,0 +1,12 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { + outDir: 'build' + }, + server: { + open: false + }, +}); \ No newline at end of file diff --git a/samples/inputs/highlight/styling/.devcontainer/devcontainer.json b/samples/inputs/highlight/styling/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..e0b8e9c925 --- /dev/null +++ b/samples/inputs/highlight/styling/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} \ No newline at end of file diff --git a/samples/inputs/highlight/styling/.eslintrc.js b/samples/inputs/highlight/styling/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/inputs/highlight/styling/.eslintrc.js @@ -0,0 +1,75 @@ +// 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", + "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", + "prefer-const": "off", + "prefer-rest-params": "off", + "jsx-a11y/alt-text": "off", + "jsx-a11y/iframe-has-title": "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", + "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", + "prefer-const": "off", + "prefer-rest-params": "off", + "jsx-a11y/alt-text": "off", + "jsx-a11y/iframe-has-title": "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/inputs/highlight/styling/README.md b/samples/inputs/highlight/styling/README.md new file mode 100644 index 0000000000..52b834703c --- /dev/null +++ b/samples/inputs/highlight/styling/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Styling feature using [Highlight](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/inputs/highlight/styling +``` + +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/inputs/highlight/styling/index.html b/samples/inputs/highlight/styling/index.html new file mode 100644 index 0000000000..024b9dcf11 --- /dev/null +++ b/samples/inputs/highlight/styling/index.html @@ -0,0 +1,11 @@ + + + + Highlight Styling + + + +
+ + + \ No newline at end of file diff --git a/samples/inputs/highlight/styling/package.json b/samples/inputs/highlight/styling/package.json new file mode 100644 index 0000000000..b5aaf60211 --- /dev/null +++ b/samples/inputs/highlight/styling/package.json @@ -0,0 +1,42 @@ +{ + "name": "react-highlight-styling", + "description": "This project provides example of Highlight Styling using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "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" + }, + "dependencies": { + "igniteui-dockmanager": "^1.17.0", + "igniteui-react": "^19.6.2", + "igniteui-react-core": "19.6.0-beta.0", + "igniteui-webcomponents": "^7.0.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", + "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/inputs/highlight/styling/sandbox.config.json b/samples/inputs/highlight/styling/sandbox.config.json new file mode 100644 index 0000000000..00acba0c10 --- /dev/null +++ b/samples/inputs/highlight/styling/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/inputs/highlight/styling/src/index.css b/samples/inputs/highlight/styling/src/index.css new file mode 100644 index 0000000000..d794673d37 --- /dev/null +++ b/samples/inputs/highlight/styling/src/index.css @@ -0,0 +1,13 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +igc-highlight { + --background: var(--ig-gray-700); + --foreground: var(--ig-gray-700-contrast); + --background-active: var(--ig-warn-500); + --foreground-active: var(--ig-warn-500-contrast); +} + +igc-divider { + margin-block-start: 20px; +} \ No newline at end of file diff --git a/samples/inputs/highlight/styling/src/index.tsx b/samples/inputs/highlight/styling/src/index.tsx new file mode 100644 index 0000000000..b8112d476f --- /dev/null +++ b/samples/inputs/highlight/styling/src/index.tsx @@ -0,0 +1,48 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import { IgrInput, IgrHighlight, IgrDivider, IgrIconButton } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; +import './index.css'; + +export default class HighlightStyling extends React.Component { + private highlightRef = React.createRef(); + + private onInput = ({ detail }: CustomEvent) => { + if (!this.highlightRef) return; + this.highlightRef.current.searchText = detail; + }; + + private prev = () => { + this.highlightRef?.current.previous({preventScroll: true}); + }; + + private next = () => { + this.highlightRef?.current.next({preventScroll: true}); + }; + + public render(): JSX.Element { + return ( +
+
+ + + + +
+ + +

+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quae doloribus + odit id excepturi ipsum provident eaque dignissimos beatae! Rerum vero + distinctio libero, quasi magni quod natus nesciunt doloremque temporibus + voluptate? +

+ +
+ ); + } +} + +// rendering above class to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/inputs/highlight/styling/tsconfig.json b/samples/inputs/highlight/styling/tsconfig.json new file mode 100644 index 0000000000..e7db8a94f5 --- /dev/null +++ b/samples/inputs/highlight/styling/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", + "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/inputs/highlight/styling/vite.config.js b/samples/inputs/highlight/styling/vite.config.js new file mode 100644 index 0000000000..1744dbc719 --- /dev/null +++ b/samples/inputs/highlight/styling/vite.config.js @@ -0,0 +1,12 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { + outDir: 'build' + }, + server: { + open: false + }, +}); \ No newline at end of file diff --git a/samples/inputs/input/helper-text/package.json b/samples/inputs/input/helper-text/package.json index 68908885dc..1ce4659090 100644 --- a/samples/inputs/input/helper-text/package.json +++ b/samples/inputs/input/helper-text/package.json @@ -15,7 +15,7 @@ "igniteui-dockmanager": "^1.17.0", "igniteui-react": "^19.6.2", "igniteui-react-core": "19.6.0-beta.0", - "igniteui-webcomponents": "^7.0.0", + "igniteui-webcomponents": "^7.1.3", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0"