Builder.io Editor Plugins for Mira

Setting up local environment

1. Clone this repo to your local
2. Run npm i && npm run start
3. Go to beta.builder.io and create a new org called something like Mira Local Chris using your first name.
4. Navigate to Account > Organization > Plugins and set it to http://localhost:1268/plugin.system.js

Development tips

Updating models

In builder.io when you create or update the fields of a data model, you need to copy that configuration to code.

1. In the browser, on the model edit page, run JSON.stringify(builder.editingModel.fields, null, 2) (or JSON.stringify(builder.editingModel.toJSON(), null, 2) to see the full model)
2. Copy the fields array to the models.json file, under a key that is the name of the model.
3. Visit https://beta.builder.io/apps/mira/update-models to update your db from the JSON.

Context Examples

• Permissions check: context.user.can('editCode')
• Current content being edited: context.designerState.editingContentModel
• Edit content (pass in either json or a content object): context.content.update(theContent) or context.createContent('my-model', theContent)
• soft delete: context.content.update({...content, published: 'archived'})
• permanent delete(NOTE: PLEASE DO NOT USE THIS): context.content.remove({id: 'content-id'})
• Update preview URL: context.designerState.editingContentModel.previewUrl = '…'

Creating/Updating models with reference model fields manually in different env

1. copy the fields of the model by going to the dev org(where the model originally is created) and copy to clipboard all the fields using this in console builder.copyToClipboard(JSON.stringify(builder.editingModel.fields))
2. Create the model/reference model with the correct model name from the UI in the environment you want.
3. update all reference model fields with the corresponding model id of that environment(created above)
4. replace the fields using this in concole  builder.editingModel.fields.replace(paste fields from step 1) Note: we will be automating dependent field updates.

UI React Component Guide

https://wiki-berlin.global.umusic.net/wiki/display/OCP/UI+React+Component+Guide