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

Sign up to get free protection for your applications and to get access to all the features.
Files changed (193) hide show
  1. package/README.md +4 -4
  2. package/ios/UnistylesModule.h +10 -0
  3. package/ios/UnistylesModule.mm +108 -0
  4. package/ios/UnistylesRuntime.h +30 -0
  5. package/ios/UnistylesRuntime.mm +191 -0
  6. package/lib/commonjs/UnistyleRegistry.js +37 -0
  7. package/lib/commonjs/UnistyleRegistry.js.map +1 -0
  8. package/lib/commonjs/Unistyles.js +36 -0
  9. package/lib/commonjs/Unistyles.js.map +1 -0
  10. package/lib/commonjs/UnistylesEngine.js +22 -0
  11. package/lib/commonjs/UnistylesEngine.js.map +1 -0
  12. package/lib/commonjs/UnistylesModule.js +9 -0
  13. package/lib/commonjs/UnistylesModule.js.map +1 -0
  14. package/lib/commonjs/UnistylesRuntime.js +52 -0
  15. package/lib/commonjs/UnistylesRuntime.js.map +1 -0
  16. package/lib/commonjs/createStyleSheet.js +14 -0
  17. package/lib/commonjs/createStyleSheet.js.map +1 -0
  18. package/lib/commonjs/global.js +2 -0
  19. package/lib/commonjs/global.js.map +1 -0
  20. package/lib/commonjs/hooks/useDimensions.web.js +3 -2
  21. package/lib/commonjs/hooks/useDimensions.web.js.map +1 -1
  22. package/lib/commonjs/index.js +33 -6
  23. package/lib/commonjs/index.js.map +1 -1
  24. package/lib/commonjs/types/cxx.js +23 -0
  25. package/lib/commonjs/types/cxx.js.map +1 -0
  26. package/lib/commonjs/types/index.js +26 -0
  27. package/lib/commonjs/types/index.js.map +1 -1
  28. package/lib/commonjs/types/normalizer.js +6 -0
  29. package/lib/commonjs/types/normalizer.js.map +1 -0
  30. package/lib/commonjs/useInitialTheme.js +13 -0
  31. package/lib/commonjs/useInitialTheme.js.map +1 -0
  32. package/lib/commonjs/useStyles.js +48 -0
  33. package/lib/commonjs/useStyles.js.map +1 -0
  34. package/lib/commonjs/useUnistyles.js +59 -0
  35. package/lib/commonjs/useUnistyles.js.map +1 -0
  36. package/lib/commonjs/utils/breakpoints.js +4 -2
  37. package/lib/commonjs/utils/breakpoints.js.map +1 -1
  38. package/lib/commonjs/utils/common.js +3 -3
  39. package/lib/commonjs/utils/common.js.map +1 -1
  40. package/lib/commonjs/utils/index.js +34 -0
  41. package/lib/commonjs/utils/index.js.map +1 -1
  42. package/lib/commonjs/utils/module.d.js +2 -0
  43. package/lib/commonjs/utils/module.d.js.map +1 -0
  44. package/lib/commonjs/utils/normalizeStyles.web.js +13 -13
  45. package/lib/commonjs/utils/normalizeStyles.web.js.map +1 -1
  46. package/lib/commonjs/utils/normalizer.js +89 -0
  47. package/lib/commonjs/utils/normalizer.js.map +1 -0
  48. package/lib/commonjs/utils/styles.js +7 -7
  49. package/lib/commonjs/utils/styles.js.map +1 -1
  50. package/lib/module/UnistyleRegistry.js +30 -0
  51. package/lib/module/UnistyleRegistry.js.map +1 -0
  52. package/lib/module/Unistyles.js +30 -0
  53. package/lib/module/Unistyles.js.map +1 -0
  54. package/lib/module/UnistylesEngine.js +15 -0
  55. package/lib/module/UnistylesEngine.js.map +1 -0
  56. package/lib/module/UnistylesModule.js +3 -0
  57. package/lib/module/UnistylesModule.js.map +1 -0
  58. package/lib/module/UnistylesRuntime.js +45 -0
  59. package/lib/module/UnistylesRuntime.js.map +1 -0
  60. package/lib/module/createStyleSheet.js +7 -0
  61. package/lib/module/createStyleSheet.js.map +1 -0
  62. package/lib/module/global.js +2 -0
  63. package/lib/module/global.js.map +1 -0
  64. package/lib/module/hooks/useDimensions.web.js +3 -2
  65. package/lib/module/hooks/useDimensions.web.js.map +1 -1
  66. package/lib/module/index.js +18 -2
  67. package/lib/module/index.js.map +1 -1
  68. package/lib/module/types/cxx.js +17 -0
  69. package/lib/module/types/cxx.js.map +1 -0
  70. package/lib/module/types/index.js +2 -1
  71. package/lib/module/types/index.js.map +1 -1
  72. package/lib/module/types/normalizer.js +2 -0
  73. package/lib/module/types/normalizer.js.map +1 -0
  74. package/lib/module/useInitialTheme.js +6 -0
  75. package/lib/module/useInitialTheme.js.map +1 -0
  76. package/lib/module/useStyles.js +42 -0
  77. package/lib/module/useStyles.js.map +1 -0
  78. package/lib/module/useUnistyles.js +52 -0
  79. package/lib/module/useUnistyles.js.map +1 -0
  80. package/lib/module/utils/breakpoints.js +4 -3
  81. package/lib/module/utils/breakpoints.js.map +1 -1
  82. package/lib/module/utils/common.js +2 -1
  83. package/lib/module/utils/common.js.map +1 -1
  84. package/lib/module/utils/index.js +2 -0
  85. package/lib/module/utils/index.js.map +1 -1
  86. package/lib/module/utils/module.d.js +2 -0
  87. package/lib/module/utils/module.d.js.map +1 -0
  88. package/lib/module/utils/normalizeStyles.web.js +13 -13
  89. package/lib/module/utils/normalizeStyles.web.js.map +1 -1
  90. package/lib/module/utils/normalizer.js +79 -0
  91. package/lib/module/utils/normalizer.js.map +1 -0
  92. package/lib/module/utils/styles.js +7 -8
  93. package/lib/module/utils/styles.js.map +1 -1
  94. package/lib/typescript/examples/expo/src/App.d.ts +3 -0
  95. package/lib/typescript/examples/expo/src/App.d.ts.map +1 -0
  96. package/lib/typescript/examples/expo/src/examples/Cxx.d.ts +3 -0
  97. package/lib/typescript/examples/expo/src/examples/Cxx.d.ts.map +1 -0
  98. package/lib/typescript/examples/expo/src/examples/index.d.ts +2 -0
  99. package/lib/typescript/examples/expo/src/examples/index.d.ts.map +1 -0
  100. package/lib/typescript/examples/expo/src/index.d.ts +2 -0
  101. package/lib/typescript/examples/expo/src/index.d.ts.map +1 -0
  102. package/lib/typescript/examples/expo/src/styles/breakpoints.d.ts +8 -0
  103. package/lib/typescript/examples/expo/src/styles/breakpoints.d.ts.map +1 -0
  104. package/lib/typescript/examples/expo/src/styles/index.d.ts +16 -0
  105. package/lib/typescript/examples/expo/src/styles/index.d.ts.map +1 -0
  106. package/lib/typescript/examples/expo/src/styles/theme.d.ts +40 -0
  107. package/lib/typescript/examples/expo/src/styles/theme.d.ts.map +1 -0
  108. package/lib/typescript/src/UnistyleRegistry.d.ts +15 -0
  109. package/lib/typescript/src/UnistyleRegistry.d.ts.map +1 -0
  110. package/lib/typescript/src/Unistyles.d.ts +16 -0
  111. package/lib/typescript/src/Unistyles.d.ts.map +1 -0
  112. package/lib/typescript/src/UnistylesEngine.d.ts +8 -0
  113. package/lib/typescript/src/UnistylesEngine.d.ts.map +1 -0
  114. package/lib/typescript/src/UnistylesModule.d.ts +6 -0
  115. package/lib/typescript/src/UnistylesModule.d.ts.map +1 -0
  116. package/lib/typescript/src/UnistylesRuntime.d.ts +56 -0
  117. package/lib/typescript/src/UnistylesRuntime.d.ts.map +1 -0
  118. package/lib/typescript/src/createStyleSheet.d.ts +6 -0
  119. package/lib/typescript/src/createStyleSheet.d.ts.map +1 -0
  120. package/lib/typescript/src/global.d.ts +5 -0
  121. package/lib/typescript/src/global.d.ts.map +1 -0
  122. package/lib/typescript/src/hooks/useDimensions.web.d.ts.map +1 -1
  123. package/lib/typescript/src/index.d.ts +14 -2
  124. package/lib/typescript/src/index.d.ts.map +1 -1
  125. package/lib/typescript/src/types/breakpoints.d.ts +6 -7
  126. package/lib/typescript/src/types/breakpoints.d.ts.map +1 -1
  127. package/lib/typescript/src/types/core.d.ts +4 -4
  128. package/lib/typescript/src/types/core.d.ts.map +1 -1
  129. package/lib/typescript/src/types/cxx.d.ts +50 -0
  130. package/lib/typescript/src/types/cxx.d.ts.map +1 -0
  131. package/lib/typescript/src/types/index.d.ts +4 -1
  132. package/lib/typescript/src/types/index.d.ts.map +1 -1
  133. package/lib/typescript/src/types/normalizer.d.ts +20 -0
  134. package/lib/typescript/src/types/normalizer.d.ts.map +1 -0
  135. package/lib/typescript/src/useInitialTheme.d.ts +3 -0
  136. package/lib/typescript/src/useInitialTheme.d.ts.map +1 -0
  137. package/lib/typescript/src/useStyles.d.ts +46 -0
  138. package/lib/typescript/src/useStyles.d.ts.map +1 -0
  139. package/lib/typescript/src/useUnistyles.d.ts +45 -0
  140. package/lib/typescript/src/useUnistyles.d.ts.map +1 -0
  141. package/lib/typescript/src/utils/breakpoints.d.ts +5 -4
  142. package/lib/typescript/src/utils/breakpoints.d.ts.map +1 -1
  143. package/lib/typescript/src/utils/common.d.ts +2 -1
  144. package/lib/typescript/src/utils/common.d.ts.map +1 -1
  145. package/lib/typescript/src/utils/index.d.ts +2 -0
  146. package/lib/typescript/src/utils/index.d.ts.map +1 -1
  147. package/lib/typescript/src/utils/normalizeStyles.web.d.ts +4 -1
  148. package/lib/typescript/src/utils/normalizeStyles.web.d.ts.map +1 -1
  149. package/lib/typescript/src/utils/normalizer.d.ts +11 -0
  150. package/lib/typescript/src/utils/normalizer.d.ts.map +1 -0
  151. package/lib/typescript/src/utils/styles.d.ts +4 -3
  152. package/lib/typescript/src/utils/styles.d.ts.map +1 -1
  153. package/package.json +13 -3
  154. package/react-native-unistyles.podspec +21 -0
  155. package/src/UnistyleRegistry.ts +39 -0
  156. package/src/Unistyles.ts +41 -0
  157. package/src/UnistylesEngine.ts +15 -0
  158. package/src/UnistylesModule.ts +7 -0
  159. package/src/UnistylesRuntime.ts +58 -0
  160. package/src/createStyleSheet.ts +12 -0
  161. package/src/global.ts +2 -0
  162. package/src/hooks/useDimensions.web.ts +3 -2
  163. package/src/index.ts +30 -2
  164. package/src/types/breakpoints.ts +9 -11
  165. package/src/types/core.ts +6 -6
  166. package/src/types/cxx.ts +61 -0
  167. package/src/types/index.ts +4 -3
  168. package/src/types/normalizer.ts +29 -0
  169. package/src/useInitialTheme.ts +7 -0
  170. package/src/useStyles.ts +49 -0
  171. package/src/useUnistyles.ts +67 -0
  172. package/src/utils/breakpoints.ts +16 -14
  173. package/src/utils/common.ts +2 -1
  174. package/src/utils/index.ts +2 -0
  175. package/src/utils/module.d.ts +3 -0
  176. package/src/utils/normalizeStyles.web.ts +21 -42
  177. package/src/utils/normalizer.ts +99 -0
  178. package/src/utils/styles.ts +17 -19
  179. package/lib/commonjs/UnistylesTheme.js +0 -21
  180. package/lib/commonjs/UnistylesTheme.js.map +0 -1
  181. package/lib/commonjs/createUnistyles.js +0 -57
  182. package/lib/commonjs/createUnistyles.js.map +0 -1
  183. package/lib/module/UnistylesTheme.js +0 -12
  184. package/lib/module/UnistylesTheme.js.map +0 -1
  185. package/lib/module/createUnistyles.js +0 -50
  186. package/lib/module/createUnistyles.js.map +0 -1
  187. package/lib/typescript/src/UnistylesTheme.d.ts +0 -9
  188. package/lib/typescript/src/UnistylesTheme.d.ts.map +0 -1
  189. package/lib/typescript/src/createUnistyles.d.ts +0 -10
  190. package/lib/typescript/src/createUnistyles.d.ts.map +0 -1
  191. package/src/UnistylesTheme.tsx +0 -17
  192. package/src/__tests__/createUnistyles.spec.tsx +0 -192
  193. package/src/createUnistyles.ts +0 -70
@@ -1 +0,0 @@
1
- {"version":3,"names":["_react","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","UnistylesContext","exports","createContext","UnistylesTheme","_ref","theme","children","createElement","Provider","value"],"sourceRoot":"../../src","sources":["UnistylesTheme.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAA4C,SAAAC,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAH,wBAAAG,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAc,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAOrC,MAAMY,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,gBAAG,IAAAE,oBAAa,EAAC,CAAC,CAAC,CAAC;AAE1C,MAAMC,cAA4D,GAAGC,IAAA;EAAA,IAAC;IACzEC,KAAK;IACLC;EACJ,CAAC,GAAAF,IAAA;EAAA,oBACG5B,MAAA,CAAAS,OAAA,CAAAsB,aAAA,CAACP,gBAAgB,CAACQ,QAAQ;IAACC,KAAK,EAAEJ;EAAM,GACnCC,QACsB,CAAC;AAAA,CAC/B;AAAAL,OAAA,CAAAE,cAAA,GAAAA,cAAA"}
@@ -1,57 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.createUnistyles = void 0;
7
- var _react = require("react");
8
- var _reactNative = require("react-native");
9
- var _UnistylesTheme = require("./UnistylesTheme");
10
- var _hooks = require("./hooks");
11
- var _utils = require("./utils");
12
- const createUnistyles = breakpoints => {
13
- const sortedBreakpoints = (0, _utils.sortAndValidateBreakpoints)(breakpoints);
14
- const sortedBreakpointEntries = Object.entries(sortedBreakpoints);
15
- return {
16
- createStyleSheet: styles => {
17
- if (typeof styles === 'function') {
18
- return styles;
19
- }
20
- return styles;
21
- },
22
- useStyles: stylesheet => {
23
- const theme = (0, _react.useContext)(_UnistylesTheme.UnistylesContext);
24
- const screenSize = (0, _hooks.useDimensions)();
25
- const breakpoint = (0, _utils.getBreakpointFromScreenWidth)(screenSize.width, sortedBreakpointEntries);
26
- if (!stylesheet) {
27
- return {
28
- theme,
29
- breakpoint,
30
- styles: {}
31
- };
32
- }
33
- const parsedStyles = (0, _react.useMemo)(() => typeof stylesheet === 'function' ? stylesheet(theme) : stylesheet, [theme, stylesheet]);
34
- const dynamicStyleSheet = (0, _react.useMemo)(() => Object.entries(parsedStyles).reduce((acc, _ref) => {
35
- let [key, value] = _ref;
36
- const style = value;
37
- if (typeof value === 'function') {
38
- return {
39
- ...acc,
40
- [key]: (0, _utils.proxifyFunction)(value, breakpoint, screenSize, sortedBreakpointEntries)
41
- };
42
- }
43
- return _reactNative.StyleSheet.create({
44
- ...acc,
45
- [key]: (0, _utils.parseStyle)(style, breakpoint, screenSize, sortedBreakpointEntries)
46
- });
47
- }, {}), [breakpoint, screenSize, parsedStyles]);
48
- return {
49
- theme,
50
- breakpoint,
51
- styles: dynamicStyleSheet
52
- };
53
- }
54
- };
55
- };
56
- exports.createUnistyles = createUnistyles;
57
- //# sourceMappingURL=createUnistyles.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["_react","require","_reactNative","_UnistylesTheme","_hooks","_utils","createUnistyles","breakpoints","sortedBreakpoints","sortAndValidateBreakpoints","sortedBreakpointEntries","Object","entries","createStyleSheet","styles","useStyles","stylesheet","theme","useContext","UnistylesContext","screenSize","useDimensions","breakpoint","getBreakpointFromScreenWidth","width","parsedStyles","useMemo","dynamicStyleSheet","reduce","acc","_ref","key","value","style","proxifyFunction","StyleSheet","create","parseStyle","exports"],"sourceRoot":"../../src","sources":["createUnistyles.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AASA,IAAAE,eAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA;AAEO,MAAMK,eAAe,GAAmCC,WAAc,IAAK;EAC9E,MAAMC,iBAAiB,GAAG,IAAAC,iCAA0B,EAACF,WAAW,CAAC;EACjE,MAAMG,uBAAuB,GAAGC,MAAM,CACjCC,OAAO,CAACJ,iBAAiB,CAA+B;EAE7D,OAAO;IACHK,gBAAgB,EAAyCC,MAAqF,IAAY;MACtJ,IAAI,OAAOA,MAAM,KAAK,UAAU,EAAE;QAC9B,OAAOA,MAAM;MACjB;MAEA,OAAOA,MAAM;IACjB,CAAC;IACDC,SAAS,EAAwCC,UAA4C,IAAK;MAC9F,MAAMC,KAAK,GAAG,IAAAC,iBAAU,EAACC,gCAAgB,CAAM;MAC/C,MAAMC,UAAU,GAAG,IAAAC,oBAAa,EAAC,CAAC;MAClC,MAAMC,UAAU,GAAG,IAAAC,mCAA4B,EAAIH,UAAU,CAACI,KAAK,EAAEd,uBAAuB,CAAC;MAE7F,IAAI,CAACM,UAAU,EAAE;QACb,OAAO;UACHC,KAAK;UACLK,UAAU;UACVR,MAAM,EAAE,CAAC;QACb,CAAC;MACL;MAEA,MAAMW,YAAY,GAAG,IAAAC,cAAO,EAAC,MAAM,OAAOV,UAAU,KAAK,UAAU,GAC7DA,UAAU,CAACC,KAAK,CAAC,GACjBD,UAAU,EAAE,CAACC,KAAK,EAAED,UAAU,CAAC,CAAC;MAEtC,MAAMW,iBAAiB,GAAG,IAAAD,cAAO,EAAC,MAAMf,MAAM,CACzCC,OAAO,CAACa,YAAY,CAAC,CACrBG,MAAM,CAAC,CAACC,GAAG,EAAAC,IAAA,KAAmB;QAAA,IAAjB,CAACC,GAAG,EAAEC,KAAK,CAAC,GAAAF,IAAA;QACtB,MAAMG,KAAK,GAAGD,KAAiC;QAE/C,IAAI,OAAOA,KAAK,KAAK,UAAU,EAAE;UAC7B,OAAO;YACH,GAAGH,GAAG;YACN,CAACE,GAAG,GAAG,IAAAG,sBAAe,EAAIF,KAAK,EAAEV,UAAU,EAAEF,UAAU,EAAEV,uBAAuB;UACpF,CAAC;QACL;QAEA,OAAOyB,uBAAU,CAACC,MAAM,CAAC;UACrB,GAAGP,GAAG;UACN,CAACE,GAAG,GAAG,IAAAM,iBAAU,EAAQJ,KAAK,EAAEX,UAAU,EAAEF,UAAU,EAAEV,uBAAuB;QACnF,CAAC,CAAC;MACN,CAAC,EAAE,CAAC,CAAO,CAAC,EAAE,CAACY,UAAU,EAAEF,UAAU,EAAEK,YAAY,CAAC,CAAC;MAEzD,OAAO;QACHR,KAAK;QACLK,UAAU;QACVR,MAAM,EAAEa;MACZ,CAAC;IACL;EACJ,CAAC;AACL,CAAC;AAAAW,OAAA,CAAAhC,eAAA,GAAAA,eAAA"}
@@ -1,12 +0,0 @@
1
- import React, { createContext } from 'react';
2
- export const UnistylesContext = /*#__PURE__*/createContext({});
3
- export const UnistylesTheme = _ref => {
4
- let {
5
- theme,
6
- children
7
- } = _ref;
8
- return /*#__PURE__*/React.createElement(UnistylesContext.Provider, {
9
- value: theme
10
- }, children);
11
- };
12
- //# sourceMappingURL=UnistylesTheme.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["React","createContext","UnistylesContext","UnistylesTheme","_ref","theme","children","createElement","Provider","value"],"sourceRoot":"../../src","sources":["UnistylesTheme.tsx"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,aAAa,QAAQ,OAAO;AAO5C,OAAO,MAAMC,gBAAgB,gBAAGD,aAAa,CAAC,CAAC,CAAC,CAAC;AAEjD,OAAO,MAAME,cAA4D,GAAGC,IAAA;EAAA,IAAC;IACzEC,KAAK;IACLC;EACJ,CAAC,GAAAF,IAAA;EAAA,oBACGJ,KAAA,CAAAO,aAAA,CAACL,gBAAgB,CAACM,QAAQ;IAACC,KAAK,EAAEJ;EAAM,GACnCC,QACsB,CAAC;AAAA,CAC/B"}
@@ -1,50 +0,0 @@
1
- import { useContext, useMemo } from 'react';
2
- import { StyleSheet } from 'react-native';
3
- import { UnistylesContext } from './UnistylesTheme';
4
- import { useDimensions } from './hooks';
5
- import { getBreakpointFromScreenWidth, proxifyFunction, parseStyle, sortAndValidateBreakpoints } from './utils';
6
- export const createUnistyles = breakpoints => {
7
- const sortedBreakpoints = sortAndValidateBreakpoints(breakpoints);
8
- const sortedBreakpointEntries = Object.entries(sortedBreakpoints);
9
- return {
10
- createStyleSheet: styles => {
11
- if (typeof styles === 'function') {
12
- return styles;
13
- }
14
- return styles;
15
- },
16
- useStyles: stylesheet => {
17
- const theme = useContext(UnistylesContext);
18
- const screenSize = useDimensions();
19
- const breakpoint = getBreakpointFromScreenWidth(screenSize.width, sortedBreakpointEntries);
20
- if (!stylesheet) {
21
- return {
22
- theme,
23
- breakpoint,
24
- styles: {}
25
- };
26
- }
27
- const parsedStyles = useMemo(() => typeof stylesheet === 'function' ? stylesheet(theme) : stylesheet, [theme, stylesheet]);
28
- const dynamicStyleSheet = useMemo(() => Object.entries(parsedStyles).reduce((acc, _ref) => {
29
- let [key, value] = _ref;
30
- const style = value;
31
- if (typeof value === 'function') {
32
- return {
33
- ...acc,
34
- [key]: proxifyFunction(value, breakpoint, screenSize, sortedBreakpointEntries)
35
- };
36
- }
37
- return StyleSheet.create({
38
- ...acc,
39
- [key]: parseStyle(style, breakpoint, screenSize, sortedBreakpointEntries)
40
- });
41
- }, {}), [breakpoint, screenSize, parsedStyles]);
42
- return {
43
- theme,
44
- breakpoint,
45
- styles: dynamicStyleSheet
46
- };
47
- }
48
- };
49
- };
50
- //# sourceMappingURL=createUnistyles.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["useContext","useMemo","StyleSheet","UnistylesContext","useDimensions","getBreakpointFromScreenWidth","proxifyFunction","parseStyle","sortAndValidateBreakpoints","createUnistyles","breakpoints","sortedBreakpoints","sortedBreakpointEntries","Object","entries","createStyleSheet","styles","useStyles","stylesheet","theme","screenSize","breakpoint","width","parsedStyles","dynamicStyleSheet","reduce","acc","_ref","key","value","style","create"],"sourceRoot":"../../src","sources":["createUnistyles.ts"],"mappings":"AAAA,SAASA,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAC3C,SAASC,UAAU,QAAQ,cAAc;AASzC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,SAASC,aAAa,QAAQ,SAAS;AACvC,SAASC,4BAA4B,EAAEC,eAAe,EAAEC,UAAU,EAAEC,0BAA0B,QAAQ,SAAS;AAE/G,OAAO,MAAMC,eAAe,GAAmCC,WAAc,IAAK;EAC9E,MAAMC,iBAAiB,GAAGH,0BAA0B,CAACE,WAAW,CAAC;EACjE,MAAME,uBAAuB,GAAGC,MAAM,CACjCC,OAAO,CAACH,iBAAiB,CAA+B;EAE7D,OAAO;IACHI,gBAAgB,EAAyCC,MAAqF,IAAY;MACtJ,IAAI,OAAOA,MAAM,KAAK,UAAU,EAAE;QAC9B,OAAOA,MAAM;MACjB;MAEA,OAAOA,MAAM;IACjB,CAAC;IACDC,SAAS,EAAwCC,UAA4C,IAAK;MAC9F,MAAMC,KAAK,GAAGnB,UAAU,CAACG,gBAAgB,CAAM;MAC/C,MAAMiB,UAAU,GAAGhB,aAAa,CAAC,CAAC;MAClC,MAAMiB,UAAU,GAAGhB,4BAA4B,CAAIe,UAAU,CAACE,KAAK,EAAEV,uBAAuB,CAAC;MAE7F,IAAI,CAACM,UAAU,EAAE;QACb,OAAO;UACHC,KAAK;UACLE,UAAU;UACVL,MAAM,EAAE,CAAC;QACb,CAAC;MACL;MAEA,MAAMO,YAAY,GAAGtB,OAAO,CAAC,MAAM,OAAOiB,UAAU,KAAK,UAAU,GAC7DA,UAAU,CAACC,KAAK,CAAC,GACjBD,UAAU,EAAE,CAACC,KAAK,EAAED,UAAU,CAAC,CAAC;MAEtC,MAAMM,iBAAiB,GAAGvB,OAAO,CAAC,MAAMY,MAAM,CACzCC,OAAO,CAACS,YAAY,CAAC,CACrBE,MAAM,CAAC,CAACC,GAAG,EAAAC,IAAA,KAAmB;QAAA,IAAjB,CAACC,GAAG,EAAEC,KAAK,CAAC,GAAAF,IAAA;QACtB,MAAMG,KAAK,GAAGD,KAAiC;QAE/C,IAAI,OAAOA,KAAK,KAAK,UAAU,EAAE;UAC7B,OAAO;YACH,GAAGH,GAAG;YACN,CAACE,GAAG,GAAGtB,eAAe,CAAIuB,KAAK,EAAER,UAAU,EAAED,UAAU,EAAER,uBAAuB;UACpF,CAAC;QACL;QAEA,OAAOV,UAAU,CAAC6B,MAAM,CAAC;UACrB,GAAGL,GAAG;UACN,CAACE,GAAG,GAAGrB,UAAU,CAAQuB,KAAK,EAAET,UAAU,EAAED,UAAU,EAAER,uBAAuB;QACnF,CAAC,CAAC;MACN,CAAC,EAAE,CAAC,CAAO,CAAC,EAAE,CAACS,UAAU,EAAED,UAAU,EAAEG,YAAY,CAAC,CAAC;MAEzD,OAAO;QACHJ,KAAK;QACLE,UAAU;QACVL,MAAM,EAAEQ;MACZ,CAAC;IACL;EACJ,CAAC;AACL,CAAC"}
@@ -1,9 +0,0 @@
1
- import React from 'react';
2
- import type { PropsWithChildren } from 'react';
3
- interface UnistylesThemeProps extends PropsWithChildren {
4
- theme: any;
5
- }
6
- export declare const UnistylesContext: React.Context<{}>;
7
- export declare const UnistylesTheme: React.FunctionComponent<UnistylesThemeProps>;
8
- export {};
9
- //# sourceMappingURL=UnistylesTheme.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"UnistylesTheme.d.ts","sourceRoot":"","sources":["../../../src/UnistylesTheme.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAC5C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAE9C,UAAU,mBAAoB,SAAQ,iBAAiB;IACnD,KAAK,EAAE,GAAG,CAAA;CACb;AAED,eAAO,MAAM,gBAAgB,mBAAoB,CAAA;AAEjD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,iBAAiB,CAAC,mBAAmB,CAOvE,CAAA"}
@@ -1,10 +0,0 @@
1
- import type { Breakpoints, CreateStylesFactory, CustomNamedStyles, ExtractBreakpoints, RemoveKeysWithPrefix } from './types';
2
- export declare const createUnistyles: <B extends Breakpoints, T = {}>(breakpoints: B) => {
3
- createStyleSheet: <S extends CustomNamedStyles<S, B>, X>(styles: S | X | CustomNamedStyles<S, B> | ((theme: T) => X | CustomNamedStyles<X, B>)) => S | X;
4
- useStyles: <ST extends CustomNamedStyles<ST, B>>(stylesheet?: ST | CreateStylesFactory<ST, T> | undefined) => {
5
- theme: T;
6
- breakpoint: keyof B & string;
7
- styles: ExtractBreakpoints<RemoveKeysWithPrefix<ST, B>, B>;
8
- };
9
- };
10
- //# sourceMappingURL=createUnistyles.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"createUnistyles.d.ts","sourceRoot":"","sources":["../../../src/createUnistyles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACR,WAAW,EACX,mBAAmB,EACnB,iBAAiB,EACjB,kBAAkB,EAClB,oBAAoB,EAEvB,MAAM,SAAS,CAAA;AAKhB,eAAO,MAAM,eAAe;;;;;;;CAuD3B,CAAA"}
@@ -1,17 +0,0 @@
1
- import React, { createContext } from 'react'
2
- import type { PropsWithChildren } from 'react'
3
-
4
- interface UnistylesThemeProps extends PropsWithChildren {
5
- theme: any
6
- }
7
-
8
- export const UnistylesContext = createContext({})
9
-
10
- export const UnistylesTheme: React.FunctionComponent<UnistylesThemeProps> = ({
11
- theme,
12
- children
13
- }) => (
14
- <UnistylesContext.Provider value={theme}>
15
- {children}
16
- </UnistylesContext.Provider>
17
- )
@@ -1,192 +0,0 @@
1
- import React from 'react'
2
- import { StyleSheet } from 'react-native'
3
- import type { ViewStyle } from 'react-native'
4
- import { renderHook } from '@testing-library/react-hooks'
5
- import { createUnistyles } from '../createUnistyles'
6
- import { UnistylesTheme } from '../UnistylesTheme'
7
- import type { CustomNamedStyles } from '../types'
8
-
9
- jest.mock('../hooks', () => ({
10
- useDimensions: jest.fn(() => ({
11
- width: 500,
12
- height: 1000
13
- }))
14
- }))
15
-
16
- describe('createUnistyles', () => {
17
- describe('createStyleSheet', () => {
18
- it('should work exactly the same like StyleSheet.create', () => {
19
- const breakpoints = {
20
- xs: 0
21
- }
22
- const { createStyleSheet } = createUnistyles(breakpoints)
23
-
24
- const styles = {
25
- container: {
26
- flex: 1,
27
- justifyContent: 'center',
28
- alignItems: 'center'
29
- },
30
- text: {
31
- fontWeight: 'bold',
32
- fontSize: 32
33
- }
34
- } as const
35
-
36
- expect(createStyleSheet(styles)).toEqual(StyleSheet.create(styles))
37
- })
38
-
39
- it('should inject the theme to the createStyleSheet', () => {
40
- const theme = {
41
- colors: {
42
- barbie: '#ff9ff3',
43
- oak: '#1dd1a1',
44
- sky: '#48dbfb',
45
- fog: '#c8d6e5',
46
- aloes: '#00d2d3'
47
- }
48
- }
49
- const breakpoints = {
50
- xs: 0
51
- }
52
- const { useStyles, createStyleSheet } = createUnistyles<typeof breakpoints, typeof theme>(breakpoints)
53
- const stylesheet = createStyleSheet(theme => ({
54
- container: {
55
- backgroundColor: theme.colors.barbie
56
- }
57
- }))
58
- const { result } = renderHook(() => useStyles(stylesheet), {
59
- // @ts-ignore
60
- wrapper: ({ children }) => (
61
- <UnistylesTheme theme={theme}>
62
- {children}
63
- </UnistylesTheme>
64
- )
65
- })
66
-
67
- expect(result.current.theme).toEqual(theme)
68
- expect(result.current.styles).not.toBe(Function)
69
- expect(result.current.styles.container.backgroundColor).toEqual(theme.colors.barbie)
70
- })
71
- })
72
-
73
- describe('useStyles', () => {
74
- it('should return empty object for optional stylesheet', () => {
75
- const breakpoints = {
76
- xs: 0
77
- }
78
- const { useStyles } = createUnistyles(breakpoints)
79
- const { result } = renderHook(() => useStyles())
80
-
81
- expect(result.current.styles).toEqual({})
82
- expect(result.current.theme).toEqual({})
83
- })
84
-
85
- it ('should choose single value from breakpoints', () => {
86
- const breakpoints = {
87
- xs: 0,
88
- sm: 200,
89
- md: 500,
90
- lg: 1000
91
- }
92
-
93
- const { useStyles, createStyleSheet } = createUnistyles(breakpoints)
94
- const stylesheet = createStyleSheet({
95
- container: {
96
- flex: 1,
97
- justifyContent: 'center',
98
- alignItems: {
99
- xs: 'row',
100
- md: 'column'
101
- }
102
- }
103
- })
104
- const { result } = renderHook(() => useStyles(stylesheet))
105
-
106
- expect(result.current.styles.container.alignItems).toEqual('column')
107
- })
108
-
109
- it ('should choose single value from media queries', () => {
110
- const breakpoints = {
111
- xs: 0
112
- }
113
-
114
- const { useStyles, createStyleSheet } = createUnistyles(breakpoints)
115
- const stylesheet = createStyleSheet({
116
- container: {
117
- flex: 1,
118
- justifyContent: 'center',
119
- alignItems: {
120
- xs: 'row',
121
- ':w[300, 490]': 'column',
122
- ':w[491]': 'row'
123
- }
124
- }
125
- })
126
- const { result } = renderHook(() => useStyles(stylesheet as CustomNamedStyles<typeof stylesheet, typeof breakpoints>))
127
-
128
- expect(result.current.styles.container.alignItems).toEqual('row')
129
- })
130
-
131
- it ('should choose wrap dynamic functions in Proxy', () => {
132
- const breakpoints = {
133
- xs: 0
134
- }
135
-
136
- const { useStyles, createStyleSheet } = createUnistyles<typeof breakpoints, {}>(breakpoints)
137
- const stylesheet = createStyleSheet({
138
- container: (flex: number) => ({
139
- flex,
140
- justifyContent: 'center',
141
- alignItems: {
142
- xs: 'row',
143
- ':w[300, 490]': 'column',
144
- ':w[491]': 'row'
145
- }
146
- })
147
- })
148
- const { result } = renderHook(() => useStyles(stylesheet as CustomNamedStyles<typeof stylesheet, typeof breakpoints>))
149
-
150
- expect(result.current.styles.container).toBeInstanceOf(Function)
151
- expect((result.current.styles.container as (flex: number) => ViewStyle)(2)).toEqual({
152
- flex: 2,
153
- justifyContent: 'center',
154
- alignItems: 'row'
155
- })
156
- })
157
-
158
- it ('should return breakpoint even if no stylesheet has been provided', () => {
159
- const breakpoints = {
160
- xs: 0,
161
- sm: 200,
162
- md: 500,
163
- lg: 1000
164
- }
165
-
166
- const { useStyles } = createUnistyles<typeof breakpoints, {}>(breakpoints)
167
- const { result } = renderHook(() => useStyles())
168
-
169
- expect(result.current.breakpoint).toEqual('md')
170
- })
171
-
172
- it ('should return breakpoint for stylesheet', () => {
173
- const breakpoints = {
174
- xs: 0,
175
- sm: 200,
176
- lg: 1000
177
- }
178
-
179
- const { useStyles, createStyleSheet } = createUnistyles<typeof breakpoints, {}>(breakpoints)
180
- const stylesheet = createStyleSheet({
181
- container: {
182
- flex: 1,
183
- justifyContent: 'center',
184
- alignItems: 'center'
185
- }
186
- })
187
- const { result } = renderHook(() => useStyles(stylesheet as CustomNamedStyles<typeof stylesheet, typeof breakpoints>))
188
-
189
- expect(result.current.breakpoint).toEqual('sm')
190
- })
191
- })
192
- })
@@ -1,70 +0,0 @@
1
- import { useContext, useMemo } from 'react'
2
- import { StyleSheet } from 'react-native'
3
- import type {
4
- Breakpoints,
5
- CreateStylesFactory,
6
- CustomNamedStyles,
7
- ExtractBreakpoints,
8
- RemoveKeysWithPrefix,
9
- SortedBreakpointEntries
10
- } from './types'
11
- import { UnistylesContext } from './UnistylesTheme'
12
- import { useDimensions } from './hooks'
13
- import { getBreakpointFromScreenWidth, proxifyFunction, parseStyle, sortAndValidateBreakpoints } from './utils'
14
-
15
- export const createUnistyles = <B extends Breakpoints, T = {}>(breakpoints: B) => {
16
- const sortedBreakpoints = sortAndValidateBreakpoints(breakpoints)
17
- const sortedBreakpointEntries = Object
18
- .entries(sortedBreakpoints) as SortedBreakpointEntries<B>
19
-
20
- return {
21
- createStyleSheet: <S extends CustomNamedStyles<S, B>, X>(styles: S | CustomNamedStyles<S, B> | X | ((theme: T) => X | CustomNamedStyles<X, B>)): S | X => {
22
- if (typeof styles === 'function') {
23
- return styles as X
24
- }
25
-
26
- return styles as S
27
- },
28
- useStyles: <ST extends CustomNamedStyles<ST, B>>(stylesheet?: ST | CreateStylesFactory<ST, T>) => {
29
- const theme = useContext(UnistylesContext) as T
30
- const screenSize = useDimensions()
31
- const breakpoint = getBreakpointFromScreenWidth<B>(screenSize.width, sortedBreakpointEntries)
32
-
33
- if (!stylesheet) {
34
- return {
35
- theme,
36
- breakpoint,
37
- styles: {} as ExtractBreakpoints<RemoveKeysWithPrefix<ST, B>, B>
38
- }
39
- }
40
-
41
- const parsedStyles = useMemo(() => typeof stylesheet === 'function'
42
- ? stylesheet(theme)
43
- : stylesheet, [theme, stylesheet])
44
-
45
- const dynamicStyleSheet = useMemo(() => Object
46
- .entries(parsedStyles)
47
- .reduce((acc, [key, value]) => {
48
- const style = value as CustomNamedStyles<ST, B>
49
-
50
- if (typeof value === 'function') {
51
- return {
52
- ...acc,
53
- [key]: proxifyFunction<B>(value, breakpoint, screenSize, sortedBreakpointEntries)
54
- }
55
- }
56
-
57
- return StyleSheet.create({
58
- ...acc,
59
- [key]: parseStyle<ST, B>(style, breakpoint, screenSize, sortedBreakpointEntries)
60
- })
61
- }, {} as ST), [breakpoint, screenSize, parsedStyles])
62
-
63
- return {
64
- theme,
65
- breakpoint,
66
- styles: dynamicStyleSheet as ExtractBreakpoints<RemoveKeysWithPrefix<ST, B>, B>
67
- }
68
- }
69
- }
70
- }