@vatom/cli

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:

Currently there isn’t a smooth way to mock vAtoms locally. The below manual changes need to be made:
1. Open `App.js` 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. See Sample

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

This will generate a new folder based on the name of the plugin with:

• 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:

- Ensure you have [Node.js](https://nodejs.org) installed. - Install dependencies: `npm install` - Write your plugin code. For refence, check out the [Vatom Developer Portal](https://developer.vatom.com/plugins/plugins/) - Build the plugin: `npm run build`

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