@mohamed-karawia/library 0.1.12 → 0.1.16

package/dist/stories/Sections/Sections.js

@@ -0,0 +1,61 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _ReusableList = _interopRequireDefault(require("../Reusable Components/ReusableList/ReusableList"));
+
+var _templateObject, _templateObject2, _templateObject3;
+
+var _excluded = ["sections"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var Sections = function Sections(_ref) {
+  var sections = _ref.sections,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var _useState = (0, _react.useState)(sections[0].data[0].component),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      center = _useState2[0],
+      setCenter = _useState2[1];
+
+  var cardClicked = function cardClicked(index, cardProps) {
+    setCenter(cardProps.component);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(Container, props, /*#__PURE__*/_react.default.createElement(Left, null, /*#__PURE__*/_react.default.createElement(_ReusableList.default, Object.assign({
+    type: "sectioned",
+    data: sections,
+    cardStyle: "card-style-3",
+    cardClicked: cardClicked
+  }, props))), /*#__PURE__*/_react.default.createElement(Center, null, center));
+};
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    background-color: ", ";\n    background-color: #414141;\n    display: flex;\n"])), function (props) {
+  return props.backgroundColor;
+});
+
+var Left = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    flex: 1;\n"])));
+
+var Center = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    flex: 3;\n"])));
+
+Sections.defaultProps = {};
+var _default = Sections;
+exports.default = _default;

package/dist/stories/VideoAlbum/VideoSpace/VideoSpace.js

@@ -23,10 +23,11 @@ var _RichTextInput = _interopRequireDefault(require("../../Common Inputs/RichTex
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
-var _excluded = ["title", "discription", "date", "users", "iconsColor", "backgroundColor", "detailsPadding", "titleFontSize", "titleColor", "dateFontSize", "dateColor", "discFontSize", "discColor", "comments", "commentBackgroundColor", "commentTitleColor", "commentTitleFontSize"];
+var _excluded = ["videoSrc", "title", "discription", "date", "users", "iconsColor", "backgroundColor", "detailsPadding", "titleFontSize", "titleColor", "dateFontSize", "dateColor", "discFontSize", "discColor", "comments", "commentBackgroundColor", "commentTitleColor", "commentTitleFontSize"];
 
 var VideoSpace = function VideoSpace(_ref) {
-  var title = _ref.title,
+  var videoSrc = _ref.videoSrc,
+      title = _ref.title,
       discription = _ref.discription,
       date = _ref.date,
       users = _ref.users,
@@ -47,7 +48,8 @@ var VideoSpace = function VideoSpace(_ref) {
   return /*#__PURE__*/_react.default.createElement(Container, {
     backgroundColor: backgroundColor
   }, /*#__PURE__*/_react.default.createElement(_VideoPlayer.default, {
-    iconsColor: iconsColor
+    iconsColor: iconsColor,
+    src: videoSrc
   }), /*#__PURE__*/_react.default.createElement(VideoDetails, {
     detailsPadding: detailsPadding
   }, /*#__PURE__*/_react.default.createElement(Top, null, /*#__PURE__*/_react.default.createElement(Title, {

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

@@ -39,6 +39,10 @@ var _LogoWidget = _interopRequireDefault(require("../Widgets/LogoWidget/LogoWidg
 
 var _VideoPlayer = _interopRequireDefault(require("../VideoAlbum/VideoPlayer/VideoPlayer"));
 
+var _Notes = _interopRequireDefault(require("../Library/Notes/Notes"));
+
+var _Folders = _interopRequireDefault(require("../Library/Folders/Folders"));
+
 // Cards
 // Widgets
 var stringSearch = function stringSearch(str, word) {
@@ -73,7 +77,7 @@ var addObjectToArray = function addObjectToArray(arr, obj) {
 
 exports.addObjectToArray = addObjectToArray;
 
-var getCardStyle = function getCardStyle(cardProps, cardType, customCardStyles, cardControls, index, clicked, cardIconClicked) {
+var getCardStyle = function getCardStyle(cardProps, cardType, customCardStyles, cardControls, index, clicked, cardIconClicked, onAction) {
   var cardTypes = {
     'card-style-1': /*#__PURE__*/_react.default.createElement(_CardStyle.default, Object.assign({
       key: index
@@ -89,8 +93,8 @@ var getCardStyle = function getCardStyle(cardProps, cardType, customCardStyles,
       key: index
     }, cardProps, customCardStyles, {
       cardControls: cardControls,
-      cardClicked: function cardClicked(path) {
-        return clicked(path);
+      cardClicked: function cardClicked() {
+        return clicked(index, cardProps);
       }
     })),
     'card-style-4': /*#__PURE__*/_react.default.createElement(_CardStyle4.default, Object.assign({
@@ -103,7 +107,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);
@@ -136,7 +140,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);
@@ -147,7 +151,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);
@@ -158,7 +162,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);
@@ -179,7 +183,9 @@ var getWidgetType = function getWidgetType(widgetType, props, _cardClicked) {
     }, 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)
+    'video player': /*#__PURE__*/_react.default.createElement(_VideoPlayer.default, props),
+    'notes': /*#__PURE__*/_react.default.createElement(_Notes.default, props),
+    'folders': /*#__PURE__*/_react.default.createElement(_Folders.default, props)
   };
   return widgetTypes[widgetType];
 };

package/package.json

@@ -10,7 +10,7 @@
       ]
     ]
   },
-  "version": "0.1.12",
+  "version": "0.1.16",
   "private": false,
   "dependencies": {
     "@babel/cli": "^7.16.7",
@@ -68,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": {

package/src/stories/Chat/Chat.jsx

@@ -10,38 +10,19 @@ import RichTextInput from '../Common Inputs/RichTextInput/RichTextInput';
 const Chat = ({
     data,
     title,
-    titleColor,
-    headerBackground,
-    headerPadding,
     cardBackgroundColor,
-    cardTitleColor,
     textColor,
     users,
     ...props }) => {
 
     return (
-        <Container
-            cardBackgroundColor={cardBackgroundColor}>
-            <ReusableHeader
-                title={title}
-                titleColor={titleColor}
-                controls={controls}
-                controlsStyles={{
-                    iconColor: 'white',
-                    maxIcons: 4,
-                    dropdownBackground: 'white'
-                }}
-                headerBackground={headerBackground}
-                padding={headerPadding} />
+        <Container>
             <List
+                listTitle={title}
                 type="flat"
                 data={data}
                 cardStyle="card-style-8"
-                customCardStyles={{
-                    cardBackgroundColor,
-                    cardTitleColor,
-                    cardDescriptionColor: textColor
-                }}
+                {...props}
             />
             <RichTextInput
                 users={users}
@@ -63,9 +44,6 @@ Chat.defaultProps = {
 Chat.propTypes = {
     data: PropTypes.array.isRequired,
     title: PropTypes.string,
-    titleColor: PropTypes.string,
-    headerBackground: PropTypes.string,
-    headerPadding: PropTypes.number,
     cardBackgroundColor: PropTypes.string,
     cardTitleColor: PropTypes.string,
     textColor: PropTypes.string

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

@@ -49,6 +49,7 @@ const AddQuestion = (props) => {
 }
 
 const Container = styled.div`
+    width: 100%;
      padding: 10px;
      background-color: 'white';
      display: flex;

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

@@ -34,19 +34,10 @@ const DetailedForm = ({
                 data={questions}
                 type='flat'
                 cardStyle='card-style-3'
-                headerStyles={{
-                    padding: 10,
-                    headerBackground: '#FE1744',
-                    titleColor: '#ffff',
-                    controlsStyles: {
-                        dropdownBackground: 'black',
-                        dropdownFontColor: 'white',
-                        dropdownItemHoverColor: '#FE1744'
-                    },
-                }}
                 customCardStyles={{
                     cardPadding: 10
                 }}
+                {...props}
             />
             <Buttons>
                 <Accept onClick={onAccept}>Accept</Accept>

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

@@ -8,25 +8,11 @@ const ViewForms = ({
 }) => {
     return (
         <List
-            listTitle="Submitted Form"
+            listTitle="Submitted Forms"
             data={data}
             cardStyle="card-style-9"
             type="sectioned"
-            sectionHeaderStyles={{
-                cardTitleColor: 'white',
-                cardBackgroundColor: 'black',
-                cardPadding: 10
-            }}
-            headerStyles={{
-                padding: 10,
-                headerBackground: '#FE1744',
-                titleColor: '#ffff',
-                controlsStyles: {
-                    dropdownBackground: 'black',
-                    dropdownFontColor: 'white',
-                    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);
@@ -58,7 +57,6 @@ const Folders = ({
                 data={folders}
                 type="flat"
                 cardStyle="card-style-10"
-                headerStyles={headerStyles}
                 columnsNumber={columnsNumber}
                 galleryColumnGap={columnGap}
                 galleryRowGap={rowGap}
@@ -68,10 +66,6 @@ const Folders = ({
                 cardIconClicked={cardIconClicked}
                 cardControls={cardControls}
                 rowsHeight={140}
-                customCardStyles={{
-                    cardPadding: 10,
-                    iconColor
-                }}
                 {...props} />
             <Modal
                 modalIsOpen={showModal}
@@ -91,7 +85,7 @@ const Folders = ({
 }
 
 const Container = styled.div`
-
+    background-color: black;
 `
 
 Folders.defaultProps = {};

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/Library/ViewNote/ViewNote.jsx

@@ -2,19 +2,8 @@ import React from 'react';
 
 import Editor from '../../Common Inputs/EditorComponent/EditorComponent';
 
-const ViewNote = () => {
+const ViewNote = ({data, ...props}) => {
 
-    const data = {
-        blocks: [
-            {
-                type: "header",
-                data: {
-                  text: "New Note",
-                  level: 1
-                }
-              }
-        ]
-    }
 
     return (
         <Editor data={data}/>

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)}
@@ -67,13 +59,7 @@ const ViewAlbum = ({
                 listControls={listControls}
                 cardControls={cardControls}
                 cardIconClicked={cardIconClicked}
-                customCardStyles={{
-                    cardBackgroundColor: cardBackgroundColor,
-                    cardTitleColor: songTitleColor,
-                    controlsStyles: {
-                        iconColor: 'black'
-                    }
-                }}
+                {...props}
             />
             <Modal
                 modalIsOpen={showModal}

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

@@ -21,14 +21,12 @@ const galleryControls = [
 
 const ViewAlbums = ({
     albums,
-    cardBackgroundColor,
     albumTitleColor,
     descColor,
     ...props
 }) => {
     const cardStyles = {
         darkOnHover: true,
-        cardBackgroundColor: cardBackgroundColor,
         cardTitleColor: albumTitleColor,
         descColor,
         controlsStyles: {
@@ -76,27 +74,17 @@ 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}
             />
             <Modal
@@ -115,7 +103,7 @@ const ViewAlbums = ({
     )
 }
 const Container = styled.div`
-
+    width: 100%;
 `
 
 ViewAlbums.defaultProps = {
@@ -129,6 +117,7 @@ ViewAlbums.propTypes = {
     cardBackgroundColor: PropTypes.string,
     albumTitleColor: PropTypes.string,
     descColor: PropTypes.string,
+    title: PropTypes.string
 };
 
 export default ViewAlbums