From 1cb18b0768bf5007e2947f9b64fc05587f27bf5b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Guilherme=20Ara=C3=BAjo?= Date: Fri, 15 Aug 2025 16:02:49 -0300 Subject: [PATCH 01/10] feat: create card component --- .../src/Common/Card/index.module.css | 21 +++++++++++++++++++ .../src/Common/Card/index.stories.tsx | 19 +++++++++++++++++ .../ui-components/src/Common/Card/index.tsx | 17 +++++++++++++++ 3 files changed, 57 insertions(+) create mode 100644 packages/ui-components/src/Common/Card/index.module.css create mode 100644 packages/ui-components/src/Common/Card/index.stories.tsx create mode 100644 packages/ui-components/src/Common/Card/index.tsx diff --git a/packages/ui-components/src/Common/Card/index.module.css b/packages/ui-components/src/Common/Card/index.module.css new file mode 100644 index 0000000000000..034da313c6f25 --- /dev/null +++ b/packages/ui-components/src/Common/Card/index.module.css @@ -0,0 +1,21 @@ +@reference "../../styles/index.css"; + +.card { + @apply rounded-xs + border + border-neutral-200 + bg-transparent + p-4 + dark:border-neutral-800; + + .header { + @apply text-sm + font-medium + text-gray-500 + dark:text-gray-400; + } + + .body { + @apply mt-2; + } +} diff --git a/packages/ui-components/src/Common/Card/index.stories.tsx b/packages/ui-components/src/Common/Card/index.stories.tsx new file mode 100644 index 0000000000000..95d5c328ce594 --- /dev/null +++ b/packages/ui-components/src/Common/Card/index.stories.tsx @@ -0,0 +1,19 @@ +import type { Meta as MetaObj, StoryObj } from '@storybook/react'; + +import { Card, CardHeader, CardBody } from './index'; + +type Story = StoryObj; +type Meta = MetaObj; + +export const Default: Story = { + render: args => ( + + Card Header + Card Body Content + + ), +}; + +export default { + component: Card, +} as Meta; diff --git a/packages/ui-components/src/Common/Card/index.tsx b/packages/ui-components/src/Common/Card/index.tsx new file mode 100644 index 0000000000000..4e260466fdbc1 --- /dev/null +++ b/packages/ui-components/src/Common/Card/index.tsx @@ -0,0 +1,17 @@ +import type { ComponentPropsWithRef, FC } from 'react'; + +import styles from './index.module.css'; + +type CardProps = ComponentPropsWithRef<'div'>; + +export const Card: FC = ({ className, ...props }) => { + return
; +}; + +export const CardHeader: FC = ({ className, ...props }) => { + return
; +}; + +export const CardBody: FC = ({ className, ...props }) => { + return
; +}; From 17793fff746c5b7514ef3e465c0cc3fc6c68c399 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Guilherme=20Ara=C3=BAjo?= Date: Fri, 15 Aug 2025 16:03:20 -0300 Subject: [PATCH 02/10] feat: create responsive table --- .../ResponsiveTable/DesktopTable/index.tsx | 30 +++++++++++++++++ .../MobileTable/index.module.css | 25 ++++++++++++++ .../ResponsiveTable/MobileTable/index.tsx | 33 +++++++++++++++++++ .../Common/ResponsiveTable/index.stories.tsx | 25 ++++++++++++++ .../src/Common/ResponsiveTable/index.tsx | 32 ++++++++++++++++++ 5 files changed, 145 insertions(+) create mode 100644 packages/ui-components/src/Common/ResponsiveTable/DesktopTable/index.tsx create mode 100644 packages/ui-components/src/Common/ResponsiveTable/MobileTable/index.module.css create mode 100644 packages/ui-components/src/Common/ResponsiveTable/MobileTable/index.tsx create mode 100644 packages/ui-components/src/Common/ResponsiveTable/index.stories.tsx create mode 100644 packages/ui-components/src/Common/ResponsiveTable/index.tsx diff --git a/packages/ui-components/src/Common/ResponsiveTable/DesktopTable/index.tsx b/packages/ui-components/src/Common/ResponsiveTable/DesktopTable/index.tsx new file mode 100644 index 0000000000000..6443875a3b97c --- /dev/null +++ b/packages/ui-components/src/Common/ResponsiveTable/DesktopTable/index.tsx @@ -0,0 +1,30 @@ +import type { ResponsiveTableProps, TableData } from '..'; + +function DesktopTable({ + data, + columns, + getRowId, +}: ResponsiveTableProps) { + return ( + + + + {columns.map(column => ( + + ))} + + + + {data.map(row => ( + + {columns.map(column => ( + + ))} + + ))} + +
{column.header}
{row[column.key]}
+ ); +} + +export default DesktopTable; diff --git a/packages/ui-components/src/Common/ResponsiveTable/MobileTable/index.module.css b/packages/ui-components/src/Common/ResponsiveTable/MobileTable/index.module.css new file mode 100644 index 0000000000000..a16dfb2141760 --- /dev/null +++ b/packages/ui-components/src/Common/ResponsiveTable/MobileTable/index.module.css @@ -0,0 +1,25 @@ +@reference "../../../styles/index.css"; + +.row { + @apply flex + items-center + justify-between + border-b + border-gray-100 + py-2 + last:border-b-0 + dark:border-neutral-800; + + .header { + @apply font-medium + text-gray-700 + dark:text-gray-200; + } + + .value { + @apply flex + text-right + text-gray-600 + dark:text-gray-300; + } +} diff --git a/packages/ui-components/src/Common/ResponsiveTable/MobileTable/index.tsx b/packages/ui-components/src/Common/ResponsiveTable/MobileTable/index.tsx new file mode 100644 index 0000000000000..db7f5c7ad57ce --- /dev/null +++ b/packages/ui-components/src/Common/ResponsiveTable/MobileTable/index.tsx @@ -0,0 +1,33 @@ +import type { ResponsiveTableProps, TableData } from '..'; +import styles from './index.module.css'; +import { Card, CardBody, CardHeader } from '../../Card'; + + +function MobileTable({ + data, + columns, + getRowId, + getRowLabel, +}: ResponsiveTableProps) { + return ( +
+ {data.map(row => ( + + {getRowLabel(row)} + + + {columns.map(column => ( +
+
{column.header}
+ +
{row[column.key]}
+
+ ))} + + + ))} +
+ ); +} + +export default MobileTable; diff --git a/packages/ui-components/src/Common/ResponsiveTable/index.stories.tsx b/packages/ui-components/src/Common/ResponsiveTable/index.stories.tsx new file mode 100644 index 0000000000000..9a48a38eb32a0 --- /dev/null +++ b/packages/ui-components/src/Common/ResponsiveTable/index.stories.tsx @@ -0,0 +1,25 @@ +import type { Meta as MetaObj, StoryObj } from '@storybook/react'; + +import ResponsiveTable from './index'; + +type Story = StoryObj; +type Meta = MetaObj; + +export const Default: Story = { + args: { + data: [ + { id: 1, name: 'John Doe', email: 'john@example.com' }, + { id: 2, name: 'Jane Smith', email: 'jane@example.com' }, + { id: 3, name: 'Bob Johnson', email: 'bob@example.com' }, + ], + columns: [ + { key: 'id', header: 'ID' }, + { key: 'name', header: 'Name' }, + { key: 'email', header: 'Email' }, + ], + getRowId: row => row.id as string, + getRowLabel: row => row.name as string, + }, +}; + +export default { component: ResponsiveTable } as Meta; diff --git a/packages/ui-components/src/Common/ResponsiveTable/index.tsx b/packages/ui-components/src/Common/ResponsiveTable/index.tsx new file mode 100644 index 0000000000000..30d6fcbb6aea6 --- /dev/null +++ b/packages/ui-components/src/Common/ResponsiveTable/index.tsx @@ -0,0 +1,32 @@ +import DesktopTable from './DesktopTable'; +import MobileTable from './MobileTable'; + +type Column = { + key: string; + header: string; +}; + +export type TableData = Record; + +export interface ResponsiveTableProps { + data: Array; + columns: Array; + getRowId: (row: T) => string; + getRowLabel: (row: T) => string; +} + +function ResponsiveTable(props: ResponsiveTableProps) { + return ( +
+
+ +
+ +
+ +
+
+ ); +} + +export default ResponsiveTable; From 5bb7a10da6b8866c007910c2604ffb8702f50d37 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Guilherme=20Ara=C3=BAjo?= Date: Fri, 15 Aug 2025 16:03:55 -0300 Subject: [PATCH 03/10] refactor(PreviousReleasesTable): use responsive table --- .../Releases/PreviousReleasesTable.tsx | 107 +++++++++--------- 1 file changed, 53 insertions(+), 54 deletions(-) diff --git a/apps/site/components/Releases/PreviousReleasesTable.tsx b/apps/site/components/Releases/PreviousReleasesTable.tsx index 19705cf0958aa..995a4addbf40f 100644 --- a/apps/site/components/Releases/PreviousReleasesTable.tsx +++ b/apps/site/components/Releases/PreviousReleasesTable.tsx @@ -1,6 +1,7 @@ 'use client'; import Badge from '@node-core/ui-components/Common/Badge'; +import ResponsiveTable from '@node-core/ui-components/Common/ResponsiveTable'; import { useTranslations } from 'next-intl'; import type { FC } from 'react'; import { useState } from 'react'; @@ -26,61 +27,59 @@ const PreviousReleasesTable: FC = () => { const [currentModal, setCurrentModal] = useState(); - return ( - - - - - - - - - - - - - - {releaseData.map(release => ( - <> - - - - - - + const columns = [ + { key: 'version', header: t('components.downloadReleasesTable.version') }, + { key: 'codename', header: t('components.downloadReleasesTable.codename') }, + { + key: 'firstReleased', + header: t('components.downloadReleasesTable.firstReleased'), + }, + { + key: 'lastUpdated', + header: t('components.downloadReleasesTable.lastUpdated'), + }, + { key: 'status', header: t('components.downloadReleasesTable.status') }, + { key: 'details', header: '' }, + ]; + + const data = releaseData.map(release => ({ + version: `v${release.major}`, + codename: release.codename || '-', + firstReleased: , + lastUpdated: , + status: ( + + {release.status} + {release.status === 'End-of-life' ? ' (EoL)' : ''} + + ), + details: ( + setCurrentModal(release.version)} + > + {t('components.downloadReleasesTable.details')} + + ), + })); - - - - - - - - open || setCurrentModal(undefined)} - /> - - ))} - -
{t('components.downloadReleasesTable.version')}{t('components.downloadReleasesTable.codename')}{t('components.downloadReleasesTable.firstReleased')}{t('components.downloadReleasesTable.lastUpdated')}{t('components.downloadReleasesTable.status')}
v{release.major}{release.codename || '-'} - - - - - - {release.status} - {release.status === 'End-of-life' ? ' (EoL)' : ''} - - - setCurrentModal(release.version)} - > - {t('components.downloadReleasesTable.details')} - -
+ return ( + <> + data.version} + getRowLabel={data => data.version} + /> + {releaseData.map(release => ( + open || setCurrentModal(undefined)} + /> + ))} + ); }; From 9be3ae1139cf8d64f7675f297abc4ab7d826cea5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Guilherme=20Ara=C3=BAjo?= Date: Sat, 16 Aug 2025 10:24:44 -0300 Subject: [PATCH 04/10] refactor: remove type casting --- .../src/Common/ResponsiveTable/index.stories.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/ui-components/src/Common/ResponsiveTable/index.stories.tsx b/packages/ui-components/src/Common/ResponsiveTable/index.stories.tsx index 9a48a38eb32a0..5a32d47fe3765 100644 --- a/packages/ui-components/src/Common/ResponsiveTable/index.stories.tsx +++ b/packages/ui-components/src/Common/ResponsiveTable/index.stories.tsx @@ -17,8 +17,8 @@ export const Default: Story = { { key: 'name', header: 'Name' }, { key: 'email', header: 'Email' }, ], - getRowId: row => row.id as string, - getRowLabel: row => row.name as string, + getRowId: row => String(row.id), + getRowLabel: row => String(row.name), }, }; From a6731eeb443c4bb9f89bae8af37725c73b9d29cf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Guilherme=20Ara=C3=BAjo?= Date: Sat, 16 Aug 2025 10:26:17 -0300 Subject: [PATCH 05/10] fix: add accessibility attributes --- .../Common/ResponsiveTable/MobileTable/index.tsx | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/packages/ui-components/src/Common/ResponsiveTable/MobileTable/index.tsx b/packages/ui-components/src/Common/ResponsiveTable/MobileTable/index.tsx index db7f5c7ad57ce..c4cb7bc56de56 100644 --- a/packages/ui-components/src/Common/ResponsiveTable/MobileTable/index.tsx +++ b/packages/ui-components/src/Common/ResponsiveTable/MobileTable/index.tsx @@ -2,7 +2,6 @@ import type { ResponsiveTableProps, TableData } from '..'; import styles from './index.module.css'; import { Card, CardBody, CardHeader } from '../../Card'; - function MobileTable({ data, columns, @@ -10,17 +9,21 @@ function MobileTable({ getRowLabel, }: ResponsiveTableProps) { return ( -
+
{data.map(row => ( - + {getRowLabel(row)} - + {columns.map(column => (
-
{column.header}
+
+ {column.header} +
-
{row[column.key]}
+
+ {row[column.key]} +
))} From 4da53c76b6c379606bda8ce40b512cee3a547c69 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Guilherme=20Ara=C3=BAjo?= Date: Sat, 16 Aug 2025 10:28:13 -0300 Subject: [PATCH 06/10] refactor: remove classname concatenation --- packages/ui-components/src/Common/Card/index.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/ui-components/src/Common/Card/index.tsx b/packages/ui-components/src/Common/Card/index.tsx index 4e260466fdbc1..4bed3a49e2513 100644 --- a/packages/ui-components/src/Common/Card/index.tsx +++ b/packages/ui-components/src/Common/Card/index.tsx @@ -1,3 +1,4 @@ +import classNames from 'classnames'; import type { ComponentPropsWithRef, FC } from 'react'; import styles from './index.module.css'; @@ -5,13 +6,13 @@ import styles from './index.module.css'; type CardProps = ComponentPropsWithRef<'div'>; export const Card: FC = ({ className, ...props }) => { - return
; + return
; }; export const CardHeader: FC = ({ className, ...props }) => { - return
; + return
; }; export const CardBody: FC = ({ className, ...props }) => { - return
; + return
; }; From 6a1a1a3d1118ecfa598883b1dbd561e0ae6788aa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Guilherme=20Ara=C3=BAjo?= Date: Sat, 16 Aug 2025 20:30:14 -0300 Subject: [PATCH 07/10] feat: add markdown support --- apps/site/next.mdx.use.client.mjs | 2 + .../src/Common/Card/index.module.css | 7 +- .../ui-components/src/Common/Card/index.tsx | 4 +- .../ResponsiveTable/DesktopTable/index.tsx | 8 +- .../ResponsiveTable/MobileTable/index.tsx | 11 ++- .../src/Common/ResponsiveTable/index.tsx | 15 +-- .../ui-components/src/MDX/Table/index.tsx | 20 ++++ packages/ui-components/src/types.ts | 7 ++ packages/ui-components/src/util/table.ts | 98 +++++++++++++++++++ 9 files changed, 148 insertions(+), 24 deletions(-) create mode 100644 packages/ui-components/src/MDX/Table/index.tsx create mode 100644 packages/ui-components/src/util/table.ts diff --git a/apps/site/next.mdx.use.client.mjs b/apps/site/next.mdx.use.client.mjs index 67bdc3b4b16d4..a42f636b36711 100644 --- a/apps/site/next.mdx.use.client.mjs +++ b/apps/site/next.mdx.use.client.mjs @@ -2,6 +2,7 @@ import Blockquote from '@node-core/ui-components/Common/Blockquote'; import MDXCodeTabs from '@node-core/ui-components/MDX/CodeTabs'; +import MDXTable from '@node-core/ui-components/Mdx/Table'; import DownloadButton from './components/Downloads/DownloadButton'; import BlogPostLink from './components/Downloads/Release/BlogPostLink'; @@ -71,4 +72,5 @@ export const htmlComponents = { pre: MDXCodeBox, // Renders an Image Component for `img` tags img: MDXImage, + table: MDXTable, }; diff --git a/packages/ui-components/src/Common/Card/index.module.css b/packages/ui-components/src/Common/Card/index.module.css index 034da313c6f25..3803a8f8e3043 100644 --- a/packages/ui-components/src/Common/Card/index.module.css +++ b/packages/ui-components/src/Common/Card/index.module.css @@ -9,13 +9,10 @@ dark:border-neutral-800; .header { - @apply text-sm + @apply mb-2 + text-sm font-medium text-gray-500 dark:text-gray-400; } - - .body { - @apply mt-2; - } } diff --git a/packages/ui-components/src/Common/Card/index.tsx b/packages/ui-components/src/Common/Card/index.tsx index 4bed3a49e2513..bad15e07f5048 100644 --- a/packages/ui-components/src/Common/Card/index.tsx +++ b/packages/ui-components/src/Common/Card/index.tsx @@ -13,6 +13,6 @@ export const CardHeader: FC = ({ className, ...props }) => { return
; }; -export const CardBody: FC = ({ className, ...props }) => { - return
; +export const CardBody: FC = props => { + return
; }; diff --git a/packages/ui-components/src/Common/ResponsiveTable/DesktopTable/index.tsx b/packages/ui-components/src/Common/ResponsiveTable/DesktopTable/index.tsx index 6443875a3b97c..234edd935f36a 100644 --- a/packages/ui-components/src/Common/ResponsiveTable/DesktopTable/index.tsx +++ b/packages/ui-components/src/Common/ResponsiveTable/DesktopTable/index.tsx @@ -1,4 +1,6 @@ -import type { ResponsiveTableProps, TableData } from '..'; +import type { TableData } from '#ui/types'; + +import type { ResponsiveTableProps } from '..'; function DesktopTable({ data, @@ -15,8 +17,8 @@ function DesktopTable({ - {data.map(row => ( - + {data.map((row, index) => ( + {columns.map(column => ( {row[column.key]} ))} diff --git a/packages/ui-components/src/Common/ResponsiveTable/MobileTable/index.tsx b/packages/ui-components/src/Common/ResponsiveTable/MobileTable/index.tsx index c4cb7bc56de56..820f53df66e18 100644 --- a/packages/ui-components/src/Common/ResponsiveTable/MobileTable/index.tsx +++ b/packages/ui-components/src/Common/ResponsiveTable/MobileTable/index.tsx @@ -1,7 +1,10 @@ -import type { ResponsiveTableProps, TableData } from '..'; +import type { TableData } from '#ui/types'; + +import type { ResponsiveTableProps } from '..'; import styles from './index.module.css'; import { Card, CardBody, CardHeader } from '../../Card'; + function MobileTable({ data, columns, @@ -10,9 +13,9 @@ function MobileTable({ }: ResponsiveTableProps) { return (
- {data.map(row => ( - - {getRowLabel(row)} + {data.map((row, index) => ( + + {getRowLabel && {getRowLabel(row)}} {columns.map(column => ( diff --git a/packages/ui-components/src/Common/ResponsiveTable/index.tsx b/packages/ui-components/src/Common/ResponsiveTable/index.tsx index 30d6fcbb6aea6..999d08d9ece07 100644 --- a/packages/ui-components/src/Common/ResponsiveTable/index.tsx +++ b/packages/ui-components/src/Common/ResponsiveTable/index.tsx @@ -1,18 +1,13 @@ +import type { TableColumn, TableData } from '#ui/types'; + import DesktopTable from './DesktopTable'; import MobileTable from './MobileTable'; -type Column = { - key: string; - header: string; -}; - -export type TableData = Record; - export interface ResponsiveTableProps { data: Array; - columns: Array; - getRowId: (row: T) => string; - getRowLabel: (row: T) => string; + columns: Array; + getRowId: (row: T, index: number) => string; + getRowLabel?: (row: T) => string; } function ResponsiveTable(props: ResponsiveTableProps) { diff --git a/packages/ui-components/src/MDX/Table/index.tsx b/packages/ui-components/src/MDX/Table/index.tsx new file mode 100644 index 0000000000000..a8966e6ed4744 --- /dev/null +++ b/packages/ui-components/src/MDX/Table/index.tsx @@ -0,0 +1,20 @@ +import type { ReactNode } from 'react'; + +import { parseTableStructure } from '#ui/util/table'; + +import ResponsiveTable from '../../Common/ResponsiveTable'; + +const Table = ({ children }: { children: ReactNode }) => { + const { data, columns } = parseTableStructure(children); + + return ( + String(index)} + /> + ); +}; + +export default Table; diff --git a/packages/ui-components/src/types.ts b/packages/ui-components/src/types.ts index 86088827f76e8..314861ef2c961 100644 --- a/packages/ui-components/src/types.ts +++ b/packages/ui-components/src/types.ts @@ -23,3 +23,10 @@ export type SimpleLocaleConfig = { localName: string; name: string; }; + +export type TableColumn = { + key: string; + header: string; +}; + +export type TableData = Record; diff --git a/packages/ui-components/src/util/table.ts b/packages/ui-components/src/util/table.ts new file mode 100644 index 0000000000000..47cb583162997 --- /dev/null +++ b/packages/ui-components/src/util/table.ts @@ -0,0 +1,98 @@ +import { + Children, + isValidElement, + type ReactElement, + type ReactNode, +} from 'react'; + +import type { TableColumn, TableData } from '#ui/types'; + +const hasChildren = (props: unknown): props is { children: ReactNode } => + typeof props === 'object' && props !== null && 'children' in props; + +const isTableElement = ( + child: ReactNode, + tagName: string +): child is ReactElement<{ children?: ReactNode }> => + isValidElement(child) && child.type === tagName; + +const getTextContent = (node: ReactNode): string => { + if (typeof node === 'string' || typeof node === 'number') return String(node); + if (Array.isArray(node)) return node.map(getTextContent).join(''); + if (isValidElement(node) && hasChildren(node.props)) + return getTextContent(node.props.children); + return ''; +}; + +const getColumnKey = (headerText: string, index: number): string => + headerText + ? headerText.toLowerCase().trim().replace(/\s+/g, '_') + : `col_${index}`; + +export const extractColumns = (thead: ReactElement): Array => { + if (!hasChildren(thead.props) || !thead.props.children) return []; + + const headerRows = Children.toArray(thead.props.children); + const firstRow = headerRows[0]; + if (!isValidElement(firstRow) || !hasChildren(firstRow.props)) return []; + + const headerCells = Children.toArray(firstRow.props.children); + + return headerCells + .map((cell, index) => { + if (!isValidElement(cell) || !hasChildren(cell.props)) return null; + + const headerText = getTextContent(cell.props.children); + const key = getColumnKey(headerText, index); + + return { + key: key, + header: headerText, + }; + }) + .filter((col): col is TableColumn => col !== null); +}; + +export const extractData = ( + tbody: ReactElement, + columns: Array +): Array => { + if (!hasChildren(tbody.props) || !tbody.props.children) return []; + + const bodyRows = Children.toArray(tbody.props.children); + + return bodyRows + .map(row => { + if (!isValidElement(row) || !hasChildren(row.props)) return null; + + const cells = Children.toArray(row.props.children); + const rowData: TableData = {}; + + cells.forEach((cell, i) => { + if (isValidElement(cell) && hasChildren(cell.props) && columns[i]) { + rowData[columns[i].key] = cell.props.children; + } + }); + + return rowData; + }) + .filter((row): row is TableData => row !== null); +}; + +export const parseTableStructure = ( + children: ReactNode +): { columns: Array; data: Array } => { + if (!children) return { columns: [], data: [] }; + + const nodes = Children.toArray(children); + const thead = nodes.find(node => isTableElement(node, 'thead')); + const tbody = nodes.find(node => isTableElement(node, 'tbody')); + + if (!thead) throw new Error('Thead not found'); + if (!tbody) throw new Error('Tbody not found'); + + const columns = extractColumns(thead); + const data = extractData(tbody, columns); + + return { columns, data }; +}; From c8a6a0199d9aab5dee6e339db6fb4c002896dfdf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Guilherme=20Ara=C3=BAjo?= Date: Sat, 16 Aug 2025 20:49:22 -0300 Subject: [PATCH 08/10] fix: remove flex container --- apps/site/components/Releases/PreviousReleasesTable.tsx | 6 +++++- .../src/Common/ResponsiveTable/MobileTable/index.module.css | 4 ++-- .../src/Common/ResponsiveTable/MobileTable/index.tsx | 1 - 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/apps/site/components/Releases/PreviousReleasesTable.tsx b/apps/site/components/Releases/PreviousReleasesTable.tsx index 995a4addbf40f..b8148713ccc97 100644 --- a/apps/site/components/Releases/PreviousReleasesTable.tsx +++ b/apps/site/components/Releases/PreviousReleasesTable.tsx @@ -48,7 +48,11 @@ const PreviousReleasesTable: FC = () => { firstReleased: , lastUpdated: , status: ( - + {release.status} {release.status === 'End-of-life' ? ' (EoL)' : ''} diff --git a/packages/ui-components/src/Common/ResponsiveTable/MobileTable/index.module.css b/packages/ui-components/src/Common/ResponsiveTable/MobileTable/index.module.css index a16dfb2141760..577050bf6b758 100644 --- a/packages/ui-components/src/Common/ResponsiveTable/MobileTable/index.module.css +++ b/packages/ui-components/src/Common/ResponsiveTable/MobileTable/index.module.css @@ -4,6 +4,7 @@ @apply flex items-center justify-between + gap-2 border-b border-gray-100 py-2 @@ -17,8 +18,7 @@ } .value { - @apply flex - text-right + @apply text-right text-gray-600 dark:text-gray-300; } diff --git a/packages/ui-components/src/Common/ResponsiveTable/MobileTable/index.tsx b/packages/ui-components/src/Common/ResponsiveTable/MobileTable/index.tsx index 820f53df66e18..c6440a30010b7 100644 --- a/packages/ui-components/src/Common/ResponsiveTable/MobileTable/index.tsx +++ b/packages/ui-components/src/Common/ResponsiveTable/MobileTable/index.tsx @@ -4,7 +4,6 @@ import type { ResponsiveTableProps } from '..'; import styles from './index.module.css'; import { Card, CardBody, CardHeader } from '../../Card'; - function MobileTable({ data, columns, From 8a37bfaa6b39b6949b81a25aba46daa4bc388a2e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Guilherme=20Ara=C3=BAjo?= Date: Sat, 16 Aug 2025 20:56:10 -0300 Subject: [PATCH 09/10] fix: uppercase --- apps/site/next.mdx.use.client.mjs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/site/next.mdx.use.client.mjs b/apps/site/next.mdx.use.client.mjs index a42f636b36711..bd253be8d4496 100644 --- a/apps/site/next.mdx.use.client.mjs +++ b/apps/site/next.mdx.use.client.mjs @@ -2,7 +2,7 @@ import Blockquote from '@node-core/ui-components/Common/Blockquote'; import MDXCodeTabs from '@node-core/ui-components/MDX/CodeTabs'; -import MDXTable from '@node-core/ui-components/Mdx/Table'; +import MDXTable from '@node-core/ui-components/MDX/Table'; import DownloadButton from './components/Downloads/DownloadButton'; import BlogPostLink from './components/Downloads/Release/BlogPostLink'; From 2d40b7fba713fac12c2f9d66bff4bd12c14bd1d8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Guilherme=20Ara=C3=BAjo?= Date: Sat, 16 Aug 2025 21:26:37 -0300 Subject: [PATCH 10/10] refactor: review --- packages/ui-components/src/util/table.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/ui-components/src/util/table.ts b/packages/ui-components/src/util/table.ts index 47cb583162997..2344e0af4d970 100644 --- a/packages/ui-components/src/util/table.ts +++ b/packages/ui-components/src/util/table.ts @@ -88,8 +88,8 @@ export const parseTableStructure = ( const thead = nodes.find(node => isTableElement(node, 'thead')); const tbody = nodes.find(node => isTableElement(node, 'tbody')); - if (!thead) throw new Error('Thead not found'); - if (!tbody) throw new Error('Tbody not found'); + if (!thead) throw new Error('Thead element not found'); + if (!tbody) throw new Error('Tbody element not found'); const columns = extractColumns(thead); const data = extractData(tbody, columns);