@thecb/components 2.2.0 → 3.0.0

package/src/util/formats.js

@@ -12,7 +12,7 @@ export const phoneFormats = [
   "(___) ___-_",
   "(___) ___-__",
   "(___) ___-___",
-  "(___) ___-____",
+  "(___) ___-____"
 ];
 
 const zipFormats = [
@@ -25,6 +25,58 @@ const zipFormats = [
   "______",
   "_____-__",
   "_____-___",
-  "_____-____",
+  "_____-____"
 ];
+
+const creditCardFormats = [
+  "",
+  "_",
+  "__",
+  "___",
+  "____",
+  "____ _",
+  "____ __",
+  "____ ___",
+  "____ ____",
+  "____ ____ _",
+  "____ ____ __",
+  "____ ____ ___",
+  "____ ____ ____",
+  "____ ____ ____ _",
+  "____ ____ ____ __",
+  "____ ____ ____ ___",
+  "____ ____ ____ ____"
+];
+
+export const moneyFormats = [
+  "",
+  "$0.0_",
+  "$0.__",
+  "$_.__",
+  "$__.__",
+  "$___.__",
+  "$_,___.__",
+  "$__,___.__",
+  "$___,___.__",
+  "$_,___,___.__",
+  "$__,___,___.__",
+  "$___,___,___.__",
+  "$_,___,___,___.__",
+  "$__,___,___,___.__",
+  "$___,___,___,___.__",
+  "$_,___,___,___,___.__"
+];
+
+export const expirationDateFormats = ["", "_", "__/", "__/_", "__/__"];
+
 export const zipFormat = createFormat(zipFormats, formatDelimiter);
+export const creditCardFormat = createFormat(
+  creditCardFormats,
+  formatDelimiter
+);
+export const expirationDateFormat = createFormat(
+  expirationDateFormats,
+  formatDelimiter
+);
+export const phoneFormat = createFormat(phoneFormats, formatDelimiter);
+export const moneyFormat = createFormat(moneyFormats, formatDelimiter);

package/src/util/general.js

@@ -2,14 +2,37 @@ import numeral from "numeral";
 
 export const noop = () => {};
 
-const formatMoneyString = (s) => numeral(s).format("$0,0.00");
-const convertCentsToMoneyDecimal = (n) => (n / 100).toFixed(2);
-export const displayCurrency = (cents) =>
+const formatMoneyString = s => numeral(s).format("$0,0.00");
+const convertCentsToMoneyDecimal = n => (n / 100).toFixed(2);
+export const displayCurrency = cents =>
   formatMoneyString(convertCentsToMoneyDecimal(cents));
 
+export const convertCentsToMoneyInt = n => (n / 100).toFixed(0);
+
 export const safeChildren = (children, replacement = []) => {
   if (children && children instanceof Array) {
-    return children.map((child) => (!child ? replacement : child));
+    return children.map(child => (!child ? replacement : child));
   }
   return !children ? replacement : children;
 };
+
+export const generateClickHandler = (form, handleErrors, submitForm) => e => {
+  e.preventDefault();
+  const formHasError = Object.values(form.fields).reduce(
+    (acc, curr) => acc || curr.hasErrors,
+    false
+  );
+  return formHasError ? handleErrors() : submitForm();
+};
+
+export const checkCardBrand = number => {
+  if (/^6011/.test(number)) {
+    return "DISCOVER";
+  } else if (/^5[1-5]/.test(number)) {
+    return "MASTERCARD";
+  } else if (/^4/.test(number)) {
+    return "VISA";
+  } else if (/^3[4,7]/.test(number)) {
+    return "AMEX";
+  } else return "UNKNOWN";
+};

package/src/util/index.js

@@ -0,0 +1,4 @@
+import * as formats from "./formats";
+import * as general from "./general";
+
+export { formats, general };

package/src/util/inputValidationUtils.js

@@ -1,22 +1,5 @@
-import * as S from "sanctuary";
-import * as $ from "sanctuary-def";
 import * as R from "ramda";
 
-// FormInput :: { form :: Object String any, keyName :: String }
-
-// String -> Maybe String
-const getsMaybeString = keyName => S.gets(S.is($.String))([keyName, "value"]);
-
-// String, String, Regex -> FormInput -> Either String String
-const regexTest = (keyName, errorMsg, regex) =>
-  S.pipe([
-    getsMaybeString(keyName),
-    S.maybeToEither("Invalid string entered"),
-    S.chain(string =>
-      S.test(regex)(string) ? S.Right(string) : S.Left(errorMsg)
-    )
-  ]);
-
 // Constants to reprsent input error types
 export const MIN_LENGTH_ERROR = "error/HAS_LENGTH";
 export const MAX_LENGTH_ERROR = "max_length_error";
@@ -105,153 +88,3 @@ export const getInputState = (
   }
   return INPUT_STATE_VALID;
 };
-
-// Number -> FormInput -> Either String String
-export const stringHasMinLength = minLength => ({ form, keyName }) =>
-  S.pipe([
-    getsMaybeString(keyName),
-    S.maybeToEither("Invalid string entered"),
-    S.chain(string =>
-      string.length >= minLength ? S.Right(string) : S.Left(MIN_LENGTH_ERROR)
-    )
-  ])(form);
-
-// Number -> FormInput -> Either String String
-// This function is INCLUSIVE of the maxLength arg supplied to it
-export const stringHasMaxLength = maxLength => ({ form, keyName }) =>
-  S.pipe([
-    getsMaybeString(keyName),
-    S.maybeToEither("Invalid string entered"),
-    S.chain(string =>
-      string.length <= maxLength ? S.Right(string) : S.Left(MAX_LENGTH_ERROR)
-    )
-  ])(form);
-
-// Number -> FormInput -> Either String String
-export const stringHasExactLength = exactLength => ({ form, keyName }) =>
-  S.pipe([
-    getsMaybeString(keyName),
-    S.maybeToEither("Invalid string entered"),
-    S.chain(string =>
-      string.length == exactLength
-        ? S.Right(string)
-        : S.Left(EXACT_LENGTH_ERROR)
-    )
-  ])(form);
-
-// Array(Number) -> FormInput -> Either String String
-export const stringHasMultipleValidLengths = validLengths => ({
-  form,
-  keyName
-}) =>
-  S.pipe([
-    getsMaybeString(keyName),
-    S.maybeToEither("Form is missing key or value is not a string"),
-    S.chain(string =>
-      R.contains(string.length, validLengths)
-        ? S.Right(string)
-        : S.Left(MULTIPLE_LENGTHS_ERROR)
-    )
-  ])(form);
-
-// FormInput -> Either String String
-/* NOTE: this is not a foolproof email validation check
-It will likely fail on edge cases such as " "@foo.com
-It also cannot tell you if the particular email entered is valid for the given domain
-Or if the email account actually exists
-Only use this to help indicate to a user that they may have entered their email incorrectly
-Real validation should be accomplished on the server by sending an email to
-the provided email address
-*/
-export const isProbablyAnEmail = ({ form, keyName }) =>
-  regexTest(keyName, EMAIL_ERROR, /^[^\s@]+@[^\s@]+\.[^\s@]+$/)(form);
-
-// FormInput -> Either String String
-export const stringHasNumber = ({ form, keyName }) =>
-  regexTest(keyName, HAS_NUMBER_ERROR, /[0-9]/)(form);
-
-// FormInput -> Either String String
-export const stringHasUppercaseLetter = ({ form, keyName }) =>
-  regexTest(keyName, HAS_UPPERCASE_LETTER_ERROR, /[A-Z]/)(form);
-
-// FormInput -> Either String String
-export const stringHasLowercaseLetter = ({ form, keyName }) =>
-  regexTest(keyName, HAS_LOWERCASE_LETTER_ERROR, /[a-z]/)(form);
-
-// FormInput -> Either String String
-export const stringHasSpecialCharacter = ({ form, keyName }) =>
-  regexTest(keyName, HAS_SPECIAL_CHARACTER_ERROR, /[!@#$%^&*.?]/)(form);
-
-// FormInput -> Either String String
-export const stringIsOnlyNumbers = ({ form, keyName }) =>
-  regexTest(keyName, ONLY_NUMBERS_ERROR, /^[0-9]+$/)(form);
-
-// FormInput -> Either String String
-export const stringIsOnlyLetters = ({ form, keyName }) =>
-  regexTest(keyName, ONLY_LETTERS_ERROR, /^[a-zA-Z]+$/)(form);
-
-// fieldIsRequired asks for only one character,
-// which can be a letter (a-z) or (A-Z), a digit (0-9), or one of the special characters (!@#$%^&*.?)
-// If you need only letters or numbers use one of the more specific string checks above
-// If you need the string to exceed a specificed length, use stringHasMinLength
-// FormInput -> Either String String
-export const fieldIsRequired = ({ form, keyName }) =>
-  S.pipe([
-    getsMaybeString(keyName),
-    S.maybeToEither("Invalid string entered"),
-    S.chain(string =>
-      string.replace(/\s/g, "").length === 0
-        ? S.Left(REQUIRED_FIELD_ERROR)
-        : S.Right(string)
-    )
-  ])(form);
-
-// Number -> FormInput -> Either String String
-export const numberIsGreaterThan = minValue => ({ form, keyName }) =>
-  S.pipe([
-    getsMaybeString(keyName),
-    S.maybeToEither("Invalid string entered"),
-    S.chain(n =>
-      parseInt(n, 10) > minValue
-        ? S.Right(n.toString())
-        : S.Left(NUM_GREATER_THAN_ERROR)
-    )
-  ])(form);
-
-// Number -> FormInput -> Either String String
-export const numberIsLessThan = maxValue => ({ form, keyName }) =>
-  S.pipe([
-    getsMaybeString(keyName),
-    S.maybeToEither("Invalid string entered"),
-    S.chain(n =>
-      parseInt(n, 10) < maxValue
-        ? S.Right(n.toString())
-        : S.Left(NUM_LESS_THAN_ERROR)
-    )
-  ])(form);
-
-// Error message splits the keyname on capital letters, joins with a space, and lower cases, so "accountNumber" becomes "account number"
-// Eq a => FormInput -> String -> Either String a
-export const matchesOtherField = matchKey => ({ form, keyName }) =>
-  S.equals(S.props([keyName, "value"])(form))(
-    S.props([matchKey, "value"])(form)
-  )
-    ? S.Right(S.props([keyName, "value"])(form))
-    : S.Left(MATCHES_FIELD_ERROR);
-
-// Array(String) -> FormInput -> Either String String
-export const selectIsValid = validOptions => ({ form, keyName }) =>
-  S.pipe([
-    getsMaybeString(keyName),
-    S.maybeToEither("Invalid string entered"),
-    S.chain(string =>
-      R.contains(S.toUpper(string), validOptions)
-        ? S.Right(string)
-        : S.Left(VALID_SELECT_OPTION_ERROR)
-    )
-  ])(form);
-
-export const isInputInvalid = input => input.error && input.showError;
-
-export const inputErrorMessage = input =>
-  input.showError ? input.errorMsg : "";

package/.tool-versions

@@ -1 +0,0 @@
-nodejs 10.15.3

package/dist/cb-components.cjs.js

@@ -1,77 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
-var React = _interopDefault(require('react'));
-var styled = _interopDefault(require('styled-components'));
-
-function _taggedTemplateLiteral(strings, raw) {
-  if (!raw) {
-    raw = strings.slice(0);
-  }
-
-  return Object.freeze(Object.defineProperties(strings, {
-    raw: {
-      value: Object.freeze(raw)
-    }
-  }));
-}
-
-/*
-Need to add a new color? Visit http://chir.ag/projects/name-that-color to generate a color name.
-
-Name already taken? If you can't use the existing color, then use thesaurus.com to pick a similar name
-to the one generated by name-that-color.
-*/
-var PEWTER_GREY = "#DFE1E4";
-var MARINER_BLUE = "#2E75D2";
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteral(["\n  height: 16px;\n  width: 16px;\n  background-color: ", ";\n  border-radius: 8px;\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  height: 24px;\n  width: 24px;\n  border: 1px solid\n    ", ";\n  border-radius: 12px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin: 10px;\n  min-width: 24px;\n  min-height: 24px;\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-var defaultTheme = {
-  theme: {
-    accentColor: MARINER_BLUE,
-    inactiveColor: PEWTER_GREY
-  }
-};
-var RadioButtonBorder = styled.div(_templateObject(), function (_ref) {
-  var isSelected = _ref.isSelected,
-      theme = _ref.theme;
-  return isSelected ? theme.accentColor : theme.inactiveColor;
-});
-RadioButtonBorder.defaultProps = defaultTheme;
-var RadioButtonCenter = styled.div(_templateObject2(), function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.accentColor;
-});
-RadioButtonCenter.defaultProps = defaultTheme;
-
-var RadioButton = function RadioButton(_ref3) {
-  var isSelected = _ref3.isSelected,
-      name = _ref3.name;
-  return React.createElement(RadioButtonBorder, {
-    isSelected: isSelected,
-    name: name
-  }, isSelected && React.createElement(RadioButtonCenter, null));
-};
-
-exports.RadioButton = RadioButton;

package/src/util/router-utils.js

@@ -1,23 +0,0 @@
-import * as R from "ramda";
-
-// todo: remove ramda dep
-// maybe move logic to Header as that's the only component using this
-const getTabs = R.anyPass([
-  R.equals("settings"),
-  R.equals("accounts"),
-  R.equals("properties")
-]);
-const configureTabNavigation = subRoute =>
-  subRoute.split("/").filter(route => getTabs(route));
-const getSubRoute = route => route.topLevel;
-const buildTabNavigation = R.compose(
-  R.map(configureTabNavigation),
-  R.map(getSubRoute)
-);
-const sortRoutes = R.compose(R.sortBy(R.toLower), R.flatten);
-const configureRoutes = R.compose(
-  sortRoutes,
-  R.compose(buildTabNavigation, R.flatten)
-);
-
-export { configureRoutes };