internhub-v2-mobile-ui-kit 0.0.1 → 0.0.3

package/README.md

@@ -0,0 +1,108 @@
+# 🎨 InternHub v2 Mobile UI Kit
+
+Bộ thư viện giao diện chuẩn (Design System) dành cho ứng dụng InternHub v2 Mobile.
+Được xây dựng trên React Native, hỗ trợ TypeScript và Dark Mode (future proof).
+
+## 📦 Cài Đặt
+
+```bash
+npm install internhub-v2-mobile-ui-kit
+# Hoặc
+yarn add internhub-v2-mobile-ui-kit
+```
+
+Yêu cầu cài thêm thư viện bổ trợ (Peer Dependencies):
+```bash
+yarn add react-native-linear-gradient react-native-svg
+```
+
+## 🚀 Sử Dụng
+
+### 1. Màu Sắc & Tokens
+Dùng `Colors` để đảm bảo đồng bộ giao diện toàn App.
+
+```tsx
+import { Colors, Spacing } from 'internhub-v2-mobile-ui-kit';
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: Colors.background, // Màu kem mềm
+    padding: Spacing.md,
+  },
+  title: {
+    color: Colors.primary, // Màu cam thương hiệu (#E18308)
+  }
+});
+```
+
+### 2. Components Cơ Bản
+
+#### Button
+Button chuẩn có hỗ trợ gradient và các trạng thái loading/disabled.
+
+```tsx
+import { Button } from 'internhub-v2-mobile-ui-kit';
+
+<Button 
+  title="Đăng Nhập" 
+  onPress={handleLogin} 
+  variant="primary" // primary | secondary | outline | ghost
+  loading={isLoading}
+/>
+```
+
+#### Input
+Ô nhập liệu chuẩn form.
+
+```tsx
+import { Input } from 'internhub-v2-mobile-ui-kit';
+
+<Input
+  label="Họ tên"
+  placeholder="Nhập họ tên của bạn"
+  error={errors.fullName}
+  icon="user"
+/>
+```
+
+#### Card
+Thẻ nội dung có đổ bóng và bo góc chuẩn.
+
+```tsx
+import { Card } from 'internhub-v2-mobile-ui-kit';
+
+<Card variant="elevated">
+  <Text>Nội dung thẻ chấm công...</Text>
+</Card>
+```
+
+#### Badge & Avatar
+Dùng cho status và ảnh đại diện.
+
+```tsx
+import { Badge, Avatar } from 'internhub-v2-mobile-ui-kit';
+
+<Avatar name="Nhan Nguyen" size="md" />
+<Badge label="Đang chờ duyệt" type="warning" />
+```
+
+## 🧩 Danh Sách Components
+
+| Component | Trạng Thái | Mô Tả |
+|-----------|------------|-------|
+| `Alert` | ✅ Ready | Hiển thị thông báo warning/info |
+| `Avatar` | ✅ Ready | Ảnh đại diện tròn hoặc chữ cái đầu |
+| `Badge` | ✅ Ready | Nhãn trạng thái (Success, Error...) |
+| `Button` | ✅ Ready | Nút bấm chính/phụ |
+| `Card` | ✅ Ready | Khung chứa nội dung container |
+| `Divider` | ✅ Ready | Đường kẻ phân cách (mới) |
+| `EmptyState`| ✅ Ready | Màn hình hiển thị khi không có dữ liệu (mới)|
+| `Header` | ✅ Ready | Thanh tiêu đề điều hướng (mới) |
+| `Input` | ✅ Ready | Ô nhập liệu văn bản |
+| `Loading` | ✅ Ready | Vòng xoay chờ tải trang (mới) |
+| `Modal` | ✅ Ready | Hộp thoại popup |
+| `Select` | ✅ Ready | Dropdown chọn options |
+| `Toast` | 🚧 W.I.P | Thông báo nổi tự tắt |
+
+## 👨‍💻 Tác Giả
+**Nguyen Thanh Nhan** - InternHub Team

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "internhub-v2-mobile-ui-kit",
-    "version": "0.0.1",
+    "version": "0.0.3",
     "description": "Premium UI Kit for InternHub Mobile App",
     "main": "src/index.ts",
     "types": "src/index.ts",
@@ -23,4 +23,4 @@
         "react-native-linear-gradient": "^2.8.3",
         "react-native-svg": "^14.1.0"
     }
-}
+}

package/src/Avatar/Avatar.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { View, Image, Text, StyleSheet, ImageSourcePropType, ViewStyle } from 'react-native';
+import { Colors } from '../tokens';
+
+interface AvatarProps {
+    source?: ImageSourcePropType;
+    name?: string;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    style?: ViewStyle;
+}
+
+const SIZES = {
+    sm: 32,
+    md: 48,
+    lg: 80,
+    xl: 120,
+};
+
+export const Avatar: React.FC<AvatarProps> = ({ source, name, size = 'md', style }) => {
+    const dimension = SIZES[size];
+
+    return (
+        <View style={[
+            styles.container,
+            { width: dimension, height: dimension, borderRadius: dimension / 2 },
+            style
+        ]}>
+            {source ? (
+                <Image source={source} style={styles.image} resizeMode="cover" />
+            ) : (
+                <Text style={[styles.text, { fontSize: dimension * 0.4 }]}>
+                    {name ? name.charAt(0).toUpperCase() : '?'}
+                </Text>
+            )}
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        backgroundColor: Colors.avatarBg,
+        justifyContent: 'center',
+        alignItems: 'center',
+        overflow: 'hidden',
+        borderWidth: 1.5,
+        borderColor: Colors.primary,
+    },
+    image: {
+        width: '100%',
+        height: '100%',
+    },
+    text: {
+        fontWeight: '800',
+        color: Colors.primary,
+    }
+});

package/src/Badge/Badge.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { View, Text, StyleSheet, ViewStyle, TextStyle } from 'react-native';
+import { Colors } from '../tokens';
+
+export type BadgeType = 'success' | 'warning' | 'error' | 'info' | 'default';
+
+interface BadgeProps {
+    label: string;
+    type?: BadgeType;
+    size?: 'sm' | 'md';
+    style?: ViewStyle;
+}
+
+const BADGE_COLORS = {
+    success: { bg: Colors.successLight, text: Colors.success },
+    warning: { bg: Colors.warningLight, text: Colors.warning },
+    error: { bg: Colors.errorLight, text: Colors.error },
+    info: { bg: Colors.infoLight, text: Colors.info },
+    default: { bg: Colors.surfaceAlt, text: Colors.textSecondary },
+};
+
+export const Badge: React.FC<BadgeProps> = ({ label, type = 'default', size = 'sm', style }) => {
+    const colors = BADGE_COLORS[type] || BADGE_COLORS.default;
+
+    return (
+        <View style={[
+            styles.container,
+            { backgroundColor: colors.bg },
+            size === 'md' ? styles.md : styles.sm,
+            style
+        ]}>
+            <Text style={[
+                styles.text,
+                { color: colors.text },
+                (size === 'md' ? { fontSize: 12 } : { fontSize: 10 }) as TextStyle
+            ]}>{label}</Text>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        borderRadius: 99,
+        justifyContent: 'center',
+        alignItems: 'center',
+        alignSelf: 'flex-start',
+    },
+    sm: {
+        paddingHorizontal: 8,
+        paddingVertical: 4,
+    },
+    md: {
+        paddingHorizontal: 12,
+        paddingVertical: 6,
+    },
+    text: {
+        fontWeight: '700',
+    }
+});

package/src/Divider/Divider.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { View, StyleSheet, ViewStyle } from 'react-native';
+import { Colors } from '../tokens';
+
+interface DividerProps {
+    vertical?: boolean;
+    color?: string;
+    size?: number; // thickness
+    spacing?: number; // margin
+    style?: ViewStyle;
+}
+
+export const Divider: React.FC<DividerProps> = ({
+    vertical = false,
+    color = Colors.border,
+    size = 1,
+    spacing = 16,
+    style
+}) => {
+    return (
+        <View
+            style={[
+                vertical
+                    ? { height: '100%', width: size, marginHorizontal: spacing }
+                    : { width: '100%', height: size, marginVertical: spacing },
+                { backgroundColor: color },
+                style
+            ]}
+        />
+    );
+};

package/src/EmptyState/EmptyState.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { View, Text, StyleSheet, Image, ImageSourcePropType, ViewStyle } from 'react-native';
+import { Colors } from '../tokens';
+
+interface EmptyStateProps {
+    title?: string;
+    message: string;
+    image?: ImageSourcePropType;
+    style?: ViewStyle;
+}
+
+export const EmptyState: React.FC<EmptyStateProps> = ({
+    title,
+    message,
+    image,
+    style
+}) => {
+    return (
+        <View style={[styles.container, style]}>
+            <View style={styles.circle}>
+                {image ? (
+                    <Image source={image} style={styles.image} resizeMode="contain" />
+                ) : (
+                    <Text style={styles.icon}>📋</Text>
+                )}
+            </View>
+            {title && <Text style={styles.title}>{title}</Text>}
+            <Text style={styles.message}>{message}</Text>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 32,
+        flex: 1,
+    },
+    circle: {
+        width: 120,
+        height: 120,
+        backgroundColor: Colors.surface,
+        borderRadius: 60,
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginBottom: 24,
+        borderWidth: 2,
+        borderColor: Colors.border,
+        borderStyle: 'dashed',
+    },
+    image: {
+        width: 80,
+        height: 80,
+    },
+    icon: {
+        fontSize: 48,
+    },
+    title: {
+        fontSize: 20,
+        fontWeight: '700',
+        color: Colors.textPrimary,
+        marginBottom: 8,
+        textAlign: 'center',
+    },
+    message: {
+        fontSize: 15,
+        color: Colors.textSecondary,
+        textAlign: 'center',
+        lineHeight: 22,
+        maxWidth: 280,
+    },
+});

package/src/Select/Select.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, Modal, FlatList, ViewStyle } from 'react-native';
+import { Colors } from '../tokens';
+
+interface Option {
+    label: string;
+    value: any;
+}
+
+interface SelectProps {
+    options: Option[];
+    value: any;
+    onChange: (value: any) => void;
+    placeholder?: string;
+    label?: string;
+    style?: ViewStyle;
+}
+
+export const Select: React.FC<SelectProps> = ({ options, value, onChange, placeholder = 'Select...', label, style }) => {
+    const [visible, setVisible] = React.useState(false);
+    const selected = options.find(o => o.value === value);
+
+    return (
+        <View style={[styles.wrapper, style]}>
+            {label && <Text style={styles.label}>{label}</Text>}
+            <TouchableOpacity
+                style={styles.field}
+                onPress={() => setVisible(true)}
+                activeOpacity={0.8}
+            >
+                <Text style={[styles.text, !selected && styles.placeholder]}>
+                    {selected ? selected.label : placeholder}
+                </Text>
+            </TouchableOpacity>
+
+            <Modal visible={visible} transparent animationType="fade">
+                <View style={styles.modalOverlay}>
+                    <TouchableOpacity style={styles.modalBg} onPress={() => setVisible(false)} />
+                    <View style={styles.modalContent}>
+                        <Text style={styles.header}>{label || placeholder}</Text>
+                        <FlatList
+                            data={options}
+                            keyExtractor={(item) => String(item.value)}
+                            renderItem={({ item }) => (
+                                <TouchableOpacity
+                                    style={[styles.option, item.value === value && styles.selectedOption]}
+                                    onPress={() => {
+                                        onChange(item.value);
+                                        setVisible(false);
+                                    }}
+                                >
+                                    <Text style={[styles.optionText, item.value === value && styles.selectedOptionText]}>
+                                        {item.label}
+                                    </Text>
+                                </TouchableOpacity>
+                            )}
+                        />
+                    </View>
+                </View>
+            </Modal>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    wrapper: { marginBottom: 16 },
+    label: { marginBottom: 8, fontSize: 14, fontWeight: '600', color: Colors.textSecondary },
+    field: {
+        borderWidth: 1,
+        borderColor: Colors.border,
+        borderRadius: 8,
+        padding: 12,
+        backgroundColor: Colors.inputBackground
+    },
+    text: { fontSize: 16, color: Colors.textPrimary },
+    placeholder: { color: Colors.textDisabled },
+    modalOverlay: { flex: 1, justifyContent: 'center', backgroundColor: 'rgba(0,0,0,0.5)', padding: 20 },
+    modalBg: { ...StyleSheet.absoluteFillObject },
+    modalContent: { backgroundColor: Colors.surface, borderRadius: 12, maxHeight: 400, padding: 16 },
+    header: { fontSize: 18, fontWeight: '700', marginBottom: 12, textAlign: 'center' },
+    option: { paddingVertical: 14, borderBottomWidth: 1, borderBottomColor: Colors.borderAlt },
+    selectedOption: { backgroundColor: Colors.glassOrange },
+    optionText: { fontSize: 16, color: Colors.textPrimary },
+    selectedOptionText: { color: Colors.primary, fontWeight: '700' },
+});

package/src/index.ts

@@ -1,7 +1,7 @@
 // Design Tokens
 export * from './tokens';
 
-// Components
+// Core Components
 export { Button } from './Button/Button';
 export { Input } from './Input/Input';
 export { Card } from './Card/Card';
@@ -10,3 +10,15 @@ export { Alert } from './Alert/Alert';
 export { GradientBackground } from './GradientBackground/GradientBackground';
 export { Modal } from './Modal/Modal';
 export { PasswordChecker } from './PasswordChecker/PasswordChecker';
+
+// New Components (v0.0.3)
+export { Avatar } from './Avatar/Avatar';
+export { Badge } from './Badge/Badge';
+export { Select } from './Select/Select';
+export { Divider } from './Divider/Divider';
+export { EmptyState } from './EmptyState/EmptyState';
+export { Header } from './Header/Header';
+export { Loading } from './Loading/Loading';
+export { DatePicker } from './DatePicker/DatePicker';
+export { TimePicker } from './TimePicker/TimePicker';
+export { Toast } from './Toast/Toast';