feat: DR-6919 Statistic component

apps/eclipse/content/design-system/molecules/meta.json

@@ -16,6 +16,7 @@
     "tabs",
     "typetable",
     "table",
+    "statistic",
     "steps"
   ]
 }

apps/eclipse/content/design-system/molecules/statistic.mdx

@@ -0,0 +1,252 @@
+---
+title: Statistic
+description: A component for displaying key metrics and statistics with optional badges and measurement units.
+---
+
+import Statistic from "@prisma-docs/eclipse/components/statistic";
+
+### Usage
+
+**Basic Statistic**
+
+```tsx
+import Statistic from "@prisma-docs/eclipse/components/statistic";
+
+export function BasicStat() {
+  return <Statistic title="Total Users" value={1234} />;
+}
+```
+
+**Live Example:**
+
+<div className="my-4">
+  <Statistic title="Total Users" value={1234} />
+</div>
+
+**With Measurement Unit**
+
+```tsx
+import Statistic from "@prisma-docs/eclipse/components/statistic";
+
+export function StatWithMeasure() {
+  return <Statistic title="Response Time" value={42} measure="ms" />;
+}
+```
+
+**Live Example:**
+
+<div className="my-4">
+  <Statistic title="Response Time" value={42} measure="ms" />
+</div>
+
+**With Badge**
+
+```tsx
+import Statistic from "@prisma-docs/eclipse/components/statistic";
+
+export function StatWithBadge() {
+  return (
+    <Statistic
+      title="API Status"
+      value="99.9"
+      measure="%"
+      badge="Live"
+      badgeColor="success"
+    />
+  );
+}
+```
+
+**Live Example:**
+
+<div className="my-4">
+  <Statistic
+    title="API Status"
+    value="99.9"
+    measure="%"
+    badge="Live"
+    badgeColor="success"
+  />
+</div>
+
+**Multiple Statistics Grid**
+
+```tsx
+import Statistic from "@prisma-docs/eclipse/components/statistic";
+
+export function StatsGrid() {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+      <Statistic title="Total Queries" value="1.2M" badge="Today" badgeColor="ppg" />
+      <Statistic title="Avg Response" value={45} measure="ms" badge="Improved" badgeColor="success" />
+      <Statistic title="Active Users" value={847} badge="Online" badgeColor="success" />
+    </div>
+  );
+}
+```
+
+**Live Example:**
+
+<div className="grid grid-cols-1 md:grid-cols-3 gap-4 my-4">
+  <Statistic title="Total Queries" value="1.2M" badge="Today" badgeColor="ppg" />
+  <Statistic title="Avg Response" value={45} measure="ms" badge="Improved" badgeColor="success" />
+  <Statistic title="Active Users" value={847} badge="Online" badgeColor="success" />
+</div>
+
+**Different Badge Colors**
+
+```tsx
+import Statistic from "@prisma-docs/eclipse/components/statistic";
+
+export function ColoredBadges() {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+      <Statistic title="Cache Hits" value={95} measure="%" badge="Optimal" badgeColor="success" />
+      <Statistic title="Error Rate" value={0.3} measure="%" badge="Warning" badgeColor="warning" />
+      <Statistic title="Failed Requests" value={12} badge="Critical" badgeColor="error" />
+      <Statistic title="Database Size" value={2.4} measure="GB" badge="Growing" badgeColor="neutral" />
+    </div>
+  );
+}
+```
+
+**Live Example:**
+
+<div className="grid grid-cols-1 md:grid-cols-2 gap-4 my-4">
+  <Statistic title="Cache Hits" value={95} measure="%" badge="Optimal" badgeColor="success" />
+  <Statistic title="Error Rate" value={0.3} measure="%" badge="Warning" badgeColor="warning" />
+  <Statistic title="Failed Requests" value={12} badge="Critical" badgeColor="error" />
+  <Statistic title="Database Size" value={2.4} measure="GB" badge="Growing" badgeColor="neutral" />
+</div>
+
+### Statistic Props
+
+- `title` - The label for the statistic (default: `"Statistic"`)
+- `value` - The numeric or string value to display (default: `0`)
+- `measure` - The unit of measurement (e.g., "ms", "%", "GB") (optional)
+- `badge` - Badge content to display next to the title (optional)
+- `badgeColor` - The color variant for the badge: `"neutral"`, `"ppg"`, `"orm"`, `"error"`, `"success"`, `"warning"` (default: `"ppg"`)
+
+### Features
+
+- ✅ Large, bold typography for values
+- ✅ Optional measurement units
+- ✅ Integrated badge support with color variants
+- ✅ Dashed border design for visual emphasis
+- ✅ Responsive and flexible layout
+- ✅ Eclipse design system tokens
+- ✅ Supports both numeric and string values
+
+### Best Practices
+
+- Use **concise titles** that clearly describe what the statistic represents
+- Use **badges** to provide context like status, trends, or time periods
+- Keep **values** short and readable (use abbreviated formats like "1.2M" for large numbers)
+- Use **measurement units** consistently across related statistics
+- Group related statistics in a grid layout for easy comparison
+- Choose **badge colors** that match the semantic meaning:
+  - `success` - Positive metrics, goals achieved
+  - `warning` - Metrics requiring attention
+  - `error` - Critical issues or problems
+  - `ppg` - Prisma Pulse/Accelerate specific metrics
+  - `orm` - Prisma ORM specific metrics
+  - `neutral` - General information
+
+### Common Use Cases
+
+**Performance Metrics**
+```tsx
+<Statistic title="Response Time" value={42} measure="ms" badge="Fast" badgeColor="success" />
+<Statistic title="Throughput" value="1.2K" measure="req/s" badge="Peak" badgeColor="ppg" />
+```
+
+**Database Statistics**
+```tsx
+<Statistic title="Total Records" value="2.4M" badge="Growing" badgeColor="neutral" />
+<Statistic title="Query Speed" value={15} measure="ms" badge="Optimized" badgeColor="success" />
+```
+
+**Usage Analytics**
+```tsx
+<Statistic title="Active Users" value={1247} badge="Online" badgeColor="success" />
+<Statistic title="Daily Queries" value="45.2K" badge="Today" badgeColor="ppg" />
+```
+
+**Health Monitoring**
+```tsx
+<Statistic title="Uptime" value={99.99} measure="%" badge="Healthy" badgeColor="success" />
+<Statistic title="Error Rate" value={0.01} measure="%" badge="Low" badgeColor="warning" />
+```
+
+**Resource Usage**
+```tsx
+<Statistic title="Memory Usage" value={67} measure="%" badge="Normal" badgeColor="neutral" />
+<Statistic title="CPU Load" value={23} measure="%" badge="Low" badgeColor="success" />
+```
+
+### Typography & Spacing
+
+The Statistic component uses:
+- **Title**: Uppercase, extra-small font (text-xs), gray-400 color
+- **Value**: Extra-large, bold font (text-4xl font-black)
+- **Measure**: Large font (text-lg), gray-500 color
+- **Spacing**: 6px horizontal, 5px vertical padding
+- **Border**: 2px dashed purple-400 border with rounded corners
+
+### Layout Tips
+
+**Single Column (Mobile)**
+```tsx
+<div className="space-y-4">
+  <Statistic title="Metric 1" value={100} />
+  <Statistic title="Metric 2" value={200} />
+</div>
+```
+
+**Two Column Grid**
+```tsx
+<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+  <Statistic title="Metric 1" value={100} />
+  <Statistic title="Metric 2" value={200} />
+  <Statistic title="Metric 3" value={300} />
+  <Statistic title="Metric 4" value={400} />
+</div>
+```
+
+**Three Column Grid**
+```tsx
+<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+  <Statistic title="Metric 1" value={100} />
+  <Statistic title="Metric 2" value={200} />
+  <Statistic title="Metric 3" value={300} />
+</div>
+```
+
+**Four Column Grid**
+```tsx
+<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+  <Statistic title="Metric 1" value={100} />
+  <Statistic title="Metric 2" value={200} />
+  <Statistic title="Metric 3" value={300} />
+  <Statistic title="Metric 4" value={400} />
+</div>
+```
+
+### Accessibility
+
+- Clear visual hierarchy with distinct typography sizes
+- High contrast text colors for readability
+- Semantic HTML structure
+- Badge colors provide both visual and textual information
+- Responsive design works across all screen sizes
+- Title text is uppercase with tracking for improved legibility
+
+### Design Tokens
+
+The component uses Eclipse design tokens:
+- Border: `border-purple-400` with `border-2 border-dashed`
+- Radius: `rounded-lg`
+- Title: `text-xs font-semibold tracking-widest text-gray-400 uppercase`
+- Value: `text-4xl font-black text-gray-900`
+- Measure: `text-lg text-gray-500`
+- Spacing: `px-6 py-5`

packages/eclipse/package.json

@@ -13,6 +13,7 @@
     "./tokens": "./src/tokens/index.ts",
     "./tokens/*": "./src/tokens/*",
     "./styles/*": "./src/styles/*",
+    "./fonts/*": "./src/static/fonts/*",
     "./postcss.config": "./postcss.config.mjs"
   },
   "scripts": {

packages/eclipse/src/components/badge.tsx

@@ -38,7 +38,7 @@ export interface BadgeProps
   /**
    * The label text to display inside the badge
    */
-  label: string;
+  label: any;
 }
 
 /**

packages/eclipse/src/components/statistic.tsx

@@ -0,0 +1,37 @@
+import { Badge } from "./badge";
+
+interface StatisticProps {
+  title?: string;
+  value?: string | number;
+  measure?: string;
+  badge?: React.ReactNode;
+  badgeColor?: "neutral" | "ppg" | "orm" | "error" | "success" | "warning";
+}
+
+export default function Statistic({
+  title = "Statistic",
+  value = 0,
+  measure = "",
+  badge = null,
+  badgeColor = "ppg",
+}: StatisticProps) {
+  return (
+    <div className="relative">
+      {/* Title + Badge */}
+      <div className="flex items-center gap-3 mb-2">
+        <span className="text-2xs font-semibold text-foreground-neutral-weak uppercase tracking-[1.1px]">
+          {title}
+        </span>
+        {badge && <Badge color={badgeColor} label={badge} />}
+      </div>
+
+      {/* Value + Measure */}
+      <div className="flex items-baseline gap-2 leading-8">
+        <span className="text-2xl font-bold text-foreground-neutral font-mona-sans">
+          {value}
+        </span>
+        <span className="text-sm text-foreground-neutral-weak">{measure}</span>
+      </div>
+    </div>
+  );
+}

packages/eclipse/src/styles/fonts.css

@@ -0,0 +1,41 @@
+/* Mona Sans Font Faces */
+
+@font-face {
+    font-family: "Mona Sans";
+    src: url("../static/fonts/MonaSans-Regular.ttf") format("truetype");
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: "Mona Sans";
+    src: url("../static/fonts/MonaSans-Medium.ttf") format("truetype");
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: "Mona Sans";
+    src: url("../static/fonts/MonaSans-SemiBold.ttf") format("truetype");
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: "Mona Sans";
+    src: url("../static/fonts/MonaSans-Bold.ttf") format("truetype");
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: "Mona Sans";
+    src: url("../static/fonts/MonaSans-ExtraBold.ttf") format("truetype");
+    font-weight: 800;
+    font-style: normal;
+    font-display: swap;
+}

packages/eclipse/src/styles/globals.css

@@ -1,4 +1,5 @@
 @import "tw-animate-css";
+@import "./fonts.css";
 
 @source "../components/**/*.tsx";
 @source "../components/ui/**/*.tsx";
@@ -77,7 +78,9 @@
     --blur-background-low: 16px;
     --blur-background: 24px;
     --blur-background-high: 40px;
-
+    --font-mona-sans:
+        "Mona Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+        "Helvetica Neue", Arial, sans-serif;
     /* Typography - Font Families */
     --font-family-display: var(--font-mona-sans), Inter, sans-serif;
     --font-family-sans-display: Inter, sans-serif;