diff --git a/package.json b/package.json index 6aa27f2..5f022ce 100644 --- a/package.json +++ b/package.json @@ -18,11 +18,13 @@ "@radix-ui/react-checkbox": "^1.0.4", "@radix-ui/react-label": "^2.0.2", "@radix-ui/react-radio-group": "^1.1.3", + "@reduxjs/toolkit": "^2.0.1", "@storybook/theming": "^7.2.1", "clsx": "^2.0.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-hook-form": "^7.45.2", + "react-redux": "^9.1.0", "react-router-dom": "^6.14.2", "react-toastify": "^9.1.3", "remeda": "^1.24.0", @@ -55,7 +57,7 @@ "sass": "^1.64.1", "storybook": "^7.2.1", "stylelint": "^15.10.2", - "typescript": "^5.0.2", + "typescript": "^5.3.3", "vite": "^4.4.5" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6e03f24..b301c79 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -20,6 +20,9 @@ dependencies: '@radix-ui/react-radio-group': specifier: ^1.1.3 version: 1.1.3(@types/react-dom@18.2.7)(@types/react@18.2.15)(react-dom@18.2.0)(react@18.2.0) + '@reduxjs/toolkit': + specifier: ^2.0.1 + version: 2.0.1(react-redux@9.1.0)(react@18.2.0) '@storybook/theming': specifier: ^7.2.1 version: 7.2.1(react-dom@18.2.0)(react@18.2.0) @@ -35,6 +38,9 @@ dependencies: react-hook-form: specifier: ^7.45.2 version: 7.45.2(react@18.2.0) + react-redux: + specifier: ^9.1.0 + version: 9.1.0(@types/react@18.2.15)(react@18.2.0)(redux@5.0.1) react-router-dom: specifier: ^6.14.2 version: 6.14.2(react-dom@18.2.0)(react@18.2.0) @@ -57,7 +63,7 @@ devDependencies: version: 4.3.1(@types/react@18.2.15)(react-dom@18.2.0)(react@18.2.0) '@it-incubator/eslint-config': specifier: ^0.1.3 - version: 0.1.3(prettier@3.0.0)(typescript@5.0.2) + version: 0.1.3(prettier@3.0.0)(typescript@5.3.3) '@it-incubator/prettier-config': specifier: ^0.1.2 version: 0.1.2 @@ -81,10 +87,10 @@ devDependencies: version: 7.2.1(@types/react-dom@18.2.7)(@types/react@18.2.15)(react-dom@18.2.0)(react@18.2.0) '@storybook/react': specifier: ^7.2.1 - version: 7.2.1(react-dom@18.2.0)(react@18.2.0)(typescript@5.0.2) + version: 7.2.1(react-dom@18.2.0)(react@18.2.0)(typescript@5.3.3) '@storybook/react-vite': specifier: ^7.2.1 - version: 7.2.1(react-dom@18.2.0)(react@18.2.0)(typescript@5.0.2)(vite@4.4.5) + version: 7.2.1(react-dom@18.2.0)(react@18.2.0)(typescript@5.3.3)(vite@4.4.5) '@storybook/testing-library': specifier: ^0.2.0 version: 0.2.0 @@ -99,10 +105,10 @@ devDependencies: version: 18.2.7 '@typescript-eslint/eslint-plugin': specifier: ^6.0.0 - version: 6.0.0(@typescript-eslint/parser@6.0.0)(eslint@8.45.0)(typescript@5.0.2) + version: 6.0.0(@typescript-eslint/parser@6.0.0)(eslint@8.45.0)(typescript@5.3.3) '@typescript-eslint/parser': specifier: ^6.0.0 - version: 6.0.0(eslint@8.45.0)(typescript@5.0.2) + version: 6.0.0(eslint@8.45.0)(typescript@5.3.3) '@vitejs/plugin-react': specifier: ^4.0.3 version: 4.0.3(vite@4.4.5) @@ -117,7 +123,7 @@ devDependencies: version: 0.4.3(eslint@8.45.0) eslint-plugin-storybook: specifier: ^0.6.13 - version: 0.6.13(eslint@8.45.0)(typescript@5.0.2) + version: 0.6.13(eslint@8.45.0)(typescript@5.3.3) sass: specifier: ^1.64.1 version: 1.64.1 @@ -128,8 +134,8 @@ devDependencies: specifier: ^15.10.2 version: 15.10.2 typescript: - specifier: ^5.0.2 - version: 5.0.2 + specifier: ^5.3.3 + version: 5.3.3 vite: specifier: ^4.4.5 version: 4.4.5(@types/node@20.4.5)(sass@1.64.1) @@ -1939,11 +1945,11 @@ packages: engines: {node: '>=8'} dev: true - /@it-incubator/eslint-config@0.1.3(prettier@3.0.0)(typescript@5.0.2): + /@it-incubator/eslint-config@0.1.3(prettier@3.0.0)(typescript@5.3.3): resolution: {integrity: sha512-YABg8TFU/v514BWrHpFuJmqMLKF6wA+bHJJm1ZBhTAsm57GGcwGsz4xHrByoFF8Q/TbmzxF5DZ4WoKJPqupkmQ==} dependencies: - '@typescript-eslint/eslint-plugin': 6.0.0(@typescript-eslint/parser@6.0.0)(eslint@8.45.0)(typescript@5.0.2) - '@typescript-eslint/parser': 6.0.0(eslint@8.45.0)(typescript@5.0.2) + '@typescript-eslint/eslint-plugin': 6.0.0(@typescript-eslint/parser@6.0.0)(eslint@8.45.0)(typescript@5.3.3) + '@typescript-eslint/parser': 6.0.0(eslint@8.45.0)(typescript@5.3.3) eslint: 8.45.0 eslint-config-prettier: 8.8.0(eslint@8.45.0) eslint-import-resolver-node: 0.3.7 @@ -2029,7 +2035,7 @@ packages: chalk: 4.1.2 dev: true - /@joshwooding/vite-plugin-react-docgen-typescript@0.2.1(typescript@5.0.2)(vite@4.4.5): + /@joshwooding/vite-plugin-react-docgen-typescript@0.2.1(typescript@5.3.3)(vite@4.4.5): resolution: {integrity: sha512-ou4ZJSXMMWHqGS4g8uNRbC5TiTWxAgQZiVucoUrOCWuPrTbkpJbmVyIi9jU72SBry7gQtuMEDp4YR8EEXAg7VQ==} peerDependencies: typescript: '>= 4.3.x' @@ -2041,8 +2047,8 @@ packages: glob: 7.2.3 glob-promise: 4.2.2(glob@7.2.3) magic-string: 0.27.0 - react-docgen-typescript: 2.2.2(typescript@5.0.2) - typescript: 5.0.2 + react-docgen-typescript: 2.2.2(typescript@5.3.3) + typescript: 5.3.3 vite: 4.4.5(@types/node@20.4.5)(sass@1.64.1) dev: true @@ -2672,6 +2678,25 @@ packages: dependencies: '@babel/runtime': 7.22.6 + /@reduxjs/toolkit@2.0.1(react-redux@9.1.0)(react@18.2.0): + resolution: {integrity: sha512-fxIjrR9934cmS8YXIGd9e7s1XRsEU++aFc9DVNMFMRTM5Vtsg2DCRMj21eslGtDt43IUf9bJL3h5bwUlZleibA==} + peerDependencies: + react: ^16.9.0 || ^17.0.0 || ^18 + react-redux: ^7.2.1 || ^8.1.3 || ^9.0.0 + peerDependenciesMeta: + react: + optional: true + react-redux: + optional: true + dependencies: + immer: 10.0.3 + react: 18.2.0 + react-redux: 9.1.0(@types/react@18.2.15)(react@18.2.0)(redux@5.0.1) + redux: 5.0.1 + redux-thunk: 3.1.0(redux@5.0.1) + reselect: 5.1.0 + dev: false + /@remix-run/router@1.7.2: resolution: {integrity: sha512-7Lcn7IqGMV+vizMPoEl5F0XDshcdDYtMI6uJLQdQz5CfZAwy3vvGKYSUk789qndt5dEC4HfSjviSYlSoHGL2+A==} engines: {node: '>=14'} @@ -3113,7 +3138,7 @@ packages: - supports-color dev: true - /@storybook/builder-vite@7.2.1(typescript@5.0.2)(vite@4.4.5): + /@storybook/builder-vite@7.2.1(typescript@5.3.3)(vite@4.4.5): resolution: {integrity: sha512-D/RNcH6WAxMAMmC3w9wwgDbYUJ9SjSwc6NPcxGrKk9o0SWDsKWWx4r6mM0W5FJ7Wh11Ca46LLnPC3cFfEg4YDQ==} peerDependencies: '@preact/preset-vite': '*' @@ -3147,7 +3172,7 @@ packages: remark-external-links: 8.0.0 remark-slug: 6.1.0 rollup: 3.26.3 - typescript: 5.0.2 + typescript: 5.3.3 vite: 4.4.5(@types/node@20.4.5)(sass@1.64.1) transitivePeerDependencies: - encoding @@ -3586,7 +3611,7 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: true - /@storybook/react-vite@7.2.1(react-dom@18.2.0)(react@18.2.0)(typescript@5.0.2)(vite@4.4.5): + /@storybook/react-vite@7.2.1(react-dom@18.2.0)(react@18.2.0)(typescript@5.3.3)(vite@4.4.5): resolution: {integrity: sha512-sBMlrLf/zUDUk6bWQLu5/tERW82j9spGMD++O1mdum3eVfPwvsqjtGokTVx/eOLUYA9kqQFdUtjLSn0sS84bTQ==} engines: {node: '>=16'} peerDependencies: @@ -3594,10 +3619,10 @@ packages: react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 vite: ^3.0.0 || ^4.0.0 dependencies: - '@joshwooding/vite-plugin-react-docgen-typescript': 0.2.1(typescript@5.0.2)(vite@4.4.5) + '@joshwooding/vite-plugin-react-docgen-typescript': 0.2.1(typescript@5.3.3)(vite@4.4.5) '@rollup/pluginutils': 5.0.2 - '@storybook/builder-vite': 7.2.1(typescript@5.0.2)(vite@4.4.5) - '@storybook/react': 7.2.1(react-dom@18.2.0)(react@18.2.0)(typescript@5.0.2) + '@storybook/builder-vite': 7.2.1(typescript@5.3.3)(vite@4.4.5) + '@storybook/react': 7.2.1(react-dom@18.2.0)(react@18.2.0)(typescript@5.3.3) '@vitejs/plugin-react': 3.1.0(vite@4.4.5) ast-types: 0.14.2 magic-string: 0.30.2 @@ -3614,7 +3639,7 @@ packages: - vite-plugin-glimmerx dev: true - /@storybook/react@7.2.1(react-dom@18.2.0)(react@18.2.0)(typescript@5.0.2): + /@storybook/react@7.2.1(react-dom@18.2.0)(react@18.2.0)(typescript@5.3.3): resolution: {integrity: sha512-WRAVrSQKAtCoypUrrIXWGOvyGRVkrh73hSkKVC0gEqxWDmjZIZJ1uc3VrUd/yHJdLsqNphcAyU8Ahu52yozubg==} engines: {node: '>=16.0.0'} peerDependencies: @@ -3647,7 +3672,7 @@ packages: react-element-to-jsx-string: 15.0.0(react-dom@18.2.0)(react@18.2.0) ts-dedent: 2.2.0 type-fest: 2.19.0 - typescript: 5.0.2 + typescript: 5.3.3 util-deprecate: 1.0.2 transitivePeerDependencies: - encoding @@ -4073,6 +4098,10 @@ packages: resolution: {integrity: sha512-cputDpIbFgLUaGQn6Vqg3/YsJwxUwHLO13v3i5ouxT4lat0khip9AEWxtERujXV9wxIB1EyF97BSJFt6vpdI8g==} dev: true + /@types/use-sync-external-store@0.0.3: + resolution: {integrity: sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==} + dev: false + /@types/yargs-parser@21.0.0: resolution: {integrity: sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA==} dev: true @@ -4089,7 +4118,7 @@ packages: '@types/yargs-parser': 21.0.0 dev: true - /@typescript-eslint/eslint-plugin@6.0.0(@typescript-eslint/parser@6.0.0)(eslint@8.45.0)(typescript@5.0.2): + /@typescript-eslint/eslint-plugin@6.0.0(@typescript-eslint/parser@6.0.0)(eslint@8.45.0)(typescript@5.3.3): resolution: {integrity: sha512-xuv6ghKGoiq856Bww/yVYnXGsKa588kY3M0XK7uUW/3fJNNULKRfZfSBkMTSpqGG/8ZCXCadfh8G/z/B4aqS/A==} engines: {node: ^16.0.0 || >=18.0.0} peerDependencies: @@ -4101,10 +4130,10 @@ packages: optional: true dependencies: '@eslint-community/regexpp': 4.6.2 - '@typescript-eslint/parser': 6.0.0(eslint@8.45.0)(typescript@5.0.2) + '@typescript-eslint/parser': 6.0.0(eslint@8.45.0)(typescript@5.3.3) '@typescript-eslint/scope-manager': 6.0.0 - '@typescript-eslint/type-utils': 6.0.0(eslint@8.45.0)(typescript@5.0.2) - '@typescript-eslint/utils': 6.0.0(eslint@8.45.0)(typescript@5.0.2) + '@typescript-eslint/type-utils': 6.0.0(eslint@8.45.0)(typescript@5.3.3) + '@typescript-eslint/utils': 6.0.0(eslint@8.45.0)(typescript@5.3.3) '@typescript-eslint/visitor-keys': 6.0.0 debug: 4.3.4 eslint: 8.45.0 @@ -4114,13 +4143,13 @@ packages: natural-compare: 1.4.0 natural-compare-lite: 1.4.0 semver: 7.5.4 - ts-api-utils: 1.0.1(typescript@5.0.2) - typescript: 5.0.2 + ts-api-utils: 1.0.1(typescript@5.3.3) + typescript: 5.3.3 transitivePeerDependencies: - supports-color dev: true - /@typescript-eslint/parser@6.0.0(eslint@8.45.0)(typescript@5.0.2): + /@typescript-eslint/parser@6.0.0(eslint@8.45.0)(typescript@5.3.3): resolution: {integrity: sha512-TNaufYSPrr1U8n+3xN+Yp9g31vQDJqhXzzPSHfQDLcaO4tU+mCfODPxCwf4H530zo7aUBE3QIdxCXamEnG04Tg==} engines: {node: ^16.0.0 || >=18.0.0} peerDependencies: @@ -4132,11 +4161,11 @@ packages: dependencies: '@typescript-eslint/scope-manager': 6.0.0 '@typescript-eslint/types': 6.0.0 - '@typescript-eslint/typescript-estree': 6.0.0(typescript@5.0.2) + '@typescript-eslint/typescript-estree': 6.0.0(typescript@5.3.3) '@typescript-eslint/visitor-keys': 6.0.0 debug: 4.3.4 eslint: 8.45.0 - typescript: 5.0.2 + typescript: 5.3.3 transitivePeerDependencies: - supports-color dev: true @@ -4157,7 +4186,7 @@ packages: '@typescript-eslint/visitor-keys': 6.0.0 dev: true - /@typescript-eslint/type-utils@6.0.0(eslint@8.45.0)(typescript@5.0.2): + /@typescript-eslint/type-utils@6.0.0(eslint@8.45.0)(typescript@5.3.3): resolution: {integrity: sha512-ah6LJvLgkoZ/pyJ9GAdFkzeuMZ8goV6BH7eC9FPmojrnX9yNCIsfjB+zYcnex28YO3RFvBkV6rMV6WpIqkPvoQ==} engines: {node: ^16.0.0 || >=18.0.0} peerDependencies: @@ -4167,12 +4196,12 @@ packages: typescript: optional: true dependencies: - '@typescript-eslint/typescript-estree': 6.0.0(typescript@5.0.2) - '@typescript-eslint/utils': 6.0.0(eslint@8.45.0)(typescript@5.0.2) + '@typescript-eslint/typescript-estree': 6.0.0(typescript@5.3.3) + '@typescript-eslint/utils': 6.0.0(eslint@8.45.0)(typescript@5.3.3) debug: 4.3.4 eslint: 8.45.0 - ts-api-utils: 1.0.1(typescript@5.0.2) - typescript: 5.0.2 + ts-api-utils: 1.0.1(typescript@5.3.3) + typescript: 5.3.3 transitivePeerDependencies: - supports-color dev: true @@ -4187,7 +4216,7 @@ packages: engines: {node: ^16.0.0 || >=18.0.0} dev: true - /@typescript-eslint/typescript-estree@5.62.0(typescript@5.0.2): + /@typescript-eslint/typescript-estree@5.62.0(typescript@5.3.3): resolution: {integrity: sha512-CmcQ6uY7b9y694lKdRB8FEel7JbU/40iSAPomu++SjLMntB+2Leay2LO6i8VnJk58MtE9/nQSFIH6jpyRWyYzA==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: @@ -4202,13 +4231,13 @@ packages: globby: 11.1.0 is-glob: 4.0.3 semver: 7.5.4 - tsutils: 3.21.0(typescript@5.0.2) - typescript: 5.0.2 + tsutils: 3.21.0(typescript@5.3.3) + typescript: 5.3.3 transitivePeerDependencies: - supports-color dev: true - /@typescript-eslint/typescript-estree@6.0.0(typescript@5.0.2): + /@typescript-eslint/typescript-estree@6.0.0(typescript@5.3.3): resolution: {integrity: sha512-2zq4O7P6YCQADfmJ5OTDQTP3ktajnXIRrYAtHM9ofto/CJZV3QfJ89GEaM2BNGeSr1KgmBuLhEkz5FBkS2RQhQ==} engines: {node: ^16.0.0 || >=18.0.0} peerDependencies: @@ -4223,13 +4252,13 @@ packages: globby: 11.1.0 is-glob: 4.0.3 semver: 7.5.4 - ts-api-utils: 1.0.1(typescript@5.0.2) - typescript: 5.0.2 + ts-api-utils: 1.0.1(typescript@5.3.3) + typescript: 5.3.3 transitivePeerDependencies: - supports-color dev: true - /@typescript-eslint/utils@5.62.0(eslint@8.45.0)(typescript@5.0.2): + /@typescript-eslint/utils@5.62.0(eslint@8.45.0)(typescript@5.3.3): resolution: {integrity: sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: @@ -4240,7 +4269,7 @@ packages: '@types/semver': 7.5.0 '@typescript-eslint/scope-manager': 5.62.0 '@typescript-eslint/types': 5.62.0 - '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.0.2) + '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.3.3) eslint: 8.45.0 eslint-scope: 5.1.1 semver: 7.5.4 @@ -4249,7 +4278,7 @@ packages: - typescript dev: true - /@typescript-eslint/utils@6.0.0(eslint@8.45.0)(typescript@5.0.2): + /@typescript-eslint/utils@6.0.0(eslint@8.45.0)(typescript@5.3.3): resolution: {integrity: sha512-SOr6l4NB6HE4H/ktz0JVVWNXqCJTOo/mHnvIte1ZhBQ0Cvd04x5uKZa3zT6tiodL06zf5xxdK8COiDvPnQ27JQ==} engines: {node: ^16.0.0 || >=18.0.0} peerDependencies: @@ -4260,7 +4289,7 @@ packages: '@types/semver': 7.5.0 '@typescript-eslint/scope-manager': 6.0.0 '@typescript-eslint/types': 6.0.0 - '@typescript-eslint/typescript-estree': 6.0.0(typescript@5.0.2) + '@typescript-eslint/typescript-estree': 6.0.0(typescript@5.3.3) eslint: 8.45.0 eslint-scope: 5.1.1 semver: 7.5.4 @@ -5757,7 +5786,7 @@ packages: eslint-import-resolver-webpack: optional: true dependencies: - '@typescript-eslint/parser': 6.0.0(eslint@8.45.0)(typescript@5.0.2) + '@typescript-eslint/parser': 6.0.0(eslint@8.45.0)(typescript@5.3.3) debug: 3.2.7 eslint: 8.45.0 eslint-import-resolver-node: 0.3.7 @@ -5776,7 +5805,7 @@ packages: '@typescript-eslint/parser': optional: true dependencies: - '@typescript-eslint/parser': 6.0.0(eslint@8.45.0)(typescript@5.0.2) + '@typescript-eslint/parser': 6.0.0(eslint@8.45.0)(typescript@5.3.3) array-includes: 3.1.6 array.prototype.flat: 1.3.1 array.prototype.flatmap: 1.3.1 @@ -5861,14 +5890,14 @@ packages: string.prototype.matchall: 4.0.8 dev: true - /eslint-plugin-storybook@0.6.13(eslint@8.45.0)(typescript@5.0.2): + /eslint-plugin-storybook@0.6.13(eslint@8.45.0)(typescript@5.3.3): resolution: {integrity: sha512-smd+CS0WH1jBqUEJ3znGS7DU4ayBE9z6lkQAK2yrSUv1+rq8BT/tiI5C/rKE7rmiqiAfojtNYZRhzo5HrulccQ==} engines: {node: 12.x || 14.x || >= 16} peerDependencies: eslint: '>=6' dependencies: '@storybook/csf': 0.0.1 - '@typescript-eslint/utils': 5.62.0(eslint@8.45.0)(typescript@5.0.2) + '@typescript-eslint/utils': 5.62.0(eslint@8.45.0)(typescript@5.3.3) eslint: 8.45.0 requireindex: 1.2.0 ts-dedent: 2.2.0 @@ -6726,6 +6755,10 @@ packages: engines: {node: '>= 4'} dev: true + /immer@10.0.3: + resolution: {integrity: sha512-pwupu3eWfouuaowscykeckFmVTpqbzW+rXFCX8rQLkZzM9ftBmU/++Ra+o+L27mz03zJTlyV4UUr+fdKNffo4A==} + dev: false + /immutable@4.3.1: resolution: {integrity: sha512-lj9cnmB/kVS0QHsJnYKD1uo3o39nrbKxszjnqS9Fr6NB7bZzW45U6WSGBPKXDL/CvDKqDNPA4r3DoDQ8GTxo2A==} dev: true @@ -8291,12 +8324,12 @@ packages: tween-functions: 1.2.0 dev: true - /react-docgen-typescript@2.2.2(typescript@5.0.2): + /react-docgen-typescript@2.2.2(typescript@5.3.3): resolution: {integrity: sha512-tvg2ZtOpOi6QDwsb3GZhOjDkkX0h8Z2gipvTg6OVMUyoYoURhEiRNePT8NZItTVCDh39JJHnLdfCOkzoLbFnTg==} peerDependencies: typescript: '>= 4.3.x' dependencies: - typescript: 5.0.2 + typescript: 5.3.3 dev: true /react-docgen@6.0.0-alpha.3: @@ -8368,6 +8401,28 @@ packages: resolution: {integrity: sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==} dev: true + /react-redux@9.1.0(@types/react@18.2.15)(react@18.2.0)(redux@5.0.1): + resolution: {integrity: sha512-6qoDzIO+gbrza8h3hjMA9aq4nwVFCKFtY2iLxCtVT38Swyy2C/dJCGBXHeHLtx6qlg/8qzc2MrhOeduf5K32wQ==} + peerDependencies: + '@types/react': ^18.2.25 + react: ^18.0 + react-native: '>=0.69' + redux: ^5.0.0 + peerDependenciesMeta: + '@types/react': + optional: true + react-native: + optional: true + redux: + optional: true + dependencies: + '@types/react': 18.2.15 + '@types/use-sync-external-store': 0.0.3 + react: 18.2.0 + redux: 5.0.1 + use-sync-external-store: 1.2.0(react@18.2.0) + dev: false + /react-refresh@0.14.0: resolution: {integrity: sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==} engines: {node: '>=0.10.0'} @@ -8565,6 +8620,18 @@ packages: strip-indent: 4.0.0 dev: true + /redux-thunk@3.1.0(redux@5.0.1): + resolution: {integrity: sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==} + peerDependencies: + redux: ^5.0.0 + dependencies: + redux: 5.0.1 + dev: false + + /redux@5.0.1: + resolution: {integrity: sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==} + dev: false + /regenerate-unicode-properties@10.1.0: resolution: {integrity: sha512-d1VudCLoIGitcU/hEg2QqvyGZQmdC0Lf8BqdOMXGFSvJP4bNV1+XqbPQeHHLD51Jh4QJJ225dlIFvY4Ly6MXmQ==} engines: {node: '>=4'} @@ -8649,6 +8716,10 @@ packages: engines: {node: '>=0.10.5'} dev: true + /reselect@5.1.0: + resolution: {integrity: sha512-aw7jcGLDpSgNDyWBQLv2cedml85qd95/iszJjN988zX1t7AVRJi19d9kto5+W7oCfQ94gyo40dVbT6g2k4/kXg==} + dev: false + /resolve-from@4.0.0: resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==} engines: {node: '>=4'} @@ -9527,13 +9598,13 @@ packages: engines: {node: '>=12'} dev: true - /ts-api-utils@1.0.1(typescript@5.0.2): + /ts-api-utils@1.0.1(typescript@5.3.3): resolution: {integrity: sha512-lC/RGlPmwdrIBFTX59wwNzqh7aR2otPNPR/5brHZm/XKFYKsfqxihXUe9pU3JI+3vGkl+vyCoNNnPhJn3aLK1A==} engines: {node: '>=16.13.0'} peerDependencies: typescript: '>=4.2.0' dependencies: - typescript: 5.0.2 + typescript: 5.3.3 dev: true /ts-dedent@2.2.0: @@ -9556,14 +9627,14 @@ packages: /tslib@2.6.1: resolution: {integrity: sha512-t0hLfiEKfMUoqhG+U1oid7Pva4bbDPHYfJNiB7BiIjRkj1pyC++4N3huJfqY6aRH6VTB0rvtzQwjM4K6qpfOig==} - /tsutils@3.21.0(typescript@5.0.2): + /tsutils@3.21.0(typescript@5.3.3): resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==} engines: {node: '>= 6'} peerDependencies: typescript: '>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta' dependencies: tslib: 1.14.1 - typescript: 5.0.2 + typescript: 5.3.3 dev: true /tween-functions@1.2.0: @@ -9652,9 +9723,9 @@ packages: resolution: {integrity: sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==} dev: true - /typescript@5.0.2: - resolution: {integrity: sha512-wVORMBGO/FAs/++blGNeAVdbNKtIh1rbBL2EyQ1+J9lClJ93KiiKe8PmFIVdXhHcyv44SL9oglmfeSsndo0jRw==} - engines: {node: '>=12.20'} + /typescript@5.3.3: + resolution: {integrity: sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==} + engines: {node: '>=14.17'} hasBin: true dev: true @@ -9814,6 +9885,14 @@ packages: react: 18.2.0 tslib: 2.6.1 + /use-sync-external-store@1.2.0(react@18.2.0): + resolution: {integrity: sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==} + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + dependencies: + react: 18.2.0 + dev: false + /util-deprecate@1.0.2: resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==} diff --git a/src/App.tsx b/src/App.tsx index 5541660..b7bc874 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,3 +1,12 @@ +import { Provider } from 'react-redux' + +import { Router } from '@/router' +import { store } from '@/services/store.ts' + export function App() { - return
Hello
+ return ( + + + + ) } diff --git a/src/components/decks/decks.tsx b/src/components/decks/decks.tsx new file mode 100644 index 0000000..5dc35d6 --- /dev/null +++ b/src/components/decks/decks.tsx @@ -0,0 +1,139 @@ +import { useMemo, useState } from 'react' + +import { Link, useSearchParams } from 'react-router-dom' + +import { Button, TextField } from '@/components' +import { Sort, Table, TableBody, TableCell, TableHeader, TableRow } from '@/components/ui/table' +import { + useCreateDeckMutation, + useDeleteDeckMutation, + useGetDecksQuery, +} from '@/services/decks/decks.service.ts' + +const columns = [ + { + key: 'name', + title: 'Name', + sortable: true, + }, + { + key: 'cardsCount', + title: 'Cards', + sortable: true, + }, + { + key: 'updated', + title: 'Last updated', + sortable: true, + }, + { + key: 'author.name', + title: 'Created by', + sortable: true, + }, + { + key: '', + title: '', + sortable: false, + }, +] + +export const Decks = () => { + const [search, setSearch] = useSearchParams() + const [name, setName] = useState('') + const orderBy = JSON.parse(search.get('orderBy') ?? 'null') + const setOrderBy = (value: Sort) => { + search.set('orderBy', JSON.stringify(value)) + setSearch(search) + } + const orderByString = useMemo(() => { + if (!orderBy) return null + + return `${orderBy.key}-${orderBy.direction}` + }, [orderBy]) + + const { data, isLoading, error } = useGetDecksQuery({ + name, + orderBy: orderByString, + }) + + const [createDeck, { isLoading: isDeckBeingCreated }] = useCreateDeckMutation() + const [deleteDeck, { isLoading: isDeckBeingDeleted }] = useDeleteDeckMutation() + + if (isLoading) { + return

Loading...

+ } + + if (error) { + return

Error: {JSON.stringify(error)}...

+ } + + return ( +
+ Login + + + + + + {data?.items?.map(deck => { + return ( + + {deck.name} + {deck.cardsCount} + {new Date(deck.updated).toLocaleDateString('ru-RU')} + {deck.author.name} + + + + + ) + })} + +
+
+ ) +} + +const TrashOutline = () => { + return ( + + + + + + + + + + + ) +} diff --git a/src/components/ui/table/table.tsx b/src/components/ui/table/table.tsx index 15cafb9..8ec6e31 100644 --- a/src/components/ui/table/table.tsx +++ b/src/components/ui/table/table.tsx @@ -54,16 +54,16 @@ export const TableHeader: FC< } return ( - - + + {columns.map(({ title, key, sortable }) => ( - + {title} {sort && sort.key === key && {sort.direction === 'asc' ? 'â–²' : 'â–¼'}} - + ))} - - + + ) } export const TableBody = forwardRef, ComponentPropsWithoutRef<'tbody'>>( diff --git a/src/hooks/useDebounce.ts b/src/hooks/useDebounce.ts new file mode 100644 index 0000000..9855c55 --- /dev/null +++ b/src/hooks/useDebounce.ts @@ -0,0 +1,15 @@ +import { useEffect, useState } from 'react' + +export function useDebounce(value: T, delay?: number): T { + const [debouncedValue, setDebouncedValue] = useState(value) + + useEffect(() => { + const timer = setTimeout(() => setDebouncedValue(value), delay || 500) + + return () => { + clearTimeout(timer) + } + }, [value, delay]) + + return debouncedValue +} diff --git a/src/main.tsx b/src/main.tsx index 5d5ead5..3456e07 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -2,14 +2,12 @@ import '@fontsource/roboto/400.css' import '@fontsource/roboto/700.css' import './styles/index.scss' -import { StrictMode } from 'react' - import { createRoot } from 'react-dom/client' import { App } from '@/App' createRoot(document.getElementById('root')!).render( - - - + // + + // ) diff --git a/src/router.tsx b/src/router.tsx new file mode 100644 index 0000000..b1ae64c --- /dev/null +++ b/src/router.tsx @@ -0,0 +1,40 @@ +import { + createBrowserRouter, + Navigate, + Outlet, + RouteObject, + RouterProvider, +} from 'react-router-dom' + +import { Decks } from '@/components/decks/decks.tsx' + +const publicRoutes: RouteObject[] = [ + { + path: '/login', + element:
login
, + }, +] + +const privateRoutes: RouteObject[] = [ + { + path: '/', + element: , + }, +] +const router = createBrowserRouter([ + { + element: , + children: privateRoutes, + }, + ...publicRoutes, +]) + +export const Router = () => { + return +} + +function PrivateRoutes() { + const isAuthenticated = true + + return isAuthenticated ? : +} diff --git a/src/services/base-api.ts b/src/services/base-api.ts new file mode 100644 index 0000000..43a17da --- /dev/null +++ b/src/services/base-api.ts @@ -0,0 +1,14 @@ +import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react' + +export const baseApi = createApi({ + reducerPath: 'baseApi', + tagTypes: ['Decks'], + baseQuery: fetchBaseQuery({ + baseUrl: 'https://api.flashcards.andrii.es', + credentials: 'include', + prepareHeaders: headers => { + headers.append('x-auth-skip', 'true') + }, + }), + endpoints: () => ({}), +}) diff --git a/src/services/common.types.ts b/src/services/common.types.ts new file mode 100644 index 0000000..2f86e1a --- /dev/null +++ b/src/services/common.types.ts @@ -0,0 +1,11 @@ +export type Pagination = { + totalItems: number + totalPages: number + currentPage: number + itemsPerPage: number +} + +export type PaginatedResponse = { + items: T + pagination: Pagination +} diff --git a/src/services/decks/decks.service.ts b/src/services/decks/decks.service.ts new file mode 100644 index 0000000..e277c99 --- /dev/null +++ b/src/services/decks/decks.service.ts @@ -0,0 +1,33 @@ +import { CreateDeckArgs, Deck, DeckResponse, DeleteDeckArgs, GetDecksArgs } from './decks.types.ts' + +import { baseApi } from '@/services/base-api.ts' + +export const DecksService = baseApi.injectEndpoints({ + endpoints: builder => { + return { + getDecks: builder.query({ + query: args => ({ + url: `v2/decks`, + params: args ?? undefined, + }), + providesTags: ['Decks'], + }), + createDeck: builder.mutation({ + query: args => ({ + url: 'v1/decks', + body: args, + method: 'POST', + }), + invalidatesTags: ['Decks'], + }), + deleteDeck: builder.mutation({ + query: args => ({ + url: `v1/decks/${args.id}`, + method: 'DELETE', + }), + invalidatesTags: ['Decks'], + }), + } + }, +}) +export const { useGetDecksQuery, useCreateDeckMutation, useDeleteDeckMutation } = DecksService diff --git a/src/services/decks/decks.types.ts b/src/services/decks/decks.types.ts new file mode 100644 index 0000000..78b0a94 --- /dev/null +++ b/src/services/decks/decks.types.ts @@ -0,0 +1,40 @@ +import { PaginatedResponse } from '@/services/common.types.ts' + +export type DeckResponse = PaginatedResponse + +export type Deck = { + author: DeckAuthor + id: string + userId: string + name: string + isPrivate: boolean + cover: string + created: string + updated: string + cardsCount: number +} + +export type DeckAuthor = { + id: string + name: string +} + +export type GetDecksArgs = { + orderBy?: string | null + minCardsCount?: number + maxCardsCount?: number + name?: string + authorId?: string + currentPage?: number + itemsPerPage?: number +} + +export type CreateDeckArgs = { + name: string + cover?: File | null + isPrivate?: boolean +} + +export type DeleteDeckArgs = { + id: string +} diff --git a/src/services/store.ts b/src/services/store.ts new file mode 100644 index 0000000..b3be173 --- /dev/null +++ b/src/services/store.ts @@ -0,0 +1,15 @@ +import { configureStore } from '@reduxjs/toolkit' +import { setupListeners } from '@reduxjs/toolkit/query/react' + +import { baseApi } from '@/services/base-api.ts' + +export const store = configureStore({ + reducer: { + [baseApi.reducerPath]: baseApi.reducer, + }, + middleware: getDefaultMiddleware => getDefaultMiddleware().concat(baseApi.middleware), +}) + +export type AppDispatch = typeof store.dispatch +export type RootState = ReturnType +setupListeners(store.dispatch)