Vatom™ Studio CLI

$3

npx -p @vatom/cli vatom auth


npx -p @vatom/cli vatom design new

$3

npm install -g @vatom/cli


vatom auth


vatom design new

$3

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

$3

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

`

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 installed.
- Install dependencies: npm install
- Write your plugin code. For refence, check out the Vatom Developer Portal
- 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