feat: updated filters dropdown and created stories for it

components/tools/Filters.tsx

@@ -19,6 +19,13 @@ interface FiltersProps {
   setOpenFilter: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
+enum OpenedFiltersDropdownType {
+  NONE = '',
+  LANGUAGE = 'language',
+  TECHNOLOGY = 'technology',
+  CATEGORY = 'category'
+}
+
 /**
  * @description This component displays Filters.
  * @param {FiltersProps} props - Props for Filters component.
@@ -30,9 +37,9 @@ export default function Filters({ setOpenFilter }: FiltersProps) {
   const { isPaid, isAsyncAPIOwner, languages, technologies, categories } = useContext(ToolFilterContext);
 
   // State variables to operate dropdowns of respective filters
-  const [openLanguage, setopenLanguage] = useState<boolean>(false);
-  const [openTechnology, setopenTechnology] = useState<boolean>(false);
-  const [openCategory, setopenCategory] = useState<boolean>(false);
+  const [openedFiltersDropown, setOpenedFiltersDropown] = useState<OpenedFiltersDropdownType>(
+    OpenedFiltersDropdownType.NONE
+  );
 
   // Filter state variables for user checked values are created, initialising it with the values already set by user.
   const [checkPaid, setCheckPaid] = useState<string>(isPaid);
@@ -113,6 +120,10 @@ export default function Filters({ setOpenFilter }: FiltersProps) {
     setCheckOwner(isAsyncAPIOwner);
   };
 
+  const toggleDropdown = (dropdownType: OpenedFiltersDropdownType) => {
+    setOpenedFiltersDropown(openedFiltersDropown === dropdownType ? OpenedFiltersDropdownType.NONE : dropdownType);
+  };
+
   return (
     <ToolFilter>
       <div className='z-20 rounded-lg border border-gray-300 bg-white py-4 shadow-md' data-testid='Filters-div'>
@@ -183,9 +194,9 @@ export default function Filters({ setOpenFilter }: FiltersProps) {
           <div className='w-full'>
             <div
               className={twMerge(
-                `px-4 py-2 flex justify-between rounded-lg border border-gray-400 w-full bg-gray-200 text-gray-700 shadow text-sm cursor-pointer ${openLanguage ? 'rounded-b-none' : ''}`
+                `px-4 py-2 flex justify-between rounded-lg border border-gray-400 w-full bg-gray-200 text-gray-700 shadow text-sm cursor-pointer ${openedFiltersDropown === OpenedFiltersDropdownType.LANGUAGE ? 'rounded-b-none' : ''}`
               )}
-              onClick={() => setopenLanguage(!openLanguage)}
+              onClick={() => toggleDropdown(OpenedFiltersDropdownType.LANGUAGE)}
             >
               <div className='flex items-center text-dark'>
                 {/* eslint-disable-next-line no-nested-ternary */}
@@ -195,9 +206,11 @@ export default function Filters({ setOpenFilter }: FiltersProps) {
                     : `${checkedLanguage.length} options selected`
                   : 'Select Languages...'}
               </div>
-              <ArrowDown className={`my-auto ${openLanguage ? 'rotate-180' : ''}`} />
+              <ArrowDown
+                className={`my-auto ${openedFiltersDropown === OpenedFiltersDropdownType.LANGUAGE ? 'rotate-180' : ''}`}
+              />
             </div>
-            {openLanguage && (
+            {openedFiltersDropown === OpenedFiltersDropdownType.LANGUAGE && (
               <div className='w-auto overflow-x-auto rounded-b-lg border border-gray-400 bg-gray-200 duration-150'>
                 <FiltersDropdown
                   dataList={languageList}
@@ -223,9 +236,9 @@ export default function Filters({ setOpenFilter }: FiltersProps) {
           <div className='w-full'>
             <div
               className={twMerge(
-                `px-4 py-2 flex justify-between rounded-lg border border-gray-400 w-full bg-gray-200 text-gray-700 shadow text-sm cursor-pointer ${openTechnology ? 'rounded-b-none' : ''}`
+                `px-4 py-2 flex justify-between rounded-lg border border-gray-400 w-full bg-gray-200 text-gray-700 shadow text-sm cursor-pointer ${openedFiltersDropown === OpenedFiltersDropdownType.TECHNOLOGY ? 'rounded-b-none' : ''}`
               )}
-              onClick={() => setopenTechnology(!openTechnology)}
+              onClick={() => toggleDropdown(OpenedFiltersDropdownType.TECHNOLOGY)}
             >
               <div className='flex items-center text-dark'>
                 {/* eslint-disable-next-line no-nested-ternary */}
@@ -235,9 +248,11 @@ export default function Filters({ setOpenFilter }: FiltersProps) {
                     : `${checkedTechnology.length} options selected`
                   : 'Select Technologies...'}
               </div>
-              <ArrowDown className={`my-auto ${openTechnology ? 'rotate-180' : ''}`} />
+              <ArrowDown
+                className={`my-auto ${openedFiltersDropown === OpenedFiltersDropdownType.TECHNOLOGY ? 'rotate-180' : ''}`}
+              />
             </div>
-            {openTechnology && (
+            {openedFiltersDropown === OpenedFiltersDropdownType.TECHNOLOGY && (
               <div className='w-auto overflow-x-auto rounded-b-lg border border-gray-400 bg-gray-200 duration-150'>
                 <FiltersDropdown
                   dataList={technologyList}
@@ -263,9 +278,9 @@ export default function Filters({ setOpenFilter }: FiltersProps) {
           <div className='w-full'>
             <div
               className={twMerge(
-                `px-4 py-2 flex justify-between rounded-lg border border-gray-400 w-full bg-gray-200 text-gray-700 shadow text-sm cursor-pointer ${openCategory ? 'rounded-b-none' : ''}`
+                `px-4 py-2 flex justify-between rounded-lg border border-gray-400 w-full bg-gray-200 text-gray-700 shadow text-sm cursor-pointer ${openedFiltersDropown === OpenedFiltersDropdownType.CATEGORY ? 'rounded-b-none' : ''}`
               )}
-              onClick={() => setopenCategory(!openCategory)}
+              onClick={() => toggleDropdown(OpenedFiltersDropdownType.CATEGORY)}
             >
               <div className='flex items-center text-dark'>
                 {/* eslint-disable-next-line no-nested-ternary */}
@@ -275,9 +290,11 @@ export default function Filters({ setOpenFilter }: FiltersProps) {
                     : `${checkedCategory.length} options selected`
                   : 'Select Categories...'}
               </div>
-              <ArrowDown className={`my-auto ${openCategory ? 'rotate-180' : ''}`} />
+              <ArrowDown
+                className={`my-auto ${openedFiltersDropown === OpenedFiltersDropdownType.CATEGORY ? 'rotate-180' : ''}`}
+              />
             </div>
-            {openCategory && (
+            {openedFiltersDropown === OpenedFiltersDropdownType.CATEGORY && (
               <div className='w-auto overflow-x-auto rounded-b-lg border border-gray-400 bg-gray-200 duration-150'>
                 <FiltersDropdown
                   dataList={categoryList}

components/tools/FiltersDropdown.stories.tsx

@@ -0,0 +1,76 @@
+import { useArgs } from '@storybook/preview-api';
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
+import type { Language, Technology } from '@/types/components/tools/ToolDataType';
+
+import tags from '../../config/all-tags.json';
+import FiltersDropdown from './FiltersDropdown';
+
+const meta: Meta<typeof FiltersDropdown> = {
+  title: 'Components/FiltersDropdown',
+  component: FiltersDropdown,
+  argTypes: {
+    dataList: {
+      control: false
+    },
+    checkedOptions: {
+      control: {
+        type: 'object'
+      }
+    },
+    setCheckedOptions: {
+      control: false
+    }
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof FiltersDropdown>;
+
+const Dropdown: Story = {
+  args: {
+    checkedOptions: []
+  },
+
+  render: (args) => {
+    const [{ checkedOptions }, updateArgs] = useArgs();
+
+    const setCheckedOptions: React.Dispatch<React.SetStateAction<string[]>> = (newValue) => {
+      if (typeof newValue === 'function') {
+        const updatedValue = (newValue as (prevState: string[]) => string[])(checkedOptions);
+
+        updateArgs({ checkedOptions: updatedValue });
+      } else {
+        updateArgs({ checkedOptions: newValue });
+      }
+    };
+
+    return <FiltersDropdown {...args} checkedOptions={checkedOptions} setCheckedOptions={setCheckedOptions} />;
+  }
+};
+
+const languageList = tags.languages as Language[];
+
+export const LanguageDropdown: Story = {
+  ...Dropdown,
+
+  args: {
+    ...Dropdown.args,
+    dataList: languageList,
+    checkedOptions: []
+  }
+};
+
+const technologyList = tags.technologies as Technology[];
+
+export const TechnologyDropdown: Story = {
+  ...Dropdown,
+
+  args: {
+    ...Dropdown.args,
+    dataList: technologyList,
+    checkedOptions: []
+  }
+};

components/tools/FiltersDropdown.tsx

@@ -3,11 +3,9 @@ import { twMerge } from 'tailwind-merge';
 
 import type { Category, Language, Technology } from '@/types/components/tools/ToolDataType';
 
-import Checkbox from './Checkbox';
-
 type DataList = Language[] | Technology[] | Category[];
 
-interface FiltersDropdownProps {
+export interface FiltersDropdownProps {
   dataList?: DataList;
   checkedOptions?: string[];
   setCheckedOptions: React.Dispatch<React.SetStateAction<string[]>>;
@@ -28,7 +26,7 @@ export default function FiltersDropdown({
   setCheckedOptions,
   className = ''
 }: FiltersDropdownProps) {
-  const handleClickOption = (option: string) => {
+  const handleClickOption = (event: React.MouseEvent<HTMLDivElement, MouseEvent>, option: string) => {
     const isChecked = checkedOptions.includes(option);
     const updatedOptions = isChecked ? checkedOptions.filter((item) => item !== option) : [...checkedOptions, option];
 
@@ -37,13 +35,30 @@ export default function FiltersDropdown({
 
   return (
     <div
-      className={twMerge(`max-w-lg flex gap-2 flex-wrap p-2 duration-200 delay-150 ${className}`)}
+      className={twMerge(
+        `max-w-lg flex flex-col max-h-[20vh] gap-1 overflow-y-auto p-2 px-0 duration-200 delay-150 bg-gray-200 ${className}`
+      )}
       data-testid='FiltersDropdown-div'
     >
       {dataList.map((data, index) => {
         const checked = checkedOptions.includes(data.name);
 
-        return <Checkbox key={index} name={data.name} checked={checked} handleClickOption={handleClickOption} />;
+        return (
+          <div
+            key={index}
+            className={twMerge(
+              `hover:bg-gray-300 text-black p-1 py-2 gap-1 flex cursor-pointer items-start ${checked ? 'bg-gray-400' : ''}`
+            )}
+            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='-mt-px mb-px text-xs'>{data.name}</div>
+          </div>
+        );
       })}
     </div>
   );