@lightsparkdev/ui 1.1.0 → 1.1.1

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @lightsparkdev/ui
 
+## 1.1.1
+
+### Patch Changes
+
+- b21b85e: \* Surface error name when the requester hits a graphQL error.
+  - Update Turbo
+  - Several small UI package improvements.
+- Updated dependencies [b21b85e]
+  - @lightsparkdev/core@1.3.1
+
 ## 1.1.0
 
 ### Minor Changes

package/dist/{chunk-G5OXWQR6.cjs → chunk-27KFOQ2E.cjs}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunk3GKIKZL2cjs = require('./chunk-3GKIKZL2.cjs');
+var _chunkYZ2C4D6Ncjs = require('./chunk-YZ2C4D6N.cjs');
 
 
 
@@ -14,7 +14,7 @@ function SecretInput(_a) {
   var rest = _chunkZ6EUSUADcjs.__objRest.call(void 0, _a, []);
   const [showSecret, setShowSecret] = _react.useState.call(void 0, false);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunk3GKIKZL2cjs.TextInput,
+    _chunkYZ2C4D6Ncjs.TextInput,
     _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, rest), {
       type: showSecret ? void 0 : "password",
       onClickIcon: () => setShowSecret(!showSecret),

package/dist/chunk-2FEYG26P.js

@@ -0,0 +1,16 @@
+// src/hooks/useQueryParams.tsx
+import { useMemo } from "react";
+import { useLocation } from "react-router-dom";
+function useQueryParams() {
+  const { search } = useLocation();
+  return useMemo(() => new URLSearchParams(search), [search]);
+}
+function useQueryParamBoolean(param) {
+  const queryParams = useQueryParams();
+  return useMemo(() => queryParams.get(param) === "1", [queryParams, param]);
+}
+
+export {
+  useQueryParams,
+  useQueryParamBoolean
+};

package/dist/{chunk-ITYZTIJS.js → chunk-2NFFDKIX.js}

@@ -1,18 +1,18 @@
-import {
-  flexCenter
-} from "./chunk-RKAVKJX6.js";
 import {
   Loading
-} from "./chunk-MYRSWJPJ.js";
+} from "./chunk-WW3KFUFD.js";
 import {
   UnstyledButton
-} from "./chunk-Z6I64NIF.js";
+} from "./chunk-3HIDFTSK.js";
+import {
+  flexCenter
+} from "./chunk-KKGZ47R3.js";
 import {
   Icon
-} from "./chunk-DJOYSVI3.js";
+} from "./chunk-YTKSEJHA.js";
 import {
   colors
-} from "./chunk-YJIIP7IY.js";
+} from "./chunk-WAGTMEWB.js";
 
 // src/components/Pill.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-U6EBWLCK.js → chunk-2OE2VPDJ.js}

@@ -1,34 +1,34 @@
 import {
   Loading
-} from "./chunk-MYRSWJPJ.js";
+} from "./chunk-WW3KFUFD.js";
 import {
   Tooltip
-} from "./chunk-KPNJ6H7M.js";
+} from "./chunk-D2TOV5JJ.js";
 import {
   UnstyledButton
-} from "./chunk-Z6I64NIF.js";
+} from "./chunk-3HIDFTSK.js";
 import {
   Icon
-} from "./chunk-DJOYSVI3.js";
+} from "./chunk-YTKSEJHA.js";
 import {
   getFocusOutline
-} from "./chunk-E46IHC27.js";
+} from "./chunk-ANZUTQRP.js";
 import {
   Link
-} from "./chunk-5HDXWO2E.js";
+} from "./chunk-PTJ7AVLT.js";
 import {
   renderTypography
-} from "./chunk-6H54ZONZ.js";
+} from "./chunk-UL6O4F7D.js";
 import {
   select
 } from "./chunk-YMNSXZ5D.js";
 import {
   applyTypography
-} from "./chunk-H2R5LMTF.js";
+} from "./chunk-J44WQFQT.js";
 import {
   getBackgroundColor,
   isThemeOrColorKey
-} from "./chunk-AM7EMJXN.js";
+} from "./chunk-33OPRYWV.js";
 import {
   __objRest,
   __spreadProps,

package/dist/{chunk-OI4UESYK.cjs → chunk-2RXMYPBB.cjs}

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 
-var _chunk7H2OXTENcjs = require('./chunk-7H2OXTEN.cjs');
+var _chunkXQNOVNF4cjs = require('./chunk-XQNOVNF4.cjs');
 
 
 var _chunkKW3JYLRIcjs = require('./chunk-KW3JYLRI.cjs');
@@ -68,46 +68,46 @@ var baseHeading = ({ mt, mb, mtSm, mbSm, theme }) => _react.css`
     margin-bottom: ${mbSm}px;
   `)}
 `;
-var firstChildStyles = _chunk7H2OXTENcjs.firstChild.call(void 0, `margin-top: 0;`);
+var firstChildStyles = _chunkXQNOVNF4cjs.firstChild.call(void 0, `margin-top: 0;`);
 var headings = {
   h1: _styled2.default.h1`
     ${(props) => baseHeading(props)}
     ${firstChildStyles}
 
-    font-size: ${_chunk7H2OXTENcjs.pxToRems.call(void 0, defaultHeadingSizes.h1.size)};
+    font-size: ${_chunkXQNOVNF4cjs.pxToRems.call(void 0, defaultHeadingSizes.h1.size)};
     font-weight: ${({ light }) => light ? 400 : 800}};
     ${_chunkKW3JYLRIcjs.bp.sm(`
-      font-size: ${_chunk7H2OXTENcjs.pxToRems.call(void 0, defaultHeadingSizes.h1.sizeSm)};
+      font-size: ${_chunkXQNOVNF4cjs.pxToRems.call(void 0, defaultHeadingSizes.h1.sizeSm)};
     `)}
   `,
   h2: _styled2.default.h2`
     ${(props) => baseHeading(props)}
     ${firstChildStyles}
 
-    font-size: ${_chunk7H2OXTENcjs.pxToRems.call(void 0, defaultHeadingSizes.h2.size)};
+    font-size: ${_chunkXQNOVNF4cjs.pxToRems.call(void 0, defaultHeadingSizes.h2.size)};
     font-weight: ${({ light }) => light ? 400 : 700}};
     ${_chunkKW3JYLRIcjs.bp.sm(`
-      font-size: ${_chunk7H2OXTENcjs.pxToRems.call(void 0, defaultHeadingSizes.h2.sizeSm)};
+      font-size: ${_chunkXQNOVNF4cjs.pxToRems.call(void 0, defaultHeadingSizes.h2.sizeSm)};
     `)}
   `,
   h3: _styled2.default.h3`
     ${(props) => baseHeading(props)}
     ${firstChildStyles}
 
-    font-size: ${_chunk7H2OXTENcjs.pxToRems.call(void 0, defaultHeadingSizes.h3.size)};
+    font-size: ${_chunkXQNOVNF4cjs.pxToRems.call(void 0, defaultHeadingSizes.h3.size)};
     font-weight: ${({ light }) => light ? 400 : 700}};
     ${_chunkKW3JYLRIcjs.bp.sm(`
-      font-size: ${_chunk7H2OXTENcjs.pxToRems.call(void 0, defaultHeadingSizes.h3.sizeSm)};
+      font-size: ${_chunkXQNOVNF4cjs.pxToRems.call(void 0, defaultHeadingSizes.h3.sizeSm)};
     `)}
   `,
   h4: _styled2.default.h4`
     ${(props) => baseHeading(props)}
     ${firstChildStyles}
 
-    font-size: ${_chunk7H2OXTENcjs.pxToRems.call(void 0, defaultHeadingSizes.h4.size)};
+    font-size: ${_chunkXQNOVNF4cjs.pxToRems.call(void 0, defaultHeadingSizes.h4.size)};
     font-weight: ${({ light }) => light ? 400 : 600}};
     ${_chunkKW3JYLRIcjs.bp.sm(`
-      font-size: ${_chunk7H2OXTENcjs.pxToRems.call(void 0, defaultHeadingSizes.h4.sizeSm)};
+      font-size: ${_chunkXQNOVNF4cjs.pxToRems.call(void 0, defaultHeadingSizes.h4.sizeSm)};
     `)}
   `
 };

package/dist/{chunk-BL5NDVAZ.cjs → chunk-2VEWSENQ.cjs}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunk6Z6ZBZEJcjs = require('./chunk-6Z6ZBZEJ.cjs');
+var _chunk4N5EXQIScjs = require('./chunk-4N5EXQIS.cjs');
 
 // src/components/Loading.tsx
 var _react = require('@emotion/react');
@@ -16,7 +16,7 @@ function Loading({
 }) {
   const theme = _react.useTheme.call(void 0, );
   const iconName = resolveLoadingProp(null, kind, "defaultIconName", theme);
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LoadingWrapper, { center, ml, mt, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Rotate, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk6Z6ZBZEJcjs.Icon, { name: iconName, width: size }) }) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LoadingWrapper, { center, ml, mt, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Rotate, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk4N5EXQIScjs.Icon, { name: iconName, width: size }) }) });
 }
 var LoadingWrapper = _styled2.default.div`
   flex-grow: 1;

package/dist/chunk-2VVOVGDU.js

@@ -0,0 +1,251 @@
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk-W7FAWX6T.js";
+
+// src/hooks/useFields.tsx
+import { isValidUmaAddress } from "@uma-sdk/core";
+import { diff } from "deep-object-diff";
+import { isObject } from "lodash-es";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+var defaultMsgs = {
+  email: "Please enter a valid email address.",
+  phone: "Please enter a valid phone number.",
+  postalCode: "Please enter a valid zip code.",
+  state: "Please enter a valid two-letter state abbreviation.",
+  name: "Name must be at least three characters.",
+  code: "Code must be eight characters long.",
+  password: "Password must be at least eight characters.",
+  required: "This field is required.",
+  umaAddress: "Please enter a valid UMA address."
+};
+var regexp = {
+  phone: /^[2-9]{1}[0-9]{9}$/,
+  postalCode: /(^\d{5}$)|(^\d{5}-\d{4}$)/,
+  email: /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/,
+  state: /^(A[LKSZRAEP]|C[AOT]|D[EC]|F[LM]|G[AU]|HI|I[ADLN]|K[SY]|LA|M[ADEHINOPST]|N[CDEHJMVY]|O[HKR]|P[ARW]|RI|S[CD]|T[NX]|UT|V[AIT]|W[AIVY])$/
+};
+var v = {
+  email: (msg = defaultMsgs.email) => (value) => !regexp.email.test(value) ? msg : false,
+  phone: (msg = defaultMsgs.phone) => (value) => !regexp.phone.test(value) ? msg : false,
+  postalCode: (msg = defaultMsgs.postalCode) => (value) => !regexp.postalCode.test(value) ? msg : false,
+  state: (msg = defaultMsgs.state) => (value) => !regexp.state.test(value) ? msg : false,
+  name: (msg = defaultMsgs.name) => (value) => value.trim().length < 3 ? msg : false,
+  code: (msg = defaultMsgs.code) => (value) => value.trim().length !== 8 ? msg : false,
+  umaAddress: (msg = defaultMsgs.umaAddress) => (value) => !isValidUmaAddress(value) ? msg : false,
+  required: (msg = defaultMsgs.required) => (value) => value.trim() === "" ? msg : false,
+  min: (msg, minLength = 3) => (value) => {
+    const len = typeof minLength === "number" ? minLength : 3;
+    return value.trim().length < len ? msg || `Must be at least ${len} characters long.` : false;
+  }
+};
+var defaultValidators = {
+  password: [
+    v.required("Password is required."),
+    // This needs to stay as 8 otherwise users with old shorter passwords
+    // can't login.
+    v.min("Password must be at least eight characters.", 8)
+  ],
+  city: [v.required("City is required.")],
+  name: [v.required("Name is required."), v.name()],
+  code: [v.required("Please enter a code."), v.code()],
+  email: [v.required("Email is required."), v.email()],
+  phoneNumber: [v.required("Phone number is required."), v.phone()],
+  birthdayDay: [v.min("Day is required.", 1)],
+  birthdayMonth: [v.min("Day is required.", 1)],
+  birthdayYear: [v.min("Day is required.", 4)],
+  postalCode: [v.required("Zip code is required."), v.postalCode()],
+  addressCountryCode: [v.required("Country code is required.")],
+  addressLine1: [v.required("Address is required.")],
+  addressLine2: [],
+  addressCity: [v.required("City is required.")],
+  addressState: [v.required("State is required.")],
+  addressZipCode: [v.required("Zip code is required.")]
+};
+var f = {
+  numeric: (value) => value.replace(/[^0-9]/g, "")
+};
+var defaultFormatters = {
+  birthdayDay: f.numeric,
+  birthdayMonth: f.numeric,
+  birthdayYear: f.numeric
+};
+function getFirstFieldError(fieldName, fieldValue, validatorsArg) {
+  if (typeof validatorsArg === "undefined" || validatorsArg === true) {
+    const validators = defaultValidators[fieldName];
+    if (validators) {
+      for (const validator of validators) {
+        const errorMsg = validator(fieldValue);
+        if (errorMsg) {
+          return errorMsg;
+        }
+      }
+    }
+  } else if (typeof validatorsArg !== "undefined") {
+    if (validatorsArg === false) {
+      return null;
+    }
+    for (const validator of validatorsArg) {
+      const errorMsg = validator(fieldValue);
+      if (errorMsg) {
+        return errorMsg;
+      }
+    }
+  }
+  return null;
+}
+function reduceToUndef(fields) {
+  return Object.keys(fields).reduce(
+    (acc, key) => __spreadProps(__spreadValues({}, acc), { [key]: void 0 }),
+    {}
+  );
+}
+function reduceToFalse(fields) {
+  return Object.keys(fields).reduce(
+    (acc, key) => __spreadProps(__spreadValues({}, acc), { [key]: false }),
+    {}
+  );
+}
+function reduceToFields(fields) {
+  return Object.entries(fields).reduce((acc, [key, fieldValueArg]) => {
+    if (typeof fieldValueArg === "string") {
+      return __spreadProps(__spreadValues({}, acc), { [key]: fieldValueArg });
+    }
+    return __spreadProps(__spreadValues({}, acc), { [key]: fieldValueArg[0] });
+  }, {});
+}
+function useFields(defaultFieldsFn, deps = []) {
+  const defaultFields = useMemo(defaultFieldsFn, deps);
+  const prevDefaultFields = useRef(defaultFields);
+  const [fields, setFields] = useState(reduceToFields(defaultFields));
+  const [fieldErrors, setFieldErrors] = useState(reduceToUndef(defaultFields));
+  const [blurredFields, setBlurredFields] = useState(
+    reduceToFalse(defaultFields)
+  );
+  const checkFieldForError = useCallback(
+    (fieldName, fieldValue) => {
+      const defaultField = defaultFields[fieldName];
+      const customValidators = typeof defaultField === "string" ? void 0 : defaultField[1];
+      const fieldError = getFirstFieldError(
+        fieldName,
+        fieldValue,
+        customValidators
+      );
+      if (blurredFields[fieldName]) {
+        setFieldErrors((currentFieldErrors) => __spreadProps(__spreadValues({}, currentFieldErrors), {
+          [fieldName]: fieldError
+        }));
+      }
+      return fieldError;
+    },
+    [defaultFields, blurredFields]
+  );
+  const checkFieldsForError = useCallback(
+    (fieldsToCheck) => {
+      Object.entries(fieldsToCheck).forEach(([key, value]) => {
+        checkFieldForError(key, value);
+      });
+    },
+    [checkFieldForError]
+  );
+  const setFieldBlurred = useCallback(
+    (fieldName) => {
+      const newBlurredFields = __spreadProps(__spreadValues({}, blurredFields), {
+        [fieldName]: true
+      });
+      setBlurredFields(newBlurredFields);
+    },
+    [blurredFields]
+  );
+  const getSetFieldBlurred = useCallback(
+    (fieldName) => {
+      return () => {
+        setFieldBlurred(fieldName);
+      };
+    },
+    [setFieldBlurred]
+  );
+  const formatValue = useCallback((fieldName, value) => {
+    const formatter = defaultFormatters[fieldName];
+    return formatter ? formatter(value) : value;
+  }, []);
+  const mergeWithFields = useCallback(
+    (updatedFields) => {
+      setFields((latestFields) => {
+        const formatted = Object.entries(updatedFields).reduce(
+          (acc, [key, value]) => {
+            const val = typeof value === "string" ? value : Array.isArray(value) && typeof value[0] === "string" ? value[0] : "";
+            return __spreadProps(__spreadValues({}, acc), {
+              [key]: formatValue(key, val)
+            });
+          },
+          {}
+        );
+        return __spreadValues(__spreadValues({}, latestFields), formatted);
+      });
+      checkFieldsForError(updatedFields);
+    },
+    [checkFieldsForError, formatValue]
+  );
+  const allFieldsValid = useMemo(() => {
+    const valid = !Object.entries(fields).some(([fieldName, fieldValue]) => {
+      const defaultField = defaultFields[fieldName];
+      const customValidators = typeof defaultField === "string" ? void 0 : defaultField[1];
+      const firstFieldError = getFirstFieldError(
+        fieldName,
+        fieldValue,
+        customValidators
+      );
+      return firstFieldError;
+    });
+    return valid;
+  }, [fields, defaultFields]);
+  const getUpdateField = useCallback(
+    (fieldName) => {
+      return (newValue) => {
+        mergeWithFields({
+          [fieldName]: formatValue(fieldName, newValue)
+        });
+      };
+    },
+    [mergeWithFields, formatValue]
+  );
+  useEffect(() => {
+    const newFields = {};
+    const diffProps = diff(prevDefaultFields.current, defaultFields);
+    Object.entries(diffProps).forEach(([key, value]) => {
+      if (typeof value === "string") {
+        newFields[key] = value;
+      } else if (isObject(value)) {
+        Object.entries(value).forEach(([arrayKey, arrayValue]) => {
+          if (arrayKey === "0" && typeof arrayValue === "string") {
+            newFields[key] = arrayValue;
+          }
+        });
+      }
+    });
+    mergeWithFields(newFields);
+    prevDefaultFields.current = defaultFields;
+  }, [defaultFields, mergeWithFields]);
+  useEffect(() => {
+    checkFieldsForError(fields);
+  }, [blurredFields, fields, checkFieldsForError]);
+  return {
+    blurredFields,
+    getUpdateField,
+    allFieldsValid,
+    checkFieldForError,
+    fieldErrors,
+    /* needs to be a new object to ensure downstream effects are notified on updates: */
+    fields: __spreadValues({}, fields),
+    mergeWithFields,
+    setFieldBlurred,
+    getSetFieldBlurred,
+    setFieldErrors
+  };
+}
+
+export {
+  v,
+  useFields
+};