react-native-unistyles 2.0.0-alpha.1 → 2.0.0-alpha.10

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "react-native-unistyles",
-  "version": "2.0.0-alpha.1",
+  "version": "2.0.0-alpha.10",
   "description": "Level up your React Native StyleSheet",
   "scripts": {
     "test": "jest",
+    "test:coverage": "jest --coverage",
     "tsc": "node_modules/typescript/bin/tsc --noEmit",
     "lint": "eslint . --ext .ts,.tsx",
     "prepare": "husky install && bob build",
@@ -18,7 +19,19 @@
   "files": [
     "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",
     "!**/.*"
   ],
   "keywords": [
@@ -37,24 +50,24 @@
     "registry": "https://registry.npmjs.org/"
   },
   "devDependencies": {
-    "@commitlint/config-conventional": "17.8.0",
+    "@commitlint/config-conventional": "18.1.0",
     "@react-native/eslint-config": "0.74.0",
+    "@react-native/normalize-colors": "0.74.1",
     "@release-it/conventional-changelog": "7.0.2",
     "@testing-library/react-hooks": "8.0.1",
-    "@types/jest": "29.5.6",
-    "@types/react": "18.2.28",
-    "@types/react-native": "0.72.3",
-    "@typescript-eslint/eslint-plugin": "6.8.0",
-    "@typescript-eslint/eslint-plugin-tslint": "6.8.0",
-    "@typescript-eslint/parser": "6.8.0",
-    "commitlint": "17.8.0",
-    "concurrently": "8.2.1",
-    "eslint": "8.51.0",
+    "@types/jest": "29.5.7",
+    "@types/react": "18.2.34",
+    "@typescript-eslint/eslint-plugin": "6.9.1",
+    "@typescript-eslint/eslint-plugin-tslint": "6.9.1",
+    "@typescript-eslint/parser": "6.9.1",
+    "commitlint": "18.2.0",
+    "concurrently": "8.2.2",
+    "eslint": "8.53.0",
     "eslint-config-codemask": "1.1.7",
     "eslint-plugin-functional": "6.0.0",
-    "eslint-plugin-import": "2.28.1",
+    "eslint-plugin-import": "2.29.0",
     "eslint-plugin-jsdoc": "46.8.2",
-    "eslint-plugin-jsx-a11y": "6.7.1",
+    "eslint-plugin-jsx-a11y": "6.8.0",
     "eslint-plugin-nested-if": "1.0.0",
     "eslint-plugin-no-else": "0.2.2",
     "eslint-plugin-no-loops": "0.3.0",
@@ -72,6 +85,7 @@
     "typescript": "5.2.2"
   },
   "peerDependencies": {
+    "@react-native/normalize-colors": "*",
     "react": "*",
     "react-native": "*",
     "react-native-web": "*"
@@ -82,7 +96,7 @@
     }
   },
   "workspaces": [
-    "example",
+    "examples/expo",
     "docs"
   ],
   "packageManager": "yarn@3.6.1",
@@ -92,9 +106,13 @@
   "jest": {
     "preset": "react-native",
     "modulePathIgnorePatterns": [
-      "<rootDir>/example/node_modules",
+      "<rootDir>/examples/expo/node_modules",
+      "<rootDir>/examples/ssr/node_modules",
       "<rootDir>/docs/node_modules",
       "<rootDir>/lib/"
+    ],
+    "coverageReporters": [
+      "html"
     ]
   },
   "commitlint": {

package/react-native-unistyles.podspec

@@ -0,0 +1,22 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+
+Pod::Spec.new do |s|
+  s.name         = package["name"]
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.homepage     = package["homepage"]
+  s.license      = package["license"]
+  s.authors      = package["author"]
+
+  s.platforms    = { :ios => min_ios_version_supported }
+  s.source       = { :git => package["repository"], :tag => "#{s.version}" }
+
+  s.source_files = [
+    "ios/*.{h,mm}",
+    "cxx/*.{h,cpp}"
+  ]
+
+  s.dependency "React-Core"
+end

package/src/common.ts

@@ -0,0 +1,19 @@
+export enum CxxUnistylesEventTypes {
+    Theme = 'theme',
+    Layout = 'layout'
+}
+
+export enum UnistylesError {
+    RuntimeUnavailable = 'UNISTYLES_ERROR_RUNTIME_UNAVAILABLE',
+    ThemeNotFound = 'UNISTYLES_ERROR_THEME_NOT_FOUND',
+    ThemeNotRegistered = 'UNISTYLES_ERROR_THEME_NOT_REGISTERED',
+    ThemesCannotBeEmpty = 'UNISTYLES_ERROR_THEMES_CANNOT_BE_EMPTY',
+    BreakpointsCannotBeEmpty = 'UNISTYLES_ERROR_BREAKPOINTS_CANNOT_BE_EMPTY',
+    BreakpointsMustStartFromZero = 'UNISTYLES_ERROR_BREAKPOINTS_MUST_START_FROM_ZERO',
+}
+
+// todo to string?
+export enum ScreenOrientation {
+    Portrait = 1,
+    Landscape = 2
+}

package/src/core/UnistyleRegistry.ts

@@ -0,0 +1,41 @@
+import type { UnistylesBridge, UnistylesConfig } from '../types'
+import type { UnistylesBreakpoints, UnistylesThemes } from '../global'
+
+export class UnistyleRegistry {
+    public config: UnistylesConfig = {}
+    public themeNames: Array<keyof UnistylesThemes> = []
+    public themes: UnistylesThemes = {} as UnistylesThemes
+    public breakpoints: UnistylesBreakpoints = {} as UnistylesBreakpoints
+    public sortedBreakpointPairs: Array<[keyof UnistylesBreakpoints, UnistylesBreakpoints[keyof UnistylesBreakpoints]]> = []
+
+    constructor(private unistylesBridge: UnistylesBridge) {}
+
+    public addThemes = (themes: UnistylesThemes) => {
+        this.themes = themes
+
+        const keys = Object.keys(themes) as Array<keyof UnistylesThemes>
+
+        this.unistylesBridge.themes = keys
+        this.themeNames = keys
+
+        return this
+    }
+
+    public addBreakpoints = (breakpoints: UnistylesBreakpoints) => {
+        this.breakpoints = breakpoints
+        this.unistylesBridge.useBreakpoints(breakpoints)
+        this.sortedBreakpointPairs = this.unistylesBridge.sortedBreakpointPairs
+
+        return this
+    }
+
+    public addConfig = (config: UnistylesConfig) => {
+        this.config = config
+
+        if (config.adaptiveThemes) {
+            this.unistylesBridge.useAdaptiveThemes(config.adaptiveThemes)
+        }
+
+        return this
+    }
+}

package/src/core/Unistyles.ts

@@ -0,0 +1,34 @@
+import { UnistylesModule } from './UnistylesModule'
+import { UnistylesRuntime } from './UnistylesRuntime'
+import { UnistyleRegistry } from './UnistyleRegistry'
+import type { UnistylesBridge } from '../types'
+import { UnistylesError } from '../common'
+
+class Unistyles {
+    private _runtime: UnistylesRuntime
+    private _registry: UnistyleRegistry
+    private _bridge: UnistylesBridge
+
+    constructor() {
+        const isInstalled = UnistylesModule?.install() ?? false
+
+        if (!isInstalled) {
+            throw new Error(UnistylesError.RuntimeUnavailable)
+        }
+
+        // @ts-ignore
+        this._bridge = global.__UNISTYLES__ as UnistylesBridge
+        this._registry = new UnistyleRegistry(this._bridge)
+        this._runtime = new UnistylesRuntime(this._bridge, this._registry)
+    }
+
+    public get registry() {
+        return this._registry
+    }
+
+    public get runtime() {
+        return this._runtime
+    }
+}
+
+export const unistyles = new Unistyles()

package/src/core/UnistylesModule.ts

@@ -0,0 +1,7 @@
+import { NativeModules } from 'react-native'
+
+type UnistylesNativeModule = {
+    install(): boolean
+}
+
+export const UnistylesModule = NativeModules?.Unistyles as UnistylesNativeModule

package/src/core/UnistylesRuntime.ts

@@ -0,0 +1,73 @@
+import { ScreenOrientation, UnistylesError } from '../common'
+import type { UnistylesBridge } from '../types'
+import type { UnistylesThemes } from '../global'
+import type { UnistyleRegistry } from './UnistyleRegistry'
+
+export class UnistylesRuntime {
+    constructor(private unistylesBridge: UnistylesBridge, private registry: UnistyleRegistry) {}
+
+    public get colorScheme() {
+        return this.unistylesBridge.colorScheme
+    }
+
+    public get hasAdaptiveThemes() {
+        return this.unistylesBridge.hasAdaptiveThemes
+    }
+
+    public get sortedBreakpoints() {
+        return this.registry.sortedBreakpointPairs
+    }
+
+    public get themeName() {
+        return this.unistylesBridge.themeName
+    }
+
+    public get breakpoint() {
+        return this.unistylesBridge.breakpoint
+    }
+
+    public get screen() {
+        return {
+            width: this.unistylesBridge.screenWidth,
+            height: this.unistylesBridge.screenHeight
+        }
+    }
+
+    public get orientation() {
+        const { width, height } = this.screen
+
+        if (width > height) {
+            return ScreenOrientation.Landscape
+        }
+
+        return ScreenOrientation.Portrait
+    }
+
+    public setTheme = (name: keyof UnistylesThemes) => {
+        if (this.hasTheme(name)) {
+            this.unistylesBridge.useTheme(name)
+
+            return true
+        }
+
+        throw new Error(UnistylesError.ThemeNotRegistered)
+    }
+
+    public getTheme = (forName: keyof UnistylesThemes) => {
+        if (this.registry.themeNames.length === 0) {
+            return {} as UnistylesThemes[keyof UnistylesThemes]
+        }
+
+        if (!this.hasTheme(forName)) {
+            throw new Error(UnistylesError.ThemeNotFound)
+        }
+
+        return this.registry.themes[forName]
+    }
+
+    public setAdaptiveThemes = (enable: boolean) => {
+        this.unistylesBridge.useAdaptiveThemes(enable)
+    }
+
+    private hasTheme = (name: keyof UnistylesThemes) => name in this.registry.themes
+}

package/src/core/index.ts

@@ -0,0 +1 @@
+export { unistyles } from './Unistyles'

package/src/createStyleSheet.ts

@@ -0,0 +1,9 @@
+import type { CustomNamedStyles, UnistylesTheme } from './types'
+
+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
+    }
+
+    return styles as S
+}

package/src/global.ts

@@ -0,0 +1,5 @@
+export interface UnistylesThemes {}
+export interface UnistylesBreakpoints {
+    landscape?: number,
+    portrait?: number,
+}

package/src/hooks/index.ts

@@ -1 +1,2 @@
-export { useDimensions } from './useDimensions'
+export { useInitialTheme } from './useInitialTheme'
+export { useUnistyles } from './useUnistyles'

package/src/hooks/useInitialTheme.ts

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

package/src/hooks/useUnistyles.ts

@@ -0,0 +1,55 @@
+import { NativeEventEmitter, NativeModules } from 'react-native'
+import { useEffect, useState } from 'react'
+import { unistyles } from '../core'
+import { CxxUnistylesEventTypes } from '../common'
+import type { UnistylesEvents, UnistylesMobileLayoutEvent, UnistylesThemeEvent } from '../types'
+
+const unistylesEvents = new NativeEventEmitter(NativeModules.Unistyles)
+
+export const useUnistyles = () => {
+    const [theme, setTheme] = useState(unistyles.runtime.getTheme(unistyles.runtime.themeName))
+    const [layout, setLayout] = useState({
+        breakpoint: unistyles.runtime.breakpoint,
+        orientation: unistyles.runtime.orientation,
+        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
+
+                        return setTheme(unistyles.runtime.getTheme(themeEvent.payload.themeName))
+                    }
+                    case CxxUnistylesEventTypes.Layout: {
+                        const layoutEvent = event as UnistylesMobileLayoutEvent
+
+                        return setLayout({
+                            breakpoint: layoutEvent.payload.breakpoint,
+                            orientation: layoutEvent.payload.orientation,
+                            screenSize: {
+                                width: layoutEvent.payload.screen.width,
+                                height: layoutEvent.payload.screen.height
+                            }
+                        })
+                    }
+                    default:
+                        return
+                }
+            }
+        )
+
+        return subscription.remove
+    }, [])
+
+    return {
+        theme,
+        layout
+    }
+}

package/src/index.ts

@@ -1,2 +1,30 @@
-export { UnistylesTheme } from './UnistylesTheme'
-export { createUnistyles } from './createUnistyles'
+import { unistyles } from './core'
+import { mq } from './utils'
+import { useInitialTheme } from './hooks'
+import type { UnistylesThemes, UnistylesBreakpoints } from './global'
+import { ScreenOrientation } from './common'
+import { useStyles } from './useStyles'
+import { createStyleSheet } from './createStyleSheet'
+
+const UnistylesRegistry = {
+    addThemes: unistyles.registry.addThemes,
+    addBreakpoints: unistyles.registry.addBreakpoints,
+    addConfig: unistyles.registry.addConfig
+}
+
+const UnistylesRuntime = unistyles.runtime
+
+export {
+    mq,
+    useStyles,
+    useInitialTheme,
+    createStyleSheet,
+    ScreenOrientation,
+    UnistylesRegistry,
+    UnistylesRuntime
+}
+
+export type {
+    UnistylesThemes,
+    UnistylesBreakpoints
+}

package/src/types/breakpoints.ts

@@ -1,33 +1,33 @@
-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
+import type { OpaqueColorValue } from 'react-native'
+import type { UnistylesBreakpoints } from '../global'
+import type { MediaQuery } from './mq'
+import type { VariantValue } from './core'
 
 type WithEmptyObject<V> = keyof V extends never ? {} : V
 
-export type ExtractBreakpoints<T, B extends Breakpoints> = T extends Partial<Record<keyof B & string, infer V>>
+type ExtractBreakpoints<T> = T extends Partial<Record<keyof UnistylesBreakpoints & string, infer V>>
     ? WithEmptyObject<V>
     : T extends (...args: infer A) => infer R
-        ? (...args: A) => ExtractBreakpoints<R, B>
+        ? (...args: A) => ExtractBreakpoints<R>
         : {
             [K in keyof T]: T[K] extends (...args: infer A) => infer R
-                ? (...args: A) => ExtractBreakpoints<R, B>
+                ? (...args: A) => ExtractBreakpoints<R>
                 : T[K] extends object
-                    ? ExtractBreakpoints<T[K], B>
+                    ? ExtractBreakpoints<T[K]>
                     : T[K]
         }
 
-export type RemoveKeysWithPrefix<T, B extends Breakpoints> = T extends (...args: Array<any>) => infer R
-    ? (...args: Parameters<T>) => RemoveKeysWithPrefix<R, B>
+type FlattenObjectTypes<T> = T[keyof T]
+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 B & string : K]: RemoveKeysWithPrefix<T[K], B> }
-            : { [K in keyof T]: RemoveKeysWithPrefix<T[K], B> }
+        ? T extends OpaqueColorValue
+            ? string
+            : T extends Record<string, infer _V>
+                ? T extends { variants: VariantValue }
+                    ? RemoveKeysWithPrefix<FlattenObjectTypes<T['variants']>>
+                    : { [K in keyof T as K extends MediaQuery ? keyof UnistylesBreakpoints & string : K]: RemoveKeysWithPrefix<T[K]> }
+                : { [K in keyof T]: RemoveKeysWithPrefix<T[K]> }
         : T
+
+export type ReactNativeStyleSheet<T> = ExtractBreakpoints<RemoveKeysWithPrefix<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,14 +14,19 @@ 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'
+import type { MediaQuery } from './mq'
 
 type ShadowOffset = {
     width: number,
     height: number
 }
 
+export type ScreenSize = {
+    width: number,
+    height: number
+}
+
 type TransformStyles =
     & PerpectiveTransform
     & RotateTransform
@@ -37,37 +42,50 @@ 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 MediaQuery]: V
+} | {
+    [innerKey in 'variants']?: {
+        [variant: string]: 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 extends Breakpoints> =
-    | 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
+        ? (...args: A) => StaticStyles
+        : StaticStyles
+}
 
-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 RNValue = number | string | undefined
+export type VariantValue = Record<string, RNValue>
+export type NestedStyle = Record<keyof UnistylesBreakpoints | MediaQuery | 'variants', RNValue> & {
+    variants: VariantValue
 }
+export type NestedStylePairs = Array<[keyof UnistylesBreakpoints | MediaQuery | 'variants', RNValue | VariantValue]>
+export type UnistylesTheme = UnistylesThemes[keyof UnistylesThemes]
+export type CreateStylesFactory<ST, Theme> = (theme: Theme) => ST

package/src/types/index.ts

@@ -1,9 +1,6 @@
-export type { CustomNamedStyles } from './core'
-export type {
-    ScreenSize,
-    Breakpoints,
-    CreateStylesFactory,
-    ExtractBreakpoints,
-    RemoveKeysWithPrefix,
-    SortedBreakpointEntries
-} from './breakpoints'
+export * from './normalizer'
+export * from './unistyles'
+export type { Optional, Nullable } from './common'
+export type { MediaQuery } from './mq'
+export type { CustomNamedStyles, NestedStylePairs, UnistylesTheme, CreateStylesFactory, ScreenSize, NestedStyle, RNValue } from './core'
+export type { ReactNativeStyleSheet } from './breakpoints'

package/src/types/mq.ts

@@ -0,0 +1,3 @@
+import { MQSymbol } from '../utils'
+
+export type MediaQuery = typeof MQSymbol

package/src/types/normalizer.ts

@@ -0,0 +1,29 @@
+import type { ShadowStyleIOS, TextStyle, TransformsStyle } from 'react-native'
+
+type TransformArrayElement<T> = T extends Array<infer U> ? U : never
+type BoxShadow = Required<ShadowStyleIOS>
+type TextShadow = Required<Pick<TextStyle, 'textShadowColor' | 'textShadowOffset' | 'textShadowRadius'>>
+type Transforms = Array<TransformArrayElement<TransformsStyle['transform']>>
+
+type NormalizedBoxShadow = {
+    shadowColor: undefined,
+    shadowOffset: undefined,
+    shadowOpacity: undefined,
+    shadowRadius: undefined,
+    boxShadow?: string
+}
+
+type NormalizedTextShadow = {
+    textShadowColor: undefined
+    textShadowOffset: undefined
+    textShadowRadius: undefined,
+    textShadow?: string
+}
+
+export type {
+    BoxShadow,
+    TextShadow,
+    Transforms,
+    NormalizedBoxShadow,
+    NormalizedTextShadow
+}