@stackshift-ui/popover 1.0.0-beta.1

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@stackshift-ui/popover",
+  "description": "Displays rich content in a portal, triggered by a button.",
+  "version": "1.0.0-beta.1",
+  "private": false,
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist/**",
+    "src"
+  ],
+  "author": "WebriQ <info@webriq.com>",
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^22.7.0",
+    "@types/react": "^18.3.9",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "@vitest/coverage-v8": "^2.1.1",
+    "esbuild-plugin-rdi": "^0.0.0",
+    "esbuild-plugin-react18": "^0.2.5",
+    "esbuild-plugin-react18-css": "^0.0.4",
+    "jsdom": "^25.0.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tsup": "^8.3.0",
+    "typescript": "^5.6.2",
+    "vite-tsconfig-paths": "^5.0.1",
+    "vitest": "^2.1.1",
+    "@stackshift-ui/eslint-config": "6.0.10",
+    "@stackshift-ui/typescript-config": "6.0.10"
+  },
+  "dependencies": {
+    "@radix-ui/react-popover": "^1.1.14",
+    "add": "^2.0.6",
+    "classnames": "^2.5.1",
+    "pnpm": "^10.12.4",
+    "@stackshift-ui/system": "6.1.0-beta.0",
+    "@stackshift-ui/scripts": "6.1.0-beta.0"
+  },
+  "peerDependencies": {
+    "@stackshift-ui/system": ">=6.1.0-beta.0",
+    "@types/react": "16.8 - 19",
+    "next": "10 - 14",
+    "react": "16.8 - 19",
+    "react-dom": "16.8 - 19"
+  },
+  "peerDependenciesMeta": {
+    "next": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "build": "tsup && tsc -p tsconfig-build.json",
+    "clean": "rm -rf dist",
+    "dev": "tsup --watch && tsc -p tsconfig-build.json -w",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src/",
+    "test": "vitest run --coverage"
+  }
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+"use client";
+
+// component exports
+export * from "./popover";

package/src/popover.test.tsx

@@ -0,0 +1,33 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, test } from "vitest";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+
+describe.concurrent("popover", () => {
+  afterEach(cleanup);
+
+  test("Dummy test - test if renders without errors", async ({ expect }) => {
+    const clx = "my-class";
+    const user = userEvent.setup();
+
+    const { unmount } = render(
+      <Popover data-testid="popover">
+        <PopoverTrigger asChild data-testid="popover-trigger">
+          <button>Open Popover</button>
+        </PopoverTrigger>
+        <PopoverContent data-testid="popover-content" className={clx}>
+          <p>This is a popover</p>
+        </PopoverContent>
+      </Popover>,
+    );
+
+    const trigger = screen.getByTestId("popover-trigger");
+    expect(trigger).toBeInTheDocument();
+
+    user.click(trigger);
+
+    const popover = await screen.findByTestId("popover-content");
+    expect(popover).toBeInTheDocument();
+    unmount();
+  });
+});

package/src/popover.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import * as React from "react";
+
+import { cn, DefaultComponent, useStackShiftUIComponents } from "@stackshift-ui/system";
+
+const displayName = "Popover";
+const displayNameTrigger = "PopoverTrigger";
+const displayNameContent = "PopoverContent";
+const displayNameAnchor = "PopoverAnchor";
+
+function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  const { [displayName]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  return <Component as={PopoverPrimitive.Root} data-slot="popover" {...props} />;
+}
+Popover.displayName = displayName;
+
+function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  const { [displayNameTrigger]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  return <Component as={PopoverPrimitive.Trigger} data-slot="popover-trigger" {...props} />;
+}
+PopoverTrigger.displayName = displayNameTrigger;
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  const { [displayNameContent]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  return (
+    <PopoverPrimitive.Portal>
+      <Component
+        as={PopoverPrimitive.Content}
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground 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 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          className,
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  );
+}
+PopoverContent.displayName = displayNameContent;
+
+function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  const { [displayNameAnchor]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  return <Component as={PopoverPrimitive.Anchor} data-slot="popover-anchor" {...props} />;
+}
+
+export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };

package/src/setupTests.ts

@@ -0,0 +1,4 @@
+import '@testing-library/jest-dom';
+
+export { };
+