[RFC] Private API prototypes

package.json

@@ -75,7 +75,7 @@
     "fs-extra": "7.0.0",
     "globby": "8.0.1",
     "jest": "23.5.0",
-    "jest-emotion": "9.2.7",
+    "jest-styled-components": "6.3.1",
     "jscodeshift": "0.5.1",
     "mdx-live": "2.0.0-alpha.2",
     "next": "7.0.2",

src/BorderBox.js

@@ -1,18 +1,23 @@
-import {withSystemProps} from './system-props'
+import styled from 'styled-components'
 import Box from './Box'
+import theme from './theme'
+import {BORDER} from './constants'
 
-const BorderBox = withSystemProps(
-  {
-    is: Box,
-    border: 1,
-    borderColor: 'gray.2',
-    borderRadius: 1
-  },
-  ['boxShadow']
-)
+const BorderBox = styled(Box)`
+  ${BORDER};
+`
 
+BorderBox.defaultProps = {
+  theme,
+  border: '1px solid',
+  borderColor: 'gray.2',
+  borderRadius: 1
+}
+
+// spread prop types here
 BorderBox.propTypes = {
-  ...Box.propTypes
+  ...Box.propTypes,
+  ...BORDER.propTypes
 }
 
 export default BorderBox

src/Box.js

@@ -1,5 +1,18 @@
-import {withSystemProps, LAYOUT, COMMON} from './system-props'
+import {LAYOUT, COMMON} from './constants'
+import styled from 'styled-components'
+import theme from './theme'
 
-const Box = withSystemProps('div', [...LAYOUT, ...COMMON])
+const Box = styled.div`
+  ${LAYOUT} ${COMMON};
+`
+
+Box.defaultProps = {
+  theme
+}
+
+Box.propTypes = {
+  ...LAYOUT.propTypes,
+  ...COMMON.propTypes
+}
 
 export default Box

src/Button.js

@@ -1,15 +1,17 @@
 import React from 'react'
 import classnames from 'classnames'
 import PropTypes from 'prop-types'
+import styled from 'styled-components'
+import {width} from 'styled-system'
 import sass from 'sass.macro'
 import {injectGlobal} from 'emotion'
-import {withSystemProps, COMMON} from './system-props'
+import {COMMON} from './constants'
 
 injectGlobal(sass`
   @import "primer-buttons/index.scss";
 `)
 
-function Button({is: Tag, children, size, grouped, scheme, onClick, disabled, className, ...rest}) {
+function ButtonProto({is: Tag, children, size, grouped, scheme, onClick, disabled, className, ...rest}) {
   const classes = classnames(
     className,
     'btn',
@@ -28,6 +30,10 @@ function Button({is: Tag, children, size, grouped, scheme, onClick, disabled, cl
   )
 }
 
+const Button = styled(ButtonProto)`
+  ${COMMON} ${width};
+`
+
 Button.defaultProps = {
   is: 'button'
 }
@@ -39,7 +45,9 @@ Button.propTypes = {
   is: PropTypes.oneOfType([PropTypes.oneOf(['button', 'a', 'summary', 'input']), PropTypes.func]),
   onClick: PropTypes.func,
   scheme: PropTypes.string,
-  size: PropTypes.oneOf(['sm', 'large'])
+  size: PropTypes.oneOf(['sm', 'large']),
+  ...COMMON.propTypes,
+  ...width.propTypes
 }
 
-export default withSystemProps(Button, [...COMMON, 'width'])
+export default Button

src/Flex.js

@@ -1,13 +1,22 @@
-import {withSystemProps, FLEX_CONTAINER, COMMON, FLEX_ITEM} from './system-props'
+import styled from 'styled-components'
+import {display} from 'styled-system'
+import theme from './theme'
+import {FLEX_CONTAINER, FLEX_ITEM, COMMON} from './constants'
 
-const Flex = withSystemProps(
-  {
-    is: 'div',
-    display: 'flex'
-  },
-  [...FLEX_CONTAINER, ...COMMON]
-)
+const Flex = styled.div`
+  ${FLEX_CONTAINER}
+  ${COMMON}
+  ${display}
+`
 
-Flex.Item = withSystemProps('div', [...FLEX_ITEM, ...COMMON])
+Flex.defaultProps = {
+  display: 'flex',
+  theme
+}
+
+const FlexItem = styled.div`
+  ${FLEX_ITEM} ${COMMON};
+`
+Flex.Item = FlexItem
 
 export default Flex

src/__tests__/BorderBox.js

@@ -5,10 +5,6 @@ import {render} from '../utils/testing'
 import {LAYOUT} from '../system-props'
 
 describe('BorderBox', () => {
-  it('is a system component', () => {
-    expect(BorderBox.systemComponent).toEqual(true)
-  })
-
   it('implements layout system props', () => {
     expect(BorderBox).toImplementSystemProps(LAYOUT)
   })

src/__tests__/Box.js

@@ -5,10 +5,6 @@ import {render} from '../utils/testing'
 import {LAYOUT} from '../system-props'
 
 describe('Box', () => {
-  it('is a system component', () => {
-    expect(Box.systemComponent).toEqual(true)
-  })
-
   it('implements layout system props', () => {
     expect(Box).toImplementSystemProps(LAYOUT)
   })
@@ -35,9 +31,4 @@ describe('Box', () => {
     expect(render(<Box display="none" />)).toMatchSnapshot()
     expect(render(<Box display={['none', 'none', 'block']} theme={theme} />)).toMatchSnapshot()
   })
-
-  it('respects position', () => {
-    expect(render(<Box position="absolute" />)).toMatchSnapshot()
-    expect(render(<Box position="relative" />)).toMatchSnapshot()
-  })
 })

src/__tests__/__snapshots__/Avatar.js.snap

@@ -1,14 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Avatar renders default props 1`] = `
-.emotion-0 {
-  display: inline-block;
-  overflow: hidden;
-  line-height: 1;
-  vertical-align: middle;
-  border-radius: 2px;
-}
-
 <img
   alt=""
   blacklist={
@@ -30,7 +22,7 @@ exports[`Avatar renders default props 1`] = `
       "py",
     ]
   }
-  className="emotion-0"
+  className="css-6rzz8m"
   height={20}
   width={20}
 />