sag_components 1.0.921 → 1.0.923

package/dist/stories/components/Table/Table.js

@@ -0,0 +1,195 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Table = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Table = require("./Table.style");
+const Table = props => {
+  const {
+    tableKey,
+    data,
+    width,
+    height,
+    onCheckAllInput,
+    onSortClick,
+    onRowClick,
+    onRowInputClick,
+    onPaginationClick,
+    actionsColumn,
+    sizingTable,
+    showPagination,
+    rangePagination
+  } = props;
+  const [sortBy, setSortBy] = (0, _react.useState)(null);
+  const [sortOrder, setSortOrder] = (0, _react.useState)('asc');
+  const [resizing, setResizing] = (0, _react.useState)(false);
+  const [resizeColumn, setResizeColumn] = (0, _react.useState)(null);
+  const checkedRef = (0, _react.useRef)([]);
+  const [checkEvent, setCheckEvent] = (0, _react.useState)({
+    isSelectAll: false,
+    selected: [],
+    unselected: []
+  });
+  const [activePage, setActivePage] = (0, _react.useState)(1);
+  const [arrow, setArrow] = (0, _react.useState)(null);
+  const handleSort = (event, columnName) => {
+    if (!event.target.classList.contains('dragger')) {
+      setSortBy(columnName);
+      setSortOrder(prevSortOrder => prevSortOrder === 'asc' ? 'desc' : 'asc');
+      setArrow(prevArrow => prevArrow === '⭣' ? '⭡' : '⭣');
+      onSortClick({
+        sortType: sortOrder,
+        column: columnName,
+        data: sortedData
+      });
+    }
+  };
+
+  // the Server do the sorting so this function used for displaying Action data
+  const sortedData = [...data].sort((a, b) => {
+    if (sortOrder === 'asc') {
+      return a[sortBy] > b[sortBy] ? 1 : -1;
+    }
+    return a[sortBy] < b[sortBy] ? 1 : -1;
+  });
+  const handleSelectAllChange = event => {
+    setCheckEvent({
+      isSelectAll: event.target.checked,
+      selected: [],
+      unselected: []
+    });
+    checkedRef.current.map(item => {
+      item.checked = event.target.checked;
+    });
+  };
+  const m_pos = (0, _react.useRef)(null);
+  const handleMouseDown = (e, columnName) => {
+    m_pos.current = e.clientX;
+    setResizing(true);
+    setResizeColumn(columnName);
+  };
+  const handleMouseMove = e => {
+    if (resizing) {
+      const th = document.querySelector("th[data-column=\"".concat(resizeColumn, "\"]"));
+      const dx = e.clientX - m_pos.current;
+      m_pos.current = e.clientX;
+      th.style.width = "".concat(parseInt(getComputedStyle(th, '').width) + dx, "px");
+    }
+  };
+  const handleMouseUp = () => {
+    setResizing(false);
+    setResizeColumn(null);
+  };
+  const onRowClickHandler = (event, row) => {
+    if (event.target.type !== 'checkbox') {
+      onRowClick(row);
+    }
+  };
+  const handleCheckboxChange = (event, row) => {
+    if (event.target.checked) {
+      const updatedUnSelected = checkEvent.unselected.filter(item => item.key !== row.key);
+      setCheckEvent({
+        ...checkEvent,
+        unselected: updatedUnSelected,
+        selected: [...checkEvent.selected, row]
+      });
+    } else {
+      const updatedSelected = checkEvent.selected.filter(item => item.key !== row.key);
+      setCheckEvent({
+        ...checkEvent,
+        unselected: [...checkEvent.unselected, row],
+        selected: updatedSelected
+      });
+    }
+  };
+  const onPaginationClickHandler = (event, page) => {
+    setActivePage(page);
+    onPaginationClick(event, page);
+  };
+  (0, _react.useEffect)(() => {
+    onCheckAllInput(checkEvent);
+  }, [checkEvent]);
+  (0, _react.useEffect)(() => {
+    document.addEventListener('mousemove', handleMouseMove, false);
+    document.addEventListener('mouseup', handleMouseUp, false);
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove, false);
+      document.removeEventListener('mouseup', handleMouseUp, false);
+    };
+  }, [resizing]);
+  const pages = Array.from({
+    length: rangePagination
+  }, (_, index) => index + 1);
+  return /*#__PURE__*/_react.default.createElement(_Table.TableWrapper, {
+    key: tableKey
+  }, /*#__PURE__*/_react.default.createElement(_Table.TableTag, {
+    width: width,
+    height: height
+  }, /*#__PURE__*/_react.default.createElement(_Table.Thead, null, /*#__PURE__*/_react.default.createElement("tr", null, actionsColumn && /*#__PURE__*/_react.default.createElement("th", {
+    className: "actions-th"
+  }, /*#__PURE__*/_react.default.createElement("input", {
+    type: "checkbox",
+    onChange: handleSelectAllChange
+  })), Object.keys(data[0]).map(column => /*#__PURE__*/_react.default.createElement("th", {
+    key: column,
+    "data-column": column,
+    onClick: event => handleSort(event, column)
+  }, /*#__PURE__*/_react.default.createElement("span", null, column), sortBy === column && /*#__PURE__*/_react.default.createElement("span", {
+    dangerouslySetInnerHTML: {
+      __html: arrow
+    }
+  }), sizingTable && /*#__PURE__*/_react.default.createElement(_Table.Dragger, {
+    className: "dragger",
+    onMouseDown: e => handleMouseDown(e, column)
+  }))))), /*#__PURE__*/_react.default.createElement(_Table.Tbody, null, data.map(row => /*#__PURE__*/_react.default.createElement("tr", {
+    key: row.key,
+    onClick: event => onRowClickHandler(event, row)
+  }, actionsColumn && /*#__PURE__*/_react.default.createElement("td", null, /*#__PURE__*/_react.default.createElement("input", {
+    ref: el => checkedRef.current[row.key] = el,
+    type: "checkbox",
+    onChange: event => handleCheckboxChange(event, row)
+  })), Object.keys(row).map(column => /*#__PURE__*/_react.default.createElement("td", {
+    key: column
+  }, row[column])))))), showPagination && /*#__PURE__*/_react.default.createElement(_Table.Pagination, null, /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_Table.PaginationButton, {
+    className: "double-arrow",
+    onClick: event => onPaginationClickHandler(event, 1)
+  }, "\xAB")), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_Table.PaginationButton, {
+    className: "single-arrow",
+    onClick: event => onPaginationClickHandler(event, activePage - 1)
+  }, "\u2039")), pages.map(page => /*#__PURE__*/_react.default.createElement("li", {
+    key: page
+  }, /*#__PURE__*/_react.default.createElement(_Table.PaginationButton, {
+    className: page === activePage ? 'active' : '',
+    onClick: event => onPaginationClickHandler(event, page)
+  }, page))), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_Table.PaginationButton, {
+    className: "single-arrow",
+    onClick: event => onPaginationClickHandler(event, activePage + 1)
+  }, "\u203A")), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_Table.PaginationButton, {
+    className: "double-arrow",
+    onClick: event => onPaginationClickHandler(event, pages.length)
+  }, "\xBB"))));
+};
+exports.Table = Table;
+var _default = exports.default = Table;
+Table.defaultProps = {
+  tableKey: '1',
+  data: [{
+    key: '',
+    name: '',
+    age: 2
+  }],
+  width: '100%',
+  height: 'auto',
+  onCheckAllInput: () => {},
+  onSortClick: () => {},
+  onRowClick: () => {},
+  onRowInputClick: () => {},
+  onPaginationClick: () => {},
+  showPagination: true,
+  sizingTable: true,
+  actionsColumn: true,
+  rangePagination: 5
+};

package/dist/stories/components/Table/Table.stories.js

@@ -0,0 +1,104 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.MainTable = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Table = require("./Table");
+const theData = [{
+  key: '1',
+  name: 'oren',
+  age: 35
+}, {
+  key: '2',
+  name: 'dror',
+  age: 16
+}, {
+  key: '3',
+  name: 'andrey',
+  age: 22
+}, {
+  key: '4',
+  name: 'hai',
+  age: 46
+}];
+var _default = exports.default = {
+  title: 'Sag Campaign Tool/Table',
+  component: _Table.Table,
+  tags: ['autodocs'],
+  argTypes: {
+    width: {
+      name: 'Width',
+      control: {
+        type: 'text'
+      },
+      description: 'Table width'
+    },
+    height: {
+      name: 'Height',
+      control: {
+        type: 'text'
+      },
+      description: 'Table height'
+    },
+    onCheckAllInput: {
+      name: 'Check all input event',
+      action: 'onClick',
+      description: 'Click on check all'
+    },
+    onSortClick: {
+      name: 'Table head sorting event',
+      action: 'onClick',
+      description: 'Click on table head sorting'
+    },
+    onRowClick: {
+      name: 'Click on row event',
+      action: 'onClick',
+      description: 'Click on a certain row in table'
+    },
+    onRowInputClick: {
+      name: 'Checkbox row event',
+      action: 'onClick',
+      description: 'Click on a certain row checkbox '
+    },
+    actionsColumn: {
+      name: 'Show action column',
+      control: {
+        type: 'boolean'
+      },
+      description: 'show/hide action column',
+      defaultValue: true
+    },
+    sizingTable: {
+      name: 'Sizing table columns',
+      control: {
+        type: 'boolean'
+      },
+      description: 'Sizing table columns ability',
+      defaultValue: true
+    },
+    showPagination: {
+      name: 'Show Pagination',
+      control: {
+        type: 'boolean'
+      },
+      description: 'hide/show pagination',
+      defaultValue: true
+    },
+    rangePagination: {
+      name: 'Range Pagination',
+      control: {
+        type: 'number'
+      },
+      description: 'How many button representing pages will shown in the range'
+    }
+  }
+};
+const MainTable = exports.MainTable = {
+  args: {
+    data: theData,
+    rangePagination: 5
+  }
+};

package/dist/stories/components/Table/Table.style.js

@@ -0,0 +1,17 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Thead = exports.Tbody = exports.TableWrapper = exports.TableTag = exports.PaginationButton = exports.Pagination = exports.Dragger = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+const TableWrapper = exports.TableWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  font-family: \"Poppins\", sans-serif;\n  background-color: white;\n"])));
+const TableTag = exports.TableTag = _styledComponents.default.table(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  border-collapse: collapse;\n  table-layout: fixed;\n  width: ", ";\n  height: ", ";\n  margin-bottom: 15px;\n    th,\n    td {\n        position: relative;\n        font-weight: 400;\n        border: 1px solid #ddd;\n        padding: 8px;\n    }\n"])), props => props.width, props => props.height);
+const Thead = exports.Thead = _styledComponents.default.thead(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    color: white;\n    background-color: #000000;\n    tr {\n        > th {\n            position: relative;\n            &.actions-th,\n            &:last-of-type {\n                > div {\n                    display: none;\n                }\n            }\n            \n            &.actions-th {\n                width: 22px;\n            }\n        }\n    }\n"])));
+const Tbody = exports.Tbody = _styledComponents.default.tbody(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    tr {\n        &:nth-child(even) {\n            background-color: #f2f2f2;\n        }\n        &:hover {\n            background-color: #ddd;\n        }\n    }\n"])));
+const Dragger = exports.Dragger = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    width: 5px;\n    height: 100%;\n    position: absolute;\n    top: 0;\n    right: 0;\n    cursor: col-resize;\n"])));
+const Pagination = exports.Pagination = _styledComponents.default.ul(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    list-style: none;\n    padding: 0;\n    margin: 0;\n    gap: 5px;\n"])));
+const PaginationButton = exports.PaginationButton = _styledComponents.default.button(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n    display: inline-block;\n    padding: 8px 12px;\n    background-color: #ffffff;\n    border: 1px solid #ccc;\n    text-decoration: none;\n    color: #333;\n    border-radius: 4px;\n    cursor: pointer;\n    &:hover, &:focus {\n      background-color: #e0e0e0;\n    }\n    &.active {\n        background-color: #aaa;\n    }\n"])));

package/dist/stories/components/TextField/TextField.js

@@ -0,0 +1,209 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TextField = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+var _OutlinedInput = _interopRequireDefault(require("@mui/material/OutlinedInput"));
+var _InputLabel = _interopRequireDefault(require("@mui/material/InputLabel"));
+var _InputAdornment = _interopRequireDefault(require("@mui/material/InputAdornment"));
+var _FormControl = _interopRequireDefault(require("@mui/material/FormControl"));
+var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
+var _Visibility = _interopRequireDefault(require("@mui/icons-material/Visibility"));
+var _VisibilityOff = _interopRequireDefault(require("@mui/icons-material/VisibilityOff"));
+var _styles = require("@mui/material/styles");
+var _TextField2 = require("./TextField.style");
+/**
+ *  SAG TextField
+ */
+const TextField = exports.TextField = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    width = '100%',
+    height = '49px',
+    label,
+    focusColor,
+    shape,
+    size,
+    placeHolder = 'Enter your email address',
+    passwordField = false,
+    defaultValue,
+    resetDefaultValue,
+    required,
+    inputRef,
+    allowedInput = 'all',
+    onChange,
+    multiline = false
+  } = _ref;
+  const [currentInputValue, setCurrentInputValue] = (0, _react.useState)(null);
+  const [showPassword, setShowPassword] = _react.default.useState(false);
+  const handleClickShowPassword = () => setShowPassword(show => !show);
+  const onChangeHandler = event => {
+    onChange(event);
+    setCurrentInputValue({
+      event,
+      value: event.target.value
+    });
+  };
+  const theme = (0, _styles.createTheme)({
+    components: {
+      MuiFormLabel: {
+        styleOverrides: {
+          asterisk: {
+            color: '#db3131'
+          }
+        }
+      }
+    }
+  });
+  const handleMouseDownPassword = event => {
+    event.preventDefault();
+  };
+
+  // defines shape: squire or round
+  const getTextFieldStyle = () => {
+    if (shape === 'round') {
+      return {
+        '& .MuiOutlinedInput-root': {
+          width: {
+            width
+          },
+          height: {
+            height
+          },
+          paddingTop: multiline ? '12px' : '0',
+          marginTop: 0,
+          borderColor: 'green',
+          borderRadius: '12px',
+          legend: {
+            marginLeft: '6px'
+          },
+          alignItems: multiline ? 'flex-start' : 'center',
+          '&.Mui-focused fieldset': {
+            borderColor: focusColor
+          }
+        },
+        '& label.Mui-focused': {
+          color: focusColor
+        },
+        '& .MuiAutocomplete-inputRoot': {
+          paddingLeft: '10px !important',
+          borderRadius: '12px'
+        },
+        '& .MuiInputLabel-outlined': {
+          paddingLeft: '10px',
+          // color: focusColor,
+          paddingTop: '4px'
+        },
+        '& .MuiInputLabel-shrink': {
+          marginLeft: '1px',
+          paddingLeft: '4px',
+          paddingRight: 0,
+          background: 'white',
+          paddingTop: 0
+        },
+        '& .MuiInputLabel-root': {
+          fontFamily: 'Poppins'
+        },
+        '& .MuiInputBase-inputSizeSmall': {
+          fontFamily: 'Poppins'
+        }
+      };
+    }
+    // square
+    return null;
+  };
+  const isInputAllowed = inputChar => {
+    const NUMERIC_REGEX = /^[0-9-]+$/;
+    const ALPHA_REGEX = /^[a-zA-Z]+$/;
+    const ALPHA_NUMERIC_REGEX = /^[a-zA-Z0-9-]+$/;
+    switch (allowedInput) {
+      case 'all':
+        return true;
+      case 'alpha':
+        if (ALPHA_REGEX.test(inputChar)) return true;
+        return false;
+      case 'numeric':
+        if (NUMERIC_REGEX.test(inputChar)) return true;
+        return false;
+      case 'alphaNumeric':
+        if (ALPHA_NUMERIC_REGEX.test(inputChar)) return true;
+        return false;
+      default:
+        return true;
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_TextField2.TextFieldContainer, {
+    id: "TextFieldContainer",
+    width: width
+  }, /*#__PURE__*/_react.default.createElement(_styles.ThemeProvider, {
+    theme: theme
+  }, /*#__PURE__*/_react.default.createElement(_Box.default, null, !passwordField && /*#__PURE__*/_react.default.createElement(_TextField.default, {
+    key: resetDefaultValue,
+    label: label,
+    multiline: multiline,
+    defaultValue: defaultValue,
+    placeholder: placeHolder,
+    id: "outlined-start-adornment",
+    sx: getTextFieldStyle(),
+    size: size,
+    required: required,
+    inputRef: inputRef !== null && inputRef !== void 0 ? inputRef : null,
+    ref: ref !== null && ref !== void 0 ? ref : null,
+    onKeyDown: event => {
+      if (!isInputAllowed(event.key)) {
+        event.preventDefault();
+      }
+    },
+    onChange: event => {
+      onChangeHandler(event);
+    },
+    InputProps: {
+      textalign: 'flex-start',
+      alignitems: 'flex-start',
+      aligncontent: 'flex-start',
+      disableunderline: true.toString(),
+      style: {
+        textalign: 'start',
+        '&::placeholder': {
+          color: '#B1B1B1'
+        }
+      }
+    }
+  }), passwordField && /*#__PURE__*/_react.default.createElement(_FormControl.default, {
+    sx: getTextFieldStyle(),
+    variant: "outlined"
+  }, /*#__PURE__*/_react.default.createElement(_InputLabel.default, {
+    htmlFor: "outlined-adornment-password"
+  }, label), /*#__PURE__*/_react.default.createElement(_OutlinedInput.default, {
+    id: "outlined-adornment-password",
+    type: showPassword ? 'text' : 'password',
+    size: size,
+    endAdornment: /*#__PURE__*/_react.default.createElement(_InputAdornment.default, {
+      position: "end"
+    }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+      "aria-label": "toggle password visibility",
+      onClick: handleClickShowPassword,
+      onMouseDown: handleMouseDownPassword,
+      edge: "end"
+    }, showPassword ? /*#__PURE__*/_react.default.createElement(_Visibility.default, null) : /*#__PURE__*/_react.default.createElement(_VisibilityOff.default, null))),
+    defaultValue: defaultValue,
+    label: label,
+    multiline: multiline,
+    inputRef: inputRef !== null && inputRef !== void 0 ? inputRef : null,
+    ref: ref !== null && ref !== void 0 ? ref : null,
+    onKeyDown: event => {
+      if (!isInputAllowed(event.key)) {
+        event.preventDefault();
+      }
+    },
+    onChange: event => {
+      onChangeHandler(event);
+    }
+  })))));
+});
+var _default = exports.default = TextField;

package/dist/stories/components/TextField/TextField.stories.js

@@ -0,0 +1,162 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.RegularField = exports.Password = exports.DefaultValue = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _TextField = require("./TextField");
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+var _default = exports.default = {
+  title: 'SAG Core/TextField',
+  component: _TextField.TextField,
+  tags: ['autodocs'],
+  argTypes: {
+    width: {
+      name: 'width',
+      control: {
+        type: 'text'
+      },
+      description: 'width of the input field'
+    },
+    height: {
+      name: 'height',
+      control: {
+        type: 'text'
+      },
+      description: 'height of the input field'
+    },
+    label: {
+      name: 'label',
+      control: {
+        type: 'text'
+      },
+      description: 'notify the user how to type a text',
+      defaultValue: 'Type...'
+    },
+    focusColor: {
+      name: 'focusColor',
+      control: {
+        type: 'color'
+      },
+      defaultValue: 'blue'
+    },
+    placeHolder: {
+      name: 'placeHolder',
+      control: {
+        type: 'text'
+      },
+      description: 'place holder of the input field'
+    },
+    shape: {
+      control: {
+        type: 'radio'
+      },
+      options: ['round', 'square'],
+      description: 'shape: round/square'
+    },
+    size: {
+      control: {
+        type: 'radio'
+      },
+      options: ['small', 'large'],
+      description: 'size: small/large'
+    },
+    passwordField: {
+      name: 'passwordField',
+      control: {
+        type: 'boolean'
+      },
+      description: 'defines if this field is for input password '
+    },
+    required: {
+      name: 'required',
+      control: {
+        type: 'boolean'
+      },
+      description: 'defines if this field is required'
+    },
+    defaultValue: {
+      name: 'defaultValue',
+      control: {
+        type: 'text'
+      },
+      description: 'sets default value',
+      defaultValue: 'Type...'
+    },
+    resetDefaultValue: {
+      name: 'resetDefaultValue',
+      control: {
+        type: 'boolean'
+      },
+      description: 'change this to reset default value'
+    },
+    allowedInput: {
+      name: 'allowedInput',
+      control: {
+        type: 'radio'
+      },
+      options: ['alpha', 'numeric', 'alphaNumeric', 'all'],
+      description: 'allowed input characters: numbers, alphabet ot both'
+    },
+    onChange: {
+      action: 'onChange',
+      description: 'returns an option (object) selected by the user'
+    },
+    onInputChange: {
+      action: 'onInputChange',
+      description: 'returns a value (string) displayed in the textbox'
+    },
+    multiline: {
+      name: 'multiline',
+      control: {
+        type: 'boolean'
+      },
+      description: 'enable multiline'
+    }
+  }
+};
+const RegularField = exports.RegularField = {
+  args: {
+    width: '100%',
+    height: '100%',
+    defaultValue: undefined,
+    label: 'Email',
+    placeHolder: 'Enter your email address',
+    shape: 'round',
+    size: 'small',
+    passwordField: false,
+    required: false,
+    allowedInput: 'all',
+    multiline: true
+  }
+};
+const DefaultValue = exports.DefaultValue = {
+  args: {
+    width: '100%',
+    height: '100%',
+    defaultValue: '',
+    label: 'Email',
+    placeHolder: 'Enter your email address',
+    shape: 'round',
+    size: 'small',
+    passwordField: false,
+    required: false,
+    allowedInput: 'all'
+  }
+};
+const Password = exports.Password = {
+  args: {
+    width: '100%',
+    height: '100%',
+    defaultValue: '9999',
+    label: 'Password',
+    placeHolder: undefined,
+    shape: 'round',
+    size: 'small',
+    passwordField: true,
+    required: false,
+    allowedInput: 'alphaNumeric'
+  }
+};