[react] feat: Added docs for components/Table

packages/react/components/Table/index.mjs

@@ -1,9 +1,32 @@
 import React from 'react'
 
-/*
+/**
+ * A component set CSS classes to make your tables look better
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {JSX.Element} props.children - The table children, same as for a table HTML tag
+ * @returns {JSX.Element}
+ */
+export const Table = ({ children }) => (
+  <TableWrapper>
+    <table className="tw:table tw:table-auto">{children}</table>
+  </TableWrapper>
+)
+
+/**
+ * A component to help embed tables into a page
+ *
  * Tables on mobile will almost always break the layout
- * unless we set the overflow behaviour explicitly
+ * unless we set the overflow behaviour explicitly.
+ * This component takes care of that.
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {object} [props.js = undefined] - An optional Javascript Object to highlight
+ * @param {JSX.Element} props.children - The component children, will be rendered if props.js is not set
+ * @returns {JSX.Element}
  */
 export const TableWrapper = ({ children }) => (
-  <div className="max-w-full overflow-x-auto">{children}</div>
+  <div className="tw:max-w-full tw:overflow-x-auto">{children}</div>
 )

packages/react/mkdocs.sh

@@ -37,3 +37,4 @@ jsdoc -c jsdoc.json components/SignUp/* > ../../sites/dev/prebuild/jsdoc/react/c
 jsdoc -c jsdoc.json components/Spinner/* > ../../sites/dev/prebuild/jsdoc/react/components/spinner.json
 jsdoc -c jsdoc.json components/Stats/* > ../../sites/dev/prebuild/jsdoc/react/components/stats.json
 jsdoc -c jsdoc.json components/Tab/* > ../../sites/dev/prebuild/jsdoc/react/components/tab.json
+jsdoc -c jsdoc.json components/Table/* > ../../sites/dev/prebuild/jsdoc/react/components/table.json

sites/dev/docs/reference/packages/react/components/table/_examples.js

@@ -0,0 +1,32 @@
+import React from 'react'
+import { Table, TableWrapper } from '@freesewing/react/components/Table'
+
+export const TableExample = () => (
+  <Table>
+    <thead>
+      <tr>
+        <th>Color</th>
+        <th>Shape</th>
+        <th>Size</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Orange</td>
+        <td>Round</td>
+        <td>Small</td>
+      </tr>
+      <tr>
+        <td>Pink</td>
+        <td>Square</td>
+        <td>Tiny</td>
+      </tr>
+      <tr>
+        <td>Purple</td>
+        <td>Round</td>
+        <td>Large</td>
+      </tr>
+    </tbody>
+  </Table>
+)
+export const TableWrapperExample = () => <TableWrapper><TableExample /></TableWrapper>

sites/dev/docs/reference/packages/react/components/table/readme.mdx

@@ -2,6 +2,28 @@
 title: Table
 ---
 
-:::note
-This page is yet to be created
-:::
+import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus'
+import { ComponentDocs } from '@site/src/components/component-docs.js'
+import * as jsdoc from '@site/prebuild/jsdoc/components.table.mjs'
+import { TableExample, TableWrapperExample } from './_examples.js'
+
+<DocusaurusDoc>
+
+- [Components](#components)
+
+## Components
+
+The **Table** component family provides the following components:
+
+- [Table](#table)
+- [TableWrapper](#tablewrapper)
+
+### Table
+
+<ComponentDocs docs={jsdoc.jsdocTable} example={TableExample} />
+
+### TableWrapper
+
+<ComponentDocs docs={jsdoc.jsdocTableWrapper} example={TableWrapperExample} />
+
+</DocusaurusDoc>