@herca/rn-kit 0.1.0

package/src/Input/InputFile.tsx

@@ -0,0 +1,320 @@
+import { Image, StyleSheet, TouchableOpacity, View } from 'react-native';
+import Button from '../Button/Button';
+import Color from '../Color/Color';
+import Card from '../Ui/Card';
+import Center from '../Ui/Center';
+import Typography from '../Typography/Typography';
+import BottomSheet from '../BottomSheet/BottomSheet';
+import { useState } from 'react';
+import List from '../List/List';
+import ListItem from '../List/ListItem';
+
+import { pick } from '@react-native-documents/picker';
+import { viewDocument } from '@react-native-documents/viewer';
+import { launchCamera, launchImageLibrary } from 'react-native-image-picker';
+import Icon from '../Icon';
+
+type InputFileProps = {
+  title?: string;
+  description?: string;
+  maxFileSize?: number;
+  accept?: string[];
+  multiple?: boolean;
+  onChange?: (files: any[]) => void;
+};
+
+export default function InputFile({
+  title = 'Upload File',
+  description = 'File harus berformat JPG, PNG dan PDF',
+  maxFileSize = 5,
+  accept = ['application/pdf', 'image/jpeg', 'image/png'],
+  multiple = false,
+  onChange,
+}: InputFileProps) {
+  const [isOpenBottomSheetTypeFile, setIsOpenBottomSheetTypeFile] =
+    useState(false);
+  const [isOpenBottomSheetDeleteFile, setIsOpenBottomSheetDeleteFile] =
+    useState(false);
+  const [files, setFiles] = useState<any[]>([]);
+  const [selectedFileIndex, setSelectedFileIndex] = useState<number | null>(
+    null
+  );
+
+  const handleOnPresChoseFile = () => {
+    setIsOpenBottomSheetTypeFile(true);
+  };
+
+  const handlePickFile = async () => {
+    try {
+      const result = await pick({ type: accept, multiple });
+      const pickedFiles = multiple ? result : [result[0]];
+      const newFiles = [...files, ...pickedFiles];
+      setFiles(newFiles);
+      onChange?.(newFiles);
+      setIsOpenBottomSheetTypeFile(false);
+    } catch (error: any) {
+      if (error?.message?.toLowerCase().includes('user canceled')) return;
+      console.error('Failed to pick document:', error);
+    }
+  };
+
+  const handlePreviewFile = (file: any) => {
+    if (file?.uri) {
+      viewDocument(file.uri);
+    }
+  };
+
+  const handleOnPressButtonCamera = async () => {
+    try {
+      const result = await launchCamera({ mediaType: 'photo' });
+      if (result.didCancel || !result.assets) return;
+      const newFiles = [...files, result.assets[0]];
+      setFiles(newFiles);
+      onChange?.(newFiles);
+      setIsOpenBottomSheetTypeFile(false);
+    } catch (error: any) {
+      console.error('Failed to open camera:', error);
+    }
+  };
+
+  const handleOnPressButtonGallery = async () => {
+    try {
+      const result = await launchImageLibrary({
+        mediaType: 'photo',
+        selectionLimit: multiple ? 0 : 1,
+      });
+      if (result.didCancel || !result.assets) return;
+      const newFiles = [...files, ...result.assets];
+      setFiles(newFiles);
+      onChange?.(newFiles);
+      setIsOpenBottomSheetTypeFile(false);
+    } catch (error: any) {
+      console.error('Failed to open gallery:', error);
+    }
+  };
+
+  const confirmDeleteFile = (index: number) => {
+    setSelectedFileIndex(index);
+    setIsOpenBottomSheetDeleteFile(true);
+  };
+
+  const deleteFile = () => {
+    if (selectedFileIndex !== null) {
+      const newFiles = files.filter((_, i) => i !== selectedFileIndex);
+      setFiles(newFiles);
+      onChange?.(newFiles);
+      setSelectedFileIndex(null);
+    }
+    setIsOpenBottomSheetDeleteFile(false);
+  };
+
+  return (
+    <View style={styles.wrapper}>
+      <Card style={styles.containerInput}>
+        <Center style={styles.centerInput}>
+          <Image source={require('./assets/input-file.png')} />
+          <Typography variant="t1" weight="semibold" color={Color.gray[500]}>
+            {title}
+          </Typography>
+          <Typography variant="t3" weight="regular" color={Color.gray[500]}>
+            {description}
+          </Typography>
+          <Button
+            color="primary"
+            title="Choose File"
+            onPress={handleOnPresChoseFile}
+          />
+        </Center>
+      </Card>
+
+      {files.map((file, index) => (
+        <Card key={index}>
+          <TouchableOpacity onPress={() => handlePreviewFile(file)}>
+            <View style={styles.containerPreview}>
+              <View style={styles.containerListItem}>
+                <Image
+                  source={
+                    file.uri?.endsWith('.pdf')
+                      ? require('../Input/assets/input-file.png')
+                      : { uri: file.uri }
+                  }
+                  style={styles.previewImage}
+                />
+                <View style={styles.fileDetails}>
+                  <Typography
+                    variant="t1"
+                    weight="semibold"
+                    color={Color.gray[600]}
+                  >
+                    {file.name || `Image_${index + 1}`}
+                  </Typography>
+                  <Typography
+                    variant="t2"
+                    weight="regular"
+                    color={Color.gray[600]}
+                  >
+                    {(file.size / (1024 * 1024)).toFixed(2)} MB
+                  </Typography>
+                </View>
+              </View>
+              <Button
+                variant="tertiary"
+                title="X"
+                onPress={() => confirmDeleteFile(index)}
+              />
+            </View>
+          </TouchableOpacity>
+        </Card>
+      ))}
+
+      <BottomSheet
+        isOpen={isOpenBottomSheetTypeFile}
+        onClose={() => setIsOpenBottomSheetTypeFile(false)}
+      >
+        <View style={styles.bottomSheetContent}>
+          <Center style={styles.bottomSheetCenter}>
+            <Typography variant="p2" weight="semibold" color={Color.gray[800]}>
+              Upload Dokumen
+            </Typography>
+            <Typography variant="t1" weight="regular" color={Color.gray[800]}>
+              Unggah dokumen maksimal {maxFileSize}MB
+            </Typography>
+          </Center>
+          <List>
+            <ListItem>
+              <TouchableOpacity onPress={handleOnPressButtonCamera}>
+                <View style={styles.containerListItem}>
+                  <Icon name="Camera" color={Color.primary[1000]} />
+                  <View>
+                    <Typography
+                      variant="t2"
+                      weight="semibold"
+                      color={Color.gray[800]}
+                    >
+                      Ambil Foto
+                    </Typography>
+                    <Typography variant="t2" color={Color.gray[600]}>
+                      Langsung ambil gambar dari kamera
+                    </Typography>
+                  </View>
+                </View>
+              </TouchableOpacity>
+            </ListItem>
+            <ListItem>
+              <TouchableOpacity onPress={handleOnPressButtonGallery}>
+                <View style={styles.containerListItem}>
+                  <Icon name="Image" color={Color.primary[1000]} />
+                  <View>
+                    <Typography
+                      variant="t2"
+                      weight="semibold"
+                      color={Color.gray[800]}
+                    >
+                      Pilih dari Galeri
+                    </Typography>
+                    <Typography variant="t2" color={Color.gray[600]}>
+                      Cari gambar dari galeri perangkatmu
+                    </Typography>
+                  </View>
+                </View>
+              </TouchableOpacity>
+            </ListItem>
+            <ListItem>
+              <TouchableOpacity onPress={handlePickFile}>
+                <View style={styles.containerListItem}>
+                  <Icon name="Document" color={Color.primary[1000]} />
+                  <View>
+                    <Typography
+                      variant="t2"
+                      weight="semibold"
+                      color={Color.gray[800]}
+                    >
+                      Pilih dari Dokumen
+                    </Typography>
+                    <Typography variant="t2" color={Color.gray[600]}>
+                      Cari file dari penyimpanan dokumen
+                    </Typography>
+                  </View>
+                </View>
+              </TouchableOpacity>
+            </ListItem>
+          </List>
+        </View>
+      </BottomSheet>
+
+      <BottomSheet
+        isOpen={isOpenBottomSheetDeleteFile}
+        onClose={() => setIsOpenBottomSheetDeleteFile(false)}
+      >
+        <View style={styles.deleteFileContent}>
+          <Center style={styles.deleteFileCenter}>
+            <Typography variant="p2" weight="semibold" color={Color.gray[800]}>
+              Hapus Dokumen
+            </Typography>
+            <Typography variant="t1" weight="regular" color={Color.gray[500]}>
+              Apakah kamu akan menghapus dokumen yang dipilih?
+            </Typography>
+          </Center>
+          <View>
+            <Button
+              color="danger"
+              title="Ya, Hapus File"
+              onPress={deleteFile}
+            />
+            <Button
+              color="primary"
+              variant="tertiary"
+              title="Batal"
+              onPress={() => setIsOpenBottomSheetDeleteFile(false)}
+            />
+          </View>
+        </View>
+      </BottomSheet>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrapper: {
+    gap: 12,
+  },
+  containerInput: {
+    borderStyle: 'dashed',
+    backgroundColor: Color.gray[100],
+  },
+  centerInput: {
+    gap: 14,
+  },
+  containerPreview: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    gap: 8,
+  },
+  previewImage: {
+    width: 44,
+    height: 44,
+    borderRadius: 6,
+  },
+  fileDetails: {
+    justifyContent: 'center',
+    gap: 8,
+  },
+  containerListItem: {
+    flexDirection: 'row',
+    gap: 8,
+  },
+  bottomSheetContent: {
+    gap: 16,
+  },
+  bottomSheetCenter: {
+    alignItems: 'center',
+  },
+  deleteFileContent: {
+    gap: 10,
+  },
+  deleteFileCenter: {
+    alignItems: 'center',
+    gap: 4,
+  },
+});

package/src/Input/InputMonth.tsx

@@ -0,0 +1 @@
+export default function InputMonth() {}

package/src/Input/InputOtp.tsx

@@ -0,0 +1,96 @@
+import React, { useRef } from 'react';
+import { View, TextInput, StyleSheet } from 'react-native';
+import Color from '../Color/Color';
+import LabelForm from '../LabelForm/LabelForm';
+import Typography from '../Typography/Typography';
+
+type InputOtpProps = {
+  length?: number;
+  onChange?: (otp: string) => void;
+  label?: string;
+  hint?: string;
+  hasError?: boolean;
+};
+
+const InputOtp: React.FC<InputOtpProps> = ({
+  length = 6,
+  onChange,
+  label,
+  hint,
+  hasError,
+}) => {
+  const inputs = useRef<Array<TextInput | null>>([]);
+  const values = useRef<string[]>(Array(length).fill(''));
+
+  const handleChange = (text: string, index: number) => {
+    values.current[index] = text;
+    onChange?.(values.current.join(''));
+
+    if (text && index < length - 1) {
+      inputs.current[index + 1]?.focus();
+    }
+  };
+
+  const handleKeyPress = (e: any, index: number) => {
+    if (
+      e.nativeEvent.key === 'Backspace' &&
+      !values.current[index] &&
+      index > 0
+    ) {
+      inputs.current[index - 1]?.focus();
+    }
+  };
+
+  return (
+    <View style={styles.gap4}>
+      {label ? <LabelForm title={label} /> : null}
+      <View style={styles.container}>
+        {Array(length)
+          .fill(0)
+          .map((_, i) => (
+            <TextInput
+              key={i}
+              style={[
+                styles.input,
+                { borderColor: hasError ? Color.danger[500] : Color.gray[200] },
+              ]}
+              keyboardType="number-pad"
+              maxLength={1}
+              onChangeText={(text) => handleChange(text, i)}
+              onKeyPress={(e) => handleKeyPress(e, i)}
+              ref={(ref) => void (inputs.current[i] = ref)}
+            />
+          ))}
+      </View>
+
+      {hint ? (
+        <Typography color={hasError ? Color.danger[500] : ''} variant="t2">
+          {hint}
+        </Typography>
+      ) : null}
+    </View>
+  );
+};
+
+export default InputOtp;
+
+const styles = StyleSheet.create({
+  gap4: {
+    gap: 4,
+  },
+  container: {
+    flexDirection: 'row',
+    gap: 10,
+    justifyContent: 'space-between',
+  },
+  input: {
+    width: 48,
+    height: 48,
+    borderWidth: 1,
+    borderRadius: 8,
+    textAlign: 'center',
+    color: Color.base.black100,
+    fontSize: 12,
+    fontWeight: 'medium',
+  },
+});

package/src/Input/InputPassword.tsx

@@ -0,0 +1,31 @@
+import { useState } from 'react';
+import { View } from 'react-native';
+import Input from './Input';
+import type { TextInputProps } from 'react-native';
+import type { IconNameProps } from '../Icon/type';
+
+interface InputPasswordProps extends TextInputProps {
+  icon?: IconNameProps;
+  iconRight?: IconNameProps;
+  clearButton?: boolean;
+  label?: string;
+  hint?: string;
+  hasError?: boolean;
+  onPressIconLeft?: () => void;
+  onPressIconRight?: () => void;
+}
+
+export default function InputPassword(props: InputPasswordProps) {
+  const [secureText, setSecureText] = useState(true);
+
+  return (
+    <View>
+      <Input
+        {...props}
+        iconRight={secureText ? 'Eye' : 'EyeOpen'}
+        secureTextEntry={secureText}
+        onPressIconRight={() => setSecureText(!secureText)}
+      />
+    </View>
+  );
+}

package/src/Input/InputSelect.tsx

@@ -0,0 +1,5 @@
+import { View } from 'react-native';
+
+export default function InputSelect() {
+  return <View></View>;
+}

package/src/Input/Switch.tsx

@@ -0,0 +1,111 @@
+import { Animated, Pressable, StyleSheet, View, Easing } from 'react-native';
+import { useEffect, useRef, useState } from 'react';
+import LabelForm from '../LabelForm/LabelForm';
+import Typography from '../Typography/Typography';
+import Color from '../Color/Color';
+
+interface SwitchProps {
+  label?: string;
+  dotColor?: string;
+  value?: boolean;
+  onChange?: (newValue: boolean) => void;
+  hint?: string;
+  hasError?: true;
+  disabled?: boolean;
+}
+
+export default function Switch({
+  label,
+  dotColor,
+  value: defaultValue = false,
+  onChange,
+  hint,
+  hasError,
+  disabled = false,
+}: SwitchProps) {
+  const [value, setValue] = useState<boolean>(defaultValue);
+  const animValue = useRef(new Animated.Value(defaultValue ? 1 : 0)).current;
+
+  useEffect(() => {
+    Animated.timing(animValue, {
+      toValue: value ? 1 : 0,
+      duration: 200,
+      easing: Easing.out(Easing.circle),
+      useNativeDriver: false,
+    }).start();
+  }, [value, animValue]);
+
+  useEffect(() => {
+    setValue(defaultValue);
+  }, [defaultValue]);
+
+  const handlePress = () => {
+    if (disabled) return;
+    const newValue = !value;
+    setValue(newValue);
+    onChange?.(newValue);
+  };
+
+  const translateX = animValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, 16],
+  });
+
+  const backgroundColor =
+    disabled && value
+      ? Color.primary[1000]
+      : disabled && !value
+        ? Color.gray[200]
+        : value
+          ? Color.primary[1000]
+          : Color.gray[300];
+
+  return (
+    <View style={{ gap: 4, opacity: disabled ? 0.5 : 1 }}>
+      {label ? <LabelForm title={label} /> : null}
+
+      <Pressable
+        style={styles.touchArea}
+        onPress={handlePress}
+        disabled={disabled}
+      >
+        <View style={[styles.track, { backgroundColor }]}>
+          <Animated.View
+            style={[
+              styles.circle,
+              {
+                transform: [{ translateX }],
+                backgroundColor: dotColor ? dotColor : Color.base.white100,
+              },
+            ]}
+          />
+        </View>
+      </Pressable>
+
+      {hint ? (
+        <Typography color={hasError ? Color.danger[500] : ''} variant="t2">
+          {hint}
+        </Typography>
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  touchArea: {},
+  track: {
+    width: 36,
+    height: 20,
+    padding: 2,
+    borderRadius: 10,
+    justifyContent: 'center',
+  },
+  circle: {
+    width: 16,
+    height: 16,
+    borderRadius: 8,
+    position: 'absolute',
+    top: 2,
+    left: 2,
+  },
+});

package/src/Input/TextArea.tsx

@@ -0,0 +1,67 @@
+import { StyleSheet, TextInput, View } from 'react-native';
+import LabelForm from '../LabelForm/LabelForm';
+import Color from '../Color/Color';
+import Typography from '../Typography/Typography';
+import type { TextAreaProps } from './type';
+
+export default function TextArea({
+  height = 116,
+  label,
+  hasError,
+  style,
+  hint,
+  onChangeText,
+}: TextAreaProps) {
+  const handleOnChangeText = (value: string) => {
+    onChangeText?.(value);
+  };
+
+  return (
+    <View style={styles.gap}>
+      {label ? <LabelForm title={label} /> : null}
+
+      <View
+        style={[
+          styles.container,
+          {
+            borderColor: hasError ? Color.danger[500] : Color.gray[100],
+            height,
+          },
+        ]}
+      >
+        <TextInput
+          onChangeText={handleOnChangeText}
+          editable
+          multiline
+          numberOfLines={14}
+          style={[styles.input, style]}
+          textAlignVertical="top"
+        />
+      </View>
+      {hint ? (
+        <Typography color={hasError ? Color.danger[500] : ''} variant="t2">
+          {hint}
+        </Typography>
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  gap: {
+    gap: 4,
+  },
+  container: {
+    position: 'relative',
+    borderRadius: 8,
+    borderWidth: 1,
+    backgroundColor: Color.base.white100,
+  },
+  input: {
+    fontSize: 14,
+    color: '#333',
+    padding: 12,
+    textAlignVertical: 'top',
+    flex: 1,
+  },
+});

package/src/Input/assets/Ilustrasi.svg

@@ -0,0 +1,14 @@
+<svg width="125" height="124" viewBox="0 0 125 124" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M62.7447 114.193C91.5843 114.193 115.083 90.7909 115.083 62.0485C114.986 33.2089 91.5843 9.80713 62.7447 9.80713C33.808 9.80713 10.4062 33.2089 10.4062 61.9514C10.4062 90.7909 33.808 114.193 62.7447 114.193Z" fill="#F1F3F9" stroke="#D6DCE8" stroke-width="1.94206" stroke-miterlimit="10"/>
+<path d="M118.192 68.6515C118.192 79.8184 109.161 88.8489 97.8973 88.8489C97.7031 88.8489 96.0523 88.8489 83.9145 88.8489C75.4665 88.8489 61.9692 88.8489 40.4124 88.8489H30.1195C16.6222 89.1402 5.84375 78.3618 5.84375 65.35C5.84375 52.2411 16.7193 41.3656 30.4108 42.0453C42.1602 5.34044 95.9552 10.4869 100.519 48.4541C110.618 49.7165 118.192 58.2615 118.192 68.6515Z" fill="white" stroke="#D6DCE8" stroke-width="1.94206" stroke-miterlimit="10"/>
+<path d="M100.221 48.5512C99.4442 48.4541 98.6674 48.4541 97.8906 48.4541C93.9094 48.4541 90.1224 49.6193 86.918 51.6585" fill="white"/>
+<path d="M100.221 48.5512C99.4442 48.4541 98.6674 48.4541 97.8906 48.4541C93.9094 48.4541 90.1224 49.6193 86.918 51.6585" stroke="#D6DCE8" stroke-width="1.94206" stroke-miterlimit="10" stroke-linecap="round"/>
+<path d="M30.408 42.0454C29.2428 45.5411 28.6602 49.231 28.6602 53.1151C28.6602 54.6688 28.7573 56.1253 28.9515 57.5819" fill="white"/>
+<path d="M30.408 42.0454C29.2428 45.5411 28.6602 49.231 28.6602 53.1151C28.6602 54.6688 28.7573 56.1253 28.9515 57.5819" stroke="#D6DCE8" stroke-width="1.94206" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M49.7312 66.9037C53.5182 64.4761 57.9849 63.1167 62.743 63.1167C75.7548 63.1167 86.339 73.6038 86.339 86.6156C86.339 99.6274 75.7548 110.114 62.743 110.114C49.7312 110.114 39.147 99.6274 39.147 86.6156C38.9528 78.3618 43.2253 71.1762 49.7312 66.9037Z" fill="#D6DCE8" stroke="#AAB2C5" stroke-width="1.94206" stroke-miterlimit="10"/>
+<path d="M62.5518 75.9346C62.9754 75.9346 63.4362 75.9942 63.8633 76.1543C64.2519 76.3 64.6614 76.5505 64.9521 76.9619L71.4922 83.501C72.6482 84.657 72.6482 86.6321 71.4922 87.7881C70.3155 88.9646 68.3689 88.91 67.1504 87.8271L67.1348 87.8135L67.1201 87.7988L65.7559 86.4785V94.8691C65.7559 96.5707 64.35 97.9766 62.6484 97.9766C60.9471 97.9763 59.542 96.5705 59.542 94.8691V86.4775L58.1885 87.7871C57.0117 88.9639 55.0652 88.9103 53.8467 87.8271L53.8057 87.7881C53.169 87.1514 52.8418 86.4283 52.8418 85.6445C52.8418 85.2857 52.9106 84.8683 53.0713 84.4756C53.2157 84.1225 53.463 83.7252 53.8662 83.4395L60.4082 76.8984C60.6459 76.6607 60.9824 76.4346 61.3164 76.2676C61.6384 76.1066 62.089 75.9346 62.5518 75.9346Z" fill="white" stroke="#AAB2C5" stroke-width="1.94206"/>
+<path d="M115.954 43.793C118.153 43.793 119.935 42.0106 119.935 39.8118C119.935 37.613 118.153 35.8306 115.954 35.8306C113.755 35.8306 111.973 37.613 111.973 39.8118C111.973 42.0106 113.755 43.793 115.954 43.793Z" fill="#F1F3F9"/>
+<path d="M121.777 28.2571C123.279 28.2571 124.496 27.0398 124.496 25.5382C124.496 24.0366 123.279 22.8193 121.777 22.8193C120.276 22.8193 119.059 24.0366 119.059 25.5382C119.059 27.0398 120.276 28.2571 121.777 28.2571Z" fill="#F1F3F9"/>
+<path d="M11.6681 37.1907C13.1697 37.1907 14.387 35.9734 14.387 34.4718C14.387 32.9702 13.1697 31.7529 11.6681 31.7529C10.1665 31.7529 8.94922 32.9702 8.94922 34.4718C8.94922 35.9734 10.1665 37.1907 11.6681 37.1907Z" fill="#F1F3F9"/>
+<path d="M5.54935 97.0059C8.33803 97.0059 10.5987 94.7453 10.5987 91.9566C10.5987 89.1679 8.33803 86.9072 5.54935 86.9072C2.76067 86.9072 0.5 89.1679 0.5 91.9566C0.5 94.7453 2.76067 97.0059 5.54935 97.0059Z" fill="#F1F3F9"/>
+</svg>

package/src/Input/type.tsx

@@ -0,0 +1,19 @@
+import type { GestureResponderEvent, TextInputProps } from 'react-native';
+import type { IconNameProps } from '../Icon';
+
+export interface InputProps extends TextInputProps {
+  icon?: IconNameProps;
+  iconRight?: IconNameProps;
+  label?: string | undefined;
+  clearButton?: boolean;
+  hasError?: boolean;
+  hint?: string;
+  onPressIconLeft?: (val?: GestureResponderEvent) => void;
+  onPressIconRight?: (val?: GestureResponderEvent) => void;
+  onChangeText?: (val: string) => void;
+  secureTextEntry?: boolean;
+}
+
+export interface TextAreaProps extends InputProps {
+  height?: number;
+}