refactor/replacing react fc

apps/docs/src/components/Accordion/index.tsx

@@ -19,7 +19,7 @@ export interface AccordionProps {
     className?: string;
 }
 
-const AccordionRoot: React.FC<AccordionProps> = ({ items, type = 'single', defaultValue, className }) => {
+const AccordionRoot = ({ items, type = 'single', defaultValue, className }: AccordionProps) => {
     if (type === 'single') {
         return (
             <AccordionPrimitive.Root
@@ -54,22 +54,15 @@ const AccordionRoot: React.FC<AccordionProps> = ({ items, type = 'single', defau
     );
 };
 
-const AccordionItem: React.FC<{
-    children: ReactNode;
-    value: string;
-    className?: string;
-}> = ({ children, value, className }) => {
+const AccordionItem = ({ children, value, className }: { children: ReactNode; value: string; className?: string }) => {
     return (
         <AccordionPrimitive.Item value={value} className={clsx('border-b border-white w-full', className)}>
             {children}
         </AccordionPrimitive.Item>
     );
 };
 
-const AccordionTrigger: React.FC<{
-    children: ReactNode;
-    className?: string;
-}> = ({ children, className }) => {
+const AccordionTrigger = ({ children, className }: { children: ReactNode; className?: string }) => {
     return (
         <AccordionPrimitive.Trigger
             className={clsx(
@@ -84,10 +77,7 @@ const AccordionTrigger: React.FC<{
     );
 };
 
-const AccordionContent: React.FC<{
-    children: ReactNode;
-    className?: string;
-}> = ({ children, className }) => {
+const AccordionContent = ({ children, className }: { children: ReactNode; className?: string }) => {
     return (
         <AccordionPrimitive.Content className={clsx(styles.accordionContent, className)}>
             <div className="pb-4 pt-0">{children}</div>

apps/docs/src/components/Badge/index.tsx

@@ -24,7 +24,7 @@ const getVariantClasses = (variant: BadgeProps['variant']): string => {
     }
 };
 
-const Badge: React.FC<BadgeProps> = ({ title, icon, variant = 'primary' }) => (
+const Badge = ({ title, icon, variant = 'primary' }: BadgeProps) => (
     <div
         className={clsx(
             'flex items-center justify-center gap-2.5 px-2.5 py-0.5 rounded-full',

apps/docs/src/components/BadgeList/index.tsx

@@ -6,7 +6,7 @@ interface BadgeListProps {
     badges: { title: string; icon?: string | null }[];
 }
 
-const BadgeList: React.FC<BadgeListProps> = ({ badges }) => (
+const BadgeList = ({ badges }: BadgeListProps) => (
     <ul className="list-none flex flex-wrap gap-2.5 m-0! p-0!">
         {badges.map((badge, index) => (
             <li key={index} className="">

apps/docs/src/components/BenefitsSection/index.tsx

@@ -26,15 +26,15 @@ export interface BenefitCardProps {
     borderColor?: 'gradient' | 'blue' | 'green' | 'light' | 'transparent';
 }
 
-export const BenefitCard: React.FC<BenefitCardProps> = ({
+export const BenefitCard = ({
     team,
     icon,
     iconPosition = 'right',
     title,
     description,
     link,
     borderColor = 'blue',
-}) => {
+}: BenefitCardProps) => {
     return (
         <Card borderColor={borderColor} gap={team ? 'gap-2' : 'gap-6'}>
             {team && (
@@ -78,7 +78,7 @@ export const BenefitCard: React.FC<BenefitCardProps> = ({
     );
 };
 
-export const BenefitsSection: React.FC<BenefitsSectionProps> = ({ title, description, benefits }) => {
+export const BenefitsSection = ({ title, description, benefits }: BenefitsSectionProps) => {
     return (
         <div className="flex flex-col items-start justify-start w-full gap-20">
             <div className="flex flex-col gap-6">

apps/docs/src/components/Card/index.tsx

@@ -7,7 +7,7 @@ interface CardProps {
     gap?: string;
 }
 
-const Card: React.FC<CardProps> = ({ children, borderColor = 'blue', className = '', gap = 'gap-[30px]' }) => {
+const Card = ({ children, borderColor = 'blue', className = '', gap = 'gap-[30px]' }: CardProps) => {
     const getBorderClass = () => {
         if (borderColor === 'gradient') return 'card-gradient-border';
         if (borderColor === 'blue') return 'card-base card-solid-border card-border-blue';

apps/docs/src/components/ClientsSection/index.tsx

@@ -10,7 +10,7 @@ export interface ClientsSectionProps {
     clients: Client[];
 }
 
-export const ClientsSection: React.FC<ClientsSectionProps> = ({ lead, clients }) => {
+export const ClientsSection = ({ lead, clients }: ClientsSectionProps) => {
     return (
         <div className="flex flex-col gap-16 items-start justify-start w-full">
             {lead && <div className="text-white max-w-[700px] m-auto! text-center">{lead}</div>}

apps/docs/src/components/DXPFeaturesSection/index.tsx

@@ -55,14 +55,7 @@ const features: Array<FeatureCardProps> = [
     },
 ];
 
-const FeatureCard: React.FC<FeatureCardProps> = ({
-    title,
-    icon,
-    features,
-    buttonText,
-    buttonUrl,
-    borderColor = 'blue',
-}) => {
+const FeatureCard = ({ title, icon, features, buttonText, buttonUrl, borderColor = 'blue' }: FeatureCardProps) => {
     return (
         <Card borderColor={borderColor}>
             {/* Header */}

apps/docs/src/components/DXPIntegrationsSection/index.tsx

@@ -9,7 +9,7 @@ interface IntegrationBadgeProps {
     name: string;
 }
 
-const IntegrationBadge: React.FC<IntegrationBadgeProps> = ({ icon, name }) => {
+const IntegrationBadge = ({ icon, name }: IntegrationBadgeProps) => {
     return (
         <div className="flex gap-2.5 items-center justify-center px-0 py-0.5 rounded-full">
             <div className="relative w-5 h-5 shrink-0">

apps/docs/src/components/DXPUseCasesSection/index.tsx

@@ -12,7 +12,7 @@ interface UseCaseCardProps {
     title: string;
 }
 
-const UseCaseCard: React.FC<UseCaseCardProps> = ({ icon, title }) => {
+const UseCaseCard = ({ icon, title }: UseCaseCardProps) => {
     return (
         <div className="flex flex-col gap-2 items-start justify-start rounded-lg shadow-sm">
             <div className="flex-shrink-0">

apps/docs/src/components/FeatureTile/index.tsx

@@ -11,7 +11,7 @@ export interface FeatureTileProps {
     badge?: string;
 }
 
-export const FeatureTile: React.FC<FeatureTileProps> = ({ icon, title, description, badge }) => {
+export const FeatureTile = ({ icon, title, description, badge }: FeatureTileProps) => {
     return (
         <div className={clsx('card-base')}>
             <div className="flex justify-between p-6 w-full h-full">
@@ -39,7 +39,7 @@ export interface FeatureTileListProps {
     features: FeatureTileProps[];
 }
 
-export const FeatureTileList: React.FC<FeatureTileListProps> = ({ title, features }) => {
+export const FeatureTileList = ({ title, features }: FeatureTileListProps) => {
     return (
         <div className="flex flex-col gap-4 flex-1">
             <H3 className="mb-0!">{title}</H3>

apps/docs/src/components/FooterSection/index.tsx

@@ -23,7 +23,7 @@ export interface FooterSectionProps {
     };
 }
 
-export const FooterSection: React.FC<FooterSectionProps> = ({ title, description, primaryButton, secondaryButton }) => {
+export const FooterSection = ({ title, description, primaryButton, secondaryButton }: FooterSectionProps) => {
     return (
         <div className="flex flex-col gap-12 items-center justify-start w-full">
             {/* Text Content */}

apps/docs/src/components/GuidesSection/index.tsx

@@ -31,7 +31,7 @@ export interface GuidesSectionProps {
     info?: GuideInfo;
 }
 
-export const GuidesSection: React.FC<GuidesSectionProps> = ({ title, guides, info }) => {
+export const GuidesSection = ({ title, guides, info }: GuidesSectionProps) => {
     return (
         <div className="flex flex-col items-start justify-start w-full">
             {title && <H2 className="text-3xl text-white w-full">{title}</H2>}

apps/docs/src/components/HomepageBenefitsSection/index.tsx

@@ -11,7 +11,7 @@ interface BenefitProps {
     reverse?: boolean;
 }
 
-const Benefit: React.FC<BenefitProps> = ({ title, description, image }) => (
+const Benefit = ({ title, description, image }: BenefitProps) => (
     <div>
         <div className="mb-6">{image}</div>
         <div>

apps/docs/src/components/HomepageFeaturesSection/index.tsx

@@ -17,7 +17,7 @@ interface FeatureItemProps {
     textClassName?: string;
 }
 
-const FeatureItem: React.FC<FeatureItemProps> = ({ text, icon, textClassName = '' }) => (
+const FeatureItem = ({ text, icon, textClassName = '' }: FeatureItemProps) => (
     <div className="flex gap-4 items-start">
         <div className="flex items-center pt-0.5 shrink-0">{icon}</div>
         <Body className={`mb-0! text-base leading-6 ${textClassName}`}>{text}</Body>
@@ -29,7 +29,7 @@ interface BuildingBlockCardProps {
     icon: React.ReactNode;
 }
 
-const BuildingBlockCard: React.FC<BuildingBlockCardProps> = ({ title, icon }) => (
+const BuildingBlockCard = ({ title, icon }: BuildingBlockCardProps) => (
     <div className="flex flex-col gap-2 items-start">
         <div className="flex items-center mb-2 [&_svg_path]:stroke-(--color-highlighted)">{icon}</div>
         <H4 className="mb-0! leading-7!">{title}</H4>

apps/docs/src/components/HomepageStartersSection/index.tsx

@@ -41,7 +41,7 @@ const STARTERS: HoverCardProps[] = [
     },
 ];
 
-export const HomepageStartersSection: React.FC = () => {
+export const HomepageStartersSection = () => {
     return (
         <section className="px-4 flex flex-col items-center gap-y-20">
             <div className="flex flex-col gap-6 items-center text-center">

apps/docs/src/components/HoverCard/index.tsx

@@ -19,15 +19,7 @@ export interface HoverCardProps {
     };
 }
 
-export const HoverCard: React.FC<HoverCardProps> = ({
-    title,
-    description,
-    href,
-    gradient,
-    badge,
-    ctaLabel,
-    backgroundImage,
-}) => {
+export const HoverCard = ({ title, description, href, gradient, badge, ctaLabel, backgroundImage }: HoverCardProps) => {
     const cardWrapperClasses = 'relative group block rounded-lg transition-all duration-200';
 
     const cardContent = () => {

apps/docs/src/components/HubspotForm/index.tsx

@@ -72,15 +72,7 @@ type HubspotFormProps = {
     consents?: HubspotConsent[];
 };
 
-const HubspotForm: React.FC<HubspotFormProps> = ({
-    portalId,
-    formId,
-    title,
-    description,
-    pageName,
-    fields,
-    consents = [],
-}) => {
+const HubspotForm = ({ portalId, formId, title, description, pageName, fields, consents = [] }: HubspotFormProps) => {
     const [values, setValues] = useState<Record<string, string | string[]>>(() => {
         const initial: Record<string, string> = {};
         fields.forEach((f) => (initial[f.name] = ''));

apps/docs/src/components/SubscribeSection/index.tsx

@@ -12,7 +12,7 @@ interface SubscribeSectionProps {
     formId: string;
 }
 
-export const SubscribeSection: React.FC<SubscribeSectionProps> = ({ portalId, formId }) => {
+export const SubscribeSection = ({ portalId, formId }: SubscribeSectionProps) => {
     const [email, setEmail] = useState('');
     const [emailContactConsent, setEmailContactConsent] = useState(false);
     const [status, setStatus] = useState<{ type: 'success' | 'error' | null; message: string }>({

apps/docs/src/components/Tile/index.tsx

@@ -6,14 +6,12 @@ interface TileProps {
     children: string;
 }
 
-export const Tile: React.FC<TileProps> = ({ title, children, icon }) => (
+export const Tile = ({ title, children, icon }: TileProps) => (
     <div className="flex flex-col p-6 space-y-2 rounded-lg text-accent-foreground bg-white shadow-md">
         {icon && <img src={icon} alt="" className="w-4 h-4" />}
         <p className="text-xl! font-semibold! font m-0!">{title}</p>
         <p className="text-base">{children}</p>
     </div>
 );
 
-export const TileGroup: React.FC<TileProps> = ({ children }) => (
-    <div className="grid grid-cols-2 gap-4 w-full">{children}</div>
-);
+export const TileGroup = ({ children }: TileProps) => <div className="grid grid-cols-2 gap-4 w-full">{children}</div>;

apps/frontend/src/containers/Auth/AuthLayout/AuthLayout.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { AuthLayoutProps } from './AuthLayout.types';
 
-export const AuthLayout: React.FC<AuthLayoutProps> = ({ layout = 'main-side', toolbar, children }) => {
+export const AuthLayout = ({ layout = 'main-side', toolbar, children }: AuthLayoutProps) => {
     const main = (
         <div className="flex flex-col md:max-w-[50%] w-full p-4">
             <div className="flex flex-col justify-center items-center md:h-full">

apps/frontend/src/containers/Auth/SignInForm/SignInForm.tsx

@@ -28,7 +28,7 @@ const MAX_USERNAME_CHARS = 64;
 const MIN_PASSWORD_CHARS = 4;
 const MAX_PASSWORD_CHARS = 64;
 
-export const SignInForm: React.FC<SignInFormProps> = ({ providers, labels, onSignIn }) => {
+export const SignInForm = ({ providers, labels, onSignIn }: SignInFormProps) => {
     const [isSubmitting, setIsSubmitting] = useState(false);
     const [passwordVisible, setPasswordVisible] = useState(false);
     const [error, setError] = useState<AuthError | null>(null);

apps/frontend/src/containers/Auth/Toolbar/LocaleSwitcher.tsx

@@ -13,7 +13,7 @@ import { usePathname, useRouter } from '@/i18n';
 
 import { ToolbarProps } from './Toolbar.types';
 
-export const LocaleSwitcher: React.FC<ToolbarProps> = ({ label, alternativeUrls }) => {
+export const LocaleSwitcher = ({ label, alternativeUrls }: ToolbarProps) => {
     const pathname = usePathname();
     const searchParams = useSearchParams();
     const router = useRouter();

apps/frontend/src/containers/ContextSwitcher/ContextSwitcher.tsx

@@ -18,7 +18,7 @@ import { sdk } from '@/api/sdk';
 import { Content } from './Content/Content';
 import { ContextSwitcherProps } from './ContextSwitcher.types';
 
-export const ContextSwitcher: React.FC<ContextSwitcherProps> = ({ data }) => {
+export const ContextSwitcher = ({ data }: ContextSwitcherProps) => {
     const session = useSession();
     const locale = useLocale();
 

apps/frontend/src/containers/Footer/Footer.tsx

@@ -176,7 +176,7 @@ const NavigationGroup = ({
     );
 };
 
-export const Footer: React.FC<FooterProps> = ({ data }) => {
+export const Footer = ({ data }: FooterProps) => {
     const locale = useLocale();
 
     const navigationItemClass = cn(navigationMenuTriggerStyle());

apps/frontend/src/containers/Header/Header.tsx

@@ -20,7 +20,7 @@ import { MobileNavigation } from './MobileNavigation/MobileNavigation';
 import { NotificationInfo } from './NotificationInfo/NotificationInfo';
 import { UserInfo } from './UserInfo/UserInfo';
 
-export const Header: React.FC<HeaderProps> = ({ data, alternativeUrls, children }) => {
+export const Header = ({ data, alternativeUrls, children }: HeaderProps) => {
     const session = useSession();
     const isSignedIn = !!session.data?.user;
 

apps/frontend/src/templates/OneColumnTemplate/OneColumnTemplate.tsx

@@ -4,7 +4,7 @@ import { renderBlocks } from '@/blocks/renderBlocks';
 
 import { OneColumnTemplateProps } from './OneColumnTemplate.types';
 
-export const OneColumnTemplate: React.FC<OneColumnTemplateProps> = async ({ slug, data }) => {
+export const OneColumnTemplate = async ({ slug, data }: OneColumnTemplateProps) => {
     return (
         <div className="flex flex-col gap-12 row-start-2 items-center sm:items-start w-full">
             {renderBlocks(data.slots.main, slug)}

apps/frontend/src/templates/PageTemplate/PageTemplate.tsx

@@ -5,7 +5,7 @@ import { TwoColumnTemplate } from '@/templates/TwoColumnTemplate/TwoColumnTempla
 
 import { PageTemplateProps } from './PageTemplate.types';
 
-export const PageTemplate: React.FC<PageTemplateProps> = ({ slug, data }) => {
+export const PageTemplate = ({ slug, data }: PageTemplateProps) => {
     const getTemplate = () => {
         switch (data.template.__typename) {
             case 'OneColumnTemplate':

apps/frontend/src/templates/TwoColumnTemplate/TwoColumnTemplate.tsx

@@ -4,7 +4,7 @@ import { renderBlocks } from '@/blocks/renderBlocks';
 
 import { TwoColumnTemplateProps } from './TwoColumnTemplate.types';
 
-export const TwoColumnTemplate: React.FC<TwoColumnTemplateProps> = async ({ slug, data }) => {
+export const TwoColumnTemplate = async ({ slug, data }: TwoColumnTemplateProps) => {
     return (
         <div className="flex flex-col gap-8 w-full">
             <div className="flex flex-col gap-8 items-center sm:items-start w-full">