feat: ✨ add named_classes to easily overide styles

package.json

@@ -11,7 +11,7 @@
   ],
   "repository": "https://github.com/themashcodee/slack-blocks-to-jsx.git",
   "license": "MIT",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -41,6 +41,7 @@
     "@changesets/cli": "^2.26.2",
     "@types/react": "17.0.0",
     "@types/react-dom": "17.0.0",
+    "tailwindcss": "^3.4.1",
     "tsup": "^7.2.0",
     "typescript": "^5.2.2"
   }

src/components/blocks/actions.tsx

@@ -9,7 +9,10 @@ export const Actions = (props: ActionsProps) => {
   const { elements, block_id } = props.data;
 
   return (
-    <div id={block_id} className="mb-2 text-primary flex w-full text-black-primary items-center">
+    <div
+      id={block_id}
+      className="mb-2 text-primary flex w-full text-black-primary items-center slack_blocks_to_jsx__actions"
+    >
       <div className="flex flex-wrap">
         {elements.map((element, i) => {
           if (element.type === "button") {

src/components/blocks/context.tsx

@@ -12,7 +12,7 @@ export const Context = (props: ContextProps) => {
   return (
     <div
       id={block_id}
-      className="my-1 text-primary flex w-full text-black-primary flex-wrap items-center overflow-hidden"
+      className="my-1 text-primary flex w-full text-black-primary flex-wrap items-center overflow-hidden slack_blocks_to_jsx__context"
     >
       {elements.slice(0, 10).map((element, i) => {
         if (element.type !== "image") {

src/components/blocks/divider.tsx

@@ -9,6 +9,9 @@ export const Divider = (props: DividerProps) => {
   const { block_id } = data;
 
   return (
-    <div id={block_id} className="border-b border-gray-primary border-solid w-full mt-1 mb-2"></div>
+    <div
+      id={block_id}
+      className="border-b border-gray-primary border-solid w-full mt-1 mb-2 slack_blocks_to_jsx__divider"
+    ></div>
   );
 };

src/components/blocks/image.tsx

@@ -11,7 +11,7 @@ export const Image = (props: ImageProps) => {
   const [showImage, setShowImage] = useState(true);
 
   return (
-    <div id={block_id} className="my-2 flex flex-col gap-2">
+    <div id={block_id} className="my-2 flex flex-col gap-2 slack_blocks_to_jsx__image">
       <div className="text-black-secondary text-small flex gap-1 items-center">
         <span>
           {alt_text}

src/components/blocks/section.tsx

@@ -16,7 +16,7 @@ export const Section = (props: SectionProps) => {
   return (
     <div
       id={block_id}
-      className={`mt-2 mb-1 text-primary flex w-full text-black-primary ${
+      className={`mt-2 mb-1 text-primary slack_blocks_to_jsx__section flex w-full text-black-primary ${
         is_stacked ? "flex-col" : ""
       }`}
     >

src/components/elements/button_element.tsx

@@ -14,7 +14,7 @@ export const ButtonElement = (props: TextObjectProps) => {
     <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 ${
+      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 ${
         style === "primary"
           ? "border-green-primary.3 text-green-primary"
           : style === "danger"

src/components/elements/checkboxes_element.tsx

@@ -23,7 +23,7 @@ export const CheckboxesElement = (props: TextObjectProps) => {
   }, [focus_on_load]);
 
   return (
-    <div id={action_id} className="my-1 flex w-full">
+    <div id={action_id} className="my-1 flex w-full slack_blocks_to_jsx__checkboxes">
       <fieldset className="flex flex-col gap-2">
         {options.map((option, i) => {
           const { text, value, description } = option;