Merge branch 'dev' into i18n-next-intl

Author: pettinarip

.storybook/main.ts

@@ -17,8 +17,8 @@ import type { StorybookConfig } from "@storybook/nextjs"
 const config: StorybookConfig = {
   stories: [
     "../src/components/**/*.stories.{ts,tsx}",
-    "../src/@chakra-ui/stories/*.stories.tsx",
     "../src/layouts/stories/*.stories.tsx",
+    "../src/styles/*.stories.tsx",
   ],
   addons: [
     "@storybook/addon-links",

src/@chakra-ui/stories/Colors.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/Banners/DismissableBanner/DismissableBanner.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/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -1,5 +1,4 @@
 import { useTranslations } from "next-intl"
-import { Box } from "@chakra-ui/react"
 import { Meta, type StoryObj } from "@storybook/react"
 
 import { Button } from "../ui/buttons/Button"
@@ -10,9 +9,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/Card/Card.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/DocLink/DocLink.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/FeedbackWidget/FeedbackWidget.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>
     ),