CC-177: Add <MarkdownRenderer/> to Component Library

package.json

@@ -51,6 +51,7 @@
     "@stylistic/stylelint-config": "^3.0.1",
     "@stylistic/stylelint-plugin": "^4.0.0",
     "@testing-library/react": "^16.3.2",
+    "@types/dompurify": "^3.0.5",
     "@types/node": "^24.10.1",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
@@ -90,9 +91,11 @@
     "colorjs.io": "^0.6.1",
     "date-fns": "^4.1.0",
     "deepmerge": "^4.3.1",
+    "dompurify": "^3.4.15",
     "lucide-react": "^0.548.0",
     "pdfjs-dist": "^5.4.0",
     "react-day-picker": "^9.14.0",
+    "react-markdown": "^10.1.0",
     "react-pdf": "^10.0.0"
   }
 }

src/components/MarkdownRenderer/MarkdownRenderer.module.scss

@@ -0,0 +1,16 @@
+@use "../../style/layers";
+@use "../../style/text";
+
+@layer components {
+  .markdownRenderer {
+    overflow-wrap: anywhere;
+
+    > :first-child {
+      margin-top: 0;
+    }
+
+    > :last-child {
+      margin-bottom: 0;
+    }
+  }
+}

src/components/MarkdownRenderer/MarkdownRenderer.module.scss.d.ts

@@ -0,0 +1 @@
+export declare const markdownRenderer: string;

src/components/MarkdownRenderer/MarkdownRenderer.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { MarkdownRenderer } from './MarkdownRenderer';
+
+const meta: Meta<typeof MarkdownRenderer> = {
+  title: 'Components/MarkdownRenderer',
+  component: MarkdownRenderer,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    className: { table: { disable: true } },
+    content: {
+      control: 'text',
+      description: 'The raw markdown content to sanitize and render.',
+      table: { category: 'Content' },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    content: [
+      '## Tournament Rules',
+      '',
+      'Welcome to the **Autumn Championship**. Please read the following before registering.',
+      '',
+      '- Lists must be submitted 48 hours in advance.',
+      '- All models must be painted to a 3-color standard.',
+      '- Games are timed at 2.5 hours per round.',
+      '',
+      'Questions? Contact the organizer.',
+    ].join('\n'),
+  },
+};

src/components/MarkdownRenderer/MarkdownRenderer.tsx

@@ -0,0 +1,21 @@
+import ReactMarkdown from 'react-markdown';
+import clsx from 'clsx';
+import DOMPurify from 'dompurify';
+
+import styles from './MarkdownRenderer.module.scss';
+
+export interface MarkdownRendererProps {
+  className?: string;
+  content: string;
+}
+
+export const MarkdownRenderer = ({
+  className,
+  content,
+}: MarkdownRendererProps): JSX.Element => (
+  <div className={clsx(styles.markdownRenderer, className)}>
+    <ReactMarkdown>
+      {DOMPurify.sanitize(content)}
+    </ReactMarkdown>
+  </div>
+);

src/components/MarkdownRenderer/index.ts

@@ -0,0 +1,4 @@
+export {
+  MarkdownRenderer,
+  type MarkdownRendererProps,
+} from './MarkdownRenderer';

src/index.ts

@@ -18,6 +18,7 @@ export * from './components/InputDateTime';
 export * from './components/InputPanel';
 export * from './components/InputText';
 export * from './components/InputTextArea';
+export * from './components/MarkdownRenderer';
 export * from './components/MasonryGrid';
 export * from './components/Menu';
 export * from './components/Pagination';