@niibase/uniwind 1.0.0

package/src/components/web/TouchableWithoutFeedback.tsx

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

package/src/components/web/View.tsx

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

package/src/components/web/VirtualizedList.tsx

@@ -0,0 +1,17 @@
+import { VirtualizedList as RNVirtualizedList, VirtualizedListProps } from 'react-native'
+import { copyComponentProperties } from '../utils'
+import { toRNWClassName } from './rnw'
+
+export const VirtualizedList = copyComponentProperties(RNVirtualizedList, (props: VirtualizedListProps<unknown>) => {
+    return (
+        <RNVirtualizedList
+            {...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 VirtualizedList

package/src/components/web/index.ts

@@ -0,0 +1,22 @@
+export * from 'react-native'
+export { ActivityIndicator } from './ActivityIndicator'
+export { Button } from './Button'
+export { FlatList } from './FlatList'
+export { Image } from './Image'
+export { ImageBackground } from './ImageBackground'
+export { KeyboardAvoidingView } from './KeyboardAvoidingView'
+export { Modal } from './Modal'
+export { Pressable } from './Pressable'
+export { RefreshControl } from './RefreshControl'
+export { SafeAreaView } from './SafeAreaView'
+export { ScrollView } from './ScrollView'
+export { SectionList } from './SectionList'
+export { Switch } from './Switch'
+export { Text } from './Text'
+export { TextInput } from './TextInput'
+export { TouchableHighlight } from './TouchableHighlight'
+export { TouchableNativeFeedback } from './TouchableNativeFeedback'
+export { TouchableOpacity } from './TouchableOpacity'
+export { TouchableWithoutFeedback } from './TouchableWithoutFeedback'
+export { View } from './View'
+export { VirtualizedList } from './VirtualizedList'

package/src/components/web/metro-injected.ts

@@ -0,0 +1 @@
+// Will be replaced by metro resolver

package/src/components/web/rnw.ts

@@ -0,0 +1,52 @@
+import { Uniwind } from '../../core'
+import { UniwindListener } from '../../core/listener'
+import { StyleDependency } from '../../types'
+import './metro-injected'
+
+const moveCssRulesToUtilitiesLayer = (sourceSheet: CSSStyleSheet) => {
+    const layerRuleIndex = sourceSheet.insertRule(
+        '@layer rnw {}',
+        0,
+    )
+    const layerRule = sourceSheet.cssRules[layerRuleIndex] as CSSGroupingRule
+
+    while (sourceSheet.cssRules.length > 1) {
+        const nextRule = sourceSheet.cssRules[1]!
+
+        layerRule.insertRule(nextRule.cssText, layerRule.cssRules.length)
+        sourceSheet.deleteRule(1)
+    }
+}
+
+if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+    const rnwStyleSheet = document.querySelector<HTMLStyleElement>('#react-native-stylesheet')
+
+    if (rnwStyleSheet?.sheet) {
+        moveCssRulesToUtilitiesLayer(rnwStyleSheet.sheet)
+    }
+}
+
+type UniwindWithThemes = {
+    themes: typeof Uniwind['themes']
+}
+
+const addClassNameToRoot = () => {
+    if (typeof document === 'undefined') {
+        return
+    }
+
+    const root = document.documentElement
+    ;(Uniwind as unknown as UniwindWithThemes).themes.forEach(theme => root.classList.remove(theme))
+    root.classList.add(Uniwind.currentTheme)
+}
+
+UniwindListener.subscribe(() => {
+    addClassNameToRoot()
+}, [StyleDependency.Theme])
+
+addClassNameToRoot()
+
+export const toRNWClassName = (className?: string) =>
+    className !== undefined
+        ? ({ $$css: true, tailwind: className }) as {}
+        : {}

package/src/core/config/config.common.ts

@@ -0,0 +1,98 @@
+import { Appearance, Insets, Platform } from 'react-native'
+import { ColorScheme, StyleDependency } from '../../types'
+import { UniwindListener } from '../listener'
+import { CSSVariables, GenerateStyleSheetsCallback, ThemeName } from '../types'
+
+const SYSTEM_THEME = 'system' as const
+
+export class UniwindConfigBuilder {
+    protected themes = ['light', 'dark']
+    #hasAdaptiveThemes = true
+    #currentTheme = this.colorScheme as ThemeName
+
+    constructor() {
+        Appearance.addChangeListener(event => {
+            const colorScheme = event.colorScheme ?? ColorScheme.Light
+            const prevTheme = this.#currentTheme
+
+            if (this.#hasAdaptiveThemes && prevTheme !== colorScheme) {
+                this.#currentTheme = colorScheme
+                this.onThemeChange()
+                UniwindListener.notify([StyleDependency.Theme])
+            }
+        })
+    }
+
+    get hasAdaptiveThemes() {
+        return this.#hasAdaptiveThemes
+    }
+
+    get currentTheme(): ThemeName {
+        return this.#currentTheme
+    }
+
+    private get colorScheme() {
+        return Appearance.getColorScheme() ?? ColorScheme.Light
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
+    setTheme(theme: ThemeName | typeof SYSTEM_THEME) {
+        const prevTheme = this.#currentTheme
+        const prevHasAdaptiveThemes = this.#hasAdaptiveThemes
+        const isAdaptiveTheme = ['light', 'dark'].includes(theme)
+
+        try {
+            if (theme === SYSTEM_THEME) {
+                this.#hasAdaptiveThemes = true
+                this.#currentTheme = this.colorScheme
+
+                if (Platform.OS !== 'web') {
+                    Appearance.setColorScheme(undefined)
+                }
+
+                return
+            }
+
+            if (!this.themes.includes(theme)) {
+                throw new Error(`Uniwind: You're trying to setTheme to '${theme}', but it was not registered.`)
+            }
+
+            this.#hasAdaptiveThemes = false
+            this.#currentTheme = theme
+
+            if (Platform.OS !== 'web') {
+                Appearance.setColorScheme(isAdaptiveTheme ? this.#currentTheme as ColorScheme : undefined)
+            }
+        } finally {
+            if (prevTheme !== this.#currentTheme) {
+                this.onThemeChange()
+                UniwindListener.notify([StyleDependency.Theme])
+            }
+
+            if (prevHasAdaptiveThemes !== this.#hasAdaptiveThemes) {
+                UniwindListener.notify([StyleDependency.AdaptiveThemes])
+            }
+        }
+    }
+
+    updateCSSVariables(theme: ThemeName, variables: CSSVariables) {
+        // noop
+        theme
+        variables
+    }
+
+    updateInsets(insets: Insets) {
+        // noop
+        insets
+    }
+
+    protected __reinit(_: GenerateStyleSheetsCallback, themes: Array<string>) {
+        this.themes = themes
+    }
+
+    protected onThemeChange() {
+        // noop
+    }
+}
+
+export const Uniwind = new UniwindConfigBuilder()

package/src/core/config/config.native.ts

@@ -0,0 +1,79 @@
+import { formatHex, formatHex8, parse } from 'culori'
+import { Insets } from 'react-native'
+import { StyleDependency } from '../../types'
+import { UniwindListener } from '../listener'
+import { Logger } from '../logger'
+import { UniwindStore } from '../native'
+import { CSSVariables, GenerateStyleSheetsCallback, ThemeName } from '../types'
+import { UniwindConfigBuilder as UniwindConfigBuilderBase } from './config.common'
+
+class UniwindConfigBuilder extends UniwindConfigBuilderBase {
+    constructor() {
+        super()
+    }
+
+    __reinit(generateStyleSheetCallback: GenerateStyleSheetsCallback, themes: Array<string>) {
+        super.__reinit(generateStyleSheetCallback, themes)
+        UniwindStore.reinit(generateStyleSheetCallback)
+    }
+
+    onThemeChange() {
+        UniwindStore.runtime.currentThemeName = this.currentTheme
+        UniwindStore.reinit()
+    }
+
+    updateCSSVariables(theme: ThemeName, variables: CSSVariables) {
+        Object.entries(variables).forEach(([varName, varValue]) => {
+            if (!varName.startsWith('--') && __DEV__) {
+                Logger.error(`CSS variable name must start with "--", instead got: ${varName}`)
+
+                return
+            }
+
+            const getValue = () => {
+                if (typeof varValue === 'number') {
+                    return varValue
+                }
+
+                const parsedColor = parse(varValue)
+
+                if (parsedColor) {
+                    return parsedColor.alpha === undefined || parsedColor.alpha === 1
+                        ? formatHex(parsedColor)
+                        : formatHex8(parsedColor)
+                }
+
+                return varValue
+            }
+
+            const value = getValue()
+            const runtimeThemeVariables = UniwindStore.runtimeThemeVariables.get(theme) ?? {}
+
+            Object.defineProperty(UniwindStore.vars, varName, {
+                configurable: true,
+                enumerable: true,
+                get: () => value,
+            })
+            Object.defineProperty(runtimeThemeVariables, varName, {
+                configurable: true,
+                enumerable: true,
+                get: () => value,
+            })
+            UniwindStore.runtimeThemeVariables.set(theme, runtimeThemeVariables)
+        })
+
+        if (theme === this.currentTheme) {
+            UniwindListener.notify([StyleDependency.Variables])
+        }
+    }
+
+    updateInsets(insets: Insets) {
+        UniwindStore.runtime.insets.bottom = insets.bottom ?? 0
+        UniwindStore.runtime.insets.top = insets.top ?? 0
+        UniwindStore.runtime.insets.left = insets.left ?? 0
+        UniwindStore.runtime.insets.right = insets.right ?? 0
+        UniwindListener.notify([StyleDependency.Insets])
+    }
+}
+
+export const Uniwind = new UniwindConfigBuilder()

package/src/core/config/config.ts

@@ -0,0 +1,64 @@
+import { StyleDependency } from '../../types'
+import { UniwindListener } from '../listener'
+import { Logger } from '../logger'
+import { CSSVariables, ThemeName } from '../types'
+import { UniwindConfigBuilder as UniwindConfigBuilderBase } from './config.common'
+
+class UniwindConfigBuilder extends UniwindConfigBuilderBase {
+    private runtimeCSSVariables = new Map<ThemeName, CSSVariables>()
+
+    constructor() {
+        super()
+    }
+
+    onThemeChange() {
+        if (typeof document === 'undefined') {
+            return
+        }
+
+        document.documentElement.removeAttribute('style')
+
+        const runtimeCSSVariables = this.runtimeCSSVariables.get(this.currentTheme)
+
+        if (!runtimeCSSVariables) {
+            return
+        }
+
+        Object.entries(runtimeCSSVariables).forEach(([varName, varValue]) => {
+            this.applyCSSVariable(varName, varValue)
+        })
+    }
+
+    updateCSSVariables(theme: ThemeName, variables: CSSVariables) {
+        Object.entries(variables).forEach(([varName, varValue]) => {
+            if (!varName.startsWith('--') && __DEV__) {
+                Logger.error(`CSS variable name must start with "--", instead got: ${varName}`)
+
+                return
+            }
+
+            const runtimeCSSVariables = this.runtimeCSSVariables.get(theme) ?? {}
+
+            runtimeCSSVariables[varName] = varValue
+            this.runtimeCSSVariables.set(theme, runtimeCSSVariables)
+            this.applyCSSVariable(varName, varValue)
+        })
+
+        if (theme === this.currentTheme) {
+            UniwindListener.notify([StyleDependency.Variables])
+        }
+    }
+
+    private applyCSSVariable(varName: keyof CSSVariables, varValue: CSSVariables[keyof CSSVariables]) {
+        if (typeof document === 'undefined') {
+            return
+        }
+
+        document.documentElement.style.setProperty(
+            varName,
+            typeof varValue === 'number' ? `${varValue}px` : varValue,
+        )
+    }
+}
+
+export const Uniwind = new UniwindConfigBuilder()

package/src/core/config/index.ts

@@ -0,0 +1 @@
+export * from './config'

package/src/core/index.ts

@@ -0,0 +1 @@
+export * from './config'

package/src/core/listener.ts

@@ -0,0 +1,59 @@
+import { StyleDependency } from '../types'
+
+type SubscribeOptions = {
+    once?: boolean
+}
+
+class UniwindListenerBuilder {
+    private listeners = {
+        [StyleDependency.ColorScheme]: new Set<() => void>(),
+        [StyleDependency.Theme]: new Set<() => void>(),
+        [StyleDependency.Dimensions]: new Set<() => void>(),
+        [StyleDependency.Orientation]: new Set<() => void>(),
+        [StyleDependency.Insets]: new Set<() => void>(),
+        [StyleDependency.FontScale]: new Set<() => void>(),
+        [StyleDependency.Rtl]: new Set<() => void>(),
+        [StyleDependency.AdaptiveThemes]: new Set<() => void>(),
+        [StyleDependency.Variables]: new Set<() => void>(),
+    }
+
+    notify(dependencies: Array<StyleDependency>) {
+        dependencies.forEach(dep => {
+            this.listeners[dep].forEach(callback => callback())
+        })
+    }
+
+    notifyAll() {
+        Object.values(this.listeners).forEach(listenerSet => {
+            listenerSet.forEach(callback => callback())
+        })
+    }
+
+    subscribe(listener: () => void, dependencies: Array<StyleDependency>, options?: SubscribeOptions) {
+        const wrappedListeners = new Map<StyleDependency, () => void>()
+
+        const dispose = () => {
+            wrappedListeners.forEach((wrappedListener, dep) => {
+                this.listeners[dep].delete(wrappedListener)
+            })
+            wrappedListeners.clear()
+        }
+
+        dependencies.forEach(dep => {
+            const wrappedListener = () => {
+                listener()
+
+                if (options?.once) {
+                    dispose()
+                }
+            }
+
+            wrappedListeners.set(dep, wrappedListener)
+            this.listeners[dep].add(wrappedListener)
+        })
+
+        return dispose
+    }
+}
+
+export const UniwindListener = new UniwindListenerBuilder()

package/src/core/logger.ts

@@ -0,0 +1,15 @@
+/* eslint-disable no-console */
+
+export class Logger {
+    static log(message: string) {
+        console.log(`Uniwind - ${message}`)
+    }
+
+    static error(message: string) {
+        console.error(`Uniwind - ${message}`)
+    }
+
+    static warn(message: string) {
+        console.warn(`Uniwind - ${message}`)
+    }
+}

package/src/core/native/index.ts

@@ -0,0 +1,2 @@
+export * from './runtime'
+export * from './store'

package/src/core/native/native-utils.ts

@@ -0,0 +1,41 @@
+import { formatHex, formatHex8, interpolate, parse } from 'culori'
+import type { UniwindRuntime } from '../types'
+
+export const colorMix = (color: string, weight: number | string, mixColor: string) => {
+    const parsedWeight = typeof weight === 'string'
+        ? parseFloat(weight) / 100
+        : weight
+
+    // Change alpha
+    if (mixColor === '#00000000') {
+        const parsedColor = parse(color)
+
+        if (parsedColor === undefined) {
+            return color
+        }
+
+        return formatHex8({
+            ...parsedColor,
+            alpha: parsedWeight * (parsedColor.alpha ?? 1),
+        })
+    }
+
+    return formatHex(interpolate([mixColor, color])(parsedWeight))
+}
+
+export function lightDark(this: UniwindRuntime, light: string, dark: string) {
+    if (this.currentThemeName === 'dark') {
+        return dark
+    }
+
+    return light
+}
+
+export const cloneWithAccessors = <T extends object>(obj: T) => {
+    const proto = Object.getPrototypeOf(obj)
+    const clone = Object.create(proto)
+
+    Object.defineProperties(clone, Object.getOwnPropertyDescriptors(obj))
+
+    return clone
+}

package/src/core/native/parsers/boxShadow.ts

@@ -0,0 +1,7 @@
+const boxShadowRegex = /(?<![#\w.-])[+-]?(?:\d*\.\d+|\d+)(?![\w-])/g
+const undefinedRegex = /undefined/g
+
+export const parseBoxShadow = (boxShadow: string) =>
+    boxShadow
+        .replace(boxShadowRegex, match => `${match}px`)
+        .replace(undefinedRegex, '')

package/src/core/native/parsers/fontVariant.ts

@@ -0,0 +1,3 @@
+export const parseFontVariant = (fontVariant: string) =>
+    fontVariant
+        .split(' ').filter(token => token !== 'undefined')

package/src/core/native/parsers/gradient.ts

@@ -0,0 +1,39 @@
+import type { GradientValue } from 'react-native'
+
+type InferFromReadonlyArray<T> = T extends ReadonlyArray<infer U> ? U : never
+
+const gradientDirectionTokens = new Set(['to', 'top', 'right', 'bottom', 'left'])
+
+export const resolveGradient = (value: string) => {
+    const tokens = value.split(', ')
+    const directionToken = tokens.find(token => token.includes('to') || token.includes('deg'))
+    const filtered = tokens.filter(token => token !== directionToken)
+
+    const colorStops = filtered.map(token => {
+        const [color, position] = token.split(' ')
+
+        return {
+            color: color!,
+            positions: position !== undefined ? [position] as unknown as Array<Array<string>> : undefined,
+        } satisfies InferFromReadonlyArray<GradientValue['colorStops']>
+    })
+
+    const direction = directionToken
+        ?.split(' ')
+        .reduce((acc, token) => {
+            if (gradientDirectionTokens.has(token) || token.includes('deg')) {
+                return `${acc} ${token.replace(',', '')}`
+            }
+
+            return acc
+        }, '')
+        .trim()
+
+    return [
+        {
+            colorStops,
+            type: 'linear-gradient',
+            direction,
+        },
+    ] satisfies Array<GradientValue>
+}

package/src/core/native/parsers/index.ts

@@ -0,0 +1,5 @@
+export * from './boxShadow'
+export * from './fontVariant'
+export * from './gradient'
+export * from './textShadow'
+export * from './transforms'

package/src/core/native/parsers/textShadow.ts

@@ -0,0 +1,37 @@
+export const parseTextShadowMutation = (styles: Record<string, any>) => {
+    const tokens: Array<string> = styles.textShadow.replace(/,/g, '').split(' ')
+
+    if (tokens.length === 0) {
+        return
+    }
+
+    const color = tokens.find(token => token.startsWith('#')) ?? '#000000'
+    const offsets = tokens.filter(token => token !== color)
+    const [offsetX, offsetY, radius] = offsets
+
+    if (offsetX !== undefined && offsetY !== undefined) {
+        Object.defineProperty(styles, 'textShadowOffset', {
+            configurable: true,
+            enumerable: true,
+            value: {
+                width: Number(offsetX),
+                height: Number(offsetY),
+            },
+        })
+        delete styles.textShadow
+    }
+
+    if (radius !== undefined) {
+        Object.defineProperty(styles, 'textShadowRadius', {
+            configurable: true,
+            enumerable: true,
+            value: Number(radius),
+        })
+    }
+
+    Object.defineProperty(styles, 'textShadowColor', {
+        configurable: true,
+        enumerable: true,
+        value: color,
+    })
+}

package/src/core/native/parsers/transforms.ts

@@ -0,0 +1,64 @@
+/* eslint-disable max-depth */
+const transforms = [
+    'translateX',
+    'translateY',
+    'translateZ',
+    'rotate',
+    'rotateX',
+    'rotateY',
+    'rotateZ',
+    'scale',
+    'scaleX',
+    'scaleY',
+    'scaleZ',
+    'skewX',
+    'skewY',
+    'perspective',
+]
+
+const processTransform = (transform: string, value: any) => {
+    if (transform.startsWith('scale') && typeof value === 'string') {
+        return parseFloat(value.replace('%', '')) / 100
+    }
+
+    return value
+}
+
+export const parseTransformsMutation = (styles: Record<string, any>) => {
+    const transformTokens = typeof styles.transform === 'string'
+        ? styles.transform
+            .split(' ')
+            .filter(token => token !== 'undefined')
+        : []
+
+    const transformsResult = []
+
+    for (const transform of transforms) {
+        if (transformTokens.length > 0) {
+            // Transforms inside transform - transform: rotate(45deg);
+            for (const token of transformTokens) {
+                if (!token.startsWith(transform)) {
+                    continue
+                }
+
+                const transformValue = token.slice(transform.length + 1, -1)
+
+                transformsResult.push({ [transform]: processTransform(transform, transformValue) })
+            }
+        }
+
+        // Transforms outside of transform - { rotate: '45deg' }
+        if (styles[transform] !== undefined) {
+            transformsResult.push({ [transform]: processTransform(transform, styles[transform]) })
+            delete styles[transform]
+        }
+    }
+
+    if (transformsResult.length > 0) {
+        Object.defineProperty(styles, 'transform', {
+            configurable: true,
+            enumerable: true,
+            value: transformsResult,
+        })
+    }
+}