react-native-unistyles 1.2.0 → 1.3.0

package/src/types/breakpoints.ts

@@ -1,36 +1,61 @@
-import type { OpaqueColorValue } from 'react-native'
-import type { MediaQueries } from './mediaQueries'
-
-export type Breakpoints = Record<string, number>
-export type SortedBreakpointEntries<B extends Breakpoints> = [[keyof B & string, number]]
-
-export type ScreenSize = {
-    width: number,
-    height: number
-}
-
-export type CreateStylesFactory<ST, Theme> = (theme: Theme) => ST
-
-type WithEmptyObject<V> = keyof V extends never ? {} : V
-
-export type ExtractBreakpoints<T, B extends Breakpoints> = T extends Partial<Record<keyof B & string, infer V>>
-    ? WithEmptyObject<V>
-    : T extends (...args: infer A) => infer R
-        ? (...args: A) => ExtractBreakpoints<R, B>
-        : {
-            [K in keyof T]: T[K] extends (...args: infer A) => infer R
-                ? (...args: A) => ExtractBreakpoints<R, B>
-                : T[K] extends object
-                    ? ExtractBreakpoints<T[K], B>
-                    : T[K]
-        }
+import type { ColorValue, OpaqueColorValue } from 'react-native'
+import type { UnistylesTheme } from '../types'
+import type { BreakpointsOrMediaQueries, ToDeepUnistyles } from './stylesheet'
+import type { TransformStyles } from './core'
+
+type ExtractTransformArray<T> = T extends object
+    ? { [K in keyof T]: ExtractBreakpoints<T[K]> }
+    : never
+
+type ExtractBreakpoints<T> = T extends object
+    ? keyof T extends BreakpointsOrMediaQueries
+        ? T[keyof T]
+        : T extends Array<ToDeepUnistyles<TransformStyles>>
+            ? Array<ExtractTransformArray<T[number]>>
+            : {
+                [K in keyof T]: ExtractBreakpoints<T[K]>
+            }
+    : T
 
-export type RemoveKeysWithPrefix<T, B extends Breakpoints> = T extends (...args: Array<any>) => infer R
-    ? (...args: Parameters<T>) => RemoveKeysWithPrefix<R, B>
+type ParseNestedObject<T> = T extends (...args: infer A) => infer R
+    ? (...args: A) => ParseNestedObject<R>
     : T extends object
-        ? T extends OpaqueColorValue
-            ? string
-            : T extends Record<string, infer _V>
-                ? { [K in keyof T as K extends MediaQueries ? keyof B & string : K]: RemoveKeysWithPrefix<T[K], B> }
-                : { [K in keyof T]: RemoveKeysWithPrefix<T[K], B> }
+        ? T extends { variants: infer R }
+            ? ParseVariants<FlattenVariants<R>> & ParseNestedObject<Omit<T, 'variants'>>
+            : {
+                [K in keyof T]: T[K] extends object
+                    ? T[K] extends OpaqueColorValue
+                        ? ColorValue
+                        : ExtractBreakpoints<T[K]>
+                    : T[K]
+            }
+        : T
+
+type FlattenVariants<T> = T extends object
+    ? {
+        [K in keyof T]: T[K] extends object
+            ? {
+                [key in keyof T[K]]: T[K][key] extends object
+                    ? ParseNestedObject<T[K][key]>
+                    : never
+            }
+            : never
+    }
+    : never
+
+type ParseVariants<T> = T extends object
+    ? T[keyof T] extends object
+        ? UnionToIntersection<ParseVariants<T[keyof T]>>
         : T
+    : T
+
+type UnionToIntersection<U> =
+    (U extends any ? (k: U) => void : never) extends ((k: infer I) => void) ? I : never
+
+type ParseStyleKeys<T> = T extends object
+    ? { [K in keyof T]: ParseNestedObject<T[K]> }
+    : never
+
+export type ReactNativeStyleSheet<T> = T extends (theme: UnistylesTheme) => infer R
+    ? ParseStyleKeys<R>
+    : ParseStyleKeys<T>

package/src/types/common.ts

@@ -0,0 +1,2 @@
+export type Optional<T> = T | undefined
+export type Nullable<T> = T | null

package/src/types/core.ts

@@ -14,15 +14,14 @@ import type {
     TranslateYTransform
 } from 'react-native/Libraries/StyleSheet/StyleSheetTypes'
 import type { ImageStyle, TextStyle, ViewStyle } from 'react-native'
-import type { Breakpoints } from './breakpoints'
-import type { MediaQueries } from './mediaQueries'
+import type { UnistylesBreakpoints, UnistylesThemes } from '../global'
 
-type ShadowOffset = {
+export type ShadowOffset = {
     width: number,
     height: number
 }
 
-type TransformStyles =
+export type TransformStyles =
     & PerpectiveTransform
     & RotateTransform
     & RotateXTransform
@@ -37,37 +36,13 @@ type TransformStyles =
     & SkewYTransform
     & MatrixTransform
 
-type UnistyleNested<B> = {
-    shadowOffset?: DeepUniStyle<ShadowOffset, B>,
-    textShadowOffset?: DeepUniStyle<ShadowOffset, B>,
-    transform?: Array<DeepUniStyle<TransformStyles, B>>
-}
-
-type UniStyle<V, B> = {
-    [innerKey in keyof B]?: V
-} | {
-    [innerKey in MediaQueries]?: V
-} | V
-
-type DeepUniStyle<T, B> = {
-    [K in keyof T]?: UniStyle<T[K], B>
+export type ScreenSize = {
+    width: number,
+    height: number
 }
 
-// these props are treated differently to nest breakpoints and media queries
-type NestedTypes = 'shadowOffset' | 'transform' | 'textShadowOffset'
-
-type UnistyleView<B> = DeepUniStyle<Omit<ViewStyle, NestedTypes>, B>
-type UnistyleText<B> = DeepUniStyle<Omit<TextStyle, NestedTypes>, B>
-type UnistyleImage<B> = DeepUniStyle<Omit<ImageStyle, NestedTypes>, B>
-
-export type StaticStyles<B extends Breakpoints> =
-    | UnistyleView<B>
-    | UnistyleText<B>
-    | UnistyleImage<B>
-    & UnistyleNested<B>
-
-export type CustomNamedStyles<T, B extends Breakpoints> = {
-    [K in keyof T]: T[K] extends (...args: infer A) => StaticStyles<B>
-        ? (...args: A) => StaticStyles<B>
-        : StaticStyles<B>
-}
+export type RNStyle = ViewStyle & TextStyle & ImageStyle
+export type RNValue = ViewStyle[keyof ViewStyle] | TextStyle[keyof TextStyle] | ImageStyle[keyof ImageStyle]
+export type NestedStyle = Record<keyof UnistylesBreakpoints | symbol, RNValue>
+export type NestedStylePairs = Array<[keyof UnistylesBreakpoints | symbol, RNValue]>
+export type UnistylesTheme = UnistylesThemes[keyof UnistylesThemes]

package/src/types/index.ts

@@ -1,10 +1,15 @@
 export * from './normalizer'
-export type { CustomNamedStyles } from './core'
+export * from './unistyles'
+export type { Optional, Nullable } from './common'
 export type {
+    NestedStylePairs,
+    UnistylesTheme,
     ScreenSize,
-    Breakpoints,
-    CreateStylesFactory,
-    ExtractBreakpoints,
-    RemoveKeysWithPrefix,
-    SortedBreakpointEntries
-} from './breakpoints'
+    NestedStyle,
+    RNValue,
+    RNStyle
+} from './core'
+export type { StyleSheetWithSuperPowers, StyleSheet, AllAvailableKeys } from './stylesheet'
+export type { ReactNativeStyleSheet } from './breakpoints'
+export type { ExtractVariantNames } from './variants'
+export type { UnistylesPlugin } from './plugin'

package/src/types/plugin.ts

@@ -0,0 +1,7 @@
+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/stylesheet.ts

@@ -0,0 +1,49 @@
+import type { ImageStyle, TextStyle, ViewStyle } from 'react-native'
+import type { ShadowOffset, TransformStyles, UnistylesTheme } from './core'
+import type { UnistylesBreakpoints } from '../global'
+
+// these props are treated differently to nest breakpoints and media queries
+type NestedKeys = 'shadowOffset' | 'transform' | 'textShadowOffset'
+
+type UnistyleView = Omit<ViewStyle, NestedKeys>
+type UnistyleText = Omit<TextStyle, NestedKeys>
+type UnistyleImage = Omit<ImageStyle, NestedKeys>
+
+type UnistyleNestedStyles = {
+    shadowOffset?: ToDeepUnistyles<ShadowOffset>,
+    textShadowOffset?: ToDeepUnistyles<ShadowOffset>,
+    transform?: Array<ToDeepUnistyles<TransformStyles>>
+}
+
+type Variants = {
+    variants?: {
+        [variantName: string]: {
+            [variant: string]: Omit<UnistylesValues, 'variants'>
+        }
+    }
+}
+
+export type ToDeepUnistyles<T> = {
+    [K in keyof T]?: T[K] | {
+        [key in BreakpointsOrMediaQueries]?: T[K]
+    }
+}
+
+type AllAvailableStyles = UnistyleView & UnistyleText & UnistyleImage & UnistyleNestedStyles
+
+export type AllAvailableKeys = keyof (UnistyleView & UnistyleText & UnistyleImage)
+export type BreakpointsOrMediaQueries = keyof UnistylesBreakpoints | symbol
+
+export type UnistylesValues = {
+    [propName in AllAvailableKeys]?: AllAvailableStyles[propName] | {
+        [key in BreakpointsOrMediaQueries]?: AllAvailableStyles[propName]
+    }
+} & Variants & {
+    [propName in NestedKeys]?: UnistyleNestedStyles[propName]
+}
+
+export type StyleSheet = {
+    [styleName: string]: UnistylesValues | ((...args: any) => UnistylesValues)
+}
+
+export type StyleSheetWithSuperPowers = ((theme: UnistylesTheme) => StyleSheet) | StyleSheet

package/src/types/unistyles.ts

@@ -0,0 +1,63 @@
+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 UnistylesConfig = {
+    adaptiveThemes?: boolean,
+    initialTheme?: keyof UnistylesThemes,
+    plugins?: Array<UnistylesPlugin>,
+    experimentalCSSMediaQueries?: 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]]>,
+
+    // setters
+    themes: Array<keyof UnistylesThemes>,
+    useBreakpoints(breakpoints: UnistylesBreakpoints): void,
+    useTheme(name: keyof UnistylesThemes): void,
+    useAdaptiveThemes(enable: boolean): void,
+    addPlugin(pluginName: string, notify: boolean): void,
+    removePlugin(pluginName: string): void
+}
+
+export type UnistylesThemeEvent = {
+    type: UnistylesEventType.Theme,
+    payload: {
+        themeName: keyof UnistylesThemes
+    }
+}
+
+export type UnistylesMobileLayoutEvent = {
+    type: UnistylesEventType.Layout,
+    payload: {
+        screen: ScreenSize,
+        breakpoint: keyof UnistylesBreakpoints,
+        orientation: typeof ScreenOrientation[keyof typeof ScreenOrientation]
+    }
+}
+
+export type UnistylesPluginEvent = {
+    type: UnistylesEventType.Plugin
+}
+
+export type UnistylesDynamicTypeSizeEvent = {
+    type: UnistylesEventType.DynamicTypeSize,
+    payload: {
+        contentSizeCategory: IOSContentSizeCategory | AndroidContentSizeCategory
+    }
+}
+
+export type UnistylesEvents = UnistylesThemeEvent | UnistylesMobileLayoutEvent | UnistylesPluginEvent | UnistylesDynamicTypeSizeEvent

package/src/types/variants.ts

@@ -0,0 +1,19 @@
+export type ExtractVariantNames<T> = T extends (...args: any) => infer R
+    ? ExtractVariantKeys<R>
+    : ExtractVariantKeys<T>
+
+type ExtractVariantKeys<T> = T extends object
+    ? ExtractVariant<T[keyof T]>
+    : never
+
+type ExtractSubVariantKeys<T> = T extends object
+    ? keyof Omit<T, 'default'> | undefined
+    : never
+
+type ExtractVariant<T> = T extends (...args: any) => infer R
+    ? R extends { variants: infer V }
+        ? { [key in keyof V]?: ExtractSubVariantKeys<V[key]> }
+        : never
+    : T extends { variants: infer V }
+        ? { [key in keyof V]?: ExtractSubVariantKeys<V[key]> }
+        : never

package/src/useStyles.ts

@@ -0,0 +1,60 @@
+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)
+        : 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]
+    )
+
+    useCSS(dynamicStyleSheet as ReactNativeStyleSheet<ST>)
+
+    return {
+        theme,
+        breakpoint: layout.breakpoint,
+        styles: dynamicStyleSheet as ReactNativeStyleSheet<ST>
+    }
+}

package/src/utils/breakpoints.ts

@@ -1,140 +1,44 @@
-import { throwError } from './common'
-import type { Breakpoints, ScreenSize, SortedBreakpointEntries } from '../types'
-import { getKeyForCustomMediaQuery, isMediaQuery } from './mediaQueries'
-
-/**
- * Sorts the breakpoints object based on its numeric values in ascending order and validates them.
- *
- * This function takes an object where keys represent breakpoint names and values are numeric.
- * It returns a new object with the same keys but sorted based on their corresponding numeric values.
- * Additionally, it validates that:
- * 1. The first breakpoint starts with a value of 0.
- * 2. No duplicate breakpoint values exist.
- *
- * If the validation fails, appropriate error messages are logged to the console.
- *
- * @template B - An object type where keys are strings and values are numbers.
- * @param {B} breakpoints - The breakpoints object to be sorted and validated.
- * @returns {B} A new object with sorted and validated breakpoints.
- *
- * @example
- * const input = { md: 768, lg: 1024, sm: 0 }
- * sortAndValidateBreakpoints(input) // returns { sm: 0, md: 768, lg: 1024 }
- */
-export const sortAndValidateBreakpoints = <B extends Breakpoints>(breakpoints: B): B => {
-    const sortedPairs = Object
-        .entries(breakpoints)
-        .sort((breakpoint1, breakpoint2) => {
-            const [, value1] = breakpoint1
-            const [, value2] = breakpoint2
-
-            return value1 - value2
-        })
-
-    const sortedBreakpoints =  Object.freeze(Object.fromEntries(sortedPairs)) as B
-    const breakpointValues = Object.values(sortedBreakpoints)
-    const [firstBreakpoint] = breakpointValues
-
-    if (firstBreakpoint !== 0) {
-        throwError('first breakpoint must start with 0')
-    }
-
-    if (breakpointValues.length !== new Set(breakpointValues).size) {
-        throwError('breakpoint values are duplicated')
+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]
     }
 
-    return sortedBreakpoints
-}
-
-/**
- * Determines the appropriate breakpoint key for a given screen width based on provided breakpoints.
- *
- * This function takes a screen width and an object of breakpoints. It returns the key of the breakpoint
- * that the screen width falls into. The breakpoints are assumed to be sorted in ascending order.
- *
- * @template B - An object type where keys are strings and values are numbers representing screen widths.
- * @param {number} width - The screen width to determine the breakpoint for.
- * @param breakpointEntries - sorted pairs of breakpoints
- * @returns {keyof B & string} The key of the breakpoint that the screen width falls into.
- *
- * @example
- * const breakpoints = { sm: 0, md: 768, lg: 1024 }
- * getBreakpointFromScreenWidth(800, breakpoints) // returns 'md'
- */
-export const getBreakpointFromScreenWidth = <B extends Breakpoints>(width: number, breakpointEntries: SortedBreakpointEntries<B>): keyof B & string => {
-    const [key] = breakpointEntries
-        .find(([, value], index, otherBreakpoints) => {
-            const minVal = value
-            const maxVal = otherBreakpoints[index + 1]?.[1]
-
-            if (!maxVal) {
-                return true
-            }
-
-            return width >= minVal && width < maxVal
-        }) as [keyof B & string, number]
+    const hasBreakpoints = unistyles.registry.sortedBreakpointPairs.length > 0
 
-    return key
-}
+    if (!hasBreakpoints && isMobile && (ScreenOrientation.Landscape in value || ScreenOrientation.Portrait in value)) {
+        return value[unistyles.runtime.orientation]
+    }
 
-/**
- * Retrieves the value associated with a given breakpoint or custom media query based on the provided screen size.
- *
- * The function first checks for custom media queries. If a matching custom media query is found, its associated value is returned.
- * If no custom media query matches, the function then checks for a direct breakpoint match.
- * If there's no direct breakpoint match, the function simulates CSS cascading to find the closest matching breakpoint.
- *
- * @template B - An object type where keys represent breakpoint names and values represent breakpoint values.
- *
- * @param {Record<keyof B & string, string | number>} value - An object containing values associated with breakpoints or custom media queries.
- * @param {keyof B & string} breakpoint - The breakpoint name to check against.
- * @param {ScreenSize} screenSize - An object representing the screen size to be checked against the media queries.
- * @param breakpointPairs - sorted pairs of breakpoints
- *
- * @returns {string | number | undefined} Returns the value associated with the matching breakpoint or custom media query, or `undefined` if no match is found.
- *
- * @example
- *
- * const values = { ':w[200]': 'value1', sm: 'value2', md: 'value3' }
- * const screenSize = { width: 250, height: 400 }
- * const breakpoints = { sm: 300, md: 600, lg: 900 }
- *
- * getValueForBreakpoint(values, 'sm', screenSize, breakpoints); // 'value1'
- */
-export const getValueForBreakpoint = <B extends Breakpoints>(
-    value: Record<keyof B & string, string | number | undefined>,
-    breakpoint: keyof B & string,
-    screenSize: ScreenSize,
-    breakpointPairs: SortedBreakpointEntries<B>
-): string | number | undefined => {
-    // the highest priority is for custom media queries
-    const customMediaQueries = Object
-        .entries(value)
-        .filter(([key]) => isMediaQuery(key))
-    const customMediaQueryKey = getKeyForCustomMediaQuery(customMediaQueries, screenSize)
+    const breakpoint = unistyles.runtime.breakpoint
 
-    if (customMediaQueryKey && customMediaQueryKey in value) {
-        return value[customMediaQueryKey]
+    if (!breakpoint) {
+        return undefined
     }
 
-    // if no custom media query, or didn't match, proceed with defined breakpoints
-    const unifiedKey = breakpoint
-    const directBreakpoint = value[unifiedKey]
+    const directBreakpoint = value[breakpoint]
 
-    // if there is a direct key like 'sm' or 'md', or value for this key exists but its undefined
-    if (directBreakpoint || (unifiedKey in value)) {
+    if (directBreakpoint || (breakpoint in value)) {
         return directBreakpoint
     }
 
-    // there is no direct hit for breakpoint nor media-query, so let's simulate CSS cascading
-    const currentBreakpoint = breakpointPairs
-        .findIndex(([key]) => key === unifiedKey)
+    const breakpointPairs = unistyles.registry.sortedBreakpointPairs
+    const currentBreakpointIndex = breakpointPairs
+        .findIndex(([key]) => key === breakpoint)
 
     const availableBreakpoints = breakpointPairs
-        .filter(([key], index) => index < currentBreakpoint && key && key in value)
+        .filter(([key], index) => index < currentBreakpointIndex && key in value)
         .map(([key]) => key)
 
-    return breakpointPairs.length > 0
-        ? value[availableBreakpoints[availableBreakpoints.length - 1] as keyof B & string]
-        : undefined
+    return value[availableBreakpoints[availableBreakpoints.length - 1] as keyof UnistylesBreakpoints & string]
 }