Frontend
Concepts

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

TypeGroup
uigeneric UI components
blockLayout block component
itemViewItem view component
embedViewembedView view component
dialogdialog component
formElementForm Elements
popoverpopover component
routepage route
modalRoutemodal route
sagasaga function(s)
reducerreducer functions
serviceservice provider

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