[ReactJS to ReactTS]

Base-Original.jsx

import React from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'

import { withTheme } from '../theme'
import { filterProps } from '../utils'
import { getTailwindClassNames, tailwindProps, propTypes } from '../tailwind'

const Base = ({
  theme,
  is,
  children,
  className,
  focusable,
  innerRef,
  ...rest
}) => {
  const Component = is

  return (
    <Component
      {...filterProps(rest, tailwindProps)}
      className={classnames(
        getTailwindClassNames(
          {
            ...rest,
            'outine-focus': 'none',
            'shadow-focus': 'outline',
          },
          { prefix: theme.prefix },
        ),
        className,
      )}
      ref={innerRef}
    >
      {children}
    </Component>
  )
}

Base.propTypes = {
  theme: PropTypes.shape({}).isRequired,
  is: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]),
  children: PropTypes.node,
  className: PropTypes.string,
  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
  ...propTypes,
}

Base.defaultProps = {
  is: 'div',
  children: undefined,
  className: undefined,
  innerRef: undefined,
}

export { Base as component }
export default withTheme(Base)

Base-TS.tsx

import React from 'react'
import classnames from 'classnames'

import { withTheme } from '../theme'
import { filterProps } from '../utils'
import { getTailwindClassNames, tailwindProps, propTypes } from '../tailwind'
import { Class } from 'utility-types'

export interface BaseProps {
  theme: Object
  is: string | (() => void) | Class<React.ComponentType>
  children?: React.ReactNode
  className?: string
  innerRef?: (() => void) | Object
}

export const Base: React.FunctionComponent<BaseProps> = (
  theme,
  is = 'div',
  children = undefined,
  className = undefined,
  innerRef = undefined,
  ...rest
) => {
  const Component = is

  return (
    <Component
      {...filterProps(rest, tailwindProps)}
      className={
        classnames(
          getTailwindClassNames(
            {
              ...rest,
              'outine-focus': 'none',
              'shadow-focus': 'outline',
            },
            { prefix: theme.prefix },
          ),
          className,
        )}
      ref={innerRef}
      {...rest}
    >
      {children}
    </Component>
  )
}

export { Base as component }
export default withTheme(Base)
// export default Base

Base.stories.mdx

import {Meta, Story, Preview, Props} from '@storybook/addon-docs/blocks'

import { Base } from './Base.tsx'

Button

This is the Base

import { Base } from 'my-components'

test