From 59180b2df2884af69786aa2ee1c13d9f072529cf Mon Sep 17 00:00:00 2001 From: Johan-dutoit Date: Tue, 21 Jul 2020 20:23:22 +0200 Subject: [PATCH 1/7] feat(types): add the ability to specify styles type when using createRestyleComponent --- src/createBox.ts | 5 +++-- src/createRestyleComponent.tsx | 7 ++++--- src/createText.ts | 5 +++-- src/test/createRestyleComponent.test.tsx | 5 +++-- 4 files changed, 13 insertions(+), 9 deletions(-) diff --git a/src/createBox.ts b/src/createBox.ts index 2fb377bf..3b4be061 100644 --- a/src/createBox.ts +++ b/src/createBox.ts @@ -1,5 +1,5 @@ import React from 'react'; -import {View} from 'react-native'; +import {View, ViewStyle} from 'react-native'; import createRestyleComponent from './createRestyleComponent'; import {BaseTheme} from './types'; @@ -50,7 +50,8 @@ const createBox = < ) => { return createRestyleComponent< BoxProps & Omit>, - Theme + Theme, + ViewStyle >(boxRestyleFunctions, BaseComponent); }; diff --git a/src/createRestyleComponent.tsx b/src/createRestyleComponent.tsx index 1ab41c1e..29855ae1 100644 --- a/src/createRestyleComponent.tsx +++ b/src/createRestyleComponent.tsx @@ -1,12 +1,13 @@ import React from 'react'; -import {View} from 'react-native'; +import {View, TextStyle, ImageStyle, ViewStyle} from 'react-native'; import {BaseTheme, RestyleFunctionContainer} from './types'; import useRestyle from './hooks/useRestyle'; const createRestyleComponent = < Props extends Record, - Theme extends BaseTheme = BaseTheme + Theme extends BaseTheme = BaseTheme, + TStyle extends ViewStyle | TextStyle | ImageStyle = ViewStyle >( restyleFunctions: ( | RestyleFunctionContainer @@ -15,7 +16,7 @@ const createRestyleComponent = < ) => { const RestyleComponent = ( props: { - style?: any; + style?: TStyle; } & Props, ) => { const passedProps = useRestyle(restyleFunctions, props); diff --git a/src/createText.ts b/src/createText.ts index 78f88527..baff94c1 100644 --- a/src/createText.ts +++ b/src/createText.ts @@ -1,5 +1,5 @@ import React from 'react'; -import {Text} from 'react-native'; +import {Text, TextStyle} from 'react-native'; import createRestyleComponent from './createRestyleComponent'; import {BaseTheme} from './types'; @@ -45,7 +45,8 @@ const createText = < ) => { return createRestyleComponent< TextProps & Omit>, - Theme + Theme, + TextStyle >(textRestyleFunctions, BaseComponent); }; diff --git a/src/test/createRestyleComponent.test.tsx b/src/test/createRestyleComponent.test.tsx index 982fbd3c..2da9116a 100644 --- a/src/test/createRestyleComponent.test.tsx +++ b/src/test/createRestyleComponent.test.tsx @@ -1,6 +1,6 @@ import React from 'react'; import {create as render, act} from 'react-test-renderer'; -import {View, Dimensions, ViewProps} from 'react-native'; +import {View, Dimensions, ViewProps, ViewStyle} from 'react-native'; import createRestyleComponent from '../createRestyleComponent'; import { @@ -43,7 +43,8 @@ const Component = createRestyleComponent< SpacingProps & OpacityProps & ViewProps, - Theme + Theme, + ViewStyle >([backgroundColor, spacing, opacity]); describe('createRestyleComponent', () => { From c25510879826326aa6fe7647ba1a22977cf0d3fb Mon Sep 17 00:00:00 2001 From: Johan-dutoit Date: Wed, 22 Jul 2020 20:15:28 +0200 Subject: [PATCH 2/7] refactor(types): remove style prop instead of adding more types --- src/createBox.ts | 5 ++--- src/createRestyleComponent.tsx | 11 +++-------- src/createText.ts | 5 ++--- 3 files changed, 7 insertions(+), 14 deletions(-) diff --git a/src/createBox.ts b/src/createBox.ts index 3b4be061..2fb377bf 100644 --- a/src/createBox.ts +++ b/src/createBox.ts @@ -1,5 +1,5 @@ import React from 'react'; -import {View, ViewStyle} from 'react-native'; +import {View} from 'react-native'; import createRestyleComponent from './createRestyleComponent'; import {BaseTheme} from './types'; @@ -50,8 +50,7 @@ const createBox = < ) => { return createRestyleComponent< BoxProps & Omit>, - Theme, - ViewStyle + Theme >(boxRestyleFunctions, BaseComponent); }; diff --git a/src/createRestyleComponent.tsx b/src/createRestyleComponent.tsx index 29855ae1..2796d2ed 100644 --- a/src/createRestyleComponent.tsx +++ b/src/createRestyleComponent.tsx @@ -1,24 +1,19 @@ import React from 'react'; -import {View, TextStyle, ImageStyle, ViewStyle} from 'react-native'; +import {View} from 'react-native'; import {BaseTheme, RestyleFunctionContainer} from './types'; import useRestyle from './hooks/useRestyle'; const createRestyleComponent = < Props extends Record, - Theme extends BaseTheme = BaseTheme, - TStyle extends ViewStyle | TextStyle | ImageStyle = ViewStyle + Theme extends BaseTheme = BaseTheme >( restyleFunctions: ( | RestyleFunctionContainer | RestyleFunctionContainer[])[], BaseComponent: React.ComponentType = View, ) => { - const RestyleComponent = ( - props: { - style?: TStyle; - } & Props, - ) => { + const RestyleComponent = (props: Props) => { const passedProps = useRestyle(restyleFunctions, props); return ; }; diff --git a/src/createText.ts b/src/createText.ts index baff94c1..78f88527 100644 --- a/src/createText.ts +++ b/src/createText.ts @@ -1,5 +1,5 @@ import React from 'react'; -import {Text, TextStyle} from 'react-native'; +import {Text} from 'react-native'; import createRestyleComponent from './createRestyleComponent'; import {BaseTheme} from './types'; @@ -45,8 +45,7 @@ const createText = < ) => { return createRestyleComponent< TextProps & Omit>, - Theme, - TextStyle + Theme >(textRestyleFunctions, BaseComponent); }; From ef042c9f739372a3ece31d567d74fd4656f7e473 Mon Sep 17 00:00:00 2001 From: Johan-dutoit Date: Wed, 22 Jul 2020 20:17:08 +0200 Subject: [PATCH 3/7] fix(tests): revert types added to tests --- src/test/createRestyleComponent.test.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/test/createRestyleComponent.test.tsx b/src/test/createRestyleComponent.test.tsx index 2da9116a..982fbd3c 100644 --- a/src/test/createRestyleComponent.test.tsx +++ b/src/test/createRestyleComponent.test.tsx @@ -1,6 +1,6 @@ import React from 'react'; import {create as render, act} from 'react-test-renderer'; -import {View, Dimensions, ViewProps, ViewStyle} from 'react-native'; +import {View, Dimensions, ViewProps} from 'react-native'; import createRestyleComponent from '../createRestyleComponent'; import { @@ -43,8 +43,7 @@ const Component = createRestyleComponent< SpacingProps & OpacityProps & ViewProps, - Theme, - ViewStyle + Theme >([backgroundColor, spacing, opacity]); describe('createRestyleComponent', () => { From 5ad91798e0dfe863777dd552d1007add1f10bee7 Mon Sep 17 00:00:00 2001 From: Johan-dutoit Date: Wed, 16 Sep 2020 12:24:10 +0200 Subject: [PATCH 4/7] feat(variants): add defaults to theme --- README.md | 5 +++++ src/createVariant.ts | 9 +++++++-- src/test/createVariant.test.ts | 36 ++++++++++++++++++++++++++++++++++ 3 files changed, 48 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index f721fea1..0a6b56dd 100644 --- a/README.md +++ b/README.md @@ -415,6 +415,11 @@ const theme = createTheme({ tablet: 768, }, cardVariants: { + defaults: { + // We can define defaults for the variant here. + // This will be applied after the defaults passed to createVariant and before the variant defined below. + // Note: defaults do *not* support responsive props + }, regular: { // We can refer to other values in the theme here, and use responsive props padding: { diff --git a/src/createVariant.ts b/src/createVariant.ts index ab8ef615..82f2f02f 100644 --- a/src/createVariant.ts +++ b/src/createVariant.ts @@ -50,9 +50,14 @@ function createVariant< const expandedProps = styleFunction.func(props, {theme, dimensions})[ property ]; - if (!expandedProps && !defaults) return {}; + + const variantDefaults = theme[themeKey].defaults as Partial< + AllProps + >; + + if (!expandedProps && !defaults && !variantDefaults) return {}; return allRestyleFunctions.buildStyle( - {...defaults, ...expandedProps}, + {...defaults, ...variantDefaults, ...expandedProps}, { theme, dimensions, diff --git a/src/test/createVariant.test.ts b/src/test/createVariant.test.ts index 49aef770..3fc96297 100644 --- a/src/test/createVariant.test.ts +++ b/src/test/createVariant.test.ts @@ -33,6 +33,16 @@ const theme = { color: 'white', }, }, + boxVariants: { + defaults: { + fontSize: 12, + backgroundColor: 'black', + }, + primary: { + width: 50, + height: 50, + }, + }, }; const dimensions = { width: 375, @@ -62,6 +72,32 @@ describe('createVariant', () => { }); }); + it('accepts defaults from the theme', () => { + const variant = createVariant({ + themeKey: 'boxVariants', + }); + expect(variant.func({}, {theme, dimensions})).toStrictEqual({ + fontSize: 12, + backgroundColor: '#111111', + }); + }); + + it('accepts defaults from the theme and correctly overrides variant defaults', () => { + const variant = createVariant({ + themeKey: 'boxVariants', + defaults: { + fontSize: 10, + opacity: 0.5, + }, + }); + + expect(variant.func({}, {theme, dimensions})).toStrictEqual({ + backgroundColor: '#111111', + fontSize: 12, + opacity: 0.5, + }); + }); + it('correctly overrides default values', () => { const variant = createVariant({ themeKey: 'textVariants', From c79c671024da8a86b7ef76549573f7deb5b67e05 Mon Sep 17 00:00:00 2001 From: Johan-dutoit Date: Thu, 17 Sep 2020 16:47:48 +0200 Subject: [PATCH 5/7] tests(variants): add tests for dimensions in defaults --- README.md | 1 - src/test/createVariant.test.ts | 43 ++++++++++++++++++++++++++++++++-- 2 files changed, 41 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 0a6b56dd..20560c0b 100644 --- a/README.md +++ b/README.md @@ -418,7 +418,6 @@ const theme = createTheme({ defaults: { // We can define defaults for the variant here. // This will be applied after the defaults passed to createVariant and before the variant defined below. - // Note: defaults do *not* support responsive props }, regular: { // We can refer to other values in the theme here, and use responsive props diff --git a/src/test/createVariant.test.ts b/src/test/createVariant.test.ts index 3fc96297..e0d294a2 100644 --- a/src/test/createVariant.test.ts +++ b/src/test/createVariant.test.ts @@ -35,8 +35,14 @@ const theme = { }, boxVariants: { defaults: { - fontSize: 12, - backgroundColor: 'black', + fontSize: { + phone: 12, + tablet: 24, + }, + backgroundColor: { + phone: 'black', + tablet: 'white', + }, }, primary: { width: 50, @@ -98,6 +104,39 @@ describe('createVariant', () => { }); }); + it('corerctly uses the breakpoints for defaults within the theme', () => { + const variant = createVariant({ + themeKey: 'boxVariants', + defaults: { + fontSize: 10, + opacity: 0.5, + }, + }); + + expect(variant.func({}, {theme, dimensions})).toStrictEqual({ + backgroundColor: '#111111', + fontSize: 12, + opacity: 0.5, + }); + + expect( + variant.func( + {}, + { + theme, + dimensions: { + width: 376, + height: 667, + }, + }, + ), + ).toStrictEqual({ + backgroundColor: '#EEEEEE', + fontSize: 24, + opacity: 0.5, + }); + }); + it('correctly overrides default values', () => { const variant = createVariant({ themeKey: 'textVariants', From 28dbcf0fe17ce49afe2d4c153c75a50a2bca5a78 Mon Sep 17 00:00:00 2001 From: Johan-dutoit Date: Thu, 17 Sep 2020 17:18:45 +0200 Subject: [PATCH 6/7] fix(types): remove defaults from variant types --- src/createVariant.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/createVariant.ts b/src/createVariant.ts index 82f2f02f..666719b6 100644 --- a/src/createVariant.ts +++ b/src/createVariant.ts @@ -76,6 +76,8 @@ export type VariantProps< Theme extends BaseTheme, K extends keyof Theme, Property extends keyof any = 'variant' -> = {[key in Property]?: ResponsiveValue}; +> = { + [key in Property]?: ResponsiveValue, Theme>; +}; export default createVariant; From 90a7a36eef9649a188ab070ca177206bc7e2ad74 Mon Sep 17 00:00:00 2001 From: Johan du Toit Date: Fri, 18 Sep 2020 11:25:45 +0200 Subject: [PATCH 7/7] Update src/test/createVariant.test.ts Co-authored-by: Joel Besada --- src/test/createVariant.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/test/createVariant.test.ts b/src/test/createVariant.test.ts index e0d294a2..4a18823d 100644 --- a/src/test/createVariant.test.ts +++ b/src/test/createVariant.test.ts @@ -104,7 +104,7 @@ describe('createVariant', () => { }); }); - it('corerctly uses the breakpoints for defaults within the theme', () => { + it('correctly uses the breakpoints for defaults within the theme', () => { const variant = createVariant({ themeKey: 'boxVariants', defaults: {