@imksh/create 1.0.26 → 1.0.28

package/templates/react-native/src/components/ui/data-display/Accordion.tsx

@@ -1,82 +0,0 @@
-import React, { useState } from "react";
-import { View, TouchableOpacity } from "react-native";
-import Animated, {
-  useAnimatedStyle,
-  useSharedValue,
-  withTiming,
-  measure,
-  useAnimatedRef,
-  runOnUI,
-} from "react-native-reanimated";
-import { Ionicons } from "@expo/vector-icons";
-import { useColorScheme } from "nativewind";
-import { Colors } from "../../../constants/Colors";
-import { Txt } from "../../common/Typography";
-
-export interface AccordionProps {
-  title: string;
-  children: React.ReactNode;
-}
-
-export default function Accordion({ title, children }: AccordionProps) {
-  const { colorScheme } = useColorScheme();
-  const theme = Colors[colorScheme ?? "light"];
-  const [isOpen, setIsOpen] = useState(false);
-  const heightValue = useSharedValue(0);
-  const progress = useSharedValue(0);
-  const aref = useAnimatedRef<View>();
-
-  const toggleAccordion = () => {
-    if (isOpen) {
-      heightValue.value = withTiming(0, { duration: 300 });
-      progress.value = withTiming(0, { duration: 300 });
-      setIsOpen(false);
-    } else {
-      runOnUI(() => {
-        "worklet";
-        const measurement = measure(aref);
-        if (measurement) {
-          heightValue.value = withTiming(measurement.height, { duration: 300 });
-          progress.value = withTiming(1, { duration: 300 });
-        }
-      })();
-      setIsOpen(true);
-    }
-  };
-
-  const bodyStyle = useAnimatedStyle(() => ({
-    height: heightValue.value,
-    opacity: progress.value,
-    overflow: "hidden",
-  }));
-
-  const iconStyle = useAnimatedStyle(() => ({
-    transform: [{ rotate: `${progress.value * 180}deg` }],
-  }));
-
-  return (
-    <View style={{ backgroundColor: theme.base200, borderRadius: 12, marginBottom: 8, overflow: "hidden" }}>
-      <TouchableOpacity
-        activeOpacity={0.7}
-        onPress={toggleAccordion}
-        style={{ padding: 16, flexDirection: "row", justifyContent: "space-between", alignItems: "center" }}
-      >
-        <Txt color={theme.baseContent} weight="semibold" variant="md">{title}</Txt>
-        <Animated.View style={iconStyle}>
-          <Ionicons name="chevron-down" size={24} color={theme.baseContent} />
-        </Animated.View>
-      </TouchableOpacity>
-      
-      <Animated.View style={bodyStyle}>
-        <View
-          style={{ position: "absolute", width: "100%", paddingHorizontal: 16, paddingBottom: 16 }}
-        >
-          {/* This inner view is measured */}
-          <View ref={aref as any}>
-            {children}
-          </View>
-        </View>
-      </Animated.View>
-    </View>
-  );
-}

package/templates/react-native/src/components/ui/data-display/Avatar.tsx

@@ -1,47 +0,0 @@
-import React from "react";
-import { View, ViewProps } from "react-native";
-import { Image } from "expo-image";
-import { useColorScheme } from "nativewind";
-import { Colors } from "../../../constants/Colors";
-import { Txt } from "../../common/Typography";
-
-export interface AvatarProps extends ViewProps {
-  url?: string;
-  initials?: string;
-  size?: number;
-}
-
-export default function Avatar({ url, initials, size = 48, style, ...props }: AvatarProps) {
-  const { colorScheme } = useColorScheme();
-  const theme = Colors[colorScheme ?? "light"];
-
-  return (
-    <View
-      style={[
-        {
-          width: size,
-          height: size,
-          borderRadius: size / 2,
-          backgroundColor: theme.base300,
-          overflow: "hidden",
-          alignItems: "center",
-          justifyContent: "center",
-        },
-        style,
-      ]}
-      {...props}
-    >
-      {url ? (
-        <Image
-          source={{ uri: url }}
-          style={{ width: "100%", height: "100%" }}
-          contentFit="cover"
-        />
-      ) : (
-        <Txt color={theme.baseContent} weight="semibold" style={{ fontSize: size * 0.4 }}>
-          {initials?.substring(0, 2).toUpperCase()}
-        </Txt>
-      )}
-    </View>
-  );
-}

package/templates/react-native/src/components/ui/data-display/Badge.tsx

@@ -1,104 +0,0 @@
-import React from "react";
-import { View, ViewProps } from "react-native";
-import { useColorScheme } from "nativewind";
-import { Colors } from "../../../constants/Colors";
-import { Txt } from "../../common/Typography";
-
-export interface BadgeProps extends ViewProps {
-  label: string;
-  variant?:
-    | "primary"
-    | "secondary"
-    | "accent"
-    | "info"
-    | "success"
-    | "warning"
-    | "error"
-    | "neutral";
-  size?: "xs" | "sm" | "base" | "md" | "lg";
-  soft?: boolean;
-}
-
-export default function Badge({
-  label,
-  variant = "primary",
-  size = "base",
-  soft = false,
-  style,
-  ...props
-}: BadgeProps) {
-  const { colorScheme } = useColorScheme();
-  const theme = Colors[colorScheme ?? "light"];
-
-  const getVariantStyles = (): { bg: string; text: string } => {
-    switch (variant) {
-      case "secondary":
-        return { bg: theme.secondary, text: theme.secondaryContent };
-      case "accent":
-        return { bg: theme.accent, text: theme.accentContent };
-      case "info":
-        return { bg: theme.info, text: "#fff" };
-      case "success":
-        return { bg: theme.success, text: "#fff" };
-      case "warning":
-        return { bg: theme.warning, text: "#fff" };
-      case "error":
-        return { bg: theme.error, text: "#fff" };
-      case "neutral":
-        return { bg: theme.neutral, text: theme.neutralContent };
-      case "primary":
-      default:
-        return { bg: theme.primary, text: theme.primaryContent };
-    }
-  };
-
-  const getSizeStyles = () => {
-    switch (size) {
-      case "xs":
-        return { height: 16, px: 4, fontSize: 6 };
-      case "sm":
-        return { height: 18, px: 6, fontSize: 8 };
-      case "base":
-        return { height: 22, px: 8, fontSize: 10 };
-      case "lg":
-        return { height: 28, px: 12, fontSize: 14 };
-      case "md":
-      default:
-        return { height: 24, px: 8, fontSize: 12 };
-    }
-  };
-
-  const vStyles = getVariantStyles();
-  if (soft) {
-    vStyles.text = vStyles.bg;
-    vStyles.bg = vStyles.bg + "26"; // ~15% opacity
-  }
-
-  const sStyles = getSizeStyles();
-
-  return (
-    <View
-      style={[
-        {
-          backgroundColor: vStyles.bg as any,
-          height: sStyles.height,
-          paddingHorizontal: sStyles.px,
-          borderRadius: 9999,
-          alignItems: "center",
-          justifyContent: "center",
-          alignSelf: "flex-start",
-        },
-        style,
-      ]}
-      {...props}
-    >
-      <Txt
-        color={vStyles.text}
-        weight="semibold"
-        style={{ fontSize: sStyles.fontSize }}
-      >
-        {label}
-      </Txt>
-    </View>
-  );
-}

package/templates/react-native/src/components/ui/data-display/Card.tsx

@@ -1,36 +0,0 @@
-import React from "react";
-import { View, ViewProps } from "react-native";
-import { useColorScheme } from "nativewind";
-import { Colors } from "../../../constants/Colors";
-
-export interface CardProps extends ViewProps {
-  children: React.ReactNode;
-  padding?: number;
-  elevation?: number;
-}
-
-export default function Card({ children, style, padding = 16, elevation = 2, ...props }: CardProps) {
-  const { colorScheme } = useColorScheme();
-  const theme = Colors[colorScheme ?? "light"];
-
-  return (
-    <View
-      style={[
-        {
-          backgroundColor: theme.base200,
-          borderRadius: 16,
-          padding,
-          shadowColor: "#000",
-          shadowOffset: { width: 0, height: elevation },
-          shadowOpacity: elevation * 0.05,
-          shadowRadius: elevation * 2,
-          elevation,
-        },
-        style,
-      ]}
-      {...props}
-    >
-      {children}
-    </View>
-  );
-}

package/templates/react-native/src/components/ui/data-display/Image.tsx

@@ -1,43 +0,0 @@
-import React from "react";
-import { Image as ExpoImage, ImageProps as ExpoImageProps } from "expo-image";
-import { View, ActivityIndicator, DimensionValue } from "react-native";
-import { useColorScheme } from "nativewind";
-import { Colors } from "../../../constants/Colors";
-
-export interface ImageProps extends Omit<ExpoImageProps, "source"> {
-  fallbackIcon?: React.ReactNode;
-  src?: string | number | any;
-  source?: any;
-  width?: DimensionValue;
-  height?: DimensionValue;
-}
-
-export default function Image({ style, src, source, width, height, ...props }: ImageProps) {
-  const { colorScheme } = useColorScheme();
-  const theme = Colors[colorScheme ?? "light"];
-  const [isLoading, setIsLoading] = React.useState(true);
-  const [hasError, setHasError] = React.useState(false);
-
-  return (
-    <View style={[{ overflow: "hidden", backgroundColor: "transparent", width: width, height: height }, style]}>
-      <ExpoImage
-        source={src ? (typeof src === "string" ? { uri: src } : src) : source}
-        style={{ width: "100%", height: "100%" }}
-        onLoadStart={() => setIsLoading(true)}
-        onLoadEnd={() => setIsLoading(false)}
-        onError={() => setHasError(true)}
-        transition={300}
-        {...props}
-      />
-      {(isLoading || hasError) && (
-        <View style={{ position: "absolute", top: 0, left: 0, right: 0, bottom: 0, alignItems: "center", justifyContent: "center" }}>
-          {isLoading ? (
-            <ActivityIndicator color={theme.primary} />
-          ) : (
-             props.fallbackIcon
-          )}
-        </View>
-      )}
-    </View>
-  );
-}

package/templates/react-native/src/components/ui/data-display/ImageViewer.tsx

@@ -1,33 +0,0 @@
-import React from "react";
-import { StatusBar } from "react-native";
-import ImageViewing from "react-native-image-viewing";
-import { ImageSource } from "react-native-image-viewing/dist/@types";
-
-export interface ImageViewerProps {
-  images: ImageSource[];
-  imageIndex: number;
-  visible: boolean;
-  onRequestClose: () => void;
-}
-
-export default function ImageViewer({
-  images,
-  imageIndex,
-  visible,
-  onRequestClose,
-}: ImageViewerProps) {
-  return (
-    <>
-      <StatusBar hidden={visible} />
-      <ImageViewing
-        images={images}
-        imageIndex={imageIndex}
-        visible={visible}
-        onRequestClose={onRequestClose}
-        swipeToCloseEnabled
-        doubleTapToZoomEnabled
-        presentationStyle="overFullScreen"
-      />
-    </>
-  );
-}

package/templates/react-native/src/components/ui/data-display/SwipeableRow.tsx

@@ -1,94 +0,0 @@
-import React from "react";
-import { View, TouchableOpacity, StyleSheet, StyleProp, ViewStyle } from "react-native";
-import Swipeable from "react-native-gesture-handler/Swipeable";
-import { useColorScheme } from "nativewind";
-import { Colors } from "../../../constants/Colors";
-
-export type SwipeAction = {
-  icon: React.ReactNode;
-  backgroundColor: string;
-  onPress: () => void;
-  width?: number;
-};
-
-interface SwipeableRowProps {
-  children: React.ReactNode;
-  leftActions?: SwipeAction[];
-  rightActions?: SwipeAction[];
-  containerStyle?: StyleProp<ViewStyle>;
-  onSwipeOpen?: () => void;
-  onSwipeClose?: () => void;
-}
-
-export const SwipeableRow: React.FC<SwipeableRowProps> = ({
-  children,
-  leftActions = [],
-  rightActions = [],
-  containerStyle,
-  onSwipeOpen,
-  onSwipeClose,
-}) => {
-  const { colorScheme } = useColorScheme();
-  const isDark = colorScheme === "dark";
-  const colors = Colors[isDark ? "dark" : "light"];
-
-  const renderActions = (actions: SwipeAction[], progress: any, dragX: any, isRight: boolean) => {
-    if (actions.length === 0) return null;
-
-    return (
-      <View style={[styles.actionsContainer, isRight ? styles.rightActions : styles.leftActions]}>
-        {actions.map((action, index) => {
-          const actionWidth = action.width || 75;
-          return (
-            <TouchableOpacity
-              key={index}
-              style={[
-                styles.actionButton,
-                { backgroundColor: action.backgroundColor, width: actionWidth },
-              ]}
-              onPress={action.onPress}
-              activeOpacity={0.8}
-            >
-              {action.icon}
-            </TouchableOpacity>
-          );
-        })}
-      </View>
-    );
-  };
-
-  return (
-    <Swipeable
-      friction={2}
-      leftThreshold={40}
-      rightThreshold={40}
-      renderLeftActions={(progress, dragX) => renderActions(leftActions, progress, dragX, false)}
-      renderRightActions={(progress, dragX) => renderActions(rightActions, progress, dragX, true)}
-      onSwipeableOpen={onSwipeOpen}
-      onSwipeableClose={onSwipeClose}
-      containerStyle={containerStyle}
-    >
-      <View style={{ backgroundColor: colors.base100 }}>
-        {children}
-      </View>
-    </Swipeable>
-  );
-};
-
-const styles = StyleSheet.create({
-  actionsContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-  },
-  leftActions: {
-    justifyContent: "flex-start",
-  },
-  rightActions: {
-    justifyContent: "flex-end",
-  },
-  actionButton: {
-    height: "100%",
-    justifyContent: "center",
-    alignItems: "center",
-  },
-});

package/templates/react-native/src/components/ui/feedback/CircularProgress.tsx

@@ -1,38 +0,0 @@
-import React from "react";
-import { View } from "react-native";
-import { useColorScheme } from "nativewind";
-import { Colors } from "../../../constants/Colors";
-import { Txt } from "../../common/Typography";
-
-export interface CircularProgressProps {
-  progress: number;
-  size?: number;
-  strokeWidth?: number;
-}
-
-export default function CircularProgress({ progress, size = 60, strokeWidth = 6 }: CircularProgressProps) {
-  const { colorScheme } = useColorScheme();
-  const theme = Colors[colorScheme ?? "light"];
-  
-  return (
-    <View
-      style={{
-        width: size,
-        height: size,
-        borderRadius: size / 2,
-        borderWidth: strokeWidth,
-        borderColor: theme.primary,
-        borderTopColor: theme.base300,
-        alignItems: "center",
-        justifyContent: "center",
-        transform: [{ rotate: "45deg" }], 
-      }}
-    >
-      <View style={{ transform: [{ rotate: "-45deg" }] }}>
-         <Txt color={theme.baseContent} weight="bold" style={{ fontSize: size * 0.25 }}>
-           {Math.round(progress)}%
-         </Txt>
-      </View>
-    </View>
-  );
-}

package/templates/react-native/src/components/ui/feedback/GestureWrapper.tsx

@@ -1,114 +0,0 @@
-import React from "react";
-import { StyleProp, ViewStyle } from "react-native";
-import { Gesture, GestureDetector, GestureType } from "react-native-gesture-handler";
-import Animated, { runOnJS } from "react-native-reanimated";
-
-interface GestureWrapperProps {
-  children: React.ReactNode;
-  containerStyle?: StyleProp<ViewStyle>;
-  
-  // Tap Gestures
-  onTap?: () => void;
-  onDoubleTap?: () => void;
-  
-  // Pan/Drag Gestures
-  onPanStart?: (e: any) => void;
-  onPanUpdate?: (e: any) => void;
-  onPanEnd?: (e: any) => void;
-
-  // Swipe Gestures
-  onSwipeLeft?: () => void;
-  onSwipeRight?: () => void;
-  onSwipeUp?: () => void;
-  onSwipeDown?: () => void;
-}
-
-export const GestureWrapper: React.FC<GestureWrapperProps> = ({
-  children,
-  containerStyle,
-  onTap,
-  onDoubleTap,
-  onPanStart,
-  onPanUpdate,
-  onPanEnd,
-  onSwipeLeft,
-  onSwipeRight,
-  onSwipeUp,
-  onSwipeDown,
-}) => {
-  const gestures: GestureType[] = [];
-
-  // 1. Single Tap
-  if (onTap) {
-    const tap = Gesture.Tap().onEnd(() => {
-      runOnJS(onTap)();
-    });
-    gestures.push(tap);
-  }
-
-  // 2. Double Tap
-  if (onDoubleTap) {
-    const doubleTap = Gesture.Tap()
-      .numberOfTaps(2)
-      .onEnd(() => {
-        runOnJS(onDoubleTap)();
-      });
-    gestures.push(doubleTap);
-  }
-
-  // 3. Generic Pan / Drag
-  if (onPanStart || onPanUpdate || onPanEnd) {
-    const pan = Gesture.Pan()
-      .onStart((e) => {
-        if (onPanStart) runOnJS(onPanStart)(e);
-      })
-      .onUpdate((e) => {
-        if (onPanUpdate) runOnJS(onPanUpdate)(e);
-      })
-      .onEnd((e) => {
-        if (onPanEnd) runOnJS(onPanEnd)(e);
-      });
-    gestures.push(pan);
-  }
-
-  // 4. Directional Swipes (Fling)
-  const SWIPE_VELOCITY_THRESHOLD = 500;
-  
-  if (onSwipeLeft || onSwipeRight || onSwipeUp || onSwipeDown) {
-    const swipe = Gesture.Pan()
-      .onEnd((e) => {
-        // Horizontal Swipes
-        if (Math.abs(e.velocityX) > Math.abs(e.velocityY)) {
-          if (e.velocityX > SWIPE_VELOCITY_THRESHOLD && onSwipeRight) {
-            runOnJS(onSwipeRight)();
-          } else if (e.velocityX < -SWIPE_VELOCITY_THRESHOLD && onSwipeLeft) {
-            runOnJS(onSwipeLeft)();
-          }
-        } 
-        // Vertical Swipes
-        else {
-          if (e.velocityY > SWIPE_VELOCITY_THRESHOLD && onSwipeDown) {
-            runOnJS(onSwipeDown)();
-          } else if (e.velocityY < -SWIPE_VELOCITY_THRESHOLD && onSwipeUp) {
-            runOnJS(onSwipeUp)();
-          }
-        }
-      });
-    gestures.push(swipe);
-  }
-
-  // If no gestures are provided, just return the children wrapped in a view
-  if (gestures.length === 0) {
-    return <Animated.View style={containerStyle}>{children}</Animated.View>;
-  }
-
-  // Combine all active gestures (Exclusive makes sure they don't fight each other if configured properly, 
-  // but for generic wrapping, Simultaneous is safer so Pan and Swipe can co-exist).
-  const composedGesture = Gesture.Simultaneous(...gestures);
-
-  return (
-    <GestureDetector gesture={composedGesture}>
-      <Animated.View style={containerStyle}>{children}</Animated.View>
-    </GestureDetector>
-  );
-};

package/templates/react-native/src/components/ui/feedback/ProgressBar.tsx

@@ -1,51 +0,0 @@
-import React, { useEffect } from "react";
-import { View, StyleProp, ViewStyle } from "react-native";
-import Animated, {
-  useSharedValue,
-  useAnimatedStyle,
-  withTiming,
-} from "react-native-reanimated";
-import { useColorScheme } from "nativewind";
-import { Colors } from "../../../constants/Colors";
-import { Txt } from "../../common/Typography";
-
-export interface ProgressBarProps {
-  progress: number; // 0 to 100
-  color?: string;
-  height?: number;
-  label?: string;
-  style?: StyleProp<ViewStyle>;
-}
-
-export default function ProgressBar({ progress, color, height = 8, label, style }: ProgressBarProps) {
-  const { colorScheme } = useColorScheme();
-  const theme = Colors[colorScheme ?? "light"];
-  const widthVal = useSharedValue(0);
-
-  useEffect(() => {
-    widthVal.value = withTiming(progress, { duration: 500 });
-  }, [progress, widthVal]);
-
-  const animatedStyle = useAnimatedStyle(() => ({
-    width: `${widthVal.value}%`,
-  }));
-
-  return (
-    <View style={[{ width: "100%", marginBottom: label ? 16 : 0 }, style]}>
-      {label && (
-        <View style={{ flexDirection: "row", justifyContent: "space-between", marginBottom: 6 }}>
-          <Txt color={theme.baseContent} variant="sm" weight="semibold">{label}</Txt>
-          <Txt color={theme.secondary} variant="sm">{Math.round(progress)}%</Txt>
-        </View>
-      )}
-      <View style={{ width: "100%", height, backgroundColor: theme.base300, borderRadius: height / 2, overflow: "hidden" }}>
-        <Animated.View
-          style={[
-            { height: "100%", backgroundColor: color || theme.primary, borderRadius: height / 2 },
-            animatedStyle,
-          ]}
-        />
-      </View>
-    </View>
-  );
-}