diff --git a/apps/eclipse/content/design-system/molecules/meta.json b/apps/eclipse/content/design-system/molecules/meta.json index 68e73f73a9..42ab0540c2 100644 --- a/apps/eclipse/content/design-system/molecules/meta.json +++ b/apps/eclipse/content/design-system/molecules/meta.json @@ -16,6 +16,7 @@ "tabs", "typetable", "table", + "statistic", "steps" ] } diff --git a/apps/eclipse/content/design-system/molecules/statistic.mdx b/apps/eclipse/content/design-system/molecules/statistic.mdx new file mode 100644 index 0000000000..28e9e3777c --- /dev/null +++ b/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 ; +} +``` + +**Live Example:** + +
+ +
+ +**With Measurement Unit** + +```tsx +import Statistic from "@prisma-docs/eclipse/components/statistic"; + +export function StatWithMeasure() { + return ; +} +``` + +**Live Example:** + +
+ +
+ +**With Badge** + +```tsx +import Statistic from "@prisma-docs/eclipse/components/statistic"; + +export function StatWithBadge() { + return ( + + ); +} +``` + +**Live Example:** + +
+ +
+ +**Multiple Statistics Grid** + +```tsx +import Statistic from "@prisma-docs/eclipse/components/statistic"; + +export function StatsGrid() { + return ( +
+ + + +
+ ); +} +``` + +**Live Example:** + +
+ + + +
+ +**Different Badge Colors** + +```tsx +import Statistic from "@prisma-docs/eclipse/components/statistic"; + +export function ColoredBadges() { + return ( +
+ + + + +
+ ); +} +``` + +**Live Example:** + +
+ + + + +
+ +### 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 + + +``` + +**Database Statistics** +```tsx + + +``` + +**Usage Analytics** +```tsx + + +``` + +**Health Monitoring** +```tsx + + +``` + +**Resource Usage** +```tsx + + +``` + +### 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 +
+ + +
+``` + +**Two Column Grid** +```tsx +
+ + + + +
+``` + +**Three Column Grid** +```tsx +
+ + + +
+``` + +**Four Column Grid** +```tsx +
+ + + + +
+``` + +### 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` diff --git a/packages/eclipse/package.json b/packages/eclipse/package.json index 32d68da37d..e4e67cbe7d 100644 --- a/packages/eclipse/package.json +++ b/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": { diff --git a/packages/eclipse/src/components/badge.tsx b/packages/eclipse/src/components/badge.tsx index 517ecac6e7..df443b5994 100644 --- a/packages/eclipse/src/components/badge.tsx +++ b/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; } /** diff --git a/packages/eclipse/src/components/statistic.tsx b/packages/eclipse/src/components/statistic.tsx new file mode 100644 index 0000000000..41ee0fd8bf --- /dev/null +++ b/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 ( +
+ {/* Title + Badge */} +
+ + {title} + + {badge && } +
+ + {/* Value + Measure */} +
+ + {value} + + {measure} +
+
+ ); +} diff --git a/packages/eclipse/src/static/fonts/MonaSans-Bold.ttf b/packages/eclipse/src/static/fonts/MonaSans-Bold.ttf new file mode 100644 index 0000000000..a509c9553f Binary files /dev/null and b/packages/eclipse/src/static/fonts/MonaSans-Bold.ttf differ diff --git a/packages/eclipse/src/static/fonts/MonaSans-ExtraBold.ttf b/packages/eclipse/src/static/fonts/MonaSans-ExtraBold.ttf new file mode 100644 index 0000000000..0f863ad42f Binary files /dev/null and b/packages/eclipse/src/static/fonts/MonaSans-ExtraBold.ttf differ diff --git a/packages/eclipse/src/static/fonts/MonaSans-Medium.ttf b/packages/eclipse/src/static/fonts/MonaSans-Medium.ttf new file mode 100644 index 0000000000..f48a8da1ff Binary files /dev/null and b/packages/eclipse/src/static/fonts/MonaSans-Medium.ttf differ diff --git a/packages/eclipse/src/static/fonts/MonaSans-Regular.ttf b/packages/eclipse/src/static/fonts/MonaSans-Regular.ttf new file mode 100644 index 0000000000..e3b027a43e Binary files /dev/null and b/packages/eclipse/src/static/fonts/MonaSans-Regular.ttf differ diff --git a/packages/eclipse/src/static/fonts/MonaSans-SemiBold.ttf b/packages/eclipse/src/static/fonts/MonaSans-SemiBold.ttf new file mode 100644 index 0000000000..607b9c5bd9 Binary files /dev/null and b/packages/eclipse/src/static/fonts/MonaSans-SemiBold.ttf differ diff --git a/packages/eclipse/src/styles/fonts.css b/packages/eclipse/src/styles/fonts.css new file mode 100644 index 0000000000..a7fb99e4c7 --- /dev/null +++ b/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; +} diff --git a/packages/eclipse/src/styles/globals.css b/packages/eclipse/src/styles/globals.css index a34a0c667f..e14d90be7b 100644 --- a/packages/eclipse/src/styles/globals.css +++ b/packages/eclipse/src/styles/globals.css @@ -1,4 +1,5 @@ @import "tw-animate-css"; +@import "./fonts.css"; @source "../components/**/*.tsx"; @source "../components/ui/**/*.tsx"; @@ -70,7 +71,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;