@artsy/palette-mobile 23.14.0 → 24.0.0

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.
Files changed (220) hide show
  1. package/dist/Theme.js +16 -11
  2. package/dist/animation/CssTransition.js +71 -26
  3. package/dist/animation/index.js +17 -1
  4. package/dist/constants.js +12 -8
  5. package/dist/elements/ArtsyKeyboardAvoidingView/ArtsyKeyboardAvoidingView.js +116 -69
  6. package/dist/elements/ArtsyKeyboardAvoidingView/index.js +17 -1
  7. package/dist/elements/Autocomplete/Autocomplete.js +32 -23
  8. package/dist/elements/Autocomplete/Autocomplete.tests.js +128 -56
  9. package/dist/elements/Autocomplete/index.js +17 -1
  10. package/dist/elements/Avatar/Avatar.js +20 -15
  11. package/dist/elements/Avatar/Avatar.stories.js +29 -15
  12. package/dist/elements/Avatar/Avatar.tests.js +12 -10
  13. package/dist/elements/Avatar/index.js +17 -1
  14. package/dist/elements/BackButton/BackButton.js +16 -9
  15. package/dist/elements/BackButton/BackButton.stories.js +12 -8
  16. package/dist/elements/BackButton/index.js +17 -1
  17. package/dist/elements/Banner/Banner.js +45 -18
  18. package/dist/elements/Banner/Banner.stories.js +12 -8
  19. package/dist/elements/Banner/index.js +17 -1
  20. package/dist/elements/BorderBox/BorderBox.js +16 -11
  21. package/dist/elements/BorderBox/index.js +17 -1
  22. package/dist/elements/Box/Box.js +16 -14
  23. package/dist/elements/Box/Box.stories.js +21 -15
  24. package/dist/elements/Box/index.js +17 -1
  25. package/dist/elements/Button/Button.js +85 -64
  26. package/dist/elements/Button/Button.stories.js +48 -23
  27. package/dist/elements/Button/CTAButton.js +18 -3
  28. package/dist/elements/Button/FollowButton.js +38 -11
  29. package/dist/elements/Button/LinkButton.js +19 -4
  30. package/dist/elements/Button/colors.js +7 -3
  31. package/dist/elements/Button/index.js +20 -4
  32. package/dist/elements/ButtonNew/Button.js +114 -49
  33. package/dist/elements/ButtonNew/Button.stories.js +64 -38
  34. package/dist/elements/ButtonNew/Button.tests.js +23 -21
  35. package/dist/elements/ButtonNew/CTAButton.js +18 -3
  36. package/dist/elements/ButtonNew/FollowButton.js +36 -9
  37. package/dist/elements/ButtonNew/LinkButton.js +19 -4
  38. package/dist/elements/ButtonNew/colors.js +7 -3
  39. package/dist/elements/ButtonNew/index.js +20 -4
  40. package/dist/elements/Checkbox/Check.js +83 -46
  41. package/dist/elements/Checkbox/Checkbox.js +83 -47
  42. package/dist/elements/Checkbox/Checkbox.stories.js +10 -9
  43. package/dist/elements/Checkbox/index.js +18 -2
  44. package/dist/elements/Chip/Chip.js +23 -18
  45. package/dist/elements/Chip/Chip.stories.js +12 -8
  46. package/dist/elements/Chip/index.js +17 -1
  47. package/dist/elements/ClassTheme/ClassTheme.js +10 -5
  48. package/dist/elements/ClassTheme/index.js +17 -1
  49. package/dist/elements/Collapse/Collapse.js +9 -4
  50. package/dist/elements/Collapse/Collapse.stories.js +13 -9
  51. package/dist/elements/Collapse/index.js +17 -1
  52. package/dist/elements/CollapsibleMenuItem/CollapsibleMenuItem.js +32 -27
  53. package/dist/elements/CollapsibleMenuItem/CollapsibleMenuItem.stories.js +62 -37
  54. package/dist/elements/CollapsibleMenuItem/index.js +17 -1
  55. package/dist/elements/Dialog/Dialog.js +52 -26
  56. package/dist/elements/Dialog/Dialog.stories.js +41 -22
  57. package/dist/elements/Dialog/Dialog.tests.js +33 -31
  58. package/dist/elements/Dialog/index.js +17 -1
  59. package/dist/elements/EntityHeader/EntityHeader.js +42 -15
  60. package/dist/elements/EntityHeader/EntityHeader.stories.js +26 -18
  61. package/dist/elements/EntityHeader/index.js +17 -1
  62. package/dist/elements/Flex/Flex.js +32 -4
  63. package/dist/elements/Flex/index.js +17 -1
  64. package/dist/elements/Header/ArtsyLogoHeader.js +15 -8
  65. package/dist/elements/Header/index.js +17 -1
  66. package/dist/elements/Histogram/Histogram.js +19 -14
  67. package/dist/elements/Histogram/index.js +17 -1
  68. package/dist/elements/Image/Image.js +60 -28
  69. package/dist/elements/Image/Image.stories.js +35 -23
  70. package/dist/elements/Image/__tests__/getImageURL.tests.js +10 -8
  71. package/dist/elements/Image/helpers/getImageURL.js +13 -8
  72. package/dist/elements/Image/index.js +17 -1
  73. package/dist/elements/Input/Input.js +216 -168
  74. package/dist/elements/Input/Input.stories.js +15 -11
  75. package/dist/elements/Input/Input.tests.js +85 -39
  76. package/dist/elements/Input/InputTitle.js +9 -4
  77. package/dist/elements/Input/helpers.js +35 -27
  78. package/dist/elements/Input/index.js +19 -3
  79. package/dist/elements/Input/maskValue.js +25 -9
  80. package/dist/elements/Input/maskValue.tests.js +19 -17
  81. package/dist/elements/Join/Join.js +14 -9
  82. package/dist/elements/Join/index.js +17 -1
  83. package/dist/elements/LazyFlatlist/LazyFlatlist.js +11 -8
  84. package/dist/elements/LazyFlatlist/index.js +18 -2
  85. package/dist/elements/LazyFlatlist/useHasSeenItem.js +19 -12
  86. package/dist/elements/LegacyScreen/LegacyScreen.js +124 -83
  87. package/dist/elements/LegacyScreen/index.js +17 -1
  88. package/dist/elements/LegacyTabs/ContentTabs.js +18 -12
  89. package/dist/elements/LegacyTabs/NavigationalTabs.js +21 -15
  90. package/dist/elements/LegacyTabs/StepTabs.js +25 -19
  91. package/dist/elements/LegacyTabs/Tab.js +31 -19
  92. package/dist/elements/LegacyTabs/TabBarContainer.js +48 -39
  93. package/dist/elements/LegacyTabs/index.js +38 -9
  94. package/dist/elements/List/BulletedItem.js +34 -7
  95. package/dist/elements/List/List.stories.js +12 -8
  96. package/dist/elements/List/index.js +17 -1
  97. package/dist/elements/MeasuredView/MeasuredView.js +18 -12
  98. package/dist/elements/MeasuredView/index.js +17 -1
  99. package/dist/elements/MenuItem/MenuItem.js +14 -9
  100. package/dist/elements/MenuItem/MenuItem.stories.js +9 -5
  101. package/dist/elements/MenuItem/index.js +17 -1
  102. package/dist/elements/Message/Message.js +35 -19
  103. package/dist/elements/Message/Message.stories.d.ts +1 -1
  104. package/dist/elements/Message/Message.stories.js +23 -17
  105. package/dist/elements/Message/Message.tests.js +38 -36
  106. package/dist/elements/Message/index.js +17 -1
  107. package/dist/elements/Pill/Pill.js +116 -138
  108. package/dist/elements/Pill/Pill.stories.js +28 -20
  109. package/dist/elements/Pill/Pill.tests.js +15 -13
  110. package/dist/elements/Pill/index.js +17 -1
  111. package/dist/elements/PopIn/PopIn.js +13 -8
  112. package/dist/elements/PopIn/index.js +17 -1
  113. package/dist/elements/Popover/Popover.js +45 -15
  114. package/dist/elements/Popover/Popover.stories.js +25 -19
  115. package/dist/elements/Popover/index.js +17 -1
  116. package/dist/elements/ProgressBar/ProgressBar.js +68 -23
  117. package/dist/elements/ProgressBar/ProgressBar.stories.js +11 -7
  118. package/dist/elements/ProgressBar/ProgressBar.tests.js +48 -23
  119. package/dist/elements/ProgressBar/index.js +17 -1
  120. package/dist/elements/Radio/RadioButton.js +80 -44
  121. package/dist/elements/Radio/RadioButton.stories.js +17 -13
  122. package/dist/elements/Radio/RadioDot.js +31 -15
  123. package/dist/elements/Radio/index.js +7 -2
  124. package/dist/elements/Screen/Background.js +10 -3
  125. package/dist/elements/Screen/Body.js +37 -10
  126. package/dist/elements/Screen/BottomView.js +17 -9
  127. package/dist/elements/Screen/FloatingHeader.js +36 -9
  128. package/dist/elements/Screen/FullWidthDivider.js +20 -5
  129. package/dist/elements/Screen/FullWidthItem.js +20 -5
  130. package/dist/elements/Screen/Header.js +79 -26
  131. package/dist/elements/Screen/Screen.stories.js +46 -30
  132. package/dist/elements/Screen/ScreenBase.js +39 -11
  133. package/dist/elements/Screen/ScreenFlatList.js +26 -9
  134. package/dist/elements/Screen/ScreenScrollContext.js +21 -15
  135. package/dist/elements/Screen/ScreenScrollView.js +27 -9
  136. package/dist/elements/Screen/StickySubHeader.js +62 -23
  137. package/dist/elements/Screen/constants.js +8 -5
  138. package/dist/elements/Screen/hooks/useListenForScreenScroll.js +13 -9
  139. package/dist/elements/Screen/hooks/useShowLargeTitle.js +19 -14
  140. package/dist/elements/Screen/hooks/useTitleStyles.js +14 -10
  141. package/dist/elements/Screen/index.js +48 -31
  142. package/dist/elements/SearchInput/RoundSearchInput.js +79 -46
  143. package/dist/elements/SearchInput/SearchInput.js +43 -14
  144. package/dist/elements/SearchInput/index.js +18 -2
  145. package/dist/elements/Separator/Separator.js +20 -12
  146. package/dist/elements/Separator/Separator.stories.js +10 -6
  147. package/dist/elements/Separator/ShadowSeparator.js +14 -7
  148. package/dist/elements/Separator/index.js +18 -2
  149. package/dist/elements/SimpleMessage/SimpleMessage.js +47 -11
  150. package/dist/elements/SimpleMessage/index.js +17 -1
  151. package/dist/elements/Skeleton/Skeleton.js +50 -19
  152. package/dist/elements/Skeleton/Skeleton.stories.js +14 -10
  153. package/dist/elements/Skeleton/index.js +17 -1
  154. package/dist/elements/Spacer/Spacer.js +32 -3
  155. package/dist/elements/Spacer/Spacer.stories.js +35 -19
  156. package/dist/elements/Spacer/index.js +17 -1
  157. package/dist/elements/Spinner/Spinner.js +62 -33
  158. package/dist/elements/Spinner/index.js +17 -1
  159. package/dist/elements/Switch/Switch.js +50 -17
  160. package/dist/elements/Switch/Switch.stories.js +31 -14
  161. package/dist/elements/Switch/index.js +17 -1
  162. package/dist/elements/Tabs/SubTabBar.js +29 -20
  163. package/dist/elements/Tabs/TabFlashList.js +24 -12
  164. package/dist/elements/Tabs/TabFlatList.js +24 -12
  165. package/dist/elements/Tabs/TabMasonry.js +24 -12
  166. package/dist/elements/Tabs/TabScrollView.js +27 -14
  167. package/dist/elements/Tabs/Tabs.js +27 -24
  168. package/dist/elements/Tabs/Tabs.stories.js +93 -46
  169. package/dist/elements/Tabs/TabsContainer.js +62 -38
  170. package/dist/elements/Tabs/TabsWithHeader.js +41 -13
  171. package/dist/elements/Tabs/hooks/useListenForTabContentScroll.js +13 -9
  172. package/dist/elements/Tabs/index.js +17 -1
  173. package/dist/elements/Text/LinkText.js +32 -3
  174. package/dist/elements/Text/Text.js +61 -23
  175. package/dist/elements/Text/Text.stories.js +37 -28
  176. package/dist/elements/Text/Text.tests.js +7 -5
  177. package/dist/elements/Text/helpers.js +13 -7
  178. package/dist/elements/Text/index.js +19 -3
  179. package/dist/elements/ToolTip/ToolTip.js +67 -53
  180. package/dist/elements/ToolTip/ToolTip.stories.js +21 -14
  181. package/dist/elements/ToolTip/ToolTip.tests.js +15 -13
  182. package/dist/elements/ToolTip/ToolTipFlyout.js +68 -28
  183. package/dist/elements/ToolTip/index.js +17 -1
  184. package/dist/elements/Touchable/Touchable.js +41 -13
  185. package/dist/elements/Touchable/Touchable.stories.js +13 -9
  186. package/dist/elements/Touchable/TouchableHighlightColor.js +38 -12
  187. package/dist/elements/Touchable/TouchableWithScale.js +38 -11
  188. package/dist/elements/Touchable/index.js +19 -3
  189. package/dist/elements/VisualClue/VisualClue.stories.js +11 -7
  190. package/dist/elements/VisualClue/VisualClueDot.js +24 -14
  191. package/dist/elements/VisualClue/VisualClueText.js +26 -15
  192. package/dist/elements/VisualClue/index.js +18 -2
  193. package/dist/elements/index.js +62 -46
  194. package/dist/index.js +24 -8
  195. package/dist/setupJest.js +11 -6
  196. package/dist/storybook/decorators.js +36 -27
  197. package/dist/storybook/helpers.js +40 -22
  198. package/dist/tokens.js +28 -67
  199. package/dist/types.js +10 -5
  200. package/dist/utils/Wrap.js +16 -8
  201. package/dist/utils/colors.stories.js +31 -25
  202. package/dist/utils/createGeminiUrl.js +28 -22
  203. package/dist/utils/flattenChildren.js +20 -7
  204. package/dist/utils/formatLargeNumber.js +8 -4
  205. package/dist/utils/formatLargeNumbers.tests.js +15 -13
  206. package/dist/utils/hooks/index.js +20 -4
  207. package/dist/utils/hooks/useColor.js +6 -2
  208. package/dist/utils/hooks/useMeasure.js +40 -14
  209. package/dist/utils/hooks/useScreenDimensions.js +31 -20
  210. package/dist/utils/hooks/useSpace.js +6 -2
  211. package/dist/utils/hooks/useTheme.js +31 -23
  212. package/dist/utils/normalizeText.js +11 -6
  213. package/dist/utils/space.stories.js +15 -10
  214. package/dist/utils/tests/flattenChildren.tests.js +8 -6
  215. package/dist/utils/tests/isTestEnvironment.js +5 -1
  216. package/dist/utils/tests/renderWithWrappers.js +15 -7
  217. package/dist/utils/text.js +13 -9
  218. package/dist/utils/types.js +2 -0
  219. package/dist/utils/webTokensToMobile.js +16 -10
  220. package/package.json +30 -36
@@ -1,36 +1,42 @@
1
- import { Platform } from "react-native";
2
- const geminiHosts = [
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.imageAlreadyResized = void 0;
4
+ exports.createGeminiUrl = createGeminiUrl;
5
+ var react_native_1 = require("react-native");
6
+ var geminiHosts = [
3
7
  "https://d7hftxdivxxvm.cloudfront.net",
4
8
  "https://d196wkiy8qx2u5.cloudfront.net",
5
9
  ];
6
- export const imageAlreadyResized = (imageURL) => {
7
- return geminiHosts.some((host) => imageURL.includes(host));
10
+ var imageAlreadyResized = function (imageURL) {
11
+ return geminiHosts.some(function (host) { return imageURL.includes(host); });
8
12
  };
9
- export function createGeminiUrl({ imageURL, width, height, geminiHost = "d7hftxdivxxvm.cloudfront.net", imageQuality = 80, resizeMode = "fill", }) {
10
- if (imageAlreadyResized(imageURL)) {
11
- console.error("Image: `performResize` on self referential url. Avoid resizing gemini urls. Pass performResize={false} to fix this.", { imageURL });
13
+ exports.imageAlreadyResized = imageAlreadyResized;
14
+ function createGeminiUrl(_a) {
15
+ var imageURL = _a.imageURL, width = _a.width, height = _a.height, _b = _a.geminiHost, geminiHost = _b === void 0 ? "d7hftxdivxxvm.cloudfront.net" : _b, _c = _a.imageQuality, imageQuality = _c === void 0 ? 80 : _c, _d = _a.resizeMode, resizeMode = _d === void 0 ? "fill" : _d;
16
+ if ((0, exports.imageAlreadyResized)(imageURL)) {
17
+ console.error("Image: `performResize` on self referential url. Avoid resizing gemini urls. Pass performResize={false} to fix this.", { imageURL: imageURL });
12
18
  }
13
- const src = encodeURIComponent(imageURL);
14
- const roundedHeight = Math.round(height);
15
- const roundedWidth = Math.round(width);
16
- const params = [
17
- `height=${roundedHeight}`,
18
- `quality=${imageQuality}`,
19
- `resize_to=${resizeMode}`,
20
- `src=${src}`,
21
- `width=${roundedWidth}`,
19
+ var src = encodeURIComponent(imageURL);
20
+ var roundedHeight = Math.round(height);
21
+ var roundedWidth = Math.round(width);
22
+ var params = [
23
+ "height=".concat(roundedHeight),
24
+ "quality=".concat(imageQuality),
25
+ "resize_to=".concat(resizeMode),
26
+ "src=".concat(src),
27
+ "width=".concat(roundedWidth),
22
28
  ];
23
- if (Platform.OS === "android" || (Platform.OS === "ios" && osMajorVersion() >= 14)) {
29
+ if (react_native_1.Platform.OS === "android" || (react_native_1.Platform.OS === "ios" && osMajorVersion() >= 14)) {
24
30
  params.push("convert_to=webp");
25
31
  }
26
- return `https://${geminiHost}/?${params.join("&")}`;
32
+ return "https://".concat(geminiHost, "/?").concat(params.join("&"));
27
33
  }
28
- const osMajorVersion = () => {
34
+ var osMajorVersion = function () {
29
35
  // eslint-disable-next-line no-constant-condition
30
- if (typeof (Platform.Version === "string")) {
31
- return parseInt(Platform.Version, 10);
36
+ if (typeof (react_native_1.Platform.Version === "string")) {
37
+ return parseInt(react_native_1.Platform.Version, 10);
32
38
  }
33
39
  else {
34
- return Platform.Version;
40
+ return react_native_1.Platform.Version;
35
41
  }
36
42
  };
@@ -1,13 +1,26 @@
1
- import { isValidElement, Children, Fragment } from "react";
1
+ "use strict";
2
+ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
3
+ if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
4
+ if (ar || !(i in from)) {
5
+ if (!ar) ar = Array.prototype.slice.call(from, 0, i);
6
+ ar[i] = from[i];
7
+ }
8
+ }
9
+ return to.concat(ar || Array.prototype.slice.call(from));
10
+ };
11
+ Object.defineProperty(exports, "__esModule", { value: true });
12
+ exports.flattenChildren = void 0;
13
+ var react_1 = require("react");
2
14
  /**
3
15
  * Convert a fragment or nested fragment into an array of elements.
4
16
  */
5
- export const flattenChildren = (children) => {
6
- const xs = Children.toArray(children).filter(isValidElement);
7
- return xs.reduce((acc, child) => {
8
- if (child.type === Fragment) {
9
- return [...acc, ...flattenChildren(child.props.children)];
17
+ var flattenChildren = function (children) {
18
+ var xs = react_1.Children.toArray(children).filter(react_1.isValidElement);
19
+ return xs.reduce(function (acc, child) {
20
+ if (child.type === react_1.Fragment) {
21
+ return __spreadArray(__spreadArray([], acc, true), (0, exports.flattenChildren)(child.props.children), true);
10
22
  }
11
- return [...acc, child];
23
+ return __spreadArray(__spreadArray([], acc, true), [child], false);
12
24
  }, []);
13
25
  };
26
+ exports.flattenChildren = flattenChildren;
@@ -1,14 +1,18 @@
1
- export function formatLargeNumber(number, decimalPlaces = 0) {
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.formatLargeNumber = formatLargeNumber;
4
+ function formatLargeNumber(number, decimalPlaces) {
5
+ if (decimalPlaces === void 0) { decimalPlaces = 0; }
2
6
  if (number < 1000) {
3
7
  return number.toString();
4
8
  }
5
9
  else if (number < 1000000) {
6
- return `${(number / 1000).toFixed(decimalPlaces)}K`;
10
+ return "".concat((number / 1000).toFixed(decimalPlaces), "K");
7
11
  }
8
12
  else if (number < 1000000000) {
9
- return `${(number / 1000000).toFixed(decimalPlaces)}M`;
13
+ return "".concat((number / 1000000).toFixed(decimalPlaces), "M");
10
14
  }
11
15
  else {
12
- return `${(number / 1000000000).toFixed(decimalPlaces)}B`;
16
+ return "".concat((number / 1000000000).toFixed(decimalPlaces), "B");
13
17
  }
14
18
  }
@@ -1,18 +1,20 @@
1
- import { formatLargeNumber } from "./formatLargeNumber";
2
- describe("formatLargeNumber", () => {
3
- it("should return the same number for numbers less than 1000", () => {
4
- expect(formatLargeNumber(500)).toBe("500");
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ var formatLargeNumber_1 = require("./formatLargeNumber");
4
+ describe("formatLargeNumber", function () {
5
+ it("should return the same number for numbers less than 1000", function () {
6
+ expect((0, formatLargeNumber_1.formatLargeNumber)(500)).toBe("500");
5
7
  });
6
- it("should format numbers in thousands correctly", () => {
7
- expect(formatLargeNumber(1500, 1)).toBe("1.5K");
8
- expect(formatLargeNumber(1500, 2)).toBe("1.50K");
8
+ it("should format numbers in thousands correctly", function () {
9
+ expect((0, formatLargeNumber_1.formatLargeNumber)(1500, 1)).toBe("1.5K");
10
+ expect((0, formatLargeNumber_1.formatLargeNumber)(1500, 2)).toBe("1.50K");
9
11
  });
10
- it("should format numbers in millions correctly", () => {
11
- expect(formatLargeNumber(1500000, 1)).toBe("1.5M");
12
- expect(formatLargeNumber(1500000, 2)).toBe("1.50M");
12
+ it("should format numbers in millions correctly", function () {
13
+ expect((0, formatLargeNumber_1.formatLargeNumber)(1500000, 1)).toBe("1.5M");
14
+ expect((0, formatLargeNumber_1.formatLargeNumber)(1500000, 2)).toBe("1.50M");
13
15
  });
14
- it("should format numbers in billions correctly", () => {
15
- expect(formatLargeNumber(1500000000, 1)).toBe("1.5B");
16
- expect(formatLargeNumber(1500000000, 2)).toBe("1.50B");
16
+ it("should format numbers in billions correctly", function () {
17
+ expect((0, formatLargeNumber_1.formatLargeNumber)(1500000000, 1)).toBe("1.5B");
18
+ expect((0, formatLargeNumber_1.formatLargeNumber)(1500000000, 2)).toBe("1.50B");
17
19
  });
18
20
  });
@@ -1,4 +1,20 @@
1
- export * from "./useColor";
2
- export * from "./useScreenDimensions";
3
- export * from "./useSpace";
4
- export * from "./useTheme";
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __exportStar = (this && this.__exportStar) || function(m, exports) {
14
+ for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
+ };
16
+ Object.defineProperty(exports, "__esModule", { value: true });
17
+ __exportStar(require("./useColor"), exports);
18
+ __exportStar(require("./useScreenDimensions"), exports);
19
+ __exportStar(require("./useSpace"), exports);
20
+ __exportStar(require("./useTheme"), exports);
@@ -1,2 +1,6 @@
1
- import { useTheme } from "./useTheme";
2
- export const useColor = () => useTheme().color;
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.useColor = void 0;
4
+ var useTheme_1 = require("./useTheme");
5
+ var useColor = function () { return (0, useTheme_1.useTheme)().color; };
6
+ exports.useColor = useColor;
@@ -1,24 +1,50 @@
1
- import { useEffect, useState } from "react";
1
+ "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
13
+ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
14
+ if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
15
+ if (ar || !(i in from)) {
16
+ if (!ar) ar = Array.prototype.slice.call(from, 0, i);
17
+ ar[i] = from[i];
18
+ }
19
+ }
20
+ return to.concat(ar || Array.prototype.slice.call(from));
21
+ };
22
+ Object.defineProperty(exports, "__esModule", { value: true });
23
+ exports.useMeasure = void 0;
24
+ var react_1 = require("react");
2
25
  /*
3
26
  useMeasure is a hook that measures the position of a ref element
4
27
  and returns the x, y, width, height, pageX, pageY of the element
5
28
  */
6
- export const useMeasure = ({ ref, extraDeps = [], }) => {
7
- const [position, setPosition] = useState(null);
8
- useEffect(() => {
9
- ref.current?.measure((x, y, width, height, pageX, pageY) => {
29
+ var useMeasure = function (_a) {
30
+ var ref = _a.ref, _b = _a.extraDeps, extraDeps = _b === void 0 ? [] : _b;
31
+ var _c = (0, react_1.useState)(null), position = _c[0], setPosition = _c[1];
32
+ (0, react_1.useEffect)(function () {
33
+ var _a;
34
+ (_a = ref.current) === null || _a === void 0 ? void 0 : _a.measure(function (x, y, width, height, pageX, pageY) {
10
35
  setPosition({
11
- x,
12
- y,
13
- width,
14
- height,
15
- pageX,
16
- pageY,
36
+ x: x,
37
+ y: y,
38
+ width: width,
39
+ height: height,
40
+ pageX: pageX,
41
+ pageY: pageY,
17
42
  });
18
- }, () => {
43
+ }, function () {
19
44
  console.error("measurement failed");
20
45
  });
21
46
  // eslint-disable-next-line react-hooks/exhaustive-deps
22
- }, [JSON.stringify(position), ref, ...extraDeps]);
23
- return { ...position };
47
+ }, __spreadArray([JSON.stringify(position), ref], extraDeps, true));
48
+ return __assign({}, position);
24
49
  };
50
+ exports.useMeasure = useMeasure;
@@ -1,24 +1,35 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { createContext, useContext } from "react";
3
- import { useWindowDimensions } from "react-native";
4
- import { useSafeAreaInsets } from "react-native-safe-area-context";
5
- export const ScreenDimensionsProvider = ({ children }) => {
6
- const safeAreaInsets = useSafeAreaInsets();
7
- const dimensions = useWindowDimensions();
8
- const orientation = dimensions.width > dimensions.height ? "landscape" : "portrait";
9
- const size = dimensions.height < 667 ? "small" : dimensions.height <= 812 ? "standard" : "large";
10
- const isSmallScreen = size === "small";
11
- return (_jsx(ScreenDimensionsContext.Provider, { value: {
12
- ...dimensions,
13
- safeAreaInsets,
14
- orientation,
15
- size,
16
- isSmallScreen,
17
- }, children: children }));
1
+ "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
18
12
  };
19
- const ScreenDimensionsContext = createContext(null);
20
- export function useScreenDimensions() {
21
- const context = useContext(ScreenDimensionsContext);
13
+ Object.defineProperty(exports, "__esModule", { value: true });
14
+ exports.ScreenDimensionsProvider = void 0;
15
+ exports.useScreenDimensions = useScreenDimensions;
16
+ var jsx_runtime_1 = require("react/jsx-runtime");
17
+ var react_1 = require("react");
18
+ var react_native_1 = require("react-native");
19
+ var react_native_safe_area_context_1 = require("react-native-safe-area-context");
20
+ var ScreenDimensionsProvider = function (_a) {
21
+ var children = _a.children;
22
+ var safeAreaInsets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
23
+ var dimensions = (0, react_native_1.useWindowDimensions)();
24
+ var orientation = dimensions.width > dimensions.height ? "landscape" : "portrait";
25
+ var size = dimensions.height < 667 ? "small" : dimensions.height <= 812 ? "standard" : "large";
26
+ var isSmallScreen = size === "small";
27
+ return ((0, jsx_runtime_1.jsx)(ScreenDimensionsContext.Provider, { value: __assign(__assign({}, dimensions), { safeAreaInsets: safeAreaInsets, orientation: orientation, size: size, isSmallScreen: isSmallScreen }), children: children }));
28
+ };
29
+ exports.ScreenDimensionsProvider = ScreenDimensionsProvider;
30
+ var ScreenDimensionsContext = (0, react_1.createContext)(null);
31
+ function useScreenDimensions() {
32
+ var context = (0, react_1.useContext)(ScreenDimensionsContext);
22
33
  if (!context) {
23
34
  throw new Error("useScreenDimensions must be used within a ScreenDimensionsProvider");
24
35
  }
@@ -1,2 +1,6 @@
1
- import { useTheme } from "./useTheme";
2
- export const useSpace = () => useTheme().space;
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.useSpace = void 0;
4
+ var useTheme_1 = require("./useTheme");
5
+ var useSpace = function () { return (0, useTheme_1.useTheme)().space; };
6
+ exports.useSpace = useSpace;
@@ -1,36 +1,44 @@
1
- import { useContext } from "react";
2
- import { ThemeContext } from "styled-components/native";
3
- import { THEMES } from "../../tokens";
4
- import { isTestEnvironment } from "../tests/isTestEnvironment";
5
- export const useTheme = () => {
6
- const maybeTheme = useContext(ThemeContext);
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.useTheme = void 0;
4
+ var react_1 = require("react");
5
+ var native_1 = require("styled-components/native");
6
+ var tokens_1 = require("../../tokens");
7
+ var isTestEnvironment_1 = require("../tests/isTestEnvironment");
8
+ var useTheme = function () {
9
+ var maybeTheme = (0, react_1.useContext)(native_1.ThemeContext);
7
10
  // if we are not wrapped in `<Theme>`, if we dev, throw error.
8
11
  // if we are in prod, we will default to v2 to avoid a crash.
9
12
  // if we are wrapped, then all good.
10
- if ((__DEV__ || isTestEnvironment()) && maybeTheme === undefined) {
13
+ if ((__DEV__ || (0, isTestEnvironment_1.isTestEnvironment)()) && maybeTheme === undefined) {
11
14
  console.error("You are trying to use the `Theme` context but you have not wrapped your component/screen with `<Theme>`. Please wrap and try again.");
12
15
  throw new Error("ThemeContext is not defined. Wrap your component with `<Theme>` and try again.");
13
16
  }
14
- const defaultTheme = THEMES.v3light;
15
- const theme = maybeTheme ?? defaultTheme;
17
+ var defaultTheme = tokens_1.THEMES.v3light;
18
+ var theme = maybeTheme !== null && maybeTheme !== void 0 ? maybeTheme : defaultTheme;
16
19
  return {
17
- theme,
20
+ theme: theme,
18
21
  space: space(theme),
19
22
  color: color(theme),
20
23
  };
21
24
  };
22
- const space = (theme) => (spaceName) => {
23
- const pixelValue = theme.space[spaceName];
24
- return Number(pixelValue.split("px")[0]);
25
+ exports.useTheme = useTheme;
26
+ var space = function (theme) {
27
+ return function (spaceName) {
28
+ var pixelValue = theme.space[spaceName];
29
+ return Number(pixelValue.split("px")[0]);
30
+ };
25
31
  };
26
- const color = (theme) => (colorName) => {
27
- if (colorName === undefined) {
28
- return undefined;
29
- }
30
- const themeColor = theme.colors[colorName];
31
- // return the color that was passed if it's not supported by the theme (e.g., for a theme-independent `white`).
32
- if (!themeColor) {
33
- return colorName;
34
- }
35
- return themeColor;
32
+ var color = function (theme) {
33
+ return function (colorName) {
34
+ if (colorName === undefined) {
35
+ return undefined;
36
+ }
37
+ var themeColor = theme.colors[colorName];
38
+ // return the color that was passed if it's not supported by the theme (e.g., for a theme-independent `white`).
39
+ if (!themeColor) {
40
+ return colorName;
41
+ }
42
+ return themeColor;
43
+ };
36
44
  };
@@ -1,3 +1,6 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.normalizeText = normalizeText;
1
4
  /*
2
5
  Licensed under the Apache License, Version 2.0 (the "License");
3
6
  you may not use this file except in compliance with the License.
@@ -14,7 +17,7 @@
14
17
  THIS CODE TAKEN FROM
15
18
  https://stackoverflow.com/a/18391901
16
19
  */
17
- const defaultDiacriticsRemovalMap = [
20
+ var defaultDiacriticsRemovalMap = [
18
21
  {
19
22
  base: "A",
20
23
  letters: "\u0041\u24B6\uFF21\u00C0\u00C1\u00C2\u1EA6\u1EA4\u1EAA\u1EA8\u00C3\u0100\u0102\u1EB0\u1EAE\u1EB4\u1EB2\u0226\u01E0\u00C4\u01DE\u1EA2\u00C5\u01FA\u01CD\u0200\u0202\u1EA0\u1EAC\u1EB6\u1E00\u0104\u023A\u2C6F",
@@ -204,14 +207,16 @@ const defaultDiacriticsRemovalMap = [
204
207
  letters: "\u007A\u24E9\uFF5A\u017A\u1E91\u017C\u017E\u1E93\u1E95\u01B6\u0225\u0240\u2C6C\uA763",
205
208
  },
206
209
  ];
207
- const diacriticsMap = {};
208
- for (const { letters, base } of defaultDiacriticsRemovalMap) {
209
- for (const letter of letters) {
210
+ var diacriticsMap = {};
211
+ for (var _i = 0, defaultDiacriticsRemovalMap_1 = defaultDiacriticsRemovalMap; _i < defaultDiacriticsRemovalMap_1.length; _i++) {
212
+ var _a = defaultDiacriticsRemovalMap_1[_i], letters = _a.letters, base = _a.base;
213
+ for (var _b = 0, letters_1 = letters; _b < letters_1.length; _b++) {
214
+ var letter = letters_1[_b];
210
215
  diacriticsMap[letter] = base;
211
216
  }
212
217
  }
213
218
  // "what?" version ... http://jsperf.com/diacritics/12
214
- export function normalizeText(text) {
219
+ function normalizeText(text) {
215
220
  return (text
216
221
  .trim()
217
222
  .toLocaleLowerCase()
@@ -220,7 +225,7 @@ export function normalizeText(text) {
220
225
  .normalize("NFD")
221
226
  .replace(/[\u0300-\u036f]/g, "")
222
227
  // handle other edge cases like ø
223
- .replace(/[^\u0000-\u007E]/g, (a) => {
228
+ .replace(/[^\u0000-\u007E]/g, function (a) {
224
229
  return diacriticsMap[a] || a;
225
230
  })
226
231
  // remove punctuation https://stackoverflow.com/a/25575009
@@ -1,13 +1,18 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { useSpace } from "./hooks";
3
- import { bullet } from "./text";
4
- import { List } from "../storybook/helpers";
5
- import { Box, Text } from "../elements";
6
- const SpaceLine = ({ space: theSpace }) => {
7
- const space = useSpace();
8
- return (_jsxs(Box, { children: [_jsx(Box, { width: space(theSpace), borderBottomWidth: 1, borderColor: "black", marginBottom: "4px" }), _jsx(Text, { color: "black", children: `${theSpace} ${bullet} ${space(theSpace)}px` })] }));
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.SpacingUnits = void 0;
4
+ var jsx_runtime_1 = require("react/jsx-runtime");
5
+ var hooks_1 = require("./hooks");
6
+ var text_1 = require("./text");
7
+ var elements_1 = require("../elements");
8
+ var helpers_1 = require("../storybook/helpers");
9
+ var SpaceLine = function (_a) {
10
+ var theSpace = _a.space;
11
+ var space = (0, hooks_1.useSpace)();
12
+ return ((0, jsx_runtime_1.jsxs)(elements_1.Box, { children: [(0, jsx_runtime_1.jsx)(elements_1.Box, { width: space(theSpace), borderBottomWidth: 1, borderColor: "black", marginBottom: "4px" }), (0, jsx_runtime_1.jsx)(elements_1.Text, { color: "black", children: "".concat(theSpace, " ").concat(text_1.bullet, " ").concat(space(theSpace), "px") })] }));
9
13
  };
10
- export default {
14
+ exports.default = {
11
15
  title: "space",
12
16
  };
13
- export const SpacingUnits = () => (_jsxs(List, { style: { marginLeft: 50 }, contentContainerStyle: { alignItems: "flex-start" }, children: [_jsx(SpaceLine, { space: 0.5 }), _jsx(SpaceLine, { space: 1 }), _jsx(SpaceLine, { space: 2 }), _jsx(SpaceLine, { space: 4 }), _jsx(SpaceLine, { space: 6 }), _jsx(SpaceLine, { space: 12 })] }));
17
+ var SpacingUnits = function () { return ((0, jsx_runtime_1.jsxs)(helpers_1.List, { style: { marginLeft: 50 }, contentContainerStyle: { alignItems: "flex-start" }, children: [(0, jsx_runtime_1.jsx)(SpaceLine, { space: 0.5 }), (0, jsx_runtime_1.jsx)(SpaceLine, { space: 1 }), (0, jsx_runtime_1.jsx)(SpaceLine, { space: 2 }), (0, jsx_runtime_1.jsx)(SpaceLine, { space: 4 }), (0, jsx_runtime_1.jsx)(SpaceLine, { space: 6 }), (0, jsx_runtime_1.jsx)(SpaceLine, { space: 12 })] })); };
18
+ exports.SpacingUnits = SpacingUnits;
@@ -1,9 +1,11 @@
1
- import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { View } from "react-native";
3
- import { flattenChildren } from "../flattenChildren";
4
- describe("flattenChildren", () => {
5
- it("flattens the children", () => {
6
- const flattened = flattenChildren(_jsxs(_Fragment, { children: [_jsx(View, { children: "one" }), _jsx(View, { children: "two" }), _jsxs(_Fragment, { children: [_jsx(View, { children: "three" }), _jsx(_Fragment, { children: _jsx(View, { children: "four" }) })] })] }));
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ var jsx_runtime_1 = require("react/jsx-runtime");
4
+ var react_native_1 = require("react-native");
5
+ var flattenChildren_1 = require("../flattenChildren");
6
+ describe("flattenChildren", function () {
7
+ it("flattens the children", function () {
8
+ var flattened = (0, flattenChildren_1.flattenChildren)((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { children: "one" }), (0, jsx_runtime_1.jsx)(react_native_1.View, { children: "two" }), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { children: "three" }), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_native_1.View, { children: "four" }) })] })] }));
7
9
  expect(flattened).toHaveLength(4);
8
10
  });
9
11
  });
@@ -1,3 +1,7 @@
1
- export const isTestEnvironment = () => {
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.isTestEnvironment = void 0;
4
+ var isTestEnvironment = function () {
2
5
  return !!process.env.JEST_WORKER_ID;
3
6
  };
7
+ exports.isTestEnvironment = isTestEnvironment;
@@ -1,15 +1,18 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { render } from "@testing-library/react-native";
3
- import { SafeAreaProvider } from "react-native-safe-area-context";
4
- import { Theme } from "../../Theme";
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.Providers = exports.renderWithWrappers = void 0;
4
+ var jsx_runtime_1 = require("react/jsx-runtime");
5
+ var react_native_1 = require("@testing-library/react-native");
6
+ var react_native_safe_area_context_1 = require("react-native-safe-area-context");
7
+ var Theme_1 = require("../../Theme");
5
8
  /**
6
9
  * Renders a React Component with our page wrappers
7
10
  * by using @testing-library/react-native
8
11
  * @param component
9
12
  */
10
- export const renderWithWrappers = (component) => {
13
+ var renderWithWrappers = function (component) {
11
14
  try {
12
- return render(component, { wrapper: Providers });
15
+ return (0, react_native_1.render)(component, { wrapper: exports.Providers });
13
16
  }
14
17
  catch (error) {
15
18
  if (error instanceof Error) {
@@ -17,4 +20,9 @@ export const renderWithWrappers = (component) => {
17
20
  }
18
21
  }
19
22
  };
20
- export const Providers = ({ children }) => (_jsx(SafeAreaProvider, { children: _jsx(Theme, { children: children }) }));
23
+ exports.renderWithWrappers = renderWithWrappers;
24
+ var Providers = function (_a) {
25
+ var children = _a.children;
26
+ return ((0, jsx_runtime_1.jsx)(react_native_safe_area_context_1.SafeAreaProvider, { children: (0, jsx_runtime_1.jsx)(Theme_1.Theme, { children: children }) }));
27
+ };
28
+ exports.Providers = Providers;
@@ -1,3 +1,6 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.range = exports.comma = exports.apostrophe = exports.quoteRight = exports.quoteLeft = exports.nbsp = exports.bullet = exports.emdash = exports.endash = void 0;
1
4
  /**
2
5
  * The endash is used in ranges like `$10k – $20k`.
3
6
  * This export makes it easier to use in the code, without having to find
@@ -5,15 +8,16 @@
5
8
  * It is a different character to the regular minus, usually a bit longer.
6
9
  * (for reference: minus `-`, endash `–`)
7
10
  */
8
- export const endash = "–";
9
- export const emdash = "—";
10
- export const bullet = "•";
11
- export const nbsp = String.fromCharCode(160);
12
- export const quoteLeft = "“";
13
- export const quoteRight = "”";
14
- export const apostrophe = "’";
15
- export const comma = ",";
11
+ exports.endash = "–";
12
+ exports.emdash = "—";
13
+ exports.bullet = "•";
14
+ exports.nbsp = String.fromCharCode(160);
15
+ exports.quoteLeft = "“";
16
+ exports.quoteRight = "”";
17
+ exports.apostrophe = "’";
18
+ exports.comma = ",";
16
19
  /**
17
20
  * A helper func to create a range string out of two strings, by putting an endash between them.
18
21
  */
19
- export const range = (left, right) => `${left} ${endash} ${right}`;
22
+ var range = function (left, right) { return "".concat(left, " ").concat(exports.endash, " ").concat(right); };
23
+ exports.range = range;
@@ -0,0 +1,2 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });