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