Merge pull request #137 from deriv-com/meenu/techdebt-cleanup-unused-…

…imports-update-variables
deriv-com · Nov 9, 2023 · ddc03f5 · ddc03f5
2 parents acb61d9 + 3d254e8
commit ddc03f5
Show file tree

Hide file tree

Showing 22 changed files with 784 additions and 791 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -20,8 +20,10 @@
             ]
           }
         ],
-        "tailwindcss/no-custom-classname": "error"
+        "tailwindcss/no-custom-classname": "error",
+        "camelcase":"warn"
       },
+
       "settings": {
         "tailwindcss": {
           "callees": ["classnames", "clsx", "qtMerge"]

diff --git a/libs/blocks/src/lib/accordion/index.tsx b/libs/blocks/src/lib/accordion/index.tsx
@@ -30,17 +30,16 @@ export const slugify = (input: string): string =>
 
 export function AccordionBlock({
   title,
-  tab,
   content,
   className,
   variant = 'Flush',
   multiCollapse = false,
 }: AccordionBlockProps) {
   const [expanded, setExpanded] = useState('');
 
-  const handleExpand = (is_expanded: boolean, id: string) => {
+  const handleExpand = (isExpanded: boolean, id: string) => {
     if (!multiCollapse) {
-      if (is_expanded) {
+      if (isExpanded) {
         setExpanded(id);
       }
     }
@@ -59,17 +58,17 @@ export function AccordionBlock({
 
       <div className="flex w-full flex-col gap-general-lg">
         <div className={content?.className}>
-          {content.data.map((acc_data) => {
-            const { title: acc_title } = acc_data;
-            const id = slugify(acc_title as string);
+          {content.data.map((accData) => {
+            const { title: accTitle } = accData;
+            const id = slugify(accTitle as string);
 
             return (
               <DynamicAccordion
-                {...acc_data}
+                {...accData}
                 id={id}
-                key={acc_title}
-                expanded={multiCollapse ? false : expanded === acc_title}
-                onExpand={(is_expanded, id) => handleExpand(is_expanded, id)}
+                key={accTitle}
+                expanded={multiCollapse ? false : expanded === accTitle}
+                onExpand={(isExpanded, id) => handleExpand(isExpanded, id)}
               />
             );
           })}

diff --git a/libs/blocks/src/lib/content-text/index.tsx b/libs/blocks/src/lib/content-text/index.tsx
@@ -1,4 +1,4 @@
-import { FluidContainer, Heading, Section, Text } from '@deriv/quill-design';
+import { FluidContainer, Heading, Section } from '@deriv/quill-design';
 import clsx from 'clsx';
 import { ReactNode } from 'react';
 

diff --git a/libs/components/src/lib/accordion/base/index.tsx b/libs/components/src/lib/accordion/base/index.tsx
@@ -18,37 +18,37 @@ export const Base = ({
   contentClass,
   onExpand,
 }: AccordionProps) => {
-  const [is_expanded, setExpanded] = useState(expanded);
-  const [is_auto_expand, setAutoExpand] = useState(false);
+  const [isExpanded, setExpanded] = useState(expanded);
+  const [isAutoExpand, setAutoExpand] = useState(false);
 
-  const accordion_element = useRef<HTMLDivElement>(null);
+  const accordionElement = useRef<HTMLDivElement>(null);
 
   const toggleCollapse = () => {
     setExpanded((current) => !current);
     setAutoExpand(false);
     scrollToExpanded(500);
 
     if (onExpand) {
-      onExpand(!is_expanded, title);
+      onExpand(!isExpanded, title);
     }
   };
 
   // Handle Collapse via Keyboard
   const handleKeyUp = useCallback((e: KeyboardEvent) => {
     if (e.code === 'Enter' || e.key === 'Enter' || e.keyCode === 13) {
-      if (accordion_element.current === document.activeElement) {
+      if (accordionElement.current === document.activeElement) {
         toggleCollapse();
       }
     }
   }, []);
 
   // Scroll to expanded item
   const scrollToExpanded = (delay = 1000) => {
-    const acc_element = accordion_element.current;
+    const accElement = accordionElement.current;
 
-    if (acc_element) {
+    if (accElement) {
       setTimeout(() => {
-        acc_element.scrollIntoView({
+        accElement.scrollIntoView({
           block: 'center',
           behavior: 'smooth',
         });
@@ -81,7 +81,7 @@ export const Base = ({
   return (
     <div
       data-id={id}
-      ref={accordion_element}
+      ref={accordionElement}
       tabIndex={0}
       className={qtMerge(
         'flex w-full flex-col overflow-hidden',
@@ -124,8 +124,7 @@ export const Base = ({
         <div
           className={qtMerge(
             styles['accordion-button'],
-            (is_auto_expand || is_expanded) &&
-              styles['accordion-button-expanded'],
+            (isAutoExpand || isExpanded) && styles['accordion-button-expanded'],
           )}
         >
           <StandaloneChevronDownRegularIcon fill="black" iconSize="sm" />
@@ -134,8 +133,7 @@ export const Base = ({
       <div
         className={qtMerge(
           styles['accordion-content'],
-          (is_auto_expand || is_expanded) &&
-            styles['accordion-content-expanded'],
+          (isAutoExpand || isExpanded) && styles['accordion-content-expanded'],
         )}
       >
         <div className="flex h-fit p-general-lg">{Content && <Content />}</div>

diff --git a/libs/components/src/lib/action-sheet/bottom-sheet/index.tsx b/libs/components/src/lib/action-sheet/bottom-sheet/index.tsx
@@ -5,20 +5,20 @@ export type BottomSheetProps = {
   heading: string;
   icon: ReactNode;
   children?: ReactNode;
-  placeholdericon?: ReactNode;
+  placeholderIcon?: ReactNode;
 };
 
 export const BottomSheet = ({
   heading,
   icon,
   children,
-  placeholdericon,
+  placeholderIcon,
 }: BottomSheetProps) => {
   return (
     <div className="fixed inset-y-gap-xs left-50 z-50 flex h-full w-full flex-col justify-end bg-typography-default ">
       <div className="fixed w-full rounded-t-lg bg-background-primary-base ">
         <div className="flex min-h-[64px] flex-row items-center justify-between px-general-md py-general-sm">
-          {placeholdericon && placeholdericon}
+          {placeholderIcon && placeholderIcon}
           {heading && <Heading.H6 className="px-400">{heading}</Heading.H6>}
           {icon && <div className="px-general-md py-general-sm">{icon}</div>}
         </div>

diff --git a/libs/components/src/lib/breadcrumbs/base/index.tsx b/libs/components/src/lib/breadcrumbs/base/index.tsx
@@ -23,20 +23,20 @@ export function Base({ size = 'sm', links = [], className }: BreadcrumbsProps) {
     setRenderLinks(links);
 
     if (hasExtra) {
-      const limited_links = [
+      const limitedLinks = [
         links[0],
         { content: '...', href: '' },
         links[linksLen - 2],
         links[linksLen - 1],
       ];
 
-      setRenderLinks(limited_links);
+      setRenderLinks(limitedLinks);
 
-      const remaining_links: LinkProps[] = links.filter(
-        (item) => !new Set(limited_links).has(item),
+      const remainingLinks: LinkProps[] = links.filter(
+        (item) => !new Set(limitedLinks).has(item),
       );
 
-      setDropdownLinks(remaining_links);
+      setDropdownLinks(remainingLinks);
     }
   }, [links]);
 

diff --git a/libs/components/src/lib/card/base/index.tsx b/libs/components/src/lib/card/base/index.tsx
@@ -48,12 +48,6 @@ const textSizeVariant: { [key: string]: TextSize } = {
   lg: 'lg',
 };
 
-const linkTextSizeVariant = {
-  sm: 'text-body-md',
-  md: 'text-body-lg',
-  lg: 'text-body-lg',
-};
-
 export const BaseCard: React.FC<BaseCardProps> = ({
   header,
   description,

diff --git a/libs/components/src/lib/link/index.tsx b/libs/components/src/lib/link/index.tsx
@@ -59,7 +59,7 @@ export function CustomLink({
     }
   }
 
-  const [is_hover, setHover] = useState(false);
+  const [isHover, setHover] = useState(false);
 
   return (
     <Link
@@ -85,7 +85,7 @@ export function CustomLink({
       {hasIcon && (
         <StandaloneChevronRightRegularIcon
           iconSize="sm"
-          fill={is_hover || hasLinkColor ? '#FF444F' : '#000000'}
+          fill={isHover || hasLinkColor ? '#FF444F' : '#000000'}
         />
       )}
     </Link>

diff --git a/libs/components/src/lib/search-chip/index.tsx b/libs/components/src/lib/search-chip/index.tsx
@@ -27,11 +27,11 @@ export const SearchChip = ({
   className,
   inputClassName,
 }: InputProps) => {
-  const [current_value, setValue] = useState(value);
-  const search_input_ref = useRef<HTMLInputElement | null>(null);
+  const [currentValue, setValue] = useState(value);
+  const searchInputRef = useRef<HTMLInputElement | null>(null);
   useEffect(() => {
-    if (search_input_ref.current) {
-      search_input_ref.current.focus();
+    if (searchInputRef.current) {
+      searchInputRef.current.focus();
     }
   }, []);
   useEffect(() => {
@@ -57,13 +57,13 @@ export const SearchChip = ({
 
           styles['bg-transparent'],
         )}
-        ref={search_input_ref}
+        ref={searchInputRef}
         placeholder={placeholder}
-        value={current_value}
+        value={currentValue}
         onChange={(e) => {
-          const input_value = e.target.value;
-          setValue(input_value);
-          onChange(input_value, e);
+          const inputValue = e.target.value;
+          setValue(inputValue);
+          onChange(inputValue, e);
         }}
       />
     </div>

diff --git a/libs/templates/src/lib/help-center/sections/answers/index.tsx b/libs/templates/src/lib/help-center/sections/answers/index.tsx
@@ -4,12 +4,12 @@ import { FAQDataType } from '../../types';
 import { AccordionProps } from '@deriv-com/components';
 
 const AnswerSection = ({ header, questions, answers }: FAQDataType) => {
-  const accordion_items: AccordionProps[] = [];
+  const accordionItems: AccordionProps[] = [];
 
   questions.forEach((question, qk) => {
     const answer = answers ? answers[qk] : () => <></>;
 
-    accordion_items.push({
+    accordionItems.push({
       title: question,
       content: answer,
     });
@@ -20,7 +20,7 @@ const AnswerSection = ({ header, questions, answers }: FAQDataType) => {
       <AccordionBlock
         title={header}
         content={{
-          data: accordion_items,
+          data: accordionItems,
         }}
       />
     </Section>

diff --git a/libs/templates/src/lib/help-center/sections/search/components.tsx b/libs/templates/src/lib/help-center/sections/search/components.tsx
@@ -11,9 +11,9 @@ export const slugify = (input: string): string =>
     .replace(/[\s]+/g, '-')
     .trim();
 
-export const getHelpCentreLink = (page: string, sub_page?: string) => {
-  const sub_link = sub_page ? `#${slugify(sub_page)}` : '';
-  return `/help-centre/${slugify(page)}${sub_link}`;
+export const getHelpCentreLink = (page: string, subPage?: string) => {
+  const subLink = subPage ? `#${slugify(subPage)}` : '';
+  return `/help-centre/${slugify(page)}${subLink}`;
 };
 
 export const generateFaqs = (questions: string[], header: string) => {

diff --git a/libs/templates/src/lib/help-center/sections/search/data.tsx b/libs/templates/src/lib/help-center/sections/search/data.tsx
@@ -2,7 +2,7 @@ import { CardContent, OptimizedImage } from '@deriv-com/components';
 
 import { FAQDataType } from '../../types';
 
-import { card_setting, faqCardsMaxItems } from './types';
+import { cardSetting, faqCardsMaxItems } from './types';
 import { FaqBox, FaqLink, FaqList, FaqText, generateFaqs } from './components';
 
 export const FAQData: FAQDataType[] = [
@@ -1099,13 +1099,13 @@ export const FAQData: FAQDataType[] = [
 ];
 
 export const CardsFAQ = [...FAQData].map(({ header, questions }, faqKey) => {
-  const trimmed_questions = [...questions];
+  const trimmedQuestions = [...questions];
 
-  trimmed_questions.length = faqCardsMaxItems[faqKey];
+  trimmedQuestions.length = faqCardsMaxItems[faqKey];
 
   return {
     header,
-    children: generateFaqs(trimmed_questions, header),
-    ...card_setting,
+    children: generateFaqs(trimmedQuestions, header),
+    ...cardSetting,
   };
 }) as CardContent[];
diff --git a/libs/templates/src/lib/help-center/sections/search/index.tsx b/libs/templates/src/lib/help-center/sections/search/index.tsx
@@ -7,14 +7,14 @@ interface SearchSectionProps {
   hasQuestionCards?: boolean;
 }
 const SearchSection = ({ hasQuestionCards = true }: SearchSectionProps) => {
-  const [search_key, setSearchKey] = useState('');
+  const [searchKey, setSearchKey] = useState('');
   const handleSearchKeyChange = (searchKey: string) => {
     setSearchKey(searchKey);
   };
   return (
     <>
       <SearchResults onSearchKeyChange={handleSearchKeyChange} />
-      {!search_key && hasQuestionCards && (
+      {!searchKey && hasQuestionCards && (
         <Features.Card
           variant="ContentLeft"
           cards={CardsFAQ}

diff --git a/libs/templates/src/lib/help-center/sections/search/search-results.tsx b/libs/templates/src/lib/help-center/sections/search/search-results.tsx
@@ -16,20 +16,20 @@ export const SearchResults = ({ onSearchKeyChange }: SearchResultsProps) => {
   const [searchKey, setSearchKey] = useState('');
 
   const showSearchresults = (query: string) => {
-    const final_matches: FAQSearchResults[] = [];
+    const finalMatches: FAQSearchResults[] = [];
 
     FAQData.forEach(({ header, questions }) => {
       const matches = searchString(query, questions);
 
       if (matches.length) {
-        final_matches.push({
+        finalMatches.push({
           header,
           questions: matches,
         });
       }
     });
 
-    setResults(final_matches);
+    setResults(finalMatches);
     onSearchKeyChange(query);
   };
 

diff --git a/libs/templates/src/lib/help-center/sections/search/types.tsx b/libs/templates/src/lib/help-center/sections/search/types.tsx
@@ -1,6 +1,6 @@
 import { CardContent } from '@deriv-com/components';
 
-export const card_setting: Partial<CardContent> = {
+export const cardSetting: Partial<CardContent> = {
   size: 'sm',
   color: 'gray',
   align: 'start',

diff --git a/libs/templates/src/lib/trade/app-download/index.tsx b/libs/templates/src/lib/trade/app-download/index.tsx
@@ -1,4 +1,4 @@
-import React, { HTMLAttributes } from 'react';
+import React from 'react';
 import {
   BodyTypographyProps,
   FluidContainer,