Move font and text style to theme

Author: SjaakSchilperoort

package.json

@@ -2,6 +2,11 @@
   "name": "@observation.org/react-native-components",
   "version": "1.73.0",
   "main": "src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./theme": "./src/theme/index.ts",
+    "./styles": "./src/styles/index.ts"
+  },
   "repository": "git@github.com:observation/react-native-components.git",
   "author": "Observation.org",
   "license": "MIT",

src/@types/theme.ts

@@ -6,7 +6,6 @@ import { View } from 'react-native'
 import { Collapse, CollapseBody, CollapseHeader } from 'accordion-collapse-react-native'
 
 import Log from '../lib/Log'
-import { unsafeLayoutAnimation } from '../lib/Utils'
 
 type Item = {
   title: string
@@ -26,7 +25,6 @@ const Accordion = <T extends Item>({ list, header, footer, body, onOpen, ListEmp
 
   const onToggle = (index: number, isExpanded: boolean) => {
     Log.debug('Accordion:onToggle', index, isExpanded)
-    unsafeLayoutAnimation('Accordion:onToggle')
     if (isExpanded) {
       setActiveIndex(index)
       onOpen(index)

src/components/Accordion.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import { NavigationProp, ParamListBase } from '@react-navigation/native'
 
 import IconButton from '../components/IconButton'
-import { useTheme } from '../theme/ThemeProvider'
+import { useTheme } from '../theme'
 
 type Props = {
   navigation: NavigationProp<ParamListBase>

src/components/BackButton.tsx

@@ -4,10 +4,8 @@ import { StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native'
 import { useTheme as useNavigationTheme } from '@react-navigation/native'
 
 import LargeButton, { LargeButtonProps } from './LargeButton'
-import { Theme } from '../@types/theme'
 import { shadow } from '../styles'
-import textStyle from '../styles/text'
-import { useStyles, useTheme } from '../theme/ThemeProvider'
+import { Theme, useStyles, useTheme } from '../theme/'
 
 type Props = {
   title?: string
@@ -31,13 +29,13 @@ const BottomSheet = ({ title, text, buttons = [], style, testID, children }: Pro
           <View style={{ flexDirection: 'row', alignItems: 'flex-start' }}>
             {title && (
               <View style={{ flex: 1 }}>
-                <Text style={textStyle.lead}>{title}</Text>
+                <Text style={theme.text.lead}>{title}</Text>
               </View>
             )}
           </View>
           {text && (
             <View style={{ marginTop: theme.margin.half }}>
-              <Text style={textStyle.body}>{text}</Text>
+              <Text style={theme.text.body}>{text}</Text>
             </View>
           )}
           {children}

src/components/BottomSheet.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'
 
 import BrandIcons, { BrandIconName } from '../lib/BrandIcons'
-import { useTheme } from '../theme/ThemeProvider'
+import { useTheme } from '../theme'
 
 type Props = {
   name: BrandIconName

src/components/BrandIcon.tsx

@@ -3,7 +3,7 @@ import { StyleProp, StyleSheet, TouchableOpacity, View, ViewStyle } from 'react-
 
 import { Icon } from './Icon'
 import Log from '../lib/Log'
-import { useTheme } from '../theme/ThemeProvider'
+import { useTheme } from '../theme'
 
 type Props = {
   enabled: boolean

src/components/Checkbox.tsx

@@ -10,10 +10,7 @@ import {
   ViewStyle,
 } from 'react-native'
 
-import { Theme } from '../@types/theme'
-import { fontSize } from '../styles'
-import appTextStyle from '../styles/text'
-import { useStyles, useTheme } from '../theme/ThemeProvider'
+import { Theme, useStyles, useTheme } from '../theme'
 
 type Props = {
   text?: string
@@ -48,10 +45,10 @@ const createStyles = (theme: Theme) =>
       justifyContent: 'center',
     },
     chipText: {
-      ...appTextStyle.body,
+      ...theme.text.body,
       color: theme.color.white,
       lineHeight: theme.margin.common,
-      fontSize: fontSize.medium,
+      fontSize: theme.fontSize.medium,
     },
     chipContainer: {
       backgroundColor: theme.color.accentLime400,

src/components/Chip.tsx

@@ -4,9 +4,8 @@ import { Dimensions, Image, StyleSheet, Text, TouchableOpacity, View } from 'rea
 import ScalableImage from 'react-native-scalable-image'
 
 import Lightbox from './Lightbox'
-import { Theme } from '../@types/theme'
-import { font, rounded, shadow } from '../styles'
-import { useTheme } from '../theme/ThemeProvider'
+import { rounded, shadow } from '../styles'
+import { Theme, useTheme } from '../theme'
 
 type Props = {
   src: string
@@ -89,12 +88,12 @@ const createStyles = (theme: Theme) =>
       justifyContent: 'center',
     },
     title: {
-      ...font.smallBold,
+      ...theme.font.smallBold,
       color: theme.color.black,
       marginBottom: theme.margin.quarter,
     },
     description: {
-      ...font.small,
+      ...theme.font.small,
       color: theme.color.grey500,
     },
   })

src/components/ContentImage.tsx

@@ -3,7 +3,6 @@ import { StyleProp, ViewStyle } from 'react-native'
 
 import { Icon } from './Icon'
 import IconText from './IconText'
-import textStyle from '../styles/text'
 import { useTheme } from '../theme/ThemeProvider'
 
 type Props = {
@@ -19,7 +18,7 @@ const Date = ({ date, containerStyle }: Props) => {
       text={date}
       style={{
         containerStyle,
-        textStyle: textStyle.light,
+        textStyle: theme.text.light,
       }}
       singleLineText
     />