chore: fix site types

emotion-js · Oct 27, 2019 · 086bd8b · 086bd8b
1 parent a7a8748
commit 086bd8b
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 8 deletions.
diff --git a/site/src/components/Box.js b/site/src/components/Box.js
@@ -36,7 +36,18 @@ const column = props => (props.column ? 'flex-direction:column;' : null)
  *   ${justify};
  * `
  */
-const Box = styled.div(
+type Props = $Shape<{
+  className: ?string,
+  flex: number | string,
+  children: React$Node,
+  direction: Array<string>,
+  css: { [string]: number | string },
+  display: string,
+  fontSize: string | number,
+  justify: string,
+  align: string
+}>
+const Box = styled.div<Props>(
   display,
   space,
   width,

diff --git a/site/src/components/Playground.js b/site/src/components/Playground.js
@@ -42,6 +42,7 @@ export const scope = {
   }
 }
 
+// $FlowFixMe(flow@0.100.0): tagged templates don't support generics
 export const Error = styled.pre`
   background-color: ${colors.red[8]};
   overflow: auto;

diff --git a/site/src/components/Title.js b/site/src/components/Title.js
@@ -3,7 +3,10 @@ import styled from '@emotion/styled'
 import { constants, mq, colors } from '../utils/style'
 import * as markdownComponents from '../utils/markdown-styles'
 
-export default styled(markdownComponents.h1)<{}>(
+type Props = {
+  children: React$Node
+}
+export default styled(markdownComponents.h1)<Props>(
   mq({
     paddingTop: 0,
     marginTop: 0,

diff --git a/site/src/utils/markdown-styles.js b/site/src/utils/markdown-styles.js
@@ -13,9 +13,9 @@ const textStyles = mq({
   lineHeight: '1.7'
 })
 
-export const p = styled.p(textStyles)
+export const p = styled.p<empty>(textStyles)
 
-export const code = styled.code(
+export const code = styled.code<empty>(
   textStyles,
   mq({
     backgroundColor: 'rgba(117, 63, 131, 0.07)',
@@ -26,13 +26,13 @@ export const code = styled.code(
   })
 )
 
-export const pre = styled.pre({
+export const pre = styled.pre<empty>({
   '& > code': {
     padding: 0
   }
 })
 
-export const ul = styled.ul({
+export const ul = styled.ul<empty>({
   marginTop: 20,
   paddingLeft: 20,
 
@@ -46,7 +46,7 @@ export const ul = styled.ul({
   }
 })
 
-export const li = styled.li(textStyles, {
+export const li = styled.li<empty>(textStyles, {
   marginTop: 10,
   p: { marginTop: 5, marginBottom: 0 },
   '& > ul, & > ol': {
@@ -58,6 +58,7 @@ export const li = styled.li(textStyles, {
   }
 })
 
+// $FlowFixMe(flow@0.100.0): tagged templates don't support generics
 export const img = styled.img`
   max-height: 360px;
   margin: 0 auto;
@@ -70,13 +71,15 @@ const baseHeadingStyles = css`
   line-height: 1.2;
 `
 
+// $FlowFixMe(flow@0.100.0): tagged templates don't support generics
 export const h1 = styled.h1`
   margin-top: 32px;
   padding-top: 20px;
   font-size: 32px;
   ${baseHeadingStyles};
 `
 
+// $FlowFixMe(flow@0.100.0): tagged templates don't support generics
 export const h2 = styled.h2`
   ${baseHeadingStyles};
   font-size: 24px;
@@ -88,28 +91,32 @@ export const h2 = styled.h2`
   }
 `
 
+// $FlowFixMe(flow@0.100.0): tagged templates don't support generics
 export const h3 = styled.h3`
   font-size: 20px;
   padding-top: 20px;
   ${baseHeadingStyles};
 `
 
+// $FlowFixMe(flow@0.100.0): tagged templates don't support generics
 export const h4 = styled.h4`
   font-size: 16px;
   margin-top: 22px;
   padding-top: 15px;
   ${baseHeadingStyles};
 `
 
+// $FlowFixMe(flow@0.100.0): tagged templates don't support generics
 export const h5 = styled.h5`
   font-size: 14px;
 `
 
+// $FlowFixMe(flow@0.100.0): tagged templates don't support generics
 export const h6 = styled.div`
   font-size: 12;
 `
 
-export const a = styled.a(
+export const a = styled.a<empty>(
   {
     display: 'inline-block',
     fontSize: constants.fontSizes[2],
@@ -133,6 +140,7 @@ export const a = styled.a(
   animatedUnderline
 )
 
+// $FlowFixMe(flow@0.100.0): tagged templates don't support generics
 export const blockquote = styled.blockquote`
   display: flex;
   align-items: center;
@@ -164,6 +172,7 @@ export const blockquote = styled.blockquote`
   }
 `
 
+// $FlowFixMe(flow@0.100.0): tagged templates don't support generics
 export const table = styled.table`
   display: block;
   width: 100%;
@@ -182,17 +191,21 @@ export const table = styled.table`
     font-size: 13px;
   }
 `
+
+// $FlowFixMe(flow@0.100.0): tagged templates don't support generics
 export const td = styled.td`
   padding: 12px 12px;
   border: 1px solid ${colors.color};
 `
 
+// $FlowFixMe(flow@0.100.0): tagged templates don't support generics
 export const th = styled.th`
   padding: ${constants.space[1]}px ${constants.space[2]}px;
   border: 1px solid ${colors.color};
   font-weight: bold;
 `
 
+// $FlowFixMe(flow@0.100.0): tagged templates don't support generics
 export const tr = styled.tr`
   background-color: #fff;
   border-top: 1px solid #ccc;