Merge pull request #14905 from TylerAPfledderer/refactor/remove-remaining-chakra-components

refactor(components): remove remaining Chakra imports

Author: pettinarip

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/Heading/index.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/HubHero/HubHero.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/Hero/MdxHero/MdxHero.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>