Merge pull request #97 from raycharius/v2.6.0

✨ Add Video function and VideoBuilder to support the video b…

README.md

@@ -141,7 +141,8 @@ Below is a list of supported objects and how to access them in **Block Builder**
 | Header               | Block              | :white_check_mark:             | `Blocks.Header()`
 | Image                | Block              | :white_check_mark:             | `Blocks.Image()`                  
 | Input                | Block              | :white_check_mark:             | `Blocks.Input()`                  
-| Section              | Block              | :white_check_mark:             | `Blocks.Section()`                
+| Section              | Block              | :white_check_mark:             | `Blocks.Section()`
+| Video                | Block              | :white_check_mark:             | `Blocks.Video()`                
 | Button               | Element            | :white_check_mark:️             | `Elements.Button()`               
 | Checkboxes           | Element            | :white_check_mark:             | `Elements.Checkboxes()`           
 | Date Picker          | Element            | :white_check_mark:             | `Elements.DatePicker()`

docs/_sidebar.md

@@ -32,6 +32,7 @@
   * [Image](blocks/image.md "Block Builder – Image – Maintainable JavaScript Code for Slack Block Kit")
   * [Input](blocks/input.md "Block Builder – Input – Maintainable JavaScript Code for Slack Block Kit")
   * [Section](blocks/section.md "Block Builder – Section – Maintainable JavaScript Code for Slack Block Kit")
+  * [Video](blocks/video.md "Block Builder – Video – Maintainable JavaScript Code for Slack Block Kit")
 
 
 * **Element References**

docs/bits/option.md

@@ -42,7 +42,7 @@ All setter methods return `this`, the instance of `OptionBuilder` on which it is
 OptionBuilder.description(string);
 ```
 
-Sets the descriptive text displayed below the text field of the option. 
+Sets the descriptive text displayed below the text field of the option or for a video, if creating a Video block. 
 ```javascript
 OptionBuilder.text(string);
 ```

docs/blocks/video.md

@@ -0,0 +1,108 @@
+# Video
+
+?> **Note:** This document is a reference to the `VideoBuilder` object in **Block Builder**. For more information on how this carries over to the Slack API, view the [the Video docs](https://api.slack.com/reference/block-kit/blocks#video) on Slack's doc site.
+
+### Creating an Instance 
+
+The function that creates a new instance of `VideoBuilder` is available as both a top-level import and as a member of its 'category', `Blocks`:
+
+```javascript
+import { Video } from 'slack-block-builder';
+
+const myObj = Video(params?);
+
+```
+
+```javascript
+import { Blocks } from 'slack-block-builder';
+
+const myObj = Blocks.Video(params?);
+```
+
+### Params
+
+Each instance of the `VideoBuilder` object has chainable setter methods for the object's properties. However, properties with primitive values can optionally be passed to the instantiating function, should you prefer:
+
+`blockId` – *String*
+
+`description` – *String*
+
+`providerIconUrl` – *String*
+
+`providerName` – *String*
+
+`thumbnailUrl` – *String*
+
+`title` – *String*
+
+`titleUrl` – *String*
+
+`videoUrl` – *String*
+
+
+?> **Note:** For an explanation of any one of the parameters, see its corresponding setter method below.
+
+### Setter Methods
+
+All setter methods return `this`, the instance of `VideoBuilder` on which it is called.
+
+```javascript
+VideoBuilder.altText(string);
+```
+
+This a plain-text summary of the image element or block. 
+```javascript
+VideoBuilder.authorName(string);
+```
+
+This a plain-text representation of the author of a video. 
+```javascript
+VideoBuilder.blockId(string);
+```
+
+Sets a string to be an identifier for any given block in a view or message. This is sent back to your app in interaction payloads and view submissions for your app to process. 
+```javascript
+VideoBuilder.description(string);
+```
+
+Sets the descriptive text displayed below the text field of the option or for a video, if creating a Video block. 
+```javascript
+VideoBuilder.providerIconUrl(string);
+```
+
+Icon for the video provider - ex. YouTube or Vimeo icon. 
+```javascript
+VideoBuilder.providerName(string);
+```
+
+The originating application or domain of the video ex. YouTube or Vimeo. 
+```javascript
+VideoBuilder.thumbnailUrl(string);
+```
+
+A URL that loads the thumbnail image of the video. 
+```javascript
+VideoBuilder.title(string);
+```
+
+Sets the title displayed for the block, element, or confirmation dialog. 
+```javascript
+VideoBuilder.titleUrl(string);
+```
+
+A hyperlink for the video's title text. 
+```javascript
+VideoBuilder.videoUrl(string);
+```
+
+The URL of the video to embed in the Video block. 
+
+### Other Methods
+
+The `VideoBuilder` object also has other methods available:
+
+```javascript
+VideoBuilder.end();
+```
+
+Performs no alterations to the object on which it is called. It is meant to simulate a closing HTML tag for those who prefer to have an explicit end declared for an object. 

docs/support.md

@@ -19,6 +19,7 @@ Below is a list of supported components and how to access them in **Block Builde
 | Image                | Block              | **Yes**             | `Blocks.Image()`                  | [View Docs](/blocks/image.md)
 | Input                | Block              | **Yes**             | `Blocks.Input()`                  | [View Docs](/blocks/input.md)
 | Section              | Block              | **Yes**             | `Blocks.Section()`                | [View Docs](/blocks/section.md)
+| Video                | Video              | **Yes**             | `Blocks.Video()`                  | [View Docs](/blocks/video.md)
 | Button               | Element            | **Yes**️             | `Elements.Button()`               | [View Docs](/elements/button.md)
 | Checkboxes           | Element            | **Yes**             | `Elements.Checkboxes()`           | [View Docs](/elements/checkboxes.md)
 | Date Picker          | Element            | **Yes**             | `Elements.DatePicker()`           | [View Docs](/elements/datepicker.md)
@@ -29,8 +30,8 @@ Below is a list of supported components and how to access them in **Block Builde
 | Time Picker          | Element            | **Yes**             | `Elements.TimePicker()`           | [View Docs](/elements/timepicker.md)
 | Select Menus         | Element            | **Yes**             | `Elements.[Type]Select()`         | 
 | Multi-Select Menus   | Element            | **Yes**             | `Elements.[Type]MultiSelect()`    | 
-| Attachment           | Legacy Feature     | **Yes**             | `Bits.Attachment()`              | [View Docs](/bits/attachment.md)
-| Confirmation Dialog       | Composition Object | **Yes**             | `Bits.ConfirmationDialog()`       | [View Docs](/bits/confirmation-dialog.md)
+| Attachment           | Legacy Feature     | **Yes**             | `Bits.Attachment()`               | [View Docs](/bits/attachment.md)
+| Confirmation Dialog  | Composition Object | **Yes**             | `Bits.ConfirmationDialog()`       | [View Docs](/bits/confirmation-dialog.md)
 | Option               | Composition Object | **Yes**             | `Bits.Option()`                   | [View Docs](/bits/option.md)
 | Option Group         | Composition Object | **Yes**             | `Bits.OptionGroup()`              | [View Docs](/bits/option-group.md)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "slack-block-builder",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "description": "Maintainable code for interactive Slack messages, modals, home tabs, and workflow steps. A must-have for the Slack Block Kit framework.",
   "author": {
     "name": "Ray East",

src/blocks/divider.ts

@@ -20,7 +20,7 @@ export interface DividerBuilder extends BlockId,
 export class DividerBuilder extends BlockBuilderBase {
   /** @internal */
 
-  build(): Readonly<SlackBlockDto> {
+  public build(): Readonly<SlackBlockDto> {
     return this.getResult(SlackBlockDto, {
       type: BlockType.Divider,
     });

src/blocks/index.ts

@@ -8,6 +8,7 @@ import { HeaderBuilder, HeaderParams } from './header';
 import { ImageBuilder, ImageParams } from './image';
 import { InputBuilder, InputParams } from './input';
 import { SectionBuilder, SectionParams } from './section';
+import { VideoBuilder, VideoParams } from './video';
 
 export type {
   ActionsBuilder,
@@ -26,6 +27,8 @@ export type {
   InputParams,
   SectionBuilder,
   SectionParams,
+  VideoBuilder,
+  VideoParams,
 };
 
 /**
@@ -128,6 +131,24 @@ export function Section(params?: SectionParams): SectionBuilder {
   return new SectionBuilder(params);
 }
 
+/**
+ * @param {Object} [params] Parameters passed to the constructor.
+ * @param {string} [params.blockId] Sets a string to be an identifier for the block, that will be available in interaction payloadsSets a string to be an identifier for any given block in a view or message. This is sent back to your app in interaction payloads and view submissions for your app to process.
+ * @param {string} [params.description] Sets a description for the video.
+ * @param {string} [params.providerIconUrl] Icon for the video provider - ex. YouTube or Vimeo icon.
+ * @param {string} [params.providerName] The originating application or domain of the video ex. YouTube or Vimeo.
+ * @param {string} [params.thumbnailUrl] A URL that loads the thumbnail image of the video.
+ * @param {string} [params.title] Sets the title displayed for the block, element, or confirmation dialog.
+ * @param {string} [params.titleUrl] A hyperlink for the video's title text.
+ * @param {string} [params.videoUrl] The URL of the video to embed in the Video block.
+ *
+ * {@link https://api.slack.com/reference/block-kit/blocks#section|View in Slack API Documentation}
+ */
+
+export function Video(params?: VideoParams): VideoBuilder {
+  return new VideoBuilder(params);
+}
+
 const blocks = {
   Actions,
   Context,
@@ -137,6 +158,7 @@ const blocks = {
   Image,
   Input,
   Section,
+  Video,
 };
 
 // Strange export. I know. For IDE highlighting purposes.

src/blocks/video.ts

@@ -0,0 +1,72 @@
+import { BlockBuilderBase } from '../internal/base';
+import { BlockType } from '../internal/constants';
+import { SlackBlockDto } from '../internal/dto';
+import { applyMixins, getPlainTextObject } from '../internal/helpers';
+import {
+  AltText,
+  AuthorName,
+  BlockId,
+  Description,
+  End,
+  ProviderIconUrl,
+  ProviderName,
+  ThumbnailUrl,
+  Title,
+  TitleUrl,
+  VideoUrl,
+} from '../internal/methods';
+
+export interface VideoParams {
+  blockId?: string;
+  description?: string;
+  providerIconUrl?: string;
+  providerName?: string;
+  thumbnailUrl?: string;
+  title?: string;
+  titleUrl?: string;
+  videoUrl?: string;
+}
+
+export interface VideoBuilder extends AltText,
+  AuthorName,
+  BlockId,
+  Description,
+  End,
+  ProviderIconUrl,
+  ProviderName,
+  ThumbnailUrl,
+  Title,
+  TitleUrl,
+  VideoUrl {
+}
+
+/**
+ * @@link https://api.slack.com/reference/block-kit/blocks#video
+ * @@displayName Video
+ */
+
+export class VideoBuilder extends BlockBuilderBase {
+  /** @internal */
+
+  build(): Readonly<SlackBlockDto> {
+    return this.getResult(SlackBlockDto, {
+      type: BlockType.Video,
+      description: getPlainTextObject(this.props.description),
+      title: getPlainTextObject(this.props.title),
+    });
+  }
+}
+
+applyMixins(VideoBuilder, [
+  AltText,
+  AuthorName,
+  BlockId,
+  Description,
+  End,
+  ProviderIconUrl,
+  ProviderName,
+  ThumbnailUrl,
+  Title,
+  TitleUrl,
+  VideoUrl,
+]);

src/components/accordion-ui-component.ts

@@ -1,8 +1,8 @@
 import { Blocks } from '../blocks';
 import { Elements } from '../elements';
 import { ComponentUIText } from '../internal/constants';
+import { Builder, AccordionStateManager, AccordionState } from '../internal/lib';
 
-import type { AccordionStateManager, AccordionState } from '../internal/lib';
 import type {
   BlockBuilderReturnableFn,
   BlockBuilder,
@@ -54,7 +54,7 @@ export class AccordionUIComponent<T> {
   }
 
   public getBlocks(): BlockBuilder[] {
-    return this.items.map((item, index) => {
+    const unpruned = this.items.map((item, index) => {
       const isExpanded = this.paginator.checkItemIsExpandedByIndex(index);
 
       const blocks = [
@@ -65,10 +65,12 @@ export class AccordionUIComponent<T> {
               expandedItems: this.paginator.getNextStateByItemIndex(index),
             }),
           })),
-        ...isExpanded ? this.builderFunction({ item }) : [],
+        ...isExpanded ? this.builderFunction({ item }).flat() : [],
       ];
 
       return index === 0 ? blocks : [Blocks.Divider(), ...blocks];
     }).flat();
+
+    return Builder.pruneUndefinedFromArray(unpruned);
   }
 }

src/components/paginator-ui-component.ts

@@ -1,8 +1,8 @@
 import { Blocks } from '../blocks';
 import { Elements } from '../elements';
 import { ComponentUIText, PaginatorButtonId } from '../internal/constants';
+import { Builder, PaginatorStateManager, PaginatorState } from '../internal/lib';
 
-import type { PaginatorStateManager, PaginatorState } from '../internal/lib';
 import type {
   BlockBuilder,
   BlockBuilderReturnableFn,
@@ -62,10 +62,10 @@ export class PaginatorUIComponent<T> {
     const blocksForEach = [];
 
     for (let i = 0; i < this.paginator.getTotalItems() && i < this.items.length; i += 1) {
-      blocksForEach.push(this.builderFunction({ item: this.items[i] }));
+      blocksForEach.push(this.builderFunction({ item: this.items[i] }).flat());
     }
 
-    return this.paginator.getTotalPages() > 1
+    const unpruned = this.paginator.getTotalPages() > 1
       ? [
         ...blocksForEach.flat(),
         Blocks.Context().elements(this.pageCountTextFunction({
@@ -92,5 +92,7 @@ export class PaginatorUIComponent<T> {
           ),
       ]
       : blocksForEach.flat();
+
+    return Builder.pruneUndefinedFromArray(unpruned);
   }
 }

src/internal/constants/block-types.ts

@@ -7,4 +7,5 @@ export enum BlockType {
   Divider = 'divider',
   Image = 'image',
   Header = 'header',
+  Video = 'video',
 }

src/internal/constants/props.ts

@@ -1,4 +1,5 @@
 export enum Prop {
+  AuthorName = 'authorName',
   Blocks = 'blocks',
   Elements = 'elements',
   BlockId = 'blockId',
@@ -77,4 +78,9 @@ export enum Prop {
   SubmitDisabled = 'submitDisabled',
   FocusOnLoad = 'focusOnLoad',
   AccessibilityLabel = 'accessibilityLabel',
+  ProviderIconUrl = 'providerIconUrl',
+  ProviderName = 'providerName',
+  TitleUrl = 'titleUrl',
+  ThumbnailUrl = 'thumbnailUrl',
+  VideoUrl = 'videoUrl',
 }

src/internal/dto/slack-dto.ts

@@ -75,6 +75,12 @@ export enum Param {
   type = 'type',
   focusOnLoad = 'focus_on_load',
   accessibilityLabel = 'accessibility_label',
+  authorName = 'author_name',
+  providerIconUrl = 'provider_icon_url',
+  providerName = 'provider_name',
+  titleUrl = 'title_url',
+  thumbnailUrl = 'thumbnail_url',
+  videoUrl = 'video_url',
 }
 
 export class SlackDto implements ObjectLiteral {