UNPKG

@onereach/webform

Version:

Content Builder includes several views for: - Content builder view itself; - Web Form view; - Slack block-kit builder;

1,483 lines (1,482 loc) 40.5 kB
{ "web": [ { "section_label": "Display", "props": { "icon": "image", "label": "Display", "helpText": "Display category...", "codeMode": true }, "blocks": [ { "type": "divider", "section_label": "Divider", "props": { "icon": "border_bottom", "label": "Divider", "helpText": "Divider element", "codeMode": false } }, { "type": "image", "section_label": "Image", "props": { "icon": "image", "label": "Image", "helpText": "Image element", "codeMode": true } }, { "type": "text", "section_label": "Text", "props": { "icon": "text_fields", "label": "Text", "helpText": "Text (static) element", "codeMode": true } }, { "type": "attachments", "section_label": "Attachments", "props": { "icon": "attachment", "label": "Attachments", "helpText": "Attach file", "codeMode": true } }, { "type": "video", "section_label": "Video", "props": { "icon": "video", "label": "Video", "helpText": "Video player", "codeMode": true } } ] }, { "section_label": "Input", "props": { "icon": "input", "label": "Input", "helpText": "Input category...", "codeMode": true }, "blocks": [ { "type": "input", "section_label": "Input", "props": { "icon": "input", "label": "Input", "helpText": "Input element", "codeMode": true } }, { "type": "select", "section_label": "Select", "props": { "icon": "list_alt", "label": "Select", "helpText": "Select element", "codeMode": true } }, { "type": "radio", "section_label": "Radio group", "props": { "icon": "radio_button_checked", "label": "Radio group", "helpText": "Radio group element", "codeMode": true } }, { "type": "checkbox", "section_label": "Checkbox", "props": { "icon": "check_box", "label": "Checkbox", "helpText": "Checkbox element", "codeMode": true } }, { "type": "advancedSelect", "section_label": "Advanced select", "props": { "icon": "image", "label": "Advanced select", "helpText": "Select element", "codeMode": true } }, { "type": "switch", "section_label": "Switch", "props": { "icon": "toggle_off", "label": "Switch", "helpText": "Switch element", "codeMode": true } }, { "type": "datePicker", "section_label": "Datepicker", "props": { "icon": "calendar_today", "label": "Datepicker", "helpText": "Datepicker element", "codeMode": true } }, { "type": "timePicker", "section_label": "Timepicker", "props": { "icon": "access_time", "label": "Timepicker", "helpText": "Timepicker element", "codeMode": true } }, { "type": "slider", "section_label": "Slider", "props": { "icon": "sync_alt", "label": "Slider", "helpText": "Slider element", "codeMode": true } }, { "type": "location", "section_label": "Location", "props": { "icon": "place", "label": "Location", "helpText": "Location element", "codeMode": true } }, { "type": "file", "section_label": "Files", "props": { "icon": "cloud_upload", "label": "Files", "helpText": "User can upload files", "codeMode": true } } ] }, { "type": "advancedCode", "section_label": "Custom/dynamic", "props": { "icon": "code", "label": "Custom/dynamic", "helpText": "Insert a section based on dynamic data", "codeMode": true }, "blocks": [ { "type": "advancedCode", "section_label": "Advanced code section", "props": { "icon": "code", "label": "Advanced code section", "helpText": "Insert a section based on dynamic data", "codeMode": true } } ] } ], "legacyWeb": [ { "type": "input", "section_label": "Input", "props": { "icon": "input", "label": "Input", "helpText": "Input element", "codeMode": true } }, { "type": "select", "section_label": "Select", "props": { "icon": "list_alt", "label": "Select", "helpText": "Select element", "codeMode": true } }, { "type": "radio", "section_label": "Radio group", "props": { "icon": "radio_button_checked", "label": "Radio group", "helpText": "Radio group element", "codeMode": true } }, { "type": "checkbox", "section_label": "Checkbox", "props": { "icon": "check_box", "label": "Checkbox", "helpText": "Checkbox element", "codeMode": true } }, { "type": "advancedSelect", "section_label": "Advanced select", "props": { "icon": "image", "label": "Advanced select", "helpText": "Select element", "codeMode": true } }, { "type": "datePicker", "section_label": "Datepicker", "props": { "icon": "calendar_today", "label": "Datepicker", "helpText": "Datepicker element", "codeMode": true } }, { "type": "timePicker", "section_label": "Timepicker", "props": { "icon": "access_time", "label": "Timepicker", "helpText": "Timepicker element", "codeMode": true } }, { "type": "switch", "section_label": "Switch", "props": { "icon": "toggle_off", "label": "Switch", "helpText": "Switch element", "codeMode": true } }, { "type": "slider", "section_label": "Slider", "props": { "icon": "sync_alt", "label": "Slider", "helpText": "Slider element", "codeMode": true } }, { "type": "divider", "section_label": "Divider", "props": { "icon": "border_bottom", "label": "Divider", "helpText": "Divider element", "codeMode": false } }, { "type": "image", "section_label": "Image", "props": { "icon": "image", "label": "Image", "helpText": "Image element", "codeMode": true } }, { "type": "text", "section_label": "Text", "props": { "icon": "text_fields", "label": "Text", "helpText": "Text (static) element", "codeMode": true } }, { "type": "location", "section_label": "Location", "props": { "icon": "place", "label": "Location", "helpText": "Location element", "codeMode": true } }, { "type": "file", "section_label": "Files", "props": { "icon": "cloud_upload", "label": "Files", "helpText": "User can upload files", "codeMode": true } }, { "type": "attachments", "section_label": "Attachments", "props": { "icon": "attachment", "label": "Attachments", "helpText": "Attach file", "codeMode": true } }, { "type": "advancedCode", "section_label": "Advanced code section", "props": { "icon": "code", "label": "Advanced code section", "helpText": "Insert a section based on dynamic data", "codeMode": true } } ], "msteams": [], "slack": [ { "props": { "icon": "text_fields", "label": "Section", "codeMode": true }, "blocks": [ { "name": "Plain text", "schema": { "type": "section", "children": [ { "type": "text", "props": { "value": "`This is a plain text section block.`", "slack": { "type": "mrkdwn", "verbatim": false } } } ], "props": { "slack": { "type": "section" } } } }, { "name": "Markdown", "schema": { "type": "section", "children": [ { "type": "text", "props": { "value": "`This is a mrkdwn section block 👻 **this is bold**, and ~~this is crossed out~~, and [this is a link](https://google.com)`", "slack": { "type": "mrkdwn", "emoji": false, "verbatim": false } } } ], "props": { "slack": { "type": "section" } } } }, { "name": "Text fields", "schema": { "type": "section", "children": [ { "type": "text", "props": { "value": "`*this is plain_text text*`", "slack": { "type": "plain_text", "emoji": true, "verbatim": false } } } ], "props": { "slack": { "type": "section" } } } }, { "name": "Users select", "schema": { "type": "section", "children": [ { "type": "text", "props": { "value": "`Test block with users select`", "slack": { "type": "mrkdwn", "emoji": false, "verbatim": false } } }, { "type": "select", "props": { "placeholder": "`Select a user`", "slack": { "type": "users_select", "action_id": " `users_select-action`", "placeholder_type": "plain_text", "placeholder_emoji": true, "placeholder_verbatim": false } } } ], "props": { "slack": { "type": "section" } } } }, { "name": "Static select", "schema": { "type": "section", "children": [ { "type": "text", "props": { "value": "`Pick an item from the dropdown list`", "slack": { "type": "mrkdwn", "emoji": false, "verbatim": false } } }, { "type": "select", "props": { "placeholder": "`Select an item`", "slack": { "type": "static_select", "action_id": "`static_select-action`", "placeholder_type": "plain_text", "placeholder_emoji": true }, "options": [ { "key": "value-0", "value": "`*this is plain_text text*`", "slack": { "type": "plain_text", "emoji": true } }, { "key": "value-1", "value": "`*this is plain_text text*`", "slack": { "type": "plain_text", "emoji": true } }, { "key": "value-2", "value": "`*this is plain_text text*`", "slack": { "type": "plain_text", "emoji": true } } ] } } ], "props": { "slack": { "type": "section" } } } }, { "name": "Multi conversations select", "schema": { "type": "section", "children": [ { "type": "text", "props": { "value": "`Test block with multi conversations select`", "slack": { "type": "mrkdwn", "emoji": false, "verbatim": false } } }, { "type": "select", "props": { "placeholder": "`Select conversations`", "slack": { "type": "multi_conversations_select", "action_id": "`multi_conversations_select-action`", "placeholder_type": "plain_text", "placeholder_emoji": true, "placeholder_verbatim": false } } } ], "props": { "slack": { "type": "section" } } } }, { "name": "Button", "schema": { "type": "section", "children": [ { "type": "text", "props": { "value": "`This is a section block with a button.`", "slack": { "type": "mrkdwn", "emoji": false, "verbatim": false } } }, { "type": "button", "props": { "style": "primary", "label": "`Click Me`", "slack": { "action_id": "`button-action`", "label_type": "plain_text", "label_emoji": true }, "value": "`click_me_123`" } } ], "props": { "slack": { "type": "section" } } } }, { "name": "Button link", "schema": { "type": "section", "children": [ { "type": "text", "props": { "value": "`This is a section block with a button.`", "slack": { "type": "mrkdwn", "emoji": false, "verbatim": false } } }, { "type": "button", "props": { "label": "`Click Me`", "slack": { "action_id": "`button-action`", "url": "`https://google.com`", "value": "`click_me_123`", "label_type": "plain_text", "label_emoji": true } } } ], "props": { "slack": { "type": "section" } } } }, { "name": "Image", "schema": { "type": "section", "children": [ { "type": "text", "props": { "value": "`This is a section block with an accessory image.`", "slack": { "type": "mrkdwn", "emoji": false, "verbatim": false } } }, { "type": "image", "props": { "url": "`https://pbs.twimg.com/profile_images/625633822235693056/lNGUneLX_400x400.jpg`", "alt": "`cute cat`" } } ], "props": { "slack": { "type": "section" } } } }, { "name": "Overflow", "schema": { "type": "section", "children": [ { "type": "text", "props": { "value": "`This is a section block with an overflow menu.`", "slack": { "type": "mrkdwn", "emoji": false, "verbatim": false } } }, { "type": "select", "props": { "value": "", "options": [ { "key": "value-0", "value": "`*this is plain_text text*`", "slack": { "type": "plain_text", "emoji": true } }, { "key": "value-1", "value": "`*this is plain_text text*`", "slack": { "type": "plain_text", "emoji": true } } ], "slack": { "type": "overflow", "action_id": "`overflow-action`" } } } ], "props": { "slack": { "type": "section" } } } }, { "name": "Date Picker", "schema": { "type": "section", "children": [ { "type": "text", "props": { "value": "`Pick a date for the deadline.`", "slack": { "type": "mrkdwn", "emoji": false, "verbatim": false } } }, { "type": "datePicker", "props": { "placeholder": "`Select a date`", "slack": { "action_id": "datepicker-action", "placeholder_type": "plain_text", "placeholder_emoji": true, "placeholder_verbatim": false }, "value": "1990-04-28" } } ], "props": { "slack": { "type": "section" } } } }, { "name": "Checkboxes", "schema": { "type": "section", "children": [ { "type": "text", "props": { "value": "`This is a section block with checkboxes.`", "slack": { "type": "mrkdwn", "emoji": false, "verbatim": false } } }, { "type": "checkbox", "props": { "multiple": true, "options": [ { "key": "value-0", "value": "`**this is mrkdwn text 0**`", "slack": { "type": "mrkdwn", "description": { "value": "`**this is mrkdwn text**`", "slack": { "type": "mrkdwn" } } } }, { "key": "value-1", "value": "`**this is mrkdwn text 1**`", "slack": { "type": "mrkdwn", "description": { "value": "`**this is mrkdwn text**`", "slack": { "type": "mrkdwn" } } } } ], "slack": { "action_id": "`checkboxes-action`" } } } ], "props": { "slack": { "type": "section" } } } }, { "name": "Radio Buttons", "schema": { "type": "section", "children": [ { "type": "text", "props": { "value": "`Section block with radio buttons`", "slack": { "type": "mrkdwn", "emoji": false, "verbatim": false } } }, { "type": "radio", "props": { "options": [ { "key": "value-0", "value": "`*this is plain_text text 0*`", "slack": { "type": "plain_text", "emoji": true } }, { "key": "value-1", "value": "`*this is plain_text text 1*`", "slack": { "type": "plain_text", "emoji": true } } ], "slack": { "action_id": "`radio_buttons-action`" } } } ], "props": { "slack": { "type": "section" } } } }, { "name": "Time Picker", "schema": { "type": "section", "children": [ { "type": "text", "props": { "value": "`Section block with a timepicker.`", "slack": { "type": "mrkdwn", "emoji": false, "verbatim": false } } }, { "type": "timePicker", "props": { "slack": { "action_id": "timepicker-action" }, "value": "12:00 am" } } ], "props": { "slack": { "type": "section" } } } } ] }, { "props": { "icon": "smart_button", "label": "Actions", "codeMode": true }, "blocks": [ { "name": "Button", "schema": { "type": "section", "children": [ { "type": "button", "props": { "label": "`Click Me`", "slack": { "action_id": "`actionId-0`", "value": "`click_me_123`", "label_type": "plain_text", "label_emoji": true } } } ], "props": { "slack": { "type": "actions" } } } }, { "name": "Datepicker", "schema": { "type": "section", "children": [ { "type": "datePicker", "props": { "placeholder": "`Select a date`", "slack": { "action_id": "`actionId-0`", "placeholder_type": "plain_text", "placeholder_emoji": true, "placeholder_verbatim": false }, "value": "1990-04-28" } } ], "props": { "slack": { "type": "actions" } } } }, { "name": "Checkboxes", "schema": { "type": "section", "children": [ { "type": "checkbox", "props": { "multiple": true, "options": [ { "key": "value-0", "value": "`this is plain_text text 0`", "slack": { "type": "plain_text", "emoji": true, "description": { "value": "`this is plain_text text`", "slack": { "type": "plain_text", "emoji": true } } } }, { "key": "value-1", "value": "`this is plain_text text 1`", "slack": { "type": "plain_text", "emoji": true, "description": { "value": "`this is plain_text text`", "slack": { "type": "plain_text", "emoji": true } } } } ], "slack": { "action_id": "`actionId-0`" } } }, { "type": "checkbox", "props": { "multiple": true, "options": [ { "key": "value-0", "value": "`**this is mrkdwn text 0**`", "slack": { "type": "mrkdwn", "description": { "value": "`**this is mrkdwn text**`", "slack": { "type": "mrkdwn" } } } }, { "key": "value-1", "value": "`**this is mrkdwn text 1**`", "slack": { "type": "mrkdwn", "description": { "value": "`**this is mrkdwn text**`", "slack": { "type": "mrkdwn" } } } } ], "slack": { "action_id": "`actionId-1`" } } } ], "props": { "slack": { "type": "actions" } } } }, { "name": "Radio buttons", "schema": { "type": "section", "children": [ { "type": "radio", "props": { "options": [ { "key": "value-0", "value": "`this is plain_text text`", "slack": { "type": "plain_text", "emoji": true } }, { "key": "value-1", "value": "`this is plain_text text 1`", "slack": { "type": "plain_text", "emoji": true } } ], "slack": { "action_id": "`actionId-0`" } } } ], "props": { "slack": { "type": "actions" } } } }, { "name": "Time Picker", "schema": { "type": "section", "children": [ { "type": "timePicker", "props": { "slack": { "action_id": "timepicker-action" }, "value": { "HH": "13", "mm": "37" } } } ], "props": { "slack": { "type": "actions" } } } } ] }, { "props": { "icon": "horizontal_rule", "label": "Divider", "codeMode": true }, "blocks": [ { "name": "Plain", "schema": { "type": "divider" } } ] }, { "props": { "icon": "error_outline", "label": "Context", "codeMode": true }, "blocks": [ { "name": "Plain text", "schema": { "type": "section", "children": [ { "type": "text", "props": { "value": "`Author: K A Applegate`", "slack": { "type": "plain_text", "emoji": true, "verbatim": false } } } ], "props": { "slack": { "type": "context" } } } } ] }, { "props": { "icon": "input", "label": "Input", "codeMode": true }, "blocks": [ { "name": "Multiline plain text input", "schema": { "type": "inputWrapper", "children": [ { "type": "input", "props": { "slack": { "type": "plain_text_input", "action_id": "`multiline_plain_text_input-action`", "multiline": true, "placeholder_type": "plain_text", "placeholder_emoji": false, "placeholder_verbatim": false } } } ], "props": { "placeholder": "`Write something`", "label": "`Label`", "multiline": true, "slack": { "type": "plain_text_input", "label_type": "plain_text", "label_emoji": false } } } }, { "name": "Plain text input", "schema": { "type": "inputWrapper", "children": [ { "type": "input", "props": { "slack": { "type": "plain_text_input", "action_id": "`plain_text_input-action`", "placeholder_type": "plain_text", "placeholder_emoji": false, "placeholder_verbatim": false } } } ], "props": { "placeholder": "`Write something`", "label": "`Label`", "slack": { "type": "plain_text_input", "label_type": "plain_text", "label_emoji": false } } } }, { "name": "Multi user select", "schema": { "type": "inputWrapper", "children": [ { "type": "select", "props": { "placeholder": "`Select users`", "slack": { "type": "multi_users_select", "action_id": "`multi_users_select-action`", "placeholder_type": "plain_text", "placeholder_emoji": false, "placeholder_verbatim": false } } } ], "props": { "label": "`Label`", "slack": { "type": "multi_users_select", "label_type": "plain_text", "label_emoji": false } } } }, { "name": "Static Select", "schema": { "type": "inputWrapper", "children": [ { "type": "select", "props": { "slack": { "type": "static_select", "action_id": "`static_select-action`", "placeholder_type": "plain_text", "placeholder_emoji": false, "placeholder_verbatim": false }, "placeholder": "`Select an item`", "options": [ { "key": "value-0", "value": "`*this is plain_text text 0*`", "slack": { "type": "plain_text", "emoji": false } }, { "key": "value-1", "value": "`*this is plain_text text 1*`", "slack": { "type": "plain_text", "emoji": false } } ] } } ], "props": { "label": "`Label`", "slack": { "type": "static_select", "label_type": "plain_text", "label_emoji": false } } } }, { "name": "Datepicker", "schema": { "type": "inputWrapper", "children": [ { "type": "datePicker", "props": { "placeholder": "`Select a date`", "slack": { "action_id": "`datepicker-action`", "placeholder_type": "plain_text", "placeholder_emoji": false, "placeholder_verbatim": false }, "value": "1990-04-28" } } ], "props": { "label": "`Label`", "slack": { "type": "datepicker", "label_type": "plain_text", "label_emoji": false } } } }, { "name": "Checkboxes", "schema": { "type": "inputWrapper", "children": [ { "type": "checkbox", "props": { "multiple": true, "options": [ { "key": "value-0", "value": "`*this is plain_text text 0*`", "slack": { "type": "plain_text", "emoji": false } }, { "key": "value-1", "value": "`*this is plain_text text 1*`", "slack": { "type": "plain_text", "emoji": false } } ], "slack": { "action_id": "`checkboxes-action`" } } } ], "props": { "label": "`Label`", "slack": { "type": "checkboxes", "label_type": "plain_text", "label_emoji": false } } } }, { "name": "Radio buttons", "schema": { "type": "inputWrapper", "children": [ { "type": "radio", "props": { "options": [ { "key": "value-0", "value": "`*this is plain_text text 0*`", "slack": { "type": "plain_text", "emoji": false } }, { "key": "value-1", "value": "`*this is plain_text text 1*`", "slack": { "type": "plain_text", "emoji": false } } ], "slack": { "action_id": "`radio_buttons-action`" } } } ], "props": { "label": "`Label`", "slack": { "type": "radio_buttons", "label_type": "plain_text", "label_emoji": false } } } } ] }, { "props": { "icon": "title", "label": "Header", "codeMode": true }, "blocks": [ { "name": "Example", "schema": { "type": "section", "children": [ { "type": "text", "props": { "value": "`This is a header block`", "slack": { "type": "plain_text", "emoji": true, "verbatim": false } } } ], "props": { "slack": { "type": "header" } } } } ] } ] }