@hero-design/rn 8.1.0 → 8.2.0

package/.turbo/turbo-build.log

@@ -1,9 +1,9 @@
-@hero-design/rn:build: cache hit, replaying output 8c1aca9214dc2c1e
-@hero-design/rn:build: $ yarn build:js && yarn build:types
-@hero-design/rn:build: $ rollup -c
-@hero-design/rn:build: 
-@hero-design/rn:build: src/index.ts → lib/index.js, es/index.js...
-@hero-design/rn:build: (!) 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`.
-@hero-design/rn:build: (!) Plugin node-resolve: preferring built-in module 'events' over local alternative at '/root/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
-@hero-design/rn:build: created lib/index.js, es/index.js in 22.9s
-@hero-design/rn:build: $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json
+@hero-design/rn:build: cache hit, replaying output 72983ebd2349f24e
+@hero-design/rn:build: $ yarn build:js && yarn build:types
+@hero-design/rn:build: $ rollup -c
+@hero-design/rn:build: 
+@hero-design/rn:build: src/index.ts → lib/index.js, es/index.js...
+@hero-design/rn:build: (!) 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`.
+@hero-design/rn:build: (!) Plugin node-resolve: preferring built-in module 'events' over local alternative at '/root/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
+@hero-design/rn:build: created lib/index.js, es/index.js in 26.8s
+@hero-design/rn:build: $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json

package/es/index.js

@@ -6310,9 +6310,11 @@ var Accordion = function Accordion(_ref) {
 
 var Container$1 = index$a(View)(function (_ref) {
   var theme = _ref.theme,
+    _ref$themeVariant = _ref.themeVariant,
+    themeVariant = _ref$themeVariant === void 0 ? 'rounded' : _ref$themeVariant,
     themeIntent = _ref.themeIntent;
   return {
-    borderRadius: theme.__hd__.alert.radii["default"],
+    borderRadius: themeVariant === 'rounded' ? theme.__hd__.alert.radii["default"] : 0,
     backgroundColor: theme.__hd__.alert.colors[themeIntent],
     minHeight: theme.__hd__.alert.sizes.height,
     flexDirection: 'row'
@@ -6381,9 +6383,12 @@ var Alert = function Alert(_ref2) {
     _ref2$intent = _ref2.intent,
     intent = _ref2$intent === void 0 ? 'info' : _ref2$intent,
     onClose = _ref2.onClose,
+    _ref2$variant = _ref2.variant,
+    variant = _ref2$variant === void 0 ? 'rounded' : _ref2$variant,
     style = _ref2.style,
     testID = _ref2.testID;
   return /*#__PURE__*/React.createElement(Container$1, {
+    themeVariant: variant,
     themeIntent: intent,
     style: style,
     testID: testID

package/jest.config.js

@@ -21,6 +21,6 @@ module.exports = {
   roots: ['<rootDir>/src'],
   snapshotSerializers: ['@emotion/jest/serializer'],
   transformIgnorePatterns: [
-    'node_modules/(?!(jest-)?@react-native|rn-7-23-0|@emotion/.*|react-native|@react-native-community)',
+    'node_modules/(?!(jest-)?@react-native|@emotion/.*|react-native|@react-native-community)',
   ],
 };

package/lib/index.js

@@ -6339,9 +6339,11 @@ var Accordion = function Accordion(_ref) {
 
 var Container$1 = index$a(reactNative.View)(function (_ref) {
   var theme = _ref.theme,
+    _ref$themeVariant = _ref.themeVariant,
+    themeVariant = _ref$themeVariant === void 0 ? 'rounded' : _ref$themeVariant,
     themeIntent = _ref.themeIntent;
   return {
-    borderRadius: theme.__hd__.alert.radii["default"],
+    borderRadius: themeVariant === 'rounded' ? theme.__hd__.alert.radii["default"] : 0,
     backgroundColor: theme.__hd__.alert.colors[themeIntent],
     minHeight: theme.__hd__.alert.sizes.height,
     flexDirection: 'row'
@@ -6410,9 +6412,12 @@ var Alert = function Alert(_ref2) {
     _ref2$intent = _ref2.intent,
     intent = _ref2$intent === void 0 ? 'info' : _ref2$intent,
     onClose = _ref2.onClose,
+    _ref2$variant = _ref2.variant,
+    variant = _ref2$variant === void 0 ? 'rounded' : _ref2$variant,
     style = _ref2.style,
     testID = _ref2.testID;
   return /*#__PURE__*/React__default["default"].createElement(Container$1, {
+    themeVariant: variant,
     themeIntent: intent,
     style: style,
     testID: testID

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.1.0",
+  "version": "8.2.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.1.0",
+    "@hero-design/colors": "8.2.0",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.12"
@@ -29,8 +29,8 @@
   "peerDependencies": {
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
-    "react": "17.0.2",
-    "react-native": "0.65.1",
+    "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",
@@ -44,7 +44,7 @@
     "@babel/preset-typescript": "^7.17.12",
     "@babel/runtime": "^7.18.9",
     "@emotion/jest": "^11.9.3",
-    "@hero-design/eslint-plugin": "8.1.0",
+    "@hero-design/eslint-plugin": "8.2.0",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "@rollup/plugin-babel": "^5.3.1",
@@ -60,18 +60,17 @@
     "@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.1.0",
+    "eslint-config-hd": "8.2.0",
     "jest": "^27.3.1",
-    "prettier-config-hd": "8.1.0",
-    "react": "17.0.2",
-    "react-native": "0.65.1",
+    "prettier-config-hd": "8.2.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",
     "react-native-webview": "^11.15.0",
-    "react-test-renderer": "17.0.2",
-    "rn-7-23-0": "npm:@hero-design/rn@7.23.0",
+    "react-test-renderer": "18.0.0",
     "rollup": "^2.68.0",
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-flow": "^1.1.1",

package/src/components/Accordion/__tests__/__snapshots__/AccordionItem.spec.tsx.snap

@@ -18,7 +18,6 @@ exports[`AccordionItem renders correctly when header is an element 1`] = `
     accessible={true}
     collapsable={false}
     focusable={false}
-    nativeID="animatedComponent"
     onClick={[Function]}
     onResponderGrant={[Function]}
     onResponderMove={[Function]}
@@ -71,7 +70,6 @@ exports[`AccordionItem renders correctly when header is an element 1`] = `
   </View>
   <View
     collapsable={false}
-    nativeID="animatedComponent"
     style={
       Object {
         "height": 0,
@@ -152,7 +150,6 @@ exports[`AccordionItem renders correctly when header is string 1`] = `
     accessible={true}
     collapsable={false}
     focusable={false}
-    nativeID="animatedComponent"
     onClick={[Function]}
     onResponderGrant={[Function]}
     onResponderMove={[Function]}
@@ -205,7 +202,6 @@ exports[`AccordionItem renders correctly when header is string 1`] = `
   </View>
   <View
     collapsable={false}
-    nativeID="animatedComponent"
     style={
       Object {
         "height": 0,
@@ -286,7 +282,6 @@ exports[`AccordionItem renders correctly when open 1`] = `
     accessible={true}
     collapsable={false}
     focusable={false}
-    nativeID="animatedComponent"
     onClick={[Function]}
     onResponderGrant={[Function]}
     onResponderMove={[Function]}
@@ -339,7 +334,6 @@ exports[`AccordionItem renders correctly when open 1`] = `
   </View>
   <View
     collapsable={false}
-    nativeID="animatedComponent"
     style={
       Object {
         "height": 0,
@@ -420,7 +414,6 @@ exports[`AccordionItem renders correctly when variant is card 1`] = `
     accessible={true}
     collapsable={false}
     focusable={false}
-    nativeID="animatedComponent"
     onClick={[Function]}
     onResponderGrant={[Function]}
     onResponderMove={[Function]}
@@ -473,7 +466,6 @@ exports[`AccordionItem renders correctly when variant is card 1`] = `
   </View>
   <View
     collapsable={false}
-    nativeID="animatedComponent"
     style={
       Object {
         "height": 0,

package/src/components/Accordion/__tests__/__snapshots__/index.spec.tsx.snap

@@ -26,7 +26,6 @@ exports[`Accordion allows fully controlled 1`] = `
       accessible={true}
       collapsable={false}
       focusable={true}
-      nativeID="animatedComponent"
       onClick={[Function]}
       onResponderGrant={[Function]}
       onResponderMove={[Function]}
@@ -79,7 +78,6 @@ exports[`Accordion allows fully controlled 1`] = `
     </View>
     <View
       collapsable={false}
-      nativeID="animatedComponent"
       style={
         Object {
           "height": 0,
@@ -157,7 +155,6 @@ exports[`Accordion allows fully controlled 1`] = `
       accessible={true}
       collapsable={false}
       focusable={true}
-      nativeID="animatedComponent"
       onClick={[Function]}
       onResponderGrant={[Function]}
       onResponderMove={[Function]}
@@ -210,7 +207,6 @@ exports[`Accordion allows fully controlled 1`] = `
     </View>
     <View
       collapsable={false}
-      nativeID="animatedComponent"
       style={
         Object {
           "height": 0,
@@ -300,7 +296,6 @@ exports[`Accordion renders correctly 1`] = `
       accessible={true}
       collapsable={false}
       focusable={true}
-      nativeID="animatedComponent"
       onClick={[Function]}
       onResponderGrant={[Function]}
       onResponderMove={[Function]}
@@ -353,7 +348,6 @@ exports[`Accordion renders correctly 1`] = `
     </View>
     <View
       collapsable={false}
-      nativeID="animatedComponent"
       style={
         Object {
           "height": 0,
@@ -431,7 +425,6 @@ exports[`Accordion renders correctly 1`] = `
       accessible={true}
       collapsable={false}
       focusable={true}
-      nativeID="animatedComponent"
       onClick={[Function]}
       onResponderGrant={[Function]}
       onResponderMove={[Function]}
@@ -484,7 +477,6 @@ exports[`Accordion renders correctly 1`] = `
     </View>
     <View
       collapsable={false}
-      nativeID="animatedComponent"
       style={
         Object {
           "height": 0,
@@ -574,7 +566,6 @@ exports[`Accordion renders correctly when variant is card 1`] = `
       accessible={true}
       collapsable={false}
       focusable={true}
-      nativeID="animatedComponent"
       onClick={[Function]}
       onResponderGrant={[Function]}
       onResponderMove={[Function]}
@@ -627,7 +618,6 @@ exports[`Accordion renders correctly when variant is card 1`] = `
     </View>
     <View
       collapsable={false}
-      nativeID="animatedComponent"
       style={
         Object {
           "height": 0,
@@ -716,7 +706,6 @@ exports[`Accordion renders correctly when variant is card 1`] = `
       accessible={true}
       collapsable={false}
       focusable={true}
-      nativeID="animatedComponent"
       onClick={[Function]}
       onResponderGrant={[Function]}
       onResponderMove={[Function]}
@@ -769,7 +758,6 @@ exports[`Accordion renders correctly when variant is card 1`] = `
     </View>
     <View
       collapsable={false}
-      nativeID="animatedComponent"
       style={
         Object {
           "height": 0,

package/src/components/Alert/StyledAlert.tsx

@@ -4,9 +4,11 @@ import type { ComponentProps } from 'react';
 import type { ViewProps } from 'react-native';
 
 const Container = styled(View)<{
+  themeVariant: 'rounded' | 'unrounded';
   themeIntent: 'success' | 'info' | 'warning' | 'error' | 'notification';
-}>(({ theme, themeIntent }) => ({
-  borderRadius: theme.__hd__.alert.radii.default,
+}>(({ theme, themeVariant = 'rounded', themeIntent }) => ({
+  borderRadius:
+    themeVariant === 'rounded' ? theme.__hd__.alert.radii.default : 0,
   backgroundColor: theme.__hd__.alert.colors[themeIntent],
   minHeight: theme.__hd__.alert.sizes.height,
   flexDirection: 'row',

package/src/components/Alert/__tests__/__snapshots__/index.spec.tsx.snap

@@ -14,6 +14,7 @@ exports[`Alert Icon render custom icon correctly 1`] = `
     ]
   }
   themeIntent="info"
+  themeVariant="rounded"
 >
   <View
     showDivider={false}
@@ -107,6 +108,7 @@ exports[`Alert renders correctly when intent is error 1`] = `
     ]
   }
   themeIntent="error"
+  themeVariant="rounded"
 >
   <View
     showDivider={true}
@@ -207,7 +209,6 @@ exports[`Alert renders correctly when intent is error 1`] = `
     accessible={true}
     collapsable={false}
     focusable={true}
-    nativeID="animatedComponent"
     onClick={[Function]}
     onResponderGrant={[Function]}
     onResponderMove={[Function]}
@@ -256,6 +257,7 @@ exports[`Alert renders correctly when intent is info 1`] = `
     ]
   }
   themeIntent="info"
+  themeVariant="rounded"
 >
   <View
     showDivider={true}
@@ -356,7 +358,6 @@ exports[`Alert renders correctly when intent is info 1`] = `
     accessible={true}
     collapsable={false}
     focusable={true}
-    nativeID="animatedComponent"
     onClick={[Function]}
     onResponderGrant={[Function]}
     onResponderMove={[Function]}
@@ -405,6 +406,7 @@ exports[`Alert renders correctly when intent is notification 1`] = `
     ]
   }
   themeIntent="notification"
+  themeVariant="rounded"
 >
   <View
     showDivider={true}
@@ -478,7 +480,6 @@ exports[`Alert renders correctly when intent is notification 1`] = `
     accessible={true}
     collapsable={false}
     focusable={true}
-    nativeID="animatedComponent"
     onClick={[Function]}
     onResponderGrant={[Function]}
     onResponderMove={[Function]}
@@ -527,6 +528,7 @@ exports[`Alert renders correctly when intent is success 1`] = `
     ]
   }
   themeIntent="success"
+  themeVariant="rounded"
 >
   <View
     showDivider={true}
@@ -627,7 +629,6 @@ exports[`Alert renders correctly when intent is success 1`] = `
     accessible={true}
     collapsable={false}
     focusable={true}
-    nativeID="animatedComponent"
     onClick={[Function]}
     onResponderGrant={[Function]}
     onResponderMove={[Function]}
@@ -676,6 +677,7 @@ exports[`Alert renders correctly when intent is warning 1`] = `
     ]
   }
   themeIntent="warning"
+  themeVariant="rounded"
 >
   <View
     showDivider={true}
@@ -776,7 +778,6 @@ exports[`Alert renders correctly when intent is warning 1`] = `
     accessible={true}
     collapsable={false}
     focusable={true}
-    nativeID="animatedComponent"
     onClick={[Function]}
     onResponderGrant={[Function]}
     onResponderMove={[Function]}
@@ -810,3 +811,117 @@ exports[`Alert renders correctly when intent is warning 1`] = `
   </View>
 </View>
 `;
+
+exports[`Alert renders correctly without rounded  1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#b5c3fd",
+        "borderRadius": 0,
+        "flexDirection": "row",
+        "minHeight": 48,
+      },
+      undefined,
+    ]
+  }
+  themeIntent="info"
+  themeVariant="unrounded"
+>
+  <View
+    showDivider={false}
+    style={
+      Array [
+        Object {
+          "borderColor": "#e8e9ea",
+          "borderRightWidth": 0,
+          "flex": 1,
+          "flexDirection": "row",
+          "paddingVertical": 12,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "paddingLeft": 12,
+          },
+          undefined,
+        ]
+      }
+      testID="alert-left-icon"
+    >
+      <HeroIcon
+        name="circle-info"
+        style={
+          Array [
+            Object {
+              "color": "#001f23",
+              "fontSize": 20,
+            },
+            undefined,
+          ]
+        }
+        themeIntent="text"
+        themeSize="small"
+      />
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "flex": 1,
+            "paddingHorizontal": 12,
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#001f23",
+              "fontFamily": "BeVietnamPro-SemiBold",
+              "fontSize": 14,
+              "letterSpacing": 0.42,
+              "lineHeight": 22,
+            },
+            undefined,
+          ]
+        }
+        themeFontSize="medium"
+        themeFontWeight="semi-bold"
+        themeIntent="body"
+        themeTypeface="neutral"
+      >
+        Title
+      </Text>
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#001f23",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 14,
+              "letterSpacing": 0.42,
+              "lineHeight": 22,
+            },
+            undefined,
+          ]
+        }
+        themeFontSize="medium"
+        themeFontWeight="regular"
+        themeIntent="body"
+        themeTypeface="neutral"
+      >
+        Content
+      </Text>
+    </View>
+  </View>
+</View>
+`;

package/src/components/Alert/__tests__/index.spec.tsx

@@ -29,6 +29,20 @@ describe('Alert', () => {
     expect(getByTestId('alert-close-icon')).toBeDefined();
   });
 
+  it('renders correctly without rounded ', () => {
+    const { toJSON, getByTestId, getByText, queryByTestId } = renderWithTheme(
+      <Alert title="Title" content="Content" variant="unrounded" />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    // Has default icon
+    expect(getByTestId('alert-left-icon')).toBeDefined();
+
+    expect(getByText('Title')).toBeDefined();
+    expect(getByText('Content')).toBeDefined();
+    expect(queryByTestId('alert-close-icon')).toBeNull();
+  });
+
   it('renders correctly when intent is notification', () => {
     const { toJSON, getByText, queryByTestId } = renderWithTheme(
       <Alert

package/src/components/Alert/index.tsx

@@ -1,7 +1,6 @@
-import type { ReactElement } from 'react';
 import React from 'react';
+import type { ReactElement } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
-import type { IconName } from '../Icon';
 import Icon from '../Icon';
 import Typography from '../Typography';
 import {
@@ -11,6 +10,7 @@ import {
   IconContainer,
   TextContainer,
 } from './StyledAlert';
+import type { IconName } from '../Icon';
 
 const getIntentIcon = (
   intent: 'success' | 'info' | 'warning' | 'error' | 'notification'
@@ -60,6 +60,10 @@ interface AlertProps {
    * Closing callback. When onClose is available, an X button will be rendered on the right side of alert. The callback will be called when user clicks on X button.
    */
   onClose?: () => void;
+  /**
+   * Alert variant.
+   */
+  variant?: 'unrounded' | 'rounded';
   /**
    * Addtional style.
    */
@@ -76,11 +80,17 @@ const Alert = ({
   title,
   intent = 'info',
   onClose,
+  variant = 'rounded',
   style,
   testID,
 }: AlertProps): JSX.Element => {
   return (
-    <Container themeIntent={intent} style={style} testID={testID}>
+    <Container
+      themeVariant={variant}
+      themeIntent={intent}
+      style={style}
+      testID={testID}
+    >
       <ContentContainer showDivider={!!onClose}>
         {icon !== null ? (
           <AlertIcon icon={icon || getIntentIcon(intent)} />

package/src/components/Attachment/__tests__/__snapshots__/index.spec.tsx.snap

@@ -87,7 +87,6 @@ exports[`Attachment renders correctly 1`] = `
     accessible={true}
     collapsable={false}
     focusable={true}
-    nativeID="animatedComponent"
     onClick={[Function]}
     onResponderGrant={[Function]}
     onResponderMove={[Function]}
@@ -123,7 +122,6 @@ exports[`Attachment renders correctly 1`] = `
     accessible={true}
     collapsable={false}
     focusable={true}
-    nativeID="animatedComponent"
     onClick={[Function]}
     onResponderGrant={[Function]}
     onResponderMove={[Function]}

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

@@ -2,10 +2,14 @@
 
 exports[`StyledAvatar renders correctly 1`] = `
 <View
+  accessibilityState={
+    Object {
+      "disabled": true,
+    }
+  }
   accessible={true}
   collapsable={false}
   focusable={false}
-  nativeID="animatedComponent"
   onClick={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}