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" pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy

[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) => (