Skip to content

Commit c8f390d

Browse files
SjaakSchilperoortSjaakSchilperoort
committed
Refactor styles, first step
- Add typing for theme and font - Remove non-theme entries from theme - Remove dependency on theme from font
1 parent cce9190 commit c8f390d

47 files changed

Lines changed: 690 additions & 261 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@observation.org/react-native-components",
3-
"version": "1.71.0",
3+
"version": "1.72.0",
44
"main": "src/index.ts",
55
"repository": "git@github.com:observation/react-native-components.git",
66
"author": "Observation.org",
@@ -65,6 +65,7 @@
6565
"accordion-collapse-react-native": "^1.1.1",
6666
"color": "^5.0.3",
6767
"react-native-logs": "^5.5.0",
68+
"react-native-render-html": "^6.3.4",
6869
"react-native-scalable-image": "^1.1.0"
6970
},
7071
"packageManager": "yarn@3.6.4",

‎src/@types/font.ts‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { TextStyle } from 'react-native'
2+
3+
import { MixedSizeCSSPropertiesKeys } from 'react-native-render-html'
4+
5+
/**
6+
* React Native's TextStyle without the overflow:'scroll' property.
7+
*
8+
* The component @native-html (used by react-native-render-html) is missing the overflow: 'scroll' property.
9+
* In order to use the React Native's TextStyle together with the HtmlContent (RenderHtml) component
10+
* (and type checking) we override the overflow property with our own overflow type.
11+
*/
12+
export type FontStyle = TextStyle & { overflow?: 'visible' | 'hidden' | undefined } & {
13+
[k in MixedSizeCSSPropertiesKeys]?: number | string
14+
}
15+
export type FontName =
16+
| 'extraSmall'
17+
| 'small'
18+
| 'smallBold'
19+
| 'smallLight'
20+
| 'medium'
21+
| 'mediumBold'
22+
| 'large'
23+
| 'largeBold'
24+
| 'extraLarge'
25+
| 'extraLargeBold'
26+
| 'huge'
27+
| 'hugeBold'
28+
29+
export type FontMetrics = {
30+
extraSmall: number
31+
small: number
32+
medium: number
33+
large: number
34+
extraLarge: number
35+
huge: number
36+
}

‎src/@types/layout.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { Insets, ViewStyle } from 'react-native'
2+
3+
export type LayoutStyles = {
4+
absolute: ViewStyle
5+
absoluteLeft: ViewStyle
6+
absoluteRight: ViewStyle
7+
absoluteTop: ViewStyle
8+
absoluteBottom: ViewStyle
9+
hitSlop: Insets
10+
}

‎src/@types/rounded.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
export type RoundedStyle = {
2+
borderRadius: number
3+
overflow: 'hidden'
4+
}
5+
6+
export type RoundedStyles = {
7+
normal: RoundedStyle
8+
large: RoundedStyle
9+
huge: RoundedStyle
10+
}

‎src/@types/shadow.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { ViewStyle } from 'react-native'
2+
3+
export type ShadowStyle = {
4+
android: ViewStyle
5+
ios: ViewStyle
6+
}
7+
8+
export type ShadowStyles = {
9+
normal: ShadowStyle
10+
small: ShadowStyle
11+
}

‎src/@types/theme.ts‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
export interface ThemeAnimation {
2+
duration: {
3+
medium: number
4+
}
5+
}
6+
7+
export interface ThemeColor {
8+
white: string
9+
black: string
10+
grey800: string
11+
grey500: string
12+
grey300: string
13+
grey50: string
14+
grey100: string
15+
primary500: string
16+
primary300: string
17+
primary50: string
18+
success500: string
19+
success200: string
20+
success700: string
21+
success600: string
22+
success400: string
23+
success50: string
24+
warning500: string
25+
warning700: string
26+
warning200: string
27+
error500: string
28+
error200: string
29+
error700: string
30+
accentLime400: string
31+
accentLime50: string
32+
accentSky400: string
33+
accentSky50: string
34+
}
35+
36+
export interface ThemeOverlay {
37+
white00: string
38+
white05: string
39+
white10: string
40+
white70: string
41+
white80: string
42+
black50: string
43+
grey60: string
44+
}
45+
46+
export interface ThemeGradient {
47+
bottom: string[]
48+
top: string[]
49+
}
50+
51+
export interface ThemeIcon {
52+
size: {
53+
xxs: number
54+
xs: number
55+
s: number
56+
m: number
57+
l: number
58+
xl: number
59+
xxl: number
60+
xxxl: number
61+
}
62+
}
63+
64+
export interface ThemeMargin {
65+
eighth: number
66+
quarter: number
67+
half: number
68+
common: number
69+
large: number
70+
double: number
71+
huge: number
72+
}
73+
74+
export interface Theme {
75+
animation: ThemeAnimation
76+
icon: ThemeIcon
77+
color: ThemeColor
78+
overlay: ThemeOverlay
79+
gradient: ThemeGradient
80+
margin: ThemeMargin
81+
}

‎src/components/BackButton.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import React from 'react'
33
import { NavigationProp, ParamListBase } from '@react-navigation/native'
44

55
import IconButton from '../components/IconButton'
6-
import theme from '../styles/theme'
6+
import { theme } from '../styles'
77

88
type Props = {
99
navigation: NavigationProp<ParamListBase>
@@ -13,7 +13,7 @@ const BackButton = ({ navigation }: Props) => (
1313
<IconButton
1414
containerStyle={{ padding: theme.margin.common }}
1515
onPress={() => navigation.goBack()}
16-
icon={{ name: 'chevron-left', size: theme.icon.size.extraExtraLarge, color: theme.color.primary500 }}
16+
icon={{ name: 'chevron-left', size: theme.icon.size.xxl, color: theme.color.primary500 }}
1717
/>
1818
)
1919

‎src/components/BottomSheet.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ import { StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native'
44
import { useTheme } from '@react-navigation/native'
55

66
import LargeButton, { LargeButtonProps } from './LargeButton'
7+
import { shadow, theme } from '../styles'
78
import textStyle from '../styles/text'
8-
import theme from '../styles/theme'
99

1010
type Props = {
1111
title?: string
@@ -61,12 +61,12 @@ export default BottomSheet
6161

6262
const styles = StyleSheet.create({
6363
container: {
64-
...theme.shadow.ios,
64+
...shadow.normal.ios,
6565
borderTopWidth: 1 / 3,
6666
borderTopColor: theme.color.grey300,
6767
},
6868
bottomSheetContainer: {
69-
...theme.shadow.android,
69+
...shadow.normal.android,
7070
},
7171
bottomSheet: {
7272
flexDirection: 'column',

‎src/components/BrandIcon.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import React from 'react'
33
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'
44

55
import BrandIcons, { BrandIconName } from '../lib/BrandIcons'
6-
import theme from '../styles/theme'
6+
import { theme } from '../styles'
77

88
type Props = {
99
name: BrandIconName
@@ -14,7 +14,7 @@ type Props = {
1414
export const BrandIcon = ({ name, color, size }: Props) => {
1515
const icon = BrandIcons[name]
1616
const iconColor = color ?? theme.color.primary500
17-
const iconSize = size ?? theme.icon.size.large
17+
const iconSize = size ?? theme.icon.size.l
1818
const FontAwesomeIconTypeErased = FontAwesomeIcon as unknown as any
1919

2020
return <FontAwesomeIconTypeErased icon={icon} color={iconColor} size={iconSize} />

‎src/components/Checkbox.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { StyleProp, StyleSheet, TouchableOpacity, View, ViewStyle } from 'react-
33

44
import { Icon } from './Icon'
55
import Log from '../lib/Log'
6-
import theme from '../styles/theme'
6+
import { theme } from '../styles'
77

88
type Props = {
99
enabled: boolean

0 commit comments

Comments
 (0)