Adapt Checkbox & SearchBar to ShadCN, Add Tests, and Fix Tools Filter position

components/ui/input.tsx

@@ -0,0 +1,28 @@
+/* eslint-disable linebreak-style */
+import * as React from 'react';
+import PropTypes from 'prop-types';
+
+import { cn } from '@/lib/utils';
+
+function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
+  return (
+    <input
+      type={type}
+      data-slot='input'
+      className={cn(
+        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+Input.propTypes = {
+  className: PropTypes.string,
+  type: PropTypes.string,
+};
+
+export { Input };

cypress/components/Checkbox.cy.tsx

@@ -0,0 +1,113 @@
+/* eslint-disable cypress/unsafe-to-chain-command */
+import React from 'react';
+import Checkbox from '../../pages/tools/components/ui/Checkbox';
+
+describe('Checkbox Component', () => {
+  it('renders with required props', () => {
+    cy.mount(
+      <Checkbox label='Test Checkbox' value='test' name='test-checkbox' />,
+    );
+    cy.get('label').should('exist');
+    cy.get('button[role="checkbox"]').should('exist');
+    cy.contains('Test Checkbox').should('be.visible');
+  });
+
+  it('handles disabled state', () => {
+    cy.mount(
+      <Checkbox
+        label='Disabled Checkbox'
+        value='test'
+        name='test-checkbox'
+        disabled={true}
+      />,
+    );
+    cy.get('button[role="checkbox"]').should('have.attr', 'disabled');
+  });
+
+  describe('Light Mode', () => {
+    beforeEach(() => {
+      cy.mount(
+        <Checkbox label='Test Checkbox' value='test' name='test-checkbox' />,
+      );
+    });
+
+    it('renders correctly and handles interactions', () => {
+      // Check initial render
+      cy.contains('Test Checkbox').should('be.visible');
+      cy.get('[data-state="unchecked"]').should('exist');
+
+      // Check styling
+      cy.get('label').should('have.class', 'flex');
+      cy.get('button[role="checkbox"]')
+        .should('have.class', 'h-5')
+        .and('have.class', 'w-5')
+        .and('have.class', 'border-gray-500');
+
+      // Check interaction
+      cy.get('button[role="checkbox"]')
+        .click()
+        .should('have.attr', 'data-state', 'checked')
+        .click()
+        .should('have.attr', 'data-state', 'unchecked');
+    });
+
+    it('handles checked state prop', () => {
+      cy.mount(
+        <Checkbox
+          label='Test Checkbox'
+          value='test'
+          name='test-checkbox'
+          checked={true}
+        />,
+      );
+      cy.get('button[role="checkbox"]')
+        .should('have.attr', 'data-state', 'checked')
+        .and('have.class', 'data-[state=checked]:bg-blue-500')
+        .and('have.class', 'data-[state=checked]:border-blue-500')
+        .and('have.class', 'data-[state=checked]:text-white');
+    });
+  });
+
+  describe('Dark Mode', () => {
+    beforeEach(() => {
+      cy.mount(
+        <div className='dark'>
+          <Checkbox label='Test Checkbox' value='test' name='test-checkbox' />
+        </div>,
+      );
+    });
+
+    it('renders with correct dark mode styling', () => {
+      // Check label styling
+      cy.get('label')
+        .should('have.class', 'dark:bg-slate-900')
+        .and('have.class', 'dark:border-slate-700');
+
+      // Check text color
+      cy.get('span').should('have.class', 'dark:text-slate-300');
+
+      // Check checkbox styling
+      cy.get('button[role="checkbox"]').should(
+        'have.class',
+        'dark:border-slate-600',
+      );
+    });
+
+    it('handles checked state in dark mode', () => {
+      cy.mount(
+        <div className='dark'>
+          <Checkbox
+            label='Test Checkbox'
+            value='test'
+            name='test-checkbox'
+            checked={true}
+          />
+        </div>,
+      );
+      cy.get('button[role="checkbox"]')
+        .should('have.attr', 'data-state', 'checked')
+        .and('have.class', 'dark:data-[state=checked]:bg-[#bfdbfe]')
+        .and('have.class', 'dark:data-[state=checked]:text-black');
+    });
+  });
+});

cypress/components/SearchBar.cy.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { mount } from 'cypress/react18';
+import SearchBar from '@/pages/tools/components/SearchBar';
+import type { Transform } from '@/pages/tools/hooks/useToolsTransform';
+
+describe('SearchBar Component', () => {
+  const mockTransform: Transform = {
+    query: '',
+    sortBy: 'name',
+    sortOrder: 'ascending',
+    groupBy: 'toolingTypes',
+    licenses: [],
+    languages: [],
+    drafts: [],
+    toolingTypes: [],
+    environments: [],
+    showObsolete: 'false',
+    supportsBowtie: 'false',
+  };
+
+  beforeEach(() => {
+    mount(<SearchBar transform={mockTransform} />);
+  });
+
+  it('renders the search input', () => {
+    cy.get('input[type="text"]').should('exist');
+    cy.get('input[type="text"]').should('have.attr', 'placeholder', 'Search');
+  });
+
+  it('updates input value when typing', () => {
+    const testQuery = 'test search';
+    cy.get('input[type="text"]').type(testQuery);
+    cy.get('input[type="text"]').should('have.value', testQuery);
+  });
+
+  it('updates when transform.query changes', () => {
+    const newQuery = 'new search query';
+    mount(<SearchBar transform={{ ...mockTransform, query: newQuery }} />);
+    cy.get('input[type="text"]').should('have.value', newQuery);
+  });
+});

pages/tools/components/SearchBar.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { Input } from '@/components/ui/input';
 import type { Transform } from '../hooks/useToolsTransform';
 
 const SearchBar = ({ transform }: { transform: Transform }) => {
@@ -14,16 +15,14 @@ const SearchBar = ({ transform }: { transform: Transform }) => {
 
   return (
     <div className='w-full max-w-md mx-auto my-6 lg:my-auto'>
-      <div className='relative'>
-        <input
-          type='text'
-          className='w-full px-4 py-2 border dark:border-slate-900 rounded-md shadow-sm focus:outline-none focus:ring focus:border-blue-300 dark:bg-slate-900'
-          placeholder='Search'
-          name='query'
-          value={query}
-          onChange={changeHandler}
-        />
-      </div>
+      <Input
+        type='text'
+        className='dark:border-slate-900 focus:border-blue-300 dark:bg-slate-900'
+        placeholder='Search'
+        name='query'
+        value={query}
+        onChange={changeHandler}
+      />
     </div>
   );
 };

pages/tools/components/ui/Checkbox.tsx

@@ -1,34 +1,27 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
+import { Checkbox as ShadcnCheckbox } from '@/components/ui/checkbox';
 
 export default function Checkbox({
   label,
   value,
   name,
   checked,
+  disabled,
 }: {
   label: string;
   value: string;
   name: string;
   checked?: boolean;
+  disabled?: boolean;
 }) {
-  const [isChecked, setIsChecked] = useState(checked);
-
-  useEffect(() => {
-    setIsChecked(checked);
-  }, [checked]);
-
-  const handleChange = () => {
-    setIsChecked((prevChecked) => !prevChecked);
-  };
-
   return (
-    <label className='flex items-center gap-3 px-4 py-2 cursor-pointer'>
-      <input
-        type='checkbox'
+    <label className='flex items-center gap-3 px-4 py-2 cursor-pointer bg-slate-200 dark:bg-slate-900 hover:bg-slate-300 dark:hover:bg-slate-800 transition-colors duration-200 border border-slate-300 dark:border-slate-700 rounded-md my-2'>
+      <ShadcnCheckbox
         value={value}
         name={name}
-        checked={isChecked}
-        onChange={handleChange}
+        defaultChecked={checked}
+        disabled={disabled}
+        className='h-5 w-5 border data-[state=checked]:bg-blue-500 data-[state=checked]:border-blue-500 data-[state=checked]:text-white dark:data-[state=checked]:bg-[#bfdbfe] dark:data-[state=checked]:border-[#bfdbfe] dark:data-[state=checked]:text-black border-gray-500 dark:border-slate-600'
       />
       <span className='text-gray-700 dark:text-slate-300 font-medium'>
         {label}

pages/tools/index.page.tsx

@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+/* eslint-disable linebreak-style */
+import React, { useState, useEffect } from 'react';
 import fs from 'fs';
 import Link from 'next/link';
 import Head from 'next/head';
@@ -101,6 +102,16 @@ export default function ToolingPage({
   filterCriteria,
 }: ToolingPageProps) {
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth < 1024);
+    };
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
 
   const {
     numberOfTools,
@@ -142,28 +153,52 @@ export default function ToolingPage({
 
         <div className='grid grid-cols-1 lg:grid-cols-4 mx-4 md:mx-12 min-h-screen'>
           <div
-            className={`absolute lg:static top-10 lg:top-auto left-0 lg:left-auto mt-24 w-screen lg:w-auto h-full lg:h-auto bg-white dark:bg-slate-800 lg:bg-transparent transition-transform lg:transform-none duration-300 lg:duration-0 ease-in-out overflow-y-auto ${isSidebarOpen ? '-translate-x-0' : '-translate-x-full'} z-5`}
-            style={{ height: 'calc(100% - 4rem)' }}
+            className={`
+    lg:fixed absolute top-0 lg:top-0 left-0 lg:left-auto
+    mt-0 lg:mt-20
+    w-screen lg:w-auto
+    bg-white dark:bg-slate-800 lg:bg-transparent
+    transition-transform lg:transform-none duration-300 lg:duration-0 ease-in-out
+    z-5
+    ${isSidebarOpen ? '-translate-x-0' : '-translate-x-full'}
+    ${isMobile && isSidebarOpen ? 'overflow-hidden' : 'overflow-y-auto lg:overflow-y-hidden'}
+  `}
+            style={{
+              height: isMobile
+                ? isSidebarOpen
+                  ? 'calc(100vh - 4.5rem)'
+                  : '0'
+                : 'calc(100vh - 4.5rem)',
+              maxHeight: 'calc(100vh - 4.5rem)',
+              bottom: 0,
+              scrollbarWidth: 'none',
+              position: 'sticky',
+              top: '4.5rem',
+            }}
           >
-            <div className='hidden lg:block'>
-              <h1 className='text-h1mobile md:text-h1 font-bold lg:ml-4 lg:mt-6'>
-                {numberOfTools}
-              </h1>
-              <div className='text-xl text-slate-900 dark:text-slate-300 font-bold lg:ml-6'>
-                Tools
+            <div className='h-full flex flex-col'>
+              <div className='flex-1 overflow-y-auto scrollbar-hidden min-h-0 px-2 lg:px-0 pb-2'>
+                <div className='hidden lg:block pt-8'>
+                  <h1 className='text-h1mobile md:text-h1 font-bold lg:ml-4'>
+                    {numberOfTools}
+                  </h1>
+                  <div className='text-xl text-slate-900 dark:text-slate-300 font-bold lg:ml-6 mb-4'>
+                    Tools
+                  </div>
+                </div>
+                <Sidebar
+                  filterCriteria={filterCriteria}
+                  transform={transform}
+                  setTransform={setTransform}
+                  resetTransform={resetTransform}
+                  setIsSidebarOpen={setIsSidebarOpen}
+                />
               </div>
             </div>
-            <Sidebar
-              filterCriteria={filterCriteria}
-              transform={transform}
-              setTransform={setTransform}
-              resetTransform={resetTransform}
-              setIsSidebarOpen={setIsSidebarOpen}
-            />
           </div>
 
           <main
-            className={`md:col-span-3 lg:mt-20 lg:w-full mx-4 md:mx-0 ${isSidebarOpen ? 'hidden lg:block' : ''}`}
+            className={`md:col-span-3 lg:mt-20 lg:w-full mx-4 md:mx-0 lg:!ml-[20px] ${isSidebarOpen ? 'hidden lg:block' : ''}`}
           >
             <Headline1>JSON Schema Tooling</Headline1>
             <p className='text-slate-600 block leading-7 pb-1 dark:text-slate-300'>
@@ -184,7 +219,7 @@ export default function ToolingPage({
                 >
                   <Image
                     src='/img/tools/adding_your_tool.png'
-                    className='rounded-sm  '
+                    className='rounded-sm'
                     height={68}
                     width={190}
                     alt='adding your tool'
@@ -205,7 +240,7 @@ export default function ToolingPage({
                 >
                   <Image
                     src='/img/tools/try_bowtie.png'
-                    className='rounded-sm '
+                    className='rounded-sm'
                     height={68}
                     width={190}
                     alt='try bowtie'