Vatom™ Studio CLI

You can install globally or use with npx..

npx -p @vatom/cli vatom auth npx -p @vatom/cli vatom design new

OR

npm install -g @vatom/cli vatom auth vatom design new

If you see this error: gyp: No Xcode or CLT version detected!, there's an OS Catalina issue. See link below for debugging:

https://medium.com/flawless-app-stories/gyp-no-xcode-or-clt-version-detected-macos-catalina-anansewaa-38b536389e8d

Start with authenticating

vatom auth

To create a new design:

vatom design new This will create both a 'Design' and a subordinate 'View'. The new 'Design' will be immediately published into Studio and a new 'View' project will be created that you can use for your development. Follow the steps to create your 'Design' and 'View':

1. name
2. description
3. businessId
4. blueprintId

To create a new view:

vatom view new This will create a standalone 'View' and will require assitance from support to associate with a 'Design'. Follow the steps to create your 'View':

1. name
2. description
3. businessId
4. blueprintId

Developing your View:

Replace

const App = ({
	isLoading,
	viewArgs,
	getColor,
	getFontStyles,
	interactWithViewer,
	performAction,
	object,
	toHTML,
}) => {

With

const App = ({
	// isLoading,
	// viewArgs,
	// getColor,
	// getFontStyles,
	// interactWithViewer,
	// performAction,
	// object,
	// toHTML,
}) => {

  // you'll have to manually create the commented out vatom properties to run locally :( See example:
  const viewArgs = { backgroundImage: { type: "image/png", ref: "insert resource url here" }}

And reference them like below:

  <img src={viewArgs.backgroundImage.ref} 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 vatom view publish There will be a vatom.lock file that generates in the source code with an entrypoint reference (This is/will be the view url).

{
  "id": "exIOpXe0fV",
  "businessId": "sfpGNTg9PQ",
  "entrypoint": "https://views.vatom.com/sfpGNTg9PQ/exIOpXe0fV/index.html" || "", // if this is the initial upload, the entrypoint will be ""
  "groupId": "exIOpXe0fV"
}

There will also be a config-schema.json file that generates. This file will be used if you want to take advantage of studio's generic view form arguments. The format is utilizing jsonSchema to generate appropriate form elements for your view. See example below:

{
    "$schema": "http://json-schema.org/schema#",
    "type": "object",
    "required": [],
    "additionalProperties": false,
    "properties": {
        "backgroundImage": {
            "title": "Background Image",
            "$ref": "https:\/\/schemas.varius.io\/v1\/Image.json",
            "default": {
                "type": "image/png",
                "ref": "https://resources.varius.io/system/defaults/views/reverse-redeem-v1/Before.png"
            }
        },
        "text": {
            "title": "Sampe Text Field",
            "description": "",
            "type": "string"
        },
        "textColor": {
            "title": "Sample Text Color Accessory",
            "default": {
                "r": 0,
                "b": 0,
                "g": 0,
                "a": 1
            },
            "description": "Color of the code text background.",
            "accessoryTargetPointer": "\/designValues\/varius.placeholder:varius.io:card-v1\/config\/text",
            "$ref": "https:\/\/schemas.varius.io\/v1\/Color.json"
        },
        "codeTextFont": {
            "title": "Sample Custom Font",
            "default": {
                "family": [
                    "Advent Pro",
                    "sans-seriff"
                ],
                "style": "normal",
                "variant": "normal",
                "stretch": "normal",
                "weight": 500,
                "effects": [],
                "size": 1
            },
            "description": "Font Family",
            "accessoryTargetPointer": "\/designValues\/varius.placeholder:varius.io:card-v1\/config\/text",
            "$ref": "https:\/\/schemas.varius.io\/v1\/Font.json"
        },
        "textNudge": {
            "title": "SampleText Nudge Accessory",
            "default": {
                "x": 0,
                "y": 20
            },
            "axis": "vertical",
            "accessoryTargetPointer": "\/designValues\/varius.placeholder:varius.io:card-v1\/config\/text",
            "$ref": "https:\/\/schemas.varius.io\/v1\/Point.json"
        }
    }
}

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

To create a new plugin:

vatom plugin new Follow the steps:

1. id
2. version
3. name
4. description
5. category
6. business Id
7. price
8. release notes

• index.js - this is a sample file & is where you will write your plugin
• 'icon' folder - copy the icon of the plugin here (only .jpg, .jpeg, .png, .gif, .ico file types allowed)
• 'gallery' foler - copy the set of gallery images that represent your plugin here (only .jpg, .jpeg, .png, .gif, .ico file types allowed)
• vatom.lock - stores all the metadata about the plugin along with the entrypoint reference pointing to the hosting location of the plugin

Developing your plugin:

Publishing a Plugin

When you’re ready to publish, make sure to run a build and then: vatom plugin publish

Versioning a Plugin

To upgrade the version number of your plugin sematically, you can simply run: vatom plugin version