From 1cf910e8701a051e26e31477f19aaaa12b16e226 Mon Sep 17 00:00:00 2001 From: Andrew Hansen Date: Sun, 25 Feb 2018 21:21:44 -0800 Subject: [PATCH 1/6] wip --- .vscode/settings.json | 1 - package.json | 27 ++----- scripts/webpack.config.js | 1 + src/asGrid/index.js | 24 ++++++- src/asLayout/index.js | 26 ++++++- src/core/asCore.js | 39 +++++----- src/core/index.js | 58 +++++++++++++++ test/__snapshots__/storyshots.spec.js.snap | 84 +++++++++++----------- 8 files changed, 172 insertions(+), 88 deletions(-) create mode 100644 src/core/index.js diff --git a/.vscode/settings.json b/.vscode/settings.json index 18d5c8d14..e2974137f 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,6 +1,5 @@ { "editor.detectIndentation": false, - "editor.formatOnSave": false, "editor.insertSpaces": true, "editor.tabSize": 2, "files.associations": { diff --git a/package.json b/package.json index f53011ece..5841a2ada 100644 --- a/package.json +++ b/package.json @@ -5,14 +5,7 @@ "main": "index.js", "unpkg": "dist/gymnast.min.js", "homepage": "https://gymnastjs.github.io/gymnast", - "files": [ - "package.json", - "README.md", - "LICENSE", - "src", - "dist", - "index.js" - ], + "files": ["package.json", "README.md", "LICENSE", "src", "dist", "index.js"], "repository": { "type": "git", "url": "https://github.com/gymnastjs/gymnast" @@ -104,10 +97,7 @@ "webpack-bundle-analyzer": "2.10.0" }, "lint-staged": { - "*.{js,css}": [ - "format", - "git add" - ] + "*.{js,css}": ["format", "git add"] }, "bundlesize": [ { @@ -116,9 +106,7 @@ } ], "jest": { - "collectCoverageFrom": [ - "src/{,**/}*.js" - ], + "collectCoverageFrom": ["src/{,**/}*.js"], "setupTestFrameworkScriptFile": "/test/env.js", "moduleNameMapper": { "^.+[.]css$": "identity-obj-proxy", @@ -127,9 +115,7 @@ "transform": { "^.+[.]js$": "babel-jest" }, - "transformIgnorePatterns": [ - "/node_modules\\/(?!picturebook)" - ] + "transformIgnorePatterns": ["/node_modules\\/(?!picturebook)"] }, "scripts": { "build:dev": "webpack --config scripts/webpack.config.js", @@ -148,10 +134,11 @@ "lint": "npm-run-all --parallel lint:*", "precommit": "lint-staged", "start:storybook": "picturebook -p 9001 -s ./static -c node_modules/picturebook/config", - "start:webpack": "yarn build:dev -- --watch", + "start:webpack": "yarn build:dev --watch", "start": "npm-run-all --parallel start:*", "test:bithound": "bithound check git@github.com:gymnastjs/gymnast.git", - "test:image": "picturebook-image --env iphone7,ie11,safari,firefox,edge,chrome --suiteRetries 3", + "test:image": + "picturebook-image --env iphone7,ie11,safari,firefox,edge,chrome --suiteRetries 3", "test:size": "bundlesize", "test": "jest", "test:cover": "jest --coverage", diff --git a/scripts/webpack.config.js b/scripts/webpack.config.js index 2bebbda12..cce7c4a92 100644 --- a/scripts/webpack.config.js +++ b/scripts/webpack.config.js @@ -52,6 +52,7 @@ module.exports = { rules: [ { test: /\.js$/, + exclude: /node_modules/, use: 'babel-loader', }, ], diff --git a/src/asGrid/index.js b/src/asGrid/index.js index a247b0f37..5d6e01b7e 100644 --- a/src/asGrid/index.js +++ b/src/asGrid/index.js @@ -8,7 +8,9 @@ import type { } from '../types' import { styles, getCol } from './grid.styles' import { getValue } from '../utils' -import asCore from '../core/asCore' +import { sharedResolutionProperties, getCoreStyles } from '../core' +import withResolution from '../withResolution' +import { ConfigContextPropTypes } from '../configProvider' const resolutionProperties = ['align', 'justify', 'size'] @@ -19,6 +21,10 @@ export default function asGrid( { align, className, justify, size, innerRef, ...props }: OneResolutionGrid, context: ConfigProviderContext ) { + const { styles: coreStyles, props: restProps } = getCoreStyles( + props, + context + ) const classes = compact([ styles.grid, getCol(size, getValue(context, 'columns')), @@ -27,8 +33,20 @@ export default function asGrid( justify && styles[`${justify}Justify`], ]) - return + return ( + + ) } - return asCore(Grid, resolutionProperties) + Grid.contextTypes = ConfigContextPropTypes + + return withResolution( + Grid, + sharedResolutionProperties.concat(resolutionProperties) + ) } diff --git a/src/asLayout/index.js b/src/asLayout/index.js index 18dc96b92..b0888b538 100644 --- a/src/asLayout/index.js +++ b/src/asLayout/index.js @@ -7,8 +7,10 @@ import type { LayoutProps, } from '../types' import getStyles from './layout.styles' -import asCore from '../core/asCore' +import { getCoreStyles, sharedResolutionProperties } from '../core' import { getValues } from '../utils/index' +import withResolution from '../withResolution' +import { ConfigContextPropTypes } from '../configProvider' const resolutionProperties = ['fixed', 'height', 'overflow'] @@ -26,6 +28,11 @@ export default function asLayout( }: OneResolutionLayout, context: ConfigProviderContext ) { + console.log(context) + const { styles: coreStyles, props: restProps } = getCoreStyles( + props, + context + ) const styles = getStyles(getValues(context, props)) const classes = compact([ className, @@ -35,7 +42,20 @@ export default function asLayout( styles.layout, ]) - return + return ( + + ) } - return asCore(Layout, resolutionProperties) + + Layout.contextTypes = ConfigContextPropTypes + + return withResolution( + Layout, + sharedResolutionProperties.concat(resolutionProperties) + ) } diff --git a/src/core/asCore.js b/src/core/asCore.js index 38491e0be..ced3a267a 100644 --- a/src/core/asCore.js +++ b/src/core/asCore.js @@ -40,25 +40,26 @@ export default function asCore( }: OneResolution, context: ConfigProviderContext ) { - const cssStyle = { - ...style, - ...combineSpacing({ - spacingProps: { - margin, - padding, - marginTop, - marginRight, - marginBottom, - marginLeft, - paddingTop, - paddingRight, - paddingBottom, - paddingLeft, - }, - base: getValue(context, 'base', base), - spacingAliases: getValue(context, 'spacingAliases'), - }), - } + const spacing = combineSpacing({ + spacingProps: { + margin, + padding, + marginTop, + marginRight, + marginBottom, + marginLeft, + paddingTop, + paddingRight, + paddingBottom, + paddingLeft, + }, + base: getValue(context, 'base', base), + spacingAliases: getValue(context, 'spacingAliases'), + }) + console.log(style) + const cssStyle = Array.isArray(style) + ? style.concat(spacing) + : { ...style, ...spacing } return } diff --git a/src/core/index.js b/src/core/index.js new file mode 100644 index 000000000..c5801fd33 --- /dev/null +++ b/src/core/index.js @@ -0,0 +1,58 @@ +// @flow +import { combineSpacing, getValue } from '../utils' +import type { ConfigProviderContext, OneResolution } from '../types' + +export const sharedResolutionProperties = [ + 'margin', + 'marginBottom', + 'marginLeft', + 'marginRight', + 'marginTop', + 'padding', + 'paddingBottom', + 'paddingLeft', + 'paddingRight', + 'paddingTop', +] + +export function getCoreStyles( + props: $Shape, + context: ConfigProviderContext +) { + const { + base, + margin, + marginBottom, + marginLeft, + marginRight, + marginTop, + padding, + paddingBottom, + paddingLeft, + paddingRight, + paddingTop, + style, + ...restProps + } = props + + const spacing = combineSpacing({ + spacingProps: { + margin, + padding, + marginTop, + marginRight, + marginBottom, + marginLeft, + paddingTop, + paddingRight, + paddingBottom, + paddingLeft, + }, + base: getValue(context, 'base', base), + spacingAliases: getValue(context, 'spacingAliases'), + }) + + const styles = { ...style, ...spacing } + + return { styles, props: restProps } +} diff --git a/test/__snapshots__/storyshots.spec.js.snap b/test/__snapshots__/storyshots.spec.js.snap index e0b938bcc..f1402f1b2 100644 --- a/test/__snapshots__/storyshots.spec.js.snap +++ b/test/__snapshots__/storyshots.spec.js.snap @@ -7815,8 +7815,8 @@ exports[`Storyshots Config Provider Columns 1`] = ` }}) cxs({ - flexBasis: 8.333333333333332%; - maxWidth: 8.333333333333332% + flexBasis: 10%; + maxWidth: 10% }}) " style={ @@ -7878,8 +7878,8 @@ exports[`Storyshots Config Provider Columns 1`] = ` }}) cxs({ - flexBasis: 8.333333333333332%; - maxWidth: 8.333333333333332% + flexBasis: 10%; + maxWidth: 10% }}) " style={ @@ -7941,8 +7941,8 @@ exports[`Storyshots Config Provider Columns 1`] = ` }}) cxs({ - flexBasis: 8.333333333333332%; - maxWidth: 8.333333333333332% + flexBasis: 10%; + maxWidth: 10% }}) " style={ @@ -8004,8 +8004,8 @@ exports[`Storyshots Config Provider Columns 1`] = ` }}) cxs({ - flexBasis: 8.333333333333332%; - maxWidth: 8.333333333333332% + flexBasis: 10%; + maxWidth: 10% }}) " style={ @@ -8067,8 +8067,8 @@ exports[`Storyshots Config Provider Columns 1`] = ` }}) cxs({ - flexBasis: 8.333333333333332%; - maxWidth: 8.333333333333332% + flexBasis: 10%; + maxWidth: 10% }}) " style={ @@ -8130,8 +8130,8 @@ exports[`Storyshots Config Provider Columns 1`] = ` }}) cxs({ - flexBasis: 8.333333333333332%; - maxWidth: 8.333333333333332% + flexBasis: 10%; + maxWidth: 10% }}) " style={ @@ -8193,8 +8193,8 @@ exports[`Storyshots Config Provider Columns 1`] = ` }}) cxs({ - flexBasis: 8.333333333333332%; - maxWidth: 8.333333333333332% + flexBasis: 10%; + maxWidth: 10% }}) " style={ @@ -8256,8 +8256,8 @@ exports[`Storyshots Config Provider Columns 1`] = ` }}) cxs({ - flexBasis: 8.333333333333332%; - maxWidth: 8.333333333333332% + flexBasis: 10%; + maxWidth: 10% }}) " style={ @@ -8319,8 +8319,8 @@ exports[`Storyshots Config Provider Columns 1`] = ` }}) cxs({ - flexBasis: 8.333333333333332%; - maxWidth: 8.333333333333332% + flexBasis: 10%; + maxWidth: 10% }}) " style={ @@ -8382,8 +8382,8 @@ exports[`Storyshots Config Provider Columns 1`] = ` }}) cxs({ - flexBasis: 8.333333333333332%; - maxWidth: 8.333333333333332% + flexBasis: 10%; + maxWidth: 10% }}) " style={ @@ -8445,8 +8445,8 @@ exports[`Storyshots Config Provider Columns 1`] = ` }}) cxs({ - flexBasis: 8.333333333333332%; - maxWidth: 8.333333333333332% + flexBasis: 10%; + maxWidth: 10% }}) " style={ @@ -8508,8 +8508,8 @@ exports[`Storyshots Config Provider Columns 1`] = ` }}) cxs({ - flexBasis: 8.333333333333332%; - maxWidth: 8.333333333333332% + flexBasis: 10%; + maxWidth: 10% }}) " style={ @@ -8571,8 +8571,8 @@ exports[`Storyshots Config Provider Columns 1`] = ` }}) cxs({ - flexBasis: 8.333333333333332%; - maxWidth: 8.333333333333332% + flexBasis: 10%; + maxWidth: 10% }}) " style={ @@ -8634,8 +8634,8 @@ exports[`Storyshots Config Provider Columns 1`] = ` }}) cxs({ - flexBasis: 8.333333333333332%; - maxWidth: 8.333333333333332% + flexBasis: 10%; + maxWidth: 10% }}) " style={ @@ -8697,8 +8697,8 @@ exports[`Storyshots Config Provider Columns 1`] = ` }}) cxs({ - flexBasis: 8.333333333333332%; - maxWidth: 8.333333333333332% + flexBasis: 10%; + maxWidth: 10% }}) " style={ @@ -8760,8 +8760,8 @@ exports[`Storyshots Config Provider Columns 1`] = ` }}) cxs({ - flexBasis: 8.333333333333332%; - maxWidth: 8.333333333333332% + flexBasis: 10%; + maxWidth: 10% }}) " style={ @@ -8823,8 +8823,8 @@ exports[`Storyshots Config Provider Columns 1`] = ` }}) cxs({ - flexBasis: 8.333333333333332%; - maxWidth: 8.333333333333332% + flexBasis: 10%; + maxWidth: 10% }}) " style={ @@ -8886,8 +8886,8 @@ exports[`Storyshots Config Provider Columns 1`] = ` }}) cxs({ - flexBasis: 8.333333333333332%; - maxWidth: 8.333333333333332% + flexBasis: 10%; + maxWidth: 10% }}) " style={ @@ -8949,8 +8949,8 @@ exports[`Storyshots Config Provider Columns 1`] = ` }}) cxs({ - flexBasis: 8.333333333333332%; - maxWidth: 8.333333333333332% + flexBasis: 10%; + maxWidth: 10% }}) " style={ @@ -9012,8 +9012,8 @@ exports[`Storyshots Config Provider Columns 1`] = ` }}) cxs({ - flexBasis: 8.333333333333332%; - maxWidth: 8.333333333333332% + flexBasis: 10%; + maxWidth: 10% }}) " style={ @@ -9621,7 +9621,7 @@ exports[`Storyshots Config Provider Page Width 1`] = ` xnr_layout cxs({ > :not(.xnr_layout): { - maxWidth: 1224px + maxWidth: 800px }; alignItems: center; alignSelf: flex-start; @@ -9629,7 +9629,7 @@ exports[`Storyshots Config Provider Page Width 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 320px; + minWidth: 40px; padding: 0; width: 100% }}) From d6989239837c756ec1801f7277b747eca54737f0 Mon Sep 17 00:00:00 2001 From: Andrew Hansen Date: Sun, 25 Feb 2018 21:32:25 -0800 Subject: [PATCH 2/6] clean up --- src/asLayout/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/asLayout/index.js b/src/asLayout/index.js index b0888b538..721cc970e 100644 --- a/src/asLayout/index.js +++ b/src/asLayout/index.js @@ -28,7 +28,6 @@ export default function asLayout( }: OneResolutionLayout, context: ConfigProviderContext ) { - console.log(context) const { styles: coreStyles, props: restProps } = getCoreStyles( props, context From fcf0e8041cbca748cdb3400404ecbe244a6c4d51 Mon Sep 17 00:00:00 2001 From: Andrew Hansen Date: Sun, 25 Feb 2018 21:49:08 -0800 Subject: [PATCH 3/6] update tests --- src/core/__snapshots__/core.spec.js.snap | 19 +++++++ src/core/asCore.js | 72 ------------------------ src/core/core.spec.js | 40 ++++--------- 3 files changed, 30 insertions(+), 101 deletions(-) create mode 100644 src/core/__snapshots__/core.spec.js.snap delete mode 100644 src/core/asCore.js diff --git a/src/core/__snapshots__/core.spec.js.snap b/src/core/__snapshots__/core.spec.js.snap new file mode 100644 index 000000000..c6ffe56c8 --- /dev/null +++ b/src/core/__snapshots__/core.spec.js.snap @@ -0,0 +1,19 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`getCoreStyles should allow overriding base 1`] = ` +Object { + "borderBottomWidth": 20, + "borderLeftWidth": 20, + "borderRightWidth": 20, + "borderTopWidth": 20, +} +`; + +exports[`getCoreStyles should return styles 1`] = ` +Object { + "borderBottomWidth": 16, + "borderLeftWidth": 16, + "borderRightWidth": 16, + "borderTopWidth": 16, +} +`; diff --git a/src/core/asCore.js b/src/core/asCore.js deleted file mode 100644 index ced3a267a..000000000 --- a/src/core/asCore.js +++ /dev/null @@ -1,72 +0,0 @@ -// @flow -import * as React from 'react' -import type { ConfigProviderContext, OneResolution } from '../types' -import withResolution from '../withResolution' -import { combineSpacing, getValue } from '../utils' -import { ConfigContextPropTypes } from '../configProvider' - -const sharedResolutionProperties = [ - 'margin', - 'marginBottom', - 'marginLeft', - 'marginRight', - 'marginTop', - 'padding', - 'paddingBottom', - 'paddingLeft', - 'paddingRight', - 'paddingTop', -] - -export default function asCore( - Component: React.ComponentType<*> | string, - resolutionProperties: Array -) { - function Core( - { - base, - margin, - marginBottom, - marginLeft, - marginRight, - marginTop, - padding, - paddingBottom, - paddingLeft, - paddingRight, - paddingTop, - style = {}, - ...props - }: OneResolution, - context: ConfigProviderContext - ) { - const spacing = combineSpacing({ - spacingProps: { - margin, - padding, - marginTop, - marginRight, - marginBottom, - marginLeft, - paddingTop, - paddingRight, - paddingBottom, - paddingLeft, - }, - base: getValue(context, 'base', base), - spacingAliases: getValue(context, 'spacingAliases'), - }) - console.log(style) - const cssStyle = Array.isArray(style) - ? style.concat(spacing) - : { ...style, ...spacing } - - return - } - - Core.contextTypes = ConfigContextPropTypes - return withResolution( - Core, - sharedResolutionProperties.concat(resolutionProperties) - ) -} diff --git a/src/core/core.spec.js b/src/core/core.spec.js index 10fbbb469..c409f7bc7 100644 --- a/src/core/core.spec.js +++ b/src/core/core.spec.js @@ -1,40 +1,22 @@ -import React from 'react' -import { mount } from 'enzyme' -import asCore from './asCore' +import { getCoreStyles } from './index' import defaults from '../defaults' -describe('asCore', () => { - let wrapper +describe('getCoreStyles', () => { + it('should return styles', () => { + const { styles } = getCoreStyles({ margin: 2 }, defaults) - it('should allow wrapping any element into a Core', () => { - const Span = asCore(() => ) - wrapper = mount() - - expect(wrapper.html().includes('span')).toBe(true) + expect(styles).toMatchSnapshot() }) - it('should allow overriding base', () => { - const Grid = asCore('div') - - wrapper = mount() + it('should return remaining props', () => { + const { props } = getCoreStyles({ margin: 2, foo: 'bar' }, defaults) - expect(wrapper.html()).toContain('padding-top: 2px') + expect(props).toEqual({ foo: 'bar' }) }) - it('should use default base when no config or no base parameters are provided', () => { - const Grid = asCore('div') - const padding = 1 - - wrapper = mount() - - expect(wrapper.html()).toContain( - `padding-top: ${defaults.base * padding}px` - ) - }) + it('should allow overriding base', () => { + const { styles } = getCoreStyles({ margin: 2, base: 10 }, defaults) - afterEach(() => { - if (wrapper) { - wrapper.unmount() - } + expect(styles).toMatchSnapshot() }) }) From 6d152cbf916faf1f42a225d48ede3db562642f9c Mon Sep 17 00:00:00 2001 From: Andrew Hansen Date: Sun, 25 Feb 2018 22:19:24 -0800 Subject: [PATCH 4/6] update context --- src/asGrid/index.js | 3 - src/asLayout/index.js | 3 - test/__snapshots__/storyshots.spec.js.snap | 116 ++++++++++----------- 3 files changed, 58 insertions(+), 64 deletions(-) diff --git a/src/asGrid/index.js b/src/asGrid/index.js index 5d6e01b7e..eafda539a 100644 --- a/src/asGrid/index.js +++ b/src/asGrid/index.js @@ -10,7 +10,6 @@ import { styles, getCol } from './grid.styles' import { getValue } from '../utils' import { sharedResolutionProperties, getCoreStyles } from '../core' import withResolution from '../withResolution' -import { ConfigContextPropTypes } from '../configProvider' const resolutionProperties = ['align', 'justify', 'size'] @@ -43,8 +42,6 @@ export default function asGrid( ) } - Grid.contextTypes = ConfigContextPropTypes - return withResolution( Grid, sharedResolutionProperties.concat(resolutionProperties) diff --git a/src/asLayout/index.js b/src/asLayout/index.js index 721cc970e..ddad54539 100644 --- a/src/asLayout/index.js +++ b/src/asLayout/index.js @@ -10,7 +10,6 @@ import getStyles from './layout.styles' import { getCoreStyles, sharedResolutionProperties } from '../core' import { getValues } from '../utils/index' import withResolution from '../withResolution' -import { ConfigContextPropTypes } from '../configProvider' const resolutionProperties = ['fixed', 'height', 'overflow'] @@ -51,8 +50,6 @@ export default function asLayout( ) } - Layout.contextTypes = ConfigContextPropTypes - return withResolution( Layout, sharedResolutionProperties.concat(resolutionProperties) diff --git a/test/__snapshots__/storyshots.spec.js.snap b/test/__snapshots__/storyshots.spec.js.snap index f1402f1b2..3a767fd0c 100644 --- a/test/__snapshots__/storyshots.spec.js.snap +++ b/test/__snapshots__/storyshots.spec.js.snap @@ -7815,8 +7815,8 @@ exports[`Storyshots Config Provider Columns 1`] = ` }}) cxs({ - flexBasis: 10%; - maxWidth: 10% + flexBasis: 8.333333333333332%; + maxWidth: 8.333333333333332% }}) " style={ @@ -7878,8 +7878,8 @@ exports[`Storyshots Config Provider Columns 1`] = ` }}) cxs({ - flexBasis: 10%; - maxWidth: 10% + flexBasis: 8.333333333333332%; + maxWidth: 8.333333333333332% }}) " style={ @@ -7941,8 +7941,8 @@ exports[`Storyshots Config Provider Columns 1`] = ` }}) cxs({ - flexBasis: 10%; - maxWidth: 10% + flexBasis: 8.333333333333332%; + maxWidth: 8.333333333333332% }}) " style={ @@ -8004,8 +8004,8 @@ exports[`Storyshots Config Provider Columns 1`] = ` }}) cxs({ - flexBasis: 10%; - maxWidth: 10% + flexBasis: 8.333333333333332%; + maxWidth: 8.333333333333332% }}) " style={ @@ -8067,8 +8067,8 @@ exports[`Storyshots Config Provider Columns 1`] = ` }}) cxs({ - flexBasis: 10%; - maxWidth: 10% + flexBasis: 8.333333333333332%; + maxWidth: 8.333333333333332% }}) " style={ @@ -8130,8 +8130,8 @@ exports[`Storyshots Config Provider Columns 1`] = ` }}) cxs({ - flexBasis: 10%; - maxWidth: 10% + flexBasis: 8.333333333333332%; + maxWidth: 8.333333333333332% }}) " style={ @@ -8193,8 +8193,8 @@ exports[`Storyshots Config Provider Columns 1`] = ` }}) cxs({ - flexBasis: 10%; - maxWidth: 10% + flexBasis: 8.333333333333332%; + maxWidth: 8.333333333333332% }}) " style={ @@ -8256,8 +8256,8 @@ exports[`Storyshots Config Provider Columns 1`] = ` }}) cxs({ - flexBasis: 10%; - maxWidth: 10% + flexBasis: 8.333333333333332%; + maxWidth: 8.333333333333332% }}) " style={ @@ -8319,8 +8319,8 @@ exports[`Storyshots Config Provider Columns 1`] = ` }}) cxs({ - flexBasis: 10%; - maxWidth: 10% + flexBasis: 8.333333333333332%; + maxWidth: 8.333333333333332% }}) " style={ @@ -8382,8 +8382,8 @@ exports[`Storyshots Config Provider Columns 1`] = ` }}) cxs({ - flexBasis: 10%; - maxWidth: 10% + flexBasis: 8.333333333333332%; + maxWidth: 8.333333333333332% }}) " style={ @@ -8445,8 +8445,8 @@ exports[`Storyshots Config Provider Columns 1`] = ` }}) cxs({ - flexBasis: 10%; - maxWidth: 10% + flexBasis: 8.333333333333332%; + maxWidth: 8.333333333333332% }}) " style={ @@ -8508,8 +8508,8 @@ exports[`Storyshots Config Provider Columns 1`] = ` }}) cxs({ - flexBasis: 10%; - maxWidth: 10% + flexBasis: 8.333333333333332%; + maxWidth: 8.333333333333332% }}) " style={ @@ -8571,8 +8571,8 @@ exports[`Storyshots Config Provider Columns 1`] = ` }}) cxs({ - flexBasis: 10%; - maxWidth: 10% + flexBasis: 8.333333333333332%; + maxWidth: 8.333333333333332% }}) " style={ @@ -8634,8 +8634,8 @@ exports[`Storyshots Config Provider Columns 1`] = ` }}) cxs({ - flexBasis: 10%; - maxWidth: 10% + flexBasis: 8.333333333333332%; + maxWidth: 8.333333333333332% }}) " style={ @@ -8697,8 +8697,8 @@ exports[`Storyshots Config Provider Columns 1`] = ` }}) cxs({ - flexBasis: 10%; - maxWidth: 10% + flexBasis: 8.333333333333332%; + maxWidth: 8.333333333333332% }}) " style={ @@ -8760,8 +8760,8 @@ exports[`Storyshots Config Provider Columns 1`] = ` }}) cxs({ - flexBasis: 10%; - maxWidth: 10% + flexBasis: 8.333333333333332%; + maxWidth: 8.333333333333332% }}) " style={ @@ -8823,8 +8823,8 @@ exports[`Storyshots Config Provider Columns 1`] = ` }}) cxs({ - flexBasis: 10%; - maxWidth: 10% + flexBasis: 8.333333333333332%; + maxWidth: 8.333333333333332% }}) " style={ @@ -8886,8 +8886,8 @@ exports[`Storyshots Config Provider Columns 1`] = ` }}) cxs({ - flexBasis: 10%; - maxWidth: 10% + flexBasis: 8.333333333333332%; + maxWidth: 8.333333333333332% }}) " style={ @@ -8949,8 +8949,8 @@ exports[`Storyshots Config Provider Columns 1`] = ` }}) cxs({ - flexBasis: 10%; - maxWidth: 10% + flexBasis: 8.333333333333332%; + maxWidth: 8.333333333333332% }}) " style={ @@ -9012,8 +9012,8 @@ exports[`Storyshots Config Provider Columns 1`] = ` }}) cxs({ - flexBasis: 10%; - maxWidth: 10% + flexBasis: 8.333333333333332%; + maxWidth: 8.333333333333332% }}) " style={ @@ -9621,7 +9621,7 @@ exports[`Storyshots Config Provider Page Width 1`] = ` xnr_layout cxs({ > :not(.xnr_layout): { - maxWidth: 800px + maxWidth: 1224px }; alignItems: center; alignSelf: flex-start; @@ -9629,7 +9629,7 @@ exports[`Storyshots Config Provider Page Width 1`] = ` boxSizing: border-box; display: flex; flexFlow: column; - minWidth: 40px; + minWidth: 320px; padding: 0; width: 100% }}) @@ -9770,10 +9770,10 @@ exports[`Storyshots Config Provider Spacing Aliases 1`] = ` style={ Object { "backgroundColor": "#1d1f21", - "borderBottomWidth": 72, - "borderLeftWidth": 72, - "borderRightWidth": 72, - "borderTopWidth": 72, + "borderBottomWidth": 24, + "borderLeftWidth": 24, + "borderRightWidth": 24, + "borderTopWidth": 24, "color": "#ffd700", } } @@ -9821,10 +9821,10 @@ exports[`Storyshots Config Provider Spacing Aliases 1`] = ` Object { "backgroundColor": "#efefef", "color": "#1469cc", - "paddingBottom": 36, - "paddingLeft": 72, - "paddingRight": 72, - "paddingTop": 36, + "paddingBottom": 12, + "paddingLeft": 24, + "paddingRight": 24, + "paddingTop": 12, } } > @@ -9870,10 +9870,10 @@ exports[`Storyshots Config Provider Spacing Aliases 1`] = ` style={ Object { "backgroundColor": "#efefef", - "borderBottomWidth": 48, - "borderLeftWidth": 12, - "borderRightWidth": 12, - "borderTopWidth": 48, + "borderBottomWidth": 16, + "borderLeftWidth": 4, + "borderRightWidth": 4, + "borderTopWidth": 16, "color": "#1469cc", } } @@ -9921,10 +9921,10 @@ exports[`Storyshots Config Provider Spacing Aliases 1`] = ` Object { "backgroundColor": "#1d1f21", "color": "#ffd700", - "paddingBottom": 48, - "paddingLeft": 12, - "paddingRight": 12, - "paddingTop": 48, + "paddingBottom": 16, + "paddingLeft": 4, + "paddingRight": 4, + "paddingTop": 16, } } > From e3f718255688f56d0f4d1754473cb2ba0c60436e Mon Sep 17 00:00:00 2001 From: Andrew Hansen Date: Sat, 3 Mar 2018 15:37:51 -0800 Subject: [PATCH 5/6] simplify API --- src/asGrid/index.js | 23 ++++++++++------------- src/asLayout/index.js | 18 ++++-------------- src/core/__snapshots__/core.spec.js.snap | 9 +++++++++ src/core/core.spec.js | 17 ++++++++++------- src/core/index.js | 4 ++-- 5 files changed, 35 insertions(+), 36 deletions(-) diff --git a/src/asGrid/index.js b/src/asGrid/index.js index eafda539a..a0b73b53d 100644 --- a/src/asGrid/index.js +++ b/src/asGrid/index.js @@ -17,13 +17,17 @@ export default function asGrid( Component: React.ComponentType<*> | string ): React.ComponentType { function Grid( - { align, className, justify, size, innerRef, ...props }: OneResolutionGrid, + { + align, + className, + justify, + size, + innerRef, + ...restProps + }: OneResolutionGrid, context: ConfigProviderContext ) { - const { styles: coreStyles, props: restProps } = getCoreStyles( - props, - context - ) + const props = getCoreStyles(restProps, context) const classes = compact([ styles.grid, getCol(size, getValue(context, 'columns')), @@ -32,14 +36,7 @@ export default function asGrid( justify && styles[`${justify}Justify`], ]) - return ( - - ) + return } return withResolution( diff --git a/src/asLayout/index.js b/src/asLayout/index.js index ddad54539..851384a65 100644 --- a/src/asLayout/index.js +++ b/src/asLayout/index.js @@ -23,15 +23,12 @@ export default function asLayout( height, overflow, innerRef, - ...props + ...restProps }: OneResolutionLayout, context: ConfigProviderContext ) { - const { styles: coreStyles, props: restProps } = getCoreStyles( - props, - context - ) - const styles = getStyles(getValues(context, props)) + const props = getCoreStyles(restProps, context) + const styles = getStyles(getValues(context, restProps)) const classes = compact([ className, fixed && styles[`${fixed}Fixed`], @@ -40,14 +37,7 @@ export default function asLayout( styles.layout, ]) - return ( - - ) + return } return withResolution( diff --git a/src/core/__snapshots__/core.spec.js.snap b/src/core/__snapshots__/core.spec.js.snap index c6ffe56c8..fffa75588 100644 --- a/src/core/__snapshots__/core.spec.js.snap +++ b/src/core/__snapshots__/core.spec.js.snap @@ -9,6 +9,15 @@ Object { } `; +exports[`getCoreStyles should return remaining props 1`] = ` +Object { + "borderBottomWidth": 16, + "borderLeftWidth": 16, + "borderRightWidth": 16, + "borderTopWidth": 16, +} +`; + exports[`getCoreStyles should return styles 1`] = ` Object { "borderBottomWidth": 16, diff --git a/src/core/core.spec.js b/src/core/core.spec.js index c409f7bc7..eba1988cf 100644 --- a/src/core/core.spec.js +++ b/src/core/core.spec.js @@ -3,20 +3,23 @@ import defaults from '../defaults' describe('getCoreStyles', () => { it('should return styles', () => { - const { styles } = getCoreStyles({ margin: 2 }, defaults) + const { style } = getCoreStyles({ margin: 2 }, defaults) - expect(styles).toMatchSnapshot() + expect(style).toMatchSnapshot() }) it('should return remaining props', () => { - const { props } = getCoreStyles({ margin: 2, foo: 'bar' }, defaults) - - expect(props).toEqual({ foo: 'bar' }) + const { style, ...rest } = getCoreStyles( + { margin: 2, foo: 'bar' }, + defaults + ) + expect(style).toMatchSnapshot() + expect(rest).toEqual({ foo: 'bar' }) }) it('should allow overriding base', () => { - const { styles } = getCoreStyles({ margin: 2, base: 10 }, defaults) + const { style } = getCoreStyles({ margin: 2, base: 10 }, defaults) - expect(styles).toMatchSnapshot() + expect(style).toMatchSnapshot() }) }) diff --git a/src/core/index.js b/src/core/index.js index c5801fd33..f55941d8d 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -52,7 +52,7 @@ export function getCoreStyles( spacingAliases: getValue(context, 'spacingAliases'), }) - const styles = { ...style, ...spacing } + const spacingStyles = { ...style, ...spacing } - return { styles, props: restProps } + return { ...restProps, style: spacingStyles } } From e43432f701a8a24d7eb8a42657ba1f3a11ba5cd4 Mon Sep 17 00:00:00 2001 From: Andrew Hansen Date: Mon, 12 Mar 2018 22:50:56 -0700 Subject: [PATCH 6/6] update to default export --- src/asGrid/index.js | 7 ++----- src/asLayout/index.js | 7 ++----- src/core/core.spec.js | 2 +- src/core/index.js | 15 +-------------- src/withResolution/index.js | 9 +++++++-- src/withResolution/withResolution.logic.js | 17 +++++++++++++++-- 6 files changed, 28 insertions(+), 29 deletions(-) diff --git a/src/asGrid/index.js b/src/asGrid/index.js index a0b73b53d..c080b260f 100644 --- a/src/asGrid/index.js +++ b/src/asGrid/index.js @@ -8,7 +8,7 @@ import type { } from '../types' import { styles, getCol } from './grid.styles' import { getValue } from '../utils' -import { sharedResolutionProperties, getCoreStyles } from '../core' +import getCoreStyles from '../core' import withResolution from '../withResolution' const resolutionProperties = ['align', 'justify', 'size'] @@ -39,8 +39,5 @@ export default function asGrid( return } - return withResolution( - Grid, - sharedResolutionProperties.concat(resolutionProperties) - ) + return withResolution(Grid, resolutionProperties) } diff --git a/src/asLayout/index.js b/src/asLayout/index.js index 851384a65..0a3af46b8 100644 --- a/src/asLayout/index.js +++ b/src/asLayout/index.js @@ -7,7 +7,7 @@ import type { LayoutProps, } from '../types' import getStyles from './layout.styles' -import { getCoreStyles, sharedResolutionProperties } from '../core' +import getCoreStyles from '../core' import { getValues } from '../utils/index' import withResolution from '../withResolution' @@ -40,8 +40,5 @@ export default function asLayout( return } - return withResolution( - Layout, - sharedResolutionProperties.concat(resolutionProperties) - ) + return withResolution(Layout, resolutionProperties) } diff --git a/src/core/core.spec.js b/src/core/core.spec.js index eba1988cf..b667e4297 100644 --- a/src/core/core.spec.js +++ b/src/core/core.spec.js @@ -1,4 +1,4 @@ -import { getCoreStyles } from './index' +import getCoreStyles from './index' import defaults from '../defaults' describe('getCoreStyles', () => { diff --git a/src/core/index.js b/src/core/index.js index f55941d8d..46e0e1a9d 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -2,20 +2,7 @@ import { combineSpacing, getValue } from '../utils' import type { ConfigProviderContext, OneResolution } from '../types' -export const sharedResolutionProperties = [ - 'margin', - 'marginBottom', - 'marginLeft', - 'marginRight', - 'marginTop', - 'padding', - 'paddingBottom', - 'paddingLeft', - 'paddingRight', - 'paddingTop', -] - -export function getCoreStyles( +export default function getCoreStyles( props: $Shape, context: ConfigProviderContext ) { diff --git a/src/withResolution/index.js b/src/withResolution/index.js index f2dbfff3e..a948348bc 100644 --- a/src/withResolution/index.js +++ b/src/withResolution/index.js @@ -13,6 +13,7 @@ import { hasTrueValues, isObject, type ShouldShow, + sharedResolutionProperties, } from './withResolution.logic' type Props = { show?: DisplayValues } @@ -25,6 +26,10 @@ export default function withResolution( resolutionKeys: Array, coercedSupport?: boolean = supportsMatchMedia ) { + const combinedResolutionKeys = sharedResolutionProperties.concat( + resolutionKeys + ) + if (!coercedSupport) { log.warn(errors.NOMATCHMEDIA) return Component @@ -84,7 +89,7 @@ export default function withResolution( } anyPropsUseResolutionFormat = () => - resolutionKeys.some(key => isObject(this.props[key])) + combinedResolutionKeys.some(key => isObject(this.props[key])) removeMediaQueryListener = (show?: DisplayValues) => { const queries = this.getQueries(show) @@ -114,7 +119,7 @@ export default function withResolution( const props = getSingleResolutionProps({ props: this.props, shouldShow: this.state.shouldShow, - resolutionKeys, + resolutionKeys: combinedResolutionKeys, fallbackDisplayKey: getValue(this.context, 'fallbackDisplayKey'), }) diff --git a/src/withResolution/withResolution.logic.js b/src/withResolution/withResolution.logic.js index 575adb6f8..8a059aaab 100644 --- a/src/withResolution/withResolution.logic.js +++ b/src/withResolution/withResolution.logic.js @@ -1,8 +1,21 @@ // @flow -import type { DisplayValues, DisplayAliases } from '../types' +import type { DisplayAliases } from '../types' import { splitPattern, kebabCase } from '../utils' import defaults from '../defaults' +export const sharedResolutionProperties = [ + 'margin', + 'marginBottom', + 'marginLeft', + 'marginRight', + 'marginTop', + 'padding', + 'paddingBottom', + 'paddingLeft', + 'paddingRight', + 'paddingTop', +] + export type ShouldShow = { [string]: boolean } function isTrue(obj) { @@ -37,7 +50,7 @@ export function getSingleResolutionProps({ resolutionKeys = [], fallbackDisplayKey = defaults.fallbackDisplayKey, }: {| - +props: { show?: DisplayValues }, + +props: *, +shouldShow?: ShouldShow, +resolutionKeys: Array, +fallbackDisplayKey: string,