Repository: styled-system/styled-system
Pull request #523 (2019-06-02 15:18:47)

Add prop-types package for V5


Patch:
diff --git a/benchmarks/package.json b/benchmarks/package.json
index 2861892..5fa9f30 100644
--- a/benchmarks/package.json
+++ b/benchmarks/package.json
@@ -7,7 +7,7 @@
   },
   "dependencies": {
     "@2s/smooth-system": "^4.2.2-0",
-    "@styled-system/css": "^2.0.4",
+    "@styled-system/css": "5.0.0-7",
     "@styled-system/space": "^5.0.0-7",
     "@xstyled/system": "^1.0.0",
     "benchmark": "^2.1.4",
diff --git a/examples/basic/package.json b/examples/basic/package.json
index 1371038..7b7df2a 100644
--- a/examples/basic/package.json
+++ b/examples/basic/package.json
@@ -6,7 +6,7 @@
     "react": "^16.8.5",
     "react-dom": "^16.8.5",
     "styled-components": "^4.2.0",
-    "styled-system": "^4.0.6"
+    "styled-system": "5.0.0-8"
   },
   "scripts": {}
 }
diff --git a/examples/css/package.json b/examples/css/package.json
index 47ee96c..0812736 100644
--- a/examples/css/package.json
+++ b/examples/css/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "dependencies": {
     "@emotion/core": "^10.0.9",
-    "@styled-system/css": "^2.0.0",
+    "@styled-system/css": "5.0.0-7",
     "react": "^16.8.5",
     "react-dom": "^16.8.5",
     "react-scripts": "^2.1.8"
diff --git a/examples/emotion/package.json b/examples/emotion/package.json
index abc4d61..461415f 100644
--- a/examples/emotion/package.json
+++ b/examples/emotion/package.json
@@ -9,7 +9,7 @@
     "react": "^16.8.5",
     "react-dom": "^16.8.5",
     "react-scripts": "^2.1.8",
-    "styled-system": "^4.0.6"
+    "styled-system": "5.0.0-8"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/examples/responsive-objects/package.json b/examples/responsive-objects/package.json
index 0b3e2a5..5db4948 100644
--- a/examples/responsive-objects/package.json
+++ b/examples/responsive-objects/package.json
@@ -9,7 +9,7 @@
     "react": "^16.8.5",
     "react-dom": "^16.8.5",
     "react-scripts": "^3.0.0",
-    "styled-system": "^4.0.6"
+    "styled-system": "5.0.0-8"
   },
   "scripts": {
     "start": "react-scripts start"
diff --git a/examples/svelte/package.json b/examples/svelte/package.json
index 5bb1a1c..523019c 100644
--- a/examples/svelte/package.json
+++ b/examples/svelte/package.json
@@ -12,9 +12,9 @@
     "sirv-cli": "^0.3.1"
   },
   "dependencies": {
-    "@styled-system/css": "2.0.0",
-    "emotion": "10.0.9",
-    "styled-system": "4.2.1",
+    "@styled-system/css": "5.0.0-7",
+    "emotion": "^10.0.9",
+    "styled-system": "5.0.0-8",
     "svelte": "^3.0.0"
   },
   "scripts": {
diff --git a/examples/theme-aliases/package.json b/examples/theme-aliases/package.json
index b3cbbcf..36381c7 100644
--- a/examples/theme-aliases/package.json
+++ b/examples/theme-aliases/package.json
@@ -6,7 +6,7 @@
     "react": "^16.8.5",
     "react-dom": "^16.8.5",
     "styled-components": "^4.2.0",
-    "styled-system": "^4.0.6"
+    "styled-system": "5.0.0-8"
   },
   "scripts": {}
 }
diff --git a/packages/prop-types/.gitignore b/packages/prop-types/.gitignore
new file mode 100644
index 0000000..1521c8b
--- /dev/null
+++ b/packages/prop-types/.gitignore
@@ -0,0 +1,1 @@
+dist
diff --git a/packages/prop-types/.npmignore b/packages/prop-types/.npmignore
new file mode 100644
index 0000000..deac67c
--- /dev/null
+++ b/packages/prop-types/.npmignore
@@ -0,0 +1,3 @@
+src
+test
+babel.config.js
diff --git a/packages/prop-types/README.md b/packages/prop-types/README.md
new file mode 100644
index 0000000..eded234
--- /dev/null
+++ b/packages/prop-types/README.md
@@ -0,0 +1,21 @@
+
+# @styled-system/prop-types
+
+Add prop types to components built with Styled System
+
+```sh
+npm i styled-system @styled-system/prop-types
+```
+
+```js
+import styled from 'styled-components'
+import { space, color } from 'styled-system'
+import propTypes from '@styled-system/prop-types'
+
+const Box = styled('div')(space, color)
+
+Box.propTypes = {
+  ...propTypes.space,
+  ...propTypes.color,
+}
+```
diff --git a/packages/prop-types/babel.config.js b/packages/prop-types/babel.config.js
new file mode 100644
index 0000000..46bf530
--- /dev/null
+++ b/packages/prop-types/babel.config.js
@@ -0,0 +1,1 @@
+module.exports = require('../../babel.config')
diff --git a/packages/prop-types/package.json b/packages/prop-types/package.json
new file mode 100644
index 0000000..37bbcf8
--- /dev/null
+++ b/packages/prop-types/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "@styled-system/prop-types",
+  "version": "5.0.0-8",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "author": "Brent Jackson",
+  "license": "MIT",
+  "scripts": {
+    "prepare": "mkdir -p dist && npm run build:cjs && npm run build:esm",
+    "build:cjs": "NODE_ENV=cjs babel src/index.js -o dist/index.js",
+    "build:esm": "NODE_ENV=esm babel src/index.js -o dist/index.esm.js"
+  },
+  "peerDependencies": {
+    "styled-system": "^5.0.0-8"
+  },
+  "devDependencies": {
+    "styled-system": "^5.0.0-8"
+  },
+  "dependencies": {
+    "prop-types": "^15.7.2"
+  }
+}
diff --git a/packages/prop-types/src/index.js b/packages/prop-types/src/index.js
new file mode 100644
index 0000000..46e35fb
--- /dev/null
+++ b/packages/prop-types/src/index.js
@@ -0,0 +1,38 @@
+import PropTypes from 'prop-types'
+import {
+  space,
+  color,
+  layout,
+  typography,
+  flexbox,
+  border,
+  background,
+  position,
+  grid,
+} from 'styled-system'
+
+export const propType = PropTypes.oneOfType([
+  PropTypes.number,
+  PropTypes.string,
+  PropTypes.array,
+  PropTypes.object,
+])
+
+const createPropTypes = props => {
+  return props.reduce((acc, name) => ({
+  ...acc,
+  [name]: propType,
+}), {})
+}
+
+export default {
+  space: createPropTypes(space.propNames),
+  color: createPropTypes(color.propNames),
+  layout: createPropTypes(layout.propNames),
+  typography: createPropTypes(typography.propNames),
+  flexbox: createPropTypes(flexbox.propNames),
+  border: createPropTypes(border.propNames),
+  background: createPropTypes(background.propNames),
+  position: createPropTypes(position.propNames),
+  grid: createPropTypes(grid.propNames),
+}


Test patch:
diff --git a/packages/prop-types/test/index.js b/packages/prop-types/test/index.js
new file mode 100644
index 0000000..79a8278
--- /dev/null
+++ b/packages/prop-types/test/index.js
@@ -0,0 +1,15 @@
+import propTypes from '../src'
+import {
+  space,
+  color,
+} from 'styled-system'
+
+test('includes prop types for all space prop names', () => {
+  const types = Object.keys(propTypes.space)
+  expect(types).toEqual(space.propNames)
+})
+
+test('includes prop types for all color prop names', () => {
+  const types = Object.keys(propTypes.color)
+  expect(types).toEqual(color.propNames)
+})