feat: add popover component (#99)

Author: Cahllagerfeld

.changeset/curly-yaks-return.md

@@ -0,0 +1,5 @@
+---
+"@zenml-io/react-component-library": minor
+---
+
+add popover component

package.json

@@ -60,6 +60,7 @@
 		"@radix-ui/react-dialog": "^1.0.5",
 		"@radix-ui/react-dropdown-menu": "^2.0.6",
 		"@radix-ui/react-hover-card": "^1.1.1",
+		"@radix-ui/react-popover": "^1.1.6",
 		"@radix-ui/react-progress": "^1.0.3",
 		"@radix-ui/react-radio-group": "^1.2.0",
 		"@radix-ui/react-scroll-area": "^1.1.0",

pnpm-lock.yaml

@@ -0,0 +1,34 @@
+import { Meta } from "@storybook/react";
+import React from "react";
+import { Popover, PopoverContent, PopoverTrigger } from "./index";
+import { Button } from "../Button";
+import { StoryObj } from "@storybook/react";
+
+const meta = {
+	title: "Elements/Popover",
+	component: Popover,
+	argTypes: {},
+	parameters: {
+		layout: "centered"
+	},
+
+	tags: ["autodocs"]
+} satisfies Meta<typeof Popover>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const DefaultVariant: Story = {
+	name: "Default",
+	render: () => (
+		<Popover>
+			<PopoverTrigger asChild>
+				<Button>Open Popover</Button>
+			</PopoverTrigger>
+			<PopoverContent className="w-[250px]">
+				<div>Popover Content</div>
+			</PopoverContent>
+		</Popover>
+	)
+};

src/components/Popover/Popover.stories.tsx

@@ -0,0 +1,28 @@
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import * as React from "react";
+import { cn } from "../../utilities";
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverContent = React.forwardRef<
+	React.ElementRef<typeof PopoverPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+	<PopoverPrimitive.Portal>
+		<PopoverPrimitive.Content
+			ref={ref}
+			align={align}
+			sideOffset={sideOffset}
+			className={cn(
+				"z-50 rounded-md border border-theme-border-minimal bg-theme-surface-primary p-2 shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+				className
+			)}
+			{...props}
+		/>
+	</PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverContent, PopoverTrigger };

src/components/Popover/Popover.tsx

@@ -0,0 +1 @@
+export * from "./Popover";

src/components/Popover/index.tsx

@@ -18,3 +18,4 @@ export * from "./ScrollArea";
 export * from "./HoverCard";
 export * from "./RadioGroup";
 export * from "./Command";
+export * from "./Popover";