♻️ Remove extend utility

Author: exah

docs/image.mdx

@@ -5,6 +5,7 @@ menu: Primitives
 ---
 
 import { Playground } from 'docz'
+import { PropsTable } from '../.internal/props-table'
 import { Image } from '../src'
 
 # Image
@@ -18,3 +19,8 @@ import { Image } from 'pss-components'
 <Playground>
   <Image src='http://placekitten.com/500' width={1 / 2} alt='' />
 </Playground>
+
+
+## Props Table
+
+<PropsTable of={Image} />

src/image.js

@@ -1,18 +1,20 @@
-import React from 'react'
+import use from 'reuse'
+import styled from '@emotion/styled'
+import { themePath } from 'pss'
 import { Box } from './box'
-import { extend } from './utils'
 
-const Image = extend(props => (
-  <Box
-    use='img'
-    display='block'
-    maxWidth='100%'
-    height='auto'
-    {...props}
-  />
-))
+const Image = styled(use(Box, 'img'))(
+  themePath('image')
+)
 
 Image.displayName = 'Image'
+Image.propTypes = { ...Box.propTypes }
+
+Image.defaultProps = {
+  display: 'block',
+  maxWidth: '100%',
+  height: 'auto'
+}
 
 export {
   Image

src/layout.js

@@ -1,17 +1,17 @@
 import React from 'react'
 import { Flex } from './flex'
 import { Box } from './box'
-import { extend } from './utils'
+import { withRef } from './utils'
 
-const Layout = extend(props => (
+const Layout = withRef((props) => (
   <Flex flex='1 1 auto' {...props} />
 ))
 
-const LayoutSide = extend(props => (
+const LayoutSide = withRef((props) => (
   <Box flex='0 0 auto' {...props} />
 ))
 
-const LayoutContent = extend(props => (
+const LayoutContent = withRef((props) => (
   <Box flex='1 1 auto' {...props} />
 ))
 

src/utils.js

@@ -1,10 +1,9 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { filterObj, isStr, flatten, identity } from '@exah/utils'
+import { filterObj, isStr, identity } from '@exah/utils'
 
 export const omit = (blacklist = []) => filterObj((key) => !blacklist.includes(key))
 export const omitStyles = (styles) => omit(Object.keys(Object(styles.propTypes)))
-export const cx = (...args) => flatten(args).filter(isStr).join(' ')
 
 export const withRef = (render) => React.forwardRef(
   (props, ref) => render({ ref, ...props })
@@ -42,22 +41,3 @@ export function base ({
     }
   })
 }
-
-const generateClassName = ((id) => () => {
-  id++
-  return 'pss-' + id
-})(-1)
-
-export function extend (render) {
-  const className = generateClassName()
-
-  const Comp = withRef((props) =>
-    render({ ...props, className: cx(props.className, className) })
-  )
-
-  return Object.defineProperties(Comp, {
-    toString: {
-      value: () => `.${className}`
-    }
-  })
-}

test/__snapshots__/index.js.snap

@@ -1473,7 +1473,7 @@ exports[`Grid basic 1`] = `
 `;
 
 exports[`Image empty 1`] = `
-.emotion-0 {
+.emotion-1 {
   box-sizing: border-box;
   border: 0;
   margin: 0;
@@ -1485,26 +1485,26 @@ exports[`Image empty 1`] = `
 }
 
 <img
-  className="pss-3 emotion-0 emotion-1"
+  className="emotion-0 emotion-1 emotion-2"
 />
 `;
 
 exports[`Image with image 1`] = `
-.emotion-0 {
+.emotion-1 {
   box-sizing: border-box;
   border: 0;
   margin: 0;
   padding: 0;
   min-width: 0;
+  width: 50%;
   display: block;
   max-width: 100%;
   height: auto;
-  width: 50%;
 }
 
 <img
   alt=""
-  className="pss-3 emotion-0 emotion-1"
+  className="emotion-0 emotion-1 emotion-2"
   src="http://placekitten.com/500"
 />
 `;
@@ -1549,15 +1549,15 @@ exports[`Layout Holy Grail 1`] = `
 }
 
 <div
-  className="pss-0 emotion-6 emotion-7 emotion-1"
+  className="emotion-6 emotion-7 emotion-1"
 >
   <header
     className="emotion-0 emotion-1"
   >
     Header
   </header>
   <main
-    className="pss-2 emotion-2 emotion-1"
+    className="emotion-2 emotion-1"
   >
     Main
   </main>
@@ -1608,15 +1608,15 @@ exports[`Layout Media Object 1`] = `
 }
 
 <div
-  className="pss-0 emotion-4 emotion-5 emotion-1"
+  className="emotion-4 emotion-5 emotion-1"
 >
   <div
-    className="pss-1 emotion-0 emotion-1"
+    className="emotion-0 emotion-1"
   >
     Side
   </div>
   <div
-    className="pss-2 emotion-2 emotion-1"
+    className="emotion-2 emotion-1"
   >
     Content
   </div>