@umituz/react-native-onboarding 1.0.0 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-onboarding",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Generic onboarding flow for React Native apps with gradient backgrounds, animations, and customizable slides. SOLID, DRY, KISS principles applied.",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -33,7 +33,8 @@
   "peerDependencies": {
     "@umituz/react-native-storage": "latest",
     "@umituz/react-native-localization": "latest",
-    "@umituz/react-native-theme": "latest",
+    "@umituz/react-native-design-system-theme": "latest",
+    "@umituz/react-native-design-system": "latest",
     "expo-linear-gradient": "^15.0.0",
     "react": ">=18.2.0",
     "react-native": ">=0.74.0",
@@ -44,7 +45,7 @@
     "@types/react-native": "^0.73.0",
     "@umituz/react-native-storage": "^1.1.0",
     "@umituz/react-native-localization": "latest",
-    "@umituz/react-native-theme": "latest",
+    "@umituz/react-native-design-system-theme": "latest",
     "expo-linear-gradient": "^15.0.7",
     "react": "^18.2.0",
     "react-native": "^0.74.0",

package/src/index.ts

@@ -51,7 +51,14 @@ export {
 // =============================================================================
 
 export { OnboardingScreen, type OnboardingScreenProps } from "./presentation/screens/OnboardingScreen";
-export { OnboardingSlide, type OnboardingSlideProps } from "./presentation/components/OnboardingSlide";
 export { OnboardingHeader, type OnboardingHeaderProps } from "./presentation/components/OnboardingHeader";
 export { OnboardingFooter, type OnboardingFooterProps } from "./presentation/components/OnboardingFooter";
 
+// Export OnboardingSlide component
+// Note: We export it with the same name as the type, which TypeScript allows
+// because one is a type (from domain) and one is a value (component)
+// Users can import both: 
+//   import type { OnboardingSlide } from '@umituz/react-native-onboarding'; // type
+//   import { OnboardingSlide } from '@umituz/react-native-onboarding'; // component
+export { OnboardingSlide, type OnboardingSlideProps } from "./presentation/components/OnboardingSlide";
+

package/src/infrastructure/hooks/useOnboardingNavigation.ts

@@ -11,6 +11,8 @@ export interface UseOnboardingNavigationReturn {
   currentIndex: number;
   goToNext: () => void;
   goToPrevious: () => void;
+  complete: () => Promise<void>;
+  skip: () => Promise<void>;
   isLastSlide: boolean;
   isFirstSlide: boolean;
 }

package/src/presentation/components/OnboardingFooter.tsx

@@ -8,7 +8,7 @@ import React, { useMemo } from "react";
 import { View, TouchableOpacity, Text, StyleSheet } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useLocalization } from "@umituz/react-native-localization";
-import { useAppDesignTokens } from "@umituz/react-native-theme";
+import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
 
 export interface OnboardingFooterProps {
   currentIndex: number;

package/src/presentation/components/OnboardingSlide.tsx

@@ -6,6 +6,7 @@
 
 import React, { useMemo } from "react";
 import { View, Text, StyleSheet, ScrollView } from "react-native";
+import { AtomicIcon } from "@umituz/react-native-design-system";
 import type { OnboardingSlide as OnboardingSlideType } from "../../domain/entities/OnboardingSlide";
 
 export interface OnboardingSlideProps {
@@ -15,6 +16,9 @@ export interface OnboardingSlideProps {
 export const OnboardingSlide: React.FC<OnboardingSlideProps> = ({ slide }) => {
   const styles = useMemo(() => getStyles(), []);
 
+  // Check if icon is an emoji (contains emoji characters) or Lucide icon name
+  const isEmoji = /[\u{1F300}-\u{1F9FF}]|[\u{2600}-\u{26FF}]|[\u{2700}-\u{27BF}]/u.test(slide.icon);
+
   return (
     <ScrollView
       contentContainerStyle={styles.content}
@@ -23,7 +27,15 @@ export const OnboardingSlide: React.FC<OnboardingSlideProps> = ({ slide }) => {
     >
       <View style={styles.slideContent}>
         <View style={styles.iconContainer}>
-          <Text style={styles.icon}>{slide.icon}</Text>
+          {isEmoji ? (
+            <Text style={styles.icon}>{slide.icon}</Text>
+          ) : (
+            <AtomicIcon
+              name={slide.icon as any}
+              customSize={60}
+              customColor="#FFFFFF"
+            />
+          )}
         </View>
         <Text style={styles.title}>{slide.title}</Text>
         <Text style={styles.description}>{slide.description}</Text>

package/LICENSE

@@ -1,22 +0,0 @@
-MIT License
-
-Copyright (c) 2025 Ümit UZ
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
-

package/README.md

@@ -1,175 +0,0 @@
-# @umituz/react-native-onboarding
-
-Generic onboarding flow for React Native apps with gradient backgrounds, animations, and customizable slides. Follows SOLID, DRY, KISS principles - fully reusable across hundreds of apps.
-
-## Features
-
-- ✅ **Generic & Reusable**: Works with any app, fully customizable via props
-- ✅ **Gradient Backgrounds**: Beautiful gradient backgrounds for each slide
-- ✅ **Animations**: Smooth transitions and animations
-- ✅ **SOLID Principles**: Clean architecture, easy to extend
-- ✅ **DRY**: No code duplication, generic components
-- ✅ **KISS**: Simple API, easy to understand and use
-- ✅ **Type-Safe**: Full TypeScript support
-- ✅ **Customizable**: Icons, messages, gradients, buttons - all configurable
-- ✅ **Storage Integration**: Uses @umituz/react-native-storage for persistence
-
-## Installation
-
-```bash
-npm install @umituz/react-native-onboarding
-```
-
-## Usage
-
-### Basic Example
-
-```typescript
-import { OnboardingScreen } from '@umituz/react-native-onboarding';
-
-const slides = [
-  {
-    id: '1',
-    title: 'Welcome',
-    description: 'Welcome to the app',
-    icon: '🎉',
-    gradient: ['#3B82F6', '#8B5CF6'],
-  },
-  {
-    id: '2',
-    title: 'Features',
-    description: 'Discover amazing features',
-    icon: '✨',
-    gradient: ['#60A5FA', '#A78BFA'],
-  },
-];
-
-<OnboardingScreen
-  slides={slides}
-  onComplete={() => {
-    // Navigate to main app
-  }}
-/>
-```
-
-### Advanced Example with Customization
-
-```typescript
-import { OnboardingScreen } from '@umituz/react-native-onboarding';
-
-<OnboardingScreen
-  slides={slides}
-  onComplete={handleComplete}
-  onSkip={handleSkip}
-  skipButtonText="Skip"
-  nextButtonText="Next"
-  getStartedButtonText="Get Started"
-  showSkipButton={true}
-  showBackButton={true}
-  showProgressBar={true}
-  showDots={true}
-  showProgressText={true}
-  storageKey="@myapp_onboarding_completed"
-  autoComplete={false}
-/>
-```
-
-### With Features List
-
-```typescript
-const slides = [
-  {
-    id: '1',
-    title: 'Powerful Features',
-    description: 'Everything you need in one place',
-    icon: '🚀',
-    gradient: ['#3B82F6', '#8B5CF6'],
-    features: [
-      'Feature 1: Amazing capability',
-      'Feature 2: Another great feature',
-      'Feature 3: One more awesome thing',
-    ],
-  },
-];
-```
-
-### Custom Components
-
-```typescript
-<OnboardingScreen
-  slides={slides}
-  renderHeader={({ isFirstSlide, onBack, onSkip }) => (
-    <CustomHeader onBack={onBack} onSkip={onSkip} />
-  )}
-  renderFooter={({ currentIndex, totalSlides, isLastSlide, onNext }) => (
-    <CustomFooter onNext={onNext} />
-  )}
-  renderSlide={(slide) => <CustomSlide slide={slide} />}
-/>
-```
-
-## API Reference
-
-### `OnboardingSlide`
-
-```typescript
-interface OnboardingSlide {
-  id: string;
-  title: string;
-  description: string;
-  icon: string; // Emoji or icon name
-  gradient: string[]; // [startColor, endColor] or [color1, color2, color3]
-  image?: string; // Optional image URL
-  features?: string[]; // Optional features list
-}
-```
-
-### `OnboardingOptions`
-
-```typescript
-interface OnboardingOptions {
-  slides: OnboardingSlide[];
-  onComplete?: () => void | Promise<void>;
-  onSkip?: () => void | Promise<void>;
-  skipButtonText?: string;
-  nextButtonText?: string;
-  getStartedButtonText?: string;
-  showSkipButton?: boolean;
-  showBackButton?: boolean;
-  showProgressBar?: boolean;
-  showDots?: boolean;
-  showProgressText?: boolean;
-  storageKey?: string;
-  autoComplete?: boolean;
-}
-```
-
-### `useOnboardingStore`
-
-Hook for managing onboarding completion state.
-
-```typescript
-const { isOnboardingComplete, complete, skip, reset } = useOnboardingStore();
-```
-
-### `useOnboardingNavigation`
-
-Hook for managing navigation state.
-
-```typescript
-const { currentIndex, goToNext, goToPrevious, isLastSlide, isFirstSlide } =
-  useOnboardingNavigation(totalSlides, onComplete, onSkip);
-```
-
-## Architecture
-
-- **Domain Layer**: Entities and interfaces (business logic)
-- **Infrastructure Layer**: Storage and hooks (state management)
-- **Presentation Layer**: Components and screens (UI)
-
-No app-specific code, fully generic and reusable.
-
-## License
-
-MIT
-