@public-ui/sample-react 1.7.0-rc.10

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 (342) hide show
  1. package/.eslintignore +1 -0
  2. package/.eslintrc.js +27 -0
  3. package/.gitignore +35 -0
  4. package/.prettierignore +4 -0
  5. package/package.json +64 -0
  6. package/prettier.config.js +5 -0
  7. package/public/.htaccess +3 -0
  8. package/public/assets/bundes/LICENSE.md +1 -0
  9. package/public/assets/bundes/sans/BundesSans-Web-Black.ttf +0 -0
  10. package/public/assets/bundes/sans/BundesSans-Web-Black.woff +0 -0
  11. package/public/assets/bundes/sans/BundesSans-Web-Black.woff2 +0 -0
  12. package/public/assets/bundes/sans/BundesSans-Web-BlackItalic.ttf +0 -0
  13. package/public/assets/bundes/sans/BundesSans-Web-BlackItalic.woff +0 -0
  14. package/public/assets/bundes/sans/BundesSans-Web-BlackItalic.woff2 +0 -0
  15. package/public/assets/bundes/sans/BundesSans-Web-Bold.ttf +0 -0
  16. package/public/assets/bundes/sans/BundesSans-Web-Bold.woff +0 -0
  17. package/public/assets/bundes/sans/BundesSans-Web-Bold.woff2 +0 -0
  18. package/public/assets/bundes/sans/BundesSans-Web-BoldItalic.ttf +0 -0
  19. package/public/assets/bundes/sans/BundesSans-Web-BoldItalic.woff +0 -0
  20. package/public/assets/bundes/sans/BundesSans-Web-BoldItalic.woff2 +0 -0
  21. package/public/assets/bundes/sans/BundesSans-Web-Light.ttf +0 -0
  22. package/public/assets/bundes/sans/BundesSans-Web-Light.woff +0 -0
  23. package/public/assets/bundes/sans/BundesSans-Web-Light.woff2 +0 -0
  24. package/public/assets/bundes/sans/BundesSans-Web-LightItalic.ttf +0 -0
  25. package/public/assets/bundes/sans/BundesSans-Web-LightItalic.woff +0 -0
  26. package/public/assets/bundes/sans/BundesSans-Web-LightItalic.woff2 +0 -0
  27. package/public/assets/bundes/sans/BundesSans-Web-Medium.ttf +0 -0
  28. package/public/assets/bundes/sans/BundesSans-Web-Medium.woff +0 -0
  29. package/public/assets/bundes/sans/BundesSans-Web-Medium.woff2 +0 -0
  30. package/public/assets/bundes/sans/BundesSans-Web-MediumItalic.ttf +0 -0
  31. package/public/assets/bundes/sans/BundesSans-Web-MediumItalic.woff +0 -0
  32. package/public/assets/bundes/sans/BundesSans-Web-MediumItalic.woff2 +0 -0
  33. package/public/assets/bundes/sans/BundesSans-Web-Regular.ttf +0 -0
  34. package/public/assets/bundes/sans/BundesSans-Web-Regular.woff +0 -0
  35. package/public/assets/bundes/sans/BundesSans-Web-Regular.woff2 +0 -0
  36. package/public/assets/bundes/sans/BundesSans-Web-RegularItalic.ttf +0 -0
  37. package/public/assets/bundes/sans/BundesSans-Web-RegularItalic.woff +0 -0
  38. package/public/assets/bundes/sans/BundesSans-Web-RegularItalic.woff2 +0 -0
  39. package/public/assets/bundes/sans-cond/BundesSansCond-Web-Regular.ttf +0 -0
  40. package/public/assets/bundes/sans-cond/BundesSansCond-Web-Regular.woff +0 -0
  41. package/public/assets/bundes/sans-cond/BundesSansCond-Web-Regular.woff2 +0 -0
  42. package/public/assets/bundes/serif/BundesSerif-Web-Bold.ttf +0 -0
  43. package/public/assets/bundes/serif/BundesSerif-Web-Bold.woff +0 -0
  44. package/public/assets/bundes/serif/BundesSerif-Web-Bold.woff2 +0 -0
  45. package/public/assets/bundes/serif/BundesSerif-Web-BoldItalic.ttf +0 -0
  46. package/public/assets/bundes/serif/BundesSerif-Web-BoldItalic.woff +0 -0
  47. package/public/assets/bundes/serif/BundesSerif-Web-BoldItalic.woff2 +0 -0
  48. package/public/assets/bundes/serif/BundesSerif-Web-Italic.ttf +0 -0
  49. package/public/assets/bundes/serif/BundesSerif-Web-Italic.woff +0 -0
  50. package/public/assets/bundes/serif/BundesSerif-Web-Italic.woff2 +0 -0
  51. package/public/assets/bundes/serif/BundesSerif-Web-Regular.ttf +0 -0
  52. package/public/assets/bundes/serif/BundesSerif-Web-Regular.woff +0 -0
  53. package/public/assets/bundes/serif/BundesSerif-Web-Regular.woff2 +0 -0
  54. package/public/assets/bundes/style.css +84 -0
  55. package/public/assets/codicons/LICENSE +395 -0
  56. package/public/assets/codicons/LICENSE-CODE +21 -0
  57. package/public/assets/codicons/codicon.css +582 -0
  58. package/public/assets/codicons/codicon.csv +426 -0
  59. package/public/assets/codicons/codicon.html +3911 -0
  60. package/public/assets/codicons/codicon.svg +1 -0
  61. package/public/assets/codicons/codicon.ttf +0 -0
  62. package/public/assets/fontawesome-free/LICENSE.txt +165 -0
  63. package/public/assets/fontawesome-free/css/all.css +7831 -0
  64. package/public/assets/fontawesome-free/css/all.min.css +6 -0
  65. package/public/assets/fontawesome-free/css/brands.css +1432 -0
  66. package/public/assets/fontawesome-free/css/brands.min.css +6 -0
  67. package/public/assets/fontawesome-free/css/fontawesome.css +6338 -0
  68. package/public/assets/fontawesome-free/css/fontawesome.min.css +6 -0
  69. package/public/assets/fontawesome-free/css/regular.css +19 -0
  70. package/public/assets/fontawesome-free/css/regular.min.css +6 -0
  71. package/public/assets/fontawesome-free/css/solid.css +19 -0
  72. package/public/assets/fontawesome-free/css/solid.min.css +6 -0
  73. package/public/assets/fontawesome-free/css/svg-with-js.css +634 -0
  74. package/public/assets/fontawesome-free/css/svg-with-js.min.css +6 -0
  75. package/public/assets/fontawesome-free/css/v4-font-face.css +26 -0
  76. package/public/assets/fontawesome-free/css/v4-font-face.min.css +6 -0
  77. package/public/assets/fontawesome-free/css/v4-shims.css +2146 -0
  78. package/public/assets/fontawesome-free/css/v4-shims.min.css +6 -0
  79. package/public/assets/fontawesome-free/css/v5-font-face.css +22 -0
  80. package/public/assets/fontawesome-free/css/v5-font-face.min.css +6 -0
  81. package/public/assets/fontawesome-free/webfonts/fa-brands-400.ttf +0 -0
  82. package/public/assets/fontawesome-free/webfonts/fa-brands-400.woff2 +0 -0
  83. package/public/assets/fontawesome-free/webfonts/fa-regular-400.ttf +0 -0
  84. package/public/assets/fontawesome-free/webfonts/fa-regular-400.woff2 +0 -0
  85. package/public/assets/fontawesome-free/webfonts/fa-solid-900.ttf +0 -0
  86. package/public/assets/fontawesome-free/webfonts/fa-solid-900.woff2 +0 -0
  87. package/public/assets/fontawesome-free/webfonts/fa-v4compatibility.ttf +0 -0
  88. package/public/assets/fontawesome-free/webfonts/fa-v4compatibility.woff2 +0 -0
  89. package/public/assets/icofont/demo.html +18939 -0
  90. package/public/assets/icofont/fonts/icofont.eot +0 -0
  91. package/public/assets/icofont/fonts/icofont.svg +2105 -0
  92. package/public/assets/icofont/fonts/icofont.ttf +0 -0
  93. package/public/assets/icofont/fonts/icofont.woff +0 -0
  94. package/public/assets/icofont/fonts/icofont.woff2 +0 -0
  95. package/public/assets/icofont/icofont.css +10757 -0
  96. package/public/assets/icofont/icofont.min.css +7 -0
  97. package/public/assets/kolibri.ico +0 -0
  98. package/public/assets/kreon/Kreon-VariableFont_wght.ttf +0 -0
  99. package/public/assets/kreon/OFL.txt +93 -0
  100. package/public/assets/kreon/README.txt +67 -0
  101. package/public/assets/kreon/static/Kreon-Bold.ttf +0 -0
  102. package/public/assets/kreon/static/Kreon-Light.ttf +0 -0
  103. package/public/assets/kreon/static/Kreon-Medium.ttf +0 -0
  104. package/public/assets/kreon/static/Kreon-Regular.ttf +0 -0
  105. package/public/assets/kreon/static/Kreon-SemiBold.ttf +0 -0
  106. package/public/assets/kreon/style.css +41 -0
  107. package/public/assets/material-icons/LICENSE +202 -0
  108. package/public/assets/material-icons/README.md +129 -0
  109. package/public/assets/material-icons/_data/versions.json +2124 -0
  110. package/public/assets/material-icons/css/_codepoints.scss +2279 -0
  111. package/public/assets/material-icons/css/_mixins.scss +13 -0
  112. package/public/assets/material-icons/css/_variables.scss +6 -0
  113. package/public/assets/material-icons/css/material-icons.css +9208 -0
  114. package/public/assets/material-icons/css/material-icons.min.css +1 -0
  115. package/public/assets/material-icons/css/material-icons.scss +39 -0
  116. package/public/assets/material-icons/iconfont/_mixins.scss +55 -0
  117. package/public/assets/material-icons/iconfont/_variables.scss +3 -0
  118. package/public/assets/material-icons/iconfont/filled.css +24 -0
  119. package/public/assets/material-icons/iconfont/filled.scss +4 -0
  120. package/public/assets/material-icons/iconfont/material-icons-outlined.woff +0 -0
  121. package/public/assets/material-icons/iconfont/material-icons-outlined.woff2 +0 -0
  122. package/public/assets/material-icons/iconfont/material-icons-round.woff +0 -0
  123. package/public/assets/material-icons/iconfont/material-icons-round.woff2 +0 -0
  124. package/public/assets/material-icons/iconfont/material-icons-sharp.woff +0 -0
  125. package/public/assets/material-icons/iconfont/material-icons-sharp.woff2 +0 -0
  126. package/public/assets/material-icons/iconfont/material-icons-two-tone.woff +0 -0
  127. package/public/assets/material-icons/iconfont/material-icons-two-tone.woff2 +0 -0
  128. package/public/assets/material-icons/iconfont/material-icons.css +124 -0
  129. package/public/assets/material-icons/iconfont/material-icons.scss +5 -0
  130. package/public/assets/material-icons/iconfont/material-icons.woff +0 -0
  131. package/public/assets/material-icons/iconfont/material-icons.woff2 +0 -0
  132. package/public/assets/material-icons/iconfont/outlined.css +24 -0
  133. package/public/assets/material-icons/iconfont/outlined.scss +4 -0
  134. package/public/assets/material-icons/iconfont/round.css +24 -0
  135. package/public/assets/material-icons/iconfont/round.scss +4 -0
  136. package/public/assets/material-icons/iconfont/sharp.css +24 -0
  137. package/public/assets/material-icons/iconfont/sharp.scss +4 -0
  138. package/public/assets/material-icons/iconfont/two-tone.css +24 -0
  139. package/public/assets/material-icons/iconfont/two-tone.scss +4 -0
  140. package/public/assets/material-icons/index.d.ts +2128 -0
  141. package/public/assets/material-icons/package.json +52 -0
  142. package/public/assets/material-symbols/LICENSE +202 -0
  143. package/public/assets/material-symbols/README.md +114 -0
  144. package/public/assets/material-symbols/_core.scss +47 -0
  145. package/public/assets/material-symbols/index.css +74 -0
  146. package/public/assets/material-symbols/index.d.ts +2809 -0
  147. package/public/assets/material-symbols/index.scss +3 -0
  148. package/public/assets/material-symbols/material-symbols-outlined.woff2 +0 -0
  149. package/public/assets/material-symbols/material-symbols-rounded.woff2 +0 -0
  150. package/public/assets/material-symbols/material-symbols-sharp.woff2 +0 -0
  151. package/public/assets/material-symbols/outlined.css +24 -0
  152. package/public/assets/material-symbols/outlined.scss +3 -0
  153. package/public/assets/material-symbols/package.json +41 -0
  154. package/public/assets/material-symbols/rounded.css +24 -0
  155. package/public/assets/material-symbols/rounded.scss +3 -0
  156. package/public/assets/material-symbols/sharp.css +24 -0
  157. package/public/assets/material-symbols/sharp.scss +3 -0
  158. package/public/assets/noto-sans/fonts/NotoSans-Black.ttf +0 -0
  159. package/public/assets/noto-sans/fonts/NotoSans-BlackItalic.ttf +0 -0
  160. package/public/assets/noto-sans/fonts/NotoSans-Bold.ttf +0 -0
  161. package/public/assets/noto-sans/fonts/NotoSans-BoldItalic.ttf +0 -0
  162. package/public/assets/noto-sans/fonts/NotoSans-ExtraBold.ttf +0 -0
  163. package/public/assets/noto-sans/fonts/NotoSans-ExtraBoldItalic.ttf +0 -0
  164. package/public/assets/noto-sans/fonts/NotoSans-ExtraLight.ttf +0 -0
  165. package/public/assets/noto-sans/fonts/NotoSans-ExtraLightItalic.ttf +0 -0
  166. package/public/assets/noto-sans/fonts/NotoSans-Italic.ttf +0 -0
  167. package/public/assets/noto-sans/fonts/NotoSans-Light.ttf +0 -0
  168. package/public/assets/noto-sans/fonts/NotoSans-LightItalic.ttf +0 -0
  169. package/public/assets/noto-sans/fonts/NotoSans-Medium.ttf +0 -0
  170. package/public/assets/noto-sans/fonts/NotoSans-MediumItalic.ttf +0 -0
  171. package/public/assets/noto-sans/fonts/NotoSans-Regular.ttf +0 -0
  172. package/public/assets/noto-sans/fonts/NotoSans-SemiBold.ttf +0 -0
  173. package/public/assets/noto-sans/fonts/NotoSans-SemiBoldItalic.ttf +0 -0
  174. package/public/assets/noto-sans/fonts/NotoSans-Thin.ttf +0 -0
  175. package/public/assets/noto-sans/fonts/NotoSans-ThinItalic.ttf +0 -0
  176. package/public/assets/noto-sans/fonts/OFL.txt +93 -0
  177. package/public/assets/noto-sans/noto-sans.css +11 -0
  178. package/public/assets/roboto/LICENSE.txt +202 -0
  179. package/public/assets/roboto/Roboto-Black.ttf +0 -0
  180. package/public/assets/roboto/Roboto-BlackItalic.ttf +0 -0
  181. package/public/assets/roboto/Roboto-Bold.ttf +0 -0
  182. package/public/assets/roboto/Roboto-BoldItalic.ttf +0 -0
  183. package/public/assets/roboto/Roboto-Italic.ttf +0 -0
  184. package/public/assets/roboto/Roboto-Light.ttf +0 -0
  185. package/public/assets/roboto/Roboto-LightItalic.ttf +0 -0
  186. package/public/assets/roboto/Roboto-Medium.ttf +0 -0
  187. package/public/assets/roboto/Roboto-MediumItalic.ttf +0 -0
  188. package/public/assets/roboto/Roboto-Regular.ttf +0 -0
  189. package/public/assets/roboto/Roboto-Thin.ttf +0 -0
  190. package/public/assets/roboto/Roboto-ThinItalic.ttf +0 -0
  191. package/public/assets/roboto/roboto.css +27 -0
  192. package/public/assets/tabler-icons/fonts/tabler-icons.eot +0 -0
  193. package/public/assets/tabler-icons/fonts/tabler-icons.ttf +0 -0
  194. package/public/assets/tabler-icons/fonts/tabler-icons.woff +0 -0
  195. package/public/assets/tabler-icons/fonts/tabler-icons.woff2 +0 -0
  196. package/public/assets/tabler-icons/tabler-icons.css +16056 -0
  197. package/public/assets/tabler-icons/tabler-icons.html +36226 -0
  198. package/public/assets/tabler-icons/tabler-icons.min.css +4 -0
  199. package/public/assets/tabler-icons/tabler-icons.png +0 -0
  200. package/public/assets/tabler-icons/tabler-icons.scss +8058 -0
  201. package/public/index.html +28 -0
  202. package/public/robots.txt +2 -0
  203. package/src/App.tsx +131 -0
  204. package/src/components/Sidebar.tsx +95 -0
  205. package/src/components/abbr/basic.html +6 -0
  206. package/src/components/abbr/basic.tsx +39 -0
  207. package/src/components/abbr/routes.ts +9 -0
  208. package/src/components/accordion/basic.tsx +18 -0
  209. package/src/components/accordion/header.tsx +17 -0
  210. package/src/components/accordion/headlines.tsx +27 -0
  211. package/src/components/accordion/list.tsx +32 -0
  212. package/src/components/accordion/routes.ts +17 -0
  213. package/src/components/alert/basic.tsx +37 -0
  214. package/src/components/alert/card-msg.tsx +11 -0
  215. package/src/components/alert/html.tsx +29 -0
  216. package/src/components/alert/routes.ts +15 -0
  217. package/src/components/avatar/basic.tsx +10 -0
  218. package/src/components/avatar/routes.ts +8 -0
  219. package/src/components/badge/basic.tsx +18 -0
  220. package/src/components/badge/button.tsx +25 -0
  221. package/src/components/badge/routes.ts +12 -0
  222. package/src/components/breadcrumb/basic.tsx +53 -0
  223. package/src/components/breadcrumb/routes.ts +9 -0
  224. package/src/components/button/basic.tsx +29 -0
  225. package/src/components/button/hide-label.tsx +31 -0
  226. package/src/components/button/icons.tsx +27 -0
  227. package/src/components/button/routes.ts +18 -0
  228. package/src/components/button/width.tsx +30 -0
  229. package/src/components/button-group/basic.tsx +13 -0
  230. package/src/components/button-group/routes.ts +9 -0
  231. package/src/components/button-link/basic.tsx +23 -0
  232. package/src/components/button-link/icons.tsx +37 -0
  233. package/src/components/button-link/image.tsx +14 -0
  234. package/src/components/button-link/routes.ts +18 -0
  235. package/src/components/button-link/target.tsx +16 -0
  236. package/src/components/card/basic.tsx +12 -0
  237. package/src/components/card/confirm.tsx +19 -0
  238. package/src/components/card/flex.tsx +44 -0
  239. package/src/components/card/routes.ts +18 -0
  240. package/src/components/card/selection.tsx +70 -0
  241. package/src/components/details/basic.tsx +19 -0
  242. package/src/components/details/routes.ts +9 -0
  243. package/src/components/form/routes.ts +5 -0
  244. package/src/components/handout/basic.tsx +1013 -0
  245. package/src/components/handout/routes.ts +9 -0
  246. package/src/components/heading/badged.tsx +27 -0
  247. package/src/components/heading/basic.tsx +15 -0
  248. package/src/components/heading/paragraph.tsx +45 -0
  249. package/src/components/heading/routes.ts +15 -0
  250. package/src/components/icon/basic.tsx +17 -0
  251. package/src/components/icon/routes.ts +9 -0
  252. package/src/components/indented-text/basic.tsx +24 -0
  253. package/src/components/indented-text/routes.ts +9 -0
  254. package/src/components/input-checkbox/basic.tsx +37 -0
  255. package/src/components/input-checkbox/routes.ts +9 -0
  256. package/src/components/input-color/basic.tsx +29 -0
  257. package/src/components/input-color/routes.ts +9 -0
  258. package/src/components/input-date/basic.tsx +20 -0
  259. package/src/components/input-date/routes.ts +9 -0
  260. package/src/components/input-email/basic.tsx +30 -0
  261. package/src/components/input-email/routes.ts +9 -0
  262. package/src/components/input-file/basic.tsx +25 -0
  263. package/src/components/input-file/routes.ts +9 -0
  264. package/src/components/input-number/basic.tsx +30 -0
  265. package/src/components/input-number/routes.ts +9 -0
  266. package/src/components/input-password/basic.tsx +28 -0
  267. package/src/components/input-password/routes.ts +11 -0
  268. package/src/components/input-password/show-password.tsx +38 -0
  269. package/src/components/input-radio/basic.tsx +46 -0
  270. package/src/components/input-radio/horizontal.tsx +42 -0
  271. package/src/components/input-radio/routes.ts +14 -0
  272. package/src/components/input-radio/select.tsx +18 -0
  273. package/src/components/input-range/basic.tsx +29 -0
  274. package/src/components/input-range/routes.ts +9 -0
  275. package/src/components/input-text/basic.tsx +72 -0
  276. package/src/components/input-text/blur.tsx +16 -0
  277. package/src/components/input-text/focus.tsx +24 -0
  278. package/src/components/input-text/hidden-label.tsx +66 -0
  279. package/src/components/input-text/routes.ts +16 -0
  280. package/src/components/link/basic.tsx +23 -0
  281. package/src/components/link/icons.tsx +37 -0
  282. package/src/components/link/image.tsx +20 -0
  283. package/src/components/link/routes.ts +18 -0
  284. package/src/components/link/target.tsx +15 -0
  285. package/src/components/link-button/basic.tsx +22 -0
  286. package/src/components/link-button/routes.ts +9 -0
  287. package/src/components/link-group/routes.ts +5 -0
  288. package/src/components/nav/active.tsx +88 -0
  289. package/src/components/nav/aria-current.tsx +22 -0
  290. package/src/components/nav/basic.tsx +62 -0
  291. package/src/components/nav/horizontal.tsx +59 -0
  292. package/src/components/nav/routes.ts +18 -0
  293. package/src/components/pagination/basic.tsx +12 -0
  294. package/src/components/pagination/routes.ts +9 -0
  295. package/src/components/popover/basic.tsx +36 -0
  296. package/src/components/popover/routes.ts +8 -0
  297. package/src/components/progress/basic.tsx +11 -0
  298. package/src/components/progress/routes.ts +9 -0
  299. package/src/components/select/basic.tsx +51 -0
  300. package/src/components/select/routes.ts +9 -0
  301. package/src/components/skip-nav/basic.tsx +33 -0
  302. package/src/components/skip-nav/routes.ts +9 -0
  303. package/src/components/spin/basic.tsx +6 -0
  304. package/src/components/spin/custom.css +52 -0
  305. package/src/components/spin/custom.tsx +11 -0
  306. package/src/components/spin/cycle.tsx +6 -0
  307. package/src/components/spin/routes.ts +13 -0
  308. package/src/components/split-button/basic.tsx +46 -0
  309. package/src/components/split-button/routes.ts +8 -0
  310. package/src/components/table/badge-size.tsx +51 -0
  311. package/src/components/table/render-cell.tsx +48 -0
  312. package/src/components/table/routes.ts +15 -0
  313. package/src/components/table/sort-date.tsx +33 -0
  314. package/src/components/table/test-data.ts +66 -0
  315. package/src/components/textarea/adjust-height.tsx +22 -0
  316. package/src/components/textarea/basic.tsx +11 -0
  317. package/src/components/textarea/disabled.tsx +10 -0
  318. package/src/components/textarea/placeholder.tsx +10 -0
  319. package/src/components/textarea/readonly.tsx +10 -0
  320. package/src/components/textarea/resize.tsx +13 -0
  321. package/src/components/textarea/routes.ts +27 -0
  322. package/src/components/textarea/rows.tsx +10 -0
  323. package/src/components/toast/basic.tsx +21 -0
  324. package/src/components/toast/routes.ts +8 -0
  325. package/src/components/version/basic.tsx +6 -0
  326. package/src/components/version/context.tsx +12 -0
  327. package/src/components/version/routes.ts +12 -0
  328. package/src/declare.d.ts +4 -0
  329. package/src/hooks/useMobile.ts +21 -0
  330. package/src/main.ts +7 -0
  331. package/src/react.main.tsx +56 -0
  332. package/src/shares/constants.ts +2 -0
  333. package/src/shares/react-roots.ts +10 -0
  334. package/src/shares/routes.ts +87 -0
  335. package/src/shares/store.ts +85 -0
  336. package/src/shares/theme.ts +103 -0
  337. package/src/shares/types.ts +4 -0
  338. package/src/style.scss +43 -0
  339. package/test-build.sh +2 -0
  340. package/tsconfig.json +32 -0
  341. package/unocss.config.ts +7 -0
  342. package/webpack.config.js +14 -0
package/public/index.html ADDED
@@ -0,0 +1,28 @@
1
+ <!doctype html>
2
+ <html lang="de" dir="ltr">
3
+ <head>
4
+ <title>Code-Samples | KoliBri – Public UI</title>
5
+ <meta charset="UTF-8" />
6
+ <meta name="description" content="Webanwendung mit der KoliBri-Komponentenbibliothek." />
7
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
8
+ <link rel="shortcut icon" type="image/x-icon" href="assets/kolibri.ico" />
9
+ <link rel="stylesheet" href="assets/bundes/style.css" />
10
+ <link rel="stylesheet" href="assets/codicons/codicon.css" />
11
+ <link rel="stylesheet" href="assets/fontawesome-free/css/all.min.css" />
12
+ <link rel="stylesheet" href="assets/icofont/icofont.min.css" />
13
+ <link rel="stylesheet" href="assets/kreon/style.css" />
14
+ <link rel="stylesheet" href="assets/noto-sans/noto-sans.css" />
15
+ <link rel="stylesheet" href="assets/material-icons/iconfont/material-icons.css" />
16
+ <link rel="stylesheet" href="assets/material-symbols/index.css" />
17
+ <link rel="stylesheet" href="assets/roboto/roboto.css" />
18
+ <link rel="stylesheet" href="assets/tabler-icons/tabler-icons.css" />
19
+ <link rel="stylesheet" href="main.css" />
20
+ <meta name="robots" content="noindex" />
21
+ <meta name="kolibri" content="dev-mode=true" />
22
+ </head>
23
+ <body>
24
+ <div id="app"></div>
25
+ <script async src="main.js"></script>
26
+ <noscript>Diese Webseite erfordert, dass Sie JavaScript aktivieren.</noscript>
27
+ </body>
28
+ </html>
package/public/robots.txt ADDED
@@ -0,0 +1,2 @@
1
+ User-agent: *
2
+ Disallow: /
package/src/App.tsx ADDED
@@ -0,0 +1,131 @@
1
+ import React, { FC } from 'react';
2
+ import { Navigate, Route, Routes, useSearchParams } from 'react-router-dom';
3
+ import { Route as MyRoute, Routes as MyRoutes } from './shares/types';
4
+
5
+ import { Option } from '@public-ui/components';
6
+ import { KolAlert } from '@public-ui/react';
7
+ import { ROUTES } from './shares/routes';
8
+ import { Theme, THEME_OPTIONS } from './shares/theme';
9
+ import PackageJson from '../package.json';
10
+ import { getTheme, getThemeName, setStorage, setTheme } from './shares/store';
11
+ import { Sidebar } from './components/Sidebar';
12
+ import { useLocation } from 'react-router';
13
+
14
+ setStorage(localStorage);
15
+
16
+ const getRouteList = (routes: MyRoutes, offset = '/'): string[] => {
17
+ let list: string[] = [];
18
+ for (const key in routes) {
19
+ if (routes[key]) {
20
+ const ThisRoute: MyRoute = routes[key];
21
+ const path = `${offset}${key}`;
22
+ if (typeof ThisRoute === 'function') {
23
+ list.push(path);
24
+ } else if (typeof ThisRoute === 'object' && ThisRoute !== null) {
25
+ list = list.concat(getRouteList(ThisRoute, `${path}/`));
26
+ }
27
+ }
28
+ }
29
+ return list;
30
+ };
31
+
32
+ const getRouteTree = (routes: MyRoutes): ReturnType<typeof Route>[] => {
33
+ const tree: ReturnType<typeof Route>[] = [];
34
+ for (const key in routes) {
35
+ if (routes[key]) {
36
+ const ThisRoute: MyRoute = routes[key];
37
+ const path = `/${key}`;
38
+ if (typeof ThisRoute === 'function') {
39
+ tree.push(<Route key={path} path={path} element={<ThisRoute />} />);
40
+ tree.push(
41
+ <Route
42
+ key={`${path}/all`}
43
+ path={`${path}/all`}
44
+ element={
45
+ <div className="d-grid gap-4">
46
+ {THEME_OPTIONS.filter((theme) => ['bmf', 'zoll-v2'].indexOf((theme as Option<Theme>).value) >= 0).map((theme) => (
47
+ <div className="d-grid gap-2" key={(theme as Option<Theme>).value} data-theme={(theme as Option<Theme>).value}>
48
+ <strong>{theme.label}</strong>
49
+ <ThisRoute />
50
+ <hr aria-hidden="true" />
51
+ </div>
52
+ ))}
53
+ </div>
54
+ }
55
+ />,
56
+ );
57
+ } else if (typeof ThisRoute === 'object' && ThisRoute !== null) {
58
+ const keys = Object.keys(ThisRoute);
59
+ if (keys.length > 0) {
60
+ tree.push(
61
+ <Route
62
+ key={path}
63
+ path={`${path}/*`}
64
+ element={
65
+ <Routes>
66
+ <Route path="/" element={<Navigate to={keys[0]} />} />
67
+ {getRouteTree(ThisRoute)}
68
+ </Routes>
69
+ }
70
+ />,
71
+ );
72
+ }
73
+ }
74
+ }
75
+ }
76
+ return tree;
77
+ };
78
+
79
+ const ROUTE_LIST = getRouteList(ROUTES);
80
+ const ROUTE_TREE = getRouteTree(ROUTES);
81
+
82
+ const componentList: Map<string, Option<string>> = new Map();
83
+ ROUTE_LIST.forEach((route) => {
84
+ const routeSplit = route.split('/');
85
+ if (!componentList.has(routeSplit[1])) {
86
+ componentList.set(routeSplit[1], {
87
+ label: routeSplit[1],
88
+ value: route,
89
+ });
90
+ }
91
+ });
92
+
93
+ export const App: FC = () => {
94
+ const routerLocation = useLocation();
95
+ const [searchParams, setSearchParams] = useSearchParams();
96
+ const theme = searchParams.get('theme') ?? getTheme();
97
+ const hideMenus = searchParams.has('hideMenus');
98
+
99
+ setTheme(theme as Theme); // set for `getTheme` usages within the application
100
+
101
+ document.title = `KoliBri-Handout - ${getThemeName(getTheme())} | v${PackageJson.version}`;
102
+ document.body.setAttribute('class', theme);
103
+ document.body.dataset.theme = theme;
104
+
105
+ const handleThemeChange = (theme: unknown) => {
106
+ setSearchParams({ theme: theme as string });
107
+ window.location.reload();
108
+ };
109
+
110
+ return (
111
+ <div className={!hideMenus ? 'app-container' : ''} data-theme={theme}>
112
+ {!hideMenus && (
113
+ <Sidebar
114
+ version={PackageJson.version}
115
+ theme={theme}
116
+ sample={routerLocation.pathname}
117
+ routes={ROUTES}
118
+ routeList={ROUTE_LIST}
119
+ onThemeChange={handleThemeChange}
120
+ />
121
+ )}
122
+
123
+ <div className="p-4" id="route-container">
124
+ <Routes>
125
+ {ROUTE_TREE}
126
+ <Route path="*" element={<KolAlert _type="info">This code example has not been migrated yet - it&#39;s coming soon!</KolAlert>} />
127
+ </Routes>
128
+ </div>
129
+ </div>
130
+ );
131
+ };
package/src/components/Sidebar.tsx ADDED
@@ -0,0 +1,95 @@
1
+ import React, { FC, PropsWithChildren, useState } from 'react';
2
+ import { KolAccordion, KolButton, KolHeading, KolLink, KolSelect, KolVersion } from '@public-ui/react';
3
+ import { THEME_OPTIONS } from '../shares/theme';
4
+ import { Routes } from '../shares/types';
5
+ import { useMobile } from '../hooks/useMobile';
6
+
7
+ type Props = {
8
+ version: string;
9
+ theme: string;
10
+ routes: Routes;
11
+ routeList: string[];
12
+ sample: string;
13
+ onThemeChange: (theme: unknown) => void;
14
+ };
15
+
16
+ const ComponentNavContainer = ({ children, isMobile }: PropsWithChildren<{ isMobile: boolean }>) =>
17
+ isMobile ? (
18
+ <KolAccordion _label="Alle Komponenten" class="mt">
19
+ {children}
20
+ </KolAccordion>
21
+ ) : (
22
+ <div className="mt">{children}</div>
23
+ );
24
+ export const Sidebar: FC<Props> = ({ version, theme, routes, routeList, sample, onThemeChange }) => {
25
+ /* KolSelect calls onChange initially by design - work around this with a state variable */
26
+ const [isFirstThemeSelectChange, setIsFirstThemeSelectChange] = useState(true);
27
+ const isMobile = useMobile();
28
+
29
+ const getIndexOfSample = () => routeList.indexOf(sample);
30
+ const formatSampleAsLabel = () => sample.replace(/\//g, ' ');
31
+
32
+ const handleThemeSelectChange = (_event: Event, value: unknown) => {
33
+ if (isFirstThemeSelectChange) {
34
+ setIsFirstThemeSelectChange(false);
35
+ } else {
36
+ onThemeChange((value as [string])[0]);
37
+ }
38
+ };
39
+
40
+ const handleLinkClick = (event: Event) => {
41
+ location.replace((event.target as HTMLLinkElement).href); // KoliBri prevents the default click behavior as soon as an event listener is set, so we need to reimplement it.
42
+ document.querySelector('#route-container')?.scrollIntoView({ behavior: 'smooth' });
43
+ };
44
+
45
+ const handlePreviousClick = () => {
46
+ const currentIndex = getIndexOfSample();
47
+ const nextIndex = currentIndex === 0 ? routeList.length - 1 : currentIndex - 1;
48
+ location.replace(`#${routeList[nextIndex]}`);
49
+ };
50
+
51
+ const handleNextClick = () => {
52
+ const currentIndex = getIndexOfSample();
53
+ const nextIndex = currentIndex === routeList.length - 1 ? 0 : currentIndex + 1;
54
+ location.replace(`#${routeList[nextIndex]}`);
55
+ };
56
+
57
+ return (
58
+ <aside className="app-sidebar p-4">
59
+ <div className="flex flex-justify-between flex-items-center">
60
+ <KolHeading _label="KoliBri React"></KolHeading>
61
+ <KolVersion _version={version}></KolVersion>
62
+ </div>
63
+
64
+ <KolSelect _label="Theme wählen" _list={THEME_OPTIONS} _on={{ onChange: handleThemeSelectChange }} _value={[theme]} class="mt"></KolSelect>
65
+
66
+ <KolHeading _label="Komponenten" _level={2} className="block mt"></KolHeading>
67
+ <div className="flex flex-justify-between flex-items-center mt">
68
+ <KolButton _icon="codicon codicon-arrow-left" _hideLabel _label="Vorherige Komponente auswählen" _on={{ onClick: handlePreviousClick }} />
69
+ <span className="text-center">
70
+ {formatSampleAsLabel()} ({getIndexOfSample() + 1}/{routeList.length})
71
+ </span>
72
+ <KolButton _icon="codicon codicon-arrow-right" _hideLabel _label="Nächste Komponente auswählen" _on={{ onClick: handleNextClick }} />
73
+ </div>
74
+
75
+ <ComponentNavContainer isMobile={isMobile}>
76
+ <nav>
77
+ <ul className="m0 p0 list-inside">
78
+ {Object.entries(routes).map(([parentName, children]) => (
79
+ <li key={parentName} className="mt-2">
80
+ {parentName}
81
+ <ul className="list-inside ml p0">
82
+ {Object.keys(children).map((childName) => (
83
+ <li key={`${parentName}/${childName}`}>
84
+ <KolLink _label={childName} _href={`#/${parentName}/${childName}`} _on={{ onClick: handleLinkClick }} />
85
+ </li>
86
+ ))}
87
+ </ul>
88
+ </li>
89
+ ))}
90
+ </ul>
91
+ </nav>
92
+ </ComponentNavContainer>
93
+ </aside>
94
+ );
95
+ };
package/src/components/abbr/basic.html ADDED
@@ -0,0 +1,6 @@
1
+ Ich bin <kol-abbr _title="Abkürzung">z.B.</kol-abbr> eine Abkürzung.<br />
2
+ Ich bin <kol-abbr _title="Abkürzung" _tooltip-align="right">z.B.</kol-abbr> eine Abkürzung (rechts).<br />
3
+ Ich bin
4
+ <kol-abbr _title="Abkürzung" _tooltip-align="bottom">z.B.</kol-abbr> eine Abkürzung (unten).<br />
5
+ Ich bin <kol-abbr _title="Abkürzung" _tooltip-align="left">z.B.</kol-abbr> eine Abkürzung (links).<br />
6
+ Ich bin <kol-abbr _title="Abkürzung" _tooltip-align="top">z.B.</kol-abbr> eine Abkürzung (oben).
package/src/components/abbr/basic.tsx ADDED
@@ -0,0 +1,39 @@
1
+ import React from 'react';
2
+ import { FC } from 'react';
3
+ import { KolAbbr } from '@public-ui/react';
4
+
5
+ export const AbbrBasic: FC = () => (
6
+ <>
7
+ <p>
8
+ Ich bin <KolAbbr _title="Abkürzung">z.B.</KolAbbr> eine Abkürzung.
9
+ </p>
10
+ <p>
11
+ Ich bin{' '}
12
+ <KolAbbr _title="Abkürzung" _tooltipAlign="right">
13
+ z.B.
14
+ </KolAbbr>{' '}
15
+ eine Abkürzung (rechts).
16
+ </p>
17
+ <p>
18
+ Ich bin{' '}
19
+ <KolAbbr _title="Abkürzung" _tooltipAlign="bottom">
20
+ z.B.
21
+ </KolAbbr>{' '}
22
+ eine Abkürzung (unten).
23
+ </p>
24
+ <p>
25
+ Ich bin{' '}
26
+ <KolAbbr _title="Abkürzung" _tooltipAlign="left">
27
+ z.B.
28
+ </KolAbbr>{' '}
29
+ eine Abkürzung (links).
30
+ </p>
31
+ <p>
32
+ Ich bin{' '}
33
+ <KolAbbr _title="Abkürzung" _tooltipAlign="top">
34
+ z.B.
35
+ </KolAbbr>{' '}
36
+ eine Abkürzung (oben).
37
+ </p>
38
+ </>
39
+ );
package/src/components/abbr/routes.ts ADDED
@@ -0,0 +1,9 @@
1
+ import { Routes } from '../../shares/types';
2
+
3
+ import { AbbrBasic } from './basic';
4
+
5
+ export const ABBR_ROUTES: Routes = {
6
+ abbr: {
7
+ basic: AbbrBasic,
8
+ },
9
+ };
package/src/components/accordion/basic.tsx ADDED
@@ -0,0 +1,18 @@
1
+ import React from 'react';
2
+ import { KolAccordion } from '@public-ui/react';
3
+
4
+ import { FC } from 'react';
5
+
6
+ export const AccordionBasic: FC = () => (
7
+ <div className="grid gap-4">
8
+ <KolAccordion _heading="Überschrift Accordion Tab 1" _level={1}>
9
+ <div slot="content">Inhalt Accordion Tab 1</div>
10
+ </KolAccordion>
11
+ <KolAccordion _heading="Überschrift Accordion Tab 2" _level={1} _open>
12
+ <div slot="content">Inhalt Accordion Tab 2</div>
13
+ </KolAccordion>
14
+ <KolAccordion _heading="Überschrift Accordion Tab 3" _level={1}>
15
+ <div slot="content">Inhalt Accordion Tab 3</div>
16
+ </KolAccordion>
17
+ </div>
18
+ );
package/src/components/accordion/header.tsx ADDED
@@ -0,0 +1,17 @@
1
+ import React from 'react';
2
+ import { KolAccordion } from '@public-ui/react';
3
+
4
+ import { FC } from 'react';
5
+
6
+ export const AccordionHeader: FC = () => (
7
+ <div className="grid gap-4">
8
+ <KolAccordion _heading="Accordion mit Header" _level={1} _open>
9
+ <div slot="header">Hier kann noch was in den Header</div>
10
+ <div slot="content">
11
+ Dieser Inhalt wird direkt beim Laden der Seite angezeigt.
12
+ <br />
13
+ Mit Klick auf die Überschrift wird der Inhalt versteckt.
14
+ </div>
15
+ </KolAccordion>
16
+ </div>
17
+ );
package/src/components/accordion/headlines.tsx ADDED
@@ -0,0 +1,27 @@
1
+ import React from 'react';
2
+ import { KolAccordion } from '@public-ui/react';
3
+
4
+ import { FC } from 'react';
5
+
6
+ export const AccordionHeadlines: FC = () => (
7
+ <div className="grid gap-4">
8
+ <KolAccordion _heading="Überschrift Level 1" _level={1}>
9
+ <div slot="content">Inhalt Accordion Tab 1</div>
10
+ </KolAccordion>
11
+ <KolAccordion _heading="Überschrift Level 2" _level={2}>
12
+ <div slot="content">Inhalt Accordion Tab 2</div>
13
+ </KolAccordion>
14
+ <KolAccordion _heading="Überschrift Level 3" _level={3}>
15
+ <div slot="content">Inhalt Accordion Tab 3</div>
16
+ </KolAccordion>
17
+ <KolAccordion _heading="Überschrift Level 4" _level={4}>
18
+ <div slot="content">Inhalt Accordion Tab 4</div>
19
+ </KolAccordion>
20
+ <KolAccordion _heading="Überschrift Level 5" _level={5}>
21
+ <div slot="content">Inhalt Accordion Tab 5</div>
22
+ </KolAccordion>
23
+ <KolAccordion _heading="Überschrift Level 6" _level={6}>
24
+ <div slot="content">Inhalt Accordion Tab 6</div>
25
+ </KolAccordion>
26
+ </div>
27
+ );
package/src/components/accordion/list.tsx ADDED
@@ -0,0 +1,32 @@
1
+ import React from 'react';
2
+ import { KolAccordion, KolButton } from '@public-ui/react';
3
+
4
+ import { FC } from 'react';
5
+
6
+ const LIST = [
7
+ {
8
+ heading: 'Überschrift Accordion Tab 1',
9
+ content: 'Inhalt Accordion Tab 1',
10
+ },
11
+ {
12
+ heading: 'Überschrift Accordion Tab 2',
13
+ content: 'Inhalt Accordion Tab 2',
14
+ },
15
+ {
16
+ heading: 'Überschrift Accordion Tab 3',
17
+ content: 'Inhalt Accordion Tab 3',
18
+ },
19
+ ];
20
+
21
+ export const AccordionList: FC = () => (
22
+ <div className="grid gap-4">
23
+ {LIST.map(({ heading, content }, index) => (
24
+ <KolAccordion _heading={heading} _level={1} _open={index === 1} key={index}>
25
+ <p slot="header">
26
+ <KolButton _label={'Bearbeiten'} />
27
+ </p>
28
+ <p slot="content">{content}</p>
29
+ </KolAccordion>
30
+ ))}
31
+ </div>
32
+ );
package/src/components/accordion/routes.ts ADDED
@@ -0,0 +1,17 @@
1
+ import { Routes } from '../../shares/types';
2
+
3
+ import { AccordionBasic } from './basic';
4
+
5
+ import { AccordionHeader } from './header';
6
+
7
+ import { AccordionHeadlines } from './headlines';
8
+ import { AccordionList } from './list';
9
+
10
+ export const ACCORDION_ROUTES: Routes = {
11
+ accordion: {
12
+ basic: AccordionBasic,
13
+ header: AccordionHeader,
14
+ headlines: AccordionHeadlines,
15
+ list: AccordionList,
16
+ },
17
+ };
package/src/components/alert/basic.tsx ADDED
@@ -0,0 +1,37 @@
1
+ import React from 'react';
2
+ import { KolAlert } from '@public-ui/react';
3
+
4
+ import { HeadingLevel } from '@public-ui/components/dist/types/types/heading-level';
5
+
6
+ import { FC } from 'react';
7
+ import { AlertType, AlertVariant } from '@public-ui/components';
8
+
9
+ type PropsByType = {
10
+ level: HeadingLevel;
11
+ type: AlertType;
12
+ variant: AlertVariant;
13
+ };
14
+ type PropsBasic = {
15
+ variant: AlertVariant;
16
+ };
17
+
18
+ const AlertByType: FC<PropsByType> = ({ level, type, variant }) => (
19
+ <>
20
+ <KolAlert _heading="Das ist die Überschrift des Alert." _level={level} _type={type} _variant={variant}>
21
+ Das ist der Text des Alert.
22
+ </KolAlert>
23
+ <KolAlert _type={type} _variant={variant}>
24
+ In diesem Alert wird nur der Text ohne Überschrift verwendet.
25
+ </KolAlert>
26
+ </>
27
+ );
28
+
29
+ export const AlertBasic: FC<PropsBasic> = ({ variant }) => (
30
+ <div className="grid gap-4">
31
+ <AlertByType level={1} type="default" variant={variant} />
32
+ <AlertByType level={2} type="error" variant={variant} />
33
+ <AlertByType level={3} type="info" variant={variant} />
34
+ <AlertByType level={4} type="success" variant={variant} />
35
+ <AlertByType level={5} type="warning" variant={variant} />
36
+ </div>
37
+ );
package/src/components/alert/card-msg.tsx ADDED
@@ -0,0 +1,11 @@
1
+ import React from 'react';
2
+ import { FC } from 'react';
3
+
4
+ import { AlertBasic } from './basic';
5
+
6
+ export const AlertCardMsg: FC = () => (
7
+ <div className="grid">
8
+ <AlertBasic variant="card" />
9
+ <AlertBasic variant="msg" />
10
+ </div>
11
+ );
package/src/components/alert/html.tsx ADDED
@@ -0,0 +1,29 @@
1
+ import React from 'react';
2
+ import { KolAlert } from '@public-ui/react';
3
+
4
+ import { FC } from 'react';
5
+
6
+ export const AlertHtml: FC = () => (
7
+ <div>
8
+ <KolAlert _heading="Ausgabe von HTML-Code im Alert" _type="info">
9
+ {' '}
10
+ <h2 className="mt-2 mb-3">Hier wird eine H2-Überschrift ausgegeben</h2>
11
+ <div className="row">
12
+ <div className="col-12 col-sm-6">
13
+ <h4>Text in einer linken Spalte</h4>
14
+ <p>
15
+ Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quidem sed fugiat dolorum ratione et, ullam officia nobis nihil debitis, consectetur dicta
16
+ accusantium. Vitae debitis, quibusdam vel recusandae deleniti placeat dolorem?
17
+ </p>
18
+ </div>
19
+ <div className="col-12 col-sm-6">
20
+ <h4>Text in einer rechten Spalte</h4>
21
+ <p>
22
+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quod beatae officiis, velit nam dicta quae repellat perspiciatis explicabo illo. Possimus,
23
+ molestiae deleniti! Exercitationem blanditiis ducimus similique tempora ratione consequuntur eaque!
24
+ </p>
25
+ </div>
26
+ </div>
27
+ </KolAlert>
28
+ </div>
29
+ );
package/src/components/alert/routes.ts ADDED
@@ -0,0 +1,15 @@
1
+ import { Routes } from '../../shares/types';
2
+
3
+ import { AlertBasic } from './basic';
4
+
5
+ import { AlertCardMsg } from './card-msg';
6
+
7
+ import { AlertHtml } from './html';
8
+
9
+ export const ALERT_ROUTES: Routes = {
10
+ alert: {
11
+ basic: AlertBasic,
12
+ 'card-msg': AlertCardMsg,
13
+ html: AlertHtml,
14
+ },
15
+ };
package/src/components/avatar/basic.tsx ADDED
@@ -0,0 +1,10 @@
1
+ import { KolAvatar } from '@public-ui/react';
2
+ import React, { FC } from 'react';
3
+
4
+ export const AvatarBasic: FC = () => (
5
+ <div className="flex flex-wrap gap-4">
6
+ <KolAvatar _src="https://www.w3schools.com/howto/img_avatar.png" _label="Elke Mustermann" />
7
+ <KolAvatar _label="Elke Mustermann" />
8
+ <KolAvatar _label="Marianne" />
9
+ </div>
10
+ );
package/src/components/avatar/routes.ts ADDED
@@ -0,0 +1,8 @@
1
+ import { Routes } from '../../shares/types';
2
+ import { AvatarBasic } from './basic';
3
+
4
+ export const AVATAR_ROUTES: Routes = {
5
+ avatar: {
6
+ basic: AvatarBasic,
7
+ },
8
+ };
package/src/components/badge/basic.tsx ADDED
@@ -0,0 +1,18 @@
1
+ import React from 'react';
2
+ import { KolBadge } from '@public-ui/react';
3
+
4
+ import { FC } from 'react';
5
+
6
+ const PROPS = {
7
+ _label: 'Label',
8
+ };
9
+
10
+ export const BadgeBasic: FC = () => (
11
+ <div className="d-flex gap-2">
12
+ <KolBadge {...PROPS}></KolBadge>
13
+ <KolBadge _color="#B22222" {...PROPS}></KolBadge>
14
+ <KolBadge _color="#4682B4" {...PROPS}></KolBadge>
15
+ <KolBadge _color="#228B22" {...PROPS}></KolBadge>
16
+ <KolBadge _color="#8B008B" {...PROPS}></KolBadge>
17
+ </div>
18
+ );
package/src/components/badge/button.tsx ADDED
@@ -0,0 +1,25 @@
1
+ import React from 'react';
2
+ import { KolBadge } from '@public-ui/react';
3
+
4
+ import { FC } from 'react';
5
+
6
+ const PROPS = {
7
+ _label: 'Label',
8
+ _smartButton: {
9
+ _icon: 'codicon codicon-close',
10
+ _label: 'Entfernen',
11
+ _on: {
12
+ onClick: () => alert('clicked'),
13
+ },
14
+ },
15
+ };
16
+
17
+ export const BadgeButton: FC = () => (
18
+ <div className="d-flex gap-2">
19
+ <KolBadge {...PROPS}></KolBadge>
20
+ <KolBadge _color="#B22222" {...PROPS}></KolBadge>
21
+ <KolBadge _color="#4682B4" {...PROPS}></KolBadge>
22
+ <KolBadge _color="#228B22" {...PROPS}></KolBadge>
23
+ <KolBadge _color="#8B008B" {...PROPS}></KolBadge>
24
+ </div>
25
+ );
package/src/components/badge/routes.ts ADDED
@@ -0,0 +1,12 @@
1
+ import { Routes } from '../../shares/types';
2
+
3
+ import { BadgeBasic } from './basic';
4
+
5
+ import { BadgeButton } from './button';
6
+
7
+ export const BADGE_ROUTES: Routes = {
8
+ badge: {
9
+ basic: BadgeBasic,
10
+ button: BadgeButton,
11
+ },
12
+ };
package/src/components/breadcrumb/basic.tsx ADDED
@@ -0,0 +1,53 @@
1
+ import React from 'react';
2
+ import { KolBreadcrumb } from '@public-ui/react';
3
+
4
+ import { FC } from 'react';
5
+
6
+ export const BreadcrumbBasic: FC = () => (
7
+ <div className="grid gap-4">
8
+ <KolBreadcrumb
9
+ _ariaLabel="Breadcrumb aus Text-Links"
10
+ _links={[
11
+ { _label: 'Startseite', _href: '#/' },
12
+ { _label: 'Unterseite der Startseite', _href: '#/unterseite' },
13
+ {
14
+ _label: 'Unterseite der Unterseite',
15
+ _href: '#/unterseite/unterseite',
16
+ },
17
+ ]}
18
+ ></KolBreadcrumb>
19
+ <KolBreadcrumb
20
+ _ariaLabel="Breadcrumb aus Icons- oder Text-Links"
21
+ _links={[
22
+ {
23
+ _label: 'Startseite',
24
+ _icon: 'codicon codicon-home',
25
+ _hideLabel: true,
26
+ _href: '#/',
27
+ },
28
+ {
29
+ _label: 'Unterseite der Startseite mit sehr langem Link-Test',
30
+ _href: '#/unterseite',
31
+ },
32
+ {
33
+ _label: 'Unterseite der Unterseite',
34
+ _href: '#/unterseite/unterseite',
35
+ },
36
+ ]}
37
+ ></KolBreadcrumb>
38
+ <KolBreadcrumb
39
+ _ariaLabel="Breadcrumb aus Icons- und Text-Links"
40
+ _links={[
41
+ { _label: 'Startseite', _icon: 'codicon codicon-home', _href: '#/' },
42
+ {
43
+ _label: 'Unterseite der Startseite und ich_bin_ein_echt_langes_zusammengesetztes_Worte_und_versuche_das_Layout_zu_brechen',
44
+ _href: '#/unterseite',
45
+ },
46
+ {
47
+ _label: 'Unterseite der Unterseite',
48
+ _href: '#/unterseite/unterseite',
49
+ },
50
+ ]}
51
+ ></KolBreadcrumb>
52
+ </div>
53
+ );