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

package/lib/typescript/src/useInitialTheme.d.ts

@@ -1,3 +0,0 @@
-import type { UnistylesThemes } from './global';
-export declare const useInitialTheme: (forName: keyof UnistylesThemes) => void;
-//# sourceMappingURL=useInitialTheme.d.ts.map

package/lib/typescript/src/useInitialTheme.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useInitialTheme.d.ts","sourceRoot":"","sources":["../../../src/useInitialTheme.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAE/C,eAAO,MAAM,eAAe,YAAa,MAAM,eAAe,SAE7D,CAAA"}

package/lib/typescript/src/useUnistyles.d.ts

@@ -1,10 +0,0 @@
-import type { ScreenSize } from './types';
-import { ScreenOrientation } from './types';
-import type { UnistylesBreakpoints } from './global';
-export declare const useUnistyles: () => {
-    theme: never;
-    orientation: ScreenOrientation;
-    breakpoint: keyof UnistylesBreakpoints;
-    screenSize: ScreenSize;
-};
-//# sourceMappingURL=useUnistyles.d.ts.map

package/lib/typescript/src/useUnistyles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useUnistyles.d.ts","sourceRoot":"","sources":["../../../src/useUnistyles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAIR,UAAU,EAEb,MAAM,SAAS,CAAA;AAChB,OAAO,EAA0B,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAEnE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAA;AAIpD,eAAO,MAAM,YAAY;;;;;CA6CxB,CAAA"}

package/lib/typescript/src/utils/mediaQueries.d.ts

@@ -1,11 +0,0 @@
-import type { UnistylesBreakpoints } from 'react-native-unistyles';
-import type { ScreenSize } from '../types';
-import type { MediaQueries } from '../types';
-export declare const extractValues: (pattern: string, breakpoints: UnistylesBreakpoints) => Array<number>;
-export declare const isWithinBreakpoint: (query: string, screenSize: ScreenSize, breakpoints: UnistylesBreakpoints) => boolean;
-export declare const isWithinTheWidth: (query: string, width: number, breakpoints: UnistylesBreakpoints) => boolean;
-export declare const isWithinTheHeight: (query: string, height: number, breakpoints: UnistylesBreakpoints) => boolean;
-export declare const isWithinTheWidthAndHeight: (query: string, screenSize: ScreenSize, breakpoints: UnistylesBreakpoints) => boolean;
-export declare const isMediaQuery: (query: string) => boolean;
-export declare const getKeyForCustomMediaQuery: (mediaQueries: Array<[keyof UnistylesBreakpoints | MediaQueries, string | number | undefined]>, screenSize: ScreenSize, breakpoints: UnistylesBreakpoints) => string | undefined;
-//# sourceMappingURL=mediaQueries.d.ts.map

package/lib/typescript/src/utils/mediaQueries.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"mediaQueries.d.ts","sourceRoot":"","sources":["../../../../src/utils/mediaQueries.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAClE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAC1C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAyD5C,eAAO,MAAM,aAAa,YAAa,MAAM,eAAe,oBAAoB,KAAG,MAAM,MAAM,CAyB9F,CAAA;AAED,eAAO,MAAM,kBAAkB,UAAW,MAAM,cAAc,UAAU,eAAe,oBAAoB,KAAG,OAiB7G,CAAA;AAED,eAAO,MAAM,gBAAgB,UAAW,MAAM,SAAS,MAAM,eAAe,oBAAoB,KAAG,OAQlG,CAAA;AAED,eAAO,MAAM,iBAAiB,UAAW,MAAM,UAAU,MAAM,eAAe,oBAAoB,KAAG,OAQpG,CAAA;AAED,eAAO,MAAM,yBAAyB,UAAW,MAAM,cAAc,UAAU,eAAe,oBAAoB,KAAG,OAQpH,CAAA;AAED,eAAO,MAAM,YAAY,UAAW,MAAM,KAAG,OAI5C,CAAA;AAED,eAAO,MAAM,yBAAyB,iBACpB,MAAM,CAAC,MAAM,oBAAoB,GAAG,YAAY,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC,cACjF,UAAU,eACT,oBAAoB,KAClC,MAAM,GAAG,SAMX,CAAA"}

package/src/UnistylesEngine.ts

@@ -1,24 +0,0 @@
-import type { UnistyleRegistry } from './UnistyleRegistry'
-import type { UnistylesRuntime } from './UnistylesRuntime'
-import { getKeyForCustomMediaQuery } from './utils'
-import type { UnistylesEngine, NestedKeys } from './types'
-
-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/hooks/useDimensions.ts

@@ -1,4 +0,0 @@
-import { useWindowDimensions } from 'react-native'
-import type { ScreenSize } from '../types'
-
-export const useDimensions = (): ScreenSize => useWindowDimensions()

package/src/hooks/useDimensions.web.ts

@@ -1,34 +0,0 @@
-import { useEffect, useLayoutEffect, useRef, useState } from 'react'
-import type { ScreenSize } from '../types'
-
-export const useDimensions = (): ScreenSize => {
-    const timerRef = useRef<ReturnType<typeof setTimeout>>()
-    const [screenSize, setScreenSize] = useState<ScreenSize>({} as ScreenSize)
-
-    useLayoutEffect(() => {
-        setScreenSize({
-            width: window.innerWidth,
-            height: window.innerHeight
-        })
-    }, [])
-
-    useEffect(() => {
-        const handleResize = () => {
-            clearTimeout(timerRef.current)
-
-            timerRef.current = setTimeout(() => setScreenSize({
-                width: window.innerWidth,
-                height: window.innerHeight
-            }), 100)
-        }
-
-        window.addEventListener('resize', handleResize)
-
-        return () => {
-            window.removeEventListener('resize', handleResize)
-            clearTimeout(timerRef.current)
-        }
-    }, [])
-
-    return screenSize
-}

package/src/types/mediaQueries.ts

@@ -1,15 +0,0 @@
-type Optional<TOptional extends string> = TOptional | ''
-type Separator = ',' | ', '
-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>}`
-    | `${HeightMediaQuery}${Optional<WidthMediaQuery>}`

package/src/useInitialTheme.ts

@@ -1,7 +0,0 @@
-import { useMemo } from 'react'
-import { unistyles } from './Unistyles'
-import type { UnistylesThemes } from './global'
-
-export const useInitialTheme = (forName: keyof UnistylesThemes) => {
-    useMemo(() => unistyles.runtime.setTheme(forName), [])
-}

package/src/useUnistyles.ts

@@ -1,61 +0,0 @@
-import { NativeEventEmitter, NativeModules } from 'react-native'
-import { useEffect, useState } from 'react'
-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<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
-    })
-
-    useEffect(() => {
-        const subscription = unistylesEvents.addListener(
-            'onChange',
-            (event: UnistylesEvents) => {
-                switch (event.type) {
-                    case CxxUnistylesEventTypes.Theme: {
-                        const themeEvent = event as UnistylesThemeEvent
-
-                        setTheme(unistyles.runtime.getTheme(themeEvent.payload.themeName))
-
-                        return
-                    }
-                    case CxxUnistylesEventTypes.Layout: {
-                        const layoutEvent = event as UnistylesMobileLayoutEvent
-
-                        setBreakpoint(layoutEvent.payload.breakpoint)
-                        setOrientation(layoutEvent.payload.orientation)
-                        setScreenSize(layoutEvent.payload.screen)
-
-                        return
-                    }
-                    default:
-                        return
-                }
-            }
-        )
-
-        return subscription.remove
-    }, [])
-
-    return {
-        theme,
-        orientation,
-        breakpoint,
-        screenSize
-    }
-}

package/src/utils/mediaQueries.ts

@@ -1,152 +0,0 @@
-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]
-
-    if (!value) {
-        return [Number(openBracket === '(')]
-    }
-
-    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]
-}
-
-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
-    ]
-}
-
-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 (hasWidthBreakpoint) {
-        return isWithinTheWidth(query, screenSize.width, breakpoints)
-    }
-
-    if (hasHeightBreakpoint) {
-        return isWithinTheHeight(query, screenSize.height, breakpoints)
-    }
-
-    return false
-}
-
-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
-    }
-
-    return !maxWidth && width >= minWidth
-}
-
-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
-    }
-
-    return !maxHeight && height >= minHeight
-}
-
-export const isWithinTheWidthAndHeight = (query: string, screenSize: ScreenSize, breakpoints: UnistylesBreakpoints): boolean => {
-    const result = query
-        .split(':')
-        .filter(Boolean)
-        .map(q => isWithinBreakpoint(`:${q}`, screenSize, breakpoints))
-        .filter(Boolean)
-
-    return result.length === 2
-}
-
-export const isMediaQuery = (query: string): boolean => {
-    const regex = /(:w|:h)/
-
-    return query.length > 0 && regex.test(query)
-}
-
-export const getKeyForCustomMediaQuery = (
-    mediaQueries: Array<[keyof UnistylesBreakpoints | MediaQueries, string | number | undefined]>,
-    screenSize: ScreenSize,
-    breakpoints: UnistylesBreakpoints
-): string | undefined => {
-    const [matchedQuery] = mediaQueries
-        .flatMap(([key]) => isWithinBreakpoint(key, screenSize, breakpoints) ? key : undefined)
-        .filter(Boolean)
-
-    return matchedQuery
-}