1import { lightTheme, darkTheme, shadows } from '@expo/styleguide-native';
2import { View as RNView, StyleSheet } from 'react-native';
3
4import { create } from './create-primitive';
5import { scale, padding, margin, rounded, bg, bgDark, width, height } from './theme';
6
7export const View = create(RNView, {
8  variants: {
9    overflow: {
10      hidden: {
11        overflow: 'hidden',
12      },
13    },
14
15    align: {
16      centered: {
17        justifyContent: 'center',
18        alignItems: 'center',
19      },
20      start: {
21        alignItems: 'flex-start',
22      },
23    },
24
25    flex: {
26      '1': { flex: 1 },
27      '0': { flex: 0 },
28    },
29
30    shrink: {
31      '1': { flexShrink: 1 },
32      '0': { flexShrink: 0 },
33    },
34
35    grow: {
36      '1': { flexGrow: 1 },
37      '0': { flexGrow: 0 },
38    },
39
40    bg,
41
42    border: {
43      default: { borderColor: lightTheme.border.default, borderWidth: 1 },
44      hairline: { borderColor: lightTheme.border.default, borderWidth: StyleSheet.hairlineWidth },
45    },
46
47    ...rounded,
48
49    shadow: {
50      micro: shadows.micro,
51      tiny: shadows.tiny,
52      small: shadows.small,
53      medium: shadows.medium,
54      button: shadows.button,
55    },
56
57    width,
58    height,
59
60    ...padding,
61    ...margin,
62  },
63
64  selectors: {
65    dark: {
66      bg: bgDark,
67
68      border: {
69        default: { borderColor: darkTheme.border.default, borderWidth: 1 },
70        hairline: { borderColor: darkTheme.border.default, borderWidth: StyleSheet.hairlineWidth },
71      },
72    },
73
74    light: {
75      bg: {},
76    },
77  },
78});
79
80export const Row = create(RNView, {
81  base: {
82    flexDirection: 'row',
83  },
84
85  variants: {
86    bg,
87
88    align: {
89      center: { alignItems: 'center' },
90      start: { alignItems: 'flex-start' },
91      end: { alignItems: 'flex-end' },
92    },
93
94    justify: {
95      center: { justifyContent: 'center' },
96      start: { justifyContent: 'flex-start' },
97      end: { justifyContent: 'flex-end' },
98      between: { justifyContent: 'space-between' },
99      around: { justifyContent: 'space-around' },
100    },
101
102    ...padding,
103    ...margin,
104
105    ...rounded,
106  },
107
108  selectors: {
109    dark: {
110      bg: bgDark,
111    },
112  },
113});
114
115const Horizontal = create(RNView, {
116  base: {
117    flex: 1,
118  },
119  variants: {
120    size: {
121      micro: { width: scale.micro, flex: 0 },
122      tiny: { width: scale.tiny, flex: 0 },
123      small: { width: scale.small, flex: 0 },
124      medium: { width: scale.medium, flex: 0 },
125      large: { width: scale.large, flex: 0 },
126      xl: { width: scale.xl, flex: 0 },
127    },
128  },
129});
130
131const Vertical = create(RNView, {
132  base: {
133    flex: 1,
134  },
135  variants: {
136    size: {
137      micro: { height: scale.micro, flex: 0 },
138      tiny: { height: scale.tiny, flex: 0 },
139      small: { height: scale.small, flex: 0 },
140      medium: { height: scale.medium, flex: 0 },
141      large: { height: scale.large, flex: 0 },
142      xl: { height: scale.xl, flex: 0 },
143    },
144  },
145});
146
147export const Spacer = {
148  Vertical,
149  Horizontal,
150};
151
152export const Divider = create(RNView, {
153  base: {
154    height: StyleSheet.hairlineWidth,
155    backgroundColor: lightTheme.border.default,
156  },
157
158  variants: {
159    weight: {
160      thin: { height: StyleSheet.hairlineWidth },
161      normal: { height: 1 },
162      heavy: { height: 2 },
163    },
164
165    ...margin,
166  },
167
168  selectors: {
169    dark: {
170      base: {
171        height: StyleSheet.hairlineWidth,
172        backgroundColor: darkTheme.border.default,
173      },
174    },
175  },
176});
177
178export const StatusIndicator = create(RNView, {
179  base: {
180    backgroundColor: lightTheme.status.default,
181    borderRadius: 9999,
182  },
183
184  variants: {
185    status: {
186      info: { backgroundColor: lightTheme.status.info },
187      success: { backgroundColor: lightTheme.status.success },
188      warning: { backgroundColor: lightTheme.status.warning },
189      error: { backgroundColor: lightTheme.status.error },
190      default: { backgroundColor: lightTheme.status.default },
191    },
192
193    size: {
194      small: {
195        width: scale.small,
196        height: scale.small,
197      },
198      medium: {
199        width: scale.medium,
200        height: scale.medium,
201      },
202    },
203  },
204
205  selectors: {
206    dark: {
207      info: { backgroundColor: darkTheme.status.info },
208      success: { backgroundColor: darkTheme.status.success },
209      warning: { backgroundColor: darkTheme.status.warning },
210      error: { backgroundColor: darkTheme.status.error },
211      default: { backgroundColor: darkTheme.status.default },
212    },
213  },
214});
215