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 @@
1
+ {"root":["../src/index.ts","../src/styleguide/colorpalette/colorpalette.stories.tsx","../src/styleguide/colorpalette/colorpalette.tsx","../src/styleguide/colorpalette/colorpalettelist.ts","../src/styleguide/colorpalette/index.ts","../src/styleguide/colorpalette/types.ts","../src/styleguide/typography/typography.stories.tsx","../src/styleguide/typography/typography.tsx","../src/styleguide/typography/typographylist.ts","../src/styleguide/typography/types.ts","../src/assets/utils/functionutils.ts","../src/components/accordion/accordion.stories.tsx","../src/components/accordion/accordion.tsx","../src/components/accordion/index.ts","../src/components/accordion/types.ts","../src/components/addresourcebutton/addbutton.stories.tsx","../src/components/addresourcebutton/addbutton.tsx","../src/components/addresourcebutton/index.ts","../src/components/addresourcebutton/type.ts","../src/components/addresourcebutton/arrowsbutton/arrowsbutton.tsx","../src/components/button/button.stories.tsx","../src/components/button/button.tsx","../src/components/button/index.ts","../src/components/button/types.ts","../src/components/charts/donutchart/donutchart.stories.tsx","../src/components/charts/donutchart/donutchart.tsx","../src/components/charts/donutchart/index.ts","../src/components/charts/donutchart/type.ts","../src/components/charts/radialchart/radialchart.stories.tsx","../src/components/charts/radialchart/radialchart.tsx","../src/components/charts/radialchart/index.ts","../src/components/charts/radialchart/types.ts","../src/components/checkbox/checkbox.stories.tsx","../src/components/checkbox/checkbox.tsx","../src/components/checkbox/index.ts","../src/components/checkbox/types.ts","../src/components/chip/chip.stories.tsx","../src/components/chip/chip.tsx","../src/components/chip/index.ts","../src/components/chip/types.ts","../src/components/drawer/drawer.stories.tsx","../src/components/drawer/drawer.tsx","../src/components/drawer/types.ts","../src/components/drawer/index.ts","../src/components/expandablemenu/expandablemenu.stories.tsx","../src/components/expandablemenu/expandablemenu.tsx","../src/components/expandablemenu/index.ts","../src/components/expandablemenu/types.ts","../src/components/filedropzone/dropzone.tsx","../src/components/filedropzone/filedropzone.stories.tsx","../src/components/filedropzone/filedropzone.tsx","../src/components/filedropzone/filepreview.tsx","../src/components/filedropzone/index.ts","../src/components/filedropzone/types.ts","../src/components/form/form.stories.tsx","../src/components/form/form.tsx","../src/components/form/index.ts","../src/components/form/types.ts","../src/components/gridlayout/gridlayout.stories.tsx","../src/components/gridlayout/gridlayout.tsx","../src/components/gridlayout/index.ts","../src/components/gridlayout/types.ts","../src/components/highlighttext/highlighttext.stories.tsx","../src/components/highlighttext/highlighttext.tsx","../src/components/highlighttext/index.ts","../src/components/highlighttext/types.ts","../src/components/icon/icon.stories.tsx","../src/components/icon/icon.tsx","../src/components/icon/iconlist.ts","../src/components/icon/index.ts","../src/components/icon/types.ts","../src/components/input/input.stories.tsx","../src/components/input/input.tsx","../src/components/input/index.ts","../src/components/input/types.ts","../src/components/inputwithdropdown/inputwithdropdown.stories.tsx","../src/components/inputwithdropdown/inputwithdropdown.tsx","../src/components/inputwithdropdown/index.ts","../src/components/inputwithdropdown/types.ts","../src/components/lazyload/lazyload.stories.tsx","../src/components/lazyload/lazyload.ts","../src/components/lazyload/lazyloading.tsx","../src/components/lazyload/index.ts","../src/components/menuoption/menuoption.stories.tsx","../src/components/menuoption/menuoption.tsx","../src/components/menuoption/index.ts","../src/components/menuoption/types.ts","../src/components/minimodal/minimodal.stories.tsx","../src/components/minimodal/minimodal.tsx","../src/components/minimodal/index.ts","../src/components/minimodal/types.ts","../src/components/multiselect/dropdown.tsx","../src/components/multiselect/multiselect.stories.tsx","../src/components/multiselect/multiselect.tsx","../src/components/multiselect/multiselecttypes.ts","../src/components/multiselect/dropdowntypes.ts","../src/components/multiselect/index.ts","../src/components/radiobutton/radiobutton.stories.tsx","../src/components/radiobutton/radiobutton.tsx","../src/components/radiobutton/index.ts","../src/components/radiobutton/radiobuttontypes.tsx","../src/components/radiogroup/radiogroup.stories.tsx","../src/components/radiogroup/radiogroup.tsx","../src/components/radiogroup/index.ts","../src/components/radiogroup/radiogrouptypes.tsx","../src/components/search/search.stories.tsx","../src/components/search/search.tsx","../src/components/search/index.ts","../src/components/search/types.ts","../src/components/select/select.stories.tsx","../src/components/select/select.tsx","../src/components/select/index.ts","../src/components/select/types.ts","../src/components/select/components/dropdown/dropdown.tsx","../src/components/select/components/dropdown/dropdowntypes.ts","../src/components/table/table.stories.tsx","../src/components/table/table.tsx","../src/components/table/types.ts","../src/components/table/index.ts","../src/components/tabletree/tabletree.stories.tsx","../src/components/tabletree/tabletree.tsx","../src/components/tabletree/data.ts","../src/components/tabletree/index.ts","../src/components/tabs/tabs.stories.tsx","../src/components/tabs/tabs.tsx","../src/components/tabs/index.ts","../src/components/tabs/types.ts","../src/components/textarea/textarea.stories.tsx","../src/components/textarea/textarea.tsx","../src/components/textarea/types.ts","../src/components/textarea/index.tsx","../src/components/themeprovider/themeprovider.tsx","../src/components/themeprovider/index.ts","../src/components/themeprovider/types.ts","../src/components/toast/toast.stories.tsx","../src/components/toast/toast.tsx","../src/components/toast/index.ts","../src/components/toast/types.ts","../src/components/toggle/toggle.stories.tsx","../src/components/toggle/toggle.tsx","../src/components/toggle/index.ts","../src/components/toggle/types.ts","../src/components/tooltip/tooltip.stories.tsx","../src/components/tooltip/tooltip.tsx","../src/components/tooltip/index.ts","../src/components/tooltip/types.ts","../src/components/typography/typography.stories.tsx","../src/components/typography/typography.tsx","../src/components/typography/index.ts","../src/components/typography/types.ts","../src/hooks/useclickoutside.tsx","../src/hooks/usefiledropzone.tsx","../src/hooks/useportalposition.tsx","../src/hooks/usetheme.tsx","../src/hooks/keyboardevents/useesckeyevent.tsx","../src/utils/tablecell/tablecell.ts","../src/utils/checkempty/checkempty.stories.tsx","../src/utils/checkempty/checkempty.ts","../src/utils/ffid/ffid.stories.tsx","../src/utils/ffid/ffid.ts","../src/utils/getextension/getextension.stories.tsx","../src/utils/getextension/getextension.ts","../src/utils/truncatetext/truncatetext.stories.tsx","../src/utils/truncatetext/truncatetext.ts"],"version":"5.6.2"}
@@ -0,0 +1 @@
1
+ export declare const prepareData: (dataObj: any, columnObj: any) => any;
@@ -0,0 +1,3 @@
1
+ type valueType = any;
2
+ export declare const checkEmpty: (value: valueType) => boolean;
3
+ export {};
@@ -0,0 +1,6 @@
1
+ declare const _default: {
2
+ title: string;
3
+ component: (value: any) => boolean;
4
+ };
5
+ export default _default;
6
+ export declare const Default: () => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,6 @@
1
+ import type { Meta, StoryObj } from '@storybook/react';
2
+ import ffid from './ffid';
3
+ declare const meta: Meta<typeof ffid>;
4
+ type Story = StoryObj;
5
+ export declare const Primary: Story;
6
+ export default meta;
@@ -0,0 +1,2 @@
1
+ declare const ffid: () => string;
2
+ export default ffid;
@@ -0,0 +1,4 @@
1
+ type valueType = File | string;
2
+ export declare const getExtension: (value: valueType) => string | undefined;
3
+ export declare const getExtensionWithPeriod: (value: valueType) => string;
4
+ export {};
@@ -0,0 +1,6 @@
1
+ declare const _default: {
2
+ title: string;
3
+ component: (value: string | File) => string | undefined;
4
+ };
5
+ export default _default;
6
+ export declare const Default: () => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1 @@
1
+ export declare const truncateText: (text: string, maxLength: number) => string;
@@ -0,0 +1,6 @@
1
+ declare const _default: {
2
+ title: string;
3
+ component: (text: string, maxLength: number) => string;
4
+ };
5
+ export default _default;
6
+ export declare const Default: () => import("react/jsx-runtime").JSX.Element;
package/package.json ADDED
@@ -0,0 +1,62 @@
1
+ {
2
+ "name": "pixel-react",
3
+ "description": "Great for pixel-perfect, design-focused components in React",
4
+ "version": "1.0.0",
5
+ "main": "lib/index.js",
6
+ "module": "lib/index.esm.js",
7
+ "types": "lib/index.d.ts",
8
+ "author": {
9
+ "name": "Padmakant Baloji"
10
+ },
11
+ "license": "MIT",
12
+ "devDependencies": {
13
+ "@chromatic-com/storybook": "^2.0.2",
14
+ "@rollup/plugin-commonjs": "^25.0.7",
15
+ "@rollup/plugin-node-resolve": "^15.2.3",
16
+ "@rollup/plugin-typescript": "^11.1.6",
17
+ "@storybook/addon-docs": "^8.3.4",
18
+ "@storybook/addon-essentials": "^8.3.4",
19
+ "@storybook/addon-interactions": "^8.3.4",
20
+ "@storybook/addon-links": "^8.3.4",
21
+ "@storybook/addon-onboarding": "^8.3.4",
22
+ "@storybook/blocks": "^8.3.4",
23
+ "@storybook/react": "^8.3.4",
24
+ "@storybook/react-vite": "^8.3.4",
25
+ "@storybook/test": "^8.3.4",
26
+ "@types/react": "^18.2.57",
27
+ "@types/react-dom": "^18.2.21",
28
+ "chromatic": "^11.4.0",
29
+ "postcss": "^8.4.35",
30
+ "react": "^18.2.0",
31
+ "react-dom": "^18.2.0",
32
+ "rollup": "^4.12.0",
33
+ "rollup-plugin-dts": "^6.1.0",
34
+ "rollup-plugin-peer-deps-external": "^2.2.4",
35
+ "rollup-plugin-postcss": "^4.0.2",
36
+ "sass": "^1.79.4",
37
+ "storybook": "^8.3.4",
38
+ "storybook-addon-theme-provider": "^0.2.2",
39
+ "typescript": "^5.3.3",
40
+ "vite": "^5.1.3"
41
+ },
42
+ "peerDependencies": {
43
+ "react": "^18.2.0",
44
+ "react-dom": "^18.2.0"
45
+ },
46
+ "scripts": {
47
+ "storybook": "tsc -b && storybook dev -p 6006",
48
+ "build-storybook": "storybook build",
49
+ "build": "tsc -b && rollup -c",
50
+ "chromatic": "chromatic --exit-zero-on-changes"
51
+ },
52
+ "dependencies": {
53
+ "@babel/plugin-transform-react-jsx": "^7.24.7",
54
+ "@types/react-window": "^1.8.8",
55
+ "@vitejs/plugin-react": "^4.3.0",
56
+ "classnames": "^2.5.1",
57
+ "react-hook-form": "^7.53.0",
58
+ "react-window": "^1.8.10",
59
+ "scss": "^0.2.4",
60
+ "vite-plugin-svgr": "^4.2.0"
61
+ }
62
+ }
@@ -0,0 +1,57 @@
1
+ import peerDepsExternal from 'rollup-plugin-peer-deps-external';
2
+ import resolve from '@rollup/plugin-node-resolve';
3
+ import commonjs from '@rollup/plugin-commonjs';
4
+ import typescript from '@rollup/plugin-typescript';
5
+ import postcss from 'rollup-plugin-postcss';
6
+ import dts from 'rollup-plugin-dts';
7
+ import react from '@vitejs/plugin-react';
8
+ import svgrPlugin from 'vite-plugin-svgr';
9
+ import { createRequire } from 'node:module';
10
+
11
+ // This is required to read package.json file when
12
+ // using Native ES modules in Node.js
13
+ const requireFile = createRequire(import.meta.url);
14
+ const packageJson = requireFile('./package.json');
15
+
16
+ export default [
17
+ {
18
+ input: 'src/index.ts',
19
+ output: [
20
+ {
21
+ file: packageJson.main, // CJS output
22
+ format: 'cjs',
23
+ sourcemap: true,
24
+ inlineDynamicImports: true,
25
+ },
26
+ {
27
+ file: packageJson.module, // ESM output
28
+ format: 'esm',
29
+ sourcemap: true,
30
+ inlineDynamicImports: true,
31
+ },
32
+ ],
33
+ plugins: [
34
+ peerDepsExternal(),
35
+ resolve(),
36
+ commonjs(),
37
+ typescript(), // Ensure tsconfig.json targets ESM
38
+ postcss({
39
+ extensions: ['.scss'],
40
+ }),
41
+ react(),
42
+ svgrPlugin({
43
+ svgrOptions: {
44
+ icon: true,
45
+ },
46
+ }),
47
+ ],
48
+ },
49
+ {
50
+ input: 'lib/index.d.ts',
51
+ output: [
52
+ { file: 'lib/index.d.ts', format: 'es', inlineDynamicImports: true },
53
+ ],
54
+ plugins: [dts()],
55
+ external: [/\.scss$/],
56
+ },
57
+ ];
@@ -0,0 +1,58 @@
1
+ @import '../../assets/styles/colors';
2
+ @import '../../assets/styles/fonts';
3
+
4
+ .ff-style-guide {
5
+ border-radius: 12px;
6
+
7
+ .style-guide-header {
8
+ background-color: $brand-color;
9
+ height: 100px;
10
+ padding: 40px;
11
+ border-top-left-radius: 12px;
12
+ border-top-right-radius: 12px;
13
+ color: $tooltip-text-color;
14
+
15
+ & div {
16
+ @extend .font-size-32;
17
+ font-weight: 600;
18
+ }
19
+ & span {
20
+ @extend .fontLg;
21
+ font-weight: 400;
22
+ }
23
+ }
24
+
25
+ .style-guide-content {
26
+ padding: 20px;
27
+ display: grid;
28
+ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
29
+ grid-gap: 40px;
30
+
31
+ .color-card {
32
+ display: flex;
33
+ flex-direction: column;
34
+ padding: 10px;
35
+
36
+ .color-box {
37
+ height: 82px;
38
+ width: 210px;
39
+ border-radius: 12px;
40
+ margin-bottom: 10px;
41
+ }
42
+
43
+ .color-name {
44
+ @extend .fontMd;
45
+ font-weight: 500;
46
+ margin-bottom: 5px;
47
+ text-transform: capitalize;
48
+ word-wrap: break-word;
49
+ }
50
+
51
+ .color-code {
52
+ @extend .fontSm;
53
+ font-weight: 400;
54
+ color: $text-color;
55
+ }
56
+ }
57
+ }
58
+ }
@@ -0,0 +1,16 @@
1
+ import type { Meta, StoryObj } from '@storybook/react';
2
+ import StyleGuide from './ColorPalette';
3
+
4
+ const meta: Meta<typeof StyleGuide> = {
5
+ title: 'StyleGuide/Colors',
6
+ component: StyleGuide,
7
+ tags: ['autodocs'],
8
+ };
9
+
10
+ type Story = StoryObj<typeof StyleGuide>;
11
+
12
+ export const ColorList: Story = {
13
+ args: {},
14
+ };
15
+
16
+ export default meta;
@@ -0,0 +1,61 @@
1
+ import { ColorBoxProps } from './types';
2
+ import ColorPalette from './colorPaletteList';
3
+ import './ColorPalette.scss';
4
+
5
+ // Component to render each color card
6
+ const ColorBox = ({
7
+ name,
8
+ colorCode,
9
+ opacity,
10
+ dropShadow,
11
+ border,
12
+ }: ColorBoxProps) => {
13
+ const opacityPercentage = opacity ? `${Math.round(opacity * 100)}%` : '';
14
+
15
+ const boxStyle = {
16
+ background: colorCode,
17
+ opacity: opacity,
18
+ filter: dropShadow ? dropShadow : '',
19
+ border: `1px solid ${border}`,
20
+ };
21
+
22
+ return (
23
+ <div className="color-card">
24
+ <span className="color-name">{name}</span>
25
+ <div className="color-box" style={boxStyle} />
26
+ <span className="color-code">
27
+ {colorCode} {opacityPercentage && `opacity ${opacityPercentage}`} <br />
28
+ {border && `Border -${border}`}
29
+ </span>
30
+ </div>
31
+ );
32
+ };
33
+
34
+ // Main Colors component
35
+ const Colors = () => {
36
+ return (
37
+ <div className="ff-style-guide">
38
+ <div className="style-guide-header">
39
+ <div>Colors</div>
40
+ <span>
41
+ Application of the color palette brings a unified and recognisable
42
+ consistency to MX's array of digital products and interface.
43
+ </span>
44
+ </div>
45
+ <div className="style-guide-content">
46
+ {ColorPalette.map((color) => (
47
+ <ColorBox
48
+ key={color.name}
49
+ name={color.name}
50
+ colorCode={color.colorCode}
51
+ opacity={color?.opacity}
52
+ dropShadow={color?.dropShadow}
53
+ border={color?.border}
54
+ />
55
+ ))}
56
+ </div>
57
+ </div>
58
+ );
59
+ };
60
+
61
+ export default Colors;
@@ -0,0 +1,97 @@
1
+ import { ColorPaletteType } from './types';
2
+
3
+ const ColorPalette: ColorPaletteType = [
4
+ { name: 'Brand Color', colorCode: '#71347b' },
5
+ { name: 'Text Color', colorCode: '#1e161f' },
6
+ { name: 'Description Text', colorCode: '#7a7a7a' },
7
+ { name: 'Clickable Text Color', colorCode: '#71347b' },
8
+ { name: 'Icons Default Color', colorCode: '#71347b' },
9
+ { name: 'Border Color', colorCode: '#f0e7f4' },
10
+ { name: 'Disable Color', colorCode: '#71347b', opacity: 0.5 },
11
+ { name: 'Hover Color', colorCode: '#f7ebff' },
12
+ { name: 'Pop-up Background Blur', colorCode: '#14041c', opacity: 0.1 },
13
+ { name: 'Drawer Footer Background', colorCode: '#ffffff', border: '#f0e7f4' },
14
+ { name: 'Slider Table Color', colorCode: '#efe1f9', opacity: 1 },
15
+ { name: 'Text bg Highlight', colorCode: '#f5fb00' },
16
+
17
+ { name: 'Tooltip Bg Color', colorCode: '#1e161f' },
18
+ { name: 'Tooltip Text Color(default)', colorCode: '#ffffff' },
19
+ {
20
+ name: 'Toggle Strip Color(default)',
21
+ colorCode: '#cfd1e2',
22
+ dropShadow: 'drop-shadow(0 0 2px #00000025)',
23
+ },
24
+ { name: 'Tooltip Text Color(Active)', colorCode: '#ffffff' },
25
+ {
26
+ name: 'Toggle Strip Color(Active)',
27
+ colorCode: '#71347b',
28
+ dropShadow: 'drop-shadow(0 0 2px #00000025)',
29
+ }, // todo drop shadow
30
+ {
31
+ name: 'Primary Button Color',
32
+ colorCode:
33
+ 'linear-gradient(90deg, rgba(113, 52, 123, 1) 100%, rgba(70, 22, 77, 1) 100%)',
34
+ },
35
+ {
36
+ name: 'Primary Button Hover',
37
+ colorCode:
38
+ 'linear-gradient(90deg, rgba(141, 59, 154, 1) 100%, rgba(120, 31, 134, 1) 100%)',
39
+ },
40
+ {
41
+ name: 'Primary Button Disable',
42
+ colorCode:
43
+ 'linear-gradient(90deg, rgba(113, 52, 123, 1) 100%, rgba(113, 52, 123, 1) 100%)',
44
+ opacity: 0.5,
45
+ },
46
+ { name: 'Primary Button Text Color', colorCode: '#ffffff' },
47
+ {
48
+ name: 'Secondary Button (default)',
49
+ colorCode: 'rgba(113, 52, 123, 1)',
50
+ },
51
+ {
52
+ name: 'Secondary Button (Hover)',
53
+ colorCode:
54
+ 'linear-gradient(90deg, rgba(113, 52, 123, 0.05) 100%, rgba(70, 22, 77, 0.05) 100%)',
55
+ },
56
+ {
57
+ name: 'Secondary Button (Disabled)',
58
+ colorCode: 'rgba(113, 52, 123, 1)',
59
+ opacity: 0.5,
60
+ },
61
+ {
62
+ name: 'Tertiary Button (default)',
63
+ colorCode:
64
+ 'linear-gradient(90deg, rgba(70, 22, 77, 0.05) 100%, rgba(113, 52, 123, 0.05) 100%)',
65
+ },
66
+ {
67
+ name: 'Tertiary Button (Hover)',
68
+ colorCode:
69
+ 'linear-gradient(90deg, rgba(70, 22, 77, 0.1) 100%, rgba(113, 52, 123, 0.1) 100%)',
70
+ },
71
+ {
72
+ name: 'Tertiary Button (Disabled)',
73
+ colorCode:
74
+ 'linear-gradient(90deg, rgba(70, 22, 77, 0.05) 100%, rgba(113, 52, 123, 0.05) 100%)',
75
+ opacity: 0.5,
76
+ },
77
+ {
78
+ name: 'Primary Button Color',
79
+ colorCode:
80
+ 'linear-gradient(90deg, rgba(228, 37, 37, 1) 100%, rgba(201, 0, 0, 1) 100%)',
81
+ },
82
+ {
83
+ name: 'Primary Button Hover',
84
+ colorCode:
85
+ 'linear-gradient(90deg, rgba(233, 81, 81, 1) 100%, rgba(212, 52, 52, 1) 100%)',
86
+ },
87
+ {
88
+ name: 'Primary Button Disabled',
89
+ colorCode:
90
+ 'linear-gradient(90deg, rgba(233, 81, 81, 1) 100%, rgba(212, 52, 52, 1) 100%)',
91
+ opacity: 0.5,
92
+ },
93
+ { name: 'Primary Button Text Color', colorCode: '#ffffff' },
94
+ { name: 'Overlay Background', colorCode: '#1e161f', opacity: 0.1 },
95
+ ];
96
+
97
+ export default ColorPalette;
@@ -0,0 +1 @@
1
+ export { default } from './ColorPalette';
@@ -0,0 +1,17 @@
1
+ export interface ColorBoxProps {
2
+ name: string;
3
+ colorCode: string;
4
+ opacity?: number;
5
+ dropShadow?: string;
6
+ border?: string;
7
+ }
8
+
9
+ export interface Color {
10
+ name: string;
11
+ colorCode: string;
12
+ opacity?: number;
13
+ dropShadow?: string;
14
+ border?: string;
15
+ }
16
+
17
+ export type ColorPaletteType = Color[];
@@ -0,0 +1,100 @@
1
+ @import '../../assets/styles/colors';
2
+ @import '../../assets/styles/fonts';
3
+
4
+ .typography-container {
5
+ .typography-header {
6
+ & div {
7
+ @extend .font2Xl;
8
+ font-weight: 600;
9
+ }
10
+ & span {
11
+ @extend .fontSm;
12
+ font-weight: 400;
13
+ color: $tooltip-bg-color; // need to change color #7A7A7A
14
+ }
15
+ }
16
+ }
17
+ .font-display {
18
+ display: flex;
19
+ flex-direction: column;
20
+ gap: 20px;
21
+ }
22
+
23
+ .font-row {
24
+ display: flex;
25
+ justify-content: space-between;
26
+ padding: 20px;
27
+ }
28
+
29
+ .font-left {
30
+ width: 60%;
31
+ display: flex;
32
+ flex-direction: column;
33
+ border-right: 1px solid $border-color;
34
+ padding: 10px;
35
+ gap: 10px;
36
+
37
+ .font-name {
38
+ @extend .fontLg;
39
+ font-weight: 600;
40
+ }
41
+
42
+ .font-sample {
43
+ @extend .font-size-80;
44
+ font-weight: 700;
45
+ }
46
+
47
+ .font-characters {
48
+ @extend .font2Xl;
49
+ font-weight: 400;
50
+ line-height: 36px;
51
+ letter-spacing: 0.16em;
52
+ white-space: pre;
53
+ }
54
+ }
55
+
56
+ .font-right {
57
+ width: 40%;
58
+ display: flex;
59
+ flex-direction: column;
60
+ justify-content: center;
61
+ padding: 20px;
62
+ gap: 20px;
63
+
64
+ .font-right-section {
65
+ display: flex;
66
+ align-items: center;
67
+
68
+ .font-sample-large {
69
+ font-size: 40px;
70
+ margin-right: 10px;
71
+ }
72
+
73
+ // Apply specific font weight different sections
74
+ &.bold {
75
+ @extend .font2Xl;
76
+ font-weight: 700;
77
+ }
78
+ &.semi-bold {
79
+ @extend .font2Xl;
80
+ font-weight: 600;
81
+ }
82
+ &.regular {
83
+ @extend .font2Xl;
84
+ font-weight: 400;
85
+ }
86
+
87
+ .font-info {
88
+ display: flex;
89
+ flex-direction: column;
90
+ align-items: flex-start;
91
+
92
+ // Specific styling for the font-size part
93
+ .font-size {
94
+ @extend .fontLg;
95
+ font-weight: 400;
96
+ color: $tooltip-bg-color;
97
+ }
98
+ }
99
+ }
100
+ }
@@ -0,0 +1,16 @@
1
+ import type { Meta, StoryObj } from '@storybook/react';
2
+ import Typography from './Typography';
3
+
4
+ const meta: Meta<typeof Typography> = {
5
+ title: 'StyleGuide/Typography',
6
+ component: Typography,
7
+ tags: ['autodocs'],
8
+ };
9
+
10
+ type Story = StoryObj<typeof Typography>;
11
+
12
+ export const AllFonts: Story = {
13
+ args: {},
14
+ };
15
+
16
+ export default meta;
@@ -0,0 +1,60 @@
1
+ import './Typography.scss';
2
+
3
+ const Typography = () => {
4
+ return (
5
+ <div className="typography-container">
6
+ <div className="typography-header">
7
+ <div>_Typography</div>
8
+ <span>
9
+ Our design system leverages a purposeful set of typography styles.
10
+ We'he stress-tested this typographic scale across dozens of projects
11
+ to make sure it's robust enough to use across (almost) any project,
12
+ while remaining as accessible as possible for everyone.
13
+ </span>
14
+ </div>
15
+ <div className="font-display">
16
+ <div className="font-row">
17
+ <div className="font-left">
18
+ <div className="font-name">Poppins</div>
19
+ <div className="font-sample">Aa</div>
20
+ <div className="font-characters">
21
+ ABCDEFGHIJKLMNOPQRSTUVWXYZ
22
+ <br />
23
+ abcdefghijklmnopqrstuvwxyz
24
+ <br />
25
+ 0123456789
26
+ <br />
27
+ !@#$%^&*()
28
+ </div>
29
+ </div>
30
+
31
+ <div className="font-right">
32
+ <div className="font-right-section bold">
33
+ <div className="font-sample-large">Aa</div>
34
+ <div className="font-info">
35
+ <span>Bold</span>
36
+ <div className="font-size">font size: 12px = 0.75rem</div>
37
+ </div>
38
+ </div>
39
+ <div className="font-right-section semi-bold">
40
+ <div className="font-sample-large">Aa</div>
41
+ <div className="font-info">
42
+ <span>SemiBold</span>
43
+ <div className="font-size">font size: 12px = 0.75rem</div>
44
+ </div>
45
+ </div>
46
+ <div className="font-right-section regular">
47
+ <div className="font-sample-large">Aa</div>
48
+ <div className="font-info">
49
+ <span>Regular</span>
50
+ <div className="font-size">font size: 12px = 0.75rem</div>
51
+ </div>
52
+ </div>
53
+ </div>
54
+ </div>
55
+ </div>
56
+ </div>
57
+ );
58
+ };
59
+
60
+ export default Typography;
@@ -0,0 +1,3 @@
1
+ export const fontData = [
2
+ { name: 'Poppins', fontSizePx: '12px', fontSizeRem: '0.75rem' },
3
+ ];
@@ -0,0 +1,9 @@
1
+ export interface FontData {
2
+ name: string;
3
+ fontSizePx: string;
4
+ fontSizeRem: string;
5
+ }
6
+
7
+ export interface TypographyProps {
8
+ fonts: FontData[];
9
+ }