@herca/rn-kit 0.1.25 → 0.1.27

package/src/Input/InputOtp.tsx

@@ -1,5 +1,5 @@
-import React, { useRef } from 'react';
-import { View, TextInput, StyleSheet } from 'react-native';
+import React, { useRef, useState } from 'react';
+import { StyleSheet, TextInput, View } from 'react-native';
 import Color from '../Color/Color';
 import LabelForm from '../LabelForm/LabelForm';
 import Typography from '../Typography/Typography';
@@ -10,6 +10,7 @@ type InputOtpProps = {
   label?: string;
   hint?: string;
   hasError?: boolean;
+  inputCenter?: boolean;
 };
 
 const InputOtp: React.FC<InputOtpProps> = ({
@@ -18,9 +19,15 @@ const InputOtp: React.FC<InputOtpProps> = ({
   label,
   hint,
   hasError,
+  inputCenter = false,
 }) => {
   const inputs = useRef<Array<TextInput | null>>([]);
   const values = useRef<string[]>(Array(length).fill(''));
+  const [useFlexGrow, setUseFlexGrow] = useState<boolean>(false);
+
+  const containerWidth = useRef(0);
+  const itemWidth = 48;
+  const itemGap = 10;
 
   const handleChange = (text: string, index: number) => {
     values.current[index] = text;
@@ -44,7 +51,18 @@ const InputOtp: React.FC<InputOtpProps> = ({
   return (
     <View style={styles.gap4}>
       {label ? <LabelForm title={label} /> : null}
-      <View style={styles.container}>
+      <View
+        style={[
+          styles.container,
+          { justifyContent: inputCenter ? 'center' : 'flex-start' },
+        ]}
+        onLayout={(e) => {
+          // cek apakah lebar container itu cukup untuk menampilkan semua input
+          containerWidth.current = e.nativeEvent.layout.width;
+          const totalNeededWidth = length * itemWidth + (length - 1) * itemGap;
+          setUseFlexGrow(totalNeededWidth > containerWidth.current);
+        }}
+      >
         {Array(length)
           .fill(0)
           .map((_, i) => (
@@ -52,19 +70,26 @@ const InputOtp: React.FC<InputOtpProps> = ({
               key={i}
               style={[
                 styles.input,
-                { borderColor: hasError ? Color.danger[500] : Color.gray[200] },
+                // eslint-disable-next-line react-native/no-inline-styles
+                {
+                  borderColor: hasError ? Color.danger[500] : Color.gray[200],
+                  width: useFlexGrow ? undefined : itemWidth, //jika cukup gunakan 48px
+                  flexGrow: useFlexGrow ? 1 : 0, //jika tidak cukup, flexgrow 0
+                },
               ]}
               keyboardType="number-pad"
               maxLength={1}
               onChangeText={(text) => handleChange(text, i)}
               onKeyPress={(e) => handleKeyPress(e, i)}
-              ref={(ref) => void (inputs.current[i] = ref)}
+              ref={(ref) => {
+                inputs.current[i] = ref;
+              }}
             />
           ))}
       </View>
 
       {hint ? (
-        <Typography color={hasError ? Color.danger[500] : ''} variant="t2">
+        <Typography color={hasError ? Color.danger[500] : ''} variant="t3">
           {hint}
         </Typography>
       ) : null}
@@ -81,16 +106,15 @@ const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
     gap: 10,
-    justifyContent: 'space-between',
   },
   input: {
-    width: 48,
+    flexGrow: 1,
     height: 48,
     borderWidth: 1,
     borderRadius: 8,
     textAlign: 'center',
     color: Color.base.black100,
     fontSize: 12,
-    fontWeight: 'medium',
+    fontWeight: 500,
   },
 });

package/src/Input/README_INPUT_OTP.md

@@ -0,0 +1,60 @@
+# InputOtp Component
+
+`InputOtp` adalah komponen React Native untuk input kode OTP (One-Time Password) dengan tampilan kotak-kotak input terpisah. Komponen ini responsif dan otomatis menyesuaikan ukuran input berdasarkan lebar container agar tampil rapi di berbagai ukuran layar.
+
+---
+
+## Fitur
+
+- Menampilkan sejumlah input kotak sesuai panjang OTP (`length`).
+- Input numeric 1 karakter per kotak.
+- Fokus otomatis berpindah ke kotak berikutnya saat input.
+- Fokus kembali ke kotak sebelumnya saat tekan backspace pada kotak kosong.
+- Responsif: menggunakan lebar statis jika cukup ruang, atau `flexGrow` jika ruang terbatas.
+- Label dan hint opsional.
+- Warna border berubah saat error (`hasError`).
+
+---
+
+## Instalasi
+
+Salin file `InputOtp.tsx` ke proyek React Native Anda dan import sesuai kebutuhan.
+
+---
+
+## Props
+
+| Nama          | Tipe                    | Default | Deskripsi                                                                                |
+| ------------- | ----------------------- | ------- | ---------------------------------------------------------------------------------------- |
+| `length`      | `number`                | 6       | Jumlah kotak input OTP yang ingin ditampilkan                                            |
+| `onChange`    | `(otp: string) => void` | -       | Callback saat isi OTP berubah, menerima OTP lengkap sebagai string                       |
+| `label`       | `string`                | -       | Label yang tampil di atas kotak input                                                    |
+| `hint`        | `string`                | -       | Pesan kecil di bawah input (misal instruksi atau error)                                  |
+| `hasError`    | `boolean`               | false   | Jika `true`, border input berubah warna merah (indikasi error)                           |
+| `inputCenter` | `boolean`               | false   | Jika `true`, maka seluruh input field akan memposisikan diri ke tengah secara horizontal |
+
+---
+
+## Contoh Penggunaan
+
+```tsx
+import React, { useState } from 'react';
+import { View } from 'react-native';
+import InputOtp from './InputOtp';
+
+export default function OtpVerificationScreen() {
+  const [otp, setOtp] = useState('');
+
+  return (
+    <View style={{ padding: 16 }}>
+      <InputOtp
+        length={6}
+        label="Masukkan Kode OTP"
+        hint="Kode akan dikirim via SMS"
+        hasError={otp.length < 6}
+        onChange={setOtp}
+      />
+    </View>
+  );
+}
+```

package/src/Input/type.tsx

@@ -12,6 +12,7 @@ export interface InputProps extends TextInputProps {
   onPressIconRight?: (val?: GestureResponderEvent) => void;
   onChangeText?: (val: string) => void;
   secureTextEntry?: boolean;
+  iconRightColor?: string;
 }
 
 export interface TextAreaProps extends InputProps {

package/src/TextEditor/TextEditor.tsx

@@ -1,5 +1,224 @@
-import { View } from 'react-native';
+import { useRef, useState, useEffect } from 'react';
+import {
+  View,
+  StyleSheet,
+  Platform,
+  KeyboardAvoidingView,
+  TouchableOpacity,
+  Keyboard,
+  type KeyboardEvent,
+} from 'react-native';
+import { WebView } from 'react-native-webview';
+import Color from '../Color/Color';
+import type { TextEditorType } from './types';
+import LabelForm from '../LabelForm/LabelForm';
+import Typography from '../Typography/Typography';
+import Icon from '../Icon';
 
-export default function TextEditor() {
-  return <View></View>;
+export default function TextEditor({
+  label,
+  hasError,
+  hint,
+  onChange,
+  height = 300,
+}: TextEditorType) {
+  const [keyboardHeight, setKeyboardHeight] = useState(0);
+  const [showToolbar, setShowToolbar] = useState<boolean>(false);
+  const webviewRef = useRef<WebView>(null);
+  const handleOnChange = (data: string) => {
+    onChange?.(data);
+  };
+
+  const htmlEditor = `
+    <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;
+          }
+          #editor {
+            min-height: ${height};
+            width: 100%;
+            max-width: 100%;
+            padding: 12px;
+            font-size: 12px;
+            border: 1px solid ${Color.gray[200]};
+            border-radius: 6px;
+            outline: none;
+            transition: border 0.2s;
+            overflow-wrap: break-word;
+            font-weight: 500;
+            word-wrap: break-word;
+            word-break: break-word;
+          }
+          #editor.focused {
+            border-color: ${Color.gray[200]}
+          }
+        </style>
+      </head>
+      <body>
+        <div id="editor" contenteditable="true">Tulis sesuatu di sini...</div>
+        <script>
+          const editor = document.getElementById("editor");
+          
+          editor.addEventListener("focus", () => {
+            editor.classList.add("focused");
+          });
+
+          editor.addEventListener("blur", () => {
+            editor.classList.remove("focused");
+          });
+          const handleMessage = (command) => {
+            if (command === 'getContent') {
+              window.ReactNativeWebView.postMessage(editor.innerHTML);
+            } else {
+              editor.focus();
+              document.execCommand(command, false, '');
+            }
+          };
+
+          // ini untuk Android
+          document.addEventListener("message", (event) => {
+            handleMessage(event.data);
+          });
+
+          // ini untuk iOS
+          window.addEventListener("message", (event) => {
+            handleMessage(event.data);
+          });
+        </script>
+      </body>
+    </html>
+  `;
+
+  const formatText = (command: string) => {
+    if (webviewRef.current) {
+      if (Platform.OS === 'ios') {
+        webviewRef.current.injectJavaScript(`
+          document.execCommand('${command}', false, '');
+          true; //di ios harus biar berfunsi boldnya
+        `);
+      } else {
+        webviewRef.current.postMessage(command);
+      }
+    }
+  };
+
+  useEffect(() => {
+    const showSub = Keyboard.addListener(
+      'keyboardDidShow',
+      (e: KeyboardEvent) => {
+        if (Platform.OS === 'ios')
+          setKeyboardHeight(e.endCoordinates.height - 35);
+        setShowToolbar(true);
+      }
+    );
+    const hideSub = Keyboard.addListener('keyboardDidHide', () => {
+      if (Platform.OS === 'ios') setKeyboardHeight(0);
+      setShowToolbar(false);
+    });
+
+    return () => {
+      showSub.remove();
+      hideSub.remove();
+    };
+  }, []);
+
+  return (
+    <View style={styles.container}>
+      {label ? <LabelForm title={label} /> : null}
+      <KeyboardAvoidingView
+        style={(styles.editorWrapper, [{ minHeight: height }])}
+        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+      >
+        <WebView
+          ref={webviewRef}
+          originWhitelist={['*']}
+          source={{ html: htmlEditor }}
+          onMessage={(event) => {
+            handleOnChange(event.nativeEvent.data);
+          }}
+          style={styles.webview}
+          javaScriptEnabled={true}
+          domStorageEnabled={true}
+          mixedContentMode="always"
+          allowUniversalAccessFromFileURLs={true}
+          allowFileAccess={true}
+        />
+      </KeyboardAvoidingView>
+
+      {hint ? (
+        <Typography
+          color={hasError ? Color.danger[500] : Color.gray[700]}
+          variant="t3"
+          weight="medium"
+        >
+          {hint}
+        </Typography>
+      ) : null}
+
+      {showToolbar ? (
+        <View style={[styles.toolbar, { bottom: keyboardHeight }]}>
+          <TouchableOpacity
+            onPress={() => formatText('bold')}
+            style={styles.toolButton}
+          >
+            <Icon name="Bold" />
+          </TouchableOpacity>
+          <TouchableOpacity
+            onPress={() => formatText('italic')}
+            style={styles.toolButton}
+          >
+            <Icon name="Italic" />
+          </TouchableOpacity>
+          <TouchableOpacity
+            onPress={() => formatText('underline')}
+            style={styles.toolButton}
+          >
+            <Icon name="UnderLine" />
+          </TouchableOpacity>
+        </View>
+      ) : null}
+    </View>
+  );
 }
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: '#fff',
+    gap: 4,
+    position: 'relative',
+  },
+  editorWrapper: { flex: 1 },
+  toolbar: {
+    flexDirection: 'row',
+    borderTopWidth: 1,
+    borderColor: Color.gray[200],
+    paddingVertical: 8,
+    paddingHorizontal: 10,
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    width: '100%',
+    alignItems: 'center',
+  },
+  toolButton: {
+    padding: 8,
+    marginHorizontal: 4,
+    borderRadius: 6,
+  },
+  toolText: {
+    fontWeight: 'bold',
+  },
+  webview: { flex: 1 },
+});

package/src/TextEditor/types.tsx

@@ -0,0 +1,7 @@
+export interface TextEditorType {
+  label?: string;
+  hint?: string;
+  hasError?: boolean;
+  onChange?: (data: string) => void;
+  height?: number;
+}

package/src/index.tsx

@@ -9,6 +9,7 @@ export { default as AccordionItem } from './Accordion/AccordionItem';
 export type { AccordionRenderHeaderProps } from './Accordion/type';
 export { default as Button } from './Button/Button';
 export { default as Color } from './Color/Color';
+export type { ColorVariantType } from './Color/type';
 export { default as Typography } from './Typography/Typography';
 export type {
   fontSizeMap,
@@ -42,9 +43,9 @@ export { default as InputOtp } from './Input/InputOtp';
 export { default as Switch } from './Input/Switch';
 export { default as CheckBox } from './CheckBox/CheckBox';
 export { default as CheckBoxList } from './CheckBox/CheckBoxList';
-export { default as CounterButton } from './CounterButton/CounterButton';
 export { default as RadioButton } from './RadioButton/RadioButton';
 export { default as Icon } from './Icon/Icon';
+export type { IconNameProps } from './Icon/type';
 export { default as Modal } from './Modal/Modal';
 export { default as Label } from './Label/Label';
 export { default as List } from './List/List';
@@ -53,6 +54,12 @@ export { default as Loading } from './Loading/Loading';
 export { default as Avatar } from './Avatar/Avatar';
 export { default as AvatarGroup } from './Avatar/AvatarGroup';
 export { default as Badge } from './Badge/Badge';
+export type {
+  Variant as BadgeVariant,
+  Size as BadgeSize,
+  HexColor as BadgeColor,
+  SizeStyle as BadgeSizeStyle,
+} from './Badge/type';
 export { default as Alert } from './Alert/Alert';
 export { default as Timeline } from './Timeline/Timeline';
 export { default as TimelineItem } from './Timeline/TimelineItem';