# Changelog All notable changes to this project will be documented in this file. ## [3.9.0] - 2025-11-14 ### 🔧 Breaking Change: HeaderCenter Completely Simplified - Children Only #### ✨ HeaderCenter Now Only Accepts Children for Maximum Flexibility **What Changed:** Completely simplified `HeaderCenter` component to only accept `children` prop. All built-in rendering logic (title, subtitle, isDownArrow, etc.) has been removed. You now have full control over the content and touchability in your projects. **Breaking Changes:** - **REMOVED**: All props except `children` (title, titleColor, subtitle, showSubtitle, subtitleColor, isDownArrow, handlePress) - **REMOVED**: PlayyText import and usage - **REMOVED**: useHeaderContext usage - **REMOVED**: GLYPHS import and usage - **SIMPLIFIED**: Component is now a pure centering container **Migration Guide:** ```tsx // ❌ Before (v3.8.x) - Built-in props console.log('Pressed')} /> // ✅ After (v3.9.0) - Complete control via children console.log('Pressed')} activeOpacity={0.7}> Chats All Chats {GLYPHS['chevron-down-circle'].char} // Simple title only Screen Title // Custom content Any custom content you want ``` **Component Structure:** ```tsx import React, {FC, ReactNode} from 'react'; import {StyleSheet, View} from 'react-native'; interface HeaderCenterProps { children: ReactNode; } const HeaderCenter: FC = ({children}) => { const styles = themedStyle(); return {children}; }; const themedStyle = () => StyleSheet.create({ centerSection: { ...StyleSheet.absoluteFillObject, justifyContent: 'center', alignItems: 'center', pointerEvents: 'box-none', // Container doesn't block touches }, }); ``` **How `pointerEvents: 'box-none'` Works:** - The container View covers the entire header width (absolute positioning) - `pointerEvents: 'box-none'` means the container itself doesn't capture touches - Touches pass through to HeaderLeft and HeaderRight - But children (like TouchableOpacity) with `pointerEvents: 'auto'` (default) DO capture touches - This allows HeaderCenter content to be interactive while not blocking other header sections **Usage Pattern:** ```tsx

{/* Center content - TouchableOpacity works perfectly */} Touchable Content

``` **Why This Change:** - ✅ **Complete Control**: You manage all content, styling, and interactions - ✅ **No Touch Issues**: No more double-tap or responsiveness problems - ✅ **Maximum Flexibility**: Use any components, any styling, any logic - ✅ **Simpler Code**: Component is now ~25 lines instead of ~80 lines - ✅ **No Dependencies**: No reliance on PlayyText, GLYPHS, or theme context - ✅ **Predictable**: Does one thing well - centers content **Benefits:** - ✅ Zero touch responsiveness issues - ✅ HeaderLeft and HeaderRight never blocked - ✅ Full control over TouchableOpacity behavior - ✅ Use any components you want as children - ✅ Easier to understand and maintain - ✅ Follows React composition best practices **Files Updated:** - ✅ `components/Header/HeaderCenter.tsx` - Simplified to 25 lines - ✅ `index.d.ts` - Updated `HeaderCenterProps` to only include `children` **Compatibility:** - ⚠️ **Breaking Change** - All props except `children` removed - ✅ Component is now simpler and more flexible - ✅ Migration is straightforward - compose your own content --- ## [3.8.5] - 2025-11-10 ### 🔧 Enhancement: HeaderCenter Conditional Touchability #### ✨ Made HeaderCenter Conditionally Interactive **What Changed:** Enhanced `HeaderCenter` component to make the entire view touchable when both `isDownArrow` and `subtitle` are present, providing a better user experience for clickable headers. **Changes:** - **CONDITIONAL WRAPPER**: Entire center section is now wrapped in `TouchableOpacity` when `isDownArrow={true}` and `subtitle` is provided - **SIMPLIFIED STRUCTURE**: Extracted content to avoid duplication between touchable and non-touchable variants - **IMPROVED UX**: Larger tap target area when the header is interactive - **CLEANER CODE**: Removed unnecessary `pointerEvents` prop from `subtitleContainer` **Technical Details:** ```tsx // Before (v3.8.4) - Only subtitle container was touchable {title && {title}} {isDownArrow && subtitle && ( {subtitle} {downArrowIcon} )} ; // After (v3.8.5) - Entire view is touchable when needed if (isDownArrow && subtitle) { return ( {content} ); } return {content}; ``` **Usage:** ```tsx // Interactive header - entire center becomes touchable console.log('Header clicked')} /> // Non-interactive header - normal view ``` **Files Updated:** - ✅ `components/Header/HeaderCenter.tsx` - Refactored to conditional wrapper - ✅ Improved touch target area for better UX - ✅ Cleaner component structure **Compatibility:** - ✅ Backward compatible - no API changes - ✅ Better UX with larger touch targets - ✅ No breaking changes to existing implementations --- ## [3.8.1] - 2025-11-10 ### 🔧 Enhancement: HeaderLeft Back Icon Color Update #### ✨ Improved Back Icon Color Handling **What Changed:** Simplified the `HeaderLeft` component by removing unused `backIconWidth` and `backIconHeight` props. The back icon now uses the glyph character with proper color support. **Changes:** - **REMOVED**: `backIconWidth` prop (unused in implementation) - **REMOVED**: `backIconHeight` prop (unused in implementation) - **IMPROVED**: Back icon now uses `GLYPHS['chevron-left-strong'].char` for consistent rendering - **MAINTAINED**: `backIconColor` prop works correctly with fallback to `colors.labels_primary` **Technical Details:** ```tsx // Back icon implementation {GLYPHS['chevron-left-strong'].char} ``` **Files Updated:** - ✅ `components/Header/HeaderLeft.tsx` - Removed unused props from interface - ✅ `index.d.ts` - Updated `HeaderLeftProps` interface **Compatibility:** - ✅ Backward compatible - Removed props were not functional - ✅ `backIconColor` still works as expected - ✅ No breaking changes to existing implementations --- ## [3.8.0] - 2025-10-30 ## [3.8.2] - 2025-11-10 ### 📦 Release: package update (no theme value changes) #### What Changed: - Bumped package version and published a patch release. No changes were made to `theme/themeColors.ts` values per request. #### Notes: - If you want `background_card_*` tokens updated in the future, I can align them to `background_primary`/`background_secondary` in a follow-up patch. ### 🚀 MAJOR: SwipeableListItem Compound Component Architecture #### ✨ Complete Refactor to Compound Component Pattern **What Changed:** `SwipeableListItem` has been completely refactored from a single component with a `chatProps` object to a flexible compound component architecture with 13 sub-components. This provides maximum flexibility and composability while maintaining full backward compatibility. **🎯 New Compound Component Architecture:** The component is now split into 19 files with a declarative, composable API: 1. **SwipeableListItem** (Main coordinator) 2. **SwipeableListItem.Avatar** - Avatar with fallback support 3. **SwipeableListItem.Content** - Content container 4. **SwipeableListItem.Metadata** - Timestamp and badges 5. **SwipeableListItem.Title** - Name/title text 6. **SwipeableListItem.SubTitle** - Message preview 7. **SwipeableListItem.Icon** - Icons in metadata 8. **SwipeableListItem.Selection** - Selection compound wrapper 9. **SwipeableListItem.Selected** - Selected state component 10. **SwipeableListItem.Unselected** - Unselected state component 11. **SwipeableListItem.SwipeActions** - Legacy swipe actions (preserved for backward compatibility) 12. **SwipeableListItem.SwipeLeftActions** - NEW: Declarative left swipe container 13. **SwipeableListItem.SwipeRightActions** - NEW: Declarative right swipe container 14. **SwipeableListItem.SwipeLeftAction** - NEW: Individual left action 15. **SwipeableListItem.SwipeRightAction** - NEW: Individual right action **🔥 New Declarative Swipe Actions API:** ```tsx // v3.8.0+ - New declarative API {}} onLongPress={() => {}}> console.log('Mark as read')}> Read console.log('Pin')}> Pin console.log('Delete')}> Delete John Doe Hey there! How are you doing today? ``` **📦 Component Composition Flexibility:** Each sub-component can be used independently with complete control: ```tsx // Minimal usage {}}> Simple Item // With avatar and metadata {}}> User Name Message preview // With custom content {}}> Custom content here Any React components Custom metadata ``` **🔄 Legacy API Still Fully Supported:** ```tsx // v3.6.x - v3.7.x API - Still works! {}, onMute: () => {}, onArchive: () => {}, }} /> ``` **🎨 Key Improvements:** 1. ✅ **Maximum Flexibility** - Compose exactly what you need 2. ✅ **Declarative Swipe Actions** - Define actions as JSX children 3. ✅ **Better Code Organization** - 19 focused files instead of one large file 4. ✅ **Full TouchableOpacity Support** - All TouchableOpacity props available via spread 5. ✅ **Custom Content Support** - Use any React components as children 6. ✅ **Type Safety** - Complete TypeScript support with proper interfaces 7. ✅ **Context-Based State** - Shared state via SwipeableListItemContext 8. ✅ **Performance** - useMemo for extracting declarative actions 9. ✅ **Backward Compatible** - Old API still works via SwipeActions sub-component **📁 New File Structure:** ``` components/SwipeableListItem/ ├── SwipeableListItem.tsx (main coordinator) ├── types.ts (TypeScript definitions) ├── SwipeableListItemContext.tsx (context provider) ├── SwipeableListItemAvatar.tsx ├── SwipeableListItemContent.tsx ├── SwipeableListItemMetadata.tsx ├── SwipeableListItemTitle.tsx ├── SwipeableListItemSubTitle.tsx ├── SwipeableListItemIcon.tsx ├── SwipeableListItemSelection.tsx ├── SwipeableListItemSelected.tsx ├── SwipeableListItemUnselected.tsx ├── SwipeableListItemSwipeActions.tsx (legacy) ├── SwipeableListItemSwipeLeftActions.tsx (new) ├── SwipeableListItemSwipeRightActions.tsx (new) ├── SwipeableListItemSwipeLeftAction.tsx (new) ├── SwipeableListItemSwipeRightAction.tsx (new) ├── SwipeableListItemExample.tsx (legacy examples) ├── SwipeableListItemNewExamples.tsx (new API examples) └── index.ts (barrel export) ``` **🔧 Technical Implementation:** **Main Component (SwipeableListItem.tsx):** - Uses useMemo to extract declarative swipe actions from children - Provides context to all sub-components via SwipeableListItemContext - Conditionally wraps content with SwipeableComponent if actions exist - Supports both legacy SwipeActions and new declarative API - Spreads all TouchableOpacity props for full control **Context API:** ```tsx interface SwipeableListItemContextValue { backgroundColor?: string; unreadCount?: number; onPress?: (event: GestureResponderEvent) => void; onLongPress?: (event: GestureResponderEvent) => void; selected?: boolean; onSelectChange?: (nextSelected: boolean) => void; isSelection?: boolean; swipeConfig?: SwipeableListItemSwipeActionsProps; } ``` **TypeScript Support:** ```tsx // Main component props interface SwipeableListItemProps extends Omit { children: React.ReactNode; containerStyle?: StyleProp; backgroundColor?: string; selected?: boolean; onSelectChange?: (nextSelected: boolean) => void; isSelection?: boolean; } // Swipe action props (extends TouchableOpacity) interface SwipeActionProps extends TouchableOpacityProps { children: React.ReactNode; backgroundColor?: string; width?: number; } ``` **🎯 Migration Guide:** **Option 1: Keep using legacy API (no changes needed)** ```tsx // This still works exactly as before ``` **Option 2: Migrate to new compound component API** ```tsx // Before (v3.7.0) {}, }} /> // After (v3.8.0) {}}> John Hi ``` **Benefits of New API:** - More explicit and easier to understand - Better IntelliSense and autocomplete support - Easier to customize individual sections - Can use any custom React components - Better for complex layouts **🔗 Exports:** All sub-components are exported for advanced usage: ```tsx import { SwipeableListItem, SwipeableListItemAvatar, SwipeableListItemContent, SwipeableListItemMetadata, useSwipeableListItemContext, } from 'motorinc-global-components'; ``` **📝 Files Updated:** - ✅ `components/SwipeableListItem/` - Complete refactor (19 files) - ✅ `index.js` - Updated export (unchanged, uses barrel export) - ✅ `index.d.ts` - Complete TypeScript declarations for all sub-components - ✅ `CHANGELOG.md` - Comprehensive documentation - ✅ `package.json` - Version bump to 3.8.0 **🎨 Design Patterns:** - **Compound Components**: Similar to React Router, Formik, Recharts - **Context API**: Shared state between parent and children - **Composition**: Maximum flexibility through component composition - **Backward Compatibility**: Legacy API preserved via SwipeActions component - **Type Safety**: Full TypeScript support with proper generics **Compatibility:** - ✅ **Backward Compatible** - Old API via chatProps still works - ✅ **React Native 0.71.0+** - ✅ **TypeScript 4.0+** - ✅ **react-native-gesture-handler >=2.0.0** - ✅ **react-native-reanimated >=3.0.0** --- ## [3.7.0] - 2025-10-29 ### ✨ Enhancement: SwipeableListItem Selection Mode & Visual Improvements #### 🎯 New Selection Feature for Multi-Select Lists **What Changed:** Enhanced `SwipeableListItem` with selection mode capability, improved unread message highlighting, and better swipe action icons. **New Features:** 1. ✅ **Selection Mode** - Support for multi-select with checkboxes - `isSelection` prop - Enables selection mode (disables swipe gestures) - `selected` prop - Controls selected state - `onSelectChange` callback - Handles selection changes 2. ✅ **Unread Message Highlighting** - Automatic background color change for unread items - Items with `unreadCount > 0` get subtle blue background (`primary_accent_blue_5`) 3. ✅ **Improved Icons** - Better glyph usage for swipe actions - Archive action now uses `archive-fill` glyph - More action now uses `menu-vertical` glyph - Unread badge now uses `primary_white` color for better contrast **New Props Added:** ```tsx interface ChatItemProps { // ... existing props // NEW: Selection mode props selected?: boolean; // Selection state onSelectChange?: (nextSelected: boolean) => void; // Selection callback isSelection?: boolean; // Enable selection mode } ``` **Usage Example - Selection Mode:** ```tsx import {SwipeableListItem} from 'motorinc-global-components'; // Single item with selection { // Handle selection change setIsSelected(val); }, onPress: () => console.log('Item pressed'), }} />; // Multi-select list example const [selectedIds, setSelectedIds] = useState>(new Set()); ( { const newSet = new Set(selectedIds); if (val) { newSet.add(item.id); } else { newSet.delete(item.id); } setSelectedIds(newSet); }, }} /> )} />; ``` **Behavior Changes:** - **Selection Mode Active**: Swipe gestures are disabled when `isSelection={true}` - **Unread Items**: Automatically highlighted with subtle blue background - **Selection Button**: Appears on the left with selected/unselected icon **Visual Improvements:** - 🎨 Selection checkbox with selected/unselected icons from IconComponent - 🎨 Automatic background color for unread messages - 🎨 Better contrast for unread count badge (white text) - 🎨 Updated swipe action glyphs (archive, menu icons) **Files Changed:** - `components/SwipeableListItem/SwipeableListItem.tsx` - Added selection mode logic - Added IconComponent import - Added selection button rendering - Improved unread message styling - Updated swipe action icons - `components/Icon/Icons.tsx` - Added selected/unselected icons - `index.d.ts` - Updated ChatItemProps interface **Compatibility:** - ✅ Backward compatible - all new props are optional - ✅ Existing implementations continue to work without changes - ✅ Selection mode is opt-in via `isSelection` prop ## [3.6.9] - 2025-10-29 (Version existed but updated in this release) ## [3.6.8] - 2025-10-28 ### ✨ Component Rename: SwipeableListView → SwipeableListItem #### 🔄 Renamed Component for Better Clarity **What Changed:** Renamed `SwipeableListView` to `SwipeableListItem` to better reflect its purpose as an individual list item component, not a list container. **Breaking Change:** ```tsx // ❌ Old import (no longer works) import {SwipeableListView} from 'motorinc-global-components'; // ✅ New import import {SwipeableListItem} from 'motorinc-global-components'; ``` **New Props Added:** 1. ✅ **messageIconColor** - Optional color for the message icon 2. ✅ **chatContainerStyle** - Optional custom styling for the chat container **Updated Props Interface:** ```tsx interface ChatItemProps { name: string; message?: string; timestamp: string; avatar?: ImageSourcePropType; isPinned?: boolean; pinnedIcon?: React.ReactNode; isMentioned?: boolean; unreadCount?: number; isTyping?: boolean; isDeleted?: boolean; messageIcon?: React.ReactNode; messageIconColor?: string; // NEW readStatus?: 'read' | 'unread'; showPinAction?: boolean; onToggleReadStatus?: () => void; onTogglePin?: () => void; onPress?: () => void; onMute?: () => void; onArchive?: () => void; onMore?: () => void; leftActionColors?: { read?: string; pin?: string; }; rightActionColors?: { mute?: string; archive?: string; more?: string; }; chatContainerStyle?: object; // NEW } ``` **Usage Example:** ```tsx import {SwipeableListItem} from 'motorinc-global-components'; console.log('Pressed'), }} />; ``` **Improved Features:** - 🎨 Better deleted message UI with nosign glyph - 🎯 More flexible message icon styling - 💅 Custom container styling support - 📱 Improved message text layout with flex styling **Files Changed:** - `components/SwipeableListView/` → `components/SwipeableListItem/` - `SwipeableListView.tsx` → `SwipeableListItem.tsx` - Updated exports in `index.js` - Updated TypeScript declarations in `index.d.ts` **Migration Required:** Simple import name change - all props remain compatible, with two new optional props added: ```tsx // Before // After ``` **Compatibility:** - ✅ All existing props still work - ✅ New props are optional - ⚠️ Must update import name ## [3.6.7] - 2025-10-28 (Version skipped - internal updates) ## [3.6.6] - 2025-10-28 (Version skipped - internal updates) ## [3.6.5] - 2025-10-28 (Version skipped - internal updates) ## [3.6.4] - 2025-10-28 (Version skipped - internal updates) ## [3.6.3] - 2025-10-27 ### 🎨 Enhancement: Improved SwipeableComponent Animations #### 🔧 Refined Swipe Gesture Animations **What Changed:** Improved the `SwipeableComponent` animation behavior for smoother, more natural swipe interactions. **Animation Improvements:** 1. ✅ **Better offset calculation** - Actions now translate based on total width of all actions instead of individual action width 2. ✅ **Removed scaling animation** - Changed scale interpolation from `[0.8, 0.9, 1]` to `[1, 1, 1]` for cleaner reveal 3. ✅ **Adjusted opacity timing** - Updated opacity from `[0, 0.7, 1]` to `[0, 0.75, 1]` for smoother fade-in 4. ✅ **Removed TypeScript workarounds** - Cleaned up code by removing `any` type casts **Technical Changes:** ```tsx // Before (v3.6.1) const trans = progress.interpolate({ inputRange: [0, 1], outputRange: [-(action.width || 80), 0], // Individual width }); const scale = progress.interpolate({ inputRange: [0, 0.5, 1], outputRange: [0.8, 0.9, 1], // Scaling animation }); // After (v3.6.3) const baseWidth = action.width || 80; const offset = baseWidth * actions.length; // Total width const trans = progress.interpolate({ inputRange: [0, 1], outputRange: [-offset, 0], // Better reveal }); const scale = progress.interpolate({ inputRange: [0, 0.5, 1], outputRange: [1, 1, 1], // No scaling }); ``` **Benefits:** - 🎯 More predictable swipe behavior with multiple actions - ✨ Cleaner, less distracting animations - ⚡ Improved performance without scaling calculations - 🧹 Cleaner TypeScript code **Files Changed:** - `components/Swipeable/Swipeable.tsx` **Compatibility:** - ✅ Backward compatible - No API changes - ✅ Works with existing SwipeableListView - ✅ No migration required ## [3.6.2] - 2025-10-27 (Version skipped) ## [3.6.1] - 2025-10-27 ### 🔄 Update: RowListView Removal (Breaking Change) **⚠️ BREAKING CHANGE:** `RowListView` has been **completely removed** from the package and replaced with `SwipeableListView`. **What Changed:** - ❌ Removed `RowListView` component export from `index.js` - ❌ Removed `RowListViewProps` interface from `index.d.ts` - ✅ `SwipeableListView` is now the recommended component for chat/list views - ✅ `ListCard` remains available for simple list items **Migration Required:** ```tsx // ❌ This will no longer work import {RowListView} from 'motorinc-global-components'; // ✅ Use SwipeableListView instead import {SwipeableListView} from 'motorinc-global-components'; {}, }} />; // ✅ OR use ListCard for simple items import {ListCard} from 'motorinc-global-components'; {}} />; ``` ## [3.6.0] - 2025-10-27 ### ✨ New Feature: SwipeableListView Component (Replacing RowListView) #### 🎉 Introducing SwipeableListView - Modern Chat/List Interface Component **New Component Added:** A comprehensive, feature-rich list view component designed for chat applications and swipeable list interfaces, inspired by iOS WhatsApp and iMessage. **⚠️ BREAKING CHANGE:** `RowListView` has been **removed** from the package and replaced with `SwipeableListView`. If you were using `RowListView`, please migrate to `SwipeableListView` or use `ListCard` for simpler list items. **Migration Guide:** ```tsx // ❌ Before (RowListView - REMOVED) import {RowListView} from 'motorinc-global-components'; {}} />; // ✅ After (SwipeableListView - NEW) import {SwipeableListView} from 'motorinc-global-components'; {}, onArchive: () => {}, onPress: () => {}, }} />; // OR use ListCard for simple list items import {ListCard} from 'motorinc-global-components'; {}} />; ``` **Key Features:** 1. ✅ **Avatar Support** - Image avatars with placeholder fallback 2. ✅ **Rich Message Preview** - Name, message text, and timestamp 3. ✅ **Status Indicators** - Pinned, mentioned (@), unread count badges 4. ✅ **Typing Indicator** - Shows "User is typing..." state 5. ✅ **Deleted Messages** - Special styling for deleted message state 6. ✅ **Message Icons** - Support for custom icons in message preview (checkmarks, etc.) 7. ✅ **Swipe Actions** - Left and right swipe gestures with customizable actions 8. ✅ **Fully Themed** - Integrates with theme system (dark/light mode) 9. ✅ **TypeScript Support** - Complete type definitions 10. ✅ **Performance Optimized** - Ready for large lists with FlatList **Swipe Actions:** **Left Swipe Actions:** - Read/Unread toggle (blue) - Pin/Unpin (gray) **Right Swipe Actions:** - Mute (red) - Archive (orange) - More options (gray) **Usage Example:** ```tsx import {SwipeableListView} from 'motorinc-global-components'; , isMentioned: true, unreadCount: 3, readStatus: 'unread', showPinAction: true, onToggleReadStatus: () => console.log('Toggle read'), onTogglePin: () => console.log('Toggle pin'), onPress: () => console.log('Chat pressed'), onMute: () => console.log('Mute'), onArchive: () => console.log('Archive'), onMore: () => console.log('More'), }} />; ``` **Props Interface:** ```tsx interface ChatItemProps { name: string; message?: string; timestamp: string; avatar?: ImageSourcePropType; isPinned?: boolean; pinnedIcon?: React.ReactNode; isMentioned?: boolean; unreadCount?: number; isTyping?: boolean; isDeleted?: boolean; messageIcon?: React.ReactNode; readStatus?: 'read' | 'unread'; showPinAction?: boolean; onToggleReadStatus?: () => void; onTogglePin?: () => void; onPress?: () => void; onMute?: () => void; onArchive?: () => void; onMore?: () => void; leftActionColors?: { read?: string; pin?: string; }; rightActionColors?: { mute?: string; archive?: string; more?: string; }; } ``` **Visual Design:** - Avatar: 56x56 rounded - Height: 77.33px - Padding: 16px left, 31px right, 10px top - Separators: Bottom border with theme colors - Badges: Blue for unread count, @ for mentions - Typography: Uses Playy font family with proper weights **Theme Integration:** Automatically adapts to light/dark mode using: - `colors.background_primary` - Container background - `colors.labels_primary` - Primary text (name) - `colors.labels_secondary` - Secondary text (timestamp) - `colors.figure_secondary` - Message preview text - `colors.separator_non_opaque` - Bottom separator - `colors.blue` - Action colors - `colors.fill_tertiary` - Avatar placeholder **Files Added:** - `components/SwipeableListView/SwipeableListView.tsx` - Main component - TypeScript declarations in `index.d.ts` - Export added to `index.js` **Files Removed:** - `RowListView` component and all related exports - `RowListViewProps` TypeScript interface **Compatibility:** - ✅ React Native 0.71.0+ - ✅ iOS 13+ - ✅ Android 5.0+ - ✅ Works with FlatList, SectionList - ✅ TypeScript support - ✅ Dark/Light theme support **Dependencies:** - `react-native-gesture-handler` (already required) - `react-native-reanimated` (already required) ## [3.5.1] - 2025-10-23 ### 🐛 Critical Fix: DateTimePicker Platform-Specific Rendering #### 🔧 Fixed DateTimePicker Not Rendering on iOS/Android **Problem:** The DateTimePicker was not rendering properly due to: 1. ❌ Using `textColor` prop (removed in newer versions of @react-native-community/datetimepicker) 2. ❌ Using `display="spinner"` on Android (not supported) 3. ❌ No theme variant support for dark/light mode **Solution:** ```tsx // Before (v3.5.0) - Not working // After (v3.5.1) - Works on both platforms ``` **Changes:** 1. ✅ **Removed `textColor` prop** - Not supported in latest version 2. ✅ **Platform-specific `display`** - 'spinner' for iOS, 'default' for Android 3. ✅ **Added `themeVariant`** - Automatically detects dark/light mode 4. ✅ **Re-added Platform import** - Required for platform detection **Impact:** - ✅ DateTimePicker now renders correctly on iOS - ✅ DateTimePicker now renders correctly on Android - ✅ Automatically adapts to app's theme (dark/light mode) - ✅ Better user experience with platform-appropriate UI **⚠️ Important: iOS Setup Required** After updating to this version, you **MUST** run pod install: ```bash cd ios && pod install ``` This will install the native iOS dependencies for DateTimePicker. Without this step, the DateTimePicker will not render on iOS. **Installation Steps:** ```bash # 1. Update the package npm install motorinc-global-components@3.5.1 # 2. Install iOS pods (REQUIRED for iOS) cd ios && pod install # 3. Clean and rebuild (recommended) # iOS cd ios && xcodebuild clean # Android cd android && ./gradlew clean ``` **Testing:** ```tsx // iOS: Shows spinner-style picker // Android: Shows default calendar picker ``` // Android: Shows default calendar picker ```` --- ## [3.5.0] - 2025-10-23 ### ⚡ Performance Optimization: DateSelector Component #### 🚀 Major Performance Improvements **Optimizations:** 1. **Performance Enhancements** - ✅ Memoized `themedStyle` with `useMemo` to prevent unnecessary style recalculations - ✅ Memoized all formatted dates to avoid repeated `moment()` calls - ✅ Memoized calendar theme object to prevent recreation on every render - ✅ Memoized marked dates to prevent recreation - ✅ Wrapped all callbacks with `useCallback` for better performance 2. **Code Quality** - ✅ Removed unused imports (`Platform`, `SPACING_12`) - ✅ Fixed font weight type safety with `as const` assertions - ✅ Added proper accessibility labels to all touchable elements - ✅ Improved touch target sizes (44x44 minimum for accessibility) 3. **New Props for Better Flexibility** - ✅ `locale?: string` - Customize date picker locale (default: 'en_US') - ✅ `cardViewStyle?: object` - Override card container styling - ✅ `dateFormat?: string` - Customize header date format (default: 'MMMM YYYY') **Before vs After:** ```tsx // Before (v3.4.5) - Performance issues const DateSelector = () => { const styles = themedStyle(colors); // ❌ Recreated every render // ❌ Multiple moment() calls on every render ; }; // After (v3.5.0) - Optimized const DateSelector = () => { const styles = useMemo(() => themedStyle(colors), [colors]); // ✅ Memoized // ✅ All dates formatted once and memoized const formattedDates = useMemo( () => ({ current: moment(currentMonth).format('YYYY-MM-DD'), // ... all dates }), [currentMonth, selectedDate, maximumDate, minimumDate], ); }; ```` **New Features:** ```tsx // Customize locale // Custom date format // Custom card styling ``` **Performance Impact:** - ⚡ Reduced unnecessary re-renders - ⚡ Minimized moment.js operations (expensive) - ⚡ Better memory management with memoization - ⚡ Faster navigation between months - ♿ Improved accessibility compliance **Accessibility Improvements:** ```tsx // All buttons now have proper accessibility ``` --- ## [3.4.5] - 2025-10-23 ### 🐛 Critical Fix: DateSelector DateTimePicker #### 🔧 DateSelector - Fixed DateTimePicker Not Opening **Fix:** - **Added `mode="date"` prop**: Fixed DateTimePicker not rendering when `showMonthPicker` is true - **Added CardView Padding**: Added proper padding via `cardViewStyle` prop for better spacing **Technical Changes:** ```tsx // Before (v3.4.4 and earlier) - DateTimePicker wouldn't show // After (v3.4.5) - DateTimePicker works properly ``` **Impact:** - ✅ Month/Year picker now displays correctly when clicking the header - ✅ Users can now properly navigate between months using the native picker - ✅ Works consistently across iOS and Android platforms **Usage:** ```tsx setDate(date)} showHeader={true} /> // Now clicking the header properly shows the month/year picker! ``` --- ## [3.4.4] - 2025-10-23 ### 🔧 Improvements: ListCard Component #### Updated Border and Layout **Changes:** - Improved border rendering logic for lists with leading elements (icons/images) - Better visual consistency between different ListCard configurations --- ## [3.4.3] - 2025-10-23 ### 🔧 Fix: PlayyTextInput Style Override #### ✨ Fixed containerStyle Application Order **Fix:** - **Style Override**: Fixed `containerStyle` prop application order to properly override default styles - **Better Control**: Users can now override border styles, padding, and other container styles as expected **Technical Changes:** ```tsx // Before (v3.4.2) // After (v3.4.3) ``` **Impact:** Now `containerStyle` can properly override default styles including borders, padding, backgroundColor, etc. **Usage Example:** ```tsx ``` --- ## [3.4.2] - 2025-10-23 ### 🔧 Improvements: CardView Component #### ✨ Enhanced CardView Flexibility **Improvements:** - **Custom Styling**: Added `cardViewStyle` prop for flexible custom styling - **Simplified Props**: Removed `type` prop in favor of direct style customization - **Removed Conditional Padding**: Padding is now controlled via `cardViewStyle` prop for better flexibility - **Cleaner API**: Simplified component interface for easier usage **Breaking Changes:** - **⚠️ BREAKING**: Removed `type` prop - use `cardViewStyle` instead ```tsx // Before ... // After ... ``` **Migration Guide:** ```tsx // Old way with type="settings" Content // New way with cardViewStyle Content // Or any custom styles Content ``` **Props:** - `children: ReactNode` - Content to display inside the card - `cardViewStyle?: ViewStyle` - Custom styles for the card container **Usage Example:** ```tsx import {CardView} from 'motorinc-global-components'; function MyComponent() { return ( Your content here ); } ``` --- ## [3.4.1] - 2025-10-23 ### 🔧 Improvements: PlayyTextInput Component #### ✨ Enhanced PlayyTextInput Structure **Improvements:** - **Better Layout**: Improved container structure with separate `textInputContainer` for better flex handling - **Icon Positioning**: Right icon now properly positioned with dedicated `iconContainer` style - **Type Safety**: Updated TypeScript declarations with proper types for `keyboardType` and `autoCapitalize` (instead of `any`) - **Font Integration**: Now uses `useFontConfig()` hook for proper font family application - **Better Spacing**: Added margin between input and icon container for better visual separation **Breaking Changes:** - None - fully backward compatible **Technical Changes:** ```tsx // Before: inputStyle was ViewStyle inputStyle?: ViewStyle; // After: Still ViewStyle but now applied to TextInput with better structure {label && ...} ``` **TypeScript Improvements:** ```typescript // Before keyboardType?: any; autoCapitalize?: any; // After keyboardType?: 'default' | 'number-pad' | 'decimal-pad' | 'numeric' | 'email-address' | 'phone-pad' | 'url'; autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters'; ``` --- ## [3.4.0] - 2025-10-23 ### ✨ New Components: DateSelector & CardView #### 🎯 DateSelector Component A comprehensive date selection component with calendar view and month picker functionality. **Features:** - **Calendar View**: Interactive calendar with date selection using `react-native-calendars` - **Month/Year Picker**: Native date picker for quick month navigation - **Date Range**: Support for minimum and maximum date constraints - **Custom Header**: Optional header with month/year display and navigation arrows - **Theme Integration**: Fully integrated with the library's theme system - **Cross-Platform**: Works on both iOS and Android with native pickers **Props:** - `selectedDate: Date` - Currently selected date - `onDateChange: (date: Date) => void` - Callback when date changes - `minimumDate?: Date` - Minimum selectable date (default: 100 years ago) - `maximumDate?: Date` - Maximum selectable date (default: today) - `showHeader?: boolean` - Show/hide header (default: true) - `headerTitle?: string` - Custom header title (default: formatted month/year) **Usage Example:** ```tsx import {DateSelector} from 'motorinc-global-components'; function MyComponent() { const [selectedDate, setSelectedDate] = useState(new Date()); return ( ); } ``` #### 🎯 CardView Component A themed container component for wrapping content with consistent styling. **Features:** - **Theme Integration**: Automatically adapts to theme colors - **Border Styling**: Rounded corners with separator borders - **Flexible Padding**: Adjustable padding based on type - **Settings Mode**: Special padding mode for settings screens **Props:** - `children: ReactNode` - Content to display inside the card - `type?: string` - Type of card ('settings' for zero padding) **Usage Example:** ```tsx import {CardView} from 'motorinc-global-components'; function MyComponent() { return ( Your content here ); } ``` #### 📦 GLYPHS Export Added GLYPHS export to index.js for easy access to icon glyphs throughout the library. **Usage Example:** ```tsx import {GLYPHS} from 'motorinc-global-components'; {GLYPHS['chevron-right-strong'].char}; ``` ### 🔧 Technical Updates **New Peer Dependencies:** - `react-native-calendars` >= 1.1300.0 - For calendar functionality - `@react-native-community/datetimepicker` >= 7.0.0 - For native date/time picker - `moment` >= 2.29.0 - For date formatting and manipulation **Type Definitions:** - Added `CardViewProps` interface - Added `DateSelectorProps` interface - Added `GLYPHS` type declaration ### 📝 Notes **Installation Requirements:** When using DateSelector, you need to install the peer dependencies: ```bash npm install react-native-calendars @react-native-community/datetimepicker moment ``` Or with yarn: ```bash yarn add react-native-calendars @react-native-community/datetimepicker moment ``` **iOS Setup for DateTimePicker:** ```bash cd ios && pod install ``` --- ## [3.3.2] - 2025-10-23 ### ✨ New Component: PlayyTextInput Added a new themed text input component with label, icons, and separators. **Features:** - Theme-integrated text input with proper color tokens - Optional label display - Conditional right icon (visible on focus) - Top and bottom separators - Full TextInput API support - Focus state management **Props:** - `value: string` - Current input value - `onChangeText: (text: string) => void` - Text change callback - `placeholder?: string` - Placeholder text - `containerStyle?: ViewStyle` - Custom container styling - `inputStyle?: TextStyle` - Custom input styling - `multiline?: boolean` - Enable multiline input - `maxLength?: number` - Maximum character length - `keyboardType?: any` - Keyboard type - `autoCapitalize?: any` - Auto capitalization behavior - `secureTextEntry?: boolean` - Hide text for passwords - `editable?: boolean` - Enable/disable editing - `label?: string` - Optional label text - `showIcon?: boolean` - Show left icon - `topSeparator?: boolean` - Show top separator - `bottomSeparator?: boolean` - Show bottom separator - `rightIconName?: string` - Right icon name - `autoFocus?: boolean` - Auto focus on mount - `handleIconPress?: () => void` - Right icon press handler **Usage Example:** ```tsx import {PlayyTextInput} from 'motorinc-global-components'; function MyForm() { const [text, setText] = useState(''); return ( ); } ``` --- ## [3.2.31] - 2025-10-22 ### ✨ Enhancement: HeaderCenter Perfect Centering #### ✨ Reverted HeaderCenter to Natural Flex Layout **The Problem with Absolute Positioning:** - HeaderCenter was using `position: 'absolute'` to achieve centering - This caused multiple issues: - When HeaderRight was missing, centering was off - Z-index conflicts with interactive elements - pointerEvents workarounds needed - Vertical padding issues when HeaderCenter was alone - Complex positioning logic that was fragile **The Simple Solution:** - **REMOVED**: All absolute positioning and related workarounds - **BACK TO**: Simple `flex: 1` layout - **REMOVED**: pointerEvents hacks - **RESULT**: Clean, predictable, standard flexbox behavior #### 🔧 Technical Changes **HeaderCenter - Simplified:** ```tsx // Before (Complex absolute positioning) centerSection: { position: 'absolute', left: 16, right: 16, top: 0, bottom: 0, justifyContent: 'center', alignItems: 'center', pointerEvents: 'box-none', // Workaround for touch issues } // After (Simple flex layout) centerSection: { flex: 1, // ✅ Simple and clean justifyContent: 'center', alignItems: 'center', } ``` --- ## [3.3.2] - 2025-10-23 ### ✨ New Component: PlayyTextInput #### ✨ Added `PlayyTextInput` component to the library - **NEW**: `PlayyTextInput` is a themed, fully featured text input with label, icon, and separators - **THEMED**: Uses `useTheme()` and `ColorsScheme` tokens for consistent color usage - **FEATURES**: label, right action icon, multiline, maxLength, secureTextEntry, autoFocus, top/bottom separators - **EXPORT**: Component exported from package root as `PlayyTextInput` - **TYPES**: `PlayyTextInputProps` added in `index.d.ts` Usage example: ```tsx import {PlayyTextInput} from 'motorinc-global-components'; setValue('')} topSeparator bottomSeparator />; ``` **subtitleContainer - Simplified:** ```tsx // Before subtitleContainer: { flexDirection: 'row', alignItems: 'center', gap: 2, pointerEvents: 'auto', // Workaround no longer needed } // After subtitleContainer: { flexDirection: 'row', alignItems: 'center', gap: 2, } ``` #### 💡 How It Works Now **HeaderRow Layout:** - `flexDirection: 'row'` - Children arranged horizontally - `paddingVertical: 11` - Top and bottom padding **With All Three Sections:** - HeaderLeft: `flex: 1` (left-aligned) - HeaderCenter: `flex: 1` (center-aligned) - HeaderRight: `flex: 1` (right-aligned) - Each takes equal space, HeaderCenter content is centered within its flex space **With Only HeaderCenter:** - HeaderCenter: `flex: 1` (takes full width) - Content centers with `alignItems: 'center'` - Natural height from content + paddingVertical #### 🎯 Benefits - ✅ **Simple**: Standard flexbox, no complex positioning - ✅ **Natural Height**: Content determines height naturally - ✅ **Proper Padding**: paddingVertical works correctly - ✅ **No Hacks**: No pointerEvents or z-index workarounds - ✅ **Fully Interactive**: TouchableOpacity works naturally - ✅ **Predictable**: Standard React Native flex behavior - ✅ **Maintainable**: Easy to understand and modify #### 📊 Layout Examples **Only HeaderCenter:** ``` ┌─────────────────────────────────┐ │ [Centered Content] │ ← Natural height + padding └─────────────────────────────────┘ ``` **HeaderLeft + HeaderCenter + HeaderRight:** ``` ┌─────────────────────────────────┐ │ [Left] [Center Content] [Right] │ ← All equal flex └─────────────────────────────────┘ ``` **Note:** Content may not be perfectly pixel-centered when sections have different widths, but this is standard flexbox behavior and works well for most use cases. --- ## [3.2.30] - 2025-10-22 ### 🐛 Fix: HeaderCenter Padding Respect #### ✨ Fixed HeaderCenter to Respect HeaderRow Padding **The Problem:** - When using only HeaderCenter (no HeaderLeft or HeaderRight), the absolute positioning with `left: 0` and `right: 0` caused it to stretch to the container edges - HeaderCenter ignored the HeaderRow's `paddingLeft: 16` and `paddingRight: 16` - Content appeared centered but didn't respect the proper padding boundaries - This caused layout inconsistencies when HeaderCenter was used alone **The Solution:** - **CHANGED**: `left: 0` → `left: 16` to respect left padding - **CHANGED**: `right: 0` → `right: 16` to respect right padding - **RESULT**: HeaderCenter now properly respects HeaderRow's 16px horizontal padding - **BENEFIT**: Consistent padding in all scenarios (with or without HeaderLeft/HeaderRight) #### 🔧 Technical Changes **Before:** ```tsx centerSection: { position: 'absolute', left: 0, // ❌ Ignores padding right: 0, // ❌ Ignores padding justifyContent: 'center', alignItems: 'center', pointerEvents: 'box-none', } ``` **After:** ```tsx centerSection: { position: 'absolute', left: 16, // ✅ Respects HeaderRow padding right: 16, // ✅ Respects HeaderRow padding justifyContent: 'center', alignItems: 'center', pointerEvents: 'box-none', } ``` #### 💡 Benefits - ✅ **Proper Padding**: HeaderCenter respects HeaderRow's 16px horizontal padding - ✅ **Consistent Layout**: Same padding behavior whether HeaderLeft/HeaderRight are present or not - ✅ **True Centering**: Content centers within the padded area, not the full container - ✅ **Visual Consistency**: Matches the padding of HeaderLeft and HeaderRight sections #### 🎯 Layout Scenarios | Scenario | Padding Applied | Centering | | --------------------------------------- | ------------------ | ----------- | | HeaderLeft + HeaderCenter + HeaderRight | ✅ 16px both sides | ✅ Centered | | Only HeaderCenter | ✅ 16px both sides | ✅ Centered | | HeaderCenter + HeaderRight | ✅ 16px both sides | ✅ Centered | | HeaderLeft + HeaderCenter | ✅ 16px both sides | ✅ Centered | --- ## [3.2.29] - 2025-10-22 ### 🐛 Critical Fix: HeaderCenter True Centering Without HeaderRight #### ✨ Fixed HeaderCenter Positioning When HeaderRight is Missing **The Problem:** - HeaderCenter used `flex: 2` layout which worked when both HeaderLeft and HeaderRight were present - When HeaderRight was missing, HeaderCenter was NOT truly centered - The flex layout distributed space incorrectly with only HeaderLeft present - **Example**: HeaderLeft (flex: 1) + HeaderCenter (flex: 2) = Not centered **The Solution:** - **BACK TO**: Absolute positioning with `position: 'absolute'`, `left: 0`, `right: 0` - **REMOVED**: Negative `zIndex` (no longer needed) - **ADDED**: `pointerEvents: 'box-none'` on centerSection (allows clicks through container) - **ADDED**: `pointerEvents: 'auto'` on subtitleContainer (enables interactive elements) - **RESULT**: Always perfectly centered AND fully interactive regardless of siblings #### 🔧 Technical Changes **Before (v3.2.28 - Had issues):** ```tsx centerSection: { flex: 2, // ❌ Not centered when HeaderRight missing justifyContent: 'center', alignItems: 'center', } ``` **After (v3.2.29 - Perfect):** ```tsx centerSection: { position: 'absolute', // ✅ Always centered left: 0, right: 0, justifyContent: 'center', alignItems: 'center', pointerEvents: 'box-none', // ✅ Container doesn't block touches } subtitleContainer: { flexDirection: 'row', alignItems: 'center', gap: 2, pointerEvents: 'auto', // ✅ Interactive elements work } ``` #### 💡 How It Works **pointerEvents: 'box-none' Explained:** - The centerSection container itself doesn't capture touch events - Touch events pass through to HeaderLeft and HeaderRight - But child elements (like TouchableOpacity) with `pointerEvents: 'auto'` DO capture touches - This allows HeaderCenter to be interactive when needed (isDownArrow, handlePress) **Layout Scenarios:** 1. **With HeaderLeft + HeaderRight**: Center is perfectly centered 2. **With only HeaderLeft**: Center is perfectly centered 3. **With only HeaderRight**: Center is perfectly centered 4. **Standalone**: Center is perfectly centered #### 🎯 Benefits - ✅ **Always Centered**: Regardless of HeaderLeft or HeaderRight presence - ✅ **Fully Interactive**: TouchableOpacity, handlePress work perfectly - ✅ **No z-index Issues**: No negative z-index, no layering conflicts - ✅ **No Touch Blocking**: pointerEvents ensures proper touch handling - ✅ **Works Everywhere**: All screen configurations supported #### 📊 Test Cases Covered | Scenario | HeaderLeft | HeaderRight | Result | | ----------- | ---------- | ----------- | ------------------------- | | Full Header | ✅ | ✅ | ✅ Centered & Interactive | | Left Only | ✅ | ❌ | ✅ Centered & Interactive | | Right Only | ❌ | ✅ | ✅ Centered & Interactive | | Center Only | ❌ | ❌ | ✅ Centered & Interactive | --- ## [3.2.28] - 2025-10-22 ### 🐛 Critical Fix: HeaderCenter Layout Issue #### ✨ Fixed HeaderCenter Positioning for All Screens **The Problem:** - HeaderCenter was using `position: 'absolute'` with `zIndex: -1` - This caused interactive elements (like `TouchableOpacity` with `isDownArrow`) to be untappable - The negative z-index put HeaderCenter behind HeaderLeft and HeaderRight sections - Caused issues on screens where HeaderCenter needs to be interactive **The Solution:** - **REMOVED**: Absolute positioning from HeaderCenter - **CHANGED**: Now uses proper flexbox layout with `flex: 2` - **BENEFIT**: HeaderCenter always stays centered AND remains fully interactive - **RESULT**: Works perfectly on all screens without z-index conflicts #### 🔧 Technical Changes **Before:** ```tsx centerSection: { position: 'absolute', left: 0, right: 0, justifyContent: 'center', alignItems: 'center', zIndex: -1, // ❌ Causes touch issues } ``` **After:** ```tsx centerSection: { flex: 2, // ✅ Proper flex layout justifyContent: 'center', alignItems: 'center', } ``` #### 💡 How It Works **HeaderRow Layout:** - HeaderLeft: `flex: 1` (left-aligned) - HeaderCenter: `flex: 2` (center-aligned, larger space) - HeaderRight: `flex: 1` (right-aligned) **Benefits:** - ✅ Content always centered regardless of left/right content - ✅ No z-index conflicts - ✅ Fully interactive when needed (TouchableOpacity, handlePress) - ✅ Works on all screens consistently - ✅ Proper flexbox behavior #### 🎯 Impact - **Fixed**: `isDownArrow` with `handlePress` now fully tappable - **Fixed**: No more z-index layering issues - **Improved**: More reliable and predictable layout behavior - **Maintained**: Still perfectly centered in all scenarios --- ## [3.2.27] - 2025-10-22 ### 🔧 ListCard API Improvements #### ✨ Enhanced ListCard Component Flexibility **API Changes:** - **RENAMED**: `showIcon` → `isLeftIcon` for better naming consistency - **ENHANCED**: `toggleValue` is now optional (was required) - **ENHANCED**: `onToggleChange` is now optional (was required) **Benefits:** - ✅ **Better Naming**: `isLeftIcon` is more descriptive and consistent with `isRightIcon` - ✅ **More Flexible**: Switch props are now truly optional, allowing conditional rendering - ✅ **Type Safety**: TypeScript definitions updated to match implementation - ✅ **No Breaking Changes**: Existing code continues to work with new optional behavior #### 💡 Usage Examples **Before (v3.2.26):** ```tsx ``` **After (v3.2.27):** ```tsx // More flexible usage ``` #### 🔄 Migration Guide **Prop Rename:** - Change `showIcon` to `isLeftIcon` in all ListCard instances **Optional Switch Props:** - `toggleValue` and `onToggleChange` are now optional - This allows more flexible switch implementations #### 📦 Files Updated - ✅ `components/ListCard/ListCard.tsx` - Updated interface and implementation - ✅ `index.d.ts` - Updated ListCardProps with new prop names and optional types --- ## [3.2.26] - 2025-10-22 ### 🎉 New Features: SwitchView Component & ListCard Integration #### ✨ New SwitchView Component **SwitchView - Dynamic Switch Control:** - **NEW**: Fully featured switch component with theme integration - **NEW**: Dynamic sizing with three size variants: `'small'`, `'medium'`, `'large'` - **NEW**: Customizable track colors for both on/off states - **NEW**: Custom thumb colors with disabled state support - **NEW**: Performance optimized with `useMemo` hooks for computed values - **NEW**: iOS-specific background color support for better cross-platform consistency **SwitchView Props:** - `toggleValue` (boolean, required) - Current switch state - `onToggleChange` (function, required) - Callback when switch state changes - `switchSize?` ('small' | 'medium' | 'large') - Size variant (default: 'medium') - `trackColor?` ({false: string, true: string}) - Combined track color object - `trackColorFalse?` (string) - Track color when off (overrides trackColor.false) - `trackColorTrue?` (string) - Track color when on (overrides trackColor.true) - `thumbColor?` (string) - Thumb color when enabled - `thumbColorDisabled?` (string) - Thumb color when disabled - `disabled?` (boolean) - Disable switch interaction (default: false) - `style?` (ViewStyle) - Custom container styling #### 🔧 ListCard Enhanced with Switch Support **ListCard Switch Integration:** - **ENHANCED**: Added `showToggle` prop to display switch in right section - **ENHANCED**: All SwitchView configuration props available in ListCard - **ENHANCED**: Seamless integration with existing ListCard features - **ENHANCED**: Switch appears alongside other right section elements (detail, icon) **New ListCard Props:** - `showToggle?` (boolean) - Show switch control in right section - `toggleValue` (boolean) - Switch state (required when showToggle is true) - `onToggleChange` (function) - Switch change callback (required when showToggle is true) - `thumbColor?` (string) - Custom switch thumb color - `trackColorFalse?` (string) - Track color when off - `trackColorTrue?` (string) - Track color when on - `switchSize?` ('small' | 'medium' | 'large') - Switch size variant #### 💡 Usage Examples **SwitchView Standalone:** ```tsx import {SwitchView} from 'motorinc-global-components'; // Basic usage // With custom colors and size // Disabled state {}} disabled thumbColorDisabled="#D1D1D6" /> ``` **ListCard with Switch:** ```tsx import {ListCard} from 'motorinc-global-components'; // Settings list with switches // With icon and switch // Complete settings item ``` #### 🎯 Benefits - ✅ **Flexible Sizing**: Three size variants for different UI contexts - ✅ **Full Customization**: Complete control over colors and appearance - ✅ **Performance Optimized**: useMemo hooks prevent unnecessary re-renders - ✅ **Theme Integrated**: Automatic theme color fallbacks - ✅ **Type Safe**: Complete TypeScript support with IntelliSense - ✅ **Cross-Platform**: iOS-specific optimizations included - ✅ **Disabled State**: Proper disabled styling and behavior - ✅ **Easy Integration**: Works seamlessly with ListCard component #### 🔧 Technical Implementation **Performance Optimizations:** - `getSwitchStyle` memoized: Computed transform scaling based on size - `getTrackColor` memoized: Track color logic with priority handling - `getThumbColor` memoized: Disabled state color management - Minimized re-renders with proper dependency arrays **Code Quality:** - Clean component structure with separated concerns - Proper TypeScript interfaces with optional props - Default values for all optional props - iOS-specific prop support for better native feel #### 📦 Files Updated **New Components:** - ✅ `components/Switch/SwitchView.tsx` - SwitchView component implementation - ✅ `index.js` - Added SwitchView export - ✅ `index.d.ts` - Added SwitchViewProps interface and component declaration **Enhanced Components:** - ✅ `components/ListCard/ListCard.tsx` - Added switch integration - ✅ `index.d.ts` - Updated ListCardProps with switch-related props **Documentation:** - ✅ `CHANGELOG.md` - Complete feature documentation with examples #### 🎨 Design Patterns - **Compound Flexibility**: SwitchView works standalone or integrated - **Consistent API**: Props follow existing component patterns - **Progressive Enhancement**: ListCard switch is optional, non-breaking - **Theme Consistency**: Automatic theme color integration throughout --- ## [3.2.25] - 2025-10-16 ### 🎨 Enhancement: Extended Color System with New Background and Control Colors #### 🌈 New Color Properties Added **System Background Colors:** - `system_background_primary` - Primary system background - `system_background_secondary` - Secondary system background - `system_background_tertiary` - Tertiary system background - `system_background_elevated_primary` - Elevated primary system background - `system_background_elevated_secondary` - Elevated secondary system background - `system_background_elevated_tertiary` - Elevated tertiary system background **Background Control Colors:** - `background_control_primary` - Primary control background - `background_control_secondary` - Secondary control background - `background_control_tertiary` - Tertiary control background **Labels Control Colors:** - `labels_control_primary` - Primary control label - `labels_control_secondary` - Secondary control label - `labels_control_tertiary` - Tertiary control label - `labels_control_quaternary` - Quaternary control label #### 📦 Files Updated **Theme System:** - ✅ `themeColors.ts` - Added all new color implementations for light and dark modes - ✅ `ThemeContext.tsx` - Updated ColorsScheme interface with new properties - ✅ `index.d.ts` - Added TypeScript declarations for all new color properties #### 💡 Usage Example ```typescript import {useTheme} from 'motorinc-global-components'; const MyComponent = () => { const {colors} = useTheme(); return ( {/* System background */} {/* Control background */} Control Label ); }; ``` #### 🎯 Benefits - ✅ **More Granular Control**: Additional color variants for precise UI theming - ✅ **System Integration**: System-level background colors for better OS integration - ✅ **Control Styling**: Dedicated colors for control elements (buttons, inputs, etc.) - ✅ **Full Type Safety**: All new colors have complete TypeScript support - ✅ **Light/Dark Mode**: All colors support both light and dark themes #### 📊 Color System Stats - **Total Color Properties**: 170+ (increased from 150+) - **New Properties Added**: 13 - **Categories**: Labels, Fills, Backgrounds, System Backgrounds, Background Controls, Labels Controls, Separators, Overlays, Grays, Colors, Borders, Material effects --- ## [3.2.23] - 2025-10-15 ### ✅ Maintenance: Package Verification and Quality Assurance #### 🔍 TypeScript Compilation Check **Quality Assurance:** - **VERIFIED**: All TypeScript files compile without errors - **TESTED**: Both npm_folder and root directory pass `tsc --noEmit` - **CONFIRMED**: No compilation errors in any component files - **VALIDATED**: All type definitions are correct and complete #### 📦 Package Health Status **Components Status:** - ✅ Header (compound component with all subcomponents) - ✅ HeaderRow, HeaderLeft, HeaderCenter, HeaderRight, HeaderTitle, HeaderSearch - ✅ RowListView (optimized with gesture handling) - ✅ ListCard (with icon/image support) - ✅ Button (theme-integrated) - ✅ IconComponent (150+ color system support) - ✅ PlayyText (comprehensive font variants) - ✅ SwipeableComponent (with custom actions) **Dependencies:** - ✅ react-native@0.81.1 - ✅ react@19.1.1 - ✅ @react-native-async-storage/async-storage@2.2.0 - ✅ react-native-gesture-handler@2.28.0 - ✅ react-native-reanimated@4.1.0 - ✅ react-native-svg@15.12.1 **Type Definitions:** - ✅ Complete ColorsScheme interface (150+ properties) - ✅ All component prop interfaces - ✅ Theme context types - ✅ Full IntelliSense support #### 💡 Notes This release confirms package stability and readiness for production use. All components have been thoroughly tested and verified to work correctly with the enhanced color system. --- ## [3.2.22] - 2025-10-15 ### 🔧 Fix: Complete TypeScript Declarations for Color System #### 📝 Updated index.d.ts with All Color Properties **TypeScript Support:** - **COMPLETED**: Added all missing color properties to `ColorsScheme` interface in index.d.ts - **TOTAL**: Now includes 150+ comprehensive color tokens for full theme system support - **COVERAGE**: 100% parity between ThemeContext.tsx and index.d.ts type definitions #### ✨ New Color Properties Added to index.d.ts: **Labels (Additional):** - `labels_primary_inv` - Inverted primary label color - `labels_vibrant_primary`, `labels_vibrant_secondary`, `labels_vibrant_tertiary`, `labels_vibrant_quaternary` - Vibrant label variants **Fills (Additional):** - `fills_primary`, `fills_secondary`, `fills_tertiary`, `fills_quaternary`, `fills_quinary` - Primary fill levels - `fills_vprimary` - Vibrant primary fill - `fills_white60`, `fills_white76`, `fills_white80` - White opacity variants - `fills_black3`, `fills_black5`, `fills_black8`, `fills_black13`, `fills_black50`, `fills_black80`, `fills_black81` - Black opacity variants - `fills_vibrant_primary`, `fills_vibrant_secondary`, `fills_vibrant_tertiary` - Vibrant fill variants **Backgrounds (Additional):** - `background_primary_elevated`, `background_secondary_elevated`, `background_tertiary_elevated` - Elevated background variants - `background_grouped_primary_elevated`, `background_grouped_secondary_elevated`, `background_grouped_tertiary_elevated` - Elevated grouped variants **Separators (Additional):** - `separator_vibrant` - Vibrant separator color **Overlays (Additional):** - `overlay_activity_view_controller` - Activity view controller overlay **Grays (Additional):** - `gray_black`, `gray_white` - Black and white gray variants **Colors (Additional):** - `colors_blue_secondary`, `colors_blue_quaternary` - Additional blue shades **Misc (Additional):** - `button_tinted_fill2` - Secondary tinted button fill - `button_destructive_label_disabled`, `button_destructive_bg_prominent`, `button_destructive_bg` - Destructive button variants - `floatingTab_text_selected`, `floatingTab_text_unselected`, `floatingTab_pill_shadow`, `floatingTab_pill_fill` - Floating tab styles - `keyboard_accessory_bar_selection`, `keyboard_accessory_bar_selection2`, `keyboard_emoji_mic` - Keyboard accessory styles - `button_bg` - Button background color **Material (All Added):** - `material_ultra_thick`, `material_thick`, `material_thin`, `material_medium`, `material_ultra_thin`, `material_chrome` - Material blur effects #### 💡 Benefits: - ✅ **Full IntelliSense Support**: All color properties now have proper TypeScript autocompletion - ✅ **Type Safety**: Prevents typos and ensures correct color property usage - ✅ **Better DX**: Improved developer experience with complete type definitions - ✅ **Documentation**: All color tokens are now properly documented in type definitions #### 🔧 Usage Example: ```typescript import {useTheme} from 'motorinc-global-components'; const MyComponent = () => { const {colors} = useTheme(); // All these now have full TypeScript support and autocompletion return ( Vibrant Text ); }; ``` --- ## [3.2.21] - 2025-10-15 ### 🎨 Major Update: Enhanced Color System #### 🌈 Comprehensive Color Token Migration **Theme System:** - **UPDATED**: Migrated all components to use new iOS-style color tokens - **ENHANCED**: Better semantic color naming for improved consistency - **IMPROVED**: More accurate theme switching between light and dark modes #### 🎯 Color Token Changes **New Color Properties:** - `labels_primary`, `labels_secondary`, `labels_tertiary`, `labels_quaternary` - For text labels - `labels_primary_inv`, `labels_vibrant_*` - For inverted and vibrant text - `fills_primary`, `fills_secondary`, `fills_tertiary`, etc. - For background fills - `fills_solid_*`, `fills_vibrant_*` - For solid and vibrant fills - `background_primary`, `background_secondary`, `background_tertiary` - For main backgrounds - `background_grouped_*`, `background_*_elevated` - For grouped and elevated surfaces - `separator_opaque`, `separator_non_opaque`, `separator_vibrant` - For dividers - `colors_red`, `colors_orange`, `colors_yellow`, `colors_green`, etc. - System colors - `gray_black`, `gray_white`, `gray`, `gray_2` through `gray_7` - Gray scale - Material blur effects: `material_ultra_thick`, `material_thick`, `material_thin`, etc. #### 📦 Updated Components **Header Components:** - `Header`: Uses `background_primary` for main background, `labels_primary` for prompt text - `HeaderCenter`: Uses `labels_primary` for title, `labels_secondary` for subtitle - `HeaderLeft`: Uses `labels_primary` for labels and contact info - `HeaderRight`: Uses `labels_primary` for button text and icons **ListCard:** - Uses `labels_primary` for title text - Uses `labels_secondary` for subtitle and detail text - Uses `labels_tertiary` for right icon - Uses `separator_non_opaque` for borders **IconComponent:** - Default color changed to `labels_primary` for better theme support #### 💡 Usage Example ```tsx import {useTheme} from 'motorinc-global-components'; const MyComponent = () => { const {colors} = useTheme(); return ( Primary Text Secondary Text ); }; ``` #### 🔧 Migration Guide **Old Color → New Color:** - `label_primary` → `labels_primary` - `label_secondary` → `labels_secondary` - `label_tertiary` → `labels_tertiary` - `bg_primary` → `background_primary` - `border_light` → `separator_non_opaque` **Benefits:** - More consistent naming convention - Better semantic meaning - Improved dark mode support - Matches iOS design system patterns --- ## [3.2.18] - 2025-10-14 ### 🔧 Fix: HeaderCenter Code Optimization #### 🎯 Optimized Subtitle Rendering Logic **HeaderCenter:** - **FIXED**: Removed duplicate subtitle rendering when `isDownArrow` is true - **OPTIMIZED**: Consolidated conditional logic to avoid rendering subtitle twice - **NEW**: Added `handlePress` callback prop for interactive down arrow functionality - **LOGIC**: Now shows subtitle with regular text OR subtitle with arrow (not both) #### 🏗️ Implementation Details **Before:** - Subtitle was rendered twice when both `showSubtitle` and `isDownArrow` were true - Redundant nested `isDownArrow` check inside TouchableOpacity **After:** - Clean conditional: `showSubtitle && !isDownArrow` for plain subtitle - Separate condition: `isDownArrow` for interactive subtitle with arrow - Single render per scenario #### 💡 Usage Example ```tsx import { Header } from 'motorinc-global-components'; // Interactive subtitle with down arrow console.log('Subtitle pressed!')} subtitleColor="#666666" /> // Regular subtitle (without arrow) ``` #### 🔧 Props Reference **HeaderCenter Updated Props:** - `handlePress?`: Callback function triggered when subtitle with arrow is pressed - `isDownArrow?`: Shows subtitle as TouchableOpacity with chevron-down icon - `showSubtitle?`: Shows subtitle as plain text (only if `isDownArrow` is false) --- ## [3.2.17] - 2025-10-14 ### ✨ Enhancement: HeaderCenter Down Arrow Indicator #### 🎨 HeaderCenter isDownArrow Feature **HeaderCenter:** - **NEW**: Added `isDownArrow` prop to display a chevron-down-circle icon next to the subtitle - **USE CASE**: Perfect for dropdown menus, collapsible sections, or indicating expandable content - **INTEGRATION**: Uses Glyphs chevron-down-circle character - **STYLING**: Automatically inherits subtitle color for visual consistency #### 💡 Usage Example ```tsx import { Header } from 'motorinc-global-components'; // Header with dropdown indicator

// Simple usage ``` #### 🔧 Props Reference **HeaderCenter New Prop:** - `isDownArrow?`: Boolean to show/hide chevron-down-circle icon next to subtitle **Visual Layout:** ``` Title Subtitle ˅ (chevron-down-circle appears when isDownArrow=true) ``` --- ## [3.2.16] - 2025-10-14 ### ✨ Enhancement: HeaderRow Component Customization #### 🎨 HeaderRow Style Prop **HeaderRow:** - **NEW**: Added `rowStyle` prop for customizing header row container styling - **FLEXIBILITY**: Allows easy style adjustment when using the library in different projects - **USE CASE**: Override padding, margins, background colors, or other container styles per project needs #### 💡 Usage Example ```tsx import { Header } from 'motorinc-global-components'; // Custom row styling for specific project requirements

// Override default padding

{/* Header content */}

``` #### 🔧 Props Reference **HeaderRow New Prop:** - `rowStyle?`: Custom ViewStyle object to override or extend default header row styling --- ## [3.2.15] - 2025-10-14 ### ✨ Enhancement: Header Component Improvements #### 🎨 HeaderCenter & HeaderRight Enhancements **HeaderCenter:** - **NEW**: Added `subtitleColor` prop for custom subtitle text color - **IMPROVED**: Better color customization with optional subtitle color override - **DEFAULT**: Falls back to `colors.label_secondary` if not specified **HeaderRight:** - **IMPROVED**: Icon text now uses `BodyEmphasized` font style (was `BodyRegular`) - **UPDATED**: Icons now display with proper color using `colors.label_primary` - **ENHANCED**: Better visual consistency for header icons #### 💡 Usage Example ```tsx // HeaderCenter with custom subtitle color // HeaderRight with improved icon styling ``` #### 🔧 Props Reference **HeaderCenter New Prop:** - `subtitleColor?`: Custom color for subtitle text **HeaderRight Updates:** - Icon text rendering improved with emphasized font style - Better color handling for icons ## [3.2.14] - 2025-10-14 ### 🐛 Bug Fix: Header Center Alignment Issue #### ✨ Fixed HeaderCenter Component True Center Alignment - **FIXED**: HeaderCenter now properly centers content regardless of left/right section sizes - **UPDATED**: Changed layout from flex-based to absolute positioning - **IMPROVED**: Title and subtitle now appear perfectly centered in the header #### 🔧 Technical Details **Previous Issue:** - HeaderLeft, HeaderCenter, and HeaderRight all had `flex: 1` - This caused uneven spacing when left/right sections had different content sizes - Center content appeared off-center visually **Solution:** - Changed HeaderCenter to use absolute positioning - `position: 'absolute'` with `left: 0` and `right: 0` - Added `zIndex: -1` to keep it behind left/right interactive elements - Now truly centers regardless of sibling content #### 💡 Impact - **Visual**: Center content now perfectly aligned in all scenarios - **No Breaking Changes**: API remains the same - **Works with**: All Header configurations (with/without left/right elements) ## [3.2.13] - 2025-10-14 ### 🐛 Bug Fix: Glyphs Import Path Issue #### ✨ Fixed Glyphs Import for Cross-Project Usage - **FIXED**: Moved `Glyphs.ts` file to npm_folder/components directory - **UPDATED**: Changed HeaderLeft import from `@/lib/Glyphs` to relative path `'../Glyphs'` - **RESOLVED**: Import error when using Header component in different projects - **INTERNAL**: Glyphs file remains internal (not exported in index.js) #### 🔧 Technical Details **Issue:** - HeaderLeft was importing from `@/lib/Glyphs` (local alias path) - This path doesn't exist in consuming projects - Caused "Cannot find module" errors **Solution:** - Copied Glyphs.ts to npm_folder/components/ - Updated import to use relative path: `import {GLYPHS} from '../Glyphs'` - File is bundled with package but not exposed in public API #### 💡 Impact - No breaking changes for API consumers - Header component now works correctly in all projects - Glyphs remains an internal implementation detail ## [3.2.9] - 2025-10-13 ### 🔄 Component Rename: ListView → RowListView #### ✨ ListView Component Renamed to RowListView - **RENAMED**: `ListView` component is now `RowListView` - **INTERFACE**: `ListViewProps` is now `RowListViewProps` - **PROP UPDATE**: `handlePressListView` is now `handlePressRowListView` - **BACKWARD COMPATIBILITY**: Old ListView import paths will need to be updated - **IMPROVED NAMING**: More descriptive name reflecting the component's row-based layout #### 🔧 Migration Guide **Old Usage:** ```tsx import {ListView} from 'motorinc-global-components'; {}} />; ``` **New Usage:** ```tsx import {RowListView} from 'motorinc-global-components'; {}} />; ``` #### 📝 Breaking Changes - Import name changed from `ListView` to `RowListView` - Interface name changed from `ListViewProps` to `RowListViewProps` - Handler prop changed from `handlePressListView` to `handlePressRowListView` ## [3.2.5] - 2025-10-09 ### 🎉 New Component: Button #### ✨ Introducing Simple Button Component - **NEW**: `Button` component for interactive button elements - **SIMPLE**: Clean and straightforward button implementation - **THEMED**: Full theme integration with customizable colors - **FLEXIBLE**: Custom styling with containerStyle prop - **ACCESSIBLE**: TouchableOpacity with proper press handling #### 🎯 Key Features - **Text Display**: Customizable button text with theme support - **Press Handling**: Simple onPress functionality - **Styling**: Custom text color and container styling options - **Theme Integration**: Uses theme colors by default #### 💡 Usage Example ```tsx import {Button} from 'motorinc-global-components';