@mohamed-karawia/library 0.1.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (539) hide show
  1. package/.github/workflows/chromatic.yml +26 -0
  2. package/.storybook/main.js +21 -0
  3. package/.storybook/middleware.js +28 -0
  4. package/.storybook/preview.js +9 -0
  5. package/CHANGELOG.md +66 -0
  6. package/LICENSE +21 -0
  7. package/README.md +23 -0
  8. package/README.old.md +3 -0
  9. package/build-storybook.log +2704 -0
  10. package/dist/index.js +311 -0
  11. package/dist/stories/API/API.js +48 -0
  12. package/dist/stories/API/API.stories.js +24 -0
  13. package/dist/stories/Agora/Call/Call.js +316 -0
  14. package/dist/stories/Agora/Chat/Chat.js +107 -0
  15. package/dist/stories/Agora/Chat/Chat.stories.js +24 -0
  16. package/dist/stories/Agora/Chat/Components/ChatItem/ChatItem.js +34 -0
  17. package/dist/stories/Agora/Chat/Components/ChatRoom/ChatRoom.js +199 -0
  18. package/dist/stories/Agora/Controls/Controls.js +80 -0
  19. package/dist/stories/Agora/Preview/PreviewCamera.js +247 -0
  20. package/dist/stories/Agora/Preview/ShareScreen.js +119 -0
  21. package/dist/stories/Agora/Room/Room.js +114 -0
  22. package/dist/stories/Agora/Room/Room.stories.js +24 -0
  23. package/dist/stories/Buttons/Buttons/Buttons.js +59 -0
  24. package/dist/stories/Buttons/Buttons/Buttons.stories.js +39 -0
  25. package/dist/stories/Buttons/ReactModal/ReactModal.js +94 -0
  26. package/dist/stories/Buttons/ReactModal/ReactModal.stories.js +30 -0
  27. package/dist/stories/Buttons/ReactModal/ReactModalDemo.js +17 -0
  28. package/dist/stories/Chat/Chat.js +76 -0
  29. package/dist/stories/Chat/Chat.stories.js +76 -0
  30. package/dist/stories/Common Inputs/CheckboxGroup/CheckboxGroup.js +59 -0
  31. package/dist/stories/Common Inputs/CheckboxGroup/CheckboxGroup.stories.js +58 -0
  32. package/dist/stories/Common Inputs/CustomAutoComplete/CustomAutoComplete.js +93 -0
  33. package/dist/stories/Common Inputs/CustomAutoComplete/CustomAutoComplete.stories.js +56 -0
  34. package/dist/stories/Common Inputs/CustomDropzone/CustomDropZone.js +88 -0
  35. package/dist/stories/Common Inputs/CustomDropzone/CustomDropzone.stories.js +47 -0
  36. package/dist/stories/Common Inputs/CustomSelect/CustomSelect.js +92 -0
  37. package/dist/stories/Common Inputs/CustomSelect/CustomSelect.stories.js +61 -0
  38. package/dist/stories/Common Inputs/CustomTextarea/CustomTextarea.js +65 -0
  39. package/dist/stories/Common Inputs/CustomTextarea/CustomTextarea.stories.js +48 -0
  40. package/dist/stories/Common Inputs/DatePicker/DatePicker.js +104 -0
  41. package/dist/stories/Common Inputs/DatePicker/DatePicker.stories.js +60 -0
  42. package/dist/stories/Common Inputs/DatePicker/SingleDatePicker.js +97 -0
  43. package/dist/stories/Common Inputs/DropZone.js +148 -0
  44. package/dist/stories/Common Inputs/EditorComponent/EditorComponent.js +84 -0
  45. package/dist/stories/Common Inputs/EditorComponent/EditorComponent.stories.js +62 -0
  46. package/dist/stories/Common Inputs/EditorComponent/constants.js +41 -0
  47. package/dist/stories/Common Inputs/Formik/InputField/InputField.js +35 -0
  48. package/dist/stories/Common Inputs/Formik/InputField/InputField.stories.js +43 -0
  49. package/dist/stories/Common Inputs/Formik/RadioField/RadioField.js +54 -0
  50. package/dist/stories/Common Inputs/Formik/RadioField/RadioField.stories.js +60 -0
  51. package/dist/stories/Common Inputs/RadioInput/RadioInput.js +115 -0
  52. package/dist/stories/Common Inputs/RadioInput/RadioInput.stories.js +50 -0
  53. package/dist/stories/Common Inputs/RichTextInput/Components/Emoji/Emoji.js +31 -0
  54. package/dist/stories/Common Inputs/RichTextInput/Components/Gif/Gif.js +88 -0
  55. package/dist/stories/Common Inputs/RichTextInput/RichTextInput.js +278 -0
  56. package/dist/stories/Common Inputs/RichTextInput/RichTextInput.stories.js +51 -0
  57. package/dist/stories/Common Inputs/TextField/TextField.js +65 -0
  58. package/dist/stories/Common Inputs/TextField/TextField.stories.js +48 -0
  59. package/dist/stories/Containers/BaseMaterial.js +65 -0
  60. package/dist/stories/Containers/BaseMaterial.stories.js +24 -0
  61. package/dist/stories/Containers/WidgetExample/WidgetBody.js +17 -0
  62. package/dist/stories/Containers/WidgetExample/WidgetBody.stories.js +24 -0
  63. package/dist/stories/Containers/WidgetExample/WidgetExample.js +23 -0
  64. package/dist/stories/Containers/WidgetExample/WidgetExample.stories.js +24 -0
  65. package/dist/stories/Containers/WidgetExample/WidgetHead.js +17 -0
  66. package/dist/stories/Containers/WidgetExample/WidgetHead.stories.js +24 -0
  67. package/dist/stories/Enrollment/Admin/CreateForm/CreateForm.js +83 -0
  68. package/dist/stories/Enrollment/Admin/CreateForm/CreateForm.stories.js +22 -0
  69. package/dist/stories/Enrollment/Admin/DetailedForm/DetailedForm.js +81 -0
  70. package/dist/stories/Enrollment/Admin/DetailedForm/DetailedForm.stories.js +42 -0
  71. package/dist/stories/Enrollment/Admin/ViewForms/ViewForms.js +46 -0
  72. package/dist/stories/Enrollment/Admin/ViewForms/ViewForms.stories.js +65 -0
  73. package/dist/stories/Enrollment/Guest/FillForm/FillForm.js +64 -0
  74. package/dist/stories/Enrollment/Guest/FillForm/FillForm.stories.js +48 -0
  75. package/dist/stories/Events/CreateEvent/CreateEvent.js +110 -0
  76. package/dist/stories/Events/CreateEvent/CreateEvent.stories.js +30 -0
  77. package/dist/stories/Events/Event/Event.js +94 -0
  78. package/dist/stories/Events/Event/Event.stories.js +33 -0
  79. package/dist/stories/Events/EventsList/EventsList.js +135 -0
  80. package/dist/stories/Events/EventsList/EventsList.stories.js +44 -0
  81. package/dist/stories/Forms/AddPhoto/AddPhoto.js +101 -0
  82. package/dist/stories/Forms/AddPhoto/AddPhoto.stories.js +47 -0
  83. package/dist/stories/Forms/AddSong/AddSong.js +98 -0
  84. package/dist/stories/Forms/AddSong/AddSong.stories.js +37 -0
  85. package/dist/stories/Forms/AddVideo/AddVideo.js +103 -0
  86. package/dist/stories/Forms/AddVideo/AddVideo.stories.js +33 -0
  87. package/dist/stories/Forms/Create-Profile/CreateProfile.js +229 -0
  88. package/dist/stories/Forms/Create-Profile/CreateProfile.stories.js +49 -0
  89. package/dist/stories/Forms/Create-Profile/subcomponents/LogoUploader.js +54 -0
  90. package/dist/stories/Forms/Create-Profile/subcomponents/LogoUploader.stories.js +42 -0
  91. package/dist/stories/Forms/Create-Profile/subcomponents/ProfilePhoto.js +49 -0
  92. package/dist/stories/Forms/Create-Profile/subcomponents/ProfilePhoto.stories.js +41 -0
  93. package/dist/stories/Forms/Create-Profile/subcomponents/ResetBtn.js +41 -0
  94. package/dist/stories/Forms/Create-Profile/subcomponents/ResetBtn.stories.js +32 -0
  95. package/dist/stories/Forms/CreateAlbum/CreateAlbum.js +95 -0
  96. package/dist/stories/Forms/CreateAlbum/CreateAlbum.stories.js +47 -0
  97. package/dist/stories/Forms/CreateAnnouncementForm/CreateAnnouncementForm.js +84 -0
  98. package/dist/stories/Forms/CreateAnnouncementForm/CreateAnnouncementForm.stories.js +58 -0
  99. package/dist/stories/Forms/CreateMusicAlbum/CreateMusicAlbum.js +100 -0
  100. package/dist/stories/Forms/CreateMusicAlbum/CreateMusicAlbum.stories.js +47 -0
  101. package/dist/stories/Forms/CreateProfile/CreateProfile.js +383 -0
  102. package/dist/stories/Forms/CreateProfile/CreateProfile.stories.js +24 -0
  103. package/dist/stories/Forms/CreateProfile-3/CreateProfile.js +324 -0
  104. package/dist/stories/Forms/CreateProfile-3/CreateProfile.stories.js +24 -0
  105. package/dist/stories/Forms/CreateUser/CreateUser.js +27 -0
  106. package/dist/stories/Forms/CreateUser/CreateUser.stories.js +26 -0
  107. package/dist/stories/Forms/CreateVideoAlbum/CreateVideoAlbum.js +84 -0
  108. package/dist/stories/Forms/CreateVideoAlbum/CreateVideoAlbum.stories.js +37 -0
  109. package/dist/stories/Forms/Form/Form.js +35 -0
  110. package/dist/stories/Forms/Form/Form.stories.js +24 -0
  111. package/dist/stories/Forms/NewProfile/NewProfile.js +450 -0
  112. package/dist/stories/Forms/NewProfile/NewProfile.stories.js +24 -0
  113. package/dist/stories/Layout/Body/Body.js +30 -0
  114. package/dist/stories/Layout/Body/Body.stories.js +30 -0
  115. package/dist/stories/Layout/Center/Center.js +26 -0
  116. package/dist/stories/Layout/Center/Center.stories.js +24 -0
  117. package/dist/stories/Layout/Head/Head.js +24 -0
  118. package/dist/stories/Layout/Head/Head.stories.js +24 -0
  119. package/dist/stories/Layout/Left/Left.js +28 -0
  120. package/dist/stories/Layout/Left/Left.stories.js +24 -0
  121. package/dist/stories/Layout/Right/Right.js +27 -0
  122. package/dist/stories/Layout/Right/Right.stories.js +24 -0
  123. package/dist/stories/Library/CreateFolder/CreateFolder.js +87 -0
  124. package/dist/stories/Library/CreateFolder/CreateFolder.stories.js +45 -0
  125. package/dist/stories/Library/Folders/Folders.js +126 -0
  126. package/dist/stories/Library/Folders/Folders.stories.js +55 -0
  127. package/dist/stories/Library/Notes/Notes.js +135 -0
  128. package/dist/stories/Library/Notes/Notes.stories.js +42 -0
  129. package/dist/stories/Library/ViewNote/ViewNote.js +30 -0
  130. package/dist/stories/Library/ViewNote/ViewNote.stories.js +24 -0
  131. package/dist/stories/Misc/Thumbnail/Thumbnail.js +118 -0
  132. package/dist/stories/Music Album/ViewAlbum/ViewAlbum.js +131 -0
  133. package/dist/stories/Music Album/ViewAlbum/ViewAlbum.stories.js +115 -0
  134. package/dist/stories/Music Album/ViewAlbums/ViewAlbums.js +149 -0
  135. package/dist/stories/Music Album/ViewAlbums/ViewAlbums.stories.js +107 -0
  136. package/dist/stories/Navbar/Navbar.js +346 -0
  137. package/dist/stories/Navbar/Navbar.stories.js +41 -0
  138. package/dist/stories/Pages/Blank/Blank.js +36 -0
  139. package/dist/stories/Pages/Blank/Blank.stories.js +24 -0
  140. package/dist/stories/Pages/Centered/Centered.js +34 -0
  141. package/dist/stories/Pages/Centered/Centered.stories.js +24 -0
  142. package/dist/stories/Pages/Chat/Chat.js +86 -0
  143. package/dist/stories/Pages/Chat/Chat.stories.js +74 -0
  144. package/dist/stories/Pages/Enrollment/DetailedForm/DetailedForm.js +96 -0
  145. package/dist/stories/Pages/Enrollment/DetailedForm/DetailedForm.stories.js +22 -0
  146. package/dist/stories/Pages/Enrollment/FillForm/FillForm.js +102 -0
  147. package/dist/stories/Pages/Enrollment/FillForm/FillForm.stories.js +22 -0
  148. package/dist/stories/Pages/Enrollment/Forms/Forms.js +125 -0
  149. package/dist/stories/Pages/Enrollment/Forms/Forms.stories.js +22 -0
  150. package/dist/stories/Pages/Events/Event/Event.js +89 -0
  151. package/dist/stories/Pages/Events/Event/Event.stories.js +22 -0
  152. package/dist/stories/Pages/Events/Events/Events.js +125 -0
  153. package/dist/stories/Pages/Events/Events/Events.stories.js +22 -0
  154. package/dist/stories/Pages/Library/Folders/Library.js +136 -0
  155. package/dist/stories/Pages/Library/Folders/Library.stories.js +22 -0
  156. package/dist/stories/Pages/Library/Notes/Notes.js +123 -0
  157. package/dist/stories/Pages/Library/Notes/Notes.stories.js +22 -0
  158. package/dist/stories/Pages/Music/MusicAlbum/Music.js +211 -0
  159. package/dist/stories/Pages/Music/MusicAlbum/Music.stories.js +22 -0
  160. package/dist/stories/Pages/Music/MusicAlbums/MusicAlbums.js +155 -0
  161. package/dist/stories/Pages/Music/MusicAlbums/MusicAlbums.stories.js +22 -0
  162. package/dist/stories/Pages/Photos/Album/Album.js +164 -0
  163. package/dist/stories/Pages/Photos/Album/Album.stories.js +22 -0
  164. package/dist/stories/Pages/Photos/Albums/Albums.js +151 -0
  165. package/dist/stories/Pages/Photos/Albums/Albums.stories.js +22 -0
  166. package/dist/stories/Pages/Video/DetailedVideo/DetailedVideo.js +112 -0
  167. package/dist/stories/Pages/Video/DetailedVideo/DetailedVideo.stories.js +22 -0
  168. package/dist/stories/Pages/Video/VideoAlbum/Video.js +216 -0
  169. package/dist/stories/Pages/Video/VideoAlbum/Video.stories.js +22 -0
  170. package/dist/stories/Pages/ViewWorld/ViewWorld.js +244 -0
  171. package/dist/stories/Pages/ViewWorld/ViewWorld.stories.js +264 -0
  172. package/dist/stories/Pages/ViewWorld/constatnts.js +172 -0
  173. package/dist/stories/Photo Album/DetailedPhoto/DetailedPhoto.js +24 -0
  174. package/dist/stories/Photo Album/DetailedPhoto/DetailedPhoto.stories.js +32 -0
  175. package/dist/stories/Photo Album/ViewAlbum/ViewAlbum.js +236 -0
  176. package/dist/stories/Photo Album/ViewAlbum/ViewAlbum.stories.js +115 -0
  177. package/dist/stories/Photo Album/ViewAlbums/ViewAlbums.js +156 -0
  178. package/dist/stories/Photo Album/ViewAlbums/ViewAlbums.stories.js +102 -0
  179. package/dist/stories/Reusable Components/Cards/Card-style-1/CardStyle1.js +67 -0
  180. package/dist/stories/Reusable Components/Cards/Card-style-1/CardStyle1.stories.js +35 -0
  181. package/dist/stories/Reusable Components/Cards/Card-style-10/CardStyle10.js +81 -0
  182. package/dist/stories/Reusable Components/Cards/Card-style-10/CardStyle10.stories.js +37 -0
  183. package/dist/stories/Reusable Components/Cards/Card-style-11/CardStyle11.js +67 -0
  184. package/dist/stories/Reusable Components/Cards/Card-style-11/CardStyle11.stories.js +40 -0
  185. package/dist/stories/Reusable Components/Cards/Card-style-2/CardStyle2.js +67 -0
  186. package/dist/stories/Reusable Components/Cards/Card-style-2/CardStyle2.stories.js +37 -0
  187. package/dist/stories/Reusable Components/Cards/Card-style-3/CardStyle3.js +65 -0
  188. package/dist/stories/Reusable Components/Cards/Card-style-3/CardStyle3.stories.js +34 -0
  189. package/dist/stories/Reusable Components/Cards/Card-style-4/CardStyle4.js +66 -0
  190. package/dist/stories/Reusable Components/Cards/Card-style-4/CardStyle4.stories.js +39 -0
  191. package/dist/stories/Reusable Components/Cards/Card-style-6/CardStyle6.js +93 -0
  192. package/dist/stories/Reusable Components/Cards/Card-style-6/CardStyle6.stories.js +27 -0
  193. package/dist/stories/Reusable Components/Cards/Card-style-7/CardStyle7.js +88 -0
  194. package/dist/stories/Reusable Components/Cards/Card-style-7/CardStyle7.stories.js +37 -0
  195. package/dist/stories/Reusable Components/Cards/Card-style-8/CardStyle8.js +86 -0
  196. package/dist/stories/Reusable Components/Cards/Card-style-8/CardStyle8.stories.js +44 -0
  197. package/dist/stories/Reusable Components/Cards/Card-style-9/CardStyle9.js +67 -0
  198. package/dist/stories/Reusable Components/Cards/Card-style-9/CardStyle9.stories.js +27 -0
  199. package/dist/stories/Reusable Components/Cards/Card.js +102 -0
  200. package/dist/stories/Reusable Components/Cards/Card.stories.js +132 -0
  201. package/dist/stories/Reusable Components/Cards/globalCardStyles.js +70 -0
  202. package/dist/stories/Reusable Components/Controls/Controls.js +128 -0
  203. package/dist/stories/Reusable Components/Controls/Controls.stories.js +49 -0
  204. package/dist/stories/Reusable Components/Gallery/Gallery.js +120 -0
  205. package/dist/stories/Reusable Components/Gallery/Gallery.stories.js +56 -0
  206. package/dist/stories/Reusable Components/Lists/Cards/ListCard-1.js +1 -0
  207. package/dist/stories/Reusable Components/Lists/Cards/ListCard-1.stories.js +1 -0
  208. package/dist/stories/Reusable Components/Lists/List.js +1 -0
  209. package/dist/stories/Reusable Components/Lists/List.stories.js +1 -0
  210. package/dist/stories/Reusable Components/Mention/Mention.js +72 -0
  211. package/dist/stories/Reusable Components/Mention/Mention.stories.js +66 -0
  212. package/dist/stories/Reusable Components/ReactModal/ReactModal.js +83 -0
  213. package/dist/stories/Reusable Components/ReusableForm/ReusableForm.js +100 -0
  214. package/dist/stories/Reusable Components/ReusableForm/ReusableForm.stories.js +207 -0
  215. package/dist/stories/Reusable Components/ReusableHeader/ReusableHeader.js +64 -0
  216. package/dist/stories/Reusable Components/ReusableHeader/ReusableHeader.stories.js +35 -0
  217. package/dist/stories/Reusable Components/ReusableList/ReusableList.js +92 -0
  218. package/dist/stories/Reusable Components/ReusableList/ReusableList.stories.js +84 -0
  219. package/dist/stories/Reusable Components/SearchCard/SearchCard.js +81 -0
  220. package/dist/stories/Reusable Components/SearchCard/SearchCard.stories.js +24 -0
  221. package/dist/stories/Reusable Components/SpaceContainer/SpaceContainer.js +48 -0
  222. package/dist/stories/Reusable Components/SpaceContainer/SpaceContainer.stories.js +80 -0
  223. package/dist/stories/Reusable Components/Spinner/Spinner.js +28 -0
  224. package/dist/stories/Reusable Components/Spinner/Spinner.stories.js +22 -0
  225. package/dist/stories/Reusable Components/WidgetContainer/WidgetContainer.js +51 -0
  226. package/dist/stories/Reusable Components/WidgetContainer/WidgetContainer.stories.js +80 -0
  227. package/dist/stories/Reusable Components/commonStyles.js +54 -0
  228. package/dist/stories/Reusable Components/fakeData.js +112 -0
  229. package/dist/stories/Spaces/WelcomeSpace/WelcomeSpace.js +74 -0
  230. package/dist/stories/Spaces/WelcomeSpace/WelcomeSpace.stories.js +24 -0
  231. package/dist/stories/VideoAlbum/AlbumsGallery/AlbumsGallery.js +151 -0
  232. package/dist/stories/VideoAlbum/AlbumsGallery/AlbumsGallery.stories.js +101 -0
  233. package/dist/stories/VideoAlbum/Comments/Comments.js +58 -0
  234. package/dist/stories/VideoAlbum/Comments/Comments.stories.js +45 -0
  235. package/dist/stories/VideoAlbum/VideoPlayer/VideoPlayer.js +235 -0
  236. package/dist/stories/VideoAlbum/VideoPlayer/VideoPlayer.stories.js +149 -0
  237. package/dist/stories/VideoAlbum/VideoSpace/VideoSpace.js +110 -0
  238. package/dist/stories/VideoAlbum/VideoSpace/VideoSpace.stories.js +49 -0
  239. package/dist/stories/VideoAlbum/ViewAlbum/ViewAlbum.js +150 -0
  240. package/dist/stories/VideoAlbum/ViewAlbum/ViewAlbum.stories.js +113 -0
  241. package/dist/stories/Widgets/LogoWidget/LogoWidget.js +32 -0
  242. package/dist/stories/Widgets/LogoWidget/LogoWidget.stories.js +26 -0
  243. package/dist/stories/Widgets/MusicPlayer/MusicPlayer.js +49 -0
  244. package/dist/stories/Widgets/MusicPlayer/MusicPlayer.stories.js +44 -0
  245. package/dist/stories/Widgets/MusicPlayerWidget/MusicPlayerWidget.js +93 -0
  246. package/dist/stories/Widgets/MusicPlayerWidget/MusicPlayerWidget.stories.js +52 -0
  247. package/dist/stories/Widgets/SpacesList/SpacesList.js +28 -0
  248. package/dist/stories/Widgets/SpacesList/SpacesList.stories.js +52 -0
  249. package/dist/stories/Widgets/SpacesList/SpacesListItem.js +50 -0
  250. package/dist/stories/Widgets/SpacesList/SpacesListItem.stories.js +24 -0
  251. package/dist/stories/helpers/util.js +178 -0
  252. package/package.json +131 -0
  253. package/public/favicon.ico +0 -0
  254. package/public/index.html +43 -0
  255. package/public/logo192.png +0 -0
  256. package/public/logo512.png +0 -0
  257. package/public/manifest.json +25 -0
  258. package/public/robots.txt +3 -0
  259. package/src/assets/add-svgrepo-com.svg +36 -0
  260. package/src/assets/basket-svgrepo-com.svg +42 -0
  261. package/src/assets/bell-svgrepo-com.svg +44 -0
  262. package/src/assets/compass-svgrepo-com.svg +54 -0
  263. package/src/assets/home-svgrepo-com.svg +42 -0
  264. package/src/assets/medal-svgrepo-com.svg +53 -0
  265. package/src/assets/search-svgrepo-com.svg +42 -0
  266. package/src/assets/settings-svgrepo-com.svg +47 -0
  267. package/src/index.js +95 -0
  268. package/src/stories/API/API.jsx +47 -0
  269. package/src/stories/API/API.stories.js +10 -0
  270. package/src/stories/Agora/Call/Call.jsx +213 -0
  271. package/src/stories/Agora/Chat/Chat.jsx +130 -0
  272. package/src/stories/Agora/Chat/Chat.stories.jsx +10 -0
  273. package/src/stories/Agora/Chat/Components/ChatItem/ChatItem.jsx +38 -0
  274. package/src/stories/Agora/Chat/Components/ChatRoom/ChatRoom.jsx +167 -0
  275. package/src/stories/Agora/Controls/Controls.jsx +56 -0
  276. package/src/stories/Agora/Preview/PreviewCamera.jsx +259 -0
  277. package/src/stories/Agora/Preview/ShareScreen.jsx +58 -0
  278. package/src/stories/Agora/Room/Room.jsx +85 -0
  279. package/src/stories/Agora/Room/Room.stories.jsx +10 -0
  280. package/src/stories/Buttons/Buttons/Buttons.jsx +57 -0
  281. package/src/stories/Buttons/Buttons/Buttons.stories.jsx +24 -0
  282. package/src/stories/Buttons/ReactModal/ReactModal.jsx +81 -0
  283. package/src/stories/Buttons/ReactModal/ReactModal.stories.jsx +18 -0
  284. package/src/stories/Buttons/ReactModal/ReactModalDemo.jsx +12 -0
  285. package/src/stories/Chat/Chat.jsx +74 -0
  286. package/src/stories/Chat/Chat.stories.jsx +59 -0
  287. package/src/stories/Common Inputs/CheckboxGroup/CheckboxGroup.jsx +70 -0
  288. package/src/stories/Common Inputs/CheckboxGroup/CheckboxGroup.stories.jsx +32 -0
  289. package/src/stories/Common Inputs/CustomAutoComplete/CustomAutoComplete.jsx +98 -0
  290. package/src/stories/Common Inputs/CustomAutoComplete/CustomAutoComplete.stories.jsx +35 -0
  291. package/src/stories/Common Inputs/CustomDropzone/CustomDropZone.jsx +115 -0
  292. package/src/stories/Common Inputs/CustomDropzone/CustomDropzone.stories.jsx +26 -0
  293. package/src/stories/Common Inputs/CustomSelect/CustomSelect.jsx +89 -0
  294. package/src/stories/Common Inputs/CustomSelect/CustomSelect.stories.jsx +36 -0
  295. package/src/stories/Common Inputs/CustomTextarea/CustomTextarea.jsx +66 -0
  296. package/src/stories/Common Inputs/CustomTextarea/CustomTextarea.stories.jsx +31 -0
  297. package/src/stories/Common Inputs/DatePicker/DatePicker.jsx +105 -0
  298. package/src/stories/Common Inputs/DatePicker/DatePicker.stories.jsx +47 -0
  299. package/src/stories/Common Inputs/DatePicker/SingleDatePicker.jsx +91 -0
  300. package/src/stories/Common Inputs/DropZone.jsx +79 -0
  301. package/src/stories/Common Inputs/EditorComponent/EditorComponent.jsx +54 -0
  302. package/src/stories/Common Inputs/EditorComponent/EditorComponent.stories.jsx +60 -0
  303. package/src/stories/Common Inputs/EditorComponent/constants.js +26 -0
  304. package/src/stories/Common Inputs/Formik/InputField/InputField.jsx +24 -0
  305. package/src/stories/Common Inputs/Formik/InputField/InputField.stories.jsx +27 -0
  306. package/src/stories/Common Inputs/Formik/RadioField/RadioField.jsx +55 -0
  307. package/src/stories/Common Inputs/Formik/RadioField/RadioField.stories.jsx +41 -0
  308. package/src/stories/Common Inputs/RadioInput/RadioInput.jsx +108 -0
  309. package/src/stories/Common Inputs/RadioInput/RadioInput.stories.js +30 -0
  310. package/src/stories/Common Inputs/RichTextInput/Components/Emoji/Emoji.jsx +16 -0
  311. package/src/stories/Common Inputs/RichTextInput/Components/Gif/Gif.jsx +64 -0
  312. package/src/stories/Common Inputs/RichTextInput/RichTextInput.jsx +331 -0
  313. package/src/stories/Common Inputs/RichTextInput/RichTextInput.stories.js +45 -0
  314. package/src/stories/Common Inputs/TextField/TextField.jsx +66 -0
  315. package/src/stories/Common Inputs/TextField/TextField.stories.jsx +31 -0
  316. package/src/stories/Containers/BaseMaterial.jsx +58 -0
  317. package/src/stories/Containers/BaseMaterial.stories.js +10 -0
  318. package/src/stories/Containers/WidgetExample/WidgetBody.jsx +9 -0
  319. package/src/stories/Containers/WidgetExample/WidgetBody.stories.js +10 -0
  320. package/src/stories/Containers/WidgetExample/WidgetExample.jsx +19 -0
  321. package/src/stories/Containers/WidgetExample/WidgetExample.stories.js +10 -0
  322. package/src/stories/Containers/WidgetExample/WidgetHead.jsx +9 -0
  323. package/src/stories/Containers/WidgetExample/WidgetHead.stories.js +10 -0
  324. package/src/stories/Enrollment/Admin/CreateForm/CreateForm.jsx +62 -0
  325. package/src/stories/Enrollment/Admin/CreateForm/CreateForm.stories.jsx +8 -0
  326. package/src/stories/Enrollment/Admin/DetailedForm/DetailedForm.jsx +98 -0
  327. package/src/stories/Enrollment/Admin/DetailedForm/DetailedForm.stories.jsx +36 -0
  328. package/src/stories/Enrollment/Admin/ViewForms/ViewForms.jsx +40 -0
  329. package/src/stories/Enrollment/Admin/ViewForms/ViewForms.stories.jsx +66 -0
  330. package/src/stories/Enrollment/Guest/FillForm/FillForm.jsx +61 -0
  331. package/src/stories/Enrollment/Guest/FillForm/FillForm.stories.jsx +27 -0
  332. package/src/stories/Events/CreateEvent/CreateEvent.jsx +96 -0
  333. package/src/stories/Events/CreateEvent/CreateEvent.stories.jsx +19 -0
  334. package/src/stories/Events/Event/Event.jsx +113 -0
  335. package/src/stories/Events/Event/Event.stories.jsx +21 -0
  336. package/src/stories/Events/EventsList/EventsList.jsx +117 -0
  337. package/src/stories/Events/EventsList/EventsList.stories.jsx +25 -0
  338. package/src/stories/Forms/AddPhoto/AddPhoto.jsx +85 -0
  339. package/src/stories/Forms/AddPhoto/AddPhoto.stories.jsx +37 -0
  340. package/src/stories/Forms/AddSong/AddSong.jsx +86 -0
  341. package/src/stories/Forms/AddSong/AddSong.stories.jsx +26 -0
  342. package/src/stories/Forms/AddVideo/AddVideo.jsx +78 -0
  343. package/src/stories/Forms/AddVideo/AddVideo.stories.jsx +20 -0
  344. package/src/stories/Forms/Create-Profile/CreateProfile.jsx +278 -0
  345. package/src/stories/Forms/Create-Profile/CreateProfile.stories.jsx +36 -0
  346. package/src/stories/Forms/Create-Profile/subcomponents/LogoUploader.jsx +63 -0
  347. package/src/stories/Forms/Create-Profile/subcomponents/LogoUploader.stories.jsx +27 -0
  348. package/src/stories/Forms/Create-Profile/subcomponents/ProfilePhoto.jsx +58 -0
  349. package/src/stories/Forms/Create-Profile/subcomponents/ProfilePhoto.stories.jsx +26 -0
  350. package/src/stories/Forms/Create-Profile/subcomponents/ResetBtn.jsx +21 -0
  351. package/src/stories/Forms/Create-Profile/subcomponents/ResetBtn.stories.jsx +18 -0
  352. package/src/stories/Forms/CreateAlbum/CreateAlbum.jsx +82 -0
  353. package/src/stories/Forms/CreateAlbum/CreateAlbum.stories.jsx +37 -0
  354. package/src/stories/Forms/CreateAnnouncementForm/CreateAnnouncementForm.jsx +63 -0
  355. package/src/stories/Forms/CreateAnnouncementForm/CreateAnnouncementForm.stories.jsx +44 -0
  356. package/src/stories/Forms/CreateMusicAlbum/CreateMusicAlbum.jsx +87 -0
  357. package/src/stories/Forms/CreateMusicAlbum/CreateMusicAlbum.stories.jsx +38 -0
  358. package/src/stories/Forms/CreateProfile/CreateProfile.jsx +556 -0
  359. package/src/stories/Forms/CreateProfile/CreateProfile.stories.js +10 -0
  360. package/src/stories/Forms/CreateProfile-3/CreateProfile.jsx +488 -0
  361. package/src/stories/Forms/CreateProfile-3/CreateProfile.stories.js +10 -0
  362. package/src/stories/Forms/CreateUser/CreateUser.jsx +13 -0
  363. package/src/stories/Forms/CreateUser/CreateUser.stories.js +10 -0
  364. package/src/stories/Forms/CreateVideoAlbum/CreateVideoAlbum.jsx +78 -0
  365. package/src/stories/Forms/CreateVideoAlbum/CreateVideoAlbum.stories.jsx +23 -0
  366. package/src/stories/Forms/Form/Form.jsx +34 -0
  367. package/src/stories/Forms/Form/Form.stories.js +10 -0
  368. package/src/stories/Forms/NewProfile/NewProfile.jsx +464 -0
  369. package/src/stories/Forms/NewProfile/NewProfile.stories.jsx +10 -0
  370. package/src/stories/Forms/NewProfile/presets.json +9 -0
  371. package/src/stories/Layout/Body/Body.jsx +24 -0
  372. package/src/stories/Layout/Body/Body.stories.js +26 -0
  373. package/src/stories/Layout/Center/Center.jsx +16 -0
  374. package/src/stories/Layout/Center/Center.stories.js +14 -0
  375. package/src/stories/Layout/Head/Head.jsx +15 -0
  376. package/src/stories/Layout/Head/Head.stories.js +10 -0
  377. package/src/stories/Layout/Left/Left.jsx +21 -0
  378. package/src/stories/Layout/Left/Left.stories.js +14 -0
  379. package/src/stories/Layout/Right/Right.jsx +17 -0
  380. package/src/stories/Layout/Right/Right.stories.js +14 -0
  381. package/src/stories/Library/CreateFolder/CreateFolder.jsx +78 -0
  382. package/src/stories/Library/CreateFolder/CreateFolder.stories.jsx +32 -0
  383. package/src/stories/Library/Folders/Folders.jsx +117 -0
  384. package/src/stories/Library/Folders/Folders.stories.jsx +34 -0
  385. package/src/stories/Library/Notes/Notes.jsx +117 -0
  386. package/src/stories/Library/Notes/Notes.stories.jsx +24 -0
  387. package/src/stories/Library/ViewNote/ViewNote.jsx +25 -0
  388. package/src/stories/Library/ViewNote/ViewNote.stories.jsx +16 -0
  389. package/src/stories/Misc/Thumbnail/Thumbnail.jsx +79 -0
  390. package/src/stories/Music Album/ViewAlbum/ViewAlbum.jsx +111 -0
  391. package/src/stories/Music Album/ViewAlbum/ViewAlbum.stories.jsx +60 -0
  392. package/src/stories/Music Album/ViewAlbums/ViewAlbums.jsx +134 -0
  393. package/src/stories/Music Album/ViewAlbums/ViewAlbums.stories.jsx +57 -0
  394. package/src/stories/Navbar/Navbar.jsx +350 -0
  395. package/src/stories/Navbar/Navbar.stories.js +25 -0
  396. package/src/stories/Pages/Blank/Blank.jsx +32 -0
  397. package/src/stories/Pages/Blank/Blank.stories.js +10 -0
  398. package/src/stories/Pages/Centered/Centered.jsx +31 -0
  399. package/src/stories/Pages/Centered/Centered.stories.js +14 -0
  400. package/src/stories/Pages/Chat/Chat.jsx +82 -0
  401. package/src/stories/Pages/Chat/Chat.stories.jsx +53 -0
  402. package/src/stories/Pages/Enrollment/DetailedForm/DetailedForm.jsx +102 -0
  403. package/src/stories/Pages/Enrollment/DetailedForm/DetailedForm.stories.jsx +8 -0
  404. package/src/stories/Pages/Enrollment/FillForm/FillForm.jsx +96 -0
  405. package/src/stories/Pages/Enrollment/FillForm/FillForm.stories.jsx +8 -0
  406. package/src/stories/Pages/Enrollment/Forms/Forms.jsx +129 -0
  407. package/src/stories/Pages/Enrollment/Forms/Forms.stories.jsx +8 -0
  408. package/src/stories/Pages/Events/Event/Event.jsx +88 -0
  409. package/src/stories/Pages/Events/Event/Event.stories.jsx +8 -0
  410. package/src/stories/Pages/Events/Events/Events.jsx +110 -0
  411. package/src/stories/Pages/Events/Events/Events.stories.jsx +8 -0
  412. package/src/stories/Pages/Library/Folders/Library.jsx +118 -0
  413. package/src/stories/Pages/Library/Folders/Library.stories.jsx +8 -0
  414. package/src/stories/Pages/Library/Notes/Notes.jsx +109 -0
  415. package/src/stories/Pages/Library/Notes/Notes.stories.jsx +8 -0
  416. package/src/stories/Pages/Music/MusicAlbum/Music.jsx +159 -0
  417. package/src/stories/Pages/Music/MusicAlbum/Music.stories.jsx +8 -0
  418. package/src/stories/Pages/Music/MusicAlbums/MusicAlbums.jsx +138 -0
  419. package/src/stories/Pages/Music/MusicAlbums/MusicAlbums.stories.jsx +8 -0
  420. package/src/stories/Pages/Photos/Album/Album.jsx +120 -0
  421. package/src/stories/Pages/Photos/Album/Album.stories.jsx +8 -0
  422. package/src/stories/Pages/Photos/Albums/Albums.jsx +144 -0
  423. package/src/stories/Pages/Photos/Albums/Albums.stories.jsx +8 -0
  424. package/src/stories/Pages/Video/DetailedVideo/DetailedVideo.jsx +91 -0
  425. package/src/stories/Pages/Video/DetailedVideo/DetailedVideo.stories.jsx +8 -0
  426. package/src/stories/Pages/Video/VideoAlbum/Video.jsx +166 -0
  427. package/src/stories/Pages/Video/VideoAlbum/Video.stories.jsx +8 -0
  428. package/src/stories/Pages/ViewWorld/ViewWorld.jsx +193 -0
  429. package/src/stories/Pages/ViewWorld/ViewWorld.stories.js +270 -0
  430. package/src/stories/Pages/ViewWorld/constatnts.js +158 -0
  431. package/src/stories/Pages/ViewWorld/styles.json +18 -0
  432. package/src/stories/Photo Album/DetailedPhoto/DetailedPhoto.jsx +17 -0
  433. package/src/stories/Photo Album/DetailedPhoto/DetailedPhoto.stories.jsx +20 -0
  434. package/src/stories/Photo Album/ViewAlbum/ViewAlbum.jsx +250 -0
  435. package/src/stories/Photo Album/ViewAlbum/ViewAlbum.stories.jsx +60 -0
  436. package/src/stories/Photo Album/ViewAlbums/ViewAlbums.jsx +146 -0
  437. package/src/stories/Photo Album/ViewAlbums/ViewAlbums.stories.jsx +59 -0
  438. package/src/stories/Reusable Components/Cards/Card-style-1/CardStyle1.jsx +74 -0
  439. package/src/stories/Reusable Components/Cards/Card-style-1/CardStyle1.stories.jsx +22 -0
  440. package/src/stories/Reusable Components/Cards/Card-style-10/CardStyle10.jsx +94 -0
  441. package/src/stories/Reusable Components/Cards/Card-style-10/CardStyle10.stories.jsx +21 -0
  442. package/src/stories/Reusable Components/Cards/Card-style-11/CardStyle11.jsx +79 -0
  443. package/src/stories/Reusable Components/Cards/Card-style-11/CardStyle11.stories.jsx +21 -0
  444. package/src/stories/Reusable Components/Cards/Card-style-2/CardStyle2.jsx +75 -0
  445. package/src/stories/Reusable Components/Cards/Card-style-2/CardStyle2.stories.jsx +24 -0
  446. package/src/stories/Reusable Components/Cards/Card-style-3/CardStyle3.jsx +61 -0
  447. package/src/stories/Reusable Components/Cards/Card-style-3/CardStyle3.stories.jsx +22 -0
  448. package/src/stories/Reusable Components/Cards/Card-style-4/CardStyle4.jsx +67 -0
  449. package/src/stories/Reusable Components/Cards/Card-style-4/CardStyle4.stories.jsx +25 -0
  450. package/src/stories/Reusable Components/Cards/Card-style-6/CardStyle6.jsx +117 -0
  451. package/src/stories/Reusable Components/Cards/Card-style-6/CardStyle6.stories.jsx +9 -0
  452. package/src/stories/Reusable Components/Cards/Card-style-7/CardStyle7.jsx +126 -0
  453. package/src/stories/Reusable Components/Cards/Card-style-7/CardStyle7.stories.jsx +23 -0
  454. package/src/stories/Reusable Components/Cards/Card-style-8/CardStyle8.jsx +113 -0
  455. package/src/stories/Reusable Components/Cards/Card-style-8/CardStyle8.stories.jsx +29 -0
  456. package/src/stories/Reusable Components/Cards/Card-style-9/CardStyle9.jsx +86 -0
  457. package/src/stories/Reusable Components/Cards/Card-style-9/CardStyle9.stories.jsx +14 -0
  458. package/src/stories/Reusable Components/Cards/Card.jsx +119 -0
  459. package/src/stories/Reusable Components/Cards/Card.stories.jsx +118 -0
  460. package/src/stories/Reusable Components/Cards/globalCardStyles.js +54 -0
  461. package/src/stories/Reusable Components/Controls/Controls.jsx +137 -0
  462. package/src/stories/Reusable Components/Controls/Controls.stories.jsx +24 -0
  463. package/src/stories/Reusable Components/Gallery/Gallery.jsx +110 -0
  464. package/src/stories/Reusable Components/Gallery/Gallery.stories.jsx +43 -0
  465. package/src/stories/Reusable Components/Lists/Cards/ListCard-1.jsx +0 -0
  466. package/src/stories/Reusable Components/Lists/Cards/ListCard-1.stories.js +0 -0
  467. package/src/stories/Reusable Components/Lists/List.jsx +0 -0
  468. package/src/stories/Reusable Components/Lists/List.stories.js +0 -0
  469. package/src/stories/Reusable Components/Mention/Mention.jsx +69 -0
  470. package/src/stories/Reusable Components/Mention/Mention.stories.jsx +55 -0
  471. package/src/stories/Reusable Components/ReactModal/ReactModal.jsx +76 -0
  472. package/src/stories/Reusable Components/ReusableForm/ReusableForm.jsx +121 -0
  473. package/src/stories/Reusable Components/ReusableForm/ReusableForm.stories.jsx +167 -0
  474. package/src/stories/Reusable Components/ReusableHeader/ReusableHeader.jsx +76 -0
  475. package/src/stories/Reusable Components/ReusableHeader/ReusableHeader.stories.jsx +22 -0
  476. package/src/stories/Reusable Components/ReusableList/ReusableList.jsx +103 -0
  477. package/src/stories/Reusable Components/ReusableList/ReusableList.stories.jsx +70 -0
  478. package/src/stories/Reusable Components/SearchCard/SearchCard.jsx +89 -0
  479. package/src/stories/Reusable Components/SearchCard/SearchCard.stories.js +10 -0
  480. package/src/stories/Reusable Components/SpaceContainer/SpaceContainer.jsx +48 -0
  481. package/src/stories/Reusable Components/SpaceContainer/SpaceContainer.stories.jsx +78 -0
  482. package/src/stories/Reusable Components/Spinner/Spinner.jsx +82 -0
  483. package/src/stories/Reusable Components/Spinner/Spinner.stories.jsx +8 -0
  484. package/src/stories/Reusable Components/WidgetContainer/WidgetContainer.jsx +59 -0
  485. package/src/stories/Reusable Components/WidgetContainer/WidgetContainer.stories.jsx +61 -0
  486. package/src/stories/Reusable Components/commonStyles.js +47 -0
  487. package/src/stories/Reusable Components/fakeData.js +95 -0
  488. package/src/stories/Spaces/WelcomeSpace/WelcomeSpace.jsx +102 -0
  489. package/src/stories/Spaces/WelcomeSpace/WelcomeSpace.stories.js +10 -0
  490. package/src/stories/VideoAlbum/AlbumsGallery/AlbumsGallery.jsx +130 -0
  491. package/src/stories/VideoAlbum/AlbumsGallery/AlbumsGallery.stories.jsx +59 -0
  492. package/src/stories/VideoAlbum/Comments/Comments.jsx +58 -0
  493. package/src/stories/VideoAlbum/Comments/Comments.stories.jsx +18 -0
  494. package/src/stories/VideoAlbum/VideoPlayer/VideoPlayer.jsx +214 -0
  495. package/src/stories/VideoAlbum/VideoPlayer/VideoPlayer.stories.jsx +82 -0
  496. package/src/stories/VideoAlbum/VideoSpace/VideoSpace.jsx +101 -0
  497. package/src/stories/VideoAlbum/VideoSpace/VideoSpace.stories.jsx +23 -0
  498. package/src/stories/VideoAlbum/ViewAlbum/ViewAlbum.jsx +131 -0
  499. package/src/stories/VideoAlbum/ViewAlbum/ViewAlbum.stories.jsx +57 -0
  500. package/src/stories/Widgets/LogoWidget/LogoWidget.jsx +21 -0
  501. package/src/stories/Widgets/LogoWidget/LogoWidget.stories.js +12 -0
  502. package/src/stories/Widgets/MusicPlayer/MusicPlayer.jsx +64 -0
  503. package/src/stories/Widgets/MusicPlayer/MusicPlayer.stories.jsx +23 -0
  504. package/src/stories/Widgets/MusicPlayerWidget/MusicPlayerWidget.jsx +107 -0
  505. package/src/stories/Widgets/MusicPlayerWidget/MusicPlayerWidget.stories.jsx +33 -0
  506. package/src/stories/Widgets/SpacesList/SpacesList.jsx +16 -0
  507. package/src/stories/Widgets/SpacesList/SpacesList.stories.jsx +27 -0
  508. package/src/stories/Widgets/SpacesList/SpacesListItem.jsx +75 -0
  509. package/src/stories/Widgets/SpacesList/SpacesListItem.stories.jsx +10 -0
  510. package/src/stories/assets/camera.svg +1 -0
  511. package/src/stories/assets/code-brackets.svg +1 -0
  512. package/src/stories/assets/colors.svg +1 -0
  513. package/src/stories/assets/comments.svg +1 -0
  514. package/src/stories/assets/direction.svg +1 -0
  515. package/src/stories/assets/flow.svg +1 -0
  516. package/src/stories/assets/images/album1.jpg +0 -0
  517. package/src/stories/assets/images/album2.jpg +0 -0
  518. package/src/stories/assets/images/album3.jpg +0 -0
  519. package/src/stories/assets/images/album4.jpg +0 -0
  520. package/src/stories/assets/images/album5.jpg +0 -0
  521. package/src/stories/assets/images/album6.jpg +0 -0
  522. package/src/stories/assets/images/art.jpg +0 -0
  523. package/src/stories/assets/images/dance.jpg +0 -0
  524. package/src/stories/assets/images/football.jpg +0 -0
  525. package/src/stories/assets/images/music.jpg +0 -0
  526. package/src/stories/assets/images/music1.jpg +0 -0
  527. package/src/stories/assets/images/music2.jpg +0 -0
  528. package/src/stories/assets/images/music3.jpg +0 -0
  529. package/src/stories/assets/images/music4.jpg +0 -0
  530. package/src/stories/assets/images/music5.jpg +0 -0
  531. package/src/stories/assets/images/music6.jpg +0 -0
  532. package/src/stories/assets/images/reset.png +0 -0
  533. package/src/stories/assets/images/robotics.jpg +0 -0
  534. package/src/stories/assets/images/tennis.jpg +0 -0
  535. package/src/stories/assets/plugin.svg +1 -0
  536. package/src/stories/assets/repo.svg +1 -0
  537. package/src/stories/assets/reset.svg +1 -0
  538. package/src/stories/assets/stackalt.svg +1 -0
  539. package/src/stories/helpers/util.js +66 -0
@@ -0,0 +1,113 @@
1
+ import React, { useState } from 'react';
2
+
3
+ import styled from 'styled-components';
4
+ import PropTypes from "prop-types";
5
+ import Controls from '../../Controls/Controls';
6
+
7
+ import {
8
+ MainCard,
9
+ globalContent,
10
+ Title, Description,
11
+ Img
12
+ } from '../globalCardStyles';
13
+
14
+ const CardStyle8 = ({ username, date, text, img, media, ...props }) => {
15
+ const [showIcons, setShowIcons] = useState(false)
16
+
17
+ const iconCliked = (action) => {
18
+ console.log(action);
19
+ }
20
+
21
+ return (
22
+ <Card
23
+ onMouseEnter={e => setShowIcons(true)}
24
+ onMouseLeave={e => setShowIcons(false)}
25
+ {...props}>
26
+ <ImgWrapper {...props}>
27
+ <Img src={img} />
28
+ </ImgWrapper>
29
+ <Content {...props}>
30
+ <Header>
31
+ <Title {...props}>{username}</Title>
32
+ <Date>{date}</Date>
33
+ </Header>
34
+ <Description {...props}>{text}</Description>
35
+ {media && <Media>
36
+ {media}
37
+ </Media>}
38
+ </Content>
39
+ {props.cardControls
40
+ &&
41
+ <Controls
42
+ controls={props.cardControls}
43
+ show={showIcons}
44
+ onIconClicked={iconCliked}
45
+ {...props.controlsStyles} />}
46
+ </Card>
47
+ )
48
+ }
49
+
50
+ const Card = styled(MainCard)`
51
+ column-gap: 30px;
52
+ align-items: flex-start;
53
+ `
54
+ const ImgWrapper = styled.div`
55
+ min-width: ${props => props.imgSize || 60}px;
56
+ min-height: ${props => props.imgSize || 60}px;
57
+ width: 60px;
58
+ height: 60px;
59
+ border-radius: 100%;
60
+ `
61
+
62
+ const Content = styled(globalContent)`
63
+ height: 100%;
64
+ justify-content: space-between;
65
+ gap: 10px;
66
+ `
67
+
68
+ const Header = styled.div`
69
+ display: flex;
70
+ align-items: center;
71
+ gap: 20px;
72
+ `
73
+
74
+ const Date = styled.p`
75
+ font-size: 14px;
76
+ color: gray;
77
+ `
78
+
79
+ const Media = styled.div`
80
+ max-width: 300px;
81
+
82
+ *{
83
+ width: 100%;
84
+ }
85
+ `
86
+
87
+
88
+ CardStyle8.defaultProps = {
89
+ cardTitleFontSize: 15,
90
+ cardPadding: 5
91
+ }
92
+
93
+ CardStyle8.propTypes = {
94
+ username: PropTypes.string,
95
+ text: PropTypes.string,
96
+ img: PropTypes.string,
97
+ date: PropTypes.string,
98
+ cardBackgroundColor: PropTypes.string,
99
+ onHoverBackgroundColor: PropTypes.string,
100
+ cardRadius: PropTypes.number,
101
+ cardTitleFontSize: PropTypes.number,
102
+ cardTitleFontWeight: PropTypes.number,
103
+ cardTitleColor: PropTypes.string,
104
+ cardImageRadius: PropTypes.string,
105
+ cardDescriptionFontSize: PropTypes.number,
106
+ cardDescriptionColor: PropTypes.string,
107
+ cardPadding: PropTypes.number,
108
+ imgSize: PropTypes.number,
109
+ cardBorderSize: PropTypes.number,
110
+ cardBorderColor: PropTypes.string
111
+ };
112
+
113
+ export default CardStyle8
@@ -0,0 +1,29 @@
1
+ import CardStyle8 from './CardStyle8';
2
+
3
+ import { controls } from '../../fakeData'
4
+
5
+ export default {
6
+ title: 'Reusable Components/Cards/Card style 8',
7
+ component: CardStyle8
8
+ }
9
+
10
+ export const Card = args => (
11
+ <CardStyle8
12
+ img='https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png'
13
+ username="Card Style 8"
14
+ date="15/12/2021"
15
+ text="Card style 8 description test Card style 8 description test Card style 8 description test Card style 8 description test Card style 8 description test Card style 8 description test Card style 8 description test Card style 8 description test Card style 8 description test Card style 8 description test Card style 8 description test Card style 8 description test Card style 8 description test Card style 8 description test "
16
+ cardControls={controls}
17
+ media={(<img src="https://arabhardware.net/wp-content/uploads/2020/03/valorant-2020-4k-0f-scaled.jpg"/>)}
18
+ controlsStyles={{
19
+ iconColor: 'black',
20
+ showOnHover: true,
21
+ position: 'absolute',
22
+ iconBackground: '#414141',
23
+ iconSize: 18,
24
+ iconColor: 'white',
25
+ dropdownBackground: '#414141',
26
+ dropdownFontColor: 'white'
27
+ }}
28
+ {...args}
29
+ />)
@@ -0,0 +1,86 @@
1
+ import React, { useState } from 'react';
2
+
3
+ import styled from 'styled-components';
4
+ import PropTypes from "prop-types";
5
+
6
+ import {
7
+ MainCard,
8
+ globalContent,
9
+ Title,
10
+ Img
11
+ } from '../globalCardStyles';
12
+
13
+ const CardStyle9 = ({ username, answered, img, status, ...props }) => {
14
+ console.log(props)
15
+
16
+ const onAccept = () => {
17
+ alert(props.index)
18
+ }
19
+
20
+ return (
21
+ <Card {...props}>
22
+ <ImgWrapper {...props}>
23
+ <Img src={img} />
24
+ </ImgWrapper>
25
+ <Content {...props}>
26
+ <Title {...props}>{username}</Title>
27
+ <Answered>Questions Answered: {answered}</Answered>
28
+ <Buttons>
29
+ <Accept onClick={onAccept}>Accept</Accept>
30
+ <Decline >Decline</Decline>
31
+ {status === 'pending' && <Review>In Review</Review>}
32
+ </Buttons>
33
+ </Content>
34
+ </Card>
35
+ )
36
+ }
37
+
38
+ const Card = styled(MainCard)`
39
+ align-items: center;
40
+ gap: 20px;
41
+ padding: 10px;
42
+ `
43
+ const ImgWrapper = styled.div`
44
+ min-width: ${props => props.imgSize || 60}px;
45
+ min-height: ${props => props.imgSize || 60}px;
46
+ width: 60px;
47
+ height: 60px;
48
+ border-radius: 100%;
49
+ `
50
+
51
+ const Content = styled(globalContent)`
52
+ height: 100%;
53
+ flex-direction: row;
54
+ align-items: center;
55
+ justify-content: space-between;
56
+ `
57
+
58
+ const Answered = styled.h5`
59
+ font-weight: 300;
60
+ `
61
+
62
+ const Buttons = styled.div`
63
+ display: flex;
64
+ gap: 10px;
65
+ `
66
+
67
+ const Button = styled.button`
68
+ padding: 7px 20px;
69
+ border: none;
70
+ color: white;
71
+ cursor: pointer;
72
+ `
73
+
74
+ const Accept = styled(Button)`
75
+ background-color: #69d869;
76
+ `
77
+
78
+ const Decline = styled(Button)`
79
+ background-color: #e24848;
80
+ `
81
+
82
+ const Review = styled(Button)`
83
+ background-color: #18b8e9;
84
+ `
85
+
86
+ export default CardStyle9;
@@ -0,0 +1,14 @@
1
+ import CardStyle9 from "./CardStyle9";
2
+
3
+ export default {
4
+ title: 'Reusable Components/Cards/Card style 9',
5
+ component: CardStyle9
6
+ }
7
+
8
+ export const Card = args =>
9
+ <CardStyle9
10
+ img='https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png'
11
+ username="User Name"
12
+ answered={'3/4'}
13
+ status="pending"
14
+ {...args} />
@@ -0,0 +1,119 @@
1
+ import React, { useState } from 'react';
2
+
3
+ import styled from 'styled-components';
4
+ import PropTypes from "prop-types";
5
+ import Controls from '../Controls/Controls';
6
+
7
+ const Card = ({ title, description, ...props }) => {
8
+ const [showIcons, setShowIcons] = useState(false)
9
+ console.log(props)
10
+ return (
11
+ <MainCard
12
+ onMouseEnter={e => setShowIcons(true)}
13
+ onMouseLeave={e => setShowIcons(false)}
14
+ {...props}>
15
+ {
16
+ props.img &&
17
+ <ImgWrapper {...props}>
18
+ <Img src={props.img} />
19
+ </ImgWrapper>
20
+ }
21
+ <Content {...props}>
22
+ <Title {...props}>{title}</Title>
23
+ <Discription {...props}>{description}</Discription>
24
+ </Content>
25
+ {props.cardControls
26
+ &&
27
+ <Controls
28
+ controls={props.cardControls}
29
+ show={showIcons}
30
+ {...props.controlsStyles} />}
31
+ </MainCard>
32
+ )
33
+ }
34
+
35
+ const MainCard = styled.div`
36
+ * {
37
+ margin: 0;
38
+ padding: 0;
39
+ }
40
+ font-family: sans-serif;
41
+ display: flex;
42
+ background-color: ${props => props.cardBackgroundColor || 'white'};
43
+ border-radius: ${props => props.cardRadius}px;
44
+ border: ${props => props.cardBorderSize + 'px solid ' + props.cardBorderColor};
45
+ flex-direction: ${props => props.cardDirection};
46
+ align-items: center;
47
+ column-gap: 30px;
48
+ padding: ${props => props.cardPadding + 'px' || 0} !important;
49
+ /* position: relative; */
50
+ &:hover {
51
+ box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
52
+ -webkit-filter: ${props => props.darkOnHover ? 'brightness(60%)' : 'brightness(100%)'};
53
+ transition: all .2s ease;
54
+ background-color: ${props => props.onHoverBackgroundColor};
55
+ }
56
+
57
+ `
58
+
59
+ const ImgWrapper = styled.div`
60
+ width: ${props => props.imgSize || 100}px;
61
+ height: ${props => props.imgSize || 100}px;
62
+ border-radius: ${props => props.cardImageRadius + 'px' || '100%'};
63
+ `
64
+ const Img = styled.img`
65
+ width: 100%;
66
+ height: 100%;
67
+ object-position: center;
68
+ object-fit: cover;
69
+ border-radius: inherit;
70
+ `
71
+
72
+ const Content = styled.div`
73
+ display: flex;
74
+ flex-direction: column;
75
+ align-items: ${props => props.cardDirection === 'column' ? 'center' : 'flex-start'};
76
+ justify-content: space-space-between;
77
+
78
+ `
79
+
80
+ const Title = styled.h3`
81
+ text-transform: capitalize;
82
+ color: ${props => props.cardTitleColor || 'black'};
83
+ font-size: ${props => props.cardTitleFontSize}px;
84
+ font-weight: ${props => props.cardTitleFontWeight || 300};
85
+ `
86
+
87
+ const Discription = styled.h5`
88
+ color: ${props => props.cardDescriptionColor || 'black'};
89
+ font-size: ${props => props.cardDescriptionFontSize}px;
90
+ text-align: center;
91
+ font-weight: 500;
92
+ `
93
+
94
+
95
+ Card.defaultProps = {}
96
+
97
+ Card.propTypes = {
98
+ title: PropTypes.string,
99
+ description: PropTypes.string,
100
+ img: PropTypes.string,
101
+ cardBackgroundColor: PropTypes.string,
102
+ onHoverBackgroundColor: PropTypes.string,
103
+ cardRadius: PropTypes.number,
104
+ cardTitleFontSize: PropTypes.number,
105
+ cardTitleFontWeight: PropTypes.number,
106
+ cardTitleColor: PropTypes.string,
107
+ cardImageRadius: PropTypes.string,
108
+ cardDescriptionFontSize: PropTypes.number,
109
+ cardDescriptionColor: PropTypes.string,
110
+ cardDirection: PropTypes.string,
111
+ cardPadding: PropTypes.number,
112
+ imgSize: PropTypes.number,
113
+ cardBorderSize: PropTypes.number,
114
+ cardBorderColor: PropTypes.string
115
+ };
116
+
117
+ export default Card
118
+
119
+
@@ -0,0 +1,118 @@
1
+ import React from 'react';
2
+ import Card from './Card';
3
+
4
+ export default {
5
+ title: 'Reusable Components/Cards/Regular Card',
6
+ component: Card,
7
+ };
8
+
9
+ const Template = (args) => <Card {...args} />;
10
+
11
+ export const CardWithImage = Template.bind({});
12
+ CardWithImage.args = {
13
+ title: 'Card with image',
14
+ description: 'Lorem ipsum dolor sit amet consectetur.',
15
+ img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png',
16
+ cardBackgroundColor: '#f1d6d6',
17
+ cardRadius: '20',
18
+ cardTitleFontSize: '',
19
+ cardTitleColor: '',
20
+ cardImageRadius: '100',
21
+ cardDescriptionFontSize: '',
22
+ cardDescriptionColor: '',
23
+ cardDirection: '',
24
+ cardPadding: '10',
25
+ imgSize: '90',
26
+ cardBorderSize: '',
27
+ cardBorderColor: '',
28
+ controlsStyles: {
29
+ showOnHover: true,
30
+ iconBackground: "#272727",
31
+ dropdownBackground: "#272727",
32
+ dropdownFontColor: "white",
33
+ dropdownItemHoverColor: "#414141",
34
+ iconBackgroundHover: "#414141"
35
+ }
36
+ };
37
+
38
+ export const CardWithImageColumn = Template.bind({});
39
+ CardWithImageColumn.args = {
40
+ title: 'Card with image column',
41
+ description: 'Lorem ipsum dolor sit amet consectetur.',
42
+ img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png',
43
+ cardBackgroundColor: '#f1d6d6',
44
+ cardRadius: '20',
45
+ cardTitleFontSize: '',
46
+ cardTitleColor: '',
47
+ cardImageRadius: '100',
48
+ cardDescriptionFontSize: '',
49
+ cardDescriptionColor: '',
50
+ cardDirection: 'column',
51
+ cardPadding: '10',
52
+ imgSize: '90',
53
+ cardBorderSize: '',
54
+ cardBorderColor: '',
55
+ controlsStyles: {
56
+ showOnHover: true,
57
+ iconBackground: "#272727",
58
+ dropdownBackground: "#272727",
59
+ dropdownFontColor: "white",
60
+ dropdownItemHoverColor: "#414141",
61
+ iconBackgroundHover: "#414141"
62
+ }
63
+ };
64
+
65
+ export const CardWithoutImage = Template.bind({});
66
+ CardWithoutImage.args = {
67
+ title: 'Card with image',
68
+ description: 'Lorem ipsum dolor sit amet consectetur.',
69
+ img: '',
70
+ cardBackgroundColor: '#f1d6d6',
71
+ cardRadius: '20',
72
+ cardTitleFontSize: '',
73
+ cardTitleColor: '',
74
+ cardImageRadius: '100',
75
+ cardDescriptionFontSize: '',
76
+ cardDescriptionColor: '',
77
+ cardDirection: '',
78
+ cardPadding: '10',
79
+ imgSize: '90',
80
+ cardBorderSize: '',
81
+ cardBorderColor: '',
82
+ controlsStyles: {
83
+ showOnHover: true,
84
+ iconBackground: "#272727",
85
+ dropdownBackground: "#272727",
86
+ dropdownFontColor: "white",
87
+ dropdownItemHoverColor: "#414141",
88
+ iconBackgroundHover: "#414141"
89
+ }
90
+ };
91
+
92
+ export const CardWithoutImageColumn = Template.bind({});
93
+ CardWithoutImageColumn.args = {
94
+ title: 'Card with image column',
95
+ description: 'Lorem ipsum dolor sit amet consectetur.',
96
+ img: '',
97
+ cardBackgroundColor: '#f1d6d6',
98
+ onHoverBackgroundColor: '',
99
+ cardRadius: '20',
100
+ cardTitleFontSize: '',
101
+ cardTitleColor: '',
102
+ cardImageRadius: '100',
103
+ cardDescriptionFontSize: '',
104
+ cardDescriptionColor: '',
105
+ cardDirection: 'column',
106
+ cardPadding: '10',
107
+ imgSize: '90',
108
+ cardBorderSize: '',
109
+ cardBorderColor: '',
110
+ controlsStyles: {
111
+ showOnHover: true,
112
+ iconBackground: "#272727",
113
+ dropdownBackground: "#272727",
114
+ dropdownFontColor: "white",
115
+ dropdownItemHoverColor: "#414141",
116
+ iconBackgroundHover: "#414141"
117
+ }
118
+ };
@@ -0,0 +1,54 @@
1
+ import styled from 'styled-components';
2
+
3
+ export const MainCard = styled.div`
4
+ * {
5
+ margin: 0;
6
+ padding: 0;
7
+ }
8
+ font-family: sans-serif;
9
+ display: flex;
10
+ background-color: ${props => props.cardBackgroundColor || 'white'};
11
+ border-radius: ${props => props.cardRadius}px;
12
+ border: ${props => props.cardBorderSize + 'px solid ' + props.cardBorderColor};
13
+ align-items: center;
14
+ padding: ${props => props.cardPadding + 'px' || 0} !important;
15
+ order: ${props => props.priority};
16
+ &:hover {
17
+ box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
18
+ -webkit-filter: ${props => props.darkOnHover ? 'brightness(60%)' : 'brightness(100%)'};
19
+ transition: all .2s ease;
20
+ background-color: ${props => props.onHoverBackgroundColor};
21
+ }
22
+ `
23
+ export const globalContent = styled.div`
24
+ display: flex;
25
+ flex-direction: column;
26
+ flex-grow: 1;
27
+ gap: ${props => props.contentGap}px;
28
+ `
29
+
30
+ export const Title = styled.h3`
31
+ text-transform: capitalize;
32
+ color: ${props => props.cardTitleColor || 'black'};
33
+ font-size: ${props => props.cardTitleFontSize}px;
34
+ font-weight: ${props => props.cardTitleFontWeight || 300};
35
+ `
36
+
37
+ export const Description = styled.h5`
38
+ color: ${props => props.cardDescriptionColor || 'black'};
39
+ font-size: ${props => props.cardDescriptionFontSize}px;
40
+ font-weight: 500;
41
+ `
42
+
43
+ export const ImgWrapper = styled.div`
44
+ width: ${props => props.imgSize || 100}px;
45
+ height: ${props => props.imgSize || 100}px;
46
+ border-radius: ${props => props.cardImageRadius + 'px' || '100%'};
47
+ `
48
+ export const Img = styled.img`
49
+ width: 100%;
50
+ height: 100%;
51
+ object-position: center;
52
+ object-fit: cover;
53
+ border-radius: inherit;
54
+ `
@@ -0,0 +1,137 @@
1
+ import React, { useState } from 'react';
2
+ import PropTypes from 'prop-types';
3
+ import styled from 'styled-components';
4
+ // Icons
5
+ import { IoIosMore } from "react-icons/io";
6
+
7
+ const Controls = ({ controls, maxIcons = 2, ...props }) => {
8
+ const [showMore, setShowMore] = useState(false)
9
+
10
+ const showIcons = (props.showOnHover && props.show) || !props.showOnHover;
11
+ const showMoreIcon = showIcons && controls.length > maxIcons;
12
+
13
+ const clicked = (action) => {
14
+ props.onIconClicked(action)
15
+ }
16
+
17
+ let dropdownMenu;
18
+ if (showMore) {
19
+ dropdownMenu = (
20
+ <IconsDropDown {...props}>
21
+ {controls.slice(maxIcons, controls.length).map((control, index) => (
22
+ <DropdownItem key={index} {...props} onClick={(e) => clicked(control.action)}>
23
+ {control.icon}
24
+ <IconName>{control.name}</IconName>
25
+ </DropdownItem>
26
+ ))
27
+ }
28
+ </IconsDropDown>
29
+ )
30
+ }
31
+ return (
32
+ <ListIcons {...props}>
33
+ {
34
+ showIcons && controls.slice(0, maxIcons).map((control, index) => (
35
+ <IconContainer key={index} {...props} onClick={() => clicked(control.action)}>
36
+ {control.icon}
37
+ </IconContainer>
38
+ ))
39
+ }
40
+ {
41
+ showMoreIcon &&
42
+ (<IconContainer onClick={() => setShowMore(!showMore)} onMouseLeave={e => setShowMore(false)} {...props}>
43
+ <IoIosMore />
44
+ {dropdownMenu}
45
+ </IconContainer>)
46
+ }
47
+
48
+ </ListIcons>
49
+ )
50
+ }
51
+
52
+ const ListIcons = styled.div`
53
+ display: flex;
54
+ gap: ${props => props.iconsGap}px;
55
+ position: ${props => props.position ? 'absolute' : 'static'};
56
+ left: ${props => props.position === 'center' ? '50%' : '90%'};
57
+ top: ${props => props.position === 'center' ? '50%' : '0'};
58
+ bottom: ${props => props.position === 'center' ? 'unset' : '90%'};
59
+ transform: ${props => props.position === 'center' ? 'translate(-50%, -50%)' : 'translate(0, 0)'};
60
+
61
+ & * {
62
+ padding: 0;
63
+ margin: 0;
64
+ }
65
+
66
+ & svg{
67
+ fill: ${props => props.iconColor || 'white'};
68
+ width: ${props => props.iconSize}px;
69
+ height: ${props => props.iconSize}px;
70
+ }
71
+ `
72
+
73
+ const IconContainer = styled.div`
74
+ background-color: ${props => props.iconBackground};
75
+ border-radius: ${props => props.iconBorderRadius}px;
76
+ cursor: pointer;
77
+ position: relative;
78
+ padding: ${props => props.containerPadding}px;
79
+
80
+ &:hover {
81
+ background-color: ${props => props.iconBackgroundHover}
82
+ }
83
+
84
+ `
85
+
86
+ const IconsDropDown = styled.div`
87
+ position: absolute;
88
+ right: 0;
89
+ top: 100%;
90
+ background-color: ${props => props.dropdownBackground};
91
+ min-width: 150px;
92
+ color: ${props => props.dropdownFontColor};
93
+ `
94
+
95
+ const DropdownItem = styled.div`
96
+ display: flex;
97
+ align-items: center;
98
+ gap: 10px;
99
+ padding: 10px 3px !important;
100
+
101
+ &:hover{
102
+ background-color: ${props => props.dropdownItemHoverColor};
103
+ color: white;
104
+
105
+ svg{
106
+ fill: ${props => props.iconHoverColor};
107
+ }
108
+ }
109
+ `
110
+
111
+ const IconName = styled.p`
112
+ text-transform: capitalize;
113
+ font-size: ${props => props.dropdownFontSize}px;
114
+ `
115
+
116
+ Controls.defaultProps = {}
117
+
118
+ Controls.propTypes = {
119
+ controls: PropTypes.array.isRequired,
120
+ maxIcons: PropTypes.number,
121
+ showOnHover: PropTypes.bool,
122
+ iconSize: PropTypes.number,
123
+ iconColor: PropTypes.string,
124
+ iconBackground: PropTypes.string,
125
+ iconBackgroundHover: PropTypes.string,
126
+ iconColorOnHover: PropTypes.string,
127
+ iconsGap: PropTypes.number,
128
+ iconBorderRadius: PropTypes.number,
129
+ dropdownBackground: PropTypes.string,
130
+ dropdownFontColor: PropTypes.string,
131
+ dropdownFontSize: PropTypes.number,
132
+ dropdownItemHoverColor: PropTypes.string,
133
+ position: PropTypes.string,
134
+ containerPadding: PropTypes.number
135
+ };
136
+
137
+ export default Controls
@@ -0,0 +1,24 @@
1
+ import React from 'react';
2
+ import Controls from './Controls';
3
+
4
+ import { AiOutlineUserAdd, AiOutlineDelete } from "react-icons/ai";
5
+ import { IoIosAirplane, IoIosAlarm } from "react-icons/io";
6
+
7
+ const controls = [
8
+ { icon: (<AiOutlineUserAdd />), action: 'add', name: 'Add member' },
9
+ { icon: (<AiOutlineDelete />), action: 'remove', name: 'Add member' },
10
+ { icon: (<IoIosAirplane />), action: 'add', name: 'Some Icon' },
11
+ { icon: (<IoIosAlarm />), action: 'remove', name: 'Another Icons' },
12
+ ]
13
+
14
+ export default {
15
+ title: 'reusable Components/Controls',
16
+ component: Controls
17
+ }
18
+
19
+ const Template = (args) => <Controls {...args} />;
20
+
21
+ export const fixedControls = Template.bind({});
22
+ fixedControls.args = {
23
+ controls,
24
+ };