@clement_lores/admin-design-system 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (858) hide show
  1. package/.babelrc.cjs +23 -0
  2. package/.eslintrc +50 -0
  3. package/.firebaserc +17 -0
  4. package/.prettierrc +6 -0
  5. package/.releaserc +36 -0
  6. package/.storybook/main.mjs +103 -0
  7. package/.storybook/manager.mjs +49 -0
  8. package/.storybook/preview-head.html +4 -0
  9. package/.storybook/preview.mjs +53 -0
  10. package/.storybook/theme-decorator.js +27 -0
  11. package/README.md +132 -0
  12. package/build/atoms/avatar/avatar.js +44 -0
  13. package/build/atoms/avatar/avatar.stories.js +19 -0
  14. package/build/atoms/avatar/index.js +1 -0
  15. package/build/atoms/badge/badge-props.doc.md +10 -0
  16. package/build/atoms/badge/badge.doc.md +90 -0
  17. package/build/atoms/badge/badge.js +86 -0
  18. package/build/atoms/badge/badge.stories.js +91 -0
  19. package/build/atoms/badge/index.js +1 -0
  20. package/build/atoms/box/box-props.doc.md +16 -0
  21. package/build/atoms/box/box.doc.md +75 -0
  22. package/build/atoms/box/box.js +97 -0
  23. package/build/atoms/box/box.stories.js +41 -0
  24. package/build/atoms/box/index.js +1 -0
  25. package/build/atoms/button/button-css.js +193 -0
  26. package/build/atoms/button/button-props.doc.md +4 -0
  27. package/build/atoms/button/button-props.js +1 -0
  28. package/build/atoms/button/button.doc.md +103 -0
  29. package/build/atoms/button/button.js +37 -0
  30. package/build/atoms/button/button.stories.js +111 -0
  31. package/build/atoms/button/index.js +3 -0
  32. package/build/atoms/check-box/check-box.js +177 -0
  33. package/build/atoms/check-box/check-box.stories.js +54 -0
  34. package/build/atoms/check-box/index.js +1 -0
  35. package/build/atoms/currency-input/currency-input.js +63 -0
  36. package/build/atoms/currency-input/currency-input.stories.js +103 -0
  37. package/build/atoms/currency-input/index.js +1 -0
  38. package/build/atoms/icon/icon.js +134 -0
  39. package/build/atoms/icon/icon.stories.js +69 -0
  40. package/build/atoms/icon/index.js +1 -0
  41. package/build/atoms/illustration/illustration.js +71 -0
  42. package/build/atoms/illustration/illustration.stories.js +55 -0
  43. package/build/atoms/illustration/index.js +1 -0
  44. package/build/atoms/illustrations/accept.js +48 -0
  45. package/build/atoms/illustrations/adminjs-logo.js +52 -0
  46. package/build/atoms/illustrations/astronaut.js +58 -0
  47. package/build/atoms/illustrations/bag.js +90 -0
  48. package/build/atoms/illustrations/beware.js +57 -0
  49. package/build/atoms/illustrations/box.js +95 -0
  50. package/build/atoms/illustrations/calendar.js +97 -0
  51. package/build/atoms/illustrations/cancel.js +48 -0
  52. package/build/atoms/illustrations/cards.js +65 -0
  53. package/build/atoms/illustrations/clip.js +107 -0
  54. package/build/atoms/illustrations/cloud.js +58 -0
  55. package/build/atoms/illustrations/cup.js +60 -0
  56. package/build/atoms/illustrations/details.js +84 -0
  57. package/build/atoms/illustrations/docs.js +77 -0
  58. package/build/atoms/illustrations/document-check.js +66 -0
  59. package/build/atoms/illustrations/document-search.js +69 -0
  60. package/build/atoms/illustrations/drawer.js +84 -0
  61. package/build/atoms/illustrations/file-search.js +37 -0
  62. package/build/atoms/illustrations/flag-in-cog.js +97 -0
  63. package/build/atoms/illustrations/folder.js +73 -0
  64. package/build/atoms/illustrations/folders.js +74 -0
  65. package/build/atoms/illustrations/github-logo.js +26 -0
  66. package/build/atoms/illustrations/identity-card.js +93 -0
  67. package/build/atoms/illustrations/index.js +35 -0
  68. package/build/atoms/illustrations/launch.js +75 -0
  69. package/build/atoms/illustrations/moon.js +135 -0
  70. package/build/atoms/illustrations/not-found.js +80 -0
  71. package/build/atoms/illustrations/notebook.js +132 -0
  72. package/build/atoms/illustrations/padlock.js +79 -0
  73. package/build/atoms/illustrations/photos.js +65 -0
  74. package/build/atoms/illustrations/planet.js +110 -0
  75. package/build/atoms/illustrations/plug.js +80 -0
  76. package/build/atoms/illustrations/props.type.js +1 -0
  77. package/build/atoms/illustrations/rocket-new.js +113 -0
  78. package/build/atoms/illustrations/rocket.js +343 -0
  79. package/build/atoms/illustrations/slack-logo.js +52 -0
  80. package/build/atoms/illustrations/tags.js +62 -0
  81. package/build/atoms/index.js +23 -0
  82. package/build/atoms/input/index.js +1 -0
  83. package/build/atoms/input/input.js +164 -0
  84. package/build/atoms/input/input.stories.js +109 -0
  85. package/build/atoms/label/index.js +1 -0
  86. package/build/atoms/label/label.js +144 -0
  87. package/build/atoms/label/label.stories.js +61 -0
  88. package/build/atoms/link/index.js +1 -0
  89. package/build/atoms/link/link.js +118 -0
  90. package/build/atoms/link/link.stories.js +52 -0
  91. package/build/atoms/loader/index.js +1 -0
  92. package/build/atoms/loader/loader.js +83 -0
  93. package/build/atoms/loader/loader.stories.js +7 -0
  94. package/build/atoms/overlay/index.js +1 -0
  95. package/build/atoms/overlay/overlay.js +19 -0
  96. package/build/atoms/overlay/overlay.stories.js +7 -0
  97. package/build/atoms/phone-input/index.js +1 -0
  98. package/build/atoms/phone-input/phone-input.js +69 -0
  99. package/build/atoms/phone-input/phone-input.stories.js +59 -0
  100. package/build/atoms/placeholder/index.js +1 -0
  101. package/build/atoms/placeholder/placeholder.js +110 -0
  102. package/build/atoms/placeholder/placeholder.stories.js +17 -0
  103. package/build/atoms/radio/index.js +1 -0
  104. package/build/atoms/radio/radio.js +146 -0
  105. package/build/atoms/radio/radio.stories.js +42 -0
  106. package/build/atoms/section/index.js +1 -0
  107. package/build/atoms/section/section.js +45 -0
  108. package/build/atoms/section/section.stories.js +24 -0
  109. package/build/atoms/table/index.js +6 -0
  110. package/build/atoms/table/table-body.js +15 -0
  111. package/build/atoms/table/table-caption.js +39 -0
  112. package/build/atoms/table/table-cell.js +38 -0
  113. package/build/atoms/table/table-head.js +33 -0
  114. package/build/atoms/table/table-row.js +24 -0
  115. package/build/atoms/table/table.js +114 -0
  116. package/build/atoms/table/table.stories.js +46 -0
  117. package/build/atoms/tabs/index.js +2 -0
  118. package/build/atoms/tabs/tab.js +29 -0
  119. package/build/atoms/tabs/tabs.js +118 -0
  120. package/build/atoms/tabs/tabs.stories.js +26 -0
  121. package/build/atoms/text/index.js +1 -0
  122. package/build/atoms/text/text.js +77 -0
  123. package/build/atoms/text-area/index.js +1 -0
  124. package/build/atoms/text-area/text-area.js +58 -0
  125. package/build/atoms/text-area/text-area.stories.js +26 -0
  126. package/build/atoms/tooltip/index.js +5 -0
  127. package/build/atoms/tooltip/tooltip-content.js +10 -0
  128. package/build/atoms/tooltip/tooltip-control.js +102 -0
  129. package/build/atoms/tooltip/tooltip-props.js +1 -0
  130. package/build/atoms/tooltip/tooltip-styled.js +129 -0
  131. package/build/atoms/tooltip/tooltip.doc.md +61 -0
  132. package/build/atoms/tooltip/tooltip.js +65 -0
  133. package/build/atoms/tooltip/tooltip.stories.js +47 -0
  134. package/build/atoms/typography/caption-shared.js +10 -0
  135. package/build/atoms/typography/caption.js +10 -0
  136. package/build/atoms/typography/card-title.js +14 -0
  137. package/build/atoms/typography/header.doc.md +38 -0
  138. package/build/atoms/typography/header.js +128 -0
  139. package/build/atoms/typography/index.js +5 -0
  140. package/build/atoms/typography/small-text.js +10 -0
  141. package/build/atoms/typography/title.js +10 -0
  142. package/build/atoms/typography/typography.stories.js +80 -0
  143. package/build/constants.js +2 -0
  144. package/build/global.js +53 -0
  145. package/build/hooks/use-window-size.js +28 -0
  146. package/build/index.doc.md +133 -0
  147. package/build/index.js +16 -0
  148. package/build/molecules/date-picker/date-picker.js +326 -0
  149. package/build/molecules/date-picker/date-picker.stories.js +49 -0
  150. package/build/molecules/date-picker/index.js +2 -0
  151. package/build/molecules/date-picker/useDatePicker.js +37 -0
  152. package/build/molecules/drawer/drawer-content.js +22 -0
  153. package/build/molecules/drawer/drawer-footer.js +21 -0
  154. package/build/molecules/drawer/drawer.js +120 -0
  155. package/build/molecules/drawer/drawer.stories.js +39 -0
  156. package/build/molecules/drawer/index.js +3 -0
  157. package/build/molecules/drop-down/drop-down-item-action.js +19 -0
  158. package/build/molecules/drop-down/drop-down-item.js +95 -0
  159. package/build/molecules/drop-down/drop-down-menu.js +45 -0
  160. package/build/molecules/drop-down/drop-down-trigger.js +11 -0
  161. package/build/molecules/drop-down/drop-down.doc.md +74 -0
  162. package/build/molecules/drop-down/drop-down.js +85 -0
  163. package/build/molecules/drop-down/drop-down.stories.js +66 -0
  164. package/build/molecules/drop-down/index.js +5 -0
  165. package/build/molecules/drop-zone/drop-zone-image.js +46 -0
  166. package/build/molecules/drop-zone/drop-zone-item.js +128 -0
  167. package/build/molecules/drop-zone/drop-zone.js +318 -0
  168. package/build/molecules/drop-zone/drop-zone.stories.js +111 -0
  169. package/build/molecules/drop-zone/index.js +2 -0
  170. package/build/molecules/form-group/form-group.js +184 -0
  171. package/build/molecules/form-group/form-group.stories.js +35 -0
  172. package/build/molecules/form-group/form-message.js +23 -0
  173. package/build/molecules/form-group/index.js +3 -0
  174. package/build/molecules/form-group/input-group.js +68 -0
  175. package/build/molecules/index.js +15 -0
  176. package/build/molecules/info-box/index.js +1 -0
  177. package/build/molecules/info-box/info-box.js +70 -0
  178. package/build/molecules/info-box/info-box.stories.js +17 -0
  179. package/build/molecules/message-box/index.js +1 -0
  180. package/build/molecules/message-box/message-box.js +173 -0
  181. package/build/molecules/message-box/message-box.stories.js +43 -0
  182. package/build/molecules/modal/index.js +4 -0
  183. package/build/molecules/modal/modal-inline.js +63 -0
  184. package/build/molecules/modal/modal-props.js +1 -0
  185. package/build/molecules/modal/modal-styled.js +52 -0
  186. package/build/molecules/modal/modal-wrapper.js +33 -0
  187. package/build/molecules/modal/modal.doc.md +138 -0
  188. package/build/molecules/modal/modal.js +17 -0
  189. package/build/molecules/modal/modal.stories.js +79 -0
  190. package/build/molecules/navigation-element/index.js +3 -0
  191. package/build/molecules/navigation-element/navigation-element-props.js +1 -0
  192. package/build/molecules/navigation-element/navigation-element-styled.js +66 -0
  193. package/build/molecules/navigation-element/navigation-element.doc.md +69 -0
  194. package/build/molecules/navigation-element/navigation-element.js +61 -0
  195. package/build/molecules/navigation-element/navigation-element.stories.js +53 -0
  196. package/build/molecules/pagination/index.js +1 -0
  197. package/build/molecules/pagination/pagination.js +141 -0
  198. package/build/molecules/pagination/pagination.stories.js +22 -0
  199. package/build/molecules/rich-text-editor/components/heading-select.js +29 -0
  200. package/build/molecules/rich-text-editor/components/image-button.js +45 -0
  201. package/build/molecules/rich-text-editor/components/menu-bar.js +32 -0
  202. package/build/molecules/rich-text-editor/components/menu-button.js +37 -0
  203. package/build/molecules/rich-text-editor/icons/align-center.js +12 -0
  204. package/build/molecules/rich-text-editor/icons/align-justify.js +12 -0
  205. package/build/molecules/rich-text-editor/icons/align-left.js +12 -0
  206. package/build/molecules/rich-text-editor/icons/align-right.js +12 -0
  207. package/build/molecules/rich-text-editor/icons/bold.js +12 -0
  208. package/build/molecules/rich-text-editor/icons/bullet-list.js +12 -0
  209. package/build/molecules/rich-text-editor/icons/clear.js +12 -0
  210. package/build/molecules/rich-text-editor/icons/code.js +18 -0
  211. package/build/molecules/rich-text-editor/icons/font-size.js +12 -0
  212. package/build/molecules/rich-text-editor/icons/image.js +18 -0
  213. package/build/molecules/rich-text-editor/icons/index.js +20 -0
  214. package/build/molecules/rich-text-editor/icons/italic.js +12 -0
  215. package/build/molecules/rich-text-editor/icons/link.js +15 -0
  216. package/build/molecules/rich-text-editor/icons/ordered-list.js +12 -0
  217. package/build/molecules/rich-text-editor/icons/pagebreak.js +12 -0
  218. package/build/molecules/rich-text-editor/icons/paragraph.js +12 -0
  219. package/build/molecules/rich-text-editor/icons/quote.js +12 -0
  220. package/build/molecules/rich-text-editor/icons/redo.js +12 -0
  221. package/build/molecules/rich-text-editor/icons/strikethrough.js +12 -0
  222. package/build/molecules/rich-text-editor/icons/undo.js +12 -0
  223. package/build/molecules/rich-text-editor/index.js +2 -0
  224. package/build/molecules/rich-text-editor/rich-text-editor-props.js +1 -0
  225. package/build/molecules/rich-text-editor/rich-text-editor.js +60 -0
  226. package/build/molecules/rich-text-editor/rich-text-editor.stories.js +85 -0
  227. package/build/molecules/rich-text-editor/rich-text-editor.styled.js +46 -0
  228. package/build/molecules/rich-text-editor/useTiptapCommands.js +15 -0
  229. package/build/molecules/select/index.js +2 -0
  230. package/build/molecules/select/select-async.js +43 -0
  231. package/build/molecules/select/select-theme.js +36 -0
  232. package/build/molecules/select/select.js +45 -0
  233. package/build/molecules/select/select.stories.js +80 -0
  234. package/build/molecules/stepper/index.js +2 -0
  235. package/build/molecules/stepper/step.js +141 -0
  236. package/build/molecules/stepper/stepper.js +115 -0
  237. package/build/molecules/stepper/stepper.stories.js +54 -0
  238. package/build/molecules/tinymce-editor/index.js +1 -0
  239. package/build/molecules/tinymce-editor/tinymce-editor.js +89 -0
  240. package/build/molecules/tinymce-editor/tinymce-editor.styled.js +15 -0
  241. package/build/molecules/value-group/index.js +2 -0
  242. package/build/molecules/value-group/value-group-props.js +1 -0
  243. package/build/molecules/value-group/value-group.doc.md +67 -0
  244. package/build/molecules/value-group/value-group.js +28 -0
  245. package/build/molecules/value-group/value-group.stories.js +41 -0
  246. package/build/organisms/button-group/button-group.doc.md +92 -0
  247. package/build/organisms/button-group/button-group.js +34 -0
  248. package/build/organisms/button-group/button-group.stories.js +103 -0
  249. package/build/organisms/button-group/button-group.styled.js +54 -0
  250. package/build/organisms/button-group/button-group.types.js +1 -0
  251. package/build/organisms/button-group/button-in-group.js +25 -0
  252. package/build/organisms/button-group/drop-down-item-with-buttons.js +45 -0
  253. package/build/organisms/button-group/index.js +6 -0
  254. package/build/organisms/button-group/single-button-in-group.js +39 -0
  255. package/build/organisms/current-user-nav/current-user-nav-props.js +1 -0
  256. package/build/organisms/current-user-nav/current-user-nav-styled.js +27 -0
  257. package/build/organisms/current-user-nav/current-user-nav.doc.md +72 -0
  258. package/build/organisms/current-user-nav/current-user-nav.js +68 -0
  259. package/build/organisms/current-user-nav/current-user-nav.stories.js +74 -0
  260. package/build/organisms/current-user-nav/index.js +3 -0
  261. package/build/organisms/index.js +4 -0
  262. package/build/organisms/made-with-love/index.js +1 -0
  263. package/build/organisms/made-with-love/made-with-love.js +43 -0
  264. package/build/organisms/made-with-love/made-with-love.stories.js +7 -0
  265. package/build/organisms/navigation/index.js +4 -0
  266. package/build/organisms/navigation/navigation-element-wrapper.js +14 -0
  267. package/build/organisms/navigation/navigation-props.js +1 -0
  268. package/build/organisms/navigation/navigation-styled.js +14 -0
  269. package/build/organisms/navigation/navigation.doc.md +126 -0
  270. package/build/organisms/navigation/navigation.js +34 -0
  271. package/build/organisms/navigation/navigation.stories.js +110 -0
  272. package/build/templates/blog.js +0 -0
  273. package/build/templates/blog.stories.js +52 -0
  274. package/build/theme.doc.md +111 -0
  275. package/build/theme.js +532 -0
  276. package/build/utils/assert.js +7 -0
  277. package/build/utils/color-props.js +1 -0
  278. package/build/utils/combine-styles.js +28 -0
  279. package/build/utils/content-styles.js +268 -0
  280. package/build/utils/css-class.js +35 -0
  281. package/build/utils/date-utils.js +50 -0
  282. package/build/utils/datepicker.styles.js +788 -0
  283. package/build/utils/default-theme.interface.js +1 -0
  284. package/build/utils/direction-props.js +1 -0
  285. package/build/utils/focus-shadow.style.js +6 -0
  286. package/build/utils/generate-id.js +8 -0
  287. package/build/utils/human-file-size.js +23 -0
  288. package/build/utils/index.js +13 -0
  289. package/build/utils/non-nullish-partial-record.type.js +1 -0
  290. package/build/utils/phone-input.styles.js +1168 -0
  291. package/build/utils/portal-utils.js +31 -0
  292. package/build/utils/reset.styles.js +94 -0
  293. package/build/utils/select-styles.js +47 -0
  294. package/build/utils/story-wrapper.js +22 -0
  295. package/build/utils/styled.js +6 -0
  296. package/build/utils/theme-get.js +51 -0
  297. package/commitlint.config.cjs +5 -0
  298. package/config/rollup.js +70 -0
  299. package/entry.js +11 -0
  300. package/firebase.json +17 -0
  301. package/package.json +171 -0
  302. package/src/atoms/avatar/avatar.stories.tsx +28 -0
  303. package/src/atoms/avatar/avatar.tsx +44 -0
  304. package/src/atoms/avatar/index.ts +1 -0
  305. package/src/atoms/badge/badge-props.doc.md +10 -0
  306. package/src/atoms/badge/badge.doc.md +90 -0
  307. package/src/atoms/badge/badge.stories.tsx +90 -0
  308. package/src/atoms/badge/badge.tsx +99 -0
  309. package/src/atoms/badge/index.ts +1 -0
  310. package/src/atoms/box/box-props.doc.md +16 -0
  311. package/src/atoms/box/box.doc.md +75 -0
  312. package/src/atoms/box/box.stories.tsx +47 -0
  313. package/src/atoms/box/box.tsx +131 -0
  314. package/src/atoms/box/index.ts +1 -0
  315. package/src/atoms/button/button-css.tsx +196 -0
  316. package/src/atoms/button/button-props.doc.md +4 -0
  317. package/src/atoms/button/button-props.ts +43 -0
  318. package/src/atoms/button/button.doc.md +103 -0
  319. package/src/atoms/button/button.stories.tsx +113 -0
  320. package/src/atoms/button/button.tsx +39 -0
  321. package/src/atoms/button/index.ts +3 -0
  322. package/src/atoms/check-box/check-box.stories.tsx +46 -0
  323. package/src/atoms/check-box/check-box.tsx +169 -0
  324. package/src/atoms/check-box/index.ts +1 -0
  325. package/src/atoms/currency-input/currency-input.stories.tsx +77 -0
  326. package/src/atoms/currency-input/currency-input.tsx +74 -0
  327. package/src/atoms/currency-input/index.ts +1 -0
  328. package/src/atoms/icon/icon.stories.tsx +46 -0
  329. package/src/atoms/icon/icon.tsx +155 -0
  330. package/src/atoms/icon/index.ts +1 -0
  331. package/src/atoms/illustration/illustration.stories.tsx +39 -0
  332. package/src/atoms/illustration/illustration.tsx +84 -0
  333. package/src/atoms/illustration/index.ts +1 -0
  334. package/src/atoms/illustrations/accept.tsx +17 -0
  335. package/src/atoms/illustrations/adminjs-logo.tsx +37 -0
  336. package/src/atoms/illustrations/astronaut.tsx +22 -0
  337. package/src/atoms/illustrations/bag.tsx +25 -0
  338. package/src/atoms/illustrations/beware.tsx +18 -0
  339. package/src/atoms/illustrations/box.tsx +25 -0
  340. package/src/atoms/illustrations/calendar.tsx +24 -0
  341. package/src/atoms/illustrations/cancel.tsx +17 -0
  342. package/src/atoms/illustrations/cards.tsx +20 -0
  343. package/src/atoms/illustrations/clip.tsx +28 -0
  344. package/src/atoms/illustrations/cloud.tsx +22 -0
  345. package/src/atoms/illustrations/cup.tsx +20 -0
  346. package/src/atoms/illustrations/details.tsx +24 -0
  347. package/src/atoms/illustrations/docs.tsx +25 -0
  348. package/src/atoms/illustrations/document-check.tsx +22 -0
  349. package/src/atoms/illustrations/document-search.tsx +22 -0
  350. package/src/atoms/illustrations/drawer.tsx +26 -0
  351. package/src/atoms/illustrations/file-search.tsx +18 -0
  352. package/src/atoms/illustrations/flag-in-cog.tsx +26 -0
  353. package/src/atoms/illustrations/folder.tsx +24 -0
  354. package/src/atoms/illustrations/folders.tsx +22 -0
  355. package/src/atoms/illustrations/github-logo.tsx +15 -0
  356. package/src/atoms/illustrations/identity-card.tsx +28 -0
  357. package/src/atoms/illustrations/index.ts +35 -0
  358. package/src/atoms/illustrations/launch.tsx +24 -0
  359. package/src/atoms/illustrations/moon.tsx +42 -0
  360. package/src/atoms/illustrations/not-found.tsx +24 -0
  361. package/src/atoms/illustrations/notebook.tsx +32 -0
  362. package/src/atoms/illustrations/padlock.tsx +24 -0
  363. package/src/atoms/illustrations/photos.tsx +19 -0
  364. package/src/atoms/illustrations/planet.tsx +28 -0
  365. package/src/atoms/illustrations/plug.tsx +23 -0
  366. package/src/atoms/illustrations/props.type.ts +7 -0
  367. package/src/atoms/illustrations/rocket-new.tsx +30 -0
  368. package/src/atoms/illustrations/rocket.tsx +90 -0
  369. package/src/atoms/illustrations/slack-logo.tsx +29 -0
  370. package/src/atoms/illustrations/tags.tsx +20 -0
  371. package/src/atoms/index.ts +23 -0
  372. package/src/atoms/input/index.ts +1 -0
  373. package/src/atoms/input/input.stories.tsx +77 -0
  374. package/src/atoms/input/input.tsx +146 -0
  375. package/src/atoms/label/index.ts +1 -0
  376. package/src/atoms/label/label.stories.tsx +42 -0
  377. package/src/atoms/label/label.tsx +163 -0
  378. package/src/atoms/link/index.ts +1 -0
  379. package/src/atoms/link/link.stories.tsx +45 -0
  380. package/src/atoms/link/link.tsx +128 -0
  381. package/src/atoms/loader/index.ts +1 -0
  382. package/src/atoms/loader/loader.stories.tsx +12 -0
  383. package/src/atoms/loader/loader.tsx +91 -0
  384. package/src/atoms/overlay/index.ts +1 -0
  385. package/src/atoms/overlay/overlay.stories.tsx +12 -0
  386. package/src/atoms/overlay/overlay.tsx +24 -0
  387. package/src/atoms/phone-input/index.ts +1 -0
  388. package/src/atoms/phone-input/phone-input.stories.tsx +47 -0
  389. package/src/atoms/phone-input/phone-input.tsx +79 -0
  390. package/src/atoms/placeholder/index.ts +1 -0
  391. package/src/atoms/placeholder/placeholder.stories.tsx +25 -0
  392. package/src/atoms/placeholder/placeholder.tsx +105 -0
  393. package/src/atoms/radio/index.ts +1 -0
  394. package/src/atoms/radio/radio.stories.tsx +35 -0
  395. package/src/atoms/radio/radio.tsx +142 -0
  396. package/src/atoms/section/index.ts +1 -0
  397. package/src/atoms/section/section.stories.tsx +35 -0
  398. package/src/atoms/section/section.tsx +47 -0
  399. package/src/atoms/table/index.ts +6 -0
  400. package/src/atoms/table/table-body.tsx +19 -0
  401. package/src/atoms/table/table-caption.tsx +43 -0
  402. package/src/atoms/table/table-cell.tsx +35 -0
  403. package/src/atoms/table/table-head.tsx +31 -0
  404. package/src/atoms/table/table-row.tsx +26 -0
  405. package/src/atoms/table/table.stories.tsx +76 -0
  406. package/src/atoms/table/table.tsx +110 -0
  407. package/src/atoms/tabs/index.ts +2 -0
  408. package/src/atoms/tabs/tab.tsx +38 -0
  409. package/src/atoms/tabs/tabs.stories.tsx +30 -0
  410. package/src/atoms/tabs/tabs.tsx +165 -0
  411. package/src/atoms/text/index.ts +1 -0
  412. package/src/atoms/text/text.tsx +98 -0
  413. package/src/atoms/text-area/index.ts +1 -0
  414. package/src/atoms/text-area/text-area.stories.tsx +24 -0
  415. package/src/atoms/text-area/text-area.tsx +63 -0
  416. package/src/atoms/tooltip/index.ts +5 -0
  417. package/src/atoms/tooltip/tooltip-content.tsx +13 -0
  418. package/src/atoms/tooltip/tooltip-control.tsx +118 -0
  419. package/src/atoms/tooltip/tooltip-props.ts +30 -0
  420. package/src/atoms/tooltip/tooltip-styled.tsx +138 -0
  421. package/src/atoms/tooltip/tooltip.doc.md +61 -0
  422. package/src/atoms/tooltip/tooltip.stories.tsx +53 -0
  423. package/src/atoms/tooltip/tooltip.tsx +77 -0
  424. package/src/atoms/typography/caption-shared.ts +13 -0
  425. package/src/atoms/typography/caption.ts +15 -0
  426. package/src/atoms/typography/card-title.ts +19 -0
  427. package/src/atoms/typography/header.doc.md +38 -0
  428. package/src/atoms/typography/header.tsx +128 -0
  429. package/src/atoms/typography/index.ts +5 -0
  430. package/src/atoms/typography/small-text.ts +15 -0
  431. package/src/atoms/typography/title.ts +15 -0
  432. package/src/atoms/typography/typography.stories.tsx +259 -0
  433. package/src/constants.ts +2 -0
  434. package/src/global.ts +53 -0
  435. package/src/hooks/use-window-size.ts +36 -0
  436. package/src/index.doc.md +133 -0
  437. package/src/index.ts +20 -0
  438. package/src/molecules/date-picker/date-picker.stories.tsx +48 -0
  439. package/src/molecules/date-picker/date-picker.tsx +329 -0
  440. package/src/molecules/date-picker/index.ts +2 -0
  441. package/src/molecules/date-picker/useDatePicker.ts +45 -0
  442. package/src/molecules/drawer/drawer-content.tsx +18 -0
  443. package/src/molecules/drawer/drawer-footer.tsx +19 -0
  444. package/src/molecules/drawer/drawer.stories.tsx +55 -0
  445. package/src/molecules/drawer/drawer.tsx +127 -0
  446. package/src/molecules/drawer/index.ts +3 -0
  447. package/src/molecules/drop-down/drop-down-item-action.tsx +20 -0
  448. package/src/molecules/drop-down/drop-down-item.tsx +95 -0
  449. package/src/molecules/drop-down/drop-down-menu.tsx +45 -0
  450. package/src/molecules/drop-down/drop-down-trigger.tsx +12 -0
  451. package/src/molecules/drop-down/drop-down.doc.md +74 -0
  452. package/src/molecules/drop-down/drop-down.stories.tsx +82 -0
  453. package/src/molecules/drop-down/drop-down.tsx +99 -0
  454. package/src/molecules/drop-down/index.ts +5 -0
  455. package/src/molecules/drop-zone/drop-zone-image.tsx +15 -0
  456. package/src/molecules/drop-zone/drop-zone-item.tsx +126 -0
  457. package/src/molecules/drop-zone/drop-zone.stories.tsx +94 -0
  458. package/src/molecules/drop-zone/drop-zone.tsx +374 -0
  459. package/src/molecules/drop-zone/index.ts +2 -0
  460. package/src/molecules/form-group/form-group.stories.tsx +62 -0
  461. package/src/molecules/form-group/form-group.tsx +170 -0
  462. package/src/molecules/form-group/form-message.tsx +20 -0
  463. package/src/molecules/form-group/index.ts +3 -0
  464. package/src/molecules/form-group/input-group.tsx +59 -0
  465. package/src/molecules/index.ts +15 -0
  466. package/src/molecules/info-box/index.ts +1 -0
  467. package/src/molecules/info-box/info-box.stories.tsx +23 -0
  468. package/src/molecules/info-box/info-box.tsx +78 -0
  469. package/src/molecules/message-box/index.ts +1 -0
  470. package/src/molecules/message-box/message-box.stories.tsx +35 -0
  471. package/src/molecules/message-box/message-box.tsx +185 -0
  472. package/src/molecules/modal/index.ts +4 -0
  473. package/src/molecules/modal/modal-inline.tsx +53 -0
  474. package/src/molecules/modal/modal-props.ts +43 -0
  475. package/src/molecules/modal/modal-styled.tsx +60 -0
  476. package/src/molecules/modal/modal-wrapper.tsx +37 -0
  477. package/src/molecules/modal/modal.doc.md +138 -0
  478. package/src/molecules/modal/modal.stories.tsx +67 -0
  479. package/src/molecules/modal/modal.tsx +24 -0
  480. package/src/molecules/navigation-element/index.ts +3 -0
  481. package/src/molecules/navigation-element/navigation-element-props.ts +43 -0
  482. package/src/molecules/navigation-element/navigation-element-styled.ts +57 -0
  483. package/src/molecules/navigation-element/navigation-element.doc.md +69 -0
  484. package/src/molecules/navigation-element/navigation-element.stories.tsx +42 -0
  485. package/src/molecules/navigation-element/navigation-element.tsx +65 -0
  486. package/src/molecules/pagination/index.ts +1 -0
  487. package/src/molecules/pagination/pagination.stories.tsx +25 -0
  488. package/src/molecules/pagination/pagination.tsx +182 -0
  489. package/src/molecules/rich-text-editor/components/heading-select.tsx +42 -0
  490. package/src/molecules/rich-text-editor/components/image-button.tsx +49 -0
  491. package/src/molecules/rich-text-editor/components/menu-bar.tsx +31 -0
  492. package/src/molecules/rich-text-editor/components/menu-button.tsx +44 -0
  493. package/src/molecules/rich-text-editor/icons/align-center.tsx +17 -0
  494. package/src/molecules/rich-text-editor/icons/align-justify.tsx +17 -0
  495. package/src/molecules/rich-text-editor/icons/align-left.tsx +17 -0
  496. package/src/molecules/rich-text-editor/icons/align-right.tsx +17 -0
  497. package/src/molecules/rich-text-editor/icons/bold.tsx +17 -0
  498. package/src/molecules/rich-text-editor/icons/bullet-list.tsx +17 -0
  499. package/src/molecules/rich-text-editor/icons/clear.tsx +17 -0
  500. package/src/molecules/rich-text-editor/icons/code.tsx +16 -0
  501. package/src/molecules/rich-text-editor/icons/font-size.tsx +14 -0
  502. package/src/molecules/rich-text-editor/icons/image.tsx +22 -0
  503. package/src/molecules/rich-text-editor/icons/index.ts +20 -0
  504. package/src/molecules/rich-text-editor/icons/italic.tsx +14 -0
  505. package/src/molecules/rich-text-editor/icons/link.tsx +21 -0
  506. package/src/molecules/rich-text-editor/icons/ordered-list.tsx +17 -0
  507. package/src/molecules/rich-text-editor/icons/pagebreak.tsx +17 -0
  508. package/src/molecules/rich-text-editor/icons/paragraph.tsx +14 -0
  509. package/src/molecules/rich-text-editor/icons/quote.tsx +17 -0
  510. package/src/molecules/rich-text-editor/icons/redo.tsx +17 -0
  511. package/src/molecules/rich-text-editor/icons/strikethrough.tsx +17 -0
  512. package/src/molecules/rich-text-editor/icons/undo.tsx +17 -0
  513. package/src/molecules/rich-text-editor/index.ts +2 -0
  514. package/src/molecules/rich-text-editor/rich-text-editor-props.ts +1 -0
  515. package/src/molecules/rich-text-editor/rich-text-editor.stories.tsx +88 -0
  516. package/src/molecules/rich-text-editor/rich-text-editor.styled.tsx +52 -0
  517. package/src/molecules/rich-text-editor/rich-text-editor.tsx +81 -0
  518. package/src/molecules/rich-text-editor/useTiptapCommands.ts +50 -0
  519. package/src/molecules/select/index.ts +2 -0
  520. package/src/molecules/select/select-async.tsx +51 -0
  521. package/src/molecules/select/select-theme.ts +41 -0
  522. package/src/molecules/select/select.stories.tsx +77 -0
  523. package/src/molecules/select/select.tsx +51 -0
  524. package/src/molecules/stepper/index.ts +2 -0
  525. package/src/molecules/stepper/step.tsx +162 -0
  526. package/src/molecules/stepper/stepper.stories.tsx +76 -0
  527. package/src/molecules/stepper/stepper.tsx +118 -0
  528. package/src/molecules/tinymce-editor/index.ts +1 -0
  529. package/src/molecules/tinymce-editor/tinymce-editor.styled.tsx +22 -0
  530. package/src/molecules/tinymce-editor/tinymce-editor.tsx +110 -0
  531. package/src/molecules/value-group/index.ts +2 -0
  532. package/src/molecules/value-group/value-group-props.ts +16 -0
  533. package/src/molecules/value-group/value-group.doc.md +67 -0
  534. package/src/molecules/value-group/value-group.stories.tsx +48 -0
  535. package/src/molecules/value-group/value-group.tsx +32 -0
  536. package/src/organisms/button-group/button-group.doc.md +92 -0
  537. package/src/organisms/button-group/button-group.stories.tsx +112 -0
  538. package/src/organisms/button-group/button-group.styled.tsx +61 -0
  539. package/src/organisms/button-group/button-group.tsx +41 -0
  540. package/src/organisms/button-group/button-group.types.ts +61 -0
  541. package/src/organisms/button-group/button-in-group.tsx +38 -0
  542. package/src/organisms/button-group/drop-down-item-with-buttons.tsx +56 -0
  543. package/src/organisms/button-group/index.ts +6 -0
  544. package/src/organisms/button-group/single-button-in-group.tsx +42 -0
  545. package/src/organisms/current-user-nav/current-user-nav-props.ts +39 -0
  546. package/src/organisms/current-user-nav/current-user-nav-styled.ts +31 -0
  547. package/src/organisms/current-user-nav/current-user-nav.doc.md +72 -0
  548. package/src/organisms/current-user-nav/current-user-nav.stories.tsx +53 -0
  549. package/src/organisms/current-user-nav/current-user-nav.tsx +72 -0
  550. package/src/organisms/current-user-nav/index.ts +3 -0
  551. package/src/organisms/index.ts +4 -0
  552. package/src/organisms/made-with-love/index.ts +1 -0
  553. package/src/organisms/made-with-love/made-with-love.stories.tsx +12 -0
  554. package/src/organisms/made-with-love/made-with-love.tsx +50 -0
  555. package/src/organisms/navigation/index.ts +4 -0
  556. package/src/organisms/navigation/navigation-element-wrapper.tsx +27 -0
  557. package/src/organisms/navigation/navigation-props.ts +26 -0
  558. package/src/organisms/navigation/navigation-styled.tsx +17 -0
  559. package/src/organisms/navigation/navigation.doc.md +126 -0
  560. package/src/organisms/navigation/navigation.stories.tsx +124 -0
  561. package/src/organisms/navigation/navigation.tsx +34 -0
  562. package/src/templates/blog.stories.tsx +69 -0
  563. package/src/templates/blog.tsx +0 -0
  564. package/src/theme.doc.md +111 -0
  565. package/src/theme.ts +554 -0
  566. package/src/utils/assert.ts +8 -0
  567. package/src/utils/color-props.ts +7 -0
  568. package/src/utils/combine-styles.ts +35 -0
  569. package/src/utils/content-styles.ts +268 -0
  570. package/src/utils/css-class.ts +37 -0
  571. package/src/utils/date-utils.ts +60 -0
  572. package/src/utils/datepicker.styles.ts +790 -0
  573. package/src/utils/default-theme.interface.ts +30 -0
  574. package/src/utils/direction-props.ts +1 -0
  575. package/src/utils/focus-shadow.style.ts +8 -0
  576. package/src/utils/generate-id.ts +10 -0
  577. package/src/utils/human-file-size.ts +30 -0
  578. package/src/utils/index.ts +14 -0
  579. package/src/utils/non-nullish-partial-record.type.ts +13 -0
  580. package/src/utils/phone-input.styles.ts +1170 -0
  581. package/src/utils/portal-utils.tsx +45 -0
  582. package/src/utils/reset.styles.ts +98 -0
  583. package/src/utils/select-styles.ts +52 -0
  584. package/src/utils/story-wrapper.tsx +23 -0
  585. package/src/utils/styled.ts +7 -0
  586. package/src/utils/theme-get.ts +57 -0
  587. package/tsconfig.json +36 -0
  588. package/types/src/atoms/avatar/avatar.d.ts +10 -0
  589. package/types/src/atoms/avatar/avatar.stories.d.ts +6 -0
  590. package/types/src/atoms/avatar/index.d.ts +1 -0
  591. package/types/src/atoms/badge/badge.d.ts +51 -0
  592. package/types/src/atoms/badge/badge.stories.d.ts +6 -0
  593. package/types/src/atoms/badge/index.d.ts +1 -0
  594. package/types/src/atoms/box/box.d.ts +47 -0
  595. package/types/src/atoms/box/box.stories.d.ts +7 -0
  596. package/types/src/atoms/box/index.d.ts +1 -0
  597. package/types/src/atoms/button/button-css.d.ts +18 -0
  598. package/types/src/atoms/button/button-props.d.ts +38 -0
  599. package/types/src/atoms/button/button.d.ts +25 -0
  600. package/types/src/atoms/button/button.stories.d.ts +6 -0
  601. package/types/src/atoms/button/index.d.ts +3 -0
  602. package/types/src/atoms/check-box/check-box.d.ts +39 -0
  603. package/types/src/atoms/check-box/check-box.stories.d.ts +6 -0
  604. package/types/src/atoms/check-box/index.d.ts +1 -0
  605. package/types/src/atoms/currency-input/currency-input.d.ts +74 -0
  606. package/types/src/atoms/currency-input/currency-input.stories.d.ts +6 -0
  607. package/types/src/atoms/currency-input/index.d.ts +1 -0
  608. package/types/src/atoms/icon/icon.d.ts +93 -0
  609. package/types/src/atoms/icon/icon.stories.d.ts +6 -0
  610. package/types/src/atoms/icon/index.d.ts +1 -0
  611. package/types/src/atoms/illustration/illustration.d.ts +52 -0
  612. package/types/src/atoms/illustration/illustration.stories.d.ts +6 -0
  613. package/types/src/atoms/illustration/index.d.ts +1 -0
  614. package/types/src/atoms/illustrations/accept.d.ts +4 -0
  615. package/types/src/atoms/illustrations/adminjs-logo.d.ts +4 -0
  616. package/types/src/atoms/illustrations/astronaut.d.ts +4 -0
  617. package/types/src/atoms/illustrations/bag.d.ts +4 -0
  618. package/types/src/atoms/illustrations/beware.d.ts +4 -0
  619. package/types/src/atoms/illustrations/box.d.ts +4 -0
  620. package/types/src/atoms/illustrations/calendar.d.ts +4 -0
  621. package/types/src/atoms/illustrations/cancel.d.ts +4 -0
  622. package/types/src/atoms/illustrations/cards.d.ts +4 -0
  623. package/types/src/atoms/illustrations/clip.d.ts +4 -0
  624. package/types/src/atoms/illustrations/cloud.d.ts +4 -0
  625. package/types/src/atoms/illustrations/cup.d.ts +4 -0
  626. package/types/src/atoms/illustrations/details.d.ts +4 -0
  627. package/types/src/atoms/illustrations/docs.d.ts +4 -0
  628. package/types/src/atoms/illustrations/document-check.d.ts +4 -0
  629. package/types/src/atoms/illustrations/document-search.d.ts +4 -0
  630. package/types/src/atoms/illustrations/drawer.d.ts +4 -0
  631. package/types/src/atoms/illustrations/file-search.d.ts +4 -0
  632. package/types/src/atoms/illustrations/flag-in-cog.d.ts +4 -0
  633. package/types/src/atoms/illustrations/folder.d.ts +4 -0
  634. package/types/src/atoms/illustrations/folders.d.ts +4 -0
  635. package/types/src/atoms/illustrations/github-logo.d.ts +4 -0
  636. package/types/src/atoms/illustrations/identity-card.d.ts +4 -0
  637. package/types/src/atoms/illustrations/index.d.ts +35 -0
  638. package/types/src/atoms/illustrations/launch.d.ts +4 -0
  639. package/types/src/atoms/illustrations/moon.d.ts +4 -0
  640. package/types/src/atoms/illustrations/not-found.d.ts +4 -0
  641. package/types/src/atoms/illustrations/notebook.d.ts +4 -0
  642. package/types/src/atoms/illustrations/padlock.d.ts +4 -0
  643. package/types/src/atoms/illustrations/photos.d.ts +4 -0
  644. package/types/src/atoms/illustrations/planet.d.ts +4 -0
  645. package/types/src/atoms/illustrations/plug.d.ts +4 -0
  646. package/types/src/atoms/illustrations/props.type.d.ts +6 -0
  647. package/types/src/atoms/illustrations/rocket-new.d.ts +4 -0
  648. package/types/src/atoms/illustrations/rocket.d.ts +4 -0
  649. package/types/src/atoms/illustrations/slack-logo.d.ts +4 -0
  650. package/types/src/atoms/illustrations/tags.d.ts +4 -0
  651. package/types/src/atoms/index.d.ts +23 -0
  652. package/types/src/atoms/input/index.d.ts +1 -0
  653. package/types/src/atoms/input/input.d.ts +63 -0
  654. package/types/src/atoms/input/input.stories.d.ts +6 -0
  655. package/types/src/atoms/label/index.d.ts +1 -0
  656. package/types/src/atoms/label/label.d.ts +79 -0
  657. package/types/src/atoms/label/label.stories.d.ts +5 -0
  658. package/types/src/atoms/link/index.d.ts +1 -0
  659. package/types/src/atoms/link/link.d.ts +74 -0
  660. package/types/src/atoms/link/link.stories.d.ts +5 -0
  661. package/types/src/atoms/loader/index.d.ts +1 -0
  662. package/types/src/atoms/loader/loader.d.ts +27 -0
  663. package/types/src/atoms/loader/loader.stories.d.ts +5 -0
  664. package/types/src/atoms/overlay/index.d.ts +1 -0
  665. package/types/src/atoms/overlay/overlay.d.ts +3 -0
  666. package/types/src/atoms/overlay/overlay.stories.d.ts +5 -0
  667. package/types/src/atoms/phone-input/index.d.ts +1 -0
  668. package/types/src/atoms/phone-input/phone-input.d.ts +47 -0
  669. package/types/src/atoms/phone-input/phone-input.stories.d.ts +6 -0
  670. package/types/src/atoms/placeholder/index.d.ts +1 -0
  671. package/types/src/atoms/placeholder/placeholder.d.ts +52 -0
  672. package/types/src/atoms/placeholder/placeholder.stories.d.ts +6 -0
  673. package/types/src/atoms/radio/index.d.ts +1 -0
  674. package/types/src/atoms/radio/radio.d.ts +40 -0
  675. package/types/src/atoms/radio/radio.stories.d.ts +5 -0
  676. package/types/src/atoms/section/index.d.ts +1 -0
  677. package/types/src/atoms/section/section.d.ts +31 -0
  678. package/types/src/atoms/section/section.stories.d.ts +5 -0
  679. package/types/src/atoms/table/index.d.ts +6 -0
  680. package/types/src/atoms/table/table-body.d.ts +6 -0
  681. package/types/src/atoms/table/table-caption.d.ts +6 -0
  682. package/types/src/atoms/table/table-cell.d.ts +9 -0
  683. package/types/src/atoms/table/table-head.d.ts +6 -0
  684. package/types/src/atoms/table/table-row.d.ts +6 -0
  685. package/types/src/atoms/table/table.d.ts +90 -0
  686. package/types/src/atoms/table/table.stories.d.ts +7 -0
  687. package/types/src/atoms/tabs/index.d.ts +2 -0
  688. package/types/src/atoms/tabs/tab.d.ts +17 -0
  689. package/types/src/atoms/tabs/tabs.d.ts +49 -0
  690. package/types/src/atoms/tabs/tabs.stories.d.ts +5 -0
  691. package/types/src/atoms/text/index.d.ts +1 -0
  692. package/types/src/atoms/text/text.d.ts +62 -0
  693. package/types/src/atoms/text-area/index.d.ts +1 -0
  694. package/types/src/atoms/text-area/text-area.d.ts +46 -0
  695. package/types/src/atoms/text-area/text-area.stories.d.ts +5 -0
  696. package/types/src/atoms/tooltip/index.d.ts +5 -0
  697. package/types/src/atoms/tooltip/tooltip-content.d.ts +16 -0
  698. package/types/src/atoms/tooltip/tooltip-control.d.ts +9 -0
  699. package/types/src/atoms/tooltip/tooltip-props.d.ts +25 -0
  700. package/types/src/atoms/tooltip/tooltip-styled.d.ts +3 -0
  701. package/types/src/atoms/tooltip/tooltip.d.ts +12 -0
  702. package/types/src/atoms/tooltip/tooltip.stories.d.ts +5 -0
  703. package/types/src/atoms/typography/caption-shared.d.ts +3 -0
  704. package/types/src/atoms/typography/caption.d.ts +3 -0
  705. package/types/src/atoms/typography/card-title.d.ts +3 -0
  706. package/types/src/atoms/typography/header.d.ts +29 -0
  707. package/types/src/atoms/typography/index.d.ts +5 -0
  708. package/types/src/atoms/typography/small-text.d.ts +3 -0
  709. package/types/src/atoms/typography/title.d.ts +3 -0
  710. package/types/src/atoms/typography/typography.stories.d.ts +9 -0
  711. package/types/src/constants.d.ts +1 -0
  712. package/types/src/global.d.ts +1 -0
  713. package/types/src/hooks/use-window-size.d.ts +6 -0
  714. package/types/src/index.d.ts +16 -0
  715. package/types/src/molecules/date-picker/date-picker.d.ts +78 -0
  716. package/types/src/molecules/date-picker/date-picker.stories.d.ts +5 -0
  717. package/types/src/molecules/date-picker/index.d.ts +2 -0
  718. package/types/src/molecules/date-picker/useDatePicker.d.ts +14 -0
  719. package/types/src/molecules/drawer/drawer-content.d.ts +7 -0
  720. package/types/src/molecules/drawer/drawer-footer.d.ts +7 -0
  721. package/types/src/molecules/drawer/drawer.d.ts +88 -0
  722. package/types/src/molecules/drawer/drawer.stories.d.ts +5 -0
  723. package/types/src/molecules/drawer/index.d.ts +3 -0
  724. package/types/src/molecules/drop-down/drop-down-item-action.d.ts +12 -0
  725. package/types/src/molecules/drop-down/drop-down-item.d.ts +32 -0
  726. package/types/src/molecules/drop-down/drop-down-menu.d.ts +31 -0
  727. package/types/src/molecules/drop-down/drop-down-trigger.d.ts +6 -0
  728. package/types/src/molecules/drop-down/drop-down.d.ts +30 -0
  729. package/types/src/molecules/drop-down/drop-down.stories.d.ts +10 -0
  730. package/types/src/molecules/drop-down/index.d.ts +5 -0
  731. package/types/src/molecules/drop-zone/drop-zone-image.d.ts +3 -0
  732. package/types/src/molecules/drop-zone/drop-zone-item.d.ts +55 -0
  733. package/types/src/molecules/drop-zone/drop-zone.d.ts +148 -0
  734. package/types/src/molecules/drop-zone/drop-zone.stories.d.ts +8 -0
  735. package/types/src/molecules/drop-zone/index.d.ts +2 -0
  736. package/types/src/molecules/form-group/form-group.d.ts +119 -0
  737. package/types/src/molecules/form-group/form-group.stories.d.ts +6 -0
  738. package/types/src/molecules/form-group/form-message.d.ts +11 -0
  739. package/types/src/molecules/form-group/index.d.ts +3 -0
  740. package/types/src/molecules/form-group/input-group.d.ts +6 -0
  741. package/types/src/molecules/index.d.ts +15 -0
  742. package/types/src/molecules/info-box/index.d.ts +1 -0
  743. package/types/src/molecules/info-box/info-box.d.ts +53 -0
  744. package/types/src/molecules/info-box/info-box.stories.d.ts +5 -0
  745. package/types/src/molecules/message-box/index.d.ts +1 -0
  746. package/types/src/molecules/message-box/message-box.d.ts +94 -0
  747. package/types/src/molecules/message-box/message-box.stories.d.ts +7 -0
  748. package/types/src/molecules/modal/index.d.ts +4 -0
  749. package/types/src/molecules/modal/modal-inline.d.ts +14 -0
  750. package/types/src/molecules/modal/modal-props.d.ts +38 -0
  751. package/types/src/molecules/modal/modal-styled.d.ts +12 -0
  752. package/types/src/molecules/modal/modal-wrapper.d.ts +4 -0
  753. package/types/src/molecules/modal/modal.d.ts +12 -0
  754. package/types/src/molecules/modal/modal.stories.d.ts +5 -0
  755. package/types/src/molecules/navigation-element/index.d.ts +3 -0
  756. package/types/src/molecules/navigation-element/navigation-element-props.d.ts +38 -0
  757. package/types/src/molecules/navigation-element/navigation-element-styled.d.ts +3 -0
  758. package/types/src/molecules/navigation-element/navigation-element.d.ts +14 -0
  759. package/types/src/molecules/navigation-element/navigation-element.stories.d.ts +5 -0
  760. package/types/src/molecules/pagination/index.d.ts +1 -0
  761. package/types/src/molecules/pagination/pagination.d.ts +64 -0
  762. package/types/src/molecules/pagination/pagination.stories.d.ts +5 -0
  763. package/types/src/molecules/rich-text-editor/components/heading-select.d.ts +7 -0
  764. package/types/src/molecules/rich-text-editor/components/image-button.d.ts +7 -0
  765. package/types/src/molecules/rich-text-editor/components/menu-bar.d.ts +7 -0
  766. package/types/src/molecules/rich-text-editor/components/menu-button.d.ts +12 -0
  767. package/types/src/molecules/rich-text-editor/icons/align-center.d.ts +3 -0
  768. package/types/src/molecules/rich-text-editor/icons/align-justify.d.ts +3 -0
  769. package/types/src/molecules/rich-text-editor/icons/align-left.d.ts +3 -0
  770. package/types/src/molecules/rich-text-editor/icons/align-right.d.ts +3 -0
  771. package/types/src/molecules/rich-text-editor/icons/bold.d.ts +3 -0
  772. package/types/src/molecules/rich-text-editor/icons/bullet-list.d.ts +3 -0
  773. package/types/src/molecules/rich-text-editor/icons/clear.d.ts +3 -0
  774. package/types/src/molecules/rich-text-editor/icons/code.d.ts +3 -0
  775. package/types/src/molecules/rich-text-editor/icons/font-size.d.ts +3 -0
  776. package/types/src/molecules/rich-text-editor/icons/image.d.ts +3 -0
  777. package/types/src/molecules/rich-text-editor/icons/index.d.ts +19 -0
  778. package/types/src/molecules/rich-text-editor/icons/italic.d.ts +3 -0
  779. package/types/src/molecules/rich-text-editor/icons/link.d.ts +3 -0
  780. package/types/src/molecules/rich-text-editor/icons/ordered-list.d.ts +3 -0
  781. package/types/src/molecules/rich-text-editor/icons/pagebreak.d.ts +3 -0
  782. package/types/src/molecules/rich-text-editor/icons/paragraph.d.ts +3 -0
  783. package/types/src/molecules/rich-text-editor/icons/quote.d.ts +3 -0
  784. package/types/src/molecules/rich-text-editor/icons/redo.d.ts +3 -0
  785. package/types/src/molecules/rich-text-editor/icons/strikethrough.d.ts +3 -0
  786. package/types/src/molecules/rich-text-editor/icons/undo.d.ts +3 -0
  787. package/types/src/molecules/rich-text-editor/index.d.ts +2 -0
  788. package/types/src/molecules/rich-text-editor/rich-text-editor-props.d.ts +1 -0
  789. package/types/src/molecules/rich-text-editor/rich-text-editor.d.ts +15 -0
  790. package/types/src/molecules/rich-text-editor/rich-text-editor.stories.d.ts +5 -0
  791. package/types/src/molecules/rich-text-editor/rich-text-editor.styled.d.ts +22 -0
  792. package/types/src/molecules/rich-text-editor/useTiptapCommands.d.ts +12 -0
  793. package/types/src/molecules/select/index.d.ts +2 -0
  794. package/types/src/molecules/select/select-async.d.ts +9 -0
  795. package/types/src/molecules/select/select-theme.d.ts +7 -0
  796. package/types/src/molecules/select/select.d.ts +9 -0
  797. package/types/src/molecules/select/select.stories.d.ts +7 -0
  798. package/types/src/molecules/stepper/index.d.ts +2 -0
  799. package/types/src/molecules/stepper/step.d.ts +86 -0
  800. package/types/src/molecules/stepper/stepper.d.ts +112 -0
  801. package/types/src/molecules/stepper/stepper.stories.d.ts +6 -0
  802. package/types/src/molecules/tinymce-editor/index.d.ts +1 -0
  803. package/types/src/molecules/tinymce-editor/tinymce-editor.d.ts +14 -0
  804. package/types/src/molecules/tinymce-editor/tinymce-editor.styled.d.ts +21 -0
  805. package/types/src/molecules/value-group/index.d.ts +2 -0
  806. package/types/src/molecules/value-group/value-group-props.d.ts +15 -0
  807. package/types/src/molecules/value-group/value-group.d.ts +14 -0
  808. package/types/src/molecules/value-group/value-group.stories.d.ts +7 -0
  809. package/types/src/organisms/button-group/button-group.d.ts +13 -0
  810. package/types/src/organisms/button-group/button-group.stories.d.ts +7 -0
  811. package/types/src/organisms/button-group/button-group.styled.d.ts +33 -0
  812. package/types/src/organisms/button-group/button-group.types.d.ts +59 -0
  813. package/types/src/organisms/button-group/button-in-group.d.ts +4 -0
  814. package/types/src/organisms/button-group/drop-down-item-with-buttons.d.ts +4 -0
  815. package/types/src/organisms/button-group/index.d.ts +6 -0
  816. package/types/src/organisms/button-group/single-button-in-group.d.ts +4 -0
  817. package/types/src/organisms/current-user-nav/current-user-nav-props.d.ts +37 -0
  818. package/types/src/organisms/current-user-nav/current-user-nav-styled.d.ts +12 -0
  819. package/types/src/organisms/current-user-nav/current-user-nav.d.ts +14 -0
  820. package/types/src/organisms/current-user-nav/current-user-nav.stories.d.ts +7 -0
  821. package/types/src/organisms/current-user-nav/index.d.ts +3 -0
  822. package/types/src/organisms/index.d.ts +4 -0
  823. package/types/src/organisms/made-with-love/index.d.ts +1 -0
  824. package/types/src/organisms/made-with-love/made-with-love.d.ts +3 -0
  825. package/types/src/organisms/made-with-love/made-with-love.stories.d.ts +5 -0
  826. package/types/src/organisms/navigation/index.d.ts +4 -0
  827. package/types/src/organisms/navigation/navigation-element-wrapper.d.ts +4 -0
  828. package/types/src/organisms/navigation/navigation-props.d.ts +21 -0
  829. package/types/src/organisms/navigation/navigation-styled.d.ts +12 -0
  830. package/types/src/organisms/navigation/navigation.d.ts +14 -0
  831. package/types/src/organisms/navigation/navigation.stories.d.ts +8 -0
  832. package/types/src/templates/blog.d.ts +1 -0
  833. package/types/src/templates/blog.stories.d.ts +4 -0
  834. package/types/src/theme.d.ts +503 -0
  835. package/types/src/utils/assert.d.ts +2 -0
  836. package/types/src/utils/color-props.d.ts +5 -0
  837. package/types/src/utils/combine-styles.d.ts +23 -0
  838. package/types/src/utils/content-styles.d.ts +21 -0
  839. package/types/src/utils/css-class.d.ts +21 -0
  840. package/types/src/utils/date-utils.d.ts +34 -0
  841. package/types/src/utils/datepicker.styles.d.ts +3 -0
  842. package/types/src/utils/default-theme.interface.d.ts +17 -0
  843. package/types/src/utils/direction-props.d.ts +1 -0
  844. package/types/src/utils/focus-shadow.style.d.ts +3 -0
  845. package/types/src/utils/generate-id.d.ts +2 -0
  846. package/types/src/utils/human-file-size.d.ts +12 -0
  847. package/types/src/utils/index.d.ts +13 -0
  848. package/types/src/utils/non-nullish-partial-record.type.d.ts +16 -0
  849. package/types/src/utils/phone-input.styles.d.ts +3 -0
  850. package/types/src/utils/portal-utils.d.ts +7 -0
  851. package/types/src/utils/reset.styles.d.ts +37 -0
  852. package/types/src/utils/select-styles.d.ts +5 -0
  853. package/types/src/utils/story-wrapper.d.ts +9 -0
  854. package/types/src/utils/styled.d.ts +4 -0
  855. package/types/src/utils/theme-get.d.ts +32 -0
  856. package/vendor-types/csstype/index.d.ts +0 -0
  857. package/vendor-types/jw-paginate/index.d.ts +10 -0
  858. package/vendor-types/styled-components/index.d.ts +7 -0
package/build/index.doc.md ADDED
@@ -0,0 +1,133 @@
1
+ This package consists of all DesignSystem components from [AdminJS](adminjs.co) so you can
2
+ use all of them outside the `adminjs` core.
3
+
4
+ ## Installation outside the AdminJS
5
+
6
+ ```bash
7
+ yarn add styled-components @adminjs/design-system
8
+ ```
9
+
10
+ Optionally, if you use typescript, you might want to install types for `styled-components`
11
+
12
+ ```bash
13
+ yarn add --dev @types/styled-components
14
+ ```
15
+
16
+ Design System needs a `theme` so to use it you have to use `ThemeProvider` from
17
+ `styled-components` like this:
18
+
19
+ ```javascript
20
+ import { ThemeProvider } from 'styled-components'
21
+
22
+ // theme is the default theme, which you can alter
23
+ import { theme, Button, Box, Icon, Reset } from '@adminjs/design-system'
24
+
25
+ function App() {
26
+ return (
27
+ <ThemeProvider theme={theme}>
28
+ <Reset />
29
+ <Box variant="grey">
30
+ <Button><Icon icon="Plus" />Click Me</Button>
31
+ <Button variant='primary' ml="xl">I am important</Button>
32
+ </Box>
33
+ </ThemeProvider>
34
+ );
35
+ }
36
+
37
+ export default App;
38
+ ```
39
+
40
+ `Reset` resets all the default browser styles.
41
+
42
+ ## Changing the theme
43
+
44
+ The Design System provides you with the default [theme](https://adminjs.co/Theme.html).
45
+ It contains all the parameters like paddings, colors, font, sizes etc. For the list of all
46
+ available parameters take a look at the [Theme spec](https://adminjs.co/Theme.html).
47
+
48
+ But nothing stands in a way for you to change the default theme. To do that
49
+ you can use the `combineStyles` method:
50
+
51
+ ```jsx
52
+ import { combineStyles } from '@adminjs/design-system`
53
+
54
+ const myTheme = combineStyles({
55
+ colors: {
56
+ primary100: '#000'
57
+ }
58
+ })
59
+
60
+ //....
61
+ <ThemeProvider theme={myTheme}>
62
+ //....
63
+ ```
64
+
65
+ ## Global style and the font
66
+
67
+ The main font for the design system is "Roboto". The Default version in OS might not have all the
68
+ font-weights. That is why you should import it in your head:
69
+
70
+ ```html
71
+ <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet"></link>
72
+ ```
73
+
74
+ ## Changing particular components
75
+
76
+ Sometimes you might want to change the look and feel of a particular component -
77
+ not the entire theme. You can achieve that with the `styled` method:
78
+
79
+ ```jsx
80
+ import { Button } from '@adminjs/design-system'
81
+ import styled from 'styled-components'
82
+
83
+ const MyRoundedButton = styled(Button)`
84
+ border-radius: 10px;
85
+ `
86
+ ```
87
+
88
+ and then you can use it like a normal button component:
89
+
90
+ ```jsx
91
+ <MyRoundedButton variant="primary">Rounded I am</MyRoundedButton>
92
+ ```
93
+
94
+ ## Components
95
+
96
+ All the components were placed in the sidebar. They are divided to Atoms, Molecules and Organisms.
97
+
98
+ ## Bundled packages
99
+
100
+ This npm package comes with the bundled versions as well. You can find them under:
101
+
102
+ - `node_modules/@adminjs/design-system/bundle.development.js`
103
+ - `node_modules/@adminjs/design-system/bundle.production.js` (minified)
104
+
105
+ (they can also be bundled by using `bundle`
106
+ script: `yarn bundle` or `NODE_ENV=production yarn bundle`)
107
+
108
+ In order to use them you will have to host them (put to your 'public' folder) and then put them
109
+ into the HEAD of your page:
110
+
111
+ ```html
112
+ <head>
113
+ <!-- ... -->
114
+ <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
115
+ <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/styled-components/5.1.1/styled-components.js"></script>
116
+ <script crossorigin src="/bundle.development.js"></script>
117
+ <!-- ... -->
118
+ </head>
119
+ ```
120
+
121
+ ## Contribute
122
+
123
+ If you find any UI errors - feel free to create a PR.
124
+
125
+ ## Storybook
126
+
127
+ Inside the repository, there is a storybook folder containing all the stories.
128
+ To run it go inside and:
129
+
130
+ ```bash
131
+ yarn install
132
+ yarn storybook
133
+ ```
package/build/index.js ADDED
@@ -0,0 +1,16 @@
1
+ /**
2
+ * @module @adminjs/design-system
3
+ * @section design-system
4
+ *
5
+ * @load .index.doc.md
6
+ */
7
+
8
+ import * as theme from "./theme.js";
9
+ export { theme };
10
+ export * from "./atoms/index.js";
11
+ export * from "./molecules/index.js";
12
+ export * from "./organisms/index.js";
13
+ export * from "./constants.js";
14
+ export * from "./global.js";
15
+ export * from "./theme.js";
16
+ export * from "./utils/index.js";
package/build/molecules/date-picker/date-picker.js ADDED
@@ -0,0 +1,326 @@
1
+ function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
2
+ /* eslint-disable @typescript-eslint/ban-ts-comment */
3
+ // @ts-nocheck
4
+ import React, { useMemo } from 'react';
5
+ import { styled } from "../../../build/utils/styled.js";
6
+ import ReactDatePicker from 'react-datepicker';
7
+ import MaskedInput from 'react-text-mask';
8
+ import createAutoCorrectedDatePipe from 'text-mask-addons/dist/createAutoCorrectedDatePipe.js';
9
+ import styles from "../../utils/datepicker.styles.js";
10
+ import { Icon } from "../../atoms/icon/index.js";
11
+ import { Box } from "../../atoms/box/index.js";
12
+ import { cssClass } from "../../utils/css-class.js";
13
+ const Mask = MaskedInput.default ?? MaskedInput;
14
+ const autocorrectedDatePipe = createAutoCorrectedDatePipe.default ?? createAutoCorrectedDatePipe;
15
+ const DatePickerIcon = styled(Icon)`
16
+ position: absolute;
17
+ color: ${({
18
+ theme
19
+ }) => theme.colors.primary100};
20
+ right: 0;
21
+ top: 0;
22
+ display: flex;
23
+ justify-content: center;
24
+ align-items: center;
25
+ overflow: hidden;
26
+ height: 100%;
27
+ min-width: 34px;
28
+ width: auto;
29
+ `;
30
+ const StyledDatePicker = styled(Box)`
31
+ ${styles};
32
+ position: relative;
33
+
34
+ & .react-datepicker-wrapper {
35
+ width: 100%;
36
+ box-sizing: border-box;
37
+ border: ${({
38
+ theme
39
+ }) => `1px solid ${theme.colors.grey40}`};
40
+ padding: 4px 8px;
41
+ font-size: 14px;
42
+ line-height: 24px;
43
+ border-radius: 2px;
44
+ }
45
+
46
+ & .react-datepicker-wrapper input {
47
+ border: none;
48
+ width: 100%;
49
+ height: 100%;
50
+ background: transparent;
51
+ color: ${({
52
+ theme
53
+ }) => theme.colors.grey100};
54
+
55
+ &:focus-visible {
56
+ outline: none;
57
+ }
58
+ }
59
+
60
+ & .react-datepicker {
61
+ border-radius: 0;
62
+ padding: ${({
63
+ theme
64
+ }) => theme.space.default};
65
+ font-family: ${({
66
+ theme
67
+ }) => theme.font};
68
+ z-index: 101;
69
+
70
+ &:focus-visible {
71
+ outline: none;
72
+ }
73
+ }
74
+
75
+ & .react-datepicker__navigation--next {
76
+ border-left-color: ${({
77
+ theme
78
+ }) => theme.colors.primary60};
79
+ top: 16px;
80
+ }
81
+
82
+ & .react-datepicker__navigation--next:hover {
83
+ border-left-color: ${({
84
+ theme
85
+ }) => theme.colors.primary100};
86
+ }
87
+
88
+ & .react-datepicker__navigation--previous {
89
+ border-right-color: ${({
90
+ theme
91
+ }) => theme.colors.primary60};
92
+ top: 16px;
93
+ }
94
+
95
+ & .react-datepicker__navigation--previous:hover {
96
+ border-right-color: ${({
97
+ theme
98
+ }) => theme.colors.primary100};
99
+ }
100
+
101
+ & .react-datepicker__navigation {
102
+ outline: none;
103
+ }
104
+
105
+ & .react-datepicker__year-read-view--down-arrow {
106
+ top: 5px;
107
+ }
108
+
109
+ & .react-datepicker__header {
110
+ background: ${({
111
+ theme
112
+ }) => theme.colors.white};
113
+ font-size: ${({
114
+ theme
115
+ }) => theme.fontSizes.default};
116
+ border: none;
117
+ }
118
+
119
+ & .react-datepicker__current-month {
120
+ font-weight: normal;
121
+ padding-bottom: ${({
122
+ theme
123
+ }) => theme.space.lg};
124
+ }
125
+
126
+ & .react-datepicker__month {
127
+ margin-top: 0;
128
+ }
129
+
130
+ & .react-datepicker__day-name {
131
+ color: ${({
132
+ theme
133
+ }) => theme.colors.primary60};
134
+ }
135
+
136
+ & .react-datepicker__day--outside-month {
137
+ color: ${({
138
+ theme
139
+ }) => theme.colors.grey40};
140
+ }
141
+
142
+ & .react-datepicker__day--today.react-datepicker__day--keyboard-selected {
143
+ color: ${({
144
+ theme
145
+ }) => theme.colors.white};
146
+ }
147
+
148
+ & .react-datepicker__day--selected {
149
+ color: ${({
150
+ theme
151
+ }) => theme.colors.white};
152
+ }
153
+
154
+ & .react-datepicker__day--keyboard-selected:not(.react-datepicker__day--today) {
155
+ background: none;
156
+ color: ${({
157
+ theme
158
+ }) => theme.colors.grey100};
159
+ }
160
+
161
+ & .react-datepicker__day:hover,
162
+ & .react-datepicker__day {
163
+ border-radius: 15px;
164
+ }
165
+
166
+ & .react-datepicker__day--selected {
167
+ background: ${({
168
+ theme
169
+ }) => theme.colors.primary100};
170
+ border-radius: 15px;
171
+ color: ${({
172
+ theme
173
+ }) => theme.colors.white};
174
+ }
175
+ `;
176
+ const parseDateSafely = newDate => {
177
+ const timestamp = Date.parse(newDate);
178
+ if (!Number.isNaN(timestamp)) {
179
+ return new Date(timestamp);
180
+ }
181
+ return null;
182
+ };
183
+
184
+ // https://github.com/text-mask/text-mask/issues/951
185
+ const convertDateFnsFormatToDatePipeFormat = format => {
186
+ const tokens = format.split('');
187
+ return tokens.map(char => {
188
+ if (char === 'M') return 'm';
189
+ if (char === 'm') return 'M';
190
+ return char;
191
+ }).join('');
192
+ };
193
+ const defaultDateProps = {
194
+ date: {
195
+ format: 'yyyy/MM/dd',
196
+ placeholder: 'YYYY/MM/DD',
197
+ inputMask: [/\d/, /\d/, /\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/]
198
+ },
199
+ datetime: {
200
+ format: 'yyyy/MM/dd HH:mm',
201
+ placeholder: 'YYYY/MM/DD HH:mm',
202
+ inputMask: [/\d/, /\d/, /\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, ' ', /\d/, /\d/, ':', /\d/, /\d/]
203
+ }
204
+ };
205
+
206
+ /**
207
+ * Props for DatePicker
208
+ *
209
+ * @memberof DatePicker
210
+ * @alias DatePickerProps
211
+ * @property {any} {...} Any custom props to pass down to the ReactDatePicker
212
+ * @see https://reactdatepicker.com/
213
+ */
214
+
215
+ const parseCustomMask = mask => mask.map(el => {
216
+ if (typeof el === 'string') return el;
217
+ if (el.raw) return el.raw;
218
+ if (!el.regex) throw new Error('Invalid input mask');
219
+ return new RegExp(el.regex);
220
+ });
221
+ const getDateInputProps = (
222
+ // eslint-disable-next-line default-param-last
223
+ propertyType = 'datetime', props) => {
224
+ const {
225
+ dateFormat,
226
+ placeholderText,
227
+ inputMask
228
+ } = props;
229
+ const defaultProps = defaultDateProps[propertyType];
230
+ const format = dateFormat ?? defaultProps.format;
231
+ const placeholder = placeholderText ?? defaultProps.placeholder;
232
+ const mask = inputMask?.mask ? parseCustomMask(inputMask.mask) : defaultProps.inputMask;
233
+ // eslint-disable-next-line max-len
234
+ const dateFormatPipe = autocorrectedDatePipe(convertDateFnsFormatToDatePipeFormat(format));
235
+ return {
236
+ format,
237
+ dateFormatPipe,
238
+ placeholder,
239
+ parsedMask: mask
240
+ };
241
+ };
242
+
243
+ /**
244
+ * @classdesc
245
+ *
246
+ * <img src="components/date-picker.png" />
247
+ *
248
+ *
249
+ * Component responsible for showing dates. It is a wrapper to
250
+ * [react datepicker]{@link https://reactdatepicker.com/}.
251
+ *
252
+ * ### Usage
253
+ *
254
+ * ```javascript
255
+ * import { DatePicker, DatePickerProps } from '@adminjs/design-system'
256
+ * ```
257
+ *
258
+ * @component
259
+ * @subcategory Molecules
260
+ * @see https://reactdatepicker.com/
261
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-molecules-datepicker--default Storybook}
262
+ * @see DatePickerProps
263
+ * @hideconstructor
264
+ *
265
+ * @example
266
+ * return (
267
+ * <Box width={1/2} height="300px">
268
+ * <DatePicker onChange={(date) => console.log(date)}/>
269
+ * </Box>
270
+ * )
271
+ * @section design-system
272
+ */
273
+ const DatePicker = props => {
274
+ const {
275
+ value,
276
+ onChange,
277
+ disabled,
278
+ propertyType,
279
+ inputMask = {},
280
+ placeholderText,
281
+ dateFormat,
282
+ ...other
283
+ } = props;
284
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
285
+ const {
286
+ mask: _mask,
287
+ ...otherInputMaskProps
288
+ } = inputMask;
289
+ const handleChange = newDate => {
290
+ onChange(parseDateSafely(newDate)?.toISOString?.() || '');
291
+ };
292
+ const dateValue = useMemo(() => parseDateSafely(value), [value]);
293
+ const {
294
+ dateFormatPipe,
295
+ format,
296
+ parsedMask,
297
+ placeholder
298
+ } = getDateInputProps(propertyType, {
299
+ dateFormat,
300
+ inputMask,
301
+ placeholderText
302
+ });
303
+ return /*#__PURE__*/React.createElement(StyledDatePicker, {
304
+ className: cssClass('DatePicker')
305
+ }, /*#__PURE__*/React.createElement(ReactDatePicker, _extends({
306
+ customInput: /*#__PURE__*/React.createElement(Mask, _extends({
307
+ pipe: dateFormatPipe,
308
+ mask: parsedMask,
309
+ keepCharPositions: true,
310
+ guide: true,
311
+ placeholder: placeholder,
312
+ disabled: disabled
313
+ }, otherInputMaskProps)),
314
+ selected: dateValue,
315
+ onChange: handleChange,
316
+ showTimeInput: propertyType === 'datetime',
317
+ dateFormat: format,
318
+ disabled: disabled
319
+ }, other)), /*#__PURE__*/React.createElement(DatePickerIcon, {
320
+ icon: "Calendar",
321
+ color: "primary100"
322
+ }));
323
+ };
324
+ DatePicker.displayName = 'DatePicker';
325
+ export { DatePicker };
326
+ export default DatePicker;
package/build/molecules/date-picker/date-picker.stories.js ADDED
@@ -0,0 +1,49 @@
1
+ import React, { useState } from 'react';
2
+ import { Box } from "../../index.js";
3
+ import { DatePicker } from "./index.js";
4
+ const propertyTypes = {
5
+ Date: 'date',
6
+ DateTime: 'datetime'
7
+ };
8
+ export const Default = {
9
+ render: props => {
10
+ const [date, setDate] = useState('2020-12-01T14:32:00.000Z');
11
+ const {
12
+ disabled,
13
+ propertyType
14
+ } = props;
15
+ const handleChange = value => {
16
+ if (value) setDate(value);else setDate(null);
17
+ };
18
+ return /*#__PURE__*/React.createElement(Box, {
19
+ height: "320px"
20
+ }, /*#__PURE__*/React.createElement(DatePicker, {
21
+ onChange: handleChange,
22
+ value: date ?? '',
23
+ disabled: disabled,
24
+ propertyType: propertyType
25
+ }));
26
+ }
27
+ };
28
+ const meta = {
29
+ title: 'DesignSystem/Molecules/DatePicker',
30
+ component: DatePicker,
31
+ args: {
32
+ disabled: false,
33
+ propertyType: propertyTypes.Date
34
+ },
35
+ argTypes: {
36
+ disabled: {
37
+ control: {
38
+ type: 'boolean'
39
+ }
40
+ },
41
+ propertyType: {
42
+ options: propertyTypes,
43
+ control: {
44
+ type: 'select'
45
+ }
46
+ }
47
+ }
48
+ };
49
+ export default meta;
package/build/molecules/date-picker/index.js ADDED
@@ -0,0 +1,2 @@
1
+ export * from "./date-picker.js";
2
+ export * from "./useDatePicker.js";
package/build/molecules/date-picker/useDatePicker.js ADDED
@@ -0,0 +1,37 @@
1
+ import { useState } from 'react';
2
+ import { parseISO } from 'date-fns';
3
+ import { formatDateProperty } from "../../utils/index.js";
4
+ export const useDatePicker = ({
5
+ value,
6
+ propertyType,
7
+ disabled,
8
+ onChange
9
+ }) => {
10
+ const [isCalendarVisible, setCalendarVisible] = useState(false);
11
+ let date;
12
+ let dateString;
13
+ if (value && value.constructor.name !== 'Date') {
14
+ const dateStringValue = value;
15
+ let dateNum = parseISO(dateStringValue);
16
+ if (dateNum.toString() === 'Invalid Date') dateNum = undefined;
17
+ if (dateNum) {
18
+ date = new Date(dateNum);
19
+ dateString = formatDateProperty(date, propertyType);
20
+ }
21
+ } else if (value && value.constructor.name === 'Date') {
22
+ dateString = formatDateProperty(value, propertyType);
23
+ }
24
+ const onDateChange = newDate => {
25
+ if (!disabled) {
26
+ onChange(newDate);
27
+ }
28
+ };
29
+ return {
30
+ dateString,
31
+ date,
32
+ isCalendarVisible,
33
+ setCalendarVisible,
34
+ onDateChange
35
+ };
36
+ };
37
+ export default useDatePicker;
package/build/molecules/drawer/drawer-content.js ADDED
@@ -0,0 +1,22 @@
1
+ import { space } from 'styled-system';
2
+ import { styled } from "../../../build/utils/styled.js";
3
+
4
+ /**
5
+ * @component
6
+ * @private
7
+ */
8
+ export const DrawerContent = styled.section`
9
+ flex-grow: 1;
10
+ overflow: auto;
11
+ padding: ${({
12
+ theme
13
+ }) => theme.space.x3} ${({
14
+ theme
15
+ }) => theme.space.xxl} ${({
16
+ theme
17
+ }) => theme.space.xl};
18
+ box-sizing: border-box;
19
+ ${space};
20
+ `;
21
+ DrawerContent.displayName = 'DrawerContent';
22
+ export default DrawerContent;
package/build/molecules/drawer/drawer-footer.js ADDED
@@ -0,0 +1,21 @@
1
+ import { space } from 'styled-system';
2
+ import { styled } from "../../../build/utils/styled.js";
3
+
4
+ /**
5
+ * @component
6
+ * @private
7
+ */
8
+ export const DrawerFooter = styled.section`
9
+ display: flex;
10
+ justify-content: space-around;
11
+ padding: ${({
12
+ theme
13
+ }) => theme.space.xxl} ${({
14
+ theme
15
+ }) => theme.space.lg};
16
+ text-align: center;
17
+ flex-shrink: 0;
18
+ ${space};
19
+ `;
20
+ DrawerFooter.displayName = 'DrawerFooter';
21
+ export default DrawerFooter;