slack-blocks-to-jsx 0.1.6 → 0.1.8

package/dist/index.d.mts

@@ -1,3 +1,5 @@
+import { ReactNode } from 'react';
+
 type Element = ButtonElement | CheckboxesElement | DatePickerElement | DateTimePickerElement | EmailInputElement | ImageElement | MultiStaticSelectElement | MultiExternalSelectElement | MultiUsersSelectElement | MultiConversationsSelectElement | MultiChannelsSelectElement | NumberInputElement | OverflowMenuElement | PlainTextInputElement | RadioButtonsElement | StaticSelectElement | ExternalSelectElement | UsersSelectElement | ConversationsSelectElement | ChannelsSelectElement | TimePickerElement | UrlTextInputElement;
 type ButtonElement = {
     type: "button";
@@ -697,6 +699,87 @@ type FilterObject = {
     exclude_bot_users?: boolean;
 };
 
+type RichTextList = {
+    type: "rich_text_list";
+    style: "bullet" | "ordered";
+    /**
+     * The number of spaces to indent this block. It must be a number between 0 and 8.
+     */
+    indent?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+    offset?: number;
+    /**
+     * 0 or 1 (default 0) - if 1, a border is drawn on the left side of the block.
+     */
+    border?: 0 | 1;
+    elements: RichTextSection[];
+};
+type RichTextPreformatted = {
+    type: "rich_text_preformatted";
+    elements: RichTextSectionElement[];
+    /**
+     * 0 or 1 (default 0) - if 1, a border is drawn on the left side of the block.
+     */
+    border?: 0 | 1;
+};
+type RichTextQuote = {
+    type: "rich_text_quote";
+    elements: RichTextSectionElement[];
+    /**
+     * 0 or 1 (default 0) - if 1, a border is drawn on the left side of the block.
+     */
+    border?: 0 | 1;
+};
+type RichTextSection = {
+    type: "rich_text_section";
+    elements: RichTextSectionElement[];
+};
+type RichTextBlockElement = RichTextList | RichTextPreformatted | RichTextQuote | RichTextSection;
+type RichTextSectionElement = RichTextSectionText | RichTextSectionChannel | RichTextSectionUser | RichTextSectionEmoji | RichTextSectionLink | RichTextSectionUsergroup | RichTextSectionBroadcast;
+type RichTextSectionText = {
+    type: "text";
+    text: string;
+    style?: RichTextSectionElementStyleWithCode;
+};
+type RichTextSectionChannel = {
+    type: "channel";
+    channel_id: string;
+    style?: RichTextSectionElementStyleWithCode;
+};
+type RichTextSectionUser = {
+    type: "user";
+    user_id: string;
+    style?: RichTextSectionElementStyleWithCode;
+};
+type RichTextSectionEmoji = {
+    type: "emoji";
+    name: string;
+    skin_tone?: number;
+    unicode?: string;
+    style?: RichTextSectionElementStyleWithCode;
+};
+type RichTextSectionLink = {
+    type: "link";
+    url: string;
+    text: string;
+    style?: RichTextSectionElementStyleWithCode;
+};
+type RichTextSectionUsergroup = {
+    type: "usergroup";
+    usergroup_id: string;
+    style?: RichTextSectionElementStyleWithCode;
+};
+type RichTextSectionBroadcast = {
+    type: "broadcast";
+    range: "channel" | "here" | "everyone";
+    style?: RichTextSectionElementStyleWithCode;
+};
+type RichTextSectionElementStyleWithCode = {
+    code?: boolean;
+    bold?: boolean;
+    italic?: boolean;
+    strike?: boolean;
+};
+
 type Block = ActionsBlock | ContextBlock | DividerBlock | FileBlock | HeaderBlock | ImageBlock | InputBlock | SectionBlock | VideoBlock | RichTextBlock;
 type ActionsBlock = {
     /**
@@ -974,7 +1057,47 @@ type RichTextBlock = {
      * A ***rich_text*** block is a formatted, structured representation of text. It is the output of the Slack client's WYSIWYG composer, so all messages sent by end-users will have this format. You can use this block to create your own formatted text in Block Kit Builder or include user-defined formatted text in your Block Kit payload. You might encounter ***rich_text*** blocks in message payloads coming from our APIs, as a built-in type in the next-generation Slack platform, or as output of the ***rich_text_input*** block.
      */
     type: "rich_text";
+    /**
+     * A string acting as a unique identifier for a block. If not specified, one will be generated. Maximum length for this field is 255 characters. ***block_id*** should be unique for each message and each iteration of a message. If a message is updated, use a new ***block_id***.
+     */
+    block_id?: string;
+    /**
+     * An array of rich text objects - rich_text_section, rich_text_list, rich_text_preformatted, and rich_text_quote. See your specific desired element below for more details.
+     */
+    elements: RichTextBlockElement[];
+};
+
+type User = {
+    id: string;
+    name: string;
+};
+type Channel = {
+    id: string;
+    name: string;
+};
+type Hooks = {
+    user?: (data: User) => ReactNode;
+    channel?: (data: Channel) => ReactNode;
+    atChannel?: () => ReactNode;
+    atEveryone?: () => ReactNode;
+    atHere?: () => ReactNode;
+    usergroup?: (data: Channel) => ReactNode;
+    date?: (data: {
+        timestamp: string;
+        format: string;
+        link?: string | undefined;
+        fallback: string;
+    }) => ReactNode;
+};
+type Data = {
+    users: User[];
+    channels: Channel[];
+    hooks: Hooks;
+    setUsers: (users: User[]) => void;
+    setChannels: (channels: Channel[]) => void;
+    setHooks: (hooks: Hooks) => void;
 };
+type GlobalStore = Data;
 
 type Props = {
     /**
@@ -993,15 +1116,10 @@ type Props = {
     style?: React.CSSProperties;
     unstyled?: boolean;
     data?: {
-        users?: {
-            id: string;
-            name: string;
-        }[];
-        channels?: {
-            id: string;
-            name: string;
-        }[];
+        users?: GlobalStore["users"];
+        channels?: GlobalStore["channels"];
     };
+    hooks?: GlobalStore["hooks"];
 };
 declare const Message: (props: Props) => JSX.Element;
 

package/dist/index.d.ts

@@ -1,3 +1,5 @@
+import { ReactNode } from 'react';
+
 type Element = ButtonElement | CheckboxesElement | DatePickerElement | DateTimePickerElement | EmailInputElement | ImageElement | MultiStaticSelectElement | MultiExternalSelectElement | MultiUsersSelectElement | MultiConversationsSelectElement | MultiChannelsSelectElement | NumberInputElement | OverflowMenuElement | PlainTextInputElement | RadioButtonsElement | StaticSelectElement | ExternalSelectElement | UsersSelectElement | ConversationsSelectElement | ChannelsSelectElement | TimePickerElement | UrlTextInputElement;
 type ButtonElement = {
     type: "button";
@@ -697,6 +699,87 @@ type FilterObject = {
     exclude_bot_users?: boolean;
 };
 
+type RichTextList = {
+    type: "rich_text_list";
+    style: "bullet" | "ordered";
+    /**
+     * The number of spaces to indent this block. It must be a number between 0 and 8.
+     */
+    indent?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+    offset?: number;
+    /**
+     * 0 or 1 (default 0) - if 1, a border is drawn on the left side of the block.
+     */
+    border?: 0 | 1;
+    elements: RichTextSection[];
+};
+type RichTextPreformatted = {
+    type: "rich_text_preformatted";
+    elements: RichTextSectionElement[];
+    /**
+     * 0 or 1 (default 0) - if 1, a border is drawn on the left side of the block.
+     */
+    border?: 0 | 1;
+};
+type RichTextQuote = {
+    type: "rich_text_quote";
+    elements: RichTextSectionElement[];
+    /**
+     * 0 or 1 (default 0) - if 1, a border is drawn on the left side of the block.
+     */
+    border?: 0 | 1;
+};
+type RichTextSection = {
+    type: "rich_text_section";
+    elements: RichTextSectionElement[];
+};
+type RichTextBlockElement = RichTextList | RichTextPreformatted | RichTextQuote | RichTextSection;
+type RichTextSectionElement = RichTextSectionText | RichTextSectionChannel | RichTextSectionUser | RichTextSectionEmoji | RichTextSectionLink | RichTextSectionUsergroup | RichTextSectionBroadcast;
+type RichTextSectionText = {
+    type: "text";
+    text: string;
+    style?: RichTextSectionElementStyleWithCode;
+};
+type RichTextSectionChannel = {
+    type: "channel";
+    channel_id: string;
+    style?: RichTextSectionElementStyleWithCode;
+};
+type RichTextSectionUser = {
+    type: "user";
+    user_id: string;
+    style?: RichTextSectionElementStyleWithCode;
+};
+type RichTextSectionEmoji = {
+    type: "emoji";
+    name: string;
+    skin_tone?: number;
+    unicode?: string;
+    style?: RichTextSectionElementStyleWithCode;
+};
+type RichTextSectionLink = {
+    type: "link";
+    url: string;
+    text: string;
+    style?: RichTextSectionElementStyleWithCode;
+};
+type RichTextSectionUsergroup = {
+    type: "usergroup";
+    usergroup_id: string;
+    style?: RichTextSectionElementStyleWithCode;
+};
+type RichTextSectionBroadcast = {
+    type: "broadcast";
+    range: "channel" | "here" | "everyone";
+    style?: RichTextSectionElementStyleWithCode;
+};
+type RichTextSectionElementStyleWithCode = {
+    code?: boolean;
+    bold?: boolean;
+    italic?: boolean;
+    strike?: boolean;
+};
+
 type Block = ActionsBlock | ContextBlock | DividerBlock | FileBlock | HeaderBlock | ImageBlock | InputBlock | SectionBlock | VideoBlock | RichTextBlock;
 type ActionsBlock = {
     /**
@@ -974,7 +1057,47 @@ type RichTextBlock = {
      * A ***rich_text*** block is a formatted, structured representation of text. It is the output of the Slack client's WYSIWYG composer, so all messages sent by end-users will have this format. You can use this block to create your own formatted text in Block Kit Builder or include user-defined formatted text in your Block Kit payload. You might encounter ***rich_text*** blocks in message payloads coming from our APIs, as a built-in type in the next-generation Slack platform, or as output of the ***rich_text_input*** block.
      */
     type: "rich_text";
+    /**
+     * A string acting as a unique identifier for a block. If not specified, one will be generated. Maximum length for this field is 255 characters. ***block_id*** should be unique for each message and each iteration of a message. If a message is updated, use a new ***block_id***.
+     */
+    block_id?: string;
+    /**
+     * An array of rich text objects - rich_text_section, rich_text_list, rich_text_preformatted, and rich_text_quote. See your specific desired element below for more details.
+     */
+    elements: RichTextBlockElement[];
+};
+
+type User = {
+    id: string;
+    name: string;
+};
+type Channel = {
+    id: string;
+    name: string;
+};
+type Hooks = {
+    user?: (data: User) => ReactNode;
+    channel?: (data: Channel) => ReactNode;
+    atChannel?: () => ReactNode;
+    atEveryone?: () => ReactNode;
+    atHere?: () => ReactNode;
+    usergroup?: (data: Channel) => ReactNode;
+    date?: (data: {
+        timestamp: string;
+        format: string;
+        link?: string | undefined;
+        fallback: string;
+    }) => ReactNode;
+};
+type Data = {
+    users: User[];
+    channels: Channel[];
+    hooks: Hooks;
+    setUsers: (users: User[]) => void;
+    setChannels: (channels: Channel[]) => void;
+    setHooks: (hooks: Hooks) => void;
 };
+type GlobalStore = Data;
 
 type Props = {
     /**
@@ -993,15 +1116,10 @@ type Props = {
     style?: React.CSSProperties;
     unstyled?: boolean;
     data?: {
-        users?: {
-            id: string;
-            name: string;
-        }[];
-        channels?: {
-            id: string;
-            name: string;
-        }[];
+        users?: GlobalStore["users"];
+        channels?: GlobalStore["channels"];
     };
+    hooks?: GlobalStore["hooks"];
 };
 declare const Message: (props: Props) => JSX.Element;