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