Vatom™ Studio CLI

Start with authenticating

varius auth

To create a new view:

varius view new
Follow the steps:

1. view name
2. view description
3. businessId

Currently there isn’t a smooth way to mock vAtoms locally. The below manual changes need to be made:

1. Open App.json
2. Replace export default withObject(App) with export default App
3. You will also need to mock an object with whatever its configurable viewArgs will be

Replace

  get viewArgs() {
    const stateKey = "insert_view_uri"; /* example - card::varius.view:varius.io:pxbPne2LjfMvz9X1qb4X3 */
    return (this.props.object.state || {})[stateKey];
  }

With

  get viewArgs() {
    return {
      backgroundImage: "some-url",
      titleSequence: "",
      buttonColor: {
        r: 255,
        g: 255,
        b: 255,
        a: 0
      }
    };
  }

And reference them like below:

  <img src={this.viewArgs.backgroundImage} alt="bg" />

Publishing a view

When you’re ready to publish, make sure to revert the above changes you made and run a build.
yarn build || npm build
varius view publish

There will be a view.json file that generates in the source code with an entrypoint reference (This is the view url).

{
  "name": "my-varius-app",
  "description": "my varius app description",
  "entrypoint": "https://views.varius.io/8479681b-4987-4c13-b99f-75828df8c277/index.html",
  "supported_types": [
    "card"
  ],
  "params": {
    "$schema": "http://json-schema.org/schema#",
    "type": "object",
    "required": [],
    "additionalProperties": false,
    "properties": {}
  }
}

There will also be a schema.json file in the source code edit viewSchema. This will be added to studio's database and is used to generate appropriate form elements for your view.

{
    "$schema": "http://json-schema.org/schema#",
    "type": "object",
    "additionalProperties": false,
    "properties": {
        "image": {
            "title": "Photo",
            "$ref": "https:\/\/schemas.varius.io\/v1\/Image.json",
            "imageAspectRatio": 1,
            "default": {
                "type": "image/gif",
                "ref": "<insert_url_here>"
            }
        },
        "text": {
            "type": "string",
            "title": "Text",
            "default": "<insert_text_here>"
        },
        "color": {
            "title": "Text Color",
            "default": {
                "r": 0,
                "b": 0,
                "g": 0,
                "a": 1
            },
            "description": "Color of the text.",
            "$ref": "https:\/\/schemas.varius.io\/v1\/Color.json"
        }

    },
    "required": []
}

Versioning is currently not supported. If you want to make a new version, you will need to run: varius view new