diff --git a/src/components/Banners/DismissableBanner/DismissableBanner.stories.tsx b/src/components/Banners/DismissableBanner/DismissableBanner.stories.tsx index 3128c577c01..28cc8befe1a 100644 --- a/src/components/Banners/DismissableBanner/DismissableBanner.stories.tsx +++ b/src/components/Banners/DismissableBanner/DismissableBanner.stories.tsx @@ -1,8 +1,9 @@ import React from "react" import { FaInfoCircle } from "react-icons/fa" -import { Center, Container, Icon, Text } from "@chakra-ui/react" import { Meta, StoryObj } from "@storybook/react" +import { Center } from "@/components/ui/flex" + import DismissableBanner from "." const meta = { @@ -13,9 +14,9 @@ const meta = { }, decorators: [ (Story) => ( - +
- +
), ], } satisfies Meta @@ -26,7 +27,7 @@ type Story = StoryObj export const Basic: Story = { args: { storageKey: "dismissable-banner-1", - children: This is a dismissable banner notification., + children:

This is a dismissable banner notification.

, }, } @@ -34,11 +35,11 @@ export const WithLongText: Story = { args: { storageKey: "dismissable-banner-2", children: ( - +

This is a dismissable banner with a very long text content to see how it handles overflow and wrapping. It should be able to manage the text properly without breaking the layout. - +

), }, } @@ -48,7 +49,7 @@ export const WithIcon: Story = { storageKey: "dismissable-banner-3", children: (
- + This banner includes an icon.
), diff --git a/src/components/Breadcrumbs/Breadcrumbs.stories.tsx b/src/components/Breadcrumbs/Breadcrumbs.stories.tsx index b8832f65f65..639b4ff7a09 100644 --- a/src/components/Breadcrumbs/Breadcrumbs.stories.tsx +++ b/src/components/Breadcrumbs/Breadcrumbs.stories.tsx @@ -1,7 +1,7 @@ -import * as React from "react" -import { Stack } from "@chakra-ui/react" import { Meta, type StoryObj } from "@storybook/react" +import { Stack } from "../ui/flex" + import BreadcrumbsComponent from "." const meta = { @@ -13,7 +13,7 @@ export default meta export const Breadcrumbs: StoryObj = { render: () => ( - + diff --git a/src/components/Card/Card.stories.tsx b/src/components/Card/Card.stories.tsx index a9c28d13fdf..b5722bcf52e 100644 --- a/src/components/Card/Card.stories.tsx +++ b/src/components/Card/Card.stories.tsx @@ -1,4 +1,3 @@ -import { Box } from "@chakra-ui/react" import { Meta, type StoryObj } from "@storybook/react" import { getTranslation } from "@/storybook-utils" @@ -11,9 +10,9 @@ const meta = { component: CardComponent, decorators: [ (Story) => ( - +
- +
), ], } satisfies Meta diff --git a/src/components/DocLink/DocLink.stories.tsx b/src/components/DocLink/DocLink.stories.tsx index 2e00ba61b9c..1efc393f1c4 100644 --- a/src/components/DocLink/DocLink.stories.tsx +++ b/src/components/DocLink/DocLink.stories.tsx @@ -1,13 +1,12 @@ -import * as React from "react" -import { VStack } from "@chakra-ui/react" import { Meta, StoryObj } from "@storybook/react" +import { VStack } from "../ui/flex" + import DocLink from "." const meta = { title: "Molecules / Navigation / DocLink", component: DocLink, - tags: ["autodocs"], } satisfies Meta export default meta @@ -19,11 +18,6 @@ export const Default: Story = { href: "/history/", children: "History of Ethereum", }, - render: (args) => ( - - - - ), } export const ExternalLink: Story = { @@ -32,11 +26,6 @@ export const ExternalLink: Story = { children: "Ethereum Website", isExternal: true, }, - render: (args) => ( - - - - ), } export const MultipleLinks: Story = { @@ -44,7 +33,7 @@ export const MultipleLinks: Story = { href: "#", }, render: () => ( - + History of Ethereum Ethereum Website diff --git a/src/components/FeedbackWidget/FeedbackWidget.stories.tsx b/src/components/FeedbackWidget/FeedbackWidget.stories.tsx index 41fecc73ecc..d326503f490 100644 --- a/src/components/FeedbackWidget/FeedbackWidget.stories.tsx +++ b/src/components/FeedbackWidget/FeedbackWidget.stories.tsx @@ -1,8 +1,9 @@ import * as React from "react" -import { Box, Stack } from "@chakra-ui/react" import { Meta, StoryObj } from "@storybook/react" import { expect, fireEvent, waitFor, within } from "@storybook/test" +import { Stack } from "../ui/flex" + import FeedbackWidget from "./" const meta = { @@ -13,8 +14,8 @@ const meta = { component: FeedbackWidget, decorators: [ (Story) => ( - - + +
), @@ -25,12 +26,9 @@ export default meta type Story = StoryObj -export const WidgetButton: Story = { - render: () => , -} +export const WidgetButton: Story = {} export const WidgetModal: Story = { - render: () => , play: async ({ canvasElement }) => { // Add delay for snapshot capture of the modal const canvas = within(canvasElement) diff --git a/src/components/Glossary/GlossaryTooltip/GlossaryTooltip.stories.tsx b/src/components/Glossary/GlossaryTooltip/GlossaryTooltip.stories.tsx index 7fe2ad9ea65..3529d1fad65 100644 --- a/src/components/Glossary/GlossaryTooltip/GlossaryTooltip.stories.tsx +++ b/src/components/Glossary/GlossaryTooltip/GlossaryTooltip.stories.tsx @@ -1,6 +1,7 @@ -import { Center } from "@chakra-ui/react" import { Meta, StoryObj } from "@storybook/react" +import { Center } from "@/components/ui/flex" + import GlossaryTooltipComponent from "." const meta = { @@ -12,7 +13,7 @@ const meta = { }, decorators: [ (Story) => ( -
+
), diff --git a/src/components/Heading/index.tsx b/src/components/Heading/index.tsx deleted file mode 100644 index a4972266413..00000000000 --- a/src/components/Heading/index.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import { - forwardRef, - Heading as ChakraHeading, - type HeadingProps, - type ThemingProps, -} from "@chakra-ui/react" - -export type HeadingTags = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" - -const HEADING_SIZE_DEFAULTS: Record< - HeadingTags, - ThemingProps<"Heading">["size"] -> = { - h1: "2xl", - h2: "xl", - h3: "lg", - h4: "md", - h5: "sm", - h6: "xs", -} - -/** - * This is a wrapper component for the Chakra `Heading` component, and forwards its ref and props. - * - * This supplies a default `size` theme token based on the - * heading tag being passed to the `as` prop. Defaults to `h2` with the `xl` - * tag, per the Chakra default. - */ -const Heading = forwardRef((props, ref) => { - const { as = "h2", size: sizeProp, ...rest } = props - - let size: typeof sizeProp - - if (sizeProp) { - // If a `size` value is passed to this wrapper, send it on through! - size = sizeProp - } else { - // If a `size` value is not passed to this wrapper, set a default based on the element - // provided to the `as` prop - // Only heading elements will set the defaults (Default heading is `h2`) - const headingDefaultKeys = Object.keys(HEADING_SIZE_DEFAULTS) - - if (typeof as === "string" && headingDefaultKeys.includes(as)) { - size = HEADING_SIZE_DEFAULTS[as] - } - } - - return -}) - -export default Heading diff --git a/src/components/Hero/HubHero/HubHero.stories.tsx b/src/components/Hero/HubHero/HubHero.stories.tsx index 812edf7cb05..6bd0750bb9d 100644 --- a/src/components/Hero/HubHero/HubHero.stories.tsx +++ b/src/components/Hero/HubHero/HubHero.stories.tsx @@ -1,7 +1,8 @@ -import * as React from "react" -import { Box } from "@chakra-ui/react" +import type { CSSProperties } from "react" import { Meta, StoryObj } from "@storybook/react" +import { screens } from "@/lib/utils/screen" + import { getTranslation } from "@/storybook-utils" import { langViewportModes } from "../../../../.storybook/modes" @@ -23,9 +24,12 @@ const meta = { }, decorators: [ (Story) => ( - +
- +
), ], } satisfies Meta diff --git a/src/components/Hero/MdxHero/MdxHero.stories.tsx b/src/components/Hero/MdxHero/MdxHero.stories.tsx index 3536bab3e9e..debce522d05 100644 --- a/src/components/Hero/MdxHero/MdxHero.stories.tsx +++ b/src/components/Hero/MdxHero/MdxHero.stories.tsx @@ -1,6 +1,10 @@ -import { HStack } from "@chakra-ui/react" +import type { CSSProperties } from "react" import { Meta, StoryObj } from "@storybook/react" +import { HStack } from "@/components/ui/flex" + +import { screens } from "@/lib/utils/screen" + import { langViewportModes } from "../../../../.storybook/modes" import MdxHeroComponent from "./" @@ -18,7 +22,10 @@ const meta = { }, decorators: [ (Story) => ( - + ), diff --git a/src/components/MergeInfographic/MergeInfographic.stories.tsx b/src/components/MergeInfographic/MergeInfographic.stories.tsx index 073e4272fe9..6b486f5e1ec 100644 --- a/src/components/MergeInfographic/MergeInfographic.stories.tsx +++ b/src/components/MergeInfographic/MergeInfographic.stories.tsx @@ -1,4 +1,3 @@ -import { Box } from "@chakra-ui/react" import { Meta, StoryObj } from "@storybook/react" import { langViewportModes } from "../../../.storybook/modes" @@ -18,9 +17,9 @@ const meta = { }, decorators: [ (Story) => ( - +
- +
), ], } satisfies Meta diff --git a/src/components/Nav/useNav.ts b/src/components/Nav/useNav.ts index 95ab3496483..356e3ff4262 100644 --- a/src/components/Nav/useNav.ts +++ b/src/components/Nav/useNav.ts @@ -29,6 +29,7 @@ import type { NavSections } from "./types" export const useNav = () => { const { t } = useTranslation("common") const { setTheme, resolvedTheme } = useTheme() + // TODO Remove when removing chakra provider const { setColorMode } = useColorMode() const linkSections: NavSections = { diff --git a/src/components/Roadmap/RoadmapActionCard/RoadmapActionCard.stories.tsx b/src/components/Roadmap/RoadmapActionCard/RoadmapActionCard.stories.tsx index 314ff053bc5..bca59c5a8ba 100644 --- a/src/components/Roadmap/RoadmapActionCard/RoadmapActionCard.stories.tsx +++ b/src/components/Roadmap/RoadmapActionCard/RoadmapActionCard.stories.tsx @@ -1,4 +1,3 @@ -import { Box, SimpleGrid } from "@chakra-ui/react" import type { Meta, StoryObj } from "@storybook/react" import RoadmapActionCardComponent from "." @@ -8,13 +7,13 @@ const meta = { component: RoadmapActionCardComponent, decorators: [ (Story) => ( - +
- +
- +
- +
), ], } satisfies Meta diff --git a/src/components/Staking/StakingProductsCardGrid/useStakingProductsCardGrid.ts b/src/components/Staking/StakingProductsCardGrid/useStakingProductsCardGrid.ts index 5b26115b42d..06d3815741c 100644 --- a/src/components/Staking/StakingProductsCardGrid/useStakingProductsCardGrid.ts +++ b/src/components/Staking/StakingProductsCardGrid/useStakingProductsCardGrid.ts @@ -1,6 +1,5 @@ import { useEffect, useState } from "react" import { shuffle } from "lodash" -import { useColorModeValue } from "@chakra-ui/react" import stakingProducts from "@/data/staking-products.json" @@ -21,6 +20,8 @@ import { getTagProperties, } from "./utils" +import useColorModeValue from "@/hooks/useColorModeValue" + export const useStakingProductsCardGrid = ({ category, }: { diff --git a/src/components/TableOfContents/TableOfContents.stories.tsx b/src/components/TableOfContents/TableOfContents.stories.tsx index 9e2e923913e..8fd1284b5e1 100644 --- a/src/components/TableOfContents/TableOfContents.stories.tsx +++ b/src/components/TableOfContents/TableOfContents.stories.tsx @@ -1,9 +1,10 @@ -import { Stack } from "@chakra-ui/react" import { Meta, StoryObj } from "@storybook/react" import { ToCItem } from "@/lib/types" -import TableOfContents from "./" +import { Stack } from "../ui/flex" + +import TableOfContentsComponent from "./" const tocItems: ToCItem[] = [ { @@ -73,22 +74,26 @@ const tocItems: ToCItem[] = [ const meta = { title: "Molecules / Navigation / TableOfContents", + component: TableOfContentsComponent, parameters: { layout: "fullscreen", }, decorators: [ (Story) => ( - + ), ], -} satisfies Meta +} satisfies Meta export default meta type Story = StoryObj -export const Default: Story = { - render: () => , +export const TableOfContents: Story = { + args: { + items: tocItems, + maxDepth: 2, + }, } diff --git a/src/components/Tooltip/Tooltip.stories.tsx b/src/components/Tooltip/Tooltip.stories.tsx index dec5c074e8f..7beecaef1a6 100644 --- a/src/components/Tooltip/Tooltip.stories.tsx +++ b/src/components/Tooltip/Tooltip.stories.tsx @@ -1,8 +1,8 @@ import { RiInformationLine } from "react-icons/ri" -import { Box, Center } from "@chakra-ui/react" import { Meta, StoryObj } from "@storybook/react" import Translation from "../Translation" +import { Center } from "../ui/flex" import InlineLink from "../ui/Link" // TODO: remove `index` when we delete the old tooltip @@ -21,9 +21,9 @@ const meta = { args: { content: , children: ( - + - + ), }, argTypes: { @@ -45,7 +45,7 @@ const meta = { }, decorators: [ (Story) => ( -
+
), diff --git a/src/components/icons/HighlightDarkIcon.tsx b/src/components/icons/HighlightDarkIcon.tsx index 5f83dc9a052..1d6548d31f9 100644 --- a/src/components/icons/HighlightDarkIcon.tsx +++ b/src/components/icons/HighlightDarkIcon.tsx @@ -1,14 +1,10 @@ -import * as React from "react" -import { createIcon } from "@chakra-ui/react" +import { createIconBase } from "./icon-base" -export const HighlightDarkIcon = createIcon({ +export const HighlightDarkIcon = createIconBase({ displayName: "HighlightDarkIcon", viewBox: "0 0 280 28", - defaultProps: { - width: "280px", - height: "28px", - }, - path: ( + className: "w-[280px] h-[28px]", + children: ( +} satisfies Meta export default meta @@ -197,15 +196,10 @@ iconsDefinitions.sort((a, b) => const items = iconsDefinitions.map((IconDef) => (
- +
{IconDef.displayName}
 @@ -213,6 +207,10 @@ const items = iconsDefinitions.map((IconDef) => ( export const Icons: StoryObj = { render: () => { - return {items} + return ( +
+ {items} +
+ ) }, } diff --git a/src/components/ui/__stories__/Link.stories.tsx b/src/components/ui/__stories__/Link.stories.tsx index f76526c7551..72da6edf602 100644 --- a/src/components/ui/__stories__/Link.stories.tsx +++ b/src/components/ui/__stories__/Link.stories.tsx @@ -1,15 +1,15 @@ -import * as React from "react" -import { Center, ListItem, Stack, Text, UnorderedList } from "@chakra-ui/react" import { Meta, StoryObj } from "@storybook/react" +import { Center, Stack } from "../flex" import Link from "../Link" +import { ListItem, UnorderedList } from "../list" const meta = { title: "Molecules / Navigation / Links", component: Link, decorators: [ (Story) => ( -
+
), @@ -21,12 +21,12 @@ export default meta type Story = StoryObj const MockParagraph = ({ href }: { href: string }) => ( - +

Text body normal. Ethereum is open access to digital money and data-friendly services for everyone – no matter your background or location. It's a community-built technology behind the cryptocurrency ether (ETH) and thousands of applications you can use today. - +

) export const InternalLink: Story = { @@ -45,14 +45,14 @@ export const ExternalLink: Story = { export const LinkList: Story = { render: () => ( - - + +

Text body normal. Ethereum is open access to digital money and data-friendly services for everyone – no matter your background or location. It's a community-built technology behind the cryptocurrency ether (ETH) and thousands of applications you can use today. - +

{Array.from({ length: 9 }).map((_, idx) => ( diff --git a/src/components/ui/__stories__/Table/Table.stories.tsx b/src/components/ui/__stories__/Table/Table.stories.tsx index 15480c28fba..9da2168a39b 100644 --- a/src/components/ui/__stories__/Table/Table.stories.tsx +++ b/src/components/ui/__stories__/Table/Table.stories.tsx @@ -1,7 +1,9 @@ -import * as React from "react" -import { Flex } from "@chakra-ui/react" +import type { CSSProperties } from "react" import { Meta, StoryObj } from "@storybook/react" +import { screens } from "@/lib/utils/screen" + +import { Flex } from "../../flex" import { Table as TableComponent } from "../../table" import { @@ -15,7 +17,10 @@ const meta = { component: TableComponent, decorators: [ (Story) => ( - + ), diff --git a/src/layouts/Docs.tsx b/src/layouts/Docs.tsx index 45b15811310..a88a5dbd297 100644 --- a/src/layouts/Docs.tsx +++ b/src/layouts/Docs.tsx @@ -1,6 +1,5 @@ import { useRouter } from "next/router" import type { HTMLAttributes } from "react" -import { Badge } from "@chakra-ui/react" import { ChildOnlyProp } from "@/lib/types" import type { DocsFrontmatter, MdPageContent } from "@/lib/interfaces" @@ -81,7 +80,6 @@ export const docsComponents = { h4: H4, pre: Codeblock, ...mdxTableComponents, - Badge, ButtonLink, Card, CallToContribute, diff --git a/src/layouts/Tutorial.tsx b/src/layouts/Tutorial.tsx index 26f1ff2f913..b6d1b2603c8 100644 --- a/src/layouts/Tutorial.tsx +++ b/src/layouts/Tutorial.tsx @@ -1,6 +1,5 @@ import { useRouter } from "next/router" import type { HTMLAttributes } from "react" -import { Badge } from "@chakra-ui/react" import type { ChildOnlyProp } from "@/lib/types" import type { MdPageContent, TutorialFrontmatter } from "@/lib/interfaces" @@ -78,7 +77,6 @@ export const tutorialsComponents = { kbd: KBD, pre: Codeblock, ...mdxTableComponents, - Badge, ButtonLink, CallToContribute, Card, diff --git a/src/layouts/stories/BaseLayout.stories.tsx b/src/layouts/stories/BaseLayout.stories.tsx index 832795c4255..bdf96ae6afb 100644 --- a/src/layouts/stories/BaseLayout.stories.tsx +++ b/src/layouts/stories/BaseLayout.stories.tsx @@ -1,6 +1,7 @@ -import { Center } from "@chakra-ui/react" import type { Meta, StoryObj } from "@storybook/react" +import { Center } from "@/components/ui/flex" + import { langViewportModes } from "../../../.storybook/modes" import { BaseLayout as BaseLayoutComponent } from "../BaseLayout" @@ -34,7 +35,7 @@ export default meta export const BaseLayout: StoryObj = { args: { children: ( -
+
Content Here
), diff --git a/src/layouts/stories/ContentLayout.stories.tsx b/src/layouts/stories/ContentLayout.stories.tsx index 64789322754..44b16b08087 100644 --- a/src/layouts/stories/ContentLayout.stories.tsx +++ b/src/layouts/stories/ContentLayout.stories.tsx @@ -1,6 +1,7 @@ -import { Center } from "@chakra-ui/react" import type { Meta, StoryObj } from "@storybook/react" +import { Center } from "@/components/ui/flex" + import { langViewportModes } from "../../../.storybook/modes" import { ContentLayout as ContentLayoutComponent } from "../ContentLayout" @@ -29,7 +30,7 @@ export default meta export const ContentLayout: StoryObj = { args: { children: ( -
+
Content Here
), @@ -61,7 +62,7 @@ export const ContentLayout: StoryObj = { }, maxDepth: 2, heroSection: ( -
+
Hero section
), diff --git a/src/pages/developers/index.tsx b/src/pages/developers/index.tsx index 3c528f0fd03..30c822da4d3 100644 --- a/src/pages/developers/index.tsx +++ b/src/pages/developers/index.tsx @@ -8,7 +8,6 @@ import { BasePageProps, ChildOnlyProp, Lang } from "@/lib/types" import Callout from "@/components/Callout" import Card, { CardProps } from "@/components/Card" import FeedbackCard from "@/components/FeedbackCard" -import Heading from "@/components/Heading" import HubHero from "@/components/Hero/HubHero" import { Image } from "@/components/Image" import MainArticle from "@/components/MainArticle" @@ -120,7 +119,7 @@ const SpeedRunEthereumBanner = ({ style={{ width: "100vw", objectFit: "cover", objectPosition: "20%" }} /> - {title} +

{title}

{linkLabel}
diff --git a/src/pages/developers/local-environment.tsx b/src/pages/developers/local-environment.tsx index 6a3698f41ba..80ae463fca7 100644 --- a/src/pages/developers/local-environment.tsx +++ b/src/pages/developers/local-environment.tsx @@ -7,7 +7,6 @@ import { BasePageProps, ChildOnlyProp, Lang } from "@/lib/types" import { Framework } from "@/lib/interfaces" import FeedbackCard from "@/components/FeedbackCard" -import Heading from "@/components/Heading" import { Image } from "@/components/Image" import MainArticle from "@/components/MainArticle" import PageMetadata from "@/components/PageMetadata" @@ -87,20 +86,9 @@ const LocalEnvironmentPage = ({ description={t("page-local-environment-setup-meta-desc")} />
- +

- +


@@ -110,14 +98,9 @@ const LocalEnvironmentPage = ({ - +

- +

diff --git a/src/pages/developers/tutorials.tsx b/src/pages/developers/tutorials.tsx index 1b148bc4746..da869c6ec94 100644 --- a/src/pages/developers/tutorials.tsx +++ b/src/pages/developers/tutorials.tsx @@ -16,7 +16,6 @@ import { BasePageProps, Lang } from "@/lib/types" import Emoji from "@/components/Emoji" import FeedbackCard from "@/components/FeedbackCard" -import Heading from "@/components/Heading" import MainArticle from "@/components/MainArticle" import PageMetadata from "@/components/PageMetadata" import Translation from "@/components/Translation" @@ -218,21 +217,9 @@ const TutorialPage = ({ "page-developers-tutorials:page-tutorials-meta-description" )} /> - +

- +

diff --git a/src/pages/staking/deposit-contract.tsx b/src/pages/staking/deposit-contract.tsx index 5811e30ee4a..3f5bbedcba3 100644 --- a/src/pages/staking/deposit-contract.tsx +++ b/src/pages/staking/deposit-contract.tsx @@ -17,7 +17,6 @@ import CardList from "@/components/CardList" import CopyToClipboard from "@/components/CopyToClipboard" import Emoji from "@/components/Emoji" import FeedbackCard from "@/components/FeedbackCard" -import Heading from "@/components/Heading" import { Image } from "@/components/Image" import InfoBanner from "@/components/InfoBanner" import MainArticle from "@/components/MainArticle" @@ -127,14 +126,7 @@ const Row = (props: ChildOnlyProp) => ( ) const CardTitle = (props: ChildOnlyProp) => ( - +

) const Caption = (props: ChildOnlyProp) => (