react-native-unistyles 2.0.0-beta.7 → 2.0.0-rc.1
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +22 -35
- package/lib/commonjs/core/UnistylesRuntime.js +64 -0
- package/lib/commonjs/core/UnistylesRuntime.js.map +1 -1
- package/lib/commonjs/createStyleSheet.js +5 -0
- package/lib/commonjs/createStyleSheet.js.map +1 -1
- package/lib/commonjs/index.js +16 -0
- package/lib/commonjs/index.js.map +1 -1
- package/lib/commonjs/useStyles.js +6 -0
- package/lib/commonjs/useStyles.js.map +1 -1
- package/lib/commonjs/utils/mq.js +5 -0
- package/lib/commonjs/utils/mq.js.map +1 -1
- package/lib/module/core/UnistylesRuntime.js +64 -0
- package/lib/module/core/UnistylesRuntime.js.map +1 -1
- package/lib/module/createStyleSheet.js +5 -0
- package/lib/module/createStyleSheet.js.map +1 -1
- package/lib/module/index.js +17 -0
- package/lib/module/index.js.map +1 -1
- package/lib/module/useStyles.js +6 -0
- package/lib/module/useStyles.js.map +1 -1
- package/lib/module/utils/mq.js +5 -0
- package/lib/module/utils/mq.js.map +1 -1
- package/lib/typescript/src/core/UnistylesRuntime.d.ts +52 -0
- package/lib/typescript/src/core/UnistylesRuntime.d.ts.map +1 -1
- package/lib/typescript/src/createStyleSheet.d.ts +5 -0
- package/lib/typescript/src/createStyleSheet.d.ts.map +1 -1
- package/lib/typescript/src/index.d.ts +16 -0
- package/lib/typescript/src/index.d.ts.map +1 -1
- package/lib/typescript/src/useStyles.d.ts +6 -0
- package/lib/typescript/src/useStyles.d.ts.map +1 -1
- package/lib/typescript/src/utils/mq.d.ts +4 -0
- package/lib/typescript/src/utils/mq.d.ts.map +1 -1
- package/package.json +11 -11
- package/src/core/UnistylesRuntime.ts +52 -0
- package/src/createStyleSheet.ts +5 -0
- package/src/index.ts +16 -0
- package/src/useStyles.ts +6 -0
- package/src/utils/mq.ts +4 -0
package/README.md
CHANGED
@@ -1,55 +1,42 @@
|
|
1
|
-
[<img alt="react-native-unistyles" src="assets/banner.png">](https://
|
2
|
-
|
3
|
-
|
4
|
-
<picture>
|
5
|
-
<source media="(prefers-color-scheme: dark)" srcset="assets/uni-dark.svg">
|
6
|
-
<img alt="react-native-unistyles" src="assets/uni-light.svg">
|
7
|
-
</picture>
|
1
|
+
[<img alt="react-native-unistyles" src="assets/banner.png">](https://reactnativeunistyles.vercel.app/)
|
8
2
|
|
9
3
|
![GitHub package.json version](https://img.shields.io/github/package-json/v/jpudysz/react-native-unistyles?style=for-the-badge)
|
10
4
|
[![npm downloads](https://img.shields.io/npm/dm/react-native-unistyles.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-unistyles)
|
11
5
|
![Platform - Android and iOS](https://img.shields.io/badge/platform-Android%20%7C%20IOS%20%7C%20SSR%20%7C%20Web-blue.svg?style=for-the-badge)
|
12
6
|
[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg?style=for-the-badge)](https://opensource.org/licenses/MIT)
|
13
7
|
|
8
|
+
## [Documentation](https://reactnativeunistyles.vercel.app/)
|
9
|
+
- [Start here](https://reactnativeunistyles.vercel.app/start/introduction/)
|
10
|
+
- [API](https://reactnativeunistyles.vercel.app/reference/create-stylesheet/)
|
11
|
+
- [Show case](https://reactnativeunistyles.vercel.app/show-case/projects/)
|
12
|
+
- [Examples](https://reactnativeunistyles.vercel.app/examples/all/)
|
13
|
+
|
14
14
|
## Features
|
15
|
-
-
|
15
|
+
- 🚀 Shared core with C++ and JSI bindings
|
16
|
+
- 🌉 Supports new architecture
|
17
|
+
- 🔥 Crazy performance, adds under 0.1 ms to your StyleSheet
|
16
18
|
- 🎳 Share up to 100% of your styles across platforms in monorepo
|
17
|
-
- 🎯 Doesn't introduce new components
|
18
|
-
-
|
19
|
-
-
|
20
|
-
-
|
21
|
-
- 🥳 Compatible with Expo,
|
19
|
+
- 🎯 Doesn't introduce new components, everything is packed in one hook
|
20
|
+
- ⚛️ No React Context
|
21
|
+
- 🖥️ Supports custom breakpoints, css-like media queries and variants
|
22
|
+
- 🎨 Register multiple themes and change them with single function call
|
23
|
+
- 🥳 Compatible with Expo, Bare React Native, React Native Web and SSR
|
22
24
|
- 🛡️ ~99% Test coverage
|
25
|
+
- 🔌 Extend stylesheets with your own plugins
|
23
26
|
- ⚔️ No 3rd party dependencies
|
24
|
-
|
25
|
-
*-based on this [benchmark](https://github.com/efstathiosntonas/react-native-style-libraries-benchmark)
|
27
|
+
- and much much more!
|
26
28
|
|
27
29
|
## Installation
|
28
30
|
|
29
|
-
```
|
30
|
-
|
31
|
-
```
|
32
|
-
|
33
|
-
## [Documentation](https://reactnativeunistyles.vercel.app/)
|
34
|
-
- [Start here](https://reactnativeunistyles.vercel.app/start/setup/)
|
35
|
-
- [References](https://reactnativeunistyles.vercel.app/reference/create-stylesheet/)
|
36
|
-
- [Examples](https://reactnativeunistyles.vercel.app/example/breakpoints/)
|
37
|
-
|
38
|
-
## Faster, better and simpler - v.2.0 🚀
|
39
|
-
|
40
|
-
There is ongoing work on branch [2.0](https://github.com/jpudysz/react-native-unistyles/tree/2.0).
|
41
|
-
|
42
|
-
---
|
43
|
-
|
44
|
-
Join early testers and discussion [here](https://github.com/jpudysz/react-native-unistyles/discussions/41).
|
45
|
-
|
46
|
-
```cmd
|
31
|
+
```shell
|
32
|
+
# Unistyles is currently in RC phase
|
47
33
|
yarn add react-native-unistyles@next
|
48
34
|
```
|
49
35
|
|
50
|
-
##
|
36
|
+
## Discord
|
37
|
+
Looking for help or you want to chat with me?
|
51
38
|
|
52
|
-
|
39
|
+
[Join Discord](https://discord.gg/akGHf27P4C)
|
53
40
|
|
54
41
|
## Sponsor my work
|
55
42
|
|
@@ -5,35 +5,78 @@ Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
});
|
6
6
|
exports.UnistylesRuntime = void 0;
|
7
7
|
var _common = require("../common");
|
8
|
+
/**
|
9
|
+
* Utility to interact with the Unistyles during runtime
|
10
|
+
*/
|
8
11
|
class UnistylesRuntime {
|
9
12
|
constructor(unistylesBridge, unistylesRegistry) {
|
10
13
|
this.unistylesBridge = unistylesBridge;
|
11
14
|
this.unistylesRegistry = unistylesRegistry;
|
12
15
|
}
|
16
|
+
|
17
|
+
/**
|
18
|
+
* Get the current color scheme
|
19
|
+
* @returns - The current color scheme
|
20
|
+
*/
|
13
21
|
get colorScheme() {
|
14
22
|
return this.unistylesBridge.colorScheme;
|
15
23
|
}
|
24
|
+
|
25
|
+
/**
|
26
|
+
* Get info about adaptive themes
|
27
|
+
* @returns - boolean indicating if the adaptive themes are enabled
|
28
|
+
*/
|
16
29
|
get hasAdaptiveThemes() {
|
17
30
|
return this.unistylesBridge.hasAdaptiveThemes;
|
18
31
|
}
|
32
|
+
|
33
|
+
/**
|
34
|
+
* Get the current theme name
|
35
|
+
* @returns - The current theme name
|
36
|
+
*/
|
19
37
|
get themeName() {
|
20
38
|
return this.unistylesBridge.themeName;
|
21
39
|
}
|
40
|
+
|
41
|
+
/**
|
42
|
+
* Get the current breakpoint based on device size
|
43
|
+
* @returns - The current breakpoint
|
44
|
+
*/
|
22
45
|
get breakpoint() {
|
23
46
|
return this.unistylesBridge.breakpoint;
|
24
47
|
}
|
48
|
+
|
49
|
+
/**
|
50
|
+
* Get registered breakpoints with UnitylesRegistry
|
51
|
+
* @returns - The registered breakpoints
|
52
|
+
*/
|
25
53
|
get breakpoints() {
|
26
54
|
return this.unistylesRegistry.breakpoints;
|
27
55
|
}
|
56
|
+
|
57
|
+
/**
|
58
|
+
* Get the names of currently enabled plugins
|
59
|
+
* @returns - The names of currently enabled plugins
|
60
|
+
*/
|
28
61
|
get enabledPlugins() {
|
29
62
|
return this.unistylesBridge.enabledPlugins;
|
30
63
|
}
|
64
|
+
|
65
|
+
/**
|
66
|
+
* Get the screen size
|
67
|
+
* @returns - The screen size { width, height }
|
68
|
+
*/
|
31
69
|
get screen() {
|
32
70
|
return {
|
33
71
|
width: this.unistylesBridge.screenWidth,
|
34
72
|
height: this.unistylesBridge.screenHeight
|
35
73
|
};
|
36
74
|
}
|
75
|
+
|
76
|
+
/**
|
77
|
+
* Get the screen orientation
|
78
|
+
* @returns - The screen orientation
|
79
|
+
*/
|
37
80
|
get orientation() {
|
38
81
|
const {
|
39
82
|
width,
|
@@ -44,6 +87,12 @@ class UnistylesRuntime {
|
|
44
87
|
}
|
45
88
|
return _common.ScreenOrientation.Portrait;
|
46
89
|
}
|
90
|
+
|
91
|
+
/**
|
92
|
+
* Switch to a different theme
|
93
|
+
* @param name - The name of the theme to switch to
|
94
|
+
* @returns - boolean indicating if the theme was switched
|
95
|
+
*/
|
47
96
|
setTheme = name => {
|
48
97
|
if (name === this.themeName) {
|
49
98
|
return;
|
@@ -54,12 +103,27 @@ class UnistylesRuntime {
|
|
54
103
|
}
|
55
104
|
throw new Error(_common.UnistylesError.ThemeNotRegistered);
|
56
105
|
};
|
106
|
+
|
107
|
+
/**
|
108
|
+
* Enable or disable adaptive themes
|
109
|
+
* @param enable - boolean indicating if adaptive themes should be enabled
|
110
|
+
*/
|
57
111
|
setAdaptiveThemes = enable => {
|
58
112
|
this.unistylesBridge.useAdaptiveThemes(enable);
|
59
113
|
};
|
114
|
+
|
115
|
+
/**
|
116
|
+
* Enable a plugin
|
117
|
+
* @param plugin - Plugin that conforms to UnistylesPlugin interface
|
118
|
+
*/
|
60
119
|
addPlugin = plugin => {
|
61
120
|
this.unistylesRegistry.addPlugin(plugin);
|
62
121
|
};
|
122
|
+
|
123
|
+
/**
|
124
|
+
* Disable a plugin
|
125
|
+
* @param plugin - Plugin that conforms to UnistylesPlugin interface
|
126
|
+
*/
|
63
127
|
removePlugin = plugin => {
|
64
128
|
this.unistylesRegistry.removePlugin(plugin);
|
65
129
|
};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["_common","require","UnistylesRuntime","constructor","unistylesBridge","unistylesRegistry","colorScheme","hasAdaptiveThemes","themeName","breakpoint","breakpoints","enabledPlugins","screen","width","screenWidth","height","screenHeight","orientation","ScreenOrientation","Landscape","Portrait","setTheme","name","hasTheme","useTheme","Error","UnistylesError","ThemeNotRegistered","setAdaptiveThemes","enable","useAdaptiveThemes","addPlugin","plugin","removePlugin","exports"],"sourceRoot":"../../../src","sources":["core/UnistylesRuntime.ts"],"mappings":";;;;;;AAAA,IAAAA,OAAA,GAAAC,OAAA;
|
1
|
+
{"version":3,"names":["_common","require","UnistylesRuntime","constructor","unistylesBridge","unistylesRegistry","colorScheme","hasAdaptiveThemes","themeName","breakpoint","breakpoints","enabledPlugins","screen","width","screenWidth","height","screenHeight","orientation","ScreenOrientation","Landscape","Portrait","setTheme","name","hasTheme","useTheme","Error","UnistylesError","ThemeNotRegistered","setAdaptiveThemes","enable","useAdaptiveThemes","addPlugin","plugin","removePlugin","exports"],"sourceRoot":"../../../src","sources":["core/UnistylesRuntime.ts"],"mappings":";;;;;;AAAA,IAAAA,OAAA,GAAAC,OAAA;AAKA;AACA;AACA;AACO,MAAMC,gBAAgB,CAAC;EAC1BC,WAAWA,CAASC,eAAgC,EAAUC,iBAAmC,EAAE;IAAA,KAA/ED,eAAgC,GAAhCA,eAAgC;IAAA,KAAUC,iBAAmC,GAAnCA,iBAAmC;EAAG;;EAEpG;AACJ;AACA;AACA;EACI,IAAWC,WAAWA,CAAA,EAAG;IACrB,OAAO,IAAI,CAACF,eAAe,CAACE,WAAW;EAC3C;;EAEA;AACJ;AACA;AACA;EACI,IAAWC,iBAAiBA,CAAA,EAAG;IAC3B,OAAO,IAAI,CAACH,eAAe,CAACG,iBAAiB;EACjD;;EAEA;AACJ;AACA;AACA;EACI,IAAWC,SAASA,CAAA,EAAG;IACnB,OAAO,IAAI,CAACJ,eAAe,CAACI,SAAS;EACzC;;EAEA;AACJ;AACA;AACA;EACI,IAAWC,UAAUA,CAAA,EAAG;IACpB,OAAO,IAAI,CAACL,eAAe,CAACK,UAAU;EAC1C;;EAEA;AACJ;AACA;AACA;EACI,IAAWC,WAAWA,CAAA,EAAG;IACrB,OAAO,IAAI,CAACL,iBAAiB,CAACK,WAAW;EAC7C;;EAEA;AACJ;AACA;AACA;EACI,IAAWC,cAAcA,CAAA,EAAG;IACxB,OAAO,IAAI,CAACP,eAAe,CAACO,cAAc;EAC9C;;EAEA;AACJ;AACA;AACA;EACI,IAAWC,MAAMA,CAAA,EAAG;IAChB,OAAO;MACHC,KAAK,EAAE,IAAI,CAACT,eAAe,CAACU,WAAW;MACvCC,MAAM,EAAE,IAAI,CAACX,eAAe,CAACY;IACjC,CAAC;EACL;;EAEA;AACJ;AACA;AACA;EACI,IAAWC,WAAWA,CAAA,EAAG;IACrB,MAAM;MAAEJ,KAAK;MAAEE;IAAO,CAAC,GAAG,IAAI,CAACH,MAAM;IAErC,IAAIC,KAAK,GAAGE,MAAM,EAAE;MAChB,OAAOG,yBAAiB,CAACC,SAAS;IACtC;IAEA,OAAOD,yBAAiB,CAACE,QAAQ;EACrC;;EAEA;AACJ;AACA;AACA;AACA;EACWC,QAAQ,GAAIC,IAA2B,IAAK;IAC/C,IAAIA,IAAI,KAAK,IAAI,CAACd,SAAS,EAAE;MACzB;IACJ;IAEA,IAAI,IAAI,CAACH,iBAAiB,CAACkB,QAAQ,CAACD,IAAI,CAAC,EAAE;MACvC,IAAI,CAAClB,eAAe,CAACoB,QAAQ,CAACF,IAAI,CAAC;MAEnC,OAAO,IAAI;IACf;IAEA,MAAM,IAAIG,KAAK,CAACC,sBAAc,CAACC,kBAAkB,CAAC;EACtD,CAAC;;EAED;AACJ;AACA;AACA;EACWC,iBAAiB,GAAIC,MAAe,IAAK;IAC5C,IAAI,CAACzB,eAAe,CAAC0B,iBAAiB,CAACD,MAAM,CAAC;EAClD,CAAC;;EAED;AACJ;AACA;AACA;EACWE,SAAS,GAAIC,MAAuB,IAAK;IAC5C,IAAI,CAAC3B,iBAAiB,CAAC0B,SAAS,CAACC,MAAM,CAAC;EAC5C,CAAC;;EAED;AACJ;AACA;AACA;EACWC,YAAY,GAAID,MAAuB,IAAK;IAC/C,IAAI,CAAC3B,iBAAiB,CAAC4B,YAAY,CAACD,MAAM,CAAC;EAC/C,CAAC;AACL;AAACE,OAAA,CAAAhC,gBAAA,GAAAA,gBAAA"}
|
@@ -4,6 +4,11 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.createStyleSheet = void 0;
|
7
|
+
/**
|
8
|
+
* Utility to create a stylesheet with superpowers
|
9
|
+
* Compatible with React Native StyleSheet.create
|
10
|
+
* @param stylesheet - The stylesheet with superpowers to be used
|
11
|
+
*/
|
7
12
|
const createStyleSheet = stylesheet => stylesheet;
|
8
13
|
exports.createStyleSheet = createStyleSheet;
|
9
14
|
//# sourceMappingURL=createStyleSheet.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["createStyleSheet","stylesheet","exports"],"sourceRoot":"../../src","sources":["createStyleSheet.ts"],"mappings":";;;;;;
|
1
|
+
{"version":3,"names":["createStyleSheet","stylesheet","exports"],"sourceRoot":"../../src","sources":["createStyleSheet.ts"],"mappings":";;;;;;AAEA;AACA;AACA;AACA;AACA;AACO,MAAMA,gBAAgB,GAAyCC,UAAa,IAAQA,UAAU;AAAAC,OAAA,CAAAF,gBAAA,GAAAA,gBAAA"}
|
package/lib/commonjs/index.js
CHANGED
@@ -40,9 +40,25 @@ var _hooks = require("./hooks");
|
|
40
40
|
var _common = require("./common");
|
41
41
|
var _useStyles = require("./useStyles");
|
42
42
|
var _createStyleSheet = require("./createStyleSheet");
|
43
|
+
/**
|
44
|
+
* Utility to interact with the Unistyles
|
45
|
+
* (should be called only once)
|
46
|
+
*/
|
43
47
|
const UnistylesRegistry = exports.UnistylesRegistry = {
|
48
|
+
/**
|
49
|
+
* Register themes to be used in the app
|
50
|
+
* @param themes - Key value pair of themes
|
51
|
+
*/
|
44
52
|
addThemes: _core.unistyles.registry.addThemes,
|
53
|
+
/**
|
54
|
+
* Register breakpoints to be used in the app
|
55
|
+
* @param breakpoints - Key value pair of breakpoints
|
56
|
+
*/
|
45
57
|
addBreakpoints: _core.unistyles.registry.addBreakpoints,
|
58
|
+
/**
|
59
|
+
* Register additional config to customize the Unistyles
|
60
|
+
* @param config - Key value pair of config
|
61
|
+
*/
|
46
62
|
addConfig: _core.unistyles.registry.addConfig
|
47
63
|
};
|
48
64
|
const UnistylesRuntime = exports.UnistylesRuntime = _core.unistyles.runtime;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["_core","require","_utils","_hooks","_common","_useStyles","_createStyleSheet","UnistylesRegistry","exports","addThemes","unistyles","registry","addBreakpoints","addConfig","UnistylesRuntime","runtime"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AAGA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,UAAA,GAAAJ,OAAA;AACA,IAAAK,iBAAA,GAAAL,OAAA;AAEA,MAAMM,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAG;
|
1
|
+
{"version":3,"names":["_core","require","_utils","_hooks","_common","_useStyles","_createStyleSheet","UnistylesRegistry","exports","addThemes","unistyles","registry","addBreakpoints","addConfig","UnistylesRuntime","runtime"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AAGA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,UAAA,GAAAJ,OAAA;AACA,IAAAK,iBAAA,GAAAL,OAAA;AAEA;AACA;AACA;AACA;AACA,MAAMM,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAG;EACtB;AACJ;AACA;AACA;EACIE,SAAS,EAAEC,eAAS,CAACC,QAAQ,CAACF,SAAS;EACvC;AACJ;AACA;AACA;EACIG,cAAc,EAAEF,eAAS,CAACC,QAAQ,CAACC,cAAc;EACjD;AACJ;AACA;AACA;EACIC,SAAS,EAAEH,eAAS,CAACC,QAAQ,CAACE;AAClC,CAAC;AAED,MAAMC,gBAAgB,GAAAN,OAAA,CAAAM,gBAAA,GAAGJ,eAAS,CAACK,OAAO"}
|
@@ -10,6 +10,12 @@ var _utils = require("./utils");
|
|
10
10
|
var _hooks = require("./hooks");
|
11
11
|
var _core = require("./core");
|
12
12
|
var _common = require("./common");
|
13
|
+
/**
|
14
|
+
* Hook that enables all the features of Unistyles
|
15
|
+
* @param stylesheet - The stylesheet with superpowers to be used
|
16
|
+
* @param variantsMap - The map of variants to be used
|
17
|
+
* @returns - The theme, current breakpoint and RN compatible styles
|
18
|
+
*/
|
13
19
|
const useStyles = (stylesheet, variantsMap) => {
|
14
20
|
const {
|
15
21
|
theme,
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["_react","require","_reactNative","_utils","_hooks","_core","_common","useStyles","stylesheet","variantsMap","theme","layout","plugins","useUnistyles","variants","useVariants","parsedStyles","useMemo","dynamicStyleSheet","Object","entries","reduce","acc","_ref","key","value","proxifyFunction","StyleSheet","create","withPlugins","parseStyle","isWeb","unistyles","registry","config","experimentalCSSMediaQueries","useCSS","breakpoint","styles","exports"],"sourceRoot":"../../src","sources":["useStyles.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAGA,IAAAI,KAAA,GAAAJ,OAAA;AACA,IAAAK,OAAA,GAAAL,OAAA;
|
1
|
+
{"version":3,"names":["_react","require","_reactNative","_utils","_hooks","_core","_common","useStyles","stylesheet","variantsMap","theme","layout","plugins","useUnistyles","variants","useVariants","parsedStyles","useMemo","dynamicStyleSheet","Object","entries","reduce","acc","_ref","key","value","proxifyFunction","StyleSheet","create","withPlugins","parseStyle","isWeb","unistyles","registry","config","experimentalCSSMediaQueries","useCSS","breakpoint","styles","exports"],"sourceRoot":"../../src","sources":["useStyles.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAGA,IAAAI,KAAA,GAAAJ,OAAA;AACA,IAAAK,OAAA,GAAAL,OAAA;AAQA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMM,SAAS,GAAGA,CACrBC,UAAe,EACfC,WAAoD,KAC7B;EACvB,MAAM;IAAEC,KAAK;IAAEC,MAAM;IAAEC;EAAQ,CAAC,GAAG,IAAAC,mBAAY,EAAC,CAAC;EACjD,MAAMC,QAAQ,GAAG,IAAAC,kBAAW,EAACN,WAAW,CAAC;EACzC,MAAMO,YAAY,GAAG,IAAAC,cAAO,EAAC,MAAM,OAAOT,UAAU,KAAK,UAAU,GAC7DA,UAAU,CAACE,KAAK,CAAC,GACjBF,UAAU,EAAE,CAACE,KAAK,EAAEF,UAAU,EAAEG,MAAM,CAAC,CAAC;EAE9C,MAAMO,iBAAiB,GAAG,IAAAD,cAAO,EAAC,MAAME,MAAM,CACzCC,OAAO,CAACJ,YAAY,IAAI,CAAC,CAAC,CAAC,CAC3BK,MAAM,CAAC,CAACC,GAAG,EAAAC,IAAA,KAAmB;IAAA,IAAjB,CAACC,GAAG,EAAEC,KAAK,CAAC,GAAAF,IAAA;IACtB,IAAI,OAAOE,KAAK,KAAK,UAAU,EAAE;MAC7B,OAAO;QACH,GAAGH,GAAG;QACN,CAACE,GAAG,GAAG,IAAAE,sBAAe,EAACF,GAAG,EAAEC,KAAK;MACrC,CAAC;IACL;IAEA,OAAOE,uBAAU,CAACC,MAAM,CAAC;MACrB,GAAGN,GAAG;MACN,CAACE,GAAG,GAAG,IAAAK,kBAAW,EAACL,GAAG,EAAE,IAAAM,iBAAU,EAC9BL,KAAK,EACLX,QAAQ,EACR,CAACiB,aAAK,IAAI,CAACC,eAAS,CAACC,QAAQ,CAACC,MAAM,CAACC,2BAA2B,CACpE;IACJ,CAAC,CAAC;EACN,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAACnB,YAAY,EAAEF,QAAQ,EAAEF,OAAO,CAC5C,CAAC;EAED,IAAAwB,aAAM,EAAClB,iBAA8C,CAAC;EAEtD,OAAO;IACHR,KAAK;IACL2B,UAAU,EAAE1B,MAAM,CAAC0B,UAAU;IAC7BC,MAAM,EAAEpB;EACZ,CAAC;AACL,CAAC;AAAAqB,OAAA,CAAAhC,SAAA,GAAAA,SAAA"}
|
package/lib/commonjs/utils/mq.js
CHANGED
@@ -14,6 +14,11 @@ const getMQValue = value => {
|
|
14
14
|
}
|
15
15
|
return _core.unistyles.registry.breakpoints[value] ?? 0;
|
16
16
|
};
|
17
|
+
|
18
|
+
/**
|
19
|
+
* Utility to create cross-platform media queries
|
20
|
+
* @returns - JavaScript symbol to be used in your stylesheet
|
21
|
+
*/
|
17
22
|
const mq = exports.mq = {
|
18
23
|
only: {
|
19
24
|
width: function () {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["_core","require","getMQValue","value","unistyles","registry","breakpoints","mq","exports","only","width","wMin","arguments","length","undefined","wMax","Infinity","height","hMin","hMax","and"],"sourceRoot":"../../../src","sources":["utils/mq.ts"],"mappings":";;;;;;AAEA,IAAAA,KAAA,GAAAC,OAAA;AAqBA,MAAMC,UAAU,GAAIC,KAAwB,IAAK;EAC7C,IAAI,OAAOA,KAAK,KAAK,QAAQ,EAAE;IAC3B,OAAOA,KAAK;EAChB;EAEA,IAAIA,KAAK,KAAK,IAAI,EAAE;IAChB,OAAO,CAAC;EACZ;EAEA,OAAOC,eAAS,CAACC,QAAQ,CAACC,WAAW,CAACH,KAAK,CAAC,IAAI,CAAC;AACrD,CAAC;
|
1
|
+
{"version":3,"names":["_core","require","getMQValue","value","unistyles","registry","breakpoints","mq","exports","only","width","wMin","arguments","length","undefined","wMax","Infinity","height","hMin","hMax","and"],"sourceRoot":"../../../src","sources":["utils/mq.ts"],"mappings":";;;;;;AAEA,IAAAA,KAAA,GAAAC,OAAA;AAqBA,MAAMC,UAAU,GAAIC,KAAwB,IAAK;EAC7C,IAAI,OAAOA,KAAK,KAAK,QAAQ,EAAE;IAC3B,OAAOA,KAAK;EAChB;EAEA,IAAIA,KAAK,KAAK,IAAI,EAAE;IAChB,OAAO,CAAC;EACZ;EAEA,OAAOC,eAAS,CAACC,QAAQ,CAACC,WAAW,CAACH,KAAK,CAAC,IAAI,CAAC;AACrD,CAAC;;AAED;AACA;AACA;AACA;AACO,MAAMI,EAAa,GAAAC,OAAA,CAAAD,EAAA,GAAG;EACzBE,IAAI,EAAE;IACFC,KAAK,EAAE,SAAAA,CAAA;MAAA,IAACC,IAAuB,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,CAAC;MAAA,IAAEG,IAAa,GAAAH,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAGI,QAAQ;MAAA,OAAO,MAAKd,UAAU,CAACS,IAAI,CAAE,KAAIT,UAAU,CAACa,IAAI,CAAE,GAAE;IAAA,CAAsB;IACvIE,MAAM,EAAE,SAAAA,CAAA;MAAA,IAACC,IAAuB,GAAAN,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,CAAC;MAAA,IAAEO,IAAa,GAAAP,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAGI,QAAQ;MAAA,OAAO,MAAKd,UAAU,CAACgB,IAAI,CAAE,KAAIhB,UAAU,CAACiB,IAAI,CAAE,GAAE;IAAA;EACtH,CAAC;EACDT,KAAK,EAAE,SAAAA,CAAA;IAAA,IAACC,IAAuB,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,CAAC;IAAA,IAAEG,IAAa,GAAAH,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAGI,QAAQ;IAAA,OAAM;MAC/DI,GAAG,EAAE;QACDH,MAAM,EAAE,SAAAA,CAAA;UAAA,IAACC,IAAuB,GAAAN,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,CAAC;UAAA,IAAEO,IAAa,GAAAP,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAGI,QAAQ;UAAA,OACxD,MAAKd,UAAU,CAACS,IAAI,CAAE,KAAIT,UAAU,CAACa,IAAI,CAAE,OAAMb,UAAU,CAACgB,IAAI,CAAE,KAAIhB,UAAU,CAACiB,IAAI,CAAE,GAAE;QAAA;MACnG;IACJ,CAAC;EAAA,CAAC;EACFF,MAAM,EAAE,SAAAA,CAAA;IAAA,IAACC,IAAuB,GAAAN,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,CAAC;IAAA,IAAEO,IAAa,GAAAP,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAGI,QAAQ;IAAA,OAAM;MAChEI,GAAG,EAAE;QACDV,KAAK,EAAE,SAAAA,CAAA;UAAA,IAACC,IAAuB,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,CAAC;UAAA,IAAEG,IAAa,GAAAH,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAGI,QAAQ;UAAA,OACvD,MAAKd,UAAU,CAACS,IAAI,CAAE,KAAIT,UAAU,CAACa,IAAI,CAAE,OAAMb,UAAU,CAACgB,IAAI,CAAE,KAAIhB,UAAU,CAACiB,IAAI,CAAE,GAAE;QAAA;MACnG;IACJ,CAAC;EAAA;AACL,CAAC"}
|
@@ -1,33 +1,76 @@
|
|
1
1
|
import { ScreenOrientation, UnistylesError } from '../common';
|
2
|
+
/**
|
3
|
+
* Utility to interact with the Unistyles during runtime
|
4
|
+
*/
|
2
5
|
export class UnistylesRuntime {
|
3
6
|
constructor(unistylesBridge, unistylesRegistry) {
|
4
7
|
this.unistylesBridge = unistylesBridge;
|
5
8
|
this.unistylesRegistry = unistylesRegistry;
|
6
9
|
}
|
10
|
+
|
11
|
+
/**
|
12
|
+
* Get the current color scheme
|
13
|
+
* @returns - The current color scheme
|
14
|
+
*/
|
7
15
|
get colorScheme() {
|
8
16
|
return this.unistylesBridge.colorScheme;
|
9
17
|
}
|
18
|
+
|
19
|
+
/**
|
20
|
+
* Get info about adaptive themes
|
21
|
+
* @returns - boolean indicating if the adaptive themes are enabled
|
22
|
+
*/
|
10
23
|
get hasAdaptiveThemes() {
|
11
24
|
return this.unistylesBridge.hasAdaptiveThemes;
|
12
25
|
}
|
26
|
+
|
27
|
+
/**
|
28
|
+
* Get the current theme name
|
29
|
+
* @returns - The current theme name
|
30
|
+
*/
|
13
31
|
get themeName() {
|
14
32
|
return this.unistylesBridge.themeName;
|
15
33
|
}
|
34
|
+
|
35
|
+
/**
|
36
|
+
* Get the current breakpoint based on device size
|
37
|
+
* @returns - The current breakpoint
|
38
|
+
*/
|
16
39
|
get breakpoint() {
|
17
40
|
return this.unistylesBridge.breakpoint;
|
18
41
|
}
|
42
|
+
|
43
|
+
/**
|
44
|
+
* Get registered breakpoints with UnitylesRegistry
|
45
|
+
* @returns - The registered breakpoints
|
46
|
+
*/
|
19
47
|
get breakpoints() {
|
20
48
|
return this.unistylesRegistry.breakpoints;
|
21
49
|
}
|
50
|
+
|
51
|
+
/**
|
52
|
+
* Get the names of currently enabled plugins
|
53
|
+
* @returns - The names of currently enabled plugins
|
54
|
+
*/
|
22
55
|
get enabledPlugins() {
|
23
56
|
return this.unistylesBridge.enabledPlugins;
|
24
57
|
}
|
58
|
+
|
59
|
+
/**
|
60
|
+
* Get the screen size
|
61
|
+
* @returns - The screen size { width, height }
|
62
|
+
*/
|
25
63
|
get screen() {
|
26
64
|
return {
|
27
65
|
width: this.unistylesBridge.screenWidth,
|
28
66
|
height: this.unistylesBridge.screenHeight
|
29
67
|
};
|
30
68
|
}
|
69
|
+
|
70
|
+
/**
|
71
|
+
* Get the screen orientation
|
72
|
+
* @returns - The screen orientation
|
73
|
+
*/
|
31
74
|
get orientation() {
|
32
75
|
const {
|
33
76
|
width,
|
@@ -38,6 +81,12 @@ export class UnistylesRuntime {
|
|
38
81
|
}
|
39
82
|
return ScreenOrientation.Portrait;
|
40
83
|
}
|
84
|
+
|
85
|
+
/**
|
86
|
+
* Switch to a different theme
|
87
|
+
* @param name - The name of the theme to switch to
|
88
|
+
* @returns - boolean indicating if the theme was switched
|
89
|
+
*/
|
41
90
|
setTheme = name => {
|
42
91
|
if (name === this.themeName) {
|
43
92
|
return;
|
@@ -48,12 +97,27 @@ export class UnistylesRuntime {
|
|
48
97
|
}
|
49
98
|
throw new Error(UnistylesError.ThemeNotRegistered);
|
50
99
|
};
|
100
|
+
|
101
|
+
/**
|
102
|
+
* Enable or disable adaptive themes
|
103
|
+
* @param enable - boolean indicating if adaptive themes should be enabled
|
104
|
+
*/
|
51
105
|
setAdaptiveThemes = enable => {
|
52
106
|
this.unistylesBridge.useAdaptiveThemes(enable);
|
53
107
|
};
|
108
|
+
|
109
|
+
/**
|
110
|
+
* Enable a plugin
|
111
|
+
* @param plugin - Plugin that conforms to UnistylesPlugin interface
|
112
|
+
*/
|
54
113
|
addPlugin = plugin => {
|
55
114
|
this.unistylesRegistry.addPlugin(plugin);
|
56
115
|
};
|
116
|
+
|
117
|
+
/**
|
118
|
+
* Disable a plugin
|
119
|
+
* @param plugin - Plugin that conforms to UnistylesPlugin interface
|
120
|
+
*/
|
57
121
|
removePlugin = plugin => {
|
58
122
|
this.unistylesRegistry.removePlugin(plugin);
|
59
123
|
};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["ScreenOrientation","UnistylesError","UnistylesRuntime","constructor","unistylesBridge","unistylesRegistry","colorScheme","hasAdaptiveThemes","themeName","breakpoint","breakpoints","enabledPlugins","screen","width","screenWidth","height","screenHeight","orientation","Landscape","Portrait","setTheme","name","hasTheme","useTheme","Error","ThemeNotRegistered","setAdaptiveThemes","enable","useAdaptiveThemes","addPlugin","plugin","removePlugin"],"sourceRoot":"../../../src","sources":["core/UnistylesRuntime.ts"],"mappings":"AAAA,SAASA,iBAAiB,EAAEC,cAAc,QAAQ,WAAW;AAK7D,OAAO,MAAMC,gBAAgB,CAAC;EAC1BC,WAAWA,CAASC,eAAgC,EAAUC,iBAAmC,EAAE;IAAA,KAA/ED,eAAgC,GAAhCA,eAAgC;IAAA,KAAUC,iBAAmC,GAAnCA,iBAAmC;EAAG;
|
1
|
+
{"version":3,"names":["ScreenOrientation","UnistylesError","UnistylesRuntime","constructor","unistylesBridge","unistylesRegistry","colorScheme","hasAdaptiveThemes","themeName","breakpoint","breakpoints","enabledPlugins","screen","width","screenWidth","height","screenHeight","orientation","Landscape","Portrait","setTheme","name","hasTheme","useTheme","Error","ThemeNotRegistered","setAdaptiveThemes","enable","useAdaptiveThemes","addPlugin","plugin","removePlugin"],"sourceRoot":"../../../src","sources":["core/UnistylesRuntime.ts"],"mappings":"AAAA,SAASA,iBAAiB,EAAEC,cAAc,QAAQ,WAAW;AAK7D;AACA;AACA;AACA,OAAO,MAAMC,gBAAgB,CAAC;EAC1BC,WAAWA,CAASC,eAAgC,EAAUC,iBAAmC,EAAE;IAAA,KAA/ED,eAAgC,GAAhCA,eAAgC;IAAA,KAAUC,iBAAmC,GAAnCA,iBAAmC;EAAG;;EAEpG;AACJ;AACA;AACA;EACI,IAAWC,WAAWA,CAAA,EAAG;IACrB,OAAO,IAAI,CAACF,eAAe,CAACE,WAAW;EAC3C;;EAEA;AACJ;AACA;AACA;EACI,IAAWC,iBAAiBA,CAAA,EAAG;IAC3B,OAAO,IAAI,CAACH,eAAe,CAACG,iBAAiB;EACjD;;EAEA;AACJ;AACA;AACA;EACI,IAAWC,SAASA,CAAA,EAAG;IACnB,OAAO,IAAI,CAACJ,eAAe,CAACI,SAAS;EACzC;;EAEA;AACJ;AACA;AACA;EACI,IAAWC,UAAUA,CAAA,EAAG;IACpB,OAAO,IAAI,CAACL,eAAe,CAACK,UAAU;EAC1C;;EAEA;AACJ;AACA;AACA;EACI,IAAWC,WAAWA,CAAA,EAAG;IACrB,OAAO,IAAI,CAACL,iBAAiB,CAACK,WAAW;EAC7C;;EAEA;AACJ;AACA;AACA;EACI,IAAWC,cAAcA,CAAA,EAAG;IACxB,OAAO,IAAI,CAACP,eAAe,CAACO,cAAc;EAC9C;;EAEA;AACJ;AACA;AACA;EACI,IAAWC,MAAMA,CAAA,EAAG;IAChB,OAAO;MACHC,KAAK,EAAE,IAAI,CAACT,eAAe,CAACU,WAAW;MACvCC,MAAM,EAAE,IAAI,CAACX,eAAe,CAACY;IACjC,CAAC;EACL;;EAEA;AACJ;AACA;AACA;EACI,IAAWC,WAAWA,CAAA,EAAG;IACrB,MAAM;MAAEJ,KAAK;MAAEE;IAAO,CAAC,GAAG,IAAI,CAACH,MAAM;IAErC,IAAIC,KAAK,GAAGE,MAAM,EAAE;MAChB,OAAOf,iBAAiB,CAACkB,SAAS;IACtC;IAEA,OAAOlB,iBAAiB,CAACmB,QAAQ;EACrC;;EAEA;AACJ;AACA;AACA;AACA;EACWC,QAAQ,GAAIC,IAA2B,IAAK;IAC/C,IAAIA,IAAI,KAAK,IAAI,CAACb,SAAS,EAAE;MACzB;IACJ;IAEA,IAAI,IAAI,CAACH,iBAAiB,CAACiB,QAAQ,CAACD,IAAI,CAAC,EAAE;MACvC,IAAI,CAACjB,eAAe,CAACmB,QAAQ,CAACF,IAAI,CAAC;MAEnC,OAAO,IAAI;IACf;IAEA,MAAM,IAAIG,KAAK,CAACvB,cAAc,CAACwB,kBAAkB,CAAC;EACtD,CAAC;;EAED;AACJ;AACA;AACA;EACWC,iBAAiB,GAAIC,MAAe,IAAK;IAC5C,IAAI,CAACvB,eAAe,CAACwB,iBAAiB,CAACD,MAAM,CAAC;EAClD,CAAC;;EAED;AACJ;AACA;AACA;EACWE,SAAS,GAAIC,MAAuB,IAAK;IAC5C,IAAI,CAACzB,iBAAiB,CAACwB,SAAS,CAACC,MAAM,CAAC;EAC5C,CAAC;;EAED;AACJ;AACA;AACA;EACWC,YAAY,GAAID,MAAuB,IAAK;IAC/C,IAAI,CAACzB,iBAAiB,CAAC0B,YAAY,CAACD,MAAM,CAAC;EAC/C,CAAC;AACL"}
|
@@ -1,2 +1,7 @@
|
|
1
|
+
/**
|
2
|
+
* Utility to create a stylesheet with superpowers
|
3
|
+
* Compatible with React Native StyleSheet.create
|
4
|
+
* @param stylesheet - The stylesheet with superpowers to be used
|
5
|
+
*/
|
1
6
|
export const createStyleSheet = stylesheet => stylesheet;
|
2
7
|
//# sourceMappingURL=createStyleSheet.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["createStyleSheet","stylesheet"],"sourceRoot":"../../src","sources":["createStyleSheet.ts"],"mappings":"AAEA,OAAO,MAAMA,gBAAgB,GAAyCC,UAAa,IAAQA,UAAU"}
|
1
|
+
{"version":3,"names":["createStyleSheet","stylesheet"],"sourceRoot":"../../src","sources":["createStyleSheet.ts"],"mappings":"AAEA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMA,gBAAgB,GAAyCC,UAAa,IAAQA,UAAU"}
|
package/lib/module/index.js
CHANGED
@@ -4,9 +4,26 @@ import { useInitialTheme } from './hooks';
|
|
4
4
|
import { ScreenOrientation } from './common';
|
5
5
|
import { useStyles } from './useStyles';
|
6
6
|
import { createStyleSheet } from './createStyleSheet';
|
7
|
+
|
8
|
+
/**
|
9
|
+
* Utility to interact with the Unistyles
|
10
|
+
* (should be called only once)
|
11
|
+
*/
|
7
12
|
const UnistylesRegistry = {
|
13
|
+
/**
|
14
|
+
* Register themes to be used in the app
|
15
|
+
* @param themes - Key value pair of themes
|
16
|
+
*/
|
8
17
|
addThemes: unistyles.registry.addThemes,
|
18
|
+
/**
|
19
|
+
* Register breakpoints to be used in the app
|
20
|
+
* @param breakpoints - Key value pair of breakpoints
|
21
|
+
*/
|
9
22
|
addBreakpoints: unistyles.registry.addBreakpoints,
|
23
|
+
/**
|
24
|
+
* Register additional config to customize the Unistyles
|
25
|
+
* @param config - Key value pair of config
|
26
|
+
*/
|
10
27
|
addConfig: unistyles.registry.addConfig
|
11
28
|
};
|
12
29
|
const UnistylesRuntime = unistyles.runtime;
|
package/lib/module/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["unistyles","mq","useInitialTheme","ScreenOrientation","useStyles","createStyleSheet","UnistylesRegistry","addThemes","registry","addBreakpoints","addConfig","UnistylesRuntime","runtime"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":"AAAA,SAASA,SAAS,QAAQ,QAAQ;AAClC,SAASC,EAAE,QAAQ,SAAS;AAC5B,SAASC,eAAe,QAAQ,SAAS;AAGzC,SAASC,iBAAiB,QAAQ,UAAU;AAC5C,SAASC,SAAS,QAAQ,aAAa;AACvC,SAASC,gBAAgB,QAAQ,oBAAoB;
|
1
|
+
{"version":3,"names":["unistyles","mq","useInitialTheme","ScreenOrientation","useStyles","createStyleSheet","UnistylesRegistry","addThemes","registry","addBreakpoints","addConfig","UnistylesRuntime","runtime"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":"AAAA,SAASA,SAAS,QAAQ,QAAQ;AAClC,SAASC,EAAE,QAAQ,SAAS;AAC5B,SAASC,eAAe,QAAQ,SAAS;AAGzC,SAASC,iBAAiB,QAAQ,UAAU;AAC5C,SAASC,SAAS,QAAQ,aAAa;AACvC,SAASC,gBAAgB,QAAQ,oBAAoB;;AAErD;AACA;AACA;AACA;AACA,MAAMC,iBAAiB,GAAG;EACtB;AACJ;AACA;AACA;EACIC,SAAS,EAAEP,SAAS,CAACQ,QAAQ,CAACD,SAAS;EACvC;AACJ;AACA;AACA;EACIE,cAAc,EAAET,SAAS,CAACQ,QAAQ,CAACC,cAAc;EACjD;AACJ;AACA;AACA;EACIC,SAAS,EAAEV,SAAS,CAACQ,QAAQ,CAACE;AAClC,CAAC;AAED,MAAMC,gBAAgB,GAAGX,SAAS,CAACY,OAAO;AAE1C,SACIX,EAAE,EACFG,SAAS,EACTF,eAAe,EACfG,gBAAgB,EAChBF,iBAAiB,EACjBG,iBAAiB,EACjBK,gBAAgB"}
|
package/lib/module/useStyles.js
CHANGED
@@ -4,6 +4,12 @@ import { parseStyle, proxifyFunction, withPlugins } from './utils';
|
|
4
4
|
import { useCSS, useUnistyles, useVariants } from './hooks';
|
5
5
|
import { unistyles } from './core';
|
6
6
|
import { isWeb } from './common';
|
7
|
+
/**
|
8
|
+
* Hook that enables all the features of Unistyles
|
9
|
+
* @param stylesheet - The stylesheet with superpowers to be used
|
10
|
+
* @param variantsMap - The map of variants to be used
|
11
|
+
* @returns - The theme, current breakpoint and RN compatible styles
|
12
|
+
*/
|
7
13
|
export const useStyles = (stylesheet, variantsMap) => {
|
8
14
|
const {
|
9
15
|
theme,
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["useMemo","StyleSheet","parseStyle","proxifyFunction","withPlugins","useCSS","useUnistyles","useVariants","unistyles","isWeb","useStyles","stylesheet","variantsMap","theme","layout","plugins","variants","parsedStyles","dynamicStyleSheet","Object","entries","reduce","acc","_ref","key","value","create","registry","config","experimentalCSSMediaQueries","breakpoint","styles"],"sourceRoot":"../../src","sources":["useStyles.ts"],"mappings":"AAAA,SAASA,OAAO,QAAQ,OAAO;AAC/B,SAASC,UAAU,QAAQ,cAAc;AACzC,SAASC,UAAU,EAAEC,eAAe,EAAEC,WAAW,QAAQ,SAAS;AAClE,SAASC,MAAM,EAAEC,YAAY,EAAEC,WAAW,QAAQ,SAAS;AAG3D,SAASC,SAAS,QAAQ,QAAQ;AAClC,SAASC,KAAK,QAAQ,UAAU;AAQhC,OAAO,MAAMC,SAAS,GAAGA,CACrBC,UAAe,EACfC,WAAoD,KAC7B;EACvB,MAAM;IAAEC,KAAK;IAAEC,MAAM;IAAEC;EAAQ,CAAC,GAAGT,YAAY,CAAC,CAAC;EACjD,MAAMU,QAAQ,GAAGT,WAAW,CAACK,WAAW,CAAC;EACzC,MAAMK,YAAY,GAAGjB,OAAO,CAAC,MAAM,OAAOW,UAAU,KAAK,UAAU,GAC7DA,UAAU,CAACE,KAAK,CAAC,GACjBF,UAAU,EAAE,CAACE,KAAK,EAAEF,UAAU,EAAEG,MAAM,CAAC,CAAC;EAE9C,MAAMI,iBAAiB,GAAGlB,OAAO,CAAC,MAAMmB,MAAM,CACzCC,OAAO,CAACH,YAAY,IAAI,CAAC,CAAC,CAAC,CAC3BI,MAAM,CAAC,CAACC,GAAG,EAAAC,IAAA,KAAmB;IAAA,IAAjB,CAACC,GAAG,EAAEC,KAAK,CAAC,GAAAF,IAAA;IACtB,IAAI,OAAOE,KAAK,KAAK,UAAU,EAAE;MAC7B,OAAO;QACH,GAAGH,GAAG;QACN,CAACE,GAAG,GAAGrB,eAAe,CAACqB,GAAG,EAAEC,KAAK;MACrC,CAAC;IACL;IAEA,OAAOxB,UAAU,CAACyB,MAAM,CAAC;MACrB,GAAGJ,GAAG;MACN,CAACE,GAAG,GAAGpB,WAAW,CAACoB,GAAG,EAAEtB,UAAU,CAC9BuB,KAAK,EACLT,QAAQ,EACR,CAACP,KAAK,IAAI,CAACD,SAAS,CAACmB,QAAQ,CAACC,MAAM,CAACC,2BAA2B,CACpE;IACJ,CAAC,CAAC;EACN,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAACZ,YAAY,EAAED,QAAQ,EAAED,OAAO,CAC5C,CAAC;EAEDV,MAAM,CAACa,iBAA8C,CAAC;EAEtD,OAAO;IACHL,KAAK;IACLiB,UAAU,EAAEhB,MAAM,CAACgB,UAAU;IAC7BC,MAAM,EAAEb;EACZ,CAAC;AACL,CAAC"}
|
1
|
+
{"version":3,"names":["useMemo","StyleSheet","parseStyle","proxifyFunction","withPlugins","useCSS","useUnistyles","useVariants","unistyles","isWeb","useStyles","stylesheet","variantsMap","theme","layout","plugins","variants","parsedStyles","dynamicStyleSheet","Object","entries","reduce","acc","_ref","key","value","create","registry","config","experimentalCSSMediaQueries","breakpoint","styles"],"sourceRoot":"../../src","sources":["useStyles.ts"],"mappings":"AAAA,SAASA,OAAO,QAAQ,OAAO;AAC/B,SAASC,UAAU,QAAQ,cAAc;AACzC,SAASC,UAAU,EAAEC,eAAe,EAAEC,WAAW,QAAQ,SAAS;AAClE,SAASC,MAAM,EAAEC,YAAY,EAAEC,WAAW,QAAQ,SAAS;AAG3D,SAASC,SAAS,QAAQ,QAAQ;AAClC,SAASC,KAAK,QAAQ,UAAU;AAQhC;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,SAAS,GAAGA,CACrBC,UAAe,EACfC,WAAoD,KAC7B;EACvB,MAAM;IAAEC,KAAK;IAAEC,MAAM;IAAEC;EAAQ,CAAC,GAAGT,YAAY,CAAC,CAAC;EACjD,MAAMU,QAAQ,GAAGT,WAAW,CAACK,WAAW,CAAC;EACzC,MAAMK,YAAY,GAAGjB,OAAO,CAAC,MAAM,OAAOW,UAAU,KAAK,UAAU,GAC7DA,UAAU,CAACE,KAAK,CAAC,GACjBF,UAAU,EAAE,CAACE,KAAK,EAAEF,UAAU,EAAEG,MAAM,CAAC,CAAC;EAE9C,MAAMI,iBAAiB,GAAGlB,OAAO,CAAC,MAAMmB,MAAM,CACzCC,OAAO,CAACH,YAAY,IAAI,CAAC,CAAC,CAAC,CAC3BI,MAAM,CAAC,CAACC,GAAG,EAAAC,IAAA,KAAmB;IAAA,IAAjB,CAACC,GAAG,EAAEC,KAAK,CAAC,GAAAF,IAAA;IACtB,IAAI,OAAOE,KAAK,KAAK,UAAU,EAAE;MAC7B,OAAO;QACH,GAAGH,GAAG;QACN,CAACE,GAAG,GAAGrB,eAAe,CAACqB,GAAG,EAAEC,KAAK;MACrC,CAAC;IACL;IAEA,OAAOxB,UAAU,CAACyB,MAAM,CAAC;MACrB,GAAGJ,GAAG;MACN,CAACE,GAAG,GAAGpB,WAAW,CAACoB,GAAG,EAAEtB,UAAU,CAC9BuB,KAAK,EACLT,QAAQ,EACR,CAACP,KAAK,IAAI,CAACD,SAAS,CAACmB,QAAQ,CAACC,MAAM,CAACC,2BAA2B,CACpE;IACJ,CAAC,CAAC;EACN,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAACZ,YAAY,EAAED,QAAQ,EAAED,OAAO,CAC5C,CAAC;EAEDV,MAAM,CAACa,iBAA8C,CAAC;EAEtD,OAAO;IACHL,KAAK;IACLiB,UAAU,EAAEhB,MAAM,CAACgB,UAAU;IAC7BC,MAAM,EAAEb;EACZ,CAAC;AACL,CAAC"}
|
package/lib/module/utils/mq.js
CHANGED
@@ -8,6 +8,11 @@ const getMQValue = value => {
|
|
8
8
|
}
|
9
9
|
return unistyles.registry.breakpoints[value] ?? 0;
|
10
10
|
};
|
11
|
+
|
12
|
+
/**
|
13
|
+
* Utility to create cross-platform media queries
|
14
|
+
* @returns - JavaScript symbol to be used in your stylesheet
|
15
|
+
*/
|
11
16
|
export const mq = {
|
12
17
|
only: {
|
13
18
|
width: function () {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["unistyles","getMQValue","value","registry","breakpoints","mq","only","width","wMin","arguments","length","undefined","wMax","Infinity","height","hMin","hMax","and"],"sourceRoot":"../../../src","sources":["utils/mq.ts"],"mappings":"AAEA,SAASA,SAAS,QAAQ,SAAS;AAqBnC,MAAMC,UAAU,GAAIC,KAAwB,IAAK;EAC7C,IAAI,OAAOA,KAAK,KAAK,QAAQ,EAAE;IAC3B,OAAOA,KAAK;EAChB;EAEA,IAAIA,KAAK,KAAK,IAAI,EAAE;IAChB,OAAO,CAAC;EACZ;EAEA,OAAOF,SAAS,CAACG,QAAQ,CAACC,WAAW,CAACF,KAAK,CAAC,IAAI,CAAC;AACrD,CAAC;
|
1
|
+
{"version":3,"names":["unistyles","getMQValue","value","registry","breakpoints","mq","only","width","wMin","arguments","length","undefined","wMax","Infinity","height","hMin","hMax","and"],"sourceRoot":"../../../src","sources":["utils/mq.ts"],"mappings":"AAEA,SAASA,SAAS,QAAQ,SAAS;AAqBnC,MAAMC,UAAU,GAAIC,KAAwB,IAAK;EAC7C,IAAI,OAAOA,KAAK,KAAK,QAAQ,EAAE;IAC3B,OAAOA,KAAK;EAChB;EAEA,IAAIA,KAAK,KAAK,IAAI,EAAE;IAChB,OAAO,CAAC;EACZ;EAEA,OAAOF,SAAS,CAACG,QAAQ,CAACC,WAAW,CAACF,KAAK,CAAC,IAAI,CAAC;AACrD,CAAC;;AAED;AACA;AACA;AACA;AACA,OAAO,MAAMG,EAAa,GAAG;EACzBC,IAAI,EAAE;IACFC,KAAK,EAAE,SAAAA,CAAA;MAAA,IAACC,IAAuB,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,CAAC;MAAA,IAAEG,IAAa,GAAAH,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAGI,QAAQ;MAAA,OAAO,MAAKZ,UAAU,CAACO,IAAI,CAAE,KAAIP,UAAU,CAACW,IAAI,CAAE,GAAE;IAAA,CAAsB;IACvIE,MAAM,EAAE,SAAAA,CAAA;MAAA,IAACC,IAAuB,GAAAN,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,CAAC;MAAA,IAAEO,IAAa,GAAAP,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAGI,QAAQ;MAAA,OAAO,MAAKZ,UAAU,CAACc,IAAI,CAAE,KAAId,UAAU,CAACe,IAAI,CAAE,GAAE;IAAA;EACtH,CAAC;EACDT,KAAK,EAAE,SAAAA,CAAA;IAAA,IAACC,IAAuB,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,CAAC;IAAA,IAAEG,IAAa,GAAAH,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAGI,QAAQ;IAAA,OAAM;MAC/DI,GAAG,EAAE;QACDH,MAAM,EAAE,SAAAA,CAAA;UAAA,IAACC,IAAuB,GAAAN,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,CAAC;UAAA,IAAEO,IAAa,GAAAP,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAGI,QAAQ;UAAA,OACxD,MAAKZ,UAAU,CAACO,IAAI,CAAE,KAAIP,UAAU,CAACW,IAAI,CAAE,OAAMX,UAAU,CAACc,IAAI,CAAE,KAAId,UAAU,CAACe,IAAI,CAAE,GAAE;QAAA;MACnG;IACJ,CAAC;EAAA,CAAC;EACFF,MAAM,EAAE,SAAAA,CAAA;IAAA,IAACC,IAAuB,GAAAN,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,CAAC;IAAA,IAAEO,IAAa,GAAAP,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAGI,QAAQ;IAAA,OAAM;MAChEI,GAAG,EAAE;QACDV,KAAK,EAAE,SAAAA,CAAA;UAAA,IAACC,IAAuB,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,CAAC;UAAA,IAAEG,IAAa,GAAAH,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAGI,QAAQ;UAAA,OACvD,MAAKZ,UAAU,CAACO,IAAI,CAAE,KAAIP,UAAU,CAACW,IAAI,CAAE,OAAMX,UAAU,CAACc,IAAI,CAAE,KAAId,UAAU,CAACe,IAAI,CAAE,GAAE;QAAA;MACnG;IACJ,CAAC;EAAA;AACL,CAAC"}
|
@@ -1,24 +1,76 @@
|
|
1
1
|
import type { UnistylesBridge, UnistylesPlugin } from '../types';
|
2
2
|
import type { UnistylesThemes } from '../global';
|
3
3
|
import type { UnistyleRegistry } from './UnistyleRegistry';
|
4
|
+
/**
|
5
|
+
* Utility to interact with the Unistyles during runtime
|
6
|
+
*/
|
4
7
|
export declare class UnistylesRuntime {
|
5
8
|
private unistylesBridge;
|
6
9
|
private unistylesRegistry;
|
7
10
|
constructor(unistylesBridge: UnistylesBridge, unistylesRegistry: UnistyleRegistry);
|
11
|
+
/**
|
12
|
+
* Get the current color scheme
|
13
|
+
* @returns - The current color scheme
|
14
|
+
*/
|
8
15
|
get colorScheme(): import("../types").ColorSchemeName;
|
16
|
+
/**
|
17
|
+
* Get info about adaptive themes
|
18
|
+
* @returns - boolean indicating if the adaptive themes are enabled
|
19
|
+
*/
|
9
20
|
get hasAdaptiveThemes(): boolean;
|
21
|
+
/**
|
22
|
+
* Get the current theme name
|
23
|
+
* @returns - The current theme name
|
24
|
+
*/
|
10
25
|
get themeName(): never;
|
26
|
+
/**
|
27
|
+
* Get the current breakpoint based on device size
|
28
|
+
* @returns - The current breakpoint
|
29
|
+
*/
|
11
30
|
get breakpoint(): keyof import("../global").UnistylesBreakpoints;
|
31
|
+
/**
|
32
|
+
* Get registered breakpoints with UnitylesRegistry
|
33
|
+
* @returns - The registered breakpoints
|
34
|
+
*/
|
12
35
|
get breakpoints(): import("../global").UnistylesBreakpoints;
|
36
|
+
/**
|
37
|
+
* Get the names of currently enabled plugins
|
38
|
+
* @returns - The names of currently enabled plugins
|
39
|
+
*/
|
13
40
|
get enabledPlugins(): string[];
|
41
|
+
/**
|
42
|
+
* Get the screen size
|
43
|
+
* @returns - The screen size { width, height }
|
44
|
+
*/
|
14
45
|
get screen(): {
|
15
46
|
width: number;
|
16
47
|
height: number;
|
17
48
|
};
|
49
|
+
/**
|
50
|
+
* Get the screen orientation
|
51
|
+
* @returns - The screen orientation
|
52
|
+
*/
|
18
53
|
get orientation(): "landscape" | "portrait";
|
54
|
+
/**
|
55
|
+
* Switch to a different theme
|
56
|
+
* @param name - The name of the theme to switch to
|
57
|
+
* @returns - boolean indicating if the theme was switched
|
58
|
+
*/
|
19
59
|
setTheme: (name: keyof UnistylesThemes) => true | undefined;
|
60
|
+
/**
|
61
|
+
* Enable or disable adaptive themes
|
62
|
+
* @param enable - boolean indicating if adaptive themes should be enabled
|
63
|
+
*/
|
20
64
|
setAdaptiveThemes: (enable: boolean) => void;
|
65
|
+
/**
|
66
|
+
* Enable a plugin
|
67
|
+
* @param plugin - Plugin that conforms to UnistylesPlugin interface
|
68
|
+
*/
|
21
69
|
addPlugin: (plugin: UnistylesPlugin) => void;
|
70
|
+
/**
|
71
|
+
* Disable a plugin
|
72
|
+
* @param plugin - Plugin that conforms to UnistylesPlugin interface
|
73
|
+
*/
|
22
74
|
removePlugin: (plugin: UnistylesPlugin) => void;
|
23
75
|
}
|
24
76
|
//# sourceMappingURL=UnistylesRuntime.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"UnistylesRuntime.d.ts","sourceRoot":"","sources":["../../../../src/core/UnistylesRuntime.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAChE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,WAAW,CAAA;AAChD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAE1D,qBAAa,gBAAgB;IACb,OAAO,CAAC,eAAe;IAAmB,OAAO,CAAC,iBAAiB;gBAA3D,eAAe,EAAE,eAAe,EAAU,iBAAiB,EAAE,gBAAgB;IAEjG,IAAW,WAAW,uCAErB;IAED,IAAW,iBAAiB,YAE3B;IAED,IAAW,SAAS,UAEnB;IAED,IAAW,UAAU,mDAEpB;IAED,IAAW,WAAW,6CAErB;IAED,IAAW,cAAc,aAExB;IAED,IAAW,MAAM;;;MAKhB;IAED,IAAW,WAAW,6BAQrB;
|
1
|
+
{"version":3,"file":"UnistylesRuntime.d.ts","sourceRoot":"","sources":["../../../../src/core/UnistylesRuntime.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAChE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,WAAW,CAAA;AAChD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAE1D;;GAEG;AACH,qBAAa,gBAAgB;IACb,OAAO,CAAC,eAAe;IAAmB,OAAO,CAAC,iBAAiB;gBAA3D,eAAe,EAAE,eAAe,EAAU,iBAAiB,EAAE,gBAAgB;IAEjG;;;OAGG;IACH,IAAW,WAAW,uCAErB;IAED;;;OAGG;IACH,IAAW,iBAAiB,YAE3B;IAED;;;OAGG;IACH,IAAW,SAAS,UAEnB;IAED;;;OAGG;IACH,IAAW,UAAU,mDAEpB;IAED;;;OAGG;IACH,IAAW,WAAW,6CAErB;IAED;;;OAGG;IACH,IAAW,cAAc,aAExB;IAED;;;OAGG;IACH,IAAW,MAAM;;;MAKhB;IAED;;;OAGG;IACH,IAAW,WAAW,6BAQrB;IAED;;;;OAIG;IACI,QAAQ,SAAU,MAAM,eAAe,sBAY7C;IAED;;;OAGG;IACI,iBAAiB,WAAY,OAAO,UAE1C;IAED;;;OAGG;IACI,SAAS,WAAY,eAAe,UAE1C;IAED;;;OAGG;IACI,YAAY,WAAY,eAAe,UAE7C;CACJ"}
|
@@ -1,3 +1,8 @@
|
|
1
1
|
import type { StyleSheetWithSuperPowers } from './types';
|
2
|
+
/**
|
3
|
+
* Utility to create a stylesheet with superpowers
|
4
|
+
* Compatible with React Native StyleSheet.create
|
5
|
+
* @param stylesheet - The stylesheet with superpowers to be used
|
6
|
+
*/
|
2
7
|
export declare const createStyleSheet: <S extends StyleSheetWithSuperPowers>(stylesheet: S) => S;
|
3
8
|
//# sourceMappingURL=createStyleSheet.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"createStyleSheet.d.ts","sourceRoot":"","sources":["../../../src/createStyleSheet.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAExD,eAAO,MAAM,gBAAgB,2DAAwE,CAAA"}
|
1
|
+
{"version":3,"file":"createStyleSheet.d.ts","sourceRoot":"","sources":["../../../src/createStyleSheet.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAExD;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,2DAAwE,CAAA"}
|
@@ -5,7 +5,15 @@ import type { UnistylesThemes, UnistylesBreakpoints } from './global';
|
|
5
5
|
import { ScreenOrientation } from './common';
|
6
6
|
import { useStyles } from './useStyles';
|
7
7
|
import { createStyleSheet } from './createStyleSheet';
|
8
|
+
/**
|
9
|
+
* Utility to interact with the Unistyles
|
10
|
+
* (should be called only once)
|
11
|
+
*/
|
8
12
|
declare const UnistylesRegistry: {
|
13
|
+
/**
|
14
|
+
* Register themes to be used in the app
|
15
|
+
* @param themes - Key value pair of themes
|
16
|
+
*/
|
9
17
|
addThemes: (themes: UnistylesThemes) => {
|
10
18
|
addBreakpoints: (breakpoints: UnistylesBreakpoints) => {
|
11
19
|
addThemes: any;
|
@@ -22,6 +30,10 @@ declare const UnistylesRegistry: {
|
|
22
30
|
addThemes: any;
|
23
31
|
};
|
24
32
|
};
|
33
|
+
/**
|
34
|
+
* Register breakpoints to be used in the app
|
35
|
+
* @param breakpoints - Key value pair of breakpoints
|
36
|
+
*/
|
25
37
|
addBreakpoints: (breakpoints: UnistylesBreakpoints) => {
|
26
38
|
addThemes: (themes: UnistylesThemes) => {
|
27
39
|
addBreakpoints: any;
|
@@ -38,6 +50,10 @@ declare const UnistylesRegistry: {
|
|
38
50
|
};
|
39
51
|
};
|
40
52
|
};
|
53
|
+
/**
|
54
|
+
* Register additional config to customize the Unistyles
|
55
|
+
* @param config - Key value pair of config
|
56
|
+
*/
|
41
57
|
addConfig: (config: import("./types").UnistylesConfig) => {
|
42
58
|
addBreakpoints: (breakpoints: UnistylesBreakpoints) => {
|
43
59
|
addThemes: (themes: UnistylesThemes) => {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAA;AAC5B,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AACzC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAC9C,OAAO,KAAK,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAA;AACrE,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAErD,QAAA,MAAM,iBAAiB
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAA;AAC5B,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AACzC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAC9C,OAAO,KAAK,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAA;AACrE,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAErD;;;GAGG;AACH,QAAA,MAAM,iBAAiB;IACnB;;;OAGG;;;;;;;;;;;;;;;;;IAEH;;;OAGG;;;;;;;;;;;;;;;;;IAEH;;;OAGG;;;;;;;;;;;;;;;;;CAEN,CAAA;AAED,QAAA,MAAM,gBAAgB,mCAAoB,CAAA;AAE1C,OAAO,EACH,EAAE,EACF,SAAS,EACT,eAAe,EACf,gBAAgB,EAChB,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EACnB,CAAA;AAED,YAAY,EACR,eAAe,EACf,oBAAoB,EACpB,eAAe,EAClB,CAAA"}
|
@@ -5,6 +5,12 @@ type ParsedStylesheet<ST extends StyleSheetWithSuperPowers> = {
|
|
5
5
|
breakpoint: keyof UnistylesBreakpoints;
|
6
6
|
styles: ReactNativeStyleSheet<ST>;
|
7
7
|
};
|
8
|
+
/**
|
9
|
+
* Hook that enables all the features of Unistyles
|
10
|
+
* @param stylesheet - The stylesheet with superpowers to be used
|
11
|
+
* @param variantsMap - The map of variants to be used
|
12
|
+
* @returns - The theme, current breakpoint and RN compatible styles
|
13
|
+
*/
|
8
14
|
export declare const useStyles: <ST extends StyleSheetWithSuperPowers>(stylesheet?: ST | undefined, variantsMap?: ExtractVariantNames<ST> | undefined) => ParsedStylesheet<ST>;
|
9
15
|
export {};
|
10
16
|
//# sourceMappingURL=useStyles.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"useStyles.d.ts","sourceRoot":"","sources":["../../../src/useStyles.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAA;AACpD,OAAO,KAAK,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,yBAAyB,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAIpH,KAAK,gBAAgB,CAAC,EAAE,SAAS,yBAAyB,IAAI;IAC1D,KAAK,EAAE,cAAc,CAAC;IACtB,UAAU,EAAE,MAAM,oBAAoB,CAAC;IACvC,MAAM,EAAE,qBAAqB,CAAC,EAAE,CAAC,CAAA;CACpC,CAAA;AAED,eAAO,MAAM,SAAS,gJAsCrB,CAAA"}
|
1
|
+
{"version":3,"file":"useStyles.d.ts","sourceRoot":"","sources":["../../../src/useStyles.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAA;AACpD,OAAO,KAAK,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,yBAAyB,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAIpH,KAAK,gBAAgB,CAAC,EAAE,SAAS,yBAAyB,IAAI;IAC1D,KAAK,EAAE,cAAc,CAAC;IACtB,UAAU,EAAE,MAAM,oBAAoB,CAAC;IACvC,MAAM,EAAE,qBAAqB,CAAC,EAAE,CAAC,CAAA;CACpC,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,SAAS,gJAsCrB,CAAA"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"mq.d.ts","sourceRoot":"","sources":["../../../../src/utils/mq.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AACxC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAA;AAGrD,KAAK,OAAO,GAAG,MAAM,oBAAoB,GAAG,MAAM,CAAA;AAElD,KAAK,SAAS,GAAG;IACb,IAAI,EAAE;QACF,KAAK,CAAC,IAAI,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;QACxD,MAAM,CAAC,IAAI,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;KAC5D,CAAC;IACF,KAAK,CAAC,IAAI,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG;QAC7C,GAAG,EAAE;YACD,MAAM,CAAC,IAAI,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;SAC3D,CAAA;KACJ,CAAC;IACF,MAAM,CAAC,IAAI,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG;QAC9C,GAAG,EAAE;YACD,KAAK,CAAC,IAAI,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;SAC1D,CAAA;KACJ,CAAA;CACJ,CAAA;AAcD,eAAO,MAAM,EAAE,EAAE,SAiBhB,CAAA"}
|
1
|
+
{"version":3,"file":"mq.d.ts","sourceRoot":"","sources":["../../../../src/utils/mq.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AACxC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAA;AAGrD,KAAK,OAAO,GAAG,MAAM,oBAAoB,GAAG,MAAM,CAAA;AAElD,KAAK,SAAS,GAAG;IACb,IAAI,EAAE;QACF,KAAK,CAAC,IAAI,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;QACxD,MAAM,CAAC,IAAI,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;KAC5D,CAAC;IACF,KAAK,CAAC,IAAI,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG;QAC7C,GAAG,EAAE;YACD,MAAM,CAAC,IAAI,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;SAC3D,CAAA;KACJ,CAAC;IACF,MAAM,CAAC,IAAI,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG;QAC9C,GAAG,EAAE;YACD,KAAK,CAAC,IAAI,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;SAC1D,CAAA;KACJ,CAAA;CACJ,CAAA;AAcD;;;GAGG;AACH,eAAO,MAAM,EAAE,EAAE,SAiBhB,CAAA"}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "react-native-unistyles",
|
3
|
-
"version": "2.0.0-
|
3
|
+
"version": "2.0.0-rc.1",
|
4
4
|
"description": "Level up your React Native StyleSheet",
|
5
5
|
"scripts": {
|
6
6
|
"test": "jest",
|
@@ -9,7 +9,7 @@
|
|
9
9
|
"lint": "eslint . --ext .ts,.tsx",
|
10
10
|
"prepare": "husky install && bob build",
|
11
11
|
"precommit": "concurrently 'yarn tsc' 'yarn lint' 'yarn test'",
|
12
|
-
"release": "release-it patch --preRelease=
|
12
|
+
"release": "release-it patch --preRelease=rc --npm.tag=next"
|
13
13
|
},
|
14
14
|
"main": "lib/commonjs/index",
|
15
15
|
"module": "lib/module/index",
|
@@ -55,14 +55,14 @@
|
|
55
55
|
"@react-native/normalize-colors": "0.74.1",
|
56
56
|
"@release-it/conventional-changelog": "8.0.1",
|
57
57
|
"@testing-library/react-hooks": "8.0.1",
|
58
|
-
"@types/jest": "29.5.
|
59
|
-
"@types/react": "18.2.
|
60
|
-
"@typescript-eslint/eslint-plugin": "6.
|
61
|
-
"@typescript-eslint/eslint-plugin-tslint": "6.
|
62
|
-
"@typescript-eslint/parser": "6.
|
58
|
+
"@types/jest": "29.5.11",
|
59
|
+
"@types/react": "18.2.43",
|
60
|
+
"@typescript-eslint/eslint-plugin": "6.14.0",
|
61
|
+
"@typescript-eslint/eslint-plugin-tslint": "6.14.0",
|
62
|
+
"@typescript-eslint/parser": "6.14.0",
|
63
63
|
"commitlint": "18.4.3",
|
64
64
|
"concurrently": "8.2.2",
|
65
|
-
"eslint": "8.
|
65
|
+
"eslint": "8.55.0",
|
66
66
|
"eslint-config-codemask": "1.1.7",
|
67
67
|
"eslint-plugin-functional": "6.0.0",
|
68
68
|
"eslint-plugin-import": "2.29.0",
|
@@ -81,8 +81,8 @@
|
|
81
81
|
"react-native-builder-bob": "0.23.2",
|
82
82
|
"react-native-web": "0.19.9",
|
83
83
|
"react-test-renderer": "18.2.0",
|
84
|
-
"release-it": "17.0.
|
85
|
-
"typescript": "5.3.
|
84
|
+
"release-it": "17.0.1",
|
85
|
+
"typescript": "5.3.3"
|
86
86
|
},
|
87
87
|
"peerDependencies": {
|
88
88
|
"@react-native/normalize-colors": "*",
|
@@ -132,7 +132,7 @@
|
|
132
132
|
"publish": true
|
133
133
|
},
|
134
134
|
"github": {
|
135
|
-
"release":
|
135
|
+
"release": true
|
136
136
|
},
|
137
137
|
"plugins": {
|
138
138
|
"@release-it/conventional-changelog": {
|
@@ -3,33 +3,64 @@ import type { UnistylesBridge, UnistylesPlugin } from '../types'
|
|
3
3
|
import type { UnistylesThemes } from '../global'
|
4
4
|
import type { UnistyleRegistry } from './UnistyleRegistry'
|
5
5
|
|
6
|
+
/**
|
7
|
+
* Utility to interact with the Unistyles during runtime
|
8
|
+
*/
|
6
9
|
export class UnistylesRuntime {
|
7
10
|
constructor(private unistylesBridge: UnistylesBridge, private unistylesRegistry: UnistyleRegistry) {}
|
8
11
|
|
12
|
+
/**
|
13
|
+
* Get the current color scheme
|
14
|
+
* @returns - The current color scheme
|
15
|
+
*/
|
9
16
|
public get colorScheme() {
|
10
17
|
return this.unistylesBridge.colorScheme
|
11
18
|
}
|
12
19
|
|
20
|
+
/**
|
21
|
+
* Get info about adaptive themes
|
22
|
+
* @returns - boolean indicating if the adaptive themes are enabled
|
23
|
+
*/
|
13
24
|
public get hasAdaptiveThemes() {
|
14
25
|
return this.unistylesBridge.hasAdaptiveThemes
|
15
26
|
}
|
16
27
|
|
28
|
+
/**
|
29
|
+
* Get the current theme name
|
30
|
+
* @returns - The current theme name
|
31
|
+
*/
|
17
32
|
public get themeName() {
|
18
33
|
return this.unistylesBridge.themeName
|
19
34
|
}
|
20
35
|
|
36
|
+
/**
|
37
|
+
* Get the current breakpoint based on device size
|
38
|
+
* @returns - The current breakpoint
|
39
|
+
*/
|
21
40
|
public get breakpoint() {
|
22
41
|
return this.unistylesBridge.breakpoint
|
23
42
|
}
|
24
43
|
|
44
|
+
/**
|
45
|
+
* Get registered breakpoints with UnitylesRegistry
|
46
|
+
* @returns - The registered breakpoints
|
47
|
+
*/
|
25
48
|
public get breakpoints() {
|
26
49
|
return this.unistylesRegistry.breakpoints
|
27
50
|
}
|
28
51
|
|
52
|
+
/**
|
53
|
+
* Get the names of currently enabled plugins
|
54
|
+
* @returns - The names of currently enabled plugins
|
55
|
+
*/
|
29
56
|
public get enabledPlugins() {
|
30
57
|
return this.unistylesBridge.enabledPlugins
|
31
58
|
}
|
32
59
|
|
60
|
+
/**
|
61
|
+
* Get the screen size
|
62
|
+
* @returns - The screen size { width, height }
|
63
|
+
*/
|
33
64
|
public get screen() {
|
34
65
|
return {
|
35
66
|
width: this.unistylesBridge.screenWidth,
|
@@ -37,6 +68,10 @@ export class UnistylesRuntime {
|
|
37
68
|
}
|
38
69
|
}
|
39
70
|
|
71
|
+
/**
|
72
|
+
* Get the screen orientation
|
73
|
+
* @returns - The screen orientation
|
74
|
+
*/
|
40
75
|
public get orientation() {
|
41
76
|
const { width, height } = this.screen
|
42
77
|
|
@@ -47,6 +82,11 @@ export class UnistylesRuntime {
|
|
47
82
|
return ScreenOrientation.Portrait
|
48
83
|
}
|
49
84
|
|
85
|
+
/**
|
86
|
+
* Switch to a different theme
|
87
|
+
* @param name - The name of the theme to switch to
|
88
|
+
* @returns - boolean indicating if the theme was switched
|
89
|
+
*/
|
50
90
|
public setTheme = (name: keyof UnistylesThemes) => {
|
51
91
|
if (name === this.themeName) {
|
52
92
|
return
|
@@ -61,14 +101,26 @@ export class UnistylesRuntime {
|
|
61
101
|
throw new Error(UnistylesError.ThemeNotRegistered)
|
62
102
|
}
|
63
103
|
|
104
|
+
/**
|
105
|
+
* Enable or disable adaptive themes
|
106
|
+
* @param enable - boolean indicating if adaptive themes should be enabled
|
107
|
+
*/
|
64
108
|
public setAdaptiveThemes = (enable: boolean) => {
|
65
109
|
this.unistylesBridge.useAdaptiveThemes(enable)
|
66
110
|
}
|
67
111
|
|
112
|
+
/**
|
113
|
+
* Enable a plugin
|
114
|
+
* @param plugin - Plugin that conforms to UnistylesPlugin interface
|
115
|
+
*/
|
68
116
|
public addPlugin = (plugin: UnistylesPlugin) => {
|
69
117
|
this.unistylesRegistry.addPlugin(plugin)
|
70
118
|
}
|
71
119
|
|
120
|
+
/**
|
121
|
+
* Disable a plugin
|
122
|
+
* @param plugin - Plugin that conforms to UnistylesPlugin interface
|
123
|
+
*/
|
72
124
|
public removePlugin = (plugin: UnistylesPlugin) => {
|
73
125
|
this.unistylesRegistry.removePlugin(plugin)
|
74
126
|
}
|
package/src/createStyleSheet.ts
CHANGED
@@ -1,3 +1,8 @@
|
|
1
1
|
import type { StyleSheetWithSuperPowers } from './types'
|
2
2
|
|
3
|
+
/**
|
4
|
+
* Utility to create a stylesheet with superpowers
|
5
|
+
* Compatible with React Native StyleSheet.create
|
6
|
+
* @param stylesheet - The stylesheet with superpowers to be used
|
7
|
+
*/
|
3
8
|
export const createStyleSheet = <S extends StyleSheetWithSuperPowers>(stylesheet: S): S => stylesheet
|
package/src/index.ts
CHANGED
@@ -7,9 +7,25 @@ import { ScreenOrientation } from './common'
|
|
7
7
|
import { useStyles } from './useStyles'
|
8
8
|
import { createStyleSheet } from './createStyleSheet'
|
9
9
|
|
10
|
+
/**
|
11
|
+
* Utility to interact with the Unistyles
|
12
|
+
* (should be called only once)
|
13
|
+
*/
|
10
14
|
const UnistylesRegistry = {
|
15
|
+
/**
|
16
|
+
* Register themes to be used in the app
|
17
|
+
* @param themes - Key value pair of themes
|
18
|
+
*/
|
11
19
|
addThemes: unistyles.registry.addThemes,
|
20
|
+
/**
|
21
|
+
* Register breakpoints to be used in the app
|
22
|
+
* @param breakpoints - Key value pair of breakpoints
|
23
|
+
*/
|
12
24
|
addBreakpoints: unistyles.registry.addBreakpoints,
|
25
|
+
/**
|
26
|
+
* Register additional config to customize the Unistyles
|
27
|
+
* @param config - Key value pair of config
|
28
|
+
*/
|
13
29
|
addConfig: unistyles.registry.addConfig
|
14
30
|
}
|
15
31
|
|
package/src/useStyles.ts
CHANGED
@@ -13,6 +13,12 @@ type ParsedStylesheet<ST extends StyleSheetWithSuperPowers> = {
|
|
13
13
|
styles: ReactNativeStyleSheet<ST>
|
14
14
|
}
|
15
15
|
|
16
|
+
/**
|
17
|
+
* Hook that enables all the features of Unistyles
|
18
|
+
* @param stylesheet - The stylesheet with superpowers to be used
|
19
|
+
* @param variantsMap - The map of variants to be used
|
20
|
+
* @returns - The theme, current breakpoint and RN compatible styles
|
21
|
+
*/
|
16
22
|
export const useStyles = <ST extends StyleSheetWithSuperPowers>(
|
17
23
|
stylesheet?: ST,
|
18
24
|
variantsMap?: ExtractVariantNames<typeof stylesheet>
|
package/src/utils/mq.ts
CHANGED
@@ -33,6 +33,10 @@ const getMQValue = (value: Nullable<MQValue>) => {
|
|
33
33
|
return unistyles.registry.breakpoints[value] ?? 0
|
34
34
|
}
|
35
35
|
|
36
|
+
/**
|
37
|
+
* Utility to create cross-platform media queries
|
38
|
+
* @returns - JavaScript symbol to be used in your stylesheet
|
39
|
+
*/
|
36
40
|
export const mq: MQHandler = {
|
37
41
|
only: {
|
38
42
|
width: (wMin: Nullable<MQValue> = 0, wMax: MQValue = Infinity) => (`:w[${getMQValue(wMin)}, ${getMQValue(wMax)}]` as unknown as symbol),
|