vibefast-cli 1.1.5 → 1.2.1

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

@@ -32,7 +32,7 @@ type Props = {
 
 export const RadarChart = ({ data, config = {}, style }: Props) => {
   const hasData = data.length > 0;
-  const [containerWidth, setContainerWidth] = useState(300);
+  const [containerWidth, setContainerWidth] = useState(() => config.width ?? 300);
   const {
     height = 200,
     showLabels = true,
@@ -40,7 +40,7 @@ export const RadarChart = ({ data, config = {}, style }: Props) => {
     duration = 1000,
     maxValue,
   } = config;
-  const chartWidth = containerWidth || config.width || 300;
+  const chartWidth = config.width ?? containerWidth;
 
   const theme = useThemeConfig();
   const primaryColor = theme.colors.primary as string;
@@ -76,8 +76,10 @@ export const RadarChart = ({ data, config = {}, style }: Props) => {
   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 maxVal = Math.max(
+    1,
+    maxValue ?? (hasData ? Math.max(...data.map((d) => d.value)) : 1),
+  );
 
   const angleStep = hasData ? (2 * Math.PI) / data.length : 0;
   const points = useMemo(() => {

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

@@ -68,7 +68,7 @@ export const RadialBarChart = ({ data, config = {}, style }: Props) => {
 
   if (!data.length) return null;
 
-  const maxValue = Math.max(...data.map((d) => d.value));
+  const maxValue = Math.max(1, ...data.map((d) => d.value));
   const size = containerSize || 200;
   const center = size / 2;
   const maxRadius = (size - padding * 2) / 2;

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

@@ -42,7 +42,7 @@ export const StackedBarChart = ({
   categories = [],
   horizontal = false,
 }: Props) => {
-  const [containerWidth, setContainerWidth] = useState(300);
+  const [containerWidth, setContainerWidth] = useState(() => config.width ?? 300);
   const {
     height = 200,
     padding = 20,
@@ -51,7 +51,7 @@ export const StackedBarChart = ({
     animated = true,
     duration = 800,
   } = config;
-  const chartWidth = containerWidth || config.width || 300;
+  const chartWidth = config.width ?? containerWidth;
 
   const theme = useThemeConfig();
   const primaryColor = theme.colors.primary as string;
@@ -87,9 +87,10 @@ export const StackedBarChart = ({
   if (!data.length) return null;
 
   const maxValue = Math.max(
+    1,
     ...data.map((d) => d.values.reduce((s, v) => s + v, 0)),
   );
-  const seriesCount = data[0]?.values.length || 0;
+  const seriesCount = Math.max(0, ...data.map((d) => d.values.length));
   const innerChartWidth = chartWidth - padding * 2;
   const chartHeight = height - padding * 2;
 
@@ -122,7 +123,7 @@ export const StackedBarChart = ({
                 {item.values.map((value, valueIndex) => {
                   const segmentWidth = (value / maxValue) * innerChartWidth;
                   const w = segmentWidth * progress;
-                  const x = padding + cumulativeWidth;
+                  const x = padding + cumulativeWidth * progress;
                   cumulativeWidth += segmentWidth;
                   return (
                     <RoundedRect

package/recipes/charts/recipe.json

@@ -1,12 +1,8 @@
 {
   "name": "charts",
-  "version": "1.0.1",
-  "description": "Beautiful data visualization with charts",
+  "version": "1.0.0",
+  "description": "Beautiful animated charts",
   "copy": [
-    {
-      "from": "apps/native/src/app/(root)/(protected)/charts",
-      "to": "apps/native/src/app/(root)/(protected)/charts"
-    },
     {
       "from": "apps/native/src/features/charts",
       "to": "apps/native/src/features/charts"
@@ -16,13 +12,8 @@
     "href": "/(root)/(protected)/charts",
     "label": "Charts",
     "icon": "📊",
-    "color": "#6366F1"
+    "color": "#10B981"
   },
   "target": "native",
-  "dependencies": {
-    "expo": [
-      "@shopify/react-native-skia",
-      "react-native-svg"
-    ]
-  }
+  "dependencies": { "expo": ["react-native-reanimated", "react-native-svg"] }
 }

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

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

package/recipes/chatbot/apps/native/src/features/chatbot/components/chat-markdown.tsx

@@ -19,9 +19,9 @@
  * and render rules, but the complex logic has been extracted into separate modules.
  */
 
-import * as Clipboard from 'expo-clipboard';
-import MarkdownIt from 'markdown-it';
-import React, { useCallback, useEffect, useMemo } from 'react';
+import * as Clipboard from "expo-clipboard";
+import MarkdownIt from "markdown-it";
+import React, { useCallback, useEffect, useMemo } from "react";
 import {
   Image,
   type ImageStyle,
@@ -33,18 +33,18 @@ import {
   UIManager,
   View,
   type ViewStyle,
-} from 'react-native';
-import Markdown, { type RenderRules } from 'react-native-markdown-display';
+} from "react-native";
+import Markdown, { type RenderRules } from "react-native-markdown-display";
 import {
   atomOneDark,
   github,
-} from 'react-syntax-highlighter/styles/hljs';
+} from "react-syntax-highlighter/dist/esm/styles/hljs";
 
-import { useToast } from '@/components/ui/utils';
-import { translate } from '@/lib';
-import { useThemeConfig } from '@/lib/use-theme-config';
+import { useToast } from "@/components/ui/utils";
+import { translate } from "@/lib";
+import { useThemeConfig } from "@/lib/use-theme-config";
 
-import { CodeBlock, TableRenderer } from './markdown';
+import { CodeBlock, TableRenderer } from "./markdown";
 
 const md = new MarkdownIt({
   linkify: true,
@@ -70,8 +70,8 @@ export const ChatMarkdown = React.memo(function ChatMarkdown({
 
   useEffect(() => {
     if (
-      Platform.OS === 'android' &&
-      typeof UIManager.setLayoutAnimationEnabledExperimental === 'function'
+      Platform.OS === "android" &&
+      typeof UIManager.setLayoutAnimationEnabledExperimental === "function"
     ) {
       UIManager.setLayoutAnimationEnabledExperimental(true);
     }
@@ -88,11 +88,11 @@ export const ChatMarkdown = React.memo(function ChatMarkdown({
   const monospaceFontFamily = useMemo(
     () =>
       Platform.select({
-        ios: 'Menlo-Regular',
-        android: 'monospace',
-        default: 'Menlo',
-      }) ?? 'Menlo',
-    [],
+        ios: "Menlo-Regular",
+        android: "monospace",
+        default: "Menlo",
+      }) ?? "Menlo",
+    []
   );
 
   const columnDividerWidth = StyleSheet.hairlineWidth || 0.5;
@@ -114,15 +114,15 @@ export const ChatMarkdown = React.memo(function ChatMarkdown({
       paragraph: { marginBottom: 10, color: textColor },
       link: {
         color: linkColor,
-        textDecorationLine: 'underline' as TextStyle['textDecorationLine'],
-        fontWeight: '500' as TextStyle['fontWeight'],
+        textDecorationLine: "underline" as TextStyle["textDecorationLine"],
+        fontWeight: "500" as TextStyle["fontWeight"],
       },
       strong: {
-        fontWeight: '600' as TextStyle['fontWeight'],
+        fontWeight: "600" as TextStyle["fontWeight"],
         color: textColor,
       },
       em: {
-        fontStyle: 'italic' as TextStyle['fontStyle'],
+        fontStyle: "italic" as TextStyle["fontStyle"],
         color: textColor,
       },
       code_inline: {
@@ -155,7 +155,7 @@ export const ChatMarkdown = React.memo(function ChatMarkdown({
       },
       list_item: { marginBottom: 6, color: textColor },
       table: {
-        minWidth: '100%',
+        minWidth: "100%",
         backgroundColor: theme.colors.background,
       },
       thead: {
@@ -165,7 +165,7 @@ export const ChatMarkdown = React.memo(function ChatMarkdown({
       tr: {
         borderBottomWidth: StyleSheet.hairlineWidth,
         borderColor,
-        flexDirection: 'row',
+        flexDirection: "row",
       },
       th: {
         flexGrow: 0,
@@ -188,42 +188,42 @@ export const ChatMarkdown = React.memo(function ChatMarkdown({
       },
       heading1: {
         fontSize: 28,
-        fontWeight: '700',
+        fontWeight: "700",
         color: textColor,
         marginTop: 18,
         marginBottom: 12,
       },
       heading2: {
         fontSize: 22,
-        fontWeight: '700',
+        fontWeight: "700",
         color: textColor,
         marginTop: 16,
         marginBottom: 10,
       },
       heading3: {
         fontSize: 19,
-        fontWeight: '600',
+        fontWeight: "600",
         color: textColor,
         marginTop: 14,
         marginBottom: 8,
       },
       heading4: {
         fontSize: 17,
-        fontWeight: '600',
+        fontWeight: "600",
         color: textColor,
         marginTop: 12,
         marginBottom: 8,
       },
       heading5: {
         fontSize: 16,
-        fontWeight: '600',
+        fontWeight: "600",
         color: textColor,
         marginTop: 10,
         marginBottom: 6,
       },
       heading6: {
         fontSize: 15,
-        fontWeight: '600' as TextStyle['fontWeight'],
+        fontWeight: "600" as TextStyle["fontWeight"],
         color: textColor,
         marginTop: 8,
         marginBottom: 6,
@@ -236,10 +236,10 @@ export const ChatMarkdown = React.memo(function ChatMarkdown({
       imageWrapper: {
         marginVertical: 8,
         borderRadius: 14,
-        overflow: 'hidden',
+        overflow: "hidden",
       },
       image: {
-        width: '100%',
+        width: "100%",
         aspectRatio: 16 / 9,
         backgroundColor: codeBg,
       },
@@ -247,7 +247,7 @@ export const ChatMarkdown = React.memo(function ChatMarkdown({
         marginTop: 6,
         fontSize: 13,
         color: subtleText,
-        textAlign: 'center',
+        textAlign: "center",
       },
     };
 
@@ -270,7 +270,7 @@ export const ChatMarkdown = React.memo(function ChatMarkdown({
       ...baseTheme,
       hljs: {
         ...baseTheme.hljs,
-        background: 'transparent',
+        background: "transparent",
         color: codeFg,
       },
     };
@@ -279,27 +279,27 @@ export const ChatMarkdown = React.memo(function ChatMarkdown({
   const codeContentStyle = useMemo(
     () =>
       ({
-        backgroundColor: 'transparent',
+        backgroundColor: "transparent",
         padding: 0,
         margin: 0,
-      }) satisfies ViewStyle,
-    [],
+      } satisfies ViewStyle),
+    []
   );
 
   const tableScrollViewStyle = useMemo(
     () =>
       ({
         marginVertical: 0,
-      }) satisfies ViewStyle,
-    [],
+      } satisfies ViewStyle),
+    []
   );
 
   const tableScrollContentStyle = useMemo(
     () =>
       ({
         flexGrow: 1,
-      }) satisfies ViewStyle,
-    [],
+      } satisfies ViewStyle),
+    []
   );
 
   const tableOuterStyle = useMemo(
@@ -308,84 +308,84 @@ export const ChatMarkdown = React.memo(function ChatMarkdown({
         borderWidth: 1,
         borderColor,
         borderRadius: 10,
-        overflow: 'hidden',
+        overflow: "hidden",
         marginVertical: 12,
         backgroundColor: theme.colors.background,
-      }) satisfies ViewStyle,
-    [borderColor, theme.colors.background],
+      } satisfies ViewStyle),
+    [borderColor, theme.colors.background]
   );
 
   const codeActionsContainerStyle = useMemo(
     () =>
       ({
-        position: 'absolute',
+        position: "absolute",
         top: 12,
         right: 12,
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'flex-end',
-      }) satisfies ViewStyle,
-    [],
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "flex-end",
+      } satisfies ViewStyle),
+    []
   );
 
   const codeActionButtonBaseStyle = useMemo(
     () =>
       ({
-        alignItems: 'center',
-        justifyContent: 'center',
+        alignItems: "center",
+        justifyContent: "center",
         borderRadius: 999,
         borderWidth: 1,
         borderColor,
         paddingHorizontal: 12,
         paddingVertical: 8,
         backgroundColor: isDarkMode
-          ? 'rgba(15, 15, 15, 0.9)'
-          : 'rgba(255, 255, 255, 0.92)',
-      }) satisfies ViewStyle,
-    [borderColor, isDarkMode],
+          ? "rgba(15, 15, 15, 0.9)"
+          : "rgba(255, 255, 255, 0.92)",
+      } satisfies ViewStyle),
+    [borderColor, isDarkMode]
   );
 
   const codeToggleButtonSpacingStyle = useMemo(
     () =>
       ({
         marginLeft: 16,
-      }) satisfies ViewStyle,
-    [],
+      } satisfies ViewStyle),
+    []
   );
 
   const codeContentContainerStyle = useMemo(
     () =>
       ({
-        overflow: 'hidden',
+        overflow: "hidden",
         marginTop: 24,
-      }) satisfies ViewStyle,
-    [],
+      } satisfies ViewStyle),
+    []
   );
 
   const copyCodeToClipboard = useCallback(
     async (code: string) => {
       try {
         if (!code.trim()) {
-          toast.warning(translate('chatbot.empty_message'), {
+          toast.warning(translate("chatbot.empty_message"), {
             duration: 2000,
           });
           return;
         }
 
         await Clipboard.setStringAsync(code);
-        toast.success(translate('chatbot.copy_code_success'), {
+        toast.success(translate("chatbot.copy_code_success"), {
           duration: 2000,
         });
       } catch (error) {
-        console.error('[CHATBOT_FRONTEND] Copy code failed:', {
-          error: error instanceof Error ? error.message : 'Unknown error',
+        console.error("[CHATBOT_FRONTEND] Copy code failed:", {
+          error: error instanceof Error ? error.message : "Unknown error",
         });
-        toast.error(translate('chatbot.copy_code_failed'), {
+        toast.error(translate("chatbot.copy_code_failed"), {
           duration: 3000,
         });
       }
     },
-    [toast],
+    [toast]
   );
 
   // Memoize CodeBlock wrapper to pass all required props
@@ -393,7 +393,7 @@ export const ChatMarkdown = React.memo(function ChatMarkdown({
     (
       containerStyle: ViewStyle | TextStyle | ImageStyle,
       content: string,
-      language: string,
+      language: string
     ) => {
       return (
         <CodeBlock
@@ -422,7 +422,7 @@ export const ChatMarkdown = React.memo(function ChatMarkdown({
       codeToggleButtonSpacingStyle,
       codeContentContainerStyle,
       copyCodeToClipboard,
-    ],
+    ]
   );
 
   const handleLinkPress = useCallback((url: string) => {
@@ -443,25 +443,25 @@ export const ChatMarkdown = React.memo(function ChatMarkdown({
       _children: React.ReactNode[],
       _parent: any[],
       styles: Record<string, any>,
-      _inheritedStyles: Record<string, any> = {},
+      _inheritedStyles: Record<string, any> = {}
     ) => {
-      const rawContent = typeof node.content === 'string' ? node.content : '';
-      const trimmed = rawContent.replace(/\n+$/u, '');
+      const rawContent = typeof node.content === "string" ? node.content : "";
+      const trimmed = rawContent.replace(/\n+$/u, "");
       const content = trimmed.length > 0 ? trimmed : rawContent;
 
       const info = node.attributes?.info;
       const className = node.attributes?.class;
       const languageFromInfo =
-        typeof info === 'string' && info.trim().length > 0
+        typeof info === "string" && info.trim().length > 0
           ? info.trim().split(/\s+/u)[0]
           : undefined;
       const languageFromClass =
-        typeof className === 'string'
-          ? (className.match(/language-([\w-]+)/u)?.[1] ??
-            className.match(/lang-([\w-]+)/u)?.[1])
+        typeof className === "string"
+          ? className.match(/language-([\w-]+)/u)?.[1] ??
+            className.match(/lang-([\w-]+)/u)?.[1]
           : undefined;
-      const language = (languageFromInfo ?? languageFromClass ?? '')
-        .replace(/^language-/u, '')
+      const language = (languageFromInfo ?? languageFromClass ?? "")
+        .replace(/^language-/u, "")
         .toLowerCase();
 
       const containerStyle =
@@ -476,7 +476,7 @@ export const ChatMarkdown = React.memo(function ChatMarkdown({
 
     return {
       code: (node, _children, _parent, styles) => {
-        const content = node.content || '';
+        const content = node.content || "";
         return (
           <Text key={node.key} style={styles.code_inline}>
             {content}
@@ -501,21 +501,21 @@ export const ChatMarkdown = React.memo(function ChatMarkdown({
       },
       link: (node, children, _parent, styles) => {
         const href =
-          typeof node.attributes?.href === 'string' ? node.attributes.href : '';
+          typeof node.attributes?.href === "string" ? node.attributes.href : "";
         const titleAttr =
-          typeof node.attributes?.title === 'string'
+          typeof node.attributes?.title === "string"
             ? node.attributes.title.trim()
-            : '';
+            : "";
         const fallbackLabel =
-          typeof node.content === 'string' && node.content.trim().length > 0
+          typeof node.content === "string" && node.content.trim().length > 0
             ? node.content.trim()
             : href;
         const linkLabel =
           titleAttr.length > 0
             ? titleAttr
             : children && children.length > 0
-              ? children
-              : fallbackLabel;
+            ? children
+            : fallbackLabel;
 
         return (
           <Text
@@ -537,7 +537,7 @@ export const ChatMarkdown = React.memo(function ChatMarkdown({
           return null;
         }
 
-        const alt = node.attributes?.alt ?? '';
+        const alt = node.attributes?.alt ?? "";
         const caption = alt.trim().length > 0 ? alt : undefined;
 
         return (
@@ -547,7 +547,7 @@ export const ChatMarkdown = React.memo(function ChatMarkdown({
               style={styles.image}
               resizeMode="cover"
               accessible
-              accessibilityLabel={caption ?? 'Markdown image'}
+              accessibilityLabel={caption ?? "Markdown image"}
             />
             {caption ? (
               <Text style={styles.image_caption}>{caption}</Text>