From 90b4b39663cc4b9a5ad169d8889f8936e9d4d1dc Mon Sep 17 00:00:00 2001 From: Pablo Pettinari Date: Mon, 30 Sep 2024 14:52:46 +0200 Subject: [PATCH 1/6] migrate base toc elements --- src/components/TableOfContents/ItemsList.tsx | 12 ++--- src/components/TableOfContents/index.tsx | 49 ++++---------------- 2 files changed, 15 insertions(+), 46 deletions(-) diff --git a/src/components/TableOfContents/ItemsList.tsx b/src/components/TableOfContents/ItemsList.tsx index 6368a9c3e5e..0bab7a8791a 100644 --- a/src/components/TableOfContents/ItemsList.tsx +++ b/src/components/TableOfContents/ItemsList.tsx @@ -1,10 +1,8 @@ -import { ChakraProps, List, ListItem } from "@chakra-ui/react" - import type { ToCItem } from "@/lib/types" import ToCLink from "@/components/TableOfContents/TableOfContentsLink" -export type ItemsListProps = ChakraProps & { +export type ItemsListProps = { items: Array depth: number maxDepth: number @@ -25,19 +23,19 @@ const ItemsList = ({ {items.map((item, index) => { const { title, items } = item return ( - +
  • {items && ( - +
      - +
    )} - +
    • ) })} diff --git a/src/components/TableOfContents/index.tsx b/src/components/TableOfContents/index.tsx index de3eced42e0..2cb6645a472 100644 --- a/src/components/TableOfContents/index.tsx +++ b/src/components/TableOfContents/index.tsx @@ -1,26 +1,16 @@ import { useTranslation } from "next-i18next" import { FaGithub } from "react-icons/fa" -import { - Box, - BoxProps, - calc, - Flex, - Icon, - List, - useToken, -} from "@chakra-ui/react" import type { ToCItem } from "@/lib/types" -import { ButtonLink } from "@/components/Buttons" import ItemsList from "@/components/TableOfContents/ItemsList" import Mobile from "@/components/TableOfContents/TableOfContentsMobile" -import { outerListProps } from "@/lib/utils/toc" +import { ButtonLink } from "../ui/buttons/Button" import { useActiveHash } from "@/hooks/useActiveHash" -export type TableOfContentsProps = BoxProps & { +export type TableOfContentsProps = { items: Array maxDepth?: number editPath?: string @@ -37,8 +27,6 @@ const TableOfContents = ({ ...rest }: TableOfContentsProps) => { const { t } = useTranslation("common") - // TODO: Replace with direct token implementation after UI migration is completed - const lgBp = useToken("breakpoints", "lg") const titleIds: Array = [] @@ -65,43 +53,26 @@ const TableOfContents = ({ } return ( - {!hideEditButton && editPath && ( - } - href={editPath} - variant="outline" - > + + {t("edit-page")} )} - - {t("on-this-page")} - - +
    {t("on-this-page")}
    +
      - - +
    + ) } From b803d1ed4cd2b7448ab4afebb737556a92a9100e Mon Sep 17 00:00:00 2001 From: Pablo Pettinari Date: Mon, 30 Sep 2024 15:16:53 +0200 Subject: [PATCH 2/6] migrate toc link --- .../TableOfContents/TableOfContentsLink.tsx | 62 ++++--------------- 1 file changed, 13 insertions(+), 49 deletions(-) diff --git a/src/components/TableOfContents/TableOfContentsLink.tsx b/src/components/TableOfContents/TableOfContentsLink.tsx index 8568e64ba7e..0c4214f43b9 100644 --- a/src/components/TableOfContents/TableOfContentsLink.tsx +++ b/src/components/TableOfContents/TableOfContentsLink.tsx @@ -1,8 +1,8 @@ -import { cssVar, SystemStyleObject } from "@chakra-ui/react" - import type { ToCItem } from "@/lib/types" -import { BaseLink } from "@/components/Link" +import { cn } from "@/lib/utils/cn" + +import { BaseLink } from "../ui/Link" export type TableOfContentsLinkProps = { depth: number @@ -16,57 +16,21 @@ const Link = ({ activeHash, }: TableOfContentsLinkProps) => { const isActive = activeHash === url - const isNested = depth === 2 - - const classList: Array = [] - isActive && classList.push("active") - isNested && classList.push("nested") - const classes = classList.join(" ") - - const $dotBg = cssVar("dot-bg") - - const hoverOrActiveStyle: SystemStyleObject = { - color: $dotBg.reference, - _after: { - content: `""`, - backgroundColor: "background.base", - border: "1px", - borderColor: $dotBg.reference, - borderRadius: "50%", - boxSize: 2, - position: "absolute", - // 16px is the initial list padding - // 8px is the padding for each nested list - // 4px is half of the width of the dot - // 1px for the border - "inset-inline-start": `calc(-16px - 8px * ${depth} - 4px - 1px)`, - top: "50%", - mt: -1, - }, - } return ( +
    {title} ) From d9eb037dd5f1ca1056a1e6b990cba67fbc16212c Mon Sep 17 00:00:00 2001 From: Pablo Pettinari Date: Wed, 2 Oct 2024 11:37:34 +0200 Subject: [PATCH 3/6] migrate mobile toc --- .../TableOfContents/ItemsListMobile.tsx | 59 +++++++++++++ .../TableOfContents/TableOfContentsMobile.tsx | 88 +++++++------------ src/lib/utils/toc.ts | 28 ------ 3 files changed, 91 insertions(+), 84 deletions(-) create mode 100644 src/components/TableOfContents/ItemsListMobile.tsx diff --git a/src/components/TableOfContents/ItemsListMobile.tsx b/src/components/TableOfContents/ItemsListMobile.tsx new file mode 100644 index 00000000000..8d41fe00d3c --- /dev/null +++ b/src/components/TableOfContents/ItemsListMobile.tsx @@ -0,0 +1,59 @@ +import { Fragment } from "react" + +import type { ToCItem } from "@/lib/types" + +import { cn } from "@/lib/utils/cn" + +import { DropdownMenuItem } from "../ui/dropdown-menu" +import { BaseLink } from "../ui/Link" + +export type ItemsListProps = { + items: Array + depth: number + maxDepth: number + activeHash?: string + className?: string +} + +const ItemsListMobile = ({ + items, + depth, + maxDepth, + activeHash, + ...rest +}: ItemsListProps) => { + if (depth > maxDepth) return null + + return ( + <> + {items.map((item, index) => { + const { items, title, url } = item + return ( + + + + {title} + + + {items && ( + 1 && "ps-8")} + items={items} + depth={depth + 1} + maxDepth={maxDepth} + activeHash={activeHash} + /> + )} + + ) + })} + + ) +} + +ItemsListMobile.displayName = "TocItemsListMobile" + +export default ItemsListMobile diff --git a/src/components/TableOfContents/TableOfContentsMobile.tsx b/src/components/TableOfContents/TableOfContentsMobile.tsx index e948c596099..9a390335ade 100644 --- a/src/components/TableOfContents/TableOfContentsMobile.tsx +++ b/src/components/TableOfContents/TableOfContentsMobile.tsx @@ -1,22 +1,17 @@ import React from "react" import { useTranslation } from "next-i18next" import { MdExpandMore } from "react-icons/md" -import { - Box, - chakra, - Fade, - Flex, - Icon, - List, - useDisclosure, - useToken, -} from "@chakra-ui/react" import type { ToCItem } from "@/lib/types" -import { outerListProps } from "@/lib/utils/toc" +import { Button } from "../ui/buttons/Button" +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuTrigger, +} from "../ui/dropdown-menu" -import ItemsList from "./ItemsList" +import ItemsListMobile from "./ItemsListMobile" export type TableOfContentsMobileProps = { items?: Array @@ -25,58 +20,39 @@ export type TableOfContentsMobileProps = { const Mobile = ({ items, maxDepth }: TableOfContentsMobileProps) => { const { t } = useTranslation("common") - // TODO: Replace with direct token implementation after UI migration is completed - const lgBp = useToken("breakpoints", "lg") - const { getButtonProps, getDisclosureProps, isOpen } = useDisclosure({ - defaultIsOpen: false, - }) if (!items) { return null } return ( - - + + + + { + e.preventDefault() + }} > - - {t("on-this-page")} - - - - - - - - - + + ) } diff --git a/src/lib/utils/toc.ts b/src/lib/utils/toc.ts index 81cd59b8e97..41484a0000e 100644 --- a/src/lib/utils/toc.ts +++ b/src/lib/utils/toc.ts @@ -1,5 +1,3 @@ -import { ListProps } from "@chakra-ui/react" - import type { ToCItem, TocNodeType } from "@/lib/types" // RegEx patterns @@ -26,32 +24,6 @@ export const parseHeadingId = (heading: string): string => { return match ? match[2].toLowerCase() : slugify(heading) } -/** - * Common props used used for the outermost list element in the mobile and desktop renders - */ -export const outerListProps: ListProps = { - borderStart: "1px solid", - borderStartColor: "body.medium", - borderTop: 0, - fontSize: "sm", - spacing: "2", - m: 0, - mt: 2, - mb: 2, - ps: 4, - pt: 0, - sx: { - // TODO: Flip to object syntax with `lg` token after completion of Chakra migration - "@media (max-width: var(--eth-breakpoints-lg))": { - borderStart: 0, - borderTop: "1px", - borderTopColor: "primary300", - ps: 0, - pt: 4, - }, - }, -} - /** * Removes any custom ID and Emoji components from a heading string * @param title Heading string, not yet trimmed From c5dabb08abf339c5ef1d7793490a2a242a6c5bc7 Mon Sep 17 00:00:00 2001 From: Pablo Pettinari Date: Wed, 2 Oct 2024 12:01:48 +0200 Subject: [PATCH 4/6] keep it hidden on lg screens --- src/components/TableOfContents/TableOfContentsMobile.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/TableOfContents/TableOfContentsMobile.tsx b/src/components/TableOfContents/TableOfContentsMobile.tsx index 9a390335ade..fe962487250 100644 --- a/src/components/TableOfContents/TableOfContentsMobile.tsx +++ b/src/components/TableOfContents/TableOfContentsMobile.tsx @@ -31,7 +31,7 @@ const Mobile = ({ items, maxDepth }: TableOfContentsMobileProps) => {