vibefast-cli 0.7.0 → 0.7.1

package/2/apps/native/src/features/charts/components/column-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;
-  animated?: boolean;
-  duration?: number;
-}
-
-interface ChartDataPoint {
-  label: string;
-  value: number;
-  color?: string;
-}
-
-type Props = {
-  data: ChartDataPoint[];
-  config?: ChartConfig;
-  style?: ViewStyle;
-};
-
-export const ColumnChart = ({ data, config = {}, style }: Props) => {
-  const [containerWidth, setContainerWidth] = useState(300);
-  const {
-    height = 200,
-    padding = 20,
-    showLabels = true,
-    animated = true,
-    duration = 800,
-  } = 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 barHeight = (chartHeight / data.length) * 0.8;
-  const barSpacing = (chartHeight / data.length) * 0.2;
-
-  return (
-    <View style={[{ width: '100%', height }, style]} onLayout={onLayout}>
-      <Canvas style={{ width: chartWidth, height }}>
-        <Group>
-          {data.map((item, index) => {
-            const w = (item.value / maxValue) * innerChartWidth * progress;
-            const x = padding;
-            const y =
-              padding + index * (barHeight + barSpacing) + barSpacing / 2;
-            return (
-              <RoundedRect
-                key={`bar-${index}`}
-                x={x}
-                y={y}
-                width={w}
-                height={barHeight}
-                color={(item.color || primaryColor) as string}
-                r={4}
-              />
-            );
-          })}
-        </Group>
-      </Canvas>
-      {showLabels && (
-        <Svg
-          width={chartWidth}
-          height={height}
-          style={{ position: 'absolute', left: 0, top: 0 }}
-        >
-          {data.map((item, index) => {
-            const w = (item.value / maxValue) * innerChartWidth;
-            const x = padding;
-            const y =
-              padding + index * (barHeight + barSpacing) + barSpacing / 2;
-            return (
-              <React.Fragment key={`label-${index}`}>
-                <SvgText
-                  x={padding - 10}
-                  y={y + barHeight / 2}
-                  textAnchor="end"
-                  fontSize={12}
-                  fill={mutedColor}
-                  alignmentBaseline="middle"
-                >
-                  {item.label}
-                </SvgText>
-                <SvgText
-                  x={x + w + 10}
-                  y={y + barHeight / 2}
-                  textAnchor="start"
-                  fontSize={11}
-                  fill={mutedColor}
-                  fontWeight="600"
-                  alignmentBaseline="middle"
-                >
-                  {item.value}
-                </SvgText>
-              </React.Fragment>
-            );
-          })}
-        </Svg>
-      )}
-    </View>
-  );
-};

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

@@ -1,260 +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, useMemo, 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 {
-  width?: number;
-  height?: number;
-  showLabels?: boolean; // not rendered in Skia v1 (no font binding yet)
-  animated?: boolean;
-  duration?: number;
-  innerRadius?: number; // ratio 0..1
-}
-
-interface ChartDataPoint {
-  label: string;
-  value: number;
-  color?: string;
-}
-
-type Props = {
-  data: ChartDataPoint[];
-  config?: ChartConfig;
-  style?: ViewStyle;
-};
-
-const makeDonutSlicePath = (
-  cx: number,
-  cy: number,
-  outerR: number,
-  innerR: number,
-  startAngle: number,
-  endAngle: number,
-) => {
-  const largeArcFlag = endAngle - startAngle > Math.PI ? 1 : 0;
-
-  const x1 = cx + outerR * Math.cos(startAngle);
-  const y1 = cy + outerR * Math.sin(startAngle);
-  const x2 = cx + outerR * Math.cos(endAngle);
-  const y2 = cy + outerR * Math.sin(endAngle);
-
-  const x3 = cx + innerR * Math.cos(endAngle);
-  const y3 = cy + innerR * Math.sin(endAngle);
-  const x4 = cx + innerR * Math.cos(startAngle);
-  const y4 = cy + innerR * Math.sin(startAngle);
-
-  const pathData = [
-    `M ${x1} ${y1}`,
-    `A ${outerR} ${outerR} 0 ${largeArcFlag} 1 ${x2} ${y2}`,
-    `L ${x3} ${y3}`,
-    `A ${innerR} ${innerR} 0 ${largeArcFlag} 0 ${x4} ${y4}`,
-    'Z',
-  ].join(' ');
-
-  return Skia.Path.MakeFromSVGString(pathData) || Skia.Path.Make();
-};
-
-export const DoughnutChart = ({ data, config = {}, style }: Props) => {
-  const [containerWidth, setContainerWidth] = useState(300);
-  const {
-    height = 200,
-    animated = true,
-    duration = 1000,
-    innerRadius = 0.5,
-    showLabels = true,
-  } = config;
-
-  const theme = useThemeConfig();
-  const primaryColor = theme.colors.primary as string;
-  const chartWidth = containerWidth || config.width || 300;
-  const centerX = chartWidth / 2;
-  const centerY = height / 2;
-
-  const total = Math.max(
-    1,
-    data.reduce((s, d) => s + d.value, 0),
-  );
-  const outerR = Math.min(chartWidth, height) / 2 - 20;
-  const innerR = outerR * innerRadius;
-
-  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 success500 = theme.colors.success[500];
-  const warning500 = theme.colors.warning[500];
-  const danger500 = theme.colors.danger[500];
-  const neutral500 = theme.colors.neutral[500];
-
-  const primary600 = theme.colors.primary[600];
-  const success600 = theme.colors.success[600];
-  const warning600 = theme.colors.warning[600];
-  const danger600 = theme.colors.danger[600];
-  const neutral600 = theme.colors.neutral[600];
-
-  // fallback palette based on theme
-  const colors = useMemo(
-    () =>
-      [
-        primaryColor,
-        success500,
-        warning500,
-        danger500,
-        neutral500,
-        primary600,
-        success600,
-        warning600,
-        danger600,
-        neutral600,
-      ] as string[],
-    [
-      primaryColor,
-      success500,
-      warning500,
-      danger500,
-      neutral500,
-      primary600,
-      success600,
-      warning600,
-      danger600,
-      neutral600,
-    ],
-  );
-
-  // Calculate cumulative data properly to avoid mutation
-  const cumulativeData = useMemo(() => {
-    if (!data.length) return [];
-    let accumulatedStart = -Math.PI / 2;
-    return data.map((item, idx) => {
-      const delta = (item.value / total) * Math.PI * 2 * progress;
-      const start = accumulatedStart;
-      const end = start + delta;
-      accumulatedStart = end;
-      const color = (item.color || colors[idx % colors.length]) as string;
-      const path = makeDonutSlicePath(
-        centerX,
-        centerY,
-        outerR,
-        innerR,
-        start,
-        end,
-      );
-      return { path, color, key: `slice-${idx}` };
-    });
-  }, [data, total, progress, centerX, centerY, outerR, innerR, colors]);
-
-  if (!data.length) return null;
-
-  return (
-    <View style={[{ width: '100%' }, style]} onLayout={onLayout}>
-      <Canvas style={{ width: chartWidth, height }}>
-        <Group>
-          {cumulativeData.map(({ path, color, key }) => (
-            <SkPath key={key} path={path} color={color} style="fill" />
-          ))}
-        </Group>
-      </Canvas>
-      {showLabels && (
-        <Svg
-          width={chartWidth}
-          height={height}
-          style={{ position: 'absolute', left: 0, top: 0 }}
-        >
-          {(() => {
-            return data.map((item, idx) => {
-              const startAngle = data
-                .slice(0, idx)
-                .reduce(
-                  (sum, d) => sum + (d.value / total) * Math.PI * 2,
-                  -Math.PI / 2,
-                );
-              const slice = (item.value / total) * Math.PI * 2;
-              const mid = startAngle + slice / 2;
-              const r = (outerR + innerR) / 2;
-              const lx = centerX + r * Math.cos(mid);
-              const ly = centerY + r * Math.sin(mid);
-              return (
-                <SvgText
-                  key={`label-${idx}`}
-                  x={lx}
-                  y={ly}
-                  textAnchor="middle"
-                  fontSize={12}
-                  fill={theme.colors.foreground as string}
-                  fontWeight="600"
-                >
-                  {Math.round((item.value / total) * 100)}%
-                </SvgText>
-              );
-            });
-          })()}
-        </Svg>
-      )}
-      {/* Legend */}
-      <View style={{ marginTop: 10 }}>
-        {data.map((item, index) => (
-          <View
-            key={`legend-${index}`}
-            style={{
-              flexDirection: 'row',
-              alignItems: 'center',
-              marginBottom: 5,
-            }}
-          >
-            <View
-              style={{
-                width: 12,
-                height: 12,
-                borderRadius: 6,
-                backgroundColor:
-                  item.color || (colors[index % colors.length] as string),
-                marginRight: 8,
-              }}
-            />
-            <Text
-              className="text-xs"
-              style={{ color: theme.colors.mutedForeground }}
-            >
-              {item.label}: {item.value}
-            </Text>
-          </View>
-        ))}
-      </View>
-    </View>
-  );
-};

package/2/apps/native/src/features/charts/components/index.ts

@@ -1,13 +0,0 @@
-// vibefast license: c1e9fcd2-muhammad
-// vibefast license: c1e9fcd2-muhammad
-// vibefast license: c1e9fcd2-muhammad
-export { AreaChart } from './area-chart';
-export { BarChart } from './bar-chart';
-export { CandlestickChart } from './candlestick-chart';
-export { ColumnChart } from './column-chart';
-export { DoughnutChart } from './doughnut-chart';
-export { LineChart } from './line-chart';
-export { RadarChart } from './radar-chart';
-export { RadialBarChart } from './radial-bar-chart';
-export { StackedAreaChart } from './stacked-area-chart';
-export { StackedBarChart } from './stacked-bar-chart';