@punch-in/buffet-modern-custom 3.3.11

package/build/esm/components/DateTime/index.js

@@ -0,0 +1,149 @@
+var _excluded = ["disabled", "name", "onChange", "value", "tabIndex", "step"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+/**
+ *
+ * DateTime
+ *
+ */
+
+import React, { useState, useEffect } from 'react';
+import moment from 'moment';
+import PropTypes from 'prop-types';
+import momentPropTypes from 'react-moment-proptypes';
+import { isEmpty, cloneDeep } from 'lodash';
+import { DatePicker, TimePicker } from '@punch-in/buffet-modern-core';
+import Wrapper from './Wrapper';
+var UNITS = ['hour', 'minute', 'second'];
+export var getTimeString = function getTimeString(time) {
+  if (!time) {
+    return '';
+  }
+  var currTime = time || moment();
+  var timeObj = getTimeObject(currTime);
+  var timeString = Object.keys(timeObj).map(function (key) {
+    return timeObj[key] < 10 ? "0".concat(timeObj[key]) : timeObj[key];
+  }).join(':');
+  return timeString;
+};
+export var getTimeObject = function getTimeObject(time) {
+  var timeObj = {};
+  UNITS.forEach(function (unit) {
+    timeObj[unit] = time.get(unit);
+  });
+  return timeObj;
+};
+function DateTime(_ref) {
+  var disabled = _ref.disabled,
+    name = _ref.name,
+    onChange = _ref.onChange,
+    value = _ref.value,
+    tabIndex = _ref.tabIndex,
+    step = _ref.step,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    timestamp = _useState2[0],
+    setTimestamp = _useState2[1];
+  var setData = function setData(time) {
+    var _time$split = time.split(':'),
+      _time$split2 = _slicedToArray(_time$split, 3),
+      hour = _time$split2[0],
+      minute = _time$split2[1],
+      second = _time$split2[2];
+    var timeObj = {
+      hour: hour,
+      minute: minute,
+      second: second
+    };
+    var currentDate = isEmpty(timestamp) ? moment() : cloneDeep(timestamp);
+    currentDate.set('hours', timeObj.hour);
+    currentDate.set('minute', timeObj.minute);
+    currentDate.set('second', timeObj.second);
+    setDate(currentDate);
+  };
+  var setDate = function setDate(date, time) {
+    // Clearing the date
+    if (date === null) {
+      setTimestamp(null);
+      onChange({
+        target: {
+          name: name,
+          type: 'datetime',
+          value: null
+        }
+      });
+      return;
+    }
+    var newDate = time || date;
+    date.set(getTimeObject(newDate));
+    date.toISOString();
+    date.format();
+    setTimestamp(date);
+    onChange({
+      target: {
+        name: name,
+        type: 'datetime',
+        value: date
+      }
+    });
+  };
+  useEffect(function () {
+    if (!!value && moment(value).isValid()) {
+      var newDate = value._isAMomentObject === true ? value : moment(value);
+      setTimestamp(newDate);
+    }
+  }, [value]);
+  return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(DatePicker, _extends({}, rest, {
+    name: "datetime",
+    disabled: disabled,
+    onChange: function onChange(_ref2) {
+      var target = _ref2.target;
+      setDate(target.value, timestamp);
+    },
+    tabIndex: tabIndex,
+    value: timestamp
+  })), /*#__PURE__*/React.createElement(TimePicker, {
+    name: "time",
+    disabled: disabled,
+    onChange: function onChange(_ref3) {
+      var target = _ref3.target;
+      setData(target.value);
+    },
+    seconds: false,
+    tabIndex: tabIndex,
+    value: getTimeString(timestamp) || '',
+    step: step
+  }));
+}
+DateTime.defaultProps = {
+  autoFocus: false,
+  disabled: false,
+  id: null,
+  onChange: function onChange() {},
+  placeholder: null,
+  tabIndex: '0',
+  value: null,
+  withDefaultValue: false,
+  step: 30
+};
+DateTime.propTypes = {
+  autoFocus: PropTypes.bool,
+  disabled: PropTypes.bool,
+  id: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  onChange: PropTypes.func,
+  placeholder: PropTypes.string,
+  step: PropTypes.number,
+  tabIndex: PropTypes.string,
+  value: PropTypes.oneOfType([momentPropTypes.momentObj, PropTypes.string, PropTypes.instanceOf(Date)]),
+  withDefaultValue: PropTypes.bool
+};
+export default DateTime;

package/build/esm/components/Header/index.js

@@ -0,0 +1,86 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+/**
+ *
+ * Header
+ *
+ */
+
+import React, { useEffect, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import { HeaderTitle, HeaderActions } from '@punch-in/buffet-modern-core';
+import { Header as Wrapper, LoadingBar } from '@punch-in/buffet-modern';
+function Header(_ref) {
+  var actions = _ref.actions,
+    content = _ref.content,
+    isLoading = _ref.isLoading,
+    stickable = _ref.stickable,
+    title = _ref.title;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isHeaderSticky = _useState2[0],
+    setHeaderSticky = _useState2[1];
+  var headerRef = useRef(null);
+  var label = title.label,
+    cta = title.cta;
+  var handleScroll = function handleScroll() {
+    if (headerRef.current) {
+      setHeaderSticky(headerRef.current.getBoundingClientRect().top <= 20);
+    }
+  };
+  useEffect(function () {
+    window.addEventListener('scroll', handleScroll);
+    return function () {
+      window.removeEventListener('scroll', function () {
+        return handleScroll;
+      });
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(Wrapper, {
+    ref: headerRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sticky-wrapper".concat(isHeaderSticky && stickable ? ' sticky' : '')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "row"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "col-sm-6 header-title"
+  }, /*#__PURE__*/React.createElement(HeaderTitle, {
+    title: label,
+    cta: cta
+  }), isLoading ? /*#__PURE__*/React.createElement(LoadingBar, null) : /*#__PURE__*/React.createElement("p", null, content)), /*#__PURE__*/React.createElement("div", {
+    className: "col-sm-6 justify-content-end"
+  }, /*#__PURE__*/React.createElement(HeaderActions, {
+    actions: actions
+  })))));
+}
+Header.defaultProps = {
+  actions: [],
+  content: null,
+  isLoading: false,
+  stickable: true,
+  title: {
+    label: null,
+    cta: null
+  }
+};
+Header.propTypes = {
+  actions: PropTypes.arrayOf(PropTypes.shape({
+    onClick: PropTypes.func,
+    title: PropTypes.string
+  })),
+  content: PropTypes.string,
+  isLoading: PropTypes.bool,
+  stickable: PropTypes.bool,
+  title: PropTypes.shape({
+    cta: PropTypes.shape({
+      icon: PropTypes.string,
+      onClick: PropTypes.func
+    }),
+    label: PropTypes.string
+  })
+};
+export default Header;

package/build/esm/components/Inputs/Wrapper.js

@@ -0,0 +1,17 @@
+var _templateObject, _templateObject2, _templateObject3;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+/**
+ *
+ * Wrapper
+ *
+ */
+
+import styled, { css } from 'styled-components';
+import { colors, sizes } from '@punch-in/buffet-modern';
+var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  padding-bottom: ", "px;\n  label {\n    display: block;\n    margin-bottom: 1rem;\n  }\n  > p {\n    width: 100%;\n    padding-top: 10px;\n    font-size: 13px;\n    line-height: normal;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    margin-bottom: -8px;\n  }\n  input[type='checkbox'] {\n    margin-bottom: 13px;\n  }\n  ", "\n"])), sizes.margin * 2.7, function (_ref) {
+  var error = _ref.error;
+  return !!error && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      input,\n      textarea,\n      select {\n        border-color: ", ";\n      }\n    "])), colors.darkOrange);
+});
+var IconWrapper = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-left: 5px;\n  cursor: pointer;\n"])));
+export default Wrapper;
+export { IconWrapper };

package/build/esm/components/Inputs/index.js

@@ -0,0 +1,197 @@
+var _excluded = ["customInputs", "description", "error", "id", "label", "name", "onBlur", "onChange", "translatedErrors", "type", "validations", "value"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+/**
+ *
+ * Inputs
+ *
+ */
+
+import React, { useMemo, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import { get, isEmpty, isFunction, isUndefined } from 'lodash';
+import { DatePicker, Checkbox, Enumeration, Error, InputNumber, InputText, Label, Select, Textarea, TimePicker, Toggle, UnknownInput } from '@punch-in/buffet-modern-core';
+import { Description, ErrorMessage, Tooltip } from '@punch-in/buffet-modern';
+import DateTime from '../DateTime';
+import Wrapper, { IconWrapper } from './Wrapper';
+/* eslint-disable react/forbid-prop-types */
+
+var inputs = {
+  bool: Toggle,
+  checkbox: Checkbox,
+  date: DatePicker,
+  datetime: DateTime,
+  "enum": Enumeration,
+  number: InputNumber,
+  text: InputText,
+  textarea: Textarea,
+  time: TimePicker,
+  select: Select,
+  email: InputText,
+  password: InputText,
+  search: InputText
+};
+function Inputs(_ref) {
+  var customInputs = _ref.customInputs,
+    description = _ref.description,
+    inputError = _ref.error,
+    id = _ref.id,
+    label = _ref.label,
+    name = _ref.name,
+    handleBlur = _ref.onBlur,
+    _onChange = _ref.onChange,
+    translatedErrors = _ref.translatedErrors,
+    type = _ref.type,
+    validations = _ref.validations,
+    value = _ref.value,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOver = _useState2[0],
+    setIsOver = _useState2[1];
+  var inputValue = useMemo(function () {
+    var ret;
+    switch (type) {
+      case 'checkbox':
+        ret = value || false;
+        break;
+      case 'bool':
+        ret = value;
+        break;
+      case 'number':
+        ret = isUndefined(value) ? '' : value;
+        break;
+      default:
+        ret = value || '';
+    }
+    return ret;
+  }, [type, value]);
+  var allInputs = useRef(Object.assign(inputs, customInputs));
+  var InputComponent = allInputs.current[type] || UnknownInput;
+  var inputId = useMemo(function () {
+    return id || name;
+  }, [id, name]);
+  var descriptionId = "description-".concat(inputId);
+  var errorId = "error-".concat(inputId);
+  var handleMouseEvent = function handleMouseEvent() {
+    setIsOver(function (prev) {
+      return !prev;
+    });
+  };
+  if (get(customInputs, type, null) !== null) {
+    return /*#__PURE__*/React.createElement(InputComponent, _extends({
+      description: description,
+      error: inputError,
+      label: label,
+      name: name,
+      onBlur: handleBlur,
+      onChange: _onChange,
+      type: type,
+      validations: validations,
+      value: value
+    }, rest));
+  }
+  return /*#__PURE__*/React.createElement(Error, {
+    inputError: inputError,
+    name: name,
+    translatedErrors: translatedErrors,
+    type: type,
+    validations: validations
+  }, function (_ref2) {
+    var canCheck = _ref2.canCheck,
+      onBlur = _ref2.onBlur,
+      error = _ref2.error,
+      dispatch = _ref2.dispatch;
+    return /*#__PURE__*/React.createElement(Wrapper, {
+      error: error
+    }, type !== 'checkbox' && /*#__PURE__*/React.createElement(Label, {
+      htmlFor: inputId
+    }, /*#__PURE__*/React.createElement("span", null, label, isEmpty(label) && /*#__PURE__*/React.createElement(React.Fragment, null, "\xA0")), rest.labelIcon && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconWrapper, {
+      "data-tip": rest.labelIcon.title,
+      "data-for": "icon-title",
+      onMouseEnter: handleMouseEvent,
+      onMouseLeave: handleMouseEvent
+    }, rest.labelIcon.icon), isOver && /*#__PURE__*/React.createElement(Tooltip, {
+      id: "icon-title"
+    }))), /*#__PURE__*/React.createElement(InputComponent, _extends({}, rest, {
+      message: label // Only for the checkbox
+      ,
+      name: name,
+      id: inputId,
+      "aria-describedby": "".concat(!error && description ? descriptionId : '', " ").concat(error ? errorId : ''),
+      "aria-invalid": error ? 'true' : 'false',
+      onBlur: isFunction(handleBlur) ? handleBlur : onBlur,
+      onChange: function onChange(e) {
+        if (!canCheck) {
+          dispatch({
+            type: 'SET_CHECK'
+          });
+        }
+        dispatch({
+          type: 'SET_ERROR',
+          error: null
+        });
+        _onChange(e);
+      },
+      type: type,
+      value: inputValue
+    })), !error && description && /*#__PURE__*/React.createElement(Description, {
+      id: descriptionId,
+      title: description
+    }, description), error && /*#__PURE__*/React.createElement(ErrorMessage, {
+      id: errorId
+    }, error));
+  });
+}
+Inputs.defaultProps = {
+  customInputs: null,
+  description: null,
+  id: null,
+  error: null,
+  label: null,
+  labelIcon: null,
+  onBlur: null,
+  onChange: function onChange() {},
+  translatedErrors: {
+    date: 'This is not a date',
+    email: 'This is not an email',
+    string: 'This is not a string',
+    number: 'This is not a number',
+    json: 'This is not a JSON',
+    max: 'This is too high',
+    maxLength: 'This is too long',
+    min: 'This is too small',
+    minLength: 'This is too short',
+    required: 'This value is required',
+    regex: 'This does not match the format',
+    uppercase: 'This must be a upper case string'
+  },
+  validations: {},
+  value: null
+};
+Inputs.propTypes = {
+  customInputs: PropTypes.object,
+  description: PropTypes.string,
+  error: PropTypes.string,
+  id: PropTypes.string,
+  label: PropTypes.string,
+  labelIcon: PropTypes.shape({
+    icon: PropTypes.any,
+    title: PropTypes.string
+  }),
+  name: PropTypes.string.isRequired,
+  onBlur: PropTypes.func,
+  onChange: function onChange() {},
+  translatedErrors: PropTypes.objectOf(PropTypes.string),
+  type: PropTypes.string.isRequired,
+  validations: PropTypes.object,
+  value: PropTypes.any
+};
+export default Inputs;

package/build/esm/components/List/index.js

@@ -0,0 +1,56 @@
+var _excluded = ["title", "subtitle", "button", "isLoading", "items", "customRowComponent"];
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+/**
+ *
+ * List
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { List as ListCompo, ListHeader, Padded } from '@punch-in/buffet-modern-core';
+import { Card } from '@punch-in/buffet-modern';
+function List(_ref) {
+  var title = _ref.title,
+    subtitle = _ref.subtitle,
+    button = _ref.button,
+    isLoading = _ref.isLoading,
+    items = _ref.items,
+    customRowComponent = _ref.customRowComponent,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Card, props, /*#__PURE__*/React.createElement(Padded, {
+    right: true,
+    left: true,
+    size: "md"
+  }, /*#__PURE__*/React.createElement(ListHeader, {
+    title: title,
+    subtitle: subtitle,
+    button: button
+  })), /*#__PURE__*/React.createElement(ListCompo, {
+    items: items,
+    isLoading: isLoading,
+    customRowComponent: customRowComponent
+  }));
+}
+List.defaultProps = {
+  button: null,
+  customRowComponent: null,
+  isLoading: false,
+  items: [],
+  title: null,
+  subtitle: null
+};
+List.propTypes = {
+  button: PropTypes.shape({
+    color: PropTypes.string,
+    icon: PropTypes.bool,
+    type: PropTypes.string
+  }),
+  customRowComponent: PropTypes.func,
+  isLoading: PropTypes.bool,
+  items: PropTypes.instanceOf(Array),
+  subtitle: PropTypes.string,
+  title: PropTypes.string
+};
+export default List;

package/build/esm/index.js

@@ -0,0 +1,4 @@
+export { default as DateTime } from './components/DateTime';
+export { default as Header } from './components/Header';
+export { default as Inputs } from './components/Inputs';
+export { default as List } from './components/List';

package/build/index.js

@@ -0,0 +1,8 @@
+
+'use strict';
+
+if (process.env.NODE_ENV === "production") {
+  module.exports = require("./bundle.production.js");
+} else {
+  module.exports = require("./bundle.development.js");
+}

package/createBuildIndex.js

@@ -0,0 +1,3 @@
+const createIndexFile = require('../../scripts/createBuildIndexFile');
+
+createIndexFile(__dirname);

package/jest.config.js

@@ -0,0 +1,14 @@
+const rootConf = require('../../tools-configuration/jest.config.js');
+
+module.exports = Object.assign({}, rootConf, {
+  moduleNameMapper: {
+    ...rootConf.moduleNameMapper,
+  },
+  testPathIgnorePatterns: [
+    '/node_modules/',
+    '/OLD/',
+    '/dist/',
+    '<rootDir>/build/',
+  ],
+  setupFilesAfterEnv: ['./test-bundler.js'],
+});

package/package.json

@@ -0,0 +1,114 @@
+{
+  "name": "@punch-in/buffet-modern-custom",
+  "version": "3.3.11",
+  "description": "Buffetjs Custom Components",
+  "main": "build",
+  "module": "build/esm/index.js",
+  "sideEffects": [
+    "*.css"
+  ],
+  "scripts": {
+    "prebuild": "rimraf build",
+    "build": "npm run build:development && npm run build:production && npm run build:esm && npm run create:index",
+    "build:analyze": "cross-env NODE_ENV=production webpack-cli --json > build/stats.production.json && webpack-bundle-analyzer build/stats.production.json",
+    "build:development": "cross-env NODE_ENV=development webpack-cli",
+    "build:esm": "cross-env BABEL_ENV=esm babel ./src --out-dir ./build/esm --ignore \"**/*.test.js\" --ignore \"**/test.js\"",
+    "build:production": "cross-env NODE_ENV=production webpack-cli",
+    "build:watch": "npm run create:index && cross-env NODE_ENV=development webpack-cli -w",
+    "build:watch:esm": "cross-env BABEL_ENV=esm babel ./src --out-dir ./build/esm --ignore \"**/*.test.js\" --ignore \"**/test.js\" --watch",
+    "create:index": "node ./createBuildIndex.js",
+    "test": "cross-env NODE_ENV=development npm run test:lint && npm run test:style && npm run test:jest",
+    "test:jest": "jest --runInBand --no-cache --config=jest.config.js",
+    "test:jest:update": "jest --runInBand --no-cache --config=jest.config.js -u",
+    "test:jest:watch": "jest --config=jest.config.js --watchAll",
+    "test:lint": "eslint .",
+    "test:lint:quiet": "eslint . --quiet",
+    "test:prettier": "echo \"Error: no test specified\"",
+    "test:prettiers": "prettier-check \"**/*.js\"",
+    "test:style": "stylelint src/components/**/*.js",
+    "test:style:quiet": "stylelint src/components/**/*.js --quiet",
+    "lint:fix": "eslint . --fix",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "@punch-in/buffet-modern": "^3.3.11",
+    "@punch-in/buffet-modern-core": "^3.3.11",
+    "@punch-in/buffet-modern-utils": "^3.3.11",
+    "lodash": "4.17.21",
+    "moment": "^2.24.0",
+    "prop-types": "^15.7.2",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
+    "react-moment-proptypes": "^1.7.0",
+    "styled-components": "^5.3.10"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.1.5",
+    "@babel/core": "^7.1.6",
+    "@babel/eslint-parser": "^7.22.0",
+    "@babel/plugin-proposal-export-default-from": "^7.0.0",
+    "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
+    "@babel/plugin-proposal-function-bind": "^7.0.0",
+    "@babel/plugin-transform-class-properties": "^7.1.0",
+    "@babel/plugin-transform-flow-strip-types": "^7.1.6",
+    "@babel/preset-env": "^7.1.6",
+    "@babel/preset-flow": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "@testing-library/jest-dom": "^5.11.2",
+    "@testing-library/react": "^10.4.7",
+    "@testing-library/react-hooks": "^3.4.1",
+    "babel-jest": "^23.6.0",
+    "babel-loader": "^8.0.4",
+    "babel-plugin-module-resolver": "3.0.0",
+    "bundlesize": "^0.17.0",
+    "cross-env": "^5.1.4",
+    "enzyme": "^3.10.0",
+    "enzyme-adapter-react-16": "^1.15.2",
+    "enzyme-to-json": "^3.5.0",
+    "eslint": "^7.5.0",
+    "eslint-config-airbnb": "^18.2.0",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-import-resolver-lerna": "^1.1.0",
+    "eslint-import-resolver-webpack": "^0.12.2",
+    "eslint-plugin-import": "^2.22.0",
+    "eslint-plugin-jest": "^23.19.0",
+    "eslint-plugin-jsx-a11y": "^6.3.1",
+    "eslint-plugin-react": "^7.20.5",
+    "eslint-plugin-react-hooks": "^4.0.8",
+    "jest-styled-components": "^7.0.0",
+    "mini-css-extract-plugin": "^0.4.0",
+    "rimraf": "^3.0.2",
+    "stylelint": "^13.6.1",
+    "stylelint-config-prettier": "^8.0.2",
+    "stylelint-config-rational-order": "^0.1.2",
+    "stylelint-config-standard": "^20.0.0",
+    "stylelint-config-styled-components": "^0.1.1",
+    "stylelint-processor-styled-components": "^1.10.0",
+    "url-loader": "^1.0.1",
+    "webpack": "~4.44.0",
+    "webpack-bundle-analyzer": "^3.8.0",
+    "webpack-cli": "~3.3.12"
+  },
+  "peerDependencies": {
+    "lodash": "4.17.21",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0",
+    "styled-components": "^5.0.0"
+  },
+  "keywords": [
+    "Buffetjs",
+    "react",
+    "components",
+    "styled-components"
+  ],
+  "author": "Strapi team",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/strapi/buffet"
+  },
+  "gitHead": "63c6c13e0fd7feed8e0ea89f751b68b02ef767ea"
+}

package/src/components/DateTime/Wrapper.js

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  display: flex;
+  > div:first-of-type {
+    margin-right: 10px;
+  }
+  > div:last-of-type {
+    width: 90px;
+  }
+`;
+
+export default Wrapper;