chore: update types

apps/gitness/src/pages-v2/signin.tsx

@@ -1,11 +1,12 @@
+import { FC } from 'react'
 import { useNavigate } from 'react-router-dom'
 
 import { getUser, useOnLoginMutation } from '@harnessio/code-service-client'
-import { SignInDataProps, SignInPage } from '@harnessio/ui/views'
+import { SignInData, SignInPage } from '@harnessio/ui/views'
 
 import { useAppContext } from '../framework/context/AppContext'
 
-export const SignIn: React.FC = () => {
+export const SignIn: FC = () => {
   const navigate = useNavigate()
   const { setCurrentUser } = useAppContext()
   const {
@@ -31,7 +32,7 @@ export const SignIn: React.FC = () => {
   return (
     <SignInPage
       isLoading={isLoading}
-      handleSignIn={(data: SignInDataProps) => {
+      handleSignIn={(data: SignInData) => {
         login({
           body: {
             login_identifier: data.email,

apps/gitness/src/pages-v2/signup.tsx

@@ -2,7 +2,7 @@ import { useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
 
 import { useOnRegisterMutation } from '@harnessio/code-service-client'
-import { SignUpDataProps, SignUpPage } from '@harnessio/ui/views'
+import { SignUpData, SignUpPage } from '@harnessio/ui/views'
 
 export const SignUp: React.FC = () => {
   const navigate = useNavigate()
@@ -20,7 +20,7 @@ export const SignUp: React.FC = () => {
     }
   }, [isSuccess])
 
-  const handleSignUp = (data: SignUpDataProps) => {
+  const handleSignUp = (data: SignUpData) => {
     register({
       body: {
         email: data.email,

packages/ui/src/components/card.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { forwardRef, HTMLAttributes } from 'react'
 
 import { cn } from '@utils/cn'
 import { cva, type VariantProps } from 'class-variance-authority'
@@ -15,7 +15,7 @@ const cardVariants = cva('rounded-lg border bg-card text-card-foreground shadow'
   }
 })
 
-export interface CardProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {
+export interface CardProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {
   width?: 'auto' | 'full' | 'screen' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | string
 }
 
@@ -32,26 +32,26 @@ const widthClasses = {
   '2xl': 'w-96'
 }
 
-const Card = React.forwardRef<HTMLDivElement, CardProps>(({ variant, className, width = 'auto', ...props }, ref) => {
+const Card = forwardRef<HTMLDivElement, CardProps>(({ variant, className, width = 'auto', ...props }, ref) => {
   const widthClass = widthClasses[width as keyof typeof widthClasses] || width
 
   return <div ref={ref} className={cn(cardVariants({ variant }), widthClass, className)} {...props} />
 })
 
 Card.displayName = 'Card'
 
-const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+const CardHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
   ({ className = 'space-y-1.5 p-6', ...props }, ref) => (
     <div ref={ref} className={cn('flex flex-col', className)} {...props} />
   )
 )
 CardHeader.displayName = 'CardHeader'
 
-interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+interface CardTitleProps extends HTMLAttributes<HTMLHeadingElement> {
   as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
 }
 
-const CardTitle = React.forwardRef<HTMLHeadingElement, CardTitleProps>(
+const CardTitle = forwardRef<HTMLHeadingElement, CardTitleProps>(
   ({ className, children, as: Tag = 'h3', ...props }, ref) => (
     <Tag ref={ref} className={cn('font-medium leading-snug tracking-tight', className)} {...props}>
       {children}
@@ -60,19 +60,19 @@ const CardTitle = React.forwardRef<HTMLHeadingElement, CardTitleProps>(
 )
 CardTitle.displayName = 'CardTitle'
 
-const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+const CardDescription = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(
   ({ className, ...props }, ref) => (
     <p ref={ref} className={cn('text-muted-foreground text-sm', className)} {...props} />
   )
 )
 CardDescription.displayName = 'CardDescription'
 
-const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+const CardContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
   ({ className = 'p-6', ...props }, ref) => <div ref={ref} className={cn('pt-0', className)} {...props} />
 )
 CardContent.displayName = 'CardContent'
 
-const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+const CardFooter = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
   ({ className = 'p-6', ...props }, ref) => (
     <div ref={ref} className={cn('flex items-center pt-0', className)} {...props} />
   )

packages/ui/src/components/input-otp.tsx

@@ -1,11 +1,11 @@
-import * as React from 'react'
+import { ComponentPropsWithoutRef, ElementRef, forwardRef, useContext } from 'react'
 
 import { DashIcon } from '@radix-ui/react-icons'
 import { OTPInput, OTPInputContext } from 'input-otp'
 
 import { cn } from '../utils/cn'
 
-const InputOTP = React.forwardRef<React.ElementRef<typeof OTPInput>, React.ComponentPropsWithoutRef<typeof OTPInput>>(
+const InputOTP = forwardRef<ElementRef<typeof OTPInput>, ComponentPropsWithoutRef<typeof OTPInput>>(
   ({ className, containerClassName, ...props }, ref) => (
     <OTPInput
       ref={ref}
@@ -17,17 +17,17 @@ const InputOTP = React.forwardRef<React.ElementRef<typeof OTPInput>, React.Compo
 )
 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 = forwardRef<ElementRef<'div'>, ComponentPropsWithoutRef<'div'>>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('flex items-center', className)} {...props} />
+))
 InputOTPGroup.displayName = 'InputOTPGroup'
 
-interface InputOTPSlotProps extends React.ComponentPropsWithoutRef<'div'> {
+interface InputOTPSlotProps extends ComponentPropsWithoutRef<'div'> {
   index: number
 }
 
-const InputOTPSlot = React.forwardRef<HTMLDivElement, InputOTPSlotProps>(({ index, className, ...props }, ref) => {
-  const inputOTPContext = React.useContext(OTPInputContext)
+const InputOTPSlot = forwardRef<HTMLDivElement, InputOTPSlotProps>(({ index, className, ...props }, ref) => {
+  const inputOTPContext = useContext(OTPInputContext)
 
   if (!inputOTPContext?.slots?.[index]) {
     console.error(`No slot data available for index ${index}`)
@@ -57,13 +57,11 @@ const InputOTPSlot = React.forwardRef<HTMLDivElement, InputOTPSlotProps>(({ inde
 })
 InputOTPSlot.displayName = 'InputOTPSlot'
 
-const InputOTPSeparator = React.forwardRef<React.ElementRef<'div'>, React.ComponentPropsWithoutRef<'div'>>(
-  ({ ...props }, ref) => (
-    <div ref={ref} role="separator" {...props}>
-      <DashIcon />
-    </div>
-  )
-)
+const InputOTPSeparator = forwardRef<ElementRef<'div'>, ComponentPropsWithoutRef<'div'>>(({ ...props }, ref) => (
+  <div ref={ref} role="separator" {...props}>
+    <DashIcon />
+  </div>
+))
 InputOTPSeparator.displayName = 'InputOTPSeparator'
 
 export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }

packages/ui/src/components/label.tsx

@@ -1,6 +1,6 @@
 // ToDo: Need to be reviewed by the XD team
 
-import * as React from 'react'
+import { ComponentPropsWithoutRef, ElementRef, forwardRef } from 'react'
 
 import * as LabelPrimitive from '@radix-ui/react-label'
 import { cn } from '@utils/cn'
@@ -18,9 +18,9 @@ const labelVariants = cva('block leading-none peer-disabled:cursor-not-allowed p
   }
 })
 
-const Label = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
+const Label = forwardRef<
+  ElementRef<typeof LabelPrimitive.Root>,
+  ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
 >(({ className, variant, ...props }, ref) => (
   <LabelPrimitive.Root
     ref={ref}

packages/ui/src/views/auth/forgot-password-page.tsx

@@ -10,21 +10,21 @@ import { Button, Card, CardContent, CardHeader, CardTitle, Input, Label, Spacer,
 import { Agreements } from './components/agreements'
 import { AnimatedHarnessLogo } from './components/animated-harness-logo'
 
-interface PageProps {
+interface ForgotPasswordPageProps {
   isLoading?: boolean
-  onSubmit?: (emailData: ForgotPasswordDataProps) => void
+  onSubmit?: (emailData: ForgotPasswordData) => void
   error?: string
 }
 
-export interface ForgotPasswordDataProps {
+export interface ForgotPasswordData {
   email?: string
 }
 
 const forgotPasswordSchema = z.object({
   email: z.string().email({ message: 'Invalid email address' })
 })
 
-export function ForgotPasswordPage({ isLoading, onSubmit, error }: PageProps) {
+export function ForgotPasswordPage({ isLoading, onSubmit, error }: ForgotPasswordPageProps) {
   const [serverError, setServerError] = useState<string | null>(null)
   const {
     register,
@@ -37,7 +37,7 @@ export function ForgotPasswordPage({ isLoading, onSubmit, error }: PageProps) {
     resolver: zodResolver(forgotPasswordSchema)
   })
 
-  const handleOnSubmit: SubmitHandler<ForgotPasswordDataProps> = data => {
+  const handleOnSubmit: SubmitHandler<ForgotPasswordData> = data => {
     // Handle the submission of the forgot password form
     if (onSubmit) {
       onSubmit(data)

packages/ui/src/views/auth/new-password-page.tsx

@@ -9,13 +9,13 @@ import { Button, Card, CardContent, CardHeader, CardTitle, Input, Label, Text }
 import { Agreements } from './components/agreements'
 import { AnimatedHarnessLogo } from './components/animated-harness-logo'
 
-interface PageProps {
+interface NewPasswordPageProps {
   isLoading?: boolean
-  handleFormSubmit?: (data: NewPasswordDataProps) => void
+  handleFormSubmit?: (data: NewPasswordData) => void
   error?: string
 }
 
-export interface NewPasswordDataProps {
+export interface NewPasswordData {
   password?: string
   confirmPassword?: string
 }
@@ -30,7 +30,7 @@ const newPasswordSchema = z
     path: ['confirmPassword']
   })
 
-export function NewPasswordPage({ isLoading, handleFormSubmit, error }: PageProps) {
+export function NewPasswordPage({ isLoading, handleFormSubmit, error }: NewPasswordPageProps) {
   const [serverError, setServerError] = useState<string | null>(null)
   const {
     register,
@@ -43,7 +43,7 @@ export function NewPasswordPage({ isLoading, handleFormSubmit, error }: PageProp
     resolver: zodResolver(newPasswordSchema)
   })
 
-  const onFormSubmit = (data: NewPasswordDataProps) => {
+  const onFormSubmit = (data: NewPasswordData) => {
     handleFormSubmit?.(data)
   }
 

packages/ui/src/views/auth/otp-page.tsx

@@ -23,14 +23,14 @@ import { AnimatedHarnessLogo } from './components/animated-harness-logo'
 
 const OTP_LENGTH = 4
 
-interface PageProps {
+interface OTPPageProps {
   handleResend?: () => void
   isLoading?: boolean
-  handleFormSubmit?: (data: OtpPageDataProps) => void
+  handleFormSubmit?: (data: OtpPageData) => void
   error?: string
 }
 
-export interface OtpPageDataProps {
+export interface OtpPageData {
   email?: string
   otp: string
 }
@@ -42,7 +42,7 @@ const otpPasswordSchema = z.object({
     .regex(/^\d+$/, { message: 'Code must contain only numbers' })
 })
 
-export function OTPPage({ handleResend, isLoading, handleFormSubmit, error }: PageProps) {
+export function OTPPage({ handleResend, isLoading, handleFormSubmit, error }: OTPPageProps) {
   const [serverError, setServerError] = useState<string | null>(null)
   // TODO: get email from url or from context
   const email = '[email protected]'
@@ -53,7 +53,7 @@ export function OTPPage({ handleResend, isLoading, handleFormSubmit, error }: Pa
     formState: { errors },
     reset,
     watch
-  } = useForm<OtpPageDataProps>({
+  } = useForm<OtpPageData>({
     mode: 'onSubmit',
     resolver: zodResolver(otpPasswordSchema),
     defaultValues: {
@@ -62,7 +62,7 @@ export function OTPPage({ handleResend, isLoading, handleFormSubmit, error }: Pa
   })
   const otpValue = watch('otp')
 
-  const onSubmit = (data: OtpPageDataProps) => {
+  const onSubmit = (data: OtpPageData) => {
     setServerError(null)
     handleFormSubmit?.({ ...data, email })
     reset()

packages/ui/src/views/auth/signin-page.tsx

@@ -10,13 +10,13 @@ import { Button, Card, CardContent, CardHeader, CardTitle, Input, Label, Spacer,
 import { Agreements } from './components/agreements'
 import { AnimatedHarnessLogo } from './components/animated-harness-logo'
 
-interface PageProps {
-  handleSignIn: (data: SignInDataProps) => void
+interface SignInPageProps {
+  handleSignIn: (data: SignInData) => void
   isLoading?: boolean
   error?: string
 }
 
-export interface SignInDataProps {
+export interface SignInData {
   email?: string
   password?: string
 }
@@ -26,7 +26,7 @@ const signInSchema = z.object({
   password: z.string().min(1, { message: 'The field can’t be blank' })
 })
 
-export function SignInPage({ handleSignIn, isLoading, error }: PageProps) {
+export function SignInPage({ handleSignIn, isLoading, error }: SignInPageProps) {
   const [serverError, setServerError] = useState<string | null>(null)
   const {
     register,
@@ -39,7 +39,7 @@ export function SignInPage({ handleSignIn, isLoading, error }: PageProps) {
     resolver: zodResolver(signInSchema)
   })
 
-  const onSubmit = (data: SignInDataProps) => {
+  const onSubmit = (data: SignInData) => {
     handleSignIn(data)
   }
 

packages/ui/src/views/auth/signup-page.tsx

@@ -10,13 +10,13 @@ import { Button, Card, CardContent, CardHeader, CardTitle, Input, Label, Spacer,
 import { Agreements } from './components/agreements'
 import { AnimatedHarnessLogo } from './components/animated-harness-logo'
 
-interface PageProps {
+interface SignUpPageProps {
   isLoading?: boolean
-  handleSignUp: (data: SignUpDataProps) => void
+  handleSignUp: (data: SignUpData) => void
   error?: string
 }
 
-export interface SignUpDataProps {
+export interface SignUpData {
   userId?: string
   email?: string
   password?: string
@@ -35,7 +35,7 @@ const signUpSchema = z
     path: ['confirmPassword']
   })
 
-export function SignUpPage({ isLoading, handleSignUp, error }: PageProps) {
+export function SignUpPage({ isLoading, handleSignUp, error }: SignUpPageProps) {
   const [serverError, setServerError] = useState<string | null>(null)
   const {
     register,
@@ -47,7 +47,7 @@ export function SignUpPage({ isLoading, handleSignUp, error }: PageProps) {
     resolver: zodResolver(signUpSchema)
   })
 
-  const onSubmit = (data: SignUpDataProps) => {
+  const onSubmit = (data: SignUpData) => {
     handleSignUp(data)
     reset()
   }