@herca/rn-kit 0.1.113 → 0.1.115

package/src/TextEditor/Toolbar.tsx

@@ -0,0 +1,104 @@
+import {
+  Platform,
+  ScrollView,
+  StyleSheet,
+  TouchableOpacity,
+} from 'react-native';
+import Color from '../Color/Color';
+import Icon from '../Icon';
+import Typography from '../Typography/Typography';
+import Footer from '../Ui/Footer';
+import { getTestID } from '../helpers/getTestID';
+import { TOOLBAR_BUTTONS } from './toolbarButtons';
+import type { TextCommand } from './types';
+
+interface ToolbarProps {
+  keyboardHeight: number;
+  isActive: (command: TextCommand) => boolean;
+  onPress: (command: TextCommand) => void;
+  testID?: string;
+}
+
+/**
+ * The formatting bar that floats above the keyboard.
+ *
+ * Buttons render an icon, or their `text` when no icon fits -- the headings
+ * have no glyph in Icon.
+ */
+export default function Toolbar({
+  keyboardHeight,
+  isActive,
+  onPress,
+  testID,
+}: ToolbarProps) {
+  return (
+    <Footer
+      style={[
+        styles.toolbar,
+        {
+          bottom:
+            Platform.OS === 'android' && Platform.Version < 35
+              ? keyboardHeight - keyboardHeight
+              : keyboardHeight,
+        },
+      ]}
+    >
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={styles.content}
+      >
+        {TOOLBAR_BUTTONS.map((button) => (
+          <TouchableOpacity
+            key={button.command}
+            testID={getTestID(testID, button.command)}
+            accessibilityLabel={button.label}
+            onPress={() => onPress(button.command)}
+            style={[
+              styles.button,
+              isActive(button.command) && styles.buttonActive,
+            ]}
+          >
+            {button.icon ? (
+              <Icon
+                name={button.icon}
+                size={20}
+                color={isActive(button.command) ? '#fff' : Color.gray[900]}
+              />
+            ) : (
+              <Typography
+                variant="t2"
+                weight="semibold"
+                color={isActive(button.command) ? '#fff' : Color.gray[900]}
+              >
+                {button.text}
+              </Typography>
+            )}
+          </TouchableOpacity>
+        ))}
+      </ScrollView>
+    </Footer>
+  );
+}
+
+const styles = StyleSheet.create({
+  toolbar: {
+    borderTopWidth: 1,
+    borderTopColor: Color.gray[100],
+    backgroundColor: Color.base.white100,
+  },
+  content: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+  },
+  button: {
+    padding: 8,
+    borderRadius: 6,
+  },
+  buttonActive: {
+    backgroundColor: Color.primary[1000],
+  },
+});

package/src/TextEditor/editorDocument.ts

@@ -0,0 +1,246 @@
+import Color from '../Color/Color';
+import {
+  buildCommandScript,
+  buildFormatStateScript,
+  buildLinkScript,
+} from './formatState';
+
+interface EditorDocumentOptions {
+  placeholder: string;
+  initialValue: string;
+  /** Commands answered by queryCommandState. */
+  toggleCommands: readonly string[];
+  /** Block names compared against queryCommandValue('formatBlock'). */
+  blockCommands: readonly string[];
+}
+
+/**
+ * Builds the HTML document the editor webview loads.
+ *
+ * It lives apart from the component because it is the single largest thing in
+ * this folder and has nothing to do with React: it is a document plus the
+ * scripts that run inside it. The behavioural pieces it embeds
+ * (rnkitActiveFormats, rnkitRunCommand) come from formatState.ts, where they
+ * are executed against a stubbed DOM in tests.
+ */
+export const buildEditorDocument = ({
+  placeholder,
+  initialValue,
+  toggleCommands,
+  blockCommands,
+}: EditorDocumentOptions) => `
+  <html>
+    <head>
+      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+      <style>
+        *,
+        *::before,
+        *::after {
+          box-sizing: border-box;
+        }
+        html, body {
+          margin: 0;
+          padding: 0;
+          width: 99.9%;
+          height: 100%;
+          overflow-x: hidden;
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        }
+        #editor {
+          height: 100%;
+          width: 100%;
+          max-width: 100%;
+          font-size: 14px;
+          line-height: 1.5;
+          border-radius: 6px;
+          outline: none;
+          transition: border 0.2s;
+          overflow-wrap: break-word;
+          font-weight: 400;
+          word-wrap: break-word;
+          word-break: break-word;
+          color: #333;
+        }
+        #editor.placeholder:empty:before {
+          content: '${placeholder}';
+          color: ${Color.gray[400]};
+          font-style: italic;
+        }
+        #editor:focus {
+          outline: none;
+        }
+        /* Style untuk list */
+        #editor ul, #editor ol {
+          margin: 8px 0;
+          padding-left: 24px;
+        }
+        #editor li {
+          margin: 4px 0;
+        }
+        /* Style untuk heading */
+        #editor h1 { font-size: 24px; font-weight: bold; margin: 12px 0; }
+        #editor h2 { font-size: 20px; font-weight: bold; margin: 10px 0; }
+        #editor h3 { font-size: 16px; font-weight: bold; margin: 8px 0; }
+        /* Style untuk link */
+        #editor a {
+          color: #3b82f6;
+          text-decoration: underline;
+          cursor: pointer;
+        }
+        #editor a:hover {
+          color: #2563eb;
+        }
+      </style>
+    </head>
+    <body>
+      <div id="editor" contenteditable="true" class="placeholder">${initialValue}</div>
+      <script>
+        const editor = document.getElementById("editor");
+
+        // Handle placeholder
+        if (editor.textContent.trim()) {
+          editor.classList.remove('placeholder');
+        }
+
+        // Kirim initial character count saat load
+        setTimeout(() => {
+          const charCount = editor.textContent.trim().length;
+          window.ReactNativeWebView.postMessage(JSON.stringify({
+            type: 'initialCount',
+            characterCount: charCount
+          }));
+        }, 100);
+
+        editor.addEventListener("input", () => {
+          if (editor.textContent.trim()) {
+            editor.classList.remove('placeholder');
+          } else {
+            editor.classList.add('placeholder');
+          }
+
+          // Kirim HTML dan character count
+          const charCount = editor.textContent.trim().length;
+          window.ReactNativeWebView.postMessage(JSON.stringify({
+            type: 'content',
+            html: editor.innerHTML,
+            characterCount: charCount
+          }));
+        });
+
+        editor.addEventListener("focus", () => {
+          editor.classList.add("focused");
+          window.ReactNativeWebView.postMessage(JSON.stringify({ type: 'focus' }));
+        });
+
+        editor.addEventListener("blur", () => {
+          editor.classList.remove("focused");
+          window.ReactNativeWebView.postMessage(JSON.stringify({ type: 'blur' }));
+        });
+
+        // Update active formats
+        editor.addEventListener("mouseup", updateFormats);
+        editor.addEventListener("keyup", updateFormats);
+        editor.addEventListener("click", updateFormats);
+
+        // Caret moves that are not a click or keyup -- arrow keys held down,
+        // programmatic selection, autocorrect -- only surface here.
+        document.addEventListener('selectionchange', function () {
+          if (document.activeElement === editor) updateFormats();
+        });
+
+        ${buildFormatStateScript(toggleCommands, blockCommands)}
+
+        ${buildCommandScript()}
+
+          ${buildLinkScript()}
+
+        function updateFormats() {
+          var formats = rnkitActiveFormats();
+
+          window.ReactNativeWebView.postMessage(JSON.stringify({
+            type: 'formats',
+            formats: formats
+          }));
+        }
+
+        function getSelectedLinkInfo() {
+          const selection = window.getSelection();
+          if (!selection || selection.rangeCount === 0) {
+            return { text: '', url: '' };
+          }
+
+          const range = selection.getRangeAt(0);
+          let linkElement = null;
+
+          // Check if selection contains or is within a link
+          if (range.startContainer.nodeType === Node.ELEMENT_NODE) {
+            linkElement = range.startContainer.querySelector('a');
+          }
+
+          // Check parent nodes for link
+          let node = range.startContainer;
+          while (node && node !== editor) {
+            if (node.nodeName === 'A') {
+              linkElement = node;
+              break;
+            }
+            node = node.parentNode;
+          }
+
+          // Check if any node in selection is a link
+          if (!linkElement && range.commonAncestorContainer) {
+            const container = range.commonAncestorContainer;
+            if (container.nodeType === Node.ELEMENT_NODE) {
+              linkElement = container.querySelector('a');
+            }
+          }
+
+          if (linkElement) {
+            return {
+              text: linkElement.textContent || '',
+              url: linkElement.href || '',
+              isExisting: true
+            };
+          }
+
+          return {
+            text: selection.toString(),
+            url: '',
+            isExisting: false
+          };
+        }
+
+        const handleMessage = (command) => {
+          if (command === 'getContent') {
+            window.ReactNativeWebView.postMessage(editor.innerHTML);
+          } else if (command === 'getSelectedText') {
+            const linkInfo = getSelectedLinkInfo();
+            window.ReactNativeWebView.postMessage(JSON.stringify({
+              type: 'selectedText',
+              text: linkInfo.text,
+              url: linkInfo.url,
+              isExisting: linkInfo.isExisting
+            }));
+          } else if (command.startsWith('insertLink:')) {
+            rnkitInsertLink(JSON.parse(command.replace('insertLink:', '')));
+            updateFormats();
+          } else {
+            editor.focus();
+            rnkitRunCommand(command);
+            updateFormats();
+          }
+        };
+
+        // untuk Android
+        document.addEventListener("message", (event) => {
+          handleMessage(event.data);
+        });
+
+        // untuk iOS
+        window.addEventListener("message", (event) => {
+          handleMessage(event.data);
+        });
+      </script>
+    </body>
+  </html>
+`;

package/src/TextEditor/formatState.ts

@@ -0,0 +1,186 @@
+/**
+ * Builds the snippet the editor webview uses to decide which toolbar buttons
+ * light up.
+ *
+ * It lives here rather than inline in the page HTML so it can be executed and
+ * asserted on directly -- the link/underline clash it handles is subtle, and
+ * buried inside a template literal it was neither visible nor testable.
+ *
+ * Defines `rnkitActiveFormats()` in the webview scope, returning the list of
+ * active commands.
+ *
+ * @param toggleCommands commands answered by `queryCommandState` (bold, lists,
+ *   alignment, …)
+ * @param blockCommands block names compared against `queryCommandValue`
+ *   ('formatBlock'), i.e. the headings
+ */
+export const buildFormatStateScript = (
+  toggleCommands: readonly string[],
+  blockCommands: readonly string[]
+) => `
+  function rnkitSelectionAncestor(tagName) {
+    var selection = window.getSelection();
+    if (!selection || selection.rangeCount === 0) return null;
+
+    var node = selection.getRangeAt(0).startContainer;
+    while (node && node !== editor) {
+      if (node.nodeName === tagName) return node;
+      node = node.parentNode;
+    }
+    return null;
+  }
+
+  function rnkitActiveFormats() {
+    var formats = ${JSON.stringify(toggleCommands)}.filter(function (command) {
+      // The stylesheet underlines every <a>, and queryCommandState reports
+      // that as an active underline -- indistinguishable from a real <u>. So
+      // inside a link, ask the DOM instead; otherwise the button latches on
+      // the moment a link is inserted and can never be switched off.
+      if (command === 'underline' && rnkitSelectionAncestor('A')) {
+        return !!rnkitSelectionAncestor('U');
+      }
+
+      try {
+        return document.queryCommandState(command);
+      } catch (error) {
+        // Browsers throw for commands they do not implement; treat those as
+        // simply not active.
+        return false;
+      }
+    });
+
+    var block = '';
+    try {
+      block = String(document.queryCommandValue('formatBlock') || '')
+        .toLowerCase();
+    } catch (error) {
+      block = '';
+    }
+
+    ${JSON.stringify(blockCommands)}.forEach(function (command) {
+      if (block === command) formats.push(command);
+    });
+
+    return formats;
+  }
+`;
+
+/** Block names that `removeFormat` cannot touch, so clearing must undo them. */
+const BLOCK_LEVEL_FORMATS = ['h1', 'h2', 'h3'];
+
+/**
+ * Builds the snippet that runs a toolbar command inside the webview.
+ *
+ * Defines `rnkitRunCommand(command)`. Both platforms go through it -- iOS by
+ * injecting a call, Android by calling it from the message handler -- so the
+ * two paths cannot drift apart the way they had before.
+ */
+export const buildCommandScript = () => `
+  function rnkitCurrentBlock() {
+    try {
+      return String(document.queryCommandValue('formatBlock') || '')
+        .toLowerCase();
+    } catch (error) {
+      return '';
+    }
+  }
+
+  function rnkitRunCommand(command) {
+    if (/^h[1-3]$/.test(command)) {
+      document.execCommand('formatBlock', false, '<' + command + '>');
+      return;
+    }
+
+    if (command === 'removeFormat') {
+      document.execCommand('removeFormat', false, '');
+
+      // removeFormat is defined to strip inline formatting only, so a heading
+      // survives it untouched. Drop the block back to a paragraph as well,
+      // which is what "clear formatting" means to anyone pressing it.
+      if (${JSON.stringify(BLOCK_LEVEL_FORMATS)}.indexOf(rnkitCurrentBlock()) !== -1) {
+        document.execCommand('formatBlock', false, '<p>');
+      }
+      return;
+    }
+
+    document.execCommand(command, false, '');
+  }
+`;
+
+/**
+ * Builds the snippet that inserts or edits a hyperlink inside the webview.
+ *
+ * Defines `rnkitInsertLink(linkData)`. Both platforms call it -- iOS by
+ * injecting a call, Android from its message handler. It used to exist twice,
+ * once per platform, which is exactly how the two drifted apart before.
+ */
+export const buildLinkScript = () => `
+  function rnkitFindLinkInRange(range) {
+    var node = range.startContainer;
+    while (node && node !== editor) {
+      if (node.nodeName === 'A') return node;
+      node = node.parentNode;
+    }
+
+    if (range.commonAncestorContainer.nodeType === 1) {
+      return range.commonAncestorContainer.querySelector('a');
+    }
+    return null;
+  }
+
+  function rnkitReportContent() {
+    window.ReactNativeWebView.postMessage(JSON.stringify({
+      type: 'content',
+      html: editor.innerHTML,
+      characterCount: editor.textContent.trim().length
+    }));
+  }
+
+  function rnkitInsertLink(linkData) {
+    editor.focus();
+
+    var selection = window.getSelection();
+    if (!selection || selection.rangeCount === 0) {
+      rnkitReportContent();
+      return;
+    }
+
+    var range = selection.getRangeAt(0);
+
+    if (linkData.isExisting) {
+      var existing = rnkitFindLinkInRange(range);
+      if (existing) {
+        existing.href = linkData.url;
+        existing.textContent = linkData.text;
+        range.setStartAfter(existing);
+        range.collapse(true);
+        selection.removeAllRanges();
+        selection.addRange(range);
+        rnkitReportContent();
+        return;
+      }
+    }
+
+    var link = document.createElement('a');
+    link.href = linkData.url;
+    link.textContent = linkData.text;
+    link.target = '_blank';
+    range.deleteContents();
+    range.insertNode(link);
+
+    // A trailing space gives the caret somewhere outside the anchor to land,
+    // so the next keystroke is not swallowed into the link.
+    var space = document.createTextNode(' ');
+    if (link.parentNode) {
+      link.parentNode.insertBefore(space, link.nextSibling);
+      range.setStartAfter(space);
+    } else {
+      range.setStartAfter(link);
+    }
+    range.collapse(true);
+    selection.removeAllRanges();
+    selection.addRange(range);
+
+    rnkitReportContent();
+  }
+`;

package/src/TextEditor/toolbarButtons.ts

@@ -0,0 +1,41 @@
+import type { ToolbarButton } from './types';
+
+// Single source of truth: the toolbar renders from this list, and the webview
+// is asked about exactly these commands. Adding a button therefore cannot
+// leave it without an active state -- the two used to be maintained apart, and
+// five buttons were never queried at all.
+export const TOOLBAR_BUTTONS: ToolbarButton[] = [
+  { command: 'bold', icon: 'Bold', label: 'Bold' },
+  { command: 'italic', icon: 'Italic', label: 'Italic' },
+  { command: 'underline', icon: 'UnderLine', label: 'Underline' },
+  { command: 'strikeThrough', icon: 'strike-through', label: 'Strike' },
+  { command: 'link', icon: 'Link', label: 'Link', isSpecial: true },
+  {
+    command: 'insertUnorderedList',
+    icon: 'list-un-ordered',
+    label: 'Bullet',
+  },
+  { command: 'insertOrderedList', icon: 'list-ordered', label: 'Number' },
+  { command: 'justifyLeft', icon: 'align-left', label: 'Left' },
+  { command: 'justifyCenter', icon: 'align-center', label: 'Center' },
+  { command: 'justifyRight', icon: 'align-right', label: 'Right' },
+  { command: 'h1', text: 'H1', label: 'Heading 1', kind: 'block' },
+  { command: 'h2', text: 'H2', label: 'Heading 2', kind: 'block' },
+  { command: 'h3', text: 'H3', label: 'Heading 3', kind: 'block' },
+  {
+    command: 'removeFormat',
+    icon: 'ban-outline',
+    label: 'Clear format',
+    kind: 'action',
+  },
+  { command: 'undo', icon: 'ArrowBackAlt', label: 'Undo', kind: 'action' },
+  { command: 'redo', icon: 'ArrowForwardAlt', label: 'Redo', kind: 'action' },
+];
+
+export const TOGGLE_COMMANDS = TOOLBAR_BUTTONS.filter(
+  (button) => !button.isSpecial && (button.kind ?? 'toggle') === 'toggle'
+).map((button) => button.command);
+
+export const BLOCK_COMMANDS = TOOLBAR_BUTTONS.filter(
+  (button) => button.kind === 'block'
+).map((button) => button.command);

package/src/TextEditor/types.tsx

@@ -1,7 +1,70 @@
+import type { IconNameProps } from '../Icon';
+
 export interface TextEditorType {
   label?: string;
   hint?: string;
   hasError?: boolean;
   onChange?: (data: string) => void;
   height?: number;
+  testID?: string;
+}
+
+export interface TextEditorRef {
+  getContent: () => void;
+  setContent: (html: string) => void;
+  clearContent: () => void;
+}
+
+export interface ExtendedTextEditorType extends TextEditorType {
+  initialValue?: string;
+  placeholder?: string;
+  maxLength?: number;
+  onFocus?: () => void;
+  onBlur?: () => void;
+  inputLabelLinkText?: string;
+  inputLinkTextPlacholder?: string;
+  inputLabelLinkUrl?: string;
+  inputLinkUrlPlacholder?: string;
+  saveLinkButtonText?: string;
+  cancelLinkButtonText?: string;
+  /**
+   * Gates the floating toolbar. When true (default) it appears while this
+   * editor holds the caret and the keyboard is open. When false it stays away
+   * regardless -- it does not force the toolbar open on its own.
+   */
+  showToolbar?: boolean;
+}
+
+export type TextCommand =
+  | 'bold'
+  | 'italic'
+  | 'underline'
+  | 'strikeThrough'
+  | 'link'
+  | 'insertUnorderedList'
+  | 'insertOrderedList'
+  | 'justifyLeft'
+  | 'justifyCenter'
+  | 'justifyRight'
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'undo'
+  | 'redo'
+  | 'removeFormat';
+
+export interface ToolbarButton {
+  command: TextCommand;
+  /** Rendered as an icon, or as `text` when no icon fits (the headings). */
+  icon?: IconNameProps;
+  text?: string;
+  label: string;
+  /**
+   * toggle  - on/off, answered by queryCommandState
+   * block   - a block name compared against queryCommandValue('formatBlock')
+   * action  - fires and forgets; never lights up
+   * special - opens the link sheet instead of running a command
+   */
+  kind?: 'toggle' | 'block' | 'action' | 'special';
+  isSpecial?: boolean;
 }

package/src/Timeline/README.md

@@ -41,6 +41,7 @@ export default function OrderHistory() {
 | Prop       | Type        | Wajib | Default | Deskripsi                          |
 | ---------- | ----------- | ----- | ------- | ---------------------------------- |
 | `children` | `ReactNode` | ✅    | —       | Satu atau beberapa `TimelineItem`. |
+| `testID`   | `string`    | ❌    | —       | ID untuk automation testing (Maestro/Detox/Appium). Diterapkan langsung ke elemen akar, tanpa suffix. |
 
 ### TimelineItem
 
@@ -49,6 +50,7 @@ export default function OrderHistory() {
 | `children` | `ReactNode`                                                                       | ✅    | —           | Konten untuk node timeline: teks, ikon tambahan, dsb.            |
 | `color`    | `'primary' \| 'success' \| 'warning' \| 'danger' \| 'purple'\| 'info'\| 'orange'` | ❌    | `'primary'` | Skema warna titik (`RadioButton`) dan garis vertikal.            |
 | `isLast`   | `boolean`                                                                         | ❌    | `false`     | Menentukan apakah garis garis di kiri itu dimunculkan atau tidak |
+| `testID`   | `string`                                                                          | ❌    | —           | ID untuk automation testing (Maestro/Detox/Appium). Diterapkan langsung ke elemen akar, tanpa suffix. |
 
 ## ⚙️ Cara Kerja
 

package/src/Timeline/Timeline.tsx

@@ -2,10 +2,15 @@ import { StyleSheet, View } from 'react-native';
 
 interface Timeline {
   children: React.ReactNode;
+  testID?: string;
 }
 
-export default function Timeline({ children }: Timeline) {
-  return <View style={styles.gap14}>{children}</View>;
+export default function Timeline({ children, testID }: Timeline) {
+  return (
+    <View testID={testID} style={styles.gap14}>
+      {children}
+    </View>
+  );
 }
 
 const styles = StyleSheet.create({