slack-blocks-to-jsx 0.0.3

package/dist/index.mjs

@@ -0,0 +1,434 @@
+// 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
+import { emojify } from "node-emoji";
+var missing_emojis = {
+  "heart_hands": "\u{1FAF6}",
+  "white_frowning_face": "\u{1F641}"
+};
+var parseEmojis = (text) => {
+  return emojify(text, {
+    fallback: (name) => {
+      var _a;
+      return (_a = missing_emojis[name]) != null ? _a : `:${name}:`;
+    }
+  });
+};
+
+// src/utils/markdown.tsx
+import parse from "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 parse(parsed, options);
+};
+
+// src/header.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var Header = (props) => {
+  const { name, time } = props;
+  return /* @__PURE__ */ jsxs("div", { className: "flex gap-[5px] items-center w-full", children: [
+    /* @__PURE__ */ jsx("h3", { className: "font-black text-[15px]", children: name }),
+    /* @__PURE__ */ 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__ */ jsx("div", { className: "text-xs text-black-secondary uppercase leading-[17.6px]", children: dateToTime(time) })
+  ] });
+};
+
+// src/components/blocks/Divider.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Divider = (props) => {
+  const { data } = props;
+  const { block_id } = data;
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      id: block_id,
+      className: "border-b border-gray-primary border-solid w-full mt-1 mb-2"
+    }
+  );
+};
+
+// src/components/elements/TextObject.tsx
+import { jsx as jsx3 } from "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__ */ jsx3("div", { children: emoji_parsed });
+  return /* @__PURE__ */ jsx3("div", { children: parseMrkdwn(emoji_parsed) });
+};
+
+// src/components/elements/ImageElement.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var ImageElement = (props) => {
+  const { alt_text, image_url } = props.data;
+  return /* @__PURE__ */ jsx4("div", { className: "relative w-6 h-[25.25px]", children: /* @__PURE__ */ jsx4(
+    "img",
+    {
+      src: image_url,
+      alt: alt_text,
+      className: "w-5 h-5 rounded-[2px] overflow-hidden"
+    }
+  ) });
+};
+
+// src/components/elements/ButtonElement.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var ButtonElement = (props) => {
+  const { text, action_id, url, style, accessibility_label } = props.data;
+  return /* @__PURE__ */ jsx5(
+    "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__ */ jsx5(TextObject, { data: text })
+    }
+  );
+};
+
+// src/components/elements/StaticSelectElement.tsx
+import { useEffect, useState } from "react";
+import { jsx as jsx6, jsxs as jsxs2 } from "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] = useState(focus_on_load != null ? focus_on_load : false);
+  const [search, setSearch] = useState("");
+  const [selected, setSelected] = useState("");
+  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__ */ jsxs2(
+    "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__ */ jsx6(
+          "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__ */ jsx6("div", { className: "flex flex-col", children: filteredOptions.map((option, i) => {
+              return /* @__PURE__ */ jsx6(
+                "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__ */ jsx6(TextObject, { data: option.text })
+                },
+                i
+              );
+            }) })
+          }
+        ),
+        /* @__PURE__ */ jsx6(
+          "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__ */ jsx6("div", { className: "absolute w-full h-full pointer-events-none flex items-center text-black-primary.3", children: /* @__PURE__ */ jsx6(
+          TextObject,
+          {
+            data: placeholder != null ? placeholder : {
+              type: "plain_text",
+              text: "Pick an option"
+            }
+          }
+        ) }),
+        /* @__PURE__ */ jsx6(
+          "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__ */ jsx6(
+              "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__ */ jsx6(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    d: "M19.5 8.25l-7.5 7.5-7.5-7.5"
+                  }
+                )
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/components/blocks/Section.tsx
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+var Section = (props) => {
+  const { accessory, fields, text, block_id } = props.data;
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      id: block_id,
+      className: "mt-2 mb-1 text-primary flex w-full text-black-primary",
+      children: [
+        /* @__PURE__ */ jsx7("div", { className: "grow", children: /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-3", children: [
+          text && /* @__PURE__ */ jsx7(TextObject, { data: text }),
+          fields && /* @__PURE__ */ jsx7("div", { className: "grid grid-col-2 w-full", children: fields.map((field, i) => {
+            return /* @__PURE__ */ jsx7(TextObject, { data: field }, i);
+          }) })
+        ] }) }),
+        accessory && accessory.type === "image" && /* @__PURE__ */ jsx7("div", { className: "ml-2 mb-1 relative shrink-0", children: /* @__PURE__ */ jsx7(
+          "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
+import { useState as useState2 } from "react";
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+var Image = (props) => {
+  const {
+    block_id,
+    alt_text,
+    image_url,
+    image_bytes,
+    image_height,
+    image_width
+  } = props.data;
+  const [showImage, setShowImage] = useState2(true);
+  return /* @__PURE__ */ jsxs4("div", { id: block_id, className: "my-2 flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsxs4("div", { className: "text-black-secondary text-small flex gap-1 items-center", children: [
+      image_bytes && `(${Math.round(image_bytes / 1e3)} kB)`,
+      /* @__PURE__ */ jsx8(
+        "button",
+        {
+          className: "w-[15px] h-[15px]",
+          onClick: () => setShowImage((prev) => !prev),
+          children: /* @__PURE__ */ jsx8(
+            "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__ */ jsx8(
+                "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__ */ jsx8("div", { className: "rounded-md overflow-hidden relative max-w-max", children: /* @__PURE__ */ jsx8(
+      "img",
+      {
+        src: image_url,
+        style: {
+          width: image_width || 400,
+          height: image_height || 300
+        },
+        alt: alt_text
+      }
+    ) })
+  ] });
+};
+
+// src/components/blocks/Context.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+var Context = (props) => {
+  const { elements, block_id } = props.data;
+  return /* @__PURE__ */ jsx9(
+    "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__ */ jsx9(
+            "span",
+            {
+              className: "text-black-secondary text-small h-[25.25px] pr-3 flex items-center",
+              children: /* @__PURE__ */ jsx9(TextObject, { data: element })
+            },
+            i
+          );
+        }
+        return /* @__PURE__ */ jsx9("span", { children: /* @__PURE__ */ jsx9(ImageElement, { data: element }) }, i);
+      })
+    }
+  );
+};
+
+// src/components/blocks/Actions.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+var Actions = (props) => {
+  const { elements, block_id } = props.data;
+  return /* @__PURE__ */ jsx10(
+    "div",
+    {
+      id: block_id,
+      className: "mb-2 text-primary flex w-full text-black-primary items-center",
+      children: /* @__PURE__ */ jsx10("div", { className: "flex flex-wrap", children: elements.map((element, i) => {
+        if (element.type === "button") {
+          return /* @__PURE__ */ jsx10("div", { className: "mt-2 mr-2", children: /* @__PURE__ */ jsx10(ButtonElement, { data: element }) }, i);
+        }
+        if (element.type === "static_select") {
+          return /* @__PURE__ */ jsx10("div", { className: "mt-2 mr-2", children: /* @__PURE__ */ jsx10(StaticSelectElement, { data: element }) }, i);
+        }
+        return /* @__PURE__ */ jsx10("div", { className: "mt-2 mr-2" }, i);
+      }) })
+    }
+  );
+};
+
+// src/components/index.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+var getBlockComponent = (block) => {
+  if (block.type === "divider")
+    return /* @__PURE__ */ jsx11(Divider, { data: block });
+  if (block.type === "section")
+    return /* @__PURE__ */ jsx11(Section, { data: block });
+  if (block.type === "image")
+    return /* @__PURE__ */ jsx11(Image, { data: block });
+  if (block.type === "context")
+    return /* @__PURE__ */ jsx11(Context, { data: block });
+  if (block.type === "actions")
+    return /* @__PURE__ */ jsx11(Actions, { data: block });
+  return null;
+};
+
+// src/block-wrapper.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+var BlockWrapper = (props) => {
+  const { children } = props;
+  return /* @__PURE__ */ jsx12("div", { className: "text-base break-words font-normal", children });
+};
+
+// src/message.tsx
+import { jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
+var Message = (props) => {
+  const { theme = "light", blocks, logo, name, time = /* @__PURE__ */ new Date() } = props;
+  return /* @__PURE__ */ jsxs5("section", { className: "flex gap-2 w-full max-w-[600px] slack-message", children: [
+    /* @__PURE__ */ jsx13("div", { className: "shrink-0", children: /* @__PURE__ */ jsx13("img", { src: logo, className: "w-9 h-9", alt: name }) }),
+    /* @__PURE__ */ jsxs5("div", { className: "flex flex-col w-full", children: [
+      /* @__PURE__ */ jsx13(Header, { name, time }),
+      blocks.map((block, i) => {
+        const element = getBlockComponent(block);
+        if (!element)
+          return null;
+        return /* @__PURE__ */ jsx13(BlockWrapper, { children: element }, i);
+      })
+    ] })
+  ] });
+};
+export {
+  Message
+};

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "slack-blocks-to-jsx",
+  "author": "Manish Panwar <codeemash@gmail.com>",
+  "description": "A library to convert Slack blocks to JSX components to be used with React",
+  "keywords": [
+    "slack",
+    "slack-blocks",
+    "slack-blocks-to-jsx",
+    "slack-blocks-to-react",
+    "slack-blocks-to-react-comp"
+  ],
+  "repository": "https://github.com/themashcodee/slack-blocks-to-jsx.git",
+  "license": "MIT",
+  "version": "0.0.3",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "bugs": {
+    "url": "https://github.com/themashcodee/slack-blocks-to-jsx/issues"
+  },
+  "homepage": "https://github.com/themashcodee/slack-blocks-to-jsx#readme",
+  "scripts": {
+    "build": "tsup ./src/index.ts --format cjs,esm --dts",
+    "release": "pnpm run build && changeset publish",
+    "lint": "tsc"
+  },
+  "dependencies": {
+    "html-react-parser": "^4.2.2",
+    "node-emoji": "^2.1.0"
+  },
+  "peerDependencies": {
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0"
+  },
+  "devDependencies": {
+    "@changesets/cli": "^2.26.2",
+    "@types/react": "17.0.0",
+    "@types/react-dom": "17.0.0",
+    "tsup": "^7.2.0",
+    "typescript": "^5.2.2"
+  }
+}

package/readme.md

@@ -0,0 +1 @@
+# Slack Blocks to JSX