@thecb/components 2.2.0

package/src/deprecated/utility/index.js

@@ -0,0 +1,2 @@
+export { default as safeConcat } from './safeConcat';
+export { default as validateKeyType } from './validateKeyType';

package/src/deprecated/utility/safeConcat.js

@@ -0,0 +1,10 @@
+//      
+
+export default function safeConcat(values               , concatinator        ) {
+  if (!Array.isArray(values)) {
+    console.error(`'values' needs to be an array. Recieved ${typeof values}`);
+    return;
+  }
+
+  return values.filter((val        ) => !!val).join(String(concatinator));
+}

package/src/deprecated/utility/validateKeyType.js

@@ -0,0 +1,19 @@
+//      
+
+export default function validateKeyType(obj                         ,
+  expectedKey        ,
+  expectedType        )          {
+  if (!(expectedKey in obj)) {
+    return false;
+  }
+
+  if (expectedType === 'object' && Array.isArray(obj[expectedKey])) {
+    return false;
+  }
+
+  if (expectedType === 'array' && Array.isArray(obj[expectedKey])) {
+    return true;
+  }
+
+  return typeof obj[expectedKey] === expectedType;
+}

package/src/index.js

@@ -0,0 +1,2 @@
+// export * from "./deprecated";
+export * from "./components";

package/src/util/formats.js

@@ -0,0 +1,30 @@
+import { createFormat } from "formatted-input";
+export const formatDelimiter = "_";
+
+export const phoneFormats = [
+  "",
+  "_",
+  "__",
+  "(___) ",
+  "(___) _",
+  "(___) __",
+  "(___) ___-",
+  "(___) ___-_",
+  "(___) ___-__",
+  "(___) ___-___",
+  "(___) ___-____",
+];
+
+const zipFormats = [
+  "",
+  "_",
+  "__",
+  "___",
+  "____",
+  "_____",
+  "______",
+  "_____-__",
+  "_____-___",
+  "_____-____",
+];
+export const zipFormat = createFormat(zipFormats, formatDelimiter);

package/src/util/general.js

@@ -0,0 +1,15 @@
+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) =>
+  formatMoneyString(convertCentsToMoneyDecimal(cents));
+
+export const safeChildren = (children, replacement = []) => {
+  if (children && children instanceof Array) {
+    return children.map((child) => (!child ? replacement : child));
+  }
+  return !children ? replacement : children;
+};

package/src/util/inputValidationUtils.js

@@ -0,0 +1,257 @@
+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";
+export const EXACT_LENGTH_ERROR = "exact_length_error";
+export const MULTIPLE_LENGTHS_ERROR = "multiple_lengths_error";
+export const EMAIL_ERROR = "email_error";
+export const HAS_NUMBER_ERROR = "error/HAS_NUMBER";
+export const HAS_UPPERCASE_LETTER_ERROR = "error/HAS_UPPERCASE_LETTER";
+export const HAS_LOWERCASE_LETTER_ERROR = "error/HAS_LOWERCASE_LETTER";
+export const HAS_SPECIAL_CHARACTER_ERROR = "error/HAS_SPECIAL_CHARACTER";
+export const ONLY_NUMBERS_ERROR = "only_numbers_error";
+export const ONLY_LETTERS_ERROR = "only_letters_error";
+export const REQUIRED_FIELD_ERROR = "required_field_error";
+export const NUM_GREATER_THAN_ERROR = "num_greater_than_error";
+export const NUM_LESS_THAN_ERROR = "num_less_than_error";
+export const MATCHES_FIELD_ERROR = "matches_field_error";
+export const VALID_SELECT_OPTION_ERROR = "valid_select_option_error";
+
+// Array<String>, Array<String> -> Object -> String
+const genErrorMessage = (strings, ...argKeys) => inputState =>
+  strings.reduce(
+    (accum, current, index) =>
+      `${accum}${current}${
+        argKeys[index] ? R.pathOr("", [argKeys[index]], inputState) : ""
+      }`,
+    []
+  );
+
+/*
+What's going on here? This looks weird, you may ask...
+DEFAULT_ERROR_MESSAGES is a map between the error constants (which are returned by validators)
+and some tagged template literals.
+In this case, the template tag function is curried and returns a function which accepts an args object
+I'm calling that object inputState, but it could really be anything.
+When the error message string fucntion is called with that arg, it's reduced to produce a custom error message
+with interpolation.
+*/
+export const DEFAULT_ERROR_MESSAGES = {
+  [MIN_LENGTH_ERROR]: genErrorMessage`${`fieldLabel`} is too short`,
+  [MAX_LENGTH_ERROR]: genErrorMessage`${`fieldLabel`} is too long`,
+  [EXACT_LENGTH_ERROR]: genErrorMessage`${`fieldLabel`} is not the right length`,
+  [MULTIPLE_LENGTHS_ERROR]: genErrorMessage`${`fieldLabel`} is not a valid length`,
+  [EMAIL_ERROR]: genErrorMessage`${`fieldLabel`} is not a valid email address`,
+  [HAS_NUMBER_ERROR]: genErrorMessage`${`fieldLabel`} needs a number`,
+  [HAS_UPPERCASE_LETTER_ERROR]: genErrorMessage`${`fieldLabel`} needs an uppercase letter`,
+  [HAS_LOWERCASE_LETTER_ERROR]: genErrorMessage`${`fieldLabel`} needs a lowercase letter`,
+  [HAS_SPECIAL_CHARACTER_ERROR]: genErrorMessage`${`fieldLabel`} needs a special character`,
+  [ONLY_NUMBERS_ERROR]: genErrorMessage`${`fieldLabel`} must be only numbers`,
+  [ONLY_LETTERS_ERROR]: genErrorMessage`${`fieldLabel`} must be only letters`,
+  [REQUIRED_FIELD_ERROR]: genErrorMessage`${`fieldLabel`} is required`,
+  [NUM_GREATER_THAN_ERROR]: genErrorMessage`${`fieldLabel`} is too high`,
+  [NUM_LESS_THAN_ERROR]: genErrorMessage`${`fieldLabel`} is too low`,
+  [MATCHES_FIELD_ERROR]: genErrorMessage`${`fieldLabel`} must match ${`matchField`}`,
+  [VALID_SELECT_OPTION_ERROR]: genErrorMessage`${`fieldLabel`} is not a valid option`
+};
+
+// Constants to represent an input's state
+// Neutral - has not been validated
+// Invalid - has been validated and has an error
+// Valid - has been validated and has no error
+export const INPUT_STATE_NEUTRAL = "NEUTRAL";
+export const INPUT_STATE_INVALID = "INVALID";
+export const INPUT_STATE_VALID = "VALID";
+
+// Function to check the state of an input
+// This function is intended to be used with inputs that have multiple validators
+// Takes an input's state value, destructures for the input's error and showError booleans, list of errors
+// Also takes a list of the specific error constants to look for
+// If the input's showError property is false, the input has not been validated, and input state is NEUTRAL
+// If the input has an error, and showError is true, check if the errors we care about are in the input's error list
+// If yes, input state is INVALID
+// If input has no error and showError is true, or the errors we're looking for aren't present in the list
+// then input state is VALID
+// { error: Boolean, showError: Boolean, errorsList: Array<String> }, Array<String> -> String
+export const getInputState = (
+  { dirty, hasErrors, errors, rawValue },
+  errorsToCheck = []
+) => {
+  if (!dirty) {
+    return INPUT_STATE_NEUTRAL;
+  } else if (
+    (dirty && rawValue === "") ||
+    (hasErrors && errorsToCheck.some(error => errors.includes(error)))
+  ) {
+    return INPUT_STATE_INVALID;
+  }
+  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/src/util/router-utils.js

@@ -0,0 +1,23 @@
+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 };

package/src/util/themeUtils.js

@@ -0,0 +1,144 @@
+import theme from "styled-theming";
+import { useContext } from "react";
+import { ThemeContext } from "styled-components";
+/*
+themeContext: { name: "default", values: {JSON_THEME_VALUES_HERE} }
+
+fallbackValues: {
+  padding: {
+    primary: "2rem 1rem",
+    secondary: "1rem 0.5rem"
+  },
+  fontWeight: "600"
+}
+
+componentName: "Button"
+
+Iterates over a component's fallback values, checks to see if any of those values
+are present in the theme values available in the app's theme context.
+If they are, those values override the fallback value.
+
+We use the resuting values as an argument to the styled-theming lib functions
+to create new functions that can be called with theme props to produce values.
+Typically, those functions are passed back to components and used in styled-component files.
+We do things a bit differently...
+
+Before returning, we call the styled-theming functions with relevant theme props (name, variant...)
+The styled-theming API then returns the value
+Ultimately, an object of property values ({ color: "red", fontWeight: "600" })
+is returned to the component, which can be passed
+to whatever layout atoms / other atoms the component is using to build itself
+
+Why do things this way? It's powerful. Right now we're always using "default" as our theme name
+And only expecting one set of theme value in our context (one theme per client)
+
+However, this function can easily be modified to allow for multiple themes per client and
+allow for toggling those themes on the fly via state values
+
+Future use cases for the above: 
+  -Different themes per agency/sub-division of client
+  -Extra themes designed for accessibility (high contrast / color blindness)
+  -Superfluous extra themes (dark mode)
+  -Toggling between many client themes / proposed client themes in a live demo
+
+The above functionality is not available right now, but it is trivial to enable it with this approach.
+*/
+export const createThemeValues = (
+  themeContext,
+  fallbackValues,
+  componentName,
+  variant
+) => {
+  const { values: themeValues } = themeContext;
+  const themeProps = { theme: { name: "default", ...themeContext }, variant };
+
+  const mergedValues = Object.entries(fallbackValues).reduce(
+    (acc, [propName, propValue]) => {
+      if (typeof propValue === "object") {
+        const mergedPropValues = Object.entries(propValue).reduce(
+          (innerAcc, [variantName, defaultVariantValue]) => {
+            const variantValue =
+              themeValues?.[componentName]?.[propName]?.[variantName] ??
+              defaultVariantValue;
+            return {
+              ...innerAcc,
+              [variantName]: {
+                default: variantValue
+              }
+            };
+          },
+          {}
+        );
+        // Always using "default" as our theme name right now
+        // In the future if we want to toggle themes on the fly, change this
+        return {
+          ...acc,
+          [propName]: mergedPropValues
+        };
+      }
+      const mergedSinglePropValue =
+        themeValues?.[componentName]?.[propName] ?? propValue;
+      return {
+        ...acc,
+        [propName]: { default: mergedSinglePropValue }
+      };
+    },
+    {}
+  );
+
+  const createdTheme = Object.entries(mergedValues).reduce(
+    (acc, [propName, propValue]) => {
+      if (propValue[variant]) {
+        return {
+          ...acc,
+          [propName]: theme.variants("name", "variant", propValue)(themeProps)
+        };
+      }
+      return {
+        ...acc,
+        [propName]: theme("name", propValue)(themeProps)
+      };
+    },
+    {}
+  );
+  return createdTheme;
+};
+
+export const themeComponent = (
+  component,
+  componentThemeId,
+  fallbackValues,
+  defaultVariant
+) => ({ variant = defaultVariant, ...props }) => {
+  const themeContext = useContext(ThemeContext);
+  const metadata = themeContext?.metadata ?? {};
+  const themeValues = themeContext
+    ? createThemeValues(themeContext, fallbackValues, componentThemeId, variant)
+    : fallbackValues;
+
+  return component({
+    ...props,
+    themeValues,
+    variant,
+    metadata
+  });
+};
+
+/*
+Keeping this around for now in case we need it later...
+
+export const generateImgSrc = (
+  configAssetsEndpoint,
+  clientSlug,
+  agency = ""
+) => filename => {
+  if (configAssetsEndpoint === "http://localhost:8080/assets") {
+    return agency !== ""
+      ? `${configAssetsEndpoint}/${clientSlug}/${agency}/${filename}`
+      : `${configAssetsEndpoint}/${clientSlug}/${filename}`;
+  }
+  return agency !== ""
+    ? `${configAssetsEndpoint}/${agency}/${filename}`
+    : `${configAssetsEndpoint}/${filename}`;
+};
+*/