feat: export all types related to components (#562)

* feat: export all types related to components

fix(tooltip): fix the vertical offset of the arrow

* refactor: optimize events of all popup related components

* test: append testcases for popup base component

* test: add testcase for visible events

* test: update snapshots

components/auto-complete/auto-complete.tsx

@@ -18,6 +18,8 @@ import { pickChild } from '../utils/collections'
 import useCurrentState from '../utils/use-current-state'
 import useScaleable, { filterScaleableProps, withScaleable } from '../use-scaleable'
 
+export type AutoCompleteTypes = NormalTypes
+
 export type AutoCompleteOption = {
   label: string
   value: string
@@ -29,7 +31,7 @@ export type AutoCompleteOptions = Array<
 
 interface Props {
   options?: AutoCompleteOptions
-  type?: NormalTypes
+  type?: AutoCompleteTypes
   initialValue?: string
   value?: string
   onChange?: (value: string) => void
@@ -50,7 +52,7 @@ const defaultProps = {
   initialValue: '',
   disabled: false,
   clearable: false,
-  type: 'default' as NormalTypes,
+  type: 'default' as AutoCompleteTypes,
   disableMatchWidth: false,
   disableFreeSolo: false,
   className: '',
@@ -135,10 +137,10 @@ const AutoCompleteComponent = React.forwardRef<
       }
       return childrenToOptionsNode(options as Array<AutoCompleteOption>)
     }, [searching, options])
-    const showClearIcon = useMemo(() => clearable && searching === undefined, [
-      clearable,
-      searching,
-    ])
+    const showClearIcon = useMemo(
+      () => clearable && searching === undefined,
+      [clearable, searching],
+    )
 
     const updateValue = (val: string) => {
       if (disabled) return

components/auto-complete/index.ts

@@ -14,4 +14,10 @@ export type AutoCompleteComponentType = typeof AutoComplete & {
 ;(AutoComplete as AutoCompleteComponentType).Searching = AutoCompleteSearching
 ;(AutoComplete as AutoCompleteComponentType).Empty = AutoCompleteEmpty
 
+export type {
+  AutoCompleteOption,
+  AutoCompleteOptions,
+  AutoCompleteProps,
+  AutoCompleteTypes,
+} from './auto-complete'
 export default AutoComplete as AutoCompleteComponentType

components/avatar/index.ts

@@ -6,4 +6,7 @@ export type AvatarComponentType = typeof Avatar & {
 }
 ;(Avatar as AvatarComponentType).Group = AvatarGroup
 
+export type { AvatarProps } from './avatar'
+export type { AvatarGroupProps } from './avatar-group'
+
 export default Avatar as AvatarComponentType

components/badge/badge-anchor.tsx

@@ -5,7 +5,7 @@ import Badge from './badge'
 
 const placement = tuple('topLeft', 'topRight', 'bottomLeft', 'bottomRight')
 
-type BadgeAnchorPlacement = typeof placement[number]
+export type BadgeAnchorPlacement = typeof placement[number]
 
 interface Props {
   placement?: BadgeAnchorPlacement

components/badge/badge.tsx

@@ -4,14 +4,16 @@ import { NormalTypes } from '../utils/prop-types'
 import { GeistUIThemesPalette } from '../themes/presets'
 import useScaleable, { withScaleable } from '../use-scaleable'
 
+export type BadgeTypes = NormalTypes
+
 interface Props {
-  type?: NormalTypes
+  type?: BadgeTypes
   dot?: boolean
   className?: string
 }
 
 const defaultProps = {
-  type: 'default' as NormalTypes,
+  type: 'default' as BadgeTypes,
   dot: false,
   className: '',
 }

components/badge/index.ts

@@ -6,4 +6,6 @@ export type BadgeComponentType = typeof Badge & {
 }
 ;(Badge as BadgeComponentType).Anchor = BadgeAnchor
 
+export type { BadgeProps, BadgeTypes } from './badge'
+export type { BadgeAnchorProps, BadgeAnchorPlacement } from './badge-anchor'
 export default Badge as BadgeComponentType

components/breadcrumbs/index.ts

@@ -9,4 +9,7 @@ export type BreadcrumbsComponentType = typeof Breadcrumbs & {
 ;(Breadcrumbs as BreadcrumbsComponentType).Item = BreadcrumbsItem
 ;(Breadcrumbs as BreadcrumbsComponentType).Separator = BreadcrumbsSeparator
 
+export type { BreadcrumbsProps } from './breadcrumbs'
+export type { BreadcrumbsItemProps } from './breadcrumbs-item'
+export type { BreadcrumbsSeparatorProps } from './breadcrumbs-separator'
 export default Breadcrumbs as BreadcrumbsComponentType

components/button-dropdown/button-dropdown-item.tsx

@@ -5,16 +5,18 @@ import { useButtonDropdown } from './button-dropdown-context'
 import Loading from '../loading'
 import { NormalTypes } from '../utils/prop-types'
 
+export type ButtonDropdownItemTypes = NormalTypes
+
 interface Props {
   main?: boolean
-  type?: NormalTypes
+  type?: ButtonDropdownItemTypes
   onClick?: React.MouseEventHandler<HTMLElement>
   className?: string
 }
 
 const defaultProps = {
   main: false,
-  type: 'default' as NormalTypes,
+  type: 'default' as ButtonDropdownItemTypes,
   onClick: () => {},
   className: '',
 }

components/button-dropdown/button-dropdown.tsx

@@ -9,16 +9,18 @@ import { NormalTypes } from '../utils/prop-types'
 import { pickChild, pickChildByProps } from '../utils/collections'
 import useScaleable, { withScaleable } from '../use-scaleable'
 
+export type ButtonDropdownTypes = NormalTypes
+
 interface Props {
-  type?: NormalTypes
+  type?: ButtonDropdownTypes
   auto?: boolean
   loading?: boolean
   disabled?: boolean
   className?: string
 }
 
 const defaultProps = {
-  type: 'default' as NormalTypes,
+  type: 'default' as ButtonDropdownTypes,
   auto: false,
   loading: false,
   disabled: false,

components/button-dropdown/index.ts

@@ -6,4 +6,9 @@ type ButtonDropdownType = typeof ButtonDropdown & {
 }
 ;(ButtonDropdown as ButtonDropdownType).Item = ButtonDropdownItem
 
+export type { ButtonDropdownProps, ButtonDropdownTypes } from './button-dropdown'
+export type {
+  ButtonDropdownItemProps,
+  ButtonDropdownItemTypes,
+} from './button-dropdown-item'
 export default ButtonDropdown as ButtonDropdownType

components/button-group/index.ts

@@ -1,3 +1,5 @@
 import ButtonGroup from './button-group'
 
+export type { ButtonGroupProps } from './button-group'
+export type { ButtonTypes } from '../utils/prop-types'
 export default ButtonGroup

components/button/index.ts

@@ -1,3 +1,5 @@
 import Button from './button'
 
+export type { ButtonProps } from './button'
+export type { ButtonTypes } from '../utils/prop-types'
 export default Button

components/capacity/index.ts

@@ -1,3 +1,4 @@
 import Capacity from './capacity'
 
+export type { CapacityProps } from './capacity'
 export default Capacity

components/card/index.ts

@@ -13,4 +13,8 @@ export type CardComponentType = typeof Card & {
 ;(Card as CardComponentType).Content = CardContent
 ;(Card as CardComponentType).Body = CardContent
 
+export type { CardProps } from './card'
+export type { CardContentProps } from './card-content'
+export type { CardFooterProps } from './card-footer'
+export type { CardTypes } from '../utils/prop-types'
 export default Card as CardComponentType

components/checkbox/checkbox.tsx

@@ -7,10 +7,10 @@ import { getColors } from './styles'
 import useTheme from '../use-theme'
 import useScaleable, { withScaleable } from '../use-scaleable'
 
-interface CheckboxEventTarget {
+export type CheckboxTypes = NormalTypes
+export interface CheckboxEventTarget {
   checked: boolean
 }
-
 export interface CheckboxEvent {
   target: CheckboxEventTarget
   stopPropagation: () => void
@@ -21,7 +21,7 @@ export interface CheckboxEvent {
 interface Props {
   checked?: boolean
   disabled?: boolean
-  type?: NormalTypes
+  type?: CheckboxTypes
   initialChecked?: boolean
   onChange?: (e: CheckboxEvent) => void
   className?: string
@@ -30,7 +30,7 @@ interface Props {
 
 const defaultProps = {
   disabled: false,
-  type: 'default' as NormalTypes,
+  type: 'default' as CheckboxTypes,
   initialChecked: false,
   className: '',
   value: '',
@@ -70,10 +70,10 @@ const CheckboxComponent: React.FC<CheckboxProps> = ({
     }, [values.join(',')])
   }
 
-  const { fill, bg } = useMemo(() => getColors(theme.palette, type), [
-    theme.palette,
-    type,
-  ])
+  const { fill, bg } = useMemo(
+    () => getColors(theme.palette, type),
+    [theme.palette, type],
+  )
 
   const changeHandle = useCallback(
     (ev: React.ChangeEvent) => {

components/checkbox/index.ts

@@ -6,4 +6,11 @@ export type CheckboxComponentType = typeof Checkbox & {
 }
 ;(Checkbox as CheckboxComponentType).Group = CheckboxGroup
 
+export type {
+  CheckboxProps,
+  CheckboxEvent,
+  CheckboxEventTarget,
+  CheckboxTypes,
+} from './checkbox'
+export type { CheckboxGroupProps } from './checkbox-group'
 export default Checkbox as CheckboxComponentType

components/code/index.ts

@@ -1,5 +1,4 @@
 import Code from './code'
-import { CodeProps } from './code'
 
-export type Props = CodeProps
+export type { CodeProps } from './code'
 export default Code

components/col/index.ts

@@ -1,5 +1,4 @@
 import Col from './col'
-import { ColProps } from './col'
 
-export type Props = ColProps
+export type { ColProps } from './col'
 export default Col

components/collapse/index.ts

@@ -6,4 +6,6 @@ export type CollapseComponentType = typeof Collapse & {
 }
 ;(Collapse as CollapseComponentType).Group = CollapseGroup
 
-export default Collapse
+export type { CollapseProps } from './collapse'
+export type { CollapseGroupProps } from './collapse-group'
+export default Collapse as CollapseComponentType

components/description/index.ts

@@ -1,5 +1,4 @@
 import Description from './description'
-import { DescriptionProps } from './description'
 
-export type Props = DescriptionProps
+export type { DescriptionProps } from './description'
 export default Description

components/display/index.ts

@@ -1,5 +1,4 @@
 import Display from './display'
-import { DisplayProps } from './display'
 
-export type Props = DisplayProps
+export type { DisplayProps } from './display'
 export default Display