@niibase/uniwind 1.0.0

package/src/components/native/Switch.tsx

@@ -0,0 +1,28 @@
+import { Switch as RNSwitch, SwitchProps } from 'react-native'
+import { ComponentState } from '../../core/types'
+import { useUniwindAccent } from '../../hooks/useUniwindAccent.native'
+import { copyComponentProperties } from '../utils'
+import { useStyle } from './useStyle'
+
+export const Switch = copyComponentProperties(RNSwitch, (props: SwitchProps) => {
+    const state = {
+        isDisabled: Boolean(props.disabled),
+    } satisfies ComponentState
+    const style = useStyle(props.className, state)
+    const trackColorOn = useUniwindAccent(props.trackColorOnClassName, state)
+    const trackColorOff = useUniwindAccent(props.trackColorOffClassName, state)
+    const thumbColor = useUniwindAccent(props.thumbColorClassName, state)
+    const ios_backgroundColor = useUniwindAccent(props.ios_backgroundColorClassName, state)
+
+    return (
+        <RNSwitch
+            {...props}
+            style={[style, props.style]}
+            thumbColor={props.thumbColor ?? thumbColor}
+            trackColor={{ true: props.trackColor?.true ?? trackColorOn, false: props.trackColor?.false ?? trackColorOff }}
+            ios_backgroundColor={props.ios_backgroundColor ?? ios_backgroundColor}
+        />
+    )
+})
+
+export default Switch

package/src/components/native/Text.tsx

@@ -0,0 +1,39 @@
+import { useState } from 'react'
+import { Text as RNText, TextProps } from 'react-native'
+import { ComponentState } from '../../core/types'
+import { useUniwindAccent } from '../../hooks/useUniwindAccent.native'
+import { copyComponentProperties } from '../utils'
+import { useStyle } from './useStyle'
+
+type StyleWithWebkitLineClamp = {
+    WebkitLineClamp?: number
+}
+
+export const Text = copyComponentProperties(RNText, (props: TextProps) => {
+    const [isPressed, setIsPressed] = useState(false)
+    const state = {
+        isPressed,
+        isDisabled: Boolean(props.disabled),
+    } satisfies ComponentState
+    const style = useStyle(props.className, state)
+    const selectionColor = useUniwindAccent(props.selectionColorClassName, state)
+
+    return (
+        <RNText
+            {...props}
+            style={[style, props.style]}
+            selectionColor={props.selectionColor ?? selectionColor}
+            numberOfLines={(style as StyleWithWebkitLineClamp).WebkitLineClamp ?? props.numberOfLines}
+            onPressIn={event => {
+                setIsPressed(true)
+                props.onPressIn?.(event)
+            }}
+            onPressOut={event => {
+                setIsPressed(false)
+                props.onPressOut?.(event)
+            }}
+        />
+    )
+})
+
+export default Text

package/src/components/native/TextInput.tsx

@@ -0,0 +1,52 @@
+import { useState } from 'react'
+import { TextInput as RNTextInput, TextInputProps } from 'react-native'
+import { ComponentState } from '../../core/types'
+import { useUniwindAccent } from '../../hooks/useUniwindAccent.native'
+import { copyComponentProperties } from '../utils'
+import { useStyle } from './useStyle'
+
+export const TextInput = copyComponentProperties(RNTextInput, (props: TextInputProps) => {
+    const [isFocused, setIsFocused] = useState(false)
+    const [isPressed, setIsPressed] = useState(false)
+    const state = {
+        isDisabled: props.editable === false,
+        isFocused,
+        isPressed,
+    } satisfies ComponentState
+    const style = useStyle(props.className, state)
+    const cursorColor = useUniwindAccent(props.cursorColorClassName, state)
+    const selectionColor = useUniwindAccent(props.selectionColorClassName, state)
+    const placeholderTextColor = useUniwindAccent(props.placeholderTextColorClassName, state)
+    const selectionHandleColor = useUniwindAccent(props.selectionHandleColorClassName, state)
+    const underlineColorAndroid = useUniwindAccent(props.underlineColorAndroidClassName, state)
+
+    return (
+        <RNTextInput
+            {...props}
+            style={[style, props.style]}
+            cursorColor={props.cursorColor ?? cursorColor}
+            selectionColor={props.selectionColor ?? selectionColor}
+            placeholderTextColor={props.placeholderTextColor ?? placeholderTextColor}
+            selectionHandleColor={props.selectionHandleColor ?? selectionHandleColor}
+            underlineColorAndroid={props.underlineColorAndroid ?? underlineColorAndroid}
+            onFocus={event => {
+                setIsFocused(true)
+                props.onFocus?.(event)
+            }}
+            onBlur={event => {
+                setIsFocused(false)
+                props.onBlur?.(event)
+            }}
+            onPressIn={event => {
+                setIsPressed(true)
+                props.onPressIn?.(event)
+            }}
+            onPressOut={event => {
+                setIsPressed(false)
+                props.onPressOut?.(event)
+            }}
+        />
+    )
+})
+
+export default TextInput

package/src/components/native/TouchableHighlight.tsx

@@ -0,0 +1,34 @@
+import { useState } from 'react'
+import { TouchableHighlight as RNTouchableHighlight, TouchableHighlightProps } from 'react-native'
+import { ComponentState } from '../../core/types'
+import { useUniwindAccent } from '../../hooks/useUniwindAccent.native'
+import { copyComponentProperties } from '../utils'
+import { useStyle } from './useStyle'
+
+export const TouchableHighlight = copyComponentProperties(RNTouchableHighlight, (props: TouchableHighlightProps) => {
+    const [isPressed, setIsPressed] = useState(false)
+    const state = {
+        isDisabled: Boolean(props.disabled),
+        isPressed,
+    } satisfies ComponentState
+    const style = useStyle(props.className, state)
+    const underlayColor = useUniwindAccent(props.underlayColorClassName, state)
+
+    return (
+        <RNTouchableHighlight
+            {...props}
+            style={[style, props.style]}
+            underlayColor={props.underlayColor ?? underlayColor}
+            onPressIn={event => {
+                setIsPressed(true)
+                props.onPressIn?.(event)
+            }}
+            onPressOut={event => {
+                setIsPressed(false)
+                props.onPressOut?.(event)
+            }}
+        />
+    )
+})
+
+export default TouchableHighlight

package/src/components/native/TouchableNativeFeedback.tsx

@@ -0,0 +1,31 @@
+import { useState } from 'react'
+import { TouchableNativeFeedback as RNTouchableNativeFeedback, TouchableNativeFeedbackProps } from 'react-native'
+import { ComponentState } from '../../core/types'
+import { copyComponentProperties } from '../utils'
+import { useStyle } from './useStyle'
+
+export const TouchableNativeFeedback = copyComponentProperties(RNTouchableNativeFeedback, (props: TouchableNativeFeedbackProps) => {
+    const [isPressed, setIsPressed] = useState(false)
+    const state = {
+        isDisabled: Boolean(props.disabled),
+        isPressed,
+    } satisfies ComponentState
+    const style = useStyle(props.className, state)
+
+    return (
+        <RNTouchableNativeFeedback
+            {...props}
+            style={[style, props.style]}
+            onPressIn={event => {
+                setIsPressed(true)
+                props.onPressIn?.(event)
+            }}
+            onPressOut={event => {
+                setIsPressed(false)
+                props.onPressOut?.(event)
+            }}
+        />
+    )
+})
+
+export default TouchableNativeFeedback

package/src/components/native/TouchableOpacity.tsx

@@ -0,0 +1,31 @@
+import { useState } from 'react'
+import { TouchableOpacity as RNTouchableOpacity, TouchableOpacityProps } from 'react-native'
+import { ComponentState } from '../../core/types'
+import { copyComponentProperties } from '../utils'
+import { useStyle } from './useStyle'
+
+export const TouchableOpacity = copyComponentProperties(RNTouchableOpacity, (props: TouchableOpacityProps) => {
+    const [isPressed, setIsPressed] = useState(false)
+    const state = {
+        isDisabled: Boolean(props.disabled),
+        isPressed,
+    } satisfies ComponentState
+    const style = useStyle(props.className, state)
+
+    return (
+        <RNTouchableOpacity
+            {...props}
+            style={[style, props.style]}
+            onPressIn={event => {
+                setIsPressed(true)
+                props.onPressIn?.(event)
+            }}
+            onPressOut={event => {
+                setIsPressed(false)
+                props.onPressOut?.(event)
+            }}
+        />
+    )
+})
+
+export default TouchableOpacity

package/src/components/native/TouchableWithoutFeedback.tsx

@@ -0,0 +1,31 @@
+import { useState } from 'react'
+import { TouchableWithoutFeedback as RNTouchableWithoutFeedback, TouchableWithoutFeedbackProps } from 'react-native'
+import { ComponentState } from '../../core/types'
+import { copyComponentProperties } from '../utils'
+import { useStyle } from './useStyle'
+
+export const TouchableWithoutFeedback = copyComponentProperties(RNTouchableWithoutFeedback, (props: TouchableWithoutFeedbackProps) => {
+    const [isPressed, setIsPressed] = useState(false)
+    const state = {
+        isDisabled: Boolean(props.disabled),
+        isPressed,
+    } satisfies ComponentState
+    const style = useStyle(props.className, state)
+
+    return (
+        <RNTouchableWithoutFeedback
+            {...props}
+            style={[style, props.style]}
+            onPressIn={event => {
+                setIsPressed(true)
+                props.onPressIn?.(event)
+            }}
+            onPressOut={event => {
+                setIsPressed(false)
+                props.onPressOut?.(event)
+            }}
+        />
+    )
+})
+
+export default TouchableWithoutFeedback

package/src/components/native/View.tsx

@@ -0,0 +1,16 @@
+import { View as RNView, ViewProps } from 'react-native'
+import { copyComponentProperties } from '../utils'
+import { useStyle } from './useStyle'
+
+export const View = copyComponentProperties(RNView, (props: ViewProps) => {
+    const style = useStyle(props.className)
+
+    return (
+        <RNView
+            {...props}
+            style={[style, props.style]}
+        />
+    )
+})
+
+export default View

package/src/components/native/VirtualizedList.tsx

@@ -0,0 +1,25 @@
+import { VirtualizedList as RNVirtualizedList, VirtualizedListProps } from 'react-native'
+import { useUniwindAccent } from '../../hooks'
+import { copyComponentProperties } from '../utils'
+import { useStyle } from './useStyle'
+
+export const VirtualizedList = copyComponentProperties(RNVirtualizedList, (props: VirtualizedListProps<unknown>) => {
+    const style = useStyle(props.className)
+    const contentContainerStyle = useStyle(props.contentContainerClassName)
+    const listFooterComponentStyle = useStyle(props.ListFooterComponentClassName)
+    const listHeaderComponentStyle = useStyle(props.ListHeaderComponentClassName)
+    const endFillColor = useUniwindAccent(props.endFillColorClassName)
+
+    return (
+        <RNVirtualizedList
+            {...props}
+            style={[style, props.style]}
+            contentContainerStyle={[contentContainerStyle, props.contentContainerStyle]}
+            ListFooterComponentStyle={[listFooterComponentStyle, props.ListFooterComponentStyle]}
+            ListHeaderComponentStyle={[listHeaderComponentStyle, props.ListHeaderComponentStyle]}
+            endFillColor={props.endFillColor ?? endFillColor}
+        />
+    )
+})
+
+export default VirtualizedList

package/src/components/native/useStyle.ts

@@ -0,0 +1,33 @@
+/* eslint-disable @typescript-eslint/strict-boolean-expressions */
+import { useEffect, useMemo, useReducer } from 'react'
+import { UniwindListener } from '../../core/listener'
+import { UniwindStore } from '../../core/native'
+import { ComponentState, RNStyle } from '../../core/types'
+import { StyleDependency } from '../../types'
+
+const emptyState = { styles: {} as RNStyle, dependencies: [] as Array<StyleDependency> }
+
+export const useStyle = (className?: string, state?: ComponentState) => {
+    const [_, rerender] = useReducer(() => ({}), {})
+    const styleState = useMemo(
+        () =>
+            className
+                ? UniwindStore.getStyles(className, {
+                    isDisabled: state?.isDisabled,
+                    isFocused: state?.isFocused,
+                    isPressed: state?.isPressed,
+                })
+                : emptyState,
+        [className, _, state?.isDisabled, state?.isFocused, state?.isPressed],
+    )
+
+    useEffect(() => {
+        if (__DEV__ || styleState.dependencies.length > 0) {
+            const dispose = UniwindListener.subscribe(rerender, styleState.dependencies)
+
+            return dispose
+        }
+    }, [styleState])
+
+    return styleState.styles
+}

package/src/components/utils.ts

@@ -0,0 +1,16 @@
+export const copyComponentProperties = <T extends object>(Component: T, UniwindComponent: any): T => {
+    Object.entries(Component).forEach(([key, value]) => {
+        // Filter out the keys we don't want to copy
+        if (['$$typeof', 'render', 'contextType'].includes(key)) {
+            return
+        }
+
+        UniwindComponent[key] = value
+    })
+
+    // @ts-expect-error Hidden property
+    UniwindComponent.displayName = Component.displayName
+    UniwindComponent.prototype = Object.getPrototypeOf(Component)
+
+    return UniwindComponent
+}

package/src/components/web/ActivityIndicator.tsx

@@ -0,0 +1,18 @@
+import { ActivityIndicator as RNActivityIndicator, ActivityIndicatorProps } from 'react-native'
+import { useUniwindAccent } from '../../hooks'
+import { copyComponentProperties } from '../utils'
+import { toRNWClassName } from './rnw'
+
+export const ActivityIndicator = copyComponentProperties(RNActivityIndicator, (props: ActivityIndicatorProps) => {
+    const color = useUniwindAccent(props.colorClassName)
+
+    return (
+        <RNActivityIndicator
+            {...props}
+            style={[toRNWClassName(props.className), props.style]}
+            color={props.color ?? color}
+        />
+    )
+})
+
+export default ActivityIndicator

package/src/components/web/Button.tsx

@@ -0,0 +1,16 @@
+import { Button as RNButton, ButtonProps } from 'react-native'
+import { useUniwindAccent } from '../../hooks'
+import { copyComponentProperties } from '../utils'
+
+export const Button = copyComponentProperties(RNButton, (props: ButtonProps) => {
+    const color = useUniwindAccent(props.colorClassName)
+
+    return (
+        <RNButton
+            {...props}
+            color={props.color ?? color}
+        />
+    )
+})
+
+export default Button

package/src/components/web/FlatList.tsx

@@ -0,0 +1,20 @@
+import { FlatList as RNFlatList, FlatListProps } from 'react-native'
+import { copyComponentProperties } from '../utils'
+import { toRNWClassName } from './rnw'
+
+export const FlatList = copyComponentProperties(RNFlatList, (props: FlatListProps<unknown>) => {
+    const hasSingleColumn = !('numColumns' in props) || props.numColumns === 1
+
+    return (
+        <RNFlatList
+            {...props}
+            style={[toRNWClassName(props.className), props.style]}
+            columnWrapperStyle={hasSingleColumn ? undefined : [toRNWClassName(props.columnWrapperClassName), props.columnWrapperStyle]}
+            contentContainerStyle={[toRNWClassName(props.contentContainerClassName), props.contentContainerStyle]}
+            ListFooterComponentStyle={[toRNWClassName(props.ListFooterComponentClassName), props.ListFooterComponentStyle]}
+            ListHeaderComponentStyle={[toRNWClassName(props.ListHeaderComponentClassName), props.ListHeaderComponentStyle]}
+        />
+    )
+})
+
+export default FlatList

package/src/components/web/Image.tsx

@@ -0,0 +1,18 @@
+import { Image as RNImage, ImageProps } from 'react-native'
+import { useUniwindAccent } from '../../hooks'
+import { copyComponentProperties } from '../utils'
+import { toRNWClassName } from './rnw'
+
+export const Image = copyComponentProperties(RNImage, (props: ImageProps) => {
+    const tintColor = useUniwindAccent(props.tintColorClassName)
+
+    return (
+        <RNImage
+            {...props}
+            style={[toRNWClassName(props.className), props.style]}
+            tintColor={props.tintColor ?? tintColor}
+        />
+    )
+})
+
+export default Image

package/src/components/web/ImageBackground.tsx

@@ -0,0 +1,19 @@
+import { ImageBackground as RNImageBackground, ImageBackgroundProps } from 'react-native'
+import { useUniwindAccent } from '../../hooks'
+import { copyComponentProperties } from '../utils'
+import { toRNWClassName } from './rnw'
+
+export const ImageBackground = copyComponentProperties(RNImageBackground, (props: ImageBackgroundProps) => {
+    const tintColor = useUniwindAccent(props.tintColorClassName)
+
+    return (
+        <RNImageBackground
+            {...props}
+            style={[toRNWClassName(props.className), props.style]}
+            imageStyle={[toRNWClassName(props.imageClassName), props.imageStyle]}
+            tintColor={props.tintColor ?? tintColor}
+        />
+    )
+})
+
+export default ImageBackground

package/src/components/web/KeyboardAvoidingView.tsx

@@ -0,0 +1,15 @@
+import { KeyboardAvoidingView as RNKeyboardAvoidingView, KeyboardAvoidingViewProps } from 'react-native'
+import { copyComponentProperties } from '../utils'
+import { toRNWClassName } from './rnw'
+
+export const KeyboardAvoidingView = copyComponentProperties(RNKeyboardAvoidingView, (props: KeyboardAvoidingViewProps) => {
+    return (
+        <RNKeyboardAvoidingView
+            {...props}
+            style={[toRNWClassName(props.className), props.style]}
+            contentContainerStyle={[toRNWClassName(props.contentContainerClassName), props.contentContainerStyle]}
+        />
+    )
+})
+
+export default KeyboardAvoidingView

package/src/components/web/Modal.tsx

@@ -0,0 +1,14 @@
+import { Modal as RNModal, ModalProps } from 'react-native'
+import { copyComponentProperties } from '../utils'
+import { toRNWClassName } from './rnw'
+
+export const Modal = copyComponentProperties(RNModal, (props: ModalProps) => {
+    return (
+        <RNModal
+            {...props}
+            style={[toRNWClassName(props.className), props.style]}
+        />
+    )
+})
+
+export default Modal

package/src/components/web/Pressable.tsx

@@ -0,0 +1,14 @@
+import { Pressable as RNPressable, PressableProps } from 'react-native'
+import { copyComponentProperties } from '../utils'
+import { toRNWClassName } from './rnw'
+
+export const Pressable = copyComponentProperties(RNPressable, (props: PressableProps) => {
+    return (
+        <RNPressable
+            {...props}
+            style={state => [toRNWClassName(props.className), typeof props.style === 'function' ? props.style(state) : props.style]}
+        />
+    )
+})
+
+export default Pressable

package/src/components/web/RefreshControl.tsx

@@ -0,0 +1,14 @@
+import { RefreshControl as RNRefreshControl, RefreshControlProps } from 'react-native'
+import { copyComponentProperties } from '../utils'
+import { toRNWClassName } from './rnw'
+
+export const RefreshControl = copyComponentProperties(RNRefreshControl, (props: RefreshControlProps) => {
+    return (
+        <RNRefreshControl
+            {...props}
+            style={[toRNWClassName(props.className), props.style]}
+        />
+    )
+})
+
+export default RefreshControl

package/src/components/web/SafeAreaView.tsx

@@ -0,0 +1,14 @@
+import { SafeAreaView as RNSafeAreaView, ViewProps } from 'react-native'
+import { copyComponentProperties } from '../utils'
+import { toRNWClassName } from './rnw'
+
+export const SafeAreaView = copyComponentProperties(RNSafeAreaView, (props: ViewProps) => {
+    return (
+        <RNSafeAreaView
+            {...props}
+            style={[toRNWClassName(props.className), props.style]}
+        />
+    )
+})
+
+export default SafeAreaView

package/src/components/web/ScrollView.tsx

@@ -0,0 +1,15 @@
+import { ScrollView as RNScrollView, ScrollViewProps } from 'react-native'
+import { copyComponentProperties } from '../utils'
+import { toRNWClassName } from './rnw'
+
+export const ScrollView = copyComponentProperties(RNScrollView, (props: ScrollViewProps) => {
+    return (
+        <RNScrollView
+            {...props}
+            style={[toRNWClassName(props.className), props.style]}
+            contentContainerStyle={[toRNWClassName(props.contentContainerClassName), props.contentContainerStyle]}
+        />
+    )
+})
+
+export default ScrollView

package/src/components/web/SectionList.tsx

@@ -0,0 +1,17 @@
+import { SectionList as RNSectionList, SectionListProps } from 'react-native'
+import { copyComponentProperties } from '../utils'
+import { toRNWClassName } from './rnw'
+
+export const SectionList = copyComponentProperties(RNSectionList, (props: SectionListProps<unknown, unknown>) => {
+    return (
+        <RNSectionList
+            {...props}
+            style={[toRNWClassName(props.className), props.style]}
+            contentContainerStyle={[toRNWClassName(props.contentContainerClassName), props.contentContainerStyle]}
+            ListFooterComponentStyle={[toRNWClassName(props.ListFooterComponentClassName), props.ListFooterComponentStyle]}
+            ListHeaderComponentStyle={[toRNWClassName(props.ListHeaderComponentClassName), props.ListHeaderComponentStyle]}
+        />
+    )
+})
+
+export default SectionList

package/src/components/web/Switch.tsx

@@ -0,0 +1,21 @@
+import { Switch as RNSwitch, SwitchProps } from 'react-native'
+import { useUniwindAccent } from '../../hooks'
+import { copyComponentProperties } from '../utils'
+import { toRNWClassName } from './rnw'
+
+export const Switch = copyComponentProperties(RNSwitch, (props: SwitchProps) => {
+    const trackColorOn = useUniwindAccent(props.trackColorOnClassName)
+    const trackColorOff = useUniwindAccent(props.trackColorOffClassName)
+    const thumbColor = useUniwindAccent(props.thumbColorClassName)
+
+    return (
+        <RNSwitch
+            {...props}
+            style={[toRNWClassName(props.className), props.style]}
+            thumbColor={props.thumbColor ?? thumbColor}
+            trackColor={{ true: props.trackColor?.true ?? trackColorOn, false: props.trackColor?.false ?? trackColorOff }}
+        />
+    )
+})
+
+export default Switch

package/src/components/web/Text.tsx

@@ -0,0 +1,14 @@
+import { Text as RNText, TextProps } from 'react-native'
+import { copyComponentProperties } from '../utils'
+import { toRNWClassName } from './rnw'
+
+export const Text = copyComponentProperties(RNText, (props: TextProps) => {
+    return (
+        <RNText
+            {...props}
+            style={[toRNWClassName(props.className), props.style]}
+        />
+    )
+})
+
+export default Text

package/src/components/web/TextInput.tsx

@@ -0,0 +1,14 @@
+import { TextInput as RNTextInput, TextInputProps } from 'react-native'
+import { copyComponentProperties } from '../utils'
+import { toRNWClassName } from './rnw'
+
+export const TextInput = copyComponentProperties(RNTextInput, (props: TextInputProps) => {
+    return (
+        <RNTextInput
+            {...props}
+            style={[toRNWClassName(props.className), props.style]}
+        />
+    )
+})
+
+export default TextInput

package/src/components/web/TouchableHighlight.tsx

@@ -0,0 +1,18 @@
+import { TouchableHighlight as RNTouchableHighlight, TouchableHighlightProps } from 'react-native'
+import { useUniwindAccent } from '../../hooks'
+import { copyComponentProperties } from '../utils'
+import { toRNWClassName } from './rnw'
+
+export const TouchableHighlight = copyComponentProperties(RNTouchableHighlight, (props: TouchableHighlightProps) => {
+    const underlayColor = useUniwindAccent(props.underlayColorClassName)
+
+    return (
+        <RNTouchableHighlight
+            {...props}
+            style={[toRNWClassName(props.className), props.style]}
+            underlayColor={props.underlayColor ?? underlayColor}
+        />
+    )
+})
+
+export default TouchableHighlight

package/src/components/web/TouchableNativeFeedback.tsx

@@ -0,0 +1,2 @@
+import './rnw'
+export { TouchableNativeFeedback } from 'react-native'

package/src/components/web/TouchableOpacity.tsx

@@ -0,0 +1,14 @@
+import { TouchableOpacity as RNTouchableOpacity, TouchableOpacityProps } from 'react-native'
+import { copyComponentProperties } from '../utils'
+import { toRNWClassName } from './rnw'
+
+export const TouchableOpacity = copyComponentProperties(RNTouchableOpacity, (props: TouchableOpacityProps) => {
+    return (
+        <RNTouchableOpacity
+            {...props}
+            style={[toRNWClassName(props.className), props.style]}
+        />
+    )
+})
+
+export default TouchableOpacity