diff --git a/pcomparator/.yarn/cache/@juggle-resize-observer-npm-3.4.0-659544c6b5-2505028c05.zip b/pcomparator/.yarn/cache/@juggle-resize-observer-npm-3.4.0-659544c6b5-2505028c05.zip new file mode 100644 index 0000000..5b38273 Binary files /dev/null and b/pcomparator/.yarn/cache/@juggle-resize-observer-npm-3.4.0-659544c6b5-2505028c05.zip differ diff --git a/pcomparator/.yarn/cache/@reach-portal-npm-0.13.2-bcac60cdd9-319e0e9272.zip b/pcomparator/.yarn/cache/@reach-portal-npm-0.13.2-bcac60cdd9-319e0e9272.zip new file mode 100644 index 0000000..39f197f Binary files /dev/null and b/pcomparator/.yarn/cache/@reach-portal-npm-0.13.2-bcac60cdd9-319e0e9272.zip differ diff --git a/pcomparator/.yarn/cache/@reach-utils-npm-0.13.2-a7df0a20f1-63b4f505c5.zip b/pcomparator/.yarn/cache/@reach-utils-npm-0.13.2-a7df0a20f1-63b4f505c5.zip new file mode 100644 index 0000000..4ec541f Binary files /dev/null and b/pcomparator/.yarn/cache/@reach-utils-npm-0.13.2-a7df0a20f1-63b4f505c5.zip differ diff --git a/pcomparator/.yarn/cache/@react-spring-animated-npm-9.7.5-e7a80d3c21-e28662a659.zip b/pcomparator/.yarn/cache/@react-spring-animated-npm-9.7.5-e7a80d3c21-e28662a659.zip new file mode 100644 index 0000000..fbf6e67 Binary files /dev/null and b/pcomparator/.yarn/cache/@react-spring-animated-npm-9.7.5-e7a80d3c21-e28662a659.zip differ diff --git a/pcomparator/.yarn/cache/@react-spring-core-npm-9.7.5-9c7c5bcc24-60c0151547.zip b/pcomparator/.yarn/cache/@react-spring-core-npm-9.7.5-9c7c5bcc24-60c0151547.zip new file mode 100644 index 0000000..26a7673 Binary files /dev/null and b/pcomparator/.yarn/cache/@react-spring-core-npm-9.7.5-9c7c5bcc24-60c0151547.zip differ diff --git a/pcomparator/.yarn/cache/@react-spring-konva-npm-9.7.5-090fe96d71-86f8d23e5e.zip b/pcomparator/.yarn/cache/@react-spring-konva-npm-9.7.5-090fe96d71-86f8d23e5e.zip new file mode 100644 index 0000000..9ef6181 Binary files /dev/null and b/pcomparator/.yarn/cache/@react-spring-konva-npm-9.7.5-090fe96d71-86f8d23e5e.zip differ diff --git a/pcomparator/.yarn/cache/@react-spring-native-npm-9.7.5-258596985e-d574dd6ac1.zip b/pcomparator/.yarn/cache/@react-spring-native-npm-9.7.5-258596985e-d574dd6ac1.zip new file mode 100644 index 0000000..1aede7a Binary files /dev/null and b/pcomparator/.yarn/cache/@react-spring-native-npm-9.7.5-258596985e-d574dd6ac1.zip differ diff --git a/pcomparator/.yarn/cache/@react-spring-rafz-npm-9.7.5-1d03adee03-adbffdf259.zip b/pcomparator/.yarn/cache/@react-spring-rafz-npm-9.7.5-1d03adee03-adbffdf259.zip new file mode 100644 index 0000000..eb455b4 Binary files /dev/null and b/pcomparator/.yarn/cache/@react-spring-rafz-npm-9.7.5-1d03adee03-adbffdf259.zip differ diff --git a/pcomparator/.yarn/cache/@react-spring-shared-npm-9.7.5-3e317d9163-374ee7bece.zip b/pcomparator/.yarn/cache/@react-spring-shared-npm-9.7.5-3e317d9163-374ee7bece.zip new file mode 100644 index 0000000..80fd08a Binary files /dev/null and b/pcomparator/.yarn/cache/@react-spring-shared-npm-9.7.5-3e317d9163-374ee7bece.zip differ diff --git a/pcomparator/.yarn/cache/@react-spring-three-npm-9.7.5-05f511328a-dea5d51121.zip b/pcomparator/.yarn/cache/@react-spring-three-npm-9.7.5-05f511328a-dea5d51121.zip new file mode 100644 index 0000000..f931b95 Binary files /dev/null and b/pcomparator/.yarn/cache/@react-spring-three-npm-9.7.5-05f511328a-dea5d51121.zip differ diff --git a/pcomparator/.yarn/cache/@react-spring-types-npm-9.7.5-b41ad8a858-f9d2dea0ea.zip b/pcomparator/.yarn/cache/@react-spring-types-npm-9.7.5-b41ad8a858-f9d2dea0ea.zip new file mode 100644 index 0000000..cdcbfa8 Binary files /dev/null and b/pcomparator/.yarn/cache/@react-spring-types-npm-9.7.5-b41ad8a858-f9d2dea0ea.zip differ diff --git a/pcomparator/.yarn/cache/@react-spring-web-npm-9.7.5-9609448a64-4da57c7d2b.zip b/pcomparator/.yarn/cache/@react-spring-web-npm-9.7.5-9609448a64-4da57c7d2b.zip new file mode 100644 index 0000000..31497af Binary files /dev/null and b/pcomparator/.yarn/cache/@react-spring-web-npm-9.7.5-9609448a64-4da57c7d2b.zip differ diff --git a/pcomparator/.yarn/cache/@react-spring-zdog-npm-9.7.5-b937115de1-868aad4052.zip b/pcomparator/.yarn/cache/@react-spring-zdog-npm-9.7.5-b937115de1-868aad4052.zip new file mode 100644 index 0000000..c7eaddf Binary files /dev/null and b/pcomparator/.yarn/cache/@react-spring-zdog-npm-9.7.5-b937115de1-868aad4052.zip differ diff --git a/pcomparator/.yarn/cache/@types-warning-npm-3.0.3-651ad6a5da-862b71c918.zip b/pcomparator/.yarn/cache/@types-warning-npm-3.0.3-651ad6a5da-862b71c918.zip new file mode 100644 index 0000000..bae139c Binary files /dev/null and b/pcomparator/.yarn/cache/@types-warning-npm-3.0.3-651ad6a5da-862b71c918.zip differ diff --git a/pcomparator/.yarn/cache/@xstate-react-npm-1.6.3-f4e65a4ff8-88f4e798d2.zip b/pcomparator/.yarn/cache/@xstate-react-npm-1.6.3-f4e65a4ff8-88f4e798d2.zip new file mode 100644 index 0000000..59f94e1 Binary files /dev/null and b/pcomparator/.yarn/cache/@xstate-react-npm-1.6.3-f4e65a4ff8-88f4e798d2.zip differ diff --git a/pcomparator/.yarn/cache/body-scroll-lock-npm-3.1.5-fbe946063b-52c25b81d6.zip b/pcomparator/.yarn/cache/body-scroll-lock-npm-3.1.5-fbe946063b-52c25b81d6.zip new file mode 100644 index 0000000..494d3db Binary files /dev/null and b/pcomparator/.yarn/cache/body-scroll-lock-npm-3.1.5-fbe946063b-52c25b81d6.zip differ diff --git a/pcomparator/.yarn/cache/focus-trap-npm-6.9.4-64b032bc16-0b4cebcc11.zip b/pcomparator/.yarn/cache/focus-trap-npm-6.9.4-64b032bc16-0b4cebcc11.zip new file mode 100644 index 0000000..05f0ac9 Binary files /dev/null and b/pcomparator/.yarn/cache/focus-trap-npm-6.9.4-64b032bc16-0b4cebcc11.zip differ diff --git a/pcomparator/.yarn/cache/react-spring-bottom-sheet-npm-3.5.0-alpha.0-8b620d2627-2737875a9a.zip b/pcomparator/.yarn/cache/react-spring-bottom-sheet-npm-3.5.0-alpha.0-8b620d2627-2737875a9a.zip new file mode 100644 index 0000000..e7a4fce Binary files /dev/null and b/pcomparator/.yarn/cache/react-spring-bottom-sheet-npm-3.5.0-alpha.0-8b620d2627-2737875a9a.zip differ diff --git a/pcomparator/.yarn/cache/react-spring-npm-9.7.4-b6f3613e41-d37f10a14f.zip b/pcomparator/.yarn/cache/react-spring-npm-9.7.4-b6f3613e41-d37f10a14f.zip new file mode 100644 index 0000000..453d9fe Binary files /dev/null and b/pcomparator/.yarn/cache/react-spring-npm-9.7.4-b6f3613e41-d37f10a14f.zip differ diff --git a/pcomparator/.yarn/cache/react-use-gesture-npm-8.0.1-8d080030e5-c8b2f34089.zip b/pcomparator/.yarn/cache/react-use-gesture-npm-8.0.1-8d080030e5-c8b2f34089.zip new file mode 100644 index 0000000..a513690 Binary files /dev/null and b/pcomparator/.yarn/cache/react-use-gesture-npm-8.0.1-8d080030e5-c8b2f34089.zip differ diff --git a/pcomparator/.yarn/cache/tabbable-npm-5.3.3-baf35cffe9-1aa56e1bb6.zip b/pcomparator/.yarn/cache/tabbable-npm-5.3.3-baf35cffe9-1aa56e1bb6.zip new file mode 100644 index 0000000..af9e806 Binary files /dev/null and b/pcomparator/.yarn/cache/tabbable-npm-5.3.3-baf35cffe9-1aa56e1bb6.zip differ diff --git a/pcomparator/.yarn/cache/use-subscription-npm-1.8.2-7814b55b51-6b17f92a75.zip b/pcomparator/.yarn/cache/use-subscription-npm-1.8.2-7814b55b51-6b17f92a75.zip new file mode 100644 index 0000000..9cd5230 Binary files /dev/null and b/pcomparator/.yarn/cache/use-subscription-npm-1.8.2-7814b55b51-6b17f92a75.zip differ diff --git a/pcomparator/.yarn/cache/use-sync-external-store-npm-1.2.2-7923c915e1-fe07c071c4.zip b/pcomparator/.yarn/cache/use-sync-external-store-npm-1.2.2-7923c915e1-fe07c071c4.zip new file mode 100644 index 0000000..c5206e5 Binary files /dev/null and b/pcomparator/.yarn/cache/use-sync-external-store-npm-1.2.2-7923c915e1-fe07c071c4.zip differ diff --git a/pcomparator/.yarn/cache/warning-npm-4.0.3-291e921d6d-4f2cb6a957.zip b/pcomparator/.yarn/cache/warning-npm-4.0.3-291e921d6d-4f2cb6a957.zip new file mode 100644 index 0000000..6c48c28 Binary files /dev/null and b/pcomparator/.yarn/cache/warning-npm-4.0.3-291e921d6d-4f2cb6a957.zip differ diff --git a/pcomparator/.yarn/cache/xstate-npm-4.38.3-0ca901f715-b52e5bf349.zip b/pcomparator/.yarn/cache/xstate-npm-4.38.3-0ca901f715-b52e5bf349.zip new file mode 100644 index 0000000..e04bd90 Binary files /dev/null and b/pcomparator/.yarn/cache/xstate-npm-4.38.3-0ca901f715-b52e5bf349.zip differ diff --git a/pcomparator/package.json b/pcomparator/package.json index bb78e8d..9317909 100644 --- a/pcomparator/package.json +++ b/pcomparator/package.json @@ -62,6 +62,7 @@ "react-dom": "^18.3.1", "react-hook-form": "^7.53.1", "react-phone-number-input": "^3.4.9", + "react-spring-bottom-sheet": "3.5.0-alpha.0", "react-toastify": "^10.0.6", "react-wrap-balancer": "^1.0.0", "storybook": "^8.3.6", diff --git a/pcomparator/src/app/[locale]/dashboard/layout.tsx b/pcomparator/src/app/[locale]/dashboard/layout.tsx index c088046..3cab491 100644 --- a/pcomparator/src/app/[locale]/dashboard/layout.tsx +++ b/pcomparator/src/app/[locale]/dashboard/layout.tsx @@ -5,7 +5,7 @@ import { type NextPageProps, withLinguiLayout } from "~/core/withLinguiLayout"; const DashboardLayout = ({ children }: NextPageProps) => { return ( -
+
+ } + /> ); diff --git a/pcomparator/src/applications/Prices/Ui/NewPrice/NewPriceButton/index.tsx b/pcomparator/src/applications/Prices/Ui/NewPrice/NewPriceButton/index.tsx index d2b166e..8429037 100644 --- a/pcomparator/src/applications/Prices/Ui/NewPrice/NewPriceButton/index.tsx +++ b/pcomparator/src/applications/Prices/Ui/NewPrice/NewPriceButton/index.tsx @@ -12,13 +12,8 @@ import { NewPriceButtonMobile } from "~/applications/Prices/Ui/NewPrice/NewPrice import useDevice from "~/hooks/useDevice"; export const NewPriceButton = () => { - const { isOpen, onOpen, onOpenChange } = useDisclosure(); - const { - isOpen: isOpenForm, - onOpen: onOpenForm, - onOpenChange: onOpenChangeForm, - onClose: onCloseForm - } = useDisclosure(); + const [isOpenMobile, setIsOpenMobile] = useState(false); + const { isOpen, onOpen, onOpenChange, onClose } = useDisclosure(); const [modal, setModal] = useState<"with" | "without" | undefined>(undefined); const [barcode, setBarcode] = useState(undefined); const notify = (productName: string) => @@ -31,8 +26,9 @@ export const NewPriceButton = () => { <> {modal === "with" ? ( { if (!barcode) { setBarcode(detectedBarcode); @@ -43,23 +39,24 @@ export const NewPriceButton = () => { ) : null} {modal === "without" ? ( { notify(productName); - onCloseForm(); + onClose(); }} barcode={barcode} /> ) : null} {device === "desktop" ? ( - + ) : ( setIsOpenMobile(true)} + onClose={() => setIsOpenMobile(false)} + onOpenForm={onOpen} onOpenModal={setModal} /> )} diff --git a/pcomparator/src/applications/Prices/Ui/NewQuickPrice/NewQuickPrice.tsx b/pcomparator/src/applications/Prices/Ui/NewQuickPrice/NewQuickPrice.tsx index 6f066f4..0559d17 100644 --- a/pcomparator/src/applications/Prices/Ui/NewQuickPrice/NewQuickPrice.tsx +++ b/pcomparator/src/applications/Prices/Ui/NewQuickPrice/NewQuickPrice.tsx @@ -1,28 +1,30 @@ -import { Modal, ModalContent, ModalHeader } from "@nextui-org/react"; import { useState } from "react"; import { Location } from "~/applications/Prices/Ui/NewPrice/FormSteps/Step4/Location"; import { Price } from "~/applications/Prices/Ui/NewQuickPrice/FormSteps/Price"; +import { Modal } from "~/components/Modal/Modal"; import { Stepper } from "~/components/Stepper/Stepper"; interface NewQuickPriceProps { isOpen: boolean; onOpenChange: () => void; + onClose: () => void; productName: string; } -export const NewQuickPrice = ({ isOpen, onOpenChange, productName }: NewQuickPriceProps) => { +export const NewQuickPrice = ({ isOpen, onClose, onOpenChange, productName }: NewQuickPriceProps) => { const [step, setStep] = useState(1); const [formData, setFormData] = useState<{ price: number; location: string; storeName: string } | null>( null ); return ( - - - - - - {step === 1 ? ( + } + body={ + step === 1 ? ( { setFormData((formData) => ({ ...(formData as any), ...price })); @@ -37,8 +39,9 @@ export const NewQuickPrice = ({ isOpen, onOpenChange, productName }: NewQuickPri const finalData = { ...formData, ...data }; }} /> - )} - - + ) + } + isForm + /> ); }; diff --git a/pcomparator/src/applications/Searchbar/Ui/SearchBarcode/BarcodeScannerModal.tsx b/pcomparator/src/applications/Searchbar/Ui/SearchBarcode/BarcodeScannerModal.tsx index ff42f1e..03d3224 100644 --- a/pcomparator/src/applications/Searchbar/Ui/SearchBarcode/BarcodeScannerModal.tsx +++ b/pcomparator/src/applications/Searchbar/Ui/SearchBarcode/BarcodeScannerModal.tsx @@ -1,30 +1,23 @@ -import { Modal, ModalContent } from "@nextui-org/react"; import { useState } from "react"; import { BarcodeScanner } from "react-barcode-scanner"; import type { Barcode } from "~/applications/Prices/Domain/ValueObjects/Barcode"; +import { Modal } from "~/components/Modal/Modal"; interface BarcodeScannerModalProps { isOpen: boolean; - onOpenChange: (isOpen: boolean) => void; + onClose: () => void; onBarcodeDetected: (barcode: Barcode) => void; } -export const BarcodeScannerModal = ({ - isOpen, - onOpenChange, - onBarcodeDetected -}: BarcodeScannerModalProps) => { +export const BarcodeScannerModal = ({ isOpen, onClose, onBarcodeDetected }: BarcodeScannerModalProps) => { const [hasBeenCaptured, setHasBeenCaptured] = useState(false); return ( - + body={ { if (!hasBeenCaptured) { @@ -32,6 +25,7 @@ export const BarcodeScannerModal = ({ setHasBeenCaptured(true); } }} + className="!h-[80dvh]" options={{ formats: [ "codabar", @@ -49,7 +43,7 @@ export const BarcodeScannerModal = ({ ] }} /> - - + } + /> ); }; diff --git a/pcomparator/src/applications/Searchbar/Ui/SearchBarcode/SearchBarcode.tsx b/pcomparator/src/applications/Searchbar/Ui/SearchBarcode/SearchBarcode.tsx index 5d4848d..94e61ca 100644 --- a/pcomparator/src/applications/Searchbar/Ui/SearchBarcode/SearchBarcode.tsx +++ b/pcomparator/src/applications/Searchbar/Ui/SearchBarcode/SearchBarcode.tsx @@ -10,7 +10,7 @@ interface SearchBarcodeProps { } export const SearchBarcode = ({ onNewProduct, onNoPrices }: SearchBarcodeProps) => { - const { onOpen, onClose, isOpen, onOpenChange } = useDisclosure(); + const { isOpen, onClose, onOpen } = useDisclosure(); const [step, setStep] = useState(1); const [search, setSearch] = useState(null); @@ -19,7 +19,7 @@ export const SearchBarcode = ({ onNewProduct, onNoPrices }: SearchBarcodeProps) {step === 1 ? ( { setSearch(barcode.barcode); setStep(2); diff --git a/pcomparator/src/components/Header/Header.tsx b/pcomparator/src/components/Header/Header.tsx index 856fdbe..9590f78 100644 --- a/pcomparator/src/components/Header/Header.tsx +++ b/pcomparator/src/components/Header/Header.tsx @@ -3,6 +3,7 @@ import { Image, Navbar, NavbarBrand, NavbarContent } from "@nextui-org/react"; import type { ReactNode } from "react"; import Link from "~/components/Link/Link"; +import useDevice from "~/hooks/useDevice"; import useScroll from "~/hooks/useScroll"; import Logo from "../../../public/static/logo.png"; @@ -12,6 +13,7 @@ interface HeaderProps { export const Header = ({ rightArea }: HeaderProps) => { const hasScrolled = useScroll(50); + const device = useDevice(); return ( @@ -26,7 +28,7 @@ export const Header = ({ rightArea }: HeaderProps) => { {/* */} - {rightArea} + {device === "desktop" ? rightArea : null} ); diff --git a/pcomparator/src/components/Modal/Modal.stories.tsx b/pcomparator/src/components/Modal/Modal.stories.tsx new file mode 100644 index 0000000..ef0feda --- /dev/null +++ b/pcomparator/src/components/Modal/Modal.stories.tsx @@ -0,0 +1,32 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import type { FieldValues, RegisterOptions } from "react-hook-form"; +import { Modal, type ModalProps } from "~/components/Modal/Modal"; +import "react-spring-bottom-sheet/dist/style.css"; +import { useDisclosure } from "@nextui-org/react"; + +export default { + title: "components/Modal", + component: Modal +} satisfies Meta; + +type FileObjProps = ModalProps & RegisterOptions; + +const defaultProps: FileObjProps = { + isOpen: true, + onClose: () => null, + body:

Hello guys

+}; + +const Template = (props: any) => { + const { isOpen, onClose } = useDisclosure({ defaultOpen: true }); + + return ; +}; + +export const Default: StoryObj = { + render: Template, + + args: { + ...defaultProps + } +}; diff --git a/pcomparator/src/components/Modal/Modal.tsx b/pcomparator/src/components/Modal/Modal.tsx new file mode 100644 index 0000000..5a896be --- /dev/null +++ b/pcomparator/src/components/Modal/Modal.tsx @@ -0,0 +1,75 @@ +import { + ModalBody, + ModalContent, + ModalFooter, + ModalHeader, + Modal as ModalNextUi, + type ModalProps as ModalNextUiProps +} from "@nextui-org/react"; +import clsx from "clsx"; +import { BottomSheet } from "react-spring-bottom-sheet"; +import useDevice from "~/hooks/useDevice"; + +export interface ModalProps { + isOpen: boolean; + onClose: () => void; + body: React.ReactNode; + header?: React.ReactNode; + footer?: React.ReactNode; + onOpenChange?: (isOpen: boolean) => void; + sheetHeight?: "sm" | "md" | "lg" | "fit" | "full"; + modalProps?: Omit; + isForm?: boolean; +} + +export const Modal = ({ + isOpen, + onClose, + onOpenChange, + header, + body, + footer, + modalProps, + sheetHeight = "fit", + isForm +}: ModalProps) => { + const device = useDevice(); + + if (device === "mobile") { + return ( + { + switch (sheetHeight) { + case "sm": + return maxHeight / 4; + case "full": + return maxHeight; + case "lg": + return maxHeight / 1.5; + case "md": + return maxHeight / 2; + default: + return minHeight; + } + }} + > +
{body}
+ + ); + } + + return ( + + + {header} + {body} + {!isForm && {footer}} + + + ); +}; diff --git a/pcomparator/src/components/Stepper/Stepper.tsx b/pcomparator/src/components/Stepper/Stepper.tsx index 0037b4d..ce711c3 100644 --- a/pcomparator/src/components/Stepper/Stepper.tsx +++ b/pcomparator/src/components/Stepper/Stepper.tsx @@ -23,7 +23,7 @@ export const Stepper = ({ currentStep, steps, size = "md" }: StepperProps) => { const offset = circumference - (progress / 100) * circumference; return ( -
+
Step diff --git a/pcomparator/src/components/Tabbar/Tabbar.tsx b/pcomparator/src/components/Tabbar/Tabbar.tsx index 95750c4..a0f4623 100644 --- a/pcomparator/src/components/Tabbar/Tabbar.tsx +++ b/pcomparator/src/components/Tabbar/Tabbar.tsx @@ -1,7 +1,7 @@ "use client"; import { Button } from "@nextui-org/react"; -import { ChartColumnIncreasing, Dumbbell, User, Utensils } from "lucide-react"; +import { ChartColumnIncreasing, Euro, LayoutDashboard, User } from "lucide-react"; import type { ReactNode } from "react"; import Link from "~/components/Link/Link"; @@ -10,11 +10,25 @@ export interface TabbarProps { } export const Tabbar = ({ mainButton }: TabbarProps) => ( -
-