From e3edb1da2be9b87b5a1aff35ac085f72613382f1 Mon Sep 17 00:00:00 2001 From: Pablo Pettinari Date: Wed, 28 Jun 2023 09:33:15 -0300 Subject: [PATCH 1/4] cleanup deprecated code and components --- src/components/Icon.tsx | 116 ------------------ src/components/OldEmoji.tsx | 52 -------- src/components/SideNav.tsx | 12 +- src/components/SideNavMobile.tsx | 6 +- .../Staking/StakingLaunchpadWidget.tsx | 4 +- src/pages-conditional/eth.tsx | 2 +- src/pages-conditional/wallets.tsx | 2 +- src/pages-conditional/what-is-ethereum.tsx | 15 +-- src/pages/get-eth.tsx | 49 ++++++-- src/pages/quizzes.tsx | 4 +- src/pages/roadmap/vision.tsx | 3 +- 11 files changed, 67 insertions(+), 198 deletions(-) delete mode 100644 src/components/Icon.tsx delete mode 100644 src/components/OldEmoji.tsx diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx deleted file mode 100644 index 20e695ff9b9..00000000000 --- a/src/components/Icon.tsx +++ /dev/null @@ -1,116 +0,0 @@ -import React from "react" -import styled from "@emotion/styled" -import { IconContext } from "react-icons" -import { - FaGithub, - FaTwitter, - FaYoutube, - FaDiscord, - FaRedditAlien, - FaStackExchange, - FaGlobe, -} from "react-icons/fa" -import { - MdAdd, - MdBrightness2, - MdOutlineCancel, - MdCircle, - MdClose, - MdDone, - MdExpandLess, - MdExpandMore, - MdArrowForward, - MdInfoOutline, - MdLanguage, - MdMenu, - MdSearch, - MdWbSunny, - MdFlip, - MdLiveHelp, - MdKeyboardArrowLeft, - MdKeyboardArrowRight, -} from "react-icons/md" -import { - BsArrowCounterclockwise, - BsQuestionSquareFill, - BsToggleOff, - BsToggleOn, -} from "react-icons/bs" -import { IoCodeOutline, IoCodeDownload } from "react-icons/io5" - -const socialColors = { - reddit: "#ff4301", - twitter: "#1da1f2", - youtube: "#ff0000", - discord: "#7289da", - stackExchange: "#48a2da", -} - -export interface IProps { - name?: string - color?: string | boolean - size?: string - className?: string -} - -const Icon: React.FC = ({ - name = "", - color, - size = "24", - className, -}) => ( - - {name === "add" && } - {name === "chevronUp" && } - {name === "chevronDown" && } - {name === "circle" && } - {name === "arrowRight" && } - {name === "arrowRightIos" && } - {name === "arrowLeftIos" && } - {name === "cancel" && } - {name === "close" && } - {name === "darkTheme" && } - {name === "github" && } - {name === "info" && } - {name === "language" && } - {name === "lightTheme" && } - {name === "toggleOff" && } - {name === "toggleOn" && } - {name === "menu" && } - {name === "check" && } - {name === "twitter" && ( - - )} - {name === "search" && } - {name === "youtube" && ( - - )} - {name === "discord" && ( - - )} - {name === "glossary" && } - {name === "codeDownload" && } - {name === "code" && } - {name === "flip" && } - {name === "help" && } - {name === "reddit" && ( - - )} - {name === "stackExchange" && ( - - )} - {name === "webpage" && } - {name === "arrowCounterClockwise" && } - -) - -const StyledIcon = styled(Icon)` - fill: ${(props) => - props.color ? props.color : props.theme.colors.secondary}; - - &:hover svg { - fill: ${(props) => props.theme.colors.primary}; - } -` - -export default StyledIcon diff --git a/src/components/OldEmoji.tsx b/src/components/OldEmoji.tsx deleted file mode 100644 index 8f7caacff65..00000000000 --- a/src/components/OldEmoji.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import React from "react" -import { Twemoji } from "react-emoji-render" -import styled from "@emotion/styled" -import { margin, MarginProps } from "styled-system" - -import { IS_DEV } from "../utils/env" - -export interface IProps extends MarginProps { - size?: number - text: string -} - -const StyledEmoji = styled(Twemoji)<{ size: number }>` - & > img { - width: ${(props) => props.size}em !important; - height: ${(props) => props.size}em !important; - margin: 0 !important; - } - display: inline-block; /* respect top & bottom margins */ - ${margin} -` - -/** - * DEPRECATED component. - * - * Use the new `src/components/Emoji.tsx` instead. - */ -const Emoji: React.FC = ({ size = 1.5, text, ...props }) => { - return ( - - ) -} - -Emoji.defaultProps = { - mt: 0, - mr: 0, - mb: 0, - ml: 0, -} - -export default Emoji diff --git a/src/components/SideNav.tsx b/src/components/SideNav.tsx index 3ad161306f9..607db71910e 100644 --- a/src/components/SideNav.tsx +++ b/src/components/SideNav.tsx @@ -7,11 +7,21 @@ import { useTranslation } from "gatsby-plugin-react-i18next" import Link, { IProps as ILinkProps } from "./Link" import Translation from "./Translation" -import { dropdownIconContainerVariant } from "./SharedStyledComponents" import docLinks from "../data/developer-docs-links.yaml" import { DeveloperDocsLink } from "../types" +export const dropdownIconContainerVariant = { + open: { + rotate: 0, + y: 3, + transition: { + duration: 0.4, + }, + }, + closed: { rotate: -90, y: 0 }, +} + const innerLinksVariants = { open: { opacity: 1, diff --git a/src/components/SideNavMobile.tsx b/src/components/SideNavMobile.tsx index 72090816d17..33a8f374eac 100644 --- a/src/components/SideNavMobile.tsx +++ b/src/components/SideNavMobile.tsx @@ -7,8 +7,10 @@ import { MdExpandMore } from "react-icons/md" import Link, { IProps as ILinkProps } from "./Link" import Translation from "./Translation" import { isLang } from "../utils/languages" -import { dropdownIconContainerVariant } from "./SharedStyledComponents" -import { IPropsNavLink as INavLinkProps } from "./SideNav" +import { + dropdownIconContainerVariant, + IPropsNavLink as INavLinkProps, +} from "./SideNav" import docLinks from "../data/developer-docs-links.yaml" import { DeveloperDocsLink } from "../types" diff --git a/src/components/Staking/StakingLaunchpadWidget.tsx b/src/components/Staking/StakingLaunchpadWidget.tsx index 7ed063022ac..f3d039a1b5a 100644 --- a/src/components/Staking/StakingLaunchpadWidget.tsx +++ b/src/components/Staking/StakingLaunchpadWidget.tsx @@ -4,10 +4,10 @@ import { Box, chakra, Flex, Text } from "@chakra-ui/react" import { StyledSelect as Select } from "../SharedStyledComponents" import ButtonLink from "../ButtonLink" -import Emoji from "../OldEmoji" import Translation from "../Translation" import { trackCustomEvent } from "../../utils/matomo" +import { FaTools } from "react-icons/fa" const StyledSelect = chakra(Select, { baseStyle: { @@ -90,8 +90,8 @@ const StakingLaunchpadWidget: React.FC = () => { to="#node-and-client-tools" variant="outline" width={{ base: "full", md: "auto" }} + leftIcon={} > - diff --git a/src/pages-conditional/eth.tsx b/src/pages-conditional/eth.tsx index deb1c90da1a..1b595dc14cd 100644 --- a/src/pages-conditional/eth.tsx +++ b/src/pages-conditional/eth.tsx @@ -106,7 +106,7 @@ const Subtitle = (props: ChildOnlyProp) => ( ) -const TwoColumnContent = (props: FlexProps) => ( +export const TwoColumnContent = (props: FlexProps) => ( ( - + @@ -481,7 +482,7 @@ const WhatIsEthereumPage = ({ ariaLabel: "Read more about wallets stats", })} > - + @@ -500,7 +501,7 @@ const WhatIsEthereumPage = ({ ariaLabel: "Read more about smart contracts stats", })} > - + @@ -518,7 +519,7 @@ const WhatIsEthereumPage = ({ ariaLabel: "Read more about about Ethereum as money", })} > - + @@ -538,7 +539,7 @@ const WhatIsEthereumPage = ({ "Read more about 2021 Ethereum earnings stats", })} > - + @@ -559,7 +560,7 @@ const WhatIsEthereumPage = ({ "Read more about number of transactions stats", })} > - + diff --git a/src/pages/get-eth.tsx b/src/pages/get-eth.tsx index 28a99c5723b..b33b1fa59a8 100644 --- a/src/pages/get-eth.tsx +++ b/src/pages/get-eth.tsx @@ -1,8 +1,8 @@ -import React from "react" +import React, { ComponentPropsWithRef } from "react" import { useTranslation } from "gatsby-plugin-react-i18next" import { GatsbyImage } from "gatsby-plugin-image" import { graphql, PageProps } from "gatsby" -import { Box, Flex, Heading, Img, Text } from "@chakra-ui/react" +import { Box, BoxProps, Flex, Heading, Img, Text } from "@chakra-ui/react" import Translation from "../components/Translation" import CardList from "../components/CardList" @@ -13,20 +13,47 @@ import Link from "../components/Link" import ButtonLink from "../components/ButtonLink" import PageMetadata from "../components/PageMetadata" import CalloutBanner from "../components/CalloutBanner" +import FeedbackCard from "../components/FeedbackCard" +import { CardListItem } from "../components/CardList" +import { Divider } from "../templates/use-cases" +import Card from "../components/Card" import { - Content, - Divider, LeftColumn, - Page, RightColumn, - StyledCard, TwoColumnContent, -} from "../components/SharedStyledComponents" -import FeedbackCard from "../components/FeedbackCard" -import { CardListItem } from "../components/CardList" +} from "../pages-conditional/eth" + import { getImage } from "../utils/image" import { trackCustomEvent } from "../utils/matomo" +import type { ChildOnlyProp } from "../types" + +const Page = (props: ChildOnlyProp) => ( + +) + +export const Content = (props: BoxProps) => ( + +) + +export const StyledCard = (props: ComponentPropsWithRef) => ( + +) + const GetETHPage = ({ data }: PageProps) => { const { t } = useTranslation() @@ -92,11 +119,9 @@ const GetETHPage = ({ data }: PageProps) => { position="relative" width="full" maxWidth="1440px" - flexDir={{ + direction={{ base: "column-reverse", - sm: "column-reverse", md: "column", - lg: "column", }} mt={8} mx={0} diff --git a/src/pages/quizzes.tsx b/src/pages/quizzes.tsx index 6e64a3009dd..b3c5a1dee5d 100644 --- a/src/pages/quizzes.tsx +++ b/src/pages/quizzes.tsx @@ -16,13 +16,13 @@ import ButtonLink from "../components/ButtonLink" import PageHero from "../components/PageHero" import PageMetadata from "../components/PageMetadata" import Translation from "../components/Translation" -import { Content } from "../components/SharedStyledComponents" import FeedbackCard from "../components/FeedbackCard" import QuizWidget from "../components/Quiz/QuizWidget" import QuizzesList from "../components/Quiz/QuizzesList" import QuizzesModal from "../components/Quiz/QuizzesModal" import QuizzesStats from "../components/Quiz/QuizzesStats" import { QuizzesHubContext } from "../components/Quiz/context" +import { Content } from "./get-eth" import { useLocalStorage } from "../hooks/useLocalStorage" @@ -31,7 +31,7 @@ import { trackCustomEvent } from "../utils/matomo" import { INITIAL_QUIZ, USER_STATS_KEY } from "../constants" -import { CompletedQuizzes, QuizStatus, UserStats } from "../types" +import type { CompletedQuizzes, QuizStatus, UserStats } from "../types" import allQuizzesData, { ethereumBasicsQuizzes, diff --git a/src/pages/roadmap/vision.tsx b/src/pages/roadmap/vision.tsx index 6ab7ecee850..f82c95e3a89 100644 --- a/src/pages/roadmap/vision.tsx +++ b/src/pages/roadmap/vision.tsx @@ -16,9 +16,7 @@ import { import Translation from "../../components/Translation" import Card from "../../components/Card" -import ActionCard from "../../components/ActionCard" import Link from "../../components/Link" -import Emoji from "../../components/OldEmoji" import Trilemma from "../../components/Trilemma" import PageHero, { IContent as IPageHeroContent, @@ -32,6 +30,7 @@ import FeedbackCard from "../../components/FeedbackCard" import { getImage } from "../../utils/image" import type { ChildOnlyProp } from "../../types" +import Emoji from "../../components/Emoji" const Page = (props: ChildOnlyProp) => ( From 65e72dbb323ccaf33fe8044c9e049c2796829646 Mon Sep 17 00:00:00 2001 From: Pablo Pettinari Date: Wed, 28 Jun 2023 10:01:39 -0300 Subject: [PATCH 2/4] update docs --- docs/best-practices.md | 104 ++++++++++---------- docs/chakra-migration-guide.md | 169 --------------------------------- 2 files changed, 51 insertions(+), 222 deletions(-) delete mode 100644 docs/chakra-migration-guide.md diff --git a/docs/best-practices.md b/docs/best-practices.md index 3d4c2d6d614..56012759d61 100644 --- a/docs/best-practices.md +++ b/docs/best-practices.md @@ -102,45 +102,58 @@ export default ComponentName ## Styling -- `src/theme.ts` - Declares site color themes, breakpoints and other constants (try to utilize these colors first) -- We use [emotion](https://emotion.sh/) +We use [Chakra UI](https://chakra-ui.com/). - - Tagged template literals are used to style custom components +`src/@chakra-ui/gatsby-plugin/theme.ts` - Holds all the theme configuration. This is where you can find the colors, fonts, component themes, variants, etc. - ```tsx - // Example of styling syntax using emotion - - import styled from "@emotion/styled" - - const GenericButton = styled.div` - width: 200px; - height: 50px; - ` - const PrimaryButton = styled(GenericButton)` - background: blue; - ` - const SecondaryButton = styled(GenericButton)` - background: red; - ` - - // These are each components, capitalized by convention, and can be used within JSX code - // ie: Text - ``` +- Wrappers or layout divs -- Values from `src/theme.ts` are automatically passed as a prop object to styled components +Use the [native layouts components](https://chakra-ui.com/docs/components/box) - ```tsx - // Example of theme.ts usage +```tsx + +``` - import styled from "@emotion/styled" +Center things using the `
` component - const Container = styled.div` - background: ${(props) => props.theme.colors.background}; - @media (max-width: ${(props) => props.theme.breakpoints.s}) { - font-size: #{(props) => props.theme.fontSized.s}; - } - ` - ``` +```tsx +
+``` + +- Group buttons using `` or `` + +```tsx + + + + + +// or + + + + +``` + +- Breakpoints + +Use [the Chakra default breakpoints](https://chakra-ui.com/docs/styled-system/theme#breakpoints). + +```tsx + +``` + +- Theme colors + +```tsx + +``` + +> Note the dotted notation. In Chakra, the values are referred to as "semantic tokens" and the new theme applies a nested structure of like tokens for better organization. See [semanticTokens.ts](../src/%40chakra-ui/gatsby-plugin/semanticTokens.ts) + +> Note 2: all the previous colors defined in the old theme `src/theme.ts` were +> ported into the new theme for compatibility reasons. Those colors will +> transition out of the codebase as we adopt the DS colors. - [Framer Motion](https://www.framer.com/motion/) - An open source and production-ready motion library for React on the web, used for our animated designs - **Emojis**: We use [Twemoji](https://twemoji.twitter.com/), an open-source emoji set created by Twitter. These are hosted by us, and used to provide a consistent experience across operating systems. @@ -154,29 +167,14 @@ import Emoji from "./Emoji" ``` - **Icons**: We use [React Icons](https://react-icons.github.io/react-icons/) - - `src/components/Icon.ts` is the component used to import icons to be used - - If an icon you want to use is not listed you will need to add it to this file - -`src/components/Icon.ts`: - -```tsx -// Example of how to add new icon not listed -import { ZzIconName } from "react-icons/zz" - -// Then add to IconContext.Provider children: -{ - name === "alias" && -} -``` - -From React component: + with [Chakra UI Icon component](https://chakra-ui.com/docs/components/icon/usage) ```tsx -// Example of icon use -import Icon from "./Icon" +import { Icon } from "@chakra-ui/react" +import { BsQuestionSquareFill } from "react-icons/bs" -// Within JSX: -; +// wrap your imported icon with the `Icon` component from Chakra UI +; ``` ## Image loading and API calls using GraphQL diff --git a/docs/chakra-migration-guide.md b/docs/chakra-migration-guide.md deleted file mode 100644 index d8b943119c7..00000000000 --- a/docs/chakra-migration-guide.md +++ /dev/null @@ -1,169 +0,0 @@ -# Chakra migration guide - -This is a reference for migrating our current `styled` components from `emotion` to [Chakra](https://chakra-ui.com/) components. - -This is part of our [UI library implementation epic](https://github.com/ethereum/ethereum-org-website/issues/6374). - -## Replace styled components with Chakra components - -All `styled` components need to be removed and replaced with the corresponded Chakra component. [See the list of components](https://chakra-ui.com/docs/components). - -Use as much native Chakra components as possible. - -### Wrappers or layout divs - -Use the [native layouts components](https://chakra-ui.com/docs/components/box) - -```tsx -// before -const Wrapper = styled.div` - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; -` - -// now - -``` - -Center things using the `
` component - -```tsx -// before -const Center = styled.div` - height: 100px; - display: flex; - justify-content: center; - align-items: center; -` - -// now -
-``` - -Group buttons using `` or `` - -```tsx -// before -const ButtonRow = styled.div` - display: flex; - align-items: center; - flex-wrap: wrap; -` - -// now - - - - - -// or - - - - -``` - -## Override styles using style props - -- You can see how to use the different style props here: [https://chakra-ui.com/docs/styled-system/style-props](https://chakra-ui.com/docs/styled-system/style-props#margin-and-padding) -- Chakra default values are documented here: [https://chakra-ui.com/docs/styled-system/theme](https://chakra-ui.com/docs/styled-system/theme) - -```tsx -// before -const Paragraph = styled.p` - font-size: 1rem; - margin: 1rem; -` - -// now - -``` - -## Breakpoints - -We will use [the Chakra default breakpoints](https://chakra-ui.com/docs/styled-system/theme#breakpoints) from now on. Check the following table to do the conversion: -| old breakpoints | new breakpoints | -|-----------------|-----------------| -| xs | - | -| s | sm | -| m | md | -| l | lg | -| xl | xl | -| - | 2xl | - -```tsx -// before -const Container = styled.div` - display: flex; - @media (max-width: ${(props) => props.theme.breakpoints.s}) { - display: block; - } -` - -// now - -``` - -## Theme colors - -All the previous colors defined in the old theme `src/theme.ts` were ported into the new theme as well. Use the same color variables. - -```tsx -// before -const Text = styled.p` - color: ${({ theme }) => theme.colors.primary}; - background-color: ${({ theme }) => theme.colors.background}; -` - -// now - -``` - -> Note the dotted notation. In Chakra, the values are referred to as "semantic tokens" and the new theme applies a nested structure of like tokens for better organization. See [semanticTokens.ts](../src/%40chakra-ui/gatsby-plugin/semanticTokens.ts) - - - -## Update dependencies - -- [Deprecated] `src/components/Icon` - use the [Chakra Icon](https://chakra-ui.com/docs/components/icon/usage) instead. - -```tsx -import { Icon } from "@chakra-ui/react" -import { BsQuestionSquareFill } from "react-icons/bs" -; -``` - -- [Deprecated]`src/components/SharedStyledComponents` - we are not using this anymore, replace everything with Chakra components. - -```tsx -// before -import { ButtonPrimary, ButtonSecondary } from "../SharedStyledComponents" - -// now -import Button from "../Button" // <-- use the new Button component built with Chakra - -// use our primary button (uses the default `solid` variant) -