From 11b974458385b0b571fd8e34ac2b7675034eb21d Mon Sep 17 00:00:00 2001 From: plaume8 <126587385+plaume8@users.noreply.github.com> Date: Mon, 11 Nov 2024 19:39:38 +0100 Subject: [PATCH] Feature/f 36 implement information popup and tooltip (#23) * feat: added sandbox page, added component skeletons for tooltip and information-popup components, added props interfaces for both components as well * feat: setup sandbox * feat: setup NextUI components * feat: first working Tooltip wrapper component * feat: finished tooptip components * feat: setup information popup component and finished styling * feat: finalized information popup * feat: comments and cleanup * feat: minor fixes * feat: using h tags for title elements of tooltip and modal * feat: removed testing sandbox page --- .gitignore | 3 + package.json | 1 + .../InformationPopup/InformationPopup.tsx | 79 +++++++++++++++++++ src/components/PopupModal/PopupModal.tsx | 2 +- src/components/Tooltip/Tooltip.tsx | 46 +++++++++++ src/domain/props/InformationPopupProps.tsx | 10 +++ src/domain/props/TooltipProps.tsx | 8 ++ 7 files changed, 148 insertions(+), 1 deletion(-) create mode 100644 src/components/InformationPopup/InformationPopup.tsx create mode 100644 src/components/Tooltip/Tooltip.tsx create mode 100644 src/domain/props/InformationPopupProps.tsx create mode 100644 src/domain/props/TooltipProps.tsx diff --git a/.gitignore b/.gitignore index 2990e412..77935ae1 100644 --- a/.gitignore +++ b/.gitignore @@ -36,3 +36,6 @@ yarn-error.log* # typescript *.tsbuildinfo next-env.d.ts + +# JetBrains +*.idea \ No newline at end of file diff --git a/package.json b/package.json index 791fbaa7..d3b27ad4 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "@nextui-org/kbd": "2.0.34", "@nextui-org/link": "2.0.35", "@nextui-org/listbox": "^2.1.27", + "@nextui-org/modal": "^2.0.41", "@nextui-org/navbar": "2.0.37", "@nextui-org/popover": "^2.1.29", "@nextui-org/react": "^2.4.8", diff --git a/src/components/InformationPopup/InformationPopup.tsx b/src/components/InformationPopup/InformationPopup.tsx new file mode 100644 index 00000000..f650744a --- /dev/null +++ b/src/components/InformationPopup/InformationPopup.tsx @@ -0,0 +1,79 @@ +import { Modal, ModalBody, ModalContent, ModalHeader, useDisclosure } from '@nextui-org/modal'; +import React, { useEffect } from 'react'; + +import InformationPopupProps from '@/domain/props/InformationPopupProps'; + +/** + * The InformationPopup component renders a popup with text content only. When the popup is open, the screen is dimmed, + * and only the popup is shown. The text content is specified using `content`, which can include multiple sections + * with a `title` (optional) and multiple text 'paragraphs'. + * + * To trigger the opening of the popup, a boolean variable `popupOpen` must be passed to the InformationPopup, + * so it knows whether it should be open or closed. To allow the popup to close itself, the `closePopup` function needs + * to be passed that the InformationPopup can trigger, which will then set popupOpen to false. This should usually + * be implemented using React’s `useState`. + * @param popupOpen state if popup is open or closed + * @param closePopup function that can be called by the popup, which changes the popupOpen to `false` + * @param title title of the entire popup + * @param content popups text sections - each section contains an title (optional) and a list of paragraphs + * @param warning selected if the popup should be highlighted (optional) + * @constructor + */ +export function InformationPopup({ popupOpen, closePopup, title, content, warning }: InformationPopupProps) { + const SIZE = 'md'; + const PLACEMENT = 'auto'; // bigger screens: centered, mobile: bottom + const BACKDROP = 'opaque'; + const RADIUS = 'sm'; + const SCROLL_BEHAVIOUR = 'inside'; + + /** + * If the InformationPopup is opened by the parent component, popupOpen is set to `true` by the parent. + * When the InformationPopup is closed, the parent component should be notified so that popupOpen can set to false. + */ + const { isOpen, onOpen, onOpenChange } = useDisclosure(); + + useEffect(() => { + if (popupOpen) onOpen(); + }, [popupOpen]); + + useEffect(() => { + if (!isOpen) closePopup(); + }, [isOpen]); + + /** + * Setup content. + */ + + const borderStyle = warning ? 'border-4 border-warning' : ''; + + const textContent = content.map((c) => { + return ( + <> +

{c.subtitle}

+ {c.paragraphs.map((t, idx) => ( +

+ {t} +

+ ))} + + ); + }); + + return ( + + + {title} + {...textContent} + + + ); +} diff --git a/src/components/PopupModal/PopupModal.tsx b/src/components/PopupModal/PopupModal.tsx index 95104f96..f807a438 100644 --- a/src/components/PopupModal/PopupModal.tsx +++ b/src/components/PopupModal/PopupModal.tsx @@ -1,6 +1,6 @@ 'use client'; -import { Modal, ModalBody, ModalContent, ModalHeader } from '@nextui-org/react'; +import { Modal, ModalBody, ModalContent, ModalHeader } from '@nextui-org/modal'; import PopupModalProps from '@/domain/props/PopupModalProps'; diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx new file mode 100644 index 00000000..7cb86f58 --- /dev/null +++ b/src/components/Tooltip/Tooltip.tsx @@ -0,0 +1,46 @@ +import { Tooltip as NextUITooltip } from '@nextui-org/tooltip'; + +import TooltipProps from '@/domain/props/TooltipProps'; + +/** + * The Tooltip component renders a customizable tooltip. It is based on the NextUI Tooltip component. + * It should be used as a wrapper for one or more components. + * When hovering over these wrapped components, the tooltip appears with a delay. + * @param children the wrapped components + * @param title title of the tooltip (optional) + * @param text textual content of the tooltip + * @param warning selected if the tooltip should be highlighted (optional) + * @constructor + */ +export function Tooltip({ children, title, text, warning }: TooltipProps) { + const DELAY: number = 1000; + const OFFSET: number = 10; + const RADIUS = 'sm'; + const SHADOW = 'md'; + const COLOR = 'default'; + + const borderStyle = warning ? 'border-2 border-warning' : ''; + + const tooltipContent = title ? ( +
+

{title}

+

{text}

+
+ ) : ( +

{text}

+ ); + + return ( + + {Array.isArray(children) ? <> {...children} : children} + + ); +} diff --git a/src/domain/props/InformationPopupProps.tsx b/src/domain/props/InformationPopupProps.tsx new file mode 100644 index 00000000..95d1af90 --- /dev/null +++ b/src/domain/props/InformationPopupProps.tsx @@ -0,0 +1,10 @@ +export default interface InformationPopupProps { + popupOpen: boolean; + closePopup: () => void; + title: string; + content: { + subtitle?: string; + paragraphs: string[]; + }[]; + warning?: boolean; +} diff --git a/src/domain/props/TooltipProps.tsx b/src/domain/props/TooltipProps.tsx new file mode 100644 index 00000000..05cfbd2e --- /dev/null +++ b/src/domain/props/TooltipProps.tsx @@ -0,0 +1,8 @@ +import { ReactNode } from 'react'; + +export default interface TooltipProps { + children: ReactNode | ReactNode[]; + title?: string; + text: string; + warning?: boolean; +}