1import { lightTheme, darkTheme, shadows } 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, 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    ...padding,
91    ...margin,
92  },
93
94  selectors: {
95    dark: {
96      bg: bgDark,
97    },
98  },
99});
100
101const Horizontal = create(RNView, {
102  base: {
103    flex: 1,
104  },
105  variants: {
106    size: {
107      micro: { width: scale.micro, flex: 0 },
108      tiny: { width: scale.tiny, flex: 0 },
109      small: { width: scale.small, flex: 0 },
110      medium: { width: scale.medium, flex: 0 },
111      large: { width: scale.large, flex: 0 },
112      xl: { width: scale.xl, flex: 0 },
113    },
114  },
115});
116
117const Vertical = create(RNView, {
118  base: {
119    flex: 1,
120  },
121  variants: {
122    size: {
123      micro: { height: scale.micro, flex: 0 },
124      tiny: { height: scale.tiny, flex: 0 },
125      small: { height: scale.small, flex: 0 },
126      medium: { height: scale.medium, flex: 0 },
127      large: { height: scale.large, flex: 0 },
128      xl: { height: scale.xl, flex: 0 },
129    },
130  },
131});
132
133export const Spacer = {
134  Vertical,
135  Horizontal,
136};
137
138export const Divider = create(RNView, {
139  base: {
140    borderWidth: 0.5,
141    borderColor: lightTheme.border.default,
142  },
143
144  variants: {
145    weight: {
146      thin: { borderWidth: 0.5 },
147      normal: { borderWidth: 1 },
148      heavy: { borderWidth: 2 },
149    },
150
151    ...margin,
152  },
153
154  selectors: {
155    dark: {
156      borderColor: darkTheme.border.default,
157    },
158  },
159});
160
161export const StatusIndicator = create(RNView, {
162  base: {
163    backgroundColor: lightTheme.status.default,
164    borderRadius: 9999,
165  },
166
167  variants: {
168    status: {
169      info: { backgroundColor: lightTheme.status.info },
170      success: { backgroundColor: lightTheme.status.success },
171      warning: { backgroundColor: lightTheme.status.warning },
172      error: { backgroundColor: lightTheme.status.error },
173      default: { backgroundColor: lightTheme.status.default },
174    },
175
176    size: {
177      small: {
178        width: scale.small,
179        height: scale.small,
180      },
181      medium: {
182        width: scale.medium,
183        height: scale.medium,
184      },
185    },
186  },
187
188  selectors: {
189    dark: {
190      info: { backgroundColor: darkTheme.status.info },
191      success: { backgroundColor: darkTheme.status.success },
192      warning: { backgroundColor: darkTheme.status.warning },
193      error: { backgroundColor: darkTheme.status.error },
194      default: { backgroundColor: darkTheme.status.default },
195    },
196  },
197});
198