feat: add a new libfuncs page

This new libfuncs page shows a table of Sierra libfuncs from markdown files
stored in `docs/libfuncs`.

components/LibFuncTable/DocRowDetail.tsx

@@ -0,0 +1,51 @@
+import cn from 'classnames'
+import { MDXRemote } from 'next-mdx-remote'
+
+import { GITHUB_REPO_URL } from 'util/constants'
+
+import { Button } from 'components/ui'
+import * as Doc from 'components/ui/Doc'
+
+const docComponents = {
+  h1: Doc.H1,
+  h2: Doc.H2,
+  h3: Doc.H3,
+  p: Doc.P,
+  ul: Doc.UL,
+  ol: Doc.OL,
+  li: Doc.LI,
+  table: Doc.Table,
+  th: Doc.TH,
+  td: Doc.TD,
+  a: Doc.A,
+  pre: Doc.Pre,
+}
+
+const DocRowDetail = ({ mdxContent }: { mdxContent: any }) => {
+  return (
+    <div
+      className={cn('text-sm px-4 md:px-8 py-8 ', {
+        'bg-indigo-50 dark:bg-black-600': mdxContent,
+        'bg-orange-50 dark:bg-gray-800': !mdxContent,
+      })}
+    >
+      <div>
+        {mdxContent ? (
+          <MDXRemote {...mdxContent} components={docComponents} />
+        ) : (
+          <div className="flex flex-row justify-between items-center">
+            <div>
+              This function is not yet documented. Feel free to help us
+              documenting it !
+            </div>
+            <Button size="xs" external href={GITHUB_REPO_URL}>
+              Contribute on GitHub
+            </Button>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default DocRowDetail

components/Reference/Filters.tsx → components/LibFuncTable/Filters.tsx

@@ -10,10 +10,9 @@ const debounceTimeout = 100 // ms
 
 type Props = {
   onSetFilter: (columnId: string, value: string) => void
-  isPrecompiled?: boolean
 }
 
-const Filters = ({ onSetFilter, isPrecompiled = false }: Props) => {
+const Filters = ({ onSetFilter }: Props) => {
   const router = useRouter()
   const [searchKeyword, setSearchKeyword] = useState('')
   const [searchFilter, setSearchFilter] = useState({
@@ -23,14 +22,10 @@ const Filters = ({ onSetFilter, isPrecompiled = false }: Props) => {
 
   const filterByOptions = useMemo(
     () => [
-      {
-        label: !isPrecompiled ? 'Opcode' : 'Address',
-        value: 'opcodeOrAddress',
-      },
       { label: 'Name', value: 'name' },
-      { label: 'Description', value: 'description' },
+      { label: 'Description', value: 'shortDescription' },
     ],
-    [isPrecompiled],
+    [],
   )
 
   const inputRef = useRef<HTMLInputElement>(null)
@@ -47,13 +42,6 @@ const Filters = ({ onSetFilter, isPrecompiled = false }: Props) => {
     setSearchFilter(option)
   }
 
-  const handleAltK = (event: KeyboardEvent) => {
-    if (event.altKey && event.key.toLowerCase() === 'k') {
-      inputRef.current?.focus()
-      inputRef.current?.value && inputRef.current.select()
-    }
-  }
-
   // Change filter and search opcode according to query param
   useEffect(() => {
     const query = router.query
@@ -66,10 +54,6 @@ const Filters = ({ onSetFilter, isPrecompiled = false }: Props) => {
       router.push(router)
     }
 
-    // Register and clean up Alt+K event listener
-    window.addEventListener('keydown', handleAltK)
-    return () => window.removeEventListener('keydown', handleAltK)
-
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [router.isReady])
 
@@ -93,7 +77,6 @@ const Filters = ({ onSetFilter, isPrecompiled = false }: Props) => {
 
       <Input
         ref={inputRef}
-        searchable
         value={searchKeyword}
         onChange={(e) => {
           setSearchKeyword(e.target.value)

components/LibFuncTable/columns.tsx

@@ -0,0 +1,70 @@
+import { Row } from 'react-table'
+
+import { StackBox } from 'components/ui'
+
+type TableRow = Row<Record<string, string | undefined>>
+
+const filter = (rows: TableRow[], id: string, filterValue: string) => {
+  return rows.filter((row) =>
+    row.original[id]
+      ?.toLocaleLowerCase()
+      .includes(filterValue.toLocaleLowerCase()),
+  )
+}
+
+const filterDescription = (
+  rows: TableRow[],
+  id: string,
+  filterValue: string,
+) => {
+  return rows.filter((row) =>
+    (row.original[id] || '-')
+      ?.toLocaleLowerCase()
+      .includes(filterValue.toLocaleLowerCase()),
+  )
+}
+
+const refsRenderer = ({ value }: { value: string }) =>
+  value ? (
+    <StackBox
+      value={value}
+      className="text-xs border-indigo-300 dark:border-indigo-900 text-gray-800 dark:text-gray-200"
+    />
+  ) : (
+    '-'
+  )
+
+const columns = [
+  {
+    id: 'name',
+    Header: 'Name',
+    accessor: 'name',
+    filter,
+  },
+  {
+    id: 'invokeRefs',
+    Header: 'Invoke Refs',
+    accessor: 'invokeRefs',
+    Cell: refsRenderer,
+  },
+  {
+    id: 'resultRefs',
+    Header: 'Result Refs',
+    accessor: 'resultRefs',
+    Cell: refsRenderer,
+  },
+  {
+    id: 'outputRefs',
+    Header: 'Output Refs',
+    accessor: 'outputRefs',
+    Cell: refsRenderer,
+  },
+  {
+    id: 'shortDescription',
+    Header: 'Short Description',
+    accessor: (row: any) => (row.shortDescription ? row.shortDescription : '-'),
+    filterDescription,
+  },
+]
+
+export default columns