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

package/lib/components/index.js

@@ -267,6 +267,17 @@ Object.keys(_FileUpload).forEach(function (key) {
     }
   });
 });
+var _FilterButtonOverlay = require("./FilterButtonOverlay");
+Object.keys(_FilterButtonOverlay).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _FilterButtonOverlay[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _FilterButtonOverlay[key];
+    }
+  });
+});
 var _FocusManager = require("./FocusManager");
 Object.keys(_FocusManager).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -333,6 +344,17 @@ Object.keys(_InContextAlert).forEach(function (key) {
     }
   });
 });
+var _InfinitePagination = require("./InfinitePagination");
+Object.keys(_InfinitePagination).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _InfinitePagination[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _InfinitePagination[key];
+    }
+  });
+});
 var _InlineDropdown = require("./InlineDropdown");
 Object.keys(_InlineDropdown).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/components/index.js.flow

@@ -24,12 +24,14 @@ export * from './Dropdown';
 export * from './EmptyState';
 export * from './ErrorMessage';
 export * from './FileUpload';
+export * from './FilterButtonOverlay';
 export * from './FocusManager';
 export * from './FocusManagerWithArrowKeyNavigation';
 export * from './FormTitleWrapper';
 export * from './Grid';
 export * from './Icon';
 export * from './InContextAlert';
+export * from './InfinitePagination';
 export * from './InlineDropdown';
 export * from './Input';
 export * from './KPIBox';

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/lib/utils/date-range-picker/date-range-picker.d.ts

@@ -116,8 +116,10 @@ export const wrangleMoment = (date?: string | Date): Date => {
 
   return date instanceof moment ? date.toDate() : parseISO(date);
 };
-export const formatIsoDate = (date?: string | Date): string =>
-  moment.utc(date).format('YYYY-MM-DD');
+export const formatIsoDate = (
+  date?: string | Date,
+  format: string = 'YYYY-MM-DD',
+): string => moment.utc(date).format(format);
 export const isStartOfRange = ({startDate}: DateRange, date: string): boolean =>
   Boolean(startDate) && moment.utc(date).isSame(moment.utc(startDate), 'd');
 export const isEndOfRange = ({endDate}: DateRange, date: string): boolean =>
@@ -389,3 +391,21 @@ export const isBetween = (
 // If the date results in a date that exists in the calendar
 export const isValid = (date?: string | null | undefined): boolean =>
   moment.utc(date).isValid();
+export const getFormattedDate = (
+  marker: string,
+  dateRange: DateRange,
+): string => {
+  const {startDate, endDate} = dateRange;
+
+  switch (marker) {
+    case MARKERS.DATE_RANGE_START:
+      return startDate
+        ? moment.utc(startDate).format('MMM DD, YYYY')
+        : 'MMM DD, YYYY';
+
+    default:
+      return endDate
+        ? moment.utc(endDate).format('MMM DD, YYYY')
+        : 'MMM DD, YYYY';
+  }
+};

package/lib/utils/date-range-picker/date-range-picker.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.wrangleMoment = exports.isValid = exports.isStartOfRange = exports.isStartDateEndDateSame = exports.isSameOrBefore = exports.isSameOrAfter = exports.isSame = exports.isEndOfRange = exports.isBetween = exports.isBefore = exports.isAfter = exports.inDateRange = exports.getValidDates = exports.getTimezones = exports.getSubtractedDate = exports.getMonthEndDate = exports.getDaysInMonth = exports.getAvailableMonths = exports.getAddedDate = exports.generateAvailableYears = exports.formatIsoDate = exports.checkRangeValidity = exports.WEEKDAYS = exports.NAVIGATION_ACTION = exports.MONTHS = exports.MARKERS = exports.DATE_RANGE_PICKER_ERRORS = void 0;
+exports.wrangleMoment = exports.isValid = exports.isStartOfRange = exports.isStartDateEndDateSame = exports.isSameOrBefore = exports.isSameOrAfter = exports.isSame = exports.isEndOfRange = exports.isBetween = exports.isBefore = exports.isAfter = exports.inDateRange = exports.getValidDates = exports.getTimezones = exports.getSubtractedDate = exports.getMonthEndDate = exports.getFormattedDate = exports.getDaysInMonth = exports.getAvailableMonths = exports.getAddedDate = exports.generateAvailableYears = exports.formatIsoDate = exports.checkRangeValidity = exports.WEEKDAYS = exports.NAVIGATION_ACTION = exports.MONTHS = exports.MARKERS = exports.DATE_RANGE_PICKER_ERRORS = void 0;
 var _parseISO = _interopRequireDefault(require("date-fns/parseISO"));
 var _invariant = _interopRequireDefault(require("invariant"));
 var _lodash = require("lodash");
@@ -104,7 +104,10 @@ const wrangleMoment = date => {
   return date instanceof _moment.default ? date.toDate() : (0, _parseISO.default)(date);
 };
 exports.wrangleMoment = wrangleMoment;
-const formatIsoDate = date => _moment.default.utc(date).format('YYYY-MM-DD');
+const formatIsoDate = function (date) {
+  let format = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'YYYY-MM-DD';
+  return _moment.default.utc(date).format(format);
+};
 exports.formatIsoDate = formatIsoDate;
 const isStartOfRange = (_ref, date) => {
   let {
@@ -323,4 +326,17 @@ const isBetween = (date, startRange, endRange) => _moment.default.utc(date).isBe
 // If the date results in a date that exists in the calendar
 exports.isBetween = isBetween;
 const isValid = date => _moment.default.utc(date).isValid();
-exports.isValid = isValid;
+exports.isValid = isValid;
+const getFormattedDate = (marker, dateRange) => {
+  const {
+    startDate,
+    endDate
+  } = dateRange;
+  switch (marker) {
+    case MARKERS.DATE_RANGE_START:
+      return startDate ? _moment.default.utc(startDate).format('MMM DD, YYYY') : 'MMM DD, YYYY';
+    default:
+      return endDate ? _moment.default.utc(endDate).format('MMM DD, YYYY') : 'MMM DD, YYYY';
+  }
+};
+exports.getFormattedDate = getFormattedDate;

package/lib/utils/date-range-picker/date-range-picker.js.flow

@@ -88,8 +88,10 @@ export const wrangleMoment = (date?: string | Date): Date => {
   return date instanceof moment ? date.toDate() : parseISO(date);
 };
 
-export const formatIsoDate = (date?: string | Date): string =>
-  moment.utc(date).format('YYYY-MM-DD');
+export const formatIsoDate = (
+  date?: string | Date,
+  format?: string = 'YYYY-MM-DD',
+): string => moment.utc(date).format(format);
 
 export const isStartOfRange = ({startDate}: DateRange, date: string): boolean =>
   Boolean(startDate) && moment.utc(date).isSame(moment.utc(startDate), 'd');
@@ -370,3 +372,20 @@ export const isBetween = (
 
 // If the date results in a date that exists in the calendar
 export const isValid = (date?: ?string): boolean => moment.utc(date).isValid();
+
+export const getFormattedDate = (
+  marker: string,
+  dateRange: DateRange,
+): string => {
+  const {startDate, endDate} = dateRange;
+  switch (marker) {
+  case MARKERS.DATE_RANGE_START:
+    return startDate
+      ? moment.utc(startDate).format('MMM DD, YYYY')
+      : 'MMM DD, YYYY';
+  default:
+    return endDate
+      ? moment.utc(endDate).format('MMM DD, YYYY')
+      : 'MMM DD, YYYY';
+  }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.3.41",
+  "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"
   }
 }