@dktunited-techoff/techoff-suite-ui 0.9.2 → 0.9.3

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 (290) hide show
  1. package/package.json +1 -1
  2. package/src/layouts/Navigation/Navigation.types.ts +1 -1
  3. package/esm/assets/fonts/Montserrat-Medium.ttf +0 -0
  4. package/esm/assets/fonts/Roboto-Light.ttf +0 -0
  5. package/esm/components/Button/Button.css +0 -93
  6. package/esm/components/Button/Button.d.ts +0 -5
  7. package/esm/components/Button/Button.js +0 -17
  8. package/esm/components/Button/Button.js.map +0 -1
  9. package/esm/components/Button/Button.types.d.ts +0 -9
  10. package/esm/components/Button/Button.types.js +0 -2
  11. package/esm/components/Button/Button.types.js.map +0 -1
  12. package/esm/components/Button/__stories__/Button.stories.mdx +0 -74
  13. package/esm/components/Checkbox/Checkbox.css +0 -72
  14. package/esm/components/Checkbox/Checkbox.d.ts +0 -4
  15. package/esm/components/Checkbox/Checkbox.js +0 -18
  16. package/esm/components/Checkbox/Checkbox.js.map +0 -1
  17. package/esm/components/Checkbox/Checkbox.types.d.ts +0 -7
  18. package/esm/components/Checkbox/Checkbox.types.js +0 -2
  19. package/esm/components/Checkbox/Checkbox.types.js.map +0 -1
  20. package/esm/components/Checkbox/__stories__/Checkbox.stories.mdx +0 -56
  21. package/esm/components/Icon/Icon.css +0 -26
  22. package/esm/components/Icon/Icon.d.ts +0 -4
  23. package/esm/components/Icon/Icon.js +0 -12
  24. package/esm/components/Icon/Icon.js.map +0 -1
  25. package/esm/components/Icon/Icon.types.d.ts +0 -4
  26. package/esm/components/Icon/Icon.types.js +0 -2
  27. package/esm/components/Icon/Icon.types.js.map +0 -1
  28. package/esm/components/Icon/__stories__/Icon.stories.mdx +0 -89
  29. package/esm/components/Icon/icons/add-circle.svg +0 -1
  30. package/esm/components/Icon/icons/add.svg +0 -1
  31. package/esm/components/Icon/icons/alert-circle-filled.svg +0 -1
  32. package/esm/components/Icon/icons/alert-circle.svg +0 -1
  33. package/esm/components/Icon/icons/alert-triangle-filled.svg +0 -1
  34. package/esm/components/Icon/icons/alert-triangle.svg +0 -1
  35. package/esm/components/Icon/icons/arrow-diagonal-collapse.svg +0 -1
  36. package/esm/components/Icon/icons/arrow-diagonal-expand.svg +0 -1
  37. package/esm/components/Icon/icons/arrow-down.svg +0 -1
  38. package/esm/components/Icon/icons/arrow-go-back.svg +0 -1
  39. package/esm/components/Icon/icons/arrow-left-right.svg +0 -1
  40. package/esm/components/Icon/icons/arrow-left.svg +0 -1
  41. package/esm/components/Icon/icons/arrow-right.svg +0 -1
  42. package/esm/components/Icon/icons/arrow-up-down.svg +0 -1
  43. package/esm/components/Icon/icons/arrow-up.svg +0 -1
  44. package/esm/components/Icon/icons/check-circle-filled.svg +0 -1
  45. package/esm/components/Icon/icons/check-circle.svg +0 -1
  46. package/esm/components/Icon/icons/check-square-filled.svg +0 -1
  47. package/esm/components/Icon/icons/check-square.svg +0 -1
  48. package/esm/components/Icon/icons/check.svg +0 -1
  49. package/esm/components/Icon/icons/chevron-down.svg +0 -1
  50. package/esm/components/Icon/icons/chevron-left.svg +0 -1
  51. package/esm/components/Icon/icons/chevron-right.svg +0 -1
  52. package/esm/components/Icon/icons/chevron-up.svg +0 -1
  53. package/esm/components/Icon/icons/circle.svg +0 -1
  54. package/esm/components/Icon/icons/close-circle.svg +0 -1
  55. package/esm/components/Icon/icons/close.svg +0 -1
  56. package/esm/components/Icon/icons/currency-euro.svg +0 -1
  57. package/esm/components/Icon/icons/download.svg +0 -1
  58. package/esm/components/Icon/icons/edit.svg +0 -1
  59. package/esm/components/Icon/icons/external-link.svg +0 -1
  60. package/esm/components/Icon/icons/filter-off.svg +0 -1
  61. package/esm/components/Icon/icons/filter.svg +0 -1
  62. package/esm/components/Icon/icons/flashlight-off.svg +0 -1
  63. package/esm/components/Icon/icons/flashlight.svg +0 -1
  64. package/esm/components/Icon/icons/header-bikestudio.svg +0 -32
  65. package/esm/components/Icon/icons/header-nsc-helmet.svg +0 -32
  66. package/esm/components/Icon/icons/header-opticost.svg +0 -32
  67. package/esm/components/Icon/icons/header-repairability.svg +0 -32
  68. package/esm/components/Icon/icons/heart-filled.svg +0 -1
  69. package/esm/components/Icon/icons/heart.svg +0 -1
  70. package/esm/components/Icon/icons/home.svg +0 -1
  71. package/esm/components/Icon/icons/index.d.ts +0 -3
  72. package/esm/components/Icon/icons/index.js +0 -53
  73. package/esm/components/Icon/icons/index.js.map +0 -1
  74. package/esm/components/Icon/icons/index.ts +0 -52
  75. package/esm/components/Icon/icons/link.svg +0 -1
  76. package/esm/components/Icon/icons/list-settings.svg +0 -1
  77. package/esm/components/Icon/icons/lock.svg +0 -1
  78. package/esm/components/Icon/icons/save.svg +0 -1
  79. package/esm/components/Icon/icons/search.svg +0 -1
  80. package/esm/components/Icon/icons/square.svg +0 -1
  81. package/esm/components/Icon/icons/tools.svg +0 -1
  82. package/esm/components/Icon/icons/user.svg +0 -1
  83. package/esm/components/Inputs/BooleanInput/BooleanInput.css +0 -58
  84. package/esm/components/Inputs/BooleanInput/BooleanInput.d.ts +0 -4
  85. package/esm/components/Inputs/BooleanInput/BooleanInput.js +0 -13
  86. package/esm/components/Inputs/BooleanInput/BooleanInput.js.map +0 -1
  87. package/esm/components/Inputs/BooleanInput/BooleanInput.tsx +0 -24
  88. package/esm/components/Inputs/BooleanInput/BooleanInput.types.d.ts +0 -8
  89. package/esm/components/Inputs/BooleanInput/BooleanInput.types.js +0 -2
  90. package/esm/components/Inputs/BooleanInput/BooleanInput.types.js.map +0 -1
  91. package/esm/components/Inputs/BooleanInput/BooleanInput.types.ts +0 -8
  92. package/esm/components/Inputs/BooleanInput/__stories__/BooleanInput.stories.mdx +0 -53
  93. package/esm/components/Inputs/TextInput/TextInput.css +0 -58
  94. package/esm/components/Inputs/TextInput/TextInput.d.ts +0 -4
  95. package/esm/components/Inputs/TextInput/TextInput.js +0 -17
  96. package/esm/components/Inputs/TextInput/TextInput.js.map +0 -1
  97. package/esm/components/Inputs/TextInput/TextInput.tsx +0 -46
  98. package/esm/components/Inputs/TextInput/TextInput.types.d.ts +0 -12
  99. package/esm/components/Inputs/TextInput/TextInput.types.js +0 -2
  100. package/esm/components/Inputs/TextInput/TextInput.types.js.map +0 -1
  101. package/esm/components/Inputs/TextInput/TextInput.types.ts +0 -12
  102. package/esm/components/Inputs/TextInput/__stories__/TextInput.stories.mdx +0 -76
  103. package/esm/components/Loader/Loader.css +0 -42
  104. package/esm/components/Loader/Loader.d.ts +0 -4
  105. package/esm/components/Loader/Loader.js +0 -6
  106. package/esm/components/Loader/Loader.js.map +0 -1
  107. package/esm/components/Loader/Loader.types.d.ts +0 -3
  108. package/esm/components/Loader/Loader.types.js +0 -2
  109. package/esm/components/Loader/Loader.types.js.map +0 -1
  110. package/esm/components/Loader/__stories__/Loader.stories.mdx +0 -30
  111. package/esm/components/Select/Select.css +0 -30
  112. package/esm/components/Select/Select.d.ts +0 -4
  113. package/esm/components/Select/Select.js +0 -16
  114. package/esm/components/Select/Select.js.map +0 -1
  115. package/esm/components/Select/Select.types.d.ts +0 -6
  116. package/esm/components/Select/Select.types.js +0 -2
  117. package/esm/components/Select/Select.types.js.map +0 -1
  118. package/esm/components/Select/__stories__/Select.stories.mdx +0 -40
  119. package/esm/hooks/use-click-outside.d.ts +0 -2
  120. package/esm/hooks/use-click-outside.js +0 -14
  121. package/esm/hooks/use-click-outside.js.map +0 -1
  122. package/esm/index.d.ts +0 -9
  123. package/esm/index.js +0 -10
  124. package/esm/index.js.map +0 -1
  125. package/esm/layouts/Header/Header.css +0 -125
  126. package/esm/layouts/Header/Header.d.ts +0 -4
  127. package/esm/layouts/Header/Header.js +0 -14
  128. package/esm/layouts/Header/Header.js.map +0 -1
  129. package/esm/layouts/Header/Header.types.d.ts +0 -10
  130. package/esm/layouts/Header/Header.types.js +0 -2
  131. package/esm/layouts/Header/Header.types.js.map +0 -1
  132. package/esm/layouts/Header/HeaderProfile.d.ts +0 -3
  133. package/esm/layouts/Header/HeaderProfile.js +0 -35
  134. package/esm/layouts/Header/HeaderProfile.js.map +0 -1
  135. package/esm/layouts/Header/__stories__/Header.stories.mdx +0 -41
  136. package/esm/layouts/Navigation/Navigation.css +0 -74
  137. package/esm/layouts/Navigation/Navigation.d.ts +0 -6
  138. package/esm/layouts/Navigation/Navigation.js +0 -27
  139. package/esm/layouts/Navigation/Navigation.js.map +0 -1
  140. package/esm/layouts/Navigation/Navigation.types.d.ts +0 -10
  141. package/esm/layouts/Navigation/Navigation.types.js +0 -2
  142. package/esm/layouts/Navigation/Navigation.types.js.map +0 -1
  143. package/esm/layouts/Navigation/__stories__/Navigation.stories.mdx +0 -45
  144. package/esm/utils/string.utils.d.ts +0 -1
  145. package/esm/utils/string.utils.js +0 -2
  146. package/esm/utils/string.utils.js.map +0 -1
  147. package/lib/assets/fonts/Montserrat-Medium.ttf +0 -0
  148. package/lib/assets/fonts/Roboto-Light.ttf +0 -0
  149. package/lib/components/Button/Button.css +0 -93
  150. package/lib/components/Button/Button.d.ts +0 -5
  151. package/lib/components/Button/Button.js +0 -21
  152. package/lib/components/Button/Button.js.map +0 -1
  153. package/lib/components/Button/Button.types.d.ts +0 -9
  154. package/lib/components/Button/Button.types.js +0 -3
  155. package/lib/components/Button/Button.types.js.map +0 -1
  156. package/lib/components/Button/__stories__/Button.stories.mdx +0 -74
  157. package/lib/components/Checkbox/Checkbox.css +0 -72
  158. package/lib/components/Checkbox/Checkbox.d.ts +0 -4
  159. package/lib/components/Checkbox/Checkbox.js +0 -22
  160. package/lib/components/Checkbox/Checkbox.js.map +0 -1
  161. package/lib/components/Checkbox/Checkbox.types.d.ts +0 -7
  162. package/lib/components/Checkbox/Checkbox.types.js +0 -3
  163. package/lib/components/Checkbox/Checkbox.types.js.map +0 -1
  164. package/lib/components/Checkbox/__stories__/Checkbox.stories.mdx +0 -56
  165. package/lib/components/Icon/Icon.css +0 -26
  166. package/lib/components/Icon/Icon.d.ts +0 -4
  167. package/lib/components/Icon/Icon.js +0 -16
  168. package/lib/components/Icon/Icon.js.map +0 -1
  169. package/lib/components/Icon/Icon.types.d.ts +0 -4
  170. package/lib/components/Icon/Icon.types.js +0 -3
  171. package/lib/components/Icon/Icon.types.js.map +0 -1
  172. package/lib/components/Icon/__stories__/Icon.stories.mdx +0 -89
  173. package/lib/components/Icon/icons/add-circle.svg +0 -1
  174. package/lib/components/Icon/icons/add.svg +0 -1
  175. package/lib/components/Icon/icons/alert-circle-filled.svg +0 -1
  176. package/lib/components/Icon/icons/alert-circle.svg +0 -1
  177. package/lib/components/Icon/icons/alert-triangle-filled.svg +0 -1
  178. package/lib/components/Icon/icons/alert-triangle.svg +0 -1
  179. package/lib/components/Icon/icons/arrow-diagonal-collapse.svg +0 -1
  180. package/lib/components/Icon/icons/arrow-diagonal-expand.svg +0 -1
  181. package/lib/components/Icon/icons/arrow-down.svg +0 -1
  182. package/lib/components/Icon/icons/arrow-go-back.svg +0 -1
  183. package/lib/components/Icon/icons/arrow-left-right.svg +0 -1
  184. package/lib/components/Icon/icons/arrow-left.svg +0 -1
  185. package/lib/components/Icon/icons/arrow-right.svg +0 -1
  186. package/lib/components/Icon/icons/arrow-up-down.svg +0 -1
  187. package/lib/components/Icon/icons/arrow-up.svg +0 -1
  188. package/lib/components/Icon/icons/check-circle-filled.svg +0 -1
  189. package/lib/components/Icon/icons/check-circle.svg +0 -1
  190. package/lib/components/Icon/icons/check-square-filled.svg +0 -1
  191. package/lib/components/Icon/icons/check-square.svg +0 -1
  192. package/lib/components/Icon/icons/check.svg +0 -1
  193. package/lib/components/Icon/icons/chevron-down.svg +0 -1
  194. package/lib/components/Icon/icons/chevron-left.svg +0 -1
  195. package/lib/components/Icon/icons/chevron-right.svg +0 -1
  196. package/lib/components/Icon/icons/chevron-up.svg +0 -1
  197. package/lib/components/Icon/icons/circle.svg +0 -1
  198. package/lib/components/Icon/icons/close-circle.svg +0 -1
  199. package/lib/components/Icon/icons/close.svg +0 -1
  200. package/lib/components/Icon/icons/currency-euro.svg +0 -1
  201. package/lib/components/Icon/icons/download.svg +0 -1
  202. package/lib/components/Icon/icons/edit.svg +0 -1
  203. package/lib/components/Icon/icons/external-link.svg +0 -1
  204. package/lib/components/Icon/icons/filter-off.svg +0 -1
  205. package/lib/components/Icon/icons/filter.svg +0 -1
  206. package/lib/components/Icon/icons/flashlight-off.svg +0 -1
  207. package/lib/components/Icon/icons/flashlight.svg +0 -1
  208. package/lib/components/Icon/icons/header-bikestudio.svg +0 -32
  209. package/lib/components/Icon/icons/header-nsc-helmet.svg +0 -32
  210. package/lib/components/Icon/icons/header-opticost.svg +0 -32
  211. package/lib/components/Icon/icons/header-repairability.svg +0 -32
  212. package/lib/components/Icon/icons/heart-filled.svg +0 -1
  213. package/lib/components/Icon/icons/heart.svg +0 -1
  214. package/lib/components/Icon/icons/home.svg +0 -1
  215. package/lib/components/Icon/icons/index.d.ts +0 -3
  216. package/lib/components/Icon/icons/index.js +0 -56
  217. package/lib/components/Icon/icons/index.js.map +0 -1
  218. package/lib/components/Icon/icons/index.ts +0 -52
  219. package/lib/components/Icon/icons/link.svg +0 -1
  220. package/lib/components/Icon/icons/list-settings.svg +0 -1
  221. package/lib/components/Icon/icons/lock.svg +0 -1
  222. package/lib/components/Icon/icons/save.svg +0 -1
  223. package/lib/components/Icon/icons/search.svg +0 -1
  224. package/lib/components/Icon/icons/square.svg +0 -1
  225. package/lib/components/Icon/icons/tools.svg +0 -1
  226. package/lib/components/Icon/icons/user.svg +0 -1
  227. package/lib/components/Inputs/BooleanInput/BooleanInput.css +0 -58
  228. package/lib/components/Inputs/BooleanInput/BooleanInput.d.ts +0 -4
  229. package/lib/components/Inputs/BooleanInput/BooleanInput.js +0 -17
  230. package/lib/components/Inputs/BooleanInput/BooleanInput.js.map +0 -1
  231. package/lib/components/Inputs/BooleanInput/BooleanInput.tsx +0 -24
  232. package/lib/components/Inputs/BooleanInput/BooleanInput.types.d.ts +0 -8
  233. package/lib/components/Inputs/BooleanInput/BooleanInput.types.js +0 -3
  234. package/lib/components/Inputs/BooleanInput/BooleanInput.types.js.map +0 -1
  235. package/lib/components/Inputs/BooleanInput/BooleanInput.types.ts +0 -8
  236. package/lib/components/Inputs/BooleanInput/__stories__/BooleanInput.stories.mdx +0 -53
  237. package/lib/components/Inputs/TextInput/TextInput.css +0 -58
  238. package/lib/components/Inputs/TextInput/TextInput.d.ts +0 -4
  239. package/lib/components/Inputs/TextInput/TextInput.js +0 -21
  240. package/lib/components/Inputs/TextInput/TextInput.js.map +0 -1
  241. package/lib/components/Inputs/TextInput/TextInput.tsx +0 -46
  242. package/lib/components/Inputs/TextInput/TextInput.types.d.ts +0 -12
  243. package/lib/components/Inputs/TextInput/TextInput.types.js +0 -3
  244. package/lib/components/Inputs/TextInput/TextInput.types.js.map +0 -1
  245. package/lib/components/Inputs/TextInput/TextInput.types.ts +0 -12
  246. package/lib/components/Inputs/TextInput/__stories__/TextInput.stories.mdx +0 -76
  247. package/lib/components/Loader/Loader.css +0 -42
  248. package/lib/components/Loader/Loader.d.ts +0 -4
  249. package/lib/components/Loader/Loader.js +0 -10
  250. package/lib/components/Loader/Loader.js.map +0 -1
  251. package/lib/components/Loader/Loader.types.d.ts +0 -3
  252. package/lib/components/Loader/Loader.types.js +0 -3
  253. package/lib/components/Loader/Loader.types.js.map +0 -1
  254. package/lib/components/Loader/__stories__/Loader.stories.mdx +0 -30
  255. package/lib/components/Select/Select.css +0 -30
  256. package/lib/components/Select/Select.d.ts +0 -4
  257. package/lib/components/Select/Select.js +0 -20
  258. package/lib/components/Select/Select.js.map +0 -1
  259. package/lib/components/Select/Select.types.d.ts +0 -6
  260. package/lib/components/Select/Select.types.js +0 -3
  261. package/lib/components/Select/Select.types.js.map +0 -1
  262. package/lib/components/Select/__stories__/Select.stories.mdx +0 -40
  263. package/lib/hooks/use-click-outside.d.ts +0 -2
  264. package/lib/hooks/use-click-outside.js +0 -18
  265. package/lib/hooks/use-click-outside.js.map +0 -1
  266. package/lib/index.d.ts +0 -9
  267. package/lib/index.js +0 -26
  268. package/lib/index.js.map +0 -1
  269. package/lib/layouts/Header/Header.css +0 -125
  270. package/lib/layouts/Header/Header.d.ts +0 -4
  271. package/lib/layouts/Header/Header.js +0 -18
  272. package/lib/layouts/Header/Header.js.map +0 -1
  273. package/lib/layouts/Header/Header.types.d.ts +0 -10
  274. package/lib/layouts/Header/Header.types.js +0 -3
  275. package/lib/layouts/Header/Header.types.js.map +0 -1
  276. package/lib/layouts/Header/HeaderProfile.d.ts +0 -3
  277. package/lib/layouts/Header/HeaderProfile.js +0 -39
  278. package/lib/layouts/Header/HeaderProfile.js.map +0 -1
  279. package/lib/layouts/Header/__stories__/Header.stories.mdx +0 -41
  280. package/lib/layouts/Navigation/Navigation.css +0 -74
  281. package/lib/layouts/Navigation/Navigation.d.ts +0 -6
  282. package/lib/layouts/Navigation/Navigation.js +0 -32
  283. package/lib/layouts/Navigation/Navigation.js.map +0 -1
  284. package/lib/layouts/Navigation/Navigation.types.d.ts +0 -10
  285. package/lib/layouts/Navigation/Navigation.types.js +0 -3
  286. package/lib/layouts/Navigation/Navigation.types.js.map +0 -1
  287. package/lib/layouts/Navigation/__stories__/Navigation.stories.mdx +0 -45
  288. package/lib/utils/string.utils.d.ts +0 -1
  289. package/lib/utils/string.utils.js +0 -6
  290. package/lib/utils/string.utils.js.map +0 -1
@@ -1,2 +0,0 @@
1
- export {};
2
- //# 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,58 +0,0 @@
1
- .text-input {
2
- display: flex;
3
- flex-direction: column;
4
- }
5
- .text-input > label {
6
- display: block;
7
- margin-bottom: 4px;
8
- color: #012b49;
9
- font-weight: 700;
10
- }
11
- .text-input--disabled {
12
- opacity: 0.5;
13
- }
14
- .text-input--disabled .boolean-input-container > div {
15
- cursor: not-allowed;
16
- }
17
- .text-input-container {
18
- position: relative;
19
- }
20
- .text-input-container > input {
21
- width: 100%;
22
- height: 32px;
23
- padding: 0 40px 0 12px;
24
- border: 1px solid #d4d4d4;
25
- border-radius: 6px;
26
- color: #007dbc;
27
- font-weight: 700;
28
- }
29
- .text-input-container > input::placeholder {
30
- font-weight: 400;
31
- }
32
- .text-input-container > .icon {
33
- position: absolute;
34
- top: 50%;
35
- right: 12px;
36
- color: #4e5d6b;
37
- transform: translateY(-50%);
38
- }
39
- .text-input--error {
40
- display: flex;
41
- align-items: center;
42
- color: #ed6a5e;
43
- font-size: 12px;
44
- font-weight: 600;
45
- }
46
- .text-input-container--error > input {
47
- border: 2px solid #ed6a5e;
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 { TextInputProps } from './TextInput.types';
3
- import './TextInput.css';
4
- export declare const TextInput: ({ errorLabel, icon, label, placeholder, value, autofocus, disabled, onBlur, onChange, onFocus, }: TextInputProps) => React.JSX.Element;
@@ -1,17 +0,0 @@
1
- import * as React from 'react';
2
- import { Icon } from '../../Icon/Icon';
3
- import './TextInput.css';
4
- export const TextInput = ({ errorLabel, icon, label, placeholder, value, autofocus, disabled, onBlur, onChange, onFocus, }) => {
5
- // ########
6
- // Handlers
7
- const handleChange = (e) => onChange(e.target.value);
8
- // #########
9
- // Rendering
10
- return (React.createElement("div", { className: `text-input ${disabled ? 'text-input--disabled' : ''}` },
11
- label && React.createElement("label", null, label),
12
- React.createElement("div", { className: `text-input-container ${errorLabel ? 'text-input-container--error' : ''}` },
13
- React.createElement("input", { type: "text", placeholder: placeholder, value: value, autoFocus: autofocus, disabled: disabled, onBlur: onBlur, onChange: handleChange, onFocus: onFocus }),
14
- icon && React.createElement(Icon, { name: icon, size: "16" })),
15
- errorLabel && React.createElement("div", { className: "text-input--error" }, errorLabel)));
16
- };
17
- //# sourceMappingURL=TextInput.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../../../../src/components/Inputs/TextInput/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAEvC,OAAO,iBAAiB,CAAC;AAEzB,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EACxB,UAAU,EACV,IAAI,EACJ,KAAK,EACL,WAAW,EACX,KAAK,EACL,SAAS,EACT,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,OAAO,GACQ,EAAE,EAAE;IACnB,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,6BAAK,SAAS,EAAE,cAAc,QAAQ,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE,EAAE;QACnE,KAAK,IAAI,mCAAQ,KAAK,CAAS;QAEhC,6BAAK,SAAS,EAAE,wBAAwB,UAAU,CAAC,CAAC,CAAC,6BAA6B,CAAC,CAAC,CAAC,EAAE,EAAE;YACvF,+BACE,IAAI,EAAC,MAAM,EACX,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,YAAY,EACtB,OAAO,EAAE,OAAO,GAChB;YACD,IAAI,IAAI,oBAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CACnC;QAEL,UAAU,IAAI,6BAAK,SAAS,EAAC,mBAAmB,IAAE,UAAU,CAAO,CAChE,CACP,CAAC;AACJ,CAAC,CAAC"}
@@ -1,46 +0,0 @@
1
- import * as React from 'react';
2
- import { ChangeEvent } from 'react';
3
- import { Icon } from '../../Icon/Icon';
4
- import { TextInputProps } from './TextInput.types';
5
- import './TextInput.css';
6
-
7
- export const TextInput = ({
8
- errorLabel,
9
- icon,
10
- label,
11
- placeholder,
12
- value,
13
- autofocus,
14
- disabled,
15
- onBlur,
16
- onChange,
17
- onFocus,
18
- }: TextInputProps) => {
19
- // ########
20
- // Handlers
21
- const handleChange = (e: ChangeEvent<HTMLInputElement>) => onChange(e.target.value);
22
-
23
- // #########
24
- // Rendering
25
- return (
26
- <div className={`text-input ${disabled ? 'text-input--disabled' : ''}`}>
27
- {label && <label>{label}</label>}
28
-
29
- <div className={`text-input-container ${errorLabel ? 'text-input-container--error' : ''}`}>
30
- <input
31
- type="text"
32
- placeholder={placeholder}
33
- value={value}
34
- autoFocus={autofocus}
35
- disabled={disabled}
36
- onBlur={onBlur}
37
- onChange={handleChange}
38
- onFocus={onFocus}
39
- />
40
- {icon && <Icon name={icon} size="16" />}
41
- </div>
42
-
43
- {errorLabel && <div className="text-input--error">{errorLabel}</div>}
44
- </div>
45
- );
46
- };
@@ -1,12 +0,0 @@
1
- export type TextInputProps = {
2
- errorLabel?: string;
3
- icon?: string;
4
- label?: string;
5
- placeholder?: string;
6
- value: string;
7
- autofocus?: boolean;
8
- disabled?: boolean;
9
- onBlur?: () => void;
10
- onChange: (value: string) => void;
11
- onFocus?: () => void;
12
- };
@@ -1,2 +0,0 @@
1
- export {};
2
- //# sourceMappingURL=TextInput.types.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"TextInput.types.js","sourceRoot":"","sources":["../../../../src/components/Inputs/TextInput/TextInput.types.ts"],"names":[],"mappings":""}
@@ -1,12 +0,0 @@
1
- export type TextInputProps = {
2
- errorLabel?: string;
3
- icon?: string;
4
- label?: string;
5
- placeholder?: string;
6
- value: string;
7
- autofocus?: boolean;
8
- disabled?: boolean;
9
- onBlur?: () => void;
10
- onChange: (value: string) => void;
11
- onFocus?: () => void;
12
- };
@@ -1,76 +0,0 @@
1
- import React from 'react';
2
- import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
3
- import { TextInput } from '../TextInput';
4
- import { icons } from '../../../Icon/icons';
5
-
6
- <Meta title="Components/Inputs/TextInput" />
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
- value: {
24
- control: 'text',
25
- description: 'Value of the input.',
26
- },
27
- autofocus: {
28
- control: 'boolean',
29
- description: 'Auto focus the input once mounted',
30
- table: { defaultValue: { summary: 'false' } },
31
- },
32
- disabled: {
33
- control: 'boolean',
34
- description: 'Auto focus the input once mounted',
35
- table: { defaultValue: { summary: 'false' } },
36
- },
37
- onBlur: {
38
- control: 'function',
39
- description: 'The handler called when the user blur the input.',
40
- },
41
- onChange: {
42
- control: 'function',
43
- description: 'The handler called when the value of the input changes.',
44
- },
45
- onFocus: {
46
- control: 'function',
47
- description: 'The handler called when the user focus the input.',
48
- },
49
- };
50
-
51
- # Text Input
52
-
53
- Text input allows the user to enter content and data when the expected user input is a single line of text.
54
-
55
- ## Overview
56
-
57
- <Canvas>
58
- <Story
59
- name="Overview"
60
- args={{
61
- errorLabel: '',
62
- label: 'Label',
63
- placeholder: 'This is a placeholder',
64
- value: '',
65
- autofocus: false,
66
- disabled: false,
67
- }}
68
- argTypes={inputArgTypes}
69
- >
70
- {args => <TextInput {...args} />}
71
- </Story>
72
- </Canvas>
73
-
74
- ## Props
75
-
76
- <ArgsTable story="Overview" of={TextInput} />
@@ -1,42 +0,0 @@
1
- @keyframes rotation {
2
- 0% {
3
- transform: rotate(0deg);
4
- }
5
- 100% {
6
- transform: rotate(360deg);
7
- }
8
- }
9
-
10
- .loader {
11
- border: 2px solid;
12
- border-color: #00689d transparent;
13
- border-radius: 50%;
14
- display: inline-block;
15
- box-sizing: border-box;
16
- animation: rotation 1.5s linear infinite;
17
- }
18
-
19
- /* ####### */
20
- /* SIZES */
21
- .loader--sm {
22
- width: 24px;
23
- height: 24px;
24
- }
25
- .loader--md {
26
- width: 32px;
27
- height: 32px;
28
- }
29
- .loader--lg {
30
- width: 44px;
31
- height: 44px;
32
- }
33
-
34
- /* ######### */
35
- /* GLOBALS */
36
- * {
37
- font-size: 14px;
38
- outline: none;
39
- box-sizing: border-box;
40
- font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
41
- 'Helvetica Neue', sans-serif;
42
- }
@@ -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,6 +0,0 @@
1
- import * as React from 'react';
2
- import './Loader.css';
3
- export const Loader = ({ size = 'md' }) => {
4
- return React.createElement("div", { className: `loader loader--${size}` });
5
- };
6
- //# sourceMappingURL=Loader.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Loader.js","sourceRoot":"","sources":["../../../src/components/Loader/Loader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,cAAc,CAAC;AAEtB,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,EAAe,EAAE,EAAE;IACrD,OAAO,6BAAK,SAAS,EAAE,kBAAkB,IAAI,EAAE,GAAI,CAAC;AACtD,CAAC,CAAC"}
@@ -1,3 +0,0 @@
1
- export type LoaderProps = {
2
- size?: 'sm' | 'md' | 'lg';
3
- };
@@ -1,2 +0,0 @@
1
- export {};
2
- //# 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
- import React from 'react';
2
- import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
3
- import { Loader } from '../Loader';
4
-
5
- <Meta title="Components/Loader" />
6
-
7
- export const loaderArgTypes = {
8
- size: {
9
- control: 'inline-radio',
10
- options: ['sm', 'md', 'lg'],
11
- description: 'Define the size of the loader.',
12
- table: { defaultValue: { summary: 'md' } },
13
- },
14
- };
15
-
16
- # Loader
17
-
18
- Loader express to user that an action is occuring.
19
-
20
- ## Overview
21
-
22
- <Canvas>
23
- <Story name="Overview" args={{ size: 'md' }} argTypes={loaderArgTypes}>
24
- {args => <Loader {...args}>{args.children}</Loader>}
25
- </Story>
26
- </Canvas>
27
-
28
- ## Props
29
-
30
- <ArgsTable story="Overview" of={Loader} />
@@ -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, options, onChange }: SelectProps) => React.JSX.Element;
@@ -1,16 +0,0 @@
1
- import * as React from 'react';
2
- import './Select.css';
3
- export const Select = ({ label, options, onChange }) => {
4
- // ########
5
- // Handlers
6
- const handleChange = (e) => onChange(e.target.value);
7
- // #########
8
- // Rendering
9
- return (React.createElement("div", { className: "select-container" },
10
- label && React.createElement("label", null, label),
11
- React.createElement("select", { onChange: handleChange },
12
- React.createElement(React.Fragment, null,
13
- React.createElement("option", null, "-"),
14
- options))));
15
- };
16
- //# sourceMappingURL=Select.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,cAAc,CAAC;AAEtB,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAe,EAAE,EAAE;IAClE,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,QAAQ,EAAE,YAAY;YAC5B;gBACE,wCAAkB;gBACjB,OAAO,CACP,CACI,CACL,CACP,CAAC;AACJ,CAAC,CAAC"}
@@ -1,6 +0,0 @@
1
- import { ReactElement } from 'react';
2
- export type SelectProps = {
3
- label?: string;
4
- options: ReactElement[];
5
- onChange: (val: string) => void;
6
- };
@@ -1,2 +0,0 @@
1
- export {};
2
- //# 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":""}
@@ -1,40 +0,0 @@
1
- import React from 'react';
2
- import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
3
- import { Select } from '../Select';
4
-
5
- <Meta title="Components/Select" />
6
-
7
- export const selectArgTypes = {
8
- label: {
9
- control: 'text',
10
- description: 'Label of the input.',
11
- },
12
- onChange: {
13
- control: 'function',
14
- description: 'The handler called when the value of the select changes.',
15
- },
16
- };
17
-
18
- # Loader
19
-
20
- Loader express to user that an action is occuring.
21
-
22
- ## Overview
23
-
24
- <Canvas>
25
- <Story
26
- name="Overview"
27
- args={{
28
- label: 'Label',
29
- options: [<option value="orange">Orange</option>, <option value="apple">Apple</option>],
30
- onChange: () => {},
31
- }}
32
- argTypes={selectArgTypes}
33
- >
34
- {args => <Select {...args} />}
35
- </Story>
36
- </Canvas>
37
-
38
- ## Props
39
-
40
- <ArgsTable story="Overview" of={Select} />
@@ -1,2 +0,0 @@
1
- /// <reference types="react" />
2
- export declare const useClickOutside: (callback: () => void) => import("react").RefObject<HTMLDivElement>;
@@ -1,14 +0,0 @@
1
- import { useEffect, useRef } from 'react';
2
- export const useClickOutside = (callback) => {
3
- const ref = useRef(null);
4
- const handleClickOutside = (event) => {
5
- if (ref.current && !ref.current.contains(event.target))
6
- callback();
7
- };
8
- useEffect(() => {
9
- document.addEventListener('click', handleClickOutside);
10
- return () => document.removeEventListener('click', handleClickOutside);
11
- }, []);
12
- return ref;
13
- };
14
- //# sourceMappingURL=use-click-outside.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"use-click-outside.js","sourceRoot":"","sources":["../../src/hooks/use-click-outside.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE1C,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,QAAoB,EAAE,EAAE;IACtD,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEzC,MAAM,kBAAkB,GAAG,CAAC,KAAiB,EAAE,EAAE;QAC/C,IAAI,GAAG,CAAC,OAAO,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC;YAAE,QAAQ,EAAE,CAAC;IAC7E,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAC;QACvD,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAC;IACzE,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,GAAG,CAAC;AACb,CAAC,CAAC"}
package/esm/index.d.ts DELETED
@@ -1,9 +0,0 @@
1
- export * from './components/Button/Button';
2
- export * from './components/Checkbox/Checkbox';
3
- export * from './components/Icon/Icon';
4
- export * from './components/Inputs/BooleanInput/BooleanInput';
5
- export * from './components/Inputs/TextInput/TextInput';
6
- export * from './components/Loader/Loader';
7
- export * from './layouts/Header/Header';
8
- export * from './layouts/Header/HeaderProfile';
9
- export * from './layouts/Navigation/Navigation';
package/esm/index.js DELETED
@@ -1,10 +0,0 @@
1
- export * from './components/Button/Button';
2
- export * from './components/Checkbox/Checkbox';
3
- export * from './components/Icon/Icon';
4
- export * from './components/Inputs/BooleanInput/BooleanInput';
5
- export * from './components/Inputs/TextInput/TextInput';
6
- export * from './components/Loader/Loader';
7
- export * from './layouts/Header/Header';
8
- export * from './layouts/Header/HeaderProfile';
9
- export * from './layouts/Navigation/Navigation';
10
- //# sourceMappingURL=index.js.map
package/esm/index.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,wBAAwB,CAAC;AACvC,cAAc,+CAA+C,CAAC;AAC9D,cAAc,yCAAyC,CAAC;AACxD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,iCAAiC,CAAC"}