@hero-design/rn-work-uikit 1.3.1 → 1.5.0

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

@@ -0,0 +1,306 @@
+import React from 'react';
+import { within } from '@testing-library/react-native';
+import theme from '../../../theme';
+import TextInput from '../../TextInput';
+import Select from '../../Select';
+import FormGroup from '..';
+import renderWithTheme from '../../../../testUtils/renderWithTheme';
+import { noop } from '../../../utils/functions';
+
+describe('FormGroup', () => {
+  it('should render', () => {
+    const { getByText, getByTestId, toJSON } = renderWithTheme(
+      <FormGroup>
+        <TextInput label="Text Input 1" value="Text Input 1" required />
+        <TextInput
+          label="Text Input 2"
+          value="Text Input 2"
+          error="This is an error"
+          testID="text-input-2"
+        />
+        <TextInput label="Text Input 3" value="Text Input 3" required />
+      </FormGroup>
+    );
+
+    expect(toJSON()).toMatchSnapshot('xxx');
+
+    expect(getByText('Text Input 1')).toBeVisible();
+    expect(getByText('Text Input 2', { exact: false })).toBeVisible();
+    expect(
+      within(getByTestId('text-input-2')).getByText('(Optional)', {
+        exact: false,
+      })
+    ).toBeVisible();
+    expect(getByText('This is an error')).toBeVisible();
+    expect(getByText('Text Input 3')).toBeVisible();
+  });
+
+  it('renders with correct border styling', () => {
+    const { getByTestId } = renderWithTheme(
+      <FormGroup>
+        <TextInput value="Text Input 1" testID="text-input-1" />
+        <TextInput value="Text Input 2" testID="text-input-2" />
+        <TextInput value="Text Input 3" testID="text-input-3" />
+      </FormGroup>
+    );
+
+    expect(
+      within(getByTestId('text-input-1'))
+        .getByTestId('text-input-border')
+        .props.style.flat()
+    ).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          borderBottomLeftRadius: 0,
+          borderBottomRightRadius: 0,
+        }),
+      ])
+    );
+
+    expect(
+      within(getByTestId('text-input-2'))
+        .getByTestId('text-input-border')
+        .props.style.flat()
+    ).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          borderRadius: 0,
+        }),
+      ])
+    );
+
+    expect(
+      within(getByTestId('text-input-3'))
+        .getByTestId('text-input-border')
+        .props.style.flat()
+    ).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          borderTopLeftRadius: 0,
+          borderTopRightRadius: 0,
+        }),
+      ])
+    );
+  });
+
+  it('merges with the children styles in correct order', () => {
+    const { getByTestId } = renderWithTheme(
+      <FormGroup>
+        <TextInput
+          value="Text Input 1"
+          testID="text-input-1"
+          textStyle={{
+            borderColor: '#ffffff',
+            borderWidth: 1,
+          }}
+        />
+        <TextInput
+          value="Text Input 2"
+          testID="text-input-2"
+          style={{ width: 300 }}
+        />
+      </FormGroup>
+    );
+
+    // Merging text styles
+    expect(
+      within(getByTestId('text-input-1'))
+        .getByTestId('text-input-border')
+        .props.style.flat()
+    ).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          // Passed style
+          borderWidth: 1,
+          borderColor: '#ffffff',
+          // Injected style
+          borderBottomLeftRadius: 0,
+          borderBottomRightRadius: 0,
+        }),
+      ])
+    );
+
+    // Merging container styles
+    expect(getByTestId('text-input-2').props.style.flat()).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          // Passed style
+          width: 300,
+          // Injected style
+          marginTop: -theme.__hd__.textInput.borderWidths.container.normal,
+        }),
+      ])
+    );
+
+    expect(
+      within(getByTestId('text-input-2'))
+        .getByTestId('text-input-border')
+        .props.style.flat()
+    ).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          // Injected style
+          borderTopLeftRadius: 0,
+          borderTopRightRadius: 0,
+        }),
+      ])
+    );
+  });
+
+  it('does not alter the children styles if there is only one child', () => {
+    const { getByTestId } = renderWithTheme(
+      <FormGroup>
+        <TextInput
+          value="Text Input 1"
+          testID="text-input-1"
+          style={{
+            marginTop: theme.space.medium,
+          }}
+        />
+      </FormGroup>
+    );
+
+    // Container style is not injected
+    expect(getByTestId('text-input-1').props.style.flat()).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          // Passed style instead of injected style
+          marginTop: theme.space.medium,
+        }),
+      ])
+    );
+
+    // Border style is not injected
+    const internalBorderStyle =
+      getByTestId('text-input-border').props.style.flat();
+    const borderKeys = Object.keys(internalBorderStyle).filter((key) =>
+      key.startsWith('border')
+    );
+    expect(borderKeys).toHaveLength(0);
+  });
+
+  it('renders enhanced TextInput/Select components with correct styles', () => {
+    const { getByTestId } = renderWithTheme(
+      <FormGroup>
+        <TextInput
+          label="Enhanced Text Input"
+          value="Enhanced Text Input"
+          testID="enhanced-text-input"
+        />
+        <Select
+          label="Enhanced Select"
+          value="option1"
+          testID="enhanced-select"
+          onConfirm={noop}
+          options={[
+            { text: 'Option 1', value: 'option1' },
+            { text: 'Option 2', value: 'option2' },
+          ]}
+        />
+      </FormGroup>
+    );
+
+    // Enhanced TextInput should have correct border styling
+    expect(
+      within(getByTestId('enhanced-text-input'))
+        .getByTestId('text-input-border')
+        .props.style.flat()
+    ).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          borderBottomLeftRadius: 0,
+          borderBottomRightRadius: 0,
+        }),
+      ])
+    );
+
+    // Enhanced Select should have correct border styling
+    expect(
+      within(getByTestId('enhanced-select'))
+        .getByTestId('text-input-border')
+        .props.style.flat()
+    ).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          borderTopLeftRadius: 0,
+          borderTopRightRadius: 0,
+        }),
+      ])
+    );
+  });
+
+  it('renders mixed components (TextInput, Select, Select.Multi) with correct styles', () => {
+    const { getByTestId } = renderWithTheme(
+      <FormGroup>
+        <TextInput
+          label="Text Input"
+          value="Text Input"
+          testID="mixed-text-input"
+        />
+        <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
+    expect(
+      within(getByTestId('mixed-text-input'))
+        .getByTestId('text-input-border')
+        .props.style.flat()
+    ).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          borderBottomLeftRadius: 0,
+          borderBottomRightRadius: 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
+    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/__tests__/utils.spec.ts

@@ -0,0 +1,73 @@
+import theme from '../../../theme';
+import { generateBorderStyle, generateMarginStyle } from '../utils';
+
+describe('utils', () => {
+  describe('generateBorderStyle', () => {
+    it('should generate the correct border style for the first child', () => {
+      const borderStyle = generateBorderStyle({ index: 0, length: 3 });
+      expect(borderStyle).toEqual({
+        borderBottomLeftRadius: 0,
+        borderBottomRightRadius: 0,
+      });
+    });
+
+    it('should generate the correct border style for the last child', () => {
+      const borderStyle = generateBorderStyle({ index: 2, length: 3 });
+      expect(borderStyle).toEqual({
+        borderTopLeftRadius: 0,
+        borderTopRightRadius: 0,
+      });
+    });
+
+    it('should generate the correct border style for the middle child', () => {
+      const borderStyle = generateBorderStyle({ index: 1, length: 3 });
+      expect(borderStyle).toEqual({
+        borderRadius: 0,
+      });
+    });
+  });
+
+  describe('generateMarginStyle', () => {
+    it('should generate the correct margin style for the first child', () => {
+      const marginStyle = generateMarginStyle({
+        index: 0,
+        length: 3,
+        theme,
+      });
+      expect(marginStyle).toEqual({
+        marginTop: 0,
+      });
+    });
+
+    it('should generate the correct margin style for the last child', () => {
+      const marginStyle = generateMarginStyle({
+        index: 2,
+        length: 3,
+        theme,
+      });
+      expect(marginStyle).toEqual({
+        marginTop: -theme.__hd__.textInput.borderWidths.container.normal,
+      });
+    });
+
+    it('should generate the correct margin style for the middle child', () => {
+      const marginStyle = generateMarginStyle({
+        index: 1,
+        length: 3,
+        theme,
+      });
+      expect(marginStyle).toEqual({
+        marginTop: -theme.__hd__.textInput.borderWidths.container.normal,
+      });
+    });
+
+    it('should generate the correct margin style for a single child', () => {
+      const marginStyle = generateMarginStyle({
+        index: 0,
+        length: 1,
+        theme,
+      });
+      expect(marginStyle).toEqual({});
+    });
+  });
+});

package/src/components/FormGroup/index.tsx

@@ -0,0 +1,106 @@
+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';
+
+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 input components
+   * that supports the corresponding interface.
+   *
+   * Example:
+   * const EnhancedTextInput = (props: TextInputProps) => {
+   *   return <TextInput {...props} />;
+   * };
+   *
+   * <FormGroup>
+   *   <Select ... />
+   *   <EnhancedTextInput ... />
+   * </FormGroup>
+   */
+  children: ReactNode;
+  /**
+   * The style of the FormGroup.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * The testID of the FormGroup.
+   */
+  testID?: string;
+}
+
+const FormGroup = ({ children, style, testID, ...props }: FormGroupProps) => {
+  const theme = useTheme();
+  const childrenArray = React.Children.toArray(children).filter(
+    (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.props.style;
+        const rawChildTextStyle = child.props.textStyle;
+
+        // Handle array styles by flattening them first
+        const childStyle = StyleSheet.flatten(rawChildStyle);
+        const childTextStyle = StyleSheet.flatten(rawChildTextStyle);
+
+        /**
+         * Merge the child style with the group injected style.
+         * Order of precedence:
+         * 1. Child style.
+         * 2. Group injected style.
+         */
+        const mergedStyle = {
+          ...childStyle,
+          ...generateMarginStyle({
+            index,
+            length: childrenArray.length,
+            theme,
+          }),
+        };
+
+        /**
+         * Merge the child text style with the group text style.
+         * Order of precedence:
+         * 1. Group text style through textStyle prop.
+         * 2. Child text style.
+         * 3. Group injected border style.
+         */
+        const mergedTextStyle = {
+          ...childTextStyle,
+          ...generateBorderStyle({
+            index,
+            length: childrenArray.length,
+          }),
+        };
+
+        return React.cloneElement(child, {
+          style: mergedStyle,
+          textStyle: mergedTextStyle,
+          // Internal text input prop to allow for different styling
+          groupStyleEnabled: true,
+
+          // For HD components that uses FormGroup
+          inputProps: {
+            ...child.props.inputProps,
+            textStyle: {
+              ...child.props.inputProps?.textStyle,
+              ...mergedTextStyle,
+            },
+          },
+        });
+      }),
+    [childrenArray, theme]
+  );
+
+  return (
+    <Box style={style} testID={testID} {...props}>
+      {groupedChildren}
+    </Box>
+  );
+};
+
+export default FormGroup;

package/src/components/FormGroup/utils.ts

@@ -0,0 +1,67 @@
+import { CSSProperties } from 'react';
+import { Theme } from '@hero-design/rn';
+
+/**
+ * Generates the border style for the TextInputGroup.
+ * @param index - The index of the TextInput.
+ * @param length - The length of the TextInputGroup.
+ * @returns The border style for the TextInputGroup.
+ */
+const generateBorderStyle = ({
+  index,
+  length,
+}: {
+  index: number;
+  length: number;
+}): CSSProperties => {
+  const isFirst = index === 0;
+  const isLast = index === length - 1;
+
+  if (length === 1) {
+    return {};
+  }
+
+  if (isFirst) {
+    return {
+      borderBottomLeftRadius: 0,
+      borderBottomRightRadius: 0,
+    };
+  }
+
+  if (isLast) {
+    return {
+      borderTopLeftRadius: 0,
+      borderTopRightRadius: 0,
+    };
+  }
+
+  return {
+    borderRadius: 0,
+  };
+};
+
+const generateMarginStyle = ({
+  index,
+  length,
+  theme,
+}: {
+  index: number;
+  length: number;
+  theme: Theme;
+}) => {
+  if (length === 1) {
+    return {};
+  }
+
+  if (index === 0) {
+    return {
+      marginTop: 0,
+    };
+  }
+
+  return {
+    marginTop: -theme.__hd__.textInput.borderWidths.container.normal,
+  };
+};
+
+export { generateBorderStyle, generateMarginStyle };

package/src/components/RichTextEditor/EditorEvent.ts

@@ -0,0 +1,7 @@
+import { EventEmitter } from 'events';
+
+const emitter = new EventEmitter();
+
+emitter.setMaxListeners(20);
+
+export { emitter };