app-studio 0.1.44 → 0.2.2

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.
@@ -1,954 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
6
-
7
- var React = require('react');
8
- var React__default = _interopDefault(React);
9
- var Color = _interopDefault(require('color-convert'));
10
- var styled = _interopDefault(require('styled-components'));
11
-
12
- const palette = {
13
- white: {
14
- 50: 'rgba(255, 255, 255, 0.04)',
15
- 100: 'rgba(255, 255, 255, 0.08)',
16
- 200: 'rgba(255, 255, 255, 0.16)',
17
- 300: 'rgba(255, 255, 255, 0.24)',
18
- 400: 'rgba(255, 255, 255, 0.36)',
19
- 500: 'rgba(255, 255, 255, 0.48)',
20
- 600: 'rgba(255, 255, 255, 0.64)',
21
- 700: 'rgba(255, 255, 255, 0.80)',
22
- 800: 'rgba(255, 255, 255, 0.92)',
23
- 900: 'rgba(255, 255, 255, 1)'
24
- },
25
- black: {
26
- 50: 'rgba(0, 0, 0, 0.04)',
27
- 100: 'rgba(0, 0, 0, 0.08)',
28
- 200: 'rgba(0, 0, 0, 0.16)',
29
- 300: 'rgba(0, 0, 0, 0.24)',
30
- 400: 'rgba(0, 0, 0, 0.36)',
31
- 500: 'rgba(0, 0, 0, 0.48)',
32
- 600: 'rgba(0, 0, 0, 0.64)',
33
- 700: 'rgba(0, 0, 0, 0.80)',
34
- 800: 'rgba(0, 0, 0, 0.92)',
35
- 900: 'rgba(0, 0, 0, 1)'
36
- },
37
- rose: {
38
- 50: '#fff1f2',
39
- 100: '#ffe4e6',
40
- 200: '#fecdd3',
41
- 300: '#fda4af',
42
- 400: '#fb7185',
43
- 500: '#f43f5e',
44
- 600: '#e11d48',
45
- 700: '#be123c',
46
- 800: '#9f1239',
47
- 900: '#881337'
48
- },
49
- pink: {
50
- 50: '#fdf2f8',
51
- 100: '#fce7f3',
52
- 200: '#fbcfe8',
53
- 300: '#f9a8d4',
54
- 400: '#f472b6',
55
- 500: '#ec4899',
56
- 600: '#db2777',
57
- 700: '#be185d',
58
- 800: '#9d174d',
59
- 900: '#831843'
60
- },
61
- fuchsia: {
62
- 50: '#fdf4ff',
63
- 100: '#fae8ff',
64
- 200: '#f5d0fe',
65
- 300: '#f0abfc',
66
- 400: '#e879f9',
67
- 500: '#d946ef',
68
- 600: '#c026d3',
69
- 700: '#a21caf',
70
- 800: '#86198f',
71
- 900: '#701a75'
72
- },
73
- purple: {
74
- 50: '#faf5ff',
75
- 100: '#f3e8ff',
76
- 200: '#e9d5ff',
77
- 300: '#d8b4fe',
78
- 400: '#c084fc',
79
- 500: '#a855f7',
80
- 600: '#9333ea',
81
- 700: '#7e22ce',
82
- 800: '#6b21a8',
83
- 900: '#581c87'
84
- },
85
- violet: {
86
- 50: '#f5f3ff',
87
- 100: '#ede9fe',
88
- 200: '#ddd6fe',
89
- 300: '#c4b5fd',
90
- 400: '#a78bfa',
91
- 500: '#8b5cf6',
92
- 600: '#7c3aed',
93
- 700: '#6d28d9',
94
- 800: '#5b21b6',
95
- 900: '#4c1d95'
96
- },
97
- indigo: {
98
- 50: '#eef2ff',
99
- 100: '#e0e7ff',
100
- 200: '#c7d2fe',
101
- 300: '#a5b4fc',
102
- 400: '#818cf8',
103
- 500: '#6366f1',
104
- 600: '#4f46e5',
105
- 700: '#4338ca',
106
- 800: '#3730a3',
107
- 900: '#312e81'
108
- },
109
- blue: {
110
- 50: '#eff6ff',
111
- 100: '#dbeafe',
112
- 200: '#bfdbfe',
113
- 300: '#93c5fd',
114
- 400: '#60a5fa',
115
- 500: '#3b82f6',
116
- 600: '#2563eb',
117
- 700: '#1d4ed8',
118
- 800: '#1e40af',
119
- 900: '#1e3a8a'
120
- },
121
- lightBlue: {
122
- 50: '#f0f9ff',
123
- 100: '#e0f2fe',
124
- 200: '#bae6fd',
125
- 300: '#7dd3fc',
126
- 400: '#38bdf8',
127
- 500: '#0ea5e9',
128
- 600: '#0284c7',
129
- 700: '#0369a1',
130
- 800: '#075985',
131
- 900: '#0c4a6e'
132
- },
133
- cyan: {
134
- 50: '#ecfeff',
135
- 100: '#cffafe',
136
- 200: '#a5f3fc',
137
- 300: '#67e8f9',
138
- 400: '#22d3ee',
139
- 500: '#06b6d4',
140
- 600: '#0891b2',
141
- 700: '#0e7490',
142
- 800: '#155e75',
143
- 900: '#164e63'
144
- },
145
- teal: {
146
- 50: '#f0fdfa',
147
- 100: '#ccfbf1',
148
- 200: '#99f6e4',
149
- 300: '#5eead4',
150
- 400: '#2dd4bf',
151
- 500: '#14b8a6',
152
- 600: '#0d9488',
153
- 700: '#0f766e',
154
- 800: '#115e59',
155
- 900: '#134e4a'
156
- },
157
- emerald: {
158
- 50: '#ecfdf5',
159
- 100: '#d1fae5',
160
- 200: '#a7f3d0',
161
- 300: '#6ee7b7',
162
- 400: '#34d399',
163
- 500: '#10b981',
164
- 600: '#059669',
165
- 700: '#047857',
166
- 800: '#065f46',
167
- 900: '#064e3b'
168
- },
169
- green: {
170
- 50: '#f0fdf4',
171
- 100: '#dcfce7',
172
- 200: '#bbf7d0',
173
- 300: '#86efac',
174
- 400: '#4ade80',
175
- 500: '#22c55e',
176
- 600: '#16a34a',
177
- 700: '#15803d',
178
- 800: '#166534',
179
- 900: '#14532d'
180
- },
181
- lime: {
182
- 50: '#f7fee7',
183
- 100: '#ecfccb',
184
- 200: '#d9f99d',
185
- 300: '#bef264',
186
- 400: '#a3e635',
187
- 500: '#84cc16',
188
- 600: '#65a30d',
189
- 700: '#4d7c0f',
190
- 800: '#3f6212',
191
- 900: '#365314'
192
- },
193
- yellow: {
194
- 50: '#fefce8',
195
- 100: '#fef9c3',
196
- 200: '#fef08a',
197
- 300: '#fde047',
198
- 400: '#facc15',
199
- 500: '#eab308',
200
- 600: '#ca8a04',
201
- 700: '#a16207',
202
- 800: '#854d0e',
203
- 900: '#713f12'
204
- },
205
- amber: {
206
- 50: '#fffbeb',
207
- 100: '#fef3c7',
208
- 200: '#fde68a',
209
- 300: '#fcd34d',
210
- 400: '#fbbf24',
211
- 500: '#f59e0b',
212
- 600: '#d97706',
213
- 700: '#b45309',
214
- 800: '#92400e',
215
- 900: '#78350f'
216
- },
217
- orange: {
218
- 50: '#fff7ed',
219
- 100: '#ffedd5',
220
- 200: '#fed7aa',
221
- 300: '#fdba74',
222
- 400: '#fb923c',
223
- 500: '#f97316',
224
- 600: '#ea580c',
225
- 700: '#c2410c',
226
- 800: '#9a3412',
227
- 900: '#7c2d12'
228
- },
229
- red: {
230
- 50: '#fef2f2',
231
- 100: '#fee2e2',
232
- 200: '#fecaca',
233
- 300: '#fca5a5',
234
- 400: '#f87171',
235
- 500: '#ef4444',
236
- 600: '#dc2626',
237
- 700: '#b91c1c',
238
- 800: '#991b1b',
239
- 900: '#7f1d1d'
240
- },
241
- warmGray: {
242
- 50: '#fafaf9',
243
- 100: '#f5f5f4',
244
- 200: '#e7e5e4',
245
- 300: '#d6d3d1',
246
- 400: '#a8a29e',
247
- 500: '#78716c',
248
- 600: '#57534e',
249
- 700: '#44403c',
250
- 800: '#292524',
251
- 900: '#1c1917'
252
- },
253
- trueGray: {
254
- 50: '#fafafa',
255
- 100: '#f5f5f5',
256
- 200: '#e5e5e5',
257
- 300: '#d4d4d4',
258
- 400: '#a3a3a3',
259
- 500: '#737373',
260
- 600: '#525252',
261
- 700: '#404040',
262
- 800: '#262626',
263
- 900: '#171717'
264
- },
265
- gray: {
266
- 50: '#fafafa',
267
- 100: '#f4f4f5',
268
- 200: '#e4e4e7',
269
- 300: '#d4d4d8',
270
- 400: '#a1a1aa',
271
- 500: '#71717a',
272
- 600: '#52525b',
273
- 700: '#3f3f46',
274
- 800: '#27272a',
275
- 900: '#18181b'
276
- },
277
- dark: {
278
- 50: '#18181b',
279
- 100: '#27272a',
280
- 200: '#3f3f46',
281
- 300: '#52525b',
282
- 400: '#71717a',
283
- 500: '#a1a1aa',
284
- 600: '#d4d4d8',
285
- 700: '#e4e4e7',
286
- 800: '#f4f4f5',
287
- 900: '#fafafa'
288
- },
289
- coolGray: {
290
- 50: '#f9fafb',
291
- 100: '#f3f4f6',
292
- 200: '#e5e7eb',
293
- 300: '#d1d5db',
294
- 400: '#9ca3af',
295
- 500: '#6b7280',
296
- 600: '#4b5563',
297
- 700: '#374151',
298
- 800: '#1f2937',
299
- 900: '#111827'
300
- },
301
- blueGray: {
302
- 50: '#f8fafc',
303
- 100: '#f1f5f9',
304
- 200: '#e2e8f0',
305
- 300: '#cbd5e1',
306
- 400: '#94a3b8',
307
- 500: '#64748b',
308
- 600: '#475569',
309
- 700: '#334155',
310
- 800: '#1e293b',
311
- 900: '#0f172a'
312
- }
313
- };
314
-
315
- const defaultThemeMain = {
316
- primary: 'color.black',
317
- secondary: 'color.blue',
318
- success: 'color.green.500',
319
- error: 'color.red.500',
320
- warning: 'color.orange.500',
321
- disabled: 'color.gray.500',
322
- loading: 'color.dark.500'
323
- };
324
- const defaultColors = {
325
- white: '#FFFFFF',
326
- black: '#000000',
327
- red: '#FF0000',
328
- green: '#00FF00',
329
- blue: '#0000FF',
330
- yellow: '#FFFF00',
331
- cyan: '#00FFFF',
332
- magenta: '#FF00FF',
333
- grey: '#808080',
334
- orange: '#FFA500',
335
- brown: '#A52A2A',
336
- purple: '#800080',
337
- pink: '#FFC0CB',
338
- lime: '#00FF00',
339
- teal: '#008080',
340
- navy: '#000080',
341
- olive: '#808000',
342
- maroon: '#800000',
343
- gold: '#FFD700',
344
- silver: '#C0C0C0',
345
- indigo: '#4B0082',
346
- violet: '#EE82EE',
347
- beige: '#F5F5DC',
348
- turquoise: '#40E0D0',
349
- coral: '#FF7F50',
350
- chocolate: '#D2691E',
351
- skyBlue: '#87CEEB',
352
- plum: '#DDA0DD',
353
- darkGreen: '#006400',
354
- salmon: '#FA8072'
355
- };
356
- const ThemeContext = /*#__PURE__*/React.createContext({
357
- getColor: name => {
358
- return name;
359
- },
360
- colors: {
361
- main: defaultColors,
362
- palette: palette
363
- },
364
- theme: {
365
- main: defaultThemeMain,
366
- components: {}
367
- }
368
- });
369
- const useTheme = () => React.useContext(ThemeContext);
370
- const ThemeProvider = _ref => {
371
- let {
372
- theme = {
373
- main: defaultThemeMain,
374
- components: {}
375
- },
376
- colors = {
377
- main: defaultColors,
378
- palette: palette
379
- },
380
- children
381
- } = _ref;
382
- const getColor = name => {
383
- if (name === 'transparent') return name;
384
- try {
385
- // Si le nom commence par "theme.", nous recherchons dans les couleurs du thème
386
- if (name.startsWith('theme.')) {
387
- const keys = name.split('.');
388
- if (keys[1] !== undefined && typeof theme.components[keys[1]] == 'object' && theme.components[keys[1]][keys[2]] !== undefined) {
389
- return getColor(theme.components[keys[1]][keys[2]]);
390
- } else if (theme.main[keys[1]] && theme.main[keys[1]] !== undefined) {
391
- return getColor(theme.main[keys[1]]);
392
- } else {
393
- console.log('Color ' + name + ' not found');
394
- }
395
- }
396
- // Si le nom commence par "color.", nous recherchons dans la palette
397
- else if (name.startsWith('color.')) {
398
- const keys = name.split('.'); // Retirer le préfixe "color."
399
- if (colors.palette && colors.palette[keys[1]][keys[2]] !== undefined) {
400
- return colors.palette[keys[1]][keys[2]];
401
- } else if (colors.palette && colors.palette[keys[1]][parseInt(keys[2])] !== undefined) {
402
- return colors.palette[keys[1]][parseInt(keys[2])];
403
- } else if (colors.main && colors.main[keys[1]] !== undefined) {
404
- return colors.main[keys[1]];
405
- } else {
406
- console.log('Color ' + name + ' not found');
407
- }
408
- }
409
- } catch (e) {}
410
- return name;
411
- };
412
- return /*#__PURE__*/React__default.createElement(ThemeContext.Provider, {
413
- value: {
414
- getColor,
415
- theme: {
416
- main: {
417
- ...defaultThemeMain,
418
- ...theme.main
419
- },
420
- components: {
421
- ...theme.components
422
- }
423
- },
424
- colors: {
425
- main: {
426
- ...defaultColors,
427
- ...colors.main
428
- },
429
- palette: {
430
- ...palette,
431
- ...colors.palette
432
- }
433
- }
434
- }
435
- }, children);
436
- };
437
-
438
- const Shadows = {
439
- 0: {
440
- shadowColor: '#000',
441
- shadowOffset: {
442
- width: 1,
443
- height: 2
444
- },
445
- shadowOpacity: 0.18,
446
- shadowRadius: 1.0
447
- },
448
- 1: {
449
- shadowColor: '#000',
450
- shadowOffset: {
451
- width: 2,
452
- height: 2
453
- },
454
- shadowOpacity: 0.2,
455
- shadowRadius: 1.41
456
- },
457
- 2: {
458
- shadowColor: '#000',
459
- shadowOffset: {
460
- width: 3,
461
- height: 3
462
- },
463
- shadowOpacity: 0.22,
464
- shadowRadius: 2.22
465
- },
466
- 3: {
467
- shadowColor: '#000',
468
- shadowOffset: {
469
- width: 4,
470
- height: 4
471
- },
472
- shadowOpacity: 0.23,
473
- shadowRadius: 2.62
474
- },
475
- 4: {
476
- shadowColor: '#000',
477
- shadowOffset: {
478
- width: 5,
479
- height: 5
480
- },
481
- shadowOpacity: 0.25,
482
- shadowRadius: 3.84
483
- },
484
- 5: {
485
- shadowColor: '#000',
486
- shadowOffset: {
487
- width: 6,
488
- height: 6
489
- },
490
- shadowOpacity: 0.27,
491
- shadowRadius: 4.65
492
- },
493
- 6: {
494
- shadowColor: '#000',
495
- shadowOffset: {
496
- width: 7,
497
- height: 7
498
- },
499
- shadowOpacity: 0.29,
500
- shadowRadius: 4.65
501
- },
502
- 7: {
503
- shadowColor: '#000',
504
- shadowOffset: {
505
- width: 8,
506
- height: 8
507
- },
508
- shadowOpacity: 0.3,
509
- shadowRadius: 4.65
510
- },
511
- 8: {
512
- shadowColor: '#000',
513
- shadowOffset: {
514
- width: 9,
515
- height: 9
516
- },
517
- shadowOpacity: 0.32,
518
- shadowRadius: 5.46
519
- },
520
- 9: {
521
- shadowColor: '#000',
522
- shadowOffset: {
523
- width: 10,
524
- height: 10
525
- },
526
- shadowOpacity: 0.34,
527
- shadowRadius: 6.27
528
- }
529
- };
530
-
531
- const StyleProps = /*#__PURE__*/new Set(['alignContent', 'alignItems', 'alignSelf', 'alignmentBaseline', 'all', 'animation', 'animationDelay', 'animationDirection', 'animationDuration', 'animationFillMode', 'animationIterationCount', 'animationName', 'animationPlayState', 'animationTimingFunction', 'appearance', 'backdropFilter', 'backfaceVisibility', 'background', 'backgroundAttachment', 'backgroundBlendMode', 'backgroundClip', 'backgroundColor', 'backgroundImage', 'backgroundOrigin', 'backgroundPosition', 'backgroundPositionX', 'backgroundPositionY', 'backgroundRepeat', 'backgroundRepeatX', 'backgroundRepeatY', 'backgroundSize', 'baselineShift', 'blockSize', 'border', 'borderBlockEnd', 'borderBlockEndColor', 'borderBlockEndStyle', 'borderBlockEndWidth', 'borderBlockStart', 'borderBlockStartColor', 'borderBlockStartStyle', 'borderBlockStartWidth', 'borderBottom', 'borderBottomColor', 'borderBottomLeftRadius', 'borderBottomRightRadius', 'borderBottomStyle', 'borderBottomWidth', 'borderCollapse', 'borderColor', 'borderImage', 'borderImageOutset', 'borderImageRepeat', 'borderImageSlice', 'borderImageSource', 'borderImageWidth', 'borderInlineEnd', 'borderInlineEndColor', 'borderInlineEndStyle', 'borderInlineEndWidth', 'borderInlineStart', 'borderInlineStartColor', 'borderInlineStartStyle', 'borderInlineStartWidth', 'borderLeft', 'borderLeftColor', 'borderLeftStyle', 'borderLeftWidth', 'borderRadius', 'borderRight', 'borderRightColor', 'borderRightStyle', 'borderRightWidth', 'borderSpacing', 'borderStyle', 'borderTop', 'borderTopColor', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderTopStyle', 'borderTopWidth', 'borderWidth', 'bottom', 'boxShadow', 'boxSizing', 'breakAfter', 'breakBefore', 'breakInside', 'bufferedRendering', 'captionSide', 'caretColor', 'clear', 'clip', 'clipPath', 'clipRule', 'color', 'colorInterpolation', 'colorInterpolationFilters', 'colorRendering', 'columnCount', 'columnFill', 'columnGap', 'columnRule', 'columnRuleColor', 'columnRuleStyle', 'columnRuleWidth', 'columnSpan', 'columnWidth', 'columns', 'contain', 'content', 'counterIncrement', 'counterReset', 'cursor', 'cx', 'cy', 'd', 'direction', 'display', 'dominantBaseline', 'emptyCells', 'fill', 'fillOpacity', 'fillRule', 'filter', 'flex', 'flexBasis', 'flexDirection', 'flexFlow', 'flexGrow', 'flexShrink', 'flexWrap', 'float', 'floodColor', 'floodOpacity', 'font', 'fontDisplay', 'fontFamily', 'fontFeatureSettings', 'fontKerning', 'fontSize', 'fontStretch', 'fontStyle', 'fontVariant', 'fontVariantCaps', 'fontVariantEastAsian', 'fontVariantLigatures', 'fontVariantNumeric', 'fontVariationSettings', 'fontWeight', 'gap', 'grid', 'gridArea', 'gridAutoColumns', 'gridAutoFlow', 'gridAutoRows', 'gridColumn', 'gridColumnEnd', 'gridColumnGap', 'gridColumnStart', 'gridGap', 'gridRow', 'gridRowEnd', 'gridRowGap', 'gridRowStart', 'gridTemplate', 'gridTemplateAreas', 'gridTemplateColumns', 'gridTemplateRows', 'height', 'hyphens', 'imageRendering', 'inlineSize', 'isolation', 'justifyContent', 'justifyItems', 'justifySelf', 'left', 'letterSpacing', 'lightingColor', 'lineBreak', 'lineHeight', 'listStyle', 'listStyleImage', 'listStylePosition', 'listStyleType', 'margin', 'marginBlockEnd', 'marginBlockStart', 'marginBottom', 'marginInlineEnd', 'marginInlineStart', 'marginLeft', 'marginRight', 'marginTop', 'marker', 'markerEnd', 'markerMid', 'markerStart', 'mask', 'maskType', 'maxBlockSize', 'maxHeight', 'maxInlineSize', 'maxWidth', 'maxZoom', 'minBlockSize', 'minHeight', 'minInlineSize', 'minWidth', 'minZoom', 'mixBlendMode', 'objectFit', 'objectPosition', 'offset', 'offsetDistance', 'offsetPath', 'offsetRotate', 'opacity', 'order', 'orientation', 'orphans', 'outline', 'outlineColor', 'outlineOffset', 'outlineStyle', 'outlineWidth', 'overflow', 'overflowAnchor', 'overflowWrap', 'overflowX', 'overflowY', 'overscrollBehavior', 'overscrollBehaviorBlock', 'overscrollBehaviorInline', 'overscrollBehaviorX', 'overscrollBehaviorY', 'padding', 'paddingBlockEnd', 'paddingBlockStart', 'paddingBottom', 'paddingInlineEnd', 'paddingInlineStart', 'paddingLeft', 'paddingRight', 'paddingTop', 'page', 'pageBreakAfter', 'pageBreakBefore', 'pageBreakInside', 'paintOrder', 'perspective', 'perspectiveOrigin', 'placeContent', 'placeItems', 'placeSelf', 'pointerEvents', 'position', 'quotes', 'r', 'resize', 'right', 'rowGap', 'rx', 'ry', 'scrollBehavior', 'scrollMargin', 'scrollMarginBlock', 'scrollMarginBlockEnd', 'scrollMarginBlockStart', 'scrollMarginBottom', 'scrollMarginInline', 'scrollMarginInlineEnd', 'scrollMarginInlineStart', 'scrollMarginLeft', 'scrollMarginRight', 'scrollMarginTop', 'scrollPadding', 'scrollPaddingBlock', 'scrollPaddingBlockEnd', 'scrollPaddingBlockStart', 'scrollPaddingBottom', 'scrollPaddingInline', 'scrollPaddingInlineEnd', 'scrollPaddingInlineStart', 'scrollPaddingLeft', 'scrollPaddingRight', 'scrollPaddingTop', 'scrollSnapAlign', 'scrollSnapStop', 'scrollSnapType', 'shapeImageThreshold', 'shapeMargin', 'shapeOutside', 'shapeRendering', 'size', 'speak', 'src', 'stopColor', 'stopOpacity', 'stroke', 'strokeDasharray', 'strokeDashoffset', 'strokeLinecap', 'strokeLinejoin', 'strokeMiterlimit', 'strokeOpacity', 'strokeWidth', 'tabSize', 'tableLayout', 'textAlign', 'textAlignLast', 'textAnchor', 'textCombineUpright', 'textDecoration', 'textDecorationColor', 'textDecorationLine', 'textDecorationSkipInk', 'textDecorationStyle', 'textIndent', 'textOrientation', 'textOverflow', 'textRendering', 'textShadow', 'textSizeAdjust', 'textTransform', 'textUnderlinePosition', 'top', 'touchAction', 'transform', 'transformBox', 'transformOrigin', 'transformStyle', 'transition', 'transitionDelay', 'transitionDuration', 'transitionProperty', 'transitionTimingFunction', 'unicodeBidi', 'unicodeRange', 'userSelect', 'userZoom', 'vectorEffect', 'verticalAlign', 'visibility', 'whiteSpace', 'widows', 'width', 'willChange', 'wordBreak', 'wordSpacing', 'wordWrap', 'writingMode', 'x', 'y', 'zIndex', 'zoom', 'alwaysBounceHorizontal', 'alwaysBounceVertical', 'automaticallyAdjustContentInsets', 'bounces', 'bouncesZoom', 'canCancelContentTouches', 'centerContent', 'contentLayoutStyle', 'contentInset', 'contentInsetAdjustmentBehavior', 'contentOffset', 'decelerationRate', 'directionalLockEnabled', 'disableIntervalMomentum', 'disableScrollViewPanResponder', 'endFillColor', 'fadingEdgeLength', 'horizontal', 'indicatorStyle', 'invertStickyHeaders', 'keyboardDismissMode', 'keyboardShouldPersistTaps', 'maintainVisibleContentPosition', 'maximumZoomScale', 'minimumZoomScale', 'nestedScrollEnabled', 'onContentSizeChange', 'onMomentumScrollBegin', 'onMomentumScrollEnd', 'onScroll', 'onScrollBeginDrag', 'onScrollEndDrag', 'onScrollToTop', 'overScrollMode', 'pagingEnabled', 'persistentScrollbar', 'pinchGestureEnabled', 'refreshControl', 'removeClippedSubviews', 'scrollBarThumbImage', 'scrollEnabled', 'scrollEventThrottle', 'scrollIndicatorInsets', 'scrollPerfTag', 'scrollToOverflowEnabled', 'scrollsToTop', 'DEPRECATED_sendUpdatedChildFrames', 'showsHorizontalScrollIndicator', 'showsVerticalScrollIndicator', 'snapToAlignment', 'snapToEnd', 'snapToInterval', 'snapToOffsets', 'snapToStart', 'stickyHeaderIndices', 'zoomScale', 'borderRightColor', 'backfaceVisibility', 'borderBottomColor', 'borderBottomEndRadius', 'borderBottomLeftRadius', 'borderBottomRightRadius', 'borderBottomStartRadius', 'borderBottomWidth', 'borderColor', 'borderEndColor', 'borderLeftColor', 'borderLeftWidth', 'borderRadius', 'backgroundColor', 'borderRightWidth', 'borderStartColor', 'borderStyle', 'borderTopColor', 'borderTopEndRadius', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderTopStartRadius', 'borderTopWidth', 'borderWidth', 'border', 'opacity', 'elevation', 'shadowColor', 'shadowOffset', 'shadowOpacity', 'shadowRadius', 'alignContent', 'alignItems', 'alignSelf', 'aspectRatio', 'borderBottomWidth', 'borderEndWidth', 'borderLeftWidth', 'borderRightWidth', 'borderStartWidth', 'borderTopWidth', 'borderWidth', 'bottom', 'direction', 'display', 'end', 'flex', 'flexBasis', 'flexDirection', 'flexGrow', 'flexShrink', 'flexWrap', 'height', 'justifyContent', 'left', 'margin', 'marginBottom', 'marginEnd', 'marginHorizontal', 'marginLeft', 'marginRight', 'marginStart', 'marginTop', 'marginVertical', 'maxHeight', 'maxWidth', 'minHeight', 'minWidth', 'overflow', 'overflowX', 'overflowY', 'padding', 'paddingBottom', 'paddingEnd', 'paddingHorizontal', 'paddingLeft', 'paddingRight', 'paddingStart', 'paddingTop', 'paddingVertical', 'position', 'right', 'start', 'top', 'width', 'zIndex', 'borderTopRightRadius', 'backfaceVisibility', 'borderBottomLeftRadius', 'borderBottomRightRadius', 'borderColor', 'borderRadius', 'borderTopLeftRadius', 'backgroundColor', 'borderWidth', 'opacity', 'overflow', 'overflowX', 'overflowY', 'resizeMode', 'tintColor', 'overlayColor', 'transform', 'transformMatrix', 'rotation', 'scaleX', 'scaleY', 'translateX', 'translateY', 'perspective', 'rotate', 'rotateX', 'rotateY', 'rotateZ', 'scale', 'skewX', 'skewY', 'testID', 'decomposedMatrix']);
532
- const nonStyleAttributes = /*#__PURE__*/new Set(['length', 'parentRule', 'src']);
533
- const isStyleProp = property => {
534
- return StyleProps.has(property) || nonStyleAttributes.has(property);
535
- };
536
-
537
- const defaultBreakpointsConfig = {
538
- xs: 0,
539
- sm: 340,
540
- md: 560,
541
- lg: 1080,
542
- xl: 1300
543
- };
544
- const defaultDeviceConfig = {
545
- mobile: ['xs', 'sm'],
546
- tablet: ['md', 'lg'],
547
- desktop: ['lg', 'xl']
548
- };
549
- const getMediaQueries = b => {
550
- const defaultKeys = Object.keys(b);
551
- const breakpointValue = defaultKeys.map(breakpoint => {
552
- const value = {
553
- breakpoint: breakpoint,
554
- min: b[breakpoint],
555
- max: 0
556
- };
557
- return value;
558
- }).sort((a, b) => a.min - b.min);
559
- breakpointValue.reduce((a, b) => {
560
- if (b) a.max = b.min;
561
- return b;
562
- });
563
- const query = {};
564
- breakpointValue.map(sizeScreen => {
565
- query[sizeScreen.breakpoint] = `only screen ${sizeScreen.min && sizeScreen.min >= 0 ? 'and (min-width:' + sizeScreen.min + 'px)' : ''} ${sizeScreen.max && sizeScreen.max >= 0 ? 'and (max-width:' + sizeScreen.max + 'px)' : ''}`;
566
- });
567
- return query;
568
- };
569
- const defaultScreenConfig = {
570
- breakpoints: defaultBreakpointsConfig,
571
- devices: defaultDeviceConfig,
572
- mediaQueries: /*#__PURE__*/getMediaQueries(defaultBreakpointsConfig)
573
- };
574
- const ResponsiveContext = /*#__PURE__*/React.createContext(defaultScreenConfig);
575
- const useResponsiveContext = () => React.useContext(ResponsiveContext);
576
- const ResponsiveProvider = _ref => {
577
- let {
578
- breakpoints = defaultBreakpointsConfig,
579
- devices = defaultDeviceConfig,
580
- children
581
- } = _ref;
582
- return /*#__PURE__*/React__default.createElement(ResponsiveContext.Provider, {
583
- value: {
584
- breakpoints,
585
- devices,
586
- mediaQueries: getMediaQueries(breakpoints)
587
- }
588
- }, children);
589
- };
590
-
591
- // Liste des propriétés numériques
592
- const NumberProps = ['numberOfLines', 'fontWeight', 'timeStamp', 'flex', 'flexGrow', 'flexShrink', 'order', 'zIndex', 'aspectRatio', 'shadowOpacity', 'shadowRadius', 'scale', 'opacity', 'min', 'max', 'now'];
593
- // Stocke si une propriété est numérique
594
- const NumberPropsStyle = {};
595
- NumberProps.forEach(property => {
596
- NumberPropsStyle[property] = true;
597
- });
598
- // Fonction pour définir la taille de l'élément
599
- const setSize = (newSize, styleProps) => {
600
- styleProps.height = styleProps.width = newSize; // Définit la hauteur et la largeur
601
- };
602
- // Fonction pour appliquer les styles à un composant
603
- const applyStyle = props => {
604
- const {
605
- getColor
606
- } = useTheme(); // Utilise le hook pour obtenir les couleurs du thème
607
- const {
608
- mediaQueries,
609
- devices
610
- } = useResponsiveContext(); // Utilise le contexte responsive
611
- // eslint-disable-next-line prefer-const
612
- let styleProps = {}; // Stocke les styles
613
- // Applique un curseur pointeur si un gestionnaire de clic est présent
614
- if (props.onClick && styleProps.cursor == undefined) {
615
- styleProps.cursor = 'pointer';
616
- }
617
- // Gère la taille de l'élément
618
- const size = props.height !== undefined && props.width !== undefined && props.height === props.width ? props.height : props.size ? props.size : null;
619
- if (size) {
620
- setSize(size, styleProps); // Applique la taille
621
- }
622
- // Gère le padding et la marge
623
- if (props.paddingHorizontal) {
624
- styleProps.paddingLeft = props.paddingHorizontal;
625
- styleProps.paddingRight = props.paddingHorizontal;
626
- }
627
- if (props.marginHorizontal) {
628
- styleProps.marginLeft = props.marginHorizontal;
629
- styleProps.marginRight = props.marginHorizontal;
630
- }
631
- if (props.paddingVertical) {
632
- styleProps.paddingTop = props.paddingVertical;
633
- styleProps.paddingBottom = props.paddingVertical;
634
- }
635
- if (props.marginVertical) {
636
- styleProps.marginTop = props.marginVertical;
637
- styleProps.marginBottom = props.marginVertical;
638
- }
639
- // Applique les ombres si spécifié
640
- if (props.shadow) {
641
- if (typeof props.shadow === 'number' || typeof props.shadow === 'boolean') {
642
- const shadowValue = typeof props.shadow === 'number' && Shadows[props.shadow] !== undefined ? props.shadow : 2;
643
- if (Shadows[shadowValue]) {
644
- const shadowColor = Color.hex.rgb(Shadows[shadowValue].shadowColor).join(',');
645
- styleProps['boxShadow'] = `${Shadows[shadowValue].shadowOffset.height}px ${Shadows[shadowValue].shadowOffset.width}px ${Shadows[shadowValue].shadowRadius}px rgba(${shadowColor},${Shadows[shadowValue].shadowOpacity})`;
646
- }
647
- } else {
648
- const shadowColor = Color.hex.rgb(props.shadow.shadowColor).join(',');
649
- styleProps['boxShadow'] = `${props.shadow.shadowOffset.height}px ${props.shadow.shadowOffset.width}px ${props.shadow.shadowRadius}px rgba(${shadowColor},${props.shadow.shadowOpacity})`;
650
- }
651
- delete props['shadow'];
652
- }
653
- // Gère les styles pour des médias spécifiques
654
- if (props.only) {
655
- const {
656
- only,
657
- ...newProps
658
- } = props;
659
- only.map(o => {
660
- });
661
- const styleKeys = Object.keys(newProps).filter(key => isStyleProp(key));
662
- styleKeys.map(key => {
663
- only.map(o => {
664
- props.media[o][key] = newProps[key];
665
- });
666
- delete props[key];
667
- });
668
- delete props['only'];
669
- }
670
- // Gère les styles CSS personnalisés
671
- if (props.css) {
672
- const {
673
- css
674
- } = props;
675
- props = {
676
- ...css,
677
- props
678
- };
679
- delete props['css'];
680
- }
681
- // Applique les styles
682
- Object.keys(props).map(property => {
683
- if (property !== 'shadow' && property !== 'size') {
684
- if (isStyleProp(property) || property == 'on' || property == 'media') {
685
- if (typeof props[property] === 'object') {
686
- if (property === 'on') {
687
- for (const event in props[property]) {
688
- styleProps['&:' + event] = applyStyle(props[property][event]);
689
- }
690
- } else if (property === 'media') {
691
- for (const screenOrDevices in props[property]) {
692
- if (mediaQueries[screenOrDevices] !== undefined && props[property][screenOrDevices] !== undefined) {
693
- styleProps['@media ' + mediaQueries[screenOrDevices]] = applyStyle(props[property][screenOrDevices]);
694
- } else if (devices[screenOrDevices] !== undefined) {
695
- for (const deviceScreen in devices[screenOrDevices]) {
696
- if (mediaQueries[devices[screenOrDevices][deviceScreen]] !== undefined && props[property][screenOrDevices] !== undefined) {
697
- styleProps['@media ' + mediaQueries[devices[screenOrDevices][deviceScreen]]] = applyStyle(props[property][screenOrDevices]);
698
- }
699
- }
700
- }
701
- }
702
- } else {
703
- styleProps[property] = applyStyle(props[property]);
704
- }
705
- } else if (typeof props[property] === 'number' && NumberPropsStyle[property] === undefined) {
706
- styleProps[property] = props[property] + 'px';
707
- } else if (property.toLowerCase().indexOf('color') !== -1) {
708
- styleProps[property] = getColor(props[property]);
709
- } else {
710
- styleProps[property] = props[property];
711
- }
712
- }
713
- }
714
- });
715
- return styleProps;
716
- };
717
- // Clés à exclure lors de la création du composant stylisé
718
- const excludedKeys = /*#__PURE__*/new Set(['on', 'shadow', 'only', 'media', 'css', 'paddingHorizontal', 'paddingVertical', 'marginHorizontal', 'marginVertical']);
719
- const includeKeys = /*#__PURE__*/new Set(['src', 'alt', 'style']);
720
- // Crée un composant div stylisé, en excluant certaines props
721
- const ElementComponent = /*#__PURE__*/styled.div.withConfig({
722
- shouldForwardProp: key => {
723
- return !excludedKeys.has(key) && !isStyleProp(key) || includeKeys.has(key);
724
- }
725
- })`
726
- // Applique les styles dynamiques en utilisant la fonction applyStyle
727
- ${props => props.css}
728
- `;
729
- const useStyledProps = props => {
730
- const styledProps = applyStyle(props);
731
- // Filtrer les props pour exclure celles qui sont utilisées pour le style
732
- const newProps = Object.keys(props).reduce((acc, key) => {
733
- if (!excludedKeys.has(key) && !isStyleProp(key) || includeKeys.has(key)) {
734
- acc[key] = props[key];
735
- }
736
- return acc;
737
- }, {});
738
- return {
739
- newProps,
740
- styledProps
741
- };
742
- };
743
- const Element = props => {
744
- // eslint-disable-next-line prefer-const
745
- let {
746
- onPress,
747
- ...rest
748
- } = props;
749
- // eslint-disable-next-line prefer-const
750
- let {
751
- newProps,
752
- styledProps
753
- } = useStyledProps(rest);
754
- if (onPress) {
755
- newProps.onClick = onPress;
756
- }
757
- // Rendu du composant avec les props
758
- return /*#__PURE__*/React__default.createElement(ElementComponent, Object.assign({}, rest, {
759
- css: styledProps
760
- }));
761
- };
762
-
763
- const View = /*#__PURE__*/React__default.memo(props => /*#__PURE__*/React__default.createElement(Element, Object.assign({}, props)));
764
- const Div = View;
765
- const SafeArea = View;
766
- const Scroll = /*#__PURE__*/React__default.memo(props => /*#__PURE__*/React__default.createElement(View, Object.assign({
767
- overflow: 'auto'
768
- }, props)));
769
- const Span = /*#__PURE__*/React__default.memo(props => /*#__PURE__*/React__default.createElement(Element, Object.assign({}, props, {
770
- as: "span"
771
- })));
772
-
773
- const Image = /*#__PURE__*/React__default.memo(props => /*#__PURE__*/React__default.createElement(Element, Object.assign({}, props, {
774
- as: "img"
775
- })));
776
-
777
- const Text = /*#__PURE__*/React__default.memo(props => {
778
- return /*#__PURE__*/React__default.createElement(Element, Object.assign({}, props));
779
- });
780
-
781
- // Utilisation de React.memo pour une meilleure performance
782
- const Form = /*#__PURE__*/React__default.memo(props => /*#__PURE__*/React__default.createElement(Element, Object.assign({}, props, {
783
- as: "form"
784
- })));
785
- const Input = /*#__PURE__*/React__default.memo(props => /*#__PURE__*/React__default.createElement(Element, Object.assign({}, props, {
786
- as: "input"
787
- })));
788
- const Button = /*#__PURE__*/React__default.memo(props => /*#__PURE__*/React__default.createElement(Element, Object.assign({}, props, {
789
- as: "button"
790
- })));
791
-
792
- const Typography = {
793
- letterSpacings: {
794
- tighter: -0.08,
795
- tight: -0.4,
796
- normal: 0,
797
- wide: 0.4,
798
- wider: 0.8,
799
- widest: 1.6
800
- },
801
- lineHeights: {
802
- xs: 10,
803
- sm: 12,
804
- md: 14,
805
- lg: 16,
806
- xl: 20,
807
- '2xl': 24,
808
- '3xl': 30,
809
- '4xl': 36,
810
- '5xl': 48,
811
- '6xl': 64
812
- },
813
- fontWeights: {
814
- hairline: 100,
815
- thin: 200,
816
- light: 300,
817
- normal: 400,
818
- medium: 500,
819
- semiBold: 600,
820
- bold: 700,
821
- extraBold: 800,
822
- black: 900
823
- },
824
- fontSizes: {
825
- xs: 10,
826
- sm: 12,
827
- md: 14,
828
- lg: 16,
829
- xl: 20,
830
- '2xl': 24,
831
- '3xl': 30,
832
- '4xl': 36,
833
- '5xl': 48,
834
- '6xl': 64
835
- }
836
- };
837
-
838
- /**
839
- * whether in browser env
840
- */
841
- const isBrowser = () => typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined';
842
- /**
843
- * get window.g_initialProps
844
- */
845
- const getWindowInitialProps = () => isBrowser() ? window.g_initialProps : undefined;
846
- /**
847
- * whether SSR success in client
848
- */
849
- const isSSR = ! /*#__PURE__*/isBrowser();
850
- function isDev() {
851
- let dev = false;
852
- if (isBrowser()) {
853
- dev = !(window.location.hostname.indexOf('localhost') === -1);
854
- }
855
- return dev;
856
- }
857
- function isProd() {
858
- if (isBrowser()) {
859
- if (window && window.location && window.location.hostname) {
860
- return window.location.hostname.includes('localhost') || window.location.hostname.includes('develop');
861
- }
862
- }
863
- return false;
864
- }
865
- function isMobile() {
866
- return navigator.userAgent.match(/(iPhone|iPod|Android|ios|iPad)/i);
867
- }
868
-
869
- const useMount = callback => {
870
- React.useEffect(() => {
871
- callback();
872
- }, []);
873
- };
874
-
875
- const createQuery = (keyScreen, query, set) => {
876
- const mql = window.matchMedia(query);
877
- const onChange = () => {
878
- if (!!mql.matches) {
879
- set(keyScreen);
880
- }
881
- };
882
- mql.addListener(onChange);
883
- if (!!mql.matches) {
884
- set(keyScreen);
885
- }
886
- return () => {
887
- mql.removeListener(onChange);
888
- };
889
- };
890
- const useResponsive = () => {
891
- const {
892
- breakpoints,
893
- devices,
894
- mediaQueries
895
- } = useResponsiveContext();
896
- const [screen, setScreen] = React.useState('xs');
897
- const [orientation, setOrientation] = React.useState('landscape');
898
- useMount(() => {
899
- for (const screenSize in mediaQueries) {
900
- createQuery(screenSize, mediaQueries[screenSize], setScreen);
901
- }
902
- createQuery('landscape', 'only screen and (orientation: landscape)', setOrientation);
903
- createQuery('portrait', 'only screen and (orientation: portrait)', setOrientation);
904
- });
905
- const on = device => {
906
- return devices[device].includes(screen);
907
- };
908
- const is = s => {
909
- return s == screen;
910
- };
911
- return {
912
- breakpoints,
913
- devices,
914
- orientation,
915
- screen,
916
- on,
917
- is
918
- };
919
- };
920
-
921
- exports.Button = Button;
922
- exports.Div = Div;
923
- exports.Element = Element;
924
- exports.Form = Form;
925
- exports.Image = Image;
926
- exports.Input = Input;
927
- exports.ResponsiveContext = ResponsiveContext;
928
- exports.ResponsiveProvider = ResponsiveProvider;
929
- exports.SafeArea = SafeArea;
930
- exports.Scroll = Scroll;
931
- exports.Shadows = Shadows;
932
- exports.Span = Span;
933
- exports.Text = Text;
934
- exports.ThemeContext = ThemeContext;
935
- exports.ThemeProvider = ThemeProvider;
936
- exports.Typography = Typography;
937
- exports.View = View;
938
- exports.applyStyle = applyStyle;
939
- exports.createQuery = createQuery;
940
- exports.defaultColors = defaultColors;
941
- exports.defaultThemeMain = defaultThemeMain;
942
- exports.getWindowInitialProps = getWindowInitialProps;
943
- exports.isBrowser = isBrowser;
944
- exports.isDev = isDev;
945
- exports.isMobile = isMobile;
946
- exports.isProd = isProd;
947
- exports.isSSR = isSSR;
948
- exports.palette = palette;
949
- exports.setSize = setSize;
950
- exports.useMount = useMount;
951
- exports.useResponsive = useResponsive;
952
- exports.useResponsiveContext = useResponsiveContext;
953
- exports.useTheme = useTheme;
954
- //# sourceMappingURL=app-studio.cjs.development.js.map