refactor: convert all PropFilter usage to transient props

src/components/Elements/Pagination.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect } from 'react'
 import styled, { css } from 'styled-components'
 import { IoIosArrowBack, IoIosArrowForward } from 'react-icons/io'
-import PropFilter from 'src/utils/PropFilter'
 
 const PaginationWrapper = styled.div`
   display: flex;
@@ -18,12 +17,10 @@ const PaginationWrapper = styled.div`
 `
 
 interface PaginationButtonProps {
-  isActive: boolean
+  $isActive: boolean
 }
 
-const PaginationButton = styled(
-  PropFilter('button')(['isActive'])
-)<PaginationButtonProps>`
+const PaginationButton = styled.button<PaginationButtonProps>`
   position: relative;
   border: none;
   display: flex;
@@ -33,7 +30,7 @@ const PaginationButton = styled(
   padding: 0.625rem 0.75rem;
   color: var(--sc-color-carnation);
   font-weight: 600;
-  cursor: ${(props) => (props.isActive ? 'default' : 'pointer')};
+  cursor: ${($isActive) => ($isActive ? 'default' : 'pointer')};
 
   &:hover::after {
     transition:
@@ -60,8 +57,8 @@ const PaginationButton = styled(
     opacity: 0;
   }
 
-  ${(props) =>
-    props.isActive &&
+  ${($isActive) =>
+    $isActive &&
     css`
       &:after {
         transition:
@@ -170,7 +167,7 @@ const Pagination: React.FC<PaginationProps> = ({
         <PaginationButton
           key={i}
           onClick={() => handlePageChange(i)}
-          isActive={i === currentPage}
+          $isActive={i === currentPage}
         >
           {i}
         </PaginationButton>

src/components/Homepage/NewsletterSignup.tsx

@@ -2,11 +2,8 @@
 
 import React, { useState, ChangeEvent, FormEvent } from 'react'
 import styled, { keyframes } from 'styled-components'
-import PropFilter from 'src/utils/PropFilter'
 import Button from '@/components/Elements/Button'
 
-const formFilter = PropFilter('form')
-
 const NewsletterContainer = styled.div`
   text-align: center;
   padding: 20px;
@@ -26,14 +23,14 @@ const NewsletterSubtitle = styled.p`
 `
 
 interface NewsletterFormProps {
-  isVisible: boolean
+  $isVisible: boolean
 }
 
-const NewsletterForm = styled(formFilter(['isVisible']))<NewsletterFormProps>`
+const NewsletterForm = styled.form<NewsletterFormProps>`
   display: flex;
   justify-content: center;
   gap: 10px;
-  opacity: ${(props) => (props.isVisible ? 1 : 0)};
+  opacity: ${($isVisible) => ($isVisible ? 1 : 0)};
   transition: opacity 0.5s ease;
 `
 
@@ -103,7 +100,7 @@ const NewsletterSignup: React.FC = () => {
           Thanks for subscribing to our newsletter!
         </SuccessMessage>
       ) : (
-        <NewsletterForm isVisible={!submitted} onSubmit={handleSubmit}>
+        <NewsletterForm $isVisible={!submitted} onSubmit={handleSubmit}>
           <NewsletterInput
             type="email"
             placeholder="Enter your email"

src/components/Loaders/LoaderSpin.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import styled, { keyframes } from 'styled-components'
-import PropFilter from 'src/utils/PropFilter'
 
 const spin = keyframes`
   0% {
@@ -21,17 +20,15 @@ const spinner = keyframes`
 `
 
 interface LoaderSpinnerProps {
-  isLoading: boolean
+  $isLoading: boolean
 }
 
-const LoaderSpinner = styled(
-  PropFilter('div')(['isLoading'])
-)<LoaderSpinnerProps>`
+const LoaderSpinner = styled.div<LoaderSpinnerProps>`
   position: absolute;
   justify-content: center;
   align-items: center;
-  opacity: ${({ isLoading }) => (isLoading ? 1 : 0)};
-  display: ${({ isLoading }) => (isLoading ? 'flex' : 'none')};
+  opacity: ${({ $isLoading }) => ($isLoading ? 1 : 0)};
+  display: ${({ $isLoading }) => ($isLoading ? 'flex' : 'none')};
   transition: opacity 0.3s ease-in-out;
 
   & > div {
@@ -64,7 +61,7 @@ interface LoaderSpinProps {
 }
 
 const LoaderSpin: React.FC<LoaderSpinProps> = ({ isLoading }) => (
-  <LoaderSpinner isLoading={isLoading}>
+  <LoaderSpinner $isLoading={isLoading}>
     <InnerDiv>
       <svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" x="0" y="0">
         <circle

src/components/Products/FilterPanel.tsx

@@ -2,7 +2,6 @@ import React, { useState, useEffect, useRef, useCallback } from 'react'
 import ReactDOM from 'react-dom'
 import styled, { keyframes } from 'styled-components'
 import Checkbox from '@/components/Elements/Checkbox'
-import PropFilter from 'src/utils/PropFilter'
 import Cancel from '@/public/images/icons/cancel.svg'
 import Accordion from '@/components/Elements/Accordion'
 import AccordionItem from '@/components/Elements/AccordionItem'
@@ -45,8 +44,8 @@ const slideOut = keyframes`
   }
 `
 
-const PanelContainer = styled(PropFilter('div')(['isOpen']))<{
-  isOpen: boolean
+const PanelContainer = styled.div<{
+  $isOpen: boolean
 }>`
   position: absolute;
   top: 0;
@@ -61,23 +60,24 @@ const PanelContainer = styled(PropFilter('div')(['isOpen']))<{
   overflow-y: hidden;
   display: flex;
   flex-direction: column;
-  animation: ${({ isOpen }) => (isOpen ? slideIn : slideOut)} 0.3s ease forwards;
+  animation: ${({ $isOpen }) => ($isOpen ? slideIn : slideOut)} 0.3s ease
+    forwards;
 
   @media (max-width: 768px) {
     width: auto;
   }
 `
 
-const Backdrop = styled(PropFilter('div')(['isOpen']))<{ isOpen: boolean }>`
+const Backdrop = styled.div<{ $isOpen: boolean }>`
   position: fixed;
   inset: 0;
   background-color: rgba(51, 51, 51, 0.8);
   backdrop-filter: blur(4px);
   z-index: 300;
   height: 100vh;
-  opacity: ${({ isOpen }) => (isOpen ? '1' : '0')};
+  opacity: ${({ $isOpen }) => ($isOpen ? '1' : '0')};
   transition: opacity 0.3s ease-in-out;
-  pointer-events: ${({ isOpen }) => (isOpen ? 'auto' : 'none')};
+  pointer-events: ${({ $isOpen }) => ($isOpen ? 'auto' : 'none')};
 `
 
 const CloseButton = styled.button`
@@ -235,10 +235,10 @@ const FilterPanel: React.FC<FilterPanelProps> = ({
       {isMounted &&
         shouldRender &&
         ReactDOM.createPortal(
-          <Backdrop isOpen={isOpen} onClick={onClose}>
+          <Backdrop $isOpen={isOpen} onClick={onClose}>
             <PanelContainer
               ref={panelRef}
-              isOpen={isOpen}
+              $isOpen={isOpen}
               onClick={(e) => e.stopPropagation()}
             >
               <Header>

src/components/Products/VoteButton.tsx

@@ -2,7 +2,6 @@ import React, { useState, useEffect } from 'react'
 import styled from 'styled-components'
 import { LiaThumbsUpSolid, LiaThumbsDownSolid } from 'react-icons/lia'
 import LoaderSpin from '@/components/Loaders/LoaderSpin'
-import PropFilter from 'src/utils/PropFilter'
 
 interface VoteButtonProps {
   reviewId: string
@@ -41,18 +40,18 @@ const Button = styled.button`
   }
 `
 
-const ThumbsIcon = styled(PropFilter('div')(['loading']))<{
-  loading: boolean
+const ThumbsIcon = styled.div<{
+  $loading: boolean
 }>`
   font-size: 22px;
-  opacity: ${({ loading }) => (loading ? 0.2 : 1)};
+  opacity: ${({ $loading }) => ($loading ? 0.2 : 1)};
   transition: transform 0.3s;
 `
 
-const Count = styled(PropFilter('span')(['loading']))<{
-  loading: boolean
+const Count = styled.span<{
+  $loading: boolean
 }>`
-  opacity: ${({ loading }) => (loading ? 0.2 : 1)};
+  opacity: ${({ $loading }) => ($loading ? 0.2 : 1)};
   transition: transform 0.3s;
 `
 
@@ -97,10 +96,10 @@ const VoteButton: React.FC<VoteButtonProps> = ({
       }}
       disabled={disabled || loading}
     >
-      <ThumbsIcon loading={loading}>
+      <ThumbsIcon $loading={loading}>
         {type === 'upvote' ? <LiaThumbsUpSolid /> : <LiaThumbsDownSolid />}
       </ThumbsIcon>
-      <Count loading={loading}>{voteCount}</Count>
+      <Count $loading={loading}>{voteCount}</Count>
       <LoaderSpin isLoading={loading} />
     </Button>
   )

src/components/Shopping/AddToFavoritesButton.tsx

@@ -5,10 +5,6 @@ import { useRouter } from 'next/navigation'
 import { UserContext } from '@/context/UserContext'
 import { useFavorites } from '@/context/FavoritesContext'
 import Popover from '@/components/Elements/Popover'
-import PropFilter from 'src/utils/PropFilter'
-
-const FilteredLiaHeart = PropFilter(LiaHeart)(['loading', 'isAdding'])
-const FilteredLiaHeartSolid = PropFilter(LiaHeartSolid)(['loading', 'isAdding'])
 
 const loadingAnimation = keyframes`
   0% {
@@ -42,23 +38,23 @@ const Button = styled.button`
 `
 
 interface IconProps {
-  loading?: boolean
-  isAdding?: boolean
+  $loading?: boolean
+  $isAdding?: boolean
 }
 
-const IconOutline = styled(FilteredLiaHeart)<IconProps>`
-  ${({ loading, isAdding }) =>
-    loading &&
-    isAdding &&
+const IconOutline = styled(LiaHeart)<IconProps>`
+  ${({ $loading, $isAdding }) =>
+    $loading &&
+    $isAdding &&
     css`
       animation: ${loadingAnimation} 0.5s ease-in-out;
     `}
 `
 
-const IconFilled = styled(FilteredLiaHeartSolid)<IconProps>`
-  ${({ loading, isAdding }) =>
-    loading &&
-    isAdding &&
+const IconFilled = styled(LiaHeartSolid)<IconProps>`
+  ${({ $loading, $isAdding }) =>
+    $loading &&
+    $isAdding &&
     css`
       animation: ${loadingAnimation} 0.5s ease-in-out;
     `}
@@ -174,14 +170,14 @@ const AddToFavoritesButton: React.FC<AddToFavoritesButtonProps> = ({
         >
           {added ? (
             <IconFilled
-              loading={loading}
-              isAdding={isAdding}
+              $loading={loading}
+              $isAdding={isAdding}
               aria-hidden="true"
             />
           ) : (
             <IconOutline
-              loading={loading}
-              isAdding={isAdding}
+              $loading={loading}
+              $isAdding={isAdding}
               aria-hidden="true"
             />
           )}