vibefast-cli 0.1.1

package/recipes/charts/apps/native/src/features/charts/app/preview.tsx

@@ -0,0 +1,223 @@
+import type React from 'react';
+import { FlatList } from 'react-native';
+
+import {
+  AreaChart,
+  BarChart,
+  CandlestickChart,
+  ColumnChart,
+  DoughnutChart,
+  LineChart,
+  RadarChart,
+  RadialBarChart,
+  StackedAreaChart,
+  StackedBarChart,
+} from '@/features/charts/components';
+import {
+  areaChartData,
+  candlestickData,
+  lineChartData,
+  radarChartData,
+  radialBarData,
+  salesData,
+  stackedAreaData,
+  stackedBarData,
+  stackedCategories,
+} from '@/features/charts/data/mock-data';
+
+import ChartCard from '../components/chart-card';
+
+const ChartPreviewScreen: React.FC = () => {
+  const largeDataset = [
+    { label: 'E-commerce', value: 285, color: '#FF6B6B' },
+    { label: 'Social Media', value: 245, color: '#4ECDC4' },
+    { label: 'Search Engine', value: 198, color: '#45B7D1' },
+    { label: 'Email Marketing', value: 156, color: '#96CEB4' },
+    { label: 'Direct Traffic', value: 134, color: '#FFEAA7' },
+    { label: 'Referral', value: 89, color: '#DDA0DD' },
+    { label: 'Display Ads', value: 67, color: '#98D8C8' },
+    { label: 'Video Ads', value: 45, color: '#F7DC6F' },
+    { label: 'Affiliate', value: 23, color: '#BB8FCE' },
+    { label: 'Other', value: 18, color: '#AED6F1' },
+  ];
+
+  const chartItems = [
+    {
+      id: 'line',
+      component: (
+        <ChartCard title="Line Chart" subtitle="Smooth curves with gradient">
+          <LineChart
+            data={lineChartData}
+            config={{
+              height: 200,
+              animated: true,
+              gradient: false,
+              showGrid: true,
+              interactive: true,
+            }}
+          />
+        </ChartCard>
+      ),
+    },
+    {
+      id: 'bar',
+      component: (
+        <ChartCard title="Bar Chart" subtitle="Animated bars with values">
+          <BarChart
+            data={salesData.slice(0, 6)}
+            config={{
+              height: 200,
+              animated: true,
+              showLabels: true,
+            }}
+          />
+        </ChartCard>
+      ),
+    },
+    {
+      id: 'area',
+      component: (
+        <ChartCard
+          title="Area Chart"
+          subtitle="Growth trend with gradient fill"
+        >
+          <AreaChart
+            data={areaChartData}
+            config={{ height: 200, animated: true, gradient: true }}
+          />
+        </ChartCard>
+      ),
+    },
+    {
+      id: 'radar',
+      component: (
+        <ChartCard
+          title="Radar Chart"
+          subtitle="Multi-dimensional performance analysis"
+        >
+          <RadarChart
+            data={radarChartData}
+            config={{ height: 250, animated: true }}
+          />
+        </ChartCard>
+      ),
+    },
+    {
+      id: 'radial',
+      component: (
+        <ChartCard
+          title="Radial Bar Chart"
+          subtitle="Circular progress visualization"
+        >
+          <RadialBarChart
+            data={radialBarData}
+            config={{ animated: true, gradient: true }}
+          />
+        </ChartCard>
+      ),
+    },
+    {
+      id: 'doughnut',
+      component: (
+        <ChartCard title="Doughnut Chart" subtitle="">
+          <DoughnutChart
+            data={largeDataset}
+            config={{
+              height: 280,
+              showLabels: false,
+              animated: true,
+              duration: 1200,
+              innerRadius: 0.62,
+            }}
+          />
+        </ChartCard>
+      ),
+    },
+    {
+      id: 'column',
+      component: (
+        <ChartCard title="Column Chart" subtitle="Horizontal bar visualization">
+          <ColumnChart
+            data={salesData.slice(0, 5)}
+            config={{
+              height: 200,
+              animated: true,
+              showLabels: true,
+            }}
+          />
+        </ChartCard>
+      ),
+    },
+    {
+      id: 'candlestick',
+      component: (
+        <ChartCard
+          title="Candlestick Chart"
+          subtitle="Financial OHLC data visualization"
+        >
+          <CandlestickChart
+            data={candlestickData}
+            config={{
+              height: 200,
+              animated: true,
+              showGrid: true,
+              showLabels: true,
+            }}
+          />
+        </ChartCard>
+      ),
+    },
+    {
+      id: 'stacked-bar',
+      component: (
+        <ChartCard
+          title="Stacked Bar Chart"
+          subtitle="Multi-series data comparison"
+        >
+          <StackedBarChart
+            data={stackedBarData}
+            categories={stackedCategories}
+            colors={['#3B82F6', '#10B981', '#F59E0B']}
+            config={{
+              height: 200,
+              animated: true,
+              showLabels: true,
+            }}
+          />
+        </ChartCard>
+      ),
+    },
+    {
+      id: 'stacked-area',
+      component: (
+        <ChartCard
+          title="Stacked Area Chart"
+          subtitle="Cumulative multi-series visualization"
+        >
+          <StackedAreaChart
+            data={stackedAreaData}
+            categories={stackedCategories}
+            colors={['#3B82F6', '#10B981', '#F59E0B']}
+            config={{
+              height: 200,
+              animated: true,
+              showGrid: true,
+            }}
+          />
+        </ChartCard>
+      ),
+    },
+  ];
+
+  return (
+    <FlatList
+      data={chartItems}
+      keyExtractor={(item) => item.id}
+      contentInsetAdjustmentBehavior="automatic"
+      contentContainerStyle={{ padding: 16 }}
+      renderItem={({ item }) => item.component}
+    />
+  );
+};
+
+export default ChartPreviewScreen;

package/recipes/charts/apps/native/src/features/charts/components/area-chart.tsx

@@ -0,0 +1,40 @@
+import type { ViewStyle } from 'react-native';
+
+import { LineChart } from './line-chart';
+
+interface ChartConfig {
+  width?: number;
+  height?: number;
+  padding?: number;
+  showGrid?: boolean;
+  showLabels?: boolean;
+  animated?: boolean;
+  duration?: number;
+  gradient?: boolean;
+  interactive?: boolean;
+  showYLabels?: boolean;
+  yLabelCount?: number;
+  yAxisWidth?: number;
+}
+
+interface ChartDataPoint {
+  x: string | number;
+  y: number;
+  label?: string;
+}
+
+type Props = {
+  data: ChartDataPoint[];
+  config?: ChartConfig;
+  style?: ViewStyle;
+};
+
+export const AreaChart = ({ data, config = {}, style }: Props) => {
+  return (
+    <LineChart
+      data={data}
+      config={{ ...config, gradient: true }}
+      style={style}
+    />
+  );
+};

package/recipes/charts/apps/native/src/features/charts/components/bar-chart.tsx

@@ -0,0 +1,143 @@
+import { Canvas, Group, RoundedRect } from '@shopify/react-native-skia';
+import React, { useEffect, useState } from 'react';
+import { type LayoutChangeEvent, View, type ViewStyle } from 'react-native';
+import Svg, { Text as SvgText } from 'react-native-svg';
+
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+interface ChartConfig {
+  width?: number;
+  height?: number;
+  padding?: number;
+  showLabels?: boolean; // not rendered in Skia v1 (no font binding yet)
+  animated?: boolean;
+  duration?: number;
+}
+
+interface ChartDataPoint {
+  label: string;
+  value: number;
+  color?: string;
+}
+
+type Props = {
+  data: ChartDataPoint[];
+  config?: ChartConfig;
+  style?: ViewStyle;
+};
+
+export const BarChart = ({ data, config = {}, style }: Props) => {
+  const [containerWidth, setContainerWidth] = useState(300);
+  const {
+    height = 200,
+    padding = 20,
+    animated = true,
+    duration = 800,
+    showLabels = true,
+  } = config;
+
+  const chartWidth = containerWidth || config.width || 300;
+
+  const theme = useThemeConfig();
+  const primaryColor = theme.colors.primary as string;
+  const mutedColor = theme.colors.mutedForeground as string;
+
+  const [progress, setProgress] = useState(1);
+
+  const onLayout = (e: LayoutChangeEvent) => {
+    const { width } = e.nativeEvent.layout;
+    if (width > 0) setContainerWidth(width);
+  };
+
+  useEffect(() => {
+    if (!animated) {
+      setProgress(1);
+      return;
+    }
+    let raf: number;
+    const start = Date.now();
+    const easeInOutCubic = (t: number) =>
+      t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2;
+    const tick = () => {
+      const elapsed = Date.now() - start;
+      const t = Math.min(1, elapsed / (duration || 800));
+      setProgress(easeInOutCubic(t));
+      if (t < 1) raf = requestAnimationFrame(tick);
+    };
+    setProgress(0);
+    raf = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(raf);
+  }, [animated, duration, data]);
+
+  if (!data.length) return null;
+
+  const maxValue = Math.max(...data.map((d) => d.value));
+  const innerChartWidth = chartWidth - padding * 2;
+  const chartHeight = height - padding * 2;
+  const barWidth = (innerChartWidth / data.length) * 0.8;
+  const barSpacing = (innerChartWidth / data.length) * 0.2;
+
+  return (
+    <View style={[{ width: '100%', height }, style]} onLayout={onLayout}>
+      <Canvas style={{ width: chartWidth, height }}>
+        <Group>
+          {data.map((item, index) => {
+            const h = (item.value / maxValue) * chartHeight;
+            const x =
+              padding + index * (barWidth + barSpacing) + barSpacing / 2;
+            const y = height - padding - h * progress;
+            return (
+              <RoundedRect
+                key={`bar-${index}`}
+                x={x}
+                y={y}
+                width={barWidth}
+                height={h * progress}
+                color={(item.color || primaryColor) as string}
+                r={4}
+              />
+            );
+          })}
+        </Group>
+      </Canvas>
+      {/* Labels overlay for parity */}
+      {showLabels && (
+        <Svg
+          width={chartWidth}
+          height={height}
+          style={{ position: 'absolute', left: 0, top: 0 }}
+        >
+          {data.map((item, index) => {
+            const h = (item.value / maxValue) * chartHeight;
+            const x =
+              padding + index * (barWidth + barSpacing) + barSpacing / 2;
+            const y = height - padding - h;
+            return (
+              <React.Fragment key={`labels-${index}`}>
+                <SvgText
+                  x={x + barWidth / 2}
+                  y={height - 5}
+                  textAnchor="middle"
+                  fontSize={12}
+                  fill={mutedColor}
+                >
+                  {item.label}
+                </SvgText>
+                <SvgText
+                  x={x + barWidth / 2}
+                  y={y - 5}
+                  textAnchor="middle"
+                  fontSize={11}
+                  fill={mutedColor}
+                  fontWeight="600"
+                >
+                  {item.value}
+                </SvgText>
+              </React.Fragment>
+            );
+          })}
+        </Svg>
+      )}
+    </View>
+  );
+};

package/recipes/charts/apps/native/src/features/charts/components/candlestick-chart.tsx

@@ -0,0 +1,196 @@
+import {
+  Canvas,
+  Group,
+  Path as SkPath,
+  Rect as SkRect,
+  Skia,
+} from '@shopify/react-native-skia';
+import React, { useEffect, useState } from 'react';
+import { type LayoutChangeEvent, View, type ViewStyle } from 'react-native';
+import Svg, { Text as SvgText } from 'react-native-svg';
+
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+interface ChartConfig {
+  width?: number;
+  height?: number;
+  padding?: number;
+  showGrid?: boolean;
+  showLabels?: boolean;
+  animated?: boolean;
+  duration?: number;
+}
+
+interface CandlestickDataPoint {
+  date: string;
+  open: number;
+  high: number;
+  low: number;
+  close: number;
+}
+
+type Props = {
+  data: CandlestickDataPoint[];
+  config?: ChartConfig;
+  style?: ViewStyle;
+};
+
+export const CandlestickChart = ({ data, config = {}, style }: Props) => {
+  const [containerWidth, setContainerWidth] = useState(300);
+
+  const {
+    height = 200,
+    padding = 20,
+    showGrid = true,
+    showLabels = true,
+    animated = true,
+    duration = 800,
+  } = config;
+
+  const chartWidth = containerWidth || config.width || 300;
+
+  const theme = useThemeConfig();
+  const bullishColor = '#10B981';
+  const bearishColor = '#EF4444';
+  const mutedColor = theme.colors.mutedForeground as string;
+
+  const [progress, setProgress] = useState(1);
+
+  const onLayout = (e: LayoutChangeEvent) => {
+    const { width } = e.nativeEvent.layout;
+    if (width > 0) setContainerWidth(width);
+  };
+
+  useEffect(() => {
+    if (!animated) {
+      setProgress(1);
+      return;
+    }
+    let raf: number;
+    const start = Date.now();
+    const easeInOutCubic = (t: number) =>
+      t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2;
+    const tick = () => {
+      const elapsed = Date.now() - start;
+      const t = Math.min(1, elapsed / (duration || 800));
+      setProgress(easeInOutCubic(t));
+      if (t < 1) raf = requestAnimationFrame(tick);
+    };
+    setProgress(0);
+    raf = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(raf);
+  }, [animated, duration, data]);
+
+  if (!data.length) return null;
+
+  const allValues = data.flatMap((d) => [d.open, d.high, d.low, d.close]);
+  const maxValue = Math.max(...allValues);
+  const minValue = Math.min(...allValues);
+  const valueRange = maxValue - minValue || 1;
+
+  const innerChartWidth = chartWidth - padding * 2;
+  const chartHeight = height - padding * 2;
+  const candleWidth = (innerChartWidth / data.length) * 0.6;
+  const candleSpacing = (innerChartWidth / data.length) * 0.4;
+
+  return (
+    <View style={[{ width: '100%', height }, style]} onLayout={onLayout}>
+      <Canvas style={{ width: chartWidth, height }}>
+        {/* Grid lines */}
+        {showGrid && (
+          <Group>
+            {(() => {
+              const p = Skia.Path.Make();
+              [0, 0.25, 0.5, 0.75, 1].forEach((ratio) => {
+                const y = padding + ratio * chartHeight;
+                p.moveTo(padding, y);
+                p.lineTo(chartWidth - padding, y);
+              });
+              return (
+                <SkPath
+                  path={p}
+                  color={mutedColor}
+                  style="stroke"
+                  strokeWidth={0.5}
+                  opacity={0.3}
+                />
+              );
+            })()}
+          </Group>
+        )}
+
+        {/* Candles */}
+        {data.map((item, index) => {
+          const isBullish = item.close >= item.open;
+          const color = isBullish ? bullishColor : bearishColor;
+          const x =
+            padding + index * (candleWidth + candleSpacing) + candleSpacing / 2;
+          const highY =
+            padding + ((maxValue - item.high) / valueRange) * chartHeight;
+          const lowY =
+            padding + ((maxValue - item.low) / valueRange) * chartHeight;
+          const openY =
+            padding + ((maxValue - item.open) / valueRange) * chartHeight;
+          const closeY =
+            padding + ((maxValue - item.close) / valueRange) * chartHeight;
+          const bodyTop = Math.min(openY, closeY);
+          const bodyHeight = Math.abs(closeY - openY) || 1;
+
+          const wick = Skia.Path.Make();
+          wick.moveTo(x + candleWidth / 2, highY);
+          wick.lineTo(x + candleWidth / 2, lowY);
+
+          const y = bodyTop + (1 - progress) * bodyHeight;
+          const h = bodyHeight * progress;
+
+          return (
+            <Group key={`candle-${index}`}>
+              <SkPath
+                path={wick}
+                color={color}
+                style="stroke"
+                strokeWidth={1}
+                opacity={progress}
+              />
+              <SkRect
+                x={x}
+                y={y}
+                width={candleWidth}
+                height={h}
+                color={color}
+              />
+            </Group>
+          );
+        })}
+      </Canvas>
+      {showLabels && (
+        <Svg
+          width={chartWidth}
+          height={height}
+          style={{ position: 'absolute', left: 0, top: 0 }}
+        >
+          {data.map((item, index) => {
+            const x =
+              padding +
+              index * (candleWidth + candleSpacing) +
+              candleSpacing / 2;
+            if (index % Math.max(1, Math.floor(data.length / 5)) !== 0)
+              return null;
+            return (
+              <SvgText
+                key={`lbl-${index}`}
+                x={x}
+                y={height - 5}
+                textAnchor="middle"
+                fontSize={10}
+                fill={mutedColor}
+              >
+                {item.date}
+              </SvgText>
+            );
+          })}
+        </Svg>
+      )}
+    </View>
+  );
+};

package/recipes/charts/apps/native/src/features/charts/components/chart-card.tsx

@@ -0,0 +1,65 @@
+import type React from 'react';
+import { Dimensions, View } from 'react-native';
+
+import { Text } from '@/components/ui';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+const { width: screenWidth } = Dimensions.get('window');
+
+interface ChartCardProps {
+  title: string;
+  subtitle?: string;
+  width?: number;
+  height?: number;
+  children: React.ReactNode;
+}
+
+const ChartCard: React.FC<ChartCardProps> = ({
+  title,
+  subtitle,
+  width = screenWidth - 32,
+  height: _height,
+  children,
+}) => {
+  const theme = useThemeConfig();
+
+  return (
+    <View
+      className="mb-4 overflow-hidden rounded-xl"
+      style={{
+        width,
+        backgroundColor: theme.colors.card,
+        borderColor: theme.colors.outline,
+        borderWidth: 1,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 4,
+        elevation: 2,
+      }}
+    >
+      <View
+        className="border-b p-4"
+        style={{ borderBottomColor: theme.colors.outline }}
+      >
+        <Text
+          className="text-base font-semibold"
+          style={{ color: theme.colors.foreground }}
+        >
+          {title}
+        </Text>
+        {subtitle && (
+          <Text
+            className="mt-1 text-xs"
+            style={{ color: theme.colors.mutedForeground }}
+          >
+            {subtitle}
+          </Text>
+        )}
+      </View>
+      <View className="items-center justify-center p-2">{children}</View>
+    </View>
+  );
+};
+
+export default ChartCard;