@imksh/create 1.0.26 → 1.0.28

package/templates/react-native/src/components/ui/Sidebar.tsx

@@ -1,258 +0,0 @@
-import React, { useEffect, useState } from "react";
-import {
-  View,
-  TouchableWithoutFeedback,
-  Dimensions,
-  StyleSheet,
-  TouchableOpacity,
-} from "react-native";
-import Animated, {
-  useSharedValue,
-  useAnimatedStyle,
-  withTiming,
-  Easing,
-  runOnJS,
-} from "react-native-reanimated";
-import { Portal } from "react-native-paper";
-import { useColorScheme } from "nativewind";
-import { Colors } from "../../constants/Colors";
-import { Txt } from "../common/Typography";
-import { Ionicons } from "@expo/vector-icons";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { useAuthStore } from "../../store/useAuthStore";
-import { sidebarConfig } from "../../config/sidebar.config";
-import { router } from "expo-router";
-import Image from "./data-display/Image";
-
-const { width } = Dimensions.get("window");
-const SIDEBAR_WIDTH = width * 0.75;
-
-interface SidebarProps {
-  isOpen: boolean;
-  onClose: () => void;
-  side?: "left" | "right";
-  children?: React.ReactNode;
-}
-
-const MenuItem = ({
-  icon,
-  label,
-  onPress,
-  colors,
-}: {
-  icon: any;
-  label: string;
-  onPress?: () => void;
-  colors: any;
-}) => (
-  <TouchableOpacity
-    activeOpacity={0.7}
-    onPress={onPress}
-    className="flex-row items-center py-4 px-6 rounded-2xl mx-2"
-  >
-    <View className="w-10 h-10 rounded-full items-center justify-center bg-primary/10 mr-4">
-      <Ionicons name={icon} size={20} color={colors.primary} />
-    </View>
-    <Txt variant="md" className="text-base-content font-semibold">
-      {label}
-    </Txt>
-  </TouchableOpacity>
-);
-
-export default function Sidebar({
-  isOpen,
-  onClose,
-  side = "left",
-  children,
-}: SidebarProps) {
-  const { colorScheme } = useColorScheme();
-  const colors = Colors[colorScheme ?? "light"];
-  const insets = useSafeAreaInsets();
-  const { user, logout } = useAuthStore();
-
-  const startValue = side === "left" ? -SIDEBAR_WIDTH : SIDEBAR_WIDTH;
-  const translateX = useSharedValue(isOpen ? 0 : startValue);
-  const backdropOpacity = useSharedValue(0);
-  const [isRendered, setIsRendered] = useState(false);
-
-  if (isOpen && !isRendered) {
-    setIsRendered(true);
-  }
-
-  useEffect(() => {
-    const targetValue = isOpen
-      ? 0
-      : side === "left"
-        ? -SIDEBAR_WIDTH
-        : SIDEBAR_WIDTH;
-    translateX.value = withTiming(targetValue, {
-      duration: 300,
-      easing: Easing.out(Easing.ease),
-    });
-
-    if (isOpen) {
-      backdropOpacity.value = withTiming(0.4, { duration: 300 });
-    } else {
-      backdropOpacity.value = withTiming(0, { duration: 300 }, (finished) => {
-        if (finished) {
-          runOnJS(setIsRendered)(false);
-        }
-      });
-    }
-  }, [isOpen, side, backdropOpacity, translateX, startValue]);
-
-  const sidebarAnimatedStyle = useAnimatedStyle(() => ({
-    transform: [{ translateX: translateX.value }],
-  }));
-
-  const backdropAnimatedStyle = useAnimatedStyle(() => ({
-    opacity: backdropOpacity.value,
-  }));
-
-  if (!isRendered && !isOpen) return null;
-
-  const role = user?.role?.toLowerCase() || "default";
-  const menuItems = sidebarConfig[role] || sidebarConfig.default;
-
-  return (
-    <Portal>
-      <View style={[StyleSheet.absoluteFill, { zIndex: 999 }]}>
-        {/* Backdrop Overlay */}
-        <TouchableWithoutFeedback onPress={onClose}>
-          <Animated.View
-            style={[
-              StyleSheet.absoluteFill,
-              { backgroundColor: "#000" },
-              backdropAnimatedStyle,
-            ]}
-          />
-        </TouchableWithoutFeedback>
-
-        {/* Sliding Sidebar Panel */}
-        <Animated.View
-          style={[
-            {
-              position: "absolute",
-              top: 0,
-              bottom: 0,
-              left: side === "left" ? 0 : undefined,
-              right: side === "right" ? 0 : undefined,
-              width: SIDEBAR_WIDTH,
-              backgroundColor: colors.base100,
-              elevation: 24,
-              shadowColor: "#000",
-              shadowOffset: { width: side === "left" ? 5 : -5, height: 0 },
-              shadowOpacity: 0.2,
-              shadowRadius: 15,
-              overflow: "hidden",
-            },
-            sidebarAnimatedStyle,
-          ]}
-        >
-          {children || (
-            <View className="flex-1">
-              {/* Sidebar Header */}
-              <View
-                className="px-6 bg-base-200 border-b border-base-300 items-center flex flex-row gap-4"
-                style={{
-                  paddingTop: insets.top > 0 ? insets.top + 12 : 30,
-                  paddingBottom: 16,
-                }}
-              >
-                <TouchableOpacity
-                  onPress={() => {
-                    onClose();
-                    router.push("/(tenant)/profile");
-                  }}
-                  className="w-12 h-12 rounded-full bg-primary items-center justify-center"
-                  style={{
-                    shadowColor: colors.primary,
-                    shadowOffset: { width: 0, height: 4 },
-                    shadowOpacity: 0.4,
-                    shadowRadius: 10,
-                    elevation: 8,
-                  }}
-                >
-                  {user?.avatar?.url ? (
-                    <View className="w-11 h-11 rounded-full border border-base-300 overflow-hidden">
-                      <Image
-                        src={user.avatar.url}
-                        style={{ width: 44, height: 44 }}
-                      />
-                    </View>
-                  ) : (
-                    <View className="w-11 h-11 rounded-full bg-primary/15 items-center justify-center border border-primary/10">
-                      <Ionicons
-                        name="person"
-                        size={22}
-                        color={colors.primary}
-                      />
-                    </View>
-                  )}
-                </TouchableOpacity>
-                <View className="flex-1">
-                  <Txt
-                    variant="md"
-                    className="font-bold text-base-content"
-                    numberOfLines={1}
-                  >
-                    {user?.name || "User Name"}
-                  </Txt>
-                  <Txt
-                    variant="xs"
-                    className="text-base-content/50"
-                    numberOfLines={1}
-                  >
-                    {user?.email || "user@example.com"}
-                  </Txt>
-                </View>
-              </View>
-
-              {/* Menu Items */}
-              <View className="flex-1 pt-4">
-                {menuItems.map((item, index) => (
-                  <MenuItem
-                    key={index}
-                    icon={item.icon}
-                    label={item.label}
-                    onPress={() => {
-                      onClose();
-                      router.push(item.route as any);
-                    }}
-                    colors={colors}
-                  />
-                ))}
-              </View>
-
-              {/* Footer */}
-              <View
-                className="p-6 border-t border-base-300"
-                style={{
-                  paddingBottom: insets.bottom > 0 ? insets.bottom + 10 : 20,
-                }}
-              >
-                <TouchableOpacity
-                  activeOpacity={0.8}
-                  className="flex-row items-center justify-center p-3 rounded-xl bg-error/10 border border-error/20"
-                  onPress={() => {
-                    onClose();
-                    logout();
-                  }}
-                >
-                  <Ionicons
-                    name="log-out-outline"
-                    size={20}
-                    color={colors.error}
-                  />
-                  <Txt variant="md" className="ml-2 font-bold text-error">
-                    Log Out
-                  </Txt>
-                </TouchableOpacity>
-              </View>
-            </View>
-          )}
-        </Animated.View>
-      </View>
-    </Portal>
-  );
-}

package/templates/react-native/src/components/ui/buttons/Button.tsx

@@ -1,180 +0,0 @@
-import React from "react";
-import {
-  TouchableOpacity,
-  ActivityIndicator,
-  TouchableOpacityProps,
-  View,
-} from "react-native";
-import { useColorScheme } from "nativewind";
-import { Colors } from "../../../constants/Colors";
-import { Txt } from "../../common/Typography";
-import { Ionicons } from "@expo/vector-icons";
-
-export type ButtonVariant =
-  | "primary"
-  | "secondary"
-  | "accent"
-  | "info"
-  | "success"
-  | "warning"
-  | "error"
-  | "ghost"
-  | "outline";
-export type ButtonSize = "xs" | "sm" | "base" | "md" | "lg";
-
-export interface ButtonProps extends TouchableOpacityProps {
-  label: string;
-  variant?: ButtonVariant;
-  size?: ButtonSize;
-  isLoading?: boolean;
-  leftIcon?: keyof typeof Ionicons.glyphMap;
-  rightIcon?: keyof typeof Ionicons.glyphMap;
-  isFullWidth?: boolean;
-  soft?: boolean;
-  outline?: boolean;
-}
-
-export default function Button({
-  label,
-  variant = "primary",
-  size = "base",
-  isLoading = false,
-  leftIcon,
-  rightIcon,
-  isFullWidth = false,
-  soft = false,
-  outline = false,
-  style,
-  disabled,
-  ...props
-}: ButtonProps) {
-  const { colorScheme } = useColorScheme();
-  const theme = Colors[colorScheme ?? "light"];
-
-  const getVariantStyles = (): {
-    bg: string;
-    text: string;
-    border?: string;
-  } => {
-    switch (variant) {
-      case "primary":
-        return { bg: theme.primary, text: theme.primaryContent };
-      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 "ghost":
-        return { bg: "transparent", text: theme.baseContent };
-      case "outline":
-        return {
-          bg: "transparent",
-          text: theme.baseContent,
-          border: theme.base300,
-        };
-      default:
-        return { bg: theme.primary, text: theme.primaryContent };
-    }
-  };
-
-  const getSizeStyles = (): {
-    height: number;
-    px: number;
-    fontSize: number;
-    iconSize: number;
-  } => {
-    switch (size) {
-      case "xs":
-        return { height: 30, px: 10, fontSize: 12, iconSize: 14 };
-      case "sm":
-        return { height: 36, px: 12, fontSize: 13, iconSize: 16 };
-      case "base":
-        return { height: 40, px: 12, fontSize: 14, iconSize: 16 };
-      case "md":
-        return { height: 48, px: 16, fontSize: 15, iconSize: 20 };
-      case "lg":
-        return { height: 56, px: 24, fontSize: 17, iconSize: 24 };
-      default:
-        return { height: 40, px: 12, fontSize: 14, iconSize: 16 };
-    }
-  };
-
-  const vStyles = getVariantStyles();
-  if (outline) {
-    vStyles.border = vStyles.bg === "transparent" ? theme.base300 : vStyles.bg;
-    vStyles.text = vStyles.bg === "transparent" ? theme.baseContent : vStyles.bg;
-    vStyles.bg = "transparent";
-  } else if (soft && variant !== "ghost" && variant !== "outline") {
-    vStyles.text = vStyles.bg;
-    vStyles.bg = vStyles.bg + "26"; // ~15% opacity
-  }
-
-  const sStyles = getSizeStyles();
-
-  const isDisabled = disabled || isLoading;
-
-  return (
-    <TouchableOpacity
-      activeOpacity={0.7}
-      disabled={isDisabled}
-      style={[
-        {
-          backgroundColor: vStyles.bg as any,
-          height: sStyles.height,
-          paddingHorizontal: sStyles.px,
-          borderRadius: 12,
-          flexDirection: "row",
-          alignItems: "center",
-          justifyContent: "center",
-          opacity: isDisabled ? 0.6 : 1,
-          borderWidth: (variant === "outline" || outline) ? 1 : 0,
-          borderColor: vStyles.border,
-          width: isFullWidth ? "100%" : undefined,
-        },
-        style,
-      ]}
-      {...props}
-    >
-      {/* Loading overlay */}
-      {isLoading && (
-        <View style={{ position: "absolute", top: 0, left: 0, right: 0, bottom: 0, justifyContent: "center", alignItems: "center" }}>
-          <ActivityIndicator color={vStyles.text} size="small" />
-        </View>
-      )}
-
-      {/* Button content (hidden while loading to maintain dimensions) */}
-      <View style={{ flexDirection: "row", alignItems: "center", opacity: isLoading ? 0 : 1 }}>
-        {leftIcon && (
-          <Ionicons
-            name={leftIcon}
-            size={sStyles.iconSize}
-            color={vStyles.text}
-            style={{ marginRight: 8 }}
-          />
-        )}
-        <Txt
-          color={vStyles.text}
-          weight="semibold"
-          style={{ fontSize: sStyles.fontSize }}
-        >
-          {label}
-        </Txt>
-        {rightIcon && (
-          <Ionicons
-            name={rightIcon}
-            size={sStyles.iconSize}
-            color={vStyles.text}
-            style={{ marginLeft: 8 }}
-          />
-        )}
-      </View>
-    </TouchableOpacity>
-  );
-}

package/templates/react-native/src/components/ui/buttons/ButtonGroup.tsx

@@ -1,32 +0,0 @@
-import React from "react";
-import { View, StyleProp, ViewStyle } from "react-native";
-
-export interface ButtonGroupProps {
-  children: React.ReactNode;
-  orientation?: "horizontal" | "vertical";
-  spacing?: number;
-  style?: StyleProp<ViewStyle>;
-}
-
-export default function ButtonGroup({
-  children,
-  orientation = "horizontal",
-  spacing = 8,
-  style,
-}: ButtonGroupProps) {
-  const isHorizontal = orientation === "horizontal";
-  
-  return (
-    <View
-      style={[
-        {
-          flexDirection: isHorizontal ? "row" : "column",
-          gap: spacing,
-        },
-        style,
-      ]}
-    >
-      {children}
-    </View>
-  );
-}

package/templates/react-native/src/components/ui/buttons/FloatingActionButton.tsx

@@ -1,72 +0,0 @@
-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/react-native/src/components/ui/buttons/IconButton.tsx

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