app.yaml
It is the default file under each package for code generation with the following structure:
header:
 param: <value>
 ...
<component>:
  - <container>:
    - <element>
    - ....   
    - <container>
      - <element>
      - ....
    - ....
  - ....
...
Each YAML file consists of one header and multiple <component>.
header
Initialize the project setup details.  Each YAML file should contain one and only one header.
<component>
Each component that corresponds to one JSX file to be generated which will be exported as a standard React Element. A YAML file can include more than one component.
<container>
Fields, Section, Columns … etc holding list of <element>
<element>
HTML or React Element such as div, h1, Field, Button … etc

Header

#
header define the options to control the code generation. header: must be in root indent level with the following properties:
name
Initialize the project setup details. Each YAML file should contain one and only one header.
template
Template used for generation of each page component.
src
Output directory for generated JSX files.
module
Module name.
index
File name eg index.js for route and menu.
routeName
Router name to be exported.
routePath
Router path.
route
List of route definitions.
  • <route>: <component>
    • menu
    List of menu Items
  • <menu item>: <route>
    • individual
    true - generate individual <component> with - generate switch applied

    Example

    #
    header:
     name: YAML Tutorial

     template: "@uteamjs/template/react-redux"
     src: src               #Output directory
     # Index Template
     module: yaml-tutorial # Module name
     index: module.js      
     routeName: routeYAML  
     routePath: /           
     route:                
        - contact
        - detail

    Component

    #


    detail:
    - Fields:
       - Name:
       - Email:
       - Gender:
         tp: 'radio'
         list:
           - Male
           - Female
    The component named detail is generated into a detail.js which in turn is exported as a standard React Component.  There are three fields under the Fields container.  Each item is an object defining different field properties.

    Switch

    #
    Different types of switch can be applied to individual components (same indent level as <container>) to control the generation.
    detail:
      - export
      - skip
     ...
      - Fields:
        ...  
    skip
    Skip generation of the current <component>
    generate
    Generate when header.individual = true
    exports
    Generate two files, <component>.js & <component>_export.js, such that developers can modify and add code to <component>.js without being overwritten by regeneration.

    Property

    #
    Element properties such as className, id … etc can be applied to <container> or <element> in the following format:
    - <element>:
     <property>: <value>
     ...

    - <element>:
     props:
         <property>: <value>
         ...

    - <container>:
      - props:
          <property>: <value>
          ...

      - ...

    Variable

    #
    Variable names can be defined inside the <value> item with the following syntax.
    %name%
    Map to _.fields.<name>.value
    %_name%
    Map to _.name
    %params.<name>%
    Map to this.props.match.params.<name>
    Note: _ refers to the Redux reducer object.