Concepts

Annotation

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?
 */

Best practices

1. Keep anotation at the begin of source file
2. Each file should declare only one component.

Annotation

Using testid

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

ui

Type ui declares generic React component.

/**
 * @type: ui
 * name: CategoryTitle
 */
 
export default function CategoryTitle(): React.FC<{}> {
  // your code
}

itemView

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
}

embedView

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
}

Dialog

Naming Convention: dialog.purpose

See dialog

/**
 * @type: dialog
 *
 * name: dialog.
 */
 
export default function MyDialog() {
  // dialog code
}

formElement

Here are list of supported form elements

1. button
2. cancel
3. captcha
4. checkbox
5. hidden
6. linkButton
7. password
8. editor
9. submit
10. text
11. attachment
12. date
13. time
14. datetime
15. friendPicker
16. itemPhoto
17. itemPhotoGallery
18. location
19. searchBox
20. select
21. Tags
22. TypeCategory
23. videoUrl
24. addAlbumn

popover

route

modalRoute

saga

reducer

service