Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 5 commits into from
Jun 9, 2022
Merged

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

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4efc65e
refactor: migrate components/translation.js to ts
byhow Jun 2, 2022
994c084
refactor: migrate components/Callout.js to ts
byhow Jun 3, 2022
448293a
refactor: migrate components/Emoji.js to ts
byhow Jun 3, 2022
ff1622e
Resolve comments to make `image` optional and add type to twemoji
byhow Jun 4, 2022
f3f7917
refactor: export basic props for emoji and callout
byhow Jun 8, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 12 additions & 3 deletions src/components/Callout.js → src/components/Callout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@ import React from "react"
import styled from "styled-components"
import { GatsbyImage } from "gatsby-plugin-image"
import Translation from "./Translation"

import { TranslationKey } from "../utils/translations"
// Components
import Emoji from "../components/Emoji"
import Emoji from "./Emoji"

const StyledCard = styled.div`
display: flex;
Expand Down Expand Up @@ -46,7 +46,16 @@ const Content = styled.div`
height: 100%;
`

const Callout = ({
interface IProps {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just for convention

Suggested change
interface IProps {
export interface IProps {

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

base props exported

image?: string
emoji?: string
alt?: string
titleKey: TranslationKey
descriptionKey: TranslationKey
className?: string
}

const Callout: React.FC<IProps> = ({
image,
emoji,
alt,
Expand Down
11 changes: 8 additions & 3 deletions src/components/Emoji.js → src/components/Emoji.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,14 @@
import React from "react"
import { Twemoji } from "react-emoji-render"
import styled from "styled-components"
import { margin } from "styled-system"
import { margin, MarginProps } from "styled-system"

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
interface IProp extends MarginProps {
export interface IProps extends MarginProps {

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cool, updated

size: number
text: string
}

const StyledEmoji = styled(Twemoji)<{ size: number }>`
& > img {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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

width: ${(props) => props.size}em !important;
height: ${(props) => props.size}em !important;
Expand All @@ -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 }) => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ditto

return <StyledEmoji size={size} text={text} svg {...props} />
}

Expand Down
4 changes: 2 additions & 2 deletions src/components/Translation.js → src/components/Translation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import React from "react"
import { FormattedHTMLMessage } from "gatsby-plugin-intl"
import { getDefaultMessage } from "../utils/translations"
import { getDefaultMessage, TranslationKey } from "../utils/translations"

// Wrapper on <FormattedMessage /> to always fallback to English
// Use this component for any user-facing string
const Translation = ({ id }) => (
const Translation = ({ id }: { id: TranslationKey }) => (
<FormattedHTMLMessage id={id} defaultMessage={getDefaultMessage(id)} />
)

Expand Down
2 changes: 1 addition & 1 deletion src/utils/translations.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import type { Lang } from "./languages"

import defaultStrings from "../intl/en.json"

type TranslationKey = keyof typeof defaultStrings
export type TranslationKey = keyof typeof defaultStrings

const consoleError = (message: string): void => {
const { NODE_ENV } = process.env
Expand Down