diff --git a/browser/package-lock.json b/browser/package-lock.json index e9ef98c0c9..683c0c2045 100644 --- a/browser/package-lock.json +++ b/browser/package-lock.json @@ -63,6 +63,7 @@ "@typescript-eslint/parser": "^5.51.0", "@vitejs/plugin-react": "^5.0.4", "@vitest/browser": "^3.2.4", + "autoprefixer": "^10.5.4", "browser-sync": "^3.0.4", "del": "^5.1.0", "eslint": "^8.33.0", @@ -91,6 +92,7 @@ "remark-frontmatter": "^2.0.0", "run-sequence": "^2.2.1", "sass": "^1.97.3", + "tailwindcss": "^3.4.19", "ts-loader": "^9.5.4", "ts-node": "^10.9.2", "typescript": "^4.8.4", @@ -103,6 +105,19 @@ "worker-loader": "^3.0.8" } }, + "node_modules/@alloc/quick-lru": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz", + "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/@babel/code-frame": { "version": "7.29.0", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.0.tgz", @@ -3613,6 +3628,13 @@ "node": ">=0.10.0" } }, + "node_modules/any-promise": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz", + "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==", + "dev": true, + "license": "MIT" + }, "node_modules/anymatch": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", @@ -4081,6 +4103,43 @@ "node": ">= 4.5.0" } }, + "node_modules/autoprefixer": { + "version": "10.5.4", + "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.5.4.tgz", + "integrity": "sha512-MaU0U/za7N3r6brxD4YB/l4NSrFzLPlANv6wEuQVaIPlD3L4W9rFcQPbL/EilY9BHhHvhfcz3gInDLrEtWT4EA==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/autoprefixer" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "browserslist": "^4.28.6", + "caniuse-lite": "^1.0.30001806", + "fraction.js": "^5.3.4", + "picocolors": "^1.1.1", + "postcss-value-parser": "^4.2.0" + }, + "bin": { + "autoprefixer": "bin/autoprefixer" + }, + "engines": { + "node": "^10 || ^12 || >=14" + }, + "peerDependencies": { + "postcss": "^8.1.0" + } + }, "node_modules/available-typed-arrays": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz", @@ -4179,9 +4238,9 @@ } }, "node_modules/baseline-browser-mapping": { - "version": "2.10.0", - "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.0.tgz", - "integrity": "sha512-lIyg0szRfYbiy67j9KN8IyeD7q7hcmqnJ1ddWmNt19ItGpNN64mnllmxUNFIOdOm6by97jlL6wfpTTJrmnjWAA==", + "version": "2.11.12", + "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.11.12.tgz", + "integrity": "sha512-r7WnVImvVCeFpf2DOXfy41aPWzeNg3H/A2X4dKmy1QL0MSyyk/e7z8ihJ3N6Nn2PsdhkVlqnEfnUE4a05P2aTA==", "dev": true, "license": "Apache-2.0", "bin": { @@ -4427,9 +4486,9 @@ } }, "node_modules/browserslist": { - "version": "4.28.1", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.1.tgz", - "integrity": "sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==", + "version": "4.28.7", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.7.tgz", + "integrity": "sha512-JxV13hNrFxqjOc8alRbq9dK1MM79NEXYpma2B2J4wAtpWS5zIEIKqWPGCl7N4o7Uc7B7itylh7SuDujATRyyTw==", "dev": true, "funding": [ { @@ -4447,11 +4506,11 @@ ], "license": "MIT", "dependencies": { - "baseline-browser-mapping": "^2.9.0", - "caniuse-lite": "^1.0.30001759", - "electron-to-chromium": "^1.5.263", - "node-releases": "^2.0.27", - "update-browserslist-db": "^1.2.0" + "baseline-browser-mapping": "^2.10.44", + "caniuse-lite": "^1.0.30001806", + "electron-to-chromium": "^1.5.393", + "node-releases": "^2.0.51", + "update-browserslist-db": "^1.2.3" }, "bin": { "browserslist": "cli.js" @@ -4601,10 +4660,20 @@ "node": ">=0.10.0" } }, + "node_modules/camelcase-css": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz", + "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 6" + } + }, "node_modules/caniuse-lite": { - "version": "1.0.30001776", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001776.tgz", - "integrity": "sha512-sg01JDPzZ9jGshqKSckOQthXnYwOEP50jeVFhaSFbZcOy05TiuuaffDOfcwtCisJ9kNQuLBFibYywv2Bgm9osw==", + "version": "1.0.30001806", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001806.tgz", + "integrity": "sha512-72Cuvd95zbSYPKq6Fhg8eDJRlzgWDf7/mtoZv6Qe/DYNCEBdNxoA3+rZAU2ZhGCpZlns3EssFavaZomckT5Uuw==", "dev": true, "funding": [ { @@ -5178,6 +5247,19 @@ "node": ">= 8" } }, + "node_modules/cssesc": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", + "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==", + "dev": true, + "license": "MIT", + "bin": { + "cssesc": "bin/cssesc" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/cssfontparser": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/cssfontparser/-/cssfontparser-1.2.1.tgz", @@ -5569,6 +5651,13 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/didyoumean": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz", + "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==", + "dev": true, + "license": "Apache-2.0" + }, "node_modules/diff": { "version": "4.0.4", "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.4.tgz", @@ -5602,6 +5691,13 @@ "node": ">=8" } }, + "node_modules/dlv": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz", + "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==", + "dev": true, + "license": "MIT" + }, "node_modules/doctrine": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz", @@ -5730,9 +5826,9 @@ "license": "MIT" }, "node_modules/electron-to-chromium": { - "version": "1.5.307", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.307.tgz", - "integrity": "sha512-5z3uFKBWjiNR44nFcYdkcXjKMbg5KXNdciu7mhTPo9tB7NbqSNP2sSnGR+fqknZSCwKkBN+oxiiajWs4dT6ORg==", + "version": "1.5.400", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.400.tgz", + "integrity": "sha512-96EWDNjM59SYflgeV5Ylsf4EMiq1a25YjCnJH7cxn/AF2H3pILRweaUnoLax0yKHWdpOzY6JKEu45e8irqZIHA==", "dev": true, "license": "ISC" }, @@ -7618,6 +7714,20 @@ "node": ">= 0.6" } }, + "node_modules/fraction.js": { + "version": "5.3.4", + "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-5.3.4.tgz", + "integrity": "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": "*" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/rawify" + } + }, "node_modules/fragment-cache": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz", @@ -10691,6 +10801,16 @@ "url": "https://github.com/chalk/supports-color?sponsor=1" } }, + "node_modules/jiti": { + "version": "1.21.7", + "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz", + "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==", + "dev": true, + "license": "MIT", + "bin": { + "jiti": "bin/jiti.js" + } + }, "node_modules/jose": { "version": "6.1.3", "resolved": "https://registry.npmjs.org/jose/-/jose-6.1.3.tgz", @@ -10987,6 +11107,19 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/lilconfig": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz", + "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/antonk52" + } + }, "node_modules/limiter": { "version": "1.1.5", "resolved": "https://registry.npmjs.org/limiter/-/limiter-1.1.5.tgz", @@ -12430,6 +12563,18 @@ "node": ">= 0.10" } }, + "node_modules/mz": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz", + "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "any-promise": "^1.0.0", + "object-assign": "^4.0.1", + "thenify-all": "^1.0.0" + } + }, "node_modules/nan": { "version": "2.25.0", "resolved": "https://registry.npmjs.org/nan/-/nan-2.25.0.tgz", @@ -12564,11 +12709,14 @@ } }, "node_modules/node-releases": { - "version": "2.0.36", - "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.36.tgz", - "integrity": "sha512-TdC8FSgHz8Mwtw9g5L4gR/Sh9XhSP/0DEkQxfEFXOpiul5IiHgHan2VhYYb6agDSfp4KuvltmGApc8HMgUrIkA==", + "version": "2.0.52", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.52.tgz", + "integrity": "sha512-MRlTqhAfoMx/4mhEbPo3Hi02g9LJZaJkka69V6h67Cb1gjrAG0jsTE4CZX1eptNx+VCAwJmfpnDIF4P0Nh1A7A==", "dev": true, - "license": "MIT" + "license": "MIT", + "engines": { + "node": ">=18" + } }, "node_modules/normalize-package-data": { "version": "2.5.0", @@ -12717,6 +12865,16 @@ "node": ">=0.10.0" } }, + "node_modules/object-hash": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz", + "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 6" + } + }, "node_modules/object-inspect": { "version": "1.13.4", "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz", @@ -13351,6 +13509,16 @@ "node": ">=0.10.0" } }, + "node_modules/pirates": { + "version": "4.0.7", + "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz", + "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 6" + } + }, "node_modules/pkce-challenge": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/pkce-challenge/-/pkce-challenge-5.0.1.tgz", @@ -13519,6 +13687,162 @@ "node": "^10 || ^12 || >=14" } }, + "node_modules/postcss-import": { + "version": "15.1.0", + "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz", + "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==", + "dev": true, + "license": "MIT", + "dependencies": { + "postcss-value-parser": "^4.0.0", + "read-cache": "^1.0.0", + "resolve": "^1.1.7" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "postcss": "^8.0.0" + } + }, + "node_modules/postcss-import/node_modules/resolve": { + "version": "1.22.12", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.12.tgz", + "integrity": "sha512-TyeJ1zif53BPfHootBGwPRYT1RUt6oGWsaQr8UyZW/eAm9bKoijtvruSDEmZHm92CwS9nj7/fWttqPCgzep8CA==", + "dev": true, + "license": "MIT", + "dependencies": { + "es-errors": "^1.3.0", + "is-core-module": "^2.16.1", + "path-parse": "^1.0.7", + "supports-preserve-symlinks-flag": "^1.0.0" + }, + "bin": { + "resolve": "bin/resolve" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/postcss-js": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.1.0.tgz", + "integrity": "sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "camelcase-css": "^2.0.1" + }, + "engines": { + "node": "^12 || ^14 || >= 16" + }, + "peerDependencies": { + "postcss": "^8.4.21" + } + }, + "node_modules/postcss-load-config": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-6.0.1.tgz", + "integrity": "sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "lilconfig": "^3.1.1" + }, + "engines": { + "node": ">= 18" + }, + "peerDependencies": { + "jiti": ">=1.21.0", + "postcss": ">=8.0.9", + "tsx": "^4.8.1", + "yaml": "^2.4.2" + }, + "peerDependenciesMeta": { + "jiti": { + "optional": true + }, + "postcss": { + "optional": true + }, + "tsx": { + "optional": true + }, + "yaml": { + "optional": true + } + } + }, + "node_modules/postcss-nested": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz", + "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "postcss-selector-parser": "^6.1.1" + }, + "engines": { + "node": ">=12.0" + }, + "peerDependencies": { + "postcss": "^8.2.14" + } + }, + "node_modules/postcss-selector-parser": { + "version": "6.1.4", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.4.tgz", + "integrity": "sha512-bIoJLOmjCO1S9XdY/DcnR5hJxvrDir1PbGChrzXG3vw0/FOliy/fA3dmdhQ441kah4gKv+TwckGzex6wNS5cnQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "cssesc": "^3.0.0", + "util-deprecate": "^1.0.2" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/postcss-value-parser": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", + "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", + "dev": true, + "license": "MIT" + }, "node_modules/prelude-ls": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", @@ -13962,6 +14286,16 @@ "react-dom": ">=16.6.0" } }, + "node_modules/read-cache": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", + "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==", + "dev": true, + "license": "MIT", + "dependencies": { + "pify": "^2.3.0" + } + }, "node_modules/read-pkg": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz", @@ -16858,6 +17192,39 @@ "dev": true, "license": "MIT" }, + "node_modules/sucrase": { + "version": "3.35.1", + "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.1.tgz", + "integrity": "sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@jridgewell/gen-mapping": "^0.3.2", + "commander": "^4.0.0", + "lines-and-columns": "^1.1.6", + "mz": "^2.7.0", + "pirates": "^4.0.1", + "tinyglobby": "^0.2.11", + "ts-interface-checker": "^0.1.9" + }, + "bin": { + "sucrase": "bin/sucrase", + "sucrase-node": "bin/sucrase-node" + }, + "engines": { + "node": ">=16 || 14 >=14.17" + } + }, + "node_modules/sucrase/node_modules/commander": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz", + "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 6" + } + }, "node_modules/supports-color": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", @@ -16916,6 +17283,86 @@ "node": ">=16.0.0" } }, + "node_modules/tailwindcss": { + "version": "3.4.19", + "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.19.tgz", + "integrity": "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@alloc/quick-lru": "^5.2.0", + "arg": "^5.0.2", + "chokidar": "^3.6.0", + "didyoumean": "^1.2.2", + "dlv": "^1.1.3", + "fast-glob": "^3.3.2", + "glob-parent": "^6.0.2", + "is-glob": "^4.0.3", + "jiti": "^1.21.7", + "lilconfig": "^3.1.3", + "micromatch": "^4.0.8", + "normalize-path": "^3.0.0", + "object-hash": "^3.0.0", + "picocolors": "^1.1.1", + "postcss": "^8.4.47", + "postcss-import": "^15.1.0", + "postcss-js": "^4.0.1", + "postcss-load-config": "^4.0.2 || ^5.0 || ^6.0", + "postcss-nested": "^6.2.0", + "postcss-selector-parser": "^6.1.2", + "resolve": "^1.22.8", + "sucrase": "^3.35.0" + }, + "bin": { + "tailwind": "lib/cli.js", + "tailwindcss": "lib/cli.js" + }, + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/tailwindcss/node_modules/arg": { + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz", + "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==", + "dev": true, + "license": "MIT" + }, + "node_modules/tailwindcss/node_modules/glob-parent": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz", + "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==", + "dev": true, + "license": "ISC", + "dependencies": { + "is-glob": "^4.0.3" + }, + "engines": { + "node": ">=10.13.0" + } + }, + "node_modules/tailwindcss/node_modules/resolve": { + "version": "1.22.12", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.12.tgz", + "integrity": "sha512-TyeJ1zif53BPfHootBGwPRYT1RUt6oGWsaQr8UyZW/eAm9bKoijtvruSDEmZHm92CwS9nj7/fWttqPCgzep8CA==", + "dev": true, + "license": "MIT", + "dependencies": { + "es-errors": "^1.3.0", + "is-core-module": "^2.16.1", + "path-parse": "^1.0.7", + "supports-preserve-symlinks-flag": "^1.0.0" + }, + "bin": { + "resolve": "bin/resolve" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/tapable": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz", @@ -17074,6 +17521,29 @@ "url": "https://bevry.me/fund" } }, + "node_modules/thenify": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz", + "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==", + "dev": true, + "license": "MIT", + "dependencies": { + "any-promise": "^1.0.0" + } + }, + "node_modules/thenify-all": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz", + "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==", + "dev": true, + "license": "MIT", + "dependencies": { + "thenify": ">= 3.1.0 < 4" + }, + "engines": { + "node": ">=0.8" + } + }, "node_modules/through": { "version": "2.3.8", "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz", @@ -17388,6 +17858,13 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/ts-interface-checker": { + "version": "0.1.13", + "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz", + "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==", + "dev": true, + "license": "Apache-2.0" + }, "node_modules/ts-loader": { "version": "9.5.4", "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-9.5.4.tgz", diff --git a/browser/package.json b/browser/package.json index 7138143a65..262ab76eb7 100644 --- a/browser/package.json +++ b/browser/package.json @@ -71,6 +71,7 @@ "@typescript-eslint/parser": "^5.51.0", "@vitejs/plugin-react": "^5.0.4", "@vitest/browser": "^3.2.4", + "autoprefixer": "^10.5.4", "browser-sync": "^3.0.4", "del": "^5.1.0", "eslint": "^8.33.0", @@ -99,6 +100,7 @@ "remark-frontmatter": "^2.0.0", "run-sequence": "^2.2.1", "sass": "^1.97.3", + "tailwindcss": "^3.4.19", "ts-loader": "^9.5.4", "ts-node": "^10.9.2", "typescript": "^4.8.4", diff --git a/browser/postcss.config.cjs b/browser/postcss.config.cjs new file mode 100644 index 0000000000..12a703d900 --- /dev/null +++ b/browser/postcss.config.cjs @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +}; diff --git a/browser/public/meta.json b/browser/public/meta.json index 4d9f02110e..b723637fc9 100644 --- a/browser/public/meta.json +++ b/browser/public/meta.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-06-16 16:54:44","note":"this file is auto-generated"} \ No newline at end of file +{"version":"23.2.915","date":"2026-08-03 17:55:36","note":"this file is auto-generated"} \ No newline at end of file diff --git a/browser/src/index.css b/browser/src/index.css index 65ceb68061..83ad03b552 100644 --- a/browser/src/index.css +++ b/browser/src/index.css @@ -1,3 +1,5 @@ +@tailwind utilities; + .igx-grid__td img[src*="dl.infragistics.com/x/img/people"] { width: 62px; height: 62px; diff --git a/browser/src/navigation/SamplesBrowser.json b/browser/src/navigation/SamplesBrowser.json index 4d9f02110e..b723637fc9 100644 --- a/browser/src/navigation/SamplesBrowser.json +++ b/browser/src/navigation/SamplesBrowser.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-06-16 16:54:44","note":"this file is auto-generated"} \ No newline at end of file +{"version":"23.2.915","date":"2026-08-03 17:55:36","note":"this file is auto-generated"} \ No newline at end of file diff --git a/browser/tailwind.config.cjs b/browser/tailwind.config.cjs new file mode 100644 index 0000000000..d8cda2403d --- /dev/null +++ b/browser/tailwind.config.cjs @@ -0,0 +1,9 @@ +module.exports = { + content: [ + "./src/**/*.{ts,tsx}", + "../samples/layouts/avatar/tailwind-styling/src/**/*.{ts,tsx}", + ], + corePlugins: { + preflight: false, + }, +}; diff --git a/samples/layouts/avatar/icon/src/index.css b/samples/layouts/avatar/icon/src/index.css deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/samples/layouts/avatar/icon/src/index.tsx b/samples/layouts/avatar/icon/src/index.tsx deleted file mode 100644 index 706a5ceac4..0000000000 --- a/samples/layouts/avatar/icon/src/index.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import React, { useEffect } from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import { IgrAvatar, IgrIcon, registerIconFromText } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/bootstrap.css'; - - -const homeIcon = - ''; - -export default function AvatarIcon() { - - useEffect(() => { - registerIconFromText("home", homeIcon, "material"); - }, []); - - return ( -
- - - -
- ); -} - -// rendering above component to the React DOM -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); diff --git a/samples/layouts/avatar/image/src/index.tsx b/samples/layouts/avatar/image/src/index.tsx index e14eb26bc6..70af5a5a41 100644 --- a/samples/layouts/avatar/image/src/index.tsx +++ b/samples/layouts/avatar/image/src/index.tsx @@ -8,7 +8,7 @@ export default function AvatarImage() { return (
- +
); } diff --git a/samples/layouts/avatar/initials/src/index.css b/samples/layouts/avatar/initials/src/index.css deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/samples/layouts/avatar/initials/src/index.tsx b/samples/layouts/avatar/initials/src/index.tsx deleted file mode 100644 index 402d22ac49..0000000000 --- a/samples/layouts/avatar/initials/src/index.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import { IgrAvatar } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/bootstrap.css'; - -export default function AvatarInitials() { - - return ( -
- -
- ); -} - -// rendering above component to the React DOM -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); diff --git a/samples/layouts/avatar/icon/.devcontainer/devcontainer.json b/samples/layouts/avatar/overview/.devcontainer/devcontainer.json similarity index 100% rename from samples/layouts/avatar/icon/.devcontainer/devcontainer.json rename to samples/layouts/avatar/overview/.devcontainer/devcontainer.json diff --git a/samples/layouts/avatar/icon/.eslintrc.js b/samples/layouts/avatar/overview/.eslintrc.js similarity index 100% rename from samples/layouts/avatar/icon/.eslintrc.js rename to samples/layouts/avatar/overview/.eslintrc.js diff --git a/samples/layouts/avatar/initials/README.md b/samples/layouts/avatar/overview/README.md similarity index 91% rename from samples/layouts/avatar/initials/README.md rename to samples/layouts/avatar/overview/README.md index 37058af143..9a54ce74bc 100644 --- a/samples/layouts/avatar/initials/README.md +++ b/samples/layouts/avatar/overview/README.md @@ -1,7 +1,7 @@ -This folder contains implementation of React application with example of Initials feature using [Avatar](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. +This folder contains implementation of React application with example of Overview feature using [Avatar](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. @@ -12,10 +12,10 @@ This folder contains implementation of React application with example of Initial View Code - + Run Sample - + Run Sample @@ -34,7 +34,7 @@ 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/layouts/avatar/initials +cd ./samples/layouts/avatar/overview ``` open above folder in VS Code or type: diff --git a/samples/layouts/avatar/initials/index.html b/samples/layouts/avatar/overview/index.html similarity index 85% rename from samples/layouts/avatar/initials/index.html rename to samples/layouts/avatar/overview/index.html index 84267d5944..283cc238f6 100644 --- a/samples/layouts/avatar/initials/index.html +++ b/samples/layouts/avatar/overview/index.html @@ -1,11 +1,11 @@ - AvatarInitials + AvatarOverview
- \ No newline at end of file + diff --git a/samples/layouts/avatar/initials/package.json b/samples/layouts/avatar/overview/package.json similarity index 87% rename from samples/layouts/avatar/initials/package.json rename to samples/layouts/avatar/overview/package.json index a5a7b54e4d..9be32ebca8 100644 --- a/samples/layouts/avatar/initials/package.json +++ b/samples/layouts/avatar/overview/package.json @@ -1,6 +1,6 @@ { - "name": "react-avatar-initials", - "description": "This project provides example of Avatar Initials using Infragistics React components", + "name": "react-avatar-overview", + "description": "This project provides example of Avatar Overview using Infragistics React components", "author": "Infragistics", "homepage": ".", "version": "1.4.0", diff --git a/samples/layouts/avatar/icon/sandbox.config.json b/samples/layouts/avatar/overview/sandbox.config.json similarity index 100% rename from samples/layouts/avatar/icon/sandbox.config.json rename to samples/layouts/avatar/overview/sandbox.config.json diff --git a/samples/layouts/avatar/overview/src/index.css b/samples/layouts/avatar/overview/src/index.css new file mode 100644 index 0000000000..e5faf87285 --- /dev/null +++ b/samples/layouts/avatar/overview/src/index.css @@ -0,0 +1,49 @@ +.avatar-overview-sample { + display: flex; + align-items: center; + justify-content: center; + gap: 90px; +} + +.size-large { + --ig-size: var(--ig-size-large); +} + +.avatar-with-badge { + position: relative; + display: inline-flex; +} + +.avatar-status { + position: absolute; + right: 6px; + bottom: 6px; +} + +.avatar-stack { + display: inline-flex; + align-items: center; +} + +.avatar-stack .size-large { + margin-left: -24px; +} + +.avatar-stack .size-large:first-child { + margin-left: 0; +} + +.avatar-stack .size-large::part(base) { + border: 4px solid #fff; + box-sizing: border-box; +} + +.avatar-stack .size-large:last-child { + --ig-avatar-background: #e8eef6; + --ig-avatar-color: #6f8097; +} + +.avatar-stack .size-large:last-child::part(initials) { + font-size: 32px; + font-weight: 500; +} diff --git a/samples/layouts/avatar/overview/src/index.tsx b/samples/layouts/avatar/overview/src/index.tsx new file mode 100644 index 0000000000..2892a11193 --- /dev/null +++ b/samples/layouts/avatar/overview/src/index.tsx @@ -0,0 +1,62 @@ +import React from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; +import { IgrAvatar, IgrBadge } from "igniteui-react"; +import "igniteui-webcomponents/themes/light/material.css"; + +export default function AvatarOverview() { + return ( +
+ + + + + + + + + + + +
+ ); +} + +// rendering above component to the React DOM +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); diff --git a/samples/layouts/avatar/icon/tsconfig.json b/samples/layouts/avatar/overview/tsconfig.json similarity index 100% rename from samples/layouts/avatar/icon/tsconfig.json rename to samples/layouts/avatar/overview/tsconfig.json diff --git a/samples/layouts/avatar/icon/vite.config.js b/samples/layouts/avatar/overview/vite.config.js similarity index 100% rename from samples/layouts/avatar/icon/vite.config.js rename to samples/layouts/avatar/overview/vite.config.js diff --git a/samples/layouts/avatar/shape/src/index.css b/samples/layouts/avatar/shape/src/index.css index e69de29bb2..a477d54e9d 100644 --- a/samples/layouts/avatar/shape/src/index.css +++ b/samples/layouts/avatar/shape/src/index.css @@ -0,0 +1,52 @@ +.avatar-overview-sample { + display: flex; + align-items: center; + justify-content: center; + gap: 90px; + min-height: 100vh; +} + +.size-small { + --ig-size: var(--ig-size-small); +} + +.avatar-variant { + display: inline-flex; + flex-direction: column; + align-items: center; + gap: 8px; +} + +.avatar-label { + color: var(--ig-gray-600); + font-size: 0.875rem; + line-height: 1.25rem; +} + +.avatar-with-badge { + position: relative; + display: inline-flex; +} + +.avatar-status { + --size: 18px; + position: absolute; + right: -4px; + bottom: -4px; + font-size: 0.75rem; + line-height: 1; +} + +.avatar-dot-badge { + --size: 12px; + right: 3px; + bottom: 3px; +} + +.avatar-count-badge { + --ig-badge-text-color: #ffffff; +} + +.avatar-check-badge { + --ig-badge-icon-color: #ffffff; +} diff --git a/samples/layouts/avatar/shape/src/index.tsx b/samples/layouts/avatar/shape/src/index.tsx index 62fe5a460a..adaaac1538 100644 --- a/samples/layouts/avatar/shape/src/index.tsx +++ b/samples/layouts/avatar/shape/src/index.tsx @@ -1,27 +1,86 @@ -import React, { useEffect } from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import { IgrAvatar, IgrIcon, registerIconFromText } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/bootstrap.css'; +import React, { useEffect } from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; +import { + IgrAvatar, + IgrBadge, + IgrIcon, + registerIconFromText, +} from "igniteui-react"; +import "igniteui-webcomponents/themes/light/material.css"; -const homeIcon = - ''; +const mailIcon = + ''; + +const checkIcon = + ''; export default function AvatarShape() { + useEffect(() => { + registerIconFromText("mail", mailIcon, "material"); + registerIconFromText("check", checkIcon, "material"); + }, []); + + return ( +
+
+ + + + + Circle +
+ +
+ + + + + + 2 + + + Square +
- useEffect(() => { - registerIconFromText("home", homeIcon, "material"); - }, []); - - return ( -
- - - -
- ); +
+ + + + + + + Rounded +
+
+ ); } // rendering above component to the React DOM -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); diff --git a/samples/layouts/avatar/size/src/index.css b/samples/layouts/avatar/size/src/index.css index 325c9f8e57..00002afa14 100644 --- a/samples/layouts/avatar/size/src/index.css +++ b/samples/layouts/avatar/size/src/index.css @@ -1,16 +1,60 @@ -.size-small { - --ig-size: var(--ig-size-small); +.avatar-overview-sample { + display: flex; + align-items: center; + justify-content: center; + gap: 90px; + min-height: 100vh; } +.size-large { + --ig-size: var(--ig-size-large); +} .size-medium { - --ig-size: var(--ig-size-medium); + --ig-size: var(--ig-size-medium); +} +.size-small { + --ig-size: var(--ig-size-small); } -.size-large { - --ig-size: var(--ig-size-large); +.avatar-variant { + display: inline-flex; + flex-direction: column; + align-items: center; + gap: 8px; +} + +.avatar-with-badge { + width: 88px; + height: 88px; + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; +} + +.avatar-label { + color: var(--ig-gray-600); + font-size: 0.875rem; + line-height: 1.25rem; +} + +.avatar-status { + --size: 18px; + position: absolute; + right: var(--badge-offset); + bottom: var(--badge-offset); + font-size: 0.75rem; + line-height: 1; +} + +.avatar-with-badge:has(.size-large) { + --badge-offset: 7px; +} + +.avatar-with-badge:has(.size-medium) { + --badge-offset: 15px; } -.sample { - flex-direction: row; - gap: 10px; +.avatar-with-badge:has(.size-small) { + --badge-offset: 24px; } diff --git a/samples/layouts/avatar/size/src/index.tsx b/samples/layouts/avatar/size/src/index.tsx index dfb5f9bb60..e2cff6bac6 100644 --- a/samples/layouts/avatar/size/src/index.tsx +++ b/samples/layouts/avatar/size/src/index.tsx @@ -1,20 +1,69 @@ -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import { IgrAvatar } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/bootstrap.css'; +import React from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; +import { IgrAvatar, IgrBadge } from "igniteui-react"; +import "igniteui-webcomponents/themes/light/material.css"; export default function AvatarSize() { + return ( +
+
+ + + + + Large +
- return ( -
- - - -
- ); +
+ + + + + Medium +
+ +
+ + + + + Small +
+
+ ); } // rendering above component to the React DOM -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); diff --git a/samples/layouts/avatar/styling/src/index.css b/samples/layouts/avatar/styling/src/index.css index df45dd1716..4f5edce1c6 100644 --- a/samples/layouts/avatar/styling/src/index.css +++ b/samples/layouts/avatar/styling/src/index.css @@ -1,51 +1,43 @@ -.sizes .size-small { - --ig-size: var(--ig-size-small); +.sample { + display: flex; + align-items: center; + justify-content: center; } -.sizes .size-medium { - --ig-size: var(--ig-size-medium); +.chat-list { + width: 344px; + max-width: 100%; } -.sizes .size-large, -.size-large { - --ig-size: var(--ig-size-large); +.size-small { + --ig-size: var(--ig-size-small); } -.sample { - display: flex; - flex-direction: row; - justify-content: space-around; - gap: 10px; - margin-top: 20px; +.size-medium { + --ig-size: var(--ig-size-medium); } -.sizes { - display: flex; - flex-direction: row; - gap: 10px; +.size-large { + --ig-size: var(--ig-size-large); } -igc-avatar { - --ig-avatar-background: var(--ig-success-100); +.avatar-with-badge { + position: relative; + display: inline-flex; } -igc-avatar::part(base) { - border: 2px solid var(--ig-error-500); +.avatar-status { + --ig-badge-icon-color: #ffffff; + position: absolute; + right: -4px; + bottom: -4px; } -igc-avatar::part(initials) { - color: var(--ig-success-500-contrast); - background: var(--ig-error-500); - padding: 5px 10px; - margin: 10px; - border-radius: 50px; - /* border: 1px solid greenyellow; */ +.avatar-muted-badge { + --ig-badge-background-color: var(--ig-gray-300); + --ig-badge-icon-color: var(--ig-gray-700); } -igc-avatar::part(image) { - border-radius: 20px; - padding: 5px; - border: 2px solid var(--ig-primary-500); +.avatar-muted { + --ig-avatar-background: #D2DBE8; } - - diff --git a/samples/layouts/avatar/styling/src/index.tsx b/samples/layouts/avatar/styling/src/index.tsx index 3a751e8659..0d427044c9 100644 --- a/samples/layouts/avatar/styling/src/index.tsx +++ b/samples/layouts/avatar/styling/src/index.tsx @@ -1,36 +1,187 @@ -import React, { useEffect } from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import { IgrAvatar, IgrIcon, registerIconFromText } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/bootstrap.css'; +import React, { useEffect } from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; +import { + IgrList, + IgrListHeader, + IgrListItem, + IgrAvatar, + IgrBadge, + IgrIcon, + registerIconFromText, +} from "igniteui-react"; +import "igniteui-webcomponents/themes/light/material.css"; +const checkIcon = + ''; -const homeIcon = - ''; +const calendarIcon = + ''; + +const xIcon = + ''; + +const horizontalRuleIcon = + ''; + +const groupIcon = + ''; + +type AvatarListItem = { + title: string; + subtitle: string; + end: string; + avatar: { + src?: string; + icon?: string; + initials?: string; + alt: string; + className?: string; + }; + badge?: { + icon: string; + variant: "success" | "info" | "warning" | "danger" | "primary"; + className?: string; + }; +}; + +type AvatarListSection = { + header: string; + items: AvatarListItem[]; +}; + +const sections: AvatarListSection[] = [ + { + header: "Chats", + items: [ + { + title: "Nick Evans", + subtitle: "Hi Samira, thanks for the ...", + end: "9:44 AM", + avatar: { + src: "https://dl.infragistics.com/x/img/avatars/avatar-profile-07.png", + alt: "A profile photo of Nick Evans.", + }, + badge: { + icon: "check", + variant: "success", + }, + }, + { + title: "James Ford", + subtitle: "I'll send the text and im ...", + end: "8:30 AM", + avatar: { + initials: "JF", + alt: "A profile photo of Nick Evans.", + className: "avatar-muted", + }, + badge: { + icon: "x", + variant: "primary", + className: "avatar-muted-badge", + }, + }, + { + title: "Kate Porter", + subtitle: "That's great!", + end: "Yesterday", + avatar: { + src: "https://dl.infragistics.com/x/img/avatars/avatar-profile-08.png", + alt: "A profile photo of Nick Evans.", + }, + badge: { + icon: "horizontalRule", + variant: "danger", + }, + }, + ], + }, + { + header: "Meetings", + items: [ + { + title: "Weekly Meeting", + subtitle: "https://www.infra.com", + end: "Monday", + avatar: { + icon: "calendar", + alt: "Calendar Icon.", + }, + }, + { + title: "Design Discussion", + subtitle: "https://www.infra.com", + end: "11:30 AM", + avatar: { + icon: "group", + alt: "Group Icon.", + }, + }, + ], + }, +]; + +function renderAvatar(item: AvatarListItem) { + return ( + + {item.avatar.icon && ( + + )} + + ); +} export default function AvatarStyling() { + useEffect(() => { + registerIconFromText("calendar", calendarIcon, "material"); + registerIconFromText("check", checkIcon, "material"); + registerIconFromText("x", xIcon, "material"); + registerIconFromText("horizontalRule", horizontalRuleIcon, "material"); + registerIconFromText("group", groupIcon, "material"); + }, []); - useEffect(() => { - registerIconFromText("home", homeIcon, "material"); - }, []); - - return ( -
- - - -
- - - -
-
- ); + return ( +
+ + {sections.map((section) => ( + + {section.header} + {section.items.map((item) => ( + +
+ {renderAvatar(item)} + {item.badge && ( + + + + )} +
+

{item.title}

+ {item.subtitle} +
{item.end}
+ + ))} + + ))} + +
+ ); } // rendering above component to the React DOM -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); diff --git a/samples/layouts/avatar/initials/.devcontainer/devcontainer.json b/samples/layouts/avatar/tailwind-styling/.devcontainer/devcontainer.json similarity index 100% rename from samples/layouts/avatar/initials/.devcontainer/devcontainer.json rename to samples/layouts/avatar/tailwind-styling/.devcontainer/devcontainer.json diff --git a/samples/layouts/avatar/initials/.eslintrc.js b/samples/layouts/avatar/tailwind-styling/.eslintrc.js similarity index 100% rename from samples/layouts/avatar/initials/.eslintrc.js rename to samples/layouts/avatar/tailwind-styling/.eslintrc.js diff --git a/samples/layouts/avatar/tailwind-styling/README.md b/samples/layouts/avatar/tailwind-styling/README.md new file mode 100644 index 0000000000..782eb476b1 --- /dev/null +++ b/samples/layouts/avatar/tailwind-styling/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Tailwind Styling feature using [Avatar](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/layouts/avatar/tailwind-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/layouts/avatar/tailwind-styling/index.html b/samples/layouts/avatar/tailwind-styling/index.html new file mode 100644 index 0000000000..e5ae645b18 --- /dev/null +++ b/samples/layouts/avatar/tailwind-styling/index.html @@ -0,0 +1,11 @@ + + + + AvatarTailwindStyling + + + +
+ + + diff --git a/samples/layouts/avatar/tailwind-styling/package.json b/samples/layouts/avatar/tailwind-styling/package.json new file mode 100644 index 0000000000..c248e8369d --- /dev/null +++ b/samples/layouts/avatar/tailwind-styling/package.json @@ -0,0 +1,44 @@ +{ + "name": "react-avatar-tailwind-styling", + "description": "This project provides example of Avatar Tailwind 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.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", + "autoprefixer": "^10.5.4", + "tailwindcss": "^3.4.19", + "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/layouts/avatar/tailwind-styling/postcss.config.cjs b/samples/layouts/avatar/tailwind-styling/postcss.config.cjs new file mode 100644 index 0000000000..12a703d900 --- /dev/null +++ b/samples/layouts/avatar/tailwind-styling/postcss.config.cjs @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +}; diff --git a/samples/layouts/avatar/initials/sandbox.config.json b/samples/layouts/avatar/tailwind-styling/sandbox.config.json similarity index 100% rename from samples/layouts/avatar/initials/sandbox.config.json rename to samples/layouts/avatar/tailwind-styling/sandbox.config.json diff --git a/samples/layouts/avatar/tailwind-styling/src/icons.ts b/samples/layouts/avatar/tailwind-styling/src/icons.ts new file mode 100644 index 0000000000..1e53ff276b --- /dev/null +++ b/samples/layouts/avatar/tailwind-styling/src/icons.ts @@ -0,0 +1,11 @@ +export const instagramIcon = + ''; + +export const berealIcon = + ''; + +export const threadsIcon = + ''; + +export const plusIcon = + ''; diff --git a/samples/layouts/avatar/tailwind-styling/src/index.css b/samples/layouts/avatar/tailwind-styling/src/index.css new file mode 100644 index 0000000000..65dd5f63a7 --- /dev/null +++ b/samples/layouts/avatar/tailwind-styling/src/index.css @@ -0,0 +1 @@ +@tailwind utilities; diff --git a/samples/layouts/avatar/tailwind-styling/src/index.tsx b/samples/layouts/avatar/tailwind-styling/src/index.tsx new file mode 100644 index 0000000000..7958985cb6 --- /dev/null +++ b/samples/layouts/avatar/tailwind-styling/src/index.tsx @@ -0,0 +1,180 @@ +import React, { useEffect } from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; +import { + IgrAvatar, + IgrButton, + IgrCard, + IgrCardActions, + IgrCardContent, + IgrCardHeader, + IgrCardMedia, + IgrDivider, + IgrIcon, + IgrIconButton, + registerIconFromText, +} from "igniteui-react"; +import "igniteui-webcomponents/themes/light/material.css"; +import { berealIcon, instagramIcon, plusIcon, threadsIcon } from "./icons"; + +const profileStats = [ + { value: "23.9K", label: "Likes" }, + { value: "163", label: "Posts" }, + { value: "23.9K", label: "Views" }, +]; + +export default function AvatarTailwindStyling() { + useEffect(() => { + registerIconFromText("instagram", instagramIcon, "material"); + registerIconFromText("bereal", berealIcon, "material"); + registerIconFromText("threads", threadsIcon, "material"); + registerIconFromText("plus", plusIcon, "material"); + }, []); + + return ( +
+ + + Cafe interior + + + + Kate Thompson + + +

+ 3D Artist. Turning polygons into worlds and immersive digital + realities +

+
+ {profileStats.map((stat, index) => ( + +
+ + {stat.value} + + + {stat.label} + +
+ {index < profileStats.length - 1 && ( + + )} + + ))} +
+ + + + + FOLLOW + + + +
+ + + +
+ + + + + + + + + Kate Thompson + + +

+ 3D Artist. Turning polygons into worlds and immersive digital + realities +

+
+ {profileStats.map((stat, index) => ( + +
+ + {stat.value} + + + {stat.label} + +
+ {index < profileStats.length - 1 && ( + + )} + + ))} +
+ + + + + FOLLOW + + + +
+ + + +
+ + +
+ ); +} + +// rendering above component to the React DOM +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); diff --git a/samples/layouts/avatar/tailwind-styling/tailwind.config.cjs b/samples/layouts/avatar/tailwind-styling/tailwind.config.cjs new file mode 100644 index 0000000000..cb2e965762 --- /dev/null +++ b/samples/layouts/avatar/tailwind-styling/tailwind.config.cjs @@ -0,0 +1,6 @@ +module.exports = { + content: ["./src/**/*.{ts,tsx}"], + corePlugins: { + preflight: false, + }, +}; diff --git a/samples/layouts/avatar/initials/tsconfig.json b/samples/layouts/avatar/tailwind-styling/tsconfig.json similarity index 100% rename from samples/layouts/avatar/initials/tsconfig.json rename to samples/layouts/avatar/tailwind-styling/tsconfig.json diff --git a/samples/layouts/avatar/initials/vite.config.js b/samples/layouts/avatar/tailwind-styling/vite.config.js similarity index 100% rename from samples/layouts/avatar/initials/vite.config.js rename to samples/layouts/avatar/tailwind-styling/vite.config.js diff --git a/samples/layouts/avatar/variants/.devcontainer/devcontainer.json b/samples/layouts/avatar/variants/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..e0b8e9c925 --- /dev/null +++ b/samples/layouts/avatar/variants/.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/layouts/avatar/variants/.eslintrc.js b/samples/layouts/avatar/variants/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/layouts/avatar/variants/.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/layouts/avatar/icon/README.md b/samples/layouts/avatar/variants/README.md similarity index 86% rename from samples/layouts/avatar/icon/README.md rename to samples/layouts/avatar/variants/README.md index f5bed3792e..1c79b80274 100644 --- a/samples/layouts/avatar/icon/README.md +++ b/samples/layouts/avatar/variants/README.md @@ -1,7 +1,7 @@ -This folder contains implementation of React application with example of Icon feature using [Avatar](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. +This folder contains implementation of React application with example of Variants feature using [Avatar](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. @@ -12,10 +12,10 @@ This folder contains implementation of React application with example of Icon fe View Code - + Run Sample - + Run Sample @@ -34,7 +34,7 @@ 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/layouts/avatar/icon +cd ./samples/layouts/avatar/variants ``` open above folder in VS Code or type: diff --git a/samples/layouts/avatar/icon/index.html b/samples/layouts/avatar/variants/index.html similarity index 85% rename from samples/layouts/avatar/icon/index.html rename to samples/layouts/avatar/variants/index.html index 289c161876..b4669ae346 100644 --- a/samples/layouts/avatar/icon/index.html +++ b/samples/layouts/avatar/variants/index.html @@ -1,11 +1,11 @@ - AvatarIcon + AvatarVariants
- \ No newline at end of file + diff --git a/samples/layouts/avatar/icon/package.json b/samples/layouts/avatar/variants/package.json similarity index 86% rename from samples/layouts/avatar/icon/package.json rename to samples/layouts/avatar/variants/package.json index 388946038c..2edc46b8a0 100644 --- a/samples/layouts/avatar/icon/package.json +++ b/samples/layouts/avatar/variants/package.json @@ -1,6 +1,6 @@ { - "name": "react-date-picker-overview", - "description": "This project provides example of Date Picker Overview using Infragistics React components", + "name": "react-avatar-variants", + "description": "This project provides example of Avatar Variants using Infragistics React components", "author": "Infragistics", "homepage": ".", "version": "1.4.0", diff --git a/samples/layouts/avatar/variants/sandbox.config.json b/samples/layouts/avatar/variants/sandbox.config.json new file mode 100644 index 0000000000..00acba0c10 --- /dev/null +++ b/samples/layouts/avatar/variants/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/layouts/avatar/variants/src/index.css b/samples/layouts/avatar/variants/src/index.css new file mode 100644 index 0000000000..a477d54e9d --- /dev/null +++ b/samples/layouts/avatar/variants/src/index.css @@ -0,0 +1,52 @@ +.avatar-overview-sample { + display: flex; + align-items: center; + justify-content: center; + gap: 90px; + min-height: 100vh; +} + +.size-small { + --ig-size: var(--ig-size-small); +} + +.avatar-variant { + display: inline-flex; + flex-direction: column; + align-items: center; + gap: 8px; +} + +.avatar-label { + color: var(--ig-gray-600); + font-size: 0.875rem; + line-height: 1.25rem; +} + +.avatar-with-badge { + position: relative; + display: inline-flex; +} + +.avatar-status { + --size: 18px; + position: absolute; + right: -4px; + bottom: -4px; + font-size: 0.75rem; + line-height: 1; +} + +.avatar-dot-badge { + --size: 12px; + right: 3px; + bottom: 3px; +} + +.avatar-count-badge { + --ig-badge-text-color: #ffffff; +} + +.avatar-check-badge { + --ig-badge-icon-color: #ffffff; +} diff --git a/samples/layouts/avatar/variants/src/index.tsx b/samples/layouts/avatar/variants/src/index.tsx new file mode 100644 index 0000000000..45146dccea --- /dev/null +++ b/samples/layouts/avatar/variants/src/index.tsx @@ -0,0 +1,86 @@ +import React, { useEffect } from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; +import { + IgrAvatar, + IgrBadge, + IgrIcon, + registerIconFromText, +} from "igniteui-react"; +import "igniteui-webcomponents/themes/light/material.css"; + +const mailIcon = + ''; + +const checkIcon = + ''; + +export default function AvatarVariants() { + useEffect(() => { + registerIconFromText("mail", mailIcon, "material"); + registerIconFromText("check", checkIcon, "material"); + }, []); + + return ( +
+
+ + + + + Image +
+ +
+ + + + + + 2 + + + Icon +
+ +
+ + + + + + + Initials +
+
+ ); +} + +// rendering above component to the React DOM +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); diff --git a/samples/layouts/avatar/variants/tsconfig.json b/samples/layouts/avatar/variants/tsconfig.json new file mode 100644 index 0000000000..8c0d146f95 --- /dev/null +++ b/samples/layouts/avatar/variants/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/layouts/avatar/variants/vite.config.js b/samples/layouts/avatar/variants/vite.config.js new file mode 100644 index 0000000000..1744dbc719 --- /dev/null +++ b/samples/layouts/avatar/variants/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