chore: perfect type definition (#1003)

web/app/components/base/emoji-picker/index.tsx

@@ -3,6 +3,7 @@
 import type { ChangeEvent, FC } from 'react'
 import React, { useState } from 'react'
 import data from '@emoji-mart/data'
+import type { Emoji, EmojiMartData } from '@emoji-mart/data'
 import { SearchIndex, init } from 'emoji-mart'
 import cn from 'classnames'
 import {
@@ -30,9 +31,9 @@ declare global {
 init({ data })
 
 async function search(value: string) {
-  const emojis = await SearchIndex.search(value) || []
+  const emojis: Emoji[] = await SearchIndex.search(value) || []
 
-  const results = emojis.map((emoji: any) => {
+  const results = emojis.map((emoji) => {
     return emoji.skins[0].native
   })
   return results
@@ -59,6 +60,7 @@ const backgroundColors = [
   '#ECE9FE',
   '#FFE4E8',
 ]
+
 type IEmojiPickerProps = {
   isModal?: boolean
   onSelect?: (emoji: string, background: string) => void
@@ -69,14 +71,13 @@ const EmojiPicker: FC<IEmojiPickerProps> = ({
   isModal = true,
   onSelect,
   onClose,
-
 }) => {
   const { t } = useTranslation()
-  const { categories } = data as any
+  const { categories } = data as EmojiMartData
   const [selectedEmoji, setSelectedEmoji] = useState('')
   const [selectedBackground, setSelectedBackground] = useState(backgroundColors[0])
 
-  const [searchedEmojis, setSearchedEmojis] = useState([])
+  const [searchedEmojis, setSearchedEmojis] = useState<string[]>([])
   const [isSearching, setIsSearching] = useState(false)
 
   return isModal ? <Modal
@@ -133,11 +134,11 @@ const EmojiPicker: FC<IEmojiPickerProps> = ({
         </div>
       </>}
 
-      {categories.map((category: any, index: number) => {
+      {categories.map((category, index: number) => {
         return <div key={`category-${index}`} className='flex flex-col'>
           <p className='font-medium uppercase text-xs text-[#101828] mb-1'>{category.id}</p>
           <div className='w-full h-full grid grid-cols-8 gap-1'>
-            {category.emojis.map((emoji: string, index: number) => {
+            {category.emojis.map((emoji, index: number) => {
               return <div
                 key={`emoji-${index}`}
                 className='inline-flex w-10 h-10 rounded-lg items-center justify-center'

web/app/components/base/input/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import type { FC } from 'react'
+import type { SVGProps } from 'react'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import s from './style.module.css'
@@ -8,7 +8,7 @@ type InputProps = {
   placeholder?: string
   value?: string
   defaultValue?: string
-  onChange?: (v: any) => void
+  onChange?: (v: string) => void
   className?: string
   wrapperClassName?: string
   type?: string
@@ -16,13 +16,13 @@ type InputProps = {
   prefixIcon?: React.ReactNode
 }
 
-const GlassIcon: FC<{ className?: string }> = ({ className }) => (
+const GlassIcon = ({ className }: SVGProps<SVGElement>) => (
   <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" className={className ?? ''}>
     <path d="M12.25 12.25L10.2084 10.2083M11.6667 6.70833C11.6667 9.44675 9.44675 11.6667 6.70833 11.6667C3.96992 11.6667 1.75 9.44675 1.75 6.70833C1.75 3.96992 3.96992 1.75 6.70833 1.75C9.44675 1.75 11.6667 3.96992 11.6667 6.70833Z" stroke="#344054" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
   </svg>
 )
 
-const Input: FC<InputProps> = ({ value, defaultValue, onChange, className = '', wrapperClassName = '', placeholder, type, showPrefix, prefixIcon }) => {
+const Input = ({ value, defaultValue, onChange, className = '', wrapperClassName = '', placeholder, type, showPrefix, prefixIcon }: InputProps) => {
   const [localValue, setLocalValue] = useState(value ?? defaultValue)
   const { t } = useTranslation()
   return (
@@ -31,7 +31,7 @@ const Input: FC<InputProps> = ({ value, defaultValue, onChange, className = '',
       <input
         type={type ?? 'text'}
         className={`${s.input} ${showPrefix ? '!pl-7' : ''} ${className}`}
-        placeholder={placeholder ?? (showPrefix ? t('common.operation.search') : 'please input')}
+        placeholder={placeholder ?? (showPrefix ? t('common.operation.search') ?? '' : 'please input')}
         value={localValue}
         onChange={(e) => {
           setLocalValue(e.target.value)

web/app/components/base/notion-icon/index.tsx

@@ -7,7 +7,7 @@ type NotionIconProps = {
   type?: IconTypes
   name?: string | null
   className?: string
-  src?: string | null | Pick<DataSourceNotionPage, 'page_icon'>['page_icon']
+  src?: string | null | DataSourceNotionPage['page_icon']
 }
 const NotionIcon = ({
   type = 'workspace',

web/app/components/base/notion-page-selector/base.tsx

@@ -10,17 +10,16 @@ import PageSelector from './page-selector'
 import { preImportNotionPages } from '@/service/datasets'
 import AccountSetting from '@/app/components/header/account-setting'
 import { NotionConnector } from '@/app/components/datasets/create/step-one'
-import type { DataSourceNotionPage, DataSourceNotionPageMap, DataSourceNotionWorkspace } from '@/models/common'
+import type { DataSourceNotionPageMap, DataSourceNotionWorkspace, NotionPage } from '@/models/common'
 import { ToastContext } from '@/app/components/base/toast'
 
-export type NotionPageSelectorValue = DataSourceNotionPage & { workspace_id: string }
 
 type NotionPageSelectorProps = {
   value?: string[]
-  onSelect: (selectedPages: NotionPageSelectorValue[]) => void
+  onSelect: (selectedPages: NotionPage[]) => void
   canPreview?: boolean
   previewPageId?: string
-  onPreview?: (selectedPage: NotionPageSelectorValue) => void
+  onPreview?: (selectedPage: NotionPage) => void
   datasetId?: string
   countLimit: number
   countUsed: number

web/app/components/base/radio/component/radio/index.tsx

@@ -12,7 +12,7 @@ export type IRadioProps = {
   checked?: boolean
   value?: string | number
   disabled?: boolean
-  onChange?: (e: any) => void
+  onChange?: (e?: IRadioProps['value']) => void
 }
 
 export default function Radio({