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