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' 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", 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( () => ({ 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