absolutely massive typescript porting time

packages/roleypoly-ui/kit/__test__/media.test.tsx

@@ -1,3 +1,6 @@
+/**
+ *  @jest-environment jsdom
+ */
 /* eslint-env jest */
 import MediaQuery, { xs, sm, md, lg, xl } from '../media'
 

packages/roleypoly-ui/kit/debug-breakpoints.tsx

@@ -1,4 +1,3 @@
-// @flow
 import * as React from 'react'
 import styled from 'styled-components'
 import MediaQuery, { breakpoints } from './media'
@@ -13,13 +12,18 @@ const BreakpointDebugFloat = styled.div`
   font-family: monospace;
 `
 
-const Breakpoint = styled.div`
+type BPProps = {
+  hue: number
+  bp: string
+}
+
+const Breakpoint = styled.div<BPProps>`
   padding: 0.1em;
   display: none;
   width: 1.5em;
   text-align: center;
-  background-color: hsl(${(props: any) => props.hue}, 50%, 50%);
-  ${(props: any) => MediaQuery({ [props.bp]: `display: inline-block` })}
+  background-color: hsl(${(props) => props.hue}, 50%, 50%);
+  ${(props) => MediaQuery({ [props.bp]: `display: inline-block` })}
 `
 
 const DebugFloater = () => {

packages/roleypoly-ui/kit/media.ts

@@ -1,7 +1,6 @@
-// @flow
 import styled from 'styled-components'
 
-export type MediaQueryConfig = $Shape<{
+export type MediaQueryConfig = Partial<{
   xs: string,
   sm: string,
   md: string,
@@ -17,7 +16,7 @@ export const breakpoints = {
   xl: 1280
 }
 
-const mediaTemplateLiteral = (size: number, ...stuff: mixed[]): string =>
+const mediaTemplateLiteral = (size: number, ...stuff: any[]): string =>
   `@media screen and (min-width: ${size}px) {\n${stuff.join()}\n};`
 
 export const xs = mediaTemplateLiteral.bind(null, breakpoints.xs)
@@ -27,7 +26,7 @@ export const lg = mediaTemplateLiteral.bind(null, breakpoints.lg)
 export const xl = mediaTemplateLiteral.bind(null, breakpoints.xl)
 
 const MediaQuery = (mq: MediaQueryConfig) => {
-  const out = []
+  const out: string[] = []
 
   for (const size in mq) {
     if (breakpoints[size] == null) {