@imksh/create 1.0.24 → 1.0.26

package/templates/production-fullstack/mobile/src/components/ui/buttons/FloatingActionButton.tsx

@@ -0,0 +1,72 @@
+import React from "react";
+import { TouchableOpacity, StyleProp, ViewStyle, StyleSheet, ActivityIndicator } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import { useColorScheme } from "nativewind";
+import { Colors } from "../../../constants/Colors";
+
+export interface FABProps {
+  icon: keyof typeof Ionicons.glyphMap;
+  onPress: () => void;
+  position?: "bottom-right" | "bottom-left" | "bottom-center";
+  isLoading?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+export default function FloatingActionButton({
+  icon,
+  onPress,
+  position = "bottom-right",
+  isLoading = false,
+  style,
+}: FABProps) {
+  const { colorScheme } = useColorScheme();
+  const theme = Colors[colorScheme ?? "light"];
+
+  const getPositionStyles = (): ViewStyle => {
+    switch (position) {
+      case "bottom-left":
+        return { bottom: 20, left: 20 };
+      case "bottom-center":
+        return { bottom: 20, alignSelf: "center" };
+      case "bottom-right":
+      default:
+        return { bottom: 20, right: 20 };
+    }
+  };
+
+  return (
+    <TouchableOpacity
+      activeOpacity={0.8}
+      onPress={onPress}
+      disabled={isLoading}
+      style={[
+        styles.fab,
+        { backgroundColor: theme.primary, shadowColor: theme.primary },
+        getPositionStyles(),
+        style,
+      ]}
+    >
+      {isLoading ? (
+        <ActivityIndicator color={theme.primaryContent} size="small" />
+      ) : (
+        <Ionicons name={icon} size={28} color={theme.primaryContent} />
+      )}
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  fab: {
+    position: "absolute",
+    width: 60,
+    height: 60,
+    borderRadius: 30,
+    alignItems: "center",
+    justifyContent: "center",
+    elevation: 8,
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.3,
+    shadowRadius: 5,
+    zIndex: 999,
+  },
+});

package/templates/production-fullstack/mobile/src/components/ui/buttons/IconButton.tsx

@@ -0,0 +1,84 @@
+import React from "react";
+import { TouchableOpacity, ActivityIndicator, TouchableOpacityProps } from "react-native";
+import { useColorScheme } from "nativewind";
+import { Colors } from "../../../constants/Colors";
+import { Ionicons } from "@expo/vector-icons";
+import { ButtonVariant, ButtonSize } from "./Button";
+
+export interface IconButtonProps extends TouchableOpacityProps {
+  icon: keyof typeof Ionicons.glyphMap;
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  isLoading?: boolean;
+  color?: string;
+}
+
+export default function IconButton({
+  icon,
+  variant = "ghost",
+  size = "md",
+  isLoading = false,
+  color,
+  style,
+  disabled,
+  ...props
+}: IconButtonProps) {
+  const { colorScheme } = useColorScheme();
+  const theme = Colors[colorScheme ?? "light"];
+
+  const getVariantStyles = (): { bg: string; iconColor: string; border?: string } => {
+    switch (variant) {
+      case "primary": return { bg: theme.primary, iconColor: theme.primaryContent };
+      case "secondary": return { bg: theme.secondary, iconColor: theme.secondaryContent };
+      case "accent": return { bg: theme.accent, iconColor: theme.accentContent };
+      case "info": return { bg: theme.info, iconColor: "#fff" };
+      case "success": return { bg: theme.success, iconColor: "#fff" };
+      case "warning": return { bg: theme.warning, iconColor: "#fff" };
+      case "error": return { bg: theme.error, iconColor: "#fff" };
+      case "ghost": return { bg: "transparent", iconColor: theme.baseContent };
+      case "outline": return { bg: "transparent", iconColor: theme.baseContent, border: theme.base300 };
+      default: return { bg: theme.primary, iconColor: theme.primaryContent };
+    }
+  };
+
+  const getSizeStyles = (): { size: number; iconSize: number } => {
+    switch (size) {
+      case "sm": return { size: 36, iconSize: 18 };
+      case "md": return { size: 48, iconSize: 24 };
+      case "lg": return { size: 56, iconSize: 28 };
+      default: return { size: 48, iconSize: 24 };
+    }
+  };
+
+  const vStyles = getVariantStyles();
+  const sStyles = getSizeStyles();
+  const isDisabled = disabled || isLoading;
+
+  return (
+    <TouchableOpacity
+      activeOpacity={0.7}
+      disabled={isDisabled}
+      style={[
+        {
+          backgroundColor: vStyles.bg,
+          width: sStyles.size,
+          height: sStyles.size,
+          borderRadius: sStyles.size / 2,
+          alignItems: "center",
+          justifyContent: "center",
+          opacity: isDisabled ? 0.6 : 1,
+          borderWidth: variant === "outline" ? 1 : 0,
+          borderColor: vStyles.border,
+        },
+        style,
+      ]}
+      {...props}
+    >
+      {isLoading ? (
+        <ActivityIndicator color={color || vStyles.iconColor} size="small" />
+      ) : (
+        <Ionicons name={icon} size={sStyles.iconSize} color={color || vStyles.iconColor} />
+      )}
+    </TouchableOpacity>
+  );
+}

package/templates/production-fullstack/mobile/src/components/ui/data-display/Accordion.tsx

@@ -0,0 +1,82 @@
+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/production-fullstack/mobile/src/components/ui/data-display/Avatar.tsx

@@ -0,0 +1,47 @@
+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/production-fullstack/mobile/src/components/ui/data-display/Badge.tsx

@@ -0,0 +1,104 @@
+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/production-fullstack/mobile/src/components/ui/data-display/Card.tsx

@@ -0,0 +1,36 @@
+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/production-fullstack/mobile/src/components/ui/data-display/Image.tsx

@@ -0,0 +1,43 @@
+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/production-fullstack/mobile/src/components/ui/data-display/ImageViewer.tsx

@@ -0,0 +1,33 @@
+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/production-fullstack/mobile/src/components/ui/data-display/SwipeableRow.tsx

@@ -0,0 +1,94 @@
+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/production-fullstack/mobile/src/components/ui/feedback/CircularProgress.tsx

@@ -0,0 +1,38 @@
+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>
+  );
+}