diff --git a/samples/inputs/badge/size/.devcontainer/devcontainer.json b/samples/inputs/badge/size/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..ff434ecd44 --- /dev/null +++ b/samples/inputs/badge/size/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} diff --git a/samples/inputs/badge/size/.eslintrc.js b/samples/inputs/badge/size/.eslintrc.js new file mode 100644 index 0000000000..d3ed87885e --- /dev/null +++ b/samples/inputs/badge/size/.eslintrc.js @@ -0,0 +1,25 @@ +// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project +module.exports = { + parser: "@typescript-eslint/parser", + parserOptions: { + ecmaVersion: 2020, + sourceType: "module", + ecmaFeatures: { jsx: true } + }, + settings: { + react: { version: "999.999.999" } + }, + extends: [ + "eslint:recommended", + "plugin:react/recommended", + "plugin:@typescript-eslint/recommended" + ], + rules: { + "default-case": "off", + "no-undef": "off", + "no-unused-vars": "off", + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-explicit-any": "off", + "react/react-in-jsx-scope": "off" + } +}; diff --git a/samples/inputs/badge/size/README.md b/samples/inputs/badge/size/README.md new file mode 100644 index 0000000000..43bc5c8900 --- /dev/null +++ b/samples/inputs/badge/size/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Size feature using [Badge](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/badge/size +``` + +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/badge/size/index.html b/samples/inputs/badge/size/index.html new file mode 100644 index 0000000000..c4eae48c06 --- /dev/null +++ b/samples/inputs/badge/size/index.html @@ -0,0 +1,11 @@ + + + + BadgeSize + + + +
+ + + diff --git a/samples/inputs/badge/size/package.json b/samples/inputs/badge/size/package.json new file mode 100644 index 0000000000..4f873e2d37 --- /dev/null +++ b/samples/inputs/badge/size/package.json @@ -0,0 +1,42 @@ +{ + "name": "react-badge-size", + "description": "This project provides example of Badge Size 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.7.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "^7.2.1", + "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/badge/size/sandbox.config.json b/samples/inputs/badge/size/sandbox.config.json new file mode 100644 index 0000000000..49a80d1d8b --- /dev/null +++ b/samples/inputs/badge/size/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} diff --git a/samples/inputs/badge/size/src/index.css b/samples/inputs/badge/size/src/index.css new file mode 100644 index 0000000000..88ccdc5537 --- /dev/null +++ b/samples/inputs/badge/size/src/index.css @@ -0,0 +1,22 @@ +.badge-size { + display: flex; + align-items: center; + gap: 32px; + padding: 16px; +} + +.badge-size-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 12px; +} + +.badge-size-item span { + color: var(--ig-gray-700); + font-size: 14px; +} + +.badge-large { --ig-size: var(--ig-size-large); } +.badge-medium { --ig-size: var(--ig-size-medium); } +.badge-small { --ig-size: var(--ig-size-small); } diff --git a/samples/inputs/badge/size/src/index.tsx b/samples/inputs/badge/size/src/index.tsx new file mode 100644 index 0000000000..8133c6d72f --- /dev/null +++ b/samples/inputs/badge/size/src/index.tsx @@ -0,0 +1,29 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrBadge } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +export default class BadgeSize extends React.Component { + public render(): JSX.Element { + return ( +
+
+ Large + +
+
+ Medium + +
+
+ Small + +
+
+ ); + } +} + +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/inputs/badge/size/tsconfig.json b/samples/inputs/badge/size/tsconfig.json new file mode 100644 index 0000000000..8423942b50 --- /dev/null +++ b/samples/inputs/badge/size/tsconfig.json @@ -0,0 +1,29 @@ +{ + "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"], + "include": ["src"] +} diff --git a/samples/inputs/badge/size/vite.config.js b/samples/inputs/badge/size/vite.config.js new file mode 100644 index 0000000000..342e2b8e11 --- /dev/null +++ b/samples/inputs/badge/size/vite.config.js @@ -0,0 +1,8 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { outDir: 'build' }, + server: { open: false }, +}); diff --git a/samples/inputs/badge/type/.devcontainer/devcontainer.json b/samples/inputs/badge/type/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..ff434ecd44 --- /dev/null +++ b/samples/inputs/badge/type/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} diff --git a/samples/inputs/badge/type/.eslintrc.js b/samples/inputs/badge/type/.eslintrc.js new file mode 100644 index 0000000000..c2cac9dd96 --- /dev/null +++ b/samples/inputs/badge/type/.eslintrc.js @@ -0,0 +1,11 @@ +module.exports = { + parser: "@typescript-eslint/parser", + parserOptions: { ecmaVersion: 2020, sourceType: "module", ecmaFeatures: { jsx: true } }, + settings: { react: { version: "999.999.999" } }, + extends: ["eslint:recommended", "plugin:react/recommended", "plugin:@typescript-eslint/recommended"], + rules: { + "default-case": "off", "no-undef": "off", "no-unused-vars": "off", + "@typescript-eslint/no-unused-vars": "off", "@typescript-eslint/no-explicit-any": "off", + "react/react-in-jsx-scope": "off" + } +}; diff --git a/samples/inputs/badge/type/README.md b/samples/inputs/badge/type/README.md new file mode 100644 index 0000000000..9daca45c43 --- /dev/null +++ b/samples/inputs/badge/type/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Type feature using [Badge](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/badge/type +``` + +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/badge/type/index.html b/samples/inputs/badge/type/index.html new file mode 100644 index 0000000000..e6e3aa5702 --- /dev/null +++ b/samples/inputs/badge/type/index.html @@ -0,0 +1,11 @@ + + + + BadgeType + + + +
+ + + diff --git a/samples/inputs/badge/type/package.json b/samples/inputs/badge/type/package.json new file mode 100644 index 0000000000..15f063ec29 --- /dev/null +++ b/samples/inputs/badge/type/package.json @@ -0,0 +1,37 @@ +{ + "name": "react-badge-type", + "description": "This project provides example of Badge Type 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.7.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "^7.2.1", + "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/badge/type/sandbox.config.json b/samples/inputs/badge/type/sandbox.config.json new file mode 100644 index 0000000000..49a80d1d8b --- /dev/null +++ b/samples/inputs/badge/type/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} diff --git a/samples/inputs/badge/type/src/index.css b/samples/inputs/badge/type/src/index.css new file mode 100644 index 0000000000..a8ae01aa56 --- /dev/null +++ b/samples/inputs/badge/type/src/index.css @@ -0,0 +1,37 @@ +.badge-type { + display: flex; + align-items: center; + gap: 32px; + padding: 16px; +} + +.badge-type-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 12px; +} + +.badge-type-item span { + color: var(--ig-gray-700); + font-size: 14px; +} + +igc-badge { + color: #fff; +} + +igc-badge::part(base) { + color: #fff; +} + +.badge-check { + width: 1em; + height: 1em; + color: #fff; + fill: none; + stroke: currentColor; + stroke-linecap: round; + stroke-linejoin: round; + stroke-width: 3; +} diff --git a/samples/inputs/badge/type/src/index.tsx b/samples/inputs/badge/type/src/index.tsx new file mode 100644 index 0000000000..0f300e64ef --- /dev/null +++ b/samples/inputs/badge/type/src/index.tsx @@ -0,0 +1,33 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrBadge } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +export default class BadgeType extends React.Component { + public render(): JSX.Element { + return ( +
+
+ Number + 12 +
+
+ Icon + + + + + +
+
+ Dot + +
+
+ ); + } +} + +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/inputs/badge/type/tsconfig.json b/samples/inputs/badge/type/tsconfig.json new file mode 100644 index 0000000000..7dfd761170 --- /dev/null +++ b/samples/inputs/badge/type/tsconfig.json @@ -0,0 +1,13 @@ +{ + "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"], + "include": ["src"] +} diff --git a/samples/inputs/badge/type/vite.config.js b/samples/inputs/badge/type/vite.config.js new file mode 100644 index 0000000000..342e2b8e11 --- /dev/null +++ b/samples/inputs/badge/type/vite.config.js @@ -0,0 +1,8 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { outDir: 'build' }, + server: { open: false }, +});