diff --git a/package-lock.json b/package-lock.json index 2f2dcc4..222ed95 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,10 +18,12 @@ "postcss": "^8.4.39", "react": "^18.3.1", "react-dom": "^18.3.1", - "react-i18next": "^14.1.3", - "react-router-dom": "^6.24.1", + "react-i18next": "^15.0.3", + "react-router-dom": "^7.0.2", "react-toastify": "^10.0.5", - "uuid": "^11.0.3" + "rte-design-system-react": "^0.1.1", + "uuid": "^11.0.3", + "vite-plugin-top-level-await": "^1.4.4" }, "devDependencies": { "@testing-library/jest-dom": "^6.4.6", @@ -474,7 +476,6 @@ "cpu": [ "ppc64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -491,7 +492,6 @@ "cpu": [ "arm" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -508,7 +508,6 @@ "cpu": [ "arm64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -525,7 +524,6 @@ "cpu": [ "x64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -542,7 +540,6 @@ "cpu": [ "arm64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -559,7 +556,6 @@ "cpu": [ "x64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -576,7 +572,6 @@ "cpu": [ "arm64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -593,7 +588,6 @@ "cpu": [ "x64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -610,7 +604,6 @@ "cpu": [ "arm" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -627,7 +620,6 @@ "cpu": [ "arm64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -644,7 +636,6 @@ "cpu": [ "ia32" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -661,7 +652,6 @@ "cpu": [ "loong64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -678,7 +668,6 @@ "cpu": [ "mips64el" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -695,7 +684,6 @@ "cpu": [ "ppc64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -712,7 +700,6 @@ "cpu": [ "riscv64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -729,7 +716,6 @@ "cpu": [ "s390x" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -746,7 +732,6 @@ "cpu": [ "x64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -763,7 +748,6 @@ "cpu": [ "x64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -780,7 +764,6 @@ "cpu": [ "x64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -797,7 +780,6 @@ "cpu": [ "x64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -814,7 +796,6 @@ "cpu": [ "arm64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -831,7 +812,6 @@ "cpu": [ "ia32" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -848,7 +828,6 @@ "cpu": [ "x64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1365,13 +1344,21 @@ "node": ">=14" } }, - "node_modules/@remix-run/router": { - "version": "1.21.0", - "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.21.0.tgz", - "integrity": "sha512-xfSkCAchbdG5PnbrKqFWwia4Bi61nH+wm8wLEqfHDyp7Y3dZzgqS2itV8i4gAq9pC2HsTpwyBC6Ds8VHZ96JlA==", + "node_modules/@rollup/plugin-virtual": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/@rollup/plugin-virtual/-/plugin-virtual-3.0.2.tgz", + "integrity": "sha512-10monEYsBp3scM4/ND4LNH5Rxvh3e/cVeL3jWTgZ2SrQ+BmUoQcopVQvnaMcOnykb1VkxUFuDAN+0FnpTFRy2A==", "license": "MIT", "engines": { "node": ">=14.0.0" + }, + "peerDependencies": { + "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0" + }, + "peerDependenciesMeta": { + "rollup": { + "optional": true + } } }, "node_modules/@rollup/rollup-android-arm-eabi": { @@ -1381,7 +1368,6 @@ "cpu": [ "arm" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1395,7 +1381,6 @@ "cpu": [ "arm64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1409,7 +1394,6 @@ "cpu": [ "arm64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1423,7 +1407,6 @@ "cpu": [ "x64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1437,7 +1420,6 @@ "cpu": [ "arm64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1451,7 +1433,6 @@ "cpu": [ "x64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1465,7 +1446,6 @@ "cpu": [ "arm" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1479,7 +1459,6 @@ "cpu": [ "arm" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1493,7 +1472,6 @@ "cpu": [ "arm64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1507,7 +1485,6 @@ "cpu": [ "arm64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1521,7 +1498,6 @@ "cpu": [ "ppc64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1535,7 +1511,6 @@ "cpu": [ "riscv64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1549,7 +1524,6 @@ "cpu": [ "s390x" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1563,7 +1537,6 @@ "cpu": [ "x64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1577,7 +1550,6 @@ "cpu": [ "x64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1591,7 +1563,6 @@ "cpu": [ "arm64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1605,7 +1576,6 @@ "cpu": [ "ia32" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1619,7 +1589,6 @@ "cpu": [ "x64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1633,6 +1602,245 @@ "dev": true, "license": "MIT" }, + "node_modules/@swc/core": { + "version": "1.10.1", + "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.10.1.tgz", + "integrity": "sha512-rQ4dS6GAdmtzKiCRt3LFVxl37FaY1cgL9kSUTnhQ2xc3fmHOd7jdJK/V4pSZMG1ruGTd0bsi34O2R0Olg9Zo/w==", + "hasInstallScript": true, + "license": "Apache-2.0", + "dependencies": { + "@swc/counter": "^0.1.3", + "@swc/types": "^0.1.17" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/swc" + }, + "optionalDependencies": { + "@swc/core-darwin-arm64": "1.10.1", + "@swc/core-darwin-x64": "1.10.1", + "@swc/core-linux-arm-gnueabihf": "1.10.1", + "@swc/core-linux-arm64-gnu": "1.10.1", + "@swc/core-linux-arm64-musl": "1.10.1", + "@swc/core-linux-x64-gnu": "1.10.1", + "@swc/core-linux-x64-musl": "1.10.1", + "@swc/core-win32-arm64-msvc": "1.10.1", + "@swc/core-win32-ia32-msvc": "1.10.1", + "@swc/core-win32-x64-msvc": "1.10.1" + }, + "peerDependencies": { + "@swc/helpers": "*" + }, + "peerDependenciesMeta": { + "@swc/helpers": { + "optional": true + } + } + }, + "node_modules/@swc/core-darwin-arm64": { + "version": "1.10.1", + "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.10.1.tgz", + "integrity": "sha512-NyELPp8EsVZtxH/mEqvzSyWpfPJ1lugpTQcSlMduZLj1EASLO4sC8wt8hmL1aizRlsbjCX+r0PyL+l0xQ64/6Q==", + "cpu": [ + "arm64" + ], + "license": "Apache-2.0 AND MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/core-darwin-x64": { + "version": "1.10.1", + "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.10.1.tgz", + "integrity": "sha512-L4BNt1fdQ5ZZhAk5qoDfUnXRabDOXKnXBxMDJ+PWLSxOGBbWE6aJTnu4zbGjJvtot0KM46m2LPAPY8ttknqaZA==", + "cpu": [ + "x64" + ], + "license": "Apache-2.0 AND MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/core-linux-arm-gnueabihf": { + "version": "1.10.1", + "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.10.1.tgz", + "integrity": "sha512-Y1u9OqCHgvVp2tYQAJ7hcU9qO5brDMIrA5R31rwWQIAKDkJKtv3IlTHF0hrbWk1wPR0ZdngkQSJZple7G+Grvw==", + "cpu": [ + "arm" + ], + "license": "Apache-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/core-linux-arm64-gnu": { + "version": "1.10.1", + "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.10.1.tgz", + "integrity": "sha512-tNQHO/UKdtnqjc7o04iRXng1wTUXPgVd8Y6LI4qIbHVoVPwksZydISjMcilKNLKIwOoUQAkxyJ16SlOAeADzhQ==", + "cpu": [ + "arm64" + ], + "license": "Apache-2.0 AND MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/core-linux-arm64-musl": { + "version": "1.10.1", + "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.10.1.tgz", + "integrity": "sha512-x0L2Pd9weQ6n8dI1z1Isq00VHFvpBClwQJvrt3NHzmR+1wCT/gcYl1tp9P5xHh3ldM8Cn4UjWCw+7PaUgg8FcQ==", + "cpu": [ + "arm64" + ], + "license": "Apache-2.0 AND MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/core-linux-x64-gnu": { + "version": "1.10.1", + "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.10.1.tgz", + "integrity": "sha512-yyYEwQcObV3AUsC79rSzN9z6kiWxKAVJ6Ntwq2N9YoZqSPYph+4/Am5fM1xEQYf/kb99csj0FgOelomJSobxQA==", + "cpu": [ + "x64" + ], + "license": "Apache-2.0 AND MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/core-linux-x64-musl": { + "version": "1.10.1", + "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.10.1.tgz", + "integrity": "sha512-tcaS43Ydd7Fk7sW5ROpaf2Kq1zR+sI5K0RM+0qYLYYurvsJruj3GhBCaiN3gkzd8m/8wkqNqtVklWaQYSDsyqA==", + "cpu": [ + "x64" + ], + "license": "Apache-2.0 AND MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/core-win32-arm64-msvc": { + "version": "1.10.1", + "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.10.1.tgz", + "integrity": "sha512-D3Qo1voA7AkbOzQ2UGuKNHfYGKL6eejN8VWOoQYtGHHQi1p5KK/Q7V1ku55oxXBsj79Ny5FRMqiRJpVGad7bjQ==", + "cpu": [ + "arm64" + ], + "license": "Apache-2.0 AND MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/core-win32-ia32-msvc": { + "version": "1.10.1", + "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.10.1.tgz", + "integrity": "sha512-WalYdFoU3454Og+sDKHM1MrjvxUGwA2oralknXkXL8S0I/8RkWZOB++p3pLaGbTvOO++T+6znFbQdR8KRaa7DA==", + "cpu": [ + "ia32" + ], + "license": "Apache-2.0 AND MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/core-win32-x64-msvc": { + "version": "1.10.1", + "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.10.1.tgz", + "integrity": "sha512-JWobfQDbTnoqaIwPKQ3DVSywihVXlQMbDuwik/dDWlj33A8oEHcjPOGs4OqcA3RHv24i+lfCQpM3Mn4FAMfacA==", + "cpu": [ + "x64" + ], + "license": "Apache-2.0 AND MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/counter": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz", + "integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==", + "license": "Apache-2.0" + }, + "node_modules/@swc/types": { + "version": "0.1.17", + "resolved": "https://registry.npmjs.org/@swc/types/-/types-0.1.17.tgz", + "integrity": "sha512-V5gRru+aD8YVyCOMAjMpWR1Ui577DD5KSJsHP8RAxopAH22jFz6GZd/qxqjO6MJHQhcsjvjOFXyDhyLQUnMveQ==", + "license": "Apache-2.0", + "dependencies": { + "@swc/counter": "^0.1.3" + } + }, + "node_modules/@tanstack/query-core": { + "version": "5.62.7", + "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.62.7.tgz", + "integrity": "sha512-fgpfmwatsrUal6V+8EC2cxZIQVl9xvL7qYa03gsdsCy985UTUlS4N+/3hCzwR0PclYDqisca2AqR1BVgJGpUDA==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + } + }, + "node_modules/@tanstack/react-query": { + "version": "5.62.7", + "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.62.7.tgz", + "integrity": "sha512-+xCtP4UAFDTlRTYyEjLx0sRtWyr5GIk7TZjZwBu4YaNahi3Rt2oMyRqfpfVrtwsqY2sayP4iXVCwmC+ZqqFmuw==", + "license": "MIT", + "dependencies": { + "@tanstack/query-core": "5.62.7" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "peerDependencies": { + "react": "^18 || ^19" + } + }, "node_modules/@tanstack/react-table": { "version": "8.20.5", "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.20.5.tgz", @@ -1821,11 +2029,16 @@ "@babel/types": "^7.20.7" } }, + "node_modules/@types/cookie": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz", + "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==", + "license": "MIT" + }, "node_modules/@types/estree": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz", "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==", - "dev": true, "license": "MIT" }, "node_modules/@types/json5": { @@ -1839,7 +2052,7 @@ "version": "20.15.0", "resolved": "https://registry.npmjs.org/@types/node/-/node-20.15.0.tgz", "integrity": "sha512-eQf4OkH6gA9v1W0iEpht/neozCsZKMTK+C4cU6/fv7wtJCCL8LEQ4hie2Ln8ZP/0YYM2xGj7//f8xyqItkJ6QA==", - "dev": true, + "devOptional": true, "license": "MIT", "dependencies": { "undici-types": "~6.13.0" @@ -2156,7 +2369,6 @@ "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-2.1.6.tgz", "integrity": "sha512-9M1UR9CAmrhJOMoSwVnPh2rELPKhYo0m/CSgqw9PyStpxtkwhmdM6XYlXGKeYyERY1N6EIuzkQ7e3Lm1WKCoUg==", "dev": true, - "license": "MIT", "dependencies": { "@vitest/spy": "2.1.6", "@vitest/utils": "2.1.6", @@ -2172,7 +2384,6 @@ "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-2.1.6.tgz", "integrity": "sha512-MHZp2Z+Q/A3am5oD4WSH04f9B0T7UvwEb+v5W0kCYMhtXGYbdyl2NUk1wdSMqGthmhpiThPDp/hEoVwu16+u1A==", "dev": true, - "license": "MIT", "dependencies": { "@vitest/spy": "2.1.6", "estree-walker": "^3.0.3", @@ -2195,11 +2406,10 @@ } }, "node_modules/@vitest/pretty-format": { - "version": "2.1.6", - "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-2.1.6.tgz", - "integrity": "sha512-exZyLcEnHgDMKc54TtHca4McV4sKT+NKAe9ix/yhd/qkYb/TP8HTyXRFDijV19qKqTZM0hPL4753zU/U8L/gAA==", + "version": "2.1.8", + "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-2.1.8.tgz", + "integrity": "sha512-9HiSZ9zpqNLKlbIDRWOnAWqgcA7xu+8YxXSekhr0Ykab7PAYFkhkwoqVArPOtJhPmYeE2YHgKZlj3CP36z2AJQ==", "dev": true, - "license": "MIT", "dependencies": { "tinyrainbow": "^1.2.0" }, @@ -2212,7 +2422,6 @@ "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-2.1.6.tgz", "integrity": "sha512-SjkRGSFyrA82m5nz7To4CkRSEVWn/rwQISHoia/DB8c6IHIhaE/UNAo+7UfeaeJRE979XceGl00LNkIz09RFsA==", "dev": true, - "license": "MIT", "dependencies": { "@vitest/utils": "2.1.6", "pathe": "^1.1.2" @@ -2226,7 +2435,6 @@ "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-2.1.6.tgz", "integrity": "sha512-5JTWHw8iS9l3v4/VSuthCndw1lN/hpPB+mlgn1BUhFbobeIUj1J1V/Bj2t2ovGEmkXLTckFjQddsxS5T6LuVWw==", "dev": true, - "license": "MIT", "dependencies": { "@vitest/pretty-format": "2.1.6", "magic-string": "^0.30.12", @@ -2236,12 +2444,23 @@ "url": "https://opencollective.com/vitest" } }, + "node_modules/@vitest/snapshot/node_modules/@vitest/pretty-format": { + "version": "2.1.6", + "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-2.1.6.tgz", + "integrity": "sha512-exZyLcEnHgDMKc54TtHca4McV4sKT+NKAe9ix/yhd/qkYb/TP8HTyXRFDijV19qKqTZM0hPL4753zU/U8L/gAA==", + "dev": true, + "dependencies": { + "tinyrainbow": "^1.2.0" + }, + "funding": { + "url": "https://opencollective.com/vitest" + } + }, "node_modules/@vitest/spy": { "version": "2.1.6", "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-2.1.6.tgz", "integrity": "sha512-oTFObV8bd4SDdRka5O+mSh5w9irgx5IetrD5i+OsUUsk/shsBoHifwCzy45SAORzAhtNiprUVaK3hSCCzZh1jQ==", "dev": true, - "license": "MIT", "dependencies": { "tinyspy": "^3.0.2" }, @@ -2254,7 +2473,6 @@ "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-2.1.6.tgz", "integrity": "sha512-ixNkFy3k4vokOUTU2blIUvOgKq/N2PW8vKIjZZYsGJCMX69MRa9J2sKqX5hY/k5O5Gty3YJChepkqZ3KM9LyIQ==", "dev": true, - "license": "MIT", "dependencies": { "@vitest/pretty-format": "2.1.6", "loupe": "^3.1.2", @@ -2264,6 +2482,18 @@ "url": "https://opencollective.com/vitest" } }, + "node_modules/@vitest/utils/node_modules/@vitest/pretty-format": { + "version": "2.1.6", + "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-2.1.6.tgz", + "integrity": "sha512-exZyLcEnHgDMKc54TtHca4McV4sKT+NKAe9ix/yhd/qkYb/TP8HTyXRFDijV19qKqTZM0hPL4753zU/U8L/gAA==", + "dev": true, + "dependencies": { + "tinyrainbow": "^1.2.0" + }, + "funding": { + "url": "https://opencollective.com/vitest" + } + }, "node_modules/acorn": { "version": "8.14.0", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz", @@ -2649,7 +2879,6 @@ "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz", "integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==", "dev": true, - "license": "MIT", "engines": { "node": ">=12" } @@ -2882,7 +3111,6 @@ "resolved": "https://registry.npmjs.org/cac/-/cac-6.7.14.tgz", "integrity": "sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==", "dev": true, - "license": "MIT", "engines": { "node": ">=8" } @@ -2970,7 +3198,6 @@ "resolved": "https://registry.npmjs.org/chai/-/chai-5.1.2.tgz", "integrity": "sha512-aGtmf24DW6MLHHG5gCx4zaI3uBq3KRtxeVs0DjFH6Z0rDNbsvTxFASFvdj79pxjxZ8/5u3PIiN3IwEIQkiiuPw==", "dev": true, - "license": "MIT", "dependencies": { "assertion-error": "^2.0.1", "check-error": "^2.1.1", @@ -3003,7 +3230,6 @@ "resolved": "https://registry.npmjs.org/check-error/-/check-error-2.1.1.tgz", "integrity": "sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==", "dev": true, - "license": "MIT", "engines": { "node": ">= 16" } @@ -3209,6 +3435,15 @@ "dev": true, "license": "MIT" }, + "node_modules/cookie": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz", + "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==", + "license": "MIT", + "engines": { + "node": ">=18" + } + }, "node_modules/core-util-is": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz", @@ -3464,7 +3699,6 @@ "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-5.0.2.tgz", "integrity": "sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==", "dev": true, - "license": "MIT", "engines": { "node": ">=6" } @@ -3782,8 +4016,7 @@ "version": "1.5.4", "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.5.4.tgz", "integrity": "sha512-MVNK56NiMrOwitFB7cqDwq0CQutbw+0BvLshJSse0MUNU+y1FC3bUS/AQg7oUng+/wKrrki7JfmwtVHkVfPLlw==", - "dev": true, - "license": "MIT" + "dev": true }, "node_modules/es-object-atoms": { "version": "1.0.0", @@ -3845,7 +4078,6 @@ "version": "0.21.5", "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz", "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==", - "dev": true, "hasInstallScript": true, "license": "MIT", "bin": { @@ -4516,7 +4748,6 @@ "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz", "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==", "dev": true, - "license": "MIT", "dependencies": { "@types/estree": "^1.0.0" } @@ -4877,7 +5108,6 @@ "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", - "dev": true, "hasInstallScript": true, "license": "MIT", "optional": true, @@ -6669,8 +6899,7 @@ "version": "3.1.2", "resolved": "https://registry.npmjs.org/loupe/-/loupe-3.1.2.tgz", "integrity": "sha512-23I4pFZHmAemUnz8WZXbYRSKYj801VDaNv9ETuMh7IrMc7VuVVSo+Z9iLE3ni30+U48iDWfi30d3twAXBYmnCg==", - "dev": true, - "license": "MIT" + "dev": true }, "node_modules/lru-cache": { "version": "5.1.1", @@ -7285,15 +7514,13 @@ "version": "1.1.2", "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.2.tgz", "integrity": "sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==", - "dev": true, - "license": "MIT" + "dev": true }, "node_modules/pathval": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/pathval/-/pathval-2.0.0.tgz", "integrity": "sha512-vE7JKRyES09KiunauX7nd2Q9/L7lhok4smP9RZTDeD4MVs72Dp2qNFVz39Nz5a0FVEW0BJR6C0DYrq6unoziZA==", "dev": true, - "license": "MIT", "engines": { "node": ">= 14.16" } @@ -7819,12 +8046,12 @@ } }, "node_modules/react-i18next": { - "version": "14.1.3", - "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-14.1.3.tgz", - "integrity": "sha512-wZnpfunU6UIAiJ+bxwOiTmBOAaB14ha97MjOEnLGac2RJ+h/maIYXZuTHlmyqQVX1UVHmU1YDTQ5vxLmwfXTjw==", + "version": "15.2.0", + "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-15.2.0.tgz", + "integrity": "sha512-iJNc8111EaDtVTVMKigvBtPHyrJV+KblWG73cUxqp+WmJCcwkzhWNFXmkAD5pwP2Z4woeDj/oXDdbjDsb3Gutg==", "license": "MIT", "dependencies": { - "@babel/runtime": "^7.23.9", + "@babel/runtime": "^7.25.0", "html-parse-stringify": "^3.0.1" }, "peerDependencies": { @@ -7858,35 +8085,43 @@ } }, "node_modules/react-router": { - "version": "6.28.0", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.28.0.tgz", - "integrity": "sha512-HrYdIFqdrnhDw0PqG/AKjAqEqM7AvxCz0DQ4h2W8k6nqmc5uRBYDag0SBxx9iYz5G8gnuNVLzUe13wl9eAsXXg==", + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.0.2.tgz", + "integrity": "sha512-m5AcPfTRUcjwmhBzOJGEl6Y7+Crqyju0+TgTQxoS4SO+BkWbhOrcfZNq6wSWdl2BBbJbsAoBUb8ZacOFT+/JlA==", "license": "MIT", "dependencies": { - "@remix-run/router": "1.21.0" + "@types/cookie": "^0.6.0", + "cookie": "^1.0.1", + "set-cookie-parser": "^2.6.0", + "turbo-stream": "2.4.0" }, "engines": { - "node": ">=14.0.0" + "node": ">=20.0.0" }, "peerDependencies": { - "react": ">=16.8" + "react": ">=18", + "react-dom": ">=18" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + } } }, "node_modules/react-router-dom": { - "version": "6.28.0", - "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.28.0.tgz", - "integrity": "sha512-kQ7Unsl5YdyOltsPGl31zOjLrDv+m2VcIEcIHqYYD3Lp0UppLjrzcfJqDJwXxFw3TH/yvapbnUvPlAj7Kx5nbg==", + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.0.2.tgz", + "integrity": "sha512-VJOQ+CDWFDGaWdrG12Nl+d7yHtLaurNgAQZVgaIy7/Xd+DojgmYLosFfZdGz1wpxmjJIAkAMVTKWcvkx1oggAw==", "license": "MIT", "dependencies": { - "@remix-run/router": "1.21.0", - "react-router": "6.28.0" + "react-router": "7.0.2" }, "engines": { - "node": ">=14.0.0" + "node": ">=20.0.0" }, "peerDependencies": { - "react": ">=16.8", - "react-dom": ">=16.8" + "react": ">=18", + "react-dom": ">=18" } }, "node_modules/react-toastify": { @@ -8094,7 +8329,6 @@ "version": "4.27.4", "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.27.4.tgz", "integrity": "sha512-RLKxqHEMjh/RGLsDxAEsaLO3mWgyoU6x9w6n1ikAzet4B3gI2/3yP6PWY2p9QzRTh6MfEIXB3MwsOY0Iv3vNrw==", - "dev": true, "license": "MIT", "dependencies": { "@types/estree": "1.0.6" @@ -8135,6 +8369,24 @@ "dev": true, "license": "MIT" }, + "node_modules/rte-design-system-react": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/rte-design-system-react/-/rte-design-system-react-0.1.1.tgz", + "integrity": "sha512-RdkQVC/hTwbPB0z3ZsY/wonEpU+Dmn/oK0VxSl0exfpd5H24MNRXkj9cppzfLgcderoJhXpaV7bK5K9lDVPTmg==", + "dependencies": { + "@floating-ui/react": "^0.26.28", + "@tanstack/react-query": "^5.60.5", + "@tanstack/react-table": "^8.20.5" + }, + "peerDependencies": { + "clsx": "^2.1.1", + "i18next": "^23.16.0", + "react": "^18.3.1", + "react-dom": "^18.3.1", + "react-i18next": "^15.0.3", + "react-router-dom": "^7.0.2" + } + }, "node_modules/run-parallel": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz", @@ -8269,6 +8521,12 @@ "node": ">=10" } }, + "node_modules/set-cookie-parser": { + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz", + "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==", + "license": "MIT" + }, "node_modules/set-function-length": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz", @@ -8879,7 +9137,6 @@ "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-3.0.2.tgz", "integrity": "sha512-n1cw8k1k0x4pgA2+9XrOkFydTerNcJ1zWCO5Nn9scWHTD+5tp8dghT2x1uduQePZTZgd3Tupf+x9BxJjeJi77Q==", "dev": true, - "license": "MIT", "engines": { "node": ">=14.0.0" } @@ -9029,6 +9286,12 @@ "node": "*" } }, + "node_modules/turbo-stream": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz", + "integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==", + "license": "ISC" + }, "node_modules/tweetnacl": { "version": "0.14.5", "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz", @@ -9174,7 +9437,7 @@ "version": "6.13.0", "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.13.0.tgz", "integrity": "sha512-xtFJHudx8S2DSoujjMd1WeWvn7KKWFRESZTMeL1RptAYERu29D6jphMjjY+vn96jvN3kVPDNxU/E13VTaXj6jg==", - "dev": true, + "devOptional": true, "license": "MIT" }, "node_modules/universalify": { @@ -9288,7 +9551,6 @@ "version": "5.4.11", "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.11.tgz", "integrity": "sha512-c7jFQRklXua0mTzneGW9QVyxFjUgwcihC4bXEtujIo2ouWCe1Ajt/amn2PCxYnhYfd5k09JX3SB7OYWFKYqj8Q==", - "dev": true, "license": "MIT", "dependencies": { "esbuild": "^0.21.3", @@ -9349,7 +9611,6 @@ "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-2.1.6.tgz", "integrity": "sha512-DBfJY0n9JUwnyLxPSSUmEePT21j8JZp/sR9n+/gBwQU6DcQOioPdb8/pibWfXForbirSagZCilseYIwaL3f95A==", "dev": true, - "license": "MIT", "dependencies": { "cac": "^6.7.14", "debug": "^4.3.7", @@ -9367,12 +9628,38 @@ "url": "https://opencollective.com/vitest" } }, + "node_modules/vite-plugin-top-level-await": { + "version": "1.4.4", + "resolved": "https://registry.npmjs.org/vite-plugin-top-level-await/-/vite-plugin-top-level-await-1.4.4.tgz", + "integrity": "sha512-QyxQbvcMkgt+kDb12m2P8Ed35Sp6nXP+l8ptGrnHV9zgYDUpraO0CPdlqLSeBqvY2DToR52nutDG7mIHuysdiw==", + "license": "MIT", + "dependencies": { + "@rollup/plugin-virtual": "^3.0.2", + "@swc/core": "^1.7.0", + "uuid": "^10.0.0" + }, + "peerDependencies": { + "vite": ">=2.8" + } + }, + "node_modules/vite-plugin-top-level-await/node_modules/uuid": { + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-10.0.0.tgz", + "integrity": "sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==", + "funding": [ + "https://github.com/sponsors/broofa", + "https://github.com/sponsors/ctavan" + ], + "license": "MIT", + "bin": { + "uuid": "dist/bin/uuid" + } + }, "node_modules/vitest": { "version": "2.1.6", "resolved": "https://registry.npmjs.org/vitest/-/vitest-2.1.6.tgz", "integrity": "sha512-isUCkvPL30J4c5O5hgONeFRsDmlw6kzFEdLQHLezmDdKQHy8Ke/B/dgdTMEgU0vm+iZ0TjW8GuK83DiahBoKWQ==", "dev": true, - "license": "MIT", "dependencies": { "@vitest/expect": "2.1.6", "@vitest/mocker": "2.1.6", diff --git a/package.json b/package.json index 495c833..55b57d1 100644 --- a/package.json +++ b/package.json @@ -25,10 +25,12 @@ "postcss": "^8.4.39", "react": "^18.3.1", "react-dom": "^18.3.1", - "react-i18next": "^14.1.3", - "react-router-dom": "^6.24.1", + "react-i18next": "^15.0.3", + "react-router-dom": "^7.0.2", "react-toastify": "^10.0.5", - "uuid": "^11.0.3" + "rte-design-system-react": "^0.1.1", + "uuid": "^11.0.3", + "vite-plugin-top-level-await": "^1.4.4" }, "devDependencies": { "@testing-library/jest-dom": "^6.4.6", diff --git a/src/App.css b/src/App.css index 7a1444d..0b76f94 100644 --- a/src/App.css +++ b/src/App.css @@ -1,4 +1,3 @@ -@tailwind base; @tailwind components; @tailwind utilities; diff --git a/src/components/common/base/StdTagList/StdTagList.tsx b/src/components/common/base/StdTagList/StdTagList.tsx deleted file mode 100644 index eb8f4e2..0000000 --- a/src/components/common/base/StdTagList/StdTagList.tsx +++ /dev/null @@ -1,110 +0,0 @@ -/* - * This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at https://mozilla.org/MPL/2.0/. - */ - -import { useEffect, useRef, useState } from 'react'; -import { useTranslation } from 'react-i18next'; -import StdPopover from '../../layout/stdPopover/StdPopover'; -import StdTextTooltip from '../../layout/stdTextTooltip/StdTextTooltip'; -import StdButton from '../stdButton/StdButton'; -import StdIcon from '../stdIcon/StdIcon'; -import StdTag from '../stdTag/StdTag'; -import { tagListClassBuilder } from './tagListClassBuilder'; -import { StdIconId } from '@/shared/utils/common/mappings/iconMaps'; -import { useStdId } from '@/hooks/common/useStdId'; -import { useCallOnResize } from '@/hooks/common/useCallOnResize'; -import { countMaxItemsToFitInContainer } from '@/shared/utils/common/displayUtils'; - -type StdTagListProps = { - tags: string[]; - icon?: StdIconId; - tooltipText?: string; - onDelete?: (tag: string) => void; - id?: string; - autoExpends?: boolean; -}; - -const ICON_SIZE = 16; -const POPOVER_OFFSET = 10; - -const StdTagList = ({ tags, icon, tooltipText, id: propsId, onDelete, autoExpends = false }: StdTagListProps) => { - const { t } = useTranslation(); - const [isReady, setIsReady] = useState(false); - const containerRef = useRef(null); - const tagsRef = useRef<(HTMLSpanElement | null)[]>([]); - const [tagsNumber, setTagsNumber] = useState(tags.length); - const { tagListClasses } = tagListClassBuilder(isReady); - const [showPopover, setShowPopover] = useState(false); - const id = useStdId('tag-list', propsId); - - useCallOnResize( - () => setTagsNumber(Math.min(countMaxItemsToFitInContainer(containerRef, tagsRef, autoExpends), 3)), - id, - ); - - useEffect(() => { - setTagsNumber(Math.min(countMaxItemsToFitInContainer(containerRef, tagsRef, autoExpends), 3)); - setIsReady(true); - }, [tags, autoExpends]); - - return ( -
- {icon && ( - - - - )} -
- {tags.map((tag, idx) => ( - (tagsRef.current[idx] = r)} - className={idx >= tagsNumber ? 'hidden' : ''} - key={tag.toLowerCase()} - > - onDelete(tag) : undefined} /> - - ))} - - {(!isReady || tags.length - tagsNumber > 0) && ( - - - - - -
- {tags.map((tag) => ( - onDelete(tag) : undefined} key={tag.toLowerCase()} /> - ))} -
- - - setShowPopover(false)} - id={`${id}-popover-close`} - /> - - - )} - -
-
- ); -}; - -export default StdTagList; diff --git a/src/components/common/base/StdTagList/tagListClassBuilder.ts b/src/components/common/base/StdTagList/tagListClassBuilder.ts deleted file mode 100644 index 7156133..0000000 --- a/src/components/common/base/StdTagList/tagListClassBuilder.ts +++ /dev/null @@ -1,13 +0,0 @@ -/* - * This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at https://mozilla.org/MPL/2.0/. - */ - -import { clsx } from 'clsx'; - -export const COMMON_TAG_LIST_CLASSES = 'flex h-full w-full items-center flex-wrap gap-1'; - -export const tagListClassBuilder = (isReady: boolean) => ({ - tagListClasses: clsx(COMMON_TAG_LIST_CLASSES, !isReady && 'invisible'), -}); diff --git a/src/components/common/base/StdTagList/tests/stdTagList.test.tsx b/src/components/common/base/StdTagList/tests/stdTagList.test.tsx deleted file mode 100644 index 8b56951..0000000 --- a/src/components/common/base/StdTagList/tests/stdTagList.test.tsx +++ /dev/null @@ -1,35 +0,0 @@ -/* - * This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at https://mozilla.org/MPL/2.0/. - */ - -import { render, screen } from '@testing-library/react'; -import StdTagList from '../StdTagList'; -import { StdIconId } from '@/shared/utils/common/mappings/iconMaps'; - -const TEST_TAGS_LIST = [ - 'Value 1', - 'Value 2', - 'Value 3', - 'Value 4', - 'Value 5', - 'Value 6', - 'Value 7', - 'Value 8', - 'Value 9', -]; - -const TEST_ID = 'test-tag-list-id'; - -describe('StdTagList', () => { - it('renders the default StdTagList with the expected tags', () => { - render(); - expect(screen.getAllByRole('listitem').length).toBe(TEST_TAGS_LIST.length); - }); - - it('renders the default StdTagList with the icon tags', () => { - render(); - expect(screen.getByTitle(StdIconId.Sell)).toBeInTheDocument(); - }); -}); diff --git a/src/components/common/base/StdTagList/tests/tagListClassBuilder.test.ts b/src/components/common/base/StdTagList/tests/tagListClassBuilder.test.ts deleted file mode 100644 index 4400c95..0000000 --- a/src/components/common/base/StdTagList/tests/tagListClassBuilder.test.ts +++ /dev/null @@ -1,21 +0,0 @@ -/* - * This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at https://mozilla.org/MPL/2.0/. - */ - -import { COMMON_TAG_LIST_CLASSES, tagListClassBuilder } from '../tagListClassBuilder'; - -describe('tagListClassBuilder function', () => { - it('should have the common classes', () => { - expect(tagListClassBuilder(false).tagListClasses.includes(COMMON_TAG_LIST_CLASSES)).toBe(true); - expect(tagListClassBuilder(true).tagListClasses.includes(COMMON_TAG_LIST_CLASSES)).toBe(true); - }); - it('should have the invisible class before final render', () => { - expect(tagListClassBuilder(false).tagListClasses.includes('invisible')).toBe(true); - }); - - it('should not have the invisible class after final render', () => { - expect(tagListClassBuilder(true).tagListClasses.includes('invisible')).toBe(false); - }); -}); diff --git a/src/components/common/base/stdButton/StdButton.tsx b/src/components/common/base/stdButton/StdButton.tsx deleted file mode 100644 index a3f6e63..0000000 --- a/src/components/common/base/stdButton/StdButton.tsx +++ /dev/null @@ -1,69 +0,0 @@ -/* - * This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at https://mozilla.org/MPL/2.0/. - */ - -import { useStdId } from '@/hooks/common/useStdId'; -import { StdIconId } from '@/shared/utils/common/mappings/iconMaps'; -import StdIcon from '@common/base/stdIcon/StdIcon'; -import { buttonClassBuilder, labelClassBuilder } from './buttonClassBuilder'; - -export type ButtonVariant = 'contained' | 'outlined' | 'dashed' | 'text' | 'transparent'; -export type ButtonSize = 'extraSmall' | 'small' | 'medium'; -export type ButtonColor = 'primary' | 'secondary' | 'danger'; -export type IconPosition = 'left' | 'right'; - -export interface StdButtonProps { - label?: string; - disabled?: boolean; - variant?: ButtonVariant; - color?: ButtonColor; - size?: ButtonSize; - onClick?: (e: React.MouseEvent) => void; - onKeydown?: (e: React.KeyboardEvent) => void; - id?: string; - icon?: StdIconId; - position?: IconPosition; -} - -const ICON_SIZE: Record = { - extraSmall: 16, - small: 20, - medium: 20, -}; - -const StdButton = ({ - label, - disabled = false, - variant = 'contained', - color = 'primary', - size = 'medium', - onClick = () => {}, - onKeydown = () => {}, - id: propsId, - icon, - position = 'left', -}: StdButtonProps) => { - const buttonClasses = buttonClassBuilder(variant, color, size, disabled, !!label); - const labelClasses = label && labelClassBuilder(size); - - const id = useStdId('btn', propsId); - - return ( - - ); -}; - -export default StdButton; diff --git a/src/components/common/base/stdButton/buttonClassBuilder.ts b/src/components/common/base/stdButton/buttonClassBuilder.ts deleted file mode 100644 index 7d066a2..0000000 --- a/src/components/common/base/stdButton/buttonClassBuilder.ts +++ /dev/null @@ -1,88 +0,0 @@ -/* - * This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at https://mozilla.org/MPL/2.0/. - */ - -import { classMerger } from '@/shared/utils/common/classes/classMerger'; -import type { ButtonColor, ButtonSize, ButtonVariant } from './StdButton'; - -export const COMMON_CLASSES = 'rounded font-semibold text-center inline-flex flex-row items-center'; - -export const SIZE_CLASSES = { - extraSmall: 'px-0.25 text-button-xs', - small: 'px-0.5 py-0.25 text-button-s', - medium: 'px-1 py-0.75 text-button-s', -}; -export const SINGLE_ICON_CLASSES = { - extraSmall: '[&]:px-0 [&]:py-0', - small: '[&]:px-0.25', - medium: '[&]:px-0.75', -}; - -export const FOCUS_CLASSES = { - primary: 'focus:outline focus:outline-1 focus:outline-offset-2 focus:outline-primary-900', - secondary: 'focus:outline focus:outline-1 focus:outline-offset-2 focus:outline-gray-900', - danger: 'focus:outline focus:outline-1 focus:outline-offset-2 focus:outline-gray-900', -}; - -export const VARIANT_CLASSES = { - primary: { - contained: - 'bg-primary-600 hover:bg-primary-700 active:bg-primary-800 text-gray-w border border-primary-600 border-opacity-0', - outlined: 'bg-gray-w hover:bg-primary-50 active:bg-primary-100 text-primary-600 border border-primary-600', - dashed: - 'bg-transparent hover:bg-primary-50 active:bg-primary-100 text-primary-600 border-dashed border border-primary-600', - text: 'bg-transparent hover:bg-primary-50 active:bg-primary-100 text-primary-600 border border-primary-600 border-opacity-0', - transparent: - 'bg-transparent hover:text-primary-700 active:text-primary-900 text-primary-600 border border-transparent', - }, - secondary: { - contained: 'bg-gray-200 hover:bg-gray-300 active:bg-gray-400 text-gray-w border border-gray-200 border-opacity-0', - outlined: 'bg-gray-w hover:bg-gray-50 active:bg-gray-100 text-gray-600 border border-gray-600', - dashed: 'bg-transparent hover:bg-gray-50 active:bg-gray-100 text-gray-600 border-dashed border border-gray-600', - text: 'bg-transparent hover:bg-gray-50 active:bg-gray-100 text-gray-600 border border-gray-200 border-opacity-0', - transparent: 'bg-transparent hover:text-gray-700 active:text-gray-600 text-gray-900 border border-transparent', - }, - danger: { - contained: 'bg-error-700 hover:bg-error-800 active:bg-error-900 border border-gray-200 border-opacity-0', - outlined: 'bg-gray-w hover:bg-error-50 active:bg-error-100 text-error-700 border border-error-700', - dashed: 'bg-transparent hover:bg-error-50 active:bg-error-100 text-error-700 border-dashed border border-error-700', - text: 'bg-transparent hover:bg-error-50 active:bg-error-100 text-error-700 border border-error-700 border-opacity-0', - transparent: 'bg-transparent hover:text-gray-700 active:text-gray-600 text-gray-900 border border-transparent', - }, -}; - -export const VARIANT_CLASSES_DISABLED = { - contained: 'bg-gray-200 text-gray-500 border border-gray-500 border-opacity-0 cursor-not-allowed', - outlined: 'bg-gray-200 text-gray-500 border border-gray-500 cursor-not-allowed', - dashed: 'bg-gray-200 text-gray-500 border-dashed border border-gray-500 cursor-not-allowed', - text: 'bg-gray-200 text-gray-500 border border-gray-500 border-opacity-0 cursor-not-allowed', - transparent: 'text-gray-500 border border-transparent cursor-not-allowed', -}; - -export const LABEL_CLASSES_COMMON = 'inline-flex capitalize-first line-clamp-1 text-nowrap'; -export const LABEL_CLASSES_PADDING_SIZE = { - extraSmall: 'px-0.25 py-0.25', - small: 'px-0.5 py-0.25', - medium: 'px-1 py-0.25', -}; - -export const buttonClassBuilder = ( - variant: ButtonVariant, - color: ButtonColor, - size: ButtonSize, - disabled: boolean, - hasLabel: boolean, -): string => { - const baseClasses = hasLabel ? COMMON_CLASSES : classMerger(COMMON_CLASSES, SINGLE_ICON_CLASSES[size]); - - if (disabled) { - return classMerger(baseClasses, VARIANT_CLASSES_DISABLED[variant], SIZE_CLASSES[size]); - } - return classMerger(baseClasses, VARIANT_CLASSES[color][variant], FOCUS_CLASSES[color], SIZE_CLASSES[size]); -}; - -export function labelClassBuilder(size: ButtonSize) { - return classMerger(LABEL_CLASSES_COMMON, LABEL_CLASSES_PADDING_SIZE[size]); -} diff --git a/src/components/common/base/stdButton/tests/buttonClassBuilder.test.ts b/src/components/common/base/stdButton/tests/buttonClassBuilder.test.ts deleted file mode 100644 index 2433687..0000000 --- a/src/components/common/base/stdButton/tests/buttonClassBuilder.test.ts +++ /dev/null @@ -1,110 +0,0 @@ -/* - * This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at https://mozilla.org/MPL/2.0/. - */ - -import { - buttonClassBuilder, - COMMON_CLASSES, - VARIANT_CLASSES, - SIZE_CLASSES, - FOCUS_CLASSES, - VARIANT_CLASSES_DISABLED, - labelClassBuilder, - SINGLE_ICON_CLASSES, - LABEL_CLASSES_PADDING_SIZE, -} from '../buttonClassBuilder'; - -describe('buttonClassBuilder function', () => { - it('should have the common classes', () => { - expect(buttonClassBuilder('contained', 'primary', 'medium', false, true).includes(COMMON_CLASSES)).toBe(true); - }); - it('should have the proper variant and color classes', () => { - expect( - buttonClassBuilder('contained', 'primary', 'medium', false, true).includes(VARIANT_CLASSES.primary.contained), - ).toBe(true); - expect( - buttonClassBuilder('dashed', 'primary', 'medium', false, true).includes(VARIANT_CLASSES.primary.dashed), - ).toBe(true); - expect( - buttonClassBuilder('outlined', 'primary', 'medium', false, true).includes(VARIANT_CLASSES.primary.outlined), - ).toBe(true); - expect(buttonClassBuilder('text', 'primary', 'medium', false, true).includes(VARIANT_CLASSES.primary.text)).toBe( - true, - ); - expect( - buttonClassBuilder('transparent', 'primary', 'medium', false, true).includes(VARIANT_CLASSES.primary.transparent), - ).toBe(true); - expect( - buttonClassBuilder('contained', 'secondary', 'medium', false, true).includes(VARIANT_CLASSES.secondary.contained), - ).toBe(true); - expect( - buttonClassBuilder('dashed', 'secondary', 'medium', false, true).includes(VARIANT_CLASSES.secondary.dashed), - ).toBe(true); - expect( - buttonClassBuilder('outlined', 'secondary', 'medium', false, true).includes(VARIANT_CLASSES.secondary.outlined), - ).toBe(true); - expect( - buttonClassBuilder('text', 'secondary', 'medium', false, true).includes(VARIANT_CLASSES.secondary.text), - ).toBe(true); - expect( - buttonClassBuilder('transparent', 'secondary', 'medium', false, true).includes( - VARIANT_CLASSES.secondary.transparent, - ), - ).toBe(true); - }); - it('should have the proper size classes', () => { - expect(buttonClassBuilder('contained', 'primary', 'medium', false, true).includes(SIZE_CLASSES.medium)).toBe(true); - expect(buttonClassBuilder('contained', 'primary', 'small', false, true).includes(SIZE_CLASSES.small)).toBe(true); - }); - it('should have the proper focus and color classes if disabled is false', () => { - expect(buttonClassBuilder('contained', 'primary', 'medium', false, true).includes(FOCUS_CLASSES.primary)).toBe( - true, - ); - expect(buttonClassBuilder('contained', 'secondary', 'medium', false, true).includes(FOCUS_CLASSES.secondary)).toBe( - true, - ); - }); - it('should not have any focus class if disabled is true', () => { - expect(buttonClassBuilder('contained', 'primary', 'medium', true, true).includes(FOCUS_CLASSES.primary)).toBe( - false, - ); - expect(buttonClassBuilder('contained', 'secondary', 'medium', true, true).includes(FOCUS_CLASSES.secondary)).toBe( - false, - ); - }); - it('should have the proper disabled classes', () => { - expect( - buttonClassBuilder('contained', 'primary', 'medium', true, true).includes(VARIANT_CLASSES_DISABLED.contained), - ).toBe(true); - expect( - buttonClassBuilder('dashed', 'primary', 'medium', true, true).includes(VARIANT_CLASSES_DISABLED.dashed), - ).toBe(true); - expect( - buttonClassBuilder('outlined', 'primary', 'medium', true, true).includes(VARIANT_CLASSES_DISABLED.outlined), - ).toBe(true); - expect(buttonClassBuilder('text', 'primary', 'medium', true, true).includes(VARIANT_CLASSES_DISABLED.text)).toBe( - true, - ); - expect( - buttonClassBuilder('transparent', 'primary', 'medium', true, true).includes(VARIANT_CLASSES_DISABLED.transparent), - ).toBe(true); - }); - it('should have the proper classes if there is no label and only one icon', () => { - expect(buttonClassBuilder('contained', 'primary', 'medium', true, false).includes(SINGLE_ICON_CLASSES.medium)).toBe( - true, - ); - expect(buttonClassBuilder('contained', 'primary', 'small', true, false).includes(SINGLE_ICON_CLASSES.small)).toBe( - true, - ); - }); -}); - -describe('button labelClassBuilder function', () => { - it('should return uniform margin if the component has no icon', () => { - expect(labelClassBuilder('extraSmall').includes(LABEL_CLASSES_PADDING_SIZE.extraSmall)).toBe(true); - expect(labelClassBuilder('small').includes(LABEL_CLASSES_PADDING_SIZE.small)).toBe(true); - expect(labelClassBuilder('medium').includes(LABEL_CLASSES_PADDING_SIZE.medium)).toBe(true); - }); -}); diff --git a/src/components/common/base/stdButton/tests/stdButton.test.tsx b/src/components/common/base/stdButton/tests/stdButton.test.tsx deleted file mode 100644 index 5df0055..0000000 --- a/src/components/common/base/stdButton/tests/stdButton.test.tsx +++ /dev/null @@ -1,43 +0,0 @@ -/* - * This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at https://mozilla.org/MPL/2.0/. - */ - -import { render, screen } from '@testing-library/react'; - -import { StdIconId } from '@/shared/utils/common/mappings/iconMaps'; -import StdButton from '../StdButton'; - -const TEST_LABEL = 'Label'; -const TEST_ICON = StdIconId.Add; -const TEST_ID = 'my-button'; - -describe('StdButton', () => { - it('renders the default StdButton component', () => { - render(); - const button = screen.getByRole('button'); - expect(button).toBeInTheDocument(); - expect(button.textContent).toBe(TEST_LABEL); - }); - - it('renders the StdButton with the proper id when specified', () => { - render(); - expect(document.querySelector(`#${TEST_ID}`)).toBeInTheDocument(); - }); - - it('renders the StdButton component with icon + label', () => { - render(); - const button = screen.getByRole('button'); - expect(button).toBeInTheDocument(); - expect(button.textContent).toContain(TEST_LABEL); - expect(screen.getByTitle(TEST_ICON)).toBeInTheDocument(); - }); - - it('renders the StdButton component with icon and no label', () => { - render(); - const button = screen.getByRole('button'); - expect(button).toBeInTheDocument(); - expect(screen.getByTitle(TEST_ICON)).toBeInTheDocument(); - }); -}); diff --git a/src/components/common/base/stdChip/StdChip.tsx b/src/components/common/base/stdChip/StdChip.tsx deleted file mode 100644 index 8a54a9e..0000000 --- a/src/components/common/base/stdChip/StdChip.tsx +++ /dev/null @@ -1,69 +0,0 @@ -/* - * This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at https://mozilla.org/MPL/2.0/. - */ - -import useActiveKeyboard from '@/hooks/common/useActiveKeyboard'; -import { useStdId } from '@/hooks/common/useStdId'; -import { StdIconId } from '@/shared/utils/common/mappings/iconMaps'; - -import StdIcon from '@common/base/stdIcon/StdIcon'; -import { MouseEventHandler } from 'react'; -import { chipClassBuilder } from './chipClassBuilder'; - -export type ChipStatus = 'primary' | 'secondary' | 'success' | 'error'; - -export type StdChipProps = { - id?: string; - status?: ChipStatus; - label?: string; - icon?: StdIconId; - onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void; - onClose?: MouseEventHandler; -}; - -const CHIP_ICON_SIZE = 16; -const CLOSE_ICON_SIZE = 12; - -const StdChip = ({ id: propsId, label, status = 'primary', icon, onClose, onClick }: StdChipProps) => { - const id = useStdId('chip', propsId); - const [handlerKeyboardEvent, isActiveKeyboard] = useActiveKeyboard((e) => onClick?.(e), { id }); - const { labelClasses, chipClasses, closeButtonClasses } = chipClassBuilder( - status, - isActiveKeyboard, - label, - icon, - onClick, - onClose, - ); - - return ( - - {icon && } - {label && {label}} - {onClose && ( - - )} - - ); -}; - -export default StdChip; diff --git a/src/components/common/base/stdChip/chipClassBuilder.ts b/src/components/common/base/stdChip/chipClassBuilder.ts deleted file mode 100644 index d71036c..0000000 --- a/src/components/common/base/stdChip/chipClassBuilder.ts +++ /dev/null @@ -1,85 +0,0 @@ -/* - * This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at https://mozilla.org/MPL/2.0/. - */ - -import { StdIconId } from '@/shared/utils/common/mappings/iconMaps'; -import { clsx } from 'clsx'; -import { MouseEventHandler } from 'react'; -import { ChipStatus } from './StdChip'; - -export const COMMON_CLASSES = - 'active h-3 py-0.5 rounded-full font-semibold inline-flex gap-0.75 items-center align-middle border-2 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-gray-900 hover:shadow-2'; - -const COMMON_BORDER_CLASSES = 'border border-transparent'; - -const COMMON_LABEL_CLASSES = 'text-caption font-normal leading-none'; - -export const ACTIVE_CLASSES = { - primary: - 'hover:bg-gray-300 hover:cursor-pointer active:border-primary-600 active:bg-gray-200 hover:text-gray-900 active:text-gray-900', - secondary: - 'hover:bg-primary-200 hover:cursor-pointer active:border-primary-600 active:bg-primary-100 hover:text-primary-900 active:text-primary-900', - success: - 'hover:bg-success-300 hover:cursor-pointer active:border-success-600 active:bg-success-200 hover:text-success-900 active:text-success-900', - error: - 'hover:bg-error-200 hover:cursor-pointer active:border-error-600 active:bg-error-100 hover:text-error-900 active:text-error-900', -}; - -export const ACTIVE_KEYBOARD_CLASSES = { - primary: 'bg-gray-200 border-primary-600', - secondary: 'bg-primary-100 border-primary-600', - success: ' bg-success-200 border-success-600', - error: 'bg-error-100 border-error-600', -}; - -export const STATUS_CLASSES = { - primary: 'bg-gray-200 text-gray-700', - secondary: 'bg-primary-100 text-primary-700', - success: 'bg-success-100 text-success-700', - error: 'bg-error-100 text-error-700', -}; - -const CLOSE_BUTTON_CLASSES = - 'align-center flex h-1.5 w-1.5 flex-col items-center justify-center text-gray-600 rounded-full hover:bg-gray-400 hover:text-gray-700 active:bg-gray-500 active:text-gray-800'; - -const FOCUS_CLOSE_BUTTON_CLASSES = - 'focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-0 focus-visible:outline-gray-900 focus-visible:rounded'; - -export const PADDING_X = { - paddingLeftWithoutIcon: 'pl-1.5', - paddingLeftWithIcon: 'pl-0.75', - paddingRightWithoutCloseButton: 'pr-1.5', - paddingRightWithCloseButton: 'pr-0.5', - paddingDefault: 'px-1.5', -}; - -const paddingChip = (label?: string, icon?: StdIconId, onClose?: MouseEventHandler): string => { - if (!onClose && ((icon && !label) || (!icon && label))) { - return PADDING_X.paddingDefault; - } - const paddingLeft = icon ? PADDING_X.paddingLeftWithIcon : PADDING_X.paddingLeftWithoutIcon; - const paddingRight = onClose ? PADDING_X.paddingRightWithCloseButton : PADDING_X.paddingRightWithoutCloseButton; - return clsx(paddingLeft, paddingRight); -}; - -export const chipClassBuilder = ( - status: ChipStatus, - isActive: boolean, - label?: string, - icon?: StdIconId, - onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void, - onClose?: MouseEventHandler, -) => ({ - chipClasses: clsx( - COMMON_CLASSES, - !isActive && COMMON_BORDER_CLASSES, - !isActive && STATUS_CLASSES[status], - onClick && ACTIVE_CLASSES[status], - isActive && ACTIVE_KEYBOARD_CLASSES[status], - paddingChip(label, icon, onClose), - ), - labelClasses: COMMON_LABEL_CLASSES, - closeButtonClasses: clsx(CLOSE_BUTTON_CLASSES, FOCUS_CLOSE_BUTTON_CLASSES), -}); diff --git a/src/components/common/base/stdChip/tests/chipClassBuilder.test.ts b/src/components/common/base/stdChip/tests/chipClassBuilder.test.ts deleted file mode 100644 index e001187..0000000 --- a/src/components/common/base/stdChip/tests/chipClassBuilder.test.ts +++ /dev/null @@ -1,108 +0,0 @@ -/* - * This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at https://mozilla.org/MPL/2.0/. - */ - -import { MouseEventHandler } from 'react'; -import { ChipStatus } from '../StdChip'; -import { - ACTIVE_CLASSES, - ACTIVE_KEYBOARD_CLASSES, - COMMON_CLASSES, - PADDING_X, - STATUS_CLASSES, - chipClassBuilder, -} from '../chipClassBuilder'; -import { StdIconId } from '@/shared/utils/common/mappings/iconMaps'; -import { noop } from '@/shared/utils/common/defaultUtils'; - -const defaultConf = { - status: 'primary', - isActive: false, - label: 'text', - icon: StdIconId.Add, - onClick: noop, - onClose: undefined, -} as { - status: ChipStatus; - isActive: boolean; - label?: string; - icon?: StdIconId; - onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void; - onClose?: MouseEventHandler; -}; - -const generateClasses = (input: typeof defaultConf) => - chipClassBuilder(input.status, input.isActive, input.label, input.icon, input.onClick, input.onClose); - -describe('generateClasses function', () => { - it('should have the common classes', () => { - expect(generateClasses(defaultConf).chipClasses.includes(COMMON_CLASSES)).toBe(true); - }); - it('should have the proper variant and type classes', () => { - expect(generateClasses(defaultConf).chipClasses.includes(STATUS_CLASSES.primary)).toBe(true); - expect( - generateClasses({ ...defaultConf, status: 'secondary' }).chipClasses.includes(STATUS_CLASSES.secondary), - ).toBe(true); - expect( - generateClasses({ ...defaultConf, status: 'success', onClose: noop }).chipClasses.includes( - STATUS_CLASSES.success, - ), - ).toBe(true); - expect( - generateClasses({ ...defaultConf, status: 'error', onClose: noop }).chipClasses.includes(STATUS_CLASSES.error), - ).toBe(true); - expect( - generateClasses({ status: 'primary', isActive: false, label: 'text' }).chipClasses.includes( - PADDING_X.paddingDefault, - ), - ).toBe(true); - expect( - generateClasses({ ...defaultConf, onClose: noop, icon: undefined }).chipClasses.includes( - PADDING_X.paddingRightWithCloseButton, - ), - ).toBe(true); - expect(generateClasses(defaultConf).chipClasses.includes(PADDING_X.paddingLeftWithIcon)).toBe(true); - expect(generateClasses(defaultConf).chipClasses.includes(ACTIVE_CLASSES.primary)).toBe(true); - expect( - generateClasses({ ...defaultConf, status: 'secondary' }).chipClasses.includes(ACTIVE_CLASSES.secondary), - ).toBe(true); - expect(generateClasses({ ...defaultConf, status: 'success' }).chipClasses.includes(ACTIVE_CLASSES.success)).toBe( - true, - ); - expect(generateClasses({ ...defaultConf, status: 'error' }).chipClasses.includes(ACTIVE_CLASSES.error)).toBe(true); - }); - it('should have the active keyboard classes', () => { - expect( - generateClasses({ ...defaultConf, isActive: true }).chipClasses.includes(ACTIVE_KEYBOARD_CLASSES.primary), - ).toBe(true); - expect( - generateClasses({ ...defaultConf, isActive: true, status: 'secondary' }).chipClasses.includes( - ACTIVE_KEYBOARD_CLASSES.secondary, - ), - ).toBe(true); - expect( - generateClasses({ ...defaultConf, isActive: true, status: 'success' }).chipClasses.includes( - ACTIVE_KEYBOARD_CLASSES.success, - ), - ).toBe(true); - expect( - generateClasses({ ...defaultConf, isActive: true, status: 'error' }).chipClasses.includes( - ACTIVE_KEYBOARD_CLASSES.error, - ), - ).toBe(true); - }); - it("shouldn't have the active keyboard classes", () => { - expect(generateClasses(defaultConf).chipClasses.includes(ACTIVE_KEYBOARD_CLASSES.primary)).toBe(false); - expect( - generateClasses({ ...defaultConf, status: 'secondary' }).chipClasses.includes(ACTIVE_KEYBOARD_CLASSES.secondary), - ).toBe(false); - expect( - generateClasses({ ...defaultConf, status: 'success' }).chipClasses.includes(ACTIVE_KEYBOARD_CLASSES.success), - ).toBe(false); - expect( - generateClasses({ ...defaultConf, status: 'error' }).chipClasses.includes(ACTIVE_KEYBOARD_CLASSES.error), - ).toBe(false); - }); -}); diff --git a/src/components/common/base/stdChip/tests/stdChip.test.tsx b/src/components/common/base/stdChip/tests/stdChip.test.tsx deleted file mode 100644 index 0be2e30..0000000 --- a/src/components/common/base/stdChip/tests/stdChip.test.tsx +++ /dev/null @@ -1,62 +0,0 @@ -/* - * This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at https://mozilla.org/MPL/2.0/. - */ - -import { StdIconId } from '@/shared/utils/common/mappings/iconMaps'; -import { render, screen } from '@testing-library/react'; - -import StdChip from '../StdChip'; - -const TEST_LABEL = 'Label'; -const TEST_ICON = StdIconId.Add; -const TEST_CLOSE = 'close'; -const TEST_ID = 'my-chip'; -const testOnClose = () => {}; - -describe('Std Chip', () => { - it('renders the default Std Chip component', () => { - render(); - const chip = screen.getByRole('listitem'); - expect(chip).toBeInTheDocument(); - expect(screen.getByText(TEST_LABEL)).toBeInTheDocument(); - }); - - it('renders the StdChip with the proper id when specified', () => { - render(); - expect(document.querySelector(`#${TEST_ID}`)).toBeInTheDocument(); - }); - - it('renders the Std Chip component with icon + label', () => { - render(); - const chip = screen.getByRole('listitem'); - expect(chip).toBeInTheDocument(); - expect(screen.getByText(TEST_LABEL)).toBeInTheDocument(); - expect(screen.getByTitle(TEST_ICON)).toBeInTheDocument(); - }); - - it('renders the Std Chip component with label + delete', () => { - render(); - const chip = screen.getByRole('listitem'); - expect(chip).toBeInTheDocument(); - expect(screen.getByText(TEST_LABEL)).toBeInTheDocument(); - expect(screen.getByTitle(TEST_CLOSE)).toBeInTheDocument(); - }); - - it('renders the Std Chip component with icon + label + delete', () => { - render(); - const chip = screen.getByRole('listitem'); - expect(chip).toBeInTheDocument(); - expect(screen.getByText(TEST_LABEL)).toBeInTheDocument(); - expect(screen.getByTitle(TEST_ICON)).toBeInTheDocument(); - expect(screen.getByTitle(TEST_CLOSE)).toBeInTheDocument(); - }); - - it('renders the Std Chip component with icon only', () => { - render(); - const chip = screen.getByRole('listitem'); - expect(chip).toBeInTheDocument(); - expect(screen.getByTitle(TEST_ICON)).toBeInTheDocument(); - }); -}); diff --git a/src/components/common/base/stdIcon/tests/iconClassBuilder.test.ts b/src/components/common/base/stdIcon/tests/iconClassBuilder.test.ts deleted file mode 100644 index 9bb3392..0000000 --- a/src/components/common/base/stdIcon/tests/iconClassBuilder.test.ts +++ /dev/null @@ -1,18 +0,0 @@ -/* - * This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at https://mozilla.org/MPL/2.0/. - */ - -import { POINTER_CLASS, iconClassBuilder } from '../iconClassBuilder'; - -describe('iconClassBuilder function', () => { - const TEST_CLASS = 'text-gray-700'; - it('should always include the pointer class', () => { - expect(iconClassBuilder(undefined).includes(POINTER_CLASS)).toBe(true); - expect(iconClassBuilder(TEST_CLASS).includes(POINTER_CLASS)).toBe(true); - }); - it('should have the passed color in the returned string', () => { - expect(iconClassBuilder(TEST_CLASS).includes(TEST_CLASS)).toBe(true); - }); -}); diff --git a/src/components/common/base/stdIcon/tests/stdIcon.test.tsx b/src/components/common/base/stdIcon/tests/stdIcon.test.tsx deleted file mode 100644 index 9779831..0000000 --- a/src/components/common/base/stdIcon/tests/stdIcon.test.tsx +++ /dev/null @@ -1,19 +0,0 @@ -/* - * This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at https://mozilla.org/MPL/2.0/. - */ - -import { render, screen } from '@testing-library/react'; - -import { StdIconId } from '@/shared/utils/common/mappings/iconMaps'; -import StdIcon from '../StdIcon'; - -const TEST_ICON = StdIconId.Add; - -describe('StdIcon', () => { - it('renders StdIcon component', () => { - render(); - expect(screen.getByTitle(TEST_ICON)).toBeInTheDocument(); - }); -}); diff --git a/src/components/common/base/stdIconButton/StdIconButton.tsx b/src/components/common/base/stdIconButton/StdIconButton.tsx deleted file mode 100644 index cb6d391..0000000 --- a/src/components/common/base/stdIconButton/StdIconButton.tsx +++ /dev/null @@ -1,66 +0,0 @@ -/* - * This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at https://mozilla.org/MPL/2.0/. - */ - -import { useStdId } from '@/hooks/useStdId'; -import { TailwindColorClass } from '@/shared/types/common/TailwindColorClass.type'; -import { StdIconId } from '@/shared/utils/common/mappings/iconMaps'; - -import StdIcon from '@common/base/stdIcon/StdIcon'; -import { RotationOptionsType } from '../stdIcon/Icon'; -import { iconButtonClassBuilder } from './iconButtonClassBuilder'; - -export type IconButtonVariant = 'default' | 'danger' | 'white'; // White is temporary. Will be removed once the good one is designed -export type IconButtonSize = 'extraSmall' | 'small' | 'medium'; - -export interface StdIconButtonProps { - icon: StdIconId; - size?: IconButtonSize; - variant?: IconButtonVariant; - disabled?: boolean; - id?: string; - color?: TailwindColorClass; - onClick: (e: React.MouseEvent) => void; - rotationOptions?: RotationOptionsType; - rotate?: boolean; - appearEffect?: boolean; -} - -const ICON_SIZE: Record = { - extraSmall: 12, - small: 16, - medium: 20, -}; - -const StdIconButton = ({ - icon, - size = 'medium', - variant = 'default', - disabled = false, - id: propsId, - color, - onClick, - rotationOptions, - rotate, - appearEffect = true, -}: StdIconButtonProps) => { - const iconButtonClasses = iconButtonClassBuilder(variant, disabled, appearEffect); - const id = useStdId('icon-btn', propsId); - - return ( - - ); -}; - -export default StdIconButton; diff --git a/src/components/common/base/stdIconButton/iconButtonClassBuilder.ts b/src/components/common/base/stdIconButton/iconButtonClassBuilder.ts deleted file mode 100644 index 4775efb..0000000 --- a/src/components/common/base/stdIconButton/iconButtonClassBuilder.ts +++ /dev/null @@ -1,28 +0,0 @@ -/* - * This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at https://mozilla.org/MPL/2.0/. - */ - -import { clsx } from 'clsx'; -import type { IconButtonVariant } from './StdIconButton'; - -export const COMMON_CLASSES = 'flex items-center bg-transparent rounded-sm'; - -export const FOCUS_CLASSES = 'focus-visible:outline focus-visible:outline-1 focus-visible:outline-gray-900'; - -export const VARIANT_CLASSES = { - default: 'text-gray-700 hover:text-gray-800', - danger: 'text-gray-700 hover:bg-error-600 hover:text-gray-w', - white: 'text-gray-w hover:text-gray-100', // Temporary variant. Will be removed once the good one is designed -}; - -export const APPEAR_EFFECT_CLASSES = - 'duration-50 opacity-0 transition-opacity group-hover:opacity-100 focus-visible:opacity-100'; - -export const VARIANT_CLASSES_DISABLED = 'text-gray-500 cursor-not-allowed pointer-events-none'; - -export const iconButtonClassBuilder = (variant: IconButtonVariant, disabled: boolean, appearEffect: boolean): string => - disabled - ? clsx(COMMON_CLASSES, VARIANT_CLASSES_DISABLED) - : clsx(COMMON_CLASSES, VARIANT_CLASSES[variant], FOCUS_CLASSES, appearEffect ? APPEAR_EFFECT_CLASSES : ''); diff --git a/src/components/common/base/stdIconButton/tests/StdIconButton.test.tsx b/src/components/common/base/stdIconButton/tests/StdIconButton.test.tsx deleted file mode 100644 index 80d2eee..0000000 --- a/src/components/common/base/stdIconButton/tests/StdIconButton.test.tsx +++ /dev/null @@ -1,27 +0,0 @@ -/* - * This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at https://mozilla.org/MPL/2.0/. - */ - -import { noop } from '@/shared/utils/common/defaultUtils'; -import { StdIconId } from '@/shared/utils/common/mappings/iconMaps'; -import { render, screen } from '@testing-library/react'; - -import StdIconButton from '../StdIconButton'; - -const TEST_ICON = StdIconId.Add; -const TEST_ID = 'my-button'; - -describe('StdIconButton', () => { - it('renders the default StdIconButton component with icon', () => { - render(); - expect(screen.getByRole('button')).toBeInTheDocument(); - expect(screen.getByTitle(TEST_ICON)).toBeInTheDocument(); - }); - - it('renders the StdIconButton with the proper id when specified', () => { - render(); - expect(document.querySelector(`#${TEST_ID}`)).toBeInTheDocument(); - }); -}); diff --git a/src/components/common/base/stdIconButton/tests/iconButtonClassBuilder.test.ts b/src/components/common/base/stdIconButton/tests/iconButtonClassBuilder.test.ts deleted file mode 100644 index 356c480..0000000 --- a/src/components/common/base/stdIconButton/tests/iconButtonClassBuilder.test.ts +++ /dev/null @@ -1,51 +0,0 @@ -/* - * This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at https://mozilla.org/MPL/2.0/. - */ - -import { - APPEAR_EFFECT_CLASSES, - COMMON_CLASSES, - FOCUS_CLASSES, - VARIANT_CLASSES, - VARIANT_CLASSES_DISABLED, - iconButtonClassBuilder, -} from '../iconButtonClassBuilder'; - -describe('iconButtonClassBuilder function', () => { - it('should have common classes', () => { - expect(iconButtonClassBuilder('default', false, false).includes(COMMON_CLASSES)).toBe(true); - expect(iconButtonClassBuilder('danger', false, false).includes(COMMON_CLASSES)).toBe(true); - }); - - it('should have the proper variant classes', () => { - expect(iconButtonClassBuilder('default', false, false).includes(VARIANT_CLASSES.default)).toBe(true); - expect(iconButtonClassBuilder('danger', false, false).includes(VARIANT_CLASSES.danger)).toBe(true); - }); - - it('should have focus classes if disabled is false', () => { - expect(iconButtonClassBuilder('default', false, false).includes(FOCUS_CLASSES)).toBe(true); - expect(iconButtonClassBuilder('danger', false, false).includes(FOCUS_CLASSES)).toBe(true); - }); - - it('should not have focus classes if disabled is true', () => { - expect(iconButtonClassBuilder('default', true, false).includes(FOCUS_CLASSES)).toBe(false); - expect(iconButtonClassBuilder('danger', true, false).includes(FOCUS_CLASSES)).toBe(false); - }); - - it('should have disabled classes', () => { - expect(iconButtonClassBuilder('default', true, false).includes(VARIANT_CLASSES_DISABLED)).toBe(true); - expect(iconButtonClassBuilder('danger', true, false).includes(VARIANT_CLASSES_DISABLED)).toBe(true); - }); - - it('should have appear effect classes', () => { - expect(iconButtonClassBuilder('default', false, true).includes(APPEAR_EFFECT_CLASSES)).toBe(true); - expect(iconButtonClassBuilder('danger', false, true).includes(APPEAR_EFFECT_CLASSES)).toBe(true); - }); - - it("should't have appear effect classes", () => { - expect(iconButtonClassBuilder('default', true, true).includes(APPEAR_EFFECT_CLASSES)).toBe(false); - expect(iconButtonClassBuilder('danger', true, true).includes(APPEAR_EFFECT_CLASSES)).toBe(false); - }); -}); diff --git a/src/components/common/base/stdTag/StdTag.tsx b/src/components/common/base/stdTag/StdTag.tsx deleted file mode 100644 index 9d0b89e..0000000 --- a/src/components/common/base/stdTag/StdTag.tsx +++ /dev/null @@ -1,34 +0,0 @@ -/* - * This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at https://mozilla.org/MPL/2.0/. - */ - -import { useStdId } from '@/hooks/common/useStdId'; -import { tagClassBuilder } from './tagClassBuilder'; -import { StdIconId } from '@/shared/utils/common/mappings/iconMaps'; -import StdIconButton from '../stdIconButton/StdIconButton'; - -export type StdTagProps = { - id?: string; - label: string; - onDelete?: () => void; -}; - -const StdTag = ({ id: propsId, label, onDelete }: StdTagProps) => { - const tagClasses = tagClassBuilder(!!onDelete); - const id = useStdId('tag', propsId); - - return ( - - - {onDelete && ( - - - - )} - - ); -}; - -export default StdTag; diff --git a/src/components/common/base/stdTag/tagClassBuilder.ts b/src/components/common/base/stdTag/tagClassBuilder.ts deleted file mode 100644 index c44be01..0000000 --- a/src/components/common/base/stdTag/tagClassBuilder.ts +++ /dev/null @@ -1,11 +0,0 @@ -/* - * This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at https://mozilla.org/MPL/2.0/. - */ - -import { classMerger } from '@/shared/utils/common/classes/classMerger'; - -export const TAG_CLASSES = 'flex h-2.25 max-w-fit items-center rounded-sm bg-gray-200'; - -export const tagClassBuilder = (isClosable?: boolean) => classMerger(TAG_CLASSES, isClosable ? 'pl-0.5' : 'px-0.5'); diff --git a/src/components/common/base/stdTag/tests/stdTag.test.tsx b/src/components/common/base/stdTag/tests/stdTag.test.tsx deleted file mode 100644 index 2d01d9c..0000000 --- a/src/components/common/base/stdTag/tests/stdTag.test.tsx +++ /dev/null @@ -1,26 +0,0 @@ -/* - * This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at https://mozilla.org/MPL/2.0/. - */ - -import { render, screen } from '@testing-library/react'; -import StdTag from '../StdTag'; -import { StdIconId } from '@/shared/utils/common/mappings/iconMaps'; -import { noop } from '@/shared/utils/common/defaultUtils'; - -const TEST_LABEL = 'label'; -const TEST_ID = 'my-tag'; -const TEST_ICON = StdIconId.Close; - -describe('StdTag', () => { - it('renders the default StdTag component with the expected id', () => { - render(); - expect(document.querySelector(`#${TEST_ID}`)).toBeInTheDocument(); - }); - - it('renders the default StdTag component with the close button', () => { - render(); - expect(screen.getByTitle(TEST_ICON)).toBeInTheDocument(); - }); -}); diff --git a/src/components/common/base/stdTag/tests/tagClassBuilder.test.ts b/src/components/common/base/stdTag/tests/tagClassBuilder.test.ts deleted file mode 100644 index 6dcf661..0000000 --- a/src/components/common/base/stdTag/tests/tagClassBuilder.test.ts +++ /dev/null @@ -1,18 +0,0 @@ -/* - * This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at https://mozilla.org/MPL/2.0/. - */ - -import { TAG_CLASSES, tagClassBuilder } from '../tagClassBuilder'; - -describe('tagClassBuilder function', () => { - it('should have the common classes', () => { - expect(tagClassBuilder().includes(TAG_CLASSES)).toBe(true); - }); - - it('should have the correct padding classes', () => { - expect(tagClassBuilder().includes('px-0.5')).toBe(true); - expect(tagClassBuilder(true).includes('pl-0.5')).toBe(true); - }); -}); diff --git a/src/components/common/data/stdTable/lineRender/StdCollapseIcon.tsx b/src/components/common/data/stdTable/lineRender/StdCollapseIcon.tsx index f09aeee..7069cf6 100644 --- a/src/components/common/data/stdTable/lineRender/StdCollapseIcon.tsx +++ b/src/components/common/data/stdTable/lineRender/StdCollapseIcon.tsx @@ -4,18 +4,17 @@ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */ -import StdButton, { StdButtonProps } from '@/components/common/base/stdButton/StdButton'; -import { StdIconId } from '@/shared/utils/common/mappings/iconMaps'; +import { RdsButton, RdsButtonProps, RdsIconId } from 'rte-design-system-react'; -type StdCollapseIconProps = { - onClick: StdButtonProps['onClick']; +type RdsCollapseIconProps = { + onClick: RdsButtonProps['onClick']; isOpen: boolean; }; -const StdCollapseIcon = ({ onClick, isOpen }: StdCollapseIconProps) => ( - ( + diff --git a/src/components/common/data/stdTable/lineRender/tests/stdCollapseIcon.test.tsx b/src/components/common/data/stdTable/lineRender/tests/stdCollapseIcon.test.tsx deleted file mode 100644 index 7fc2034..0000000 --- a/src/components/common/data/stdTable/lineRender/tests/stdCollapseIcon.test.tsx +++ /dev/null @@ -1,22 +0,0 @@ -/* - * This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at https://mozilla.org/MPL/2.0/. - */ - -import { StdIconId } from '@/shared/utils/common/mappings/iconMaps'; -import { noop } from '@tanstack/react-table'; -import { render, screen } from '@testing-library/react'; -import StdCollapseIcon from '../StdCollapseIcon'; - -describe('StdCollapseIcon', () => { - it('renders the StdCollapseIcon component with isOpen to true', () => { - render(); - expect(screen.getByTitle(StdIconId.KeyboardArrowDown)).toBeInTheDocument(); - }); - - it('renders the StdCollapseIcon component with isOpen to false', () => { - render(); - expect(screen.getByTitle(StdIconId.KeyboardArrowRight)).toBeInTheDocument(); - }); -}); diff --git a/src/components/common/data/stdTablePagination/StdTablePagination.tsx b/src/components/common/data/stdTablePagination/StdTablePagination.tsx deleted file mode 100644 index 9b48dfb..0000000 --- a/src/components/common/data/stdTablePagination/StdTablePagination.tsx +++ /dev/null @@ -1,64 +0,0 @@ -/* - * This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at https://mozilla.org/MPL/2.0/. - */ - -import { useStdId } from '@/hooks/common/useStdId'; -import { StdIconId } from '@/shared/utils/common/mappings/iconMaps'; -import { useTranslation } from 'react-i18next'; -import StdButton from '../../base/stdButton/StdButton'; - -export type StdTablePaginationProps = { - id?: string; - count: number; - current: number; - intervalSize: number; - onChange: (index: number) => void; -}; - -const StdTablePagination = ({ id: propsId, count, intervalSize, current, onChange }: StdTablePaginationProps) => { - const { t } = useTranslation(); - const id = useStdId('table-pagination', propsId); - - const intervalStart = current * intervalSize + 1; - const intervalEnd = Math.min((current + 1) * intervalSize, count); - - const handlePreviousClick = () => { - if (current > 0) onChange(current - 1); - }; - - const handleNextClick = () => { - if (current < Math.ceil(count / intervalSize) - 1) onChange(current + 1); - }; - - return ( - - ); -}; - -export default StdTablePagination; diff --git a/src/components/common/data/stdTablePagination/tests/stdTablePagination.test.tsx b/src/components/common/data/stdTablePagination/tests/stdTablePagination.test.tsx deleted file mode 100644 index fd82829..0000000 --- a/src/components/common/data/stdTablePagination/tests/stdTablePagination.test.tsx +++ /dev/null @@ -1,28 +0,0 @@ -/* - * This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at https://mozilla.org/MPL/2.0/. - */ - -import { StdIconId } from '@/shared/utils/common/mappings/iconMaps'; -import { noop } from '@tanstack/react-table'; -import { render, screen } from '@testing-library/react'; - -import StdTablePagination from '../StdTablePagination'; - -const TEST_ID = 'pagination'; -const TEST_NEXT_ICON = StdIconId.KeyboardArrowRight; -const TEST_PREVIOUS_ICON = StdIconId.KeyboardArrowLeft; - -describe('StdTablePagination', () => { - it('renders the default StdTablePagination component with the proper id when specified', () => { - render(); - expect(document.querySelector(`#${TEST_ID}`)).toBeInTheDocument(); - }); - - it('renders the StdTablePagination with the right next and previous icons', () => { - render(); - expect(screen.getByTitle(TEST_NEXT_ICON)).toBeInTheDocument(); - expect(screen.getByTitle(TEST_PREVIOUS_ICON)).toBeInTheDocument(); - }); -}); diff --git a/src/components/common/forms/stdCheckbox/StdCheckbox.tsx b/src/components/common/forms/stdCheckbox/StdCheckbox.tsx deleted file mode 100644 index 0d14da7..0000000 --- a/src/components/common/forms/stdCheckbox/StdCheckbox.tsx +++ /dev/null @@ -1,95 +0,0 @@ -/* - * This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at https://mozilla.org/MPL/2.0/. - */ - -import { useStdId } from '@/hooks/useStdId'; -import { StdChangeHandler } from '@/shared/types'; -import { StdIconId } from '@/shared/utils/common/mappings/iconMaps'; - -import { useEffect, useRef } from 'react'; -import StdIcon from '../../base/stdIcon/StdIcon'; -import StdRequiredIndicator from '../stdRequiredIndicator/StdRequiredIndicator'; -import { checkboxClassBuilder } from './checkboxClassBuilder'; - -export type StdCheckboxProps = { - label?: string; - checkboxControl?: boolean; - value?: Exclude; - name?: string; - id?: string; - disabled?: boolean; - checked?: boolean; - defaultChecked?: boolean; - onChange?: StdChangeHandler; - onBlur?: (e: React.FocusEvent<{ checked: boolean }>) => void; - required?: boolean; - error?: boolean; - delayDebounce?: number; - indeterminate?: boolean; -}; - -const StdCheckbox = ({ - name, - value, - label, - disabled = false, - defaultChecked, - checkboxControl, - checked, - onChange, - onBlur, - id: propsId, - error = false, - required = false, - indeterminate, -}: StdCheckboxProps) => { - const inputRef = useRef(null); - - useEffect(() => { - if (inputRef.current) { - inputRef.current.indeterminate = !!indeterminate; - } - }, [indeterminate]); - - const { containerClasses, inputClasses, labelClasses } = checkboxClassBuilder(disabled, error); - - const id = useStdId('cbox', propsId); - - const handleOnChange = (event: React.ChangeEvent) => { - void onChange?.(event.target.checked); - }; - - return ( - - ); -}; - -export default StdCheckbox; diff --git a/src/components/common/forms/stdCheckbox/checkboxClassBuilder.ts b/src/components/common/forms/stdCheckbox/checkboxClassBuilder.ts deleted file mode 100644 index 80e6cf3..0000000 --- a/src/components/common/forms/stdCheckbox/checkboxClassBuilder.ts +++ /dev/null @@ -1,52 +0,0 @@ -/* - * This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at https://mozilla.org/MPL/2.0/. - */ - -import { clsx } from 'clsx'; - -export const COMMON_CHECKBOX_CLASSES = - 'box-content h-1.5 w-1.5 flex justify-center items-center rounded-sm border peer-[:not(:indeterminate):checked]:[&_.done-icon]:block peer-indeterminate:[&_.indeterminate-icon]:block peer-focus-visible:outline outline-offset-1 outline-1'; - -export const CHECKED_CLASSES = - 'peer-checked:bg-primary-600 peer-checked:border-primary-600 group-hover:peer-checked:bg-primary-700 group-hover:peer-checked:border-primary-700 group-active:peer-checked:bg-primary-900 group-active:peer-checked:border-primary-900 peer-focus-visible:peer-checked:outline-primary-900'; -export const INDETERMINATE_CLASSES = - 'peer-indeterminate:bg-primary-600 peer-indeterminate:border-primary-600 group-hover:peer-indeterminate:bg-primary-700 group-hover:peer-indeterminate:border-primary-700 group-active:peer-indeterminate:bg-primary-900 group-active:peer-indeterminate:border-primary-900 focus-visible:peer-indeterminate:outline-primary-900'; - -export const DISABLED_CLASSES = - 'peer-checked:bg-gray-500 peer-checked:border-gray-500 peer-indeterminate:bg-gray-500 peer-indeterminate:border-gray-500'; - -export const OTHER_CHECKBOX_CLASSES = { - enabled: clsx( - 'group-hover:shadow-1 group-active:shadow-2 border-gray-600 group-hover:bg-gray-200 group-active:bg-gray-300', - CHECKED_CLASSES, - INDETERMINATE_CLASSES, - ), - disabled: clsx('border-gray-500 bg-gray-200 text-gray-500 cursor-not-allowed', DISABLED_CLASSES), -}; -export const ERROR_CLASSES = - '[&]:border-error-600 peer-checked:[&]:border-error-600 outline-1 outline-offset-0 outline-error-600'; -export const COMMON_LABEL_CLASSES = 'text-body-s select-none'; -export const LABEL_TEXT_CLASSES = { - enabled: 'text-gray-700 peer-checked:text-gray-900 peer-indeterminate:text-gray-900', - disabled: 'text-gray-500', -}; - -export const ERROR_LABEL_TEXT_CLASS = 'text-error-600'; - -export const checkboxClassBuilder = (disabled: boolean, error: boolean) => { - const disabledKey = disabled ? 'disabled' : 'enabled'; - - return { - containerClasses: clsx('flex items-center gap-1 group', { 'cursor-pointer': !disabled }), - inputClasses: clsx( - COMMON_CHECKBOX_CLASSES, - OTHER_CHECKBOX_CLASSES[disabledKey], - !disabled && error && ERROR_CLASSES, - ), - labelClasses: clsx(COMMON_LABEL_CLASSES, LABEL_TEXT_CLASSES[disabledKey], { - [ERROR_LABEL_TEXT_CLASS]: error && !disabled, - }), - }; -}; diff --git a/src/components/common/forms/stdCheckbox/tests/StdCheckbox.test.tsx b/src/components/common/forms/stdCheckbox/tests/StdCheckbox.test.tsx deleted file mode 100644 index d463593..0000000 --- a/src/components/common/forms/stdCheckbox/tests/StdCheckbox.test.tsx +++ /dev/null @@ -1,43 +0,0 @@ -/* - * This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at https://mozilla.org/MPL/2.0/. - */ - -import { render, screen } from '@testing-library/react'; - -import StdCheckbox from '../StdCheckbox'; - -const TEST_LABEL = 'My checkbox'; -const TEST_ID = 'my-checkbox'; -const TEST_NAME = 'checkbox'; - -describe('StdCheckbox', () => { - it('renders the basic StdCheckbox component', () => { - render(); - expect(screen.getByRole('checkbox')).toBeInTheDocument(); - expect(screen.getByText(TEST_LABEL)).toBeInTheDocument(); - }); - - it('renders the StdCheckbox component with no label', () => { - render(); - expect(screen.getByRole('checkbox')).toBeInTheDocument(); - }); - - it('can properly find the checkbox when the id is specified', () => { - render(); - expect(document.querySelector(`#${TEST_ID}`)).toBeInTheDocument(); - }); - - it('renders the StdCheckbox with checked', () => { - render(); - expect(screen.getByRole('checkbox')).toBeInTheDocument(); - expect(screen.getByRole('checkbox')).toBeChecked(); - }); - - it('renders the StdCheckbox when disabled', () => { - render(); - expect(screen.getByRole('checkbox')).toBeInTheDocument(); - expect(screen.getByRole('checkbox')).toBeDisabled(); - }); -}); diff --git a/src/components/common/forms/stdCheckbox/tests/checkboxClassBuilder.test.ts b/src/components/common/forms/stdCheckbox/tests/checkboxClassBuilder.test.ts deleted file mode 100644 index 2828e34..0000000 --- a/src/components/common/forms/stdCheckbox/tests/checkboxClassBuilder.test.ts +++ /dev/null @@ -1,45 +0,0 @@ -/* - * This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at https://mozilla.org/MPL/2.0/. - */ - -import { - COMMON_CHECKBOX_CLASSES, - ERROR_CLASSES, - ERROR_LABEL_TEXT_CLASS, - LABEL_TEXT_CLASSES, - OTHER_CHECKBOX_CLASSES, - checkboxClassBuilder, -} from '../checkboxClassBuilder'; - -const INDIFFERENT_ERROR = false; - -describe('checkboxClassBuilder function', () => { - it('should always have the common classes', () => { - expect(checkboxClassBuilder(false, false).inputClasses.includes(COMMON_CHECKBOX_CLASSES)).toBe(true); - expect(checkboxClassBuilder(false, true).inputClasses.includes(COMMON_CHECKBOX_CLASSES)).toBe(true); - expect(checkboxClassBuilder(true, false).inputClasses.includes(COMMON_CHECKBOX_CLASSES)).toBe(true); - expect(checkboxClassBuilder(true, true).inputClasses.includes(COMMON_CHECKBOX_CLASSES)).toBe(true); - }); - it('should have the disabled classes if disabled', () => { - expect(checkboxClassBuilder(true, false).inputClasses.includes(OTHER_CHECKBOX_CLASSES.disabled)).toBe(true); - expect(checkboxClassBuilder(true, true).inputClasses.includes(OTHER_CHECKBOX_CLASSES.disabled)).toBe(true); - }); - it('should have the enabled classes if not disabled', () => { - expect(checkboxClassBuilder(false, false).inputClasses.includes(OTHER_CHECKBOX_CLASSES.enabled)).toBe(true); - expect(checkboxClassBuilder(false, true).inputClasses.includes(OTHER_CHECKBOX_CLASSES.enabled)).toBe(true); - }); - it('should have the error classes if error and not disabled', () => { - expect(checkboxClassBuilder(false, true).inputClasses.includes(ERROR_CLASSES)).toBe(true); - expect(checkboxClassBuilder(false, true).labelClasses.includes(ERROR_LABEL_TEXT_CLASS)).toBe(true); - }); - it('should not have the error classes if disabled or error is false', () => { - expect(checkboxClassBuilder(true, true).inputClasses.includes(ERROR_CLASSES)).toBe(false); - expect(checkboxClassBuilder(true, false).inputClasses.includes(ERROR_CLASSES)).toBe(false); - expect(checkboxClassBuilder(false, false).inputClasses.includes(ERROR_CLASSES)).toBe(false); - }); - it('should return the disabled text if disabled', () => { - expect(checkboxClassBuilder(true, INDIFFERENT_ERROR).labelClasses.includes(LABEL_TEXT_CLASSES.disabled)).toBe(true); - }); -}); diff --git a/src/components/common/forms/stdRadioButton/StdRadioButton.tsx b/src/components/common/forms/stdRadioButton/StdRadioButton.tsx deleted file mode 100644 index 5aeaff1..0000000 --- a/src/components/common/forms/stdRadioButton/StdRadioButton.tsx +++ /dev/null @@ -1,72 +0,0 @@ -/* - * This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at https://mozilla.org/MPL/2.0/. - */ - -import { useInputFormState } from '@/hooks/useInputFormState'; -import { useStdId } from '@/hooks/useStdId'; -import { StdChangeHandler } from '@/shared/types/common/StdBase.type'; - -import { ChangeEvent, useRef } from 'react'; -import radioButtonClassBuilder from './radioButtonClassBuilder'; - -export interface StdRadioButtonProps { - value: string; - label: string; - name?: string; - id?: string; - defaultChecked?: boolean; - checked?: boolean; - disabled?: boolean; - onChange?: StdChangeHandler; -} - -const StdRadioButton = ({ - name, - value, - id: propsId, - label, - defaultChecked, - checked, - disabled, - onChange, -}: StdRadioButtonProps) => { - const { labelContainerClasses, containerClasses, radioCircleClasses, textClasses } = - radioButtonClassBuilder(disabled); - const id = useStdId('rbn', propsId); - const inputRef = useRef(null); - const { setValue: setStateValue } = useInputFormState(checked, defaultChecked, onChange, (checkedStatus) => { - if (inputRef.current) { - inputRef.current.checked = !!checkedStatus; - } - }); - - const handleChange = (event: ChangeEvent) => { - setStateValue(event.target.checked); - }; - - return ( -