Skip to content

Commit a5347a9

Browse files
amitamrutiyaamitamrutiya
authored
Merge branch 'master' into add-border-rad
2 parents 7f6d226 + 5affa1e commit a5347a9

17 files changed

Lines changed: 246 additions & 81 deletions

File tree

‎package-lock.json‎

Lines changed: 6 additions & 6 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@
7979
"typescript": "^5.3.3"
8080
},
8181
"peerDependencies": {
82-
"@xstate/react": "^4.1.1",
82+
"@xstate/react": "^5.0.2",
8383
"react": "^17.0.2 || ^18.3.1",
8484
"react-dom": "^17.0.2 || ^18.3.1",
8585
"xstate": "^5.18.2"

‎src/custom/Carousel/Carousel.tsx‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import { ChevronLeft, ChevronRight } from '@mui/icons-material';
2+
import React, { ReactNode, useRef } from 'react';
3+
import { CarouselButton, CarouselContainer, CarouselWrapper } from './style';
4+
5+
interface CarouselProps {
6+
items: ReactNode[];
7+
title?: string;
8+
scrollAmount?: number;
9+
showNavButtons?: boolean;
10+
itemClassName?: string;
11+
}
12+
13+
const Carousel: React.FC<CarouselProps> = ({
14+
items,
15+
scrollAmount = 300,
16+
showNavButtons = true,
17+
itemClassName = 'carousel-item'
18+
}) => {
19+
const carouselRef = useRef<HTMLDivElement>(null);
20+
if (!items.length) return null;
21+
22+
const scroll = (direction: 'left' | 'right') => {
23+
if (carouselRef.current) {
24+
carouselRef.current.scrollBy({
25+
left: direction === 'left' ? -scrollAmount : scrollAmount,
26+
behavior: 'smooth'
27+
});
28+
}
29+
};
30+
31+
return (
32+
<CarouselWrapper>
33+
{showNavButtons && (
34+
<CarouselButton onClick={() => scroll('left')}>
35+
<ChevronLeft />
36+
</CarouselButton>
37+
)}
38+
<CarouselContainer ref={carouselRef}>
39+
{items.map((item, index) => (
40+
<div key={`carousel-item-${index}`} className={itemClassName}>
41+
{item}
42+
</div>
43+
))}
44+
</CarouselContainer>
45+
{showNavButtons && (
46+
<CarouselButton onClick={() => scroll('right')}>
47+
<ChevronRight />
48+
</CarouselButton>
49+
)}
50+
</CarouselWrapper>
51+
);
52+
};
53+
54+
export default Carousel;

‎src/custom/Carousel/index.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import Carousel from './Carousel';
2+
3+
export { Carousel };

‎src/custom/Carousel/style.tsx‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { styled } from '../../theme';
2+
3+
export const CarouselButton = styled('button')(({ theme }) => ({
4+
position: 'absolute',
5+
top: '50%',
6+
transform: 'translateY(-50%)',
7+
zIndex: '1',
8+
background: theme.palette.background.paper,
9+
border: 'none',
10+
cursor: 'pointer',
11+
padding: '0.5rem',
12+
borderRadius: '50%',
13+
boxShadow: '0 2px 4px rgba(0, 0, 0, 0.2)',
14+
'&:hover': {
15+
background: theme.palette.primary.main,
16+
color: '#fff'
17+
},
18+
'&:first-of-type': {
19+
left: '-1.2rem'
20+
},
21+
'&:last-of-type': {
22+
right: '-1.2rem'
23+
}
24+
}));
25+
26+
export const CarouselWrapper = styled('div')({
27+
display: 'flex',
28+
alignItems: 'center',
29+
width: '100%',
30+
position: 'relative'
31+
});
32+
33+
export const CarouselContainer = styled('div')({
34+
display: 'flex',
35+
overflowX: 'auto',
36+
scrollBehavior: 'smooth',
37+
scrollSnapType: 'x mandatory',
38+
gap: '1rem',
39+
padding: '1rem 0',
40+
width: '100%',
41+
'&::-webkit-scrollbar': {
42+
display: 'none'
43+
},
44+
'.carousel-item': {
45+
flex: '0 0 auto',
46+
scrollSnapAlign: 'center',
47+
width: 'auto'
48+
}
49+
});

‎src/custom/CatalogDetail/RelatedDesigns.tsx‎

Lines changed: 44 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,83 @@
1+
import { Carousel } from '../Carousel';
12
import { CatalogCardDesignLogo } from '../CustomCatalog';
23
import CustomCatalogCard, { Pattern } from '../CustomCatalog/CustomCard';
34
import { getHeadingText } from './helper';
4-
import { AdditionalContainer, ContentHeading, DesignCardContainer } from './style';
5+
import { AdditionalContainer, ContentHeading } from './style';
56
import { UserProfile } from './types';
6-
77
export interface PatternsPerUser {
88
patterns: Pattern[];
99
}
10-
10+
export interface DetailsByType {
11+
patterns: Pattern[];
12+
}
1113
interface RelatedDesignsProps {
1214
details: Pattern;
1315
type: string;
1416
patternsPerUser: PatternsPerUser;
17+
detailsByType?: DetailsByType;
1518
onSuggestedPatternClick: (pattern: Pattern) => void;
1619
userProfile?: UserProfile;
1720
technologySVGPath: string;
1821
technologySVGSubpath: string;
1922
orgName: string;
2023
fetchingOrgError: boolean;
24+
filterByType?: boolean;
2125
}
2226

2327
const RelatedDesigns: React.FC<RelatedDesignsProps> = ({
2428
details,
2529
type,
2630
patternsPerUser,
31+
detailsByType,
2732
onSuggestedPatternClick,
2833
userProfile,
2934
technologySVGPath,
3035
technologySVGSubpath,
3136
orgName,
32-
fetchingOrgError
37+
fetchingOrgError,
38+
filterByType
3339
}) => {
34-
const filteredPatternsPerUser = patternsPerUser?.patterns?.filter(
35-
(pattern) => pattern.id !== details.id
36-
);
40+
const filteredPatterns = filterByType
41+
? detailsByType?.patterns?.filter((pattern) => pattern.id !== details.id) || []
42+
: patternsPerUser?.patterns?.filter((pattern) => pattern.id !== details.id) || [];
43+
44+
if (!filteredPatterns.length) return null;
45+
const organizationName = filterByType
46+
? 'Similar Designs by Type'
47+
: fetchingOrgError || !orgName
48+
? 'Unknown Organization'
49+
: orgName;
3750

38-
if (!filteredPatternsPerUser?.length) return null;
39-
const organizationName = fetchingOrgError || !orgName ? 'Unknown Organization' : orgName;
51+
const carouselItems = filteredPatterns.map((pattern) => (
52+
<CustomCatalogCard
53+
pattern={pattern}
54+
patternType={type}
55+
onCardClick={() => onSuggestedPatternClick(pattern)}
56+
UserName={`${userProfile?.first_name ?? ''} ${userProfile?.last_name ?? ''}`}
57+
avatarUrl={userProfile?.avatar_url}
58+
basePath={technologySVGPath}
59+
subBasePath={technologySVGSubpath}
60+
cardTechnologies={true}
61+
>
62+
<CatalogCardDesignLogo
63+
imgURL={pattern?.catalog_data?.imageURL}
64+
height={'5.5rem'}
65+
width={'100%'}
66+
zoomEffect={false}
67+
type={{ type: type }}
68+
/>
69+
</CustomCatalogCard>
70+
));
4071
return (
4172
<AdditionalContainer>
4273
<ContentHeading>
4374
<h2 style={{ margin: '0', textTransform: 'uppercase' }}>
44-
{getHeadingText({ type, userProfile, organizationName, fetchingOrgError })}
75+
{filterByType
76+
? organizationName
77+
: getHeadingText({ type, userProfile, organizationName, fetchingOrgError })}
4578
</h2>
4679
</ContentHeading>
47-
<DesignCardContainer>
48-
{filteredPatternsPerUser.map((pattern, index) => (
49-
<CustomCatalogCard
50-
key={`design-${index}`}
51-
pattern={pattern}
52-
patternType={type}
53-
onCardClick={() => onSuggestedPatternClick(pattern)}
54-
UserName={`${userProfile?.first_name ?? ''} ${userProfile?.last_name ?? ''}`}
55-
avatarUrl={userProfile?.avatar_url}
56-
basePath={technologySVGPath}
57-
subBasePath={technologySVGSubpath}
58-
cardTechnologies={true}
59-
>
60-
<CatalogCardDesignLogo
61-
imgURL={pattern?.catalog_data?.imageURL}
62-
height={'7.5rem'}
63-
width={'100%'}
64-
zoomEffect={false}
65-
type={{ type: type }}
66-
/>
67-
</CustomCatalogCard>
68-
))}
69-
</DesignCardContainer>
80+
<Carousel items={carouselItems} scrollAmount={300} />
7081
</AdditionalContainer>
7182
);
7283
};

‎src/custom/CatalogDetail/RightPanel.tsx‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,12 @@ import { Pattern } from '../CustomCatalog/CustomCard';
33
import { VIEW_VISIBILITY } from '../VisibilityChipMenu/VisibilityChipMenu';
44
import CaveatsSection from './CaveatsSection';
55
import OverviewSection from './OverviewSection';
6-
import RelatedDesigns, { PatternsPerUser } from './RelatedDesigns';
6+
import RelatedDesigns, { DetailsByType, PatternsPerUser } from './RelatedDesigns';
77
import { Class } from './types';
88

99
interface RightPanelProps {
1010
details: Pattern;
11+
detailsByType: DetailsByType;
1112
type: string;
1213
cardId?: string;
1314
title: string;
@@ -35,6 +36,7 @@ interface RightPanelProps {
3536

3637
const RightPanel: React.FC<RightPanelProps> = ({
3738
details,
39+
detailsByType,
3840
type,
3941
cardId = details.id,
4042
title,
@@ -64,7 +66,7 @@ const RightPanel: React.FC<RightPanelProps> = ({
6466
});
6567

6668
return (
67-
<div style={{ fontFamily }}>
69+
<div>
6870
<OverviewSection
6971
details={details}
7072
type={cleanedType}
@@ -86,6 +88,7 @@ const RightPanel: React.FC<RightPanelProps> = ({
8688
{showCaveats && <CaveatsSection details={details} />}
8789
<RelatedDesigns
8890
details={details}
91+
detailsByType={detailsByType}
8992
orgName={orgName}
9093
fetchingOrgError={fetchingOrgError}
9194
type={type}
@@ -94,6 +97,20 @@ const RightPanel: React.FC<RightPanelProps> = ({
9497
userProfile={userProfile}
9598
technologySVGPath={technologySVGPath}
9699
technologySVGSubpath={technologySVGSubpath}
100+
filterByType={false}
101+
/>
102+
<RelatedDesigns
103+
details={details}
104+
detailsByType={detailsByType}
105+
orgName={orgName}
106+
fetchingOrgError={fetchingOrgError}
107+
type={type}
108+
patternsPerUser={patternsPerUser}
109+
onSuggestedPatternClick={onSuggestedPatternClick}
110+
userProfile={userProfile}
111+
technologySVGPath={technologySVGPath}
112+
technologySVGSubpath={technologySVGSubpath}
113+
filterByType={true}
97114
/>
98115
</div>
99116
);

‎src/custom/CustomCatalog/CustomCard.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@ const ClassWrap = ({ catalogClassName }: { catalogClassName: string }) => {
114114
const CustomCatalogCard: React.FC<CatalogCardProps> = ({
115115
pattern,
116116
patternType,
117-
cardHeight = '18rem',
117+
cardHeight = '16.5rem',
118118
cardWidth = '15rem',
119119
cardStyles,
120120
shouldFlip = true,
@@ -280,7 +280,7 @@ const CustomCatalogCard: React.FC<CatalogCardProps> = ({
280280
</DesignDetailsDiv>
281281

282282
{isDetailed && (
283-
<DesignDetailsDiv style={{ marginTop: '40px' }}>
283+
<DesignDetailsDiv style={{ marginTop: '20px' }}>
284284
<Grid container style={{ justifyContent: 'space-between', alignItems: 'center' }}>
285285
<Grid
286286
item

‎src/custom/CustomCatalog/Helper.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ export const handleImage = async ({
6161
export const DEFAULT_DESIGN_VERSION = '0.0.0';
6262

6363
export const getVersion = (design: Pattern) => {
64-
if (design.visibility === 'published') {
64+
if (design.visibility === 'public') {
6565
return design?.catalog_data?.published_version || DEFAULT_DESIGN_VERSION;
6666
}
6767
try {

‎src/custom/CustomCatalog/style.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ export const DesignCard = styled('div')<DesignCardProps>(
9393
}),
9494
...(isDetailed && {
9595
[theme.breakpoints.down('lg')]: {
96-
height: '18.75rem'
96+
height: '16.75rem'
9797
}
9898
}),
9999
...outerStyles
@@ -150,7 +150,7 @@ export const DesignName = styled(Typography)(({ theme }) => ({
150150
textOverflow: 'ellipsis',
151151
textAlign: 'center',
152152
width: '100%',
153-
margin: '3rem 0 1.59rem 0',
153+
margin: '2rem 0 1.59rem 0',
154154
fontFamily: 'inherit'
155155
}));
156156

0 commit comments

Comments
 (0)