refactor: migrate components/Callout.js to ts #6540

byhow · 2022-06-02T06:03:59Z

Description

Migrate Callout.js, which also includes its imports of Translation.js and Emoji.js

Related Issue

#6392

gatsby-cloud · 2022-06-02T06:34:46Z

Gatsby Cloud Build Report

ethereum-org-website-dev

🎉 Your build was successful! See the Deploy preview here.

Build Details

View the build logs here.

🕐 Build time: 28m

Performance

Lighthouse report

Metric	Score
Performance	🔶 19
Accessibility	💚 100
Best Practices	💚 100
SEO	💚 92

🔗 View full report

byhow · 2022-06-03T04:54:21Z

src/components/Emoji.tsx

+  text: string
+}
+
+// const StyledTweomoji: React.FC<Twemoji>

 const StyledEmoji = styled(Twemoji)`
  & > img {


Twemoji's prop has no .size property. In order to pass it in, it seems like it needs to be a way to override its FC signature

You can extend the styled component by doing something like this:

const StyledEmoji = styled(Twemoji)<{ size: number }>` ... `

pettinarip · 2022-06-03T14:54:11Z

src/components/Callout.tsx

@@ -46,7 +46,16 @@ const Content = styled.div`
  height: 100%;
 `

-const Callout = ({
+interface IProps {
+  image: string


Suggested change

image: string

image?: string

Thanks, updated

pettinarip · 2022-06-03T14:58:44Z

src/components/Emoji.tsx

+  text: string
+}
+
+// const StyledTweomoji: React.FC<Twemoji>

 const StyledEmoji = styled(Twemoji)`
  & > img {


You can extend the styled component by doing something like this:

const StyledEmoji = styled(Twemoji)<{ size: number }>` ... `

samajammin · 2022-06-06T18:55:55Z

src/components/Emoji.tsx

+  text: string
+}
+
+// const StyledTweomoji: React.FC<Twemoji>


ah good catch! updated

byhow · 2022-06-07T05:38:05Z

ah, gatsby cloud says I don't have permission to view the failed build. might need someone else to take a preliminary look

pettinarip

Looking good @byhow 💪🏼 left a couple of minor comments there to be done.

pettinarip · 2022-06-07T14:20:06Z

src/components/Emoji.tsx


-const StyledEmoji = styled(Twemoji)`
+interface IProp extends MarginProps {


Suggested change

interface IProp extends MarginProps {

export interface IProps extends MarginProps {

cool, updated

pettinarip · 2022-06-07T14:20:17Z

src/components/Emoji.tsx

@@ -13,7 +18,7 @@ const StyledEmoji = styled(Twemoji)`
  ${margin}
 `

-const Emoji = ({ size = 1.5, text, ...props }) => {
+const Emoji: React.FC<IProp> = ({ size = 1.5, text, ...props }) => {


Suggested change

const Emoji: React.FC<IProp> = ({ size = 1.5, text, ...props }) => {

const Emoji: React.FC<IProps> = ({ size = 1.5, text, ...props }) => {

pettinarip · 2022-06-07T14:22:19Z

src/components/Callout.tsx

@@ -46,7 +46,16 @@ const Content = styled.div`
  height: 100%;
 `

-const Callout = ({
+interface IProps {


Just for convention

Suggested change

interface IProps {

export interface IProps {

base props exported

byhow · 2022-06-08T03:44:07Z

@pettinarip Thanks for the detailed suggestion! Changes are resolved

pettinarip

Great! Thanks @byhow looks good 💪🏼

pettinarip · 2022-06-09T13:57:34Z

@byhow be sure to join the discord if you are interested in contributing further to the project or have any questions for the team. And we've just released our 2022 POAPs so remember to claim yours also 🥳!

pettinarip · 2022-06-09T13:58:07Z

@all-contributors please add @byhow for code

allcontributors · 2022-06-09T13:58:16Z

@pettinarip

I've put up a pull request to add @byhow! 🎉

Mousticke · 2022-06-09T20:28:43Z

@pettinarip @byhow : I am sorry but I noticed that a bit late.
size has a default value of 1.5. But still, it's required by the IProps interface.

→ The size props should be optional if it has a default value

pettinarip · 2022-06-09T21:01:14Z

Good catch @Mousticke! yes, we should fix that 👍🏼

github-actions bot added the review needed 👀 label Jun 2, 2022

byhow added 2 commits June 2, 2022 21:30

refactor: migrate components/translation.js to ts

4efc65e

refactor: migrate components/Callout.js to ts

994c084

byhow force-pushed the ts-migration-components branch from 4cd417d to 994c084 Compare June 3, 2022 04:32

refactor: migrate components/Emoji.js to ts

448293a

byhow commented Jun 3, 2022

View reviewed changes

pettinarip added the typescript-migration label Jun 3, 2022

pettinarip mentioned this pull request Jun 3, 2022

Epic: TypeScript rollout #6392

Closed

pettinarip reviewed Jun 3, 2022

View reviewed changes

pettinarip self-assigned this Jun 3, 2022

byhow marked this pull request as ready for review June 4, 2022 01:54

byhow requested review from samajammin, wackerow, corwintines and minimalsm as code owners June 4, 2022 01:54

byhow requested a review from pettinarip June 4, 2022 22:22

samajammin reviewed Jun 6, 2022

View reviewed changes

Resolve comments to make image optional and add type to twemoji

ff1622e

byhow force-pushed the ts-migration-components branch from 20c42ae to ff1622e Compare June 7, 2022 00:18

byhow requested a review from samajammin June 7, 2022 00:19

pettinarip requested changes Jun 7, 2022

View reviewed changes

refactor: export basic props for emoji and callout

f3f7917

byhow requested a review from pettinarip June 8, 2022 22:47

pettinarip approved these changes Jun 9, 2022

View reviewed changes

pettinarip merged commit ecc7ac3 into ethereum:dev Jun 9, 2022

allcontributors bot mentioned this pull request Jun 9, 2022

docs: add byhow as a contributor for code #6620

Merged

Mousticke mentioned this pull request Jun 9, 2022

TS migrate accordion #6625

Merged

Mousticke mentioned this pull request Jun 9, 2022

[TS Code Style]Emoji component has a required size props #6626

Closed

minimalsm mentioned this pull request Jun 13, 2022

Deploy v4.2.0 #6669

Merged

byhow mentioned this pull request Jun 22, 2022

Missing Translation Types during TypeScript Migration #6767

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor: migrate components/Callout.js to ts #6540

refactor: migrate components/Callout.js to ts #6540

byhow commented Jun 2, 2022

gatsby-cloud bot commented Jun 2, 2022 •

edited

Loading

byhow Jun 3, 2022

pettinarip Jun 3, 2022

pettinarip Jun 3, 2022

byhow Jun 4, 2022

pettinarip Jun 3, 2022

samajammin Jun 6, 2022

byhow Jun 7, 2022

byhow commented Jun 7, 2022

pettinarip left a comment

pettinarip Jun 7, 2022

byhow Jun 8, 2022

pettinarip Jun 7, 2022

byhow Jun 8, 2022

pettinarip Jun 7, 2022

byhow Jun 8, 2022

byhow commented Jun 8, 2022

pettinarip left a comment

pettinarip commented Jun 9, 2022

pettinarip commented Jun 9, 2022

allcontributors bot commented Jun 9, 2022

Mousticke commented Jun 9, 2022

pettinarip commented Jun 9, 2022


		const StyledEmoji = styled(Twemoji)`
		interface IProp extends MarginProps {

	interface IProp extends MarginProps {
	export interface IProps extends MarginProps {

	const Emoji: React.FC<IProp> = ({ size = 1.5, text, ...props }) => {
	const Emoji: React.FC<IProps> = ({ size = 1.5, text, ...props }) => {

refactor: migrate components/Callout.js to ts #6540

refactor: migrate components/Callout.js to ts #6540

Conversation

byhow commented Jun 2, 2022

Description

Related Issue

gatsby-cloud bot commented Jun 2, 2022 • edited Loading

Gatsby Cloud Build Report

Build Details

Performance

Lighthouse report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

byhow commented Jun 7, 2022

pettinarip left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

byhow commented Jun 8, 2022

pettinarip left a comment

Choose a reason for hiding this comment

pettinarip commented Jun 9, 2022

pettinarip commented Jun 9, 2022

allcontributors bot commented Jun 9, 2022

Mousticke commented Jun 9, 2022

pettinarip commented Jun 9, 2022

gatsby-cloud bot commented Jun 2, 2022 •

edited

Loading