feat: create responsive table

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,63 @@ const PreviousReleasesTable: FC = () => {
 
   const [currentModal, setCurrentModal] = useState<string | undefined>();
 
-  return (
-    <table id="tbVersions">
-      <thead>
-        <tr>
-          <th>{t('components.downloadReleasesTable.version')}</th>
-          <th>{t('components.downloadReleasesTable.codename')}</th>
-          <th>{t('components.downloadReleasesTable.firstReleased')}</th>
-          <th>{t('components.downloadReleasesTable.lastUpdated')}</th>
-          <th>{t('components.downloadReleasesTable.status')}</th>
-          <th></th>
-        </tr>
-      </thead>
-
-      <tbody>
-        {releaseData.map(release => (
-          <>
-            <tr key={release.major}>
-              <td data-label="Version">v{release.major}</td>
-
-              <td data-label="LTS">{release.codename || '-'}</td>
-
-              <td data-label="Date">
-                <FormattedTime date={release.currentStart} />
-              </td>
+  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: <FormattedTime date={release.currentStart} />,
+    lastUpdated: <FormattedTime date={release.releaseDate} />,
+    status: (
+      <Badge
+        kind={BADGE_KIND_MAP[release.status]}
+        size="small"
+        className="block"
+      >
+        {release.status}
+        {release.status === 'End-of-life' ? ' (EoL)' : ''}
+      </Badge>
+    ),
+    details: (
+      <LinkWithArrow
+        className="cursor-pointer"
+        onClick={() => setCurrentModal(release.version)}
+      >
+        {t('components.downloadReleasesTable.details')}
+      </LinkWithArrow>
+    ),
+  }));
 
-              <td data-label="Date">
-                <FormattedTime date={release.releaseDate} />
-              </td>
-
-              <td data-label="Status">
-                <Badge kind={BADGE_KIND_MAP[release.status]} size="small">
-                  {release.status}
-                  {release.status === 'End-of-life' ? ' (EoL)' : ''}
-                </Badge>
-              </td>
-
-              <td>
-                <LinkWithArrow
-                  className="cursor-pointer"
-                  onClick={() => setCurrentModal(release.version)}
-                >
-                  {t('components.downloadReleasesTable.details')}
-                </LinkWithArrow>
-              </td>
-            </tr>
-
-            <ReleaseModal
-              release={release}
-              open={currentModal === release.version}
-              onOpenChange={open => open || setCurrentModal(undefined)}
-            />
-          </>
-        ))}
-      </tbody>
-    </table>
+  return (
+    <>
+      <ResponsiveTable
+        data={data}
+        columns={columns}
+        getRowId={data => data.version}
+        getRowLabel={data => data.version}
+      />
+      {releaseData.map(release => (
+        <ReleaseModal
+          key={release.version}
+          release={release}
+          open={currentModal === release.version}
+          onOpenChange={open => open || setCurrentModal(undefined)}
+        />
+      ))}
+    </>
   );
 };
 

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,
 };

packages/ui-components/src/Common/Card/index.module.css

@@ -0,0 +1,18 @@
+@reference "../../styles/index.css";
+
+.card {
+  @apply rounded-xs
+    border
+    border-neutral-200
+    bg-transparent
+    p-4
+    dark:border-neutral-800;
+
+  .header {
+    @apply mb-2
+      text-sm
+      font-medium
+      text-gray-500
+      dark:text-gray-400;
+  }
+}

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<typeof Card>;
+type Meta = MetaObj<typeof Card>;
+
+export const Default: Story = {
+  render: args => (
+    <Card {...args}>
+      <CardHeader>Card Header</CardHeader>
+      <CardBody>Card Body Content</CardBody>
+    </Card>
+  ),
+};
+
+export default {
+  component: Card,
+} as Meta;

packages/ui-components/src/Common/Card/index.tsx

@@ -0,0 +1,18 @@
+import classNames from 'classnames';
+import type { ComponentPropsWithRef, FC } from 'react';
+
+import styles from './index.module.css';
+
+type CardProps = ComponentPropsWithRef<'div'>;
+
+export const Card: FC<CardProps> = ({ className, ...props }) => {
+  return <div className={classNames(styles.card, className)} {...props} />;
+};
+
+export const CardHeader: FC<CardProps> = ({ className, ...props }) => {
+  return <div className={classNames(styles.header, className)} {...props} />;
+};
+
+export const CardBody: FC<CardProps> = props => {
+  return <div {...props} />;
+};

packages/ui-components/src/Common/ResponsiveTable/DesktopTable/index.tsx

@@ -0,0 +1,32 @@
+import type { TableData } from '#ui/types';
+
+import type { ResponsiveTableProps } from '..';
+
+function DesktopTable<T extends TableData>({
+  data,
+  columns,
+  getRowId,
+}: ResponsiveTableProps<T>) {
+  return (
+    <table>
+      <thead>
+        <tr>
+          {columns.map(column => (
+            <th key={column.key}>{column.header}</th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {data.map((row, index) => (
+          <tr key={getRowId(row, index)}>
+            {columns.map(column => (
+              <td key={column.key}>{row[column.key]}</td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+
+export default DesktopTable;

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
+    gap-2
+    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 text-right
+      text-gray-600
+      dark:text-gray-300;
+  }
+}

packages/ui-components/src/Common/ResponsiveTable/MobileTable/index.tsx

@@ -0,0 +1,38 @@
+import type { TableData } from '#ui/types';
+
+import type { ResponsiveTableProps } from '..';
+import styles from './index.module.css';
+import { Card, CardBody, CardHeader } from '../../Card';
+
+function MobileTable<T extends TableData>({
+  data,
+  columns,
+  getRowId,
+  getRowLabel,
+}: ResponsiveTableProps<T>) {
+  return (
+    <div role="table" className="space-y-4">
+      {data.map((row, index) => (
+        <Card role="rowgroup" key={getRowId(row, index)}>
+          {getRowLabel && <CardHeader>{getRowLabel(row)}</CardHeader>}
+
+          <CardBody role="row">
+            {columns.map(column => (
+              <div key={column.key} className={styles.row}>
+                <div role="columnheader" className={styles.header}>
+                  {column.header}
+                </div>
+
+                <div role="cell" className={styles.value}>
+                  {row[column.key]}
+                </div>
+              </div>
+            ))}
+          </CardBody>
+        </Card>
+      ))}
+    </div>
+  );
+}
+
+export default MobileTable;

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<typeof ResponsiveTable>;
+type Meta = MetaObj<typeof ResponsiveTable>;
+
+export const Default: Story = {
+  args: {
+    data: [
+      { id: 1, name: 'John Doe', email: '[email protected]' },
+      { id: 2, name: 'Jane Smith', email: '[email protected]' },
+      { id: 3, name: 'Bob Johnson', email: '[email protected]' },
+    ],
+    columns: [
+      { key: 'id', header: 'ID' },
+      { key: 'name', header: 'Name' },
+      { key: 'email', header: 'Email' },
+    ],
+    getRowId: row => String(row.id),
+    getRowLabel: row => String(row.name),
+  },
+};
+
+export default { component: ResponsiveTable } as Meta;

packages/ui-components/src/Common/ResponsiveTable/index.tsx

@@ -0,0 +1,27 @@
+import type { TableColumn, TableData } from '#ui/types';
+
+import DesktopTable from './DesktopTable';
+import MobileTable from './MobileTable';
+
+export interface ResponsiveTableProps<T extends TableData> {
+  data: Array<T>;
+  columns: Array<TableColumn>;
+  getRowId: (row: T, index: number) => string;
+  getRowLabel?: (row: T) => string;
+}
+
+function ResponsiveTable<T extends TableData>(props: ResponsiveTableProps<T>) {
+  return (
+    <div className="w-full">
+      <div className="hidden overflow-x-auto lg:block">
+        <DesktopTable {...props} />
+      </div>
+
+      <div className="lg:hidden">
+        <MobileTable {...props} />
+      </div>
+    </div>
+  );
+}
+
+export default ResponsiveTable;

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 (
+    <ResponsiveTable
+      data={data}
+      columns={columns}
+      // We have to use index as row id fallback
+      getRowId={(row, index) => String(index)}
+    />
+  );
+};
+
+export default Table;

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<string, React.ReactNode>;