@uncinc/uncinc-react-kitchen-sink 2.3.5 → 2.4.0

package/dist/hooks/useTrapFocus.ts

@@ -0,0 +1,80 @@
+import { RefObject, useEffect } from 'react';
+
+export interface UseTrapFocusOptions<T extends HTMLElement> {
+  ref: RefObject<T>;
+  isActive?: boolean;
+}
+
+/**
+ * Helper to trap focus within a certain component,
+ * which is useful for canvas menu lists or modals
+ */
+export default function useTrapFocus<T extends HTMLElement>(
+  options: UseTrapFocusOptions<T>,
+) {
+  const {
+    ref,
+    isActive = false,
+  } = options;
+
+  useEffect(() => {
+    function onKeyDown(e: KeyboardEvent) {
+      if (ref.current && isActive) {
+        const { first, last } = getFocusableElements(ref.current);
+        const isTabPressed = e.key === 'Tab';
+
+        if (!isTabPressed) {
+          return;
+        }
+
+        if (e.shiftKey && document.activeElement === first) {
+          if (last) last.focus();
+          e.preventDefault();
+          return;
+        }
+
+        if (!e.shiftKey && document.activeElement === last) {
+          if (first) first.focus();
+          e.preventDefault();
+        }
+      }
+    }
+
+    if (ref.current) {
+      ref.current.addEventListener('keydown', onKeyDown);
+    }
+
+    return () => {
+      if (ref.current) {
+        ref.current.removeEventListener('keydown', onKeyDown);
+      }
+    };
+  }, [ref, isActive]);
+
+  function getFocusableElements(element: Element) {
+    const focusableElementTags = [
+      'a[href]',
+      'area[href]',
+      'button',
+      'input',
+      'textarea',
+      'select',
+      'details',
+      '[tabindex]:not([tabindex="-1"])',
+    ];
+
+    const focusableElements = [
+      ...element.querySelectorAll(focusableElementTags.join(', ')),
+    ].filter(
+      (el) => !el.hasAttribute('disabled') && !el.hasAttribute('aria-hidden'),
+    ) as HTMLElement[];
+
+    return {
+      focusableElements,
+      first: focusableElements.length ? focusableElements[0] : null,
+      last: focusableElements.length
+        ? focusableElements[focusableElements.length - 1]
+        : null,
+    } as const;
+  }
+}

package/dist/index.js

@@ -18,6 +18,7 @@ export { default as Image } from './components/Image';
 export { default as ImageBackground } from './components/Image/Background';
 export { default as InlineMenu } from './components/InlineMenu';
 export { default as Picture } from './components/Image/Picture';
+export { default as Dialog } from './components/Dialog';
 export { default as Share } from './components/Share';
 export { default as SliderRelated } from './components/Sliders/SliderRelated';
 export { default as FormikWrapper } from './components/Form/FormikWrapper';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uncinc/uncinc-react-kitchen-sink",
-  "version": "2.3.5",
+  "version": "2.4.0",
   "description": "Default React components that are easily extended.",
   "author": "uncinc",
   "license": "MIT",
@@ -22,27 +22,37 @@
     "access": "public"
   },
   "scripts": {
+    "stylelint": "stylelint **/*.scss",
+    "stylelint:fix": "stylelint --fix **/*.scss",
     "start": "yarn run storybook",
     "build": "react-scripts build",
     "test": "jest",
     "eject": "react-scripts eject",
     "prepare": "yarn run publish:npm",
-    "storybook": "start-storybook -p 9009 -s public",
-    "build-storybook": "build-storybook -s public && npx sb extract",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "yalc-watch": "nodemon -e js,jsx --ignore dist --exec \"yalc publish && yalc push\"",
     "publish:npm": "cross-env NODE_ENV=production && rm -rf dist && mkdir dist && npx babel src --out-dir dist --copy-files",
-    "extract": "sb extract"
+    "extract": "sb extract",
+    "eslint": "NODE_ENV=development eslint './src/**/*.{js,jsx,ts,tsx}'",
+    "eslint:fix": "NODE_ENV=development eslint --fix './src/**/*.{js,jsx,ts,tsx}'"
   },
   "dependencies": {
     "@apollo/client": "^3.4.16",
     "@elastic/datemath": "^5.0.3",
-    "@elastic/eui": "^40.0.0",
     "@loadable/component": "^5.15.0",
     "@searchkit/client": "^3.0.0-canary.45",
     "@searchkit/elastic-ui": "^3.0.0-canary.45",
+    "@types/jest": "^29.5.1",
+    "@types/node": "^20.1.0",
+    "@types/react": "^18.2.6",
+    "@types/react-dom": "^18.2.4",
+    "@types/react-router": "^5.1.20",
+    "@types/webpack-env": "^1.18.0",
     "@uncinc/react-drupal-core": "^2.3.4",
     "apollo-server-micro": "^3.4.0",
     "bootstrap": "^4",
+    "eslint-webpack-plugin": "^2",
     "fork-ts-checker-webpack-plugin-alt": "0.4.14",
     "formik": "^2.2.6",
     "graphql": "^15.7.0",
@@ -57,6 +67,7 @@
     "next-with-apollo": "^5.2.1",
     "ola": "^1.1.1",
     "path": "^0.12.7",
+    "postcss": "^8.4.24",
     "react": "^16 || ^17 || ^18",
     "react-animate-height": "^2.0.23",
     "react-autosuggest": "^10.0.2",
@@ -69,6 +80,7 @@
     "react-lazyload": "^3.0.0",
     "react-paginate": "^7.1.3",
     "react-redux": "^7.2.4",
+    "react-remove-scroll": "^2.5.5",
     "react-router": "5.2.0",
     "react-router-dom": "5.2.0",
     "react-select": "^3.1.0",
@@ -78,7 +90,9 @@
     "redux": "^4.0.5",
     "sass": "^1.55.0",
     "sass-loader": "^8.0.2",
-    "slick-carousel": "^1.8.1"
+    "slick-carousel": "^1.8.1",
+    "typescript": "^5.0.4",
+    "uuid": "^9.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.0.0-beta.44",
@@ -87,30 +101,38 @@
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/runtime": "^7.9.6",
-    "@storybook/addon-actions": "^6.2.8",
-    "@storybook/addon-info": "^5.3.21",
-    "@storybook/addon-links": "^6.2.8",
-    "@storybook/addons": "^6.2.8",
-    "@storybook/react": "^6.2.8",
-    "@storybook/theming": "^6.2.8",
+    "@storybook/addon-actions": "^7.0.18",
+    "@storybook/addon-essentials": "^7.0.18",
+    "@storybook/addon-interactions": "^7.0.18",
+    "@storybook/addon-links": "^7.0.18",
+    "@storybook/addons": "^7.0.18",
+    "@storybook/blocks": "^7.0.18",
+    "@storybook/preset-create-react-app": "^7.0.18",
+    "@storybook/react": "^7.0.18",
+    "@storybook/react-webpack5": "^7.0.18",
+    "@storybook/testing-library": "^0.0.14-next.2",
+    "@storybook/theming": "^7.0.18",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "@uncinc/eslint-config": "^1.0.5",
+    "@uncinc/stylelint-config": "^1.0.2",
     "babel-jest": "^29.4.3",
+    "babel-plugin-named-exports-order": "^0.0.2",
     "chai": "^4.2.0",
     "cross-env": "^7.0.2",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
     "jest": "^29.4.3",
-    "react-scripts": "3.4.1",
+    "prop-types": "^15.8.1",
+    "react-scripts": "^5.0.1",
     "react-test-renderer": "^18.2.0",
     "sinon": "^9.0.2",
     "sinon-chai": "^3.5.0",
+    "storybook": "^7.0.18",
     "storybook-addon-export-stories": "^1.0.0",
-    "storybook-react-i18next": "^1.1.3"
-  },
-  "eslintConfig": {
-    "extends": "react-app"
+    "storybook-react-i18next": "^1.1.3",
+    "webpack": "^5.85.1"
   },
   "browserslist": {
     "production": [

package/dist/components/SearchKit/Facets/HierarchicalFilterFacet/index.js

@@ -1,60 +0,0 @@
-import React, { Fragment, useRef } from 'react';
-import { EuiFacetGroup, EuiTitle, EuiFacetButton } from '@elastic/eui';
-import { useSearchkit, FilterLink } from '@searchkit/client';
-const EntriesList = ({
-  entries,
-  loading,
-  facet
-}) => {
-  console.log('entries', entries);
-  const api = useSearchkit();
-  const entriesElements = entries.map(entry => {
-    const ref = useRef();
-    return /*#__PURE__*/React.createElement(Fragment, {
-      key: entry.label
-    }, /*#__PURE__*/React.createElement(EuiFacetButton, {
-      style: {
-        height: '28px',
-        marginTop: 0,
-        marginBottom: 0
-      },
-      quantity: entry.count,
-      isSelected: api.isFilterSelected({
-        identifier: facet.identifier,
-        value: entry.label,
-        level: entry.level
-      }),
-      isLoading: loading,
-      onClick: e => {
-        ref.current.onClick(e);
-      }
-    }, /*#__PURE__*/React.createElement(FilterLink, {
-      ref: ref,
-      filter: {
-        identifier: facet.identifier,
-        value: entry.label,
-        level: entry.level
-      }
-    }, entry.label)), /*#__PURE__*/React.createElement("div", {
-      style: {
-        marginLeft: '10px'
-      }
-    }, entry.entries && /*#__PURE__*/React.createElement(EntriesList, {
-      entries: entry.entries,
-      loading: loading,
-      facet: facet
-    })));
-  });
-  return /*#__PURE__*/React.createElement(EuiFacetGroup, null, entriesElements);
-};
-export const HierarchicalFilterFacet = ({
-  facet,
-  loading
-}) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EuiTitle, {
-  size: "xxs"
-}, /*#__PURE__*/React.createElement("h3", null, facet.label)), /*#__PURE__*/React.createElement(EntriesList, {
-  entries: facet.entries,
-  facet: facet,
-  loading: loading
-}));
-HierarchicalFilterFacet.DISPLAY = 'HierarchicalFilterFacet';

package/dist/components/SearchKit/Facets/HierarchicalMenuFacet/index.js

@@ -1,60 +0,0 @@
-import React, { Fragment, useRef } from 'react';
-import { EuiFacetGroup, EuiTitle, EuiFacetButton } from '@elastic/eui';
-import { useSearchkit, FilterLink } from '@searchkit/client';
-const EntriesList = ({
-  entries,
-  loading,
-  facet
-}) => {
-  console.log('entries', entries);
-  const api = useSearchkit();
-  const entriesElements = entries.map(entry => {
-    const ref = useRef();
-    return /*#__PURE__*/React.createElement(Fragment, {
-      key: entry.label
-    }, /*#__PURE__*/React.createElement(EuiFacetButton, {
-      style: {
-        height: '28px',
-        marginTop: 0,
-        marginBottom: 0
-      },
-      quantity: entry.count,
-      isSelected: api.isFilterSelected({
-        identifier: facet.identifier,
-        value: entry.label,
-        level: entry.level
-      }),
-      isLoading: loading,
-      onClick: e => {
-        ref.current.onClick(e);
-      }
-    }, /*#__PURE__*/React.createElement(FilterLink, {
-      ref: ref,
-      filter: {
-        identifier: facet.identifier,
-        value: entry.label,
-        level: entry.level
-      }
-    }, entry.label)), /*#__PURE__*/React.createElement("div", {
-      style: {
-        marginLeft: '10px'
-      }
-    }, entry.entries && /*#__PURE__*/React.createElement(EntriesList, {
-      entries: entry.entries,
-      loading: loading,
-      facet: facet
-    })));
-  });
-  return /*#__PURE__*/React.createElement(EuiFacetGroup, null, entriesElements);
-};
-export const HierarchicalMenuFacet = ({
-  facet,
-  loading
-}) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EuiTitle, {
-  size: "xxs"
-}, /*#__PURE__*/React.createElement("h3", null, facet.label)), /*#__PURE__*/React.createElement(EntriesList, {
-  entries: facet.entries,
-  facet: facet,
-  loading: loading
-}));
-HierarchicalMenuFacet.DISPLAY = 'HierarchicalMenuFacet';