pixel-react 1.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (444) hide show
  1. package/.prettierrc.js +13 -0
  2. package/.storybook/main.ts +26 -0
  3. package/.storybook/preview.ts +26 -0
  4. package/.yarn/install-state.gz +0 -0
  5. package/.yarnrc.yml +1 -0
  6. package/README.md +25 -0
  7. package/dist/tsconfig.tsbuildinfo +1 -0
  8. package/index.scss +0 -0
  9. package/lib/StyleGuide/ColorPalette/ColorPalette.d.ts +3 -0
  10. package/lib/StyleGuide/ColorPalette/ColorPalette.stories.d.ts +6 -0
  11. package/lib/StyleGuide/ColorPalette/colorPaletteList.d.ts +3 -0
  12. package/lib/StyleGuide/ColorPalette/index.d.ts +1 -0
  13. package/lib/StyleGuide/ColorPalette/types.d.ts +15 -0
  14. package/lib/StyleGuide/Typography/Typography.d.ts +3 -0
  15. package/lib/StyleGuide/Typography/Typography.stories.d.ts +6 -0
  16. package/lib/StyleGuide/Typography/TypographyList.d.ts +5 -0
  17. package/lib/StyleGuide/Typography/types.d.ts +8 -0
  18. package/lib/assets/utils/functionUtils.d.ts +1 -0
  19. package/lib/components/Accordion/Accordion.d.ts +8 -0
  20. package/lib/components/Accordion/Accordion.stories.d.ts +6 -0
  21. package/lib/components/Accordion/index.d.ts +1 -0
  22. package/lib/components/Accordion/types.d.ts +27 -0
  23. package/lib/components/AddResourceButton/AddButton.d.ts +4 -0
  24. package/lib/components/AddResourceButton/AddButton.stories.d.ts +8 -0
  25. package/lib/components/AddResourceButton/ArrowsButton/ArrowsButton.d.ts +6 -0
  26. package/lib/components/AddResourceButton/index.d.ts +1 -0
  27. package/lib/components/AddResourceButton/type.d.ts +65 -0
  28. package/lib/components/Button/Button.d.ts +5 -0
  29. package/lib/components/Button/Button.stories.d.ts +12 -0
  30. package/lib/components/Button/index.d.ts +1 -0
  31. package/lib/components/Button/types.d.ts +61 -0
  32. package/lib/components/Charts/DonutChart/DonutChart.d.ts +5 -0
  33. package/lib/components/Charts/DonutChart/DonutChart.stories.d.ts +6 -0
  34. package/lib/components/Charts/DonutChart/index.d.ts +1 -0
  35. package/lib/components/Charts/DonutChart/type.d.ts +13 -0
  36. package/lib/components/Charts/RadialChart/RadialChart.d.ts +5 -0
  37. package/lib/components/Charts/RadialChart/RadialChart.stories.d.ts +6 -0
  38. package/lib/components/Charts/RadialChart/index.d.ts +1 -0
  39. package/lib/components/Charts/RadialChart/types.d.ts +25 -0
  40. package/lib/components/Checkbox/Checkbox.d.ts +6 -0
  41. package/lib/components/Checkbox/Checkbox.stories.d.ts +8 -0
  42. package/lib/components/Checkbox/index.d.ts +1 -0
  43. package/lib/components/Checkbox/types.d.ts +30 -0
  44. package/lib/components/Chip/Chip.d.ts +4 -0
  45. package/lib/components/Chip/Chip.stories.d.ts +14 -0
  46. package/lib/components/Chip/index.d.ts +1 -0
  47. package/lib/components/Chip/types.d.ts +18 -0
  48. package/lib/components/Drawer/Drawer.d.ts +4 -0
  49. package/lib/components/Drawer/Drawer.stories.d.ts +7 -0
  50. package/lib/components/Drawer/Types.d.ts +85 -0
  51. package/lib/components/Drawer/index.d.ts +1 -0
  52. package/lib/components/ExpandableMenu/ExpandableMenu.d.ts +5 -0
  53. package/lib/components/ExpandableMenu/ExpandableMenu.stories.d.ts +7 -0
  54. package/lib/components/ExpandableMenu/index.d.ts +1 -0
  55. package/lib/components/ExpandableMenu/types.d.ts +34 -0
  56. package/lib/components/FileDropzone/Dropzone.d.ts +5 -0
  57. package/lib/components/FileDropzone/FileDropzone.d.ts +4 -0
  58. package/lib/components/FileDropzone/FileDropzone.stories.d.ts +8 -0
  59. package/lib/components/FileDropzone/FilePreview.d.ts +4 -0
  60. package/lib/components/FileDropzone/index.d.ts +1 -0
  61. package/lib/components/FileDropzone/types.d.ts +103 -0
  62. package/lib/components/Form/Form.d.ts +16 -0
  63. package/lib/components/Form/Form.stories.d.ts +6 -0
  64. package/lib/components/Form/index.d.ts +1 -0
  65. package/lib/components/Form/types.d.ts +1 -0
  66. package/lib/components/GridLayout/GridLayout.d.ts +6 -0
  67. package/lib/components/GridLayout/GridLayout.stories.d.ts +8 -0
  68. package/lib/components/GridLayout/index.d.ts +2 -0
  69. package/lib/components/GridLayout/types.d.ts +57 -0
  70. package/lib/components/HighlightText/HighlightText.d.ts +4 -0
  71. package/lib/components/HighlightText/HighlightText.stories.d.ts +6 -0
  72. package/lib/components/HighlightText/index.d.ts +1 -0
  73. package/lib/components/HighlightText/types.d.ts +4 -0
  74. package/lib/components/Icon/Icon.d.ts +4 -0
  75. package/lib/components/Icon/Icon.stories.d.ts +7 -0
  76. package/lib/components/Icon/iconList.d.ts +2 -0
  77. package/lib/components/Icon/index.d.ts +1 -0
  78. package/lib/components/Icon/types.d.ts +10 -0
  79. package/lib/components/Input/Input.d.ts +4 -0
  80. package/lib/components/Input/Input.stories.d.ts +9 -0
  81. package/lib/components/Input/index.d.ts +1 -0
  82. package/lib/components/Input/types.d.ts +74 -0
  83. package/lib/components/InputWithDropdown/InputWithDropdown.d.ts +4 -0
  84. package/lib/components/InputWithDropdown/InputWithDropdown.stories.d.ts +8 -0
  85. package/lib/components/InputWithDropdown/index.d.ts +1 -0
  86. package/lib/components/InputWithDropdown/types.d.ts +88 -0
  87. package/lib/components/LazyLoad/LazyLoad.d.ts +2 -0
  88. package/lib/components/LazyLoad/LazyLoad.stories.d.ts +6 -0
  89. package/lib/components/LazyLoad/LazyLoading.d.ts +2 -0
  90. package/lib/components/LazyLoad/index.d.ts +1 -0
  91. package/lib/components/MenuOption/MenuOption.d.ts +4 -0
  92. package/lib/components/MenuOption/MenuOption.stories.d.ts +15 -0
  93. package/lib/components/MenuOption/index.d.ts +1 -0
  94. package/lib/components/MenuOption/types.d.ts +134 -0
  95. package/lib/components/MiniModal/MiniModal.d.ts +4 -0
  96. package/lib/components/MiniModal/MiniModal.stories.d.ts +9 -0
  97. package/lib/components/MiniModal/index.d.ts +1 -0
  98. package/lib/components/MiniModal/types.d.ts +89 -0
  99. package/lib/components/MultiSelect/Dropdown.d.ts +4 -0
  100. package/lib/components/MultiSelect/MultiSelect.d.ts +4 -0
  101. package/lib/components/MultiSelect/MultiSelect.stories.d.ts +9 -0
  102. package/lib/components/MultiSelect/MultiSelectTypes.d.ts +18 -0
  103. package/lib/components/MultiSelect/dropdownTypes.d.ts +15 -0
  104. package/lib/components/MultiSelect/index.d.ts +1 -0
  105. package/lib/components/RadioButton/RadioButton.d.ts +4 -0
  106. package/lib/components/RadioButton/RadioButton.stories.d.ts +10 -0
  107. package/lib/components/RadioButton/index.d.ts +1 -0
  108. package/lib/components/RadioButton/radioButtonTypes.d.ts +35 -0
  109. package/lib/components/RadioGroup/RadioGroup.d.ts +4 -0
  110. package/lib/components/RadioGroup/RadioGroup.stories.d.ts +8 -0
  111. package/lib/components/RadioGroup/index.d.ts +1 -0
  112. package/lib/components/RadioGroup/radioGroupTypes.d.ts +47 -0
  113. package/lib/components/Search/Search.d.ts +4 -0
  114. package/lib/components/Search/Search.stories.d.ts +6 -0
  115. package/lib/components/Search/index.d.ts +1 -0
  116. package/lib/components/Search/types.d.ts +15 -0
  117. package/lib/components/Select/Select.d.ts +4 -0
  118. package/lib/components/Select/Select.stories.d.ts +13 -0
  119. package/lib/components/Select/components/Dropdown/Dropdown.d.ts +4 -0
  120. package/lib/components/Select/components/Dropdown/dropdownTypes.d.ts +15 -0
  121. package/lib/components/Select/index.d.ts +1 -0
  122. package/lib/components/Select/types.d.ts +68 -0
  123. package/lib/components/Table/Table.d.ts +4 -0
  124. package/lib/components/Table/Table.stories.d.ts +11 -0
  125. package/lib/components/Table/Types.d.ts +98 -0
  126. package/lib/components/Table/index.d.ts +1 -0
  127. package/lib/components/TableTree/TableTree.d.ts +21 -0
  128. package/lib/components/TableTree/TableTree.stories.d.ts +7 -0
  129. package/lib/components/TableTree/data.d.ts +313 -0
  130. package/lib/components/TableTree/index.d.ts +1 -0
  131. package/lib/components/Tabs/Tabs.d.ts +5 -0
  132. package/lib/components/Tabs/Tabs.stories.d.ts +8 -0
  133. package/lib/components/Tabs/index.d.ts +1 -0
  134. package/lib/components/Tabs/types.d.ts +40 -0
  135. package/lib/components/TextArea/Textarea.d.ts +4 -0
  136. package/lib/components/TextArea/Textarea.stories.d.ts +9 -0
  137. package/lib/components/TextArea/Types.d.ts +78 -0
  138. package/lib/components/TextArea/index.d.ts +1 -0
  139. package/lib/components/ThemeProvider/ThemeProvider.d.ts +7 -0
  140. package/lib/components/ThemeProvider/index.d.ts +1 -0
  141. package/lib/components/ThemeProvider/types.d.ts +11 -0
  142. package/lib/components/Toast/Toast.d.ts +5 -0
  143. package/lib/components/Toast/Toast.stories.d.ts +6 -0
  144. package/lib/components/Toast/index.d.ts +1 -0
  145. package/lib/components/Toast/types.d.ts +20 -0
  146. package/lib/components/Toggle/Toggle.d.ts +5 -0
  147. package/lib/components/Toggle/Toggle.stories.d.ts +12 -0
  148. package/lib/components/Toggle/index.d.ts +1 -0
  149. package/lib/components/Toggle/types.d.ts +50 -0
  150. package/lib/components/Tooltip/Tooltip.d.ts +5 -0
  151. package/lib/components/Tooltip/Tooltip.stories.d.ts +15 -0
  152. package/lib/components/Tooltip/index.d.ts +1 -0
  153. package/lib/components/Tooltip/types.d.ts +37 -0
  154. package/lib/components/Typography/Typography.d.ts +5 -0
  155. package/lib/components/Typography/Typography.stories.d.ts +10 -0
  156. package/lib/components/Typography/index.d.ts +1 -0
  157. package/lib/components/Typography/types.d.ts +47 -0
  158. package/lib/hooks/keyboardevents/useEscKeyEvent.d.ts +2 -0
  159. package/lib/hooks/useClickOutside.d.ts +2 -0
  160. package/lib/hooks/useFileDropzone.d.ts +3 -0
  161. package/lib/hooks/usePortalPosition.d.ts +9 -0
  162. package/lib/hooks/useTheme.d.ts +3 -0
  163. package/lib/index.css +404 -0
  164. package/lib/index.d.ts +1286 -0
  165. package/lib/index.esm.css +404 -0
  166. package/lib/index.esm.js +9317 -0
  167. package/lib/index.esm.js.map +1 -0
  168. package/lib/index.js +9376 -0
  169. package/lib/index.js.map +1 -0
  170. package/lib/tsconfig.tsbuildinfo +1 -0
  171. package/lib/utils/TableCell/TableCell.d.ts +1 -0
  172. package/lib/utils/checkEmpty/checkEmpty.d.ts +3 -0
  173. package/lib/utils/checkEmpty/checkEmpty.stories.d.ts +6 -0
  174. package/lib/utils/ffID/ffID.stories.d.ts +6 -0
  175. package/lib/utils/ffID/ffid.d.ts +2 -0
  176. package/lib/utils/getExtension/getExtension.d.ts +4 -0
  177. package/lib/utils/getExtension/getExtension.stories.d.ts +6 -0
  178. package/lib/utils/truncateText/truncateText.d.ts +1 -0
  179. package/lib/utils/truncateText/truncateText.stories.d.ts +6 -0
  180. package/package.json +62 -0
  181. package/rollup.config.mjs +57 -0
  182. package/src/StyleGuide/ColorPalette/ColorPalette.scss +58 -0
  183. package/src/StyleGuide/ColorPalette/ColorPalette.stories.tsx +16 -0
  184. package/src/StyleGuide/ColorPalette/ColorPalette.tsx +61 -0
  185. package/src/StyleGuide/ColorPalette/colorPaletteList.ts +97 -0
  186. package/src/StyleGuide/ColorPalette/index.ts +1 -0
  187. package/src/StyleGuide/ColorPalette/types.ts +17 -0
  188. package/src/StyleGuide/Typography/Typography.scss +100 -0
  189. package/src/StyleGuide/Typography/Typography.stories.tsx +16 -0
  190. package/src/StyleGuide/Typography/Typography.tsx +60 -0
  191. package/src/StyleGuide/Typography/TypographyList.ts +3 -0
  192. package/src/StyleGuide/Typography/types.ts +9 -0
  193. package/src/assets/Themes/BaseTheme.scss +130 -0
  194. package/src/assets/Themes/DarkTheme.scss +131 -0
  195. package/src/assets/Themes/Theme.scss +200 -0
  196. package/src/assets/icons/Arrow.svg +5 -0
  197. package/src/assets/icons/accordion_header_icon.svg +10 -0
  198. package/src/assets/icons/arrow_down.svg +3 -0
  199. package/src/assets/icons/arrow_right.svg +5 -0
  200. package/src/assets/icons/arrow_up.svg +3 -0
  201. package/src/assets/icons/arrows_down_icon.svg +3 -0
  202. package/src/assets/icons/arrows_right_icon.svg +10 -0
  203. package/src/assets/icons/arrows_top_icon.svg +3 -0
  204. package/src/assets/icons/check_mark.svg +3 -0
  205. package/src/assets/icons/close_pill.svg +3 -0
  206. package/src/assets/icons/delete.svg +17 -0
  207. package/src/assets/icons/dropzone_icon.svg +18 -0
  208. package/src/assets/icons/error.svg +17 -0
  209. package/src/assets/icons/file.svg +12 -0
  210. package/src/assets/icons/info.svg +17 -0
  211. package/src/assets/icons/logo.svg +18 -0
  212. package/src/assets/icons/manage_apps.svg +3 -0
  213. package/src/assets/icons/moon_stars.svg +10 -0
  214. package/src/assets/icons/more.svg +11 -0
  215. package/src/assets/icons/plus_icon.svg +11 -0
  216. package/src/assets/icons/remove.svg +12 -0
  217. package/src/assets/icons/replace.svg +12 -0
  218. package/src/assets/icons/search.svg +3 -0
  219. package/src/assets/icons/success.svg +13 -0
  220. package/src/assets/icons/sun_icon.svg +10 -0
  221. package/src/assets/icons/tick_icon.svg +5 -0
  222. package/src/assets/icons/toast_close.svg +3 -0
  223. package/src/assets/icons/warning.svg +17 -0
  224. package/src/assets/icons/wrong_mark.svg +3 -0
  225. package/src/assets/styles/_colors.scss +145 -0
  226. package/src/assets/styles/_fonts.scss +68 -0
  227. package/src/assets/styles/_mixins.scss +20 -0
  228. package/src/assets/utils/functionUtils.ts +5 -0
  229. package/src/components/Accordion/Accordion.scss +45 -0
  230. package/src/components/Accordion/Accordion.stories.tsx +31 -0
  231. package/src/components/Accordion/Accordion.tsx +62 -0
  232. package/src/components/Accordion/index.ts +1 -0
  233. package/src/components/Accordion/types.ts +28 -0
  234. package/src/components/AddResourceButton/AddButton.scss +36 -0
  235. package/src/components/AddResourceButton/AddButton.stories.tsx +126 -0
  236. package/src/components/AddResourceButton/AddButton.tsx +121 -0
  237. package/src/components/AddResourceButton/ArrowsButton/ArrowsButton.scss +160 -0
  238. package/src/components/AddResourceButton/ArrowsButton/ArrowsButton.tsx +38 -0
  239. package/src/components/AddResourceButton/index.ts +1 -0
  240. package/src/components/AddResourceButton/type.ts +60 -0
  241. package/src/components/Button/Button.scss +148 -0
  242. package/src/components/Button/Button.stories.tsx +74 -0
  243. package/src/components/Button/Button.tsx +66 -0
  244. package/src/components/Button/index.ts +1 -0
  245. package/src/components/Button/types.ts +65 -0
  246. package/src/components/Charts/DonutChart/DonutChart.scss +76 -0
  247. package/src/components/Charts/DonutChart/DonutChart.stories.tsx +30 -0
  248. package/src/components/Charts/DonutChart/DonutChart.tsx +241 -0
  249. package/src/components/Charts/DonutChart/index.ts +1 -0
  250. package/src/components/Charts/DonutChart/type.ts +23 -0
  251. package/src/components/Charts/RadialChart/RadialChart.scss +12 -0
  252. package/src/components/Charts/RadialChart/RadialChart.stories.tsx +36 -0
  253. package/src/components/Charts/RadialChart/RadialChart.tsx +174 -0
  254. package/src/components/Charts/RadialChart/index.ts +1 -0
  255. package/src/components/Charts/RadialChart/types.ts +32 -0
  256. package/src/components/Checkbox/Checkbox.scss +89 -0
  257. package/src/components/Checkbox/Checkbox.stories.tsx +47 -0
  258. package/src/components/Checkbox/Checkbox.tsx +61 -0
  259. package/src/components/Checkbox/index.ts +1 -0
  260. package/src/components/Checkbox/types.ts +30 -0
  261. package/src/components/Chip/Chip.scss +70 -0
  262. package/src/components/Chip/Chip.stories.tsx +88 -0
  263. package/src/components/Chip/Chip.tsx +35 -0
  264. package/src/components/Chip/index.ts +1 -0
  265. package/src/components/Chip/types.ts +19 -0
  266. package/src/components/Drawer/Drawer.scss +121 -0
  267. package/src/components/Drawer/Drawer.stories.tsx +88 -0
  268. package/src/components/Drawer/Drawer.tsx +179 -0
  269. package/src/components/Drawer/Types.ts +88 -0
  270. package/src/components/Drawer/index.ts +1 -0
  271. package/src/components/ExpandableMenu/ExpandableMenu.scss +110 -0
  272. package/src/components/ExpandableMenu/ExpandableMenu.stories.tsx +67 -0
  273. package/src/components/ExpandableMenu/ExpandableMenu.tsx +101 -0
  274. package/src/components/ExpandableMenu/index.ts +1 -0
  275. package/src/components/ExpandableMenu/types.ts +34 -0
  276. package/src/components/FileDropzone/Dropzone.tsx +55 -0
  277. package/src/components/FileDropzone/FileDropzone.scss +134 -0
  278. package/src/components/FileDropzone/FileDropzone.stories.tsx +83 -0
  279. package/src/components/FileDropzone/FileDropzone.tsx +98 -0
  280. package/src/components/FileDropzone/FilePreview.tsx +75 -0
  281. package/src/components/FileDropzone/index.ts +1 -0
  282. package/src/components/FileDropzone/types.ts +113 -0
  283. package/src/components/Form/Form.scss +98 -0
  284. package/src/components/Form/Form.stories.tsx +177 -0
  285. package/src/components/Form/Form.tsx +57 -0
  286. package/src/components/Form/index.ts +1 -0
  287. package/src/components/Form/types.ts +1 -0
  288. package/src/components/Form/validation.json +29 -0
  289. package/src/components/GridLayout/GridLayout.scss +71 -0
  290. package/src/components/GridLayout/GridLayout.stories.tsx +128 -0
  291. package/src/components/GridLayout/GridLayout.tsx +30 -0
  292. package/src/components/GridLayout/GridLayoutStory.scss +25 -0
  293. package/src/components/GridLayout/index.ts +1 -0
  294. package/src/components/GridLayout/types.ts +64 -0
  295. package/src/components/HighlightText/HighlightText.scss +3 -0
  296. package/src/components/HighlightText/HighlightText.stories.tsx +22 -0
  297. package/src/components/HighlightText/HighlightText.tsx +33 -0
  298. package/src/components/HighlightText/index.ts +1 -0
  299. package/src/components/HighlightText/types.ts +4 -0
  300. package/src/components/Icon/Icon.stories.tsx +37 -0
  301. package/src/components/Icon/Icon.tsx +43 -0
  302. package/src/components/Icon/Icons.scss +34 -0
  303. package/src/components/Icon/iconList.ts +62 -0
  304. package/src/components/Icon/index.ts +1 -0
  305. package/src/components/Icon/types.ts +10 -0
  306. package/src/components/Input/Input.scss +150 -0
  307. package/src/components/Input/Input.stories.tsx +96 -0
  308. package/src/components/Input/Input.tsx +93 -0
  309. package/src/components/Input/index.ts +1 -0
  310. package/src/components/Input/types.ts +77 -0
  311. package/src/components/InputWithDropdown/InputWithDropdown.scss +185 -0
  312. package/src/components/InputWithDropdown/InputWithDropdown.stories.tsx +114 -0
  313. package/src/components/InputWithDropdown/InputWithDropdown.tsx +85 -0
  314. package/src/components/InputWithDropdown/index.ts +1 -0
  315. package/src/components/InputWithDropdown/types.ts +110 -0
  316. package/src/components/LazyLoad/LazyLoad.d.ts +3 -0
  317. package/src/components/LazyLoad/LazyLoad.stories.tsx +33 -0
  318. package/src/components/LazyLoad/LazyLoad.ts +2 -0
  319. package/src/components/LazyLoad/LazyLoading.tsx +19 -0
  320. package/src/components/LazyLoad/index.ts +1 -0
  321. package/src/components/MenuOption/MenuOption.scss +69 -0
  322. package/src/components/MenuOption/MenuOption.stories.tsx +259 -0
  323. package/src/components/MenuOption/MenuOption.tsx +126 -0
  324. package/src/components/MenuOption/index.ts +1 -0
  325. package/src/components/MenuOption/types.ts +161 -0
  326. package/src/components/MiniModal/MiniModal.scss +139 -0
  327. package/src/components/MiniModal/MiniModal.stories.tsx +475 -0
  328. package/src/components/MiniModal/MiniModal.tsx +218 -0
  329. package/src/components/MiniModal/index.ts +1 -0
  330. package/src/components/MiniModal/types.ts +88 -0
  331. package/src/components/MultiSelect/Dropdown.scss +66 -0
  332. package/src/components/MultiSelect/Dropdown.tsx +77 -0
  333. package/src/components/MultiSelect/MultiSelect.scss +190 -0
  334. package/src/components/MultiSelect/MultiSelect.stories.tsx +85 -0
  335. package/src/components/MultiSelect/MultiSelect.tsx +260 -0
  336. package/src/components/MultiSelect/MultiSelectTypes.ts +19 -0
  337. package/src/components/MultiSelect/dropdownTypes.ts +15 -0
  338. package/src/components/MultiSelect/index.ts +1 -0
  339. package/src/components/RadioButton/RadioButton.scss +99 -0
  340. package/src/components/RadioButton/RadioButton.stories.tsx +43 -0
  341. package/src/components/RadioButton/RadioButton.tsx +32 -0
  342. package/src/components/RadioButton/index.ts +1 -0
  343. package/src/components/RadioButton/radioButtonTypes.tsx +40 -0
  344. package/src/components/RadioGroup/RadioGroup.scss +5 -0
  345. package/src/components/RadioGroup/RadioGroup.stories.tsx +81 -0
  346. package/src/components/RadioGroup/RadioGroup.tsx +30 -0
  347. package/src/components/RadioGroup/index.ts +1 -0
  348. package/src/components/RadioGroup/radioGroupTypes.tsx +54 -0
  349. package/src/components/Search/Search.scss +87 -0
  350. package/src/components/Search/Search.stories.tsx +26 -0
  351. package/src/components/Search/Search.tsx +103 -0
  352. package/src/components/Search/index.ts +1 -0
  353. package/src/components/Search/types.ts +15 -0
  354. package/src/components/Select/Select.scss +247 -0
  355. package/src/components/Select/Select.stories.tsx +156 -0
  356. package/src/components/Select/Select.tsx +368 -0
  357. package/src/components/Select/components/Dropdown/Dropdown.scss +70 -0
  358. package/src/components/Select/components/Dropdown/Dropdown.tsx +89 -0
  359. package/src/components/Select/components/Dropdown/dropdownTypes.ts +19 -0
  360. package/src/components/Select/index.ts +1 -0
  361. package/src/components/Select/types.ts +122 -0
  362. package/src/components/Table/Table.scss +101 -0
  363. package/src/components/Table/Table.stories.tsx +345 -0
  364. package/src/components/Table/Table.tsx +128 -0
  365. package/src/components/Table/Types.ts +100 -0
  366. package/src/components/Table/index.ts +1 -0
  367. package/src/components/TableTree/TableTree.scss +142 -0
  368. package/src/components/TableTree/TableTree.stories.tsx +121 -0
  369. package/src/components/TableTree/TableTree.tsx +216 -0
  370. package/src/components/TableTree/TableTreeStories.scss +22 -0
  371. package/src/components/TableTree/data.ts +573 -0
  372. package/src/components/TableTree/index.ts +1 -0
  373. package/src/components/Tabs/Tabs.scss +76 -0
  374. package/src/components/Tabs/Tabs.stories.tsx +104 -0
  375. package/src/components/Tabs/Tabs.tsx +64 -0
  376. package/src/components/Tabs/index.ts +1 -0
  377. package/src/components/Tabs/types.ts +38 -0
  378. package/src/components/TextArea/Textarea.scss +145 -0
  379. package/src/components/TextArea/Textarea.stories.tsx +92 -0
  380. package/src/components/TextArea/Textarea.tsx +84 -0
  381. package/src/components/TextArea/Types.ts +82 -0
  382. package/src/components/TextArea/index.tsx +1 -0
  383. package/src/components/ThemeProvider/ThemeProvider.tsx +24 -0
  384. package/src/components/ThemeProvider/index.ts +1 -0
  385. package/src/components/ThemeProvider/types.ts +14 -0
  386. package/src/components/Toast/Toast.scss +121 -0
  387. package/src/components/Toast/Toast.stories.tsx +180 -0
  388. package/src/components/Toast/Toast.tsx +116 -0
  389. package/src/components/Toast/index.ts +1 -0
  390. package/src/components/Toast/types.ts +27 -0
  391. package/src/components/Toggle/Toggle.scss +132 -0
  392. package/src/components/Toggle/Toggle.stories.tsx +132 -0
  393. package/src/components/Toggle/Toggle.tsx +96 -0
  394. package/src/components/Toggle/index.ts +1 -0
  395. package/src/components/Toggle/types.ts +43 -0
  396. package/src/components/Tooltip/Tooltip.scss +27 -0
  397. package/src/components/Tooltip/Tooltip.stories.tsx +97 -0
  398. package/src/components/Tooltip/Tooltip.tsx +194 -0
  399. package/src/components/Tooltip/index.ts +1 -0
  400. package/src/components/Tooltip/types.ts +60 -0
  401. package/src/components/Typography/Typography.scss +49 -0
  402. package/src/components/Typography/Typography.stories.tsx +57 -0
  403. package/src/components/Typography/Typography.tsx +39 -0
  404. package/src/components/Typography/index.ts +1 -0
  405. package/src/components/Typography/types.ts +56 -0
  406. package/src/fonts/Montserrat/Montserrat-Medium.ttf +0 -0
  407. package/src/fonts/Montserrat/Montserrat-Regular.ttf +0 -0
  408. package/src/fonts/Montserrat/Montserrat-SemiBold.ttf +0 -0
  409. package/src/fonts/Poppins/Poppins-Black.ttf +0 -0
  410. package/src/fonts/Poppins/Poppins-BlackItalic.ttf +0 -0
  411. package/src/fonts/Poppins/Poppins-Bold.ttf +0 -0
  412. package/src/fonts/Poppins/Poppins-BoldItalic.ttf +0 -0
  413. package/src/fonts/Poppins/Poppins-ExtraBold.ttf +0 -0
  414. package/src/fonts/Poppins/Poppins-ExtraBoldItalic.ttf +0 -0
  415. package/src/fonts/Poppins/Poppins-ExtraLight.ttf +0 -0
  416. package/src/fonts/Poppins/Poppins-ExtraLightItalic.ttf +0 -0
  417. package/src/fonts/Poppins/Poppins-Italic.ttf +0 -0
  418. package/src/fonts/Poppins/Poppins-Light.ttf +0 -0
  419. package/src/fonts/Poppins/Poppins-LightItalic.ttf +0 -0
  420. package/src/fonts/Poppins/Poppins-Medium.ttf +0 -0
  421. package/src/fonts/Poppins/Poppins-MediumItalic.ttf +0 -0
  422. package/src/fonts/Poppins/Poppins-Regular.ttf +0 -0
  423. package/src/fonts/Poppins/Poppins-SemiBold.ttf +0 -0
  424. package/src/fonts/Poppins/Poppins-SemiBoldItalic.ttf +0 -0
  425. package/src/fonts/Poppins/Poppins-Thin.ttf +0 -0
  426. package/src/fonts/Poppins/Poppins-ThinItalic.ttf +0 -0
  427. package/src/hooks/keyboardevents/useEscKeyEvent.tsx +31 -0
  428. package/src/hooks/useClickOutside.tsx +30 -0
  429. package/src/hooks/useFileDropzone.tsx +273 -0
  430. package/src/hooks/usePortalPosition.tsx +53 -0
  431. package/src/hooks/useTheme.tsx +13 -0
  432. package/src/index.ts +91 -0
  433. package/src/utils/TableCell/TableCell.ts +16 -0
  434. package/src/utils/checkEmpty/checkEmpty.stories.tsx +34 -0
  435. package/src/utils/checkEmpty/checkEmpty.ts +10 -0
  436. package/src/utils/ffID/ffID.stories.tsx +35 -0
  437. package/src/utils/ffID/ffid.ts +9 -0
  438. package/src/utils/getExtension/getExtension.stories.tsx +23 -0
  439. package/src/utils/getExtension/getExtension.ts +28 -0
  440. package/src/utils/truncateText/truncateText.stories.tsx +37 -0
  441. package/src/utils/truncateText/truncateText.ts +4 -0
  442. package/tsconfig.json +55 -0
  443. package/ui-library.zip +0 -0
  444. package/vite.config.js +30 -0
@@ -0,0 +1,88 @@
1
+ import { ReactNode } from 'react';
2
+
3
+ export interface BtnPropsCommon {
4
+ /**
5
+ * Label for the button
6
+ */
7
+ label?: string;
8
+ /**
9
+ * Boolean value to disable the button
10
+ */
11
+ disabled?: boolean;
12
+ /**
13
+ * Onclick function for button
14
+ */
15
+ onClick?: () => void;
16
+ }
17
+ export interface DrawerProps {
18
+ /**
19
+ * To Open the Drawer
20
+ */
21
+ isOpen: boolean;
22
+ /**
23
+ * To Expand the Drawer
24
+ */
25
+ _isExpanded?: boolean;
26
+ /**
27
+ * To show and hide the back button of the Drawer
28
+ */
29
+ isBackButtonVisible?: boolean;
30
+ /**
31
+ * To show and hide the close button of the Drawer
32
+ */
33
+ _isCloseModalButtonVisible?: boolean;
34
+ /**
35
+ * Function to close the drawer
36
+ */
37
+
38
+ onClose?: () => void;
39
+ /**
40
+ * Size of the drawer medium = 550px large = 850px
41
+ */
42
+ size?: 'small' | 'medium' | 'large' | 'x-large';
43
+
44
+ /**
45
+ * Body Content of the drawer
46
+ */
47
+ children: ReactNode;
48
+ /**
49
+ * Header title for the drawer
50
+ */
51
+ title: string | ReactNode;
52
+ /**
53
+ * To show the edit button on the header
54
+ */
55
+ showEditButton?: boolean;
56
+ /**
57
+ * Primary | Success button props
58
+ */
59
+ primaryButtonProps?: BtnPropsCommon;
60
+ /**
61
+ * Secondary | Cancel button props
62
+ */
63
+ secondaryButtonProps?: BtnPropsCommon;
64
+ /**
65
+ * Left side Primary Button | Cancel button props
66
+ */
67
+ leftPrimaryButtonProps?: BtnPropsCommon;
68
+ /**
69
+ * Left side Secondary | Cancel button props
70
+ */
71
+ leftSecondaryButtonProps?: BtnPropsCommon;
72
+ /**
73
+ * Onclick function for edit button
74
+ */
75
+ onEdit?: () => void;
76
+ /**
77
+ * Background overlay for the drawer
78
+ */
79
+ overlay?: boolean;
80
+ /**
81
+ * displays footer if its true, default true
82
+ */
83
+ isFooterRequired?: boolean;
84
+ /**
85
+ * footer Content
86
+ */
87
+ footerContent?: ReactNode;
88
+ }
@@ -0,0 +1 @@
1
+ export { default } from './Drawer';
@@ -0,0 +1,110 @@
1
+ @import '../../assets/styles/fonts';
2
+
3
+ .ff-expandable-chip-menu {
4
+ display: inline-flex;
5
+ gap: 16px;
6
+ align-items: center;
7
+ border-radius: 16px;
8
+ cursor: pointer;
9
+ overflow: hidden;
10
+ width: auto;
11
+ padding: 4px 8px;
12
+ transition: all 0.3s ease;
13
+
14
+ &--primary {
15
+ border: 0.5px solid var(--brand-color);
16
+ background-color: var(--expandable-menu-default-bg);
17
+ }
18
+
19
+ .ff-label-chip {
20
+ display: flex;
21
+ align-items: center;
22
+ justify-content: space-between;
23
+ gap: 4px;
24
+ white-space: nowrap;
25
+ padding: 2px 0;
26
+
27
+ .arrow-icon {
28
+ height: 14px;
29
+ width: 14px;
30
+ display: grid;
31
+ place-items: center;
32
+ }
33
+
34
+ &--primary {
35
+ color: var(--brand-color);
36
+ }
37
+ }
38
+
39
+ &--disabled {
40
+ opacity: 0.5;
41
+ &:disabled {
42
+ pointer-events: none;
43
+ }
44
+ }
45
+
46
+ &--medium {
47
+ @extend .fontSm;
48
+ line-height: 18px;
49
+ }
50
+
51
+ .ff-sub-chips {
52
+ display: flex;
53
+ gap: 8px;
54
+ max-width: 500px;
55
+ overflow-x: auto;
56
+ -ms-overflow-style: none;
57
+ &::-webkit-scrollbar {
58
+ display: none;
59
+ }
60
+ transform: scaleX(0);
61
+ transform-origin: left;
62
+ transition: transform 0.3s ease, opacity 0.3s ease;
63
+ opacity: 0;
64
+ }
65
+
66
+ &.expanded .ff-sub-chips {
67
+ transform: scaleX(1);
68
+ opacity: 1;
69
+ }
70
+
71
+ .ff-sub-chip {
72
+ padding: 2px 8px;
73
+ border-radius: 12px;
74
+ white-space: nowrap;
75
+ transition: background-color 0.3s ease, color 0.3s ease;
76
+ opacity: 0;
77
+ transform: translateX(-10px);
78
+ animation: fadeIn 0.5s ease forwards;
79
+
80
+ &--primary {
81
+ background: var(--expandable-menu-option-bg);
82
+ color: var(--brand-color);
83
+
84
+ &:hover,
85
+ &.selected {
86
+ background-color: var(--brand-color);
87
+ color: var(--expandable-menu-default-bg);
88
+ }
89
+ }
90
+ &--medium {
91
+ @extend .fontSm;
92
+ line-height: 18px;
93
+ }
94
+ }
95
+
96
+ @keyframes fadeIn {
97
+ 0% {
98
+ opacity: 0;
99
+ transform: translateX(-10px);
100
+ }
101
+ 100% {
102
+ opacity: 1;
103
+ transform: translateX(0);
104
+ }
105
+ }
106
+
107
+ &.expanded .ff-sub-chip {
108
+ animation: fadeIn 0.5s ease forwards;
109
+ }
110
+ }
@@ -0,0 +1,67 @@
1
+ import type { Meta, StoryObj } from '@storybook/react';
2
+ import ExpandableMenu from './ExpandableMenu';
3
+ import { useState } from 'react';
4
+
5
+ const meta: Meta<typeof ExpandableMenu> = {
6
+ title: 'Components/ExpandableMenu',
7
+ component: ExpandableMenu,
8
+ parameters: {
9
+ layout: 'left',
10
+ },
11
+ argTypes: {
12
+ disable: Boolean,
13
+ },
14
+ tags: ['autodocs'],
15
+ };
16
+
17
+ type Story = StoryObj<typeof ExpandableMenu>;
18
+
19
+ const defaultArgs = {
20
+ label: 'Execution Settings',
21
+ disable: false,
22
+ };
23
+
24
+ export const Primary: Story = {
25
+ args: {
26
+ ...defaultArgs,
27
+ subMenus: [
28
+ 'Environment settings',
29
+ 'Run settings',
30
+ 'Report settings',
31
+ 'Additional settings',
32
+ 'Environment settings',
33
+ 'Run settings',
34
+ 'Report settings',
35
+ 'Additional settings',
36
+ 'Environment settings',
37
+ 'Run settings',
38
+ 'Report settings',
39
+ 'Additional settings',
40
+ ],
41
+ },
42
+ };
43
+
44
+ export const Controlled: Story = {
45
+ render: () => {
46
+ const [selectedMenu, setSelectedMenu] = useState<string>('');
47
+ const onSubMenuClick = (chip: string) => {
48
+ setSelectedMenu(chip);
49
+ };
50
+
51
+ return (
52
+ <ExpandableMenu
53
+ {...defaultArgs}
54
+ subMenus={[
55
+ 'Environment settings',
56
+ 'Run settings',
57
+ 'Report settings',
58
+ 'Additional settings',
59
+ ]}
60
+ selectedMenu={selectedMenu}
61
+ onSubMenuClick={onSubMenuClick}
62
+ />
63
+ );
64
+ },
65
+ };
66
+
67
+ export default meta;
@@ -0,0 +1,101 @@
1
+ import { useCallback, useState } from 'react';
2
+ import './ExpandableMenu.scss';
3
+ import classNames from 'classnames';
4
+ import { ExpandableMenuProps } from './types';
5
+ import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
6
+ import Icon from '../Icon';
7
+ import './ExpandableMenu.scss';
8
+ import Typography from '../Typography';
9
+
10
+ const ExpandableMenu: React.FC<ExpandableMenuProps> = ({
11
+ label = '',
12
+ icon = (
13
+ <Icon
14
+ name="arrow_right"
15
+ height={5}
16
+ width={8}
17
+ color={'var(--icons-default-color)'}
18
+ />
19
+ ),
20
+ variant = 'primary',
21
+ size = 'medium',
22
+ disable = false,
23
+ subMenus = [],
24
+ selectedMenu = '',
25
+ onSubMenuClick = () => {},
26
+ }) => {
27
+ const [isExpanded, setIsExpanded] = useState(false);
28
+ const [isHovered, setIsHovered] = useState(false);
29
+
30
+ const toggleExpand = () => {
31
+ setIsExpanded((prev) => !prev);
32
+ setIsHovered(false);
33
+ };
34
+
35
+ const handleMouseEnter = useCallback(() => {
36
+ if (!isExpanded) setIsHovered(true);
37
+ }, [isExpanded]);
38
+
39
+ const handleMouseLeave = useCallback(() => {
40
+ if (!isExpanded) setIsHovered(false);
41
+ }, [isExpanded]);
42
+
43
+ const handleSelectedMenu = (chip: string) => {
44
+ if (!disable) {
45
+ onSubMenuClick(chip);
46
+ setIsExpanded(true);
47
+ }
48
+ };
49
+
50
+ const hasExpanded = isExpanded || isHovered;
51
+
52
+ return (
53
+ <div
54
+ className={classNames(
55
+ 'ff-expandable-chip-menu',
56
+ `ff-expandable-chip-menu--${variant}`,
57
+ {
58
+ 'ff-expandable-chip-menu--disabled': disable,
59
+ expanded: hasExpanded,
60
+ }
61
+ )}
62
+ onMouseEnter={handleMouseEnter}
63
+ onMouseLeave={handleMouseLeave}
64
+ >
65
+ <div
66
+ className={`ff-label-chip ff-label-chip--${variant} ff-expandable-chip-menu--${size}`}
67
+ onClick={toggleExpand}
68
+ >
69
+ <Typography>{label}</Typography>
70
+ <span className="arrow-icon">{icon}</span>
71
+ </div>
72
+
73
+ {hasExpanded && !checkEmpty(subMenus) && (
74
+ <div
75
+ className={classNames('ff-sub-chips', {
76
+ expanded: hasExpanded,
77
+ })}
78
+ >
79
+ {subMenus.map((chip, index) => (
80
+ <div
81
+ key={index}
82
+ className={classNames(
83
+ 'ff-sub-chip',
84
+ `ff-sub-chip--${variant}`,
85
+ `ff-sub-chip--${size}`,
86
+ {
87
+ selected: selectedMenu === chip,
88
+ }
89
+ )}
90
+ onClick={() => handleSelectedMenu(chip)}
91
+ >
92
+ {chip}
93
+ </div>
94
+ ))}
95
+ </div>
96
+ )}
97
+ </div>
98
+ );
99
+ };
100
+
101
+ export default ExpandableMenu;
@@ -0,0 +1 @@
1
+ export { default } from './ExpandableMenu';
@@ -0,0 +1,34 @@
1
+ export interface ExpandableMenuProps {
2
+ /**
3
+ * mandatory | label for the expandable menu
4
+ */
5
+ label: string;
6
+ /**
7
+ * optional | Icon to describe direction of expansion
8
+ */
9
+ icon?: React.ReactNode;
10
+ /**
11
+ * optional | variant of the menu
12
+ */
13
+ variant?: 'primary';
14
+ /**
15
+ * optional | size of the expandable menu
16
+ */
17
+ size?: 'medium';
18
+ /**
19
+ * optional | disable to disable the menu and prevent click events but not hover event
20
+ */
21
+ disable?: boolean;
22
+ /**
23
+ * Mandatory | sub menus to be shown inside expandable menu
24
+ */
25
+ subMenus: string[];
26
+ /**
27
+ * optional | selected sub menu of the expandable menu
28
+ */
29
+ selectedMenu?: string;
30
+ /**
31
+ * optional | onSubMenuClick event to perform action on click of sub menu
32
+ */
33
+ onSubMenuClick?: (subChip: any) => void;
34
+ }
@@ -0,0 +1,55 @@
1
+ import { FC } from 'react';
2
+ import classNames from 'classnames';
3
+ import './FileDropzone.scss';
4
+ import { DroppableProps } from './types';
5
+ import Button from '../Button';
6
+ import Typography from '../Typography';
7
+
8
+ const Dropzone: FC<DroppableProps> = ({
9
+ icon,
10
+ primaryLabel,
11
+ secondaryLabel,
12
+ buttonLabel,
13
+ getRootProps,
14
+ getInputProps,
15
+ isDragActive = false,
16
+ }) => {
17
+ return (
18
+ <div
19
+ {...getRootProps()}
20
+ className={classNames('ff-file-dropzone', {
21
+ 'ff-file-dropzone--active': isDragActive,
22
+ })}
23
+ >
24
+ <div className="ff-file-dropzone-content__icon">{icon}</div>
25
+ <div className="ff-file-dropzone-content__labels">
26
+ <Typography
27
+ as="p"
28
+ fontWeight="semi-bold"
29
+ lineHeight="18px"
30
+ textAlign="center"
31
+ color={'var(--text-color)'}
32
+ >
33
+ {primaryLabel}
34
+ </Typography>
35
+ <Typography
36
+ as="p"
37
+ lineHeight="18px"
38
+ textAlign="center"
39
+ color={'var(--text-color)'}
40
+ >
41
+ {secondaryLabel}
42
+ </Typography>
43
+ <Button
44
+ variant="primary"
45
+ label={buttonLabel}
46
+ className="choose-file-btn"
47
+ >
48
+ <input {...getInputProps()} />
49
+ </Button>
50
+ </div>
51
+ </div>
52
+ );
53
+ };
54
+
55
+ export default Dropzone;
@@ -0,0 +1,134 @@
1
+ @mixin column-flex-gap($gap: 0) {
2
+ display: flex;
3
+ flex-direction: column;
4
+ gap: $gap;
5
+ }
6
+
7
+ @mixin center {
8
+ display: grid;
9
+ place-items: center;
10
+ }
11
+
12
+ @mixin icon-container($height: 24px, $width: 24px) {
13
+ height: $height;
14
+ width: $width;
15
+ }
16
+
17
+ .ff-file-dropzone-wrapper {
18
+ @include column-flex-gap(10px);
19
+
20
+ .ff-file-dropzone {
21
+ width: 640px;
22
+ height: 188px;
23
+ padding: 16px 0;
24
+ border-radius: 8px;
25
+ background: var(--file-dropzone-default-color);
26
+ border: 1px dashed var(--brand-color);
27
+ display: flex;
28
+ align-items: center;
29
+ flex-direction: column;
30
+ text-align: center;
31
+ gap: 8px;
32
+
33
+ &--active {
34
+ background-color: var(--file-dropzone-selected-color);
35
+ }
36
+
37
+ &-content {
38
+ &__icon {
39
+ height: 80px;
40
+ width: 80px;
41
+ display: grid;
42
+ place-items: center;
43
+ }
44
+
45
+ &__labels {
46
+ .choose-file-btn {
47
+ margin: 0 auto;
48
+ position: relative;
49
+ font-weight: 600;
50
+ line-height: 15px;
51
+
52
+ input {
53
+ position: absolute;
54
+ top: 0;
55
+ left: 0;
56
+ width: 100%;
57
+ height: 100%;
58
+ opacity: 0;
59
+ }
60
+ }
61
+ }
62
+ }
63
+ }
64
+
65
+ .ff-file-details-wrapper {
66
+ @include column-flex-gap(10px);
67
+ width: 640px;
68
+ max-height: 300px;
69
+ overflow-y: auto;
70
+ scroll-behavior: smooth;
71
+ padding: 2px;
72
+
73
+ ::-webkit-scrollbar {
74
+ width: 2px;
75
+ }
76
+ -ms-overflow-style: none;
77
+ scrollbar-width: thin;
78
+
79
+ .ff-file-details {
80
+ @include column-flex-gap(10px);
81
+
82
+ &__item {
83
+ display: flex;
84
+ align-items: center;
85
+ justify-content: space-between;
86
+ padding: 4px;
87
+ border-radius: 4px;
88
+ background-color: var(--file-details-bg);
89
+ box-shadow: 0px 0px 4px 0px var(--file-details-container-shadow);
90
+ overflow: hidden;
91
+
92
+ .ff-file-info {
93
+ display: flex;
94
+ align-items: center;
95
+ gap: 4px;
96
+ width: 60%;
97
+
98
+ .ff-file-info__icon {
99
+ @include center;
100
+ @include icon-container;
101
+ }
102
+
103
+ &__name-wrapper {
104
+ @include column-flex-gap(2px);
105
+ justify-content: center;
106
+ overflow: hidden;
107
+ text-overflow: ellipsis;
108
+ white-space: nowrap;
109
+ width: 100%;
110
+
111
+ &__name {
112
+ overflow: hidden;
113
+ white-space: nowrap;
114
+ text-overflow: ellipsis;
115
+ display: block;
116
+ color: var(--text-color);
117
+ }
118
+ }
119
+ }
120
+
121
+ .ff-file-actions {
122
+ display: flex;
123
+ align-items: center;
124
+ &__icon-replace,
125
+ &__icon-remove {
126
+ @include icon-container;
127
+ @include center;
128
+ cursor: pointer;
129
+ }
130
+ }
131
+ }
132
+ }
133
+ }
134
+ }
@@ -0,0 +1,83 @@
1
+ import { StoryObj, Meta } from '@storybook/react';
2
+ import FileDropzone from './FileDropzone';
3
+ import Toaster from '../Toast';
4
+ import { useState } from 'react';
5
+
6
+ const meta: Meta<typeof FileDropzone> = {
7
+ title: 'Components/FileDropzone',
8
+ component: FileDropzone,
9
+ parameters: {
10
+ layout: 'centered',
11
+ },
12
+ tags: ['autodocs'],
13
+ };
14
+
15
+ type Story = StoryObj<typeof FileDropzone>;
16
+
17
+ const defaultArgs = {
18
+ accept: ['.png'],
19
+ multiple: true,
20
+ maxFiles: 5,
21
+ maxSize: 5000000,
22
+ maxSizeErrorMessage: 'Max file size limit of 5MB exceeded',
23
+ invalidFileMessage: 'Invalid file format',
24
+ fileExistMessage: 'File already exist with same name and type',
25
+ };
26
+
27
+ export const Primary: Story = {
28
+ args: {
29
+ ...defaultArgs,
30
+ },
31
+ };
32
+
33
+ export const withMIMEValidation: Story = {
34
+ args: {
35
+ ...defaultArgs,
36
+ accept: [
37
+ 'image/png',
38
+ 'image/jpeg',
39
+ 'application/x-zip-compressed',
40
+ 'application/zip',
41
+ ],
42
+ validateMIMEType: true,
43
+ },
44
+ };
45
+
46
+ export const Controlled: Story = {
47
+ render: () => {
48
+ const [showToaster, setShowToaster] = useState<boolean>(false);
49
+
50
+ const showMaxFilesError = () => {
51
+ setShowToaster(true);
52
+ setTimeout(() => {
53
+ setShowToaster(false);
54
+ }, 2000);
55
+ };
56
+
57
+ return (
58
+ <>
59
+ <FileDropzone
60
+ {...defaultArgs}
61
+ accept={[
62
+ 'image/png',
63
+ 'image/jpeg',
64
+ 'application/x-zip-compressed',
65
+ 'application/zip',
66
+ ]}
67
+ validateMIMEType={true}
68
+ onMaxFilesError={showMaxFilesError}
69
+ />
70
+ {showToaster && (
71
+ <Toaster
72
+ isOpen={showToaster}
73
+ variant="danger"
74
+ toastTitle="Error"
75
+ toastMessage={'Max 5 files can be uploaded'}
76
+ />
77
+ )}
78
+ </>
79
+ );
80
+ },
81
+ };
82
+
83
+ export default meta;