@mohamed-karawia/library 0.1.0

package/dist/stories/Common Inputs/DropZone.js

@@ -0,0 +1,148 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createSuper"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactDropzoneComponent = _interopRequireDefault(require("react-dropzone-component"));
+
+require("dropzone/dist/min/dropzone.min.css");
+
+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 ReactDOMServer = require("react-dom/server");
+
+var dropzoneComponentConfig = {
+  acceptedFiles: "image/png,image/jpg,image/jpeg",
+  showFiletypeIcon: true
+};
+var dropzoneConfig = {
+  acceptedFile: "image/png,image/jpg,image/jpeg",
+  thumbnailHeight: 160,
+  maxFiles: 1,
+  dictDefaultMessage: "Upload your logo here",
+  previewTemplate: ReactDOMServer.renderToStaticMarkup( /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "space-around",
+      alignItems: "center"
+    },
+    className: "dz-preview dz-file-preview mb-3"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "d-flex flex-row "
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "p-0 w-30 position-relative"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "dz-success-mark"
+  }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement("i", null))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "preview-container"
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    "data-dz-thumbnail": true,
+    className: "img-thumbnail border-0"
+  }), /*#__PURE__*/_react.default.createElement("i", {
+    className: "simple-icon-doc preview-icon"
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "pl-3 pt-2 pr-2 pb-1 w-70 dz-details position-relative"
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("span", {
+    "data-dz-name": true
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "text-primary text-extra-small",
+    "data-dz-size": true
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "dz-progress"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "dz-upload",
+    "data-dz-uploadprogress": true
+  })))), /*#__PURE__*/_react.default.createElement("a", {
+    href: "#/",
+    className: "remove",
+    "data-dz-remove": true
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "glyph-icon simple-icon-trash"
+  })))),
+  headers: {
+    "My-Awesome-Header": "header value"
+  },
+  addRemoveLinks: true,
+  uploadMultiple: false
+};
+
+var DropzoneExample = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(DropzoneExample, _Component);
+
+  var _super = (0, _createSuper2.default)(DropzoneExample);
+
+  function DropzoneExample() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, DropzoneExample);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+    _this.eventHandlers = {
+      drop: function drop() {},
+      error: function error(_error) {
+        return "";
+      },
+      addedfile: function () {
+        var _addedfile = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(file) {
+          return _regenerator.default.wrap(function _callee$(_context) {
+            while (1) {
+              switch (_context.prev = _context.next) {
+                case 0:
+                case "end":
+                  return _context.stop();
+              }
+            }
+          }, _callee);
+        }));
+
+        function addedfile(_x) {
+          return _addedfile.apply(this, arguments);
+        }
+
+        return addedfile;
+      }()
+    };
+    return _this;
+  }
+
+  (0, _createClass2.default)(DropzoneExample, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react.default.createElement(_reactDropzoneComponent.default, {
+        config: dropzoneComponentConfig,
+        djsConfig: dropzoneConfig,
+        action: "post.php",
+        eventHandlers: this.eventHandlers
+      });
+    }
+  }]);
+  return DropzoneExample;
+}(_react.Component);
+
+var _default = DropzoneExample;
+exports.default = _default;

package/dist/stories/Common Inputs/EditorComponent/EditorComponent.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 _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _reactEditorJs = _interopRequireDefault(require("react-editor-js"));
+
+var _constants = require("./constants");
+
+var _templateObject;
+
+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 EditorComponent = function EditorComponent(props) {
+  var _instanceRef = (0, _react.useRef)(null);
+
+  function handleSave() {
+    return _handleSave.apply(this, arguments);
+  }
+
+  function _handleSave() {
+    _handleSave = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+      var savedData;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return _instanceRef.current.save();
+
+            case 2:
+              savedData = _context.sent;
+              console.log(savedData);
+
+            case 4:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+    return _handleSave.apply(this, arguments);
+  }
+
+  return /*#__PURE__*/_react.default.createElement(Container, props, /*#__PURE__*/_react.default.createElement(_reactEditorJs.default, {
+    instanceRef: function instanceRef(instance) {
+      return _instanceRef.current = instance;
+    },
+    tools: _constants.EDITOR_JS_TOOLS,
+    data: props.data
+  }));
+};
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    background-position: center;\n    background-size: cover;\n    background-repeat: no-repeat;\n    font-family: ", ";\n    background-color: ", ";\n    background-image: url('", "');\n    color: ", ";\n    padding: ", "px;\n"])), function (props) {
+  return props.fontFamily || 'inherit';
+}, function (props) {
+  return props.backgroundColor || 'inherit';
+}, function (props) {
+  return props.backgroundImage;
+}, function (props) {
+  return props.fontColor;
+}, function (props) {
+  return props.padding;
+});
+
+EditorComponent.defaultProps = {};
+var _default = EditorComponent;
+exports.default = _default;

package/dist/stories/Common Inputs/EditorComponent/EditorComponent.stories.js

@@ -0,0 +1,62 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Editor = exports.default = void 0;
+
+var _EditorComponent = _interopRequireDefault(require("./EditorComponent"));
+
+var _BaseMaterial = _interopRequireDefault(require("../../Containers/BaseMaterial"));
+
+var _default = {
+  title: 'Common Inputs/EditorComponent',
+  component: _EditorComponent.default
+};
+exports.default = _default;
+var data = {
+  blocks: [{
+    type: "header",
+    data: {
+      text: "Editor.js",
+      level: 1
+    }
+  }, {
+    type: "paragraph",
+    data: {
+      text: "Hey. Meet the new Editor. On this page you can see it in action — try to edit this text."
+    }
+  }, {
+    type: 'image',
+    "data": {
+      "file": {
+        "url": "https://i.ytimg.com/vi/MPV2METPeJU/maxresdefault.jpg"
+      },
+      "caption": "Caption Example",
+      "withBorder": false,
+      "withBackground": false,
+      "stretched": false
+    }
+  }, {
+    "type": "paragraph",
+    "data": {
+      "text": "Create a directory for your module, enter it and run <mark class=\"cdx-marker\">npm init</mark> command."
+    }
+  }, {
+    "type": "table",
+    "data": {
+      "withHeadings": true,
+      "content": [["Kine", "Pigs", "Chicken"], ["1 pcs", "3 pcs", "12 pcs"], ["100$", "200$", "150$"]]
+    }
+  }]
+};
+
+var Editor = function Editor(args) {
+  return /*#__PURE__*/React.createElement(_BaseMaterial.default, null, /*#__PURE__*/React.createElement(_EditorComponent.default, Object.assign({
+    data: data
+  }, args)));
+};
+
+exports.Editor = Editor;

package/dist/stories/Common Inputs/EditorComponent/constants.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EDITOR_JS_TOOLS = void 0;
+
+var _image = _interopRequireDefault(require("@editorjs/image"));
+
+var _header = _interopRequireDefault(require("@editorjs/header"));
+
+var _marker = _interopRequireDefault(require("@editorjs/marker"));
+
+var _table = _interopRequireDefault(require("@editorjs/table"));
+
+var EDITOR_JS_TOOLS = {
+  marker: {
+    class: _marker.default,
+    shortcut: 'SHIFT+M'
+  },
+  header: {
+    class: _header.default,
+    levels: [2, 3, 4],
+    defaultLevel: 2
+  },
+  image: {
+    class: _image.default,
+    config: {
+      endpoints: {
+        byFile: 'http://localhost:6006/',
+        // Your backend file uploader endpoint
+        byUrl: 'http://localhost:6006/' // Your endpoint that provides uploading by Url
+
+      }
+    }
+  },
+  table: _table.default
+};
+exports.EDITOR_JS_TOOLS = EDITOR_JS_TOOLS;

package/dist/stories/Common Inputs/Formik/InputField/InputField.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 _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _formik = require("formik");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject;
+
+var InputField = function InputField(_ref) {
+  var props = Object.assign({}, _ref);
+
+  var _useField = (0, _formik.useField)(props),
+      _useField2 = (0, _slicedToArray2.default)(_useField, 1),
+      field = _useField2[0];
+
+  return /*#__PURE__*/_react.default.createElement(StyledInput, Object.assign({}, field, props));
+};
+
+var StyledInput = _styledComponents.default.input(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0.65rem 0.5rem;\n  font-size: 1rem;\n  border: 2px solid #2e2e2e;\n  color: #2e2e2e;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  width: 100%;\n  box-sizing: border-box;\n"])));
+
+var _default = InputField;
+exports.default = _default;

package/dist/stories/Common Inputs/Formik/InputField/InputField.stories.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TextInput = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _InputField = _interopRequireDefault(require("./InputField"));
+
+var _storybookFormik = _interopRequireDefault(require("storybook-formik"));
+
+var _default = {
+  component: _InputField.default,
+  title: 'Common Inputs/Formik/InputField',
+  decorators: [_storybookFormik.default]
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react.default.createElement(_InputField.default, args);
+};
+
+var TextInput = Template.bind({});
+exports.TextInput = TextInput;
+TextInput.args = {
+  name: 'username',
+  type: 'text',
+  placeholder: 'username'
+};
+TextInput.parameters = {
+  formik: {
+    initialValues: {
+      username: ''
+    }
+  },
+  onSubmit: function onSubmit(v) {
+    return console.log(v);
+  }
+};

package/dist/stories/Common Inputs/Formik/RadioField/RadioField.js

@@ -0,0 +1,54 @@
+"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 _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _formik = require("formik");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject, _templateObject2, _templateObject3;
+
+var _excluded = ["children"];
+
+var RadioField = function RadioField(_ref) {
+  var children = _ref.children,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var _useField = (0, _formik.useField)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+    type: "radio"
+  })),
+      _useField2 = (0, _slicedToArray2.default)(_useField, 1),
+      field = _useField2[0];
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(StyledRadioLabel, {
+    adjustHeight: field.name === 'themeSelected'
+  }, /*#__PURE__*/_react.default.createElement(StyledRadioInput, Object.assign({}, field, props, {
+    type: "radio"
+  })), /*#__PURE__*/_react.default.createElement("span", null, children), /*#__PURE__*/_react.default.createElement(Fill, null)));
+};
+
+var StyledRadioLabel = _styledComponents.default.label(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    cursor: pointer;\n    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),\n        0 2px 4px -1px rgba(0, 0, 0, 0.06);\n    height: ", ";\n    width:100%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    position:relative;\n    span {\n        font-family:  Helvetica, Arial, sans-serif;\n        font-size: .9rem;\n        color: #fff;\n    }\n"])), function (props) {
+  return props.adjustHeight ? '80px' : '50px';
+});
+
+var Fill = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    top: 0;\n    left: 0;\n    z-index: -1;\n    background-color: #2e2e2e;\n"])));
+
+var StyledRadioInput = _styledComponents.default.input(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    display: none;\n    &:checked ~ ", " {\n        background-color: #315a39;\n    }\n"])), Fill);
+
+var _default = RadioField;
+exports.default = _default;

package/dist/stories/Common Inputs/Formik/RadioField/RadioField.stories.js

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Theme = exports.Preset = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _RadioField = _interopRequireDefault(require("./RadioField"));
+
+var _storybookFormik = _interopRequireDefault(require("storybook-formik"));
+
+var _default = {
+  component: _RadioField.default,
+  title: 'Common Inputs/Formik/RadioField',
+  decorators: [_storybookFormik.default]
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react.default.createElement(_RadioField.default, args);
+};
+
+var Preset = Template.bind({});
+exports.Preset = Preset;
+Preset.args = {
+  name: 'preset',
+  value: 'Preset 1',
+  children: 'Preset 1'
+};
+Preset.parameters = {
+  formik: {
+    initialValues: {
+      preset: ''
+    }
+  },
+  onSubmit: function onSubmit(v) {
+    return console.log(v);
+  }
+};
+var Theme = Template.bind({});
+exports.Theme = Theme;
+Theme.args = {
+  name: 'themeSelected',
+  value: 'Theme 1',
+  children: 'Theme 1'
+};
+Theme.parameters = {
+  formik: {
+    initialValues: {
+      theme: ''
+    }
+  },
+  onSubmit: function onSubmit(v) {
+    return console.log(v);
+  }
+};

package/dist/stories/Common Inputs/RadioInput/RadioInput.js

@@ -0,0 +1,115 @@
+"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 _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+
+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 RadioInput = function RadioInput(_ref) {
+  var _ref$list = _ref.list,
+      list = _ref$list === void 0 ? [{
+    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'
+  }] : _ref$list,
+      title = _ref.title,
+      _ref$margin = _ref.margin,
+      margin = _ref$margin === void 0 ? 2 : _ref$margin,
+      _ref$borderColor = _ref.borderColor,
+      borderColor = _ref$borderColor === void 0 ? '#000' : _ref$borderColor,
+      _ref$titleFontSize = _ref.titleFontSize,
+      titleFontSize = _ref$titleFontSize === void 0 ? 18 : _ref$titleFontSize,
+      _ref$descriptionFontS = _ref.descriptionFontSize,
+      descriptionFontSize = _ref$descriptionFontS === void 0 ? 14 : _ref$descriptionFontS,
+      _ref$onChange = _ref.onChange,
+      onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange;
+
+  var _useState = (0, _react.useState)(function () {
+    return list.map(function (item) {
+      item.selected = false;
+      return item;
+    });
+  }),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      RadioList = _useState2[0],
+      setRadioList = _useState2[1];
+
+  console.log('radioList:', RadioList);
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(RadioInputHead, null, title), /*#__PURE__*/_react.default.createElement(RadioBody, null, RadioList === null || RadioList === void 0 ? void 0 : RadioList.map(function (item, i) {
+    return /*#__PURE__*/_react.default.createElement(RadioElement, {
+      onClick: function onClick() {
+        var updatedRadioList = RadioList.map(function (item, index) {
+          if (index === i) {
+            item.selected = !item.selected;
+            return item;
+          } else {
+            item.selected = false;
+            return item;
+          }
+        });
+        console.log(updatedRadioList);
+        onChange(updatedRadioList[i]);
+        setRadioList(updatedRadioList);
+      },
+      selected: item.selected,
+      margin: margin,
+      borderColor: borderColor
+    }, /*#__PURE__*/_react.default.createElement(Image, {
+      src: item.imageURL,
+      selected: item.selected
+    }), /*#__PURE__*/_react.default.createElement(TextContainer, null, /*#__PURE__*/_react.default.createElement(Title, {
+      fontSize: titleFontSize
+    }, item.title), /*#__PURE__*/_react.default.createElement(Description, {
+      fontSize: descriptionFontSize
+    }, item.description)));
+  })));
+};
+
+var RadioInputHead = _styledComponents.default.h1(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)([""])));
+
+var RadioBody = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n"])));
+
+var Image = _styledComponents.default.img(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  height: 100px;\n  width: 100px;\n  opacity: ", ";\n"])), function (props) {
+  return props.selected && '0.8';
+});
+
+var Title = _styledComponents.default.label(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: ", "px;\n  font-weight: 500;\n"])), function (props) {
+  return props.fontSize;
+});
+
+var Description = _styledComponents.default.label(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: ", "px;\n"])), function (props) {
+  return props.fontSize;
+});
+
+var RadioElement = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  border-width: ", "px;\n  border-style: solid;\n  border-color: ", ";\n  margin-bottom: ", "%;\n"])), function (props) {
+  return props.selected ? '1' : '0';
+}, function (props) {
+  return props.borderColor;
+}, function (props) {
+  return props.margin;
+});
+
+var TextContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  margin-left: 5px;\n"])));
+
+var _default = RadioInput;
+exports.default = _default;