build: add pnpm

apps/builder/components/results/ResultsTable/Cell.tsx

@@ -1,10 +1,11 @@
 import { chakra, Fade, Button } from '@chakra-ui/react'
-import { Cell as CellProps } from '@tanstack/react-table'
+import { Cell as CellProps, flexRender } from '@tanstack/react-table'
 import { ExpandIcon } from 'assets/icons'
 import { memo } from 'react'
+import { TableData } from 'services/typebots/results'
 
 type Props = {
-  cell: CellProps<any>
+  cell: CellProps<TableData, unknown>
   size: number
   isExpandButtonVisible: boolean
   cellIndex: number
@@ -34,7 +35,7 @@ const Cell = ({
         maxWidth: size,
       }}
     >
-      {cell.renderCell()}
+      {flexRender(cell.column.columnDef.cell, cell.getContext())}
       <chakra.span
         pos="absolute"
         top="0"

apps/builder/components/results/ResultsTable/HeaderRow.tsx

@@ -1,10 +1,10 @@
 import { Box, BoxProps, chakra } from '@chakra-ui/react'
-import { HeaderGroup } from '@tanstack/react-table'
+import { flexRender, HeaderGroup } from '@tanstack/react-table'
 import React from 'react'
+import { TableData } from 'services/typebots/results'
 
 type Props = {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  headerGroup: HeaderGroup<any>
+  headerGroup: HeaderGroup<TableData>
 }
 
 export const HeaderRow = ({ headerGroup }: Props) => {
@@ -28,7 +28,9 @@ export const HeaderRow = ({ headerGroup }: Props) => {
               maxWidth: header.getSize(),
             }}
           >
-            {header.isPlaceholder ? null : header.renderHeader()}
+            {header.isPlaceholder
+              ? null
+              : flexRender(header.column.columnDef.header, header.getContext())}
             {header.column.getCanResize() && (
               <ResizeHandle
                 onMouseDown={header.getResizeHandler()}

apps/builder/components/results/ResultsTable/ResultsActionButtons.tsx

@@ -18,7 +18,7 @@ import {
   convertResultsToTableData,
   getAllResults,
   deleteResults as deleteFetchResults,
-} from 'services/typebots'
+} from 'services/typebots/results'
 
 type ResultsActionButtonsProps = {
   selectedResultsId: string[]
@@ -93,7 +93,9 @@ export const ResultsActionButtons = ({
 
     const dataToUnparse = isSelectAll
       ? await getAllTableData()
-      : tableData.filter((data) => selectedResultsId.includes(data.id))
+      : tableData.filter((data) =>
+          selectedResultsId.includes(data.id.plainText)
+        )
     const csvData = new Blob(
       [
         unparse({

apps/builder/components/results/ResultsTable/ResultsTable.tsx

@@ -13,10 +13,10 @@ import { ResultHeaderCell, ResultsTablePreferences } from 'models'
 import React, { useEffect, useRef, useState } from 'react'
 import { LoadingRows } from './LoadingRows'
 import {
-  createTable,
-  useTableInstance,
+  useReactTable,
   getCoreRowModel,
   ColumnOrderState,
+  ColumnDef,
 } from '@tanstack/react-table'
 import { BlockIcon } from 'components/editor/BlocksSideBar/BlockIcon'
 import { ColumnSettingsButton } from './ColumnsSettingsButton'
@@ -25,21 +25,11 @@ import { useDebounce } from 'use-debounce'
 import { ResultsActionButtons } from './ResultsActionButtons'
 import { Row } from './Row'
 import { HeaderRow } from './HeaderRow'
-
-type RowType = {
-  id: string
-  [key: string]:
-    | {
-        plainText: string
-        element?: JSX.Element | undefined
-      }
-    | string
-}
-const table = createTable().setRowType<RowType>()
+import { CellValueType, TableData } from 'services/typebots/results'
 
 type ResultsTableProps = {
   resultHeader: ResultHeaderCell[]
-  data: RowType[]
+  data: TableData[]
   hasMore?: boolean
   preferences?: ResultsTablePreferences
   onScrollToBottom: () => void
@@ -92,18 +82,18 @@ export const ResultsTable = ({
   const bottomElement = useRef<HTMLDivElement | null>(null)
   const tableWrapper = useRef<HTMLDivElement | null>(null)
 
-  const columns = React.useMemo(
+  const columns = React.useMemo<ColumnDef<TableData>[]>(
     () => [
-      table.createDisplayColumn({
+      {
         id: 'select',
         enableResizing: false,
         maxSize: 40,
-        header: ({ instance }) => (
+        header: ({ table }) => (
           <IndeterminateCheckbox
             {...{
-              checked: instance.getIsAllRowsSelected(),
-              indeterminate: instance.getIsSomeRowsSelected(),
-              onChange: instance.getToggleAllRowsSelectedHandler(),
+              checked: table.getIsAllRowsSelected(),
+              indeterminate: table.getIsSomeRowsSelected(),
+              onChange: table.getToggleAllRowsSelectedHandler(),
             }}
           />
         ),
@@ -118,26 +108,24 @@ export const ResultsTable = ({
             />
           </div>
         ),
-      }),
-      ...resultHeader.map((header) =>
-        table.createDataColumn(header.label, {
-          id: header.id,
-          size: header.isLong ? 400 : 200,
-          cell: (info) => {
-            const value = info.getValue()
-            if (!value) return
-            if (typeof value === 'string') return ''
-            return value.element || value.plainText || ''
-          },
-          header: () => (
-            <HStack overflow="hidden" data-testid={`${header.label} header`}>
-              <HeaderIcon header={header} />
-              <Text>{header.label}</Text>
-            </HStack>
-          ),
-        })
-      ),
-      table.createDisplayColumn({
+      },
+      ...resultHeader.map<ColumnDef<TableData>>((header) => ({
+        id: header.id,
+        accessorKey: header.label,
+        size: header.isLong ? 400 : 200,
+        header: () => (
+          <HStack overflow="hidden" data-testid={`${header.label} header`}>
+            <HeaderIcon header={header} />
+            <Text>{header.label}</Text>
+          </HStack>
+        ),
+        cell: (info) => {
+          const value = info.getValue() as CellValueType | undefined
+          if (!value) return
+          return value.element || value.plainText || ''
+        },
+      })),
+      {
         id: 'logs',
         enableResizing: false,
         maxSize: 110,
@@ -152,13 +140,13 @@ export const ResultsTable = ({
             See logs
           </Button>
         ),
-      }),
+      },
     ],
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [resultHeader]
   )
 
-  const instance = useTableInstance(table, {
+  const instance = useReactTable({
     data,
     columns,
     state: {
@@ -167,7 +155,7 @@ export const ResultsTable = ({
       columnOrder: columnsOrder,
       columnSizing: columnsWidth,
     },
-    getRowId: (row) => row.id,
+    getRowId: (row) => row.id.plainText,
     columnResizeMode: 'onChange',
     onRowSelectionChange: setRowSelection,
     onColumnVisibilityChange: setColumnsVisibility,

apps/builder/components/results/ResultsTable/Row.tsx

@@ -1,10 +1,10 @@
 import React, { useState } from 'react'
 import { Row as RowProps } from '@tanstack/react-table'
 import Cell from './Cell'
+import { TableData } from 'services/typebots/results'
 
 type Props = {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  row: RowProps<any>
+  row: RowProps<TableData>
   isSelected: boolean
   bottomElement?: React.MutableRefObject<HTMLDivElement | null>
   onExpandButtonClick: () => void