Chore/leaderboard markdown improvs (#73)

* feat: changed markdown-preview with react-markdown lib

* feat: integrated new markdown component using react-markdown

* fix: make markdown editor next.js compatible

* chore: leaderboard improvements

* added changeset

Author: nijoe1

.changeset/sweet-crabs-care.md

@@ -0,0 +1,7 @@
+---
+"@gitcoin/ui": patch
+---
+
+chore: leaderboard impovements
+chore: start using react-markdown instead of markdown-preview
+fix: markdown editor to work with next.js

packages/ui/package.json

@@ -249,7 +249,6 @@
     "@storybook/addon-actions": "8.3.5",
     "@tanstack/react-query": "^5.59.15",
     "@types/papaparse": "^5.3.15",
-    "@uiw/react-markdown-preview": "^5.1.3",
     "@uiw/react-md-editor": "^4.0.4",
     "cmdk": "1.0.0",
     "decimal.js": "^10.5.0",
@@ -264,14 +263,17 @@
     "papaparse": "^5.4.1",
     "react-day-picker": "9.3.2",
     "react-hook-form": "^7.53.0",
-    "react-markdown": "^9.0.1",
+    "react-markdown": "^9.0.3",
     "react-number-format": "^5.4.3",
     "react-resizable-panels": "^2.1.4",
     "react-use": "^17.6.0",
     "recharts": "^2.15.0",
+    "rehype-highlight": "^7.0.2",
+    "rehype-katex": "^7.0.1",
     "rehype-raw": "^7.0.0",
     "rehype-sanitize": "^6.0.0",
     "remark-gfm": "^4.0.0",
+    "remark-math": "^6.0.0",
     "sonner": "^1.5.0",
     "storybook-mock-date-decorator": "^2.0.6",
     "tailwind-variants": "^0.2.1",

packages/ui/src/features/retrofunding/components/Leaderboard/Leaderboard.tsx

@@ -30,7 +30,8 @@ const leaderboardVariants = tv({
       "3xl": "rounded-3xl",
     },
     size: {
-      default: "",
+      default:
+        "[&_td:first-child]:mt-1 [&_td:first-child]:w-12 [&_td:first-child]:flex-1 [&_td:first-child]:flex-col ",
       slim: "[&_.leaderboard-rank-default]:size-6 [&_.leaderboard-rank-default]:text-base [&_.leaderboard-table-headers]:text-lg [&_.leaderboard-table-icons]:size-4 [&_.leaderboard-table-items]:text-base [&_.metric-value]:text-base [&_.metric-value]:leading-6 [&_.project-logo]:size-7 [&_.project-name]:text-lg [&_.project-name]:leading-6 [&_td:first-child]:flex [&_td:first-child]:w-12 [&_td:first-child]:justify-center [&_td:not(:nth-child(2))]:text-center [&_td]:px-2 [&_th:first-child]:w-12 [&_th:not(:nth-child(2))]:text-center [&_th:nth-child(2)]:min-w-[300px] [&_th]:px-2",
     },
   },

packages/ui/src/features/retrofunding/components/Leaderboard/components/DesktopLeaderboard.tsx

@@ -101,7 +101,7 @@ export const DesktopLeaderboard = ({
                 <Icon type={IconType.SORT} className={icon()} />
               </div>
             </TableHead>
-            <TableHead className="max-w-80 px-7">
+            <TableHead className="min-w-96 px-7">
               <span className={headerText()}>Project name</span>
             </TableHead>
             {metricIds.map((metricId) => (

packages/ui/src/features/retrofunding/components/Leaderboard/components/ProjectInfo.tsx

@@ -4,21 +4,23 @@ import { useMediaQuery } from "usehooks-ts";
 import { IconLabel } from "@/components/IconLabel";
 import { cn } from "@/lib";
 import { IconType } from "@/primitives/Icon";
+import { Markdown } from "@/primitives/Markdown";
 
 const projectInfoVariants = tv({
   slots: {
-    container: "flex flex-col gap-4 pb-4 pl-4",
+    container: "flex w-full flex-col gap-4 pb-4 pl-4",
     title:
       "leaderboard-project-info-link cursor-pointer truncate font-ui-sans text-sm font-normal leading-7 hover:underline",
     description:
-      "leaderboard-project-info-description line-clamp-3 font-ui-sans font-normal leading-7",
+      "leaderboard-project-info-description max-h-[350px] overflow-y-auto text-left font-ui-sans font-normal leading-7 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
     icon: "leaderboard-project-info-icons size-5 shrink-0 ",
   },
 });
 
 interface ProjectInfoProps {
   project: {
     website?: string;
+    projectProfile?: string;
     projectTwitter?: string;
     projectGithub?: string;
     description?: string;
@@ -31,47 +33,57 @@ export const ProjectInfo = ({ project }: ProjectInfoProps) => {
   return (
     <div className={cn(container(), isDesktopView && "pl-6")}>
       <div className={cn("flex w-fit flex-col gap-1", isDesktopView && "flex-row gap-6")}>
-        <IconLabel
-          type="social"
-          platform="website"
-          link={project.website}
-          iconVariant={icon()}
-          textVariant={title()}
-          className="shrink-0 items-center"
-        />
-        <IconLabel
-          type="default"
-          iconType={IconType.EXPLORER_RAW}
-          label={
-            <a href={project.website} target="_blank" rel="noreferrer" className={title()}>
-              Project profile
-            </a>
-          }
-          iconVariant={icon()}
-          className="shrink-0 items-center"
-        />
-        <IconLabel
-          type="social"
-          platform="twitter"
-          link={`https://twitter.com/${project.projectTwitter}`}
-          isVerified={true}
-          textVariant={title()}
-          iconVariant={icon()}
-          className="shrink-0 items-center"
-        />
+        {project.website && (
+          <IconLabel
+            type="social"
+            platform="website"
+            link={project.website}
+            iconVariant={icon()}
+            textVariant={title()}
+            className="shrink-0 items-center"
+          />
+        )}
+        {project.projectProfile && (
+          <IconLabel
+            type="default"
+            iconType={IconType.EXPLORER_RAW}
+            label={
+              <a href={project.projectProfile} target="_blank" rel="noreferrer" className={title()}>
+                Project profile
+              </a>
+            }
+            iconVariant={icon()}
+            className="shrink-0 items-center"
+          />
+        )}
+        {project.projectTwitter && (
+          <IconLabel
+            type="social"
+            platform="twitter"
+            link={`https://twitter.com/${project.projectTwitter}`}
+            isVerified={true}
+            textVariant={title()}
+            iconVariant={icon()}
+            className="shrink-0 items-center"
+          />
+        )}
 
-        <IconLabel
-          type="social"
-          platform="github"
-          link={`https://github.com/${project.projectGithub}`}
-          isVerified={true}
-          textVariant={title()}
-          iconVariant={icon()}
-          className="shrink-0 items-center"
-        />
+        {project.projectGithub && (
+          <IconLabel
+            type="social"
+            platform="github"
+            link={`https://github.com/${project.projectGithub}`}
+            isVerified={true}
+            textVariant={title()}
+            iconVariant={icon()}
+            className="shrink-0 items-center"
+          />
+        )}
       </div>
 
-      <span className={description()}>{project.description}</span>
+      <div className={cn(description(), "w-[calc(100vw-328px)]")}>
+        <Markdown>{project.description}</Markdown>
+      </div>
     </div>
   );
 };

packages/ui/src/features/retrofunding/components/Leaderboard/types.ts

@@ -6,6 +6,7 @@ export interface LeaderboardProps {
         name: string;
         logoImg?: string;
         website?: string;
+        projectProfile?: string;
         projectTwitter?: string;
         projectGithub?: string;
         description?: string;

packages/ui/src/primitives/Markdown/Markdown.tsx

@@ -1,18 +1,22 @@
 "use client";
 
-import MarkdownPreview from "@uiw/react-markdown-preview";
+import ReactMarkdown from "react-markdown";
+
+import rehypeHighlight from "rehype-highlight";
+import rehypeKatex from "rehype-katex";
+import remarkGfm from "remark-gfm";
+import remarkMath from "remark-math";
 
 import { withSSR } from "@/lib/withSSR";
 
-const MarkdownComponent = ({ children }: { children: string }) => {
+export const MarkdownComponent = ({ children }: { children?: string }) => {
   return (
-    <MarkdownPreview
-      source={children}
-      wrapperElement={{
-        "data-color-mode": "light",
-      }}
-    />
+    <ReactMarkdown
+      remarkPlugins={[remarkGfm, remarkMath]}
+      rehypePlugins={[rehypeKatex, rehypeHighlight]}
+    >
+      {children}
+    </ReactMarkdown>
   );
 };
-
 export const Markdown = withSSR(MarkdownComponent);

packages/ui/src/primitives/MarkdownEditor/MarkdownEditor.stories.tsx

@@ -22,9 +22,9 @@ type Story = StoryObj<typeof MarkdownEditor>;
 const MarkdownEditorWithHooks = (args: React.ComponentProps<typeof MarkdownEditor>) => {
   const [value, setValue] = useState(args.value || "");
 
-  const handleChange = (valueOrEvent: string | React.FormEvent<HTMLDivElement>) => {
-    if (typeof valueOrEvent === "string") {
-      setValue(valueOrEvent);
+  const handleChange = (value?: string, event?: React.ChangeEvent<HTMLTextAreaElement>, state?: any) => {
+    if (value !== undefined) {
+      setValue(value);
     }
   };
 

packages/ui/src/primitives/MarkdownEditor/MarkdownEditor.tsx

@@ -1,21 +1,19 @@
 "use client";
 
-import { ComponentProps, forwardRef, Ref, useContext } from "react";
+import { forwardRef, useContext } from "react";
+import { Suspense, lazy } from "react";
+import { useState, useEffect, ComponentType } from "react";
 
-import MDEditor, { commands, EditorContext } from "@uiw/react-md-editor";
+import { EditorContext, commands, MDEditorProps } from "@uiw/react-md-editor";
 import rehypeSanitize from "rehype-sanitize";
 
 import { IconType } from "@/index";
 import { cn } from "@/lib";
 import { Icon } from "@/primitives/Icon";
-import { Markdown } from "@/types";
 
 import "./markdown_editor.css";
 
-export interface MarkdownEditorProps extends Markdown {
-  onChange?: (value: string) => void;
-  value?: string;
-}
+const MDEditor = lazy(() => import("@uiw/react-md-editor"));
 
 const WriteButton = () => {
   const { preview, dispatch } = useContext(EditorContext);
@@ -94,30 +92,46 @@ const customItalicCommand = {
   icon: <Icon type={IconType.ITALIC} className="size-fit text-grey-900" />,
 };
 
-export const MarkdownEditor = forwardRef(function MarkdownEditorComponent(
-  { ...props }: MarkdownEditorProps & ComponentProps<"div">,
-  ref: Ref<HTMLDivElement>,
-) {
+export const MarkdownEditor_ = forwardRef(function MarkdownEditorComponent({
+  ...props
+}: MDEditorProps) {
   return (
-    <MDEditor
-      commands={[editPreviewCommand, customPreviewCommand]}
-      // TODO: Customize commands Icons
-      extraCommands={[
-        customTitleCommand,
-        customBoldCommand,
-        customItalicCommand,
-        commands.divider,
-        commands.link,
-        commands.image,
-      ]}
-      ref={ref}
-      preview="edit"
-      previewOptions={{
-        rehypePlugins: [[rehypeSanitize]],
-      }}
-      value={props.value ?? props.placeholder}
-      onChange={(val) => props.onChange?.(val ?? "")}
-      data-color-mode="light"
-    />
+    <Suspense fallback={null}>
+      <MDEditor
+        commands={[editPreviewCommand, customPreviewCommand]}
+        extraCommands={[
+          customTitleCommand,
+          customBoldCommand,
+          customItalicCommand,
+          commands.divider,
+          commands.link,
+          commands.image,
+        ]}
+        preview="edit"
+        previewOptions={{
+          rehypePlugins: [[rehypeSanitize]],
+        }}
+        value={props.value}
+        onChange={(val) => props.onChange?.(val ?? "")}
+        data-color-mode="light"
+      />
+    </Suspense>
   );
 });
+
+export const MarkdownEditor = (props: MDEditorProps) => (
+  <DynamicLoader component={MarkdownEditor_} {...props} />
+);
+
+export function DynamicLoader<T extends object>({
+  component: Component,
+  ...props
+}: { component: ComponentType<T> } & T) {
+  const [isMounted, setIsMounted] = useState(false);
+
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+  if (!isMounted) return null;
+  return <Component {...(props as T)} />;
+}