@k-int/stripes-kint-components 4.1.0 → 4.3.0

package/src/lib/utils/generateKiwtQueryParams.js

@@ -1,3 +1,54 @@
+const conditionalEncodeURIComponent = (str, encode = true) => {
+  if (encode) {
+    return encodeURIComponent(str);
+  }
+
+  return str;
+};
+
+const buildFilterOptionBlock = (opf, isNested = false, encode = true) => {
+  if (opf?.groupValues) {
+    const groupValues = opf.groupValues;
+
+    // Small utility function to add negation and brackets to the options block where necessary
+    const negationAndNesting = (str) => `${groupValues?.NOT ? '!' : ''}${(isNested || groupValues?.NOT) ? '(' : ''}${str}${(isNested || groupValues?.NOT) ? ')' : ''}`;
+
+    // First check whether groupValues is ANDed or ORed together
+    if (
+      (groupValues?.AND && Array.isArray(groupValues.AND)) ||
+      (groupValues?.OR && Array.isArray(groupValues.OR))
+    ) {
+      // AND takes precedence
+      if (groupValues.AND) {
+        return negationAndNesting(groupValues?.AND?.map(gvo => buildFilterOptionBlock(gvo, true, encode))?.join('&&'));
+      }
+      return negationAndNesting(groupValues?.OR?.map(gvo => buildFilterOptionBlock(gvo, true, encode))?.join('||'));
+    }
+    // If neither valid OR nor AND exist, ignore the block
+  } else if (opf?.values) {
+    // Build the values filter block
+    const innerFilters = [];
+    opf.values.forEach(opfv => {
+      if (opf.path) {
+        innerFilters.push(`${opf.path}${opf.comparator ?? '=='}${opfv}`);
+      } else {
+        innerFilters.push(opfv);
+      }
+    });
+
+    return conditionalEncodeURIComponent(innerFilters.join('||'), encode);
+  } else if (opf?.value) { // If no value OR values, then ignore
+    if (opf.path) {
+      const filterString = `${opf.path}${opf.comparator ?? '=='}${opf.value}`;
+      return conditionalEncodeURIComponent(filterString, encode);
+    }
+
+    return conditionalEncodeURIComponent(opf.value, encode);
+  }
+
+  return null;
+};
+
 const generateKiwtQueryParams = (options, nsValues, encode = true) => {
   const { qindex, query, filters, sort } = nsValues;
   const {
@@ -18,7 +69,13 @@ const generateKiwtQueryParams = (options, nsValues, encode = true) => {
           path: 'this.is.some.path'
           comparator: '=='
           value: 'this is a value' //OR
-          values: ['value1', 'value2']
+          values: ['value1', 'value2'] //OR
+          groupValues: { // This is an object containing objects either in groups of AND or OR. AND takes precedence
+            AND: [
+              // Objects of the same shape as an individual filters object, recursively.
+            ],
+            NOT: true // When this is set to true, the entire group is negated
+          }
         },
         ...
       ]
@@ -27,49 +84,28 @@ const generateKiwtQueryParams = (options, nsValues, encode = true) => {
      * If no comparator is passed, it assumes '=='
      * Values overwrites value and will construct "filters=this.is.some.path==value1||this.is.some.path==value2"
      * Values WITHOUT path will construct "filters=value1||value2"
+     *
+     * GroupValues will override everything above, and group into brackets.
+     *
      * If more complex query building is desired, this should be done externally and passed in as a standalone 'value'
      */
     filters: optionsFilters,
     ...rest
   } = options;
 
-  const conditionalEncodeURIComponent = (str) => {
-    if (encode) {
-      return encodeURIComponent(str);
-    }
-
-    return str;
-  };
-
-
   const paramsArray = [];
 
   if (query) {
-    paramsArray.push(...(qindex || searchKey).split(',')?.map(m => `match=${conditionalEncodeURIComponent(m)}`));
-    paramsArray.push(`term=${conditionalEncodeURIComponent(query)}`);
+    paramsArray.push(...(qindex || searchKey).split(',')?.map(m => `match=${conditionalEncodeURIComponent(m, encode)}`));
+    paramsArray.push(`term=${conditionalEncodeURIComponent(query, encode)}`);
   }
 
+  // Actually build the optionsFilters block (Moved logic to its own function to allow recursion)
   if (optionsFilters) {
     optionsFilters.forEach(opf => {
-      if (opf?.values) {
-        // Build the values filter block
-        const innerFilters = [];
-        opf.values.forEach(opfv => {
-          if (opf.path) {
-            innerFilters.push(`${opf.path}${opf.comparator ?? '=='}${opfv}`);
-          } else {
-            innerFilters.push(opfv);
-          }
-        });
-
-        paramsArray.push(`filters=${conditionalEncodeURIComponent(innerFilters.join('||'))}`);
-      } else if (opf?.value) { // If no value OR values, then ignore
-        if (opf.path) {
-          const filterString = `${opf.path}${opf.comparator ?? '=='}${opf.value}`;
-          paramsArray.push(`filters=${conditionalEncodeURIComponent(filterString)}`);
-        } else {
-          paramsArray.push(`filters=${conditionalEncodeURIComponent(opf.value)}`);
-        }
+      const optionsBlock = buildFilterOptionBlock(opf, false, encode);
+      if (optionsBlock) {
+        paramsArray.push(`filters=${optionsBlock}`);
       }
     });
   }
@@ -95,13 +131,13 @@ const generateKiwtQueryParams = (options, nsValues, encode = true) => {
           return `${filterName}==${fceValue ?? v}`;
         }).join('||');
 
-        paramsArray.push(`filters=${conditionalEncodeURIComponent(filterString)}`);
+        paramsArray.push(`filters=${conditionalEncodeURIComponent(filterString, encode)}`);
       } else if (!filterKey) {
         // These filters have no key mapping so we just pass the values to the backend as-is.
-        paramsArray.push(...filterValues?.map(f => `filters=${conditionalEncodeURIComponent(f)}`));
+        paramsArray.push(...filterValues?.map(f => `filters=${conditionalEncodeURIComponent(f, encode)}`));
       } else {
         const filterString = filterValues.map(v => `${filterKey}==${v}`).join('||');
-        paramsArray.push(`filters=${conditionalEncodeURIComponent(filterString)}`);
+        paramsArray.push(`filters=${conditionalEncodeURIComponent(filterString, encode)}`);
       }
     });
   }
@@ -109,10 +145,10 @@ const generateKiwtQueryParams = (options, nsValues, encode = true) => {
   if (optionsSort && optionsSort.length > 0) {
     optionsSort.forEach(os => {
       if (os.value) {
-        paramsArray.push(`sort=${conditionalEncodeURIComponent(os.value)}`);
+        paramsArray.push(`sort=${conditionalEncodeURIComponent(os.value, encode)}`);
       } else if (os.path) { // If no path then ignore
         const sortString = `${os.path};${os.direction ?? 'asc'}`;
-        paramsArray.push(`sort=${conditionalEncodeURIComponent(sortString)}`);
+        paramsArray.push(`sort=${conditionalEncodeURIComponent(sortString, encode)}`);
       }
     });
   }
@@ -128,7 +164,7 @@ const generateKiwtQueryParams = (options, nsValues, encode = true) => {
 
       const sortString = `${term};${descending ? 'desc' : 'asc'}`;
 
-      return `sort=${conditionalEncodeURIComponent(sortString)}`;
+      return `sort=${conditionalEncodeURIComponent(sortString, encode)}`;
     }));
   }
 
@@ -137,7 +173,7 @@ const generateKiwtQueryParams = (options, nsValues, encode = true) => {
   }
 
   for (const [key, value] of Object.entries(rest)) {
-    paramsArray.push(`${key}=${conditionalEncodeURIComponent(value)}`);
+    paramsArray.push(`${key}=${conditionalEncodeURIComponent(value, encode)}`);
   }
 
   return paramsArray;

package/src/lib/utils/index.js

@@ -19,6 +19,8 @@ export { default as toCamelCase } from './toCamelCase'; // I hate that this exis
 export { default as matchString } from './matchString';
 export { boldString, highlightString } from './highlightString';
 
+export { default as parseKiwtQueryGroups } from './parseKiwtQueryGroups';
+
 // HTTP Utils
 export { default as parseErrorResponse } from './parseErrorResponse';
 

package/src/lib/utils/parseErrorResponse.js

@@ -1,14 +1,15 @@
 const parseErrorResponse = async (responseObj) => {
   let errorResp;
+  const code = responseObj?.status;
   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() };
+      errorResp = { code, message: await responseObj.text() };
     } catch {
-      errorResp = { message: 'something went wrong' };
+      errorResp = { code, message: 'something went wrong' };
     }
   }
 

package/src/lib/utils/parseKiwtQueryGroups.js

@@ -0,0 +1,65 @@
+const parseKiwtQueryGroups = (query) => {
+  // Split out all operators and brackets, but keeping them all intact in the correct potition.
+  const splitString = query.split(/(?<=\|\||&&|\(|\))|(?=\|\||&&|\(|\))/);
+  // Keep track of what to skip over when wereturn from each level of nesting
+  let skipCount = [0];
+
+
+  // Ensure brackets are properly closed
+  let unclosedBrackets = 0;
+  const groupParser = (parseArray, nestLevel = 0) => {
+    const group = [];
+    // Iterate over each element in the array, recursively calling this when hitting brackets
+    parseArray?.every((element, index) => {
+      if (skipCount[nestLevel] > 0) {
+        skipCount[nestLevel] -= 1;
+        return true; // Equivalent to BREAK -- move onto next element
+      }
+
+      // Deal with unexpected extra closure
+      if (nestLevel === 0 && element === ')') {
+        throw new Error('Unexpected character \')\' found, stopping parse.');
+      }
+
+      // At the levels below all of the following will need
+      skipCount = skipCount?.map((n, i) => {
+        if (i < nestLevel) {
+          return n + 1;
+        }
+        return n;
+      });
+
+      if (element !== '(' && element !== ')') {
+        group?.push(element);
+      } else if (element === ')') {
+        // Remove the corresponding skipCount level because we're going down a nesting level
+        skipCount.pop();
+        unclosedBrackets -= 1;
+
+        return false; // Equivalent to BREAK -- go up a nesting level
+      } else if (element === '(') {
+        // Add next index to skipcount for the nesting
+        skipCount.push(0);
+        unclosedBrackets += 1;
+
+        group.push(groupParser(parseArray.slice(index + 1, parseArray?.length), nestLevel + 1));
+      }
+
+      // If all is well, continue on parsing
+      return true;
+    });
+
+    return group;
+  };
+
+  const outputGroups = groupParser(splitString);
+
+  // Deal with unclosed parentheses
+  if (unclosedBrackets > 0) {
+    throw new Error('Found unclosed paretheses, stopping parse.');
+  }
+
+  return outputGroups;
+};
+
+export default parseKiwtQueryGroups;

package/styles/ResponsiveButtonGroup.css

@@ -1,5 +1,17 @@
 @import '@folio/stripes-components/lib/variables.css';
 
+.width100 {
+  width: 100%;
+}
+
+.marginBottom {
+  margin-bottom: var(--gutter);
+}
+
+.marginBottom0 {
+  margin-bottom: 0;
+}
+
 .buttonGroup {
   display: inline-flex;
   justify-content: space-between;
@@ -66,7 +78,6 @@
 .dropdownButtonClass {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
-  width: 100%;
 }
 
 .dropdownButtonClass::before {

package/styles/TypeDown.css

@@ -17,7 +17,6 @@
   padding: 0;
   float: left;
   right: 0;
-  border-radius: 0 0 var(--radius) var(--radius);
   box-shadow: var(--shadow);
   border: 1px solid #ccc;
   margin-top: 0;
@@ -27,11 +26,46 @@
   z-index: 1000;
 }
 
+/* Ensure dropdown menu has correct border radius when rendered above/below/floating */
+div[class^="overlay"][x-placement="top"]:not([x-out-of-boundaries=""]) > div[class^="dropdownMenu"] {
+  border-radius: var(--radius) var(--radius) 0 0;
+}
+
+div[class^="overlay"][x-placement="bottom"]:not([x-out-of-boundaries=""]) > div[class^="dropdownMenu"] {
+  border-radius: 0 0 var(--radius) var(--radius);
+}
+
+div[class^="overlay"][x-out-of-boundaries=""] > div[class^="dropdownMenu"] {
+  border-radius: var(--radius);
+}
+
+/* Ensure buttons also follow the proper border radius */
+div[class^="overlay"][x-placement="top"]:not([x-out-of-boundaries=""]) > div[class^="dropdownMenu"] > div[class^=listContainer] > button:first-child:before {
+  border-radius: var(--radius) var(--radius) 0 0;
+}
+
+div[class^="overlay"][x-placement="bottom"]:not([x-out-of-boundaries=""]) > div[class^="dropdownMenu"] > div[class^=listContainer] > button:last-child:before {
+  border-radius: 0 0 var(--radius) var(--radius);
+}
+
+/* When floating, last and first buttons need rounding */
+div[class^="overlay"][x-out-of-boundaries=""] > div[class^="dropdownMenu"] > div[class^=listContainer] > button:first-child:before {
+  border-radius: var(--radius) var(--radius) 0 0;
+}
+
+div[class^="overlay"][x-out-of-boundaries=""] > div[class^="dropdownMenu"] > div[class^=listContainer] > button:last-child:before {
+  border-radius: 0 0 var(--radius) var(--radius);
+}
+
+/* If there is only one element in a floating list, it needs both corners rounding */
+div[class^="overlay"][x-out-of-boundaries=""] > div[class^="dropdownMenu"] > div[class^=listContainer] > button:only-child:before {
+  border-radius: var(--radius);
+}
+
 .menuButton {
   composes: interactionStyles from "@folio/stripes-components/lib/sharedStyles/interactionStyles.css";
   margin-bottom: 0;
   border: none;
-  border-radius: 0;
   text-align: left;
 }
 
@@ -48,6 +82,7 @@
   background-color: var(--color-fill-table-row-even);
 }
 
+/* Default menu button style is no rounded edges */
 .menuButton::before {
   border-radius: 0;
 }

package/test/helpers/translationsProperties.js

@@ -1,40 +1,9 @@
-import translations from '../../translations/stripes-kint-components/en';
+import { translationsProperties as coreTranslations } from '@folio/stripes-erm-testing';
+
 import testTranslations from './test-implementor-translations';
 
 const translationsProperties = [
-  {
-    prefix: 'stripes-kint-components',
-    translations,
-  },
-  {
-    prefix: 'stripes-core',
-    translations: {
-      'label.missingRequiredField': 'Please fill this in to continue',
-      'button.save': 'Save',
-    }
-  },
-  {
-    prefix: 'stripes-components',
-    translations: {
-      'saveAndClose': 'Save and close',
-      'cancel': 'Cancel',
-      'paneMenuActionsToggleLabel': 'Actions',
-      'collapseAll': 'Collapse all',
-      'button.edit': 'Edit'
-    },
-  },
-  {
-    prefix: 'stripes-smart-components',
-    translations: {
-      'permissionError': 'Sorry - your permissions do not allow access to this page.',
-      'searchAndFilter': 'Search and filter',
-      'hideSearchPane': 'Hide search pane',
-      'search': 'Search',
-      'resetAll': 'Reset all',
-      'searchResultsCountHeader': '"{count, number} {count, plural, one {record found} other {records found}}"',
-      'new': 'New'
-    },
-  },
+  ...coreTranslations,
   {
     // Extra translations to allow us to properly test the translation pattern as if we had an implementing module
     prefix: 'ui-test-implementor',

package/test/jest/helpers/KintHarness.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Harness } from '@folio/stripes-erm-components/test/jest/helpers';
+import { Harness } from '@folio/stripes-erm-testing';
 
 import { SettingsContext } from '../../../src/lib/contexts';
 import translationsProperties from '../../helpers';

package/yarn-error.log

@@ -1,147 +0,0 @@
-Arguments: 
-  /home/ethan/.nvm/versions/node/v16.17.0/bin/node /usr/share/yarn/bin/yarn.js install --ignore-scripts
-
-PATH: 
-  /home/ethan/.rd/bin:/home/ethan/.nvm/versions/node/v16.17.0/bin:/home/ethan/.sdkman/candidates/java/current/bin:/home/ethan/.sdkman/candidates/groovy/current/bin:/home/ethan/.sdkman/candidates/grails/current/bin:/home/ethan/.sdkman/candidates/gradle/current/bin:/home/ethan/.rd/bin:/home/ethan/.yarn/bin:/home/ethan/.local/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin:/snap/bin
-
-Yarn version: 
-  1.22.19
-
-Node version: 
-  16.17.0
-
-Platform: 
-  linux x64
-
-Trace: 
-  Error: https://repository.folio.org/repository/npm-folio/@folio%2fstripes-erm-testing: Package '@folio/stripes-erm-testing' not found
-      at Request.params.callback [as _callback] (/usr/share/yarn/lib/cli.js:66145:18)
-      at Request.self.callback (/usr/share/yarn/lib/cli.js:140890:22)
-      at Request.emit (node:events:513:28)
-      at Request.<anonymous> (/usr/share/yarn/lib/cli.js:141862:10)
-      at Request.emit (node:events:513:28)
-      at IncomingMessage.<anonymous> (/usr/share/yarn/lib/cli.js:141784:12)
-      at Object.onceWrapper (node:events:627:28)
-      at IncomingMessage.emit (node:events:525:35)
-      at endReadableNT (node:internal/streams/readable:1358:12)
-      at processTicksAndRejections (node:internal/process/task_queues:83:21)
-
-npm manifest: 
-  {
-    "name": "@k-int/stripes-kint-components",
-    "version": "3.1.0",
-    "description": "Stripes Component library for K-Int specific applications",
-    "sideEffects": [
-      "*.css"
-    ],
-    "license": "Apache-2.0",
-    "engines": {
-      "node": ">=10.0.0"
-    },
-    "scripts": {
-      "lint": "eslint src",
-      "test": "yarn run test:jest",
-      "test:jest": "jest --ci --coverage",
-      "build:es": "rm -rf ./es && babel --extensions .js --ignore ./src/**/tests/**/* ./src --out-dir es",
-      "build": "yarn build:es",
-      "clean": "rm -rf ./node_modules ./*/node_modules ./yarn.lock && yarn install",
-      "clean-build": "yarn clean && yarn build",
-      "prepare": "yarn build"
-    },
-    "dependencies": {
-      "@rehooks/local-storage": "2.4.0",
-      "compose-function": "^3.0.3",
-      "react-resize-detector": "^7.1.2",
-      "zustand": "^4.0.0"
-    },
-    "devDependencies": {
-      "@babel/cli": "^7.18.10",
-      "@babel/core": "^7.18.6",
-      "@babel/eslint-parser": "^7.15.0",
-      "@babel/plugin-proposal-class-properties": "^7.12.1",
-      "@babel/plugin-proposal-decorators": "^7.12.1",
-      "@babel/plugin-proposal-function-sent": "^7.18.6",
-      "@babel/plugin-proposal-throw-expressions": "^7.18.6",
-      "@babel/plugin-syntax-import-meta": "^7.10.4",
-      "@babel/plugin-transform-runtime": "^7.12.1",
-      "@babel/preset-env": "^7.18.9",
-      "@babel/preset-flow": "^7.18.6",
-      "@babel/preset-react": "^7.18.6",
-      "@babel/preset-typescript": "^7.18.6",
-      "@folio/eslint-config-stripes": "^6.1.0",
-      "@folio/stripes": "^7.2.0",
-      "@folio/stripes-cli": "^2.6.0",
-      "@folio/stripes-erm-testing": "^1.0.0",
-      "@folio/stripes-testing": "^4.2.0",
-      "@formatjs/cli": "^4.2.31",
-      "@interactors/html": "^1.0.0-rc1.2",
-      "@testing-library/dom": "^8.16.0",
-      "@testing-library/jest-dom": "^5.16.4",
-      "@testing-library/react": "^12.1.5",
-      "@testing-library/user-event": "^14.3.0",
-      "babel-eslint": "^10.1.0",
-      "babel-jest": "^28.1.3",
-      "babel-plugin-const-enum": "^1.0.1",
-      "babel-plugin-module-resolver": "^4.0.0",
-      "babel-plugin-require-context-hook": "^1.0.0",
-      "babel-plugin-transform-async-to-promises": "^0.8.15",
-      "babel-polyfill": "^6.26.0",
-      "classnames": ">=2.2.6",
-      "core-js": "^3.6.1",
-      "eslint": "^7.32.0",
-      "eslint-plugin-import": "^2.26.0",
-      "eslint-plugin-jest": "^26.6.0",
-      "eslint-plugin-jest-dom": "^4.0.2",
-      "eslint-plugin-testing-library": "^5.5.1",
-      "graphql": "^16.0.0",
-      "identity-obj-proxy": "^3.0.0",
-      "jest": "^28.1.0",
-      "jest-css-modules": "^2.1.0",
-      "jest-css-modules-transform": "^4.0.0",
-      "jest-environment-jsdom": "^28.1.2",
-      "jest-junit": "^13.2.0",
-      "jest-webpack": "^0.5.1",
-      "moment": "^2.29.4",
-      "prop-types-extra": ">=1.1.0",
-      "react": "^17.0.2",
-      "react-dom": "^17.0.2",
-      "react-intl": "^5.8.1",
-      "react-query": "^3.6.0",
-      "react-redux": "^7.0.0",
-      "react-router": "^5.2.0",
-      "react-router-dom": "^5.2.0",
-      "redux": "^4.0.0",
-      "redux-observable": "^1.2.0",
-      "regenerator-runtime": "^0.13.3",
-      "rxjs": "^6.6.3",
-      "sinon": "^14.0.0",
-      "typescript": "^2.8.0"
-    },
-    "peerDependencies": {
-      "@folio/stripes": ">=7.0.3",
-      "final-form": ">=4.18.4",
-      "final-form-arrays": ">=3.0.1",
-      "lodash": ">=4.17.0",
-      "prop-types": ">=15.6.0",
-      "query-string": ">=6.6.0",
-      "react": "*",
-      "react-final-form": ">=6.3.0",
-      "react-final-form-arrays": ">=3.1.0",
-      "react-intl": ">=5.8.1",
-      "react-query": ">=3.9.0",
-      "react-router-dom": ">=5.2.0"
-    },
-    "main": "src/index.js",
-    "module": "es/index.js",
-    "repository": {
-      "type": "git",
-      "url": "git@gitlab.com:knowledge-integration/folio/stripes-kint-components.git"
-    },
-    "author": "knowledgeintegration"
-  }
-
-yarn manifest: 
-  No manifest
-
-Lockfile: 
-  No lockfile