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

package/src/utils/mediaQueries.ts

@@ -1,92 +1,110 @@
+import type { UnistylesBreakpoints } from 'react-native-unistyles'
 import type { ScreenSize } from '../types'
+import type { MediaQueries } from '../types'
+
+const parseLhs = (lhs: string, breakpoints: UnistylesBreakpoints, hasRhs: boolean) => {
+    const matches = lhs.match(/([([])|([^[\]()]+)|([\])])/g)
+
+    if (!hasRhs) {
+        const [openBracket, value, closeBracket] = matches  as [string, string, string]
+        const spacelessValue = value?.trim()
+        const parsedNumber = Number(spacelessValue)
+
+        const parsedValue = isNaN(parsedNumber)
+            ? breakpoints[spacelessValue as keyof UnistylesBreakpoints] as number
+            : parsedNumber
+
+        return [
+            Number(openBracket === '('),
+            closeBracket === ')'
+                ? parsedValue - 1
+                : parsedValue
+        ]
+    }
+
+    const [openBracket, value] = matches as [string, string]
 
-/**
- * Extracts numeric values from a coded string.
- *
- * The function is designed to process strings that have a format like "w[100,200]" or "h[300]".
- * It removes characters 'w', 'h', '[', and ']' from the input string and then extracts the numbers.
- *
- * @param {string} codedValue - The input string to extract values from.
- * @returns {Array<number>} An array of extracted numbers. Can contain one or two numbers based on the input format.
- *
- * @example
- * extractValues("w[100,200]") // returns [100, 200]
- * extractValues("h[300]")     // returns [300]
- * extractValues("h[,300]")    // returns [0,300]
- * extractValues("h[100,]")    // returns [100]
- */
-export const extractValues = (codedValue: string): Array<number> => {
-    const cleanedValue = codedValue.replace(/[wh ]/g, '')
-    const [left, right] = cleanedValue.split(',') as [string, string | undefined]
-
-    if (!right) {
-        const lh = left.startsWith('[')
-            ? Number(left.replace(/[[\]()]/g, ''))
-            : Number(left.replace(/[[\]()]/g, '')) + 1
-
-        return [lh]
+    if (!value) {
+        return [Number(openBracket === '(')]
     }
 
-    const lh = left.startsWith('[')
-        ? Number(left.replace('[', ''))
-        : Number(left.replace('(', '')) + 1
-    const rh = right.endsWith(']')
-        ? Number(right.replace(']', ''))
-        : Number(right.replace(')', '')) - 1
+    const spacelessValue = value?.trim()
+    const parsedNumber = Number(spacelessValue)
+
+    const parsedValue = isNaN(parsedNumber)
+        ? breakpoints[spacelessValue as keyof UnistylesBreakpoints] as number
+        : parsedNumber
+
+    return openBracket === '('
+        ? [parsedValue - 1]
+        : [parsedValue]
+}
 
-    return [lh, rh]
+const parseRhs = (rhs: string, breakpoints: UnistylesBreakpoints) => {
+    const matches = rhs.match(/([([])|([^[\]()]+)|([\])])/g)
+    const [value, closeBrackets] = matches as [string, string]
+    const spacelessValue = value.trim()
+    const parsedNumber = Number(spacelessValue)
+
+    const parsedValue = isNaN(parsedNumber)
+        ? breakpoints[spacelessValue as keyof UnistylesBreakpoints] as number
+        : parsedNumber
+
+    return [
+        closeBrackets === ')'
+            ? parsedValue - 1
+            : parsedValue
+    ]
 }
 
-/**
- * Determines if the given screen size matches the specified breakpoint query.
- *
- * The function checks if the screen size (width and/or height) falls within the range
- * specified by the breakpoint query. The query can specify width (using 'w'), height (using 'h'),
- * or both.
- *
- * @param {string} query - The breakpoint query string. Examples: 'w[100,200]', 'h[300]', 'w[100,200]h[300,400]'.
- * @param {ScreenSize} screenSize - The screen size to check against the breakpoint query.
- * @returns {boolean} True if the screen size matches the breakpoint query, false otherwise.
- *
- * @example
- * const screenSize = { width: 150, height: 350 }
- * isWithinBreakpoint('w[100,200]', screenSize) // returns true
- * isWithinBreakpoint('h[400]', screenSize)     // returns false
- */
-export const isWithinBreakpoint = (query: string, screenSize: ScreenSize): boolean => {
-    if (query.includes('w') && query.includes('h')) {
-        return isWithinTheWidthAndHeight(query, screenSize)
+export const extractValues = (pattern: string, breakpoints: UnistylesBreakpoints): Array<number> => {
+    const [lhs, rhs] = pattern
+        .replace(/(:w|:h)/g, '')
+        .split(',') as [string, string | undefined]
+
+    if (!rhs) {
+        return parseLhs(lhs, breakpoints, false)
+    }
+
+    const [parsedLhs] = parseLhs(lhs, breakpoints, true)
+
+    if (parsedLhs === undefined || isNaN(parsedLhs)) {
+        return []
+    }
+
+    const [parsedRhs] = parseRhs(rhs, breakpoints)
+
+    if (parsedRhs === undefined || isNaN(parsedRhs)) {
+        return []
+    }
+
+    return [
+        parsedLhs,
+        parsedRhs
+    ]
+}
+
+export const isWithinBreakpoint = (query: string, screenSize: ScreenSize, breakpoints: UnistylesBreakpoints): boolean => {
+    const hasWidthBreakpoint = query.includes(':w')
+    const hasHeightBreakpoint = query.includes(':h')
+
+    if (hasWidthBreakpoint && hasHeightBreakpoint) {
+        return isWithinTheWidthAndHeight(query, screenSize, breakpoints)
     }
 
-    if (query.charAt(0) === 'w') {
-        return isWithinTheWidth(query, screenSize.width)
+    if (hasWidthBreakpoint) {
+        return isWithinTheWidth(query, screenSize.width, breakpoints)
     }
 
-    if (query.charAt(0) === 'h') {
-        return isWithinTheHeight(query, screenSize.height)
+    if (hasHeightBreakpoint) {
+        return isWithinTheHeight(query, screenSize.height, breakpoints)
     }
 
     return false
 }
 
-/**
- * Determines if the given width matches the specified width range in the query.
- *
- * The function checks if the provided width falls within the range specified by the query.
- * The query specifies a width range using a format like 'w[100,200]'. If only one value is provided,
- * it's treated as a minimum width.
- *
- * @param {string} query - The width query string. Examples: 'w[100,200]' or 'w[100]'.
- * @param {number} width - The width to check against the query.
- * @returns {boolean} True if the width matches the query range, false otherwise.
- *
- * @example
- * isWithinTheWidth('w[100,200]', 150) // returns true
- * isWithinTheWidth('w[100]', 50)      // returns false
- * isWithinTheWidth('w[100]', 150)     // returns true
- */
-export const isWithinTheWidth = (query: string, width: number): boolean => {
-    const [minWidth, maxWidth] = extractValues(query) as [number, number | undefined]
+export const isWithinTheWidth = (query: string, width: number, breakpoints: UnistylesBreakpoints): boolean => {
+    const [minWidth, maxWidth] = extractValues(query, breakpoints) as [number, number | undefined]
 
     if (maxWidth && width >= minWidth && width <= maxWidth) {
         return true
@@ -95,24 +113,8 @@ export const isWithinTheWidth = (query: string, width: number): boolean => {
     return !maxWidth && width >= minWidth
 }
 
-/**
- * Determines if the given height matches the specified height range in the query.
- *
- * The function checks if the provided height falls within the range specified by the query.
- * The query specifies a height range using a format like 'h[100,200]'. If only one value is provided,
- * it's treated as a minimum height.
- *
- * @param {string} query - The height query string. Examples: 'h[100,200]' or 'h[100]'.
- * @param {number} height - The height to check against the query.
- * @returns {boolean} True if the height matches the query range, false otherwise.
- *
- * @example
- * isWithinTheHeight('h[100,200]', 150) // returns true
- * isWithinTheHeight('h[100]', 50)      // returns false
- * isWithinTheHeight('h[100]', 150)     // returns true
- */
-export const isWithinTheHeight = (query: string, height: number): boolean => {
-    const [minHeight, maxHeight] = extractValues(query) as [number, number | undefined]
+export const isWithinTheHeight = (query: string, height: number, breakpoints: UnistylesBreakpoints): boolean => {
+    const [minHeight, maxHeight] = extractValues(query, breakpoints) as [number, number | undefined]
 
     if (maxHeight && height >= minHeight && height <= maxHeight) {
         return true
@@ -121,92 +123,29 @@ export const isWithinTheHeight = (query: string, height: number): boolean => {
     return !maxHeight && height >= minHeight
 }
 
-/**
- * Determines if the given screen size matches both the specified width and height ranges in the query.
- *
- * The function checks if the provided screen size (both width and height) falls within the ranges
- * specified by the query. The query can specify both width and height using a format like 'w[100,200]:h[300,400]'.
- *
- * @param {string} query - The combined width and height query string. Example: 'w[100,200]:h[300,400]'.
- * @param {ScreenSize} screenSize - The screen size to check against the query.
- * @returns {boolean} True if the screen size matches both the width and height ranges in the query, false otherwise.
- *
- * @example
- * const screenSize = { width: 150, height: 350 }
- * isWithinTheWidthAndHeight('w[100,200]:h[300,400]', screenSize) // returns true
- * isWithinTheWidthAndHeight('w[100,200]:h[400,500]', screenSize) // returns false
- */
-export const isWithinTheWidthAndHeight = (query: string, screenSize: ScreenSize): boolean => {
+export const isWithinTheWidthAndHeight = (query: string, screenSize: ScreenSize, breakpoints: UnistylesBreakpoints): boolean => {
     const result = query
         .split(':')
         .filter(Boolean)
-        .map(q => isWithinBreakpoint(q, screenSize))
+        .map(q => isWithinBreakpoint(`:${q}`, screenSize, breakpoints))
         .filter(Boolean)
 
     return result.length === 2
 }
 
-/**
- * Checks if the given query string is a valid custom media query.
- *
- * The valid custom media query formats include:
- * - :w[200]
- * - :w[0, 200]
- * - :w[, 300]
- * - :h[200]
- * - :h[0, 500]
- * - :h[,200]
- * - :w[100, 300]:h[200,500]
- * - :h[200,500]:w[100, 300]
- *
- * @param {string} query - The query string to be checked.
- * @returns {boolean} Returns `true` if the query is a valid custom media query, otherwise `false`.
- * @example
- *
- * isMediaQuery(':w[200]') // true
- * isMediaQuery(':w100]')  // false
- */
 export const isMediaQuery = (query: string): boolean => {
-    const regex = /^(?:(:w\[\d*(?:,\s?\d+)?])?(:h\[\d*(?:,\s?\d+)?])?|(:h\[\d*(?:,\s?\d+)?])?(:w\[\d*(?:,\s?\d+)?])?)$/
+    const regex = /(:w|:h)/
 
     return query.length > 0 && regex.test(query)
 }
 
-/**
- * Retrieves the first matching custom media query key based on the provided screen size.
- *
- * The function processes an array of media queries and returns the first query that matches
- * the given screen size. The media queries can be in formats like:
- * - w[200]
- * - w[0, 200]
- * - w[, 300]
- * - h[200]
- * - h[0, 500]
- * - h[,200]
- * - w[100, 300]:h[200,500]
- * - h[200,500]:w[100, 300]
- *
- * @param {Array<[string, string | number]>} mediaQueries - An array of tuples containing media query keys and associated values.
- * @param {ScreenSize} screenSize - An object representing the screen size to be checked against the media queries.
- * @returns {string | undefined} Returns the first matching media query key or `undefined` if no match is found.
- * @example
- *
- * const queries = [[':w[200]', 'value1'], [':h[300,500]', 'value2']]
- * const size = { width: 250, height: 400 }
- * getKeyForCustomMediaQuery(queries, size) // ':w[200]
- */
-export const getKeyForCustomMediaQuery = (mediaQueries: Array<[string, string | number | undefined]>, screenSize: ScreenSize): string | undefined => {
+export const getKeyForCustomMediaQuery = (
+    mediaQueries: Array<[keyof UnistylesBreakpoints | MediaQueries, string | number | undefined]>,
+    screenSize: ScreenSize,
+    breakpoints: UnistylesBreakpoints
+): string | undefined => {
     const [matchedQuery] = mediaQueries
-        .flatMap(([key]) => {
-            if (key.includes('w') && key.includes('h')) {
-                return isWithinBreakpoint(key, screenSize) ? key : undefined
-            }
-
-            return key
-                .split(':')
-                .filter(Boolean)
-                .map(query => isWithinBreakpoint(query, screenSize) ? key : undefined)
-        })
+        .flatMap(([key]) => isWithinBreakpoint(key, screenSize, breakpoints) ? key : undefined)
         .filter(Boolean)
 
     return matchedQuery

package/src/utils/mq.ts

@@ -0,0 +1,77 @@
+import type { UnistylesBreakpoints } from '../global'
+import { unistyles } from '../Unistyles'
+
+const MQSymbol = Symbol('unistyles-mq')
+
+type MQValue = keyof UnistylesBreakpoints | number
+
+type HeightHandler = {
+    width(wMin?: MQValue, wMax?: MQValue): typeof MQSymbol
+} & typeof MQSymbol
+
+type WidthHandler = {
+    height(hMin?: MQValue, hMax?: MQValue): typeof MQSymbol
+} & typeof MQSymbol
+
+type FinalHandler = {
+    [MQSymbol]: true
+}
+
+enum MQProp {
+    toString = 'toString',
+    width = 'width',
+    height = 'height'
+}
+
+const getMQValue = (value: MQValue) => {
+    if (typeof value === 'number') {
+        return value
+    }
+
+    return unistyles.registry.breakpoints[value] ?? 0
+}
+
+export const mq = {
+    height: (hMin: MQValue = 0, hMax: MQValue = Infinity) => new Proxy<HeightHandler>({} as HeightHandler, {
+        get: (target, prop, receiver) => {
+            if (prop === Symbol.toPrimitive || prop === MQProp.toString) {
+                return () => `:h[${getMQValue(hMin)}, ${getMQValue(hMax)}]`
+            }
+
+            if (prop === MQProp.width) {
+                return (wMin: MQValue = 0, wMax: MQValue = Infinity) => new Proxy<FinalHandler>({} as FinalHandler, {
+                    get: (target, prop, receiver) => {
+                        if (prop === Symbol.toPrimitive || prop === MQProp.toString) {
+                            return () => `:w[${getMQValue(wMin)}, ${getMQValue(wMax)}]:h[${getMQValue(hMin)}, ${getMQValue(hMax)}]`
+                        }
+
+                        return Reflect.get(target, prop, receiver)
+                    }
+                })
+            }
+
+            return Reflect.get(target, prop, receiver)
+        }
+    }),
+    width: (wMin: MQValue = 0, wMax: MQValue = Infinity) => new Proxy({} as WidthHandler, {
+        get: (target, prop, receiver) => {
+            if (prop === Symbol.toPrimitive || prop === MQProp.toString) {
+                return () => `:w[${getMQValue(wMin)}, ${getMQValue(wMax)}]`
+            }
+
+            if (prop === MQProp.height) {
+                return (hMin: MQValue = 0, hMax: MQValue = Infinity) => new Proxy<FinalHandler>({} as FinalHandler, {
+                    get: (target, prop, receiver) => {
+                        if (prop === Symbol.toPrimitive || MQProp.toString) {
+                            return () => `:w[${getMQValue(wMin)}, ${getMQValue(wMax)}]:h[${getMQValue(hMin)}, ${getMQValue(hMax)}]`
+                        }
+
+                        return Reflect.get(target, prop, receiver)
+                    }
+                })
+            }
+
+            return Reflect.get(target, prop, receiver)
+        }
+    })
+}

package/src/utils/styles.ts

@@ -1,30 +1,9 @@
-import type { CustomNamedStyles, ScreenSize } from '../types'
+import type { CustomNamedStyles, MediaQueries, ScreenSize } from '../types'
 import { getValueForBreakpoint } from './breakpoints'
 import { normalizeStyles } from './normalizeStyles'
-import { isWeb } from './common'
 import type { UnistylesBreakpoints } from '../global'
+import { isAndroid, isIOS, isWeb } from './common'
 
-/**
- * Proxies a function to parse its return value for custom media queries or breakpoints.
- *
- * @template B - An object type where keys represent breakpoint names and values represent breakpoint values.
- *
- * @param {Function} fn - The function to be proxified.
- * @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 {Function} Returns the proxified function
- *
- * @example
- *
- * const myFunction = () => ({ ':w[200]': 'value1', sm: 'value2' })
- * const screenSize = { width: 250, height: 400 }
- * const breakpoints = { sm: 300, md: 600 }
- *
- * const proxifiedFunction = proxifyFunction(myFunction, 'sm', screenSize, breakpoints)
- * proxifiedFunction() // parsed style based on screenSize and breakpoints
- */
 export const proxifyFunction = (
     fn: Function, breakpoint: keyof UnistylesBreakpoints & string,
     screenSize: ScreenSize
@@ -33,37 +12,20 @@ export const proxifyFunction = (
         parseStyle(target.apply(thisArg, argumentsList), breakpoint, screenSize)
 })
 
-/**
- * Parses a style object to resolve custom media queries or breakpoints based on the provided screen size and breakpoints.
- *
- * The function processes each key-value pair in the style object. If the value is a function or a valid style (not an object or a 'transform' key),
- * it is returned as-is. Otherwise, the function attempts to resolve the value based on the provided breakpoint, screen size, and defined breakpoints.
- *
- * @template T - The type of the style object.
- * @template B - An object type where keys represent breakpoint names and values represent breakpoint values.
- *
- * @param {CustomNamedStyles<T, B>} style - The style object to be parsed.
- * @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 {Record<string, string | number | Function>} Returns the parsed style object with resolved custom media queries or breakpoints.
- *
- * @example
- *
- * const style = { fontSize: { sm: '12px', md: '16px' } }
- * const screenSize = { width: 300, height: 400 }
- * const breakpoints = { xs: 0, sm: 300, md: 600 }
- *
- * const parsedStyle = parseStyle(style, 'sm', screenSize, breakpoints)
- * // { fontSize: '12px' }
- */
+export const isPlatformColor = <T extends {}>(value: T): boolean => {
+    if (isIOS) {
+        return 'semantic' in value && typeof value.semantic === 'object'
+    }
+
+    return isAndroid && 'resource_paths' in value && typeof value.resource_paths === 'object'
+}
+
 export const parseStyle = <T>(
     style: CustomNamedStyles<T>,
     breakpoint: keyof UnistylesBreakpoints & string,
     screenSize: ScreenSize
 ): T => {
-    const entries = Object.entries(style) as [[
+    const entries = Object.entries(style || {}) as [[
         keyof T,
         CustomNamedStyles<T> | Record<keyof UnistylesBreakpoints & string, string | number | undefined>]
     ]
@@ -90,7 +52,7 @@ export const parseStyle = <T>(
                 }
 
                 const isDynamicFunction = typeof value === 'function'
-                const isValidStyle = typeof value !== 'object'
+                const isValidStyle = typeof value !== 'object' || isPlatformColor(value)
 
                 if (isDynamicFunction || isValidStyle) {
                     return [key, value]
@@ -98,11 +60,7 @@ export const parseStyle = <T>(
 
                 return [
                     key,
-                    getValueForBreakpoint(
-                        value as Record<keyof UnistylesBreakpoints & string, string | number | undefined>,
-                        breakpoint,
-                        screenSize
-                    )
+                    getValueForBreakpoint(value as Record<keyof UnistylesBreakpoints | MediaQueries, string | number | undefined>)
                 ]
             })
         )