diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000..521a9f7 --- /dev/null +++ b/.npmrc @@ -0,0 +1 @@ +legacy-peer-deps=true diff --git a/app/(tabs)/diary.tsx b/app/(tabs)/diary.tsx index 8292afb..f365595 100644 --- a/app/(tabs)/diary.tsx +++ b/app/(tabs)/diary.tsx @@ -1,7 +1,7 @@ +import AlarmList from "@/components/AlarmList"; import { Link } from "expo-router"; import { Platform, - ScrollView, StyleSheet, Text, TouchableOpacity, @@ -9,20 +9,49 @@ import { } from "react-native"; import { SafeAreaView } from "react-native-safe-area-context"; +const alarmExample = { + alarms: [ + { + name: "Ngập nước có cảnh báo", + t: 1762226488, + level: 1, + id: "0:8:1", + }, + { + name: "Tầu cảnh báo sos", + t: 1762226596, + level: 3, + id: "50:15", + }, + { + name: "Khói có cảnh báo", + t: 1762226589, + level: 1, + id: "0:1:1", + }, + { + name: "Cửa có cảnh báo", + t: 1762226547, + level: 1, + id: "0:7:1", + }, + ], + level: 3, +}; + export default function Warning() { return ( - - - Nhật Ký Chuyến Đi + + Nhật Ký Chuyến Đi - - - Mở Modal - - - - + + + Mở Modal + + + + ); } diff --git a/app/(tabs)/index.tsx b/app/(tabs)/index.tsx index 8428ca6..2159dba 100644 --- a/app/(tabs)/index.tsx +++ b/app/(tabs)/index.tsx @@ -1,5 +1,9 @@ +import GPSInfoPanel from "@/components/map/GPSInfoPanel"; +import type { PolygonWithLabelProps } from "@/components/map/PolygonWithLabel"; import { PolygonWithLabel } from "@/components/map/PolygonWithLabel"; +import type { PolylineWithLabelProps } from "@/components/map/PolylineWithLabel"; import { PolylineWithLabel } from "@/components/map/PolylineWithLabel"; +import SosButton from "@/components/map/SosButton"; import { ENTITY, EVENT_ALARM_DATA, @@ -30,12 +34,10 @@ import { Animated, Image as RNImage, StyleSheet, - Text, - TouchableOpacity, - View, + View } from "react-native"; import MapView, { Circle, Marker } from "react-native-maps"; -import { SafeAreaView } from "react-native-safe-area-context"; + export default function HomeScreen() { const [gpsData, setGpsData] = useState( @@ -53,15 +55,16 @@ export default function HomeScreen() { const [zoomLevel, setZoomLevel] = useState(10); const [isFirstLoad, setIsFirstLoad] = useState(true); const [polylineCoordinates, setPolylineCoordinates] = useState< - number[][] | undefined + PolylineWithLabelProps | undefined >(undefined); const [polygonCoordinates, setPolygonCoordinates] = useState< - number[][][] | undefined + PolygonWithLabelProps[] | undefined >(undefined); const platform = usePlatform(); const theme = useColorScheme(); const scale = useRef(new Animated.Value(0)).current; const opacity = useRef(new Animated.Value(1)).current; + // console.log("Platform: ", platform); // console.log("Theme: ", theme); @@ -74,7 +77,12 @@ export default function HomeScreen() { getBanzonesEventBus(); getTrackPointsEventBus(); const queryGpsData = (gpsData: Model.GPSResonse) => { - setGpsData(gpsData); + if (gpsData) { + // console.log("GPS Data: ", gpsData); + setGpsData(gpsData); + } else { + setGpsData(undefined); + } }; const queryAlarmData = (alarmData: Model.AlarmResponse) => { // console.log("Alarm Data: ", alarmData.alarms.length); @@ -82,7 +90,6 @@ export default function HomeScreen() { }; const queryEntityData = (entityData: Model.TransformedEntity[]) => { // console.log("Entities Length Data: ", entityData.length); - setEntityData(entityData); }; const queryBanzonesData = (banzoneData: Model.Zone[]) => { @@ -92,32 +99,36 @@ export default function HomeScreen() { }; const queryTrackPointsData = (TrackPointsData: Model.ShipTrackPoint[]) => { // console.log("TrackPoints Data: ", TrackPointsData.length); - setTrackPointsData(TrackPointsData); + if (TrackPointsData && TrackPointsData.length > 0) { + setTrackPointsData(TrackPointsData); + } else { + setTrackPointsData(null); + } }; eventBus.on(EVENT_GPS_DATA, queryGpsData); - console.log("Registering event handlers in HomeScreen"); + // console.log("Registering event handlers in HomeScreen"); eventBus.on(EVENT_GPS_DATA, queryGpsData); - console.log("Subscribed to EVENT_GPS_DATA"); + // console.log("Subscribed to EVENT_GPS_DATA"); eventBus.on(EVENT_ALARM_DATA, queryAlarmData); - console.log("Subscribed to EVENT_ALARM_DATA"); + // console.log("Subscribed to EVENT_ALARM_DATA"); eventBus.on(EVENT_ENTITY_DATA, queryEntityData); - console.log("Subscribed to EVENT_ENTITY_DATA"); + // console.log("Subscribed to EVENT_ENTITY_DATA"); eventBus.on(EVENT_TRACK_POINTS_DATA, queryTrackPointsData); - console.log("Subscribed to EVENT_TRACK_POINTS_DATA"); + // console.log("Subscribed to EVENT_TRACK_POINTS_DATA"); eventBus.once(EVENT_BANZONE_DATA, queryBanzonesData); - console.log("Subscribed once to EVENT_BANZONE_DATA"); + // console.log("Subscribed once to EVENT_BANZONE_DATA"); return () => { - console.log("Unregistering event handlers in HomeScreen"); + // console.log("Unregistering event handlers in HomeScreen"); eventBus.off(EVENT_GPS_DATA, queryGpsData); - console.log("Unsubscribed EVENT_GPS_DATA"); + // console.log("Unsubscribed EVENT_GPS_DATA"); eventBus.off(EVENT_ALARM_DATA, queryAlarmData); - console.log("Unsubscribed EVENT_ALARM_DATA"); + // console.log("Unsubscribed EVENT_ALARM_DATA"); eventBus.off(EVENT_ENTITY_DATA, queryEntityData); - console.log("Unsubscribed EVENT_ENTITY_DATA"); + // console.log("Unsubscribed EVENT_ENTITY_DATA"); eventBus.off(EVENT_TRACK_POINTS_DATA, queryTrackPointsData); - console.log("Unsubscribed EVENT_TRACK_POINTS_DATA"); + // console.log("Unsubscribed EVENT_TRACK_POINTS_DATA"); }; }, []); @@ -170,14 +181,31 @@ export default function HomeScreen() { geom_lines || "" ); if (coordinates.length > 0) { - setPolylineCoordinates(coordinates); + setPolylineCoordinates({ + coordinates: coordinates.map((coord) => ({ + latitude: coord[0], + longitude: coord[1], + })), + label: zone?.zone_name ?? "", + content: zone?.message ?? "", + }); + } } else if (geom_type === 1) { // foundPolygon = true; const coordinates = convertWKTtoLatLngString(geom_poly || ""); if (coordinates.length > 0) { console.log("Polygon Coordinate: ", coordinates); - setPolygonCoordinates(coordinates); + setPolygonCoordinates( + coordinates.map((polygon) => ({ + coordinates: polygon.map((coord) => ({ + latitude: coord[0], + longitude: coord[1], + })), + label: zone?.zone_name ?? "", + content: zone?.message ?? "", + })) + ); } } } @@ -271,7 +299,9 @@ export default function HomeScreen() { }, [alarmData?.level, scale, opacity]); return ( - + ({ - latitude: coord[0], - longitude: coord[1], - }))} - label="Tuyến bờ" + coordinates={polylineCoordinates.coordinates} + label={polylineCoordinates.label} + content={polylineCoordinates.content} strokeColor="#FF5733" strokeWidth={4} showDistance={false} @@ -322,30 +351,16 @@ export default function HomeScreen() { {polygonCoordinates.map((polygon, index) => { // Tạo key ổn định từ tọa độ đầu tiên của polygon const polygonKey = - polygon.length > 0 - ? `polygon-${polygon[0][0]}-${polygon[0][1]}-${index}` + polygon.coordinates.length > 0 + ? `polygon-${polygon.coordinates[0].latitude}-${polygon.coordinates[0].longitude}-${index}` : `polygon-${index}`; return ( - // ({ - // latitude: coords[0], - // longitude: coords[1], - // }))} - // fillColor="rgba(16, 85, 201, 0.6)" - // strokeColor="rgba(16, 85, 201, 0.8)" - // strokeWidth={2} - // zIndex={50} - // /> ({ - latitude: coords[0], - longitude: coords[1], - }))} - label="Test khu đánh bắt" - content="Thời gian cấm (từ tháng 1 đến tháng 12)" + coordinates={polygon.coordinates} + label={polygon.label} + content={polygon.content} fillColor="rgba(16, 85, 201, 0.6)" strokeColor="rgba(16, 85, 201, 0.8)" strokeWidth={2} @@ -371,7 +386,7 @@ export default function HomeScreen() { anchor={ platform === IOS_PLATFORM ? { x: 0.5, y: 0.5 } - : { x: 0.5, y: 0.4 } + : { x: 0.6, y: 0.4 } } > @@ -400,11 +415,10 @@ export default function HomeScreen() { height: 32, transform: [ { - rotate: `${ - typeof gpsData.h === "number" && !isNaN(gpsData.h) + rotate: `${typeof gpsData.h === "number" && !isNaN(gpsData.h) ? gpsData.h : 0 - }deg`, + }deg`, }, ], }} @@ -414,16 +428,12 @@ export default function HomeScreen() { )} - { - setPolygonCoordinates(undefined); - setPolylineCoordinates(undefined); - }} - > - Get GPS Data - - + + + + + + ); } diff --git a/app/_layout.tsx b/app/_layout.tsx index 3ecbb90..1b519ba 100644 --- a/app/_layout.tsx +++ b/app/_layout.tsx @@ -9,9 +9,12 @@ import { useEffect } from "react"; import "react-native-reanimated"; import Toast from "react-native-toast-message"; +import { GluestackUIProvider } from "@/components/ui/gluestack-ui-provider/gluestack-ui-provider"; import { setRouterInstance } from "@/config/auth"; +import "@/global.css"; import { useColorScheme } from "@/hooks/use-color-scheme"; import "../global.css"; + export default function RootLayout() { const colorScheme = useColorScheme(); const router = useRouter(); @@ -21,34 +24,36 @@ export default function RootLayout() { }, [router]); return ( - - - + + + + - + - - - - - + + + + + + ); } diff --git a/babel.config.js b/babel.config.js index f3c649b..c854b8b 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,9 +1,22 @@ module.exports = function (api) { api.cache(true); + return { - presets: [ - ["babel-preset-expo", { jsxImportSource: "nativewind" }], - "nativewind/babel", + presets: [['babel-preset-expo'], 'nativewind/babel'], + + plugins: [ + [ + 'module-resolver', + { + root: ['./'], + + alias: { + '@': './', + 'tailwind.config': './tailwind.config.js', + }, + }, + ], + 'react-native-worklets/plugin', ], }; }; diff --git a/components/AlarmList.tsx b/components/AlarmList.tsx new file mode 100644 index 0000000..89f1f8e --- /dev/null +++ b/components/AlarmList.tsx @@ -0,0 +1,76 @@ +import dayjs from "dayjs"; +import { FlatList, Text, TouchableOpacity, View } from "react-native"; + +type AlarmItem = { + name: string; + t: number; + level: number; + id: string; +}; + +type AlarmProp = { + alarmsData: AlarmItem[]; + onPress?: (alarm: AlarmItem) => void; +}; + +const AlarmList = ({ alarmsData, onPress }: AlarmProp) => { + const sortedAlarmsData = [...alarmsData].sort((a, b) => b.level - a.level); + return ( + ( + onPress?.(item)} + className="flex flex-row gap-5 p-3 justify-start items-baseline w-full" + > + + + + {item.name} + + + {formatTimestamp(item.t)} + + + + )} + keyExtractor={(item) => item.id} + /> + ); +}; + +const getBackgroundColorByLevel = (level: number) => { + switch (level) { + case 1: + return "bg-yellow-500"; + case 2: + return "bg-orange-500"; + case 3: + return "bg-red-500"; + default: + return "bg-gray-500"; + } +}; + +const getTextColorByLevel = (level: number) => { + switch (level) { + case 1: + return "text-yellow-600"; + case 2: + return "text-orange-600"; + case 3: + return "text-red-600"; + default: + return "text-gray-600"; + } +}; + +const formatTimestamp = (timestamp: number) => { + return dayjs.unix(timestamp).format("DD/MM/YYYY HH:mm:ss"); +}; + +export default AlarmList; diff --git a/components/map/Description.tsx b/components/map/Description.tsx new file mode 100644 index 0000000..d626e3f --- /dev/null +++ b/components/map/Description.tsx @@ -0,0 +1,17 @@ +import { Text, View } from "react-native"; + +interface DescriptionProps { + title?: string; + description?: string; +} +export const Description = ({ + title = "", + description = "", +}: DescriptionProps) => { + return ( + + {title}: + {description} + + ); +}; diff --git a/components/map/GPSInfoPanel.tsx b/components/map/GPSInfoPanel.tsx new file mode 100644 index 0000000..c368282 --- /dev/null +++ b/components/map/GPSInfoPanel.tsx @@ -0,0 +1,113 @@ +import { convertToDMS, kmhToKnot } from "@/utils/geom"; +import { MaterialIcons } from "@expo/vector-icons"; +import { useEffect, useRef, useState } from "react"; +import { Animated, TouchableOpacity, View } from "react-native"; +import { Description } from "./Description"; + +type GPSInfoPanelProps = { + gpsData: Model.GPSResonse | undefined; +}; + +const GPSInfoPanel = ({ gpsData }: GPSInfoPanelProps) => { + const [isExpanded, setIsExpanded] = useState(true); + const [panelHeight, setPanelHeight] = useState(0); + const translateY = useRef(new Animated.Value(0)).current; + const blockBottom = useRef(new Animated.Value(0)).current; + + useEffect(() => { + Animated.timing(translateY, { + toValue: isExpanded ? 0 : 200, // Dịch chuyển xuống 200px khi thu gọn + duration: 500, + useNativeDriver: true, + }).start(); + }, [isExpanded]); + + useEffect(() => { + const targetBottom = isExpanded ? panelHeight + 12 : 10; + Animated.timing(blockBottom, { + toValue: targetBottom, + duration: 500, + useNativeDriver: false, + }).start(); + }, [isExpanded, panelHeight, blockBottom]); + + const togglePanel = () => { + setIsExpanded(!isExpanded); + }; + + return ( + <> + {/* Khối hình vuông */} + + + setPanelHeight(event.nativeEvent.layout.height)} + > + {/* Nút toggle ở top-right */} + + + + + + + + + + + + + + + + + + + + + + + {/* Nút floating để mở lại panel khi thu gọn */} + {!isExpanded && ( + + + + )} + + ); +}; + +export default GPSInfoPanel; diff --git a/components/map/PolygonWithLabel.tsx b/components/map/PolygonWithLabel.tsx index 314f13a..6aa7543 100644 --- a/components/map/PolygonWithLabel.tsx +++ b/components/map/PolygonWithLabel.tsx @@ -1,7 +1,9 @@ +import { ANDROID_PLATFORM } from "@/constants"; +import { usePlatform } from "@/hooks/use-platform"; import { getPolygonCenter } from "@/utils/polyline"; -import React from "react"; +import React, { useRef } from "react"; import { StyleSheet, Text, View } from "react-native"; -import { Marker, Polygon } from "react-native-maps"; +import { MapMarker, Marker, Polygon } from "react-native-maps"; export interface PolygonWithLabelProps { coordinates: { @@ -33,6 +35,8 @@ export const PolygonWithLabel: React.FC = ({ if (!coordinates || coordinates.length < 3) { return null; } + const platform = usePlatform(); + const markerRef = useRef(null); const centerPoint = getPolygonCenter(coordinates); @@ -51,8 +55,7 @@ export const PolygonWithLabel: React.FC = ({ const paddingScale = Math.max(Math.pow(2, (zoomLevel - 10) * 0.2), 0.5); const minWidthScale = Math.max(Math.pow(2, (zoomLevel - 10) * 0.25), 0.9); - // console.log("Min Width Scale: ", minWidthScale); - + markerRef.current?.showCallout(); return ( <> = ({ /> {label && ( = ({ coordinates, label, + content, strokeColor = "#FF5733", strokeWidth = 4, showDistance = false, @@ -35,14 +39,15 @@ export const PolylineWithLabel: React.FC = ({ const middlePoint = getMiddlePointOfPolyline(coordinates); const distance = calculateTotalDistance(coordinates); - + const platform = usePlatform(); + const markerRef = useRef(null); let displayText = label || ""; if (showDistance) { displayText += displayText ? ` (${distance.toFixed(2)}km)` : `${distance.toFixed(2)}km`; } - + markerRef.current?.showCallout(); return ( <> = ({ /> {displayText && ( diff --git a/components/map/SosButton.tsx b/components/map/SosButton.tsx new file mode 100644 index 0000000..1dd75ff --- /dev/null +++ b/components/map/SosButton.tsx @@ -0,0 +1,385 @@ +import { showToastError } from "@/config"; +import { + queryDeleteSos, + queryGetSos, + querySendSosMessage, +} from "@/controller/DeviceController"; +import { sosMessage } from "@/utils/sosUtils"; +import { MaterialIcons } from "@expo/vector-icons"; +import { useEffect, useState } from "react"; +import { + FlatList, + ScrollView, + StyleSheet, + Text, + TextInput, + TouchableOpacity, + View, +} from "react-native"; +import { Button, ButtonText } from "../ui/gluestack-ui-provider/button"; +import { + Modal, + ModalBackdrop, + ModalBody, + ModalContent, + ModalFooter, + ModalHeader, +} from "../ui/gluestack-ui-provider/modal"; + +const SosButton = () => { + const [sosData, setSosData] = useState(); + const [showConfirmSosDialog, setShowConfirmSosDialog] = useState(false); + const [selectedSosMessage, setSelectedSosMessage] = useState( + null + ); + const [customMessage, setCustomMessage] = useState(""); + const [showDropdown, setShowDropdown] = useState(false); + const [errors, setErrors] = useState<{ [key: string]: string }>({}); + + const sosOptions = [ + ...sosMessage.map((msg) => ({ ma: msg.ma, moTa: msg.moTa })), + { ma: 999, moTa: "Khác" }, + ]; + + const getSosData = async () => { + try { + const response = await queryGetSos(); + setSosData(response.data); + } catch (error) { + console.error("Failed to fetch SOS data:", error); + } + }; + + useEffect(() => { + getSosData(); + }, []); + + const validateForm = () => { + const newErrors: { [key: string]: string } = {}; + + // Không cần validate sosMessage vì luôn có default value (11) + + if (selectedSosMessage === 999 && customMessage.trim() === "") { + newErrors.customMessage = "Vui lòng nhập trạng thái"; + } + + setErrors(newErrors); + return Object.keys(newErrors).length === 0; + }; + + const handleConfirmSos = async () => { + if (validateForm()) { + let messageToSend = ""; + if (selectedSosMessage === 999) { + messageToSend = customMessage.trim(); + } else { + const selectedOption = sosOptions.find( + (opt) => opt.ma === selectedSosMessage + ); + messageToSend = selectedOption ? selectedOption.moTa : ""; + } + // Gửi dữ liệu đi + setShowConfirmSosDialog(false); + // Reset form + setSelectedSosMessage(null); + setCustomMessage(""); + setErrors({}); + await sendSosMessage(messageToSend); + } + }; + + const handleClickButton = async (isActive: boolean) => { + if (isActive) { + console.log("Active"); + const resp = await queryDeleteSos(); + if (resp.status === 200) { + await getSosData(); + } + } else { + console.log("No Active"); + setSelectedSosMessage(11); // Mặc định chọn lý do ma: 11 + setShowConfirmSosDialog(true); + } + }; + + const sendSosMessage = async (message: string) => { + try { + const resp = await querySendSosMessage(message); + if (resp.status === 200) { + await getSosData(); + } + } catch (error) { + console.error("Error when send sos: ", error); + showToastError("Không thể gửi tín hiệu SOS", "Lỗi"); + } + }; + + return ( + <> + + { + setShowConfirmSosDialog(false); + setSelectedSosMessage(null); + setCustomMessage(""); + setErrors({}); + }} + > + + + + + Thông báo khẩn cấp + + + + + {/* Dropdown Nội dung SOS */} + + Nội dung: + setShowDropdown(!showDropdown)} + > + + {selectedSosMessage !== null + ? sosOptions.find((opt) => opt.ma === selectedSosMessage) + ?.moTa || "Chọn lý do" + : "Chọn lý do"} + + + + {errors.sosMessage && ( + {errors.sosMessage} + )} + + + {/* Input Custom Message nếu chọn "Khác" */} + {selectedSosMessage === 999 && ( + + Nhập trạng thái + { + setCustomMessage(text); + if (text.trim() !== "") { + setErrors((prev) => { + const newErrors = { ...prev }; + delete newErrors.customMessage; + return newErrors; + }); + } + }} + multiline + numberOfLines={4} + /> + {errors.customMessage && ( + {errors.customMessage} + )} + + )} + + + + + + + + + + {/* Dropdown Modal - Nổi lên */} + {showDropdown && showConfirmSosDialog && ( + setShowDropdown(false)}> + setShowDropdown(false)} + > + + item.ma.toString()} + renderItem={({ item }) => ( + { + setSelectedSosMessage(item.ma); + setShowDropdown(false); + + // Clear custom message nếu chọn khác lý do + if (item.ma !== 999) { + setCustomMessage(""); + } + }} + > + + {item.moTa} + + + )} + /> + + + + )} + + ); +}; + +const styles = StyleSheet.create({ + formGroup: { + marginBottom: 16, + }, + label: { + fontSize: 14, + fontWeight: "600", + marginBottom: 8, + color: "#333", + }, + dropdownButton: { + borderWidth: 1, + borderColor: "#ddd", + borderRadius: 8, + paddingHorizontal: 12, + paddingVertical: 12, + flexDirection: "row", + justifyContent: "space-between", + alignItems: "center", + backgroundColor: "#fff", + }, + errorBorder: { + borderColor: "#ff4444", + }, + dropdownButtonText: { + fontSize: 14, + color: "#333", + flex: 1, + }, + placeholderText: { + color: "#999", + }, + dropdownList: { + borderWidth: 1, + borderColor: "#ddd", + borderRadius: 8, + marginTop: 4, + backgroundColor: "#fff", + overflow: "hidden", + }, + dropdownItem: { + paddingHorizontal: 12, + paddingVertical: 12, + borderBottomWidth: 1, + borderBottomColor: "#eee", + }, + dropdownItemText: { + fontSize: 14, + color: "#333", + }, + dropdownOverlay: { + flex: 1, + justifyContent: "center", + alignItems: "center", + }, + dropdownModalContainer: { + backgroundColor: "#fff", + borderRadius: 12, + maxHeight: 400, + minWidth: 280, + shadowColor: "#000", + shadowOffset: { width: 0, height: 4 }, + shadowOpacity: 0.3, + shadowRadius: 8, + elevation: 10, + }, + dropdownModalItem: { + paddingHorizontal: 16, + paddingVertical: 14, + borderBottomWidth: 1, + borderBottomColor: "#f0f0f0", + }, + dropdownModalItemText: { + fontSize: 14, + color: "#333", + }, + selectedItemText: { + fontWeight: "600", + color: "#1054C9", + }, + input: { + borderWidth: 1, + borderColor: "#ddd", + borderRadius: 8, + paddingHorizontal: 12, + paddingVertical: 12, + fontSize: 14, + color: "#333", + textAlignVertical: "top", + }, + errorInput: { + borderColor: "#ff4444", + }, + errorText: { + color: "#ff4444", + fontSize: 12, + marginTop: 4, + }, +}); + +export default SosButton; diff --git a/components/ui/gluestack-ui-provider/alert-dialog/index.tsx b/components/ui/gluestack-ui-provider/alert-dialog/index.tsx new file mode 100644 index 0000000..f605e51 --- /dev/null +++ b/components/ui/gluestack-ui-provider/alert-dialog/index.tsx @@ -0,0 +1,296 @@ +'use client'; +import React from 'react'; +import { createAlertDialog } from '@gluestack-ui/core/alert-dialog/creator'; +import { tva } from '@gluestack-ui/utils/nativewind-utils'; +import { + withStyleContext, + useStyleContext, +} from '@gluestack-ui/utils/nativewind-utils'; + +import { cssInterop } from 'nativewind'; +import type { VariantProps } from '@gluestack-ui/utils/nativewind-utils'; +import { + Motion, + AnimatePresence, + createMotionAnimatedComponent, + MotionComponentProps, +} from '@legendapp/motion'; +import { View, Pressable, ScrollView, ViewStyle } from 'react-native'; + +const SCOPE = 'ALERT_DIALOG'; + +const RootComponent = withStyleContext(View, SCOPE); + +type IMotionViewProps = React.ComponentProps & + MotionComponentProps; + +const MotionView = Motion.View as React.ComponentType; + +type IAnimatedPressableProps = React.ComponentProps & + MotionComponentProps; + +const AnimatedPressable = createMotionAnimatedComponent( + Pressable +) as React.ComponentType; + +const UIAccessibleAlertDialog = createAlertDialog({ + Root: RootComponent, + Body: ScrollView, + Content: MotionView, + CloseButton: Pressable, + Header: View, + Footer: View, + Backdrop: AnimatedPressable, + AnimatePresence: AnimatePresence, +}); + +cssInterop(MotionView, { className: 'style' }); +cssInterop(AnimatedPressable, { className: 'style' }); + +const alertDialogStyle = tva({ + base: 'group/modal w-full h-full justify-center items-center web:pointer-events-none', + parentVariants: { + size: { + xs: '', + sm: '', + md: '', + lg: '', + full: '', + }, + }, +}); + +const alertDialogContentStyle = tva({ + base: 'bg-background-0 rounded-lg overflow-hidden border border-outline-100 p-6', + parentVariants: { + size: { + xs: 'w-[60%] max-w-[360px]', + sm: 'w-[70%] max-w-[420px]', + md: 'w-[80%] max-w-[510px]', + lg: 'w-[90%] max-w-[640px]', + full: 'w-full', + }, + }, +}); + +const alertDialogCloseButtonStyle = tva({ + base: 'group/alert-dialog-close-button z-10 rounded-sm p-2 data-[focus-visible=true]:bg-background-100 web:cursor-pointer outline-0', +}); + +const alertDialogHeaderStyle = tva({ + base: 'justify-between items-center flex-row', +}); + +const alertDialogFooterStyle = tva({ + base: 'flex-row justify-end items-center gap-3', +}); + +const alertDialogBodyStyle = tva({ base: '' }); + +const alertDialogBackdropStyle = tva({ + base: 'absolute left-0 top-0 right-0 bottom-0 bg-background-dark web:cursor-default', +}); + +type IAlertDialogProps = React.ComponentPropsWithoutRef< + typeof UIAccessibleAlertDialog +> & + VariantProps; + +type IAlertDialogContentProps = React.ComponentPropsWithoutRef< + typeof UIAccessibleAlertDialog.Content +> & + VariantProps & { className?: string }; + +type IAlertDialogCloseButtonProps = React.ComponentPropsWithoutRef< + typeof UIAccessibleAlertDialog.CloseButton +> & + VariantProps; + +type IAlertDialogHeaderProps = React.ComponentPropsWithoutRef< + typeof UIAccessibleAlertDialog.Header +> & + VariantProps; + +type IAlertDialogFooterProps = React.ComponentPropsWithoutRef< + typeof UIAccessibleAlertDialog.Footer +> & + VariantProps; + +type IAlertDialogBodyProps = React.ComponentPropsWithoutRef< + typeof UIAccessibleAlertDialog.Body +> & + VariantProps; + +type IAlertDialogBackdropProps = React.ComponentPropsWithoutRef< + typeof UIAccessibleAlertDialog.Backdrop +> & + VariantProps & { className?: string }; + +const AlertDialog = React.forwardRef< + React.ComponentRef, + IAlertDialogProps +>(function AlertDialog({ className, size = 'md', ...props }, ref) { + return ( + + ); +}); + +const AlertDialogContent = React.forwardRef< + React.ComponentRef, + IAlertDialogContentProps +>(function AlertDialogContent({ className, size, ...props }, ref) { + const { size: parentSize } = useStyleContext(SCOPE); + + return ( + + ); +}); + +const AlertDialogCloseButton = React.forwardRef< + React.ComponentRef, + IAlertDialogCloseButtonProps +>(function AlertDialogCloseButton({ className, ...props }, ref) { + return ( + + ); +}); + +const AlertDialogHeader = React.forwardRef< + React.ComponentRef, + IAlertDialogHeaderProps +>(function AlertDialogHeader({ className, ...props }, ref) { + return ( + + ); +}); + +const AlertDialogFooter = React.forwardRef< + React.ComponentRef, + IAlertDialogFooterProps +>(function AlertDialogFooter({ className, ...props }, ref) { + return ( + + ); +}); + +const AlertDialogBody = React.forwardRef< + React.ComponentRef, + IAlertDialogBodyProps +>(function AlertDialogBody({ className, ...props }, ref) { + return ( + + ); +}); + +const AlertDialogBackdrop = React.forwardRef< + React.ComponentRef, + IAlertDialogBackdropProps +>(function AlertDialogBackdrop({ className, ...props }, ref) { + return ( + + ); +}); + +AlertDialog.displayName = 'AlertDialog'; +AlertDialogContent.displayName = 'AlertDialogContent'; +AlertDialogCloseButton.displayName = 'AlertDialogCloseButton'; +AlertDialogHeader.displayName = 'AlertDialogHeader'; +AlertDialogFooter.displayName = 'AlertDialogFooter'; +AlertDialogBody.displayName = 'AlertDialogBody'; +AlertDialogBackdrop.displayName = 'AlertDialogBackdrop'; + +export { + AlertDialog, + AlertDialogContent, + AlertDialogCloseButton, + AlertDialogHeader, + AlertDialogFooter, + AlertDialogBody, + AlertDialogBackdrop, +}; diff --git a/components/ui/gluestack-ui-provider/button/index.tsx b/components/ui/gluestack-ui-provider/button/index.tsx new file mode 100644 index 0000000..fd4b639 --- /dev/null +++ b/components/ui/gluestack-ui-provider/button/index.tsx @@ -0,0 +1,434 @@ +'use client'; +import React from 'react'; +import { createButton } from '@gluestack-ui/core/button/creator'; +import { + tva, + withStyleContext, + useStyleContext, + type VariantProps, +} from '@gluestack-ui/utils/nativewind-utils'; +import { cssInterop } from 'nativewind'; +import { ActivityIndicator, Pressable, Text, View } from 'react-native'; +import { PrimitiveIcon, UIIcon } from '@gluestack-ui/core/icon/creator'; + +const SCOPE = 'BUTTON'; + +const Root = withStyleContext(Pressable, SCOPE); + +const UIButton = createButton({ + Root: Root, + Text, + Group: View, + Spinner: ActivityIndicator, + Icon: UIIcon, +}); + +cssInterop(PrimitiveIcon, { + className: { + target: 'style', + nativeStyleToProp: { + height: true, + width: true, + fill: true, + color: 'classNameColor', + stroke: true, + }, + }, +}); + +const buttonStyle = tva({ + base: 'group/button rounded bg-primary-500 flex-row items-center justify-center data-[focus-visible=true]:web:outline-none data-[focus-visible=true]:web:ring-2 data-[disabled=true]:opacity-40 gap-2', + variants: { + action: { + primary: + 'bg-primary-500 data-[hover=true]:bg-primary-600 data-[active=true]:bg-primary-700 border-primary-300 data-[hover=true]:border-primary-400 data-[active=true]:border-primary-500 data-[focus-visible=true]:web:ring-indicator-info', + secondary: + 'bg-secondary-500 border-secondary-300 data-[hover=true]:bg-secondary-600 data-[hover=true]:border-secondary-400 data-[active=true]:bg-secondary-700 data-[active=true]:border-secondary-700 data-[focus-visible=true]:web:ring-indicator-info', + positive: + 'bg-success-500 border-success-300 data-[hover=true]:bg-success-600 data-[hover=true]:border-success-400 data-[active=true]:bg-success-700 data-[active=true]:border-success-500 data-[focus-visible=true]:web:ring-indicator-info', + negative: + 'bg-error-500 border-error-300 data-[hover=true]:bg-error-600 data-[hover=true]:border-error-400 data-[active=true]:bg-error-700 data-[active=true]:border-error-500 data-[focus-visible=true]:web:ring-indicator-info', + default: + 'bg-transparent data-[hover=true]:bg-background-50 data-[active=true]:bg-transparent', + }, + variant: { + link: 'px-0', + outline: + 'bg-transparent border data-[hover=true]:bg-background-50 data-[active=true]:bg-transparent', + solid: '', + }, + + size: { + xs: 'px-3.5 h-8', + sm: 'px-4 h-9', + md: 'px-5 h-10', + lg: 'px-6 h-11', + xl: 'px-7 h-12', + }, + }, + compoundVariants: [ + { + action: 'primary', + variant: 'link', + class: + 'px-0 bg-transparent data-[hover=true]:bg-transparent data-[active=true]:bg-transparent', + }, + { + action: 'secondary', + variant: 'link', + class: + 'px-0 bg-transparent data-[hover=true]:bg-transparent data-[active=true]:bg-transparent', + }, + { + action: 'positive', + variant: 'link', + class: + 'px-0 bg-transparent data-[hover=true]:bg-transparent data-[active=true]:bg-transparent', + }, + { + action: 'negative', + variant: 'link', + class: + 'px-0 bg-transparent data-[hover=true]:bg-transparent data-[active=true]:bg-transparent', + }, + { + action: 'primary', + variant: 'outline', + class: + 'bg-transparent data-[hover=true]:bg-background-50 data-[active=true]:bg-transparent', + }, + { + action: 'secondary', + variant: 'outline', + class: + 'bg-transparent data-[hover=true]:bg-background-50 data-[active=true]:bg-transparent', + }, + { + action: 'positive', + variant: 'outline', + class: + 'bg-transparent data-[hover=true]:bg-background-50 data-[active=true]:bg-transparent', + }, + { + action: 'negative', + variant: 'outline', + class: + 'bg-transparent data-[hover=true]:bg-background-50 data-[active=true]:bg-transparent', + }, + ], +}); + +const buttonTextStyle = tva({ + base: 'text-typography-0 font-semibold web:select-none', + parentVariants: { + action: { + primary: + 'text-primary-600 data-[hover=true]:text-primary-600 data-[active=true]:text-primary-700', + secondary: + 'text-typography-500 data-[hover=true]:text-typography-600 data-[active=true]:text-typography-700', + positive: + 'text-success-600 data-[hover=true]:text-success-600 data-[active=true]:text-success-700', + negative: + 'text-error-600 data-[hover=true]:text-error-600 data-[active=true]:text-error-700', + }, + variant: { + link: 'data-[hover=true]:underline data-[active=true]:underline', + outline: '', + solid: + 'text-typography-0 data-[hover=true]:text-typography-0 data-[active=true]:text-typography-0', + }, + size: { + xs: 'text-xs', + sm: 'text-sm', + md: 'text-base', + lg: 'text-lg', + xl: 'text-xl', + }, + }, + parentCompoundVariants: [ + { + variant: 'solid', + action: 'primary', + class: + 'text-typography-0 data-[hover=true]:text-typography-0 data-[active=true]:text-typography-0', + }, + { + variant: 'solid', + action: 'secondary', + class: + 'text-typography-800 data-[hover=true]:text-typography-800 data-[active=true]:text-typography-800', + }, + { + variant: 'solid', + action: 'positive', + class: + 'text-typography-0 data-[hover=true]:text-typography-0 data-[active=true]:text-typography-0', + }, + { + variant: 'solid', + action: 'negative', + class: + 'text-typography-0 data-[hover=true]:text-typography-0 data-[active=true]:text-typography-0', + }, + { + variant: 'outline', + action: 'primary', + class: + 'text-primary-500 data-[hover=true]:text-primary-500 data-[active=true]:text-primary-500', + }, + { + variant: 'outline', + action: 'secondary', + class: + 'text-typography-500 data-[hover=true]:text-primary-600 data-[active=true]:text-typography-700', + }, + { + variant: 'outline', + action: 'positive', + class: + 'text-primary-500 data-[hover=true]:text-primary-500 data-[active=true]:text-primary-500', + }, + { + variant: 'outline', + action: 'negative', + class: + 'text-primary-500 data-[hover=true]:text-primary-500 data-[active=true]:text-primary-500', + }, + ], +}); + +const buttonIconStyle = tva({ + base: 'fill-none', + parentVariants: { + variant: { + link: 'data-[hover=true]:underline data-[active=true]:underline', + outline: '', + solid: + 'text-typography-0 data-[hover=true]:text-typography-0 data-[active=true]:text-typography-0', + }, + size: { + xs: 'h-3.5 w-3.5', + sm: 'h-4 w-4', + md: 'h-[18px] w-[18px]', + lg: 'h-[18px] w-[18px]', + xl: 'h-5 w-5', + }, + action: { + primary: + 'text-primary-600 data-[hover=true]:text-primary-600 data-[active=true]:text-primary-700', + secondary: + 'text-typography-500 data-[hover=true]:text-typography-600 data-[active=true]:text-typography-700', + positive: + 'text-success-600 data-[hover=true]:text-success-600 data-[active=true]:text-success-700', + + negative: + 'text-error-600 data-[hover=true]:text-error-600 data-[active=true]:text-error-700', + }, + }, + parentCompoundVariants: [ + { + variant: 'solid', + action: 'primary', + class: + 'text-typography-0 data-[hover=true]:text-typography-0 data-[active=true]:text-typography-0', + }, + { + variant: 'solid', + action: 'secondary', + class: + 'text-typography-800 data-[hover=true]:text-typography-800 data-[active=true]:text-typography-800', + }, + { + variant: 'solid', + action: 'positive', + class: + 'text-typography-0 data-[hover=true]:text-typography-0 data-[active=true]:text-typography-0', + }, + { + variant: 'solid', + action: 'negative', + class: + 'text-typography-0 data-[hover=true]:text-typography-0 data-[active=true]:text-typography-0', + }, + ], +}); + +const buttonGroupStyle = tva({ + base: '', + variants: { + space: { + 'xs': 'gap-1', + 'sm': 'gap-2', + 'md': 'gap-3', + 'lg': 'gap-4', + 'xl': 'gap-5', + '2xl': 'gap-6', + '3xl': 'gap-7', + '4xl': 'gap-8', + }, + isAttached: { + true: 'gap-0', + }, + flexDirection: { + 'row': 'flex-row', + 'column': 'flex-col', + 'row-reverse': 'flex-row-reverse', + 'column-reverse': 'flex-col-reverse', + }, + }, +}); + +type IButtonProps = Omit< + React.ComponentPropsWithoutRef, + 'context' +> & + VariantProps & { className?: string }; + +const Button = React.forwardRef< + React.ElementRef, + IButtonProps +>( + ( + { className, variant = 'solid', size = 'md', action = 'primary', ...props }, + ref + ) => { + return ( + + ); + } +); + +type IButtonTextProps = React.ComponentPropsWithoutRef & + VariantProps & { className?: string }; + +const ButtonText = React.forwardRef< + React.ElementRef, + IButtonTextProps +>(({ className, variant, size, action, ...props }, ref) => { + const { + variant: parentVariant, + size: parentSize, + action: parentAction, + } = useStyleContext(SCOPE); + + return ( + + ); +}); + +const ButtonSpinner = UIButton.Spinner; + +type IButtonIcon = React.ComponentPropsWithoutRef & + VariantProps & { + className?: string | undefined; + as?: React.ElementType; + height?: number; + width?: number; + }; + +const ButtonIcon = React.forwardRef< + React.ElementRef, + IButtonIcon +>(({ className, size, ...props }, ref) => { + const { + variant: parentVariant, + size: parentSize, + action: parentAction, + } = useStyleContext(SCOPE); + + if (typeof size === 'number') { + return ( + + ); + } else if ( + (props.height !== undefined || props.width !== undefined) && + size === undefined + ) { + return ( + + ); + } + return ( + + ); +}); + +type IButtonGroupProps = React.ComponentPropsWithoutRef & + VariantProps; + +const ButtonGroup = React.forwardRef< + React.ElementRef, + IButtonGroupProps +>( + ( + { + className, + space = 'md', + isAttached = false, + flexDirection = 'column', + ...props + }, + ref + ) => { + return ( + + ); + } +); + +Button.displayName = 'Button'; +ButtonText.displayName = 'ButtonText'; +ButtonSpinner.displayName = 'ButtonSpinner'; +ButtonIcon.displayName = 'ButtonIcon'; +ButtonGroup.displayName = 'ButtonGroup'; + +export { Button, ButtonText, ButtonSpinner, ButtonIcon, ButtonGroup }; diff --git a/components/ui/gluestack-ui-provider/gluestack-ui-provider/config.ts b/components/ui/gluestack-ui-provider/gluestack-ui-provider/config.ts new file mode 100644 index 0000000..f388cc6 --- /dev/null +++ b/components/ui/gluestack-ui-provider/gluestack-ui-provider/config.ts @@ -0,0 +1,309 @@ +'use client'; +import { vars } from 'nativewind'; + +export const config = { + light: vars({ + '--color-primary-0': '179 179 179', + '--color-primary-50': '153 153 153', + '--color-primary-100': '128 128 128', + '--color-primary-200': '115 115 115', + '--color-primary-300': '102 102 102', + '--color-primary-400': '82 82 82', + '--color-primary-500': '51 51 51', + '--color-primary-600': '41 41 41', + '--color-primary-700': '31 31 31', + '--color-primary-800': '13 13 13', + '--color-primary-900': '10 10 10', + '--color-primary-950': '8 8 8', + + /* Secondary */ + '--color-secondary-0': '253 253 253', + '--color-secondary-50': '251 251 251', + '--color-secondary-100': '246 246 246', + '--color-secondary-200': '242 242 242', + '--color-secondary-300': '237 237 237', + '--color-secondary-400': '230 230 231', + '--color-secondary-500': '217 217 219', + '--color-secondary-600': '198 199 199', + '--color-secondary-700': '189 189 189', + '--color-secondary-800': '177 177 177', + '--color-secondary-900': '165 164 164', + '--color-secondary-950': '157 157 157', + + /* Tertiary */ + '--color-tertiary-0': '255 250 245', + '--color-tertiary-50': '255 242 229', + '--color-tertiary-100': '255 233 213', + '--color-tertiary-200': '254 209 170', + '--color-tertiary-300': '253 180 116', + '--color-tertiary-400': '251 157 75', + '--color-tertiary-500': '231 129 40', + '--color-tertiary-600': '215 117 31', + '--color-tertiary-700': '180 98 26', + '--color-tertiary-800': '130 73 23', + '--color-tertiary-900': '108 61 19', + '--color-tertiary-950': '84 49 18', + + /* Error */ + '--color-error-0': '254 233 233', + '--color-error-50': '254 226 226', + '--color-error-100': '254 202 202', + '--color-error-200': '252 165 165', + '--color-error-300': '248 113 113', + '--color-error-400': '239 68 68', + '--color-error-500': '230 53 53', + '--color-error-600': '220 38 38', + '--color-error-700': '185 28 28', + '--color-error-800': '153 27 27', + '--color-error-900': '127 29 29', + '--color-error-950': '83 19 19', + + /* Success */ + '--color-success-0': '228 255 244', + '--color-success-50': '202 255 232', + '--color-success-100': '162 241 192', + '--color-success-200': '132 211 162', + '--color-success-300': '102 181 132', + '--color-success-400': '72 151 102', + '--color-success-500': '52 131 82', + '--color-success-600': '42 121 72', + '--color-success-700': '32 111 62', + '--color-success-800': '22 101 52', + '--color-success-900': '20 83 45', + '--color-success-950': '27 50 36', + + /* Warning */ + '--color-warning-0': '255 249 245', + '--color-warning-50': '255 244 236', + '--color-warning-100': '255 231 213', + '--color-warning-200': '254 205 170', + '--color-warning-300': '253 173 116', + '--color-warning-400': '251 149 75', + '--color-warning-500': '231 120 40', + '--color-warning-600': '215 108 31', + '--color-warning-700': '180 90 26', + '--color-warning-800': '130 68 23', + '--color-warning-900': '108 56 19', + '--color-warning-950': '84 45 18', + + /* Info */ + '--color-info-0': '236 248 254', + '--color-info-50': '199 235 252', + '--color-info-100': '162 221 250', + '--color-info-200': '124 207 248', + '--color-info-300': '87 194 246', + '--color-info-400': '50 180 244', + '--color-info-500': '13 166 242', + '--color-info-600': '11 141 205', + '--color-info-700': '9 115 168', + '--color-info-800': '7 90 131', + '--color-info-900': '5 64 93', + '--color-info-950': '3 38 56', + + /* Typography */ + '--color-typography-0': '254 254 255', + '--color-typography-50': '245 245 245', + '--color-typography-100': '229 229 229', + '--color-typography-200': '219 219 220', + '--color-typography-300': '212 212 212', + '--color-typography-400': '163 163 163', + '--color-typography-500': '140 140 140', + '--color-typography-600': '115 115 115', + '--color-typography-700': '82 82 82', + '--color-typography-800': '64 64 64', + '--color-typography-900': '38 38 39', + '--color-typography-950': '23 23 23', + + /* Outline */ + '--color-outline-0': '253 254 254', + '--color-outline-50': '243 243 243', + '--color-outline-100': '230 230 230', + '--color-outline-200': '221 220 219', + '--color-outline-300': '211 211 211', + '--color-outline-400': '165 163 163', + '--color-outline-500': '140 141 141', + '--color-outline-600': '115 116 116', + '--color-outline-700': '83 82 82', + '--color-outline-800': '65 65 65', + '--color-outline-900': '39 38 36', + '--color-outline-950': '26 23 23', + + /* Background */ + '--color-background-0': '255 255 255', + '--color-background-50': '246 246 246', + '--color-background-100': '242 241 241', + '--color-background-200': '220 219 219', + '--color-background-300': '213 212 212', + '--color-background-400': '162 163 163', + '--color-background-500': '142 142 142', + '--color-background-600': '116 116 116', + '--color-background-700': '83 82 82', + '--color-background-800': '65 64 64', + '--color-background-900': '39 38 37', + '--color-background-950': '18 18 18', + + /* Background Special */ + '--color-background-error': '254 241 241', + '--color-background-warning': '255 243 234', + '--color-background-success': '237 252 242', + '--color-background-muted': '247 248 247', + '--color-background-info': '235 248 254', + + /* Focus Ring Indicator */ + '--color-indicator-primary': '55 55 55', + '--color-indicator-info': '83 153 236', + '--color-indicator-error': '185 28 28', + }), + dark: vars({ + '--color-primary-0': '166 166 166', + '--color-primary-50': '175 175 175', + '--color-primary-100': '186 186 186', + '--color-primary-200': '197 197 197', + '--color-primary-300': '212 212 212', + '--color-primary-400': '221 221 221', + '--color-primary-500': '230 230 230', + '--color-primary-600': '240 240 240', + '--color-primary-700': '250 250 250', + '--color-primary-800': '253 253 253', + '--color-primary-900': '254 249 249', + '--color-primary-950': '253 252 252', + + /* Secondary */ + '--color-secondary-0': '20 20 20', + '--color-secondary-50': '23 23 23', + '--color-secondary-100': '31 31 31', + '--color-secondary-200': '39 39 39', + '--color-secondary-300': '44 44 44', + '--color-secondary-400': '56 57 57', + '--color-secondary-500': '63 64 64', + '--color-secondary-600': '86 86 86', + '--color-secondary-700': '110 110 110', + '--color-secondary-800': '135 135 135', + '--color-secondary-900': '150 150 150', + '--color-secondary-950': '164 164 164', + + /* Tertiary */ + '--color-tertiary-0': '84 49 18', + '--color-tertiary-50': '108 61 19', + '--color-tertiary-100': '130 73 23', + '--color-tertiary-200': '180 98 26', + '--color-tertiary-300': '215 117 31', + '--color-tertiary-400': '231 129 40', + '--color-tertiary-500': '251 157 75', + '--color-tertiary-600': '253 180 116', + '--color-tertiary-700': '254 209 170', + '--color-tertiary-800': '255 233 213', + '--color-tertiary-900': '255 242 229', + '--color-tertiary-950': '255 250 245', + + /* Error */ + '--color-error-0': '83 19 19', + '--color-error-50': '127 29 29', + '--color-error-100': '153 27 27', + '--color-error-200': '185 28 28', + '--color-error-300': '220 38 38', + '--color-error-400': '230 53 53', + '--color-error-500': '239 68 68', + '--color-error-600': '249 97 96', + '--color-error-700': '229 91 90', + '--color-error-800': '254 202 202', + '--color-error-900': '254 226 226', + '--color-error-950': '254 233 233', + + /* Success */ + '--color-success-0': '27 50 36', + '--color-success-50': '20 83 45', + '--color-success-100': '22 101 52', + '--color-success-200': '32 111 62', + '--color-success-300': '42 121 72', + '--color-success-400': '52 131 82', + '--color-success-500': '72 151 102', + '--color-success-600': '102 181 132', + '--color-success-700': '132 211 162', + '--color-success-800': '162 241 192', + '--color-success-900': '202 255 232', + '--color-success-950': '228 255 244', + + /* Warning */ + '--color-warning-0': '84 45 18', + '--color-warning-50': '108 56 19', + '--color-warning-100': '130 68 23', + '--color-warning-200': '180 90 26', + '--color-warning-300': '215 108 31', + '--color-warning-400': '231 120 40', + '--color-warning-500': '251 149 75', + '--color-warning-600': '253 173 116', + '--color-warning-700': '254 205 170', + '--color-warning-800': '255 231 213', + '--color-warning-900': '255 244 237', + '--color-warning-950': '255 249 245', + + /* Info */ + '--color-info-0': '3 38 56', + '--color-info-50': '5 64 93', + '--color-info-100': '7 90 131', + '--color-info-200': '9 115 168', + '--color-info-300': '11 141 205', + '--color-info-400': '13 166 242', + '--color-info-500': '50 180 244', + '--color-info-600': '87 194 246', + '--color-info-700': '124 207 248', + '--color-info-800': '162 221 250', + '--color-info-900': '199 235 252', + '--color-info-950': '236 248 254', + + /* Typography */ + '--color-typography-0': '23 23 23', + '--color-typography-50': '38 38 39', + '--color-typography-100': '64 64 64', + '--color-typography-200': '82 82 82', + '--color-typography-300': '115 115 115', + '--color-typography-400': '140 140 140', + '--color-typography-500': '163 163 163', + '--color-typography-600': '212 212 212', + '--color-typography-700': '219 219 220', + '--color-typography-800': '229 229 229', + '--color-typography-900': '245 245 245', + '--color-typography-950': '254 254 255', + + /* Outline */ + '--color-outline-0': '26 23 23', + '--color-outline-50': '39 38 36', + '--color-outline-100': '65 65 65', + '--color-outline-200': '83 82 82', + '--color-outline-300': '115 116 116', + '--color-outline-400': '140 141 141', + '--color-outline-500': '165 163 163', + '--color-outline-600': '211 211 211', + '--color-outline-700': '221 220 219', + '--color-outline-800': '230 230 230', + '--color-outline-900': '243 243 243', + '--color-outline-950': '253 254 254', + + /* Background */ + '--color-background-0': '18 18 18', + '--color-background-50': '39 38 37', + '--color-background-100': '65 64 64', + '--color-background-200': '83 82 82', + '--color-background-300': '116 116 116', + '--color-background-400': '142 142 142', + '--color-background-500': '162 163 163', + '--color-background-600': '213 212 212', + '--color-background-700': '229 228 228', + '--color-background-800': '242 241 241', + '--color-background-900': '246 246 246', + '--color-background-950': '255 255 255', + + /* Background Special */ + '--color-background-error': '66 43 43', + '--color-background-warning': '65 47 35', + '--color-background-success': '28 43 33', + '--color-background-muted': '51 51 51', + '--color-background-info': '26 40 46', + + /* Focus Ring Indicator */ + '--color-indicator-primary': '247 247 247', + '--color-indicator-info': '161 199 245', + '--color-indicator-error': '232 70 69', + }), +}; diff --git a/components/ui/gluestack-ui-provider/gluestack-ui-provider/index.next15.tsx b/components/ui/gluestack-ui-provider/gluestack-ui-provider/index.next15.tsx new file mode 100644 index 0000000..4fafc40 --- /dev/null +++ b/components/ui/gluestack-ui-provider/gluestack-ui-provider/index.next15.tsx @@ -0,0 +1,87 @@ +// This is a Next.js 15 compatible version of the GluestackUIProvider +'use client'; +import React, { useEffect, useLayoutEffect } from 'react'; +import { config } from './config'; +import { OverlayProvider } from '@gluestack-ui/core/overlay/creator'; +import { ToastProvider } from '@gluestack-ui/core/toast/creator'; +import { setFlushStyles } from '@gluestack-ui/utils/nativewind-utils'; +import { script } from './script'; + +const variableStyleTagId = 'nativewind-style'; +const createStyle = (styleTagId: string) => { + const style = document.createElement('style'); + style.id = styleTagId; + style.appendChild(document.createTextNode('')); + return style; +}; + +export const useSafeLayoutEffect = + typeof window !== 'undefined' ? useLayoutEffect : useEffect; + +export function GluestackUIProvider({ + mode = 'light', + ...props +}: { + mode?: 'light' | 'dark' | 'system'; + children?: React.ReactNode; +}) { + let cssVariablesWithMode = ``; + Object.keys(config).forEach((configKey) => { + cssVariablesWithMode += + configKey === 'dark' ? `\n .dark {\n ` : `\n:root {\n`; + const cssVariables = Object.keys( + config[configKey as keyof typeof config] + ).reduce((acc: string, curr: string) => { + acc += `${curr}:${config[configKey as keyof typeof config][curr]}; `; + return acc; + }, ''); + cssVariablesWithMode += `${cssVariables} \n}`; + }); + + setFlushStyles(cssVariablesWithMode); + + const handleMediaQuery = React.useCallback((e: MediaQueryListEvent) => { + script(e.matches ? 'dark' : 'light'); + }, []); + + useSafeLayoutEffect(() => { + if (mode !== 'system') { + const documentElement = document.documentElement; + if (documentElement) { + documentElement.classList.add(mode); + documentElement.classList.remove(mode === 'light' ? 'dark' : 'light'); + documentElement.style.colorScheme = mode; + } + } + }, [mode]); + + useSafeLayoutEffect(() => { + if (mode !== 'system') return; + const media = window.matchMedia('(prefers-color-scheme: dark)'); + + media.addListener(handleMediaQuery); + + return () => media.removeListener(handleMediaQuery); + }, [handleMediaQuery]); + + useSafeLayoutEffect(() => { + if (typeof window !== 'undefined') { + const documentElement = document.documentElement; + if (documentElement) { + const head = documentElement.querySelector('head'); + let style = head?.querySelector(`[id='${variableStyleTagId}']`); + if (!style) { + style = createStyle(variableStyleTagId); + style.innerHTML = cssVariablesWithMode; + if (head) head.appendChild(style); + } + } + } + }, []); + + return ( + + {props.children} + + ); +} diff --git a/components/ui/gluestack-ui-provider/gluestack-ui-provider/index.tsx b/components/ui/gluestack-ui-provider/gluestack-ui-provider/index.tsx new file mode 100644 index 0000000..3453713 --- /dev/null +++ b/components/ui/gluestack-ui-provider/gluestack-ui-provider/index.tsx @@ -0,0 +1,38 @@ +import React, { useEffect } from 'react'; +import { config } from './config'; +import { View, ViewProps } from 'react-native'; +import { OverlayProvider } from '@gluestack-ui/core/overlay/creator'; +import { ToastProvider } from '@gluestack-ui/core/toast/creator'; +import { useColorScheme } from 'nativewind'; + +export type ModeType = 'light' | 'dark' | 'system'; + +export function GluestackUIProvider({ + mode = 'light', + ...props +}: { + mode?: ModeType; + children?: React.ReactNode; + style?: ViewProps['style']; +}) { + const { colorScheme, setColorScheme } = useColorScheme(); + + useEffect(() => { + setColorScheme(mode); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [mode]); + + return ( + + + {props.children} + + + ); +} diff --git a/components/ui/gluestack-ui-provider/gluestack-ui-provider/index.web.tsx b/components/ui/gluestack-ui-provider/gluestack-ui-provider/index.web.tsx new file mode 100644 index 0000000..610b6ad --- /dev/null +++ b/components/ui/gluestack-ui-provider/gluestack-ui-provider/index.web.tsx @@ -0,0 +1,96 @@ +'use client'; +import React, { useEffect, useLayoutEffect } from 'react'; +import { config } from './config'; +import { OverlayProvider } from '@gluestack-ui/core/overlay/creator'; +import { ToastProvider } from '@gluestack-ui/core/toast/creator'; +import { setFlushStyles } from '@gluestack-ui/utils/nativewind-utils'; +import { script } from './script'; + +export type ModeType = 'light' | 'dark' | 'system'; + +const variableStyleTagId = 'nativewind-style'; +const createStyle = (styleTagId: string) => { + const style = document.createElement('style'); + style.id = styleTagId; + style.appendChild(document.createTextNode('')); + return style; +}; + +export const useSafeLayoutEffect = + typeof window !== 'undefined' ? useLayoutEffect : useEffect; + +export function GluestackUIProvider({ + mode = 'light', + ...props +}: { + mode?: ModeType; + children?: React.ReactNode; +}) { + let cssVariablesWithMode = ``; + Object.keys(config).forEach((configKey) => { + cssVariablesWithMode += + configKey === 'dark' ? `\n .dark {\n ` : `\n:root {\n`; + const cssVariables = Object.keys( + config[configKey as keyof typeof config] + ).reduce((acc: string, curr: string) => { + acc += `${curr}:${config[configKey as keyof typeof config][curr]}; `; + return acc; + }, ''); + cssVariablesWithMode += `${cssVariables} \n}`; + }); + + setFlushStyles(cssVariablesWithMode); + + const handleMediaQuery = React.useCallback((e: MediaQueryListEvent) => { + script(e.matches ? 'dark' : 'light'); + }, []); + + useSafeLayoutEffect(() => { + if (mode !== 'system') { + const documentElement = document.documentElement; + if (documentElement) { + documentElement.classList.add(mode); + documentElement.classList.remove(mode === 'light' ? 'dark' : 'light'); + documentElement.style.colorScheme = mode; + } + } + }, [mode]); + + useSafeLayoutEffect(() => { + if (mode !== 'system') return; + const media = window.matchMedia('(prefers-color-scheme: dark)'); + + media.addListener(handleMediaQuery); + + return () => media.removeListener(handleMediaQuery); + }, [handleMediaQuery]); + + useSafeLayoutEffect(() => { + if (typeof window !== 'undefined') { + const documentElement = document.documentElement; + if (documentElement) { + const head = documentElement.querySelector('head'); + let style = head?.querySelector(`[id='${variableStyleTagId}']`); + if (!style) { + style = createStyle(variableStyleTagId); + style.innerHTML = cssVariablesWithMode; + if (head) head.appendChild(style); + } + } + } + }, []); + + return ( + <> +