diff --git a/packages/props/README.md b/packages/props/README.md new file mode 100644 index 000000000..4d734a22b --- /dev/null +++ b/packages/props/README.md @@ -0,0 +1,26 @@ + +# @styled-system/props + +Utilities for using Styled System props + +```sh +npm i @styled-system/props +``` + +```js +import { pick, omit } from '@styled-system/props' + +const attr = omit({ + id: 'keep-this', + color: 'primary', +}) +// { id: 'keep-this' } + +const props = pick({ + className: 'hello', + color: 'secondary', +}) +// { color: 'secondary' } +``` + +MIT License diff --git a/packages/props/package.json b/packages/props/package.json new file mode 100644 index 000000000..cee684098 --- /dev/null +++ b/packages/props/package.json @@ -0,0 +1,14 @@ +{ + "name": "@styled-system/props", + "version": "5.1.2", + "main": "dist/index.js", + "module": "dist/index.esm.js", + "author": "Brent Jackson", + "license": "MIT", + "dependencies": { + "styled-system": "^5.0.0" + }, + "publishConfig": { + "access": "public" + } +} diff --git a/packages/props/src/index.js b/packages/props/src/index.js new file mode 100644 index 000000000..86867b6b7 --- /dev/null +++ b/packages/props/src/index.js @@ -0,0 +1,52 @@ +import { + compose, + space, + typography, + color, + layout, + flexbox, + border, + background, + position, + grid, + shadow, + buttonStyle, + textStyle, + colorStyle +} from 'styled-system' + +const all = compose( + space, + typography, + color, + layout, + flexbox, + border, + background, + position, + grid, + shadow, + buttonStyle, + textStyle, + colorStyle +) + +const regex = new RegExp(`^(${all.propNames.join('|')})$`) + +export const omit = props => { + const next = {} + for (let key in props) { + if (regex.test(key)) continue + next[key] = props[key] + } + return next +} + +export const pick = props => { + const next = {} + for (let key in props) { + if (!regex.test(key)) continue + next[key] = props[key] + } + return next +} diff --git a/packages/props/test/index.js b/packages/props/test/index.js new file mode 100644 index 000000000..6cef611e5 --- /dev/null +++ b/packages/props/test/index.js @@ -0,0 +1,26 @@ +import { pick, omit } from '../src' + +const props = { + id: 'hi', + className: 'beep', + p: 3, + bg: 'tomato', + color: 'white', +} + +test('omits styled-system props', () => { + const attr = omit(props) + expect(attr).toEqual({ + id: 'hi', + className: 'beep', + }) +}) + +test('picks styled-system props', () => { + const sx = pick(props) + expect(sx).toEqual({ + p: 3, + bg: 'tomato', + color: 'white', + }) +})