refactor(styleguide): bulk convert files to TS and get rid off deprec…

…ated APIs

packages/styleguide/src/components/Discussion/Internal/Comment/HeaderMetaLine.tsx

@@ -56,10 +56,8 @@ const titleDate = (string) => dateTimeFormat(new Date(string))
 type HeaderMetaLineProps = {
   t: Formatter
   discussion: unknown
-  comment: Pick<
-    Comment,
-    'id' | 'displayAuthor' | 'createdAt' | 'updatedAt' | 'published'
-  >
+  comment: Pick<Comment, 'id' | 'displayAuthor' | 'createdAt'> &
+    Partial<Pick<Comment, 'published' | 'updatedAt'>>
   CommentLink: ComponentType<CommentLinkProps>
   isPreview?: boolean
 }

packages/styleguide/src/components/Discussion/Statements/StatementNode.js → packages/styleguide/src/components/Discussion/Statements/StatementNode.tsx

@@ -1,5 +1,4 @@
-import React, { useContext } from 'react'
-import PropTypes from 'prop-types'
+import React, { ComponentPropsWithoutRef, useContext } from 'react'
 import { css } from 'glamor'
 import { fontStyles, Label } from '../../Typography'
 import { useMemo } from 'react'
@@ -10,13 +9,14 @@ import { useColorContext } from '../../Colors/ColorContext'
 import { stripTag } from './helpers/tagHelper'
 import { renderCommentMdast } from '../Internal/Comment/render'
 import IconButton from '../../IconButton'
-import ActionsMenu, {
-  ActionsMenuItemPropType,
-} from '../Internal/Comment/ActionsMenu'
+import ActionsMenu, { ActionMenuItem } from '../Internal/Comment/ActionsMenu'
 import HeaderMetaLine from '../Internal/Comment/HeaderMetaLine'
 import { pxToRem } from '../../Typography/utils'
 import { DiscussionContext } from '../DiscussionContext'
 import { IconShare } from '@republik/icons'
+import { Formatter } from '../../../lib/translate'
+import { Comment } from '../Internal/Comment/types'
+import { CommentLinkProps } from '../Internal/Comment/CommentLink'
 
 const HIGHLIGHT_PADDING = 7
 
@@ -122,6 +122,26 @@ const styles = {
 
 const MockLink = (props) => <>{props.children}</>
 
+type StatementNodeProps = {
+  comment: Comment
+  t: Formatter
+  tagMappings?: Array<{
+    tag: string
+    text: string
+  }>
+  actions: {
+    handleShare: (comment: Comment) => void
+  }
+  voteActions?: Pick<
+    ComponentPropsWithoutRef<typeof VoteButtons>,
+    'handleUpVote' | 'handleDownVote' | 'handleUnVote'
+  >
+  menuItems?: ActionMenuItem[]
+  disableVoting?: boolean
+  isHighlighted?: boolean
+  CommentLink?: React.ComponentType<CommentLinkProps>
+}
+
 const StatementNode = ({
   comment,
   tagMappings = [],
@@ -132,7 +152,7 @@ const StatementNode = ({
   disableVoting = false,
   isHighlighted = false,
   CommentLink = MockLink,
-}) => {
+}: StatementNodeProps) => {
   const [colorScheme] = useColorContext()
   const { discussion } = useContext(DiscussionContext)
 
@@ -266,26 +286,3 @@ const StatementNode = ({
 }
 
 export default StatementNode
-
-StatementNode.propTypes = {
-  comment: PropTypes.object.isRequired,
-  t: PropTypes.func.isRequired,
-  tagMappings: PropTypes.arrayOf(
-    PropTypes.shape({
-      tag: PropTypes.string.isRequired,
-      text: PropTypes.string.isRequired,
-    }),
-  ),
-  actions: PropTypes.shape({
-    handleShare: PropTypes.func.isRequired,
-  }),
-  voteActions: PropTypes.shape({
-    handleUpVote: PropTypes.func.isRequired,
-    handleDownVote: PropTypes.func.isRequired,
-    handleUnVote: PropTypes.func.isRequired,
-  }),
-  menuItems: PropTypes.arrayOf(ActionsMenuItemPropType),
-  disableVoting: PropTypes.bool,
-  isHighlighted: PropTypes.bool,
-  CommentLink: PropTypes.elementType,
-}

packages/styleguide/src/components/Figure/Image.tsx

@@ -53,7 +53,30 @@ const GalleryButton = ({ gallerySize, onClick }: GalleryButtonProps) => {
   )
 }
 
-const Image = (props, context) => {
+type ImageProps = {
+  src: string
+  dark?: {
+    src: string
+    srcSet?: string
+    size?: {
+      width: number
+      height: number
+    }
+  }
+  srcSet?: string
+  alt?: string
+  size?: {
+    width: number
+    height: number
+  }
+  maxWidth?: number
+  aboveTheFold?: boolean
+  enableGallery?: boolean
+  gallerySize?: number
+  attributes?: React.HTMLAttributes<HTMLImageElement>
+}
+
+const Image = (props: ImageProps, context) => {
   const {
     src,
     dark,
@@ -72,7 +95,14 @@ const Image = (props, context) => {
       ? () => context.toggleGallery(src)
       : undefined
 
-  const size = sizeProp || (sizeProp === undefined && imageSizeInfo(src))
+  const size =
+    sizeProp ||
+    ((sizeProp === undefined && imageSizeInfo(src)) as
+      | {
+          width: never
+          height: never
+        }
+      | undefined)
   let aspectRatio = size ? size.width / size.height : undefined
   if (dark?.size) {
     aspectRatio = Math.min(aspectRatio, dark.size.width / dark.size.height)
@@ -88,6 +118,7 @@ const Image = (props, context) => {
       srcSet={srcSet}
       alt={alt}
       onClick={onClick}
+      offset={0}
     />
   ) : (
     <SwitchImage
@@ -134,24 +165,6 @@ const Image = (props, context) => {
   )
 }
 
-Image.propTypes = {
-  src: PropTypes.string.isRequired,
-  dark: PropTypes.shape({
-    src: PropTypes.string.isRequired,
-    srcSet: PropTypes.string,
-  }),
-  srcSet: PropTypes.string,
-  alt: PropTypes.string,
-  size: PropTypes.shape({
-    width: PropTypes.number,
-    height: PropTypes.number,
-  }),
-  maxWidth: PropTypes.number,
-  aboveTheFold: PropTypes.bool,
-  enableGallery: PropTypes.bool,
-  gallerySize: PropTypes.number,
-}
-
 Image.contextTypes = {
   toggleGallery: PropTypes.func,
 }

packages/styleguide/src/components/LazyLoad/Image.js → packages/styleguide/src/components/LazyLoad/Image.tsx

@@ -1,8 +1,7 @@
 import React from 'react'
 import { css } from 'glamor'
-import PropTypes from 'prop-types'
 
-import LazyLoad from './'
+import LazyLoad from '.'
 
 import SwitchImage from '../Figure/SwitchImage'
 
@@ -20,6 +19,17 @@ const styles = {
 
 const transparentExtension = /\.(png|gif|svg)(\.webp)?(\?|$)/
 
+type LazyImageProps = {
+  aspectRatio: number
+} & Pick<
+  React.ComponentPropsWithoutRef<typeof SwitchImage>,
+  'src' | 'dark' | 'srcSet' | 'sizes' | 'alt' | 'onClick'
+> &
+  Pick<
+    React.ComponentPropsWithoutRef<typeof LazyLoad>,
+    'attributes' | 'visible' | 'offset'
+  >
+
 const LazyImage = ({
   src,
   dark,
@@ -31,7 +41,7 @@ const LazyImage = ({
   visible,
   offset,
   onClick,
-}) => {
+}: LazyImageProps) => {
   return (
     <LazyLoad
       attributes={{ ...styles.container, ...attributes }}
@@ -63,19 +73,4 @@ const LazyImage = ({
   )
 }
 
-LazyImage.propTypes = {
-  src: PropTypes.string.isRequired,
-  dark: PropTypes.shape({
-    src: PropTypes.string.isRequired,
-  }),
-  srcSet: PropTypes.string,
-  sizes: PropTypes.string,
-  alt: PropTypes.string,
-  aspectRatio: PropTypes.number.isRequired,
-  attributes: PropTypes.object,
-  visible: PropTypes.bool,
-  offset: PropTypes.number,
-  onClick: PropTypes.func,
-}
-
 export default LazyImage

packages/styleguide/src/components/LazyLoad/index.js → packages/styleguide/src/components/LazyLoad/index.tsx

@@ -1,5 +1,4 @@
 import React, { Component } from 'react'
-import PropTypes from 'prop-types'
 import { rafDebounce } from '../../lib/helpers'
 import debounce from 'lodash/debounce'
 
@@ -57,14 +56,33 @@ const instances = {
   all: [],
 }
 
-class LazyLoad extends Component {
-  constructor(...args) {
-    super(...args)
+type LazyLoadProps<T = unknown> = {
+  children: React.ReactNode
+  attributes: Partial<T>
+  style: React.CSSProperties
+  type: React.ElementType<T>
+  visible: boolean
+  offset?: number
+  consistentPlaceholder: boolean
+}
+
+type LazyLoadState = {
+  visible?: boolean
+}
+
+class LazyLoad<T> extends Component<LazyLoadProps<T>, LazyLoadState> {
+  constructor(props) {
+    super(props)
     this.state = {}
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     this.setRef = (ref) => {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
       this.ref = ref
     }
   }
+
   componentDidMount() {
     instances.add(this)
   }
@@ -84,6 +102,8 @@ class LazyLoad extends Component {
       return <>{children}</>
     }
     return (
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
       <Element ref={this.setRef} {...attributes} style={style}>
         {visible ? (
           children
@@ -93,22 +113,12 @@ class LazyLoad extends Component {
       </Element>
     )
   }
-}
-
-LazyLoad.propTypes = {
-  children: PropTypes.node,
-  attributes: PropTypes.object,
-  style: PropTypes.object,
-  type: PropTypes.elementType,
-  visible: PropTypes.bool,
-  offset: PropTypes.number,
-  consistentPlaceholder: PropTypes.bool,
-}
 
-LazyLoad.defaultProps = {
-  offset: 0.5,
-  type: 'div',
-  consistentPlaceholder: false,
+  static defaultProps: Partial<LazyLoadProps<unknown>> = {
+    offset: 0.5,
+    type: 'div',
+    consistentPlaceholder: false,
+  }
 }
 
 export default LazyLoad

packages/styleguide/src/components/TeaserCarousel/ArticleCount.js → packages/styleguide/src/components/TeaserCarousel/ArticleCount.tsx

@@ -1,12 +1,16 @@
 import { css } from 'glamor'
 import React from 'react'
 import { sansSerifMedium16 } from '../Typography/styles'
-import PropTypes from 'prop-types'
 import { useColorContext } from '../Colors/useColorContext'
 
 const ICON_SIZE = 29
 
-const Icon = ({ size, fill, ...props }) => (
+type IconProps = React.ComponentPropsWithoutRef<'svg'> & {
+  size: number
+  fill?: string
+}
+
+const Icon = ({ size, fill, ...props }: IconProps) => (
   <svg
     {...styles.icon}
     width={`${size}px`}
@@ -50,7 +54,17 @@ const styles = {
   }),
 }
 
-const ArticleCount = ({ count, bgColor, color: textColor }) => {
+type ArticleCountProps = {
+  count: number
+  bgColor: string
+  color: string
+}
+
+const ArticleCount = ({
+  count,
+  bgColor,
+  color: textColor,
+}: ArticleCountProps) => {
   const [colorScheme] = useColorContext()
   return (
     <div {...styles.container}>
@@ -63,9 +77,3 @@ const ArticleCount = ({ count, bgColor, color: textColor }) => {
 }
 
 export default ArticleCount
-
-ArticleCount.propTypes = {
-  bgColor: PropTypes.string,
-  color: PropTypes.string,
-  count: PropTypes.number,
-}