From 4efc65ed19d34069c350fd6c61d0462f1b573470 Mon Sep 17 00:00:00 2001 From: byhow Date: Wed, 1 Jun 2022 23:01:03 -0700 Subject: [PATCH 1/5] refactor: migrate components/translation.js to ts --- src/components/{Translation.js => Translation.tsx} | 4 ++-- src/utils/translations.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) rename src/components/{Translation.js => Translation.tsx} (69%) diff --git a/src/components/Translation.js b/src/components/Translation.tsx similarity index 69% rename from src/components/Translation.js rename to src/components/Translation.tsx index ccbb7ac3184..197af4a672f 100644 --- a/src/components/Translation.js +++ b/src/components/Translation.tsx @@ -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 to always fallback to English // Use this component for any user-facing string -const Translation = ({ id }) => ( +const Translation = ({ id }: { id: TranslationKey }) => ( ) diff --git a/src/utils/translations.ts b/src/utils/translations.ts index ad9eb480c45..76c063cdfdf 100644 --- a/src/utils/translations.ts +++ b/src/utils/translations.ts @@ -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 From 994c08418ffd0aae30bed5dca567cdc5f7e486ad Mon Sep 17 00:00:00 2001 From: byhow Date: Thu, 2 Jun 2022 21:31:55 -0700 Subject: [PATCH 2/5] refactor: migrate components/Callout.js to ts --- src/components/{Callout.js => Callout.tsx} | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) rename src/components/{Callout.js => Callout.tsx} (84%) diff --git a/src/components/Callout.js b/src/components/Callout.tsx similarity index 84% rename from src/components/Callout.js rename to src/components/Callout.tsx index d1be9254fec..eb2f6ad1679 100644 --- a/src/components/Callout.js +++ b/src/components/Callout.tsx @@ -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; @@ -46,7 +46,16 @@ const Content = styled.div` height: 100%; ` -const Callout = ({ +interface IProps { + image: string + emoji?: string + alt?: string + titleKey: TranslationKey + descriptionKey: TranslationKey + className?: string +} + +const Callout: React.FC = ({ image, emoji, alt, From 448293aa3ab8e2600bfa11212de16fc9b7601b1a Mon Sep 17 00:00:00 2001 From: byhow Date: Thu, 2 Jun 2022 21:32:41 -0700 Subject: [PATCH 3/5] refactor: migrate components/Emoji.js to ts --- src/components/{Emoji.js => Emoji.tsx} | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) rename src/components/{Emoji.js => Emoji.tsx} (68%) diff --git a/src/components/Emoji.js b/src/components/Emoji.tsx similarity index 68% rename from src/components/Emoji.js rename to src/components/Emoji.tsx index d437a2bb5c1..10adc39eae7 100644 --- a/src/components/Emoji.js +++ b/src/components/Emoji.tsx @@ -1,7 +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" + +interface IProp extends MarginProps { + size: number + text: string +} + +// const StyledTweomoji: React.FC const StyledEmoji = styled(Twemoji)` & > img { @@ -13,7 +20,7 @@ const StyledEmoji = styled(Twemoji)` ${margin} ` -const Emoji = ({ size = 1.5, text, ...props }) => { +const Emoji: React.FC = ({ size = 1.5, text, ...props }) => { return } From ff1622e1a77c020ea723698dbc0da25d3cd18c71 Mon Sep 17 00:00:00 2001 From: byhow Date: Fri, 3 Jun 2022 18:25:59 -0700 Subject: [PATCH 4/5] Resolve comments to make `image` optional and add type to twemoji --- src/components/Callout.tsx | 2 +- src/components/Emoji.tsx | 4 +--- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/Callout.tsx b/src/components/Callout.tsx index eb2f6ad1679..e0036551dc0 100644 --- a/src/components/Callout.tsx +++ b/src/components/Callout.tsx @@ -47,7 +47,7 @@ const Content = styled.div` ` interface IProps { - image: string + image?: string emoji?: string alt?: string titleKey: TranslationKey diff --git a/src/components/Emoji.tsx b/src/components/Emoji.tsx index 10adc39eae7..8fef9cb94fd 100644 --- a/src/components/Emoji.tsx +++ b/src/components/Emoji.tsx @@ -8,9 +8,7 @@ interface IProp extends MarginProps { text: string } -// const StyledTweomoji: React.FC - -const StyledEmoji = styled(Twemoji)` +const StyledEmoji = styled(Twemoji)<{ size: number }>` & > img { width: ${(props) => props.size}em !important; height: ${(props) => props.size}em !important; From f3f7917f17bebd172c4687b9676b86f2fad755f0 Mon Sep 17 00:00:00 2001 From: byhow Date: Tue, 7 Jun 2022 20:41:06 -0700 Subject: [PATCH 5/5] refactor: export basic props for emoji and callout --- src/components/Callout.tsx | 2 +- src/components/Emoji.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Callout.tsx b/src/components/Callout.tsx index e0036551dc0..1831d1cd56d 100644 --- a/src/components/Callout.tsx +++ b/src/components/Callout.tsx @@ -46,7 +46,7 @@ const Content = styled.div` height: 100%; ` -interface IProps { +export interface IProps { image?: string emoji?: string alt?: string diff --git a/src/components/Emoji.tsx b/src/components/Emoji.tsx index 8fef9cb94fd..6f3e93c7600 100644 --- a/src/components/Emoji.tsx +++ b/src/components/Emoji.tsx @@ -3,7 +3,7 @@ import { Twemoji } from "react-emoji-render" import styled from "styled-components" import { margin, MarginProps } from "styled-system" -interface IProp extends MarginProps { +export interface IProps extends MarginProps { size: number text: string } @@ -18,7 +18,7 @@ const StyledEmoji = styled(Twemoji)<{ size: number }>` ${margin} ` -const Emoji: React.FC = ({ size = 1.5, text, ...props }) => { +const Emoji: React.FC = ({ size = 1.5, text, ...props }) => { return }