refactor: replace antd Input with @cherrystudio/ui Input across components

Author: EurFelux

packages/ui/src/components/composites/CollapsibleSearchBar/index.tsx

@@ -1,10 +1,9 @@
 // Original path: src/renderer/src/components/CollapsibleSearchBar.tsx
-import type { InputRef } from 'antd'
-import { Input } from 'antd'
 import { Search } from 'lucide-react'
 import { motion } from 'motion/react'
 import React, { memo, useCallback, useEffect, useRef, useState } from 'react'
 
+import { Input } from '../../primitives/input'
 import { Tooltip } from '../../primitives/tooltip'
 
 interface CollapsibleSearchBarProps {
@@ -30,7 +29,7 @@ const CollapsibleSearchBar = ({
 }: CollapsibleSearchBarProps) => {
   const [searchVisible, setSearchVisible] = useState(false)
   const [searchText, setSearchText] = useState('')
-  const inputRef = useRef<InputRef>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
 
   const handleTextChange = useCallback(
     (text: string) => {

packages/ui/src/components/primitives/input.tsx

@@ -1,14 +1,17 @@
 import { cn } from '@cherrystudio/ui/utils'
+import { EyeIcon } from 'lucide-react'
 import React, { useMemo } from 'react'
 
+import { Button } from './button'
+
 export interface InputProps extends React.ComponentPropsWithRef<'input'> {
   startContent?: React.ReactNode
   endContent?: React.ReactNode
   label?: string
   caption?: string
 }
 
-export function Input({ className, type, required, label, caption, ...props }: InputProps) {
+export function Input({ startContent, endContent, className, type, required, label, caption, ...props }: InputProps) {
   const id = React.useId()
 
   const input = useMemo(() => {
@@ -35,11 +38,20 @@ export function Input({ className, type, required, label, caption, ...props }: I
     return (
       <div className="flex flex-col w-full">
         <label htmlFor={id}>{label}</label>
+        <div>{startContent}</div>
         {input}
+        <div>
+          <Button>
+            <EyeIcon />
+          </Button>
+          {endContent}
+        </div>
         {caption && <div className="text-muted-foreground">{caption}</div>}
       </div>
     )
   }
 
   return input
 }
+
+function InputPassword() {}

src/renderer/src/components/CollapsibleSearchBar.tsx

@@ -1,7 +1,7 @@
 import { Tooltip } from '@cherrystudio/ui'
+import { Input } from '@cherrystudio/ui'
 import i18n from '@renderer/i18n'
 import type { InputRef } from 'antd'
-import { Input } from 'antd'
 import { Search } from 'lucide-react'
 import { motion } from 'motion/react'
 import React, { memo, useCallback, useEffect, useRef, useState } from 'react'

src/renderer/src/components/LocalBackupModals.tsx

@@ -1,7 +1,8 @@
 import { Button } from '@cherrystudio/ui'
+import { Input } from '@cherrystudio/ui'
 import { loggerService } from '@logger'
 import { backupToLocal } from '@renderer/services/BackupService'
-import { Input, Modal } from 'antd'
+import { Modal } from 'antd'
 import dayjs from 'dayjs'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'

src/renderer/src/components/NutstorePathSelector.tsx

@@ -1,8 +1,8 @@
 import { RowFlex } from '@cherrystudio/ui'
 import { Button } from '@cherrystudio/ui'
+import { Input } from '@cherrystudio/ui'
 import { loggerService } from '@logger'
 import { FolderIcon as NutstoreFolderIcon } from '@renderer/components/Icons/NutstoreIcons'
-import { Input } from 'antd'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'

src/renderer/src/components/ObsidianExportDialog.tsx

@@ -1,4 +1,5 @@
 import { Switch } from '@cherrystudio/ui'
+import { Input } from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
 import { loggerService } from '@logger'
 import i18n from '@renderer/i18n'
@@ -11,7 +12,7 @@ import {
   messageToMarkdownWithReasoning,
   topicToMarkdown
 } from '@renderer/utils/export'
-import { Alert, Empty, Form, Input, Modal, Select, Spin, TreeSelect } from 'antd'
+import { Alert, Empty, Form, Modal, Select, Spin, TreeSelect } from 'antd'
 import React, { useEffect, useState } from 'react'
 const logger = loggerService.withContext('ObsidianExportDialog')
 

src/renderer/src/components/Popups/AddAssistantPopup.tsx

@@ -1,4 +1,5 @@
 import { RowFlex } from '@cherrystudio/ui'
+import { Input } from '@cherrystudio/ui'
 import { TopView } from '@renderer/components/TopView'
 import { useAssistants, useDefaultAssistant } from '@renderer/hooks/useAssistant'
 import { useAssistantPresets } from '@renderer/hooks/useAssistantPresets'
@@ -9,7 +10,7 @@ import { EVENT_NAMES, EventEmitter } from '@renderer/services/EventService'
 import type { Assistant, AssistantPreset } from '@renderer/types'
 import { uuid } from '@renderer/utils'
 import type { InputRef } from 'antd'
-import { Divider, Input, Modal, Tag } from 'antd'
+import { Divider, Modal, Tag } from 'antd'
 import { take } from 'lodash'
 import { Search } from 'lucide-react'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'

src/renderer/src/components/Popups/ApiKeyListPopup/item.tsx

@@ -1,11 +1,12 @@
 import { Button, Flex, Tooltip } from '@cherrystudio/ui'
+import { Input } from '@cherrystudio/ui'
 import { type HealthResult, HealthStatusIndicator } from '@renderer/components/HealthStatusIndicator'
 import { EditIcon } from '@renderer/components/Icons'
 import { StreamlineGoodHealthAndWellBeing } from '@renderer/components/Icons/SVGIcon'
 import type { ApiKeyWithStatus } from '@renderer/types/healthCheck'
 import { maskApiKey } from '@renderer/utils/api'
 import type { InputRef } from 'antd'
-import { Input, List, Popconfirm, Typography } from 'antd'
+import { List, Popconfirm, Typography } from 'antd'
 import { Check, Minus, X } from 'lucide-react'
 import type { FC } from 'react'
 import { memo, useEffect, useRef, useState } from 'react'

src/renderer/src/components/Popups/PromptPopup.tsx

@@ -1,5 +1,6 @@
 import { Box } from '@cherrystudio/ui'
-import { Input, Modal } from 'antd'
+import { Input } from '@cherrystudio/ui'
+import { Modal } from 'antd'
 import type { TextAreaProps } from 'antd/es/input'
 import type { ReactNode } from 'react'
 import { useRef, useState } from 'react'

src/renderer/src/components/Popups/SelectModelPopup/searchbar.tsx

@@ -1,6 +1,6 @@
 import { RowFlex } from '@cherrystudio/ui'
+import { Input } from '@cherrystudio/ui'
 import type { InputRef } from 'antd'
-import { Input } from 'antd'
 import { Search } from 'lucide-react'
 import React, { memo, useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'