feat(ui): add Scorecard KPI card component

examples/storybook/src/stories/design-system/Scorecard.stories.tsx

@@ -0,0 +1,82 @@
+/**
+ * Scorecard — KPI card showing a single metric with optional trend indicator.
+ */
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import { Scorecard, XStack, YStack } from '@goodwidget/ui'
+import type { ScorecardProps } from '@goodwidget/ui'
+import { withDefaultPreset } from '../helpers/withDefaultPreset'
+
+/** The 5 mock-data rows from #139, reused to render both the bare and card variants. */
+const MOCK_ROWS: Array<{ slug: string; props: Omit<ScorecardProps, 'variant' | 'testID'> }> = [
+  { slug: 'total-spent', props: { label: 'Total G$ Spent', value: 1900, prefix: 'G$', format: 'compact' } },
+  { slug: 'ai-credits', props: { label: 'AI Credits Used', value: 284.5, prefix: '$', format: 'decimal', decimals: 2 } },
+  { slug: 'active-days', props: { label: 'Active Days', value: 28, format: 'none' } },
+  {
+    slug: 'unique-wallets',
+    props: { label: 'Unique Wallets', value: 47, trend: { value: 15.3, direction: 'up' }, trendLabel: 'vs last 7d' },
+  },
+  { slug: 'daily-flow-rate', props: { label: 'Daily Flow Rate', value: 2450000, prefix: 'G$', suffix: '/day', format: 'compact' } },
+]
+
+const meta: Meta<typeof Scorecard> = {
+  title: 'Design System/Primitives/Scorecard',
+  component: Scorecard,
+  tags: ['autodocs', 'showcase'],
+  parameters: { layout: 'padded' },
+  decorators: [withDefaultPreset],
+  argTypes: {
+    value: { control: 'number', description: 'The metric value to display' },
+    label: { control: 'text', description: 'What the metric represents' },
+    prefix: { control: 'text', description: 'Unit before the value' },
+    suffix: { control: 'text', description: 'Unit after the value' },
+    format: {
+      control: 'select',
+      options: ['compact', 'decimal', 'none'],
+      description: 'Number formatting mode',
+    },
+    decimals: { control: 'number', description: 'Decimal precision' },
+    variant: {
+      control: 'select',
+      options: ['bare', 'card'],
+      description: 'Chrome-less vs. card-wrapped face',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Typography size preset',
+    },
+  },
+}
+export default meta
+type Story = StoryObj<typeof Scorecard>
+
+/** All 5 mock-data rows from #139, each rendered in both the bare and card variant. */
+export const Default: Story = {
+  render: () => (
+    <YStack testID="Scorecard-default" data-testid="Scorecard-default" gap="$6">
+      <XStack flexWrap="wrap" gap="$5">
+        {MOCK_ROWS.map(({ slug, props }) => (
+          <Scorecard key={slug} {...props} variant="bare" testID={`Scorecard-${slug}-bare`} />
+        ))}
+      </XStack>
+      <XStack flexWrap="wrap" gap="$5">
+        {MOCK_ROWS.map(({ slug, props }) => (
+          <Scorecard key={slug} {...props} variant="card" testID={`Scorecard-${slug}-card`} />
+        ))}
+      </XStack>
+    </YStack>
+  ),
+}
+
+/** Controllable instance — edit args in the Controls panel. */
+export const Controllable: Story = {
+  args: {
+    label: 'Total G$ Spent',
+    value: 1900,
+    prefix: 'G$',
+    format: 'compact',
+    variant: 'card',
+    size: 'md',
+  },
+}

packages/ui/package.json

@@ -21,6 +21,7 @@
   "peerDependencies": {
     "react": ">=18.0.0",
     "react-native": ">=0.76.0",
+    "react-native-svg": ">=15.0.0",
     "@react-native-clipboard/clipboard": ">=1.14.0"
   },
   "peerDependenciesMeta": {
@@ -42,6 +43,7 @@
     "@types/react": "^18.3.0",
     "react": "^18.3.0",
     "react-native": "0.76.9",
+    "react-native-svg": "15.15.5",
     "react-native-web": "^0.19.13",
     "tsup": "^8.4.0",
     "typescript": "^5.7.0"