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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn-work-uikit",
-  "version": "1.9.2",
+  "version": "1.9.4",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -22,7 +22,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/rn": "^8.112.1",
+    "@hero-design/rn": "^8.113.0",
     "hero-editor": "^1.17.0"
   },
   "peerDependencies": {
@@ -55,15 +55,9 @@
     "@hero-design/eslint-plugin": "9.2.1",
     "@hero-design/react-native-month-year-picker": "^8.43.2",
     "@ptomasroos/react-native-multi-slider": "^2.2.2",
-    "@react-native-community/cli": "15.0.1",
-    "@react-native-community/cli-platform-android": "15.0.1",
-    "@react-native-community/cli-platform-ios": "15.0.1",
     "@react-native-community/datetimepicker": "8.2.0",
     "@react-native-community/slider": "^4.5.1",
     "@react-native/babel-preset": "0.77.3",
-    "@react-native/eslint-config": "0.77.3",
-    "@react-native/metro-config": "0.77.3",
-    "@react-native/typescript-config": "0.77.3",
     "@rollup/plugin-alias": "^5.1.1",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^28.0.1",
@@ -72,32 +66,20 @@
     "@rollup/plugin-replace": "^6.0.1",
     "@rollup/plugin-typescript": "^12.1.1",
     "@testing-library/jest-native": "^5.4.2",
-    "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/react-native": "^9.1.0",
     "@types/jest": "^29.5.3",
     "@types/react": "^18.2.0",
     "@types/react-native-vector-icons": "^6.4.10",
     "@types/react-test-renderer": "^19.1.0",
     "@typescript-eslint/eslint-plugin": "^5.12.1",
-    "@typescript-eslint/parser": "^5.12.1",
     "babel-plugin-inline-import": "^3.0.0",
     "babel-plugin-module-resolver": "^5.0.2",
-    "config-tsconfig": "8.42.5",
     "core-js": "^3.33.0",
     "eslint": "^8.56.0",
-    "eslint-config-airbnb": "^19.0.4",
     "eslint-config-hd": "8.42.5",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-import-resolver-typescript": "^3.5.2",
-    "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^4.3.0",
     "jest": "^29.2.1",
     "jest-environment-jsdom": "^29.2.1",
     "jest-junit": "^16.0.0",
-    "prettier": "^2.5.1",
     "prettier-config-hd": "8.42.4",
     "react": "18.3.1",
     "react-dom": "^18.2.0",

package/src/components/FormGroup/index.tsx

@@ -5,7 +5,7 @@ import { StyleSheet } from 'react-native';
 import { Box, useTheme } from '@hero-design/rn';
 import { generateBorderStyle, generateMarginStyle } from './utils';
 
-export interface FormGroupProps extends ViewProps {
+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

package/src/components/RichTextEditor/EditorToolbar.tsx

@@ -1,16 +1,15 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import type { ComponentType } from 'react';
 import type { IconProps } from '@hero-design/rn';
 import { Icon } from '@hero-design/rn';
-import { ToolbarEvents } from './constants';
-import { emitter } from './EditorEvent';
+import { EditorEvents, ToolbarEvents } from './constants';
 import {
   StyledSeparator,
   StyledToolbar,
   StyledToolbarButton,
 } from './StyledToolbar';
 import type { ToolbarButtonName } from './types';
-import * as Events from './utils/events';
+import useRichTextEditorEvents from './hooks/useRichTextEditorEvents';
 
 type ToolbarButtonProps = {
   icon: IconProps['icon'];
@@ -97,12 +96,6 @@ export interface EditorToolbarProps {
   testID?: string;
 }
 
-type ButtonType = {
-  id: number;
-  buttonName: ToolbarButtonName;
-  selected: boolean;
-};
-
 const EditorToolbar = ({
   name,
   buttons = defaultButtons,
@@ -110,102 +103,59 @@ const EditorToolbar = ({
 }: EditorToolbarProps) => {
   const [show, setShow] = useState(false);
 
-  const initialToolbarButtonArray: ButtonType[] = buttons.map(
-    (button, index) => ({
-      id: index + 1,
-      buttonName: button,
-      selected: false,
-    })
-  );
-
-  const [toolbarButtonArray, setToolbarButtonArray] = useState<ButtonType[]>(
-    initialToolbarButtonArray
-  );
-
-  const normalizeEventName = useCallback(
-    (event: string): string => `${name}/${event}`,
-    [name]
-  );
-
-  const toggleToolbarButton = useCallback(
-    ({ buttonName: currentButtonName, selected: prevSelected }: ButtonType) => {
-      const currentButtonConfig = buttonConfigs[currentButtonName];
-      const isStandalone =
-        currentButtonConfig && currentButtonConfig.standalone;
-
-      setToolbarButtonArray((prevState) =>
-        prevState.map((updatingButton) => {
-          if (updatingButton.buttonName === currentButtonName) {
-            return {
-              ...updatingButton,
-              selected: !prevSelected,
-            };
-          }
-
-          const updatingButtonConfig = buttonConfigs[updatingButton.buttonName];
-          const shouldToggleOff =
-            !prevSelected &&
-            isStandalone &&
-            updatingButtonConfig &&
-            updatingButtonConfig.standalone;
-
-          return {
-            ...updatingButton,
-            selected: shouldToggleOff ? false : updatingButton.selected,
-          };
-        })
-      );
-    },
-    []
-  );
+  const { emitEvent, subscribeToEvents } = useRichTextEditorEvents(name);
+  const [toolbarButtonState, setToolbarButtonState] = useState<
+    Record<string, boolean>
+  >({});
 
   useEffect(() => {
-    const removeFocusListener = Events.on(
-      emitter,
-      normalizeEventName('editor-focus'),
+    const removeFocusListener = subscribeToEvents(
+      EditorEvents.EditorFocus,
       () => setShow(true)
     );
-
-    const removeBlurListener = Events.on(
-      emitter,
-      normalizeEventName('editor-blur'),
-      () => setShow(false)
+    const removeBlurListener = subscribeToEvents(EditorEvents.EditorBlur, () =>
+      setShow(false)
+    );
+    const removeEditorChangeListener = subscribeToEvents(
+      EditorEvents.EditorChange,
+      ({ toolbarState = {} }) => {
+        setToolbarButtonState(toolbarState);
+      }
     );
 
     return () => {
       removeFocusListener();
       removeBlurListener();
+      removeEditorChangeListener();
     };
-  }, [normalizeEventName]);
+  }, []);
 
   const toolbarButtons = useMemo(
     () =>
-      toolbarButtonArray.map((button) => {
-        if (button.buttonName === '|') {
-          return <StyledSeparator key={button.id} />;
+      buttons.map((button, index) => {
+        if (button === '|') {
+          return <StyledSeparator key={index} />;
         }
-        const config = buttonConfigs[button.buttonName];
+        const config = buttonConfigs[button];
         if (config) {
           return (
             <ToolbarButton
-              key={button.id}
+              key={button}
               testID={config.icon}
               icon={config.icon}
               onPress={() => {
-                toggleToolbarButton(button);
-                Events.emit(
-                  emitter,
-                  normalizeEventName(config.eventName),
-                  null
-                );
+                emitEvent({
+                  type: config.eventName,
+                  data: null,
+                });
               }}
-              selected={button.selected}
+              selected={toolbarButtonState[config.eventName]}
             />
           );
         }
         return null;
       }),
-    [toolbarButtonArray, normalizeEventName, toggleToolbarButton]
+    [toolbarButtonState, buttons]
   );
 
   if (show) {

package/src/components/RichTextEditor/MentionList.tsx

@@ -72,7 +72,7 @@ const MentionList = <TMetaData,>({
         const { highlighted, meta } = options;
 
         const highlightStyle = {
-          color: theme.colors.secondary,
+          color: theme.colors.primary,
           borderRadius: theme.__hd__.richTextEditor.radii.mention,
           padding: highlighted ? theme.__hd__.richTextEditor.space.mention : 0,
           background: highlighted

package/src/components/RichTextEditor/RichTextEditor.tsx

@@ -5,11 +5,8 @@ import { plainSerializer } from 'hero-editor';
 import { InternalTextInput } from '../TextInput';
 import RichTextEditorInput from './RichTextEditorInput';
 import { StyledWrapper } from './StyledRichTextEditor';
-import type {
-  EditorValue,
-  InternalRichTextEditorProps,
-  TextUnit,
-} from './types';
+import type { InternalRichTextEditorProps, TextUnit } from './types';
+import { DEFAULT_VALUE } from './constants';
 
 export interface RichTextEditorRef {
   requestBlur: VoidFunction;
@@ -18,13 +15,6 @@ export interface RichTextEditorRef {
   setReadOnly: (readOnly: boolean) => void;
 }
 
-const defaultValue: EditorValue = [
-  {
-    type: 'paragraph',
-    children: [{ text: '' }],
-  },
-];
-
 const RichTextEditor: ComponentType<InternalRichTextEditorProps> = ({
   autoFocus = true,
   name,
@@ -39,7 +29,7 @@ const RichTextEditor: ComponentType<InternalRichTextEditorProps> = ({
   required,
   testID,
   forwardedRef,
-  value = defaultValue,
+  value = DEFAULT_VALUE,
   groupStyleEnabled = false,
 }: InternalRichTextEditorProps): ReactElement => {
   const plain = useMemo(() => plainSerializer(value), [value]);

package/src/components/RichTextEditor/RichTextEditorInput.tsx

@@ -16,7 +16,7 @@ import { isAndroid } from '../../utils/helpers';
 import { emitter } from './EditorEvent';
 import * as Events from './utils/events';
 import heroEditorApp from './heroEditorApp';
-import { ToolbarEvents } from './constants';
+import { DEFAULT_VALUE, ToolbarEvents } from './constants';
 import type { EditorValue, RichTextEditorRef, TextUnit } from './types';
 import {
   postMessage,
@@ -44,7 +44,6 @@ const RichTextEditorInput = forwardRef<
 >(
   (
     {
-      value,
       name,
       autoFocus,
       placeholder,
@@ -53,6 +52,7 @@ const RichTextEditorInput = forwardRef<
       forwardedRef,
       onFocus,
       onBlur,
+      value = DEFAULT_VALUE,
     },
     ref
   ) => {
@@ -107,6 +107,9 @@ const RichTextEditorInput = forwardRef<
             body {
               margin: 0;
             }
+            a {
+              color: ${theme.__hd__.typography.colors.primary};
+            }
           </style>
         </head>
         <body>
@@ -232,7 +235,13 @@ const RichTextEditorInput = forwardRef<
           case '@hero-editor/webview/editor-change':
             if (messageData) {
               onChange(messageData.value);
+              Events.emit(
+                emitter,
+                normalizeEventName('editor-change'),
+                messageData
+              );
             }
+
             break;
           case '@hero-editor/webview/cursor-change':
             onCursorChange?.(messageData);
@@ -240,6 +249,15 @@ const RichTextEditorInput = forwardRef<
           case '@hero-editor/webview/editor-layout':
             handleEditorLayoutEvent(messageData);
             break;
+
+          case '@hero-editor/webview/request-upsert-link':
+            Events.emit(
+              emitter,
+              normalizeEventName('request-upsert-link'),
+              messageData
+            );
+            break;
+
           default:
             break;
         }
@@ -272,6 +290,8 @@ const RichTextEditorInput = forwardRef<
       <View
         style={{
           height: webviewHeight,
+          flex: 1,
+          width: '100%',
         }}
       >
         <StyledWebView

package/src/components/RichTextEditor/StyledRichTextEditor.tsx

@@ -17,5 +17,4 @@ export const StyledWebView = styled(WebView)(({ theme }) => ({
   backgroundColor: 'transparent',
   textAlignVertical: 'center',
   fontSize: theme.__hd__.textInput.fontSizes.text,
-  marginHorizontal: theme.__hd__.textInput.space.inputHorizontalMargin,
 }));

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

@@ -2,10 +2,10 @@ import React from 'react';
 import { act, fireEvent, waitFor } from '@testing-library/react-native';
 import type { RenderAPI } from '@testing-library/react-native';
 import EditorToolbar from '../EditorToolbar';
-import { emitter as editorEventEmmitor } from '../EditorEvent';
-import { theme, ThemeProvider } from '../../../index';
-import * as Events from '../utils/events';
+import { emitter as editorEventEmitter } from '../EditorEvent';
 import renderWithTheme from '../../../../testUtils/renderWithTheme';
+import { theme } from '../../../index';
+import * as Events from '../utils/events';
 
 describe('EditorToolbar', () => {
   it('should not render toolbar when the editor is not focused', () => {
@@ -24,7 +24,7 @@ describe('EditorToolbar', () => {
         <EditorToolbar name="toolbar" testID="toolbar" />
       );
       act(() => {
-        editorEventEmmitor.emit('toolbar/editor-focus');
+        editorEventEmitter.emit('toolbar/editor-focus');
       });
       await waitFor(() => wrapper.getByTestId('toolbar'));
     });
@@ -47,15 +47,15 @@ describe('EditorToolbar', () => {
 
     it('should hide toolbar when blur', async () => {
       act(() => {
-        editorEventEmmitor.emit('toolbar/editor-blur');
+        editorEventEmitter.emit('toolbar/editor-blur');
       });
       await waitFor(() => wrapper.queryAllByTestId('toolbar').length === 0);
       expect(wrapper.queryAllByTestId('toolbar')).toHaveLength(0);
     });
 
     describe("should change button's background color when pressing", () => {
-      it('should send event and highlight buttons correctly', async () => {
-        const emmitedEvents: string[] = [];
+      it('should send event and highlight buttons correctly', () => {
+        const emittedEvents: string[] = [];
 
         const eventNameAndTestIDArray = [
           {
@@ -88,34 +88,16 @@ describe('EditorToolbar', () => {
           },
         ];
 
-        eventNameAndTestIDArray.forEach(async ({ eventName, testID }) => {
-          Events.on(editorEventEmmitor, eventName, () => {
-            emmitedEvents.push(testID);
+        eventNameAndTestIDArray.forEach(({ eventName, testID }) => {
+          Events.on(editorEventEmitter, eventName, () => {
+            emittedEvents.push(testID);
           });
 
           expect(wrapper.getByTestId(testID)).toHaveStyle({
             backgroundColor: undefined,
           });
 
-          await act(() => {
-            fireEvent.press(wrapper.getByTestId(testID));
-          });
-
-          // rerender
-          wrapper.rerender(
-            <ThemeProvider theme={theme}>
-              <EditorToolbar name="toolbar" testID="toolbar" />
-            </ThemeProvider>
-          );
-          // match snapshot
-          // add waitfor to ensure the style is applied
-          await waitFor(() => {
-            expect(wrapper.getByTestId(testID)).toHaveStyle({
-              backgroundColor:
-                theme.__hd__.richTextEditor.colors
-                  .toolbarButtonSelectedBackground,
-            });
-          });
+          fireEvent(wrapper.getByTestId(testID), 'press');
         });
 
         const standaloneButtonTestIDs = [
@@ -129,7 +111,7 @@ describe('EditorToolbar', () => {
           });
         });
 
-        expect(emmitedEvents).toMatchObject([
+        expect(emittedEvents).toMatchObject([
           'format-bold',
           'format-italic',
           'format-underlined',
@@ -139,6 +121,34 @@ describe('EditorToolbar', () => {
           'format-heading2',
         ]);
       });
+
+      it('should highlight buttons correctly', async () => {
+        act(() => {
+          editorEventEmitter.emit('toolbar/editor-change', {
+            toolbarState: {
+              bold: true,
+              italic: true,
+              underline: true,
+              'heading-one': true,
+            },
+          });
+        });
+
+        [
+          'format-bold',
+          'format-italic',
+          'format-underlined',
+          'format-heading1',
+        ].forEach(async (testID) => {
+          await waitFor(() => {
+            expect(wrapper.getByTestId(testID)).toHaveStyle({
+              backgroundColor:
+                theme.__hd__.richTextEditor.colors
+                  .toolbarButtonSelectedBackground,
+            });
+          });
+        });
+      });
     });
   });
 });

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

@@ -133,4 +133,42 @@ describe('RichTextEditorInput', () => {
 
     expect(onCursorChange).toHaveBeenCalledWith(cursorData);
   });
+
+  it('handles request-upsert-link event from webview', () => {
+    const { getByTestId } = renderWithTheme(
+      <RichTextEditorInput
+        value={initialValue}
+        name="test-editor"
+        autoFocus={false}
+        placeholder="Type here..."
+        onChange={jest.fn()}
+      />
+    );
+
+    const webview = getByTestId('webview');
+    // Spy on emitter
+    const spy = jest.spyOn(Events, 'emit');
+
+    fireEvent(webview, 'message', {
+      nativeEvent: {
+        data: JSON.stringify({
+          type: '@hero-editor/webview/request-upsert-link',
+          data: {
+            text: 'Test',
+            url: 'https://test.com',
+          },
+        }),
+      },
+    });
+    expect(spy).toHaveBeenCalledWith(
+      emitter,
+      'test-editor/request-upsert-link',
+      {
+        text: 'Test',
+        url: 'https://test.com',
+      }
+    );
+
+    spy.mockRestore();
+  });
 });

package/src/components/RichTextEditor/__tests__/__snapshots__/EditorToolbar.spec.tsx.snap

@@ -21,7 +21,6 @@ exports[`EditorToolbar when the editor is focused should render toolbar 1`] = `
 >
   <TouchableOpacity
     onPress={[Function]}
-    selected={false}
     style={
       [
         [
@@ -72,7 +71,6 @@ exports[`EditorToolbar when the editor is focused should render toolbar 1`] = `
   </TouchableOpacity>
   <TouchableOpacity
     onPress={[Function]}
-    selected={false}
     style={
       [
         [
@@ -123,7 +121,6 @@ exports[`EditorToolbar when the editor is focused should render toolbar 1`] = `
   </TouchableOpacity>
   <TouchableOpacity
     onPress={[Function]}
-    selected={false}
     style={
       [
         [
@@ -191,7 +188,6 @@ exports[`EditorToolbar when the editor is focused should render toolbar 1`] = `
   />
   <TouchableOpacity
     onPress={[Function]}
-    selected={false}
     style={
       [
         [
@@ -242,7 +238,6 @@ exports[`EditorToolbar when the editor is focused should render toolbar 1`] = `
   </TouchableOpacity>
   <TouchableOpacity
     onPress={[Function]}
-    selected={false}
     style={
       [
         [
@@ -310,7 +305,6 @@ exports[`EditorToolbar when the editor is focused should render toolbar 1`] = `
   />
   <TouchableOpacity
     onPress={[Function]}
-    selected={false}
     style={
       [
         [
@@ -361,7 +355,6 @@ exports[`EditorToolbar when the editor is focused should render toolbar 1`] = `
   </TouchableOpacity>
   <TouchableOpacity
     onPress={[Function]}
-    selected={false}
     style={
       [
         [

package/src/components/RichTextEditor/constants.ts

@@ -1,3 +1,5 @@
+import type { EditorValue } from './types';
+
 export enum ToolbarEvents {
   Bold = 'bold',
   Italic = 'italic',
@@ -6,4 +8,20 @@ export enum ToolbarEvents {
   NumberedList = 'numbered-list',
   HeadingOne = 'heading-one',
   HeadingTwo = 'heading-two',
+  AddLink = 'add-link',
+  ApplyLink = 'link',
 }
+
+export enum EditorEvents {
+  EditorFocus = 'editor-focus',
+  EditorBlur = 'editor-blur',
+  EditorChange = 'editor-change',
+  UpsertLink = 'request-upsert-link',
+}
+
+export const DEFAULT_VALUE: EditorValue = [
+  {
+    type: 'paragraph',
+    children: [{ text: '' }],
+  },
+];