feat: markdown to custom component

apps/app/components/command-palette/command-pallette.tsx

@@ -45,6 +45,7 @@ import {
   ChangeIssuePriority,
   ChangeIssueAssignee,
   ChangeInterfaceTheme,
+  ProductUpdatesModal,
 } from "components/command-palette";
 import { BulkDeleteIssuesModal } from "components/core";
 import { CreateUpdateCycleModal } from "components/cycles";
@@ -74,6 +75,7 @@ export const CommandPalette: React.FC = () => {
   const [isIssueModalOpen, setIsIssueModalOpen] = useState(false);
   const [isProjectModalOpen, setIsProjectModalOpen] = useState(false);
   const [isShortcutsModalOpen, setIsShortcutsModalOpen] = useState(false);
+  const [isProductUpdatesModalOpen, setIsProductUpdatesModalOpen] = useState(false);
   const [isCreateCycleModalOpen, setIsCreateCycleModalOpen] = useState(false);
   const [isCreateViewModalOpen, setIsCreateViewModalOpen] = useState(false);
   const [isCreateModuleModalOpen, setIsCreateModuleModalOpen] = useState(false);
@@ -221,6 +223,8 @@ export const CommandPalette: React.FC = () => {
           setIsCreateCycleModalOpen(true);
         } else if (keyPressed === "m") {
           setIsCreateModuleModalOpen(true);
+        } else if (keyPressed === "u") {
+          setIsProductUpdatesModalOpen(true);
         }
       }
     },
@@ -324,6 +328,10 @@ export const CommandPalette: React.FC = () => {
   return (
     <>
       <ShortcutsModal isOpen={isShortcutsModalOpen} setIsOpen={setIsShortcutsModalOpen} />
+      <ProductUpdatesModal
+        isOpen={isProductUpdatesModalOpen}
+        setIsOpen={setIsProductUpdatesModalOpen}
+      />
       {workspaceSlug && (
         <CreateProjectModal isOpen={isProjectModalOpen} setIsOpen={setIsProjectModalOpen} />
       )}
@@ -393,7 +401,7 @@ export const CommandPalette: React.FC = () => {
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-brand-base divide-opacity-10 rounded-xl bg-brand-surface-2 border-brand-base border shadow-2xl transition-all">
+              <Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-brand-base divide-opacity-10 rounded-xl border border-brand-base bg-brand-surface-2 shadow-2xl transition-all">
                 <Command
                   filter={(value, search) => {
                     if (value.toLowerCase().includes(search.toLowerCase())) return 1;

apps/app/components/command-palette/index.ts

@@ -4,3 +4,4 @@ export * from "./change-issue-state";
 export * from "./change-issue-priority";
 export * from "./change-issue-assignee";
 export * from "./change-interface-theme";
+export * from "./product-updates-modal";

apps/app/components/command-palette/product-updates-modal.tsx

@@ -0,0 +1,76 @@
+import React from "react";
+import useSWR from "swr";
+
+// headless ui
+import { Dialog, Transition } from "@headlessui/react";
+// icons
+import { XMarkIcon } from "@heroicons/react/20/solid";
+import workspaceService from "services/workspace.service";
+import { MarkdownRenderer } from "components/ui";
+
+type Props = {
+  isOpen: boolean;
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+export const ProductUpdatesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
+  const { data: updates } = useSWR("PRODUCT_UPDATES", () => workspaceService.getProductUpdates());
+  console.log("updates:", updates);
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20 max-h-96 overflow-y-auto" onClose={setIsOpen}>
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-20 overflow-y-auto">
+          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
+                <div className="max-h-[600px] overflow-y-auto bg-white p-5">
+                  <div className="sm:flex sm:items-start">
+                    <div className="flex w-full flex-col gap-y-4 text-center sm:text-left">
+                      <Dialog.Title
+                        as="h3"
+                        className="flex justify-between text-lg font-medium leading-6 text-gray-900"
+                      >
+                        <span>Product Updates</span>
+                        <span>
+                          <button type="button" onClick={() => setIsOpen(false)}>
+                            <XMarkIcon
+                              className="h-6 w-6 text-gray-400 hover:text-gray-500"
+                              aria-hidden="true"
+                            />
+                          </button>
+                        </span>
+                      </Dialog.Title>
+                      {updates &&
+                        updates.length > 0 &&
+                        updates.map((item: any) => <MarkdownRenderer markdown={item.body} />)}
+                    </div>
+                  </div>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};

apps/app/components/ui/index.ts

@@ -20,3 +20,4 @@ export * from "./progress-bar";
 export * from "./spinner";
 export * from "./tooltip";
 export * from "./toggle-switch";
+export * from "./markdown-to-component";

apps/app/components/ui/markdown-to-component.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+import ReactMarkdown from "react-markdown";
+
+interface CustomComponentProps {
+  href: string;
+  children: React.ReactNode;
+}
+
+type CustomComponent = React.ComponentType<CustomComponentProps>;
+
+interface Props {
+  markdown: string;
+  components?: {
+    a?: CustomComponent;
+    blockquote?: CustomComponent;
+    code?: CustomComponent;
+    del?: CustomComponent;
+    em?: CustomComponent;
+    heading?: CustomComponent;
+    hr?: CustomComponent;
+    image?: CustomComponent;
+    inlineCode?: CustomComponent;
+    link?: CustomComponent;
+    list?: CustomComponent;
+    listItem?: CustomComponent;
+    paragraph?: CustomComponent;
+    strong?: CustomComponent;
+    table?: CustomComponent;
+    tableCell?: CustomComponent;
+    tableHead?: CustomComponent;
+    tableRow?: CustomComponent;
+  };
+  options?: any;
+}
+
+const HeadingPrimary: CustomComponent = ({ children }) => (
+  <h1 className="text-lg font-semibold text-brand-base">{children}</h1>
+);
+
+const HeadingSecondary: CustomComponent = ({ children }) => (
+  <h3 className="text-base font-semibold text-brand-base">{children}</h3>
+);
+
+const Paragraph: CustomComponent = ({ children }) => (
+  <p className="text-sm text-brand-secondary">{children}</p>
+);
+
+const OrderedList: CustomComponent = ({ children }) => (
+  <ol className="ml-8 mb-4 list-decimal text-sm text-brand-secondary">{children}</ol>
+);
+
+const UnorderedList: CustomComponent = ({ children }) => (
+  <ul className="ml-8 mb-4 list-disc text-sm text-brand-secondary">{children}</ul>
+);
+
+const Link: CustomComponent = ({ href, children }) => (
+  <a href={href} className="underline hover:no-underline" target="_blank" rel="noopener noreferrer">
+    {children}
+  </a>
+);
+
+export const MarkdownRenderer: React.FC<Props> = ({ markdown, options = {} }) => {
+  const customComponents = {
+    h1: HeadingPrimary,
+    h3: HeadingSecondary,
+    p: Paragraph,
+    ol: OrderedList,
+    ul: UnorderedList,
+    a: Link,
+  };
+
+  return (
+    <ReactMarkdown components={customComponents} {...options}>
+      {markdown}
+    </ReactMarkdown>
+  );
+};

apps/app/package.json

@@ -36,6 +36,7 @@
     "react-dom": "18.2.0",
     "react-dropzone": "^14.2.3",
     "react-hook-form": "^7.38.0",
+    "react-markdown": "^8.0.7",
     "recharts": "^2.3.2",
     "remirror": "^2.0.23",
     "swr": "^1.3.0",