@mohamed-karawia/library 0.1.0

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

@@ -0,0 +1,383 @@
+"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 _react = _interopRequireDefault(require("react"));
+
+var _bi = require("react-icons/bi");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _formik = require("formik");
+
+var Yup = _interopRequireWildcard(require("yup"));
+
+var _TextField = _interopRequireDefault(require("../../Common Inputs/TextField/TextField"));
+
+var _CustomAutoComplete = _interopRequireDefault(require("../../Common Inputs/CustomAutoComplete/CustomAutoComplete"));
+
+var _DatePicker = _interopRequireDefault(require("../../Common Inputs/DatePicker/DatePicker"));
+
+var _CustomSelect = _interopRequireDefault(require("../../Common Inputs/CustomSelect/CustomSelect"));
+
+var _CustomDropZone = _interopRequireDefault(require("../../Common Inputs/CustomDropzone/CustomDropZone"));
+
+var _CheckboxGroup = _interopRequireDefault(require("../../Common Inputs/CheckboxGroup/CheckboxGroup"));
+
+var _CustomTextarea = _interopRequireDefault(require("../../Common Inputs/CustomTextarea/CustomTextarea"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
+
+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; }
+
+// Dummy Data for Presets
+var presets = [{
+  name: 'football',
+  icon: /*#__PURE__*/_react.default.createElement(_bi.BiFootball, null)
+}, {
+  name: 'Music',
+  icon: /*#__PURE__*/_react.default.createElement(_bi.BiMusic, null)
+}, {
+  name: 'Games',
+  icon: /*#__PURE__*/_react.default.createElement(_bi.BiGame, null)
+}, {
+  name: 'Books',
+  icon: /*#__PURE__*/_react.default.createElement(_bi.BiBook, null)
+}, {
+  name: 'Movies',
+  icon: /*#__PURE__*/_react.default.createElement(_bi.BiCameraMovie, null)
+}, {
+  name: 'Science',
+  icon: /*#__PURE__*/_react.default.createElement(_bi.BiSearch, null)
+}]; // Dummy Data for styles
+
+var themes = [{
+  id: 'red',
+  label: 'red'
+}, {
+  id: 'lightgreen',
+  label: 'lightgreen'
+}, {
+  id: 'yellow',
+  label: 'yellow'
+}, {
+  id: 'purple',
+  label: 'purple'
+}, {
+  id: 'lightblue',
+  label: 'lightblue'
+}, {
+  id: 'pink',
+  label: 'pink'
+}]; // Dummy Data for select options
+
+var options = [{
+  label: 'select an option',
+  value: ''
+}, {
+  label: 'option 1',
+  value: '1'
+}, {
+  label: 'option 2',
+  value: '2'
+}, {
+  label: 'option 3',
+  value: '3'
+}]; // Dummy Data for select Checkboxes Group
+
+var checkboxGroup = [{
+  label: 'option 1',
+  value: '1'
+}, {
+  label: 'option 2',
+  value: '2'
+}, {
+  label: 'option 3',
+  value: '3'
+}];
+
+var CreateProfile = function CreateProfile() {
+  //Form initial Values
+  var initialValues = {
+    file: '',
+    server: '',
+    userName: '',
+    serverName: '',
+    searchThemes: '',
+    preset: '',
+    styles: {
+      fontColor: '',
+      serverFontColor: '',
+      fontSize: '',
+      serverFontSize: '',
+      borderRadius: '',
+      darkenServer: ''
+    },
+    startDate: null,
+    endDate: null,
+    select: '',
+    acceptTerms: [],
+    text: ''
+  }; // Form Validation Schema
+
+  var formSchema = Yup.object().shape({
+    file: Yup.object().required("Required"),
+    userName: Yup.string().required("Required"),
+    serverName: Yup.string().required("Required"),
+    searchThemes: Yup.string().required("Required"),
+    styles: Yup.object().shape({
+      fontSize: Yup.number().typeError('Font size must be a number'),
+      serverFontSize: Yup.number().typeError('Server Font size must be a number'),
+      borderRadius: Yup.number().typeError('Border radius must be a number'),
+      darkenServer: Yup.number().typeError('Darken Server must be a number').min(0, "Must be a number between 0 and 1").max(1, 'Must be a number between 0 and 1')
+    }),
+    startDate: Yup.object().required("Required"),
+    endDate: Yup.object().required("Required"),
+    select: Yup.string().required("Required"),
+    acceptTerms: Yup.array().min(1, 'You must choose at least one element'),
+    text: Yup.string().required("Required")
+  });
+
+  var submitHandler = function submitHandler(values) {
+    console.log(values);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(Heading, null, "create profile"), /*#__PURE__*/_react.default.createElement(_formik.Formik, {
+    initialValues: initialValues,
+    validationSchema: formSchema,
+    onSubmit: function onSubmit(values) {
+      return submitHandler(values);
+    }
+  }, function (_ref) {
+    var errors = _ref.errors,
+        touched = _ref.touched,
+        setFieldValue = _ref.setFieldValue,
+        values = _ref.values;
+    return /*#__PURE__*/_react.default.createElement(CreateForm, null, /*#__PURE__*/_react.default.createElement(FormHeader, null, /*#__PURE__*/_react.default.createElement("div", null, values.userProfilePreview && /*#__PURE__*/_react.default.createElement(ProfileImgWrapper, null, /*#__PURE__*/_react.default.createElement(Img, {
+      src: values.userProfilePreview,
+      alt: ""
+    })), /*#__PURE__*/_react.default.createElement(_CustomDropZone.default, {
+      name: "file",
+      label: "User Profile",
+      borderRadius: "100",
+      width: "150",
+      height: "150",
+      fontSize: "15"
+    })), /*#__PURE__*/_react.default.createElement(InputWrapper, null, /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      label: "Username",
+      name: "userName",
+      borderRadius: "10"
+    }))), /*#__PURE__*/_react.default.createElement(InputWrapper, null, /*#__PURE__*/_react.default.createElement(LabelWrapper, null, /*#__PURE__*/_react.default.createElement(Label, null, "Create Server"), /*#__PURE__*/_react.default.createElement(ResetIcon, {
+      onClick: function onClick() {
+        setFieldValue('serverName', '');
+      }
+    }, /*#__PURE__*/_react.default.createElement(_bi.BiReset, null))), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      name: "serverName",
+      borderRadius: "10"
+    })), /*#__PURE__*/_react.default.createElement(InputWrapper, null, /*#__PURE__*/_react.default.createElement(LabelWrapper, null, /*#__PURE__*/_react.default.createElement(Label, null, "Upload Logo"), /*#__PURE__*/_react.default.createElement(ResetIcon, {
+      onClick: function onClick() {
+        setFieldValue('serverFile', null);
+        setFieldValue('serverPreview', null);
+      }
+    }, /*#__PURE__*/_react.default.createElement(_bi.BiReset, null))), values.serverPreview && /*#__PURE__*/_react.default.createElement(ServerLogoWrapper, null, /*#__PURE__*/_react.default.createElement(Img, {
+      src: values.serverPreview,
+      alt: ""
+    })), /*#__PURE__*/_react.default.createElement(_CustomDropZone.default, {
+      name: "server",
+      fontSize: "15"
+    })), /*#__PURE__*/_react.default.createElement(InputWrapper, null, /*#__PURE__*/_react.default.createElement(LabelWrapper, null, /*#__PURE__*/_react.default.createElement(Label, null, "Presets"), /*#__PURE__*/_react.default.createElement(ResetIcon, {
+      onClick: function onClick() {
+        return setFieldValue('preset', '');
+      }
+    }, /*#__PURE__*/_react.default.createElement(_bi.BiReset, null))), /*#__PURE__*/_react.default.createElement(List, null, presets.map(function (presetItem, index) {
+      return /*#__PURE__*/_react.default.createElement(PresetItem, {
+        key: index,
+        onClick: function onClick() {
+          return setFieldValue('preset', presetItem);
+        },
+        isActive: presetItem.name === values.preset.name
+      }, presetItem.icon, presetItem.name);
+    }))), /*#__PURE__*/_react.default.createElement(InputWrapper, null, /*#__PURE__*/_react.default.createElement(LabelWrapper, null, /*#__PURE__*/_react.default.createElement(_CustomAutoComplete.default, {
+      label: "themes",
+      name: "searchThemes",
+      items: themes,
+      placeholder: "Search Themes",
+      value: values.searchThemes,
+      onInputChange: function onInputChange(value) {
+        setFieldValue('searchThemes', value);
+      },
+      inputValue: values.searchThemes,
+      borderColor: "#9e9e9e",
+      borderSize: "1",
+      borderRadius: "10",
+      padding: "4",
+      height: "30"
+    }), /*#__PURE__*/_react.default.createElement(ResetIcon, {
+      onClick: function onClick() {
+        setFieldValue('searchThemes', '');
+      }
+    }, /*#__PURE__*/_react.default.createElement(_bi.BiReset, null))), /*#__PURE__*/_react.default.createElement(List, null, themes.map(function (themeItem) {
+      return /*#__PURE__*/_react.default.createElement(ThemeItem, {
+        key: themeItem.id,
+        color: themeItem.label,
+        onClick: function onClick() {
+          setFieldValue('searchThemes', themeItem.label);
+        },
+        isActive: themeItem === values.searchThemes
+      }, themeItem.label);
+    }))), /*#__PURE__*/_react.default.createElement(InputWrapper, null, /*#__PURE__*/_react.default.createElement(LabelWrapper, null, /*#__PURE__*/_react.default.createElement(Label, null, "Styles"), /*#__PURE__*/_react.default.createElement(ResetIcon, {
+      onClick: function onClick() {
+        setFieldValue('styles', initialValues.styles);
+      }
+    }, /*#__PURE__*/_react.default.createElement(_bi.BiReset, null))), /*#__PURE__*/_react.default.createElement(List, null, /*#__PURE__*/_react.default.createElement(InputWrapper, null, /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      label: "font color",
+      name: "styles.fontColor",
+      borderRadius: "10",
+      inputPlaceHolder: "ex: red"
+    })), /*#__PURE__*/_react.default.createElement(InputWrapper, null, /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      label: "server font color",
+      name: "styles.serverFontColor",
+      borderRadius: "10",
+      inputPlaceHolder: "Server Font Color"
+    })), /*#__PURE__*/_react.default.createElement(InputWrapper, null, /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      label: "font size",
+      name: "styles.fontSize",
+      inputPlaceHolder: "Font Size",
+      borderRadius: "10"
+    })), /*#__PURE__*/_react.default.createElement(InputWrapper, null, /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      label: "server font size",
+      name: "styles.serverFontSize",
+      inputPlaceHolder: "Server Font Size",
+      borderRadius: "10"
+    })), /*#__PURE__*/_react.default.createElement(InputWrapper, null, /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      label: "Border radius",
+      name: "styles.borderRadius",
+      inputPlaceHolder: "Border Radius",
+      borderRadius: "10"
+    })), /*#__PURE__*/_react.default.createElement(InputWrapper, null, /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      label: "Dark background",
+      name: "styles.darkenServer",
+      inputPlaceHolder: "Enter number between 0 and 1",
+      borderRadius: "10"
+    })))), /*#__PURE__*/_react.default.createElement(InputWrapper, null, /*#__PURE__*/_react.default.createElement(_formik.Field, {
+      component: _DatePicker.default,
+      name: "DatePicker",
+      className: "form-control",
+      startDate: values.startDate,
+      endDate: values.endDate,
+      startDateError: errors.startDate,
+      endDateError: errors.endDate,
+      datesChanged: function datesChanged(startDate, endDate) {
+        setFieldValue('startDate', startDate);
+        setFieldValue('endDate', endDate);
+      }
+    })), /*#__PURE__*/_react.default.createElement(InputWrapper, null, /*#__PURE__*/_react.default.createElement(_CustomSelect.default, {
+      label: "options",
+      options: options,
+      name: "select"
+    })), /*#__PURE__*/_react.default.createElement(InputWrapper, null, /*#__PURE__*/_react.default.createElement(_CheckboxGroup.default, {
+      label: "Checkbox Group",
+      formLabelColor: "white",
+      formLabelFontSize: "20",
+      labelColor: "white",
+      name: "acceptTerms",
+      options: checkboxGroup,
+      flexGap: "30"
+    })), /*#__PURE__*/_react.default.createElement(InputWrapper, null, /*#__PURE__*/_react.default.createElement(_CustomTextarea.default, {
+      name: "text",
+      label: "text"
+    })), /*#__PURE__*/_react.default.createElement(InputWrapper, null, /*#__PURE__*/_react.default.createElement(LabelWrapper, null, /*#__PURE__*/_react.default.createElement(Label, null, "Preview")), /*#__PURE__*/_react.default.createElement(Preview, {
+      theme: values.searchThemes,
+      fontColor: values.styles.fontColor,
+      fontSize: values.styles.fontSize
+    }, /*#__PURE__*/_react.default.createElement(FormHeader, null, values.userProfilePreview && /*#__PURE__*/_react.default.createElement(ProfileImgWrapper, null, /*#__PURE__*/_react.default.createElement(Img, {
+      src: values.userProfilePreview,
+      alt: ""
+    })), /*#__PURE__*/_react.default.createElement(SmallHeading, null, values.userName)), values.userName && /*#__PURE__*/_react.default.createElement(SmallHeading, null, "Welcome ", values.userName, "!"), values.serverPreview && /*#__PURE__*/_react.default.createElement(PreviewServer, {
+      logo: values.serverPreview,
+      serverFontColor: values.styles.serverFontColor,
+      serverFontSize: values.styles.serverFontSize,
+      borderRadius: values.styles.borderRadius,
+      darkenServer: values.styles.darkenServer
+    }, /*#__PURE__*/_react.default.createElement(SmallHeading, null, values.serverName)), values.preset && /*#__PURE__*/_react.default.createElement(PreviewPreset, null, values.preset.icon, values.preset.name))), /*#__PURE__*/_react.default.createElement(SubmitButton, {
+      type: "submit"
+    }, "Submit"));
+  }));
+}; // Global Styles
+
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    padding: 20px;\n    font-family: sans-serif;\n"])));
+
+var Heading = _styledComponents.default.h1(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    text-transform: capitalize;\n    font-size: 25px;\n    font-weight: 600;\n"]))); // Components Style
+
+
+var FormHeader = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n"])));
+
+var ProfileImgWrapper = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    width: 90px;\n    height: 90px;\n    border-radius: 100%;\n    border: 1px solid #747474;\n"])));
+
+var Img = _styledComponents.default.img(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n    height: 100%;\n    border-radius: inherit;\n    object-fit: cover;\n    object-position: center;\n"])));
+
+var ServerLogoWrapper = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    border: 1px dotted gray;\n    width: 100%;\n    height: 150px;\n"])));
+
+var List = _styledComponents.default.ul(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    grid-gap: 20px;\n    justify-content: center;\n    list-style: none;\n\n    \n"])));
+
+var PresetItem = _styledComponents.default.li(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n    border: 1px solid gray;\n    background-color: ", ";\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    color: ", ";\n    text-transform: uppercase;\n    padding: 30px;\n    cursor: pointer;\n    transition: all .2s;\n    &:hover{\n        background-color: gray;\n        color: white;\n        svg{\n            fill: white;\n        }\n    }\n    svg{\n        width: 30px;\n        height: 30px;\n        margin-bottom: 10px;\n        fill: ", ";\n    }\n"])), function (props) {
+  return props.isActive ? 'gray' : 'white';
+}, function (props) {
+  return props.isActive ? 'white' : 'gray';
+}, function (props) {
+  return props.isActive ? 'white' : 'gray';
+});
+
+var ThemeItem = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n    padding: 30px;\n    background-color: ", ";\n    cursor: pointer;\n    display: flex;\n    justify-content: center;\n    color: white;\n    text-transform: uppercase;\n    border: ", ";\n    &:hover{\n        border: 1px solid black;\n    }\n"])), function (props) {
+  return props.color;
+}, function (props) {
+  return props.isActive ? '1px solid black' : 'none';
+}); // Form Styles
+
+
+var CreateForm = (0, _styledComponents.default)(_formik.Form)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    flex-direction: column;\n"])));
+
+var InputWrapper = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n    margin-top: 30px;\n"])));
+
+var LabelWrapper = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n"])));
+
+var Label = _styledComponents.default.label(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n    color: #414141;\n"])));
+
+var ResetIcon = _styledComponents.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n    svg{\n        fill: #6d6d6d;\n        width: 20px;\n        height: 20px;\n        cursor: pointer;\n        &:hover{\n            fill: black;\n        }\n    }\n"])));
+
+var SubmitButton = _styledComponents.default.button(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n    border: 1px solid gray;\n    background-color: transparent;\n    padding: 10px 30px;\n    cursor: pointer;\n    align-self: flex-end;\n    font-size: 20px;\n    margin-top: 10px;\n    color: gray;\n    &:hover{\n        background-color: gray;\n        color: white;\n    }\n"]))); // Preview Styles
+
+
+var Preview = _styledComponents.default.div(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n    background-color: ", ";\n    border: 1px solid black;\n    padding: 20px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    color: ", ";\n    font-size: ", "px;\n    & > *:not(:first-child){\n        margin-top: 20px;\n    }\n"])), function (props) {
+  return props.theme;
+}, function (props) {
+  return props.fontColor || 'black';
+}, function (props) {
+  return props.fontSize || 20;
+});
+
+var SmallHeading = _styledComponents.default.h3(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n    font-family: 'sans-serif';\n    text-transform: capitalize;\n    font-weight: 400;\n"])));
+
+var PreviewServer = _styledComponents.default.div(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n    height: 400px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background-image: ", ";\n    background-size: cover;\n    background-position: center;\n    font-size: ", "px;\n    text-transform: uppercase;\n    color: ", ";\n    border-radius: ", "px;\n"])), function (props) {
+  return "linear-gradient( rgba(0, 0, 0, ".concat(props.darkenServer || '0', "), rgba(0, 0, 0, ").concat(props.darkenServer || '0', ") ), url('").concat(props.logo, "')");
+}, function (props) {
+  return props.serverFontSize || 30;
+}, function (props) {
+  return props.serverFontColor || 'white';
+}, function (props) {
+  return props.borderRadius;
+});
+
+var PreviewPreset = (0, _styledComponents.default)(PresetItem)(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n    max-width: 500px;\n    background-color: gray;\n    color: white;\n    cursor: default;\n    svg{\n        fill: white;\n    }\n"])));
+var _default = CreateProfile;
+exports.default = _default;

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

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