stargazer-ui 1.5.21 → 1.5.23

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 (377) hide show
  1. package/.babelrc.json +10 -0
  2. package/.eslintrc.cjs +18 -0
  3. package/.gitattributes +2 -0
  4. package/LICENSE +21 -0
  5. package/dev/index.html +16 -0
  6. package/dev/index.jsx +46 -0
  7. package/dev/index.scss +74 -0
  8. package/dev/pages/ButtonPage.jsx +44 -0
  9. package/dev/pages/CardPage.jsx +81 -0
  10. package/dev/pages/DropdownPage.jsx +32 -0
  11. package/dev/pages/FormPage.jsx +163 -0
  12. package/dev/pages/ListPage.jsx +52 -0
  13. package/dev/pages/ModalPage.jsx +38 -0
  14. package/dev/pages/OverlayPage.jsx +39 -0
  15. package/dev/pages/components.jsx +19 -0
  16. package/dev/stargazerui.css +3762 -0
  17. package/dev/stargazerui.css.map +1 -0
  18. package/dev/test.jsx +87 -0
  19. package/package.json +79 -1
  20. package/rollup.config.js +140 -0
  21. package/scripts/writePackageJsons.js +42 -0
  22. package/src/Bar/Bar.tsx +0 -0
  23. package/src/Bar/Bar.type.ts +9 -0
  24. package/src/Bar/index.ts +0 -0
  25. package/src/Button/Button.tsx +20 -0
  26. package/src/Button/Button.types.ts +8 -0
  27. package/src/Button/index.ts +3 -0
  28. package/src/ButtonGroup/ButtonGroup.tsx +14 -0
  29. package/src/ButtonGroup/ButtonGroup.types.ts +8 -0
  30. package/src/ButtonGroup/index.ts +3 -0
  31. package/src/Card/Card.tsx +70 -0
  32. package/src/Card/Card.types.ts +33 -0
  33. package/src/Card/index.ts +3 -0
  34. package/src/CloseButton/CloseButton.tsx +14 -0
  35. package/src/CloseButton/CloseButton.types.ts +6 -0
  36. package/src/CloseButton/index.ts +3 -0
  37. package/src/Dropdown/Dropdown.tsx +441 -0
  38. package/src/Dropdown/Dropdown.types.ts +60 -0
  39. package/src/Dropdown/index.ts +4 -0
  40. package/src/FileUploadButton/FileUploadButton.tsx +27 -0
  41. package/src/FileUploadButton/FileUploadButton.types.ts +9 -0
  42. package/src/FileUploadButton/index.ts +3 -0
  43. package/src/FloatingLabel/FloatingLabel.tsx +22 -0
  44. package/src/FloatingLabel/FloatingLabel.types.ts +11 -0
  45. package/src/FloatingLabel/index.ts +3 -0
  46. package/src/Form/Form.tsx +399 -0
  47. package/src/Form/Form.types.ts +169 -0
  48. package/src/Form/FormSelect.tsx +620 -0
  49. package/src/Form/index.ts +4 -0
  50. package/src/InputGroup/InputGroup.tsx +46 -0
  51. package/src/InputGroup/InputGroup.types.ts +22 -0
  52. package/src/InputGroup/index.ts +4 -0
  53. package/src/List/List.tsx +112 -0
  54. package/src/List/List.types.ts +34 -0
  55. package/src/List/index.ts +4 -0
  56. package/src/Modal/Modal.tsx +229 -0
  57. package/src/Modal/Modal.types.ts +49 -0
  58. package/src/Modal/index.ts +4 -0
  59. package/src/Nav/Nav.tsx +43 -0
  60. package/src/Nav/Nav.types.ts +21 -0
  61. package/src/Nav/index.ts +4 -0
  62. package/src/NavBar/Navbar.tsx +57 -0
  63. package/src/NavBar/Navbar.types.ts +24 -0
  64. package/src/NavBar/index.ts +4 -0
  65. package/src/NavDropdown/NavDropdown.tsx +93 -0
  66. package/src/NavDropdown/NavDropdown.types.ts +7 -0
  67. package/src/NavDropdown/index.ts +3 -0
  68. package/src/Overlay/Overlay.tsx +305 -0
  69. package/src/Overlay/Overlay.types.ts +24 -0
  70. package/{Overlay/index.d.ts → src/Overlay/index.ts} +3 -3
  71. package/src/Popout/Popout.tsx +155 -0
  72. package/src/Popout/Popout.types.ts +42 -0
  73. package/src/Popout/index.ts +3 -0
  74. package/src/Spinner/Spinner.tsx +15 -0
  75. package/src/Spinner/Spinner.types.ts +7 -0
  76. package/src/Spinner/index.ts +3 -0
  77. package/src/Table/Table.tsx +16 -0
  78. package/src/Table/Table.types.ts +9 -0
  79. package/src/Table/index.ts +3 -0
  80. package/src/Tabs/Tabs.tsx +233 -0
  81. package/src/Tabs/Tabs.types.ts +52 -0
  82. package/src/Tabs/index.ts +3 -0
  83. package/src/ToggleButton/ToggleButton.tsx +21 -0
  84. package/src/ToggleButton/ToggleButton.types.ts +8 -0
  85. package/src/ToggleButton/index.ts +3 -0
  86. package/src/assets/tooltip-pointer.svg +3 -0
  87. package/src/assets/warning.svg +39 -0
  88. package/{hooks/index.d.ts → src/hooks/index.ts} +7 -6
  89. package/src/hooks/useClassname.ts +5 -0
  90. package/src/hooks/useDraggable.ts +186 -0
  91. package/src/hooks/useKeepElementFocused.ts +37 -0
  92. package/src/hooks/useQueryParams.ts +12 -0
  93. package/src/hooks/useScreenSize.ts +24 -0
  94. package/src/index.ts +21 -0
  95. package/src/styles/_Card.scss +166 -0
  96. package/src/styles/_CloseButton.scss +51 -0
  97. package/src/styles/_CustomButton.scss +134 -0
  98. package/src/styles/_Dropdown.scss +127 -0
  99. package/src/styles/_FloatingLabel.scss +56 -0
  100. package/src/styles/_Forms.scss +7 -0
  101. package/src/styles/_Grid.scss +178 -0
  102. package/src/styles/_InputGroup.scss +71 -0
  103. package/src/styles/_List.scss +62 -0
  104. package/src/styles/_Modal.scss +234 -0
  105. package/src/styles/_ModalOld.scss +242 -0
  106. package/src/styles/_Nav.scss +36 -0
  107. package/src/styles/_NavBar.scss +116 -0
  108. package/src/styles/_NavDropdown.scss +33 -0
  109. package/src/styles/_OffCanvas.scss +260 -0
  110. package/src/styles/_OverLay.scss +79 -0
  111. package/src/styles/_Popout.scss +75 -0
  112. package/src/styles/_Resizable.scss +64 -0
  113. package/src/styles/_Spinner.scss +19 -0
  114. package/src/styles/_Table.scss +34 -0
  115. package/src/styles/_Tabs.scss +129 -0
  116. package/src/styles/_colors.scss +510 -0
  117. package/src/styles/_components.scss +41 -0
  118. package/src/styles/_functions.scss +134 -0
  119. package/src/styles/_mixins.scss +26 -0
  120. package/src/styles/_reset.scss +239 -0
  121. package/src/styles/_utilities.scss +2480 -0
  122. package/src/styles/_variables.scss +164 -0
  123. package/src/styles/forms/_FormCheck.scss +270 -0
  124. package/src/styles/forms/_FormControl.scss +135 -0
  125. package/src/styles/forms/_FormGroup.scss +26 -0
  126. package/src/styles/forms/_FormLabel.scss +3 -0
  127. package/src/styles/forms/_FormSelect.scss +222 -0
  128. package/src/styles/forms/_FormSlider.scss +116 -0
  129. package/src/styles/forms/_FormText.scss +6 -0
  130. package/{utils/BaseTypes.d.ts → src/utils/BaseTypes.ts} +32 -25
  131. package/src/utils/ContrastingColor.ts +25 -0
  132. package/src/utils/CreateSyntheticEvent.ts +30 -0
  133. package/src/utils/FileImportExport.js +50 -0
  134. package/src/utils/IsInputKey.ts +18 -0
  135. package/src/utils/MergeClassnames.ts +5 -0
  136. package/src/utils/MergeRefs.ts +12 -0
  137. package/src/utils/createFastContext.tsx +119 -0
  138. package/src/utils/index.ts +4 -0
  139. package/src/vite-env.d.ts +1 -0
  140. package/tsconfig-build.json +4 -0
  141. package/tsconfig.json +79 -0
  142. package/tsconfig.node.json +10 -0
  143. package/types/BaseTypes.d.ts +19 -0
  144. package/{Button → types/components/Button}/Button.types.d.ts +2 -1
  145. package/types/components/Button/index.d.ts +1 -0
  146. package/{Card → types/components/Card}/Card.d.ts +12 -12
  147. package/{Card → types/components/Card}/Card.types.d.ts +1 -3
  148. package/types/components/Card/index.d.ts +1 -0
  149. package/{CloseButton → types/components/CloseButton}/CloseButton.types.d.ts +1 -1
  150. package/types/components/CloseButton/index.d.ts +1 -0
  151. package/types/components/Dropdown/Dropdown.d.ts +71 -0
  152. package/{Dropdown → types/components/Dropdown}/Dropdown.types.d.ts +12 -13
  153. package/types/components/Dropdown/index.d.ts +1 -0
  154. package/{FloatingLabel → types/components/FloatingLabel}/FloatingLabel.types.d.ts +1 -1
  155. package/types/components/FloatingLabel/index.d.ts +1 -0
  156. package/types/components/Form/Form.d.ts +17 -0
  157. package/types/components/Form/Form.types.d.ts +50 -0
  158. package/types/components/Form/index.d.ts +1 -0
  159. package/types/components/InputGroup/InputGroup.d.ts +6 -0
  160. package/types/components/InputGroup/InputGroup.types.d.ts +10 -0
  161. package/types/components/InputGroup/index.d.ts +1 -0
  162. package/{Modal → types/components/Modal}/Modal.d.ts +19 -19
  163. package/{Modal → types/components/Modal}/Modal.types.d.ts +2 -3
  164. package/types/components/Modal/index.d.ts +1 -0
  165. package/{Nav → types/components/Nav}/Nav.d.ts +12 -12
  166. package/{Nav → types/components/Nav}/Nav.types.d.ts +1 -1
  167. package/types/components/Nav/index.d.ts +1 -0
  168. package/{NavBar → types/components/NavBar}/Navbar.d.ts +8 -7
  169. package/{NavBar → types/components/NavBar}/Navbar.types.d.ts +1 -2
  170. package/types/components/NavBar/index.d.ts +1 -0
  171. package/types/components/NavDropdown/NavDropdown.d.ts +35 -0
  172. package/{NavDropdown → types/components/NavDropdown}/NavDropdown.types.d.ts +1 -2
  173. package/types/components/NavDropdown/index.d.ts +1 -0
  174. package/{Popout → types/components/Popout}/Popout.d.ts +6 -6
  175. package/{Popout → types/components/Popout}/Popout.types.d.ts +1 -1
  176. package/types/components/Popout/index.d.ts +1 -0
  177. package/types/components/Spinner/index.d.ts +1 -0
  178. package/{Table → types/components/Table}/Table.types.d.ts +1 -1
  179. package/types/components/Table/index.d.ts +1 -0
  180. package/{Tabs → types/components/Tabs}/Tabs.types.d.ts +2 -12
  181. package/types/components/Tabs/index.d.ts +1 -0
  182. package/types/components/ToggleButton/ToggleButton.d.ts +9 -0
  183. package/types/components/ToggleButton/ToggleButton.types.d.ts +0 -0
  184. package/types/components/ToggleButton/index.d.ts +1 -0
  185. package/types/components/index.d.ts +16 -0
  186. package/types/index.d.ts +1 -0
  187. package/vite.config.js +57 -0
  188. package/vite.config.js.timestamp-1708777378490-e94428ceb2bf9.mjs +42 -0
  189. package/Bar/Bar.type.d.ts +0 -6
  190. package/Bar/index.js +0 -2
  191. package/Bar/index.js.map +0 -1
  192. package/Bar/package.json +0 -1
  193. package/Button/Button.js +0 -15
  194. package/Button/Button.js.map +0 -1
  195. package/Button/index.d.ts +0 -3
  196. package/Button/index.js +0 -7
  197. package/Button/index.js.map +0 -1
  198. package/Button/package.json +0 -1
  199. package/ButtonGroup/ButtonGroup.d.ts +0 -4
  200. package/ButtonGroup/ButtonGroup.js +0 -11
  201. package/ButtonGroup/ButtonGroup.js.map +0 -1
  202. package/ButtonGroup/ButtonGroup.types.d.ts +0 -7
  203. package/ButtonGroup/index.d.ts +0 -3
  204. package/ButtonGroup/index.js +0 -7
  205. package/ButtonGroup/index.js.map +0 -1
  206. package/ButtonGroup/package.json +0 -1
  207. package/Card/Card.js +0 -42
  208. package/Card/Card.js.map +0 -1
  209. package/Card/index.d.ts +0 -3
  210. package/Card/index.js +0 -7
  211. package/Card/index.js.map +0 -1
  212. package/Card/package.json +0 -1
  213. package/CloseButton/CloseButton.js +0 -11
  214. package/CloseButton/CloseButton.js.map +0 -1
  215. package/CloseButton/index.d.ts +0 -3
  216. package/CloseButton/index.js +0 -7
  217. package/CloseButton/index.js.map +0 -1
  218. package/CloseButton/package.json +0 -1
  219. package/Dropdown/Dropdown.d.ts +0 -39
  220. package/Dropdown/Dropdown.js +0 -380
  221. package/Dropdown/Dropdown.js.map +0 -1
  222. package/Dropdown/index.d.ts +0 -4
  223. package/Dropdown/index.js +0 -8
  224. package/Dropdown/index.js.map +0 -1
  225. package/Dropdown/package.json +0 -1
  226. package/FileUploadButton/FileUploadButton.d.ts +0 -4
  227. package/FileUploadButton/FileUploadButton.js +0 -20
  228. package/FileUploadButton/FileUploadButton.js.map +0 -1
  229. package/FileUploadButton/FileUploadButton.types.d.ts +0 -7
  230. package/FileUploadButton/index.d.ts +0 -3
  231. package/FileUploadButton/index.js +0 -7
  232. package/FileUploadButton/index.js.map +0 -1
  233. package/FileUploadButton/package.json +0 -1
  234. package/FloatingLabel/FloatingLabel.js +0 -15
  235. package/FloatingLabel/FloatingLabel.js.map +0 -1
  236. package/FloatingLabel/index.d.ts +0 -3
  237. package/FloatingLabel/index.js +0 -7
  238. package/FloatingLabel/index.js.map +0 -1
  239. package/FloatingLabel/package.json +0 -1
  240. package/Form/Form.d.ts +0 -37
  241. package/Form/Form.js +0 -227
  242. package/Form/Form.js.map +0 -1
  243. package/Form/Form.types.d.ts +0 -159
  244. package/Form/FormSelect.d.ts +0 -12
  245. package/Form/FormSelect.js +0 -492
  246. package/Form/FormSelect.js.map +0 -1
  247. package/Form/index.d.ts +0 -4
  248. package/Form/index.js +0 -8
  249. package/Form/index.js.map +0 -1
  250. package/Form/package.json +0 -1
  251. package/InputGroup/InputGroup.d.ts +0 -7
  252. package/InputGroup/InputGroup.js +0 -31
  253. package/InputGroup/InputGroup.js.map +0 -1
  254. package/InputGroup/InputGroup.types.d.ts +0 -17
  255. package/InputGroup/index.d.ts +0 -4
  256. package/InputGroup/index.js +0 -7
  257. package/InputGroup/index.js.map +0 -1
  258. package/InputGroup/package.json +0 -1
  259. package/List/List.d.ts +0 -14
  260. package/List/List.js +0 -77
  261. package/List/List.js.map +0 -1
  262. package/List/List.types.d.ts +0 -28
  263. package/List/index.d.ts +0 -3
  264. package/List/index.js +0 -7
  265. package/List/index.js.map +0 -1
  266. package/List/package.json +0 -1
  267. package/Modal/Modal.js +0 -157
  268. package/Modal/Modal.js.map +0 -1
  269. package/Modal/index.d.ts +0 -3
  270. package/Modal/index.js +0 -7
  271. package/Modal/index.js.map +0 -1
  272. package/Modal/package.json +0 -1
  273. package/Nav/Nav.js +0 -29
  274. package/Nav/Nav.js.map +0 -1
  275. package/Nav/index.d.ts +0 -4
  276. package/Nav/index.js +0 -7
  277. package/Nav/index.js.map +0 -1
  278. package/Nav/package.json +0 -1
  279. package/NavBar/Navbar.js +0 -36
  280. package/NavBar/Navbar.js.map +0 -1
  281. package/NavBar/index.d.ts +0 -4
  282. package/NavBar/index.js +0 -8
  283. package/NavBar/index.js.map +0 -1
  284. package/NavBar/package.json +0 -1
  285. package/NavDropdown/NavDropdown.d.ts +0 -19
  286. package/NavDropdown/NavDropdown.js +0 -75
  287. package/NavDropdown/NavDropdown.js.map +0 -1
  288. package/NavDropdown/index.d.ts +0 -3
  289. package/NavDropdown/index.js +0 -7
  290. package/NavDropdown/index.js.map +0 -1
  291. package/NavDropdown/package.json +0 -1
  292. package/Overlay/Overlay.d.ts +0 -4
  293. package/Overlay/Overlay.js +0 -241
  294. package/Overlay/Overlay.js.map +0 -1
  295. package/Overlay/Overlay.types.d.ts +0 -22
  296. package/Overlay/index.js +0 -7
  297. package/Overlay/index.js.map +0 -1
  298. package/Overlay/package.json +0 -1
  299. package/Popout/Popout.js +0 -111
  300. package/Popout/Popout.js.map +0 -1
  301. package/Popout/index.d.ts +0 -3
  302. package/Popout/index.js +0 -7
  303. package/Popout/index.js.map +0 -1
  304. package/Popout/package.json +0 -1
  305. package/Spinner/Spinner.js +0 -11
  306. package/Spinner/Spinner.js.map +0 -1
  307. package/Spinner/index.d.ts +0 -3
  308. package/Spinner/index.js +0 -7
  309. package/Spinner/index.js.map +0 -1
  310. package/Spinner/package.json +0 -1
  311. package/Table/Table.js +0 -12
  312. package/Table/Table.js.map +0 -1
  313. package/Table/index.d.ts +0 -3
  314. package/Table/index.js +0 -7
  315. package/Table/index.js.map +0 -1
  316. package/Table/package.json +0 -1
  317. package/Tabs/Tabs.js +0 -162
  318. package/Tabs/Tabs.js.map +0 -1
  319. package/Tabs/index.d.ts +0 -3
  320. package/Tabs/index.js +0 -7
  321. package/Tabs/index.js.map +0 -1
  322. package/Tabs/package.json +0 -1
  323. package/ToggleButton/ToggleButton.d.ts +0 -4
  324. package/ToggleButton/ToggleButton.js +0 -18
  325. package/ToggleButton/ToggleButton.js.map +0 -1
  326. package/ToggleButton/ToggleButton.types.d.ts +0 -7
  327. package/ToggleButton/index.d.ts +0 -3
  328. package/ToggleButton/index.js +0 -7
  329. package/ToggleButton/index.js.map +0 -1
  330. package/ToggleButton/package.json +0 -1
  331. package/hooks/index.js +0 -7
  332. package/hooks/index.js.map +0 -1
  333. package/hooks/package.json +0 -1
  334. package/hooks/useClassname.d.ts +0 -2
  335. package/hooks/useClassname.js +0 -7
  336. package/hooks/useClassname.js.map +0 -1
  337. package/hooks/useDraggable.d.ts +0 -23
  338. package/hooks/useDraggable.js +0 -147
  339. package/hooks/useDraggable.js.map +0 -1
  340. package/hooks/useKeepElementFocused.d.ts +0 -2
  341. package/hooks/useKeepElementFocused.js +0 -37
  342. package/hooks/useKeepElementFocused.js.map +0 -1
  343. package/hooks/useQueryParams.d.ts +0 -2
  344. package/hooks/useQueryParams.js +0 -13
  345. package/hooks/useQueryParams.js.map +0 -1
  346. package/hooks/useScreenSize.d.ts +0 -5
  347. package/hooks/useScreenSize.js +0 -21
  348. package/hooks/useScreenSize.js.map +0 -1
  349. package/index.d.ts +0 -19
  350. package/index.js +0 -20
  351. package/index.js.map +0 -1
  352. package/styles/stargazerui.css +0 -6658
  353. package/styles/stargazerui.css.map +0 -1
  354. package/utils/ContrastingColor.d.ts +0 -1
  355. package/utils/CreateSyntheticEvent.d.ts +0 -2
  356. package/utils/CreateSyntheticEvent.js +0 -33
  357. package/utils/CreateSyntheticEvent.js.map +0 -1
  358. package/utils/IsInputKey.d.ts +0 -7
  359. package/utils/IsInputKey.js +0 -20
  360. package/utils/IsInputKey.js.map +0 -1
  361. package/utils/MergeClassnames.d.ts +0 -2
  362. package/utils/MergeClassnames.js +0 -7
  363. package/utils/MergeClassnames.js.map +0 -1
  364. package/utils/MergeRefs.d.ts +0 -1
  365. package/utils/MergeRefs.js +0 -16
  366. package/utils/MergeRefs.js.map +0 -1
  367. package/utils/createFastContext.d.ts +0 -16
  368. package/utils/createFastContext.js +0 -101
  369. package/utils/createFastContext.js.map +0 -1
  370. package/utils/index.d.ts +0 -4
  371. /package/{Button → types/components/Button}/Button.d.ts +0 -0
  372. /package/{CloseButton → types/components/CloseButton}/CloseButton.d.ts +0 -0
  373. /package/{FloatingLabel → types/components/FloatingLabel}/FloatingLabel.d.ts +0 -0
  374. /package/{Spinner → types/components/Spinner}/Spinner.d.ts +0 -0
  375. /package/{Spinner → types/components/Spinner}/Spinner.types.d.ts +0 -0
  376. /package/{Table → types/components/Table}/Table.d.ts +0 -0
  377. /package/{Tabs → types/components/Tabs}/Tabs.d.ts +0 -0
package/.babelrc.json ADDED
@@ -0,0 +1,10 @@
1
+ {
2
+ "presets": [
3
+ ["@babel/preset-env", { "modules": "umd" }],
4
+ "@babel/preset-react"
5
+ ],
6
+ "plugins": [
7
+ "@babel/plugin-proposal-class-properties",
8
+ "@babel/plugin-proposal-nullish-coalescing-operator"
9
+ ]
10
+ }
package/.eslintrc.cjs ADDED
@@ -0,0 +1,18 @@
1
+ module.exports = {
2
+ root: true,
3
+ env: { browser: true, es2020: true },
4
+ extends: [
5
+ 'eslint:recommended',
6
+ 'plugin:@typescript-eslint/recommended',
7
+ 'plugin:react-hooks/recommended',
8
+ ],
9
+ ignorePatterns: ['dist', '.eslintrc.cjs'],
10
+ parser: '@typescript-eslint/parser',
11
+ plugins: ['react-refresh'],
12
+ rules: {
13
+ 'react-refresh/only-export-components': [
14
+ 'warn',
15
+ { allowConstantExport: true },
16
+ ],
17
+ },
18
+ }
package/.gitattributes ADDED
@@ -0,0 +1,2 @@
1
+ # Auto detect text files and perform LF normalization
2
+ * text=auto
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2024 Xoror
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/dev/index.html ADDED
@@ -0,0 +1,16 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <script
5
+ crossOrigin="anonymous"
6
+ src="//unpkg.com/react-scan/dist/auto.global.js"
7
+ ></script>
8
+ <meta charset="UTF-8">
9
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
10
+ <title>Stargazer UI Test</title>
11
+ </head>
12
+ <body style="margin: 0">
13
+ <div id="root"></div>
14
+ <script type="module" src="/index.jsx"></script>
15
+ </body>
16
+ </html>
package/dev/index.jsx ADDED
@@ -0,0 +1,46 @@
1
+ import React from 'react'
2
+ import ReactDOM from 'react-dom/client'
3
+
4
+ //import "../dist/styles/stargazerui.css"
5
+ import "../src/styles/_components.scss"
6
+ import "./index.scss"
7
+
8
+ import Dropdown from '../src/Dropdown'
9
+ import Nav from "../src/Nav"
10
+ import Navbar from '../src/NavBar'
11
+
12
+ import { Component } from './test'
13
+
14
+ const App = () => {
15
+ return(
16
+ <>
17
+ <Navbar>
18
+ <Nav>
19
+ <Nav.Item>
20
+ <Nav.Link href="#">Home</Nav.Link>
21
+ </Nav.Item>
22
+ <Nav.Item>
23
+ <Nav.Link href="#">Test 2</Nav.Link>
24
+ </Nav.Item>
25
+ </Nav>
26
+ <Navbar.Brand className={"navigation-link"}>
27
+ Testing
28
+ </Navbar.Brand >
29
+ <Dropdown navDropdown={true} align='end' controlId='test-navdropdown' style={{marginLeft:"auto"}}>
30
+ <Dropdown.Item id="test-1">Test 1</Dropdown.Item>
31
+ <Dropdown.Item id="test-2">Test 2</Dropdown.Item>
32
+ <Dropdown.Item id="test-3">Test 3</Dropdown.Item>
33
+ <Dropdown.Item id="test-4">Test 4</Dropdown.Item>
34
+ </Dropdown>
35
+ </Navbar>
36
+ <Component />
37
+ </>
38
+ )
39
+ };
40
+
41
+ ReactDOM.createRoot(document.getElementById('root')).render(
42
+ <React.StrictMode>
43
+ <App />
44
+ </React.StrictMode>,
45
+ )
46
+
package/dev/index.scss ADDED
@@ -0,0 +1,74 @@
1
+ .sg-tabs-content {
2
+ h4 {
3
+ margin: 0;
4
+ padding-inline: 1.5rem;
5
+ padding-block: 1rem;
6
+ &:first-child {
7
+ padding-top: 0;
8
+ }
9
+ }
10
+ pre {
11
+ margin: 0;
12
+ padding: 0.5rem;
13
+ font-size: 0.75rem;
14
+ border: 1px solid white;
15
+ //max-width: 360px;
16
+ }
17
+ }
18
+ .code-block {
19
+ display: grid;
20
+ grid-template-columns: auto 1fr;
21
+ gap: 1rem;
22
+ }
23
+ .description-container {
24
+ padding-inline: 2rem;
25
+ margin-bottom: 1rem;
26
+ }
27
+ .container {
28
+ width: 100%;
29
+ display: grid;
30
+ row-gap: 1rem;
31
+ //place-items: center;
32
+ //grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
33
+ //grid-template-rows: 1fr 1fr;
34
+ padding-inline: 2rem;
35
+ }
36
+ .flex-display {
37
+ display: flex;
38
+ flex-direction: row;
39
+ flex-wrap: wrap;
40
+ row-gap: 1rem;
41
+ justify-content: space-around;
42
+ }
43
+
44
+ .dropdown-container {
45
+ display: flex;
46
+ flex-direction: row;
47
+ flex-wrap: wrap;
48
+ margin-inline: auto;
49
+ gap: 5rem;
50
+ }
51
+
52
+ .overlay-container {
53
+ margin-inline: auto;
54
+ }
55
+
56
+ .list-container {
57
+ display: grid;
58
+ place-items: center;
59
+ }
60
+
61
+ .fixed-navbar {
62
+ --_width: calc(100dvh*(16/9));
63
+ position: relative;
64
+ border: unset;
65
+ border-inline: 1px solid white;
66
+ background: unset;
67
+ background-color: unset;
68
+ width: var(--_width);
69
+ top: max(-100px, -1px * var(--scroll));
70
+ left: unset;
71
+ right: max(0px, (100vw - var(--_width)) / 2);
72
+ padding-right: 1rem;
73
+ background-color: transparent;
74
+ }
package/dev/pages/ButtonPage.jsx ADDED
@@ -0,0 +1,44 @@
1
+ import Button from "../../src/Button"
2
+ import ButtonGroup from "../../src/ButtonGroup"
3
+
4
+ import { CodeBlock } from "./components"
5
+
6
+ const CardPage = () => {
7
+ const code = `<ButtonGroup vertical={"boolean"}>
8
+ <Button variant={"variant 1"}>
9
+ Variant 1
10
+ </Button>
11
+ <Button variant={"variant 2"}>
12
+ Variant 2
13
+ </Button>
14
+ <Button variant={"variant 3"}>
15
+ Variant 3
16
+ </Button>
17
+ </ButtonGroup>`
18
+ return (
19
+ <>
20
+ <h4>Regular Buttons</h4>
21
+ <section className="container">
22
+ <CodeBlock code={code}>
23
+ <li>
24
+ Variants: string as "primary" (default), "secondary", "success", "info", "warning", "danger", "dark", "light"
25
+ </li>
26
+ </CodeBlock>
27
+ <div className="flex-display">
28
+ {["primary", "secondary", "success", "info", "warning", "danger", "dark", "light", "custom"].map((color, index) =>
29
+ <Button key={color} variant={color}>{color}</Button>
30
+ )}
31
+ </div>
32
+ <div className="flex-display">
33
+ <ButtonGroup>
34
+ {["primary", "secondary", "success", "info", "warning", "danger", "dark", "light"].map((color, index) =>
35
+ <Button key={color} variant={color}>{color}</Button>
36
+ )}
37
+ </ButtonGroup>
38
+ </div>
39
+ </section>
40
+ </>
41
+ )
42
+ }
43
+
44
+ export default CardPage
package/dev/pages/CardPage.jsx ADDED
@@ -0,0 +1,81 @@
1
+ import Card from "../../src/Card"
2
+ import { CodeBlock } from "./components"
3
+
4
+ const CardPage = () => {
5
+ const code = `<Card variant={string} inverted={boolean}>
6
+ <Card.Header>
7
+ <Card.Title>
8
+ Card
9
+ </Card.Title>
10
+ </Card.Header>
11
+ <Card.Body>
12
+ <Card.Text>
13
+ Testing the card text
14
+ </Card.Text>
15
+ </Card.Body>
16
+ <Card.Footer>
17
+ <Card.Text>
18
+ Test Footer
19
+ </Card.Text>
20
+ </Card.Footer>
21
+ </Card>`
22
+ return (
23
+ <>
24
+ <h4>Regular Cards</h4>
25
+ <section className="container">
26
+ <CodeBlock code={code}>
27
+ <li>
28
+ Variants: string as "primary" (default), "secondary", "success", "info", "warning", "danger", "dark", "light"
29
+ </li>
30
+ <li>
31
+ Inverted: boolean, makes them solid color (with a little gradient)
32
+ </li>
33
+ </CodeBlock>
34
+ <div className="flex-display">
35
+ {["primary", "secondary", "success", "info", "warning", "danger", "dark", "light"].map((color, index) =>
36
+ <Card key={color} variant={color}>
37
+ <Card.Header>
38
+ <Card.Title>
39
+ Card {color}
40
+ </Card.Title>
41
+ </Card.Header>
42
+ <Card.Body>
43
+ <Card.Text>
44
+ Testing the card text
45
+ </Card.Text>
46
+ </Card.Body>
47
+ <Card.Footer>
48
+ <Card.Text>
49
+ Test Footer
50
+ </Card.Text>
51
+ </Card.Footer>
52
+ </Card>
53
+ )}
54
+ </div>
55
+ <div className="flex-display">
56
+ {["primary", "secondary", "success", "info", "warning", "danger", "dark", "light"].map((color, index) =>
57
+ <Card key={color} variant={color} inverted={true}>
58
+ <Card.Header>
59
+ <Card.Title>
60
+ Inverted Card {color}
61
+ </Card.Title>
62
+ </Card.Header>
63
+ <Card.Body>
64
+ <Card.Text>
65
+ Testing the inverted card text
66
+ </Card.Text>
67
+ </Card.Body>
68
+ <Card.Footer>
69
+ <Card.Text>
70
+ Test Footer
71
+ </Card.Text>
72
+ </Card.Footer>
73
+ </Card>
74
+ )}
75
+ </div>
76
+ </section>
77
+ </>
78
+ )
79
+ }
80
+
81
+ export default CardPage
package/dev/pages/DropdownPage.jsx ADDED
@@ -0,0 +1,32 @@
1
+ import { Fragment } from "react"
2
+ import Dropdown from "../../src/Dropdown"
3
+
4
+ const DropdownPage = () => {
5
+ const dropPossible = ["down", "up", "right", "left"]
6
+ const alignPossible = ["start", "center", "end"]
7
+ return (
8
+ <>
9
+ {dropPossible.map(drop =>
10
+ <Fragment key={drop}>
11
+ <h4> Dropdown </h4>
12
+ <section className="dropdown-container">
13
+ {alignPossible.map(align =>
14
+ <Dropdown key={`drop-${drop}-${align}`} label={drop+" "+align} controlId={`drop-${drop}-${align}`} drop={drop} align={align}>
15
+ <Dropdown.Divider />
16
+ <Dropdown.Item style={{display:"none"}} id={`drop-${drop}-${align}-item-1`}>Test 1</Dropdown.Item>
17
+ <Dropdown.Item onClick={() => console.log("click")} id={`drop-${drop}-${align}-item-2`}>Test 2</Dropdown.Item>
18
+ <Dropdown.Divider />
19
+ <Dropdown.Item id={`drop-${drop}-${align}-item-3`}>Test 3</Dropdown.Item>
20
+ <Dropdown.Item id={`drop-${drop}-${align}-item-4`}>Test 4</Dropdown.Item>
21
+ <Dropdown.Divider />
22
+ </Dropdown>
23
+ )
24
+ }
25
+ </section>
26
+ </Fragment>
27
+ )}
28
+ </>
29
+ )
30
+ }
31
+
32
+ export default DropdownPage
package/dev/pages/FormPage.jsx ADDED
@@ -0,0 +1,163 @@
1
+ import { useEffect, useRef, useState } from "react"
2
+
3
+ import Form from "../../src/Form"
4
+ import Button from "../../src/Button"
5
+ import InputGroup from "../../src/InputGroup"
6
+ import FloatingLabel from "../../src/FloatingLabel"
7
+ import FileUploadButton from "../../src/FileUploadButton/FileUploadButton"
8
+
9
+ const FormPage = () => {
10
+ const [selectValue, setSelectValue] = useState("6")
11
+ const [count, setCount] = useState(3)
12
+ const [options, setOptions] = useState(["1","2","3","4","5","6","7"])
13
+ const handleChange = (event) => {
14
+ //console.log(event.target.value)
15
+ console.log(count)
16
+ setSelectValue(event.target.value)
17
+ }
18
+ const testRef = useRef(null)
19
+ useEffect(() => {
20
+ console.log(testRef.current)
21
+ }, [testRef.current])
22
+
23
+ const handleSubmit = (event) => {
24
+ event.preventDefault()
25
+ console.log(event.target[0].value)
26
+ setCount(prev => prev += 1)
27
+ setOptions(prev => [...prev, (count+1).toString()])
28
+ }
29
+
30
+ return (
31
+ <div style={{display:"grid", placeContent:"center"}}>
32
+ <div style={{height:"fit-content", width:"fit-content", border:"1px solid white", padding:"1rem", resize:"both", overflow:"hidden"}}>
33
+ <Form onSubmit={handleSubmit}>
34
+ <Form.Select value={selectValue} onChange={handleChange} /*errorAsOverlay={true} error={{message:"this is an error test"}} hint={{message: "this is a hint test"}}*/ ref={testRef} id="custom-select-test">
35
+ <Form.Select.Option value="">Select option...</Form.Select.Option>
36
+ {options.map(entry =>
37
+ <Form.Select.Option value={entry}>{entry}</Form.Select.Option>
38
+ )}
39
+ {null}
40
+ </Form.Select>
41
+ <Button type="submit">{count}</Button>
42
+ </Form>
43
+ <Form onSubmit={event => event.preventDefault()}>
44
+ <FileUploadButton />
45
+ <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:"1rem"}}>
46
+ <Form.Group controlId="form-control">
47
+ <Form.Label>Form Control</Form.Label>
48
+ <Form.Control aria-describedby="test-hint" hint={{message: "Testing this error message"}} errorAsOverlay={true} error={{message: "Testing this error message"}} required type="number" min={4} placeholder="Placeholder..."/>
49
+ <Form.Hint id="test-hint">
50
+ <details>
51
+ <summary>test</summary>
52
+ more test
53
+ </details>
54
+ </Form.Hint>
55
+ </Form.Group>
56
+ <Form.Group controlId="form-control-disabled">
57
+ <Form.Label>Form Control Disabled</Form.Label>
58
+ <Form.Control placeholder="Placeholder..." defaultValue={"test"} disabled/>
59
+ </Form.Group>
60
+ </div>
61
+ <Form.Group controlId="form-control-vertical" vertical={true}>
62
+ <Form.Label>Form Control Vertical</Form.Label>
63
+ <Form.Control />
64
+ </Form.Group>
65
+ <Form.Group controlId="form-control-textbox">
66
+ <Form.Label>Form Control Textarea</Form.Label>
67
+ <Form.Control as="textarea"/>
68
+ </Form.Group>
69
+
70
+ <Form.Check >Form Checkbox</Form.Check>
71
+ <Form.Check type="radio">Form Radio</Form.Check>
72
+ <Form.Check type="switch">Form Switch</Form.Check>
73
+ <Form.Check type="color">Form Color</Form.Check>
74
+
75
+ <Form.Group controlId="form-control-date">
76
+ <Form.Label>Form Date Picker</Form.Label>
77
+ <Form.Control type="date"/>
78
+ </Form.Group>
79
+
80
+ <Form.Group controlId="form-select-tag">
81
+ <Form.Label>Form Select Tag</Form.Label>
82
+ <Form.SelectTag onChange={event => console.log(event)}>
83
+ <option value="">Select option...</option>
84
+ <option value="test-1">Test 1</option>
85
+ <option value="test-2">Test 2</option>
86
+ <option value="test-3">Test 3</option>
87
+ </Form.SelectTag>
88
+ <Form.Select errorAsOverlay={true} error={{message:"this is an error test"}} hint={{message: "this is a hint test"}} ref={testRef} value={selectValue} onChange={handleChange} id="custom-select-test">
89
+ <Form.Select.Option value="">Select option...</Form.Select.Option>
90
+ <Form.Select.Option value="1">1</Form.Select.Option>
91
+ <Form.Select.Option value="2">2</Form.Select.Option>
92
+ <Form.Select.Option value="3">3</Form.Select.Option>
93
+ <Form.Select.Option value="4">4</Form.Select.Option>
94
+ <Form.Select.Option value="5">5</Form.Select.Option>
95
+ <Form.Select.Option value="6">6</Form.Select.Option>
96
+ <Form.Select.Option value="7">7</Form.Select.Option>
97
+ <Form.Select.Option value="8">8</Form.Select.Option>
98
+ <Form.Select.Option value="9">9</Form.Select.Option>
99
+ </Form.Select>
100
+ </Form.Group>
101
+
102
+ <Form.Group controlId="form-prtogress">
103
+ <Form.Label>Progress / Gauge / Slider</Form.Label>
104
+ <progress value={50} max={100} />
105
+ <meter low={3} optimum={5} high={7} value={2} min="0" max="10"/>
106
+ <Form.Slider min={-5} max={5} step={1} defaultValue={0} />
107
+ <input type="range" min={1} max={10} step={1} list="markers"/>
108
+ <datalist id="markers">
109
+ <option value="0"></option>
110
+ <option value="1"></option>
111
+ <option value="2"></option>
112
+ <option value="3"></option>
113
+ <option value="4"></option>
114
+ <option value="5"></option>
115
+ <option value="6"></option>
116
+ <option value="7"></option>
117
+ <option value="8"></option>
118
+ <option value="9"></option>
119
+ <option value="10"></option>
120
+ </datalist>
121
+ </Form.Group>
122
+
123
+ <h6>Input Group</h6>
124
+ <InputGroup.Grid>
125
+ <InputGroup controlId="input-group-test">
126
+ <InputGroup.Text>Form.Control</InputGroup.Text>
127
+ <Form.Control />
128
+ </InputGroup>
129
+ <InputGroup controlId="input-group-test-select">
130
+ <Form.SelectTag>
131
+ <option value="">Choose...</option>
132
+ <option value="wisely">Wisely</option>
133
+ <option value="poorly">Poorly</option>
134
+ </Form.SelectTag>
135
+ <InputGroup.Text>Form.Select</InputGroup.Text>
136
+ </InputGroup>
137
+ <Form.Check label="test"/>
138
+ </InputGroup.Grid>
139
+
140
+ <h6>Floating Label (in Input Group Grid)</h6>
141
+ <InputGroup.Grid>
142
+ <FloatingLabel controlId="floating-1" label="Floating 1">
143
+ <Form.Control hint={{message: "Testing this error message looooooooooooooooooooooooooooooooooooooooooooong"}} error={{message: "Testing this error message"}} placeholder="Enter input..." />
144
+ </FloatingLabel>
145
+ <FloatingLabel controlId="floating-2" label="Floating 2">
146
+ <Form.SelectTag>
147
+ <option value="">Choose...</option>
148
+ <option value="wisely">Wisely</option>
149
+ <option value="poorly">Poorly</option>
150
+ </Form.SelectTag>
151
+ </FloatingLabel>
152
+ <FloatingLabel controlId="floating-3" label="Floating 3">
153
+ <Form.Control as="textarea" placeholder="Enter input..." />
154
+ </FloatingLabel>
155
+ </InputGroup.Grid>
156
+ <Button type="submit">Submit</Button>
157
+ </Form>
158
+ </div>
159
+ </div>
160
+ )
161
+ }
162
+
163
+ export default FormPage
package/dev/pages/ListPage.jsx ADDED
@@ -0,0 +1,52 @@
1
+ import List from "../../src/List"
2
+ import Button from "../../src/Button"
3
+ import { useEffect, useRef } from "react"
4
+
5
+ const ListPage = () => {
6
+ return(
7
+ <>
8
+ <h4 style={{marginLeft:"1.5rem"}}>List</h4>
9
+ <section className="list-container">
10
+ <List depth={1} dragdrop={true}>
11
+ <List.Item>
12
+ <span style={{padding:"0.5rem 1rem", border:"1px solid white"}}>Test 0</span>
13
+ </List.Item>
14
+ <List.Sublist>
15
+ <List.Label id="test-1">
16
+ <span style={{padding:"0.5rem 1rem", border:"1px solid white"}}>Sublist 1</span>
17
+ </List.Label>
18
+ <List depth={2} aria-labelledby="test-1">
19
+ <List.Item id="1">
20
+ <span style={{padding:"0.5rem 1rem", border:"1px solid white"}}>Test 2</span>
21
+ </List.Item>
22
+ <List.Item id="2">
23
+ <span style={{padding:"0.5rem 1rem", border:"1px solid white"}}>Test 3</span>
24
+ </List.Item>
25
+ <List.Sublist>
26
+ <List.Label id="sublist-test-1">
27
+ <span style={{padding:"0.5rem 1rem", border:"1px solid white"}}>Sublist 2</span>
28
+ </List.Label>
29
+ <List depth={3} aria-labelledby="sublist-test-1">
30
+ <List.Item id="1">
31
+ <span style={{padding:"0.5rem 1rem", border:"1px solid white"}}>Test 5</span>
32
+ </List.Item>
33
+ <List.Item id="2">
34
+ <span style={{padding:"0.5rem 1rem", border:"1px solid white"}}>Test 6</span>
35
+ </List.Item>
36
+ </List>
37
+ </List.Sublist>
38
+ </List>
39
+ </List.Sublist>
40
+ <List.Item id="test-4">
41
+ <span style={{ padding:"0.5rem 1rem", border:"1px solid white"}}>Test 4</span>
42
+ </List.Item>
43
+ <List.Item id="test-5">
44
+ <span style={{ padding:"0.5rem 1rem", border:"1px solid white"}}>Test 5</span>
45
+ </List.Item>
46
+ </List>
47
+ </section>
48
+ </>
49
+ )
50
+ }
51
+
52
+ export default ListPage
package/dev/pages/ModalPage.jsx ADDED
@@ -0,0 +1,38 @@
1
+ import { useEffect, useState } from 'react'
2
+
3
+ import Button from "../../src/Button"
4
+ import Modal from "../../src/Modal"
5
+ import useScreenSize from "../../src/hooks/useScreenSize"
6
+
7
+ const ModalPage = () => {
8
+ const [showModal, setShowModal] = useState(false)
9
+ const {width} = useScreenSize()
10
+ const onHide = (event) => {
11
+ setShowModal(false)
12
+ }
13
+ return (
14
+ <>
15
+ <Button onClick={(event) => setShowModal(true)}>
16
+ Modal
17
+ </Button>
18
+ <Modal fill show={showModal} onHide={onHide} size='md'>
19
+ <Modal.Header closeButton>
20
+ <Modal.Title>Test Modal: {width}</Modal.Title>
21
+ </Modal.Header>
22
+ <form>
23
+ <Modal.Body>
24
+ <p>
25
+ test
26
+ </p>
27
+ </Modal.Body>
28
+ <Modal.Footer>
29
+ <small>Test footer</small>
30
+ <button type="button" onClick={(event) => setShowModal(false)}>Cancel</button>
31
+ </Modal.Footer>
32
+ </form>
33
+ </Modal>
34
+ </>
35
+ )
36
+ }
37
+
38
+ export default ModalPage
package/dev/pages/OverlayPage.jsx ADDED
@@ -0,0 +1,39 @@
1
+ import { useEffect, useRef, useState } from 'react'
2
+
3
+ import Overlay from '../../src/Overlay/Overlay'
4
+ import Button from "../../src/Button"
5
+
6
+ const OverlayElement = () => {
7
+ return (
8
+ <div style={{height:"20px", width:"20px", backgroundColor:"red"}}></div>
9
+ )
10
+ }
11
+
12
+ const OverlayPage = () => {
13
+ const buttonRef = useRef(null)
14
+ const [show, setShow] = useState(false)
15
+ const handleToggle = (event) => {
16
+ setShow(prev => !prev)
17
+ }
18
+ useEffect(() => {
19
+ //if(buttonRef.current) console.log(buttonRef.current)
20
+ }, [buttonRef.current])
21
+ return (
22
+ <>
23
+ <h4>Overlay</h4>
24
+ <section className="overlay-container">
25
+ <Overlay position='top' overlay={<OverlayElement/>} trigger={"click"}>
26
+ <Button ref={buttonRef} onClick={(event) => console.log(buttonRef.current)}>Click</Button>
27
+ </Overlay>
28
+ </section>
29
+ <h4>Tooltip</h4>
30
+ <section className="overlay-container">
31
+ <Overlay position='bottom' tooltip={"Testing a tooltip with a long message. This messsage is so long it hsould in theory trigger a wrap."} trigger={"hover"}>
32
+ <span style={{display:"block",border:"2px solid white"}}>Click</span>
33
+ </Overlay>
34
+ </section>
35
+ </>
36
+ )
37
+ }
38
+
39
+ export default OverlayPage