feat: add toggle to show/hide LTS releases

apps/site/components/EOL/EOLReleaseTable/TableClient.tsx

@@ -0,0 +1,96 @@
+'use client';
+
+import Switch from '@node-core/ui-components/Common/Switch';
+import { useTranslations } from 'next-intl';
+import type { FC } from 'react';
+import { Fragment, useState } from 'react';
+
+import FormattedTime from '#site/components/Common/FormattedTime';
+import LinkWithArrow from '#site/components/Common/LinkWithArrow';
+import EOLModal from '#site/components/EOL/EOLModal';
+import VulnerabilityChips from '#site/components/EOL/VulnerabilityChips';
+import type { NodeRelease } from '#site/types/releases.js';
+import type { GroupedVulnerabilities } from '#site/types/vulnerabilities.js';
+
+type EOLReleaseTableBodyProps = {
+  eolReleases: Array<NodeRelease>;
+  vulnerabilities: GroupedVulnerabilities;
+};
+
+const EOLReleaseTableClient: FC<EOLReleaseTableBodyProps> = ({
+  eolReleases,
+  vulnerabilities,
+}) => {
+  const t = useTranslations();
+
+  const [currentModal, setCurrentModal] = useState<string | undefined>();
+  const [hideNonLts, setHideNonLts] = useState(false);
+
+  const filteredReleases = hideNonLts
+    ? eolReleases.filter(release => release.isLts)
+    : eolReleases;
+
+  return (
+    <>
+      <Switch
+        label={t('components.eolTable.hideNonLts')}
+        checked={hideNonLts}
+        onCheckedChange={setHideNonLts}
+      />
+      <table id="tbVulnerabilities">
+        <thead>
+          <tr>
+            <th>
+              {t('components.eolTable.version')} (
+              {t('components.eolTable.codename')})
+            </th>
+            <th>{t('components.eolTable.lastUpdated')}</th>
+            <th>{t('components.eolTable.vulnerabilities')}</th>
+            <th>{t('components.eolTable.details')}</th>
+          </tr>
+        </thead>
+
+        <tbody>
+          {filteredReleases.map(release => (
+            <Fragment key={release.major}>
+              <tr>
+                <td data-label="Version">
+                  v{release.major}{' '}
+                  {release.codename ? `(${release.codename})` : ''}
+                </td>
+
+                <td data-label="Date">
+                  <FormattedTime date={release.releaseDate} />
+                </td>
+
+                <td>
+                  <VulnerabilityChips
+                    vulnerabilities={vulnerabilities[release.major]}
+                  />
+                </td>
+
+                <td>
+                  <LinkWithArrow
+                    className="cursor-pointer"
+                    onClick={() => setCurrentModal(release.version)}
+                  >
+                    {t('components.downloadReleasesTable.details')}
+                  </LinkWithArrow>
+                </td>
+              </tr>
+
+              <EOLModal
+                release={release}
+                vulnerabilities={vulnerabilities[release.major]}
+                open={currentModal === release.version}
+                onOpenChange={open => open || setCurrentModal(undefined)}
+              />
+            </Fragment>
+          ))}
+        </tbody>
+      </table>
+    </>
+  );
+};
+
+export default EOLReleaseTableClient;

apps/site/components/EOL/EOLReleaseTable/index.tsx

@@ -1,11 +1,10 @@
-import { getTranslations } from 'next-intl/server';
 import type { FC } from 'react';
 
 import provideReleaseData from '#site/next-data/providers/releaseData';
 import provideVulnerabilities from '#site/next-data/providers/vulnerabilities';
 import { EOL_VERSION_IDENTIFIER } from '#site/next.constants.mjs';
 
-import EOLReleaseTableBody from './TableBody';
+import EOLReleaseTableClient from './TableClient';
 
 const EOLReleaseTable: FC = async () => {
   const releaseData = await provideReleaseData();
@@ -15,27 +14,11 @@ const EOLReleaseTable: FC = async () => {
     release => release.status === EOL_VERSION_IDENTIFIER
   );
 
-  const t = await getTranslations();
-
   return (
-    <table id="tbVulnerabilities">
-      <thead>
-        <tr>
-          <th>
-            {t('components.eolTable.version')} (
-            {t('components.eolTable.codename')})
-          </th>
-          <th>{t('components.eolTable.lastUpdated')}</th>
-          <th>{t('components.eolTable.vulnerabilities')}</th>
-          <th>{t('components.eolTable.details')}</th>
-        </tr>
-      </thead>
-
-      <EOLReleaseTableBody
-        eolReleases={eolReleases}
-        vulnerabilities={vulnerabilities}
-      />
-    </table>
+    <EOLReleaseTableClient
+      eolReleases={eolReleases}
+      vulnerabilities={vulnerabilities}
+    />
   );
 };
 

apps/site/next-data/generators/__tests__/releaseData.test.mjs

@@ -43,7 +43,7 @@ describe('generateReleaseData', () => {
       version: '14.0.0',
       versionWithPrefix: 'v14.0.0',
       codename: '',
-      isLts: false,
+      isLts: true,
       npm: '6.14.10',
       v8: '8.0.276.20',
       releaseDate: '2021-04-20',

apps/site/next-data/generators/releaseData.mjs

@@ -63,7 +63,7 @@ const generateReleaseData = async () => {
       version: latestVersion.semver.raw,
       versionWithPrefix: `v${latestVersion.semver.raw}`,
       codename: major.support.codename || '',
-      isLts: status.endsWith('LTS'),
+      isLts: support.ltsStart !== undefined,
       npm: latestVersion.dependencies.npm || '',
       v8: latestVersion.dependencies.v8,
       releaseDate: latestVersion.releaseDate,

packages/i18n/src/locales/en.json

@@ -214,7 +214,8 @@
       "releaseDate": "Released at",
       "lastUpdated": "Last updated",
       "vulnerabilities": "Vulnerabilities",
-      "details": "Details"
+      "details": "Details",
+      "hideNonLts": "Hide non-LTS versions"
     },
     "minorReleasesTable": {
       "version": "Version",

packages/ui-components/package.json

@@ -42,6 +42,7 @@
     "@radix-ui/react-label": "~2.1.7",
     "@radix-ui/react-select": "~2.2.6",
     "@radix-ui/react-separator": "~1.1.7",
+    "@radix-ui/react-switch": "~1.2.6",
     "@radix-ui/react-tabs": "~1.1.13",
     "@radix-ui/react-toast": "~1.2.15",
     "@radix-ui/react-tooltip": "~1.2.8",

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

@@ -0,0 +1,59 @@
+@reference "../../styles/index.css";
+
+.switch {
+  @apply inline-flex
+    justify-end
+    gap-3;
+
+  .label {
+    @apply cursor-pointer
+      select-none
+      text-sm
+      font-medium
+      text-neutral-800
+      dark:text-neutral-200;
+  }
+
+  .root {
+    @apply w-10.5
+      relative
+      inline-flex
+      h-6
+      cursor-pointer
+      items-center
+      rounded-full
+      bg-black
+      focus:outline-none
+      focus-visible:ring-2
+      focus-visible:ring-green-500
+      focus-visible:ring-offset-2
+      focus-visible:ring-offset-neutral-100
+      motion-safe:transition-colors
+      motion-safe:duration-100
+      motion-safe:ease-out
+      dark:bg-neutral-700
+      dark:focus-visible:ring-green-400
+      dark:focus-visible:ring-offset-neutral-900;
+  }
+
+  .root[data-state='checked'] {
+    @apply bg-green-600;
+  }
+
+  .thumb {
+    @apply pointer-events-none
+      block
+      size-5
+      translate-x-0.5
+      rounded-full
+      bg-white
+      ring-0
+      motion-safe:transition-transform
+      motion-safe:duration-100
+      motion-safe:ease-out;
+  }
+
+  .thumb[data-state='checked'] {
+    @apply translate-x-5;
+  }
+}

packages/ui-components/src/Common/Switch/index.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+
+import Switch from '#ui/Common/Switch';
+
+type Story = StoryObj<typeof Switch>;
+type Meta = MetaObj<typeof Switch>;
+
+export const Uncontrolled: Story = {
+  args: {
+    label: 'Enable Feature',
+  },
+};
+
+export const Controlled: Story = {
+  args: {
+    label: 'Enable Feature',
+  },
+  render: args => {
+    const [checked, setChecked] = useState(false);
+
+    return <Switch {...args} checked={checked} onCheckedChange={setChecked} />;
+  },
+};
+
+export const WithoutLabel: Story = {};
+
+export default {
+  component: Switch,
+  parameters: {
+    layout: 'centered',
+  },
+} as Meta;

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

@@ -0,0 +1,49 @@
+'use client';
+
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+import classNames from 'classnames';
+import { useId } from 'react';
+import type { FC, PropsWithChildren } from 'react';
+
+import styles from './index.module.css';
+
+type SwitchProps = SwitchPrimitive.SwitchProps & {
+  label?: string;
+  checked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  thumbClassName?: string;
+};
+
+const Switch: FC<PropsWithChildren<SwitchProps>> = ({
+  label,
+  checked,
+  onCheckedChange,
+  className,
+  thumbClassName,
+  ...props
+}) => {
+  const id = useId();
+
+  return (
+    <div className={styles.switch}>
+      {label && (
+        <label className={styles.label} htmlFor={id}>
+          {label}
+        </label>
+      )}
+      <SwitchPrimitive.Root
+        id={id}
+        className={classNames(styles.root, className)}
+        checked={checked}
+        onCheckedChange={onCheckedChange}
+        {...props}
+      >
+        <SwitchPrimitive.Thumb
+          className={classNames(styles.thumb, thumbClassName)}
+        />
+      </SwitchPrimitive.Root>
+    </div>
+  );
+};
+
+export default Switch;