@herca/rn-kit 0.1.0

package/src/Timeline/TimelineItem.tsx

@@ -0,0 +1,63 @@
+import { useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+import Color from '../Color/Color';
+import { Icon } from '../Icon';
+
+const COLOR_MAP = {
+  warning: Color.warning[400],
+  primary: Color.primary[900],
+  success: Color.success[500],
+  purple: Color.purple[500],
+  danger: Color.danger[500],
+};
+type ColorKey = keyof typeof COLOR_MAP;
+
+interface TimelineItemProps {
+  children: React.ReactNode;
+  color: ColorKey;
+}
+
+export default function TimelineItem({
+  children,
+  color = 'primary',
+}: TimelineItemProps) {
+  const [contentHeight, setContentHeight] = useState(0);
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.contentLeft}>
+        <Icon name="RadioButton" color={COLOR_MAP[color]} />
+        <View style={[styles.border, { height: contentHeight - 20 }]} />
+      </View>
+      <View
+        style={styles.flex}
+        onLayout={(e) => {
+          const { height } = e.nativeEvent.layout;
+          setContentHeight(height);
+        }}
+      >
+        <View>{children}</View>
+      </View>
+    </View>
+  );
+}
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+  },
+  contentLeft: {
+    alignItems: 'center',
+    marginRight: 8,
+  },
+  border: {
+    width: 1,
+    borderLeftWidth: 1,
+    borderLeftColor: Color.gray[400],
+    borderStyle: 'dashed',
+    marginTop: 4,
+  },
+  flex: {
+    flex: 1,
+  },
+});

package/src/Toast/Toast.tsx

@@ -0,0 +1,179 @@
+import { useRef, useEffect } from 'react';
+import { Animated, StyleSheet, View } from 'react-native';
+import Color from '../Color/Color';
+import Typography from '../Typography/Typography';
+import Icon, { type IconNameProps } from '../Icon';
+import Button from '../Button/Button';
+import Container from '../Ui/Container';
+
+type ToastColor =
+  | 'default'
+  | 'success'
+  | 'danger'
+  | 'primary'
+  | 'warning'
+  | 'info'
+  | 'purple'
+  | 'orange';
+
+const COLOR_MAP: Record<
+  ToastColor,
+  {
+    bg: string;
+    text: string;
+    border: string;
+  }
+> = {
+  primary: {
+    bg: Color.base.white100,
+    border: Color.gray[50],
+    text: Color.primary[1000],
+  },
+  default: {
+    bg: Color.gray[700],
+    border: Color.gray[700],
+    text: Color.base.white100,
+  },
+  success: {
+    bg: Color.success[50],
+    border: Color.success[50],
+    text: Color.success[500],
+  },
+  danger: {
+    bg: Color.danger[50],
+    border: Color.danger[50],
+    text: Color.danger[500],
+  },
+  warning: {
+    bg: Color.warning[50],
+    border: Color.warning[50],
+    text: Color.warning[400],
+  },
+  info: {
+    bg: Color.info[50],
+    border: Color.info[50],
+    text: Color.info[500],
+  },
+  orange: {
+    bg: Color.orange[50],
+    border: Color.orange[50],
+    text: Color.orange[500],
+  },
+  purple: {
+    bg: Color.purple[50],
+    border: Color.purple[50],
+    text: Color.purple[500],
+  },
+};
+
+interface ToastProps {
+  visible?: boolean;
+  duration?: number;
+  color?: ToastColor;
+  message?: string;
+  icon?: IconNameProps;
+  onClear?: (val: boolean) => void;
+  onHide?: (val: boolean) => void;
+}
+const Toast = ({
+  visible,
+  message,
+  duration = 3000,
+  onHide,
+  color = 'default',
+  icon = 'ExlamationMark',
+  onClear,
+}: ToastProps) => {
+  const fadeAnim = useRef(new Animated.Value(0)).current;
+  const validColors: ToastColor[] = [
+    'default',
+    'success',
+    'danger',
+    'primary',
+    'warning',
+    'info',
+    'purple',
+    'orange',
+  ];
+  const safeColor = validColors.includes(color) ? color : 'default';
+
+  const baseContainerStyle = StyleSheet.flatten({
+    backgroundColor: COLOR_MAP[safeColor].bg,
+    borderColor: COLOR_MAP[safeColor].border,
+  });
+
+  const handlePressClearButton = () => {
+    onClear?.(true);
+  };
+
+  useEffect(() => {
+    if (visible) {
+      Animated.sequence([
+        Animated.timing(fadeAnim, {
+          toValue: 1,
+          duration: 300,
+          useNativeDriver: true,
+        }),
+        Animated.delay(duration),
+        Animated.timing(fadeAnim, {
+          toValue: 0,
+          duration: 300,
+          useNativeDriver: true,
+        }),
+      ]).start(() => {
+        if (onHide) onHide(true);
+      });
+    }
+  }, [visible, duration, onHide, fadeAnim]);
+
+  if (!visible) return null;
+
+  return (
+    <Animated.View
+      style={[styles.toast, baseContainerStyle, { opacity: fadeAnim }]}
+    >
+      <Container>
+        <View style={styles.container}>
+          <View style={styles.content}>
+            <Icon name={icon} size={20} color={COLOR_MAP[safeColor].text} />
+            <Typography variant="t2" color={COLOR_MAP[safeColor].text}>
+              {message}
+            </Typography>
+          </View>
+          <Button
+            variant="tertiary"
+            size="small"
+            title="x"
+            onPress={handlePressClearButton}
+          >
+            <Icon name="Times" size={10} color={COLOR_MAP[safeColor].text} />
+          </Button>
+        </View>
+      </Container>
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  toast: {
+    position: 'absolute',
+    bottom: 80,
+    left: 28,
+    right: 28,
+    backgroundColor: '#333',
+    borderWidth: 1,
+    borderRadius: 8,
+    zIndex: 999,
+  },
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  content: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    gap: 8,
+  },
+});
+
+export default Toast;

package/src/Toast/ToastContext.tsx

@@ -0,0 +1,51 @@
+import { createContext, useContext, useState, type ReactNode } from 'react';
+import Toast from './Toast';
+import type { ColorVariantType } from '../Color/type';
+import type { IconNameProps } from '../Icon';
+
+interface ToastOptions {
+  color?: ColorVariantType;
+  icon?: IconNameProps;
+  duration?: number;
+}
+
+interface ToastContextType {
+  show: (message: string, options?: ToastOptions) => void;
+}
+
+const ToastContext = createContext<ToastContextType | undefined>(undefined);
+
+export const ToastProvider = ({ children }: { children: ReactNode }) => {
+  const [visible, setVisible] = useState(false);
+  const [message, setMessage] = useState<string>('');
+  const [options, setOptions] = useState<ToastOptions>({
+    icon: 'ExlamationMark',
+  });
+
+  const show = (msg: string, opts?: ToastOptions) => {
+    setMessage(msg);
+    setOptions(opts || {});
+    setVisible(true);
+  };
+
+  return (
+    <ToastContext.Provider value={{ show }}>
+      {children}
+      <Toast
+        visible={visible}
+        message={message}
+        onHide={() => setVisible(false)}
+        onClear={() => setVisible(false)}
+        color={options.color}
+        icon={options.icon}
+        duration={options.duration}
+      />
+    </ToastContext.Provider>
+  );
+};
+
+export const useToast = (): ToastContextType => {
+  const context = useContext(ToastContext);
+  if (!context) throw new Error('useToast must be used within a ToastProvider');
+  return context;
+};

package/src/Typography/README.md

@@ -0,0 +1,71 @@
+# ✍️ Typography Component
+
+Komponen `Typography` digunakan untuk menampilkan teks dengan berbagai ukuran, ketebalan, warna, dan perataan yang telah ditentukan.
+
+## ✨ Fitur
+
+- Mendukung berbagai varian teks (heading, paragraph, text kecil)
+- Dapat mengatur ketebalan teks (*weight*)
+- Mendukung warna kustom
+- Dukungan perataan: kiri, kanan, tengah
+- Mendukung pemotongan teks (`numberOfLines`)
+
+## 🧱 Props
+
+| Prop           | Tipe                          | Default     | Deskripsi                                                       |
+|----------------|-------------------------------|-------------|------------------------------------------------------------------|
+| `children`     | `React.ReactNode`             | -           | Isi teks yang akan ditampilkan                                  |
+| `variant`      | `'h1' \| 'h2' \| 'h3' \| 'h4' \| 'p1' \| 'p2' \| 'p3' \| 't1' \| 't2' \| 't3'` | `'p3'` | Ukuran dan gaya teks                                            |
+| `weight`       | `'regular' \| 'medium' \| 'semibold' \| 'bold'` | `'regular'` | Ketebalan huruf                                                 |
+| `color`        | `ColorValue`                  | `'default'` | Warna teks                                                      |
+| `style`        | `ViewStyle`                   | `undefined` | Gaya tambahan                                                   |
+| `numberOfLines`| `number`                      | `undefined` | Jumlah maksimal baris teks ditampilkan                          |
+| `center`       | `boolean`                     | `false`     | Mengatur teks ke tengah                                         |
+| `right`        | `boolean`                     | `false`     | Mengatur teks ke kanan                                          |
+| `left`         | `boolean`                     | `false`     | Mengatur teks ke kiri                                           |
+
+## 🔠 Varian & Ukuran
+
+| Variant | Font Size | Line Height |
+|---------|-----------|-------------|
+| h1      | 36        | 46          |
+| h2      | 32        | 42          |
+| h3      | 28        | 38          |
+| h4      | 24        | 34          |
+| p1      | 20        | 30          |
+| p2      | 18        | 28          |
+| p3      | 16        | 26          |
+| t1      | 14        | 14          |
+| t2      | 12        | 14          |
+| t3      | 10        | 14          |
+
+## 🧪 Contoh Penggunaan
+
+```tsx
+import React from 'react';
+import Typography from './Typography'; // sesuaikan path
+
+export default function Example() {
+  return (
+    <>
+      <Typography variant="h1" weight="bold" center>
+        Judul Utama
+      </Typography>
+
+      <Typography variant="p2" color="gray" numberOfLines={2}>
+        Ini adalah deskripsi yang akan terpotong jika melebihi dua baris.
+      </Typography>
+    </>
+  );
+}
+```
+
+## 🗂️ Struktur File
+
+```
+Typography.tsx
+├── Color/
+├── type.ts (berisi TypographyVariantProps)
+```
+
+Pastikan untuk menyesuaikan `Color` dan `type.ts` agar mendukung struktur tema Anda.

package/src/Typography/Typography.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { StyleSheet, Text, type TextStyle } from 'react-native';
+import Color from '../Color/Color';
+import {
+  fontSizeMap,
+  fontWeightMap,
+  lineHeightMap,
+  type TypographyProps,
+} from './type';
+
+const Typography: React.FC<TypographyProps> = ({
+  children,
+  variant = 'p3',
+  weight = 'regular',
+  color = 'default',
+  style,
+  numberOfLines,
+  center,
+  right,
+  left,
+}) => {
+  const textStyle: TextStyle = {
+    fontSize: fontSizeMap[variant],
+    lineHeight: lineHeightMap[variant],
+    fontWeight: fontWeightMap[weight],
+    color: color ? color : Color.primary[1000],
+    textAlign: center ? 'center' : right ? 'right' : left ? 'left' : undefined,
+  };
+
+  return (
+    <Text style={[styles.text, textStyle, style]} numberOfLines={numberOfLines}>
+      {children}
+    </Text>
+  );
+};
+
+export default Typography;
+
+const styles = StyleSheet.create({
+  text: {
+    flexWrap: 'wrap',
+    flexShrink: 1,
+  },
+});

package/src/Typography/type.tsx

@@ -0,0 +1,60 @@
+import type { ColorValue, StyleProp, TextStyle } from 'react-native';
+import React from 'react';
+export type TypographyVariantProps =
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'h4'
+  | 'p1'
+  | 'p2'
+  | 'p3'
+  | 't1'
+  | 't2'
+  | 't3';
+
+export type Weight = 'regular' | 'medium' | 'semibold' | 'bold';
+
+export const fontSizeMap: Record<TypographyVariantProps, number> = {
+  h1: 36,
+  h2: 32,
+  h3: 28,
+  h4: 24,
+  p1: 20,
+  p2: 18,
+  p3: 16,
+  t1: 14,
+  t2: 12,
+  t3: 10,
+};
+
+export const lineHeightMap: Record<TypographyVariantProps, number> = {
+  h1: 46,
+  h2: 42,
+  h3: 38,
+  h4: 34,
+  p1: 30,
+  p2: 28,
+  p3: 26,
+  t1: 24,
+  t2: 20,
+  t3: 14,
+};
+
+export const fontWeightMap: Record<Weight, TextStyle['fontWeight']> = {
+  regular: '400',
+  medium: '500',
+  semibold: '600',
+  bold: '700',
+};
+
+export interface TypographyProps {
+  children: React.ReactNode;
+  variant?: TypographyVariantProps;
+  weight?: Weight;
+  color?: ColorValue;
+  style?: StyleProp<TextStyle>;
+  numberOfLines?: number;
+  center?: boolean;
+  right?: boolean;
+  left?: boolean;
+}

package/src/Ui/Card.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import {
+  StyleSheet,
+  View,
+  ImageBackground,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import Color from '../Color/Color';
+
+interface CardProps {
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  backgroundImage?: any;
+  backgroundColor?: string;
+}
+
+export default function Card({
+  children,
+  style,
+  backgroundImage,
+  backgroundColor,
+}: CardProps) {
+  if (backgroundImage) {
+    return (
+      <ImageBackground
+        source={backgroundImage}
+        style={[styles.imageBackground, style]}
+        imageStyle={styles.imageStyle}
+      >
+        {children}
+      </ImageBackground>
+    );
+  }
+  return (
+    <View
+      style={[
+        styles.container,
+        style,
+        typeof backgroundColor === 'string' && { backgroundColor },
+      ]}
+    >
+      {children}
+    </View>
+  );
+}
+
+const sharedCardStyle = {
+  borderWidth: 1,
+  borderRadius: 8,
+  borderColor: Color.gray['100'],
+  padding: 10,
+};
+
+const styles = StyleSheet.create({
+  container: {
+    ...sharedCardStyle,
+    overflow: 'hidden',
+    backgroundColor: '#fff',
+  },
+  imageBackground: {
+    ...sharedCardStyle,
+  },
+  imageStyle: {
+    borderRadius: 8,
+  },
+  inner: {
+    padding: 10, // tetap kasih padding isi
+  },
+});

package/src/Ui/Center.tsx

@@ -0,0 +1,20 @@
+import { View, StyleSheet, type ViewStyle } from 'react-native';
+
+interface CenterProps {
+  children: React.ReactNode;
+  size?: number;
+  style?: ViewStyle;
+}
+
+const Center = ({ children, style }: CenterProps) => {
+  return <View style={[styles.center, style]}>{children}</View>;
+};
+
+const styles = StyleSheet.create({
+  center: {
+    alignContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default Center;

package/src/Ui/Col.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { View } from 'react-native';
+import { type ViewStyle } from 'react-native';
+
+interface ColProps {
+  children: React.ReactNode;
+  size?: number;
+  style?: ViewStyle;
+}
+
+const Col: React.FC<ColProps> = ({ children, size = 12, style }) => {
+  const widthPercent = (size / 12) * 100;
+
+  return <View style={[{ width: `${widthPercent}%` }, style]}>{children}</View>;
+};
+
+export default Col;

package/src/Ui/Container.tsx

@@ -0,0 +1,12 @@
+import { StyleSheet, View } from 'react-native';
+
+export default function Container({ children, style }: any) {
+  return <View style={[styles.container, style && style]}>{children}</View>;
+}
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: 24,
+    paddingVertical: 8,
+  },
+});

package/src/Ui/Devider.tsx

@@ -0,0 +1,15 @@
+import { View, StyleSheet } from 'react-native';
+import Color from '../Color/Color';
+
+const Divider = () => {
+  return <View style={styles.divider} />;
+};
+
+const styles = StyleSheet.create({
+  divider: {
+    height: 1,
+    backgroundColor: Color.gray[200],
+  },
+});
+
+export default Divider;

package/src/Ui/Footer.tsx

@@ -0,0 +1,37 @@
+import React, { useEffect } from 'react';
+import { StyleSheet, SafeAreaView } from 'react-native';
+import type { ViewStyle } from 'react-native';
+import Color from '../Color/Color';
+import { useFooter } from '../Provider/Provider';
+
+interface FooterProps {
+  children: React.ReactNode;
+  style?: ViewStyle;
+}
+const Footer: React.FC<FooterProps> = ({ children, style }) => {
+  const { setFooter } = useFooter();
+
+  useEffect(() => {
+    const footerElement = (
+      <SafeAreaView style={[styles.container, style]}>{children}</SafeAreaView>
+    );
+    setFooter(footerElement);
+
+    return () => setFooter(null);
+  }, [children, style, setFooter]);
+
+  return null;
+};
+
+export default Footer;
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: Color.base.white100,
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    zIndex: 10,
+  },
+});

package/src/Ui/Gap.tsx

@@ -0,0 +1,8 @@
+import { View } from 'react-native';
+import type { ReactNode } from 'react';
+
+const Gap = ({ children }: { children: ReactNode }) => {
+  return <View>{children}</View>;
+};
+
+export default Gap;

package/src/Ui/Grid.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import type { ViewStyle } from 'react-native';
+
+interface GridProps {
+  children: React.ReactNode;
+  style: ViewStyle;
+}
+
+const Grid: React.FC<GridProps> = ({ children, style }) => {
+  const childrenArray = React.Children.toArray(children).filter(Boolean);
+
+  return (
+    <View style={[styles.row, style]}>
+      {childrenArray.map((child, index) => (
+        <View key={index} style={styles.children}>
+          {child}
+        </View>
+      ))}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    marginHorizontal: -4,
+  },
+  children: {
+    paddingHorizontal: 2,
+    flex: 1,
+  },
+});
+
+export default Grid;