From 4686b17df311a302ca801afd7a10278caf08ff41 Mon Sep 17 00:00:00 2001 From: dusartvict Date: Thu, 2 Jun 2022 23:54:19 +0200 Subject: [PATCH 1/6] Convert DeveloperDocsLinks file --- overrides.d.ts | 5 +++++ .../{DeveloperDocsLinks.js => DeveloperDocsLinks.tsx} | 6 +++++- 2 files changed, 10 insertions(+), 1 deletion(-) rename src/components/{DeveloperDocsLinks.js => DeveloperDocsLinks.tsx} (91%) diff --git a/overrides.d.ts b/overrides.d.ts index e9ad408ce01..25701e488ee 100644 --- a/overrides.d.ts +++ b/overrides.d.ts @@ -2,3 +2,8 @@ // errors. // TODO: create issue in Gatsby repo declare module "gatsby-plugin-image" + +declare module "*.yaml" { + const content: { [key: string]: any } + export default content +} diff --git a/src/components/DeveloperDocsLinks.js b/src/components/DeveloperDocsLinks.tsx similarity index 91% rename from src/components/DeveloperDocsLinks.js rename to src/components/DeveloperDocsLinks.tsx index 874e1b20284..50f66740159 100644 --- a/src/components/DeveloperDocsLinks.js +++ b/src/components/DeveloperDocsLinks.tsx @@ -4,7 +4,11 @@ import Translation from "./Translation" import Link from "./Link" import docLinks from "../data/developer-docs-links.yaml" -const DeveloperDocsLinks = ({ headerId }) => +export interface IProps { + headerId: string +} + +const DeveloperDocsLinks: React.FC = ({ headerId }) => docLinks .filter(({ id }) => id.includes(headerId)) .map(({ items, id }) => ( From 7b6062a229e9192a1cad985c03a0072f4ebaf599 Mon Sep 17 00:00:00 2001 From: dusartvict Date: Fri, 3 Jun 2022 00:00:26 +0200 Subject: [PATCH 2/6] Convert file DataProductCard --- ...DataProductCard.js => DataProductCard.tsx} | 23 +++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) rename src/components/{DataProductCard.js => DataProductCard.tsx} (88%) diff --git a/src/components/DataProductCard.js b/src/components/DataProductCard.tsx similarity index 88% rename from src/components/DataProductCard.js rename to src/components/DataProductCard.tsx index d968d37b171..27b38ad830f 100644 --- a/src/components/DataProductCard.js +++ b/src/components/DataProductCard.tsx @@ -4,12 +4,16 @@ import { GatsbyImage } from "gatsby-plugin-image" import Link from "./Link" +export interface ImageWrapperProps { + background: string +} + const ImageWrapper = styled.div` display: flex; flex-direction: row; justify-content: center; align-items: center; - background: ${(props) => props.background}; + background: ${(props: ImageWrapperProps) => props.background}; box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.1); min-height: 200px; ` @@ -93,7 +97,22 @@ const Logo = styled(GatsbyImage)` margin-right: 0.5rem; ` -const DataProductCard = ({ +export interface DataRow { + logo: string + coin: string + apy: string +} + +export interface IProps { + url: string + background: string + image: string + name: string + description: string + data: DataRow[] +} + +const DataProductCard: React.FC = ({ url, background, image, From ec911c2045b56b309e492fbffbcd68d1dc15584a Mon Sep 17 00:00:00 2001 From: dusartvict Date: Fri, 3 Jun 2022 00:15:13 +0200 Subject: [PATCH 3/6] Export props of Icon file --- src/components/Icon.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx index 29c1a5596da..a49c41fa2db 100644 --- a/src/components/Icon.tsx +++ b/src/components/Icon.tsx @@ -36,7 +36,7 @@ const socialColors = { stackExchange: "#48a2da", } -interface IProps { +export interface IProps { name?: string color?: string size?: string From 4c6d3597c25965130f0c740b055979adf91b17db Mon Sep 17 00:00:00 2001 From: dusartvict Date: Fri, 3 Jun 2022 00:15:52 +0200 Subject: [PATCH 4/6] Convert DocsNav file --- src/components/{DocsNav.js => DocsNav.tsx} | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) rename src/components/{DocsNav.js => DocsNav.tsx} (94%) diff --git a/src/components/DocsNav.js b/src/components/DocsNav.tsx similarity index 94% rename from src/components/DocsNav.js rename to src/components/DocsNav.tsx index 8a3527bd06f..ae8b2d8a3e2 100644 --- a/src/components/DocsNav.js +++ b/src/components/DocsNav.tsx @@ -78,9 +78,18 @@ const UppercaseSpan = styled.span` text-transform: uppercase; ` -const DocsNav = ({ relativePath }) => { +export interface DocsArrayProps { + to: string + id: string +} + +export interface IProps { + relativePath: string +} + +const DocsNav: React.FC = ({ relativePath }) => { // Construct array of all linkable documents in order recursively - const docsArray = [] + const docsArray: DocsArrayProps[] = [] const getDocs = (links) => { for (let item of links) { // If object has 'items' key From c01ba850bb11ccfde9cd4fbc220e6ebb876c46fe Mon Sep 17 00:00:00 2001 From: dusartvict Date: Fri, 3 Jun 2022 00:22:53 +0200 Subject: [PATCH 5/6] Convert DismissibleCard file --- .../{DismissibleCard.js => DismissibleCard.tsx} | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) rename src/components/{DismissibleCard.js => DismissibleCard.tsx} (78%) diff --git a/src/components/DismissibleCard.js b/src/components/DismissibleCard.tsx similarity index 78% rename from src/components/DismissibleCard.js rename to src/components/DismissibleCard.tsx index f1511c69907..87a9dc9fe44 100644 --- a/src/components/DismissibleCard.js +++ b/src/components/DismissibleCard.tsx @@ -3,8 +3,12 @@ import styled from "styled-components" import Icon from "./Icon" +export interface CardProps { + shouldShow: boolean +} + const Card = styled.div` - display: ${(props) => (props.shouldShow ? `block` : `none`)}; + display: ${(props: CardProps) => (props.shouldShow ? `block` : `none`)}; position: relative; background: ${(props) => props.theme.colors.warning}; padding: 1.5rem; @@ -26,7 +30,12 @@ const CloseIconContainer = styled.span` } ` -const DismissibleCard = ({ children, storageKey }) => { +export interface IProps { + children: string + storageKey: string +} + +const DismissibleCard: React.FC = ({ children, storageKey }) => { const [shouldShow, setshouldShow] = useState(false) useEffect(() => { @@ -39,7 +48,7 @@ const DismissibleCard = ({ children, storageKey }) => { const handleClose = () => { if (localStorage) { - localStorage.setItem(storageKey, true) + localStorage.setItem(storageKey, "true") } setshouldShow(false) } From d75b56206e10934b8884cdd71af66de010cf8689 Mon Sep 17 00:00:00 2001 From: dusartvict Date: Fri, 3 Jun 2022 23:37:28 +0200 Subject: [PATCH 6/6] Correction of all comments --- overrides.d.ts | 11 ++++- src/components/DataProductCard.tsx | 12 ++--- src/components/DeveloperDocsLinks.tsx | 67 ++++++++++++++------------- src/components/DismissibleCard.tsx | 9 ++-- src/components/DocsNav.tsx | 4 +- 5 files changed, 54 insertions(+), 49 deletions(-) diff --git a/overrides.d.ts b/overrides.d.ts index 25701e488ee..66dc3c86ee9 100644 --- a/overrides.d.ts +++ b/overrides.d.ts @@ -3,7 +3,14 @@ // TODO: create issue in Gatsby repo declare module "gatsby-plugin-image" -declare module "*.yaml" { - const content: { [key: string]: any } +declare module "*developer-docs-links.yaml" { + export interface DeveloperDocsLink { + id: string + to: string + path: string + description: string + items: Array + } + const content: Array export default content } diff --git a/src/components/DataProductCard.tsx b/src/components/DataProductCard.tsx index 27b38ad830f..e81985128c1 100644 --- a/src/components/DataProductCard.tsx +++ b/src/components/DataProductCard.tsx @@ -4,16 +4,14 @@ import { GatsbyImage } from "gatsby-plugin-image" import Link from "./Link" -export interface ImageWrapperProps { +const ImageWrapper = styled.div<{ background: string -} - -const ImageWrapper = styled.div` +}>` display: flex; flex-direction: row; justify-content: center; align-items: center; - background: ${(props: ImageWrapperProps) => props.background}; + background: ${(props) => props.background}; box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.1); min-height: 200px; ` @@ -108,8 +106,8 @@ export interface IProps { background: string image: string name: string - description: string - data: DataRow[] + description?: string + data?: Array } const DataProductCard: React.FC = ({ diff --git a/src/components/DeveloperDocsLinks.tsx b/src/components/DeveloperDocsLinks.tsx index 50f66740159..497ff5649ab 100644 --- a/src/components/DeveloperDocsLinks.tsx +++ b/src/components/DeveloperDocsLinks.tsx @@ -8,38 +8,41 @@ export interface IProps { headerId: string } -const DeveloperDocsLinks: React.FC = ({ headerId }) => - docLinks - .filter(({ id }) => id.includes(headerId)) - .map(({ items, id }) => ( -
    - {items && - items.map(({ id, to, path, description, items }) => ( - - {to || path ? ( - +const DeveloperDocsLinks: React.FC = ({ headerId }) => ( + + {docLinks + .filter(({ id }) => id.includes(headerId)) + .map(({ items, id }) => ( +
      + {items && + items.map(({ id, to, path, description, items }) => ( + + {to || path ? ( + + + + ) : ( - - ) : ( - - )} - - {" – "} - - -
        - {items && - items.map(({ id, to, path }) => ( - - - - - - ))} -
      -       - ))} -
    - )) + )} + + {" – "} + + +
      + {items && + items.map(({ id, to, path }) => ( + + + + + + ))} +
    +     + ))} +
+ ))} + +) export default DeveloperDocsLinks diff --git a/src/components/DismissibleCard.tsx b/src/components/DismissibleCard.tsx index 87a9dc9fe44..d4e3412e529 100644 --- a/src/components/DismissibleCard.tsx +++ b/src/components/DismissibleCard.tsx @@ -3,12 +3,10 @@ import styled from "styled-components" import Icon from "./Icon" -export interface CardProps { +const Card = styled.div<{ shouldShow: boolean -} - -const Card = styled.div` - display: ${(props: CardProps) => (props.shouldShow ? `block` : `none`)}; +}>` + display: ${(props) => (props.shouldShow ? `block` : `none`)}; position: relative; background: ${(props) => props.theme.colors.warning}; padding: 1.5rem; @@ -31,7 +29,6 @@ const CloseIconContainer = styled.span` ` export interface IProps { - children: string storageKey: string } diff --git a/src/components/DocsNav.tsx b/src/components/DocsNav.tsx index ae8b2d8a3e2..999af80a6ac 100644 --- a/src/components/DocsNav.tsx +++ b/src/components/DocsNav.tsx @@ -5,7 +5,7 @@ import Link from "./Link" import Emoji from "./Emoji" import Translation from "./Translation" -import docLinks from "../data/developer-docs-links.yaml" +import docLinks, { DeveloperDocsLink } from "../data/developer-docs-links.yaml" const Container = styled.div` display: flex; @@ -90,7 +90,7 @@ export interface IProps { const DocsNav: React.FC = ({ relativePath }) => { // Construct array of all linkable documents in order recursively const docsArray: DocsArrayProps[] = [] - const getDocs = (links) => { + const getDocs = (links: Array): void => { for (let item of links) { // If object has 'items' key if (item.items) {