accordproject/concerto-ui

A library for generating a web form from a Concerto Modeling Language model

concerto-ui's Issues

Models with relationships crash form generator

Describe the bug
Models with relationships crash the form generator.

To Reproduce

namespace io.clause.order

import org.accordproject.money.MonetaryAmount from https://models.accordproject.org/[email protected]

abstract asset Product identified by sku {
  o String sku
  o String name default="Widget"
  o String description optional
  o MonetaryAmount price
}

asset PerishableGoods extends Product {
  o DateTime expiration
}

asset Order identified by orderId {
  o String orderId
  --> Product[] products
}

Expected behavior
Should generate a form using a string for a relationship or an array of strings for relationships that are arrays.

Invalid JSON for nested arrays

Describe the bug
Arrays within nested elements get added to the end of the JSON.

To Reproduce
Steps to reproduce the behavior:

1. Go https://concerto-ui.netlify.app
2. Paste the contents of metamodel.txt into the model
3. Select the VerifyTemplate type
4. Add a new array element: clause/request/field
5. A new element is added to the end of the JSON

"clause,request,fields": [
    null,
    {
      "$class": "io.clause.template.PrimitiveField",
      "type": "BOOLEAN",
      "name": "Irure culpa eu in."
    }
  ]

Expected behavior
New element should be added to the array

Add support for read-only rendering

It would be very useful to be able to render a form (or other similar HTML view) that was read-only. This would allow people to use this component to summarise the values of JSON data that was governed by a Concerto model.

Describe the solution you'd like
A new prop readOnly that could be set on the form component. When true all the fields in the form would read-only (i.e. labels or disabled input fields).

Cannot run the demo?

Describe the bug
Not sure what I'm doing wrong, or if it's something of a regression, but on a fresh build:

bash-3.2$ lerna bootstrap 
lerna bootstrap 
lerna notice cli v3.20.2
lerna info Bootstrapping 3 packages
lerna info Symlinking packages and binaries
lerna success Bootstrapped 3 packages
bash-3.2$ npm run build 
npm run build 

> @accordproject/concerto-ui@ build /Users/jeromesimeon/git/gold/concerto-ui
> lerna exec -- npm run build

lerna notice cli v3.20.2
lerna info Executing command in 3 packages: "npm run build"

> @accordproject/[email protected] build /Users/jeromesimeon/git/gold/concerto-ui/packages/concerto-ui-core
> rm -rf dist && NODE_ENV=production babel src --out-dir dist --ignore '**/*.spec.js,**/*.test.js,samples,__snapshots__,**/*.stories.js'

Successfully compiled 4 files with Babel.

> @accordproject/[email protected] build /Users/jeromesimeon/git/gold/concerto-ui/packages/concerto-ui-react
> rm -rf dist && NODE_ENV=production babel src --out-dir dist --copy-files --ignore '**/*.spec.js,**/*.test.js,samples,__snapshots__,**/*.stories.js'

Successfully compiled 6 files with Babel.

> @accordproject/[email protected] build /Users/jeromesimeon/git/gold/concerto-ui/packages/concerto-ui-react-demo
> react-scripts build

Creating an optimized production build...
Browserslist: caniuse-lite is outdated. Please run next command `yarn upgrade`
Compiled successfully.

File sizes after gzip:

  290.16 KB  build/static/js/2.0c104230.chunk.js
  97.26 KB   build/static/css/2.0554bc4f.chunk.css
  7.42 KB    build/static/js/main.8ff4c625.chunk.js
  762 B      build/static/js/runtime~main.a8a9905a.js
  456 B      build/static/css/main.c681997c.chunk.css

The project was built assuming it is hosted at the server root.
You can control this with the homepage field in your package.json.
For example, add this to build it for GitHub Pages:

  "homepage" : "http://myname.github.io/myapp",

The build folder is ready to be deployed.
You may serve it with a static server:

  npm install -g serve
  serve -s build

Find out more about deployment here:

  https://bit.ly/CRA-deploy

lerna success exec Executed command in 3 packages: "npm run build"
bash-3.2$ npm run demo:react
npm run demo:react

> @accordproject/concerto-ui@ demo:react /Users/jeromesimeon/git/gold/concerto-ui
> cd packages/concerto-ui-react-demo && npm run start


> @accordproject/[email protected] start /Users/jeromesimeon/git/gold/concerto-ui/packages/concerto-ui-react-demo
> react-scripts start

�[3JStarting the development server...

Browserslist: caniuse-lite is outdated. Please run next command `yarn upgrade`
�[3JCompiled successfully!

You can now view @accordproject/concerto-ui-react-demo in the browser.

  Local:            http://localhost:3000/
  On Your Network:  http://10.0.1.8:3000/

Note that the development build is not optimized.
To create a production build, use npm run build.

bash-3.2$ pwd 
pwd 
/Users/jeromesimeon/git/gold/concerto-ui
bash-3.2$ 

I see the following in the demo:

Bug adding element to an array of numbers

Adding a number to an array of numbers, adds a string.

To Reproduce

1. Go to https://concerto-ui.netlify.com
2. Click the + to add a new accelerometer reading
3. Edit the reading from 0 to 10
4. Note that the JSON for the readings has added "10"

Expected behavior
Numbers should not be added as strings

Screenshots

Desktop (please complete the following information):

• OS: Mac OS X
• Browser: Safari
• Version: Latest

Dark Version of Concerto-UI

Bright white screen causes digital eye strain.

Describe the solution you'd like
Add a dark mode feature to concerto-ui

Why Dark Mode?

• Dark Mode prolongs battery life.
• It looks amazing.
  

Logo Missing and Invalid Logo Link

Describe the bug
Logo is not displaying in title bar

To Reproduce
Steps to reproduce the behavior:

1. Go to 'concerto-ui/packages/concerto-ui-react-demo/public/index.html'
2. Click on https://accordproject.github.io/concerto/latest/favicon.ico
3. Now go to the provided link'
4. You will get this error page

Expected behavior
Logo should be displayed on titlebar

Screenshots

Wrapping for enums on Safari

Monetary amounts are wrapping strangely on Safari, compared to other enums.

Enable automatic deployment to npmjs

It would be useful to provide the same kind of automatic deployment of packages to npmjs (from commits and release tags) as we provide for other Accord Project repositories.

Enum radio buttons do not update

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://concerto-ui.netlify.com
2. Add a new enum value "FOO"
3. Change the Declaration Selection to PayOut and then back to DeliveryUpdate
4. Note that no radio button appears for Foo

Expected behavior
Radio buttons should dynamically update based on model.

Screenshots

Desktop (please complete the following information):

• OS: Mac
• Browser Safari
• Version Latest

Component: Concerto Form Component

• Generate a web form to edit an instance of a Concerto model
• https://www.npmjs.com/package/concerto-form-react
• Use to edit request.json to test a contract
• Use to visualise response.json and state.json

Form Generator crashes upon rendering full Contracts

Describe the bug
Selecting an asset extending AccordContract to be rendered crashes the Form generator
To Reproduce
Load following Model (fragile-goods) and select "FragileGoodsClause" as FQN.

namespace io.clause.demo.fragileGoods

import org.accordproject.cicero.runtime.* from https://models.accordproject.org/cicero/runtime.cto
import org.accordproject.time.Duration from https://models.accordproject.org/v2.0/time.cto
import org.accordproject.money.MonetaryAmount from https://models.accordproject.org/money.cto

/**
 * The template model
 */
asset FragileGoodsClause extends AccordContract {
  o AccordParty buyer
  o AccordParty seller
  o MonetaryAmount deliveryPrice
  o Double accelerationMin
  o Double accelerationMax
  o MonetaryAmount accelerationBreachPenalty
  o Duration deliveryLimitDuration
  o MonetaryAmount lateDeliveryPenalty
}

Expected behavior
The Form generator should render a form, allowing the user to fill in all data needed for the contract.

Additional context
Testet on concerto-ui-react-demo and similar own implementation. Possibly because of Issue #9 as the Error Message is identical.

Upgrade to use latest @accordproject/concerto

Dependencies need to be updated to use the latest version of the @accordproject/concerto module.

AP Documentation Sync

Tasks

• Implement updated Accord Project documentation.

Enable CI for concerto-ui

Currently Travis is disabled for the repo. Running lerna run test fails on the license check:

bash-3.2$ lerna run test
lerna run test
lerna notice cli v3.20.2
lerna info Executing command in 2 packages: "npm run test"
lerna ERR! npm run test exited 1 in '@accordproject/concerto-ui-core'
lerna ERR! npm run test stdout:

> @accordproject/[email protected] pretest /Users/jeromesimeon/git/gold/concerto-ui/packages/concerto-ui-core
> npm run licchk


> @accordproject/[email protected] licchk /Users/jeromesimeon/git/gold/concerto-ui/packages/concerto-ui-core
> license-check-and-add

Running using exclude exact_paths list
Running using exclude file type list

lerna ERR! npm run test stderr:
No default format specified using {"prepend":"/*","append":"*/"} as backup
✗ License not found in  /Users/jeromesimeon/git/gold/concerto-ui/packages/concerto-ui-core/babel.config.js
/Users/jeromesimeon/git/gold/concerto-ui/packages/concerto-ui-core/node_modules/license-check-and-add/index.js:173
      throw new Error('License Check failed. '+err.length+' file(s) did not have the license.');
      ^

Error: License Check failed. 1 file(s) did not have the license.
    at giveFilesLicense (/Users/jeromesimeon/git/gold/concerto-ui/packages/concerto-ui-core/node_modules/license-check-and-add/index.js:173:13)
    at Object.module.exports.run (/Users/jeromesimeon/git/gold/concerto-ui/packages/concerto-ui-core/node_modules/license-check-and-add/index.js:182:4)
    at start (/Users/jeromesimeon/git/gold/concerto-ui/packages/concerto-ui-core/node_modules/license-check-and-add/bin/server.js:11:10)
    at Object.<anonymous> (/Users/jeromesimeon/git/gold/concerto-ui/packages/concerto-ui-core/node_modules/license-check-and-add/bin/server.js:14:1)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:831:12)

It would be nice to:

• get testing to run again
• enable travis, and fix corresponding travis configuration
• add more react-mindful testing, maybe through jest?