@mohamed-karawia/library 0.1.3 → 0.1.7

package/dist/stories/Reusable Components/Cards/Card.stories.js

@@ -1,132 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.CardWithoutImageColumn = exports.CardWithoutImage = exports.CardWithImageColumn = exports.CardWithImage = exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _Card = _interopRequireDefault(require("./Card"));
-
-var _default = {
-  title: 'Reusable Components/Cards/Regular Card',
-  component: _Card.default
-};
-exports.default = _default;
-
-var Template = function Template(args) {
-  return /*#__PURE__*/_react.default.createElement(_Card.default, args);
-};
-
-var CardWithImage = Template.bind({});
-exports.CardWithImage = CardWithImage;
-CardWithImage.args = {
-  title: 'Card with image',
-  description: 'Lorem ipsum dolor sit amet consectetur.',
-  img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png',
-  cardBackgroundColor: '#f1d6d6',
-  cardRadius: '20',
-  cardTitleFontSize: '',
-  cardTitleColor: '',
-  cardImageRadius: '100',
-  cardDescriptionFontSize: '',
-  cardDescriptionColor: '',
-  cardDirection: '',
-  cardPadding: '10',
-  imgSize: '90',
-  cardBorderSize: '',
-  cardBorderColor: '',
-  controlsStyles: {
-    showOnHover: true,
-    iconBackground: "#272727",
-    dropdownBackground: "#272727",
-    dropdownFontColor: "white",
-    dropdownItemHoverColor: "#414141",
-    iconBackgroundHover: "#414141"
-  }
-};
-var CardWithImageColumn = Template.bind({});
-exports.CardWithImageColumn = CardWithImageColumn;
-CardWithImageColumn.args = {
-  title: 'Card with image column',
-  description: 'Lorem ipsum dolor sit amet consectetur.',
-  img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png',
-  cardBackgroundColor: '#f1d6d6',
-  cardRadius: '20',
-  cardTitleFontSize: '',
-  cardTitleColor: '',
-  cardImageRadius: '100',
-  cardDescriptionFontSize: '',
-  cardDescriptionColor: '',
-  cardDirection: 'column',
-  cardPadding: '10',
-  imgSize: '90',
-  cardBorderSize: '',
-  cardBorderColor: '',
-  controlsStyles: {
-    showOnHover: true,
-    iconBackground: "#272727",
-    dropdownBackground: "#272727",
-    dropdownFontColor: "white",
-    dropdownItemHoverColor: "#414141",
-    iconBackgroundHover: "#414141"
-  }
-};
-var CardWithoutImage = Template.bind({});
-exports.CardWithoutImage = CardWithoutImage;
-CardWithoutImage.args = {
-  title: 'Card with image',
-  description: 'Lorem ipsum dolor sit amet consectetur.',
-  img: '',
-  cardBackgroundColor: '#f1d6d6',
-  cardRadius: '20',
-  cardTitleFontSize: '',
-  cardTitleColor: '',
-  cardImageRadius: '100',
-  cardDescriptionFontSize: '',
-  cardDescriptionColor: '',
-  cardDirection: '',
-  cardPadding: '10',
-  imgSize: '90',
-  cardBorderSize: '',
-  cardBorderColor: '',
-  controlsStyles: {
-    showOnHover: true,
-    iconBackground: "#272727",
-    dropdownBackground: "#272727",
-    dropdownFontColor: "white",
-    dropdownItemHoverColor: "#414141",
-    iconBackgroundHover: "#414141"
-  }
-};
-var CardWithoutImageColumn = Template.bind({});
-exports.CardWithoutImageColumn = CardWithoutImageColumn;
-CardWithoutImageColumn.args = {
-  title: 'Card with image column',
-  description: 'Lorem ipsum dolor sit amet consectetur.',
-  img: '',
-  cardBackgroundColor: '#f1d6d6',
-  onHoverBackgroundColor: '',
-  cardRadius: '20',
-  cardTitleFontSize: '',
-  cardTitleColor: '',
-  cardImageRadius: '100',
-  cardDescriptionFontSize: '',
-  cardDescriptionColor: '',
-  cardDirection: 'column',
-  cardPadding: '10',
-  imgSize: '90',
-  cardBorderSize: '',
-  cardBorderColor: '',
-  controlsStyles: {
-    showOnHover: true,
-    iconBackground: "#272727",
-    dropdownBackground: "#272727",
-    dropdownFontColor: "white",
-    dropdownItemHoverColor: "#414141",
-    iconBackgroundHover: "#414141"
-  }
-};

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

@@ -1,49 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.fixedControls = exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _Controls = _interopRequireDefault(require("./Controls"));
-
-var _ai = require("react-icons/ai");
-
-var _io = require("react-icons/io");
-
-var controls = [{
-  icon: /*#__PURE__*/_react.default.createElement(_ai.AiOutlineUserAdd, null),
-  action: 'add',
-  name: 'Add member'
-}, {
-  icon: /*#__PURE__*/_react.default.createElement(_ai.AiOutlineDelete, null),
-  action: 'remove',
-  name: 'Add member'
-}, {
-  icon: /*#__PURE__*/_react.default.createElement(_io.IoIosAirplane, null),
-  action: 'add',
-  name: 'Some Icon'
-}, {
-  icon: /*#__PURE__*/_react.default.createElement(_io.IoIosAlarm, null),
-  action: 'remove',
-  name: 'Another Icons'
-}];
-var _default = {
-  title: 'reusable Components/Controls',
-  component: _Controls.default
-};
-exports.default = _default;
-
-var Template = function Template(args) {
-  return /*#__PURE__*/_react.default.createElement(_Controls.default, args);
-};
-
-var fixedControls = Template.bind({});
-exports.fixedControls = fixedControls;
-fixedControls.args = {
-  controls: controls
-};

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

@@ -1,56 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.GallerySectioned = exports.GalleryFlat = exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _Gallery = _interopRequireDefault(require("./Gallery"));
-
-var _fakeData = require("../fakeData");
-
-var _commonStyles = require("../commonStyles");
-
-// Data
-// Styles
-var _default = {
-  title: 'Reusable components/Gallery',
-  component: _Gallery.default
-};
-exports.default = _default;
-
-var Template = function Template(args) {
-  return /*#__PURE__*/_react.default.createElement(_Gallery.default, Object.assign({
-    galleryTitle: "Reusable Gallery",
-    galleryControls: _fakeData.controls,
-    headerStyles: {
-      padding: 10,
-      headerBackground: '#FE1744',
-      titleColor: '#ffff'
-    },
-    columnsNumber: 3,
-    galleryColumnGap: 10,
-    controlsStyles: _commonStyles.headingControlsStyles,
-    cardStyle: "card-style-6",
-    customCardStyles: _commonStyles.galleryCardControlsStyles
-  }, args));
-};
-
-var GalleryFlat = Template.bind({});
-exports.GalleryFlat = GalleryFlat;
-GalleryFlat.args = {
-  data: _fakeData.data,
-  type: "flat",
-  cardControls: _fakeData.cardControls
-};
-var GallerySectioned = Template.bind({});
-exports.GallerySectioned = GallerySectioned;
-GallerySectioned.args = {
-  data: _fakeData.dataWithSections,
-  type: "sectioned",
-  cardControls: _fakeData.cardControls
-};

package/dist/stories/Reusable Components/Lists/Cards/ListCard-1.stories.js

@@ -1 +0,0 @@
-"use strict";

package/dist/stories/Reusable Components/Lists/List.stories.js

@@ -1 +0,0 @@
-"use strict";

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

@@ -1,66 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.MentionArea = exports.default = void 0;
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _Mention = _interopRequireDefault(require("./Mention"));
-
-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 _default = {
-  title: 'Resuable Components/Mention',
-  component: _Mention.default
-};
-exports.default = _default;
-var users = [{
-  id: 'walter',
-  display: 'Walter White'
-}, {
-  id: 'jesse',
-  display: 'Jesse Pinkman'
-}, {
-  id: 'gus',
-  display: 'Gustavo "Gus" Fring'
-}, {
-  id: 'saul',
-  display: 'Saul Goodman'
-}, {
-  id: 'hank',
-  display: 'Hank Schrader'
-}, {
-  id: 'skyler',
-  display: 'Skyler White'
-}, {
-  id: 'mike',
-  display: 'Mike Ehrmantraut'
-}, {
-  id: 'lydia',
-  display: 'Lydìã Rôdarté-Qüayle'
-}];
-
-var MentionArea = function MentionArea(args) {
-  var _useState = (0, _react.useState)(''),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      value = _useState2[0],
-      setValue = _useState2[1];
-
-  return /*#__PURE__*/_react.default.createElement(_Mention.default, Object.assign({
-    value: value,
-    handleOnChange: function handleOnChange(value) {
-      return setValue(value);
-    },
-    users: users
-  }, args));
-};
-
-exports.MentionArea = MentionArea;

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

@@ -1,207 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.form = exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _storybookFormik = _interopRequireDefault(require("storybook-formik"));
-
-var Yup = _interopRequireWildcard(require("yup"));
-
-var _ReusableForm = _interopRequireDefault(require("./ReusableForm"));
-
-var _TextField = _interopRequireDefault(require("../../Common Inputs/TextField/TextField"));
-
-var _CustomDropZone = _interopRequireDefault(require("../../Common Inputs/CustomDropzone/CustomDropZone"));
-
-var _CustomTextarea = _interopRequireDefault(require("../../Common Inputs/CustomTextarea/CustomTextarea"));
-
-var _CheckboxGroup = _interopRequireDefault(require("../../Common Inputs/CheckboxGroup/CheckboxGroup"));
-
-var _CustomAutoComplete = _interopRequireDefault(require("../../Common Inputs/CustomAutoComplete/CustomAutoComplete"));
-
-var _CustomSelect = _interopRequireDefault(require("../../Common Inputs/CustomSelect/CustomSelect"));
-
-var _DatePicker = _interopRequireDefault(require("../../Common Inputs/DatePicker/DatePicker"));
-
-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 submitHandler = function submitHandler(values) {
-  console.log(values);
-};
-
-var cancelHandler = function cancelHandler() {
-  console.log('cancel');
-};
-
-var sections = [{
-  title: "Server Name",
-  body: [/*#__PURE__*/_react.default.createElement(_TextField.default, {
-    label: "Server Name",
-    name: "userName"
-  })]
-}, {
-  title: "User Name",
-  body: [/*#__PURE__*/_react.default.createElement(_TextField.default, {
-    label: "User Name",
-    name: "firstName"
-  }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
-    label: "Last Name",
-    name: "lastName"
-  })],
-  bodyColumns: 2
-}, {
-  title: 'More inputs',
-  body: [/*#__PURE__*/_react.default.createElement(_TextField.default, {
-    label: "Input one",
-    name: "input1"
-  }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
-    label: "Input two",
-    name: "input2"
-  })],
-  hideTitle: true
-}, {
-  title: "Server history",
-  body: [/*#__PURE__*/_react.default.createElement(_TextField.default, {
-    label: "Age",
-    name: "age"
-  }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
-    label: "Hobby",
-    name: "hobby"
-  }), /*#__PURE__*/_react.default.createElement(_CustomTextarea.default, {
-    label: "Discription",
-    name: "discription"
-  }), /*#__PURE__*/_react.default.createElement(_CheckboxGroup.default, {
-    label: "Checkbox Group",
-    name: "acceptTerms",
-    options: [{
-      label: 'option 1',
-      value: '1'
-    }, {
-      label: 'option 2',
-      value: '2'
-    }, {
-      label: 'option 3',
-      value: '3'
-    }]
-  }), /*#__PURE__*/_react.default.createElement(_CustomAutoComplete.default, {
-    name: "search",
-    label: "Search",
-    items: [{
-      id: 'foo',
-      label: 'foo'
-    }, {
-      id: 'bar',
-      label: 'bar'
-    }, {
-      id: 'baz',
-      label: 'baz'
-    }]
-  }), /*#__PURE__*/_react.default.createElement(_CustomSelect.default, {
-    label: "options",
-    options: [{
-      label: 'select an option',
-      value: ''
-    }, {
-      label: 'option 1',
-      value: '1'
-    }, {
-      label: 'option 2',
-      value: '2'
-    }, {
-      label: 'option 3',
-      value: '3'
-    }],
-    name: "select"
-  })]
-}, {
-  title: "User Media",
-  body: [/*#__PURE__*/_react.default.createElement(_CustomDropZone.default, {
-    label: "User Profile",
-    name: "file"
-  }), /*#__PURE__*/_react.default.createElement(_DatePicker.default, {
-    label: "Date Range",
-    name: "date"
-  })]
-}];
-var initialValues = {
-  userName: '',
-  firstName: '',
-  lastName: '',
-  input1: '',
-  input2: '',
-  age: '',
-  hobby: '',
-  discription: '',
-  acceptTerms: [],
-  search: '',
-  select: '',
-  file: '',
-  date: {
-    startDate: null,
-    endDate: null
-  }
-};
-var formSchema = Yup.object().shape({
-  userName: Yup.string().required("Required"),
-  firstName: Yup.string().required("Required"),
-  lastName: Yup.string().required("Required"),
-  age: Yup.string().required("Required"),
-  hobby: Yup.string().required("Required"),
-  discription: Yup.string().required('Required'),
-  acceptTerms: Yup.array().min(1, 'You must choose at least one element'),
-  search: Yup.string().required("Required"),
-  select: Yup.string().required("Required"),
-  date: Yup.object().shape({
-    startDate: Yup.object().required("Required").typeError('Invalid Start Date'),
-    endDate: Yup.object().required("Required").typeError('Invalid End Date')
-  })
-});
-var _default = {
-  title: 'Reusable Components/Reusable Formik Form',
-  component: _ReusableForm.default // decorators: [withFormik],
-  // parameters: {
-  //     formik: {
-  //         initialValues,
-  //         validationSchema: formSchema,
-  //         onSubmit: submitHandler
-  //     },
-  // }
-
-};
-exports.default = _default;
-
-var form = function form(args) {
-  return /*#__PURE__*/_react.default.createElement(_ReusableForm.default, Object.assign({
-    formTitle: "Reusable form",
-    initialValues: initialValues,
-    formSchema: formSchema,
-    sections: sections,
-    headerStyles: {
-      padding: 10,
-      headerBackground: 'black',
-      titleColor: '#ffff'
-    },
-    sectionHeaderStyles: {
-      padding: 6,
-      headerBackground: '#FE1744',
-      titleColor: '#ffff'
-    },
-    bodyPadding: 10,
-    saveBtnText: "Save",
-    cancelBtnText: "Cancel",
-    saveBtnHandle: submitHandler,
-    cancelHandler: cancelHandler,
-    bodyRowGap: 20,
-    bodyColumnGap: 10
-  }, args));
-};
-
-exports.form = form;

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

@@ -1,35 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Header = exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _ReusableHeader = _interopRequireDefault(require("./ReusableHeader"));
-
-var _fakeData = require("../fakeData");
-
-var _default = {
-  title: 'Reusable Components/Reusable Header',
-  component: _ReusableHeader.default
-};
-exports.default = _default;
-
-var Template = function Template(args) {
-  return /*#__PURE__*/_react.default.createElement(_ReusableHeader.default, args);
-};
-
-var Header = Template.bind({});
-exports.Header = Header;
-Header.args = {
-  title: "Reusable Header",
-  discription: "This is a discription for header",
-  controls: _fakeData.controls,
-  controlsStyles: {
-    iconColor: 'red'
-  }
-};

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

@@ -1,84 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ListSectioned = exports.ListFlat = exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _ReusableList = _interopRequireDefault(require("./ReusableList"));
-
-var _fakeData = require("../fakeData");
-
-// Components
-// Data
-var _default = {
-  title: 'Reusable components/List',
-  component: _ReusableList.default
-};
-exports.default = _default;
-
-var Template = function Template(args) {
-  return /*#__PURE__*/_react.default.createElement(_ReusableList.default, Object.assign({
-    listTitle: "Reusable List",
-    cardStyle: "card-style-1"
-  }, args));
-};
-
-var ListFlat = Template.bind({});
-exports.ListFlat = ListFlat;
-ListFlat.args = {
-  data: _fakeData.data,
-  type: "flat",
-  cardControls: _fakeData.cardControls,
-  headerStyles: {
-    padding: 10,
-    headerBackground: '#FE1744',
-    titleColor: '#ffff',
-    controlsStyles: {
-      dropdownBackground: 'black',
-      dropdownFontColor: 'white',
-      dropdownItemHoverColor: '#FE1744'
-    }
-  },
-  listControls: _fakeData.controls,
-  customCardStyles: {
-    controlsStyles: {
-      iconColor: 'black',
-      showOnHover: true
-    }
-  },
-  hideTitle: false
-};
-var ListSectioned = Template.bind({});
-exports.ListSectioned = ListSectioned;
-ListSectioned.args = {
-  data: _fakeData.dataWithSections,
-  type: "sectioned",
-  sectionHeaderStyles: {
-    cardTitleColor: 'white',
-    cardBackgroundColor: 'black',
-    cardPadding: 10
-  },
-  cardControls: _fakeData.cardControls,
-  headerStyles: {
-    padding: 10,
-    headerBackground: '#FE1744',
-    titleColor: '#ffff',
-    controlsStyles: {
-      dropdownBackground: 'black',
-      dropdownFontColor: 'white',
-      dropdownItemHoverColor: '#FE1744'
-    }
-  },
-  listControls: _fakeData.controls,
-  customCardStyles: {
-    controlsStyles: {
-      iconColor: 'black',
-      showOnHover: true
-    }
-  }
-};

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

@@ -1,24 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Default = exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _SearchCard = _interopRequireDefault(require("./SearchCard"));
-
-var _default = {
-  title: 'Components/SearchCard/Item',
-  component: _SearchCard.default
-};
-exports.default = _default;
-
-var Default = function Default(args) {
-  return /*#__PURE__*/_react.default.createElement(_SearchCard.default, args);
-};
-
-exports.Default = Default;