npm:@onereach/content-builder

README

🤖 This Transformer between differend data model channels

✅ Developing:

Slack
Microsoft Teams
Default (schema for content builder)

👉 Future channels: ...

How to use

npm i

Sample of code in ./user-test.js If you use ./user-test.js than just run:

npm run dev

Or, create local file and require from ./index.js next functions

import {
  transformSlackToMicrosoftTeams,
  transformMicrosoftTeamsToSlack
} from './index';

After that import json data. Fot example, slack model

const slackToMsTeamsData = require('./slack->msTeams.json');

And transform Slack model to Microsoft team:

const microsoftTeamsModel = transformSlackToMicrosoftTeams({ data: slackToMsTeamsData });
console.log(JSON.stringify(microsoftTeamsModel))

How to test

We use unit testing based on cases. Create new case, just run script, before run command look up in derictory ./test/cases and enter NUMBER_OF_CASE next after existing (change NUMBER_OF_CASE to Number of case)

sh scripts/createCase.sh NUMBER_OF_CASE

Than open ./test/cases/NUMBER_OF_CASE and add original data model to from.json file open ./test/cases/NUMBER_OF_CASE and add expected data model to to.json file

npm run test

How it works

Sample: Microsoft Teams and Slack

Microsoft Teams Adaptive Cards data model 👉 transform to default data model 👉 transform from default data model to Slack Block kit data model
Slack Block kit data model 👉 transform to default data model 👉 transform from default data model to Microsoft Teams Adaptive Cards data model

Structure

...

Default schema:

{
  itmes: [
    {
      itemType: type, // type of block or element
      children: [],  // array of atributes, children, items,
      attributes: {} // additional data (title, styles and so on),
      value: // anu value data
    }
  ]
}

Default types:

section

  itemType: 'section',
  children,
  attributes: {
    position // could be left of undefined
  }

text

{
  itemType: 'text',
  textType: type, // could be mrkdown, markdown, plain_text
  text
}

image

{
  itemType: 'image',
  url: image_url,
  alt: alt_text,
  attributes: {
    title,
    position // could be left of undefined
  }
}

divider

{
  itemType: 'divider'
}

actions

{
  itemType: 'actions',
  children
}

button

{
  itemType: 'button',
  value,
  url,
  text,
  attributes: {
    text,
    style     // color styling default, blue, red, green
  }
}

columnSet

{ 
  itemType: 'columnset',
  columnLength:  0, 
  children: [
    {
      numberOfColumn: Number // have to be cleared
    }
  ]
}

select

{ 
  itemType: 'select',
  id,
  placeholder: { type: 'plain_text', text: 'Select a date', emoji: true } || 'Just a string',
  options: [
    {
      label: item.text,
      value: item.value
    };
  ],
  isMultiSelect: false,
  attributes: {
    position
  }
}

datepicker

{
  itemType: 'datepicker',
  placeholder: { type: 'plain_text', text: 'Select a date', emoji: true } || 'Just a string',
  value: '1990-04-28',
  id: '123',
  attributes: { position: 'left' }
}

input

{
  itemType: 'input',
  input: {
    placeholder,
    isMultiline
  },
  label: text or text object
}

Error dev extra types:

{
  itemType: 'error',
  message: `Method for ${type} not found`
}

Usage no npm install needed!