docs(site): add ts-table docs (#1558)

vtex · Apr 17, 2024 · 63ce53a · 63ce53a
2 parents 50dcf11 + b10b2a6
commit 63ce53a
Show file tree

Hide file tree

Showing 9 changed files with 4,765 additions and 13,502 deletions.
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
@@ -223,6 +223,7 @@ export type {
   TableProps,
   TableRowProps,
   TableSortIndicatorProps,
+  TableOptions,
 } from './table'
 export { Tag } from './tag'
 export type { TagProps } from './tag'

diff --git a/packages/docs/examples/ts-table.tsx b/packages/docs/examples/ts-table.tsx
@@ -0,0 +1,36 @@
+import React from 'react'
+import { TsTable } from '@vtex/shoreline-ts-table'
+import { Tag } from '@vtex/shoreline'
+
+const data: Product[] = [
+  {
+    name: 'iPhone 15',
+    description: 'A nice phone',
+    brand: 'Apple',
+    category: 'smartphones',
+  },
+]
+
+interface Product {
+  name: string
+  description: string
+  brand: string
+  category: string
+}
+
+export default function Example() {
+  return (
+    <TsTable
+      data={data}
+      columns={[
+        { accessorKey: 'name' },
+        { accessorKey: 'description' },
+        {
+          accessorKey: 'brand',
+          cell: (cell) => <Tag>{cell.renderValue()}</Tag>,
+        },
+        { accessorKey: 'category' },
+      ]}
+    />
+  )
+}
diff --git a/packages/docs/package.json b/packages/docs/package.json
@@ -22,6 +22,8 @@
     "@vtex/shoreline-icons": "workspace:*",
     "@vtex/shoreline-theme-sunrise": "workspace:*",
     "@vtex/shoreline-utils": "workspace:*",
+    "@vtex/shoreline-ts-table": "workspace:*",
+    "@tanstack/react-table": "8.16.0",
     "fs-extra": "11.2.0",
     "google": "link:@next/third-parties/google",
     "next": "13.4.7",

diff --git a/packages/docs/pages/components/table/_meta.json b/packages/docs/pages/components/table/_meta.json
@@ -1,4 +1,5 @@
 {
+  "tanstack-table": "@tanstack/react-table",
   "best-practices": "Best Practices",
   "figma-usage": "Figma Usage",
   "table-body": "TableBody",

diff --git a/packages/docs/pages/components/table/tanstack-table.mdx b/packages/docs/pages/components/table/tanstack-table.mdx
@@ -0,0 +1,19 @@
+# Usage with @tanstack/react-table
+
+<ComponentDescription name="ts-table" />
+
+The `@vtex/shoreline-ts-table` has `@tanstack/react-table` as peer dependency.
+
+```sh npm2yarn copy
+npm i @tanstack/react-table @vtex/shoreline-ts-table
+``` 
+
+<Preview name="ts-table" />
+
+## Required props
+
+<PropsDocs name="ts-table" required />
+
+## Optional props
+
+<PropsDocs name="ts-table" />
diff --git a/packages/docs/scripts/build-props.mjs b/packages/docs/scripts/build-props.mjs
@@ -120,6 +120,10 @@ const files = [
   getPath('components', 'tooltip', 'tooltip-provider'),
   getPath('components', 'tooltip', 'tooltip-popover'),
   getPath('components', 'tooltip', 'tooltip-arrow'),
+  /**
+   * ts-table
+   */
+  join(dirname(''), `../ts-table/src/ts-table.tsx`),
   /**
    * Date
    */

diff --git a/packages/ts-table/src/ts-table-header.tsx b/packages/ts-table/src/ts-table-header.tsx
@@ -34,7 +34,7 @@ export const TsTableHeader = forwardRef(function TsTableHeader<T>(
                     header.column.columnDef.header,
                     header.getContext()
                   )}
-              <TableSortIndicator sorted={header.column.getIsSorted()} />
+              <TableSortIndicator sorted={header.column.getIsSorted() as any} />
             </TableHeaderCell>
           ))}
         </TableRow>

diff --git a/packages/ts-table/src/ts-table.tsx b/packages/ts-table/src/ts-table.tsx
@@ -11,7 +11,10 @@ import {
   getSortedRowModel,
 } from '@tanstack/react-table'
 import { forwardRef, useMergeRef } from '@vtex/shoreline-utils'
-import type { TableProps } from '@vtex/shoreline-components'
+import type {
+  TableOptions as ShorelineTableOptions,
+  TableProps,
+} from '@vtex/shoreline-components'
 import {
   Table,
   TableRow,
@@ -139,20 +142,16 @@ export const TsTable = forwardRef(function TsTable<T>(
 
 type CoreProps = 'data' | 'columns' | 'getRowCanExpand'
 
-type Options<T> = Omit<TableOptions<T>, CoreProps | 'getCoreRowModel'> &
-  Partial<Pick<TableOptions<T>, 'getCoreRowModel'>>
-
-type TsMirrorProps<T> = Pick<TableOptions<T>, CoreProps>
-
-export interface TsTableProps<T>
-  extends TableProps,
-    TsMirrorProps<T>,
+export interface TsTableOptions<T>
+  extends ShorelineTableOptions,
+    Pick<TableOptions<T>, CoreProps>,
     Pick<TsTableRowProps<T>, 'rowClick' | 'renderDetail'> {
   /**
    * Other TanStack/Table options
    * @see https://tanstack.com/table/v8/docs/api/core/table
    */
-  options?: Options<T>
+  options?: Omit<TableOptions<T>, CoreProps | 'getCoreRowModel'> &
+    Partial<Pick<TableOptions<T>, 'getCoreRowModel'>>
   /**
    * Defines if columns will be sortable
    * @default false
@@ -171,3 +170,5 @@ export interface TsTableProps<T>
    */
   virtualizer?: UseVirtualizerModelReturn
 }
+
+export type TsTableProps<T> = TsTableOptions<T> & TableProps