@funtools/create-react-native-app 1.1.2 → 1.1.4

package/index.js

@@ -1,4 +1,4 @@
-#!/usr/bin/env node
+#!/usr/bin/env node
 
 import { fileURLToPath } from "url";
 import path from "path";
@@ -13,17 +13,17 @@ let appName = "MyApp";
 
 try {
     console.log("Welcome to @funtools");
+    console.log('Thanks for using @funtools/create-react-native-app@1.1.4');
 
     await getAppName();
 
     initApp();
     initTemplates();
-    updatePackageJson();
     installDependencies();
 
     console.log("✅ App setup complete");
     process.exit(0);
-} catch (e) {
+} catch (error) {
     console.error("❌ Failed to create app");
     console.error(error);
     process.exit(1);
@@ -65,29 +65,31 @@ function initTemplates() {
 
     fs.unlinkSync(path.join(process.cwd(), 'App.tsx'));
 
-    fs.cpSync(path.join(__dirname, `templates/base`), process.cwd(), {
+    fs.cpSync(path.join(__dirname, `templates/base/files`), process.cwd(), {
         recursive: true,
         force: true,
     });
 }
 
 
-function updatePackageJson() {
-    console.log("Updating package.json...");
-
-    fs.writeFileSync(
-        `${process.cwd()}/package.json`,
-        fs
-            .readFileSync(`${process.cwd()}/package.json`, "utf-8")
-            .replaceAll("$AppName", appName),
-    );
-}
-
-
 function installDependencies() {
+    
+    const {dependencies, devDependencies} = JSON.parse(
+        fs.readFileSync(path.join(__dirname, "templates/base/dependencies.json"), "utf-8")
+    );
+    
     console.log("Installing dependencies...");
+    execSync(`npm install ${dependencies.join(" ")}`, {
+        stdio: "inherit",
+    });
+
+    console.log("Installing dev dependencies...");
+    execSync(`npm install -D ${devDependencies.join(" ")}`, {
+        stdio: "inherit",
+    });
 
-    execSync("npm install", {
+    console.log('Remove @react-native/new-app-screen');
+    execSync(`npm uninstall @react-native/new-app-screen`, {
         stdio: "inherit",
     });
 }

package/package.json

@@ -1,11 +1,22 @@
 {
     "name": "@funtools/create-react-native-app",
     "description": "Create a React Native app with preconfigured setup",
-    "version": "1.1.2",
+    
+    "version": "1.1.4",
+    
     "type": "module",
+    
+    "license": "MIT",
+    
     "bin": {
         "create-react-native-app": "index.js"
     },
+
+    "files": [
+        "index.js",
+        "initApp.js"
+    ],
+    
     "dependencies": {
         "prompts": "^2.4.2"
     }

package/.gitattributes

@@ -1,2 +0,0 @@
-# Auto detect text files and perform LF normalization
-* text=auto

package/templates/base/babel.config.js

@@ -1,11 +0,0 @@
-module.exports = {
-  presets: ['module:@react-native/babel-preset', 'nativewind/babel'],
-  plugins: [
-    [
-      'module-resolver', {
-        alias: { '@': './src' },
-        extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
-      }
-    ],
-  ],
-};

package/templates/base/global.css

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;

package/templates/base/index.js

@@ -1,6 +0,0 @@
-import { AppRegistry } from 'react-native';
-import { name as appName } from './app.json';
-import App from './src/App';
-import './global.css';
-
-AppRegistry.registerComponent(appName, () => App);

package/templates/base/metro.config.js

@@ -1,18 +0,0 @@
-const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");
-const { withNativeWind } = require("nativewind/metro");
-
-const defaultConfig = getDefaultConfig(__dirname);
-const { assetExts, sourceExts } = defaultConfig.resolver;
- 
-const config = mergeConfig(defaultConfig, {
-  /* your config */
-  transformer: {
-    babelTransformerPath: require.resolve("react-native-svg-transformer")
-  },
-  resolver: {
-    assetExts: assetExts.filter((ext) => ext !== "svg"),
-    sourceExts: [...sourceExts, "svg"]
-  }
-});
- 
-module.exports = withNativeWind(config, { input: "./global.css" });

package/templates/base/nativewind-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="nativewind/types" />

package/templates/base/package.json

@@ -1,54 +0,0 @@
-{
-  "name": "$AppName",
-  "version": "0.0.1",
-  "private": true,
-  "scripts": {
-    "android": "react-native run-android",
-    "ios": "react-native run-ios",
-    "lint": "eslint .",
-    "start": "react-native start",
-    "test": "jest"
-  },
-
-  "dependencies": {
-    "@funtools/store": "^1.0.4",
-    "@react-navigation/native": "^7.1.26",
-    "@react-navigation/native-stack": "^7.9.0",
-    "lucide-react-native": "^0.562.0",
-    "nativewind": "^4.2.1",
-    "react": "19.2.0",
-    "react-native": "0.83.1",
-    "react-native-gesture-handler": "^2.30.0",
-    "react-native-safe-area-context": "^5.6.2",
-    "react-native-screens": "^4.19.0",
-    "react-native-svg": "^15.15.1"
-  },
-
-  "devDependencies": {
-    "@babel/core": "^7.25.2",
-    "@babel/preset-env": "^7.25.3",
-    "@babel/runtime": "^7.25.0",
-    "@react-native-community/cli": "20.0.0",
-    "@react-native-community/cli-platform-android": "20.0.0",
-    "@react-native-community/cli-platform-ios": "20.0.0",
-    "@react-native/babel-preset": "0.83.1",
-    "@react-native/eslint-config": "0.83.1",
-    "@react-native/metro-config": "0.83.1",
-    "@react-native/typescript-config": "0.83.1",
-    "@types/jest": "^29.5.13",
-    "@types/react": "^19.2.0",
-    "@types/react-test-renderer": "^19.1.0",
-    "babel-plugin-module-resolver": "^5.0.2",
-    "eslint": "^8.19.0",
-    "jest": "^29.6.3",
-    "prettier": "2.8.8",
-    "react-native-svg-transformer": "^1.5.2",
-    "react-test-renderer": "19.2.0",
-    "tailwindcss": "^3.4.19",
-    "typescript": "^5.8.3"
-  },
-  
-  "engines": {
-    "node": ">=20"
-  }
-}

package/templates/base/react-native.config.js

@@ -1,4 +0,0 @@
-// react-native.config.js
-module.exports = {
-  assets: ['./src/Shared/Assets/Fonts'],
-};

package/templates/base/src/App.tsx

@@ -1,16 +0,0 @@
-import { SafeAreaProvider } from 'react-native-safe-area-context';
-import { GestureHandlerRootView } from 'react-native-gesture-handler';
-import { AppNavigationContainer } from './Navigation';
-import ThemeView from './Shared/Stores/Theme/Components/ThemeView';
-
-export default function App() {
-  return (
-    <GestureHandlerRootView className='flex-1' >
-      <SafeAreaProvider>
-        <ThemeView className='flex-1 w-full h-full' >
-          <AppNavigationContainer/>
-        </ThemeView>
-      </SafeAreaProvider>
-    </GestureHandlerRootView>
-  );
-}

package/templates/base/src/Navigation/NavigationContainer/App.tsx

@@ -1,16 +0,0 @@
-import {
-  createNavigationContainerRef,
-  NavigationContainer,
-} from '@react-navigation/native';
-import RootStackNavigator from '../StackNavigators/Root';
-import { RootStackParamList } from '../StackNavigators/Root/types';
-
-export const navigationRef = createNavigationContainerRef<RootStackParamList>();
-
-export default function AppNavigationContainer() {
-  return (
-    <NavigationContainer ref={navigationRef}>
-      <RootStackNavigator />
-    </NavigationContainer>
-  );
-}

package/templates/base/src/Navigation/StackNavigators/Root/index.tsx

@@ -1,23 +0,0 @@
-import { createNativeStackNavigator } from '@react-navigation/native-stack';
-import { RootStackParamList } from './types';
-import HomeScreen from '@/Screens/Home';
-
-const Stack = createNativeStackNavigator<RootStackParamList>();
-
-const screens: Array<Parameters<typeof Stack.Screen>[0]> = [
-    { name: 'Home', component: HomeScreen },
-];
-
-export default function RootStackNavigator() {
-  return (
-    <Stack.Navigator
-      screenOptions={{
-        headerShown: false,
-      }}
-    >
-      {screens.map((screen, index) => (
-        <Stack.Screen key={index} {...screen} />
-      ))}
-    </Stack.Navigator>
-  );
-}

package/templates/base/src/Navigation/StackNavigators/Root/types.ts

@@ -1,5 +0,0 @@
-import { NavigatorScreenParams } from "@react-navigation/native"
-
-export type RootStackParamList = {
-    Home: undefined;
-}

package/templates/base/src/Navigation/index.ts

@@ -1,2 +0,0 @@
-export { default as AppNavigationContainer } from './NavigationContainer/App';
-export { navigationRef } from './NavigationContainer/App'

package/templates/base/src/Screens/Home.tsx

@@ -1,10 +0,0 @@
-import { ThemeText, ThemeView } from "@/Shared/Stores/Theme/Components";
-
-
-export default function HomeScreen() {
-    return (
-        <ThemeView>
-            <ThemeText>Home</ThemeText>
-        </ThemeView>    
-    )
-}

package/templates/base/src/Shared/Components/Core/Icon.tsx

@@ -1,24 +0,0 @@
-import * as icons from 'lucide-react-native/icons';
-import { LucideProps } from "lucide-react-native";
-import { useThemeStore } from "../../Stores/Theme";
-import { ColorStates } from '../../Stores/Theme/types';
-
-
-export type IconName = keyof typeof icons;
-
-export type IconProps = LucideProps & {
-  name: IconName,
-  
-  size?: number,
-  color?: ColorStates,
-  customColor?: string,
-}
-
-export default function Icon({name, size=16, color='text', customColor, ...props}: IconProps){
-
-  const colors = useThemeStore(states => customColor ?? states.colors[color])
-
-  const LucideIcon = icons[name];
-
-  return <LucideIcon {...props} color={colors} size={size} />;
-}

package/templates/base/src/Shared/Components/Core/Modals/CenterModal.tsx

@@ -1,134 +0,0 @@
-import { Dispatch, ReactNode, SetStateAction, useEffect, useRef, useState } from "react";
-import { Animated, Modal, ModalProps, PanResponder, useAnimatedValue, useWindowDimensions } from "react-native";
-import RippleContainer from "../RippleContainer";
-import ThemeView, { ThemeViewProps } from "../../../Stores/Theme/Components/ThemeView";
-import { useThemeStore } from "../../../Stores/Theme";
-import { ColorStates } from "../../../Stores/Theme/types";
-
-
-
-export type CenterModalProps = Omit<ModalProps, 'animationType'> & {
-    children: ReactNode,
-    visible: boolean,
-    setVisible: Dispatch<SetStateAction<boolean>>,
-    preventCloseRequest?: boolean,
-    containerProps?: ThemeViewProps,
-    backdropColor?: ColorStates
-}
-
-
-export default function CenterModal({children, visible, setVisible, preventCloseRequest=false, onRequestClose, style, containerProps, backdropColor: backdropVariant='text', ...props}: CenterModalProps) {
-
-    const backdropColor = useThemeStore(states => states.colors[backdropVariant].replace(')', ', 0.8)'));
-
-    const {width: windowWidth, height: windowHeight} = useWindowDimensions();
-
-    const [show, setShow] = useState(visible);
-    
-    const animatedValue = useAnimatedValue(0);
-
-    const translate = useRef(new Animated.ValueXY({x: 0, y: 0})).current;
-
-    const {panHandlers} = useRef(PanResponder.create({
-        onStartShouldSetPanResponder: () => true,
-        onMoveShouldSetPanResponder: (_, gestureState) => {
-            return Math.abs(gestureState.dy) > 5;
-        },
-
-        onPanResponderTerminationRequest: () => false,
-
-        onPanResponderMove: (_, {dx, dy}) => {
-            translate.setValue({x: dx, y: dy});
-        },
-
-        onPanResponderRelease: (_, {vx, vy, dx, dy}) => {
-            const isNearEdge = [
-                Math.abs(dx) > windowWidth * 0.4, 
-                Math.abs(dy) > windowHeight * 0.4
-            ].some(Boolean);
-            
-            const isMovingFast = [Math.abs(vx) > 2, Math.abs(vy) > 2].some(Boolean);
-
-            if((isNearEdge || isMovingFast) && !preventCloseRequest) {
-                return setVisible(false);
-            }
-
-            Animated.spring(translate, {
-                toValue: {x: 0, y: 0},
-                bounciness: 12,
-                useNativeDriver: true
-            }).start()
-        }
-
-    })).current;
-
-    function handleClose() {
-        setTimeout(() => setShow(false), 150)
-
-        Animated.spring(animatedValue, {
-            toValue: 0,
-            bounciness: 12,
-            useNativeDriver: true
-        }).start()
-    }
-
-    function handleOnRequestClose() {
-        if(preventCloseRequest) return;
-        
-        setVisible(false);
-    }
-
-    useEffect(() => {        
-        if(visible){
-            setShow(true);
-            translate.setValue({x: 0, y: 0});
-            
-            Animated.spring(animatedValue, {
-                toValue: 1,
-                bounciness: 12,
-                useNativeDriver: true
-            }).start()
-        } else {
-            handleClose();
-        }
-    }, [visible])
-
-    
-    return (
-        <Modal {...props} 
-            visible={show}
-            transparent
-
-            onRequestClose={handleOnRequestClose}
-        >
-            <Animated.View className="flex-1 w-full h-full items-center justify-center" 
-                style={{
-                    opacity: animatedValue,
-                    backgroundColor: backdropColor
-                }}
-            >
-                <RippleContainer className="flex-1 w-full" onPress={handleOnRequestClose} rippleOpacity={0.2} />
-                
-                <Animated.View {...panHandlers}
-                    className={'w-full p-2 relative'}
-                    style={{
-                        opacity: animatedValue,
-                        transform: [
-                            {translateX: translate.x}, {translateY: translate.y}, 
-                            {scale: animatedValue.interpolate({inputRange: [0, 1], outputRange: [0.4, 1]})}
-                        ]
-                    }}
-                >
-                    <ThemeView
-                        {...containerProps}
-                        style={[{ borderRadius: 12, padding: 4 }, style, {overflow: 'hidden', width: '100%'}]} 
-                    >
-                        {children}
-                    </ThemeView>
-                </Animated.View>
-                
-                <RippleContainer className="flex-1 w-full" onPress={handleOnRequestClose} rippleOpacity={0.2} />
-            </Animated.View>
-        </Modal>
-    )
-}

package/templates/base/src/Shared/Components/Core/Modals/index.tsx

@@ -1 +0,0 @@
-export {default as CenterModal} from './CenterModal';

package/templates/base/src/Shared/Components/Core/RippleContainer.tsx

@@ -1,91 +0,0 @@
-import { ReactNode, useRef, useState } from "react";
-import { useThemeStore } from "../../Stores/Theme";
-import { ColorStates } from "../../Stores/Theme/types";
-import { Animated, GestureResponderEvent, Pressable, PressableProps, useAnimatedValue, View, ViewStyle } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-
-
-export type RippleContainerProps = PressableProps & {
-  children?: ReactNode,
-  color?: ColorStates
-  style?: ViewStyle
-  rippleOpacity?: number, 
-  rippleColor?: string,
-  rippleScale?: number,
-  rippleCount?: number,
-  duration?: number,
-}
-
-
-export default function RippleContainer({children, style, onPress, color='text', rippleColor, rippleOpacity=0.4, rippleScale=1, duration=300, rippleCount=3, ...props}: RippleContainerProps) {
-
-  const {top, left} = useSafeAreaInsets();
-  
-  const rgb = useThemeStore(s => s.colors[color]);
-  rippleColor ??= `rgb(${rgb})`;
-    
-  const [position, setPosition] = useState<{top: number, left: number}>({top: 0, left: 0});
-
-  const animatedValue = useAnimatedValue(0);
-
-  const button = useRef<View>(null);
-
-  function handleOnPress(event: GestureResponderEvent) {
-    const {pageX, pageY} = event.nativeEvent;
-    
-    button.current?.measureInWindow((x, y, w) => {
-      x += left; 
-      y += top;
-      
-      setPosition({top: pageY - y - w / 2, left: pageX - x - w / 2})
-    })
-
-    startAnimation();
-    
-    onPress?.(event);
-  }
-
-
-  function startAnimation() {
-    Animated.timing(animatedValue, {
-      toValue: 1,
-      duration,
-      useNativeDriver: true
-    }).start(() => {
-      animatedValue.setValue(0);
-    })
-  }
-
-
-  return (
-    <Pressable ref={button} {...props} onPress={handleOnPress} style={[style, { overflow: 'hidden', position: 'relative' }]}>
-      <View className="absolute aspect-square" style={{...position, width: '100%'}} >
-        {
-          [...new Array(Math.min(rippleCount, 5))].map((_, index) => (
-            <Animated.View key={index}
-              className={'absolute w-full aspect-square rounded-full'}
-              style={{ 
-                backgroundColor: rippleColor,
-                
-
-                opacity: animatedValue.interpolate({
-                  inputRange: [0, 1],
-                  outputRange: [rippleOpacity * ((rippleCount - index) / rippleCount), 0],
-                }),
-
-                transform: [{
-                  scale: animatedValue.interpolate({
-                    inputRange: [0, 0.1, 1], 
-                    outputRange: [0, rippleScale * 0.1, rippleScale + (index * 0.1)]
-                  })
-                }]
-              }}
-            />
-          ))
-        }
-      </View>
-
-      {children}
-    </Pressable>
-  );
-}

package/templates/base/src/Shared/Components/Core/ShowWhen.tsx

@@ -1,11 +0,0 @@
-import { ReactNode } from "react"
-
-type ShowWhenProps = {
-  when: boolean
-  children: ReactNode
-  otherwise?: ReactNode
-}
-
-export default function ShowWhen({ when, children, otherwise=null }: ShowWhenProps) {
-  return when ? children: otherwise
-}

package/templates/base/src/Shared/Components/UI/Buttons/Button.tsx

@@ -1,53 +0,0 @@
-import RippleContainer, { RippleContainerProps } from '@/Shared/Components/Core/RippleContainer';
-import Icon, { IconName } from '@/Shared/Components/Core/Icon';
-import { ButtonSize, ButtonVariants } from './Utils/types';
-import { RANGE } from '@/Shared/Types/number.type';
-import { getButtonStyle } from './Utils/functions';
-import { BUTTON_LAYOUT } from './Utils/constance';
-import ThemeText from '@/Shared/Stores/Theme/Components/ThemeText';
-import ShowWhen from '@/Shared/Components/Core/ShowWhen';
-
-type ButtonProp = Omit<RippleContainerProps, 'rippleColor' | 'rippleScale'> & {
-  title: string;
-
-  startIcon?: IconName;
-  endIcon?: IconName;
-  variant?: ButtonVariants;
-  size?: ButtonSize;
-  rounded?: number | `${RANGE<0, 100>}%`;
-};
-
-
-export default function Button({ title, startIcon, endIcon, variant = 'solid', color = 'primary', size = 'md', rounded, style, ...props}: ButtonProp) {
-  
-  const { color: textColor, borderColor, backgroundColor } = getButtonStyle(variant, color);
-
-  const {fontSize, ...containerStyle} = {
-    ...BUTTON_LAYOUT[size], 
-    ...rounded !== undefined ? {borderRadius: rounded} : {}
-  };
-
-  return (
-    <RippleContainer
-      {...props}
-      rippleColor={textColor}
-      rippleScale={2}
-      
-      style={{ 
-        backgroundColor, borderColor, flexDirection: 'row', gap: Math.floor(fontSize / 2), alignItems: 'center', justifyContent: 'center',
-        ...containerStyle, 
-        ...style, 
-      }}
-    >
-      <ShowWhen when={!!startIcon}>
-        <Icon name={startIcon as IconName} customColor={textColor} />
-      </ShowWhen>
-
-      <ThemeText textColor={textColor} style={{fontSize}} >{title}</ThemeText>
-      
-      <ShowWhen when={!!endIcon} >
-        <Icon name={endIcon as IconName} customColor={textColor} />
-      </ShowWhen>
-    </RippleContainer>
-  );
-}

package/templates/base/src/Shared/Components/UI/Buttons/IconButton.tsx

@@ -1,32 +0,0 @@
-import { RANGE } from "../../../Types/number.type"
-import Icon, { IconName } from "../../Core/Icon"
-import RippleContainer, { RippleContainerProps } from "../../Core/RippleContainer"
-import { BUTTON_LAYOUT } from "./Utils/constance"
-import { getButtonStyle } from "./Utils/functions"
-import { ButtonSize, ButtonVariants } from "./Utils/types"
-
-
-export type IconButtonProps = RippleContainerProps & {
-    icon: IconName,
-    
-    variant?: ButtonVariants,
-    size?: number | ButtonSize,
-    rounded?: number | `${RANGE<0, 100>}%`
-}
-
-export default function IconButton({variant='soft', color='primary', icon, size='md', rounded='50%', ...props}: IconButtonProps) {
-
-    const {color: textColor, ...style} = getButtonStyle(variant, color);
-
-    const height = typeof size === 'number' ? size : BUTTON_LAYOUT[size].height;
-    const borderWidth = typeof size === 'number' ? 1 : BUTTON_LAYOUT[size].borderWidth;
-    return (
-        <RippleContainer {...props}
-        rippleScale={2}
-            rippleColor={textColor}
-            style={{...style, height, borderRadius: rounded, borderWidth, alignItems: 'center', justifyContent: 'center', aspectRatio: 1}}
-        >
-            <Icon customColor={textColor} name={icon} size={Math.floor(height * 0.6)} />
-        </RippleContainer>
-    )
-}

package/templates/base/src/Shared/Components/UI/Buttons/Utils/constance.ts

@@ -1,39 +0,0 @@
-import { ButtonLayout, ButtonSize } from "./types";
-
-export const BUTTON_LAYOUT: Record<ButtonSize, ButtonLayout> = {
-    'xs': {
-        height: 24,
-        borderRadius: 8,
-        paddingInline: 8,
-        fontSize: 10,
-        borderWidth: 1
-    },
-    'sm': {
-        height: 32,
-        borderRadius: 12,
-        paddingInline: 12,
-        fontSize: 14,
-        borderWidth: 1
-    },
-    'md': {
-        height: 40,
-        borderRadius: 14,
-        paddingInline: 14,
-        fontSize: 16,
-        borderWidth: 1
-    },
-    'lg': {
-        height: 48,
-        borderRadius: 16,
-        paddingInline: 16,
-        fontSize: 20,
-        borderWidth: 2
-    },
-    'xl': {
-        height: 56,
-        borderRadius: 18,
-        paddingInline: 18,
-        fontSize: 24,
-        borderWidth: 2
-    }
-}

package/templates/base/src/Shared/Components/UI/Buttons/Utils/functions.ts

@@ -1,55 +0,0 @@
-import { useMemo } from "react";
-import { useThemeStore } from "../../../../Stores/Theme";
-import { ColorStates } from "../../../../Stores/Theme/types";
-import { ButtonVariants } from "./types";
-
-export function getButtonStyle(variant: ButtonVariants, color: ColorStates) {
-    const {textColor, bgColor} = useThemeStore((states) => {
-        if(['text', 'bg'].includes(color ?? '')) {
-            return {
-                bgColor: states.colors[color],
-                textColor: states.colors[color === 'text' ? 'bg' : 'text']
-            }
-        }
-
-        return {
-            bgColor: states.colors[color],
-            textColor: 'rgb(255,255,255)'
-        }
-    })
-
-
-    const style = useMemo(() => ({
-        'solid': {
-            color: textColor,
-            backgroundColor: bgColor,
-            borderColor: bgColor,
-        },
-
-        'outlined': {
-            color: bgColor,
-            backgroundColor: 'transparent',
-            borderColor: bgColor,
-        },
-
-        'soft': {
-            color: bgColor,
-            backgroundColor: bgColor.replace(')', ', 0.2)'),
-            borderColor: bgColor.replace(')', ', 0.2)'),
-        },
-
-        'soft-outlined': {
-            color: bgColor,
-            backgroundColor: bgColor.replace(')', ', 0.2)'),
-            borderColor: bgColor
-        },
-
-        'text': {
-            color: bgColor,
-            backgroundColor: 'transparent',
-            borderColor: 'transparent',
-        }
-    }[variant]), [bgColor, textColor]);
-
-    return style;
-}

package/templates/base/src/Shared/Components/UI/Buttons/Utils/types.ts

@@ -1,12 +0,0 @@
-export type ButtonVariants = 'solid' | 'outlined' | 'soft' | 'soft-outlined' | 'text';
-
-export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-
-// add more according to need;
-export type ButtonLayout = {
-    height: number,
-    borderRadius: number,
-    paddingInline: number,
-    fontSize: number,
-    borderWidth: number
-}

package/templates/base/src/Shared/Components/UI/Buttons/index.ts

@@ -1,2 +0,0 @@
-export {default as Button} from './Button';
-export {default as IconButton} from './IconButton';

package/templates/base/src/Shared/Hooks/useUpdateEffect.ts

@@ -1,14 +0,0 @@
-import { DependencyList, EffectCallback, useEffect, useRef } from "react";
-
-
-export default function useUpdateEffect(effect: EffectCallback, deps: DependencyList) {
-  const mountedRef = useRef(false);
-
-  useEffect(() => {
-    if (mountedRef.current) {
-      return effect();
-    }
-    
-    mountedRef.current = true;
-  }, deps);
-}

package/templates/base/src/Shared/Stores/Theme/Components/ThemeText.tsx

@@ -1,22 +0,0 @@
-import { Animated, TextProps } from "react-native";
-import { useThemeStore } from "..";
-import { ColorStates } from "../types";
-import { AnimatedInterpolValue } from "../../../Types/native.type";
-
-
-export type ThemeTextProps = TextProps & {
-    color?: ColorStates,
-    textColor?: string | AnimatedInterpolValue
-}
-
-export default function ThemeText({style, color: _color = 'text', textColor, className, ...props}: ThemeTextProps): React.JSX.Element {
-
-    const color = useThemeStore(states => textColor ?? states.colors[_color]);
-
-    return (
-        <Animated.Text {...props} 
-            style={[style, {color}]}
-            className={`font-regular ${className}`}
-        />
-    )
-}

package/templates/base/src/Shared/Stores/Theme/Components/ThemeView.tsx

@@ -1,25 +0,0 @@
-import { Animated, ViewProps } from "react-native";
-import { useThemeStore } from "..";
-import { ColorStates } from "../types";
-
-
-export type ThemeViewProps = ViewProps & {
-    color?: ColorStates,
-    backgroundColor?: string,
-    useWindBackground?: boolean
-}
-
-export default function ThemeView({style, color = 'bg', backgroundColor, useWindBackground=false, ...props}: ThemeViewProps): React.JSX.Element {
-
-    const {_backgroundColor} = useThemeStore(states => ({
-        _backgroundColor: states.colors[color]
-    }));
-
-    if(!backgroundColor) backgroundColor = _backgroundColor;
-
-    return (
-        <Animated.View {...props} 
-            style={[style, useWindBackground === false ? {backgroundColor} : null]}
-        />
-    )
-}

package/templates/base/src/Shared/Stores/Theme/Components/index.ts

@@ -1,2 +0,0 @@
-export { default as ThemeText } from "./ThemeText";
-export { default as ThemeView } from "./ThemeView";

package/templates/base/src/Shared/Stores/Theme/constance.ts

@@ -1,25 +0,0 @@
-import { Theme, ColorStates } from './types';
-
-export const _theme: Theme = 'light';
-
-export const _colors: Record<Theme, Record<ColorStates, string>> = {
-  light: {
-    text: 'rgb(0, 0, 0)',
-    bg: 'rgb(240, 242, 245)',
-
-    primary: 'rgb(40, 120, 255)',
-    error: 'rgb(245, 34, 45)',
-    warning: 'rgb(255, 184, 0)',
-    info: 'rgb(74, 108, 135)',
-  },
-
-  dark: {
-    text: 'rgb(240, 242, 245)',
-    bg: 'rgb(0, 0, 0)',
-
-    primary: 'rgb(40, 120, 255)',
-    error: 'rgb(245, 34, 45)',
-    warning: 'rgb(255, 184, 0)',
-    info: 'rgb(74, 108, 135)',
-  },
-};

package/templates/base/src/Shared/Stores/Theme/index.ts

@@ -1,19 +0,0 @@
-import { Theme } from './types';
-import { _colors, _theme } from './constance';
-import { createStore } from '@fun-tools/store';
-
-const { useStore, useHandlers } = createStore({
-  states: {
-    theme: _theme,
-    colors: _colors[_theme],
-  },
-
-  syncHandlers: {
-    toggleTheme(state) {
-      state.theme = state.theme === 'dark' ? 'light' : 'dark';
-      state.colors = _colors[state.theme];
-    },
-  },
-});
-
-export { useStore as useThemeStore, useHandlers as useThemeHandlers };

package/templates/base/src/Shared/Stores/Theme/types.ts

@@ -1,3 +0,0 @@
-export type Theme = 'light' | 'dark';
-
-export type ColorStates = 'text' | 'bg' | 'primary' | 'error' | 'info' | 'warning';

package/templates/base/src/Shared/Types/native.type.ts

@@ -1,4 +0,0 @@
-import { Animated } from "react-native";
-
-const interpol = new Animated.Value(0).interpolate;
-export type AnimatedInterpolValue = ReturnType<typeof interpol>;

package/templates/base/src/Shared/Types/number.type.ts

@@ -1,8 +0,0 @@
-export type FINITE_NUMBER<E extends number, A extends unknown[] = []> = (
-    A['length'] extends E ? A[number] | E : FINITE_NUMBER<E, [...A, A['length']]>
-)
-
-
-export type RANGE<S extends number, E extends number> = (
-    Exclude<FINITE_NUMBER<E>, FINITE_NUMBER<S>> | S
-)

package/templates/base/src/Shared/Types/svg.d.ts

@@ -1,7 +0,0 @@
-declare module '*.svg' {
-  import React from 'react';
-  import { SvgProps } from 'react-native-svg';
-
-  const content: React.FC<SvgProps>;
-  export default content;
-}

package/templates/base/tailwind.config.js

@@ -1,22 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: [
-    "./src/**/*.{js,jsx,ts,tsx}",
-  ],
-  presets: [require("nativewind/preset")],
-  theme: {
-    extend: {
-      fontFamily: {
-        thin: ['Roboto-Thin'],
-        extralight: ['Roboto-ExtraLight'],
-        light: ['Roboto-Light'],
-        regular: ['Roboto-Regular'],
-        medium: ['Roboto-Medium'],
-        semibold: ['Roboto-SemiBold'],
-        bold: ['Roboto-Bold'],
-        extrabold: ['Roboto-ExtraBold'],
-      }
-    },
-  },
-  plugins: [],
-};

package/templates/base/tsconfig.json

@@ -1,17 +0,0 @@
-{
-  "extends": "@react-native/typescript-config",
-  "compilerOptions": {
-    "jsx": "react-native",
-    "types": ["jest"],
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  },
-  "include": [
-    "**/*.ts",
-    "**/*.tsx",
-    "nativewind-env.d.ts",
-    "react-native.config.js"
-  ],
-  "exclude": ["**/node_modules", "**/Pods"]
-}