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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +61 -61
  2. package/package.json +1 -1
  3. package/src/index.ts +20 -13
package/README.md CHANGED
@@ -1,108 +1,108 @@
1
- # 🎨 InternHub v2 Mobile UI Kit
1
+ # InternHub v2 Mobile UI Kit
2
2
 
3
- Bộ thư viện giao diện chuẩn (Design System) dành cho ứng dụng InternHub v2 Mobile.
4
- Được xây dựng trên React Native, hỗ trợ TypeScript và Dark Mode (future proof).
3
+ This repository contains the official design system and UI components for the InternHub v2 Mobile Application. It provides a standardized set of React Native components and design tokens (colors, typography, spacing) to ensure consistency across the application ecosystem.
5
4
 
6
- ## 📦 Cài Đặt
5
+ ## Installation
6
+
7
+ To integrate the UI kit into your project, install it via npm or yarn:
7
8
 
8
9
  ```bash
9
10
  npm install internhub-v2-mobile-ui-kit
10
- # Hoặc
11
- yarn add internhub-v2-mobile-ui-kit
12
11
  ```
13
12
 
14
- Yêu cầu cài thêm thư viện bổ trợ (Peer Dependencies):
15
- ```bash
16
- yarn add react-native-linear-gradient react-native-svg
17
- ```
13
+ ### Peer Dependencies
14
+ Ensure the following peer dependencies are installed in your project root:
15
+ - `react`
16
+ - `react-native`
17
+ - `react-native-linear-gradient`
18
+ - `react-native-svg`
18
19
 
19
- ## 🚀 Sử Dụng
20
+ ## Usage
20
21
 
21
- ### 1. Màu Sắc & Tokens
22
- Dùng `Colors` để đảm bảo đồng bộ giao diện toàn App.
22
+ ### 1. Design Tokens
23
+ The UI kit exposes a comprehensive set of design tokens tailored for the application's theme.
23
24
 
24
25
  ```tsx
25
26
  import { Colors, Spacing } from 'internhub-v2-mobile-ui-kit';
26
27
 
27
28
  const styles = StyleSheet.create({
28
29
  container: {
29
- backgroundColor: Colors.background, // Màu kem mềm
30
+ backgroundColor: Colors.background,
30
31
  padding: Spacing.md,
31
32
  },
32
- title: {
33
- color: Colors.primary, // Màu cam thương hiệu (#E18308)
33
+ primaryText: {
34
+ color: Colors.primary,
35
+ fontWeight: '600',
34
36
  }
35
37
  });
36
38
  ```
37
39
 
38
- ### 2. Components Cơ Bản
40
+ ### 2. Components
41
+ Import components directly from the package. All components adhere to the project's design guidelines.
39
42
 
40
43
  #### Button
41
- Button chuẩn có hỗ trợ gradient và các trạng thái loading/disabled.
44
+ Supported variants: `primary`, `secondary`, `outline`, `ghost`.
42
45
 
43
46
  ```tsx
44
47
  import { Button } from 'internhub-v2-mobile-ui-kit';
45
48
 
46
49
  <Button
47
- title="Đăng Nhập"
48
- onPress={handleLogin}
49
- variant="primary" // primary | secondary | outline | ghost
50
- loading={isLoading}
50
+ title="Submit Application"
51
+ onPress={handleSubmit}
52
+ variant="primary"
53
+ loading={isSubmitting}
51
54
  />
52
55
  ```
53
56
 
54
- #### Input
55
- Ô nhập liệu chuẩn form.
57
+ #### Input Field
58
+ Standard input field with integrated label and error handling.
56
59
 
57
60
  ```tsx
58
61
  import { Input } from 'internhub-v2-mobile-ui-kit';
59
62
 
60
63
  <Input
61
- label="Họ tên"
62
- placeholder="Nhập họ tên của bạn"
63
- error={errors.fullName}
64
- icon="user"
64
+ label="Full Name"
65
+ placeholder="Enter your full name"
66
+ value={name}
67
+ onChangeText={setName}
68
+ error={errors.name}
65
69
  />
66
70
  ```
67
71
 
68
- #### Card
69
- Thẻ nội dung có đổ bóng và bo góc chuẩn.
72
+ #### Selection Controls (Checkbox & Switch)
73
+ New in v0.0.4.
70
74
 
71
75
  ```tsx
72
- import { Card } from 'internhub-v2-mobile-ui-kit';
76
+ import { Checkbox, Switch } from 'internhub-v2-mobile-ui-kit';
73
77
 
74
- <Card variant="elevated">
75
- <Text>Nội dung thẻ chấm công...</Text>
76
- </Card>
78
+ <Checkbox
79
+ label="I agree to the terms"
80
+ checked={agreed}
81
+ onChange={setAgreed}
82
+ />
83
+
84
+ <Switch
85
+ value={isEnabled}
86
+ onValueChange={toggleSwitch}
87
+ />
77
88
  ```
78
89
 
79
- #### Badge & Avatar
80
- Dùng cho status và ảnh đại diện.
90
+ ## Component Library
81
91
 
82
- ```tsx
83
- import { Badge, Avatar } from 'internhub-v2-mobile-ui-kit';
92
+ | Category | Components | Status |
93
+ |----------|------------|--------|
94
+ | **Inputs** | Button, Input, Select, Checkbox, Switch, OTPInput, DatePicker, TimePicker | Stable |
95
+ | **Feedback** | Alert, Badge, Toast, Loading, EmptyState, Modal | Stable |
96
+ | **Data Display** | Card, Avatar, Divider, Header | Stable |
97
+ | **Layout** | GradientBackground | Stable |
84
98
 
85
- <Avatar name="Nhan Nguyen" size="md" />
86
- <Badge label="Đang chờ duyệt" type="warning" />
87
- ```
99
+ ## Versioning
100
+
101
+ We use Semantic Versioning (SemVer) for versioning. For the versions available, see the tags on this repository.
102
+
103
+ ## Authors
104
+
105
+ **Nguyen Thanh Nhan**
106
+ Mobile Application Developer - InternHub Team
88
107
 
89
- ## 🧩 Danh Sách Components
90
-
91
- | Component | Trạng Thái | Mô Tả |
92
- |-----------|------------|-------|
93
- | `Alert` | ✅ Ready | Hiển thị thông báo warning/info |
94
- | `Avatar` | ✅ Ready | Ảnh đại diện tròn hoặc chữ cái đầu |
95
- | `Badge` | ✅ Ready | Nhãn trạng thái (Success, Error...) |
96
- | `Button` | ✅ Ready | Nút bấm chính/phụ |
97
- | `Card` | ✅ Ready | Khung chứa nội dung container |
98
- | `Divider` | ✅ Ready | Đường kẻ phân cách (mới) |
99
- | `EmptyState`| ✅ Ready | Màn hình hiển thị khi không có dữ liệu (mới)|
100
- | `Header` | ✅ Ready | Thanh tiêu đề điều hướng (mới) |
101
- | `Input` | ✅ Ready | Ô nhập liệu văn bản |
102
- | `Loading` | ✅ Ready | Vòng xoay chờ tải trang (mới) |
103
- | `Modal` | ✅ Ready | Hộp thoại popup |
104
- | `Select` | ✅ Ready | Dropdown chọn options |
105
- | `Toast` | 🚧 W.I.P | Thông báo nổi tự tắt |
106
-
107
- ## 👨‍💻 Tác Giả
108
- **Nguyen Thanh Nhan** - InternHub Team
108
+ This project is proprietary software. Unauthorized copying of files via any medium is strictly prohibited.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "internhub-v2-mobile-ui-kit",
3
- "version": "0.0.3",
3
+ "version": "0.0.5",
4
4
  "description": "Premium UI Kit for InternHub Mobile App",
5
5
  "main": "src/index.ts",
6
6
  "types": "src/index.ts",
package/src/index.ts CHANGED
@@ -1,24 +1,31 @@
1
1
  // Design Tokens
2
2
  export * from './tokens';
3
3
 
4
- // Core Components
4
+ // Inputs & Forms
5
5
  export { Button } from './Button/Button';
6
6
  export { Input } from './Input/Input';
7
- export { Card } from './Card/Card';
7
+ export { Select } from './Select/Select';
8
+ export { Checkbox } from './Checkbox/Checkbox';
9
+ export { Switch } from './Switch/Switch';
8
10
  export { OTPInput } from './OTPInput/OTPInput';
9
- export { Alert } from './Alert/Alert';
10
- export { GradientBackground } from './GradientBackground/GradientBackground';
11
- export { Modal } from './Modal/Modal';
12
11
  export { PasswordChecker } from './PasswordChecker/PasswordChecker';
12
+ export { DatePicker } from './DatePicker/DatePicker';
13
+ export { TimePicker } from './TimePicker/TimePicker';
13
14
 
14
- // New Components (v0.0.3)
15
- export { Avatar } from './Avatar/Avatar';
15
+ // Feedback & Status
16
+ export { Alert } from './Alert/Alert';
16
17
  export { Badge } from './Badge/Badge';
17
- export { Select } from './Select/Select';
18
- export { Divider } from './Divider/Divider';
18
+ export { Toast } from './Toast/Toast';
19
+ export { Loading } from './Loading/Loading';
19
20
  export { EmptyState } from './EmptyState/EmptyState';
21
+ export { Modal } from './Modal/Modal';
22
+ export { BottomSheet } from './BottomSheet/BottomSheet';
23
+ export { Skeleton } from './Skeleton/Skeleton';
24
+
25
+ // Layout & Container
26
+ export { Card } from './Card/Card';
20
27
  export { Header } from './Header/Header';
21
- export { Loading } from './Loading/Loading';
22
- export { DatePicker } from './DatePicker/DatePicker';
23
- export { TimePicker } from './TimePicker/TimePicker';
24
- export { Toast } from './Toast/Toast';
28
+ export { Divider } from './Divider/Divider';
29
+ export { Avatar } from './Avatar/Avatar';
30
+ export { Icon } from './Icon/Icon';
31
+ export { GradientBackground } from './GradientBackground/GradientBackground';