@spaced-out/ui-design-system 0.3.42 → 0.3.43

package/lib/hooks/index.d.ts

@@ -3,11 +3,13 @@ export * from './useCopyToClipboard';
 export * from './useDebounce';
 export * from './useFileUpload';
 export * from './useFilteredOptions';
+export * from './useInfiniteScroll';
 export * from './useInputState';
 export * from './useLockedBody';
 export * from './useModal';
 export * from './useMountTransition';
 export * from './usePagination';
+export * from './useResizeObserver';
 export * from './useToastPortal';
 export * from './useToggle';
 export * from './useWindowSize';

package/lib/hooks/index.js

@@ -58,6 +58,17 @@ Object.keys(_useFilteredOptions).forEach(function (key) {
     }
   });
 });
+var _useInfiniteScroll = require("./useInfiniteScroll");
+Object.keys(_useInfiniteScroll).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useInfiniteScroll[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useInfiniteScroll[key];
+    }
+  });
+});
 var _useInputState = require("./useInputState");
 Object.keys(_useInputState).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -113,6 +124,17 @@ Object.keys(_usePagination).forEach(function (key) {
     }
   });
 });
+var _useResizeObserver = require("./useResizeObserver");
+Object.keys(_useResizeObserver).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useResizeObserver[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useResizeObserver[key];
+    }
+  });
+});
 var _useToastPortal = require("./useToastPortal");
 Object.keys(_useToastPortal).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/hooks/index.js.flow

@@ -5,11 +5,13 @@ export * from './useCopyToClipboard';
 export * from './useDebounce';
 export * from './useFileUpload';
 export * from './useFilteredOptions';
+export * from './useInfiniteScroll';
 export * from './useInputState';
 export * from './useLockedBody';
 export * from './useModal';
 export * from './useMountTransition';
 export * from './usePagination';
+export * from './useResizeObserver';
 export * from './useToastPortal';
 export * from './useToggle';
 export * from './useWindowSize';

package/lib/hooks/useInfiniteScroll/index.d.ts

@@ -0,0 +1 @@
+export * from './useInfiniteScroll';

package/lib/hooks/useInfiniteScroll/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _useInfiniteScroll = require("./useInfiniteScroll");
+Object.keys(_useInfiniteScroll).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useInfiniteScroll[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useInfiniteScroll[key];
+    }
+  });
+});

package/lib/hooks/useInfiniteScroll/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './useInfiniteScroll';

package/lib/hooks/useInfiniteScroll/useInfiniteScroll.d.ts

@@ -0,0 +1,77 @@
+import * as React from 'react';
+type InfiniteScrollOptions = {
+  itemSize: number | ((index: number) => number);
+  threshold: number;
+  itemsLength: number;
+  hasNextPage: boolean;
+  loadMoreItems: () => Promise<void>;
+  containerHeight: number;
+  isVariableSizeList?: boolean;
+};
+export function useInfiniteScroll({
+  itemSize,
+  threshold,
+  itemsLength,
+  hasNextPage,
+  loadMoreItems,
+  containerHeight,
+  isVariableSizeList,
+}: InfiniteScrollOptions): (scrollData: {
+  scrollOffset: number;
+  scrollDirection: 'forward' | 'backward';
+}) => void {
+  const [isLoading, setIsLoading] = React.useState(false);
+  const loadingRef = React.useRef(false);
+  const handleLoadMore = React.useCallback(async () => {
+    if (!hasNextPage || isLoading || loadingRef.current) {
+      return;
+    }
+
+    loadingRef.current = true;
+    setIsLoading(true);
+
+    try {
+      await loadMoreItems();
+    } catch (err) {
+      console.error('Error loading more items:', err);
+    } finally {
+      loadingRef.current = false;
+      setIsLoading(false);
+    }
+  }, [hasNextPage, isLoading, loadMoreItems]);
+  return React.useCallback(
+    ({scrollOffset, scrollDirection}) => {
+      if (scrollDirection !== 'forward') {
+        return;
+      }
+
+      let totalSize = 0;
+
+      if (isVariableSizeList && typeof itemSize === 'function') {
+        for (let i = 0; i < itemsLength; i++) {
+          totalSize += itemSize(i);
+        }
+      } else if (typeof itemSize === 'number') {
+        totalSize = itemsLength * itemSize;
+      }
+
+      if (
+        scrollOffset > totalSize - containerHeight - threshold &&
+        hasNextPage &&
+        !isLoading
+      ) {
+        handleLoadMore();
+      }
+    },
+    [
+      itemSize,
+      threshold,
+      isLoading,
+      itemsLength,
+      hasNextPage,
+      handleLoadMore,
+      containerHeight,
+      isVariableSizeList,
+    ],
+  );
+}

package/lib/hooks/useInfiniteScroll/useInfiniteScroll.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useInfiniteScroll = useInfiniteScroll;
+var React = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function useInfiniteScroll(_ref) {
+  let {
+    itemSize,
+    threshold,
+    itemsLength,
+    hasNextPage,
+    loadMoreItems,
+    containerHeight,
+    isVariableSizeList
+  } = _ref;
+  const [isLoading, setIsLoading] = React.useState(false);
+  const loadingRef = React.useRef(false);
+  const handleLoadMore = React.useCallback(async () => {
+    if (!hasNextPage || isLoading || loadingRef.current) {
+      return;
+    }
+    loadingRef.current = true;
+    setIsLoading(true);
+    try {
+      await loadMoreItems();
+    } catch (err) {
+      console.error('Error loading more items:', err);
+    } finally {
+      loadingRef.current = false;
+      setIsLoading(false);
+    }
+  }, [hasNextPage, isLoading, loadMoreItems]);
+  return React.useCallback(_ref2 => {
+    let {
+      scrollOffset,
+      scrollDirection
+    } = _ref2;
+    if (scrollDirection !== 'forward') {
+      return;
+    }
+    let totalSize = 0;
+    if (isVariableSizeList && typeof itemSize === 'function') {
+      for (let i = 0; i < itemsLength; i++) {
+        totalSize += itemSize(i);
+      }
+    } else if (typeof itemSize === 'number') {
+      totalSize = itemsLength * itemSize;
+    }
+    if (scrollOffset > totalSize - containerHeight - threshold && hasNextPage && !isLoading) {
+      handleLoadMore();
+    }
+  }, [itemSize, threshold, isLoading, itemsLength, hasNextPage, handleLoadMore, containerHeight, isVariableSizeList]);
+}

package/lib/hooks/useInfiniteScroll/useInfiniteScroll.js.flow

@@ -0,0 +1,82 @@
+// @flow strict
+import * as React from 'react';
+
+
+type InfiniteScrollOptions = {
+  itemSize: number | ((index: number) => number),
+  threshold: number,
+  itemsLength: number,
+  hasNextPage: boolean,
+  loadMoreItems: () => Promise<void>,
+  containerHeight: number,
+  isVariableSizeList?: boolean,
+};
+
+export function useInfiniteScroll({
+  itemSize,
+  threshold,
+  itemsLength,
+  hasNextPage,
+  loadMoreItems,
+  containerHeight,
+  isVariableSizeList,
+}: InfiniteScrollOptions): (scrollData: {
+  scrollOffset: number,
+  scrollDirection: 'forward' | 'backward',
+}) => void {
+  const [isLoading, setIsLoading] = React.useState(false);
+  const loadingRef = React.useRef(false);
+
+  const handleLoadMore = React.useCallback(async () => {
+    if (!hasNextPage || isLoading || loadingRef.current) {
+      return;
+    }
+
+    loadingRef.current = true;
+    setIsLoading(true);
+
+    try {
+      await loadMoreItems();
+    } catch (err) {
+      console.error('Error loading more items:', err);
+    } finally {
+      loadingRef.current = false;
+      setIsLoading(false);
+    }
+  }, [hasNextPage, isLoading, loadMoreItems]);
+
+  return React.useCallback(
+    ({scrollOffset, scrollDirection}) => {
+      if (scrollDirection !== 'forward') {
+        return;
+      }
+
+      let totalSize = 0;
+      if (isVariableSizeList && typeof itemSize === 'function') {
+        for (let i = 0; i < itemsLength; i++) {
+          totalSize += itemSize(i);
+        }
+      } else if (typeof itemSize === 'number') {
+        totalSize = itemsLength * itemSize;
+      }
+
+      if (
+        scrollOffset > totalSize - containerHeight - threshold &&
+        hasNextPage &&
+        !isLoading
+      ) {
+        handleLoadMore();
+      }
+    },
+    [
+      itemSize,
+      threshold,
+      isLoading,
+      itemsLength,
+      hasNextPage,
+      handleLoadMore,
+      containerHeight,
+      isVariableSizeList,
+    ],
+  );
+}

package/lib/hooks/useResizeObserver/index.d.ts

@@ -0,0 +1 @@
+export * from './useResizeObserver';

package/lib/hooks/useResizeObserver/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _useResizeObserver = require("./useResizeObserver");
+Object.keys(_useResizeObserver).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useResizeObserver[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useResizeObserver[key];
+    }
+  });
+});

package/lib/hooks/useResizeObserver/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './useResizeObserver';

package/lib/hooks/useResizeObserver/useResizeObserver.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+export function useResizeObserver(): [React.Ref<'div'>, number] {
+  const ref = React.useRef(null);
+  const [height, setHeight] = React.useState(0);
+  React.useEffect(() => {
+    const node = ref.current;
+
+    if (!node) {
+      return;
+    }
+
+    const resizeObserver = new ResizeObserver(([entry]) => {
+      setHeight(entry.contentRect.height);
+    });
+    resizeObserver.observe(node);
+    setHeight(node.getBoundingClientRect().height);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, []);
+  return [ref, height];
+}

package/lib/hooks/useResizeObserver/useResizeObserver.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useResizeObserver = useResizeObserver;
+var React = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function useResizeObserver() {
+  const ref = React.useRef(null);
+  const [height, setHeight] = React.useState(0);
+  React.useEffect(() => {
+    const node = ref.current;
+    if (!node) {
+      return;
+    }
+    const resizeObserver = new ResizeObserver(_ref => {
+      let [entry] = _ref;
+      setHeight(entry.contentRect.height);
+    });
+    resizeObserver.observe(node);
+    setHeight(node.getBoundingClientRect().height);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, []);
+  return [ref, height];
+}

package/lib/hooks/useResizeObserver/useResizeObserver.js.flow

@@ -0,0 +1,28 @@
+// @flow strict
+import * as React from 'react';
+
+
+export function useResizeObserver(): [React.Ref<'div'>, number] {
+  const ref = React.useRef(null);
+  const [height, setHeight] = React.useState(0);
+
+  React.useEffect(() => {
+    const node = ref.current;
+    if (!node) {
+      return;
+    }
+
+    const resizeObserver = new ResizeObserver(([entry]) => {
+      setHeight(entry.contentRect.height);
+    });
+
+    resizeObserver.observe(node);
+    setHeight(node.getBoundingClientRect().height);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, []);
+
+  return [ref, height];
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.3.42",
+  "version": "0.3.43",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {
@@ -64,18 +64,11 @@
     "@babel/preset-react": "^7.18.6",
     "@commitlint/cli": "^17.1.2",
     "@commitlint/config-conventional": "^17.1.0",
-    "@storybook/addon-a11y": "^8.5.2",
-    "@storybook/addon-essentials": "^8.5.2",
-    "@storybook/addon-mdx-gfm": "^8.5.2",
-    "@storybook/addon-storysource": "^8.5.2",
-    "@storybook/addon-webpack5-compiler-babel": "^3.0.5",
-    "@storybook/addons": "^7.6.17",
-    "@storybook/blocks": "^8.5.2",
-    "@storybook/react": "^8.5.2",
-    "@storybook/react-webpack5": "^8.5.2",
-    "@storybook/test-runner": "^0.21.0",
-    "@storybook/testing-react": "^2.0.1",
-    "@storybook/theming": "^8.5.2",
+    "@storybook/addon-a11y": "^9.1.0-alpha.3",
+    "@storybook/addon-docs": "^9.1.0-alpha.3",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
+    "@storybook/react-webpack5": "^9.1.0-alpha.3",
+    "@storybook/test-runner": "^0.22.0",
     "@testing-library/react": "^11.2.7",
     "all-contributors-cli": "^6.20.0",
     "babel-eslint": "^10.1.0",
@@ -93,7 +86,7 @@
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-simple-import-sort": "^8.0.0",
-    "eslint-plugin-storybook": "^0.11.2",
+    "eslint-plugin-storybook": "^9.1.0-alpha.3",
     "eslint-plugin-unused-imports": "^2.0.0",
     "flow-bin": "^0.184.0",
     "gulp": "^4.0.2",
@@ -111,7 +104,7 @@
     "rimraf": "^3.0.2",
     "simple-git": "^3.12.0",
     "standard-version": "^9.5.0",
-    "storybook": "^8.5.2",
+    "storybook": "^9.1.0-alpha.3",
     "storybook-css-modules": "^1.0.8",
     "storybook-vscode-component": "^1.0.9",
     "style-dictionary": "^3.7.1"
@@ -131,7 +124,7 @@
     }
   },
   "volta": {
-    "node": "18.20.5",
+    "node": "20.19.2",
     "yarn": "1.22.19"
   }
 }