diff --git a/src/components/design-system/atoms/overlay.tsx b/src/components/design-system/atoms/overlay.tsx index 218989bb7..2692efb0c 100644 --- a/src/components/design-system/atoms/overlay.tsx +++ b/src/components/design-system/atoms/overlay.tsx @@ -1,4 +1,4 @@ -import styled from "styled-components"; +import styled, { TransientProps } from "styled-components"; import { opacity } from "../utils-css/opacity-keyframes"; import { FC } from "react"; import { useLockBodyScroll } from "../hooks/use-lock-body-scroll"; @@ -6,9 +6,12 @@ import { useLockBodyScroll } from "../hooks/use-lock-body-scroll"; export interface OverlayProps { zIndex: number; delay: string; + onClick: () => void; } -const StyledOverlay = styled.div>` +type Props = TransientProps; + +const StyledOverlay = styled.div` position: fixed; top: 0; left: 0; @@ -22,12 +25,15 @@ const StyledOverlay = styled.div>` backdrop-filter: blur(4px); `; -export const Overlay: FC void }> = ({ - zIndex, - onClick, - delay, -}) => { +export const Overlay: FC = ({ zIndex, onClick, delay }) => { useLockBodyScroll(); - return ; + return ( + + ); }; diff --git a/src/components/design-system/molecules/post-card.tsx b/src/components/design-system/molecules/post-card.tsx index f9f72d8eb..c3edc1312 100644 --- a/src/components/design-system/molecules/post-card.tsx +++ b/src/components/design-system/molecules/post-card.tsx @@ -1,4 +1,4 @@ -import styled, { css } from "styled-components"; +import styled, { css, TransientProps } from "styled-components"; import { Paragraph } from "../atoms/paragraph"; import { tracking } from "../../../logic/tracking"; import { GatsbyImage, IGatsbyImageData } from "gatsby-plugin-image"; diff --git a/src/components/design-system/molecules/project.tsx b/src/components/design-system/molecules/project.tsx index 3fec2dc90..042e71264 100644 --- a/src/components/design-system/molecules/project.tsx +++ b/src/components/design-system/molecules/project.tsx @@ -1,6 +1,6 @@ import { FC } from "react"; import { Heading3 } from "../atoms/heading3"; -import styled from "styled-components"; +import styled, { TransientProps } from "styled-components"; import { Container } from "../atoms/container"; import { CallToActionExternalWithTracking } from "../../tracking/call-to-action-external-with-tracking"; import { mediaQuery } from "../utils-css/media-query"; @@ -15,9 +15,9 @@ interface ProjectContainerProps { reverse: boolean; } -const ProjectContainer = styled(Container)< - TransientProps ->` +type Created = TransientProps; + +const ProjectContainer = styled(Container)` display: flex; flex-direction: column; padding: 0; diff --git a/src/components/design-system/molecules/search.tsx b/src/components/design-system/molecules/search.tsx index 72aef200b..25f2439b1 100644 --- a/src/components/design-system/molecules/search.tsx +++ b/src/components/design-system/molecules/search.tsx @@ -1,5 +1,5 @@ import { FC } from "react"; -import styled, { css } from "styled-components"; +import styled, { css, TransientProps } from "styled-components"; import { SearchAlt } from "@styled-icons/boxicons-regular"; import { mediaQuery } from "../utils-css/media-query"; import { Container } from "../atoms/container"; diff --git a/src/components/design-system/molecules/tabs.tsx b/src/components/design-system/molecules/tabs.tsx index 5b4b25a60..e1b0f2da9 100644 --- a/src/components/design-system/molecules/tabs.tsx +++ b/src/components/design-system/molecules/tabs.tsx @@ -1,4 +1,4 @@ -import styled, { css } from "styled-components"; +import styled, { css, TransientProps } from "styled-components"; import { StandardExternalLink } from "../atoms/standard-external-link"; import { trackWith } from "../../../logic/tracking"; import { FC } from "react"; diff --git a/src/components/design-system/molecules/tag.tsx b/src/components/design-system/molecules/tag.tsx index f6cd5eebe..665962db6 100644 --- a/src/components/design-system/molecules/tag.tsx +++ b/src/components/design-system/molecules/tag.tsx @@ -1,4 +1,4 @@ -import styled, { css } from "styled-components"; +import styled, { css, TransientProps } from "styled-components"; import { FC } from "react"; import { StandardInternalLinkWithTracking } from "../../tracking/standard-internal-link-with-tracking"; import { tracking } from "../../../logic/tracking"; diff --git a/src/components/design-system/organism/blog-header.tsx b/src/components/design-system/organism/blog-header.tsx index 486913fbd..990c0530e 100644 --- a/src/components/design-system/organism/blog-header.tsx +++ b/src/components/design-system/organism/blog-header.tsx @@ -1,6 +1,6 @@ import { FC } from "react"; import { StaticImage } from "gatsby-plugin-image"; -import styled from "styled-components"; +import styled, { TransientProps } from "styled-components"; import { mediaQuery } from "../utils-css/media-query"; import { gatsbyImagePlaceholderSelector } from "../utils-css/gatsby-image-selector"; import { backgroundGradients } from "../atoms/gradients"; diff --git a/src/components/design-system/organism/modal-with-image.tsx b/src/components/design-system/organism/modal-with-image.tsx index 6bf103e58..18343116d 100644 --- a/src/components/design-system/organism/modal-with-image.tsx +++ b/src/components/design-system/organism/modal-with-image.tsx @@ -1,4 +1,4 @@ -import styled from "styled-components"; +import styled, { TransientProps } from "styled-components"; import { CallToActionExternal } from "../atoms/call-to-action-external"; import { FC } from "react"; import { opacity } from "../utils-css/opacity-keyframes"; diff --git a/src/components/design-system/styled.d.ts b/src/components/design-system/styled.d.ts index c9990a2ee..0b0dee6a8 100644 --- a/src/components/design-system/styled.d.ts +++ b/src/components/design-system/styled.d.ts @@ -1,4 +1,5 @@ import "styled-components"; +import React, { ComponentProps } from "react"; interface Colors { primaryColor: string; @@ -24,4 +25,23 @@ declare module "styled-components" { spacing: string[]; lineHeight: number; } + + type Stringify = PropName extends string ? PropName : never; + type DomElement = keyof React.JSX.IntrinsicElements | false; + type OmitDomProps< + CustomProps, + Component extends DomElement, + > = Component extends false + ? keyof CustomProps + : keyof Omit>; + + export type TransientProps< + CustomProps, + Component extends DomElement = false, + > = { + [Key in OmitDomProps< + CustomProps, + Component + > as `$${Stringify}`]: CustomProps[Key]; + }; } diff --git a/src/components/design-system/transient-props.d.ts b/src/components/design-system/transient-props.d.ts deleted file mode 100644 index f7a839f35..000000000 --- a/src/components/design-system/transient-props.d.ts +++ /dev/null @@ -1,3 +0,0 @@ -type TransientProps = { - [K in keyof T as `$${K}`]: T[K]; -}; diff --git a/src/gatsby-types.d.ts b/src/gatsby-types.d.ts index 6601b29c9..f4771a09b 100644 --- a/src/gatsby-types.d.ts +++ b/src/gatsby-types.d.ts @@ -1682,7 +1682,6 @@ type Query = { readonly allSiteFunction: SiteFunctionConnection; readonly allSitePage: SitePageConnection; readonly allSitePlugin: SitePluginConnection; - readonly allStaticImage: StaticImageConnection; readonly directory: Maybe; readonly file: Maybe; readonly imageSharp: Maybe; @@ -1692,7 +1691,6 @@ type Query = { readonly siteFunction: Maybe; readonly sitePage: Maybe; readonly sitePlugin: Maybe; - readonly staticImage: Maybe; }; @@ -1768,14 +1766,6 @@ type Query_allSitePluginArgs = { }; -type Query_allStaticImageArgs = { - filter: InputMaybe; - limit: InputMaybe; - skip: InputMaybe; - sort: InputMaybe>>; -}; - - type Query_directoryArgs = { absolutePath: InputMaybe; accessTime: InputMaybe; @@ -1966,46 +1956,6 @@ type Query_sitePluginArgs = { version: InputMaybe; }; - -type Query_staticImageArgs = { - absolutePath: InputMaybe; - accessTime: InputMaybe; - atime: InputMaybe; - atimeMs: InputMaybe; - base: InputMaybe; - birthTime: InputMaybe; - birthtime: InputMaybe; - birthtimeMs: InputMaybe; - blksize: InputMaybe; - blocks: InputMaybe; - changeTime: InputMaybe; - children: InputMaybe; - ctime: InputMaybe; - ctimeMs: InputMaybe; - dev: InputMaybe; - dir: InputMaybe; - ext: InputMaybe; - extension: InputMaybe; - id: InputMaybe; - ino: InputMaybe; - internal: InputMaybe; - mode: InputMaybe; - modifiedTime: InputMaybe; - mtime: InputMaybe; - mtimeMs: InputMaybe; - name: InputMaybe; - nlink: InputMaybe; - parent: InputMaybe; - prettySize: InputMaybe; - rdev: InputMaybe; - relativeDirectory: InputMaybe; - relativePath: InputMaybe; - root: InputMaybe; - size: InputMaybe; - sourceInstanceName: InputMaybe; - uid: InputMaybe; -}; - type Site = Node & { readonly buildTime: Maybe; readonly children: ReadonlyArray; @@ -2856,312 +2806,6 @@ type SortOrderEnum = | 'ASC' | 'DESC'; -type StaticImage = Node & { - readonly absolutePath: Maybe; - readonly accessTime: Maybe; - readonly atime: Maybe; - readonly atimeMs: Maybe; - readonly base: Maybe; - readonly birthTime: Maybe; - readonly birthtime: Maybe; - readonly birthtimeMs: Maybe; - readonly blksize: Maybe; - readonly blocks: Maybe; - readonly changeTime: Maybe; - readonly children: ReadonlyArray; - readonly ctime: Maybe; - readonly ctimeMs: Maybe; - readonly dev: Maybe; - readonly dir: Maybe; - readonly ext: Maybe; - readonly extension: Maybe; - readonly id: Scalars['ID']; - readonly ino: Maybe; - readonly internal: Internal; - readonly mode: Maybe; - readonly modifiedTime: Maybe; - readonly mtime: Maybe; - readonly mtimeMs: Maybe; - readonly name: Maybe; - readonly nlink: Maybe; - readonly parent: Maybe; - readonly prettySize: Maybe; - readonly rdev: Maybe; - readonly relativeDirectory: Maybe; - readonly relativePath: Maybe; - readonly root: Maybe; - readonly size: Maybe; - readonly sourceInstanceName: Maybe; - readonly uid: Maybe; -}; - - -type StaticImage_accessTimeArgs = { - difference: InputMaybe; - formatString: InputMaybe; - fromNow: InputMaybe; - locale: InputMaybe; -}; - - -type StaticImage_atimeArgs = { - difference: InputMaybe; - formatString: InputMaybe; - fromNow: InputMaybe; - locale: InputMaybe; -}; - - -type StaticImage_birthTimeArgs = { - difference: InputMaybe; - formatString: InputMaybe; - fromNow: InputMaybe; - locale: InputMaybe; -}; - - -type StaticImage_birthtimeArgs = { - difference: InputMaybe; - formatString: InputMaybe; - fromNow: InputMaybe; - locale: InputMaybe; -}; - - -type StaticImage_changeTimeArgs = { - difference: InputMaybe; - formatString: InputMaybe; - fromNow: InputMaybe; - locale: InputMaybe; -}; - - -type StaticImage_ctimeArgs = { - difference: InputMaybe; - formatString: InputMaybe; - fromNow: InputMaybe; - locale: InputMaybe; -}; - - -type StaticImage_modifiedTimeArgs = { - difference: InputMaybe; - formatString: InputMaybe; - fromNow: InputMaybe; - locale: InputMaybe; -}; - - -type StaticImage_mtimeArgs = { - difference: InputMaybe; - formatString: InputMaybe; - fromNow: InputMaybe; - locale: InputMaybe; -}; - -type StaticImageConnection = { - readonly distinct: ReadonlyArray; - readonly edges: ReadonlyArray; - readonly group: ReadonlyArray; - readonly max: Maybe; - readonly min: Maybe; - readonly nodes: ReadonlyArray; - readonly pageInfo: PageInfo; - readonly sum: Maybe; - readonly totalCount: Scalars['Int']; -}; - - -type StaticImageConnection_distinctArgs = { - field: StaticImageFieldSelector; -}; - - -type StaticImageConnection_groupArgs = { - field: StaticImageFieldSelector; - limit: InputMaybe; - skip: InputMaybe; -}; - - -type StaticImageConnection_maxArgs = { - field: StaticImageFieldSelector; -}; - - -type StaticImageConnection_minArgs = { - field: StaticImageFieldSelector; -}; - - -type StaticImageConnection_sumArgs = { - field: StaticImageFieldSelector; -}; - -type StaticImageEdge = { - readonly next: Maybe; - readonly node: StaticImage; - readonly previous: Maybe; -}; - -type StaticImageFieldSelector = { - readonly absolutePath: InputMaybe; - readonly accessTime: InputMaybe; - readonly atime: InputMaybe; - readonly atimeMs: InputMaybe; - readonly base: InputMaybe; - readonly birthTime: InputMaybe; - readonly birthtime: InputMaybe; - readonly birthtimeMs: InputMaybe; - readonly blksize: InputMaybe; - readonly blocks: InputMaybe; - readonly changeTime: InputMaybe; - readonly children: InputMaybe; - readonly ctime: InputMaybe; - readonly ctimeMs: InputMaybe; - readonly dev: InputMaybe; - readonly dir: InputMaybe; - readonly ext: InputMaybe; - readonly extension: InputMaybe; - readonly id: InputMaybe; - readonly ino: InputMaybe; - readonly internal: InputMaybe; - readonly mode: InputMaybe; - readonly modifiedTime: InputMaybe; - readonly mtime: InputMaybe; - readonly mtimeMs: InputMaybe; - readonly name: InputMaybe; - readonly nlink: InputMaybe; - readonly parent: InputMaybe; - readonly prettySize: InputMaybe; - readonly rdev: InputMaybe; - readonly relativeDirectory: InputMaybe; - readonly relativePath: InputMaybe; - readonly root: InputMaybe; - readonly size: InputMaybe; - readonly sourceInstanceName: InputMaybe; - readonly uid: InputMaybe; -}; - -type StaticImageFilterInput = { - readonly absolutePath: InputMaybe; - readonly accessTime: InputMaybe; - readonly atime: InputMaybe; - readonly atimeMs: InputMaybe; - readonly base: InputMaybe; - readonly birthTime: InputMaybe; - readonly birthtime: InputMaybe; - readonly birthtimeMs: InputMaybe; - readonly blksize: InputMaybe; - readonly blocks: InputMaybe; - readonly changeTime: InputMaybe; - readonly children: InputMaybe; - readonly ctime: InputMaybe; - readonly ctimeMs: InputMaybe; - readonly dev: InputMaybe; - readonly dir: InputMaybe; - readonly ext: InputMaybe; - readonly extension: InputMaybe; - readonly id: InputMaybe; - readonly ino: InputMaybe; - readonly internal: InputMaybe; - readonly mode: InputMaybe; - readonly modifiedTime: InputMaybe; - readonly mtime: InputMaybe; - readonly mtimeMs: InputMaybe; - readonly name: InputMaybe; - readonly nlink: InputMaybe; - readonly parent: InputMaybe; - readonly prettySize: InputMaybe; - readonly rdev: InputMaybe; - readonly relativeDirectory: InputMaybe; - readonly relativePath: InputMaybe; - readonly root: InputMaybe; - readonly size: InputMaybe; - readonly sourceInstanceName: InputMaybe; - readonly uid: InputMaybe; -}; - -type StaticImageGroupConnection = { - readonly distinct: ReadonlyArray; - readonly edges: ReadonlyArray; - readonly field: Scalars['String']; - readonly fieldValue: Maybe; - readonly group: ReadonlyArray; - readonly max: Maybe; - readonly min: Maybe; - readonly nodes: ReadonlyArray; - readonly pageInfo: PageInfo; - readonly sum: Maybe; - readonly totalCount: Scalars['Int']; -}; - - -type StaticImageGroupConnection_distinctArgs = { - field: StaticImageFieldSelector; -}; - - -type StaticImageGroupConnection_groupArgs = { - field: StaticImageFieldSelector; - limit: InputMaybe; - skip: InputMaybe; -}; - - -type StaticImageGroupConnection_maxArgs = { - field: StaticImageFieldSelector; -}; - - -type StaticImageGroupConnection_minArgs = { - field: StaticImageFieldSelector; -}; - - -type StaticImageGroupConnection_sumArgs = { - field: StaticImageFieldSelector; -}; - -type StaticImageSortInput = { - readonly absolutePath: InputMaybe; - readonly accessTime: InputMaybe; - readonly atime: InputMaybe; - readonly atimeMs: InputMaybe; - readonly base: InputMaybe; - readonly birthTime: InputMaybe; - readonly birthtime: InputMaybe; - readonly birthtimeMs: InputMaybe; - readonly blksize: InputMaybe; - readonly blocks: InputMaybe; - readonly changeTime: InputMaybe; - readonly children: InputMaybe; - readonly ctime: InputMaybe; - readonly ctimeMs: InputMaybe; - readonly dev: InputMaybe; - readonly dir: InputMaybe; - readonly ext: InputMaybe; - readonly extension: InputMaybe; - readonly id: InputMaybe; - readonly ino: InputMaybe; - readonly internal: InputMaybe; - readonly mode: InputMaybe; - readonly modifiedTime: InputMaybe; - readonly mtime: InputMaybe; - readonly mtimeMs: InputMaybe; - readonly name: InputMaybe; - readonly nlink: InputMaybe; - readonly parent: InputMaybe; - readonly prettySize: InputMaybe; - readonly rdev: InputMaybe; - readonly relativeDirectory: InputMaybe; - readonly relativePath: InputMaybe; - readonly root: InputMaybe; - readonly size: InputMaybe; - readonly sourceInstanceName: InputMaybe; - readonly uid: InputMaybe; -}; - type StringQueryOperatorInput = { readonly eq: InputMaybe; readonly glob: InputMaybe;