slack-block-builder - npm Package Compare versions

Comparing version 1.3.1 to 1.4.0

CHANGELOG.md

 # 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
@@ -4,0 +9,0 @@

package.json

 {
   "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.",
@@ -48,5 +48,3 @@ "author": {
     "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'"
   },
@@ -53,0 +51,0 @@ "devDependencies": {

README.md

@@ -112,3 +112,3 @@ <p align="center">
 
-`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.
 
@@ -142,3 +142,4 @@ ### Object Support and Reference
 | 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()`              
 
@@ -145,0 +146,0 @@ ### Creating a Simple Interactive Message

src/bits/index.js

 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);
 
@@ -25,3 +31,3 @@ return {
 
-    ConfirmationDialog: (params) => getClass(ConfirmationDialog, params),
+    ConfirmationDialog: (params) => getInstance(ConfirmationDialog, params),
 
@@ -41,6 +47,6 @@ /**
 
-    Option: (params) => getClass(Option, params),
+    Option: (params) => getInstance(Option, params),
 
     /**
-     * Creates and returns an OpotionGroup Bit
+     * Creates and returns an OptionGroup Bit
      *
@@ -54,3 +60,15 @@ * {@link https://api.slack.com/reference/block-kit/composition-objects#option_group|View in Slack API Documentation}
 
-    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),
   };
@@ -63,4 +81,5 @@ };
   OptionGroup,
+  Attachment,
   BitDto,
   getBits,
 };

src/blocks/index.js

@@ -20,3 +20,3 @@ const { Actions, ActionsDto } = require('./actions');
 const getBlocks = () => {
-  const getClass = (Class, params) => new Class(params);
+  const getInstance = (Class, params) => new Class(params);
 
@@ -35,3 +35,3 @@ return {
 
-    Actions: (params) => getClass(Actions, params),
+    Actions: (params) => getInstance(Actions, params),
 
@@ -48,3 +48,3 @@ /**
 
-    Context: (params) => getClass(Context, params),
+    Context: (params) => getInstance(Context, params),
 
@@ -61,3 +61,3 @@ /**
 
-    Divider: (params) => getClass(Divider, params),
+    Divider: (params) => getInstance(Divider, params),
 
@@ -75,3 +75,3 @@ /**
 
-    File: (params) => getClass(File, params),
+    File: (params) => getInstance(File, params),
 
@@ -91,3 +91,3 @@ /**
 
-    Image: (params) => getClass(Image, params),
+    Image: (params) => getInstance(Image, params),
 
@@ -106,3 +106,3 @@ /**
 
-    Input: (params) => getClass(Input, params),
+    Input: (params) => getInstance(Input, params),
 
@@ -120,3 +120,3 @@ /**
 
-    Section: (params) => getClass(Section, params),
+    Section: (params) => getInstance(Section, params),
   };
@@ -123,0 +123,0 @@ };

src/elements/base/action-element.js

@@ -11,3 +11,2 @@ const Element = require('./element');
 class ActionElement extends Element {
-
   /**
@@ -14,0 +13,0 @@ * Sets a string to be an identifier for the source of

src/elements/base/confirmable-element.js

@@ -5,3 +5,2 @@ const ActionElement = require('./action-element');
 class ConfirmableElement extends ActionElement {
-
   /**
@@ -8,0 +7,0 @@ * Adds a ConfirmationDialog to be shown upon interacting with

src/elements/base/multiselect-element.js

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

src/elements/base/select-element.js

@@ -5,3 +5,2 @@ const ConfirmableElement = require('./confirmable-element');
 class SelectElement extends ConfirmableElement {
-
   /**
@@ -8,0 +7,0 @@ * Adds the text in place of the input before selected or

src/elements/base/selectable-element.js

@@ -5,3 +5,2 @@ const ConfirmableElement = require('./confirmable-element');
 class SelectableElement extends ConfirmableElement {
-
   /**
@@ -8,0 +7,0 @@ * Sets the Options for the current Element

src/elements/button.js

@@ -25,3 +25,3 @@ const { ConfirmableElement } = require('./base');
 class Button extends ConfirmableElement {
-  constructor(params= {}) {
+  constructor(params = {}) {
     super();
@@ -28,0 +28,0 @@

src/elements/index.js

@@ -40,3 +40,3 @@ const { Button, ButtonDto } = require('./button');
 const getElements = () => {
-  const getClass = (Class, params) => new Class(params);
+  const getInstance = (Class, params) => new Class(params);
 
@@ -58,3 +58,3 @@ return {
 
-    Button: (params) => getClass(Button, params),
+    Button: (params) => getInstance(Button, params),
 
@@ -73,3 +73,3 @@ /**
 
-    ChannelMultiSelect: (params) => getClass(ChannelMultiSelect, params),
+    ChannelMultiSelect: (params) => getInstance(ChannelMultiSelect, params),
 
@@ -88,3 +88,3 @@ /**
 
-    ChannelSelect: (params) => getClass(ChannelSelect, params),
+    ChannelSelect: (params) => getInstance(ChannelSelect, params),
 
@@ -101,3 +101,3 @@ /**
 
-    Checkboxes: (params) => getClass(Checkboxes, params),
+    Checkboxes: (params) => getInstance(Checkboxes, params),
 
@@ -116,3 +116,3 @@ /**
 
-    ConversationMultiSelect: (params) => getClass(ConversationMultiSelect, params),
+    ConversationMultiSelect: (params) => getInstance(ConversationMultiSelect, params),
 
@@ -131,3 +131,3 @@ /**
 
-    ConversationSelect: (params) => getClass(ConversationSelect, params),
+    ConversationSelect: (params) => getInstance(ConversationSelect, params),
 
@@ -146,3 +146,3 @@ /**
 
-    DatePicker: (params) => getClass(DatePicker, params),
+    DatePicker: (params) => getInstance(DatePicker, params),
 
@@ -162,3 +162,3 @@ /**
 
-    ExternalMultiSelect: (params) => getClass(ExternalMultiSelect, params),
+    ExternalMultiSelect: (params) => getInstance(ExternalMultiSelect, params),
 
@@ -177,3 +177,3 @@ /**
 
-    ExternalSelect: (params) => getClass(ExternalSelect, params),
+    ExternalSelect: (params) => getInstance(ExternalSelect, params),
 
@@ -191,3 +191,3 @@ /**
 
-    Img: (params) => getClass(Img, params),
+    Img: (params) => getInstance(Img, params),
 
@@ -204,3 +204,3 @@ /**
 
-    OverflowMenu: (params) => getClass(OverflowMenu, params),
+    OverflowMenu: (params) => getInstance(OverflowMenu, params),
 
@@ -217,3 +217,3 @@ /**
 
-    RadioButtons: (params) => getClass(RadioButtons, params),
+    RadioButtons: (params) => getInstance(RadioButtons, params),
 
@@ -232,3 +232,3 @@ /**
 
-    StaticMultiSelect: (params) => getClass(StaticMultiSelect, params),
+    StaticMultiSelect: (params) => getInstance(StaticMultiSelect, params),
 
@@ -246,3 +246,3 @@ /**
 
-    StaticSelect: (params) => getClass(StaticSelect, params),
+    StaticSelect: (params) => getInstance(StaticSelect, params),
 
@@ -263,3 +263,3 @@ /**
 
-    TextInput: (params) => getClass(TextInput, params),
+    TextInput: (params) => getInstance(TextInput, params),
 
@@ -278,3 +278,3 @@ /**
 
-    UserMultiSelect: (params) => getClass(UserMultiSelect, params),
+    UserMultiSelect: (params) => getInstance(UserMultiSelect, params),
 
@@ -293,3 +293,3 @@ /**
 
-    UserSelect: (params) => getClass(UserSelect, params),
+    UserSelect: (params) => getInstance(UserSelect, params),
   };
@@ -296,0 +296,0 @@ };

src/surfaces/base/advanced-surface.js

@@ -5,3 +5,2 @@ const Surface = require('./surface');
 class AdvancedSurface extends Surface {
-
   /**
@@ -8,0 +7,0 @@ * Sets a string sent back to your server together with all action and submission events.

src/surfaces/index.js

@@ -12,3 +12,3 @@ const { HomeTab, HomeTabDto } = require('./home-tab');
 const getSurfaces = () => {
-  const getClass = (Class, params) => new Class(params);
+  const getInstance = (Class, params) => new Class(params);
 
@@ -29,3 +29,3 @@ return {
 
-    HomeTab: (params) => getClass(HomeTab, params),
+    HomeTab: (params) => getInstance(HomeTab, params),
 
@@ -45,3 +45,3 @@ /**
 
-    Message: (params) => getClass(Message, params),
+    Message: (params) => getInstance(Message, params),
 
@@ -63,3 +63,3 @@ /**
 
-    Modal: (params) => getClass(Modal, params),
+    Modal: (params) => getInstance(Modal, params),
   };
@@ -66,0 +66,0 @@ };

src/surfaces/message.js

@@ -13,2 +13,3 @@ const { Surface } = require('./base');
     this.blocks = params.blocks;
+    this.attachments = params.attachments;
     this.as_user = params.asUser;
@@ -40,2 +41,15 @@ this.ts = params.ts;
   /**
+   * Sets the Attachments of the Message object
+   *
+   * {@link https://api.slack.com/reference/messaging/attachments|View in Slack API Documentation}
+   *
+   * @param {...Attachment|Array<Attachment>} attachments Accepts multiple arguments or Array
+   * @return {this} The instance on which the method is called
+   */
+
+  attachments(...attachments) {
+    return this.append(attachments.flat(), props.attachments);
+  }
+
+  /**
    * The Slack channel ID to which the message is to be sent
@@ -168,2 +182,16 @@ *
   /**
+   * Builds the view and returns a Slack API-compatible array of Attachment objects.
+   *
+   * {@link https://api.slack.com/reference/messaging/attachments|View in Slack API Documentation}
+   *
+   * @return {Array} Array of built Attachment objects
+   */
+
+  getAttachments() {
+    this.build();
+
+    return [...this.result.attachments];
+  }
+
+  /**
    * When called, builds the view and prints to the console the preview URL in
@@ -176,3 +204,3 @@ * order to open and preview the view on the Slack Block Builder website
 
-    console.log(encodeURI(`https://app.slack.com/block-kit-builder/#${JSON.stringify({ blocks: this.result.blocks })}`).replace(/[!'()*]/g, escape));
+    console.log(encodeURI(`https://app.slack.com/block-kit-builder/#${JSON.stringify({ blocks: this.result.blocks, attachments: this.result.attachments })}`).replace(/[!'()*]/g, escape));
   }
@@ -188,2 +216,3 @@
         blocks: BuilderHelper.getBuilderResults(this.props.blocks),
+        attachments: BuilderHelper.getBuilderResults(this.props.attachments),
       };
@@ -190,0 +219,0 @@

src/utility/constants/classes.js

@@ -6,2 +6,3 @@ module.exports = {
   img: 'Img',
+  attachment: 'Attachment',
 };

src/utility/constants/param-map.js

@@ -61,2 +61,4 @@ module.exports = {
   postAt: 'post_at',
+  color: 'color',
+  attachments: 'attachments',
 };

src/utility/constants/props.js

@@ -65,2 +65,4 @@ module.exports = {
   ts: 'ts',
+  color: 'color',
+  attachments: 'attachments',
 };

src/utility/helpers/builder-helper.js

@@ -104,4 +104,4 @@ const Objects = require('../../objects');
   }
-} 
+}
 
 module.exports = BuilderHelper;

src/utility/helpers/validation-helper.js

@@ -9,2 +9,2 @@ const defaultTypeRules = require('../validators/default-type-rules');
 
-module.exports = ValidationHelper;
+module.exports = ValidationHelper;

src/utility/validators/default-type-rules.js

@@ -65,2 +65,4 @@ const types = require('./type-validators');
   postAt: types.isTimestamp,
+  color: types.isString,
+  attachments: types.areAttachments,
 };

src/utility/validators/type-validators.js

@@ -97,2 +97,9 @@ const Validator = require('../lib/validator');
   }),
+
+  areAttachments: new Validator({
+    condition: (values) => (Array.isArray(values)
+      ? values.filter((value) => value.class === classes.attachment).length === values.length
+      : false),
+    message: 'instances of Attachment',
+  }),
 };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

159506

increased by2.42%

Number of package files

82

increased by1.23%

Lines of code

3786

increased by2.96%

Number of lines in readme file

308

increased by0.33%

No dependency changes