vibefast-cli 0.7.0 → 0.7.1

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

@@ -1,226 +0,0 @@
-// vibefast license: c1e9fcd2-muhammad
-// vibefast license: c1e9fcd2-muhammad
-// vibefast license: c1e9fcd2-muhammad
-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/2/apps/native/src/features/charts/components/area-chart.tsx

@@ -1,43 +0,0 @@
-// vibefast license: c1e9fcd2-muhammad
-// vibefast license: c1e9fcd2-muhammad
-// vibefast license: c1e9fcd2-muhammad
-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/2/apps/native/src/features/charts/components/bar-chart.tsx

@@ -1,146 +0,0 @@
-// vibefast license: c1e9fcd2-muhammad
-// vibefast license: c1e9fcd2-muhammad
-// vibefast license: c1e9fcd2-muhammad
-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/2/apps/native/src/features/charts/components/candlestick-chart.tsx

@@ -1,199 +0,0 @@
-// vibefast license: c1e9fcd2-muhammad
-// vibefast license: c1e9fcd2-muhammad
-// vibefast license: c1e9fcd2-muhammad
-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/2/apps/native/src/features/charts/components/chart-card.tsx

@@ -1,68 +0,0 @@
-// vibefast license: c1e9fcd2-muhammad
-// vibefast license: c1e9fcd2-muhammad
-// vibefast license: c1e9fcd2-muhammad
-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;