@hero-design/rn-work-uikit 1.4.0 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn-work-uikit",
-  "version": "1.4.0",
+  "version": "1.6.0",
   "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.103.5",
+    "@hero-design/rn": "^8.103.7",
     "hero-editor": "^1.15.5"
   },
   "peerDependencies": {

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

@@ -4,6 +4,17 @@ exports[`DatePicker renders correctly (snapshot) 1`] = `
 <TouchableOpacity
   disabled={false}
   onPress={[Function]}
+  style={
+    [
+      [
+        {},
+      ],
+      undefined,
+    ]
+  }
+  testID="date-picker-ios-touchable-opacity"
+  themeGroupStyleEnabled={false}
+  themeHasError={false}
 >
   <View
     pointerEvents="none"
@@ -32,8 +43,8 @@ exports[`DatePicker renders correctly (snapshot) 1`] = `
         ]
       }
       themeFocused={false}
+      themeGroupStyleEnabled={false}
       themeHasError={false}
-      themeUseGroupStyleEnabled={false}
     >
       <View
         pointerEvents="none"
@@ -643,6 +654,17 @@ exports[`Dialog renders DatePickerAndroid when OS is android 1`] = `
 <TouchableOpacity
   disabled={false}
   onPress={[Function]}
+  style={
+    [
+      [
+        {},
+      ],
+      undefined,
+    ]
+  }
+  testID="date-picker-android-touchable-opacity"
+  themeGroupStyleEnabled={false}
+  themeHasError={false}
 >
   <View
     pointerEvents="none"
@@ -671,8 +693,8 @@ exports[`Dialog renders DatePickerAndroid when OS is android 1`] = `
         ]
       }
       themeFocused={false}
+      themeGroupStyleEnabled={false}
       themeHasError={false}
-      themeUseGroupStyleEnabled={false}
     >
       <View
         pointerEvents="none"
@@ -966,6 +988,17 @@ exports[`Dialog renders DatePickerIOS when OS is iOS 1`] = `
 <TouchableOpacity
   disabled={false}
   onPress={[Function]}
+  style={
+    [
+      [
+        {},
+      ],
+      undefined,
+    ]
+  }
+  testID="date-picker-ios-touchable-opacity"
+  themeGroupStyleEnabled={false}
+  themeHasError={false}
 >
   <View
     pointerEvents="none"
@@ -994,8 +1027,8 @@ exports[`Dialog renders DatePickerIOS when OS is iOS 1`] = `
         ]
       }
       themeFocused={false}
+      themeGroupStyleEnabled={false}
       themeHasError={false}
-      themeUseGroupStyleEnabled={false}
     >
       <View
         pointerEvents="none"

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

@@ -37,8 +37,8 @@ exports[`FormGroup should render: xxx 1`] = `
       ]
     }
     themeFocused={false}
+    themeGroupStyleEnabled={true}
     themeHasError={false}
-    themeUseGroupStyleEnabled={true}
   >
     <View
       pointerEvents="none"
@@ -199,6 +199,14 @@ exports[`FormGroup should render: xxx 1`] = `
             }
             allowFontScaling={false}
             editable={true}
+            inputProps={
+              {
+                "textStyle": {
+                  "borderBottomLeftRadius": 0,
+                  "borderBottomRightRadius": 0,
+                },
+              }
+            }
             onBlur={[Function]}
             onChangeText={[Function]}
             onFocus={[Function]}
@@ -290,8 +298,8 @@ exports[`FormGroup should render: xxx 1`] = `
     }
     testID="text-input-2"
     themeFocused={false}
+    themeGroupStyleEnabled={true}
     themeHasError={true}
-    themeUseGroupStyleEnabled={true}
   >
     <View
       pointerEvents="none"
@@ -480,6 +488,13 @@ exports[`FormGroup should render: xxx 1`] = `
             }
             allowFontScaling={false}
             editable={true}
+            inputProps={
+              {
+                "textStyle": {
+                  "borderRadius": 0,
+                },
+              }
+            }
             onBlur={[Function]}
             onChangeText={[Function]}
             onFocus={[Function]}
@@ -650,8 +665,8 @@ exports[`FormGroup should render: xxx 1`] = `
       ]
     }
     themeFocused={false}
+    themeGroupStyleEnabled={true}
     themeHasError={false}
-    themeUseGroupStyleEnabled={true}
   >
     <View
       pointerEvents="none"
@@ -812,6 +827,14 @@ exports[`FormGroup should render: xxx 1`] = `
             }
             allowFontScaling={false}
             editable={true}
+            inputProps={
+              {
+                "textStyle": {
+                  "borderTopLeftRadius": 0,
+                  "borderTopRightRadius": 0,
+                },
+              }
+            }
             onBlur={[Function]}
             onChangeText={[Function]}
             onFocus={[Function]}

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

@@ -1,9 +1,14 @@
 import React from 'react';
 import { within } from '@testing-library/react-native';
-import renderWithTheme from '../../../../testUtils/renderWithTheme';
-import FormGroup from '..';
-import TextInput from '../../TextInput';
 import theme from '../../../theme';
+import TextInput from '../../TextInput';
+import Select from '../../Select';
+import DatePicker from '../../DatePicker';
+import TimePicker from '../../TimePicker';
+import RichTextEditor from '../../RichTextEditor';
+import FormGroup from '..';
+import renderWithTheme from '../../../../testUtils/renderWithTheme';
+import { noop } from '../../../utils/functions';
 
 describe('FormGroup', () => {
   it('should render', () => {
@@ -176,4 +181,139 @@ describe('FormGroup', () => {
     );
     expect(borderKeys).toHaveLength(0);
   });
+
+  it('renders all component types (TextInput, Select, Select.Multi, DatePicker, TimePicker, RichTextEditor) with correct styles', () => {
+    const { getByTestId } = renderWithTheme(
+      <FormGroup>
+        <TextInput
+          label="Text Input"
+          value="Text Input"
+          testID="mixed-text-input"
+        />
+        <DatePicker
+          label="Date Picker"
+          value={new Date('1995-12-17T00:00:00.000Z')}
+          testID="mixed-date-picker"
+          onChange={noop}
+          confirmLabel="Confirm"
+        />
+        <TimePicker
+          label="Time Picker"
+          value={new Date('December 17, 1995 03:24:00')}
+          testID="mixed-time-picker"
+          onChange={noop}
+          confirmLabel="Confirm"
+        />
+        <RichTextEditor
+          label="Rich Text Editor"
+          value={[{ type: 'paragraph', children: [{ text: 'Content' }] }]}
+          onChange={noop}
+          name="mixed-rich-text-editor"
+          testID="mixed-rich-text-editor"
+        />
+        <Select
+          label="Single Select"
+          value="option1"
+          testID="mixed-select"
+          onConfirm={noop}
+          options={[
+            { text: 'Option 1', value: 'option1' },
+            { text: 'Option 2', value: 'option2' },
+          ]}
+        />
+        <Select.Multi
+          label="Multi Select"
+          value={['option1', 'option2']}
+          testID="mixed-select-multi"
+          onConfirm={noop}
+          footerLabel="Confirm"
+          options={[
+            { text: 'Option 1', value: 'option1' },
+            { text: 'Option 2', value: 'option2' },
+            { text: 'Option 3', value: 'option3' },
+          ]}
+        />
+      </FormGroup>
+    );
+
+    // TextInput should have top border radius removed (first component)
+    expect(
+      within(getByTestId('mixed-text-input'))
+        .getByTestId('text-input-border')
+        .props.style.flat()
+    ).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          borderBottomLeftRadius: 0,
+          borderBottomRightRadius: 0,
+        }),
+      ])
+    );
+
+    // DatePicker should have no border radius (middle component)
+    expect(
+      within(getByTestId('mixed-date-picker'))
+        .getByTestId('text-input-border')
+        .props.style.flat()
+    ).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          borderRadius: 0,
+        }),
+      ])
+    );
+
+    // TimePicker should have no border radius (middle component)
+    expect(
+      within(getByTestId('mixed-time-picker'))
+        .getByTestId('text-input-border')
+        .props.style.flat()
+    ).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          borderRadius: 0,
+        }),
+      ])
+    );
+
+    // RichTextEditor should have no border radius (middle component)
+    expect(
+      within(getByTestId('mixed-rich-text-editor'))
+        .getByTestId('text-input-border')
+        .props.style.flat()
+    ).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          borderRadius: 0,
+        }),
+      ])
+    );
+
+    // Select should have no border radius (middle component)
+    expect(
+      within(getByTestId('mixed-select'))
+        .getByTestId('text-input-border')
+        .props.style.flat()
+    ).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          borderRadius: 0,
+        }),
+      ])
+    );
+
+    // Select.Multi should have bottom border radius removed (last component)
+    expect(
+      within(getByTestId('mixed-select-multi'))
+        .getByTestId('text-input-border')
+        .props.style.flat()
+    ).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          borderTopLeftRadius: 0,
+          borderTopRightRadius: 0,
+        }),
+      ])
+    );
+  });
 });

package/src/components/FormGroup/index.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useMemo } from 'react';
+import React, { ReactElement, ReactNode, useMemo } from 'react';
 import { StyleProp, StyleSheet, ViewProps, ViewStyle } from 'react-native';
 import { Box, useTheme } from '@hero-design/rn';
 import { generateBorderStyle, generateMarginStyle } from './utils';
@@ -6,7 +6,7 @@ import { generateBorderStyle, generateMarginStyle } from './utils';
 export interface FormGroupProps extends ViewProps {
   /**
    * The children of the FormGroup. In order for the group styling to work,
-   * they must be either HD form components (TextInput, Select, Pickers,...) or enhanced HD form components
+   * they must be either HD form components (TextInput, Select, Pickers,...) or enhanced HD input components
    * that supports the corresponding interface.
    *
    * Example:
@@ -33,15 +33,15 @@ export interface FormGroupProps extends ViewProps {
 const FormGroup = ({ children, style, testID, ...props }: FormGroupProps) => {
   const theme = useTheme();
   const childrenArray = React.Children.toArray(children).filter(
-    React.isValidElement
+    (child): child is ReactElement => React.isValidElement(child)
   );
 
   // If there are multiple children, inject styles to group them together.
   const groupedChildren = useMemo(
     () =>
       childrenArray.map((child, index) => {
-        const rawChildStyle = (child as React.ReactElement).props.style;
-        const rawChildTextStyle = (child as React.ReactElement).props.textStyle;
+        const rawChildStyle = child.props.style;
+        const rawChildTextStyle = child.props.textStyle;
 
         // Handle array styles by flattening them first
         const childStyle = StyleSheet.flatten(rawChildStyle);
@@ -77,11 +77,20 @@ const FormGroup = ({ children, style, testID, ...props }: FormGroupProps) => {
           }),
         };
 
-        return React.cloneElement(child as React.ReactElement, {
+        return React.cloneElement(child, {
           style: mergedStyle,
           textStyle: mergedTextStyle,
           // Internal text input prop to allow for different styling
-          enableGroupStyle: true,
+          groupStyleEnabled: true,
+
+          // For HD components that uses FormGroup
+          inputProps: {
+            ...child.props.inputProps,
+            textStyle: {
+              ...child.props.inputProps?.textStyle,
+              ...mergedTextStyle,
+            },
+          },
         });
       }),
     [childrenArray, theme]

package/src/components/RichTextEditor/RichTextEditor.tsx

@@ -1,12 +1,15 @@
+import type { ComponentType, ReactElement } from 'react';
 import React, { useMemo } from 'react';
-import type { ComponentType, ReactElement, Ref } from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
 
 import { plainSerializer } from 'hero-editor';
-import TextInput from '../TextInput';
+import { InternalTextInput } from '../TextInput';
 import RichTextEditorInput from './RichTextEditorInput';
-import type { EditorValue, TextUnit } from './types';
 import { StyledWrapper } from './StyledRichTextEditor';
+import type {
+  EditorValue,
+  InternalRichTextEditorProps,
+  TextUnit,
+} from './types';
 
 export interface RichTextEditorRef {
   requestBlur: VoidFunction;
@@ -15,22 +18,6 @@ export interface RichTextEditorRef {
   setReadOnly: (readOnly: boolean) => void;
 }
 
-export interface RichTextEditorProps {
-  autoFocus?: boolean;
-  error?: string;
-  value?: EditorValue;
-  name: string;
-  onChange: (data: EditorValue) => void;
-  onCursorChange?: (params: { position: { top: number } }) => void;
-  placeholder?: string;
-  style?: StyleProp<ViewStyle>;
-  label: string;
-  helpText?: string;
-  required?: boolean;
-  testID?: string;
-  forwardedRef?: Ref<RichTextEditorRef>;
-}
-
 const defaultValue: EditorValue = [
   {
     type: 'paragraph',
@@ -38,7 +25,7 @@ const defaultValue: EditorValue = [
   },
 ];
 
-const RichTextEditor: ComponentType<RichTextEditorProps> = ({
+const RichTextEditor: ComponentType<InternalRichTextEditorProps> = ({
   autoFocus = true,
   name,
   placeholder = '',
@@ -46,18 +33,20 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
   onCursorChange,
   error = '',
   style = {},
+  textStyle,
   label,
   helpText,
   required,
   testID,
   forwardedRef,
   value = defaultValue,
-}: RichTextEditorProps): ReactElement => {
+  groupStyleEnabled = false,
+}: InternalRichTextEditorProps): ReactElement => {
   const plain = useMemo(() => plainSerializer(value), [value]);
 
   return (
-    <StyledWrapper>
-      <TextInput
+    <StyledWrapper groupStyleEnabled={groupStyleEnabled}>
+      <InternalTextInput
         autoFocus={autoFocus}
         error={error}
         label={label}
@@ -66,7 +55,9 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
         placeholder={placeholder}
         value={plain}
         style={style}
+        textStyle={textStyle}
         helpText={helpText}
+        groupStyleEnabled={groupStyleEnabled}
         renderInputValue={(inputProps, ref) => (
           <RichTextEditorInput
             {...inputProps}

package/src/components/RichTextEditor/RichTextEditorInput.tsx

@@ -11,6 +11,7 @@ import React, {
 import type { Ref } from 'react';
 import { WebView } from 'react-native-webview';
 
+import { View } from 'react-native';
 import { isAndroid } from '../../utils/helpers';
 import { emitter } from './EditorEvent';
 import * as Events from './utils/events';
@@ -268,17 +269,22 @@ const RichTextEditorInput = forwardRef<
     );
 
     return (
-      <StyledWebView
-        ref={webview}
-        testID="webview"
-        originWhitelist={['*']}
-        height={webviewHeight}
-        source={{ html }}
-        onMessage={onMessage}
-        scrollEnabled={false}
-        hideKeyboardAccessoryView
-        keyboardDisplayRequiresUserAction={false}
-      />
+      <View
+        style={{
+          height: webviewHeight,
+        }}
+      >
+        <StyledWebView
+          ref={webview}
+          testID="webview"
+          originWhitelist={['*']}
+          source={{ html }}
+          onMessage={onMessage}
+          scrollEnabled={false}
+          hideKeyboardAccessoryView
+          keyboardDisplayRequiresUserAction={false}
+        />
+      </View>
     );
   }
 );

package/src/components/RichTextEditor/StyledRichTextEditor.tsx

@@ -2,14 +2,17 @@ import { styled } from '@hero-design/rn';
 import { View } from 'react-native';
 import { WebView } from 'react-native-webview';
 
-export const StyledWrapper = styled(View)(({ theme }) => ({
-  marginBottom: theme.__hd__.richTextEditor.space.wrapperMarginBottom,
-}));
+export const StyledWrapper = styled(View)<{ groupStyleEnabled?: boolean }>(
+  ({ theme, groupStyleEnabled }) => ({
+    ...(groupStyleEnabled
+      ? {}
+      : {
+          marginBottom: theme.__hd__.richTextEditor.space.wrapperMarginBottom,
+        }),
+  })
+);
 
-export const StyledWebView = styled(WebView)<{
-  height: number | undefined;
-}>(({ height, theme }) => ({
-  height,
+export const StyledWebView = styled(WebView)(({ theme }) => ({
   minHeight: theme.__hd__.richTextEditor.sizes.editorMinHeight,
   backgroundColor: 'transparent',
   textAlignVertical: 'center',

package/src/components/RichTextEditor/__tests__/RichTextEditor.spec.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import RichTextEditor from '../RichTextEditor';
+import renderWithTheme from '../../../../testUtils/renderWithTheme';
+
+const initialValue = [
+  { type: 'paragraph', children: [{ text: 'Hello world' }] },
+];
+
+describe('RichTextEditor zIndex', () => {
+  it('applies correct zIndex logic when groupStyleEnabled is true', () => {
+    const { getByTestId } = renderWithTheme(
+      <RichTextEditor
+        label="Test Editor"
+        value={initialValue}
+        onChange={jest.fn()}
+        name="test-editor"
+        testID="rich-text-editor"
+        groupStyleEnabled
+      />
+    );
+
+    const container = getByTestId('rich-text-editor');
+
+    // Initially should have zIndex 0 (normal state)
+    expect(container.props.style.flat()).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          zIndex: 0,
+        }),
+      ])
+    );
+  });
+
+  it('applies correct zIndex when has error', () => {
+    const { getByTestId } = renderWithTheme(
+      <RichTextEditor
+        label="Test Editor"
+        value={initialValue}
+        onChange={jest.fn()}
+        name="test-editor"
+        testID="rich-text-editor"
+        error="This is an error"
+        groupStyleEnabled
+      />
+    );
+
+    const container = getByTestId('rich-text-editor');
+
+    // Should have zIndex 1 when has error (medium priority)
+    expect(container.props.style.flat()).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          zIndex: 1,
+        }),
+      ])
+    );
+  });
+
+  it('does not apply zIndex when groupStyleEnabled is false', () => {
+    const { getByTestId } = renderWithTheme(
+      <RichTextEditor
+        label="Test Editor"
+        value={initialValue}
+        onChange={jest.fn()}
+        name="test-editor"
+        testID="rich-text-editor"
+        groupStyleEnabled={false}
+        error="This is an error"
+      />
+    );
+
+    const container = getByTestId('rich-text-editor');
+
+    // Should not have zIndex applied when groupStyleEnabled is false
+    const containerStyle = container.props.style.flat();
+    const hasZIndex = containerStyle.some(
+      (style: Record<string, unknown>) => style && style.zIndex !== undefined
+    );
+    expect(hasZIndex).toBe(false);
+  });
+});

package/src/components/RichTextEditor/index.tsx

@@ -1,9 +1,7 @@
 import React, { forwardRef } from 'react';
-import RichTextEditor, {
-  RichTextEditorProps,
-  RichTextEditorRef,
-} from './RichTextEditor';
+import RichTextEditor, { RichTextEditorRef } from './RichTextEditor';
 import MentionList from './MentionList';
+import type { RichTextEditorProps } from './types';
 
 import Toolbar from './EditorToolbar';
 

package/src/components/RichTextEditor/types.ts

@@ -1,4 +1,4 @@
-import type { StyleProp, ViewStyle } from 'react-native';
+import type { StyleProp, ViewStyle, TextStyle } from 'react-native';
 
 import { Ref } from 'react';
 import type { TextInputProps } from '../TextInput';
@@ -83,5 +83,16 @@ export interface RichTextEditorProps {
 }
 
 export interface InternalRichTextEditorProps extends RichTextEditorProps {
+  /**
+   * Input text style
+   */
+  textStyle?: StyleProp<TextStyle>;
+  /**
+   * Whether the component is used within a FormGroup
+   */
+  groupStyleEnabled?: boolean;
+  /**
+   * Custom TextInput component to be used instead of the default one
+   */
   TextInputComponent?: React.ComponentType<TextInputProps>;
 }