From 2a94172777716c19e3cc53a820c5b915c42f5eff Mon Sep 17 00:00:00 2001 From: alexandre-kakal-akarah Date: Sat, 18 May 2024 17:05:08 +0200 Subject: [PATCH 1/4] WIP: journey multi step form --- next.config.mjs | 11 +- package-lock.json | 355 +++++++++++++++++- package.json | 3 + prisma/schema.prisma | 8 +- src/app/(app)/parcours/[id]/page.tsx | 10 + src/app/(app)/parcours/page.tsx | 21 ++ src/components/AddButton.tsx | 24 ++ src/components/Icons.tsx | 20 +- src/components/JourneyCard.tsx | 54 +++ src/components/form/StepCounter.tsx | 26 ++ src/components/form/journey/JourneyForm.tsx | 109 ++++++ .../form/journey/steps/FirstStep.tsx | 65 ++++ .../form/journey/steps/SecondStep.tsx | 188 ++++++++++ src/components/form/journey/steps/Steps.tsx | 63 ++++ .../form/journey/steps/ThirdStep.tsx | 31 ++ .../form/journey/steps/TreasureStep.tsx | 58 +++ src/components/ui/select.tsx | 160 ++++++++ src/components/ui/textarea.tsx | 24 ++ src/store/example.ts | 13 - src/store/journeyFormStore.ts | 21 ++ src/validators/journeyFormSchema.ts | 56 +++ 21 files changed, 1297 insertions(+), 23 deletions(-) create mode 100644 src/app/(app)/parcours/[id]/page.tsx create mode 100644 src/app/(app)/parcours/page.tsx create mode 100644 src/components/AddButton.tsx create mode 100644 src/components/JourneyCard.tsx create mode 100644 src/components/form/StepCounter.tsx create mode 100644 src/components/form/journey/JourneyForm.tsx create mode 100644 src/components/form/journey/steps/FirstStep.tsx create mode 100644 src/components/form/journey/steps/SecondStep.tsx create mode 100644 src/components/form/journey/steps/Steps.tsx create mode 100644 src/components/form/journey/steps/ThirdStep.tsx create mode 100644 src/components/form/journey/steps/TreasureStep.tsx create mode 100644 src/components/ui/select.tsx create mode 100644 src/components/ui/textarea.tsx delete mode 100644 src/store/example.ts create mode 100644 src/store/journeyFormStore.ts create mode 100644 src/validators/journeyFormSchema.ts diff --git a/next.config.mjs b/next.config.mjs index 4678774..30acda4 100644 --- a/next.config.mjs +++ b/next.config.mjs @@ -1,4 +1,13 @@ /** @type {import('next').NextConfig} */ -const nextConfig = {}; +const nextConfig = { + images: { + remotePatterns: [ + { + protocol: "https", + hostname: "via.assets.so", + }, + ], + }, +}; export default nextConfig; diff --git a/package-lock.json b/package-lock.json index dcd9478..1241f8e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,16 +12,19 @@ "@prisma/client": "^5.13.0", "@radix-ui/react-label": "^2.0.2", "@radix-ui/react-popover": "^1.0.7", + "@radix-ui/react-select": "^2.0.0", "@radix-ui/react-slot": "^1.0.2", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", "date-fns": "^3.6.0", + "framer-motion": "^11.2.4", "lucide-react": "^0.376.0", "next": "14.2.3", "react": "^18", "react-day-picker": "^8.10.1", "react-dom": "^18", "react-hook-form": "^7.51.4", + "react-spring-bottom-sheet": "^3.4.1", "tailwind-merge": "^2.3.0", "tailwindcss-animate": "^1.0.7", "zod": "^3.23.8", @@ -302,6 +305,11 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "node_modules/@juggle/resize-observer": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz", + "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==" + }, "node_modules/@next/env": { "version": "14.2.3", "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.3.tgz", @@ -554,6 +562,14 @@ "@prisma/debug": "5.13.0" } }, + "node_modules/@radix-ui/number": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.0.1.tgz", + "integrity": "sha512-T5gIdVO2mmPW3NNhjNgEP3cqMXjXL9UbO0BzWcXfvdBs+BohbQxvd/K5hSVKmn9/lbTdsQVKbUcP5WLCwvUbBg==", + "dependencies": { + "@babel/runtime": "^7.13.10" + } + }, "node_modules/@radix-ui/primitive": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.1.tgz", @@ -585,6 +601,32 @@ } } }, + "node_modules/@radix-ui/react-collection": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.3.tgz", + "integrity": "sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@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-compose-refs": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz", @@ -619,6 +661,23 @@ } } }, + "node_modules/@radix-ui/react-direction": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.0.1.tgz", + "integrity": "sha512-RXcvnXgyvYvBEOhCBuddKecVkoMiI10Jcm5cTI7abJRAHYfFxeu+FBQs/DvdxSYucxR5mna0dNsL6QFlds5TMA==", + "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-dismissable-layer": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.5.tgz", @@ -868,6 +927,49 @@ } } }, + "node_modules/@radix-ui/react-select": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.0.0.tgz", + "integrity": "sha512-RH5b7af4oHtkcHS7pG6Sgv5rk5Wxa7XI8W5gvB1N/yiuDGZxko1ynvOiVhFM7Cis2A8zxF9bTOUVbRDzPepe6w==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/number": "1.0.1", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-collection": "1.0.3", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-direction": "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-popper": "1.1.3", + "@radix-ui/react-portal": "1.0.4", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-slot": "1.0.2", + "@radix-ui/react-use-callback-ref": "1.0.1", + "@radix-ui/react-use-controllable-state": "1.0.1", + "@radix-ui/react-use-layout-effect": "1.0.1", + "@radix-ui/react-use-previous": "1.0.1", + "@radix-ui/react-visually-hidden": "1.0.3", + "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-slot": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz", @@ -956,6 +1058,23 @@ } } }, + "node_modules/@radix-ui/react-use-previous": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.0.1.tgz", + "integrity": "sha512-cV5La9DPwiQ7S0gf/0qiD6YgNqM5Fk97Kdrlc5yBcrF3jyEZQwm7vYFqMo4IfeHgJXsRaMvLABFtd0OVEmZhDw==", + "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-rect": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.0.1.tgz", @@ -992,6 +1111,29 @@ } } }, + "node_modules/@radix-ui/react-visually-hidden": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.0.3.tgz", + "integrity": "sha512-D4w41yN5YRKtu464TLnByKzMDG/JlMPHtfZgQAu9v6mNakUqGUI9vUrfQKz8NK41VMm/xbZbh76NUTVtIYqOMA==", + "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/rect": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.0.1.tgz", @@ -1084,6 +1226,11 @@ "@types/react": "*" } }, + "node_modules/@types/warning": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.3.tgz", + "integrity": "sha512-D1XC7WK8K+zZEveUPY+cf4+kgauk8N4eHr/XIHXGlGYkHLud6hK9lYfZk1ry1TNh798cZUCgb6MqGEG8DkJt6Q==" + }, "node_modules/@typescript-eslint/parser": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.2.0.tgz", @@ -1556,6 +1703,11 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/body-scroll-lock": { + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/body-scroll-lock/-/body-scroll-lock-3.1.5.tgz", + "integrity": "sha512-Yi1Xaml0EvNA0OYWxXiYNqY24AfWkbA6w5vxE7GWxtKfzIbZM+Qw+aSmkgsbWzbHiy/RCSkUZBplVxTA+E4jJg==" + }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -2846,6 +2998,14 @@ "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==", "dev": true }, + "node_modules/focus-trap": { + "version": "6.9.4", + "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-6.9.4.tgz", + "integrity": "sha512-v2NTsZe2FF59Y+sDykKY+XjqZ0cPfhq/hikWVL88BqLivnNiEffAsac6rP6H45ff9wG9LL5ToiDqrLEP9GX9mw==", + "dependencies": { + "tabbable": "^5.3.3" + } + }, "node_modules/for-each": { "version": "0.3.3", "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz", @@ -2870,6 +3030,30 @@ "url": "https://github.com/sponsors/isaacs" } }, + "node_modules/framer-motion": { + "version": "11.2.4", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.2.4.tgz", + "integrity": "sha512-D+EXd0lspaZijv3BJhAcSsyGz+gnvoEdnf+QWkPZdhoFzbeX/2skrH9XSVFb0osgUnCajW8x1frjhLuKwa/Reg==", + "dependencies": { + "tslib": "^2.4.0" + }, + "peerDependencies": { + "@emotion/is-prop-valid": "*", + "react": "^18.0.0", + "react-dom": "^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/is-prop-valid": { + "optional": true + }, + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, "node_modules/fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", @@ -4492,7 +4676,6 @@ "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", - "dev": true, "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", @@ -4581,8 +4764,7 @@ "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", - "dev": true + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, "node_modules/react-remove-scroll": { "version": "2.5.5", @@ -4629,6 +4811,110 @@ } } }, + "node_modules/react-spring": { + "version": "8.0.27", + "resolved": "https://registry.npmjs.org/react-spring/-/react-spring-8.0.27.tgz", + "integrity": "sha512-nDpWBe3ZVezukNRandTeLSPcwwTMjNVu1IDq9qA/AMiUqHuRN4BeSWvKr3eIxxg1vtiYiOLy4FqdfCP5IoP77g==", + "dependencies": { + "@babel/runtime": "^7.3.1", + "prop-types": "^15.5.8" + }, + "peerDependencies": { + "react": ">= 16.8.0", + "react-dom": ">= 16.8.0" + } + }, + "node_modules/react-spring-bottom-sheet": { + "version": "3.4.1", + "resolved": "https://registry.npmjs.org/react-spring-bottom-sheet/-/react-spring-bottom-sheet-3.4.1.tgz", + "integrity": "sha512-yDFqiPMm/fjefjnOe6Q9zxccbCl6HMUKsK5bWgfGHJIj4zmXVKio5d4icQvmOLuwpuCA2pwv4J6nGWS6fUZidQ==", + "dependencies": { + "@juggle/resize-observer": "^3.2.0", + "@reach/portal": "^0.13.0", + "@xstate/react": "^1.2.0", + "body-scroll-lock": "^3.1.5", + "focus-trap": "^6.2.2", + "react-spring": "^8.0.27", + "react-use-gesture": "^8.0.1", + "xstate": "^4.15.1" + }, + "peerDependencies": { + "react": "^16.14.0 || 17 || 18" + } + }, + "node_modules/react-spring-bottom-sheet/node_modules/@reach/portal": { + "version": "0.13.2", + "resolved": "https://registry.npmjs.org/@reach/portal/-/portal-0.13.2.tgz", + "integrity": "sha512-g74BnCdtuTGthzzHn2cWW+bcyIYb0iIE/yRsm89i8oNzNgpopbkh9UY8TPbhNlys52h7U60s4kpRTmcq+JqsTA==", + "dependencies": { + "@reach/utils": "0.13.2", + "tslib": "^2.1.0" + }, + "peerDependencies": { + "react": "^16.8.0 || 17.x", + "react-dom": "^16.8.0 || 17.x" + } + }, + "node_modules/react-spring-bottom-sheet/node_modules/@reach/portal/node_modules/@reach/utils": { + "version": "0.13.2", + "resolved": "https://registry.npmjs.org/@reach/utils/-/utils-0.13.2.tgz", + "integrity": "sha512-3ir6cN60zvUrwjOJu7C6jec/samqAeyAB12ZADK+qjnmQPdzSYldrFWwDVV5H0WkhbYXR3uh+eImu13hCetNPQ==", + "dependencies": { + "@types/warning": "^3.0.0", + "tslib": "^2.1.0", + "warning": "^4.0.3" + }, + "peerDependencies": { + "react": "^16.8.0 || 17.x", + "react-dom": "^16.8.0 || 17.x" + } + }, + "node_modules/react-spring-bottom-sheet/node_modules/@xstate/react": { + "version": "1.6.3", + "resolved": "https://registry.npmjs.org/@xstate/react/-/react-1.6.3.tgz", + "integrity": "sha512-NCUReRHPGvvCvj2yLZUTfR0qVp6+apc8G83oXSjN4rl89ZjyujiKrTff55bze/HrsvCsP/sUJASf2n0nzMF1KQ==", + "dependencies": { + "use-isomorphic-layout-effect": "^1.0.0", + "use-subscription": "^1.3.0" + }, + "peerDependencies": { + "@xstate/fsm": "^1.0.0", + "react": "^16.8.0 || ^17.0.0", + "xstate": "^4.11.0" + }, + "peerDependenciesMeta": { + "@xstate/fsm": { + "optional": true + }, + "xstate": { + "optional": true + } + } + }, + "node_modules/react-spring-bottom-sheet/node_modules/react-dom": { + "version": "17.0.2", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz", + "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==", + "peer": true, + "dependencies": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1", + "scheduler": "^0.20.2" + }, + "peerDependencies": { + "react": "17.0.2" + } + }, + "node_modules/react-spring-bottom-sheet/node_modules/scheduler": { + "version": "0.20.2", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz", + "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==", + "peer": true, + "dependencies": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1" + } + }, "node_modules/react-style-singleton": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz", @@ -4651,6 +4937,15 @@ } } }, + "node_modules/react-use-gesture": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/react-use-gesture/-/react-use-gesture-8.0.1.tgz", + "integrity": "sha512-CXzUNkulUdgouaAlvAsC5ZVo0fi9KGSBSk81WrE4kOIcJccpANe9zZkAYr5YZZhqpicIFxitsrGVS4wmoMun9A==", + "deprecated": "This package is no longer maintained. Please use @use-gesture/react instead", + "peerDependencies": { + "react": ">= 16.8.0" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -5234,6 +5529,11 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/tabbable": { + "version": "5.3.3", + "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-5.3.3.tgz", + "integrity": "sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA==" + }, "node_modules/tailwind-merge": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.3.0.tgz", @@ -5578,6 +5878,19 @@ } } }, + "node_modules/use-isomorphic-layout-effect": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz", + "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/use-sidecar": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz", @@ -5599,6 +5912,25 @@ } } }, + "node_modules/use-subscription": { + "version": "1.8.2", + "resolved": "https://registry.npmjs.org/use-subscription/-/use-subscription-1.8.2.tgz", + "integrity": "sha512-yC2ShScvQ1lAGRp5Y6pz1MqBIU81REfJ/sQIe16BCgKK9mRlZCnU90uY0alKsN6e/Next0vXTsvH3HbAfdH68w==", + "dependencies": { + "use-sync-external-store": "^1.2.2" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/use-subscription/node_modules/use-sync-external-store": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz", + "integrity": "sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/use-sync-external-store": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz", @@ -5618,6 +5950,14 @@ "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==", "devOptional": true }, + "node_modules/warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/which": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", @@ -5813,6 +6153,15 @@ "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==", "dev": true }, + "node_modules/xstate": { + "version": "4.38.3", + "resolved": "https://registry.npmjs.org/xstate/-/xstate-4.38.3.tgz", + "integrity": "sha512-SH7nAaaPQx57dx6qvfcIgqKRXIh4L0A1iYEqim4s1u7c9VoCgzZc+63FY90AKU4ZzOC2cfJzTnpO4zK7fCUzzw==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/xstate" + } + }, "node_modules/yallist": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", diff --git a/package.json b/package.json index af036ae..df00cd7 100644 --- a/package.json +++ b/package.json @@ -16,16 +16,19 @@ "@prisma/client": "^5.13.0", "@radix-ui/react-label": "^2.0.2", "@radix-ui/react-popover": "^1.0.7", + "@radix-ui/react-select": "^2.0.0", "@radix-ui/react-slot": "^1.0.2", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", "date-fns": "^3.6.0", + "framer-motion": "^11.2.4", "lucide-react": "^0.376.0", "next": "14.2.3", "react": "^18", "react-day-picker": "^8.10.1", "react-dom": "^18", "react-hook-form": "^7.51.4", + "react-spring-bottom-sheet": "^3.4.1", "tailwind-merge": "^2.3.0", "tailwindcss-animate": "^1.0.7", "zod": "^3.23.8", diff --git a/prisma/schema.prisma b/prisma/schema.prisma index e19b93e..deb5d71 100644 --- a/prisma/schema.prisma +++ b/prisma/schema.prisma @@ -91,9 +91,9 @@ model Journey { physicalDifficulty Int lastCompletion DateTime? mobilityImpaired String - PartiallySighted String - PartiallyDeaf String - CognitivelyImpaired String + partiallySighted String + partiallyDeaf String + cognitivelyImpaired String createdAt DateTime @default(now()) updatedAt DateTime @updatedAt steps Step[] @@ -132,4 +132,4 @@ model Comment { updatedAt DateTime @updatedAt user User @relation(fields: [authorId], references: [id]) journey Journey @relation(fields: [journeyId], references: [id]) -} \ No newline at end of file +} diff --git a/src/app/(app)/parcours/[id]/page.tsx b/src/app/(app)/parcours/[id]/page.tsx new file mode 100644 index 0000000..7ec18da --- /dev/null +++ b/src/app/(app)/parcours/[id]/page.tsx @@ -0,0 +1,10 @@ +import React from "react"; + +type Params = { id: string }; + +const JourneyDetail = ({ params }: { params: Params }) => { + // get journey by id + return
JourneyDetail
; +}; + +export default JourneyDetail; diff --git a/src/app/(app)/parcours/page.tsx b/src/app/(app)/parcours/page.tsx new file mode 100644 index 0000000..4a8ccd1 --- /dev/null +++ b/src/app/(app)/parcours/page.tsx @@ -0,0 +1,21 @@ +import React from "react"; +import JourneyCard from "@/components/JourneyCard"; +import AddButton from "@/components/AddButton"; +import JourneyForm from "@/components/form/journey/JourneyForm"; + +const Parcours = () => { + return ( +
+ { + // to do: fetch parcours + Array.from({ length: 10 }).map((_, i) => ( + + )) + } + + +
+ ); +}; + +export default Parcours; diff --git a/src/components/AddButton.tsx b/src/components/AddButton.tsx new file mode 100644 index 0000000..13be050 --- /dev/null +++ b/src/components/AddButton.tsx @@ -0,0 +1,24 @@ +"use client"; +import React from "react"; +import { useJourneyFormStore } from "@/store/journeyFormStore"; +import { Icons } from "./Icons"; + +type AddButtonProps = { + action: "journey" | "event"; +}; + +const AddButton = ({ action }: AddButtonProps) => { + const { showModal } = useJourneyFormStore(); + return ( +
{ + action === "journey" ? showModal() : showModal(); + }} + className="fixed bottom-24 right-[20px] cursor-pointer rounded-lg bg-slate-500 p-4 shadow-lg" + > + +
+ ); +}; + +export default AddButton; diff --git a/src/components/Icons.tsx b/src/components/Icons.tsx index bfb7227..134ebb2 100644 --- a/src/components/Icons.tsx +++ b/src/components/Icons.tsx @@ -1,4 +1,4 @@ -import { LucideProps } from "lucide-react"; +import { LucideProps, Plus } from "lucide-react"; export const Icons = { flag: (props: LucideProps) => ( @@ -44,7 +44,7 @@ export const Icons = { fill="none" xmlns="http://www.w3.org/2000/svg" > - + ), + mapPin: (props: LucideProps) => ( + + + + ), + plus: (props: LucideProps) => , }; diff --git a/src/components/JourneyCard.tsx b/src/components/JourneyCard.tsx new file mode 100644 index 0000000..5c69bf7 --- /dev/null +++ b/src/components/JourneyCard.tsx @@ -0,0 +1,54 @@ +import React from "react"; +import Image from "next/image"; +import Link from "next/link"; +import { Icons } from "./Icons"; + +// type JourneyCardProps = { +// id: string; +// title: string; +// location: string; +// description: string; +// image: string; +// cluesDifficulty: number; +// physicalDifficulty: number; +// commentsCount: number; +// rating: number; +// }; + +const JourneyCard = (/* { + id, + title, + location, + description, + cluesDifficulty, + commentsCount, + image, + physicalDifficulty, + rating, +}: JourneyCardProps */) => { + const id = "1"; + return ( + + +
+

Titre

+ {/* to do: add rating */} +
+ +

Normandie

+
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in + sodales mauris. +

+
+ + ); +}; + +export default JourneyCard; diff --git a/src/components/form/StepCounter.tsx b/src/components/form/StepCounter.tsx new file mode 100644 index 0000000..120300b --- /dev/null +++ b/src/components/form/StepCounter.tsx @@ -0,0 +1,26 @@ +"use client"; + +type StepCounterProps = { + step: number; + totalSteps: number; +}; + +const StepCounter = ({ step, totalSteps }: StepCounterProps) => { + return ( +
+ {[...Array(totalSteps)].map((_, index) => ( +
+ ))} +

+ Étape {step + 1}/{totalSteps} +

+
+ ); +}; + +export default StepCounter; diff --git a/src/components/form/journey/JourneyForm.tsx b/src/components/form/journey/JourneyForm.tsx new file mode 100644 index 0000000..e2dda91 --- /dev/null +++ b/src/components/form/journey/JourneyForm.tsx @@ -0,0 +1,109 @@ +"use client"; +import React, { useState } from "react"; +import { + journeyFormSchema, + firstStepSchema, + secondStepSchema, + thirdStepSchema, + forthStepSchema, +} from "@/validators/journeyFormSchema"; +import { z } from "zod"; +import { useJourneyFormStore } from "@/store/journeyFormStore"; +import { useForm, SubmitHandler } from "react-hook-form"; +import { Form } from "@/components/ui/form"; +import { Button } from "@/components/ui/button"; +import { zodResolver } from "@hookform/resolvers/zod"; +import StepCounter from "../StepCounter"; +import Steps from "./steps/Steps"; + +export type JourneyFormValues = z.infer; +type FieldName = keyof JourneyFormValues; + +const firstStepFields = Object.keys(firstStepSchema.shape); +const secondStepFields = Object.keys(secondStepSchema.shape); +const thirdStepFields = Object.keys(thirdStepSchema.shape); +const forthStepFields = Object.keys(forthStepSchema.shape); + +const steps = [ + { + fields: firstStepFields, + }, + { + fields: secondStepFields, + }, + { + fields: thirdStepFields, + }, + { + fields: forthStepFields, + }, +]; + +const JourneyForm = () => { + const { isVisible, hideModal } = useJourneyFormStore(); + const [formStatus, setFormStatus] = useState<"idle" | "errored">("idle"); + const [currentStep, setCurrentStep] = useState(0); + const [dir, setDir] = useState<"ltr" | "rtl">("rtl"); + + const form = useForm({ + resolver: zodResolver(journeyFormSchema), + }); + + const processForm: SubmitHandler = async (data) => { + console.log(data); + }; + + const next = async () => { + const fields = steps[currentStep].fields; + const output = await form.trigger(fields as FieldName[]); + if (!output) return; + if (currentStep < steps.length) { + if (currentStep === steps.length - 1) { + await form.handleSubmit(processForm)(); + } + + if (currentStep < steps.length - 1) { + setCurrentStep((step) => step + 1); + setDir("ltr"); + } + } + }; + + const prev = () => { + if (currentStep > 0) { + setCurrentStep((step) => step - 1); + setDir("rtl"); + } + }; + + const dismissModal = () => { + hideModal(); + setCurrentStep(0); + form.reset(); + setFormStatus("idle"); + }; + + if (!isVisible) return null; + + return ( +
+ +
+ {!form.formState.isSubmitSuccessful && formStatus === "idle" && ( + + + + + )} + +
+ ); +}; + +export default JourneyForm; diff --git a/src/components/form/journey/steps/FirstStep.tsx b/src/components/form/journey/steps/FirstStep.tsx new file mode 100644 index 0000000..ed2f824 --- /dev/null +++ b/src/components/form/journey/steps/FirstStep.tsx @@ -0,0 +1,65 @@ +import React from "react"; +import { UseFormReturn } from "react-hook-form"; +import { JourneyFormValues } from "../JourneyForm"; +import { + FormControl, + FormField, + FormItem, + FormMessage, +} from "@/components/ui/form"; +import { Input } from "@/components/ui/input"; +import { Button } from "@/components/ui/button"; +import { Label } from "@/components/ui/label"; + +type FirstStepProps = { + next: () => Promise; + form: UseFormReturn; +}; + +const FirstStep = ({ form, next }: FirstStepProps) => { + return ( +
+

Créez votre propre Parcours !

+

+ Ajouter un titre, une description et une image afin de rednre votre + parcours le plus attrayant possible +

+ ( + + + <> + + + + + + + )} + /> + + ( + + + <> + + + + + + + )} + /> + + {/* TODO: add image file input */} + +
+ ); +}; + +export default FirstStep; diff --git a/src/components/form/journey/steps/SecondStep.tsx b/src/components/form/journey/steps/SecondStep.tsx new file mode 100644 index 0000000..144fba6 --- /dev/null +++ b/src/components/form/journey/steps/SecondStep.tsx @@ -0,0 +1,188 @@ +import React from "react"; +import { UseFormReturn } from "react-hook-form"; +import { JourneyFormValues } from "../JourneyForm"; +import { + FormControl, + FormField, + FormItem, + FormMessage, +} from "@/components/ui/form"; +import { Textarea } from "@/components/ui/textarea"; +import { Button } from "@/components/ui/button"; +import { Label } from "@/components/ui/label"; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select"; + +type SecondStepProps = { + prev: () => void; + next: () => Promise; + form: UseFormReturn; +}; + +const SecondStep = ({ form, next, prev }: SecondStepProps) => { + return ( +
+

Que doit-on savoir sur le parcours ?

+ ( + + + <> + +