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

package/src/components/RichTextEditor/StyledToolbar.ts

@@ -0,0 +1,32 @@
+import { styled } from '@hero-design/rn';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
+
+export const StyledToolbarButton = styled(TouchableOpacity)<{
+  selected: boolean;
+}>(({ theme, selected }) => ({
+  width: theme.__hd__.richTextEditor.sizes.toolbarButtonSize,
+  height: theme.__hd__.richTextEditor.sizes.toolbarButtonSize,
+  alignItems: 'center',
+  justifyContent: 'center',
+  backgroundColor: selected
+    ? theme.__hd__.richTextEditor.colors.toolbarButtonSelectedBackground
+    : undefined,
+}));
+
+export const StyledToolbar = styled(View)(({ theme }) => ({
+  flexDirection: 'row',
+  alignItems: 'center',
+  borderTopWidth: StyleSheet.hairlineWidth,
+  borderTopColor: theme.__hd__.richTextEditor.colors.toolbarBorderColor,
+  backgroundColor: theme.__hd__.richTextEditor.colors.toolbarBackgroundColor,
+  paddingHorizontal: theme.__hd__.richTextEditor.space.toolbarHorizontalPadding,
+}));
+
+export const StyledSeparator = styled(View)(({ theme }) => ({
+  width: theme.__hd__.richTextEditor.sizes.toolbarSeparatorWidth,
+  height: theme.__hd__.richTextEditor.sizes.toolbarSeparatorHeight,
+  flexDirection: 'row',
+  alignItems: 'center',
+  marginHorizontal: theme.space.small,
+  backgroundColor: theme.colors.secondaryOutline,
+}));

package/src/components/RichTextEditor/__mocks__/hero-editor.js

@@ -0,0 +1,3 @@
+module.exports = {
+  plainSerializer: () => 'mocked',
+};

package/src/components/RichTextEditor/__mocks__/heroEditorApp.ts

@@ -0,0 +1,2 @@
+const mockHeroEditApp = 'mockHeroEditApp';
+export default mockHeroEditApp;

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

@@ -0,0 +1,144 @@
+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 renderWithTheme from '../../../../testUtils/renderWithTheme';
+
+describe('EditorToolbar', () => {
+  it('should not render toolbar when the editor is not focused', () => {
+    const wrapper = renderWithTheme(
+      <EditorToolbar testID="editor-toolbar" name="toolbar" />
+    );
+    const toolbar = wrapper.queryByTestId('editor-toolbar');
+    expect(toolbar).toBeNull();
+  });
+
+  describe('when the editor is focused', () => {
+    let wrapper: RenderAPI;
+
+    beforeEach(async () => {
+      wrapper = renderWithTheme(
+        <EditorToolbar name="toolbar" testID="toolbar" />
+      );
+      act(() => {
+        editorEventEmmitor.emit('toolbar/editor-focus');
+      });
+      await waitFor(() => wrapper.getByTestId('toolbar'));
+    });
+
+    it('should render toolbar', async () => {
+      expect(wrapper.toJSON()).toMatchSnapshot();
+
+      [
+        'format-bold',
+        'format-italic',
+        'format-underlined',
+        'format-list-bulleted',
+        'format-list-numbered',
+        'format-heading1',
+        'format-heading2',
+      ].forEach((testId) => {
+        expect(wrapper.queryAllByTestId(testId)).toHaveLength(1);
+      });
+    });
+
+    it('should hide toolbar when blur', async () => {
+      act(() => {
+        editorEventEmmitor.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[] = [];
+
+        const eventNameAndTestIDArray = [
+          {
+            eventName: 'toolbar/bold',
+            testID: 'format-bold',
+          },
+          {
+            eventName: 'toolbar/italic',
+            testID: 'format-italic',
+          },
+          {
+            eventName: 'toolbar/underline',
+            testID: 'format-underlined',
+          },
+          {
+            eventName: 'toolbar/bulleted-list',
+            testID: 'format-list-bulleted',
+          },
+          {
+            eventName: 'toolbar/numbered-list',
+            testID: 'format-list-numbered',
+          },
+          {
+            eventName: 'toolbar/heading-one',
+            testID: 'format-heading1',
+          },
+          {
+            eventName: 'toolbar/heading-two',
+            testID: 'format-heading2',
+          },
+        ];
+
+        eventNameAndTestIDArray.forEach(async ({ eventName, testID }) => {
+          Events.on(editorEventEmmitor, eventName, () => {
+            emmitedEvents.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,
+            });
+          });
+        });
+
+        const standaloneButtonTestIDs = [
+          'format-list-bulleted',
+          'format-list-numbered',
+          'format-heading1',
+        ];
+        standaloneButtonTestIDs.forEach((testID) => {
+          expect(wrapper.getByTestId(testID)).toHaveStyle({
+            backgroundColor: undefined,
+          });
+        });
+
+        expect(emmitedEvents).toMatchObject([
+          'format-bold',
+          'format-italic',
+          'format-underlined',
+          'format-list-bulleted',
+          'format-list-numbered',
+          'format-heading1',
+          'format-heading2',
+        ]);
+      });
+    });
+  });
+});

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

@@ -0,0 +1,105 @@
+import type { RenderAPI } from '@testing-library/react-native';
+import { act, fireEvent, render } from '@testing-library/react-native';
+import React from 'react';
+import { Text, View } from 'react-native';
+import { emitter as editorEventEmitter } from '../EditorEvent';
+import MentionList from '../MentionList';
+import * as Events from '../utils/events';
+import renderWithTheme from '../../../../testUtils/renderWithTheme';
+
+const SuggestionListData: Array<{ id: string; name: string }> = [
+  { id: '1', name: 'Kien Tran' },
+  { id: '2', name: 'Minh Dinh' },
+  { id: '3', name: 'Hieu Pham' },
+  { id: '4', name: 'Hau' },
+  { id: '5', name: 'Tung Ten' },
+  { id: '6', name: 'Thong Quach' },
+];
+
+const SuggestionList = ({
+  searchValue,
+  onSelect,
+}: {
+  searchValue: string;
+  onSelect: (id: string, name: string) => void;
+}) => {
+  const filteredData = SuggestionListData.filter((item) =>
+    item.name.includes(searchValue)
+  );
+
+  return (
+    <View>
+      {filteredData.map((item) => (
+        <Text key={item.id} onPress={() => onSelect(item.id, item.name)}>
+          {item.name}
+        </Text>
+      ))}
+    </View>
+  );
+};
+
+describe('MentionList', () => {
+  describe('when search string is empty', () => {
+    it('should not render mention list', () => {
+      const wrapper = render(
+        <MentionList
+          name="give-shout-out"
+          render={() => <Text>Mention List</Text>}
+        />
+      );
+
+      expect(wrapper.toJSON()).toBeNull();
+    });
+  });
+
+  describe('when search string is not empty', () => {
+    let wrapper: RenderAPI;
+
+    beforeEach(async () => {
+      wrapper = renderWithTheme(
+        <MentionList
+          name="give-shout-out"
+          render={(
+            searchValue: string,
+            onSelect: (id: string, name: string) => void
+          ) => <SuggestionList searchValue={searchValue} onSelect={onSelect} />}
+        />
+      );
+      await act(() => {
+        editorEventEmitter.emit('give-shout-out/mention-search', {
+          search: 'Hieu',
+          target: 'give-shout-out',
+        });
+      });
+    });
+
+    it('should render mention list showing filtered results', async () => {
+      expect(wrapper.toJSON()).toMatchSnapshot();
+      expect(wrapper.queryAllByText('Hieu Pham')).toHaveLength(1);
+      expect(wrapper.queryAllByText('Kien Tran')).toHaveLength(0);
+      expect(wrapper.queryAllByText('Minh Dinh')).toHaveLength(0);
+      expect(wrapper.queryAllByText('Hau')).toHaveLength(0);
+      expect(wrapper.queryAllByText('Tung Teng')).toHaveLength(0);
+      expect(wrapper.queryAllByText('Thong Quach')).toHaveLength(0);
+    });
+
+    describe('onPress suggesstion item', () => {
+      it('should emit action metion-only', () => {
+        const result: { id: string; name: string; target: string }[] = [];
+        act(() => {
+          Events.on(
+            editorEventEmitter,
+            'give-shout-out/mention-apply',
+            (data: { id: string; name: string; target: string }) => {
+              result.push(data);
+            }
+          );
+        });
+        fireEvent(wrapper.getByText('Hieu Pham'), 'press');
+        expect(result).toMatchObject([
+          { id: '3', name: 'Hieu Pham', target: 'give-shout-out' },
+        ]);
+      });
+    });
+  });
+});

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

@@ -0,0 +1,136 @@
+import React from 'react';
+import { fireEvent } from '@testing-library/react-native';
+import RichTextEditorInput from '../RichTextEditorInput';
+import { emitter } from '../EditorEvent';
+import * as Events from '../utils/events';
+import renderWithTheme from '../../../../testUtils/renderWithTheme';
+
+// Mock minimal EditorValue type for test
+const initialValue = [
+  { type: 'paragraph', children: [{ text: 'Hello world' }] },
+];
+
+describe('RichTextEditorInput', () => {
+  it('renders a WebView with correct initial html', () => {
+    const { getByTestId } = renderWithTheme(
+      <RichTextEditorInput
+        value={initialValue}
+        name="test-editor"
+        autoFocus={false}
+        placeholder="Type something..."
+        onChange={jest.fn()}
+      />
+    );
+
+    const webview = getByTestId('webview');
+    expect(webview).toBeTruthy();
+    expect(webview.props.source.html).toContain(
+      'placeholder: "Type something..."'
+    );
+    expect(webview.props.source.html).toContain(JSON.stringify(initialValue));
+  });
+
+  it('handles editor-change event from webview', () => {
+    const onChange = jest.fn();
+    const { getByTestId } = renderWithTheme(
+      <RichTextEditorInput
+        value={initialValue}
+        name="test-editor"
+        autoFocus={false}
+        placeholder="Type here..."
+        onChange={onChange}
+      />
+    );
+
+    const webview = getByTestId('webview');
+    const newValue = [{ type: 'paragraph', children: [{ text: 'Changed' }] }];
+    fireEvent(webview, 'message', {
+      nativeEvent: {
+        data: JSON.stringify({
+          type: '@hero-editor/webview/editor-change',
+          data: { value: newValue },
+        }),
+      },
+    });
+
+    expect(onChange).toHaveBeenCalledWith(newValue);
+  });
+
+  it('handles editor-focus and editor-blur events from webview', () => {
+    const onFocus = jest.fn();
+    const onBlur = jest.fn();
+    const { getByTestId } = renderWithTheme(
+      <RichTextEditorInput
+        value={initialValue}
+        name="test-editor"
+        autoFocus={false}
+        placeholder="Type here..."
+        onChange={jest.fn()}
+        onFocus={onFocus}
+        onBlur={onBlur}
+      />
+    );
+
+    const webview = getByTestId('webview');
+
+    // Spy on emitter
+    const spy = jest.spyOn(Events, 'emit');
+
+    // Simulate focus
+    fireEvent(webview, 'message', {
+      nativeEvent: {
+        data: JSON.stringify({
+          type: '@hero-editor/webview/editor-focus',
+        }),
+      },
+    });
+    expect(spy).toHaveBeenCalledWith(
+      emitter,
+      'test-editor/editor-focus',
+      undefined
+    );
+
+    // Simulate blur
+    fireEvent(webview, 'message', {
+      nativeEvent: {
+        data: JSON.stringify({
+          type: '@hero-editor/webview/editor-blur',
+        }),
+      },
+    });
+    expect(spy).toHaveBeenCalledWith(
+      emitter,
+      'test-editor/editor-blur',
+      undefined
+    );
+
+    spy.mockRestore();
+  });
+
+  it('handles cursor-change event from webview', () => {
+    const onCursorChange = jest.fn();
+    const { getByTestId } = renderWithTheme(
+      <RichTextEditorInput
+        value={initialValue}
+        name="test-editor"
+        autoFocus={false}
+        placeholder="Type here..."
+        onChange={jest.fn()}
+        onCursorChange={onCursorChange}
+      />
+    );
+
+    const webview = getByTestId('webview');
+    const cursorData = { position: { top: 10 } };
+    fireEvent(webview, 'message', {
+      nativeEvent: {
+        data: JSON.stringify({
+          type: '@hero-editor/webview/cursor-change',
+          data: cursorData,
+        }),
+      },
+    });
+
+    expect(onCursorChange).toHaveBeenCalledWith(cursorData);
+  });
+});