open source reactmarkdown thingy

frontend/packages/core/jest.config.js

@@ -8,4 +8,8 @@ module.exports = {
       statements: "47",
     },
   },
+  moduleNameMapper: {
+    ...baseConfig.moduleNameMapper,
+    "react-markdown": "<rootDir>/node_modules/react-markdown/react-markdown.min.js",
+  }
 };

frontend/packages/core/package.json

@@ -47,11 +47,15 @@
     "react-dom": "^17.0.2",
     "react-hook-form": "^7.25.3",
     "react-is": "^17.0.2",
+    "react-markdown": "^8.0.3",
+    "remark-gfm": "^3.0.1",
     "react-router": "^6.0.0-beta",
     "react-router-dom": "^6.0.0-beta",
     "react-test-renderer": "^17.0.2",
     "recharts": "^2.1.9",
     "superstruct": "~0.15.0",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^12.0.0",
     "uuid": "^8.3.2",
     "yup": "^0.32.8"
   },

frontend/packages/core/src/MarkdownPane/index.tsx

+export { default as MarkdownPane } from "./markdown-pane";
+
+export type {
+    MarkdownPaneProps
+} from "./markdown-pane";
\ No newline at end of file

frontend/packages/core/src/MarkdownPane/markdown-pane.tsx

+import React from "react";
+import { Button } from "../button"
+import { Typography } from "../typography"
+import { Divider, Paper } from "@material-ui/core";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+export interface MarkdownPaneProps {
+  /** the function that will be called when clicking the X button */
+  onClose: () => void;
+  /** The title that will be displayed at the top */
+  title: string;
+  /** The actual markdown text content that will be displayed */
+  markdownText: string;
+  /** whether or not to use gfm, defaults to true */
+  useGithubFlavor?: boolean;
+  //** width of the content, defaults to 950px */
+  width?: string
+}
+
+// TODO(smonero): wrap this in a Mui Drawer
+// TODO(smonero): give it a storybook with controls
+// This is designed to be used within a Mui <Drawer>
+const MarkdownPane = ({ onClose, title, markdownText, useGithubFlavor = true, width = "950px" }: MarkdownPaneProps) => {
+  return (
+    <span style={{ width: width }}>
+      <Paper>
+        <span
+          style={{ display: "flex", justifyContent: "space-between", padding: "32px 0px 32px 0px" }}
+        >
+          <Typography variant="h1">{title}</Typography>
+          <Button text="x" onClick={onClose} />
+        </span>
+        <Divider />
+        <ReactMarkdown remarkPlugins={useGithubFlavor ? [remarkGfm] : []}>{markdownText}</ReactMarkdown>
+      </Paper>
+    </span>
+  );
+};
+
+export default MarkdownPane;

frontend/packages/core/src/MarkdownPane/tests/markdown-pane.test.tsx

+import React from "react";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom/extend-expect";
+import "@testing-library/jest-dom";
+import MarkdownPane from "../markdown-pane";
+const mdContent = `
+## A subtitle
+
+- Meow meow meow
+- a bulleted line of text
+`
+
+test("Renders a title and content", () => {
+    const wrapper = render(<MarkdownPane onClose={() => {}} title={"The Title"} markdownText={mdContent} />)
+
+    // expect the dashes to be converted, so they won't be found
+    expect(screen.getByText("-")).toBeNull();
+    expect(screen.getByText("The Title")).toBeInTheDocument();
+    expect(screen.getByText("Meow meow meow")).toBeInTheDocument();
+})
+

frontend/packages/core/src/index.tsx

@@ -45,6 +45,7 @@ export * from "./NPS";
 export * from "./chip";
 export * from "./Charts";
 export * from "./Assets/icons";
+export * from "./MarkdownPane";
 
 export { default as ClutchApp } from "./AppProvider";
 

frontend/packages/core/src/stories/linearTimeline.stories.tsx

@@ -4,7 +4,6 @@ import type { Meta } from "@storybook/react";
 
 import LinearTimeline from "../Charts/linearTimeline";
 import type { LinearTimelineData } from "../Charts/types";
-
 export default {
   title: "Core/Charts/LinearTimeline",
   component: LinearTimeline,