migrate typography components to typescript (#553)

* migrate typography components to TS

* add lint command and fix merge

* more leftovers

* update jsdoc

* rm unneeded changes

* export types

* rm babel proptype plugin and keep proptypes around

* revert unneeded change in tsconfig

* s/string/number

Author: mshwery

.babelrc

@@ -3,8 +3,7 @@
   "plugins": [
     "@babel/plugin-transform-runtime",
     "@babel/plugin-proposal-class-properties",
-    "babel-plugin-add-react-displayname",
-    "babel-plugin-typescript-to-proptypes"
+    "babel-plugin-add-react-displayname"
   ],
   "env": {
     "esm": {

package.json

@@ -89,7 +89,6 @@
     "babel-eslint": "^10.0.1",
     "babel-loader": "^8.0.5",
     "babel-plugin-add-react-displayname": "^0.0.5",
-    "babel-plugin-typescript-to-proptypes": "^0.17.1",
     "concurrently": "^4.0.1",
     "enzyme": "^3.7.0",
     "enzyme-adapter-react-16": "^1.6.0",

src/text-input/src/TextInput.tsx

@@ -48,7 +48,7 @@ class TextInput extends PureComponent<any & React.ComponentProps<typeof Text>> {
     theme: PropTypes.object.isRequired,
 
     /**
-     * Class name passed to the button.
+     * Class name passed to the input.
      * Only use if you know what you are doing.
      */
     className: PropTypes.string

src/textarea/src/Textarea.tsx

@@ -53,7 +53,7 @@ class Textarea extends PureComponent<any & React.ComponentProps<typeof Text>> {
     theme: PropTypes.object.isRequired,
 
     /**
-     * Class name passed to the button.
+     * Class name passed to the textarea.
      * Only use if you know what you are doing.
      */
     className: PropTypes.string

src/typography/src/Code.tsx

@@ -1,29 +1,39 @@
-import React, { PureComponent } from 'react'
+import React, { PureComponent, Validator } from 'react'
 import PropTypes from 'prop-types'
 import cx from 'classnames'
-import { withTheme } from '../../theme'
+import { withTheme, Theme } from '../../theme'
 import Text from './Text'
 
-class Code extends PureComponent<any & React.ComponentProps<typeof Text>> {
+type Appearance = 'default' | 'minimal'
+
+export interface CodeProps extends React.ComponentProps<typeof Text> {
+  /**
+   * The appearance of the code.
+   */
+  appearance: Appearance
+
+  /**
+   * Class name passed to the component.
+   * Only use if you know what you are doing.
+   */
+  className?: string
+
+  /**
+   * Theme provided by ThemeProvider.
+   */
+  theme: Theme
+}
+
+class Code extends PureComponent<CodeProps> {
   static propTypes = {
-    /**
-     * The appearance of the code.
-     */
-    appearance: PropTypes.oneOf(['default', 'minimal']).isRequired,
-
-    /**
-     * Theme provided by ThemeProvider.
-     */
-    theme: PropTypes.object.isRequired,
-
-    /**
-     * Class name passed to the button.
-     * Only use if you know what you are doing.
-     */
-    className: PropTypes.string
+    appearance: PropTypes.oneOf(['default', 'minimal']).isRequired as Validator<
+      Appearance
+    >,
+    className: PropTypes.string,
+    theme: PropTypes.object.isRequired as Validator<Theme>
   }
 
-  static defaultProps = {
+  static defaultProps: Partial<CodeProps> = {
     appearance: 'default'
   }
 

src/typography/src/Heading.tsx

@@ -1,32 +1,40 @@
-import React, { PureComponent } from 'react'
+import React, { PureComponent, Validator } from 'react'
 import PropTypes from 'prop-types'
 import Box from 'ui-box'
-import { withTheme } from '../../theme'
+import { withTheme, Theme } from '../../theme'
 
-class Heading extends PureComponent<any & React.ComponentProps<typeof Box>> {
-  static propTypes = {
-    /**
-     * The size of the heading.
-     */
-    size: PropTypes.oneOf([100, 200, 300, 400, 500, 600, 700, 800, 900])
-      .isRequired,
+type HeadingSize = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
+
+export interface HeadingProps extends React.ComponentProps<typeof Box> {
+  /**
+   * Pass `default` to use the default margin top for that size.
+   */
+  marginTop?: boolean | number | string | 'default'
 
-    /**
-     * Pass `default` to use the default margin top for that size.
-     */
+  /**
+   * The size of the heading.
+   */
+  size: HeadingSize
+
+  /**
+   * Theme provided by ThemeProvider.
+   */
+  theme: Theme
+}
+
+class Heading extends PureComponent<HeadingProps> {
+  static propTypes = {
     marginTop: PropTypes.oneOfType([
       PropTypes.bool,
       PropTypes.number,
       PropTypes.string
     ]),
-
-    /**
-     * Theme provided by ThemeProvider.
-     */
-    theme: PropTypes.object.isRequired
+    size: PropTypes.oneOf([100, 200, 300, 400, 500, 600, 700, 800, 900])
+      .isRequired as Validator<HeadingSize>,
+    theme: PropTypes.object.isRequired as Validator<Theme>
   }
 
-  static defaultProps = {
+  static defaultProps: Partial<HeadingProps> = {
     size: 500
   }
 

src/typography/src/Label.tsx

@@ -1,9 +1,11 @@
 import React, { PureComponent } from 'react'
 import Text from './Text'
 
-export default class Label extends PureComponent<
-  React.ComponentProps<typeof Text>
-> {
+export interface LabelProps extends React.ComponentProps<typeof Text> {}
+
+export default class Label extends PureComponent<LabelProps> {
+  static propTypes = Text.propTypes
+
   render() {
     return <Text is="label" fontWeight={500} {...this.props} />
   }

src/typography/src/Link.tsx

@@ -1,42 +1,51 @@
-import React, { PureComponent } from 'react'
+import React, { PureComponent, Validator } from 'react'
 import PropTypes from 'prop-types'
 import cx from 'classnames'
-import { withTheme } from '../../theme'
+import { withTheme, Theme } from '../../theme'
 import Text from './Text'
 
-class Link extends PureComponent<any & React.ComponentProps<typeof Text>> {
-  static propTypes = {
-    /**
-     * This attribute names a relationship of the linked document to the current document.
-     * Common use case is: rel="noopener noreferrer".
-     */
-    rel: PropTypes.string,
+export interface LinkProps extends React.ComponentProps<typeof Text> {
+  /**
+   * Class name passed to the link.
+   * Only use if you know what you are doing.
+   */
+  className?: string
 
-    /**
-     * Specifies the URL of the linked resource. A URL might be absolute or relative.
-     */
-    href: PropTypes.string,
+  /**
+   * The color (and styling) of the Link. Can be default, blue, green or neutral.
+   */
+  color?: string
 
-    /**
-     * Target atrribute, common use case is target="_blank."
-     */
-    target: PropTypes.string,
+  /**
+   * Specifies the URL of the linked resource. A URL might be absolute or relative.
+   */
+  href?: string
+
+  /**
+   * This attribute names a relationship of the linked document to the current document.
+   * Common use case is: rel="noopener noreferrer".
+   */
+  rel?: string
+
+  /**
+   * Target atrribute, common use case is target="_blank."
+   */
+  target?: string
 
-    /**
-     * The color (and styling) of the Link. Can be default, blue, green or neutral.
-     */
-    color: PropTypes.string.isRequired,
-
-    /**
-     * Theme provided by ThemeProvider.
-     */
-    theme: PropTypes.object.isRequired,
-
-    /**
-     * Class name passed to the link.
-     * Only use if you know what you are doing.
-     */
-    className: PropTypes.string
+  /**
+   * Theme provided by ThemeProvider.
+   */
+  theme: Theme
+}
+
+class Link extends PureComponent<LinkProps> {
+  static propTypes = {
+    className: PropTypes.string,
+    color: PropTypes.string,
+    href: PropTypes.string,
+    rel: PropTypes.string,
+    target: PropTypes.string,
+    theme: PropTypes.object.isRequired as Validator<Theme>
   }
 
   static defaultProps = {

src/typography/src/ListItem.tsx

@@ -3,19 +3,23 @@ import PropTypes from 'prop-types'
 import { Icon } from '../../icon'
 import Text from './Text'
 
-export default class ListItem extends PureComponent<
-  any & React.ComponentProps<typeof Text>
-> {
+export interface ListItemProps extends React.ComponentProps<typeof Text> {
+  /**
+   * When passed, adds a icon before the list item.
+   * See Evergreen `Icon` for documentation.
+   */
+  icon?: string
+
+  /**
+   * The color of the icon.
+   */
+  iconColor?: string
+}
+
+export default class ListItem extends PureComponent<ListItemProps> {
   static propTypes = {
-    /**
-     * When passed, adds a icon before the list item.
-     * See Evergreen `Icon` for documentation.
-     */
+    ...Text.propTypes,
     icon: PropTypes.string,
-
-    /**
-     * The color of the icon.
-     */
     iconColor: PropTypes.string
   }
 

src/typography/src/OrderedList.tsx

@@ -1,16 +1,20 @@
-import React, { PureComponent } from 'react'
+import React, { PureComponent, Validator } from 'react'
 import PropTypes from 'prop-types'
 import Box from 'ui-box'
 
-export default class OrderedList extends PureComponent<
-  any & React.ComponentProps<typeof Box>
-> {
+type ListSize = 300 | 400 | 500 | 600
+
+export interface OrderedListProps extends React.ComponentProps<typeof Box> {
+  /**
+   * Size of the text used in a list item.
+   * Can be: 300, 400, 500, 600.
+   */
+  size: ListSize
+}
+
+export default class OrderedList extends PureComponent<OrderedListProps> {
   static propTypes = {
-    /**
-     * Size of the text used in a list item.
-     * Can be: 300, 400, 500, 600.
-     */
-    size: PropTypes.oneOf([300, 400, 500, 600]).isRequired
+    size: PropTypes.number as Validator<ListSize>
   }
 
   static defaultProps = {