UX improvements after PR review

components/LibFuncTable/DocRowDetail.tsx

@@ -6,6 +6,12 @@ import { GITHUB_REPO_URL } from 'util/constants'
 
 import { Button } from 'components/ui'
 import * as Doc from 'components/ui/Doc'
+import {
+  MemoryTable,
+  TableLayout,
+  RefsTable,
+  PlaygroundLink,
+} from 'components/ui/MdxComponents'
 
 const options = {
   mdxOptions: {
@@ -28,6 +34,13 @@ const mdxComponents = {
   td: Doc.TD,
   a: Doc.A,
   pre: Doc.Pre,
+  MemoryTable,
+  TableLayout,
+  RefsTable,
+  PlaygroundLink,
+  Cell: (props: Doc.CellProps) => <Doc.TD align="center" {...props} />,
+  LeftCell: (props: Doc.CellProps) => <Doc.TD align="left" {...props} />,
+  Line: Doc.TR,
 }
 
 const DocRowDetail = ({ mdxContent }: { mdxContent: any }) => {

components/LibFuncTable/index.tsx

@@ -20,7 +20,7 @@ import {
 } from 'react-table'
 import { ILibFuncDocs, ILibFuncDoc } from 'types'
 
-import { Button } from 'components/ui'
+import { H2, Button } from 'components/ui'
 
 import columnDefinition from './columns'
 import DocRowDetail from './DocRowDetail'
@@ -271,7 +271,10 @@ const LibFuncTable = ({ docs }: { docs: ILibFuncDocs }) => {
 
   return (
     <>
-      <div className="flex flex-row items-center justify-end mb-4 md:mb-10">
+      <div className="flex flex-row items-center justify-between mb-4 md:mb-10">
+        <H2 className="pb-8 md:pb-0 inline-flex items-center">
+          <span>Sierra LibFuncs</span>
+        </H2>
         <Filters onSetFilter={setFilter} />
       </div>
       <table {...getTableProps()} className="w-full table-fixed">

components/ui/Doc.tsx

@@ -7,14 +7,15 @@ import Link from 'next/link'
 const EMPTY_MARK = '*'
 
 type Props = {
-  children: string | JSX.Element
+  children?: string | JSX.Element | JSX.Element[]
 }
 
 type LinkProps = {
   href?: string
 } & Props
 
-type TdProps = {
+export type CellProps = {
+  colSpan?: number
   align?: 'left' | 'center' | 'right' | 'justify' | 'char' | undefined
 } & Props
 
@@ -54,9 +55,11 @@ export const THead: React.FC<Props> = ({ children }) => (
   <thead className="uppercase">{children}</thead>
 )
 
-export const TH: React.FC<Props> = ({ children }) => {
+export const TH: React.FC<CellProps> = ({ colSpan, align, children }) => {
   return (
     <th
+      align={align}
+      colSpan={colSpan}
       className={cn(
         'py-1 px-2 border-indigo-200 dark:border-black-400 text-gray-800 dark:text-gray-400 text-tiny font-medium break-all',
         {
@@ -69,10 +72,13 @@ export const TH: React.FC<Props> = ({ children }) => {
   )
 }
 
-export const TD: React.FC<TdProps> = ({ align, children }) => {
+export const TR: React.FC<Props> = ({ children }) => <tr>{children}</tr>
+
+export const TD: React.FC<CellProps> = ({ colSpan, align, children }) => {
   return (
     <td
       align={align}
+      colSpan={colSpan}
       className={cn(
         'py-1 px-2 border-indigo-200 dark:border-black-400 text-tiny font-normal break-all',
         {

components/ui/MdxComponents/MemoryTable.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+
+import * as Doc from 'components/ui/Doc'
+
+type Props = {
+  children: JSX.Element[]
+}
+
+export const MemoryTable: React.FC<Props> = ({ children }: Props) => {
+  return (
+    <table className="table-auto mb-4">
+      <thead>
+        <tr>
+          <Doc.TH colSpan={2}>Memory</Doc.TH>
+        </tr>
+        <tr>
+          <Doc.TH>
+            <code>@</code>
+          </Doc.TH>
+          <Doc.TH>Value</Doc.TH>
+        </tr>
+      </thead>
+      <tbody>{children}</tbody>
+    </table>
+  )
+}

components/ui/MdxComponents/PlaygroundLink.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+type Props = {
+  href: string
+}
+
+export const PlaygroundLink: React.FC<Props> = ({ href }: Props) => (
+  <a
+    href={href}
+    target="_blank"
+    rel="noopener noreferrer"
+    className="text-blue-500 py-2 hover:underline"
+  >
+    Reproduce in playground.
+  </a>
+)

components/ui/MdxComponents/RefsTable.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+
+import * as Doc from 'components/ui/Doc'
+
+type Props = {
+  title: string
+  children: JSX.Element[]
+}
+
+export const RefsTable: React.FC<Props> = ({ title, children }: Props) => {
+  return (
+    <table className="table-auto mb-4">
+      <thead>
+        <tr>
+          <Doc.TH colSpan={3}>{title}</Doc.TH>
+        </tr>
+        <tr>
+          <Doc.TH></Doc.TH>
+          <Doc.TH>Parameter</Doc.TH>
+          <Doc.TH>Value</Doc.TH>
+        </tr>
+      </thead>
+      <tbody>{children}</tbody>
+    </table>
+  )
+}

components/ui/MdxComponents/TableLayout.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+type Props = {
+  children: JSX.Element[]
+}
+
+export const TableLayout: React.FC<Props> = ({ children }: Props) => {
+  return (
+    <div className="flex flex-row space-x-16 items-start py-4">{children}</div>
+  )
+}

components/ui/MdxComponents/index.tsx

@@ -0,0 +1,4 @@
+export { MemoryTable } from './MemoryTable'
+export { RefsTable } from './RefsTable'
+export { TableLayout } from './TableLayout'
+export { PlaygroundLink } from './PlaygroundLink'

docs/libfuncs/array_append.mdx

@@ -1,30 +1,70 @@
 ---
 shortDescription: Appends an element to the end of an array.
-invokeRefs: '[0] | [1]'
-outputRefs: '[2]'
+invokeRefs: 'array | element'
+fallthroughBranch: 'array'
 ---
 
-## Description
+# Description
 
 Appends an element to the end of an array.
 
-## Syntax
+# Syntax
 
-`array_append<T>([0]: Array<T>, [1]: T) -> ([2]: Array<T>)`
+```
+array_append<T>([array]: Array<T>, [element]: T) -> ([array]: Array<T>)
+```
 
-## Invoke Refs
+# Invoke Refs
 
-| Name  | Description           |    Type    |
-| :---: | :-------------------- | :--------: |
-| `[0]` | The array to update   | `Array<T>` |
-| `[1]` | The element to append |    `T`     |
+- `[array]`: the array to update (`Array<T>`).
+- `[element]`: the element to insert (`T`).
 
-## Output Refs
+# Output Refs
 
-| Name  | Description       |    Type    |
-| :---: | :---------------- | :--------: |
-| `[2]` | The updated array | `Array<T>` |
+- `[array]`: the updated array (`Array<T>`).
 
-## Example
+# Examples
 
-`array_append<u8>([1], [2]) -> ([3]);`
+Append the value `42` to the end of an array.
+
+```
+array_append<u8>([1], [2]) -> ([3])
+```
+
+<TableLayout>
+  <MemoryTable>
+    <Line>
+      <Cell>145</Cell>
+      <Cell>1</Cell>
+    </Line>
+    <Line>
+      <Cell>149</Cell>
+      <Cell>4</Cell>
+    </Line>
+    <Line>
+      <Cell>150</Cell>
+      <Cell>42</Cell>
+    </Line>
+  </MemoryTable>
+
+<RefsTable title="Invoke Refs">
+  <Line>
+    <Cell>`array`</Cell>
+    <Cell>[1]</Cell>
+    <Cell>`@145, @149`</Cell>
+  </Line>
+  <Line>
+    <Cell>`element`</Cell>
+    <Cell>[2]</Cell>
+    <Cell>42</Cell>
+  </Line>
+</RefsTable>
+
+  <RefsTable title="Output Refs">
+    <Line>
+      <Cell>`array`</Cell>
+      <Cell>[3]</Cell>
+      <Cell>`@145, @150`</Cell>
+    </Line>
+  </RefsTable>
+</TableLayout>