Merge branch 'master' into update-docs

layer5io · Oct 25, 2024 · 51a8fdd · 51a8fdd
2 parents 92c12ff + 8ffe269
commit 51a8fdd
Show file tree

Hide file tree

Showing 42 changed files with 1,042 additions and 593 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -116,6 +116,7 @@
     "access": "public"
   },
   "dependencies": {
+    "js-yaml": "^4.1.0",
     "lodash": "^4.17.21"
   }
 }
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
@@ -3,6 +3,8 @@ import { useTheme } from '@mui/material/styles';
 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 {
@@ -36,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;
 }
 
 /**
@@ -55,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);
@@ -68,31 +73,54 @@ const CatalogFilterSidebar: React.FC<CatalogFilterSidebarProps> = ({
     setOpenDrawer(false);
   }, []);
 
-  const styleProps: StyleProps = {
-    backgroundColor: theme.palette.background.default,
-    sectionTitleBackgroundColor: theme.palette.background.surfaces
+  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,
+    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>
         <FilterButton variant="contained" onClick={handleDrawerOpen}>
-          <FilterAltIcon height="20" width="20" fill={theme.palette.text.default} />
+          <FilterAltIcon
+            style={{ height: '28px', width: '28px' }}
+            fill={theme.palette.text.default}
+          />
           <FilterText>Filters</FilterText>
         </FilterButton>
 
-        <Drawer anchor="bottom" open={openDrawer} variant="temporary" onClose={handleDrawerClose}>
+        <Drawer
+          anchor="bottom"
+          open={openDrawer}
+          variant="temporary"
+          onClose={handleDrawerClose}
+          style={{ zIndex: '1399' }}
+        >
           <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}>
@@ -103,18 +131,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
@@ -1,20 +1,11 @@
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import { useCallback, useState } from 'react';
-import {
-  Box,
-  Checkbox,
-  Collapse,
-  InputAdornment,
-  List,
-  OutlinedInput,
-  Stack,
-  Typography
-} from '../../base';
-import { SearchIcon } from '../../icons';
+import { Box, Checkbox, Collapse, List, Stack, Typography } from '../../base';
 import { InfoTooltip } from '../CustomTooltip';
+import { StyledSearchBar } from '../StyledSearchBar';
 import { FilterOption, FilterValues, StyleProps } from './CatalogFilterSidebar';
-import { FilterTitleButton, InputAdornmentEnd } from './style';
+import { EndAdornmentText, FilterTitleButton } from './style';
 
 interface FilterSectionProps {
   filterKey: string;
@@ -64,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 />}
@@ -81,22 +74,13 @@ const FilterSection: React.FC<FilterSectionProps> = ({
           }}
         >
           {showSearch && (
-            <Box px={'0.5rem'}>
-              <OutlinedInput
-                type="search"
-                fullWidth
-                placeholder="Search "
+            <Box px={'0.5rem'} mb={'0.5rem'}>
+              <StyledSearchBar
                 value={searchQuery}
                 onChange={handleTextFieldChange}
-                startAdornment={
-                  <InputAdornment position="start">
-                    <SearchIcon />
-                  </InputAdornment>
-                }
+                placeholder="Search"
                 endAdornment={
-                  <InputAdornmentEnd position="end">
-                    Total: {searchedOptions.length}
-                  </InputAdornmentEnd>
+                  <EndAdornmentText> Total : {searchedOptions.length ?? 0}</EndAdornmentText>
                 }
               />
             </Box>
@@ -123,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/index.tsx b/src/custom/CatalogFilterSection/index.tsx
@@ -1,3 +1,4 @@
-import CatalogFilterSidebar from './CatalogFilterSidebar';
+import CatalogFilterSidebar, { FilterList } from './CatalogFilterSidebar';
 
 export { CatalogFilterSidebar };
+export type { FilterList };