wip

walnuthq · Mar 5, 2024 · 699b10f · 699b10f
1 parent 716fd64
commit 699b10f
Show file tree

Hide file tree

Showing 10 changed files with 231 additions and 76 deletions.
diff --git a/components/LibFuncTable/DocRowDetail.tsx b/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,
+  Value,
+} 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,
+  Cell: (props: Doc.CellProps) => <Doc.TD align="center" {...props} />,
+  LeftCell: (props: Doc.CellProps) => <Doc.TD align="left" {...props} />,
+  Line: Doc.TR,
+  Value,
 }
 
 const DocRowDetail = ({ mdxContent }: { mdxContent: any }) => {

diff --git a/components/LibFuncTable/index.tsx b/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">

diff --git a/components/ui/Doc.tsx b/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',
         {

diff --git a/components/ui/MdxComponents/MemoryTable.tsx b/components/ui/MdxComponents/MemoryTable.tsx
@@ -0,0 +1,24 @@
+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></Doc.TH>
+          <Doc.TH>Value</Doc.TH>
+        </tr>
+      </thead>
+      <tbody>{children}</tbody>
+    </table>
+  )
+}
diff --git a/components/ui/MdxComponents/RefsTable.tsx b/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>
+  )
+}
diff --git a/components/ui/MdxComponents/TableLayout.tsx b/components/ui/MdxComponents/TableLayout.tsx
@@ -0,0 +1,9 @@
+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">{children}</div>
+}
diff --git a/components/ui/MdxComponents/Value.tsx b/components/ui/MdxComponents/Value.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+
+type Props = {
+  children: string
+}
+
+export const Value: React.FC<Props> = ({ children }: Props) => {
+  return (
+    <>
+      <span>*</span>
+      {children}
+    </>
+  )
+}
diff --git a/components/ui/MdxComponents/index.tsx b/components/ui/MdxComponents/index.tsx
@@ -0,0 +1,4 @@
+export { MemoryTable } from './MemoryTable'
+export { RefsTable } from './RefsTable'
+export { TableLayout } from './TableLayout'
+export { Value } from './Value'
diff --git a/docs/libfuncs/array_get.mdx b/docs/libfuncs/array_get.mdx
@@ -7,7 +7,7 @@ statementBranch: 'rangeCheck'
 
 # Description
 
-Gets an array element at a given index, handling out-of-range scenarios with a Statement branch.
+Gets an array element at a given index (_fallthrough_ branch) or handles out-of-range scenarios with a _Statement_ branch.
 
 # Syntax
 
@@ -20,91 +20,137 @@ array_get<T>([rangeCheck]: RangeCheck, [array]: Array<T>, [index]: usize) {
 
 # Invoke Refs
 
-|      Name      | Description                      |     Type     |
-| :------------: | :------------------------------- | :----------: |
-| `[rangeCheck]` | Internal RangeCheck              | `RangeCheck` |
-|   `[array]`    | The array to read                |  `Array<T>`  |
-|   `[index]`    | The index of the element to read |   `usize`    |
+- `[rangeCheck]`: internal RangCheck (`RangeCheck`).
+- `[array]`: the array to read (`Array<T>`).
+- `[index]`: the index of the element to read (`usize`).
 
 # Output Refs
 
 ## Fallthrough Branch
 
-|      Name      | Description                              |     Type     |
-| :------------: | :--------------------------------------- | :----------: |
-| `[rangeCheck]` | The updated RangeCheck                   | `RangeCheck` |
-|  `[element]`   | A pointer to an element at a given index |   `Box<T>`   |
+- `[rangeCheck]`: the updated RangeCheck (`RangeCheck`).
+- `[element]`: a pointer to an element at a given index (`Box<T>`).
 
 ## Target Statement Branch
 
-|      Name      | Description            |     Type     |
-| :------------: | :--------------------- | :----------: |
-| `[rangeCheck]` | The updated RangeCheck | `RangeCheck` |
+- `[rangeCheck]`: the updated RangeCheck (`RangeCheck`).
 
 # Examples
 
 ## Example 1 - Fallthrough branch
 
-Reading the element at index 1 from an array of 4 elements.
-
-`array_get<u32>([rangeCheck], [array], [index]) { fallthrough([rangeCheck], [element]) 59([rangeCheck]) }`
-
-### Memory
-
-|       | Value |
-| :---: | :---: |
-| `140` |   2   |
-| `141` |   0   |
-| `145` |   4   |
-| `146` |   3   |
-| `147` |   2   |
-| `148` |   1   |
-
-### Invoke refs
-
-|     Name     |  Value   |
-| :----------: | :------: |
-| `rangeCheck` |   140    |
-|   `array`    | 145, 149 |
-|   `index`    |    1     |
-
-### Fallthrough Branch Output Refs
-
-|     Name     | Value |
-| :----------: | :---: |
-| `rangeCheck` |  141  |
-|  `element`   |  146  |
-
-## Example 2 -Statement branch
+Reading the element at index 1 from an array of 4 elements (`u32`).
 
 ```
-array_get<u32>([rangeCheck], [array], [index]) {
-    fallthrough([rangeCheck], [element])
-    59([rangeCheck])
+array_get<u32>([140], [141], [142]) {
+    fallthrough([144], [146])
+    59([144])
 }
 ```
 
-### Memory
+<TableLayout>
+  <MemoryTable>
+    <Line>
+      <Cell>145</Cell>
+      <Cell>1</Cell>
+    </Line>
+    <Line>
+      <Cell>149</Cell>
+      <Cell>4</Cell>
+    </Line>
+  </MemoryTable>
+
+<RefsTable title="Invoke Refs">
+  <Line>
+    <Cell>`rangeCheck`</Cell>
+    <Cell>[140]</Cell>
+    <Cell>
+      <Value>2</Value>
+    </Cell>
+  </Line>
+  <Line>
+    <Cell>`array`</Cell>
+    <Cell>[141]</Cell>
+    <Cell>145, 149</Cell>
+  </Line>
+  <Line>
+    <Cell>`index`</Cell>
+    <Cell>[142]</Cell>
+    <Cell>
+      <Value>1</Value>
+    </Cell>
+  </Line>
+</RefsTable>
+
+  <RefsTable title="Fallthrough Branch Output Refs">
+    <Line>
+      <Cell>`rangeCheck`</Cell>
+      <Cell>[144]</Cell>
+      <Cell>
+        <Value>3</Value>
+      </Cell>
+    </Line>
+    <Line>
+      <Cell>`element`</Cell>
+      <Cell>[146]</Cell>
+      <Cell>145</Cell>
+    </Line>
+  </RefsTable>
+</TableLayout>
 
-|       | Value |
-| :---: | :---: |
-| `140` |   2   |
-| `141` |   0   |
-| `145` |   4   |
-| `146` |   3   |
-| `147` |   2   |
-| `148` |   1   |
-
-### Invoke refs
+## Example 2 -Statement branch
 
-|     Name     |  Value   |
-| :----------: | :------: |
-| `rangeCheck` |   140    |
-|   `array`    | 145, 149 |
-|   `index`    |    4     |
+Reading the element at index 4 from an array of 4 elements (`u32`), leads to a jump to
+the statement branch 59 because of an out-of-range error.
 
-### Target Statement Branch Output Refs
+```
+array_get<u32>([140], [141], [142]) {
+    fallthrough([144], [150])
+    59([144])
+}
+```
 
-|     Name     | Value |
-| :----------: | :---: |
-| `rangeCheck` |  141  |
+<TableLayout>
+  <MemoryTable>
+    <Line>
+      <Cell>145</Cell>
+      <Cell>1</Cell>
+    </Line>
+    <Line>
+      <Cell>149</Cell>
+      <Cell>4</Cell>
+    </Line>
+  </MemoryTable>
+
+  <RefsTable title="Invoke Refs">
+    <Line>
+      <Cell>`rangeCheck`</Cell>
+      <Cell>[140]</Cell>
+      <Cell>
+        <Value>2</Value>
+      </Cell>
+    </Line>
+    <Line>
+      <Cell>`array`</Cell>
+      <Cell>[141]</Cell>
+      <Cell>145, 149</Cell>
+    </Line>
+    <Line>
+      <Cell>`index`</Cell>
+      <Cell>[142]</Cell>
+      <Cell>
+        <Value>4</Value>
+      </Cell>
+    </Line>
+  </RefsTable>
+
+  <RefsTable title="Fallthrough Branch Output Refs">
+    <Line>
+      <Cell>`rangeCheck`</Cell>
+      <Cell>[144]</Cell>
+      <Cell>
+        <Value>3</Value>
+      </Cell>
+    </Line>
+  </RefsTable>
+</TableLayout>