Shared Components
Relevant source files
The following files were used as context for generating this wiki page:
The src/shared/components/ directory contains a collection of reusable React components designed to be used across multiple features within the eefashiondesign application. The primary purpose of these components is to enforce UI consistency, reduce code duplication, and encapsulate specific functionalities that are not tied to a single feature. This includes high-level components like error boundaries, tutorial overlays, and specialized UI elements like a premium feature upsell button.
These components are critical for the application's stability and user experience. For instance, ErrorBoundary prevents the entire application from crashing due to a rendering error in a specific part of the UI, while TutorialOverlay provides a guided experience for new users. The PremiumButton is a key element for the application's monetization strategy.
Sources: README.md, App.js:60-61, AUDIT_FIXES_SUMMARY.md
Component Overview
The following table summarizes the key shared components and their primary function within the application.
| Component | Description | Key Dependencies |
|---|---|---|
ErrorBoundary | A React class component that catches JavaScript errors in its child component tree and displays a fallback UI. | react |
PremiumButton | A functional component that displays a button to open a modal showcasing the app's premium features. | react, react-native, expo-linear-gradient |
TutorialOverlay | A full-screen overlay that displays tutorial steps, controlled by the global useTutorialStore. | react, react-native, lottie-react-native |
Sources: src/shared/components/ErrorBoundary.js, src/shared/components/PremiumButton.js, src/shared/components/TutorialOverlay.js
Application Integration
Shared components are integrated at various levels of the application tree to provide global functionality. ErrorBoundary and TutorialOverlay are used at the root level in App.js to provide app-wide error handling and tutorial guidance.
The diagram below illustrates the high-level integration of these components in App.js.
This diagram shows how ErrorBoundary wraps the entire application content, and TutorialOverlay is rendered within AppContent to appear above all other screens when active.
Sources: App.js:393-410, 427-428
ErrorBoundary
The ErrorBoundary component is a critical utility for application stability. It is a class-based component that leverages React's error boundary lifecycle methods to catch rendering errors in any of its child components, preventing a full application crash.
Sources: src/shared/components/ErrorBoundary.js, App.js:393
Lifecycle and State
ErrorBoundary uses its internal state (hasError) to determine whether to render its children or a fallback UI. The state is updated through the static getDerivedStateFromError lifecycle method, and error information is logged via componentDidCatch.
This class diagram shows the structure of the ErrorBoundary component, including its state and key lifecycle methods for handling errors.
Sources: src/shared/components/ErrorBoundary.js:7-22
Error Handling Flow
When a child component throws an error during rendering, the following sequence occurs:
This sequence diagram illustrates how an error is caught and handled by the ErrorBoundary, resulting in a fallback UI being displayed instead of a crash.
Sources: src/shared/components/ErrorBoundary.js:12-22
Fallback UI
When an error is caught (hasError is true), the component renders a simple, non-crashing UI that informs the user of the problem and provides an option to reload the application.
Sources: src/shared/components/ErrorBoundary.js:25-41
PremiumButton
The PremiumButton is a reusable component designed to upsell users to a premium version of the application. It is integrated into the header of the 3D Atelier screen.
Sources: TASK_4_SUMMARY.md, src/features/design3D/components/layout/Header.js
User Interaction Flow
The component consists of a touchable button that, when pressed, toggles the visibility of a modal window displaying premium features and pricing plans.
This flowchart shows the user journey from clicking the premium button to viewing and closing the features modal.
Sources: src/shared/components/PremiumButton.js:15-19, 114
State Management
The component manages the visibility of the modal using a local React state hook, useState.
// src/shared/components/PremiumButton.js:16
const [modalVisible, setModalVisible] = useState(false);
The onPress handler for the button and the close button on the modal toggle this state.
Sources: src/shared/components/PremiumButton.js:16, 19, 114
Premium Features Displayed
The modal displays a list of features available in the premium plan.
| Feature | Icon |
|---|---|
| Advanced 3D Tools | diamond-stone |
| Unlimited Designs | infinity |
| HD Export | quality-high |
| Custom Materials | texture-box |
| AI Suggestions | lightbulb-on-outline |
| Cloud Sync | cloud-sync |
| Collaboration | account-group |
| Priority Support | face-agent |
Sources: src/shared/components/PremiumButton.js:46-85
TutorialOverlay
The TutorialOverlay is a shared component that provides a guided tour for new users. Its visibility and content are controlled by a global Zustand store, useTutorialStore.
Sources: src/shared/components/TutorialOverlay.js:14, App.js:61, 428
State and Logic
The component's logic is driven by the visible prop. When true, it renders a semi-transparent overlay with an animated Lottie view and text describing the current tutorial step.
This graph illustrates the conditional rendering logic of the TutorialOverlay based on the visible prop.
Sources: src/shared/components/TutorialOverlay.js:16-19
Component Structure
The overlay is composed of several key elements to create an engaging user experience.
BlurView: Creates a blurred background effect over the underlying application screen.LottieView: Displays an engaging animation related to the tutorial. The animation source isrequire('../assets/animations/tutorial.json').- Text Elements: Display the title and description of the current tutorial step.
- Action Buttons: "Next Step" and "Skip Tutorial" buttons allow the user to navigate through or exit the tutorial.
Sources: src/shared/components/TutorialOverlay.js:20, 22, 30, 31, 37, 46
Index and Exports
The src/shared/components/index.js file serves as a central point for exporting shared components, although it appears to be outdated or incomplete. Based on audit logs, it previously exported ErrorBoundary and TutorialOverlay before they were moved. The file's current state suggests it may need updating to correctly export all available shared components for easier importing across the app.
Sources: src/shared/components/index.js, AUDIT_FIXES_SUMMARY.md