@sudobility/email-components-rn 1.0.0

package/src/EmailAnalytics.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 EmailAnalyticsProps extends ViewProps {
+  disabled?: boolean;
+  children?: React.ReactNode;
+}
+
+/**
+ * EmailAnalytics component for React Native
+ * Email analytics display container
+ */
+export const EmailAnalytics: React.FC<EmailAnalyticsProps> = ({
+  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="Email Analytics"
+      {...props}
+    >
+      {children || (
+        <Text className="text-gray-900 dark:text-white">
+          EmailAnalytics Component
+        </Text>
+      )}
+    </View>
+  );
+};

package/src/EmailCampaign.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 EmailCampaignProps extends ViewProps {
+  disabled?: boolean;
+  children?: React.ReactNode;
+}
+
+/**
+ * EmailCampaign component for React Native
+ * Email campaign display container
+ */
+export const EmailCampaign: React.FC<EmailCampaignProps> = ({
+  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="Email Campaign"
+      {...props}
+    >
+      {children || (
+        <Text className="text-gray-900 dark:text-white">
+          EmailCampaign Component
+        </Text>
+      )}
+    </View>
+  );
+};

package/src/EmailInputGroup.tsx

@@ -0,0 +1,204 @@
+import React from 'react';
+import { View, Text, TextInput, Pressable, type ViewProps } from 'react-native';
+import { cn } from '@sudobility/components-rn';
+
+export interface EmailInputFieldProps {
+  label: string;
+  value: string;
+  onChangeText: (value: string) => void;
+  placeholder?: string;
+  required?: boolean;
+  error?: string;
+  className?: string;
+}
+
+export const EmailInputField: React.FC<EmailInputFieldProps> = ({
+  label,
+  value,
+  onChangeText,
+  placeholder,
+  required = false,
+  error,
+  className,
+}) => {
+  return (
+    <View className={className}>
+      <Text className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+        {label} {required && <Text className="text-red-500">*</Text>}
+      </Text>
+      <TextInput
+        value={value}
+        onChangeText={onChangeText}
+        placeholder={placeholder}
+        placeholderTextColor="#9CA3AF"
+        keyboardType="email-address"
+        autoCapitalize="none"
+        autoCorrect={false}
+        accessibilityLabel={label}
+        className={cn(
+          'px-3 py-2 border rounded-md',
+          'bg-white dark:bg-gray-800',
+          'text-gray-900 dark:text-white',
+          error
+            ? 'border-red-300 dark:border-red-600'
+            : 'border-gray-300 dark:border-gray-600'
+        )}
+      />
+      {error && (
+        <Text className="mt-1 text-sm text-red-600 dark:text-red-400">
+          {error}
+        </Text>
+      )}
+    </View>
+  );
+};
+
+export interface CollapsibleEmailFieldProps extends EmailInputFieldProps {
+  isVisible: boolean;
+  onToggle: () => void;
+  showLabel?: string;
+  hideLabel?: string;
+}
+
+export const CollapsibleEmailField: React.FC<CollapsibleEmailFieldProps> = ({
+  isVisible,
+  onToggle,
+  showLabel,
+  hideLabel,
+  ...fieldProps
+}) => {
+  const toggleLabel = isVisible ? hideLabel : showLabel;
+
+  return (
+    <View>
+      <Pressable
+        onPress={onToggle}
+        accessibilityRole="button"
+        className="flex-row items-center mb-2"
+      >
+        <Text className="text-sm text-blue-600 dark:text-blue-400">
+          {isVisible ? '▲' : '▼'} {toggleLabel}
+        </Text>
+      </Pressable>
+
+      {isVisible && <EmailInputField {...fieldProps} />}
+    </View>
+  );
+};
+
+export interface EmailInputGroupProps extends ViewProps {
+  to: string;
+  onToChange: (value: string) => void;
+  cc?: string;
+  onCcChange?: (value: string) => void;
+  bcc?: string;
+  onBccChange?: (value: string) => void;
+  showCc?: boolean;
+  showBcc?: boolean;
+  onToggleCc?: () => void;
+  onToggleBcc?: () => void;
+  errors?: {
+    to?: string;
+    cc?: string;
+    bcc?: string;
+  };
+  labels?: {
+    to?: string;
+    cc?: string;
+    bcc?: string;
+    addCc?: string;
+    removeCc?: string;
+    addBcc?: string;
+    removeBcc?: string;
+  };
+  placeholders?: {
+    to?: string;
+    cc?: string;
+    bcc?: string;
+  };
+}
+
+/**
+ * EmailInputGroup component for React Native
+ * Group of email input fields with collapsible CC/BCC
+ */
+export const EmailInputGroup: React.FC<EmailInputGroupProps> = ({
+  to,
+  onToChange,
+  cc = '',
+  onCcChange,
+  bcc = '',
+  onBccChange,
+  showCc = false,
+  showBcc = false,
+  onToggleCc,
+  onToggleBcc,
+  errors = {},
+  className,
+  labels = {},
+  placeholders = {},
+  ...props
+}) => {
+  const defaultLabels = {
+    to: 'To',
+    cc: 'CC',
+    bcc: 'BCC',
+    addCc: 'Add CC',
+    removeCc: 'Remove CC',
+    addBcc: 'Add BCC',
+    removeBcc: 'Remove BCC',
+  };
+
+  const defaultPlaceholders = {
+    to: 'recipient@example.com',
+    cc: 'cc@example.com',
+    bcc: 'bcc@example.com',
+  };
+
+  const finalLabels = { ...defaultLabels, ...labels };
+  const finalPlaceholders = { ...defaultPlaceholders, ...placeholders };
+
+  return (
+    <View className={cn('gap-4', className)} {...props}>
+      {/* To Field - Always visible */}
+      <EmailInputField
+        label={finalLabels.to}
+        value={to}
+        onChangeText={onToChange}
+        placeholder={finalPlaceholders.to}
+        required
+        error={errors.to}
+      />
+
+      {/* CC Field - Collapsible */}
+      {onToggleCc && onCcChange && (
+        <CollapsibleEmailField
+          label={finalLabels.cc}
+          value={cc}
+          onChangeText={onCcChange}
+          placeholder={finalPlaceholders.cc}
+          error={errors.cc}
+          isVisible={showCc}
+          onToggle={onToggleCc}
+          showLabel={finalLabels.addCc}
+          hideLabel={finalLabels.removeCc}
+        />
+      )}
+
+      {/* BCC Field - Collapsible */}
+      {onToggleBcc && onBccChange && (
+        <CollapsibleEmailField
+          label={finalLabels.bcc}
+          value={bcc}
+          onChangeText={onBccChange}
+          placeholder={finalPlaceholders.bcc}
+          error={errors.bcc}
+          isVisible={showBcc}
+          onToggle={onToggleBcc}
+          showLabel={finalLabels.addBcc}
+          hideLabel={finalLabels.removeBcc}
+        />
+      )}
+    </View>
+  );
+};

package/src/EmailTemplate.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 EmailTemplateProps extends ViewProps {
+  disabled?: boolean;
+  onPress?: () => void;
+  children?: React.ReactNode;
+}
+
+/**
+ * EmailTemplate component for React Native
+ * Email template display container
+ */
+export const EmailTemplate: React.FC<EmailTemplateProps> = ({
+  className,
+  children,
+  disabled = false,
+  onPress,
+  ...props
+}) => {
+  return (
+    <Pressable
+      onPress={disabled ? undefined : onPress}
+      disabled={disabled}
+      accessibilityRole="button"
+      accessibilityLabel="Email Template"
+      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">
+          EmailTemplate Component
+        </Text>
+      )}
+    </Pressable>
+  );
+};

package/src/FreeEmailBanner.tsx

@@ -0,0 +1,167 @@
+import React from 'react';
+import { View, Text, Pressable, Linking, type ViewProps } from 'react-native';
+import { cn } from '@sudobility/components-rn';
+
+type BannerVariant = 'default' | 'compact' | 'minimal' | 'vibrant';
+type BannerSize = 'default' | 'compact' | 'large';
+
+export interface FreeEmailBannerProps extends ViewProps {
+  variant?: BannerVariant;
+  size?: BannerSize;
+  message?: string;
+  ctaText?: string;
+  ctaLink?: string;
+  showBadge?: boolean;
+  badgeText?: string;
+  onDismiss?: () => void;
+  isDismissible?: boolean;
+  dismissAriaLabel?: string;
+  onCtaPress?: () => void;
+}
+
+const getBannerStyle = (variant: BannerVariant) => {
+  switch (variant) {
+    case 'compact':
+      return 'bg-green-50 dark:bg-green-900/10 border-green-200 dark:border-green-800';
+    case 'minimal':
+      return 'bg-gray-50 dark:bg-gray-900/50 border-gray-200 dark:border-gray-700';
+    case 'vibrant':
+      return 'bg-blue-600 border-blue-700';
+    default:
+      return 'bg-green-100 dark:bg-green-900/20 border-green-200 dark:border-green-700';
+  }
+};
+
+const getSizeStyle = (size: BannerSize) => {
+  switch (size) {
+    case 'compact':
+      return 'py-3';
+    case 'large':
+      return 'py-6';
+    default:
+      return 'py-4';
+  }
+};
+
+const getTextStyle = (variant: BannerVariant) => {
+  switch (variant) {
+    case 'compact':
+      return 'text-green-700 dark:text-green-300';
+    case 'minimal':
+      return 'text-gray-700 dark:text-gray-300';
+    case 'vibrant':
+      return 'text-white';
+    default:
+      return 'text-green-800 dark:text-green-200';
+  }
+};
+
+const getButtonStyle = (variant: BannerVariant) => {
+  switch (variant) {
+    case 'compact':
+      return 'bg-green-600 active:bg-green-700';
+    case 'minimal':
+      return 'bg-blue-600 active:bg-blue-700';
+    case 'vibrant':
+      return 'bg-white active:bg-gray-100';
+    default:
+      return 'bg-green-600 active:bg-green-700';
+  }
+};
+
+const getButtonTextStyle = (variant: BannerVariant) => {
+  if (variant === 'vibrant') {
+    return 'text-blue-600';
+  }
+  return 'text-white';
+};
+
+/**
+ * FreeEmailBanner component for React Native
+ * Promotional banner for free email signup
+ */
+export const FreeEmailBanner: React.FC<FreeEmailBannerProps> = ({
+  className,
+  variant = 'default',
+  size = 'default',
+  message = 'Get Your Free Email Address - Start Using Web3 Email Today',
+  ctaText = 'Get Free Email',
+  ctaLink = '/connect',
+  showBadge = true,
+  badgeText = 'FREE',
+  onDismiss,
+  isDismissible = false,
+  dismissAriaLabel = 'Dismiss banner',
+  onCtaPress,
+  ...props
+}) => {
+  const handleCtaPress = () => {
+    if (onCtaPress) {
+      onCtaPress();
+    } else if (ctaLink.startsWith('http')) {
+      Linking.openURL(ctaLink);
+    }
+  };
+
+  return (
+    <View
+      className={cn(
+        'border-b px-4',
+        getBannerStyle(variant),
+        getSizeStyle(size),
+        className
+      )}
+      accessibilityLabel="Free Email Banner"
+      {...props}
+    >
+      <View className="items-center gap-4">
+        {isDismissible && onDismiss && (
+          <Pressable
+            onPress={onDismiss}
+            accessibilityRole="button"
+            accessibilityLabel={dismissAriaLabel}
+            className="absolute right-2 top-2 p-1 rounded-full"
+          >
+            <Text className="text-current opacity-60">✕</Text>
+          </Pressable>
+        )}
+
+        <View className="flex-row items-center justify-center flex-wrap gap-2">
+          {showBadge && (
+            <View
+              className={cn(
+                'px-3 py-1 rounded-full',
+                variant === 'vibrant' ? 'bg-white' : 'bg-green-500'
+              )}
+            >
+              <Text
+                className={cn(
+                  'text-xs font-bold',
+                  variant === 'vibrant' ? 'text-blue-600' : 'text-white'
+                )}
+              >
+                {badgeText}
+              </Text>
+            </View>
+          )}
+          <Text className={cn('font-semibold text-center', getTextStyle(variant))}>
+            {message}
+          </Text>
+        </View>
+
+        <Pressable
+          onPress={handleCtaPress}
+          accessibilityRole="button"
+          className={cn(
+            'px-6 py-2 rounded-lg',
+            getButtonStyle(variant)
+          )}
+        >
+          <Text className={cn('font-medium', getButtonTextStyle(variant))}>
+            {ctaText}
+          </Text>
+        </Pressable>
+      </View>
+    </View>
+  );
+};

package/src/SubscriberList.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 SubscriberListProps extends ViewProps {
+  disabled?: boolean;
+  children?: React.ReactNode;
+}
+
+/**
+ * SubscriberList component for React Native
+ * Email subscriber list display container
+ */
+export const SubscriberList: React.FC<SubscriberListProps> = ({
+  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="Subscriber List"
+      {...props}
+    >
+      {children || (
+        <Text className="text-gray-900 dark:text-white">
+          SubscriberList Component
+        </Text>
+      )}
+    </View>
+  );
+};

package/src/SubscriptionPlan.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 SubscriptionPlanProps extends ViewProps {
+  disabled?: boolean;
+  onPress?: () => void;
+  children?: React.ReactNode;
+}
+
+/**
+ * SubscriptionPlan component for React Native
+ * Subscription plan display container
+ */
+export const SubscriptionPlan: React.FC<SubscriptionPlanProps> = ({
+  className,
+  children,
+  disabled = false,
+  onPress,
+  ...props
+}) => {
+  return (
+    <Pressable
+      onPress={disabled ? undefined : onPress}
+      disabled={disabled}
+      accessibilityRole="button"
+      accessibilityLabel="Subscription Plan"
+      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">
+          SubscriptionPlan Component
+        </Text>
+      )}
+    </Pressable>
+  );
+};

package/src/index.ts

@@ -0,0 +1,27 @@
+/**
+ * @sudobility/email-components-rn
+ * React Native Email components for Sudobility
+ */
+
+export { AbTestEmail, type AbTestEmailProps } from './AbTestEmail';
+export { ContactCard, type ContactCardProps } from './ContactCard';
+export {
+  EmailAccountsList,
+  type EmailAccountsListProps,
+  type EmailAccount,
+  type WalletEmailGroup,
+} from './EmailAccountsList';
+export { EmailAnalytics, type EmailAnalyticsProps } from './EmailAnalytics';
+export { EmailCampaign, type EmailCampaignProps } from './EmailCampaign';
+export {
+  EmailInputGroup,
+  EmailInputField,
+  CollapsibleEmailField,
+  type EmailInputGroupProps,
+  type EmailInputFieldProps,
+  type CollapsibleEmailFieldProps,
+} from './EmailInputGroup';
+export { EmailTemplate, type EmailTemplateProps } from './EmailTemplate';
+export { FreeEmailBanner, type FreeEmailBannerProps } from './FreeEmailBanner';
+export { SubscriberList, type SubscriberListProps } from './SubscriberList';
+export { SubscriptionPlan, type SubscriptionPlanProps } from './SubscriptionPlan';

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;
+  }
+}