vibefast-cli 0.7.0 → 0.7.1

package/2/apps/native/src/features/charts/components/line-chart.tsx

@@ -1,311 +0,0 @@
-// vibefast license: c1e9fcd2-muhammad
-// vibefast license: c1e9fcd2-muhammad
-// vibefast license: c1e9fcd2-muhammad
-import {
-  Canvas,
-  Circle,
-  Group,
-  LinearGradient,
-  Path as SkPath,
-  Skia,
-  vec,
-} from '@shopify/react-native-skia';
-import React, { useEffect, useMemo, useState } from 'react';
-import { type LayoutChangeEvent, View, type ViewStyle } from 'react-native';
-import Svg, { G, 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; // not rendered in Skia v1 (no font binding yet)
-  animated?: boolean;
-  duration?: number;
-  gradient?: boolean;
-  interactive?: boolean; // not implemented in Skia v1
-  showYLabels?: boolean; // not rendered in Skia v1
-  yLabelCount?: number;
-  yAxisWidth?: number;
-}
-
-export type ChartDataPoint = {
-  x: string | number;
-  y: number;
-  label?: string;
-};
-
-type Props = {
-  data: ChartDataPoint[];
-  config?: ChartConfig;
-  style?: ViewStyle;
-};
-
-const makeSmoothPath = (points: { x: number; y: number }[]) => {
-  const p = Skia.Path.Make();
-  if (!points.length) return p;
-  p.moveTo(points[0].x, points[0].y);
-  for (let i = 1; i < points.length; i++) {
-    const prev = points[i - 1];
-    const curr = points[i];
-    const cpx = (prev.x + curr.x) / 2;
-    const cpy = prev.y;
-    p.quadTo(cpx, cpy, curr.x, curr.y);
-  }
-  return p;
-};
-
-const makeAreaPath = (
-  points: { x: number; y: number }[],
-  height: number,
-  padding: number,
-) => {
-  const p = makeSmoothPath(points).copy();
-  if (!points.length) return p;
-  const last = points[points.length - 1];
-  const first = points[0];
-  p.lineTo(last.x, height - padding);
-  p.lineTo(first.x, height - padding);
-  p.close();
-  return p;
-};
-
-const withAlpha = (hex: string, alpha: number) => {
-  // alpha 0..1 -> 00..FF
-  const a = Math.round(Math.min(1, Math.max(0, alpha)) * 255)
-    .toString(16)
-    .padStart(2, '0');
-  if (hex.startsWith('#') && (hex.length === 7 || hex.length === 9)) {
-    // #RRGGBB or #RRGGBBAA
-    return hex.length === 7 ? `${hex}${a}` : `${hex.slice(0, 7)}${a}`;
-  }
-  return hex; // fallback
-};
-
-const formatNumber = (num: number): string => {
-  if (num >= 1000000) return (num / 1000000).toFixed(1) + 'M';
-  if (num >= 1000) return (num / 1000).toFixed(1) + 'K';
-  return num.toFixed(0);
-};
-
-export const LineChart = ({ data, config = {}, style }: Props) => {
-  const hasData = data.length > 0;
-  const [containerWidth, setContainerWidth] = useState(300);
-  const [progress, setProgress] = useState(1);
-  const {
-    height = 200,
-    padding = 20,
-    showGrid = true,
-    animated = true,
-    duration = 1000,
-    gradient = false,
-    showYLabels = true,
-    yLabelCount = 5,
-    yAxisWidth = 20,
-  } = 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 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 || 1000));
-      setProgress(easeInOutCubic(t));
-      if (t < 1) raf = requestAnimationFrame(tick);
-    };
-    setProgress(0);
-    raf = requestAnimationFrame(tick);
-    return () => cancelAnimationFrame(raf);
-  }, [animated, duration, data]);
-
-  const maxValue = hasData ? Math.max(...data.map((d) => d.y)) : 0;
-  const minValue = hasData ? Math.min(...data.map((d) => d.y)) : 0;
-  const valueRange = hasData ? maxValue - minValue || 1 : 1;
-
-  const leftPadding = showYLabels ? padding + yAxisWidth : padding;
-  const innerChartWidth = chartWidth - leftPadding - padding;
-  const chartHeight = height - padding * 2;
-
-  const points = useMemo(
-    () =>
-      (hasData ? data : []).map((point, index) => ({
-        x:
-          leftPadding +
-          (index / Math.max(1, data.length - 1)) * innerChartWidth,
-        y: padding + ((maxValue - point.y) / valueRange) * chartHeight,
-      })),
-    [
-      data,
-      hasData,
-      leftPadding,
-      innerChartWidth,
-      padding,
-      maxValue,
-      valueRange,
-      chartHeight,
-    ],
-  );
-
-  const path = makeSmoothPath(points);
-  const areaPath = gradient ? makeAreaPath(points, height, padding) : undefined;
-
-  // Simple horizontal grid lines
-  const yAxisLabels = useMemo(() => {
-    const labels: { value: number; y: number }[] = [];
-    const count = yLabelCount;
-    for (let i = 0; i < count; i++) {
-      const ratio = i / (count - 1);
-      const value = maxValue - ratio * valueRange;
-      const y = padding + ratio * chartHeight;
-      labels.push({ value, y });
-    }
-    return labels;
-  }, [yLabelCount, padding, chartHeight, maxValue, valueRange]);
-
-  const gridYs: number[] = useMemo(
-    () => (showGrid ? yAxisLabels.map((l) => l.y) : []),
-    [showGrid, yAxisLabels],
-  );
-
-  // Batch grid lines into a single path each to reduce draw calls
-  const gridHPath = useMemo(() => {
-    const p = Skia.Path.Make();
-    if (!showGrid) return p;
-    for (const y of gridYs) {
-      p.moveTo(leftPadding, y);
-      p.lineTo(chartWidth - padding, y);
-    }
-    return p;
-  }, [showGrid, gridYs, leftPadding, chartWidth, padding]);
-
-  const gridVPath = useMemo(() => {
-    const p = Skia.Path.Make();
-    if (!showGrid) return p;
-    for (const pt of points) {
-      p.moveTo(pt.x, padding);
-      p.lineTo(pt.x, height - padding);
-    }
-    return p;
-  }, [showGrid, points, padding, height]);
-
-  if (!hasData) return null;
-
-  return (
-    <View style={[{ width: '100%', height }, style]} onLayout={onLayout}>
-      <Canvas style={{ width: chartWidth, height }}>
-        {showGrid && (
-          <Group>
-            <SkPath
-              path={gridHPath}
-              color={mutedColor}
-              style="stroke"
-              strokeWidth={0.5}
-              opacity={0.3}
-            />
-            <SkPath
-              path={gridVPath}
-              color={mutedColor}
-              style="stroke"
-              strokeWidth={0.5}
-              opacity={0.2}
-            />
-          </Group>
-        )}
-
-        {gradient && areaPath && (
-          <SkPath path={areaPath} style="fill">
-            <LinearGradient
-              start={vec(0, padding)}
-              end={vec(0, height - padding)}
-              colors={[
-                withAlpha(primaryColor, 0.3),
-                withAlpha(primaryColor, 0.05),
-              ]}
-            />
-          </SkPath>
-        )}
-
-        <SkPath
-          path={path}
-          color={primaryColor}
-          style="stroke"
-          strokeWidth={2}
-          strokeJoin="round"
-          strokeCap="round"
-          start={0}
-          end={progress}
-        />
-
-        {points.map((pt, idx) => (
-          <Circle
-            key={`pt-${idx}`}
-            cx={pt.x}
-            cy={pt.y}
-            r={3}
-            color={primaryColor}
-            opacity={progress}
-          />
-        ))}
-      </Canvas>
-      {/* Labels overlays for parity with SVG */}
-      {(config.showYLabels || config.showLabels) && (
-        <Svg
-          width={chartWidth}
-          height={height}
-          style={{ position: 'absolute', left: 0, top: 0 }}
-        >
-          {config.showYLabels && (
-            <G>
-              {yAxisLabels.map((label, index) => (
-                <SvgText
-                  key={`y-label-${index}`}
-                  x={leftPadding - 10}
-                  y={label.y + 4}
-                  textAnchor="end"
-                  fontSize={10}
-                  fill={mutedColor}
-                >
-                  {formatNumber(label.value)}
-                </SvgText>
-              ))}
-            </G>
-          )}
-          {config.showLabels && (
-            <G>
-              {data.map((point, index) => (
-                <SvgText
-                  key={`x-label-${index}`}
-                  x={points[index].x}
-                  y={height - 5}
-                  textAnchor="middle"
-                  fontSize={10}
-                  fill={mutedColor}
-                >
-                  {point.label || String(point.x)}
-                </SvgText>
-              ))}
-            </G>
-          )}
-        </Svg>
-      )}
-    </View>
-  );
-};

package/2/apps/native/src/features/charts/components/radar-chart.tsx

@@ -1,183 +0,0 @@
-// vibefast license: c1e9fcd2-muhammad
-// vibefast license: c1e9fcd2-muhammad
-// vibefast license: c1e9fcd2-muhammad
-import {
-  Canvas,
-  Circle as SkCircle,
-  Path as SkPath,
-  Skia,
-} from '@shopify/react-native-skia';
-import React, { useEffect, useMemo, 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;
-  showLabels?: boolean;
-  animated?: boolean;
-  duration?: number;
-  maxValue?: number;
-}
-
-interface RadarChartDataPoint {
-  label: string;
-  value: number;
-}
-
-type Props = {
-  data: RadarChartDataPoint[];
-  config?: ChartConfig;
-  style?: ViewStyle;
-};
-
-export const RadarChart = ({ data, config = {}, style }: Props) => {
-  const hasData = data.length > 0;
-  const [containerWidth, setContainerWidth] = useState(300);
-  const {
-    height = 200,
-    showLabels = true,
-    animated = true,
-    duration = 1000,
-    maxValue,
-  } = 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 || 1000));
-      setProgress(easeInOutCubic(t));
-      if (t < 1) raf = requestAnimationFrame(tick);
-    };
-    setProgress(0);
-    raf = requestAnimationFrame(tick);
-    return () => cancelAnimationFrame(raf);
-  }, [animated, duration, data]);
-
-  const centerX = chartWidth / 2;
-  const centerY = height / 2;
-  const radius = Math.min(chartWidth, height) / 2 - 40;
-  const maxVal =
-    maxValue || (hasData ? Math.max(...data.map((d) => d.value)) : 1);
-
-  const angleStep = hasData ? (2 * Math.PI) / data.length : 0;
-  const points = useMemo(() => {
-    return (hasData ? data : []).map((item, index) => {
-      const angle = index * angleStep - Math.PI / 2;
-      const dist = (item.value / maxVal) * radius * progress;
-      return {
-        x: centerX + dist * Math.cos(angle),
-        y: centerY + dist * Math.sin(angle),
-        labelX: centerX + (radius + 20) * Math.cos(angle),
-        labelY: centerY + (radius + 20) * Math.sin(angle),
-        label: item.label,
-      };
-    });
-  }, [data, hasData, angleStep, centerX, centerY, radius, progress, maxVal]);
-
-  const radarPath = useMemo(() => {
-    if (!points.length) return Skia.Path.Make();
-    const p = Skia.Path.Make();
-    p.moveTo(points[0].x, points[0].y);
-    for (let i = 1; i < points.length; i++) p.lineTo(points[i].x, points[i].y);
-    p.close();
-    return p;
-  }, [points]);
-
-  if (!hasData) return null;
-
-  return (
-    <View style={[{ width: '100%', height }, style]} onLayout={onLayout}>
-      <Canvas style={{ width: chartWidth, height }}>
-        {/* Grid circles */}
-        {[0.2, 0.4, 0.6, 0.8, 1].map((ratio, idx) => (
-          <SkCircle
-            key={`grid-${idx}`}
-            cx={centerX}
-            cy={centerY}
-            r={radius * ratio}
-            color={mutedColor}
-            style="stroke"
-            strokeWidth={0.5}
-            opacity={0.3}
-          />
-        ))}
-        {/* Grid spokes */}
-        {(() => {
-          const p = Skia.Path.Make();
-          data.forEach((_, index) => {
-            const angle = index * angleStep - Math.PI / 2;
-            const endX = centerX + radius * Math.cos(angle);
-            const endY = centerY + radius * Math.sin(angle);
-            p.moveTo(centerX, centerY);
-            p.lineTo(endX, endY);
-          });
-          return (
-            <SkPath
-              path={p}
-              color={mutedColor}
-              style="stroke"
-              strokeWidth={0.5}
-              opacity={0.3}
-            />
-          );
-        })()}
-        {/* Radar polygon */}
-        <SkPath
-          path={radarPath}
-          color={primaryColor}
-          style="stroke"
-          strokeWidth={2}
-        />
-        <SkPath
-          path={radarPath}
-          color={primaryColor}
-          style="fill"
-          opacity={0.3}
-        />
-      </Canvas>
-      {showLabels && (
-        <Svg
-          width={chartWidth}
-          height={height}
-          style={{ position: 'absolute', left: 0, top: 0 }}
-        >
-          {points.map((pt, idx) => (
-            <SvgText
-              key={`label-${idx}`}
-              x={pt.labelX}
-              y={pt.labelY}
-              textAnchor="middle"
-              fontSize={12}
-              fill={mutedColor}
-            >
-              {pt.label}
-            </SvgText>
-          ))}
-        </Svg>
-      )}
-    </View>
-  );
-};

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

@@ -1,191 +0,0 @@
-// vibefast license: c1e9fcd2-muhammad
-// vibefast license: c1e9fcd2-muhammad
-// vibefast license: c1e9fcd2-muhammad
-import {
-  Canvas,
-  Group,
-  Path as SkPath,
-  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 { Text } from '@/components/ui';
-import { useThemeConfig } from '@/lib/use-theme-config';
-
-interface ChartConfig {
-  padding?: number;
-  animated?: boolean;
-  duration?: number;
-  gradient?: boolean; // not applied to stroke in Skia v1; using solid color
-}
-
-interface ChartDataPoint {
-  label: string;
-  value: number;
-  color?: string;
-}
-
-type Props = {
-  data: ChartDataPoint[];
-  config?: ChartConfig;
-  style?: ViewStyle;
-};
-
-export const RadialBarChart = ({ data, config = {}, style }: Props) => {
-  const [containerSize, setContainerSize] = useState(200);
-  const { padding = 20, animated = true, duration = 1000 } = config;
-
-  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, height } = e.nativeEvent.layout;
-    const size = Math.min(width, height);
-    if (size > 0) setContainerSize(size);
-  };
-
-  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 || 1000));
-      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 size = containerSize || 200;
-  const center = size / 2;
-  const maxRadius = (size - padding * 2) / 2;
-  const strokeWidth = maxRadius / (data.length + 1);
-
-  const colors = [
-    primaryColor,
-    '#3B82F6',
-    '#10B981',
-    '#F59E0B',
-    '#8B5CF6',
-    '#EC4899',
-  ];
-
-  return (
-    <View style={[{ width: '100%' }, style]}>
-      <View
-        style={{
-          width: '100%',
-          height: size,
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}
-        onLayout={onLayout}
-      >
-        <Canvas style={{ width: size, height: size }}>
-          <Group>
-            {data.map((item, index) => {
-              const r = maxRadius - index * strokeWidth - strokeWidth / 2;
-              const track = Skia.Path.Make();
-              track.addCircle(center, center, r);
-              const arc = Skia.Path.Make();
-              arc.addCircle(center, center, r);
-              const color = (item.color ||
-                colors[index % colors.length]) as string;
-              const end = (item.value / maxValue) * progress;
-              return (
-                <React.Fragment key={`rb-${index}`}>
-                  <SkPath
-                    path={track}
-                    color={mutedColor}
-                    style="stroke"
-                    strokeWidth={strokeWidth * 0.8}
-                    opacity={0.15}
-                  />
-                  <SkPath
-                    path={arc}
-                    color={color}
-                    style="stroke"
-                    strokeWidth={strokeWidth * 0.8}
-                    start={0}
-                    end={end}
-                    strokeCap="round"
-                  />
-                </React.Fragment>
-              );
-            })}
-          </Group>
-        </Canvas>
-        {/* Center values */}
-        {data.length > 0 && (
-          <Svg
-            width={size}
-            height={size}
-            style={{ position: 'absolute', left: 0, top: 0 }}
-          >
-            <SvgText
-              x={center}
-              y={center - 5}
-              textAnchor="middle"
-              fontSize={16}
-              fill={primaryColor}
-              fontWeight="bold"
-            >
-              {data.reduce((sum, item) => sum + item.value, 0)}
-            </SvgText>
-            <SvgText
-              x={center}
-              y={center + 15}
-              textAnchor="middle"
-              fontSize={12}
-              fill={mutedColor}
-            >
-              Total
-            </SvgText>
-          </Svg>
-        )}
-      </View>
-      {/* Legend */}
-      <View style={{ marginTop: 15 }}>
-        {data.map((item, index) => (
-          <View
-            key={`legend-${index}`}
-            style={{
-              flexDirection: 'row',
-              alignItems: 'center',
-              marginBottom: 8,
-            }}
-          >
-            <View
-              style={{
-                width: 12,
-                height: 12,
-                borderRadius: 6,
-                backgroundColor: item.color || colors[index % colors.length],
-                marginRight: 10,
-              }}
-            />
-            <Text>
-              {item.label}: {item.value}
-            </Text>
-          </View>
-        ))}
-      </View>
-    </View>
-  );
-};