vibefast-cli 0.6.1 → 0.7.0

package/recipes/glowing-button/apps/native/src/components/advanced-ui/buttons/glowing-button.tsx

@@ -0,0 +1,366 @@
+import { Text, View } from 'react-native';
+import AnimatedGlow, { type PresetConfig } from 'react-native-animated-glow';
+
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+export type Preset = (typeof presets)[keyof typeof presets];
+
+export const presets = {
+  cosmicNebula: {
+    cornerRadius: 70,
+    outlineWidth: 3,
+    borderColor: [
+      'rgba(255, 171, 203, 1)',
+      'rgba(112, 49, 164, 1)',
+      'rgba(35, 21, 50, 1)',
+    ],
+    backgroundColor: '#222',
+    animationSpeed: 2,
+    randomness: 0.01,
+    borderSpeedMultiplier: 1,
+    glowLayers: [
+      {
+        glowPlacement: 'behind',
+        colors: ['#483D8B', '#8A2BE2', '#9370DB'],
+        glowSize: 20,
+        opacity: 0.1,
+        speedMultiplier: 1,
+        coverage: 1,
+        relativeOffset: 0,
+      },
+      {
+        glowPlacement: 'behind',
+        colors: [
+          'rgba(185, 185, 250, 1)',
+          'rgba(199, 129, 199, 1)',
+          'rgba(77, 61, 175, 1)',
+        ],
+        glowSize: [2, 6],
+        opacity: 0.6,
+        speedMultiplier: 1,
+        coverage: 1,
+        relativeOffset: 0,
+      },
+      {
+        glowPlacement: 'over',
+        colors: ['rgba(185, 185, 250, 1)', 'rgba(225, 133, 242, 1)'],
+        glowSize: [0, 12],
+        opacity: 0.05,
+        speedMultiplier: 1.2,
+        coverage: 0.5,
+        relativeOffset: 0,
+      },
+      {
+        glowPlacement: 'over',
+        colors: ['rgba(185, 185, 250, 1)', 'rgba(255, 140, 255, 1)'],
+        glowSize: [0, 1],
+        opacity: 1,
+        speedMultiplier: 1.2,
+        coverage: 0.3,
+        relativeOffset: 0.9,
+      },
+    ],
+  },
+  oceanSunset: {
+    cornerRadius: 70,
+    outlineWidth: 4,
+    borderColor: [
+      'rgba(255, 124, 171, 1)',
+      'rgba(63, 100, 199, 1)',
+      'rgba(240, 115, 46, 1)',
+    ],
+    backgroundColor: 'rgba(21, 21, 21, 1)',
+    animationSpeed: 2,
+    randomness: 0.01,
+    borderSpeedMultiplier: 1,
+    glowLayers: [
+      {
+        glowPlacement: 'behind',
+        colors: ['#f82fc6', '#5a4ff9', '#ff923e'],
+        glowSize: 15,
+        opacity: 0.1,
+        speedMultiplier: 1,
+        coverage: 1,
+        relativeOffset: 0,
+      },
+      {
+        glowPlacement: 'behind',
+        colors: [
+          'rgba(255, 89, 213, 1)',
+          'rgba(63, 89, 255, 1)',
+          'rgba(255, 164, 0, 1)',
+        ],
+        glowSize: 5,
+        opacity: 0.5,
+        speedMultiplier: 1,
+        coverage: 1,
+        relativeOffset: 0,
+      },
+    ],
+  },
+  glowingBorder: {
+    cornerRadius: 70,
+    outlineWidth: 1,
+    borderColor: [
+      'rgba(16, 16, 16, 1)',
+      'rgba(227, 74, 255, 0.3)',
+      'rgba(142, 88, 163, 1)',
+      'rgba(98, 181, 255, 1)',
+      'rgba(199, 208, 255, 1)',
+      'rgba(55, 112, 169, 1)',
+    ],
+    backgroundColor: 'rgba(0, 0, 0, 1)',
+    animationSpeed: 1,
+    randomness: 0.01,
+    borderSpeedMultiplier: 1,
+    glowLayers: [
+      {
+        glowPlacement: 'over',
+        colors: [
+          'rgba(0, 0, 0, 0)',
+          'rgba(137, 73, 151, 1)',
+          'rgba(85, 68, 216, 1)',
+        ],
+        glowSize: [0, 25, 20, 0],
+        opacity: 0.15,
+        speedMultiplier: 1,
+        coverage: 1,
+        relativeOffset: 0,
+      },
+      {
+        glowPlacement: 'over',
+        colors: [
+          'rgba(0, 0, 0, 0)',
+          'rgba(137, 73, 151, 1)',
+          'rgba(85, 68, 216, 1)',
+        ],
+        glowSize: [0, 5, 5, 0],
+        opacity: 0.2,
+        speedMultiplier: 1,
+        coverage: 1,
+        relativeOffset: 0,
+      },
+      {
+        glowPlacement: 'over',
+        colors: ['rgba(166, 68, 195, 1)', 'rgba(245, 219, 255, 1)'],
+        glowSize: [1, 8],
+        opacity: 0.06,
+        speedMultiplier: 1,
+        coverage: 0.25,
+        relativeOffset: 0.85,
+      },
+      {
+        glowPlacement: 'over',
+        colors: ['rgba(225, 102, 235, 1)', 'rgba(245, 219, 255, 1)'],
+        glowSize: [0, 0.3],
+        opacity: 1,
+        speedMultiplier: 1,
+        coverage: 0.25,
+        relativeOffset: 0.85,
+      },
+      {
+        glowPlacement: 'over',
+        colors: ['rgba(83, 172, 255, 1)', 'rgba(0, 181, 255, 1)'],
+        glowSize: [0, 8],
+        opacity: 0.1,
+        speedMultiplier: 1,
+        coverage: 0.3,
+        relativeOffset: 0.4,
+      },
+      {
+        glowPlacement: 'over',
+        colors: ['rgba(83, 172, 255, 1)', 'rgba(255, 255, 255, 1)'],
+        glowSize: [0, 0.3],
+        opacity: 1,
+        speedMultiplier: 1,
+        coverage: 0.25,
+        relativeOffset: 0.4,
+      },
+    ],
+  },
+  cyberPink: {
+    cornerRadius: 70,
+    outlineWidth: 8,
+    borderColor: ['rgba(177, 102, 255, 1)', 'rgba(255, 102, 163, 1)'],
+    backgroundColor: 'rgba(27, 0, 25, 1)',
+    animationSpeed: 3,
+    randomness: 0.01,
+    borderSpeedMultiplier: 1,
+    glowLayers: [
+      {
+        glowPlacement: 'behind',
+        colors: ['#FF1493', 'rgba(206, 0, 255, 1)', '#DB7093'],
+        glowSize: 30,
+        opacity: 0.2,
+        speedMultiplier: 1,
+        coverage: 1,
+        relativeOffset: 0,
+      },
+      {
+        glowPlacement: 'behind',
+        colors: ['rgba(254, 160, 177, 1)', 'rgba(206, 180, 255, 1)'],
+        glowSize: 12,
+        opacity: 0.2,
+        speedMultiplier: 1,
+        coverage: 1,
+        relativeOffset: 0,
+      },
+      {
+        glowPlacement: 'behind',
+        colors: ['rgba(255, 164, 180, 1)', 'rgba(255, 217, 217, 1)'],
+        glowSize: 4,
+        opacity: 1,
+        speedMultiplier: 1,
+        coverage: 1,
+        relativeOffset: 0,
+      },
+    ],
+  },
+  defaultRainbow: {
+    cornerRadius: 30,
+    outlineWidth: 4,
+    borderColor: [
+      'rgba(238, 255, 0, 1)',
+      'rgba(79, 255, 0, 1)',
+      'rgba(46, 90, 255, 1)',
+      'rgba(254, 0, 255, 1)',
+      'rgba(231, 23, 23, 1)',
+    ],
+    backgroundColor: 'rgba(10, 10, 10, 1)',
+    animationSpeed: 1.2,
+    randomness: 0.01,
+    borderSpeedMultiplier: 1,
+    glowLayers: [
+      {
+        glowPlacement: 'behind',
+        colors: [
+          'rgba(205, 201, 35, 1)',
+          'rgba(0, 255, 79, 1)',
+          'rgba(0, 119, 255, 1)',
+          'rgba(239, 0, 255, 1)',
+          'rgba(222, 28, 28, 1)',
+        ],
+        glowSize: 34,
+        opacity: 0.2,
+        speedMultiplier: 1,
+        coverage: 1,
+        relativeOffset: 0,
+      },
+      {
+        glowPlacement: 'behind',
+        colors: [
+          'rgba(185, 182, 32, 1)',
+          'rgba(0, 255, 79, 1)',
+          'rgba(0, 119, 255, 1)',
+          'rgba(239, 0, 255, 1)',
+          'rgba(222, 28, 28, 1)',
+        ],
+        glowSize: 6,
+        opacity: 0.5,
+        speedMultiplier: 1,
+        coverage: 1,
+        relativeOffset: 0,
+      },
+      {
+        glowPlacement: 'behind',
+        colors: ['#FFFFFF'],
+        glowSize: [2, 8, 8, 2],
+        opacity: 0.2,
+        speedMultiplier: 2,
+        coverage: 0.5,
+        relativeOffset: 0,
+      },
+    ],
+  },
+  arcticFreeze: {
+    cornerRadius: 60,
+    outlineWidth: 4,
+    borderColor: 'white',
+    backgroundColor: 'rgba(228, 246, 255, 1)',
+    animationSpeed: 1,
+    randomness: 0.01,
+    borderSpeedMultiplier: 1,
+    glowLayers: [
+      {
+        glowPlacement: 'behind',
+        colors: ['#00FFFF', '#E0FFFF'],
+        glowSize: 10,
+        opacity: 0.4,
+        speedMultiplier: 1,
+        coverage: 1,
+        relativeOffset: 0,
+      },
+      {
+        glowPlacement: 'behind',
+        colors: ['#FFFFFF', '#AFEEEE'],
+        glowSize: 4,
+        opacity: 1,
+        speedMultiplier: 1,
+        coverage: 1,
+        relativeOffset: 0,
+      },
+    ],
+  },
+  auroraBorealis: {
+    cornerRadius: 30,
+    outlineWidth: 0,
+    borderColor: 'white',
+    backgroundColor: '#222',
+    animationSpeed: 1,
+    randomness: 0.01,
+    borderSpeedMultiplier: 1,
+    glowLayers: [
+      {
+        glowPlacement: 'behind',
+        colors: ['#4ef96d', '#33a0ff', '#f5519f'],
+        glowSize: 30,
+        opacity: 0.1,
+        speedMultiplier: 1,
+        coverage: 1,
+        relativeOffset: 0,
+      },
+      {
+        glowPlacement: 'behind',
+        colors: ['#4ef96d', 'rgba(116, 159, 255, 1)', 'rgba(255, 114, 170, 1)'],
+        glowSize: 10,
+        opacity: 0.5,
+        speedMultiplier: 0.8,
+        coverage: 1,
+        relativeOffset: 0,
+      },
+      {
+        glowPlacement: 'behind',
+        colors: ['#4ef96d', 'rgba(116, 159, 255, 1)', 'rgba(255, 114, 170, 1)'],
+        glowSize: 3,
+        opacity: 1,
+        speedMultiplier: 0.8,
+        coverage: 1,
+        relativeOffset: 0,
+      },
+    ],
+  },
+} as const;
+
+interface GlowingButtonProps {
+  preset: keyof typeof presets; // Only allows valid preset keys
+  label: string;
+}
+
+export default function GlowingButton({ preset, label }: GlowingButtonProps) {
+  const theme = useThemeConfig();
+  return (
+    <AnimatedGlow preset={presets[preset] as unknown as PresetConfig}>
+      <View
+        className="rounded-full p-5"
+        style={{ backgroundColor: theme.colors.secondary }}
+      >
+        <Text
+          className="text-center text-base font-semibold"
+          style={{ color: theme.colors.secondaryForeground }}
+        >
+          {label}
+        </Text>
+      </View>
+    </AnimatedGlow>
+  );
+}

package/recipes/glowing-button/recipe.json

@@ -0,0 +1,15 @@
+{
+  "name": "glowing-button",
+  "version": "1.0.0",
+  "description": "Animated glowing button with multiple presets",
+  "target": "native",
+  "copy": [
+    {
+      "from": "apps/native/src/components/advanced-ui/buttons",
+      "to": "apps/native/src/components/advanced-ui/buttons"
+    }
+  ],
+  "dependencies": {
+    "expo": ["react-native-reanimated"]
+  }
+}

package/scripts/create-advanced-ui-recipes.sh

@@ -0,0 +1,57 @@
+#!/bin/bash
+
+# Create advanced UI recipes from monorepo components
+
+RECIPES_DIR="recipes"
+MONOREPO="../vibefast-monorepo"
+
+# Define advanced UI components
+declare -A COMPONENTS=(
+  ["glowing-button"]="buttons"
+  ["animated-chip"]="chip"
+  ["number-stepper"]="stepper"
+  ["animated-switch"]="switch"
+  ["progress-circle"]="progress-bars"
+  ["swipe-slider"]="sliders"
+  ["timeline"]="timeline"
+)
+
+for component in "${!COMPONENTS[@]}"; do
+  folder="${COMPONENTS[$component]}"
+  echo "Creating recipe for $component from $folder..."
+  
+  # Create recipe directory structure
+  mkdir -p "$RECIPES_DIR/$component/apps/native/src/components/advanced-ui/$folder"
+  
+  # Copy component files
+  cp -r "$MONOREPO/apps/native/src/components/advanced-ui/$folder"/* \
+    "$RECIPES_DIR/$component/apps/native/src/components/advanced-ui/$folder/" 2>/dev/null || true
+  
+  # Create recipe.json
+  cat > "$RECIPES_DIR/$component/recipe.json" <<EOF
+{
+  "name": "$component",
+  "version": "1.0.0",
+  "description": "Advanced UI component: $component",
+  "target": "native",
+  "copy": [
+    {
+      "from": "apps/native/src/components/advanced-ui/$folder",
+      "to": "apps/native/src/components/advanced-ui/$folder"
+    }
+  ],
+  "dependencies": {
+    "expo": [
+      "react-native-reanimated",
+      "react-native-gesture-handler"
+    ]
+  }
+}
+EOF
+
+  echo "✓ Created $component recipe"
+done
+
+echo ""
+echo "All advanced UI recipes created!"
+echo "Now run: ./recipes/upload-all.sh"

package/src/core/recipes.ts

@@ -83,49 +83,13 @@ export const RECIPES: RecipeInfo[] = [
     icon: '💳',
   },
   
-  // Advanced UI Components
+  // Advanced UI
   {
     name: 'glowing-button',
     category: 'advanced-ui',
     description: 'Animated glowing button with presets',
     icon: '✨',
   },
-  {
-    name: 'animated-chip',
-    category: 'advanced-ui',
-    description: 'Animated chip component',
-    icon: '🏷️',
-  },
-  {
-    name: 'number-stepper',
-    category: 'advanced-ui',
-    description: 'Number stepper with animations',
-    icon: '🔢',
-  },
-  {
-    name: 'animated-switch',
-    category: 'advanced-ui',
-    description: 'Smooth animated switch',
-    icon: '🎚️',
-  },
-  {
-    name: 'progress-circle',
-    category: 'advanced-ui',
-    description: 'Circular progress indicator',
-    icon: '⭕',
-  },
-  {
-    name: 'swipe-slider',
-    category: 'advanced-ui',
-    description: 'Swipeable slider component',
-    icon: '👆',
-  },
-  {
-    name: 'timeline',
-    category: 'advanced-ui',
-    description: 'Timeline view component',
-    icon: '📅',
-  },
 ];
 
 /**