@punch-in/buffet-modern-core 3.3.11

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

@@ -0,0 +1,93 @@
+/**
+ *
+ * TableRow
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { isFunction, isObject } from 'lodash';
+import { Checkbox, Links as StyledLinks } from '@punch-in/buffet-modern';
+import Icon from '../Icon';
+function TableRow(_ref) {
+  var headers = _ref.headers,
+    _onClick = _ref.onClick,
+    onSelect = _ref.onSelect,
+    row = _ref.row,
+    rowLinks = _ref.rowLinks,
+    withBulkAction = _ref.withBulkAction;
+  // const displayedCells = headers.map(header => ({ key: header.value, );
+
+  return /*#__PURE__*/React.createElement("tr", {
+    onClick: function onClick(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      _onClick(e, row);
+    }
+  }, withBulkAction && /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Checkbox, {
+    onClick: function onClick(e) {
+      e.stopPropagation();
+    },
+    onChange: onSelect,
+    checked: row._isChecked
+  })), headers.map(function (_ref2) {
+    var cellName = _ref2.value,
+      cellFormatter = _ref2.cellFormatter,
+      cellAdapter = _ref2.cellAdapter;
+    var displayedValue = !isObject(row[cellName]) ? row[cellName] : '-';
+    if (isFunction(cellFormatter)) {
+      displayedValue = cellFormatter(row[cellName], row);
+    }
+    var displayedContent = /*#__PURE__*/React.createElement("p", null, displayedValue || '-');
+    if (isFunction(cellAdapter)) {
+      displayedContent = cellAdapter(row);
+    }
+    return /*#__PURE__*/React.createElement("td", {
+      key: cellName,
+      className: "".concat(cellName, "-cell")
+    }, displayedContent);
+  }), rowLinks.length > 0 && /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 'fit-content',
+      "float": 'right'
+    }
+  }, /*#__PURE__*/React.createElement(StyledLinks, null, rowLinks.map(function (icon, index) {
+    return /*#__PURE__*/React.createElement("button", {
+      // eslint-disable-next-line react/no-array-index-key
+      key: index + icon,
+      onClick: function onClick(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        icon.onClick(row);
+      },
+      type: "button"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      className: "link-icon",
+      icon: icon.icon
+    }));
+  })))));
+}
+TableRow.defaultProps = {
+  headers: [],
+  onClick: function onClick() {},
+  onSelect: function onSelect() {},
+  row: {},
+  rowLinks: [],
+  withBulkAction: false
+};
+TableRow.propTypes = {
+  headers: PropTypes.arrayOf(PropTypes.shape({
+    isSortEnabled: PropTypes.bool,
+    name: PropTypes.string,
+    value: PropTypes.string
+  })),
+  onClick: PropTypes.func,
+  onSelect: PropTypes.func,
+  // eslint-disable-next-line react/forbid-prop-types
+  row: PropTypes.object,
+  rowLinks: PropTypes.arrayOf(PropTypes.shape({
+    icon: PropTypes.node
+  })),
+  withBulkAction: PropTypes.bool
+};
+export default TableRow;

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

@@ -0,0 +1,67 @@
+var _templateObject;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import colors from '../../theme/colors';
+var Text = styled.p(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin: 0;\n  line-height: ", ";\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  text-transform: ", ";\n  ", "\n"])), function (_ref) {
+  var lineHeight = _ref.lineHeight;
+  return lineHeight;
+}, function (_ref2) {
+  var theme = _ref2.theme,
+    color = _ref2.color;
+  return theme.main.colors[color] || color;
+}, function (_ref3) {
+  var theme = _ref3.theme,
+    fontSize = _ref3.fontSize;
+  return theme.main.sizes.fonts[fontSize];
+}, function (_ref4) {
+  var theme = _ref4.theme,
+    fontWeight = _ref4.fontWeight;
+  return theme.main.fontWeights[fontWeight];
+}, function (_ref5) {
+  var textTransform = _ref5.textTransform;
+  return textTransform;
+}, function (_ref6) {
+  var ellipsis = _ref6.ellipsis;
+  return ellipsis && "\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  ";
+});
+Text.defaultProps = {
+  color: 'greyDark',
+  ellipsis: false,
+  fontSize: 'md',
+  fontWeight: 'regular',
+  lineHeight: 'normal',
+  textTransform: 'none',
+  // TODO : This is temporary
+  theme: {
+    main: {
+      colors: colors,
+      sizes: {
+        fonts: {
+          xs: '11px',
+          sm: '12px',
+          md: '13px',
+          lg: '18px',
+          xl: '24px'
+        }
+      },
+      fontWeights: {
+        regular: 400,
+        semiBold: 500,
+        bold: 600,
+        black: 900
+      }
+    }
+  }
+};
+Text.propTypes = {
+  color: PropTypes.string,
+  ellipsis: PropTypes.bool,
+  fontSize: PropTypes.string,
+  fontWeight: PropTypes.string,
+  lineHeight: PropTypes.string,
+  textTransform: PropTypes.string,
+  // eslint-disable-next-line react/forbid-prop-types
+  theme: PropTypes.object
+};
+export default Text;

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

@@ -0,0 +1,16 @@
+/**
+ *
+ * Textarea
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Textarea as StyledTextArea } from '@punch-in/buffet-modern';
+function Textarea(props) {
+  return /*#__PURE__*/React.createElement(StyledTextArea, props);
+}
+Textarea.propTypes = {
+  name: PropTypes.string.isRequired
+};
+export default Textarea;

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

@@ -0,0 +1,288 @@
+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; }
+/**
+ *
+ * TimePicker
+ *
+ */
+
+import React, { useCallback, useEffect, useState, useRef, useMemo } from 'react';
+import { isInteger, toNumber } from 'lodash';
+import PropTypes from 'prop-types';
+import { IconWrapper, TimePicker as StyledTimePicker, TimePickerWrapper, TimeList } from '@punch-in/buffet-modern';
+import { useEventListener, useShortcutEffect } from '@punch-in/buffet-modern-hooks';
+import Icon from '../Icon';
+var MINUTES_IN_HOUR = 60;
+
+// Returns string with two digits padded at start with 0
+var pad = function pad(num) {
+  return "0".concat(num).substr(-2);
+};
+
+// Convert time array to formatted time string
+export var timeFormatter = function timeFormatter(time) {
+  var newTime = Array(3).fill('00').concat(splitArray(time)).reverse();
+  newTime.length = 3;
+  return format(newTime).join(':');
+};
+
+// Convert time string to time array
+var splitArray = function splitArray(string) {
+  if (isInteger(toNumber(string)) && string) {
+    var stringFormat = string.length === 3 ? "0".concat(string) : string;
+    return stringFormat.match(/.{1,2}/g).reverse();
+  }
+  var lowercase = string ? string.toLowerCase() : '0';
+  var array = lowercase.includes('h') ? lowercase.split('h') : lowercase.split(':');
+  return array.reverse().filter(function (v) {
+    return !!v;
+  });
+};
+
+// Ensure two-digit format for minutes and seconds
+var format = function format(array) {
+  return array.map(function (string, i) {
+    if (string.length < 2) {
+      return i === 0 ? "0".concat(string) : "".concat(string, "0");
+    }
+    return string;
+  });
+};
+
+// Hide seconds if needed
+var _short = function _short(hour) {
+  var array = hour.split(':');
+  if (array.length > 2) {
+    return array.slice(0, -1).join(':');
+  }
+  return hour;
+};
+
+// return array of minutes in hours with current step
+var getMinutesArr = function getMinutesArr(step) {
+  var length = MINUTES_IN_HOUR / step;
+  return Array.from({
+    length: length
+  }, function (_v, i) {
+    return step * i;
+  });
+};
+
+// Generate options for TimeList display
+var getOptions = function getOptions(step) {
+  var hours = Array.from({
+    length: 24
+  }, function (_, i) {
+    return i;
+  });
+  var minutes = getMinutesArr(step);
+  var options = hours.reduce(function (acc, cur) {
+    var hour = pad(cur);
+    var hourOptions = minutes.map(function (minute) {
+      var label = "".concat(hour, ":").concat(pad(minute));
+      return {
+        value: "".concat(label, ":00"),
+        label: label
+      };
+    });
+    return acc.concat(hourOptions);
+  }, []);
+  return options;
+};
+
+// Find the nearest time option to select a TimeList value
+var roundHour = function roundHour(time, step) {
+  var arr = splitArray(time);
+  var minutesArr = getMinutesArr(step);
+  var nearMin = nearest(minutesArr.concat(MINUTES_IN_HOUR), parseInt(arr[1], 10));
+  arr[1] = minutesArr.includes(arr[1]) ? '00' : pad(nearMin);
+  arr[2] = nearMin === 60 ? "".concat(parseInt(arr[2], 10) + 1) : arr[2];
+  return format(arr.reverse()).join(':');
+};
+
+// Set the nearest option to select a TimeList value
+var nearest = function nearest(arr, val) {
+  return arr.reduce(function (p, n) {
+    return Math.abs(p) > Math.abs(n - val) ? n - val : p;
+  }, Infinity) + val;
+};
+function TimePicker(props) {
+  var name = props.name,
+    onChange = props.onChange,
+    seconds = props.seconds,
+    tabIndex = props.tabIndex,
+    value = props.value,
+    step = props.step;
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    inputVal = _useState2[0],
+    setInputVal = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isOpen = _useState4[0],
+    setIsOpen = _useState4[1];
+  var options = useMemo(function () {
+    return getOptions(step);
+  }, [step]);
+  var inputRef = useRef();
+  var wrapperRef = useRef();
+  var listRef = useRef();
+  var listRefs = options.reduce(function (acc, curr) {
+    acc[curr.value] = useRef();
+    return acc;
+  }, {});
+  var currentTimeSelected = useMemo(function () {
+    return roundHour(timeFormatter(inputVal), step);
+  }, [inputVal, step]);
+
+  // Effect to set the time
+  useEffect(function () {
+    if (!isOpen) {
+      var time = seconds ? value : _short(value);
+      setInputVal(time);
+    }
+  }, [value, seconds, isOpen]);
+
+  // Effect to enable scrolling
+  useEffect(function () {
+    var currentRef = currentTimeSelected;
+    if (isOpen && listRefs[currentRef]) {
+      listRef.current.scrollTop = listRefs[currentRef].current.offsetTop;
+    }
+  }, [isOpen, currentTimeSelected, listRefs]);
+
+  // Custom hook to close the TimeList
+  useEventListener('click', function (event) {
+    if (!wrapperRef.current.contains(event.target)) {
+      setIsOpen(false);
+    }
+  }, isOpen);
+
+  // Custom hook to select a time using the keyboard's up arrow
+  useShortcutEffect('arrowUp', function () {
+    if (isOpen) {
+      var currentIndex = options.findIndex(function (o) {
+        return o.value === currentTimeSelected;
+      });
+      if (!currentIndex) return;
+      var nextIndex = currentIndex - 1;
+      var nextTime = options[nextIndex] || options[currentIndex];
+      updateTime(nextTime.value);
+    }
+  }, isOpen);
+
+  // Custom hook to select a time using the keyboard's down arrow
+  useShortcutEffect('arrowDown', function () {
+    if (isOpen) {
+      var currentIndex = options.findIndex(function (o) {
+        return o.value === currentTimeSelected;
+      });
+      var lastIndex = options.length - 1;
+      if (currentIndex >= lastIndex) return;
+      var nextIndex = currentIndex + 1;
+      var nextTime = options[nextIndex] || options[lastIndex];
+      updateTime(nextTime.value);
+    }
+  }, isOpen);
+
+  // Custom hook to close the time list
+  useShortcutEffect('enter', function () {
+    if (isOpen) {
+      setIsOpen(false);
+      inputRef.current.blur();
+    }
+  }, isOpen);
+  useShortcutEffect('tab', function () {
+    if (isOpen) {
+      setIsOpen(false);
+      inputRef.current.blur();
+    }
+  }, isOpen);
+  var handleChange = function handleChange(_ref) {
+    var target = _ref.target;
+    updateTime(target.value);
+  };
+  var handleChangeRadio = useCallback(function () {}, []);
+  var formatInputValue = function formatInputValue(time) {
+    if (!seconds) {
+      setInputVal(_short(time));
+    } else {
+      setInputVal(time);
+    }
+  };
+  var handleClick = function handleClick(_ref2) {
+    var target = _ref2.target;
+    updateTime(target.value);
+    setIsOpen(false);
+  };
+  var updateTime = function updateTime(time) {
+    formatInputValue(time);
+    onChange({
+      target: {
+        name: name,
+        type: 'time',
+        value: timeFormatter(time)
+      }
+    });
+  };
+  return /*#__PURE__*/React.createElement(TimePickerWrapper, {
+    ref: wrapperRef,
+    className: props.className
+  }, /*#__PURE__*/React.createElement(StyledTimePicker, _extends({}, props, {
+    autoComplete: "off",
+    onChange: handleChange,
+    onFocus: function onFocus() {
+      return setIsOpen(true);
+    },
+    ref: inputRef,
+    type: "text",
+    value: inputVal,
+    tabIndex: tabIndex
+  })), /*#__PURE__*/React.createElement(IconWrapper, null, /*#__PURE__*/React.createElement(Icon, {
+    icon: "time"
+  })), /*#__PURE__*/React.createElement(TimeList, {
+    className: isOpen && 'displayed',
+    ref: listRef
+  }, isOpen && options.map(function (option) {
+    return /*#__PURE__*/React.createElement("li", {
+      key: option.value,
+      ref: listRefs[option.value]
+    }, /*#__PURE__*/React.createElement("input", {
+      type: "radio",
+      onChange: handleChangeRadio,
+      onClick: handleClick,
+      value: option.value,
+      id: option.value,
+      name: "time",
+      checked: option.value === currentTimeSelected,
+      tabIndex: "0"
+    }), /*#__PURE__*/React.createElement("label", {
+      htmlFor: option.value
+    }, option.label));
+  })));
+}
+TimePicker.defaultProps = {
+  className: null,
+  onChange: function onChange() {},
+  tabIndex: '0',
+  seconds: false,
+  value: '',
+  step: 30
+};
+TimePicker.propTypes = {
+  className: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  onChange: PropTypes.func,
+  seconds: PropTypes.bool,
+  step: function step(props, propName) {
+    return MINUTES_IN_HOUR % props[propName] > 0 && new Error('step should be divisible by 60');
+  },
+  tabIndex: PropTypes.string,
+  value: PropTypes.string
+};
+export default TimePicker;

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

@@ -0,0 +1,72 @@
+/**
+ *
+ * Toggle
+ *
+ */
+
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { Toggle as StyledToggle, ToggleWrapper } from '@punch-in/buffet-modern';
+import Label from '../Label';
+function Toggle(_ref) {
+  var disabled = _ref.disabled,
+    id = _ref.id,
+    className = _ref.className,
+    name = _ref.name,
+    onChange = _ref.onChange,
+    value = _ref.value,
+    leftLabel = _ref.leftLabel,
+    rightLabel = _ref.rightLabel;
+  var isIndeterminate = value === null;
+  var handleRef = useCallback(function (element) {
+    if (element) {
+      element.indeterminate = isIndeterminate; // eslint-disable-line no-param-reassign
+    }
+  }, [isIndeterminate]);
+  var handleChange = function handleChange(e) {
+    var targetValue = e.target.checked;
+    // Handle click when the state is inteterminate
+    if (isIndeterminate) {
+      // Select the right value depending on the mouse position
+      targetValue = e.nativeEvent.offsetX >= e.target.offsetWidth / 2;
+    }
+    onChange({
+      target: {
+        name: name,
+        value: targetValue
+      }
+    });
+  };
+  return /*#__PURE__*/React.createElement(ToggleWrapper, {
+    className: className
+  }, /*#__PURE__*/React.createElement(Label, {
+    htmlFor: id || name
+  }, /*#__PURE__*/React.createElement(StyledToggle, {
+    disabled: disabled,
+    checked: value || false,
+    id: id || name,
+    name: id || name,
+    onChange: handleChange,
+    ref: handleRef
+  }), /*#__PURE__*/React.createElement("span", null, leftLabel), /*#__PURE__*/React.createElement("span", null, rightLabel)));
+}
+Toggle.defaultProps = {
+  className: null,
+  disabled: false,
+  id: null,
+  leftLabel: 'OFF',
+  onChange: function onChange() {},
+  rightLabel: 'ON',
+  value: false
+};
+Toggle.propTypes = {
+  className: PropTypes.string,
+  disabled: PropTypes.bool,
+  id: PropTypes.string,
+  leftLabel: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  onChange: PropTypes.func,
+  rightLabel: PropTypes.string,
+  value: PropTypes.bool
+};
+export default Toggle;

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

@@ -0,0 +1,19 @@
+/**
+ *
+ * UnknownInput
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+var UnknownInput = function UnknownInput(_ref) {
+  var type = _ref.type;
+  return /*#__PURE__*/React.createElement("div", null, "This ", type, " is not available");
+};
+UnknownInput.defaultProps = {
+  type: null
+};
+UnknownInput.propTypes = {
+  type: PropTypes.string
+};
+export default UnknownInput;

package/build/esm/index.js

@@ -0,0 +1,33 @@
+export { default as AttributeIcon } from './components/AttributeIcon';
+export { default as Button } from './components/Button';
+export { default as Checkbox } from './components/Checkbox';
+export { default as Count } from './components/Count';
+export { default as DatePicker } from './components/DatePicker';
+export { default as Enumeration } from './components/Enumeration';
+export { default as Error } from './components/Error';
+export { default as Flex } from './components/Flex';
+export { default as HeaderActions } from './components/HeaderActions';
+export { default as HeaderTitle } from './components/HeaderTitle';
+export { default as Icon } from './components/Icon';
+export { default as IconLinks } from './components/IconLinks';
+export { default as InputNumber } from './components/InputNumber';
+export { default as InputText } from './components/InputText';
+export { default as Label } from './components/Label';
+export { default as List } from './components/List';
+export { default as ListHeader } from './components/ListHeader';
+export { default as ListRow } from './components/ListRow';
+export { default as NavTabs } from './components/NavTabs';
+export { default as Option } from './components/Option';
+export { default as Padded } from './components/Padded';
+export { default as Picker } from './components/Picker';
+export { default as PrefixIcon } from './components/PrefixIcon';
+export { default as Select } from './components/Select';
+export { default as Separator } from './components/Separator';
+export { default as Table } from './components/Table';
+export { default as TableHeader } from './components/TableHeader';
+export { default as TableRow } from './components/TableRow';
+export { default as Text } from './components/Text';
+export { default as Textarea } from './components/Textarea';
+export { default as TimePicker } from './components/TimePicker';
+export { default as Toggle } from './components/Toggle';
+export { default as UnknownInput } from './components/UnknownInput';

package/build/esm/theme/colors.js

@@ -0,0 +1,48 @@
+// This is the temporary list of colors
+// TODO : To clean on theme setup
+export default {
+  black: '#333740',
+  white: '#ffffff',
+  red: '#ff203c',
+  orange: '#ff5d00',
+  lightOrange: '#f64d0a',
+  yellow: '#ffd500',
+  green: '#6dbb1a',
+  blue: '#0097f7',
+  teal: '#5bc0de',
+  pink: '#ff5b77',
+  purple: '#613d7c',
+  gray: '#464a4c',
+  border: '#E3E9F3',
+  'gray-dark': '#292b2c',
+  grayLight: '#636c72',
+  'gray-lighter': '#eceeef',
+  'gray-lightest': '#f7f7f9',
+  brightGrey: '#f0f3f8',
+  darkGrey: '#e3e9f3',
+  lightGrey: '#fafafa',
+  lightestGrey: '#fbfbfb',
+  mediumGrey: '#F2F3F4',
+  grey: '#9ea7b8',
+  greyDark: '#292b2c',
+  greyAlpha: 'rgba(227, 233, 243, 0.5)',
+  lightBlue: '#E6F0FB',
+  mediumBlue: '#007EFF',
+  darkBlue: '#AED4FB',
+  content: {
+    background: '#fafafb',
+    'background-alpha': 'rgba(14, 22, 34, 0.02)'
+  },
+  leftMenu: {
+    'link-hover': '#1c2431',
+    'link-color': '#919bae',
+    'title-color': '#5b626f'
+  },
+  strapi: {
+    'gray-light': '#eff3f6',
+    gray: '#535f76',
+    'blue-darker': '#18202e',
+    'blue-dark': '#151c2e',
+    blue: '#0097f7'
+  }
+};

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");
+}