@hero-design/rn-work-uikit 1.9.3 → 1.9.4

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.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,14 @@
1
1
  # @hero-design/rn-work-uikit
2
2
 
3
+ ## 1.9.4
4
+
5
+ ### Patch Changes
6
+
7
+ - [#4483](https://github.com/Thinkei/hero-design/pull/4483) [`345892869b9690f168b71cdd66a65996b5c9a15d`](https://github.com/Thinkei/hero-design/commit/345892869b9690f168b71cdd66a65996b5c9a15d) Thanks [@tqdungit](https://github.com/tqdungit)! - Revert "[ANG-4128] Upgrade date-fns from v2 to v4 (#4420)"
8
+
9
+ - Updated dependencies [[`345892869b9690f168b71cdd66a65996b5c9a15d`](https://github.com/Thinkei/hero-design/commit/345892869b9690f168b71cdd66a65996b5c9a15d), [`5be4e6e0477d9027fd78a36f09eec697f17490c5`](https://github.com/Thinkei/hero-design/commit/5be4e6e0477d9027fd78a36f09eec697f17490c5)]:
10
+ - @hero-design/rn@8.113.0
11
+
3
12
  ## 1.9.3
4
13
 
5
14
  ### Patch Changes
Binary file
package/lib/index.js CHANGED
@@ -8144,7 +8144,7 @@ var LoadingIndicator = function LoadingIndicator(_ref2) {
8144
8144
  };
8145
8145
 
8146
8146
  // 🔴 DO NOT EDIT — This file is generated automatically.
8147
- var IconList = ['activate', 'add-emoji', 'add-person', 'adjustment', 'alignment', 'antenna', 'archive', 'assignment-warning', 'bank', 'bell', 'billing', 'bolt', 'bookmark-added', 'bookmark-checked', 'bookmark', 'box-check', 'box', 'bpay', 'buildings', 'cake', 'calendar-clock', 'calendar', 'candy-box-menu', 'caret-down-small', 'caret-down', 'caret-left-small', 'caret-left', 'caret-right-small', 'caret-right', 'caret-up-small', 'caret-up', 'check-radio', 'circle-add', 'circle-cancel', 'circle-check', 'circle-down', 'circle-info', 'circle-left', 'circle-ok', 'circle-pencil', 'circle-question', 'circle-remove', 'circle-right', 'circle-up', 'circle-warning', 'clock-3', 'clock', 'cloud-download', 'cloud-upload', 'cog', 'coin', 'contacts', 'credit-card', 'diamond', 'direction-arrows', 'directory', 'document', 'dollar-coin-shine', 'dot', 'double-buildings', 'edit-template', 'envelope', 'exclude', 'expand-content', 'expense', 'explore_nearby', 'eye-circle', 'eye-invisible', 'eye', 'face-meh', 'face-sad', 'face-smiley', 'feed', 'feedbacks', 'file-certified', 'file-clone', 'file-copy', 'file-csv', 'file-dispose', 'file-doc', 'file-excel', 'file-export', 'file-lock', 'file-pdf', 'file-powerpoint', 'file-search', 'file-secured', 'file-sheets', 'file-slide', 'file-verified', 'file-word', 'file', 'filter', 'folder-user', 'folder', 'format-bold', 'format-heading1', 'format-heading2', 'format-italic', 'format-list-bulleted', 'format-list-numbered', 'format-underlined', 'funnel-filter', 'global-dollar', 'global-pound', 'globe', 'graduation-cap', 'graph', 'happy-sun', 'health-bag', 'heart', 'hero-points', 'home', 'image', 'import', 'incident-siren', 'instapay-daily', 'instapay-now', 'instapay', 'list', 'loading-2', 'loading', 'location-on', 'location', 'lock', 'looks-one', 'looks-two', 'media-content', 'menu', 'money-notes', 'moneybag', 'moon', 'multiple-stars', 'multiple-users', 'near-me', 'node', 'open-folder', 'paperclip-vertical', 'paperclip', 'payment-summary', 'pencil', 'phone', 'piggy-bank', 'plane-up', 'plane', 'play-arrow', 'play-circle', 'pound-coin-shine', 'pound-sign', 'print', 'raising-hands', 'reply-arrow', 'reply', 'reschedule', 'rostering', 'salary-sacrifice', 'save', 'schedule-send', 'schedule', 'search-person', 'search', 'send', 'speaker-active', 'speaker', 'star-award', 'star-badge', 'star-circle', 'star-medal', 'star', 'steps-circle', 'stopwatch', 'suitcase', 'surfing', 'survey', 'swag-pillar-benefit', 'swag-pillar-career', 'swag-pillar-money', 'swag-pillar-work', 'swag', 'swipe-right', 'switch', 'tag', 'target', 'teams', 'thumb-down', 'thumb-up', 'timesheet', 'touch-id', 'trash-bin', 'unlock', 'user', 'video-1', 'video-2', 'wallet', 'warning', 'academic-hat-outlined', 'accommodation-outlined', 'activate-outlined', 'add-credit-card-outlined', 'add-person-outlined', 'add-section-outlined', 'add-time-outlined', 'add', 'adjustment-outlined', 'afternoon-outlined', 'ai-outlined', 'alignment-2-outlined', 'alignment-outlined', 'all-caps', 'application-outlined', 'arrow-down', 'arrow-downwards', 'arrow-left', 'arrow-leftwards', 'arrow-right', 'arrow-rightwards', 'arrow-up', 'arrow-upwards', 'article-outlined', 'at-sign', 'auto-graph-outlined', 'automotive-outlined', 'bakery-outlined', 'bar-outlined', 'beauty-outlined', 'beer-outlined', 'bell-active-outlined', 'bell-outlined', 'bell-slash-outlined', 'bill-management-outlined', 'billing-outlined', 'body-outlined', 'bold', 'bolt-outlined', 'book-outlined', 'bookmark-added-outlined', 'bookmark-checked-outlined', 'bookmark-outlined', 'box-1-outlined', 'box-check-outlined', 'box-outlined', 'bullet-points', 'cake-outlined', 'calculator-outlined', 'calendar-dates-outlined', 'calendar-star-outlined', 'call-outlined', 'call-split-outlined', 'camera-outlined', 'cancel', 'car-forward-outlined', 'cashback-outlined', 'charging-station-outlined', 'chat-bubble-outlined', 'chat-unread-outlined', 'checkmark', 'circle-add-outlined', 'circle-cancel-outlined', 'circle-down-outlined', 'circle-info-outlined', 'circle-left-outlined', 'circle-ok-outlined', 'circle-question-outlined', 'circle-remove-outlined', 'circle-right-outlined', 'circle-up-outlined', 'circle-warning-outlined', 'clock-2-outlined', 'clock-in-outlined', 'clock-out-outlined', 'clock-outlined', 'cog-outlined', 'coin-outlined', 'coin-super-outlined', 'comment-outlined', 'contacts-outlined', 'contacts-user-outlined', 'credit-card-outlined', 'cultural-site-outlined', 'cup-outlined', 'dentistry-outlined', 'direction-arrows-outlined', 'directory-outlined', 'document-outlined', 'dollar-box-outlined', 'dollar-card-outlined', 'dollar-coin-shine-outlined', 'dollar-credit-card-outlined', 'dollar-sign', 'double-buildings-outlined', 'double-left-arrows', 'double-right-arrows', 'download-box-outlined', 'download-outlined', 'edit-template-outlined', 'electronics-outlined', 'email-outlined', 'end-break-outlined', 'enter-arrow', 'entertainment-outlined', 'envelope-outlined', 'evening-outlined', 'expense-approval-outlined', 'expense-outlined', 'explore-outlined', 'extension-outlined', 'external-link', 'eye-invisible-outlined', 'eye-outlined', 'face-id', 'face-meh-outlined', 'face-open-smiley-outlined', 'face-sad-outlined', 'face-smiley-outlined', 'fastfood-outlined', 'feed-outlined', 'file-certified-outlined', 'file-clone-outlined', 'file-copy-outlined', 'file-dispose-outlined', 'file-dollar-certified-outlined', 'file-dollar-outlined', 'file-download-outlined', 'file-export-outlined', 'file-lock-outlined', 'file-outlined', 'file-pound-outlined', 'file-search-outlined', 'file-secured-outlined', 'file-statutory-outlined', 'file-verified-outlined', 'filter-outlined', 'fitness-outlined', 'folder-outlined', 'folder-upload-outlined', 'folder-user-outlined', 'form-outlined', 'funnel-filter-outline', 'goal-outlined', 'graph-outlined', 'grocery-outlined', 'hand-holding-user-outlined', 'handshake-outlined', 'happy-sun-outlined', 'health-bag-outlined', 'heart-outlined', 'home-active-outlined', 'home-outlined', 'id-card-outlined', 'image-outlined', 'import-outlined', 'instapay-outlined', 'italic', 'job-search-outlined', 'leave-approval-outlined', 'link-1', 'link-2', 'list-outlined', 'live-help-outlined', 'local_mall_outlined', 'location-on-outlined', 'location-outlined', 'lock-outlined', 'locked-file-outlined', 'log-out', 'mail-outlined', 'map-outlined', 'media-content-outlined', 'menu-close', 'menu-expand', 'menu-fold-outlined', 'menu-unfold-outlined', 'moneybag-outlined', 'moon-outlined', 'more-horizontal', 'more-vertical', 'morning-outlined', 'multiple-folders-outlined', 'multiple-users-outlined', 'near-me-outlined', 'node-outlined', 'number-points', 'number', 'overview-outlined', 'park-outlined', 'payment-summary-outlined', 'payslip-outlined', 'pencil-outlined', 'percentage', 'phone-outlined', 'piggy-bank-outlined', 'plane-outlined', 'play-circle-outlined', 'pound-box-outlined', 'pound-card-outlined', 'pound-coin-shine-outlined', 'pound-credit-card-outlined', 'print-outlined', 'propane-tank-outlined', 'qr-code-outlined', 'qualification-outlined', 're-assign', 'redeem', 'refresh', 'remove', 'reply-outlined', 'restart', 'restaurant-outlined', 'resume-outlined', 'return-arrow', 'rostering-outlined', 'safety-outlined', 'save-outlined', 'schedule-outlined', 'search-outlined', 'search-secured-outlined', 'send-outlined', 'share-1', 'share-2', 'share-outlined-2', 'share-outlined', 'shield-check-outlined', 'shop-outlined', 'shopping_basket_outlined', 'show-chart-outlined', 'single-down-arrow', 'single-left-arrow', 'single-right-arrow', 'single-up-arrow', 'smart-match-outlined', 'sparkle-outlined', 'speaker-active-outlined', 'speaker-outlined', 'star-circle-outlined', 'star-outlined', 'start-break-outlined', 'stash-outlined', 'stopwatch-outlined', 'strikethrough', 'styler-outlined', 'suitcase-clock-outlined', 'suitcase-outlined', 'survey-outlined', 'switch-outlined', 'sync', 'tag-outlined', 'target-outlined', 'tennis-outlined', 'thumb-down-outlined', 'thumb-up-outlined', 'ticket-outlined', 'timesheet-outlined', 'timesheets-outlined', 'today-outlined', 'transfer', 'transportation-outlined', 'trash-bin-outlined', 'umbrela-outlined', 'unavailability-outlined', 'unavailable', 'underline', 'union-outlined', 'unlock-outlined', 'upload-outlined', 'user-circle-outlined', 'user-gear-outlined', 'user-outlined', 'user-rectangle-outlined', 'video-1-outlined', 'video-2-outlined', 'volunteer-outlined', 'wallet-outlined', 'wellness-outlined'];
8147
+ var IconList = ['activate', 'add-emoji', 'add-person', 'adjustment', 'alignment', 'antenna', 'archive', 'assignment-warning', 'bank', 'bell', 'billing', 'bolt', 'bookmark-added', 'bookmark-checked', 'bookmark', 'box-check', 'box', 'bpay', 'buildings', 'cake', 'calendar-clock', 'calendar', 'candy-box-menu', 'caret-down-small', 'caret-down', 'caret-left-small', 'caret-left', 'caret-right-small', 'caret-right', 'caret-up-small', 'caret-up', 'check-radio', 'circle-add', 'circle-cancel', 'circle-check', 'circle-down', 'circle-info', 'circle-left', 'circle-ok', 'circle-pencil', 'circle-question', 'circle-remove', 'circle-right', 'circle-up', 'circle-warning', 'clock-3', 'clock', 'cloud-download', 'cloud-upload', 'cog', 'coin', 'contacts', 'credit-card', 'diamond', 'direction-arrows', 'directory', 'document', 'dollar-coin-shine', 'dot', 'double-buildings', 'edit-template', 'envelope', 'exclude', 'expand-content', 'expense', 'explore_nearby', 'eye-circle', 'eye-invisible', 'eye', 'face-meh', 'face-sad', 'face-smiley', 'feed', 'feedbacks', 'file-certified', 'file-clone', 'file-copy', 'file-csv', 'file-dispose', 'file-doc', 'file-excel', 'file-export', 'file-lock', 'file-pdf', 'file-powerpoint', 'file-search', 'file-secured', 'file-sheets', 'file-slide', 'file-verified', 'file-word', 'file', 'filter', 'folder-user', 'folder', 'format-bold', 'format-heading1', 'format-heading2', 'format-italic', 'format-list-bulleted', 'format-list-numbered', 'format-underlined', 'funnel-filter', 'global-dollar', 'global-pound', 'globe', 'graduation-cap', 'graph', 'happy-sun', 'health-bag', 'heart', 'hero-points', 'home', 'image', 'import', 'incident-siren', 'instapay-daily', 'instapay-now', 'instapay', 'list', 'loading-2', 'loading', 'location-on', 'location', 'lock', 'looks-one', 'looks-two', 'media-content', 'menu', 'money-notes', 'moneybag', 'moon', 'multiple-stars', 'multiple-users', 'near-me', 'node', 'open-folder', 'paperclip-vertical', 'paperclip', 'payment-summary', 'pencil', 'phone', 'piggy-bank', 'plane-up', 'plane', 'play-arrow', 'play-circle', 'pound-coin-shine', 'pound-sign', 'print', 'raising-hands', 'reply-arrow', 'reply', 'reschedule', 'rostering', 'salary-sacrifice', 'save', 'schedule-send', 'schedule', 'search-person', 'search', 'send', 'speaker-active', 'speaker', 'star-award', 'star-badge', 'star-circle', 'star-medal', 'star', 'steps-circle', 'stopwatch', 'suitcase', 'surfing', 'survey', 'swag-pillar-benefit', 'swag-pillar-career', 'swag-pillar-money', 'swag-pillar-work', 'swag', 'swipe-right', 'switch', 'tag', 'target', 'teams', 'thumb-down', 'thumb-up', 'timesheet', 'touch-id', 'trash-bin', 'unlock', 'user', 'video-1', 'video-2', 'wallet', 'warning', 'academic-hat-outlined', 'accommodation-outlined', 'activate-outlined', 'add-credit-card-outlined', 'add-person-outlined', 'add-section-outlined', 'add-time-outlined', 'add', 'adjustment-outlined', 'afternoon-outlined', 'ai-outlined', 'alignment-2-outlined', 'alignment-outlined', 'all-caps', 'application-outlined', 'arrow-down', 'arrow-downwards', 'arrow-left', 'arrow-leftwards', 'arrow-right', 'arrow-rightwards', 'arrow-up', 'arrow-upwards', 'article-outlined', 'at-sign', 'auto-graph-outlined', 'automotive-outlined', 'bakery-outlined', 'bar-outlined', 'beauty-outlined', 'beer-outlined', 'bell-active-outlined', 'bell-outlined', 'bell-slash-outlined', 'bill-management-outlined', 'billing-outlined', 'body-outlined', 'bold', 'bolt-outlined', 'book-outlined', 'bookmark-added-outlined', 'bookmark-checked-outlined', 'bookmark-outlined', 'box-1-outlined', 'box-check-outlined', 'box-outlined', 'bullet-points', 'cake-outlined', 'calculator-outlined', 'calendar-dates-outlined', 'calendar-star-outlined', 'call-outlined', 'call-split-outlined', 'camera-outlined', 'cancel', 'car-forward-outlined', 'cashback-outlined', 'charging-station-outlined', 'chat-bubble-outlined', 'chat-unread-outlined', 'checkmark', 'circle-add-outlined', 'circle-cancel-outlined', 'circle-down-outlined', 'circle-info-outlined', 'circle-left-outlined', 'circle-ok-outlined', 'circle-question-outlined', 'circle-remove-outlined', 'circle-right-outlined', 'circle-up-outlined', 'circle-warning-outlined', 'clock-2-outlined', 'clock-in-outlined', 'clock-out-outlined', 'clock-outlined', 'cog-outlined', 'coin-outlined', 'coin-super-outlined', 'comment-outlined', 'contacts-outlined', 'contacts-user-outlined', 'credit-card-outlined', 'cultural-site-outlined', 'cup-outlined', 'dentistry-outlined', 'direction-arrows-outlined', 'directory-outlined', 'document-outlined', 'dollar-box-outlined', 'dollar-card-outlined', 'dollar-coin-shine-outlined', 'dollar-credit-card-outlined', 'dollar-sign', 'double-buildings-outlined', 'double-left-arrows', 'double-right-arrows', 'download-box-outlined', 'download-outlined', 'edit-template-outlined', 'electronics-outlined', 'email-outlined', 'end-break-outlined', 'enter-arrow', 'entertainment-outlined', 'envelope-outlined', 'evening-outlined', 'expense-approval-outlined', 'expense-outlined', 'explore-outlined', 'extension-outlined', 'external-link', 'eye-invisible-outlined', 'eye-outlined', 'face-id', 'face-meh-outlined', 'face-open-smiley-outlined', 'face-sad-outlined', 'face-smiley-outlined', 'fastfood-outlined', 'feed-outlined', 'file-certified-outlined', 'file-clone-outlined', 'file-copy-outlined', 'file-dispose-outlined', 'file-dollar-certified-outlined', 'file-dollar-outlined', 'file-download-outlined', 'file-export-outlined', 'file-lock-outlined', 'file-outlined', 'file-pound-outlined', 'file-search-outlined', 'file-secured-outlined', 'file-statutory-outlined', 'file-verified-outlined', 'filter-outlined', 'fitness-outlined', 'folder-outlined', 'folder-upload-outlined', 'folder-user-outlined', 'form-outlined', 'funnel-filter-outline', 'goal-outlined', 'graph-outlined', 'grocery-outlined', 'hand-holding-user-outlined', 'handshake-outlined', 'happy-sun-outlined', 'health-bag-outlined', 'heart-outlined', 'home-active-outlined', 'home-outlined', 'id-card-outlined', 'image-outlined', 'import-outlined', 'instapay-outlined', 'italic', 'job-search-outlined', 'leave-approval-outlined', 'lighting-outlined', 'link-1', 'link-2', 'list-outlined', 'live-help-outlined', 'local_mall_outlined', 'location-on-outlined', 'location-outlined', 'lock-outlined', 'locked-file-outlined', 'log-out', 'mail-outlined', 'map-outlined', 'media-content-outlined', 'menu-close', 'menu-expand', 'menu-fold-outlined', 'menu-unfold-outlined', 'moneybag-outlined', 'moon-outlined', 'more-horizontal', 'more-vertical', 'morning-outlined', 'multiple-folders-outlined', 'multiple-users-outlined', 'near-me-outlined', 'node-outlined', 'number-points', 'number', 'overview-outlined', 'park-outlined', 'payment-summary-outlined', 'payslip-outlined', 'pencil-outlined', 'percentage', 'phone-outlined', 'piggy-bank-outlined', 'plane-outlined', 'play-circle-outlined', 'pound-box-outlined', 'pound-card-outlined', 'pound-coin-shine-outlined', 'pound-credit-card-outlined', 'print-outlined', 'propane-tank-outlined', 'qr-code-outlined', 'qualification-outlined', 're-assign', 'redeem', 'refresh', 'remove', 'reply-outlined', 'restart', 'restaurant-outlined', 'resume-outlined', 'return-arrow', 'rostering-outlined', 'safety-outlined', 'save-outlined', 'schedule-outlined', 'search-outlined', 'search-secured-outlined', 'send-outlined', 'share-1', 'share-2', 'share-outlined-2', 'share-outlined', 'shield-check-outlined', 'shop-outlined', 'shopping_basket_outlined', 'show-chart-outlined', 'single-down-arrow', 'single-left-arrow', 'single-right-arrow', 'single-up-arrow', 'smart-match-outlined', 'sparkle-outlined', 'speaker-active-outlined', 'speaker-outlined', 'star-circle-outlined', 'star-outlined', 'start-break-outlined', 'stash-outlined', 'stopwatch-outlined', 'strikethrough', 'styler-outlined', 'suitcase-clock-outlined', 'suitcase-outlined', 'survey-outlined', 'switch-outlined', 'sync', 'tag-outlined', 'target-outlined', 'tennis-outlined', 'thumb-down-outlined', 'thumb-up-outlined', 'ticket-outlined', 'timesheet-outlined', 'timesheets-outlined', 'today-outlined', 'transfer', 'transportation-outlined', 'trash-bin-outlined', 'umbrela-outlined', 'unavailability-outlined', 'unavailable', 'underline', 'union-outlined', 'unlock-outlined', 'upload-outlined', 'user-circle-outlined', 'user-gear-outlined', 'user-outlined', 'user-rectangle-outlined', 'video-1-outlined', 'video-2-outlined', 'volunteer-outlined', 'wallet-outlined', 'wellness-outlined'];
8148
8148
 
8149
8149
  var activate = 59000;
8150
8150
  var adjustment = 59003;
@@ -8225,19 +8225,19 @@ var bold = 59232;
8225
8225
  var cancel = 59249;
8226
8226
  var checkmark = 59255;
8227
8227
  var italic = 59352;
8228
- var local_mall_outlined = 59359;
8229
- var number$2 = 59382;
8230
- var percentage = 59388;
8231
- var redeem = 59402;
8232
- var refresh = 59403;
8233
- var remove$1 = 59404;
8234
- var restart = 59406;
8235
- var shopping_basket_outlined = 59423;
8236
- var strikethrough = 59438;
8237
- var sync = 59444;
8238
- var transfer = 59454;
8239
- var unavailable = 59459;
8240
- var underline = 59460;
8228
+ var local_mall_outlined = 59360;
8229
+ var number$2 = 59383;
8230
+ var percentage = 59389;
8231
+ var redeem = 59403;
8232
+ var refresh = 59404;
8233
+ var remove$1 = 59405;
8234
+ var restart = 59407;
8235
+ var shopping_basket_outlined = 59424;
8236
+ var strikethrough = 59439;
8237
+ var sync = 59445;
8238
+ var transfer = 59455;
8239
+ var unavailable = 59460;
8240
+ var underline = 59461;
8241
8241
  var glyphMap = {
8242
8242
  activate: activate,
8243
8243
  "add-emoji": 59001,
@@ -8594,124 +8594,125 @@ var glyphMap = {
8594
8594
  italic: italic,
8595
8595
  "job-search-outlined": 59353,
8596
8596
  "leave-approval-outlined": 59354,
8597
- "link-1": 59355,
8598
- "link-2": 59356,
8599
- "list-outlined": 59357,
8600
- "live-help-outlined": 59358,
8597
+ "lighting-outlined": 59355,
8598
+ "link-1": 59356,
8599
+ "link-2": 59357,
8600
+ "list-outlined": 59358,
8601
+ "live-help-outlined": 59359,
8601
8602
  local_mall_outlined: local_mall_outlined,
8602
- "location-on-outlined": 59360,
8603
- "location-outlined": 59361,
8604
- "lock-outlined": 59362,
8605
- "locked-file-outlined": 59363,
8606
- "log-out": 59364,
8607
- "mail-outlined": 59365,
8608
- "map-outlined": 59366,
8609
- "media-content-outlined": 59367,
8610
- "menu-close": 59368,
8611
- "menu-expand": 59369,
8612
- "menu-fold-outlined": 59370,
8613
- "menu-unfold-outlined": 59371,
8614
- "moneybag-outlined": 59372,
8615
- "moon-outlined": 59373,
8616
- "more-horizontal": 59374,
8617
- "more-vertical": 59375,
8618
- "morning-outlined": 59376,
8619
- "multiple-folders-outlined": 59377,
8620
- "multiple-users-outlined": 59378,
8621
- "near-me-outlined": 59379,
8622
- "node-outlined": 59380,
8623
- "number-points": 59381,
8603
+ "location-on-outlined": 59361,
8604
+ "location-outlined": 59362,
8605
+ "lock-outlined": 59363,
8606
+ "locked-file-outlined": 59364,
8607
+ "log-out": 59365,
8608
+ "mail-outlined": 59366,
8609
+ "map-outlined": 59367,
8610
+ "media-content-outlined": 59368,
8611
+ "menu-close": 59369,
8612
+ "menu-expand": 59370,
8613
+ "menu-fold-outlined": 59371,
8614
+ "menu-unfold-outlined": 59372,
8615
+ "moneybag-outlined": 59373,
8616
+ "moon-outlined": 59374,
8617
+ "more-horizontal": 59375,
8618
+ "more-vertical": 59376,
8619
+ "morning-outlined": 59377,
8620
+ "multiple-folders-outlined": 59378,
8621
+ "multiple-users-outlined": 59379,
8622
+ "near-me-outlined": 59380,
8623
+ "node-outlined": 59381,
8624
+ "number-points": 59382,
8624
8625
  number: number$2,
8625
- "overview-outlined": 59383,
8626
- "park-outlined": 59384,
8627
- "payment-summary-outlined": 59385,
8628
- "payslip-outlined": 59386,
8629
- "pencil-outlined": 59387,
8626
+ "overview-outlined": 59384,
8627
+ "park-outlined": 59385,
8628
+ "payment-summary-outlined": 59386,
8629
+ "payslip-outlined": 59387,
8630
+ "pencil-outlined": 59388,
8630
8631
  percentage: percentage,
8631
- "phone-outlined": 59389,
8632
- "piggy-bank-outlined": 59390,
8633
- "plane-outlined": 59391,
8634
- "play-circle-outlined": 59392,
8635
- "pound-box-outlined": 59393,
8636
- "pound-card-outlined": 59394,
8637
- "pound-coin-shine-outlined": 59395,
8638
- "pound-credit-card-outlined": 59396,
8639
- "print-outlined": 59397,
8640
- "propane-tank-outlined": 59398,
8641
- "qr-code-outlined": 59399,
8642
- "qualification-outlined": 59400,
8643
- "re-assign": 59401,
8632
+ "phone-outlined": 59390,
8633
+ "piggy-bank-outlined": 59391,
8634
+ "plane-outlined": 59392,
8635
+ "play-circle-outlined": 59393,
8636
+ "pound-box-outlined": 59394,
8637
+ "pound-card-outlined": 59395,
8638
+ "pound-coin-shine-outlined": 59396,
8639
+ "pound-credit-card-outlined": 59397,
8640
+ "print-outlined": 59398,
8641
+ "propane-tank-outlined": 59399,
8642
+ "qr-code-outlined": 59400,
8643
+ "qualification-outlined": 59401,
8644
+ "re-assign": 59402,
8644
8645
  redeem: redeem,
8645
8646
  refresh: refresh,
8646
8647
  remove: remove$1,
8647
- "reply-outlined": 59405,
8648
+ "reply-outlined": 59406,
8648
8649
  restart: restart,
8649
- "restaurant-outlined": 59407,
8650
- "resume-outlined": 59408,
8651
- "return-arrow": 59409,
8652
- "rostering-outlined": 59410,
8653
- "safety-outlined": 59411,
8654
- "save-outlined": 59412,
8655
- "schedule-outlined": 59413,
8656
- "search-outlined": 59414,
8657
- "search-secured-outlined": 59415,
8658
- "send-outlined": 59416,
8659
- "share-1": 59417,
8660
- "share-2": 59418,
8661
- "share-outlined-2": 59419,
8662
- "share-outlined": 59420,
8663
- "shield-check-outlined": 59421,
8664
- "shop-outlined": 59422,
8650
+ "restaurant-outlined": 59408,
8651
+ "resume-outlined": 59409,
8652
+ "return-arrow": 59410,
8653
+ "rostering-outlined": 59411,
8654
+ "safety-outlined": 59412,
8655
+ "save-outlined": 59413,
8656
+ "schedule-outlined": 59414,
8657
+ "search-outlined": 59415,
8658
+ "search-secured-outlined": 59416,
8659
+ "send-outlined": 59417,
8660
+ "share-1": 59418,
8661
+ "share-2": 59419,
8662
+ "share-outlined-2": 59420,
8663
+ "share-outlined": 59421,
8664
+ "shield-check-outlined": 59422,
8665
+ "shop-outlined": 59423,
8665
8666
  shopping_basket_outlined: shopping_basket_outlined,
8666
- "show-chart-outlined": 59424,
8667
- "single-down-arrow": 59425,
8668
- "single-left-arrow": 59426,
8669
- "single-right-arrow": 59427,
8670
- "single-up-arrow": 59428,
8671
- "smart-match-outlined": 59429,
8672
- "sparkle-outlined": 59430,
8673
- "speaker-active-outlined": 59431,
8674
- "speaker-outlined": 59432,
8675
- "star-circle-outlined": 59433,
8676
- "star-outlined": 59434,
8677
- "start-break-outlined": 59435,
8678
- "stash-outlined": 59436,
8679
- "stopwatch-outlined": 59437,
8667
+ "show-chart-outlined": 59425,
8668
+ "single-down-arrow": 59426,
8669
+ "single-left-arrow": 59427,
8670
+ "single-right-arrow": 59428,
8671
+ "single-up-arrow": 59429,
8672
+ "smart-match-outlined": 59430,
8673
+ "sparkle-outlined": 59431,
8674
+ "speaker-active-outlined": 59432,
8675
+ "speaker-outlined": 59433,
8676
+ "star-circle-outlined": 59434,
8677
+ "star-outlined": 59435,
8678
+ "start-break-outlined": 59436,
8679
+ "stash-outlined": 59437,
8680
+ "stopwatch-outlined": 59438,
8680
8681
  strikethrough: strikethrough,
8681
- "styler-outlined": 59439,
8682
- "suitcase-clock-outlined": 59440,
8683
- "suitcase-outlined": 59441,
8684
- "survey-outlined": 59442,
8685
- "switch-outlined": 59443,
8682
+ "styler-outlined": 59440,
8683
+ "suitcase-clock-outlined": 59441,
8684
+ "suitcase-outlined": 59442,
8685
+ "survey-outlined": 59443,
8686
+ "switch-outlined": 59444,
8686
8687
  sync: sync,
8687
- "tag-outlined": 59445,
8688
- "target-outlined": 59446,
8689
- "tennis-outlined": 59447,
8690
- "thumb-down-outlined": 59448,
8691
- "thumb-up-outlined": 59449,
8692
- "ticket-outlined": 59450,
8693
- "timesheet-outlined": 59451,
8694
- "timesheets-outlined": 59452,
8695
- "today-outlined": 59453,
8688
+ "tag-outlined": 59446,
8689
+ "target-outlined": 59447,
8690
+ "tennis-outlined": 59448,
8691
+ "thumb-down-outlined": 59449,
8692
+ "thumb-up-outlined": 59450,
8693
+ "ticket-outlined": 59451,
8694
+ "timesheet-outlined": 59452,
8695
+ "timesheets-outlined": 59453,
8696
+ "today-outlined": 59454,
8696
8697
  transfer: transfer,
8697
- "transportation-outlined": 59455,
8698
- "trash-bin-outlined": 59456,
8699
- "umbrela-outlined": 59457,
8700
- "unavailability-outlined": 59458,
8698
+ "transportation-outlined": 59456,
8699
+ "trash-bin-outlined": 59457,
8700
+ "umbrela-outlined": 59458,
8701
+ "unavailability-outlined": 59459,
8701
8702
  unavailable: unavailable,
8702
8703
  underline: underline,
8703
- "union-outlined": 59461,
8704
- "unlock-outlined": 59462,
8705
- "upload-outlined": 59463,
8706
- "user-circle-outlined": 59464,
8707
- "user-gear-outlined": 59465,
8708
- "user-outlined": 59466,
8709
- "user-rectangle-outlined": 59467,
8710
- "video-1-outlined": 59468,
8711
- "video-2-outlined": 59469,
8712
- "volunteer-outlined": 59470,
8713
- "wallet-outlined": 59471,
8714
- "wellness-outlined": 59472
8704
+ "union-outlined": 59462,
8705
+ "unlock-outlined": 59463,
8706
+ "upload-outlined": 59464,
8707
+ "user-circle-outlined": 59465,
8708
+ "user-gear-outlined": 59466,
8709
+ "user-outlined": 59467,
8710
+ "user-rectangle-outlined": 59468,
8711
+ "video-1-outlined": 59469,
8712
+ "video-2-outlined": 59470,
8713
+ "volunteer-outlined": 59471,
8714
+ "wallet-outlined": 59472,
8715
+ "wellness-outlined": 59473
8715
8716
  };
8716
8717
 
8717
8718
  var HeroIcon = reactNativeVectorIcons.createIconSet(glyphMap, 'hero-icons-mobile', 'hero-icons-mobile.ttf');
@@ -21062,7 +21063,7 @@ Basis.prototype = {
21062
21063
  this._y0 = this._y1, this._y1 = y;
21063
21064
  }
21064
21065
  };
21065
- function basis (context) {
21066
+ function curveBasis (context) {
21066
21067
  return new Basis(context);
21067
21068
  }
21068
21069
 
@@ -21645,7 +21646,7 @@ var Line = function Line(_ref) {
21645
21646
  return ((_xScale = xScale(labels[i])) !== null && _xScale !== void 0 ? _xScale : 0) + xScale.bandwidth() / 2;
21646
21647
  }).y(function (d) {
21647
21648
  return yScale(d !== null && d !== void 0 ? d : 0);
21648
- }).curve(basis);
21649
+ }).curve(curveBasis);
21649
21650
  }, [xScale, yScale, labels]);
21650
21651
 
21651
21652
  // Generate path data
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hero-design/rn-work-uikit",
3
- "version": "1.9.3",
3
+ "version": "1.9.4",
4
4
  "license": "MIT",
5
5
  "main": "lib/index.js",
6
6
  "module": "es/index.js",
@@ -22,7 +22,7 @@
22
22
  "dependencies": {
23
23
  "@emotion/native": "^11.9.3",
24
24
  "@emotion/react": "^11.9.3",
25
- "@hero-design/rn": "^8.112.4",
25
+ "@hero-design/rn": "^8.113.0",
26
26
  "hero-editor": "^1.17.0"
27
27
  },
28
28
  "peerDependencies": {
@@ -5,7 +5,7 @@ import { StyleSheet } from 'react-native';
5
5
  import { Box, useTheme } from '@hero-design/rn';
6
6
  import { generateBorderStyle, generateMarginStyle } from './utils';
7
7
 
8
- export interface FormGroupProps extends ViewProps {
8
+ interface FormGroupProps extends ViewProps {
9
9
  /**
10
10
  * The children of the FormGroup. In order for the group styling to work,
11
11
  * they must be either HD form components (TextInput, Select, Pickers,...) or enhanced HD input components
@@ -1,6 +1,6 @@
1
1
  import type { EventEmitter } from 'events';
2
2
 
3
- export interface Listener<T> {
3
+ interface Listener<T> {
4
4
  (data: T): void;
5
5
  }
6
6
 
@@ -6,7 +6,7 @@ import {
6
6
  StyledHelperText,
7
7
  } from './StyledTextInput';
8
8
 
9
- export interface ErrorOrHelpTextProps {
9
+ interface ErrorOrHelpTextProps {
10
10
  /** Error message to display (takes priority) */
11
11
  error?: string;
12
12
  /** Helper text to display when no error */
@@ -6,7 +6,7 @@ import type { TextInputVariant } from './types';
6
6
  import { useTheme } from '../../theme';
7
7
  import { LABEL_ANIMATION_DURATION } from './constants';
8
8
 
9
- export interface FloatingLabelProps {
9
+ interface FloatingLabelProps {
10
10
  /** The text to display in the label */
11
11
  label: string;
12
12
  /** Input variant that affects animation positioning */
@@ -50,7 +50,7 @@ const DefaultTextInput = React.forwardRef<TextInputRef, DefaultTextInputProps>(
50
50
  }
51
51
  );
52
52
 
53
- export interface InputComponentProps {
53
+ interface InputComponentProps {
54
54
  /** Input type ('text' or 'textarea') */
55
55
  variant: TextInputVariant;
56
56
  /** All props passed to the underlying TextInput */
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import { StyledCharacterCount } from './StyledTextInput';
3
3
  import type { State } from './StyledTextInput';
4
4
 
5
- export interface MaxLengthMessageProps {
5
+ interface MaxLengthMessageProps {
6
6
  /** Maximum allowed characters (undefined = no limit) */
7
7
  maxLength?: number;
8
8
  /** Current input state for styling */
@@ -5,7 +5,7 @@ import type { ViewProps } from 'react-native';
5
5
  import { View } from 'react-native';
6
6
  import { StyledPrefixComponentWrapper, type State } from './StyledTextInput';
7
7
 
8
- export interface PrefixComponentProps extends ViewProps {
8
+ interface PrefixComponentProps extends ViewProps {
9
9
  /** Current input state for styling decisions */
10
10
  state: State;
11
11
  /** Icon name string or custom React element to display */
@@ -3,7 +3,7 @@ import type { IconName } from '@hero-design/rn';
3
3
  import { Icon } from '@hero-design/rn';
4
4
  import type { State } from './StyledTextInput';
5
5
 
6
- export interface SuffixComponentProps {
6
+ interface SuffixComponentProps {
7
7
  /** Current input state for styling decisions */
8
8
  state: State;
9
9
  /** Whether to show loading spinner instead of suffix */
@@ -2,7 +2,7 @@ import type React from 'react';
2
2
  import { ThemeProvider as BaseThemeProvider, useTheme } from '@hero-design/rn';
3
3
  import type { Theme } from './getTheme';
4
4
 
5
- export interface ThemeProviderProps {
5
+ interface ThemeProviderProps {
6
6
  theme: Partial<Theme> | ((outerTheme: Theme) => Theme);
7
7
  children: React.ReactNode;
8
8
  }
@@ -1,64 +0,0 @@
1
- ---
2
- pattern: "**/*.{ts,tsx}"
3
- description: "Performance optimization rules for React Native components in rn-work-uikit package"
4
- ---
5
-
6
- # Performance Optimization Rules for RN Work UIKit
7
-
8
- ## React Native Performance Best Practices
9
-
10
- ### Component Optimization
11
- - Use `React.memo()` for components that receive stable props
12
- - Implement `useMemo()` for expensive calculations
13
- - Use `useCallback()` for event handlers passed to child components
14
- - Avoid creating objects/functions in render methods
15
- - Prefer `useState` functional updates when state depends on previous state
16
-
17
- ### List Performance
18
- - Use `FlatList` or `SectionList` instead of `ScrollView` with `map()`
19
- - Implement `getItemLayout` for `FlatList` when item heights are known
20
- - Use `keyExtractor` prop for consistent item identification
21
- - Implement `removeClippedSubviews` for large lists
22
- - Use `windowSize` and `initialNumToRender` for performance tuning
23
-
24
- ### Memory Management
25
- - Clean up subscriptions in `useEffect` cleanup functions
26
- - Use `InteractionManager.runAfterInteractions()` for non-critical operations
27
- - Avoid memory leaks by properly unmounting components
28
- - Use `React.useRef()` instead of `useState` for mutable values
29
- - Implement proper error boundaries to prevent crashes
30
-
31
- ### Animation Performance
32
- - Use `Animated` API for smooth 60fps animations
33
- - Prefer `transform` and `opacity` animations over layout changes
34
- - Use `useNativeDriver: true` when possible
35
- - Avoid animating `width`, `height`, or `top` properties
36
- - Use `LayoutAnimation` for list item changes
37
-
38
- ### Bundle Size Optimization
39
- - Use dynamic imports for large components (`React.lazy()`)
40
- - Implement code splitting for feature modules
41
- - Remove unused dependencies and imports
42
- - Use tree shaking compatible libraries
43
- - Optimize asset sizes and formats
44
-
45
- ### Work-Specific Performance Considerations
46
- - Test with work-typical data sizes (large datasets, complex forms)
47
- - Optimize for work app's specific use cases
48
- - Ensure smooth performance on older devices
49
- - Test with work theme overrides and custom styling
50
- - Monitor performance metrics in work environment
51
-
52
- ### Performance Monitoring
53
- - Use React DevTools Profiler for component analysis
54
- - Implement performance logging for critical paths
55
- - Monitor memory usage during development
56
- - Test performance on various device types
57
- - Use Flipper for React Native debugging
58
-
59
- ### Anti-Patterns to Avoid
60
- - Don't use `console.log` in production builds
61
- - Avoid inline object/function creation in render
62
- - Don't use `setState` in render methods
63
- - Avoid unnecessary re-renders with proper dependency arrays
64
- - Don't ignore performance warnings from React Native
@@ -1,202 +0,0 @@
1
- ---
2
- pattern: "**/*.{ts,tsx}"
3
- description: "Work-specific React Native component library rules extending base rn package"
4
- alwaysApply: false
5
- ---
6
-
7
- # RN Work UIKit Specific Rules
8
-
9
- ## Package Context
10
- This is the work-specific React Native component library that extends @hero-design/rn with work-focused components like TextInput, specialized themes, and work-specific patterns.
11
-
12
- ## Component Structure Guidelines
13
-
14
- ### File Organization
15
- - **Component files**: `ComponentName/index.tsx` (main component)
16
- - **Styled components**: `ComponentName/StyledComponentName.tsx` (e.g., `StyledTextInput.tsx`)
17
- - **Sub-components**: `ComponentName/SubComponent.tsx` (e.g., `FloatingLabel.tsx`, `ErrorOrHelpText.tsx`)
18
- - **Types**: `ComponentName/types.ts` (if complex types are needed)
19
- - **Tests**: `ComponentName/__tests__/ComponentName.spec.tsx`
20
-
21
- ### Component Structure Example
22
- ```tsx
23
- // TextInput/index.tsx
24
- import React, { forwardRef, useCallback } from 'react';
25
- import type { StyleProp, ViewStyle } from 'react-native';
26
- import { StyledContainer, StyledBorder, StyledInputWrapper } from './StyledTextInput';
27
- import { useTheme } from '../../theme';
28
- import FloatingLabel from './FloatingLabel';
29
- import InputRow from './InputRow';
30
- import type { TextInputProps, TextInputHandles } from './types';
31
-
32
- export interface TextInputProps {
33
- /** Label for the input field */
34
- label?: string;
35
- /** Error message to display */
36
- error?: string;
37
- /** Help text to display below input */
38
- helpText?: string;
39
- /** Whether the field is required */
40
- required?: boolean;
41
- /** Whether the field is disabled */
42
- disabled?: boolean;
43
- /** Input value */
44
- value?: string;
45
- /** Input variant */
46
- variant?: 'text' | 'textarea';
47
- /** Additional style */
48
- style?: StyleProp<ViewStyle>;
49
- /** Testing id */
50
- testID?: string;
51
- }
52
-
53
- export const InternalTextInput = forwardRef<TextInputHandles, TextInputProps>(
54
- ({ label, error, helpText, required, disabled = false, value, variant = 'text', style, testID, ...props }, ref) => {
55
- const [isFocused, setIsFocused] = React.useState(false);
56
- const theme = useTheme();
57
-
58
- const handleFocus = useCallback(() => setIsFocused(true), []);
59
- const handleBlur = useCallback(() => setIsFocused(false), []);
60
-
61
- return (
62
- <StyledContainer
63
- style={style}
64
- themeFocused={isFocused}
65
- themeHasError={!!error}
66
- testID={testID}
67
- >
68
- <StyledBorder themeFocused={isFocused} themeState={getState({ disabled, error })} />
69
- <StyledInputWrapper>
70
- {!!label && (
71
- <FloatingLabel
72
- label={label}
73
- variant={variant}
74
- isFocused={isFocused}
75
- required={required}
76
- />
77
- )}
78
- <InputRow
79
- variant={variant}
80
- nativeInputProps={{
81
- ...props,
82
- onFocus: handleFocus,
83
- onBlur: handleBlur,
84
- value,
85
- }}
86
- />
87
- <ErrorOrHelpText error={error} helpText={helpText} />
88
- </StyledInputWrapper>
89
- </StyledContainer>
90
- );
91
- }
92
- );
93
- ```
94
-
95
- ### Styled Component Conventions
96
- - **Naming**: `const StyledComponentName = styled.View\`\``
97
- - **Props naming**: Use descriptive names like `themeFocused`, `themeHasError`, `themeState`
98
- - **Theme access**: Use component-specific theme tokens via `theme.__hd__.componentName.*` instead of global theme tokens
99
-
100
- ```tsx
101
- // StyledTextInput.tsx
102
- import styled from '@emotion/native';
103
-
104
- interface StyledTextInputProps {
105
- themeFocused: boolean;
106
- themeHasError: boolean;
107
- }
108
-
109
- const StyledContainer = styled.View<StyledTextInputProps>`
110
- ${({ theme, themeFocused, themeHasError }) => `
111
- background-color: ${theme.__hd__.textInput.colors.containerBackground};
112
- border-color: ${themeFocused
113
- ? theme.__hd__.textInput.colors.border.focused
114
- : theme.__hd__.textInput.colors.border.default};
115
- border-width: ${theme.__hd__.textInput.borderWidth};
116
- border-radius: ${theme.__hd__.textInput.borderRadius};
117
- `}
118
- `;
119
- ```
120
-
121
- ## Theme Token Usage
122
-
123
- ### Adding Theme Tokens
124
- 1. **Define in theme**: Add new tokens to work-specific theme files
125
- 2. **Use consistently**: Apply tokens across work components
126
- 3. **Document usage**: Add JSDoc comments for token purposes
127
-
128
- ### Theme Token Examples
129
- ```tsx
130
- // Using work-specific theme tokens
131
- background-color: ${theme.__hd__.textInput.colors.containerBackground};
132
- border-color: ${theme.__hd__.textInput.colors.border.focused};
133
- border-width: ${theme.__hd__.textInput.borderWidth};
134
- border-radius: ${theme.__hd__.textInput.borderRadius};
135
-
136
- // Using global theme tokens when needed
137
- margin: ${theme.spacing.md}; // Global spacing
138
- font-family: ${theme.typography.fontFamily}; // Global typography
139
- ```
140
-
141
- ### Modifying Theme Tokens
142
- - **Work-specific changes**: Update work theme files
143
- - **Component-specific**: Use component theme overrides
144
- - **Testing**: Verify changes across all work components
145
-
146
- ## Component Development Rules
147
-
148
- ### Basic Rules
149
- - **Prefer functional components with hooks over class components**
150
- - Import `styled` from `@hero-design/rn` for consistency with base theme
151
- - Use `useTheme()` hook instead of prop drilling theme
152
- - Extend base components from `@hero-design/rn` when possible
153
- - Follow work-specific design patterns and accessibility requirements
154
- - Use TypeScript strictly - no `any` types without good reason
155
- - Fix linting errors immediately
156
- - Use proper React Native components (`Text`, `View`) instead of HTML elements
157
-
158
- ### Props Interface Guidelines
159
- ```tsx
160
- // Good example from TextInput component
161
- export interface TextInputProps {
162
- /** Label for the input field */
163
- label?: string;
164
- /** Error message to display */
165
- error?: string;
166
- /** Help text to display below input */
167
- helpText?: string;
168
- /** Whether the field is required */
169
- required?: boolean;
170
- /** Whether the field is disabled */
171
- disabled?: boolean;
172
- /** Input value */
173
- value?: string;
174
- /** Input variant */
175
- variant?: 'text' | 'textarea';
176
- /** Additional style */
177
- style?: StyleProp<ViewStyle>;
178
- /** Testing id */
179
- testID?: string;
180
- }
181
- ```
182
-
183
- ## Documentation Rules
184
- - Document Props interfaces with JSDoc comments directly on each property: `/** Description */`
185
- - Use simplified @param comments: `@param props - The component props (see [ComponentName]Props interface for details)`
186
- - Avoid mentioning implementation details like "memoized component" in JSDoc comments
187
- - Focus JSDoc comments on what the component does, not how it's implemented
188
- - Keep type information in the Props interface, not duplicated in @param comments
189
-
190
- ## Work-Specific Patterns
191
- - Components should work with work theme overrides
192
- - Test with work-specific color palettes and spacing
193
- - Ensure compatibility with work app requirements
194
- - Follow work accessibility guidelines
195
- - Test performance with work-typical data sizes
196
-
197
- ## Quality Gates
198
- - All tests must pass with 100% coverage on main components
199
- - No linting errors
200
- - No TypeScript errors
201
- - Components must work with both base and work themes
202
- - Accessibility compliance for work environment
@@ -1,114 +0,0 @@
1
- ---
2
- pattern: "**/*.spec.{ts,tsx}"
3
- description: "Comprehensive testing guidelines for React Native components in rn-work-uikit package"
4
- ---
5
-
6
- # Testing Guidelines for RN Work UIKit
7
-
8
- ## Testing Philosophy
9
- - Write user-behavior focused tests that describe what users see and experience
10
- - Use descriptive test names like "when user sees an empty input field" instead of "idle state"
11
- - Group related assertions with explanatory comments about user expectations
12
- - Focus on user interactions and outcomes rather than implementation details
13
- - Test the component's public API, not internal implementation
14
- - Write tests that will catch regressions and ensure reliability
15
-
16
- ## Testing Tools and Setup
17
- - Use `@testing-library/react-native` for all component testing
18
- - Use `renderWithTheme()` from `../../../../testUtils/renderWithTheme` for components that need theme context
19
- - Use semantic matchers like `toBeDisabled()`, `toHaveProp()` when available
20
- - For complex React Native styles, use manual checking when `toHaveStyle()` doesn't work
21
- - Handle React Native's nested style arrays with `StyleSheet.flatten()` or custom helpers
22
- - Use `jest` for test runner and assertion library
23
- - Use `@testing-library/jest-native` for additional React Native matchers
24
-
25
- ## Test Structure and Organization
26
- - Follow AAA pattern: Arrange, Act, Assert
27
- - Use `describe` blocks to group related tests
28
- - Use descriptive `it` statements that explain the expected behavior
29
- - Keep tests focused and test one thing at a time
30
- - Use `beforeEach` and `afterEach` for setup and cleanup
31
- - Mock external dependencies and APIs
32
- - Use `test.each` for parameterized tests when testing multiple scenarios
33
-
34
- ## Test Coverage Requirements
35
- - Aim for 100% line coverage on main component files
36
- - Create dedicated test files for each component (not just integration tests)
37
- - Separate large test files by component responsibility
38
- - Use consistent naming: `ComponentName.spec.tsx`
39
- - Keep test utilities in `testUtils/` directory at package root
40
- - Use snapshot testing for visual regression prevention
41
- - Create README.md files in test directories explaining testing approach
42
-
43
- ## Component Testing Patterns
44
- - Test component rendering with different props
45
- - Test user interactions (press, type, scroll)
46
- - Test component state changes
47
- - Test prop changes and their effects
48
- - Test conditional rendering based on props/state
49
- - Test component lifecycle methods
50
- - Test ref forwarding and imperative APIs
51
-
52
- ## Accessibility Testing
53
- - Test screen reader support with `getByRole`, `getByLabelText`
54
- - Test keyboard navigation and focus management
55
- - Test accessibility props like `accessibilityLabel`, `accessibilityHint`
56
- - Test accessibility states like `accessibilityState`
57
- - Test with accessibility tools and screen readers
58
- - Ensure proper semantic markup and ARIA attributes
59
-
60
- ## Error Handling and Edge Cases
61
- - Test error states and error boundaries
62
- - Test with invalid or missing props
63
- - Test with extreme values (empty strings, null, undefined)
64
- - Test component behavior with network failures
65
- - Test graceful degradation when features are unavailable
66
- - Test component recovery from error states
67
-
68
- ## Performance Testing
69
- - Test component rendering performance with large datasets
70
- - Test memory leaks and cleanup
71
- - Test component re-rendering behavior
72
- - Test with work-typical data sizes
73
- - Use React DevTools Profiler for performance analysis
74
- - Test component performance on different device types
75
-
76
- ## Work-Specific Testing
77
- - Test with work-specific color palettes and spacing
78
- - Test component behavior with work theme overrides
79
- - Test compatibility with work app requirements
80
- - Test work-specific accessibility guidelines
81
- - Test performance with work-typical data sizes
82
- - Test integration with work-specific APIs and services
83
-
84
- ## Mocking and Test Utilities
85
- - Mock React Native modules that aren't available in test environment
86
- - Create custom render functions for common test scenarios
87
- - Use `jest.mock()` for external dependencies
88
- - Create test data factories for consistent test data
89
- - Use `@testing-library/user-event` for user interaction simulation
90
- - Mock navigation and routing for component tests
91
-
92
- ## Test Data Management
93
- - Use consistent test data across tests
94
- - Create reusable test data factories
95
- - Use realistic data that matches production scenarios
96
- - Test with both valid and invalid data
97
- - Use work-specific data patterns and structures
98
- - Keep test data minimal but representative
99
-
100
- ## Integration Testing
101
- - Test component integration with other components
102
- - Test component behavior within larger feature flows
103
- - Test component interaction with global state
104
- - Test component behavior with routing and navigation
105
- - Test component behavior with work-specific services
106
- - Use integration tests sparingly, prefer unit tests
107
-
108
- ## Continuous Integration
109
- - Ensure all tests pass in CI environment
110
- - Use consistent test commands across environments
111
- - Set up test coverage reporting
112
- - Use parallel test execution for faster CI runs
113
- - Ensure tests are deterministic and don't flake
114
- - Use proper test isolation to avoid test interference