slack-blocks-to-jsx 0.0.3

package/dist/index.js

@@ -0,0 +1,471 @@
+"use strict";
+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/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Message: () => Message
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/utils/date.ts
+var dateToTime = (timestamp) => {
+  const date = new Date(timestamp);
+  return date.toLocaleTimeString("en-US", {
+    hour: "numeric",
+    minute: "numeric",
+    hour12: false
+  });
+};
+
+// src/utils/emojis.ts
+var import_node_emoji = require("node-emoji");
+var missing_emojis = {
+  "heart_hands": "\u{1FAF6}",
+  "white_frowning_face": "\u{1F641}"
+};
+var parseEmojis = (text) => {
+  return (0, import_node_emoji.emojify)(text, {
+    fallback: (name) => {
+      var _a;
+      return (_a = missing_emojis[name]) != null ? _a : `:${name}:`;
+    }
+  });
+};
+
+// src/utils/markdown.tsx
+var import_html_react_parser = __toESM(require("html-react-parser"));
+var options = {
+  trim: false
+};
+var parseMrkdwn = (text) => {
+  if (!text)
+    return null;
+  const pre = /```(.*?)```/g;
+  const code = /`(?!(?:[^<]*>|[^<>]*<\/pre>))([^`]*)`/g;
+  const bold = /\*(?!(?:[^<]*>|[^<>]*<\/pre>))([^*]*)\*/g;
+  const italic = /_(?!(?:[^<]*>|[^<>]*<\/pre>))([^_]*)_/g;
+  const strikethrough = /~(?!(?:[^<]*>|[^<>]*<\/pre>))([^~]*)~/g;
+  const blockquote = new RegExp("(?<!<pre>)&gt;(.*)", "g");
+  const single_newline = /(\n)/g;
+  const consecutive_brs = /(<br \/>){2,}/g;
+  let parsed = text;
+  parsed = parsed.replace(pre, "<pre>$1</pre>");
+  parsed = parsed.replace(code, "<code>$1</code>");
+  parsed = parsed.replace(blockquote, "<blockquote>$1</blockquote>");
+  parsed = parsed.replace(bold, "<b>$1</b>");
+  parsed = parsed.replace(italic, "<i>$1</i>");
+  parsed = parsed.replace(strikethrough, "<s>$1</s>");
+  parsed = parsed.replace(single_newline, "<br />");
+  parsed = parsed.replace(consecutive_brs, (match) => {
+    var _a, _b;
+    const count = ((_b = (_a = match.match(/<br \/>/g)) == null ? void 0 : _a.length) != null ? _b : 0) - 1;
+    let spans = "<br />";
+    for (let i = 0; i < count; i++) {
+      spans += `<br style="display:block;content:'';margin-top:8px" />`;
+    }
+    return spans;
+  });
+  return (0, import_html_react_parser.default)(parsed, options);
+};
+
+// src/header.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Header = (props) => {
+  const { name, time } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex gap-[5px] items-center w-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "font-black text-[15px]", children: name }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-[14px] w-[25.31px] leading-[12.5px] py-[1px] px-[3px] uppercase text-[10px]  text-black-primary/[0.7] bg-black-primary/[0.13] font-semibold rounded-[2px]", children: "APP" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-xs text-black-secondary uppercase leading-[17.6px]", children: dateToTime(time) })
+  ] });
+};
+
+// src/components/blocks/Divider.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Divider = (props) => {
+  const { data } = props;
+  const { block_id } = data;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      id: block_id,
+      className: "border-b border-gray-primary border-solid w-full mt-1 mb-2"
+    }
+  );
+};
+
+// src/components/elements/TextObject.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var TextObject = (props) => {
+  const { type, text, emoji } = props.data;
+  const emoji_parsed = type == "mrkdwn" ? parseEmojis(text) : emoji === false ? text : parseEmojis(text);
+  if (type === "plain_text")
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { children: emoji_parsed });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { children: parseMrkdwn(emoji_parsed) });
+};
+
+// src/components/elements/ImageElement.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var ImageElement = (props) => {
+  const { alt_text, image_url } = props.data;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "relative w-6 h-[25.25px]", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "img",
+    {
+      src: image_url,
+      alt: alt_text,
+      className: "w-5 h-5 rounded-[2px] overflow-hidden"
+    }
+  ) });
+};
+
+// src/components/elements/ButtonElement.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var ButtonElement = (props) => {
+  const { text, action_id, url, style, accessibility_label } = props.data;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "button",
+    {
+      id: action_id,
+      "aria-label": accessibility_label,
+      className: `px-2 pt-0 pb-[1px] text-small h-[28px] min-w-[56px] border rounded whitespace-nowrap font-semibold ${style === "primary" ? "border-green-primary.3 text-green-primary" : style === "danger" ? "border-red-primary.3 text-red-primary" : "border-black-primary.3 text-black-primary"}`,
+      onClick: () => {
+        if (url) {
+          window.open(url, "_blank");
+        }
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TextObject, { data: text })
+    }
+  );
+};
+
+// src/components/elements/StaticSelectElement.tsx
+var import_react = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var StaticSelectElement = (props) => {
+  const {
+    action_id,
+    options: options2,
+    // TODO: ADD CONFIRM DIALOG
+    // confirm
+    focus_on_load,
+    // TODO: ADD INITIAL OPTION
+    // initial_option,
+    // TODO: ADD OPTION GROUPS
+    // option_groups,
+    placeholder
+  } = props.data;
+  const [visible, setVisible] = (0, import_react.useState)(focus_on_load != null ? focus_on_load : false);
+  const [search, setSearch] = (0, import_react.useState)("");
+  const [selected, setSelected] = (0, import_react.useState)("");
+  (0, import_react.useEffect)(() => {
+    const handleClickOutside = (e) => {
+      var _a, _b;
+      const target = e.target;
+      console.log({ target });
+      console.log(target.id);
+      if (target.id !== "static_select_popup" && target.id !== "static_select_dropdown_button" && ((_a = target.parentElement) == null ? void 0 : _a.id) !== "static_select_popup" && ((_b = target.parentElement) == null ? void 0 : _b.id) !== "static_select_dropdown_button")
+        setVisible(false);
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+  const filteredOptions = options2.filter((option) => {
+    const results = option.text.text.toLowerCase().includes(search.toLowerCase());
+    return results;
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "div",
+    {
+      id: action_id,
+      className: "py-1 px-2 h-7 min-h-[28px] relative flex items-center justify-between rounded text-small w-[190px] border border-black-primary.3",
+      tabIndex: 0,
+      children: [
+        visible && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "div",
+          {
+            className: "absolute top-[24px] -left-3 bg-white-secondary border border-gray-primary rounded-[6px] shadow-custom_shadow-1 w-[322px] max-w-[322px] max-h-[240px] overflow-auto py-3 z-20",
+            id: "static_select_popup",
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex flex-col", children: filteredOptions.map((option, i) => {
+              return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                "div",
+                {
+                  className: "h-7 px-6 flex items-center select-none cursor-pointer hover:bg-blue-primary hover:text-white-primary",
+                  tabIndex: 0,
+                  onClick: () => {
+                    setVisible(false);
+                    setSelected(option.value);
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TextObject, { data: option.text })
+                },
+                i
+              );
+            }) })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "input",
+          {
+            type: "text",
+            value: search,
+            onChange: (e) => setSearch(e.currentTarget.value),
+            className: "w-full py-1 pr-7 focus:outline-none",
+            tabIndex: -1,
+            "aria-label": "Select an item"
+          }
+        ),
+        !search && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "absolute w-full h-full pointer-events-none flex items-center text-black-primary.3", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          TextObject,
+          {
+            data: placeholder != null ? placeholder : {
+              type: "plain_text",
+              text: "Pick an option"
+            }
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "button",
+          {
+            className: "absolute right-1 top-1/2 flex justify-center items-center w-5 -translate-y-1/2 text-black-secondary z-10 h-full",
+            id: "static_select_dropdown_button",
+            onClick: () => {
+              setVisible((prev) => !prev);
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                fill: "none",
+                viewBox: "0 0 24 24",
+                strokeWidth: "3",
+                stroke: "currentColor",
+                className: "w-3 h-3",
+                children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    d: "M19.5 8.25l-7.5 7.5-7.5-7.5"
+                  }
+                )
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/components/blocks/Section.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var Section = (props) => {
+  const { accessory, fields, text, block_id } = props.data;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    "div",
+    {
+      id: block_id,
+      className: "mt-2 mb-1 text-primary flex w-full text-black-primary",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "grow", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col gap-3", children: [
+          text && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TextObject, { data: text }),
+          fields && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "grid grid-col-2 w-full", children: fields.map((field, i) => {
+            return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TextObject, { data: field }, i);
+          }) })
+        ] }) }),
+        accessory && accessory.type === "image" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "ml-2 mb-1 relative shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "img",
+          {
+            src: accessory.image_url,
+            alt: accessory.alt_text,
+            className: "w-[88px] h-[88px] object-cover ml-1 rounded-[8px] overflow-hidden"
+          }
+        ) })
+      ]
+    }
+  );
+};
+
+// src/components/blocks/Image.tsx
+var import_react2 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var Image = (props) => {
+  const {
+    block_id,
+    alt_text,
+    image_url,
+    image_bytes,
+    image_height,
+    image_width
+  } = props.data;
+  const [showImage, setShowImage] = (0, import_react2.useState)(true);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { id: block_id, className: "my-2 flex flex-col gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "text-black-secondary text-small flex gap-1 items-center", children: [
+      image_bytes && `(${Math.round(image_bytes / 1e3)} kB)`,
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "button",
+        {
+          className: "w-[15px] h-[15px]",
+          onClick: () => setShowImage((prev) => !prev),
+          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "svg",
+            {
+              xmlns: "http://www.w3.org/2000/svg",
+              fillRule: "evenodd",
+              clipRule: "evenodd",
+              className: "text-blue-primary",
+              imageRendering: "optimizeQuality",
+              shapeRendering: "geometricPrecision",
+              textRendering: "geometricPrecision",
+              viewBox: "0 0 512 336.36",
+              width: 6,
+              height: 6,
+              style: {
+                transform: showImage ? "rotate(0deg)" : "rotate(-90deg)"
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                "path",
+                {
+                  fill: "currentColor",
+                  fillRule: "nonzero",
+                  d: "M42.47.01L469.5 0C492.96 0 512 19.04 512 42.5c0 11.07-4.23 21.15-11.17 28.72L294.18 320.97c-14.93 18.06-41.7 20.58-59.76 5.65-1.8-1.49-3.46-3.12-4.97-4.83L10.43 70.39C-4.97 52.71-3.1 25.86 14.58 10.47 22.63 3.46 32.57.02 42.47.01z"
+                }
+              )
+            }
+          )
+        }
+      )
+    ] }),
+    showImage && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "rounded-md overflow-hidden relative max-w-max", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "img",
+      {
+        src: image_url,
+        style: {
+          width: image_width || 400,
+          height: image_height || 300
+        },
+        alt: alt_text
+      }
+    ) })
+  ] });
+};
+
+// src/components/blocks/Context.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var Context = (props) => {
+  const { elements, block_id } = props.data;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "div",
+    {
+      id: block_id,
+      className: "my-1 text-primary flex w-full text-black-primary flex-wrap items-center",
+      children: elements.map((element, i) => {
+        if (element.type !== "image") {
+          return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            "span",
+            {
+              className: "text-black-secondary text-small h-[25.25px] pr-3 flex items-center",
+              children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TextObject, { data: element })
+            },
+            i
+          );
+        }
+        return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ImageElement, { data: element }) }, i);
+      })
+    }
+  );
+};
+
+// src/components/blocks/Actions.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var Actions = (props) => {
+  const { elements, block_id } = props.data;
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    "div",
+    {
+      id: block_id,
+      className: "mb-2 text-primary flex w-full text-black-primary items-center",
+      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex flex-wrap", children: elements.map((element, i) => {
+        if (element.type === "button") {
+          return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "mt-2 mr-2", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ButtonElement, { data: element }) }, i);
+        }
+        if (element.type === "static_select") {
+          return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "mt-2 mr-2", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(StaticSelectElement, { data: element }) }, i);
+        }
+        return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "mt-2 mr-2" }, i);
+      }) })
+    }
+  );
+};
+
+// src/components/index.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var getBlockComponent = (block) => {
+  if (block.type === "divider")
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Divider, { data: block });
+  if (block.type === "section")
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Section, { data: block });
+  if (block.type === "image")
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Image, { data: block });
+  if (block.type === "context")
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Context, { data: block });
+  if (block.type === "actions")
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Actions, { data: block });
+  return null;
+};
+
+// src/block-wrapper.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var BlockWrapper = (props) => {
+  const { children } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "text-base break-words font-normal", children });
+};
+
+// src/message.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var Message = (props) => {
+  const { theme = "light", blocks, logo, name, time = /* @__PURE__ */ new Date() } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("section", { className: "flex gap-2 w-full max-w-[600px] slack-message", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("img", { src: logo, className: "w-9 h-9", alt: name }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-col w-full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Header, { name, time }),
+      blocks.map((block, i) => {
+        const element = getBlockComponent(block);
+        if (!element)
+          return null;
+        return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(BlockWrapper, { children: element }, i);
+      })
+    ] })
+  ] });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Message
+});