refactor: pecah lib/api.ts dan constants/Styles.ts per domain
- lib/api.ts (879 baris) → 13 file di lib/api/ per domain - constants/Styles.ts (1.275 baris) → 10 file di constants/styles/ per domain - tambah docs/FILE-HEALTH.md dan referensinya ke CLAUDE.md - kedua file lama tetap sebagai re-export — zero breaking changes
This commit is contained in:
135
constants/styles/component.styles.ts
Normal file
135
constants/styles/component.styles.ts
Normal file
@@ -0,0 +1,135 @@
|
||||
import { StyleSheet } from "react-native";
|
||||
|
||||
const ComponentStyles = StyleSheet.create({
|
||||
// avatar
|
||||
userProfileExtraSmall: { width: 35, height: 35, borderRadius: 100 },
|
||||
userProfileSmall: { width: 48, height: 48, borderRadius: 100 },
|
||||
userProfileBig: { width: 100, height: 100, borderRadius: 100 },
|
||||
imgListBanner: { width: 100, height: 50, borderRadius: 5 },
|
||||
iconContent: { padding: 10, borderRadius: 100, backgroundColor: '#E5E7EB' },
|
||||
|
||||
// chip
|
||||
chip: {
|
||||
paddingVertical: 5,
|
||||
paddingHorizontal: 15,
|
||||
borderRadius: 5,
|
||||
borderWidth: 1,
|
||||
borderColor: "transparent",
|
||||
marginRight: 10,
|
||||
marginBottom: 10,
|
||||
},
|
||||
chipSelected: { backgroundColor: "#f2f6ffff", borderColor: "#384288", borderWidth: 1 },
|
||||
chipText: { fontSize: 16, color: "#222" },
|
||||
chipTextSelected: { color: "white" },
|
||||
checkIcon: {
|
||||
position: "absolute",
|
||||
top: -6,
|
||||
left: -6,
|
||||
backgroundColor: "#384288",
|
||||
borderRadius: 10,
|
||||
padding: 2,
|
||||
},
|
||||
|
||||
// badge & progress
|
||||
badgeCol: { alignItems: 'center', gap: 6 },
|
||||
progressBadge: { borderRadius: 10, paddingHorizontal: 12, paddingVertical: 5, borderWidth: 1, alignItems: 'center' },
|
||||
taskCountBadge: { borderRadius: 6, paddingHorizontal: 7, paddingVertical: 2 },
|
||||
positionBadge: { borderRadius: 20, paddingHorizontal: 8, paddingVertical: 3 },
|
||||
textProgressPercent: { fontSize: 22, fontWeight: 'bold', lineHeight: 28 },
|
||||
progressTrack: { height: 8, borderRadius: 4, overflow: 'hidden' },
|
||||
progressFill: { height: '100%', borderRadius: 4 },
|
||||
reportContent: { borderLeftWidth: 3, paddingLeft: 12 },
|
||||
expandBtn: { flexDirection: 'row', alignItems: 'center', alignSelf: 'flex-start', marginTop: 8, gap: 4 },
|
||||
fileGrid: { flexDirection: 'row', flexWrap: 'wrap', gap: 8 },
|
||||
fileCard: { width: '48%', borderRadius: 10, borderWidth: 1, padding: 12, flexDirection: 'row', alignItems: 'center', gap: 10 },
|
||||
|
||||
// calendar
|
||||
signDate: { width: 20, height: 2, borderRadius: 3, marginTop: 3 },
|
||||
selectedDate: { backgroundColor: '#238be6', borderRadius: 5 },
|
||||
selectRangeDate: { backgroundColor: '#228be61f' },
|
||||
calendarDotRow: { flexDirection: 'row', gap: 2, height: 6, marginTop: 1 },
|
||||
calendarDot: { width: 5, height: 5, borderRadius: 3 },
|
||||
villageEventLegendRow: { marginTop: 10, marginBottom: 4, gap: 16 },
|
||||
villageEventLegendItem: { gap: 6 },
|
||||
villageEventLegendDot: { width: 10, height: 10, borderRadius: 5 },
|
||||
villageEventBadge: { paddingHorizontal: 6, paddingVertical: 2, borderRadius: 4, marginRight: 6 },
|
||||
|
||||
// event item
|
||||
itemEvent: { padding: 10, borderRadius: 10, flexDirection: 'row', alignContent: 'stretch', marginBottom: 10 },
|
||||
dividerEvent: { width: 7, borderRadius: 5, marginRight: 10 },
|
||||
|
||||
// member
|
||||
memberAvatarRing: { borderWidth: 3, borderColor: 'rgba(255,255,255,0.4)', borderRadius: 100 },
|
||||
memberBadgeRow: { flexDirection: 'row', gap: 8, marginTop: 12 },
|
||||
memberBadgeApprover: {
|
||||
paddingHorizontal: 10,
|
||||
paddingVertical: 4,
|
||||
borderRadius: 20,
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255,255,255,0.6)',
|
||||
backgroundColor: 'rgba(255,255,255,0.15)',
|
||||
},
|
||||
memberBadgePill: { paddingHorizontal: 10, paddingVertical: 4, borderRadius: 20 },
|
||||
memberInfoRow: { flexDirection: 'row', alignItems: 'center', paddingVertical: 14 },
|
||||
memberInfoIcon: { width: 36, alignItems: 'center' },
|
||||
memberInfoContent: { flex: 1, marginLeft: 10 },
|
||||
|
||||
// discussion
|
||||
discussionCard: { borderRadius: 10, borderWidth: 1, padding: 14 },
|
||||
discussionIconCircle: { width: 40, height: 40, borderRadius: 20, alignItems: 'center', justifyContent: 'center', flexShrink: 0 },
|
||||
discussionIconCircleLg: { width: 44, height: 44, borderRadius: 22, alignItems: 'center', justifyContent: 'center' },
|
||||
discussionStatusPill: { alignSelf: 'flex-start', marginTop: 3, paddingHorizontal: 8, paddingVertical: 2, borderRadius: 20, borderWidth: 1 },
|
||||
discussionStatusText: { fontSize: 11, fontWeight: '600' },
|
||||
discussionCardIndent: { marginLeft: 50 },
|
||||
discussionSeparator: { height: 8 },
|
||||
discussionCommentText: { fontSize: 12, marginLeft: 5 },
|
||||
discussionDateText: { fontSize: 11 },
|
||||
discussionCommentCard: { borderRadius: 10, borderWidth: 1, padding: 12, marginBottom: 8, flexDirection: 'row' },
|
||||
discussionEditedText: { fontSize: 10, fontStyle: 'italic' },
|
||||
|
||||
// guide overlay
|
||||
guideOverlay: { flex: 1, backgroundColor: 'rgba(0,0,0,0.6)', justifyContent: 'center', alignItems: 'center' },
|
||||
guideCard: {
|
||||
position: 'absolute',
|
||||
left: 24,
|
||||
right: 24,
|
||||
borderRadius: 16,
|
||||
padding: 20,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.2,
|
||||
shadowRadius: 12,
|
||||
elevation: 8,
|
||||
},
|
||||
guideBadge: { paddingHorizontal: 8, paddingVertical: 3, borderRadius: 20 },
|
||||
guideDotRow: { marginTop: 16, gap: 6, justifyContent: 'center' },
|
||||
guideDot: { width: 6, height: 6, borderRadius: 3 },
|
||||
guideButtonPrimary: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 16, paddingVertical: 8, borderRadius: 20 },
|
||||
guideButtonSecondary: { paddingHorizontal: 4, paddingVertical: 8 },
|
||||
guideArrowUp: {
|
||||
position: 'absolute',
|
||||
top: -10,
|
||||
marginLeft: -8,
|
||||
width: 0,
|
||||
height: 0,
|
||||
borderLeftWidth: 8,
|
||||
borderRightWidth: 8,
|
||||
borderBottomWidth: 10,
|
||||
borderLeftColor: 'transparent',
|
||||
borderRightColor: 'transparent',
|
||||
},
|
||||
guideArrowDown: {
|
||||
position: 'absolute',
|
||||
bottom: -10,
|
||||
marginLeft: -8,
|
||||
width: 0,
|
||||
height: 0,
|
||||
borderLeftWidth: 8,
|
||||
borderRightWidth: 8,
|
||||
borderTopWidth: 10,
|
||||
borderLeftColor: 'transparent',
|
||||
borderRightColor: 'transparent',
|
||||
},
|
||||
});
|
||||
|
||||
export default ComponentStyles;
|
||||
Reference in New Issue
Block a user