slackblock 0.4.0 → 1.0.0-0

package/CHANGELOG.md

@@ -1,26 +1,33 @@
-# Changelog
-
-### 0.4.0
-- Allow for `<Section/>` blocks to have `null` components (useful for conditional renders)
-
-### 0.3.1
-- Fix issue that caused an error to be thrown if a child is `null`
-
-### 0.3.0
-- Add `Container` block to allow for better conditional rendering
-
-### 0.2.0
-- Add ability to color messages
-
-### 0.1.0
-- Add all additional props to the top level `<Message/>` component
-- Remove `token` / `channel` prop since they are out of scope for the component
-
-### 0.0.4
-- Fix issue where `<Actions/>` block would have incorrect type
-
-### 0.0.3
-- Fix issue where `<Button/>` element was outputting `actionId` when it should be `action_id`
-
-### 0.0.1 / 0.0.2
-- Initial release
+# Changelog
+
+### 1.0.0
+- Modernize tooling (Node 24, pnpm, tsup, Vitest, XO, Husky + lint-staged)
+- Stabilize parser/transformer routing and align output types to serialized JSON
+- Expand Block Kit coverage (header, rich_text, video, checkboxes, time/datetime pickers)
+- Add rich_text helpers and improved select/input features
+- Add validation warnings for Slack limits
+
+### 0.4.0
+- Allow for `<Section/>` blocks to have `null` components (useful for conditional renders)
+
+### 0.3.1
+- Fix issue that caused an error to be thrown if a child is `null`
+
+### 0.3.0
+- Add `Container` block to allow for better conditional rendering
+
+### 0.2.0
+- Add ability to color messages
+
+### 0.1.0
+- Add all additional props to the top level `<Message/>` component
+- Remove `token` / `channel` prop since they are out of scope for the component
+
+### 0.0.4
+- Fix issue where `<Actions/>` block would have incorrect type
+
+### 0.0.3
+- Fix issue where `<Button/>` element was outputting `actionId` when it should be `action_id`
+
+### 0.0.1 / 0.0.2
+- Initial release

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2019 Kolya Venturi
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2019 Kolya Venturi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,85 +1,95 @@
-# SlackBlock
-React-based Slack message renderer
-
-[![CircleCI](https://circleci.com/gh/kolyaventuri/block/tree/master.svg?style=svg)](https://circleci.com/gh/kolyaventuri/block/tree/master)
-
-## What
-A message builder for Slack bots, using JSX / React syntax. Generally follows the [Block Kit](https://api.slack.com/block-kit) naming and options
-
-## Getting started
-Install the library with `npm i slackblock`
-
-- Import the renderer with `import render from 'slackblock';`
-- Import the top level `Message` block, along with any blocks you need from `import { Message, Section, Text, ... } from 'slackblock/block';`
-- Build your message!
-```jsx
-/* example */
-
-const text = <Text plainText>Hello</Text>;
-
-const message = render(
-  <Message>
-    <Section text={text}>
-      <Text>Some *message* for _Slack_.</Text>
-    </Section>
-  </Message>
-);
-
-console.log(message);
-/*
-  {
-    "blocks": [
-      {
-        "type": "section",
-        "text": {
-          "text": "plain_text",
-          "text": "Hello"
-        },
-        "fields": [
-          {
-            "type": "mrkdwn",
-            "text": "Some *message* for _Slack_."
-          }
-        ]
-      }
-    ]
-  }
-*/
-```
-
-There is a `<Container/>` component, which allows for conditional rendering by passing through the children as though it didn't exist.
-```jsx
-const elem = (
-  <Container>
-    <Text>Test</Text>
-  </Container>
-);
-
-const shouldDoThing = ...;
-
-const message = render(
-  <Message>
-    {shouldDoThing && elem}
-  </Message>
-);
-```
-
-## Things to note
-- The outputted message only needs to have your `token` and desired `channel_id` added, and it will be ready to send to the slack API!
-- There is current _very little to no_ input validation. Non-recognized blocks will be ignored, but Slack will be the ultimate decider if your message is valid. Validation is on the roadmap.
-- There is currently almost no documentation. This will be resolved, but in general...
-  - If a Slack message wants a property in format `foo_bar`, you will add it as a `fooBar` property in your message(ex: `<Element fooBar='blah'/>`)
-  - If a component such as a `<Section/>` wants fields which seem like children, they probably are for the sake of rendering. This is especially important with `select` menus, as your `<Option/>` tags will be passed as children
-    - ex:
-     ```jsx
-       <Select ...>
-         <Option value="val">text</Option>
-         <Option value="val2">text2</Option>
-       </Select>
-     ``` 
-
-
-## TODO
-- Add real documentation
-- Expose types
-- Add validation
+# SlackBlock
+JSX-based Slack message renderer
+
+[![CircleCI](https://circleci.com/gh/kolyaventuri/block/tree/master.svg?style=svg)](https://circleci.com/gh/kolyaventuri/block/tree/master)
+
+## What
+A message builder for Slack bots, using JSX with a React-compatible API. Generally follows the [Block Kit](https://api.slack.com/block-kit) naming and options.
+
+## Getting started
+Install the library with your package manager, for example `pnpm add slackblock`.
+
+- Import the renderer with `import render from 'slackblock';`
+- Import the top level `Message` block, along with any blocks you need from `import { Message, Section, Text, ... } from 'slackblock/block';`
+- Build your message!
+```jsx
+/* example */
+
+const text = <Text plainText>Hello</Text>;
+
+const message = render(
+  <Message>
+    <Section text={text}>
+      <Text>Some *message* for _Slack_.</Text>
+    </Section>
+  </Message>
+);
+
+console.log(message);
+/*
+  {
+    "blocks": [
+      {
+        "type": "section",
+        "text": {
+          "type": "plain_text",
+          "text": "Hello"
+        },
+        "fields": [
+          {
+            "type": "mrkdwn",
+            "text": "Some *message* for _Slack_."
+          }
+        ]
+      }
+    ]
+  }
+*/
+```
+
+There is a `<Container/>` component, which allows for conditional rendering by passing through the children as though it didn't exist.
+```jsx
+const elem = (
+  <Container>
+    <Text>Test</Text>
+  </Container>
+);
+
+const shouldDoThing = ...;
+
+const message = render(
+  <Message>
+    {shouldDoThing && elem}
+  </Message>
+);
+```
+
+## Things to note
+- The outputted message only needs to have your `token` and desired `channel_id` added, and it will be ready to send to the slack API!
+- React is a peer dependency and used only as a JSX runtime (no DOM renderer required).
+- There is limited input validation (for example, date/time formats and select constraints). Warnings are emitted for common Slack limits (IDs, text lengths, block counts). Non-recognized blocks will be ignored, but Slack will be the ultimate decider if your message is valid. Validation is on the roadmap.
+- There is currently almost no documentation. This will be resolved, but in general...
+  - If a Slack message wants a property in format `foo_bar`, you will add it as a `fooBar` property in your message(ex: `<Element fooBar='blah'/>`)
+  - If a component such as a `<Section/>` wants fields which seem like children, they probably are for the sake of rendering. This is especially important with `select` menus, as your `<Option/>` tags will be passed as children
+    - ex:
+     ```jsx
+       <Select ...>
+         <Option value="val">text</Option>
+         <Option value="val2">text2</Option>
+       </Select>
+     ``` 
+
+## Supported blocks and elements
+Blocks: `Message` (top-level), `Section`, `Actions`, `Context`, `Divider`, `File`, `Image` (block), `Header`, `Input`, `RichText`, `Video`.
+
+Elements: `Text`, `Image` (element), `Button`, `Confirmation`, `Select`, `Option`, `OptionGroup`, `Overflow`, `RadioGroup`, `Checkboxes`, `DatePicker`, `TimePicker`, `DateTimePicker`, `TextInput`.
+
+Rich text helpers: `RichTextSection`, `RichTextList`, `RichTextQuote`, `RichTextPreformatted`, `RichTextText`, `RichTextLink`, `RichTextUser`, `RichTextChannel`, `RichTextEmoji`, `RichTextDate`, `RichTextBroadcast`, `RichTextUserGroup`.
+
+Field support highlights: `select` filters/min query length, `option` description, `focusOnLoad` for inputs, `dispatchActionConfig` for text inputs, and `accessibilityLabel` on buttons.
+
+
+## TODO
+- Add real documentation
+- Add validation
+- Add richer rich_text validation

package/dist/block.cjs

@@ -0,0 +1,341 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/block.ts
+var block_exports = {};
+__export(block_exports, {
+  Actions: () => Actions,
+  Button: () => Button,
+  Checkboxes: () => Checkboxes,
+  Confirmation: () => Confirmation,
+  Container: () => Container,
+  Context: () => Context,
+  DatePicker: () => DatePicker,
+  DateTimePicker: () => DateTimePicker,
+  Divider: () => Divider,
+  File: () => File,
+  Header: () => Header,
+  Image: () => Image,
+  ImageLayout: () => Image2,
+  Input: () => Input,
+  Message: () => Message,
+  Option: () => Option,
+  OptionGroup: () => OptionGroup,
+  Overflow: () => Overflow,
+  RadioGroup: () => RadioGroup,
+  RichText: () => RichText,
+  RichTextBroadcast: () => RichTextBroadcast,
+  RichTextChannel: () => RichTextChannel,
+  RichTextDate: () => RichTextDate,
+  RichTextEmoji: () => RichTextEmoji,
+  RichTextLink: () => RichTextLink,
+  RichTextList: () => RichTextList,
+  RichTextPreformatted: () => RichTextPreformatted,
+  RichTextQuote: () => RichTextQuote,
+  RichTextSection: () => RichTextSection,
+  RichTextText: () => RichTextText,
+  RichTextUser: () => RichTextUser,
+  RichTextUserGroup: () => RichTextUserGroup,
+  Section: () => Section,
+  Select: () => Select,
+  Text: () => Text,
+  TextInput: () => TextInput,
+  TimePicker: () => TimePicker,
+  Video: () => Video
+});
+module.exports = __toCommonJS(block_exports);
+
+// src/components/message.tsx
+var import_react = __toESM(require("react"));
+var Message = class extends import_react.default.Component {
+};
+Message.slackType = "Message";
+
+// src/components/block/button.tsx
+var import_react2 = __toESM(require("react"));
+var Button = class extends import_react2.default.Component {
+};
+Button.slackType = "Button";
+
+// src/components/block/confirmation.tsx
+var import_react3 = __toESM(require("react"));
+var Confirmation = class extends import_react3.default.Component {
+};
+Confirmation.slackType = "Confirmation";
+
+// src/components/block/image.tsx
+var import_react4 = __toESM(require("react"));
+var Image = class extends import_react4.default.Component {
+};
+Image.slackType = "Image";
+
+// src/components/block/text.tsx
+var import_react5 = __toESM(require("react"));
+var Text = class extends import_react5.default.Component {
+};
+Text.slackType = "Text";
+
+// src/components/input/date-picker.tsx
+var import_react6 = __toESM(require("react"));
+var DatePicker = class extends import_react6.default.Component {
+};
+DatePicker.slackType = "DatePicker";
+
+// src/components/input/date-time-picker.tsx
+var import_react7 = __toESM(require("react"));
+var DateTimePicker = class extends import_react7.default.Component {
+};
+DateTimePicker.slackType = "DateTimePicker";
+
+// src/components/input/checkboxes.tsx
+var import_react8 = __toESM(require("react"));
+var Checkboxes = class extends import_react8.default.Component {
+};
+Checkboxes.slackType = "Checkboxes";
+
+// src/components/input/option-group.tsx
+var import_react9 = __toESM(require("react"));
+var OptionGroup = class extends import_react9.default.Component {
+};
+OptionGroup.slackType = "OptionGroup";
+
+// src/components/input/option.tsx
+var import_react10 = __toESM(require("react"));
+var Option = class extends import_react10.default.Component {
+};
+Option.slackType = "Option";
+
+// src/components/input/overflow.tsx
+var import_react11 = __toESM(require("react"));
+var Overflow = class extends import_react11.default.Component {
+};
+Overflow.slackType = "Overflow";
+
+// src/components/input/radio-group.tsx
+var import_react12 = __toESM(require("react"));
+var RadioGroup = class extends import_react12.default.Component {
+};
+RadioGroup.slackType = "RadioGroup";
+
+// src/components/input/select.tsx
+var import_react13 = __toESM(require("react"));
+var Select = class extends import_react13.default.Component {
+};
+Select.slackType = "Select";
+
+// src/components/input/text.tsx
+var import_react14 = __toESM(require("react"));
+var TextInput = class extends import_react14.default.Component {
+};
+TextInput.slackType = "TextInput";
+
+// src/components/input/time-picker.tsx
+var import_react15 = __toESM(require("react"));
+var TimePicker = class extends import_react15.default.Component {
+};
+TimePicker.slackType = "TimePicker";
+
+// src/components/layout/actions.tsx
+var import_react16 = __toESM(require("react"));
+var Actions = class extends import_react16.default.Component {
+};
+Actions.slackType = "Actions";
+
+// src/components/layout/context.tsx
+var import_react17 = __toESM(require("react"));
+var Context = class extends import_react17.default.Component {
+};
+Context.slackType = "Context";
+
+// src/components/layout/divider.tsx
+var import_react18 = __toESM(require("react"));
+var Divider = class extends import_react18.default.Component {
+};
+Divider.slackType = "Divider";
+
+// src/components/layout/file.tsx
+var import_react19 = __toESM(require("react"));
+var File = class extends import_react19.default.Component {
+};
+File.slackType = "File";
+
+// src/components/layout/header.tsx
+var import_react20 = __toESM(require("react"));
+var Header = class extends import_react20.default.Component {
+};
+Header.slackType = "Header";
+
+// src/components/layout/image.tsx
+var import_react21 = __toESM(require("react"));
+var Image2 = class extends import_react21.default.Component {
+};
+Image2.slackType = "ImageLayout";
+
+// src/components/layout/input.tsx
+var import_react22 = __toESM(require("react"));
+var Input = class extends import_react22.default.Component {
+};
+Input.slackType = "Input";
+
+// src/components/layout/rich-text.tsx
+var import_react23 = __toESM(require("react"));
+var RichText = class extends import_react23.default.Component {
+};
+RichText.slackType = "RichText";
+
+// src/components/layout/section.tsx
+var import_react24 = __toESM(require("react"));
+var Section = class extends import_react24.default.Component {
+};
+Section.slackType = "Section";
+
+// src/components/layout/container.tsx
+var import_react25 = __toESM(require("react"));
+var Container = class extends import_react25.default.Component {
+};
+Container.slackType = "Container";
+
+// src/components/layout/video.tsx
+var import_react26 = __toESM(require("react"));
+var Video = class extends import_react26.default.Component {
+};
+Video.slackType = "Video";
+
+// src/components/rich-text/section.tsx
+var import_react27 = __toESM(require("react"));
+var RichTextSection = class extends import_react27.default.Component {
+};
+RichTextSection.slackType = "RichTextSection";
+
+// src/components/rich-text/list.tsx
+var import_react28 = __toESM(require("react"));
+var RichTextList = class extends import_react28.default.Component {
+};
+RichTextList.slackType = "RichTextList";
+
+// src/components/rich-text/quote.tsx
+var import_react29 = __toESM(require("react"));
+var RichTextQuote = class extends import_react29.default.Component {
+};
+RichTextQuote.slackType = "RichTextQuote";
+
+// src/components/rich-text/preformatted.tsx
+var import_react30 = __toESM(require("react"));
+var RichTextPreformatted = class extends import_react30.default.Component {
+};
+RichTextPreformatted.slackType = "RichTextPreformatted";
+
+// src/components/rich-text/text.tsx
+var import_react31 = __toESM(require("react"));
+var RichTextText = class extends import_react31.default.Component {
+};
+RichTextText.slackType = "RichTextText";
+
+// src/components/rich-text/link.tsx
+var import_react32 = __toESM(require("react"));
+var RichTextLink = class extends import_react32.default.Component {
+};
+RichTextLink.slackType = "RichTextLink";
+
+// src/components/rich-text/user.tsx
+var import_react33 = __toESM(require("react"));
+var RichTextUser = class extends import_react33.default.Component {
+};
+RichTextUser.slackType = "RichTextUser";
+
+// src/components/rich-text/channel.tsx
+var import_react34 = __toESM(require("react"));
+var RichTextChannel = class extends import_react34.default.Component {
+};
+RichTextChannel.slackType = "RichTextChannel";
+
+// src/components/rich-text/emoji.tsx
+var import_react35 = __toESM(require("react"));
+var RichTextEmoji = class extends import_react35.default.Component {
+};
+RichTextEmoji.slackType = "RichTextEmoji";
+
+// src/components/rich-text/date.tsx
+var import_react36 = __toESM(require("react"));
+var RichTextDate = class extends import_react36.default.Component {
+};
+RichTextDate.slackType = "RichTextDate";
+
+// src/components/rich-text/broadcast.tsx
+var import_react37 = __toESM(require("react"));
+var RichTextBroadcast = class extends import_react37.default.Component {
+};
+RichTextBroadcast.slackType = "RichTextBroadcast";
+
+// src/components/rich-text/user-group.tsx
+var import_react38 = __toESM(require("react"));
+var RichTextUserGroup = class extends import_react38.default.Component {
+};
+RichTextUserGroup.slackType = "RichTextUserGroup";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Actions,
+  Button,
+  Checkboxes,
+  Confirmation,
+  Container,
+  Context,
+  DatePicker,
+  DateTimePicker,
+  Divider,
+  File,
+  Header,
+  Image,
+  ImageLayout,
+  Input,
+  Message,
+  Option,
+  OptionGroup,
+  Overflow,
+  RadioGroup,
+  RichText,
+  RichTextBroadcast,
+  RichTextChannel,
+  RichTextDate,
+  RichTextEmoji,
+  RichTextLink,
+  RichTextList,
+  RichTextPreformatted,
+  RichTextQuote,
+  RichTextSection,
+  RichTextText,
+  RichTextUser,
+  RichTextUserGroup,
+  Section,
+  Select,
+  Text,
+  TextInput,
+  TimePicker,
+  Video
+});
+//# sourceMappingURL=block.cjs.map