From cec47cef786c3591449f4c2e14b5e8b2193177a1 Mon Sep 17 00:00:00 2001 From: Giancarlo Buomprisco Date: Mon, 23 Dec 2024 15:15:00 +0800 Subject: [PATCH] React 19 refactoring: Removed forwardRef references in all UI Components (#99) * React 19 refactoring: Removed forwardRef references in all UI Components * Added Progress UI component from Shadcn * Updated dependencies * Formatted files * Fix Mobile Dropdowns --- apps/web/app/home/(user)/layout.tsx | 12 +- apps/web/styles/globals.css | 2 +- .../personal-accounts-server-actions.ts | 25 - .../delete-personal-account.service.ts | 5 - .../src/components/resend-auth-link-form.tsx | 4 +- .../src/components/notifications-popover.tsx | 4 +- .../supabase/src/auth-callback.service.ts | 19 +- packages/ui/package.json | 2 +- packages/ui/src/makerkit/card-button.tsx | 66 +- packages/ui/src/makerkit/cookie-banner.tsx | 1 + packages/ui/src/makerkit/divider.tsx | 5 - packages/ui/src/makerkit/empty-state.tsx | 49 +- .../ui/src/makerkit/image-upload-input.tsx | 31 +- .../ui/src/makerkit/marketing/coming-soon.tsx | 55 +- .../ui/src/makerkit/marketing/cta-button.tsx | 39 +- .../src/makerkit/marketing/feature-card.tsx | 59 +- .../src/makerkit/marketing/feature-grid.tsx | 33 +- .../makerkit/marketing/feature-showcase.tsx | 19 +- packages/ui/src/makerkit/marketing/footer.tsx | 95 +-- .../marketing/gradient-secondary-text.tsx | 10 +- .../src/makerkit/marketing/gradient-text.tsx | 33 +- packages/ui/src/makerkit/marketing/header.tsx | 50 +- .../ui/src/makerkit/marketing/hero-title.tsx | 10 +- packages/ui/src/makerkit/marketing/pill.tsx | 10 +- .../src/makerkit/marketing/secondary-hero.tsx | 20 +- packages/ui/src/makerkit/multi-step-form.tsx | 29 +- packages/ui/src/shadcn/accordion.tsx | 35 +- packages/ui/src/shadcn/alert-dialog.tsx | 48 +- packages/ui/src/shadcn/alert.tsx | 27 +- packages/ui/src/shadcn/avatar.tsx | 26 +- packages/ui/src/shadcn/breadcrumb.tsx | 46 +- packages/ui/src/shadcn/button.tsx | 29 +- packages/ui/src/shadcn/card.tsx | 80 +- packages/ui/src/shadcn/chart.tsx | 373 ++++---- packages/ui/src/shadcn/checkbox.tsx | 10 +- packages/ui/src/shadcn/command.tsx | 75 +- packages/ui/src/shadcn/dialog.tsx | 38 +- packages/ui/src/shadcn/dropdown-menu.tsx | 78 +- packages/ui/src/shadcn/form.tsx | 55 +- packages/ui/src/shadcn/input-otp.tsx | 44 +- packages/ui/src/shadcn/input.tsx | 32 +- packages/ui/src/shadcn/label.tsx | 15 +- packages/ui/src/shadcn/navigation-menu.tsx | 56 +- packages/ui/src/shadcn/popover.tsx | 11 +- packages/ui/src/shadcn/progress.tsx | 28 + packages/ui/src/shadcn/radio-group.tsx | 18 +- packages/ui/src/shadcn/scroll-area.tsx | 16 +- packages/ui/src/shadcn/select.tsx | 68 +- packages/ui/src/shadcn/separator.tsx | 39 +- packages/ui/src/shadcn/sheet.tsx | 39 +- packages/ui/src/shadcn/sidebar.tsx | 799 +++++++++--------- packages/ui/src/shadcn/switch.tsx | 8 +- packages/ui/src/shadcn/table.tsx | 92 +- packages/ui/src/shadcn/tabs.tsx | 24 +- packages/ui/src/shadcn/textarea.tsx | 26 +- packages/ui/src/shadcn/tooltip.tsx | 10 +- pnpm-lock.yaml | 36 +- tooling/scripts/src/license.mjs | 1 + 58 files changed, 1359 insertions(+), 1610 deletions(-) delete mode 100644 packages/ui/src/makerkit/divider.tsx create mode 100644 packages/ui/src/shadcn/progress.tsx diff --git a/apps/web/app/home/(user)/layout.tsx b/apps/web/app/home/(user)/layout.tsx index a46504eb3..4d9e8e0af 100644 --- a/apps/web/app/home/(user)/layout.tsx +++ b/apps/web/app/home/(user)/layout.tsx @@ -45,7 +45,9 @@ function SidebarLayout({ children }: React.PropsWithChildren) { - + + + {children} @@ -64,7 +66,9 @@ function HeaderLayout({ children }: React.PropsWithChildren) { - + + + {children} @@ -78,11 +82,11 @@ function MobileNavigation({ workspace: Awaited>; }) { return ( - + <> - + ); } diff --git a/apps/web/styles/globals.css b/apps/web/styles/globals.css index 0ecf3915f..f36f66c00 100644 --- a/apps/web/styles/globals.css +++ b/apps/web/styles/globals.css @@ -98,7 +98,7 @@ Optimize dropdowns for mobile } [data-radix-menu-content] { - @apply rounded-none md:rounded-lg; + @apply rounded-none md:rounded-lg w-full md:w-auto; } [data-radix-menu-content] [role="menuitem"] { diff --git a/packages/features/accounts/src/server/personal-accounts-server-actions.ts b/packages/features/accounts/src/server/personal-accounts-server-actions.ts index 4a964d293..d2dc9715f 100644 --- a/packages/features/accounts/src/server/personal-accounts-server-actions.ts +++ b/packages/features/accounts/src/server/personal-accounts-server-actions.ts @@ -3,8 +3,6 @@ import { revalidatePath } from 'next/cache'; import { redirect } from 'next/navigation'; -import { z } from 'zod'; - import { enhanceAction } from '@kit/next/actions'; import { getLogger } from '@kit/shared/logger'; import { getSupabaseServerAdminClient } from '@kit/supabase/server-admin-client'; @@ -13,8 +11,6 @@ import { getSupabaseServerClient } from '@kit/supabase/server-client'; import { DeletePersonalAccountSchema } from '../schema/delete-personal-account.schema'; import { createDeletePersonalAccountService } from './services/delete-personal-account.service'; -const emailSettings = getEmailSettingsFromEnvironment(); - const enableAccountDeletion = process.env.NEXT_PUBLIC_ENABLE_PERSONAL_ACCOUNT_DELETION === 'true'; @@ -65,7 +61,6 @@ export const deletePersonalAccountAction = enhanceAction( adminClient: getSupabaseServerAdminClient(), userId: user.id, userEmail: user.email ?? null, - emailSettings, }); logger.info(ctx, `Account request successfully sent`); @@ -78,23 +73,3 @@ export const deletePersonalAccountAction = enhanceAction( }, {}, ); - -function getEmailSettingsFromEnvironment() { - return z - .object({ - fromEmail: z - .string({ - required_error: 'Provide the variable EMAIL_SENDER', - }) - .email(), - productName: z - .string({ - required_error: 'Provide the variable NEXT_PUBLIC_PRODUCT_NAME', - }) - .min(1), - }) - .parse({ - fromEmail: process.env.EMAIL_SENDER, - productName: process.env.NEXT_PUBLIC_PRODUCT_NAME, - }); -} diff --git a/packages/features/accounts/src/server/services/delete-personal-account.service.ts b/packages/features/accounts/src/server/services/delete-personal-account.service.ts index 17046d0de..a2f05cead 100644 --- a/packages/features/accounts/src/server/services/delete-personal-account.service.ts +++ b/packages/features/accounts/src/server/services/delete-personal-account.service.ts @@ -33,11 +33,6 @@ class DeletePersonalAccountService { userId: string; userEmail: string | null; - - emailSettings: { - fromEmail: string; - productName: string; - }; }) { const logger = await getLogger(); diff --git a/packages/features/auth/src/components/resend-auth-link-form.tsx b/packages/features/auth/src/components/resend-auth-link-form.tsx index 96b6f92cc..2c492b9dc 100644 --- a/packages/features/auth/src/components/resend-auth-link-form.tsx +++ b/packages/features/auth/src/components/resend-auth-link-form.tsx @@ -20,9 +20,7 @@ import { Trans } from '@kit/ui/trans'; import { useCaptchaToken } from '../captcha/client'; -export function ResendAuthLinkForm(props: { - redirectPath?: string; -}) { +export function ResendAuthLinkForm(props: { redirectPath?: string }) { const resendLink = useResendLink(); const form = useForm({ diff --git a/packages/features/notifications/src/components/notifications-popover.tsx b/packages/features/notifications/src/components/notifications-popover.tsx index d9120239c..3b4d7ee08 100644 --- a/packages/features/notifications/src/components/notifications-popover.tsx +++ b/packages/features/notifications/src/components/notifications-popover.tsx @@ -7,9 +7,9 @@ import { useTranslation } from 'react-i18next'; import { Database } from '@kit/supabase/database'; import { Button } from '@kit/ui/button'; -import { Divider } from '@kit/ui/divider'; import { If } from '@kit/ui/if'; import { Popover, PopoverContent, PopoverTrigger } from '@kit/ui/popover'; +import { Separator } from '@kit/ui/separator'; import { cn } from '@kit/ui/utils'; import { useDismissNotification, useFetchNotifications } from '../hooks'; @@ -147,7 +147,7 @@ export function NotificationsPopover(params: { {t('common:notifications')} - +
diff --git a/packages/supabase/src/auth-callback.service.ts b/packages/supabase/src/auth-callback.service.ts index a1cdef7a0..a98f3b3c6 100644 --- a/packages/supabase/src/auth-callback.service.ts +++ b/packages/supabase/src/auth-callback.service.ts @@ -1,9 +1,10 @@ import 'server-only'; - - -import {AuthError, type EmailOtpType, SupabaseClient} from '@supabase/supabase-js'; - +import { + AuthError, + type EmailOtpType, + SupabaseClient, +} from '@supabase/supabase-js'; /** * @name createAuthCallbackService @@ -113,7 +114,10 @@ class AuthCallbackService { url.searchParams.set('code', error.code); } - const errorMessage = getAuthErrorMessage({ error: error.message, code: error.code }); + const errorMessage = getAuthErrorMessage({ + error: error.message, + code: error.code, + }); url.searchParams.set('error', errorMessage); } @@ -253,10 +257,7 @@ function isVerifierError(error: string) { return error.includes('both auth code and code verifier should be non-empty'); } -function getAuthErrorMessage(params: { - error: string; - code?: string; -}) { +function getAuthErrorMessage(params: { error: string; code?: string }) { // this error arises when the user tries to sign in with an expired email link if (params.code) { if (params.code === 'otp_expired') { diff --git a/packages/ui/package.json b/packages/ui/package.json index 389be0314..317cbf5e6 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -20,6 +20,7 @@ "@radix-ui/react-label": "^2.1.1", "@radix-ui/react-navigation-menu": "^1.2.3", "@radix-ui/react-popover": "^1.1.4", + "@radix-ui/react-progress": "^1.1.1", "@radix-ui/react-radio-group": "^1.2.2", "@radix-ui/react-scroll-area": "^1.2.2", "@radix-ui/react-select": "^2.1.4", @@ -110,7 +111,6 @@ "./utils": "./src/lib/utils/index.ts", "./if": "./src/makerkit/if.tsx", "./trans": "./src/makerkit/trans.tsx", - "./divider": "./src/makerkit/divider.tsx", "./sidebar": "./src/makerkit/sidebar.tsx", "./navigation-schema": "./src/makerkit/navigation-config.schema.ts", "./bordered-navigation-menu": "./src/makerkit/bordered-navigation-menu.tsx", diff --git a/packages/ui/src/makerkit/card-button.tsx b/packages/ui/src/makerkit/card-button.tsx index 9a5189531..4707af5f7 100644 --- a/packages/ui/src/makerkit/card-button.tsx +++ b/packages/ui/src/makerkit/card-button.tsx @@ -5,19 +5,17 @@ import { ChevronRight } from 'lucide-react'; import { cn } from '../lib/utils'; -export const CardButton = React.forwardRef< - HTMLButtonElement, +export const CardButton: React.FC< { asChild?: boolean; className?: string; children: React.ReactNode; } & React.ButtonHTMLAttributes ->(function CardButton({ className, asChild, ...props }, ref) { +> = function CardButton({ className, asChild, ...props }) { const Comp = asChild ? Slot : 'button'; return ( {props.children} ); -}); +}; -export const CardButtonTitle = React.forwardRef< - HTMLDivElement, +export const CardButtonTitle: React.FC< { - className?: string; asChild?: boolean; children: React.ReactNode; - } ->(function CardButtonTitle({ className, asChild, ...props }, ref) { + } & React.HTMLAttributes +> = function CardButtonTitle({ className, asChild, ...props }) { const Comp = asChild ? Slot : 'div'; return ( {props.children} ); -}); +}; -export const CardButtonHeader = React.forwardRef< - HTMLDivElement, +export const CardButtonHeader: React.FC< { - className?: string; children: React.ReactNode; asChild?: boolean; displayArrow?: boolean; - } ->(function CardButtonHeader( - { className, asChild, displayArrow = true, ...props }, - ref, -) { + } & React.HTMLAttributes +> = function CardButtonHeader({ + className, + asChild, + displayArrow = true, + ...props +}) { const Comp = asChild ? Slot : 'div'; return ( - + {props.children} @@ -83,37 +78,29 @@ export const CardButtonHeader = React.forwardRef< ); -}); +}; -export const CardButtonContent = React.forwardRef< - HTMLDivElement, +export const CardButtonContent: React.FC< { - className?: string; asChild?: boolean; children: React.ReactNode; - } ->(function CardButtonContent({ className, asChild, ...props }, ref) { + } & React.HTMLAttributes +> = function CardButtonContent({ className, asChild, ...props }) { const Comp = asChild ? Slot : 'div'; return ( - + {props.children} ); -}); +}; -export const CardButtonFooter = React.forwardRef< - HTMLDivElement, +export const CardButtonFooter: React.FC< { - className?: string; asChild?: boolean; children: React.ReactNode; - } ->(function CardButtonFooter({ className, asChild, ...props }, ref) { + } & React.HTMLAttributes +> = function CardButtonFooter({ className, asChild, ...props }) { const Comp = asChild ? Slot : 'div'; return ( @@ -123,9 +110,8 @@ export const CardButtonFooter = React.forwardRef< 'mt-auto flex h-0 w-full flex-col justify-center border-t px-4', )} {...props} - ref={ref} > {props.children} ); -}); +}; diff --git a/packages/ui/src/makerkit/cookie-banner.tsx b/packages/ui/src/makerkit/cookie-banner.tsx index 69d3eec20..f6ef9708f 100644 --- a/packages/ui/src/makerkit/cookie-banner.tsx +++ b/packages/ui/src/makerkit/cookie-banner.tsx @@ -31,6 +31,7 @@ export function CookieBanner() { return ( e.preventDefault()} className={`dark:shadow-primary-500/40 fixed bottom-0 w-full max-w-lg border bg-background p-6 shadow-2xl delay-1000 duration-1000 animate-in fade-in zoom-in-95 slide-in-from-bottom-16 fill-mode-both lg:bottom-[2rem] lg:left-[2rem] lg:h-48 lg:rounded-lg`} >
diff --git a/packages/ui/src/makerkit/divider.tsx b/packages/ui/src/makerkit/divider.tsx deleted file mode 100644 index 3c338dfdd..000000000 --- a/packages/ui/src/makerkit/divider.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { cn } from '../lib/utils'; - -export function Divider(props: { className?: string }) { - return
; -} diff --git a/packages/ui/src/makerkit/empty-state.tsx b/packages/ui/src/makerkit/empty-state.tsx index 10234a4aa..42067161b 100644 --- a/packages/ui/src/makerkit/empty-state.tsx +++ b/packages/ui/src/makerkit/empty-state.tsx @@ -3,42 +3,38 @@ import React from 'react'; import { cn } from '../lib/utils'; import { Button } from '../shadcn/button'; -const EmptyStateHeading = React.forwardRef< - HTMLHeadingElement, - React.HTMLAttributes ->(({ className, ...props }, ref) => ( +const EmptyStateHeading: React.FC> = ({ + className, + ...props +}) => (

-)); +); EmptyStateHeading.displayName = 'EmptyStateHeading'; -const EmptyStateText = React.forwardRef< - HTMLParagraphElement, - React.HTMLAttributes ->(({ className, ...props }, ref) => ( -

-)); +const EmptyStateText: React.FC> = ({ + className, + ...props +}) => ( +

+); EmptyStateText.displayName = 'EmptyStateText'; -const EmptyStateButton = React.forwardRef< - HTMLButtonElement, +const EmptyStateButton: React.FC< React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( -

); - }, -); + }; diff --git a/packages/ui/src/makerkit/marketing/coming-soon.tsx b/packages/ui/src/makerkit/marketing/coming-soon.tsx index 9b8b5a105..60aa63100 100644 --- a/packages/ui/src/makerkit/marketing/coming-soon.tsx +++ b/packages/ui/src/makerkit/marketing/coming-soon.tsx @@ -1,4 +1,4 @@ -import React, { forwardRef } from 'react'; +import React from 'react'; import { Button } from '@kit/ui/button'; import { cn } from '@kit/ui/utils'; @@ -7,38 +7,36 @@ import { CtaButton } from './cta-button'; import { GradientSecondaryText } from './gradient-secondary-text'; import { HeroTitle } from './hero-title'; -const ComingSoonHeading = React.forwardRef< - HTMLHeadingElement, - React.HTMLAttributes ->(({ className, ...props }, ref) => ( - -)); +const ComingSoonHeading: React.FC> = ({ + className, + ...props +}) => ; + ComingSoonHeading.displayName = 'ComingSoonHeading'; -const ComingSoonText = React.forwardRef< - HTMLParagraphElement, - React.HTMLAttributes ->(({ className, ...props }, ref) => ( +const ComingSoonText: React.FC> = ({ + className, + ...props +}) => ( -)); +); ComingSoonText.displayName = 'ComingSoonText'; -const ComingSoonButton = React.forwardRef< - HTMLButtonElement, +const ComingSoonButton: React.FC< React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - -)); +> = ({ className, ...props }) => ( + +); ComingSoonButton.displayName = 'ComingSoonButton'; -const ComingSoon = React.forwardRef< - HTMLDivElement, - React.HTMLAttributes ->(({ children, className, ...props }, ref) => { +const ComingSoon: React.FC> = ({ + children, + className, + ...props +}) => { const childrenArray = React.Children.toArray(children); const logo = childrenArray.find( @@ -72,7 +70,6 @@ const ComingSoon = React.forwardRef< return (
); -}); +}; ComingSoon.displayName = 'ComingSoon'; -const ComingSoonLogo = forwardRef< - HTMLDivElement, - React.HTMLAttributes ->(({ className, ...props }, ref) => ( -
-)); +const ComingSoonLogo: React.FC> = ({ + className, + ...props +}) =>
; ComingSoonLogo.displayName = 'ComingSoonLogo'; export { diff --git a/packages/ui/src/makerkit/marketing/cta-button.tsx b/packages/ui/src/makerkit/marketing/cta-button.tsx index b0fb5de6e..8473ebe1a 100644 --- a/packages/ui/src/makerkit/marketing/cta-button.tsx +++ b/packages/ui/src/makerkit/marketing/cta-button.tsx @@ -1,23 +1,22 @@ -import { forwardRef } from 'react'; - import { cn } from '../../lib/utils'; import { Button } from '../../shadcn/button'; -export const CtaButton = forwardRef< - HTMLButtonElement, - React.ComponentProps ->(function CtaButtonComponent({ className, children, ...props }, ref) { - return ( - - ); -}); +export const CtaButton: React.FC> = + function CtaButtonComponent({ className, children, ...props }) { + return ( + + ); + }; diff --git a/packages/ui/src/makerkit/marketing/feature-card.tsx b/packages/ui/src/makerkit/marketing/feature-card.tsx index 53419f88d..1223db7c7 100644 --- a/packages/ui/src/makerkit/marketing/feature-card.tsx +++ b/packages/ui/src/makerkit/marketing/feature-card.tsx @@ -1,4 +1,4 @@ -import React, { forwardRef } from 'react'; +import React from 'react'; import { cn } from '../../lib/utils'; import { @@ -14,31 +14,32 @@ interface FeatureCardProps extends React.HTMLAttributes { image?: React.ReactNode; } -export const FeatureCard = forwardRef( - function FeatureCardComponent( - { className, label, description, image, children, ...props }, - ref, - ) { - return ( -
- - {label} - - {description} - - - - {image} - {children} - -
- ); - }, -); +export const FeatureCard: React.FC = ({ + className, + label, + description, + image, + children, + ...props +}) => { + return ( +
+ + {label} + + {description} + + + + {image} + {children} + +
+ ); +}; diff --git a/packages/ui/src/makerkit/marketing/feature-grid.tsx b/packages/ui/src/makerkit/marketing/feature-grid.tsx index 8524a350c..e8db6e670 100644 --- a/packages/ui/src/makerkit/marketing/feature-grid.tsx +++ b/packages/ui/src/makerkit/marketing/feature-grid.tsx @@ -1,21 +1,18 @@ -import React, { forwardRef } from 'react'; +import React from 'react'; import { cn } from '../../lib/utils'; -export const FeatureGrid = forwardRef< - HTMLDivElement, - React.HTMLAttributes ->(function FeatureGridComponent({ className, children, ...props }, ref) { - return ( -
- {children} -
- ); -}); +export const FeatureGrid: React.FC> = + function FeatureGridComponent({ className, children, ...props }) { + return ( +
+ {children} +
+ ); + }; diff --git a/packages/ui/src/makerkit/marketing/feature-showcase.tsx b/packages/ui/src/makerkit/marketing/feature-showcase.tsx index 11a1a13e1..51f7ed529 100644 --- a/packages/ui/src/makerkit/marketing/feature-showcase.tsx +++ b/packages/ui/src/makerkit/marketing/feature-showcase.tsx @@ -1,4 +1,4 @@ -import React, { forwardRef } from 'react'; +import React from 'react'; import { cn } from '../../lib/utils'; @@ -7,14 +7,16 @@ interface FeatureShowcaseProps extends React.HTMLAttributes { icon?: React.ReactNode; } -export const FeatureShowcase = forwardRef( - function FeatureShowcaseComponent( - { className, heading, icon, children, ...props }, - ref, - ) { +export const FeatureShowcase: React.FC = + function FeatureShowcaseComponent({ + className, + heading, + icon, + children, + ...props + }) { return (
@@ -27,8 +29,7 @@ export const FeatureShowcase = forwardRef( {children}
); - }, -); + }; export function FeatureShowcaseIconContainer( props: React.PropsWithChildren<{ diff --git a/packages/ui/src/makerkit/marketing/footer.tsx b/packages/ui/src/makerkit/marketing/footer.tsx index abae76206..a1a4d6c10 100644 --- a/packages/ui/src/makerkit/marketing/footer.tsx +++ b/packages/ui/src/makerkit/marketing/footer.tsx @@ -1,5 +1,3 @@ -import { forwardRef } from 'react'; - import { cn } from '../../lib/utils'; interface FooterSection { @@ -17,63 +15,60 @@ interface FooterProps extends React.HTMLAttributes { sections: FooterSection[]; } -export const Footer = forwardRef( - function MarketingFooterComponent( - { className, logo, description, copyright, sections, ...props }, - ref, - ) { - return ( -
-
-
-
+export const Footer: React.FC = ({ + className, + logo, + description, + copyright, + sections, + ...props +}) => { + return ( +
+
+
+
+
+
{logo}
-
{logo}
-
-
-

- {description} -

-
-
-

{copyright}

-
+
+

{description}

+
+
+

{copyright}

+
-
- {sections.map((section, index) => ( -
-
- - {section.heading} - +
+ {sections.map((section, index) => ( +
+
+ {section.heading} - - {section.links.map((link, linkIndex) => ( - - {link.label} - - ))} - -
+ + {section.links.map((link, linkIndex) => ( + + {link.label} + + ))} +
- ))} -
+
+ ))}
-
- ); - }, -); +
+
+ ); +}; function FooterSectionHeading(props: React.PropsWithChildren) { return {props.children}; diff --git a/packages/ui/src/makerkit/marketing/gradient-secondary-text.tsx b/packages/ui/src/makerkit/marketing/gradient-secondary-text.tsx index 96709e3e6..aca23807a 100644 --- a/packages/ui/src/makerkit/marketing/gradient-secondary-text.tsx +++ b/packages/ui/src/makerkit/marketing/gradient-secondary-text.tsx @@ -1,20 +1,16 @@ -import { forwardRef } from 'react'; - import { Slot, Slottable } from '@radix-ui/react-slot'; import { cn } from '../../lib/utils'; -export const GradientSecondaryText = forwardRef< - HTMLSpanElement, +export const GradientSecondaryText: React.FC< React.HTMLAttributes & { asChild?: boolean; } ->(function GradientSecondaryTextComponent({ className, ...props }, ref) { +> = function GradientSecondaryTextComponent({ className, ...props }) { const Comp = props.asChild ? Slot : 'span'; return ( {props.children} ); -}); +}; diff --git a/packages/ui/src/makerkit/marketing/gradient-text.tsx b/packages/ui/src/makerkit/marketing/gradient-text.tsx index 73f139c53..7f912d7d9 100644 --- a/packages/ui/src/makerkit/marketing/gradient-text.tsx +++ b/packages/ui/src/makerkit/marketing/gradient-text.tsx @@ -1,21 +1,18 @@ -import React, { forwardRef } from 'react'; +import React from 'react'; import { cn } from '../../lib/utils'; -export const GradientText = forwardRef< - HTMLSpanElement, - React.HTMLAttributes ->(function GradientTextComponent({ className, children, ...props }, ref) { - return ( - - {children} - - ); -}); +export const GradientText: React.FC> = + function GradientTextComponent({ className, children, ...props }) { + return ( + + {children} + + ); + }; diff --git a/packages/ui/src/makerkit/marketing/header.tsx b/packages/ui/src/makerkit/marketing/header.tsx index 2e04a443e..398d40b48 100644 --- a/packages/ui/src/makerkit/marketing/header.tsx +++ b/packages/ui/src/makerkit/marketing/header.tsx @@ -1,5 +1,3 @@ -import { forwardRef } from 'react'; - import { cn } from '../../lib/utils'; interface HeaderProps extends React.HTMLAttributes { @@ -8,30 +6,30 @@ interface HeaderProps extends React.HTMLAttributes { actions?: React.ReactNode; } -export const Header = forwardRef( - function MarketingHeaderComponent( - { className, logo, navigation, actions, ...props }, - ref, - ) { - return ( -
-
-
-
{logo}
-
{navigation}
-
- {actions} -
+export const Header: React.FC = function ({ + className, + logo, + navigation, + actions, + ...props +}) { + return ( +
+
+
+
{logo}
+
{navigation}
+
+ {actions}
- ); - }, -); +
+ ); +}; diff --git a/packages/ui/src/makerkit/marketing/hero-title.tsx b/packages/ui/src/makerkit/marketing/hero-title.tsx index a9b38c501..35abbc463 100644 --- a/packages/ui/src/makerkit/marketing/hero-title.tsx +++ b/packages/ui/src/makerkit/marketing/hero-title.tsx @@ -1,20 +1,16 @@ -import { forwardRef } from 'react'; - import { Slot, Slottable } from '@radix-ui/react-slot'; import { cn } from '../../lib/utils'; -export const HeroTitle = forwardRef< - HTMLHeadingElement, +export const HeroTitle: React.FC< React.HTMLAttributes & { asChild?: boolean; } ->(function HeroTitleComponent({ children, className, ...props }, ref) { +> = function HeroTitleComponent({ children, className, ...props }) { const Comp = props.asChild ? Slot : 'h1'; return ( {children} ); -}); +}; diff --git a/packages/ui/src/makerkit/marketing/pill.tsx b/packages/ui/src/makerkit/marketing/pill.tsx index 549d08442..214667b40 100644 --- a/packages/ui/src/makerkit/marketing/pill.tsx +++ b/packages/ui/src/makerkit/marketing/pill.tsx @@ -1,21 +1,17 @@ -import { forwardRef } from 'react'; - import { Slot, Slottable } from '@radix-ui/react-slot'; import { cn } from '../../lib/utils'; -export const Pill = forwardRef< - HTMLHeadingElement, +export const Pill: React.FC< React.HTMLAttributes & { label?: string; asChild?: boolean; } ->(function PillComponent({ className, asChild, ...props }, ref) { +> = function PillComponent({ className, asChild, ...props }) { const Comp = asChild ? Slot : 'h3'; return ( ); -}); +}; diff --git a/packages/ui/src/makerkit/marketing/secondary-hero.tsx b/packages/ui/src/makerkit/marketing/secondary-hero.tsx index 996c029b0..c777bc2fc 100644 --- a/packages/ui/src/makerkit/marketing/secondary-hero.tsx +++ b/packages/ui/src/makerkit/marketing/secondary-hero.tsx @@ -1,5 +1,3 @@ -import { forwardRef } from 'react'; - import { cn } from '../../lib/utils'; import { Heading } from '../../shadcn/heading'; @@ -9,14 +7,17 @@ interface SecondaryHeroProps extends React.HTMLAttributes { subheading: React.ReactNode; } -export const SecondaryHero = forwardRef( - function SecondaryHeroComponent( - { className, pill, heading, subheading, children, ...props }, - ref, - ) { +export const SecondaryHero: React.FC = + function SecondaryHeroComponent({ + className, + pill, + heading, + subheading, + children, + ...props + }) { return (
( {children}
); - }, -); + }; diff --git a/packages/ui/src/makerkit/multi-step-form.tsx b/packages/ui/src/makerkit/multi-step-form.tsx index 3d84c3ae1..55694fdbf 100644 --- a/packages/ui/src/makerkit/multi-step-form.tsx +++ b/packages/ui/src/makerkit/multi-step-form.tsx @@ -128,22 +128,22 @@ export function MultiStepFormContextProvider(props: { return props.children(ctx); } -export const MultiStepFormStep = React.forwardRef< - HTMLDivElement, +export const MultiStepFormStep: React.FC< React.PropsWithChildren< { asChild?: boolean; + ref?: React.Ref; } & HTMLProps > ->(function MultiStepFormStep({ children, asChild, ...props }, ref) { +> = function MultiStepFormStep({ children, asChild, ...props }) { const Cmp = asChild ? Slot : 'div'; return ( - + {children} ); -}); +}; export function useMultiStepFormContext() { const context = useContext(MultiStepFormContext) as ReturnType< @@ -165,6 +165,7 @@ export function useMultiStepFormContext() { * @param schema * @param form * @param stepNames + * @param onSubmit */ export function useMultiStepForm( schema: Schema, @@ -323,39 +324,37 @@ export function useMultiStepForm( ); } -export const MultiStepFormHeader = React.forwardRef< - HTMLDivElement, +export const MultiStepFormHeader: React.FC< React.PropsWithChildren< { asChild?: boolean; } & HTMLProps > ->(function MultiStepFormHeader({ children, asChild, ...props }, ref) { +> = function MultiStepFormHeader({ children, asChild, ...props }) { const Cmp = asChild ? Slot : 'div'; return ( - + {children} ); -}); +}; -export const MultiStepFormFooter = React.forwardRef< - HTMLDivElement, +export const MultiStepFormFooter: React.FC< React.PropsWithChildren< { asChild?: boolean; } & HTMLProps > ->(function MultiStepFormFooter({ children, asChild, ...props }, ref) { +> = function MultiStepFormFooter({ children, asChild, ...props }) { const Cmp = asChild ? Slot : 'div'; return ( - + {children} ); -}); +}; /** * @name createStepSchema diff --git a/packages/ui/src/shadcn/accordion.tsx b/packages/ui/src/shadcn/accordion.tsx index 593a67834..ecdcb23f3 100644 --- a/packages/ui/src/shadcn/accordion.tsx +++ b/packages/ui/src/shadcn/accordion.tsx @@ -9,25 +9,18 @@ import { cn } from '../lib/utils'; const Accordion = AccordionPrimitive.Root; -const AccordionItem = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - -)); +const AccordionItem: React.FC< + React.ComponentPropsWithRef +> = ({ className, ...props }) => ( + +); AccordionItem.displayName = 'AccordionItem'; -const AccordionTrigger = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, children, ...props }, ref) => ( +const AccordionTrigger: React.FC< + React.ComponentPropsWithRef +> = ({ className, children, ...props }) => ( svg]:rotate-180', className, @@ -38,21 +31,19 @@ const AccordionTrigger = React.forwardRef< -)); +); AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName; -const AccordionContent = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, children, ...props }, ref) => ( +const AccordionContent: React.FC< + React.ComponentPropsWithRef +> = ({ className, children, ...props }) => (
{children}
 -)); +); AccordionContent.displayName = AccordionPrimitive.Content.displayName; export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }; diff --git a/packages/ui/src/shadcn/alert-dialog.tsx b/packages/ui/src/shadcn/alert-dialog.tsx index 9e8f7426e..e400129dc 100644 --- a/packages/ui/src/shadcn/alert-dialog.tsx +++ b/packages/ui/src/shadcn/alert-dialog.tsx @@ -13,29 +13,25 @@ const AlertDialogTrigger = AlertDialogPrimitive.Trigger; const AlertDialogPortal = AlertDialogPrimitive.Portal; -const AlertDialogOverlay = React.forwardRef< - React.ElementRef, +const AlertDialogOverlay: React.FC< React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( +> = ({ className, ...props }) => ( -)); +); AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName; -const AlertDialogContent = React.forwardRef< - React.ElementRef, +const AlertDialogContent: React.FC< React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( +> = ({ className, ...props }) => ( -)); +); AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName; const AlertDialogHeader = ({ @@ -74,49 +70,41 @@ const AlertDialogFooter = ({ ); AlertDialogFooter.displayName = 'AlertDialogFooter'; -const AlertDialogTitle = React.forwardRef< - React.ElementRef, +const AlertDialogTitle: React.FC< React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( +> = ({ className, ...props }) => ( -)); +); AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName; -const AlertDialogDescription = React.forwardRef< - React.ElementRef, +const AlertDialogDescription: React.FC< React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( +> = ({ className, ...props }) => ( -)); +); AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName; -const AlertDialogAction = React.forwardRef< - React.ElementRef, +const AlertDialogAction: React.FC< React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( +> = ({ className, ...props }) => ( -)); +); AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName; -const AlertDialogCancel = React.forwardRef< - React.ElementRef, +const AlertDialogCancel: React.FC< React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( +> = ({ className, ...props }) => ( -)); +); AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName; export { diff --git a/packages/ui/src/shadcn/alert.tsx b/packages/ui/src/shadcn/alert.tsx index e2788495e..0198c09dd 100644 --- a/packages/ui/src/shadcn/alert.tsx +++ b/packages/ui/src/shadcn/alert.tsx @@ -25,41 +25,36 @@ const alertVariants = cva( }, ); -const Alert = React.forwardRef< - HTMLDivElement, +const Alert: React.FC< React.HTMLAttributes & VariantProps ->(({ className, variant, ...props }, ref) => ( +> = ({ className, variant, ...props }) => (
-)); +); Alert.displayName = 'Alert'; -const AlertTitle = React.forwardRef< - HTMLParagraphElement, - React.HTMLAttributes ->(({ className, ...props }, ref) => ( +const AlertTitle: React.FC> = ({ + className, + ...props +}) => (
-)); +); AlertTitle.displayName = 'AlertTitle'; -const AlertDescription = React.forwardRef< - HTMLParagraphElement, +const AlertDescription: React.FC< React.HTMLAttributes ->(({ className, ...props }, ref) => ( +> = ({ className, ...props }) => (
-)); +); AlertDescription.displayName = 'AlertDescription'; export { Alert, AlertTitle, AlertDescription }; diff --git a/packages/ui/src/shadcn/avatar.tsx b/packages/ui/src/shadcn/avatar.tsx index 9793aa8b4..e2a9cc747 100644 --- a/packages/ui/src/shadcn/avatar.tsx +++ b/packages/ui/src/shadcn/avatar.tsx @@ -6,46 +6,40 @@ import * as AvatarPrimitive from '@radix-ui/react-avatar'; import { cn } from '../lib/utils'; -const Avatar = React.forwardRef< - React.ElementRef, +const Avatar: React.FC< React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( +> = ({ className, ...props }) => ( -)); +); Avatar.displayName = AvatarPrimitive.Root.displayName; -const AvatarImage = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( +const AvatarImage: React.FC< + React.ComponentPropsWithRef +> = ({ className, ...props }) => ( -)); +); AvatarImage.displayName = AvatarPrimitive.Image.displayName; -const AvatarFallback = React.forwardRef< - React.ElementRef, +const AvatarFallback: React.FC< React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( +> = ({ className, ...props }) => ( -)); +); AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName; export { Avatar, AvatarImage, AvatarFallback }; diff --git a/packages/ui/src/shadcn/breadcrumb.tsx b/packages/ui/src/shadcn/breadcrumb.tsx index 33df9a229..c30bb1498 100644 --- a/packages/ui/src/shadcn/breadcrumb.tsx +++ b/packages/ui/src/shadcn/breadcrumb.tsx @@ -5,52 +5,47 @@ import { Slot } from '@radix-ui/react-slot'; import { cn } from '../lib/utils'; -const Breadcrumb = React.forwardRef< - HTMLElement, +const Breadcrumb: React.FC< React.ComponentPropsWithoutRef<'nav'> & { separator?: React.ReactNode; } ->(({ ...props }, ref) =>