171 bug allow passing refs to inputbutton components (#172)

* Refactor UI components to use ComponentPropsWithRef for improved type safety
* Updated dependencies and removed duplicate instance of Tslint since it's already provided in the Next.js config
This commit is contained in:
Giancarlo Buomprisco
2025-02-19 08:34:20 +07:00
committed by GitHub
parent cdf7cc6f00
commit 0808b91e0d
27 changed files with 759 additions and 636 deletions

View File

@@ -27,13 +27,13 @@
"@kit/tsconfig": "workspace:*",
"@kit/ui": "workspace:*",
"@supabase/supabase-js": "2.48.1",
"@types/react": "19.0.9",
"@types/react": "19.0.10",
"date-fns": "^4.1.0",
"lucide-react": "^0.475.0",
"next": "15.1.7",
"react": "19.0.0",
"react-hook-form": "^7.54.2",
"react-i18next": "^15.4.0",
"react-i18next": "^15.4.1",
"zod": "^3.24.2"
},
"typesVersions": {

View File

@@ -24,7 +24,7 @@
"@kit/supabase": "workspace:*",
"@kit/tsconfig": "workspace:*",
"@kit/ui": "workspace:*",
"@types/react": "19.0.9",
"@types/react": "19.0.10",
"next": "15.1.7",
"react": "19.0.0",
"zod": "^3.24.2"

View File

@@ -27,7 +27,7 @@
"@kit/supabase": "workspace:*",
"@kit/tsconfig": "workspace:*",
"@kit/ui": "workspace:*",
"@types/react": "19.0.9",
"@types/react": "19.0.10",
"date-fns": "^4.1.0",
"next": "15.1.7",
"react": "19.0.0",

View File

@@ -27,7 +27,7 @@
"@kit/tsconfig": "workspace:*",
"@kit/ui": "workspace:*",
"@types/node": "^22.13.4",
"@types/react": "19.0.9",
"@types/react": "19.0.10",
"react": "19.0.0",
"zod": "^3.24.2"
},

View File

@@ -21,7 +21,7 @@
"@kit/tsconfig": "workspace:*",
"@kit/ui": "workspace:*",
"@types/node": "^22.13.4",
"@types/react": "19.0.9",
"@types/react": "19.0.10",
"wp-types": "^4.67.0"
},
"typesVersions": {

View File

@@ -34,17 +34,17 @@
"@kit/ui": "workspace:*",
"@radix-ui/react-icons": "^1.3.2",
"@supabase/supabase-js": "2.48.1",
"@tanstack/react-query": "5.66.3",
"@types/react": "19.0.9",
"@types/react-dom": "19.0.3",
"@tanstack/react-query": "5.66.7",
"@types/react": "19.0.10",
"@types/react-dom": "19.0.4",
"lucide-react": "^0.475.0",
"next": "15.1.7",
"next-themes": "0.4.4",
"react": "19.0.0",
"react-dom": "19.0.0",
"react-hook-form": "^7.54.2",
"react-i18next": "^15.4.0",
"sonner": "^1.7.4",
"react-i18next": "^15.4.1",
"sonner": "^2.0.0",
"zod": "^3.24.2"
},
"prettier": "@kit/prettier-config",

View File

@@ -21,9 +21,9 @@
"@makerkit/data-loader-supabase-core": "^0.0.8",
"@makerkit/data-loader-supabase-nextjs": "^1.2.3",
"@supabase/supabase-js": "2.48.1",
"@tanstack/react-query": "5.66.3",
"@tanstack/react-query": "5.66.7",
"@tanstack/react-table": "^8.21.2",
"@types/react": "19.0.9",
"@types/react": "19.0.10",
"lucide-react": "^0.475.0",
"next": "15.1.7",
"react": "19.0.0",

View File

@@ -29,13 +29,13 @@
"@marsidev/react-turnstile": "^1.1.0",
"@radix-ui/react-icons": "^1.3.2",
"@supabase/supabase-js": "2.48.1",
"@tanstack/react-query": "5.66.3",
"@types/react": "19.0.9",
"@tanstack/react-query": "5.66.7",
"@types/react": "19.0.10",
"lucide-react": "^0.475.0",
"next": "15.1.7",
"react-hook-form": "^7.54.2",
"react-i18next": "^15.4.0",
"sonner": "^1.7.4",
"react-i18next": "^15.4.1",
"sonner": "^2.0.0",
"zod": "^3.24.2"
},
"prettier": "@kit/prettier-config",

View File

@@ -20,12 +20,12 @@
"@kit/tsconfig": "workspace:*",
"@kit/ui": "workspace:*",
"@supabase/supabase-js": "2.48.1",
"@tanstack/react-query": "5.66.3",
"@types/react": "19.0.9",
"@tanstack/react-query": "5.66.7",
"@types/react": "19.0.10",
"lucide-react": "^0.475.0",
"react": "19.0.0",
"react-dom": "19.0.0",
"react-i18next": "^15.4.0"
"react-i18next": "^15.4.1"
},
"prettier": "@kit/prettier-config",
"typesVersions": {

View File

@@ -32,10 +32,10 @@
"@kit/tsconfig": "workspace:*",
"@kit/ui": "workspace:*",
"@supabase/supabase-js": "2.48.1",
"@tanstack/react-query": "5.66.3",
"@tanstack/react-query": "5.66.7",
"@tanstack/react-table": "^8.21.2",
"@types/react": "19.0.9",
"@types/react-dom": "19.0.3",
"@types/react": "19.0.10",
"@types/react-dom": "19.0.4",
"class-variance-authority": "^0.7.1",
"date-fns": "^4.1.0",
"lucide-react": "^0.475.0",
@@ -43,8 +43,8 @@
"react": "19.0.0",
"react-dom": "19.0.0",
"react-hook-form": "^7.54.2",
"react-i18next": "^15.4.0",
"sonner": "^1.7.4",
"react-i18next": "^15.4.1",
"sonner": "^2.0.0",
"zod": "^3.24.2"
},
"prettier": "@kit/prettier-config",

View File

@@ -20,11 +20,11 @@
"@kit/prettier-config": "workspace:*",
"@kit/shared": "workspace:*",
"@kit/tsconfig": "workspace:*",
"@tanstack/react-query": "5.66.3",
"@tanstack/react-query": "5.66.7",
"next": "15.1.7",
"react": "19.0.0",
"react-dom": "19.0.0",
"react-i18next": "^15.4.0"
"react-i18next": "^15.4.1"
},
"dependencies": {
"i18next": "24.2.2",

View File

@@ -24,7 +24,7 @@
"@kit/sentry": "workspace:*",
"@kit/shared": "workspace:*",
"@kit/tsconfig": "workspace:*",
"@types/react": "19.0.9",
"@types/react": "19.0.10",
"react": "19.0.0",
"zod": "^3.24.2"
},

View File

@@ -24,7 +24,7 @@
"@kit/eslint-config": "workspace:*",
"@kit/prettier-config": "workspace:*",
"@kit/tsconfig": "workspace:*",
"@types/react": "19.0.9",
"@types/react": "19.0.10",
"react": "19.0.0",
"zod": "^3.24.2"
},

View File

@@ -17,7 +17,7 @@
"@kit/eslint-config": "workspace:*",
"@kit/prettier-config": "workspace:*",
"@kit/tsconfig": "workspace:*",
"@types/react": "19.0.9",
"@types/react": "19.0.10",
"react": "19.0.0"
},
"typesVersions": {

View File

@@ -24,7 +24,7 @@
"@kit/monitoring-core": "workspace:*",
"@kit/prettier-config": "workspace:*",
"@kit/tsconfig": "workspace:*",
"@types/react": "19.0.9",
"@types/react": "19.0.10",
"react": "19.0.0"
},
"typesVersions": {

View File

@@ -20,7 +20,7 @@
"@kit/eslint-config": "workspace:*",
"@kit/prettier-config": "workspace:*",
"@kit/tsconfig": "workspace:*",
"@types/react": "19.0.9"
"@types/react": "19.0.10"
},
"dependencies": {
"pino": "^9.6.0"

View File

@@ -29,8 +29,8 @@
"@kit/tsconfig": "workspace:*",
"@supabase/ssr": "^0.5.2",
"@supabase/supabase-js": "2.48.1",
"@tanstack/react-query": "5.66.3",
"@types/react": "19.0.9",
"@tanstack/react-query": "5.66.7",
"@types/react": "19.0.10",
"next": "15.1.7",
"react": "19.0.0",
"server-only": "^0.0.1",

View File

@@ -43,10 +43,10 @@
"@kit/prettier-config": "workspace:*",
"@kit/tsconfig": "workspace:*",
"@radix-ui/react-icons": "^1.3.2",
"@tanstack/react-query": "5.66.3",
"@tanstack/react-query": "5.66.7",
"@tanstack/react-table": "^8.21.2",
"@types/react": "19.0.9",
"@types/react-dom": "19.0.3",
"@types/react": "19.0.10",
"@types/react-dom": "19.0.4",
"class-variance-authority": "^0.7.1",
"date-fns": "^4.1.0",
"eslint": "^9.20.1",
@@ -55,9 +55,9 @@
"prettier": "^3.5.1",
"react-day-picker": "^8.10.1",
"react-hook-form": "^7.54.2",
"react-i18next": "^15.4.0",
"sonner": "^1.7.4",
"tailwindcss": "4.0.6",
"react-i18next": "^15.4.1",
"sonner": "^2.0.0",
"tailwindcss": "4.0.7",
"tailwindcss-animate": "^1.0.7",
"typescript": "^5.7.3",
"zod": "^3.24.2"

View File

@@ -26,7 +26,7 @@ const alertVariants = cva(
);
const Alert: React.FC<
React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
React.ComponentPropsWithRef<'div'> & VariantProps<typeof alertVariants>
> = ({ className, variant, ...props }) => (
<div
role="alert"
@@ -36,7 +36,7 @@ const Alert: React.FC<
);
Alert.displayName = 'Alert';
const AlertTitle: React.FC<React.HTMLAttributes<HTMLHeadingElement>> = ({
const AlertTitle: React.FC<React.ComponentPropsWithRef<'h5'>> = ({
className,
...props
}) => (
@@ -48,7 +48,7 @@ const AlertTitle: React.FC<React.HTMLAttributes<HTMLHeadingElement>> = ({
AlertTitle.displayName = 'AlertTitle';
const AlertDescription: React.FC<
React.HTMLAttributes<HTMLParagraphElement>
React.ComponentPropsWithRef<'div'>
> = ({ className, ...props }) => (
<div
className={cn('text-sm font-normal [&_p]:leading-relaxed', className)}

View File

@@ -37,7 +37,7 @@ const buttonVariants = cva(
);
export interface ButtonProps
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
extends React.ComponentPropsWithRef<'button'>,
VariantProps<typeof buttonVariants> {
asChild?: boolean;
}

View File

@@ -68,7 +68,7 @@ const FormItemContext = React.createContext<FormItemContextValue>(
{} as FormItemContextValue,
);
const FormItem: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
const FormItem: React.FC<React.ComponentPropsWithRef<'div'>> = ({
className,
...props
}) => {
@@ -118,7 +118,7 @@ const FormControl: React.FC<React.ComponentPropsWithoutRef<typeof Slot>> = ({
};
FormControl.displayName = 'FormControl';
const FormDescription: React.FC<React.HTMLAttributes<HTMLParagraphElement>> = ({
const FormDescription: React.FC<React.ComponentPropsWithRef<'p'>> = ({
className,
...props
}) => {
@@ -134,7 +134,7 @@ const FormDescription: React.FC<React.HTMLAttributes<HTMLParagraphElement>> = ({
};
FormDescription.displayName = 'FormDescription';
const FormMessage: React.FC<React.HTMLAttributes<HTMLParagraphElement>> = ({
const FormMessage: React.FC<React.ComponentPropsWithRef<'p'>> = ({
className,
children,
...props

View File

@@ -2,7 +2,7 @@ import * as React from 'react';
import { cn } from '../lib/utils';
export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
export type InputProps = React.ComponentPropsWithRef<'input'>;
const Input: React.FC<InputProps> = ({
className,

View File

@@ -2,7 +2,7 @@ import * as React from 'react';
import { cn } from '../lib/utils';
export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
export type TextareaProps = React.ComponentPropsWithRef<'textarea'>;
const Textarea: React.FC<TextareaProps> = ({ className, ...props }) => {
return (