react-asc 25.8.2 → 25.10.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 (293) hide show
  1. package/apple-touch-icon.png +0 -0
  2. package/assets/index-5bb661b4.js +100 -0
  3. package/assets/index-b3809a2b.css +1 -0
  4. package/assets/workbox-window.prod.es5-a7b12eab.js +2 -0
  5. package/changelog.md +1510 -0
  6. package/favicon-16x16.png +0 -0
  7. package/favicon-32x32.png +0 -0
  8. package/favicon.ico +0 -0
  9. package/favicon.svg +23 -0
  10. package/index.html +24 -0
  11. package/manifest.webmanifest +1 -0
  12. package/package.json +7 -1
  13. package/pwa-192x192.png +0 -0
  14. package/pwa-512x512.png +0 -0
  15. package/robots.txt +3 -0
  16. package/showcase/alert.description.md +1 -0
  17. package/showcase/alert.md +14 -0
  18. package/showcase/appbar.description.md +1 -0
  19. package/showcase/appbar.md +8 -0
  20. package/showcase/autocomplete.description.md +1 -0
  21. package/showcase/autocomplete.md +49 -0
  22. package/showcase/backdrop.description.md +1 -0
  23. package/showcase/backdrop.md +11 -0
  24. package/showcase/badge.description.md +1 -0
  25. package/showcase/badge.md +8 -0
  26. package/showcase/breadcrumb.description.md +1 -0
  27. package/showcase/breadcrumb.md +5 -0
  28. package/showcase/button.description.md +1 -0
  29. package/showcase/button.md +44 -0
  30. package/showcase/buttongroup.description.md +1 -0
  31. package/showcase/buttongroup.md +5 -0
  32. package/showcase/card.description.md +1 -0
  33. package/showcase/card.md +9 -0
  34. package/showcase/checkbox.description.md +1 -0
  35. package/showcase/checkbox.md +1 -0
  36. package/showcase/chip.description.md +1 -0
  37. package/showcase/chip.md +3 -0
  38. package/showcase/csstransition.md +38 -0
  39. package/showcase/dateselect.md +8 -0
  40. package/showcase/drawer.md +13 -0
  41. package/showcase/expansionpanel.md +40 -0
  42. package/showcase/fileinput.md +1 -0
  43. package/showcase/floatingactionbutton.md +4 -0
  44. package/showcase/form.md +6 -0
  45. package/showcase/grid.md +5 -0
  46. package/showcase/hookuseconstructor.description.md +1 -0
  47. package/showcase/hookuseconstructor.md +5 -0
  48. package/showcase/hookusedebounce.description.md +3 -0
  49. package/showcase/hookusedebounce.md +17 -0
  50. package/showcase/hookusehover.md +11 -0
  51. package/showcase/hookusemobiledetect.description.md +2 -0
  52. package/showcase/hookusemobiledetect.md +11 -0
  53. package/showcase/hookuseondestroy.description.md +1 -0
  54. package/showcase/hookuseondestroy.md +5 -0
  55. package/showcase/hookuseprevious.description.md +1 -0
  56. package/showcase/hookuseprevious.md +14 -0
  57. package/showcase/hookusewindowsize.description.md +2 -0
  58. package/showcase/hookusewindowsize.md +11 -0
  59. package/showcase/icon.md +3 -0
  60. package/showcase/iconbutton.md +5 -0
  61. package/showcase/link.md +1 -0
  62. package/showcase/list.md +98 -0
  63. package/showcase/loadingindicator.md +38 -0
  64. package/showcase/menu.md +17 -0
  65. package/showcase/modal.md +46 -0
  66. package/showcase/numberselect.md +20 -0
  67. package/showcase/progressbar.description.md +1 -0
  68. package/showcase/progressbar.md +3 -0
  69. package/showcase/select.md +20 -0
  70. package/showcase/servicelogger.md +9 -0
  71. package/showcase/skeleton.description.md +5 -0
  72. package/showcase/skeleton.md +5 -0
  73. package/showcase/snackbar.md +22 -0
  74. package/showcase/speeddial.md +43 -0
  75. package/showcase/stepper.description.md +1 -0
  76. package/showcase/stepper.md +40 -0
  77. package/showcase/table.md +30 -0
  78. package/showcase/tabs.md +35 -0
  79. package/showcase/timeselect.md +1 -0
  80. package/showcase/tooltip.md +6 -0
  81. package/showcase/treeview.md +12 -0
  82. package/showcase/typography.md +6 -0
  83. package/sw.js +1 -0
  84. package/workbox-fa446783.js +1 -0
  85. package/index.d.ts +0 -1032
  86. package/index.es.js +0 -7069
  87. package/index.js +0 -7198
  88. package/lib/components/Alert/Alert.d.ts +0 -12
  89. package/lib/components/Alert/index.d.ts +0 -1
  90. package/lib/components/AppBar/AppBar.d.ts +0 -11
  91. package/lib/components/AppBar/AppBarTitle.d.ts +0 -6
  92. package/lib/components/AppBar/index.d.ts +0 -2
  93. package/lib/components/AutoComplete/AutoComplete.d.ts +0 -18
  94. package/lib/components/AutoComplete/index.d.ts +0 -1
  95. package/lib/components/Backdrop/Backdrop.d.ts +0 -6
  96. package/lib/components/Backdrop/index.d.ts +0 -1
  97. package/lib/components/Badge/Badge.d.ts +0 -9
  98. package/lib/components/Badge/index.d.ts +0 -1
  99. package/lib/components/Breadcrumb/Breadcrumb.d.ts +0 -6
  100. package/lib/components/Breadcrumb/BreadcrumbItem.d.ts +0 -6
  101. package/lib/components/Breadcrumb/index.d.ts +0 -2
  102. package/lib/components/Button/Button.d.ts +0 -14
  103. package/lib/components/Button/ButtonContext.d.ts +0 -7
  104. package/lib/components/Button/index.d.ts +0 -2
  105. package/lib/components/ButtonGroup/ButtonGroup.d.ts +0 -6
  106. package/lib/components/ButtonGroup/index.d.ts +0 -1
  107. package/lib/components/Card/Card.d.ts +0 -6
  108. package/lib/components/Card/CardBody.d.ts +0 -2
  109. package/lib/components/Card/CardFooter.d.ts +0 -2
  110. package/lib/components/Card/CardImage.d.ts +0 -2
  111. package/lib/components/Card/CardSubtitle.d.ts +0 -2
  112. package/lib/components/Card/CardText.d.ts +0 -2
  113. package/lib/components/Card/CardTitle.d.ts +0 -6
  114. package/lib/components/Card/index.d.ts +0 -7
  115. package/lib/components/Checkbox/Checkbox.d.ts +0 -7
  116. package/lib/components/Checkbox/index.d.ts +0 -1
  117. package/lib/components/Chip/Chip.d.ts +0 -11
  118. package/lib/components/Chip/index.d.ts +0 -1
  119. package/lib/components/ConditionalWrapper/ConditionalWrapper.d.ts +0 -8
  120. package/lib/components/ConditionalWrapper/index.d.ts +0 -1
  121. package/lib/components/CssTransition/CssTransition.d.ts +0 -8
  122. package/lib/components/CssTransition/index.d.ts +0 -1
  123. package/lib/components/DatePicker/DatePicker.d.ts +0 -10
  124. package/lib/components/DatePicker/index.d.ts +0 -1
  125. package/lib/components/DateSelect/DateSelect.d.ts +0 -17
  126. package/lib/components/DateSelect/DaySelect.d.ts +0 -12
  127. package/lib/components/DateSelect/MonthSelect.d.ts +0 -10
  128. package/lib/components/DateSelect/YearSelect.d.ts +0 -12
  129. package/lib/components/DateSelect/index.d.ts +0 -4
  130. package/lib/components/Drawer/Drawer.d.ts +0 -9
  131. package/lib/components/Drawer/index.d.ts +0 -1
  132. package/lib/components/ExpansionPanel/ExpansionPanel.d.ts +0 -10
  133. package/lib/components/ExpansionPanel/ExpansionPanelContent.d.ts +0 -5
  134. package/lib/components/ExpansionPanel/ExpansionPanelHeader.d.ts +0 -8
  135. package/lib/components/ExpansionPanel/index.d.ts +0 -3
  136. package/lib/components/FileInput/FileInput.d.ts +0 -5
  137. package/lib/components/FileInput/index.d.ts +0 -1
  138. package/lib/components/FloatingActionButton/FloatingActionButton.d.ts +0 -13
  139. package/lib/components/FloatingActionButton/index.d.ts +0 -1
  140. package/lib/components/Form/Form.d.ts +0 -40
  141. package/lib/components/Form/FormError.d.ts +0 -8
  142. package/lib/components/Form/FormGroup.d.ts +0 -7
  143. package/lib/components/Form/FormHint/FormHint.d.ts +0 -2
  144. package/lib/components/Form/FormHint/index.d.ts +0 -1
  145. package/lib/components/Form/FormInput/FormInput.d.ts +0 -29
  146. package/lib/components/Form/FormInput/index.d.ts +0 -1
  147. package/lib/components/Form/FormLabel/FormLabel.d.ts +0 -2
  148. package/lib/components/Form/FormLabel/index.d.ts +0 -1
  149. package/lib/components/Form/form.interfaces.d.ts +0 -40
  150. package/lib/components/Form/form.models.d.ts +0 -12
  151. package/lib/components/Form/form.types.d.ts +0 -2
  152. package/lib/components/Form/index.d.ts +0 -10
  153. package/lib/components/Form/validators/EmailValidtor.d.ts +0 -1
  154. package/lib/components/Form/validators/IsEmptyValidator.d.ts +0 -1
  155. package/lib/components/Form/validators/IsEqualValidator.d.ts +0 -1
  156. package/lib/components/Form/validators/MaxValidator.d.ts +0 -1
  157. package/lib/components/Form/validators/MinValidator.d.ts +0 -1
  158. package/lib/components/Form/validators/index.d.ts +0 -5
  159. package/lib/components/Grid/Column/Column.d.ts +0 -10
  160. package/lib/components/Grid/Column/index.d.ts +0 -1
  161. package/lib/components/Grid/Row/Row.d.ts +0 -5
  162. package/lib/components/Grid/Row/index.d.ts +0 -1
  163. package/lib/components/Grid/index.d.ts +0 -2
  164. package/lib/components/Icon/Icon.d.ts +0 -8
  165. package/lib/components/Icon/index.d.ts +0 -1
  166. package/lib/components/IconButton/IconButton.d.ts +0 -12
  167. package/lib/components/IconButton/index.d.ts +0 -1
  168. package/lib/components/Link/Link.d.ts +0 -2
  169. package/lib/components/Link/Link.test.d.ts +0 -1
  170. package/lib/components/Link/index.d.ts +0 -1
  171. package/lib/components/List/List.d.ts +0 -5
  172. package/lib/components/List/ListItem.d.ts +0 -9
  173. package/lib/components/List/ListItemAction.d.ts +0 -2
  174. package/lib/components/List/ListItemAvatar.d.ts +0 -6
  175. package/lib/components/List/ListItemIcon.d.ts +0 -6
  176. package/lib/components/List/ListItemText.d.ts +0 -8
  177. package/lib/components/List/index.d.ts +0 -6
  178. package/lib/components/List/list.models.d.ts +0 -8
  179. package/lib/components/LoadingIndicator/LoadingIndicator.d.ts +0 -2
  180. package/lib/components/LoadingIndicator/LoadingIndicatorContainer.d.ts +0 -6
  181. package/lib/components/LoadingIndicator/index.d.ts +0 -3
  182. package/lib/components/LoadingIndicator/loading-indicator.service.d.ts +0 -12
  183. package/lib/components/Menu/Menu.d.ts +0 -12
  184. package/lib/components/Menu/MenuBody.d.ts +0 -13
  185. package/lib/components/Menu/MenuContext.d.ts +0 -6
  186. package/lib/components/Menu/MenuDivider.d.ts +0 -2
  187. package/lib/components/Menu/MenuItem.d.ts +0 -3
  188. package/lib/components/Menu/MenuToggle.d.ts +0 -6
  189. package/lib/components/Menu/index.d.ts +0 -6
  190. package/lib/components/Menu/menu.types.d.ts +0 -1
  191. package/lib/components/Modal/GlobalModal.d.ts +0 -21
  192. package/lib/components/Modal/Modal.d.ts +0 -15
  193. package/lib/components/Modal/ModalBody.d.ts +0 -6
  194. package/lib/components/Modal/ModalFooter.d.ts +0 -6
  195. package/lib/components/Modal/ModalHeader.d.ts +0 -8
  196. package/lib/components/Modal/index.d.ts +0 -8
  197. package/lib/components/Modal/modal.enum.d.ts +0 -10
  198. package/lib/components/Modal/modal.interfaces.d.ts +0 -12
  199. package/lib/components/Modal/modal.service.d.ts +0 -22
  200. package/lib/components/NumberSelect/NumberSelect.d.ts +0 -12
  201. package/lib/components/NumberSelect/index.d.ts +0 -1
  202. package/lib/components/Portal/Portal.d.ts +0 -7
  203. package/lib/components/Portal/index.d.ts +0 -1
  204. package/lib/components/ProgressBar/ProgressBar.d.ts +0 -9
  205. package/lib/components/ProgressBar/index.d.ts +0 -1
  206. package/lib/components/Select/Select.d.ts +0 -16
  207. package/lib/components/Select/index.d.ts +0 -1
  208. package/lib/components/Sidebar/Sidebar.d.ts +0 -9
  209. package/lib/components/Sidebar/index.d.ts +0 -2
  210. package/lib/components/Sidebar/sidebar.interfaces.d.ts +0 -9
  211. package/lib/components/Sidebar/sidebar.models.d.ts +0 -11
  212. package/lib/components/Skeleton/SkeletonAvatar.d.ts +0 -5
  213. package/lib/components/Skeleton/SkeletonFooter.d.ts +0 -5
  214. package/lib/components/Skeleton/SkeletonImage.d.ts +0 -5
  215. package/lib/components/Skeleton/SkeletonText.d.ts +0 -5
  216. package/lib/components/Skeleton/index.d.ts +0 -4
  217. package/lib/components/Snackbar/Snackbar.d.ts +0 -9
  218. package/lib/components/Snackbar/index.d.ts +0 -2
  219. package/lib/components/Snackbar/snackbar.service.d.ts +0 -20
  220. package/lib/components/SpeedDial/SpeedDial.d.ts +0 -7
  221. package/lib/components/SpeedDial/SpeedDialAction.d.ts +0 -9
  222. package/lib/components/SpeedDial/SpeedDialActions.d.ts +0 -2
  223. package/lib/components/SpeedDial/SpeedDialIcon.d.ts +0 -6
  224. package/lib/components/SpeedDial/index.d.ts +0 -3
  225. package/lib/components/Stepper/Dot/Dot.d.ts +0 -7
  226. package/lib/components/Stepper/Dot/index.d.ts +0 -1
  227. package/lib/components/Stepper/Step/Step.d.ts +0 -20
  228. package/lib/components/Stepper/Step/index.d.ts +0 -1
  229. package/lib/components/Stepper/StepConnector/StepConnector.d.ts +0 -6
  230. package/lib/components/Stepper/StepPanel/StepPanel.d.ts +0 -5
  231. package/lib/components/Stepper/Stepper.d.ts +0 -20
  232. package/lib/components/Stepper/StepperActions/StepperActions.d.ts +0 -14
  233. package/lib/components/Stepper/StepperActions/index.d.ts +0 -1
  234. package/lib/components/Stepper/index.d.ts +0 -4
  235. package/lib/components/Table/Table.d.ts +0 -8
  236. package/lib/components/Table/TableBody.d.ts +0 -2
  237. package/lib/components/Table/TableCell.d.ts +0 -5
  238. package/lib/components/Table/TableContext.d.ts +0 -6
  239. package/lib/components/Table/TableHead.d.ts +0 -2
  240. package/lib/components/Table/TableRow.d.ts +0 -2
  241. package/lib/components/Table/index.d.ts +0 -5
  242. package/lib/components/Tabs/Tab.d.ts +0 -13
  243. package/lib/components/Tabs/TabContext.d.ts +0 -8
  244. package/lib/components/Tabs/TabIndicator.d.ts +0 -10
  245. package/lib/components/Tabs/TabPanel.d.ts +0 -6
  246. package/lib/components/Tabs/Tabs.d.ts +0 -13
  247. package/lib/components/Tabs/index.d.ts +0 -3
  248. package/lib/components/Textarea/Textarea.d.ts +0 -5
  249. package/lib/components/Textarea/index.d.ts +0 -1
  250. package/lib/components/TimeSelect/HourSelect.d.ts +0 -10
  251. package/lib/components/TimeSelect/MilliSecondSelect.d.ts +0 -11
  252. package/lib/components/TimeSelect/MinuteSelect.d.ts +0 -10
  253. package/lib/components/TimeSelect/SecondSelect.d.ts +0 -10
  254. package/lib/components/TimeSelect/TimeSelect.d.ts +0 -20
  255. package/lib/components/TimeSelect/index.d.ts +0 -5
  256. package/lib/components/Tooltip/Tooltip.d.ts +0 -10
  257. package/lib/components/Tooltip/index.d.ts +0 -2
  258. package/lib/components/Tooltip/tooltip.enums.d.ts +0 -6
  259. package/lib/components/TreeView/TreeItem.d.ts +0 -14
  260. package/lib/components/TreeView/TreeView.d.ts +0 -2
  261. package/lib/components/TreeView/index.d.ts +0 -2
  262. package/lib/components/Typography/Typography.d.ts +0 -12
  263. package/lib/components/Typography/index.d.ts +0 -1
  264. package/lib/components/component.enums.d.ts +0 -26
  265. package/lib/components/component.interfaces.d.ts +0 -18
  266. package/lib/components/index.d.ts +0 -46
  267. package/lib/hooks/index.d.ts +0 -7
  268. package/lib/hooks/useConstructor.d.ts +0 -1
  269. package/lib/hooks/useCssClasses.d.ts +0 -1
  270. package/lib/hooks/useDebounce.d.ts +0 -2
  271. package/lib/hooks/useHover.d.ts +0 -2
  272. package/lib/hooks/useMobileDetect.d.ts +0 -3
  273. package/lib/hooks/useOnDestroy.d.ts +0 -1
  274. package/lib/hooks/useWindowSize.d.ts +0 -5
  275. package/lib/icons/CaretDownSolidIcon.d.ts +0 -2
  276. package/lib/icons/CheckSolidIcon.d.ts +0 -2
  277. package/lib/icons/CheckSquareRegularIcon.d.ts +0 -2
  278. package/lib/icons/ChevronDownSolidIcon.d.ts +0 -2
  279. package/lib/icons/ChevronLeftSolidIcon.d.ts +0 -2
  280. package/lib/icons/ChevronRightSolidIcon.d.ts +0 -2
  281. package/lib/icons/ChevronUpSolidIcon.d.ts +0 -2
  282. package/lib/icons/CircleSolidIcon.d.ts +0 -2
  283. package/lib/icons/HomeSolidIcon.d.ts +0 -2
  284. package/lib/icons/PlusSolidIcon.d.ts +0 -2
  285. package/lib/icons/SpinnerSolidIcon.d.ts +0 -2
  286. package/lib/icons/SquareRegularIcon.d.ts +0 -2
  287. package/lib/icons/TimesCircleSolidIcon.d.ts +0 -2
  288. package/lib/icons/TimesSolidIcon.d.ts +0 -2
  289. package/lib/icons/index.d.ts +0 -14
  290. package/lib/index.d.ts +0 -4
  291. package/lib/interfaces/index.d.ts +0 -1
  292. package/lib/interfaces/interfaces.d.ts +0 -3
  293. package/vite.config.d.ts +0 -2
Binary file
Binary file
package/favicon.ico ADDED
Binary file
package/favicon.svg ADDED
@@ -0,0 +1,23 @@
1
+ <?xml version="1.0" encoding="UTF-8" standalone="no"?>
2
+ <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
3
+ <svg width="100%" height="100%" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
4
+ <g transform="matrix(2.89888,0,0,2.75989,-177.586,-144.468)">
5
+ <ellipse cx="149.57" cy="145.103" rx="88.31" ry="92.757" style="fill:rgb(63,81,181);"/>
6
+ </g>
7
+ <g id="users-solid.svg" transform="matrix(0.663018,0,0,0.663018,256,256)">
8
+ <g id="pencil-ruler-solid.svg" transform="matrix(1.01126,0,0,1.01126,-0.000781879,1.24345e-14)">
9
+ <g id="users-solid.svg1" serif:id="users-solid.svg">
10
+ <g id="pencil-ruler-solid.svg1" serif:id="pencil-ruler-solid.svg" transform="matrix(1,0,0,1,-256,-256)">
11
+ <clipPath id="_clip1">
12
+ <rect x="0" y="0" width="512" height="512"/>
13
+ </clipPath>
14
+ <g clip-path="url(#_clip1)">
15
+ <path d="M109.46,244.04L244.04,109.48L199.92,65.36L138.24,127.04C136.755,128.528 134.737,129.365 132.635,129.365C130.533,129.365 128.515,128.528 127.03,127.04L115.82,115.83C112.72,112.73 112.72,107.71 115.82,104.62L177.5,42.94L143.86,9.29C131.47,-3.1 111.39,-3.1 99,9.29L9.29,99C-3.09,111.39 -3.1,131.47 9.29,143.86L109.46,244.04ZM497.93,127.24C516.69,108.48 516.68,78.07 497.93,59.31L452.68,14.06C433.92,-4.7 403.5,-4.7 384.73,14.06L338.71,60.07L451.91,173.27L497.93,127.24ZM316.08,82.71L19.08,379.67L0.32,487.11C-2.21,501.6 10.41,514.22 24.91,511.67L132.36,492.83L429.28,195.9L316.08,82.71ZM502.71,368.14L469.07,334.5L407.39,396.18C404.29,399.28 399.27,399.28 396.18,396.18L384.97,384.97C381.88,381.87 381.88,376.85 384.97,373.76L446.65,312.08L402.51,267.94L267.93,402.5L368.14,502.7C380.53,515.09 400.61,515.09 413,502.7L502.71,413C515.1,400.61 515.1,380.53 502.71,368.14Z" style="fill:white;fill-rule:nonzero;"/>
16
+ </g>
17
+ </g>
18
+ <g id="pencil-ruler-solid.svg2" serif:id="pencil-ruler-solid.svg">
19
+ </g>
20
+ </g>
21
+ </g>
22
+ </g>
23
+ </svg>
package/index.html ADDED
@@ -0,0 +1,24 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
6
+ <meta name="description" content="handcrafted react components written in Typescript inspired by Material Design" />
7
+ <meta name="msapplication-TileColor" content="#2b5797" />
8
+ <meta name="theme-color" content="#f8f9fa" />
9
+
10
+ <title>react-asc showcase</title>
11
+
12
+ <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png" />
13
+ <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
14
+ <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
15
+ <link rel="mask-icon" href="safari-pinned-tab.svg" color="#f8f9fa" />
16
+ <script type="module" crossorigin src="/assets/index-5bb661b4.js"></script>
17
+ <link rel="stylesheet" href="/assets/index-b3809a2b.css">
18
+ <link rel="manifest" href="/manifest.webmanifest"></head>
19
+
20
+ <body>
21
+ <div id="root"></div>
22
+
23
+ </body>
24
+ </html>
@@ -0,0 +1 @@
1
+ {"name":"react-asc","short_name":"react-asc","start_url":".","display":"standalone","background_color":"#f5f6fa","lang":"en","scope":"/","description":"handcrafted react components written in Typescript inspired by Material Design","icons":[{"src":"pwa-192x192.png","sizes":"192x192","type":"image/png"},{"src":"pwa-512x512.png","sizes":"512x512","type":"image/png"},{"src":"pwa-512x512.png","sizes":"512x512","type":"image/png","purpose":"any maskable"}],"theme_color":"#f8f9fa"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-asc",
3
- "version": "25.8.2",
3
+ "version": "25.10.0",
4
4
  "description": "handcrafted react components",
5
5
  "main": "index.js",
6
6
  "module": "index.es.js",
@@ -15,6 +15,12 @@
15
15
  "modern-normalize": "2.0.0",
16
16
  "react-calendar": "4.2.1"
17
17
  },
18
+ "peerDependencies": {
19
+ "@types/file-saver": "^2.0.5",
20
+ "@types/papaparse": "^5.3.8",
21
+ "file-saver": "^2.0.5",
22
+ "papaparse": "^5.4.1"
23
+ },
18
24
  "scripts": {
19
25
  "pub": "npm publish --access public"
20
26
  },
Binary file
Binary file
package/robots.txt ADDED
@@ -0,0 +1,3 @@
1
+ # https://www.robotstxt.org/robotstxt.html
2
+ User-agent: *
3
+ Disallow:
@@ -0,0 +1 @@
1
+ An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task.
@@ -0,0 +1,14 @@
1
+ // default AppBar
2
+ <Alert>
3
+ some alert text
4
+ </Alert>
5
+
6
+ // color
7
+ <Alert color={COLOR.primary}>
8
+ some alert text
9
+ </Alert>
10
+
11
+ // variant
12
+ <Alert variant={VARIANT.contained}>
13
+ some alert text
14
+ </Alert>
@@ -0,0 +1 @@
1
+ The App bar displays information and actions relating to the current screen.
@@ -0,0 +1,8 @@
1
+ // default AppBar
2
+ <AppBar />
3
+
4
+ // setting color
5
+ <AppBar color={COLOR.light} />
6
+
7
+ // setting shadow
8
+ <AppBar shadow={false} />
@@ -0,0 +1 @@
1
+ The autocomplete is a normal text input enhanced by a panel of suggested options.
@@ -0,0 +1,49 @@
1
+ const AutoCompletePageBase = () => {
2
+
3
+ const [options, setOptions] = useState<Array<ISelectOption>>([]);
4
+
5
+ const handleOnSelect = (e: ISelectOption) => {
6
+ snackbarService.show(`value changed: ${e.label}`);
7
+ }
8
+
9
+ const handleOnChange = (e: string | undefined) => {
10
+ setValue(e as string);
11
+
12
+ const oldOptions = options;
13
+ const newOptions: Array<ISelectOption> = [
14
+ { value: "1", label: 'one' },
15
+ { value: "2", label: 'two' },
16
+ { value: "3", label: 'three' },
17
+ { value: "4", label: 'four' },
18
+ { value: "5", label: 'five' },
19
+ { value: "6", label: 'six' },
20
+ { value: "7", label: 'seven' },
21
+ { value: "8", label: 'eight' },
22
+ { value: "9", label: 'nine' },
23
+ { value: "10", label: 'ten' },
24
+ { value: "11", label: 'eleven' },
25
+ { value: "12", label: 'twelve' },
26
+ { value: "13", label: 'thirteen' },
27
+ { value: "14", label: 'fourteen' },
28
+ { value: "15", label: 'fifteen' },
29
+ { value: "16", label: 'sixteen' },
30
+ { value: "17", label: 'seventeen' },
31
+ { value: "18", label: 'eighteen' },
32
+ { value: "19", label: 'nineteen' },
33
+ { value: "20", label: 'twenty' },
34
+ ];
35
+
36
+ const filteredNewOptions = newOptions.filter(option => oldOptions.map(o => o.value).indexOf(option.value) < 0);
37
+ setOptions(options.concat(filteredNewOptions));
38
+ }
39
+
40
+ return (
41
+ <AutoComplete
42
+ options={options}
43
+ onSelect={handleOnSelect}
44
+ onChange={handleOnChange}
45
+ value={value}
46
+ />
47
+ );
48
+
49
+ }
@@ -0,0 +1 @@
1
+ The backdrop component is used to provide emphasis on a particular element or parts of it.
@@ -0,0 +1,11 @@
1
+ <Button onClick={() => setIsShow(!isShow)}>
2
+ {isShow ? 'hide' : 'show'}
3
+ </Button>
4
+
5
+ <div id="backdrop-container" style={{ height: '300px', position: 'relative' }}>
6
+ show backdrop
7
+ </div>
8
+
9
+ {isShow &&
10
+ <Backdrop target={document.body.querySelector('#backdrop-container') as HTMLElement} />
11
+ }
@@ -0,0 +1 @@
1
+ Badge generates a small badge to the top-right of its child(ren).
@@ -0,0 +1,8 @@
1
+ <Badge
2
+ color={COLOR.accent}
3
+ content={10}
4
+ >
5
+ <Icon>
6
+ <HomeSolidIcon />
7
+ </Icon>
8
+ </Badge>
@@ -0,0 +1 @@
1
+ Badge generates a small badge to the top-right of its child(ren).
@@ -0,0 +1,5 @@
1
+ <Breadcrumb>
2
+ <BreadcrumbItem path="/home">Home</BreadcrumbItem>
3
+ <BreadcrumbItem path="/library">Library</BreadcrumbItem>
4
+ <BreadcrumbItem path="/" isActive>Data</BreadcrumbItem>
5
+ </Breadcrumb>
@@ -0,0 +1 @@
1
+ Button is a native &lt;button&gt; for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
@@ -0,0 +1,44 @@
1
+ // simple button
2
+ <Button>
3
+ I am a button
4
+ </Button>
5
+
6
+ // color
7
+ <Button color={COLOR.primary}>
8
+ primary button
9
+ </Button>
10
+
11
+ // block
12
+ <Button block>
13
+ block button
14
+ </Button>
15
+
16
+ // isActive
17
+ <Button isActive>
18
+ active button
19
+ </Button>
20
+
21
+ // isRounded
22
+ <Button isRounded>
23
+ rounded button
24
+ </Button>
25
+
26
+ // showStartIcon
27
+ <Button showStartIcon>
28
+ starticon button
29
+ </Button>
30
+
31
+ // showEndIcon
32
+ <Button showEndIcon>
33
+ endIcon button
34
+ </Button>
35
+
36
+ // shadow
37
+ <Button shadow>
38
+ shadow button
39
+ </Button>
40
+
41
+ // disabled
42
+ <Button disabled>
43
+ I am a button
44
+ </Button>
@@ -0,0 +1 @@
1
+ The ButtonGroup component can be used to group related buttons.
@@ -0,0 +1,5 @@
1
+ <ButtonGroup>
2
+ <Button>some button</Button>
3
+ <Button>some button</Button>
4
+ <Button>some button</Button>
5
+ </ButtonGroup>
@@ -0,0 +1 @@
1
+ Cards contain content and actions about a single subject.
@@ -0,0 +1,9 @@
1
+ <Card>
2
+ <CardBody>
3
+ <CardTitle>Title</CardTitle>
4
+ <CardSubtitle>SubTitle</CardSubtitle>
5
+ <CardText>
6
+ some card text
7
+ </CardText>
8
+ </CardBody>
9
+ </Card>
@@ -0,0 +1 @@
1
+ Checkboxes allow the user to select one or more items from a set.
@@ -0,0 +1 @@
1
+ <Checkbox onChange={handleChange} />
@@ -0,0 +1 @@
1
+ Chips are compact elements that represent an input, attribute, or action.
@@ -0,0 +1,3 @@
1
+ <Chip onClick={handleClick}>
2
+ some label
3
+ </Chip>
@@ -0,0 +1,38 @@
1
+ // Define some css transition
2
+
3
+ .hidden {
4
+ display: none;
5
+ }
6
+
7
+ .fade-enter,
8
+ .fade-leave {
9
+ transition: all 1s ease;
10
+ }
11
+
12
+ .fade-enter-start,
13
+ .fade-leave-end {
14
+ opacity: 0;
15
+ }
16
+
17
+ .fade-enter-end,
18
+ .fade-leave-start {
19
+ opacity: 1;
20
+ }
21
+
22
+
23
+ // use the component
24
+
25
+ <CssTransition show={isShow} className="fade">
26
+ <div>
27
+ some text
28
+ </div>
29
+ </CssTransition>
30
+
31
+
32
+ // toggle the state
33
+ // needs to be undefined on start
34
+ const [isShow, setIsShow] = useState<boolean | undefined>(undefined);
35
+
36
+ <Button onClick={() => setIsShow(!isShow)}>
37
+ toggle css transition
38
+ </Button>
@@ -0,0 +1,8 @@
1
+ // default
2
+ <DateSelect />
3
+
4
+ // year range and date
5
+ <DateSelect
6
+ yearConfig={{ from: 2000, to: 2010 }}
7
+ value={ new Date(2001, 11, 30) }
8
+ />
@@ -0,0 +1,13 @@
1
+ <Button onClick={() => handleClick()}>
2
+ show drawer
3
+ </Button>
4
+
5
+ {isVisible &&
6
+ <Drawer
7
+ position={settingValues.position}
8
+ permanent={settingValues.permanent}
9
+ onClickBackdrop={handleClick}
10
+ >
11
+ some drawer content
12
+ </Drawer>
13
+ }
@@ -0,0 +1,40 @@
1
+ // Default
2
+ <div>
3
+ <ExpansionPanel header={'header 1'}>
4
+ Some Content 1
5
+ </ExpansionPanel>
6
+ <ExpansionPanel header={'header 2'} isExpanded={true}>
7
+ Some Content 2
8
+ </ExpansionPanel>
9
+ <ExpansionPanel header={'header 3'}>
10
+ Some Content 3
11
+ </ExpansionPanel>
12
+ </div>
13
+
14
+ // Controlled ExpansionPanel
15
+ const [expanded, setExpanded] = React.useState<string | false>(false);
16
+
17
+ const handleChange = (panelKey: string) => (event: React.MouseEvent, isExpanded: boolean) => {
18
+ setExpanded(isExpanded ? panelKey : false);
19
+ };
20
+
21
+ <div>
22
+ <ExpansionPanel
23
+ header={'header 1'}
24
+ onChange={handleChange('panel1')}
25
+ isExpanded={expanded === 'panel1'}>
26
+ Some Content 1
27
+ </ExpansionPanel>
28
+ <ExpansionPanel
29
+ header={'header 2'}
30
+ onChange={handleChange('panel2')}
31
+ isExpanded={expanded === 'panel2'}>
32
+ Some Content 2
33
+ </ExpansionPanel>
34
+ <ExpansionPanel
35
+ header={'header 3'}
36
+ onChange={handleChange('panel3')}
37
+ isExpanded={expanded === 'panel3'}>
38
+ Some Content 3
39
+ </ExpansionPanel>
40
+ </div>
@@ -0,0 +1 @@
1
+ <FileInput onChange={handleOnChange} />
@@ -0,0 +1,4 @@
1
+ <FloatingActionButton
2
+ onClick={handleClick}
3
+ icon={<HomeSolidIcon />}
4
+ />
@@ -0,0 +1,6 @@
1
+ <Form
2
+ ref={myForm}
3
+ controls={controls}
4
+ onSubmit={onFormSubmit}
5
+ onChange={onFormChange}
6
+ />
@@ -0,0 +1,5 @@
1
+ <Row>
2
+ <Column>col 1</Column>
3
+ <Column>col 2</Column>
4
+ <Column>col 3</Column>
5
+ </Row>
@@ -0,0 +1 @@
1
+ The useConstructor hook will be fired once a component is initialised
@@ -0,0 +1,5 @@
1
+ const MyComponent = () => {
2
+ useConstructor(() => {
3
+ // do something on init
4
+ });
5
+ }
@@ -0,0 +1,3 @@
1
+ The useDebounce hook simulates a throttling of a specific timeout.
2
+ For example, an input immediately triggers the onChange.
3
+ To immediately suppress a specific action you can "listen" to the change of a property bound to an input.
@@ -0,0 +1,17 @@
1
+ const MyComponet = () => {
2
+ const [searchText, setSearchText] = useState<string | undefined>('');
3
+
4
+ useDebounce(
5
+ () => { onChange && onChange(searchText); },
6
+ debounce,
7
+ [searchText]
8
+ );
9
+
10
+ const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
11
+ setSearchText(e.target.value);
12
+ }
13
+
14
+ return (
15
+ <input type="text" onChange={handleOnChange} />
16
+ );
17
+ }
@@ -0,0 +1,11 @@
1
+ const MyComponent = () => {
2
+ const [hoverRef, isHovered] = useHover();
3
+
4
+ return (
5
+ <div ref={hoverRef as any}>
6
+ <span style={{ color: isHovered ? 'red' : 'green' }}>
7
+ some text
8
+ </span>
9
+ </div>
10
+ );
11
+ }
@@ -0,0 +1,2 @@
1
+ The useMobileDetect hook will listen to window screen size changes using useWindowSize hook.
2
+ It will fire if the screen width is below 640px.
@@ -0,0 +1,11 @@
1
+ const MyComponent = () => {
2
+ const { isMobile } = useMobileDetect();
3
+
4
+ useEffect(() => {
5
+ // listen to screensize change
6
+ }, [isMobile]);
7
+
8
+ return (
9
+ { isMobile ? 'mobile screen size' : 'no mobile screen size' }
10
+ );
11
+ }
@@ -0,0 +1 @@
1
+ The useOnDestroy hook will be fired once a component is unmounted.
@@ -0,0 +1,5 @@
1
+ const MyComponent = () => {
2
+ useOnDestroy(() => {
3
+ // do something on component unmount
4
+ });
5
+ }
@@ -0,0 +1 @@
1
+ Store a previous state to compare it.
@@ -0,0 +1,14 @@
1
+ const MyComponent = () => {
2
+ const [id, setId] = useState<string>('');
3
+ const prevId: string = usePrevious(id);
4
+
5
+ useEffect(() => {
6
+ if (id !== prevId) {
7
+ // doSomething...
8
+ }
9
+ }, [id]);
10
+
11
+ return (
12
+ ...
13
+ );
14
+ }
@@ -0,0 +1,2 @@
1
+ Listen to screensize changes.
2
+ The callback will provide width and height of the changed screensize.
@@ -0,0 +1,11 @@
1
+ const MyComponent = () => {
2
+ const windowSize = useWindowSize();
3
+
4
+ useEffect(() => {
5
+ windowSize && checkIsMobile(windowSize.height, windowSize.width);
6
+ }, [windowSize]);
7
+
8
+ return (
9
+ <></>
10
+ );
11
+ }
@@ -0,0 +1,3 @@
1
+ <Icon>
2
+ <HomeSolidIcon />
3
+ </Icon>
@@ -0,0 +1,5 @@
1
+ ## Basic
2
+
3
+ <IconButton
4
+ icon={<HomeSolidIcon />}
5
+ />
@@ -0,0 +1 @@
1
+ <Link>some link text</Link>