vibefast-cli 0.1.1

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

@@ -0,0 +1,322 @@
+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, {
+  G as SvgG,
+  Line as SvgLine,
+  Rect as SvgRect,
+  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;
+}
+
+export interface StackedBarDataPoint {
+  label: string;
+  values: number[];
+}
+
+type Props = {
+  data: StackedBarDataPoint[];
+  colors?: string[];
+  config?: ChartConfig;
+  style?: ViewStyle;
+  categories?: string[];
+  horizontal?: boolean;
+};
+
+export const StackedBarChart = ({
+  data,
+  colors = [],
+  config = {},
+  style,
+  categories = [],
+  horizontal = false,
+}: Props) => {
+  const [containerWidth, setContainerWidth] = useState(300);
+  const {
+    height = 200,
+    padding = 20,
+    showLabels = true,
+    showGrid = 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.values.reduce((s, v) => s + v, 0)),
+  );
+  const seriesCount = data[0]?.values.length || 0;
+  const innerChartWidth = chartWidth - padding * 2;
+  const chartHeight = height - padding * 2;
+
+  const defaultColors = [
+    '#8884d8',
+    '#82ca9d',
+    '#ffc658',
+    '#ff7300',
+    '#00ff00',
+    '#0088fe',
+    primaryColor,
+  ];
+  const seriesColors =
+    colors.length >= seriesCount
+      ? colors
+      : [...colors, ...defaultColors].slice(0, seriesCount);
+
+  if (horizontal) {
+    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 }}>
+          {data.map((item, itemIndex) => {
+            let cumulativeWidth = 0;
+            const y =
+              padding + itemIndex * (barHeight + barSpacing) + barSpacing / 2;
+            return (
+              <Group key={`bar-${itemIndex}`}>
+                {item.values.map((value, valueIndex) => {
+                  const segmentWidth = (value / maxValue) * innerChartWidth;
+                  const w = segmentWidth * progress;
+                  const x = padding + cumulativeWidth;
+                  cumulativeWidth += segmentWidth;
+                  return (
+                    <RoundedRect
+                      key={`seg-${valueIndex}`}
+                      x={x}
+                      y={y}
+                      width={w}
+                      height={barHeight}
+                      color={seriesColors[valueIndex]}
+                      r={2}
+                    />
+                  );
+                })}
+              </Group>
+            );
+          })}
+        </Canvas>
+        {(showGrid || showLabels || categories.length > 0) && (
+          <Svg
+            width={chartWidth}
+            height={height}
+            style={{ position: 'absolute', left: 0, top: 0 }}
+          >
+            {showGrid && (
+              <SvgG>
+                {[0, 0.25, 0.5, 0.75, 1].map((ratio, index) => (
+                  <SvgLine
+                    key={`grid-${index}`}
+                    x1={padding + ratio * innerChartWidth}
+                    y1={padding}
+                    x2={padding + ratio * innerChartWidth}
+                    y2={height - padding}
+                    stroke={mutedColor}
+                    strokeWidth={0.5}
+                    opacity={0.3}
+                  />
+                ))}
+              </SvgG>
+            )}
+            {showLabels && (
+              <SvgG>
+                {data.map((item, itemIndex) => {
+                  const y =
+                    padding +
+                    itemIndex * (barHeight + barSpacing) +
+                    barSpacing / 2;
+                  return (
+                    <SvgText
+                      key={`lbl-${itemIndex}`}
+                      x={padding - 10}
+                      y={y + barHeight / 2 + 4}
+                      textAnchor="end"
+                      fontSize={12}
+                      fill={mutedColor}
+                    >
+                      {item.label}
+                    </SvgText>
+                  );
+                })}
+              </SvgG>
+            )}
+            {categories.length > 0 && (
+              <SvgG>
+                {categories.map((category, index) => (
+                  <React.Fragment key={`legend-${index}`}>
+                    <SvgRect
+                      x={padding + index * 80}
+                      y={height - padding + 10}
+                      width={12}
+                      height={8}
+                      fill={seriesColors[index]}
+                      rx={2}
+                    />
+                    <SvgText
+                      x={padding + index * 80 + 18}
+                      y={height - padding + 18}
+                      fontSize={12}
+                      fill={mutedColor}
+                    >
+                      {category}
+                    </SvgText>
+                  </React.Fragment>
+                ))}
+              </SvgG>
+            )}
+          </Svg>
+        )}
+      </View>
+    );
+  }
+
+  // Vertical stacked bars
+  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, itemIndex) => {
+            const x =
+              padding + itemIndex * (barWidth + barSpacing) + barSpacing / 2;
+            let cumHeight = 0;
+            return item.values.map((value, valueIndex) => {
+              const segmentHeight = (value / maxValue) * chartHeight;
+              cumHeight += segmentHeight;
+              const baseY = height - padding - cumHeight;
+              const h = segmentHeight * progress;
+              const y = baseY + (1 - progress) * segmentHeight;
+              return (
+                <RoundedRect
+                  key={`seg-${itemIndex}-${valueIndex}`}
+                  x={x}
+                  y={y}
+                  width={barWidth}
+                  height={h}
+                  color={seriesColors[valueIndex]}
+                  r={2}
+                />
+              );
+            });
+          })}
+        </Group>
+      </Canvas>
+      {(showGrid || showLabels || categories.length > 0) && (
+        <Svg
+          width={chartWidth}
+          height={height}
+          style={{ position: 'absolute', left: 0, top: 0 }}
+        >
+          {showGrid && (
+            <SvgG>
+              {[0, 0.25, 0.5, 0.75, 1].map((ratio, index) => (
+                <SvgLine
+                  key={`grid-${index}`}
+                  x1={padding}
+                  y1={padding + ratio * chartHeight}
+                  x2={chartWidth - padding}
+                  y2={padding + ratio * chartHeight}
+                  stroke={mutedColor}
+                  strokeWidth={0.5}
+                  opacity={0.3}
+                />
+              ))}
+            </SvgG>
+          )}
+          {showLabels && (
+            <SvgG>
+              {data.map((item, itemIndex) => {
+                const x =
+                  padding +
+                  itemIndex * (barWidth + barSpacing) +
+                  barSpacing / 2;
+                return (
+                  <SvgText
+                    key={`lbl-${itemIndex}`}
+                    x={x + barWidth / 2}
+                    y={height - 5}
+                    textAnchor="middle"
+                    fontSize={12}
+                    fill={mutedColor}
+                  >
+                    {item.label}
+                  </SvgText>
+                );
+              })}
+            </SvgG>
+          )}
+          {categories.length > 0 && (
+            <SvgG>
+              {categories.map((category, index) => (
+                <React.Fragment key={`legend-${index}`}>
+                  <SvgRect
+                    x={padding + index * 80}
+                    y={height - padding + 10}
+                    width={12}
+                    height={8}
+                    fill={seriesColors[index]}
+                    rx={2}
+                  />
+                  <SvgText
+                    x={padding + index * 80 + 18}
+                    y={height - padding + 18}
+                    fontSize={12}
+                    fill={mutedColor}
+                  >
+                    {category}
+                  </SvgText>
+                </React.Fragment>
+              ))}
+            </SvgG>
+          )}
+        </Svg>
+      )}
+    </View>
+  );
+};

package/recipes/charts/apps/native/src/features/charts/data/mock-data.ts

@@ -0,0 +1,183 @@
+export const salesData = [
+  { id: '1', label: 'Jan', value: 3500, color: '#3B82F6' },
+  { id: '2', label: 'Feb', value: 4200, color: '#10B981' },
+  { id: '3', label: 'Mar', value: 5300, color: '#F59E0B' },
+  { id: '4', label: 'Apr', value: 6800, color: '#EF4444' },
+  { id: '5', label: 'May', value: 8200, color: '#8B5CF6' },
+  { id: '6', label: 'Jun', value: 7300, color: '#06B6D4' },
+  { id: '7', label: 'Jul', value: 9100, color: '#84CC16' },
+  { id: '8', label: 'Aug', value: 8300, color: '#F97316' },
+  { id: '9', label: 'Sep', value: 10100, color: '#EC4899' },
+  { id: '10', label: 'Oct', value: 7500, color: '#6366F1' },
+];
+
+export const marketShareData = [
+  { id: '1', label: 'Product A', value: 45, color: '#3B82F6' },
+  { id: '2', label: 'Product B', value: 30, color: '#10B981' },
+  { id: '3', label: 'Product C', value: 25, color: '#F59E0B' },
+];
+
+export const expensesData = [
+  { id: '1', label: 'Rent', value: 2500, color: '#EF4444' },
+  { id: '2', label: 'Salaries', value: 4200, color: '#3B82F6' },
+  { id: '3', label: 'Marketing', value: 1800, color: '#10B981' },
+  { id: '4', label: 'Operations', value: 1500, color: '#F59E0B' },
+  { id: '5', label: 'Equipment', value: 900, color: '#8B5CF6' },
+];
+
+export const userEngagementData = [
+  { id: '1', value: 4500, label: 'App Views' },
+  { id: '2', value: 3200, label: 'Interactions' },
+  { id: '3', value: 2100, label: 'Shares' },
+  { id: '4', value: 1800, label: 'Comments' },
+];
+
+export const quarterlyRevenueData = [
+  { id: '1', label: 'Q1', value: 8500, color: '#3B82F6' },
+  { id: '2', label: 'Q2', value: 12000, color: '#10B981' },
+  { id: '3', label: 'Q3', value: 9800, color: '#F59E0B' },
+  { id: '4', label: 'Q4', value: 15000, color: '#EF4444' },
+];
+
+export const monthlyActiveUsers = [
+  1200, 1350, 1500, 1400, 1650, 1800, 1750, 1900, 2100, 2000, 2200, 2400,
+];
+
+export const monthLabels = [
+  'Jan',
+  'Feb',
+  'Mar',
+  'Apr',
+  'May',
+  'Jun',
+  'Jul',
+  'Aug',
+  'Sep',
+  'Oct',
+  'Nov',
+  'Dec',
+];
+
+export const weeklyVisitors = [1200, 1400, 1300, 1800, 1600, 2000, 2200];
+export const weekLabels = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+
+export const dailyTemperature = [
+  18, 19, 21, 23, 25, 27, 29, 28, 26, 24, 22, 20, 18, 17, 16, 18, 20, 22, 24,
+  26, 25, 23, 21, 19,
+];
+
+export const temperatureLabels = [
+  '00:00',
+  '01:00',
+  '02:00',
+  '03:00',
+  '04:00',
+  '05:00',
+  '06:00',
+  '07:00',
+  '08:00',
+  '09:00',
+  '10:00',
+  '11:00',
+  '12:00',
+  '13:00',
+  '14:00',
+  '15:00',
+  '16:00',
+  '17:00',
+  '18:00',
+  '19:00',
+  '20:00',
+  '21:00',
+  '22:00',
+  '23:00',
+];
+
+export const stockPriceData = [
+  156.78, 158.45, 160.32, 159.98, 162.5, 164.75, 167.23, 166.8, 170.42, 172.15,
+  173.88, 177.62, 180.33, 178.45, 182.76,
+];
+
+export const stockDates = [
+  'Jan 1',
+  'Jan 5',
+  'Jan 10',
+  'Jan 15',
+  'Jan 20',
+  'Jan 25',
+  'Jan 30',
+  'Feb 5',
+  'Feb 10',
+  'Feb 15',
+  'Feb 20',
+  'Feb 25',
+  'Mar 1',
+  'Mar 5',
+  'Mar 10',
+];
+
+export const chartColorPalettes = {
+  primary: ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6'],
+  vibrant: ['#EC4899', '#06B6D4', '#84CC16', '#F97316', '#6366F1'],
+  warm: ['#F59E0B', '#EF4444', '#F97316', '#EC4899', '#DC2626'],
+  cool: ['#3B82F6', '#06B6D4', '#10B981', '#8B5CF6', '#6366F1'],
+  monochrome: ['#6B7280', '#9CA3AF', '#D1D5DB', '#374151', '#111827'],
+};
+
+// New chart data for advanced components
+export const lineChartData = [
+  { x: 'Jan', y: 65, label: 'Jan' },
+  { x: 'Feb', y: 78, label: 'Feb' },
+  { x: 'Mar', y: 90, label: 'Mar' },
+  { x: 'Apr', y: 81, label: 'Apr' },
+  { x: 'May', y: 95, label: 'May' },
+  { x: 'Jun', y: 88, label: 'Jun' },
+];
+
+export const areaChartData = [
+  { x: 'Jan', y: 30, label: 'Jan' },
+  { x: 'Feb', y: 45, label: 'Feb' },
+  { x: 'Mar', y: 60, label: 'Mar' },
+  { x: 'Apr', y: 55, label: 'Apr' },
+  { x: 'May', y: 70, label: 'May' },
+  { x: 'Jun', y: 65, label: 'Jun' },
+];
+
+export const radarChartData = [
+  { label: 'Speed', value: 80 },
+  { label: 'Reliability', value: 90 },
+  { label: 'Comfort', value: 70 },
+  { label: 'Safety', value: 95 },
+  { label: 'Efficiency', value: 85 },
+];
+
+export const radialBarData = [
+  { label: 'Completed', value: 75, color: '#10B981' },
+  { label: 'In Progress', value: 45, color: '#F59E0B' },
+  { label: 'Pending', value: 30, color: '#EF4444' },
+];
+
+export const candlestickData = [
+  { date: 'Jan 1', open: 100, high: 110, low: 95, close: 105 },
+  { date: 'Jan 2', open: 105, high: 115, low: 100, close: 108 },
+  { date: 'Jan 3', open: 108, high: 120, low: 105, close: 115 },
+  { date: 'Jan 4', open: 115, high: 118, low: 110, close: 112 },
+  { date: 'Jan 5', open: 112, high: 125, low: 108, close: 120 },
+];
+
+export const stackedBarData = [
+  { label: 'Q1', values: [20, 30, 25] },
+  { label: 'Q2', values: [25, 35, 30] },
+  { label: 'Q3', values: [30, 25, 35] },
+  { label: 'Q4', values: [35, 40, 30] },
+];
+
+export const stackedAreaData = [
+  { x: 1, y: [20, 30, 25], label: 'Jan' },
+  { x: 2, y: [25, 35, 30], label: 'Feb' },
+  { x: 3, y: [30, 25, 35], label: 'Mar' },
+  { x: 4, y: [35, 40, 30], label: 'Apr' },
+  { x: 5, y: [40, 35, 25], label: 'May' },
+];
+
+export const stackedCategories = ['Series A', 'Series B', 'Series C'];

package/recipes/charts/apps/native/src/features/charts/types/index.ts

@@ -0,0 +1,66 @@
+export type ChartData = {
+  value: number;
+  label: string;
+  color?: string;
+  tooltip?: string;
+  id: string;
+};
+
+export type BarChartProps = {
+  data: ChartData[];
+  height?: number;
+  width?: number;
+  barRadius?: number;
+  barWidth?: number;
+  gap?: number;
+  animated?: boolean;
+  showValues?: boolean;
+  showLabels?: boolean;
+  showGrid?: boolean;
+  colors?: string[];
+  valueFormatter?: (value: number) => string;
+  onBarPress?: (item: ChartData) => void;
+  horizontal?: boolean;
+  style?: any;
+};
+
+export type PieChartProps = {
+  data: ChartData[];
+  height?: number;
+  width?: number;
+  radius?: number;
+  innerRadius?: number;
+  animated?: boolean;
+  animationDuration?: number;
+  showValues?: boolean;
+  showLabels?: boolean;
+  showLegend?: boolean;
+  valueFormatter?: (value: number) => string;
+  colors?: string[];
+  rotation?: number;
+  onSectionPress?: (item: ChartData) => void;
+  style?: any;
+};
+
+export type LineChartProps = {
+  data: number[];
+  labels?: string[];
+  height?: number;
+  width?: number;
+  animated?: boolean;
+  animationDuration?: number;
+  strokeWidth?: number;
+  curved?: boolean;
+  showDots?: boolean;
+  showArea?: boolean;
+  showGrid?: boolean;
+  showAxisLabels?: boolean;
+  showValues?: boolean;
+  fillColor?: string;
+  strokeColor?: string;
+  dotColor?: string;
+  gridColor?: string;
+  axisColor?: string;
+  valueFormatter?: (value: number) => string;
+  style?: any;
+};

package/recipes/charts/recipe.json

@@ -0,0 +1,22 @@
+{
+  "name": "charts",
+  "version": "1.0.0",
+  "description": "Beautiful data visualization with charts",
+  "copy": [
+    {
+      "from": "apps/native/src/app/charts",
+      "to": "apps/native/src/app/(root)/(protected)/charts"
+    },
+    {
+      "from": "apps/native/src/features/charts",
+      "to": "apps/native/src/features/charts"
+    }
+  ],
+  "nav": {
+    "href": "/(root)/(protected)/charts",
+    "label": "Charts",
+    "icon": "📊",
+    "color": "#6366F1"
+  },
+  "target": "native"
+}

package/recipes/chatbot/apps/native/src/app/chatbot/index.tsx

@@ -0,0 +1 @@
+export { default } from '@/features/chatbot/app';