@mohamed-karawia/library 0.1.8 → 0.1.12

package/dist/stories/Pages/Chat/Chat.js

@@ -71,6 +71,9 @@ var Chat = function Chat(_ref) {
           showOnHover: true
         }
       }
+    },
+    cardClicked: function cardClicked(path) {
+      return alert(path);
     }
   })), /*#__PURE__*/_react.default.createElement(_Center.default, null, /*#__PURE__*/_react.default.createElement(_SpaceContainer.default, {
     title: "Music Album",

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

@@ -7,16 +7,20 @@ exports.MOVIES_SONGS = exports.MOVIES_DATA = exports.GAMING_SONGS = exports.GAMI
 var SPACES = [{
   title: 'Main List',
   data: [{
-    title: 'Cargo Sprint'
+    title: 'Cargo Sprint',
+    path: 'cago'
   }, {
-    title: 'Movies'
+    title: 'Movies',
+    path: 'movies'
   }]
 }, {
-  title: 'Entertainment List',
+  title: 'Entertainment',
   data: [{
-    title: 'Gaming'
+    title: 'Gaming',
+    path: 'games'
   }, {
-    title: 'Music'
+    title: 'Music',
+    path: 'music'
   }]
 }];
 exports.SPACES = SPACES;

package/dist/stories/Reusable Components/Cards/Card-style-3/CardStyle3.js

@@ -23,7 +23,7 @@ var _globalCardStyles = require("../globalCardStyles");
 
 var _templateObject;
 
-var _excluded = ["title", "description"];
+var _excluded = ["title", "description", "path"];
 
 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); }
 
@@ -32,6 +32,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var CardStyle3 = function CardStyle3(_ref) {
   var title = _ref.title,
       description = _ref.description,
+      path = _ref.path,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
   var _useState = (0, _react.useState)(false),
@@ -43,7 +44,12 @@ var CardStyle3 = function CardStyle3(_ref) {
     console.log(action);
   };
 
+  var cardClicked = function cardClicked() {
+    props.cardClicked(path);
+  };
+
   return /*#__PURE__*/_react.default.createElement(_globalCardStyles.MainCard, Object.assign({
+    onClick: cardClicked,
     onMouseEnter: function onMouseEnter(e) {
       return setShowIcons(true);
     },

package/dist/stories/Reusable Components/WidgetContainer/WidgetContainer.js

@@ -29,7 +29,12 @@ var WidgetContainer = function WidgetContainer(_ref) {
       widgetControls = _ref.widgetControls,
       widgetProps = _ref.widgetProps,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var child = (0, _util.getWidgetType)(widgetType, widgetProps);
+
+  var cardClicked = function cardClicked(path) {
+    props.cardClicked(path);
+  };
+
+  var child = (0, _util.getWidgetType)(widgetType, widgetProps, cardClicked);
 
   var iconCliked = function iconCliked(action) {
     console.log(action);
@@ -42,7 +47,7 @@ var WidgetContainer = function WidgetContainer(_ref) {
   }, props.headerStyles)), /*#__PURE__*/_react.default.createElement(Body, null, child));
 };
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    flex-direction: column;\n"])));
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n"])));
 
 var Body = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    margin: 0;\n    padding: 0;\n"])));
 

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
@@ -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.8",
+  "version": "0.1.12",
   "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",
@@ -34,7 +36,6 @@
     "formik": "^2.2.9",
     "moment": "^2.29.1",
     "rc-slider": "^9.7.5",
-    "react": "^16.14.0",
     "react-async-hook": "^4.0.0",
     "react-autocomplete": "^1.8.1",
     "react-dates": "^21.8.0",
@@ -59,6 +60,9 @@
     "web-vitals": "^1.0.1",
     "yup": "^0.32.9"
   },
+  "peerDependencies": {
+    "react": "^16.14.0"
+  },
   "scripts": {
     "start": "react-scripts start",
     "build": "cross-env BABEL_ENV=production babel src -d dist",
@@ -96,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/Pages/Chat/Chat.jsx

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

package/src/stories/Reusable Components/WidgetContainer/WidgetContainer.jsx

@@ -13,7 +13,12 @@ const WidgetContainer = ({
     ...props
 }) => {
 
-    const child = getWidgetType(widgetType, widgetProps)
+    const cardClicked = (path) => {
+       props.cardClicked(path)
+    }
+
+    const child = getWidgetType(widgetType, widgetProps, cardClicked)
+
 
     const iconCliked = (action) => {
         console.log(action)
@@ -39,6 +44,7 @@ const WidgetContainer = ({
 const Container = styled.div`
     display: flex;
     flex-direction: column;
+    width: 100%;
 `
 
 const Body = styled.div`

package/src/stories/helpers/util.js

@@ -44,7 +44,7 @@ export const getCardStyle = (cardProps, cardType, customCardStyles, cardControls
 	const cardTypes = {
 		'card-style-1': (<CardStyle1 key={index} {...cardProps} {...customCardStyles} cardControls={cardControls} />),
 		'card-style-2': (<CardStyle2 key={index} {...cardProps} {...customCardStyles} cardControls={cardControls}/>),
-		'card-style-3': (<CardStyle3 key={index} {...cardProps} {...customCardStyles} cardControls={cardControls}/>),
+		'card-style-3': (<CardStyle3 key={index} {...cardProps} {...customCardStyles} cardControls={cardControls} cardClicked={(path) => clicked(path)}/>),
 		'card-style-4': (<CardStyle4 key={index} {...cardProps} {...customCardStyles} cardControls={cardControls}/>),
 		'card-style-6': (<CardStyle6 key={index} {...cardProps} {...customCardStyles} cardControls={cardControls} cardClicked={() => clicked(index)} iconClicked={(action) => cardIconClicked(action, index)} />),
 		'card-style-7': (<CardStyle7 key={index} {...cardProps} {...customCardStyles} cardControls={cardControls} cardClicked={() => clicked(index)} iconClicked={(action) => cardIconClicked(action, index)} />),
@@ -56,9 +56,9 @@ export const getCardStyle = (cardProps, cardType, customCardStyles, cardControls
 	return cardTypes[cardType]
 };
 
-export const getWidgetType = (widgetType, props) => {
+export const getWidgetType = (widgetType, props, cardClicked) => {
 	const widgetTypes = {
-		'list': (<ReusableList {...props}/>),
+		'list': (<ReusableList cardClicked={(path) => cardClicked(path)} {...props}/>),
 		'music player': (<MusicPlayerWidget {...props} />),
 		'logo': (<LogoWidget {...props}/>),
 		'video player': (<VideoPlayer {...props}/>)