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
Follow the steps:

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

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 Design

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.varius.io/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