@thecb/components 12.0.0-beta.0 → 12.0.0-beta.2

package/src/components/molecules/turnstile-widget/TurnstileWidget.js

@@ -0,0 +1,183 @@
+import React, {
+  useState,
+  useEffect,
+  useRef,
+  forwardRef,
+  useImperativeHandle
+} from "react";
+import { Box } from "../../atoms/layouts";
+import Text from "../../atoms/text";
+import styled from "styled-components";
+import { useTurnstileScript } from "../../../hooks";
+import { noop } from "../../../util/general";
+import { ERROR_COLOR } from "../../../constants/colors";
+
+const TurnstileWidgetContainer = styled(Box)`
+  display: flex;
+  flex-direction: column;
+  padding: ${({ padding }) => padding};
+  justify-content: ${({ justify }) => justify};
+  align-items: ${({ align }) => align};
+  width: 100%;
+`;
+
+const FATAL_ERROR_CODES = [
+  // Configuration errors
+  /^100/,
+  /^105/,
+  /^110100$/,
+  /^110110$/,
+  /^110200$/,
+  /^110420$/,
+  /^110430$/,
+  /^400020$/,
+  /^400030$/,
+  /^400040$/,
+  // Browser/environment errors
+  /^110500$/,
+  /^110510$/,
+  /^200010$/,
+  /^200100$/,
+  // Internal errors
+  /^120/
+];
+
+const TurnstileWidget = forwardRef(
+  (
+    {
+      verifyURL, // URL to load the Turnstile script from
+      siteKey, // Turnstile site key
+      onSuccess = noop,
+      onError = noop,
+      onExpired = noop,
+      padding = "1rem",
+      justify = "flex-end",
+      align = "flex-end",
+      size = "normal",
+      tabindex = 0,
+      retry = "never",
+      theme = "light",
+      extraStyles = ""
+    },
+    ref
+  ) => {
+    if (!verifyURL || !siteKey) return null;
+
+    const widgetRef = useRef(null);
+    const widgetIdRef = useRef(null);
+    const [error, setError] = useState(null);
+
+    const { scriptLoaded, scriptError } = useTurnstileScript(verifyURL);
+
+    // Clear the error state
+    const clearError = () => {
+      setError(null);
+    };
+
+    // Handle errors based on the retry strategy
+    const handleError = errorCode => {
+      if (!errorCode) return;
+      const isFatalError = FATAL_ERROR_CODES.some(pattern =>
+        pattern.test(errorCode)
+      );
+      const errorMessage = getErrorMessage(isFatalError);
+      setError(errorMessage);
+    };
+
+    const getErrorMessage = isFatalError => {
+      if (isFatalError) {
+        return "Browser or system error. Please refresh the page or try a different browser.";
+      }
+      return "Something went wrong. Please refresh and try again.";
+    };
+
+    // Allow the parent component to reset the Turnstile widget
+    useImperativeHandle(
+      ref,
+      () => ({
+        reset: () => {
+          if (widgetIdRef.current && window.turnstile) {
+            window.turnstile.reset(widgetIdRef.current);
+            clearError();
+          }
+        }
+      }),
+      []
+    );
+
+    useEffect(() => {
+      if (scriptError) {
+        setError(
+          "Unable to load security verification. Please refresh the page."
+        );
+        onError?.("script_load_failed");
+        return;
+      }
+
+      if (widgetIdRef.current || !window.turnstile || !scriptLoaded) return;
+
+      try {
+        widgetIdRef.current = window.turnstile.render(widgetRef.current, {
+          sitekey: siteKey,
+          size: size,
+          retry: retry,
+          tabindex: tabindex,
+          theme: theme,
+          callback: token => {
+            clearError();
+            onSuccess?.(token);
+          },
+          "error-callback": errorCode => {
+            handleError(errorCode);
+            onError?.(errorCode);
+          },
+          "expired-callback": () => {
+            clearError();
+            onExpired?.();
+          }
+        });
+      } catch (error) {
+        setError(
+          "Unable to load security verification. Please refresh the page."
+        );
+        onError?.("render_failed");
+      }
+
+      return () => {
+        if (widgetIdRef.current && window.turnstile) {
+          window.turnstile.remove(widgetIdRef.current);
+          widgetIdRef.current = null;
+          clearError();
+        }
+      };
+    }, [scriptLoaded, scriptError, siteKey]);
+
+    return (
+      <>
+        <TurnstileWidgetContainer
+          padding={padding}
+          justify={justify}
+          align={align}
+          extraStyles={extraStyles}
+        >
+          <div ref={widgetRef} />
+          {error && (
+            <Text
+              color={ERROR_COLOR}
+              variant="pXS"
+              extraStyles={`
+                word-break: break-word;
+                text-align: end;
+                padding-top: 0.5rem;
+              `}
+            >
+              {error}
+            </Text>
+          )}
+        </TurnstileWidgetContainer>
+      </>
+    );
+  }
+);
+
+export default TurnstileWidget;

package/src/components/molecules/turnstile-widget/index.js

@@ -0,0 +1,3 @@
+import TurnstileWidget from "./TurnstileWidget";
+
+export default TurnstileWidget;

package/src/components/templates/sidebar-stack-content/SidebarStackContent.js

@@ -36,7 +36,7 @@ const SidebarStackContent = ({
     >
       <Cover centerOverride={!sidebarVerticalCenter} key="page-cover">
         {header ? header : <Box padding="0" key="header-box" />}
-        <Box padding="0" minWidth="100%" key="content-box" role="main">
+        <Box padding="0" minWidth="100%" key="content-box">
           {subHeader && !(isMobile && hideMobileSubHeader) ? (
             subHeader
           ) : (

package/src/constants/colors.d.ts

@@ -65,6 +65,7 @@ export const ROYAL_BLUE_VIVID: Color;
 export const ASTRAL_BLUE: Color;
 export const SAPPHIRE_BLUE: Color;
 export const PEACOCK_BLUE: Color;
+export const HAWKES_BLUE: Color;
 
 // GREEN
 export const FOREST_GREEN: Color;
@@ -96,6 +97,9 @@ export const FANTASY_RED: Color;
 export const COSMOS_RED: Color;
 export const BLUSH_RED: Color;
 
+// PURPLE
+export const LUCKY_POINT: Color;
+
 export const ERROR_COLOR: Color;
 export const ERROR_BACKGROUND_COLOR: Color;
 

package/src/constants/colors.js

@@ -62,6 +62,7 @@ const ROYAL_BLUE_VIVID = "#3B5BDB";
 const ASTRAL_BLUE = "#3176AA";
 const SAPPHIRE_BLUE = "#116285";
 const PEACOCK_BLUE = "#0E506D";
+const HAWKES_BLUE = "#D9D9FB";
 // GREEN
 const FOREST_GREEN = "#19b03F";
 const MEADOW_GREEN = "#16C98D";
@@ -88,6 +89,9 @@ const RASPBERRY = "#ED125F";
 const FANTASY_RED = "#FCF4F4";
 const COSMOS_RED = "#FFD0D3";
 const BLUSH_RED = "#FFF0F5";
+// PURPLE
+const LUCKY_POINT = "#281978";
+const LUCKY_POINT_DARK = "#201460";
 
 // Second level color constants
 const ERROR_COLOR = RAZZMATAZZ_RED;
@@ -200,6 +204,7 @@ export {
   ASTRAL_BLUE,
   SAPPHIRE_BLUE,
   PEACOCK_BLUE,
+  HAWKES_BLUE,
   FOREST_GREEN,
   MEADOW_GREEN,
   POLAR_GREEN,
@@ -225,5 +230,7 @@ export {
   ALERT_COLORS,
   PILL_COLORS,
   ERROR_COLOR,
-  ERROR_BACKGROUND_COLOR
+  ERROR_BACKGROUND_COLOR,
+  LUCKY_POINT,
+  LUCKY_POINT_DARK
 };

package/src/constants/regex_constants.js

@@ -1 +1 @@
-export const URL_TEST = /(([a-z]{3,6}:\/\/)|(^|\s))([a-zA-Z0-9\-]+\.)+[a-z]{2,13}[\.\?\=\&\%\/\w\-]*\b([^@]|$)/;
+export const URL_TEST = /(([a-z]{3,6}:\/\/)|(^|\s))((\d{1,3}\.){3}\d{1,3}|([a-zA-Z0-9\-]+\.)+[a-z]{2,13})[\.\?\=\&\%\/\w\-]*\b([^@]|$)/;

package/src/constants/style_constants.js

@@ -5,6 +5,7 @@ export const BORDER_RADIUS = {
 };
 export const BORDER_THIN = "1px";
 export const FONT_SIZE = {
+  XXS: "0.625rem", // 10px
   XS: "0.750rem", // 12px
   SM: "0.875rem", // 14px
   MD: "1.000rem", // 16px
@@ -24,3 +25,15 @@ export const SPACING = {
   XS: "1.0rem", // Figma: Spacing/XS
   MD: "1.5rem" // Figma: Spacing/Normal
 };
+export const SCREEN_READER_ONLY = {
+  border: 0,
+  clip: "rect(0 0 0 0)",
+  clipPath: "inset(50%)",
+  height: "1px",
+  margin: "-1px",
+  overflow: "hidden",
+  padding: 0,
+  position: "absolute",
+  width: "1px",
+  whiteSpace: "nowrap"
+};

package/src/deprecated/spinner/Spinner.js

@@ -1,23 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import posed from "react-pose";
-import { linear } from "@popmotion/easing";
-
-const rotate = posed.div({
-  fixed: {
-    rotate: "0deg"
-  },
-  rotate: {
-    rotate: "360deg",
-    transition: {
-      rotate: {
-        ease: linear,
-        duration: 1000,
-        loop: Infinity
-      }
-    }
-  }
-});
+import { Motion } from "../../components/atoms/layouts";
 
 export const SpinnerContainer = styled.div`
   width: 100%;
@@ -27,14 +10,19 @@ export const SpinnerContainer = styled.div`
   justify-content: center;
 `;
 
-export const SpinnerIconWrapper = styled(rotate)`
+export const SpinnerIconWrapper = styled(Motion)`
   width: ${({ isMobile }) => (isMobile ? "18" : "21")}px;
   height: ${({ isMobile }) => (isMobile ? "18" : "21")}px;
 `;
 
 const SpinnerIcon = ({ color, isMobile }) => (
   <SpinnerContainer>
-    <SpinnerIconWrapper initialPose="fixed" pose="rotate" isMobile={isMobile}>
+    <SpinnerIconWrapper
+      initial={{ rotate: 0 }}
+      animate={{ rotate: 360 }}
+      transition={{ duration: 1, ease: "linear", repeat: Infinity }}
+      isMobile={isMobile}
+    >
       <svg
         viewBox={`0 0 24 24`}
         height="100%"

package/src/hooks/index.js

@@ -1,3 +1,5 @@
 export { default as useOutsideClick } from "./use-outside-click";
 export { default as useScrollTo } from "./use-scroll-to";
 export { default as useToastNotification } from "./use-toast-notification";
+export { default as useConditionallyAddValidator } from "./use-conditionally-add-validator";
+export { default as useTurnstileScript } from "./use-turnstile-script";

package/src/hooks/use-conditionally-add-validator/index.js

@@ -0,0 +1,20 @@
+import { useEffect } from "react";
+
+function useConditionallyAddValidator(
+  condition,
+  validatorFn,
+  addValidator,
+  removeValidator
+) {
+  useEffect(() => {
+    if (condition) {
+      addValidator(validatorFn());
+    }
+    return () => {
+      // Remove validator when component unmounts
+      removeValidator(validatorFn());
+    };
+  }, [condition, addValidator, removeValidator]);
+}
+
+export default useConditionallyAddValidator;

package/src/hooks/use-outside-click/index.js

@@ -18,12 +18,11 @@ const useOutsideClickHook = handler => {
       if (ref.current && !ref.current.contains(e.target)) {
         handler();
       }
+    };
 
-      document.addEventListener("click", handleOutsideClick, true);
-
-      return () => {
-        document.removeEventListener("click", handleOutsideClick, true);
-      };
+    document.addEventListener("click", handleOutsideClick, true);
+    return () => {
+      document.removeEventListener("click", handleOutsideClick, true);
     };
   }, [ref]);
 

package/src/hooks/use-turnstile-script/index.js

@@ -0,0 +1,49 @@
+import { useEffect, useState } from "react";
+
+/**
+ * A custom hook to dynamically load the Cloudflare Turnstile script.
+ *
+ * @param {string} verifyURL - The URL of the Turnstile verification script.
+ */
+const useTurnstileScript = verifyURL => {
+  const [scriptLoaded, setScriptLoaded] = useState(false);
+  const [scriptError, setScriptError] = useState(false);
+
+  const handleScriptError = () => {
+    setScriptError(true);
+    setScriptLoaded(false);
+  };
+
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      setScriptLoaded(false);
+      return;
+    }
+    if (window.turnstile && window.turnstile.render) {
+      setScriptLoaded(true);
+      return;
+    }
+
+    const script = document.createElement("script");
+    script.src = `${verifyURL}?render=explicit`;
+    script.onload = () => {
+      setScriptLoaded(true);
+    };
+    script.onerror = () => {
+      handleScriptError();
+    };
+    script.onabort = () => {
+      handleScriptError();
+    };
+    script.defer = true;
+    document.getElementsByTagName("head")[0].appendChild(script);
+
+    return () => {
+      setScriptLoaded(false);
+      setScriptError(false);
+    };
+  }, [verifyURL]);
+
+  return { scriptLoaded, scriptError };
+};
+export default useTurnstileScript;

package/src/util/formats.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { createFormat } from "formatted-input";
 import Text from "../components/atoms/text";
-import { ASH_GREY, FIRE_YELLOW } from "../constants/colors";
+import { ASH_GREY, FIRE_YELLOW, STORM_GREY } from "../constants/colors";
 export const formatDelimiter = "_";
 
 export const phoneFormats = [
@@ -101,7 +101,8 @@ export const renderCardStatus = (
         <Text
           as={as}
           variant="pXS"
-          color={ASH_GREY}
+          fontSize=".75rem"
+          color={STORM_GREY}
           extraStyles={`text-align: ${textAlign}; margin: ${textMargin};`}
         >
           Exp Date {expireDate}
@@ -112,6 +113,7 @@ export const renderCardStatus = (
         <Text
           as={as}
           variant="pXS"
+          fontSize=".75rem"
           color={FIRE_YELLOW}
           extraStyles={`text-align: ${textAlign}; margin: ${textMargin};`}
         >
@@ -123,7 +125,8 @@ export const renderCardStatus = (
         <Text
           as={as}
           variant="pXS"
-          color={ASH_GREY}
+          fontSize=".75rem"
+          color={STORM_GREY}
           extraStyles={`text-align: ${textAlign}; margin: ${textMargin};`}
         >
           Expired

package/src/util/general.js

@@ -4,8 +4,12 @@ import { CHARADE_GREY } from "../constants/colors";
 
 export const noop = () => {};
 
+export const round = (value, decimals = 2) => {
+  return Number(Math.round(Number(`${value}e${decimals}`)) + `e-${decimals}`);
+};
+
 const formatMoneyString = s => numeral(s).format("$0,0.00");
-const convertCentsToMoneyDecimal = n => (n / 100).toFixed(2);
+const convertCentsToMoneyDecimal = n => round(n / 100, 2);
 export const displayCurrency = cents =>
   formatMoneyString(convertCentsToMoneyDecimal(cents));
 
@@ -26,9 +30,14 @@ export const createIdFromString = (text, postscript, unique = false) => {
     // "first name", undefined, false -> "first-name"
     // "email address", "error message", false -> "email-address-error-message"
     // "shopping cart", "order item", true -> "shopping-cart-order-item_2ahtlz608"
-    return `${text?.replace(/\s+/g, "-")}${
-      postscript ? `-${postscript?.replace(/\s+/g, "-")}` : ``
-    }${unique ? createUniqueId() : ``}`;
+    const formatIdString = str =>
+      str && typeof str === "string" ? str.trim().replace(/\s+/g, "-") : "";
+
+    const textIdSegment = formatIdString(text?.toString());
+    const postscriptId = formatIdString(postscript?.toString());
+    const postscriptIdSegment = postscriptId ? `-${postscriptId}` : "";
+    const uniqueIdSegment = unique ? createUniqueId() : "";
+    return `${textIdSegment}${postscriptIdSegment}${uniqueIdSegment}`;
   }
 };
 
@@ -173,3 +182,57 @@ export const wrapIndex = (index, length) => {
     return index;
   }
 };
+
+/**
+ * Adjusts a hex color by lightening or darkening it.
+ *
+ * Intended for use when a satisfactory color is not available in the design system.
+ *
+ * @param {string} hex - The original hex color (e.g., "#3498db").
+ * @param {number} percent - The percentage to adjust the color (0-100).
+ * @param {string} action - The action to perform: 'lighten' or 'darken'.
+ * @returns {string} - The adjusted hex color.
+ * @throws {Error} - Throws an error if the action is not 'lighten' or 'darken'.
+ */
+export const adjustHexColor = (hex, percent, action) => {
+  // Remove hash at the start if present
+  hex = hex.replace(/^\s*#/, "");
+
+  // Parse r, g, b values
+  let r = parseInt(hex.substring(0, 2), 16);
+  let g = parseInt(hex.substring(2, 4), 16);
+  let b = parseInt(hex.substring(4, 6), 16);
+
+  // Adjust RGB values based on the action
+  if (action === "darken") {
+    r = Math.max(0, Math.floor(r * (1 - percent / 100)));
+    g = Math.max(0, Math.floor(g * (1 - percent / 100)));
+    b = Math.max(0, Math.floor(b * (1 - percent / 100)));
+  } else if (action === "lighten") {
+    r = Math.min(255, Math.floor(r + (255 - r) * (percent / 100)));
+    g = Math.min(255, Math.floor(g + (255 - g) * (percent / 100)));
+    b = Math.min(255, Math.floor(b + (255 - b) * (percent / 100)));
+  } else {
+    throw new Error("Action must be either 'lighten' or 'darken'");
+  }
+
+  // Convert back to hex
+  return `#${((1 << 24) + (r << 16) + (g << 8) + b)
+    .toString(16)
+    .slice(1)
+    .padStart(6, "0")}`;
+};
+
+export const arrowBorder = (borderColor, direction, width = "8px") => {
+  const angle = `${width} solid transparent`;
+  const straight = `${width} solid ${borderColor}`;
+  if (direction == "down") {
+    return `border-left: ${angle}; border-right: ${angle}; border-top: ${straight}`;
+  } else if (direction == "up") {
+    return `border-left: ${angle}; border-right: ${angle}; border-bottom: ${straight}`;
+  } else if (direction == "left") {
+    return `border-top: ${angle}; border-bottom: ${angle}; border-right: ${straight}`;
+  } else if (direction == "right") {
+    return `border-top: ${angle}; border-bottom: ${angle}; border-left: ${straight}`;
+  }
+};

package/src/util/idleTimerUtils.js

@@ -0,0 +1,36 @@
+import { useEffect } from "react";
+
+const useLogoutTimers = ({
+  logoutTimerOn = false,
+  action,
+  timeLeftToLogout,
+  handleSetTimeLeft,
+  initialTimeLeftToLogout = 30
+}) => {
+  let timers = { timer: null, interval: null };
+  let timeLeft = timeLeftToLogout;
+
+  useEffect(() => {
+    if (logoutTimerOn) {
+      timers.timer = window.setTimeout(() => {
+        action();
+        handleSetTimeLeft(initialTimeLeftToLogout);
+      }, initialTimeLeftToLogout * 1000);
+    }
+    return () => clearTimeout(timers.timer);
+  }, [logoutTimerOn]);
+
+  useEffect(() => {
+    if (logoutTimerOn) {
+      timers.interval = window.setInterval(() => {
+        timeLeft--;
+        handleSetTimeLeft(timeLeft);
+      }, 1000);
+    }
+    return () => clearInterval(timers.interval);
+  }, [logoutTimerOn]);
+
+  return timers;
+};
+
+export default useLogoutTimers;

package/src/util/index.js

@@ -4,6 +4,7 @@ import * as theme from "./themeUtils";
 import useFocusInvalidInput from "./focusFirstInvalidInputHook";
 import useOutsideClick from "../hooks/use-outside-click";
 import useToastNotification from "../hooks/use-toast-notification";
+import useLogoutTimers from "./idleTimerUtils";
 
 export {
   formats,
@@ -11,5 +12,6 @@ export {
   theme,
   useFocusInvalidInput,
   useOutsideClick,
-  useToastNotification
+  useToastNotification,
+  useLogoutTimers
 };

package/src/util/themeUtils.js

@@ -1,5 +1,6 @@
 import theme from "styled-theming";
-import { useContext } from "react";
+import React from "react";
+import { useContext, forwardRef } from "react";
 import { ThemeContext } from "styled-components";
 /*
 themeContext: { name: "default", values: {JSON_THEME_VALUES_HERE} }
@@ -105,24 +106,33 @@ export const createThemeValues = (
 };
 
 export const themeComponent = (
-  component,
+  Component,
   componentThemeId,
   fallbackValues,
   defaultVariant
-) => ({ variant = defaultVariant, ...props }) => {
-  const themeContext = useContext(ThemeContext);
-  const metadata = themeContext?.metadata ?? {};
-  const themeValues = themeContext
-    ? createThemeValues(themeContext, fallbackValues, componentThemeId, variant)
-    : fallbackValues;
+) =>
+  forwardRef(({ variant = defaultVariant, ...props }, ref) => {
+    const themeContext = useContext(ThemeContext);
+    const metadata = themeContext?.metadata ?? {};
+    const themeValues = themeContext
+      ? createThemeValues(
+          themeContext,
+          fallbackValues,
+          componentThemeId,
+          variant
+        )
+      : fallbackValues;
 
-  return component({
-    ...props,
-    themeValues,
-    variant,
-    metadata
+    return (
+      <Component
+        {...props}
+        themeValues={themeValues}
+        variant={variant}
+        metadata={metadata}
+        ref={ref}
+      />
+    );
   });
-};
 
 /*
 Keeping this around for now in case we need it later...