vibefast-cli 0.2.4 → 0.3.1

package/2/apps/native/src/components/advanced-ui/switch/demo.tsx

@@ -0,0 +1,851 @@
+import {
+  AntDesign,
+  Feather,
+  Ionicons,
+  MaterialCommunityIcons,
+  MaterialIcons,
+} from '@expo/vector-icons';
+import type React from 'react';
+import { useState } from 'react';
+import {
+  ScrollView,
+  StatusBar,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+import { AnimatedSwitch } from './animated-switch';
+
+export default function AnimatedSwitchShowcase(): React.ReactNode {
+  const theme = useThemeConfig();
+  const [basicSwitch, setBasicSwitch] = useState(false);
+  const [customSizeSwitch, setCustomSizeSwitch] = useState(true);
+  const [customColorSwitch, setCustomColorSwitch] = useState(false);
+  const [disabledOnSwitch] = useState<boolean>(true);
+  const [disabledOffSwitch] = useState<boolean>(false);
+
+  const [iconSwitch, setIconSwitch] = useState<boolean>(true);
+  const [dualIconSwitch, setDualIconSwitch] = useState<boolean>(false);
+  const [trackIconSwitch, setTrackIconSwitch] = useState<boolean>(true);
+  const [fullIconSwitch, setFullIconSwitch] = useState<boolean>(false);
+
+  const [fadeSwitch, setFadeSwitch] = useState<boolean>(true);
+  const [rotateSwitch, setRotateSwitch] = useState<boolean>(false);
+  const [scaleSwitch, setScaleSwitch] = useState<boolean>(true);
+  const [bounceSwitch, setBounceSwitch] = useState<boolean>(false);
+
+  const [springSwitch, setSpringSwitch] = useState<boolean>(true);
+  const [styledSwitch, setStyledSwitch] = useState<boolean>(false);
+
+  const [allSwitches, setAllSwitches] = useState<boolean>(false);
+
+  const handleToggleAll = () => {
+    const newValue = !allSwitches;
+    setAllSwitches(newValue);
+    setBasicSwitch(newValue);
+    setCustomSizeSwitch(newValue);
+    setCustomColorSwitch(newValue);
+    setIconSwitch(newValue);
+    setDualIconSwitch(newValue);
+    setTrackIconSwitch(newValue);
+    setFullIconSwitch(newValue);
+    setFadeSwitch(newValue);
+    setRotateSwitch(newValue);
+    setScaleSwitch(newValue);
+    setBounceSwitch(newValue);
+    setSpringSwitch(newValue);
+    setStyledSwitch(newValue);
+  };
+
+  const handleRandomize = () => {
+    setBasicSwitch(Math.random() > 0.5);
+    setCustomSizeSwitch(Math.random() > 0.5);
+    setCustomColorSwitch(Math.random() > 0.5);
+    setIconSwitch(Math.random() > 0.5);
+    setDualIconSwitch(Math.random() > 0.5);
+    setTrackIconSwitch(Math.random() > 0.5);
+    setFullIconSwitch(Math.random() > 0.5);
+    setFadeSwitch(Math.random() > 0.5);
+    setRotateSwitch(Math.random() > 0.5);
+    setScaleSwitch(Math.random() > 0.5);
+    setBounceSwitch(Math.random() > 0.5);
+    setSpringSwitch(Math.random() > 0.5);
+    setStyledSwitch(Math.random() > 0.5);
+  };
+
+  const renderSection = (
+    title: string,
+    icon: string,
+    iconLib: string,
+    iconColor: string,
+    children: React.ReactNode,
+  ) => (
+    <View style={[styles.section, { backgroundColor: theme.colors.card }]}>
+      <View style={styles.sectionHeader}>
+        {iconLib === 'Feather' && (
+          <Feather name={icon as any} size={20} color={iconColor} />
+        )}
+        {iconLib === 'Ionicons' && (
+          <Ionicons name={icon as any} size={20} color={iconColor} />
+        )}
+        {iconLib === 'MaterialIcons' && (
+          <MaterialIcons name={icon as any} size={20} color={iconColor} />
+        )}
+        {iconLib === 'MaterialCommunityIcons' && (
+          <MaterialCommunityIcons
+            name={icon as any}
+            size={20}
+            color={iconColor}
+          />
+        )}
+        {iconLib === 'AntDesign' && (
+          <AntDesign name={icon as any} size={20} color={iconColor} />
+        )}
+        <Text style={[styles.sectionTitle, { color: theme.colors.text }]}>
+          {title}
+        </Text>
+      </View>
+      <View style={styles.sectionContent}>{children}</View>
+    </View>
+  );
+
+  const renderSwitchRow = (
+    label: string,
+    value: boolean,
+    onValueChange: (value: boolean) => void,
+    switchProps: any = {},
+    description?: string,
+    badgeText?: string,
+    badgeColor?: string,
+  ) => (
+    <View
+      style={[
+        styles.switchRow,
+        {
+          backgroundColor: theme.colors.card,
+          borderColor: theme.colors.border,
+        },
+      ]}
+    >
+      <View style={styles.switchInfo}>
+        <View style={styles.switchLabelContainer}>
+          <Text style={[styles.switchLabel, { color: theme.colors.text }]}>
+            {label}
+          </Text>
+          {badgeText && (
+            <View
+              style={[
+                styles.badge,
+                { backgroundColor: badgeColor || theme.colors.muted },
+              ]}
+            >
+              <Text
+                style={[
+                  styles.badgeText,
+                  { color: theme.colors.primaryForeground },
+                ]}
+              >
+                {badgeText}
+              </Text>
+            </View>
+          )}
+        </View>
+        {description && (
+          <Text
+            style={[
+              styles.switchDescription,
+              { color: theme.colors.mutedForeground },
+            ]}
+          >
+            {description}
+          </Text>
+        )}
+      </View>
+      <View style={styles.switchContainer}>
+        <AnimatedSwitch
+          value={value}
+          onValueChange={onValueChange}
+          {...switchProps}
+        />
+      </View>
+    </View>
+  );
+
+  const styles = StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: theme.colors.background,
+    },
+    content: {
+      paddingHorizontal: 20,
+      paddingTop: 10,
+      paddingBottom: 30,
+    },
+    header: {
+      marginBottom: 32,
+      paddingTop: 20,
+      alignItems: 'center',
+    },
+    titleContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 12,
+      marginBottom: 8,
+    },
+    title: {
+      fontSize: 32,
+      fontWeight: '700',
+      color: theme.colors.text,
+      letterSpacing: -0.5,
+    },
+    subtitle: {
+      fontSize: 16,
+      color: theme.colors.mutedForeground,
+      textAlign: 'center',
+      lineHeight: 24,
+      paddingHorizontal: 20,
+    },
+    controlsCard: {
+      backgroundColor: theme.colors.card,
+      borderRadius: 16,
+      padding: 24,
+      marginBottom: 24,
+      borderWidth: 1,
+      borderColor: theme.colors.border,
+      shadowColor: theme.colors.text,
+      shadowOffset: {
+        width: 0,
+        height: 2,
+      },
+      shadowOpacity: 0.1,
+      shadowRadius: 8,
+      elevation: 4,
+    },
+    controlsHeader: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: 8,
+      marginBottom: 20,
+    },
+    controlsTitle: {
+      fontSize: 18,
+      fontWeight: '600',
+      color: theme.colors.text,
+    },
+    buttonRow: {
+      flexDirection: 'row',
+      gap: 12,
+    },
+    button: {
+      flex: 1,
+      paddingVertical: 12,
+      paddingHorizontal: 16,
+      borderRadius: 8,
+      alignItems: 'center',
+      justifyContent: 'center',
+      minHeight: 44,
+      flexDirection: 'row',
+      gap: 8,
+    },
+    buttonPrimary: {
+      backgroundColor: theme.colors.primary,
+    },
+    buttonSecondary: {
+      backgroundColor: theme.colors.secondary,
+      borderWidth: 1,
+      borderColor: theme.colors.border,
+    },
+    buttonText: {
+      fontSize: 14,
+      fontWeight: '500',
+      color: theme.colors.secondaryForeground,
+    },
+    buttonTextPrimary: {
+      fontSize: 14,
+      fontWeight: '500',
+      color: theme.colors.primaryForeground,
+    },
+    section: {
+      marginBottom: 32,
+      borderRadius: 12,
+      padding: 16,
+    },
+    sectionHeader: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 8,
+      marginBottom: 16,
+      paddingLeft: 4,
+    },
+    sectionTitle: {
+      fontSize: 20,
+      fontWeight: '600',
+    },
+    sectionContent: {
+      gap: 12,
+    },
+    switchRow: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      borderRadius: 12,
+      padding: 20,
+      borderWidth: 1,
+      shadowColor: theme.colors.text,
+      shadowOffset: {
+        width: 0,
+        height: 1,
+      },
+      shadowOpacity: 0.05,
+      shadowRadius: 4,
+      elevation: 2,
+    },
+    switchInfo: {
+      flex: 1,
+      marginRight: 16,
+    },
+    switchLabelContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 8,
+      marginBottom: 4,
+    },
+    switchLabel: {
+      fontSize: 16,
+      fontWeight: '500',
+    },
+    badge: {
+      paddingHorizontal: 8,
+      paddingVertical: 2,
+      borderRadius: 12,
+      alignSelf: 'flex-start',
+    },
+    badgeText: {
+      fontSize: 10,
+      fontWeight: '600',
+      textTransform: 'uppercase',
+      letterSpacing: 0.5,
+    },
+    switchDescription: {
+      fontSize: 13,
+      lineHeight: 18,
+    },
+    switchContainer: {
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    footer: {
+      marginTop: 24,
+      alignItems: 'center',
+      paddingVertical: 20,
+      backgroundColor: theme.colors.card,
+      borderRadius: 12,
+      borderWidth: 1,
+      borderColor: theme.colors.border,
+    },
+    footerContent: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 8,
+    },
+    footerText: {
+      fontSize: 14,
+      color: theme.colors.mutedForeground,
+      fontWeight: '500',
+    },
+  });
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <StatusBar
+        barStyle={theme.dark ? 'light-content' : 'dark-content'}
+        backgroundColor={theme.colors.background}
+      />
+
+      <ScrollView
+        contentContainerStyle={styles.content}
+        showsVerticalScrollIndicator={false}
+        scrollEnabled
+      >
+        <View style={styles.header}>
+          <View style={styles.titleContainer}>
+            <MaterialIcons
+              name="toggle-on"
+              size={32}
+              color={theme.colors.primary}
+            />
+            <Text style={styles.title}>Switch Components</Text>
+          </View>
+          <Text style={styles.subtitle}>
+            Beautifully designed animated switches with rich customization
+          </Text>
+        </View>
+
+        <View style={styles.controlsCard}>
+          <View style={styles.controlsHeader}>
+            <Ionicons name="settings" size={20} color={theme.colors.text} />
+            <Text style={styles.controlsTitle}>Demo Controls</Text>
+          </View>
+
+          <View style={styles.buttonRow}>
+            <TouchableOpacity
+              style={[styles.button, styles.buttonPrimary]}
+              onPress={handleToggleAll}
+            >
+              <MaterialCommunityIcons
+                name={allSwitches ? 'toggle-switch-off' : 'toggle-switch'}
+                size={16}
+                color={theme.colors.primaryForeground}
+              />
+              <Text style={styles.buttonTextPrimary}>
+                {allSwitches ? 'Turn All Off' : 'Turn All On'}
+              </Text>
+            </TouchableOpacity>
+
+            <TouchableOpacity
+              style={[styles.button, styles.buttonSecondary]}
+              onPress={handleRandomize}
+            >
+              <Ionicons
+                name="shuffle"
+                size={16}
+                color={theme.colors.secondaryForeground}
+              />
+              <Text style={styles.buttonText}>Randomize</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+
+        {renderSection(
+          'Basic Usage',
+          'toggle-left',
+          'Feather',
+          theme.colors.text,
+          <>
+            {renderSwitchRow(
+              'Default Switch',
+              basicSwitch,
+              setBasicSwitch,
+              {},
+              'Standard switch with default styling',
+              'Default',
+            )}
+
+            {renderSwitchRow(
+              'Custom Size',
+              customSizeSwitch,
+              setCustomSizeSwitch,
+              {
+                width: 70,
+                height: 25,
+                thumbSize: 21,
+                backgroundImage: {
+                  uri: 'https://img.freepik.com/premium-vector/abstract-background-with-waves-vector-illustration_648489-99.jpg',
+                },
+              },
+              'Custom width, height, and thumb size',
+              'Large',
+              theme.colors.success,
+            )}
+
+            {renderSwitchRow(
+              'Custom Colors',
+              customColorSwitch,
+              setCustomColorSwitch,
+              {
+                onColor: theme.colors.success,
+                offColor: theme.colors.muted,
+                thumbColor: theme.colors.card,
+              },
+              'Custom on/off and thumb colors',
+              'Styled',
+              theme.colors.success,
+            )}
+
+            {renderSwitchRow(
+              'Disabled (On)',
+              disabledOnSwitch,
+              () => {},
+              {
+                disabled: true,
+                onColor: theme.colors.mutedForeground,
+              },
+              'Disabled switch in on state',
+              'Disabled',
+              theme.colors.mutedForeground,
+            )}
+
+            {renderSwitchRow(
+              'Disabled (Off)',
+              disabledOffSwitch,
+              () => {},
+              {
+                disabled: true,
+              },
+              'Disabled switch in off state',
+              'Disabled',
+              theme.colors.mutedForeground,
+            )}
+          </>,
+        )}
+
+        {renderSection(
+          'Icon Features',
+          'star',
+          'Feather',
+          theme.colors.warning,
+          <>
+            {renderSwitchRow(
+              'Thumb Icons Only',
+              iconSwitch,
+              setIconSwitch,
+              {
+                thumbOnIcon: (
+                  <Feather
+                    name="check"
+                    size={16}
+                    color={theme.colors.success}
+                  />
+                ),
+                thumbOffIcon: (
+                  <Feather
+                    name="x"
+                    size={16}
+                    color={theme.colors.mutedForeground}
+                  />
+                ),
+                onColor: theme.colors.success,
+              },
+              'Different icons for on/off states',
+              'Icons',
+              theme.colors.success,
+            )}
+
+            {renderSwitchRow(
+              'Dual Icon System',
+              dualIconSwitch,
+              setDualIconSwitch,
+              {
+                thumbOnIcon: (
+                  <MaterialIcons
+                    name="wifi"
+                    size={16}
+                    color={theme.colors.primary}
+                  />
+                ),
+                thumbOffIcon: (
+                  <MaterialIcons
+                    name="wifi-off"
+                    size={16}
+                    color={theme.colors.mutedForeground}
+                  />
+                ),
+                trackOnIcon: (
+                  <Feather
+                    name="cloud-lightning"
+                    size={12}
+                    color={theme.colors.primaryForeground}
+                  />
+                ),
+                trackOffIcon: (
+                  <Feather
+                    name="wifi-off"
+                    size={12}
+                    color={theme.colors.mutedForeground}
+                  />
+                ),
+                onColor: theme.colors.primary,
+              },
+              'Icons on both thumb and track',
+              'Dual',
+              theme.colors.primary,
+            )}
+
+            {renderSwitchRow(
+              'Track Icons',
+              trackIconSwitch,
+              setTrackIconSwitch,
+              {
+                trackOnIcon: (
+                  <Ionicons
+                    name="volume-high"
+                    size={12}
+                    color={theme.colors.primaryForeground}
+                  />
+                ),
+                trackOffIcon: (
+                  <Ionicons
+                    name="volume-mute"
+                    size={12}
+                    color={theme.colors.mutedForeground}
+                  />
+                ),
+                onColor: theme.colors.accent,
+              },
+              'Icons displayed on track only',
+              'Track',
+              theme.colors.accent,
+            )}
+
+            {renderSwitchRow(
+              'Complete Icon Set',
+              fullIconSwitch,
+              setFullIconSwitch,
+              {
+                thumbOnIcon: (
+                  <MaterialCommunityIcons
+                    name="shield-check"
+                    size={16}
+                    color={theme.colors.destructive}
+                  />
+                ),
+                thumbOffIcon: (
+                  <MaterialCommunityIcons
+                    name="shield-off"
+                    size={16}
+                    color={theme.colors.mutedForeground}
+                  />
+                ),
+                trackOnIcon: (
+                  <MaterialIcons
+                    name="security"
+                    size={12}
+                    color={theme.colors.destructiveForeground}
+                  />
+                ),
+                trackOffIcon: (
+                  <MaterialIcons
+                    name="no-encryption"
+                    size={12}
+                    color={theme.colors.mutedForeground}
+                  />
+                ),
+                onColor: theme.colors.destructive,
+                width: 65,
+              },
+              'All four icon positions used',
+              'Full',
+              theme.colors.destructive,
+            )}
+          </>,
+        )}
+
+        {renderSection(
+          'Animation Types',
+          'zap',
+          'Feather',
+          theme.colors.primary,
+          <>
+            {renderSwitchRow(
+              'Fade Animation',
+              fadeSwitch,
+              setFadeSwitch,
+              {
+                thumbOnIcon: (
+                  <AntDesign
+                    name="star"
+                    size={16}
+                    color={theme.colors.warning}
+                  />
+                ),
+                thumbOffIcon: (
+                  <AntDesign
+                    name="star"
+                    size={16}
+                    color={theme.colors.mutedForeground}
+                  />
+                ),
+                iconAnimationType: 'fade',
+                onColor: theme.colors.warning,
+              },
+              'Icons fade in/out smoothly',
+              'Fade',
+              theme.colors.warning,
+            )}
+
+            {renderSwitchRow(
+              'Rotate Animation',
+              rotateSwitch,
+              setRotateSwitch,
+              {
+                thumbOnIcon: (
+                  <MaterialCommunityIcons
+                    name="sync"
+                    size={16}
+                    color={theme.colors.primary}
+                  />
+                ),
+                thumbOffIcon: (
+                  <MaterialCommunityIcons
+                    name="sync-off"
+                    size={16}
+                    color={theme.colors.mutedForeground}
+                  />
+                ),
+                trackOnIcon: (
+                  <Feather
+                    name="refresh-cw"
+                    size={10}
+                    color={theme.colors.primaryForeground}
+                  />
+                ),
+                iconAnimationType: 'rotate',
+                onColor: theme.colors.primary,
+              },
+              'Icons rotate during transition',
+              'Rotate',
+              theme.colors.primary,
+            )}
+
+            {renderSwitchRow(
+              'Scale Animation',
+              scaleSwitch,
+              setScaleSwitch,
+              {
+                thumbOnIcon: (
+                  <Ionicons
+                    name="heart"
+                    size={16}
+                    color={theme.colors.destructive}
+                  />
+                ),
+                thumbOffIcon: (
+                  <Ionicons
+                    name="heart-outline"
+                    size={16}
+                    color={theme.colors.mutedForeground}
+                  />
+                ),
+                iconAnimationType: 'scale',
+                onColor: theme.colors.destructive,
+              },
+              'Icons scale up/down',
+              'Scale',
+              theme.colors.destructive,
+            )}
+
+            {renderSwitchRow(
+              'Bounce Animation',
+              bounceSwitch,
+              setBounceSwitch,
+              {
+                thumbOnIcon: (
+                  <MaterialIcons
+                    name="notifications-active"
+                    size={16}
+                    color={theme.colors.accent}
+                  />
+                ),
+                thumbOffIcon: (
+                  <MaterialIcons
+                    name="notifications-off"
+                    size={16}
+                    color={theme.colors.mutedForeground}
+                  />
+                ),
+                iconAnimationType: 'bounce',
+                onColor: theme.colors.accent,
+              },
+              'Icons bounce during transition',
+              'Bounce',
+              theme.colors.accent,
+            )}
+          </>,
+        )}
+
+        {renderSection(
+          'Advanced Features',
+          'settings',
+          'Feather',
+          theme.colors.success,
+          <>
+            {renderSwitchRow(
+              'Custom Spring Animation',
+              springSwitch,
+              setSpringSwitch,
+              {
+                springConfig: {
+                  damping: 8,
+                  stiffness: 200,
+                  mass: 1.2,
+                },
+                thumbOnIcon: (
+                  <MaterialCommunityIcons
+                    name="speedometer"
+                    size={16}
+                    color={theme.colors.success}
+                  />
+                ),
+                thumbOffIcon: (
+                  <MaterialCommunityIcons
+                    name="speedometer"
+                    size={16}
+                    color={theme.colors.mutedForeground}
+                  />
+                ),
+                onColor: theme.colors.success,
+              },
+              'Custom spring physics configuration',
+              'Spring',
+              theme.colors.success,
+            )}
+
+            {renderSwitchRow(
+              'Styled Switch',
+              styledSwitch,
+              setStyledSwitch,
+              {
+                style: {
+                  borderWidth: 2,
+                  borderColor: theme.colors.primary,
+                  borderRadius: 25,
+                },
+                thumbInset: 4,
+                thumbColor: theme.colors.primary,
+                offColor: theme.colors.muted,
+                onColor: theme.colors.primary,
+                thumbOnIcon: (
+                  <AntDesign
+                    name="check"
+                    size={14}
+                    color={theme.colors.primaryForeground}
+                  />
+                ),
+                thumbOffIcon: (
+                  <AntDesign
+                    name="close"
+                    size={14}
+                    color={theme.colors.primaryForeground}
+                  />
+                ),
+                testID: 'styled-switch',
+              },
+              'Custom styling with border and testID',
+              'Custom',
+              theme.colors.primary,
+            )}
+          </>,
+        )}
+
+        <View style={styles.footer}>
+          <View style={styles.footerContent}>
+            <Feather
+              name="check-circle"
+              size={16}
+              color={theme.colors.success}
+            />
+            <Text style={styles.footerText}>
+              All AnimatedSwitch features demonstrated above
+            </Text>
+          </View>
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}