create-stackr 0.2.0

package/templates/base/mobile/src/components/ui/PaywallLayout.tsx

@@ -0,0 +1,311 @@
+import React, { useMemo } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  SafeAreaView,
+  TouchableOpacity,
+  ScrollView,
+  KeyboardAvoidingView,
+  Platform,
+} from 'react-native';
+import { IconSymbol } from './IconSymbol';
+import { useAppTheme, AppTheme } from '@/context/ThemeContext';
+import { createTheme } from '@/constants/Theme';
+import { responsive, fontSize, getSpacing } from '@/utils/responsive';
+
+type ThemeType = 'light' | 'dark';
+
+interface PaywallLayoutProps {
+  children?: React.ReactNode; // For the image/content area
+  title: string;
+  subtitle: string;
+  theme?: ThemeType;
+  onContinue: () => void;
+  continueText?: string;
+  footerContent?: React.ReactNode; // For billing info and footer links in paywall
+  continueDisabled?: boolean;
+  continueLoading?: boolean;
+  loadingContent?: React.ReactNode;
+  middleContent?: React.ReactNode; // For subscription plans in paywall
+  onBack?: () => void; // Back button functionality for in-app use
+}
+
+export default function PaywallLayout({
+  children,
+  title,
+  subtitle,
+  theme: themeProp = 'light',
+  onContinue,
+  continueText = 'Continue',
+  footerContent,
+  continueDisabled = false,
+  continueLoading = false,
+  loadingContent,
+  middleContent,
+  onBack,
+}: PaywallLayoutProps) {
+  // Get reactive theme, but allow prop override for backwards compatibility
+  const contextTheme = useAppTheme();
+  const theme = themeProp === 'dark' ? createTheme('dark') : contextTheme;
+  const styles = useMemo(() => createStyles(theme), [theme]);
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <KeyboardAvoidingView
+        style={styles.keyboardAvoidingView}
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      >
+        {/* Back Button */}
+        {onBack && (
+          <TouchableOpacity
+            style={styles.backButton}
+            onPress={onBack}
+            activeOpacity={0.7}
+          >
+            <IconSymbol
+              name="chevron.left"
+              size={responsive.moderateScale(24)}
+              color={theme.colors.icon}
+            />
+          </TouchableOpacity>
+        )}
+
+        <View style={styles.content}>
+        {loadingContent ? (
+          <View style={styles.loadingWrapper}>
+            {loadingContent}
+          </View>
+        ) : (
+          <>
+            {/* Scrollable content area */}
+            <ScrollView
+              style={styles.scrollView}
+              contentContainerStyle={styles.scrollContent}
+              showsVerticalScrollIndicator={false}
+              bounces={false}
+            >
+              {/* Top Section - Image/Content Area */}
+              <View style={styles.topSection}>
+                {children || (
+                  <View style={styles.imagePlaceholder}>
+                    {/* Default placeholder */}
+                  </View>
+                )}
+              </View>
+
+              {/* Text Content */}
+              <View style={styles.textContainer}>
+                <Text style={styles.title}>{title}</Text>
+                <Text style={styles.subtitle}>{subtitle}</Text>
+              </View>
+
+              {/* Middle Content - Subscription Plans (only in paywall) */}
+              {middleContent && (
+                <View style={styles.middleContentWrapper}>
+                  {middleContent}
+                </View>
+              )}
+
+              {/* Bottom padding to ensure content doesn't overlap with fixed bottom */}
+              <View style={styles.bottomPadding} />
+            </ScrollView>
+
+            {/* Fixed Bottom Content - Background and spacing */}
+            <View style={[
+              styles.fixedBottomContent,
+              footerContent ? styles.fixedBottomContentWithFooter : styles.fixedBottomContentNoFooter
+            ]}>
+              {/* Footer Content (billing info, links) - positioned at bottom */}
+              {footerContent && (
+                <View style={styles.footerContentWrapper}>
+                  {footerContent}
+                </View>
+              )}
+            </View>
+
+            {/* Continue Button - Fixed position from bottom */}
+            <View style={styles.buttonContainer}>
+              <TouchableOpacity
+                style={[
+                  styles.continueButton,
+                  (continueDisabled || continueLoading) && styles.continueButtonDisabled
+                ]}
+                onPress={onContinue}
+                activeOpacity={continueDisabled || continueLoading ? 1 : 0.7}
+                disabled={continueDisabled || continueLoading}
+              >
+                <View style={styles.buttonSpacer} />
+                <Text style={styles.continueButtonText}>{continueText}</Text>
+                <IconSymbol
+                  name="arrow.right"
+                  size={20}
+                  color={theme.colors.textInverse}
+                />
+              </TouchableOpacity>
+            </View>
+          </>
+        )}
+        </View>
+      </KeyboardAvoidingView>
+    </SafeAreaView>
+  );
+}
+
+const createStyles = (theme: AppTheme) => {
+  const sectionHeights = responsive.getSectionHeights();
+  const imageSize = responsive.getImageContainerSize();
+
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: theme.colors.background,
+    },
+    keyboardAvoidingView: {
+      flex: 1,
+    },
+    backButton: {
+      position: 'absolute',
+      top: responsive.verticalScale(60),
+      left: getSpacing(24),
+      width: responsive.scale(44),
+      height: responsive.scale(44),
+      backgroundColor: theme.colors.backgroundSecondary,
+      borderRadius: responsive.scale(22),
+      justifyContent: 'center',
+      alignItems: 'center',
+      zIndex: 10,
+      ...theme.shadows.small,
+    },
+    content: {
+      flex: 1,
+      paddingHorizontal: getSpacing(24),
+    },
+
+    // ScrollView styles
+    scrollView: {
+      flex: 1,
+    },
+    scrollContent: {
+      flexGrow: 1,
+      paddingTop: getSpacing(16),
+    },
+
+    // Top Section - Image area
+    topSection: {
+      height: sectionHeights.topSection,
+      justifyContent: 'center',
+      alignItems: 'center',
+      minHeight: responsive.verticalScale(200),
+    },
+
+    // Image placeholder
+    imagePlaceholder: {
+      width: imageSize.width,
+      height: imageSize.height,
+      backgroundColor: theme.colors.backgroundTertiary,
+      borderRadius: responsive.scale(20),
+      borderWidth: 2,
+      borderColor: theme.colors.borderLight,
+      borderStyle: 'dashed',
+    },
+
+    // Text content
+    textContainer: {
+      alignItems: 'center',
+      paddingHorizontal: responsive.scale(20),
+      marginBottom: responsive.scale(16),
+    },
+    title: {
+      fontSize: fontSize(24),
+      fontWeight: '700',
+      color: theme.colors.text,
+      textAlign: 'center',
+      lineHeight: fontSize(30),
+      marginTop: responsive.scale(-12),
+      marginBottom: responsive.scale(8),
+    },
+    subtitle: {
+      fontSize: fontSize(16),
+      color: theme.colors.textSecondary,
+      textAlign: 'center',
+      lineHeight: fontSize(22),
+    },
+
+    // Middle content wrapper (for subscription plans)
+    middleContentWrapper: {
+      marginTop: getSpacing(16),
+      marginBottom: getSpacing(12),
+      flex: 1,
+      justifyContent: 'center',
+    },
+
+    // Bottom padding for ScrollView to prevent content overlap with fixed bottom
+    bottomPadding: {
+      height: responsive.verticalScale(140),
+    },
+
+    // Fixed bottom content container
+    fixedBottomContent: {
+      position: 'absolute',
+      bottom: 0,
+      left: 0,
+      right: 0,
+      backgroundColor: theme.colors.background,
+      paddingHorizontal: getSpacing(24),
+      paddingTop: getSpacing(20),
+    },
+    fixedBottomContentWithFooter: {
+      paddingBottom: 0,
+    },
+    fixedBottomContentNoFooter: {
+      paddingBottom: getSpacing(20),
+    },
+
+    // Continue button - Fixed position from bottom
+    buttonContainer: {
+      position: 'absolute',
+      bottom: responsive.getButtonBottomPosition(),
+      left: getSpacing(24),
+      right: getSpacing(24),
+    },
+    continueButton: {
+      backgroundColor: theme.colors.primary,
+      borderRadius: responsive.scale(25),
+      paddingVertical: responsive.scale(18),
+      paddingHorizontal: getSpacing(32),
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      ...theme.shadows.button,
+    },
+    continueButtonDisabled: {
+      backgroundColor: theme.colors.textLight,
+      ...theme.shadows.small,
+    },
+    continueButtonText: {
+      fontSize: fontSize(16),
+      fontWeight: '600',
+      color: theme.colors.textInverse,
+      position: 'absolute',
+      left: 0,
+      right: 0,
+      textAlign: 'center',
+    },
+    buttonSpacer: {
+      width: responsive.scale(20),
+    },
+
+    // Footer content wrapper
+    footerContentWrapper: {
+      alignItems: 'center',
+    },
+
+    // Loading wrapper
+    loadingWrapper: {
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+  });
+};

package/templates/base/mobile/src/components/ui/Skeleton.tsx

@@ -0,0 +1,58 @@
+import React, { useEffect, useRef, useMemo } from 'react';
+import { View, StyleSheet, Animated, ViewStyle } from 'react-native';
+import { useAppTheme, AppTheme } from '@/context/ThemeContext';
+
+interface SkeletonProps {
+  width?: number | string;
+  height?: number;
+  borderRadius?: number;
+  style?: ViewStyle;
+}
+
+export const Skeleton: React.FC<SkeletonProps> = ({
+  width = '100%', height = 20, borderRadius, style,
+}) => {
+  const theme = useAppTheme();
+  const styles = useMemo(() => createStyles(theme), [theme]);
+  const shimmerAnim = useRef(new Animated.Value(0)).current;
+
+  const resolvedBorderRadius = borderRadius ?? theme.borderRadius.md;
+
+  useEffect(() => {
+    const animation = Animated.loop(
+      Animated.sequence([
+        Animated.timing(shimmerAnim, { toValue: 1, duration: 1000, useNativeDriver: true }),
+        Animated.timing(shimmerAnim, { toValue: 0, duration: 1000, useNativeDriver: true }),
+      ])
+    );
+    animation.start();
+    return () => animation.stop();
+  }, [shimmerAnim]);
+
+  const opacity = shimmerAnim.interpolate({ inputRange: [0, 1], outputRange: [0.3, 0.7] });
+
+  return (
+    <Animated.View style={[styles.skeleton, { width, height, borderRadius: resolvedBorderRadius, opacity }, style]} />
+  );
+};
+
+export const SkeletonText: React.FC<{ lines?: number; style?: ViewStyle }> = ({ lines = 3, style }) => {
+  const theme = useAppTheme();
+
+  return (
+    <View style={style}>
+      {Array.from({ length: lines }).map((_, i) => (
+        <Skeleton
+          key={i}
+          height={16}
+          width={i === lines - 1 ? '60%' : '100%'}
+          style={i < lines - 1 ? { marginBottom: theme.spacing[2] } : undefined}
+        />
+      ))}
+    </View>
+  );
+};
+
+const createStyles = (theme: AppTheme) => StyleSheet.create({
+  skeleton: { backgroundColor: theme.colors.backgroundTertiary },
+});

package/templates/base/mobile/src/components/ui/index.ts

@@ -0,0 +1,6 @@
+// Export all UI components
+export * from './Button';
+export * from './Input';
+export * from './LoadingSpinner';
+export * from './Card';
+export * from './Skeleton';

package/templates/base/mobile/src/constants/Theme.ts

@@ -0,0 +1,163 @@
+/**
+ * Design system for Mobile Platform
+ * Unified theme with light/dark mode support
+ */
+
+import { Platform } from 'react-native';
+
+// Shared palette
+const palette = {
+  neutral: {
+    0: '#ffffff',
+    50: '#fafafa',
+    100: '#f4f4f5',
+    200: '#e4e4e7',
+    300: '#d4d4d8',
+    400: '#a1a1aa',
+    500: '#71717a',
+    600: '#52525b',
+    700: '#3f3f46',
+    800: '#27272a',
+    900: '#18181b',
+    950: '#09090b',
+  },
+  semantic: {
+    success: '#22c55e',
+    warning: '#f59e0b',
+    error: '#ef4444',
+    info: '#3b82f6',
+  },
+};
+
+const spacing = {
+  1: 4, 2: 8, 3: 12, 4: 16,
+  5: 20, 6: 24, 8: 32, 10: 40,
+  12: 48, 16: 64, 20: 80, 24: 96,
+};
+
+const borderRadius = {
+  none: 0, sm: 4, md: 8, lg: 12, xl: 16, '2xl': 24, full: 9999,
+};
+
+const fontSize = {
+  xs: 12, sm: 14, base: 16, lg: 18,
+  xl: 20, '2xl': 24, '3xl': 30, '4xl': 36,
+};
+
+const fontFamily = Platform.OS === 'ios'
+  ? { regular: 'System', medium: 'System', semiBold: 'System', bold: 'System' }
+  : { regular: 'Roboto', medium: 'Roboto-Medium', semiBold: 'Roboto-Medium', bold: 'Roboto-Bold' };
+
+// Light theme colors (monochrome primary matching web)
+const lightColors = {
+  background: palette.neutral[0],
+  backgroundSecondary: palette.neutral[50],
+  backgroundTertiary: palette.neutral[100],
+  card: palette.neutral[0],
+
+  text: palette.neutral[950],
+  textSecondary: palette.neutral[600],
+  textMuted: palette.neutral[500],
+  textLight: palette.neutral[400],
+  textInverse: palette.neutral[0],
+
+  border: palette.neutral[200],
+  borderLight: palette.neutral[100],
+  borderStrong: palette.neutral[400],
+
+  // Monochrome primary (matches web design system)
+  primary: palette.neutral[900],
+  primaryDark: palette.neutral[950],
+  primaryLight: palette.neutral[100],
+
+  icon: palette.neutral[700],
+  iconMuted: palette.neutral[400],
+
+  success: palette.semantic.success,
+  warning: palette.semantic.warning,
+  error: palette.semantic.error,
+  info: palette.semantic.info,
+};
+
+// Dark theme colors (monochrome primary matching web)
+const darkColors = {
+  background: palette.neutral[950],
+  backgroundSecondary: palette.neutral[900],
+  backgroundTertiary: palette.neutral[800],
+  card: palette.neutral[900],
+
+  text: palette.neutral[50],
+  textSecondary: palette.neutral[400],
+  textMuted: palette.neutral[500],
+  textLight: palette.neutral[600],
+  textInverse: palette.neutral[950],
+
+  border: palette.neutral[800],
+  borderLight: palette.neutral[900],
+  borderStrong: palette.neutral[500],
+
+  // Monochrome primary (matches web design system)
+  primary: palette.neutral[50],
+  primaryDark: palette.neutral[0],
+  primaryLight: palette.neutral[800],
+
+  icon: palette.neutral[300],
+  iconMuted: palette.neutral[500],
+
+  success: '#4ade80',
+  warning: '#fbbf24',
+  error: '#f87171',
+  info: '#60a5fa',
+};
+
+const createShadows = (mode: 'light' | 'dark') => {
+  const opacity = mode === 'dark' ? 0.4 : 0.08;
+  return {
+    none: {},
+    small: {
+      shadowColor: '#000',
+      shadowOffset: { width: 0, height: 1 },
+      shadowOpacity: opacity * 0.5,
+      shadowRadius: 2,
+      elevation: 1,
+    },
+    medium: {
+      shadowColor: '#000',
+      shadowOffset: { width: 0, height: 2 },
+      shadowOpacity: opacity,
+      shadowRadius: 4,
+      elevation: 3,
+    },
+    large: {
+      shadowColor: '#000',
+      shadowOffset: { width: 0, height: 4 },
+      shadowOpacity: opacity * 1.5,
+      shadowRadius: 8,
+      elevation: 8,
+    },
+    button: {
+      shadowColor: palette.neutral[900],
+      shadowOffset: { width: 0, height: 2 },
+      shadowOpacity: 0.15,
+      shadowRadius: 4,
+      elevation: 3,
+    },
+  };
+};
+
+export type ThemeMode = 'light' | 'dark';
+
+export const createTheme = (mode: ThemeMode = 'light') => ({
+  mode,
+  colors: mode === 'light' ? lightColors : darkColors,
+  palette,
+  spacing,
+  borderRadius,
+  typography: { fontFamily, fontSize },
+  shadows: createShadows(mode),
+  timing: { fast: 150, base: 200, slow: 300 },
+});
+
+// Default export for backwards compatibility
+export const Theme = createTheme('light');
+export type AppTheme = ReturnType<typeof createTheme>;

package/templates/base/mobile/src/context/ThemeContext.tsx

@@ -0,0 +1,157 @@
+import React, { createContext, useContext, useState, useEffect, useMemo, useCallback } from 'react';
+import { useColorScheme, Appearance } from 'react-native';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { StatusBar } from 'expo-status-bar';
+import { createTheme, ThemeMode, AppTheme } from '@/constants/Theme';
+
+const THEME_STORAGE_KEY = '@app_theme_mode';
+
+interface ThemeContextType {
+  theme: AppTheme;
+  mode: ThemeMode;
+  setMode: (mode: ThemeMode) => void;
+  toggleMode: () => void;
+  isSystemDefault: boolean;
+  setSystemDefault: (useSystem: boolean) => void;
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+interface ThemeProviderProps {
+  children: React.ReactNode;
+}
+
+export function ThemeProvider({ children }: ThemeProviderProps) {
+  const systemColorScheme = useColorScheme();
+  // Initialize with system theme using Appearance API directly (more reliable than hook)
+  const [mode, setModeState] = useState<ThemeMode>(
+    () => Appearance.getColorScheme() || 'light'
+  );
+  const [isSystemDefault, setIsSystemDefault] = useState(true);
+
+  // Load saved theme preference
+  useEffect(() => {
+    (async () => {
+      try {
+        const saved = await AsyncStorage.getItem(THEME_STORAGE_KEY);
+        const currentSystemTheme = Appearance.getColorScheme();
+
+        if (saved) {
+          const { mode: savedMode, useSystem } = JSON.parse(saved);
+          setIsSystemDefault(useSystem);
+          if (!useSystem) {
+            setModeState(savedMode);
+          } else if (currentSystemTheme) {
+            setModeState(currentSystemTheme);
+          }
+        } else if (currentSystemTheme) {
+          setModeState(currentSystemTheme);
+        }
+      } catch {
+        // Use defaults on error
+      }
+    })();
+  }, []);
+
+  // Sync with system preference when using system default
+  useEffect(() => {
+    if (isSystemDefault && systemColorScheme) {
+      setModeState(systemColorScheme);
+    }
+  }, [isSystemDefault, systemColorScheme]);
+
+  // Listen for real-time system theme changes
+  useEffect(() => {
+    const subscription = Appearance.addChangeListener(({ colorScheme }) => {
+      if (isSystemDefault && colorScheme) {
+        setModeState(colorScheme);
+      }
+    });
+
+    return () => subscription.remove();
+  }, [isSystemDefault]);
+
+  const setMode = useCallback(async (newMode: ThemeMode) => {
+    setModeState(newMode);
+    setIsSystemDefault(false);
+    try {
+      await AsyncStorage.setItem(
+        THEME_STORAGE_KEY,
+        JSON.stringify({ mode: newMode, useSystem: false })
+      );
+    } catch {
+      // Ignore storage errors
+    }
+  }, []);
+
+  const toggleMode = useCallback(() => {
+    setModeState((current) => {
+      const newMode = current === 'light' ? 'dark' : 'light';
+      AsyncStorage.setItem(
+        THEME_STORAGE_KEY,
+        JSON.stringify({ mode: newMode, useSystem: false })
+      ).catch(() => {});
+      return newMode;
+    });
+    setIsSystemDefault(false);
+  }, []);
+
+  const handleSetSystemDefault = useCallback(async (useSystem: boolean) => {
+    setIsSystemDefault(useSystem);
+
+    // Determine the mode to use and store
+    let modeToStore = mode;
+    if (useSystem && systemColorScheme) {
+      modeToStore = systemColorScheme;
+      setModeState(modeToStore);
+    }
+
+    try {
+      await AsyncStorage.setItem(
+        THEME_STORAGE_KEY,
+        JSON.stringify({ mode: modeToStore, useSystem })
+      );
+    } catch {
+      // Ignore storage errors
+    }
+  }, [systemColorScheme, mode]);
+
+  const theme = useMemo(() => createTheme(mode), [mode]);
+
+  const value = useMemo(
+    () => ({
+      theme,
+      mode,
+      setMode,
+      toggleMode,
+      isSystemDefault,
+      setSystemDefault: handleSetSystemDefault,
+    }),
+    [theme, mode, setMode, toggleMode, isSystemDefault, handleSetSystemDefault]
+  );
+
+  return (
+    <ThemeContext.Provider value={value}>
+      <StatusBar style={mode === 'dark' ? 'light' : 'dark'} />
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function useTheme() {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+}
+
+// Convenience hook for just the theme object (backwards compatible)
+export function useAppTheme(): AppTheme {
+  const context = useContext(ThemeContext);
+  // Fallback to default light theme if no provider
+  return context?.theme ?? createTheme('light');
+}
+
+// Re-export AppTheme for convenience (so components can import from one place)
+export type { AppTheme } from '@/constants/Theme';