Refactor: Migrate ProductCard to Chakra
#8685
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -5,118 +5,17 @@ import { useQuery, gql } from "@apollo/client" | |
|
|
||
| import GitStars from "./GitStars" | ||
| import ButtonLink from "./ButtonLink" | ||
| import { | ||
| Box, | ||
| Center, | ||
| Flex, | ||
| Heading, | ||
| HStack, | ||
| Image, | ||
| Img, | ||
| Text, | ||
| TextProps, | ||
| } from "@chakra-ui/react" | ||
|
|
||
| const REPO_DATA = gql` | ||
| query RepoData( | ||
|
|
@@ -139,6 +38,53 @@ const REPO_DATA = gql` | |
| } | ||
| ` | ||
|
|
||
| const SubjectPill: React.FC<{ subject: string; children: ReactNode }> = ({ | ||
| subject, | ||
| children, | ||
| }) => { | ||
| const bgColor = () => { | ||
| switch (subject) { | ||
| case "Solidity": | ||
| return "tagYellow" | ||
| case "Vyper": | ||
| return "tagBlue" | ||
| case "web3": | ||
| return "tagTurquoise" | ||
| case "JavaScript": | ||
| return "tagRed" | ||
| case "TypeScript": | ||
| return "tagBlue" | ||
| case "Go": | ||
| return "tagTurquoise" | ||
| case "Python": | ||
| return "tagMint" | ||
| case "Rust": | ||
| return "tagOrange" | ||
| case "C#": | ||
| return "tagBlue" | ||
| case "Java": | ||
| return "tagPink" | ||
| default: | ||
| return "tagGray" | ||
| } | ||
| } | ||
| return ( | ||
| <Box | ||
|
There was a problem hiding this comment. These should be Badges in the upcoming refactor, right? There was a problem hiding this comment. @pettinarip Yes! I have made a note in #8601 |
||
| background={bgColor()} | ||
| border="1px" | ||
| borderColor="lightBorder" | ||
| borderRadius="base" | ||
| color="black300" | ||
| fontSize="xs" | ||
| textAlign="center" | ||
| px={2} | ||
| mb={2} | ||
| > | ||
| {children} | ||
| </Box> | ||
| ) | ||
| } | ||
|
|
||
| export interface IProps { | ||
| children?: React.ReactNode | ||
| url: string | ||
|
|
@@ -156,7 +102,7 @@ export interface IProps { | |
|
|
||
| const ProductCard: React.FC<IProps> = ({ | ||
|
There was a problem hiding this comment. There is a TODO regarding adding loading state. What is the desired loading visual? There was a problem hiding this comment. Hmm not sure 😆 wouldn't worry too much since that comment is 20 months old and probably we are going to refactor this with the DS. |
||
| url, | ||
| background: bgProp, | ||
| image, | ||
| name, | ||
| description, | ||
|
|
@@ -186,46 +132,86 @@ const ProductCard: React.FC<IProps> = ({ | |
|
|
||
| const isImgSrc = typeof image === "string" | ||
|
|
||
| const DESCRIPTION_STYLES: TextProps = { | ||
| opacity: 0.8, | ||
| fontSize: "sm", | ||
| mb: 2, | ||
| lineHeight: "140%", | ||
| } | ||
|
|
||
| return ( | ||
| <Flex | ||
| flexDirection="column" | ||
| justifyContent="space-between" | ||
| color="text" | ||
| background="searchBackground" | ||
| boxShadow="0px 14px 66px rgba(0, 0, 0, 0.07)" | ||
| borderRadius="base" | ||
| border="1px" | ||
| borderColor="lightBorder" | ||
| textDecoration="none" | ||
| _hover={{ | ||
| transition: "transform 0.1s", | ||
| transform: "scale(1.02)", | ||
| }} | ||
| > | ||
| <Center | ||
| background={bgProp} | ||
| boxShadow="inset 0px -1px 0px rgba(0, 0, 0, 0.1)" | ||
| minH="200px" | ||
| > | ||
| {isImgSrc ? ( | ||
| <img src={image} alt={alt} /> | ||
| ) : ( | ||
| <Img | ||
| as={GatsbyImage} | ||
| image={image} | ||
| alt={alt} | ||
| objectFit="contain" | ||
| width="100%" | ||
| alignSelf="center" | ||
| maxW={{ base: "311px", sm: "372px" }} | ||
| maxH="257px" | ||
| /> | ||
| )} | ||
| </Center> | ||
| <Flex flexDirection="column" p={6} textAlign="left" height="100%"> | ||
| {hasRepoData && ( | ||
| <GitStars gitHubRepo={data.repository} hideStars={hideStars} /> | ||
| )} | ||
| <Heading | ||
| as="h3" | ||
| fontSize="2xl" | ||
| fontWeight={600} | ||
| mt={!hasRepoData ? 8 : 12} | ||
| mb={3} | ||
| > | ||
| {name} | ||
| </Heading> | ||
| {description && <Text {...DESCRIPTION_STYLES}>{description}</Text>} | ||
| {note.length > 0 && <Text {...DESCRIPTION_STYLES}>Note: {note}</Text>} | ||
| {children && <Box mt={4}>{children}</Box>} | ||
| </Flex> | ||
| <HStack mt={5} px={6} spacing={3}> | ||
| {subjects && | ||
| subjects.map((subject, idx) => ( | ||
| <SubjectPill key={idx} subject={subject}> | ||
| {subject} | ||
| </SubjectPill> | ||
| ))} | ||
| {hasRepoData && | ||
| data.repository.language.nodes.map( | ||
|
There was a problem hiding this comment. Wondering why this has changed 🤔 Currently I see an error breaking some pages. These two pages are loading but breaking after a second: |
||
| ({ name }: { name: string }, idx: number) => ( | ||
| <SubjectPill key={idx} subject={name}> | ||
| {name.toUpperCase()} | ||
| </SubjectPill> | ||
| ) | ||
| )} | ||
| </HStack> | ||
| <ButtonLink to={url} m={4} height={20}> | ||
| Open {name} | ||
| </ButtonLink> | ||
| </Flex> | ||
| ) | ||
| } | ||
|
|
||
|
|
||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
import order
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@pettinarip curious to know if ESLint has ever been considered with a config that includes
import/orderto enforce a specific order of the different import types?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
That would be a useful addition, yes. Hasn't been discussed/considered before AFAIK.