@mohamed-karawia/library 0.1.11 → 0.1.15

package/dist/stories/VideoAlbum/ViewAlbum/ViewAlbum.js

@@ -110,23 +110,12 @@ var ViewAlbum = function ViewAlbum(_ref) {
     data: album,
     type: "flat",
     cardStyle: "card-style-6",
-    headerStyles: {
-      padding: 10,
-      headerBackground: 'black',
-      titleColor: '#ffff',
-      controlsStyles: {
-        iconSize: 25
-      }
-    },
     columnsNumber: 3,
     galleryColumnGap: 10,
     galleryRowGap: 20,
     galleryControls: galleryControls,
     iconClicked: onHeaderIconClicked,
     cardControls: cardControls,
-    cardClicked: function cardClicked() {
-      return null;
-    },
     cardIconClicked: cardIconClicked,
     customCardStyles: cardStyles
   }, props)), /*#__PURE__*/_react.default.createElement(_ReactModal.default, {

package/dist/stories/helpers/util.js

@@ -88,7 +88,10 @@ var getCardStyle = function getCardStyle(cardProps, cardType, customCardStyles,
     'card-style-3': /*#__PURE__*/_react.default.createElement(_CardStyle3.default, Object.assign({
       key: index
     }, cardProps, customCardStyles, {
-      cardControls: cardControls
+      cardControls: cardControls,
+      cardClicked: function cardClicked(path) {
+        return clicked(path);
+      }
     })),
     'card-style-4': /*#__PURE__*/_react.default.createElement(_CardStyle4.default, Object.assign({
       key: index
@@ -100,7 +103,7 @@ var getCardStyle = function getCardStyle(cardProps, cardType, customCardStyles,
     }, cardProps, customCardStyles, {
       cardControls: cardControls,
       cardClicked: function cardClicked() {
-        return clicked(index);
+        return clicked(index, cardProps);
       },
       iconClicked: function iconClicked(action) {
         return cardIconClicked(action, index);
@@ -133,7 +136,7 @@ var getCardStyle = function getCardStyle(cardProps, cardType, customCardStyles,
     }, cardProps, customCardStyles, {
       cardControls: cardControls,
       cardClicked: function cardClicked() {
-        return clicked(index);
+        return clicked(index, cardProps);
       },
       iconClicked: function iconClicked(action) {
         return cardIconClicked(action, index);
@@ -155,7 +158,7 @@ var getCardStyle = function getCardStyle(cardProps, cardType, customCardStyles,
     }, cardProps, customCardStyles, {
       cardControls: cardControls,
       cardClicked: function cardClicked() {
-        return clicked(index);
+        return clicked(index, cardProps);
       },
       iconClicked: function iconClicked(action) {
         return cardIconClicked(action, index);
@@ -167,9 +170,13 @@ var getCardStyle = function getCardStyle(cardProps, cardType, customCardStyles,
 
 exports.getCardStyle = getCardStyle;
 
-var getWidgetType = function getWidgetType(widgetType, props) {
+var getWidgetType = function getWidgetType(widgetType, props, _cardClicked) {
   var widgetTypes = {
-    'list': /*#__PURE__*/_react.default.createElement(_ReusableList.default, props),
+    'list': /*#__PURE__*/_react.default.createElement(_ReusableList.default, Object.assign({
+      cardClicked: function cardClicked(path) {
+        return _cardClicked(path);
+      }
+    }, props)),
     'music player': /*#__PURE__*/_react.default.createElement(_MusicPlayerWidget.default, props),
     'logo': /*#__PURE__*/_react.default.createElement(_LogoWidget.default, props),
     'video player': /*#__PURE__*/_react.default.createElement(_VideoPlayer.default, props)

package/package.json

@@ -10,14 +10,16 @@
       ]
     ]
   },
-  "version": "0.1.11",
+  "version": "0.1.15",
   "private": false,
   "dependencies": {
     "@babel/cli": "^7.16.7",
     "@babel/runtime": "^7.15.4",
+    "@editorjs/editorjs": "^2.22.2",
     "@editorjs/header": "^2.6.1",
     "@editorjs/image": "^2.6.2",
     "@editorjs/marker": "^1.2.2",
+    "@editorjs/paragraph": "^2.8.0",
     "@editorjs/table": "^2.0.1",
     "@giphy/js-fetch-api": "^4.1.2",
     "@giphy/react-components": "^5.3.1",
@@ -66,7 +68,7 @@
     "build": "cross-env BABEL_ENV=production babel src -d dist",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "storybook": "start-storybook -p 6006 -s public",
+    "storybook": "export NODE_OPTIONS=--openssl-legacy-provider; start-storybook -p 6006 -s public",
     "build-storybook": "build-storybook -s public"
   },
   "eslintConfig": {
@@ -98,8 +100,6 @@
     ]
   },
   "devDependencies": {
-    "@editorjs/editorjs": "^2.22.2",
-    "@editorjs/paragraph": "^2.8.0",
     "@editorjs/simple-image": "^1.4.1",
     "@geometricpanda/storybook-addon-badges": "^0.0.4",
     "@storybook/addon-a11y": "^6.3.8",

package/src/stories/Enrollment/Admin/ViewForms/ViewForms.jsx

@@ -8,7 +8,7 @@ const ViewForms = ({
 }) => {
     return (
         <List
-            listTitle="Submitted Form"
+            listTitle="Submitted Forms"
             data={data}
             cardStyle="card-style-9"
             type="sectioned"
@@ -27,6 +27,7 @@ const ViewForms = ({
                     dropdownItemHoverColor: '#FE1744'
                 },
             }}
+            {...props}
         />
     )
 }

package/src/stories/Events/Event/Event.jsx

@@ -14,19 +14,16 @@ const Event = ({
     titleSize,
     dateColor,
     dateSize,
-    headerBackground,
-    headerTitleColor,
     discColor,
     discSize,
+    headerStyles
 }) => {
     return (
         <Container
             backgroundColor={backgroundColor}>
             <ReusableHeader
-                title='Event'
-                padding={10}
-                headerBackground={headerBackground}
-                titleColor={headerTitleColor}
+                title={title}
+                {...headerStyles}
             />
             <CoverWrapper>
                 <Cover src={cover} />

package/src/stories/Events/EventsList/EventsList.jsx

@@ -60,28 +60,12 @@ const EventsList = ({
                 data={events}
                 type='flat'
                 cardStyle="card-style-11"
-                headerStyles={{
-                    padding: 10,
-                    headerBackground: '#FE1744',
-                    titleColor: '#ffff',
-                    controlsStyles: {
-                        iconSize: 25
-                    }
-                }}
-                customCardStyles={{
-                    iconColor,
-                    cardTitleFontSize,
-                    cardTitleColor,
-                    cardPadding,
-                    controlsStyles: {
-                        iconColor: '#FE1744'
-                    }
-                }}
                 listControls={listControls}
                 cardControls={cardControls}
                 iconClicked={onIconClicked}
                 cardClicked={cardClicked}
                 cardIconClicked={cardIconClicked}
+                {...props}
             />
             <Modal
                 modalIsOpen={showModal}

package/src/stories/Library/Folders/Folders.jsx

@@ -23,7 +23,6 @@ const Folders = ({
     rowGap,
     cardClicked,
     iconColor,
-    headerStyles,
     ...props
 }) => {
     const [showModal, setShowModal] = useState(false);
@@ -51,6 +50,8 @@ const Folders = ({
         setShowModal(false)
     }
 
+    console.log(props)
+
     return (
         <Container>
             <Gallery
@@ -58,7 +59,6 @@ const Folders = ({
                 data={folders}
                 type="flat"
                 cardStyle="card-style-10"
-                headerStyles={headerStyles}
                 columnsNumber={columnsNumber}
                 galleryColumnGap={columnGap}
                 galleryRowGap={rowGap}
@@ -68,10 +68,6 @@ const Folders = ({
                 cardIconClicked={cardIconClicked}
                 cardControls={cardControls}
                 rowsHeight={140}
-                customCardStyles={{
-                    cardPadding: 10,
-                    iconColor
-                }}
                 {...props} />
             <Modal
                 modalIsOpen={showModal}

package/src/stories/Library/Notes/Notes.jsx

@@ -60,28 +60,12 @@ const Notes = ({
                 data={notes}
                 type='flat'
                 cardStyle="card-style-11"
-                headerStyles={{
-                    padding: 10,
-                    headerBackground: '#FE1744',
-                    titleColor: '#ffff',
-                    controlsStyles: {
-                        iconSize: 25
-                    }
-                }}
-                customCardStyles={{
-                    iconColor,
-                    cardTitleFontSize,
-                    cardTitleColor,
-                    cardPadding,
-                    controlsStyles: {
-                        iconColor: '#FE1744'
-                    }
-                }}
                 listControls={listControls}
                 cardControls={cardControls}
                 iconClicked={onIconClicked}
                 cardClicked={cardClicked}
                 cardIconClicked={cardIconClicked}
+                {...props}
             />
             <Modal
                 modalIsOpen={showModal}

package/src/stories/Music Album/ViewAlbum/ViewAlbum.jsx

@@ -52,14 +52,6 @@ const ViewAlbum = ({
             <List
                 listTitle="My Album"
                 data={album}
-                headerStyles={{
-                    padding: 10,
-                    headerBackground: 'black',
-                    titleColor: '#ffff',
-                    controlsStyles: {
-                        iconSize: 25
-                    }
-                }}
                 cardStyle="card-style-7"
                 type="flat"
                 cardClicked={(index) => props.cardClicked(index)}
@@ -74,6 +66,7 @@ const ViewAlbum = ({
                         iconColor: 'black'
                     }
                 }}
+                {...props}
             />
             <Modal
                 modalIsOpen={showModal}

package/src/stories/Music Album/ViewAlbums/ViewAlbums.jsx

@@ -76,25 +76,16 @@ const ViewAlbums = ({
     return (
         <Container>
             <Gallery
-                galleryTitle="Music Albums"
+                galleryTitle={props.title}
                 data={albums}
                 type="flat"
                 cardStyle="card-style-6"
-                headerStyles={{
-                    padding: 10,
-                    headerBackground: 'black',
-                    titleColor: '#ffff',
-                    controlsStyles: {
-                        iconSize: 25
-                    }
-                }}
                 columnsNumber={3}
                 galleryColumnGap={10}
                 galleryRowGap={20}
                 galleryControls={galleryControls}
                 iconClicked={onHeaderIconClicked}
                 cardControls={cardControls}
-                cardClicked={() => null}
                 cardIconClicked={cardIconClicked}
                 customCardStyles={cardStyles}
                 {...props}
@@ -129,6 +120,7 @@ ViewAlbums.propTypes = {
     cardBackgroundColor: PropTypes.string,
     albumTitleColor: PropTypes.string,
     descColor: PropTypes.string,
+    title: PropTypes.string
 };
 
 export default ViewAlbums

package/src/stories/Pages/Chat/Chat.jsx

@@ -58,6 +58,7 @@ const Chat = ({
                                 }
                             },
                         }}
+                        cardClicked={(path) => alert(path)}
                     />
                 </Left>
                 <Center>

package/src/stories/Pages/Enrollment/Forms/Forms.jsx

@@ -69,6 +69,10 @@ const Forms = (props) => {
         },
     ])
 
+    const cardClicked = (index, cardProps) => {
+        console.log(cardProps)
+    }
+
     return (
         <BaseMaterial {...worldStyles.containerStyle} {...props}>
         <Navbar />
@@ -113,7 +117,9 @@ const Forms = (props) => {
                     hideTitle
                 >
                     <ViewForms
-                        data={forms} />
+                        data={forms}
+                        cardClicked={cardClicked}
+                         />
 
                 </SpaceContainer>
 

package/src/stories/Pages/Events/Event/Event.jsx

@@ -67,11 +67,17 @@ const Event = (props) => {
                             date="15/11/1976 : 16/11/1976"
                             disc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia impedit fugiat reprehenderit adipisci eos atque ullam error quia amet nihil, exercitationem beatae distinctio eligendi neque, consequuntur odit commodi id porro."
                             backgroundColor="black"
-                            headerBackground="black"
-                            headerTitleColor="white"
                             titleColor="white"
                             discColor="white"
                             dateColor="white"
+                            headerStyles={{
+                                padding: 10,
+                                headerBackground: 'black',
+                                titleColor: '#ffff',
+                                controlsStyles: {
+                                    iconSize: 25
+                                }
+                            }}
                         />
 
                     </SpaceContainer>

package/src/stories/Pages/Events/Events/Events.jsx

@@ -45,6 +45,10 @@ const Events = (props) => {
         setEvents(deleteFromArrayByIndex(events, index))
     }
 
+    const cardClicked = (index, cardProps) => {
+        console.log(cardProps)
+    }
+    
     return (
         <BaseMaterial {...worldStyles.containerStyle} {...props}>
         <Navbar />
@@ -94,6 +98,20 @@ const Events = (props) => {
                        cardTitleFontSize={15}
                        onAddEvent={onAddEvent}
                        cardIconClicked={cardIconClicked}
+                       cardClicked={cardClicked}
+                       headerStyles={{
+                        padding: 10,
+                        headerBackground: '#FE1744',
+                        titleColor: '#ffff',
+                        controlsStyles: {
+                            iconSize: 25
+                        }
+                    }}
+                    customCardStyles={{
+                        controlsStyles: {
+                            iconColor: '#FE1744'
+                        }
+                    }}
                     />
 
                 </SpaceContainer>

package/src/stories/Pages/Library/Folders/Library.jsx

@@ -102,7 +102,13 @@ const Library = (props) => {
                                 controlsStyles: {
                                     iconSize: 25
                                 }
-                            }} />
+                            }} 
+                            customCardStyles={{
+                                cardPadding: 10,
+                                iconColor: '#ff2d2d'
+                            }}
+                            
+                            />
 
                     </SpaceContainer>
 

package/src/stories/Pages/Library/Notes/Notes.jsx

@@ -20,11 +20,11 @@ import { SPACES } from '../../ViewWorld/constatnts';
 const Notes = (props) => {
 
     const [notes, setNotes] = useState([
-        {title: 'Study notes', date: '15/11/2020'},
-        {title: 'Music notes', date: '14/12/2020'},
-        {title: 'Workout notes', date: '5/8/2021'},
-        {title: 'Gaming notes', date: '14/4/2023'},
-        {title: 'Working notes', date: '5/6/2021'},
+        { title: 'Study notes', date: '15/11/2020' },
+        { title: 'Music notes', date: '14/12/2020' },
+        { title: 'Workout notes', date: '5/8/2021' },
+        { title: 'Gaming notes', date: '14/4/2023' },
+        { title: 'Working notes', date: '5/6/2021' },
     ])
 
     const cardIconClicked = (action, index) => {
@@ -32,7 +32,7 @@ const Notes = (props) => {
             case 'delete':
                 deleteNote(index)
                 break;
-        
+
             default:
                 break;
         }
@@ -45,7 +45,11 @@ const Notes = (props) => {
     const deleteNote = (index) => {
         setNotes(deleteFromArrayByIndex(notes, index))
     }
-    
+
+    const cardClicked = (index, cardProps) => {
+        console.log(cardProps)
+    }
+
     return (
         <BaseMaterial {...worldStyles.containerStyle} {...props}>
             <Navbar />
@@ -90,10 +94,25 @@ const Notes = (props) => {
                         hideTitle
                     >
                         <ViewNotes
-                        onAddNote={onAddNote}
-                        cardIconClicked={cardIconClicked}
-                        notes={notes}
-                             />
+                            onAddNote={onAddNote}
+                            cardIconClicked={cardIconClicked}
+                            notes={notes}
+                            cardClicked={cardClicked}
+                            headerStyles={{
+                                padding: 10,
+                                headerBackground: '#FE1744',
+                                titleColor: '#ffff',
+                                controlsStyles: {
+                                    iconSize: 25
+                                }
+                            }}
+                            customCardStyles={{
+                                iconColor: '#FE1744',
+                                controlsStyles: {
+                                    iconColor: '#FE1744'
+                                }
+                            }}
+                        />
 
                     </SpaceContainer>
 

package/src/stories/Pages/Music/MusicAlbum/Music.jsx

@@ -123,7 +123,15 @@ const Music = (props) => {
               album={album}
               onAddSong={onAddSong}
               cardIconClicked={cardIconClicked}
-              cardClicked={onPlaySong} />
+              cardClicked={onPlaySong}
+              headerStyles={{
+                padding: 10,
+                headerBackground: 'black',
+                titleColor: '#ffff',
+                controlsStyles: {
+                    iconSize: 25
+                }
+            }} />
           </SpaceContainer>
 
         </Center>

package/src/stories/Pages/Music/MusicAlbums/MusicAlbums.jsx

@@ -56,6 +56,10 @@ const MusicAlbums = (props) => {
     const deleteFromAlbums = (index) => {
         setAlbums(deleteFromArrayByIndex(albums, index))
     }
+
+    const cardClicked = (index, cardProps) => {
+        console.log(cardProps)
+    }
     return (
         <BaseMaterial {...worldStyles.containerStyle} {...props}>
             <Navbar />
@@ -100,9 +104,20 @@ const MusicAlbums = (props) => {
                         hideTitle
                     >
                         <ViewAlbums
+                        title="Music Albums"
                             albums={albums}
                             cardIconClicked={cardIconClicked}
-                            onAddAlbum={onAddAlbum} />
+                            onAddAlbum={onAddAlbum}
+                            headerStyles={{
+                                padding: 10,
+                                headerBackground: 'black',
+                                titleColor: '#ffff',
+                                controlsStyles: {
+                                    iconSize: 25
+                                }
+                            }}
+                            cardClicked={cardClicked}
+                             />
                     </SpaceContainer>
 
                 </Center>

package/src/stories/Pages/Photos/Albums/Albums.jsx

@@ -59,6 +59,10 @@ const Albums = (props) => {
         setAlbums(addObjectToArray(albums, newAlbum))
     }
 
+    const cardClicked = (index, cardProps) => {
+        console.log(cardProps)
+    }
+
     return (
         <BaseMaterial {...worldStyles.containerStyle} {...props}>
             <Navbar />
@@ -108,6 +112,7 @@ const Albums = (props) => {
                             onDeleteAlbum={onDeleteAlbum}
                             onAddAlbum={onAddAlbum}
                             columnsNumber={2}
+                            cardClicked={cardClicked}
                         />
                     </SpaceContainer>
 

package/src/stories/Pages/Video/DetailedVideo/DetailedVideo.jsx

@@ -76,7 +76,8 @@ const DetailedVideo = (props) => {
                             date="10/11/2022"
                             comments={comments}
                             discColor="gray"
-                            dateColor="gray" />
+                            dateColor="gray"
+                            videoSrc={'https://www.youtube.com/watch?v=vETUpJ88cfA'} />
                     </SpaceContainer>
 
                 </Center>

package/src/stories/Pages/Video/VideoAlbum/Video.jsx

@@ -84,6 +84,9 @@ const Video = (props) => {
         setAlbum(deleteFromArrayByIndex(album, index))
     }
 
+    const cardClicked = (index, cardProps) => {
+        console.log(cardProps)
+    }
 
     return (
         <BaseMaterial {...worldStyles.containerStyle} {...props}>
@@ -132,7 +135,16 @@ const Video = (props) => {
                             album={album}
                             onAddVideo={onAddVideo}
                             onDeleteSong={deleteVideoFromAlbum}
-                            cardIconClicked={cardIconClicked} />
+                            cardIconClicked={cardIconClicked}
+                            cardClicked={cardClicked}
+                            headerStyles={{
+                                padding: 10,
+                                headerBackground: 'black',
+                                titleColor: '#ffff',
+                                controlsStyles: {
+                                    iconSize: 25
+                                }
+                            }} />
                     </SpaceContainer>
 
                 </Center>

package/src/stories/Pages/ViewWorld/constatnts.js

@@ -2,15 +2,15 @@ export const SPACES = [
   {
     title: 'Main List',
     data: [
-      {title: 'Cargo Sprint'},
-      {title: 'Movies'}
-    ]
+      {title: 'Cargo Sprint', path: 'cago'},
+      {title: 'Movies', path: 'movies'}
+    ],
   },
   {
-    title: 'Entertainment List',
+    title: 'Entertainment',
     data: [
-      {title: 'Gaming'},
-      {title: 'Music'}
+      {title: 'Gaming', path: 'games'},
+      {title: 'Music', path: 'music'}
     ]
   }
 ]

package/src/stories/Photo Album/ViewAlbums/ViewAlbums.jsx

@@ -93,7 +93,6 @@ const ViewAlbums = ({
                 galleryRowGap={rowGap}
                 galleryControls={galleryControls}
                 iconClicked={onIconClicked}
-                cardClicked={() => null}
                 cardControls={cardControls}
                 cardIconClicked={cardIconClicked}
                 customCardStyles={cardStyles}

package/src/stories/Reusable Components/Cards/Card-style-11/CardStyle11.jsx

@@ -15,8 +15,13 @@ const CardStyle11 = ({ title, date, ...props }) => {
         props.iconClicked(action, props.index)
     }
 
+    const cardClicked = () => {
+        props.cardClicked()
+    }
+
     return (
         <Card
+        onClick={cardClicked}
             {...props}>
             <SvgWrapper {...props}>
                 <BiNotepad />

package/src/stories/Reusable Components/Cards/Card-style-3/CardStyle3.jsx

@@ -5,16 +5,20 @@ import PropTypes from "prop-types";
 import Controls from '../../Controls/Controls';
 import { globalContent, MainCard, Title, Description } from '../globalCardStyles';
 
-const CardStyle3 = ({ title, description, ...props }) => {
+const CardStyle3 = ({ title, description, path, ...props }) => {
     const [showIcons, setShowIcons] = useState(false)
 
     const iconCliked = (action) => {
         console.log(action)
     }
 
+    const cardClicked = () => {
+        props.cardClicked(path)
+    }
 
     return (
         <MainCard
+            onClick={cardClicked}
             onMouseEnter={e => setShowIcons(true)}
             onMouseLeave={e => setShowIcons(false)}
             {...props}>