✨ Add support for message attachments

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Change Log
 
+## v1.4.0 – 2020-07-01
+
+* Add support for message attachments using the `Message.attachments()` method, passing in objects created through the `Bits.Attachment()` method.
+* Add `Message.getAttachments()` method (works the same as the existing `Surface.getBlocks()` method).
+
 ## v1.3.1 – 2020-06-30
 
 * Add support for markdown for the `description` property of the `Options` `Bit` object.

README.md

@@ -109,7 +109,7 @@ _Note that since you'll more often only be working with one surface per file, th
 
 `Elements` – UI elements that are used to capture user interaction.
 
-`Bits` – These are composition objects from Slack's docs that are more focused on UI, not data structure (unlike text and filter objects). Included are `Options`, `OptionGroup`, and `ConfirmationDialog`. They felt like they were deserving of their own category.
+`Bits` – These are composition objects and other bits and pieces from Slack's docs. Included are `Attachment`, `Options`, `OptionGroup`, and `ConfirmationDialog`. They felt like they were deserving of their own category.
 
 ### Object Support and Reference
 
@@ -138,7 +138,8 @@ Below is a list of supported objects and how to access them in **Block Builder**
 | Multi-Select Menus   | Element            | :white_check_mark:             | `Elements.[Type]MultiSelect()`     
 | Option               | Composition Object | :white_check_mark:             | `Bits.Option()`                   
 | Confirm Dialog       | Composition Object | :white_check_mark:             | `Bits.ConfirmationDialog()`       
-| Option Group         | Composition Object | :white_check_mark:             | `Bits.OptionGroup()`              
+| Option Group         | Composition Object | :white_check_mark:             | `Bits.OptionGroup()`
+| Attachment           | Legacy Feature     | :white_check_mark:             | `Bits.Attachment()`              
 
 ### Creating a Simple Interactive Message
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "slack-block-builder",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "description": "Maintainable code for interactive Slack messages, modals and home tabs. A must-have for the Slack Block Kit framework.",
   "author": {
     "name": "Ray East",
@@ -45,9 +45,7 @@
   "scripts": {
     "test": "jest",
     "lint-fix": "eslint 'src/**/*.js' --fix",
-    "lint-check": "eslint 'src/**/*.js'",
-    "prettier-fix": "prettier --write 'src/**/*.js'",
-    "prettier-check": "prettier --check 'src/**/*.js'"
+    "lint-check": "eslint 'src/**/*.js'"
   },
   "devDependencies": {
     "eslint": "^6.8.0",

src/bits/attachment.js

@@ -0,0 +1,68 @@
+const { Bit } = require('./base');
+const { SlackDto } = require('../utility/lib');
+const { BuilderHelper } = require('../utility/helpers');
+const { props } = require('../utility/constants');
+
+class AttachmentDto extends SlackDto {
+  constructor(params) {
+    super();
+
+    this.color = params.color;
+    this.blocks = params.blocks;
+
+    this.pruneAndFreeze();
+  }
+}
+
+class Attachment extends Bit {
+  constructor(params = {}) {
+    super();
+
+    this.props.color = params.color;
+
+    this.finalizeConstruction();
+  }
+
+  /**
+   * Sets the color of the border to the left of the block quote for the Attachment
+   *
+   * {@link https://api.slack.com/reference/messaging/attachments|View in Slack API Documentation}
+   *
+   * @param {string} string
+   * @return {this} The instance on which the method is called
+   */
+
+  color(string) {
+    return this.set(string, props.color);
+  }
+
+  /**
+   * Adds Blocks to the Attachment object
+   *
+   * {@link https://api.slack.com/reference/messaging/attachments|View in Slack API Documentation}
+   *
+   * @param {...Block|Array<Block>} blocks Accepts multiple arguments or Array
+   * @return {this} The instance on which the method is called
+   */
+
+  blocks(...blocks) {
+    return this.append(blocks.flat(), props.blocks);
+  }
+
+  /**
+   * @private
+   */
+
+  build() {
+    const augmentedProps = {
+      blocks: BuilderHelper.getBuilderResults(this.props.blocks),
+    };
+
+    return this.getResult(AttachmentDto, augmentedProps);
+  }
+}
+
+module.exports = {
+  Attachment,
+  AttachmentDto,
+};

src/bits/index.js

@@ -1,11 +1,17 @@
 const { ConfirmationDialog, ConfirmationDialogDto } = require('./confirmation-dialog');
 const { Option, OptionDto } = require('./option');
 const { OptionGroup, OptionGroupDto } = require('./option-group');
+const { Attachment, AttachmentDto } = require('./attachment');
 
-const BitDto = { ConfirmationDialogDto, OptionDto, OptionGroupDto };
+const BitDto = {
+  ConfirmationDialogDto,
+  OptionDto,
+  OptionGroupDto,
+  AttachmentDto,
+};
 
 const getBits = (config) => {
-  const getClass = (Class, params) => new Class(params, config);
+  const getInstance = (Class, params) => new Class(params, config);
 
   return {
 
@@ -22,7 +28,7 @@ const getBits = (config) => {
      * @return {ConfirmationDialog} An instance of ConfirmationDialog
      */
 
-    ConfirmationDialog: (params) => getClass(ConfirmationDialog, params),
+    ConfirmationDialog: (params) => getInstance(ConfirmationDialog, params),
 
     /**
      * Creates and returns an Option Bit
@@ -37,10 +43,10 @@ const getBits = (config) => {
      * @return {Option} An instance of Option
      */
 
-    Option: (params) => getClass(Option, params),
+    Option: (params) => getInstance(Option, params),
 
     /**
-     * Creates and returns an OpotionGroup Bit
+     * Creates and returns an OptionGroup Bit
      *
      * {@link https://api.slack.com/reference/block-kit/composition-objects#option_group|View in Slack API Documentation}
      *
@@ -49,14 +55,27 @@ const getBits = (config) => {
      * @return {OptionGroup} An instance of OptionsGroup
      */
 
-    OptionGroup: (params) => getClass(OptionGroup, params),
+    OptionGroup: (params) => getInstance(OptionGroup, params),
+
+    /**
+     * Creates and returns an Attachment Bit that can be attached to Message objects
+     *
+     * {@link https://api.slack.com/reference/messaging/attachments|View in Slack API Documentation}
+     *
+     * @param {Object} [params] Constructor parameters
+     * @param {string} [params.color] Sets the color of the block quote border
+     * @return {Attachment} An instance of Attachment
+     */
+
+    Attachment: (params) => getInstance(Attachment, params),
   };
 };
 
 module.exports = {
   ConfirmationDialog,
   Option,
   OptionGroup,
+  Attachment,
   BitDto,
   getBits,
 };

src/blocks/index.js

@@ -17,7 +17,7 @@ const BlockDto = {
 };
 
 const getBlocks = () => {
-  const getClass = (Class, params) => new Class(params);
+  const getInstance = (Class, params) => new Class(params);
 
   return {
 
@@ -31,7 +31,7 @@ const getBlocks = () => {
      * @return {Actions} An instance of Actions
      */
 
-    Actions: (params) => getClass(Actions, params),
+    Actions: (params) => getInstance(Actions, params),
 
     /**
      * Creates and returns a Context Block
@@ -43,7 +43,7 @@ const getBlocks = () => {
      * @return {Context} An instance of Context
      */
 
-    Context: (params) => getClass(Context, params),
+    Context: (params) => getInstance(Context, params),
 
     /**
      * Creates and returns a Divider
@@ -55,7 +55,7 @@ const getBlocks = () => {
      * @return {Divider} An instance of Divider
      */
 
-    Divider: (params) => getClass(Divider, params),
+    Divider: (params) => getInstance(Divider, params),
 
     /**
      * Creates and returns a File Block
@@ -68,7 +68,7 @@ const getBlocks = () => {
      * @return {File} An instance of File
      */
 
-    File: (params) => getClass(File, params),
+    File: (params) => getInstance(File, params),
 
     /**
      * Creates and returns an Image Block
@@ -83,7 +83,7 @@ const getBlocks = () => {
      * @return {Image} An instance of Image
      */
 
-    Image: (params) => getClass(Image, params),
+    Image: (params) => getInstance(Image, params),
 
     /**
      * Creates and returns an Input Block
@@ -97,7 +97,7 @@ const getBlocks = () => {
      * @return {Input} An instance of Input
      */
 
-    Input: (params) => getClass(Input, params),
+    Input: (params) => getInstance(Input, params),
 
     /**
      * Creates and returns a Section Block
@@ -110,7 +110,7 @@ const getBlocks = () => {
      * @return {Section} An instance of Section
      */
 
-    Section: (params) => getClass(Section, params),
+    Section: (params) => getInstance(Section, params),
   };
 };
 

src/elements/base/action-element.js

@@ -8,7 +8,6 @@ const { props } = require('../../utility/constants');
  */
 
 class ActionElement extends Element {
-
   /**
    * Sets a string to be an identifier for the source of
    * an action in interaction payloads

src/elements/base/confirmable-element.js

@@ -2,7 +2,6 @@ const ActionElement = require('./action-element');
 const { props } = require('../../utility/constants');
 
 class ConfirmableElement extends ActionElement {
-
   /**
    * Adds a ConfirmationDialog to be shown upon interacting with
    * the current element or submitting the view

src/elements/base/multiselect-element.js

@@ -2,7 +2,6 @@ const SelectElement = require('./select-element');
 const { props } = require('../../utility/constants');
 
 class MultiSelectElement extends SelectElement {
-
   /**
    * Sets a limit to how many items the user can select in any one MultiSelect
    *

src/elements/base/select-element.js

@@ -2,7 +2,6 @@ const ConfirmableElement = require('./confirmable-element');
 const { props } = require('../../utility/constants');
 
 class SelectElement extends ConfirmableElement {
-
   /**
    * Adds the text in place of the input before selected or
    * interacted with

src/elements/base/selectable-element.js

@@ -2,7 +2,6 @@ const ConfirmableElement = require('./confirmable-element');
 const { props } = require('../../utility/constants');
 
 class SelectableElement extends ConfirmableElement {
-
   /**
    * Sets the Options for the current Element
    *

src/elements/button.js

@@ -22,7 +22,7 @@ class ButtonDto extends SlackDto {
 
 
 class Button extends ConfirmableElement {
-  constructor(params= {}) {
+  constructor(params = {}) {
     super();
 
     this.props.text = params.text;