@umituz/react-native-design-system 4.24.0 → 4.25.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "4.24.0",
+  "version": "4.25.0",
   "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive, safe area, exception, infinite scroll, UUID, image, timezone, offline, onboarding, and loading utilities",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/carousel/BannerCarousel.tsx

@@ -0,0 +1,147 @@
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { useAppDesignTokens } from "../theme";
+import { AtomicText } from "../atoms/AtomicText";
+import { AtomicIcon } from "../atoms/icon/AtomicIcon";
+import { Carousel } from "./Carousel";
+import type { CarouselItem as CarouselItemType } from "./types";
+
+export interface BannerItem {
+  id: string;
+  title: string;
+  subtitle: string;
+  backgroundColor: string;
+  action: () => void;
+}
+
+interface BannerCarouselProps {
+  items: BannerItem[];
+}
+
+export const BannerCarousel: React.FC<BannerCarouselProps> = ({ items }) => {
+  const tokens = useAppDesignTokens();
+
+  const renderBannerItem = (
+    item: CarouselItemType<BannerItem>,
+    _index: number,
+  ) => {
+    const bannerData = item.data;
+    const spacing = tokens.spacing;
+
+    return (
+      <View
+        style={[
+          styles.banner,
+          {
+            backgroundColor: bannerData.backgroundColor,
+            padding: spacing.xl,
+            minHeight: 240,
+            borderRadius: 28,
+          },
+        ]}
+      >
+        <View style={styles.bannerContent}>
+          <View
+            style={[styles.bannerTextContainer, { marginRight: spacing.lg }]}
+          >
+            <AtomicText
+              type="headlineLarge"
+              style={[
+                styles.bannerTitle,
+                {
+                  color: tokens.colors.textInverse,
+                  marginBottom: spacing.sm,
+                  fontSize: 32,
+                  lineHeight: 40,
+                  letterSpacing: -0.5,
+                },
+              ]}
+            >
+              {bannerData.title}
+            </AtomicText>
+            <AtomicText
+              type="bodyLarge"
+              style={[
+                styles.bannerSubtitle,
+                {
+                  color: tokens.colors.textInverse,
+                  opacity: 0.95,
+                  fontSize: 16,
+                  lineHeight: 24,
+                },
+              ]}
+            >
+              {bannerData.subtitle}
+            </AtomicText>
+          </View>
+          <View style={styles.bannerIconContainer}>
+            <View
+              style={[
+                styles.bannerIconCircle,
+                {
+                  width: 56,
+                  height: 56,
+                  borderRadius: 28,
+                  backgroundColor: "rgba(255, 255, 255, 0.3)",
+                  borderWidth: 1,
+                  borderColor: "rgba(255, 255, 255, 0.4)",
+                },
+              ]}
+            >
+              <AtomicIcon
+                name="arrow-forward-outline"
+                size="xl"
+                color="onSurface"
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+    );
+  };
+
+  const carouselItems: CarouselItemType<BannerItem>[] = items.map((item) => ({
+    id: item.id,
+    data: item,
+    onPress: item.action,
+  }));
+
+  return (
+    <Carousel
+      items={carouselItems}
+      renderItem={renderBannerItem}
+      spacing={16}
+      showDots={true}
+      pagingEnabled={true}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  banner: {
+    justifyContent: "center",
+    overflow: "hidden",
+  },
+  bannerContent: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+  },
+  bannerTextContainer: {
+    flex: 1,
+  },
+  bannerTitle: {
+    fontWeight: "800",
+  },
+  bannerSubtitle: {
+    fontWeight: "500",
+  },
+  bannerIconContainer: {
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  bannerIconCircle: {
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});

package/src/carousel/Carousel.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+import { View, StyleSheet, ViewStyle } from "react-native";
+import { useAppDesignTokens } from "../theme";
+import { CarouselScrollView } from "./CarouselScrollView";
+import { CarouselDots } from "./CarouselDots";
+import { CarouselItem } from "./CarouselItem";
+import { useCarouselScroll } from "./useCarouselScroll";
+import { calculateItemWidth } from "./carouselCalculations";
+import type { CarouselProps, CarouselItem as CarouselItemType } from "./types";
+
+export const Carousel = <T,>({
+  items,
+  renderItem,
+  itemWidth,
+  spacing = 16,
+  onIndexChange,
+  showDots = true,
+  pagingEnabled = true,
+  style,
+}: CarouselProps<T> & { style?: ViewStyle }) => {
+  const tokens = useAppDesignTokens();
+  const calculatedItemWidth = itemWidth || calculateItemWidth(spacing);
+
+  const pageWidth = calculatedItemWidth + spacing;
+
+  const { currentIndex, handleScroll } = useCarouselScroll({
+    itemWidth: pageWidth,
+    onIndexChange,
+  });
+
+  if (items.length === 0) {
+    return null;
+  }
+
+  return (
+    <View style={[styles.container, style]}>
+      <CarouselScrollView
+        onScroll={handleScroll}
+        pagingEnabled={pagingEnabled}
+        spacing={spacing}
+        itemWidth={calculatedItemWidth}
+      >
+        {items.map((item, index) => (
+          <CarouselItem
+            key={item.id}
+            item={item}
+            itemWidth={calculatedItemWidth}
+            renderContent={(itemData) => renderItem(itemData, index)}
+            style={
+              index < items.length - 1 ? { marginRight: spacing } : undefined
+            }
+          />
+        ))}
+      </CarouselScrollView>
+
+      {showDots && items.length > 1 && (
+        <CarouselDots
+          count={items.length}
+          currentIndex={currentIndex}
+          activeColor={tokens.colors.primary}
+          inactiveColor={tokens.colors.border}
+        />
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginTop: 8,
+    marginBottom: 8,
+  },
+});

package/src/carousel/CarouselDots.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { useAppDesignTokens } from "../theme";
+import type { CarouselDotsProps } from "./types";
+
+export const CarouselDots: React.FC<CarouselDotsProps> = ({
+  count,
+  currentIndex,
+  activeColor,
+  inactiveColor,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  if (count <= 1) {
+    return null;
+  }
+
+  const activeDotColor = activeColor || tokens.colors.primary;
+  const inactiveDotColor = inactiveColor || tokens.colors.border;
+
+  return (
+    <View style={styles.container}>
+      {Array.from({ length: count }).map((_, index) => (
+        <View
+          key={index}
+          style={[
+            styles.dot,
+            {
+              backgroundColor:
+                index === currentIndex ? activeDotColor : inactiveDotColor,
+            },
+          ]}
+        />
+      ))}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+    marginTop: 12,
+    gap: 8,
+  },
+  dot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+  },
+});

package/src/carousel/CarouselItem.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { TouchableOpacity, StyleSheet, ViewStyle } from "react-native";
+import type { CarouselItem as CarouselItemType } from "./types";
+
+interface CarouselItemProps<T = unknown> {
+  item: CarouselItemType<T>;
+  itemWidth: number;
+  renderContent: (item: CarouselItemType<T>) => React.ReactNode;
+  style?: ViewStyle;
+  activeOpacity?: number;
+}
+
+export const CarouselItem = <T,>({
+  item,
+  itemWidth,
+  renderContent,
+  style,
+  activeOpacity = 0.9,
+}: CarouselItemProps<T>) => {
+  return (
+    <TouchableOpacity
+      activeOpacity={activeOpacity}
+      onPress={item.onPress}
+      style={[styles.container, { width: itemWidth }, style]}
+    >
+      {renderContent(item)}
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    // Container styles handled by width prop
+  },
+});

package/src/carousel/CarouselScrollView.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import {
+  ScrollView,
+  StyleSheet,
+  ViewStyle,
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+} from "react-native";
+
+interface CarouselScrollViewProps {
+  itemWidth: number;
+  onScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+  children: React.ReactNode;
+  pagingEnabled?: boolean;
+  style?: ViewStyle;
+  contentContainerStyle?: ViewStyle;
+  spacing?: number;
+}
+
+export const CarouselScrollView: React.FC<CarouselScrollViewProps> = ({
+  onScroll,
+  children,
+  pagingEnabled = true,
+  style,
+  contentContainerStyle,
+  spacing = 0,
+}) => {
+  return (
+    <ScrollView
+      horizontal
+      pagingEnabled={pagingEnabled}
+      showsHorizontalScrollIndicator={false}
+      onScroll={onScroll}
+      scrollEventThrottle={16}
+      style={[styles.scrollView, style]}
+      contentContainerStyle={[
+        styles.scrollContent,
+        pagingEnabled
+          ? { paddingHorizontal: spacing }
+          : { paddingLeft: spacing, paddingRight: spacing },
+        contentContainerStyle,
+      ]}
+    >
+      {children}
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  scrollView: {
+    marginHorizontal: 0,
+  },
+  scrollContent: {
+    paddingHorizontal: 0,
+  },
+});

package/src/carousel/carouselCalculations.ts

@@ -0,0 +1,18 @@
+import { Dimensions } from "react-native";
+
+const { width: SCREEN_WIDTH } = Dimensions.get("window");
+
+export const calculateItemWidth = (padding: number = 16): number => {
+  return SCREEN_WIDTH - padding * 2;
+};
+
+export const calculateIndexFromScroll = (
+  scrollPosition: number,
+  itemWidth: number,
+): number => {
+  return Math.round(scrollPosition / itemWidth);
+};
+
+export const getScreenWidth = (): number => {
+  return SCREEN_WIDTH;
+};

package/src/carousel/index.ts

@@ -0,0 +1,21 @@
+export type {
+  CarouselItem,
+  CarouselProps,
+  CarouselScrollProps,
+  CarouselDotsProps,
+} from "./types";
+
+export { useCarouselScroll } from "./useCarouselScroll";
+
+export {
+  calculateItemWidth,
+  calculateIndexFromScroll,
+  getScreenWidth,
+} from "./carouselCalculations";
+
+export { CarouselDots } from "./CarouselDots";
+export { CarouselItem as CarouselItemComponent } from "./CarouselItem";
+export { CarouselScrollView } from "./CarouselScrollView";
+export { Carousel } from "./Carousel";
+export { BannerCarousel } from "./BannerCarousel";
+export type { BannerItem } from "./BannerCarousel";

package/src/carousel/types.ts

@@ -0,0 +1,31 @@
+import type { NativeSyntheticEvent, NativeScrollEvent } from "react-native";
+
+export interface CarouselItem<T = unknown> {
+  id: string;
+  data: T;
+  onPress?: () => void;
+}
+
+export interface CarouselProps<T = unknown> {
+  items: CarouselItem<T>[];
+  renderItem: (item: CarouselItem<T>, index: number) => React.ReactNode;
+  itemWidth?: number;
+  spacing?: number;
+  onIndexChange?: (index: number) => void;
+  showDots?: boolean;
+  pagingEnabled?: boolean;
+}
+
+export interface CarouselScrollProps {
+  itemWidth: number;
+  onScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+  children: React.ReactNode;
+  pagingEnabled?: boolean;
+}
+
+export interface CarouselDotsProps {
+  count: number;
+  currentIndex: number;
+  activeColor?: string;
+  inactiveColor?: string;
+}

package/src/carousel/useCarouselScroll.ts

@@ -0,0 +1,33 @@
+import { useState, useCallback } from "react";
+import { NativeScrollEvent, NativeSyntheticEvent } from "react-native";
+import { calculateIndexFromScroll } from "./carouselCalculations";
+
+interface UseCarouselScrollOptions {
+  itemWidth: number;
+  onIndexChange?: (index: number) => void;
+}
+
+export const useCarouselScroll = ({
+  itemWidth,
+  onIndexChange,
+}: UseCarouselScrollOptions) => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  const handleScroll = useCallback(
+    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      const scrollPosition = event.nativeEvent.contentOffset.x;
+      const newIndex = calculateIndexFromScroll(scrollPosition, itemWidth);
+
+      if (newIndex !== currentIndex) {
+        setCurrentIndex(newIndex);
+        onIndexChange?.(newIndex);
+      }
+    },
+    [itemWidth, currentIndex, onIndexChange],
+  );
+
+  return {
+    currentIndex,
+    handleScroll,
+  };
+};

package/src/index.ts

@@ -152,3 +152,8 @@ export * from "./init";
 // GALLERY EXPORTS
 // =============================================================================
 export * from "./gallery";
+
+// =============================================================================
+// CAROUSEL EXPORTS
+// =============================================================================
+export * from "./carousel";