@stackshift-ui/stats-card 1.1.0 → 6.0.3

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@stackshift-ui/stats-card",
   "description": "",
-  "version": "1.1.0",
+  "version": "6.0.3",
   "private": false,
   "sideEffects": false,
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "files": [
-    "dist/**"
+    "dist/**",
+    "src"
   ],
   "author": "WebriQ <info@webriq.com>",
   "devDependencies": {
@@ -28,14 +29,14 @@
     "typescript": "^5.6.2",
     "vite-tsconfig-paths": "^5.0.1",
     "vitest": "^2.1.1",
-    "@stackshift-ui/eslint-config": "1.0.0",
-    "@stackshift-ui/typescript-config": "2.0.0"
+    "@stackshift-ui/typescript-config": "6.0.2",
+    "@stackshift-ui/eslint-config": "6.0.2"
   },
   "dependencies": {
     "classnames": "^2.5.1",
-    "@stackshift-ui/scripts": "1.0.0",
-    "@stackshift-ui/system": "2.0.0",
-    "@stackshift-ui/text": "1.0.0"
+    "@stackshift-ui/system": "6.0.3",
+    "@stackshift-ui/scripts": "6.0.2",
+    "@stackshift-ui/text": "6.0.3"
   },
   "peerDependencies": {
     "@types/react": "16.8 - 19",

package/src/index.ts

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

package/src/stats-card.test.tsx

@@ -0,0 +1,19 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, test } from "vitest";
+import { StatsCard } from "./stats-card";
+
+const ARGS = {
+  LABEL: "Total Revenue",
+  VALUE: "$33,261",
+  ICON: "https://cdn.sanity.io/images/9itgab5x/staging/97b6696849c90facc200537fd780b03d373e5212-980x830.png",
+};
+
+describe.concurrent("stats-card", () => {
+  afterEach(cleanup);
+
+  test("Common: Stats Card - test if renders without errors", ({ expect }) => {
+    const clx = "statscard-class";
+    render(<StatsCard className={clx} icon={ARGS.ICON} value={ARGS.VALUE} label={ARGS.LABEL} />);
+    expect(screen.getByTestId("div").classList).toContain(clx);
+  });
+});

package/src/stats-card.tsx

@@ -0,0 +1,63 @@
+import { DefaultComponent, useStackShiftUIComponents } from "@stackshift-ui/system";
+import { Text } from "@stackshift-ui/text";
+import cn from "classnames";
+import type { ElementType, HTMLProps, ReactNode } from "react";
+
+type VariantType = "inline" | "stacked";
+
+export interface StatsCardProps extends Omit<HTMLProps<HTMLElement>, "as"> {
+  variant?: VariantType;
+  icon: string;
+  value: string;
+  label: string;
+  alt?: string;
+  children?: ReactNode;
+  className?: string;
+  as?: ElementType;
+}
+
+const displayName = "StatsCard";
+
+export const StatsCard: React.FC<StatsCardProps> = ({
+  variant = "inline",
+  icon,
+  value,
+  label,
+  alt,
+  children,
+  className,
+  as,
+  ...props
+}) => {
+  const { [displayName]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  const commonClass = `w-full px-4`;
+  const variantClass = {
+    inline: `${commonClass} flex items-center`,
+    stacked: `${commonClass} block`,
+  };
+
+  const imageVariantClass = {
+    inline: `inline-block p-4 mr-4 rounded bg-secondary-foreground`,
+    stacked: `inline-block p-4 mx-auto rounded bg-secondary-foreground`,
+  };
+
+  const classes = variantClass[variant] ?? variantClass["inline"];
+  const imageClasses = imageVariantClass[variant] ?? imageVariantClass["inline"];
+
+  return (
+    <Component as={as} className={cn(classes, className)} {...props} data-testid={displayName}>
+      {icon && (
+        <div className={imageClasses}>
+          <img src={icon} width={24} height={24} alt={alt ?? "statistics-icon"} />
+        </div>
+      )}
+      <div>
+        <p className="text-2xl text-gray-500 font-bold">{value}</p>
+        <Text muted>{label}</Text>
+      </div>
+    </Component>
+  );
+};
+
+StatsCard.displayName = displayName;