Add Superfluid Campaign GoodWidget

examples/html/src/shims/reactNativeSvg.tsx

@@ -0,0 +1,49 @@
+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
+}
+
+/** Web implementation for the react-native-svg primitives used by GoodWidget dependencies. */
+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. */
+export function Circle({ onPress, ...props }: SvgCircleProps) {
+  return <circle {...props} onClick={onPress} />
+}
+
+/** Static SVG primitives used by @tamagui/lucide-icons need no prop translation. */
+function createPassthroughSvgPrimitive(tag: string) {
+  return function SvgPrimitive(props: React.SVGProps<SVGElement>) {
+    return React.createElement(tag, props)
+  }
+}
+
+export const Path = createPassthroughSvgPrimitive('path')
+export const Line = createPassthroughSvgPrimitive('line')
+export const Rect = createPassthroughSvgPrimitive('rect')
+export const Polygon = createPassthroughSvgPrimitive('polygon')
+export const Polyline = createPassthroughSvgPrimitive('polyline')
+export const Ellipse = createPassthroughSvgPrimitive('ellipse')
+
+export { Svg }
+export default Svg

examples/html/vite.config.ts

@@ -1,4 +1,7 @@
 import { defineConfig } from 'vite'
+import { fileURLToPath } from 'node:url'
+
+const reactNativeSvgShim = fileURLToPath(new URL('./src/shims/reactNativeSvg.tsx', import.meta.url))
 
 export default defineConfig({
   define: {
@@ -8,6 +11,8 @@ export default defineConfig({
   resolve: {
     alias: {
       'react-native': 'react-native-web',
+      // react-native-svg's Fabric native modules are not available in react-native-web.
+      'react-native-svg': reactNativeSvgShim,
     },
   },
   build: {

examples/react-web/src/shims/reactNativeSvg.tsx

@@ -0,0 +1,49 @@
+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
+}
+
+/** Web implementation for the react-native-svg primitives used by GoodWidget dependencies. */
+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. */
+export function Circle({ onPress, ...props }: SvgCircleProps) {
+  return <circle {...props} onClick={onPress} />
+}
+
+/** Static SVG primitives used by @tamagui/lucide-icons need no prop translation. */
+function createPassthroughSvgPrimitive(tag: string) {
+  return function SvgPrimitive(props: React.SVGProps<SVGElement>) {
+    return React.createElement(tag, props)
+  }
+}
+
+export const Path = createPassthroughSvgPrimitive('path')
+export const Line = createPassthroughSvgPrimitive('line')
+export const Rect = createPassthroughSvgPrimitive('rect')
+export const Polygon = createPassthroughSvgPrimitive('polygon')
+export const Polyline = createPassthroughSvgPrimitive('polyline')
+export const Ellipse = createPassthroughSvgPrimitive('ellipse')
+
+export { Svg }
+export default Svg

examples/react-web/vite.config.ts

@@ -1,5 +1,8 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import { fileURLToPath } from 'node:url'
+
+const reactNativeSvgShim = fileURLToPath(new URL('./src/shims/reactNativeSvg.tsx', import.meta.url))
 
 export default defineConfig({
   plugins: [react()],
@@ -11,6 +14,8 @@ export default defineConfig({
   resolve: {
     alias: {
       'react-native': 'react-native-web',
+      // react-native-svg's Fabric native modules are not available in react-native-web.
+      'react-native-svg': reactNativeSvgShim,
     },
   },
   optimizeDeps: {

examples/storybook/package.json

@@ -18,6 +18,7 @@
     "@goodwidget/streaming-widget": "workspace:*",
     "@goodwidget/staking-migration-widget": "workspace:*",
     "@goodwidget/ai-credits-widget": "workspace:*",
+    "@goodwidget/superfluid-campaign-widget": "workspace:*",
     "@goodwidget/embed": "workspace:*",
     "react": "^18.3.0",
     "react-dom": "^18.3.0",

examples/storybook/src/shims/reactNativeSvg.tsx

@@ -13,8 +13,8 @@ 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) {
+/** Storybook web shim for the react-native-svg primitives used by the donut chart and @tamagui/lucide-icons. */
+function Svg({ accessibilityRole: _accessibilityRole, ...props }: SvgElementProps) {
   return <svg {...props} />
 }
 
@@ -30,3 +30,25 @@ export function G({ rotation, origin, transform, ...props }: SvgGroupProps) {
 export function Circle({ onPress, ...props }: SvgCircleProps) {
   return <circle {...props} onClick={onPress} />
 }
+
+/**
+ * @tamagui/lucide-icons' generated icon components import Path/Line/Rect/Polygon/
+ * Polyline/Ellipse by name from react-native-svg purely to render static shapes —
+ * unlike Circle/G above there are no react-native-specific props to translate, so
+ * one passthrough factory covers all of them instead of five near-identical wrappers.
+ */
+function createPassthroughSvgPrimitive(tag: string) {
+  return function SvgPrimitive(props: React.SVGProps<SVGElement>) {
+    return React.createElement(tag, props)
+  }
+}
+
+export const Path = createPassthroughSvgPrimitive('path')
+export const Line = createPassthroughSvgPrimitive('line')
+export const Rect = createPassthroughSvgPrimitive('rect')
+export const Polygon = createPassthroughSvgPrimitive('polygon')
+export const Polyline = createPassthroughSvgPrimitive('polyline')
+export const Ellipse = createPassthroughSvgPrimitive('ellipse')
+
+export { Svg }
+export default Svg