feat: implement the switch in html/css only

Author: efekrskl

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

@@ -14,6 +14,10 @@
       dark:text-neutral-200;
   }
 
+  .input {
+    @apply sr-only;
+  }
+
   .root {
     @apply w-10.5
       relative
@@ -23,20 +27,22 @@
       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;
+      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;
   }
 
-  .root[data-state='checked'] {
+  .input:checked + .root {
     @apply bg-green-600;
   }
 
@@ -53,7 +59,7 @@
       motion-safe:ease-out;
   }
 
-  .thumb[data-state='checked'] {
+  .input:checked + .root .thumb {
     @apply translate-x-5;
   }
 }

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

@@ -1,48 +1,29 @@
-'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 type { FC, PropsWithChildren, InputHTMLAttributes } from 'react';
 
 import styles from './index.module.css';
 
-type SwitchProps = SwitchPrimitive.SwitchProps & {
+type SwitchProps = InputHTMLAttributes<HTMLInputElement> & {
+  id: string;
   label?: string;
-  checked?: boolean;
-  onCheckedChange?: (checked: boolean) => void;
   thumbClassName?: string;
 };
 
 const Switch: FC<PropsWithChildren<SwitchProps>> = ({
   label,
-  checked,
-  onCheckedChange,
   className,
   thumbClassName,
+  id,
   ...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>
+    <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>
   );
 };