zaid.marzguioui/myeasycms-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

React 19 refactoring: Removed forwardRef references in all UI Components (#99)

Browse Source 
* 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
Download Patch File Download Diff File Expand all files Collapse all files

44
packages/ui/src/shadcn/input-otp.tsx
View File

@@ -7,12 +7,12 @@ import { OTPInput, OTPInputContext } from 'input-otp';
import { cn } from '../lib/utils';
const InputOTP = React.forwardRef<
React.ElementRef<typeof OTPInput>,
React.ComponentPropsWithoutRef<typeof OTPInput>
>(({ className, containerClassName, ...props }, ref) => (
const InputOTP: React.FC<React.ComponentPropsWithoutRef<typeof OTPInput>> = ({
className,
containerClassName,
...props
}) => (
<OTPInput
ref={ref}
containerClassName={cn(
'flex items-center gap-2 has-[:disabled]:opacity-50',
containerClassName,
@@ -20,21 +20,19 @@ const InputOTP = React.forwardRef<
className={cn('disabled:cursor-not-allowed', className)}
{...props}
/>
));
);
InputOTP.displayName = 'InputOTP';
const InputOTPGroup = React.forwardRef<
React.ElementRef<'div'>,
React.ComponentPropsWithoutRef<'div'>
>(({ className, ...props }, ref) => (
<div ref={ref} className={cn('flex items-center', className)} {...props} />
));
const InputOTPGroup: React.FC<React.ComponentPropsWithoutRef<'div'>> = ({
className,
...props
}) => <div className={cn('flex items-center', className)} {...props} />;
InputOTPGroup.displayName = 'InputOTPGroup';
const InputOTPSlot = React.forwardRef<
React.ElementRef<'div'>,
React.ComponentPropsWithoutRef<'div'> & { index: number }
>(({ index, className, ...props }, ref) => {
const InputOTPSlot: React.FC<
React.ComponentPropsWithRef<'div'> & { index: number }
> = ({ index, className, ...props }) => {
const inputOTPContext = React.useContext(OTPInputContext);
const slot = inputOTPContext.slots[index];
@@ -46,7 +44,6 @@ const InputOTPSlot = React.forwardRef<
return (
<div
ref={ref}
className={cn(
'relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md',
isActive && 'z-10 ring-1 ring-ring',
@@ -62,17 +59,16 @@ const InputOTPSlot = React.forwardRef<
)}
</div>
);
});
};
InputOTPSlot.displayName = 'InputOTPSlot';
const InputOTPSeparator = React.forwardRef<
React.ElementRef<'div'>,
React.ComponentPropsWithoutRef<'div'>
>(({ ...props }, ref) => (
<div ref={ref} role="separator" {...props}>
const InputOTPSeparator: React.FC<React.ComponentPropsWithoutRef<'div'>> = ({
...props
}) => (
<div role="separator" {...props}>
<DashIcon />
</div>
));
);
InputOTPSeparator.displayName = 'InputOTPSeparator';
export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };