refactor: 🔨 create a function to use dynamic html tag classes

themashcodee · Jul 13, 2024 · bead207 · bead207
1 parent 08fd9c5
commit bead207
Show file tree

Hide file tree

Showing 14 changed files with 91 additions and 69 deletions.
diff --git a/package.json b/package.json
@@ -11,7 +11,7 @@
   ],
   "repository": "https://github.com/themashcodee/slack-blocks-to-jsx.git",
   "license": "MIT",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",

diff --git a/src/components/blocks/input.tsx b/src/components/blocks/input.tsx
@@ -14,7 +14,7 @@ export const Input = (props: InputProps) => {
   return (
     <div
       id={block_id}
-      className={`mt-2 mb-1 text-primary slack_blocks_to_jsx__input flex w-full text-black-primary`}
+      className="mt-2 mb-1 text-primary slack_blocks_to_jsx__input flex w-full text-black-primary"
     >
       <div className="grow">
         <div className="flex flex-col gap-2">

diff --git a/src/components/blocks/rich_text/rich_text.tsx b/src/components/blocks/rich_text/rich_text.tsx
@@ -35,7 +35,7 @@ const Element = (props: ElementProps) => {
       <div className="flex gap-2 slack_blocks_to_jsx__rich_text_list_element">
         {border === 1 && <div className="w-1 rounded bg-gray-primary self-stretch"></div>}
 
-        <RichTextListWrapper element={element} className={`list-none`}>
+        <RichTextListWrapper element={element} className="list-none">
           {elements.map((el, i) => {
             return (
               <li

diff --git a/src/components/blocks/rich_text/rich_text_section.tsx b/src/components/blocks/rich_text/rich_text_section.tsx
@@ -1,4 +1,5 @@
 import { RichTextSectionElement as RichTextSectionElementType } from "../../../types";
+import { merge_classes } from "../../../utils";
 import { SlackDate } from "../../../utils/markdown_parser/sub_elements";
 import { RichTextSectionBroadcast } from "./rich_text_section_broadcast";
 import { RichTextSectionChannel } from "./rich_text_section_channel";
@@ -24,13 +25,13 @@ export const RichTextSectionElement = (props: RichTextSectionElementProps) => {
 
     return (
       <span
-        className={`
-              slack_blocks_to_jsx__rich_text_section_element_text
-              ${style?.italic ? "italic" : ""}
-              ${style?.strike ? "line-through" : ""}
-              ${style?.code ? "slack_inline_code" : ""}
-              ${style?.bold ? "font-medium" : ""}
-            `}
+        className={merge_classes([
+          "slack_blocks_to_jsx__rich_text_section_element_text",
+          style?.italic ? "italic" : "",
+          style?.strike ? "line-through" : "",
+          style?.code ? "slack_inline_code" : "",
+          style?.bold ? "font-medium" : "",
+        ])}
       >
         {text}
       </span>
@@ -45,14 +46,14 @@ export const RichTextSectionElement = (props: RichTextSectionElementProps) => {
         target="_blank"
         rel="noreferrer noopener"
         href={url}
-        className={`
-            slack_blocks_to_jsx__rich_text_section_element_link
-          text-blue-primary hover:underline underline-offset-4
-            ${style?.italic ? "italic" : ""}
-            ${style?.strike ? "line-through" : ""}
-            ${style?.code ? "slack_inline_code" : ""}
-            ${style?.bold ? "font-medium" : ""}
-          `}
+        className={merge_classes([
+          "slack_blocks_to_jsx__rich_text_section_element_link",
+          "text-blue-primary hover:underline underline-offset-4",
+          style?.italic ? "italic" : "",
+          style?.strike ? "line-through" : "",
+          style?.code ? "slack_inline_code" : "",
+          style?.bold ? "font-medium" : "",
+        ])}
       >
         {text}
       </a>
@@ -64,13 +65,13 @@ export const RichTextSectionElement = (props: RichTextSectionElementProps) => {
 
     return (
       <span
-        className={`
-              slack_blocks_to_jsx__rich_text_section_element_date
-              ${style?.italic ? "italic" : ""}
-              ${style?.strike ? "line-through" : ""}
-              ${style?.code ? "slack_inline_code" : ""}
-              ${style?.bold ? "font-medium" : ""}
-            `}
+        className={merge_classes([
+          "slack_blocks_to_jsx__rich_text_section_element_date",
+          style?.italic ? "italic" : "",
+          style?.strike ? "line-through" : "",
+          style?.code ? "slack_inline_code" : "",
+          style?.bold ? "font-medium" : "",
+        ])}
       >
         <SlackDate
           element={{

diff --git a/src/components/blocks/rich_text/rich_text_section_broadcast.tsx b/src/components/blocks/rich_text/rich_text_section_broadcast.tsx
@@ -1,5 +1,6 @@
 import { RichTextSectionBroadcast as RichTextSectionBroadcastType } from "../../../types";
 import { useGlobalData } from "../../../store";
+import { merge_classes } from "../../../utils";
 
 type Props = RichTextSectionBroadcastType;
 
@@ -13,13 +14,13 @@ export const RichTextSectionBroadcast = (props: Props) => {
 
   return (
     <span
-      className={`
-        slack_broadcast
-        slack_blocks_to_jsx__rich_text_section_element_broadcast
-        ${style?.italic ? "italic" : ""}
-        ${style?.strike ? "line-through" : ""}
-        ${style?.bold ? "font-medium" : ""}
-      `}
+      className={merge_classes([
+        "slack_broadcast",
+        "slack_blocks_to_jsx__rich_text_section_element_broadcast",
+        style?.italic ? "italic" : "",
+        style?.strike ? "line-through" : "",
+        style?.bold ? "font-medium" : "",
+      ])}
     >
       @{range}
     </span>

diff --git a/src/components/blocks/rich_text/rich_text_section_channel.tsx b/src/components/blocks/rich_text/rich_text_section_channel.tsx
@@ -1,5 +1,6 @@
 import { RichTextSectionChannel as RichTextSectionChannelType } from "../../../types";
 import { useGlobalData } from "../../../store";
+import { merge_classes } from "../../../utils";
 
 type Props = RichTextSectionChannelType;
 
@@ -15,13 +16,13 @@ export const RichTextSectionChannel = (props: Props) => {
   return (
     <span
       data-channel-id={channel?.id || channel_id}
-      className={`
-        slack_channel
-        slack_blocks_to_jsx__rich_text_section_element_channel
-        ${style?.italic ? "italic" : ""}
-        ${style?.strike ? "line-through" : ""}
-        ${style?.bold ? "font-medium" : ""}
-      `}
+      className={merge_classes([
+        "slack_channel",
+        "slack_blocks_to_jsx__rich_text_section_element_channel",
+        style?.italic ? "italic" : "",
+        style?.strike ? "line-through" : "",
+        style?.bold ? "font-medium" : "",
+      ])}
     >
       #{label}
     </span>

diff --git a/src/components/blocks/rich_text/rich_text_section_user.tsx b/src/components/blocks/rich_text/rich_text_section_user.tsx
@@ -1,5 +1,6 @@
 import { RichTextSectionUser as RichTextSectionUserType } from "../../../types";
 import { useGlobalData } from "../../../store";
+import { merge_classes } from "../../../utils";
 
 type Props = RichTextSectionUserType;
 
@@ -15,13 +16,13 @@ export const RichTextSectionUser = (props: Props) => {
   return (
     <span
       data-user-id={user?.id || user_id}
-      className={`
-        slack_user
-        slack_blocks_to_jsx__rich_text_section_element_user
-        ${style?.italic ? "italic" : ""}
-        ${style?.strike ? "line-through" : ""}
-        ${style?.bold ? "font-medium" : ""}
-      `}
+      className={merge_classes([
+        "slack_user",
+        "slack_blocks_to_jsx__rich_text_section_element_user",
+        style?.italic ? "italic" : "",
+        style?.strike ? "line-through" : "",
+        style?.bold ? "font-medium" : "",
+      ])}
     >
       @{label}
     </span>

diff --git a/src/components/blocks/rich_text/rich_text_section_user_group.tsx b/src/components/blocks/rich_text/rich_text_section_user_group.tsx
@@ -1,5 +1,6 @@
 import { RichTextSectionUsergroup as RichTextSectionUserGroupType } from "../../../types";
 import { useGlobalData } from "../../../store";
+import { merge_classes } from "../../../utils";
 
 type Props = RichTextSectionUserGroupType;
 
@@ -15,13 +16,13 @@ export const RichTextSectionUserGroup = (props: Props) => {
   return (
     <span
       data-usergroup-id={group?.id || usergroup_id}
-      className={`
-        slack_user_group
-        slack_blocks_to_jsx__rich_text_section_element_user_group
-        ${style?.italic ? "italic" : ""}
-        ${style?.strike ? "line-through" : ""}
-        ${style?.bold ? "font-medium" : ""}
-      `}
+      className={merge_classes([
+        "slack_user_group",
+        "slack_blocks_to_jsx__rich_text_section_element_user_group",
+        style?.italic ? "italic" : "",
+        style?.strike ? "line-through" : "",
+        style?.bold ? "font-medium" : "",
+      ])}
     >
       @{label}
     </span>

diff --git a/src/components/blocks/section.tsx b/src/components/blocks/section.tsx
@@ -1,6 +1,6 @@
 import { getElementComponent } from "..";
 import { SectionBlock } from "../../types";
-import { is_accessory_stacked } from "../../utils";
+import { is_accessory_stacked, merge_classes } from "../../utils";
 import { TextObject } from "../composition_objects";
 
 type SectionProps = {
@@ -16,9 +16,10 @@ export const Section = (props: SectionProps) => {
   return (
     <div
       id={block_id}
-      className={`mt-2 mb-1 text-primary slack_blocks_to_jsx__section flex w-full text-black-primary ${
-        is_stacked ? "flex-col" : ""
-      }`}
+      className={merge_classes([
+        "mt-2 mb-1 text-primary slack_blocks_to_jsx__section flex w-full text-black-primary",
+        is_stacked ? "flex-col" : "",
+      ])}
     >
       <div className="grow">
         <div className="flex flex-col gap-3">

diff --git a/src/components/elements/button_element.tsx b/src/components/elements/button_element.tsx
@@ -1,4 +1,5 @@
 import type { ButtonElement as ButtonElementType } from "../../types";
+import { merge_classes } from "../../utils";
 import { TextObject } from "../composition_objects";
 
 type TextObjectProps = {
@@ -15,13 +16,15 @@ export const ButtonElement = (props: TextObjectProps) => {
       type="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 slack_blocks_to_jsx__button_element ${
+      className={merge_classes([
+        "px-2 pt-0 pb-[1px] text-small h-[28px] min-w-[56px] border rounded whitespace-nowrap font-semibold",
+        "slack_blocks_to_jsx__button_element",
         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"
-      }`}
+          : "border-black-primary.3 text-black-primary",
+      ])}
       onClick={() => {
         if (url) {
           window.open(url, "_blank");

diff --git a/src/components/elements/users_select_element.tsx b/src/components/elements/users_select_element.tsx
@@ -85,9 +85,7 @@ export const UsersSelectElement = (props: TextObjectProps) => {
 
                   <div className="relative">
                     {option.online && (
-                      <div
-                        className={`bg-green-secondary w-[9px] h-[9px] rounded-full shrink-0`}
-                      ></div>
+                      <div className="bg-green-secondary w-[9px] h-[9px] rounded-full shrink-0"></div>
                     )}
 
                     {!option.online && (

diff --git a/src/message.tsx b/src/message.tsx
@@ -3,6 +3,7 @@ import { Header } from "./header";
 import { getBlockComponent } from "./components";
 import { BlockWrapper } from "./block_wrapper";
 import { GlobalProvider, GlobalStore } from "./store";
+import { merge_classes } from "./utils";
 
 type Props = {
   /**
@@ -32,6 +33,8 @@ type Props = {
   withoutWrapper?: boolean;
 };
 
+export type MessageProps = Props;
+
 export const Message = (props: Props) => {
   const {
     blocks,
@@ -52,9 +55,11 @@ export const Message = (props: Props) => {
       <GlobalProvider data={data} hooks={hooks}>
         <div
           id="slack_blocks_to_jsx"
-          className={`slack_blocks_to_jsx relative flex gap-2 w-full max-w-[600px] ${
-            unstyled ? "styles_disabled" : "styles_enabled"
-          } ${className}`}
+          className={merge_classes([
+            "slack_blocks_to_jsx relative flex gap-2 w-full max-w-[600px]",
+            unstyled ? "styles_disabled" : "styles_enabled",
+            className,
+          ])}
           style={style}
         >
           {blocks.map((block, i) => {
@@ -72,9 +77,11 @@ export const Message = (props: Props) => {
     <GlobalProvider data={data} hooks={hooks}>
       <div id="slack_blocks_to_jsx">
         <section
-          className={`flex gap-2 w-full max-w-[600px] slack_blocks_to_jsx relative ${
-            unstyled ? "styles_disabled" : "styles_enabled"
-          } ${className}`}
+          className={merge_classes([
+            "slack_blocks_to_jsx relative flex gap-2 w-full max-w-[600px]",
+            unstyled ? "styles_disabled" : "styles_enabled",
+            className,
+          ])}
           style={style}
         >
           {showBlockKitDebug && (

diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -2,3 +2,4 @@ export * from "./date";
 export * from "./emojis";
 export * from "./markdown_parser";
 export * from "./is_accessory_stacked";
+export * from "./merge_classes";
diff --git a/src/utils/merge_classes.ts b/src/utils/merge_classes.ts
@@ -0,0 +1,7 @@
+// INTEGRATE TAILWIND MERGE TO HANDLE CLASSES OVERRIDE ISSUE
+export const merge_classes = (classes: string[]) => {
+  return classes
+    .map((class_str) => class_str.replace(/  +/g, " ").trim())
+    .filter((str) => !!str)
+    .join(" ");
+};