@umituz/react-native-design-system 2.6.61 → 2.6.64

package/src/layouts/ScreenLayout/components/ContentWrapper.tsx

@@ -0,0 +1,31 @@
+/**
+ * ContentWrapper Component
+ * Conditionally wraps content with KeyboardAvoidingView
+ */
+
+import React from 'react';
+import { View } from 'react-native';
+import type { ViewStyle } from 'react-native';
+import { AtomicKeyboardAvoidingView } from '../../../atoms';
+
+export interface ContentWrapperProps {
+  readonly children: React.ReactNode;
+  readonly keyboardAvoiding?: boolean;
+  readonly style?: ViewStyle;
+}
+
+export const ContentWrapper: React.FC<ContentWrapperProps> = ({
+  children,
+  keyboardAvoiding = false,
+  style,
+}) => {
+  if (keyboardAvoiding) {
+    return (
+      <AtomicKeyboardAvoidingView style={style}>
+        {children}
+      </AtomicKeyboardAvoidingView>
+    );
+  }
+
+  return <View style={style}>{children}</View>;
+};

package/src/layouts/ScreenLayout/components/index.ts

@@ -0,0 +1,6 @@
+/**
+ * ScreenLayout Components Export
+ */
+
+export { ContentWrapper } from './ContentWrapper';
+export type { ContentWrapperProps } from './ContentWrapper';

package/src/layouts/ScreenLayout/styles/screenLayoutStyles.ts

@@ -0,0 +1,47 @@
+/**
+ * ScreenLayout Styles
+ */
+
+import { StyleSheet } from 'react-native';
+import type { DesignTokens } from '../../../theme';
+
+export interface ScreenLayoutStylesConfig {
+  readonly maxWidth?: number;
+  readonly horizontalPadding: number;
+  readonly verticalPadding: number;
+}
+
+export const getScreenLayoutStyles = (
+  tokens: DesignTokens,
+  config: ScreenLayoutStylesConfig,
+) => {
+  const { maxWidth, horizontalPadding, verticalPadding } = config;
+
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+    },
+    keyboardAvoidingView: {
+      flex: 1,
+    },
+    responsiveWrapper: {
+      flex: 1,
+      width: '100%',
+      ...(maxWidth ? { maxWidth, alignSelf: 'center' as const } : {}),
+    },
+    content: {
+      flex: 1,
+      paddingTop: verticalPadding,
+      paddingHorizontal: horizontalPadding,
+    },
+    scrollView: {
+      flex: 1,
+    },
+    scrollContent: {
+      flexGrow: 1,
+      paddingTop: verticalPadding,
+      paddingHorizontal: horizontalPadding,
+      paddingBottom: verticalPadding,
+    },
+  });
+};

package/src/layouts/ScreenLayout/types/index.ts

@@ -0,0 +1,27 @@
+/**
+ * ScreenLayout Type Definitions
+ */
+
+import type { ViewStyle } from 'react-native';
+import type { Edge } from 'react-native-safe-area-context';
+import type { RefreshControlProps } from 'react-native';
+
+export interface ScreenLayoutProps {
+  readonly children: React.ReactNode;
+  readonly scrollable?: boolean;
+  readonly edges?: Edge[];
+  readonly header?: React.ReactNode;
+  readonly footer?: React.ReactNode;
+  readonly backgroundColor?: string;
+  readonly containerStyle?: ViewStyle;
+  readonly contentContainerStyle?: ViewStyle;
+  readonly testID?: string;
+  readonly hideScrollIndicator?: boolean;
+  readonly keyboardAvoiding?: boolean;
+  readonly accessibilityLabel?: string;
+  readonly accessibilityHint?: string;
+  readonly accessible?: boolean;
+  readonly responsiveEnabled?: boolean;
+  readonly maxWidth?: number;
+  readonly refreshControl?: React.ReactElement<RefreshControlProps>;
+}

package/src/molecules/avatar/Avatar.constants.ts

@@ -0,0 +1,103 @@
+/**
+ * Avatar Constants
+ * Configuration constants for avatar component
+ */
+
+import type { AvatarSize, AvatarShape, AvatarType, SizeConfig } from './Avatar.types';
+
+/**
+ * Size configurations (px)
+ */
+export const SIZE_CONFIGS: Record<AvatarSize, SizeConfig> = {
+  xs: {
+    size: 24,
+    fontSize: 10,
+    iconSize: 12,
+    statusSize: 6,
+    borderWidth: 1,
+  },
+  sm: {
+    size: 32,
+    fontSize: 12,
+    iconSize: 16,
+    statusSize: 8,
+    borderWidth: 1.5,
+  },
+  md: {
+    size: 40,
+    fontSize: 14,
+    iconSize: 20,
+    statusSize: 10,
+    borderWidth: 2,
+  },
+  lg: {
+    size: 56,
+    fontSize: 18,
+    iconSize: 28,
+    statusSize: 12,
+    borderWidth: 2,
+  },
+  xl: {
+    size: 80,
+    fontSize: 24,
+    iconSize: 40,
+    statusSize: 16,
+    borderWidth: 2.5,
+  },
+  xxl: {
+    size: 120,
+    fontSize: 36,
+    iconSize: 60,
+    statusSize: 20,
+    borderWidth: 3,
+  },
+};
+
+/**
+ * Avatar background colors
+ * Vibrant, accessible colors with good contrast
+ */
+export const AVATAR_COLORS = [
+  '#EF4444', // Red
+  '#F59E0B', // Orange
+  '#10B981', // Green
+  '#3B82F6', // Blue
+  '#8B5CF6', // Purple
+  '#EC4899', // Pink
+  '#14B8A6', // Teal
+  '#F97316', // Orange-Red
+  '#06B6D4', // Cyan
+  '#84CC16', // Lime
+] as const;
+
+/**
+ * Status indicator colors
+ */
+export const STATUS_COLORS = {
+  online: '#10B981', // Green
+  offline: '#9CA3AF', // Gray
+  away: '#F59E0B', // Orange
+  busy: '#EF4444', // Red
+} as const;
+
+/**
+ * Border radius configurations
+ */
+export const SHAPE_CONFIGS = {
+  circle: 9999, // Full circle
+  square: 0, // No radius
+  rounded: 8, // Rounded corners
+} as const;
+
+/**
+ * Avatar constants
+ */
+export const AVATAR_CONSTANTS = {
+  DEFAULT_SIZE: 'md' as AvatarSize,
+  DEFAULT_SHAPE: 'circle' as AvatarShape,
+  DEFAULT_TYPE: 'initials' as AvatarType,
+  DEFAULT_ICON: 'user',
+  MAX_GROUP_VISIBLE: 3,
+  GROUP_SPACING: -8, // Negative for overlap
+  FALLBACK_INITIALS: '?',
+} as const;

package/src/molecules/avatar/Avatar.types.ts

@@ -0,0 +1,64 @@
+/**
+ * Avatar Types
+ * Type definitions for avatar component
+ */
+
+/**
+ * Avatar size preset
+ */
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+
+/**
+ * Avatar shape
+ */
+export type AvatarShape = 'circle' | 'square' | 'rounded';
+
+/**
+ * Avatar type
+ */
+export type AvatarType = 'image' | 'initials' | 'icon';
+
+/**
+ * Avatar configuration
+ */
+export interface AvatarConfig {
+  /** Avatar type */
+  type: AvatarType;
+  /** Size preset */
+  size: AvatarSize;
+  /** Shape */
+  shape: AvatarShape;
+  /** Image URI */
+  uri?: string;
+  /** User name for initials */
+  name?: string;
+  /** Icon name (if type is icon) */
+  icon?: string;
+  /** Custom background color */
+  backgroundColor?: string;
+  /** Show status indicator */
+  showStatus?: boolean;
+  /** Status (online/offline) */
+  status?: 'online' | 'offline' | 'away' | 'busy';
+}
+
+/**
+ * Size configuration
+ */
+export interface SizeConfig {
+  size: number;
+  fontSize: number;
+  iconSize: number;
+  statusSize: number;
+  borderWidth: number;
+}
+
+/**
+ * Avatar group configuration
+ */
+export interface AvatarGroupConfig {
+  maxVisible: number;
+  spacing: number;
+  size: AvatarSize;
+  shape: AvatarShape;
+}

package/src/molecules/avatar/Avatar.utils.ts

@@ -1,153 +1,11 @@
 /**
- * Avatar Domain - Entity Definitions
- *
- * Core types and interfaces for user avatars.
- * Supports images, initials, icons with Turkish character support.
+ * Avatar Utilities
+ * Utility class for avatar operations
+ * Supports images, initials, icons with Turkish character support
  */
 
-/**
- * Avatar size preset
- */
-export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
-
-/**
- * Avatar shape
- */
-export type AvatarShape = 'circle' | 'square' | 'rounded';
-
-/**
- * Avatar type
- */
-export type AvatarType = 'image' | 'initials' | 'icon';
-
-/**
- * Avatar configuration
- */
-export interface AvatarConfig {
-  /** Avatar type */
-  type: AvatarType;
-  /** Size preset */
-  size: AvatarSize;
-  /** Shape */
-  shape: AvatarShape;
-  /** Image URI */
-  uri?: string;
-  /** User name for initials */
-  name?: string;
-  /** Icon name (if type is icon) */
-  icon?: string;
-  /** Custom background color */
-  backgroundColor?: string;
-  /** Show status indicator */
-  showStatus?: boolean;
-  /** Status (online/offline) */
-  status?: 'online' | 'offline' | 'away' | 'busy';
-}
-
-/**
- * Size configuration
- */
-export interface SizeConfig {
-  size: number;
-  fontSize: number;
-  iconSize: number;
-  statusSize: number;
-  borderWidth: number;
-}
-
-/**
- * Avatar group configuration
- */
-export interface AvatarGroupConfig {
-  maxVisible: number;
-  spacing: number;
-  size: AvatarSize;
-  shape: AvatarShape;
-}
-
-/**
- * Size configurations (px)
- */
-export const SIZE_CONFIGS: Record<AvatarSize, SizeConfig> = {
-  xs: {
-    size: 24,
-    fontSize: 10,
-    iconSize: 12,
-    statusSize: 6,
-    borderWidth: 1,
-  },
-  sm: {
-    size: 32,
-    fontSize: 12,
-    iconSize: 16,
-    statusSize: 8,
-    borderWidth: 1.5,
-  },
-  md: {
-    size: 40,
-    fontSize: 14,
-    iconSize: 20,
-    statusSize: 10,
-    borderWidth: 2,
-  },
-  lg: {
-    size: 56,
-    fontSize: 18,
-    iconSize: 28,
-    statusSize: 12,
-    borderWidth: 2,
-  },
-  xl: {
-    size: 80,
-    fontSize: 24,
-    iconSize: 40,
-    statusSize: 16,
-    borderWidth: 2.5,
-  },
-  xxl: {
-    size: 120,
-    fontSize: 36,
-    iconSize: 60,
-    statusSize: 20,
-    borderWidth: 3,
-  },
-};
-
-/**
- * Avatar background colors
- * Vibrant, accessible colors with good contrast
- */
-export const AVATAR_COLORS = [
-  '#EF4444', // Red
-  '#F59E0B', // Orange
-  '#10B981', // Green
-  '#3B82F6', // Blue
-  '#8B5CF6', // Purple
-  '#EC4899', // Pink
-  '#14B8A6', // Teal
-  '#F97316', // Orange-Red
-  '#06B6D4', // Cyan
-  '#84CC16', // Lime
-] as const;
-
-/**
- * Status indicator colors
- */
-export const STATUS_COLORS = {
-  online: '#10B981', // Green
-  offline: '#9CA3AF', // Gray
-  away: '#F59E0B', // Orange
-  busy: '#EF4444', // Red
-} as const;
-
-/**
- * Border radius configurations
- */
-export const SHAPE_CONFIGS = {
-  circle: 9999, // Full circle
-  square: 0, // No radius
-  rounded: 8, // Rounded corners
-} as const;
+import type { AvatarSize, AvatarShape, AvatarConfig, SizeConfig } from './Avatar.types';
+import { AVATAR_COLORS, STATUS_COLORS, SHAPE_CONFIGS, SIZE_CONFIGS } from './Avatar.constants';
 
 /**
  * Avatar utility class
@@ -275,16 +133,6 @@ export class AvatarUtils {
   }
 }
 
-/**
- * Avatar constants
- */
-export const AVATAR_CONSTANTS = {
-  DEFAULT_SIZE: 'md' as AvatarSize,
-  DEFAULT_SHAPE: 'circle' as AvatarShape,
-  DEFAULT_TYPE: 'initials' as AvatarType,
-  DEFAULT_ICON: 'user',
-  MAX_GROUP_VISIBLE: 3,
-  GROUP_SPACING: -8, // Negative for overlap
-  FALLBACK_INITIALS: '?',
-} as const;
-
+// Re-export types and constants for convenience
+export type { AvatarSize, AvatarShape, AvatarType, AvatarConfig, SizeConfig } from './Avatar.types';
+export { AVATAR_COLORS, STATUS_COLORS, SHAPE_CONFIGS, SIZE_CONFIGS, AVATAR_CONSTANTS } from './Avatar.constants';

package/src/molecules/calendar/index.ts

@@ -54,18 +54,13 @@ export { CalendarGeneration } from './infrastructure/services/CalendarGeneration
 export { DateUtilities } from './infrastructure/utils/DateUtilities';
 
 // Infrastructure Storage
-export {
-  useCalendarStore,
-  type CalendarViewMode,
-} from './infrastructure/storage/CalendarStore';
-
-// Presentation Hooks
 export {
   useCalendar,
-  useCalendarNavigation,
   useCalendarEvents,
-  type UseCalendarReturn,
-} from './presentation/hooks/useCalendar';
+  useCalendarNavigation,
+  useCalendarView,
+  type CalendarViewMode,
+} from './infrastructure/storage/CalendarStore';
 
 // Presentation Components
 export {