@mohamed-karawia/library 0.1.0

package/dist/stories/Forms/CreateProfile-3/CreateProfile.js

@@ -0,0 +1,324 @@
+"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 _formik = require("formik");
+
+var _reactDropzone = require("react-dropzone");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var Yup = _interopRequireWildcard(require("yup"));
+
+var _SearchCard = _interopRequireDefault(require("../../Reusable Components/SearchCard/SearchCard"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31;
+
+var _excluded = ["label"],
+    _excluded2 = ["label"];
+
+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 MyTextInput = function MyTextInput(_ref) {
+  var label = _ref.label,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  // useField() returns [formik.getFieldProps(), formik.getFieldMeta()]
+  // which we can spread on <input>. We can use field meta to show an error
+  // message if the field is invalid and it has been touched (i.e. visited)
+  var _useField = (0, _formik.useField)(props),
+      _useField2 = (0, _slicedToArray2.default)(_useField, 2),
+      field = _useField2[0],
+      meta = _useField2[1];
+
+  return /*#__PURE__*/_react.default.createElement(TextInput, null, /*#__PURE__*/_react.default.createElement(Label, null, label), /*#__PURE__*/_react.default.createElement(UserInput, Object.assign({}, field, props)), meta.touched && meta.error ? /*#__PURE__*/_react.default.createElement(Error, null, meta.error) : null);
+};
+
+var MyStyleTextInput = function MyStyleTextInput(_ref2) {
+  var label = _ref2.label,
+      props = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
+
+  // useField() returns [formik.getFieldProps(), formik.getFieldMeta()]
+  // which we can spread on <input>. We can use field meta to show an error
+  // message if the field is invalid and it has been touched (i.e. visited)
+  var _useField3 = (0, _formik.useField)(props),
+      _useField4 = (0, _slicedToArray2.default)(_useField3, 2),
+      field = _useField4[0],
+      meta = _useField4[1];
+
+  return /*#__PURE__*/_react.default.createElement(StyleTextInput, null, /*#__PURE__*/_react.default.createElement(StyleLabel, null, label), /*#__PURE__*/_react.default.createElement(StyleInput, Object.assign({}, field, props)), meta.touched && meta.error ? /*#__PURE__*/_react.default.createElement(Error, null, meta.error) : null);
+};
+
+var CreateProfile = function CreateProfile() {
+  // const [serverName, setServerName] = useState('');
+  var _useState = (0, _react.useState)(''),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      themeName = _useState2[0],
+      setThemeName = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(''),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      fileName = _useState4[0],
+      setFileName = _useState4[1];
+
+  var _useState5 = (0, _react.useState)([{
+    name: 'preset1',
+    selected: false
+  }, {
+    name: 'preset2',
+    selected: false
+  }, {
+    name: 'preset3',
+    selected: false
+  }]),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      preset = _useState6[0],
+      setPreset = _useState6[1];
+
+  var theme = [{
+    name: 'abc',
+    selected: false
+  }, {
+    name: 'bcd',
+    selected: false
+  }, {
+    name: 'def',
+    selected: false
+  }];
+
+  var _useState7 = (0, _react.useState)(),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      image = _useState8[0],
+      setImage = _useState8[1];
+
+  var onDrop = (0, _react.useCallback)(function (acceptedFiles) {
+    var url = URL.createObjectURL(acceptedFiles[acceptedFiles.length - 1]);
+    setImage(url);
+  }, []);
+
+  var _useDropzone = (0, _reactDropzone.useDropzone)({
+    accept: 'image/*',
+    onDrop: onDrop
+  }),
+      getRootProps = _useDropzone.getRootProps,
+      getInputProps = _useDropzone.getInputProps,
+      isDragActive = _useDropzone.isDragActive;
+
+  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_formik.Formik, {
+    initialValues: {
+      userName: '',
+      preset: '',
+      theme: '',
+      serverName: '',
+      serverDescription: '',
+      margin: '',
+      color: '',
+      padding: '',
+      backgroundColor: '',
+      border: '',
+      fontSize: ''
+    },
+    validationSchema: Yup.object({
+      userName: Yup.string().min(4, 'Must be atleast 4 characters or more').required('username cannot be empty'),
+      serverName: Yup.string().required('Server name cannot be empty'),
+      margin: Yup.string().required('provide margin'),
+      color: Yup.string().required('provide color'),
+      padding: Yup.string().required('provide padding'),
+      backgroundColor: Yup.string().required('provide backgroundColor'),
+      border: Yup.string().required('provide border'),
+      fontSize: Yup.string().required('provide fontSize')
+    }),
+    onSubmit: function onSubmit(values, _ref3) {
+      var setSubmitting = _ref3.setSubmitting;
+      console.log(values); // setTimeout(() => {
+      //   alert(JSON.stringify(values, null, 2));
+      //   setSubmitting(false);
+      // }, 400);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_formik.Form, null, /*#__PURE__*/_react.default.createElement(Title, null, "Create Profile"), /*#__PURE__*/_react.default.createElement(FileContainer, null, /*#__PURE__*/_react.default.createElement(UploadFile, null, /*#__PURE__*/_react.default.createElement(FileInput, {
+    onChange: function onChange(e) {
+      return setFileName(e.target.files[0].name);
+    },
+    type: "file"
+  }), "+"), fileName.length > 0 ? /*#__PURE__*/_react.default.createElement(FileName, null, fileName) : /*#__PURE__*/_react.default.createElement(FileName, null, "Choose File "), /*#__PURE__*/_react.default.createElement(MyTextInput, {
+    label: "Username",
+    name: "userName",
+    type: "text",
+    placeholder: "user name"
+  })), /*#__PURE__*/_react.default.createElement(SubContainer, null, /*#__PURE__*/_react.default.createElement(SubHeading, {
+    marginRight: "20"
+  }, "Create a Server"), /*#__PURE__*/_react.default.createElement(Icon, {
+    src: "https://www.clipartmax.com/png/middle/138-1389227_refresh-icon-circle.png" // onClick={() => setServerName('')}
+    ,
+    marginRight: "8"
+  })), /*#__PURE__*/_react.default.createElement(InputContainer, null, /*#__PURE__*/_react.default.createElement(MyTextInput, {
+    label: "Server name",
+    name: "serverName",
+    type: "text",
+    placeholder: "server name"
+  })), /*#__PURE__*/_react.default.createElement(InputContainer, null, /*#__PURE__*/_react.default.createElement(MyTextInput, {
+    label: "Server description",
+    name: "serverDescription",
+    type: "text",
+    placeholder: "server description"
+  })), /*#__PURE__*/_react.default.createElement(H4, null, "Upload a logo"), /*#__PURE__*/_react.default.createElement(Dropdiv, getRootProps(), /*#__PURE__*/_react.default.createElement("input", getInputProps()), isDragActive ? /*#__PURE__*/_react.default.createElement("p", null, "Drop the files here ...") : /*#__PURE__*/_react.default.createElement("p", null, "Drag 'n' drop some files here, or click to select files")), /*#__PURE__*/_react.default.createElement(PreviewImageContainer, null, image && /*#__PURE__*/_react.default.createElement(PreviewImage, {
+    src: image
+  })), /*#__PURE__*/_react.default.createElement(PresetHeadContainer, null, /*#__PURE__*/_react.default.createElement(H4, null, "Presets")), /*#__PURE__*/_react.default.createElement(PresetDivContainer, null, preset.map(function (p, index) {
+    return /*#__PURE__*/_react.default.createElement(PresetDiv, {
+      key: index,
+      onClick: function onClick() {
+        var a = preset.filter(function (pre, i) {
+          if (i === index) {
+            pre.selected = !pre.selected;
+            return pre;
+          } else {
+            pre.selected = false;
+            return pre;
+          }
+        });
+        setPreset(a);
+      },
+      selected: p.selected
+    }, /*#__PURE__*/_react.default.createElement(CardImage, {
+      src: "https://cdn.pixabay.com/photo/2014/11/30/14/11/cat-551554__340.jpg"
+    }), /*#__PURE__*/_react.default.createElement(CardTitle, null, p.name), /*#__PURE__*/_react.default.createElement(CardDescription, null, p.name));
+  })), /*#__PURE__*/_react.default.createElement(SubContainer, null, /*#__PURE__*/_react.default.createElement(SubHeading, null, "Theme"), /*#__PURE__*/_react.default.createElement(Icon, {
+    src: "https://www.clipartmax.com/png/middle/138-1389227_refresh-icon-circle.png",
+    onClick: function onClick() {
+      return setThemeName('');
+    },
+    marginLeft: "5"
+  })), /*#__PURE__*/_react.default.createElement(InputContainer, null, /*#__PURE__*/_react.default.createElement(Input, {
+    value: themeName,
+    onChange: function onChange(e) {
+      setThemeName(e.target.value);
+    },
+    placeholder: "search theme..."
+  })), /*#__PURE__*/_react.default.createElement(_SearchCard.default, {
+    list: theme,
+    item: themeName
+  }), /*#__PURE__*/_react.default.createElement(SubContainer, null, /*#__PURE__*/_react.default.createElement(SubHeading, null, "Styles"), /*#__PURE__*/_react.default.createElement(Icon, {
+    src: "https://www.clipartmax.com/png/middle/138-1389227_refresh-icon-circle.png",
+    marginLeft: "7"
+  })), /*#__PURE__*/_react.default.createElement(PresetDivContainer, null, /*#__PURE__*/_react.default.createElement(MyStyleTextInput, {
+    label: "Margin",
+    name: "margin",
+    type: "text",
+    placeholder: "margin"
+  }), /*#__PURE__*/_react.default.createElement(MyStyleTextInput, {
+    label: "Color",
+    name: "color",
+    type: "text",
+    placeholder: "color"
+  }), /*#__PURE__*/_react.default.createElement(MyStyleTextInput, {
+    label: "Padding",
+    name: "padding",
+    type: "text",
+    placeholder: "padding"
+  })), /*#__PURE__*/_react.default.createElement(PresetDivContainer, null, /*#__PURE__*/_react.default.createElement(MyStyleTextInput, {
+    label: "Background Color",
+    name: "backgroundColor",
+    type: "text",
+    placeholder: "background color"
+  }), /*#__PURE__*/_react.default.createElement(MyStyleTextInput, {
+    label: "Border",
+    name: "border",
+    type: "text",
+    placeholder: "border"
+  }), /*#__PURE__*/_react.default.createElement(MyStyleTextInput, {
+    label: "Font Size",
+    name: "fontSize",
+    type: "text",
+    placeholder: "font size"
+  })), /*#__PURE__*/_react.default.createElement(PresetDivContainer, null), /*#__PURE__*/_react.default.createElement(H4, {
+    marginRight: "20"
+  }, "Preview"), /*#__PURE__*/_react.default.createElement(PreviewBox, null, /*#__PURE__*/_react.default.createElement("h1", null, "1")), /*#__PURE__*/_react.default.createElement(ButtonContainer, null, /*#__PURE__*/_react.default.createElement(Button, {
+    type: "submit"
+  }, "Create")))));
+};
+
+var Title = _styledComponents.default.h3(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /* text-align: center; */\n  margin-right: 20%;\n"])));
+
+var Container = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1;\n  flex-direction: column;\n  font-family: Arial, Helvetica, sans-serif;\n  /* text-align: center; */\n  //   background:'#000'\n"])));
+
+var FileContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  /* text-align: center; */\n  /* margin-left: 3%; */\n  /* width: 40%; */\n"])));
+
+var UploadFile = _styledComponents.default.label(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  border: 1px solid grey;\n  border-radius: 100px;\n  display: inline-block;\n  padding: 6px 12px;\n  cursor: pointer;\n  margin-right: 2%;\n  margin-bottom: 1%;\n  :hover {\n    color: #fff;\n    background: grey;\n  }\n"])));
+
+var FileInput = _styledComponents.default.input(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: none;\n"])));
+
+var FileName = _styledComponents.default.label(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  border: 1px solid #606060;\n  font-size: 14px;\n  color: #979899;\n  padding: 5px;\n  margin-right: 23%;\n"])));
+
+var UserInput = _styledComponents.default.input(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  /* width: 30%; */\n  width: 99%;\n  padding: 0.5%;\n  margin-top: 1%;\n  /* align-self: center; */\n"])));
+
+var SubContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 1%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 1%;\n"])));
+
+var PresetHeadContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 1%;\n  margin-bottom: 1%;\n"])));
+
+var SubHeading = _styledComponents.default.label(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 18px;\n  font-weight: 600;\n"])));
+
+var H4 = _styledComponents.default.span(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 18px;\n  font-weight: 600;\n"])));
+
+var Icon = _styledComponents.default.img(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  width: 24px;\n  height: 24px;\n  justify-self: flex-end;\n  /* margin-right: ", "%; */\n  /* margin-left: ", "%; */\n"])), function (props) {
+  return props.marginRight;
+}, function (props) {
+  return props.marginLeft;
+});
+
+var InputContainer = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  /* margin-left: 2%; */\n  margin-bottom: 2%;\n"])));
+
+var Input = _styledComponents.default.input(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  width: 99%;\n  margin-top: 0.5%;\n  padding: 0.5%;\n"])));
+
+var PresetDivContainer = _styledComponents.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 100%;\n  /* justify-content: center; */\n  margin-bottom: 2%;\n  /* margin-left: 2%; */\n"])));
+
+var PresetDiv = _styledComponents.default.div(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n  margin-right: 2%;\n  width: 30%;\n  display: flex;\n  flex-direction: column;\n  /* flex: 1; */\n  border: 1px solid white;\n\n  background: ", ";\n  :hover {\n    opacity: 0.8;\n  }\n"])), function (props) {
+  return props.selected ? '#ccc' : 'white';
+});
+
+var CardImage = _styledComponents.default.img(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n  height: 70%;\n  width: 100%;\n  :hover {\n    opacity: 0.8;\n  }\n"])));
+
+var CardTitle = _styledComponents.default.label(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 18px;\n  font-weight: 400;\n  margin-top: 1%;\n  margin-left: 2%;\n"])));
+
+var CardDescription = _styledComponents.default.label(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 14px;\n  font-weight: 200;\n  margin-top: 1%;\n  margin-left: 2%;\n"])));
+
+var PreviewBox = _styledComponents.default.div(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2.default)(["\n  width: 320px;\n  /* margin-left: 36%; */\n  background: grey;\n"])));
+
+var ButtonContainer = _styledComponents.default.div(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2.default)(["\n  /* margin-left: 26%; */\n  margin-top: 2%;\n  text-align: center;\n"])));
+
+var Button = _styledComponents.default.button(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2.default)(["\n  width: 300px;\n  padding: 1%;\n  border: 1px solid black;\n  :hover {\n    background: grey;\n    color: white;\n  }\n"])));
+
+var PreviewImage = _styledComponents.default.img(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 1%;\n  width: 20%;\n  height: 20%;\n"])));
+
+var PreviewImageContainer = _styledComponents.default.div(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: center;\n"])));
+
+var Dropdiv = _styledComponents.default.div(_templateObject25 || (_templateObject25 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 20px;\n  border-width: 2px;\n  border-radius: 2px;\n  border-color: #eee;\n  border-style: dashed;\n  background-color: #fafafa;\n  color: #bdbdbd;\n  outline: none;\n  transition: border 0.24s ease-in-out;\n"])));
+
+var TextInput = _styledComponents.default.div(_templateObject26 || (_templateObject26 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  /* background-color: black; */\n"])));
+
+var StyleTextInput = _styledComponents.default.span(_templateObject27 || (_templateObject27 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  /*   width: 10%; */\n  /* margin-left: 2%; */\n  margin-right: 10%;\n"])));
+
+var Error = _styledComponents.default.div(_templateObject28 || (_templateObject28 = (0, _taggedTemplateLiteral2.default)(["\n  color: red;\n  font-size: 14px;\n"])));
+
+var Label = _styledComponents.default.label(_templateObject29 || (_templateObject29 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 14px;\n"])));
+
+var StyleLabel = _styledComponents.default.label(_templateObject30 || (_templateObject30 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 14px;\n"])));
+
+var StyleInput = _styledComponents.default.input(_templateObject31 || (_templateObject31 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  margin-top: 3%;\n  padding: 2%;\n  /* align-self: center; */\n"])));
+
+var _default = CreateProfile;
+exports.default = _default;

package/dist/stories/Forms/CreateProfile-3/CreateProfile.stories.js

@@ -0,0 +1,24 @@
+"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 _CreateProfile = _interopRequireDefault(require("./CreateProfile"));
+
+var _default = {
+  title: 'Forms/CreateProfile/Item',
+  component: _CreateProfile.default
+};
+exports.default = _default;
+
+var Default = function Default(args) {
+  return /*#__PURE__*/_react.default.createElement(_CreateProfile.default, args);
+};
+
+exports.Default = Default;

package/dist/stories/Forms/CreateUser/CreateUser.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _BaseMaterial = _interopRequireDefault(require("../../Containers/BaseMaterial"));
+
+var CreateUser = function CreateUser(props) {
+  return /*#__PURE__*/_react.default.createElement(_BaseMaterial.default, props, /*#__PURE__*/_react.default.createElement("input", {
+    type: "textbox",
+    placeholder: "Username"
+  }), /*#__PURE__*/_react.default.createElement("input", {
+    type: "email",
+    placeholder: "Email Address"
+  }));
+};
+
+var _default = CreateUser;
+exports.default = _default;

package/dist/stories/Forms/CreateUser/CreateUser.stories.js

@@ -0,0 +1,26 @@
+"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 _CreateUser = _interopRequireDefault(require("./CreateUser"));
+
+var _default = {
+  title: "Forms/CreateUser",
+  component: _CreateUser.default
+};
+exports.default = _default;
+
+var Default = function Default(props) {
+  return /*#__PURE__*/_react.default.createElement(_CreateUser.default, {
+    inputBGColor: "yellow"
+  });
+};
+
+exports.Default = Default;

package/dist/stories/Forms/CreateVideoAlbum/CreateVideoAlbum.js

@@ -0,0 +1,84 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var Yup = _interopRequireWildcard(require("yup"));
+
+var _ReusableForm = _interopRequireDefault(require("../../Reusable Components/ReusableForm/ReusableForm"));
+
+var _TextField = _interopRequireDefault(require("../../Common Inputs/TextField/TextField"));
+
+var _CustomDropZone = _interopRequireDefault(require("../../Common Inputs/CustomDropzone/CustomDropZone"));
+
+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 CreateVideoAlbum = function CreateVideoAlbum(props) {
+  var _Object$assign;
+
+  var initialValues = {
+    cover: null,
+    title: ''
+  };
+  var formSchema = Yup.object().shape({
+    title: Yup.string().required("Required")
+  });
+  var sections = [{
+    title: "Announcment Details",
+    body: [/*#__PURE__*/_react.default.createElement(_CustomDropZone.default, {
+      label: "Album Cover",
+      name: "cover"
+    }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      label: "Title",
+      name: "title"
+    })],
+    hideTitle: true
+  }];
+
+  var onCreate = function onCreate(values) {
+    var album = (0, _objectSpread2.default)({}, values);
+    var date = new Date();
+    album.date = date;
+    props.saveHandler(album);
+  };
+
+  var cancelHandler = function cancelHandler() {
+    props.cancelHandler();
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_ReusableForm.default, Object.assign((_Object$assign = {
+    formTitle: "Create Video Album",
+    initialValues: initialValues,
+    formSchema: formSchema,
+    sections: sections,
+    headerStyles: {
+      padding: 10,
+      headerBackground: 'black',
+      titleColor: '#ffff'
+    },
+    saveBtnText: props.saveBtnText,
+    cancelBtnText: props.cancelBtnText,
+    saveHandler: onCreate,
+    cancelHandler: cancelHandler
+  }, (0, _defineProperty2.default)(_Object$assign, "headerStyles", {
+    padding: 10,
+    headerBackground: 'black',
+    titleColor: '#ffff'
+  }), (0, _defineProperty2.default)(_Object$assign, "sectionPadding", 10), (0, _defineProperty2.default)(_Object$assign, "bodyRowGap", 10), _Object$assign), props.formStyles));
+};
+
+CreateVideoAlbum.defaultProps = {};
+var _default = CreateVideoAlbum;
+exports.default = _default;

package/dist/stories/Forms/CreateVideoAlbum/CreateVideoAlbum.stories.js

@@ -0,0 +1,37 @@
+"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 _CreateVideoAlbum = _interopRequireDefault(require("./CreateVideoAlbum"));
+
+var _default = {
+  title: 'Forms/Create Video Album',
+  component: _CreateVideoAlbum.default
+};
+exports.default = _default;
+
+var onSave = function onSave(album) {
+  console.log(album);
+};
+
+var onCancel = function onCancel() {
+  console.log('Cancel');
+};
+
+var Form = function Form(args) {
+  return /*#__PURE__*/_react.default.createElement(_CreateVideoAlbum.default, Object.assign({
+    saveHandler: onSave,
+    cancelHandler: onCancel,
+    saveBtnText: "Create",
+    cancelBtnText: "Cancel"
+  }, args));
+};
+
+exports.Form = Form;

package/dist/stories/Forms/Form/Form.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _RadioInput = _interopRequireDefault(require("../../Common Inputs/RadioInput/RadioInput"));
+
+var Form = function Form() {
+  var list = [{
+    title: 'abc',
+    description: 'abc',
+    imageURL: 'https://cdn.pixabay.com/photo/2014/11/30/14/11/cat-551554__340.jpg'
+  }, {
+    title: 'bcd',
+    description: 'abc',
+    imageURL: 'https://cdn.pixabay.com/photo/2014/11/30/14/11/cat-551554__340.jpg'
+  }];
+  console.log('!!!');
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_RadioInput.default, {
+    list: list,
+    title: "abc",
+    onChange: function onChange(changedListItem) {
+      console.log(changedListItem);
+    }
+  }));
+};
+
+var _default = Form;
+exports.default = _default;

package/dist/stories/Forms/Form/Form.stories.js

@@ -0,0 +1,24 @@
+"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 _Form = _interopRequireDefault(require("./Form"));
+
+var _default = {
+  title: 'Forms/RadioInputForm',
+  component: _Form.default
+};
+exports.default = _default;
+
+var Default = function Default(args) {
+  return /*#__PURE__*/_react.default.createElement(_Form.default, args);
+};
+
+exports.Default = Default;