@umituz/react-native-loading 1.0.0

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@umituz/react-native-loading",
+  "version": "1.0.0",
+  "description": "Loading states and animations for React Native apps with breathing animations, skeleton loaders, and state management hooks",
+  "main": "./lib/index.js",
+  "types": "./lib/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "typecheck": "tsc --noEmit",
+    "lint": "tsc --noEmit",
+    "clean": "rm -rf lib",
+    "prebuild": "npm run clean",
+    "prepublishOnly": "npm run build",
+    "version:patch": "npm version patch -m 'chore: release v%s'",
+    "version:minor": "npm version minor -m 'chore: release v%s'",
+    "version:major": "npm version major -m 'chore: release v%s'"
+  },
+  "keywords": [
+    "react-native",
+    "loading",
+    "skeleton",
+    "loader",
+    "animation",
+    "spinner"
+  ],
+  "author": "Ümit UZ <umit@umituz.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/umituz/react-native-loading"
+  },
+  "peerDependencies": {
+    "@umituz/react-native-design-system": ">=1.5.0",
+    "react": ">=18.2.0",
+    "react-native": ">=0.74.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.45",
+    "@types/react-native": "^0.73.0",
+    "@umituz/react-native-design-system": "^1.5.0",
+    "react": "^18.2.0",
+    "react-native": "^0.74.0",
+    "typescript": "^5.3.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "lib",
+    "src",
+    "README.md",
+    "LICENSE"
+  ]
+}
+

package/src/USAGE_EXAMPLES.md

@@ -0,0 +1,429 @@
+# Loading Domain - Usage Examples
+
+This file provides comprehensive examples for using the loading domain across all generated apps.
+
+## 📋 Table of Contents
+
+1. [Basic Loading State](#basic-loading-state)
+2. [Skeleton Loaders](#skeleton-loaders)
+3. [Loading State Hook](#loading-state-hook)
+4. [Full Screen Loading](#full-screen-loading)
+5. [List Screens with Skeleton](#list-screens-with-skeleton)
+6. [Custom Emoji per App](#custom-emoji-per-app)
+
+---
+
+## Basic Loading State
+
+### Simple Loading Indicator
+
+```typescript
+import { LoadingState } from '@domains/loading';
+
+const MyScreen = () => {
+  const [isLoading, setIsLoading] = useState(true);
+
+  return (
+    <View>
+      {isLoading ? (
+        <LoadingState message="Loading data..." />
+      ) : (
+        <Content />
+      )}
+    </View>
+  );
+};
+```
+
+### Inline Loading (Small Size)
+
+```typescript
+<LoadingState size="small" />
+```
+
+### Section Loading (Medium Size)
+
+```typescript
+<LoadingState size="medium" message="Fetching settings..." />
+```
+
+---
+
+## Skeleton Loaders
+
+### List Skeleton
+
+```typescript
+import { SkeletonLoader } from '@domains/loading';
+
+const ListScreen = () => {
+  const [data, setData] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+
+  return (
+    <View>
+      {isLoading ? (
+        <SkeletonLoader pattern="list" count={5} />
+      ) : (
+        <FlatList data={data} ... />
+      )}
+    </View>
+  );
+};
+```
+
+### Card Skeleton
+
+```typescript
+<SkeletonLoader pattern="card" count={3} />
+```
+
+### Profile Skeleton
+
+```typescript
+<SkeletonLoader pattern="profile" />
+```
+
+### Text Skeleton
+
+```typescript
+<SkeletonLoader pattern="text" count={3} />
+```
+
+### Custom Skeleton
+
+```typescript
+<SkeletonLoader
+  pattern="custom"
+  custom={[
+    { width: 100, height: 100, borderRadius: 50 },
+    { width: '80%', height: 20, borderRadius: 4, marginBottom: 8 },
+    { width: '60%', height: 16, borderRadius: 4 },
+  ]}
+/>
+```
+
+---
+
+## Loading State Hook
+
+### Manual Control
+
+```typescript
+import { useLoading } from '@domains/loading';
+
+const DataScreen = () => {
+  const { isLoading, loadingMessage, startLoading, stopLoading } = useLoading();
+
+  const handleSave = async () => {
+    startLoading('Saving changes...');
+    try {
+      await saveData();
+    } finally {
+      stopLoading();
+    }
+  };
+
+  return (
+    <View>
+      {isLoading && <LoadingState message={loadingMessage} />}
+      <Button onPress={handleSave}>Save</Button>
+    </View>
+  );
+};
+```
+
+### Async Wrapper (Automatic)
+
+```typescript
+const DataScreen = () => {
+  const { isLoading, loadingMessage, withLoading } = useLoading();
+
+  const loadData = () => withLoading(
+    fetchData(),
+    'Loading data...'
+  );
+
+  useEffect(() => {
+    loadData();
+  }, []);
+
+  return (
+    <View>
+      {isLoading ? (
+        <LoadingState message={loadingMessage} />
+      ) : (
+        <Content />
+      )}
+    </View>
+  );
+};
+```
+
+### Simple Loading Hook
+
+```typescript
+import { useSimpleLoading } from '@domains/loading';
+
+const SimpleScreen = () => {
+  const { isLoading, withLoading } = useSimpleLoading();
+
+  const handleAction = () => withLoading(performAction());
+
+  return (
+    <View>
+      {isLoading && <LoadingState />}
+      <Button onPress={handleAction}>Do Action</Button>
+    </View>
+  );
+};
+```
+
+---
+
+## Full Screen Loading
+
+### With Message
+
+```typescript
+<LoadingState
+  fullScreen
+  message="Please wait..."
+  size="large"
+/>
+```
+
+### Initial App Load
+
+```typescript
+const App = () => {
+  const [isReady, setIsReady] = useState(false);
+
+  useEffect(() => {
+    const prepare = async () => {
+      await loadAssets();
+      await loadData();
+      setIsReady(true);
+    };
+    prepare();
+  }, []);
+
+  if (!isReady) {
+    return <LoadingState fullScreen message="Initializing app..." />;
+  }
+
+  return <MainApp />;
+};
+```
+
+---
+
+## List Screens with Skeleton
+
+### Complete Example
+
+```typescript
+import { SkeletonLoader, useLoading } from '@domains/loading';
+
+const WorkoutsScreen = () => {
+  const [workouts, setWorkouts] = useState([]);
+  const { isLoading, withLoading } = useLoading();
+
+  const loadWorkouts = () => withLoading(
+    fetchWorkouts(),
+    'Loading workouts...'
+  );
+
+  useEffect(() => {
+    loadWorkouts();
+  }, []);
+
+  return (
+    <ScreenLayout>
+      <ScreenHeader title="Workouts" />
+
+      {isLoading ? (
+        <SkeletonLoader pattern="list" count={8} />
+      ) : workouts.length === 0 ? (
+        <EmptyState message="No workouts found" />
+      ) : (
+        <FlatList
+          data={workouts}
+          renderItem={({ item }) => <WorkoutCard workout={item} />}
+        />
+      )}
+    </ScreenLayout>
+  );
+};
+```
+
+---
+
+## Custom Emoji per App
+
+### Meditation App
+
+```typescript
+import { LoadingState, LOADING_EMOJIS } from '@domains/loading';
+
+<LoadingState
+  emoji={LOADING_EMOJIS.meditation}
+  message="Loading meditations..."
+/>
+```
+
+### Fitness App
+
+```typescript
+<LoadingState
+  emoji={LOADING_EMOJIS.fitness}
+  message="Loading workouts..."
+/>
+```
+
+### Productivity App
+
+```typescript
+<LoadingState
+  emoji={LOADING_EMOJIS.productivity}
+  message="Loading tasks..."
+/>
+```
+
+### Available Emojis
+
+```typescript
+LOADING_EMOJIS = {
+  meditation: '🧘',
+  fitness: '💪',
+  workout: '🏋️',
+  running: '🏃',
+  cycling: '🚴',
+  yoga: '🧘‍♀️',
+  health: '🏥',
+  nutrition: '🥗',
+  productivity: '⏳',
+  education: '📚',
+  reading: '📖',
+  music: '🎵',
+  art: '🎨',
+  travel: '✈️',
+  finance: '💰',
+  shopping: '🛍️',
+  cooking: '👨‍🍳',
+  gaming: '🎮',
+  default: '⌛',
+}
+```
+
+---
+
+## Settings Screen Example
+
+```typescript
+import { LoadingState, useLoading } from '@domains/loading';
+
+const SettingsScreen = () => {
+  const { theme } = useTheme();
+  const { language, setLanguage } = useLocalization();
+  const { isLoading, withLoading } = useLoading();
+
+  const handleLanguageChange = (newLanguage: string) => withLoading(
+    setLanguage(newLanguage),
+    'Changing language...'
+  );
+
+  if (isLoading) {
+    return <LoadingState fullScreen message="Applying changes..." />;
+  }
+
+  return (
+    <ScreenLayout>
+      <ScreenHeader title="Settings" />
+      <ScrollView>
+        {/* Settings content */}
+      </ScrollView>
+    </ScreenLayout>
+  );
+};
+```
+
+---
+
+## Onboarding Screen Example
+
+```typescript
+import { LoadingState, useLoading } from '@domains/loading';
+
+const OnboardingScreen = () => {
+  const { completeOnboarding } = useOnboarding();
+  const { isLoading, withLoading } = useLoading();
+
+  const handleComplete = () => withLoading(
+    completeOnboarding(),
+    'Setting up your account...'
+  );
+
+  return (
+    <ScreenLayout>
+      {isLoading ? (
+        <LoadingState fullScreen message="Almost there..." />
+      ) : (
+        <OnboardingContent onComplete={handleComplete} />
+      )}
+    </ScreenLayout>
+  );
+};
+```
+
+---
+
+## Best Practices
+
+1. **Use skeleton loaders for lists** - Better UX than full-screen loading
+2. **Match emoji to app theme** - Use LOADING_EMOJIS for consistency
+3. **Show meaningful messages** - "Loading workouts..." not "Please wait..."
+4. **Use full screen sparingly** - Only for critical app-wide operations
+5. **Prefer useLoading hook** - Centralized state management
+6. **Use withLoading wrapper** - Cleaner async code
+7. **Test loading states** - Ensure they work on slow connections
+
+---
+
+## Migration from Old Loading Patterns
+
+### Before (ActivityIndicator)
+
+```typescript
+// ❌ OLD - Inconsistent
+{isLoading && <ActivityIndicator />}
+{isLoading && <Text>Loading...</Text>}
+```
+
+### After (LoadingState)
+
+```typescript
+// ✅ NEW - Consistent, themed
+{isLoading && <LoadingState message="Loading..." />}
+```
+
+### Before (Custom Spinner)
+
+```typescript
+// ❌ OLD - Duplicated code
+<View style={styles.loadingContainer}>
+  <ActivityIndicator size="large" />
+  <Text style={styles.loadingText}>Please wait...</Text>
+</View>
+```
+
+### After (LoadingState)
+
+```typescript
+// ✅ NEW - One line, consistent
+<LoadingState size="large" message="Please wait..." />
+```
+
+---
+
+This loading domain ensures **consistent, beautiful, calming loading experiences** across all 100+ generated apps! 🧘