@cashub/ui 0.22.8 → 0.22.9

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 (698) hide show
  1. package/dist/package.json +50 -0
  2. package/{table → dist/table}/Table.js +4 -3
  3. package/package.json +59 -50
  4. package/setupTests.js +9 -0
  5. package/src/Tab/Tab.js +11 -0
  6. package/src/Tab/TabList.js +20 -0
  7. package/src/Tab/TabPanel.js +35 -0
  8. package/src/Tab/TabTab.js +42 -0
  9. package/src/Tab/__stories__/Tab.stories.js +48 -0
  10. package/src/Tab/__stories__/TabList.stories.js +26 -0
  11. package/src/Tab/__stories__/TabPanel.stories.js +45 -0
  12. package/src/Tab/__stories__/TabTab.stories.js +30 -0
  13. package/src/Tab/__test__/Tab.test.js +43 -0
  14. package/src/Tab/__test__/TabList.test.js +22 -0
  15. package/src/Tab/__test__/TabPanel.test.js +27 -0
  16. package/src/Tab/__test__/TabTab.test.js +58 -0
  17. package/src/Tab/index.js +10 -0
  18. package/src/Tab/subComponent/TabContext.js +5 -0
  19. package/src/animate/Collapse.js +68 -0
  20. package/src/animate/Loader.js +36 -0
  21. package/src/animate/NumberCounter.js +49 -0
  22. package/src/animate/PulseRing.js +25 -0
  23. package/src/animate/Spinner.js +13 -0
  24. package/src/animate/__stories__/Collapse.stories.js +60 -0
  25. package/src/animate/__stories__/Loader.stories.js +33 -0
  26. package/src/animate/__stories__/NumberCounter.stories.js +29 -0
  27. package/src/animate/__stories__/PulseRing.stories.js +17 -0
  28. package/src/animate/__stories__/Spinner.stories.js +13 -0
  29. package/src/animate/__test__/Collapse.test.js +125 -0
  30. package/src/animate/__test__/Loader.test.js +42 -0
  31. package/src/animate/__test__/NumberCounter.test.js +71 -0
  32. package/src/animate/__test__/PulseRing.test.js +37 -0
  33. package/src/animate/__test__/Spinner.test.js +18 -0
  34. package/src/animate/index.js +5 -0
  35. package/src/assets/css/autocomplete.css +16 -0
  36. package/src/assets/css/font.css +4 -0
  37. package/src/assets/css/global.css +3 -0
  38. package/src/assets/css/normalize.css +386 -0
  39. package/src/assets/font/helvetica/Helvetica.ttf +0 -0
  40. package/src/assets/font/nanumGothic/NanumGothic-Bold.ttf +0 -0
  41. package/src/assets/font/nanumGothic/NanumGothic-ExtraBold.ttf +0 -0
  42. package/src/assets/font/nanumGothic/NanumGothic-Regular.ttf +0 -0
  43. package/src/assets/icons/app-management.png +0 -0
  44. package/src/assets/icons/burger.png +0 -0
  45. package/src/assets/icons/file.svg +1 -0
  46. package/src/assets/icons/map_icon1.png +0 -0
  47. package/src/assets/icons/map_icon4.png +0 -0
  48. package/src/assets/images/bg-chart-circle.png +0 -0
  49. package/src/assets/images/bg-chart-triangle.png +0 -0
  50. package/src/assets/images/cashub-logo-only.png +0 -0
  51. package/src/assets/images/default-user.jpg +0 -0
  52. package/src/assets/images/logo-cashub.png +0 -0
  53. package/src/assets/images/map.png +0 -0
  54. package/src/assets/images/qrcode.png +0 -0
  55. package/src/backdrop/BaseBackdrop.js +13 -0
  56. package/src/backdrop/LoadingBackdrop.js +12 -0
  57. package/src/backdrop/ModalBackdrop.js +10 -0
  58. package/src/backdrop/__test__/BaseBackdrop.test.js +10 -0
  59. package/src/backdrop/__test__/LoadingBackdrop.test.js +9 -0
  60. package/src/backdrop/__test__/ModalBackdrop.test.js +8 -0
  61. package/src/backdrop/index.js +3 -0
  62. package/src/badge/Badge.js +21 -0
  63. package/src/badge/BadgeDot.js +13 -0
  64. package/src/badge/BadgeFill.js +29 -0
  65. package/src/badge/BadgeWithText.js +21 -0
  66. package/src/badge/__stories__/Badge.stories.js +43 -0
  67. package/src/badge/__stories__/BadgeDot.stories.js +23 -0
  68. package/src/badge/__stories__/BadgeFill.stories.js +29 -0
  69. package/src/badge/__stories__/BadgeWithText.stories.js +26 -0
  70. package/src/badge/__test__/Badge.test.js +19 -0
  71. package/src/badge/__test__/BadgeDot.test.js +22 -0
  72. package/src/badge/__test__/BadgeFill.test.js +41 -0
  73. package/src/badge/__test__/BadgeWithText.test.js +22 -0
  74. package/src/badge/index.js +4 -0
  75. package/src/billing/BarChart.js +42 -0
  76. package/src/billing/Grid.js +30 -0
  77. package/src/billing/Header2.js +15 -0
  78. package/src/billing/Header3.js +32 -0
  79. package/src/billing/Paragraph.js +27 -0
  80. package/src/billing/ParagraphGroup.js +12 -0
  81. package/src/billing/ParagraphText.js +16 -0
  82. package/src/billing/Section.js +48 -0
  83. package/src/billing/SectionBody.js +7 -0
  84. package/src/billing/SectionHeader.js +16 -0
  85. package/src/billing/__stories__/BarChart.stories.js_bak +46 -0
  86. package/src/billing/__stories__/Grid.stories.js_bak +57 -0
  87. package/src/billing/__stories__/Header2.stories.js_bak +62 -0
  88. package/src/billing/__stories__/Header3.stories.js_bak +69 -0
  89. package/src/billing/__stories__/Paragraph.stories.js_bak +84 -0
  90. package/src/billing/__stories__/ParagraphGroup.stories.js_bak +68 -0
  91. package/src/billing/__stories__/ParagraphText.stories.js_bak +64 -0
  92. package/src/billing/__stories__/Section.stories.js_bak +115 -0
  93. package/src/billing/__stories__/SectionBody.stories.js_bak +62 -0
  94. package/src/billing/__stories__/SectionHeader.stories.js-bak +68 -0
  95. package/src/breadcrumb/Breadcrumb.js +66 -0
  96. package/src/breadcrumb/__stories__/Breadcrumb.stories.js +31 -0
  97. package/src/breadcrumb/__test__/breadcrumb.test.js +27 -0
  98. package/src/breadcrumb/index.js +1 -0
  99. package/src/button/Button.js +80 -0
  100. package/src/button/ButtonGroup.js +33 -0
  101. package/src/button/IconButton.js +40 -0
  102. package/src/button/ScrollToTopButton.js +48 -0
  103. package/src/button/__stories__/Button.stories.js +70 -0
  104. package/src/button/__stories__/ButtonGroup.stories.js +48 -0
  105. package/src/button/__stories__/IconButton.stories.js +30 -0
  106. package/src/button/__stories__/ScrollToTopButton.stories.js +22 -0
  107. package/src/button/__test__/Button.test.js +32 -0
  108. package/src/button/__test__/ButtonGroup.test.js +25 -0
  109. package/src/button/__test__/IconButton.test.js +34 -0
  110. package/src/button/__test__/ScrollToTopButton.test.js +19 -0
  111. package/src/button/index.js +4 -0
  112. package/src/callout/Callout.js +52 -0
  113. package/src/callout/__stories__/Callout.stories.js +23 -0
  114. package/src/callout/__test__/Callout.test.js +29 -0
  115. package/src/callout/index.js +1 -0
  116. package/src/chart/BarChart.js +134 -0
  117. package/src/chart/DoughnutChart.js +82 -0
  118. package/src/chart/LineChart.js +114 -0
  119. package/src/chart/SingleBarChart.js +27 -0
  120. package/src/chart/__stories__/BarChart.stories.js +54 -0
  121. package/src/chart/__stories__/DoughnutChart.stories.js +33 -0
  122. package/src/chart/__stories__/LineChart.stories.js +73 -0
  123. package/src/chart/__stories__/SingleBarChart.stories.js +22 -0
  124. package/src/chart/index.js +5 -0
  125. package/src/chart/utils/customTooltip.js +108 -0
  126. package/src/chart/utils/htmlLegendPlugin.js +88 -0
  127. package/src/chart/utils/index.js +3 -0
  128. package/src/chart/utils/padEmptyChartBar.js +37 -0
  129. package/src/container/FlexContainer.js +13 -0
  130. package/src/container/__stories__/FlexContainer.stories.js +39 -0
  131. package/src/container/__test__/FlexContainer.test.js +21 -0
  132. package/src/container/index.js +1 -0
  133. package/src/cropper/Cropper.js +49 -0
  134. package/src/cropper/CropperModalHandler.js +36 -0
  135. package/src/cropper/__stories__/Cropper.stories.js +32 -0
  136. package/src/cropper/__test__/Cropper.test.js +90 -0
  137. package/src/cropper/index.js +2 -0
  138. package/src/cropper/subComponent/CropImageModal.js +84 -0
  139. package/src/datetimePicker/DatePicker.js +493 -0
  140. package/src/datetimePicker/DatePickerV2.js +500 -0
  141. package/src/datetimePicker/DatetimePicker.js +218 -0
  142. package/src/datetimePicker/DatetimePickerV2.js +512 -0
  143. package/src/datetimePicker/TimeInput.js +45 -0
  144. package/src/datetimePicker/TimePicker.js +318 -0
  145. package/src/datetimePicker/TimePickerStyle.js +59 -0
  146. package/src/datetimePicker/__stories__/DatePicker.stories.js +51 -0
  147. package/src/datetimePicker/__stories__/DatePickerV2.stories.js +73 -0
  148. package/src/datetimePicker/__stories__/DatetimePicker.stories.js +71 -0
  149. package/src/datetimePicker/__stories__/DatetimePickerV2.stories.js +91 -0
  150. package/src/datetimePicker/__stories__/TimeInput.stories.js +67 -0
  151. package/src/datetimePicker/__stories__/TimePicker.stories.js +29 -0
  152. package/src/datetimePicker/__test__/CustomTimeInput.test.js +25 -0
  153. package/src/datetimePicker/__test__/DatetimePicker.test.js +121 -0
  154. package/src/datetimePicker/__test__/TimeInput.test.js +22 -0
  155. package/src/datetimePicker/accordion/Month.js +258 -0
  156. package/src/datetimePicker/accordion/Year.js +307 -0
  157. package/src/datetimePicker/hooks/index.js +3 -0
  158. package/src/datetimePicker/hooks/useChangeNumber.js +42 -0
  159. package/src/datetimePicker/hooks/useDecrease.js +31 -0
  160. package/src/datetimePicker/hooks/useIncrease.js +31 -0
  161. package/src/datetimePicker/index.js +7 -0
  162. package/src/datetimePicker/provider/constant.js +16 -0
  163. package/src/datetimePicker/subComponent/Accordion.js +407 -0
  164. package/src/datetimePicker/subComponent/CustomTimeInput.js +48 -0
  165. package/src/datetimePicker/subComponent/DateTimePickerContext.js +5 -0
  166. package/src/datetimePicker/utils/GMTDate.js +13 -0
  167. package/src/datetimePicker/utils/pad.js +9 -0
  168. package/src/datetimePicker/utils/toUTC0.js +10 -0
  169. package/src/descriptionList/DescriptionDetail.js +18 -0
  170. package/src/descriptionList/DescriptionList.js +15 -0
  171. package/src/descriptionList/DescriptionTerm.js +9 -0
  172. package/src/descriptionList/__stories__/DescriptionDetail.stories.js +39 -0
  173. package/src/descriptionList/__stories__/DescriptionList.stories.js +39 -0
  174. package/src/descriptionList/__stories__/DescriptionTerm.stories.js +13 -0
  175. package/src/descriptionList/__test__/DescriptionDetail.test.js +13 -0
  176. package/src/descriptionList/__test__/DescriptionList.test.js +12 -0
  177. package/src/descriptionList/__test__/DescriptionTerm.test.js +7 -0
  178. package/src/descriptionList/index.js +3 -0
  179. package/src/divider/Divider.js +21 -0
  180. package/src/divider/__stories__/Divider.stories.js +23 -0
  181. package/src/divider/__test__/Divider.test.js +24 -0
  182. package/src/divider/index.js +1 -0
  183. package/src/dropdown/Dropdown.js +50 -0
  184. package/src/dropdown/DropdownButtonOption.js +25 -0
  185. package/src/dropdown/DropdownContent.js +78 -0
  186. package/src/dropdown/DropdownDivOption.js +21 -0
  187. package/src/dropdown/DropdownItem.js +17 -0
  188. package/src/dropdown/DropdownLinkOption.js +19 -0
  189. package/src/dropdown/DropdownToggle.js +26 -0
  190. package/src/dropdown/__stories__/Dropdown.stories.js +46 -0
  191. package/src/dropdown/__stories__/DropdownButtonOption.stories.js +33 -0
  192. package/src/dropdown/__stories__/DropdownContent.stories.js +34 -0
  193. package/src/dropdown/__stories__/DropdownDivOption.stories.js +27 -0
  194. package/src/dropdown/__stories__/DropdownItem.stories.js +48 -0
  195. package/src/dropdown/__stories__/DropdownLinkOption.stories.js +63 -0
  196. package/src/dropdown/__stories__/DropdownToggle.stories.js +40 -0
  197. package/src/dropdown/__test__/Dropdown.test.js +132 -0
  198. package/src/dropdown/__test__/DropdownButtonOption.test.js +8 -0
  199. package/src/dropdown/__test__/DropdownContent.test.js +85 -0
  200. package/src/dropdown/__test__/DropdownDivOption.test.js +8 -0
  201. package/src/dropdown/__test__/DropdownItem.test.js +55 -0
  202. package/src/dropdown/__test__/DropdownLinkOption.test.js +14 -0
  203. package/src/dropdown/__test__/DropdownToggle.test.js +53 -0
  204. package/src/dropdown/index.js +12 -0
  205. package/src/dropdown/subComponent/DropdownContext.js +5 -0
  206. package/src/dropzone/FileDropzone.js +543 -0
  207. package/src/dropzone/ImageDropzone.js +365 -0
  208. package/src/dropzone/__stories__/FileDropzone.stories.js +148 -0
  209. package/src/dropzone/__stories__/ImageDropzone.stories.js +101 -0
  210. package/src/dropzone/__test__/FileDropzone.test.js +382 -0
  211. package/src/dropzone/__test__/ImageDropzone.test.js +290 -0
  212. package/src/dropzone/__test__/Message.test.js +14 -0
  213. package/src/dropzone/index.js +2 -0
  214. package/src/dropzone/subComponent/Message.js +16 -0
  215. package/src/figure/IconFigure.js +31 -0
  216. package/src/figure/ImageFigure.js +25 -0
  217. package/src/figure/__stories__/IconFigure.stories.js +25 -0
  218. package/src/figure/__stories__/ImageFigure.stories.js +26 -0
  219. package/src/figure/__test__/IconFigure.test.js +28 -0
  220. package/src/figure/__test__/ImageFigure.test.js +38 -0
  221. package/src/figure/index.js +2 -0
  222. package/src/file/HiddenFileInput.js +10 -0
  223. package/src/file/index.js +1 -0
  224. package/src/form/Checkbox.js +127 -0
  225. package/src/form/FormItem.js +7 -0
  226. package/src/form/Input.js +42 -0
  227. package/src/form/Label.js +33 -0
  228. package/src/form/MutedText.js +11 -0
  229. package/src/form/RadioButton.js +80 -0
  230. package/src/form/Searchbox.js +95 -0
  231. package/src/form/Slider.js +34 -0
  232. package/src/form/SwitchButton.js +86 -0
  233. package/src/form/Textarea.js +36 -0
  234. package/src/form/TreeView.js +77 -0
  235. package/src/form/__stories__/Checkbox.stories.js +63 -0
  236. package/src/form/__stories__/FormItem.stories.js +28 -0
  237. package/src/form/__stories__/Input.stories.js +30 -0
  238. package/src/form/__stories__/Label.stories.js +38 -0
  239. package/src/form/__stories__/MutedText.stories.js +27 -0
  240. package/src/form/__stories__/RadioButton.stories.js +48 -0
  241. package/src/form/__stories__/Searchbox.stories.js +24 -0
  242. package/src/form/__stories__/Slider.stories.js +46 -0
  243. package/src/form/__stories__/SwitchButton.stories.js +48 -0
  244. package/src/form/__stories__/Textarea.stories.js +19 -0
  245. package/src/form/__stories__/TreeView.stories.js +76 -0
  246. package/src/form/__test__/Checkbox.test.js +68 -0
  247. package/src/form/__test__/FormItem.test.js +8 -0
  248. package/src/form/__test__/Input.test.js +28 -0
  249. package/src/form/__test__/Label.test.js +33 -0
  250. package/src/form/__test__/MutedText.test.js +18 -0
  251. package/src/form/__test__/RadioButton.test.js +57 -0
  252. package/src/form/__test__/Searchbox.test.js +50 -0
  253. package/src/form/__test__/Textarea.test.js +25 -0
  254. package/src/form/index.js +11 -0
  255. package/src/grid/Column.js +36 -0
  256. package/src/grid/Grid.js +15 -0
  257. package/src/grid/__stories__/Grid.stories.js +38 -0
  258. package/src/grid/__test__/Grid.test.js +44 -0
  259. package/src/grid/index.js +2 -0
  260. package/src/heading/Heading1.js +11 -0
  261. package/src/heading/Heading2.js +13 -0
  262. package/src/heading/Heading3.js +21 -0
  263. package/src/heading/__stories__/Heading1.stories.js +24 -0
  264. package/src/heading/__stories__/Heading2.stories.js +24 -0
  265. package/src/heading/__stories__/Heading3.stories.js +24 -0
  266. package/src/heading/__test__/Heading1.test.js +21 -0
  267. package/src/heading/__test__/Heading2.test.js +34 -0
  268. package/src/heading/__test__/Heading3.test.js +46 -0
  269. package/src/heading/index.js +3 -0
  270. package/src/helmet/Helmet.js +12 -0
  271. package/src/helmet/__test__/Helmet.test.js +38 -0
  272. package/src/helmet/index.js +2 -0
  273. package/src/iconbox/ApplicationIconBox.js +62 -0
  274. package/src/iconbox/IconBox.js +54 -0
  275. package/src/iconbox/IconBoxV2.js +49 -0
  276. package/src/iconbox/__stories__/ApplicationIconBox.stories.js +53 -0
  277. package/src/iconbox/__stories__/IconBox.stories.js +34 -0
  278. package/src/iconbox/__stories__/IconBoxFigure.stories.js +67 -0
  279. package/src/iconbox/__stories__/IconBoxFigure.stories_V2.stories.js +41 -0
  280. package/src/iconbox/__stories__/IconBoxImage.stories.js +32 -0
  281. package/src/iconbox/__stories__/IconBoxV2.stories.js +60 -0
  282. package/src/iconbox/__test__/ApplicationIconBox.test.js +77 -0
  283. package/src/iconbox/__test__/IconBox.test.js +22 -0
  284. package/src/iconbox/__test__/IconBoxFigure.test.js +37 -0
  285. package/src/iconbox/__test__/IconBoxImage.test.js +32 -0
  286. package/src/iconbox/__test__/IconBoxV2.test.js +51 -0
  287. package/src/iconbox/index.js +3 -0
  288. package/src/iconbox/subComponent/IconBoxFigure.js +16 -0
  289. package/src/iconbox/subComponent/IconBoxImage.js +26 -0
  290. package/src/image/ImageFluid.js +12 -0
  291. package/src/image/UploadImage.js +287 -0
  292. package/src/image/__stories__/ImageFluid.stories.js +25 -0
  293. package/src/image/__stories__/UploadImage.stories.js +56 -0
  294. package/src/image/__test__/ImageFluid.test.js +44 -0
  295. package/src/image/__test__/UploadImage.test.js +315 -0
  296. package/src/image/index.js +2 -0
  297. package/src/index.js +42 -0
  298. package/src/jsoneditor/JsonEditor.js +132 -0
  299. package/src/jsoneditor/__stories__/JsonEditor.stories.js +55 -0
  300. package/src/jsoneditor/__test__/JsonEditor.test.js +52 -0
  301. package/src/jsoneditor/index.js +1 -0
  302. package/src/keyframe/Pulse.js +17 -0
  303. package/src/keyframe/Spin.js +9 -0
  304. package/src/link/LinkSpan.js +44 -0
  305. package/src/link/__stories__/LinkSpan.stories.js +27 -0
  306. package/src/link/__test__/LinkSpan.test.js +52 -0
  307. package/src/link/index.js +1 -0
  308. package/src/map/GoogleMap.js +383 -0
  309. package/src/map/GoogleReverseGeolocation.js +197 -0
  310. package/src/map/LeafletMap.js +264 -0
  311. package/src/map/LeafletReverseGeolocation.js +89 -0
  312. package/src/map/__stories__/GoogleMap.stories.js +137 -0
  313. package/src/map/__stories__/GoogleReverseGeolocation.stories.js +95 -0
  314. package/src/map/__stories__/LeafletMap.stories.js +136 -0
  315. package/src/map/__stories__/LeafletReverseGeolocation.stories.js +91 -0
  316. package/src/map/__test__/LeafletReverseGeolocation.test.js +245 -0
  317. package/src/map/__test__/MapSearchBoxControl.test.js +89 -0
  318. package/src/map/index.js +4 -0
  319. package/src/map/subComponent/BasicLeafletMap.js +33 -0
  320. package/src/map/subComponent/GoogleMapContainer.js +19 -0
  321. package/src/map/subComponent/GoogleMapPopup.js +115 -0
  322. package/src/map/subComponent/GoogleMapWrapper.js +27 -0
  323. package/src/map/subComponent/GoogleMarkerSpiderfier.js +13 -0
  324. package/src/map/subComponent/LeafletDrawControl.js +133 -0
  325. package/src/map/subComponent/LeafletMapContainer.js +163 -0
  326. package/src/map/subComponent/MapSearchBoxControl.js +43 -0
  327. package/src/modal/StateModal.js +139 -0
  328. package/src/modal/TitleModal.js +229 -0
  329. package/src/modal/__stories__/StateModal.stories.js +46 -0
  330. package/src/modal/__stories__/TitleModal.stories.js +56 -0
  331. package/src/modal/__test__/StateModal.test.js +144 -0
  332. package/src/modal/index.js +2 -0
  333. package/src/paginate/Paginate.js +132 -0
  334. package/src/paginate/__stories__/Paginate.stories.js +49 -0
  335. package/src/paginate/__test__/Paginate.test.js +124 -0
  336. package/src/paginate/index.js +1 -0
  337. package/src/popover/Popover.js +82 -0
  338. package/src/popover/__stories__/Popover.stories.js +44 -0
  339. package/src/popover/index.js +1 -0
  340. package/src/qrcode/QRCode.js +54 -0
  341. package/src/qrcode/QRCodeContainter.js +25 -0
  342. package/src/qrcode/__stories__/QRCode.stories.js +36 -0
  343. package/src/qrcode/__stories__/QRCodeContainter.stories.js +28 -0
  344. package/src/qrcode/index.js +2 -0
  345. package/src/ribbon/Ribbon.js +38 -0
  346. package/src/ribbon/__stories__/Ribbon.stories.js +25 -0
  347. package/src/ribbon/index.js +1 -0
  348. package/src/section/Section.js +66 -0
  349. package/src/section/SectionBody.js +34 -0
  350. package/src/section/SectionHeader.js +41 -0
  351. package/src/section/SectionToolbar.js +13 -0
  352. package/src/section/SectionToolbarItem.js +12 -0
  353. package/src/section/__stories__/Section.stories.js +52 -0
  354. package/src/section/__stories__/SectionBody.stories.js +40 -0
  355. package/src/section/__stories__/SectionHeader.stories.js +67 -0
  356. package/src/section/__stories__/SectionToolbar.stories.js +43 -0
  357. package/src/section/__test__/Section.test.js +98 -0
  358. package/src/section/__test__/SectionBody.test.js +89 -0
  359. package/src/section/__test__/SectionHeader.test.js +35 -0
  360. package/src/section/__test__/SectionToolbar.test.js +17 -0
  361. package/src/section/index.js +5 -0
  362. package/src/select/InputSelect.js +314 -0
  363. package/src/select/Select.js +764 -0
  364. package/src/select/__stories__/InputSelect.stories.js +60 -0
  365. package/src/select/__stories__/Select.stories.js +132 -0
  366. package/src/select/__test__/Select.test.js +219 -0
  367. package/src/select/index.js +2 -0
  368. package/src/select/subComponent/ListBox.js +15 -0
  369. package/src/select/subComponent/Option.js +22 -0
  370. package/src/select/subComponent/OptionGroup.js +18 -0
  371. package/src/select/subComponent/Options.js +24 -0
  372. package/src/select/subComponent/SearchBox.js +53 -0
  373. package/src/select/subComponent/SelectedMultiple.js +39 -0
  374. package/src/select/subComponent/SelectedSingle.js +10 -0
  375. package/src/styles/GlobalStyle.js +59 -0
  376. package/src/styles/config/breakpoint.style.js +8 -0
  377. package/src/styles/config/header.style.js +5 -0
  378. package/src/styles/config/sidebar.style.js +12 -0
  379. package/src/styles/index.js +2 -0
  380. package/src/styles/mixin/backgroundColor.js +13 -0
  381. package/src/styles/mixin/borderColor.js +13 -0
  382. package/src/styles/mixin/color.js +13 -0
  383. package/src/styles/mixin/colorOnBackground.js +13 -0
  384. package/src/styles/mixin/inputPlaceholder.js +26 -0
  385. package/src/styles/mixin/media.js +14 -0
  386. package/src/styles/mixin/rounded.js +12 -0
  387. package/src/styles/mixin/scrollbar.js +26 -0
  388. package/src/styles/theme/dark.theme.js +95 -0
  389. package/src/styles/theme/light.theme.js +95 -0
  390. package/src/styles/theme/white.theme.js +95 -0
  391. package/src/styles/themes.js +11 -0
  392. package/src/table/GridTable.js +325 -0
  393. package/src/table/ImageBox.js +37 -0
  394. package/src/table/PermissionTable.js +36 -0
  395. package/src/table/Table.js +441 -0
  396. package/src/table/__mock__/columns.js +28 -0
  397. package/src/table/__mock__/data.js +334 -0
  398. package/src/table/__stories__/GridTable.stories.js +129 -0
  399. package/src/table/__stories__/ImageBox.stories.js +27 -0
  400. package/src/table/__stories__/PermissionTable.stories.js +52 -0
  401. package/src/table/__stories__/Table.stories.js +138 -0
  402. package/src/table/hooks/index.js +2 -0
  403. package/src/table/hooks/useCalculateDataRange.js +26 -0
  404. package/src/table/hooks/useGenerateSort.js +37 -0
  405. package/src/table/index.js +4 -0
  406. package/src/table/subComponent/BaseTableHeadCell.js +48 -0
  407. package/src/table/subComponent/GridTableFooter.js +18 -0
  408. package/src/table/subComponent/GridTableHeadCell.js +14 -0
  409. package/src/table/subComponent/Resizer.js +79 -0
  410. package/src/table/subComponent/TableFooter.js +16 -0
  411. package/src/table/subComponent/TableFooterInfo.js +8 -0
  412. package/src/table/subComponent/TableFooterPager.js +26 -0
  413. package/src/table/subComponent/TableHeadCell.js +14 -0
  414. package/src/table/subComponent/TableSort.js +25 -0
  415. package/src/tagify/TagifyStyle.js +35 -0
  416. package/src/tagify/Tags.js +46 -0
  417. package/src/tagify/__stories__/Tags.stories.js +28 -0
  418. package/src/tagify/index.js +2 -0
  419. package/src/text/Paragraph.js +34 -0
  420. package/src/text/__stories__/Paragraph.stories.js +40 -0
  421. package/src/text/index.js +1 -0
  422. package/src/timeline/Timeline.js +98 -0
  423. package/src/timeline/__stories__/Timeline.stories.js +49 -0
  424. package/src/timeline/index.js +1 -0
  425. package/src/toast/CustomToastContainer.js +30 -0
  426. package/src/toast/MessageContainer.js +40 -0
  427. package/src/toast/__stories__/MessageContainer.stories.js +35 -0
  428. package/src/toast/index.js +3 -0
  429. package/src/toast/show.js +34 -0
  430. package/src/toast/style.css +1 -0
  431. package/src/tooltip/Tooltip.js +146 -0
  432. package/src/tooltip/__stories__/Tooltip.stories.js +49 -0
  433. package/src/tooltip/__test__/tooltip.test.js +130 -0
  434. package/src/tooltip/index.js +1 -0
  435. package/src/wizard/Wizard.js +276 -0
  436. package/src/wizard/__stories__/Wizard.stories.js +81 -0
  437. package/src/wizard/__test__/Wizard.test.js +173 -0
  438. package/src/wizard/index.js +1 -0
  439. package/transformer/fileTransformer.js +9 -0
  440. /package/{Tab → dist/Tab}/Tab.js +0 -0
  441. /package/{Tab → dist/Tab}/TabList.js +0 -0
  442. /package/{Tab → dist/Tab}/TabPanel.js +0 -0
  443. /package/{Tab → dist/Tab}/TabTab.js +0 -0
  444. /package/{Tab → dist/Tab}/index.js +0 -0
  445. /package/{Tab → dist/Tab}/subComponent/TabContext.js +0 -0
  446. /package/{animate → dist/animate}/Collapse.js +0 -0
  447. /package/{animate → dist/animate}/Loader.js +0 -0
  448. /package/{animate → dist/animate}/NumberCounter.js +0 -0
  449. /package/{animate → dist/animate}/PulseRing.js +0 -0
  450. /package/{animate → dist/animate}/Spinner.js +0 -0
  451. /package/{animate → dist/animate}/index.js +0 -0
  452. /package/{assets → dist/assets}/css/autocomplete.css +0 -0
  453. /package/{assets → dist/assets}/css/font.css +0 -0
  454. /package/{assets → dist/assets}/css/global.css +0 -0
  455. /package/{assets → dist/assets}/css/normalize.css +0 -0
  456. /package/{assets → dist/assets}/font/helvetica/Helvetica.ttf +0 -0
  457. /package/{assets → dist/assets}/font/nanumGothic/NanumGothic-Bold.ttf +0 -0
  458. /package/{assets → dist/assets}/font/nanumGothic/NanumGothic-ExtraBold.ttf +0 -0
  459. /package/{assets → dist/assets}/font/nanumGothic/NanumGothic-Regular.ttf +0 -0
  460. /package/{assets → dist/assets}/icons/app-management.png +0 -0
  461. /package/{assets → dist/assets}/icons/burger.png +0 -0
  462. /package/{assets → dist/assets}/icons/file.svg +0 -0
  463. /package/{assets → dist/assets}/icons/map_icon1.png +0 -0
  464. /package/{assets → dist/assets}/icons/map_icon4.png +0 -0
  465. /package/{assets → dist/assets}/images/bg-chart-circle.png +0 -0
  466. /package/{assets → dist/assets}/images/bg-chart-triangle.png +0 -0
  467. /package/{assets → dist/assets}/images/cashub-logo-only.png +0 -0
  468. /package/{assets → dist/assets}/images/default-user.jpg +0 -0
  469. /package/{assets → dist/assets}/images/logo-cashub.png +0 -0
  470. /package/{assets → dist/assets}/images/map.png +0 -0
  471. /package/{assets → dist/assets}/images/qrcode.png +0 -0
  472. /package/{backdrop → dist/backdrop}/BaseBackdrop.js +0 -0
  473. /package/{backdrop → dist/backdrop}/LoadingBackdrop.js +0 -0
  474. /package/{backdrop → dist/backdrop}/ModalBackdrop.js +0 -0
  475. /package/{backdrop → dist/backdrop}/index.js +0 -0
  476. /package/{badge → dist/badge}/Badge.js +0 -0
  477. /package/{badge → dist/badge}/BadgeDot.js +0 -0
  478. /package/{badge → dist/badge}/BadgeFill.js +0 -0
  479. /package/{badge → dist/badge}/BadgeWithText.js +0 -0
  480. /package/{badge → dist/badge}/index.js +0 -0
  481. /package/{billing → dist/billing}/BarChart.js +0 -0
  482. /package/{billing → dist/billing}/Grid.js +0 -0
  483. /package/{billing → dist/billing}/Header2.js +0 -0
  484. /package/{billing → dist/billing}/Header3.js +0 -0
  485. /package/{billing → dist/billing}/Paragraph.js +0 -0
  486. /package/{billing → dist/billing}/ParagraphGroup.js +0 -0
  487. /package/{billing → dist/billing}/ParagraphText.js +0 -0
  488. /package/{billing → dist/billing}/Section.js +0 -0
  489. /package/{billing → dist/billing}/SectionBody.js +0 -0
  490. /package/{billing → dist/billing}/SectionHeader.js +0 -0
  491. /package/{billing → dist/billing}/__stories__/BarChart.stories.js_bak +0 -0
  492. /package/{billing → dist/billing}/__stories__/Grid.stories.js_bak +0 -0
  493. /package/{billing → dist/billing}/__stories__/Header2.stories.js_bak +0 -0
  494. /package/{billing → dist/billing}/__stories__/Header3.stories.js_bak +0 -0
  495. /package/{billing → dist/billing}/__stories__/Paragraph.stories.js_bak +0 -0
  496. /package/{billing → dist/billing}/__stories__/ParagraphGroup.stories.js_bak +0 -0
  497. /package/{billing → dist/billing}/__stories__/ParagraphText.stories.js_bak +0 -0
  498. /package/{billing → dist/billing}/__stories__/Section.stories.js_bak +0 -0
  499. /package/{billing → dist/billing}/__stories__/SectionBody.stories.js_bak +0 -0
  500. /package/{billing → dist/billing}/__stories__/SectionHeader.stories.js-bak +0 -0
  501. /package/{breadcrumb → dist/breadcrumb}/Breadcrumb.js +0 -0
  502. /package/{breadcrumb → dist/breadcrumb}/index.js +0 -0
  503. /package/{button → dist/button}/Button.js +0 -0
  504. /package/{button → dist/button}/ButtonGroup.js +0 -0
  505. /package/{button → dist/button}/IconButton.js +0 -0
  506. /package/{button → dist/button}/ScrollToTopButton.js +0 -0
  507. /package/{button → dist/button}/index.js +0 -0
  508. /package/{callout → dist/callout}/Callout.js +0 -0
  509. /package/{callout → dist/callout}/index.js +0 -0
  510. /package/{chart → dist/chart}/BarChart.js +0 -0
  511. /package/{chart → dist/chart}/DoughnutChart.js +0 -0
  512. /package/{chart → dist/chart}/LineChart.js +0 -0
  513. /package/{chart → dist/chart}/SingleBarChart.js +0 -0
  514. /package/{chart → dist/chart}/index.js +0 -0
  515. /package/{chart → dist/chart}/utils/customTooltip.js +0 -0
  516. /package/{chart → dist/chart}/utils/htmlLegendPlugin.js +0 -0
  517. /package/{chart → dist/chart}/utils/index.js +0 -0
  518. /package/{chart → dist/chart}/utils/padEmptyChartBar.js +0 -0
  519. /package/{container → dist/container}/FlexContainer.js +0 -0
  520. /package/{container → dist/container}/index.js +0 -0
  521. /package/{cropper → dist/cropper}/Cropper.js +0 -0
  522. /package/{cropper → dist/cropper}/CropperModalHandler.js +0 -0
  523. /package/{cropper → dist/cropper}/index.js +0 -0
  524. /package/{cropper → dist/cropper}/subComponent/CropImageModal.js +0 -0
  525. /package/{datetimePicker → dist/datetimePicker}/DatePicker.js +0 -0
  526. /package/{datetimePicker → dist/datetimePicker}/DatePickerV2.js +0 -0
  527. /package/{datetimePicker → dist/datetimePicker}/DatetimePicker.js +0 -0
  528. /package/{datetimePicker → dist/datetimePicker}/DatetimePickerV2.js +0 -0
  529. /package/{datetimePicker → dist/datetimePicker}/TimeInput.js +0 -0
  530. /package/{datetimePicker → dist/datetimePicker}/TimePicker.js +0 -0
  531. /package/{datetimePicker → dist/datetimePicker}/TimePickerStyle.js +0 -0
  532. /package/{datetimePicker → dist/datetimePicker}/accordion/Month.js +0 -0
  533. /package/{datetimePicker → dist/datetimePicker}/accordion/Year.js +0 -0
  534. /package/{datetimePicker → dist/datetimePicker}/hooks/index.js +0 -0
  535. /package/{datetimePicker → dist/datetimePicker}/hooks/useChangeNumber.js +0 -0
  536. /package/{datetimePicker → dist/datetimePicker}/hooks/useDecrease.js +0 -0
  537. /package/{datetimePicker → dist/datetimePicker}/hooks/useIncrease.js +0 -0
  538. /package/{datetimePicker → dist/datetimePicker}/index.js +0 -0
  539. /package/{datetimePicker → dist/datetimePicker}/provider/constant.js +0 -0
  540. /package/{datetimePicker → dist/datetimePicker}/subComponent/Accordion.js +0 -0
  541. /package/{datetimePicker → dist/datetimePicker}/subComponent/CustomTimeInput.js +0 -0
  542. /package/{datetimePicker → dist/datetimePicker}/subComponent/DateTimePickerContext.js +0 -0
  543. /package/{datetimePicker → dist/datetimePicker}/utils/GMTDate.js +0 -0
  544. /package/{datetimePicker → dist/datetimePicker}/utils/pad.js +0 -0
  545. /package/{datetimePicker → dist/datetimePicker}/utils/toUTC0.js +0 -0
  546. /package/{descriptionList → dist/descriptionList}/DescriptionDetail.js +0 -0
  547. /package/{descriptionList → dist/descriptionList}/DescriptionList.js +0 -0
  548. /package/{descriptionList → dist/descriptionList}/DescriptionTerm.js +0 -0
  549. /package/{descriptionList → dist/descriptionList}/index.js +0 -0
  550. /package/{divider → dist/divider}/Divider.js +0 -0
  551. /package/{divider → dist/divider}/index.js +0 -0
  552. /package/{dropdown → dist/dropdown}/Dropdown.js +0 -0
  553. /package/{dropdown → dist/dropdown}/DropdownButtonOption.js +0 -0
  554. /package/{dropdown → dist/dropdown}/DropdownContent.js +0 -0
  555. /package/{dropdown → dist/dropdown}/DropdownDivOption.js +0 -0
  556. /package/{dropdown → dist/dropdown}/DropdownItem.js +0 -0
  557. /package/{dropdown → dist/dropdown}/DropdownLinkOption.js +0 -0
  558. /package/{dropdown → dist/dropdown}/DropdownToggle.js +0 -0
  559. /package/{dropdown → dist/dropdown}/index.js +0 -0
  560. /package/{dropdown → dist/dropdown}/subComponent/DropdownContext.js +0 -0
  561. /package/{dropzone → dist/dropzone}/FileDropzone.js +0 -0
  562. /package/{dropzone → dist/dropzone}/ImageDropzone.js +0 -0
  563. /package/{dropzone → dist/dropzone}/index.js +0 -0
  564. /package/{dropzone → dist/dropzone}/subComponent/Message.js +0 -0
  565. /package/{figure → dist/figure}/IconFigure.js +0 -0
  566. /package/{figure → dist/figure}/ImageFigure.js +0 -0
  567. /package/{figure → dist/figure}/index.js +0 -0
  568. /package/{file → dist/file}/HiddenFileInput.js +0 -0
  569. /package/{file → dist/file}/index.js +0 -0
  570. /package/{form → dist/form}/Checkbox.js +0 -0
  571. /package/{form → dist/form}/FormItem.js +0 -0
  572. /package/{form → dist/form}/Input.js +0 -0
  573. /package/{form → dist/form}/Label.js +0 -0
  574. /package/{form → dist/form}/MutedText.js +0 -0
  575. /package/{form → dist/form}/RadioButton.js +0 -0
  576. /package/{form → dist/form}/Searchbox.js +0 -0
  577. /package/{form → dist/form}/Slider.js +0 -0
  578. /package/{form → dist/form}/SwitchButton.js +0 -0
  579. /package/{form → dist/form}/Textarea.js +0 -0
  580. /package/{form → dist/form}/TreeView.js +0 -0
  581. /package/{form → dist/form}/index.js +0 -0
  582. /package/{grid → dist/grid}/Column.js +0 -0
  583. /package/{grid → dist/grid}/Grid.js +0 -0
  584. /package/{grid → dist/grid}/index.js +0 -0
  585. /package/{heading → dist/heading}/Heading1.js +0 -0
  586. /package/{heading → dist/heading}/Heading2.js +0 -0
  587. /package/{heading → dist/heading}/Heading3.js +0 -0
  588. /package/{heading → dist/heading}/index.js +0 -0
  589. /package/{helmet → dist/helmet}/Helmet.js +0 -0
  590. /package/{helmet → dist/helmet}/index.js +0 -0
  591. /package/{iconbox → dist/iconbox}/ApplicationIconBox.js +0 -0
  592. /package/{iconbox → dist/iconbox}/IconBox.js +0 -0
  593. /package/{iconbox → dist/iconbox}/IconBoxV2.js +0 -0
  594. /package/{iconbox → dist/iconbox}/index.js +0 -0
  595. /package/{iconbox → dist/iconbox}/subComponent/IconBoxFigure.js +0 -0
  596. /package/{iconbox → dist/iconbox}/subComponent/IconBoxImage.js +0 -0
  597. /package/{image → dist/image}/ImageFluid.js +0 -0
  598. /package/{image → dist/image}/UploadImage.js +0 -0
  599. /package/{image → dist/image}/index.js +0 -0
  600. /package/{index.js → dist/index.js} +0 -0
  601. /package/{jsoneditor → dist/jsoneditor}/JsonEditor.js +0 -0
  602. /package/{jsoneditor → dist/jsoneditor}/index.js +0 -0
  603. /package/{keyframe → dist/keyframe}/Pulse.js +0 -0
  604. /package/{keyframe → dist/keyframe}/Spin.js +0 -0
  605. /package/{link → dist/link}/LinkSpan.js +0 -0
  606. /package/{link → dist/link}/index.js +0 -0
  607. /package/{map → dist/map}/GoogleMap.js +0 -0
  608. /package/{map → dist/map}/GoogleReverseGeolocation.js +0 -0
  609. /package/{map → dist/map}/LeafletMap.js +0 -0
  610. /package/{map → dist/map}/LeafletReverseGeolocation.js +0 -0
  611. /package/{map → dist/map}/index.js +0 -0
  612. /package/{map → dist/map}/subComponent/BasicLeafletMap.js +0 -0
  613. /package/{map → dist/map}/subComponent/GoogleMapContainer.js +0 -0
  614. /package/{map → dist/map}/subComponent/GoogleMapPopup.js +0 -0
  615. /package/{map → dist/map}/subComponent/GoogleMapWrapper.js +0 -0
  616. /package/{map → dist/map}/subComponent/GoogleMarkerSpiderfier.js +0 -0
  617. /package/{map → dist/map}/subComponent/LeafletDrawControl.js +0 -0
  618. /package/{map → dist/map}/subComponent/LeafletMapContainer.js +0 -0
  619. /package/{map → dist/map}/subComponent/MapSearchBoxControl.js +0 -0
  620. /package/{modal → dist/modal}/StateModal.js +0 -0
  621. /package/{modal → dist/modal}/TitleModal.js +0 -0
  622. /package/{modal → dist/modal}/index.js +0 -0
  623. /package/{paginate → dist/paginate}/Paginate.js +0 -0
  624. /package/{paginate → dist/paginate}/index.js +0 -0
  625. /package/{popover → dist/popover}/Popover.js +0 -0
  626. /package/{popover → dist/popover}/index.js +0 -0
  627. /package/{qrcode → dist/qrcode}/QRCode.js +0 -0
  628. /package/{qrcode → dist/qrcode}/QRCodeContainter.js +0 -0
  629. /package/{qrcode → dist/qrcode}/index.js +0 -0
  630. /package/{ribbon → dist/ribbon}/Ribbon.js +0 -0
  631. /package/{ribbon → dist/ribbon}/index.js +0 -0
  632. /package/{section → dist/section}/Section.js +0 -0
  633. /package/{section → dist/section}/SectionBody.js +0 -0
  634. /package/{section → dist/section}/SectionHeader.js +0 -0
  635. /package/{section → dist/section}/SectionToolbar.js +0 -0
  636. /package/{section → dist/section}/SectionToolbarItem.js +0 -0
  637. /package/{section → dist/section}/index.js +0 -0
  638. /package/{select → dist/select}/InputSelect.js +0 -0
  639. /package/{select → dist/select}/Select.js +0 -0
  640. /package/{select → dist/select}/index.js +0 -0
  641. /package/{select → dist/select}/subComponent/ListBox.js +0 -0
  642. /package/{select → dist/select}/subComponent/Option.js +0 -0
  643. /package/{select → dist/select}/subComponent/OptionGroup.js +0 -0
  644. /package/{select → dist/select}/subComponent/Options.js +0 -0
  645. /package/{select → dist/select}/subComponent/SearchBox.js +0 -0
  646. /package/{select → dist/select}/subComponent/SelectedMultiple.js +0 -0
  647. /package/{select → dist/select}/subComponent/SelectedSingle.js +0 -0
  648. /package/{styles → dist/styles}/GlobalStyle.js +0 -0
  649. /package/{styles → dist/styles}/config/breakpoint.style.js +0 -0
  650. /package/{styles → dist/styles}/config/header.style.js +0 -0
  651. /package/{styles → dist/styles}/config/sidebar.style.js +0 -0
  652. /package/{styles → dist/styles}/index.js +0 -0
  653. /package/{styles → dist/styles}/mixin/backgroundColor.js +0 -0
  654. /package/{styles → dist/styles}/mixin/borderColor.js +0 -0
  655. /package/{styles → dist/styles}/mixin/color.js +0 -0
  656. /package/{styles → dist/styles}/mixin/colorOnBackground.js +0 -0
  657. /package/{styles → dist/styles}/mixin/inputPlaceholder.js +0 -0
  658. /package/{styles → dist/styles}/mixin/media.js +0 -0
  659. /package/{styles → dist/styles}/mixin/rounded.js +0 -0
  660. /package/{styles → dist/styles}/mixin/scrollbar.js +0 -0
  661. /package/{styles → dist/styles}/theme/dark.theme.js +0 -0
  662. /package/{styles → dist/styles}/theme/light.theme.js +0 -0
  663. /package/{styles → dist/styles}/theme/white.theme.js +0 -0
  664. /package/{styles → dist/styles}/themes.js +0 -0
  665. /package/{table → dist/table}/GridTable.js +0 -0
  666. /package/{table → dist/table}/ImageBox.js +0 -0
  667. /package/{table → dist/table}/PermissionTable.js +0 -0
  668. /package/{table → dist/table}/__mock__/columns.js +0 -0
  669. /package/{table → dist/table}/__mock__/data.js +0 -0
  670. /package/{table → dist/table}/hooks/index.js +0 -0
  671. /package/{table → dist/table}/hooks/useCalculateDataRange.js +0 -0
  672. /package/{table → dist/table}/hooks/useGenerateSort.js +0 -0
  673. /package/{table → dist/table}/index.js +0 -0
  674. /package/{table → dist/table}/subComponent/BaseTableHeadCell.js +0 -0
  675. /package/{table → dist/table}/subComponent/GridTableFooter.js +0 -0
  676. /package/{table → dist/table}/subComponent/GridTableHeadCell.js +0 -0
  677. /package/{table → dist/table}/subComponent/Resizer.js +0 -0
  678. /package/{table → dist/table}/subComponent/TableFooter.js +0 -0
  679. /package/{table → dist/table}/subComponent/TableFooterInfo.js +0 -0
  680. /package/{table → dist/table}/subComponent/TableFooterPager.js +0 -0
  681. /package/{table → dist/table}/subComponent/TableHeadCell.js +0 -0
  682. /package/{table → dist/table}/subComponent/TableSort.js +0 -0
  683. /package/{tagify → dist/tagify}/TagifyStyle.js +0 -0
  684. /package/{tagify → dist/tagify}/Tags.js +0 -0
  685. /package/{tagify → dist/tagify}/index.js +0 -0
  686. /package/{text → dist/text}/Paragraph.js +0 -0
  687. /package/{text → dist/text}/index.js +0 -0
  688. /package/{timeline → dist/timeline}/Timeline.js +0 -0
  689. /package/{timeline → dist/timeline}/index.js +0 -0
  690. /package/{toast → dist/toast}/CustomToastContainer.js +0 -0
  691. /package/{toast → dist/toast}/MessageContainer.js +0 -0
  692. /package/{toast → dist/toast}/index.js +0 -0
  693. /package/{toast → dist/toast}/show.js +0 -0
  694. /package/{toast → dist/toast}/style.css +0 -0
  695. /package/{tooltip → dist/tooltip}/Tooltip.js +0 -0
  696. /package/{tooltip → dist/tooltip}/index.js +0 -0
  697. /package/{wizard → dist/wizard}/Wizard.js +0 -0
  698. /package/{wizard → dist/wizard}/index.js +0 -0
package/src/modal/TitleModal.js ADDED
@@ -0,0 +1,229 @@
1
+ import { useRef, useState, useEffect, cloneElement, useMemo } from 'react';
2
+ import ReactDOM, { unmountComponentAtNode } from 'react-dom';
3
+ import styled from 'styled-components';
4
+ import { MdClose } from 'react-icons/md';
5
+ import { appendElementTo, isReactComponent } from '@cashub/utils';
6
+ import media from '../styles/mixin/media';
7
+ import scrollbar from '../styles/mixin/scrollbar';
8
+ import Heading3 from '../heading/Heading3';
9
+ import ModalBackdrop from '../backdrop/ModalBackdrop';
10
+
11
+ const TitleModal = (props) => {
12
+ const rootElement = appendElementTo('TitleModalContainer');
13
+ const Container = document.createElement('div');
14
+ rootElement.appendChild(Container);
15
+
16
+ const handleClose = async (dismiss = false) => {
17
+ if (props.onBeforeClose) {
18
+ // expect a promise
19
+ // resolve indicate want to close modal
20
+ // reject indicate do not close modal
21
+ try {
22
+ await props.onBeforeClose(dismiss);
23
+ } catch (error) {
24
+ return;
25
+ }
26
+ }
27
+
28
+ // unmount component and clear event handler and state before remove container
29
+ unmountComponentAtNode(Container);
30
+ Container.remove();
31
+
32
+ if (props.onClose) {
33
+ props.onClose(dismiss);
34
+ }
35
+ };
36
+
37
+ const methods = {
38
+ close: handleClose,
39
+ };
40
+
41
+ ReactDOM.render(
42
+ <ModalContent {...props} onClose={handleClose} methods={methods} />,
43
+ Container,
44
+ );
45
+ };
46
+
47
+ const ModalContent = ({ children, onClose, methods, size }) => {
48
+ const refWrapper = useRef(null);
49
+ const [clickTarget, setClickTarget] = useState(null);
50
+
51
+ const child = useMemo(() => {
52
+ return isReactComponent(children)
53
+ ? cloneElement(children, methods)
54
+ : children;
55
+ }, [children, methods]);
56
+
57
+ const handleDismiss = (dismiss) => {
58
+ if (clickTarget === refWrapper.current) {
59
+ onClose(dismiss);
60
+ }
61
+ };
62
+
63
+ return (
64
+ <Wrapper
65
+ ref={refWrapper}
66
+ onClick={() => {
67
+ handleDismiss(true);
68
+ }}
69
+ onMouseDown={(event) => {
70
+ setClickTarget(event.target);
71
+ }}
72
+ >
73
+ <Container
74
+ size={size}
75
+ onMouseDown={(event) => {
76
+ setClickTarget(event.target);
77
+ }}
78
+ >
79
+ {child}
80
+ </Container>
81
+ </Wrapper>
82
+ );
83
+ };
84
+
85
+ const ModalHeader = ({ handleClose, children }) => {
86
+ return (
87
+ <Header>
88
+ <MdClose onClick={handleClose} />
89
+ <Heading3>{children}</Heading3>
90
+ </Header>
91
+ );
92
+ };
93
+
94
+ const ModalBody = ({ children, ...props }) => {
95
+ const bodyRef = useRef(null);
96
+
97
+ const recalculateHeight = () => {
98
+ // body element not render yet
99
+ if (!bodyRef.current) return;
100
+ const ModalBodyElement = bodyRef.current;
101
+ const ModalHeaderElement = ModalBodyElement.previousSibling;
102
+ const ModalFooterElement = ModalBodyElement.nextSibling;
103
+
104
+ let needSubtractHeight = 0;
105
+ if (ModalHeaderElement) {
106
+ needSubtractHeight += ModalHeaderElement.offsetHeight;
107
+ }
108
+
109
+ if (ModalFooterElement) {
110
+ needSubtractHeight += ModalFooterElement.offsetHeight;
111
+ }
112
+
113
+ ModalBodyElement.style.maxHeight = `calc(90vh - ${needSubtractHeight}px)`;
114
+ };
115
+
116
+ useEffect(() => {
117
+ recalculateHeight();
118
+ window.addEventListener('resize', recalculateHeight);
119
+
120
+ return () => window.removeEventListener('resize', recalculateHeight);
121
+ }, []);
122
+
123
+ return (
124
+ <Body ref={bodyRef} {...props}>
125
+ {children}
126
+ </Body>
127
+ );
128
+ };
129
+
130
+ const ModalFooter = ({ children }) => {
131
+ return <Footer>{children}</Footer>;
132
+ };
133
+
134
+ const Wrapper = styled(ModalBackdrop)`
135
+ z-index: 80;
136
+ `;
137
+
138
+ const Container = styled.div`
139
+ position: relative;
140
+ border-radius: var(--border-radius);
141
+ background: var(--color-background2);
142
+ box-shadow: var(--box-shadow);
143
+ border: var(--border-width) solid var(--border-color);
144
+ width: 100%;
145
+
146
+ ${({ size }) => {
147
+ switch (size) {
148
+ case 'large':
149
+ return 'max-width: 75%;';
150
+ case 'normal':
151
+ return 'max-width: 50%;';
152
+ case 'small':
153
+ return 'max-width: 30%;';
154
+ default:
155
+ break;
156
+ }
157
+ }}
158
+
159
+ ${media.tablet`
160
+ ${({ size }) => {
161
+ switch (size) {
162
+ case 'large':
163
+ return 'max-width: 90%;';
164
+ case 'normal':
165
+ return 'max-width: 75%;';
166
+ case 'small':
167
+ return 'max-width: 50%;';
168
+ default:
169
+ break;
170
+ }
171
+ }}
172
+ `}
173
+
174
+ ${media.mobile`
175
+ ${({ size }) => {
176
+ switch (size) {
177
+ case 'normal':
178
+ return 'max-width: 90%;';
179
+ case 'small':
180
+ return 'max-width: 70%;';
181
+ default:
182
+ break;
183
+ }
184
+ }}
185
+ `}
186
+ `;
187
+
188
+ const Header = styled.div`
189
+ display: flex;
190
+ align-items: center;
191
+ padding: var(--spacing-s) 56px var(--spacing-s) var(--spacing-s);
192
+ border-bottom: var(--border-width) solid var(--border-color);
193
+ min-height: 64px;
194
+ color: var(--font-on-background);
195
+
196
+ > svg {
197
+ position: absolute;
198
+ top: 24px;
199
+ right: calc(12px + var(--spacing));
200
+ color: var(--font-on-mute);
201
+ font-size: var(--font-body1);
202
+ cursor: pointer;
203
+ }
204
+ `;
205
+
206
+ const Body = styled.div`
207
+ padding: var(--spacing);
208
+ overflow-y: auto;
209
+ overflow-x: hidden;
210
+
211
+ ${scrollbar}
212
+
213
+ ${({ noPaddingBottom }) => noPaddingBottom && 'padding-bottom: 0;'}
214
+ `;
215
+
216
+ const Footer = styled.div`
217
+ display: flex;
218
+ justify-content: flex-end;
219
+ padding: 0 var(--spacing);
220
+ border-top: var(--border-width) solid var(--border-color);
221
+ height: 64px;
222
+ line-height: 64px;
223
+ `;
224
+
225
+ export default Object.assign(TitleModal, {
226
+ Header: ModalHeader,
227
+ Body: ModalBody,
228
+ Footer: ModalFooter,
229
+ });
package/src/modal/__stories__/StateModal.stories.js ADDED
@@ -0,0 +1,46 @@
1
+ import StateModal from '../StateModal';
2
+
3
+ const metadata = {
4
+ title: 'Modal/StateModal',
5
+ component: StateModal,
6
+ argTypes: {
7
+ type: {
8
+ description: 'modal type',
9
+ control: 'radio',
10
+ options: ['error', 'warning'],
11
+ },
12
+ allowDismiss: {
13
+ description: 'click modal outside can close modal',
14
+ },
15
+ onConfirm: {
16
+ description: 'onConfirm function',
17
+ },
18
+ onCancel: {
19
+ description: 'onCancel function',
20
+ },
21
+ },
22
+ };
23
+
24
+ const Template = (args) => {
25
+ const showModal = (args) => {
26
+ StateModal({
27
+ ...args,
28
+ });
29
+ };
30
+
31
+ return <button onClick={() => showModal(args)}>Click Button!</button>;
32
+ };
33
+
34
+ const Default = Template.bind({});
35
+ Default.args = {
36
+ type: 'warning',
37
+ title: 'State Modal Title',
38
+ text: 'State Modal Text',
39
+ confirmButtonText: 'Confirm',
40
+ cancelButtonText: 'Cancel',
41
+ showCancelButton: true,
42
+ allowDismiss: true,
43
+ };
44
+
45
+ export default metadata;
46
+ export { Default };
package/src/modal/__stories__/TitleModal.stories.js ADDED
@@ -0,0 +1,56 @@
1
+ import TitleModal from '../TitleModal';
2
+
3
+ const metadata = {
4
+ title: 'Modal/TitleModal',
5
+ component: TitleModal,
6
+ // todo: adjust subcomponents's props on docs page
7
+ subcomponents: {
8
+ 'TitleModal.Header': TitleModal.Header,
9
+ 'TitleModal.Body': TitleModal.Body,
10
+ 'TitleModal.Footer': TitleModal.Footer,
11
+ },
12
+
13
+ argTypes: {
14
+ size: {
15
+ description: 'modal size',
16
+ control: 'radio',
17
+ options: ['large', 'normal', 'small'],
18
+ },
19
+ children: {
20
+ description: 'children is a element',
21
+ },
22
+ },
23
+ };
24
+
25
+ const showModal = (args) => {
26
+ TitleModal({
27
+ ...args,
28
+ });
29
+ };
30
+
31
+ const ModalContent = ({ close }) => {
32
+ return (
33
+ <>
34
+ <TitleModal.Header handleClose={close}>Modal Title</TitleModal.Header>
35
+ <TitleModal.Body noPaddingBottom>
36
+ <p style={{ color: '#ffffff' }}>Modal Body</p>
37
+ </TitleModal.Body>
38
+ <TitleModal.Footer>
39
+ <p style={{ color: '#ffffff' }}>Modal Footer</p>
40
+ </TitleModal.Footer>
41
+ </>
42
+ );
43
+ };
44
+
45
+ const Template = (args) => (
46
+ <button onClick={() => showModal(args)}>Click Button!</button>
47
+ );
48
+
49
+ const Default = Template.bind({});
50
+ Default.args = {
51
+ size: 'normal',
52
+ children: <ModalContent />,
53
+ };
54
+
55
+ export default metadata;
56
+ export { Default };
package/src/modal/__test__/StateModal.test.js ADDED
@@ -0,0 +1,144 @@
1
+ import { render, screen } from '@testing-library/react';
2
+ import userEvent from '@testing-library/user-event';
3
+ import 'jest-styled-components';
4
+ import StateModal from '../StateModal';
5
+
6
+ describe('Test StateModal Component', () => {
7
+ afterEach(() => {
8
+ document.body.innerHTML = '';
9
+ });
10
+
11
+ test('render component', () => {
12
+ render(
13
+ StateModal({
14
+ title: 'Title of state modal',
15
+ text: 'Message on state modal',
16
+ }),
17
+ );
18
+
19
+ const modal = screen.getByRole('dialog');
20
+ expect(modal).toBeInTheDocument();
21
+
22
+ const icon = screen.getByRole('img');
23
+ expect(icon).toBeInTheDocument();
24
+
25
+ const title = screen.getByRole('heading', { name: 'Title of state modal' });
26
+ expect(title).toBeInTheDocument();
27
+
28
+ const text = screen.getByText('Message on state modal');
29
+ expect(text).toBeInTheDocument();
30
+
31
+ const buttons = screen.getAllByRole('button');
32
+ expect(buttons).toHaveLength(1);
33
+ expect(buttons[0]).toHaveTextContent('Confirm');
34
+ });
35
+
36
+ test('show cancel button', () => {
37
+ render(
38
+ StateModal({
39
+ title: 'Title of state modal',
40
+ text: 'Message on state modal',
41
+ showCancelButton: true,
42
+ }),
43
+ );
44
+
45
+ const buttons = screen.getAllByRole('button');
46
+ expect(buttons).toHaveLength(2);
47
+
48
+ const [cancelButton, confirmButton] = buttons;
49
+ expect(cancelButton).toHaveTextContent('Cancel');
50
+ expect(confirmButton).toHaveTextContent('Confirm');
51
+ });
52
+
53
+ test('custom button text', () => {
54
+ render(
55
+ StateModal({
56
+ title: 'Title of state modal',
57
+ text: 'Message on state modal',
58
+ confirmButtonText: 'OK',
59
+ cancelButtonText: 'Close',
60
+ showCancelButton: true,
61
+ }),
62
+ );
63
+
64
+ const [cancelButton, confirmButton] = screen.getAllByRole('button');
65
+ expect(cancelButton).toHaveTextContent('Close');
66
+ expect(confirmButton).toHaveTextContent('OK');
67
+ });
68
+
69
+ test('modal interactive', () => {
70
+ let handleClose;
71
+ let handleConfirm;
72
+ let handleCancel;
73
+
74
+ const renderComponent = () => {
75
+ handleClose = jest.fn();
76
+ handleConfirm = jest.fn();
77
+ handleCancel = jest.fn();
78
+
79
+ StateModal({
80
+ title: 'Title of state modal',
81
+ text: 'Message on state modal',
82
+ showCancelButton: true,
83
+ onClose: handleClose,
84
+ onConfirm: handleConfirm,
85
+ onCancel: handleCancel,
86
+ });
87
+ };
88
+
89
+ render(renderComponent());
90
+ let modal = screen.getByRole('dialog');
91
+ const [cancelButton] = screen.getAllByRole('button');
92
+
93
+ expect(modal).toBeInTheDocument();
94
+ userEvent.click(cancelButton);
95
+ expect(handleCancel).toHaveBeenCalledTimes(1);
96
+ expect(handleClose).toHaveBeenCalledTimes(1);
97
+ expect(modal).not.toBeInTheDocument();
98
+
99
+ render(renderComponent());
100
+ modal = screen.getByRole('dialog');
101
+ const [, confirmButton] = screen.getAllByRole('button');
102
+
103
+ expect(modal).toBeInTheDocument();
104
+ userEvent.click(confirmButton);
105
+ expect(handleConfirm).toHaveBeenCalledTimes(1);
106
+ expect(handleClose).toHaveBeenCalledTimes(1);
107
+ expect(modal).not.toBeInTheDocument();
108
+ });
109
+
110
+ test('dismiss', () => {
111
+ const handleClose = jest.fn();
112
+
113
+ render(
114
+ StateModal({
115
+ title: 'Title of state modal',
116
+ text: 'Message on state modal',
117
+ showCancelButton: true,
118
+ onClose: handleClose,
119
+ }),
120
+ );
121
+
122
+ let modal = screen.getByRole('dialog');
123
+ expect(modal).toBeInTheDocument();
124
+ userEvent.click(modal);
125
+ expect(modal).not.toBeInTheDocument();
126
+ expect(handleClose).toHaveBeenCalledTimes(1);
127
+
128
+ render(
129
+ StateModal({
130
+ title: 'Title of state modal',
131
+ text: 'Message on state modal',
132
+ showCancelButton: true,
133
+ onClose: handleClose,
134
+ allowDismiss: false,
135
+ }),
136
+ );
137
+
138
+ modal = screen.getByRole('dialog');
139
+ expect(modal).toBeInTheDocument();
140
+ userEvent.click(modal);
141
+ expect(modal).toBeInTheDocument();
142
+ expect(handleClose).toHaveBeenCalledTimes(1);
143
+ });
144
+ });
package/src/modal/index.js ADDED
@@ -0,0 +1,2 @@
1
+ export { default as StateModal } from './StateModal';
2
+ export { default as TitleModal } from './TitleModal';
package/src/paginate/Paginate.js ADDED
@@ -0,0 +1,132 @@
1
+ import styled, { css } from 'styled-components';
2
+ import { FaAngleLeft, FaAngleRight } from 'react-icons/fa';
3
+ import { usePagination, DOTS } from '@cashub/hooks';
4
+
5
+ const Paginate = (props) => {
6
+ const {
7
+ currentPage,
8
+ totalCount,
9
+ pageSize,
10
+ siblingCount = 1,
11
+ onPageChange,
12
+ alignRight,
13
+ } = props;
14
+
15
+ const paginationRange = usePagination({
16
+ currentPage,
17
+ totalCount,
18
+ siblingCount,
19
+ pageSize,
20
+ });
21
+
22
+ const onNext = () => {
23
+ if (currentPage === lastPage) return;
24
+ onPageChange(currentPage + 1);
25
+ };
26
+
27
+ const onPrevious = () => {
28
+ if (currentPage === 1) return;
29
+ onPageChange(currentPage - 1);
30
+ };
31
+
32
+ if (currentPage === 0 || paginationRange.length < 1) {
33
+ return null;
34
+ }
35
+
36
+ const lastPage = paginationRange[paginationRange.length - 1];
37
+
38
+ return (
39
+ <Container alignRight={alignRight}>
40
+ <Link disabled={currentPage === 1} onClick={onPrevious}>
41
+ <Icon>
42
+ <FaAngleLeft />
43
+ </Icon>
44
+ </Link>
45
+
46
+ {paginationRange.map((pageNumber, index) => {
47
+ if (pageNumber === DOTS) {
48
+ return (
49
+ <Link key={index} className='paginationDots'>
50
+ &#8230;
51
+ </Link>
52
+ );
53
+ }
54
+
55
+ return (
56
+ <Link
57
+ key={index}
58
+ active={pageNumber === currentPage}
59
+ onClick={() => onPageChange(pageNumber)}
60
+ >
61
+ {pageNumber}
62
+ </Link>
63
+ );
64
+ })}
65
+
66
+ <Link disabled={currentPage === lastPage} onClick={onNext}>
67
+ <Icon>
68
+ <FaAngleRight />
69
+ </Icon>
70
+ </Link>
71
+ </Container>
72
+ );
73
+ };
74
+
75
+ const Container = styled.ul`
76
+ display: flex;
77
+ text-align: center;
78
+
79
+ ${({ alignRight }) => alignRight && 'justify-content: flex-end'};
80
+ `;
81
+
82
+ const Link = styled.li`
83
+ width: 36px;
84
+ line-height: 37px;
85
+ font-size: var(--font-body1);
86
+ color: var(--font-on-background);
87
+ border-radius: var(--border-radius-round);
88
+ cursor: pointer;
89
+ transition: 0.3s;
90
+
91
+ &:not(:last-child) {
92
+ margin-right: var(--spacing-xs);
93
+ }
94
+
95
+ ${({ disabled }) =>
96
+ disabled &&
97
+ css`
98
+ opacity: 0.5;
99
+ cursor: no-drop;
100
+ `};
101
+
102
+ ${({ active }) =>
103
+ active &&
104
+ `
105
+ background-color: var(--color-primary);
106
+ color: var(--font-on-primary);
107
+ `}
108
+
109
+ &:hover {
110
+ ${({ disabled, className }) =>
111
+ !disabled &&
112
+ !className &&
113
+ `
114
+ background-color: var(--color-primary);
115
+ color: var(--font-on-primary);
116
+ `}
117
+ }
118
+
119
+ &.paginationDots {
120
+ cursor: default;
121
+ }
122
+ `;
123
+
124
+ const Icon = styled.span`
125
+ font-size: var(--font-body1);
126
+ display: flex;
127
+ justify-content: center;
128
+ align-items: center;
129
+ height: 100%;
130
+ `;
131
+
132
+ export default Paginate;
package/src/paginate/__stories__/Paginate.stories.js ADDED
@@ -0,0 +1,49 @@
1
+ import Paginate from '../Paginate';
2
+ import { useState, useEffect } from 'react';
3
+
4
+ const metadata = {
5
+ title: 'Paginate/Paginate',
6
+ component: Paginate,
7
+ argTypes: {
8
+ onPageChange: {
9
+ description: 'it is a function that can change page if click page number',
10
+ },
11
+ },
12
+ };
13
+
14
+ const Template = (args) => {
15
+ const { onPageChange } = args;
16
+ const [page, setPage] = useState(args.currentPage);
17
+
18
+ const handleOnPageChange = (num) => {
19
+ setPage(num);
20
+ };
21
+
22
+ useEffect(() => {
23
+ setPage(args.currentPage);
24
+ }, [args.currentPage]);
25
+
26
+ return (
27
+ <Paginate
28
+ {...args}
29
+ alt='picture'
30
+ onPageChange={(num) => {
31
+ handleOnPageChange(num);
32
+ onPageChange();
33
+ }}
34
+ currentPage={page}
35
+ />
36
+ );
37
+ };
38
+
39
+ const Default = Template.bind({});
40
+ Default.args = {
41
+ currentPage: 5,
42
+ totalCount: 100,
43
+ pageSize: 10,
44
+ alignRight: false,
45
+ siblingCount: 1,
46
+ };
47
+
48
+ export default metadata;
49
+ export { Default };