@pareto-engineering/design-system 0.0.1-alpha.67 → 0.0.1-alpha.70

package/dist/cjs/{a/RatingsInput/common/Rating/Rating.js → f/fields/TaskRecommendationInput/TaskRecommendationInput.js}

@@ -13,55 +13,70 @@ var _formik = require("formik");
 
 var _bem = _interopRequireDefault(require("@pareto-engineering/bem"));
 
+var _common = require("../../common");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 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; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 // Local Definitions
 var baseClassName = _bem.default.base;
-var componentClassName = 'rating';
+var componentClassName = 'task-recommendation-input';
 /**
  * This is the component description.
  */
 
-var Rating = _ref => {
+var TaskRecommendationInput = _ref => {
+  var _field$value;
+
   var {
     id,
     className: userClassName,
     style,
-    value,
     name,
-    ratingId,
-    hover,
-    setHover,
-    activeBackgroundColor,
-    inactiveBackgroundColor // ...otherProps
+    value,
+    oneLiner,
+    label,
+    color,
+    image // ...otherProps
 
   } = _ref;
+  (0, React.useLayoutEffect)(() => {
+    Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
+  }, []);
   var [field] = (0, _formik.useField)(name);
+  var isOptionSelected = !!(((_field$value = field.value) === null || _field$value === void 0 ? void 0 : _field$value.length) > 0 && field.value.includes(value));
   return /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: [baseClassName, componentClassName, userClassName, "x-".concat(activeBackgroundColor), "y-".concat(inactiveBackgroundColor)].filter(e => e).join(' '),
-    style: style
-  }, /*#__PURE__*/React.createElement("label", {
-    htmlFor: ratingId,
-    onMouseEnter: () => setHover(value),
-    onMouseLeave: () => setHover(null)
-  }, ' ', /*#__PURE__*/React.createElement("span", {
-    className: ['f-icons', value <= (hover || Number(field.value)) ? 'c-x' : 'c-dark-y'].filter(e => e).join(' ')
-  }, "[")), /*#__PURE__*/React.createElement("input", _extends({}, field, {
-    type: "radio",
-    id: ratingId,
-    name: name,
-    value: value
-  })));
+    className: [baseClassName, componentClassName, userClassName, "x-".concat(color)].filter(e => e).join(' '),
+    style: style // {...otherProps}
+
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "task-content ".concat(isOptionSelected ? 'b-x' : 'b-on-x')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "v1 p-v task"
+  }, /*#__PURE__*/React.createElement(_common.FormLabel, {
+    className: "uc mb-v ".concat(isOptionSelected ? 'c-on-x' : 'c-x'),
+    name: name
+  }, label), /*#__PURE__*/React.createElement("input", _extends({}, field, {
+    value: value,
+    id: name,
+    className: "input",
+    type: "checkbox"
+  })), /*#__PURE__*/React.createElement("img", {
+    className: "image",
+    src: image,
+    alt: "img"
+  }), /*#__PURE__*/React.createElement("p", {
+    className: ['uc u2 mt-u', isOptionSelected && 'c-on-x'].filter(e => e).join(' ')
+  }, oneLiner))));
 };
 
-Rating.propTypes = {
+TaskRecommendationInput.propTypes = {
   /**
    * The HTML id for this element
    */
@@ -78,43 +93,39 @@ Rating.propTypes = {
   style: _propTypes.default.objectOf(_propTypes.default.string),
 
   /**
-   * The value of each an every rating star
-   */
-  value: _propTypes.default.number,
-
-  /**
-   * The current hover value
+   *  The name of the input
    */
-  hover: _propTypes.default.number,
+  name: _propTypes.default.string.isRequired,
 
   /**
-   * Function to update the hover value
+   *  The value of the input
    */
-  setHover: _propTypes.default.func,
+  value: _propTypes.default.string.isRequired,
 
   /**
-   * Unique Id for each rating star
+   *  The task one liner description
    */
-  ratingId: _propTypes.default.string,
+  oneLiner: _propTypes.default.string.isRequired,
 
   /**
-   * Name of the rating input
+   *  The task label
    */
-  name: _propTypes.default.string,
+  label: _propTypes.default.string.isRequired,
 
   /**
-   * The start rating backgriund color when hovered or clicked
+   *  The color
    */
-  activeBackgroundColor: _propTypes.default.string,
+  color: _propTypes.default.string,
 
   /**
-   * The start rating backgriund color when not hovered and not clicked
+   *  Task image
    */
-  inactiveBackgroundColor: _propTypes.default.string
+  image: _propTypes.default.string.isRequired
 };
-Rating.defaultProps = {
-  activeBackgroundColor: 'secondary2',
-  inactiveBackgroundColor: 'background'
+TaskRecommendationInput.defaultProps = {
+  color: 'main2'
 };
-var _default = Rating;
+
+var _default = /*#__PURE__*/(0, React.memo)(TaskRecommendationInput);
+
 exports.default = _default;

package/dist/cjs/f/fields/TaskRecommendationInput/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "TaskRecommendationInput", {
+  enumerable: true,
+  get: function get() {
+    return _TaskRecommendationInput.default;
+  }
+});
+
+var _TaskRecommendationInput = _interopRequireDefault(require("./TaskRecommendationInput"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/{src/ui/f/fields/TaskRecommendation → dist/cjs/f/fields/TaskRecommendationInput}/styles.scss

@@ -1,7 +1,7 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 @use "@pareto-engineering/bem";
 
-.#{bem.$base}.task-recommendation {
+.#{bem.$base}.task-recommendation-input {
 
   .task-content {
     border-radius: var(--theme-border-radius);

package/dist/cjs/f/fields/TextInput/TextInput.js

@@ -40,7 +40,8 @@ var TextInput = _ref => {
     label,
     validate,
     oneInputLabel,
-    description // ...otherProps
+    description,
+    disabled // ...otherProps
 
   } = _ref;
   (0, React.useLayoutEffect)(() => {
@@ -61,7 +62,8 @@ var TextInput = _ref => {
   }, label), /*#__PURE__*/React.createElement("input", _extends({
     id: name,
     className: "input ".concat(meta.touched && meta.error ? 'input-border-error' : 'input-border'),
-    type: type
+    type: type,
+    disabled: disabled
   }, field)), (description || meta.touched && meta.error) && /*#__PURE__*/React.createElement(_common.FormDescription, {
     isError: !!meta.error,
     className: "v50 mt-v s-1"
@@ -112,10 +114,18 @@ TextInput.propTypes = {
   /**
    * Input description
    */
-  description: _propTypes.default.string
+  description: _propTypes.default.string,
+
+  /**
+   * Whether the text input should be disabled
+   */
+  disabled: _propTypes.default.bool
 };
 TextInput.defaultProps = {
-  type: 'text'
+  type: 'text',
+  disabled: false
 };
-var _default = TextInput;
+
+var _default = /*#__PURE__*/(0, React.memo)(TextInput);
+
 exports.default = _default;

package/dist/cjs/f/fields/TextareaInput/TextareaInput.js

@@ -0,0 +1,151 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _bem = _interopRequireDefault(require("@pareto-engineering/bem"));
+
+var _formik = require("formik");
+
+var _common = require("../../common");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+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 baseClassName = _bem.default.base;
+var componentClassName = 'text-area-input';
+/**
+ * This is the component description.
+ */
+
+var TextareaInput = _ref => {
+  var {
+    id,
+    className: userClassName,
+    style,
+    name,
+    label,
+    validate,
+    labelAsDescription,
+    textAreaId,
+    rows,
+    textAreaColor,
+    labelColor,
+    description,
+    disabled // ...otherProps
+
+  } = _ref;
+  (0, React.useLayoutEffect)(() => {
+    Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
+  }, []);
+  var [field, meta] = (0, _formik.useField)({
+    name,
+    validate
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName, "x-".concat(textAreaColor), "y-".concat(labelColor)].filter(e => e).join(' '),
+    style: style // {...otherProps}
+
+  }, /*#__PURE__*/React.createElement(_common.FormLabel, {
+    className: ['c-y', labelAsDescription ? 'md-s2 s0 v1 mb-v' : 'v50 mb-v'].filter(e => e).join(' '),
+    name: name
+  }, label), /*#__PURE__*/React.createElement("textarea", _extends({
+    id: textAreaId,
+    className: "textarea v50 pv-v ".concat(meta.touched && meta.error ? 'input-border-error' : 'input-border')
+  }, field, {
+    rows: rows,
+    disabled: disabled
+  })), (description || meta.touched && meta.error) && /*#__PURE__*/React.createElement(_common.FormDescription, {
+    isError: !!meta.error,
+    className: "v50 mt-v s-1"
+  }, meta.error || description), ' ');
+};
+
+TextareaInput.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id: _propTypes.default.string,
+
+  /**
+   * The HTML class names for this element
+   */
+  className: _propTypes.default.string,
+
+  /**
+   * The React-written, css properties for this element.
+   */
+  style: _propTypes.default.objectOf(_propTypes.default.string),
+
+  /**
+   * The input name (html - and Formik state)
+   */
+  name: _propTypes.default.string.isRequired,
+
+  /**
+   * The input label
+   */
+  label: _propTypes.default.string.isRequired,
+
+  /**
+   * The input value validator function
+   */
+  validate: _propTypes.default.func,
+
+  /**
+   * If the text area depends on it's label's text as the default description
+   */
+  labelAsDescription: _propTypes.default.bool,
+
+  /**
+   * The textarea id
+  */
+  textAreaId: _propTypes.default.string,
+
+  /**
+   * The number of rows int the text area
+   */
+  rows: _propTypes.default.number,
+
+  /**
+   * Text area base color
+   */
+  textAreaColor: _propTypes.default.string,
+
+  /**
+   * Label base color
+   */
+  labelColor: _propTypes.default.string,
+
+  /**
+   * Text area description
+   */
+  description: _propTypes.default.string,
+
+  /**
+   * Whether the text area should be disabled
+   */
+  disabled: _propTypes.default.bool
+};
+TextareaInput.defaultProps = {
+  rows: 3,
+  textAreaColor: 'background',
+  labelColor: 'main1',
+  disabled: false
+};
+
+var _default = /*#__PURE__*/(0, React.memo)(TextareaInput);
+
+exports.default = _default;

package/dist/cjs/f/fields/TextareaInput/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "TextareaInput", {
+  enumerable: true,
+  get: function get() {
+    return _TextareaInput.default;
+  }
+});
+
+var _TextareaInput = _interopRequireDefault(require("./TextareaInput"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/{src/ui/f/fields/TextArea → dist/cjs/f/fields/TextareaInput}/styles.scss

@@ -1,7 +1,7 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 @use "@pareto-engineering/bem";
 
-.#{bem.$base}.text-area{
+.#{bem.$base}.text-area-input{
   display: flex;
   flex-direction: column;
 

package/dist/cjs/f/fields/index.js

@@ -27,10 +27,10 @@ Object.defineProperty(exports, "CheckboxInput", {
     return _CheckboxInput.CheckboxInput;
   }
 });
-Object.defineProperty(exports, "TaskRecommendation", {
+Object.defineProperty(exports, "TaskRecommendationInput", {
   enumerable: true,
   get: function get() {
-    return _TaskRecommendation.TaskRecommendation;
+    return _TaskRecommendationInput.TaskRecommendationInput;
   }
 });
 Object.defineProperty(exports, "ChoicesInput", {
@@ -39,10 +39,10 @@ Object.defineProperty(exports, "ChoicesInput", {
     return _ChoicesInput.ChoicesInput;
   }
 });
-Object.defineProperty(exports, "TextArea", {
+Object.defineProperty(exports, "TextareaInput", {
   enumerable: true,
   get: function get() {
-    return _TextArea.TextArea;
+    return _TextareaInput.TextareaInput;
   }
 });
 Object.defineProperty(exports, "RatingsInput", {
@@ -60,10 +60,10 @@ var _RadioInput = require("./RadioInput");
 
 var _CheckboxInput = require("./CheckboxInput");
 
-var _TaskRecommendation = require("./TaskRecommendation");
+var _TaskRecommendationInput = require("./TaskRecommendationInput");
 
 var _ChoicesInput = require("./ChoicesInput");
 
-var _TextArea = require("./TextArea");
+var _TextareaInput = require("./TextareaInput");
 
 var _RatingsInput = require("./RatingsInput");

package/dist/cjs/f/index.js

@@ -3,11 +3,21 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  FormInput: true
+};
+Object.defineProperty(exports, "FormInput", {
+  enumerable: true,
+  get: function get() {
+    return _FormInput.FormInput;
+  }
+});
 
 var _common = require("./common");
 
 Object.keys(_common).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _common[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -21,6 +31,7 @@ var _fields = require("./fields");
 
 Object.keys(_fields).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _fields[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -28,4 +39,6 @@ Object.keys(_fields).forEach(function (key) {
       return _fields[key];
     }
   });
-});
+});
+
+var _FormInput = require("./FormInput");

package/dist/es/a/Timestamp/Timestamp.js

@@ -0,0 +1,122 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react';
+import { useLayoutEffect, useMemo, useCallback, useState } from 'react';
+import PropTypes from 'prop-types';
+import styleNames from '@pareto-engineering/bem';
+import { format, differenceInDays, formatDistance, formatRelative } from 'date-fns'; // Local Definitions
+
+const baseClassName = styleNames.base;
+const componentClassName = 'timestamp';
+/**
+ * This is the component description.
+ */
+
+const Timestamp = ({
+  id,
+  className: userClassName,
+  style,
+  time,
+  prefix,
+  enabledFormats,
+  distanceMaxDays,
+  relativeMaxDays,
+  dateFormat,
+  locale,
+  // ...otherProps
+  as: Element
+}) => {
+  useLayoutEffect(() => {
+    import("./styles.scss");
+  }, []);
+  const [currentDisplay, setCurrentDisplay] = useState(enabledFormats[0]);
+  const formatMap = useMemo(() => ({
+    unix: unix => Number(unix),
+    date: unix => format(new Date(unix), dateFormat),
+    distance: unix => !distanceMaxDays || differenceInDays(Date.now(), new Date(unix)) < distanceMaxDays ? formatDistance(new Date(unix), new Date(), {
+      addSuffix: true,
+      locale
+    }) : format(new Date(unix), dateFormat),
+    relative: unix => !relativeMaxDays || differenceInDays(Date.now(), new Date(unix)) < relativeMaxDays ? formatRelative(new Date(unix), new Date(), {
+      locale
+    }) : format(new Date(unix), dateFormat)
+  }), []);
+  const onClick = useCallback(e => {
+    e.persist(); // eslint-disable-next-line no-shadow
+
+    const currentIndex = enabledFormats.findIndex(e => e === currentDisplay);
+    const nextIndex = (currentIndex + 1) % enabledFormats.length;
+    setCurrentDisplay(enabledFormats[nextIndex]);
+  }, [currentDisplay]);
+  if (!Number(time)) return null;
+  return /*#__PURE__*/React.createElement(Element, {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    style: style // {...otherProps}
+    ,
+    onClick: enabledFormats.length > 1 ? onClick : undefined
+  }, prefix && prefix, prefix && ' ', formatMap[currentDisplay](Number(time)));
+};
+
+Timestamp.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id: PropTypes.string,
+
+  /**
+   * The HTML class names for this element
+   */
+  className: PropTypes.string,
+
+  /**
+   * The React-written, css properties for this element.
+   */
+  style: PropTypes.objectOf(PropTypes.string),
+
+  /**
+   *  The children JSX
+   */
+  prefix: PropTypes.node,
+
+  /**
+    * Which html tag to use
+    */
+  as: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+
+  /**
+    * Formats
+    */
+  enabledFormats: PropTypes.arrayOf(PropTypes.oneOf(['unix', 'date', 'distance', 'relative'])),
+
+  /**
+   * How many days to display distance before reverting to unix display
+   */
+  distanceMaxDays: PropTypes.number,
+
+  /**
+   * How many days to display distance before reverting to unix display
+   */
+  relativeMaxDays: PropTypes.number,
+
+  /**
+    * Unix Format Read https://date-fns.org/v2.16.1/docs/format for options
+    */
+  dateFormat: PropTypes.string,
+
+  /**
+    * The time to display
+    */
+  time: PropTypes.oneOfType([PropTypes.object, PropTypes.number]).isRequired,
+
+  /**
+    * A Date-DNS locale object. Will default to english.
+    */
+  locale: PropTypes.instanceOf(Object)
+};
+Timestamp.defaultProps = {
+  // someProp:false
+  as: 'p',
+  dateFormat: 'yyyy-MM-dd\'T\'HH:mm:ss.SSSxxx',
+  enabledFormats: ['unix', 'date']
+};
+export default Timestamp;

package/dist/es/a/Timestamp/index.js

@@ -0,0 +1,2 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+export { default as Timestamp } from "./Timestamp";

package/dist/es/a/Timestamp/styles.scss

@@ -0,0 +1,7 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+
+// .#{bem.$base}.timestamp{
+
+// }

package/dist/es/a/index.js

@@ -16,4 +16,5 @@ export { Conversation } from "./Conversation";
 export { CustomerStat } from "./CustomerStat";
 export { Quote } from "./Quote";
 export { ContentCard } from "./ContentCard";
-export { DotInfo } from "./DotInfo";
+export { DotInfo } from "./DotInfo";
+export { Timestamp } from "./Timestamp";