refactor(components): remove remaining Chakra imports

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) => (
-      <Container mx="auto" maxW="1504px">
+      <div className="mx-auto max-w-[1504px]">
         <Story />
-      </Container>
+      </div>
     ),
   ],
 } satisfies Meta<typeof DismissableBanner>
@@ -26,19 +27,19 @@ type Story = StoryObj<typeof meta>
 export const Basic: Story = {
   args: {
     storageKey: "dismissable-banner-1",
-    children: <Text>This is a dismissable banner notification.</Text>,
+    children: <p>This is a dismissable banner notification.</p>,
   },
 }
 
 export const WithLongText: Story = {
   args: {
     storageKey: "dismissable-banner-2",
     children: (
-      <Text>
+      <p>
         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.
-      </Text>
+      </p>
     ),
   },
 }
@@ -48,7 +49,7 @@ export const WithIcon: Story = {
     storageKey: "dismissable-banner-3",
     children: (
       <Center>
-        <Icon as={FaInfoCircle} mr={2} />
+        <FaInfoCircle className="me-2" />
         This banner includes an icon.
       </Center>
     ),

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: () => (
-    <Stack spacing="8">
+    <Stack className="gap-8">
       <BreadcrumbsComponent slug="/en/staking/" />
       <BreadcrumbsComponent slug="/en/staking/solo/" />
       <BreadcrumbsComponent slug="/en/roadmap/merge/issuance/" />

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) => (
-      <Box maxW="342px" margin="0 auto">
+      <div className="max-w-[342px]">
         <Story />
-      </Box>
+      </div>
     ),
   ],
 } satisfies Meta<typeof CardComponent>

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<typeof DocLink>
 
 export default meta
@@ -19,11 +18,6 @@ export const Default: Story = {
     href: "/history/",
     children: "History of Ethereum",
   },
-  render: (args) => (
-    <VStack spacing={4} align="stretch">
-      <DocLink {...args} />
-    </VStack>
-  ),
 }
 
 export const ExternalLink: Story = {
@@ -32,19 +26,14 @@ export const ExternalLink: Story = {
     children: "Ethereum Website",
     isExternal: true,
   },
-  render: (args) => (
-    <VStack spacing={4} align="stretch">
-      <DocLink {...args} />
-    </VStack>
-  ),
 }
 
 export const MultipleLinks: Story = {
   args: {
     href: "#",
   },
   render: () => (
-    <VStack spacing={4} align="stretch">
+    <VStack className="items-stretch gap-4">
       <DocLink href="/history/">History of Ethereum</DocLink>
       <DocLink href="https://ethereum.org" isExternal>
         Ethereum Website

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) => (
-      <Stack minH="100vh" position="relative">
-        <Box flex="1" />
+      <Stack className="relative min-h-[100vh] gap-0">
+        <div className="flex-1" />
         <Story />
       </Stack>
     ),
@@ -25,12 +26,9 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
-export const WidgetButton: Story = {
-  render: () => <FeedbackWidget />,
-}
+export const WidgetButton: Story = {}
 
 export const WidgetModal: Story = {
-  render: () => <FeedbackWidget />,
   play: async ({ canvasElement }) => {
     // Add delay for snapshot capture of the modal
     const canvas = within(canvasElement)

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) => (
-      <Center boxSize="md">
+      <Center className="size-128">
         <Story />
       </Center>
     ),

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) => (
-      <Box maxW="container.2xl" mx="auto">
+      <div
+        style={{ "--hero-decorator-max-w": screens["2xl"] } as CSSProperties}
+        className="mx-auto max-w-[var(--hero-decorator-max-w)]"
+      >
         <Story />
-      </Box>
+      </div>
     ),
   ],
 } satisfies Meta<typeof HubHeroComponent>

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) => (
-      <HStack maxW="container.2xl" m="auto" height="100vh">
+      <HStack
+        style={{ "--hero-decorator-max-w": screens["2xl"] } as CSSProperties}
+        className="mx-auto h-[100vh] max-w-[var(--hero-decorator-max-w)]"
+      >
         <Story />
       </HStack>
     ),

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) => (
-      <Box maxW="1008px" mx="auto">
+      <div className="mx-auto max-w-[1008px]">
         <Story />
-      </Box>
+      </div>
     ),
   ],
 } satisfies Meta<typeof MergeInfographicComponent>

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 = {

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) => (
-      <Box maxW="1008px">
+      <div className="max-w-[1008px]">
         <div>
-          <SimpleGrid columns={{ base: 1, md: 2 }} spacing={8}>
+          <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
             <Story />
-          </SimpleGrid>
+          </div>
         </div>
-      </Box>
+      </div>
     ),
   ],
 } satisfies Meta<typeof RoadmapActionCardComponent>

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,
 }: {