Convert components package to TS

packages/components/package.json

@@ -1,12 +1,14 @@
 {
   "name": "@theme-ui/components",
   "version": "0.3.1",
+  "source": "src/index.ts",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
   "sideEffects": false,
   "scripts": {
-    "prepare": "microbundle --no-compress --jsx React.createElement",
-    "watch": "microbundle watch --no-compress --jsx React.createElement"
+    "prepare": "microbundle --no-compress --jsx React.createElement --tsconfig tsconfig.json",
+    "watch": "microbundle watch --no-compress --jsx React.createElement --tsconfig tsconfig.json"
   },
   "dependencies": {
     "@emotion/core": "^10.0.0",

packages/components/src/Alert.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import Box, { BoxProps, ForwardRef } from './Box'
+
+type AlertProps = BoxProps
+/**
+ * Component for displaying messages, notifications, or other application state.
+ *
+ * Alert variants can be defined in `theme.alerts`.
+ * The Alert component uses `theme.alerts.primary` as its default variant.
+ */
+
+export const Alert: ForwardRef<HTMLDivElement, AlertProps> = React.forwardRef(
+  (props, ref) => (
+    <Box
+      ref={ref}
+      {...props}
+      __themeKey="alerts"
+      css={{
+        display: 'flex',
+        alignItems: 'center',
+        px: 3,
+        py: 2,
+        fontWeight: 'bold',
+        color: 'white',
+        bg: 'primary',
+        borderRadius: 4,
+      }}
+    />
+  )
+)

packages/components/src/AspectImage.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { AspectRatio } from './AspectRatio'
+import { Image, ImageProps } from './Image'
+import { ForwardRef } from './Box'
+
+interface AspectImageProps extends ImageProps {
+  ratio?: number
+}
+/**
+ * Image component constrained by as aspect ratio.
+ * @see https://theme-ui.com/components/aspect-image
+ */
+
+export const AspectImage: ForwardRef<
+  HTMLImageElement,
+  AspectImageProps
+> = React.forwardRef(({ ratio, ...props }, ref) => (
+  <AspectRatio ratio={ratio}>
+    <Image
+      ref={ref}
+      {...props}
+      __css={{
+        objectFit: 'cover',
+      }}
+    />
+  </AspectRatio>
+))

packages/components/src/AspectRatio.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import Box, { BoxProps, ForwardRef } from './Box'
+
+interface AspectRatioProps extends BoxProps {
+  ratio?: number
+}
+/**
+ * Component for maintaining a fluid-width aspect ratio
+ * @see https://theme-ui.com/components/aspect-ratio
+ */
+
+export const AspectRatio: ForwardRef<
+  HTMLDivElement,
+  AspectRatioProps
+> = React.forwardRef(({ ratio = 4 / 3, children, ...props }, ref) => (
+  <Box
+    ref={ref}
+    sx={{
+      position: 'relative',
+      overflow: 'hidden',
+    }}>
+    <Box
+      sx={{
+        width: '100%',
+        height: 0,
+        paddingBottom: 100 / ratio + '%',
+      }}
+    />
+    <Box
+      {...props}
+      css={{
+        position: 'absolute',
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+      }}>
+      {children}
+    </Box>
+  </Box>
+))

packages/components/src/Avatar.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { Image, ImageProps } from './Image'
+import { ForwardRef } from './Box'
+
+interface AvatarProps extends ImageProps {
+  size?: number | string
+}
+
+export const Avatar: ForwardRef<
+  HTMLImageElement,
+  AvatarProps
+> = React.forwardRef(({ size = 48, ...props }, ref) => (
+  <Image
+    ref={ref}
+    width={size}
+    height={size}
+    variant="avatar"
+    {...props}
+    css={{
+      borderRadius: 9999,
+    }}
+  />
+))

packages/components/src/Badge.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import Box, { BoxProps, ForwardRef } from './Box'
+
+export type BadgeProps = BoxProps
+
+export const Badge: ForwardRef<HTMLDivElement, BadgeProps> = React.forwardRef(
+  (props, ref) => (
+    <Box
+      ref={ref}
+      {...props}
+      __themeKey="badges"
+      css={{
+        display: 'inline-block',
+        verticalAlign: 'baseline',
+        fontSize: 0,
+        fontWeight: 'bold',
+        whiteSpace: 'nowrap',
+        px: 1,
+        borderRadius: 2,
+        color: 'white',
+        bg: 'primary',
+      }}
+    />
+  )
+)

packages/components/src/Box.tsx

@@ -0,0 +1,72 @@
+import styled from '@emotion/styled'
+import { css, get } from '@theme-ui/css'
+import { createShouldForwardProp } from '@styled-system/should-forward-prop'
+import space from '@styled-system/space'
+import color from '@styled-system/color'
+
+import { StyledComponent } from '@emotion/styled'
+import { InterpolationWithTheme } from '@emotion/core'
+import { SxStyleProp } from 'theme-ui'
+import { SpaceProps, ColorProps } from 'styled-system'
+
+export type Omit<T, K> = Pick<T, Exclude<keyof T, K>>
+
+export type Assign<T, U> = {
+  [P in keyof (T & U)]: P extends keyof T
+    ? T[P]
+    : P extends keyof U
+    ? U[P]
+    : never
+}
+
+export type ForwardRef<T, P> = React.ForwardRefExoticComponent<
+  React.PropsWithoutRef<P> & React.RefAttributes<T>
+>
+
+export interface BoxOwnProps extends SpaceProps, ColorProps {
+  as?: React.ElementType
+  variant?: string
+  sx?: SxStyleProp
+  css?: InterpolationWithTheme<any>
+  __themeKey?: string //TODO is __themeKey a "keyof / typeof" from the theme spec?
+}
+
+export interface BoxProps
+  extends Assign<React.ComponentProps<'div'>, BoxOwnProps> {}
+
+/**
+ * Use the Box component as a layout primitive to add margin, padding, and colors to content.
+ * @see https://theme-ui.com/components/box
+ */
+
+const shouldForwardProp = createShouldForwardProp([
+  ...space.propNames,
+  ...color.propNames,
+])
+
+const sx = props => css(props.sx)(props.theme)
+const base = props => css(props.__css)(props.theme)
+const variant = ({ theme, variant, __themeKey = 'variants' }) =>
+  css(get(theme, __themeKey + '.' + variant, get(theme, variant)))
+
+export const Box: StyledComponent<
+  React.ComponentProps<'div'>,
+  BoxOwnProps,
+  {}
+> = styled('div', {
+  shouldForwardProp,
+})(
+  {
+    boxSizing: 'border-box',
+    margin: 0,
+    minWidth: 0,
+  },
+  base,
+  variant,
+  space,
+  color,
+  sx,
+  props => props.css
+)
+
+export default Box