react-native-unistyles 2.0.0-beta.7 → 2.0.0-rc.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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
|

|
10
4
|
[](https://www.npmjs.com/package/react-native-unistyles)
|
11
5
|

|
12
6
|
[](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),
|