@hero-design/rn 8.5.0-alpha.0 → 8.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.5.0-alpha.0",
+  "version": "8.6.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -21,7 +21,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "8.5.0",
+    "@hero-design/colors": "8.6.0",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.21"
@@ -31,6 +31,7 @@
     "@react-native-community/slider": "4.1.12",
     "react": "18.0.0",
     "react-native": "0.69.7",
+    "react-native-gesture-handler": "^1.10.3 | ~2.1.0",
     "react-native-pager-view": "^5.4.25",
     "react-native-safe-area-context": "^4.2.5",
     "react-native-vector-icons": "^9.1.0",
@@ -43,7 +44,7 @@
     "@babel/preset-typescript": "^7.17.12",
     "@babel/runtime": "^7.18.9",
     "@emotion/jest": "^11.9.3",
-    "@hero-design/eslint-plugin": "8.5.0",
+    "@hero-design/eslint-plugin": "8.6.0",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "@rollup/plugin-babel": "^5.3.1",
@@ -59,11 +60,12 @@
     "@types/react-native": "^0.67.7",
     "@types/react-native-vector-icons": "^6.4.10",
     "babel-plugin-inline-import": "^3.0.0",
-    "eslint-config-hd": "8.5.0",
+    "eslint-config-hd": "8.6.0",
     "jest": "^27.3.1",
-    "prettier-config-hd": "8.5.0",
+    "prettier-config-hd": "8.6.0",
     "react": "18.0.0",
     "react-native": "0.69.7",
+    "react-native-gesture-handler": "~2.1.0",
     "react-native-pager-view": "^5.4.25",
     "react-native-safe-area-context": "^4.2.5",
     "react-native-vector-icons": "^9.1.0",

package/rollup.config.js

@@ -29,6 +29,7 @@ export default {
     'react-native-safe-area-context',
     '@react-native-community/datetimepicker',
     '@react-native-community/slider',
+    'react-native-gesture-handler',
     'react-native-webview',
     'react-native-pager-view',
     'react-native-vector-icons',

package/src/components/Icon/HeroIcon/glyphMap.json

@@ -1 +1 @@
-{"activate":59000,"add-emoji":59001,"add-person":59002,"adjustment":59003,"alignment":59004,"antenna":59005,"archive":59006,"assignment-warning":59007,"bank":59008,"bell":59009,"billing":59010,"bookmark-added":59011,"bookmark":59012,"box-check":59013,"box":59014,"buildings":59015,"cake":59016,"calendar-clock":59017,"calendar":59018,"candy-box-menu":59019,"caret-down-small":59020,"caret-down":59021,"caret-left-small":59022,"caret-left":59023,"caret-right-small":59024,"caret-right":59025,"caret-up-small":59026,"caret-up":59027,"check-radio":59028,"circle-add":59029,"circle-cancel":59030,"circle-check":59031,"circle-down":59032,"circle-info":59033,"circle-left":59034,"circle-ok":59035,"circle-pencil":59036,"circle-question":59037,"circle-remove":59038,"circle-right":59039,"circle-up":59040,"circle-warning":59041,"clock-3":59042,"clock":59043,"cloud-download":59044,"cloud-upload":59045,"cog":59046,"coin":59047,"contacts":59048,"credit-card":59049,"diamond":59050,"direction-arrows":59051,"directory":59052,"document":59053,"dollar-coin-shine":59054,"double-buildings":59055,"edit-template":59056,"envelope":59057,"expense":59058,"eye-circle":59059,"eye-invisible":59060,"eye":59061,"face-meh":59062,"face-sad":59063,"face-smiley":59064,"feed":59065,"feedbacks":59066,"file-certified":59067,"file-clone":59068,"file-copy":59069,"file-csv":59070,"file-dispose":59071,"file-doc":59072,"file-excel":59073,"file-export":59074,"file-lock":59075,"file-pdf":59076,"file-powerpoint":59077,"file-search":59078,"file-secured":59079,"file-sheets":59080,"file-slide":59081,"file-verified":59082,"file-word":59083,"file":59084,"filter":59085,"folder-user":59086,"folder":59087,"format-bold":59088,"format-heading1":59089,"format-heading2":59090,"format-italic":59091,"format-list-bulleted":59092,"format-list-numbered":59093,"format-underlined":59094,"funnel-filter":59095,"global-dollar":59096,"globe":59097,"graduation-cap":59098,"graph":59099,"happy-sun":59100,"health-bag":59101,"heart":59102,"home":59103,"image":59104,"import":59105,"incident-siren":59106,"instapay":59107,"list":59108,"loading-2":59109,"loading":59110,"location":59111,"lock":59112,"looks-one":59113,"looks-two":59114,"media-content":59115,"menu":59116,"money-notes":59117,"moneybag":59118,"moon":59119,"multiple-stars":59120,"multiple-users":59121,"node":59122,"open-folder":59123,"paperclip":59124,"payment-summary":59125,"pencil":59126,"phone":59127,"piggy-bank":59128,"plane":59129,"play-circle":59130,"print":59131,"raising-hands":59132,"reply-arrow":59133,"reply":59134,"reschedule":59135,"rostering":59136,"save":59137,"schedule-send":59138,"schedule":59139,"search-person":59140,"send":59141,"speaker-active":59142,"speaker":59143,"star-award":59144,"star-badge":59145,"star-circle":59146,"star-medal":59147,"star":59148,"steps-circle":59149,"stopwatch":59150,"suitcase":59151,"survey":59152,"swag":59153,"switch":59154,"tag":59155,"target":59156,"teams":59157,"timesheet":59158,"touch-id":59159,"trash-bin":59160,"unlock":59161,"user":59162,"video-1":59163,"video-2":59164,"wallet":59165,"warning":59166,"activate-outlined":59167,"add-credit-card-outlined":59168,"add-person-outlined":59169,"add-section-outlined":59170,"add-time-outlined":59171,"add":59172,"adjustment-outlined":59173,"alignment-2-outlined":59174,"alignment-outlined":59175,"all-caps":59176,"arrow-down":59177,"arrow-downwards":59178,"arrow-left":59179,"arrow-leftwards":59180,"arrow-right":59181,"arrow-rightwards":59182,"arrow-up":59183,"arrow-upwards":59184,"article-outlined":59185,"at-sign":59186,"auto-graph-outlined":59187,"bell-active-outlined":59188,"bell-outlined":59189,"bell-slash-outlined":59190,"billing-outlined":59191,"body-outlined":59192,"bold":59193,"bookmark-added-outlined":59194,"bookmark-outlined":59195,"box-check-outlined":59196,"box-outlined":59197,"bullet-points":59198,"cake-outlined":59199,"calendar-dates-outlined":59200,"calendar-star-outlined":59201,"camera-outlined":59202,"cancel":59203,"chat-bubble-outlined":59204,"chat-unread-outlined":59205,"checkmark":59206,"circle-add-outlined":59207,"circle-cancel-outlined":59208,"circle-down-outlined":59209,"circle-info-outlined":59210,"circle-left-outlined":59211,"circle-ok-outlined":59212,"circle-question-outlined":59213,"circle-remove-outlined":59214,"circle-right-outlined":59215,"circle-up-outlined":59216,"circle-warning-outlined":59217,"clock-2-outlined":59218,"clock-outlined":59219,"cog-outlined":59220,"coin-outlined":59221,"comment-outlined":59222,"contacts-outlined":59223,"credit-card-outlined":59224,"cup-outlined":59225,"direction-arrows-outlined":59226,"directory-outlined":59227,"document-outlined":59228,"dollar-card-outlined":59229,"dollar-coin-shine-outlined":59230,"dollar-sign":59231,"double-buildings-outlined":59232,"double-left-arrows":59233,"double-right-arrows":59234,"download-outlined":59235,"edit-template-outlined":59236,"email-outlined":59237,"enter-arrow":59238,"envelope-outlined":59239,"expense-outlined":59240,"explore-outlined":59241,"external-link":59242,"eye-invisible-outlined":59243,"eye-outlined":59244,"face-id":59245,"face-meh-outlined":59246,"face-open-smiley-outlined":59247,"face-sad-outlined":59248,"face-smiley-outlined":59249,"feed-outlined":59250,"file-certified-outlined":59251,"file-clone-outlined":59252,"file-copy-outlined":59253,"file-dispose-outlined":59254,"file-dollar-outlined":59255,"file-download-outlined":59256,"file-export-outlined":59257,"file-lock-outlined":59258,"file-outlined":59259,"file-search-outlined":59260,"file-secured-outlined":59261,"file-statutory-outlined":59262,"file-verified-outlined":59263,"filter-outlined":59264,"folder-outlined":59265,"folder-user-outlined":59266,"funnel-filter-outline":59267,"graph-outlined":59268,"hand-holding-user-outlined":59269,"happy-sun-outlined":59270,"health-bag-outlined":59271,"heart-outlined":59272,"home-active-outlined":59273,"home-outlined":59274,"id-card-outlined":59275,"image-outlined":59276,"import-outlined":59277,"instapay-outlined":59278,"italic":59279,"link-1":59280,"link-2":59281,"list-outlined":59282,"live-help-outlined":59283,"location-outlined":59284,"lock-outlined":59285,"locked-file-outlined":59286,"log-out":59287,"media-content-outlined":59288,"menu-close":59289,"menu-expand":59290,"menu-fold-outlined":59291,"menu-unfold-outlined":59292,"moneybag-outlined":59293,"moon-outlined":59294,"more-horizontal":59295,"more-vertical":59296,"multiple-folders-outlined":59297,"multiple-users-outlined":59298,"near-me-outlined":59299,"node-outlined":59300,"number-points":59301,"number":59302,"overview-outlined":59303,"payment-summary-outlined":59304,"payslip-outlined":59305,"pencil-outlined":59306,"percentage":59307,"phone-outlined":59308,"piggy-bank-outlined":59309,"plane-outlined":59310,"play-circle-outlined":59311,"print-outlined":59312,"qr-code-outlined":59313,"qualification-outlined":59314,"re-assign":59315,"redeem":59316,"refresh":59317,"remove":59318,"reply-outlined":59319,"restart":59320,"return-arrow":59321,"rostering-outlined":59322,"save-outlined":59323,"schedule-outlined":59324,"search-outlined":59325,"search-secured-outlined":59326,"send-outlined":59327,"share-1":59328,"share-2":59329,"share-outlined":59330,"show-chart-outlined":59331,"single-down-arrow":59332,"single-left-arrow":59333,"single-right-arrow":59334,"single-up-arrow":59335,"speaker-active-outlined":59336,"speaker-outlined":59337,"star-circle-outlined":59338,"star-outlined":59339,"stopwatch-outlined":59340,"strikethrough":59341,"suitcase-clock-outlined":59342,"suitcase-outlined":59343,"survey-outlined":59344,"switch-outlined":59345,"sync":59346,"target-outlined":59347,"timesheet-outlined":59348,"today-outlined":59349,"transfer":59350,"trash-bin-outlined":59351,"umbrela-outlined":59352,"unavailable":59353,"underline":59354,"unlock-outlined":59355,"upload-outlined":59356,"user-circle-outlined":59357,"user-gear-outlined":59358,"user-outlined":59359,"user-rectangle-outlined":59360,"video-1-outlined":59361,"video-2-outlined":59362,"wallet-outlined":59363}
+{"activate":59000,"add-emoji":59001,"add-person":59002,"adjustment":59003,"alignment":59004,"antenna":59005,"archive":59006,"assignment-warning":59007,"bank":59008,"bell":59009,"billing":59010,"bookmark-added":59011,"bookmark":59012,"box-check":59013,"box":59014,"buildings":59015,"cake":59016,"calendar-clock":59017,"calendar":59018,"candy-box-menu":59019,"caret-down-small":59020,"caret-down":59021,"caret-left-small":59022,"caret-left":59023,"caret-right-small":59024,"caret-right":59025,"caret-up-small":59026,"caret-up":59027,"check-radio":59028,"circle-add":59029,"circle-cancel":59030,"circle-check":59031,"circle-down":59032,"circle-info":59033,"circle-left":59034,"circle-ok":59035,"circle-pencil":59036,"circle-question":59037,"circle-remove":59038,"circle-right":59039,"circle-up":59040,"circle-warning":59041,"clock-3":59042,"clock":59043,"cloud-download":59044,"cloud-upload":59045,"cog":59046,"coin":59047,"contacts":59048,"credit-card":59049,"diamond":59050,"direction-arrows":59051,"directory":59052,"document":59053,"dollar-coin-shine":59054,"double-buildings":59055,"edit-template":59056,"envelope":59057,"expense":59058,"eye-circle":59059,"eye-invisible":59060,"eye":59061,"face-meh":59062,"face-sad":59063,"face-smiley":59064,"feed":59065,"feedbacks":59066,"file-certified":59067,"file-clone":59068,"file-copy":59069,"file-csv":59070,"file-dispose":59071,"file-doc":59072,"file-excel":59073,"file-export":59074,"file-lock":59075,"file-pdf":59076,"file-powerpoint":59077,"file-search":59078,"file-secured":59079,"file-sheets":59080,"file-slide":59081,"file-verified":59082,"file-word":59083,"file":59084,"filter":59085,"folder-user":59086,"folder":59087,"format-bold":59088,"format-heading1":59089,"format-heading2":59090,"format-italic":59091,"format-list-bulleted":59092,"format-list-numbered":59093,"format-underlined":59094,"funnel-filter":59095,"global-dollar":59096,"globe":59097,"graduation-cap":59098,"graph":59099,"happy-sun":59100,"health-bag":59101,"heart":59102,"home":59103,"image":59104,"import":59105,"incident-siren":59106,"instapay":59107,"list":59108,"loading-2":59109,"loading":59110,"location":59111,"lock":59112,"looks-one":59113,"looks-two":59114,"media-content":59115,"menu":59116,"money-notes":59117,"moneybag":59118,"moon":59119,"multiple-stars":59120,"multiple-users":59121,"node":59122,"open-folder":59123,"paperclip":59124,"payment-summary":59125,"pencil":59126,"phone":59127,"piggy-bank":59128,"plane":59129,"play-circle":59130,"print":59131,"raising-hands":59132,"reply-arrow":59133,"reply":59134,"reschedule":59135,"rostering":59136,"save":59137,"schedule-send":59138,"schedule":59139,"search-person":59140,"send":59141,"speaker-active":59142,"speaker":59143,"star-award":59144,"star-badge":59145,"star-circle":59146,"star-medal":59147,"star":59148,"steps-circle":59149,"stopwatch":59150,"suitcase":59151,"survey":59152,"swag":59153,"switch":59154,"tag":59155,"target":59156,"teams":59157,"timesheet":59158,"touch-id":59159,"trash-bin":59160,"unlock":59161,"user":59162,"video-1":59163,"video-2":59164,"wallet":59165,"warning":59166,"activate-outlined":59167,"add-credit-card-outlined":59168,"add-person-outlined":59169,"add-section-outlined":59170,"add-time-outlined":59171,"add":59172,"adjustment-outlined":59173,"alignment-2-outlined":59174,"alignment-outlined":59175,"all-caps":59176,"arrow-down":59177,"arrow-downwards":59178,"arrow-left":59179,"arrow-leftwards":59180,"arrow-right":59181,"arrow-rightwards":59182,"arrow-up":59183,"arrow-upwards":59184,"article-outlined":59185,"at-sign":59186,"auto-graph-outlined":59187,"bell-active-outlined":59188,"bell-outlined":59189,"bell-slash-outlined":59190,"billing-outlined":59191,"body-outlined":59192,"bold":59193,"bookmark-added-outlined":59194,"bookmark-outlined":59195,"box-check-outlined":59196,"box-outlined":59197,"bullet-points":59198,"cake-outlined":59199,"calendar-dates-outlined":59200,"calendar-star-outlined":59201,"camera-outlined":59202,"cancel":59203,"chat-bubble-outlined":59204,"chat-unread-outlined":59205,"checkmark":59206,"circle-add-outlined":59207,"circle-cancel-outlined":59208,"circle-down-outlined":59209,"circle-info-outlined":59210,"circle-left-outlined":59211,"circle-ok-outlined":59212,"circle-question-outlined":59213,"circle-remove-outlined":59214,"circle-right-outlined":59215,"circle-up-outlined":59216,"circle-warning-outlined":59217,"clock-2-outlined":59218,"clock-outlined":59219,"cog-outlined":59220,"coin-outlined":59221,"comment-outlined":59222,"contacts-outlined":59223,"credit-card-outlined":59224,"cup-outlined":59225,"direction-arrows-outlined":59226,"directory-outlined":59227,"document-outlined":59228,"dollar-card-outlined":59229,"dollar-coin-shine-outlined":59230,"dollar-credit-card-outlined":59231,"dollar-sign":59232,"double-buildings-outlined":59233,"double-left-arrows":59234,"double-right-arrows":59235,"download-outlined":59236,"edit-template-outlined":59237,"email-outlined":59238,"enter-arrow":59239,"envelope-outlined":59240,"expense-outlined":59241,"explore-outlined":59242,"external-link":59243,"eye-invisible-outlined":59244,"eye-outlined":59245,"face-id":59246,"face-meh-outlined":59247,"face-open-smiley-outlined":59248,"face-sad-outlined":59249,"face-smiley-outlined":59250,"feed-outlined":59251,"file-certified-outlined":59252,"file-clone-outlined":59253,"file-copy-outlined":59254,"file-dispose-outlined":59255,"file-dollar-outlined":59256,"file-download-outlined":59257,"file-export-outlined":59258,"file-lock-outlined":59259,"file-outlined":59260,"file-search-outlined":59261,"file-secured-outlined":59262,"file-statutory-outlined":59263,"file-verified-outlined":59264,"filter-outlined":59265,"folder-outlined":59266,"folder-user-outlined":59267,"funnel-filter-outline":59268,"graph-outlined":59269,"hand-holding-user-outlined":59270,"happy-sun-outlined":59271,"health-bag-outlined":59272,"heart-outlined":59273,"home-active-outlined":59274,"home-outlined":59275,"id-card-outlined":59276,"image-outlined":59277,"import-outlined":59278,"instapay-outlined":59279,"italic":59280,"link-1":59281,"link-2":59282,"list-outlined":59283,"live-help-outlined":59284,"location-outlined":59285,"lock-outlined":59286,"locked-file-outlined":59287,"log-out":59288,"media-content-outlined":59289,"menu-close":59290,"menu-expand":59291,"menu-fold-outlined":59292,"menu-unfold-outlined":59293,"moneybag-outlined":59294,"moon-outlined":59295,"more-horizontal":59296,"more-vertical":59297,"multiple-folders-outlined":59298,"multiple-users-outlined":59299,"near-me-outlined":59300,"node-outlined":59301,"number-points":59302,"number":59303,"overview-outlined":59304,"payment-summary-outlined":59305,"payslip-outlined":59306,"pencil-outlined":59307,"percentage":59308,"phone-outlined":59309,"piggy-bank-outlined":59310,"plane-outlined":59311,"play-circle-outlined":59312,"print-outlined":59313,"qr-code-outlined":59314,"qualification-outlined":59315,"re-assign":59316,"redeem":59317,"refresh":59318,"remove":59319,"reply-outlined":59320,"restart":59321,"return-arrow":59322,"rostering-outlined":59323,"save-outlined":59324,"schedule-outlined":59325,"search-outlined":59326,"search-secured-outlined":59327,"send-outlined":59328,"share-1":59329,"share-2":59330,"share-outlined":59331,"show-chart-outlined":59332,"single-down-arrow":59333,"single-left-arrow":59334,"single-right-arrow":59335,"single-up-arrow":59336,"speaker-active-outlined":59337,"speaker-outlined":59338,"star-circle-outlined":59339,"star-outlined":59340,"stopwatch-outlined":59341,"strikethrough":59342,"suitcase-clock-outlined":59343,"suitcase-outlined":59344,"survey-outlined":59345,"switch-outlined":59346,"sync":59347,"target-outlined":59348,"timesheet-outlined":59349,"today-outlined":59350,"transfer":59351,"trash-bin-outlined":59352,"umbrela-outlined":59353,"unavailable":59354,"underline":59355,"unlock-outlined":59356,"upload-outlined":59357,"user-circle-outlined":59358,"user-gear-outlined":59359,"user-outlined":59360,"user-rectangle-outlined":59361,"video-1-outlined":59362,"video-2-outlined":59363,"wallet-outlined":59364}

package/src/components/Icon/IconList.ts

@@ -231,6 +231,7 @@ const IconList = [
   'document-outlined',
   'dollar-card-outlined',
   'dollar-coin-shine-outlined',
+  'dollar-credit-card-outlined',
   'dollar-sign',
   'double-buildings-outlined',
   'double-left-arrows',

package/src/components/Swipeable/StyledSwipeable.tsx

@@ -1,23 +1,11 @@
 import styled from '@emotion/native';
-import { Animated, TouchableOpacity, View } from 'react-native';
+import { TouchableOpacity } from 'react-native';
 
 export type ActionIntent = 'primary' | 'success' | 'danger';
 
-const StyledRectButton = styled(TouchableOpacity)<{
+export const StyledRectButton = styled(TouchableOpacity)<{
   themeIntent: ActionIntent;
 }>(({ theme, themeIntent }) => ({
   flex: 1,
   backgroundColor: theme.__hd__.swipeable.colors[themeIntent],
-  alignItems: 'center',
-  justifyContent: 'center',
 }));
-
-const StyledWrapper = styled(View)<{}>(() => ({
-  flexDirection: 'row',
-}));
-
-const StyledContent = styled(Animated.View)<{}>(() => ({
-  flex: 1,
-}));
-
-export { StyledRectButton, StyledWrapper, StyledContent };

package/src/components/Swipeable/SwipeableAction.tsx

@@ -1,7 +1,5 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
-import Icon, { IconName } from '../Icon';
-import Typography from '../Typography';
 import { ActionIntent, StyledRectButton } from './StyledSwipeable';
 
 export interface SwipeableActionProps {
@@ -13,6 +11,10 @@ export interface SwipeableActionProps {
    * Callback when the action button is pressed.
    */
   onPress?: () => void;
+  /**
+   * Action button's content
+   */
+  children?: ReactNode;
   /**
    * Additional style.
    */
@@ -21,23 +23,14 @@ export interface SwipeableActionProps {
    * Testing id of the component.
    */
   testID?: string;
-  /**
-   * Name of the Icon.
-   */
-  icon: IconName;
-  /**
-   * Action label of the component.
-   */
-  label: string;
 }
 
 const SwipeableAction = ({
   intent = 'primary',
   onPress,
   style,
+  children,
   testID,
-  label,
-  icon,
 }: SwipeableActionProps) => (
   <StyledRectButton
     onPress={onPress}
@@ -45,8 +38,7 @@ const SwipeableAction = ({
     style={style}
     testID={testID}
   >
-    <Icon icon={icon} size="xsmall" />
-    <Typography.Text fontSize="small">{label}</Typography.Text>
+    {children}
   </StyledRectButton>
 );