@cayuse-test/react 1.0.0

package/dist/styles-YXNJHPDZ.css

@@ -0,0 +1,74 @@
+.cayuse_radio {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.cayuse_radio-input {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  vertical-align: text-bottom;
+  width: 16px;
+  height: 16px;
+  background-clip: content-box;
+  border: 1px solid #000;
+  border-radius: 50%;
+  margin: 0 8px 0 0 !important;
+  transition: 0.2s ease;
+  cursor: pointer;
+}
+
+.cayuse_radio-input.invalid {
+  background-color: #ffe8e6;
+  border-color: #b31200;
+  border-width: 2px;
+}
+
+.cayuse_radio-input:checked {
+  border-color: #0076b6;
+  border-width: 5px;
+}
+
+.cayuse_radio-input:focus {
+  outline: 2px solid #5092f7;
+  outline-offset: 1px;
+}
+
+.cayuse_radio-input:disabled {
+  background-color: #adadad;
+  border-color: #adadad;
+  border-width: 1px;
+  cursor: default;
+}
+
+.cayuse_radio-input:disabled:checked {
+  background-color: white;
+  border-color: #adadad;
+  border-width: 5px;
+  cursor: default;
+}
+
+.cayuse_radio-help-text {
+  margin-left: 24px;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 12px;
+  color: #5e5e5e;
+}
+
+.cayuse_radio-label {
+  position: relative;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  vertical-align: text-bottom;
+  display: flex;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 16px;
+  padding-inline-start: 0;
+  padding-inline-end: 0;
+  color: #111111;
+  cursor: pointer;
+}

package/dist/styles-Z276IEVM.css

@@ -0,0 +1,264 @@
+.custom-dropdown__container {
+  position: relative;
+  display: inline-block;
+}
+
+.custom-dropdown__button:focus {
+  outline: -webkit-focus-ring-color auto 1px !important;
+}
+
+.custom-dropdown__button {
+  border: none !important;
+  color: #333 !important;
+  cursor: pointer;
+  font-weight: bold !important;
+  height: 100%;
+  line-height: 2;
+  padding: 0.7143rem calc(1.0714rem * 2) !important;
+  background-color: transparent !important;
+  transition:
+    background-color 300ms ease,
+    color 300ms ease;
+}
+
+@media screen and (max-width: 768px) {
+  .custom-dropdown__button {
+    padding: 10px 15px !important;
+  }
+}
+
+.custom-dropdown__button:hover {
+  background-color: #f5f5f5 !important;
+  color: #333 !important;
+}
+
+.custom-dropdown__button::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: transparent;
+  height: 4px;
+  transition: background-color 300ms ease;
+  will-change: background-color;
+}
+
+.custom-dropdown__button[aria-expanded='true']::after {
+  background-color: #0076b6;
+}
+
+.custom-dropdown__button[aria-expanded='true'] {
+  color: #0076b6 !important;
+}
+
+.custom-dropdown__button > i {
+  position: relative;
+  width: auto;
+  font-size: 0.85714286em;
+  margin: 0 0 0 1em;
+  line-height: 1;
+  height: 1em;
+  backface-visibility: hidden;
+  font-weight: 400;
+  font-style: normal;
+  text-align: center;
+}
+
+.custom-dropdown .menuList {
+  position: absolute;
+  list-style-type: none;
+  display: none;
+  cursor: auto;
+  outline: 0;
+  min-width: -moz-max-content;
+  min-width: max-content;
+  margin: 0;
+  background: #fff;
+  font-size: 1em;
+  text-shadow: none;
+  text-align: left;
+  transition: opacity 0.1s ease;
+  z-index: 11;
+  will-change: transform, opacity;
+  top: 50px;
+  border: solid #e0e0e0 1px;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  box-shadow: 0 2px 4px rgba(51, 51, 51, 0.5);
+  padding: 0.7143rem 0;
+}
+
+@media screen and (max-width: 768px) {
+  .custom-dropdown .menuList {
+    height: 100px;
+    overflow-x: auto;
+    overflow-y: scroll;
+  }
+}
+
+.custom-dropdown .menuListOpen {
+  display: block;
+}
+
+.custom-dropdown .menuList > li {
+  display: flex;
+  margin: 0;
+  padding: 0;
+}
+
+.custom-dropdown .menuList > li:hover {
+  background: rgba(0, 0, 0, 0.05);
+  color: rgba(0, 0, 0, 0.95);
+}
+
+.custom-dropdown .menuList > li:focus-within {
+  background: rgba(0, 0, 0, 0.05);
+  color: rgba(0, 0, 0, 0.95);
+}
+
+.custom-dropdown .menuList:not(.custom-styling) > li.active {
+  border-bottom: 4px solid #0076b6;
+  color: #0076b6;
+  font-weight: 700;
+}
+
+.custom-dropdown .menuList > li > a {
+  cursor: pointer;
+  line-height: 1em;
+  padding: 0.78571429rem 1.14285714rem;
+  font-size: 1rem;
+  box-shadow: none;
+  -webkit-touch-callout: none;
+  white-space: nowrap;
+  color: inherit;
+  text-decoration: none;
+  outline: 0;
+  width: 100%;
+}
+
+.custom-dropdown .menuList.custom-styling li {
+  font-size: 1rem;
+  color: rgba(0, 0, 0, 0.87);
+}
+
+.custom-dropdown .menuList.custom-styling li.disabled {
+  cursor: default;
+  pointer-events: none;
+  opacity: 0.45;
+  font-weight: 700;
+}
+
+.custom-dropdown .menuList.custom-styling li.active {
+  background: 0 0;
+  font-weight: 700;
+  color: rgba(0, 0, 0, 0.95);
+  box-shadow: none;
+  z-index: 12;
+}
+
+@media screen and (max-width: 768px) {
+  .custom-dropdown .menuList > li > a {
+    font-size: 12px;
+    padding: 8px 10px;
+  }
+
+  .custom-dropdown li:not(.custom-styling) {
+    font-size: 12px;
+    padding: 8px 10px;
+  }
+}
+
+.custom-dropdown:not(.custom-styling) {
+  background-color: white !important;
+}
+
+.custom-dropdown:not(.custom-styling) .menuList {
+  padding: 0;
+  top: -165px;
+  box-shadow: none;
+  width: 99.9%;
+  border-radius: 0.28571429rem 0.28571429rem 0 0;
+}
+
+.custom-dropdown:not(.custom-styling) button {
+  box-shadow: none;
+  border: 1px solid rgba(34, 36, 38, 0.15) !important;
+  border-radius: 0.28571429rem;
+  font-size: 14px;
+  font-weight: normal !important;
+  background: white;
+  padding: 5px 5px 5px 10px !important;
+}
+
+.custom-dropdown:not(.custom-styling) button i {
+  margin-right: 0;
+  margin-left: 4px;
+}
+
+.custom-dropdown:not(.custom-styling) button i::before {
+  font-size: 0.85em;
+}
+
+.custom-dropdown:not(.custom-styling) button[aria-expanded='true']::after {
+  background-color: transparent;
+}
+
+.custom-dropdown button:focus {
+  outline: -webkit-focus-ring-color auto 1px !important;
+}
+
+.custom-dropdown:not(.custom-styling) button[aria-expanded='true'],
+.custom-dropdown:not(.custom-styling) button:hover {
+  color: black !important;
+  background-color: white !important;
+}
+
+.custom-dropdown:not(.custom-styling) button:hover {
+  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.05) !important;
+  border-color: rgba(34, 36, 38, 0.35) !important;
+}
+
+.custom-dropdown:not(.custom-styling) button[aria-expanded='true'] {
+  border-color: #96c8da !important;
+}
+
+.custom-dropdown .menuList > li {
+  cursor: pointer;
+  line-height: 1em;
+  padding: 0.78571429rem 1.14285714rem;
+  width: 100%;
+}
+
+.custom-dropdown:not(.custom-styling) li:hover,
+.custom-dropdown:not(.custom-styling) li[aria-selected='true'] {
+  font-weight: 700;
+}
+
+.custom-styling button {
+  background: transparent;
+  border: none;
+  outline: none;
+  padding: 0;
+  margin: 0;
+  width: -webkit-fill-available;
+  width: -moz-available;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.custom-styling .menuList {
+  left: 0;
+  top: 100%;
+  width: 100%;
+}
+
+.custom-styling.disabled {
+  cursor: default;
+  pointer-events: none;
+  opacity: 1;
+  background: #f2f2f2 !important;
+  color: #999 !important;
+  border: 1px solid #cccccc !important;
+}

package/dist/utils/index.d.ts

@@ -0,0 +1,145 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+
+declare function storeItem(key: string, item: any, storage?: Storage): void;
+declare function getStoredItem(key: string, storage?: Storage): any;
+declare function flushStorage(storage?: Storage): void;
+
+interface User {
+    username: string;
+    tenantId?: string;
+    [key: string]: any;
+}
+interface AuthContextValue {
+    isAuthenticated: boolean;
+    loading: boolean;
+    user: User | null;
+    loginWithRedirect: (params: LoginParams) => void;
+    refreshToken: () => Promise<boolean>;
+}
+interface LoginParams {
+    tenantId?: string;
+    isGuest?: boolean;
+}
+interface CayuseHeader {
+    product: string;
+    host: string;
+    userId: string;
+    authenticationToken: string;
+}
+interface AuthProviderProps {
+    children: React__default.ReactNode;
+    PRODUCT_KEY: string;
+    setCayuseHeader: (header: CayuseHeader) => void;
+    tokenRefreshUrl?: string;
+    isGuest?: boolean;
+}
+declare const AuthContext: React__default.Context<AuthContextValue | undefined>;
+declare const useAuth: () => AuthContextValue;
+declare const ACCESS_TOKEN: "fk_accessToken";
+declare function loginWithRedirect({ tenantId, isGuest }: LoginParams): void;
+declare const AuthProvider: React__default.FC<AuthProviderProps>;
+declare const withAuth: <P extends object>(Component: React__default.ComponentType<P & {
+    context: AuthContextValue;
+}>) => (props: P) => react_jsx_runtime.JSX.Element;
+
+declare const simulateInputBlur: (input: HTMLInputElement) => void;
+declare const simulateInputChange: (input: HTMLInputElement, value: string | null) => void;
+declare const getElementAncestorComponent: (initialElement: HTMLElement, targetComponentName: string) => HTMLElement | undefined;
+
+declare const extractQuestionsFromSection: (section: any) => any[];
+declare const getFormElementsByIds: (formElements: any[], fieldIds: string[]) => any[];
+
+/**
+ * expects plain object hash of { stringClassName: boolShouldInclude } key-value pairs
+ * @deprecated use `classNames` package instead
+ */
+declare const crunchClasses: (classHash: Record<string, boolean>) => string;
+/**
+ * Use `uuid` or `React.useId` instead
+ */
+declare const generateId: (prefix: string) => string;
+declare const injectScript: (src: string, { target, ...rest }: {
+    target?: HTMLElement;
+} & Partial<HTMLScriptElement>) => HTMLScriptElement | undefined;
+declare const removeDOMNode: <T extends Node>(node: T) => T;
+declare const debounce: <T extends (...args: any[]) => any>(callback: T, wait: number) => ((...args: Parameters<T>) => void);
+interface SearchTerm {
+    key: string;
+    val?: string;
+    operator?: string;
+}
+declare const encodeSearchTerms: (searchTerms: SearchTerm | SearchTerm[], { shouldEncodeUri }?: {
+    shouldEncodeUri?: boolean;
+}) => string[];
+declare const sortCollectionByKey: <T extends Record<string, any>>(collection: T[], key: string) => T[];
+declare const alphaSortCollectionByKey: <T extends Record<string, any>>(collection: T[], key: string) => T[];
+/**
+ * Get the datetime format for the current or fallback locale.
+ *
+ * @returns {{
+ *   date: string,
+ *   time: string,
+ *   datePlaceholder: string,
+ * }} The datetime format for the locale.
+ */
+declare const getDatetimeFormat: () => {
+    date: string;
+    time: string;
+    datePlaceholder: string;
+};
+/**
+ * Note, the escaped characters are needed for the regex to work right
+ */
+declare const trim: (string: string, target?: string) => string;
+declare const capitalizeAndJoin: (items: string[], splitter?: string, separator?: string) => string;
+
+interface CayuseGlobal {
+    appGetTokenSilently?: () => string | Promise<string>;
+}
+declare global {
+    var global: typeof globalThis & {
+        __CAYUSE__: CayuseGlobal | undefined;
+    };
+}
+/**
+ * Apps must "register" a global function to get tokens in the background using registerGetTokenSilently
+ */
+declare const registerGetTokenSilently: (getTokenSilentlyFunction: () => string | Promise<string>) => void;
+declare class CayuseError extends Error {
+    name: string;
+    message: string;
+    cause: Response | null;
+    response: Response | null;
+    meta: {
+        spRequestId: string;
+        flowableDesignRequestId: string;
+        flowableEngageRequestId: string;
+    };
+    constructor(message: string, httpResponseObject?: Response | null);
+}
+declare function isCayuseError(error: any): error is CayuseError;
+declare const checkErrorBody: (error: Response) => Promise<void>;
+interface FetchArgs {
+    numRetries?: number;
+    attemptNumber?: number;
+    notifyUponError?: boolean;
+}
+declare const executeRequest: (url: string, options?: RequestInit, args?: FetchArgs) => Promise<any>;
+declare const request: (url: string, options?: {}, args?: {}) => Promise<any>;
+
+declare const isNonEmptyString: (value: unknown) => value is string;
+declare const isString: (value: unknown) => value is string;
+declare const isNumber: (value: unknown) => value is number;
+declare const isBool: (value: unknown) => value is boolean;
+declare const isArray: (arg: any) => arg is any[];
+declare const isNonEmptyArray: (value: unknown) => boolean;
+declare const isNonEmptyMap: (value: unknown) => boolean;
+declare const isFunction: (value: unknown) => value is Function;
+declare const isObject: (object: object) => boolean;
+declare const isNonEmptyObject: (object?: object) => boolean | undefined;
+declare const isObjectWithKey: <T extends object>(object: T, key: string) => boolean;
+declare const isMap: (value: object) => boolean;
+declare const isUrl: (string: string) => boolean;
+
+export { ACCESS_TOKEN, AuthContext, AuthProvider, CayuseError, alphaSortCollectionByKey, capitalizeAndJoin, checkErrorBody, crunchClasses, debounce, encodeSearchTerms, executeRequest, extractQuestionsFromSection, flushStorage, generateId, getDatetimeFormat, getElementAncestorComponent, getFormElementsByIds, getStoredItem, injectScript, isArray, isBool, isCayuseError, isFunction, isMap, isNonEmptyArray, isNonEmptyMap, isNonEmptyObject, isNonEmptyString, isNumber, isObject, isObjectWithKey, isString, isUrl, loginWithRedirect, registerGetTokenSilently, removeDOMNode, request, simulateInputBlur, simulateInputChange, sortCollectionByKey, storeItem, trim, useAuth, withAuth };

package/dist/utils/index.js

@@ -0,0 +1,98 @@
+import {
+  alphaSortCollectionByKey,
+  capitalizeAndJoin,
+  crunchClasses,
+  debounce,
+  encodeSearchTerms,
+  extractQuestionsFromSection,
+  flushStorage,
+  generateId,
+  getDatetimeFormat,
+  getElementAncestorComponent,
+  getFormElementsByIds,
+  getStoredItem,
+  injectScript,
+  removeDOMNode,
+  simulateInputBlur,
+  simulateInputChange,
+  sortCollectionByKey,
+  storeItem,
+  trim
+} from "../chunk-RG4GEORO.js";
+import {
+  ACCESS_TOKEN,
+  AuthContext,
+  AuthProvider,
+  loginWithRedirect,
+  useAuth,
+  withAuth
+} from "../chunk-XRUFEGUC.js";
+import "../chunk-MJBMK4OG.js";
+import {
+  CayuseError,
+  checkErrorBody,
+  executeRequest,
+  isArray,
+  isBool,
+  isCayuseError,
+  isFunction,
+  isMap,
+  isNonEmptyArray,
+  isNonEmptyMap,
+  isNonEmptyObject,
+  isNonEmptyString,
+  isNumber,
+  isObject,
+  isObjectWithKey,
+  isString,
+  isUrl,
+  registerGetTokenSilently,
+  request
+} from "../chunk-SZMEZFAR.js";
+export {
+  ACCESS_TOKEN,
+  AuthContext,
+  AuthProvider,
+  CayuseError,
+  alphaSortCollectionByKey,
+  capitalizeAndJoin,
+  checkErrorBody,
+  crunchClasses,
+  debounce,
+  encodeSearchTerms,
+  executeRequest,
+  extractQuestionsFromSection,
+  flushStorage,
+  generateId,
+  getDatetimeFormat,
+  getElementAncestorComponent,
+  getFormElementsByIds,
+  getStoredItem,
+  injectScript,
+  isArray,
+  isBool,
+  isCayuseError,
+  isFunction,
+  isMap,
+  isNonEmptyArray,
+  isNonEmptyMap,
+  isNonEmptyObject,
+  isNonEmptyString,
+  isNumber,
+  isObject,
+  isObjectWithKey,
+  isString,
+  isUrl,
+  loginWithRedirect,
+  registerGetTokenSilently,
+  removeDOMNode,
+  request,
+  simulateInputBlur,
+  simulateInputChange,
+  sortCollectionByKey,
+  storeItem,
+  trim,
+  useAuth,
+  withAuth
+};
+//# sourceMappingURL=index.js.map

package/dist/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/package.json

@@ -0,0 +1,113 @@
+{
+  "name": "@cayuse-test/react",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./eslint-config/*": {
+      "import": "./packages/eslint-config/*.js"
+    },
+    "./typescript-config/*": {
+      "default": "./packages/typescript-config/*.json"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "packages/eslint-config",
+    "packages/typescript-config",
+    "README.md"
+  ],
+  "engines": {
+    "node": ">=20"
+  },
+  "packageManager": "pnpm@10.14.0",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@bitbucket.org/cayusellc/cayuse-react-components.git"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "check-types": "tsc --noEmit",
+    "format": "prettier --write \"**/*.{js,ts,tsx,md}\"",
+    "preinstall": "bash scripts/install-hooks.sh",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "test": "vitest",
+    "prepublishOnly": "pnpm run build"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "6.7.2",
+    "@fortawesome/free-solid-svg-icons": "6.7.2",
+    "@fortawesome/react-fontawesome": "0.2.2",
+    "@transloadit/prettier-bytes": "1.0.1",
+    "@uppy/aws-s3": "4",
+    "@uppy/core": "4",
+    "classnames": "2.5.1",
+    "date-fns": "2.30.0",
+    "date-fns-tz": "2.0.0",
+    "focus-trap-react": "11.0.4",
+    "jwt-decode": "4.0.0",
+    "linkify-react": "4.3.1",
+    "linkifyjs": "^4.3.1",
+    "lodash-es": "4.17.21",
+    "p-limit": "4.0.0",
+    "quill": "2.0.3",
+    "react": "18.3.1",
+    "react-aria": "^3.41.1",
+    "react-aria-components": "1.10.1",
+    "react-datepicker": "^8.4.0",
+    "react-dom": "18.3.1",
+    "react-dropzone": "14.3.8",
+    "react-redux": "^9.2.0",
+    "react-router-dom": "5.3.4",
+    "react-select": "5.10.2",
+    "react-stately": "^3.40.0",
+    "react-toastify": "10.0.0",
+    "react-window": "1.8.11",
+    "uuid": "11.1.0"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^4.1.0",
+    "@eslint/js": "^9.30.0",
+    "@next/eslint-plugin-next": "^15.3.0",
+    "@storybook/addon-a11y": "^9.1.1",
+    "@storybook/addon-docs": "^9.1.1",
+    "@storybook/addon-vitest": "^9.1.1",
+    "@storybook/react-vite": "^9.1.1",
+    "@types/lodash-es": "4.17.12",
+    "@types/node": "22",
+    "@types/react": "18",
+    "@types/react-dom": "18",
+    "@types/react-router-dom": "^5.3.3",
+    "@vitest/browser": "^3.2.4",
+    "@vitest/coverage-v8": "^3.2.4",
+    "autoprefixer": "^10.4.21",
+    "eslint": "^9.30.0",
+    "eslint-config-prettier": "^10.1.1",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-only-warn": "^1.1.0",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "globals": "^16.2.0",
+    "playwright": "^1.54.2",
+    "postcss": "^8.5.6",
+    "prettier": "^3.6.0",
+    "storybook": "^9.1.1",
+    "tsconfig-paths": "^4.2.0",
+    "tsup": "^8.5.0",
+    "typescript": "^5.8.2",
+    "typescript-eslint": "^8.35.0",
+    "vite": "^7.1.3",
+    "vitest": "^3.2.4"
+  }
+}