@stackshift-ui/accordion 1.0.0-beta.1

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@stackshift-ui/accordion",
+  "description": "A vertically stacked set of interactive headings that each reveal a section of content.",
+  "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/react": "^16.0.1",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@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-accordion": "^1.2.11",
+    "classnames": "^2.5.1",
+    "lucide-react": "^0.468.0",
+    "@stackshift-ui/scripts": "6.1.0-beta.0",
+    "@stackshift-ui/system": "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/accordion.test.tsx

@@ -0,0 +1,80 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, test } from "vitest";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./accordion";
+
+describe("accordion", () => {
+  test("Common: Accordion - test if renders without errors", async () => {
+    const clx = "accordion-class";
+
+    const { unmount } = render(
+      <Accordion data-testid="accordion" type="single" className={clx} collapsible>
+        <AccordionItem value="item-1">
+          <AccordionTrigger data-testid="accordion-trigger">First item</AccordionTrigger>
+          <AccordionContent>This is the first accordion item content.</AccordionContent>
+        </AccordionItem>
+      </Accordion>,
+    );
+
+    const accordion = screen.getByTestId("accordion");
+
+    expect(accordion.classList).toContain(clx);
+
+    const firstItem = accordion.querySelector("[data-slot=accordion-item]");
+    expect(firstItem).toBeDefined();
+
+    const trigger = screen.getByTestId("accordion-trigger");
+    expect(trigger).toBeDefined();
+
+    expect(screen.queryByText("This is the first accordion item content.")).toBeNull();
+
+    const user = userEvent.setup();
+    await user.click(trigger);
+
+    expect(await screen.findByText("This is the first accordion item content.")).toBeDefined();
+    unmount();
+  });
+
+  test("Common: Accordion - test if renders with multiple items", async () => {
+    const clx = "accordion-class";
+
+    const { unmount } = render(
+      <Accordion data-testid="accordion-multiple" type="multiple" className={clx}>
+        <AccordionItem value="item-1">
+          <AccordionTrigger data-testid="accordion-trigger">First item</AccordionTrigger>
+          <AccordionContent>This is the first accordion item content.</AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="item-2">
+          <AccordionTrigger data-testid="accordion-trigger">Second item</AccordionTrigger>
+          <AccordionContent>This is the second accordion item content.</AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="item-3">
+          <AccordionTrigger data-testid="accordion-trigger">Third item</AccordionTrigger>
+          <AccordionContent>This is the third accordion item content.</AccordionContent>
+        </AccordionItem>
+      </Accordion>,
+    );
+
+    const accordion = screen.getByTestId("accordion-multiple");
+    expect(accordion.classList).toContain(clx);
+
+    const items = accordion.querySelectorAll("[data-slot=accordion-item]");
+    expect(items.length).toBe(3);
+
+    const triggers = screen.getAllByTestId("accordion-trigger");
+    expect(triggers.length).toBe(3);
+
+    const user = userEvent.setup();
+
+    await user.click(triggers[0]);
+    expect(
+      await screen.findByText("This is the first accordion item content."),
+    ).toBeInTheDocument();
+
+    await user.click(triggers[1]);
+    expect(
+      await screen.findByText("This is the second accordion item content."),
+    ).toBeInTheDocument();
+    unmount();
+  });
+});

package/src/accordion.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDownIcon } from "lucide-react";
+import * as React from "react";
+
+import { cn, DefaultComponent, useStackShiftUIComponents } from "@stackshift-ui/system";
+
+const displayNameAccordion = "Accordion";
+const displayNameAccordionItem = "AccordionItem";
+const displayNameAccordionHeader = "AccordionHeader";
+const displayNameAccordionTrigger = "AccordionTrigger";
+const displayNameAccordionContent = "AccordionContent";
+
+function Accordion({ ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  const { [displayNameAccordion]: Component = DefaultComponent } = useStackShiftUIComponents();
+  return <Component as={AccordionPrimitive.Root} data-slot="accordion" {...props} />;
+}
+Accordion.displayName = displayNameAccordion;
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  const { [displayNameAccordionItem]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  return (
+    <Component
+      as={AccordionPrimitive.Item}
+      data-slot="accordion-item"
+      className={cn("border-b last:border-b-0", className)}
+      {...props}
+    />
+  );
+}
+AccordionItem.displayName = displayNameAccordionItem;
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  const { [displayNameAccordionHeader]: HeaderComponent = DefaultComponent } =
+    useStackShiftUIComponents();
+
+  const { [displayNameAccordionTrigger]: Component = DefaultComponent } =
+    useStackShiftUIComponents();
+
+  return (
+    <HeaderComponent as={AccordionPrimitive.Header} className="flex">
+      <Component
+        as={AccordionPrimitive.Trigger}
+        data-slot="accordion-trigger"
+        className={cn(
+          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          className,
+        )}
+        {...props}>
+        {children}
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+      </Component>
+    </HeaderComponent>
+  );
+}
+AccordionTrigger.displayName = displayNameAccordionTrigger;
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  const { [displayNameAccordionContent]: Component = DefaultComponent } =
+    useStackShiftUIComponents();
+
+  return (
+    <Component
+      as={AccordionPrimitive.Content}
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      {...props}>
+      <div className={cn("pt-0 pb-4", className)}>{children}</div>
+    </Component>
+  );
+}
+AccordionContent.displayName = displayNameAccordionContent;
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/src/index.ts

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

package/src/setupTests.ts

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