feat: migrate tools components to typescript

components/tools/CardData.tsx

@@ -0,0 +1,122 @@
+import React, { useEffect, useRef, useState } from 'react';
+import TextTruncate from 'react-text-truncate';
+
+import InfoIcon from '../icons/InfoIcon';
+
+type VisibleType = Record<string, boolean>;
+
+interface CardDataProps {
+  className: string;
+  visible: VisibleType;
+  heading: string;
+  data: string;
+  read: boolean;
+  setRead: React.Dispatch<React.SetStateAction<boolean>>;
+  setVisible: React.Dispatch<React.SetStateAction<VisibleType>>;
+  type: string;
+};
+
+/**
+ * @description This component displays Card.
+ *
+ * @param {SelectTagsProps} props - The props for the Cards Data component.
+ * @param {string} props.className - Additional CSS classes for the component.
+ * @param {VisibleType} props.visible - Visibility status for different types.
+ * @param {string} props.heading - The heading text.
+ * @param {string} props.data - The data to be displayed.
+ * @param {boolean} props.read - Read status.
+ * @param {React.Dispatch<React.SetStateAction<boolean>>} props.setRead - Function to set read status.
+ * @param {React.Dispatch<React.SetStateAction<VisibleType>>} props.type - Function to set visibility status.
+ */
+export const CardData = ({
+  className,
+  visible,
+  heading,
+  data,
+  read,
+  setRead,
+  setVisible,
+  type
+}: CardDataProps) => {
+  const [outsideClick, setOutsideClick] = useState<boolean>(true);
+  const [description, setShowDescription] = useState<boolean>(false);
+  const initial = {
+    lang: false,
+    tech: false,
+    category: false,
+    pricing: false,
+    ownership: false
+  };
+  const domNode = useRef<HTMLSpanElement>(null);
+
+  useEffect(() => {
+    const divHeight = domNode.current?.offsetHeight || 0;
+    const numberOfLines = divHeight / 20;
+
+    if (numberOfLines > 3) {
+      setShowDescription(true);
+    } else {
+      setShowDescription(false);
+    }
+  }, [visible]);
+
+  useEffect(() => {
+    const maybeHandler = (event: MouseEvent) => {
+      setOutsideClick(true);
+      if (domNode.current && !domNode.current.contains(event.target as Node)) {
+        setOutsideClick(false);
+      }
+    };
+
+    document.addEventListener('mousedown', maybeHandler);
+
+    return () => {
+      document.removeEventListener('mousedown', maybeHandler);
+    };
+  }, []);
+
+  return (
+    <div className={className || 'text-left text-sm text-gray-500'}>
+      {heading}
+      <span className='group relative'>
+        {outsideClick && visible[type] && (
+          <span
+            ref={domNode}
+            data-testid='Carddata-description'
+            className='absolute -left-2/3 -top-4 z-10 w-48 translate-x-1/3 rounded border border-gray-200
+              bg-white px-2 py-1 text-xs shadow-md'
+          >
+            {read ? (
+              data
+            ) : (
+              <div>
+                <TextTruncate element='span' line={4} text={data} />
+              </div>
+            )}
+            {description && (
+              <button
+                className='cursor-pointer text-cyan-600'
+                onClick={() => {
+                  setOutsideClick(true);
+                  setRead(!read);
+                }}
+              >
+                {read ? ' Show Less' : ' Show More'}
+              </button>
+            )}
+          </span>
+        )}
+        <button
+          onClick={() => {
+            setRead(false);
+            setVisible({ ...initial, [type]: !visible[type] });
+          }}
+          className='mx-1'
+          data-testid='Carddata-button'
+        >
+          <InfoIcon />
+        </button>
+      </span>
+    </div>
+  );
+};

components/tools/CategoryDropdown.tsx

@@ -0,0 +1,35 @@
+import type { ToolsListType } from '@/types/components/tools/ToolDataType';
+
+import ToolsDataList from '../../config/tools.json';
+
+interface CategoryDropdownProps {
+  setopenCategory: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+const ToolsData = ToolsDataList as ToolsListType;
+
+/**
+ * @description This component displays Category Dropdown.
+ *
+ * @param {React.Dispatch<React.SetStateAction<boolean>>} props.setopenCategory - Function to set dropdown status.
+ */
+export default function CategoryDropdown({ setopenCategory }: CategoryDropdownProps) {
+  return (
+    <div className='absolute z-10 h-60 w-52 origin-top-right overflow-y-auto rounded-md bg-white shadow-lg ring-1 ring-black/5 focus:outline-none lg:w-56' role='menu' aria-orientation='vertical' aria-labelledby='menu-button'
+      data-testid='CategoryDropdown-div'>
+      <div className='py-1' role='none'>
+        {Object.keys(ToolsData).map((categoryName, index) => {
+          // displaying tools category having atleast one tool
+          if (ToolsData[categoryName].toolsList.length > 0) {
+            return (
+              <div key={index} onClick={() => setopenCategory(false)}>
+                <a href={`#${categoryName}`} key={index} className='block px-4 py-2 hover:bg-gray-100' data-testid='CategoryDropdown-link'>{categoryName}</a>
+              </div>);
+          }
+
+          return null;
+        })}
+      </div>
+    </div>
+  );
+};

components/tools/FilterDisplay.tsx

@@ -0,0 +1,48 @@
+import { twMerge } from 'tailwind-merge';
+
+interface FiltersDisplayProps {
+  checkedOptions?: string[];
+  setCheckedOptions: React.Dispatch<React.SetStateAction<string[]>>;
+};
+
+/**
+ * @description This component displays Filters.
+ *
+ * @param {string[]} props.checkedOptions - List of options that are currently checked.
+ * @param {React.Dispatch<React.SetStateAction<string[]>>} props.setCheckedOptions - Function to set check state of options.
+ */
+export default function FiltersDisplay({
+  checkedOptions = [],
+  setCheckedOptions
+}: FiltersDisplayProps) {
+  // function to clear selected filters
+  const handleClickOption = (event: React.MouseEvent, option: string, checkedOptionsList: typeof checkedOptions, setCheckedOptionsList: typeof setCheckedOptions) => {
+    const tempValueArray = [...checkedOptionsList];
+    const index = checkedOptionsList.indexOf(option);
+
+    if (index > -1) {
+      tempValueArray.splice(index, 1);
+    }
+    setCheckedOptionsList(tempValueArray);
+  };
+
+  return (
+    <>
+      {checkedOptions.length > 0 &&
+        <div className='flex max-w-lg flex-wrap gap-2 p-2 delay-150 duration-200' data-testid='FiltersDisplay-main'>
+          {checkedOptions.map((items, index) => {
+            return (
+              <div
+                key={index}
+                className={twMerge('hover:border-black border border-gray-600 text-gray-600 hover:text-black p-1 pb-0 rounded-2xl flex gap-1 items-start')}
+              >
+                <div className='m-auto h-fit text-xs'>{items}</div>
+                <button className='mt-[-2px] rounded-full p-1 hover:bg-gray-100' onClick={(event) => handleClickOption(event, items, checkedOptions, setCheckedOptions)} data-testid='Filters-Display-Button'>
+                  <img src='/img/illustrations/icons/close-icon.svg' alt='close' width='10' /></button>
+              </div>
+            );
+          })}
+        </div>}
+    </>
+  );
+};

components/tools/FiltersDropdown.tsx

@@ -0,0 +1,57 @@
+import { twMerge } from 'tailwind-merge';
+
+interface DataListType {
+  name: string;
+  color: string;
+  borderColor: string;
+};
+
+interface FiltersDropdownProps {
+  dataList?: DataListType[];
+  checkedOptions?: string[];
+  setCheckedOptions: React.Dispatch<React.SetStateAction<string[]>>;
+  className?: string;
+};
+
+/**
+ * @description This component displays Filter Dropdown Component.
+ *
+ * @param {DataListType[]} props.dataList - List of filter options.
+ * @param {string[]} props.checkedOptions - List of options that are currently checked.
+ * @param {React.Dispatch<React.SetStateAction<string[]>>} props.setCheckedOptions - Function to set check state of options.
+ * @param {string} props.className - Additional CSS classes for the component.
+ */
+export default function FiltersDropdown({
+  dataList = [],
+  checkedOptions = [],
+  setCheckedOptions,
+  className = ''
+}: FiltersDropdownProps) {
+  const handleClickOption = (event: React.MouseEvent, option: string) => {
+    const isChecked = checkedOptions.includes(option);
+    const updatedOptions = isChecked
+      ? checkedOptions.filter(item => item !== option)
+      : [...checkedOptions, option];
+
+    setCheckedOptions(updatedOptions);
+  };
+
+  return (
+    <div className={twMerge(`max-w-lg flex gap-2 flex-wrap p-2 duration-200 delay-150 ${className}`)} data-testid='FiltersDropdown-div'>
+      {dataList.map((data, index) => {
+        const checked = checkedOptions.includes(data.name);
+
+        return (
+          <div
+            key={index}
+            className={twMerge(`border border-secondary-600 text-secondary-600 p-1 pb-0 rounded-2xl flex gap-1 cursor-pointer items-start ${checked ? 'bg-secondary-600 text-white' : ''}`)}
+            onClick={(event) => handleClickOption(event, data.name)}
+          >
+            {checked ? <img src='/img/illustrations/icons/CheckedIcon.svg' alt='checked' /> : <img src='/img/illustrations/icons/UncheckedIcon.svg' alt='unchecked' />}
+            <div className='mb-[1px] mt-[-1px] text-xs'>{data.name}</div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};

components/tools/Tags.tsx

@@ -0,0 +1,25 @@
+interface SelectTagsProps {
+  name?: string;
+  bgColor: string;
+  borderColor: string;
+};
+
+/**
+ * @description This component displays tags.
+ *
+ * @param {SelectTagsProps} props - The props for the Select Tags component.
+ * @param {string} props.name - The content to be displayed inside the tag.
+ * @param {string} props.bgColor - The color of the tag.
+ * @param {string} props.borderColor - The border color of the tag.
+ */
+export default function SelectTags({
+  name = '',
+  bgColor,
+  borderColor
+} : SelectTagsProps) {
+  return (
+    <div className={`rounded-lg px-2 py-1 text-center text-sm ${bgColor} border ${borderColor}`} data-testid='Tags-main'>
+      {name}
+    </div>
+  );
+};