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