Cleanup transient props 🚀

chicio · Dec 29, 2024 · 816eeb5 · 816eeb5
1 parent 740dc6a
commit 816eeb5
Show file tree

Hide file tree

Showing 13 changed files with 72 additions and 76 deletions.
diff --git a/src/components/design-system/atoms/overlay.tsx b/src/components/design-system/atoms/overlay.tsx
@@ -9,22 +9,22 @@ export interface OverlayProps {
   onClick: () => void;
 }
 
-const StyledOverlay = styled.div<OverlayProps>`
+const StyledOverlay = styled.div<TransientProps<OverlayProps>>`
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: ${(props) => props.zIndex};
+  z-index: ${(props) => props.$zIndex};
   background: rgba(0, 0, 0, 0.6);
   opacity: 0;
-  animation: ${opacity} 0.25s linear ${(props) => `${props.delay}`};
+  animation: ${opacity} 0.25s linear ${(props) => `${props.$delay}`};
   animation-fill-mode: forwards;
   backdrop-filter: blur(4px);
 `;
 
-export const Overlay: FC<OverlayProps> = (props) => {
+export const Overlay: FC<OverlayProps> = ({ zIndex, onClick, delay }) => {
   useLockBodyScroll();
 
-  return <StyledOverlay {...props} />;
+  return <StyledOverlay $zIndex={zIndex} $onClick={onClick} $delay={delay} />;
 };
diff --git a/src/components/design-system/hooks/use-search.ts b/src/components/design-system/hooks/use-search.ts
@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { SearchResult } from "../../../lunr";
+import { SearchResult } from "../lunr";
 
 const hasMinimumCharsToSearch = (query: string): boolean => query.length >= 3;
 

diff --git a/src/lunr.d.ts → src/components/design-system/lunr.d.ts b/src/lunr.d.ts → src/components/design-system/lunr.d.ts
diff --git a/src/components/design-system/molecules/post-card.tsx b/src/components/design-system/molecules/post-card.tsx
@@ -20,7 +20,7 @@ const PostDescription = styled(Paragraph)`
   margin-left: 0;
 `;
 
-const PostCardContainer = styled.div<BigCardProps>`
+const PostCardContainer = styled.div<TransientProps<BigCardProps>>`
   border-radius: 4px;
   margin-top: ${(props) => props.theme.spacing[4]};
   background-color: ${(props) => props.theme.light.generalBackgroundLight};
@@ -36,7 +36,7 @@ const PostCardContainer = styled.div<BigCardProps>`
     }
 
     ${(props) =>
-      !props.big &&
+      !props.$big &&
       css`
         width: 48%;
       `}
@@ -107,7 +107,7 @@ export const PostCard: FC<PostCardProps> = ({
   description,
   trackingCategory,
 }) => (
-  <PostCardContainer big={big} key={slug}>
+  <PostCardContainer $big={big} key={slug}>
     <A>
       <PostCardLink
         to={slug}

diff --git a/src/components/design-system/molecules/project.tsx b/src/components/design-system/molecules/project.tsx
@@ -13,14 +13,16 @@ interface ProjectContainerProps {
   reverse: boolean;
 }
 
-const ProjectContainer = styled(Container)<ProjectContainerProps>`
+const ProjectContainer = styled(Container)<
+  TransientProps<ProjectContainerProps>
+>`
   display: flex;
   flex-direction: column;
   padding: 0;
   margin: ${(props) => props.theme.spacing[7]} auto;
 
   ${mediaQuery.minWidth.md} {
-    flex-direction: ${(props) => (props.reverse ? "row-reverse" : "row")};
+    flex-direction: ${(props) => (props.$reverse ? "row-reverse" : "row")};
     max-width: 1100px;
   }
 `;
@@ -56,7 +58,7 @@ export const Project: FC<ProjectProps> = ({
   features,
   callToActions,
 }) => (
-  <ProjectContainer reverse={reverse}>
+  <ProjectContainer $reverse={reverse}>
     <ProjectImageContainer>
       <GatsbyImage
         style={{

diff --git a/src/components/design-system/molecules/search.tsx b/src/components/design-system/molecules/search.tsx
@@ -7,7 +7,7 @@ import { List } from "../atoms/list";
 import { Paragraph } from "../atoms/paragraph";
 import { Link } from "gatsby";
 import { isIOS } from "react-device-detect";
-import { SearchResult } from "../../../lunr";
+import { SearchResult } from "../lunr";
 import { useSearch } from "../hooks/use-search";
 
 const SearchListContainer = styled(Container)`
@@ -90,7 +90,7 @@ interface StartSearchProps {
   startSearch: boolean;
 }
 
-const SearchAltContainer = styled.span<StartSearchProps>`
+const SearchAltContainer = styled.span<TransientProps<StartSearchProps>>`
   position: absolute;
   top: 50%;
   right: -3px;
@@ -103,14 +103,14 @@ const SearchAltContainer = styled.span<StartSearchProps>`
   }
 
   ${(props) =>
-    props.startSearch &&
+    props.$startSearch &&
     css`
       opacity: 0;
       z-index: -1;
     `}
 `;
 
-const SearchBoxInput = styled.input<StartSearchProps>`
+const SearchBoxInput = styled.input<TransientProps<StartSearchProps>>`
   padding: 10px;
   width: 35px;
   height: 35px;
@@ -129,7 +129,7 @@ const SearchBoxInput = styled.input<StartSearchProps>`
   }
 
   ${(props) =>
-    props.startSearch &&
+    props.$startSearch &&
     css`
       width: 200px;
       background: ${(props) => props.theme.light.generalBackground};
@@ -150,12 +150,12 @@ const SearchBox: FC<
 > = ({ startSearch, onClick, onSearch }) => (
   <SearchBoxContainer>
     <SearchBoxInput
-      startSearch={startSearch}
+      $startSearch={startSearch}
       placeholder={startSearch ? "Search" : ""}
       onChange={(event) => onSearch(event.currentTarget.value)}
       disabled={!startSearch}
     />
-    <SearchAltContainer startSearch={startSearch} onClick={onClick}>
+    <SearchAltContainer $startSearch={startSearch} onClick={onClick}>
       <SearchAlt width={20} height={20} />
     </SearchAltContainer>
   </SearchBoxContainer>

diff --git a/src/components/design-system/molecules/tabs.tsx b/src/components/design-system/molecules/tabs.tsx
@@ -12,7 +12,7 @@ const TabContainer = styled.li`
   width: 50%;
 `;
 
-const TabLink = styled(StandardExternalLink)<TabLinkProps>`
+const TabLink = styled(StandardExternalLink)<TransientProps<TabLinkProps>>`
   font-size: ${(props) => props.theme.fontSizes[4]};
   display: block;
   background-color: ${(props) => props.theme.light.generalBackgroundLight};
@@ -37,7 +37,7 @@ const TabLink = styled(StandardExternalLink)<TabLinkProps>`
   }
 
   ${(props) =>
-    props.active &&
+    props.$active &&
     css`
       background-color: ${(props) => props.theme.light.generalBackground};
       border-right: ${(props) => props.theme.light.generalBackground} 1px solid;
@@ -74,7 +74,7 @@ const Tab: FC<TabProps> = ({
 }) => (
   <TabContainer>
     <TabLink
-      active={active}
+      $active={active}
       href={link}
       onClick={(event) => {
         event.preventDefault();

diff --git a/src/components/design-system/molecules/tag.tsx b/src/components/design-system/molecules/tag.tsx
@@ -8,7 +8,9 @@ interface TagContentProps {
   big: boolean;
 }
 
-const TagLink = styled(StandardInternalLinkWithTracking)<TagContentProps>`
+const TagLink = styled(StandardInternalLinkWithTracking)<
+  TransientProps<TagContentProps>
+>`
   display: inline-block;
   text-decoration: none;
 
@@ -17,24 +19,24 @@ const TagLink = styled(StandardInternalLinkWithTracking)<TagContentProps>`
   }
 
   ${(props) =>
-    props.big === true &&
+    props.$big === true &&
     css`
       margin-bottom: ${(props) => props.theme.spacing[4]};
     `}
 `;
 
-const TagText = styled.span<TagContentProps>`
+const TagText = styled.span<TransientProps<TagContentProps>>`
   background-color: ${(props) => props.theme.light.primaryColor};
   color: ${(props) => props.theme.light.textAbovePrimaryColor};
   margin-right: ${(props) => props.theme.spacing[0]};
   margin-bottom: ${(props) => props.theme.spacing[0]};
   border-radius: 3px;
   font-size: ${(props) =>
-    props.big ? props.theme.fontSizes[5] : props.theme.fontSizes[1]};
+    props.$big ? props.theme.fontSizes[5] : props.theme.fontSizes[1]};
   padding: 0.5px 5px;
 
   ${(props) =>
-    props.big &&
+    props.$big &&
     css`
       display: block;
       margin-right: ${(props) => props.theme.spacing[4]};
@@ -68,8 +70,8 @@ export const Tag: FC<TagProps> = ({
       label: trackingLabel,
     }}
     to={link}
-    big={big}
+    $big={big}
   >
-    <TagText big={big}>{tag}</TagText>
+    <TagText $big={big}>{tag}</TagText>
   </TagLink>
 );
diff --git a/src/components/design-system/organism/blog-header.tsx b/src/components/design-system/organism/blog-header.tsx
@@ -107,13 +107,13 @@ const MobileContainer = styled.div<MobileContainerProps>`
   }
 `;
 
-const Background = styled.div<DesktopHeaderProps>`
+const Background = styled.div<TransientProps<DesktopHeaderProps>>`
   background-image: linear-gradient(
     to bottom,
     ${(props) => props.theme.dark.secondaryColor},
     ${(props) => props.theme.dark.primaryColor}
   );
-  height: ${(props) => (props.big ? "400px" : "220px")};
+  height: ${(props) => (props.$big ? "400px" : "220px")};
   position: absolute;
   top: 0;
   left: 0;
@@ -153,7 +153,7 @@ interface DesktopHeaderProps {
 export const DesktopBlogHeader: FC<DesktopHeaderProps> = ({ big }) => (
   <DesktopContainer>
     <BlogHeader />
-    <Background big={big} />
+    <Background $big={big} />
   </DesktopContainer>
 );
 

diff --git a/src/components/design-system/organism/blog-menu.tsx b/src/components/design-system/organism/blog-menu.tsx
@@ -19,20 +19,14 @@ import { Search } from "../molecules/search";
 
 export const menuHeight = "55px";
 
-interface MobileBlogHeaderContainerProps {
-  hide: boolean;
-}
-
-const MobileBlogHeaderContainer = styled(
-  ContainerFluid,
-)<MobileBlogHeaderContainerProps>`
+const MobileBlogHeaderContainer = styled(ContainerFluid)<{ $hide: boolean }>`
   height: ${menuHeight};
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  transition: opacity 0.2s ease ${(props) => (props.hide ? "0s" : "0.4s")};
-  opacity: ${(props) => (props.hide ? 0 : 1)};
+  transition: opacity 0.2s ease ${(props) => (props.$hide ? "0s" : "0.4s")};
+  opacity: ${(props) => (props.$hide ? 0 : 1)};
 
   ${mediaQuery.minWidth.sm} {
     display: none;
@@ -63,36 +57,30 @@ const MenuButtonContainer = styled.div`
   }
 `;
 
-interface MenuContainerProps {
-  shouldHide: boolean;
-  shouldOpenMenu: boolean;
-  delayOpenCloseMenuAnimation: number;
-}
-
-const MenuContainer = styled.div<MenuContainerProps>`
+const MenuContainer = styled.div<{
+  $shouldHide: boolean;
+  $shouldOpenMenu: boolean;
+  $delayOpenCloseMenuAnimation: number;
+}>`
   background-color: ${(props) => props.theme.light.primaryColorDark};
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
   position: fixed;
-  top: ${(props) => (props.shouldHide ? `-${menuHeight}` : 0)};
+  top: ${(props) => (props.$shouldHide ? `-${menuHeight}` : 0)};
   left: 0;
   right: 0;
   transition:
     top 0.3s ease 0s,
-    height 0.3s ease ${(props) => `${props.delayOpenCloseMenuAnimation}s`};
+    height 0.3s ease ${(props) => `${props.$delayOpenCloseMenuAnimation}s`};
   width: 100%;
   z-index: 300;
-  height: ${(props) => (props.shouldOpenMenu ? "260px" : menuHeight)};
+  height: ${(props) => (props.$shouldOpenMenu ? "260px" : menuHeight)};
 
   ${mediaQuery.dark} {
     background-color: ${(props) => props.theme.dark.primaryColorDark};
   }
 `;
 
-interface NavBarProps {
-  shouldOpenMenu: boolean;
-}
-
-const NavBar = styled(Container)<NavBarProps>`
+const NavBar = styled(Container)`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -247,12 +235,12 @@ export const BlogMenu: FC<MenuProps> = ({ trackingCategory, pathname }) => {
   return (
     <>
       <MenuContainer
-        shouldOpenMenu={shouldOpenMenu}
-        shouldHide={direction === ScrollDirection.down}
-        delayOpenCloseMenuAnimation={shouldOpenMenu ? 0 : 0.4}
+        $shouldOpenMenu={shouldOpenMenu}
+        $shouldHide={direction === ScrollDirection.down}
+        $delayOpenCloseMenuAnimation={shouldOpenMenu ? 0 : 0.4}
       >
-        <NavBar shouldOpenMenu={shouldOpenMenu}>
-          <MobileBlogHeaderContainer hide={startSearch}>
+        <NavBar>
+          <MobileBlogHeaderContainer $hide={startSearch}>
             <MobileBlogHeader height={menuHeight} />
             {shouldOpenMenu && <Divider />}
           </MobileBlogHeaderContainer>

diff --git a/src/components/design-system/organism/modal-with-image.tsx b/src/components/design-system/organism/modal-with-image.tsx
@@ -10,7 +10,7 @@ interface ModalContainerProps {
   zIndex: number;
 }
 
-const ModalContainer = styled.div<ModalContainerProps>`
+const ModalContainer = styled.div<TransientProps<ModalContainerProps>>`
   position: fixed;
   display: flex;
   flex-direction: column;
@@ -20,7 +20,7 @@ const ModalContainer = styled.div<ModalContainerProps>`
   max-width: 100%;
   width: 700px;
   height: 700px;
-  z-index: ${(props) => props.zIndex};
+  z-index: ${(props) => props.$zIndex};
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
@@ -50,7 +50,7 @@ export const ModalWithImage: FC<ModalWithImageProps> = ({
 }) => (
   <>
     <Overlay zIndex={zIndex} onClick={onClick} delay={"0.25s"} />
-    <ModalContainer zIndex={zIndex}>
+    <ModalContainer $zIndex={zIndex}>
       <ModalImage src={imageUrl} alt={imageAlt} />
       <CallToActionExternal onClick={onClick}>Close</CallToActionExternal>
     </ModalContainer>

diff --git a/src/components/design-system/transient-props.d.ts b/src/components/design-system/transient-props.d.ts
@@ -0,0 +1,3 @@
+type TransientProps<T> = {
+  [K in keyof T as `$${K}`]: T[K];
+};
diff --git a/src/components/tracking/standard-internal-link-with-tracking.tsx b/src/components/tracking/standard-internal-link-with-tracking.tsx
@@ -8,15 +8,16 @@ type StandardInternalLinkWithTrackingProps = TrackingElementProps & {
   children?: ReactNode;
 };
 
-export const StandardInternalLinkWithTracking: FC<StandardInternalLinkWithTrackingProps> =
-  ({ children, className, to, trackingData }) => (
-    <StandardInternalLink
-      className={className}
-      to={to}
-      onClick={() => {
-        trackWith(trackingData);
-      }}
-    >
-      {children}
-    </StandardInternalLink>
-  );
+export const StandardInternalLinkWithTracking: FC<
+  StandardInternalLinkWithTrackingProps
+> = ({ children, className, to, trackingData }) => (
+  <StandardInternalLink
+    className={className}
+    to={to}
+    onClick={() => {
+      trackWith(trackingData);
+    }}
+  >
+    {children}
+  </StandardInternalLink>
+);