From 07a2aeb14a0a103b54e996871ee0d01b15f70925 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Baumruck?= Date: Thu, 21 Mar 2024 11:00:23 +0100 Subject: [PATCH 1/4] fix require cycles --- src/components/molecules/index.ts | 1 - .../bottomSheets}/BootomSheetScrollables.tsx | 0 src/design-system/bottomSheets/BottomSheet.tsx | 2 +- src/design-system/bottomSheets/BottomSheetFlatList.tsx | 2 +- 4 files changed, 2 insertions(+), 3 deletions(-) rename src/{components/molecules => design-system/bottomSheets}/BootomSheetScrollables.tsx (100%) diff --git a/src/components/molecules/index.ts b/src/components/molecules/index.ts index ff2b2f65..4f4e7d1d 100644 --- a/src/components/molecules/index.ts +++ b/src/components/molecules/index.ts @@ -1,4 +1,3 @@ -export * from './BootomSheetScrollables' export * from './Field' export * from './MenuItem' export * from './TextArea' diff --git a/src/components/molecules/BootomSheetScrollables.tsx b/src/design-system/bottomSheets/BootomSheetScrollables.tsx similarity index 100% rename from src/components/molecules/BootomSheetScrollables.tsx rename to src/design-system/bottomSheets/BootomSheetScrollables.tsx diff --git a/src/design-system/bottomSheets/BottomSheet.tsx b/src/design-system/bottomSheets/BottomSheet.tsx index 1ca11a7d..12093ec0 100644 --- a/src/design-system/bottomSheets/BottomSheet.tsx +++ b/src/design-system/bottomSheets/BottomSheet.tsx @@ -9,8 +9,8 @@ import { import { RefObject, useCallback } from 'react' import { Dimensions } from 'react-native' +import { BottomSheetScrollView } from './BootomSheetScrollables' import { BottomSheetHeader } from './BottomSheetHeader' -import { BottomSheetScrollView } from '../../components/molecules' const screenHeight = Dimensions.get('screen').height diff --git a/src/design-system/bottomSheets/BottomSheetFlatList.tsx b/src/design-system/bottomSheets/BottomSheetFlatList.tsx index 979bdb8a..07853a17 100644 --- a/src/design-system/bottomSheets/BottomSheetFlatList.tsx +++ b/src/design-system/bottomSheets/BottomSheetFlatList.tsx @@ -1,2 +1,2 @@ // export { BottomSheetFlatList } from '@gorhom/bottom-sheet' -export { BottomSheetFlatList } from '../../components/molecules' +export { BottomSheetFlatList } from './BootomSheetScrollables' From f2f8e66f8d8d4b6a061655f9182f3e6a854fde99 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Baumruck?= Date: Thu, 21 Mar 2024 11:03:15 +0100 Subject: [PATCH 2/4] fix typo in font family name --- src/design-system/config/theme.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/design-system/config/theme.ts b/src/design-system/config/theme.ts index 76824c27..ba420444 100644 --- a/src/design-system/config/theme.ts +++ b/src/design-system/config/theme.ts @@ -124,7 +124,7 @@ export const fontWeights: { [key in FontWeight]: '400' | '500' | '600' | '700' } export const fonts: { [key in FontWeight]: string } = { Regular: 'Inter_Regular', Medium: 'Inter_Medium', - Semibold: 'Inter_Semibold', + Semibold: 'Inter_SemiBold', Bold: 'Inter_Bold', } as const From af97e4a806fcf4a9025205590461a228e8d57dac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Baumruck?= Date: Thu, 21 Mar 2024 11:04:03 +0100 Subject: [PATCH 3/4] add some memoization to text --- src/design-system/components/Text/Text.tsx | 40 +++++++++++++++------- 1 file changed, 28 insertions(+), 12 deletions(-) diff --git a/src/design-system/components/Text/Text.tsx b/src/design-system/components/Text/Text.tsx index 0d63f5a4..49c4337e 100644 --- a/src/design-system/components/Text/Text.tsx +++ b/src/design-system/components/Text/Text.tsx @@ -8,6 +8,7 @@ import { displayVariants, fontDisplaySize, fontTextSize, + FontWeight, fontWeights, TextVariant, textVariants, @@ -73,25 +74,40 @@ const RawText = memo( ) => { const theme = useTheme() - const { fontWeight: variantFontWeight, fontSize: variantFontSize } = - type === 'text' ? textVariants[variant as TextVariant] : displayVariants[variant] + const { fontWeight: variantFontWeight, fontSize: variantFontSize } = useMemo( + () => (type === 'text' ? textVariants[variant as TextVariant] : displayVariants[variant]), + [type, variant] + ) - const fontFamily = props.fontFamily || variantFontWeight - const fontWeight = bold ? 'bold' : props.fontWeight || fontWeights[variantFontWeight] - const fontSize = - props.fontSize || - (type === 'text' - ? fontTextSize[variantFontSize as keyof typeof fontTextSize] - : fontDisplaySize[variantFontSize]) + const fontFamily = useMemo( + (): FontWeight => props.fontFamily || variantFontWeight, + [props.fontFamily, variantFontWeight] + ) + const fontWeight = useMemo( + (): TextStyle['fontWeight'] => + bold ? 'bold' : props.fontWeight || fontWeights[variantFontWeight], + [bold, props.fontWeight, variantFontWeight] + ) + const fontSize = useMemo( + (): number => + props.fontSize || + (type === 'text' + ? fontTextSize[variantFontSize as keyof typeof fontTextSize] + : fontDisplaySize[variantFontSize]), + [props.fontSize, type, variantFontSize] + ) const fontFamilyStyle = useMemo( () => ({ - fontFamily: fontFamily ? theme.fonts[fontFamily] : undefined, + fontFamily: fontFamily ? theme.fonts[variantFontWeight] : undefined, }), - [theme, fontFamily] + [fontFamily, theme.fonts, variantFontWeight] ) - const finalFontSize = fontSize && typeof fontSize === 'number' ? fontSize : undefined + const finalFontSize = useMemo( + () => (fontSize && typeof fontSize === 'number' ? fontSize : undefined), + [fontSize] + ) const lineHeightStyle = useMemo( () => ({ From 9fe3d8f528dba86527f8177e24bb4c4a4545164e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Baumruck?= Date: Thu, 21 Mar 2024 11:20:40 +0100 Subject: [PATCH 4/4] update button snapshot --- .../components/Button/__snapshots__/Button.test.tsx.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/design-system/components/Button/__snapshots__/Button.test.tsx.snap b/src/design-system/components/Button/__snapshots__/Button.test.tsx.snap index dd70b247..e4380482 100644 --- a/src/design-system/components/Button/__snapshots__/Button.test.tsx.snap +++ b/src/design-system/components/Button/__snapshots__/Button.test.tsx.snap @@ -66,7 +66,7 @@ exports[`Button renders correctly 1`] = ` style={ { "color": "#FFFFFF", - "fontFamily": "Inter_Semibold", + "fontFamily": "Inter_SemiBold", "fontSize": 14, "fontStyle": "normal", "fontWeight": "400",