@hero-design/rn-work-uikit 1.6.5-alpha.0 → 1.6.5

package/CHANGELOG.md

@@ -1,13 +1,21 @@
 # @hero-design/rn-work-uikit
 
-## 1.6.5-alpha.0
+## 1.6.5
 
 ### Patch Changes
 
-- [#4123](https://github.com/Thinkei/hero-design/pull/4123) [`ecc5905dec81783858f57595a0af4306ff3b0b89`](https://github.com/Thinkei/hero-design/commit/ecc5905dec81783858f57595a0af4306ff3b0b89) Thanks [@truongnguyen-eh](https://github.com/truongnguyen-eh)! - [ANG-3740] Resolve conflict between alpha and master-react-18
+- [#4161](https://github.com/Thinkei/hero-design/pull/4161) [`627837da7838e5a3295dc4dece3de83cbcc19c4b`](https://github.com/Thinkei/hero-design/commit/627837da7838e5a3295dc4dece3de83cbcc19c4b) Thanks [@ttkien](https://github.com/ttkien)! - [Empty]
 
-- Updated dependencies [[`e92d1dab57316441e7b5054debe823328e1a1083`](https://github.com/Thinkei/hero-design/commit/e92d1dab57316441e7b5054debe823328e1a1083), [`ecc5905dec81783858f57595a0af4306ff3b0b89`](https://github.com/Thinkei/hero-design/commit/ecc5905dec81783858f57595a0af4306ff3b0b89)]:
-  - @hero-design/rn@8.105.4-alpha.0
+  - deprecate variant, image
+
+  [Success][error]
+
+  - deprecate image
+  - reduce icon size
+  - increase Primary Buttons margin from medium to large
+
+- Updated dependencies [[`627837da7838e5a3295dc4dece3de83cbcc19c4b`](https://github.com/Thinkei/hero-design/commit/627837da7838e5a3295dc4dece3de83cbcc19c4b)]:
+  - @hero-design/rn@8.105.4
 
 ## 1.6.4
 

package/lib/index.js

@@ -6397,14 +6397,15 @@ var getErrorTheme = function getErrorTheme(theme) {
     imageMarginBottom: theme.space.large,
     wrapperPadding: theme.space.large,
     button: {
-      wrapperHorizontalPadding: theme.space.medium,
+      wrapperHorizontalPadding: theme.space.large,
       wrapperVerticalPadding: theme.space.xxxlarge,
       margin: theme.space.medium,
       padding: theme.space.medium
     }
   };
   var sizes = {
-    image: theme.sizes['19xlarge']
+    image: theme.sizes['6xlarge'],
+    icon: theme.sizes['6xlarge']
   };
   var colors = {
     title: theme.colors.onDefaultGlobalSurface,
@@ -6922,14 +6923,16 @@ var getSuccessTheme = function getSuccessTheme(theme) {
     imageMarginBottom: theme.space.xlarge,
     wrapperPadding: theme.space.large,
     button: {
-      wrapperHorizontalPadding: theme.space.medium,
+      wrapperHorizontalPadding: theme.space.large,
       wrapperVerticalPadding: theme.space.xxxlarge,
       margin: theme.space.medium,
-      padding: theme.space.medium
+      padding: theme.space.medium,
+      secondaryCTAMarginTop: theme.space.medium
     }
   };
   var sizes = {
-    image: theme.sizes['19xlarge']
+    image: theme.sizes['19xlarge'],
+    icon: theme.sizes['6xlarge']
   };
   var colors = {
     title: theme.colors.onDefaultGlobalSurface,
@@ -23661,8 +23664,17 @@ var StyledErrorImageContainer = index$b(reactNative.View)(function (_ref6) {
     alignItems: 'center'
   };
 });
-var StyledErrorImage = index$b(Image)(function (_ref7) {
+var StyledErrorIconContainer = index$b(reactNative.View)(function (_ref7) {
   var theme = _ref7.theme;
+  return {
+    marginBottom: theme.__hd__.error.space.imageMarginBottom,
+    width: theme.__hd__.error.sizes.icon,
+    height: theme.__hd__.error.sizes.icon,
+    alignItems: 'center'
+  };
+});
+var StyledErrorImage = index$b(Image)(function (_ref8) {
+  var theme = _ref8.theme;
   return {
     marginBottom: theme.__hd__.error.space.imageMarginBottom,
     width: theme.__hd__.error.sizes.image,
@@ -23670,16 +23682,16 @@ var StyledErrorImage = index$b(Image)(function (_ref7) {
     resizeMode: 'contain'
   };
 });
-var StyledErrorTitle = index$b(Typography.Title)(function (_ref8) {
-  var theme = _ref8.theme;
+var StyledErrorTitle = index$b(Typography.Title)(function (_ref9) {
+  var theme = _ref9.theme;
   return {
     textAlign: 'center',
     marginBottom: theme.__hd__.error.space.titleMarginBottom,
     color: theme.__hd__.error.colors.title
   };
 });
-var StyledErrorDescription = index$b(Typography.Body)(function (_ref9) {
-  var theme = _ref9.theme;
+var StyledErrorDescription = index$b(Typography.Body)(function (_ref10) {
+  var theme = _ref10.theme;
   return {
     textAlign: 'center',
     color: theme.__hd__.error.colors.description
@@ -23705,7 +23717,7 @@ var renderImageOrIcon$1 = function renderImageOrIcon(_ref) {
   var image = _ref.image,
     icon = _ref.icon;
   if (icon) {
-    return /*#__PURE__*/React__namespace.default.createElement(StyledErrorImageContainer, null, /*#__PURE__*/React__namespace.default.createElement(StatusIcon, {
+    return /*#__PURE__*/React__namespace.default.createElement(StyledErrorIconContainer, null, /*#__PURE__*/React__namespace.default.createElement(StatusIcon, {
       icon: icon,
       testID: "error-icon"
     }));
@@ -26198,23 +26210,32 @@ var StyledSuccessImageContainer = index$b(reactNative.View)(function (_ref4) {
     alignItems: 'center'
   };
 });
-var StyledSuccessTitle = index$b(Typography.Title)(function (_ref5) {
+var StyledSuccessIconContainer = index$b(reactNative.View)(function (_ref5) {
   var theme = _ref5.theme;
+  return {
+    marginBottom: theme.__hd__.success.space.imageMarginBottom,
+    width: theme.__hd__.success.sizes.icon,
+    height: theme.__hd__.success.sizes.icon,
+    alignItems: 'center'
+  };
+});
+var StyledSuccessTitle = index$b(Typography.Title)(function (_ref6) {
+  var theme = _ref6.theme;
   return {
     textAlign: 'center',
     marginBottom: theme.__hd__.success.space.titleMarginBottom,
     color: theme.__hd__.success.colors.title
   };
 });
-var StyledSuccessDescription = index$b(Typography.Body)(function (_ref6) {
-  var theme = _ref6.theme;
+var StyledSuccessDescription = index$b(Typography.Body)(function (_ref7) {
+  var theme = _ref7.theme;
   return {
     textAlign: 'center',
     color: theme.__hd__.success.colors.description
   };
 });
-var StyledSuccessButtonContainer = index$b(reactNative.View)(function (_ref7) {
-  var theme = _ref7.theme;
+var StyledSuccessButtonContainer = index$b(reactNative.View)(function (_ref8) {
+  var theme = _ref8.theme;
   return {
     display: 'flex',
     flexDirection: 'column',
@@ -26224,12 +26245,19 @@ var StyledSuccessButtonContainer = index$b(reactNative.View)(function (_ref7) {
     paddingVertical: theme.__hd__.success.space.button.wrapperVerticalPadding
   };
 });
-var StyledSuccessButtonPrimary = index$b(CompoundButton)(function (_ref8) {
-  var theme = _ref8.theme;
+var StyledSuccessButtonPrimary = index$b(CompoundButton)(function (_ref9) {
+  var theme = _ref9.theme;
   return {
     padding: theme.__hd__.success.space.button.padding
   };
 });
+var StyledSuccessButtonSecondary = index$b(CompoundButton)(function (_ref10) {
+  var theme = _ref10.theme;
+  return {
+    padding: theme.__hd__.success.space.button.padding,
+    marginTop: theme.__hd__.success.space.button.secondaryCTAMarginTop
+  };
+});
 var StyledSuccessModal = index$b(ModalWrapper)({
   height: '100%',
   width: '100%'
@@ -26253,7 +26281,7 @@ var renderImageOrIcon = function renderImageOrIcon(_ref) {
   var image = _ref.image,
     icon = _ref.icon;
   if (icon) {
-    return /*#__PURE__*/React__namespace.default.createElement(StyledSuccessImageContainer, null, /*#__PURE__*/React__namespace.default.createElement(StatusIcon, {
+    return /*#__PURE__*/React__namespace.default.createElement(StyledSuccessIconContainer, null, /*#__PURE__*/React__namespace.default.createElement(StatusIcon, {
       icon: icon,
       testID: "success-icon"
     }));
@@ -26290,7 +26318,7 @@ var SuccessPage = function SuccessPage(_ref2) {
   }, title), typeof description === 'string' ? /*#__PURE__*/React__namespace.default.createElement(StyledSuccessDescription, null, description) : description), !!ctaText && /*#__PURE__*/React__namespace.default.createElement(StyledSuccessButtonContainer, null, /*#__PURE__*/React__namespace.default.createElement(StyledSuccessButtonPrimary, {
     text: ctaText,
     onPress: onCtaPress
-  }), !!showSecondaryButton && /*#__PURE__*/React__namespace.default.createElement(StyledSuccessButtonPrimary, {
+  }), !!showSecondaryButton && /*#__PURE__*/React__namespace.default.createElement(StyledSuccessButtonSecondary, {
     variant: "text",
     text: secondaryCtaText,
     onPress: onSecondaryCtaPress

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn-work-uikit",
-  "version": "1.6.5-alpha.0",
+  "version": "1.6.5",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -23,7 +23,7 @@
     "@emotion/native": "^11.9.3",
     "@emotion/primitives-core": "11.0.0",
     "@emotion/react": "^11.9.3",
-    "@hero-design/rn": "^8.105.4-alpha.0",
+    "@hero-design/rn": "^8.105.4",
     "hero-editor": "^1.15.5"
   },
   "peerDependencies": {

package/src/components/DatePicker/index.tsx

@@ -1,8 +1,6 @@
 import React from 'react';
-import {
-  DatePicker as InternalDatePicker,
-  DatePickerProps,
-} from '@hero-design/rn';
+import type { DatePickerProps } from '@hero-design/rn';
+import { DatePicker as InternalDatePicker } from '@hero-design/rn';
 import TextInput from '../TextInput';
 
 const DatePicker = (props: DatePickerProps) => {

package/src/components/FormGroup/index.tsx

@@ -1,5 +1,7 @@
-import React, { ReactElement, ReactNode, useMemo } from 'react';
-import { StyleProp, StyleSheet, ViewProps, ViewStyle } from 'react-native';
+import type { ReactElement, ReactNode } from 'react';
+import React, { useMemo } from 'react';
+import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
+import { StyleSheet } from 'react-native';
 import { Box, useTheme } from '@hero-design/rn';
 import { generateBorderStyle, generateMarginStyle } from './utils';
 

package/src/components/FormGroup/utils.ts

@@ -1,5 +1,5 @@
-import { CSSProperties } from 'react';
-import { Theme } from '@hero-design/rn';
+import type { CSSProperties } from 'react';
+import type { Theme } from '@hero-design/rn';
 
 /**
  * Generates the border style for the TextInputGroup.

package/src/components/RichTextEditor/EditorToolbar.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import type { ComponentType } from 'react';
-import { Icon, IconProps } from '@hero-design/rn';
+import type { IconProps } from '@hero-design/rn';
+import { Icon } from '@hero-design/rn';
 import { ToolbarEvents } from './constants';
 import { emitter } from './EditorEvent';
 import {
@@ -8,7 +9,7 @@ import {
   StyledToolbar,
   StyledToolbarButton,
 } from './StyledToolbar';
-import { ToolbarButtonName } from './types';
+import type { ToolbarButtonName } from './types';
 import * as Events from './utils/events';
 
 type ToolbarButtonProps = {

package/src/components/RichTextEditor/RichTextEditorInput.tsx

@@ -9,7 +9,7 @@ import React, {
   useState,
 } from 'react';
 import type { Ref } from 'react';
-import { WebView } from 'react-native-webview';
+import type { WebView } from 'react-native-webview';
 
 import { View } from 'react-native';
 import { isAndroid } from '../../utils/helpers';
@@ -26,7 +26,7 @@ import {
 import type { WebViewEventMessage } from './utils/rnWebView';
 import { useTheme } from '../../theme';
 import { StyledWebView } from './StyledRichTextEditor';
-import { TextInputRef } from '../TextInput/types';
+import type { TextInputRef } from '../TextInput/types';
 
 const RichTextEditorInput = forwardRef<
   TextInputRef,

package/src/components/RichTextEditor/index.tsx

@@ -1,5 +1,6 @@
 import React, { forwardRef } from 'react';
-import RichTextEditor, { RichTextEditorRef } from './RichTextEditor';
+import type { RichTextEditorRef } from './RichTextEditor';
+import RichTextEditor from './RichTextEditor';
 import MentionList from './MentionList';
 import type { RichTextEditorProps } from './types';
 

package/src/components/RichTextEditor/types.ts

@@ -1,6 +1,6 @@
 import type { StyleProp, ViewStyle, TextStyle } from 'react-native';
 
-import { Ref } from 'react';
+import type { Ref } from 'react';
 import type { TextInputProps } from '../TextInput';
 
 export type ToolbarButtonName =

package/src/components/RichTextEditor/utils/events.ts

@@ -1,4 +1,4 @@
-import { EventEmitter } from 'events';
+import type { EventEmitter } from 'events';
 
 export interface Listener<T> {
   (data: T): void;

package/src/components/RichTextEditor/utils/rnWebView.tsx

@@ -1,4 +1,4 @@
-import WebView from 'react-native-webview';
+import type WebView from 'react-native-webview';
 
 export const requestBlurEditor = (element: WebView): void => {
   element.injectJavaScript(

package/src/components/Select/index.tsx

@@ -1,9 +1,9 @@
-import {
-  Select as InternalSelect,
+import type {
   MultiSelectProps,
   SelectOptionType,
   SingleSelectProps,
 } from '@hero-design/rn';
+import { Select as InternalSelect } from '@hero-design/rn';
 import React from 'react';
 import TextInput from '../TextInput';
 

package/src/components/TextInput/InputComponent.tsx

@@ -1,5 +1,5 @@
 import React, { useImperativeHandle, useRef } from 'react';
-import {
+import type {
   TextInput as RNTextInput,
   TextInputProps as RNTextInputProps,
 } from 'react-native';

package/src/components/TextInput/InputRow.tsx

@@ -4,7 +4,7 @@ import type {
   NativeSyntheticEvent,
   TextInputFocusEventData,
 } from 'react-native';
-import { IconName } from '@hero-design/rn';
+import type { IconName } from '@hero-design/rn';
 import { StyledInputRow } from './StyledTextInput';
 import PrefixComponent from './PrefixComponent';
 import InputComponent from './InputComponent';

package/src/components/TextInput/PrefixComponent.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
-import { Icon, IconName } from '@hero-design/rn';
-import { View, ViewProps } from 'react-native';
+import type { IconName } from '@hero-design/rn';
+import { Icon } from '@hero-design/rn';
+import type { ViewProps } from 'react-native';
+import { View } from 'react-native';
 import { StyledPrefixComponentWrapper, type State } from './StyledTextInput';
 
 export interface PrefixComponentProps extends ViewProps {

package/src/components/TextInput/SuffixComponent.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Icon, IconName } from '@hero-design/rn';
+import type { IconName } from '@hero-design/rn';
+import { Icon } from '@hero-design/rn';
 import type { State } from './StyledTextInput';
 
 export interface SuffixComponentProps {

package/src/components/TextInput/__tests__/InputRow.spec.tsx

@@ -1,6 +1,9 @@
 import React from 'react';
-import { Text, TextInput as RNTextInput } from 'react-native';
-import type { TextInputProps as NativeTextInputProps } from 'react-native';
+import { Text } from 'react-native';
+import type {
+  TextInputProps as NativeTextInputProps,
+  TextInput as RNTextInput,
+} from 'react-native';
 import { fireEvent, waitFor } from '@testing-library/react-native';
 // import { TextInput as RNTextInput } from 'react-native';
 import renderWithTheme from '../../../../testUtils/renderWithTheme';

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

@@ -1,15 +1,16 @@
 import React from 'react';
 import { act, fireEvent, waitFor, within } from '@testing-library/react-native';
-import {
+import type {
   TextInput as RNTextInput,
   ViewStyle,
   StyleProp,
-  StyleSheet,
 } from 'react-native';
+import { StyleSheet } from 'react-native';
 import { Icon } from '@hero-design/rn';
 import { theme } from '../../..';
 import renderWithTheme from '../../../../testUtils/renderWithTheme';
-import TextInput, { TextInputHandles } from '../index';
+import type { TextInputHandles } from '../index';
+import TextInput from '../index';
 
 describe('TextInput', () => {
   describe('when user sees an empty input field', () => {

package/src/components/TimePicker/index.tsx

@@ -1,8 +1,6 @@
 import React from 'react';
-import {
-  TimePicker as InternalTimePicker,
-  TimePickerProps,
-} from '@hero-design/rn';
+import type { TimePickerProps } from '@hero-design/rn';
+import { TimePicker as InternalTimePicker } from '@hero-design/rn';
 import TextInput from '../TextInput';
 
 const TimePicker = (props: TimePickerProps) => {

package/src/theme/ThemeProvider.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import { ThemeProvider as BaseThemeProvider, useTheme } from '@hero-design/rn';
 import type { Theme } from './getTheme';
 

package/src/theme/ThemeSwitcher.tsx

@@ -1,4 +1,5 @@
-import React, { PropsWithChildren, useMemo } from 'react';
+import type { PropsWithChildren } from 'react';
+import React, { useMemo } from 'react';
 
 import {
   eBensSystemPalette,

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -628,13 +628,14 @@ exports[`theme returns correct theme object 1`] = `
         "title": 31.53846153846154,
       },
       "sizes": {
-        "image": 172.6153846153846,
+        "icon": 70.61538461538461,
+        "image": 70.61538461538461,
       },
       "space": {
         "button": {
           "margin": 15.692307692307693,
           "padding": 15.692307692307693,
-          "wrapperHorizontalPadding": 15.692307692307693,
+          "wrapperHorizontalPadding": 23.53846153846154,
           "wrapperVerticalPadding": 47.07692307692308,
         },
         "imageMarginBottom": 23.53846153846154,
@@ -1307,13 +1308,15 @@ exports[`theme returns correct theme object 1`] = `
         "title": "Saiga-Medium",
       },
       "sizes": {
+        "icon": 70.61538461538461,
         "image": 172.6153846153846,
       },
       "space": {
         "button": {
           "margin": 15.692307692307693,
           "padding": 15.692307692307693,
-          "wrapperHorizontalPadding": 15.692307692307693,
+          "secondaryCTAMarginTop": 15.692307692307693,
+          "wrapperHorizontalPadding": 23.53846153846154,
           "wrapperVerticalPadding": 47.07692307692308,
         },
         "imageMarginBottom": 31.384615384615387,

package/src/theme/getTheme.ts

@@ -1,9 +1,5 @@
-import {
-  getTheme as getBaseTheme,
-  Theme as BaseTheme,
-  swagSystemPalette,
-} from '@hero-design/rn';
-import type { Scale, SystemPalette } from '@hero-design/rn';
+import { getTheme as getBaseTheme, swagSystemPalette } from '@hero-design/rn';
+import type { Scale, SystemPalette, Theme as BaseTheme } from '@hero-design/rn';
 import getTextInputTheme from './components/textInput';
 
 // Work-specific theme type that includes textInput overrides