@sqrzro/admin 1.0.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (476) hide show
  1. package/.eslintrc +4 -0
  2. package/.gitattributes +1 -0
  3. package/.prettierrc +9 -0
  4. package/.storybook/main.js +40 -0
  5. package/.storybook/manager.js +4 -0
  6. package/.storybook/postcss.config.js +3 -0
  7. package/.storybook/preview.js +11 -0
  8. package/.storybook/theme.js +7 -0
  9. package/.stylelintrc +9 -0
  10. package/LICENSE +5 -0
  11. package/README.md +9 -0
  12. package/__mocks__/squarezero-utility.ts +40 -0
  13. package/assets/logo-horizontal-dark.svg +21 -0
  14. package/assets/logo-horizontal-white.svg +21 -0
  15. package/assets/logo-vertical-dark.svg +21 -0
  16. package/assets/logo-vertical-white.svg +21 -0
  17. package/dist/index.css +3554 -0
  18. package/dist/index.js +5099 -0
  19. package/dist/index.js.map +1 -0
  20. package/dist/types/components/Alert/index.d.ts +10 -0
  21. package/dist/types/components/Allow/index.d.ts +13 -0
  22. package/dist/types/components/App/index.d.ts +19 -0
  23. package/dist/types/components/AutoSuggest/index.d.ts +60 -0
  24. package/dist/types/components/Button/index.d.ts +36 -0
  25. package/dist/types/components/CalendarInput/index.d.ts +10 -0
  26. package/dist/types/components/CheckboxList/index.d.ts +4 -0
  27. package/dist/types/components/ConnectedDropdown/index.d.ts +8 -0
  28. package/dist/types/components/ConnectedList/index.d.ts +4 -0
  29. package/dist/types/components/ConnectedScene/index.d.ts +11 -0
  30. package/dist/types/components/ConnectedTable/index.d.ts +4 -0
  31. package/dist/types/components/ContentBlock/index.d.ts +6 -0
  32. package/dist/types/components/DateInput/index.d.ts +7 -0
  33. package/dist/types/components/Document/index.d.ts +6 -0
  34. package/dist/types/components/Dropdown/index.d.ts +14 -0
  35. package/dist/types/components/Fieldset/index.d.ts +11 -0
  36. package/dist/types/components/FileInput/index.d.ts +4 -0
  37. package/dist/types/components/FilterLink/index.d.ts +7 -0
  38. package/dist/types/components/Form/index.d.ts +11 -0
  39. package/dist/types/components/FormActions/index.d.ts +9 -0
  40. package/dist/types/components/FormField/index.d.ts +27 -0
  41. package/dist/types/components/FormRepeater/index.d.ts +8 -0
  42. package/dist/types/components/ImageInput/index.d.ts +4 -0
  43. package/dist/types/components/InfoPanel/index.d.ts +8 -0
  44. package/dist/types/components/Link/__mocks__/index.d.ts +6 -0
  45. package/dist/types/components/Link/index.d.ts +13 -0
  46. package/dist/types/components/List/index.d.ts +23 -0
  47. package/dist/types/components/ListActions/index.d.ts +9 -0
  48. package/dist/types/components/LoginForm/index.d.ts +3 -0
  49. package/dist/types/components/Message/index.d.ts +7 -0
  50. package/dist/types/components/ModalActions/index.d.ts +11 -0
  51. package/dist/types/components/MoneyInput/index.d.ts +10 -0
  52. package/dist/types/components/PasswordForm/index.d.ts +3 -0
  53. package/dist/types/components/PasswordInput/index.d.ts +8 -0
  54. package/dist/types/components/RadioList/index.d.ts +4 -0
  55. package/dist/types/components/Scene/index.d.ts +10 -0
  56. package/dist/types/components/SummaryList/index.d.ts +8 -0
  57. package/dist/types/components/Switch/index.d.ts +9 -0
  58. package/dist/types/components/Table/index.d.ts +13 -0
  59. package/dist/types/components/Tag/index.d.ts +8 -0
  60. package/dist/types/components/TextArea/index.d.ts +4 -0
  61. package/dist/types/components/TextInput/index.d.ts +17 -0
  62. package/dist/types/components/WebsiteInput/index.d.ts +10 -0
  63. package/dist/types/components/WeekCalendar/index.d.ts +12 -0
  64. package/dist/types/core/AppHeader/index.d.ts +3 -0
  65. package/dist/types/core/AppLogo/index.d.ts +6 -0
  66. package/dist/types/core/AppLogoImage/index.d.ts +3 -0
  67. package/dist/types/core/AppLogoPlaceholder/index.d.ts +3 -0
  68. package/dist/types/core/Assistive/index.d.ts +6 -0
  69. package/dist/types/core/Banner/index.d.ts +3 -0
  70. package/dist/types/core/BuildModal/index.d.ts +3 -0
  71. package/dist/types/core/Calendar/index.d.ts +11 -0
  72. package/dist/types/core/CalendarDay/index.d.ts +16 -0
  73. package/dist/types/core/CalendarMonth/index.d.ts +12 -0
  74. package/dist/types/core/CalendarNavigation/index.d.ts +9 -0
  75. package/dist/types/core/CalendarWeek/index.d.ts +14 -0
  76. package/dist/types/core/ChkRad/index.d.ts +10 -0
  77. package/dist/types/core/ChkRadIcon/index.d.ts +7 -0
  78. package/dist/types/core/ChkRadList/index.d.ts +15 -0
  79. package/dist/types/core/CloseButton/index.d.ts +9 -0
  80. package/dist/types/core/ConfirmModal/index.d.ts +3 -0
  81. package/dist/types/core/ConnectedRepeater/index.d.ts +26 -0
  82. package/dist/types/core/ConnectedRepeaterComponent/index.d.ts +24 -0
  83. package/dist/types/core/Container/index.d.ts +7 -0
  84. package/dist/types/core/DropdownPanel/index.d.ts +18 -0
  85. package/dist/types/core/EmptyMessage/index.d.ts +12 -0
  86. package/dist/types/core/ErrorBoundary/index.d.ts +15 -0
  87. package/dist/types/core/ErrorMessage/index.d.ts +8 -0
  88. package/dist/types/core/FilterItem/index.d.ts +10 -0
  89. package/dist/types/core/Filters/index.d.ts +11 -0
  90. package/dist/types/core/FixedActions/index.d.ts +12 -0
  91. package/dist/types/core/FormError/index.d.ts +6 -0
  92. package/dist/types/core/FormLabel/index.d.ts +8 -0
  93. package/dist/types/core/FormLegend/index.d.ts +6 -0
  94. package/dist/types/core/Header/index.d.ts +8 -0
  95. package/dist/types/core/Icon/index.d.ts +7 -0
  96. package/dist/types/core/IconButton/Icon/index.d.ts +7 -0
  97. package/dist/types/core/IconButton/index.d.ts +11 -0
  98. package/dist/types/core/InputPanel/index.d.ts +8 -0
  99. package/dist/types/core/ListItem/index.d.ts +16 -0
  100. package/dist/types/core/ListItemAction/index.d.ts +4 -0
  101. package/dist/types/core/ListItemActions/index.d.ts +8 -0
  102. package/dist/types/core/ListItemMetaItem/index.d.ts +10 -0
  103. package/dist/types/core/ListItemTitle/index.d.ts +9 -0
  104. package/dist/types/core/Loader/index.d.ts +6 -0
  105. package/dist/types/core/MeActions/index.d.ts +3 -0
  106. package/dist/types/core/MePanel/index.d.ts +9 -0
  107. package/dist/types/core/Modal/index.d.ts +12 -0
  108. package/dist/types/core/Navigation/index.d.ts +3 -0
  109. package/dist/types/core/NavigationDivider/index.d.ts +3 -0
  110. package/dist/types/core/NavigationItem/index.d.ts +7 -0
  111. package/dist/types/core/Pagination/index.d.ts +7 -0
  112. package/dist/types/core/PaginationItem/index.d.ts +7 -0
  113. package/dist/types/core/Panel/index.d.ts +8 -0
  114. package/dist/types/core/RadialProgress/index.d.ts +8 -0
  115. package/dist/types/core/StaticTextInput/index.d.ts +12 -0
  116. package/dist/types/core/Styled/index.d.ts +6 -0
  117. package/dist/types/core/SummaryListItem/index.d.ts +15 -0
  118. package/dist/types/core/TableActionsCell/index.d.ts +8 -0
  119. package/dist/types/core/TableCell/index.d.ts +8 -0
  120. package/dist/types/core/TableHead/index.d.ts +8 -0
  121. package/dist/types/core/TableRow/index.d.ts +13 -0
  122. package/dist/types/core/Tabs/index.d.ts +11 -0
  123. package/dist/types/core/TextInputAncillary/index.d.ts +11 -0
  124. package/dist/types/core/Toast/index.d.ts +3 -0
  125. package/dist/types/core/WeekCalendarDay/index.d.ts +14 -0
  126. package/dist/types/filters/BooleanFilter/index.d.ts +5 -0
  127. package/dist/types/filters/DateFilter/index.d.ts +5 -0
  128. package/dist/types/filters/DropdownFilter/index.d.ts +5 -0
  129. package/dist/types/filters/QuickDateFilter/index.d.ts +5 -0
  130. package/dist/types/filters/interfaces.d.ts +36 -0
  131. package/dist/types/hooks/useAccessiblePanel.d.ts +13 -0
  132. package/dist/types/hooks/useAppContext.d.ts +37 -0
  133. package/dist/types/hooks/useClickOutside.d.ts +3 -0
  134. package/dist/types/hooks/useConnectedList.d.ts +7 -0
  135. package/dist/types/hooks/useFilters.d.ts +3 -0
  136. package/dist/types/hooks/useForm.d.ts +26 -0
  137. package/dist/types/hooks/useFormData.d.ts +9 -0
  138. package/dist/types/hooks/useLayout.d.ts +6 -0
  139. package/dist/types/hooks/useModal.d.ts +12 -0
  140. package/dist/types/hooks/useVariant.d.ts +6 -0
  141. package/dist/types/index.d.ts +187 -0
  142. package/dist/types/scenes/Error404Scene.d.ts +3 -0
  143. package/dist/types/services/BuildService.d.ts +5 -0
  144. package/dist/types/services/ConfirmService.d.ts +12 -0
  145. package/dist/types/services/DateService.d.ts +17 -0
  146. package/dist/types/services/DownloadService.d.ts +5 -0
  147. package/dist/types/services/FilterComponentService.d.ts +8 -0
  148. package/dist/types/services/FilterService.d.ts +13 -0
  149. package/dist/types/services/FormatService.d.ts +7 -0
  150. package/dist/types/services/ToastService.d.ts +5 -0
  151. package/dist/types/utility/MockRouter/index.d.ts +2 -0
  152. package/dist/types/utility/StorybookPanel/index.d.ts +7 -0
  153. package/dist/types/utility/TestChangeHandler/index.d.ts +8 -0
  154. package/dist/types/utility/create-app.d.ts +4 -0
  155. package/dist/types/utility/interfaces.d.ts +72 -0
  156. package/dist/types/utility/prop-types.d.ts +40 -0
  157. package/docs/guides/01-installation.story.mdx +33 -0
  158. package/docs/guides/02-configuration.story.mdx +80 -0
  159. package/docs/guides/03-pages.story.mdx +18 -0
  160. package/docs/guides/04-integration.story.mdx +33 -0
  161. package/docs/guides/a11y.story.mdx +7 -0
  162. package/docs/guides/theming.story.mdx +7 -0
  163. package/docs/introduction.story.mdx +17 -0
  164. package/jest.config.js +19 -0
  165. package/package.json +101 -0
  166. package/postcss.config.js +3 -0
  167. package/rollup.config.js +36 -0
  168. package/scripts/create-exports.js +74 -0
  169. package/scripts/update-license.js +8 -0
  170. package/squarezero.config.js +5 -0
  171. package/src/components/Alert/Alert.module.css +50 -0
  172. package/src/components/Alert/Alert.spec.tsx +63 -0
  173. package/src/components/Alert/Alert.story.tsx +23 -0
  174. package/src/components/Alert/index.tsx +67 -0
  175. package/src/components/Allow/Allow.spec.tsx +37 -0
  176. package/src/components/Allow/index.tsx +42 -0
  177. package/src/components/App/App.module.css +22 -0
  178. package/src/components/App/App.spec.tsx +128 -0
  179. package/src/components/App/index.tsx +108 -0
  180. package/src/components/AutoSuggest/AutoSuggest.module.css +8 -0
  181. package/src/components/AutoSuggest/AutoSuggest.spec.tsx +211 -0
  182. package/src/components/AutoSuggest/AutoSuggest.story.tsx +30 -0
  183. package/src/components/AutoSuggest/index.tsx +216 -0
  184. package/src/components/Button/Button.module.css +95 -0
  185. package/src/components/Button/Button.spec.tsx +69 -0
  186. package/src/components/Button/Button.story.tsx +39 -0
  187. package/src/components/Button/index.tsx +99 -0
  188. package/src/components/CalendarInput/CalendarInput.module.css +8 -0
  189. package/src/components/CalendarInput/CalendarInput.spec.tsx +206 -0
  190. package/src/components/CalendarInput/CalendarInput.story.tsx +62 -0
  191. package/src/components/CalendarInput/index.tsx +122 -0
  192. package/src/components/CheckboxList/CheckboxList.spec.tsx +83 -0
  193. package/src/components/CheckboxList/index.tsx +53 -0
  194. package/src/components/ConnectedDropdown/index.tsx +56 -0
  195. package/src/components/ConnectedList/index.tsx +15 -0
  196. package/src/components/ConnectedScene/index.tsx +95 -0
  197. package/src/components/ConnectedTable/index.tsx +17 -0
  198. package/src/components/ContentBlock/ContentBlock.module.css +8 -0
  199. package/src/components/ContentBlock/ContentBlock.spec.tsx +15 -0
  200. package/src/components/ContentBlock/index.tsx +16 -0
  201. package/src/components/DateInput/DateInput.module.css +15 -0
  202. package/src/components/DateInput/DateInput.spec.tsx +91 -0
  203. package/src/components/DateInput/index.tsx +149 -0
  204. package/src/components/Document/index.tsx +20 -0
  205. package/src/components/Dropdown/Dropdown.module.css +8 -0
  206. package/src/components/Dropdown/Dropdown.spec.tsx +286 -0
  207. package/src/components/Dropdown/Dropdown.story.tsx +53 -0
  208. package/src/components/Dropdown/index.tsx +224 -0
  209. package/src/components/Fieldset/Fieldset.spec.tsx +22 -0
  210. package/src/components/Fieldset/Fieldset.story.tsx +21 -0
  211. package/src/components/Fieldset/index.tsx +30 -0
  212. package/src/components/FileInput/FileInput.module.css +18 -0
  213. package/src/components/FileInput/FileInput.spec.tsx +42 -0
  214. package/src/components/FileInput/FileInput.story.tsx +6 -0
  215. package/src/components/FileInput/index.tsx +72 -0
  216. package/src/components/FilterLink/FilterLink.module.css +9 -0
  217. package/src/components/FilterLink/FilterLink.spec.tsx +20 -0
  218. package/src/components/FilterLink/index.tsx +31 -0
  219. package/src/components/Form/Form.spec.tsx +68 -0
  220. package/src/components/Form/index.tsx +87 -0
  221. package/src/components/FormActions/FormActions.spec.tsx +10 -0
  222. package/src/components/FormActions/FormActions.story.tsx +23 -0
  223. package/src/components/FormActions/index.tsx +31 -0
  224. package/src/components/FormField/FormField.module.css +71 -0
  225. package/src/components/FormField/FormField.spec.tsx +137 -0
  226. package/src/components/FormField/FormField.story.tsx +22 -0
  227. package/src/components/FormField/index.tsx +162 -0
  228. package/src/components/FormRepeater/FormRepeater.module.css +3 -0
  229. package/src/components/FormRepeater/FormRepeater.spec.tsx +127 -0
  230. package/src/components/FormRepeater/index.tsx +118 -0
  231. package/src/components/ImageInput/ImageInput.module.css +74 -0
  232. package/src/components/ImageInput/ImageInput.spec.tsx +45 -0
  233. package/src/components/ImageInput/ImageInput.story.tsx +6 -0
  234. package/src/components/ImageInput/index.tsx +91 -0
  235. package/src/components/InfoPanel/InfoPanel.module.css +18 -0
  236. package/src/components/InfoPanel/InfoPanel.spec.tsx +15 -0
  237. package/src/components/InfoPanel/InfoPanel.story.tsx +32 -0
  238. package/src/components/InfoPanel/index.tsx +25 -0
  239. package/src/components/Link/Link.spec.tsx +62 -0
  240. package/src/components/Link/__mocks__/index.tsx +24 -0
  241. package/src/components/Link/index.tsx +51 -0
  242. package/src/components/List/List.module.css +9 -0
  243. package/src/components/List/List.spec.tsx +311 -0
  244. package/src/components/List/List.story.tsx +92 -0
  245. package/src/components/List/index.tsx +79 -0
  246. package/src/components/ListActions/ListActions.spec.tsx +10 -0
  247. package/src/components/ListActions/ListActions.story.tsx +6 -0
  248. package/src/components/ListActions/index.tsx +31 -0
  249. package/src/components/LoginForm/LoginForm.module.css +21 -0
  250. package/src/components/LoginForm/LoginForm.spec.tsx +63 -0
  251. package/src/components/LoginForm/index.tsx +102 -0
  252. package/src/components/Message/Message.module.css +14 -0
  253. package/src/components/Message/Message.spec.tsx +20 -0
  254. package/src/components/Message/index.tsx +27 -0
  255. package/src/components/ModalActions/ModalActions.module.css +5 -0
  256. package/src/components/ModalActions/ModalActions.spec.tsx +53 -0
  257. package/src/components/ModalActions/ModalActions.story.tsx +6 -0
  258. package/src/components/ModalActions/index.tsx +47 -0
  259. package/src/components/MoneyInput/MoneyInput.spec.tsx +17 -0
  260. package/src/components/MoneyInput/MoneyInput.story.tsx +6 -0
  261. package/src/components/MoneyInput/index.tsx +16 -0
  262. package/src/components/PasswordForm/PasswordForm.module.css +21 -0
  263. package/src/components/PasswordForm/index.tsx +94 -0
  264. package/src/components/PasswordInput/PasswordInput.module.css +23 -0
  265. package/src/components/PasswordInput/PasswordInput.spec.tsx +31 -0
  266. package/src/components/PasswordInput/PasswordInput.story.tsx +16 -0
  267. package/src/components/PasswordInput/index.tsx +27 -0
  268. package/src/components/RadioList/RadioList.spec.tsx +45 -0
  269. package/src/components/RadioList/index.tsx +10 -0
  270. package/src/components/Scene/Scene.spec.tsx +123 -0
  271. package/src/components/Scene/Scene.story.tsx +6 -0
  272. package/src/components/Scene/index.tsx +58 -0
  273. package/src/components/SummaryList/SummaryList.module.css +16 -0
  274. package/src/components/SummaryList/SummaryList.spec.tsx +77 -0
  275. package/src/components/SummaryList/SummaryList.story.tsx +11 -0
  276. package/src/components/SummaryList/index.tsx +37 -0
  277. package/src/components/Switch/Switch.module.css +86 -0
  278. package/src/components/Switch/Switch.spec.tsx +64 -0
  279. package/src/components/Switch/index.tsx +85 -0
  280. package/src/components/Table/Table.module.css +14 -0
  281. package/src/components/Table/Table.spec.tsx +128 -0
  282. package/src/components/Table/Table.story.tsx +101 -0
  283. package/src/components/Table/index.tsx +114 -0
  284. package/src/components/Tag/Tag.module.css +37 -0
  285. package/src/components/Tag/Tag.spec.tsx +10 -0
  286. package/src/components/Tag/Tag.story.tsx +55 -0
  287. package/src/components/Tag/index.tsx +27 -0
  288. package/src/components/TextArea/TextArea.module.css +23 -0
  289. package/src/components/TextArea/TextArea.spec.tsx +77 -0
  290. package/src/components/TextArea/index.tsx +59 -0
  291. package/src/components/TextInput/TextInput.module.css +57 -0
  292. package/src/components/TextInput/TextInput.spec.tsx +134 -0
  293. package/src/components/TextInput/TextInput.story.tsx +24 -0
  294. package/src/components/TextInput/index.tsx +146 -0
  295. package/src/components/WebsiteInput/WebsiteInput.spec.tsx +17 -0
  296. package/src/components/WebsiteInput/index.tsx +16 -0
  297. package/src/components/WeekCalendar/WeekCalendar.module.css +19 -0
  298. package/src/components/WeekCalendar/index.tsx +80 -0
  299. package/src/core/AppHeader/index.tsx +23 -0
  300. package/src/core/AppLogo/AppLogo.module.css +19 -0
  301. package/src/core/AppLogo/index.tsx +33 -0
  302. package/src/core/AppLogoImage/index.tsx +19 -0
  303. package/src/core/AppLogoPlaceholder/index.tsx +26 -0
  304. package/src/core/Assistive/Assistive.module.css +10 -0
  305. package/src/core/Assistive/index.tsx +18 -0
  306. package/src/core/Banner/Banner.module.css +36 -0
  307. package/src/core/Banner/index.tsx +25 -0
  308. package/src/core/BuildModal/index.tsx +119 -0
  309. package/src/core/Calendar/index.tsx +116 -0
  310. package/src/core/CalendarDay/CalendarDay.module.css +61 -0
  311. package/src/core/CalendarDay/index.tsx +82 -0
  312. package/src/core/CalendarMonth/CalendarMonth.module.css +13 -0
  313. package/src/core/CalendarMonth/index.tsx +101 -0
  314. package/src/core/CalendarNavigation/CalendarNavigation.module.css +26 -0
  315. package/src/core/CalendarNavigation/index.tsx +56 -0
  316. package/src/core/CalendarWeek/index.tsx +95 -0
  317. package/src/core/ChkRad/ChkRad.module.css +31 -0
  318. package/src/core/ChkRad/ChkRad.spec.tsx +72 -0
  319. package/src/core/ChkRad/index.tsx +80 -0
  320. package/src/core/ChkRadIcon/ChkRadIcon.module.css +28 -0
  321. package/src/core/ChkRadIcon/index.tsx +33 -0
  322. package/src/core/ChkRadList/ChkRadList.module.css +10 -0
  323. package/src/core/ChkRadList/index.tsx +85 -0
  324. package/src/core/CloseButton/CloseButton.spec.tsx +36 -0
  325. package/src/core/CloseButton/index.tsx +31 -0
  326. package/src/core/ConfirmModal/ConfirmModal.spec.tsx +88 -0
  327. package/src/core/ConfirmModal/index.tsx +51 -0
  328. package/src/core/ConnectedRepeater/index.tsx +248 -0
  329. package/src/core/ConnectedRepeaterComponent/index.tsx +66 -0
  330. package/src/core/Container/Container.module.css +12 -0
  331. package/src/core/Container/index.tsx +35 -0
  332. package/src/core/DropdownPanel/DropdownPanel.module.css +68 -0
  333. package/src/core/DropdownPanel/index.tsx +92 -0
  334. package/src/core/EmptyMessage/EmptyMessage.module.css +18 -0
  335. package/src/core/EmptyMessage/index.tsx +31 -0
  336. package/src/core/ErrorBoundary/ErrorBoundary.spec.tsx +33 -0
  337. package/src/core/ErrorBoundary/index.tsx +42 -0
  338. package/src/core/ErrorMessage/ErrorMessage.module.css +25 -0
  339. package/src/core/ErrorMessage/ErrorMessage.spec.tsx +31 -0
  340. package/src/core/ErrorMessage/index.tsx +37 -0
  341. package/src/core/FilterItem/FilterItem.module.css +104 -0
  342. package/src/core/FilterItem/index.tsx +164 -0
  343. package/src/core/Filters/Filters.module.css +86 -0
  344. package/src/core/Filters/Filters.spec.tsx +533 -0
  345. package/src/core/Filters/index.tsx +158 -0
  346. package/src/core/FixedActions/FixedActions.module.css +24 -0
  347. package/src/core/FixedActions/index.tsx +52 -0
  348. package/src/core/FormError/FormError.module.css +7 -0
  349. package/src/core/FormError/index.tsx +18 -0
  350. package/src/core/FormLabel/FormLabel.module.css +15 -0
  351. package/src/core/FormLabel/index.tsx +25 -0
  352. package/src/core/FormLegend/FormLegend.module.css +13 -0
  353. package/src/core/FormLegend/index.tsx +18 -0
  354. package/src/core/Header/Header.module.css +35 -0
  355. package/src/core/Header/index.tsx +37 -0
  356. package/src/core/Icon/Icon.spec.tsx +31 -0
  357. package/src/core/Icon/index.tsx +64 -0
  358. package/src/core/IconButton/Icon/Icon.spec.tsx +31 -0
  359. package/src/core/IconButton/Icon/index.tsx +64 -0
  360. package/src/core/IconButton/IconButton.module.css +32 -0
  361. package/src/core/IconButton/index.tsx +55 -0
  362. package/src/core/InputPanel/InputPanel.module.css +70 -0
  363. package/src/core/InputPanel/index.tsx +28 -0
  364. package/src/core/ListItem/ListItem.module.css +28 -0
  365. package/src/core/ListItem/ListItem.story.tsx +28 -0
  366. package/src/core/ListItem/index.tsx +99 -0
  367. package/src/core/ListItemAction/ListItemAction.module.css +28 -0
  368. package/src/core/ListItemAction/index.tsx +30 -0
  369. package/src/core/ListItemActions/ListItemActions.module.css +94 -0
  370. package/src/core/ListItemActions/index.tsx +55 -0
  371. package/src/core/ListItemMetaItem/ListItemMetaItem.module.css +18 -0
  372. package/src/core/ListItemMetaItem/index.tsx +54 -0
  373. package/src/core/ListItemTitle/ListItemTitle.module.css +14 -0
  374. package/src/core/ListItemTitle/ListItemTitle.spec.tsx +33 -0
  375. package/src/core/ListItemTitle/index.tsx +72 -0
  376. package/src/core/Loader/Loader.module.css +57 -0
  377. package/src/core/Loader/Loader.story.tsx +8 -0
  378. package/src/core/Loader/index.tsx +27 -0
  379. package/src/core/MeActions/MeActions.module.css +45 -0
  380. package/src/core/MeActions/index.tsx +46 -0
  381. package/src/core/MePanel/MePanel.module.css +75 -0
  382. package/src/core/MePanel/index.tsx +45 -0
  383. package/src/core/Modal/Modal.module.css +84 -0
  384. package/src/core/Modal/Modal.spec.tsx +51 -0
  385. package/src/core/Modal/index.tsx +66 -0
  386. package/src/core/Navigation/Navigation.module.css +83 -0
  387. package/src/core/Navigation/Navigation.spec.tsx +101 -0
  388. package/src/core/Navigation/index.tsx +109 -0
  389. package/src/core/NavigationDivider/NavigationDivider.module.css +18 -0
  390. package/src/core/NavigationDivider/index.tsx +13 -0
  391. package/src/core/NavigationItem/NavigationItem.module.css +51 -0
  392. package/src/core/NavigationItem/index.tsx +59 -0
  393. package/src/core/Pagination/Pagination.module.css +15 -0
  394. package/src/core/Pagination/index.tsx +100 -0
  395. package/src/core/PaginationItem/PaginationItem.module.css +33 -0
  396. package/src/core/PaginationItem/index.tsx +46 -0
  397. package/src/core/Panel/Panel.module.css +15 -0
  398. package/src/core/Panel/index.tsx +31 -0
  399. package/src/core/RadialProgress/RadialProgress.module.css +78 -0
  400. package/src/core/RadialProgress/index.tsx +52 -0
  401. package/src/core/StaticTextInput/StaticTextInput.module.css +79 -0
  402. package/src/core/StaticTextInput/StaticTextInput.spec.tsx +133 -0
  403. package/src/core/StaticTextInput/index.tsx +114 -0
  404. package/src/core/Styled/Styled.spec.tsx +38 -0
  405. package/src/core/Styled/Styled.story.tsx +10 -0
  406. package/src/core/Styled/index.tsx +62 -0
  407. package/src/core/SummaryListItem/SummaryListItem.module.css +28 -0
  408. package/src/core/SummaryListItem/index.tsx +60 -0
  409. package/src/core/TableActionsCell/TableActionsCell.module.css +3 -0
  410. package/src/core/TableActionsCell/index.tsx +37 -0
  411. package/src/core/TableCell/TableCell.module.css +16 -0
  412. package/src/core/TableCell/index.tsx +39 -0
  413. package/src/core/TableHead/TableHead.module.css +12 -0
  414. package/src/core/TableHead/index.tsx +48 -0
  415. package/src/core/TableRow/index.tsx +64 -0
  416. package/src/core/Tabs/Tabs.module.css +50 -0
  417. package/src/core/Tabs/index.tsx +94 -0
  418. package/src/core/TextInputAncillary/TextInputAncillary.module.css +64 -0
  419. package/src/core/TextInputAncillary/index.tsx +72 -0
  420. package/src/core/Toast/Toast.module.css +55 -0
  421. package/src/core/Toast/Toast.spec.tsx +78 -0
  422. package/src/core/Toast/index.tsx +81 -0
  423. package/src/core/WeekCalendarDay/WeekCalendarDay.module.css +32 -0
  424. package/src/core/WeekCalendarDay/index.tsx +68 -0
  425. package/src/filters/BooleanFilter/index.tsx +46 -0
  426. package/src/filters/DateFilter/index.tsx +36 -0
  427. package/src/filters/DropdownFilter/index.tsx +53 -0
  428. package/src/filters/QuickDateFilter/index.tsx +74 -0
  429. package/src/filters/interfaces.ts +40 -0
  430. package/src/hooks/useAccessiblePanel.spec.tsx +88 -0
  431. package/src/hooks/useAccessiblePanel.ts +74 -0
  432. package/src/hooks/useAppContext.ts +77 -0
  433. package/src/hooks/useClickOutside.ts +49 -0
  434. package/src/hooks/useConnectedList.ts +26 -0
  435. package/src/hooks/useFilters.ts +26 -0
  436. package/src/hooks/useForm.spec.ts +126 -0
  437. package/src/hooks/useForm.ts +99 -0
  438. package/src/hooks/useFormData.spec.ts +40 -0
  439. package/src/hooks/useFormData.ts +27 -0
  440. package/src/hooks/useLayout.spec.ts +55 -0
  441. package/src/hooks/useLayout.ts +29 -0
  442. package/src/hooks/useModal.spec.tsx +63 -0
  443. package/src/hooks/useModal.ts +60 -0
  444. package/src/hooks/useVariant.spec.ts +14 -0
  445. package/src/hooks/useVariant.ts +34 -0
  446. package/src/index.ts +194 -0
  447. package/src/scenes/Error404Scene.tsx +5 -0
  448. package/src/services/BuildService.spec.ts +56 -0
  449. package/src/services/BuildService.ts +34 -0
  450. package/src/services/ConfirmService.ts +21 -0
  451. package/src/services/DateService.spec.ts +87 -0
  452. package/src/services/DateService.ts +137 -0
  453. package/src/services/DownloadService.spec.ts +29 -0
  454. package/src/services/DownloadService.ts +14 -0
  455. package/src/services/FilterComponentService.tsx +46 -0
  456. package/src/services/FilterService.spec.ts +87 -0
  457. package/src/services/FilterService.ts +58 -0
  458. package/src/services/FormatService.spec.ts +83 -0
  459. package/src/services/FormatService.ts +55 -0
  460. package/src/services/ToastService.spec.ts +44 -0
  461. package/src/services/ToastService.ts +19 -0
  462. package/src/styles/layout.css +64 -0
  463. package/src/styles/variables.css +85 -0
  464. package/src/typings.d.ts +4 -0
  465. package/src/utility/MockRouter/index.ts +45 -0
  466. package/src/utility/StorybookPanel/StorybookPanel.module.css +9 -0
  467. package/src/utility/StorybookPanel/index.tsx +25 -0
  468. package/src/utility/TestChangeHandler/TestChangeHandler.module.css +7 -0
  469. package/src/utility/TestChangeHandler/TestChangeHandler.spec.tsx +24 -0
  470. package/src/utility/TestChangeHandler/index.tsx +54 -0
  471. package/src/utility/create-app.tsx +29 -0
  472. package/src/utility/interfaces.ts +119 -0
  473. package/src/utility/prop-types.ts +67 -0
  474. package/tests/setupFilesAfterEnv.js +10 -0
  475. package/tsconfig.json +26 -0
  476. package/tsconfig.types.json +9 -0
package/src/components/LoginForm/index.tsx ADDED
@@ -0,0 +1,102 @@
1
+ import React, { Fragment } from 'react';
2
+ import Head from 'next/head';
3
+
4
+ import { AuthService } from '@sqrzro/utility';
5
+
6
+ import useAppContext from '@hooks/useAppContext';
7
+ import useFormData from '@hooks/useFormData';
8
+ import useForm from '@hooks/useForm';
9
+
10
+ import AppLogo from '@core/AppLogo';
11
+ import Panel from '@core/Panel';
12
+
13
+ import Button from '@components/Button';
14
+ import Form from '@components/Form';
15
+ import FormField from '@components/FormField';
16
+ import PasswordInput from '@components/PasswordInput';
17
+
18
+ import type { SceneComponentType } from '@utility/interfaces';
19
+ import { NextRouterPropType } from '@utility/prop-types';
20
+
21
+ import styles from './LoginForm.module.css';
22
+
23
+ const AUTH_DEFAULTS = {
24
+ identifier: 'username',
25
+ identifierLabel: 'Username',
26
+ tfa: false,
27
+ };
28
+
29
+ const LoginForm: SceneComponentType = ({ router }) => {
30
+ const { name, ...context } = useAppContext();
31
+
32
+ // eslint-disable-next-line react/destructuring-assignment
33
+ const auth = { ...AUTH_DEFAULTS, ...context.auth };
34
+
35
+ const [formData, setFormData] = useFormData({
36
+ defaults: {
37
+ [auth.identifier]: router.query[auth.identifier]?.toString() || '',
38
+ password: '',
39
+ },
40
+ fields: [auth.identifier, 'password'],
41
+ });
42
+
43
+ const { errors, isLoading, handleSubmit } = useForm({
44
+ errorMessage: false,
45
+ formData,
46
+ method: 'post',
47
+ successMessage: false,
48
+ url: 'tokens',
49
+ onSubmitSuccess: (response) => AuthService.login(response.data.token as string),
50
+ });
51
+
52
+ const handleKeyDown = (event: React.KeyboardEvent): void => {
53
+ if (event.key === 'Enter') {
54
+ handleSubmit();
55
+ }
56
+ };
57
+
58
+ return (
59
+ <Fragment>
60
+ <Head>
61
+ <title>Login | {name}</title>
62
+ </Head>
63
+ <div className={styles.root}>
64
+ <Panel isPadded>
65
+ <div className={styles.logo}>
66
+ <AppLogo />
67
+ </div>
68
+ <Form
69
+ data={formData}
70
+ errors={errors}
71
+ onChange={setFormData}
72
+ onSubmit={handleSubmit}
73
+ >
74
+ <FormField
75
+ label={auth.identifierLabel}
76
+ name={auth.identifier}
77
+ onKeyDown={handleKeyDown}
78
+ />
79
+ <FormField
80
+ label="Password"
81
+ name="password"
82
+ onKeyDown={handleKeyDown}
83
+ render={(props): React.ReactNode => <PasswordInput {...props} />}
84
+ />
85
+ <hr />
86
+ <Button isDisabled={isLoading} type="submit" isFullWidth>
87
+ {isLoading ? 'Loading...' : 'Log In'}
88
+ </Button>
89
+ </Form>
90
+ </Panel>
91
+ </div>
92
+ </Fragment>
93
+ );
94
+ };
95
+
96
+ LoginForm.hasLayout = false;
97
+
98
+ LoginForm.propTypes = {
99
+ router: NextRouterPropType.isRequired,
100
+ };
101
+
102
+ export default LoginForm;
package/src/components/Message/Message.module.css ADDED
@@ -0,0 +1,14 @@
1
+ .root {
2
+ & p:not(:last-child) {
3
+ margin-bottom: 1em;
4
+ }
5
+ }
6
+
7
+ .title {
8
+ font-size: var(--fs-xlrg);
9
+ font-weight: var(--fw-bold);
10
+ line-height: var(--lh-tight);
11
+ margin-bottom: 2rem;
12
+ margin-left: -.2rem;
13
+ width: 100%;
14
+ }
package/src/components/Message/Message.spec.tsx ADDED
@@ -0,0 +1,20 @@
1
+ import React from 'react';
2
+ import { render, screen } from '@testing-library/react';
3
+
4
+ import Message from './index';
5
+
6
+ describe('DateInput', () => {
7
+ it('should render', () => {
8
+ render(<Message>Lorem</Message>);
9
+ });
10
+
11
+ it('should render default', () => {
12
+ render(<Message>Lorem</Message>);
13
+ expect(screen.getByText(/^Lorem$/u)).toBeInTheDocument();
14
+ });
15
+
16
+ it('should render title', () => {
17
+ render(<Message title="Lorem">Lorem</Message>);
18
+ expect(screen.getByRole('heading')).toHaveTextContent(/^Lorem$/u);
19
+ });
20
+ });
package/src/components/Message/index.tsx ADDED
@@ -0,0 +1,27 @@
1
+ import React from 'react';
2
+ import PropTypes from 'prop-types';
3
+
4
+ import Panel from '@core/Panel';
5
+
6
+ import styles from './Message.module.css';
7
+
8
+ interface MessageProps {
9
+ children: React.ReactNode;
10
+ title?: string | null;
11
+ }
12
+
13
+ const Message: React.FunctionComponent<MessageProps> = ({ children, title }) => (
14
+ <Panel isPadded isSpaced>
15
+ <div className={styles.root}>
16
+ {title ? <h3 className={styles.title}>{title}</h3> : null}
17
+ {children}
18
+ </div>
19
+ </Panel>
20
+ );
21
+
22
+ Message.propTypes = {
23
+ children: PropTypes.node.isRequired,
24
+ title: PropTypes.string,
25
+ };
26
+
27
+ export default Message;
package/src/components/ModalActions/ModalActions.module.css ADDED
@@ -0,0 +1,5 @@
1
+ .root {
2
+ border-top: .1rem var(--clr-grey300) solid;
3
+ display: flex;
4
+ padding-top: 3rem;
5
+ }
package/src/components/ModalActions/ModalActions.spec.tsx ADDED
@@ -0,0 +1,53 @@
1
+ import React from 'react';
2
+ import { render, screen } from '@testing-library/react';
3
+ import userEvent from '@testing-library/user-event';
4
+
5
+ import ModalActions from './index';
6
+
7
+ describe('ModalActions', () => {
8
+ it('should render', () => {
9
+ render(<ModalActions label="Lorem" />);
10
+ });
11
+
12
+ it('should render defaults', () => {
13
+ render(<ModalActions label="Lorem" />);
14
+
15
+ const button = screen.getByRole('button');
16
+
17
+ expect(button).not.toBeDisabled();
18
+ expect(button).toHaveClass('root');
19
+ expect(button).toHaveAttribute('type', 'submit');
20
+ });
21
+
22
+ it('should render label', () => {
23
+ render(<ModalActions label="Lorem" />);
24
+ expect(screen.getByRole('button')).toHaveTextContent(/^Lorem$/u);
25
+ });
26
+
27
+ it('should be disabled', () => {
28
+ render(<ModalActions label="Lorem" isDisabled />);
29
+ expect(screen.getByRole('button')).toBeDisabled();
30
+ });
31
+
32
+ it('should be loading', () => {
33
+ render(<ModalActions label="Lorem" isLoading />);
34
+
35
+ const button = screen.getByRole('button');
36
+
37
+ expect(button).toBeDisabled();
38
+ expect(button).toHaveTextContent(/^Saving\.\.\.$/u);
39
+ });
40
+
41
+ it('should handle onclick', () => {
42
+ const mockFn = jest.fn();
43
+ render(<ModalActions label="Lorem" onClick={mockFn} />);
44
+
45
+ const button = screen.getByRole('button');
46
+
47
+ expect(button).toHaveAttribute('type', 'button');
48
+
49
+ expect(mockFn).toHaveBeenCalledTimes(0);
50
+ userEvent.click(button);
51
+ expect(mockFn).toHaveBeenCalledTimes(1);
52
+ });
53
+ });
package/src/components/ModalActions/ModalActions.story.tsx ADDED
@@ -0,0 +1,6 @@
1
+ import React from 'react';
2
+ import ModalActions from './index';
3
+
4
+ export default { title: 'Components/ModalActions', component: ModalActions };
5
+
6
+ export const Default = (): React.ReactElement => <ModalActions label="Lorem Ipsum" />;
package/src/components/ModalActions/index.tsx ADDED
@@ -0,0 +1,47 @@
1
+ import React from 'react';
2
+ import PropTypes from 'prop-types';
3
+
4
+ import Button from '@components/Button';
5
+ import type { ButtonVariant } from '@utility/interfaces';
6
+ import { ButtonVariantPropType } from '@utility/prop-types';
7
+
8
+ import styles from './ModalActions.module.css';
9
+
10
+ interface ModalActionsProps {
11
+ isDisabled?: boolean;
12
+ isLoading?: boolean;
13
+ label: string;
14
+ onClick?: React.MouseEventHandler<HTMLButtonElement>;
15
+ variant?: ButtonVariant | ButtonVariant[];
16
+ }
17
+
18
+ const ModalActions: React.FunctionComponent<ModalActionsProps> = ({
19
+ label,
20
+ isDisabled,
21
+ isLoading,
22
+ onClick,
23
+ variant,
24
+ }) => (
25
+ <div className={styles.root}>
26
+ <div>
27
+ <Button
28
+ isDisabled={isDisabled || isLoading}
29
+ onClick={onClick}
30
+ type={onClick ? 'button' : 'submit'}
31
+ variant={variant}
32
+ >
33
+ {isLoading ? 'Saving...' : label}
34
+ </Button>
35
+ </div>
36
+ </div>
37
+ );
38
+
39
+ ModalActions.propTypes = {
40
+ label: PropTypes.string.isRequired,
41
+ isDisabled: PropTypes.bool,
42
+ isLoading: PropTypes.bool,
43
+ variant: ButtonVariantPropType,
44
+ onClick: PropTypes.func,
45
+ };
46
+
47
+ export default ModalActions;
package/src/components/MoneyInput/MoneyInput.spec.tsx ADDED
@@ -0,0 +1,17 @@
1
+ import React from 'react';
2
+ import { render, screen } from '@testing-library/react';
3
+
4
+ import MoneyInput from './index';
5
+
6
+ describe('WebsiteInput', () => {
7
+ it('should render', () => {
8
+ render(<MoneyInput name="lorem" />);
9
+ });
10
+
11
+ it('should render prefix', () => {
12
+ render(<MoneyInput name="lorem" />);
13
+
14
+ expect(screen.getByTestId('text-input-root')).toHaveClass('root rootHasPrefix');
15
+ expect(screen.queryByText('£')).toHaveClass('prefix');
16
+ });
17
+ });
package/src/components/MoneyInput/MoneyInput.story.tsx ADDED
@@ -0,0 +1,6 @@
1
+ import React from 'react';
2
+ import MoneyInput from './index';
3
+
4
+ export default { title: 'Components/MoneyInput', component: MoneyInput };
5
+
6
+ export const Default = (): React.ReactElement => <MoneyInput name="lorem" />;
package/src/components/MoneyInput/index.tsx ADDED
@@ -0,0 +1,16 @@
1
+ import React from 'react';
2
+
3
+ import TextInput from '@components/TextInput';
4
+ import type { TextInputProps } from '@components/TextInput';
5
+
6
+ /**
7
+ * A `TextInput` component with a pre-defined `prefix` prop set to a pound sign. All other props are
8
+ * simply passed through to the TextInput. Technically, the order of the props is such that the
9
+ * prefix can be overridden or removed all together. If this is the case, the component is no
10
+ * different to a `TextInput`.
11
+ */
12
+ const MoneyInput: React.FunctionComponent<TextInputProps> = (props) => (
13
+ <TextInput prefix="£" {...props} />
14
+ );
15
+
16
+ export default MoneyInput;
package/src/components/PasswordForm/PasswordForm.module.css ADDED
@@ -0,0 +1,21 @@
1
+ .root {
2
+ align-items: center;
3
+ display: flex;
4
+ flex-direction: column;
5
+ height: 80vh;
6
+ justify-content: center;
7
+ margin: 0 auto;
8
+ max-width: 48rem;
9
+ padding: 4rem clamp(1rem, 2.5vw, 2rem);
10
+ }
11
+
12
+ .logo {
13
+ background-color: var(--clr-brand);
14
+ border-radius: 0 0 .5rem .5rem;
15
+ display: flex;
16
+ flex-direction: column;
17
+ height: 10rem;
18
+ justify-content: center;
19
+ margin: clamp(-3rem, -3.75vw, -1.5rem) auto 3rem;
20
+ width: 6rem;
21
+ }
package/src/components/PasswordForm/index.tsx ADDED
@@ -0,0 +1,94 @@
1
+ import React, { Fragment } from 'react';
2
+ import Head from 'next/head';
3
+
4
+ import useAppContext from '@hooks/useAppContext';
5
+ import useFormData from '@hooks/useFormData';
6
+ import useForm from '@hooks/useForm';
7
+
8
+ import AppLogo from '@core/AppLogo';
9
+ import Panel from '@core/Panel';
10
+
11
+ import Button from '@components/Button';
12
+ import Form from '@components/Form';
13
+ import FormField from '@components/FormField';
14
+ import PasswordInput from '@components/PasswordInput';
15
+
16
+ import type { SceneComponentType } from '@utility/interfaces';
17
+ import { NextRouterPropType } from '@utility/prop-types';
18
+
19
+ import styles from './PasswordForm.module.css';
20
+
21
+ const AUTH_ROUTE = '/auth/login';
22
+
23
+ const PasswordForm: SceneComponentType = ({ router }) => {
24
+ const { name } = useAppContext();
25
+
26
+ const [formData, setFormData] = useFormData({
27
+ fields: ['password', 'password_confirmation'],
28
+ });
29
+
30
+ const handleSubmitSuccess = (): void => {
31
+ void router.push(`${AUTH_ROUTE}?email=${router.query.email?.toString() || ''}`);
32
+ };
33
+
34
+ const { errors, isLoading, handleSubmit } = useForm({
35
+ errorMessage: false,
36
+ formData,
37
+ method: 'post',
38
+ successMessage: 'Password reset successfully. You can now log in.',
39
+ url: 'tokens/password',
40
+ onSubmitSuccess: handleSubmitSuccess,
41
+ transformRequest: (data) => ({ ...(router.query as Record<string, string>), ...data }),
42
+ });
43
+
44
+ const handleKeyDown = (event: React.KeyboardEvent): void => {
45
+ if (event.key === 'Enter') {
46
+ handleSubmit();
47
+ }
48
+ };
49
+
50
+ return (
51
+ <Fragment>
52
+ <Head>
53
+ <title>Reset Password | {name}</title>
54
+ </Head>
55
+ <div className={styles.root}>
56
+ <Panel isPadded>
57
+ <div className={styles.logo}>
58
+ <AppLogo />
59
+ </div>
60
+ <Form
61
+ data={formData}
62
+ errors={errors}
63
+ onChange={setFormData}
64
+ onSubmit={handleSubmit}
65
+ >
66
+ <FormField
67
+ label="New Password"
68
+ name="password"
69
+ render={(props): React.ReactNode => <PasswordInput {...props} />}
70
+ />
71
+ <FormField
72
+ label="Confirm New Password"
73
+ name="password_confirmation"
74
+ onKeyDown={handleKeyDown}
75
+ render={(props): React.ReactNode => <PasswordInput {...props} />}
76
+ />
77
+ <hr />
78
+ <Button isDisabled={isLoading} type="submit">
79
+ {isLoading ? 'Loading...' : 'Reset Password'}
80
+ </Button>
81
+ </Form>
82
+ </Panel>
83
+ </div>
84
+ </Fragment>
85
+ );
86
+ };
87
+
88
+ PasswordForm.hasLayout = false;
89
+
90
+ PasswordForm.propTypes = {
91
+ router: NextRouterPropType.isRequired,
92
+ };
93
+
94
+ export default PasswordForm;
package/src/components/PasswordInput/PasswordInput.module.css ADDED
@@ -0,0 +1,23 @@
1
+ .root {
2
+ position: relative;
3
+ }
4
+
5
+ .control {
6
+ background: transparent;
7
+ border: 0;
8
+ color: var(--clr-link);
9
+ cursor: pointer;
10
+ font-family: inherit;
11
+ font-size: var(--fs-xsml);
12
+ height: 100%;
13
+ right: 1rem;
14
+ overflow: hidden;
15
+ padding-top: .1rem;
16
+ position: absolute;
17
+ text-align: right;
18
+ top: 0;
19
+
20
+ &:focus {
21
+ outline: none;
22
+ }
23
+ }
package/src/components/PasswordInput/PasswordInput.spec.tsx ADDED
@@ -0,0 +1,31 @@
1
+ import React from 'react';
2
+ import { render, screen } from '@testing-library/react';
3
+ import userEvent from '@testing-library/user-event';
4
+
5
+ import PasswordInput from './index';
6
+
7
+ describe('PasswordInput', () => {
8
+ it('should render', () => {
9
+ render(<PasswordInput name="lorem" />);
10
+ });
11
+
12
+ it('should handle show/hide', () => {
13
+ render(<PasswordInput name="lorem" />);
14
+
15
+ const input = screen.getByDisplayValue('');
16
+ const button = screen.getByRole('button');
17
+
18
+ expect(input).toHaveAttribute('type', 'password');
19
+ expect(button).toContainHTML('Show');
20
+
21
+ userEvent.click(screen.getByRole('button'));
22
+
23
+ expect(input).toHaveAttribute('type', 'text');
24
+ expect(button).toContainHTML('Hide');
25
+
26
+ userEvent.click(screen.getByRole('button'));
27
+
28
+ expect(input).toHaveAttribute('type', 'password');
29
+ expect(button).toContainHTML('Show');
30
+ });
31
+ });
package/src/components/PasswordInput/PasswordInput.story.tsx ADDED
@@ -0,0 +1,16 @@
1
+ import React from 'react';
2
+ import PasswordInput from './index';
3
+
4
+ import TestChangeHandler from '@utility/TestChangeHandler';
5
+
6
+ export default {
7
+ title: 'Components/PasswordInput',
8
+ component: PasswordInput,
9
+ decorators: [
10
+ (storyFn: () => React.ReactElement): React.ReactElement => (
11
+ <TestChangeHandler>{storyFn()}</TestChangeHandler>
12
+ ),
13
+ ],
14
+ };
15
+
16
+ export const Basic = (): React.ReactElement => <PasswordInput name="lorem" />;
package/src/components/PasswordInput/index.tsx ADDED
@@ -0,0 +1,27 @@
1
+ import React, { useState } from 'react';
2
+
3
+ import TextInput from '@components/TextInput';
4
+ import type { TextInputProps } from '@components/TextInput';
5
+
6
+ import styles from './PasswordInput.module.css';
7
+
8
+ /**
9
+ * A `TextInput` component, with a control that toggles it `type` between 'text' and 'password'. All
10
+ * the props are simply passed though to the `TextInput`, so check there for more information.
11
+ */
12
+ const PasswordInput: React.FunctionComponent<TextInputProps> = (props) => {
13
+ const [isVisible, setIsVisible] = useState(false);
14
+
15
+ const toggleVisible = (): void => setIsVisible(!isVisible);
16
+
17
+ return (
18
+ <div className={styles.root}>
19
+ <TextInput type={isVisible ? 'text' : 'password'} {...props} />
20
+ <button className={styles.control} onClick={toggleVisible} type="button">
21
+ {isVisible ? 'Hide' : 'Show'}
22
+ </button>
23
+ </div>
24
+ );
25
+ };
26
+
27
+ export default PasswordInput;
package/src/components/RadioList/RadioList.spec.tsx ADDED
@@ -0,0 +1,45 @@
1
+ import React from 'react';
2
+ import { render, screen } from '@testing-library/react';
3
+ import userEvent from '@testing-library/user-event';
4
+
5
+ import RadioList from './index';
6
+
7
+ const mockData = [
8
+ {
9
+ label: 'Lorem',
10
+ value: 1,
11
+ },
12
+ {
13
+ label: 'Ipsum',
14
+ value: 'ipsum',
15
+ },
16
+ ];
17
+
18
+ describe('RadioList', () => {
19
+ it('should render', () => {
20
+ render(<RadioList data={mockData} name="lorem" />);
21
+ });
22
+
23
+ it('should render radio buttons', () => {
24
+ render(<RadioList data={mockData} name="lorem" />);
25
+ expect(screen.queryAllByRole('radio')).toHaveLength(2);
26
+ });
27
+
28
+ it('should highlight selected', () => {
29
+ render(<RadioList data={mockData} name="lorem" value="1" />);
30
+ expect(screen.getAllByRole('radio')[0]).toHaveAttribute('checked');
31
+ });
32
+
33
+ it('should handle onchange', () => {
34
+ const mockFn = jest.fn();
35
+ render(<RadioList data={mockData} name="lorem" onChange={mockFn} />);
36
+
37
+ expect(mockFn).toHaveBeenCalledTimes(0);
38
+ userEvent.click(screen.getAllByRole('radio')[0]);
39
+ expect(mockFn).toHaveBeenCalledTimes(1);
40
+ expect(mockFn).toHaveBeenLastCalledWith({
41
+ item: { id: 1, name: 'Lorem' },
42
+ target: { name: 'lorem', value: 1 },
43
+ });
44
+ });
45
+ });
package/src/components/RadioList/index.tsx ADDED
@@ -0,0 +1,10 @@
1
+ import React from 'react';
2
+
3
+ import ChkRadList from '@core/ChkRadList';
4
+ import type { ChkRadListElementProps } from '@core/ChkRadList';
5
+
6
+ const RadioList: React.FunctionComponent<ChkRadListElementProps> = (props) => (
7
+ <ChkRadList {...props} type="radio" />
8
+ );
9
+
10
+ export default RadioList;