@umituz/react-native-design-system 2.6.65 → 2.6.67

package/src/atoms/picker/styles/pickerStyles.ts

@@ -7,217 +7,111 @@ import type { DesignTokens } from '../../../theme';
 export type PickerSize = 'sm' | 'md' | 'lg';
 
 export interface PickerContainerStyles {
-    base: ViewStyle;
-    size: Record<PickerSize, ViewStyle>;
-    state: {
-        error: ViewStyle;
-        disabled: ViewStyle;
-    };
+  base: ViewStyle;
+  size: Record<PickerSize, ViewStyle>;
+  state: {
+    error: ViewStyle;
+    disabled: ViewStyle;
+  };
 }
 
 export interface PickerLabelStyles {
-    base: TextStyle;
-    size: Record<PickerSize, TextStyle>;
+  base: TextStyle;
+  size: Record<PickerSize, TextStyle>;
 }
 
 export interface PickerValueStyles {
-    base: TextStyle;
-    size: Record<PickerSize, TextStyle>;
+  base: TextStyle;
+  size: Record<PickerSize, TextStyle>;
 }
 
 export interface PickerPlaceholderStyles {
-    base: TextStyle;
-    size: Record<PickerSize, TextStyle>;
+  base: TextStyle;
+  size: Record<PickerSize, TextStyle>;
 }
 
 export const getPickerContainerStyles = (tokens: DesignTokens): PickerContainerStyles => ({
-    base: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        borderWidth: 1,
-        borderColor: tokens.colors.outline,
-        backgroundColor: tokens.colors.surface,
-        borderRadius: tokens.borders.radius.md,
+  base: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    borderWidth: 1,
+    borderColor: tokens.colors.outline,
+    backgroundColor: tokens.colors.surface,
+    borderRadius: tokens.borders.radius.md,
+  },
+  size: {
+    sm: {
+      paddingHorizontal: tokens.spacing.sm,
+      paddingVertical: tokens.spacing.xs,
+      minHeight: 36 * tokens.spacingMultiplier,
     },
-    size: {
-        sm: {
-            paddingHorizontal: tokens.spacing.sm,
-            paddingVertical: tokens.spacing.xs,
-            minHeight: 36 * tokens.spacingMultiplier,
-        },
-        md: {
-            paddingHorizontal: tokens.spacing.md,
-            paddingVertical: tokens.spacing.sm,
-            minHeight: 48 * tokens.spacingMultiplier,
-        },
-        lg: {
-            paddingHorizontal: tokens.spacing.lg,
-            paddingVertical: tokens.spacing.md,
-            minHeight: 56 * tokens.spacingMultiplier,
-        },
+    md: {
+      paddingHorizontal: tokens.spacing.md,
+      paddingVertical: tokens.spacing.sm,
+      minHeight: 48 * tokens.spacingMultiplier,
     },
-    state: {
-        error: {
-            borderColor: tokens.colors.error,
-        },
-        disabled: {
-            opacity: tokens.opacity.disabled,
-        },
+    lg: {
+      paddingHorizontal: tokens.spacing.lg,
+      paddingVertical: tokens.spacing.md,
+      minHeight: 56 * tokens.spacingMultiplier,
     },
-});
-
-export const getPickerLabelStyles = (tokens: DesignTokens): PickerLabelStyles => ({
-    base: {
-        color: tokens.colors.textPrimary,
-        marginBottom: tokens.spacing.xs,
+  },
+  state: {
+    error: {
+      borderColor: tokens.colors.error,
     },
-    size: {
-        sm: { fontSize: tokens.typography.bodySmall.responsiveFontSize },
-        md: { fontSize: tokens.typography.bodyMedium.responsiveFontSize },
-        lg: { fontSize: tokens.typography.bodyLarge.responsiveFontSize },
+    disabled: {
+      opacity: tokens.opacity.disabled,
     },
+  },
 });
 
-export const getPickerValueStyles = (tokens: DesignTokens): PickerValueStyles => ({
-    base: {
-        color: tokens.colors.textPrimary,
-        flex: 1,
-    },
-    size: {
-        sm: { fontSize: tokens.typography.bodySmall.responsiveFontSize },
-        md: { fontSize: tokens.typography.bodyMedium.responsiveFontSize },
-        lg: { fontSize: tokens.typography.bodyLarge.responsiveFontSize },
-    },
-});
-
-export const getPickerPlaceholderStyles = (tokens: DesignTokens): PickerPlaceholderStyles => ({
-    base: {
-        color: tokens.colors.textTertiary,
-        flex: 1,
-    },
-    size: {
-        sm: { fontSize: tokens.typography.bodySmall.responsiveFontSize },
-        md: { fontSize: tokens.typography.bodyMedium.responsiveFontSize },
-        lg: { fontSize: tokens.typography.bodyLarge.responsiveFontSize },
-    },
-});
-
-export const getPickerErrorStyles = (tokens: DesignTokens): TextStyle => ({
-    color: tokens.colors.error,
-    fontSize: tokens.typography.bodySmall.responsiveFontSize,
-    marginTop: tokens.spacing.xs,
-});
-
-// Modal styles
-export const getModalOverlayStyles = (): ViewStyle => ({
-    flex: 1,
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    justifyContent: 'flex-end',
-});
-
-export const getModalContainerStyles = (tokens: DesignTokens, bottomInset: number): ViewStyle => ({
-    backgroundColor: tokens.colors.surface,
-    borderTopLeftRadius: tokens.borders.radius.lg,
-    borderTopRightRadius: tokens.borders.radius.lg,
-    maxHeight: '80%',
-    paddingBottom: bottomInset,
-});
-
-export const getModalHeaderStyles = (tokens: DesignTokens): ViewStyle => ({
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    paddingHorizontal: tokens.spacing.md,
-    paddingVertical: tokens.spacing.md,
-    borderBottomWidth: 1,
-    borderBottomColor: tokens.colors.outline,
-});
-
-export const getModalTitleStyles = (tokens: DesignTokens): TextStyle => ({
-    fontSize: tokens.typography.titleLarge.responsiveFontSize,
-    fontWeight: '600',
-    color: tokens.colors.onSurface,
-});
-
-export const getSearchContainerStyles = (tokens: DesignTokens): ViewStyle => ({
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: tokens.colors.surfaceVariant,
-    borderRadius: tokens.borders.radius.md,
-    marginHorizontal: tokens.spacing.md,
-    marginVertical: tokens.spacing.sm,
-    paddingHorizontal: tokens.spacing.md,
-    paddingVertical: tokens.spacing.sm,
-    gap: tokens.spacing.sm,
+export const getPickerLabelStyles = (tokens: DesignTokens): PickerLabelStyles => ({
+  base: {
+    color: tokens.colors.textPrimary,
+    marginBottom: tokens.spacing.xs,
+  },
+  size: {
+    sm: { fontSize: tokens.typography.bodySmall.responsiveFontSize },
+    md: { fontSize: tokens.typography.bodyMedium.responsiveFontSize },
+    lg: { fontSize: tokens.typography.bodyLarge.responsiveFontSize },
+  },
 });
 
-export const getSearchInputStyles = (tokens: DesignTokens): TextStyle => ({
+export const getPickerValueStyles = (tokens: DesignTokens): PickerValueStyles => ({
+  base: {
+    color: tokens.colors.textPrimary,
     flex: 1,
-    fontSize: tokens.typography.bodyMedium.responsiveFontSize,
-    color: tokens.colors.onSurface,
-    paddingVertical: 0,
-});
-
-export const getOptionContainerStyles = (
-    tokens: DesignTokens,
-    selected: boolean,
-    disabled: boolean
-): ViewStyle => ({
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: tokens.spacing.md,
-    paddingVertical: tokens.spacing.md,
-    gap: tokens.spacing.md,
-    backgroundColor: selected ? tokens.colors.surfaceVariant : 'transparent',
-    opacity: disabled ? tokens.opacity.disabled : 1,
+  },
+  size: {
+    sm: { fontSize: tokens.typography.bodySmall.responsiveFontSize },
+    md: { fontSize: tokens.typography.bodyMedium.responsiveFontSize },
+    lg: { fontSize: tokens.typography.bodyLarge.responsiveFontSize },
+  },
 });
 
-export const getOptionTextStyles = (tokens: DesignTokens, selected: boolean): TextStyle => ({
-    fontSize: tokens.typography.bodyLarge.responsiveFontSize,
-    color: selected ? tokens.colors.primary : tokens.colors.onSurface,
-    fontWeight: selected ? '600' : '400',
-});
-
-export const getOptionDescriptionStyles = (tokens: DesignTokens): TextStyle => ({
-    fontSize: tokens.typography.bodySmall.responsiveFontSize,
-    color: tokens.colors.textSecondary,
-    marginTop: tokens.spacing.xs,
-});
-
-export const getEmptyStateStyles = (tokens: DesignTokens): ViewStyle => ({
+export const getPickerPlaceholderStyles = (tokens: DesignTokens): PickerPlaceholderStyles => ({
+  base: {
+    color: tokens.colors.textTertiary,
     flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingVertical: tokens.spacing.xl,
-    gap: tokens.spacing.md,
-});
-
-export const getEmptyStateTextStyles = (tokens: DesignTokens): TextStyle => ({
-    fontSize: tokens.typography.bodyMedium.responsiveFontSize,
-    color: tokens.colors.textSecondary,
-    textAlign: 'center',
+  },
+  size: {
+    sm: { fontSize: tokens.typography.bodySmall.responsiveFontSize },
+    md: { fontSize: tokens.typography.bodyMedium.responsiveFontSize },
+    lg: { fontSize: tokens.typography.bodyLarge.responsiveFontSize },
+  },
 });
 
-// Chip styles
-export const getChipContainerStyles = (tokens: DesignTokens): ViewStyle => ({
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    gap: tokens.spacing.xs,
-    marginTop: tokens.spacing.sm,
+export const getPickerErrorStyles = (tokens: DesignTokens): TextStyle => ({
+  color: tokens.colors.error,
+  fontSize: tokens.typography.bodySmall.responsiveFontSize,
+  marginTop: tokens.spacing.xs,
 });
 
-export const getChipStyles = (tokens: DesignTokens): ViewStyle => ({
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: tokens.colors.surfaceVariant,
-    borderRadius: tokens.borders.radius.full,
-    paddingHorizontal: tokens.spacing.sm,
-    paddingVertical: tokens.spacing.xs,
-    gap: tokens.spacing.xs,
-});
+// Re-export modal, search, option, and chip styles
+export * from './pickerModalStyles';
+export * from './pickerSearchStyles';
+export * from './pickerOptionStyles';
+export * from './pickerStateStyles';
 
-export const getChipTextStyles = (tokens: DesignTokens): TextStyle => ({
-    fontSize: tokens.typography.bodySmall.responsiveFontSize,
-    color: tokens.colors.onSurface,
-});

package/src/molecules/calendar/presentation/components/AtomicCalendar.tsx

@@ -31,10 +31,13 @@
  */
 
 import React from 'react';
-import { View, TouchableOpacity, StyleSheet, StyleProp, ViewStyle } from 'react-native';
-import { useAppDesignTokens, AtomicText } from '../../../../index';
+import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
+import { useAppDesignTokens } from '../../../../index';
 import type { CalendarDay } from '../../domain/entities/CalendarDay.entity';
 import { CalendarService } from '../../infrastructure/services/CalendarService';
+import { calendarStyles } from './calendarStyles';
+import { CalendarWeekdayHeader } from './CalendarWeekdayHeader';
+import { CalendarDayCell } from './CalendarDayCell';
 
 /**
  * AtomicCalendar Props
@@ -104,176 +107,32 @@ export const AtomicCalendar: React.FC<AtomicCalendarProps> = ({
   testID,
 }) => {
   const tokens = useAppDesignTokens();
-
-  // Get weekday names (localized)
   const weekdayNames = CalendarService.getWeekdayNames();
 
   return (
-    <View style={[styles.container, { backgroundColor: tokens.colors.surface }, style]} testID={testID}>
-      {/* Weekday Headers */}
-      {showWeekdayHeaders && (
-        <View style={styles.weekdayHeader}>
-          {weekdayNames.map((day, index) => (
-            <View key={index} style={styles.weekdayCell}>
-              <AtomicText
-                type="bodySmall"
-                color="secondary"
-                style={styles.weekdayText}
-              >
-                {day}
-              </AtomicText>
-            </View>
-          ))}
-        </View>
-      )}
+    <View style={[calendarStyles.container, { backgroundColor: tokens.colors.surface }, style]} testID={testID}>
+      {showWeekdayHeaders && <CalendarWeekdayHeader weekdayNames={weekdayNames} />}
 
-      {/* Calendar Grid */}
-      <View style={styles.grid}>
+      <View style={calendarStyles.grid}>
         {days.map((day, index) => {
           const isSelected = CalendarService.isSameDay(day.date, selectedDate);
-          const eventCount = day.events.length;
-          const visibleEvents = day.events.slice(0, maxEventIndicators);
-          const hiddenEventCount = Math.max(0, eventCount - maxEventIndicators);
 
           return (
-            <TouchableOpacity
+            <CalendarDayCell
               key={index}
-              style={[
-                styles.dayCell,
-                {
-                  backgroundColor: isSelected
-                    ? tokens.colors.primary
-                    : 'transparent',
-                  borderColor: isSelected
-                    ? tokens.colors.primary
-                    : day.isToday
-                      ? tokens.colors.primary
-                      : tokens.colors.border,
-                  borderWidth: isSelected ? 2 : day.isToday ? 2 : 1,
-                  opacity: day.isDisabled ? 0.4 : 1,
-                },
-                dayStyle,
-              ]}
-              onPress={() => !day.isDisabled && onDateSelect(day.date)}
-              disabled={day.isDisabled}
-              testID={testID ? `${testID}-day-${index}` : undefined}
-              accessibilityLabel={`${day.date.toLocaleDateString()}, ${eventCount} events`}
-              accessibilityRole="button"
-              accessibilityState={{ disabled: day.isDisabled, selected: isSelected }}
-            >
-              {/* Day Number */}
-              <AtomicText
-                type="bodyMedium"
-                color={
-                  isSelected
-                    ? 'inverse'
-                    : day.isCurrentMonth
-                      ? 'primary'
-                      : 'secondary'
-                }
-                style={[
-                  styles.dayText,
-                  day.isToday && !isSelected && { fontWeight: 'bold' },
-                ]}
-              >
-                {day.date.getDate()}
-              </AtomicText>
-
-              {/* Event Indicators */}
-              <View style={styles.eventIndicators}>
-                {/* Today indicator (if today and has no events) */}
-                {day.isToday && eventCount === 0 && (
-                  <View
-                    style={[
-                      styles.eventDot,
-                      { backgroundColor: tokens.colors.success },
-                    ]}
-                  />
-                )}
-
-                {/* Event dots */}
-                {visibleEvents.map((event, eventIndex) => (
-                  <View
-                    key={eventIndex}
-                    style={[
-                      styles.eventDot,
-                      {
-                        backgroundColor: event.color
-                          ? event.color
-                          : event.isCompleted
-                            ? tokens.colors.success
-                            : tokens.colors.primary,
-                      },
-                    ]}
-                  />
-                ))}
-
-                {/* More events count */}
-                {showEventCount && hiddenEventCount > 0 && (
-                  <AtomicText
-                    type="bodySmall"
-                    color="secondary"
-                    style={styles.moreEventsText}
-                  >
-                    +{hiddenEventCount}
-                  </AtomicText>
-                )}
-              </View>
-            </TouchableOpacity>
+              day={day}
+              index={index}
+              isSelected={isSelected}
+              selectedDate={selectedDate}
+              onDateSelect={onDateSelect}
+              maxEventIndicators={maxEventIndicators}
+              showEventCount={showEventCount}
+              dayStyle={dayStyle}
+              testID={testID}
+            />
           );
         })}
       </View>
     </View>
   );
 };
-
-const styles = StyleSheet.create({
-  container: {
-    borderRadius: 12,
-    padding: 16,
-  },
-  weekdayHeader: {
-    flexDirection: 'row',
-    marginBottom: 12,
-  },
-  weekdayCell: {
-    flex: 1,
-    alignItems: 'center',
-  },
-  weekdayText: {
-    textAlign: 'center',
-  },
-  grid: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  dayCell: {
-    width: `${100 / 7}%`,
-    aspectRatio: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderRadius: 8,
-    marginBottom: 4,
-    padding: 4,
-  },
-  dayText: {
-    textAlign: 'center',
-  },
-  eventIndicators: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginTop: 4,
-    gap: 2,
-    flexWrap: 'wrap',
-  },
-  eventDot: {
-    width: 4,
-    height: 4,
-    borderRadius: 2,
-  },
-  moreEventsText: {
-    fontSize: 8,
-    marginLeft: 2,
-  },
-});

package/src/molecules/calendar/presentation/components/CalendarDayCell.tsx

@@ -0,0 +1,101 @@
+/**
+ * Calendar Day Cell Component
+ */
+
+import React from 'react';
+import { TouchableOpacity, View, StyleProp, ViewStyle } from 'react-native';
+import { AtomicText, useAppDesignTokens } from '../../../../index';
+import type { CalendarDay } from '../../domain/entities/CalendarDay.entity';
+import { CalendarService } from '../../infrastructure/services/CalendarService';
+import { calendarStyles } from './calendarStyles';
+
+interface CalendarDayCellProps {
+  day: CalendarDay;
+  index: number;
+  isSelected: boolean;
+  selectedDate: Date;
+  onDateSelect: (date: Date) => void;
+  maxEventIndicators: number;
+  showEventCount: boolean;
+  dayStyle?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+export const CalendarDayCell: React.FC<CalendarDayCellProps> = ({
+  day,
+  index,
+  isSelected,
+  selectedDate,
+  onDateSelect,
+  maxEventIndicators,
+  showEventCount,
+  dayStyle,
+  testID,
+}) => {
+  const tokens = useAppDesignTokens();
+  const eventCount = day.events.length;
+  const visibleEvents = day.events.slice(0, maxEventIndicators);
+  const hiddenEventCount = Math.max(0, eventCount - maxEventIndicators);
+
+  return (
+    <TouchableOpacity
+      key={index}
+      style={[
+        calendarStyles.dayCell,
+        {
+          backgroundColor: isSelected ? tokens.colors.primary : 'transparent',
+          borderColor: isSelected
+            ? tokens.colors.primary
+            : day.isToday
+              ? tokens.colors.primary
+              : tokens.colors.border,
+          borderWidth: isSelected ? 2 : day.isToday ? 2 : 1,
+          opacity: day.isDisabled ? 0.4 : 1,
+        },
+        dayStyle,
+      ]}
+      onPress={() => !day.isDisabled && onDateSelect(day.date)}
+      disabled={day.isDisabled}
+      testID={testID ? `${testID}-day-${index}` : undefined}
+      accessibilityLabel={`${day.date.toLocaleDateString()}, ${eventCount} events`}
+      accessibilityRole="button"
+      accessibilityState={{ disabled: day.isDisabled, selected: isSelected }}
+    >
+      <AtomicText
+        type="bodyMedium"
+        color={isSelected ? 'inverse' : day.isCurrentMonth ? 'primary' : 'secondary'}
+        style={[calendarStyles.dayText, day.isToday && !isSelected && { fontWeight: 'bold' }]}
+      >
+        {day.date.getDate()}
+      </AtomicText>
+
+      <View style={calendarStyles.eventIndicators}>
+        {day.isToday && eventCount === 0 && (
+          <View style={[calendarStyles.eventDot, { backgroundColor: tokens.colors.success }]} />
+        )}
+
+        {visibleEvents.map((event, eventIndex) => (
+          <View
+            key={eventIndex}
+            style={[
+              calendarStyles.eventDot,
+              {
+                backgroundColor: event.color
+                  ? event.color
+                  : event.isCompleted
+                    ? tokens.colors.success
+                    : tokens.colors.primary,
+              },
+            ]}
+          />
+        ))}
+
+        {showEventCount && hiddenEventCount > 0 && (
+          <AtomicText type="bodySmall" color="secondary" style={calendarStyles.moreEventsText}>
+            +{hiddenEventCount}
+          </AtomicText>
+        )}
+      </View>
+    </TouchableOpacity>
+  );
+};

package/src/molecules/calendar/presentation/components/CalendarWeekdayHeader.tsx

@@ -0,0 +1,28 @@
+/**
+ * Calendar Weekday Header Component
+ */
+
+import React from 'react';
+import { View } from 'react-native';
+import { AtomicText } from '../../../../index';
+import { calendarStyles } from './calendarStyles';
+
+interface CalendarWeekdayHeaderProps {
+  weekdayNames: string[];
+}
+
+export const CalendarWeekdayHeader: React.FC<CalendarWeekdayHeaderProps> = ({
+  weekdayNames,
+}) => {
+  return (
+    <View style={calendarStyles.weekdayHeader}>
+      {weekdayNames.map((day, index) => (
+        <View key={index} style={calendarStyles.weekdayCell}>
+          <AtomicText type="bodySmall" color="secondary" style={calendarStyles.weekdayText}>
+            {day}
+          </AtomicText>
+        </View>
+      ))}
+    </View>
+  );
+};

package/src/molecules/calendar/presentation/components/calendarStyles.ts

@@ -0,0 +1,56 @@
+/**
+ * Calendar Component Styles
+ */
+
+import { StyleSheet } from 'react-native';
+
+export const calendarStyles = StyleSheet.create({
+  container: {
+    borderRadius: 12,
+    padding: 16,
+  },
+  weekdayHeader: {
+    flexDirection: 'row',
+    marginBottom: 12,
+  },
+  weekdayCell: {
+    flex: 1,
+    alignItems: 'center',
+  },
+  weekdayText: {
+    textAlign: 'center',
+  },
+  grid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  dayCell: {
+    width: `${100 / 7}%`,
+    aspectRatio: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 8,
+    marginBottom: 4,
+    padding: 4,
+  },
+  dayText: {
+    textAlign: 'center',
+  },
+  eventIndicators: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginTop: 4,
+    gap: 2,
+    flexWrap: 'wrap',
+  },
+  eventDot: {
+    width: 4,
+    height: 4,
+    borderRadius: 2,
+  },
+  moreEventsText: {
+    fontSize: 8,
+    marginLeft: 2,
+  },
+});