concordialang-ui-cli

• Install
• Usage
• Configuration files

Install

$ npm install -g concordialang-ui-cli
$ npm install -g concordialang-ui-html
clui plugins:install concordialang-ui-html

Usage

In the project root, create a features folder and put all your features files in it.

/my-project
  /features
    login.feature
  package.json

Then, run the following command to generate the AST and to pass it to the prototype generator:

$ concordia --ast && clui generate \
	--ast "/path/to/ast.json" \
	--outputDir "/path/to/output" \
	--plugin "concordialang-ui-html"

The parameters are:

Parameter	Description	Required
ast	The path to the AST generated by Concordia	true
outputDir	Where the prototypes will be saved	true
plugin	The plugin used to generate the prototype in a specific technology	true

Configuration files

In order to simplify the command above, you can store the parameters in a configuration file called .clirc, created in the project root:

/my-project
  /features
    login.feature
  .clirc
  package.json

The .clirc content is something like:

// .clirc
{
  "ast": "/path/to/ast.json",
  "outputDir": "/path/to/output",
  "plugin": "concordialang-ui-html"
}

Then, use the command like clui generate.

In this example, we use the concordialang-ui-html plugin, which requires a configuration file where you can specify which HTML tag you want to use for each widget. Thus, the prototype can be customizable and the generated source code can potentially be used as the final code.

The concordialang-ui-html configuration file looks like:

{
  "externalLinks": [
    "&ltlink rel=\"stylesheet\" href=\"...\">",
  ],
  "externalScripts": [
    "&ltscript src=\"...\">&lt/script>",
  ],
  "widgets": {
    "input": {
      "widget": {
        "opening": "&ltinput {{&props}} class=\"form-control\">"
      },
      "wrapper": {
        "opening": "&ltdiv class=\"form-group\">",
        "closure": "&lt/div>"
      },
      "label": {
        "opening": "&ltlabel {{&props}} class=\"form-input-label\">",
        "closure": "&lt/label>"
      }
    },
    "radio": {
      "widget": {
        "opening": "&ltinput {{&props}} class=\"form-control\">"
      },
      "wrapper": {
        "opening": "&ltdiv class=\"form-group\">",
        "closure": "&lt/div>"
      },
      "label": {
        "opening": "&ltlabel {{&props}} class=\"form-radio-label\">",
        "closure": "&lt/label>"
      }
    },
    "checkbox": {
      "widget": {
        "opening": "&ltinput {{&props}} class=\"form-control\">"
      },
      "wrapper": {
        "opening": "&ltdiv class=\"form-group\">",
        "closure": "&lt/div>"
      },
      "label": {
        "opening": "&ltlabel {{&props}} class=\"form-checkbox-label\">",
        "closure": "&lt/label>"
      }
    },
    "select": {
      "widget": {
        "opening": "&ltselect {{&props}} class=\"form-control\">",
        "closure": "&lt/select>"
      },
      "wrapper": {
        "opening": "&ltdiv class=\"form-group\">",
        "closure": "&lt/div>"
      },
      "value": {
        "opening": "&ltoption {{&props}}>",
        "closure": "&lt/option>"
      },
      "label": {
        "opening": "&ltlabel {{&props}} class=\"form-checkbox-label\">",
        "closure": "&lt/label>"
      }
    },
    "button": {
      "widget": {
        "opening": "&ltbutton {{&props}}>",
        "closure": "&lt/button>"
      }
    },
    "label": {
      "widget": {
        "opening": "&ltlabel {{&props}} class=\"form-label\">",
        "closure": "&lt/label>"
      }
    }
  }
}