diff --git a/design-system/molecules/item-nav/adapters/default/default.adapter.tsx b/design-system/molecules/item-nav/adapters/default/default.adapter.tsx index 2a886bd3..ab2cf7be 100644 --- a/design-system/molecules/item-nav/adapters/default/default.adapter.tsx +++ b/design-system/molecules/item-nav/adapters/default/default.adapter.tsx @@ -6,42 +6,63 @@ import { ItemNavPort } from "@/design-system/molecules/item-nav/item-nav.types"; import { BaseLink } from "@/shared/components/base-link/base-link"; import { cn } from "@/shared/helpers/cn"; -export function ItemNavDefaultAdapter({ classNames, children, translate, ...props }: ItemNavPort) { - const { isDisabled, isFolded, icon, labelProps = {}, ...linkProps } = props; +function Content({ + classNames, + children, + translate, + icon, + labelProps = {}, + isExternal, + isDisabled, + isFolded, +}: ItemNavPort & { isExternal: boolean }) { const slots = ItemNavDefaultVariants({ isDisabled, }); - const showChildren = !!children || !!translate; + return ( +
+ +
+ + {children} + + {isExternal ? ( + + ) : null} +
+
+ ); +} + +export function ItemNavDefaultAdapter({ ...props }: ItemNavPort) { + const { isDisabled, classNames, onClick, ...linkProps } = props; + const slots = ItemNavDefaultVariants({ + isDisabled, + }); + + if (onClick) { + return ( + + ); + } return ( - {({ isExternal }) => ( -
- -
- {showChildren && ( - - {children} - - )} - {isExternal ? ( - - ) : null} -
-
- )} + {({ isExternal }) => }
); } diff --git a/design-system/molecules/item-nav/item-nav.types.ts b/design-system/molecules/item-nav/item-nav.types.ts index 2928df9f..0e4c379a 100644 --- a/design-system/molecules/item-nav/item-nav.types.ts +++ b/design-system/molecules/item-nav/item-nav.types.ts @@ -20,4 +20,5 @@ export interface ItemNavPort extends _BaseLinkProps, PropsWithChildren { translate?: TranslateProps; isDisabled?: boolean; isFolded?: boolean; + onClick?: () => void; } diff --git a/package-lock.json b/package-lock.json index e391c49e..7e41c5a8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "0.1.0", "dependencies": { "@auth0/auth0-react": "^2.2.4", + "@fillout/react": "^1.1.2", "@nextui-org/react": "^2.4.6", "@tanstack/react-query": "^5.51.21", "clsx": "^2.1.1", @@ -4247,6 +4248,12 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@fillout/react": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@fillout/react/-/react-1.1.2.tgz", + "integrity": "sha512-XyzLY74Zhxxwym3A9770Tb3NINwaaWyWwvaw1lMJ5sA/P6hgsdzvefUOqohzR3+KVyspvBOR4BoR0nBMPFd/Vw==", + "license": "MIT" + }, "node_modules/@formatjs/ecma402-abstract": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-2.0.0.tgz", diff --git a/package.json b/package.json index 4d96879b..f95de446 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ }, "dependencies": { "@auth0/auth0-react": "^2.2.4", + "@fillout/react": "^1.1.2", "@nextui-org/react": "^2.4.6", "@tanstack/react-query": "^5.51.21", "clsx": "^2.1.1", diff --git a/shared/features/feedback-drawer/feedback-drawer.hooks.ts b/shared/features/feedback-drawer/feedback-drawer.hooks.ts new file mode 100644 index 00000000..748ce50e --- /dev/null +++ b/shared/features/feedback-drawer/feedback-drawer.hooks.ts @@ -0,0 +1,5 @@ +import { useState } from "react"; + +export function useFeedbackDrawerState() { + return useState(false); +} diff --git a/shared/features/feedback-drawer/feedback-drawer.tsx b/shared/features/feedback-drawer/feedback-drawer.tsx new file mode 100644 index 00000000..0cfa8e1c --- /dev/null +++ b/shared/features/feedback-drawer/feedback-drawer.tsx @@ -0,0 +1,36 @@ +import { FilloutStandardEmbed } from "@fillout/react"; + +import { Drawer } from "@/design-system/molecules/drawer"; + +import { useFeedbackDrawerState } from "@/shared/features/feedback-drawer/feedback-drawer.hooks"; +import { useAuthUser } from "@/shared/hooks/auth/use-auth-user"; + +export function FeedbackDrawer({ state }: { state: ReturnType }) { + const [isOpen, setIsOpen] = state; + + const { user } = useAuthUser(); + + return ( + + + + ); +} diff --git a/shared/features/navigation/menu/primary-menu/primary-menu.tsx b/shared/features/navigation/menu/primary-menu/primary-menu.tsx index 12a152d2..b856eb88 100644 --- a/shared/features/navigation/menu/primary-menu/primary-menu.tsx +++ b/shared/features/navigation/menu/primary-menu/primary-menu.tsx @@ -1,7 +1,7 @@ -import { PrimaryMenuProps } from "shared/features/navigation/menu/primary-menu/primary-menu.types"; - import { ItemNav } from "@/design-system/molecules/item-nav"; +import { PrimaryMenuProps } from "./primary-menu.types"; + export function PrimaryMenu({ isFolded }: PrimaryMenuProps) { return ( <> diff --git a/shared/features/navigation/menu/secondary-menu/secondary-menu.tsx b/shared/features/navigation/menu/secondary-menu/secondary-menu.tsx index a776abf0..daf53c68 100644 --- a/shared/features/navigation/menu/secondary-menu/secondary-menu.tsx +++ b/shared/features/navigation/menu/secondary-menu/secondary-menu.tsx @@ -1,23 +1,30 @@ -import { SecondaryMenuProps } from "shared/features/navigation/menu/secondary-menu/secondary-menu.types"; - import { ItemNav } from "@/design-system/molecules/item-nav"; +import { FeedbackDrawer } from "@/shared/features/feedback-drawer/feedback-drawer"; +import { useFeedbackDrawerState } from "@/shared/features/feedback-drawer/feedback-drawer.hooks"; + +import { SecondaryMenuProps } from "./secondary-menu.types"; + export function SecondaryMenu({ isFolded }: SecondaryMenuProps) { + const feedbackDrawerState = useFeedbackDrawerState(); + const [, setIsOpen] = feedbackDrawerState; return ( <> setIsOpen(true)} /> + ); } diff --git a/shared/features/navigation/menu/user-menu/user-menu.tsx b/shared/features/navigation/menu/user-menu/user-menu.tsx index a23df563..51fe9644 100644 --- a/shared/features/navigation/menu/user-menu/user-menu.tsx +++ b/shared/features/navigation/menu/user-menu/user-menu.tsx @@ -1,5 +1,3 @@ -import { UserMenuProps } from "shared/features/navigation/menu/user-menu/user-menu.types"; - import { useClientBootstrapContext } from "@/core/bootstrap/client-bootstrap-context"; import { Avatar } from "@/design-system/atoms/avatar"; @@ -10,6 +8,8 @@ import { Typo } from "@/design-system/atoms/typo"; import { cn } from "@/shared/helpers/cn"; import { useAuthUser } from "@/shared/hooks/auth/use-auth-user"; +import { UserMenuProps } from "./user-menu.types"; + export function UserMenu({ isFolded }: UserMenuProps) { const { user, isLoading } = useAuthUser(); const login = user?.login;