From 46325bf4d2b1f3d7209531db5105c85a30520bd2 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Mon, 3 Feb 2025 18:15:08 +0000 Subject: [PATCH 1/5] chore(ui): add Table component --- site/package.json | 7 +- site/pnpm-lock.yaml | 23 +++- site/src/components/Table/Table.stories.tsx | 90 ++++++++++++++++ site/src/components/Table/Table.tsx | 113 ++++++++++++++++++++ site/tailwind.config.js | 1 + 5 files changed, 232 insertions(+), 2 deletions(-) create mode 100644 site/src/components/Table/Table.stories.tsx create mode 100644 site/src/components/Table/Table.tsx diff --git a/site/package.json b/site/package.json index a43eebb0833f6..5f6043e3e04f1 100644 --- a/site/package.json +++ b/site/package.json @@ -62,6 +62,7 @@ "@radix-ui/react-switch": "1.1.1", "@radix-ui/react-visually-hidden": "1.1.0", "@tanstack/react-query-devtools": "4.35.3", + "@tanstack/react-table": "8.20.6", "@xterm/addon-canvas": "0.7.0", "@xterm/addon-fit": "0.10.0", "@xterm/addon-unicode11": "0.8.0", @@ -188,7 +189,11 @@ "vite-plugin-checker": "0.8.0", "vite-plugin-turbosnap": "1.0.3" }, - "browserslist": ["chrome 110", "firefox 111", "safari 16.0"], + "browserslist": [ + "chrome 110", + "firefox 111", + "safari 16.0" + ], "resolutions": { "optionator": "0.9.3", "semver": "7.6.2" diff --git a/site/pnpm-lock.yaml b/site/pnpm-lock.yaml index 388e88e397d9f..4dde765100cc5 100644 --- a/site/pnpm-lock.yaml +++ b/site/pnpm-lock.yaml @@ -96,6 +96,9 @@ importers: '@tanstack/react-query-devtools': specifier: 4.35.3 version: 4.35.3(@tanstack/react-query@4.35.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@tanstack/react-table': + specifier: 8.20.6 + version: 8.20.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@xterm/addon-canvas': specifier: 0.7.0 version: 0.7.0(@xterm/xterm@5.5.0) @@ -2439,6 +2442,17 @@ packages: react-native: optional: true + '@tanstack/react-table@8.20.6': + resolution: {integrity: sha512-w0jluT718MrOKthRcr2xsjqzx+oEM7B7s/XXyfs19ll++hlId3fjTm+B2zrR3ijpANpkzBAr15j1XGVOMxpggQ==, tarball: https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.20.6.tgz} + engines: {node: '>=12'} + peerDependencies: + react: '>=16.8' + react-dom: '>=16.8' + + '@tanstack/table-core@8.20.5': + resolution: {integrity: sha512-P9dF7XbibHph2PFRz8gfBKEXEY/HJPOhym8CHmjF8y3q5mWpKx9xtZapXQUWCgkqvsK0R46Azuz+VaxD4Xl+Tg==, tarball: https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.20.5.tgz} + engines: {node: '>=12'} + '@testing-library/dom@10.4.0': resolution: {integrity: sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==, tarball: https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz} engines: {node: '>=18'} @@ -3678,7 +3692,6 @@ packages: eslint@8.52.0: resolution: {integrity: sha512-zh/JHnaixqHZsolRB/w9/02akBk9EPrOs9JwcTP2ek7yL5bVvXuRariiaAjjoJ5DvuwQ1WAE/HsMz+w17YgBCg==, tarball: https://registry.npmjs.org/eslint/-/eslint-8.52.0.tgz} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} - deprecated: This version is no longer supported. Please see https://eslint.org/version-support for other options. hasBin: true espree@9.6.1: @@ -8489,6 +8502,14 @@ snapshots: optionalDependencies: react-dom: 18.3.1(react@18.3.1) + '@tanstack/react-table@8.20.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@tanstack/table-core': 8.20.5 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + + '@tanstack/table-core@8.20.5': {} + '@testing-library/dom@10.4.0': dependencies: '@babel/code-frame': 7.26.2 diff --git a/site/src/components/Table/Table.stories.tsx b/site/src/components/Table/Table.stories.tsx new file mode 100644 index 0000000000000..41361f3ab59fe --- /dev/null +++ b/site/src/components/Table/Table.stories.tsx @@ -0,0 +1,90 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from "./Table"; + +const invoices = [ + { + invoice: "INV001", + paymentStatus: "Paid", + totalAmount: "$250.00", + paymentMethod: "Credit Card", + }, + { + invoice: "INV002", + paymentStatus: "Pending", + totalAmount: "$150.00", + paymentMethod: "PayPal", + }, + { + invoice: "INV003", + paymentStatus: "Unpaid", + totalAmount: "$350.00", + paymentMethod: "Bank Transfer", + }, + { + invoice: "INV004", + paymentStatus: "Paid", + totalAmount: "$450.00", + paymentMethod: "Credit Card", + }, + { + invoice: "INV005", + paymentStatus: "Paid", + totalAmount: "$550.00", + paymentMethod: "PayPal", + }, + { + invoice: "INV006", + paymentStatus: "Pending", + totalAmount: "$200.00", + paymentMethod: "Bank Transfer", + }, + { + invoice: "INV007", + paymentStatus: "Unpaid", + totalAmount: "$300.00", + paymentMethod: "Credit Card", + }, +]; + +const meta: Meta = { + title: "components/Table", + component: Table, + args: { + children: ( + <> + + + Invoice + Status + Method + Amount + + + + {invoices.map((invoice) => ( + + {invoice.invoice} + {invoice.paymentStatus} + {invoice.paymentMethod} + + {invoice.totalAmount} + + + ))} + + + ), + }, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = {}; diff --git a/site/src/components/Table/Table.tsx b/site/src/components/Table/Table.tsx new file mode 100644 index 0000000000000..d217d8df694cc --- /dev/null +++ b/site/src/components/Table/Table.tsx @@ -0,0 +1,113 @@ +import * as React from "react"; +import { cn } from "utils/cn"; + +export const Table = React.forwardRef< + HTMLTableElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+ + +)); +Table.displayName = "Table"; + +export const TableHeader = React.forwardRef< + HTMLTableSectionElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( + +)); +TableHeader.displayName = "TableHeader"; + +export const TableBody = React.forwardRef< + HTMLTableSectionElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( + +)); +TableBody.displayName = "TableBody"; + +export const TableFooter = React.forwardRef< + HTMLTableSectionElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( + tr]:last:border-b-0", + className, + )} + {...props} + /> +)); +TableFooter.displayName = "TableFooter"; + +export const TableRow = React.forwardRef< + HTMLTableRowElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( + +)); +TableRow.displayName = "TableRow"; + +export const TableHead = React.forwardRef< + HTMLTableCellElement, + React.ThHTMLAttributes +>(({ className, ...props }, ref) => ( + )); -TableHeader.displayName = "TableHeader"; export const TableBody = React.forwardRef< HTMLTableSectionElement, @@ -41,7 +39,6 @@ export const TableBody = React.forwardRef< {...props} /> )); -TableBody.displayName = "TableBody"; export const TableFooter = React.forwardRef< HTMLTableSectionElement, @@ -56,7 +53,6 @@ export const TableFooter = React.forwardRef< {...props} /> )); -TableFooter.displayName = "TableFooter"; export const TableRow = React.forwardRef< HTMLTableRowElement, @@ -72,7 +68,6 @@ export const TableRow = React.forwardRef< {...props} /> )); -TableRow.displayName = "TableRow"; export const TableHead = React.forwardRef< HTMLTableCellElement, @@ -88,7 +83,6 @@ export const TableHead = React.forwardRef< {...props} /> )); -TableHead.displayName = "TableHead"; export const TableCell = React.forwardRef< HTMLTableCellElement, @@ -103,7 +97,6 @@ export const TableCell = React.forwardRef< {...props} /> )); -TableCell.displayName = "TableCell"; export const TableCaption = React.forwardRef< HTMLTableCaptionElement, @@ -115,4 +108,3 @@ export const TableCaption = React.forwardRef< {...props} /> )); -TableCaption.displayName = "TableCaption"; From f289a2175746d5f53167ff6677031a6e77f09888 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Mon, 3 Feb 2025 19:45:18 +0000 Subject: [PATCH 4/5] Remove unused package --- site/package.json | 1 - site/pnpm-lock.yaml | 22 ---------------------- 2 files changed, 23 deletions(-) diff --git a/site/package.json b/site/package.json index 5f6043e3e04f1..2c430d8202b77 100644 --- a/site/package.json +++ b/site/package.json @@ -62,7 +62,6 @@ "@radix-ui/react-switch": "1.1.1", "@radix-ui/react-visually-hidden": "1.1.0", "@tanstack/react-query-devtools": "4.35.3", - "@tanstack/react-table": "8.20.6", "@xterm/addon-canvas": "0.7.0", "@xterm/addon-fit": "0.10.0", "@xterm/addon-unicode11": "0.8.0", diff --git a/site/pnpm-lock.yaml b/site/pnpm-lock.yaml index 4dde765100cc5..4fdb128bd4d89 100644 --- a/site/pnpm-lock.yaml +++ b/site/pnpm-lock.yaml @@ -96,9 +96,6 @@ importers: '@tanstack/react-query-devtools': specifier: 4.35.3 version: 4.35.3(@tanstack/react-query@4.35.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@tanstack/react-table': - specifier: 8.20.6 - version: 8.20.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@xterm/addon-canvas': specifier: 0.7.0 version: 0.7.0(@xterm/xterm@5.5.0) @@ -2442,17 +2439,6 @@ packages: react-native: optional: true - '@tanstack/react-table@8.20.6': - resolution: {integrity: sha512-w0jluT718MrOKthRcr2xsjqzx+oEM7B7s/XXyfs19ll++hlId3fjTm+B2zrR3ijpANpkzBAr15j1XGVOMxpggQ==, tarball: https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.20.6.tgz} - engines: {node: '>=12'} - peerDependencies: - react: '>=16.8' - react-dom: '>=16.8' - - '@tanstack/table-core@8.20.5': - resolution: {integrity: sha512-P9dF7XbibHph2PFRz8gfBKEXEY/HJPOhym8CHmjF8y3q5mWpKx9xtZapXQUWCgkqvsK0R46Azuz+VaxD4Xl+Tg==, tarball: https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.20.5.tgz} - engines: {node: '>=12'} - '@testing-library/dom@10.4.0': resolution: {integrity: sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==, tarball: https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz} engines: {node: '>=18'} @@ -8502,14 +8488,6 @@ snapshots: optionalDependencies: react-dom: 18.3.1(react@18.3.1) - '@tanstack/react-table@8.20.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': - dependencies: - '@tanstack/table-core': 8.20.5 - react: 18.3.1 - react-dom: 18.3.1(react@18.3.1) - - '@tanstack/table-core@8.20.5': {} - '@testing-library/dom@10.4.0': dependencies: '@babel/code-frame': 7.26.2 From 257514465e207309dfff1313488de873c8fd8555 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Mon, 3 Feb 2025 20:57:02 +0000 Subject: [PATCH 5/5] Run fmt --- site/package.json | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/site/package.json b/site/package.json index 2c430d8202b77..a43eebb0833f6 100644 --- a/site/package.json +++ b/site/package.json @@ -188,11 +188,7 @@ "vite-plugin-checker": "0.8.0", "vite-plugin-turbosnap": "1.0.3" }, - "browserslist": [ - "chrome 110", - "firefox 111", - "safari 16.0" - ], + "browserslist": ["chrome 110", "firefox 111", "safari 16.0"], "resolutions": { "optionator": "0.9.3", "semver": "7.6.2"
[role=checkbox]]:translate-y-[2px]", + className, + )} + {...props} + /> +)); +TableHead.displayName = "TableHead"; + +export const TableCell = React.forwardRef< + HTMLTableCellElement, + React.TdHTMLAttributes +>(({ className, ...props }, ref) => ( + [role=checkbox]]:translate-y-[2px]", + className, + )} + {...props} + /> +)); +TableCell.displayName = "TableCell"; + +export const TableCaption = React.forwardRef< + HTMLTableCaptionElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)); +TableCaption.displayName = "TableCaption"; diff --git a/site/tailwind.config.js b/site/tailwind.config.js index b37a12f52acea..7c07eed4bd3a2 100644 --- a/site/tailwind.config.js +++ b/site/tailwind.config.js @@ -15,6 +15,7 @@ module.exports = { }, fontSize: { "2xs": ["0.625rem", "0.875rem"], + xs: ["0.75rem", "1.125rem"], sm: ["0.875rem", "1.5rem"], "3xl": ["2rem", "2.5rem"], }, From a51e94893fca9f1aa7865771fe962a808caaf701 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Mon, 3 Feb 2025 19:44:10 +0000 Subject: [PATCH 2/5] Add table top comment --- site/src/components/Table/Table.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/site/src/components/Table/Table.tsx b/site/src/components/Table/Table.tsx index d217d8df694cc..e3a536c8d2fc2 100644 --- a/site/src/components/Table/Table.tsx +++ b/site/src/components/Table/Table.tsx @@ -1,3 +1,8 @@ +/** + * Copied from shadc/ui on 02/03/2025 + * @see {@link https://ui.shadcn.com/docs/components/table} + */ + import * as React from "react"; import { cn } from "utils/cn"; From c13162a5364aa051f11fbff704a64db34238de6a Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Mon, 3 Feb 2025 19:44:37 +0000 Subject: [PATCH 3/5] Remove displayName attr --- site/src/components/Table/Table.tsx | 8 -------- 1 file changed, 8 deletions(-) diff --git a/site/src/components/Table/Table.tsx b/site/src/components/Table/Table.tsx index e3a536c8d2fc2..85318d3b60d7d 100644 --- a/site/src/components/Table/Table.tsx +++ b/site/src/components/Table/Table.tsx @@ -21,7 +21,6 @@ export const Table = React.forwardRef< /> )); -Table.displayName = "Table"; export const TableHeader = React.forwardRef< HTMLTableSectionElement, @@ -29,7 +28,6 @@ export const TableHeader = React.forwardRef< >(({ className, ...props }, ref) => (