From c8e3808642cda2cebb0fdd9951837e03de213882 Mon Sep 17 00:00:00 2001 From: Pablo Pettinari Date: Tue, 30 Jul 2024 13:47:58 +0200 Subject: [PATCH 01/11] move docsearch styles to global css and sort css imports to have the correct specificity --- .eslintrc.json | 55 ++++++++++--------------------------------- src/pages/_app.tsx | 1 + src/styles/global.css | 31 +++++++++++++++++++++++- 3 files changed, 43 insertions(+), 44 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index 4b91e59f469..85d85445f59 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -9,11 +9,7 @@ "env": { "es6": true }, - "plugins": [ - "simple-import-sort", - "@typescript-eslint", - "unused-imports" - ], + "plugins": ["simple-import-sort", "@typescript-eslint", "unused-imports"], "parser": "@typescript-eslint/parser", "rules": { "simple-import-sort/imports": [ @@ -26,55 +22,29 @@ ], // Packages. `react` related packages come first. // Also, put `react-icons` in sorting order not with `react` - [ - "^react(?!-.)$", - "^\\w", - "^@\\w" - ], + ["^react(?!-.)$", "^\\w", "^@\\w"], // The Chakra theme directory if imported to story file or other places - [ - "^@/@chakra-ui" - ], + ["^@/@chakra-ui"], // From the `types` directory. - [ - "^@/lib/types", - "^@/lib/interfaces" - ], + ["^@/lib/types", "^@/lib/interfaces"], // From the `components` directory. - [ - "^@/components" - ], + ["^@/components"], // From the `utils` directory. - [ - "^@/lib/utils" - ], + ["^@/lib/utils"], // From the `data` directory. - [ - "^@/data" - ], + ["^@/data"], // From the `constants` directory. ["^@/lib/constants"], // From the `.storybook/utils` file ["^@/storybook-utils"], // Parent imports. Put `..` last. - [ - "^\\.\\.(?!/?$)", - "^\\.\\./?$" - ], + ["^\\.\\.(?!/?$)", "^\\.\\./?$"], // Other relative imports. Put same-folder imports and `.` last. - [ - "^\\./(?=.*/)(?!/?$)", - "^\\.(?!/?$)", - "^\\./?$" - ], + ["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"], // Style imports. - [ - "^.+\\.s?css$" - ], + ["^.+s?css$"], // Side effect imports. - [ - "^\\u0000" - ] + ["^\\u0000"] ] } ], @@ -89,7 +59,7 @@ ], "unused-imports/no-unused-vars": [ "error", - { + { "args": "all", "argsIgnorePattern": "^_$", "varsIgnorePattern": "^_$" @@ -98,4 +68,3 @@ "unused-imports/no-unused-imports-ts": "warn" } } - diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index d841e48be5d..d994b3e260b 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -6,6 +6,7 @@ import { AppPropsWithLayout } from "@/lib/types" import ThemeProvider from "@/components/ThemeProvider" +import "@docsearch/css" import "@/styles/global.css" import "@/styles/fonts.css" diff --git a/src/styles/global.css b/src/styles/global.css index c221c3b83e9..61ed522720a 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -178,7 +178,7 @@ } a { - @apply text-primary underline underline-offset-3 hover:text-primary-hover focus-visible:rounded-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-hover; + @apply underline-offset-3 text-primary underline hover:text-primary-hover focus-visible:rounded-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-hover; } h1, @@ -251,3 +251,32 @@ } } } + +/** + * Custom styles for the DocSearch component + * https://docsearch.algolia.com/docs/styling + */ +.DocSearch-Button-Container { + @apply hidden lg:flex; +} + +.DocSearch-Button-Container svg { + @apply size-3.5; +} + +.DocSearch-Search-Icon, +.DocSearch-Button-Placeholder { + @apply text-body; +} + +.DocSearch-Button-Placeholder { + @apply font-normal lowercase; +} + +.DocSearch-Button-Keys { + @apply mt-0.5 flex h-full min-w-max items-center gap-1 p-0; +} + +.DocSearch-Button-Key { + @apply m-0 size-5 border border-solid border-disabled bg-none p-0.5 text-sm lowercase text-disabled shadow-none first:pt-1 first:text-md; +} From f8c0d76eddabc12cf04bcece2db47898929fa42b Mon Sep 17 00:00:00 2001 From: Pablo Pettinari Date: Tue, 30 Jul 2024 13:48:39 +0200 Subject: [PATCH 02/11] migrate search button --- src/components/Search/SearchButton.tsx | 27 ++++++++---- src/components/Search/index.tsx | 61 ++++++++------------------ src/components/Search/utils.ts | 1 + 3 files changed, 38 insertions(+), 51 deletions(-) diff --git a/src/components/Search/SearchButton.tsx b/src/components/Search/SearchButton.tsx index 69611abd6b2..3b3d3ed8a62 100644 --- a/src/components/Search/SearchButton.tsx +++ b/src/components/Search/SearchButton.tsx @@ -1,21 +1,32 @@ import * as React from "react" -import { Button, forwardRef } from "@chakra-ui/react" -import { DocSearchButton, DocSearchButtonProps } from "@docsearch/react" +import { useTranslation } from "react-i18next" +import { DocSearchButton } from "@docsearch/react" -import { getSearchButtonStyles } from "./utils" +import { Button, type ButtonProps } from "../../../tailwind/ui/buttons/Button" -const SearchButton = forwardRef( +const SearchButton = React.forwardRef( (props, ref) => { + const { t } = useTranslation("common") + return ( ) } ) +SearchButton.displayName = "SearchButton" + export default SearchButton diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx index 047427bc6d9..ea32af827b9 100644 --- a/src/components/Search/index.tsx +++ b/src/components/Search/index.tsx @@ -1,55 +1,29 @@ -import { useRef } from "react" +import { forwardRef, useRef } from "react" import dynamic from "next/dynamic" import { useRouter } from "next/router" import { useTranslation } from "next-i18next" import { MdSearch } from "react-icons/md" import { - Box, - forwardRef, - IconButtonProps, Portal, - ThemeTypings, type UseDisclosureReturn, useMergeRefs, } from "@chakra-ui/react" import { useDocSearchKeyboardEvents } from "@docsearch/react" import { DocSearchHit } from "@docsearch/react/dist/esm/types" -import { Button } from "@/components/Buttons" - import { trackCustomEvent } from "@/lib/utils/matomo" import { sanitizeHitTitle } from "@/lib/utils/sanitizeHitTitle" import { sanitizeHitUrl } from "@/lib/utils/url" -import SearchButton from "./SearchButton" +import { Button } from "../../../tailwind/ui/buttons/Button" -import "@docsearch/css" +import SearchButton from "./SearchButton" const SearchModal = dynamic(() => import("./SearchModal")) -export const SearchIconButton = forwardRef( - (props, ref) => ( - - ) -) - type Props = Pick -const Search = forwardRef( +const Search = forwardRef( ({ isOpen, onOpen, onClose }, ref) => { const { locale } = useRouter() const searchButtonRef = useRef(null) @@ -68,11 +42,9 @@ const Search = forwardRef( const indexName = process.env.NEXT_PUBLIC_ALGOLIA_BASE_SEARCH_INDEX_NAME || "ethereumorg" - const breakpointToken: ThemeTypings["breakpoints"] = "xl" - return ( <> - +
{ @@ -83,14 +55,14 @@ const Search = forwardRef( eventName: "search open", }) }} - translations={{ - buttonText: t("search"), - buttonAriaLabel: t("search"), - }} /> - - - +
+ +
{isOpen && ( ( } ) +Search.displayName = "Search" + export default Search diff --git a/src/components/Search/utils.ts b/src/components/Search/utils.ts index 70cd1c19a99..3cb15aac468 100644 --- a/src/components/Search/utils.ts +++ b/src/components/Search/utils.ts @@ -29,6 +29,7 @@ export const getSearchButtonStyles = (): ButtonProps => ({ _focus: commonBtnStateStyles, _active: commonBtnStateStyles, sx: { + // TODO: check this "--docsearch-searchbox-shadow": `inset 0 0 0 1px var(--eth-colors-primary-highContrast)`, ".DocSearch-Button-Container svg": { boxSize: 3.5, From da40262644aaeac410f10b6dcceabe593dc9a85f Mon Sep 17 00:00:00 2001 From: Pablo Pettinari Date: Tue, 30 Jul 2024 15:03:05 +0200 Subject: [PATCH 03/11] style docsearch modal --- package.json | 1 + src/components/Search/SearchModal.tsx | 25 ++-- src/components/Search/index.tsx | 11 +- src/pages/_app.tsx | 1 + src/styles/docsearch.css | 162 ++++++++++++++++++++++++++ src/styles/global.css | 29 ----- tailwind.config.ts | 15 +++ yarn.lock | 2 +- 8 files changed, 192 insertions(+), 54 deletions(-) create mode 100644 src/styles/docsearch.css diff --git a/package.json b/package.json index 152c4c47894..b3ce5120da4 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "@radix-ui/react-accordion": "^1.2.0", "@radix-ui/react-navigation-menu": "^1.2.0", "@radix-ui/react-popover": "^1.1.1", + "@radix-ui/react-portal": "^1.1.1", "@radix-ui/react-slot": "^1.1.0", "@radix-ui/react-visually-hidden": "^1.1.0", "@socialgouv/matomo-next": "^1.8.0", diff --git a/src/components/Search/SearchModal.tsx b/src/components/Search/SearchModal.tsx index 5b4923b5913..799a710087c 100644 --- a/src/components/Search/SearchModal.tsx +++ b/src/components/Search/SearchModal.tsx @@ -1,25 +1,16 @@ import * as React from "react" -import { chakra } from "@chakra-ui/react" import { DocSearchModal, DocSearchModalProps } from "@docsearch/react" -import { getSearchModalStyles } from "./utils" - type ModalPropsNoScroll = Omit -const DocSearchModalWithChakra = chakra( - (props: ModalPropsNoScroll & { className?: string }) => { - const { className, ...docModalProps } = props - const windowScrollY = typeof window === "undefined" ? 0 : window.scrollY - return ( -
- -
- ) - } -) - -const SearchModal = (props: ModalPropsNoScroll) => { - return +const SearchModal = (props: ModalPropsNoScroll & { className?: string }) => { + const { className, ...docModalProps } = props + const windowScrollY = typeof window === "undefined" ? 0 : window.scrollY + return ( +
+ +
+ ) } export default SearchModal diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx index ea32af827b9..ff5eb86db82 100644 --- a/src/components/Search/index.tsx +++ b/src/components/Search/index.tsx @@ -3,13 +3,10 @@ import dynamic from "next/dynamic" import { useRouter } from "next/router" import { useTranslation } from "next-i18next" import { MdSearch } from "react-icons/md" -import { - Portal, - type UseDisclosureReturn, - useMergeRefs, -} from "@chakra-ui/react" +import { type UseDisclosureReturn, useMergeRefs } from "@chakra-ui/react" import { useDocSearchKeyboardEvents } from "@docsearch/react" import { DocSearchHit } from "@docsearch/react/dist/esm/types" +import * as Portal from "@radix-ui/react-portal" import { trackCustomEvent } from "@/lib/utils/matomo" import { sanitizeHitTitle } from "@/lib/utils/sanitizeHitTitle" @@ -76,7 +73,7 @@ const Search = forwardRef(
- + {isOpen && ( ( }} /> )} - + ) } diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index d994b3e260b..ac556371e80 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -9,6 +9,7 @@ import ThemeProvider from "@/components/ThemeProvider" import "@docsearch/css" import "@/styles/global.css" import "@/styles/fonts.css" +import "@/styles/docsearch.css" import { BaseLayout } from "@/layouts/BaseLayout" diff --git a/src/styles/docsearch.css b/src/styles/docsearch.css new file mode 100644 index 00000000000..dfce14f0ccb --- /dev/null +++ b/src/styles/docsearch.css @@ -0,0 +1,162 @@ +/** + * Custom styles for the DocSearch Button + * https://docsearch.algolia.com/docs/styling + */ +.DocSearch-Button-Container { + @apply hidden lg:flex; +} + +.DocSearch-Button-Container svg { + @apply size-3.5; +} + +.DocSearch-Search-Icon, +.DocSearch-Button-Placeholder { + @apply text-body; +} + +.DocSearch-Button-Placeholder { + @apply font-normal lowercase; +} + +.DocSearch-Button-Keys { + @apply mt-0.5 flex h-full min-w-max items-center gap-1 p-0; +} + +.DocSearch-Button-Key { + @apply m-0 size-5 border border-solid border-disabled bg-none p-0.5 text-sm lowercase text-disabled shadow-none first:pt-1 first:text-md; +} + +/** + * Custom styles for the DocSearch Modal + */ + +:root { + --docsearch-modal-background: theme(backgroundColor.background.DEFAULT); + --docsearch-searchbox-height: fit-content; + --docsearch-highlight-color: theme(colors.primary.hover); + --docsearch-modal-width: 650px; + --docsearch-hit-height: fit-content; +} +html[data-theme="dark"] { + --docsearch-modal-background: theme(backgroundColor.background.DEFAULT); + --docsearch-highlight-color: theme(colors.primary.hover); +} + +/* .DocSearch-Modal { + @apply bg-background; +} */ + +.DocSearch.DocSearch-Container { + @apply fixed inset-0; +} + +.DocSearch-SearchBar { + @apply p-4 pb-4 md:p-8; +} +.DocSearch-SearchBar form { + --docsearch-searchbox-shadow: inset 0 0 0 1px + theme(colors.primary.high-contrast); + @apply bg-neutral py-3; +} +.DocSearch-SearchBar label, +.DocSearch-SearchBar input { + @apply text-primary-high-contrast; +} +.DocSearch-SearchBar label { + @apply h-4 w-4; +} +.DocSearch-SearchBar input { + @apply p-0 ps-2 text-md md:text-xl; +} + +.DocSearch-Cancel { + @apply text-primary hover:text-primary md:text-primary-high-contrast; +} + +.DocSearch-Container.DocSearch[aria-expanded="true"] { + @apply z-modal; +} + +.DocSearch-Container--Stalled .DocSearch-MagnifierLabel, +.DocSearch-Container--Stalled .DocSearch-LoadingIndicator { + @apply text-primary-high-contrast; +} + +.DocSearch-Dropdown { + @apply max-h-[calc(100vh-75px-var(--docsearch-footer-height)-2*var(--inset))] overflow-y-scroll pe-2 ps-4 md:max-h-[calc(100vh-16rem)] md:overflow-y-auto md:pe-4 md:ps-8; +} + +.DocSearch-Hit-source { + @apply pb-0.5 leading-6 text-body; +} + +.DocSearch-Hit { + @apply pb-0; +} +.DocSearch-Hit a { + --docsearch-hit-shadow: none; + @apply rounded-none border-b border-solid border-disabled bg-transparent py-3; +} +.DocSearch-Hit[aria-selected="true"] a { + --docsearch-hit-active-color: theme(backgroundColor.background.DEFAULT); + @apply border-transparent bg-primary-hover shadow-[4px_4px_0_0_var(--primary-light)]; +} + +.DocSearch-Hit-content-wrapper { + @apply whitespace-normal; +} + +.DocSearch-Hit-icon { + @apply text-body; +} + +.DocSearch-Hit-Select-Icon:focus, +.DocSearch-Hit-Select-Icon:hover { + @apply text-switch-background; +} + +.DocSearch-Footer { + --docsearch-footer-height: theme(spacing.10); + --docsearch-logo-color: theme(textColor.body.light); + --docsearch-footer-shadow: none; + @apply border-t-2 border-primary bg-primary-low-contrast; +} + +.DocSearch-Commands { + @apply gap-4; +} +.DocSearch-Commands li { + @apply !m-0; +} + +.DocSearch-Label { + @apply lowercase text-body; +} + +.DocSearch-Commands-Key { + @apply me-1.5 grid h-4 w-4 place-items-center rounded border border-solid border-primary bg-background bg-none p-0 text-primary shadow-none; +} + +.DocSearch-Commands-Key svg { + @apply bg-transparent; +} + +.DocSearch-Logo .DocSearch-Label { + @apply uppercase text-body-medium; +} + +svg[aria-label="Algolia"] { + @apply ml-0 ms-2; +} + +svg[aria-label="Algolia"] * { + @apply fill-body-medium; +} + +@media (max-width: 768px) { + .DocSearch-Modal { + --inset: theme(space.4); + @apply fixed inset-[var(--inset)] max-h-[calc(100vh-2*var(--inset))] max-w-[calc(100vw-2*var(--inset))] overflow-hidden rounded; + } +} diff --git a/src/styles/global.css b/src/styles/global.css index 61ed522720a..f194938350e 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -251,32 +251,3 @@ } } } - -/** - * Custom styles for the DocSearch component - * https://docsearch.algolia.com/docs/styling - */ -.DocSearch-Button-Container { - @apply hidden lg:flex; -} - -.DocSearch-Button-Container svg { - @apply size-3.5; -} - -.DocSearch-Search-Icon, -.DocSearch-Button-Placeholder { - @apply text-body; -} - -.DocSearch-Button-Placeholder { - @apply font-normal lowercase; -} - -.DocSearch-Button-Keys { - @apply mt-0.5 flex h-full min-w-max items-center gap-1 p-0; -} - -.DocSearch-Button-Key { - @apply m-0 size-5 border border-solid border-disabled bg-none p-0.5 text-sm lowercase text-disabled shadow-none first:pt-1 first:text-md; -} diff --git a/tailwind.config.ts b/tailwind.config.ts index b1ebe4aef13..435580c5924 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -44,6 +44,21 @@ const config = { sm: "1.5", base: "1.6", }, + zIndex: { + hide: "-1", + auto: "auto", + base: "0", + docked: "10", + dropdown: "1000", + sticky: "1100", + banner: "1200", + overlay: "1300", + modal: "1400", + popover: "1500", + skipLink: "1600", + toast: "1700", + tooltip: "1800", + }, colors: { primary: { DEFAULT: "var(--primary)", diff --git a/yarn.lock b/yarn.lock index 7f37c99eb51..949501bb8ad 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3997,7 +3997,7 @@ "@babel/runtime" "^7.13.10" "@radix-ui/react-primitive" "1.0.3" -"@radix-ui/react-portal@1.1.1": +"@radix-ui/react-portal@1.1.1", "@radix-ui/react-portal@^1.1.1": version "1.1.1" resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.1.1.tgz#1957f1eb2e1aedfb4a5475bd6867d67b50b1d15f" integrity sha512-A3UtLk85UtqhzFqtoC8Q0KvR2GbXF3mtPgACSazajqq6A41mEQgo53iPzY4i6BwDxlIFqWIhiQ2G729n+2aw/g== From e554d29c0cfaa5f8a9a79b8d2cc44725bf0bf586 Mon Sep 17 00:00:00 2001 From: Pablo Pettinari Date: Tue, 30 Jul 2024 15:03:34 +0200 Subject: [PATCH 04/11] delete unnecessary file --- src/components/Search/utils.ts | 231 --------------------------------- 1 file changed, 231 deletions(-) delete mode 100644 src/components/Search/utils.ts diff --git a/src/components/Search/utils.ts b/src/components/Search/utils.ts deleted file mode 100644 index 3cb15aac468..00000000000 --- a/src/components/Search/utils.ts +++ /dev/null @@ -1,231 +0,0 @@ -import { ButtonProps, SystemStyleObject } from "@chakra-ui/react" - -const commonBtnStateStyles: SystemStyleObject = { - boxShadow: "none", - bg: "none", - outline: "1px solid", - outlineColor: "primary.hover", - outlineOffset: "-2px", -} - -export const getSearchButtonStyles = (): ButtonProps => ({ - alignItems: "center", - borderRadius: "base", - border: "1px", - borderColor: "disabled", - height: "42px", - bg: "none", - gap: 4, - m: 0, - me: 3, - px: 3, - _hover: { - ...commonBtnStateStyles, - ".DocSearch-Button-Keys kbd": { - color: "disabled", - borderColor: "disabled", - }, - }, - _focus: commonBtnStateStyles, - _active: commonBtnStateStyles, - sx: { - // TODO: check this - "--docsearch-searchbox-shadow": `inset 0 0 0 1px var(--eth-colors-primary-highContrast)`, - ".DocSearch-Button-Container svg": { - boxSize: 3.5, - }, - ".DocSearch-Search-Icon, .DocSearch-Button-Placeholder": { - color: "body.base", - }, - ".DocSearch-Button-Placeholder": { - fontWeight: "normal", - textTransform: "lowercase", - }, - ".DocSearch-Button-Keys": { - alignItems: "center", - display: "flex", - gap: 1, - height: "full", - mt: 0.5, - minW: "44px", - p: 0, - kbd: { - bg: "none", - border: "1px", - borderColor: "disabled", - boxSize: 5, - boxShadow: "none", - color: "disabled", - fontSize: "sm", - m: 0, - p: 0.5, - textTransform: "lowercase", - _first: { - fontSize: "md", - pt: 1, - }, - }, - }, - }, -}) - -export const getSearchModalStyles = (): SystemStyleObject => ({ - "--docsearch-modal-background": "var(--eth-colors-background-base)", - "--docsearch-searchbox-height": "fit-content", - "--docsearch-highlight-color": "var(--eth-colors-primary-hover)", - "--docsearch-modal-width": "650px", - "--docsearch-hit-height": "fit-content", - - ".DocSearch.DocSearch-Container": { - position: "fixed", - inset: 0, - }, - - ".DocSearch-SearchBar": { - p: { base: 4, md: 8 }, - pb: 4, - form: { - "--docsearch-searchbox-shadow": `inset 0 0 0 1px var(--eth-colors-primary-highContrast)`, - bg: "neutral", - py: 3, - }, - "label, input": { - color: "primary.highContrast", - }, - - label: { - boxSize: 4, - }, - input: { - fontSize: { base: "md", md: "xl" }, - p: 0, - ps: 2, - }, - }, - - ".DocSearch-Cancel": { - color: { base: "primary.base", md: "primary.highContrast" }, - _hover: { - color: "primary.base", - }, - }, - - ".DocSearch-Container.DocSearch[aria-expanded='true']": { - zIndex: "modal", - }, - - ".DocSearch-Container--Stalled .DocSearch-MagnifierLabel, .DocSearch-Container--Stalled .DocSearch-LoadingIndicator": - { - color: "primary.highContrast", - }, - - ".DocSearch-Dropdown": { - ps: { base: 4, md: 8 }, - pe: { base: 2, md: 4 }, - maxH: { - base: "calc(100vh - 75px - var(--docsearch-footer-height) - 2 * var(--inset))", - md: "calc(100vh - 16rem)", - }, - overflowY: { base: "scroll", md: "auto" }, - }, - - ".DocSearch-Hit-source": { - color: "body.base", - lineHeight: 6, - pb: 0.5, - }, - - ".DocSearch-Hit": { - pb: 0, - a: { - "--docsearch-hit-shadow": "none", - borderRadius: 0, - borderBottom: "1px", - borderColor: "disabled", - bg: "none", - py: 3, - }, - '&[aria-selected="true"] a': { - "--docsearch-hit-active-color": "colors.background.base", - bg: "primary.hover", - boxShadow: `4px 4px 0 0 var(--eth-colors-primary-light)`, - borderColor: "transparent", - }, - }, - - ".DocSearch-Hit-content-wrapper": { - whiteSpace: "normal", - }, - - ".DocSearch-Hit-icon": { - color: "body.base", - }, - - ".DocSearch-Hit-Select-Icon:focus, .DocSearch-Hit-Select-Icon:hover": { - color: "switchBackground", // TODO: Remove? Causing low contrast in dark mode - }, - - ".DocSearch-Footer": { - "--docsearch-footer-height": "space.10", - "--docsearch-logo-color": "colors.body.light", - "--docsearch-footer-shadow": "none", - bg: "primary.lowContrast", - borderTop: "2px", - borderColor: "primary.base", - }, - - ".DocSearch-Commands": { - gap: 4, - li: { - margin: 0, - }, - }, - - ".DocSearch-Label": { - color: "body.base", - textTransform: "lowercase", - }, - - ".DocSearch-Commands-Key": { - bg: "background.base", - border: "1px", - borderColor: "primary.base", - color: "primary.base", - boxShadow: "none", - boxSize: 4, - padding: 0, - display: "grid", - placeItems: "center", - borderRadius: "base", - mr: "unset", - me: 1.5, - }, - - ".DocSearch-Logo": { - ".DocSearch-Label": { - color: "body.medium", - textTransform: "uppercase", - }, - }, - - "svg[aria-label='Algolia']": { - ml: "unset", - ms: 2, - }, - - "svg[aria-label='Algolia'] *": { - fill: "body.medium", - }, - - "@media (max-width: 768px)": { - ".DocSearch-Modal": { - "--inset": "space.4", - borderRadius: "base", - inset: "var(--inset)", - maxWidth: "calc(100vw - 2 * var(--inset))", - maxHeight: "calc(100vh - 2 * var(--inset))", - overflow: "hidden", - position: "fixed", - }, - }, -}) From f19ae2677158871a4f8d735267e8c411c809642f Mon Sep 17 00:00:00 2001 From: Pablo Pettinari Date: Tue, 30 Jul 2024 15:17:57 +0200 Subject: [PATCH 05/11] remove chakra deps --- package.json | 1 + src/components/Nav/index.tsx | 3 ++- src/components/Search/index.tsx | 8 +++++--- yarn.lock | 5 +++++ 4 files changed, 13 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index b3ce5120da4..c822c9d81f8 100644 --- a/package.json +++ b/package.json @@ -70,6 +70,7 @@ "react-i18next": "^13.3.1", "react-icons": "^4.10.1", "react-lite-youtube-embed": "^2.4.0", + "react-merge-refs": "^2.1.1", "react-select": "5.8.0", "reading-time": "^1.5.0", "remark-gfm": "^3.0.1", diff --git a/src/components/Nav/index.tsx b/src/components/Nav/index.tsx index 60057e10703..ba119e4a3df 100644 --- a/src/components/Nav/index.tsx +++ b/src/components/Nav/index.tsx @@ -1,6 +1,6 @@ import { lazy, Suspense, useRef } from "react" import { useTranslation } from "next-i18next" -import { Box, Flex, Hide, Show, useDisclosure } from "@chakra-ui/react" +import { Box, Flex, Hide, Show } from "@chakra-ui/react" import { EthHomeIcon } from "@/components/icons" import { BaseLink } from "@/components/Link" @@ -14,6 +14,7 @@ import DesktopNavMenu from "./Desktop" import Menu from "./Menu" import { useNav } from "./useNav" +import useDisclosure from "@/hooks/useDisclosure" import { useIsClient } from "@/hooks/useIsClient" const MobileNavMenu = lazy(() => import("./Mobile")) diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx index ff5eb86db82..9421733af3e 100644 --- a/src/components/Search/index.tsx +++ b/src/components/Search/index.tsx @@ -3,7 +3,7 @@ import dynamic from "next/dynamic" import { useRouter } from "next/router" import { useTranslation } from "next-i18next" import { MdSearch } from "react-icons/md" -import { type UseDisclosureReturn, useMergeRefs } from "@chakra-ui/react" +import { mergeRefs } from "react-merge-refs" import { useDocSearchKeyboardEvents } from "@docsearch/react" import { DocSearchHit } from "@docsearch/react/dist/esm/types" import * as Portal from "@radix-ui/react-portal" @@ -16,15 +16,17 @@ import { Button } from "../../../tailwind/ui/buttons/Button" import SearchButton from "./SearchButton" +import type useDisclosure from "@/hooks/useDisclosure" + const SearchModal = dynamic(() => import("./SearchModal")) -type Props = Pick +type Props = ReturnType const Search = forwardRef( ({ isOpen, onOpen, onClose }, ref) => { const { locale } = useRouter() const searchButtonRef = useRef(null) - const mergedButtonRefs = useMergeRefs(ref, searchButtonRef) + const mergedButtonRefs = mergeRefs([ref, searchButtonRef]) const { t } = useTranslation("common") useDocSearchKeyboardEvents({ diff --git a/yarn.lock b/yarn.lock index 949501bb8ad..dccb74db7e9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -12446,6 +12446,11 @@ react-lite-youtube-embed@^2.4.0: resolved "https://registry.yarnpkg.com/react-lite-youtube-embed/-/react-lite-youtube-embed-2.4.0.tgz#1f56a12be1061d50431444d52d836bd09a1283a2" integrity sha512-Xo6cM1zPlROvvM97JkqQIoXstlQDaC4+DawmM7BB7Hh1cXrkBHEGq1iJlQxBTUWAUklmpcC7ph7qg7CztXtABQ== +react-merge-refs@^2.1.1: + version "2.1.1" + resolved "https://registry.yarnpkg.com/react-merge-refs/-/react-merge-refs-2.1.1.tgz#e46763f8f1b881c0226ee54a1a2a10ffefba0233" + integrity sha512-jLQXJ/URln51zskhgppGJ2ub7b2WFKGq3cl3NYKtlHoTG+dN2q7EzWrn3hN3EgPsTMvpR9tpq5ijdp7YwFZkag== + react-refresh@^0.14.0: version "0.14.2" resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.2.tgz#3833da01ce32da470f1f936b9d477da5c7028bf9" From 55c1112136623aae9e8b3ef9b45f7dc831f93291 Mon Sep 17 00:00:00 2001 From: Pablo Pettinari Date: Thu, 8 Aug 2024 18:05:52 +0200 Subject: [PATCH 06/11] fix imports --- src/components/Nav/index.tsx | 2 +- src/components/Search/index.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Nav/index.tsx b/src/components/Nav/index.tsx index 8ab7e753290..da8f00c4202 100644 --- a/src/components/Nav/index.tsx +++ b/src/components/Nav/index.tsx @@ -14,7 +14,7 @@ import DesktopNavMenu from "./Desktop" import Menu from "./Menu" import { useNav } from "./useNav" -import useDisclosure from "@/hooks/useDisclosure" +import { useDisclosure } from "@/hooks/useDisclosure" import { useIsClient } from "@/hooks/useIsClient" const MobileNavMenu = lazy(() => import("./Mobile")) diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx index 9421733af3e..3bd91beac87 100644 --- a/src/components/Search/index.tsx +++ b/src/components/Search/index.tsx @@ -16,7 +16,7 @@ import { Button } from "../../../tailwind/ui/buttons/Button" import SearchButton from "./SearchButton" -import type useDisclosure from "@/hooks/useDisclosure" +import { type useDisclosure } from "@/hooks/useDisclosure" const SearchModal = dynamic(() => import("./SearchModal")) From 78a95027cf33c41c9ab6ac35df8950310ef6d634 Mon Sep 17 00:00:00 2001 From: Pablo Pettinari Date: Mon, 12 Aug 2024 12:42:14 +0200 Subject: [PATCH 07/11] use radix utility function to merge refs --- package.json | 2 +- src/components/Search/index.tsx | 4 ++-- yarn.lock | 7 +------ 3 files changed, 4 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index cb147505381..40dab68ee1e 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "@next/bundle-analyzer": "^14.2.5", "@radix-ui/react-accordion": "^1.2.0", "@radix-ui/react-checkbox": "^1.1.1", + "@radix-ui/react-compose-refs": "^1.1.0", "@radix-ui/react-dialog": "^1.1.1", "@radix-ui/react-navigation-menu": "^1.2.0", "@radix-ui/react-popover": "^1.1.1", @@ -75,7 +76,6 @@ "react-i18next": "^13.3.1", "react-icons": "^4.10.1", "react-lite-youtube-embed": "^2.4.0", - "react-merge-refs": "^2.1.1", "react-select": "5.8.0", "reading-time": "^1.5.0", "remark-gfm": "^3.0.1", diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx index 3bd91beac87..f9a35acbfaa 100644 --- a/src/components/Search/index.tsx +++ b/src/components/Search/index.tsx @@ -3,9 +3,9 @@ import dynamic from "next/dynamic" import { useRouter } from "next/router" import { useTranslation } from "next-i18next" import { MdSearch } from "react-icons/md" -import { mergeRefs } from "react-merge-refs" import { useDocSearchKeyboardEvents } from "@docsearch/react" import { DocSearchHit } from "@docsearch/react/dist/esm/types" +import { useComposedRefs } from "@radix-ui/react-compose-refs" import * as Portal from "@radix-ui/react-portal" import { trackCustomEvent } from "@/lib/utils/matomo" @@ -26,7 +26,7 @@ const Search = forwardRef( ({ isOpen, onOpen, onClose }, ref) => { const { locale } = useRouter() const searchButtonRef = useRef(null) - const mergedButtonRefs = mergeRefs([ref, searchButtonRef]) + const mergedButtonRefs = useComposedRefs(ref, searchButtonRef) const { t } = useTranslation("common") useDocSearchKeyboardEvents({ diff --git a/yarn.lock b/yarn.lock index 131392e2903..4a0ce900f60 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4394,7 +4394,7 @@ "@babel/runtime" "^7.13.10" "@radix-ui/react-primitive" "1.0.3" -"@radix-ui/react-portal@1.1.1", "@radix-ui/react-portal@^1.1.1": +"@radix-ui/react-portal@1.1.1": version "1.1.1" resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.1.1.tgz#1957f1eb2e1aedfb4a5475bd6867d67b50b1d15f" integrity sha512-A3UtLk85UtqhzFqtoC8Q0KvR2GbXF3mtPgACSazajqq6A41mEQgo53iPzY4i6BwDxlIFqWIhiQ2G729n+2aw/g== @@ -13453,11 +13453,6 @@ react-lite-youtube-embed@^2.4.0: resolved "https://registry.yarnpkg.com/react-lite-youtube-embed/-/react-lite-youtube-embed-2.4.0.tgz#1f56a12be1061d50431444d52d836bd09a1283a2" integrity sha512-Xo6cM1zPlROvvM97JkqQIoXstlQDaC4+DawmM7BB7Hh1cXrkBHEGq1iJlQxBTUWAUklmpcC7ph7qg7CztXtABQ== -react-merge-refs@^2.1.1: - version "2.1.1" - resolved "https://registry.yarnpkg.com/react-merge-refs/-/react-merge-refs-2.1.1.tgz#e46763f8f1b881c0226ee54a1a2a10ffefba0233" - integrity sha512-jLQXJ/URln51zskhgppGJ2ub7b2WFKGq3cl3NYKtlHoTG+dN2q7EzWrn3hN3EgPsTMvpR9tpq5ijdp7YwFZkag== - react-refresh@^0.14.0: version "0.14.2" resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.2.tgz#3833da01ce32da470f1f936b9d477da5c7028bf9" From 1f0fc2e2692f84977cac4838c42670a789556693 Mon Sep 17 00:00:00 2001 From: Pablo Pettinari Date: Mon, 12 Aug 2024 12:43:20 +0200 Subject: [PATCH 08/11] regenerate yarn.lock file --- yarn.lock | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/yarn.lock b/yarn.lock index 4a0ce900f60..db519a90276 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4197,7 +4197,7 @@ dependencies: "@babel/runtime" "^7.13.10" -"@radix-ui/react-compose-refs@1.1.0": +"@radix-ui/react-compose-refs@1.1.0", "@radix-ui/react-compose-refs@^1.1.0": version "1.1.0" resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz#656432461fc8283d7b591dcf0d79152fae9ecc74" integrity sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw== @@ -4394,7 +4394,7 @@ "@babel/runtime" "^7.13.10" "@radix-ui/react-primitive" "1.0.3" -"@radix-ui/react-portal@1.1.1": +"@radix-ui/react-portal@1.1.1", "@radix-ui/react-portal@^1.1.1": version "1.1.1" resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.1.1.tgz#1957f1eb2e1aedfb4a5475bd6867d67b50b1d15f" integrity sha512-A3UtLk85UtqhzFqtoC8Q0KvR2GbXF3mtPgACSazajqq6A41mEQgo53iPzY4i6BwDxlIFqWIhiQ2G729n+2aw/g== From 9840eaa391785358de15b1a10e49a48ec8636c2a Mon Sep 17 00:00:00 2001 From: Pablo Pettinari Date: Tue, 13 Aug 2024 19:01:16 +0200 Subject: [PATCH 09/11] regen yarn lock file --- yarn.lock | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/yarn.lock b/yarn.lock index e7ea98cda53..bb7cb1db154 100644 --- a/yarn.lock +++ b/yarn.lock @@ -13068,7 +13068,7 @@ prelude-ls@^1.2.1: resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396" integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g== -"prettier-fallback@npm:prettier@^3": +"prettier-fallback@npm:prettier@^3", prettier@^3.1.1: version "3.3.2" resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.3.2.tgz#03ff86dc7c835f2d2559ee76876a3914cec4a90a" integrity sha512-rAVeHYMcv8ATV5d508CFdn+8/pHPpXeIid1DdrPwXnaAdH7cqjVbpJaT5eq4yRAFU/lsbwYwSF/n5iNrdJHPQA== @@ -13083,11 +13083,6 @@ prettier@^2.0.5, prettier@^2.8.8: resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da" integrity sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q== -prettier@^3.1.1: - version "3.3.2" - resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.3.2.tgz#03ff86dc7c835f2d2559ee76876a3914cec4a90a" - integrity sha512-rAVeHYMcv8ATV5d508CFdn+8/pHPpXeIid1DdrPwXnaAdH7cqjVbpJaT5eq4yRAFU/lsbwYwSF/n5iNrdJHPQA== - prettier@^3.3.3: version "3.3.3" resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.3.3.tgz#30c54fe0be0d8d12e6ae61dbb10109ea00d53105" From a76c735da708c70a6e07e60d9588ab71101d0821 Mon Sep 17 00:00:00 2001 From: Pablo Pettinari Date: Tue, 13 Aug 2024 19:04:48 +0200 Subject: [PATCH 10/11] fix imports --- src/components/Search/SearchButton.tsx | 2 +- src/components/Search/index.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Search/SearchButton.tsx b/src/components/Search/SearchButton.tsx index 3b3d3ed8a62..e8e9d1e79c1 100644 --- a/src/components/Search/SearchButton.tsx +++ b/src/components/Search/SearchButton.tsx @@ -2,7 +2,7 @@ import * as React from "react" import { useTranslation } from "react-i18next" import { DocSearchButton } from "@docsearch/react" -import { Button, type ButtonProps } from "../../../tailwind/ui/buttons/Button" +import { Button, type ButtonProps } from "../ui/buttons/Button" const SearchButton = React.forwardRef( (props, ref) => { diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx index 35c6eb0e3e1..1ff7b8e88b3 100644 --- a/src/components/Search/index.tsx +++ b/src/components/Search/index.tsx @@ -12,7 +12,7 @@ import { trackCustomEvent } from "@/lib/utils/matomo" import { sanitizeHitTitle } from "@/lib/utils/sanitizeHitTitle" import { sanitizeHitUrl } from "@/lib/utils/url" -import { Button } from "../../../tailwind/ui/buttons/Button" +import { Button } from "../ui/buttons/Button" import SearchButton from "./SearchButton" From 6c3a2f9417dd4c11c97c112c9c2cbc59d665e563 Mon Sep 17 00:00:00 2001 From: Pablo Pettinari Date: Tue, 13 Aug 2024 21:13:38 +0200 Subject: [PATCH 11/11] add docsearch styles to sb --- .storybook/preview.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index f2c05dd88d8..35b8b477d9e 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -7,8 +7,10 @@ import ThemeProvider from "@/components/ThemeProvider" import i18n, { baseLocales } from "./i18next" +import "@docsearch/css" import "../src/styles/global.css" import "../src/styles/fonts.css" +import "../src/styles/docsearch.css" MotionGlobalConfig.skipAnimations = isChromatic()