@artsy/palette-mobile 13.2.33 → 13.2.35

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 (327) hide show
  1. package/dist/Theme.js +9 -13
  2. package/dist/animation/CssTransition.js +8 -12
  3. package/dist/animation/index.js +1 -17
  4. package/dist/constants.js +4 -8
  5. package/dist/elements/ArtsyKeyboardAvoidingView/ArtsyKeyboardAvoidingView.js +19 -23
  6. package/dist/elements/ArtsyKeyboardAvoidingView/index.js +1 -17
  7. package/dist/elements/Autocomplete/Autocomplete.js +4 -8
  8. package/dist/elements/Autocomplete/Autocomplete.tests.js +9 -11
  9. package/dist/elements/Autocomplete/index.js +1 -17
  10. package/dist/elements/Avatar/Avatar.js +17 -44
  11. package/dist/elements/Avatar/Avatar.stories.js +7 -11
  12. package/dist/elements/Avatar/Avatar.tests.js +8 -10
  13. package/dist/elements/Avatar/index.js +1 -17
  14. package/dist/elements/BackButton/BackButton.js +9 -14
  15. package/dist/elements/BackButton/BackButton.stories.js +8 -12
  16. package/dist/elements/BackButton/index.js +1 -17
  17. package/dist/elements/Banner/Banner.js +14 -18
  18. package/dist/elements/Banner/Banner.stories.js +7 -11
  19. package/dist/elements/Banner/index.js +1 -17
  20. package/dist/elements/BorderBox/BorderBox.js +9 -15
  21. package/dist/elements/BorderBox/index.js +1 -17
  22. package/dist/elements/Box/Box.js +11 -17
  23. package/dist/elements/Box/Box.stories.js +14 -20
  24. package/dist/elements/Box/index.js +1 -17
  25. package/dist/elements/Button/Button.js +30 -37
  26. package/dist/elements/Button/Button.stories.js +18 -25
  27. package/dist/elements/Button/CTAButton.js +3 -7
  28. package/dist/elements/Button/FollowButton.js +7 -11
  29. package/dist/elements/Button/LinkButton.js +4 -8
  30. package/dist/elements/Button/colors.js +3 -7
  31. package/dist/elements/Button/index.js +4 -20
  32. package/dist/elements/ButtonNew/Button.js +32 -62
  33. package/dist/elements/ButtonNew/Button.stories.js +36 -50
  34. package/dist/elements/ButtonNew/Button.tests.js +13 -15
  35. package/dist/elements/ButtonNew/CTAButton.js +3 -7
  36. package/dist/elements/ButtonNew/FollowButton.js +7 -11
  37. package/dist/elements/ButtonNew/LinkButton.js +4 -8
  38. package/dist/elements/ButtonNew/colors.js +3 -7
  39. package/dist/elements/ButtonNew/index.js +4 -20
  40. package/dist/elements/Checkbox/Check.js +29 -56
  41. package/dist/elements/Checkbox/Checkbox.js +22 -30
  42. package/dist/elements/Checkbox/Checkbox.stories.js +8 -12
  43. package/dist/elements/Checkbox/index.js +2 -18
  44. package/dist/elements/ClassTheme/ClassTheme.js +5 -9
  45. package/dist/elements/ClassTheme/index.js +1 -17
  46. package/dist/elements/Collapse/Collapse.js +4 -8
  47. package/dist/elements/Collapse/Collapse.stories.js +9 -13
  48. package/dist/elements/Collapse/index.js +1 -17
  49. package/dist/elements/CollapsibleMenuItem/CollapsibleMenuItem.js +18 -21
  50. package/dist/elements/CollapsibleMenuItem/CollapsibleMenuItem.stories.js +30 -38
  51. package/dist/elements/CollapsibleMenuItem/index.js +1 -17
  52. package/dist/elements/Dialog/Dialog.js +20 -24
  53. package/dist/elements/Dialog/Dialog.stories.js +14 -16
  54. package/dist/elements/Dialog/Dialog.tests.js +12 -14
  55. package/dist/elements/Dialog/index.js +1 -17
  56. package/dist/elements/EntityHeader/EntityHeader.js +14 -18
  57. package/dist/elements/EntityHeader/EntityHeader.stories.js +17 -25
  58. package/dist/elements/EntityHeader/index.js +1 -17
  59. package/dist/elements/Flex/Flex.js +4 -7
  60. package/dist/elements/Flex/index.js +1 -17
  61. package/dist/elements/Header/ArtsyLogoHeader.js +8 -12
  62. package/dist/elements/Header/index.js +1 -17
  63. package/dist/elements/Histogram/Histogram.js +6 -10
  64. package/dist/elements/Histogram/index.js +1 -17
  65. package/dist/elements/Image/Image.js +26 -55
  66. package/dist/elements/Image/Image.stories.js +14 -16
  67. package/dist/elements/Image/index.js +1 -17
  68. package/dist/elements/Input/Input.js +127 -157
  69. package/dist/elements/Input/Input.stories.js +9 -11
  70. package/dist/elements/Input/Input.tests.js +17 -19
  71. package/dist/elements/Input/InputTitle.js +4 -8
  72. package/dist/elements/Input/helpers.d.ts +1 -1
  73. package/dist/elements/Input/helpers.js +51 -56
  74. package/dist/elements/Input/index.js +3 -19
  75. package/dist/elements/Input/maskValue.js +5 -10
  76. package/dist/elements/Input/maskValue.tests.js +11 -13
  77. package/dist/elements/Join/Join.js +6 -10
  78. package/dist/elements/Join/index.js +1 -17
  79. package/dist/elements/LazyFlatlist/LazyFlatlist.js +3 -7
  80. package/dist/elements/LazyFlatlist/index.js +2 -18
  81. package/dist/elements/LazyFlatlist/useHasSeenItem.js +6 -10
  82. package/dist/elements/LegacyScreen/LegacyScreen.js +51 -59
  83. package/dist/elements/LegacyScreen/index.js +1 -17
  84. package/dist/elements/LegacyTabs/ContentTabs.js +8 -12
  85. package/dist/elements/LegacyTabs/NavigationalTabs.js +11 -15
  86. package/dist/elements/LegacyTabs/StepTabs.js +15 -19
  87. package/dist/elements/LegacyTabs/Tab.js +9 -13
  88. package/dist/elements/LegacyTabs/TabBarContainer.js +28 -34
  89. package/dist/elements/LegacyTabs/index.js +9 -15
  90. package/dist/elements/List/BulletedItem.js +7 -11
  91. package/dist/elements/List/List.stories.js +8 -10
  92. package/dist/elements/List/index.js +1 -17
  93. package/dist/elements/MeasuredView/MeasuredView.js +10 -15
  94. package/dist/elements/MeasuredView/index.js +1 -17
  95. package/dist/elements/MenuItem/MenuItem.js +9 -13
  96. package/dist/elements/MenuItem/MenuItem.stories.js +5 -9
  97. package/dist/elements/MenuItem/index.js +1 -17
  98. package/dist/elements/Message/Message.js +15 -19
  99. package/dist/elements/Message/Message.stories.js +10 -12
  100. package/dist/elements/Message/Message.tests.js +9 -11
  101. package/dist/elements/Message/index.js +1 -17
  102. package/dist/elements/Pill/Pill.js +53 -83
  103. package/dist/elements/Pill/Pill.stories.js +16 -18
  104. package/dist/elements/Pill/Pill.tests.js +8 -10
  105. package/dist/elements/Pill/index.js +1 -17
  106. package/dist/elements/PopIn/PopIn.js +8 -12
  107. package/dist/elements/PopIn/index.js +1 -17
  108. package/dist/elements/Popover/Popover.js +21 -28
  109. package/dist/elements/Popover/Popover.stories.js +15 -17
  110. package/dist/elements/Popover/index.js +1 -17
  111. package/dist/elements/ProgressBar/ProgressBar.js +16 -43
  112. package/dist/elements/ProgressBar/ProgressBar.stories.js +6 -8
  113. package/dist/elements/ProgressBar/ProgressBar.tests.js +7 -9
  114. package/dist/elements/ProgressBar/index.js +1 -17
  115. package/dist/elements/Radio/RadioButton.js +20 -28
  116. package/dist/elements/Radio/RadioButton.stories.js +13 -15
  117. package/dist/elements/Radio/RadioDot.js +10 -14
  118. package/dist/elements/Radio/index.js +2 -7
  119. package/dist/elements/Screen/Background.js +3 -7
  120. package/dist/elements/Screen/Body.js +9 -13
  121. package/dist/elements/Screen/BottomView.js +9 -16
  122. package/dist/elements/Screen/FloatingHeader.js +9 -13
  123. package/dist/elements/Screen/FullWidthDivider.js +5 -9
  124. package/dist/elements/Screen/FullWidthItem.js +5 -9
  125. package/dist/elements/Screen/Header.js +21 -49
  126. package/dist/elements/Screen/Screen.stories.js +18 -20
  127. package/dist/elements/Screen/ScreenBase.js +9 -13
  128. package/dist/elements/Screen/ScreenFlatList.js +8 -15
  129. package/dist/elements/Screen/ScreenScrollContext.js +9 -14
  130. package/dist/elements/Screen/ScreenScrollView.js +8 -15
  131. package/dist/elements/Screen/StickySubHeader.js +20 -47
  132. package/dist/elements/Screen/constants.js +5 -8
  133. package/dist/elements/Screen/hooks/useAnimatedHeaderScrolling.js +10 -14
  134. package/dist/elements/Screen/hooks/useListenForScreenScroll.js +10 -14
  135. package/dist/elements/Screen/index.js +29 -46
  136. package/dist/elements/SearchInput/SearchInput.js +6 -10
  137. package/dist/elements/SearchInput/index.js +1 -17
  138. package/dist/elements/Separator/Separator.js +9 -15
  139. package/dist/elements/Separator/Separator.stories.js +6 -10
  140. package/dist/elements/Separator/ShadowSeparator.js +3 -9
  141. package/dist/elements/Separator/index.js +2 -18
  142. package/dist/elements/SimpleMessage/SimpleMessage.js +9 -16
  143. package/dist/elements/SimpleMessage/index.js +1 -17
  144. package/dist/elements/Skeleton/Skeleton.js +16 -45
  145. package/dist/elements/Skeleton/Skeleton.stories.js +10 -14
  146. package/dist/elements/Skeleton/index.js +1 -17
  147. package/dist/elements/Spacer/Spacer.js +3 -7
  148. package/dist/elements/Spacer/Spacer.stories.js +15 -20
  149. package/dist/elements/Spacer/index.js +1 -17
  150. package/dist/elements/Spinner/Spinner.js +15 -23
  151. package/dist/elements/Spinner/index.js +1 -17
  152. package/dist/elements/Switch/Switch.js +8 -12
  153. package/dist/elements/Switch/Switch.stories.js +11 -15
  154. package/dist/elements/Switch/index.js +1 -17
  155. package/dist/elements/Tabs/SubTabBar.js +11 -15
  156. package/dist/elements/Tabs/TabFlashList.js +8 -12
  157. package/dist/elements/Tabs/TabFlatList.js +8 -12
  158. package/dist/elements/Tabs/TabMasonry.js +8 -12
  159. package/dist/elements/Tabs/TabScrollView.js +8 -12
  160. package/dist/elements/Tabs/Tabs.js +24 -27
  161. package/dist/elements/Tabs/Tabs.stories.js +11 -13
  162. package/dist/elements/Tabs/TabsContainer.js +15 -19
  163. package/dist/elements/Tabs/TabsWithHeader.js +8 -12
  164. package/dist/elements/Tabs/hooks/useListenForTabContentScroll.js +8 -12
  165. package/dist/elements/Tabs/index.js +1 -17
  166. package/dist/elements/Text/LinkText.js +3 -7
  167. package/dist/elements/Text/Text.js +15 -21
  168. package/dist/elements/Text/Text.stories.js +18 -27
  169. package/dist/elements/Text/Text.tests.js +3 -5
  170. package/dist/elements/Text/helpers.js +5 -10
  171. package/dist/elements/Text/index.js +3 -19
  172. package/dist/elements/ToolTip/ToolTip.js +29 -34
  173. package/dist/elements/ToolTip/ToolTip.stories.js +11 -13
  174. package/dist/elements/ToolTip/ToolTip.tests.js +7 -9
  175. package/dist/elements/ToolTip/ToolTipFlyout.js +19 -47
  176. package/dist/elements/ToolTip/index.js +1 -17
  177. package/dist/elements/Touchable/Touchable.js +12 -19
  178. package/dist/elements/Touchable/Touchable.stories.js +9 -13
  179. package/dist/elements/Touchable/TouchableHighlightColor.js +6 -10
  180. package/dist/elements/Touchable/TouchableWithScale.js +7 -11
  181. package/dist/elements/Touchable/index.js +3 -19
  182. package/dist/elements/VisualClue/VisualClue.stories.js +6 -8
  183. package/dist/elements/VisualClue/VisualClueDot.js +6 -10
  184. package/dist/elements/VisualClue/VisualClueText.js +9 -13
  185. package/dist/elements/VisualClue/index.js +2 -18
  186. package/dist/elements/index.js +45 -61
  187. package/dist/index.js +10 -26
  188. package/dist/setupJest.js +2 -7
  189. package/dist/storybook/decorators.js +20 -28
  190. package/dist/storybook/helpers.js +6 -12
  191. package/dist/svgs/AddCircleFillIcon.js +6 -10
  192. package/dist/svgs/AddCircleIcon.js +6 -10
  193. package/dist/svgs/AddIcon.js +6 -10
  194. package/dist/svgs/AlertCircleFillIcon.js +6 -10
  195. package/dist/svgs/AlertIcon.js +6 -10
  196. package/dist/svgs/ArrowCircleFillIcons.js +7 -12
  197. package/dist/svgs/ArrowDownCircleIcon.js +6 -10
  198. package/dist/svgs/ArrowDownIcon.js +6 -10
  199. package/dist/svgs/ArrowLeftCircleIcon.js +6 -10
  200. package/dist/svgs/ArrowLeftIcon.js +6 -10
  201. package/dist/svgs/ArrowRightCircleIcon.js +6 -10
  202. package/dist/svgs/ArrowRightIcon.js +6 -10
  203. package/dist/svgs/ArrowUpCircleIcon.js +6 -10
  204. package/dist/svgs/ArrowUpIcon.js +6 -10
  205. package/dist/svgs/ArtsyLogoBlackIcon.js +6 -10
  206. package/dist/svgs/ArtsyLogoWhiteIcon.js +4 -8
  207. package/dist/svgs/ArtsyMarkBlackIcon.js +6 -10
  208. package/dist/svgs/ArtsyMarkWhiteIcon.js +4 -8
  209. package/dist/svgs/ArtworkIcon.js +6 -10
  210. package/dist/svgs/AuctionIcon.js +6 -10
  211. package/dist/svgs/BellFillIcon.js +6 -10
  212. package/dist/svgs/BellIcon.js +6 -10
  213. package/dist/svgs/BlueChipIcon.js +6 -10
  214. package/dist/svgs/BoltCircleFill.js +6 -10
  215. package/dist/svgs/BoltFill.js +6 -10
  216. package/dist/svgs/BookmarkFill.js +6 -10
  217. package/dist/svgs/BriefcaseIcon.js +6 -10
  218. package/dist/svgs/CertificateIcon.js +6 -10
  219. package/dist/svgs/CheckCircleFillIcon.js +6 -10
  220. package/dist/svgs/CheckCircleIcon.js +6 -10
  221. package/dist/svgs/CheckIcon.js +6 -10
  222. package/dist/svgs/ChevronIcon.js +11 -15
  223. package/dist/svgs/ClockFill.js +6 -10
  224. package/dist/svgs/CloseCircleFillIcon.js +6 -10
  225. package/dist/svgs/CloseCircleIcon.js +6 -10
  226. package/dist/svgs/CloseIcon.js +6 -10
  227. package/dist/svgs/CollapseIcon.js +6 -10
  228. package/dist/svgs/CreditCardIcon.js +14 -18
  229. package/dist/svgs/DecreaseIcon.js +6 -10
  230. package/dist/svgs/DocumentIcon.js +6 -10
  231. package/dist/svgs/DownloadIcon.js +6 -10
  232. package/dist/svgs/EditIcon.js +6 -10
  233. package/dist/svgs/EmptyCheckCircleIcon.js +6 -10
  234. package/dist/svgs/EnterIcon.js +6 -10
  235. package/dist/svgs/EnvelopeIcon.js +6 -10
  236. package/dist/svgs/EstablishedIcon.js +6 -10
  237. package/dist/svgs/ExclamationMarkCircleFill.js +6 -10
  238. package/dist/svgs/ExpandIcon.js +6 -10
  239. package/dist/svgs/EyeClosedIcon.js +6 -10
  240. package/dist/svgs/EyeOpenedIcon.js +6 -10
  241. package/dist/svgs/FacebookIcon.js +6 -10
  242. package/dist/svgs/FairIcon.js +6 -10
  243. package/dist/svgs/FilterIcon.js +6 -10
  244. package/dist/svgs/FullWidthIcon.js +6 -10
  245. package/dist/svgs/GenomeIcon.js +6 -10
  246. package/dist/svgs/GraphIcon.js +6 -10
  247. package/dist/svgs/GridIcon.js +6 -10
  248. package/dist/svgs/GuaranteeIcon.js +7 -11
  249. package/dist/svgs/HeartFillIcon.js +6 -10
  250. package/dist/svgs/HeartIcon.js +6 -10
  251. package/dist/svgs/HideIcon.js +6 -10
  252. package/dist/svgs/HomeIcon.js +6 -10
  253. package/dist/svgs/Icon.js +15 -30
  254. package/dist/svgs/ImageIcon.js +6 -10
  255. package/dist/svgs/ImageSetIcon.js +6 -10
  256. package/dist/svgs/IncreaseIcon.js +6 -10
  257. package/dist/svgs/InfoCircleIcon.js +6 -10
  258. package/dist/svgs/InstagramAppIcon.js +3 -7
  259. package/dist/svgs/InstitutionIcon.js +6 -10
  260. package/dist/svgs/LinkIcon.js +6 -10
  261. package/dist/svgs/LoaderIcon.js +6 -10
  262. package/dist/svgs/LockIcon.js +6 -10
  263. package/dist/svgs/LogoutIcon.js +6 -10
  264. package/dist/svgs/MagnifyingGlassIcon.js +6 -10
  265. package/dist/svgs/MapPinIcon.js +6 -10
  266. package/dist/svgs/MenuIcon.js +6 -10
  267. package/dist/svgs/MessageIcon.js +7 -11
  268. package/dist/svgs/MessagesAppIcon.js +4 -8
  269. package/dist/svgs/MoneyCircleIcon.js +6 -10
  270. package/dist/svgs/MoneyFillIcon.js +6 -10
  271. package/dist/svgs/MoreIcon.js +6 -10
  272. package/dist/svgs/MultiplePersonsIcon.js +6 -10
  273. package/dist/svgs/NoArtworkIcon.js +6 -10
  274. package/dist/svgs/NoImageIcon.js +6 -10
  275. package/dist/svgs/PageIcon.js +6 -10
  276. package/dist/svgs/Payment2Icon.js +6 -10
  277. package/dist/svgs/PaymentIcon.js +6 -10
  278. package/dist/svgs/PersonIcon.js +6 -10
  279. package/dist/svgs/PublicationIcon.js +6 -10
  280. package/dist/svgs/QuestionCircleIcon.js +6 -10
  281. package/dist/svgs/ReloadIcon.js +6 -10
  282. package/dist/svgs/SecureLockIcon.js +6 -10
  283. package/dist/svgs/SettingsIcon.js +6 -10
  284. package/dist/svgs/ShareIcon.js +6 -10
  285. package/dist/svgs/ShieldFilledIcon.js +6 -10
  286. package/dist/svgs/ShieldIcon.js +6 -10
  287. package/dist/svgs/StarCircleFill.js +6 -10
  288. package/dist/svgs/StarCircleIcon.js +6 -10
  289. package/dist/svgs/Stopwatch.js +6 -10
  290. package/dist/svgs/Tag2Icon.js +7 -11
  291. package/dist/svgs/TagIcon.js +6 -10
  292. package/dist/svgs/TimerIcon.js +6 -10
  293. package/dist/svgs/TopEmergingIcon.js +6 -10
  294. package/dist/svgs/TrashIcon.js +6 -10
  295. package/dist/svgs/TrendingIcon.js +6 -10
  296. package/dist/svgs/TriangleDown.js +6 -10
  297. package/dist/svgs/TwitterIcon.js +6 -10
  298. package/dist/svgs/UserMultiIcon.js +6 -10
  299. package/dist/svgs/UserSingleIcon.js +6 -10
  300. package/dist/svgs/VerifiedIcon.js +6 -10
  301. package/dist/svgs/VerifiedPersonIcon.js +6 -10
  302. package/dist/svgs/WhatsAppAppIcon.js +4 -8
  303. package/dist/svgs/WorldGlobeCircleIcon.js +6 -10
  304. package/dist/svgs/XCircleIcon.js +6 -10
  305. package/dist/svgs/icons.stories.js +11 -38
  306. package/dist/svgs/index.js +113 -129
  307. package/dist/tokens.js +9 -12
  308. package/dist/types.js +5 -10
  309. package/dist/utils/Wrap.js +7 -11
  310. package/dist/utils/colors.stories.js +16 -20
  311. package/dist/utils/createGeminiUrl.js +6 -10
  312. package/dist/utils/flattenChildren.js +5 -9
  313. package/dist/utils/formatLargeNumber.js +1 -5
  314. package/dist/utils/formatLargeNumbers.tests.js +8 -10
  315. package/dist/utils/hooks/index.js +4 -20
  316. package/dist/utils/hooks/useColor.js +2 -6
  317. package/dist/utils/hooks/useMeasure.js +4 -8
  318. package/dist/utils/hooks/useScreenDimensions.js +11 -16
  319. package/dist/utils/hooks/useSpace.js +2 -6
  320. package/dist/utils/hooks/useTheme.js +6 -10
  321. package/dist/utils/normalizeText.js +1 -5
  322. package/dist/utils/space.stories.js +9 -13
  323. package/dist/utils/tests/renderWithWrappers.js +7 -12
  324. package/dist/utils/text.js +9 -13
  325. package/dist/utils/types.js +1 -2
  326. package/dist/utils/webTokensToMobile.js +4 -9
  327. package/package.json +14 -14
@@ -1,16 +1,12 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.Variants = void 0;
4
- const jsx_runtime_1 = require("react/jsx-runtime");
5
- const Checkbox_1 = require("./Checkbox");
6
- const helpers_1 = require("../../storybook/helpers");
7
- exports.default = {
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { Checkbox } from "./Checkbox";
3
+ import { List, Row } from "../../storybook/helpers";
4
+ export default {
8
5
  title: "Checkbox",
9
- component: Checkbox_1.Checkbox,
6
+ component: Checkbox,
10
7
  };
11
- function Variants() {
12
- return ((0, jsx_runtime_1.jsxs)(helpers_1.List, { style: { marginLeft: 20 }, children: [(0, jsx_runtime_1.jsx)(helpers_1.Row, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { text: "Default" }) }), (0, jsx_runtime_1.jsx)(helpers_1.Row, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { text: "Checked", checked: true }) }), (0, jsx_runtime_1.jsx)(helpers_1.Row, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { text: "Disabled", disabled: true }) }), (0, jsx_runtime_1.jsx)(helpers_1.Row, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { text: "Checked and disabled", checked: true, disabled: true }) }), (0, jsx_runtime_1.jsx)(helpers_1.Row, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { text: "Error", error: true }) }), (0, jsx_runtime_1.jsx)(helpers_1.Row, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { text: `Default with multiline
13
- text` }) }), (0, jsx_runtime_1.jsx)(helpers_1.Row, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { text: "Disabled", subtitle: "With subtitle", disabled: true }) }), (0, jsx_runtime_1.jsx)(helpers_1.Row, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { text: `Error with multiline
8
+ export function Variants() {
9
+ return (_jsxs(List, { style: { marginLeft: 20 }, children: [_jsx(Row, { children: _jsx(Checkbox, { text: "Default" }) }), _jsx(Row, { children: _jsx(Checkbox, { text: "Checked", checked: true }) }), _jsx(Row, { children: _jsx(Checkbox, { text: "Disabled", disabled: true }) }), _jsx(Row, { children: _jsx(Checkbox, { text: "Checked and disabled", checked: true, disabled: true }) }), _jsx(Row, { children: _jsx(Checkbox, { text: "Error", error: true }) }), _jsx(Row, { children: _jsx(Checkbox, { text: `Default with multiline
10
+ text` }) }), _jsx(Row, { children: _jsx(Checkbox, { text: "Disabled", subtitle: "With subtitle", disabled: true }) }), _jsx(Row, { children: _jsx(Checkbox, { text: `Error with multiline
14
11
  text`, subtitle: "With subtitle", error: true }) })] }));
15
12
  }
16
- exports.Variants = Variants;
@@ -1,18 +1,2 @@
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("./Check"), exports);
18
- __exportStar(require("./Checkbox"), exports);
1
+ export * from "./Check";
2
+ export * from "./Checkbox";
@@ -1,10 +1,6 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.ClassTheme = void 0;
4
- const jsx_runtime_1 = require("react/jsx-runtime");
5
- const __1 = require("../../");
6
- const ClassTheme = ({ theme = "v3", children, }) => {
7
- const currentTheme = (0, __1.useTheme)();
8
- return ((0, jsx_runtime_1.jsx)(__1.Theme, { theme: theme, children: typeof children === "function" ? children(currentTheme) : children }));
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { useTheme, Theme } from "../../";
3
+ export const ClassTheme = ({ theme = "v3", children, }) => {
4
+ const currentTheme = useTheme();
5
+ return (_jsx(Theme, { theme: theme, children: typeof children === "function" ? children(currentTheme) : children }));
9
6
  };
10
- exports.ClassTheme = ClassTheme;
@@ -1,17 +1 @@
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("./ClassTheme"), exports);
1
+ export * from "./ClassTheme";
@@ -1,12 +1,8 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.Collapse = void 0;
4
- const jsx_runtime_1 = require("react/jsx-runtime");
5
- const react_native_1 = require("react-native");
6
- const Collapse = ({ opened, children }) => {
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { View } from "react-native";
3
+ export const Collapse = ({ opened, children }) => {
7
4
  if (!opened) {
8
5
  return null;
9
6
  }
10
- return (0, jsx_runtime_1.jsx)(react_native_1.View, { children: children });
7
+ return _jsx(View, { children: children });
11
8
  };
12
- exports.Collapse = Collapse;
@@ -1,16 +1,12 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.Something = void 0;
4
- const jsx_runtime_1 = require("react/jsx-runtime");
5
- const react_1 = require("react");
6
- const Collapse_1 = require("./Collapse");
7
- const Text_1 = require("../Text");
8
- exports.default = {
1
+ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { useState } from "react";
3
+ import { Collapse } from "./Collapse";
4
+ import { LinkText, Text } from "../Text";
5
+ export default {
9
6
  title: "Collapse",
10
- component: Collapse_1.Collapse,
7
+ component: Collapse,
11
8
  };
12
- const Something = () => {
13
- const [opened, setOpened] = (0, react_1.useState)(true);
14
- return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Text_1.LinkText, { onPress: () => setOpened((v) => !v), children: "toggle" }), (0, jsx_runtime_1.jsx)(Collapse_1.Collapse, { opened: opened, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "inside" }) })] }));
9
+ export const Something = () => {
10
+ const [opened, setOpened] = useState(true);
11
+ return (_jsxs(_Fragment, { children: [_jsx(LinkText, { onPress: () => setOpened((v) => !v), children: "toggle" }), _jsx(Collapse, { opened: opened, children: _jsx(Text, { children: "inside" }) })] }));
15
12
  };
16
- exports.Something = Something;
@@ -1,17 +1 @@
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("./Collapse"), exports);
1
+ export * from "./Collapse";
@@ -1,28 +1,25 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.CollapsibleMenuItem = void 0;
4
- const jsx_runtime_1 = require("react/jsx-runtime");
5
- const react_1 = require("react");
6
- const react_native_1 = require("react-native");
7
- const svgs_1 = require("../../svgs");
8
- const Collapse_1 = require("../Collapse");
9
- const Flex_1 = require("../Flex");
10
- const Text_1 = require("../Text");
11
- const Touchable_1 = require("../Touchable");
12
- exports.CollapsibleMenuItem = (0, react_1.forwardRef)(({ children, overtitle, title, isExpanded = false, disabled = false, onExpand, onCollapse }, ref) => {
13
- const [isOpen, setIsOpen] = (0, react_1.useState)(false);
14
- const [isCompleted, setIsCompleted] = (0, react_1.useState)(false);
15
- const componentRef = (0, react_1.useRef)(null);
16
- (0, react_1.useEffect)(() => {
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
3
+ import { LayoutAnimation } from "react-native";
4
+ import { CheckCircleIcon, ChevronIcon } from "../../svgs";
5
+ import { Collapse } from "../Collapse";
6
+ import { Flex } from "../Flex";
7
+ import { Text } from "../Text";
8
+ import { Touchable } from "../Touchable";
9
+ export const CollapsibleMenuItem = forwardRef(({ children, overtitle, title, isExpanded = false, disabled = false, onExpand, onCollapse }, ref) => {
10
+ const [isOpen, setIsOpen] = useState(false);
11
+ const [isCompleted, setIsCompleted] = useState(false);
12
+ const componentRef = useRef(null);
13
+ useEffect(() => {
17
14
  setIsOpen(isExpanded);
18
15
  }, []);
19
- (0, react_1.useImperativeHandle)(ref, () => ({
16
+ useImperativeHandle(ref, () => ({
20
17
  collapse(onAnimationEnd) {
21
- react_native_1.LayoutAnimation.configureNext(react_native_1.LayoutAnimation.Presets.easeInEaseOut, onAnimationEnd);
18
+ LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut, onAnimationEnd);
22
19
  setIsOpen(false);
23
20
  },
24
21
  expand(onAnimationEnd) {
25
- react_native_1.LayoutAnimation.configureNext(react_native_1.LayoutAnimation.Presets.easeInEaseOut, onAnimationEnd);
22
+ LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut, onAnimationEnd);
26
23
  setIsOpen(true);
27
24
  },
28
25
  completed() {
@@ -39,8 +36,8 @@ exports.CollapsibleMenuItem = (0, react_1.forwardRef)(({ children, overtitle, ti
39
36
  });
40
37
  },
41
38
  }), [isOpen]);
42
- return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { ref: componentRef, collapsable: false, children: [(0, jsx_runtime_1.jsxs)(Touchable_1.Touchable, { onPress: () => {
39
+ return (_jsxs(Flex, { ref: componentRef, collapsable: false, children: [_jsxs(Touchable, { onPress: () => {
43
40
  setIsOpen(!isOpen);
44
41
  isOpen ? onCollapse?.() : onExpand?.();
45
- }, disabled: disabled, children: [!!overtitle && ((0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "sm", color: disabled ? "black30" : "black100", children: overtitle })), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", justifyContent: "space-between", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "lg", color: disabled ? "black30" : "black100", style: { maxWidth: "90%" }, children: title }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", children: [!!isCompleted && ((0, jsx_runtime_1.jsx)(svgs_1.CheckCircleIcon, { fill: "green100", height: 24, width: 24, style: { marginRight: 5 } })), (0, jsx_runtime_1.jsx)(svgs_1.ChevronIcon, { direction: isOpen ? "up" : "down", fill: disabled ? "black30" : "black60" })] })] })] }), (0, jsx_runtime_1.jsx)(Collapse_1.Collapse, { opened: isOpen, children: children })] }));
42
+ }, disabled: disabled, children: [!!overtitle && (_jsx(Text, { variant: "sm", color: disabled ? "black30" : "black100", children: overtitle })), _jsxs(Flex, { flexDirection: "row", justifyContent: "space-between", alignItems: "center", children: [_jsx(Text, { variant: "lg", color: disabled ? "black30" : "black100", style: { maxWidth: "90%" }, children: title }), _jsxs(Flex, { flexDirection: "row", alignItems: "center", children: [!!isCompleted && (_jsx(CheckCircleIcon, { fill: "green100", height: 24, width: 24, style: { marginRight: 5 } })), _jsx(ChevronIcon, { direction: isOpen ? "up" : "down", fill: disabled ? "black30" : "black60" })] })] })] }), _jsx(Collapse, { opened: isOpen, children: children })] }));
46
43
  });
@@ -1,40 +1,33 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.ComponentWithCollapsibleMenu = exports.DisplayContent = exports.ContactInformation = exports.UploadPhotos = exports.ArtworkDetails = void 0;
4
- const jsx_runtime_1 = require("react/jsx-runtime");
5
- const react_native_1 = require("@storybook/react-native");
6
- const react_1 = require("react");
7
- const react_native_2 = require("react-native");
8
- const CollapsibleMenuItem_1 = require("./CollapsibleMenuItem");
9
- const Button_1 = require("../Button");
10
- const Flex_1 = require("../Flex");
11
- const Join_1 = require("../Join");
12
- const Separator_1 = require("../Separator");
13
- const Spacer_1 = require("../Spacer");
14
- const Text_1 = require("../Text");
15
- const ArtworkDetails = ({ handlePress }) => {
16
- return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { backgroundColor: "peachpuff", p: 1, mt: 1, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: "ArtworkDetails content" }), (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { y: 1 }), (0, jsx_runtime_1.jsx)(CTAButton, { text: "Save & Continue", onPress: handlePress })] }));
1
+ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
+ import { storiesOf } from "@storybook/react-native";
3
+ import { useRef, useState } from "react";
4
+ import { ScrollView, View } from "react-native";
5
+ import { CollapsibleMenuItem } from "./CollapsibleMenuItem";
6
+ import { Button } from "../Button";
7
+ import { Flex } from "../Flex";
8
+ import { Join } from "../Join";
9
+ import { Separator } from "../Separator";
10
+ import { Spacer } from "../Spacer";
11
+ import { Text } from "../Text";
12
+ export const ArtworkDetails = ({ handlePress }) => {
13
+ return (_jsxs(Flex, { backgroundColor: "peachpuff", p: 1, mt: 1, children: [_jsx(Text, { children: "ArtworkDetails content" }), _jsx(Spacer, { y: 1 }), _jsx(CTAButton, { text: "Save & Continue", onPress: handlePress })] }));
17
14
  };
18
- exports.ArtworkDetails = ArtworkDetails;
19
- const UploadPhotos = ({ handlePress }) => {
20
- return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { backgroundColor: "peachpuff", p: 1, mt: 1, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Upload Photos content" }), (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { y: 1 }), (0, jsx_runtime_1.jsx)(CTAButton, { text: "Save & Continue", onPress: handlePress })] }));
15
+ export const UploadPhotos = ({ handlePress }) => {
16
+ return (_jsxs(Flex, { backgroundColor: "peachpuff", p: 1, mt: 1, children: [_jsx(Text, { children: "Upload Photos content" }), _jsx(Spacer, { y: 1 }), _jsx(CTAButton, { text: "Save & Continue", onPress: handlePress })] }));
21
17
  };
22
- exports.UploadPhotos = UploadPhotos;
23
- const ContactInformation = ({ handlePress }) => {
24
- return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { backgroundColor: "peachpuff", p: 1, mt: 1, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: "ContactInformation content" }), (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { y: 1 }), (0, jsx_runtime_1.jsx)(CTAButton, { text: "Submit Artwork", onPress: handlePress })] }));
18
+ export const ContactInformation = ({ handlePress }) => {
19
+ return (_jsxs(Flex, { backgroundColor: "peachpuff", p: 1, mt: 1, children: [_jsx(Text, { children: "ContactInformation content" }), _jsx(Spacer, { y: 1 }), _jsx(CTAButton, { text: "Submit Artwork", onPress: handlePress })] }));
25
20
  };
26
- exports.ContactInformation = ContactInformation;
27
- const CTAButton = ({ onPress, text }) => ((0, jsx_runtime_1.jsx)(Button_1.Button, { block: true, haptic: true, maxWidth: 540, onPress: onPress, children: text }));
28
- const DisplayContent = () => {
29
- return ((0, jsx_runtime_1.jsx)(react_native_2.View, { style: { backgroundColor: `rgba(255,145,125,.3)`, padding: 20, marginTop: 20 }, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "This is the collapsible menu content" }) }));
21
+ const CTAButton = ({ onPress, text }) => (_jsx(Button, { block: true, haptic: true, maxWidth: 540, onPress: onPress, children: text }));
22
+ export const DisplayContent = () => {
23
+ return (_jsx(View, { style: { backgroundColor: `rgba(255,145,125,.3)`, padding: 20, marginTop: 20 }, children: _jsx(Text, { children: "This is the collapsible menu content" }) }));
30
24
  };
31
- exports.DisplayContent = DisplayContent;
32
- const ComponentWithCollapsibleMenu = () => {
25
+ export const ComponentWithCollapsibleMenu = () => {
33
26
  const items = [
34
27
  {
35
28
  overtitle: "Optional overtitle",
36
29
  title: "Artwork Details",
37
- Content: ((0, jsx_runtime_1.jsx)(exports.ArtworkDetails, { handlePress: () => {
30
+ Content: (_jsx(ArtworkDetails, { handlePress: () => {
38
31
  expandCollapsibleMenuContent(1);
39
32
  enableStep(1);
40
33
  } })),
@@ -42,7 +35,7 @@ const ComponentWithCollapsibleMenu = () => {
42
35
  {
43
36
  overtitle: "Optional overtitle",
44
37
  title: "Upload Photos",
45
- Content: ((0, jsx_runtime_1.jsx)(exports.UploadPhotos, { handlePress: () => {
38
+ Content: (_jsx(UploadPhotos, { handlePress: () => {
46
39
  expandCollapsibleMenuContent(2);
47
40
  enableStep(2);
48
41
  } })),
@@ -50,15 +43,15 @@ const ComponentWithCollapsibleMenu = () => {
50
43
  {
51
44
  overtitle: "Optional overtitle",
52
45
  title: "Contact Information",
53
- Content: ((0, jsx_runtime_1.jsx)(exports.ContactInformation, { handlePress: () => {
46
+ Content: (_jsx(ContactInformation, { handlePress: () => {
54
47
  // navigation.navigate("ArtworkSubmittedScreen")
55
48
  // do nothing
56
49
  } })),
57
50
  },
58
51
  ];
59
52
  const TOTAL_STEPS = items.length;
60
- const [validSteps, setValidSteps] = (0, react_1.useState)([true, ...new Array(TOTAL_STEPS - 1).fill(false)]);
61
- const stepsRefs = (0, react_1.useRef)(new Array(TOTAL_STEPS).fill(null)).current;
53
+ const [validSteps, setValidSteps] = useState([true, ...new Array(TOTAL_STEPS - 1).fill(false)]);
54
+ const stepsRefs = useRef(new Array(TOTAL_STEPS).fill(null)).current;
62
55
  const enableStep = (stepIndex) => {
63
56
  const newValidSteps = [...validSteps];
64
57
  newValidSteps[stepIndex] = true;
@@ -77,18 +70,17 @@ const ComponentWithCollapsibleMenu = () => {
77
70
  }
78
71
  });
79
72
  };
80
- return ((0, jsx_runtime_1.jsx)(react_native_2.View, { style: { margin: 20 }, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { children: (0, jsx_runtime_1.jsxs)(react_native_2.ScrollView, { contentContainerStyle: {
73
+ return (_jsx(View, { style: { margin: 20 }, children: _jsx(Flex, { children: _jsxs(ScrollView, { contentContainerStyle: {
81
74
  paddingVertical: 20,
82
75
  paddingHorizontal: 20,
83
76
  justifyContent: "center",
84
- }, children: [(0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { y: 4 }), (0, jsx_runtime_1.jsx)(Join_1.Join, { separator: (0, jsx_runtime_1.jsx)(Separator_1.Separator, { my: 2, marginTop: "40", marginBottom: "20" }), children: items.map(({ overtitle, title, Content }, index) => {
77
+ }, children: [_jsx(Spacer, { y: 4 }), _jsx(Join, { separator: _jsx(Separator, { my: 2, marginTop: "40", marginBottom: "20" }), children: items.map(({ overtitle, title, Content }, index) => {
85
78
  const disabled = !validSteps[index];
86
- return ((0, jsx_runtime_1.jsx)(CollapsibleMenuItem_1.CollapsibleMenuItem, { overtitle: overtitle, title: title, onExpand: () => expandCollapsibleMenuContent(index), isExpanded: index === 0, disabled: disabled, ref: (ref) => {
79
+ return (_jsx(CollapsibleMenuItem, { overtitle: overtitle, title: title, onExpand: () => expandCollapsibleMenuContent(index), isExpanded: index === 0, disabled: disabled, ref: (ref) => {
87
80
  if (ref) {
88
81
  stepsRefs[index] = ref;
89
82
  }
90
83
  }, children: Content }, index));
91
84
  }) })] }) }) }));
92
85
  };
93
- exports.ComponentWithCollapsibleMenu = ComponentWithCollapsibleMenu;
94
- (0, react_native_1.storiesOf)("Collapsible Menu ", module).add("Collapse Collapse Items", () => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(exports.ComponentWithCollapsibleMenu, {}) })));
86
+ storiesOf("Collapsible Menu ", module).add("Collapse Collapse Items", () => (_jsx(_Fragment, { children: _jsx(ComponentWithCollapsibleMenu, {}) })));
@@ -1,17 +1 @@
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("./CollapsibleMenuItem"), exports);
1
+ export * from "./CollapsibleMenuItem";
@@ -1,22 +1,19 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.Dialog = void 0;
4
- const jsx_runtime_1 = require("react/jsx-runtime");
5
- const react_1 = require("react");
6
- const react_native_1 = require("react-native");
7
- const react_native_safe_area_context_1 = require("react-native-safe-area-context");
8
- const useTheme_1 = require("../../utils/hooks/useTheme");
9
- const Button_1 = require("../Button");
10
- const Flex_1 = require("../Flex");
11
- const Text_1 = require("../Text");
12
- const Dialog = (props) => {
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { useEffect, useRef, useState } from "react";
3
+ import { Animated, Modal, ScrollView, StyleSheet, TouchableWithoutFeedback } from "react-native";
4
+ import { SafeAreaView } from "react-native-safe-area-context";
5
+ import { useTheme } from "../../utils/hooks/useTheme";
6
+ import { Button } from "../Button";
7
+ import { Flex } from "../Flex";
8
+ import { Text } from "../Text";
9
+ export const Dialog = (props) => {
13
10
  const { isVisible, title, detail, primaryCta, secondaryCta, onBackgroundPress, ...other } = props;
14
- const [visible, setVisible] = (0, react_1.useState)(isVisible);
15
- const { space, color } = (0, useTheme_1.useTheme)();
16
- const value = (0, react_1.useRef)(new react_native_1.Animated.Value(Number(isVisible))).current;
11
+ const [visible, setVisible] = useState(isVisible);
12
+ const { space, color } = useTheme();
13
+ const value = useRef(new Animated.Value(Number(isVisible))).current;
17
14
  const fadeIn = () => {
18
15
  return new Promise((resolve) => {
19
- react_native_1.Animated.timing(value, {
16
+ Animated.timing(value, {
20
17
  toValue: 1,
21
18
  useNativeDriver: true,
22
19
  duration: 180,
@@ -25,14 +22,14 @@ const Dialog = (props) => {
25
22
  };
26
23
  const fadeOut = () => {
27
24
  return new Promise((resolve) => {
28
- react_native_1.Animated.timing(value, {
25
+ Animated.timing(value, {
29
26
  toValue: 0,
30
27
  useNativeDriver: true,
31
28
  duration: 150,
32
29
  }).start(resolve);
33
30
  });
34
31
  };
35
- (0, react_1.useEffect)(() => {
32
+ useEffect(() => {
36
33
  if (isVisible) {
37
34
  setVisible(true);
38
35
  fadeIn();
@@ -43,17 +40,17 @@ const Dialog = (props) => {
43
40
  });
44
41
  }
45
42
  }, [isVisible]);
46
- const backdrop = ((0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { style: [
47
- react_native_1.StyleSheet.absoluteFillObject,
43
+ const backdrop = (_jsx(Animated.View, { style: [
44
+ StyleSheet.absoluteFillObject,
48
45
  { opacity: value, backgroundColor: "rgba(194,194,194,0.5)" },
49
46
  ] }));
50
- return ((0, jsx_runtime_1.jsxs)(react_native_1.Modal, { ...other, visible: visible, statusBarTranslucent: true, transparent: true, animationType: "none", children: [!!onBackgroundPress ? ((0, jsx_runtime_1.jsx)(react_native_1.TouchableWithoutFeedback, { testID: "dialog-backdrop", onPress: onBackgroundPress, children: backdrop })) : (backdrop), (0, jsx_runtime_1.jsx)(react_native_safe_area_context_1.SafeAreaView, { pointerEvents: "box-none", style: {
47
+ return (_jsxs(Modal, { ...other, visible: visible, statusBarTranslucent: true, transparent: true, animationType: "none", children: [!!onBackgroundPress ? (_jsx(TouchableWithoutFeedback, { testID: "dialog-backdrop", onPress: onBackgroundPress, children: backdrop })) : (backdrop), _jsx(SafeAreaView, { pointerEvents: "box-none", style: {
51
48
  flex: 1,
52
49
  justifyContent: "center",
53
50
  alignItems: "center",
54
51
  padding: space(2),
55
52
  backgroundColor: "transparent",
56
- }, children: (0, jsx_runtime_1.jsxs)(react_native_1.Animated.View, { style: {
53
+ }, children: _jsxs(Animated.View, { style: {
57
54
  width: "100%",
58
55
  maxHeight: "100%",
59
56
  opacity: value,
@@ -67,6 +64,5 @@ const Dialog = (props) => {
67
64
  },
68
65
  shadowOpacity: 1,
69
66
  shadowRadius: 10,
70
- }, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { testID: "dialog-title", variant: "sm-display", mb: 0.5, mt: 2, mx: 2, children: title }), !!detail && ((0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { alwaysBounceVertical: false, contentContainerStyle: { paddingHorizontal: space(2) }, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { testID: "dialog-detail", variant: "sm", color: "black60", children: detail }) })), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { mt: 2, mb: 2, mx: 2, flexDirection: "row", justifyContent: "flex-end", children: [!!secondaryCta && ((0, jsx_runtime_1.jsx)(Button_1.Button, { size: "small", testID: "dialog-secondary-action-button", variant: "text", onPress: secondaryCta.onPress, children: secondaryCta.text })), (0, jsx_runtime_1.jsx)(Button_1.Button, { size: "small", variant: "fillDark", testID: "dialog-primary-action-button", ml: 2, onPress: primaryCta.onPress, children: primaryCta.text })] })] }) })] }));
67
+ }, children: [_jsx(Text, { testID: "dialog-title", variant: "sm-display", mb: 0.5, mt: 2, mx: 2, children: title }), !!detail && (_jsx(ScrollView, { alwaysBounceVertical: false, contentContainerStyle: { paddingHorizontal: space(2) }, children: _jsx(Text, { testID: "dialog-detail", variant: "sm", color: "black60", children: detail }) })), _jsxs(Flex, { mt: 2, mb: 2, mx: 2, flexDirection: "row", justifyContent: "flex-end", children: [!!secondaryCta && (_jsx(Button, { size: "small", testID: "dialog-secondary-action-button", variant: "text", onPress: secondaryCta.onPress, children: secondaryCta.text })), _jsx(Button, { size: "small", variant: "fillDark", testID: "dialog-primary-action-button", ml: 2, onPress: primaryCta.onPress, children: primaryCta.text })] })] }) })] }));
71
68
  };
72
- exports.Dialog = Dialog;
@@ -1,24 +1,22 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const jsx_runtime_1 = require("react/jsx-runtime");
4
- const react_native_1 = require("@storybook/react-native");
5
- const react_1 = require("react");
6
- const _1 = require(".");
7
- const helpers_1 = require("../../storybook/helpers");
8
- const Button_1 = require("../Button");
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { storiesOf } from "@storybook/react-native";
3
+ import { useState } from "react";
4
+ import { Dialog } from ".";
5
+ import { List } from "../../storybook/helpers";
6
+ import { Button } from "../Button";
9
7
  const DialogDemo = (props) => {
10
- const [visible, setVisible] = (0, react_1.useState)(false);
11
- return ((0, jsx_runtime_1.jsxs)(helpers_1.List, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { onPress: () => setVisible(true), children: "Show" }), (0, jsx_runtime_1.jsx)(_1.Dialog, { isVisible: visible, title: "Dialog Title", primaryCta: {
8
+ const [visible, setVisible] = useState(false);
9
+ return (_jsxs(List, { children: [_jsx(Button, { onPress: () => setVisible(true), children: "Show" }), _jsx(Dialog, { isVisible: visible, title: "Dialog Title", primaryCta: {
12
10
  text: "OK",
13
11
  onPress: () => setVisible(false),
14
12
  }, ...props })] }));
15
13
  };
16
- (0, react_native_1.storiesOf)("Dialog", module)
17
- .add("Default", () => (0, jsx_runtime_1.jsx)(DialogDemo, {}))
18
- .add("With secondary action", () => ((0, jsx_runtime_1.jsx)(DialogDemo, { secondaryCta: {
14
+ storiesOf("Dialog", module)
15
+ .add("Default", () => _jsx(DialogDemo, {}))
16
+ .add("With secondary action", () => (_jsx(DialogDemo, { secondaryCta: {
19
17
  text: "Cancel",
20
18
  onPress: () => { },
21
19
  } })))
22
- .add("With details", () => ((0, jsx_runtime_1.jsx)(DialogDemo, { detail: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum." })))
23
- .add("With long details", () => ((0, jsx_runtime_1.jsx)(DialogDemo, { detail: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.".repeat(100) })))
24
- .add("With background press handler", () => (0, jsx_runtime_1.jsx)(DialogDemo, { onBackgroundPress: () => { } }));
20
+ .add("With details", () => (_jsx(DialogDemo, { detail: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum." })))
21
+ .add("With long details", () => (_jsx(DialogDemo, { detail: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.".repeat(100) })))
22
+ .add("With background press handler", () => _jsx(DialogDemo, { onBackgroundPress: () => { } }));
@@ -1,19 +1,17 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const jsx_runtime_1 = require("react/jsx-runtime");
4
- const react_native_1 = require("@testing-library/react-native");
5
- const Dialog_1 = require("./Dialog");
6
- const renderWithWrappers_1 = require("../../utils/tests/renderWithWrappers");
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { fireEvent } from "@testing-library/react-native";
3
+ import { Dialog } from "./Dialog";
4
+ import { renderWithWrappers } from "../../utils/tests/renderWithWrappers";
7
5
  describe("Dialog", () => {
8
6
  it("renders without error", () => {
9
- const { getByText } = (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(Dialog_1.Dialog, { title: "title", isVisible: true, primaryCta: {
7
+ const { getByText } = renderWithWrappers(_jsx(Dialog, { title: "title", isVisible: true, primaryCta: {
10
8
  text: "Primary Action Button",
11
9
  onPress: jest.fn(),
12
10
  } }));
13
11
  expect(getByText("title")).toBeTruthy();
14
12
  });
15
13
  it("should render details if it is passed", () => {
16
- const { getByText } = (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(Dialog_1.Dialog, { title: "title", detail: "Some unique detail", isVisible: true, primaryCta: {
14
+ const { getByText } = renderWithWrappers(_jsx(Dialog, { title: "title", detail: "Some unique detail", isVisible: true, primaryCta: {
17
15
  text: "Primary Action Button",
18
16
  onPress: jest.fn(),
19
17
  } }));
@@ -21,18 +19,18 @@ describe("Dialog", () => {
21
19
  });
22
20
  it("should render the primary action button", () => {
23
21
  const primaryActionMock = jest.fn();
24
- const { getByTestId, getByText } = (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(Dialog_1.Dialog, { title: "title", isVisible: true, primaryCta: {
22
+ const { getByTestId, getByText } = renderWithWrappers(_jsx(Dialog, { title: "title", isVisible: true, primaryCta: {
25
23
  text: "Primary Action Button",
26
24
  onPress: primaryActionMock,
27
25
  } }));
28
26
  const primaryButton = getByTestId("dialog-primary-action-button");
29
- react_native_1.fireEvent.press(primaryButton);
27
+ fireEvent.press(primaryButton);
30
28
  expect(primaryActionMock).toHaveBeenCalled();
31
29
  expect(getByText("Primary Action Button")).toBeTruthy();
32
30
  });
33
31
  it("should render the secondary action button if it is passed", () => {
34
32
  const secondaryActionMock = jest.fn();
35
- const { getByTestId, getByText } = (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(Dialog_1.Dialog, { title: "title", isVisible: true, primaryCta: {
33
+ const { getByTestId, getByText } = renderWithWrappers(_jsx(Dialog, { title: "title", isVisible: true, primaryCta: {
36
34
  text: "Primary Action Button",
37
35
  onPress: jest.fn(),
38
36
  }, secondaryCta: {
@@ -40,17 +38,17 @@ describe("Dialog", () => {
40
38
  onPress: secondaryActionMock,
41
39
  } }));
42
40
  const secondaryButton = getByTestId("dialog-secondary-action-button");
43
- react_native_1.fireEvent.press(secondaryButton);
41
+ fireEvent.press(secondaryButton);
44
42
  expect(secondaryActionMock).toHaveBeenCalled();
45
43
  expect(getByText("Secondary Action Button")).toBeTruthy();
46
44
  });
47
45
  it("should call onBackgroundPress when backdrop is pressed", () => {
48
46
  const onBackgroundPressMock = jest.fn();
49
- const { getByTestId } = (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(Dialog_1.Dialog, { title: "title", isVisible: true, onBackgroundPress: onBackgroundPressMock, primaryCta: {
47
+ const { getByTestId } = renderWithWrappers(_jsx(Dialog, { title: "title", isVisible: true, onBackgroundPress: onBackgroundPressMock, primaryCta: {
50
48
  text: "Primary Action Button",
51
49
  onPress: jest.fn(),
52
50
  } }));
53
- react_native_1.fireEvent.press(getByTestId("dialog-backdrop"));
51
+ fireEvent.press(getByTestId("dialog-backdrop"));
54
52
  expect(onBackgroundPressMock).toHaveBeenCalled();
55
53
  });
56
54
  });
@@ -1,17 +1 @@
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("./Dialog"), exports);
1
+ export * from "./Dialog";