From 828ee64b3eb047172f5e38bfc59a6cfb046a3c46 Mon Sep 17 00:00:00 2001 From: tylerapfledderer Date: Fri, 2 Aug 2024 22:43:28 -0400 Subject: [PATCH 1/5] refactor(pages/learn): migrate to ShadCN --- src/pages/learn.tsx | 1138 ++++++++++---------- src/styles/global.css | 1 + tailwind.config.ts | 2 +- tailwind/ui/__stories__/Button.stories.tsx | 5 +- tailwind/ui/buttons/Button.tsx | 8 +- 5 files changed, 577 insertions(+), 577 deletions(-) diff --git a/src/pages/learn.tsx b/src/pages/learn.tsx index 3c2889534d9..cd55bd09960 100644 --- a/src/pages/learn.tsx +++ b/src/pages/learn.tsx @@ -1,20 +1,10 @@ import { GetStaticProps } from "next" import { useTranslation } from "next-i18next" import { serverSideTranslations } from "next-i18next/serverSideTranslations" -import { - Box, - Center, - Flex, - Grid, - type HeadingProps, - ListItem, - UnorderedList, - useToken, -} from "@chakra-ui/react" +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" @@ -24,18 +14,19 @@ 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 OldHeading from "@/components/OldHeading" -import Text from "@/components/OldText" import PageMetadata from "@/components/PageMetadata" +import { Center, Flex, Stack } from "@/components/ui/flex" import { existsNamespace } from "@/lib/utils/existsNamespace" import { getLastDeployDate } from "@/lib/utils/getLastDeployDate" import { getLocaleTimestamp } from "@/lib/utils/time" import { getRequiredNamespacesForPage } from "@/lib/utils/translations" +import InlineLink from "../../tailwind/Link" +import { ButtonLink } from "../../tailwind/ui/buttons/Button" + import developersEthBlocks from "@/public/images/developers-eth-blocks.png" import dogeComputer from "@/public/images/doge-computer.png" import enterprise from "@/public/images/enterprise-eth.png" @@ -55,6 +46,7 @@ import dao from "@/public/images/use-cases/dao-2.png" import wallet from "@/public/images/wallet.png" import whatIsEth from "@/public/images/what-is-ethereum.png" +// TODO: Migrate the original Card component before updating this const Card = ({ children, ...props }: OriginalCardProps) => ( ( ) const CardImage = ({ children }: ChildOnlyProp) => ( -
- {children} -
-) - -const DocsContainer = ({ children }: ChildOnlyProp) => ( - - {children} - +
{children}
) -const AdditionalReadingHeader = ({ children }: ChildOnlyProp) => ( - - {children} - +const AdditionalDocReading = ({ + headingText, + docLinks, +}: { + headingText: string + docLinks: Array<{ href: string; label: string; isExternal?: boolean }> +}) => ( + +

{headingText}

+ + {docLinks.map(({ label, ...rest }) => ( + + {label} + + ))} + + ) -const Section = ({ children }: ChildOnlyProp) => ( - - {children} - +const Section = ({ + headingId, + headingTitle, + description, + children, +}: { + headingId: string + headingTitle: string + description?: string + children: ReactNode +}) => ( + +
+ +

+ {headingTitle} +

+ {description &&

{description}

} + + {children} +
+ ) const CardGrid = ({ children }: ChildOnlyProp) => ( - - {children} - -) - -const H2 = ({ children, ...props }: HeadingProps) => ( - +
{children} - +
) -const H3 = ({ children, ...props }: HeadingProps) => ( - +const H3 = ({ children, ...props }: HTMLAttributes) => ( +

{children} - +

) export const getStaticProps = (async ({ locale }) => { @@ -148,8 +143,6 @@ export const getStaticProps = (async ({ locale }) => { const LearnPage = () => { const { t } = useTranslation("page-learn") - const lgBp = useToken("breakpoints", "lg") - const tocItems = [ { id: "what-is-crypto-ethereum", @@ -209,7 +202,7 @@ const LearnPage = () => { } return ( - +
{ - {/* TODO: Switch to `above="lg"` after completion of Chakra Migration */} - - - -
-

- {tocItems[0].title} -

- {t("what-is-crypto-2")} - - - <> - - {t("what-is-ethereum-card-image-alt")} - - - {t("what-is-ethereum-card-title")} - - - - - <> - - - - - {t("what-is-eth-card-title")} - - - - - <> - - - - - {t("what-is-web3-card-title")} - - - - - - - {t("additional-reading-more-on-ethereum-basics")} - - - - {t("guides-hub-desc")} - {t("quiz-hub-desc")} - - {t("additional-reading-what-are-smart-contracts")} - - - {t("additional-reading-ethereum-in-thirty-minutes")} - - -
- -
-

{tocItems[1].title}

- {t("how-do-i-use-ethereum-1")} - - - <> - - {t("what-is-a-wallet-card-alt")} - - - {t("what-is-a-wallet-card-title")} - - - - - <> - - - - - {t("find-a-wallet-button")} - - - - - <> - - - - - {t("crypto-security-basics-card-button")} - - - - - - + + + +
+ + + <> + + {t("what-is-ethereum-card-image-alt")} + + + {t("what-is-ethereum-card-title")} + + + + + <> + + + + + {t("what-is-eth-card-title")} + + + + + <> + + + + + {t("what-is-web3-card-title")} + + + + + + +
+ +
+ + + <> + + {t("what-is-a-wallet-card-alt")} + + + {t("what-is-a-wallet-card-title")} + + + + + <> + + + + + {t("find-a-wallet-button")} + + + + + <> + + + + + {t("crypto-security-basics-card-button")} + + + + + + + +

{t("things-to-consider-banner-title")}

+
    +
  • {t("things-to-consider-banner-1")}
    • +
  • + {t("things-to-consider-banner-2")}{" "} + + {t("things-to-consider-banner-layer-2")} + + . +
    • +
+ +
+ +
+ + + +
+ +
+ + + <> + + + + + {t("defi-card-button")} + + + + + <> + + + + + {t("stablecoins-card-button")} + + + + + <> + + + + {t("nft-card-button")} + + + + <> + + + + {t("dao-card-button")} + + + + <> + + + + + {t("dapp-card-button")} + + + + + +
    +
  • + + {t("common:decentralized-identity")} + +
    • +
  • + + {t("common:decentralized-social-networks")} + +
    • +
  • + + {t("common:decentralized-science")} + +
    • +
  • + + {t("play-to-earn")} + +
    • +
  • + + {t("fundraising-through-quadratic-funding")} + +
    • +
  • + + {t("supply-chain-management")} + +
    • +
+ + + +
+ +
- -

{t("things-to-consider-banner-title")}

- - {t("things-to-consider-banner-1")} - - {t("things-to-consider-banner-2")}{" "} - - {t("things-to-consider-banner-layer-2")} - - . - - - - - - - - - - {t("additional-reading-more-on-using-ethereum")} - - - - {t("additional-reading-how-to-create-an-ethereum-account")} - - - {t("additional-reading-how-to-use-a-wallet")} - - - {t("additional-reading-layer-2")} - - - {t("additional-reading-get-eth")} - - -
- -
-

{tocItems[2].title}

- {t("what-is-ethereum-used-for-1")} - - - <> - - - - {t("defi-card-button")} - - - - <> - - - - - {t("stablecoins-card-button")} - - - - - <> - - - - {t("nft-card-button")} - - - - <> - - - - {t("dao-card-button")} - - - - <> - - - - - {t("dapp-card-button")} - - - - - + - - - {t("common:decentralized-identity")} - - - - - {t("common:decentralized-social-networks")} - - - - - {t("common:decentralized-science")} - - - - - {t("play-to-earn")} - - - - - {t("fundraising-through-quadratic-funding")} - - - - - {t("supply-chain-management")} - - - - - -
- -
-

{tocItems[3].title}

- {t("strengthening-the-ethereum-network-description")} - - - <> - - - - - {t("staking-ethereum-card-button")} - - - - - <> - - - - - {t("run-a-node-card-title")} - - - - -
- -
-

{tocItems[4].title}

- {t("learn-about-ethereum-protocol-description")} - - - <> - - - - - {t("energy-consumption-card-button")} - - - - - <> - - - - - {t("ethereum-upgrades-card-button")} - - - - - <> - - - - - {t("ethereum-whitepaper-card-button")} - - - - - - - {t("more-on-ethereum-protocol-title")} - - - - {t("more-on-ethereum-protocol-ethereum-for-developers")} - - - {t("more-on-ethereum-protocol-consensus")} - - - {t("more-on-ethereum-protocol-evm")} - - - {t("more-on-ethereum-protocol-nodes-and-clients")} - - -
- -
-

{tocItems[5].title}

- {t("ethereum-community-description")} - - - <> - - {t("community-hub-card-alt")} - - - {t("community-hub-card-button")} - - - - - <> - - - - - {t("get-involved-card-title")} - - - - - <> - - - - - {t("online-communities-card-button")} - - - - -
- -
-

{tocItems[6].title}

- -

{t("books-about-ethereum")}

- - - - {t("cryptopians-title")} - {" "} - {t("cryptopians-description")} - - - - {t("out-of-the-ether-title")} - {" "} - {t("out-of-the-ether-description")} - - - - {t("the-infinite-machine-title")} - {" "} - {t("the-infinite-machine-description")} - - - - {t("mastering-ethereum-title")} - {" "} - {t("mastering-ethereum-description")} - - - - {t("proof-of-stake-title")} - {" "} - {t("proof-of-stake-description")} - - -

{t("podcasts-about-ethereum")}

- - - - {t("green-pill-title")} - {" "} - {t("green-pill-description")} - - - - {t("zeroknowledge-title")} - {" "} - {t("zeroknowledge-description")} - - - - {t("unchained-title")} - {" "} - {t("unchained-description")} - - - - {t("the-daily-gwei-title")} - {" "} - {t("the-daily-gwei-description")} - - - - {t("bankless-title")} - {" "} - {t("bankless-description")} - - - -
- - - + <> + + + + + {t("staking-ethereum-card-button")} + + + + + <> + + + + + {t("run-a-node-card-title")} + + + + +
+ +
+ + + <> + + + + + {t("energy-consumption-card-button")} + + + + + <> + + + + + {t("ethereum-upgrades-card-button")} + + + + + <> + + + + + {t("ethereum-whitepaper-card-button")} + + + + + + +
+ +
+ + + <> + + {t("community-hub-card-alt")} + + + {t("community-hub-card-button")} + + + + + <> + + + + + {t("get-involved-card-title")} + + + + + <> + + + + + {t("online-communities-card-button")} + + + + +
+ +
+ +

{t("books-about-ethereum")}

+
    +
  • + + {t("cryptopians-title")} + {" "} + {t("cryptopians-description")} +
    • +
  • + + {t("out-of-the-ether-title")} + {" "} + {t("out-of-the-ether-description")} +
    • +
  • + + {t("the-infinite-machine-title")} + {" "} + {t("the-infinite-machine-description")} +
    • +
  • + + {t("mastering-ethereum-title")} + {" "} + {t("mastering-ethereum-description")} +
    • +
  • + + {t("proof-of-stake-title")} + {" "} + {t("proof-of-stake-description")} +
    • +
+

{t("podcasts-about-ethereum")}

+
    +
  • + + {t("green-pill-title")} + {" "} + {t("green-pill-description")} +
    • +
  • + + {t("zeroknowledge-title")} + {" "} + {t("zeroknowledge-description")} +
    • +
  • + + {t("unchained-title")} + {" "} + {t("unchained-description")} +
    • +
  • + + {t("the-daily-gwei-title")} + {" "} + {t("the-daily-gwei-description")} +
    • +
  • + + {t("bankless-title")} + {" "} + {t("bankless-description")} +
    • +
+ +
+ + + + - +
) } diff --git a/src/styles/global.css b/src/styles/global.css index c221c3b83e9..c9665543ce5 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -226,6 +226,7 @@ ol { margin: 0px 0px 1.45rem 1.45rem; padding: 0; + list-style-type: initial; & li { padding-inline-start: 0; diff --git a/tailwind.config.ts b/tailwind.config.ts index 0d659a0dd6e..0def941bfc9 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -90,7 +90,7 @@ const config = { }, }, backgroundImage: { - "bg-main-gradient": "var(--bg-main-gradient)", + "main-gradient": "var(--bg-main-gradient)", }, boxShadow: { "table-box": "var(--table-box-shadow)", diff --git a/tailwind/ui/__stories__/Button.stories.tsx b/tailwind/ui/__stories__/Button.stories.tsx index 6e4f41af823..00b8073bfe1 100644 --- a/tailwind/ui/__stories__/Button.stories.tsx +++ b/tailwind/ui/__stories__/Button.stories.tsx @@ -117,10 +117,7 @@ export const OverrideStyles: Story = { - + diff --git a/tailwind/ui/buttons/Button.tsx b/tailwind/ui/buttons/Button.tsx index b47893105b6..f9c86e3e377 100644 --- a/tailwind/ui/buttons/Button.tsx +++ b/tailwind/ui/buttons/Button.tsx @@ -106,13 +106,13 @@ const Button = React.forwardRef( ) Button.displayName = "Button" -type ButtonLinkProps = ButtonProps & { - linkProps: LinkProps +type ButtonLinkProps = LinkProps & { + buttonProps?: ButtonProps customEventOptions?: MatomoEventOptions } const ButtonLink = React.forwardRef( - ({ linkProps, customEventOptions, children, ...buttonProps }, ref) => { + ({ buttonProps, customEventOptions, children, ...linkProps }, ref) => { const handleClick = () => { customEventOptions && trackCustomEvent(customEventOptions) } @@ -123,7 +123,7 @@ const ButtonLink = React.forwardRef( activeStyle={{}} // TODO: Redress this override when migrating the link component color={ - buttonProps.variant === "solid" ? "background.base" : undefined + buttonProps?.variant === "solid" ? "background.base" : undefined } textDecor="none" _hover={{ From 79539173d523205572ddd47209a6d69a79f95061 Mon Sep 17 00:00:00 2001 From: tylerapfledderer Date: Fri, 2 Aug 2024 23:05:58 -0400 Subject: [PATCH 2/5] fix(tailwind/ButtonTwoLines): declare isSecondary prop --- tailwind/ui/buttons/ButtonTwoLines.tsx | 20 +++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/tailwind/ui/buttons/ButtonTwoLines.tsx b/tailwind/ui/buttons/ButtonTwoLines.tsx index 735757ee628..428d0b5aefc 100644 --- a/tailwind/ui/buttons/ButtonTwoLines.tsx +++ b/tailwind/ui/buttons/ButtonTwoLines.tsx @@ -63,9 +63,20 @@ const ButtonTwoLines = ({ ) if (props.componentType === "link") { + const { buttonProps, ...rest } = props return ( - - + + ) } @@ -79,7 +90,10 @@ const ButtonTwoLines = ({ export default ButtonTwoLines const ChildContent = ( - props: Omit & { isIconLeft: boolean } + props: Omit & { + isIconLeft: boolean + isSecondary?: boolean + } ) => { const { reverseTextOrder = false, From b3b59c9bf2136f146cc2e16b5eacccf437568e2b Mon Sep 17 00:00:00 2001 From: tylerapfledderer Date: Sun, 4 Aug 2024 14:35:25 -0400 Subject: [PATCH 3/5] revert(pages/learn): revert import location for links, buttons --- src/pages/learn.tsx | 5 ++--- tailwind/ui/__stories__/Button.stories.tsx | 5 ++++- tailwind/ui/buttons/Button.tsx | 8 ++++---- tailwind/ui/buttons/ButtonTwoLines.tsx | 20 +++----------------- 4 files changed, 13 insertions(+), 25 deletions(-) diff --git a/src/pages/learn.tsx b/src/pages/learn.tsx index cd55bd09960..f9a25e409f2 100644 --- a/src/pages/learn.tsx +++ b/src/pages/learn.tsx @@ -5,6 +5,7 @@ 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" @@ -14,6 +15,7 @@ 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" @@ -24,9 +26,6 @@ import { getLastDeployDate } from "@/lib/utils/getLastDeployDate" import { getLocaleTimestamp } from "@/lib/utils/time" import { getRequiredNamespacesForPage } from "@/lib/utils/translations" -import InlineLink from "../../tailwind/Link" -import { ButtonLink } from "../../tailwind/ui/buttons/Button" - import developersEthBlocks from "@/public/images/developers-eth-blocks.png" import dogeComputer from "@/public/images/doge-computer.png" import enterprise from "@/public/images/enterprise-eth.png" diff --git a/tailwind/ui/__stories__/Button.stories.tsx b/tailwind/ui/__stories__/Button.stories.tsx index 00b8073bfe1..6e4f41af823 100644 --- a/tailwind/ui/__stories__/Button.stories.tsx +++ b/tailwind/ui/__stories__/Button.stories.tsx @@ -117,7 +117,10 @@ export const OverrideStyles: Story = { - + diff --git a/tailwind/ui/buttons/Button.tsx b/tailwind/ui/buttons/Button.tsx index f9c86e3e377..b47893105b6 100644 --- a/tailwind/ui/buttons/Button.tsx +++ b/tailwind/ui/buttons/Button.tsx @@ -106,13 +106,13 @@ const Button = React.forwardRef( ) Button.displayName = "Button" -type ButtonLinkProps = LinkProps & { - buttonProps?: ButtonProps +type ButtonLinkProps = ButtonProps & { + linkProps: LinkProps customEventOptions?: MatomoEventOptions } const ButtonLink = React.forwardRef( - ({ buttonProps, customEventOptions, children, ...linkProps }, ref) => { + ({ linkProps, customEventOptions, children, ...buttonProps }, ref) => { const handleClick = () => { customEventOptions && trackCustomEvent(customEventOptions) } @@ -123,7 +123,7 @@ const ButtonLink = React.forwardRef( activeStyle={{}} // TODO: Redress this override when migrating the link component color={ - buttonProps?.variant === "solid" ? "background.base" : undefined + buttonProps.variant === "solid" ? "background.base" : undefined } textDecor="none" _hover={{ diff --git a/tailwind/ui/buttons/ButtonTwoLines.tsx b/tailwind/ui/buttons/ButtonTwoLines.tsx index 428d0b5aefc..735757ee628 100644 --- a/tailwind/ui/buttons/ButtonTwoLines.tsx +++ b/tailwind/ui/buttons/ButtonTwoLines.tsx @@ -63,20 +63,9 @@ const ButtonTwoLines = ({ ) if (props.componentType === "link") { - const { buttonProps, ...rest } = props return ( - - + + ) } @@ -90,10 +79,7 @@ const ButtonTwoLines = ({ export default ButtonTwoLines const ChildContent = ( - props: Omit & { - isIconLeft: boolean - isSecondary?: boolean - } + props: Omit & { isIconLeft: boolean } ) => { const { reverseTextOrder = false, From 35e6af336c4b2b4fe368fd861f1ad105c1da5e24 Mon Sep 17 00:00:00 2001 From: tylerapfledderer Date: Wed, 7 Aug 2024 17:07:41 -0400 Subject: [PATCH 4/5] refactor(pages/learn): use list components with tailwind --- src/pages/learn.tsx | 83 +++++++++++++++++++++++---------------------- 1 file changed, 42 insertions(+), 41 deletions(-) diff --git a/src/pages/learn.tsx b/src/pages/learn.tsx index f9a25e409f2..10147fec482 100644 --- a/src/pages/learn.tsx +++ b/src/pages/learn.tsx @@ -20,6 +20,7 @@ import MainArticle from "@/components/MainArticle" import { ContentContainer } from "@/components/MdComponents" import PageMetadata from "@/components/PageMetadata" import { Center, Flex, Stack } from "@/components/ui/flex" +import { ListItem, UnorderedList } from "@/components/ui/list" import { existsNamespace } from "@/lib/utils/existsNamespace" import { getLastDeployDate } from "@/lib/utils/getLastDeployDate" @@ -345,16 +346,16 @@ const LearnPage = () => {

{t("things-to-consider-banner-title")}

-
    -
  • {t("things-to-consider-banner-1")}
    • -
  • + + {t("things-to-consider-banner-1")} + {t("things-to-consider-banner-2")}{" "} {t("things-to-consider-banner-layer-2")} . -
    • -
+ +
@@ -458,38 +459,38 @@ const LearnPage = () => { description={t("emerging-use-cases-description")} > -
    -
  • + + {t("common:decentralized-identity")} -
    • -
  • + + {t("common:decentralized-social-networks")} -
    • -
  • + + {t("common:decentralized-science")} -
    • -
  • + + {t("play-to-earn")} -
    • -
  • + + {t("fundraising-through-quadratic-funding")} -
    • +
  • {t("supply-chain-management")}
    • -
+ @@ -660,71 +661,71 @@ const LearnPage = () => { >

{t("books-about-ethereum")}

-
    -
  • + + {t("cryptopians-title")} {" "} {t("cryptopians-description")} -
    • -
  • + + {t("out-of-the-ether-title")} {" "} {t("out-of-the-ether-description")} -
    • -
  • + + {t("the-infinite-machine-title")} {" "} {t("the-infinite-machine-description")} -
    • -
  • + + {t("mastering-ethereum-title")} {" "} {t("mastering-ethereum-description")} -
    • -
  • + + {t("proof-of-stake-title")} {" "} {t("proof-of-stake-description")} -
    • -
+ +

{t("podcasts-about-ethereum")}

-
    -
  • + + {t("green-pill-title")} {" "} {t("green-pill-description")} -
    • -
  • + + {t("zeroknowledge-title")} {" "} {t("zeroknowledge-description")} -
    • -
  • + + {t("unchained-title")} {" "} {t("unchained-description")} -
    • -
  • + + {t("the-daily-gwei-title")} {" "} {t("the-daily-gwei-description")} -
    • -
  • + + {t("bankless-title")} {" "} {t("bankless-description")} -
    • -
+ + From cf0f580e64c7e8ad1f9fb84730ece8ca77e142e9 Mon Sep 17 00:00:00 2001 From: tylerapfledderer Date: Fri, 9 Aug 2024 13:09:10 -0400 Subject: [PATCH 5/5] 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 - -export default meta - -type Story = StoryObj - -const variants: ThemingProps<"Button">["variant"][] = [ - "solid", - "outline", - "ghost", - "link", -] - -export const StyleVariants: Story = { - argTypes: { - size: { - ...getThemingArgTypes(theme, "Button")?.size, - defaultValue: "md", - }, - }, - render: (args) => ( - - {variants.map((variant, idx) => ( - -