react-native-unistyles 1.3.0 → 1.4.0

package/src/__tests__/createUnistyles.spec.tsx

@@ -0,0 +1,192 @@
+import React from 'react'
+import { StyleSheet } from 'react-native'
+import type { ViewStyle } from 'react-native'
+import { renderHook } from '@testing-library/react-hooks'
+import { createUnistyles } from '../createUnistyles'
+import { UnistylesTheme } from '../UnistylesTheme'
+import type { CustomNamedStyles } from '../types'
+
+jest.mock('../hooks', () => ({
+    useDimensions: jest.fn(() => ({
+        width: 500,
+        height: 1000
+    }))
+}))
+
+describe('createUnistyles', () => {
+    describe('createStyleSheet', () => {
+        it('should work exactly the same like StyleSheet.create', () => {
+            const breakpoints = {
+                xs: 0
+            }
+            const { createStyleSheet } = createUnistyles(breakpoints)
+
+            const styles = {
+                container: {
+                    flex: 1,
+                    justifyContent: 'center',
+                    alignItems: 'center'
+                },
+                text: {
+                    fontWeight: 'bold',
+                    fontSize: 32
+                }
+            } as const
+
+            expect(createStyleSheet(styles)).toEqual(StyleSheet.create(styles))
+        })
+
+        it('should inject the theme to the createStyleSheet', () => {
+            const theme = {
+                colors: {
+                    barbie: '#ff9ff3',
+                    oak: '#1dd1a1',
+                    sky: '#48dbfb',
+                    fog: '#c8d6e5',
+                    aloes: '#00d2d3'
+                }
+            }
+            const breakpoints = {
+                xs: 0
+            }
+            const { useStyles, createStyleSheet } = createUnistyles<typeof breakpoints, typeof theme>(breakpoints)
+            const stylesheet = createStyleSheet(theme => ({
+                container: {
+                    backgroundColor: theme.colors.barbie
+                }
+            }))
+            const { result } = renderHook(() => useStyles(stylesheet), {
+                // @ts-ignore
+                wrapper: ({ children }) => (
+                    <UnistylesTheme theme={theme}>
+                        {children}
+                    </UnistylesTheme>
+                )
+            })
+
+            expect(result.current.theme).toEqual(theme)
+            expect(result.current.styles).not.toBe(Function)
+            expect(result.current.styles.container.backgroundColor).toEqual(theme.colors.barbie)
+        })
+    })
+
+    describe('useStyles', () => {
+        it('should return empty object for optional stylesheet', () => {
+            const breakpoints = {
+                xs: 0
+            }
+            const { useStyles } = createUnistyles(breakpoints)
+            const { result } = renderHook(() => useStyles())
+
+            expect(result.current.styles).toEqual({})
+            expect(result.current.theme).toEqual({})
+        })
+
+        it ('should choose single value from breakpoints', () => {
+            const breakpoints = {
+                xs: 0,
+                sm: 200,
+                md: 500,
+                lg: 1000
+            }
+
+            const { useStyles, createStyleSheet } = createUnistyles(breakpoints)
+            const stylesheet = createStyleSheet({
+                container: {
+                    flex: 1,
+                    justifyContent: 'center',
+                    alignItems: {
+                        xs: 'row',
+                        md: 'column'
+                    }
+                }
+            })
+            const { result } = renderHook(() => useStyles(stylesheet))
+
+            expect(result.current.styles.container.alignItems).toEqual('column')
+        })
+
+        it ('should choose single value from media queries', () => {
+            const breakpoints = {
+                xs: 0
+            }
+
+            const { useStyles, createStyleSheet } = createUnistyles(breakpoints)
+            const stylesheet = createStyleSheet({
+                container: {
+                    flex: 1,
+                    justifyContent: 'center',
+                    alignItems: {
+                        xs: 'row',
+                        ':w[300, 490]': 'column',
+                        ':w[491]': 'row'
+                    }
+                }
+            })
+            const { result } = renderHook(() => useStyles(stylesheet as CustomNamedStyles<typeof stylesheet, typeof breakpoints>))
+
+            expect(result.current.styles.container.alignItems).toEqual('row')
+        })
+
+        it ('should choose wrap dynamic functions in Proxy', () => {
+            const breakpoints = {
+                xs: 0
+            }
+
+            const { useStyles, createStyleSheet } = createUnistyles<typeof breakpoints, {}>(breakpoints)
+            const stylesheet = createStyleSheet({
+                container: (flex: number) => ({
+                    flex,
+                    justifyContent: 'center',
+                    alignItems: {
+                        xs: 'row',
+                        ':w[300, 490]': 'column',
+                        ':w[491]': 'row'
+                    }
+                })
+            })
+            const { result } = renderHook(() => useStyles(stylesheet as CustomNamedStyles<typeof stylesheet, typeof breakpoints>))
+
+            expect(result.current.styles.container).toBeInstanceOf(Function)
+            expect((result.current.styles.container as (flex: number) => ViewStyle)(2)).toEqual({
+                flex: 2,
+                justifyContent: 'center',
+                alignItems: 'row'
+            })
+        })
+
+        it ('should return breakpoint even if no stylesheet has been provided', () => {
+            const breakpoints = {
+                xs: 0,
+                sm: 200,
+                md: 500,
+                lg: 1000
+            }
+
+            const { useStyles } = createUnistyles<typeof breakpoints, {}>(breakpoints)
+            const { result } = renderHook(() => useStyles())
+
+            expect(result.current.breakpoint).toEqual('md')
+        })
+
+        it ('should return breakpoint for stylesheet', () => {
+            const breakpoints = {
+                xs: 0,
+                sm: 200,
+                lg: 1000
+            }
+
+            const { useStyles, createStyleSheet } = createUnistyles<typeof breakpoints, {}>(breakpoints)
+            const stylesheet = createStyleSheet({
+                container: {
+                    flex: 1,
+                    justifyContent: 'center',
+                    alignItems: 'center'
+                }
+            })
+            const { result } = renderHook(() => useStyles(stylesheet as CustomNamedStyles<typeof stylesheet, typeof breakpoints>))
+
+            expect(result.current.breakpoint).toEqual('sm')
+        })
+    })
+})

package/src/createUnistyles.ts

@@ -0,0 +1,70 @@
+import { useContext, useMemo } from 'react'
+import { StyleSheet } from 'react-native'
+import type {
+    Breakpoints,
+    CreateStylesFactory,
+    CustomNamedStyles,
+    ExtractBreakpoints,
+    RemoveKeysWithPrefix,
+    SortedBreakpointEntries
+} from './types'
+import { UnistylesContext } from './UnistylesTheme'
+import { useDimensions } from './hooks'
+import { getBreakpointFromScreenWidth, proxifyFunction, parseStyle, sortAndValidateBreakpoints } from './utils'
+
+export const createUnistyles = <B extends Breakpoints, T = {}>(breakpoints: B) => {
+    const sortedBreakpoints = sortAndValidateBreakpoints(breakpoints)
+    const sortedBreakpointEntries = Object
+        .entries(sortedBreakpoints) as SortedBreakpointEntries<B>
+
+    return {
+        createStyleSheet: <S extends CustomNamedStyles<S, B>, X>(styles: S | CustomNamedStyles<S, B> | X | ((theme: T) => X | CustomNamedStyles<X, B>)): S | X => {
+            if (typeof styles === 'function') {
+                return styles as X
+            }
+
+            return styles as S
+        },
+        useStyles: <ST extends CustomNamedStyles<ST, B>>(stylesheet?: ST | CreateStylesFactory<ST, T>) => {
+            const theme = useContext(UnistylesContext) as T
+            const screenSize = useDimensions()
+            const breakpoint = getBreakpointFromScreenWidth<B>(screenSize.width, sortedBreakpointEntries)
+
+            if (!stylesheet) {
+                return {
+                    theme,
+                    breakpoint,
+                    styles: {} as ExtractBreakpoints<RemoveKeysWithPrefix<ST, B>, B>
+                }
+            }
+
+            const parsedStyles = useMemo(() => typeof stylesheet === 'function'
+                ? stylesheet(theme)
+                : stylesheet, [theme, stylesheet])
+
+            const dynamicStyleSheet = useMemo(() => Object
+                .entries(parsedStyles)
+                .reduce((acc, [key, value]) => {
+                    const style = value as CustomNamedStyles<ST, B>
+
+                    if (typeof value === 'function') {
+                        return {
+                            ...acc,
+                            [key]: proxifyFunction<B>(value, breakpoint, screenSize, sortedBreakpointEntries)
+                        }
+                    }
+
+                    return StyleSheet.create({
+                        ...acc,
+                        [key]: parseStyle<ST, B>(style, breakpoint, screenSize, sortedBreakpointEntries)
+                    })
+                }, {} as ST), [breakpoint, screenSize, parsedStyles])
+
+            return {
+                theme,
+                breakpoint,
+                styles: dynamicStyleSheet as ExtractBreakpoints<RemoveKeysWithPrefix<ST, B>, B>
+            }
+        }
+    }
+}

package/src/hooks/index.ts

@@ -1,4 +1 @@
-export { useInitialTheme } from './useInitialTheme'
-export { useUnistyles } from './useUnistyles'
-export { useVariants } from './useVariants'
-export { useCSS } from './useCSS'
+export { useDimensions } from './useDimensions'

package/src/hooks/useDimensions.ts

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

package/src/hooks/useDimensions.web.ts

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

@@ -1,50 +1,2 @@
-import { unistyles } from './core'
-import { mq } from './utils'
-import { useInitialTheme } from './hooks'
-import type { UnistylesPlugin } from './types'
-import type { UnistylesThemes, UnistylesBreakpoints } from './global'
-import { ScreenOrientation, AndroidContentSizeCategory, IOSContentSizeCategory } from './common'
-import { useStyles } from './useStyles'
-import { createStyleSheet } from './createStyleSheet'
-
-/**
- * Utility to interact with the Unistyles
- * (should be called only once)
- */
-const UnistylesRegistry = {
-    /**
-     * Register themes to be used in the app
-     * @param themes - Key value pair of themes
-     */
-    addThemes: unistyles.registry.addThemes,
-    /**
-     * Register breakpoints to be used in the app
-     * @param breakpoints - Key value pair of breakpoints
-     */
-    addBreakpoints: unistyles.registry.addBreakpoints,
-    /**
-     * Register additional config to customize the Unistyles
-     * @param config - Key value pair of config
-     */
-    addConfig: unistyles.registry.addConfig
-}
-
-const UnistylesRuntime = unistyles.runtime
-
-export {
-    mq,
-    useStyles,
-    useInitialTheme,
-    createStyleSheet,
-    ScreenOrientation,
-    AndroidContentSizeCategory,
-    IOSContentSizeCategory,
-    UnistylesRegistry,
-    UnistylesRuntime
-}
-
-export type {
-    UnistylesThemes,
-    UnistylesBreakpoints,
-    UnistylesPlugin
-}
+export { UnistylesTheme } from './UnistylesTheme'
+export { createUnistyles } from './createUnistyles'

package/src/types/breakpoints.ts

@@ -1,61 +1,36 @@
-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
-
-type ParseNestedObject<T> = T extends (...args: infer A) => infer R
-    ? (...args: A) => ParseNestedObject<R>
-    : T extends object
-        ? 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]>
+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]
-            }
-        : 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]>>
+export type RemoveKeysWithPrefix<T, B extends Breakpoints> = T extends (...args: Array<any>) => infer R
+    ? (...args: Parameters<T>) => RemoveKeysWithPrefix<R, B>
+    : 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
-    : 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/core.ts

@@ -14,14 +14,15 @@ import type {
     TranslateYTransform
 } from 'react-native/Libraries/StyleSheet/StyleSheetTypes'
 import type { ImageStyle, TextStyle, ViewStyle } from 'react-native'
-import type { UnistylesBreakpoints, UnistylesThemes } from '../global'
+import type { Breakpoints } from './breakpoints'
+import type { MediaQueries } from './mediaQueries'
 
-export type ShadowOffset = {
+type ShadowOffset = {
     width: number,
     height: number
 }
 
-export type TransformStyles =
+type TransformStyles =
     & PerpectiveTransform
     & RotateTransform
     & RotateXTransform
@@ -36,13 +37,37 @@ export type TransformStyles =
     & SkewYTransform
     & MatrixTransform
 
-export type ScreenSize = {
-    width: number,
-    height: number
+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 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]
+// 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>
+}

package/src/types/index.ts

@@ -1,15 +1,10 @@
 export * from './normalizer'
-export * from './unistyles'
-export type { Optional, Nullable } from './common'
+export type { CustomNamedStyles } from './core'
 export type {
-    NestedStylePairs,
-    UnistylesTheme,
     ScreenSize,
-    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'
+    Breakpoints,
+    CreateStylesFactory,
+    ExtractBreakpoints,
+    RemoveKeysWithPrefix,
+    SortedBreakpointEntries
+} from './breakpoints'

package/src/types/mediaQueries.ts

@@ -0,0 +1,10 @@
+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}`
+
+export type MediaQueries =
+    | `${WidthMediaQuery}${Optional<HeightMediaQuery>}`
+    | `${HeightMediaQuery}${Optional<WidthMediaQuery>}`