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

package/src/core/UnistylesRuntime.ts

@@ -1,284 +0,0 @@
-import { ScreenOrientation, UnistylesError } from '../common'
-import type { Color, UnistylesBridge, UnistylesPlugin } from '../types'
-import type { UnistylesThemes } from '../global'
-import type { UnistyleRegistry } from './UnistyleRegistry'
-import { parseColor } from '../utils/parseColor'
-
-/**
- * Utility to interact with the Unistyles during runtime
- */
-export class UnistylesRuntime {
-    constructor(private unistylesBridge: UnistylesBridge, private unistylesRegistry: UnistyleRegistry) {}
-
-    /**
-     * Get the mini runtime injected to creteStyleSheet
-     * @returns - The mini runtime
-     */
-    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
-        }
-    }
-
-    /**
-     * Get the current color scheme
-     * @returns - The current color scheme
-     */
-    public get colorScheme() {
-        return this.unistylesBridge.colorScheme
-    }
-
-    /**
-     * Get the layout direction
-     * @returns - Boolean indicating if the layout direction is RTL
-     */
-    public get rtl() {
-        return this.unistylesBridge.rtl
-    }
-
-    /**
-     * Get info about adaptive themes
-     * @returns - boolean indicating if the adaptive themes are enabled
-     */
-    public get hasAdaptiveThemes() {
-        return this.unistylesBridge.hasAdaptiveThemes
-    }
-
-    /**
-     * Get the current theme name
-     * @returns - The current theme name
-     */
-    public get themeName() {
-        return this.unistylesBridge.themeName
-    }
-
-    /**
-     * Get the current content size category
-     * @returns - The current content size category
-     */
-    public get contentSizeCategory() {
-        return this.unistylesBridge.contentSizeCategory
-    }
-
-    /**
-     * Get the current breakpoint based on device size
-     * @returns - The current breakpoint
-     */
-    public get breakpoint() {
-        return this.unistylesBridge.breakpoint
-    }
-
-    /**
-     * Get registered breakpoints with UnitylesRegistry
-     * @returns - The registered breakpoints
-     */
-    public get breakpoints() {
-        return this.unistylesRegistry.breakpoints
-    }
-
-    /**
-     * Get the names of currently enabled plugins
-     * @deprecated - Plugins will be removed in the next major release
-     * @returns - The names of currently enabled plugins
-     */
-    public get enabledPlugins() {
-        return this.unistylesBridge.enabledPlugins
-    }
-
-    /**
-     * Get the screen size
-     * @returns - The screen size { width, height }
-     */
-    public get screen() {
-        return {
-            width: this.unistylesBridge.screenWidth,
-            height: this.unistylesBridge.screenHeight
-        }
-    }
-
-    /**
-     * Get the safe area insets
-     * @returns - The safe area insets { top, bottom, left, right }
-     */
-    public get insets() {
-        return this.unistylesBridge.insets
-    }
-
-    /**
-     * Get the status bar info
-     * @returns - The status bar api { width, height, setColor, setHidden }
-     */
-    public get statusBar() {
-        return {
-            width: this.unistylesBridge.statusBar.width,
-            height: this.unistylesBridge.statusBar.height,
-            setColor: (color?: Color, alpha?: number) => {
-                const [parsedColor, parsedAlpha] = parseColor(color, alpha)
-
-                this.unistylesBridge.statusBar.setColor(parsedColor, parsedAlpha)
-            },
-            setHidden: (hidden: boolean) => this.unistylesBridge.statusBar.setHidden(hidden)
-        }
-    }
-
-    /**
-     * Get the navigation bar info (Android)
-     * @returns - The navigation bar api { width, height, setColor, setHidden }
-     */
-    public get navigationBar() {
-        return {
-            width: this.unistylesBridge.navigationBar.width,
-            height: this.unistylesBridge.navigationBar.height,
-            setColor: (color?: Color, alpha?: number) => {
-                const [parsedColor, parsedAlpha] = parseColor(color, alpha)
-
-                this.unistylesBridge.navigationBar.setColor(parsedColor, parsedAlpha)
-            },
-            setHidden: (hidden: boolean) => this.unistylesBridge.navigationBar.setHidden(hidden)
-        }
-    }
-
-    /**
-     * Get the screen orientation
-     * @returns - The screen orientation
-     */
-    public get orientation() {
-        const { width, height } = this.screen
-
-        if (width > height) {
-            return ScreenOrientation.Landscape
-        }
-
-        return ScreenOrientation.Portrait
-    }
-
-    /**
-     * Get the pixel ratio
-     * @returns - The pixel ratio
-     */
-    public get pixelRatio() {
-        return this.unistylesBridge.pixelRatio
-    }
-
-    /**
-     * Get the font scale
-     * @returns - The font scale
-     */
-    public get fontScale() {
-        return parseFloat(this.unistylesBridge.fontScale.toFixed(2))
-    }
-
-    /**
-     * Get the hairline width
-     * @returns - The thinnest width of the platform
-     */
-    public get hairlineWidth() {
-        const pixelRatio = this.pixelRatio
-        const nearestPixel = Math.trunc(pixelRatio * 0.4) || 1
-
-        return nearestPixel / pixelRatio
-    }
-
-    /**
-     * Get theme by name
-     * @param themeName - The name of the theme to get or current theme if not specified
-     * @returns - The theme
-     */
-    public getTheme(themeName?: keyof UnistylesThemes) {
-        if (!themeName) {
-            return this.unistylesRegistry.getTheme(this.themeName)
-        }
-
-        return this.unistylesRegistry.getTheme(themeName)
-    }
-
-    /**
-     * Get the immersive mode (both status bar and navigation bar hidden (Android))
-     * @param isEnabled
-     */
-    public setImmersiveMode(isEnabled: boolean) {
-        return this.unistylesBridge.setImmersiveMode(isEnabled)
-    }
-
-    /**
-     * Set the root view background color
-     * @param color - The color to set
-     * @param alpha - Color alpha - default is 1
-     */
-    public setRootViewBackgroundColor = (color?: Color, alpha?: number) => {
-        const [parsedColor, parsedAlpha] = parseColor(color, alpha)
-
-        this.unistylesBridge.setRootViewBackgroundColor(parsedColor, parsedAlpha)
-    }
-
-    /**
-     * Switch to a different theme
-     * @param name - The name of the theme to switch to
-     * @returns - boolean indicating if the theme was switched
-     */
-    public setTheme = (name: keyof UnistylesThemes) => {
-        if (name === this.themeName) {
-            return
-        }
-
-        if (this.unistylesRegistry.hasTheme(name)) {
-            this.unistylesBridge.useTheme(name)
-
-            return true
-        }
-
-        throw new Error(UnistylesError.ThemeNotRegistered)
-    }
-
-    /**
-     * Update the theme at runtime
-     * If current theme is updated, the changes will be applied immediately
-     * @param name - The name of the theme to update
-     * @param updater - Function that receives the current theme and expect modified theme to be returned
-     */
-    public updateTheme = (name: keyof UnistylesThemes, updater: (theme: UnistylesThemes[keyof UnistylesThemes]) => UnistylesThemes[keyof UnistylesThemes]) => {
-        this.unistylesRegistry.updateTheme(name, updater(this.unistylesRegistry.getTheme(name)))
-    }
-
-    /**
-     * Enable or disable adaptive themes
-     * @param enable - boolean indicating if adaptive themes should be enabled
-     */
-    public setAdaptiveThemes = (enable: boolean) => {
-        this.unistylesBridge.useAdaptiveThemes(enable)
-    }
-
-    /**
-     * Enable a plugin
-     * @deprecated - Plugins will be removed in the next major release
-     * @param plugin - Plugin that conforms to UnistylesPlugin interface
-     */
-    public addPlugin = (plugin: UnistylesPlugin) => {
-        this.unistylesRegistry.addPlugin(plugin)
-    }
-
-    /**
-     * Disable a plugin
-     * @deprecated - Plugins will be removed in the next major release
-     * @param plugin - Plugin that conforms to UnistylesPlugin interface
-     */
-    public removePlugin = (plugin: UnistylesPlugin) => {
-        this.unistylesRegistry.removePlugin(plugin)
-    }
-}

package/src/core/index.ts

@@ -1,8 +0,0 @@
-import { unistyles } from './Unistyles'
-export type { UnistylesRuntime } from './UnistylesRuntime'
-
-export type UnistylesMiniRuntime = typeof unistyles.runtime.miniRuntime
-
-export {
-    unistyles
-}

package/src/core/mocks/UnistylesMockedBridge.ts

@@ -1,30 +0,0 @@
-// @ts-nocheck
-import type { UnistylesThemes, UnistylesBreakpoints } from '../../global'
-
-export class UnistylesMockedBridge {
-    constructor() {}
-
-    public screenWidth() {}
-    public screenHeight() {}
-    public enabledPlugins() {}
-    public hasAdaptiveThemes() {}
-    public themeName() {}
-    public breakpoint() {}
-    public colorScheme() {}
-    public contentSizeCategory() {}
-    public sortedBreakpointPairs() {}
-    public insets() {}
-    public pixelRatio() {}
-    public fontScale() {}
-    public statusBar() {}
-    public navigationBar() {}
-    public themes(themes: Array<keyof UnistylesThemes>) {}
-    public useBreakpoints(breakpoints: UnistylesBreakpoints) {}
-    public useTheme(name: keyof UnistylesThemes) {}
-    public updateTheme(name: keyof UnistylesThemes) {}
-    public useAdaptiveThemes(enable: boolean) {}
-    public addPlugin(pluginName: string, notify: boolean) {}
-    public removePlugin(pluginName: string) {}
-    public setRootViewBackgroundColor(color?: string, alpha?: number) {}
-    public setImmersiveMode(isEnabled: boolean) {}
-}

package/src/core/mocks/UnistylesMockedRegistry.ts

@@ -1,47 +0,0 @@
-// @ts-nocheck
-import type { UnistylesBreakpoints, UnistylesThemes } from '../../global'
-import type { UnistylesPlugin, UnistylesConfig, UnistylesBridge } from '../../types'
-
-export class UnistylesMockedRegistry {
-    public config: UnistylesConfig = {}
-    public breakpoints: UnistylesBreakpoints = {} as UnistylesBreakpoints
-    public sortedBreakpointPairs: Array<[keyof UnistylesBreakpoints, UnistylesBreakpoints[keyof UnistylesBreakpoints]]> = []
-    public plugins: Array<UnistylesPlugin> = []
-    public themes: UnistylesThemes = {} as UnistylesThemes
-    public themeNames: Array<keyof UnistylesThemes> = []
-
-    constructor(private unistylesBridge: UnistylesBridge) {}
-
-    public addThemes = (themes: UnistylesThemes) => {
-        this.themes = themes
-        this.themeNames = Object.keys(themes) as Array<keyof UnistylesThemes>
-
-        return this
-    }
-    public addBreakpoints = (breakpoints: UnistylesBreakpoints) => {
-        this.breakpoints = breakpoints
-        this.sortedBreakpointPairs = Object
-            .entries(breakpoints)
-            .sort((breakpoint1, breakpoint2) => {
-                const [, value1] = breakpoint1
-                const [, value2] = breakpoint2
-
-                return value1 - value2
-            }) as Array<[keyof UnistylesBreakpoints, UnistylesBreakpoints[keyof UnistylesBreakpoints]]>
-
-        return this
-    }
-    public addConfig = (config: UnistylesConfig) => {}
-    public getTheme = (forName: keyof UnistylesThemes) => {
-        if (this.themeNames.length === 0) {
-            return {} as UnistylesThemes[keyof UnistylesThemes]
-        }
-
-        return this.themes[forName]
-    }
-
-    public addPlugin = (plugin: UnistylesPlugin, notify: boolean = true) => {}
-    public removePlugin = (plugin: UnistylesPlugin) => {}
-    public updateTheme = (name: keyof UnistylesThemes, theme: UnistylesThemes[keyof UnistylesThemes]) => {}
-    public hasTheme = (name: keyof UnistylesThemes) => true
-}

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'