@stackshift-ui/card 6.0.11-beta.2 → 7.0.0-beta.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stackshift-ui/card",
   "description": "",
-  "version": "6.0.11-beta.2",
+  "version": "7.0.0-beta.0",
   "private": false,
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -13,6 +13,7 @@
   ],
   "author": "WebriQ <info@webriq.com>",
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
     "@types/node": "^22.7.0",
     "@types/react": "^18.3.9",
@@ -29,20 +30,20 @@
     "typescript": "^5.6.2",
     "vite-tsconfig-paths": "^5.0.1",
     "vitest": "^2.1.1",
-    "@stackshift-ui/eslint-config": "6.0.10-beta.2",
-    "@stackshift-ui/typescript-config": "6.0.10-beta.2"
+    "@stackshift-ui/eslint-config": "6.0.10",
+    "@stackshift-ui/typescript-config": "6.0.10"
   },
   "dependencies": {
     "classnames": "^2.5.1",
-    "@stackshift-ui/scripts": "6.0.10-beta.2",
-    "@stackshift-ui/system": "6.0.11-beta.2"
+    "@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",
-    "@stackshift-ui/system": ">=6.0.11-beta.2"
+    "react-dom": "16.8 - 19"
   },
   "peerDependenciesMeta": {
     "next": {

package/src/card.test.tsx

@@ -1,13 +1,328 @@
 import { cleanup, render, screen } from "@testing-library/react";
 import { afterEach, describe, test } from "vitest";
-import { Card } from "./card";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./card";
 
-describe.concurrent("card", () => {
+describe.concurrent("Card Components", () => {
   afterEach(cleanup);
 
-  test("Common: Card - test if renders without errors", ({ expect }) => {
-    const clx = "my-class";
-    render(<Card className={clx} />);
-    expect(screen.getByTestId("div").classList).toContain(clx);
+  describe("Card", () => {
+    afterEach(cleanup);
+
+    test("Common: Card - test if renders without errors", ({ expect }) => {
+      const { unmount } = render(<Card data-testid="card-1" />);
+      expect(screen.getByTestId("card-1")).toBeInTheDocument();
+      unmount();
+    });
+
+    test("Common: Card - test if renders with custom className", ({ expect }) => {
+      const customClass = "my-custom-class";
+      const { unmount } = render(
+        <Card data-testid="card-with-custom-class" className={customClass} />,
+      );
+      expect(screen.getByTestId("card-with-custom-class")).toHaveClass(customClass);
+      unmount();
+    });
+
+    test("applies default classes", ({ expect }) => {
+      const { unmount } = render(<Card data-testid="card-with-default-classes" />);
+      const card = screen.getByTestId("card-with-default-classes");
+      expect(card).toHaveClass(
+        "rounded-lg",
+        "border",
+        "bg-card",
+        "text-card-foreground",
+        "shadow-sm",
+      );
+      unmount();
+    });
+
+    test("Common: Card - test if renders with custom id and role", ({ expect }) => {
+      const { unmount } = render(
+        <Card data-testid="card-with-id-and-role" id="test-id" role="region" />,
+      );
+      const card = screen.getByTestId("card-with-id-and-role");
+      expect(card).toHaveAttribute("id", "test-id");
+      expect(card).toHaveAttribute("role", "region");
+      unmount();
+    });
+
+    test("Common: Card - test if renders with custom content", ({ expect }) => {
+      const { unmount } = render(
+        <Card data-testid="card-with-content">
+          <span>Card With custom content</span>
+        </Card>,
+      );
+      expect(screen.getByText("Card With custom content")).toBeInTheDocument();
+      unmount();
+    });
+  });
+
+  describe("CardHeader", () => {
+    afterEach(cleanup);
+
+    test("Common: CardHeader - test if renders without errors", ({ expect }) => {
+      const { unmount } = render(<CardHeader data-testid="card-header" />);
+      expect(screen.getByTestId("card-header")).toBeInTheDocument();
+      unmount();
+    });
+
+    test("Common: CardHeader - test default classes", ({ expect }) => {
+      const { unmount } = render(<CardHeader data-testid="card-header-with-default-classes" />);
+      const header = screen.getByTestId("card-header-with-default-classes");
+      expect(header).toHaveClass("flex", "flex-col", "space-y-1.5", "p-6");
+      unmount();
+    });
+
+    test("Common: CardHeader - test if renders with custom className", ({ expect }) => {
+      const customClass = "custom-header-class";
+      const { unmount } = render(
+        <CardHeader data-testid="card-header-with-custom-class" className={customClass} />,
+      );
+      expect(screen.getByTestId("card-header-with-custom-class")).toHaveClass(customClass);
+      unmount();
+    });
+  });
+
+  describe("CardTitle", () => {
+    afterEach(cleanup);
+
+    test("Common: CardTitle - test if renders without errors", ({ expect }) => {
+      const { unmount } = render(<CardTitle data-testid="card-title" />);
+      expect(screen.getByTestId("card-title")).toBeInTheDocument();
+      unmount();
+    });
+
+    test("Common: CardTitle - test default classes", ({ expect }) => {
+      const { unmount } = render(<CardTitle data-testid="card-title-with-default-classes" />);
+      const title = screen.getByTestId("card-title-with-default-classes");
+      expect(title).toHaveClass("text-2xl", "font-semibold", "leading-none", "tracking-tight");
+      unmount();
+    });
+
+    test("Common: CardTitle - test if renders with custom className", ({ expect }) => {
+      const customClass = "custom-title-class";
+      const { unmount } = render(
+        <CardTitle data-testid="card-title-with-custom-class" className={customClass} />,
+      );
+      expect(screen.getByTestId("card-title-with-custom-class")).toHaveClass(customClass);
+      unmount();
+    });
+
+    test("Common: CardTitle - test if renders with custom content", ({ expect }) => {
+      const { unmount } = render(
+        <CardTitle data-testid="card-title-with-content">Card Title With Content</CardTitle>,
+      );
+      expect(screen.getByText("Card Title With Content")).toBeInTheDocument();
+      unmount();
+    });
+  });
+
+  describe("CardDescription", () => {
+    afterEach(cleanup);
+
+    test("Common: CardDescription - test if renders without errors", ({ expect }) => {
+      const { unmount } = render(<CardDescription data-testid="card-description" />);
+      expect(screen.getByTestId("card-description")).toBeInTheDocument();
+      unmount();
+    });
+
+    test("Common: CardDescription - test default classes", ({ expect }) => {
+      const { unmount } = render(
+        <CardDescription data-testid="card-description-with-default-classes" />,
+      );
+      const description = screen.getByTestId("card-description-with-default-classes");
+      expect(description.getAttribute("class")).toContain("text-sm text-muted-foreground");
+      unmount();
+    });
+
+    test("Common: CardDescription - test if renders with custom className", ({ expect }) => {
+      const customClass = "custom-description-class";
+      const { unmount } = render(
+        <CardDescription
+          data-testid="card-description-with-custom-class"
+          className={customClass}
+        />,
+      );
+      expect(
+        screen.getByTestId("card-description-with-custom-class").getAttribute("class"),
+      ).toContain(customClass);
+      unmount();
+    });
+
+    test("Common: CardDescription - test if renders with custom content", ({ expect }) => {
+      const { unmount } = render(
+        <CardDescription data-testid="card-description">Test Description</CardDescription>,
+      );
+      expect(screen.getByText("Test Description")).toBeInTheDocument();
+      unmount();
+    });
+  });
+
+  describe("CardContent", () => {
+    afterEach(cleanup);
+
+    test("Common: CardContent - test if renders without errors", ({ expect }) => {
+      const { unmount } = render(<CardContent data-testid="card-content" />);
+      expect(screen.getByTestId("card-content")).toBeInTheDocument();
+      unmount();
+    });
+
+    test("Common: CardContent - test default classes", ({ expect }) => {
+      const { unmount } = render(<CardContent data-testid="card-content-with-default-classes" />);
+      const content = screen.getByTestId("card-content-with-default-classes");
+      expect(content.getAttribute("class")).toContain("p-6 pt-0");
+      unmount();
+    });
+
+    test("Common: CardContent - test if renders with custom className", ({ expect }) => {
+      const customClass = "custom-content-class";
+      const { unmount } = render(
+        <CardContent data-testid="card-content-with-custom-class" className={customClass} />,
+      );
+      expect(screen.getByTestId("card-content-with-custom-class").getAttribute("class")).toContain(
+        customClass,
+      );
+      unmount();
+    });
+
+    test("Common: CardContent - test if renders with custom content", ({ expect }) => {
+      const { unmount } = render(
+        <CardContent data-testid="card-content">Test Content</CardContent>,
+      );
+      expect(screen.getByText("Test Content")).toBeInTheDocument();
+      unmount();
+    });
+  });
+
+  describe("CardFooter", () => {
+    afterEach(cleanup);
+
+    test("Common: CardFooter - test if renders without errors", ({ expect }) => {
+      const { unmount } = render(<CardFooter data-testid="card-footer" />);
+      expect(screen.getByTestId("card-footer")).toBeInTheDocument();
+      unmount();
+    });
+
+    test("Common: CardFooter - test default classes", ({ expect }) => {
+      const { unmount } = render(<CardFooter data-testid="card-footer-with-default-classes" />);
+      const footer = screen.getByTestId("card-footer-with-default-classes");
+      expect(footer.getAttribute("class")).toContain("flex items-center p-6 pt-0");
+      unmount();
+    });
+
+    test("Common: CardFooter - test if renders with custom className", ({ expect }) => {
+      const customClass = "custom-footer-class";
+      const { unmount } = render(
+        <CardFooter data-testid="card-footer-with-custom-class" className={customClass} />,
+      );
+      expect(screen.getByTestId("card-footer-with-custom-class").getAttribute("class")).toContain(
+        customClass,
+      );
+      unmount();
+    });
+
+    test("Common: CardFooter - test if renders with custom content", ({ expect }) => {
+      const { unmount } = render(<CardFooter data-testid="card-footer">Footer Content</CardFooter>);
+      expect(screen.getByText("Footer Content")).toBeInTheDocument();
+      unmount();
+    });
+  });
+
+  describe("Card Integration", () => {
+    afterEach(cleanup);
+
+    test("Common: Card - test if renders with all components", ({ expect }) => {
+      const { unmount } = render(
+        <Card data-testid="card-with-all-components">
+          <CardHeader data-testid="card-header-with-all-components">
+            <CardTitle data-testid="card-title-with-all-components">Card Title</CardTitle>
+            <CardDescription data-testid="card-description-with-all-components">
+              Card Description
+            </CardDescription>
+          </CardHeader>
+          <CardContent data-testid="card-content-with-all-components">
+            <p>This is the card content.</p>
+          </CardContent>
+          <CardFooter data-testid="card-footer-with-all-components">
+            <button>Action Button</button>
+          </CardFooter>
+        </Card>,
+      );
+
+      // Verify all components are rendered
+      expect(screen.getByTestId("card-with-all-components")).toBeInTheDocument();
+      expect(screen.getByTestId("card-header-with-all-components")).toBeInTheDocument();
+      expect(screen.getByTestId("card-title-with-all-components")).toBeInTheDocument();
+      expect(screen.getByTestId("card-description-with-all-components")).toBeInTheDocument();
+      expect(screen.getByTestId("card-content-with-all-components")).toBeInTheDocument();
+      expect(screen.getByTestId("card-footer-with-all-components")).toBeInTheDocument();
+
+      // Verify content is rendered correctly
+      expect(screen.getByText("Card Title")).toBeInTheDocument();
+      expect(screen.getByText("Card Description")).toBeInTheDocument();
+      expect(screen.getByText("This is the card content.")).toBeInTheDocument();
+      expect(screen.getByText("Action Button")).toBeInTheDocument();
+      unmount();
+    });
+
+    test("Common: Card - test if components are rendered in correct order", ({ expect }) => {
+      const { unmount } = render(
+        <Card data-testid="card-content-order">
+          <CardHeader data-testid="card-header-content-order">
+            <CardTitle data-testid="card-title-content-order">Title</CardTitle>
+          </CardHeader>
+          <CardContent data-testid="card-content-content-order">Content</CardContent>
+        </Card>,
+      );
+
+      const card = screen.getByTestId("card-content-order");
+      const header = screen.getByTestId("card-header-content-order");
+      const title = screen.getByTestId("card-title-content-order");
+      const content = screen.getByTestId("card-content-content-order");
+
+      // Verify hierarchy
+      expect(card).toContainElement(header);
+      expect(card).toContainElement(content);
+      expect(header).toContainElement(title);
+      unmount();
+    });
+  });
+
+  describe("Accessibility", () => {
+    afterEach(cleanup);
+
+    test("Common: Card - test if renders with correct role", ({ expect }) => {
+      const { unmount } = render(
+        <Card data-testid="card" role="article">
+          <CardHeader data-testid="card-header">
+            <CardTitle data-testid="card-title">Accessible Title</CardTitle>
+            <CardDescription data-testid="card-description">Accessible Description</CardDescription>
+          </CardHeader>
+          <CardContent data-testid="card-content">Accessible Content</CardContent>
+          <CardFooter data-testid="card-footer">Accessible Footer</CardFooter>
+        </Card>,
+      );
+
+      expect(screen.getByRole("article")).toBeInTheDocument();
+      expect(screen.getByText("Accessible Title")).toBeInTheDocument();
+      expect(screen.getByText("Accessible Description")).toBeInTheDocument();
+      unmount();
+    });
+
+    test("Common: Card - test if renders with ARIA attributes", ({ expect }) => {
+      const { unmount } = render(
+        <Card
+          data-testid="card-with-aria"
+          aria-label="Test card"
+          aria-describedby="card-description">
+          <CardContent id="card-description">Card with ARIA attributes</CardContent>
+        </Card>,
+      );
+
+      const card = screen.getByTestId("card-with-aria");
+      expect(card).toHaveAttribute("aria-label", "Test card");
+      expect(card).toHaveAttribute("aria-describedby", "card-description");
+      unmount();
+    });
   });
 });

package/src/card.tsx

@@ -1,38 +1,83 @@
-import { DefaultComponent, useStackShiftUIComponents } from "@stackshift-ui/system";
-import type { ElementType, HTMLProps, ReactNode } from "react";
-import cn from "classnames";
+import * as React from "react";
 
-type CardBorderRadius = "none" | "sm" | "md" | "lg" | "xl" | "global";
-
-export interface CardProps extends Omit<HTMLProps<HTMLElement>, "as"> {
-  borderRadius?: CardBorderRadius;
-  children?: ReactNode;
-  className?: string;
-  as?: ElementType;
-}
+import { cn, DefaultComponent, useStackShiftUIComponents } from "@stackshift-ui/system";
 
 const displayName = "Card";
+const displayNameHeader = "CardHeader";
+const displayNameTitle = "CardTitle";
+const displayNameDescription = "CardDescription";
+const displayNameContent = "CardContent";
+const displayNameFooter = "CardFooter";
 
-export const Card: React.FC<CardProps> = ({ borderRadius, children, className, as, ...props }) => {
-  const { [displayName]: Component = DefaultComponent } = useStackShiftUIComponents();
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const { [displayName]: Component = DefaultComponent } = useStackShiftUIComponents();
 
-  const radiusMap = {
-    none: "rounded-none",
-    sm: "rounded-sm",
-    md: "rounded-md",
-    lg: "rounded-lg",
-    xl: "rounded-xl",
-    global: "rounded-global",
-  };
-  const borderRadiusClass = radiusMap[borderRadius ?? "global"];
+    return (
+      <Component
+        ref={ref}
+        className={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)}
+        {...props}
+      />
+    );
+  },
+);
+Card.displayName = displayName;
 
-  const classes = `border border-solid border-slate-300 p-4 shadow-sm ${borderRadiusClass}`;
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const { [displayNameHeader]: Component = DefaultComponent } = useStackShiftUIComponents();
 
-  return (
-    <Component as={as} className={cn(classes, className)} {...props} data-testid={displayName}>
-      {children}
-    </Component>
-  );
-};
+    return (
+      <Component ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
+    );
+  },
+);
+CardHeader.displayName = displayNameHeader;
 
-Card.displayName = displayName;
+const CardTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const { [displayNameTitle]: Component = DefaultComponent } = useStackShiftUIComponents();
+    return (
+      <Component
+        ref={ref}
+        className={cn("text-2xl font-semibold leading-none tracking-tight", className)}
+        {...props}
+      />
+    );
+  },
+);
+CardTitle.displayName = displayNameTitle;
+
+const CardDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const { [displayNameDescription]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+    return (
+      <Component ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+    );
+  },
+);
+CardDescription.displayName = displayNameDescription;
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const { [displayNameContent]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+    return <Component ref={ref} className={cn("p-6 pt-0", className)} {...props} />;
+  },
+);
+CardContent.displayName = displayNameContent;
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const { [displayNameFooter]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+    return (
+      <Component ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
+    );
+  },
+);
+CardFooter.displayName = displayNameFooter;
+
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

package/src/setupTests.ts

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