From cf0f580e64c7e8ad1f9fb84730ece8ca77e142e9 Mon Sep 17 00:00:00 2001
From: tylerapfledderer <tyler.pfledderer@gmail.com>
Date: Fri, 9 Aug 2024 13:09:10 -0400
Subject: [PATCH] refactor(pages/learn): move ShadCN buttons and links to prod
 area

---
 src/components/Buttons/Button.stories.tsx     | 136 ------------------
 .../ButtonTwoLines/ButtonTwoLines.stories.tsx |  34 -----
 src/components/FeedbackWidget/FixedDot.tsx    |   4 +-
 src/components/FeedbackWidget/index.tsx       |   4 +-
 src/components/Footer.tsx                     |   5 +-
 src/components/Nav/Menu/index.tsx             |   2 +-
 src/components/Nav/Mobile/FooterButton.tsx    |   5 +-
 src/components/Nav/Mobile/HamburgerButton.tsx |   5 +-
 src/components/Nav/Mobile/LvlAccordion.tsx    |   4 +-
 src/components/Nav/Mobile/index.tsx           |   2 +-
 src/components/SkipLink.tsx                   |   2 +-
 {tailwind => src/components}/ui/Link.tsx      |   0
 .../ui/__stories__/Button.stories.tsx         |   4 +-
 .../ui/__stories__/ButtonLink.stories.tsx     |   2 +-
 .../ui/__stories__/ButtonTwoLines.stories.tsx |   2 +-
 .../__stories__}/Link.stories.tsx             |   0
 .../components}/ui/buttons/Button.tsx         |   0
 .../components}/ui/buttons/ButtonTwoLines.tsx |   2 +-
 src/components/ui/sheet.tsx                   |   2 +-
 src/pages/learn.tsx                           |   4 +-
 20 files changed, 21 insertions(+), 198 deletions(-)
 delete mode 100644 src/components/Buttons/Button.stories.tsx
 delete mode 100644 src/components/Buttons/ButtonTwoLines/ButtonTwoLines.stories.tsx
 rename {tailwind => src/components}/ui/Link.tsx (100%)
 rename {tailwind => src/components}/ui/__stories__/Button.stories.tsx (95%)
 rename {tailwind => src/components}/ui/__stories__/ButtonLink.stories.tsx (89%)
 rename {tailwind => src/components}/ui/__stories__/ButtonTwoLines.stories.tsx (93%)
 rename src/components/{BaseStories => ui/__stories__}/Link.stories.tsx (100%)
 rename {tailwind => src/components}/ui/buttons/Button.tsx (100%)
 rename {tailwind => src/components}/ui/buttons/ButtonTwoLines.tsx (98%)

diff --git a/src/components/Buttons/Button.stories.tsx b/src/components/Buttons/Button.stories.tsx
deleted file mode 100644
index 6fc779b2e62..00000000000
--- a/src/components/Buttons/Button.stories.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-import * as React from "react"
-import { MdChevronRight, MdExpandMore, MdNightlight } from "react-icons/md"
-import { HStack, Text, ThemingProps, VStack } from "@chakra-ui/react"
-import { Meta, StoryObj } from "@storybook/react"
-
-import { getThemingArgTypes } from "../../../.storybook/types"
-import theme from "../../@chakra-ui/theme"
-import Translation from "../Translation"
-
-import Button from "./Button"
-import ButtonLink from "./ButtonLink"
-import IconButton from "./IconButton"
-
-const meta = {
-  title: "Atoms / Form / Buttons",
-  component: Button,
-  args: {
-    children: "What is Ethereum?",
-  },
-  argTypes: {
-    isSecondary: {
-      defaultValue: false,
-      type: "boolean",
-      name: "Is a secondary color?",
-      if: { arg: "variant", neq: "solid" },
-    },
-  },
-} satisfies Meta<typeof Button>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-const variants: ThemingProps<"Button">["variant"][] = [
-  "solid",
-  "outline",
-  "ghost",
-  "link",
-]
-
-export const StyleVariants: Story = {
-  argTypes: {
-    size: {
-      ...getThemingArgTypes(theme, "Button")?.size,
-      defaultValue: "md",
-    },
-  },
-  render: (args) => (
-    <VStack spacing={4}>
-      {variants.map((variant, idx) => (
-        <HStack spacing={4} key={idx}>
-          <Button variant={variant} {...args} />
-          <Button variant={variant} isDisabled {...args} />
-        </HStack>
-      ))}
-    </VStack>
-  ),
-}
-
-export const IconVariants: Story = {
-  argTypes: {
-    variant: {
-      control: "radio",
-      options: ["solid", "outline", "ghost", "link"],
-    },
-  },
-  render: (args) => (
-    <HStack>
-      <VStack>
-        <Button {...args} />
-        <Button size="sm" {...args} />
-      </VStack>
-      <VStack>
-        <Button leftIcon={<MdExpandMore />} {...args} />
-        <Button leftIcon={<MdExpandMore />} size="sm" {...args} />
-      </VStack>
-      <VStack>
-        <Button rightIcon={<MdChevronRight />} {...args} />
-        <Button rightIcon={<MdChevronRight />} size="sm" {...args} />
-      </VStack>
-      <VStack>
-        <IconButton aria-label="next" icon={<MdChevronRight />} {...args} />
-        <IconButton
-          aria-label="next"
-          icon={<MdChevronRight />}
-          size="sm"
-          {...args}
-        />
-      </VStack>
-    </HStack>
-  ),
-}
-
-export const MultiLineText: Story = {
-  args: {
-    children: "Button label can have two lines",
-  },
-  render: (args) => (
-    <HStack>
-      <VStack maxW="171px">
-        <Button variant="outline" isSecondary {...args} />
-        <Button variant="outline" size="sm" isSecondary {...args} />
-      </VStack>
-      <VStack maxW="171px">
-        <Button {...args} />
-        <Button size="sm" isSecondary {...args} />
-      </VStack>
-      <VStack maxW="209px">
-        <Button rightIcon={<MdChevronRight />} {...args} />
-        <Button
-          rightIcon={<MdChevronRight />}
-          size="sm"
-          isSecondary
-          {...args}
-        />
-      </VStack>
-    </HStack>
-  ),
-}
-
-export const OverrideStyles: Story = {
-  render: () => (
-    <>
-      <Text>
-        Show custom styling examples here for visual testing of overrides from
-        the theme config
-      </Text>
-      <VStack>
-        <IconButton aria-label="toggle" icon={<MdNightlight />} px="1.5" />
-        <ButtonLink href="#" borderRadius="full" px="0" py="0">
-          <Translation id="get-involved" />
-        </ButtonLink>
-      </VStack>
-    </>
-  ),
-}
diff --git a/src/components/Buttons/ButtonTwoLines/ButtonTwoLines.stories.tsx b/src/components/Buttons/ButtonTwoLines/ButtonTwoLines.stories.tsx
deleted file mode 100644
index f39e00ea152..00000000000
--- a/src/components/Buttons/ButtonTwoLines/ButtonTwoLines.stories.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { BiCircle } from "react-icons/bi"
-import { Stack } from "@chakra-ui/react"
-import { Meta, StoryObj } from "@storybook/react"
-
-import ButtonTwoLinesComponent from "."
-
-const meta = {
-  title: "Atoms / Form / Buttons / ButtonTwoLines",
-  component: ButtonTwoLinesComponent,
-} satisfies Meta<typeof ButtonTwoLinesComponent>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const ButtonTwoLines: Story = {
-  args: {
-    icon: BiCircle,
-    mainText: "Main Text",
-    helperText: "Helper Text",
-    w: "300px",
-  },
-  render: (args) => (
-    <Stack spacing="8">
-      <ButtonTwoLinesComponent {...args} />
-      <ButtonTwoLinesComponent
-        {...args}
-        iconAlignment="end"
-        size="sm"
-        reverseTextOrder
-      />
-    </Stack>
-  ),
-}
diff --git a/src/components/FeedbackWidget/FixedDot.tsx b/src/components/FeedbackWidget/FixedDot.tsx
index c0e9920ca71..aa5c8010625 100644
--- a/src/components/FeedbackWidget/FixedDot.tsx
+++ b/src/components/FeedbackWidget/FixedDot.tsx
@@ -2,12 +2,12 @@ import { forwardRef } from "react"
 import { useTranslation } from "next-i18next"
 import type { ButtonHTMLAttributes } from "react"
 
+import { Button } from "@/components/ui/buttons/Button"
+
 import { cn } from "@/lib/utils/cn"
 
 import { FeedbackGlyphIcon } from "../icons"
 
-import { Button } from "@/../tailwind/ui/buttons/Button"
-
 type FixedDotProps = ButtonHTMLAttributes<HTMLButtonElement> & {
   isExpanded: boolean
   offsetBottom?: boolean
diff --git a/src/components/FeedbackWidget/index.tsx b/src/components/FeedbackWidget/index.tsx
index 90a8daf18ed..b15b9986476 100644
--- a/src/components/FeedbackWidget/index.tsx
+++ b/src/components/FeedbackWidget/index.tsx
@@ -1,6 +1,8 @@
 import { useTranslation } from "next-i18next"
 import { MdClose } from "react-icons/md"
 
+import { Button } from "@/components/ui/buttons/Button"
+
 import {
   Popover,
   PopoverClose,
@@ -11,8 +13,6 @@ import {
 import FixedDot from "./FixedDot"
 import { useFeedbackWidget } from "./useFeedbackWidget"
 
-import { Button } from "@/../tailwind/ui/buttons/Button"
-
 const FeedbackWidget = () => {
   const { t } = useTranslation("common")
   const {
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index ed3267fc63c..d8be9ac4e99 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -9,9 +9,8 @@ import Translation from "@/components/Translation"
 import { cn } from "@/lib/utils/cn"
 import { scrollIntoView } from "@/lib/utils/scrollIntoView"
 
-import { Button } from "../../tailwind/ui/buttons/Button"
-import { BaseLink } from "../../tailwind/ui/Link"
-
+import { Button } from "./ui/buttons/Button"
+import { BaseLink } from "./ui/Link"
 import { List, ListItem } from "./ui/list"
 
 const socialLinks = [
diff --git a/src/components/Nav/Menu/index.tsx b/src/components/Nav/Menu/index.tsx
index 52d7b74c780..71c8a954dfb 100644
--- a/src/components/Nav/Menu/index.tsx
+++ b/src/components/Nav/Menu/index.tsx
@@ -13,7 +13,7 @@ import { cn } from "@/lib/utils/cn"
 
 import { MAIN_NAV_ID, SECTION_LABELS } from "@/lib/constants"
 
-import { Button } from "../../../../tailwind/ui/buttons/Button"
+import { Button } from "../../ui/buttons/Button"
 import type { NavSections } from "../types"
 
 import { useNavMenu } from "./useNavMenu"
diff --git a/src/components/Nav/Mobile/FooterButton.tsx b/src/components/Nav/Mobile/FooterButton.tsx
index a082b577613..c39f6b1564f 100644
--- a/src/components/Nav/Mobile/FooterButton.tsx
+++ b/src/components/Nav/Mobile/FooterButton.tsx
@@ -1,10 +1,7 @@
 import { forwardRef } from "react"
 import type { IconType } from "react-icons"
 
-import {
-  Button,
-  type ButtonProps,
-} from "../../../../tailwind/ui/buttons/Button"
+import { Button, type ButtonProps } from "../../ui/buttons/Button"
 
 type FooterButtonProps = ButtonProps & {
   icon: IconType
diff --git a/src/components/Nav/Mobile/HamburgerButton.tsx b/src/components/Nav/Mobile/HamburgerButton.tsx
index d0f8d98d5ac..3722c1c4617 100644
--- a/src/components/Nav/Mobile/HamburgerButton.tsx
+++ b/src/components/Nav/Mobile/HamburgerButton.tsx
@@ -6,10 +6,7 @@ import { cn } from "@/lib/utils/cn"
 
 import { HAMBURGER_BUTTON_ID } from "@/lib/constants"
 
-import {
-  Button,
-  type ButtonProps,
-} from "../../../../tailwind/ui/buttons/Button"
+import { Button, type ButtonProps } from "../../ui/buttons/Button"
 
 const hamburgerSvg =
   "M 2 13 l 10 0 l 0 0 l 10 0 M 4 19 l 8 0 M 12 19 l 8 0 M 2 25 l 10 0 l 0 0 l 10 0"
diff --git a/src/components/Nav/Mobile/LvlAccordion.tsx b/src/components/Nav/Mobile/LvlAccordion.tsx
index acf60ea660b..572763c197a 100644
--- a/src/components/Nav/Mobile/LvlAccordion.tsx
+++ b/src/components/Nav/Mobile/LvlAccordion.tsx
@@ -6,8 +6,8 @@ import { cn } from "@/lib/utils/cn"
 import { trackCustomEvent } from "@/lib/utils/matomo"
 import { cleanPath } from "@/lib/utils/url"
 
-import { Button } from "../../../../tailwind/ui/buttons/Button"
-import { BaseLink } from "../../../../tailwind/ui/Link"
+import { Button } from "../../ui/buttons/Button"
+import { BaseLink } from "../../ui/Link"
 import type { Level, NavItem, NavSectionKey } from "../types"
 
 import ExpandIcon from "./ExpandIcon"
diff --git a/src/components/Nav/Mobile/index.tsx b/src/components/Nav/Mobile/index.tsx
index 366f06373a7..e6d200590b1 100644
--- a/src/components/Nav/Mobile/index.tsx
+++ b/src/components/Nav/Mobile/index.tsx
@@ -6,7 +6,7 @@ import {
   SheetTrigger,
 } from "@/components/ui/sheet"
 
-import { ButtonProps } from "../../../../tailwind/ui/buttons/Button"
+import { ButtonProps } from "../../ui/buttons/Button"
 import type { NavSections } from "../types"
 
 import HamburgerButton from "./HamburgerButton"
diff --git a/src/components/SkipLink.tsx b/src/components/SkipLink.tsx
index 2680af8b64c..45d03166355 100644
--- a/src/components/SkipLink.tsx
+++ b/src/components/SkipLink.tsx
@@ -2,7 +2,7 @@ import { useTranslation } from "next-i18next"
 
 import { MAIN_CONTENT_ID } from "@/lib/constants"
 
-import { BaseLink } from "../../tailwind/ui/Link"
+import { BaseLink } from "./ui/Link"
 
 export const SkipLink = () => {
   const { t } = useTranslation()
diff --git a/tailwind/ui/Link.tsx b/src/components/ui/Link.tsx
similarity index 100%
rename from tailwind/ui/Link.tsx
rename to src/components/ui/Link.tsx
diff --git a/tailwind/ui/__stories__/Button.stories.tsx b/src/components/ui/__stories__/Button.stories.tsx
similarity index 95%
rename from tailwind/ui/__stories__/Button.stories.tsx
rename to src/components/ui/__stories__/Button.stories.tsx
index 433b45d07bc..6061ed6f4a5 100644
--- a/tailwind/ui/__stories__/Button.stories.tsx
+++ b/src/components/ui/__stories__/Button.stories.tsx
@@ -1,11 +1,11 @@
 import { MdChevronRight, MdExpandMore } from "react-icons/md"
 import type { Meta, StoryObj } from "@storybook/react"
 
-import { HStack, VStack } from "../../../src/components/ui/flex"
 import { Button, type ButtonVariantProps } from "../buttons/Button"
+import { HStack, VStack } from "../flex"
 
 const meta = {
-  title: "Atoms / Form / ShadCn Buttons",
+  title: "Atoms / Form / Buttons",
   component: Button,
   args: {
     children: "What is Ethereum?",
diff --git a/tailwind/ui/__stories__/ButtonLink.stories.tsx b/src/components/ui/__stories__/ButtonLink.stories.tsx
similarity index 89%
rename from tailwind/ui/__stories__/ButtonLink.stories.tsx
rename to src/components/ui/__stories__/ButtonLink.stories.tsx
index a5563f98d33..f368406bf3a 100644
--- a/tailwind/ui/__stories__/ButtonLink.stories.tsx
+++ b/src/components/ui/__stories__/ButtonLink.stories.tsx
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react/*"
 import { ButtonLink as ButtonLinkComponent } from "../buttons/Button"
 
 const meta = {
-  title: "Atoms / Form / ShadCn Buttons",
+  title: "Atoms / Form / Buttons",
   component: ButtonLinkComponent,
 } satisfies Meta<typeof ButtonLinkComponent>
 
diff --git a/tailwind/ui/__stories__/ButtonTwoLines.stories.tsx b/src/components/ui/__stories__/ButtonTwoLines.stories.tsx
similarity index 93%
rename from tailwind/ui/__stories__/ButtonTwoLines.stories.tsx
rename to src/components/ui/__stories__/ButtonTwoLines.stories.tsx
index 78b47062b01..07606c0f1bd 100644
--- a/tailwind/ui/__stories__/ButtonTwoLines.stories.tsx
+++ b/src/components/ui/__stories__/ButtonTwoLines.stories.tsx
@@ -5,7 +5,7 @@ import { Meta, StoryObj } from "@storybook/react"
 import ButtonTwoLinesComponent from "../buttons/ButtonTwoLines"
 
 const meta = {
-  title: "Atoms / Form / ShadCn Buttons / ButtonTwoLines",
+  title: "Atoms / Form / Buttons / ButtonTwoLines",
   component: ButtonTwoLinesComponent,
 } satisfies Meta<typeof ButtonTwoLinesComponent>
 
diff --git a/src/components/BaseStories/Link.stories.tsx b/src/components/ui/__stories__/Link.stories.tsx
similarity index 100%
rename from src/components/BaseStories/Link.stories.tsx
rename to src/components/ui/__stories__/Link.stories.tsx
diff --git a/tailwind/ui/buttons/Button.tsx b/src/components/ui/buttons/Button.tsx
similarity index 100%
rename from tailwind/ui/buttons/Button.tsx
rename to src/components/ui/buttons/Button.tsx
diff --git a/tailwind/ui/buttons/ButtonTwoLines.tsx b/src/components/ui/buttons/ButtonTwoLines.tsx
similarity index 98%
rename from tailwind/ui/buttons/ButtonTwoLines.tsx
rename to src/components/ui/buttons/ButtonTwoLines.tsx
index 71e55ce8e22..332290ba5bc 100644
--- a/tailwind/ui/buttons/ButtonTwoLines.tsx
+++ b/src/components/ui/buttons/ButtonTwoLines.tsx
@@ -2,7 +2,7 @@ import type { IconType } from "react-icons/lib"
 
 import { cn } from "@/lib/utils/cn"
 
-import { Stack } from "../../../src/components/ui/flex"
+import { Stack } from "../flex"
 
 import {
   Button,
diff --git a/src/components/ui/sheet.tsx b/src/components/ui/sheet.tsx
index 0dc5c3014e3..5e643c0034e 100644
--- a/src/components/ui/sheet.tsx
+++ b/src/components/ui/sheet.tsx
@@ -4,7 +4,7 @@ import * as SheetPrimitive from "@radix-ui/react-dialog"
 
 import { cn } from "@/lib/utils/cn"
 
-import { Button } from "../../../tailwind/ui/buttons/Button"
+import { Button } from "./buttons/Button"
 
 const Sheet = SheetPrimitive.Root
 
diff --git a/src/pages/learn.tsx b/src/pages/learn.tsx
index 10147fec482..7ee9567a777 100644
--- a/src/pages/learn.tsx
+++ b/src/pages/learn.tsx
@@ -5,7 +5,6 @@ import type { HTMLAttributes, ReactNode } from "react"
 
 import type { BasePageProps, ChildOnlyProp, Lang, ToCItem } from "@/lib/types"
 
-import ButtonLink from "@/components/Buttons/ButtonLink"
 import OriginalCard, {
   type CardProps as OriginalCardProps,
 } from "@/components/Card"
@@ -15,11 +14,12 @@ import { HubHero } from "@/components/Hero"
 import type { HubHeroProps } from "@/components/Hero/HubHero"
 import { Image, type ImageProps } from "@/components/Image"
 import LeftNavBar from "@/components/LeftNavBar"
-import InlineLink from "@/components/Link"
 import MainArticle from "@/components/MainArticle"
 import { ContentContainer } from "@/components/MdComponents"
 import PageMetadata from "@/components/PageMetadata"
+import { ButtonLink } from "@/components/ui/buttons/Button"
 import { Center, Flex, Stack } from "@/components/ui/flex"
+import InlineLink from "@/components/ui/Link"
 import { ListItem, UnorderedList } from "@/components/ui/list"
 
 import { existsNamespace } from "@/lib/utils/existsNamespace"