From 32ccbc13b55ab2bc11c84b87f851435b11da5f16 Mon Sep 17 00:00:00 2001 From: Gustavo dos Santos Nascimento <74427958+GustavoSantoz@users.noreply.github.com> Date: Fri, 3 May 2024 13:10:45 +0000 Subject: [PATCH 01/23] Add files --- src/components/cat-form/cat-form.jsx | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 src/components/cat-form/cat-form.jsx diff --git a/src/components/cat-form/cat-form.jsx b/src/components/cat-form/cat-form.jsx new file mode 100644 index 0000000..e69de29 From 302fe93a28b8822de4956d85f5404a0356cbe73e Mon Sep 17 00:00:00 2001 From: Gustavo dos Santos Nascimento <74427958+GustavoSantoz@users.noreply.github.com> Date: Fri, 3 May 2024 14:04:32 +0000 Subject: [PATCH 02/23] create: modal --- package-lock.json | 461 ++++++++++++++++++++++++++- package.json | 1 + src/components/cat-form/cat-form.jsx | 25 ++ src/components/ui/dialog.tsx | 120 +++++++ src/pages/home.jsx | 3 + tailwind.config.js | 8 +- 6 files changed, 613 insertions(+), 5 deletions(-) create mode 100644 src/components/ui/dialog.tsx diff --git a/package-lock.json b/package-lock.json index 3cfbd9e..58e0562 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "dependencies": { "@headlessui/react": "^1.7.15", "@heroicons/react": "^2.0.18", + "@radix-ui/react-dialog": "^1.0.5", "@storybook/react-vite": "^8.0.8", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", @@ -3562,6 +3563,14 @@ "node": ">=14" } }, + "node_modules/@radix-ui/primitive": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.1.tgz", + "integrity": "sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==", + "dependencies": { + "@babel/runtime": "^7.13.10" + } + }, "node_modules/@radix-ui/react-compose-refs": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz", @@ -3579,6 +3588,216 @@ } } }, + "node_modules/@radix-ui/react-context": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.1.tgz", + "integrity": "sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==", + "dependencies": { + "@babel/runtime": "^7.13.10" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-dialog": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.0.5.tgz", + "integrity": "sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-dismissable-layer": "1.0.5", + "@radix-ui/react-focus-guards": "1.0.1", + "@radix-ui/react-focus-scope": "1.0.4", + "@radix-ui/react-id": "1.0.1", + "@radix-ui/react-portal": "1.0.4", + "@radix-ui/react-presence": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-slot": "1.0.2", + "@radix-ui/react-use-controllable-state": "1.0.1", + "aria-hidden": "^1.1.1", + "react-remove-scroll": "2.5.5" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-dismissable-layer": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.5.tgz", + "integrity": "sha512-aJeDjQhywg9LBu2t/At58hCvr7pEm0o2Ke1x33B+MhjNmmZ17sy4KImo0KPLgsnc/zN7GPdce8Cnn0SWvwZO7g==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-use-callback-ref": "1.0.1", + "@radix-ui/react-use-escape-keydown": "1.0.3" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-focus-guards": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.1.tgz", + "integrity": "sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==", + "dependencies": { + "@babel/runtime": "^7.13.10" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-focus-scope": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.4.tgz", + "integrity": "sha512-sL04Mgvf+FmyvZeYfNu1EPAaaxD+aw7cYeIB9L9Fvq8+urhltTRaEo5ysKOpHuKPclsZcSUMKlN05x4u+CINpA==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-use-callback-ref": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-id": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz", + "integrity": "sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-use-layout-effect": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-portal": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.4.tgz", + "integrity": "sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-primitive": "1.0.3" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-presence": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.0.1.tgz", + "integrity": "sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-use-layout-effect": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-primitive": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz", + "integrity": "sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-slot": "1.0.2" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-slot": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz", @@ -3597,6 +3816,76 @@ } } }, + "node_modules/@radix-ui/react-use-callback-ref": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz", + "integrity": "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==", + "dependencies": { + "@babel/runtime": "^7.13.10" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-use-controllable-state": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.1.tgz", + "integrity": "sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-use-callback-ref": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-use-escape-keydown": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.3.tgz", + "integrity": "sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-use-callback-ref": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-use-layout-effect": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz", + "integrity": "sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==", + "dependencies": { + "@babel/runtime": "^7.13.10" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/@remix-run/router": { "version": "1.16.0", "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.0.tgz", @@ -5705,7 +5994,7 @@ "version": "18.3.0", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz", "integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==", - "dev": true, + "devOptional": true, "dependencies": { "@types/react": "*" } @@ -6528,6 +6817,22 @@ "sprintf-js": "~1.0.2" } }, + "node_modules/aria-hidden": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.4.tgz", + "integrity": "sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==", + "dependencies": { + "tslib": "^2.0.0" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/aria-hidden/node_modules/tslib": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" + }, "node_modules/aria-query": { "version": "5.3.0", "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz", @@ -8140,6 +8445,11 @@ "node": ">=8" } }, + "node_modules/detect-node-es": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz", + "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==" + }, "node_modules/detect-package-manager": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/detect-package-manager/-/detect-package-manager-2.0.1.tgz", @@ -9558,6 +9868,14 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/get-nonce": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz", + "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==", + "engines": { + "node": ">=6" + } + }, "node_modules/get-npm-tarball-url": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/get-npm-tarball-url/-/get-npm-tarball-url-2.1.0.tgz", @@ -10166,6 +10484,14 @@ "node": ">= 0.4" } }, + "node_modules/invariant": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", + "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==", + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/ip": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/ip/-/ip-2.0.1.tgz", @@ -14677,6 +15003,61 @@ "node": ">=0.10.0" } }, + "node_modules/react-remove-scroll": { + "version": "2.5.5", + "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz", + "integrity": "sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==", + "dependencies": { + "react-remove-scroll-bar": "^2.3.3", + "react-style-singleton": "^2.2.1", + "tslib": "^2.1.0", + "use-callback-ref": "^1.3.0", + "use-sidecar": "^1.1.2" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/react-remove-scroll-bar": { + "version": "2.3.6", + "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.6.tgz", + "integrity": "sha512-DtSYaao4mBmX+HDo5YWYdBWQwYIQQshUV/dVxFxK+KM26Wjwp1gZ6rv6OC3oujI6Bfu6Xyg3TwK533AQutsn/g==", + "dependencies": { + "react-style-singleton": "^2.2.1", + "tslib": "^2.0.0" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/react-remove-scroll-bar/node_modules/tslib": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" + }, + "node_modules/react-remove-scroll/node_modules/tslib": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" + }, "node_modules/react-router": { "version": "6.23.0", "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.0.tgz", @@ -14707,6 +15088,33 @@ "react-dom": ">=16.8" } }, + "node_modules/react-style-singleton": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz", + "integrity": "sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==", + "dependencies": { + "get-nonce": "^1.0.0", + "invariant": "^2.2.4", + "tslib": "^2.0.0" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/react-style-singleton/node_modules/tslib": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -16636,6 +17044,57 @@ "requires-port": "^1.0.0" } }, + "node_modules/use-callback-ref": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.2.tgz", + "integrity": "sha512-elOQwe6Q8gqZgDA8mrh44qRTQqpIHDcZ3hXTLjBe1i4ph8XpNJnO+aQf3NaG+lriLopI4HMx9VjQLfPQ6vhnoA==", + "dependencies": { + "tslib": "^2.0.0" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/use-callback-ref/node_modules/tslib": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" + }, + "node_modules/use-sidecar": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz", + "integrity": "sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==", + "dependencies": { + "detect-node-es": "^1.1.0", + "tslib": "^2.0.0" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "@types/react": "^16.9.0 || ^17.0.0 || ^18.0.0", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/use-sidecar/node_modules/tslib": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" + }, "node_modules/util": { "version": "0.12.5", "resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz", diff --git a/package.json b/package.json index 1c8588d..43cde03 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "dependencies": { "@headlessui/react": "^1.7.15", "@heroicons/react": "^2.0.18", + "@radix-ui/react-dialog": "^1.0.5", "@storybook/react-vite": "^8.0.8", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", diff --git a/src/components/cat-form/cat-form.jsx b/src/components/cat-form/cat-form.jsx index e69de29..baa04c8 100644 --- a/src/components/cat-form/cat-form.jsx +++ b/src/components/cat-form/cat-form.jsx @@ -0,0 +1,25 @@ +import { + Dialog, + DialogContent, + DialogDescription, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "@/components/ui/dialog" + +export function CatForm() { + return <> + + Abrir + + + Are you absolutely sure? + + This action cannot be undone. This will permanently delete your account + and remove your data from our servers. + + + + + +} \ No newline at end of file diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx new file mode 100644 index 0000000..c23630e --- /dev/null +++ b/src/components/ui/dialog.tsx @@ -0,0 +1,120 @@ +import * as React from "react" +import * as DialogPrimitive from "@radix-ui/react-dialog" +import { X } from "lucide-react" + +import { cn } from "@/lib/utils" + +const Dialog = DialogPrimitive.Root + +const DialogTrigger = DialogPrimitive.Trigger + +const DialogPortal = DialogPrimitive.Portal + +const DialogClose = DialogPrimitive.Close + +const DialogOverlay = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +DialogOverlay.displayName = DialogPrimitive.Overlay.displayName + +const DialogContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + + + {children} + + + Close + + + +)) +DialogContent.displayName = DialogPrimitive.Content.displayName + +const DialogHeader = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+) +DialogHeader.displayName = "DialogHeader" + +const DialogFooter = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+) +DialogFooter.displayName = "DialogFooter" + +const DialogTitle = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +DialogTitle.displayName = DialogPrimitive.Title.displayName + +const DialogDescription = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +DialogDescription.displayName = DialogPrimitive.Description.displayName + +export { + Dialog, + DialogPortal, + DialogOverlay, + DialogClose, + DialogTrigger, + DialogContent, + DialogHeader, + DialogFooter, + DialogTitle, + DialogDescription, +} diff --git a/src/pages/home.jsx b/src/pages/home.jsx index fc72d84..c2f405a 100644 --- a/src/pages/home.jsx +++ b/src/pages/home.jsx @@ -1,9 +1,12 @@ import React from 'react'; +import {CatForm} from '../components/cat-form/cat-form' + export const HomePage = () => { return (

Home Page

+
); } \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js index 7cb7e37..2087b67 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -2,10 +2,10 @@ module.exports = { darkMode: ["class"], content: [ - './pages/**/*.{ts,tsx}', - './components/**/*.{ts,tsx}', - './app/**/*.{ts,tsx}', - './src/**/*.{ts,tsx}', + './pages/**/*.{ts,tsx, jsx}', + './components/**/*.{ts,tsx, jsx}', + './app/**/*.{ts,tsx, jsx}', + './src/**/*.{ts,tsx, jsx}', ], prefix: "", theme: { From be95786363f9b24eb290077621321bc6e2377742 Mon Sep 17 00:00:00 2001 From: Gabriel Collares <98597812+GabrielCollares@users.noreply.github.com> Date: Fri, 3 May 2024 14:55:09 +0000 Subject: [PATCH 03/23] alterando o dialog --- src/components/cat-form/cat-form.jsx | 136 ++++++++++++++++++++++----- src/index.css | 77 +++++++++++++++ src/pages/home.jsx | 2 +- 3 files changed, 189 insertions(+), 26 deletions(-) diff --git a/src/components/cat-form/cat-form.jsx b/src/components/cat-form/cat-form.jsx index baa04c8..5c86bb9 100644 --- a/src/components/cat-form/cat-form.jsx +++ b/src/components/cat-form/cat-form.jsx @@ -1,25 +1,111 @@ -import { - Dialog, - DialogContent, - DialogDescription, - DialogHeader, - DialogTitle, - DialogTrigger, -} from "@/components/ui/dialog" - -export function CatForm() { - return <> - - Abrir - - - Are you absolutely sure? - - This action cannot be undone. This will permanently delete your account - and remove your data from our servers. - - - - - -} \ No newline at end of file +import React, { useState } from "react"; + +const CatForm = () => { + const [name, setName] = useState(""); + const [breed, setBreed] = useState(""); + const [age, setAge] = useState(""); + const [description, setDescription] = useState(""); + const [image, setImage] = useState(null); + + const handleSubmit = (event) => { + event.preventDefault(); + // Submit form data to server, including the image data if needed + }; + + const handleImageChange = (event) => { + const file = event.target.files[0]; + setImage(file); + }; + + + return ( +
+

Add Cat

+ +
+ + +
+ +
+
+ + setName(event.target.value)} + className="w-full px-3 py-2 border rounded" + /> +
+ +
+ + setBreed(event.target.value)} + className="w-full px-3 py-2 border rounded" + /> +
+ +
+ + setAge(event.target.value)} + className="w-full px-3 py-2 border rounded" + /> +
+ +
+ + +
+ + + + + +} \ No newline at end of file diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx new file mode 100644 index 0000000..677d05f --- /dev/null +++ b/src/components/ui/input.tsx @@ -0,0 +1,25 @@ +import * as React from "react" + +import { cn } from "@/lib/utils" + +export interface InputProps + extends React.InputHTMLAttributes {} + +const Input = React.forwardRef( + ({ className, type, ...props }, ref) => { + return ( + + ) + } +) +Input.displayName = "Input" + +export { Input } diff --git a/src/components/ui/label.tsx b/src/components/ui/label.tsx new file mode 100644 index 0000000..683faa7 --- /dev/null +++ b/src/components/ui/label.tsx @@ -0,0 +1,24 @@ +import * as React from "react" +import * as LabelPrimitive from "@radix-ui/react-label" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "@/lib/utils" + +const labelVariants = cva( + "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" +) + +const Label = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef & + VariantProps +>(({ className, ...props }, ref) => ( + +)) +Label.displayName = LabelPrimitive.Root.displayName + +export { Label } diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx new file mode 100644 index 0000000..fe56d4d --- /dev/null +++ b/src/components/ui/select.tsx @@ -0,0 +1,158 @@ +import * as React from "react" +import * as SelectPrimitive from "@radix-ui/react-select" +import { Check, ChevronDown, ChevronUp } from "lucide-react" + +import { cn } from "@/lib/utils" + +const Select = SelectPrimitive.Root + +const SelectGroup = SelectPrimitive.Group + +const SelectValue = SelectPrimitive.Value + +const SelectTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + span]:line-clamp-1", + className + )} + {...props} + > + {children} + + + + +)) +SelectTrigger.displayName = SelectPrimitive.Trigger.displayName + +const SelectScrollUpButton = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + +)) +SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName + +const SelectScrollDownButton = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + +)) +SelectScrollDownButton.displayName = + SelectPrimitive.ScrollDownButton.displayName + +const SelectContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, position = "popper", ...props }, ref) => ( + + + + + {children} + + + + +)) +SelectContent.displayName = SelectPrimitive.Content.displayName + +const SelectLabel = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +SelectLabel.displayName = SelectPrimitive.Label.displayName + +const SelectItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + + + + + + + {children} + +)) +SelectItem.displayName = SelectPrimitive.Item.displayName + +const SelectSeparator = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +SelectSeparator.displayName = SelectPrimitive.Separator.displayName + +export { + Select, + SelectGroup, + SelectValue, + SelectTrigger, + SelectContent, + SelectLabel, + SelectItem, + SelectSeparator, + SelectScrollUpButton, + SelectScrollDownButton, +} diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx new file mode 100644 index 0000000..9f9a6dc --- /dev/null +++ b/src/components/ui/textarea.tsx @@ -0,0 +1,24 @@ +import * as React from "react" + +import { cn } from "@/lib/utils" + +export interface TextareaProps + extends React.TextareaHTMLAttributes {} + +const Textarea = React.forwardRef( + ({ className, ...props }, ref) => { + return ( + +
- - From a5ba409a79bf460221000d3e8a1360d3a1a1388b Mon Sep 17 00:00:00 2001 From: Gustavo Nascimento Date: Thu, 9 May 2024 01:09:49 +0000 Subject: [PATCH 06/23] minor alteration --- src/components/cat-form/catform.tsx | 86 +++++++++++++++++------------ 1 file changed, 52 insertions(+), 34 deletions(-) diff --git a/src/components/cat-form/catform.tsx b/src/components/cat-form/catform.tsx index 2396ce4..a430434 100644 --- a/src/components/cat-form/catform.tsx +++ b/src/components/cat-form/catform.tsx @@ -1,3 +1,11 @@ +// Todo: Centralizar o input de imagem +// Todo: Tirar a descrição "Escolha sua imagem" que está dentro do input de imagem +// Todo: Adicionar o botão para remover a foto do gato e voltar para ao input de seleção de arquivo +// Todo: Trocar os valores dos selects e adicionar outros caso tenha +// Todo: Trocar os estilos da bordas dos inputs (Opicional) +// Todo: Adicionar um loading na escolha da imagem (Opicional) + + import { useState } from "react" import { @@ -17,10 +25,11 @@ import { SelectValue, } from "@/components/ui/select" import { Textarea } from "@/components/ui/textarea" +import { Button } from "@/components/ui/button"; export function CatForm() { - const [avatar, setAvatar] = useState < string | null > (null); + const [avatar, setAvatar] = useState(null); const handleAvatarChange = (e: React.ChangeEvent) => { const file = e.target.files?.[0]; @@ -32,7 +41,7 @@ export function CatForm() { }; const removeAvatar = () => { - setAvatar(null); // Remove a imagem + setAvatar(null); }; @@ -43,45 +52,54 @@ export function CatForm() { Add cat -
- {avatar ? ( -
- Avatar - -
- ) : ( +
+ {avatar ? ( +
+ Avatar + +
+ ) : ( +
- )} +
+ )} - - - - - - - - -
+ + + + + + + + + +
+ + } \ No newline at end of file From f28a4aa17493614275988967c50b13a8d60d31a3 Mon Sep 17 00:00:00 2001 From: Gabriel Collares <98597812+GabrielCollares@users.noreply.github.com> Date: Fri, 10 May 2024 03:03:07 +0000 Subject: [PATCH 07/23] FIX : adjusted the button and its functions --- package-lock.json | 1 - src/components/cat-form/catform.tsx | 11 +++++++---- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index 03ce989..45889de 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2578,7 +2578,6 @@ } }, "node_modules/@floating-ui/dom": { - "version": "1.6.5", "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.5.tgz", "integrity": "sha512-Nsdud2X65Dz+1RHjAIP0t8z5e2ff/IRbei6BqFrl1urT8sDVzM1HMQ+R0XcU5ceRfyO3I6ayeqIfh+6Wb8LGTw==", diff --git a/src/components/cat-form/catform.tsx b/src/components/cat-form/catform.tsx index a430434..c3914ad 100644 --- a/src/components/cat-form/catform.tsx +++ b/src/components/cat-form/catform.tsx @@ -26,6 +26,7 @@ import { } from "@/components/ui/select" import { Textarea } from "@/components/ui/textarea" import { Button } from "@/components/ui/button"; +import { toBeDisabled } from "@testing-library/jest-dom/matchers" export function CatForm() { @@ -40,10 +41,14 @@ export function CatForm() { } }; + const removeAvatar = () => { setAvatar(null); }; + const removeSave = (): boolean => { + return avatar === null; + }; return <> @@ -95,11 +100,9 @@ export function CatForm() { - +
- - -} \ No newline at end of file + } From afe9659065001d7a583b8c0e70970bc4abaadf4b Mon Sep 17 00:00:00 2001 From: Gabriel Collares <98597812+GabrielCollares@users.noreply.github.com> Date: Fri, 10 May 2024 03:07:16 +0000 Subject: [PATCH 08/23] FIX replacing the tw --- src/index.css | 76 ++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 75 insertions(+), 1 deletion(-) diff --git a/src/index.css b/src/index.css index bd6213e..6dd80bd 100644 --- a/src/index.css +++ b/src/index.css @@ -1,3 +1,77 @@ @tailwind base; @tailwind components; -@tailwind utilities; \ No newline at end of file +@tailwind utilities; + +@layer base { + :root { + --background: 0 0% 100%; + --foreground: 222.2 84% 4.9%; + + --card: 0 0% 100%; + --card-foreground: 222.2 84% 4.9%; + + --popover: 0 0% 100%; + --popover-foreground: 222.2 84% 4.9%; + + --primary: 222.2 47.4% 11.2%; + --primary-foreground: 210 40% 98%; + + --secondary: 210 40% 96.1%; + --secondary-foreground: 222.2 47.4% 11.2%; + + --muted: 210 40% 96.1%; + --muted-foreground: 215.4 16.3% 46.9%; + + --accent: 210 40% 96.1%; + --accent-foreground: 222.2 47.4% 11.2%; + + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 210 40% 98%; + + --border: 214.3 31.8% 91.4%; + --input: 214.3 31.8% 91.4%; + --ring: 222.2 84% 4.9%; + + --radius: 0.5rem; + } + + .dark { + --background: 222.2 84% 4.9%; + --foreground: 210 40% 98%; + + --card: 222.2 84% 4.9%; + --card-foreground: 210 40% 98%; + + --popover: 222.2 84% 4.9%; + --popover-foreground: 210 40% 98%; + + --primary: 210 40% 98%; + --primary-foreground: 222.2 47.4% 11.2%; + + --secondary: 217.2 32.6% 17.5%; + --secondary-foreground: 210 40% 98%; + + --muted: 217.2 32.6% 17.5%; + --muted-foreground: 215 20.2% 65.1%; + + --accent: 217.2 32.6% 17.5%; + --accent-foreground: 210 40% 98%; + + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 210 40% 98%; + + --border: 217.2 32.6% 17.5%; + --input: 217.2 32.6% 17.5%; + --ring: 212.7 26.8% 83.9%; + } +} + +@layer base { + * { + @apply border-border; + } + + body { + @apply bg-background text-foreground; + } +} \ No newline at end of file From 957a62e6399cae44184bb62b65bcdfe442649ef5 Mon Sep 17 00:00:00 2001 From: Gabriel Collares <98597812+GabrielCollares@users.noreply.github.com> Date: Fri, 10 May 2024 03:46:17 +0000 Subject: [PATCH 09/23] FIX : adjusted the remove cat photo button --- src/components/cat-form/catform.tsx | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/src/components/cat-form/catform.tsx b/src/components/cat-form/catform.tsx index c3914ad..64d7e89 100644 --- a/src/components/cat-form/catform.tsx +++ b/src/components/cat-form/catform.tsx @@ -26,7 +26,7 @@ import { } from "@/components/ui/select" import { Textarea } from "@/components/ui/textarea" import { Button } from "@/components/ui/button"; -import { toBeDisabled } from "@testing-library/jest-dom/matchers" + export function CatForm() { @@ -47,6 +47,7 @@ export function CatForm() { }; const removeSave = (): boolean => { + return avatar === null; }; @@ -57,11 +58,10 @@ export function CatForm() { Add cat -
+
{avatar ? (
- Avatar - + Avatar
) : (
@@ -75,12 +75,13 @@ export function CatForm() { />
)} + - + - +
From 92593daade5ec0b828b5ccda330c348ba927f1af Mon Sep 17 00:00:00 2001 From: Gustavo dos Santos Nascimento <74427958+GustavoSantoz@users.noreply.github.com> Date: Fri, 10 May 2024 04:40:11 +0000 Subject: [PATCH 10/23] Fix: adjusting minor error on style --- src/components/cat-form/catform.tsx | 41 +++++++++++++++-------------- 1 file changed, 21 insertions(+), 20 deletions(-) diff --git a/src/components/cat-form/catform.tsx b/src/components/cat-form/catform.tsx index 64d7e89..b4ec187 100644 --- a/src/components/cat-form/catform.tsx +++ b/src/components/cat-form/catform.tsx @@ -26,6 +26,7 @@ import { } from "@/components/ui/select" import { Textarea } from "@/components/ui/textarea" import { Button } from "@/components/ui/button"; +import { ImageIcon } from "lucide-react" @@ -41,15 +42,14 @@ export function CatForm() { } }; - - const removeAvatar = () => { - setAvatar(null); - }; - const removeSave = (): boolean => { + const removeAvatar = (): void => { + setAvatar(null); + }; - return avatar === null; - }; + const disableButton = (): boolean => { + return avatar === null; + }; return <> @@ -58,30 +58,31 @@ export function CatForm() { Add cat -
+
{avatar ? (
Avatar
) : ( -
+
+
)} - + - + - - + +
- } +} From 37f7be311ebdd3c4efd55f277dcceed9d898564c Mon Sep 17 00:00:00 2001 From: Gustavo dos Santos Nascimento <74427958+GustavoSantoz@users.noreply.github.com> Date: Fri, 10 May 2024 04:48:17 +0000 Subject: [PATCH 11/23] remove component from home.jsx --- src/pages/home.jsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/pages/home.jsx b/src/pages/home.jsx index e0e68cd..74fb420 100644 --- a/src/pages/home.jsx +++ b/src/pages/home.jsx @@ -1,10 +1,7 @@ -import { CatForm } from "../components/cat-form/catform" - export const HomePage = () => { return (

Home Page

-
); } \ No newline at end of file From 365c8bc0703f51293ab6d5f9e52aae68f462c293 Mon Sep 17 00:00:00 2001 From: Gabriel Collares <98597812+GabrielCollares@users.noreply.github.com> Date: Fri, 10 May 2024 12:44:53 +0000 Subject: [PATCH 12/23] FIX: Adjusted the look of the button --- src/components/cat-form/catform.tsx | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/src/components/cat-form/catform.tsx b/src/components/cat-form/catform.tsx index b4ec187..846c106 100644 --- a/src/components/cat-form/catform.tsx +++ b/src/components/cat-form/catform.tsx @@ -1,11 +1,3 @@ -// Todo: Centralizar o input de imagem -// Todo: Tirar a descrição "Escolha sua imagem" que está dentro do input de imagem -// Todo: Adicionar o botão para remover a foto do gato e voltar para ao input de seleção de arquivo -// Todo: Trocar os valores dos selects e adicionar outros caso tenha -// Todo: Trocar os estilos da bordas dos inputs (Opicional) -// Todo: Adicionar um loading na escolha da imagem (Opicional) - - import { useState } from "react" import { @@ -26,7 +18,7 @@ import { } from "@/components/ui/select" import { Textarea } from "@/components/ui/textarea" import { Button } from "@/components/ui/button"; -import { ImageIcon } from "lucide-react" +import { ImageIcon} from "lucide-react" @@ -53,7 +45,7 @@ export function CatForm() { return <> - Add a Cat + Add a Cat Add cat From 31eb4d8a1f6eaee93ba441cadf82f91ffe7419a7 Mon Sep 17 00:00:00 2001 From: Gabriel Collares <98597812+GabrielCollares@users.noreply.github.com> Date: Fri, 10 May 2024 14:47:10 +0000 Subject: [PATCH 13/23] FIX: Code Change --- src/index.css | 95 +++++++++++++++++++++++----------------------- src/pages/home.jsx | 2 + tailwind.config.js | 8 ++-- 3 files changed, 53 insertions(+), 52 deletions(-) diff --git a/src/index.css b/src/index.css index 6dd80bd..b0e6fff 100644 --- a/src/index.css +++ b/src/index.css @@ -1,77 +1,76 @@ @tailwind base; -@tailwind components; -@tailwind utilities; + @tailwind components; + @tailwind utilities; -@layer base { + @layer base { :root { - --background: 0 0% 100%; - --foreground: 222.2 84% 4.9%; + --background: 0 0% 100%; + --foreground: 222.2 84% 4.9%; - --card: 0 0% 100%; - --card-foreground: 222.2 84% 4.9%; + --card: 0 0% 100%; + --card-foreground: 222.2 84% 4.9%; - --popover: 0 0% 100%; - --popover-foreground: 222.2 84% 4.9%; + --popover: 0 0% 100%; + --popover-foreground: 222.2 84% 4.9%; - --primary: 222.2 47.4% 11.2%; - --primary-foreground: 210 40% 98%; + --primary: 222.2 47.4% 11.2%; + --primary-foreground: 210 40% 98%; - --secondary: 210 40% 96.1%; - --secondary-foreground: 222.2 47.4% 11.2%; + --secondary: 210 40% 96.1%; + --secondary-foreground: 222.2 47.4% 11.2%; - --muted: 210 40% 96.1%; - --muted-foreground: 215.4 16.3% 46.9%; + --muted: 210 40% 96.1%; + --muted-foreground: 215.4 16.3% 46.9%; - --accent: 210 40% 96.1%; - --accent-foreground: 222.2 47.4% 11.2%; + --accent: 210 40% 96.1%; + --accent-foreground: 222.2 47.4% 11.2%; - --destructive: 0 84.2% 60.2%; - --destructive-foreground: 210 40% 98%; + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 210 40% 98%; - --border: 214.3 31.8% 91.4%; - --input: 214.3 31.8% 91.4%; - --ring: 222.2 84% 4.9%; + --border: 214.3 31.8% 91.4%; + --input: 214.3 31.8% 91.4%; + --ring: 222.2 84% 4.9%; - --radius: 0.5rem; + --radius: 0.5rem; } .dark { - --background: 222.2 84% 4.9%; - --foreground: 210 40% 98%; + --background: 222.2 84% 4.9%; + --foreground: 210 40% 98%; - --card: 222.2 84% 4.9%; - --card-foreground: 210 40% 98%; + --card: 222.2 84% 4.9%; + --card-foreground: 210 40% 98%; - --popover: 222.2 84% 4.9%; - --popover-foreground: 210 40% 98%; + --popover: 222.2 84% 4.9%; + --popover-foreground: 210 40% 98%; - --primary: 210 40% 98%; - --primary-foreground: 222.2 47.4% 11.2%; + --primary: 210 40% 98%; + --primary-foreground: 222.2 47.4% 11.2%; - --secondary: 217.2 32.6% 17.5%; - --secondary-foreground: 210 40% 98%; + --secondary: 217.2 32.6% 17.5%; + --secondary-foreground: 210 40% 98%; - --muted: 217.2 32.6% 17.5%; - --muted-foreground: 215 20.2% 65.1%; + --muted: 217.2 32.6% 17.5%; + --muted-foreground: 215 20.2% 65.1%; - --accent: 217.2 32.6% 17.5%; - --accent-foreground: 210 40% 98%; + --accent: 217.2 32.6% 17.5%; + --accent-foreground: 210 40% 98%; - --destructive: 0 62.8% 30.6%; - --destructive-foreground: 210 40% 98%; + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 210 40% 98%; - --border: 217.2 32.6% 17.5%; - --input: 217.2 32.6% 17.5%; - --ring: 212.7 26.8% 83.9%; + --border: 217.2 32.6% 17.5%; + --input: 217.2 32.6% 17.5%; + --ring: 212.7 26.8% 83.9%; } -} + } -@layer base { + @layer base { * { - @apply border-border; + @apply border-border; } - body { - @apply bg-background text-foreground; + @apply bg-background text-foreground; } -} \ No newline at end of file + } \ No newline at end of file diff --git a/src/pages/home.jsx b/src/pages/home.jsx index 74fb420..ba055c8 100644 --- a/src/pages/home.jsx +++ b/src/pages/home.jsx @@ -1,7 +1,9 @@ +import { MyButton } from "@/components/MyButton/MyButton"; export const HomePage = () => { return (

Home Page

+
); } \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js index 741f1b3..6b16b67 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -2,10 +2,10 @@ module.exports = { darkMode: ["class"], content: [ - './pages/**/*.{ts,tsx,jsx}', - './components/**/*.{ts,tsx,jsx}', - './app/**/*.{ts,tsx,jsx}', - './src/**/*.{ts,tsx,jsx}', + './pages/**/*.{ts,tsx,js,jsx}', + './components/**/*.{ts,tsx,js,jsx}', + './app/**/*.{ts,tsx,js,jsx}', + './src/**/*.{ts,tsx,js,jsx}', ], prefix: "", theme: { From 3484dc68929970fa7b656e0a5529a72d13c0b244 Mon Sep 17 00:00:00 2001 From: Gustavo dos Santos Nascimento <74427958+GustavoSantoz@users.noreply.github.com> Date: Fri, 17 May 2024 12:11:05 +0000 Subject: [PATCH 14/23] Feature: add params from variants buttons --- src/components/cat-form/catform.stories.tsx | 12 +++++++---- src/components/cat-form/catform.tsx | 23 +++++++++++++++++++-- 2 files changed, 29 insertions(+), 6 deletions(-) diff --git a/src/components/cat-form/catform.stories.tsx b/src/components/cat-form/catform.stories.tsx index e2a20fb..c95e91b 100644 --- a/src/components/cat-form/catform.stories.tsx +++ b/src/components/cat-form/catform.stories.tsx @@ -1,10 +1,14 @@ import type { Meta, StoryObj } from '@storybook/react'; -import { CatForm } from './catform.tsx'; +import { CatForm, transformProps } from './catform.tsx'; -const meta: Meta = { +const meta: Meta = { component: CatForm, -}; + argTypes: { + add: {description: "Edit or Add", + control: "boolean"} + }, +} export default meta; type Story = StoryObj; @@ -15,5 +19,5 @@ type Story = StoryObj; * to learn how to use render functions. */ export const Primary: Story = { - render: () => , + render: () => , }; diff --git a/src/components/cat-form/catform.tsx b/src/components/cat-form/catform.tsx index 846c106..cb847c2 100644 --- a/src/components/cat-form/catform.tsx +++ b/src/components/cat-form/catform.tsx @@ -20,9 +20,27 @@ import { Textarea } from "@/components/ui/textarea" import { Button } from "@/components/ui/button"; import { ImageIcon} from "lucide-react" +export interface transformProps { + add: boolean +} + -export function CatForm() { +export function CatForm(add:transformProps) { + function transform(add) { + switch(true){ + case add == true: + return `+ Add a Cat` + break + case add == false: + return "Edit" + break + default: + return "Add a Cat" + break + } + } + const [avatar, setAvatar] = useState(null); const handleAvatarChange = (e: React.ChangeEvent) => { @@ -42,10 +60,11 @@ export function CatForm() { const disableButton = (): boolean => { return avatar === null; }; + return <> - Add a Cat + {transform(true)} Add cat From b32e67302f50a2b01a746811174255d40f68f029 Mon Sep 17 00:00:00 2001 From: Gustavo dos Santos Nascimento <74427958+GustavoSantoz@users.noreply.github.com> Date: Fri, 17 May 2024 12:47:12 +0000 Subject: [PATCH 15/23] Fix: params --- src/components/cat-form/catform.stories.tsx | 3 ++- src/components/cat-form/catform.tsx | 17 +++++++++-------- 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/src/components/cat-form/catform.stories.tsx b/src/components/cat-form/catform.stories.tsx index c95e91b..2d6a007 100644 --- a/src/components/cat-form/catform.stories.tsx +++ b/src/components/cat-form/catform.stories.tsx @@ -8,6 +8,7 @@ const meta: Meta = { add: {description: "Edit or Add", control: "boolean"} }, + render: (args: transformProps) => , } export default meta; @@ -19,5 +20,5 @@ type Story = StoryObj; * to learn how to use render functions. */ export const Primary: Story = { - render: () => , + render: (args) => , }; diff --git a/src/components/cat-form/catform.tsx b/src/components/cat-form/catform.tsx index cb847c2..9532ab5 100644 --- a/src/components/cat-form/catform.tsx +++ b/src/components/cat-form/catform.tsx @@ -18,7 +18,7 @@ import { } from "@/components/ui/select" import { Textarea } from "@/components/ui/textarea" import { Button } from "@/components/ui/button"; -import { ImageIcon} from "lucide-react" +import { ImageIcon } from "lucide-react" export interface transformProps { add: boolean @@ -26,13 +26,13 @@ export interface transformProps { -export function CatForm(add:transformProps) { - function transform(add) { - switch(true){ - case add == true: +export function CatForm(add: transformProps) { + const transform = (add: boolean | transformProps) => { + switch (add) { + case add === true: return `+ Add a Cat` break - case add == false: + case add === false: return "Edit" break default: @@ -41,6 +41,7 @@ export function CatForm(add:transformProps) { } } + const [avatar, setAvatar] = useState(null); const handleAvatarChange = (e: React.ChangeEvent) => { @@ -60,11 +61,11 @@ export function CatForm(add:transformProps) { const disableButton = (): boolean => { return avatar === null; }; - + return <> - {transform(true)} + {transform(add)} Add cat From 29d69e77832013ba5bc38f7bd30f8f1c60c3b90f Mon Sep 17 00:00:00 2001 From: Gabriel Collares <98597812+GabrielCollares@users.noreply.github.com> Date: Fri, 17 May 2024 14:04:47 +0000 Subject: [PATCH 16/23] FIX: Added button history --- src/components/cat-form/catform.stories.tsx | 6 +++++ src/components/cat-form/catform.tsx | 28 +++++++-------------- 2 files changed, 15 insertions(+), 19 deletions(-) diff --git a/src/components/cat-form/catform.stories.tsx b/src/components/cat-form/catform.stories.tsx index 2d6a007..5f521e2 100644 --- a/src/components/cat-form/catform.stories.tsx +++ b/src/components/cat-form/catform.stories.tsx @@ -14,6 +14,8 @@ const meta: Meta = { export default meta; type Story = StoryObj; + + /* *👇 Render functions are a framework specific feature to allow you control on how the component renders. * See https://storybook.js.org/docs/api/csf @@ -22,3 +24,7 @@ type Story = StoryObj; export const Primary: Story = { render: (args) => , }; + +export const Secundary: Story = { + render: () => , +}; diff --git a/src/components/cat-form/catform.tsx b/src/components/cat-form/catform.tsx index 9532ab5..158d54d 100644 --- a/src/components/cat-form/catform.tsx +++ b/src/components/cat-form/catform.tsx @@ -23,25 +23,15 @@ import { ImageIcon } from "lucide-react" export interface transformProps { add: boolean } - - - -export function CatForm(add: transformProps) { - const transform = (add: boolean | transformProps) => { - switch (add) { - case add === true: - return `+ Add a Cat` - break - case add === false: - return "Edit" - break - default: - return "Add a Cat" - break - } +const transform = (add: boolean | transformProps) => { + if (add == true) { + return "Edit Cat" } - - + else { + return `+ Add a Cat` + } +} +export function CatForm(props: transformProps) { const [avatar, setAvatar] = useState(null); const handleAvatarChange = (e: React.ChangeEvent) => { @@ -65,7 +55,7 @@ export function CatForm(add: transformProps) { return <> - {transform(add)} + {transform(props.add)} Add cat From 8dd657cc3d27da5d999d78e27e8a7eb8117b66d5 Mon Sep 17 00:00:00 2001 From: Gustavo dos Santos Nascimento <74427958+GustavoSantoz@users.noreply.github.com> Date: Fri, 17 May 2024 14:08:32 +0000 Subject: [PATCH 17/23] Fix: name change --- .../catform.stories.tsx => catForm/catForm.stories.tsx} | 2 +- src/components/{cat-form/catform.tsx => catForm/catForm.tsx} | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename src/components/{cat-form/catform.stories.tsx => catForm/catForm.stories.tsx} (92%) rename src/components/{cat-form/catform.tsx => catForm/catForm.tsx} (100%) diff --git a/src/components/cat-form/catform.stories.tsx b/src/components/catForm/catForm.stories.tsx similarity index 92% rename from src/components/cat-form/catform.stories.tsx rename to src/components/catForm/catForm.stories.tsx index 5f521e2..e74a856 100644 --- a/src/components/cat-form/catform.stories.tsx +++ b/src/components/catForm/catForm.stories.tsx @@ -1,6 +1,6 @@ import type { Meta, StoryObj } from '@storybook/react'; -import { CatForm, transformProps } from './catform.tsx'; +import { CatForm, transformProps } from './catForm.tsx'; const meta: Meta = { component: CatForm, diff --git a/src/components/cat-form/catform.tsx b/src/components/catForm/catForm.tsx similarity index 100% rename from src/components/cat-form/catform.tsx rename to src/components/catForm/catForm.tsx From 65c8a5ba8c807ce22c55e096f1f64604eeb1635f Mon Sep 17 00:00:00 2001 From: Gustavo dos Santos Nascimento <74427958+GustavoSantoz@users.noreply.github.com> Date: Fri, 17 May 2024 11:11:39 -0300 Subject: [PATCH 18/23] Fix: add space --- src/pages/home.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/pages/home.jsx b/src/pages/home.jsx index ba055c8..9c91d45 100644 --- a/src/pages/home.jsx +++ b/src/pages/home.jsx @@ -1,4 +1,5 @@ import { MyButton } from "@/components/MyButton/MyButton"; + export const HomePage = () => { return (
@@ -6,4 +7,4 @@ export const HomePage = () => {
); -} \ No newline at end of file +} From ea6beebe36fe8184d92f48ed44ee34a09fb28922 Mon Sep 17 00:00:00 2001 From: Gustavo dos Santos Nascimento <74427958+GustavoSantoz@users.noreply.github.com> Date: Fri, 17 May 2024 11:12:06 -0300 Subject: [PATCH 19/23] Fix: add space 2.0 From d7d7cc3872b937540c8b9fd237112c0fc893ec7c Mon Sep 17 00:00:00 2001 From: Gustavo dos Santos Nascimento <74427958+GustavoSantoz@users.noreply.github.com> Date: Fri, 17 May 2024 11:13:19 -0300 Subject: [PATCH 20/23] Fix: add space 3.0 --- src/pages/home.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home.jsx b/src/pages/home.jsx index 9c91d45..2862c11 100644 --- a/src/pages/home.jsx +++ b/src/pages/home.jsx @@ -7,4 +7,4 @@ export const HomePage = () => {
); -} +} From f3bb0d59a2f6a4ed6d43331ec3af60daab2fc109 Mon Sep 17 00:00:00 2001 From: Gustavo dos Santos Nascimento <74427958+GustavoSantoz@users.noreply.github.com> Date: Fri, 17 May 2024 11:13:41 -0300 Subject: [PATCH 21/23] Fix: add space 4.0 --- src/pages/home.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home.jsx b/src/pages/home.jsx index 2862c11..9c91d45 100644 --- a/src/pages/home.jsx +++ b/src/pages/home.jsx @@ -7,4 +7,4 @@ export const HomePage = () => {
); -} +} From e12c56ea51a068d3c7f13b048204906e5aeb2797 Mon Sep 17 00:00:00 2001 From: Gabriel Collares <98597812+GabrielCollares@users.noreply.github.com> Date: Fri, 17 May 2024 14:25:51 +0000 Subject: [PATCH 22/23] FIX: Added button history --- src/components/catForm/catForm.stories.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/components/catForm/catForm.stories.tsx b/src/components/catForm/catForm.stories.tsx index e74a856..3b0dcb3 100644 --- a/src/components/catForm/catForm.stories.tsx +++ b/src/components/catForm/catForm.stories.tsx @@ -24,7 +24,3 @@ type Story = StoryObj; export const Primary: Story = { render: (args) => , }; - -export const Secundary: Story = { - render: () => , -}; From 9ef9a129be11ff76252dd6446186a25f503f7ad8 Mon Sep 17 00:00:00 2001 From: Gabriel Collares <98597812+GabrielCollares@users.noreply.github.com> Date: Fri, 17 May 2024 14:26:26 +0000 Subject: [PATCH 23/23] FIX: CHANGE NAME MODAL --- src/components/catForm/catForm.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/catForm/catForm.tsx b/src/components/catForm/catForm.tsx index 158d54d..23db033 100644 --- a/src/components/catForm/catForm.tsx +++ b/src/components/catForm/catForm.tsx @@ -58,7 +58,7 @@ export function CatForm(props: transformProps) { {transform(props.add)} - Add cat + {transform(props.add)}
{avatar ? (