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-testid (link , ....)
• For menu component, all menu items MUST have data-testid

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.embedItem.name

Declaration of React component is used as the embed content of other component.

For example declare blog embed on feed:

/**
 * @type: embedView
 * name: blog.embedItem.insideFeedItem
 * chunkName: feed_embed
 */
 
export default function BlogFeedItem() {
  // your code
}
 

Dialog

Naming Convention: prefix.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

popover

Naming Convention: module_name.popover.purpose

/**
 * @type: popover
 *
 * name: user.popover.UserProfilePopup
 */
 
export default function MyPopover() {
  // popover code
}

route

Type route: declare routing for page.

Path will be matching the URL to define a page

Naming convention: resource_name.purpose

/**
 * @type: route
 * name: user.profile
 * path: /user/:user_id(\d+)/:tab?
 */

modalRoute

Type modalRoute: declare routing for modal.

Path will be matching the URL to define a modal.

Naming convention: resource_name.purpose.viewModal

/**
 * @type: modalRoute
 * name: blog.detail.viewModal
 * path: /blog/:id(\d+)/:slug?
 */

saga

Type saga: declare sagas side effect(redux-saga). We'll create Saga that watches for all actions and triggers.

Naming convention: resource_name.saga.purpose

/**
 * @type: saga
 * name: blog.saga.updatedItem
 */

reducer

Type reducer: declare reducer for module.

Naming convention: module_name

/**
 * @type: reducer
 * name: blog
 */

service

Type service: declare service can be a class instance, a function or a React component to handle some pieces of your app logic.

MetaFox platform has a Service Manager called globalContext to manage all services. You can not access the global manager directly but via hooks or saga context.

/**
 * @type: service
 * name: copyToClipboard
 */