Add governance homepage presentational components

examples/storybook/.storybook/main.ts

@@ -2,11 +2,14 @@
  * Storybook main configuration.
  *
  * - Framework: @storybook/react-vite
- * - Addons: essentials (controls, docs, actions, viewport) + interactions (play functions)
+ * - Addons: essentials (controls, docs, actions) + interactions (play functions)
  * - viteFinal: mirrors the react-native-web + Tamagui settings from examples/react-web
  */
+import { fileURLToPath } from 'node:url'
 import type { StorybookConfig } from '@storybook/react-vite'
 
+const reactNativeSvgShim = fileURLToPath(new URL('../src/shims/reactNativeSvg.tsx', import.meta.url))
+
 const config: StorybookConfig = {
   stories: ['../src/**/*.stories.@(ts|tsx)'],
   addons: ['@storybook/addon-essentials', '@storybook/addon-interactions'],
@@ -18,7 +21,7 @@ const config: StorybookConfig = {
     autodocs: 'tag',
   },
   viteFinal: async (config) => {
-    // Mirror the Vite settings from examples/react-web so Tamagui + react-native-web resolve
+    // Mirror the Vite settings from examples/react-web so Tamagui + react-native-web resolve.
     config.define = {
       ...config.define,
       global: 'globalThis',
@@ -30,6 +33,7 @@ const config: StorybookConfig = {
       alias: {
         ...(config.resolve?.alias as Record<string, string> | undefined),
         'react-native': 'react-native-web',
+        'react-native-svg': reactNativeSvgShim,
       },
     }
     config.optimizeDeps = {

examples/storybook/.storybook/preview.tsx

@@ -11,6 +11,7 @@ import { MiniAppShell } from '@goodwidget/ui'
 interface StoryGoodWidgetParameters {
   config?: GoodWidgetConfig
   defaultTheme?: 'light' | 'dark'
+  useProvider?: boolean
   useShell?: boolean
 }
 
@@ -26,16 +27,20 @@ const preview: Preview = {
     (Story, context) => {
       const params = (context.parameters.goodWidgetProvider ?? {}) as StoryGoodWidgetParameters
       const story = <Story />
+      const content =
+        params.useShell === false ? (
+          story
+        ) : (
+          <MiniAppShell title="GoodWidgetDemos" headerRight={undefined}>
+            {story}
+          </MiniAppShell>
+        )
 
-      return (
+      return params.useProvider === false ? (
+        content
+      ) : (
         <GoodWidgetProvider config={params.config} defaultTheme={params.defaultTheme ?? 'dark'}>
-          {params.useShell === false ? (
-            story
-          ) : (
-            <MiniAppShell title="GoodWidgetDemos" headerRight={undefined}>
-              {story}
-            </MiniAppShell>
-          )}
+          {content}
         </GoodWidgetProvider>
       )
     },

examples/storybook/package.json

@@ -16,7 +16,8 @@
     "react": "^18.3.0",
     "react-dom": "^18.3.0",
     "react-native-web": "^0.19.13",
-    "viem": "^2.0.0"
+    "viem": "^2.0.0",
+    "@goodwidget/governance-widget": "workspace:*"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "^8.6.17",

examples/storybook/src/shims/reactNativeSvg.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+
+type SvgElementProps = React.SVGProps<SVGSVGElement> & {
+  accessibilityRole?: string
+}
+
+type SvgGroupProps = React.SVGProps<SVGGElement> & {
+  rotation?: string | number
+  origin?: string
+}
+
+type SvgCircleProps = React.SVGProps<SVGCircleElement> & {
+  onPress?: () => void
+}
+
+/** Storybook web shim for the react-native-svg primitives used by the donut chart. */
+export default function Svg({ accessibilityRole: _accessibilityRole, ...props }: SvgElementProps) {
+  return <svg {...props} />
+}
+
+/** Mirrors react-native-svg's G transform props with standard SVG attributes. */
+export function G({ rotation, origin, transform, ...props }: SvgGroupProps) {
+  const rotationTransform = rotation ? `rotate(${rotation} ${origin ?? ''})`.trim() : undefined
+  const combinedTransform = [transform, rotationTransform].filter(Boolean).join(' ')
+
+  return <g {...props} transform={combinedTransform || undefined} />
+}
+
+/** Maps react-native-svg onPress to the browser SVG onClick event for stories. */
+export function Circle({ onPress, ...props }: SvgCircleProps) {
+  return <circle {...props} onClick={onPress} />
+}