feat: add toggle to show/hide LTS releases

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

@@ -28,7 +28,7 @@ const EOLReleaseTableBody: FC<EOLReleaseTableBodyProps> = ({
     <tbody>
       {eolReleases.map(release => (
         <Fragment key={release.major}>
-          <tr>
+          <tr data-lts={!!release.codename}>
             <td data-label="Version">
               v{release.major} {release.codename ? `(${release.codename})` : ''}
             </td>

apps/site/components/EOL/EOLReleaseTable/index.module.css

@@ -0,0 +1,9 @@
+@reference "../../../styles/index.css";
+
+.eolTableWrapper {
+  @apply contents;
+}
+
+.eolTableWrapper:has(input[type='checkbox']:checked) tr[data-lts='false'] {
+  @apply hidden;
+}

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

@@ -1,10 +1,12 @@
+import Switch from '@node-core/ui-components/Common/Switch';
 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 styles from './index.module.css';
 import EOLReleaseTableBody from './TableBody';
 
 const EOLReleaseTable: FC = async () => {
@@ -18,24 +20,27 @@ const EOLReleaseTable: FC = async () => {
   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>
+    <div className={styles.eolTableWrapper}>
+      <Switch id="hide-non-lts" label={t('components.eolTable.hideNonLts')} />
+      <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>
+    </div>
   );
 };
 

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/src/Common/Switch/index.module.css

@@ -0,0 +1,65 @@
+@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;
+  }
+
+  .input {
+    @apply sr-only;
+  }
+
+  .root {
+    @apply w-10.5
+      relative
+      inline-flex
+      h-6
+      cursor-pointer
+      items-center
+      rounded-full
+      bg-black
+      motion-safe:transition-colors
+      motion-safe:duration-100
+      motion-safe:ease-out
+      dark:bg-neutral-700;
+  }
+
+  .input:focus-visible + .root {
+    @apply ring-2
+      ring-green-500
+      ring-offset-2
+      ring-offset-neutral-100
+      dark:ring-green-400
+      dark:ring-offset-neutral-900;
+  }
+
+  .input:checked + .root {
+    @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;
+  }
+
+  .input:checked + .root .thumb {
+    @apply translate-x-5;
+  }
+}

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

@@ -0,0 +1,21 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+import Switch from '#ui/Common/Switch';
+
+type Story = StoryObj<typeof Switch>;
+type Meta = MetaObj<typeof Switch>;
+
+export const WithLabel: Story = {
+  args: {
+    label: 'Enable Feature',
+  },
+};
+
+export const WithoutLabel: Story = {};
+
+export default {
+  component: Switch,
+  parameters: {
+    layout: 'centered',
+  },
+} as Meta;

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

@@ -0,0 +1,30 @@
+import classNames from 'classnames';
+import type { FC, PropsWithChildren, InputHTMLAttributes } from 'react';
+
+import styles from './index.module.css';
+
+type SwitchProps = InputHTMLAttributes<HTMLInputElement> & {
+  id: string;
+  label?: string;
+  thumbClassName?: string;
+};
+
+const Switch: FC<PropsWithChildren<SwitchProps>> = ({
+  label,
+  className,
+  thumbClassName,
+  id,
+  ...props
+}) => {
+  return (
+    <label className={styles.switch}>
+      {label && <span className={styles.label}>{label}</span>}
+      <input id={id} type="checkbox" className={styles.input} {...props} />
+      <div className={classNames(styles.root, className)}>
+        <div className={classNames(styles.thumb, thumbClassName)} />
+      </div>
+    </label>
+  );
+};
+
+export default Switch;