@ttoss/components 1.30.6 → 1.31.0

package/README.md

@@ -20,6 +20,46 @@ pnpm add @ttoss/components @ttoss/ui @emotion/react @ttoss/react-hooks
 
 You can check all the components of the library `@ttoss/ui` on the [Storybook](https://storybook.ttoss.dev/?path=/story/components).
 
+### Markdown
+
+Markdown uses [react-markdown](https://remarkjs.github.io/react-markdown/) under the hood, so the props are the same. You can update the elements as you want. Ex:
+
+```tsx
+const MARKDOWN_CONTENT = `
+# Heading 1
+## Heading 2
+### Heading 3
+#### Heading 4
+##### Heading 5
+
+Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odit quasi dolorum aperiam fugiat earum expedita non eligendi similique id minus explicabo, eum facere nihil aspernatur libero! Sapiente aliquid tenetur dolor.
+
+- Item 1
+- Item 2
+- Item 3
+
+![Alt Text](https://fastly.picsum.photos/id/436/200/300.jpg?hmac=OuJRsPTZRaNZhIyVFbzDkMYMyORVpV86q5M8igEfM3Y "Alt Text")
+
+[Google](https://google.com)
+`;
+
+const Component = () => {
+  return (
+    <Markdown
+      components={{
+        a: ({ children, ...props }) => (
+          <Link {...props} quiet>
+            {children}
+          </Link>
+        ),
+      }}
+    >
+      {MARKDOWN_CONTENT}
+    </Markdown>
+  );
+};
+```
+
 ### Modal
 
 Modal uses [react-modal](https://reactcommunity.org/react-modal/) under the hood, so the props are the same. The only difference is that the styles are theme-aware. You can [style the modal](https://reactcommunity.org/react-modal/styles/) using theme tokens, except that [array as value](https://theme-ui.com/sx-prop#responsive-values) don't work.
@@ -82,46 +122,6 @@ const Component = () => {
 };
 ```
 
-### Markdown
-
-Markdown uses [react-markdown](https://remarkjs.github.io/react-markdown/) under the hood, so the props are the same. You can update the elements as you want. Ex:
-
-```tsx
-const MARKDOWN_CONTENT = `
-# Heading 1
-## Heading 2
-### Heading 3
-#### Heading 4
-##### Heading 5
-
-Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odit quasi dolorum aperiam fugiat earum expedita non eligendi similique id minus explicabo, eum facere nihil aspernatur libero! Sapiente aliquid tenetur dolor.
-
-- Item 1
-- Item 2
-- Item 3
-
-![Alt Text](https://fastly.picsum.photos/id/436/200/300.jpg?hmac=OuJRsPTZRaNZhIyVFbzDkMYMyORVpV86q5M8igEfM3Y "Alt Text")
-
-[Google](https://google.com)
-`;
-
-const Component = () => {
-  return (
-    <Markdown
-      components={{
-        a: ({ children, ...props }) => (
-          <Link {...props} quiet>
-            {children}
-          </Link>
-        ),
-      }}
-    >
-      {MARKDOWN_CONTENT}
-    </Markdown>
-  );
-};
-```
-
 ### Search
 
 `Search` is a component that integrates an input field with debouncing functionality, making it ideal for search bars where you want to limit the rate of search queries based on user input.
@@ -155,3 +155,195 @@ const SearchComponent = () => {
 ```
 
 In this example, the `Search` component receives the current search text and a handler function to update this text. The `loading` prop can be used to display a loading indicator, and the `debounce` prop controls the debounce delay.
+
+### Table
+
+The `Table` component is a flexible and customizable table that supports sorting, filtering, and pagination. It is designed to be easy to use and integrate with your data sources. It exports all [TanStack Table](https://tanstack.com/table/latest) hooks and methods.
+
+#### Basic Usage
+
+```tsx
+import * as React from 'react';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from '@ttoss/components/table';
+
+type Person = {
+  firstName: string;
+  lastName: string;
+  age: number;
+  visits: number;
+  status: string;
+  progress: number;
+};
+
+const defaultData: Person[] = [
+  {
+    firstName: 'tanner',
+    lastName: 'linsley',
+    age: 24,
+    visits: 100,
+    status: 'In Relationship',
+    progress: 50,
+  },
+  {
+    firstName: 'tandy',
+    lastName: 'miller',
+    age: 40,
+    visits: 40,
+    status: 'Single',
+    progress: 80,
+  },
+  {
+    firstName: 'joe',
+    lastName: 'dirte',
+    age: 45,
+    visits: 20,
+    status: 'Complicated',
+    progress: 10,
+  },
+];
+
+const columnHelper = createColumnHelper<Person>();
+
+const columns = [
+  columnHelper.accessor('firstName', {
+    cell: (info) => {
+      return info.getValue();
+    },
+    footer: (info) => {
+      return info.column.id;
+    },
+  }),
+  columnHelper.accessor(
+    (row) => {
+      return row.lastName;
+    },
+    {
+      id: 'lastName',
+      cell: (info) => {
+        return <i>{info.getValue()}</i>;
+      },
+      header: () => {
+        return <span>Last Name</span>;
+      },
+      footer: (info) => {
+        return info.column.id;
+      },
+    }
+  ),
+  columnHelper.accessor('age', {
+    header: () => {
+      return 'Age';
+    },
+    cell: (info) => {
+      return info.renderValue();
+    },
+    footer: (info) => {
+      return info.column.id;
+    },
+  }),
+  columnHelper.accessor('visits', {
+    header: () => {
+      return <span>Visits</span>;
+    },
+    footer: (info) => {
+      return info.column.id;
+    },
+  }),
+  columnHelper.accessor('status', {
+    header: 'Status',
+    footer: (info) => {
+      return info.column.id;
+    },
+  }),
+  columnHelper.accessor('progress', {
+    header: 'Profile Progress',
+    footer: (info) => {
+      return info.column.id;
+    },
+  }),
+];
+
+const RenderTable = () => {
+  const [data] = React.useState(() => {
+    return [...defaultData];
+  });
+
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+  });
+
+  return (
+    <Table>
+      <TableHead>
+        {table.getHeaderGroups().map((headerGroup) => {
+          return (
+            <TableRow key={headerGroup.id}>
+              {headerGroup.headers.map((header) => {
+                return (
+                  <TableHeader key={header.id}>
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext()
+                        )}
+                  </TableHeader>
+                );
+              })}
+            </TableRow>
+          );
+        })}
+      </TableHead>
+      <TableBody>
+        {table.getRowModel().rows.map((row) => {
+          return (
+            <TableRow key={row.id}>
+              {row.getVisibleCells().map((cell) => {
+                return (
+                  <TableCell key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </TableCell>
+                );
+              })}
+            </TableRow>
+          );
+        })}
+      </TableBody>
+      <TableFooter>
+        {table.getFooterGroups().map((footerGroup) => {
+          return (
+            <TableRow key={footerGroup.id}>
+              {footerGroup.headers.map((header) => {
+                return (
+                  <TableHeader key={header.id}>
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(
+                          header.column.columnDef.footer,
+                          header.getContext()
+                        )}
+                  </TableHeader>
+                );
+              })}
+            </TableRow>
+          );
+        })}
+      </TableFooter>
+    </Table>
+  );
+};
+```

package/dist/components/Table.d.ts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { BoxProps } from '@ttoss/ui';
+export * from '@tanstack/react-table';
+
+declare const Table: (props: BoxProps) => react_jsx_runtime.JSX.Element;
+declare const TableHead: (props: BoxProps) => react_jsx_runtime.JSX.Element;
+declare const TableBody: (props: BoxProps) => react_jsx_runtime.JSX.Element;
+declare const TableRow: (props: BoxProps) => react_jsx_runtime.JSX.Element;
+declare const TableCell: (props: BoxProps) => react_jsx_runtime.JSX.Element;
+declare const TableHeader: (props: BoxProps) => react_jsx_runtime.JSX.Element;
+declare const TableCaption: (props: BoxProps) => react_jsx_runtime.JSX.Element;
+declare const TableFooter: (props: BoxProps) => react_jsx_runtime.JSX.Element;
+
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };

package/dist/esm/components/Table.js

@@ -0,0 +1,55 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+
+// src/components/Table.tsx
+import { Box } from "@ttoss/ui";
+export * from "@tanstack/react-table";
+import { jsx } from "react/jsx-runtime";
+var Table = props => {
+  return /* @__PURE__ */jsx(Box, {
+    as: "table",
+    ...props
+  });
+};
+var TableHead = props => {
+  return /* @__PURE__ */jsx(Box, {
+    as: "thead",
+    ...props
+  });
+};
+var TableBody = props => {
+  return /* @__PURE__ */jsx(Box, {
+    as: "tbody",
+    ...props
+  });
+};
+var TableRow = props => {
+  return /* @__PURE__ */jsx(Box, {
+    as: "tr",
+    ...props
+  });
+};
+var TableCell = props => {
+  return /* @__PURE__ */jsx(Box, {
+    as: "td",
+    ...props
+  });
+};
+var TableHeader = props => {
+  return /* @__PURE__ */jsx(Box, {
+    as: "th",
+    ...props
+  });
+};
+var TableCaption = props => {
+  return /* @__PURE__ */jsx(Box, {
+    as: "caption",
+    ...props
+  });
+};
+var TableFooter = props => {
+  return /* @__PURE__ */jsx(Box, {
+    as: "tfoot",
+    ...props
+  });
+};
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };

package/dist/esm/index.js

@@ -249,10 +249,10 @@ var Search = ({
   const debouncedValue = useDebounce(text, 500);
   React4.useEffect(() => {
     onChange(debouncedValue);
-  }, [debouncedValue]);
+  }, [debouncedValue, onChange]);
   return /* @__PURE__ */jsx6(Input, {
     leadingIcon: loading ? "loading" : "search",
-    value: text,
+    defaultValue: text,
     onChange: e => {
       return setText(e.target.value);
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/components",
-  "version": "1.30.6",
+  "version": "1.31.0",
   "description": "React components for ttoss ecosystem.",
   "author": "ttoss",
   "contributors": [
@@ -16,6 +16,10 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/esm/index.js"
+    },
+    "./table": {
+      "types": "./dist/components/Table.d.ts",
+      "import": "./dist/esm/components/Table.js"
     }
   },
   "files": [
@@ -25,6 +29,7 @@
   "sideEffects": false,
   "dependencies": {
     "@emotion/css": "^11.11.2",
+    "@tanstack/react-table": "^8.15.3",
     "@theme-ui/css": "^0.16.2",
     "@types/react-modal": "^3.16.3",
     "react-accessible-accordion": "^5.0.0",
@@ -45,10 +50,10 @@
     "@types/react": "^18.2.58",
     "jest": "^29.7.0",
     "tsup": "^8.0.2",
+    "@ttoss/react-hooks": "^1.25.3",
     "@ttoss/config": "^1.31.5",
     "@ttoss/react-icons": "^0.3.1",
     "@ttoss/test-utils": "^2.1.1",
-    "@ttoss/react-hooks": "^1.25.3",
     "@ttoss/ui": "^4.1.4"
   },
   "keywords": [

package/src/components/Search.tsx

@@ -21,12 +21,12 @@ export const Search = ({
 
   React.useEffect(() => {
     onChange(debouncedValue);
-  }, [debouncedValue]);
+  }, [debouncedValue, onChange]);
 
   return (
     <Input
       leadingIcon={loading ? 'loading' : 'search'}
-      value={text}
+      defaultValue={text}
       onChange={(e) => {
         return setText(e.target.value);
       }}

package/src/components/Table.tsx

@@ -0,0 +1,36 @@
+import { Box, BoxProps } from '@ttoss/ui';
+
+// eslint-disable-next-line react-refresh/only-export-components
+export * from '@tanstack/react-table';
+
+export const Table = (props: BoxProps) => {
+  return <Box as="table" {...props} />;
+};
+
+export const TableHead = (props: BoxProps) => {
+  return <Box as="thead" {...props} />;
+};
+
+export const TableBody = (props: BoxProps) => {
+  return <Box as="tbody" {...props} />;
+};
+
+export const TableRow = (props: BoxProps) => {
+  return <Box as="tr" {...props} />;
+};
+
+export const TableCell = (props: BoxProps) => {
+  return <Box as="td" {...props} />;
+};
+
+export const TableHeader = (props: BoxProps) => {
+  return <Box as="th" {...props} />;
+};
+
+export const TableCaption = (props: BoxProps) => {
+  return <Box as="caption" {...props} />;
+};
+
+export const TableFooter = (props: BoxProps) => {
+  return <Box as="tfoot" {...props} />;
+};