Skip to content

Commit 3c88d4f

Browse files
ucswiftucswift
authored
Merge pull request #62 from Resgrid/develop
CU-868ex18rd Working on calendar and bug fixes
2 parents 8b1c143 + d4d6220 commit 3c88d4f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+5319
-907
lines changed

‎.github/dependabot.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,6 @@ version: 2
77
updates:
88
- package-ecosystem: "npm" # See documentation for possible values
99
directory: "/" # Location of package manifests
10+
open-pull-requests-limit: 0
1011
schedule:
1112
interval: "weekly"

‎.github/workflows/react-native-cicd.yml‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,13 @@ jobs:
125125
node-version: '24'
126126
cache: 'yarn'
127127

128-
- name: Setup Expo
128+
- name: 🔎 Verify Xcode toolchain
129+
if: matrix.platform == 'ios'
130+
run: |
131+
xcodebuild -version
132+
swift --version
133+
134+
- name: 🏗 Setup Expo
129135
uses: expo/expo-github-action@v8
130136
with:
131137
expo-version: latest
@@ -152,10 +158,18 @@ jobs:
152158
153159
- name: 📋 Update package.json Versions
154160
run: |
155-
# Check if jq is installed, if not install it
161+
# Ensure jq is available on both Linux and macOS
156162
if ! command -v jq &> /dev/null; then
157163
echo "Installing jq..."
158-
sudo apt-get update && sudo apt-get install -y jq
164+
if [ "${RUNNER_OS}" = "Linux" ]; then
165+
sudo apt-get update && sudo apt-get install -y jq
166+
elif [ "${RUNNER_OS}" = "macOS" ]; then
167+
brew update || true
168+
brew install jq
169+
else
170+
echo "Unsupported runner OS: ${RUNNER_OS}" >&2
171+
exit 1
172+
fi
159173
fi
160174
161175
androidVersionCode=$((5080345 + ${{ github.run_number }}))

‎docs/calendar-card-webview-refactoring.md‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
# Calendar Card WebView Refactoring
2+
3+
## Overview
4+
This document describes the refactoring of the `CalendarCard` component to use WebView for rendering the `item.Description` field, ensuring consistent styling with other WebView instances throughout the app.
5+
6+
## Changes Made
7+
8+
### 1. Added WebView Utility (`src/utils/webview-html.ts`)
9+
Created a reusable utility to generate consistent HTML content for WebView components across the app:
10+
11+
- **`generateWebViewHtml`**: Generates HTML with proper theming, responsive design, and security considerations
12+
- **`defaultWebViewProps`**: Provides secure default props for WebView components
13+
14+
**Features:**
15+
- Dark/light theme support
16+
- Responsive design with proper viewport meta tags
17+
- Security-first approach (disabled JavaScript, restricted origins)
18+
- Consistent typography and styling
19+
- Support for various HTML elements (tables, links, code blocks, etc.)
20+
21+
### 2. Refactored CalendarCard Component
22+
Updated `src/components/calendar/calendar-card.tsx` to use WebView for description rendering:
23+
24+
**Changes:**
25+
- Added WebView import and nativewind useColorScheme hook
26+
- Replaced Text component with WebView for description display
27+
- Added proper styling container (Box with rounded background)
28+
- Integrated with the WebView utility for consistent HTML generation
29+
- Maintained compact height (60px) appropriate for card preview
30+
31+
**Security Features:**
32+
- Disabled JavaScript execution
33+
- Restricted to local content only (`about:` origins)
34+
- Proper content sanitization through HTML generation utility
35+
36+
### 3. Updated Tests
37+
Enhanced `src/components/calendar/__tests__/calendar-card.test.tsx`:
38+
39+
- Added WebView and utility mocks
40+
- Updated test assertions to check for WebView component instead of direct text
41+
- Added specific tests for WebView rendering scenarios
42+
- Ensured all existing functionality continues to work
43+
44+
### 4. Added Utility Tests
45+
Created `src/utils/__tests__/webview-html.test.ts`:
46+
47+
- Comprehensive testing of HTML generation utility
48+
- Theme switching verification
49+
- Custom styling options testing
50+
- Security props validation
51+
52+
## Benefits
53+
54+
### 1. Consistent Styling
55+
- All WebView instances now use the same HTML template and styling
56+
- Proper dark/light mode support across all WebViews
57+
- Consistent typography and responsive behavior
58+
59+
### 2. Security
60+
- Standardized security settings prevent potential XSS vulnerabilities
61+
- Disabled JavaScript execution unless explicitly needed
62+
- Restricted origin whitelist for content loading
63+
64+
### 3. Maintainability
65+
- Centralized WebView configuration and styling
66+
- Easy to update styling across all WebView instances
67+
- Consistent approach for future WebView implementations
68+
69+
### 4. Better HTML Rendering
70+
- Proper rendering of rich HTML content in calendar descriptions
71+
- Support for formatting, links, lists, tables, and other HTML elements
72+
- Better text wrapping and responsive behavior
73+
74+
## Usage Examples
75+
76+
### Basic WebView Implementation
77+
```tsx
78+
import WebView from 'react-native-webview';
79+
import { defaultWebViewProps, generateWebViewHtml } from '@/utils/webview-html';
80+
81+
<WebView
82+
{...defaultWebViewProps}
83+
source={{
84+
html: generateWebViewHtml({
85+
content: htmlContent,
86+
isDarkMode: colorScheme === 'dark',
87+
}),
88+
}}
89+
/>
90+
```
91+
92+
### Custom Styling
93+
```tsx
94+
<WebView
95+
{...defaultWebViewProps}
96+
source={{
97+
html: generateWebViewHtml({
98+
content: htmlContent,
99+
isDarkMode: colorScheme === 'dark',
100+
fontSize: 16,
101+
lineHeight: 1.6,
102+
padding: 12,
103+
}),
104+
}}
105+
/>
106+
```
107+
108+
## Testing Strategy
109+
- Mocked WebView component for unit tests
110+
- Comprehensive utility function testing
111+
- Integration testing with existing calendar card functionality
112+
- Security props validation
113+
114+
## Compatibility
115+
- Works with both iOS and Android platforms
116+
- Consistent behavior across different screen sizes
117+
- Proper dark/light mode support
118+
- Maintains existing calendar card functionality
119+
120+
## Future Considerations
121+
- Could be extended to support additional HTML features if needed
122+
- Security settings can be adjusted per component if required
123+
- Styling can be customized through utility parameters
124+
- Easy to add analytics or performance monitoring if needed
125+
126+
## Migration Guide
127+
For other components using WebView:
128+
129+
1. Import the utility: `import { defaultWebViewProps, generateWebViewHtml } from '@/utils/webview-html';`
130+
2. Replace custom HTML generation with utility function
131+
3. Use `defaultWebViewProps` spread for consistent security settings
132+
4. Update tests to mock the utility functions
133+
5. Ensure proper theme handling with `useColorScheme`

‎docs/calendar-item-details-personnel-loading-enhancement.md‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
# Calendar Item Details Personnel Loading Enhancement
2+
3+
## Overview
4+
Enhanced the calendar item details sheet to include loading states and automatic personnel data fetching to improve the "Created by" name resolution functionality.
5+
6+
## Changes Made
7+
8+
### Component Enhancement (`calendar-item-details-sheet.tsx`)
9+
1. **Added Loading State Management**:
10+
- Added `isInitializing` state to track personnel fetching
11+
- Updated `getCreatorName` function to show loading state during data fetching
12+
- Added `isPersonnelLoading` from personnel store
13+
14+
2. **Auto-fetch Personnel Data**:
15+
- Added useEffect to automatically fetch personnel when:
16+
- Sheet is opened (`isOpen` is true)
17+
- Personnel store is empty (`personnel.length === 0`)
18+
- Not already loading (`!isPersonnelLoading`)
19+
- Prevents redundant fetches when data already exists
20+
21+
3. **Improved User Experience**:
22+
- Shows "Loading" text while fetching personnel data
23+
- Graceful fallback to "Unknown User" when data unavailable
24+
- Maintains existing functionality for all other scenarios
25+
26+
### Test Coverage (`calendar-item-details-sheet.test.tsx`)
27+
1. **Updated Existing Tests**:
28+
- Added `fetchPersonnel` function and `isLoading` property to all mock setups
29+
- Updated test descriptions to be more specific
30+
31+
2. **Added New Test Cases**:
32+
- `shows loading state when fetching personnel`: Verifies loading state display
33+
- `auto-fetches personnel when store is empty and sheet opens`: Tests automatic data fetching
34+
- `does not fetch personnel when store already has data`: Ensures no redundant fetches
35+
- `does not fetch personnel when already loading`: Prevents duplicate fetch calls
36+
37+
## Technical Implementation
38+
39+
### Loading States
40+
```typescript
41+
// Component state
42+
const [isInitializing, setIsInitializing] = useState(false);
43+
44+
// Personnel store integration
45+
const { personnel, fetchPersonnel, isLoading: isPersonnelLoading } = usePersonnelStore();
46+
47+
// Loading detection in getCreatorName
48+
if (isInitializing || isPersonnelLoading) {
49+
return t('loading');
50+
}
51+
```
52+
53+
### Auto-fetch Logic
54+
```typescript
55+
useEffect(() => {
56+
if (isOpen && personnel.length === 0 && !isPersonnelLoading) {
57+
setIsInitializing(true);
58+
fetchPersonnel().finally(() => {
59+
setIsInitializing(false);
60+
});
61+
}
62+
}, [isOpen, personnel.length, isPersonnelLoading, fetchPersonnel]);
63+
```
64+
65+
## Benefits
66+
1. **Better User Experience**: Users see meaningful loading states instead of "Unknown User" while data loads
67+
2. **Proactive Data Loading**: Personnel data is automatically fetched when needed
68+
3. **Performance Optimization**: Prevents unnecessary API calls when data already exists
69+
4. **Robust Error Handling**: Graceful fallbacks for all edge cases
70+
71+
## Translation Keys Used
72+
- `loading`: Shows during personnel data fetching
73+
- `unknown_user`: Fallback when creator cannot be identified
74+
75+
## Test Results
76+
- ✅ All 40 tests passing in main test suite
77+
- ✅ TypeScript compilation successful
78+
- ✅ No breaking changes to existing functionality
79+
- ✅ Comprehensive coverage of new loading and auto-fetch features

‎docs/calendar-item-details-webview-implementation.md‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
# Calendar Item Details WebView Implementation
2+
3+
## Overview
4+
Refactored the `CalendarItemDetailsSheet` component to use WebView for rendering the item description instead of a plain Text component. This ensures consistent styling and better HTML content rendering across the application.
5+
6+
## Changes Made
7+
8+
### Component Updates
9+
- **File**: `src/components/calendar/calendar-item-details-sheet.tsx`
10+
- Added WebView import from `react-native-webview`
11+
- Added `useColorScheme` hook from `nativewind` for theme detection
12+
- Added `StyleSheet` import for WebView styling
13+
- Added `Box` component import for WebView container
14+
15+
### Description Rendering
16+
- Replaced the simple `Text` component with a `WebView` component wrapped in a `Box`
17+
- WebView is only rendered when `item.Description` exists
18+
- Consistent styling with other WebView implementations in the app
19+
20+
### WebView Configuration
21+
- **HTML Structure**: Full HTML document with DOCTYPE, viewport meta tag, and embedded styles
22+
- **Theme Support**: Dynamic color scheme detection for light/dark mode
23+
- Light theme: `#1F2937` text on `#F9FAFB` background
24+
- Dark theme: `#E5E7EB` text on `#374151` background
25+
- **Typography**: Uses system fonts (`system-ui, -apple-system, sans-serif`)
26+
- **Responsive**: `max-width: 100%` for all elements
27+
- **Performance**: `androidLayerType="software"` for Android optimization
28+
29+
### Styling Consistency
30+
The WebView implementation follows the same patterns used in:
31+
- `protocol-details-sheet.tsx`
32+
- `note-details-sheet.tsx`
33+
- `call-card.tsx`
34+
35+
### WebView Properties
36+
```typescript
37+
<WebView
38+
style={[styles.container, { height: 120 }]}
39+
originWhitelist={['*']}
40+
scrollEnabled={false}
41+
showsVerticalScrollIndicator={false}
42+
source={{ html: dynamicHTMLContent }}
43+
androidLayerType="software"
44+
testID="webview"
45+
/>
46+
```
47+
48+
## Test Updates
49+
50+
### New Test Suite: "WebView Description Rendering"
51+
Added comprehensive tests covering:
52+
53+
1. **Conditional Rendering**
54+
- Renders WebView when description is provided
55+
- Does not render WebView when description is empty
56+
57+
2. **HTML Structure Validation**
58+
- Proper DOCTYPE, html, head, meta viewport
59+
- Style tag inclusion
60+
- Body content with description
61+
62+
3. **Theme Support**
63+
- Light theme CSS colors and styling
64+
- Dark theme CSS colors and styling
65+
- Font family, size, and line-height
66+
67+
4. **Configuration**
68+
- WebView props validation (originWhitelist, scrollEnabled, etc.)
69+
- Content inclusion verification
70+
71+
### Mock Setup
72+
- Added WebView mock in test setup
73+
- Added `useColorScheme` mock with theme switching
74+
- Added `Box` component mock
75+
76+
### Test Results
77+
All 28 tests pass successfully, including the new 7 WebView-specific tests.
78+
79+
## Benefits
80+
81+
1. **Consistent Styling**: Matches other WebView implementations across the app
82+
2. **Better HTML Rendering**: Properly renders HTML content in descriptions
83+
3. **Theme Support**: Automatic light/dark mode adaptation
84+
4. **Mobile Optimized**: Better text rendering and performance
85+
5. **Accessibility**: Improved screen reader support for HTML content
86+
6. **Future-Proof**: Easier to extend with additional HTML features
87+
88+
## Browser Compatibility
89+
- **iOS**: Uses WKWebView
90+
- **Android**: Uses software layer type for optimal performance
91+
- **Web**: Falls back to appropriate web rendering
92+
93+
## Performance Considerations
94+
- Height is limited to 120px to prevent excessive scrolling
95+
- Scrolling is disabled for controlled layout
96+
- Software rendering on Android for better performance
97+
- Minimal HTML structure for fast loading
98+
99+
## Accessibility
100+
- Maintains existing accessibility features
101+
- Supports screen readers through WebView accessibility
102+
- Proper semantic HTML structure
103+
104+
## Future Enhancements
105+
- Could support rich text editing if needed
106+
- Could add support for images or links in descriptions
107+
- Could implement print functionality through WebView

0 commit comments

Comments
 (0)