better docs + snaps

__tests__/browser/markdown.test.js

@@ -20,8 +20,7 @@ describe('visual regression tests', () => {
       'images',
       // 'lists',
       'mdxComponents',
-      // 'tables',
-      // 'tablesTests',
+      'tables',
       'codeBlockTests',
       // 'tableOfContentsTests',
       'varsTest',

components/Table/index.tsx

@@ -1,48 +1,16 @@
 import React from 'react';
 
 interface Props extends JSX.IntrinsicAttributes {
-  align?: ('left' | 'center' | 'right')[];
   children: [React.ReactElement<HTMLTableCaptionElement | HTMLTableSectionElement | HTMLTableRowElement>];
-  rows?: any[][];
 }
 
-interface TableContentProps {
-  align?: Props['align'];
-  rows: Props['rows'];
-}
-
-const TableContent = ({ rows, align = [] }: TableContentProps) => {
-  const [head, ...body] = rows;
-
-  return (
-    <>
-      <thead>
-        <tr>
-          {head.map((cell, index) => (
-            <th style={{ textAlign: align[index] || 'center' }}>{cell}</th>
-          ))}
-        </tr>
-      </thead>
-      <tbody>
-        {body.map(row => (
-          <tr>
-            {row.map((cell, index) => (
-              <td style={{ textAlign: align[index] || 'center' }}>{cell}</td>
-            ))}
-          </tr>
-        ))}
-      </tbody>
-    </>
-  );
-};
-
 const Table = (props: Props) => {
-  const { children, rows, align } = props;
+  const { children } = props;
 
   return (
     <div className="rdmd-table">
       <div className="rdmd-table-inner">
-        <table>{rows ? <TableContent align={align} rows={rows} /> : children}</table>
+        <table>{children}</table>
       </div>
     </div>
   );

docs/mdx-components.mdx

@@ -1,6 +1,6 @@
 ## Tables
 
-If you have some tabular data, it may be easier to write it with mdx:
+You can use our `Table` component to match the ReadMe theming.
 
 ```jsx MDX
 export const table = [
@@ -10,7 +10,24 @@ export const table = [
   ['L2', '_italic_', '$1'],
 ];
 
-<Table align={['left', 'center', 'right']} rows={table} />;
+<Table>
+  <thead>
+    <tr>
+      {table[0].map((cell, index) => (
+        <th style={{ textAlign: table[0][index].toLowerCase() }}>{cell}</th>
+      ))}
+    </tr>
+  </thead>
+  <tbody>
+    {table.slice(1).map(row => (
+      <tr>
+        {table[0].map((cell, index) => (
+          <td style={{ textAlign: table[0][index].toLowerCase() }}>{cell}</td>
+        ))}
+      </tr>
+    ))}
+  </tbody>
+</Table>;
 ```
 
 export const table = [
@@ -20,4 +37,21 @@ export const table = [
   ['L2', '_italic_', '$1'],
 ];
 
-<Table align={['left', 'center', 'right']} rows={table} />
+<Table>
+  <thead>
+    <tr>
+      {table[0].map((cell, index) => (
+        <th style={{ textAlign: table[0][index].toLowerCase() }}>{cell}</th>
+      ))}
+    </tr>
+  </thead>
+  <tbody>
+    {table.slice(1).map(row => (
+      <tr>
+        {row.map((cell, index) => (
+          <td style={{ textAlign: table[0][index].toLowerCase() }}>{cell}</td>
+        ))}
+      </tr>
+    ))}
+  </tbody>
+</Table>

docs/tables.md

@@ -12,10 +12,6 @@ hidden: false
     | L1   |  `code`  |   $12 |
     | L2   | _italic_ |    $1 |
 
-> ❗️ Table cells may contain inline decorations only.
->
-> Lists, headings, and other block-level Markdown components are not valid and will cause errors.
-
 ### Examples
 
 This example also shows off custom theming!
@@ -64,21 +60,25 @@ Tables have been simplified to mirror a more standard implementation. We've also
 }
 ```
 
-<style>
-  .markdown-body .rdmd-table {
-    --table-text: black;
-    --table-head: #5b1c9f;
-    --table-head-text: white;
-    --table-stripe: #f0eaf7;
-    --table-edges: rgba(34, 5, 64, .5);
-    --table-row: white;
-  }
+export const stylesheet = `
+.markdown-body .rdmd-table {
+--table-text: black;
+--table-head: #5b1c9f;
+--table-head-text: white;
+--table-stripe: #f0eaf7;
+--table-edges: rgba(34, 5, 64, .5);
+--table-row: white;
+}
 
-  #rdmd-demo .markdown-body .rdmd-table thead tr {
-    box-shadow: none;
-  }
+#rdmd-demo .markdown-body .rdmd-table thead tr {
+box-shadow: none;
+}
+
+#rdmd-demo .markdown-body .rdmd-table thead tr th:last-child {
+box-shadow: none;
+}
+`;
 
-  #rdmd-demo .markdown-body .rdmd-table thead tr th:last-child {
-    box-shadow: none;
-  }
+<style>
+  {stylesheet}
 </style>

example/docs.ts

@@ -25,8 +25,6 @@ import sanitizingTests from '../docs/sanitizing-tests.md';
 // @ts-ignore
 import tableOfContentsTests from '../docs/table-of-contents-tests.md';
 // @ts-ignore
-import tablesTests from '../docs/tables-tests.md';
-// @ts-ignore
 import tables from '../docs/tables.md';
 // @ts-ignore
 import varsTest from '../docs/variable-tests.md';
@@ -49,7 +47,6 @@ const fixtures = Object.entries({
   sanitizingTests,
   tableOfContentsTests,
   tables,
-  tablesTests,
   varsTest,
 }).reduce((memo, [sym, doc]) => {
   const name = lowerCase(sym);

index.tsx

@@ -48,6 +48,7 @@ const makeUseMDXComponents = (more: RunOpts['components']) => {
     Variable,
     'code-tabs': Components.CodeTabs,
     img: Components.Image,
+    table: Components.Table,
   };
 
   return () => components;

types.d.ts

@@ -1,4 +1,4 @@
-import { Code, Data, Literal, Parent } from 'mdast';
+import { Code, Data, Literal, Table, Parent } from 'mdast';
 import { NodeTypes } from './enums';
 
 interface CodeTabs extends Parent {