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

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
-}

package/src/types/unistyles.ts

@@ -1,98 +0,0 @@
-import { UnistylesEventType, ScreenOrientation, IOSContentSizeCategory, AndroidContentSizeCategory } from '../common'
-import type { UnistylesThemes, UnistylesBreakpoints } from '../global'
-import type { ScreenSize } from './core'
-import type { UnistylesPlugin } from './plugin'
-
-export type ColorSchemeName = 'light' | 'dark' | 'unspecified'
-
-export type ScreenInsets = {
-    top: number,
-    right: number,
-    bottom: number,
-    left: number
-}
-
-export type ScreenDimensions = {
-    height: number,
-    width: number
-}
-
-export interface StatusBar extends ScreenDimensions {
-    setColor(color?: string, alpha?: number): void,
-    setHidden(hidden: boolean): void
-}
-
-export interface NavigationBar extends ScreenDimensions {
-    setColor(color?: string, alpha?: number): void,
-    setHidden(hidden: boolean): void
-}
-
-export type UnistylesConfig = {
-    adaptiveThemes?: boolean,
-    initialTheme?: keyof UnistylesThemes,
-    plugins?: Array<UnistylesPlugin>,
-    experimentalCSSMediaQueries?: boolean,
-    windowResizeDebounceTimeMs?: number,
-    disableAnimatedInsets?: boolean
-}
-
-export type UnistylesBridge = {
-    // getters
-    screenWidth: number,
-    screenHeight: number,
-    enabledPlugins: Array<string>,
-    hasAdaptiveThemes: boolean,
-    themeName: keyof UnistylesThemes,
-    breakpoint: keyof UnistylesBreakpoints,
-    colorScheme: ColorSchemeName,
-    contentSizeCategory: IOSContentSizeCategory | AndroidContentSizeCategory,
-    sortedBreakpointPairs: Array<[keyof UnistylesBreakpoints, UnistylesBreakpoints[keyof UnistylesBreakpoints]]>,
-    insets: ScreenInsets,
-    statusBar: StatusBar,
-    navigationBar: NavigationBar,
-    pixelRatio: number,
-    fontScale: number,
-    rtl: boolean
-
-    // setters
-    themes: Array<keyof UnistylesThemes>,
-    useBreakpoints(breakpoints: UnistylesBreakpoints): void,
-    useTheme(name: keyof UnistylesThemes): void,
-    updateTheme(name: keyof UnistylesThemes): void,
-    useAdaptiveThemes(enable: boolean): void,
-    addPlugin(pluginName: string, notify: boolean): void,
-    removePlugin(pluginName: string): void,
-    setRootViewBackgroundColor(color?: string, alpha?: number): void,
-    setImmersiveMode(isEnabled: boolean): void
-
-    // web only
-    setWindowResizeDebounceTimeMs(timeMs: number): void
-
-    // android only
-    disableAnimatedInsets(): void
-}
-
-export type UnistylesThemeEvent = {
-    type: UnistylesEventType.Theme,
-    payload: {
-        themeName: keyof UnistylesThemes
-    }
-}
-
-export type UnistylesMobileLayoutEvent = {
-    type: UnistylesEventType.Layout,
-    payload: {
-        screen: ScreenSize,
-        statusBar: ScreenDimensions,
-        navigationBar: ScreenDimensions,
-        insets: ScreenInsets,
-        breakpoint: keyof UnistylesBreakpoints,
-        orientation: typeof ScreenOrientation[keyof typeof ScreenOrientation]
-    }
-}
-
-export type UnistylesPluginEvent = {
-    type: UnistylesEventType.Plugin
-}
-
-export type UnistylesEvents = UnistylesThemeEvent | UnistylesMobileLayoutEvent | UnistylesPluginEvent

package/src/useStyles.ts

@@ -1,60 +0,0 @@
-import { useMemo } from 'react'
-import { StyleSheet } from 'react-native'
-import { parseStyle, proxifyFunction, withPlugins } from './utils'
-import { useCSS, useUnistyles, useVariants } from './hooks'
-import type { UnistylesBreakpoints } from './global'
-import type { ExtractVariantNames, ReactNativeStyleSheet, StyleSheetWithSuperPowers, UnistylesTheme } from './types'
-import { unistyles } from './core'
-import { isWeb } from './common'
-
-type ParsedStylesheet<ST extends StyleSheetWithSuperPowers> = {
-    theme: UnistylesTheme,
-    breakpoint: keyof UnistylesBreakpoints,
-    styles: ReactNativeStyleSheet<ST>
-}
-
-/**
- * Hook that enables all the features of Unistyles
- * @param stylesheet - The stylesheet with superpowers to be used
- * @param variantsMap - The map of variants to be used
- * @returns - The theme, current breakpoint and RN compatible styles
- */
-export const useStyles = <ST extends StyleSheetWithSuperPowers>(
-    stylesheet?: ST,
-    variantsMap?: ExtractVariantNames<typeof stylesheet>
-): ParsedStylesheet<ST> => {
-    const { theme, layout, plugins } = useUnistyles()
-    const variants = useVariants(variantsMap)
-    const parsedStyles = useMemo(() => typeof stylesheet === 'function'
-        ? stylesheet(theme, unistyles.runtime.miniRuntime)
-        : stylesheet, [theme, stylesheet, layout])
-
-    const dynamicStyleSheet = useMemo(() => Object
-        .entries(parsedStyles || {})
-        .reduce((acc, [key, value]) => {
-            if (typeof value === 'function') {
-                return {
-                    ...acc,
-                    [key]: proxifyFunction(key, value, variants)
-                }
-            }
-
-            return StyleSheet.create({
-                ...acc,
-                [key]: withPlugins(key, parseStyle(
-                    value,
-                    variants,
-                    !isWeb || !unistyles.registry.config.experimentalCSSMediaQueries)
-                )
-            })
-        }, {}), [parsedStyles, variants, plugins, layout]
-    )
-
-    useCSS(dynamicStyleSheet as ReactNativeStyleSheet<ST>)
-
-    return {
-        theme,
-        breakpoint: layout.breakpoint,
-        styles: dynamicStyleSheet as ReactNativeStyleSheet<ST>
-    }
-}

package/src/utils/breakpoints.ts

@@ -1,44 +0,0 @@
-import { unistyles } from '../core'
-import type { Optional, RNValue } from '../types'
-import type { UnistylesBreakpoints } from '../global'
-import { ScreenOrientation, isMobile } from '../common'
-import { getKeyForUnistylesMediaQuery } from './mqParser'
-
-export const getValueForBreakpoint = (value: Record<string, RNValue>): Optional<RNValue> => {
-    const customMediaQueryKey = getKeyForUnistylesMediaQuery(
-        Object.entries(value),
-        unistyles.runtime.screen
-    ) as keyof typeof value
-
-    if (customMediaQueryKey) {
-        return value[customMediaQueryKey]
-    }
-
-    const hasBreakpoints = unistyles.registry.sortedBreakpointPairs.length > 0
-
-    if (!hasBreakpoints && isMobile && (ScreenOrientation.Landscape in value || ScreenOrientation.Portrait in value)) {
-        return value[unistyles.runtime.orientation]
-    }
-
-    const breakpoint = unistyles.runtime.breakpoint
-
-    if (!breakpoint) {
-        return undefined
-    }
-
-    const directBreakpoint = value[breakpoint]
-
-    if (directBreakpoint || (breakpoint in value)) {
-        return directBreakpoint
-    }
-
-    const breakpointPairs = unistyles.registry.sortedBreakpointPairs
-    const currentBreakpointIndex = breakpointPairs
-        .findIndex(([key]) => key === breakpoint)
-
-    const availableBreakpoints = breakpointPairs
-        .filter(([key], index) => index < currentBreakpointIndex && key in value)
-        .map(([key]) => key)
-
-    return value[availableBreakpoints[availableBreakpoints.length - 1] as keyof UnistylesBreakpoints & string]
-}