feat(results): ✨ Brand new Results table

- Resizable columns
- Hide / Show columns
- Reorganize columns
- Expand result

apps/builder/components/results/ResultModal.tsx

@@ -0,0 +1,55 @@
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalCloseButton,
+  ModalBody,
+  Stack,
+  Heading,
+  Text,
+  HStack,
+} from '@chakra-ui/react'
+import { useResults } from 'contexts/ResultsProvider'
+import React from 'react'
+import { isDefined } from 'utils'
+import { HeaderIcon } from './ResultsTable/ResultsTable'
+
+type Props = {
+  resultIdx: number | null
+  onClose: () => void
+}
+
+export const ResultModal = ({ resultIdx, onClose }: Props) => {
+  const { tableData, resultHeader } = useResults()
+  const result = isDefined(resultIdx) ? tableData[resultIdx] : undefined
+
+  const getHeaderValue = (
+    val: string | { plainText: string; element?: JSX.Element | undefined }
+  ) => (typeof val === 'string' ? val : val.element ?? val.plainText)
+
+  return (
+    <Modal isOpen={isDefined(result)} onClose={onClose} size="2xl">
+      <ModalOverlay />
+      <ModalContent>
+        <ModalCloseButton />
+        <ModalBody as={Stack} p="10" spacing="10">
+          {resultHeader.map((header) =>
+            result && result[header.label] ? (
+              <Stack key={header.id} spacing="4">
+                <HStack>
+                  <HeaderIcon header={header} />
+                  <Heading fontSize="md">{header.label}</Heading>
+                </HStack>
+                <Text whiteSpace="pre-wrap" textAlign="justify">
+                  {getHeaderValue(result[header.label])}
+                </Text>
+              </Stack>
+            ) : (
+              <></>
+            )
+          )}
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  )
+}