@sudobility/marketing-components-rn 1.0.0

package/src/InternalLinkClusters.tsx

@@ -0,0 +1,193 @@
+import React from 'react';
+import { View, Text, Pressable, type ViewProps } from 'react-native';
+import { cn } from '@sudobility/components-rn';
+
+export interface InternalLinkProps {
+  to: string;
+  children: React.ReactNode;
+  className?: string;
+  variant?: 'primary' | 'secondary' | 'subtle';
+  onPress?: (url: string) => void;
+}
+
+const linkVariants = {
+  primary: 'text-blue-600 dark:text-blue-400',
+  secondary: 'text-green-600 dark:text-green-400',
+  subtle: 'text-gray-600 dark:text-gray-400',
+};
+
+export const InternalLink: React.FC<InternalLinkProps> = ({
+  to,
+  children,
+  className,
+  variant = 'primary',
+  onPress,
+}) => (
+  <Pressable
+    onPress={() => onPress?.(to)}
+    accessibilityRole="link"
+    accessibilityLabel={typeof children === 'string' ? `Navigate to ${children}` : undefined}
+  >
+    <Text className={cn('underline font-medium', linkVariants[variant], className)}>
+      {children}
+    </Text>
+  </Pressable>
+);
+
+type ClusterType = 'gettingStarted' | 'benefits' | 'technical' | 'integration';
+
+export interface TopicClusterLinksProps extends ViewProps {
+  cluster: ClusterType;
+  context?: string;
+  onLinkPress?: (url: string) => void;
+}
+
+const WEB3_EMAIL_CLUSTERS: Record<ClusterType, Record<string, string>> = {
+  gettingStarted: {
+    documentation: '/document#getting-started',
+    connect: '/connect',
+    features: '/document#email-management',
+  },
+  benefits: {
+    users: '/web3-users',
+    projects: '/web3-projects',
+    security: '/document#technical-details',
+    nameService: '/document#name-service-subscription',
+  },
+  technical: {
+    documentation: '/document',
+    apiDocs: '/document#api-documentation',
+    smartContracts: '/document#smart-contracts',
+    security: '/document#technical-details',
+  },
+  integration: {
+    projects: '/web3-projects',
+    delegation: '/document#email-delegation',
+    nameService: '/document#name-service-subscription',
+    troubleshooting: '/document#troubleshooting',
+  },
+};
+
+const LINK_TEXTS: Record<ClusterType, Record<string, string>> = {
+  gettingStarted: {
+    documentation: 'Learn how it works',
+    connect: 'Get started now',
+    features: 'Explore features',
+  },
+  benefits: {
+    users: 'Benefits for users',
+    projects: 'For Web3 projects',
+    security: 'Security details',
+    nameService: 'ENS/SNS domains',
+  },
+  technical: {
+    documentation: 'Full documentation',
+    apiDocs: 'API reference',
+    smartContracts: 'Smart contract integration',
+    security: 'Technical security',
+  },
+  integration: {
+    projects: 'Integration examples',
+    delegation: 'Email delegation',
+    nameService: 'Domain setup',
+    troubleshooting: 'Troubleshooting guide',
+  },
+};
+
+export const TopicClusterLinks: React.FC<TopicClusterLinksProps> = ({
+  cluster,
+  className,
+  onLinkPress,
+  ...props
+}) => {
+  const links = WEB3_EMAIL_CLUSTERS[cluster];
+  const texts = LINK_TEXTS[cluster];
+
+  return (
+    <View className={cn('flex-row flex-wrap gap-2', className)} {...props}>
+      {Object.entries(links).map(([key, url], index) => (
+        <React.Fragment key={key}>
+          <InternalLink to={url} variant="primary" onPress={onLinkPress}>
+            {texts[key]}
+          </InternalLink>
+          {index < Object.keys(links).length - 1 && (
+            <Text className="text-gray-400"> • </Text>
+          )}
+        </React.Fragment>
+      ))}
+    </View>
+  );
+};
+
+export interface RelatedLinksProps extends ViewProps {
+  title?: string;
+  links: Array<{
+    text: string;
+    url: string;
+    variant?: 'primary' | 'secondary' | 'subtle';
+  }>;
+  onLinkPress?: (url: string) => void;
+}
+
+export const RelatedLinks: React.FC<RelatedLinksProps> = ({
+  title = 'Related:',
+  links,
+  className,
+  onLinkPress,
+  ...props
+}) => (
+  <View
+    className={cn(
+      'mt-4 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800',
+      className
+    )}
+    {...props}
+  >
+    <View className="flex-row flex-wrap items-center gap-2">
+      <Text className="text-sm font-medium text-blue-900 dark:text-blue-200">
+        {title}
+      </Text>
+      {links.map((link, index) => (
+        <React.Fragment key={index}>
+          <InternalLink
+            to={link.url}
+            variant={link.variant || 'primary'}
+            onPress={onLinkPress}
+          >
+            {link.text}
+          </InternalLink>
+          {index < links.length - 1 && (
+            <Text className="text-gray-400"> • </Text>
+          )}
+        </React.Fragment>
+      ))}
+    </View>
+  </View>
+);
+
+export const generateContextualLinks = (pageType: string, _userStatus?: string) => {
+  const baseLinks: Record<string, Array<{ text: string; url: string }>> = {
+    homepage: [
+      { text: 'How it works', url: '/document#getting-started' },
+      { text: 'User benefits', url: '/web3-users' },
+      { text: 'For projects', url: '/web3-projects' },
+    ],
+    documentation: [
+      { text: 'Get started', url: '/connect' },
+      { text: 'User guide', url: '/web3-users' },
+      { text: 'API docs', url: '/document#api-documentation' },
+    ],
+    users: [
+      { text: 'Start now', url: '/connect' },
+      { text: 'Documentation', url: '/document' },
+      { text: 'For projects', url: '/web3-projects' },
+    ],
+    projects: [
+      { text: 'API integration', url: '/document#api-documentation' },
+      { text: 'Smart contracts', url: '/document#smart-contracts' },
+      { text: 'User benefits', url: '/web3-users' },
+    ],
+  };
+
+  return baseLinks[pageType] || [];
+};

package/src/NpsSurvey.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Text, Pressable, type ViewProps } from 'react-native';
+import { cn } from '@sudobility/components-rn';
+
+export interface NpsSurveyProps extends ViewProps {
+  disabled?: boolean;
+  onPress?: () => void;
+  children?: React.ReactNode;
+}
+
+/**
+ * NpsSurvey component for React Native
+ * NPS survey display
+ */
+export const NpsSurvey: React.FC<NpsSurveyProps> = ({
+  className,
+  children,
+  disabled = false,
+  onPress,
+  ...props
+}) => {
+  return (
+    <Pressable
+      onPress={disabled ? undefined : onPress}
+      disabled={disabled}
+      accessibilityRole="button"
+      accessibilityLabel="NPS Survey"
+      accessibilityState={{ disabled }}
+      className={cn(
+        'p-4 rounded-lg border',
+        'bg-white dark:bg-gray-900',
+        'border-gray-200 dark:border-gray-700',
+        disabled && 'opacity-50',
+        'active:bg-gray-50 dark:active:bg-gray-800',
+        className
+      )}
+      {...props}
+    >
+      {children || (
+        <Text className="text-gray-900 dark:text-white">
+          NpsSurvey Component
+        </Text>
+      )}
+    </Pressable>
+  );
+};

package/src/SalesReport.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { View, Text, type ViewProps } from 'react-native';
+import { cn } from '@sudobility/components-rn';
+
+export interface SalesReportProps extends ViewProps {
+  disabled?: boolean;
+  children?: React.ReactNode;
+}
+
+/**
+ * SalesReport component for React Native
+ * Sales report display container
+ */
+export const SalesReport: React.FC<SalesReportProps> = ({
+  className,
+  children,
+  disabled,
+  ...props
+}) => {
+  return (
+    <View
+      className={cn(
+        'p-4 rounded-lg border',
+        'bg-white dark:bg-gray-900',
+        'border-gray-200 dark:border-gray-700',
+        disabled && 'opacity-50',
+        className
+      )}
+      accessibilityLabel="Sales Report"
+      {...props}
+    >
+      {children || (
+        <Text className="text-gray-900 dark:text-white">
+          SalesReport Component
+        </Text>
+      )}
+    </View>
+  );
+};

package/src/TestimonialSlider.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Text, Pressable, type ViewProps } from 'react-native';
+import { cn } from '@sudobility/components-rn';
+
+export interface TestimonialSliderProps extends ViewProps {
+  disabled?: boolean;
+  onPress?: () => void;
+  children?: React.ReactNode;
+}
+
+/**
+ * TestimonialSlider component for React Native
+ * Testimonial slider display
+ */
+export const TestimonialSlider: React.FC<TestimonialSliderProps> = ({
+  className,
+  children,
+  disabled = false,
+  onPress,
+  ...props
+}) => {
+  return (
+    <Pressable
+      onPress={disabled ? undefined : onPress}
+      disabled={disabled}
+      accessibilityRole="button"
+      accessibilityLabel="Testimonial Slider"
+      accessibilityState={{ disabled }}
+      className={cn(
+        'p-4 rounded-lg border',
+        'bg-white dark:bg-gray-900',
+        'border-gray-200 dark:border-gray-700',
+        disabled && 'opacity-50',
+        'active:bg-gray-50 dark:active:bg-gray-800',
+        className
+      )}
+      {...props}
+    >
+      {children || (
+        <Text className="text-gray-900 dark:text-white">
+          TestimonialSlider Component
+        </Text>
+      )}
+    </Pressable>
+  );
+};

package/src/UseCaseGrid.tsx

@@ -0,0 +1,128 @@
+import React from 'react';
+import { View, Text, FlatList, type ViewProps } from 'react-native';
+import { cn } from '@sudobility/components-rn';
+
+type UseCaseColor = 'blue' | 'green' | 'purple' | 'orange' | 'pink' | 'gray';
+
+export interface UseCase {
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+  examples: string[];
+  color?: UseCaseColor;
+}
+
+export interface UseCaseGridProps extends ViewProps {
+  title?: string;
+  description?: string;
+  useCases: UseCase[];
+  columns?: 2 | 3 | 4;
+}
+
+const colorClasses: Record<UseCaseColor, string> = {
+  blue: 'text-blue-600 dark:text-blue-400',
+  green: 'text-green-600 dark:text-green-400',
+  purple: 'text-purple-600 dark:text-purple-400',
+  orange: 'text-orange-600 dark:text-orange-400',
+  pink: 'text-pink-600 dark:text-pink-400',
+  gray: 'text-gray-600 dark:text-gray-400',
+};
+
+const bulletColors: Record<UseCaseColor, string> = {
+  blue: 'bg-blue-500',
+  green: 'bg-green-500',
+  purple: 'bg-purple-500',
+  orange: 'bg-orange-500',
+  pink: 'bg-pink-500',
+  gray: 'bg-gray-500',
+};
+
+interface UseCaseCardProps {
+  useCase: UseCase;
+}
+
+const UseCaseCard: React.FC<UseCaseCardProps> = ({ useCase }) => {
+  const iconColor = useCase.color ? colorClasses[useCase.color] : colorClasses.blue;
+  const bulletColor = useCase.color ? bulletColors[useCase.color] : bulletColors.blue;
+
+  return (
+    <View className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700 mb-4 mx-2">
+      <View className={cn('mb-4', iconColor)}>{useCase.icon}</View>
+
+      <Text className="text-xl font-semibold text-gray-900 dark:text-white mb-3">
+        {useCase.title}
+      </Text>
+
+      <Text className="text-gray-600 dark:text-gray-300 mb-4">
+        {useCase.description}
+      </Text>
+
+      {useCase.examples && useCase.examples.length > 0 && (
+        <View>
+          <Text className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
+            Examples:
+          </Text>
+          <View className="gap-1">
+            {useCase.examples.map((example, exampleIndex) => (
+              <View key={exampleIndex} className="flex-row items-start">
+                <View
+                  className={cn(
+                    'w-1.5 h-1.5 rounded-full mt-2 mr-2',
+                    bulletColor
+                  )}
+                />
+                <Text className="text-sm text-gray-600 dark:text-gray-400 flex-1">
+                  {example}
+                </Text>
+              </View>
+            ))}
+          </View>
+        </View>
+      )}
+    </View>
+  );
+};
+
+/**
+ * UseCaseGrid component for React Native
+ * Grid display of use cases
+ */
+export const UseCaseGrid: React.FC<UseCaseGridProps> = ({
+  title,
+  description,
+  useCases,
+  columns = 2,
+  className,
+  ...props
+}) => {
+  return (
+    <View className={cn('py-8 px-4', className)} {...props}>
+      {(title || description) && (
+        <View className="items-center mb-8">
+          {title && (
+            <Text className="text-2xl font-bold text-gray-900 dark:text-white mb-4 text-center">
+              {title}
+            </Text>
+          )}
+          {description && (
+            <Text className="text-lg text-gray-600 dark:text-gray-300 text-center max-w-lg">
+              {description}
+            </Text>
+          )}
+        </View>
+      )}
+
+      <FlatList
+        data={useCases}
+        keyExtractor={(_, index) => index.toString()}
+        numColumns={columns > 2 ? 2 : columns}
+        renderItem={({ item }) => (
+          <View className={columns > 2 ? 'flex-1' : 'flex-1'}>
+            <UseCaseCard useCase={item} />
+          </View>
+        )}
+        scrollEnabled={false}
+      />
+    </View>
+  );
+};

package/src/WelcomeScreen.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { View, Text, type ViewProps } from 'react-native';
+import { cn, Button } from '@sudobility/components-rn';
+
+export interface WelcomeScreenProps extends ViewProps {
+  title: string;
+  subtitle?: string;
+  description?: string;
+  illustration?: React.ReactNode;
+  primaryButtonText?: string;
+  secondaryButtonText?: string;
+  onPrimaryPress?: () => void;
+  onSecondaryPress?: () => void;
+}
+
+/**
+ * Welcome screen component for onboarding flows
+ */
+export const WelcomeScreen: React.FC<WelcomeScreenProps> = ({
+  title,
+  subtitle,
+  description,
+  illustration,
+  primaryButtonText = 'Get Started',
+  secondaryButtonText,
+  onPrimaryPress,
+  onSecondaryPress,
+  className,
+  ...props
+}) => {
+  return (
+    <View
+      className={cn(
+        'flex-1 items-center justify-center px-6 py-12',
+        className
+      )}
+      {...props}
+    >
+      {illustration && (
+        <View className="mb-8">{illustration}</View>
+      )}
+
+      {subtitle && (
+        <Text className="text-sm font-medium text-blue-600 dark:text-blue-400 mb-2 uppercase tracking-wide">
+          {subtitle}
+        </Text>
+      )}
+
+      <Text className="text-3xl font-bold text-gray-900 dark:text-white text-center mb-4">
+        {title}
+      </Text>
+
+      {description && (
+        <Text className="text-base text-gray-600 dark:text-gray-400 text-center mb-8 max-w-sm">
+          {description}
+        </Text>
+      )}
+
+      <View className="w-full max-w-xs gap-3">
+        <Button
+          variant="primary"
+          size="lg"
+          onPress={onPrimaryPress}
+          className="w-full"
+        >
+          {primaryButtonText}
+        </Button>
+
+        {secondaryButtonText && (
+          <Button
+            variant="ghost"
+            size="lg"
+            onPress={onSecondaryPress}
+            className="w-full"
+          >
+            {secondaryButtonText}
+          </Button>
+        )}
+      </View>
+    </View>
+  );
+};

package/src/index.ts

@@ -0,0 +1,32 @@
+/**
+ * @sudobility/marketing-components-rn
+ * React Native Marketing components for Sudobility
+ */
+
+export { CrmDashboard, type CrmDashboardProps } from './CrmDashboard';
+export { CtaBanner, type CtaBannerProps } from './CtaBanner';
+export { FeatureListItem, type FeatureListItemProps } from './FeatureListItem';
+export { FeatureSpotlight, type FeatureSpotlightProps } from './FeatureSpotlight';
+export {
+  HeroBannerWithBadge,
+  type HeroBannerWithBadgeProps,
+  type ButtonConfig,
+} from './HeroBannerWithBadge';
+export {
+  InternalLink,
+  TopicClusterLinks,
+  RelatedLinks,
+  generateContextualLinks,
+  type InternalLinkProps,
+  type TopicClusterLinksProps,
+  type RelatedLinksProps,
+} from './InternalLinkClusters';
+export { NpsSurvey, type NpsSurveyProps } from './NpsSurvey';
+export { SalesReport, type SalesReportProps } from './SalesReport';
+export { TestimonialSlider, type TestimonialSliderProps } from './TestimonialSlider';
+export {
+  UseCaseGrid,
+  type UseCaseGridProps,
+  type UseCase,
+} from './UseCaseGrid';
+export { WelcomeScreen, type WelcomeScreenProps } from './WelcomeScreen';

package/src/nativewind.d.ts

@@ -0,0 +1,23 @@
+// Type declarations for NativeWind className prop
+import 'react-native';
+
+declare module 'react-native' {
+  interface ViewProps {
+    className?: string;
+  }
+  interface TextProps {
+    className?: string;
+  }
+  interface ImageProps {
+    className?: string;
+  }
+  interface PressableProps {
+    className?: string;
+  }
+  interface TouchableOpacityProps {
+    className?: string;
+  }
+  interface ScrollViewProps {
+    className?: string;
+  }
+}