Merge pull request layer5io#761 from amitamrutiya/filter-theme

Update filter theme and add debouncing on the search bar
sudhanshutech · Oct 16, 2024 · d5104dd · d5104dd
2 parents 6e26e94 + 7a53c92
commit d5104dd
Show file tree

Hide file tree

Showing 13 changed files with 151 additions and 81 deletions.
diff --git a/src/base/Skeleton/Skeleton.tsx b/src/base/Skeleton/Skeleton.tsx
@@ -0,0 +1,7 @@
+import { Skeleton as MuiSkeleton, type SkeletonProps as MuiSkeletonProps } from '@mui/material';
+
+export function Skeleton(props: MuiSkeletonProps): JSX.Element {
+  return <MuiSkeleton {...props} />;
+}
+
+export default Skeleton;
diff --git a/src/base/Skeleton/index.tsx b/src/base/Skeleton/index.tsx
@@ -0,0 +1,5 @@
+import { SkeletonProps } from '@mui/material';
+import Skeleton from './Skeleton';
+
+export { Skeleton };
+export type { SkeletonProps };
diff --git a/src/base/index.tsx b/src/base/index.tsx
@@ -55,6 +55,7 @@ export * from './Paper';
 export * from './Popper';
 export * from './RadioGroup';
 export * from './Select';
+export * from './Skeleton';
 export * from './Slide';
 export * from './Stack';
 export * from './Switch';

diff --git a/src/custom/CatalogCard/CatalogCard.tsx b/src/custom/CatalogCard/CatalogCard.tsx
@@ -33,7 +33,6 @@ type CatalogCardProps = {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   pattern: any;
   patternType: string;
-  cardLink: string;
   cardHeight: string;
   cardWidth: string;
   cardStyles: React.CSSProperties;
@@ -64,7 +63,6 @@ const CatalogCard: React.FC<CatalogCardProps> = ({
   cardHeight,
   cardWidth,
   cardStyles,
-  cardLink,
   onCardClick
 }) => {
   const outerStyles = {
@@ -73,49 +71,47 @@ const CatalogCard: React.FC<CatalogCardProps> = ({
     ...cardStyles
   };
   return (
-    <DesignCardUrl href={cardLink} onClick={onCardClick} target="_blank" rel="noreferrer">
-      <DesignCard outerStyles={outerStyles}>
-        <DesignInnerCard className="innerCard">
-          <ClassWrap catalogClassName={pattern?.catalog_data?.content_class} />
-          <DesignType>{patternType}</DesignType>
-          <DesignDetailsDiv>
-            <DesignName
-              style={{
-                margin: '3rem 0 1.59rem 0',
-                textAlign: 'center'
-              }}
-            >
-              {pattern.name}
-            </DesignName>
-            <ImageWrapper>
-              <DesignIcon height={'118'} width={'120'} />
-            </ImageWrapper>
-          </DesignDetailsDiv>
-          <MetricsContainerFront>
-            <MetricsDiv>
-              <DownloadIcon width={18} height={18} />
-              <MetricsCount>{pattern.download_count}</MetricsCount>
-            </MetricsDiv>
-            <MetricsDiv>
-              <CloneIcon width={18} height={18} fill={'#51636B'} />
-              <MetricsCount>{pattern.clone_count}</MetricsCount>
-            </MetricsDiv>
-            <MetricsDiv>
-              <OpenIcon width={18} height={18} fill={'#51636B'} />
-              <MetricsCount>{pattern.view_count}</MetricsCount>
-            </MetricsDiv>
-            <MetricsDiv>
-              <DeploymentsIcon width={18} height={18} />
-              <MetricsCount>{pattern.deployment_count}</MetricsCount>
-            </MetricsDiv>
-            <MetricsDiv>
-              <ShareIcon width={18} height={18} fill={'#51636B'} />
-              <MetricsCount>{pattern.share_count}</MetricsCount>
-            </MetricsDiv>
-          </MetricsContainerFront>
-        </DesignInnerCard>
-      </DesignCard>
-    </DesignCardUrl>
+    <DesignCard outerStyles={outerStyles} onClick={onCardClick}>
+      <DesignInnerCard className="innerCard">
+        <ClassWrap catalogClassName={pattern?.catalog_data?.content_class} />
+        <DesignType>{patternType}</DesignType>
+        <DesignDetailsDiv>
+          <DesignName
+            style={{
+              margin: '3rem 0 1.59rem 0',
+              textAlign: 'center'
+            }}
+          >
+            {pattern.name}
+          </DesignName>
+          <ImageWrapper>
+            <DesignIcon height={'118'} width={'120'} />
+          </ImageWrapper>
+        </DesignDetailsDiv>
+        <MetricsContainerFront>
+          <MetricsDiv>
+            <DownloadIcon width={18} height={18} />
+            <MetricsCount>{pattern.download_count}</MetricsCount>
+          </MetricsDiv>
+          <MetricsDiv>
+            <CloneIcon width={18} height={18} fill={'#51636B'} />
+            <MetricsCount>{pattern.clone_count}</MetricsCount>
+          </MetricsDiv>
+          <MetricsDiv>
+            <OpenIcon width={18} height={18} fill={'#51636B'} />
+            <MetricsCount>{pattern.view_count}</MetricsCount>
+          </MetricsDiv>
+          <MetricsDiv>
+            <DeploymentsIcon width={18} height={18} />
+            <MetricsCount>{pattern.deployment_count}</MetricsCount>
+          </MetricsDiv>
+          <MetricsDiv>
+            <ShareIcon width={18} height={18} fill={'#51636B'} />
+            <MetricsCount>{pattern.share_count}</MetricsCount>
+          </MetricsDiv>
+        </MetricsContainerFront>
+      </DesignInnerCard>
+    </DesignCard>
   );
 };
 

diff --git a/src/custom/CatalogFilterSection/CatalogFilterSidebar.tsx b/src/custom/CatalogFilterSection/CatalogFilterSidebar.tsx
@@ -4,6 +4,7 @@ import { useCallback, useState } from 'react';
 import { Box, Drawer, Typography } from '../../base';
 import { CloseIcon } from '../../icons';
 import { darkTeal } from '../../theme';
+import { SLIGHT_BLUE } from '../../theme/colors/colors';
 import { CloseBtn } from '../Modal';
 import CatalogFilterSidebarState from './CatalogFilterSidebarState';
 import {
@@ -37,13 +38,15 @@ export interface CatalogFilterSidebarProps {
   setData: (callback: (prevFilters: FilterValues) => FilterValues) => void;
   lists: FilterList[];
   value?: FilterValues;
+  styleProps?: StyleProps;
 }
 
 export type FilterValues = Record<string, string | string[]>;
 
 export interface StyleProps {
   backgroundColor?: string;
   sectionTitleBackgroundColor?: string;
+  fontFamily?: string;
 }
 
 /**
@@ -56,7 +59,8 @@ export interface StyleProps {
 const CatalogFilterSidebar: React.FC<CatalogFilterSidebarProps> = ({
   lists,
   setData,
-  value = {}
+  value = {},
+  styleProps
 }) => {
   const theme = useTheme(); // Get the current theme
   const [openDrawer, setOpenDrawer] = useState<boolean>(false);
@@ -69,23 +73,29 @@ const CatalogFilterSidebar: React.FC<CatalogFilterSidebarProps> = ({
     setOpenDrawer(false);
   }, []);
 
-  const styleProps: StyleProps = {
+  const defaultStyleProps: StyleProps = {
     backgroundColor:
       theme.palette.mode === 'light'
         ? theme.palette.background.default
         : theme.palette.background.secondary,
     sectionTitleBackgroundColor:
-      theme.palette.mode === 'light' ? theme.palette.background.surfaces : darkTeal.main
+      theme.palette.mode === 'light' ? theme.palette.background.surfaces : darkTeal.main,
+    fontFamily: theme.typography.fontFamily
+  };
+
+  const appliedStyleProps = {
+    ...defaultStyleProps,
+    ...styleProps
   };
 
   return (
     <>
-      <FiltersCardDiv styleProps={styleProps}>
+      <FiltersCardDiv styleProps={appliedStyleProps}>
         <CatalogFilterSidebarState
           lists={lists}
           onApplyFilters={setData}
           value={value}
-          styleProps={styleProps}
+          styleProps={appliedStyleProps}
         />
       </FiltersCardDiv>
       <FilterDrawerDiv>
@@ -103,7 +113,11 @@ const CatalogFilterSidebar: React.FC<CatalogFilterSidebarProps> = ({
         >
           <Box sx={{ overflowY: 'hidden', height: '90vh' }}>
             <FiltersDrawerHeader>
-              <Typography variant="h6" sx={{ color: theme.palette.text.default }} component="div">
+              <Typography
+                variant="h6"
+                sx={{ color: theme.palette.text.constant?.white }}
+                component="div"
+              >
                 Filters
               </Typography>
               <CloseBtn onClick={handleDrawerClose}>
@@ -114,18 +128,17 @@ const CatalogFilterSidebar: React.FC<CatalogFilterSidebarProps> = ({
               style={{
                 height: '75vh',
                 overflowY: 'auto',
-                background: theme.palette.background.default
+                background: theme.palette.background.surfaces
               }}
             >
               <CatalogFilterSidebarState
                 lists={lists}
                 onApplyFilters={setData}
                 value={value}
-                styleProps={styleProps}
+                styleProps={appliedStyleProps}
               />
             </Box>
-            <Box sx={{ backgroundColor: theme.palette.border.strong, height: '5vh' }} />
-            {/* Use theme-aware color */}
+            <Box sx={{ backgroundColor: SLIGHT_BLUE, height: '5vh' }} />
           </Box>
         </Drawer>
       </FilterDrawerDiv>

diff --git a/src/custom/CatalogFilterSection/FilterSection.tsx b/src/custom/CatalogFilterSection/FilterSection.tsx
@@ -55,9 +55,11 @@ const FilterSection: React.FC<FilterSectionProps> = ({
     <>
       <FilterTitleButton
         onClick={() => onSectionToggle(filterKey)}
-        style={{ backgroundColor: styleProps.sectionTitleBackgroundColor }}
+        style={{
+          backgroundColor: styleProps.sectionTitleBackgroundColor
+        }}
       >
-        <Typography variant="h6" fontWeight="bold">
+        <Typography variant="h6" fontWeight="bold" fontFamily={styleProps.fontFamily}>
           {(sectionDisplayName || filterKey).toUpperCase()}
         </Typography>
         {openSections[filterKey] ? <ExpandLessIcon /> : <ExpandMoreIcon />}
@@ -105,7 +107,7 @@ const FilterSection: React.FC<FilterSectionProps> = ({
 
                 {option.Icon && <option.Icon width="20px" height="20px" />}
 
-                <Typography>{option.label}</Typography>
+                <Typography fontFamily={styleProps.fontFamily}>{option.label}</Typography>
               </Stack>
               <Stack direction="row" alignItems="center" gap="0.35rem">
                 {option.totalCount !== undefined && `(${option.totalCount || 0})`}

diff --git a/src/custom/CatalogFilterSection/style.tsx b/src/custom/CatalogFilterSection/style.tsx
@@ -1,5 +1,6 @@
 import { styled } from '@mui/material/styles';
 import { Box, Button, ListItemButton } from '../../base';
+import { SLIGHT_BLUE } from '../../theme/colors/colors';
 import { StyleProps } from './CatalogFilterSidebar';
 
 export const FiltersCardDiv = styled(Box)<{ styleProps: StyleProps }>(({ styleProps }) => ({
@@ -14,7 +15,8 @@ export const FiltersCardDiv = styled(Box)<{ styleProps: StyleProps }>(({ stylePr
   backgroundColor: styleProps.backgroundColor,
   ['@media (max-width:900px)']: {
     display: 'none'
-  }
+  },
+  fontFamily: styleProps.fontFamily
 }));
 
 export const FilterDrawerDiv = styled('div')(() => ({
@@ -41,15 +43,13 @@ export const FilterButton = styled(Button)(({ theme }) => ({
   }
 }));
 
-export const FiltersDrawerHeader = styled(Box)(({ theme }) => ({
+export const FiltersDrawerHeader = styled(Box)(() => ({
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'center',
   padding: '0.5rem 1rem',
-  backgroundColor: theme.palette.border.strong,
-  height: '10vh',
-  boxShadow: '0px 4px 4px rgba(0, 179, 159, 0.4)',
-  marginBottom: '0.625rem'
+  backgroundColor: SLIGHT_BLUE,
+  height: '10vh'
 }));
 
 export const CheckBoxButton = styled(ListItemButton)(({ theme }) => ({

diff --git a/src/custom/CustomCatalog/custom-card.tsx b/src/custom/CustomCatalog/custom-card.tsx
@@ -190,16 +190,7 @@ const CustomCatalogCard: React.FC<CatalogCardProps> = ({
             <>
               <ClassWrap catalogClassName={pattern?.catalog_data?.content_class ?? ''} />
               <DesignType>{patternType}</DesignType>
-
-              <DesignName
-                style={{
-                  color: '#000D12',
-                  margin: '3rem 0 1.59rem 0',
-                  textAlign: 'center'
-                }}
-              >
-                {pattern.name}
-              </DesignName>
+              <DesignName>{pattern.name}</DesignName>
             </>
           )}
           <DesignDetailsDiv>

diff --git a/src/custom/CustomCatalog/style.tsx b/src/custom/CustomCatalog/style.tsx
@@ -134,20 +134,23 @@ export const MetricsCount = styled('p')(({ theme }) => ({
   color: theme.palette.text.secondary,
   fontWeight: '600'
 }));
-export const DesignName = styled(Typography)(({ theme }) => ({
+export const DesignName = styled(Typography)(() => ({
   fontWeight: 'bold',
   textTransform: 'capitalize',
-  color: theme.palette.text.default,
+  color: '#000D12',
   fontSize: '1.125rem',
   marginTop: '2rem',
-  padding: '0rem 1rem', // "0rem 1.5rem"
+  padding: '0rem 1rem',
   position: 'relative',
   overflow: 'hidden',
   whiteSpace: 'nowrap',
   textOverflow: 'ellipsis',
   textAlign: 'center',
-  width: '100%'
+  width: '100%',
+  margin: '3rem 0 1.59rem 0',
+  fontFamily: 'inherit'
 }));
+
 export const MetricsContainerFront = styled('div')<MetricsProps>(({ isDetailed }) => ({
   display: 'flex',
   justifyContent: 'space-around',

diff --git a/src/custom/StyledSearchBar/StyledSearchBar.tsx b/src/custom/StyledSearchBar/StyledSearchBar.tsx
@@ -1,5 +1,6 @@
 import { SxProps, Theme, useTheme } from '@mui/material';
-import React from 'react';
+import { debounce } from 'lodash';
+import React, { useCallback, useState } from 'react';
 import { InputAdornment } from '../../base';
 import { SearchIcon } from '../../icons';
 import { InputAdornmentEnd, StyledSearchInput } from './style';
@@ -36,14 +37,31 @@ function StyledSearchBar({
   endAdornment
 }: SearchBarProps): JSX.Element {
   const theme = useTheme();
+  const [inputValue, setInputValue] = useState(value);
+
+  const debouncedOnChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      debounce(() => {
+        if (onChange) {
+          onChange(event);
+        }
+      }, 300)();
+    },
+    [onChange]
+  );
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(event.target.value);
+    debouncedOnChange(event);
+  };
 
   return (
     <StyledSearchInput
       type="search"
       label={label}
       fullWidth
-      value={value}
-      onChange={onChange}
+      value={inputValue}
+      onChange={handleChange}
       sx={sx}
       placeholder={placeholder ?? 'Search'}
       startAdornment={