Add a Theme type

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@observation.org/react-native-components",
-  "version": "1.71.0",
+  "version": "1.72.0",
   "main": "src/index.ts",
   "repository": "git@github.com:observation/react-native-components.git",
   "author": "Observation.org",
@@ -65,6 +65,7 @@
     "accordion-collapse-react-native": "^1.1.1",
     "color": "^5.0.3",
     "react-native-logs": "^5.5.0",
+    "react-native-render-html": "^6.3.4",
     "react-native-scalable-image": "^1.1.0"
   },
   "packageManager": "yarn@3.6.4",

src/@types/font.ts

@@ -0,0 +1,36 @@
+import { TextStyle } from 'react-native'
+
+import { MixedSizeCSSPropertiesKeys } from 'react-native-render-html'
+
+/**
+ * React Native's TextStyle without the overflow:'scroll' property.
+ *
+ * The component @native-html (used by react-native-render-html) is missing the overflow: 'scroll' property.
+ * In order to use the React Native's TextStyle together with the HtmlContent (RenderHtml) component
+ * (and type checking) we override the overflow property with our own overflow type.
+ */
+export type FontStyle = TextStyle & { overflow?: 'visible' | 'hidden' | undefined } & {
+  [k in MixedSizeCSSPropertiesKeys]?: number | string
+}
+export type FontName =
+  | 'extraSmall'
+  | 'small'
+  | 'smallBold'
+  | 'smallLight'
+  | 'medium'
+  | 'mediumBold'
+  | 'large'
+  | 'largeBold'
+  | 'extraLarge'
+  | 'extraLargeBold'
+  | 'huge'
+  | 'hugeBold'
+
+export type FontMetrics = {
+  extraSmall: number
+  small: number
+  medium: number
+  large: number
+  extraLarge: number
+  huge: number
+}

src/@types/layout.ts

@@ -0,0 +1,10 @@
+import { Insets, ViewStyle } from 'react-native'
+
+export type LayoutStyles = {
+  absolute: ViewStyle
+  absoluteLeft: ViewStyle
+  absoluteRight: ViewStyle
+  absoluteTop: ViewStyle
+  absoluteBottom: ViewStyle
+  hitSlop: Insets
+}

src/@types/rounded.ts

@@ -0,0 +1,10 @@
+export type RoundedStyle = {
+  borderRadius: number
+  overflow: 'hidden'
+}
+
+export type RoundedStyles = {
+  normal: RoundedStyle
+  large: RoundedStyle
+  huge: RoundedStyle
+}

src/@types/shadow.ts

@@ -0,0 +1,11 @@
+import { ViewStyle } from 'react-native'
+
+export type ShadowStyle = {
+  android: ViewStyle
+  ios: ViewStyle
+}
+
+export type ShadowStyles = {
+  normal: ShadowStyle
+  small: ShadowStyle
+}

src/@types/theme.ts

@@ -0,0 +1,81 @@
+export interface ThemeAnimation {
+  duration: {
+    medium: number
+  }
+}
+
+export interface ThemeColor {
+  white: string
+  black: string
+  grey800: string
+  grey500: string
+  grey300: string
+  grey50: string
+  grey100: string
+  primary500: string
+  primary300: string
+  primary50: string
+  success500: string
+  success200: string
+  success700: string
+  success600: string
+  success400: string
+  success50: string
+  warning500: string
+  warning700: string
+  warning200: string
+  error500: string
+  error200: string
+  error700: string
+  accentLime400: string
+  accentLime50: string
+  accentSky400: string
+  accentSky50: string
+}
+
+export interface ThemeOverlay {
+  white00: string
+  white05: string
+  white10: string
+  white70: string
+  white80: string
+  black50: string
+  grey60: string
+}
+
+export interface ThemeGradient {
+  bottom: string[]
+  top: string[]
+}
+
+export interface ThemeIcon {
+  size: {
+    xxs: number
+    xs: number
+    s: number
+    m: number
+    l: number
+    xl: number
+    xxl: number
+    xxxl: number
+  }
+}
+
+export interface ThemeMargin {
+  eighth: number
+  quarter: number
+  half: number
+  common: number
+  large: number
+  double: number
+  huge: number
+}
+
+export interface Theme {
+  animation: ThemeAnimation
+  icon: ThemeIcon
+  color: ThemeColor
+  overlay: ThemeOverlay
+  gradient: ThemeGradient
+  margin: ThemeMargin
+}

src/components/BackButton.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import { NavigationProp, ParamListBase } from '@react-navigation/native'
 
 import IconButton from '../components/IconButton'
-import theme from '../styles/theme'
+import { theme } from '../styles'
 
 type Props = {
   navigation: NavigationProp<ParamListBase>
@@ -13,7 +13,7 @@ const BackButton = ({ navigation }: Props) => (
   <IconButton
     containerStyle={{ padding: theme.margin.common }}
     onPress={() => navigation.goBack()}
-    icon={{ name: 'chevron-left', size: theme.icon.size.extraExtraLarge, color: theme.color.primary500 }}
+    icon={{ name: 'chevron-left', size: theme.icon.size.xxl, color: theme.color.primary500 }}
   />
 )
 

src/components/BottomSheet.tsx

@@ -4,8 +4,8 @@ import { StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native'
 import { useTheme } from '@react-navigation/native'
 
 import LargeButton, { LargeButtonProps } from './LargeButton'
+import { shadow, theme } from '../styles'
 import textStyle from '../styles/text'
-import theme from '../styles/theme'
 
 type Props = {
   title?: string
@@ -61,12 +61,12 @@ export default BottomSheet
 
 const styles = StyleSheet.create({
   container: {
-    ...theme.shadow.ios,
+    ...shadow.normal.ios,
     borderTopWidth: 1 / 3,
     borderTopColor: theme.color.grey300,
   },
   bottomSheetContainer: {
-    ...theme.shadow.android,
+    ...shadow.normal.android,
   },
   bottomSheet: {
     flexDirection: 'column',

src/components/BrandIcon.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'
 
 import BrandIcons, { BrandIconName } from '../lib/BrandIcons'
-import theme from '../styles/theme'
+import { theme } from '../styles'
 
 type Props = {
   name: BrandIconName
@@ -14,7 +14,7 @@ type Props = {
 export const BrandIcon = ({ name, color, size }: Props) => {
   const icon = BrandIcons[name]
   const iconColor = color ?? theme.color.primary500
-  const iconSize = size ?? theme.icon.size.large
+  const iconSize = size ?? theme.icon.size.l
   const FontAwesomeIconTypeErased = FontAwesomeIcon as unknown as any
 
   return <FontAwesomeIconTypeErased icon={icon} color={iconColor} size={iconSize} />

src/components/Checkbox.tsx

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

src/components/Chip.tsx

@@ -10,8 +10,8 @@ import {
   ViewStyle,
 } from 'react-native'
 
+import { fontSize, theme } from '../styles'
 import appTextStyle from '../styles/text'
-import theme from '../styles/theme'
 
 type Props = {
   text?: string
@@ -46,7 +46,7 @@ const styles = StyleSheet.create({
     ...appTextStyle.body,
     color: theme.color.white,
     lineHeight: theme.margin.common,
-    fontSize: theme.font.size.medium,
+    fontSize: fontSize.medium,
   },
   chipContainer: {
     backgroundColor: theme.color.accentLime400,

src/components/ContentImage.tsx

@@ -4,8 +4,7 @@ import { Dimensions, Image, StyleSheet, Text, TouchableOpacity, View } from 'rea
 import ScalableImage from 'react-native-scalable-image'
 
 import Lightbox from './Lightbox'
-import font from '../styles/font'
-import theme from '../styles/theme'
+import { font, rounded, shadow, theme } from '../styles'
 
 type Props = {
   src: string
@@ -58,21 +57,21 @@ const styles = StyleSheet.create({
   outerContainer: {
     margin: -theme.margin.common,
     marginBottom: -theme.margin.half,
-    ...theme.shadow.ios,
+    ...shadow.normal.ios,
   },
   innerContainer: {
     flexDirection: 'row',
     margin: theme.margin.common,
     backgroundColor: theme.color.white,
-    ...theme.shadow.android,
-    ...theme.roundedLarge,
+    ...shadow.normal.android,
+    ...rounded.large,
     borderWidth: 1,
     borderColor: theme.color.grey50,
   },
   imageContainer: {
     margin: theme.margin.common,
     marginRight: theme.margin.half,
-    ...theme.roundedLarge,
+    ...rounded.large,
   },
   image: {
     height: 80,

src/components/Date.tsx

@@ -13,7 +13,7 @@ type Props = {
 
 const Date = ({ date, containerStyle }: Props) => (
   <IconText
-    icon={<Icon name="calendar-day" style={'solid'} color={theme.color.grey300} size={theme.icon.size.medium} />}
+    icon={<Icon name="calendar-day" style={'solid'} color={theme.color.grey300} size={theme.icon.size.m} />}
     text={date}
     style={{
       containerStyle,

src/components/Disclose.tsx

@@ -3,8 +3,8 @@ import { StyleProp, StyleSheet, Text, TextStyle, TouchableOpacity, View, ViewSty
 
 import { Icon } from './Icon'
 import Log from '../lib/Log'
+import { theme } from '../styles'
 import appTextStyle from '../styles/text'
-import theme from '../styles/theme'
 
 type Props = {
   text: string
@@ -19,7 +19,7 @@ const Disclose = ({ text, onPress, textStyle, containerStyle }: Props) => {
     <TouchableOpacity activeOpacity={0.5} onPress={onPress}>
       <View style={[styles.containerStyle, containerStyle]}>
         <Text style={[appTextStyle.link, textStyle]}>{text}</Text>
-        <Icon name="chevron-right" size={theme.icon.size.extraLarge} />
+        <Icon name="chevron-right" size={theme.icon.size.xl} />
       </View>
     </TouchableOpacity>
   )

src/components/DocumentLink.tsx

@@ -3,8 +3,8 @@ import { StyleProp, ViewStyle } from 'react-native'
 
 import { Icon } from './Icon'
 import IconText from './IconText'
+import { theme } from '../styles'
 import textStyle from '../styles/text'
-import theme from '../styles/theme'
 
 type Props = {
   onPress?: () => void
@@ -15,7 +15,7 @@ type Props = {
 
 const DocumentLink = ({ onPress, containerStyle, label }: Props) => (
   <IconText
-    icon={<Icon name="file-lines" size={theme.icon.size.medium} style="solid" />}
+    icon={<Icon name="file-lines" size={theme.icon.size.m} style="solid" />}
     text={label}
     style={{
       containerStyle,

src/components/FilterButton.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { StyleProp, StyleSheet, TouchableOpacity, ViewStyle } from 'react-native'
 
-import theme from '../styles/theme'
+import { rounded, theme } from '../styles'
 
 type Props = {
   content: (_: { color: string }) => React.ReactElement
@@ -29,7 +29,7 @@ export default FilterButton
 
 const styles = StyleSheet.create({
   container: {
-    ...theme.rounded,
+    ...rounded.normal,
     justifyContent: 'center',
   },
   button: {

src/components/Icon.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'
 
 import Icons, { IconName } from '../lib/Icons'
-import theme from '../styles/theme'
+import { theme } from '../styles'
 
 export type IconStyleProp = 'light' | 'solid'
 
@@ -23,7 +23,7 @@ export const Icon = ({ name, color, size, testID, style, rotation }: IconProps):
   const iconStyle = style ?? 'light'
   const icon = iconStyle === 'light' ? Icons[name].light : Icons[name].solid
   const iconColor = color ?? theme.color.primary500
-  const iconSize = size ?? theme.icon.size.large
+  const iconSize = size ?? theme.icon.size.l
   const transform = rotation ? { rotate: rotation } : undefined
 
   return <FontAwesomeIcon icon={icon} color={iconColor} size={iconSize} testID={testID} transform={transform} />

src/components/IconButton.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { StyleProp, TouchableOpacity, ViewStyle } from 'react-native'
 
 import { Icon, IconProps } from './Icon'
-import theme from '../styles/theme'
+import { theme } from '../styles'
 
 type Props = {
   containerStyle?: StyleProp<ViewStyle>
@@ -22,7 +22,7 @@ const IconButton = ({ containerStyle, disabled, onPress, icon, accessibilityLabe
     onPress={disabled ? undefined : onPress}
     activeOpacity={0.5}
   >
-    <Icon size={theme.icon.size.large} {...icon} />
+    <Icon size={theme.icon.size.l} {...icon} />
   </TouchableOpacity>
 )