From c506038fad5f187b9d95818c4c87235f4357bc62 Mon Sep 17 00:00:00 2001 From: Braden MacDonald Date: Thu, 9 Jan 2025 12:00:45 -0800 Subject: [PATCH] fix: Gatsby webpack conflicts b/w e.g. 'useToggle.tsx' and 'useToggle.mdx' --- src/ColorPicker/index.jsx | 2 +- src/DataTable/CollapsibleButtonGroup.jsx | 2 +- src/Form/FormAutosuggest.jsx | 2 +- src/Menu/SelectMenu.jsx | 2 +- src/Menu/index.jsx | 2 +- src/Tabs/index.jsx | 2 +- src/hooks/tests/useToggle.test.tsx | 2 +- ...ArrowKeyNavigation.tsx => useArrowKeyNavigationHook.tsx} | 4 ++++ ...tVisibleChild.tsx => useIndexOfLastVisibleChildHook.tsx} | 4 ++++ src/hooks/{useToggle.tsx => useToggleHook.tsx} | 4 ++++ src/index.d.ts | 6 +++--- src/index.js | 6 +++--- www/gatsby-config.mjs | 1 - 13 files changed, 25 insertions(+), 14 deletions(-) rename src/hooks/{useArrowKeyNavigation.tsx => useArrowKeyNavigationHook.tsx} (92%) rename src/hooks/{useIndexOfLastVisibleChild.tsx => useIndexOfLastVisibleChildHook.tsx} (88%) rename src/hooks/{useToggle.tsx => useToggleHook.tsx} (79%) diff --git a/src/ColorPicker/index.jsx b/src/ColorPicker/index.jsx index 2877ec6f23..235e5ec3ba 100644 --- a/src/ColorPicker/index.jsx +++ b/src/ColorPicker/index.jsx @@ -8,7 +8,7 @@ import Form from '../Form'; import ModalPopup from '../Modal/ModalPopup'; import { OverlayTrigger } from '../Overlay'; import Tooltip from '../Tooltip'; -import useToggle from '../hooks/useToggle'; +import useToggle from '../hooks/useToggleHook'; function ColorPicker({ color, setColor, className, size, diff --git a/src/DataTable/CollapsibleButtonGroup.jsx b/src/DataTable/CollapsibleButtonGroup.jsx index 4c23c41f85..9c6af2adc0 100644 --- a/src/DataTable/CollapsibleButtonGroup.jsx +++ b/src/DataTable/CollapsibleButtonGroup.jsx @@ -2,7 +2,7 @@ import React, { useContext, useMemo, useState } from 'react'; import PropTypes from 'prop-types'; import { MoreVert } from '../../icons'; -import useToggle from '../hooks/useToggle'; +import useToggle from '../hooks/useToggleHook'; import useWindowSize from '../hooks/useWindowSize'; import DataTableContext from './DataTableContext'; import Icon from '../Icon'; diff --git a/src/Form/FormAutosuggest.jsx b/src/Form/FormAutosuggest.jsx index 9b41b0669b..5c39d6f536 100644 --- a/src/Form/FormAutosuggest.jsx +++ b/src/Form/FormAutosuggest.jsx @@ -12,7 +12,7 @@ import FormControl from './FormControl'; import FormControlFeedback from './FormControlFeedback'; import IconButton from '../IconButton'; import Spinner from '../Spinner'; -import useArrowKeyNavigation from '../hooks/useArrowKeyNavigation'; +import useArrowKeyNavigation from '../hooks/useArrowKeyNavigationHook'; import messages from './messages'; const FormAutosuggest = forwardRef( diff --git a/src/Menu/SelectMenu.jsx b/src/Menu/SelectMenu.jsx index 0e6feb9506..ba42ca1a21 100644 --- a/src/Menu/SelectMenu.jsx +++ b/src/Menu/SelectMenu.jsx @@ -4,7 +4,7 @@ import classNames from 'classnames'; import { ExpandMore } from '../../icons'; import Button from '../Button'; import ModalPopup from '../Modal/ModalPopup'; -import useToggle from '../hooks/useToggle'; +import useToggle from '../hooks/useToggleHook'; import Menu from '.'; import withDeprecatedProps, { DeprTypes } from '../withDeprecatedProps'; diff --git a/src/Menu/index.jsx b/src/Menu/index.jsx index 5330588cbc..34522bd42b 100644 --- a/src/Menu/index.jsx +++ b/src/Menu/index.jsx @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; -import useArrowKeyNavigation from '../hooks/useArrowKeyNavigation'; +import useArrowKeyNavigation from '../hooks/useArrowKeyNavigationHook'; function Menu({ as, diff --git a/src/Tabs/index.jsx b/src/Tabs/index.jsx index 140593c48a..d39c0c53b7 100644 --- a/src/Tabs/index.jsx +++ b/src/Tabs/index.jsx @@ -11,7 +11,7 @@ import BaseTabs from 'react-bootstrap/Tabs'; import TabsDeprecated from './deprecated'; import Bubble from '../Bubble'; import Dropdown from '../Dropdown'; -import useIndexOfLastVisibleChild from '../hooks/useIndexOfLastVisibleChild'; +import useIndexOfLastVisibleChild from '../hooks/useIndexOfLastVisibleChildHook'; import Tab from './Tab'; export const MORE_TAB_TEXT = 'More...'; diff --git a/src/hooks/tests/useToggle.test.tsx b/src/hooks/tests/useToggle.test.tsx index 0c457617f1..4b5b7083fa 100644 --- a/src/hooks/tests/useToggle.test.tsx +++ b/src/hooks/tests/useToggle.test.tsx @@ -4,7 +4,7 @@ import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { useToggle } from '../..'; -import { ToggleHandlers } from '../useToggle'; +import { ToggleHandlers } from '../useToggleHook'; const TOGGLE_IS_ON = 'on'; const TOGGLE_IS_OFF = 'off'; diff --git a/src/hooks/useArrowKeyNavigation.tsx b/src/hooks/useArrowKeyNavigationHook.tsx similarity index 92% rename from src/hooks/useArrowKeyNavigation.tsx rename to src/hooks/useArrowKeyNavigationHook.tsx index 1700bbafbc..da55c9cb86 100644 --- a/src/hooks/useArrowKeyNavigation.tsx +++ b/src/hooks/useArrowKeyNavigationHook.tsx @@ -1,3 +1,7 @@ +// Note: this file was renamed from 'useArrowKeyNavigation.tsx' to 'useArrowKeyNavigationHook.tsx' to fix +// some bugs in the Gatsby www site, where Webpack was getting the .tsx and .mdx +// files confused. Renaming this file allows us to keep the URLs of the docs site +// unchanged. import { useRef, useEffect } from 'react'; interface HandleEnterArgs { diff --git a/src/hooks/useIndexOfLastVisibleChild.tsx b/src/hooks/useIndexOfLastVisibleChildHook.tsx similarity index 88% rename from src/hooks/useIndexOfLastVisibleChild.tsx rename to src/hooks/useIndexOfLastVisibleChildHook.tsx index 2111152981..5278638f40 100644 --- a/src/hooks/useIndexOfLastVisibleChild.tsx +++ b/src/hooks/useIndexOfLastVisibleChildHook.tsx @@ -1,3 +1,7 @@ +// Note: this file was renamed from 'useIndexOfLastVisibleChild.tsx' to 'useIndexOfLastVisibleChildHook.tsx' to fix +// some bugs in the Gatsby www site, where Webpack was getting the .tsx and .mdx +// files confused. Renaming this file allows us to keep the URLs of the docs site +// unchanged. import { useLayoutEffect, useState } from 'react'; /** diff --git a/src/hooks/useToggle.tsx b/src/hooks/useToggleHook.tsx similarity index 79% rename from src/hooks/useToggle.tsx rename to src/hooks/useToggleHook.tsx index 20614dcf44..70618a3091 100644 --- a/src/hooks/useToggle.tsx +++ b/src/hooks/useToggleHook.tsx @@ -1,3 +1,7 @@ +// Note: this file was renamed from 'useToggle.tsx' to 'useToggleHook.tsx' to fix +// some bugs in the Gatsby www site, where Webpack was getting the .tsx and .mdx +// files confused. Renaming this file allows us to keep the URLs of the docs site +// unchanged. import { useState, useCallback } from 'react'; export type Toggler = [ diff --git a/src/index.d.ts b/src/index.d.ts index 883fc323e0..293739d1cc 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -41,9 +41,9 @@ export { default as Overlay, OverlayTrigger } from './Overlay'; export { default as Portal } from './Modal/Portal'; export { default as Tooltip } from './Tooltip'; export { default as useWindowSize, type WindowSizeData } from './hooks/useWindowSize'; -export { default as useToggle, type Toggler, type ToggleHandlers } from './hooks/useToggle'; -export { default as useArrowKeyNavigation, type ArrowKeyNavProps } from './hooks/useArrowKeyNavigation'; -export { default as useIndexOfLastVisibleChild } from './hooks/useIndexOfLastVisibleChild'; +export { default as useToggle, type Toggler, type ToggleHandlers } from './hooks/useToggleHook'; +export { default as useArrowKeyNavigation, type ArrowKeyNavProps } from './hooks/useArrowKeyNavigationHook'; +export { default as useIndexOfLastVisibleChild } from './hooks/useIndexOfLastVisibleChildHook'; export { default as useIsVisible } from './hooks/useIsVisible'; // // // // // // // // // // // // // // // // // // // // // // // // // // // diff --git a/src/index.js b/src/index.js index 7b52e0f891..85b8046e4e 100644 --- a/src/index.js +++ b/src/index.js @@ -41,9 +41,9 @@ export { default as Overlay, OverlayTrigger } from './Overlay'; export { default as Portal } from './Modal/Portal'; export { default as Tooltip } from './Tooltip'; export { default as useWindowSize } from './hooks/useWindowSize'; -export { default as useToggle } from './hooks/useToggle'; -export { default as useArrowKeyNavigation } from './hooks/useArrowKeyNavigation'; -export { default as useIndexOfLastVisibleChild } from './hooks/useIndexOfLastVisibleChild'; +export { default as useToggle } from './hooks/useToggleHook'; +export { default as useArrowKeyNavigation } from './hooks/useArrowKeyNavigationHook'; +export { default as useIndexOfLastVisibleChild } from './hooks/useIndexOfLastVisibleChildHook'; export { default as useIsVisible } from './hooks/useIsVisible'; // // // // // // // // // // // // // // // // // // // // // // // // // // // diff --git a/www/gatsby-config.mjs b/www/gatsby-config.mjs index 11651997df..9e5aff9166 100644 --- a/www/gatsby-config.mjs +++ b/www/gatsby-config.mjs @@ -42,7 +42,6 @@ const plugins = [ }, 'gatsby-plugin-react-helmet', 'gatsby-plugin-mdx-source-name', - 'gatsby-plugin-typescript', { resolve: 'gatsby-plugin-manifest', options: {