Since MetaFox comes with Modular structure, Build tool helps solve issues of dependencies without using import
directly. Build tool will scan all packages declared in settings.json
file, find all components, librarys to build the bundle.
For example:
/**
* @type: route
* name: user.profile
* path: /user/:user_id(\d+)/:tab?
*/
- Keep anotation at the begin of source file
- Each file should declare only one component.
Type | Group |
---|---|
ui | generic UI components |
block | Layout block component |
itemView | Item view component |
embedView | embedView view component |
dialog | dialog component |
formElement | Form Elements |
popover | popover component |
route | page route |
modalRoute | modal route |
saga | saga function(s) |
reducer | reducer functions |
service | service provider |
For automation testing, please follow below rules:
- For item view, embed view component, detail view component, all clickable/focusable items MUST have
data-tid
(link , ....) - For menu component, all menu items MUST have
data-tid
Type ui
declares generic React component.
/**
* @type: ui
* name: CategoryTitle
*/
export default function CategoryTitle(): React.FC<{}> {
// your code
}
Naming convention: resource_name.itemView.suffix
When rendering, declaration of React component is included in a listing/grid component.
In some specific cases, platform will base on the naming convention to find components having the best match for rendering.
resource_name : blog, photo, video, .... etc.
suffix: mainCard, smallCard, flatCard, etc ...
/**
* @type: itemView
* name: photo_album.itemView.mainCard
*/
export default function PhotoAlbumMainCard() {
// your code
}
Naming Convention: resource_name.embedView.parent_resource
Declaration of React component is used as the embed content of other component.
For example:
/**
* @type: itemView
* name: photo_album.embedView.feedItem
*/
export default function EmbedPhotoAlbum() {
// your code
}
Naming Convention: dialog.purpose
See dialog
/**
* @type: dialog
*
* name: dialog.
*/
export default function MyDialog() {
// dialog code
}
Here are list of supported form elements
- button
- cancel
- captcha
- checkbox
- hidden
- linkButton
- password
- editor
- submit
- text
- attachment
- date
- time
- datetime
- friendPicker
- itemPhoto
- itemPhotoGallery
- location
- searchBox
- select
- Tags
- TypeCategory
- videoUrl
- addAlbumn