@hero-design/rn 8.34.2-alpha.0 → 8.34.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.34.2-alpha.0",
+  "version": "8.34.2",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -21,16 +21,13 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "8.34.1",
-    "@hero-design/react-native-month-year-picker": "^8.34.1",
+    "@hero-design/colors": "8.34.2",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
-    "hero-editor": "^1.9.21",
-    "react-native-root-siblings": "^4.1.1",
-    "rollup-plugin-jsx": "^1.0.3"
+    "hero-editor": "^1.9.21"
   },
   "peerDependencies": {
-    "@hero-design/react-native-month-year-picker": "^8.34.1",
+    "@hero-design/react-native-month-year-picker": "^8.34.2",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "react": "18.0.0",
@@ -38,6 +35,7 @@
     "react-native-gesture-handler": "^1.10.3 | ~2.5.0",
     "react-native-linear-gradient": "^2.6.2",
     "react-native-pager-view": "^5.4.25",
+    "react-native-root-siblings": "^4.1.1",
     "react-native-safe-area-context": "^3.0.2",
     "react-native-vector-icons": "^9.1.0",
     "react-native-webview": "^11.2.5"
@@ -49,7 +47,8 @@
     "@babel/preset-typescript": "^7.17.12",
     "@babel/runtime": "^7.18.9",
     "@emotion/jest": "^11.9.3",
-    "@hero-design/eslint-plugin": "8.34.1",
+    "@hero-design/eslint-plugin": "8.34.2",
+    "@hero-design/react-native-month-year-picker": "^8.34.2",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "@rollup/plugin-babel": "^5.3.1",
@@ -65,10 +64,10 @@
     "@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.34.1",
+    "eslint-config-hd": "8.34.2",
     "eslint-plugin-import": "^2.27.5",
     "jest": "^27.3.1",
-    "prettier-config-hd": "8.34.1",
+    "prettier-config-hd": "8.34.2",
     "react": "18.0.0",
     "react-native": "0.69.7",
     "react-native-gesture-handler": "~2.5.0",

package/rollup.config.js

@@ -35,6 +35,7 @@ export default {
     'react-native-vector-icons',
     'react-native-linear-gradient',
     '@hero-design/react-native-month-year-picker',
+    'react-native-root-siblings',
   ],
   plugins: [
     replace({
@@ -42,15 +43,10 @@ export default {
     }),
     nodeResolve({ extensions, browser: true }),
     flow(),
+    commonjs(),
     json(),
     typescript(),
-    babel({
-      exclude: 'node_modules/**',
-      presets: ['@babel/env', '@babel/preset-react'],
-      extensions,
-      babelHelpers: 'bundled',
-    }),
-    commonjs(),
+    babel({ extensions, babelHelpers: 'bundled' }),
     copy({
       targets: [
         {

package/src/components/Avatar/AvatarStack/__tests__/__snapshots__/index.spec.tsx.snap

@@ -34,7 +34,7 @@ exports[`AvatarStack renders correctly by default 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Object {
-        "backgroundColor": "#48000a",
+        "backgroundColor": "#001f23",
         "borderRadius": 999,
         "height": 32,
         "left": 0,
@@ -111,7 +111,7 @@ exports[`AvatarStack renders correctly by default 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Object {
-        "backgroundColor": "#737479",
+        "backgroundColor": "#0d2a2e",
         "borderRadius": 999,
         "height": 32,
         "left": 22.4,
@@ -188,7 +188,7 @@ exports[`AvatarStack renders correctly by default 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Object {
-        "backgroundColor": "#001f23",
+        "backgroundColor": "#193539",
         "borderRadius": 999,
         "height": 32,
         "left": 44.8,
@@ -265,7 +265,7 @@ exports[`AvatarStack renders correctly by default 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Object {
-        "backgroundColor": "#353957",
+        "backgroundColor": "#264144",
         "borderRadius": 999,
         "height": 32,
         "left": 67.19999999999999,
@@ -342,7 +342,7 @@ exports[`AvatarStack renders correctly by default 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Object {
-        "backgroundColor": "#25006e",
+        "backgroundColor": "#334c4f",
         "borderRadius": 999,
         "height": 32,
         "left": 89.6,
@@ -438,7 +438,7 @@ exports[`AvatarStack renders correctly with custom props 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Object {
-        "backgroundColor": "#48000a",
+        "backgroundColor": "#001f23",
         "borderRadius": 999,
         "height": 40,
         "left": 0,
@@ -515,7 +515,7 @@ exports[`AvatarStack renders correctly with custom props 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Object {
-        "backgroundColor": "#737479",
+        "backgroundColor": "#0d2a2e",
         "borderRadius": 999,
         "height": 40,
         "left": 28,
@@ -592,7 +592,7 @@ exports[`AvatarStack renders correctly with custom props 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Object {
-        "backgroundColor": "#001f23",
+        "backgroundColor": "#193539",
         "borderRadius": 999,
         "height": 40,
         "left": 56,
@@ -669,7 +669,7 @@ exports[`AvatarStack renders correctly with custom props 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Object {
-        "backgroundColor": "#353957",
+        "backgroundColor": "#264144",
         "borderRadius": 999,
         "height": 40,
         "left": 84,

package/src/components/FAB/ActionGroup/__tests__/__snapshots__/index.spec.tsx.snap

@@ -764,7 +764,7 @@ exports[`ActionGroup has active true 1`] = `
         "backgroundColor": "#000000",
         "bottom": 0,
         "left": 0,
-        "opacity": 0.4,
+        "opacity": 0.25,
         "position": "absolute",
         "right": 0,
         "top": 0,
@@ -1373,7 +1373,7 @@ exports[`ActionGroup has active true 1`] = `
         Object {
           "alignItems": "center",
           "alignSelf": "flex-start",
-          "backgroundColor": "#401960",
+          "backgroundColor": "#664780",
           "borderRadius": 999,
           "elevation": 2,
           "flexDirection": "row",

package/src/components/FAB/ActionGroup/index.tsx

@@ -114,7 +114,7 @@ const ActionGroup = forwardRef<ActionGroupHandles, ActionGroupProps>(
     const interpolatedBackdropOpacityAnimation =
       tranlateXAnimation.current.interpolate({
         inputRange: [0, 1],
-        outputRange: [0, 0.4],
+        outputRange: [0, 0.25],
       });
 
     const interpolatedActionGroupOpacityAnimation =

package/src/components/FAB/FAB.tsx

@@ -175,6 +175,7 @@ const FAB = forwardRef<FABHandles, FABProps>(
           },
         ]}
         testID={testID}
+        themeActive={active}
       >
         {isIconOnly ? (
           <IconOnlyContent

package/src/components/FAB/StyledFAB.tsx

@@ -6,22 +6,26 @@ import Icon from '../Icon';
 import Typography from '../Typography';
 import Box from '../Box';
 
-const StyledFAB = styled(TouchableHighlight)<TouchableHighlightProps>(
-  ({ theme }) => ({
-    backgroundColor: theme.__hd__.fab.colors.buttonBackground,
-    borderRadius: theme.radii.rounded,
-    alignItems: 'center',
-    justifyContent: 'center',
-    alignSelf: 'flex-start',
-    padding: theme.__hd__.fab.space.containerPadding,
-    flexDirection: 'row',
-    elevation: theme.__hd__.fab.shadows.elevation,
-    shadowColor: theme.__hd__.fab.colors.shadow,
-    shadowOffset: theme.__hd__.fab.shadows.offset,
-    shadowRadius: theme.__hd__.fab.shadows.radius,
-    shadowOpacity: theme.__hd__.fab.shadows.opacity,
-  })
-);
+const StyledFAB = styled(TouchableHighlight)<
+  TouchableHighlightProps & {
+    themeActive?: boolean;
+  }
+>(({ theme, themeActive }) => ({
+  backgroundColor: themeActive
+    ? theme.__hd__.fab.colors.buttonActiveBackground
+    : theme.__hd__.fab.colors.buttonBackground,
+  borderRadius: theme.radii.rounded,
+  alignItems: 'center',
+  justifyContent: 'center',
+  alignSelf: 'flex-start',
+  padding: theme.__hd__.fab.space.containerPadding,
+  flexDirection: 'row',
+  elevation: theme.__hd__.fab.shadows.elevation,
+  shadowColor: theme.__hd__.fab.colors.shadow,
+  shadowOffset: theme.__hd__.fab.shadows.offset,
+  shadowRadius: theme.__hd__.fab.shadows.radius,
+  shadowOpacity: theme.__hd__.fab.shadows.opacity,
+}));
 
 const StyledFABIcon = styled(Icon)<IconProps>(({ theme }) => ({
   color: theme.__hd__.fab.colors.icon,

package/src/components/FAB/__tests__/StyledFAB.spec.tsx

@@ -6,7 +6,17 @@ import { StyledFAB, StyledFABIcon } from '../StyledFAB';
 describe('StyledFAB', () => {
   it('renders correctly', () => {
     const { toJSON } = renderWithTheme(
-      <StyledFAB>
+      <StyledFAB themeActive={false}>
+        <Typography.Body variant="small"> button </Typography.Body>
+      </StyledFAB>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('renders correctly', () => {
+    const { toJSON } = renderWithTheme(
+      <StyledFAB themeActive>
         <Typography.Body variant="small"> button </Typography.Body>
       </StyledFAB>
     );

package/src/components/FAB/__tests__/__snapshots__/StyledFAB.spec.tsx.snap

@@ -57,6 +57,63 @@ exports[`StyledFAB renders correctly 1`] = `
 </View>
 `;
 
+exports[`StyledFAB renders correctly 2`] = `
+<View
+  accessible={true}
+  focusable={false}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "alignSelf": "flex-start",
+        "backgroundColor": "#664780",
+        "borderRadius": 999,
+        "elevation": 2,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "padding": 20,
+        "shadowColor": "#001f23",
+        "shadowOffset": Object {
+          "height": 2,
+          "width": 0,
+        },
+        "shadowOpacity": 0.12,
+        "shadowRadius": 8,
+      },
+      undefined,
+    ]
+  }
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      Array [
+        Object {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.48,
+          "lineHeight": 22,
+        },
+        undefined,
+      ]
+    }
+    themeIntent="body"
+    themeTypeface="neutral"
+    themeVariant="small"
+  >
+     button 
+  </Text>
+</View>
+`;
+
 exports[`StyledFABIcon renders correctly 1`] = `
 <HeroIcon
   name="add"

package/src/components/List/StyledListItem.tsx

@@ -19,6 +19,7 @@ const StyledListItemContainer = styled(TouchableHighlight)<{
       ? theme.__hd__.list.colors.checkedListItemContainerBackground
       : theme.__hd__.list.colors.listItemContainerBackground,
     padding: theme.__hd__.list.space.listItemContainerPadding,
+    borderRadius: theme.__hd__.list.radii.item,
   };
 
   switch (themeVariant) {
@@ -28,7 +29,6 @@ const StyledListItemContainer = styled(TouchableHighlight)<{
       return {
         ...sharedStyles,
         alignItems: 'center',
-        borderRadius: theme.__hd__.list.radii.card,
         shadowColor: theme.colors.secondaryOutline,
         shadowRadius: theme.__hd__.list.radii.cardShadow,
         shadowOffset: theme.__hd__.list.shadows.cardOffset,

package/src/components/List/__tests__/__snapshots__/ListItem.spec.tsx.snap

@@ -20,6 +20,7 @@ exports[`ListItem renders correctly ListItem with children 1`] = `
     Array [
       Object {
         "backgroundColor": "#ffffff",
+        "borderRadius": 8,
         "flexDirection": "row",
         "padding": 16,
       },
@@ -346,6 +347,7 @@ exports[`ListItem renders correctly ListItem with icon 1`] = `
     Array [
       Object {
         "backgroundColor": "#ffffff",
+        "borderRadius": 8,
         "flexDirection": "row",
         "padding": 16,
       },
@@ -474,6 +476,7 @@ exports[`ListItem renders correctly ListItem with leading status 1`] = `
     Array [
       Object {
         "backgroundColor": "#ffffff",
+        "borderRadius": 8,
         "flexDirection": "row",
         "padding": 16,
       },
@@ -597,6 +600,7 @@ exports[`ListItem renders correctly ListItem with prefix suffix is React.Element
     Array [
       Object {
         "backgroundColor": "#ffffff",
+        "borderRadius": 8,
         "flexDirection": "row",
         "padding": 16,
       },

package/src/components/List/__tests__/__snapshots__/StyledListItem.spec.tsx.snap

@@ -155,6 +155,7 @@ exports[`ListItemContainer renders correctly themeSelected false themeVariant fu
     Array [
       Object {
         "backgroundColor": "#ffffff",
+        "borderRadius": 8,
         "flexDirection": "row",
         "padding": 16,
       },
@@ -255,6 +256,7 @@ exports[`ListItemContainer renders correctly themeSelected true themeVariant ful
     Array [
       Object {
         "backgroundColor": "#ece8ef",
+        "borderRadius": 8,
         "flexDirection": "row",
         "padding": 16,
       },

package/src/components/Progress/StyledProgressBar.tsx

@@ -13,6 +13,7 @@ const StyledWrapper = styled(View)<ViewProps & { themeIntent: ThemeIntent }>(
         THEME_INTENT_MAP[themeIntent]
       ],
     overflow: 'hidden',
+    borderRadius: theme.__hd__.progress.radii.default,
   })
 );
 

package/src/components/Progress/__tests__/__snapshots__/index.spec.js.snap

@@ -7,7 +7,8 @@ exports[`Progress.Bar renders correctly 1`] = `
       Object {
         "alignSelf": "stretch",
         "backgroundColor": "#e8e9ea",
-        "height": 4,
+        "borderRadius": 999,
+        "height": 8,
         "overflow": "hidden",
       },
       undefined,
@@ -45,7 +46,8 @@ exports[`Progress.Bar renders correctly with intent 1`] = `
       Object {
         "alignSelf": "stretch",
         "backgroundColor": "#e8e9ea",
-        "height": 4,
+        "borderRadius": 999,
+        "height": 8,
         "overflow": "hidden",
       },
       undefined,
@@ -110,7 +112,7 @@ exports[`Progress.Circle allows to custom value renderer 1`] = `
               Object {
                 "borderColor": "#5ace7d",
                 "borderRadius": 999,
-                "borderWidth": 4,
+                "borderWidth": 8,
                 "height": 72,
                 "width": 72,
               },
@@ -161,7 +163,7 @@ exports[`Progress.Circle allows to custom value renderer 1`] = `
                 Object {
                   "borderColor": "#e8e9ea",
                   "borderRadius": 999,
-                  "borderWidth": 4,
+                  "borderWidth": 8,
                   "height": 72,
                   "width": 72,
                 },
@@ -204,7 +206,7 @@ exports[`Progress.Circle allows to custom value renderer 1`] = `
               Object {
                 "borderColor": "#5ace7d",
                 "borderRadius": 999,
-                "borderWidth": 4,
+                "borderWidth": 8,
                 "height": 72,
                 "width": 72,
               },
@@ -256,7 +258,7 @@ exports[`Progress.Circle allows to custom value renderer 1`] = `
                 Object {
                   "borderColor": "#e8e9ea",
                   "borderRadius": 999,
-                  "borderWidth": 4,
+                  "borderWidth": 8,
                   "height": 72,
                   "width": 72,
                 },
@@ -274,11 +276,11 @@ exports[`Progress.Circle allows to custom value renderer 1`] = `
           Object {
             "backgroundColor": "#5ace7d",
             "borderRadius": 999,
-            "height": 4,
-            "left": 34,
+            "height": 8,
+            "left": 32,
             "position": "absolute",
             "top": 0,
-            "width": 4,
+            "width": 8,
             "zIndex": 2,
           },
           undefined,
@@ -310,11 +312,11 @@ exports[`Progress.Circle allows to custom value renderer 1`] = `
             Object {
               "backgroundColor": "#5ace7d",
               "borderRadius": 999,
-              "height": 4,
-              "left": 34,
+              "height": 8,
+              "left": 32,
               "position": "absolute",
               "top": 0,
-              "width": 4,
+              "width": 8,
               "zIndex": 2,
             },
             undefined,
@@ -329,12 +331,12 @@ exports[`Progress.Circle allows to custom value renderer 1`] = `
           Object {
             "alignItems": "center",
             "borderRadius": 999,
-            "height": 64,
+            "height": 56,
             "justifyContent": "center",
-            "left": 4,
+            "left": 8,
             "position": "absolute",
-            "top": 4,
-            "width": 64,
+            "top": 8,
+            "width": 56,
             "zIndex": 3,
           },
           undefined,
@@ -400,7 +402,7 @@ exports[`Progress.Circle renders correctly 1`] = `
               Object {
                 "borderColor": "#401960",
                 "borderRadius": 999,
-                "borderWidth": 4,
+                "borderWidth": 8,
                 "height": 72,
                 "width": 72,
               },
@@ -451,7 +453,7 @@ exports[`Progress.Circle renders correctly 1`] = `
                 Object {
                   "borderColor": "#e8e9ea",
                   "borderRadius": 999,
-                  "borderWidth": 4,
+                  "borderWidth": 8,
                   "height": 72,
                   "width": 72,
                 },
@@ -494,7 +496,7 @@ exports[`Progress.Circle renders correctly 1`] = `
               Object {
                 "borderColor": "#401960",
                 "borderRadius": 999,
-                "borderWidth": 4,
+                "borderWidth": 8,
                 "height": 72,
                 "width": 72,
               },
@@ -546,7 +548,7 @@ exports[`Progress.Circle renders correctly 1`] = `
                 Object {
                   "borderColor": "#e8e9ea",
                   "borderRadius": 999,
-                  "borderWidth": 4,
+                  "borderWidth": 8,
                   "height": 72,
                   "width": 72,
                 },
@@ -564,11 +566,11 @@ exports[`Progress.Circle renders correctly 1`] = `
           Object {
             "backgroundColor": "#401960",
             "borderRadius": 999,
-            "height": 4,
-            "left": 34,
+            "height": 8,
+            "left": 32,
             "position": "absolute",
             "top": 0,
-            "width": 4,
+            "width": 8,
             "zIndex": 2,
           },
           undefined,
@@ -600,11 +602,11 @@ exports[`Progress.Circle renders correctly 1`] = `
             Object {
               "backgroundColor": "#401960",
               "borderRadius": 999,
-              "height": 4,
-              "left": 34,
+              "height": 8,
+              "left": 32,
               "position": "absolute",
               "top": 0,
-              "width": 4,
+              "width": 8,
               "zIndex": 2,
             },
             undefined,
@@ -619,12 +621,12 @@ exports[`Progress.Circle renders correctly 1`] = `
           Object {
             "alignItems": "center",
             "borderRadius": 999,
-            "height": 64,
+            "height": 56,
             "justifyContent": "center",
-            "left": 4,
+            "left": 8,
             "position": "absolute",
-            "top": 4,
-            "width": 64,
+            "top": 8,
+            "width": 56,
             "zIndex": 3,
           },
           undefined,
@@ -690,7 +692,7 @@ exports[`Progress.Circle renders correctly with intent 1`] = `
               Object {
                 "borderColor": "#5ace7d",
                 "borderRadius": 999,
-                "borderWidth": 4,
+                "borderWidth": 8,
                 "height": 72,
                 "width": 72,
               },
@@ -741,7 +743,7 @@ exports[`Progress.Circle renders correctly with intent 1`] = `
                 Object {
                   "borderColor": "#e8e9ea",
                   "borderRadius": 999,
-                  "borderWidth": 4,
+                  "borderWidth": 8,
                   "height": 72,
                   "width": 72,
                 },
@@ -784,7 +786,7 @@ exports[`Progress.Circle renders correctly with intent 1`] = `
               Object {
                 "borderColor": "#5ace7d",
                 "borderRadius": 999,
-                "borderWidth": 4,
+                "borderWidth": 8,
                 "height": 72,
                 "width": 72,
               },
@@ -836,7 +838,7 @@ exports[`Progress.Circle renders correctly with intent 1`] = `
                 Object {
                   "borderColor": "#e8e9ea",
                   "borderRadius": 999,
-                  "borderWidth": 4,
+                  "borderWidth": 8,
                   "height": 72,
                   "width": 72,
                 },
@@ -854,11 +856,11 @@ exports[`Progress.Circle renders correctly with intent 1`] = `
           Object {
             "backgroundColor": "#5ace7d",
             "borderRadius": 999,
-            "height": 4,
-            "left": 34,
+            "height": 8,
+            "left": 32,
             "position": "absolute",
             "top": 0,
-            "width": 4,
+            "width": 8,
             "zIndex": 2,
           },
           undefined,
@@ -890,11 +892,11 @@ exports[`Progress.Circle renders correctly with intent 1`] = `
             Object {
               "backgroundColor": "#5ace7d",
               "borderRadius": 999,
-              "height": 4,
-              "left": 34,
+              "height": 8,
+              "left": 32,
               "position": "absolute",
               "top": 0,
-              "width": 4,
+              "width": 8,
               "zIndex": 2,
             },
             undefined,
@@ -909,12 +911,12 @@ exports[`Progress.Circle renders correctly with intent 1`] = `
           Object {
             "alignItems": "center",
             "borderRadius": 999,
-            "height": 64,
+            "height": 56,
             "justifyContent": "center",
-            "left": 4,
+            "left": 8,
             "position": "absolute",
-            "top": 4,
-            "width": 64,
+            "top": 8,
+            "width": 56,
             "zIndex": 3,
           },
           undefined,