From 6beaaa056a3f2c4f34b1ef3e5091629fd7d52539 Mon Sep 17 00:00:00 2001 From: David Jerleke Date: Tue, 28 May 2024 20:59:14 +0200 Subject: [PATCH 01/11] Implement #916. --- packages/embla-carousel-docs/.eslintrc.js | 4 + .../embla-carousel-docs/gatsby-browser.ts | 3 + packages/embla-carousel-docs/gatsby-ssr.tsx | 42 +- packages/embla-carousel-docs/package.json | 2 + .../src/assets/icons/cross.svg | 11 +- .../src/assets/icons/search.svg | 11 +- .../src/components/Button/ButtonBare.tsx | 7 +- .../src/components/Header/HeaderActions.tsx | 7 +- .../src/components/Hero/HeroBrand.tsx | 2 +- .../src/components/Input/InputText.tsx | 7 +- .../Input/createRadioOrCheckboxCard.tsx | 7 +- .../Input/createRadioOrCheckboxDefault.tsx | 7 +- .../components/KeyEvents/KeyEventsInit.tsx | 28 + .../KeyEventsSkipToContent.tsx} | 13 +- .../components/KeyEvents/keyEventsReducer.ts | 31 + .../KeyNavigating/KeyNavigatingContext.tsx | 53 -- .../src/components/Layout/Layout.tsx | 57 +- .../src/components/Link/LinkBare.tsx | 33 +- .../src/components/Link/LinkNavigation.tsx | 4 +- .../components/Mdx/Components/Admonition.tsx | 6 +- .../Mdx/Components/PageChildLinks.tsx | 4 +- .../Mdx/Components/PrismSyntaxFrame.tsx | 5 +- .../src/components/Modal/ModalLoading.tsx | 67 ++ .../components/Modal/ModalLoadingTrigger.tsx | 17 + .../Portal.tsx => Modal/ModalPortal.tsx} | 2 +- .../src/components/Modal/modalReducer.ts | 57 ++ .../src/components/Page/PageBreadcrumbs.tsx | 2 +- .../src/components/Page/PageGrid.tsx | 7 +- .../src/components/Redux/ReduxProvider.tsx | 14 + .../src/components/Routes/RoutesContext.tsx | 82 -- .../src/components/Routes/RoutesInit.tsx | 50 ++ .../src/components/Routes/RoutesLoading.tsx | 43 +- .../src/components/Routes/routesReducer.ts | 47 ++ .../components/Sandbox/SandboxSelection.tsx | 158 ++-- .../Sandbox/SandboxSelectionModal.tsx | 122 +++ .../src/components/Search/Search.tsx | 710 ++---------------- .../src/components/Search/SearchAlgolia.tsx | 696 +++++++++++++++++ .../components/Search/SearchAlgoliaToggle.tsx | 86 +++ .../src/components/Search/SearchButton.tsx | 32 + .../src/components/SiteLogo/SiteLogo.tsx | 5 +- .../SiteNavigation/SiteNavigation.tsx | 45 +- .../SiteNavigation/SiteNavigationContext.tsx | 49 -- .../SiteNavigationMenuCompact.tsx | 18 +- .../SiteNavigationMenuDesktop.tsx | 5 +- .../SiteNavigation/SiteNavigationSubMenu.tsx | 4 +- .../SiteNavigation/SiteNavigationSubMenus.tsx | 7 +- .../SiteNavigation/SiteNavigationToggle.tsx | 43 +- .../TableOfContents/TableOfContents.tsx | 5 +- .../TableOfContentsContext.tsx | 36 - .../TableOfContents/TableOfContentsInit.tsx | 27 + .../TableOfContents/TableOfContentsMenu.tsx | 7 +- .../TableOfContents/tableOfContentsReducer.ts | 34 + .../src/components/Tabs/Tabs.tsx | 62 +- .../src/components/Tabs/TabsContext.tsx | 47 -- .../src/components/Tabs/TabsList.tsx | 5 +- .../src/components/Tabs/TabsPanel.tsx | 15 +- .../src/components/Tabs/tabsReducer.ts | 37 + .../src/components/Theme/ThemeContext.tsx | 64 -- .../src/components/Theme/ThemeInit.tsx | 42 ++ .../src/components/Theme/ThemeToggle.tsx | 17 +- .../src/components/Theme/themeReducer.ts | 35 + .../embla-carousel-docs/src/consts/card.ts | 4 +- .../src/consts/fontSizes.ts | 2 +- .../{keyNavigatingStyles.ts => keyEvents.ts} | 0 .../embla-carousel-docs/src/consts/layers.ts | 1 + .../embla-carousel-docs/src/consts/modal.ts | 16 + .../embla-carousel-docs/src/consts/page.ts | 6 +- .../embla-carousel-docs/src/consts/redux.ts | 31 + .../embla-carousel-docs/src/consts/routes.ts | 13 + .../embla-carousel-docs/src/consts/sandbox.ts | 2 +- .../src/consts/scrollBars.ts | 6 +- .../src/consts/spacings.ts | 2 +- .../src/consts/tableOfContents.ts | 9 + .../embla-carousel-docs/src/consts/tabs.ts | 5 - .../src/consts/tapHighlight.ts | 2 +- .../src/hooks/useBreakpoints.ts | 2 +- .../src/hooks/useEventListener.ts | 47 +- .../src/hooks/useKeyNavigating.ts | 8 - .../src/hooks/useNavigation.ts | 8 - .../embla-carousel-docs/src/hooks/useRedux.ts | 6 + .../src/hooks/useRouteActive.ts | 23 - .../src/hooks/useRouteBreadcrumbs.ts | 14 - .../src/hooks/useRouteChildren.ts | 8 - .../src/hooks/useRouteCurrent.ts | 10 - .../src/hooks/useRoutes.ts | 54 +- .../src/hooks/useTableOfContents.ts | 8 - .../embla-carousel-docs/src/hooks/useTabs.ts | 4 - .../embla-carousel-docs/src/hooks/useTheme.ts | 4 - .../src/templates/Default.tsx | 2 +- .../src/templates/Generator.tsx | 2 +- .../src/utils/capitalizeFirstLetter.ts | 2 - .../src/utils/getRefElementOrNode.ts | 2 +- .../src/utils/getScrollPosition.ts | 23 + .../src/utils/getThemeFromDocument.ts | 2 +- .../embla-carousel-docs/src/utils/routes.ts | 7 +- .../embla-carousel-docs/src/utils/sandbox.ts | 4 +- .../embla-carousel-docs/src/utils/tabs.ts | 27 +- .../src/utils/useIsomorphicLayoutEffect.ts | 2 +- yarn.lock | 87 +++ 99 files changed, 2163 insertions(+), 1437 deletions(-) create mode 100644 packages/embla-carousel-docs/src/components/KeyEvents/KeyEventsInit.tsx rename packages/embla-carousel-docs/src/components/{KeyNavigating/KeyNavigatingSkipToContent.tsx => KeyEvents/KeyEventsSkipToContent.tsx} (78%) create mode 100644 packages/embla-carousel-docs/src/components/KeyEvents/keyEventsReducer.ts delete mode 100644 packages/embla-carousel-docs/src/components/KeyNavigating/KeyNavigatingContext.tsx create mode 100644 packages/embla-carousel-docs/src/components/Modal/ModalLoading.tsx create mode 100644 packages/embla-carousel-docs/src/components/Modal/ModalLoadingTrigger.tsx rename packages/embla-carousel-docs/src/components/{Portal/Portal.tsx => Modal/ModalPortal.tsx} (95%) create mode 100644 packages/embla-carousel-docs/src/components/Modal/modalReducer.ts create mode 100644 packages/embla-carousel-docs/src/components/Redux/ReduxProvider.tsx delete mode 100644 packages/embla-carousel-docs/src/components/Routes/RoutesContext.tsx create mode 100644 packages/embla-carousel-docs/src/components/Routes/RoutesInit.tsx create mode 100644 packages/embla-carousel-docs/src/components/Routes/routesReducer.ts create mode 100644 packages/embla-carousel-docs/src/components/Sandbox/SandboxSelectionModal.tsx create mode 100644 packages/embla-carousel-docs/src/components/Search/SearchAlgolia.tsx create mode 100644 packages/embla-carousel-docs/src/components/Search/SearchAlgoliaToggle.tsx create mode 100644 packages/embla-carousel-docs/src/components/Search/SearchButton.tsx delete mode 100644 packages/embla-carousel-docs/src/components/SiteNavigation/SiteNavigationContext.tsx delete mode 100644 packages/embla-carousel-docs/src/components/TableOfContents/TableOfContentsContext.tsx create mode 100644 packages/embla-carousel-docs/src/components/TableOfContents/TableOfContentsInit.tsx create mode 100644 packages/embla-carousel-docs/src/components/TableOfContents/tableOfContentsReducer.ts delete mode 100644 packages/embla-carousel-docs/src/components/Tabs/TabsContext.tsx create mode 100644 packages/embla-carousel-docs/src/components/Tabs/tabsReducer.ts delete mode 100644 packages/embla-carousel-docs/src/components/Theme/ThemeContext.tsx create mode 100644 packages/embla-carousel-docs/src/components/Theme/ThemeInit.tsx create mode 100644 packages/embla-carousel-docs/src/components/Theme/themeReducer.ts rename packages/embla-carousel-docs/src/consts/{keyNavigatingStyles.ts => keyEvents.ts} (100%) create mode 100644 packages/embla-carousel-docs/src/consts/modal.ts create mode 100644 packages/embla-carousel-docs/src/consts/redux.ts create mode 100644 packages/embla-carousel-docs/src/consts/routes.ts create mode 100644 packages/embla-carousel-docs/src/consts/tableOfContents.ts delete mode 100644 packages/embla-carousel-docs/src/hooks/useKeyNavigating.ts delete mode 100644 packages/embla-carousel-docs/src/hooks/useNavigation.ts create mode 100644 packages/embla-carousel-docs/src/hooks/useRedux.ts delete mode 100644 packages/embla-carousel-docs/src/hooks/useRouteActive.ts delete mode 100644 packages/embla-carousel-docs/src/hooks/useRouteBreadcrumbs.ts delete mode 100644 packages/embla-carousel-docs/src/hooks/useRouteChildren.ts delete mode 100644 packages/embla-carousel-docs/src/hooks/useRouteCurrent.ts delete mode 100644 packages/embla-carousel-docs/src/hooks/useTableOfContents.ts delete mode 100644 packages/embla-carousel-docs/src/hooks/useTabs.ts delete mode 100644 packages/embla-carousel-docs/src/hooks/useTheme.ts delete mode 100644 packages/embla-carousel-docs/src/utils/capitalizeFirstLetter.ts create mode 100644 packages/embla-carousel-docs/src/utils/getScrollPosition.ts diff --git a/packages/embla-carousel-docs/.eslintrc.js b/packages/embla-carousel-docs/.eslintrc.js index 57445d400..7e98e5f02 100644 --- a/packages/embla-carousel-docs/.eslintrc.js +++ b/packages/embla-carousel-docs/.eslintrc.js @@ -35,6 +35,10 @@ module.exports = { '@typescript-eslint/explicit-module-boundary-types': ['error'] } }, + { + files: ['src/consts/redux.ts'], + rules: { '@typescript-eslint/explicit-module-boundary-types': 'off' } + }, { files: ['src/components/Page/Mdx.tsx'], rules: { diff --git a/packages/embla-carousel-docs/gatsby-browser.ts b/packages/embla-carousel-docs/gatsby-browser.ts index 519f3c376..e1f4a5adf 100644 --- a/packages/embla-carousel-docs/gatsby-browser.ts +++ b/packages/embla-carousel-docs/gatsby-browser.ts @@ -1,4 +1,7 @@ import { GatsbyBrowser } from 'gatsby' +import { ReduxProvider } from './src/components/Redux/ReduxProvider' + +export const wrapRootElement = ReduxProvider export const onRouteUpdate: GatsbyBrowser['onRouteUpdate'] = ({ location }) => { const { hash } = location diff --git a/packages/embla-carousel-docs/gatsby-ssr.tsx b/packages/embla-carousel-docs/gatsby-ssr.tsx index 5345a045d..58163a7bb 100644 --- a/packages/embla-carousel-docs/gatsby-ssr.tsx +++ b/packages/embla-carousel-docs/gatsby-ssr.tsx @@ -1,3 +1,5 @@ +/// + import React from 'react' import config from './gatsby-config' import { GatsbySSR } from 'gatsby' @@ -8,8 +10,14 @@ import { THEME_META_SELECTOR, THEME_STYLES } from './src/consts/themes' +import { ReduxProvider } from './src/components/Redux/ReduxProvider' import { LOCALSTORAGE_KEYS } from './src/consts/localStorage' import { ALGOLIA_SEARCH_CONFIG } from './src/consts/algoliaSearch' +import { BORDER_SIZES } from './src/consts/border' +import { COLORS } from './src/consts/themes' +import { SPACINGS } from './src/consts/spacings' +import { FONT_WEIGHTS } from './src/consts/fontSizes' +import { LAYERS } from './src/consts/layers' import { FONT_FACE_STYLES } from './src/consts/fontFace' import { styledComponentsStylesToString } from './src/utils/styledComponentStylesToString' import { removeProtocol } from './src/utils/removeProtocol' @@ -19,6 +27,8 @@ import logoLightThemeBlurUrl from './src/assets/images/embla-logo-light-theme-bl import logoDarkThemeBlurUrl from './src/assets/images/embla-logo-dark-theme-blur.svg' import interRomanVar from 'assets/fonts/Inter-roman.var.woff2' +export const wrapRootElement = ReduxProvider + const fontsToPreload: string[] = [interRomanVar] const imagesToPreload: string[] = [ @@ -57,27 +67,28 @@ export const onRenderBody: GatsbySSR['onRenderBody'] = ({ dangerouslySetInnerHTML={{ __html: ` (function() { - var selectedTheme; - var themeColors = { + let selectedTheme; + const themeColors = { light: '${THEME_COLORS[THEME_KEYS.LIGHT].BACKGROUND_SITE}', dark: '${THEME_COLORS[THEME_KEYS.DARK].BACKGROUND_SITE}' }; try { - selectedTheme = localStorage.getItem('${ + const themeStorage = localStorage.getItem('${ LOCALSTORAGE_KEYS.THEME }'); + selectedTheme = (JSON.parse(themeStorage) || {}).currentTheme; } catch (error) { console.error(error); } - var preferredTheme = window.matchMedia('(prefers-color-scheme: dark)').matches && '${ + const preferredTheme = window.matchMedia('(prefers-color-scheme: dark)').matches && '${ THEME_KEYS.DARK }'; - var themeKey = selectedTheme || preferredTheme || '${ + const themeKey = selectedTheme || preferredTheme || '${ THEME_KEYS.LIGHT }'; - var oppositeKey = themeKey === '${THEME_KEYS.LIGHT}' ? '${ + const oppositeKey = themeKey === '${THEME_KEYS.LIGHT}' ? '${ THEME_KEYS.DARK }' : '${THEME_KEYS.LIGHT}'; @@ -154,7 +165,24 @@ export const onRenderBody: GatsbySSR['onRenderBody'] = ({ setPreBodyComponents([ ]) } diff --git a/packages/embla-carousel-docs/package.json b/packages/embla-carousel-docs/package.json index a2382a12a..e234c7d01 100644 --- a/packages/embla-carousel-docs/package.json +++ b/packages/embla-carousel-docs/package.json @@ -38,6 +38,7 @@ "@docsearch/react": "^3.0.0", "@mdx-js/mdx": "^2.2.1", "@mdx-js/react": "^2.2.1", + "@reduxjs/toolkit": "^2.2.5", "babel-plugin-styled-components": "^2.0.2", "codesandbox": "^2.2.3", "embla-carousel": "8.1.5", @@ -64,6 +65,7 @@ "react": "^18.1.0", "react-dom": "^18.1.0", "react-intersection-observer": "^8.33.1", + "react-redux": "^9.1.2", "styled-components": "^5.3.3", "ts-node": "^10.9.1" }, diff --git a/packages/embla-carousel-docs/src/assets/icons/cross.svg b/packages/embla-carousel-docs/src/assets/icons/cross.svg index b8555038b..dc959cb64 100644 --- a/packages/embla-carousel-docs/src/assets/icons/cross.svg +++ b/packages/embla-carousel-docs/src/assets/icons/cross.svg @@ -1 +1,10 @@ - \ No newline at end of file + + + diff --git a/packages/embla-carousel-docs/src/assets/icons/search.svg b/packages/embla-carousel-docs/src/assets/icons/search.svg index 5e2ea127d..79966d87b 100644 --- a/packages/embla-carousel-docs/src/assets/icons/search.svg +++ b/packages/embla-carousel-docs/src/assets/icons/search.svg @@ -1 +1,10 @@ - \ No newline at end of file + + + diff --git a/packages/embla-carousel-docs/src/components/Button/ButtonBare.tsx b/packages/embla-carousel-docs/src/components/Button/ButtonBare.tsx index 1ae5a2c38..e2944ab8d 100644 --- a/packages/embla-carousel-docs/src/components/Button/ButtonBare.tsx +++ b/packages/embla-carousel-docs/src/components/Button/ButtonBare.tsx @@ -2,9 +2,10 @@ import React, { PropsWithRef } from 'react' import styled, { css } from 'styled-components' import { COLORS } from 'consts/themes' import { BORDER_SIZES } from 'consts/border' -import { useKeyNavigating } from 'hooks/useKeyNavigating' import { TAP_HIGHLIGHT_STYLES } from 'consts/tapHighlight' -import { KEY_NAVIGATING_STYLES } from 'consts/keyNavigatingStyles' +import { KEY_NAVIGATING_STYLES } from 'consts/keyEvents' +import { useAppSelector } from 'hooks/useRedux' +import { selectKeyNavigating } from 'components/KeyEvents/keyEventsReducer' export const buttonBareStyles = css<{ $isKeyNavigating: boolean @@ -53,7 +54,7 @@ export const ButtonBare = React.forwardRef(function ButtonBare( ref: React.ForwardedRef ) { const { children, ...restProps } = props - const { isKeyNavigating } = useKeyNavigating() + const isKeyNavigating = useAppSelector(selectKeyNavigating) return ( { - const { hierarchical: routes } = useRoutes() + const hierarchicalRoutes = useAppSelector(selectHierarchalRoutes) return (