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
This commit is contained in:
Giancarlo Buomprisco
2024-12-23 15:15:00 +08:00
committed by GitHub
parent 970f901d05
commit cec47cef78
58 changed files with 1359 additions and 1610 deletions

View File

@@ -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<HTMLHeadingElement>
>(({ className, ...props }, ref) => (
const EmptyStateHeading: React.FC<React.HTMLAttributes<HTMLHeadingElement>> = ({
className,
...props
}) => (
<h3
ref={ref}
className={cn('text-2xl font-bold tracking-tight', className)}
{...props}
/>
));
);
EmptyStateHeading.displayName = 'EmptyStateHeading';
const EmptyStateText = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => (
<p
ref={ref}
className={cn('text-sm text-muted-foreground', className)}
{...props}
/>
));
const EmptyStateText: React.FC<React.HTMLAttributes<HTMLParagraphElement>> = ({
className,
...props
}) => (
<p className={cn('text-sm text-muted-foreground', className)} {...props} />
);
EmptyStateText.displayName = 'EmptyStateText';
const EmptyStateButton = React.forwardRef<
HTMLButtonElement,
const EmptyStateButton: React.FC<
React.ComponentPropsWithoutRef<typeof Button>
>(({ className, ...props }, ref) => (
<Button ref={ref} className={cn('mt-4', className)} {...props} />
));
> = ({ className, ...props }) => (
<Button className={cn('mt-4', className)} {...props} />
);
EmptyStateButton.displayName = 'EmptyStateButton';
const EmptyState = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ children, className, ...props }, ref) => {
const EmptyState: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
children,
className,
...props
}) => {
const childrenArray = React.Children.toArray(children);
const heading = childrenArray.find(
@@ -63,7 +59,6 @@ const EmptyState = React.forwardRef<
return (
<div
ref={ref}
className={cn(
'flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm',
className,
@@ -78,7 +73,7 @@ const EmptyState = React.forwardRef<
</div>
</div>
);
});
};
EmptyState.displayName = 'EmptyState';
export { EmptyState, EmptyStateHeading, EmptyStateText, EmptyStateButton };