From be9718a3ca68b396499630efc83653bcd8b63e2b Mon Sep 17 00:00:00 2001
From: ht-lovrozagar <157136236+ht-lovrozagar@users.noreply.github.com>
Date: Wed, 21 Aug 2024 14:01:15 +0200
Subject: [PATCH] feat: add hover card

---
 app.tsx                                       |  2 +-
 lefthook.yml                                  |  2 +-
 package.json                                  |  5 +--
 .../components/hover-card-content.tsx         |  6 ++--
 .../components/hover-card-trigger.tsx         | 15 +++++++--
 .../hover-card/components/hover-card.tsx      | 31 ++++++++++++++++---
 .../hover-card/constants/constants.ts         |  4 +++
 .../hover-card/contexts/hover-card-context.ts | 12 +++++++
 .../hover-card/types/hover-card-context.ts    |  6 ++++
 src/components/hover-card/types/hover-card.ts |  8 ++++-
 10 files changed, 77 insertions(+), 14 deletions(-)
 create mode 100644 src/components/hover-card/constants/constants.ts
 create mode 100644 src/components/hover-card/contexts/hover-card-context.ts
 create mode 100644 src/components/hover-card/types/hover-card-context.ts

diff --git a/app.tsx b/app.tsx
index 9f5d56e..1e35d13 100644
--- a/app.tsx
+++ b/app.tsx
@@ -56,7 +56,7 @@ const App = () => {
 				<PopoverTrigger>Trigger</PopoverTrigger>
 				<PopoverContent>Content</PopoverContent>
 			</Popover>
-			<HoverCard>
+			<HoverCard shouldTriggerToggleOpen>
 				<HoverCardTrigger>Trigger</HoverCardTrigger>
 				<HoverCardContent>
 					<div className='max-w-[100px]'>
diff --git a/lefthook.yml b/lefthook.yml
index 120de71..7debf8c 100644
--- a/lefthook.yml
+++ b/lefthook.yml
@@ -14,7 +14,7 @@ pre-commit:
       glob: "*.{json,js,ts,tsx}"
       run: yarn tsc --noEmit -p ./tsconfig.json
     3_build:
-      run: yarn next build
+      run: yarn build
 
 pre-push:
   commands:
diff --git a/package.json b/package.json
index 23f277d..29df55e 100644
--- a/package.json
+++ b/package.json
@@ -2,6 +2,7 @@
 	"name": "@renderui/core",
 	"version": "1.5.8",
 	"private": false,
+	"sideEffects": false,
 	"description": "React UI library with highly modular and ready-out-of-the-box components",
 	"license": "MIT",
 	"author": "Lovro Žagar",
@@ -27,7 +28,7 @@
 		"type:coverage": "typescript-coverage-report",
 		"lint": "npx @biomejs/biome lint ./src",
 		"lint:check": "npx @biomejs/biome check ./src",
-		"lint:format": "npx @biomejs/biome format ./src",
+		"lint:format": "npx @biomejs/biome format --write ./src",
 		"lint:fix": "npx @biomejs/biome lint --write ./src"
 	},
 	"dependencies": {
@@ -67,11 +68,11 @@
 		"postcss": "^8.4.35",
 		"react": "19.0.0-rc-a960b92c-20240819",
 		"react-dom": "19.0.0-rc-a960b92c-20240819",
-		"tailwindcss": "^3.4.1",
 		"types-react": "^19.0.0-rc.1",
 		"types-react-dom": "^19.0.0-rc.1",
 		"typescript": "^5.5.4",
 		"typescript-coverage-report": "^1.0.0",
+		"tailwindcss": "^3.4.1",
 		"vite": "^5.1.4"
 	},
 	"peerDependencies": {
diff --git a/src/components/hover-card/components/hover-card-content.tsx b/src/components/hover-card/components/hover-card-content.tsx
index ae1d0ad..57ee38f 100644
--- a/src/components/hover-card/components/hover-card-content.tsx
+++ b/src/components/hover-card/components/hover-card-content.tsx
@@ -1,3 +1,4 @@
+import { DEFAULT_HOVER_CARD_CONTENT_CLASSNAME } from '@/components/hover-card/constants/constants'
 import type { HoverCardContentProps } from '@/components/hover-card/types/hover-card-content'
 import {
 	HoverCardArrow as HoverCardArrowPrimitive,
@@ -12,6 +13,7 @@ const HoverCardContent = (props: HoverCardContentProps) => {
 		sideOffset = 4,
 		side = 'bottom',
 		children,
+		className,
 		style,
 		animationDuration,
 		animationInDuration,
@@ -27,9 +29,7 @@ const HoverCardContent = (props: HoverCardContentProps) => {
 			align={align}
 			sideOffset={sideOffset}
 			side={side}
-			className={cn(
-				'render-ui-popover-content data-[state=closed]:data-[side=bottom]:animate-popover-exit-from-top-and-fade-out data-[state=closed]:data-[side=top]:animate-popover-exit-from-bottom-and-fade-out data-[state=closed]:data-[side=right]:animate-popover-exit-from-left-and-fade-out data-[state=closed]:data-[side=left]:animate-popover-exit-from-right-and-fade-out data-[state=open]:data-[side=bottom]:animate-popover-enter-to-top-and-fade-in data-[state=open]:data-[side=left]:animate-popover-enter-to-right-and-fade-in data-[state=open]:data-[side=right]:animate-popover-enter-to-left-and-fade-in data-[state=open]:data-[side=top]:animate-popover-enter-to-bottom-and-fade-in z-50 box-border w-fit rounded-md border bg-background border-mode-accent text-mode-contrast p-4 shadow-md outline-none will-change-[transform,opacity] data-[side=bottom]:origin-top data-[side=left]:origin-right data-[side=right]:origin-left data-[side=top]:origin-bottom',
-			)}
+			className={cn(DEFAULT_HOVER_CARD_CONTENT_CLASSNAME, className)}
 			style={{
 				...getAnimationStyleVariables({
 					animationDuration,
diff --git a/src/components/hover-card/components/hover-card-trigger.tsx b/src/components/hover-card/components/hover-card-trigger.tsx
index 1b1f3fb..7f4af82 100644
--- a/src/components/hover-card/components/hover-card-trigger.tsx
+++ b/src/components/hover-card/components/hover-card-trigger.tsx
@@ -1,14 +1,25 @@
 import { Button } from '@/components/button'
+import { useHoverCardContext } from '@/components/hover-card/contexts/hover-card-context'
 import type { HoverCardTriggerProps } from '@/components/hover-card/types/hover-card-trigger'
 import { HoverCardTrigger as HoverCardTriggerPrimitive } from '@radix-ui/react-hover-card'
+import { chain } from '@renderui/utils'
 import React from 'react'
 
 const HoverCardTrigger = (props: HoverCardTriggerProps) => {
-	const { variant = 'plain', ...restProps } = props
+	const { variant = 'plain', onPress, ...restProps } = props
+
+	const { shouldTriggerToggleOpen, setOpen } = useHoverCardContext()
 
 	return (
 		<HoverCardTriggerPrimitive asChild>
-			<Button variant={variant} {...restProps} />
+			<Button
+				variant={variant}
+				{...restProps}
+				onPress={chain(
+					shouldTriggerToggleOpen ? () => setOpen((prev) => !prev) : undefined,
+					onPress,
+				)}
+			/>
 		</HoverCardTriggerPrimitive>
 	)
 }
diff --git a/src/components/hover-card/components/hover-card.tsx b/src/components/hover-card/components/hover-card.tsx
index 693cd49..d6308c3 100644
--- a/src/components/hover-card/components/hover-card.tsx
+++ b/src/components/hover-card/components/hover-card.tsx
@@ -1,13 +1,36 @@
+import { useControllableState } from '@/components/_shared/hooks/use-controllable-state'
+import { HoverCardProvider } from '@/components/hover-card/contexts/hover-card-context'
 import type { HoverCardProps } from '@/components/hover-card/types/hover-card'
 import { HoverCard as HoverCardPrimitive } from '@radix-ui/react-hover-card'
 import React from 'react'
 
-// @TODO add controllable state and and manipulation for open close on trigger
-
 const HoverCard = (props: HoverCardProps) => {
-	const { openDelay = 300, closeDelay = 300, ...restProps } = props
+	const {
+		defaultOpen,
+		open: openProp,
+		onOpenChange,
+		children,
+		shouldTriggerToggleOpen = false,
+		openDelay = 0,
+		closeDelay = 300,
+	} = props
+
+	const [open, setOpen] = useControllableState({
+		defaultProp: defaultOpen,
+		prop: openProp,
+		onChange: onOpenChange,
+	})
 
-	return <HoverCardPrimitive openDelay={openDelay} closeDelay={closeDelay} {...restProps} />
+	return (
+		<HoverCardPrimitive
+			open={open}
+			onOpenChange={setOpen}
+			openDelay={openDelay}
+			closeDelay={closeDelay}
+		>
+			<HoverCardProvider value={{ shouldTriggerToggleOpen, setOpen }}>{children}</HoverCardProvider>
+		</HoverCardPrimitive>
+	)
 }
 
 export { HoverCard }
diff --git a/src/components/hover-card/constants/constants.ts b/src/components/hover-card/constants/constants.ts
new file mode 100644
index 0000000..eeaf84d
--- /dev/null
+++ b/src/components/hover-card/constants/constants.ts
@@ -0,0 +1,4 @@
+const DEFAULT_HOVER_CARD_CONTENT_CLASSNAME =
+	'render-ui-hover-card-content data-[state=closed]:data-[side=bottom]:animate-popover-exit-from-top-and-fade-out data-[state=closed]:data-[side=top]:animate-popover-exit-from-bottom-and-fade-out data-[state=closed]:data-[side=right]:animate-popover-exit-from-left-and-fade-out data-[state=closed]:data-[side=left]:animate-popover-exit-from-right-and-fade-out data-[state=open]:data-[side=bottom]:animate-popover-enter-to-top-and-fade-in data-[state=open]:data-[side=left]:animate-popover-enter-to-right-and-fade-in data-[state=open]:data-[side=right]:animate-popover-enter-to-left-and-fade-in data-[state=open]:data-[side=top]:animate-popover-enter-to-bottom-and-fade-in z-50 box-border w-fit rounded-md border bg-background border-mode-accent text-mode-contrast p-4 shadow-md outline-none will-change-[transform,opacity] data-[side=bottom]:origin-top data-[side=left]:origin-right data-[side=right]:origin-left data-[side=top]:origin-bottom'
+
+export { DEFAULT_HOVER_CARD_CONTENT_CLASSNAME }
diff --git a/src/components/hover-card/contexts/hover-card-context.ts b/src/components/hover-card/contexts/hover-card-context.ts
new file mode 100644
index 0000000..8c74f8e
--- /dev/null
+++ b/src/components/hover-card/contexts/hover-card-context.ts
@@ -0,0 +1,12 @@
+import { initializeContext } from '@renderui/utils'
+
+import type { HoverCardContext } from '@/components/hover-card/types/hover-card-context'
+
+const [HoverCardProvider, useHoverCardContext] = initializeContext<HoverCardContext>({
+	errorMessage: 'Components using hoverCard context must be wrapped in a <HoverCard />.',
+	providerName: 'HoverCardProvider',
+	hookName: 'useHoverCardContext',
+	name: 'HoverCardContext',
+})
+
+export { HoverCardProvider, useHoverCardContext }
diff --git a/src/components/hover-card/types/hover-card-context.ts b/src/components/hover-card/types/hover-card-context.ts
new file mode 100644
index 0000000..60210a8
--- /dev/null
+++ b/src/components/hover-card/types/hover-card-context.ts
@@ -0,0 +1,6 @@
+type HoverCardContext = {
+	shouldTriggerToggleOpen: boolean
+	setOpen: React.Dispatch<React.SetStateAction<boolean>>
+}
+
+export type { HoverCardContext }
diff --git a/src/components/hover-card/types/hover-card.ts b/src/components/hover-card/types/hover-card.ts
index 686c053..aed28b9 100644
--- a/src/components/hover-card/types/hover-card.ts
+++ b/src/components/hover-card/types/hover-card.ts
@@ -1 +1,7 @@
-export type { HoverCardProps } from '@radix-ui/react-hover-card'
+import type { Simplify } from '@/components/_shared/types/simplify'
+
+import type { HoverCardProps as HoverCardPrimitiveProps } from '@radix-ui/react-hover-card'
+
+type HoverCardProps = Simplify<HoverCardPrimitiveProps & { shouldTriggerToggleOpen?: boolean }>
+
+export type { HoverCardProps }