@k-int/stripes-kint-components 2.8.1 → 3.0.0

package/src/lib/SettingPage/SettingPage.js

@@ -5,7 +5,12 @@ import { EditableSettingsList } from '../EditableSettingsList';
 import { SettingsContext } from '../contexts';
 import { useSettingSection } from '../hooks';
 
-const SettingPage = ({ sectionName }) => {
+const SettingPage = ({
+  intlKey: passedIntlKey,
+  intlNS: passedIntlNS,
+  labelOverrides = {},
+  sectionName
+}) => {
   const { settingEndpoint } = useContext(SettingsContext);
 
   const { handleSubmit, settings } = useSettingSection({
@@ -13,10 +18,12 @@ const SettingPage = ({ sectionName }) => {
     settingEndpoint
   });
 
-
   return (
     <EditableSettingsList
       initialValues={{ 'settings': settings }}
+      intlKey={passedIntlKey}
+      intlNS={passedIntlNS}
+      labelOverrides={labelOverrides}
       onSave={handleSubmit}
       onSubmit={handleSubmit}
       settingSection={sectionName}
@@ -25,18 +32,10 @@ const SettingPage = ({ sectionName }) => {
 };
 
 SettingPage.propTypes = {
-  mutator: PropTypes.shape({
-    settings: PropTypes.object
-  }),
+  intlKey: PropTypes.string,
+  intlNS: PropTypes.string,
+  labelOverrides: PropTypes.object,
   sectionName: PropTypes.string,
-  resources: PropTypes.shape({
-    settings: PropTypes.shape({
-      records: PropTypes.arrayOf(PropTypes.object)
-    }),
-    refdatavalues: PropTypes.shape({
-      records: PropTypes.arrayOf(PropTypes.object)
-    })
-  })
 };
 
 export default SettingPage;

package/src/lib/SettingPage/SettingPagePane.js

@@ -1,19 +1,27 @@
-import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 
 import { Pane } from '@folio/stripes/components';
-import { FormattedMessage } from 'react-intl';
-import { SettingsContext } from '../contexts';
 import { toCamelCase } from '../utils';
+import { useKintIntl } from '../hooks';
 
-const SettingPagePane = ({ sectionName, children }) => {
-  const { intlKey } = useContext(SettingsContext);
+const SettingPagePane = ({
+  children,
+  intlKey: passedIntlKey,
+  intlNS: passedIntlNS,
+  sectionName,
+}) => {
+  const kintIntl = useKintIntl(passedIntlKey, passedIntlNS);
 
   return (
     <Pane
       defaultWidth="fill"
       id={`settings-${sectionName}`}
-      paneTitle={<FormattedMessage id={`${intlKey}.settings.settingsSection.${toCamelCase(sectionName)}`} />}
+      paneTitle={
+        kintIntl.formatKintMessage({
+          id: `settings.settingsSection.${toCamelCase(sectionName)}`,
+          fallbackMessage: sectionName
+        })
+      }
     >
       {children}
     </Pane>
@@ -22,6 +30,8 @@ const SettingPagePane = ({ sectionName, children }) => {
 
 SettingPagePane.propTypes = {
   sectionName: PropTypes.string,
+  intlKey: PropTypes.string,
+  intlNS: PropTypes.string,
   children: PropTypes.oneOfType([
     PropTypes.func,
     PropTypes.node

package/src/lib/hooks/__mocks__/index.js

@@ -0,0 +1,17 @@
+import refdata from '../../../../test/jest/refdata';
+import customProperties from '../../../../test/jest/customProperties';
+
+import useKintIntl from '../useKintIntl';
+
+// We have to do this up here too so that our passed useKintIntl
+// ALSO has a mocked useIntlKeyStore... I think anyway
+jest.mock('../useIntlKeyStore', () => () => () => 'ui-test-implementor');
+
+module.exports = {
+  useRefdata: () => refdata,
+  useTemplates: () => [], // We should set up some templates to test this properly
+  useCustomProperties: () => ({ data: customProperties, isLoading: false }),
+  useMutateCustomProperties: () => [],
+  useIntlKeyStore: () => () => () => 'ui-test-implementor',
+  useKintIntl, // Use the "proper" useKintIntl but with a mocked intlKeyStore which returns the ui-test-implementor
+};

package/src/lib/hooks/index.js

@@ -10,6 +10,8 @@ export { useSettings, useSettingSection, useAppSettings } from './settingsHooks'
 export { default as useKiwtFieldArray } from './useKiwtFieldArray';
 export { default as useCustomProperties } from './useCustomProperties';
 export { default as useMutateCustomProperties } from './useMutateCustomProperties';
-export { default as useAvailableCustomProperties } from './useAvailableCustomProperties';
 export { default as useInvalidateRefdata } from './useInvalidateRefdata';
 export { default as useMutateRefdataCategory } from './useMutateRefdataCategory';
+export { default as useKintIntl } from './useKintIntl';
+export { default as useIntlKeyStore } from './useIntlKeyStore';
+export { default as useIntlKey } from './useIntlKey';

package/src/lib/hooks/settingsHooks/useSettings.js

@@ -1,8 +1,7 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 
 import { useQuery } from 'react-query';
-import { FormattedMessage, useIntl } from 'react-intl';
 import { useOkapiKy } from '@folio/stripes/core';
 
 import { Settings } from '@folio/stripes/smart-components';
@@ -11,17 +10,22 @@ import { SettingPage, SettingPagePane } from '../../SettingPage';
 import { SettingsContext } from '../../contexts';
 
 import { generateKiwtQueryParams, sortByLabel, toCamelCase } from '../../utils';
+import useKintIntl from '../useKintIntl';
+import useIntlKey from '../useIntlKey';
 
 const useSettings = ({
   dynamicPageExclusions,
-  intlKey,
+  intlKey: passedIntlKey,
+  intlNS: passedIntlNS,
+  labelOverrides = {},
   persistentPages,
   refdataEndpoint,
   settingEndpoint,
   templateEndpoint
 }) => {
   const ky = useOkapiKy();
-  const intl = useIntl();
+  const kintIntl = useKintIntl(passedIntlKey, passedIntlNS);
+
   const queryParams = generateKiwtQueryParams({
       filters: dynamicPageExclusions?.map(dpe => ({
         path: 'section',
@@ -42,13 +46,20 @@ const useSettings = ({
     return (
       {
         route: section,
-        label: intl.formatMessage({
-          defaultMessage: section,
-          id: `${intlKey}.settings.settingsSection.${toCamelCase(section)}`
+        label: kintIntl.formatKintMessage({
+          id: `settings.settingsSection.${toCamelCase(section)}`,
+          fallbackMessage: section
         }),
         component: (props) => (
-          <SettingPagePane sectionName={section}>
+          <SettingPagePane
+            intlKey={passedIntlKey}
+            intlNS={passedIntlNS}
+            sectionName={section}
+          >
             <SettingPage
+              intlKey={passedIntlKey}
+              intlNS={passedIntlNS}
+              labelOverrides={labelOverrides}
               sectionName={section}
               {...props}
             />
@@ -60,11 +71,12 @@ const useSettings = ({
 
   const pageList = persistentPages.concat(dynamic).sort(sortByLabel);
 
+  const intlKey = useIntlKey(passedIntlKey, passedIntlNS);
   const SettingsContextProvider = ({ children }) => {
     return (
       <SettingsContext.Provider
         value={{
-          intlKey,
+          intlKey, // This is only here for backwards compatibility... is now grabbed from useIntlKey instead of what's passed in directly
           refdataEndpoint,
           settingEndpoint,
           templateEndpoint
@@ -83,12 +95,13 @@ const useSettings = ({
   };
 
   const SettingsComponent = (props) => {
-    const settingsData = useContext(SettingsContext);
-
     return (
       <Settings
         pages={pageList}
-        paneTitle={<FormattedMessage id={`${settingsData.intlKey}.meta.title`} />}
+        paneTitle={
+          kintIntl.formatKintMessage({
+          id: 'meta.title'
+        })}
         {...props}
       />
     );

package/src/lib/hooks/useIntlKey.js

@@ -0,0 +1,22 @@
+import useIntlKeyStore from './useIntlKeyStore';
+
+const useIntlKey = (passedIntlKey, passedIntlNS) => {
+  const getKey = useIntlKeyStore(state => state.getKey);
+  let intlKey;
+
+  if (passedIntlKey) {
+    intlKey = passedIntlKey;
+  } else if (passedIntlNS) {
+    intlKey = getKey(passedIntlNS);
+  } else {
+    intlKey = getKey();
+  }
+
+  if (!intlKey) {
+    throw new Error('Stripes kint components requires an intl key to be either configured via `addKey` from `useIntlKeyStore` or passed directly into components');
+  }
+
+  return intlKey;
+};
+
+export default useIntlKey;

package/src/lib/hooks/useIntlKeyStore.js

@@ -0,0 +1,38 @@
+// We can use hooks within zustand store functions without violating the laws of hooks
+/* eslint-disable react-hooks/rules-of-hooks */
+import { useNamespace } from '@folio/stripes/core';
+import create from 'zustand';
+
+const useIntlKeyStore = create((set, get) => ({
+  intlKeys: {},
+  addKey: (key, namespace) => set((state) => {
+    let ns = namespace;
+    const folioNS = useNamespace()?.[0];
+    if (!ns) {
+      ns = folioNS;
+    }
+
+    return { intlKeys: { [ns]: key, ...state } };
+  }),
+  removeKey: (namespace) => set((state) => {
+    let ns = namespace;
+    const folioNS = useNamespace()?.[0];
+    if (!ns) {
+      ns = folioNS;
+    }
+
+    const { [ns]: _valueToRemove, ...newKeys } = state.intlKeys;
+    return { intlKeys: newKeys };
+  }),
+  getKey: (namespace) => {
+    let ns = namespace;
+    const folioNS = useNamespace()?.[0];
+    if (!ns) {
+      ns = folioNS;
+    }
+
+    return get().intlKeys?.[ns];
+  }
+}));
+
+export default useIntlKeyStore;

package/src/lib/hooks/useKintIntl.js

@@ -0,0 +1,51 @@
+import { useIntl } from 'react-intl';
+import useIntlKey from './useIntlKey';
+
+/* A hook to enrich the intl object we get from useIntl */
+const useKintIntl = (passedIntlKey, passedIntlNS) => {
+  const intlObj = useIntl();
+  const intlKey = useIntlKey(passedIntlKey, passedIntlNS);
+
+  // FormatKintMessage id misses out the top level key part of the path.
+  // This works analogously to FormattedKintMessage component
+  const formatKintMessage = ({ id, overrideValue, fallbackMessage, ...formatParams }, formatValues) => {
+    if (overrideValue) {
+      // Version 3 is a breaking change, where labelOverrides must be strings.
+      if (typeof overrideValue !== 'string') {
+        throw new Error('Override values must be strings as of stripes-kint-components ^3.0.0');
+      }
+
+      if (intlObj.messages?.[overrideValue]) {
+        // We've been passed a key as an override, use it
+        return intlObj.formatMessage({ id: overrideValue, ...formatParams }, formatValues);
+      }
+      // At this stage we have an overrideValue that's not a key, return it.
+      return overrideValue;
+    }
+
+    // If key does not exist in intl, and we have a specified "fallbackMessage", use that
+
+    // (FallbackMessage works like defaultMessage but with no warning)
+    if (!intlObj.messages?.[`${intlKey}.${id}`] && fallbackMessage) {
+      // Allow fallback message to be an intl key
+      if (intlObj.messages?.[fallbackMessage]) {
+        return intlObj.formatMessage({ id: fallbackMessage, ...formatParams }, formatValues);
+      }
+
+      return fallbackMessage;
+    }
+
+    // After all that, render the message from key
+    return intlObj.formatMessage({ id: `${intlKey}.${id}`, ...formatParams }, formatValues);
+  };
+
+  const messageExists = (key) => !!intlObj.messages?.[`${intlKey}.${key}`];
+
+  return {
+    ...intlObj,
+    formatKintMessage,
+    messageExists
+  };
+};
+
+export default useKintIntl;

package/src/lib/utils/index.js

@@ -12,10 +12,23 @@ export { default as typedownQueryKey } from './typedownQueryKey';
 export { default as groupCustomPropertiesByCtx } from './groupCustomPropertiesByCtx';
 
 // Settings utils
-export { default as renderHelpText } from './renderHelpText';
 export { default as sortByLabel } from './sortByLabel';
 export { default as toCamelCase } from './toCamelCase'; // I hate that this exists
 
 
 export { default as matchString } from './matchString';
 export { boldString, highlightString } from './highlightString';
+
+// HTTP Utils
+export { default as parseErrorResponse } from './parseErrorResponse';
+
+// Validators
+export {
+  composeValidators,
+  composeValidatorsWithArgs,
+  invalidNumber,
+  rangeOverflow,
+  rangeUnderflow,
+  required,
+  requiredObject
+} from './validators';

package/src/lib/utils/parseErrorResponse.js

@@ -0,0 +1,18 @@
+const parseErrorResponse = async (responseObj) => {
+  let errorResp;
+  const contentType = [...responseObj?.headers]?.find(header => header[0] === 'content-type')?.[1];
+
+  if (contentType.includes('json')) {
+    errorResp = await responseObj.json();
+  } else {
+    try {
+      errorResp = { message: await responseObj.text() };
+    } catch {
+      errorResp = { message: 'something went wrong' };
+    }
+  }
+
+  return errorResp;
+};
+
+export default parseErrorResponse;

package/src/lib/utils/validators.js

@@ -1,11 +1,5 @@
-// This is a copy of stripes-erm-components, to avoid necessitating that as a dependency
 import { FormattedMessage } from 'react-intl';
-
-import * as CUSTOM_PROPERTY_TYPES from '../constants/customProperties';
-
-const invalidNumber = value => (
-  (value || value === 0) ? undefined : <FormattedMessage id="stripes-kint-components.errors.invalidNumber" />
-);
+import FormattedKintMessage from '../FormattedKintMessage';
 
 const required = value => {
   const blankString = /^\s+$/;
@@ -25,55 +19,77 @@ const requiredObject = (formValue = {}) => {
   return undefined;
 };
 
-const customPropertyValidator = (fieldValue, allValues, customProperty) => {
-  const { note, publicNote, value: currentValue } = allValues?.customProperties?.[customProperty?.value]?.[0] ?? {};
+const composeValidators = (...validators) => (
+  (value, allValues, meta) => (
+    validators.reduce((error, validator) => (
+      error || validator(value, allValues, meta)
+    ), undefined)
+  )
+);
 
-  if ((note && !currentValue) || (publicNote && !currentValue)) {
-    if (
-      customProperty.type === CUSTOM_PROPERTY_TYPES.DECIMAL_CLASS_NAME ||
-      customProperty.type === CUSTOM_PROPERTY_TYPES.INTEGER_CLASS_NAME
-    ) {
-      return <FormattedMessage id="stripes-kint-components.errors.customPropertyNoteInvalidNumber" />;
-    } else {
-      return <FormattedMessage id="stripes-kint-components.errors.customPropertyNoteWithoutValue" />;
-    }
-  }
+// Similar to the above, but allow explicit setting of arguments to the validators
+const composeValidatorsWithArgs = (...validators) => (
+  (...args) => (
+    validators.reduce((error, validator) => (
+      error || validator(...args)
+    ), undefined)
+  )
+);
 
-  if (customProperty.type === CUSTOM_PROPERTY_TYPES.DECIMAL_CLASS_NAME) {
-    const regexp = /^-?[\d]*(\.[\d]{0,2})?$/;
-    return (fieldValue && !regexp.test(fieldValue)) ?
-      <FormattedMessage id="stripes-kint-components.errors.customPropertyMaxTwoDecimals" /> : undefined;
+// Make same shape as rangeOverflow/rangeUnderflow so we can combine them
+const invalidNumber = (value, _min, _max, intlKey, intlNS, labelOverrides = {}) => {
+  if (!value && value !== 0) {
+    return (
+      <FormattedKintMessage
+        id="errors.invalidNumber"
+        intlKey={intlKey}
+        intlNS={intlNS}
+        overrideValue={labelOverrides?.invalidNumberError}
+      />
+    );
   }
 
-  if (customProperty.type === CUSTOM_PROPERTY_TYPES.INTEGER_CLASS_NAME) {
-    const min = Number.MIN_SAFE_INTEGER;
-    const max = Number.MAX_SAFE_INTEGER;
-
-    return (fieldValue && !Number.isInteger(+fieldValue)) ?
-      <FormattedMessage id="stripes-kint-components.errors.customPropertyValueNotInRange" values={{ min, max }} /> :
-      undefined;
-  }
+  return undefined;
+};
 
-  if (!customProperty.primary && !currentValue) {
-    return <FormattedMessage id="stripes-core.label.missingRequiredField" />;
+const rangeOverflow = (value, min, max, intlKey, intlNS, labelOverrides = {}) => {
+  if ((value || value === 0) && value > max) {
+    return (
+      <FormattedKintMessage
+        id="errors.decimalValueNotInRange"
+        intlKey={intlKey}
+        intlNS={intlNS}
+        overrideValue={labelOverrides?.decimalValueNotInRangeError}
+        values={{ min, max }}
+      />
+    );
   }
 
   return undefined;
 };
 
+const rangeUnderflow = (value, min, max, intlKey, intlNS, labelOverrides = {}) => {
+  if ((value || value === 0) && value < min) {
+    return (
+      <FormattedKintMessage
+        id="errors.decimalValueNotInRange"
+        intlKey={intlKey}
+        intlNS={intlNS}
+        overrideValue={labelOverrides?.decimalValueNotInRangeError}
+        values={{ min, max }}
+      />
+    );
+  }
 
-const composeValidators = (...validators) => (
-  (value, allValues, meta) => (
-    validators.reduce((error, validator) => (
-      error || validator(value, allValues, meta)
-    ), undefined)
-  )
-);
+  return undefined;
+};
 
 export {
   composeValidators,
-  customPropertyValidator,
+  composeValidatorsWithArgs,
   invalidNumber,
+  rangeOverflow,
+  rangeUnderflow,
   required,
   requiredObject,
 };

package/styles/RichSelect.css

@@ -1,7 +1,10 @@
 @import '@folio/stripes-components/lib/variables.css';
 
-.iconButtonText {
-  font-weight: var(--text-weight-regular);
-  color: var(--color-icon);
+.triggerButton {
+  color: var(--primary);
   border-radius: 0;
-}
+
+  &::before {
+    border-radius: var(--radius);
+  }
+}

package/test/helpers/test-implementor-translations.json

@@ -0,0 +1,80 @@
+{
+  "yes": "Yes",
+  "no": "No",
+  "all": "All",
+  "new": "New",
+  "errors.invalidNumber": "Please enter a valid number to continue",
+  "errors.hasNonAlphaName": "The name can only contain Latin alphabetical characters (a-z) and non-leading numeric characters.",
+  "errors.valueNotInRange": "Please enter a whole number in the range {min} to {max} to continue",
+  "errors.decimalValueNotInRange": "Please enter a number in the range {min} to {max} to continue",
+  "errors.maxTwoDecimals": "Please enter a number with a maximum of 2 decimals places",
+  "customProperties": "Custom properties",
+  "customProperties.label": "Label",
+  "customProperties.primary": "Primary",
+  "customProperties.retired": "Retired",
+  "customProperties.ctx": "Context",
+  "customProperties.ctx.addContext": "Add context {value}",
+  "customProperties.noCtxFound": "No matching context found",
+  "customProperties.weight": "Order weight",
+  "customProperties.type": "Type",
+  "customProperties.internalFalse": "Public",
+  "customProperties.internalNote": "Internal note",
+  "customProperties.internalTrue": "Internal",
+  "customProperties.publicNote": "Public note",
+  "customProperties.name": "Name",
+  "customProperties.description": "Description",
+  "customProperties.category": "Category",
+  "customProperties.defaultVisibility": "Default visibility",
+  "customProperties.value": "Value(s)",
+  "customProperties.visibility": "Visibility",
+  "customProperties.type.com.k_int.web.toolkit.custprops.types.CustomPropertyBlob": "Blob",
+  "customProperties.type.com.k_int.web.toolkit.custprops.types.CustomPropertyBoolean": "Boolean",
+  "customProperties.type.com.k_int.web.toolkit.custprops.types.CustomPropertyContainer": "Container",
+  "customProperties.type.com.k_int.web.toolkit.custprops.types.CustomPropertyDecimal": "Decimal",
+  "customProperties.type.com.k_int.web.toolkit.custprops.types.CustomPropertyInteger": "Integer",
+  "customProperties.type.com.k_int.web.toolkit.custprops.types.CustomPropertyRefdata": "Refdata",
+  "customProperties.type.com.k_int.web.toolkit.custprops.types.CustomPropertyRefdataDefinition": "Refdata definition",
+  "customProperties.type.com.k_int.web.toolkit.custprops.types.CustomPropertyText": "Text",
+  "customProperties.type.com.k_int.web.toolkit.custprops.types.CustomPropertyLocalDate": "Date",
+  "customProperties.type.com.k_int.web.toolkit.custprops.types.CustomPropertyMultiRefdata": "Refdata (multi-select)",
+  "customProperties.config.all": "All",
+  "customProperties.config.delete.errorMessage": "There was an error deleting custom property: <strong>{label}</strong>. {error}",
+  "customProperties.config.delete.confirmHeading": "Delete custom property",
+  "customProperties.config.delete.confirmMessage": "Custom property <strong>{name}</strong> will be <strong>deleted</strong>.",
+  "customProperties.config.newModal": "New custom property",
+  "customProperties.config.editModal": "Edit {name}",
+  "customProperties.errors.primaryRetired": "A custom property cannot be both primary and deprecated",
+  "customProperties.errors.customPropertyNoteInvalidNumber": "A valid number must be entered in order to save a note",
+  "customProperties.errors.customPropertyNoteWithoutValue": "A value must be set in order to save a note",
+  "customProperties.defaultTitle": "Custom properties ({ctx})",
+  "customProperties.optionalProperties": "Optional properties",
+  "customProperties.primaryProperties": "Primary properties",
+  "customProperties.addProperty": "Add property",
+  "customProperty.optionalPropertyHeader": "Custom property {number}",
+  "customProperty.remove": "Remove custom property {number}",
+  "customProperty": "Custom property",
+  "customProperty.addFilter": "Add custom property filter",
+  "customProperty.editCustomPropertyFilters": "Edit custom property filters",
+  "addRule": "Add rule",
+  "value": "Value",
+  "comparator": "Comparator",
+  "operator.isSet": "Is set",
+  "operator.isNotSet": "Is not set",
+  "operator.equals": "Equals",
+  "operator.doesNotEqual": "Does not equal",
+  "operator.isGreaterThanOrEqual": "Is greater than or equal to",
+  "operator.isLessThanOrEqual": "Is less than or equal to",
+  "operator.isOnOrAfter": "Is on or after",
+  "operator.isOnOrBefore": "Is on or before",
+  "operator.is": "Is",
+  "operator.isNot": "Is not",
+  "operator.contains": "Contains",
+  "operator.doesNotContain": "Does not contain",
+  "settings.valueFor": "Value for setting {name}",
+  "settings.noCurrentValue": "No current value",
+  "settings.default": "default",
+  "edit": "Edit",
+  "save": "Save",
+  "cancel": "Cancel",
+  "apply": "Apply"
+}

package/test/helpers/translationsProperties.js

@@ -1,11 +1,11 @@
 import translations from '../../translations/stripes-kint-components/en';
+import testTranslations from './test-implementor-translations';
 
 const translationsProperties = [
   {
     prefix: 'stripes-kint-components',
     translations,
   },
-  /* Don't think we're using any of the below rn */
   {
     prefix: 'stripes-core',
     translations: {
@@ -34,6 +34,11 @@ const translationsProperties = [
       'searchResultsCountHeader': '"{count, number} {count, plural, one {record found} other {records found}}"',
       'new': 'New'
     },
+  },
+  {
+    // Extra translations to allow us to properly test the translation pattern as if we had an implementing module
+    prefix: 'ui-test-implementor',
+    translations: testTranslations
   }
 ];