@dktunited-techoff/techoff-suite-ui 1.1.0 → 1.3.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 (413) hide show
  1. package/package.json +1 -1
  2. package/{lib/components/Button/Button.css → src/components/TsButton/TsButton.css} +18 -18
  3. package/src/components/TsButton/TsButton.tsx +34 -0
  4. package/src/components/{Button/Button.types.ts → TsButton/TsButton.types.ts} +1 -1
  5. package/{esm/components/Button/__stories__/Button.stories.mdx → src/components/TsButton/__stories__/TsButton.stories.mdx} +4 -4
  6. package/{esm/components/Icon/Icon.css → src/components/TsIcon/TsIcon.css} +4 -4
  7. package/src/components/TsIcon/TsIcon.tsx +13 -0
  8. package/src/components/TsIcon/TsIcon.types.ts +1 -0
  9. package/{lib/components/Icon/__stories__/Icon.stories.mdx → src/components/TsIcon/__stories__/TsIcon.stories.mdx} +4 -4
  10. package/{lib/components/Loader/Loader.css → src/components/TsLoader/TsLoader.css} +5 -5
  11. package/src/components/TsLoader/TsLoader.tsx +7 -0
  12. package/src/components/TsLoader/TsLoader.types.ts +1 -0
  13. package/{lib/components/Loader/__stories__/Loader.stories.mdx → src/components/TsLoader/__stories__/TsLoader.stories.mdx} +3 -3
  14. package/src/index.ts +6 -11
  15. package/{esm/layouts/Header/Header.css → src/layouts/TsHeader/TsHeader.css} +25 -25
  16. package/src/layouts/TsHeader/TsHeader.tsx +20 -0
  17. package/src/layouts/{Header/Header.types.ts → TsHeader/TsHeader.types.ts} +4 -4
  18. package/src/layouts/TsHeader/TsHeaderProfile.tsx +56 -0
  19. package/src/layouts/{Header/HeaderSearch.tsx → TsHeader/TsHeaderSearch.tsx} +15 -15
  20. package/src/layouts/{Header/__stories__/Header.stories.mdx → TsHeader/__stories__/TsHeader.stories.mdx} +12 -12
  21. package/src/layouts/{Navigation/Navigation.css → TsNavigation/TsNavigation.css} +16 -16
  22. package/src/layouts/TsNavigation/TsNavigation.tsx +54 -0
  23. package/src/layouts/TsNavigation/TsNavigation.types.ts +4 -0
  24. package/src/layouts/TsNavigation/__stories__/TsNavigation.stories.mdx +51 -0
  25. package/esm/assets/fonts/Montserrat-Medium.ttf +0 -0
  26. package/esm/assets/fonts/Roboto-Light.ttf +0 -0
  27. package/esm/components/Button/Button.css +0 -91
  28. package/esm/components/Button/Button.d.ts +0 -5
  29. package/esm/components/Button/Button.js +0 -17
  30. package/esm/components/Button/Button.js.map +0 -1
  31. package/esm/components/Button/Button.types.d.ts +0 -9
  32. package/esm/components/Button/Button.types.js +0 -2
  33. package/esm/components/Button/Button.types.js.map +0 -1
  34. package/esm/components/Checkbox/Checkbox.css +0 -72
  35. package/esm/components/Checkbox/Checkbox.d.ts +0 -4
  36. package/esm/components/Checkbox/Checkbox.js +0 -18
  37. package/esm/components/Checkbox/Checkbox.js.map +0 -1
  38. package/esm/components/Checkbox/Checkbox.types.d.ts +0 -7
  39. package/esm/components/Checkbox/Checkbox.types.js +0 -2
  40. package/esm/components/Checkbox/Checkbox.types.js.map +0 -1
  41. package/esm/components/Checkbox/__stories__/Checkbox.stories.mdx +0 -56
  42. package/esm/components/Icon/Icon.d.ts +0 -4
  43. package/esm/components/Icon/Icon.js +0 -12
  44. package/esm/components/Icon/Icon.js.map +0 -1
  45. package/esm/components/Icon/Icon.types.d.ts +0 -4
  46. package/esm/components/Icon/Icon.types.js +0 -2
  47. package/esm/components/Icon/Icon.types.js.map +0 -1
  48. package/esm/components/Icon/__stories__/Icon.stories.mdx +0 -89
  49. package/esm/components/Icon/icons/index.d.ts +0 -3
  50. package/esm/components/Icon/icons/index.js +0 -59
  51. package/esm/components/Icon/icons/index.js.map +0 -1
  52. package/esm/components/Inputs/BooleanInput/BooleanInput.css +0 -58
  53. package/esm/components/Inputs/BooleanInput/BooleanInput.d.ts +0 -4
  54. package/esm/components/Inputs/BooleanInput/BooleanInput.js +0 -13
  55. package/esm/components/Inputs/BooleanInput/BooleanInput.js.map +0 -1
  56. package/esm/components/Inputs/BooleanInput/BooleanInput.tsx +0 -24
  57. package/esm/components/Inputs/BooleanInput/BooleanInput.types.d.ts +0 -8
  58. package/esm/components/Inputs/BooleanInput/BooleanInput.types.js +0 -2
  59. package/esm/components/Inputs/BooleanInput/BooleanInput.types.js.map +0 -1
  60. package/esm/components/Inputs/BooleanInput/BooleanInput.types.ts +0 -8
  61. package/esm/components/Inputs/BooleanInput/__stories__/BooleanInput.stories.mdx +0 -53
  62. package/esm/components/Inputs/Input/Input.css +0 -97
  63. package/esm/components/Inputs/Input/Input.d.ts +0 -4
  64. package/esm/components/Inputs/Input/Input.js +0 -26
  65. package/esm/components/Inputs/Input/Input.js.map +0 -1
  66. package/esm/components/Inputs/Input/Input.tsx +0 -67
  67. package/esm/components/Inputs/Input/Input.types.d.ts +0 -14
  68. package/esm/components/Inputs/Input/Input.types.js +0 -2
  69. package/esm/components/Inputs/Input/Input.types.js.map +0 -1
  70. package/esm/components/Inputs/Input/Input.types.ts +0 -15
  71. package/esm/components/Inputs/Input/__stories__/Input.stories.mdx +0 -95
  72. package/esm/components/Loader/Loader.css +0 -42
  73. package/esm/components/Loader/Loader.d.ts +0 -4
  74. package/esm/components/Loader/Loader.js +0 -6
  75. package/esm/components/Loader/Loader.js.map +0 -1
  76. package/esm/components/Loader/Loader.types.d.ts +0 -3
  77. package/esm/components/Loader/Loader.types.js +0 -2
  78. package/esm/components/Loader/Loader.types.js.map +0 -1
  79. package/esm/components/Loader/__stories__/Loader.stories.mdx +0 -30
  80. package/esm/components/Select/Select.css +0 -30
  81. package/esm/components/Select/Select.d.ts +0 -4
  82. package/esm/components/Select/Select.js +0 -14
  83. package/esm/components/Select/Select.js.map +0 -1
  84. package/esm/components/Select/Select.types.d.ts +0 -7
  85. package/esm/components/Select/Select.types.js +0 -2
  86. package/esm/components/Select/Select.types.js.map +0 -1
  87. package/esm/components/Select/__stories__/Select.stories.mdx +0 -44
  88. package/esm/hooks/use-click-outside.d.ts +0 -2
  89. package/esm/hooks/use-click-outside.js +0 -14
  90. package/esm/hooks/use-click-outside.js.map +0 -1
  91. package/esm/index.d.ts +0 -11
  92. package/esm/index.js +0 -12
  93. package/esm/index.js.map +0 -1
  94. package/esm/layouts/Header/Header.d.ts +0 -4
  95. package/esm/layouts/Header/Header.js +0 -14
  96. package/esm/layouts/Header/Header.js.map +0 -1
  97. package/esm/layouts/Header/Header.types.d.ts +0 -23
  98. package/esm/layouts/Header/Header.types.js +0 -2
  99. package/esm/layouts/Header/Header.types.js.map +0 -1
  100. package/esm/layouts/Header/HeaderProfile.d.ts +0 -5
  101. package/esm/layouts/Header/HeaderProfile.js +0 -38
  102. package/esm/layouts/Header/HeaderProfile.js.map +0 -1
  103. package/esm/layouts/Header/HeaderSearch.d.ts +0 -3
  104. package/esm/layouts/Header/HeaderSearch.js +0 -60
  105. package/esm/layouts/Header/HeaderSearch.js.map +0 -1
  106. package/esm/layouts/Header/__stories__/Header.stories.mdx +0 -71
  107. package/esm/layouts/Navigation/Navigation.css +0 -74
  108. package/esm/layouts/Navigation/Navigation.d.ts +0 -7
  109. package/esm/layouts/Navigation/Navigation.js +0 -29
  110. package/esm/layouts/Navigation/Navigation.js.map +0 -1
  111. package/esm/layouts/Navigation/Navigation.types.d.ts +0 -10
  112. package/esm/layouts/Navigation/Navigation.types.js +0 -2
  113. package/esm/layouts/Navigation/Navigation.types.js.map +0 -1
  114. package/esm/layouts/Navigation/__stories__/Navigation.stories.mdx +0 -51
  115. package/esm/utils/string.utils.d.ts +0 -1
  116. package/esm/utils/string.utils.js +0 -2
  117. package/esm/utils/string.utils.js.map +0 -1
  118. package/lib/assets/fonts/Montserrat-Medium.ttf +0 -0
  119. package/lib/assets/fonts/Roboto-Light.ttf +0 -0
  120. package/lib/components/Button/Button.d.ts +0 -5
  121. package/lib/components/Button/Button.js +0 -21
  122. package/lib/components/Button/Button.js.map +0 -1
  123. package/lib/components/Button/Button.types.d.ts +0 -9
  124. package/lib/components/Button/Button.types.js +0 -3
  125. package/lib/components/Button/Button.types.js.map +0 -1
  126. package/lib/components/Button/__stories__/Button.stories.mdx +0 -74
  127. package/lib/components/Checkbox/Checkbox.css +0 -72
  128. package/lib/components/Checkbox/Checkbox.d.ts +0 -4
  129. package/lib/components/Checkbox/Checkbox.js +0 -22
  130. package/lib/components/Checkbox/Checkbox.js.map +0 -1
  131. package/lib/components/Checkbox/Checkbox.types.d.ts +0 -7
  132. package/lib/components/Checkbox/Checkbox.types.js +0 -3
  133. package/lib/components/Checkbox/Checkbox.types.js.map +0 -1
  134. package/lib/components/Checkbox/__stories__/Checkbox.stories.mdx +0 -56
  135. package/lib/components/Icon/Icon.css +0 -26
  136. package/lib/components/Icon/Icon.d.ts +0 -4
  137. package/lib/components/Icon/Icon.js +0 -16
  138. package/lib/components/Icon/Icon.js.map +0 -1
  139. package/lib/components/Icon/Icon.types.d.ts +0 -4
  140. package/lib/components/Icon/Icon.types.js +0 -3
  141. package/lib/components/Icon/Icon.types.js.map +0 -1
  142. package/lib/components/Icon/icons/add-circle.svg +0 -1
  143. package/lib/components/Icon/icons/add.svg +0 -1
  144. package/lib/components/Icon/icons/alert-circle-filled.svg +0 -1
  145. package/lib/components/Icon/icons/alert-circle.svg +0 -1
  146. package/lib/components/Icon/icons/alert-triangle-filled.svg +0 -1
  147. package/lib/components/Icon/icons/alert-triangle.svg +0 -1
  148. package/lib/components/Icon/icons/arrow-diagonal-collapse.svg +0 -1
  149. package/lib/components/Icon/icons/arrow-diagonal-expand.svg +0 -1
  150. package/lib/components/Icon/icons/arrow-down.svg +0 -1
  151. package/lib/components/Icon/icons/arrow-go-back.svg +0 -1
  152. package/lib/components/Icon/icons/arrow-left-right.svg +0 -1
  153. package/lib/components/Icon/icons/arrow-left.svg +0 -1
  154. package/lib/components/Icon/icons/arrow-right.svg +0 -1
  155. package/lib/components/Icon/icons/arrow-up-down.svg +0 -1
  156. package/lib/components/Icon/icons/arrow-up.svg +0 -1
  157. package/lib/components/Icon/icons/award.svg +0 -1
  158. package/lib/components/Icon/icons/check-circle-filled.svg +0 -1
  159. package/lib/components/Icon/icons/check-circle-timer.svg +0 -7
  160. package/lib/components/Icon/icons/check-circle.svg +0 -1
  161. package/lib/components/Icon/icons/check-square-filled.svg +0 -1
  162. package/lib/components/Icon/icons/check-square.svg +0 -1
  163. package/lib/components/Icon/icons/check.svg +0 -1
  164. package/lib/components/Icon/icons/chevron-down.svg +0 -1
  165. package/lib/components/Icon/icons/chevron-left.svg +0 -1
  166. package/lib/components/Icon/icons/chevron-right.svg +0 -1
  167. package/lib/components/Icon/icons/chevron-up.svg +0 -1
  168. package/lib/components/Icon/icons/circle.svg +0 -1
  169. package/lib/components/Icon/icons/close-circle.svg +0 -1
  170. package/lib/components/Icon/icons/close.svg +0 -1
  171. package/lib/components/Icon/icons/currency-euro.svg +0 -1
  172. package/lib/components/Icon/icons/download.svg +0 -1
  173. package/lib/components/Icon/icons/edit.svg +0 -1
  174. package/lib/components/Icon/icons/external-link.svg +0 -1
  175. package/lib/components/Icon/icons/filter-off.svg +0 -1
  176. package/lib/components/Icon/icons/filter.svg +0 -1
  177. package/lib/components/Icon/icons/flashlight-off.svg +0 -1
  178. package/lib/components/Icon/icons/flashlight.svg +0 -1
  179. package/lib/components/Icon/icons/header-bikestudio.svg +0 -32
  180. package/lib/components/Icon/icons/header-nsc-helmet.svg +0 -32
  181. package/lib/components/Icon/icons/header-opticost.svg +0 -32
  182. package/lib/components/Icon/icons/header-repairability.svg +0 -32
  183. package/lib/components/Icon/icons/heart-filled.svg +0 -1
  184. package/lib/components/Icon/icons/heart.svg +0 -1
  185. package/lib/components/Icon/icons/history.svg +0 -1
  186. package/lib/components/Icon/icons/home.svg +0 -1
  187. package/lib/components/Icon/icons/index.d.ts +0 -3
  188. package/lib/components/Icon/icons/index.js +0 -62
  189. package/lib/components/Icon/icons/index.js.map +0 -1
  190. package/lib/components/Icon/icons/index.ts +0 -58
  191. package/lib/components/Icon/icons/link.svg +0 -1
  192. package/lib/components/Icon/icons/list-settings.svg +0 -1
  193. package/lib/components/Icon/icons/lock.svg +0 -1
  194. package/lib/components/Icon/icons/loop-right.svg +0 -1
  195. package/lib/components/Icon/icons/question-circle.svg +0 -1
  196. package/lib/components/Icon/icons/save.svg +0 -1
  197. package/lib/components/Icon/icons/search.svg +0 -1
  198. package/lib/components/Icon/icons/seedling-circle.svg +0 -12
  199. package/lib/components/Icon/icons/square.svg +0 -1
  200. package/lib/components/Icon/icons/tools.svg +0 -1
  201. package/lib/components/Icon/icons/user.svg +0 -1
  202. package/lib/components/Inputs/BooleanInput/BooleanInput.css +0 -58
  203. package/lib/components/Inputs/BooleanInput/BooleanInput.d.ts +0 -4
  204. package/lib/components/Inputs/BooleanInput/BooleanInput.js +0 -17
  205. package/lib/components/Inputs/BooleanInput/BooleanInput.js.map +0 -1
  206. package/lib/components/Inputs/BooleanInput/BooleanInput.tsx +0 -24
  207. package/lib/components/Inputs/BooleanInput/BooleanInput.types.d.ts +0 -8
  208. package/lib/components/Inputs/BooleanInput/BooleanInput.types.js +0 -3
  209. package/lib/components/Inputs/BooleanInput/BooleanInput.types.js.map +0 -1
  210. package/lib/components/Inputs/BooleanInput/BooleanInput.types.ts +0 -8
  211. package/lib/components/Inputs/BooleanInput/__stories__/BooleanInput.stories.mdx +0 -53
  212. package/lib/components/Inputs/Input/Input.css +0 -97
  213. package/lib/components/Inputs/Input/Input.d.ts +0 -4
  214. package/lib/components/Inputs/Input/Input.js +0 -30
  215. package/lib/components/Inputs/Input/Input.js.map +0 -1
  216. package/lib/components/Inputs/Input/Input.tsx +0 -67
  217. package/lib/components/Inputs/Input/Input.types.d.ts +0 -14
  218. package/lib/components/Inputs/Input/Input.types.js +0 -3
  219. package/lib/components/Inputs/Input/Input.types.js.map +0 -1
  220. package/lib/components/Inputs/Input/Input.types.ts +0 -15
  221. package/lib/components/Inputs/Input/__stories__/Input.stories.mdx +0 -95
  222. package/lib/components/Loader/Loader.d.ts +0 -4
  223. package/lib/components/Loader/Loader.js +0 -10
  224. package/lib/components/Loader/Loader.js.map +0 -1
  225. package/lib/components/Loader/Loader.types.d.ts +0 -3
  226. package/lib/components/Loader/Loader.types.js +0 -3
  227. package/lib/components/Loader/Loader.types.js.map +0 -1
  228. package/lib/components/Select/Select.css +0 -30
  229. package/lib/components/Select/Select.d.ts +0 -4
  230. package/lib/components/Select/Select.js +0 -18
  231. package/lib/components/Select/Select.js.map +0 -1
  232. package/lib/components/Select/Select.types.d.ts +0 -7
  233. package/lib/components/Select/Select.types.js +0 -3
  234. package/lib/components/Select/Select.types.js.map +0 -1
  235. package/lib/components/Select/__stories__/Select.stories.mdx +0 -44
  236. package/lib/hooks/use-click-outside.d.ts +0 -2
  237. package/lib/hooks/use-click-outside.js +0 -18
  238. package/lib/hooks/use-click-outside.js.map +0 -1
  239. package/lib/index.d.ts +0 -11
  240. package/lib/index.js +0 -28
  241. package/lib/index.js.map +0 -1
  242. package/lib/layouts/Header/Header.css +0 -186
  243. package/lib/layouts/Header/Header.d.ts +0 -4
  244. package/lib/layouts/Header/Header.js +0 -18
  245. package/lib/layouts/Header/Header.js.map +0 -1
  246. package/lib/layouts/Header/Header.types.d.ts +0 -23
  247. package/lib/layouts/Header/Header.types.js +0 -3
  248. package/lib/layouts/Header/Header.types.js.map +0 -1
  249. package/lib/layouts/Header/HeaderProfile.d.ts +0 -5
  250. package/lib/layouts/Header/HeaderProfile.js +0 -43
  251. package/lib/layouts/Header/HeaderProfile.js.map +0 -1
  252. package/lib/layouts/Header/HeaderSearch.d.ts +0 -3
  253. package/lib/layouts/Header/HeaderSearch.js +0 -64
  254. package/lib/layouts/Header/HeaderSearch.js.map +0 -1
  255. package/lib/layouts/Header/__stories__/Header.stories.mdx +0 -71
  256. package/lib/layouts/Navigation/Navigation.css +0 -74
  257. package/lib/layouts/Navigation/Navigation.d.ts +0 -7
  258. package/lib/layouts/Navigation/Navigation.js +0 -35
  259. package/lib/layouts/Navigation/Navigation.js.map +0 -1
  260. package/lib/layouts/Navigation/Navigation.types.d.ts +0 -10
  261. package/lib/layouts/Navigation/Navigation.types.js +0 -3
  262. package/lib/layouts/Navigation/Navigation.types.js.map +0 -1
  263. package/lib/layouts/Navigation/__stories__/Navigation.stories.mdx +0 -51
  264. package/lib/utils/string.utils.d.ts +0 -1
  265. package/lib/utils/string.utils.js +0 -6
  266. package/lib/utils/string.utils.js.map +0 -1
  267. package/src/components/Button/Button.css +0 -91
  268. package/src/components/Button/Button.tsx +0 -34
  269. package/src/components/Button/__stories__/Button.stories.mdx +0 -74
  270. package/src/components/Checkbox/Checkbox.css +0 -72
  271. package/src/components/Checkbox/Checkbox.tsx +0 -26
  272. package/src/components/Checkbox/Checkbox.types.ts +0 -7
  273. package/src/components/Checkbox/__stories__/Checkbox.stories.mdx +0 -56
  274. package/src/components/Icon/Icon.css +0 -26
  275. package/src/components/Icon/Icon.tsx +0 -13
  276. package/src/components/Icon/Icon.types.ts +0 -1
  277. package/src/components/Icon/__stories__/Icon.stories.mdx +0 -89
  278. package/src/components/Icon/icons/add-circle.svg +0 -1
  279. package/src/components/Icon/icons/add.svg +0 -1
  280. package/src/components/Icon/icons/alert-circle-filled.svg +0 -1
  281. package/src/components/Icon/icons/alert-circle.svg +0 -1
  282. package/src/components/Icon/icons/alert-triangle-filled.svg +0 -1
  283. package/src/components/Icon/icons/alert-triangle.svg +0 -1
  284. package/src/components/Icon/icons/arrow-diagonal-collapse.svg +0 -1
  285. package/src/components/Icon/icons/arrow-diagonal-expand.svg +0 -1
  286. package/src/components/Icon/icons/arrow-down.svg +0 -1
  287. package/src/components/Icon/icons/arrow-go-back.svg +0 -1
  288. package/src/components/Icon/icons/arrow-left-right.svg +0 -1
  289. package/src/components/Icon/icons/arrow-left.svg +0 -1
  290. package/src/components/Icon/icons/arrow-right.svg +0 -1
  291. package/src/components/Icon/icons/arrow-up-down.svg +0 -1
  292. package/src/components/Icon/icons/arrow-up.svg +0 -1
  293. package/src/components/Icon/icons/award.svg +0 -1
  294. package/src/components/Icon/icons/check-circle-filled.svg +0 -1
  295. package/src/components/Icon/icons/check-circle-timer.svg +0 -7
  296. package/src/components/Icon/icons/check-circle.svg +0 -1
  297. package/src/components/Icon/icons/check-square-filled.svg +0 -1
  298. package/src/components/Icon/icons/check-square.svg +0 -1
  299. package/src/components/Icon/icons/check.svg +0 -1
  300. package/src/components/Icon/icons/chevron-down.svg +0 -1
  301. package/src/components/Icon/icons/chevron-left.svg +0 -1
  302. package/src/components/Icon/icons/chevron-right.svg +0 -1
  303. package/src/components/Icon/icons/chevron-up.svg +0 -1
  304. package/src/components/Icon/icons/circle.svg +0 -1
  305. package/src/components/Icon/icons/close-circle.svg +0 -1
  306. package/src/components/Icon/icons/close.svg +0 -1
  307. package/src/components/Icon/icons/currency-euro.svg +0 -1
  308. package/src/components/Icon/icons/download.svg +0 -1
  309. package/src/components/Icon/icons/edit.svg +0 -1
  310. package/src/components/Icon/icons/external-link.svg +0 -1
  311. package/src/components/Icon/icons/filter-off.svg +0 -1
  312. package/src/components/Icon/icons/filter.svg +0 -1
  313. package/src/components/Icon/icons/flashlight-off.svg +0 -1
  314. package/src/components/Icon/icons/flashlight.svg +0 -1
  315. package/src/components/Icon/icons/header-bikestudio.svg +0 -32
  316. package/src/components/Icon/icons/header-nsc-helmet.svg +0 -32
  317. package/src/components/Icon/icons/header-opticost.svg +0 -32
  318. package/src/components/Icon/icons/header-repairability.svg +0 -32
  319. package/src/components/Icon/icons/heart-filled.svg +0 -1
  320. package/src/components/Icon/icons/heart.svg +0 -1
  321. package/src/components/Icon/icons/history.svg +0 -1
  322. package/src/components/Icon/icons/home.svg +0 -1
  323. package/src/components/Icon/icons/index.ts +0 -58
  324. package/src/components/Icon/icons/link.svg +0 -1
  325. package/src/components/Icon/icons/list-settings.svg +0 -1
  326. package/src/components/Icon/icons/lock.svg +0 -1
  327. package/src/components/Icon/icons/loop-right.svg +0 -1
  328. package/src/components/Icon/icons/question-circle.svg +0 -1
  329. package/src/components/Icon/icons/save.svg +0 -1
  330. package/src/components/Icon/icons/search.svg +0 -1
  331. package/src/components/Icon/icons/seedling-circle.svg +0 -12
  332. package/src/components/Icon/icons/square.svg +0 -1
  333. package/src/components/Icon/icons/tools.svg +0 -1
  334. package/src/components/Icon/icons/user.svg +0 -1
  335. package/src/components/Inputs/BooleanInput/BooleanInput.css +0 -58
  336. package/src/components/Inputs/BooleanInput/BooleanInput.tsx +0 -24
  337. package/src/components/Inputs/BooleanInput/BooleanInput.types.ts +0 -8
  338. package/src/components/Inputs/BooleanInput/__stories__/BooleanInput.stories.mdx +0 -53
  339. package/src/components/Inputs/Input/Input.css +0 -97
  340. package/src/components/Inputs/Input/Input.tsx +0 -67
  341. package/src/components/Inputs/Input/Input.types.ts +0 -15
  342. package/src/components/Inputs/Input/__stories__/Input.stories.mdx +0 -95
  343. package/src/components/Loader/Loader.css +0 -42
  344. package/src/components/Loader/Loader.tsx +0 -7
  345. package/src/components/Loader/Loader.types.ts +0 -1
  346. package/src/components/Loader/__stories__/Loader.stories.mdx +0 -30
  347. package/src/components/Select/Select.css +0 -30
  348. package/src/components/Select/Select.tsx +0 -21
  349. package/src/components/Select/Select.types.ts +0 -3
  350. package/src/components/Select/__stories__/Select.stories.mdx +0 -44
  351. package/src/layouts/Header/Header.css +0 -186
  352. package/src/layouts/Header/Header.tsx +0 -20
  353. package/src/layouts/Header/HeaderProfile.tsx +0 -56
  354. package/src/layouts/Navigation/Navigation.tsx +0 -54
  355. package/src/layouts/Navigation/Navigation.types.ts +0 -4
  356. package/src/layouts/Navigation/__stories__/Navigation.stories.mdx +0 -51
  357. /package/{esm/components/Icon → src/components/TsIcon}/icons/add-circle.svg +0 -0
  358. /package/{esm/components/Icon → src/components/TsIcon}/icons/add.svg +0 -0
  359. /package/{esm/components/Icon → src/components/TsIcon}/icons/alert-circle-filled.svg +0 -0
  360. /package/{esm/components/Icon → src/components/TsIcon}/icons/alert-circle.svg +0 -0
  361. /package/{esm/components/Icon → src/components/TsIcon}/icons/alert-triangle-filled.svg +0 -0
  362. /package/{esm/components/Icon → src/components/TsIcon}/icons/alert-triangle.svg +0 -0
  363. /package/{esm/components/Icon → src/components/TsIcon}/icons/arrow-diagonal-collapse.svg +0 -0
  364. /package/{esm/components/Icon → src/components/TsIcon}/icons/arrow-diagonal-expand.svg +0 -0
  365. /package/{esm/components/Icon → src/components/TsIcon}/icons/arrow-down.svg +0 -0
  366. /package/{esm/components/Icon → src/components/TsIcon}/icons/arrow-go-back.svg +0 -0
  367. /package/{esm/components/Icon → src/components/TsIcon}/icons/arrow-left-right.svg +0 -0
  368. /package/{esm/components/Icon → src/components/TsIcon}/icons/arrow-left.svg +0 -0
  369. /package/{esm/components/Icon → src/components/TsIcon}/icons/arrow-right.svg +0 -0
  370. /package/{esm/components/Icon → src/components/TsIcon}/icons/arrow-up-down.svg +0 -0
  371. /package/{esm/components/Icon → src/components/TsIcon}/icons/arrow-up.svg +0 -0
  372. /package/{esm/components/Icon → src/components/TsIcon}/icons/award.svg +0 -0
  373. /package/{esm/components/Icon → src/components/TsIcon}/icons/check-circle-filled.svg +0 -0
  374. /package/{esm/components/Icon → src/components/TsIcon}/icons/check-circle-timer.svg +0 -0
  375. /package/{esm/components/Icon → src/components/TsIcon}/icons/check-circle.svg +0 -0
  376. /package/{esm/components/Icon → src/components/TsIcon}/icons/check-square-filled.svg +0 -0
  377. /package/{esm/components/Icon → src/components/TsIcon}/icons/check-square.svg +0 -0
  378. /package/{esm/components/Icon → src/components/TsIcon}/icons/check.svg +0 -0
  379. /package/{esm/components/Icon → src/components/TsIcon}/icons/chevron-down.svg +0 -0
  380. /package/{esm/components/Icon → src/components/TsIcon}/icons/chevron-left.svg +0 -0
  381. /package/{esm/components/Icon → src/components/TsIcon}/icons/chevron-right.svg +0 -0
  382. /package/{esm/components/Icon → src/components/TsIcon}/icons/chevron-up.svg +0 -0
  383. /package/{esm/components/Icon → src/components/TsIcon}/icons/circle.svg +0 -0
  384. /package/{esm/components/Icon → src/components/TsIcon}/icons/close-circle.svg +0 -0
  385. /package/{esm/components/Icon → src/components/TsIcon}/icons/close.svg +0 -0
  386. /package/{esm/components/Icon → src/components/TsIcon}/icons/currency-euro.svg +0 -0
  387. /package/{esm/components/Icon → src/components/TsIcon}/icons/download.svg +0 -0
  388. /package/{esm/components/Icon → src/components/TsIcon}/icons/edit.svg +0 -0
  389. /package/{esm/components/Icon → src/components/TsIcon}/icons/external-link.svg +0 -0
  390. /package/{esm/components/Icon → src/components/TsIcon}/icons/filter-off.svg +0 -0
  391. /package/{esm/components/Icon → src/components/TsIcon}/icons/filter.svg +0 -0
  392. /package/{esm/components/Icon → src/components/TsIcon}/icons/flashlight-off.svg +0 -0
  393. /package/{esm/components/Icon → src/components/TsIcon}/icons/flashlight.svg +0 -0
  394. /package/{esm/components/Icon → src/components/TsIcon}/icons/header-bikestudio.svg +0 -0
  395. /package/{esm/components/Icon → src/components/TsIcon}/icons/header-nsc-helmet.svg +0 -0
  396. /package/{esm/components/Icon → src/components/TsIcon}/icons/header-opticost.svg +0 -0
  397. /package/{esm/components/Icon → src/components/TsIcon}/icons/header-repairability.svg +0 -0
  398. /package/{esm/components/Icon → src/components/TsIcon}/icons/heart-filled.svg +0 -0
  399. /package/{esm/components/Icon → src/components/TsIcon}/icons/heart.svg +0 -0
  400. /package/{esm/components/Icon → src/components/TsIcon}/icons/history.svg +0 -0
  401. /package/{esm/components/Icon → src/components/TsIcon}/icons/home.svg +0 -0
  402. /package/{esm/components/Icon → src/components/TsIcon}/icons/index.ts +0 -0
  403. /package/{esm/components/Icon → src/components/TsIcon}/icons/link.svg +0 -0
  404. /package/{esm/components/Icon → src/components/TsIcon}/icons/list-settings.svg +0 -0
  405. /package/{esm/components/Icon → src/components/TsIcon}/icons/lock.svg +0 -0
  406. /package/{esm/components/Icon → src/components/TsIcon}/icons/loop-right.svg +0 -0
  407. /package/{esm/components/Icon → src/components/TsIcon}/icons/question-circle.svg +0 -0
  408. /package/{esm/components/Icon → src/components/TsIcon}/icons/save.svg +0 -0
  409. /package/{esm/components/Icon → src/components/TsIcon}/icons/search.svg +0 -0
  410. /package/{esm/components/Icon → src/components/TsIcon}/icons/seedling-circle.svg +0 -0
  411. /package/{esm/components/Icon → src/components/TsIcon}/icons/square.svg +0 -0
  412. /package/{esm/components/Icon → src/components/TsIcon}/icons/tools.svg +0 -0
  413. /package/{esm/components/Icon → src/components/TsIcon}/icons/user.svg +0 -0
@@ -1,58 +0,0 @@
1
- .boolean-input {
2
- display: flex;
3
- flex-direction: column;
4
- }
5
- .boolean-input > label {
6
- display: block;
7
- margin-bottom: 4px;
8
- color: #012b49;
9
- font-weight: 700;
10
- }
11
- .boolean-input-container {
12
- display: flex;
13
- }
14
-
15
- .boolean-input--disabled {
16
- opacity: 0.5;
17
- }
18
- .boolean-input--disabled .boolean-input-content > div {
19
- cursor: not-allowed;
20
- }
21
-
22
- /* ######## */
23
- /* INPUTS */
24
- .boolean-input-content {
25
- display: flex;
26
- height: 32px;
27
- border-radius: 6px;
28
- overflow: hidden;
29
- }
30
- .boolean-input-content > div {
31
- display: flex;
32
- align-items: center;
33
- justify-content: center;
34
- min-width: 44px;
35
- padding: 12px;
36
- background: #e7f3f9;
37
- color: #007dbc;
38
- font-weight: 700;
39
- cursor: pointer;
40
- transition: all ease 0.3s;
41
- }
42
- .boolean-input-content > div:first-child {
43
- border-right: 1px solid #007dbc;
44
- }
45
- .boolean-input-content > .boolean-input--selected {
46
- background: #007dbc;
47
- color: #ffffff;
48
- }
49
-
50
- /* ######### */
51
- /* GLOBALS */
52
- * {
53
- font-size: 14px;
54
- outline: none;
55
- box-sizing: border-box;
56
- font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
57
- 'Helvetica Neue', sans-serif;
58
- }
@@ -1,4 +0,0 @@
1
- import * as React from 'react';
2
- import { BooleanInputProps } from './BooleanInput.types';
3
- import './BooleanInput.css';
4
- export declare const BooleanInput: ({ label, labelFalse, labelTrue, disabled, value, onChange }: BooleanInputProps) => React.JSX.Element;
@@ -1,17 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.BooleanInput = void 0;
4
- const React = require("react");
5
- require("./BooleanInput.css");
6
- const BooleanInput = ({ label, labelFalse, labelTrue, disabled, value, onChange }) => {
7
- // #########
8
- // Rendering
9
- return (React.createElement("div", { className: `boolean-input ${disabled ? 'boolean-input--disabled' : ''}` },
10
- label && React.createElement("label", null, label),
11
- React.createElement("div", { className: "boolean-input-container" },
12
- React.createElement("div", { className: "boolean-input-content" },
13
- React.createElement("div", { className: value === true ? 'boolean-input--selected' : '', onClick: () => onChange(true) }, labelTrue),
14
- React.createElement("div", { className: value === false ? 'boolean-input--selected' : '', onClick: () => onChange(false) }, labelFalse)))));
15
- };
16
- exports.BooleanInput = BooleanInput;
17
- //# sourceMappingURL=BooleanInput.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"BooleanInput.js","sourceRoot":"","sources":["../../../../src/components/Inputs/BooleanInput/BooleanInput.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAE/B,8BAA4B;AAErB,MAAM,YAAY,GAAG,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAqB,EAAE,EAAE;IAC7G,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAE,iBAAiB,QAAQ,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,EAAE,EAAE;QACzE,KAAK,IAAI,mCAAQ,KAAK,CAAS;QAEhC,6BAAK,SAAS,EAAC,yBAAyB;YACtC,6BAAK,SAAS,EAAC,uBAAuB;gBACpC,6BAAK,SAAS,EAAE,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,IAC3F,SAAS,CACN;gBACN,6BAAK,SAAS,EAAE,KAAK,KAAK,KAAK,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,IAC7F,UAAU,CACP,CACF,CACF,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAnBW,QAAA,YAAY,gBAmBvB"}
@@ -1,24 +0,0 @@
1
- import * as React from 'react';
2
- import { BooleanInputProps } from './BooleanInput.types';
3
- import './BooleanInput.css';
4
-
5
- export const BooleanInput = ({ label, labelFalse, labelTrue, disabled, value, onChange }: BooleanInputProps) => {
6
- // #########
7
- // Rendering
8
- return (
9
- <div className={`boolean-input ${disabled ? 'boolean-input--disabled' : ''}`}>
10
- {label && <label>{label}</label>}
11
-
12
- <div className="boolean-input-container">
13
- <div className="boolean-input-content">
14
- <div className={value === true ? 'boolean-input--selected' : ''} onClick={() => onChange(true)}>
15
- {labelTrue}
16
- </div>
17
- <div className={value === false ? 'boolean-input--selected' : ''} onClick={() => onChange(false)}>
18
- {labelFalse}
19
- </div>
20
- </div>
21
- </div>
22
- </div>
23
- );
24
- };
@@ -1,8 +0,0 @@
1
- export type BooleanInputProps = {
2
- label?: string;
3
- labelFalse: string;
4
- labelTrue: string;
5
- disabled?: boolean;
6
- value?: boolean;
7
- onChange: (value: boolean) => void;
8
- };
@@ -1,3 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- //# sourceMappingURL=BooleanInput.types.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"BooleanInput.types.js","sourceRoot":"","sources":["../../../../src/components/Inputs/BooleanInput/BooleanInput.types.ts"],"names":[],"mappings":""}
@@ -1,8 +0,0 @@
1
- export type BooleanInputProps = {
2
- label?: string;
3
- labelFalse: string;
4
- labelTrue: string;
5
- disabled?: boolean;
6
- value?: boolean;
7
- onChange: (value: boolean) => void;
8
- };
@@ -1,53 +0,0 @@
1
- import React from 'react';
2
- import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
3
- import { BooleanInput } from '../BooleanInput';
4
-
5
- <Meta title="Components/Inputs/BooleanInput" />
6
-
7
- export const inputArgType = {
8
- label: {
9
- control: 'text',
10
- description: 'Label of the input.',
11
- },
12
- labelFalse: {
13
- control: 'text',
14
- description: 'Label of the FALSE value.',
15
- },
16
- labelTrue: {
17
- control: 'text',
18
- description: 'Label of the TRUE value.',
19
- },
20
- disabled: {
21
- control: 'boolean',
22
- description: 'Enable state of the input.',
23
- table: { defaultValue: { summary: 'false' } },
24
- },
25
- value: {
26
- control: 'boolean',
27
- description: 'Value of the input (can be undefined).',
28
- },
29
- onChange: {
30
- control: 'function',
31
- description: 'The handler called when clicking on input.',
32
- },
33
- };
34
-
35
- # Boolean Input
36
-
37
- The Boolean input is used to quickly switch between two possible states. It is commonly used for "yes/no" switches. The input can in some cases have a 3rd state, EMPTY.
38
-
39
- ## Overview
40
-
41
- <Canvas>
42
- <Story
43
- name="Overview"
44
- args={{ label: 'Label', labelFalse: 'No', labelTrue: 'Yes', disabled: false }}
45
- argTypes={inputArgType}
46
- >
47
- {args => <BooleanInput {...args} />}
48
- </Story>
49
- </Canvas>
50
-
51
- ## Props
52
-
53
- <ArgsTable story="Overview" of={BooleanInput} />
@@ -1,97 +0,0 @@
1
- .input {
2
- display: flex;
3
- flex-direction: column;
4
- }
5
- input[type='number'] {
6
- -moz-appearance: textfield;
7
- }
8
- input[type='number']::-webkit-inner-spin-button,
9
- input[type='number']::-webkit-outer-spin-button {
10
- -webkit-appearance: none;
11
- margin: 0;
12
- }
13
- .input > label {
14
- display: block;
15
- margin-bottom: 4px;
16
- color: #012b49;
17
- font-weight: 700;
18
- }
19
- .input--disabled {
20
- opacity: 0.5;
21
- }
22
- .input--disabled .boolean-input-container > div {
23
- cursor: not-allowed;
24
- }
25
- .input-container {
26
- position: relative;
27
- }
28
- .input-container > input {
29
- width: 100%;
30
- padding: 0 16px;
31
- border-radius: 6px;
32
- background: #ffffff;
33
- color: #007dbc;
34
- font-weight: 700;
35
- }
36
- .input-container > input::placeholder {
37
- font-weight: 400;
38
- }
39
- .input-container > .input-icon-container {
40
- position: absolute;
41
- top: 50%;
42
- right: 12px;
43
- display: flex;
44
- color: #4e5d6b;
45
- transform: translateY(-50%);
46
- }
47
- .input-container > .input-icon-container > * {
48
- margin-left: 8px;
49
- }
50
- .input--error {
51
- display: flex;
52
- align-items: center;
53
- color: #ed6a5e;
54
- font-size: 12px;
55
- font-weight: 600;
56
- }
57
- .input--error-label {
58
- margin-left: 4px;
59
- }
60
- .input-container--error > input {
61
- border: 2px solid #ed6a5e;
62
- }
63
-
64
- /* ########## */
65
- /* VARIANTS */
66
- .input-primary .input-container > input {
67
- border: 1px solid #d4d4d4;
68
- }
69
- .input-shadow .input-container > input {
70
- border: 0;
71
- box-shadow: 0px 12px 12px 0px #00537d1a;
72
- }
73
-
74
- /* ###### */
75
- /* SIZE */
76
- .input-md .input-container > input {
77
- height: 32px;
78
- }
79
- .input-lg .input-container > input {
80
- height: 40px;
81
- }
82
-
83
- /* ######### */
84
- /* ROUNDED */
85
- .input--rounded .input-container > input {
86
- border-radius: 9999px;
87
- }
88
-
89
- /* ######### */
90
- /* GLOBALS */
91
- * {
92
- font-size: 14px;
93
- outline: none;
94
- box-sizing: border-box;
95
- font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
96
- 'Helvetica Neue', sans-serif;
97
- }
@@ -1,4 +0,0 @@
1
- import * as React from 'react';
2
- import { InputProps } from './Input.types';
3
- import './Input.css';
4
- export declare const Input: ({ errorLabel, icon, label, size, type, value, variant, disabled, resetable, rounded, onChange, ...props }: InputProps) => React.JSX.Element;
@@ -1,30 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.Input = void 0;
4
- const React = require("react");
5
- const Icon_1 = require("../../Icon/Icon");
6
- require("./Input.css");
7
- const Input = ({ errorLabel, icon, label, size = 'md', type = 'text', value, variant = 'primary', disabled, resetable, rounded, onChange, ...props }) => {
8
- // ########
9
- // Handlers
10
- const handleChange = (e) => onChange(e.target.value);
11
- // #########
12
- // Rendering
13
- return (React.createElement("div", { className: `
14
- input input-${variant} input-${size}
15
- ${disabled ? 'input--disabled' : ''}
16
- ${rounded ? 'input--rounded' : ''}
17
- ` },
18
- label && React.createElement("label", null, label),
19
- React.createElement("div", { className: `input-container ${errorLabel ? 'input-container--error' : ''}` },
20
- React.createElement("input", { style: { paddingRight: icon && resetable ? '58px' : icon || resetable ? '36px' : '16px' }, type: type, value: value, disabled: disabled, onChange: handleChange, ...props }),
21
- (icon || resetable) && (React.createElement("div", { className: "input-icon-container" },
22
- resetable && (React.createElement("div", { style: { cursor: 'pointer' }, onClick: () => onChange('') },
23
- React.createElement(Icon_1.Icon, { name: "close", size: "16" }))),
24
- icon && React.createElement(Icon_1.Icon, { name: icon, size: "16" })))),
25
- errorLabel && (React.createElement("div", { className: "input--error" },
26
- React.createElement(Icon_1.Icon, { name: "alert-circle-filled" }),
27
- React.createElement("div", { className: "input--error-label" }, errorLabel)))));
28
- };
29
- exports.Input = Input;
30
- //# sourceMappingURL=Input.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../src/components/Inputs/Input/Input.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAE/B,0CAAuC;AAEvC,uBAAqB;AAEd,MAAM,KAAK,GAAG,CAAC,EACpB,UAAU,EACV,IAAI,EACJ,KAAK,EACL,IAAI,GAAG,IAAI,EACX,IAAI,GAAG,MAAM,EACb,KAAK,EACL,OAAO,GAAG,SAAS,EACnB,QAAQ,EACR,SAAS,EACT,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACG,EAAE,EAAE;IACf,WAAW;IACX,WAAW;IACX,MAAM,YAAY,GAAG,CAAC,CAAgC,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAEpF,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BACE,SAAS,EAAE;sBACK,OAAO,UAAU,IAAI;UACjC,QAAQ,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE;UACjC,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE;OAClC;QAEA,KAAK,IAAI,mCAAQ,KAAK,CAAS;QAEhC,6BAAK,SAAS,EAAE,mBAAmB,UAAU,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,EAAE;YAC7E,+BACE,KAAK,EAAE,EAAE,YAAY,EAAE,IAAI,IAAI,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,IAAI,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,EAAE,EACzF,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,YAAY,KAClB,KAAK,GACT;YAED,CAAC,IAAI,IAAI,SAAS,CAAC,IAAI,CACtB,6BAAK,SAAS,EAAC,sBAAsB;gBAClC,SAAS,IAAI,CACZ,6BAAK,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC;oBAC5D,oBAAC,WAAI,IAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,IAAI,GAAG,CAC3B,CACP;gBACA,IAAI,IAAI,oBAAC,WAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CACnC,CACP,CACG;QAEL,UAAU,IAAI,CACb,6BAAK,SAAS,EAAC,cAAc;YAC3B,oBAAC,WAAI,IAAC,IAAI,EAAC,qBAAqB,GAAG;YACnC,6BAAK,SAAS,EAAC,oBAAoB,IAAE,UAAU,CAAO,CAClD,CACP,CACG,CACP,CAAC;AACJ,CAAC,CAAC;AA5DW,QAAA,KAAK,SA4DhB"}
@@ -1,67 +0,0 @@
1
- import * as React from 'react';
2
- import { ChangeEvent } from 'react';
3
- import { Icon } from '../../Icon/Icon';
4
- import { InputProps } from './Input.types';
5
- import './Input.css';
6
-
7
- export const Input = ({
8
- errorLabel,
9
- icon,
10
- label,
11
- size = 'md',
12
- type = 'text',
13
- value,
14
- variant = 'primary',
15
- disabled,
16
- resetable,
17
- rounded,
18
- onChange,
19
- ...props
20
- }: InputProps) => {
21
- // ########
22
- // Handlers
23
- const handleChange = (e: ChangeEvent<HTMLInputElement>) => onChange(e.target.value);
24
-
25
- // #########
26
- // Rendering
27
- return (
28
- <div
29
- className={`
30
- input input-${variant} input-${size}
31
- ${disabled ? 'input--disabled' : ''}
32
- ${rounded ? 'input--rounded' : ''}
33
- `}
34
- >
35
- {label && <label>{label}</label>}
36
-
37
- <div className={`input-container ${errorLabel ? 'input-container--error' : ''}`}>
38
- <input
39
- style={{ paddingRight: icon && resetable ? '58px' : icon || resetable ? '36px' : '16px' }}
40
- type={type}
41
- value={value}
42
- disabled={disabled}
43
- onChange={handleChange}
44
- {...props}
45
- />
46
-
47
- {(icon || resetable) && (
48
- <div className="input-icon-container">
49
- {resetable && (
50
- <div style={{ cursor: 'pointer' }} onClick={() => onChange('')}>
51
- <Icon name="close" size="16" />
52
- </div>
53
- )}
54
- {icon && <Icon name={icon} size="16" />}
55
- </div>
56
- )}
57
- </div>
58
-
59
- {errorLabel && (
60
- <div className="input--error">
61
- <Icon name="alert-circle-filled" />
62
- <div className="input--error-label">{errorLabel}</div>
63
- </div>
64
- )}
65
- </div>
66
- );
67
- };
@@ -1,14 +0,0 @@
1
- import { InputHTMLAttributes } from 'react';
2
- export type InputProps = {
3
- errorLabel?: string;
4
- icon?: string;
5
- label?: string;
6
- size?: 'md' | 'lg';
7
- type?: 'text' | 'number';
8
- value: string;
9
- variant?: 'primary' | 'shadow';
10
- disabled?: boolean;
11
- resetable?: boolean;
12
- rounded?: boolean;
13
- onChange: (value: string) => void;
14
- } & Omit<Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'>, 'size'>;
@@ -1,3 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- //# sourceMappingURL=Input.types.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Input.types.js","sourceRoot":"","sources":["../../../../src/components/Inputs/Input/Input.types.ts"],"names":[],"mappings":""}
@@ -1,15 +0,0 @@
1
- import { InputHTMLAttributes } from 'react';
2
-
3
- export type InputProps = {
4
- errorLabel?: string;
5
- icon?: string;
6
- label?: string;
7
- size?: 'md' | 'lg';
8
- type?: 'text' | 'number';
9
- value: string;
10
- variant?: 'primary' | 'shadow';
11
- disabled?: boolean;
12
- resetable?: boolean;
13
- rounded?: boolean;
14
- onChange: (value: string) => void;
15
- } & Omit<Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'>, 'size'>;
@@ -1,95 +0,0 @@
1
- import React from 'react';
2
- import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
3
- import { Input } from '../Input';
4
- import { icons } from '../../../Icon/icons';
5
-
6
- <Meta title="Components/Inputs/Input" />
7
-
8
- export const inputArgTypes = {
9
- errorLabel: { control: 'text', description: 'Show error on the input.' },
10
- icon: {
11
- control: 'select',
12
- options: Object.keys(icons),
13
- description: 'Name of an icon.',
14
- },
15
- label: {
16
- control: 'text',
17
- description: 'Label of the input.',
18
- },
19
- placeholder: {
20
- control: 'text',
21
- description: 'Placeholder displayed when the input is empty.',
22
- },
23
- size: {
24
- control: 'inline-radio',
25
- options: ['md', 'lg'],
26
- description: 'Define the size of the input.',
27
- table: { defaultValue: { summary: 'md' } },
28
- },
29
- type: {
30
- control: 'inline-radio',
31
- options: ['text', 'number'],
32
- description: 'Type of the input.',
33
- table: { defaultValue: { summary: 'text' } },
34
- },
35
- value: {
36
- control: 'text',
37
- description: 'Value of the input.',
38
- },
39
- variant: {
40
- control: 'inline-radio',
41
- options: ['primary', 'shadow'],
42
- description: 'Variant of the input.',
43
- table: { defaultValue: { summary: 'primary' } },
44
- },
45
- disabled: {
46
- control: 'boolean',
47
- description: 'Disabled the input',
48
- table: { defaultValue: { summary: 'false' } },
49
- },
50
- resetable: {
51
- control: 'boolean',
52
- description: 'Reset the input value',
53
- table: { defaultValue: { summary: 'false' } },
54
- },
55
- rounded: {
56
- control: 'boolean',
57
- description: 'Rounded the input',
58
- table: { defaultValue: { summary: 'false' } },
59
- },
60
- onChange: {
61
- control: 'function',
62
- description: 'The handler called when the value of the input changes.',
63
- },
64
- };
65
-
66
- # Text Input
67
-
68
- Text input allows the user to enter content and data when the expected user input is a single line of text.
69
-
70
- ## Overview
71
-
72
- <Canvas>
73
- <Story
74
- name="Overview"
75
- args={{
76
- errorLabel: '',
77
- label: 'Label',
78
- placeholder: 'This is a placeholder',
79
- size: 'md',
80
- type: 'text',
81
- value: '',
82
- variant: 'primary',
83
- disabled: false,
84
- resetable: false,
85
- rounded: false,
86
- }}
87
- argTypes={inputArgTypes}
88
- >
89
- {args => <Input type="number" {...args} />}
90
- </Story>
91
- </Canvas>
92
-
93
- ## Props
94
-
95
- <ArgsTable story="Overview" of={Input} />
@@ -1,4 +0,0 @@
1
- import * as React from 'react';
2
- import { LoaderProps } from './Loader.types';
3
- import './Loader.css';
4
- export declare const Loader: ({ size }: LoaderProps) => React.JSX.Element;
@@ -1,10 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.Loader = void 0;
4
- const React = require("react");
5
- require("./Loader.css");
6
- const Loader = ({ size = 'md' }) => {
7
- return React.createElement("div", { className: `loader loader--${size}` });
8
- };
9
- exports.Loader = Loader;
10
- //# sourceMappingURL=Loader.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Loader.js","sourceRoot":"","sources":["../../../src/components/Loader/Loader.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAE/B,wBAAsB;AAEf,MAAM,MAAM,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,EAAe,EAAE,EAAE;IACrD,OAAO,6BAAK,SAAS,EAAE,kBAAkB,IAAI,EAAE,GAAI,CAAC;AACtD,CAAC,CAAC;AAFW,QAAA,MAAM,UAEjB"}
@@ -1,3 +0,0 @@
1
- export type LoaderProps = {
2
- size?: 'sm' | 'md' | 'lg';
3
- };
@@ -1,3 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- //# sourceMappingURL=Loader.types.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Loader.types.js","sourceRoot":"","sources":["../../../src/components/Loader/Loader.types.ts"],"names":[],"mappings":""}
@@ -1,30 +0,0 @@
1
- .select-container {
2
- display: flex;
3
- flex-direction: column;
4
- }
5
- .select-container > label {
6
- display: block;
7
- margin-bottom: 4px;
8
- color: #012b49;
9
- font-weight: 700;
10
- }
11
- .select-container > select {
12
- width: 100%;
13
- height: 32px;
14
- padding: 0 40px 0 12px;
15
- border: 1px solid #d4d4d4;
16
- border-radius: 6px;
17
- color: #007dbc;
18
- font-weight: 700;
19
- cursor: pointer;
20
- }
21
-
22
- /* ######### */
23
- /* GLOBALS */
24
- * {
25
- font-size: 14px;
26
- outline: none;
27
- box-sizing: border-box;
28
- font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
29
- 'Helvetica Neue', sans-serif;
30
- }
@@ -1,4 +0,0 @@
1
- import * as React from 'react';
2
- import { SelectProps } from './Select.types';
3
- import './Select.css';
4
- export declare const Select: ({ label, value, options, onChange }: SelectProps) => React.JSX.Element;
@@ -1,18 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.Select = void 0;
4
- const React = require("react");
5
- const react_1 = require("react");
6
- require("./Select.css");
7
- const Select = ({ label, value, options, onChange }) => {
8
- // ########
9
- // Handlers
10
- const handleChange = (e) => onChange(e.target.value);
11
- // #########
12
- // Rendering
13
- return (React.createElement("div", { className: "select-container" },
14
- label && React.createElement("label", null, label),
15
- React.createElement("select", { value: value, onChange: handleChange }, options.map((option, index) => (0, react_1.cloneElement)(option, { key: index, ...option.props })))));
16
- };
17
- exports.Select = Select;
18
- //# sourceMappingURL=Select.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,iCAAkD;AAElD,wBAAsB;AAEf,MAAM,MAAM,GAAG,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAe,EAAE,EAAE;IACzE,WAAW;IACX,WAAW;IACX,MAAM,YAAY,GAAG,CAAC,CAAiC,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAErF,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,kBAAkB;QAC9B,KAAK,IAAI,mCAAQ,KAAK,CAAS;QAChC,gCAAQ,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,YAAY,IACzC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,IAAA,oBAAY,EAAC,MAAM,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAC/E,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAfW,QAAA,MAAM,UAejB"}
@@ -1,7 +0,0 @@
1
- import { ReactElement } from 'react';
2
- export type SelectProps = {
3
- label?: string;
4
- value: string;
5
- options: ReactElement[];
6
- onChange: (val: string) => void;
7
- };
@@ -1,3 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- //# sourceMappingURL=Select.types.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Select.types.js","sourceRoot":"","sources":["../../../src/components/Select/Select.types.ts"],"names":[],"mappings":""}