From e8ede46c08ce5a5cf72b3d2202deb3de5664e1fe Mon Sep 17 00:00:00 2001 From: atanasster Date: Sun, 13 Dec 2020 23:40:25 -0500 Subject: [PATCH 01/40] chore: replace emotion/styled with emotion/css --- packages/components/src/Box.js | 76 ++++++++++++++++++++++++---------- 1 file changed, 53 insertions(+), 23 deletions(-) diff --git a/packages/components/src/Box.js b/packages/components/src/Box.js index 650c45e2e..1bed7ef34 100644 --- a/packages/components/src/Box.js +++ b/packages/components/src/Box.js @@ -1,6 +1,7 @@ -import styled from '@emotion/styled' +/** @jsx jsx */ +import { jsx, useTheme } from '@emotion/react' +import React from 'react' import { css, get } from '@theme-ui/css' -import { createShouldForwardProp } from '@styled-system/should-forward-prop' import space from '@styled-system/space' import color from '@styled-system/color' @@ -12,29 +13,58 @@ const boxSystemProps = [...space.propNames, ...color.propNames] */ export const __isBoxStyledSystemProp = (prop) => boxSystemProps.includes(prop) -const shouldForwardProp = createShouldForwardProp(boxSystemProps) - const sx = (props) => css(props.sx)(props.theme) const base = (props) => css(props.__css)(props.theme) const variant = ({ theme, variant, __themeKey = 'variants' }) => - css(get(theme, __themeKey + '.' + variant, get(theme, variant))) - -export const Box = styled('div', { - shouldForwardProp, -})( - { - boxSizing: 'border-box', - margin: 0, - minWidth: 0, - }, - base, - variant, - space, - color, - sx, - (props) => props.css -) - -Box.displayName = 'Box' + css(get(theme, __themeKey + '.' + variant, get(theme, variant)))(theme) + +const objToArray = (obj) => + obj ? Object.keys(obj).map((key) => ({ [key]: obj[key] })) : [] + +const mergeProps = (props, initial, ...args) => { + return args.reduce( + (acc, fn) => [...acc, ...objToArray(fn(props))], + objToArray(initial) + ) +} +export const Box = React.forwardRef((props, ref) => { + const theme = useTheme() + + const { + variant: variantProp, + __themeKey = 'variants', + __css, + css: cssProp, + sx: sxProp, + as: Component = 'div', + ...rest + } = props + + const style = mergeProps( + { theme, ...props }, + { + boxSizing: 'border-box', + margin: 0, + minWidth: 0, + }, + base, + variant, + space, + color, + sx, + () => cssProp + ) + + internalProps.forEach((name) => { + delete rest[name] + }) + + return +}) + +Box.withComponent = + (component) => + ({ as, ...props }) => + export default Box From 3c2e4c8da23224a32b825a662cd525190a6198b9 Mon Sep 17 00:00:00 2001 From: atanasster Date: Mon, 14 Dec 2020 00:02:24 -0500 Subject: [PATCH 02/40] update fuction name for devtools --- packages/components/src/Box.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/Box.js b/packages/components/src/Box.js index 1bed7ef34..22c952e08 100644 --- a/packages/components/src/Box.js +++ b/packages/components/src/Box.js @@ -27,7 +27,7 @@ const mergeProps = (props, initial, ...args) => { objToArray(initial) ) } -export const Box = React.forwardRef((props, ref) => { +export const Box = React.forwardRef(function Box(props, ref) { const theme = useTheme() const { From 27565ed8b45b895debf39bf8cb3ea799c9b30cba Mon Sep 17 00:00:00 2001 From: atanasster Date: Mon, 14 Dec 2020 00:04:37 -0500 Subject: [PATCH 03/40] remove React import for forwardRef --- packages/components/src/Box.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/Box.js b/packages/components/src/Box.js index 22c952e08..0dbadb281 100644 --- a/packages/components/src/Box.js +++ b/packages/components/src/Box.js @@ -1,6 +1,6 @@ /** @jsx jsx */ import { jsx, useTheme } from '@emotion/react' -import React from 'react' +import { forwardRef } from 'react' import { css, get } from '@theme-ui/css' import space from '@styled-system/space' import color from '@styled-system/color' @@ -27,7 +27,7 @@ const mergeProps = (props, initial, ...args) => { objToArray(initial) ) } -export const Box = React.forwardRef(function Box(props, ref) { +export const Box = forwardRef(function Box(props, ref) { const theme = useTheme() const { From 938876ad513f48e82e75ab3456167c901e3b0abb Mon Sep 17 00:00:00 2001 From: atanasster Date: Mon, 14 Dec 2020 13:39:27 -0500 Subject: [PATCH 04/40] chore: remove @emotion/styled from components deps --- packages/components/package.json | 2 - yarn.lock | 106 +------------------------------ 2 files changed, 1 insertion(+), 107 deletions(-) diff --git a/packages/components/package.json b/packages/components/package.json index a90812aa9..01cdf1dea 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -8,9 +8,7 @@ "scripts": {}, "dependencies": { "@emotion/react": "^11.1.1", - "@emotion/styled": "^11.0.0", "@styled-system/color": "^5.1.2", - "@styled-system/should-forward-prop": "^5.1.2", "@styled-system/space": "^5.1.2", "@theme-ui/css": "0.10.0", "@types/styled-system": "^5.1.10" diff --git a/yarn.lock b/yarn.lock index 56dd7af13..307f1c3d5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1643,13 +1643,6 @@ resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413" integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow== -"@emotion/is-prop-valid@^0.8.1": - version "0.8.8" - resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a" - integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA== - dependencies: - "@emotion/memoize" "0.7.4" - "@emotion/is-prop-valid@^1.1.0": version "1.1.0" resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.1.0.tgz#29ef6be1e946fb4739f9707def860f316f668cde" @@ -1668,7 +1661,7 @@ specificity "^0.4.1" stylis "^4.0.3" -"@emotion/memoize@0.7.4", "@emotion/memoize@^0.7.1", "@emotion/memoize@^0.7.4": +"@emotion/memoize@^0.7.4": version "0.7.4" resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb" integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw== @@ -3524,20 +3517,6 @@ dependencies: "@sinonjs/commons" "^1.7.0" -"@styled-system/background@^5.1.2": - version "5.1.2" - resolved "https://registry.yarnpkg.com/@styled-system/background/-/background-5.1.2.tgz#75c63d06b497ab372b70186c0bf608d62847a2ba" - integrity sha512-jtwH2C/U6ssuGSvwTN3ri/IyjdHb8W9X/g8Y0JLcrH02G+BW3OS8kZdHphF1/YyRklnrKrBT2ngwGUK6aqqV3A== - dependencies: - "@styled-system/core" "^5.1.2" - -"@styled-system/border@^5.1.5": - version "5.1.5" - resolved "https://registry.yarnpkg.com/@styled-system/border/-/border-5.1.5.tgz#0493d4332d2b59b74bb0d57d08c73eb555761ba6" - integrity sha512-JvddhNrnhGigtzWRCVuAHepniyVi6hBlimxWDVAdcTuk7aRn9BYJUwfHslURtwYFsF5FoEs8Zmr1oZq2M1AP0A== - dependencies: - "@styled-system/core" "^5.1.2" - "@styled-system/color@^5.1.2": version "5.1.2" resolved "https://registry.yarnpkg.com/@styled-system/color/-/color-5.1.2.tgz#b8d6b4af481faabe4abca1a60f8daa4ccc2d9f43" @@ -3552,55 +3531,6 @@ dependencies: object-assign "^4.1.1" -"@styled-system/css@^5.1.5": - version "5.1.5" - resolved "https://registry.yarnpkg.com/@styled-system/css/-/css-5.1.5.tgz#0460d5f3ff962fa649ea128ef58d9584f403bbbc" - integrity sha512-XkORZdS5kypzcBotAMPBoeckDs9aSZVkvrAlq5K3xP8IMAUek+x2O4NtwoSgkYkWWzVBu6DGdFZLR790QWGG+A== - -"@styled-system/flexbox@^5.1.2": - version "5.1.2" - resolved "https://registry.yarnpkg.com/@styled-system/flexbox/-/flexbox-5.1.2.tgz#077090f43f61c3852df63da24e4108087a8beecf" - integrity sha512-6hHV52+eUk654Y1J2v77B8iLeBNtc+SA3R4necsu2VVinSD7+XY5PCCEzBFaWs42dtOEDIa2lMrgL0YBC01mDQ== - dependencies: - "@styled-system/core" "^5.1.2" - -"@styled-system/grid@^5.1.2": - version "5.1.2" - resolved "https://registry.yarnpkg.com/@styled-system/grid/-/grid-5.1.2.tgz#7165049877732900b99cd00759679fbe45c6c573" - integrity sha512-K3YiV1KyHHzgdNuNlaw8oW2ktMuGga99o1e/NAfTEi5Zsa7JXxzwEnVSDSBdJC+z6R8WYTCYRQC6bkVFcvdTeg== - dependencies: - "@styled-system/core" "^5.1.2" - -"@styled-system/layout@^5.1.2": - version "5.1.2" - resolved "https://registry.yarnpkg.com/@styled-system/layout/-/layout-5.1.2.tgz#12d73e79887e10062f4dbbbc2067462eace42339" - integrity sha512-wUhkMBqSeacPFhoE9S6UF3fsMEKFv91gF4AdDWp0Aym1yeMPpqz9l9qS/6vjSsDPF7zOb5cOKC3tcKKOMuDCPw== - dependencies: - "@styled-system/core" "^5.1.2" - -"@styled-system/position@^5.1.2": - version "5.1.2" - resolved "https://registry.yarnpkg.com/@styled-system/position/-/position-5.1.2.tgz#56961266566836f57a24d8e8e33ce0c1adb59dd3" - integrity sha512-60IZfMXEOOZe3l1mCu6sj/2NAyUmES2kR9Kzp7s2D3P4qKsZWxD1Se1+wJvevb+1TP+ZMkGPEYYXRyU8M1aF5A== - dependencies: - "@styled-system/core" "^5.1.2" - -"@styled-system/shadow@^5.1.2": - version "5.1.2" - resolved "https://registry.yarnpkg.com/@styled-system/shadow/-/shadow-5.1.2.tgz#beddab28d7de03cd0177a87ac4ed3b3b6d9831fd" - integrity sha512-wqniqYb7XuZM7K7C0d1Euxc4eGtqEe/lvM0WjuAFsQVImiq6KGT7s7is+0bNI8O4Dwg27jyu4Lfqo/oIQXNzAg== - dependencies: - "@styled-system/core" "^5.1.2" - -"@styled-system/should-forward-prop@^5.1.2": - version "5.1.5" - resolved "https://registry.yarnpkg.com/@styled-system/should-forward-prop/-/should-forward-prop-5.1.5.tgz#c392008c6ae14a6eb78bf1932733594f7f7e5c76" - integrity sha512-+rPRomgCGYnUIaFabDoOgpSDc4UUJ1KsmlnzcEp0tu5lFrBQKgZclSo18Z1URhaZm7a6agGtS5Xif7tuC2s52Q== - dependencies: - "@emotion/is-prop-valid" "^0.8.1" - "@emotion/memoize" "^0.7.1" - styled-system "^5.1.5" - "@styled-system/space@^5.1.2": version "5.1.2" resolved "https://registry.yarnpkg.com/@styled-system/space/-/space-5.1.2.tgz#38925d2fa29a41c0eb20e65b7c3efb6e8efce953" @@ -3608,21 +3538,6 @@ dependencies: "@styled-system/core" "^5.1.2" -"@styled-system/typography@^5.1.2": - version "5.1.2" - resolved "https://registry.yarnpkg.com/@styled-system/typography/-/typography-5.1.2.tgz#65fb791c67d50cd2900d234583eaacdca8c134f7" - integrity sha512-BxbVUnN8N7hJ4aaPOd7wEsudeT7CxarR+2hns8XCX1zp0DFfbWw4xYa/olA0oQaqx7F1hzDg+eRaGzAJbF+jOg== - dependencies: - "@styled-system/core" "^5.1.2" - -"@styled-system/variant@^5.1.5": - version "5.1.5" - resolved "https://registry.yarnpkg.com/@styled-system/variant/-/variant-5.1.5.tgz#8446d8aad06af3a4c723d717841df2dbe4ddeafd" - integrity sha512-Yn8hXAFoWIro8+Q5J8YJd/mP85Teiut3fsGVR9CAxwgNfIAiqlYxsk5iHU7VHJks/0KjL4ATSjmbtCDC/4l1qw== - dependencies: - "@styled-system/core" "^5.1.2" - "@styled-system/css" "^5.1.5" - "@szmarczak/http-timer@^1.1.2": version "1.1.2" resolved "https://registry.yarnpkg.com/@szmarczak/http-timer/-/http-timer-1.1.2.tgz#b1665e2c461a2cd92f4c1bbf50d5454de0d4b421" @@ -19144,25 +19059,6 @@ style-to-object@0.3.0, style-to-object@^0.3.0: dependencies: inline-style-parser "0.1.1" -styled-system@^5.1.5: - version "5.1.5" - resolved "https://registry.yarnpkg.com/styled-system/-/styled-system-5.1.5.tgz#e362d73e1dbb5641a2fd749a6eba1263dc85075e" - integrity sha512-7VoD0o2R3RKzOzPK0jYrVnS8iJdfkKsQJNiLRDjikOpQVqQHns/DXWaPZOH4tIKkhAT7I6wIsy9FWTWh2X3q+A== - dependencies: - "@styled-system/background" "^5.1.2" - "@styled-system/border" "^5.1.5" - "@styled-system/color" "^5.1.2" - "@styled-system/core" "^5.1.2" - "@styled-system/flexbox" "^5.1.2" - "@styled-system/grid" "^5.1.2" - "@styled-system/layout" "^5.1.2" - "@styled-system/position" "^5.1.2" - "@styled-system/shadow" "^5.1.2" - "@styled-system/space" "^5.1.2" - "@styled-system/typography" "^5.1.2" - "@styled-system/variant" "^5.1.5" - object-assign "^4.1.1" - stylehacks@^4.0.0: version "4.0.3" resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-4.0.3.tgz#6718fcaf4d1e07d8a1318690881e8d96726a71d5" From ff35264f19bef72bceb6a46533012fcc2e7cea5c Mon Sep 17 00:00:00 2001 From: Atanas Stoyanov Date: Tue, 5 Jan 2021 11:37:59 -0500 Subject: [PATCH 05/40] Update packages/components/src/Box.js great! Co-authored-by: Lachlan Campbell --- packages/components/src/Box.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/components/src/Box.js b/packages/components/src/Box.js index 0dbadb281..67f77e9d4 100644 --- a/packages/components/src/Box.js +++ b/packages/components/src/Box.js @@ -64,7 +64,13 @@ export const Box = forwardRef(function Box(props, ref) { Box.withComponent = (component) => - ({ as, ...props }) => - + ({ as, ...props }) => { + if (process.env.NODE_ENV !== 'production') { + console.warn( + '[theme-ui] You’re using the `.withComponent` API on a Theme UI component. This API will be deprecated in the next version; pass the `as` prop instead.' + ) + } + return + } export default Box From 8ff513ed0dad0b288c68dd16455f696c71bae95b Mon Sep 17 00:00:00 2001 From: hasparus Date: Mon, 9 Aug 2021 09:34:45 +0200 Subject: [PATCH 06/40] test(components): split tests into multiple .tsx files --- jest.config.js | 1 + packages/components/index.d.ts | 1 + packages/components/src/Box.js | 2 +- packages/components/test/Box.spec.tsx | 91 +++++++ packages/components/test/Buttons.spec.tsx | 26 ++ packages/components/test/Grid.spec.tsx | 59 +++++ .../test/__snapshots__/Box.spec.tsx.snap | 16 ++ .../test/__snapshots__/Buttons.spec.tsx.snap | 65 +++++ .../test/__snapshots__/Grid.spec.tsx.snap | 164 ++++++++++++ .../{index.js.snap => index.tsx.snap} | 242 ------------------ .../components/test/__test-utils__/index.tsx | 57 +++++ .../components/test/{index.js => index.tsx} | 216 +--------------- 12 files changed, 486 insertions(+), 454 deletions(-) create mode 100644 packages/components/test/Box.spec.tsx create mode 100644 packages/components/test/Buttons.spec.tsx create mode 100644 packages/components/test/Grid.spec.tsx create mode 100644 packages/components/test/__snapshots__/Box.spec.tsx.snap create mode 100644 packages/components/test/__snapshots__/Buttons.spec.tsx.snap create mode 100644 packages/components/test/__snapshots__/Grid.spec.tsx.snap rename packages/components/test/__snapshots__/{index.js.snap => index.tsx.snap} (86%) create mode 100644 packages/components/test/__test-utils__/index.tsx rename packages/components/test/{index.js => index.tsx} (66%) diff --git a/jest.config.js b/jest.config.js index fecdc23ce..afab8c9d6 100644 --- a/jest.config.js +++ b/jest.config.js @@ -17,6 +17,7 @@ const config = { '/style-guide/', 'tailwind.config.js', '/dist/', + '/__test-utils__/', ], coverageReporters: ['lcov', 'text', 'html'], collectCoverageFrom: [ diff --git a/packages/components/index.d.ts b/packages/components/index.d.ts index b9c87ddda..1f2f11b69 100644 --- a/packages/components/index.d.ts +++ b/packages/components/index.d.ts @@ -53,6 +53,7 @@ export interface GridProps extends BoxProps { * Space between child elements */ gap?: ResponsiveStyleValue + repeat?: 'fit' | 'fill' } /** * CSS grid layout component to arrange direct child elements in a tiled grid layout. diff --git a/packages/components/src/Box.js b/packages/components/src/Box.js index 67f77e9d4..fc541dfee 100644 --- a/packages/components/src/Box.js +++ b/packages/components/src/Box.js @@ -55,7 +55,7 @@ export const Box = forwardRef(function Box(props, ref) { () => cssProp ) - internalProps.forEach((name) => { + boxSystemProps.forEach((name) => { delete rest[name] }) diff --git a/packages/components/test/Box.spec.tsx b/packages/components/test/Box.spec.tsx new file mode 100644 index 000000000..73a96e4fa --- /dev/null +++ b/packages/components/test/Box.spec.tsx @@ -0,0 +1,91 @@ +import React from 'react' +import { renderJSON } from '@theme-ui/test-utils' +import { ThemeProvider } from 'theme-ui' + +import { Box } from '..' + +import { theme } from './__test-utils__' + +describe('Box', () => { + test('renders', () => { + const json = renderJSON(Hello) + expect(json).toMatchSnapshot() + }) + + test('renders with padding props', () => { + const json = renderJSON() + expect(json).toHaveStyleRule('padding-left', '8px') + expect(json).toHaveStyleRule('padding-right', '8px') + expect(json).toHaveStyleRule('padding-top', '32px') + expect(json).toHaveStyleRule('padding-bottom', '32px') + }) + + test('renders with margin props', () => { + const json = renderJSON() + expect(json).toHaveStyleRule('margin', '16px') + expect(json).toHaveStyleRule('margin-bottom', '32px') + }) + + test('renders with color props', () => { + const json = renderJSON() + expect(json).toHaveStyleRule('color', 'tomato') + expect(json).toHaveStyleRule('background-color', 'black') + }) + + test('renders with sx prop', () => { + const json = renderJSON( + + ) + expect(json).toHaveStyleRule('background-color', 'tomato') + expect(json).toHaveStyleRule('border-radius', '4px') + }) + + test('renders with variant prop', () => { + const json = renderJSON( + + + + ) + expect(json).toHaveStyleRule('background-color', 'highlight') + expect(json).toHaveStyleRule('padding', '32px') + }) + + test('renders with base styles', () => { + const json = renderJSON( + + ) + expect(json).toHaveStyleRule('padding', '32px') + expect(json).toHaveStyleRule('color', 'tomato') + expect(json).toHaveStyleRule('background-color', 'cyan') + }) + + test('renders with __themeKey variant', () => { + const json = renderJSON( + + + + ) + expect(json).toHaveStyleRule('background-color', 'highlight') + expect(json).toHaveStyleRule('padding', '32px') + }) +}) diff --git a/packages/components/test/Buttons.spec.tsx b/packages/components/test/Buttons.spec.tsx new file mode 100644 index 000000000..8d3db982d --- /dev/null +++ b/packages/components/test/Buttons.spec.tsx @@ -0,0 +1,26 @@ +import React from 'react' +import { renderJSON } from '@theme-ui/test-utils' +import { ThemeProvider } from 'theme-ui' + +import { Button } from '..' + +import { theme } from './__test-utils__' + +describe('Button', () => { + test('renders', () => { + const json = renderJSON( + +