Custom component props are not being resolved during build time

[eliobricenov]

it seems there's an issue with the UI lib build types

when we declare the props of a component and they either:

• extend a prop from another custom component
• use the interface of a different custom component

they are not resolved by typescript and when we install the package they are any

for example, this one doesn't work:

import cn from 'classnames'

import {
  ContainerInteractive,
  ContainerInteractiveProps
} from '@/components/ContainerInteractive'
import Select, { SelectProps } from '@/components/Select'
import TextInput, { TextInputProps } from '@/components/TextInput'

import styles from './RewardFormCard.module.scss'

export interface RewardFormCardProps extends ContainerInteractiveProps {
  networkInputProps?: SelectProps
  tokenContractAddressInputProps?: TextInputProps
  tokenTypeInputProps?: SelectProps
}

function RewardFormCard({ classNames, ...props }: RewardFormCardProps) {
  return (
    <ContainerInteractive
      classNames={{
        ...classNames,
        title: cn(styles.title, classNames?.title),
        root: cn(styles.root, classNames?.root)
      }}
      {...props}
    >
      <Select {...props.networkInputProps} />
      <TextInput {...props.tokenContractAddressInputProps} />
      <Select {...props.tokenTypeInputProps} />
      {props.children}
    </ContainerInteractive>
  )
}

export default RewardFormCard

it is resolved to:

interface RewardFormCardProps {
  networkInputProps?: any
  tokenContractAddressInputProps?: any
  tokenTypeInputProps?: any
}

If we redefined the props inside of the custom component instead of using the existing ones, they are set correctly during build time, so it is definitely about Typescript not being able to resolve the imports from other files

import React, { ComponentPropsWithoutRef, ReactElement } from 'react'

import {
  SelectProps as MantineSelectProps,
  TextInputProps as MantineTextInputProps
} from '@mantine/core'
import cn from 'classnames'

import { ContainerInteractive } from '../ContainerInteractive'
import Select from '../Select'
import TextInput from '../TextInput'
import styles from './RewardFormCard.module.scss'

interface SelectProps extends Omit<MantineSelectProps, 'size'> {
  size?: 'small' | 'medium' | 'large'
}

interface TextInputProps extends MantineTextInputProps {
  size?: 'small' | 'medium' | 'large'
  classNames?: {
    root?: string
    input?: string
    wrapper?: string
    label?: string
    section?: string
    error?: string
    charCounter?: string
    required?: string
  }
  maxCharacters?: number
}

export interface RewardFormCardProps extends ComponentPropsWithoutRef<'div'> {
  title: string
  tag?: ReactElement
  icon?: ReactElement
  classNames?: {
    root?: string
    header?: string
    titleContainer?: string
    title?: string
  }
  networkInputProps?: SelectProps
  tokenContractAddressInputProps?: TextInputProps
  tokenTypeInputProps?: SelectProps
}

function RewardFormCard({ classNames, ...props }: RewardFormCardProps) {
  return (
    <ContainerInteractive
      classNames={{
        ...classNames,
        title: cn(styles.title, classNames?.title),
        root: cn(styles.root, classNames?.root)
      }}
      {...props}
    >
      <Select {...props.networkInputProps} />
      <TextInput {...props.tokenContractAddressInputProps} />
      <Select {...props.tokenTypeInputProps} />
      {props.children}
    </ContainerInteractive>
  )
}

export default RewardFormCard