chore: update types, input variants

Author: americano98

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,47 +32,47 @@ 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}>
+    <Tag ref={ref} className={cn('font-medium text-24 leading-snug tracking-tighter', className)} {...props}>
       {children}
     </Tag>
   )
 )
 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/input.tsx

@@ -1,31 +1,51 @@
-import * as React from 'react'
+import { forwardRef, InputHTMLAttributes } from 'react'
+
+import { cva, VariantProps } from 'class-variance-authority'
 
 import { cn } from '../utils/cn'
 import { Text } from './'
 
-export interface BaseInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
-  isExtended?: boolean
-  error?: string
+export interface BaseInputProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>,
+    VariantProps<typeof inputVariants> {
   wrapperClassName?: string
+  error?: string
 }
 
-const BaseInput = React.forwardRef<HTMLInputElement, BaseInputProps>(
-  ({ className, type, isExtended, error, wrapperClassName, ...props }, ref) => {
-    const commonClassName =
-      'remove-autocomplete-styles bg-transparent placeholder:text-foreground-5 text-foreground-1 px-3 py-1'
-    const specificClassNames = isExtended
-      ? 'border-none grow focus-visible:outline-none'
-      : cn(
+const inputVariants = cva(
+  'remove-autocomplete-styles bg-transparent placeholder:text-foreground-5 text-foreground-1 px-3 py-1',
+  {
+    variants: {
+      variant: {
+        default:
           'flex h-9 w-full rounded border text-sm shadow-sm transition-colors file:border-0 focus-visible:outline-none file:bg-transparent file:text-sm file:font-medium placeholder:text-foreground-4 disabled:cursor-not-allowed disabled:opacity-50',
-          error ? 'border-borders-danger' : 'border-borders-2 focus-visible:border-borders-3'
-        )
+        extended: 'grow border-none focus-visible:outline-none'
+      },
+      theme: {
+        default: 'border-borders-2 focus-visible:border-borders-3',
+        danger: 'border-borders-danger'
+      }
+    }
+  }
+)
 
+const BaseInput = forwardRef<HTMLInputElement, BaseInputProps>(
+  ({ className, type, variant = 'default', theme = 'default', error, wrapperClassName, ...props }, ref) => {
     return (
       <div className={cn('relative flex flex-col', wrapperClassName)}>
-        <input className={cn(commonClassName, specificClassNames, className)} type={type} ref={ref} {...props} />
+        <input
+          className={cn(
+            inputVariants({ variant, theme }),
+            className,
+            error ? 'border-borders-danger' : 'border-borders-2'
+          )}
+          type={type}
+          ref={ref}
+          {...props}
+        />
         {error && (
           <Text
-            className="absolute top-full translate-y-1 leading-none tracking-tight text-foreground-danger"
+            className="absolute top-full translate-y-1 text-foreground-danger leading-none tracking-tight"
             weight="light"
             size={0}
           >
@@ -51,7 +71,7 @@ const containerClassName =
   'remove-autocomplete-styles flex h-9 w-full rounded border border-input text-sm shadow-sm transition-colors placeholder:text-foreground-4 focus-within:outline-none focus-within:ring-1 focus-within:ring-ring disabled:cursor-not-allowed disabled:opacity-50'
 const leftRightCommonClassName = 'flex items-center text-muted-foreground'
 
-const ExtendedInput = React.forwardRef<HTMLInputElement, ExtendedInputProps>(
+const ExtendedInput = forwardRef<HTMLInputElement, ExtendedInputProps>(
   ({ className, type, left, leftStyle, leftClassName, right, rightStyle, rightClassName, ...props }, ref) => {
     return (
       <div className={cn(containerClassName, className)}>
@@ -67,7 +87,7 @@ const ExtendedInput = React.forwardRef<HTMLInputElement, ExtendedInputProps>(
             {left}
           </div>
         )}
-        <BaseInput className={className} type={type} {...props} ref={ref} isExtended={true} />
+        <BaseInput className={className} type={type} {...props} ref={ref} variant="extended" />
         {right && (
           <div
             className={cn(
@@ -86,9 +106,9 @@ const ExtendedInput = React.forwardRef<HTMLInputElement, ExtendedInputProps>(
 )
 ExtendedInput.displayName = 'ExtendedInput'
 
-interface InputProps extends Omit<BaseInputProps, 'isExtended'>, ExtendedInputProps {}
+interface InputProps extends ExtendedInputProps {}
 
-const Input = React.forwardRef<HTMLInputElement, InputProps>(({ left, right, ...props }, ref) => {
+const Input = forwardRef<HTMLInputElement, InputProps>(({ left, right, ...props }, ref) => {
   if (left || right) {
     return <ExtendedInput left={left} right={right} {...props} ref={ref} />
   }

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)
@@ -76,10 +76,10 @@ export function ForgotPasswordPage({ isLoading, onSubmit, error }: PageProps) {
       <Card className="relative z-10 mb-8 max-w-full" variant="plain" width="xl">
         <CardHeader className="items-center">
           <AnimatedHarnessLogo theme={hasError ? 'error' : 'blue'} />
-          <CardTitle className="mt-3 text-center text-2xl" as="h1">
+          <CardTitle className="mt-3 text-center" as="h1">
             Forgot password?
           </CardTitle>
-          <Text className="mt-0.5" size={2} color="foreground-4" align="center" as="p">
+          <Text className="mt-0.5 leading-snug" size={2} color="foreground-4" align="center" as="p">
             Enter your email to receive the verification code.
           </Text>
         </CardHeader>

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)
   }
 
@@ -83,10 +83,10 @@ export function NewPasswordPage({ isLoading, handleFormSubmit, error }: PageProp
       <Card className="relative z-10 mb-8 max-w-full" variant="plain" width="xl">
         <CardHeader className="items-center">
           <AnimatedHarnessLogo theme={hasError ? 'error' : 'blue'} />
-          <CardTitle className="mt-3 text-center text-2xl" as="h1">
+          <CardTitle className="mt-3 text-center" as="h1">
             Create new password
           </CardTitle>
-          <Text className="mt-0.5" size={2} color="foreground-4" align="center" as="p">
+          <Text className="mt-0.5 leading-snug" size={2} color="foreground-4" align="center" as="p">
             Your new password must be different from your previously used password.
           </Text>
         </CardHeader>