@hero-design/rn-work-uikit 1.9.4 → 1.9.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn-work-uikit",
-  "version": "1.9.4",
+  "version": "1.9.6",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -11,7 +11,7 @@
     "type-check": "tsc --noEmit",
     "test": "jest --runInBand",
     "test:watch": "jest --runInBand --watch",
-    "test:ci": "jest --c=jest-ci.config.js --i --logHeapUsage --coverage && cat ./coverage/lcov.info",
+    "test:ci": "jest --c=jest-ci.config.js --i --logHeapUsage --coverage",
     "build:js": "rollup -c",
     "build:types": "rollup -c rollup.config.mjs --configPlugin dts",
     "build": "yarn build:js && yarn build:types",
@@ -22,7 +22,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/rn": "^8.113.0",
+    "@hero-design/rn": "^8.115.1",
     "hero-editor": "^1.17.0"
   },
   "peerDependencies": {
@@ -66,7 +66,7 @@
     "@rollup/plugin-replace": "^6.0.1",
     "@rollup/plugin-typescript": "^12.1.1",
     "@testing-library/jest-native": "^5.4.2",
-    "@testing-library/react-native": "^9.1.0",
+    "@testing-library/react-native": "^13.0.0",
     "@types/jest": "^29.5.3",
     "@types/react": "^18.2.0",
     "@types/react-native-vector-icons": "^6.4.10",
@@ -91,7 +91,7 @@
     "react-native-svg": "15.8.0",
     "react-native-vector-icons": "^9.1.0",
     "react-native-webview": "^13.16.0",
-    "react-test-renderer": "18.2.0",
+    "react-test-renderer": "18.3.1",
     "rollup": "^4.24.3",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-delete": "^3.0.1",

package/src/components/RichTextEditor/MentionList.tsx

@@ -1,3 +1,4 @@
+import type { ReactElement } from 'react';
 import React, { useCallback, useEffect, useState } from 'react';
 import { View } from 'react-native';
 import { useTheme } from '../../theme';
@@ -26,7 +27,7 @@ export interface MentionListProps<TMetaData = unknown> {
       name: string,
       options?: OnSelectOptionsType<TMetaData>
     ) => void
-  ) => JSX.Element;
+  ) => ReactElement;
 }
 
 const MentionList = <TMetaData,>({

package/testUtils/renderWithTheme.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
 import { render } from '@testing-library/react-native'; // eslint-disable-line import/no-extraneous-dependencies
 import type { RenderOptions } from '@testing-library/react-native';
 import { getTheme, ThemeProvider } from '../src';
 
 const theme = getTheme();
 
-const renderWithTheme = (ui: JSX.Element, options?: RenderOptions) => {
+const renderWithTheme = (ui: ReactElement, options?: RenderOptions) => {
   return render(<ThemeProvider theme={theme}>{ui}</ThemeProvider>, options);
 };
 

package/types/index.d.ts

@@ -0,0 +1,525 @@
+import React$1, { ReactNode, Ref, ReactElement, PropsWithChildren } from 'react';
+import { TextInput as TextInput$1, TextInputProps as TextInputProps$1, StyleProp, ViewStyle, TextStyle, NativeSyntheticEvent, TextInputFocusEventData, ViewProps } from 'react-native';
+import { IconName, SelectOptionType, SingleSelectProps, MultiSelectProps, DatePickerProps, TimePickerProps, Theme as Theme$1, Scale, SystemPalette } from '@hero-design/rn';
+export * from '@hero-design/rn';
+
+type TextInputHandles = Pick<TextInput$1, 'focus' | 'clear' | 'blur' | 'isFocused' | 'setNativeProps'>;
+type TextInputVariant = 'text' | 'textarea';
+type NativeTextInputProps = Omit<TextInputProps$1, 'onFocus' | 'onBlur'> & {
+    onFocus?: (event?: NativeSyntheticEvent<TextInputFocusEventData>) => void | undefined;
+    onBlur?: (event?: NativeSyntheticEvent<TextInputFocusEventData>) => void | undefined;
+};
+interface TextInputRef {
+    focus: () => void;
+    blur: () => void;
+    clear: () => void;
+    isFocused: () => boolean;
+    setNativeProps?: (props: TextInputProps$1) => void;
+}
+type TextInputProps = NativeTextInputProps & {
+    /**
+     * Field label.
+     */
+    label?: string;
+    /**
+     * Name of Icon or ReactElement to render on the left side of the input, before the user's cursor.
+     */
+    prefix?: IconName | React.ReactElement;
+    /**
+     * Name of Icon or ReactElement to render on the right side of the input.
+     */
+    suffix?: IconName | React.ReactElement;
+    /**
+     * Additional wrapper style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Input text style.
+     */
+    textStyle?: StyleProp<TextStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+    /**
+     * Accessibility label for the input (Android).
+     */
+    accessibilityLabelledBy?: string;
+    /**
+     * Error message to display.
+     */
+    error?: string;
+    /**
+     *  Whether the input is required. When false, "(Optional)" will be appended to the label.
+     */
+    required?: boolean;
+    /**
+     *  Placeholder text to display.
+     * */
+    placeholder?: string;
+    /**
+     * Whether the input is editable.
+     * */
+    editable?: boolean;
+    /**
+     * Whether the input is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Whether the input is loading.
+     */
+    loading?: boolean;
+    /**
+     * The max length of the input.
+     * If the max length is set, the input will display the current length and the max length.
+     * */
+    maxLength?: number;
+    /**
+     * Whether to hide the character count.
+     * */
+    hideCharacterCount?: boolean;
+    /**
+     * The helper text to display.
+     */
+    helpText?: string;
+    /**
+     * Customise input value renderer
+     */
+    renderInputValue?: (inputProps: NativeTextInputProps, ref?: React.ForwardedRef<TextInputRef>) => React.ReactNode;
+    /**
+     * Component ref.
+     */
+    ref?: React.Ref<TextInputHandles>;
+    /**
+     * Component variant.
+     */
+    variant?: TextInputVariant;
+};
+
+declare const TextInput: React$1.ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & React$1.RefAttributes<TextInputHandles>>;
+
+declare const _default$2: (<V, T extends SelectOptionType<V> = SelectOptionType<V>>(props: SingleSelectProps<V, T>) => React$1.JSX.Element) & {
+    Multi: <V, T extends SelectOptionType<V> = SelectOptionType<V>>(props: MultiSelectProps<V, T>) => React$1.JSX.Element;
+};
+
+interface DatePickerDialogProps {
+    /**
+     * The value of the date picker.
+     */
+    value?: Date;
+    /**
+     * The minimum date of the date picker.
+     */
+    minDate?: Date;
+    /**
+     * The maximum date of the date picker.
+     */
+    maxDate?: Date;
+    /**
+     * The function to call when the date is changed.
+     */
+    onChange: (date: Date) => void;
+    /**
+     * The test ID of the date picker.
+     */
+    testID?: string;
+    /**
+     * Whether the dialog is open
+     */
+    open: boolean;
+    /**
+     * The function to call when the dialog is closed.
+     */
+    onClose: () => void;
+    /**
+     * The variant of the date picker.
+     */
+    variant?: 'default' | 'month-year';
+    /**
+     * [iOS only] The label of the DatePicker bottom sheet.
+     */
+    label: string;
+    /**
+     * [iOS only] The confirm label of the date picker bottom sheet.
+     */
+    confirmLabel: string;
+    /**
+     * [iOS only] The supported orientations of the date picker.
+     */
+    supportedOrientations?: ('portrait' | 'landscape')[];
+    /**
+     * [iOS only] The locale of the date picker.
+     */
+    locale?: string;
+}
+
+declare const _default$1: ((props: DatePickerProps) => React$1.JSX.Element) & {
+    Dialog: ({ ...props }: DatePickerDialogProps) => React$1.JSX.Element;
+};
+
+declare const TimePicker: (props: TimePickerProps) => React$1.JSX.Element;
+
+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;
+}
+declare const FormGroup: ({ children, style, testID, ...props }: FormGroupProps) => React$1.JSX.Element;
+
+type ToolbarButtonName = 'bold' | 'italic' | 'underline' | 'bulletedList' | 'numberedList' | 'headingOne' | 'headingTwo' | '|';
+type TextUnit = 'character' | 'word' | 'line' | 'block';
+interface RichTextEditorRef$1 {
+    requestBlur: VoidFunction;
+    insertNodes: (nodes: Record<string, unknown>[]) => void;
+    deleteBackward: (unit?: TextUnit) => void;
+    setReadOnly: (readOnly: boolean) => void;
+}
+type EditorValue = {
+    type: string;
+    children: unknown;
+}[];
+interface RichTextEditorProps {
+    /**
+     * If true, the editor will be focused when the user enters the screen
+     */
+    autoFocus?: boolean;
+    /**
+     * Error message
+     */
+    error?: string;
+    /**
+     * Field value
+     */
+    value?: EditorValue;
+    /**
+     * Unique name used to communicate with webview
+     */
+    name: string;
+    /**
+     * Callback function called when the field value changed
+     */
+    onChange: (data: EditorValue) => void;
+    /**
+     * Callback function called when the cursor position changed
+     */
+    onCursorChange?: (params: {
+        position: {
+            top: number;
+        };
+    }) => void;
+    /**
+     * Field placeholder
+     */
+    placeholder?: string;
+    /**
+     * Additional styles
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Field label
+     */
+    label: string;
+    /**
+     * Field helper text
+     */
+    helpText?: string;
+    /**
+     *  Whether the input is required, if true, an asterisk will be appended to the label.
+     * */
+    required?: boolean;
+    /**
+     * Testing ID of the component
+     */
+    testID?: string;
+    /**
+     * Imperative ref to expose the component method
+     */
+    forwardedRef?: Ref<RichTextEditorRef$1>;
+}
+
+interface OnSelectOptionsType<TMetaData> {
+    highlighted: boolean;
+    meta?: TMetaData;
+}
+interface MentionListProps<TMetaData = unknown> {
+    /**
+     * Unique name used to communicate with webview, should be the same with the RichTextEditor component it used with
+     */
+    name: string;
+    /**
+     * Function used to render mention options
+     */
+    render: (searchText: string, onSelect: (id: string, name: string, options?: OnSelectOptionsType<TMetaData>) => void) => ReactElement;
+}
+
+interface EditorToolbarProps {
+    /**
+     * List of buttons to display in toolbar
+     */
+    buttons?: ToolbarButtonName[];
+    /**
+     * Unique name used to communicate with webview, should be the same with the RichTextEditor component it used with
+     */
+    name: string;
+    /**
+     * Testing ID of the component
+     */
+    testID?: string;
+}
+
+interface RichTextEditorRef {
+    requestBlur: VoidFunction;
+    insertNodes: (nodes: Record<string, unknown>[]) => void;
+    deleteBackward: (unit?: TextUnit) => void;
+    setReadOnly: (readOnly: boolean) => void;
+}
+
+declare enum ToolbarEvents {
+    Bold = "bold",
+    Italic = "italic",
+    Underline = "underline",
+    BulletedList = "bulleted-list",
+    NumberedList = "numbered-list",
+    HeadingOne = "heading-one",
+    HeadingTwo = "heading-two",
+    AddLink = "add-link",
+    ApplyLink = "link"
+}
+declare enum EditorEvents {
+    EditorFocus = "editor-focus",
+    EditorBlur = "editor-blur",
+    EditorChange = "editor-change",
+    UpsertLink = "request-upsert-link"
+}
+
+declare const _default: React$1.ForwardRefExoticComponent<Omit<RichTextEditorProps, "forwardedRef"> & React$1.RefAttributes<RichTextEditorRef>> & {
+    Toolbar: ({ name, buttons, testID, }: EditorToolbarProps) => React$1.JSX.Element | null;
+    MentionList: <TMetaData>({ name: eventPrefix, render, }: MentionListProps<TMetaData>) => React$1.JSX.Element | null;
+    EditorEvents: typeof EditorEvents;
+    ToolbarEvents: typeof ToolbarEvents;
+    useRichTextEditorEvents: (editorName: string) => {
+        emitEvent: <TEventName extends ToolbarEvents>({ type, data, }: {
+            type: TEventName;
+            data: TEventName extends keyof {
+                "request-upsert-link": {
+                    text: string;
+                    url: string;
+                };
+                "editor-change": {
+                    value: string;
+                    toolbarState: Record<string, boolean>;
+                };
+                link: {
+                    text: string;
+                    url: string;
+                };
+            } ? {
+                "request-upsert-link": {
+                    text: string;
+                    url: string;
+                };
+                "editor-change": {
+                    value: string;
+                    toolbarState: Record<string, boolean>;
+                };
+                link: {
+                    text: string;
+                    url: string;
+                };
+            }[TEventName] : unknown;
+        }) => void;
+        subscribeToEvents: <TEventName extends EditorEvents | ToolbarEvents>(eventName: TEventName, onEvent: (data: TEventName extends keyof {
+            "request-upsert-link": {
+                text: string;
+                url: string;
+            };
+            "editor-change": {
+                value: string;
+                toolbarState: Record<string, boolean>;
+            };
+            link: {
+                text: string;
+                url: string;
+            };
+        } ? {
+            "request-upsert-link": {
+                text: string;
+                url: string;
+            };
+            "editor-change": {
+                value: string;
+                toolbarState: Record<string, boolean>;
+            };
+            link: {
+                text: string;
+                url: string;
+            };
+        }[TEventName] : void) => void) => () => void;
+    };
+    Base: React$1.ForwardRefExoticComponent<{
+        value: EditorValue;
+        name: string;
+        autoFocus: boolean;
+        placeholder: string;
+        onChange: (data: EditorValue) => void;
+        onCursorChange?: (params: {
+            position: {
+                top: number;
+            };
+        }) => void;
+        forwardedRef?: React$1.Ref<RichTextEditorRef$1>;
+        onFocus?: () => void;
+        onBlur?: () => void;
+    } & React$1.RefAttributes<TextInputRef>>;
+};
+
+declare const getTextInputTheme: (theme: Theme$1) => {
+    colors: {
+        borders: {
+            default: string;
+            error: string;
+            disabled: string;
+            readonly: string;
+            filled: string;
+            focused: string;
+        };
+        labels: {
+            default: string;
+            error: string;
+            disabled: string;
+            readonly: string;
+            filled: string;
+            focused: string;
+        };
+        maxLengthLabels: {
+            default: string;
+            error: string;
+            disabled: string;
+            readonly: string;
+            filled: string;
+            focused: string;
+        };
+        labelBackground: string;
+        containerBackground: string;
+        asterisks: {
+            default: string;
+            error: string;
+            disabled: string;
+            readonly: string;
+            filled: string;
+        };
+        error: string;
+        text: string;
+        labelsInsideTextInput: {
+            default: string;
+            error: string;
+            disabled: string;
+            readonly: string;
+            filled: string;
+        };
+        placeholder: {
+            default: string;
+            error: string;
+            disabled: string;
+            readonly: string;
+            filled: string;
+        };
+    };
+    space: {
+        inputWrapperMarginVertical: number;
+        prefixAndInputContainerGap: number;
+        containerPadding: number;
+        labelLeft: number;
+        labelTop: number;
+        labelPaddingBottom: number;
+        labelHorizontalPadding: number;
+        inputHorizontalMargin: number;
+        errorContainerMarginRight: number;
+        errorAndHelpTextContainerMarginTop: number;
+        errorMarginLeft: number;
+        errorAndHelpTextContainerHorizontalPadding: number;
+        containerMarginTop: number;
+        labelInsideTextInputMarginTop: number;
+        errorAndHelpTextContainerPaddingTop: number;
+    };
+    fonts: {
+        text: string;
+    };
+    fontSizes: {
+        text: number;
+        labelInsideTextInput: number;
+        error: number;
+        maxLength: number;
+        asteriskLabel: number;
+        topLabel: number;
+    };
+    borderWidths: {
+        container: {
+            normal: number;
+            focused: number;
+        };
+    };
+    radii: {
+        container: number;
+    };
+    sizes: {
+        containerMinHeight: number;
+        errorAndHelpTextContainerHeight: number;
+        textInputMinHeight: number;
+        textareaHeight: number;
+        textInputMaxHeight: number;
+    };
+    lineHeights: {
+        topLabel: number;
+    };
+};
+
+type Theme = Theme$1 & {
+    __hd__: Theme$1['__hd__'] & {
+        textInput: ReturnType<typeof getTextInputTheme>;
+    };
+};
+declare const getTheme: (scale?: Scale, systemPalette?: SystemPalette) => Theme;
+
+interface ThemeProviderProps {
+    theme: Partial<Theme> | ((outerTheme: Theme) => Theme);
+    children: React$1.ReactNode;
+}
+interface ThemeProviderType {
+    (props: ThemeProviderProps): React$1.ReactElement;
+}
+declare const WorkThemeProvider: ThemeProviderType;
+declare const useWorkTheme: () => Theme;
+
+type ThemeName = 'swag' | 'swagDark' | 'swagLight' | 'work' | 'jobs' | 'wallet' | 'eBens' | 'ehWorkDark' | 'ehWork' | 'ehJobs';
+declare const WorkThemeSwitcher: ({ name, children, }: {
+    name?: ThemeName;
+    children: React$1.ReactNode;
+}) => React$1.JSX.Element;
+declare const withWorkTheme: <P extends Record<string, unknown>>(C: React$1.ComponentType<P>, themeName: ThemeName) => (props: PropsWithChildren<P>) => React$1.JSX.Element;
+
+declare const defaultTheme: Theme;
+
+export { _default$1 as DatePicker, FormGroup, _default as RichTextEditor, _default$2 as Select, TextInput, WorkThemeProvider as ThemeProvider, WorkThemeSwitcher as ThemeSwitcher, TimePicker, getTheme, defaultTheme as theme, useWorkTheme as useTheme, withWorkTheme as withTheme };
+export type { Theme };

package/src/__tests__/index-export.spec.ts

@@ -1,64 +0,0 @@
-import * as Base from '@hero-design/rn';
-import * as HD from '../index';
-import TextInput from '../components/TextInput';
-import Select from '../components/Select';
-import DatePicker from '../components/DatePicker';
-import TimePicker from '../components/TimePicker';
-import { getTheme, theme } from '../index';
-
-describe('index.ts exports', () => {
-  it('TextInput, Select, DatePicker, TimePicker should be custom rn-work-uikit versions', () => {
-    // Check that the exported components are not the same as the base ones
-    expect(HD.TextInput).not.toBe(Base.TextInput);
-    expect(HD.Select).not.toBe(Base.Select);
-    expect(HD.DatePicker).not.toBe(Base.DatePicker);
-    expect(HD.TimePicker).not.toBe(Base.TimePicker);
-  });
-
-  it('TextInput, Select, DatePicker, TimePicker should use the custom TextInput', () => {
-    // For TextInput, it's a direct export
-    expect(HD.TextInput).toBe(TextInput);
-    // For Select, DatePicker, TimePicker, check that they use the custom TextInput
-    // We can check the displayName or inspect the rendered output
-    // For DatePicker and TimePicker, check the TextInputComponent prop
-    // (We can't fully render without React Native, but we can check the implementation)
-    // These checks are mostly structural
-    expect(Select).toBe(HD.Select);
-    expect(DatePicker).toBe(HD.DatePicker);
-    expect(TimePicker).toBe(HD.TimePicker);
-  });
-});
-
-describe('Theme Export Override', () => {
-  it('should export work-specific theme with overridden textInput from index', () => {
-    // Check a few key values from the textInput override
-    expect(theme.__hd__.textInput.sizes.containerMinHeight).toBe(
-      54.92307692307692
-    );
-    expect(theme.__hd__.textInput.sizes.errorAndHelpTextContainerHeight).toBe(
-      0
-    );
-    expect(theme.__hd__.textInput.space.prefixAndInputContainerGap).toBe(
-      3.9230769230769234
-    );
-    // Check that borderWidths.container.normal is overridden
-    expect(theme.__hd__.textInput.borderWidths.container.normal).toBe(2);
-    // Check that colors.borders.default is overridden
-    expect(theme.__hd__.textInput.colors.borders.default).toBe('#e8e9ea');
-  });
-
-  it('should export work-specific getTheme function with overridden textInput', () => {
-    const workTheme = getTheme();
-    expect(workTheme.__hd__.textInput.sizes.containerMinHeight).toBe(
-      54.92307692307692
-    );
-    expect(
-      workTheme.__hd__.textInput.sizes.errorAndHelpTextContainerHeight
-    ).toBe(0);
-    expect(workTheme.__hd__.textInput.space.prefixAndInputContainerGap).toBe(
-      3.9230769230769234
-    );
-    expect(workTheme.__hd__.textInput.borderWidths.container.normal).toBe(2);
-    expect(workTheme.__hd__.textInput.colors.borders.default).toBe('#e8e9ea');
-  });
-});

package/src/__tests__/index.spec.tsx

@@ -1,14 +0,0 @@
-describe('Export Completeness', () => {
-  it('should include all exports from @hero-design/rn', () => {
-    // eslint-disable-next-line global-require, @typescript-eslint/no-var-requires
-    const baseRN = require('@hero-design/rn');
-    // eslint-disable-next-line global-require, @typescript-eslint/no-var-requires
-    const workUIKit = require('../index');
-
-    const baseExports = Object.keys(baseRN);
-
-    baseExports.forEach((exportName) => {
-      expect(workUIKit).toHaveProperty(exportName);
-    });
-  });
-});