Add more types

Author: katamartin

src/colors.js

@@ -0,0 +1,69 @@
+import React, { ReactNode } from 'react'
+import { Box, BoxProps, ThemeUIStyleObject } from 'theme-ui'
+
+interface InlineColorProps extends BoxProps {
+  sx: ThemeUIStyleObject
+  color: string
+  children: ReactNode
+}
+const InlineColor = ({ sx, color, children, ...props }: InlineColorProps) => {
+  return (
+    <Box
+      as='span'
+      sx={{ display: 'inline-block', color: color, ...sx }}
+      {...props}
+    >
+      {children}
+    </Box>
+  )
+}
+
+type ColorProps = Omit<InlineColorProps, 'color'>
+
+export const Primary = (props: ColorProps) => {
+  return <InlineColor color='primary' {...props} />
+}
+
+export const Secondary = (props: ColorProps) => {
+  return <InlineColor color='secondary' {...props} />
+}
+
+export const Background = (props: ColorProps) => {
+  return <InlineColor color='background' {...props} />
+}
+
+export const Red = (props: ColorProps) => {
+  return <InlineColor color='red' {...props} />
+}
+
+export const Orange = (props: ColorProps) => {
+  return <InlineColor color='orange' {...props} />
+}
+
+export const Yellow = (props: ColorProps) => {
+  return <InlineColor color='yellow' {...props} />
+}
+
+export const Green = (props: ColorProps) => {
+  return <InlineColor color='green' {...props} />
+}
+
+export const Teal = (props: ColorProps) => {
+  return <InlineColor color='teal' {...props} />
+}
+
+export const Blue = (props: ColorProps) => {
+  return <InlineColor color='blue' {...props} />
+}
+
+export const Purple = (props: ColorProps) => {
+  return <InlineColor color='purple' {...props} />
+}
+
+export const Pink = (props: ColorProps) => {
+  return <InlineColor color='pink' {...props} />
+}
+
+export const Grey = (props: ColorProps) => {
+  return <InlineColor color='grey' {...props} />
+}

src/colors.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { Box } from 'theme-ui'
+// @ts-ignore
 import { PoopSad } from '@carbonplan/emoji'
 import Layout from './layout'
 import Row from './row'

src/custom-404.js src/custom-404.tsxsrc/custom-404.js renamed to src/custom-404.tsx

@@ -1,7 +1,13 @@
 import React from 'react'
-import { Box, IconButton } from 'theme-ui'
+import { IconButton, IconButtonProps } from 'theme-ui'
 
-const Expander = ({ value, id, onClick, sx }) => {
+export interface ExpanderProps {
+  value: IconButtonProps['aria-checked']
+  id: IconButtonProps['id']
+  onClick: IconButtonProps['onClick']
+  sx: IconButtonProps['sx']
+}
+const Expander = ({ value, id, onClick, sx }: ExpanderProps) => {
   return (
     <IconButton
       onClick={onClick}

src/expander.js src/expander.tsxsrc/expander.js renamed to src/expander.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Box } from 'theme-ui'
+import { Box, BoxProps } from 'theme-ui'
 import { keyframes } from '@emotion/react'
 
 const fade = keyframes({
@@ -11,7 +11,17 @@ const fade = keyframes({
   },
 })
 
-const FadeIn = ({ duration = 300, delay = 0, children, ...delegated }) => {
+export interface FadeInProps extends BoxProps {
+  duration?: number
+  delay?: number
+}
+
+const FadeIn = ({
+  duration = 300,
+  delay = 0,
+  children,
+  ...delegated
+}: FadeInProps) => {
   return (
     <Box
       {...delegated}

src/fade-in.js src/fade-in.tsxsrc/fade-in.js renamed to src/fade-in.tsx

@@ -1,7 +1,11 @@
 import React from 'react'
-import Caption from './caption'
+import Caption, { CaptionProps } from './caption'
 
-const FigureCaption = ({ as = 'figcaption', number, children }) => {
+const FigureCaption = ({
+  as = 'figcaption',
+  number,
+  children,
+}: CaptionProps) => {
   return (
     <Caption as={as} number={number} label='figure'>
       {children}

src/figure-caption.js src/figure-caption.tsxsrc/figure-caption.js renamed to src/figure-caption.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
-import { Box } from 'theme-ui'
+import { Box, BoxProps } from 'theme-ui'
 
 import Group from './group'
 
-const Figure = ({ as = 'figure', children, sx }) => {
+const Figure = ({ as = 'figure', children, sx }: BoxProps) => {
   return (
     <Box
       as={as}

src/figure.js src/figure.tsxsrc/figure.js renamed to src/figure.tsx

@@ -6,12 +6,12 @@ export { default as Button, ButtonProps } from './button'
 export { default as Callout, CalloutProps } from './callout'
 export { default as Caption, CaptionProps } from './caption'
 export { default as Colorbar, ColorbarProps } from './colorbar'
-export { default as Colors } from './colors'
+export * as Colors from './colors'
 export { default as Column, ColumnProps } from './column'
 export { default as Custom404 } from './custom-404'
 export { default as Dimmer, DimmerProps } from './dimmer'
-export { default as Expander } from './expander'
-export { default as FadeIn } from './fade-in'
+export { default as Expander, ExpanderProps } from './expander'
+export { default as FadeIn, FadeInProps } from './fade-in'
 export { default as Figure } from './figure'
 export { default as FigureCaption } from './figure-caption'
 export { default as Filter } from './filter'