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

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

@@ -0,0 +1,414 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EditorToolbar when the editor is focused should render toolbar 1`] = `
+<View
+  style={
+    [
+      [
+        {
+          "alignItems": "center",
+          "backgroundColor": "#f6f6f7",
+          "borderTopColor": "#e8e9ea",
+          "borderTopWidth": undefined,
+          "flexDirection": "row",
+          "paddingHorizontal": 7.846153846153847,
+        },
+      ],
+      undefined,
+    ]
+  }
+  testID="toolbar"
+>
+  <TouchableOpacity
+    onPress={[Function]}
+    selected={false}
+    style={
+      [
+        [
+          {
+            "alignItems": "center",
+            "backgroundColor": undefined,
+            "height": 47.07692307692308,
+            "justifyContent": "center",
+            "width": 47.07692307692308,
+          },
+        ],
+        undefined,
+      ]
+    }
+    testID="format-bold"
+  >
+    <Text
+      allowFontScaling={false}
+      selectable={false}
+      style={
+        [
+          {
+            "color": undefined,
+            "fontSize": 12,
+          },
+          [
+            [
+              {
+                "color": "#001f23",
+                "fontSize": 19.615384615384613,
+              },
+            ],
+            undefined,
+          ],
+          {
+            "fontFamily": "hero-icons-mobile",
+            "fontStyle": "normal",
+            "fontWeight": "normal",
+          },
+          {},
+        ]
+      }
+      themeIntent="text"
+      themeSize="small"
+    >
+      
+    </Text>
+  </TouchableOpacity>
+  <TouchableOpacity
+    onPress={[Function]}
+    selected={false}
+    style={
+      [
+        [
+          {
+            "alignItems": "center",
+            "backgroundColor": undefined,
+            "height": 47.07692307692308,
+            "justifyContent": "center",
+            "width": 47.07692307692308,
+          },
+        ],
+        undefined,
+      ]
+    }
+    testID="format-italic"
+  >
+    <Text
+      allowFontScaling={false}
+      selectable={false}
+      style={
+        [
+          {
+            "color": undefined,
+            "fontSize": 12,
+          },
+          [
+            [
+              {
+                "color": "#001f23",
+                "fontSize": 19.615384615384613,
+              },
+            ],
+            undefined,
+          ],
+          {
+            "fontFamily": "hero-icons-mobile",
+            "fontStyle": "normal",
+            "fontWeight": "normal",
+          },
+          {},
+        ]
+      }
+      themeIntent="text"
+      themeSize="small"
+    >
+      
+    </Text>
+  </TouchableOpacity>
+  <TouchableOpacity
+    onPress={[Function]}
+    selected={false}
+    style={
+      [
+        [
+          {
+            "alignItems": "center",
+            "backgroundColor": undefined,
+            "height": 47.07692307692308,
+            "justifyContent": "center",
+            "width": 47.07692307692308,
+          },
+        ],
+        undefined,
+      ]
+    }
+    testID="format-underlined"
+  >
+    <Text
+      allowFontScaling={false}
+      selectable={false}
+      style={
+        [
+          {
+            "color": undefined,
+            "fontSize": 12,
+          },
+          [
+            [
+              {
+                "color": "#001f23",
+                "fontSize": 19.615384615384613,
+              },
+            ],
+            undefined,
+          ],
+          {
+            "fontFamily": "hero-icons-mobile",
+            "fontStyle": "normal",
+            "fontWeight": "normal",
+          },
+          {},
+        ]
+      }
+      themeIntent="text"
+      themeSize="small"
+    >
+      
+    </Text>
+  </TouchableOpacity>
+  <View
+    style={
+      [
+        [
+          {
+            "alignItems": "center",
+            "backgroundColor": "#e8e9ea",
+            "flexDirection": "row",
+            "height": 15.692307692307693,
+            "marginHorizontal": 7.846153846153847,
+            "width": 1.9615384615384617,
+          },
+        ],
+        undefined,
+      ]
+    }
+  />
+  <TouchableOpacity
+    onPress={[Function]}
+    selected={false}
+    style={
+      [
+        [
+          {
+            "alignItems": "center",
+            "backgroundColor": undefined,
+            "height": 47.07692307692308,
+            "justifyContent": "center",
+            "width": 47.07692307692308,
+          },
+        ],
+        undefined,
+      ]
+    }
+    testID="format-list-bulleted"
+  >
+    <Text
+      allowFontScaling={false}
+      selectable={false}
+      style={
+        [
+          {
+            "color": undefined,
+            "fontSize": 12,
+          },
+          [
+            [
+              {
+                "color": "#001f23",
+                "fontSize": 19.615384615384613,
+              },
+            ],
+            undefined,
+          ],
+          {
+            "fontFamily": "hero-icons-mobile",
+            "fontStyle": "normal",
+            "fontWeight": "normal",
+          },
+          {},
+        ]
+      }
+      themeIntent="text"
+      themeSize="small"
+    >
+      
+    </Text>
+  </TouchableOpacity>
+  <TouchableOpacity
+    onPress={[Function]}
+    selected={false}
+    style={
+      [
+        [
+          {
+            "alignItems": "center",
+            "backgroundColor": undefined,
+            "height": 47.07692307692308,
+            "justifyContent": "center",
+            "width": 47.07692307692308,
+          },
+        ],
+        undefined,
+      ]
+    }
+    testID="format-list-numbered"
+  >
+    <Text
+      allowFontScaling={false}
+      selectable={false}
+      style={
+        [
+          {
+            "color": undefined,
+            "fontSize": 12,
+          },
+          [
+            [
+              {
+                "color": "#001f23",
+                "fontSize": 19.615384615384613,
+              },
+            ],
+            undefined,
+          ],
+          {
+            "fontFamily": "hero-icons-mobile",
+            "fontStyle": "normal",
+            "fontWeight": "normal",
+          },
+          {},
+        ]
+      }
+      themeIntent="text"
+      themeSize="small"
+    >
+      
+    </Text>
+  </TouchableOpacity>
+  <View
+    style={
+      [
+        [
+          {
+            "alignItems": "center",
+            "backgroundColor": "#e8e9ea",
+            "flexDirection": "row",
+            "height": 15.692307692307693,
+            "marginHorizontal": 7.846153846153847,
+            "width": 1.9615384615384617,
+          },
+        ],
+        undefined,
+      ]
+    }
+  />
+  <TouchableOpacity
+    onPress={[Function]}
+    selected={false}
+    style={
+      [
+        [
+          {
+            "alignItems": "center",
+            "backgroundColor": undefined,
+            "height": 47.07692307692308,
+            "justifyContent": "center",
+            "width": 47.07692307692308,
+          },
+        ],
+        undefined,
+      ]
+    }
+    testID="format-heading1"
+  >
+    <Text
+      allowFontScaling={false}
+      selectable={false}
+      style={
+        [
+          {
+            "color": undefined,
+            "fontSize": 12,
+          },
+          [
+            [
+              {
+                "color": "#001f23",
+                "fontSize": 19.615384615384613,
+              },
+            ],
+            undefined,
+          ],
+          {
+            "fontFamily": "hero-icons-mobile",
+            "fontStyle": "normal",
+            "fontWeight": "normal",
+          },
+          {},
+        ]
+      }
+      themeIntent="text"
+      themeSize="small"
+    >
+      
+    </Text>
+  </TouchableOpacity>
+  <TouchableOpacity
+    onPress={[Function]}
+    selected={false}
+    style={
+      [
+        [
+          {
+            "alignItems": "center",
+            "backgroundColor": undefined,
+            "height": 47.07692307692308,
+            "justifyContent": "center",
+            "width": 47.07692307692308,
+          },
+        ],
+        undefined,
+      ]
+    }
+    testID="format-heading2"
+  >
+    <Text
+      allowFontScaling={false}
+      selectable={false}
+      style={
+        [
+          {
+            "color": undefined,
+            "fontSize": 12,
+          },
+          [
+            [
+              {
+                "color": "#001f23",
+                "fontSize": 19.615384615384613,
+              },
+            ],
+            undefined,
+          ],
+          {
+            "fontFamily": "hero-icons-mobile",
+            "fontStyle": "normal",
+            "fontWeight": "normal",
+          },
+          {},
+        ]
+      }
+      themeIntent="text"
+      themeSize="small"
+    >
+      
+    </Text>
+  </TouchableOpacity>
+</View>
+`;

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

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MentionList when search string is not empty should render mention list showing filtered results 1`] = `
+<View>
+  <View>
+    <Text
+      onPress={[Function]}
+    >
+      Hieu Pham
+    </Text>
+  </View>
+</View>
+`;

package/src/components/RichTextEditor/constants.ts

@@ -0,0 +1,9 @@
+export enum ToolbarEvents {
+  Bold = 'bold',
+  Italic = 'italic',
+  Underline = 'underline',
+  BulletedList = 'bulleted-list',
+  NumberedList = 'numbered-list',
+  HeadingOne = 'heading-one',
+  HeadingTwo = 'heading-two',
+}

package/src/{hero-editor.d.ts → components/RichTextEditor/hero-editor.d.ts}

@@ -5,4 +5,10 @@ declare module 'hero-editor/dist/app.js' {
 
 declare module 'hero-editor' {
   export function isEmptyContent(content: unknown): boolean;
+  export function plainSerializer(
+    content: {
+      type: string;
+      children: unknown;
+    }[]
+  ): string;
 }

package/src/components/RichTextEditor/heroEditorApp.ts

@@ -0,0 +1,3 @@
+import * as heroEditorApp from 'hero-editor/dist/app.js';
+
+export default heroEditorApp;

package/src/components/RichTextEditor/index.tsx

@@ -0,0 +1,20 @@
+import React, { forwardRef } from 'react';
+import RichTextEditor, {
+  RichTextEditorProps,
+  RichTextEditorRef,
+} from './RichTextEditor';
+import MentionList from './MentionList';
+
+import Toolbar from './EditorToolbar';
+
+const RichTextEditorWithRef = forwardRef<
+  RichTextEditorRef,
+  Omit<RichTextEditorProps, 'forwardedRef'>
+>((props, ref) => <RichTextEditor {...props} forwardedRef={ref} />);
+
+RichTextEditorWithRef.displayName = 'RichTextEditor';
+
+export default Object.assign(RichTextEditorWithRef, {
+  MentionList,
+  Toolbar,
+});

package/src/components/RichTextEditor/types.ts

@@ -0,0 +1,87 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
+import { Ref } from 'react';
+import type { TextInputProps } from '../TextInput';
+
+export type ToolbarButtonName =
+  | 'bold'
+  | 'italic'
+  | 'underline'
+  | 'bulletedList'
+  | 'numberedList'
+  | 'headingOne'
+  | 'headingTwo'
+  | '|';
+
+export type TextUnit = 'character' | 'word' | 'line' | 'block';
+
+export interface RichTextEditorRef {
+  requestBlur: VoidFunction;
+  insertNodes: (nodes: Record<string, unknown>[]) => void;
+  deleteBackward: (unit?: TextUnit) => void;
+  setReadOnly: (readOnly: boolean) => void;
+}
+
+export type EditorValue = {
+  type: string;
+  children: unknown;
+}[];
+
+export 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>;
+}
+
+export interface InternalRichTextEditorProps extends RichTextEditorProps {
+  TextInputComponent?: React.ComponentType<TextInputProps>;
+}

package/src/components/RichTextEditor/utils/events.ts

@@ -0,0 +1,31 @@
+import { EventEmitter } from 'events';
+
+export interface Listener<T> {
+  (data: T): void;
+}
+
+export const off = <T>(
+  emitter: EventEmitter,
+  eventName: string,
+  listener: Listener<T>
+) => {
+  emitter.off(eventName, listener);
+};
+
+export const emit = <T>(emitter: EventEmitter, eventName: string, data: T) =>
+  emitter.emit(eventName, data);
+
+export const setMaxListeners = (emitter: EventEmitter, n: number) => {
+  emitter.setMaxListeners(n);
+};
+
+export const on = <T>(
+  emitter: EventEmitter,
+  eventName: string,
+  listener: Listener<T>
+) => {
+  emitter.on(eventName, listener);
+  return () => {
+    emitter.off(eventName, listener);
+  };
+};

package/src/components/RichTextEditor/utils/rnWebView.tsx

@@ -0,0 +1,30 @@
+import WebView from 'react-native-webview';
+
+export const requestBlurEditor = (element: WebView): void => {
+  element.injectJavaScript(
+    '\n    window.document.activeElement && window.document.activeElement.blur();\n    '
+  );
+};
+
+export const requestFocusEditor = (element: WebView): void => {
+  element.injectJavaScript(
+    `
+\n
+ var el = window.document.querySelector('[role="textbox"]');
+        if (el) el.focus();
+\n
+    `
+  );
+};
+
+export interface WebViewEventMessage {
+  type: string;
+  data: unknown;
+}
+export const postMessage = (
+  element: WebView,
+  message: WebViewEventMessage
+): void => {
+  const messageString = JSON.stringify(message);
+  element.injectJavaScript(`window.postMessage(${messageString}, '*');`);
+};

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

@@ -7,6 +7,17 @@ exports[`MultiSelect renders correctly (snapshot) 1`] = `
   >
     <TouchableOpacity
       onPress={[Function]}
+      style={
+        [
+          [
+            {},
+          ],
+          undefined,
+        ]
+      }
+      testID="multi-select-touchable-opacity"
+      themeGroupStyleEnabled={false}
+      themeHasError={false}
     >
       <View
         pointerEvents="none"
@@ -34,8 +45,8 @@ exports[`MultiSelect renders correctly (snapshot) 1`] = `
             ]
           }
           themeFocused={false}
+          themeGroupStyleEnabled={false}
           themeHasError={false}
-          themeUseGroupStyleEnabled={false}
         >
           <View
             pointerEvents="none"
@@ -693,6 +704,17 @@ exports[`Select renders correctly (snapshot) 1`] = `
   >
     <TouchableOpacity
       onPress={[Function]}
+      style={
+        [
+          [
+            {},
+          ],
+          undefined,
+        ]
+      }
+      testID="single-select-touchable-opacity"
+      themeGroupStyleEnabled={false}
+      themeHasError={false}
     >
       <View
         pointerEvents="none"
@@ -720,8 +742,8 @@ exports[`Select renders correctly (snapshot) 1`] = `
             ]
           }
           themeFocused={false}
+          themeGroupStyleEnabled={false}
           themeHasError={false}
-          themeUseGroupStyleEnabled={false}
         >
           <View
             pointerEvents="none"