Finalize governance widget component boundaries

packages/governance-widget/package.json

@@ -21,7 +21,14 @@
   },
   "peerDependencies": {
     "react": ">=18.0.0",
-    "react-dom": ">=18.0.0"
+    "react-dom": ">=18.0.0",
+    "react-native": ">=0.76.0",
+    "react-native-web": ">=0.19.0"
+  },
+  "peerDependenciesMeta": {
+    "react-native-web": {
+      "optional": true
+    }
   },
   "dependencies": {
     "@goodwidget/ui": "workspace:*",
@@ -33,6 +40,8 @@
     "@types/react-dom": "^18.3.0",
     "react": "^18.3.0",
     "react-dom": "^18.3.0",
+    "react-native": "0.76.9",
+    "react-native-web": "^0.19.13",
     "tsup": "^8.4.0",
     "typescript": "^5.7.0"
   }

packages/governance-widget/src/BalanceCard.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { Card, Icon, Text, XStack } from '@goodwidget/ui'
+import type { BalanceCardProps } from './types'
+import { isGovernanceAmount, renderGovernanceAmount } from './utils'
+
+export function BalanceCard({
+  icon,
+  title,
+  amount,
+  amountType = 'token',
+  metadata,
+  compact = false,
+  testID,
+}: BalanceCardProps) {
+  const amountValue = isGovernanceAmount(amount) ? amount : { value: amount, token: amountType === 'token' ? 'G$' : undefined }
+  const metadataTone = metadata.tone === 'positive' ? 'default' : metadata.tone === 'muted' ? 'secondary' : 'soft'
+
+  return (
+    <Card data-testid={testID} width="100%" maxWidth={compact ? 220 : 268} minHeight={compact ? 150 : 176} gap="$3">
+      <XStack alignItems="center" gap="$2">
+        <Icon name={icon} size="sm" color="primary" round />
+        <Text variant="label" truncate flex={1}>
+          {title}
+        </Text>
+      </XStack>
+      {renderGovernanceAmount(amountValue, compact ? 'md' : 'lg')}
+      <XStack alignItems="center" gap="$2" marginTop="auto">
+        {metadata.icon ? <Icon name={metadata.icon} size="xs" color={metadata.tone === 'positive' ? 'success' : 'muted'} /> : null}
+        <Text variant="caption" tone={metadataTone} truncate>
+          {metadata.label}
+        </Text>
+      </XStack>
+    </Card>
+  )
+}

packages/governance-widget/src/FundingDistributionChart.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { Card, Heading, Text, XStack, YStack } from '@goodwidget/ui'
+import { useTheme } from 'tamagui'
+import { FundingDonut, FundingLegend } from './primitives'
+import type { FundingDistributionChartProps } from './types'
+import { DONUT_COLOR_KEYS, resolveThemeColor } from './utils'
+
+export function FundingDistributionChart({
+  totalAmount,
+  projects,
+  isStreaming = false,
+  onProjectPress,
+  testID,
+}: FundingDistributionChartProps) {
+  const theme = useTheme()
+  const fallbackColors = ['#2563eb', '#16a34a', '#d97706', '#0891b2', '#dc2626']
+  const colors = DONUT_COLOR_KEYS.map((key, index) => resolveThemeColor(theme, key, fallbackColors[index]))
+  const total = { ...totalAmount, isStreaming: totalAmount.isStreaming ?? isStreaming }
+
+  return (
+    <Card data-testid={testID} width="100%" maxWidth={620} gap="$4">
+      <YStack gap="$1">
+        <Heading level={3}>Funding distribution</Heading>
+        <Text tone="secondary">Current allocation across active governance projects.</Text>
+      </YStack>
+      <XStack flexWrap="wrap" justifyContent="center" alignItems="center" gap="$4">
+        <FundingDonut projects={projects} totalAmount={total} colors={colors} onProjectPress={onProjectPress} />
+        <FundingLegend projects={projects} colors={colors} onProjectPress={onProjectPress} />
+      </XStack>
+    </Card>
+  )
+}

packages/governance-widget/src/ImpactCard.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { Button, ButtonText, Card, Heading, Text, XStack } from '@goodwidget/ui'
+import { MetricBox } from './primitives'
+import type { ImpactCardProps } from './types'
+
+export function ImpactCard({
+  title,
+  metrics,
+  description,
+  ctaLabel,
+  ctaDisabled = false,
+  onCtaPress,
+  testID,
+}: ImpactCardProps) {
+  return (
+    <Card data-testid={testID} width="100%" maxWidth={520} gap="$4">
+      <Heading level={3}>{title}</Heading>
+      <XStack flexWrap="wrap" gap="$3">
+        {metrics.map((metric) => (
+          <MetricBox key={metric.label} metric={metric} />
+        ))}
+      </XStack>
+      <Text tone="secondary">{description}</Text>
+      {ctaLabel ? (
+        <Button fullWidth disabled={ctaDisabled} onPress={onCtaPress} aria-label={ctaLabel}>
+          <ButtonText>{ctaLabel}</ButtonText>
+        </Button>
+      ) : null}
+    </Card>
+  )
+}

packages/governance-widget/src/ProposalCards.tsx

@@ -0,0 +1,101 @@
+import React from 'react'
+import { Stack } from 'tamagui'
+import { Card, Heading, Icon, Text, XStack, YStack } from '@goodwidget/ui'
+import { ProposalHeader, RankedOptionRow, StackedProgressBar, VoteLegend, VoterPreviewGroup } from './primitives'
+import type { AlignmentVotingProposalCardProps, OptimisticVotingProposalCardProps } from './types'
+import { clampPercentage } from './utils'
+
+export function AlignmentVotingProposalCard({
+  id,
+  categoryLabel,
+  title,
+  summaryLabel = 'Current top voted',
+  options,
+  maxVisibleOptions = 3,
+  onPress,
+  testID,
+}: AlignmentVotingProposalCardProps) {
+  const visibleOptions = options.slice(0, maxVisibleOptions)
+  const hiddenCount = Math.max(0, options.length - visibleOptions.length)
+
+  return (
+    <Card
+      data-testid={testID}
+      width="100%"
+      maxWidth={480}
+      gap="$4"
+      cursor={onPress ? 'pointer' : undefined}
+      onPress={onPress ? () => onPress(id) : undefined}
+      role={onPress ? 'button' : undefined}
+      aria-label={`Open proposal ${title}`}
+    >
+      <ProposalHeader categoryLabel={categoryLabel} />
+      <Heading level={4}>{title}</Heading>
+      <XStack alignItems="center" gap="$2">
+        <Icon name="info" size="xs" color="muted" />
+        <Text variant="caption" tone="secondary">
+          {summaryLabel}
+        </Text>
+      </XStack>
+      <YStack gap="$3">
+        {visibleOptions.map((option) => (
+          <RankedOptionRow key={option.id} option={option} />
+        ))}
+        {hiddenCount > 0 ? (
+          <Text variant="caption" tone="secondary">
+            +{hiddenCount} more options
+          </Text>
+        ) : null}
+      </YStack>
+    </Card>
+  )
+}
+
+export function OptimisticVotingProposalCard({
+  id,
+  categoryLabel,
+  title,
+  quorumLabel = 'Current vote quorum',
+  quorumReachedPercent,
+  voteSegments,
+  voters,
+  remainingVoterCountLabel,
+  onPress,
+  testID,
+}: OptimisticVotingProposalCardProps) {
+  return (
+    <Card
+      data-testid={testID}
+      width="100%"
+      maxWidth={480}
+      gap="$4"
+      cursor={onPress ? 'pointer' : undefined}
+      onPress={onPress ? () => onPress(id) : undefined}
+      role={onPress ? 'button' : undefined}
+      aria-label={`Open proposal ${title}`}
+    >
+      <ProposalHeader categoryLabel={categoryLabel} />
+      <Heading level={4}>{title}</Heading>
+      <YStack gap="$2">
+        <XStack alignItems="center" justifyContent="space-between" gap="$3">
+          <Text variant="caption" tone="secondary">
+            {quorumLabel}
+          </Text>
+          <Text variant="label" bold noWrap>
+            {clampPercentage(quorumReachedPercent)}% reached
+          </Text>
+        </XStack>
+        <Stack position="relative">
+          <Stack height={12} borderRadius="$full" backgroundColor="$backgroundPress" overflow="hidden">
+            <Stack width={`${clampPercentage(quorumReachedPercent)}%`} height="100%" backgroundColor="$backgroundHover" />
+          </Stack>
+          <Stack position="absolute" left={0} right={0} top={0} bottom={0}>
+            <StackedProgressBar segments={voteSegments} />
+          </Stack>
+        </Stack>
+      </YStack>
+      <VoterPreviewGroup voters={voters} remainingLabel={remainingVoterCountLabel} />
+      <VoteLegend segments={voteSegments} />
+    </Card>
+  )
+}