@imksh/create 1.0.24 → 1.0.26

package/templates/react-native/docs/README.md

@@ -1,17 +0,0 @@
-# Mobile App Documentation
-
-Welcome to the documentation for the Expo React Native Mobile App. This folder contains detailed information on how to use the app, navigate its architecture, and utilize the custom UI component library.
-
-## Table of Contents
-
-### Core
-- [Getting Started](./getting-started.md)
-
-### UI Component Library
-- [Buttons](./components/buttons.md)
-- [Data Display](./components/data-display.md) (e.g., SwipeableRow, Accordion, Avatar)
-- [Feedback](./components/feedback.md) (e.g., Progress, Spinners)
-- [Gestures & Touch](./components/gestures.md) (e.g., GestureWrapper)
-- [Inputs](./components/inputs.md) (e.g., TextInput, OTPInput, Switches)
-- [Layout](./components/layout.md) (e.g., Container, Divider, Grid)
-- [Navigation](./components/navigation.md) (e.g., Tabs, Pagination, ProgressStepper)

package/templates/react-native/docs/components/buttons.md

@@ -1,40 +0,0 @@
-# Button Components
-
-Buttons trigger actions. The custom UI library provides several highly polished button variations.
-
-## `Button`
-The primary button component for the application, supporting different variants (solid, outline, ghost), colors, and loading states.
-
-### Usage Example
-```tsx
-import { Button } from '@/components/ui/buttons/Button';
-
-export default function Actions() {
-  return (
-    <>
-      <Button 
-        title="Submit" 
-        onPress={() => console.log('Primary pressed')} 
-      />
-      <Button 
-        title="Cancel" 
-        variant="outline"
-        onPress={() => console.log('Outline pressed')} 
-      />
-      <Button 
-        title="Saving..." 
-        loading={true}
-      />
-    </>
-  );
-}
-```
-
-## `IconButton`
-A button that only contains an icon without text. Perfect for header buttons or tight layouts.
-
-## `FloatingActionButton` (FAB)
-A persistent button that hovers over the screen, typically placed in the bottom right corner. Ideal for primary creation actions like "Compose Message".
-
-## `ButtonGroup`
-A wrapper to seamlessly group multiple related buttons together horizontally.

package/templates/react-native/docs/components/data-display.md

@@ -1,44 +0,0 @@
-# Data Display Components
-
-These components are used to display data visually, such as lists, images, and accordions.
-
-## `SwipeableRow`
-A highly complex component that wraps list items, allowing them to be swiped left or right to reveal action buttons.
-
-### Usage Example
-```tsx
-import { SwipeableRow, SwipeAction } from '@/components/ui/data-display/SwipeableRow';
-import { MaterialIcons } from '@expo/vector-icons';
-
-export default function ItemList() {
-  const rightActions: SwipeAction[] = [
-    {
-      icon: <MaterialIcons name="archive" size={24} color="white" />,
-      backgroundColor: '#3B82F6', // Blue
-      onPress: () => console.log('Archived!'),
-    },
-    {
-      icon: <MaterialIcons name="delete" size={24} color="white" />,
-      backgroundColor: '#EF4444', // Red
-      onPress: () => console.log('Deleted!'),
-    },
-  ];
-
-  return (
-    <SwipeableRow rightActions={rightActions}>
-      <View className="p-4 bg-white dark:bg-gray-800">
-        <Text className="text-lg text-black dark:text-white">Swipe me left!</Text>
-      </View>
-    </SwipeableRow>
-  );
-}
-```
-
-## `Accordion`
-An expandable section to hide/show details.
-
-## `Avatar`
-Displays a user profile image or their initials if the image is missing.
-
-## `Badge`
-A small visual indicator, often used for unread counts or status indicators.

package/templates/react-native/docs/components/feedback.md

@@ -1,36 +0,0 @@
-# Feedback Components
-
-Components designed to provide visual or physical feedback to the user, including loading states and gesture wrappers.
-
-## `GestureWrapper`
-A powerful utility component that simplifies `react-native-gesture-handler`. It abstracts the boilerplate of the `GestureDetector` API.
-
-### Usage Example
-```tsx
-import { GestureWrapper } from '@/components/ui/feedback/GestureWrapper';
-import { View, Text } from 'react-native';
-
-export default function InteractiveCard() {
-  return (
-    <GestureWrapper
-      onTap={() => console.log("Card Tapped")}
-      onDoubleTap={() => console.log("Card Liked (Double Tap)")}
-      onSwipeLeft={() => console.log("Dismissed to the left")}
-      onPanUpdate={(e) => console.log(`Dragging at X: ${e.translationX}`)}
-    >
-      <View className="p-8 bg-blue-500 rounded-xl">
-        <Text className="text-white text-xl">Interact with me!</Text>
-      </View>
-    </GestureWrapper>
-  );
-}
-```
-
-## `CircularProgress` & `ProgressBar`
-Used to indicate loading progress or task completion.
-
-## `Skeleton`
-Used as a placeholder while data is loading.
-
-## `Spinner`
-An infinite spinning loading indicator.

package/templates/react-native/docs/components/gestures.md

@@ -1,60 +0,0 @@
-# Gesture Control Components
-
-Handling touch events and gestures natively in React Native can be complex, but this template provides highly abstracted, easy-to-use gesture wrappers powered by `react-native-gesture-handler` and `react-native-reanimated`.
-
-## `GestureWrapper`
-The most versatile component for gesture handling. It abstracts away the boilerplate of the `GestureDetector` API, allowing you to easily handle taps, double-taps, drags, and directional swipes.
-
-### Supported Events
-- **Taps**: `onTap`, `onDoubleTap`
-- **Directional Swipes**: `onSwipeLeft`, `onSwipeRight`, `onSwipeUp`, `onSwipeDown` (fires when a quick fling exceeds the velocity threshold).
-- **Pan / Dragging**: `onPanStart`, `onPanUpdate`, `onPanEnd` (provides the raw `translationX`/`translationY` event data).
-
-### Usage Example
-```tsx
-import { GestureWrapper } from '@/components/ui/feedback/GestureWrapper';
-import { View, Text } from 'react-native';
-
-export default function InteractiveCard() {
-  return (
-    <GestureWrapper
-      // Simple Taps
-      onTap={() => console.log("Card Tapped")}
-      onDoubleTap={() => console.log("Card Liked (Double Tap)")}
-      
-      // Swipes
-      onSwipeLeft={() => console.log("Dismissed to the left")}
-      onSwipeRight={() => console.log("Dismissed to the right")}
-      onSwipeUp={() => console.log("Swiped up")}
-      
-      // Continuous Dragging
-      onPanUpdate={(e) => console.log(`Dragging at X: ${e.translationX}`)}
-    >
-      <View className="p-8 bg-blue-500 rounded-xl">
-        <Text className="text-white text-xl">Interact with me!</Text>
-      </View>
-    </GestureWrapper>
-  );
-}
-```
-
-## `SwipeableRow` (Data Display)
-While `GestureWrapper` is great for generic components, if you need a classic "Swipe to reveal actions" row (commonly seen in lists or emails), use the `SwipeableRow` component.
-
-### Usage Example
-```tsx
-import { SwipeableRow, SwipeAction } from '@/components/ui/data-display/SwipeableRow';
-
-// Define the actions revealed when swiping
-const rightActions: SwipeAction[] = [
-  {
-    icon: <Icon name="delete" />,
-    backgroundColor: '#EF4444',
-    onPress: () => console.log('Delete tapped'),
-  },
-];
-
-<SwipeableRow rightActions={rightActions}>
-  <ListItem content="Swipe me!" />
-</SwipeableRow>
-```

package/templates/react-native/docs/components/inputs.md

@@ -1,41 +0,0 @@
-# Input Components
-
-Inputs are used to collect data from the user. They are highly styled, accessible, and integrate cleanly with form libraries like React Hook Form.
-
-## `Input` (Text Input)
-The core text input component.
-
-### Usage Example
-```tsx
-import { Input } from '@/components/ui/inputs/Input';
-import { useState } from 'react';
-
-export default function Form() {
-  const [email, setEmail] = useState('');
-
-  return (
-    <Input
-      label="Email Address"
-      placeholder="Enter your email"
-      value={email}
-      onChangeText={setEmail}
-      error={email.includes('@') ? '' : 'Invalid email'}
-    />
-  );
-}
-```
-
-## `OTPInput`
-A component optimized for handling multi-digit verification codes.
-- Usage: `<OTPInput length={6} onComplete={(code) => console.log(code)} />`
-
-## `PasswordInput`
-An extension of the `Input` component that includes a toggle to show/hide the password text.
-
-## Other Inputs
-- `Checkbox`: Boolean selection.
-- `Radio`: Select one from a list.
-- `Switch`: A modern iOS/Android style toggle.
-- `Slider`: Choose a numeric value on a track.
-- `SearchBar`: A specialized text input for searching with a clear button.
-- `TextArea`: A multiline text input.

package/templates/react-native/docs/components/layout.md

@@ -1,34 +0,0 @@
-# Layout Components
-
-Layout components provide the foundational structure of the application screens, ensuring consistent padding, spacing, and structural organization.
-
-## `Container`
-Wraps main content to ensure consistent margins across all screens.
-
-## `ScrollContainer`
-Similar to `Container`, but uses a `ScrollView`. Essential for screens whose content exceeds the device height.
-
-## `KeyboardAvoidingViewWrapper`
-An extremely helpful utility that wraps the screen and automatically adjusts the layout padding when the virtual keyboard appears, preventing inputs from being hidden by the keyboard.
-
-### Usage Example
-```tsx
-import { KeyboardAvoidingViewWrapper } from '@/components/ui/layout/KeyboardAvoidingViewWrapper';
-import { Input } from '@/components/ui/inputs/Input';
-
-export default function LoginScreen() {
-  return (
-    <KeyboardAvoidingViewWrapper>
-      {/* Content won't be blocked by the keyboard here! */}
-      <Input placeholder="Username" />
-      <Input placeholder="Password" />
-    </KeyboardAvoidingViewWrapper>
-  );
-}
-```
-
-## `Divider`
-A simple horizontal or vertical line to separate content sections visually.
-
-## `Grid` & `Stack`
-Utility components for quickly aligning children items using flexbox properties, saving you from writing repetitive nativewind classes.

package/templates/react-native/docs/components/navigation.md

@@ -1,31 +0,0 @@
-# Navigation Components
-
-These components are used to guide the user between different views or show their current position within a multi-step process.
-
-## `Tabs`
-A highly complex, customizable top tab bar component, typically used for switching views horizontally (e.g., inside a profile or feed).
-
-### Usage Example
-```tsx
-import { Tabs } from '@/components/ui/navigation/Tabs';
-import { useState } from 'react';
-
-export default function Profile() {
-  const [activeTab, setActiveTab] = useState(0);
-  const tabs = ["Posts", "Followers", "Following"];
-
-  return (
-    <Tabs 
-      tabs={tabs} 
-      activeIndex={activeTab} 
-      onChange={setActiveTab} 
-    />
-  );
-}
-```
-
-## `ProgressStepper`
-Used for multi-step wizards, such as an onboarding flow or a multi-page checkout, clearly displaying the completed, current, and upcoming steps.
-
-## `Pagination`
-Displays a series of dots to indicate the current page in a carousel or swipeable view.

package/templates/react-native/docs/features.md

@@ -1,85 +0,0 @@
-# 🌟 Starter Kit Features
-
-This starter kit is packed with a robust set of features, prebuilt components, and essential services designed to eliminate setup time so you can focus entirely on building your product.
-
----
-
-## 🧩 UI Components
-
-Our custom UI library is built entirely from atomic elements, fully typed, beautifully styled with NativeWind, and ready for gesture-driven interactions.
-
-### 📐 Layout
-- **`Container`**: A responsive wrapper for consistent screen margins.
-- **`Section`**: A structured block for grouping related components with headers.
-- **`ScrollContainer`**: An optimized scrolling view that natively handles keyboard avoidance and safe area insets.
-- **`HStack` / `VStack`**: Flexbox utility components for rapid horizontal and vertical alignment.
-
-### 🔘 Buttons
-- **`Button`**: The core interactive element supporting multiple variants (`primary`, `secondary`, `accent`, `outline`, `ghost`), sizing (`sm`, `md`, `lg`), and a dynamic `soft` prop for pale translucent styling.
-- **`IconButton`**: Icon-only circular buttons for compact interactions.
-- **`FloatingActionButton`**: A prominent, elevated CTA button, typically anchored at the bottom of the screen.
-
-### 📊 Data Display
-- **`Avatar`**: Display user profile images with automatic fallbacks and size variants.
-- **`Badge`**: Small status indicators supporting all semantic theme colors and the `soft` prop.
-- **`Accordion`**: Collapsible vertical panels for FAQs or dense information.
-- **`Card`**: Elevated, rounded containers for grouping information.
-- **`SwipeableRow`**: Natively gesture-driven list items that reveal hidden actions (e.g., delete, archive) upon swiping left or right.
-
-### 📝 Inputs & Controls
-- **`Input`**: A highly styled text input supporting left/right icons, error states, and secure text entry.
-- **`SearchBar`**: A dedicated input variant tailored for real-time search filtering.
-- **`Switch`**: A native-feeling toggle switch for boolean states.
-- **`Checkbox` & `Radio`**: Accessible selection controls for forms and settings.
-- **`Slider`**: A continuous drag slider for numeric value selection.
-
-### ⏳ Feedback & Loading
-- **`Spinner`**: A minimal, rotating activity indicator.
-- **`ProgressBar`**: A linear progress bar for uploading/downloading tasks.
-- **`CircularProgress`**: An SVG-based circular indicator for data syncing or completion rates.
-- **`Skeleton`**: Animated placeholder blocks for loading states before data is fetched.
-- **`GestureWrapper`**: A powerful higher-order component that wraps any view to easily handle double-taps, long-presses, and directional swipes using `react-native-reanimated`.
-
-### 🧭 Navigation & Overlays
-- **`Tabs`**: Clean, customizable local tab navigation (supports `underline` and `button` pill styles).
-- **`BottomModal`**: A gesture-driven, highly responsive bottom sheet that slides up and can be dismissed interactively via drag gestures.
-
----
-
-## 🔌 Core Services
-
-Pre-configured, strongly-typed service wrappers handle complex background logic so you don't have to write boilerplate.
-
-### 🔐 Authentication (`auth.service.ts`)
-Fully integrated Axios endpoints for standard auth flows:
-- `sendOtp`: Dispatch sign-up verification codes.
-- `signup`: Register a new user with OTP verification.
-- `login`: Authenticate existing users.
-- `updateMe`: Sync profile updates to the backend.
-- `logout`: Clear session data securely.
-- `savePushToken`: Send device push tokens to the server.
-
-### 📱 Hardware Permissions (`permission.service.ts`)
-A centralized, cross-platform handler that abstracts away iOS/Android permission complexity:
-- `requirePermission`: Request camera, location, photo library, or microphone access gracefully.
-- `openSettingsForApp`: Deep-link users to system settings if they previously blocked a permission.
-- `registerForPushNotificationsAsync`: Automatically negotiate with Apple APNs / Firebase FCM, configure local Android channels, and return the Expo Push Token.
-
----
-
-## 🏗 System Architecture
-
-### 🚀 Tech Stack
-- **Framework**: Expo / React Native
-- **Styling**: NativeWind (Tailwind v3) & `react-native-reanimated`
-- **Routing**: `expo-router`
-- **Global State**: `zustand`
-- **Storage**: `@react-native-async-storage/async-storage`
-- **API**: `axios`
-
-### 🎨 Theming
-- **Dynamic Light/Dark Mode**: The entire UI responds instantly to the system appearance.
-- **Semantic Colors**: Colors are defined centrally (e.g., `primary`, `base100`, `error`) via CSS variables, making global restyling effortless.
-
-### ⚡ Build Pipeline
-- Pre-configured `eas.json` and local `npm` scripts to instantly compile Cloud or Local `.apk`, `.aab`, and `.ipa` artifacts.

package/templates/react-native/docs/getting-started.md

@@ -1,47 +0,0 @@
-# Getting Started
-
-This mobile app is built on **Expo Router**, **NativeWind**, and **Zustand**. 
-
-## App Architecture
-
-- **`src/app/`**: This is the routing directory. Expo Router uses file-based routing similar to Next.js.
-  - `_layout.tsx`: The root wrapper. This is where providers (`GestureHandlerRootView`, `PaperProvider`, `StatusBar`) are initialized.
-  - `(tabs)/`: A route group that shares a bottom tab bar layout.
-  - `login.tsx`: The login screen route.
-- **`src/components/`**: Reusable React components. The `ui/` folder contains our custom design system.
-- **`src/store/`**: Global state management using `Zustand`. `useAuthStore.ts` handles the authentication lifecycle.
-- **`src/services/`**: Abstracts API calls and device native capabilities (e.g., `permission.service.ts` for unified hardware permissions).
-
-## Managing Theme
-
-The app uses **NativeWind** to handle styling. 
-By default, the theme is bound to the device OS theme, but it can be overridden and saved using `AsyncStorage`.
-
-```tsx
-import { useColorScheme } from 'nativewind';
-
-export default function MyComponent() {
-  const { colorScheme, toggleColorScheme } = useColorScheme();
-  
-  return (
-    <View className="bg-white dark:bg-gray-900">
-      <Text className="text-black dark:text-white">Current theme: {colorScheme}</Text>
-    </View>
-  );
-}
-```
-
-## Hardware Permissions
-
-Never install a separate `expo-*` permission library manually. Use the `PermissionService`:
-
-```typescript
-import { permissionService } from '@/services/permission.service';
-
-const requestCamera = async () => {
-  const granted = await permissionService.requirePermission('camera');
-  if (granted) {
-    console.log('Camera ready!');
-  }
-}
-```

package/templates/react-native/src/components/common/HomeHeader.tsx

@@ -1,43 +0,0 @@
-import { View, TouchableOpacity, Pressable } from "react-native";
-import React, { useState } from "react";
-import { Txt } from "./Typography";
-import { useColorScheme } from "nativewind";
-import { Colors } from "../../constants/Colors";
-import { Ionicons } from "@expo/vector-icons";
-import Sidebar from "../ui/Sidebar";
-
-export default function HomeHeader({
-  title,
-  icon,
-  fun,
-}: {
-  title?: string;
-  icon?: keyof typeof Ionicons.glyphMap;
-  fun?: () => void;
-}) {
-  const { colorScheme } = useColorScheme();
-  const [isSidebarOpen, setIsSidebarOpen] = useState<boolean>(false);
-  const colors = Colors[colorScheme ?? "light"];
-  return (
-    <>
-      <View
-        className="h-28 pb-4 px-6 flex-row items-end justify-between border-b border-base-300 w-full"
-        style={{
-          backgroundColor: colors.base200,
-          // elevation: 1,
-        }}
-      >
-        <Pressable onPress={() => setIsSidebarOpen(true)}>
-          <Txt variant="xl" className="text-primary font-bold">
-            {title}
-          </Txt>
-        </Pressable>
-        <TouchableOpacity onPress={fun}>
-          <Ionicons name={icon} color={colors.baseContent} size={28} />
-        </TouchableOpacity>
-      </View>
-
-      <Sidebar isOpen={isSidebarOpen} onClose={() => setIsSidebarOpen(false)} />
-    </>
-  );
-}

package/templates/react-native/src/components/settings/SettingToggle.tsx

@@ -1,26 +0,0 @@
-import { View, Switch } from "react-native";
-import { Txt } from "../common/Typography";
-import { Ionicons } from "@expo/vector-icons";
-
-export default function SettingToggle({ check, fun, icon, name }) {
-  return (
-    <View className="flex-row justify-between items-center my-4">
-      <View className="flex-row justify-center items-center">
-        <View className="p-4 bg-blue-600 rounded-2xl mr-5 justify-center items-center">
-          <Ionicons name={icon} size={18} color="#fff" />
-        </View>
-        <Txt variant="mid">{name}</Txt>
-      </View>
-      <Switch
-        trackColor={{ false: "#767577", true: "#81b0ff" }}
-        thumbColor={check ? "#2196F3" : "#f4f3f4"}
-        ios_backgroundColor="#3e3e3e"
-        onValueChange={fun}
-        value={check}
-        style={{
-          transform: [{ scaleX: 1.5 }, { scaleY: 1.5 }],
-        }}
-      />
-    </View>
-  );
-}

package/templates/react-native/src/components/settings/SettingsOptions.tsx

@@ -1,47 +0,0 @@
-import { View, TouchableOpacity } from "react-native";
-import { useState } from "react";
-import { Txt } from "../common/Typography";
-import { Ionicons } from "@expo/vector-icons";
-import ConfirmationToast from "../common/ConfirmationToast";
-import { Portal } from "react-native-paper";
-import { useColorScheme } from "nativewind";
-import { Colors } from "../../constants/Colors";
-
-export default function SettingsOptins({ check, icon, fun, name, message }) {
-  const [show, setShow] = useState(false);
-  const { colorScheme } = useColorScheme();
-  const colors = Colors[colorScheme ?? "light"];
-  return (
-    <>
-      <TouchableOpacity
-        className="flex-row justify-between items-center my-4"
-        onPress={() => setShow(!show)}
-      >
-        <View className="flex-row justify-center items-center">
-          <View className="p-4 bg-blue-600 rounded-2xl mr-5 justify-center items-center">
-            <Ionicons name={icon} size={18} color="#fff" />
-          </View>
-          <Txt variant="mid">{name}</Txt>
-        </View>
-        <TouchableOpacity onPress={() => setShow(!show)}>
-          <Ionicons
-            name="chevron-forward-outline"
-            size={25}
-            color={colors.baseContent}
-          />
-        </TouchableOpacity>
-      </TouchableOpacity>
-      <Portal>
-        {show && (
-          <ConfirmationToast
-            fun={fun}
-            icon={icon}
-            setShow={setShow}
-            name={name}
-            message={message}
-          />
-        )}
-      </Portal>
-    </>
-  );
-}