react-native-molecules 0.5.0-beta.7 → 0.5.0-beta.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/components/ActivityIndicator/ActivityIndicator.tsx +6 -15
  2. package/components/Button/Button.tsx +206 -246
  3. package/components/Button/index.tsx +9 -3
  4. package/components/Button/types.ts +16 -2
  5. package/components/Button/utils.ts +230 -207
  6. package/components/LoadingIndicator/LoadingIndicator.tsx +253 -0
  7. package/components/LoadingIndicator/LoadingIndicator.web.tsx +136 -0
  8. package/components/LoadingIndicator/index.tsx +13 -0
  9. package/components/LoadingIndicator/utils.ts +117 -0
  10. package/hooks/useSubcomponents.tsx +56 -22
  11. package/package.json +9 -2
  12. package/styles/themes/LightTheme.tsx +1 -1
package/components/Button/utils.ts CHANGED
@@ -1,32 +1,109 @@
1
- import { Platform } from 'react-native';
1
+ import { createContext } from 'react';
2
2
  import { StyleSheet } from 'react-native-unistyles';
3
3
 
4
4
  import { getRegisteredComponentStylesWithFallback } from '../../core';
5
+ import type { ButtonContextType } from './types';
5
6
 
6
7
  export const sizeToIconSizeMap = {
7
- xs: 18,
8
- sm: 22,
8
+ xs: 20,
9
+ sm: 20,
9
10
  md: 24,
10
- lg: 26,
11
+ lg: 32,
12
+ xl: 40,
11
13
  };
12
14
 
13
- const defaultStylesDefault = StyleSheet.create(theme => {
15
+ export const sizeToHeightMap = {
16
+ xs: 32,
17
+ sm: 40,
18
+ md: 56,
19
+ lg: 96,
20
+ xl: 136,
21
+ };
22
+
23
+ export const sizeToPaddingMap = {
24
+ xs: 12,
25
+ sm: 16,
26
+ md: 24,
27
+ lg: 48,
28
+ xl: 64,
29
+ };
30
+
31
+ export const sizeToIconGapMap = {
32
+ xs: 4,
33
+ sm: 8,
34
+ md: 8,
35
+ lg: 12,
36
+ xl: 16,
37
+ };
38
+
39
+ export const elevationMap: Record<string, Record<string, number>> = {
40
+ true: {
41
+ contained: 1,
42
+ 'contained-tonal': 1,
43
+ elevated: 2,
44
+ },
45
+ false: {
46
+ elevated: 1,
47
+ },
48
+ };
49
+
50
+ export const ButtonContext = createContext<ButtonContextType>({
51
+ variant: 'text',
52
+ size: 'sm',
53
+ state: 'default',
54
+ disabled: false,
55
+ labelColor: undefined,
56
+ iconSize: undefined,
57
+ });
58
+
59
+ const buttonStylesDefault = StyleSheet.create(theme => {
14
60
  return {
15
61
  root: {
62
+ flexDirection: 'row',
63
+ alignItems: 'center',
64
+ justifyContent: 'center',
65
+ borderStyle: 'solid',
16
66
  variants: {
17
67
  size: {
68
+ xs: {
69
+ minWidth: 64,
70
+ height: 32,
71
+ paddingHorizontal: 12,
72
+ gap: 4,
73
+ },
18
74
  sm: {
19
75
  minWidth: 64,
20
- borderRadius: theme.shapes.corner.full,
76
+ height: 40,
77
+ paddingHorizontal: 16,
78
+ gap: 8,
21
79
  },
22
80
  md: {
23
81
  minWidth: 64,
24
- borderRadius: theme.shapes.corner.full,
82
+ height: 56,
83
+ paddingHorizontal: 24,
84
+ gap: 8,
25
85
  },
26
86
  lg: {
27
- minWidth: 64,
87
+ minWidth: 96,
88
+ height: 96,
89
+ paddingHorizontal: 48,
90
+ gap: 12,
91
+ },
92
+ xl: {
93
+ minWidth: 136,
94
+ height: 136,
95
+ paddingHorizontal: 64,
96
+ gap: 16,
97
+ },
98
+ },
99
+ shape: {
100
+ rounded: {
28
101
  borderRadius: theme.shapes.corner.full,
29
102
  },
103
+ square: {
104
+ // Base - will be overridden by compoundVariants for size-specific radii
105
+ borderRadius: 12,
106
+ },
30
107
  },
31
108
 
32
109
  state: {
@@ -128,6 +205,42 @@ const defaultStylesDefault = StyleSheet.create(theme => {
128
205
  // elevationLevel: theme.elevations.level1,
129
206
  },
130
207
  },
208
+ // Square shape + size compound variants for border radius
209
+ {
210
+ shape: 'square',
211
+ size: 'xs',
212
+ styles: {
213
+ borderRadius: theme.shapes.corner.medium,
214
+ },
215
+ },
216
+ {
217
+ shape: 'square',
218
+ size: 'sm',
219
+ styles: {
220
+ borderRadius: theme.shapes.corner.medium,
221
+ },
222
+ },
223
+ {
224
+ shape: 'square',
225
+ size: 'md',
226
+ styles: {
227
+ borderRadius: theme.shapes.corner.large,
228
+ },
229
+ },
230
+ {
231
+ shape: 'square',
232
+ size: 'lg',
233
+ styles: {
234
+ borderRadius: theme.shapes.corner.extraLarge,
235
+ },
236
+ },
237
+ {
238
+ shape: 'square',
239
+ size: 'xl',
240
+ styles: {
241
+ borderRadius: theme.shapes.corner.extraLarge,
242
+ },
243
+ },
131
244
  ],
132
245
  },
133
246
  stateLayer: {
@@ -184,229 +297,139 @@ const defaultStylesDefault = StyleSheet.create(theme => {
184
297
  },
185
298
  ],
186
299
  },
300
+ };
301
+ });
187
302
 
188
- button: {
189
- borderStyle: 'solid',
190
- },
191
- content: {
192
- flexDirection: 'row',
193
- alignItems: 'center',
194
- justifyContent: 'center',
195
- },
196
- iconContainer: {
197
- ...(Platform.OS !== 'web'
198
- ? { marginLeft: theme.spacings['4'], marginRight: theme.spacings._4 }
199
- : {}),
200
- },
201
- icon: {
202
- ...(Platform.OS === 'web'
203
- ? { marginLeft: theme.spacings['4'], marginRight: theme.spacings._4 }
204
- : {}),
205
- variants: {
206
- state: {
207
- disabled: {
208
- color: theme.colors.onSurfaceDisabled,
209
- },
210
- hovered: {},
211
- default: {},
303
+ /**
304
+ * Styles for Button.Icon component
305
+ */
306
+ const buttonIconStylesDefault = StyleSheet.create(theme => ({
307
+ root: {
308
+ variants: {
309
+ state: {
310
+ disabled: {
311
+ color: theme.colors.onSurfaceDisabled,
312
+ },
313
+ hovered: {},
314
+ default: {},
315
+ },
316
+ variant: {
317
+ outlined: {
318
+ color: theme.colors.primary,
212
319
  },
213
- variant: {
214
- outlined: {
215
- color: theme.colors.primary,
216
- },
217
- text: {
218
- color: theme.colors.primary,
219
- },
220
- contained: {
221
- color: theme.colors.onPrimary,
222
- },
223
- elevated: {
224
- color: theme.colors.primary,
225
- },
226
- 'contained-tonal': {
227
- color: theme.colors.onSecondaryContainer,
228
- },
320
+ text: {
321
+ color: theme.colors.primary,
229
322
  },
230
- },
231
- },
232
- iconTextMode: {
233
- marginLeft: theme.spacings['3'],
234
- marginRight: theme.spacings._2,
235
- },
236
- label: {
237
- display: 'flex',
238
- alignItems: 'center',
239
- textAlign: 'center',
240
- marginVertical: theme.spacings['2l'],
241
- marginHorizontal: theme.spacings['6'],
242
- ...theme.typescale.labelLarge,
243
-
244
- variants: {
245
- size: {
246
- sm: {
247
- ...theme.typescale.labelMedium,
248
- },
249
- md: {
250
- ...theme.typescale.labelLarge,
251
- },
252
- lg: {
253
- ...theme.typescale.labelLarge,
254
- fontSize: theme.typescale.bodyLarge.fontSize,
255
- },
323
+ contained: {
324
+ color: theme.colors.onPrimary,
256
325
  },
257
- variant: {
258
- outlined: {
259
- color: theme.colors.primary,
260
- },
261
- text: {
262
- color: theme.colors.primary,
263
- },
264
- contained: {
265
- color: theme.colors.onPrimary,
266
- },
267
- elevated: {
268
- color: theme.colors.primary,
269
- },
270
- 'contained-tonal': {
271
- color: theme.colors.onSecondaryContainer,
272
- },
326
+ elevated: {
327
+ color: theme.colors.primary,
273
328
  },
274
- state: {
275
- disabled: {
276
- color: theme.colors.onSurfaceDisabled,
277
- },
278
- hovered: {},
279
- default: {},
329
+ 'contained-tonal': {
330
+ color: theme.colors.onSecondaryContainer,
280
331
  },
281
332
  },
333
+ },
334
+ },
335
+ }));
282
336
 
283
- compoundVariants: [
284
- {
285
- variant: 'outlined',
286
- state: 'disabled',
287
- styles: {
288
- color: theme.colors.stateLayer.disabled.onSurface_Level4,
289
- },
337
+ /**
338
+ * Styles for Button.Text component
339
+ */
340
+ const buttonTextStylesDefault = StyleSheet.create(theme => ({
341
+ root: {
342
+ ...theme.typescale.labelLarge,
343
+ variants: {
344
+ size: {
345
+ xs: {
346
+ ...theme.typescale.labelLarge,
290
347
  },
291
-
292
- {
293
- variant: 'text',
294
- state: 'disabled',
295
- styles: {
296
- color: theme.colors.stateLayer.disabled.onSurface_Level4,
297
- },
348
+ sm: {
349
+ ...theme.typescale.labelLarge,
298
350
  },
299
- {
300
- variant: 'contained',
301
- state: 'disabled',
302
- styles: {
303
- color: theme.colors.stateLayer.disabled.onSurface_Level4,
304
- },
351
+ md: {
352
+ ...theme.typescale.titleMedium,
305
353
  },
306
- {
307
- variant: 'elevated',
308
- state: 'disabled',
309
- styles: {
310
- color: theme.colors.stateLayer.disabled.onSurface_Level4,
311
- },
354
+ lg: {
355
+ ...theme.typescale.headlineSmall,
312
356
  },
313
-
314
- {
315
- variant: 'contained-tonal',
316
- state: 'disabled',
317
- styles: {
318
- color: theme.colors.stateLayer.disabled.onSurface_Level4,
319
- },
357
+ xl: {
358
+ ...theme.typescale.headlineLarge,
320
359
  },
321
- ],
322
- },
323
- labelText: {
324
- marginVertical: theme.spacings['2l'],
325
- marginHorizontal: theme.spacings['3'],
326
- ...theme.typescale.labelLarge,
327
-
328
- variants: {
329
- variant: {
330
- text: {
331
- color: theme.colors.primary,
332
- },
360
+ },
361
+ variant: {
362
+ text: {
363
+ color: theme.colors.primary,
333
364
  },
334
- state: {
335
- disabled: {
336
- color: theme.colors.onSurfaceDisabled,
337
- },
338
- hovered: {},
339
- default: {},
365
+ outlined: {
366
+ color: theme.colors.primary,
340
367
  },
341
- size: {
342
- sm: {
343
- ...theme.typescale.labelMedium,
344
- },
345
- md: {
346
- ...theme.typescale.labelLarge,
347
- },
348
- lg: {
349
- ...theme.typescale.labelLarge,
350
- fontSize: theme.typescale.bodyLarge.fontSize,
351
- },
368
+ contained: {
369
+ color: theme.colors.onPrimary,
370
+ },
371
+ elevated: {
372
+ color: theme.colors.primary,
373
+ },
374
+ 'contained-tonal': {
375
+ color: theme.colors.onSecondaryContainer,
352
376
  },
353
377
  },
354
-
355
- compoundVariants: [
356
- {
357
- variant: 'text',
358
- state: 'disabled',
359
- styles: {
360
- color: theme.colors.stateLayer.disabled.onSurface_Level4,
361
- },
378
+ state: {
379
+ disabled: {
380
+ color: theme.colors.onSurfaceDisabled,
362
381
  },
363
- ],
382
+ hovered: {},
383
+ default: {},
384
+ },
364
385
  },
365
- labelTextAddons: {
366
- marginVertical: theme.spacings['2l'],
367
- marginHorizontal: theme.spacings['4'],
386
+ },
387
+ }));
368
388
 
369
- variants: {
370
- variant: {
371
- text: {
372
- color: theme.colors.primary,
373
- },
389
+ const buttonActivityIndicatorStylesDefault = StyleSheet.create(theme => ({
390
+ root: {
391
+ variants: {
392
+ state: {
393
+ disabled: {
394
+ color: theme.colors.onSurfaceDisabled,
395
+ },
396
+ hovered: {},
397
+ default: {},
398
+ },
399
+ variant: {
400
+ outlined: {
401
+ color: theme.colors.primary,
374
402
  },
375
- state: {
376
- disabled: {
377
- color: theme.colors.onSurfaceDisabled,
378
- },
379
- hovered: {},
380
- default: {},
403
+ text: {
404
+ color: theme.colors.primary,
381
405
  },
382
- size: {
383
- sm: {
384
- ...theme.typescale.labelMedium,
385
- },
386
- md: {
387
- ...theme.typescale.labelLarge,
388
- },
389
- lg: {
390
- ...theme.typescale.labelLarge,
391
- fontSize: theme.typescale.bodyLarge.fontSize,
392
- },
406
+ contained: {
407
+ color: theme.colors.onPrimary,
393
408
  },
394
- },
395
-
396
- compoundVariants: [
397
- {
398
- variant: 'text',
399
- state: 'disabled',
400
- styles: {
401
- color: theme.colors.stateLayer.disabled.onSurface_Level4,
402
- },
409
+ elevated: {
410
+ color: theme.colors.primary,
403
411
  },
404
- ],
412
+ 'contained-tonal': {
413
+ color: theme.colors.onSecondaryContainer,
414
+ },
415
+ },
405
416
  },
406
- };
407
- });
417
+ },
418
+ }));
419
+
420
+ export const buttonStyles = getRegisteredComponentStylesWithFallback('Button', buttonStylesDefault);
421
+
422
+ export const buttonIconStyles = getRegisteredComponentStylesWithFallback(
423
+ 'ButtonIcon',
424
+ buttonIconStylesDefault,
425
+ );
426
+
427
+ export const buttonTextStyles = getRegisteredComponentStylesWithFallback(
428
+ 'ButtonText',
429
+ buttonTextStylesDefault,
430
+ );
408
431
 
409
- export const defaultStyles = getRegisteredComponentStylesWithFallback(
410
- 'Button',
411
- defaultStylesDefault,
432
+ export const buttonActivityIndicatorStyles = getRegisteredComponentStylesWithFallback(
433
+ 'ButtonActivityIndicator',
434
+ buttonActivityIndicatorStylesDefault,
412
435
  );