QUIC-1590-widget-markdown-card

package.json

@@ -29,7 +29,9 @@
     "preact": "^10.8.1",
     "preactement": "^1.8.2",
     "react-cool-dimensions": "^2.0.7",
-    "react-spring": "^9.4.5"
+    "react-markdown": "^6.0.0",
+    "react-spring": "^9.4.5",
+    "remark-gfm": "^1.0.0"
   },
   "devDependencies": {
     "@mdx-js/preact": "^2.1.2",

src/components/ContentCards/ContentCards.tsx

@@ -5,6 +5,7 @@ import { useTransition, animated, config } from 'react-spring';
 import { useSoulMachines } from '../../contexts/SoulMachinesContext';
 import { ImageCard } from '../ImageCard';
 import { LinkCard } from '../LinkCard';
+import { MarkdownCard } from '../MarkdownCard';
 import { OptionsCard } from '../OptionsCard';
 
 export type CardComponent = {
@@ -25,6 +26,7 @@ export function ContentCards() {
     image: ImageCard,
     externalLink: (props) => <LinkCard {...props} isExternal={true} />,
     internalLink: (props) => <LinkCard {...props} isExternal={false} />,
+    markdown: MarkdownCard
   };
 
   useEffect(() => {

src/components/Heading/Heading.tsx

@@ -3,13 +3,21 @@ import { createElement } from 'preact';
 export type HeadingProps = {
   children: string;
   type: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  textClass?: string;
+  size?: string;
 };
 
-export function Heading({ type, children }: HeadingProps) {
+export function Heading({
+  type,
+  children,
+  size = 'sm-text-lg',
+  textClass: textClass = 'sm-text-neutral-700',
+}: HeadingProps) {
+  // TODO jcn add text sizing styling for different headings
   return createElement(
     type,
     {
-      className: 'sm-text-2xl sm-font-rubik sm-font-medium sm-m-0 sm-text-neutral-700',
+      className: `${size} sm-font-rubik sm-font-medium sm-m-0 ${textClass}`,
     },
     children,
   );

src/components/LinkCard/LinkCard.tsx

@@ -34,7 +34,9 @@ export function LinkCard({ content, isExternal, style }: LinkCardProps) {
         className="sm-flex sm-flex-col sm-gap-y-3 sm-items-start sm-h-full sm-max-h-contentCard sm-overflow-y-auto"
       >
         {data.imageUrl && <img src={data.imageUrl} alt={data.title} />}
-        <Heading type="h2">{data.title}</Heading>
+        <Heading type="h2" size="sm-text-2xl">
+          {data.title}
+        </Heading>
         {data.description && <Text>{data.description}</Text>}
         <div className="sm-bg-white sm-sticky sm-bottom-0 sm-w-full sm-pt-5 sm-border-solid sm-border-0 sm-border-t-2 sm-border-gray-50">
           <a className="sm-text-white sm-no-underline" href={data.url} {...conditionalAttributes}>

src/components/MarkdownCard/MarkdownCard.stories.tsx

@@ -0,0 +1,57 @@
+import { MarkdownCard, MarkdownCardProps } from '.';
+
+const content = {
+  id: 'id',
+  type: 'markdown',
+  data: {
+    text: `# H1
+## H2
+### H3
+#### H4
+##### H5
+###### H6
+
+1. Most interesting
+   1. Sublist 1
+   2. Sublist 2
+2. Less interesting
+   1. Sublist 1
+   2. Sublist 2
+3. Least Interesting
+
+**bold**
+- item 1
+- item 2
+
+[External Link](https://www.google.com)
+
+[Internal Link](http://localhost:3000)
+
+*emphasis*
+
+---
+Horizontal Rule
+
+---
+
+#### Image Example
+
+![Image Alt Text](https://assets.gocomics.com/uploads/collection_images/collection_image_large_1628638_dilbert-inventions-content-admin-2048x1280_201809101600.jpg)
+`,
+  },
+};
+
+export default {
+  title: `Components / MarkdownCard`,
+  component: MarkdownCard,
+  argTypes: {
+    content: { control: 'object', defaultValue: content },
+  },
+  parameters: {
+    docs: {
+      page: <MarkdownCard content={content} />,
+    },
+  },
+};
+
+export const Basic = ({ content }: MarkdownCardProps) => <MarkdownCard content={content} />;

src/components/MarkdownCard/MarkdownCard.test.tsx

@@ -0,0 +1,111 @@
+import { MarkdownCard } from '.';
+import { getByRole, render } from '@testing-library/preact';
+import { ContentCard } from '@soulmachines/smwebsdk';
+
+describe('<MarkdownCard />', () => {
+  function markdownData(markdown: string): ContentCard {
+    return {
+      id: 'mockId',
+      type: 'markdown',
+      data: {
+        text: markdown,
+      },
+    };
+  }
+
+  const mockCard: ContentCard = {
+    id: 'mockId',
+    type: 'markdown',
+    data: {
+      text: '## An Interesting List\r\n 1. Most interesting\r\n 2. Less interesting\r\n 3. Least Interesting\r\n\r\n**bold**\r\n- item 1\r\n- item 2\r\n\r\n[test link](https://google.com)',
+    },
+  };
+
+  it('renders data-sm-content with the card id', () => {
+    const { container } = render(<MarkdownCard content={mockCard} />);
+    expect(container.querySelector('[data-sm-content="mockId"]')).toBeInTheDocument();
+  });
+
+  it('renders headings 1 to 6 individually', () => {
+    for (let hlevel = 1; hlevel < 7; hlevel++) {
+      console.log(hlevel);
+      const { container } = render(
+        <MarkdownCard content={markdownData('#'.repeat(hlevel) + ' Heading')} />,
+      );
+
+      expect(container.querySelector('h' + hlevel)).toBeInTheDocument();
+    }
+  });
+
+  it('renders unordered list', () => {
+    const markdown = `- item 1
+- item 2
+- item 3
+`;
+    const { container } = render(<MarkdownCard content={markdownData(markdown)} />);
+    expect(container.querySelector('ul')).toBeInTheDocument();
+    expect(container.querySelector('li')).toBeInTheDocument();
+    expect(container.querySelectorAll('li').length).toBe(3);
+  });
+
+  it('renders ordered list', () => {
+    const markdown = `1. item 1
+2. item 2
+3. item 3
+`;
+    const { container } = render(<MarkdownCard content={markdownData(markdown)} />);
+    expect(container.querySelector('ol')).toBeInTheDocument();
+    expect(container.querySelector('li')).toBeInTheDocument();
+    expect(container.querySelectorAll('li').length).toBe(3);
+  });
+
+  it('renders bold', () => {
+    const markdown = `**bold text**
+`;
+    const { container } = render(<MarkdownCard content={markdownData(markdown)} />);
+    expect(container.querySelector('strong')).toBeInTheDocument();
+    expect(container.querySelectorAll('strong').length).toBe(1);
+  });
+
+  it('renders emphasis', () => {
+    const markdown = `*emphasized text*
+`;
+    const { container } = render(<MarkdownCard content={markdownData(markdown)} />);
+    expect(container.querySelector('em')).toBeInTheDocument();
+    expect(container.querySelectorAll('em').length).toBe(1);
+  });
+
+  it('renders external link', () => {
+    Object.defineProperty(window, 'location', { value: { hostname: 'mycurrentwebpage.com' } });
+
+    const markdown = `[external link](https://www.google.com)
+`;
+    const { getByRole } = render(<MarkdownCard content={markdownData(markdown)} />);
+    const element = getByRole('link', { name: 'external link' });
+    expect(getByRole('link', { name: 'external link' })).toHaveAttribute(
+      'href',
+      'https://www.google.com',
+    );
+    expect(getByRole('link', { name: 'external link' })).toHaveAttribute('target', '_blank');
+  });
+
+  it('renders internal link', () => {
+    Object.defineProperty(window, 'location', { value: { hostname: 'mycurrentwebpage.com' } });
+
+    const markdown = `[internal link](http://mycurrentwebpage.com/moreinfo);
+`;
+    const { getByRole } = render(<MarkdownCard content={markdownData(markdown)} />);
+    expect(getByRole('link', { name: 'internal link' })).toHaveAttribute(
+      'href',
+      'http://mycurrentwebpage.com/moreinfo',
+    );
+    expect(getByRole('link', { name: 'internal link' })).not.toHaveAttribute('target');
+  });
+
+  it('renders nothing if nothing received', () => {
+    const markdown = '';
+
+    const { container } = render(<MarkdownCard content={markdownData(markdown)} />);
+    expect(container).toBeEmptyDOMElement();
+  });
+});

src/components/MarkdownCard/MarkdownCard.tsx

@@ -0,0 +1,151 @@
+import { ContentCard } from '@soulmachines/smwebsdk';
+import { Card } from '../Card';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { Heading, HeadingProps } from '../Heading';
+import { Text, TextProps } from '../Text';
+
+export type MarkdownCardProps = {
+  content: ContentCard;
+  //  Styles are passed through from react spring
+  style?: Record<string, 'string | CSSProperties | undefined'>;
+};
+
+export type LiProps = {
+  children: string;
+  ordered: boolean;
+  index: number;
+  checked: boolean | null;
+  className: string | null;
+};
+
+export type AProps = {
+  href: string;
+  children: string;
+  title: string;
+  target?: string;
+};
+
+export type OlProps = {
+  children: string;
+};
+
+export type MarkdownData = {
+  text: string;
+};
+
+export function MarkdownCard({ content, style }: MarkdownCardProps) {
+  const data = content.data as unknown as MarkdownData;
+  if (!data.text) {
+    return null;
+  }
+  const markdown = data.text;
+
+  return (
+    <Card style={style}>
+      <div
+        data-sm-content={content.id}
+        className="sm-sans sm-flex sm-flex-col sm-gap-y-3 sm-items-start sm-h-full sm-max-h-contentCard sm-overflow-y-auto sm-text-neutral-700 sm-font-sans sm-font-normal"
+      >
+        {/*
+        Fixes a typescript issue "JSX element type 'ReactMarkdown' does not have any construct or call signatures".
+        @ts-ignore */}
+        <ReactMarkdown
+          remarkPlugins={[remarkGfm]}
+          components={{
+            h1: ({
+              type = 'h1',
+              children,
+              size = 'sm-text-2xl',
+              textClass: text_class = 'sm-text-blue-800',
+            }: HeadingProps) => (
+              <Heading type={type} children={children} size={size} textClass={text_class} />
+            ),
+            h2: ({
+              type = 'h2',
+              children,
+              size = 'sm-text-2xl',
+              textClass: text_class = 'sm-text-blue-700',
+            }: HeadingProps) => (
+              <Heading type={type} children={children} size={size} textClass={text_class} />
+            ),
+            h3: ({
+              type = 'h3',
+              children,
+              size = 'sm-text-xl',
+              textClass: text_class = 'sm-text-blue-600',
+            }: HeadingProps) => (
+              <Heading type={type} children={children} size={size} textClass={text_class} />
+            ),
+            h4: ({
+              type = 'h4',
+              children,
+              size = 'sm-text-xl',
+              textClass: text_class = 'sm-text-blue-500',
+            }: HeadingProps) => (
+              <Heading type={type} children={children} size={size} textClass={text_class} />
+            ),
+            h5: ({
+              type = 'h5',
+              children,
+              size = 'sm-text-lg',
+              textClass: text_class = 'sm-text-blue-400',
+            }: HeadingProps) => (
+              <Heading type={type} children={children} size={size} textClass={text_class} />
+            ),
+            h6: ({
+              type = 'h6',
+              children,
+              size = 'sm-text-lg',
+              textClass: text_class = 'sm-text-blue-300',
+            }: HeadingProps) => (
+              <Heading type={type} children={children} size={size} textClass={text_class} />
+            ),
+            li: ({ children, ordered, index, checked, className }: LiProps) => {
+              if (ordered) {
+                return (
+                  <li>
+                    {index + 1}. {children}
+                  </li>
+                );
+              } else if (className === 'task-list-item') {
+                return <li>{children}</li>;
+              }
+              return <li>- {children}</li>;
+            },
+            ol: ({ children }: OlProps) => {
+              return <ol className="sm-ml-4">{children}</ol>;
+            },
+            ul: ({ children }: OlProps) => {
+              return <ul className="sm-ml-4">{children}</ul>;
+            },
+            a: ({ href, children, title, target }: AProps) => {
+              if (!target) {
+                const currentDomain = window.location.hostname;
+                const destinationDomain = new URL(href).hostname;
+                if (!(currentDomain === destinationDomain)) target = '_blank';
+              }
+
+              return (
+                <a
+                  className="sm-text-blue-400 active:sm-text-red-500 hover:sm-underline focus:underline visited:sm-text-pink-500"
+                  href={href}
+                  title={title}
+                  target={target}
+                >
+                  {children}
+                </a>
+              );
+            },
+            p: ({ children }: TextProps) => {
+              return <Text children={children} size="sm" />;
+            },
+            hr: () => <hr className="sm-w-11/12 sm-bg-gray-400" />,
+          }}
+        >
+          {markdown}
+        </ReactMarkdown>
+      </div>
+    </Card>
+  );
+}