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

@@ -57,7 +57,7 @@
"@marsidev/react-turnstile": "^1.1.0", "@marsidev/react-turnstile": "^1.1.0",
"@radix-ui/react-icons": "^1.3.2", "@radix-ui/react-icons": "^1.3.2",
"@supabase/supabase-js": "2.48.1", "@supabase/supabase-js": "2.48.1",
"@tanstack/react-query": "5.66.3", "@tanstack/react-query": "5.66.7",
"@tanstack/react-table": "^8.21.2", "@tanstack/react-table": "^8.21.2",
"date-fns": "^4.1.0", "date-fns": "^4.1.0",
"lucide-react": "^0.475.0", "lucide-react": "^0.475.0",
@@ -67,9 +67,9 @@
"react": "19.0.0", "react": "19.0.0",
"react-dom": "19.0.0", "react-dom": "19.0.0",
"react-hook-form": "^7.54.2", "react-hook-form": "^7.54.2",
"react-i18next": "^15.4.0", "react-i18next": "^15.4.1",
"recharts": "2.15.1", "recharts": "2.15.1",
"sonner": "^1.7.4", "sonner": "^2.0.0",
"tailwind-merge": "^3.0.1", "tailwind-merge": "^3.0.1",
"zod": "^3.24.2" "zod": "^3.24.2"
}, },
@@ -78,18 +78,18 @@
"@kit/prettier-config": "workspace:*", "@kit/prettier-config": "workspace:*",
"@kit/tsconfig": "workspace:*", "@kit/tsconfig": "workspace:*",
"@next/bundle-analyzer": "15.1.7", "@next/bundle-analyzer": "15.1.7",
"@tailwindcss/postcss": "^4.0.6", "@tailwindcss/postcss": "^4.0.7",
"@types/mdx": "^2.0.13", "@types/mdx": "^2.0.13",
"@types/node": "^22.13.4", "@types/node": "^22.13.4",
"@types/react": "19.0.9", "@types/react": "19.0.10",
"@types/react-dom": "19.0.3", "@types/react-dom": "19.0.4",
"autoprefixer": "^10.4.20", "autoprefixer": "^10.4.20",
"babel-plugin-react-compiler": "beta", "babel-plugin-react-compiler": "beta",
"dotenv-cli": "^8.0.0", "dotenv-cli": "^8.0.0",
"pino-pretty": "^13.0.0", "pino-pretty": "^13.0.0",
"prettier": "^3.5.1", "prettier": "^3.5.1",
"supabase": "^2.12.1", "supabase": "^2.12.1",
"tailwindcss": "4.0.6", "tailwindcss": "4.0.7",
"tailwindcss-animate": "^1.0.7", "tailwindcss-animate": "^1.0.7",
"typescript": "^5.7.3" "typescript": "^5.7.3"
}, },

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

1280
pnpm-lock.yaml generated

File diff suppressed because it is too large Load Diff

View File

@@ -6,7 +6,6 @@ import nextConfig from './nextjs.js';
export default tsEsLint.config( export default tsEsLint.config(
eslint.configs.recommended, eslint.configs.recommended,
tsEsLint.configs.recommended,
nextConfig, nextConfig,
turboConfig, turboConfig,
{ {

View File

@@ -17,7 +17,7 @@
"@types/eslint": "9.6.1", "@types/eslint": "9.6.1",
"eslint-config-next": "15.1.7", "eslint-config-next": "15.1.7",
"eslint-config-turbo": "^2.4.2", "eslint-config-turbo": "^2.4.2",
"typescript-eslint": "8.24.0" "typescript-eslint": "8.24.1"
}, },
"devDependencies": { "devDependencies": {
"@kit/prettier-config": "workspace:*", "@kit/prettier-config": "workspace:*",