react-native-unistyles 2.0.0-alpha.5 → 2.0.0-alpha.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-unistyles",
-  "version": "2.0.0-alpha.5",
+  "version": "2.0.0-alpha.7",
   "description": "Level up your React Native StyleSheet",
   "scripts": {
     "test": "jest",
@@ -20,7 +20,16 @@
     "src",
     "lib",
     "ios",
+    "android",
+    "cxx",
     "react-native-unistyles.podspec",
+    "!lib/typescript/examples",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
     "!**/*.spec.ts",
     "!**/*.spec.tsx",
     "!**/.*"

package/src/Unistyles.ts

@@ -1,13 +1,13 @@
 import { UnistylesModule } from './UnistylesModule'
 import { UnistylesRuntime } from './UnistylesRuntime'
-import { UnistylesEngine } from './UnistylesEngine'
+import { UnistylesBuiltInEngine } from './UnistylesEngine'
 import { UnistyleRegistry } from './UnistyleRegistry'
 import type { UnistylesBridge } from './types'
 import { UnistylesError } from './types'
 
 class Unistyles {
     private _runtime: UnistylesRuntime
-    private _engine: UnistylesEngine
+    private _engine: UnistylesBuiltInEngine
     private _registry: UnistyleRegistry
     private _bridge: UnistylesBridge
 
@@ -22,7 +22,7 @@ class Unistyles {
         this._bridge = global.__UNISTYLES__ as UnistylesBridge
         this._registry = new UnistyleRegistry(this._bridge)
         this._runtime = new UnistylesRuntime(this._bridge, this._registry)
-        this._engine = new UnistylesEngine(this._registry, this._runtime)
+        this._engine = new UnistylesBuiltInEngine(this._registry, this._runtime)
     }
 
     public get registry() {

package/src/UnistylesEngine.ts

@@ -1,14 +1,23 @@
 import type { UnistyleRegistry } from './UnistyleRegistry'
 import type { UnistylesRuntime } from './UnistylesRuntime'
+import { getKeyForCustomMediaQuery } from './utils'
+import type { UnistylesEngine, NestedKeys } from './types'
 
-// todo implement engine
-export class UnistylesEngine {
-    // @ts-ignore
+export class UnistylesBuiltInEngine implements UnistylesEngine {
     constructor(private registry: UnistyleRegistry, private runtime: UnistylesRuntime) {
         this.registry = registry
         this.runtime = runtime
     }
 
+    public isMediaQuery = (key: string) => {
+        const regex = /(:w|:h)/
+
+        return key.length > 0 && regex.test(key)
+    }
+
+    public didMatchMediaQuery = (keys: NestedKeys) =>
+        getKeyForCustomMediaQuery(keys, this.runtime.screen, this.registry.breakpoints)
+
     // UnistylesEngine.parseStyleSheet
     // UnistylesEngine.parseStyle
     // UnistylesEngine.proxify

package/src/createStyleSheet.ts

@@ -1,9 +1,6 @@
-import type { CustomNamedStyles } from './types'
-import type { UnistylesThemes } from './global'
+import type { CustomNamedStyles, UnistylesTheme } from './types'
 
-type T = UnistylesThemes[keyof UnistylesThemes]
-
-export const createStyleSheet = <S extends CustomNamedStyles<S>, X>(styles: S | CustomNamedStyles<S> | X | ((theme: T) => X | CustomNamedStyles<X>)): S | X => {
+export const createStyleSheet = <S, X>(styles: S | CustomNamedStyles<S> | X | ((theme: UnistylesTheme) => X | CustomNamedStyles<X>)): S | X => {
     if (typeof styles === 'function') {
         return styles as X
     }

package/src/index.ts

@@ -2,6 +2,7 @@ import { unistyles } from './Unistyles'
 import type { UnistylesThemes, UnistylesBreakpoints } from './global'
 import { ScreenOrientation } from './types'
 
+export { mq } from './utils'
 export { useInitialTheme } from './useInitialTheme'
 
 export { useStyles } from './useStyles'

package/src/types/breakpoints.ts

@@ -1,3 +1,4 @@
+import type { OpaqueColorValue } from 'react-native'
 import type { UnistylesBreakpoints } from '../global'
 import type { MediaQueries } from './mediaQueries'
 
@@ -25,7 +26,9 @@ export type ExtractBreakpoints<T> = T extends Partial<Record<keyof UnistylesBrea
 export type RemoveKeysWithPrefix<T> = T extends (...args: Array<any>) => infer R
     ? (...args: Parameters<T>) => RemoveKeysWithPrefix<R>
     : T extends object
-        ? T extends Record<string, infer _V>
-            ? { [K in keyof T as K extends MediaQueries ? keyof UnistylesBreakpoints & string : K]: RemoveKeysWithPrefix<T[K]> }
-            : { [K in keyof T]: RemoveKeysWithPrefix<T[K]> }
+        ? T extends OpaqueColorValue
+            ? string
+            : T extends Record<string, infer _V>
+                ? { [K in keyof T as K extends MediaQueries ? keyof UnistylesBreakpoints & string : K]: RemoveKeysWithPrefix<T[K]> }
+                : { [K in keyof T]: RemoveKeysWithPrefix<T[K]> }
         : T

package/src/types/core.ts

@@ -15,7 +15,7 @@ import type {
 } from 'react-native/Libraries/StyleSheet/StyleSheetTypes'
 import type { ImageStyle, TextStyle, ViewStyle } from 'react-native'
 import type { MediaQueries } from './mediaQueries'
-import type { UnistylesBreakpoints } from '../global'
+import type { UnistylesBreakpoints, UnistylesThemes } from '../global'
 
 type ShadowOffset = {
     width: number,
@@ -37,37 +37,40 @@ type TransformStyles =
     & SkewYTransform
     & MatrixTransform
 
-type UnistyleNested<B> = {
-    shadowOffset?: DeepUniStyle<ShadowOffset, B>,
-    textShadowOffset?: DeepUniStyle<ShadowOffset, B>,
-    transform?: Array<DeepUniStyle<TransformStyles, B>>
+type UnistyleNested = {
+    shadowOffset?: DeepUniStyle<ShadowOffset>,
+    textShadowOffset?: DeepUniStyle<ShadowOffset>,
+    transform?: Array<DeepUniStyle<TransformStyles>>
 }
 
-type UniStyle<V, B> = {
-    [innerKey in keyof B]?: V
+type UniStyle<V> = {
+    [innerKey in keyof UnistylesBreakpoints]: V
 } | {
-    [innerKey in MediaQueries]?: V
-} | V
+    [innerKey in MediaQueries]: V
+}
 
-type DeepUniStyle<T, B> = {
-    [K in keyof T]?: UniStyle<T[K], B>
+type DeepUniStyle<T> = {
+    [K in keyof T]?: UniStyle<T[K]> | T[K]
 }
 
 // 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>
+type UnistyleView = DeepUniStyle<Omit<ViewStyle, NestedTypes>>
+type UnistyleText = DeepUniStyle<Omit<TextStyle, NestedTypes>>
+type UnistyleImage = DeepUniStyle<Omit<ImageStyle, NestedTypes>>
 
-export type StaticStyles<B> =
-    | UnistyleView<B>
-    | UnistyleText<B>
-    | UnistyleImage<B>
-    & UnistyleNested<B>
+export type StaticStyles =
+    | UnistyleView
+    | UnistyleText
+    | UnistyleImage
+    & UnistyleNested
 
 export type CustomNamedStyles<T> = {
-    [K in keyof T]: T[K] extends (...args: infer A) => StaticStyles<UnistylesBreakpoints>
-        ? (...args: A) => StaticStyles<UnistylesBreakpoints>
-        : StaticStyles<UnistylesBreakpoints>
+    [K in keyof T]: T[K] extends (...args: infer A) => StaticStyles
+        ? (...args: A) => StaticStyles
+        : StaticStyles
 }
+
+export type NestedKeys = Array<[keyof UnistylesBreakpoints | MediaQueries, string | number | undefined]>
+export type UnistylesTheme = UnistylesThemes[keyof UnistylesThemes]

package/src/types/cxx.ts

@@ -1,8 +1,10 @@
 import type { UnistylesThemes, UnistylesBreakpoints } from '../global'
 import type { ScreenSize } from './breakpoints'
+import type { NestedKeys } from './core'
 
+export type Optional<T> = T | undefined
 export type Nullable<T> = T | null
-export type ColorSchemeName = 'light' | 'dark' | undefined
+export type ColorSchemeName = Optional<'light' | 'dark'>
 
 export type UnistylesConfig = {
     adaptiveThemes?: boolean
@@ -64,3 +66,8 @@ export enum UnistylesError {
     BreakpointsCannotBeEmpty = 'UNISTYLES_ERROR_BREAKPOINTS_CANNOT_BE_EMPTY',
     BreakpointsMustStartFromZero = 'UNISTYLES_ERROR_BREAKPOINTS_MUST_START_FROM_ZERO',
 }
+
+export interface UnistylesEngine {
+    isMediaQuery(key: string): boolean,
+    didMatchMediaQuery(keys: NestedKeys): Optional<string>,
+}

package/src/types/index.ts

@@ -1,6 +1,6 @@
 export * from './normalizer'
 export * from './cxx'
-export type { CustomNamedStyles } from './core'
+export type { CustomNamedStyles, NestedKeys, UnistylesTheme } from './core'
 export type { MediaQueries } from './mediaQueries'
 export type {
     ScreenSize,

package/src/types/mediaQueries.ts

@@ -1,9 +1,14 @@
 type Optional<TOptional extends string> = TOptional | ''
 type Separator = ',' | ', '
-// this is super weird, but number passes empty string and bigint does not
-type MediaQuery = `[${Separator}${bigint}]` | `[${bigint}${Optional<`${Separator}${bigint}`>}]`
-type WidthMediaQuery = `:w${MediaQuery}`
-type HeightMediaQuery = `:h${MediaQuery}`
+type OpeningBracket = '(' | '['
+type ClosingBracket = ')' | ']'
+
+type NumericMediaQuery =
+    | `${OpeningBracket}${Separator}${bigint}${ClosingBracket}`
+    | `${OpeningBracket}${bigint}${Optional<`${Separator}${bigint}`>}${ClosingBracket}`
+
+type WidthMediaQuery = `:w${NumericMediaQuery}`
+type HeightMediaQuery = `:h${NumericMediaQuery}`
 
 export type MediaQueries =
     | `${WidthMediaQuery}${Optional<HeightMediaQuery>}`

package/src/useStyles.ts

@@ -3,12 +3,9 @@ import { StyleSheet } from 'react-native'
 import { parseStyle, proxifyFunction } from './utils'
 import type { CreateStylesFactory, CustomNamedStyles, ExtractBreakpoints, RemoveKeysWithPrefix } from './types'
 import { useUnistyles } from './useUnistyles'
-import type { UnistylesThemes } from './global'
+import type { UnistylesTheme } from './types'
 
-// todo types
-type T = UnistylesThemes[keyof UnistylesThemes]
-
-export const useStyles = <ST extends CustomNamedStyles<ST>>(stylesheet?: ST | CreateStylesFactory<ST, T>) => {
+export const useStyles = <ST extends CustomNamedStyles<ST>>(stylesheet?: ST | CreateStylesFactory<ST, UnistylesTheme>) => {
     const { theme, breakpoint, screenSize } = useUnistyles()
 
     if (!stylesheet) {
@@ -20,7 +17,7 @@ export const useStyles = <ST extends CustomNamedStyles<ST>>(stylesheet?: ST | Cr
     }
 
     const parsedStyles = useMemo(() => typeof stylesheet === 'function'
-        ? stylesheet(theme!)
+        ? stylesheet(theme)
         : stylesheet, [theme, stylesheet])
 
     const dynamicStyleSheet = useMemo(() => Object

package/src/useUnistyles.ts

@@ -1,16 +1,23 @@
 import { NativeEventEmitter, NativeModules } from 'react-native'
 import { useEffect, useState } from 'react'
-import type { UnistylesThemeEvent, UnistylesMobileLayoutEvent, UnistylesEvents } from './types'
+import type {
+    UnistylesThemeEvent,
+    UnistylesMobileLayoutEvent,
+    UnistylesEvents,
+    ScreenSize,
+    UnistylesTheme
+} from './types'
 import { CxxUnistylesEventTypes, ScreenOrientation } from './types'
 import { unistyles } from './Unistyles'
+import type { UnistylesBreakpoints } from './global'
 
 const unistylesEvents = new NativeEventEmitter(NativeModules.Unistyles)
 
 export const useUnistyles = () => {
     const [orientation, setOrientation] = useState<ScreenOrientation>(unistyles.runtime.orientation)
-    const [theme, setTheme] = useState(unistyles.runtime.getTheme(unistyles.runtime.themeName))
-    const [breakpoint, setBreakpoint] = useState(unistyles.runtime.breakpoint)
-    const [screenSize, setScreenSize] = useState({
+    const [theme, setTheme] = useState<UnistylesTheme>(unistyles.runtime.getTheme(unistyles.runtime.themeName))
+    const [breakpoint, setBreakpoint] = useState<keyof UnistylesBreakpoints>(unistyles.runtime.breakpoint)
+    const [screenSize, setScreenSize] = useState<ScreenSize>({
         width: unistyles.runtime.screen.width,
         height: unistyles.runtime.screen.height
     })

package/src/utils/breakpoints.ts

@@ -1,29 +1,9 @@
 import { unistyles } from '../Unistyles'
 import { isMobile, Orientation, throwError } from './common'
-import type { ScreenSize, MediaQueries } from '../types'
+import type { MediaQueries } from '../types'
 import { ScreenOrientation } from '../types'
-import { getKeyForCustomMediaQuery, isMediaQuery } from './mediaQueries'
 import type { UnistylesBreakpoints } from '../global'
 
-/**
- * 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 = (breakpoints: UnistylesBreakpoints): UnistylesBreakpoints => {
     const sortedPairs = Object
         .entries(breakpoints)
@@ -49,21 +29,6 @@ export const sortAndValidateBreakpoints = (breakpoints: UnistylesBreakpoints): U
     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 = (width: number, breakpointEntries: Array<[keyof UnistylesBreakpoints, UnistylesBreakpoints[keyof UnistylesBreakpoints]]>): keyof UnistylesBreakpoints & string => {
     const [key] = breakpointEntries
         .find(([, value], index, otherBreakpoints) => {
@@ -80,40 +45,13 @@ export const getBreakpointFromScreenWidth = (width: number, breakpointEntries: A
     return key
 }
 
-/**
- * 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 = (
-    value: Record<keyof UnistylesBreakpoints | MediaQueries, string | number | undefined>,
-    breakpoint: keyof UnistylesBreakpoints,
-    screenSize: ScreenSize
-): string | number | undefined => {
+export const getValueForBreakpoint = (value: Record<keyof UnistylesBreakpoints | MediaQueries, string | number | undefined>): 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) as keyof typeof value
+        .filter(([key]) => unistyles.engine.isMediaQuery(key)) as Array<[keyof UnistylesBreakpoints | MediaQueries, string | number | undefined]>
+    // const customMediaQueryKey = getKeyForCustomMediaQuery(customMediaQueries, screenSize) as keyof typeof value
+    const customMediaQueryKey = unistyles.engine.didMatchMediaQuery(customMediaQueries) as keyof typeof value
 
     if (customMediaQueryKey && customMediaQueryKey in value) {
         return value[customMediaQueryKey]
@@ -132,19 +70,24 @@ export const getValueForBreakpoint = (
         ]
     }
 
+    const breakpoint = unistyles.runtime.breakpoint
+
+    if (!breakpoint) {
+        return undefined
+    }
+
     // if user defined breakpoints, then we look for the valid one
-    const unifiedKey = breakpoint?.toLowerCase() as keyof typeof value
-    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, let's simulate CSS cascading
     const breakpointPairs = unistyles.runtime.sortedBreakpoints
     const currentBreakpoint = breakpointPairs
-        .findIndex(([key]) => key === unifiedKey)
+        .findIndex(([key]) => key === breakpoint)
 
     const availableBreakpoints = breakpointPairs
         .filter(([key], index) => index < currentBreakpoint && key && key in value)

package/src/utils/common.ts

@@ -10,6 +10,8 @@ export const warn = (message: string) => {
 
 export const isMobile = Platform.OS === 'android' || Platform.OS === 'ios'
 export const isWeb = Platform.OS === 'web'
+export const isIOS = Platform.OS === 'ios'
+export const isAndroid = Platform.OS === 'android'
 export const isServer = typeof window === 'undefined'
 
 export const Orientation = {

package/src/utils/index.ts

@@ -1,5 +1,6 @@
 export { normalizeStyles } from './normalizeStyles'
 export * from './normalizer'
+export { mq } from './mq'
 export { getBreakpointFromScreenWidth, sortAndValidateBreakpoints, getValueForBreakpoint } from './breakpoints'
 export { proxifyFunction, parseStyle } from './styles'
 export { isServer, Orientation } from './common'