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

package/config/global-setup.js

@@ -0,0 +1,3 @@
+module.exports = async () => {
+  process.env.TZ = 'UTC'
+}

package/dist/cjs/a/Timestamp/Timestamp.js

@@ -0,0 +1,139 @@
+"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 _dateFns = require("date-fns");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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; }
+
+// Local Definitions
+var baseClassName = _bem.default.base;
+var componentClassName = 'timestamp';
+/**
+ * This is the component description.
+ */
+
+var Timestamp = _ref => {
+  var {
+    id,
+    className: userClassName,
+    style,
+    time,
+    prefix,
+    enabledFormats,
+    distanceMaxDays,
+    relativeMaxDays,
+    dateFormat,
+    locale,
+    // ...otherProps
+    as: Element
+  } = _ref;
+  (0, React.useLayoutEffect)(() => {
+    Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
+  }, []);
+  var [currentDisplay, setCurrentDisplay] = (0, React.useState)(enabledFormats[0]);
+  var formatMap = (0, React.useMemo)(() => ({
+    unix: _unix => Number(_unix),
+    date: unix => (0, _dateFns.format)(new Date(unix), dateFormat),
+    distance: unix => !distanceMaxDays || (0, _dateFns.differenceInDays)(Date.now(), new Date(unix)) < distanceMaxDays ? (0, _dateFns.formatDistance)(new Date(unix), new Date(), {
+      addSuffix: true,
+      locale
+    }) : (0, _dateFns.format)(new Date(unix), dateFormat),
+    relative: unix => !relativeMaxDays || (0, _dateFns.differenceInDays)(Date.now(), new Date(unix)) < relativeMaxDays ? (0, _dateFns.formatRelative)(new Date(unix), new Date(), {
+      locale
+    }) : (0, _dateFns.format)(new Date(unix), dateFormat)
+  }), []);
+  var onClick = (0, React.useCallback)(e => {
+    e.persist(); // eslint-disable-next-line no-shadow
+
+    var currentIndex = enabledFormats.findIndex(e => e === currentDisplay);
+    var 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.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 children JSX
+   */
+  prefix: _propTypes.default.node,
+
+  /**
+    * Which html tag to use
+    */
+  as: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
+
+  /**
+    * Formats
+    */
+  enabledFormats: _propTypes.default.arrayOf(_propTypes.default.oneOf(['unix', 'date', 'distance', 'relative'])),
+
+  /**
+   * How many days to display distance before reverting to unix display
+   */
+  distanceMaxDays: _propTypes.default.number,
+
+  /**
+   * How many days to display distance before reverting to unix display
+   */
+  relativeMaxDays: _propTypes.default.number,
+
+  /**
+    * Unix Format Read https://date-fns.org/v2.16.1/docs/format for options
+    */
+  dateFormat: _propTypes.default.string,
+
+  /**
+    * The time to display
+    */
+  time: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.number]).isRequired,
+
+  /**
+    * A Date-DNS locale object. Will default to english.
+    */
+  locale: _propTypes.default.instanceOf(Object)
+};
+Timestamp.defaultProps = {
+  // someProp:false
+  as: 'p',
+  dateFormat: 'yyyy-MM-dd\'T\'HH:mm:ss.SSSxxx',
+  enabledFormats: ['unix', 'date']
+};
+var _default = Timestamp;
+exports.default = _default;

package/dist/cjs/a/{RatingsInput/common/Rating → Timestamp}/index.js

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "Rating", {
+Object.defineProperty(exports, "Timestamp", {
   enumerable: true,
   get: function get() {
-    return _Rating.default;
+    return _Timestamp.default;
   }
 });
 
-var _Rating = _interopRequireDefault(require("./Rating"));
+var _Timestamp = _interopRequireDefault(require("./Timestamp"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

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

package/dist/cjs/a/index.js

@@ -135,6 +135,12 @@ Object.defineProperty(exports, "DotInfo", {
     return _DotInfo.DotInfo;
   }
 });
+Object.defineProperty(exports, "Timestamp", {
+  enumerable: true,
+  get: function get() {
+    return _Timestamp.Timestamp;
+  }
+});
 
 var _SVG = require("./SVG");
 
@@ -172,4 +178,6 @@ var _Quote = require("./Quote");
 
 var _ContentCard = require("./ContentCard");
 
-var _DotInfo = require("./DotInfo");
+var _DotInfo = require("./DotInfo");
+
+var _Timestamp = require("./Timestamp");

package/dist/cjs/f/FormInput/FormInput.js

@@ -0,0 +1,109 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _fields = require("../fields");
+
+var _excluded = ["className", "type", "extraTypes", "disabled"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+// Local Definitions
+// const baseClassName = styleNames.base
+var componentClassName = 'form-input';
+/**
+ * This is the component description.
+ */
+
+var FormInput = _ref => {
+  var {
+    className,
+    type,
+    extraTypes,
+    disabled
+  } = _ref,
+      otherProps = _objectWithoutProperties(_ref, _excluded);
+
+  var newClassName = [className, componentClassName].filter(Boolean).join(' ');
+
+  if (type === 'textarea') {
+    return /*#__PURE__*/React.createElement(_fields.TextareaInput, _extends({
+      className: newClassName,
+      disabled: disabled
+    }, otherProps));
+  }
+
+  if (type === 'choices') {
+    return /*#__PURE__*/React.createElement(_fields.ChoicesInput, _extends({
+      className: newClassName,
+      disabled: disabled
+    }, otherProps));
+  }
+
+  if (type === 'select') {
+    return /*#__PURE__*/React.createElement(_fields.SelectInput, _extends({
+      className: newClassName,
+      disabled: disabled
+    }, otherProps));
+  }
+
+  if (extraTypes !== null && extraTypes !== void 0 && extraTypes[type]) {
+    var Component = extraTypes[type];
+    return /*#__PURE__*/React.createElement(Component, _extends({
+      className: newClassName,
+      disabled: disabled
+    }, otherProps));
+  }
+
+  return /*#__PURE__*/React.createElement(_fields.TextInput, _extends({
+    className: newClassName,
+    disabled: disabled
+  }, otherProps));
+};
+
+FormInput.propTypes = {
+  /**
+   * The HTML class names for this element
+   */
+  className: _propTypes.default.string,
+
+  /**
+   * The HTML class names for this element
+   */
+  type: _propTypes.default.oneOf(['text', 'email', 'password', 'number', 'date', 'datetime', 'month', 'tel', 'hidden', 'select', 'choices', 'textarea', // to be removed
+  'extendedTypeInput']),
+
+  /**
+   * The object with external Input types that would make the form input extensible
+   */
+  extraTypes: _propTypes.default.objectOf(_propTypes.default.func),
+
+  /**
+   * Whether the Form input input should be disabled
+   */
+  disabled: _propTypes.default.bool
+};
+FormInput.defaultProps = {
+  disabled: false
+};
+
+var _default = /*#__PURE__*/(0, React.memo)(FormInput);
+
+exports.default = _default;

package/dist/cjs/{a/RatingsInput → f/FormInput}/index.js

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "RatingsInput", {
+Object.defineProperty(exports, "FormInput", {
   enumerable: true,
   get: function get() {
-    return _RatingsInput.default;
+    return _FormInput.default;
   }
 });
 
-var _RatingsInput = _interopRequireDefault(require("./RatingsInput"));
+var _FormInput = _interopRequireDefault(require("./FormInput"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/cjs/f/common/Label/Label.js

@@ -31,6 +31,7 @@ var Label = _ref => {
     style,
     children,
     name,
+    color,
     as: Wrapper // ...otherProps
 
   } = _ref;
@@ -40,7 +41,7 @@ var Label = _ref => {
   return /*#__PURE__*/React.createElement(Wrapper, {
     htmlFor: Wrapper === 'label' ? name : undefined,
     id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    className: [baseClassName, componentClassName, userClassName, "x-".concat(color)].filter(e => e).join(' '),
     style: style // {...otherProps}
 
   }, children);
@@ -75,11 +76,17 @@ Label.propTypes = {
   /**
    *  The html tag that acts as an input label
    */
-  as: _propTypes.default.node
+  as: _propTypes.default.node,
+
+  /**
+   *  The default color of the label
+   */
+  color: _propTypes.default.string
 };
 Label.defaultProps = {
   // someProp:false
-  as: 'label'
+  as: 'label',
+  color: 'main1'
 };
 var _default = Label;
 exports.default = _default;

package/dist/cjs/f/common/Label/styles.scss

@@ -4,8 +4,8 @@
 @use "../../../form.scss";
 
 
-// .#{bem.$base}.label {
-
-// }
+.#{bem.$base}.label {
+ color: var(--x);
+}
 
 

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

@@ -99,5 +99,7 @@ CheckboxInput.propTypes = {
 };
 CheckboxInput.defaultProps = {// someProp:false
 };
-var _default = CheckboxInput;
+
+var _default = /*#__PURE__*/(0, React.memo)(CheckboxInput);
+
 exports.default = _default;

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

@@ -13,6 +13,8 @@ var _bem = _interopRequireDefault(require("@pareto-engineering/bem"));
 
 var _common = require("./common");
 
+var _common2 = 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); }
@@ -27,7 +29,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
-// Local Definitions
 var baseClassName = _bem.default.base;
 var componentClassName = 'choices-input';
 /**
@@ -41,12 +42,14 @@ var ChoicesInput = _ref => {
     style,
     name,
     validate,
-    choices,
+    options,
     multiple,
     gridColumnsMobile,
     gridColumnsDesktop,
     color,
-    colorChecked // ...otherProps
+    colorChecked,
+    label,
+    disabled // ...otherProps
 
   } = _ref;
   (0, React.useLayoutEffect)(() => {
@@ -60,13 +63,18 @@ var ChoicesInput = _ref => {
       '--grid-columns-mobile': gridColumnsMobile
     }, style) // {...otherProps}
 
-  }, choices.map(choice => /*#__PURE__*/React.createElement(_common.Choice, _extends({
+  }, label && /*#__PURE__*/React.createElement(_common2.FormLabel, {
+    as: "p"
+  }, label), /*#__PURE__*/React.createElement("div", {
+    className: "choices"
+  }, options.map(choice => /*#__PURE__*/React.createElement(_common.Choice, _extends({
     key: choice.value,
     name: name,
     id: "".concat(id, "-").concat(choice.value),
     multiple: multiple,
-    validate: validate
-  }, choice))));
+    validate: validate,
+    disabled: disabled
+  }, choice)))));
 };
 
 ChoicesInput.propTypes = {
@@ -96,9 +104,9 @@ ChoicesInput.propTypes = {
   validate: _propTypes.default.string,
 
   /**
-   * The choices
+   * The choices input options
    */
-  choices: _propTypes.default.arrayOf(_propTypes.default.shape({
+  options: _propTypes.default.arrayOf(_propTypes.default.shape({
     value: _propTypes.default.string,
     label: _propTypes.default.string
   })),
@@ -126,13 +134,26 @@ ChoicesInput.propTypes = {
   /**
    * The selected choice color
    */
-  colorChecked: _propTypes.default.string
+  colorChecked: _propTypes.default.string,
+
+  /**
+   * The label of the choices input
+   */
+  label: _propTypes.default.string,
+
+  /**
+   * Whether all the Choices inputs should be disabled
+   */
+  disabled: _propTypes.default.bool
 };
 ChoicesInput.defaultProps = {
   gridColumnsMobile: 2,
   gridColumnsDesktop: 3,
   color: 'background',
-  colorChecked: 'main1'
+  colorChecked: 'main1',
+  disabled: false
 };
-var _default = ChoicesInput;
+
+var _default = /*#__PURE__*/(0, React.memo)(ChoicesInput);
+
 exports.default = _default;

package/dist/cjs/f/fields/ChoicesInput/common/Choice/Choice.js

@@ -38,7 +38,8 @@ var Choice = _ref => {
     labelStyle,
     value,
     multiple,
-    validate
+    validate,
+    disabled
   } = _ref;
   var [field] = (0, _formik.useField)({
     name,
@@ -52,7 +53,8 @@ var Choice = _ref => {
     id: id,
     name: name
   }, field, {
-    value: value
+    value: value,
+    disabled: disabled
   })), /*#__PURE__*/React.createElement("label", {
     htmlFor: id,
     className: labelClassName,
@@ -109,7 +111,12 @@ Choice.propTypes = {
   /**
    * The input field validator function
    */
-  validate: _propTypes.default.func
+  validate: _propTypes.default.func,
+
+  /**
+   * Whether the radio or checkbox choice should be disabled
+   */
+  disabled: _propTypes.default.bool
 };
 var _default = Choice;
 exports.default = _default;

package/dist/cjs/f/fields/ChoicesInput/styles.scss

@@ -9,39 +9,42 @@ $default-padding:var(--u, 1em);
 $default-transition:all .3s;
 
 .#{bem.$base}.choices-input {
-  display: grid;
-  gap: $default-grid-gap;
-  grid-template-columns: repeat(var(--grid-columns-mobile), 1fr);
 
-  @include mixins.media($from:$sm-md) {
-    grid-template-columns: repeat(var(--grid-columns-desktop), 1fr);
-  }
-
-  .choice {
-    display: flex;
-
-    input {
-      opacity: 0;
-      position: absolute;
-      visibility: none;
-      z-index: -1;
-    }
+  .choices {
+    display: grid;
+    gap: $default-grid-gap;
+    grid-template-columns: repeat(var(--grid-columns-mobile), 1fr);
 
-    label {
-      background: var(--x);
-      border-radius: var(--theme-border-radius);
-      color: var(--on-x);
-      display: block;
-      height: 100%;
-      padding: $default-padding;
-      transition: $default-transition;
-      width: 100%;
-      cursor: pointer;
+    @include mixins.media($from:$sm-md) {
+      grid-template-columns: repeat(var(--grid-columns-desktop), 1fr);
     }
 
-    input:checked + label {
-      background: var(--y);
-      color: var(--on-y);
+    .choice {
+      display: flex;
+
+      input {
+        opacity: 0;
+        position: absolute;
+        visibility: none;
+        z-index: -1;
+      }
+
+      label {
+        background: var(--x);
+        border-radius: var(--theme-border-radius);
+        color: var(--on-x);
+        display: block;
+        height: 100%;
+        padding: $default-padding;
+        transition: $default-transition;
+        width: 100%;
+        cursor: pointer;
+      }
+
+      input:checked + label {
+        background: var(--y);
+        color: var(--on-y);
+      }
     }
   }
 }

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

@@ -104,5 +104,7 @@ RadioInput.propTypes = {
 };
 RadioInput.defaultProps = {// someProp:false
 };
-var _default = RadioInput;
+
+var _default = /*#__PURE__*/(0, React.memo)(RadioInput);
+
 exports.default = _default;

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

@@ -115,5 +115,7 @@ RatingsInput.defaultProps = {
   labelMin: 'not satisfied.',
   labelMax: 'very satisfied.'
 };
-var _default = RatingsInput;
+
+var _default = /*#__PURE__*/(0, React.memo)(RatingsInput);
+
 exports.default = _default;

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

@@ -37,7 +37,8 @@ var SelectInput = _ref => {
     style,
     name,
     label,
-    options // ...otherProps
+    options,
+    disabled // ...otherProps
 
   } = _ref;
   (0, React.useLayoutEffect)(() => {
@@ -55,7 +56,8 @@ var SelectInput = _ref => {
   }, label), /*#__PURE__*/React.createElement("select", _extends({
     className: "input v25 pv-v"
   }, field, {
-    id: name
+    id: name,
+    disabled: disabled
   }), options.map(option => {
     // i.e if option is a string like "blah", return { value: "blah", label: "blah" }
     var newOption = typeof option === 'string' ? {
@@ -103,9 +105,17 @@ SelectInput.propTypes = {
   options: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.shape({
     value: _propTypes.default.string,
     label: _propTypes.default.string
-  })]))
+  })])),
+
+  /**
+   * Whether the select input should be disabled
+   */
+  disabled: _propTypes.default.bool
 };
-SelectInput.defaultProps = {// someProp:false
+SelectInput.defaultProps = {
+  disabled: false
 };
-var _default = SelectInput;
+
+var _default = /*#__PURE__*/(0, React.memo)(SelectInput);
+
 exports.default = _default;