react-native-unistyles 2.10.0 → 3.0.0-alpha.1

package/src/core/mocks/UnistylesMockedRuntime.ts

@@ -1,144 +0,0 @@
-// @ts-nocheck
-import { ScreenOrientation } from '../../common'
-import type { Color, UnistylesBridge, UnistylesPlugin } from '../../types'
-import type { UnistylesThemes } from '../../global'
-import type { UnistylesMockedRegistry } from './UnistylesMockedRegistry'
-import type { UnistyleRegistry } from '../UnistyleRegistry'
-
-export class UnistylesMockedRuntime {
-    private unistylesRegistry: UnistylesMockedRegistry
-
-    constructor(private unistylesBridge: UnistylesBridge, private unistylesRegistry: UnistyleRegistry) {
-        this.unistylesRegistry = unistylesRegistry as unknown as UnistylesMockedRegistry
-    }
-
-    public get miniRuntime() {
-        return {
-            contentSizeCategory: this.contentSizeCategory,
-            breakpoint: this.breakpoint,
-            screen: this.screen,
-            insets: this.insets,
-            statusBar: {
-                width: this.statusBar.width,
-                height: this.statusBar.height
-            },
-            navigationBar: {
-                width: this.navigationBar.width,
-                height: this.navigationBar.height
-            },
-            orientation: this.orientation,
-            pixelRatio: this.pixelRatio,
-            fontScale: this.fontScale,
-            hairlineWidth: this.hairlineWidth,
-            rtl: this.rtl
-        }
-    }
-
-    public get colorScheme() {
-        return 'dark'
-    }
-
-    public get hasAdaptiveThemes() {
-        return true
-    }
-
-    public get themeName() {
-        return this.unistylesRegistry.themeNames.length > 0
-            ? this.unistylesRegistry.themeNames.at(0)
-            : undefined
-    }
-
-    public get contentSizeCategory() {
-        return 'unspecified'
-    }
-
-    public get breakpoint() {
-        if (this.unistylesRegistry.sortedBreakpointPairs.length === 0) {
-            return undefined
-        }
-
-        const firstBreakpoint = this.unistylesRegistry.sortedBreakpointPairs.at(0)
-
-        return firstBreakpoint
-            ? firstBreakpoint.at(0)
-            : undefined
-    }
-
-    public get rtl() {
-        return false
-    }
-
-    public get breakpoints() {
-        return this.unistylesRegistry.breakpoints
-    }
-
-    public get enabledPlugins() {
-        return this.unistylesRegistry.plugins
-    }
-
-    public get screen() {
-        return {
-            width: 360,
-            height: 800
-        }
-    }
-
-    public get insets() {
-        return {
-            top: 0,
-            right: 0,
-            bottom: 0,
-            left: 0
-        }
-    }
-
-    public get pixelRatio() {
-        return 1.0
-    }
-
-    public get hairlineWidth() {
-        return 0.333333
-    }
-
-    public get fontScale() {
-        return 1.0
-    }
-
-    public get statusBar() {
-        return {
-            height: 24,
-            width: 800,
-            setColor: () => {},
-            setHidden: () => {}
-        }
-    }
-
-    public get navigationBar() {
-        return {
-            height: 0,
-            width: 0,
-            setColor: () => {},
-            setHidden: () => {}
-        }
-    }
-
-    public get orientation() {
-        return ScreenOrientation.Portrait
-    }
-
-    public getTheme = (themeName?: keyof UnistylesThemes) => {
-        if (!themeName) {
-            return this.unistylesRegistry.getTheme(this.themeName)
-        }
-
-        return this.unistylesRegistry.getTheme(themeName)
-    }
-
-    public setTheme = (name: keyof UnistylesThemes) => true
-    public updateTheme = (name: keyof UnistylesThemes, theme: UnistylesThemes[keyof UnistylesThemes]) => {}
-    public setAdaptiveThemes = (enabled: boolean) => {}
-    public addPlugin = (plugin: UnistylesPlugin) => {}
-    public removePlugin = (plugin: UnistylesPlugin) => {}
-    public setRootViewBackgroundColor = (color?: Color | string) => {}
-    public setImmersiveMode = (isEnabled: boolean) => {}
-}

package/src/core/mocks/index.ts

@@ -1,3 +0,0 @@
-export { UnistylesMockedBridge } from './UnistylesMockedBridge'
-export { UnistylesMockedRegistry } from './UnistylesMockedRegistry'
-export { UnistylesMockedRuntime } from './UnistylesMockedRuntime'

package/src/createStyleSheet.ts

@@ -1,8 +0,0 @@
-import type { StyleSheetWithSuperPowers } from './types'
-
-/**
- * Utility to create a stylesheet with superpowers
- * Compatible with React Native StyleSheet.create
- * @param stylesheet - The stylesheet with superpowers to be used
- */
-export const createStyleSheet = <S extends StyleSheetWithSuperPowers>(stylesheet: S): S => stylesheet

package/src/hooks/index.ts

@@ -1,4 +0,0 @@
-export { useInitialTheme } from './useInitialTheme'
-export { useUnistyles } from './useUnistyles'
-export { useVariants } from './useVariants'
-export { useCSS } from './useCSS'

package/src/hooks/useCSS.native.ts

@@ -1,3 +0,0 @@
-import type { ReactNativeStyleSheet } from '../types'
-
-export const useCSS = <T>(_stylesheet: ReactNativeStyleSheet<T>): void => {}

package/src/hooks/useCSS.ts

@@ -1,51 +0,0 @@
-import { useInsertionEffect, useRef } from 'react'
-import { unistyles } from '../core'
-import type { ReactNativeStyleSheet } from '../types'
-import { generateReactNativeWebId } from '../utils'
-
-export const useCSS = <T>(stylesheet: ReactNativeStyleSheet<T>) => {
-    const insertedIds = useRef<Array<string>>([])
-
-    useInsertionEffect(() => {
-        if (!unistyles.registry.config.experimentalCSSMediaQueries) {
-            return
-        }
-
-        Object
-            .entries(stylesheet)
-            .forEach(([_key, value]) => {
-                Object.entries(value!)
-                    .forEach(([prop, val]) => {
-                        if (!val.toString().includes('@media')) {
-                            return
-                        }
-
-                        const id = generateReactNativeWebId(prop, '""')
-
-                        if (insertedIds.current.includes(id)) {
-                            return
-                        }
-
-                        const style = document.createElement('style')
-
-                        style.id = id
-                        style.innerHTML = val
-
-                        document.head.appendChild(style)
-                        insertedIds.current = [...insertedIds.current, id]
-                    })
-            })
-
-        return () => {
-            insertedIds.current.forEach(id => {
-                const style = document.getElementById(id)
-
-                if (style) {
-                    style.remove()
-                }
-            })
-
-            insertedIds.current = []
-        }
-    }, [stylesheet])
-}

package/src/hooks/useInitialTheme.ts

@@ -1,11 +0,0 @@
-import { useMemo } from 'react'
-import { unistyles } from '../core'
-import type { UnistylesThemes } from '../global'
-
-export const useInitialTheme = (forName: keyof UnistylesThemes) => {
-    useMemo(() => {
-        if (!unistyles.runtime.themeName) {
-            unistyles.runtime.setTheme(forName)
-        }
-    }, [])
-}

package/src/hooks/useUnistyles.ts

@@ -1,74 +0,0 @@
-import { NativeEventEmitter, NativeModules } from 'react-native'
-import { useEffect, useState } from 'react'
-import { unistyles } from '../core'
-import { UnistylesEventType } from '../common'
-import type { UnistylesEvents, UnistylesMobileLayoutEvent, UnistylesThemeEvent } from '../types'
-
-const unistylesEvents = new NativeEventEmitter(NativeModules.Unistyles)
-
-export const useUnistyles = () => {
-    const [plugins, setPlugins] = useState(unistyles.runtime.enabledPlugins)
-    const [theme, setTheme] = useState(unistyles.registry.getTheme(unistyles.runtime.themeName))
-    const [layout, setLayout] = useState({
-        breakpoint: unistyles.runtime.breakpoint,
-        orientation: unistyles.runtime.orientation,
-        screen: {
-            width: unistyles.runtime.screen.width,
-            height: unistyles.runtime.screen.height
-        },
-        statusBar: {
-            width: unistyles.runtime.statusBar.width,
-            height: unistyles.runtime.statusBar.height
-        },
-        navigationBar: {
-            width: unistyles.runtime.navigationBar.width,
-            height: unistyles.runtime.navigationBar.height
-        },
-        insets: {
-            top: unistyles.runtime.insets.top,
-            bottom: unistyles.runtime.insets.bottom,
-            left: unistyles.runtime.insets.left,
-            right: unistyles.runtime.insets.right
-        }
-    })
-
-    useEffect(() => {
-        const subscription = unistylesEvents.addListener(
-            '__unistylesOnChange',
-            (event: UnistylesEvents) => {
-                switch (event.type) {
-                    case UnistylesEventType.Theme: {
-                        const themeEvent = event as UnistylesThemeEvent
-
-                        return setTheme(unistyles.registry.getTheme(themeEvent.payload.themeName))
-                    }
-                    case UnistylesEventType.Layout: {
-                        const layoutEvent = event as UnistylesMobileLayoutEvent
-
-                        return setLayout({
-                            breakpoint: layoutEvent.payload.breakpoint,
-                            orientation: layoutEvent.payload.orientation,
-                            screen: layoutEvent.payload.screen,
-                            statusBar: layoutEvent.payload.statusBar,
-                            insets: layoutEvent.payload.insets,
-                            navigationBar: layoutEvent.payload.navigationBar
-                        })
-                    }
-                    case UnistylesEventType.Plugin: {
-                        return setPlugins(unistyles.runtime.enabledPlugins)
-                    }
-                    default:
-                        return
-                }
-            }
-        )
-
-        return subscription.remove
-    }, [])
-
-    return {
-        plugins,
-        theme,
-        layout
-    }
-}

package/src/hooks/useVariants.ts

@@ -1,10 +0,0 @@
-import { useRef } from 'react'
-import type { Optional } from '../types'
-
-export const useVariants = (variantsMap?: Record<string, Optional<string>>) => {
-    const variantsRef = useRef<Optional<Record<string, Optional<string>>>>(variantsMap)
-
-    variantsRef.current = variantsMap
-
-    return variantsRef.current
-}

package/src/normalizer/index.ts

@@ -1,2 +0,0 @@
-export { normalizeStyle } from './normalizeStyle'
-export { preprocessor, normalizeNumericValue, normalizeColor } from './normalizer'

package/src/normalizer/normalizeStyle.ts

@@ -1,82 +0,0 @@
-import { preprocessor } from './normalizer'
-import { warn } from '../common'
-import type { NormalizedBoxShadow, NormalizedTextShadow, BoxShadow, TextShadow, RNStyle } from '../types'
-
-const normalizeBoxShadow = <T extends BoxShadow>(style: T): NormalizedBoxShadow => {
-    const requiredBoxShadowProperties = [
-        'shadowColor',
-        'shadowOffset',
-        'shadowOpacity',
-        'shadowRadius'
-    ]
-
-    if (!requiredBoxShadowProperties.every(prop => prop in style)) {
-        warn(`can't apply box shadow as you miss at least one of these properties: ${requiredBoxShadowProperties.join(', ')}`)
-
-        return {
-            shadowColor: undefined,
-            shadowOffset: undefined,
-            shadowOpacity: undefined,
-            shadowRadius: undefined
-        }
-    }
-
-    return {
-        boxShadow: preprocessor.createBoxShadowValue(style),
-        shadowColor: undefined,
-        shadowOffset: undefined,
-        shadowOpacity: undefined,
-        shadowRadius: undefined
-    }
-}
-
-const normalizeTextShadow = <T extends TextShadow>(style: T): NormalizedTextShadow => {
-    const requiredTextShadowProperties = [
-        'textShadowColor',
-        'textShadowOffset',
-        'textShadowRadius'
-    ]
-
-    if (!requiredTextShadowProperties.every(prop => prop in style)) {
-        warn(`can't apply text shadow as you miss at least one of these properties: ${requiredTextShadowProperties.join(', ')}`)
-
-        return {
-            textShadowColor: undefined,
-            textShadowOffset: undefined,
-            textShadowRadius: undefined
-        }
-    }
-
-    return {
-        textShadow: preprocessor.createTextShadowValue(style),
-        textShadowColor: undefined,
-        textShadowOffset: undefined,
-        textShadowRadius: undefined
-    }
-}
-
-export const normalizeStyle = <T extends RNStyle>(style: T): T => {
-    const normalizedTransform = ('transform' in style && Array.isArray(style.transform))
-        ? { transform: preprocessor.createTransformValue(style.transform) }
-        : {}
-
-    const normalizedBoxShadow = (
-        'shadowColor' in style ||
-        'shadowOffset' in style ||
-        'shadowOpacity' in style ||
-        'shadowRadius' in style
-    ) ? normalizeBoxShadow(style as BoxShadow) : {}
-
-    const normalizedTextShadow = (
-        'textShadowColor' in style ||
-        'textShadowOffset' in style ||
-        'textShadowRadius' in style
-    ) ? normalizeTextShadow(style as TextShadow) : {}
-
-    return {
-        ...style,
-        ...normalizedTransform,
-        ...normalizedBoxShadow,
-        ...normalizedTextShadow
-    }
-}

package/src/normalizer/normalizer.macos.ts

@@ -1 +0,0 @@
-// keep it empty for macOS

package/src/normalizer/normalizer.ts

@@ -1,100 +0,0 @@
-// based on react-native-web normalizer
-// https://github.com/necolas/react-native-web
-import normalizeColors from '@react-native/normalize-colors'
-import type { TextShadow, Transforms, BoxShadow, Nullable } from '../types'
-
-type Preprocessor = {
-    createTextShadowValue(style: TextShadow): string,
-    createBoxShadowValue(style: Required<BoxShadow>): string,
-    createTransformValue(transforms: Required<Transforms>): string,
-}
-
-export const normalizeColor = (color: string, opacity: number = 1) => {
-    // If the opacity is 1 there's no need to normalize the color
-    if (opacity === 1) {
-        return color
-    }
-
-    const integer = normalizeColors(color) as Nullable<number>
-
-    // If the color is an unknown format, the return value is null
-    if (integer === null) {
-        return color
-    }
-
-    const hex = integer.toString(16).padStart(8, '0')
-
-    if (hex.length === 8) {
-        const [r = 0, g = 0, b = 0, a = 1] = hex
-            .split(/(?=(?:..)*$)/)
-            .map(x => parseInt(x, 16))
-            .filter(num => !isNaN(num))
-
-        return `rgba(${r},${g},${b},${((a as number) / 255) * opacity})`
-    }
-
-    return color
-}
-
-export const normalizeNumericValue = (value: number) => value ? `${value}px` : value
-
-const normalizeTransform = <T>(key: string, value: T) => {
-    if (key.includes('scale')) {
-        return value
-    }
-
-    if (typeof value === 'number') {
-        return normalizeNumericValue(value)
-    }
-
-    return value
-}
-
-const createTextShadowValue = (style: TextShadow) => {
-    // at this point every prop is present
-    const { textShadowColor, textShadowOffset, textShadowRadius } = style
-    const offsetX = normalizeNumericValue(textShadowOffset.width)
-    const offsetY = normalizeNumericValue(textShadowOffset.height)
-    const radius = normalizeNumericValue(textShadowRadius)
-    const color = normalizeColor(textShadowColor as string)
-
-    return `${offsetX} ${offsetY} ${radius} ${color}`
-}
-
-const createBoxShadowValue = (style: BoxShadow) => {
-    // at this point every prop is present
-    const { shadowColor, shadowOffset, shadowOpacity, shadowRadius } = style
-    const offsetX = normalizeNumericValue(shadowOffset.width)
-    const offsetY = normalizeNumericValue(shadowOffset.height)
-    const radius = normalizeNumericValue(shadowRadius)
-    const color = normalizeColor(shadowColor as string, shadowOpacity as number)
-
-    return `${offsetX} ${offsetY} ${radius} ${color}`
-}
-
-const createTransformValue = (transforms: Transforms) => transforms
-    .map(transform => {
-        const [key] = Object.keys(transform)
-
-        if (!key) {
-            return undefined
-        }
-
-        const value = transform[key as keyof typeof transform]
-
-        switch(key) {
-            case 'matrix':
-            case 'matrix3d':
-                return `${key}(${(value as Array<number>).join(',')})`
-            default:
-                return `${key}(${normalizeTransform(key, value)})`
-        }
-    })
-    .filter(Boolean)
-    .join(' ')
-
-export const preprocessor: Preprocessor = {
-    createTextShadowValue,
-    createBoxShadowValue,
-    createTransformValue
-}

package/src/plugins/cssMediaQueriesPlugin.ts

@@ -1,8 +0,0 @@
-// prevent recursive import
-import { createMediaQueryForStyles } from '../utils/cssMediaQuery'
-import type { UnistylesPlugin } from '../types'
-
-export const cssMediaQueriesPlugin: UnistylesPlugin = {
-    name: '__unistylesCSSMediaQueries',
-    onParsedStyle: (_key, styles, runtime) => createMediaQueryForStyles(styles, runtime)
-}

package/src/plugins/index.ts

@@ -1,2 +0,0 @@
-export { normalizeWebStylesPlugin } from './normalizeWebStylesPlugin'
-export { cssMediaQueriesPlugin } from './cssMediaQueriesPlugin'

package/src/plugins/normalizeWebStylesPlugin.ts

@@ -1,7 +0,0 @@
-import type { UnistylesPlugin } from '../types'
-import { normalizeStyle } from '../normalizer'
-
-export const normalizeWebStylesPlugin: UnistylesPlugin = {
-    name: '__unistylesNormalizeWebStyles',
-    onParsedStyle: (_key, styles) => normalizeStyle(styles)
-}

package/src/types/color.ts

@@ -1,26 +0,0 @@
-type AndroidColor = 'red'
-| 'blue'
-| 'green'
-| 'black'
-| 'white'
-| 'gray'
-| 'cyan'
-| 'magenta'
-| 'yellow'
-| 'light gray'
-| 'dark gray'
-| 'grey'
-| 'light grey'
-| 'dark grey'
-| 'aqua'
-| 'fuchsia'
-| 'lime'
-| 'maroon'
-| 'navy'
-| 'olive'
-| 'purple'
-| 'silver'
-| 'teal'
-| 'transparent'
-
-export type Color = AndroidColor | string | undefined

package/src/types/normalizer.ts

@@ -1,29 +0,0 @@
-import type { ShadowStyleIOS, TextStyle, TransformsStyle } from 'react-native'
-
-type TransformArrayElement<T> = T extends Array<infer U> ? U : never
-type BoxShadow = Required<ShadowStyleIOS>
-type TextShadow = Required<Pick<TextStyle, 'textShadowColor' | 'textShadowOffset' | 'textShadowRadius'>>
-type Transforms = Array<TransformArrayElement<TransformsStyle['transform']>>
-
-type NormalizedBoxShadow = {
-    shadowColor: undefined,
-    shadowOffset: undefined,
-    shadowOpacity: undefined,
-    shadowRadius: undefined,
-    boxShadow?: string
-}
-
-type NormalizedTextShadow = {
-    textShadowColor: undefined
-    textShadowOffset: undefined
-    textShadowRadius: undefined,
-    textShadow?: string
-}
-
-export type {
-    BoxShadow,
-    TextShadow,
-    Transforms,
-    NormalizedBoxShadow,
-    NormalizedTextShadow
-}

package/src/types/plugin.ts

@@ -1,7 +0,0 @@
-import type { RNStyle } from './core'
-import type { UnistylesRuntime } from '../core'
-
-export type UnistylesPlugin = {
-    name: string,
-    onParsedStyle?: (styleKey: string, style: RNStyle, runtime: UnistylesRuntime) => RNStyle
-}