@hero-design/rn 8.52.0 → 8.52.1

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/.turbo/turbo-build.log +1 -1
  2. package/CHANGELOG.md +6 -0
  3. package/es/index.js +2 -22
  4. package/lib/index.js +2 -22
  5. package/package.json +1 -1
  6. package/src/components/Carousel/CardCarousel.tsx +1 -5
  7. package/src/components/Carousel/StyledCardCarousel.tsx +1 -16
  8. package/src/components/Carousel/__tests__/__snapshots__/CardCarousel.spec.tsx.snap +92 -172
  9. package/src/theme/__tests__/__snapshots__/index.spec.ts.snap +0 -10
  10. package/src/theme/components/cardCarousel.ts +1 -8
  11. package/types/components/Carousel/StyledCardCarousel.d.ts +1 -7
  12. package/types/theme/components/cardCarousel.d.ts +0 -10
package/.turbo/turbo-build.log CHANGED
@@ -4,5 +4,5 @@ $ rollup -c
4
4
  src/index.ts → lib/index.js, es/index.js...
5
5
  (!) Plugin replace: @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
6
6
  (!) Plugin node-resolve: preferring built-in module 'events' over local alternative at '/runner/_work/hero-design/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
7
- created lib/index.js, es/index.js in 29.2s
7
+ created lib/index.js, es/index.js in 28.4s
8
8
  $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @hero-design/rn
2
2
 
3
+ ## 8.52.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#2524](https://github.com/Thinkei/hero-design/pull/2524) [`2fbcd3712`](https://github.com/Thinkei/hero-design/commit/2fbcd371210cce4d257abc29ba37094bb6b1aaae) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [Carousel.Card] Remove shadow
8
+
3
9
  ## 8.52.0
4
10
 
5
11
  ### Minor Changes
package/es/index.js CHANGED
@@ -2424,18 +2424,10 @@ var getCardCarouselTheme = function getCardCarouselTheme(theme) {
2424
2424
  var colors = {
2425
2425
  carouselItemBackground: theme.colors.defaultSurface
2426
2426
  };
2427
- var shadows = {
2428
- color: theme.shadows["default"].shadowColor,
2429
- offset: theme.shadows["default"].shadowOffset,
2430
- opacity: theme.shadows["default"].shadowOpacity,
2431
- radius: theme.shadows["default"].shadowRadius,
2432
- elevation: theme.shadows["default"].elevation
2433
- };
2434
2427
  var radii = {
2435
2428
  card: theme.radii.medium
2436
2429
  };
2437
2430
  return {
2438
- shadows: shadows,
2439
2431
  colors: colors,
2440
2432
  space: space,
2441
2433
  radii: radii
@@ -12010,20 +12002,8 @@ var StyledCard = index$a(Card$1)(function (_ref2) {
12010
12002
  flex: 1
12011
12003
  };
12012
12004
  });
12013
- var StyledShadow = index$a(View)(function (_ref3) {
12005
+ var StyledItemWrapper = index$a(View)(function (_ref3) {
12014
12006
  var theme = _ref3.theme;
12015
- return {
12016
- borderRadius: theme.__hd__.cardCarousel.radii.card,
12017
- shadowColor: theme.__hd__.cardCarousel.shadows.color,
12018
- shadowOffset: theme.__hd__.cardCarousel.shadows.offset,
12019
- shadowRadius: theme.__hd__.cardCarousel.shadows.radius,
12020
- shadowOpacity: theme.__hd__.cardCarousel.shadows.opacity,
12021
- elevation: theme.__hd__.cardCarousel.shadows.elevation,
12022
- flex: 1
12023
- };
12024
- });
12025
- var StyledItemWrapper = index$a(View)(function (_ref4) {
12026
- var theme = _ref4.theme;
12027
12007
  return {
12028
12008
  padding: theme.__hd__.cardCarousel.space.carouselItemSpacing
12029
12009
  };
@@ -12144,7 +12124,7 @@ var CardCarousel = /*#__PURE__*/forwardRef(function (_ref, ref) {
12144
12124
  style: {
12145
12125
  width: itemWidth
12146
12126
  }
12147
- }, /*#__PURE__*/React.createElement(StyledShadow, null, /*#__PURE__*/React.createElement(StyledCard, null, item)));
12127
+ }, /*#__PURE__*/React.createElement(StyledCard, null, item));
12148
12128
  }, [itemWidth]);
12149
12129
  var contentContainerPaddingHorizontal = theme.__hd__.cardCarousel.space.contentContainerPaddingHorizontal;
12150
12130
  return /*#__PURE__*/React.createElement(StyledWrapper$8, {
package/lib/index.js CHANGED
@@ -2454,18 +2454,10 @@ var getCardCarouselTheme = function getCardCarouselTheme(theme) {
2454
2454
  var colors = {
2455
2455
  carouselItemBackground: theme.colors.defaultSurface
2456
2456
  };
2457
- var shadows = {
2458
- color: theme.shadows["default"].shadowColor,
2459
- offset: theme.shadows["default"].shadowOffset,
2460
- opacity: theme.shadows["default"].shadowOpacity,
2461
- radius: theme.shadows["default"].shadowRadius,
2462
- elevation: theme.shadows["default"].elevation
2463
- };
2464
2457
  var radii = {
2465
2458
  card: theme.radii.medium
2466
2459
  };
2467
2460
  return {
2468
- shadows: shadows,
2469
2461
  colors: colors,
2470
2462
  space: space,
2471
2463
  radii: radii
@@ -12040,20 +12032,8 @@ var StyledCard = index$a(Card$1)(function (_ref2) {
12040
12032
  flex: 1
12041
12033
  };
12042
12034
  });
12043
- var StyledShadow = index$a(reactNative.View)(function (_ref3) {
12035
+ var StyledItemWrapper = index$a(reactNative.View)(function (_ref3) {
12044
12036
  var theme = _ref3.theme;
12045
- return {
12046
- borderRadius: theme.__hd__.cardCarousel.radii.card,
12047
- shadowColor: theme.__hd__.cardCarousel.shadows.color,
12048
- shadowOffset: theme.__hd__.cardCarousel.shadows.offset,
12049
- shadowRadius: theme.__hd__.cardCarousel.shadows.radius,
12050
- shadowOpacity: theme.__hd__.cardCarousel.shadows.opacity,
12051
- elevation: theme.__hd__.cardCarousel.shadows.elevation,
12052
- flex: 1
12053
- };
12054
- });
12055
- var StyledItemWrapper = index$a(reactNative.View)(function (_ref4) {
12056
- var theme = _ref4.theme;
12057
12037
  return {
12058
12038
  padding: theme.__hd__.cardCarousel.space.carouselItemSpacing
12059
12039
  };
@@ -12174,7 +12154,7 @@ var CardCarousel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
12174
12154
  style: {
12175
12155
  width: itemWidth
12176
12156
  }
12177
- }, /*#__PURE__*/React__default["default"].createElement(StyledShadow, null, /*#__PURE__*/React__default["default"].createElement(StyledCard, null, item)));
12157
+ }, /*#__PURE__*/React__default["default"].createElement(StyledCard, null, item));
12178
12158
  }, [itemWidth]);
12179
12159
  var contentContainerPaddingHorizontal = theme.__hd__.cardCarousel.space.contentContainerPaddingHorizontal;
12180
12160
  return /*#__PURE__*/React__default["default"].createElement(StyledWrapper$8, {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hero-design/rn",
3
- "version": "8.52.0",
3
+ "version": "8.52.1",
4
4
  "license": "MIT",
5
5
  "main": "lib/index.js",
6
6
  "module": "es/index.js",
package/src/components/Carousel/CardCarousel.tsx CHANGED
@@ -20,7 +20,6 @@ import {
20
20
  StyledCard,
21
21
  StyledItemWrapper,
22
22
  StyledPageControl,
23
- StyledShadow,
24
23
  StyledWrapper,
25
24
  } from './StyledCardCarousel';
26
25
  import { ITEM_WIDTH_RATE, VIEW_POSITION_CENTER } from './contants';
@@ -186,10 +185,7 @@ export const CardCarousel = forwardRef<CardCarouselHandles, CardCarouselProps>(
186
185
  ({ item }) => {
187
186
  return (
188
187
  <StyledItemWrapper style={{ width: itemWidth }}>
189
- {/* using StyledShadow to fix border not shown on Android */}
190
- <StyledShadow>
191
- <StyledCard>{item}</StyledCard>
192
- </StyledShadow>
188
+ <StyledCard>{item}</StyledCard>
193
189
  </StyledItemWrapper>
194
190
  );
195
191
  },
package/src/components/Carousel/StyledCardCarousel.tsx CHANGED
@@ -17,24 +17,9 @@ const StyledCard = styled(Card)<CardProps>(({ theme }) => ({
17
17
  overflow: 'hidden',
18
18
  flex: 1,
19
19
  }));
20
- const StyledShadow = styled(View)<ViewProps>(({ theme }) => ({
21
- borderRadius: theme.__hd__.cardCarousel.radii.card,
22
- shadowColor: theme.__hd__.cardCarousel.shadows.color,
23
- shadowOffset: theme.__hd__.cardCarousel.shadows.offset,
24
- shadowRadius: theme.__hd__.cardCarousel.shadows.radius,
25
- shadowOpacity: theme.__hd__.cardCarousel.shadows.opacity,
26
- elevation: theme.__hd__.cardCarousel.shadows.elevation,
27
- flex: 1,
28
- }));
29
20
 
30
21
  const StyledItemWrapper = styled(View)<ViewProps>(({ theme }) => ({
31
22
  padding: theme.__hd__.cardCarousel.space.carouselItemSpacing,
32
23
  }));
33
24
 
34
- export {
35
- StyledCard,
36
- StyledShadow,
37
- StyledItemWrapper,
38
- StyledWrapper,
39
- StyledPageControl,
40
- };
25
+ export { StyledCard, StyledItemWrapper, StyledWrapper, StyledPageControl };
package/src/components/Carousel/__tests__/__snapshots__/CardCarousel.spec.tsx.snap CHANGED
@@ -111,60 +111,40 @@ exports[`CardCarousel android should render correctly on iOS 1`] = `
111
111
  style={
112
112
  [
113
113
  {
114
- "borderRadius": 8,
115
- "elevation": 3,
116
- "flex": 1,
117
- "shadowColor": "#001f23",
118
- "shadowOffset": {
119
- "height": 2,
120
- "width": 0,
121
- },
122
- "shadowOpacity": 0.12,
123
- "shadowRadius": 4,
114
+ "borderRadius": 12,
115
+ "overflow": "hidden",
124
116
  },
125
- undefined,
117
+ [
118
+ {
119
+ "borderRadius": 8,
120
+ "flex": 1,
121
+ "overflow": "hidden",
122
+ },
123
+ undefined,
124
+ ],
126
125
  ]
127
126
  }
128
127
  >
129
- <View
128
+ <Text
129
+ allowFontScaling={false}
130
130
  style={
131
131
  [
132
132
  {
133
- "borderRadius": 12,
134
- "overflow": "hidden",
133
+ "color": "#001f23",
134
+ "fontFamily": "BeVietnamPro-Regular",
135
+ "fontSize": 14,
136
+ "letterSpacing": 0.48,
137
+ "lineHeight": 22,
135
138
  },
136
- [
137
- {
138
- "borderRadius": 8,
139
- "flex": 1,
140
- "overflow": "hidden",
141
- },
142
- undefined,
143
- ],
139
+ undefined,
144
140
  ]
145
141
  }
142
+ themeIntent="body"
143
+ themeTypeface="neutral"
144
+ themeVariant="small"
146
145
  >
147
- <Text
148
- allowFontScaling={false}
149
- style={
150
- [
151
- {
152
- "color": "#001f23",
153
- "fontFamily": "BeVietnamPro-Regular",
154
- "fontSize": 14,
155
- "letterSpacing": 0.48,
156
- "lineHeight": 22,
157
- },
158
- undefined,
159
- ]
160
- }
161
- themeIntent="body"
162
- themeTypeface="neutral"
163
- themeVariant="small"
164
- >
165
- screen 1
166
- </Text>
167
- </View>
146
+ screen 1
147
+ </Text>
168
148
  </View>
169
149
  </View>
170
150
  </View>
@@ -195,60 +175,40 @@ exports[`CardCarousel android should render correctly on iOS 1`] = `
195
175
  style={
196
176
  [
197
177
  {
198
- "borderRadius": 8,
199
- "elevation": 3,
200
- "flex": 1,
201
- "shadowColor": "#001f23",
202
- "shadowOffset": {
203
- "height": 2,
204
- "width": 0,
205
- },
206
- "shadowOpacity": 0.12,
207
- "shadowRadius": 4,
178
+ "borderRadius": 12,
179
+ "overflow": "hidden",
208
180
  },
209
- undefined,
181
+ [
182
+ {
183
+ "borderRadius": 8,
184
+ "flex": 1,
185
+ "overflow": "hidden",
186
+ },
187
+ undefined,
188
+ ],
210
189
  ]
211
190
  }
212
191
  >
213
- <View
192
+ <Text
193
+ allowFontScaling={false}
214
194
  style={
215
195
  [
216
196
  {
217
- "borderRadius": 12,
218
- "overflow": "hidden",
197
+ "color": "#001f23",
198
+ "fontFamily": "BeVietnamPro-Regular",
199
+ "fontSize": 14,
200
+ "letterSpacing": 0.48,
201
+ "lineHeight": 22,
219
202
  },
220
- [
221
- {
222
- "borderRadius": 8,
223
- "flex": 1,
224
- "overflow": "hidden",
225
- },
226
- undefined,
227
- ],
203
+ undefined,
228
204
  ]
229
205
  }
206
+ themeIntent="body"
207
+ themeTypeface="neutral"
208
+ themeVariant="small"
230
209
  >
231
- <Text
232
- allowFontScaling={false}
233
- style={
234
- [
235
- {
236
- "color": "#001f23",
237
- "fontFamily": "BeVietnamPro-Regular",
238
- "fontSize": 14,
239
- "letterSpacing": 0.48,
240
- "lineHeight": 22,
241
- },
242
- undefined,
243
- ]
244
- }
245
- themeIntent="body"
246
- themeTypeface="neutral"
247
- themeVariant="small"
248
- >
249
- screen 2
250
- </Text>
251
- </View>
210
+ screen 2
211
+ </Text>
252
212
  </View>
253
213
  </View>
254
214
  </View>
@@ -446,60 +406,40 @@ exports[`CardCarousel ios should render correctly on iOS 1`] = `
446
406
  style={
447
407
  [
448
408
  {
449
- "borderRadius": 8,
450
- "elevation": 3,
451
- "flex": 1,
452
- "shadowColor": "#001f23",
453
- "shadowOffset": {
454
- "height": 2,
455
- "width": 0,
456
- },
457
- "shadowOpacity": 0.12,
458
- "shadowRadius": 4,
409
+ "borderRadius": 12,
410
+ "overflow": "hidden",
459
411
  },
460
- undefined,
412
+ [
413
+ {
414
+ "borderRadius": 8,
415
+ "flex": 1,
416
+ "overflow": "hidden",
417
+ },
418
+ undefined,
419
+ ],
461
420
  ]
462
421
  }
463
422
  >
464
- <View
423
+ <Text
424
+ allowFontScaling={false}
465
425
  style={
466
426
  [
467
427
  {
468
- "borderRadius": 12,
469
- "overflow": "hidden",
428
+ "color": "#001f23",
429
+ "fontFamily": "BeVietnamPro-Regular",
430
+ "fontSize": 14,
431
+ "letterSpacing": 0.48,
432
+ "lineHeight": 22,
470
433
  },
471
- [
472
- {
473
- "borderRadius": 8,
474
- "flex": 1,
475
- "overflow": "hidden",
476
- },
477
- undefined,
478
- ],
434
+ undefined,
479
435
  ]
480
436
  }
437
+ themeIntent="body"
438
+ themeTypeface="neutral"
439
+ themeVariant="small"
481
440
  >
482
- <Text
483
- allowFontScaling={false}
484
- style={
485
- [
486
- {
487
- "color": "#001f23",
488
- "fontFamily": "BeVietnamPro-Regular",
489
- "fontSize": 14,
490
- "letterSpacing": 0.48,
491
- "lineHeight": 22,
492
- },
493
- undefined,
494
- ]
495
- }
496
- themeIntent="body"
497
- themeTypeface="neutral"
498
- themeVariant="small"
499
- >
500
- screen 1
501
- </Text>
502
- </View>
441
+ screen 1
442
+ </Text>
503
443
  </View>
504
444
  </View>
505
445
  </View>
@@ -530,60 +470,40 @@ exports[`CardCarousel ios should render correctly on iOS 1`] = `
530
470
  style={
531
471
  [
532
472
  {
533
- "borderRadius": 8,
534
- "elevation": 3,
535
- "flex": 1,
536
- "shadowColor": "#001f23",
537
- "shadowOffset": {
538
- "height": 2,
539
- "width": 0,
540
- },
541
- "shadowOpacity": 0.12,
542
- "shadowRadius": 4,
473
+ "borderRadius": 12,
474
+ "overflow": "hidden",
543
475
  },
544
- undefined,
476
+ [
477
+ {
478
+ "borderRadius": 8,
479
+ "flex": 1,
480
+ "overflow": "hidden",
481
+ },
482
+ undefined,
483
+ ],
545
484
  ]
546
485
  }
547
486
  >
548
- <View
487
+ <Text
488
+ allowFontScaling={false}
549
489
  style={
550
490
  [
551
491
  {
552
- "borderRadius": 12,
553
- "overflow": "hidden",
492
+ "color": "#001f23",
493
+ "fontFamily": "BeVietnamPro-Regular",
494
+ "fontSize": 14,
495
+ "letterSpacing": 0.48,
496
+ "lineHeight": 22,
554
497
  },
555
- [
556
- {
557
- "borderRadius": 8,
558
- "flex": 1,
559
- "overflow": "hidden",
560
- },
561
- undefined,
562
- ],
498
+ undefined,
563
499
  ]
564
500
  }
501
+ themeIntent="body"
502
+ themeTypeface="neutral"
503
+ themeVariant="small"
565
504
  >
566
- <Text
567
- allowFontScaling={false}
568
- style={
569
- [
570
- {
571
- "color": "#001f23",
572
- "fontFamily": "BeVietnamPro-Regular",
573
- "fontSize": 14,
574
- "letterSpacing": 0.48,
575
- "lineHeight": 22,
576
- },
577
- undefined,
578
- ]
579
- }
580
- themeIntent="body"
581
- themeTypeface="neutral"
582
- themeVariant="small"
583
- >
584
- screen 2
585
- </Text>
586
- </View>
505
+ screen 2
506
+ </Text>
587
507
  </View>
588
508
  </View>
589
509
  </View>
package/src/theme/__tests__/__snapshots__/index.spec.ts.snap CHANGED
@@ -291,16 +291,6 @@ exports[`theme returns correct theme object 1`] = `
291
291
  "radii": {
292
292
  "card": 8,
293
293
  },
294
- "shadows": {
295
- "color": "#001f23",
296
- "elevation": 3,
297
- "offset": {
298
- "height": 2,
299
- "width": 0,
300
- },
301
- "opacity": 0.12,
302
- "radius": 4,
303
- },
304
294
  "space": {
305
295
  "carouselItemSpacing": 8,
306
296
  "contentContainerPaddingHorizontal": 24,
package/src/theme/components/cardCarousel.ts CHANGED
@@ -10,19 +10,12 @@ const getCardCarouselTheme = (theme: GlobalTheme) => {
10
10
  const colors = {
11
11
  carouselItemBackground: theme.colors.defaultSurface,
12
12
  };
13
- const shadows = {
14
- color: theme.shadows.default.shadowColor,
15
- offset: theme.shadows.default.shadowOffset,
16
- opacity: theme.shadows.default.shadowOpacity,
17
- radius: theme.shadows.default.shadowRadius,
18
- elevation: theme.shadows.default.elevation,
19
- };
20
13
 
21
14
  const radii = {
22
15
  card: theme.radii.medium,
23
16
  };
24
17
 
25
- return { shadows, colors, space, radii };
18
+ return { colors, space, radii };
26
19
  };
27
20
 
28
21
  export default getCardCarouselTheme;
package/types/components/Carousel/StyledCardCarousel.d.ts CHANGED
@@ -16,16 +16,10 @@ declare const StyledCard: import("@emotion/native").StyledComponent<CardProps &
16
16
  theme?: import("@emotion/react").Theme | undefined;
17
17
  as?: import("react").ElementType<any> | undefined;
18
18
  }, {}, {}>;
19
- declare const StyledShadow: import("@emotion/native").StyledComponent<ViewProps & {
20
- theme?: import("@emotion/react").Theme | undefined;
21
- as?: import("react").ElementType<any> | undefined;
22
- }, {}, {
23
- ref?: import("react").Ref<View> | undefined;
24
- }>;
25
19
  declare const StyledItemWrapper: import("@emotion/native").StyledComponent<ViewProps & {
26
20
  theme?: import("@emotion/react").Theme | undefined;
27
21
  as?: import("react").ElementType<any> | undefined;
28
22
  }, {}, {
29
23
  ref?: import("react").Ref<View> | undefined;
30
24
  }>;
31
- export { StyledCard, StyledShadow, StyledItemWrapper, StyledWrapper, StyledPageControl, };
25
+ export { StyledCard, StyledItemWrapper, StyledWrapper, StyledPageControl };
package/types/theme/components/cardCarousel.d.ts CHANGED
@@ -1,15 +1,5 @@
1
1
  import type { GlobalTheme } from '../global';
2
2
  declare const getCardCarouselTheme: (theme: GlobalTheme) => {
3
- shadows: {
4
- color: string;
5
- offset: {
6
- width: number;
7
- height: number;
8
- };
9
- opacity: number;
10
- radius: number;
11
- elevation: number;
12
- };
13
3
  colors: {
14
4
  carouselItemBackground: string;
15
5
  };