Skip to content
This repository was archived by the owner on Jan 19, 2025. It is now read-only.

Commit 816eeb5

Browse files
chiciochicio
committed
Cleanup transient props 🚀
1 parent 740dc6a commit 816eeb5

File tree

13 files changed

+72
-76
lines changed

13 files changed

+72
-76
lines changed

‎src/components/design-system/atoms/overlay.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,22 +9,22 @@ export interface OverlayProps {
99
onClick: () => void;
1010
}
1111

12-
const StyledOverlay = styled.div<OverlayProps>`
12+
const StyledOverlay = styled.div<TransientProps<OverlayProps>>`
1313
position: fixed;
1414
top: 0;
1515
left: 0;
1616
width: 100%;
1717
height: 100%;
18-
z-index: ${(props) => props.zIndex};
18+
z-index: ${(props) => props.$zIndex};
1919
background: rgba(0, 0, 0, 0.6);
2020
opacity: 0;
21-
animation: ${opacity} 0.25s linear ${(props) => `${props.delay}`};
21+
animation: ${opacity} 0.25s linear ${(props) => `${props.$delay}`};
2222
animation-fill-mode: forwards;
2323
backdrop-filter: blur(4px);
2424
`;
2525

26-
export const Overlay: FC<OverlayProps> = (props) => {
26+
export const Overlay: FC<OverlayProps> = ({ zIndex, onClick, delay }) => {
2727
useLockBodyScroll();
2828

29-
return <StyledOverlay {...props} />;
29+
return <StyledOverlay $zIndex={zIndex} $onClick={onClick} $delay={delay} />;
3030
};

‎src/components/design-system/hooks/use-search.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useEffect, useState } from "react";
2-
import { SearchResult } from "../../../lunr";
2+
import { SearchResult } from "../lunr";
33

44
const hasMinimumCharsToSearch = (query: string): boolean => query.length >= 3;
55

src/lunr.d.ts renamed to src/components/design-system/lunr.d.ts

File renamed without changes.

‎src/components/design-system/molecules/post-card.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ const PostDescription = styled(Paragraph)`
2020
margin-left: 0;
2121
`;
2222

23-
const PostCardContainer = styled.div<BigCardProps>`
23+
const PostCardContainer = styled.div<TransientProps<BigCardProps>>`
2424
border-radius: 4px;
2525
margin-top: ${(props) => props.theme.spacing[4]};
2626
background-color: ${(props) => props.theme.light.generalBackgroundLight};
@@ -36,7 +36,7 @@ const PostCardContainer = styled.div<BigCardProps>`
3636
}
3737
3838
${(props) =>
39-
!props.big &&
39+
!props.$big &&
4040
css`
4141
width: 48%;
4242
`}
@@ -107,7 +107,7 @@ export const PostCard: FC<PostCardProps> = ({
107107
description,
108108
trackingCategory,
109109
}) => (
110-
<PostCardContainer big={big} key={slug}>
110+
<PostCardContainer $big={big} key={slug}>
111111
<A>
112112
<PostCardLink
113113
to={slug}

‎src/components/design-system/molecules/project.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,16 @@ interface ProjectContainerProps {
1313
reverse: boolean;
1414
}
1515

16-
const ProjectContainer = styled(Container)<ProjectContainerProps>`
16+
const ProjectContainer = styled(Container)<
17+
TransientProps<ProjectContainerProps>
18+
>`
1719
display: flex;
1820
flex-direction: column;
1921
padding: 0;
2022
margin: ${(props) => props.theme.spacing[7]} auto;
2123
2224
${mediaQuery.minWidth.md} {
23-
flex-direction: ${(props) => (props.reverse ? "row-reverse" : "row")};
25+
flex-direction: ${(props) => (props.$reverse ? "row-reverse" : "row")};
2426
max-width: 1100px;
2527
}
2628
`;
@@ -56,7 +58,7 @@ export const Project: FC<ProjectProps> = ({
5658
features,
5759
callToActions,
5860
}) => (
59-
<ProjectContainer reverse={reverse}>
61+
<ProjectContainer $reverse={reverse}>
6062
<ProjectImageContainer>
6163
<GatsbyImage
6264
style={{

‎src/components/design-system/molecules/search.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { List } from "../atoms/list";
77
import { Paragraph } from "../atoms/paragraph";
88
import { Link } from "gatsby";
99
import { isIOS } from "react-device-detect";
10-
import { SearchResult } from "../../../lunr";
10+
import { SearchResult } from "../lunr";
1111
import { useSearch } from "../hooks/use-search";
1212

1313
const SearchListContainer = styled(Container)`
@@ -90,7 +90,7 @@ interface StartSearchProps {
9090
startSearch: boolean;
9191
}
9292

93-
const SearchAltContainer = styled.span<StartSearchProps>`
93+
const SearchAltContainer = styled.span<TransientProps<StartSearchProps>>`
9494
position: absolute;
9595
top: 50%;
9696
right: -3px;
@@ -103,14 +103,14 @@ const SearchAltContainer = styled.span<StartSearchProps>`
103103
}
104104
105105
${(props) =>
106-
props.startSearch &&
106+
props.$startSearch &&
107107
css`
108108
opacity: 0;
109109
z-index: -1;
110110
`}
111111
`;
112112

113-
const SearchBoxInput = styled.input<StartSearchProps>`
113+
const SearchBoxInput = styled.input<TransientProps<StartSearchProps>>`
114114
padding: 10px;
115115
width: 35px;
116116
height: 35px;
@@ -129,7 +129,7 @@ const SearchBoxInput = styled.input<StartSearchProps>`
129129
}
130130
131131
${(props) =>
132-
props.startSearch &&
132+
props.$startSearch &&
133133
css`
134134
width: 200px;
135135
background: ${(props) => props.theme.light.generalBackground};
@@ -150,12 +150,12 @@ const SearchBox: FC<
150150
> = ({ startSearch, onClick, onSearch }) => (
151151
<SearchBoxContainer>
152152
<SearchBoxInput
153-
startSearch={startSearch}
153+
$startSearch={startSearch}
154154
placeholder={startSearch ? "Search" : ""}
155155
onChange={(event) => onSearch(event.currentTarget.value)}
156156
disabled={!startSearch}
157157
/>
158-
<SearchAltContainer startSearch={startSearch} onClick={onClick}>
158+
<SearchAltContainer $startSearch={startSearch} onClick={onClick}>
159159
<SearchAlt width={20} height={20} />
160160
</SearchAltContainer>
161161
</SearchBoxContainer>

‎src/components/design-system/molecules/tabs.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const TabContainer = styled.li`
1212
width: 50%;
1313
`;
1414

15-
const TabLink = styled(StandardExternalLink)<TabLinkProps>`
15+
const TabLink = styled(StandardExternalLink)<TransientProps<TabLinkProps>>`
1616
font-size: ${(props) => props.theme.fontSizes[4]};
1717
display: block;
1818
background-color: ${(props) => props.theme.light.generalBackgroundLight};
@@ -37,7 +37,7 @@ const TabLink = styled(StandardExternalLink)<TabLinkProps>`
3737
}
3838
3939
${(props) =>
40-
props.active &&
40+
props.$active &&
4141
css`
4242
background-color: ${(props) => props.theme.light.generalBackground};
4343
border-right: ${(props) => props.theme.light.generalBackground} 1px solid;
@@ -74,7 +74,7 @@ const Tab: FC<TabProps> = ({
7474
}) => (
7575
<TabContainer>
7676
<TabLink
77-
active={active}
77+
$active={active}
7878
href={link}
7979
onClick={(event) => {
8080
event.preventDefault();

‎src/components/design-system/molecules/tag.tsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,9 @@ interface TagContentProps {
88
big: boolean;
99
}
1010

11-
const TagLink = styled(StandardInternalLinkWithTracking)<TagContentProps>`
11+
const TagLink = styled(StandardInternalLinkWithTracking)<
12+
TransientProps<TagContentProps>
13+
>`
1214
display: inline-block;
1315
text-decoration: none;
1416
@@ -17,24 +19,24 @@ const TagLink = styled(StandardInternalLinkWithTracking)<TagContentProps>`
1719
}
1820
1921
${(props) =>
20-
props.big === true &&
22+
props.$big === true &&
2123
css`
2224
margin-bottom: ${(props) => props.theme.spacing[4]};
2325
`}
2426
`;
2527

26-
const TagText = styled.span<TagContentProps>`
28+
const TagText = styled.span<TransientProps<TagContentProps>>`
2729
background-color: ${(props) => props.theme.light.primaryColor};
2830
color: ${(props) => props.theme.light.textAbovePrimaryColor};
2931
margin-right: ${(props) => props.theme.spacing[0]};
3032
margin-bottom: ${(props) => props.theme.spacing[0]};
3133
border-radius: 3px;
3234
font-size: ${(props) =>
33-
props.big ? props.theme.fontSizes[5] : props.theme.fontSizes[1]};
35+
props.$big ? props.theme.fontSizes[5] : props.theme.fontSizes[1]};
3436
padding: 0.5px 5px;
3537
3638
${(props) =>
37-
props.big &&
39+
props.$big &&
3840
css`
3941
display: block;
4042
margin-right: ${(props) => props.theme.spacing[4]};
@@ -68,8 +70,8 @@ export const Tag: FC<TagProps> = ({
6870
label: trackingLabel,
6971
}}
7072
to={link}
71-
big={big}
73+
$big={big}
7274
>
73-
<TagText big={big}>{tag}</TagText>
75+
<TagText $big={big}>{tag}</TagText>
7476
</TagLink>
7577
);

‎src/components/design-system/organism/blog-header.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -107,13 +107,13 @@ const MobileContainer = styled.div<MobileContainerProps>`
107107
}
108108
`;
109109

110-
const Background = styled.div<DesktopHeaderProps>`
110+
const Background = styled.div<TransientProps<DesktopHeaderProps>>`
111111
background-image: linear-gradient(
112112
to bottom,
113113
${(props) => props.theme.dark.secondaryColor},
114114
${(props) => props.theme.dark.primaryColor}
115115
);
116-
height: ${(props) => (props.big ? "400px" : "220px")};
116+
height: ${(props) => (props.$big ? "400px" : "220px")};
117117
position: absolute;
118118
top: 0;
119119
left: 0;
@@ -153,7 +153,7 @@ interface DesktopHeaderProps {
153153
export const DesktopBlogHeader: FC<DesktopHeaderProps> = ({ big }) => (
154154
<DesktopContainer>
155155
<BlogHeader />
156-
<Background big={big} />
156+
<Background $big={big} />
157157
</DesktopContainer>
158158
);
159159

‎src/components/design-system/organism/blog-menu.tsx‎

Lines changed: 17 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -19,20 +19,14 @@ import { Search } from "../molecules/search";
1919

2020
export const menuHeight = "55px";
2121

22-
interface MobileBlogHeaderContainerProps {
23-
hide: boolean;
24-
}
25-
26-
const MobileBlogHeaderContainer = styled(
27-
ContainerFluid,
28-
)<MobileBlogHeaderContainerProps>`
22+
const MobileBlogHeaderContainer = styled(ContainerFluid)<{ $hide: boolean }>`
2923
height: ${menuHeight};
3024
display: flex;
3125
flex-direction: column;
3226
justify-content: center;
3327
align-items: center;
34-
transition: opacity 0.2s ease ${(props) => (props.hide ? "0s" : "0.4s")};
35-
opacity: ${(props) => (props.hide ? 0 : 1)};
28+
transition: opacity 0.2s ease ${(props) => (props.$hide ? "0s" : "0.4s")};
29+
opacity: ${(props) => (props.$hide ? 0 : 1)};
3630
3731
${mediaQuery.minWidth.sm} {
3832
display: none;
@@ -63,36 +57,30 @@ const MenuButtonContainer = styled.div`
6357
}
6458
`;
6559

66-
interface MenuContainerProps {
67-
shouldHide: boolean;
68-
shouldOpenMenu: boolean;
69-
delayOpenCloseMenuAnimation: number;
70-
}
71-
72-
const MenuContainer = styled.div<MenuContainerProps>`
60+
const MenuContainer = styled.div<{
61+
$shouldHide: boolean;
62+
$shouldOpenMenu: boolean;
63+
$delayOpenCloseMenuAnimation: number;
64+
}>`
7365
background-color: ${(props) => props.theme.light.primaryColorDark};
7466
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
7567
position: fixed;
76-
top: ${(props) => (props.shouldHide ? `-${menuHeight}` : 0)};
68+
top: ${(props) => (props.$shouldHide ? `-${menuHeight}` : 0)};
7769
left: 0;
7870
right: 0;
7971
transition:
8072
top 0.3s ease 0s,
81-
height 0.3s ease ${(props) => `${props.delayOpenCloseMenuAnimation}s`};
73+
height 0.3s ease ${(props) => `${props.$delayOpenCloseMenuAnimation}s`};
8274
width: 100%;
8375
z-index: 300;
84-
height: ${(props) => (props.shouldOpenMenu ? "260px" : menuHeight)};
76+
height: ${(props) => (props.$shouldOpenMenu ? "260px" : menuHeight)};
8577
8678
${mediaQuery.dark} {
8779
background-color: ${(props) => props.theme.dark.primaryColorDark};
8880
}
8981
`;
9082

91-
interface NavBarProps {
92-
shouldOpenMenu: boolean;
93-
}
94-
95-
const NavBar = styled(Container)<NavBarProps>`
83+
const NavBar = styled(Container)`
9684
display: flex;
9785
flex-direction: column;
9886
align-items: center;
@@ -247,12 +235,12 @@ export const BlogMenu: FC<MenuProps> = ({ trackingCategory, pathname }) => {
247235
return (
248236
<>
249237
<MenuContainer
250-
shouldOpenMenu={shouldOpenMenu}
251-
shouldHide={direction === ScrollDirection.down}
252-
delayOpenCloseMenuAnimation={shouldOpenMenu ? 0 : 0.4}
238+
$shouldOpenMenu={shouldOpenMenu}
239+
$shouldHide={direction === ScrollDirection.down}
240+
$delayOpenCloseMenuAnimation={shouldOpenMenu ? 0 : 0.4}
253241
>
254-
<NavBar shouldOpenMenu={shouldOpenMenu}>
255-
<MobileBlogHeaderContainer hide={startSearch}>
242+
<NavBar>
243+
<MobileBlogHeaderContainer $hide={startSearch}>
256244
<MobileBlogHeader height={menuHeight} />
257245
{shouldOpenMenu && <Divider />}
258246
</MobileBlogHeaderContainer>

0 commit comments

Comments
 (0)