Feature: Template Library
Relevant source files
The following files were used as context for generating this wiki page:
The Template Library feature provides users with a browsable collection of pre-designed garment templates. Its primary purpose is to offer a starting point for new designs, accelerating the user's creative process. Users can search, filter, and select a template, which then loads into the Design Studio for customization.
Currently, the library is populated with static data from a local file, but the architecture includes provisions for future integration with a backend API and local storage for caching. The feature is accessible from the Home Screen via a dedicated feature card.
Sources: src/screens/TemplateLibraryScreen.js, src/data/templates.js, src/features/home/screens/HomeScreen.js:358-365
Architecture and Components
The Template Library is primarily composed of a single screen component that manages state and rendering, and a static data file that serves as the data source.
Sources: src/screens/TemplateLibraryScreen.js, src/data/templates.js
Core Components
| Component/File | Description |
|---|---|
TemplateLibraryScreen.js | The main React component that renders the UI. It manages state for search queries, active filters, and the list of displayed templates. It also handles user interactions. |
templates.js | A static JavaScript file containing an array of template objects. This acts as the local database for the feature in its current implementation. |
HomeScreen.js | The entry point to the Template Library, containing a "Templates" feature card that navigates to the TemplateLibraryScreen. |
constants.js / core/utils/constants.js | Configuration files defining storage keys and API endpoints intended for future expansion of the feature. |
Sources: src/screens/TemplateLibraryScreen.js, src/data/templates.js, src/features/home/screens/HomeScreen.js:358, src/config/constants.js:100, src/core/utils/constants.js:231
Component Interaction Diagram
The following diagram illustrates how the components interact to display the Template Library.
Data Model and Flow
The feature's data originates from templates.js and is processed within TemplateLibraryScreen.js before being rendered.
Template Data Structure
Each template is an object with a consistent structure, defined in templates.js.
| Field | Type | Description | Example |
|---|---|---|---|
id | String | A unique identifier for the template. | 't-001' |
name | String | The display name of the template. | 'Classic T-Shirt' |
category | String | The garment category (e.g., 'Tops', 'Dresses'). | 'Tops' |
image | Image | A reference to the template's preview image. | require('../assets/images/tshirt.png') |
tags | String[] | An array of keywords for searching and filtering. | ['casual', 'summer', 'basic'] |
complexity | String | The difficulty level of the template. | 'Beginner' |
downloads | Number | A metric for popularity, used for sorting. | 15200 |
Sources: src/data/templates.js:3-13
Data Entity Relationship
The diagram below shows the simple entity structure for a template.
Sources: src/data/templates.js:3-13
Data Flow on Load
When the TemplateLibraryScreen is mounted, it loads and processes the template data to prepare it for display.
User Interface and Interaction
The UI is designed for easy browsing and discovery of templates. State is managed locally within the TemplateLibraryScreen component using useState hooks.
Sources: src/screens/TemplateLibraryScreen.js:29-32
UI Layout
The screen is divided into four main sections:
- Header: Displays the title "Template Library" and a back button.
- Search Bar: Allows users to type a query to search templates by name or tags.
- Filter Chips: A horizontal list of categories (
'All','Tops','Dresses', etc.) that users can tap to filter the grid. - Template Grid: A
FlatListthat displays the filtered templates in a two-column layout.
Sources: src/screens/TemplateLibraryScreen.js:125-218
Search and Filtering Logic
User interactions like searching or tapping a filter chip trigger a state update, which in turn re-renders the list of templates. The filtering logic is handled inside a useEffect hook that listens for changes in the search query and active filter.
The logic is as follows:
- Start with the full list of
allTemplates. - If an
activeFilter(other than 'All') is selected, filter the list to include only templates of that category. - If a
searchQueryexists, further filter the list to include templates where the name or tags match the query (case-insensitive). - Update the
filteredTemplatesstate with the result.
Sources: src/screens/TemplateLibraryScreen.js:40-57
User Interaction Sequence Diagram
This diagram shows the sequence of events when a user searches for a template.
Navigation
When a user presses a template card, the application navigates them to the Studio screen. While the code for passing the selected template data to the studio is commented out, the intention is to pass the template as a parameter to pre-populate the design canvas.
Sources: src/screens/TemplateLibraryScreen.js:98-101, src/screens/AIAssistantScreen.js:313-315
Configuration and Storage
Although the current implementation uses static data, the codebase contains configurations for future enhancements, including local storage and API integration.
Local Storage
The constants files define a storage key for templates, indicating a plan to cache or persist template data locally on the user's device using AsyncStorage.
| Constant | Value | File(s) | Purpose |
|---|---|---|---|
STORAGE_KEYS.TEMPLATES | '@templates' | src/config/constants.js, src/core/utils/constants.js | Key for storing template data in AsyncStorage. |
Sources: src/config/constants.js:103, src/core/utils/constants.js:231
API Integration
The deprecated src/config/constants.js file outlines a set of API endpoints for a future template marketplace. This suggests a move from static data to a dynamic, server-driven library.
| Endpoint | Method | URL Path | Description |
|---|---|---|---|
TEMPLATES.LIST | GET | /templates | Fetch a list of all available templates. |
TEMPLATES.POPULAR | GET | /templates/popular | Fetch a list of the most popular templates. |
TEMPLATES.SEARCH | GET | /templates/search | Search for templates via the API. |
Sources: src/config/constants.js:108-112
Future Roadmap
Based on evidence in the codebase, the Template Library is planned to evolve significantly:
- Template Marketplace: The
README.mdmentions an upcoming "Template marketplace," which aligns with the defined API endpoints. This suggests users will eventually be able to browse a much larger, cloud-hosted collection of templates. - Dynamic Data: The feature will transition from using the static
templates.jsfile to fetching data from the backend via the defined API endpoints. - Offline Caching: The
STORAGE_KEYS.TEMPLATESconstant implies that fetched templates will be cached locally, allowing for offline access and better performance.
Sources: README.md, src/config/constants.js:108-112, src/core/utils/constants.js:231