[pages][tools]: Redesign UI/UX for Tooling Page

lib/config.ts

@@ -1,3 +1,3 @@
 export const HOST = 'https://www.json-schema.org';
 
-export const DRAFT_ORDER = ['2020-12', '2019-09', 7, 6, 5, 4, 3, 2, 1];
+export const DRAFT_ORDER = ['2020-12', '2019-09', 7, 6, 5, 4, 3, 2, 1] as const;

package.json

@@ -22,11 +22,14 @@
   },
   "dependencies": {
     "@docsearch/react": "3.5.2",
+    "@types/jsonpath": "^0.2.4",
     "axios": "1.6.0",
     "classnames": "^2.3.1",
     "feed": "^4.2.2",
+    "fuse.js": "^7.0.0",
     "gray-matter": "^4.0.3",
     "js-yaml": "^4.1.0",
+    "jsonpath": "^1.1.1",
     "markdown-to-jsx": "^7.1.6",
     "moment": "2.29.4",
     "next": "14.1.1",

pages/tools/JSONSchemaTool.ts

@@ -0,0 +1,44 @@
+export interface JSONSchemaTool {
+  name: string;
+  description?: string;
+  toolingTypes: string[];
+  languages?: string[];
+  environments?: string[];
+  dependsOnValidators?: string[];
+  creators?: Person[];
+  maintainers?: Person[];
+  license?: string;
+  source: string;
+  homepage?: string;
+  documentation?: object;
+  supportedDialects?: {
+    draft?: (number | string)[];
+    additional?: {
+      name: string;
+      homepage?: string;
+      source: string;
+    }[];
+  };
+  bowtie?: {
+    identifier: string;
+  };
+  toolingListingNotes?: string;
+  compliance?: {
+    config?: {
+      docs?: string;
+      instructions?: string;
+    };
+  };
+  landscape?: {
+    logo?: string;
+    optOut?: boolean;
+  };
+  lastUpdated?: string;
+}
+
+export interface Person {
+  name?: string;
+  email?: string;
+  username: string;
+  platform: 'github' | 'gitlab' | 'bitbucket' | string;
+}

pages/tools/components/GroupBySelector.tsx

@@ -0,0 +1,44 @@
+import React, { Dispatch, SetStateAction } from 'react';
+import { Preferences } from '../hooks/usePreferences';
+
+export default function GroupBySelector({
+  preferences,
+  setPreferences,
+}: {
+  preferences: Preferences;
+  setPreferences: Dispatch<SetStateAction<Preferences>>;
+}) {
+  const groupBy = preferences.groupBy;
+  const setGroupPreference = (event: React.MouseEvent) => {
+    setPreferences((prev) => ({
+      ...prev,
+      groupBy: (event.target as HTMLButtonElement).value as typeof groupBy,
+      sortBy: 'name',
+      sortOrder: 'ascending',
+    }));
+  };
+
+  const groups: Record<string, Preferences['groupBy']> = {
+    None: 'none',
+    'Tooling Types': 'toolingTypes',
+    Languages: 'languages',
+  };
+
+  return (
+    <div className='ml-2 my-8 flex items-center space-x-2 max-w-screen overflow-x-auto'>
+      <span className='text-slate-600 dark:text-slate-300'>GROUP BY:</span>
+      {Object.keys(groups).map((group) => {
+        return (
+          <button
+            key={groups[group]}
+            value={groups[group]}
+            onClick={setGroupPreference}
+            className={`px-4 py-2 self-stretch border dark:border-slate-800 rounded ${preferences.groupBy === groups[group] ? 'bg-primary text-white' : 'bg-white dark:bg-slate-900 text-slate-600 dark:text-slate-200'}`}
+          >
+            {group}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

pages/tools/components/SearchBar.tsx

@@ -0,0 +1,31 @@
+import React, { useEffect, useState } from 'react';
+import type { Preferences } from '../hooks/usePreferences';
+
+const SearchBar = ({ preferences }: { preferences: Preferences }) => {
+  const [query, setQuery] = useState(preferences.query);
+
+  const changeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setQuery(e.target.value);
+  };
+
+  useEffect(() => {
+    setQuery(preferences.query);
+  }, [preferences.query]);
+
+  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>
+    </div>
+  );
+};
+
+export default SearchBar;

pages/tools/components/Sidebar.tsx

@@ -0,0 +1,147 @@
+import React, {
+  Dispatch,
+  SetStateAction,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import DropdownMenu from './ui/DropdownMenu';
+import SearchBar from './SearchBar';
+import Checkbox from './ui/Checkbox';
+import { type UniqueValuesPerField } from '../lib/getUniqueValuesPerField';
+import toTitleCase from '../lib/toTitleCase';
+import { useTheme } from 'next-themes';
+import { Preferences } from '../hooks/usePreferences';
+
+export default function Sidebar({
+  uniqueValuesPerField,
+  preferences,
+  setPreferences,
+  resetPreferences,
+  setIsSidebarOpen,
+}: {
+  uniqueValuesPerField: UniqueValuesPerField;
+  preferences: Preferences;
+  setPreferences: Dispatch<SetStateAction<Preferences>>;
+  resetPreferences: () => void;
+  setIsSidebarOpen: Dispatch<SetStateAction<boolean>>;
+}) {
+  const filterFormRef = useRef<HTMLFormElement>(null);
+  const [filterIcon, setFilterIcon] = useState('');
+  const { theme } = useTheme();
+
+  useEffect(() => {
+    if (theme === 'dark') {
+      setFilterIcon('/icons/filter-dark.svg');
+    } else {
+      setFilterIcon('/icons/filter.svg');
+    }
+  }, [theme]);
+
+  const submitHandler = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!filterFormRef.current) return;
+    const formData = new FormData(filterFormRef.current);
+
+    setPreferences((prev) => {
+      const updatedPreferences: Preferences = {
+        query: (formData.get('query') as Preferences['query']) || '',
+        groupBy: prev.groupBy || 'toolingTypes',
+        sortBy: prev.sortBy || 'name',
+        sortOrder: prev.sortOrder || 'ascending',
+        languages: formData.getAll('languages').map((value) => value as string),
+        licenses: formData.getAll('licenses').map((value) => value as string),
+        drafts: formData
+          .getAll('drafts')
+          .map((value) => value) as Preferences['drafts'],
+        toolingTypes: formData
+          .getAll('toolingTypes')
+          .map((value) => value as string),
+      };
+      return updatedPreferences;
+    });
+    setIsSidebarOpen((prev) => (prev ? false : prev));
+  };
+
+  const resetHandler = () => {
+    if (!filterFormRef.current) return;
+    filterFormRef.current.reset();
+    resetPreferences();
+    setIsSidebarOpen((prev) => (prev ? false : prev));
+  };
+
+  return (
+    <div className='pb-4 top-12 mx-auto lg:ml-4 lg:mt-8 w-4/5 h-fit'>
+      <form onSubmit={submitHandler} ref={filterFormRef} className='w-full'>
+        <SearchBar preferences={preferences} />
+        <DropdownMenu
+          label='Languages'
+          iconSrc={filterIcon}
+          iconAlt='Filter Icon'
+        >
+          {uniqueValuesPerField.languages?.map((uniqueValue) => (
+            <Checkbox
+              key={uniqueValue}
+              label={uniqueValue}
+              value={uniqueValue}
+              name='languages'
+            />
+          ))}
+        </DropdownMenu>
+        <DropdownMenu label='Drafts' iconSrc={filterIcon} iconAlt='Filter Icon'>
+          {uniqueValuesPerField.drafts?.map((uniqueValue) => (
+            <Checkbox
+              key={uniqueValue}
+              label={uniqueValue}
+              value={uniqueValue}
+              name='drafts'
+            />
+          ))}
+        </DropdownMenu>
+        <DropdownMenu
+          label='Tooling Types'
+          iconSrc={filterIcon}
+          iconAlt='Filter Icon'
+        >
+          {uniqueValuesPerField.toolingTypes?.map((uniqueValue) => (
+            <Checkbox
+              key={uniqueValue}
+              label={toTitleCase(uniqueValue, '-')}
+              value={uniqueValue}
+              name='toolingTypes'
+            />
+          ))}
+        </DropdownMenu>
+        <DropdownMenu
+          label='License'
+          iconSrc={filterIcon}
+          iconAlt='Filter Icon'
+        >
+          {uniqueValuesPerField.licenses?.map((uniqueValue) => (
+            <Checkbox
+              key={uniqueValue}
+              label={uniqueValue}
+              value={uniqueValue}
+              name='licenses'
+            />
+          ))}
+        </DropdownMenu>
+        <div className='w-full flex items-center justify-between mt-4'>
+          <button
+            type='submit'
+            className='bg-primary text-white px-4 py-2 rounded hover:bg-blue-700 focus:outline-none'
+          >
+            Apply Filters
+          </button>
+          <button
+            type='button'
+            className='bg-slate-200 dark:bg-slate-900 text-gray-700 dark:text-slate-200 px-4 py-2 rounded hover:bg-slate-300 focus:outline-none'
+            onClick={resetHandler}
+          >
+            Clear Filters
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}

pages/tools/components/ToolingTable/TableCell.tsx

@@ -0,0 +1,19 @@
+import React, { ReactNode } from 'react';
+
+const TableCell = ({
+  className,
+  children,
+}: {
+  className: string;
+  children: ReactNode | ReactNode[];
+}) => {
+  return (
+    <td
+      className={`px-4 py-2 border-b border-gray-200 lg:break-all ${className}`}
+    >
+      {children}
+    </td>
+  );
+};
+
+export default TableCell;

pages/tools/components/ToolingTable/TableColumnHeader.tsx

@@ -0,0 +1,17 @@
+import React, { ReactNode } from 'react';
+
+const TableColumnHeader = ({
+  className,
+  children,
+}: {
+  className: string;
+  children: ReactNode | ReactNode[];
+}) => {
+  return (
+    <th className={`px-4 py-2 border-b border-gray-200 ${className}`}>
+      {children}
+    </th>
+  );
+};
+
+export default TableColumnHeader;