Skip to content

Commit d5104dd

Browse files
amitamrutiyaamitamrutiya
authored
Merge pull request #761 from amitamrutiya/filter-theme
Update filter theme and add debouncing on the search bar
2 parents 6e26e94 + 7a53c92 commit d5104dd

13 files changed

Lines changed: 151 additions & 81 deletions

File tree

‎src/base/Skeleton/Skeleton.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { Skeleton as MuiSkeleton, type SkeletonProps as MuiSkeletonProps } from '@mui/material';
2+
3+
export function Skeleton(props: MuiSkeletonProps): JSX.Element {
4+
return <MuiSkeleton {...props} />;
5+
}
6+
7+
export default Skeleton;

‎src/base/Skeleton/index.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { SkeletonProps } from '@mui/material';
2+
import Skeleton from './Skeleton';
3+
4+
export { Skeleton };
5+
export type { SkeletonProps };

‎src/base/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ export * from './Paper';
5555
export * from './Popper';
5656
export * from './RadioGroup';
5757
export * from './Select';
58+
export * from './Skeleton';
5859
export * from './Slide';
5960
export * from './Stack';
6061
export * from './Switch';

‎src/custom/CatalogCard/CatalogCard.tsx‎

Lines changed: 41 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,6 @@ type CatalogCardProps = {
3333
// eslint-disable-next-line @typescript-eslint/no-explicit-any
3434
pattern: any;
3535
patternType: string;
36-
cardLink: string;
3736
cardHeight: string;
3837
cardWidth: string;
3938
cardStyles: React.CSSProperties;
@@ -64,7 +63,6 @@ const CatalogCard: React.FC<CatalogCardProps> = ({
6463
cardHeight,
6564
cardWidth,
6665
cardStyles,
67-
cardLink,
6866
onCardClick
6967
}) => {
7068
const outerStyles = {
@@ -73,49 +71,47 @@ const CatalogCard: React.FC<CatalogCardProps> = ({
7371
...cardStyles
7472
};
7573
return (
76-
<DesignCardUrl href={cardLink} onClick={onCardClick} target="_blank" rel="noreferrer">
77-
<DesignCard outerStyles={outerStyles}>
78-
<DesignInnerCard className="innerCard">
79-
<ClassWrap catalogClassName={pattern?.catalog_data?.content_class} />
80-
<DesignType>{patternType}</DesignType>
81-
<DesignDetailsDiv>
82-
<DesignName
83-
style={{
84-
margin: '3rem 0 1.59rem 0',
85-
textAlign: 'center'
86-
}}
87-
>
88-
{pattern.name}
89-
</DesignName>
90-
<ImageWrapper>
91-
<DesignIcon height={'118'} width={'120'} />
92-
</ImageWrapper>
93-
</DesignDetailsDiv>
94-
<MetricsContainerFront>
95-
<MetricsDiv>
96-
<DownloadIcon width={18} height={18} />
97-
<MetricsCount>{pattern.download_count}</MetricsCount>
98-
</MetricsDiv>
99-
<MetricsDiv>
100-
<CloneIcon width={18} height={18} fill={'#51636B'} />
101-
<MetricsCount>{pattern.clone_count}</MetricsCount>
102-
</MetricsDiv>
103-
<MetricsDiv>
104-
<OpenIcon width={18} height={18} fill={'#51636B'} />
105-
<MetricsCount>{pattern.view_count}</MetricsCount>
106-
</MetricsDiv>
107-
<MetricsDiv>
108-
<DeploymentsIcon width={18} height={18} />
109-
<MetricsCount>{pattern.deployment_count}</MetricsCount>
110-
</MetricsDiv>
111-
<MetricsDiv>
112-
<ShareIcon width={18} height={18} fill={'#51636B'} />
113-
<MetricsCount>{pattern.share_count}</MetricsCount>
114-
</MetricsDiv>
115-
</MetricsContainerFront>
116-
</DesignInnerCard>
117-
</DesignCard>
118-
</DesignCardUrl>
74+
<DesignCard outerStyles={outerStyles} onClick={onCardClick}>
75+
<DesignInnerCard className="innerCard">
76+
<ClassWrap catalogClassName={pattern?.catalog_data?.content_class} />
77+
<DesignType>{patternType}</DesignType>
78+
<DesignDetailsDiv>
79+
<DesignName
80+
style={{
81+
margin: '3rem 0 1.59rem 0',
82+
textAlign: 'center'
83+
}}
84+
>
85+
{pattern.name}
86+
</DesignName>
87+
<ImageWrapper>
88+
<DesignIcon height={'118'} width={'120'} />
89+
</ImageWrapper>
90+
</DesignDetailsDiv>
91+
<MetricsContainerFront>
92+
<MetricsDiv>
93+
<DownloadIcon width={18} height={18} />
94+
<MetricsCount>{pattern.download_count}</MetricsCount>
95+
</MetricsDiv>
96+
<MetricsDiv>
97+
<CloneIcon width={18} height={18} fill={'#51636B'} />
98+
<MetricsCount>{pattern.clone_count}</MetricsCount>
99+
</MetricsDiv>
100+
<MetricsDiv>
101+
<OpenIcon width={18} height={18} fill={'#51636B'} />
102+
<MetricsCount>{pattern.view_count}</MetricsCount>
103+
</MetricsDiv>
104+
<MetricsDiv>
105+
<DeploymentsIcon width={18} height={18} />
106+
<MetricsCount>{pattern.deployment_count}</MetricsCount>
107+
</MetricsDiv>
108+
<MetricsDiv>
109+
<ShareIcon width={18} height={18} fill={'#51636B'} />
110+
<MetricsCount>{pattern.share_count}</MetricsCount>
111+
</MetricsDiv>
112+
</MetricsContainerFront>
113+
</DesignInnerCard>
114+
</DesignCard>
119115
);
120116
};
121117

‎src/custom/CatalogFilterSection/CatalogFilterSidebar.tsx‎

Lines changed: 23 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { useCallback, useState } from 'react';
44
import { Box, Drawer, Typography } from '../../base';
55
import { CloseIcon } from '../../icons';
66
import { darkTeal } from '../../theme';
7+
import { SLIGHT_BLUE } from '../../theme/colors/colors';
78
import { CloseBtn } from '../Modal';
89
import CatalogFilterSidebarState from './CatalogFilterSidebarState';
910
import {
@@ -37,13 +38,15 @@ export interface CatalogFilterSidebarProps {
3738
setData: (callback: (prevFilters: FilterValues) => FilterValues) => void;
3839
lists: FilterList[];
3940
value?: FilterValues;
41+
styleProps?: StyleProps;
4042
}
4143

4244
export type FilterValues = Record<string, string | string[]>;
4345

4446
export interface StyleProps {
4547
backgroundColor?: string;
4648
sectionTitleBackgroundColor?: string;
49+
fontFamily?: string;
4750
}
4851

4952
/**
@@ -56,7 +59,8 @@ export interface StyleProps {
5659
const CatalogFilterSidebar: React.FC<CatalogFilterSidebarProps> = ({
5760
lists,
5861
setData,
59-
value = {}
62+
value = {},
63+
styleProps
6064
}) => {
6165
const theme = useTheme(); // Get the current theme
6266
const [openDrawer, setOpenDrawer] = useState<boolean>(false);
@@ -69,23 +73,29 @@ const CatalogFilterSidebar: React.FC<CatalogFilterSidebarProps> = ({
6973
setOpenDrawer(false);
7074
}, []);
7175

72-
const styleProps: StyleProps = {
76+
const defaultStyleProps: StyleProps = {
7377
backgroundColor:
7478
theme.palette.mode === 'light'
7579
? theme.palette.background.default
7680
: theme.palette.background.secondary,
7781
sectionTitleBackgroundColor:
78-
theme.palette.mode === 'light' ? theme.palette.background.surfaces : darkTeal.main
82+
theme.palette.mode === 'light' ? theme.palette.background.surfaces : darkTeal.main,
83+
fontFamily: theme.typography.fontFamily
84+
};
85+
86+
const appliedStyleProps = {
87+
...defaultStyleProps,
88+
...styleProps
7989
};
8090

8191
return (
8292
<>
83-
<FiltersCardDiv styleProps={styleProps}>
93+
<FiltersCardDiv styleProps={appliedStyleProps}>
8494
<CatalogFilterSidebarState
8595
lists={lists}
8696
onApplyFilters={setData}
8797
value={value}
88-
styleProps={styleProps}
98+
styleProps={appliedStyleProps}
8999
/>
90100
</FiltersCardDiv>
91101
<FilterDrawerDiv>
@@ -103,7 +113,11 @@ const CatalogFilterSidebar: React.FC<CatalogFilterSidebarProps> = ({
103113
>
104114
<Box sx={{ overflowY: 'hidden', height: '90vh' }}>
105115
<FiltersDrawerHeader>
106-
<Typography variant="h6" sx={{ color: theme.palette.text.default }} component="div">
116+
<Typography
117+
variant="h6"
118+
sx={{ color: theme.palette.text.constant?.white }}
119+
component="div"
120+
>
107121
Filters
108122
</Typography>
109123
<CloseBtn onClick={handleDrawerClose}>
@@ -114,18 +128,17 @@ const CatalogFilterSidebar: React.FC<CatalogFilterSidebarProps> = ({
114128
style={{
115129
height: '75vh',
116130
overflowY: 'auto',
117-
background: theme.palette.background.default
131+
background: theme.palette.background.surfaces
118132
}}
119133
>
120134
<CatalogFilterSidebarState
121135
lists={lists}
122136
onApplyFilters={setData}
123137
value={value}
124-
styleProps={styleProps}
138+
styleProps={appliedStyleProps}
125139
/>
126140
</Box>
127-
<Box sx={{ backgroundColor: theme.palette.border.strong, height: '5vh' }} />
128-
{/* Use theme-aware color */}
141+
<Box sx={{ backgroundColor: SLIGHT_BLUE, height: '5vh' }} />
129142
</Box>
130143
</Drawer>
131144
</FilterDrawerDiv>

‎src/custom/CatalogFilterSection/FilterSection.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -55,9 +55,11 @@ const FilterSection: React.FC<FilterSectionProps> = ({
5555
<>
5656
<FilterTitleButton
5757
onClick={() => onSectionToggle(filterKey)}
58-
style={{ backgroundColor: styleProps.sectionTitleBackgroundColor }}
58+
style={{
59+
backgroundColor: styleProps.sectionTitleBackgroundColor
60+
}}
5961
>
60-
<Typography variant="h6" fontWeight="bold">
62+
<Typography variant="h6" fontWeight="bold" fontFamily={styleProps.fontFamily}>
6163
{(sectionDisplayName || filterKey).toUpperCase()}
6264
</Typography>
6365
{openSections[filterKey] ? <ExpandLessIcon /> : <ExpandMoreIcon />}
@@ -105,7 +107,7 @@ const FilterSection: React.FC<FilterSectionProps> = ({
105107

106108
{option.Icon && <option.Icon width="20px" height="20px" />}
107109

108-
<Typography>{option.label}</Typography>
110+
<Typography fontFamily={styleProps.fontFamily}>{option.label}</Typography>
109111
</Stack>
110112
<Stack direction="row" alignItems="center" gap="0.35rem">
111113
{option.totalCount !== undefined && `(${option.totalCount || 0})`}

‎src/custom/CatalogFilterSection/style.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { styled } from '@mui/material/styles';
22
import { Box, Button, ListItemButton } from '../../base';
3+
import { SLIGHT_BLUE } from '../../theme/colors/colors';
34
import { StyleProps } from './CatalogFilterSidebar';
45

56
export const FiltersCardDiv = styled(Box)<{ styleProps: StyleProps }>(({ styleProps }) => ({
@@ -14,7 +15,8 @@ export const FiltersCardDiv = styled(Box)<{ styleProps: StyleProps }>(({ stylePr
1415
backgroundColor: styleProps.backgroundColor,
1516
['@media (max-width:900px)']: {
1617
display: 'none'
17-
}
18+
},
19+
fontFamily: styleProps.fontFamily
1820
}));
1921

2022
export const FilterDrawerDiv = styled('div')(() => ({
@@ -41,15 +43,13 @@ export const FilterButton = styled(Button)(({ theme }) => ({
4143
}
4244
}));
4345

44-
export const FiltersDrawerHeader = styled(Box)(({ theme }) => ({
46+
export const FiltersDrawerHeader = styled(Box)(() => ({
4547
display: 'flex',
4648
justifyContent: 'space-between',
4749
alignItems: 'center',
4850
padding: '0.5rem 1rem',
49-
backgroundColor: theme.palette.border.strong,
50-
height: '10vh',
51-
boxShadow: '0px 4px 4px rgba(0, 179, 159, 0.4)',
52-
marginBottom: '0.625rem'
51+
backgroundColor: SLIGHT_BLUE,
52+
height: '10vh'
5353
}));
5454

5555
export const CheckBoxButton = styled(ListItemButton)(({ theme }) => ({

‎src/custom/CustomCatalog/custom-card.tsx‎

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -190,16 +190,7 @@ const CustomCatalogCard: React.FC<CatalogCardProps> = ({
190190
<>
191191
<ClassWrap catalogClassName={pattern?.catalog_data?.content_class ?? ''} />
192192
<DesignType>{patternType}</DesignType>
193-
194-
<DesignName
195-
style={{
196-
color: '#000D12',
197-
margin: '3rem 0 1.59rem 0',
198-
textAlign: 'center'
199-
}}
200-
>
201-
{pattern.name}
202-
</DesignName>
193+
<DesignName>{pattern.name}</DesignName>
203194
</>
204195
)}
205196
<DesignDetailsDiv>

‎src/custom/CustomCatalog/style.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -134,20 +134,23 @@ export const MetricsCount = styled('p')(({ theme }) => ({
134134
color: theme.palette.text.secondary,
135135
fontWeight: '600'
136136
}));
137-
export const DesignName = styled(Typography)(({ theme }) => ({
137+
export const DesignName = styled(Typography)(() => ({
138138
fontWeight: 'bold',
139139
textTransform: 'capitalize',
140-
color: theme.palette.text.default,
140+
color: '#000D12',
141141
fontSize: '1.125rem',
142142
marginTop: '2rem',
143-
padding: '0rem 1rem', // "0rem 1.5rem"
143+
padding: '0rem 1rem',
144144
position: 'relative',
145145
overflow: 'hidden',
146146
whiteSpace: 'nowrap',
147147
textOverflow: 'ellipsis',
148148
textAlign: 'center',
149-
width: '100%'
149+
width: '100%',
150+
margin: '3rem 0 1.59rem 0',
151+
fontFamily: 'inherit'
150152
}));
153+
151154
export const MetricsContainerFront = styled('div')<MetricsProps>(({ isDetailed }) => ({
152155
display: 'flex',
153156
justifyContent: 'space-around',

‎src/custom/StyledSearchBar/StyledSearchBar.tsx‎

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { SxProps, Theme, useTheme } from '@mui/material';
2-
import React from 'react';
2+
import { debounce } from 'lodash';
3+
import React, { useCallback, useState } from 'react';
34
import { InputAdornment } from '../../base';
45
import { SearchIcon } from '../../icons';
56
import { InputAdornmentEnd, StyledSearchInput } from './style';
@@ -36,14 +37,31 @@ function StyledSearchBar({
3637
endAdornment
3738
}: SearchBarProps): JSX.Element {
3839
const theme = useTheme();
40+
const [inputValue, setInputValue] = useState(value);
41+
42+
const debouncedOnChange = useCallback(
43+
(event: React.ChangeEvent<HTMLInputElement>) => {
44+
debounce(() => {
45+
if (onChange) {
46+
onChange(event);
47+
}
48+
}, 300)();
49+
},
50+
[onChange]
51+
);
52+
53+
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
54+
setInputValue(event.target.value);
55+
debouncedOnChange(event);
56+
};
3957

4058
return (
4159
<StyledSearchInput
4260
type="search"
4361
label={label}
4462
fullWidth
45-
value={value}
46-
onChange={onChange}
63+
value={inputValue}
64+
onChange={handleChange}
4765
sx={sx}
4866
placeholder={placeholder ?? 'Search'}
4967
startAdornment={

0 commit comments

Comments
 (0)