From d6a9bf69bf8fd1f6ae6d8aa38cca519a7cdd9175 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Ro=C5=BCek?= Date: Tue, 27 Nov 2018 22:16:41 +0100 Subject: [PATCH 1/6] refactor: use absolute imports --- src/ThemeSection.tsx | 3 ++- src/__stories__/BlockQuote.tsx | 2 +- src/__stories__/Box.tsx | 2 +- src/__stories__/Break.tsx | 2 +- src/__stories__/Button.tsx | 2 +- src/__stories__/Flex.tsx | 2 +- src/__stories__/Heading.tsx | 2 +- src/__stories__/Icon.tsx | 4 +++- src/__stories__/Input.tsx | 2 +- src/__stories__/Link.tsx | 2 +- src/__stories__/List.tsx | 2 +- src/__stories__/Mark.tsx | 2 +- src/__stories__/Menu.tsx | 2 +- src/__stories__/Popup.tsx | 2 +- src/__stories__/Text.tsx | 2 +- src/__stories__/Textarea.tsx | 2 +- src/{__tests__ => }/hooks/__tests__/useWindowResize.spec.tsx | 2 +- src/storybook-addon/withThemes.tsx | 2 +- src/utils/rules.ts | 3 ++- 19 files changed, 23 insertions(+), 19 deletions(-) rename src/{__tests__ => }/hooks/__tests__/useWindowResize.spec.tsx (96%) diff --git a/src/ThemeSection.tsx b/src/ThemeSection.tsx index 2e26a1fa..b457297b 100644 --- a/src/ThemeSection.tsx +++ b/src/ThemeSection.tsx @@ -1,4 +1,5 @@ -import { get, merge } from 'lodash'; +import get = require('lodash/get'); +import merge = require('lodash/merge'); import * as React from 'react'; import * as styledComponents from 'styled-components'; diff --git a/src/__stories__/BlockQuote.tsx b/src/__stories__/BlockQuote.tsx index 24fdfb23..aa3bd69d 100644 --- a/src/__stories__/BlockQuote.tsx +++ b/src/__stories__/BlockQuote.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import { boolean, text, withKnobs } from '@storybook/addon-knobs'; import { storiesOf } from '@storybook/react'; -import { omitBy } from 'lodash'; +import omitBy = require('lodash/omitBy'); import { BlockQuote } from '../BlockQuote'; export const blockQuoteKnobs = (tabName = 'Block Quote'): any => { diff --git a/src/__stories__/Box.tsx b/src/__stories__/Box.tsx index 7f023ba2..53ce8e82 100644 --- a/src/__stories__/Box.tsx +++ b/src/__stories__/Box.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import { withKnobs } from '@storybook/addon-knobs'; import { number, select, text } from '@storybook/addon-knobs/react'; import { storiesOf } from '@storybook/react'; -import { omitBy } from 'lodash'; +import omitBy = require('lodash/omitBy'); import { Box } from '../Box'; import { diff --git a/src/__stories__/Break.tsx b/src/__stories__/Break.tsx index 29e46f44..1033ae29 100644 --- a/src/__stories__/Break.tsx +++ b/src/__stories__/Break.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import { NumberOptions, withKnobs } from '@storybook/addon-knobs'; import { number } from '@storybook/addon-knobs/react'; import { storiesOf } from '@storybook/react'; -import { omitBy } from 'lodash'; +import omitBy = require('lodash/omitBy'); import { Break } from '../Break'; diff --git a/src/__stories__/Button.tsx b/src/__stories__/Button.tsx index 5c43d114..b225b5fa 100644 --- a/src/__stories__/Button.tsx +++ b/src/__stories__/Button.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import { withKnobs } from '@storybook/addon-knobs'; import { boolean } from '@storybook/addon-knobs/react'; import { storiesOf } from '@storybook/react'; -import { omitBy } from 'lodash'; +import omitBy = require('lodash/omitBy'); import { Button } from '../Button'; import { boxKnobs } from './Box'; diff --git a/src/__stories__/Flex.tsx b/src/__stories__/Flex.tsx index e631f2a6..efa97ec8 100644 --- a/src/__stories__/Flex.tsx +++ b/src/__stories__/Flex.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import { withKnobs } from '@storybook/addon-knobs'; import { select } from '@storybook/addon-knobs/react'; import { storiesOf } from '@storybook/react'; -import { omitBy } from 'lodash'; +import omitBy = require('lodash/omitBy'); import { Box } from '../Box'; import { Flex } from '../Flex'; diff --git a/src/__stories__/Heading.tsx b/src/__stories__/Heading.tsx index 7f3501a0..b7f737b9 100644 --- a/src/__stories__/Heading.tsx +++ b/src/__stories__/Heading.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import { withKnobs } from '@storybook/addon-knobs'; import { select } from '@storybook/addon-knobs/react'; import { storiesOf } from '@storybook/react'; -import { omitBy } from 'lodash'; +import omitBy = require('lodash/omitBy'); import { Heading } from '../Heading'; import { boxKnobs } from './Box'; diff --git a/src/__stories__/Icon.tsx b/src/__stories__/Icon.tsx index 5784d86a..8c39149a 100644 --- a/src/__stories__/Icon.tsx +++ b/src/__stories__/Icon.tsx @@ -6,7 +6,9 @@ import * as _solidIcons from '@fortawesome/free-solid-svg-icons'; import { withKnobs } from '@storybook/addon-knobs'; import { boolean, select } from '@storybook/addon-knobs/react'; import { storiesOf } from '@storybook/react'; -import { map, omitBy, pick } from 'lodash'; +import map = require('lodash/map'); +import omitBy = require('lodash/omitBy'); +import pick = require('lodash/pick'); import { Icon, IconLibrary, IIcon } from '../Icon'; import { boxKnobs } from './Box'; diff --git a/src/__stories__/Input.tsx b/src/__stories__/Input.tsx index 0ac689c7..694e4106 100644 --- a/src/__stories__/Input.tsx +++ b/src/__stories__/Input.tsx @@ -5,7 +5,7 @@ import { StateDecorator, Store } from '@sambego/storybook-state'; import { withKnobs } from '@storybook/addon-knobs'; import { boolean, select, text } from '@storybook/addon-knobs/react'; import { storiesOf } from '@storybook/react'; -import { omitBy } from 'lodash'; +import omitBy = require('lodash/omitBy'); import { Input } from '../Input'; import { AutosizeInputType, InlineInputType } from './_utils'; diff --git a/src/__stories__/Link.tsx b/src/__stories__/Link.tsx index d833d894..3ce5f143 100644 --- a/src/__stories__/Link.tsx +++ b/src/__stories__/Link.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import { text, withKnobs } from '@storybook/addon-knobs'; import { storiesOf } from '@storybook/react'; -import { omitBy } from 'lodash'; +import omitBy = require('lodash/omitBy'); import { Link } from '../Link'; export const linkKnobs = (tabName = 'Link'): any => { diff --git a/src/__stories__/List.tsx b/src/__stories__/List.tsx index 4cffac24..e936e384 100644 --- a/src/__stories__/List.tsx +++ b/src/__stories__/List.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import { withKnobs } from '@storybook/addon-knobs'; import { select } from '@storybook/addon-knobs/react'; import { storiesOf } from '@storybook/react'; -import { omitBy } from 'lodash'; +import omitBy = require('lodash/omitBy'); import { List } from '../List'; import { ListStylePosition, ListStyleType } from './_utils'; diff --git a/src/__stories__/Mark.tsx b/src/__stories__/Mark.tsx index cc6d2d4a..eb93d76b 100644 --- a/src/__stories__/Mark.tsx +++ b/src/__stories__/Mark.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import { select, text, withKnobs } from '@storybook/addon-knobs'; import { storiesOf } from '@storybook/react'; -import { omitBy } from 'lodash'; +import omitBy = require('lodash/omitBy'); import { Mark } from '../Mark'; export const markKnobs = (tabName = 'Mark'): any => { diff --git a/src/__stories__/Menu.tsx b/src/__stories__/Menu.tsx index eb174a3d..bc4c20a0 100644 --- a/src/__stories__/Menu.tsx +++ b/src/__stories__/Menu.tsx @@ -1,4 +1,4 @@ -import { omitBy } from 'lodash'; +import omitBy = require('lodash/omitBy'); import * as React from 'react'; import { action } from '@storybook/addon-actions'; diff --git a/src/__stories__/Popup.tsx b/src/__stories__/Popup.tsx index 799c19cb..38327c4e 100644 --- a/src/__stories__/Popup.tsx +++ b/src/__stories__/Popup.tsx @@ -1,7 +1,7 @@ import { NumberOptions, withKnobs } from '@storybook/addon-knobs'; import { number, select, text } from '@storybook/addon-knobs/react'; import { storiesOf } from '@storybook/react'; -import { omitBy } from 'lodash'; +import omitBy = require('lodash/omitBy'); import * as React from 'react'; import { Box, Icon, Popup } from '..'; diff --git a/src/__stories__/Text.tsx b/src/__stories__/Text.tsx index 7064f610..2c118f8e 100644 --- a/src/__stories__/Text.tsx +++ b/src/__stories__/Text.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import { withKnobs } from '@storybook/addon-knobs'; import { boolean, select, text } from '@storybook/addon-knobs/react'; import { storiesOf } from '@storybook/react'; -import { omitBy } from 'lodash'; +import omitBy = require('lodash/omitBy'); import { Text } from '../Text'; import { Casing, Decoration, LetterSpacing, LineHeight } from './_utils'; diff --git a/src/__stories__/Textarea.tsx b/src/__stories__/Textarea.tsx index 74576684..7c2eca4d 100644 --- a/src/__stories__/Textarea.tsx +++ b/src/__stories__/Textarea.tsx @@ -5,7 +5,7 @@ import { StateDecorator, Store } from '@sambego/storybook-state'; import { withKnobs } from '@storybook/addon-knobs'; import { boolean, number } from '@storybook/addon-knobs/react'; import { storiesOf } from '@storybook/react'; -import { omitBy } from 'lodash'; +import omitBy = require('lodash/omitBy'); import { Textarea } from '../Textarea'; import { boxKnobs } from './Box'; diff --git a/src/__tests__/hooks/__tests__/useWindowResize.spec.tsx b/src/hooks/__tests__/useWindowResize.spec.tsx similarity index 96% rename from src/__tests__/hooks/__tests__/useWindowResize.spec.tsx rename to src/hooks/__tests__/useWindowResize.spec.tsx index c4e1181b..2aeb728c 100644 --- a/src/__tests__/hooks/__tests__/useWindowResize.spec.tsx +++ b/src/hooks/__tests__/useWindowResize.spec.tsx @@ -3,7 +3,7 @@ import 'jest-enzyme'; import debounce = require('lodash/debounce'); import * as React from 'react'; -import { useWindowResize } from '../../../hooks/useWindowResize'; +import { useWindowResize } from '../useWindowResize'; describe('useWindowResize hook', () => { let addEventListenerSpy: jest.SpyInstance; diff --git a/src/storybook-addon/withThemes.tsx b/src/storybook-addon/withThemes.tsx index d2d0f242..759f909d 100644 --- a/src/storybook-addon/withThemes.tsx +++ b/src/storybook-addon/withThemes.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; // @ts-ignore import addons, { makeDecorator } from '@storybook/addons'; -import { merge } from 'lodash'; +import merge = require('lodash/merge'); import { Flex } from '../Flex'; import { baseTheme } from '../theme'; diff --git a/src/utils/rules.ts b/src/utils/rules.ts index 9435f936..1f2b1c06 100644 --- a/src/utils/rules.ts +++ b/src/utils/rules.ts @@ -1,4 +1,5 @@ -import { get, merge } from 'lodash'; +import get = require('lodash/get'); +import merge = require('lodash/merge'); // @ts-ignore import { compose, is, num, px, style } from 'styled-system'; From 7c44359da9df672ddb27125bfa66e403baeb3d5a Mon Sep 17 00:00:00 2001 From: Chris Date: Tue, 27 Nov 2018 17:19:42 -0600 Subject: [PATCH 2/6] fix(box): add missing overflow prop --- src/Box.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/Box.tsx b/src/Box.tsx index 933a9340..045cb97f 100644 --- a/src/Box.tsx +++ b/src/Box.tsx @@ -19,6 +19,7 @@ import { minHeight, minWidth, opacity, + overflow, position, right, space, @@ -164,6 +165,7 @@ export const Box = styled('div')( minHeight, minWidth, opacity, + overflow, position, right, space, From 33da01610b6e79d0291de610432b9bd580f26d44 Mon Sep 17 00:00:00 2001 From: Nicholas Cassera Date: Tue, 27 Nov 2018 18:20:28 -0600 Subject: [PATCH 3/6] fix(spacing): spacing rule was not defaulting back to value (#33) --- src/utils/rules.ts | 25 +++++++++++-------------- 1 file changed, 11 insertions(+), 14 deletions(-) diff --git a/src/utils/rules.ts b/src/utils/rules.ts index 9435f936..498e5618 100644 --- a/src/utils/rules.ts +++ b/src/utils/rules.ts @@ -233,7 +233,7 @@ const getProperties = key => { }; // @ts-ignore FIXME -const getSpaceValue = scale => propVal => { +const getSpaceValue = (scale: any = {}) => propVal => { let val = propVal; let isNegative; @@ -244,7 +244,7 @@ const getSpaceValue = scale => propVal => { } // check the theme config for a value, or just use the prop - val = scale !== undefined ? scale[val] : val; + val = scale[val] || val; } // if was negative string/add the '-' back @@ -267,18 +267,15 @@ export const space = props => { const innerProperties = getProperties(key); // @ts-ignore FIXME - const innerStyle = n => - is(n) - ? innerProperties.reduce( - (a, prop) => ({ - ...a, - [prop]: getStyle(n), - }), - {} - ) - : null; - - return innerStyle(value); + if (!is(value)) return null; + + return innerProperties.reduce( + (a, prop) => ({ + ...a, + [prop]: getStyle(value), + }), + {} + ); }) .reduce(merge, {}); }; From 40ffd9b228284258f18e0aa28071bd283237e741 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Ro=C5=BCek?= Date: Wed, 28 Nov 2018 15:22:27 +0100 Subject: [PATCH 4/6] refactor: make Image more flexible --- src/Image.tsx | 66 +++++++++++++-------------------------- src/__stories__/Image.tsx | 14 ++++----- 2 files changed, 28 insertions(+), 52 deletions(-) diff --git a/src/Image.tsx b/src/Image.tsx index ba731478..1597099a 100644 --- a/src/Image.tsx +++ b/src/Image.tsx @@ -1,55 +1,31 @@ -import * as React from 'react'; +import { styled } from './utils'; -import { borderRadius, height, opacity, styled, width } from './utils'; +import { Box, IBoxProps } from './Box'; -import { BorderRadius } from './types'; - -export interface IImageProps { - src: string; - label?: string; - radius?: BorderRadius; +export interface IImageProps extends IBoxProps { + src: HTMLImageElement['src']; + alt?: HTMLImageElement['alt']; + title?: HTMLImageElement['title']; hidden?: boolean; - opacity?: number; responsive?: boolean; - height?: string; - width?: string; -} - -interface IPlainImageProps extends IImageProps { - className: string; + height?: HTMLImageElement['height']; + width?: HTMLImageElement['width']; } -const PlainImage = (props: IPlainImageProps) => ; - -export const Image = styled(PlainImage as any)( - { - // @ts-ignore - display: 'inline', - }, - - borderRadius, - opacity, - width, - height, - - ({ hidden }: IImageProps) => - hidden && { - display: 'none', - }, - - ({ responsive }: IImageProps) => - responsive && { - maxWidth: '100%', - } -); +export const Image = styled(Box).attrs({ + as: 'img', +})` + ${({ hidden }: IImageProps) => hidden && `display: none;`} + + ${({ responsive }: IImageProps) => responsive && ` + width: auto; + height: auto; + max-width: 100%; + max-height: 100%; + `}; +`; Image.defaultProps = { - circular: false, - label: '', - height: 'auto', hidden: false, - opacity: 1, - responsive: true, - rounded: false, - width: 'auto', + responsive: false, }; diff --git a/src/__stories__/Image.tsx b/src/__stories__/Image.tsx index cde0f793..6417987e 100644 --- a/src/__stories__/Image.tsx +++ b/src/__stories__/Image.tsx @@ -12,7 +12,7 @@ export const imageKnobs = (tabName = 'Image'): any => { radius: select('radius', BorderRadius, '', tabName), height: text('height', '', tabName), hidden: boolean('hidden', false, tabName), - responsive: boolean('responsive', true, tabName), + responsive: boolean('responsive', false, tabName), opacity: number( 'opacity', 1, @@ -22,16 +22,16 @@ export const imageKnobs = (tabName = 'Image'): any => { } as NumberOptions, tabName ), - src: text( - 'src', - 'https://s3.amazonaws.com/totem_production/assets/logos/10719/original/logo_light_bg.png?1501094221', - tabName - ), + src: text('src', 'https://placehold.it/150x50', tabName), + alt: text('alt', 'Placeholder', tabName), + title: text('title', 'Placeholder', tabName), width: text('width', '', tabName), + shadow: select('shadow', ['', 'sm', 'md', 'lg'], '', tabName), }; }; storiesOf('Image', module) .addDecorator(withKnobs) .addDecorator(storyFn =>
{storyFn()}
) - .add('with defaults', () => ); + .add('with defaults', () => ) + .add('responsive', () => ); From f5854d2957870d6c579c04daf4967b5982f0fb4c Mon Sep 17 00:00:00 2001 From: casserni Date: Wed, 28 Nov 2018 09:39:36 -0600 Subject: [PATCH 5/6] fix(image): use js objects instead of template strings --- src/Image.tsx | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/src/Image.tsx b/src/Image.tsx index 1597099a..7dc7a49f 100644 --- a/src/Image.tsx +++ b/src/Image.tsx @@ -14,16 +14,18 @@ export interface IImageProps extends IBoxProps { export const Image = styled(Box).attrs({ as: 'img', -})` - ${({ hidden }: IImageProps) => hidden && `display: none;`} - - ${({ responsive }: IImageProps) => responsive && ` - width: auto; - height: auto; - max-width: 100%; - max-height: 100%; - `}; -`; +})( + // @ts-ignore + ({ hidden }: IImageProps) => hidden && { display: 'none' }, + + ({ responsive }: IImageProps) => + responsive && { + width: 'auto', + height: 'auto', + maxWidth: '100%', + maxHeight: '100%', + } +); Image.defaultProps = { hidden: false, From 4ce2422d75f8493d239ad751849d33d2305c5d87 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Ro=C5=BCek?= Date: Wed, 28 Nov 2018 16:48:41 +0100 Subject: [PATCH 6/6] test(image): smoke tests --- src/__tests__/Image.spec.tsx | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 src/__tests__/Image.spec.tsx diff --git a/src/__tests__/Image.spec.tsx b/src/__tests__/Image.spec.tsx new file mode 100644 index 00000000..9ec34d9a --- /dev/null +++ b/src/__tests__/Image.spec.tsx @@ -0,0 +1,27 @@ +import { mount } from 'enzyme'; +import 'jest-enzyme'; +import * as React from 'react'; +import { IImageProps, Image } from '../Image'; + +describe('Image', () => { + let props: IImageProps; + + beforeEach(() => { + props = { + title: 'Stoplight.io', + src: 'www.stoplight.io', + }; + }); + + it('attaches title', () => { + const wrapper = mount(); + expect(wrapper).toHaveProp('title', props.title); + wrapper.unmount(); + }); + + it('attaches src', () => { + const wrapper = mount(); + expect(wrapper).toHaveProp('src', props.src); + wrapper.unmount(); + }); +});