Skip to content

Commit

Permalink
Merge pull request #58 from BKWLD/return-reactnode-types
Browse files Browse the repository at this point in the history
Switch to ReactNode return types
  • Loading branch information
weotch authored Nov 20, 2024
2 parents 88fa92c + 8a693f1 commit b5ec182
Show file tree
Hide file tree
Showing 9 changed files with 22 additions and 25 deletions.
3 changes: 2 additions & 1 deletion packages/contentful/src/ContentfulVisual.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,12 @@ import {
hasResponsiveAssets,
hasResponsiveAspects
} from './lib/aspectRatio'
import type { ReactNode } from 'react'

// Render a Visual using Contentful data
export default function ContentfulVisual(
props: ContentfulVisualProps
): JSX.Element | null {
): ReactNode {

// Destructure some props
const {
Expand Down
8 changes: 3 additions & 5 deletions packages/next/src/NextVisual.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,10 @@ import {
} from '@react-visual/react'

import { NextVisualProps } from './types/nextVisualTypes'
import type { ReactNode } from 'react'

// Render a Sanity image via Next/Image
export default function NextVisual(
props: NextVisualProps
): JSX.Element | null {

export default function NextVisual(props: NextVisualProps): ReactNode {
// Destructure props
const {
image,
Expand Down Expand Up @@ -88,7 +86,7 @@ function NextImage({
priority,
loader,
placeholderData,
}: any): JSX.Element {
}: any): ReactNode {
return (
<Image
{ ...{ src, sizes, priority, loader, alt } }
Expand Down
4 changes: 2 additions & 2 deletions packages/react/src/LazyVideo/AccessibilityControls.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { LazyVideoProps } from '../types/lazyVideoTypes'
import type { CSSProperties } from 'react';
import type { CSSProperties, ReactNode } from 'react';
import { PositionOption } from '../types/reactVisualTypes'

// How big to make the button. Can't be too small and still be ADA friendly
Expand Down Expand Up @@ -30,7 +30,7 @@ export default function AccessibilityControls({
pauseIcon,
hideAccessibilityControls,
accessibilityControlsPosition,
}: AccessibilityControlsProps): JSX.Element | null {
}: AccessibilityControlsProps): ReactNode {
// If hidden, return nothing
if (hideAccessibilityControls) return null;

Expand Down
6 changes: 3 additions & 3 deletions packages/react/src/LazyVideo/LazyVideoClient.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@

import { useInView } from 'react-intersection-observer'
import { useMediaQueries } from '@react-hook/media-query'
import { useEffect, useRef, useCallback, type MutableRefObject, useState } from 'react'
import { useEffect, useRef, useCallback, type MutableRefObject, useState, type ReactNode } from 'react'
import type { LazyVideoProps } from '../types/lazyVideoTypes';
import { fillStyles, transparentGif } from '../lib/styles'
import AccessibilityControls from './AccessibilityControls'
Expand Down Expand Up @@ -38,7 +38,7 @@ export default function LazyVideoClient({
pauseIcon,
hideAccessibilityControls,
accessibilityControlsPosition,
}: LazyVideoClientProps): JSX.Element {
}: LazyVideoClientProps): ReactNode {
// Track the actual video playback state. Start in a paused state because
// even with an autoplay video, it won't actually have started playing yet.
const [isVideoPaused, setVideoPaused] = useState(true)
Expand Down Expand Up @@ -174,7 +174,7 @@ export default function LazyVideoClient({
function ResponsiveSource({
mediaSrcs,
videoRef,
}: ResponsiveVideoSourceProps): JSX.Element {
}: ResponsiveVideoSourceProps): ReactNode {
// Find the src url that is currently active
const { matches } = useMediaQueries(mediaSrcs)
const srcUrl = getFirstMatch(matches)
Expand Down
3 changes: 2 additions & 1 deletion packages/react/src/LazyVideo/LazyVideoServer.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import type { ReactNode } from 'react'
import type { LazyVideoProps } from '../types/lazyVideoTypes'
import LazyVideoClient from './LazyVideoClient'

// This wrapper function exists to take Function props and make them
// serializable for the LazyVideoClient component, which is a Next.js style
// client component.
export default function LazyVideo(props: LazyVideoProps): JSX.Element | null {
export default function LazyVideo(props: LazyVideoProps): ReactNode {
// Destructure some props
const {
src,
Expand Down
5 changes: 3 additions & 2 deletions packages/react/src/PictureImage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import type { PictureImageProps } from './types/pictureImageTypes'
import type { ImageLoader, SourceMedia, SourceType } from './types/reactVisualTypes'
import { deviceSizes, imageSizes } from './lib/sizes'
import { makeSourceVariants } from './lib/sources'
import type { ReactNode } from 'react'

type ImageSrc = PictureImageProps['src']
type ImageSourceProps = {
Expand All @@ -13,7 +14,7 @@ type ImageSourceProps = {
media?: SourceMedia
}

export default function PictureImage(props: PictureImageProps): JSX.Element {
export default function PictureImage(props: PictureImageProps): ReactNode {
// Destructure props
const {
src,
Expand Down Expand Up @@ -96,7 +97,7 @@ function Source({
src,
type,
media,
}: ImageSourceProps): JSX.Element {
}: ImageSourceProps): ReactNode {
const srcSet = makeSrcSet(widths, imageLoader, { src, type, media });
return <source {...{ type, media, srcSet, sizes }} />;
}
Expand Down
6 changes: 2 additions & 4 deletions packages/react/src/ReactVisual.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,9 @@ import PictureImage from './PictureImage'
import { collectDataAttributes } from './lib/attributes'
import { ReactVisualProps } from './types/reactVisualTypes'
import { fillStyles } from './lib/styles'
import type { ReactNode } from 'react'

export default function ReactVisual(
props: ReactVisualProps
): JSX.Element | null {

export default function ReactVisual(props: ReactVisualProps): ReactNode {
// Destructure props
const {
image,
Expand Down
6 changes: 3 additions & 3 deletions packages/react/src/VisualWrapper.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import type { CSSProperties } from 'react'
import type { CSSProperties, ReactNode } from 'react'
import { fillStyles, cx } from './lib/styles'
import { isNumeric } from './lib/values'
import type { VisualWrapperProps } from './types/visualWrapperTypes'
Expand All @@ -24,7 +24,7 @@ export default function VisualWrapper({
className,
style,
dataAttributes,
}: VisualWrapperProps): JSX.Element {
}: VisualWrapperProps): ReactNode {
// If aspect is a function, invoke it to determine the aspect ratio
let aspectRatio, aspectStyleTag, aspectClasses
if (typeof aspect == 'function' && sourceMedia && sourceMedia.length) {
Expand Down Expand Up @@ -64,7 +64,7 @@ function makeResponsiveAspects({
video,
}: MakeResponsiveAspectsProps): {
aspectClasses: string;
aspectStyleTag: JSX.Element;
aspectStyleTag: ReactNode;
} {

// Make CSS classes and related rules that are specific to the query and
Expand Down
6 changes: 2 additions & 4 deletions packages/sanity-next/src/SanityNextVisual.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,9 @@ import {
placeholderFromSource,
} from './lib/sourceMapping'
import { SanityNextVisualProps } from './types/sanityNextVisualTypes'
import type { ReactNode } from 'react'

export default function SanityNextVisual(
props: SanityNextVisualProps
): JSX.Element | null {

export default function SanityNextVisual(props: SanityNextVisualProps): ReactNode {
// Destructure some props
let {

Expand Down

0 comments on commit b5ec182

Please sign in to comment.