` as the HTML element.
87 | To change the HTML element use the `is` prop.
88 |
89 | ```js
90 | const Heading = system({
91 | is: 'h2',
92 | m: 0,
93 | fontSize: 6
94 | }, 'space', 'fontSize')
95 | ```
96 |
97 | Since `is` is a prop, it can also be passed to the element when used.
98 | This is useful for one-off changes to ensure semantic markup.
99 |
100 | ```js
101 |
102 | Hello
103 |
104 | ```
105 |
106 | ### Extending components
107 |
108 | To extend another component, use the `extend` prop in your component definition.
109 |
110 | ```js
111 | const Text = system({
112 | fontSize: 2,
113 | }, 'fontSize')
114 |
115 | const Bold = system({
116 | extend: Text,
117 | fontWeight: 'bold'
118 | }, 'fontWeight')
119 | ```
120 |
121 | ### CSS prop
122 |
123 | To add one-off custom CSS to any @rebass/component, use the `css` prop.
124 |
125 | ```js
126 |
127 | Hello
128 |
129 | ```
130 |
131 | The `css` prop can also accept object literal syntax.
132 |
133 | ```jsx
134 |
138 | Hello
139 |
140 | ```
141 |
142 | ---
143 |
144 | [MIT License](License.md)
145 |
146 | [sys]: https://github.com/jxnblk/styled-system
147 | [sc]: https://github.com/styled-components/styled-components
148 | [emotion]: https://github.com/emotion-js/emotion
149 |
--------------------------------------------------------------------------------
/build-docs.js:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 | const path = require('path')
3 | // const shell = require('shelljs')
4 | const got = require('got')
5 |
6 | const repo = 'rebassjs%2Frebassjs.github.io'
7 |
8 | console.log(`Fetching Git commit hash...`)
9 |
10 | /*
11 | const gitCommitRet = shell.exec('git rev-parse HEAD', {
12 | cwd: path.join(__dirname, '..')
13 | })
14 |
15 | if (0 !== gitCommitRet.code) {
16 | console.error('Error getting git commit hash')
17 |
18 | process.exit(-1)
19 | }
20 | */
21 |
22 | // const gitCommitHash = gitCommitRet.stdout.trim()
23 |
24 | // console.log(`Git commit: ${gitCommitHash}`)
25 | console.log('Calling Travis...')
26 |
27 | const endpoint = `https://api.travis-ci.org/repo/${repo}/requests`
28 |
29 | got.post(endpoint, {
30 | headers: {
31 | 'Content-Type': 'application/json',
32 | 'Accept': 'application/json',
33 | 'Travis-API-Version': '3',
34 | 'Authorization': `token ${process.env.TRAVIS_API_TOKEN}`,
35 | },
36 | body: JSON.stringify({
37 | request: {
38 | // message: `Trigger build at ${repo} commit: ${gitCommitHash}`,
39 | message: `Trigger build at ${repo}`,
40 | branch: 'src',
41 | },
42 | }),
43 | })
44 | .then(() => {
45 | console.log(`Triggered build of ${repo}`)
46 | })
47 | .catch((err) => {
48 | console.error(err)
49 | process.exit(-1)
50 | })
51 |
--------------------------------------------------------------------------------
/docs/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import system from '../src'
3 |
4 | // demo for manually testing
5 | // - ref
6 | // - innerRef
7 | // - is
8 | // - extending
9 |
10 | const Box = system({
11 | }, 'space', 'color', 'fontSize')
12 |
13 | const Flex = system({
14 | extend: Box,
15 | }, { display: 'flex' },
16 | 'alignItems',
17 | 'justifyContent',
18 | )
19 |
20 | export default class extends React.Component {
21 | render () {
22 | return (
23 |
25 | @rebass/components
26 |
32 |
37 | Hello
38 |
39 | Box
40 |
41 |
42 | )
43 | }
44 | }
45 | // ref={ref => { console.log('ref', ref) }}
46 | // innerRef={ref => { console.log('innerRef', ref) }}
47 |
--------------------------------------------------------------------------------
/emotion.js:
--------------------------------------------------------------------------------
1 | module.exports = require('./dist/emotion')
2 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@rebass/components",
3 | "version": "4.0.0-1",
4 | "description": "Create consistent styled-system based React UI components",
5 | "main": "dist/index.js",
6 | "scripts": {
7 | "prepare": "babel src -d dist && npm run emotion",
8 | "emotion": "NODE_ENV=emotion babel src -d dist/emotion",
9 | "cover": "jest --coverage",
10 | "start": "mdx-go docs",
11 | "test": "jest"
12 | },
13 | "keywords": [
14 | "react",
15 | "components",
16 | "styled-system",
17 | "styled-components",
18 | "emotion",
19 | "design-system",
20 | "theme",
21 | "css-in-js"
22 | ],
23 | "repository": "github:jxnblk/styled-system",
24 | "author": "Brent Jackson",
25 | "license": "MIT",
26 | "dependencies": {
27 | "styled-system": "^3.0.1"
28 | },
29 | "devDependencies": {
30 | "babel-cli": "^6.26.0",
31 | "babel-plugin-transform-rename-import": "^2.3.0",
32 | "babel-preset-env": "^1.7.0",
33 | "babel-preset-react": "^6.24.1",
34 | "babel-preset-stage-0": "^6.24.1",
35 | "babel-register": "^6.26.0",
36 | "emotion": "^9.2.3",
37 | "got": "^9.2.0",
38 | "jest": "^23.3.0",
39 | "jest-styled-components": "^6.0.1",
40 | "mdx-go": "^1.0.10",
41 | "react": "^16.4.1",
42 | "react-dom": "^16.4.1",
43 | "react-emotion": "^9.2.3",
44 | "react-test-renderer": "^16.4.1",
45 | "shelljs": "^0.8.2",
46 | "styled-components": "^3.3.2"
47 | },
48 | "jest": {
49 | "testMatch": [
50 | "**/test.js"
51 | ],
52 | "coverageReporters": [
53 | "html"
54 | ]
55 | }
56 | }
57 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { styles, util } from 'styled-system'
3 | import styled from 'styled-components'
4 |
5 | const css = props => props.css
6 |
7 | const omit = (obj, blacklist) => {
8 | const next = {}
9 | for (let key in obj) {
10 | if (blacklist.indexOf(key) > -1) continue
11 | next[key] = obj[key]
12 | }
13 | return next
14 | }
15 |
16 | const styleKeys = Object.keys(styles)
17 | .filter(key => typeof styles[key] === 'function')
18 |
19 | const propNames = styleKeys
20 | .reduce((a, key) => {
21 | const names = Object.keys(styles[key].propTypes)
22 | return [ ...a, ...names ]
23 | }, [])
24 |
25 | // private blacklist
26 | const _blacklist = [
27 | 'css',
28 | 'is',
29 | 'tag',
30 | 'extend',
31 | ...propNames
32 | ]
33 |
34 | const tag = React.forwardRef(({
35 | blacklist = [],
36 | ...props
37 | }, ref) => {
38 | const Base = props.extend || props.tag || props.is || 'div'
39 | const next = omit(props, typeof Base === 'string' ? [
40 | ..._blacklist,
41 | ...blacklist
42 | ] : [ 'extend' ])
43 | return React.createElement(Base, { ...next, ref })
44 | })
45 |
46 | const getPropTypes = funcs => funcs
47 | .filter(fn => typeof fn === 'function' && typeof fn.propTypes === 'object')
48 | .reduce((a, fn) => ({
49 | ...a,
50 | ...fn.propTypes
51 | }), {})
52 |
53 | const system = (props = {}, ...keysOrStyles) => {
54 | const funcs = keysOrStyles.map(key => styles[key] || key)
55 | const propTypes = getPropTypes(funcs)
56 |
57 | const Component = styled(tag)([], ...funcs, css)
58 |
59 | const baseProps = util.get(props, 'extend.defaultProps') || {}
60 |
61 | Component.defaultProps = {
62 | ...baseProps,
63 | ...props
64 | }
65 |
66 | Component.propTypes = getPropTypes(funcs)
67 | Component.systemComponent = true
68 |
69 | return Component
70 | }
71 |
72 | export default system
73 |
--------------------------------------------------------------------------------
/test.js:
--------------------------------------------------------------------------------
1 | import 'jest-styled-components'
2 | import styled, { css as scCSS, isStyledComponent } from 'styled-components'
3 | import { space, color } from 'styled-system'
4 | import React from 'react'
5 | import { create as render } from 'react-test-renderer'
6 | import { isDOMComponent, isCompositeComponent } from 'react-dom/test-utils'
7 | import system from './src'
8 |
9 |
10 | describe('@rebass/components', () => {
11 | test('returns a React component', () => {
12 | const Box = system()
13 | const box = render(
).getInstance()
14 | expect(isCompositeComponent(box)).toBe(true)
15 | })
16 |
17 | test('returns a styled-component', () => {
18 | const Box = system()
19 | expect(typeof Box).toBe('function')
20 | expect(typeof Box.styledComponentId).toBe('string')
21 | expect(isStyledComponent(Box)).toBe(true)
22 | })
23 |
24 | test('Adds defaultProps', () => {
25 | const Box = system({
26 | p: 2,
27 | bg: 'tomato'
28 | })
29 | expect(Box.defaultProps.p).toBe(2)
30 | expect(Box.defaultProps.bg).toBe('tomato')
31 | })
32 |
33 | test('adds propTypes', () => {
34 | const Box = system({}, 'space', 'color')
35 | expect(Box.propTypes).toEqual({
36 | ...space.propTypes,
37 | ...color.propTypes,
38 | })
39 | })
40 |
41 | // deprecate
42 | test.skip('adds styled-system functions based on default props', () => {
43 | const Box = system({
44 | p: 3,
45 | bg: 'tomato'
46 | })
47 | const json = render(
).toJSON()
48 | expect(json).toHaveStyleRule('padding', '16px')
49 | expect(json).toHaveStyleRule('background-color', 'tomato')
50 | })
51 |
52 | test('accepts system key arguments', () => {
53 | const Box = system({}, 'space', 'color')
54 | expect(typeof Box.propTypes.m).toBe('function')
55 | expect(typeof Box.propTypes.color).toBe('function')
56 | expect(typeof Box.propTypes.bg).toBe('function')
57 | })
58 |
59 | test('ignores nonexistant function keys', () => {
60 | const Box = system({}, 'foo', 'bar')
61 | expect(Box.propsTypes).toBe(undefined)
62 | })
63 |
64 | test('accepts custom function arguments', () => {
65 | const big = props => props.big ? { padding: '64px' } : null
66 | const Box = system({}, big)
67 | const json = render(
).toJSON()
68 | expect(json).toHaveStyleRule('padding', '64px')
69 | })
70 |
71 | test('removes styled-system props from underlying DOM element', () => {
72 | const Box = system({
73 | color: 'blue'
74 | })
75 | const json = render(
).toJSON()
76 | expect(json.props.color).toBe(undefined)
77 | expect(typeof json.props.className).toBe('string')
78 | })
79 |
80 | test('removes blacklist props from underlying DOM element', () => {
81 | const Box = system({
82 | blacklist: ['customProp']
83 | })
84 | const json = render(
).toJSON()
85 | expect(json.props.customProp).toBe(undefined)
86 | })
87 |
88 | test('accepts an `is` prop to change the underlying DOM element', () => {
89 | const Box = system({})
90 | const json = render(
).toJSON()
91 | expect(json.type).toBe('h1')
92 | })
93 |
94 | test('accepts a style function argument', () => {
95 | const Box = system({}, props => `color:${props.color};`)
96 | const json = render(
).toJSON()
97 | expect(json).toHaveStyleRule('color', 'magenta')
98 | })
99 |
100 | test('accepts theme as a default prop', () => {
101 | const theme = {
102 | colors: {
103 | blue: '#0af'
104 | }
105 | }
106 | const Box = system({ color: 'blue', theme }, 'color')
107 | const json = render(
).toJSON()
108 | expect(json).toHaveStyleRule('color', '#0af')
109 | })
110 |
111 | test('passes css string arguments', () => {
112 | const Box = system({}, 'color:cyan;')
113 | const json = render(
).toJSON()
114 | expect(json).toHaveStyleRule('color', 'cyan')
115 | })
116 |
117 | test('works with the styled-component `css` helper', () => {
118 | const Box = system({}, scCSS`
119 | color: ${props => props.color};
120 | `)
121 | const json = render(
).toJSON()
122 | expect(json).toHaveStyleRule('color', 'yellow')
123 | })
124 |
125 | test('defaultProps are passed to extended components', () => {
126 | const Box = system({
127 | p: 2,
128 | bg: 'tomato'
129 | }, 'space', 'color')
130 | const ExtendedBox = system({ extend: Box })
131 | const json = render(
).toJSON()
132 | expect(json).toHaveStyleRule('background-color', 'tomato')
133 | })
134 |
135 | test('accepts a css prop for custom styling', () => {
136 | const Box = system({})
137 | const json = render(
).toJSON()
138 | expect(json).toHaveStyleRule('color', 'tomato')
139 | })
140 |
141 | test('merges defaultProps from `extend` prop component', () => {
142 | const Base = system({ p: 3 }, 'space')
143 | const Ext = system({ extend: Base })
144 | const json = render(
).toJSON()
145 | expect(json).toHaveStyleRule('padding', '16px')
146 | expect(Ext.defaultProps.p).toBe(3)
147 | })
148 |
149 | test('extends components with the `extend` prop and passes `is` prop to base component', () => {
150 | const Base = system({ p: 3 }, 'space')
151 | const Ext = system({ extend: Base }, 'color')
152 | const base = render(
).toJSON()
153 | const json = render(
).toJSON()
154 | expect(json.type).toBe('footer')
155 | expect(json).toHaveStyleRule('background-color', 'tomato')
156 | expect(json).toHaveStyleRule('padding', '16px')
157 | })
158 |
159 | test('extends a non-system component and does not accept an is prop', () => {
160 | const Base = props =>
161 | const Ext = system({ extend: Base }, 'color')
162 | const json = render(
163 |
164 | ).toJSON()
165 | expect(json.type).toBe('div')
166 | expect(json).toHaveStyleRule('color', 'tomato')
167 | })
168 |
169 | test('passes innerRef to underlying element', () => {
170 | const Base = system({})
171 | let foo = 'hello'
172 | const instance = render(
173 |
foo = ref} />
174 | ).getInstance()
175 | expect(isCompositeComponent(instance)).toBe(true)
176 | expect(foo).not.toBe('hello')
177 | })
178 | })
179 |
--------------------------------------------------------------------------------