Skip to content

Commit

Permalink
feat: add react component display names (#276)
Browse files Browse the repository at this point in the history 
* refactor: fix typo

* feat: add display names to components
  • Loading branch information
@PHILLIPS71
PHILLIPS71 authored Dec 6, 2024
1 parent b0d22c9 commit c10f895
Show file tree
Hide file tree
Showing 75 changed files with 645 additions and 445 deletions.
13 changes: 8 additions & 5 deletions packages/react/src/components/alert/Alert.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,24 +3,25 @@
import type { AlertVariantProps } from '@giantnodes/theme'
import React from 'react'

import type * as Polymophic from '~/utilities/polymorphic'
import type * as Polymorphic from '~/utilities/polymorphic'
import { AlertContext, useAlertValue } from '~/components/alert/use-alert.hook'

const __ELEMENT_TYPE__ = 'div'

type ComponentOwnProps = AlertVariantProps

type ComponentProps<TElement extends React.ElementType = typeof __ELEMENT_TYPE__> = Polymophic.ComponentPropsWithRef<
type ComponentProps<TElement extends React.ElementType = typeof __ELEMENT_TYPE__> = Polymorphic.ComponentPropsWithRef<
TElement,
ComponentOwnProps
>

type ComponentType = <TElement extends React.ElementType = typeof __ELEMENT_TYPE__>(
type ComponentType = (<TElement extends React.ElementType = typeof __ELEMENT_TYPE__>(
props: ComponentProps<TElement>
) => React.ReactNode
) => Polymorphic.ExoticComponentReturn) &
Polymorphic.NamedExoticComponentType

const Component: ComponentType = React.forwardRef<React.ReactElement<ComponentOwnProps>, ComponentOwnProps>(
<TElement extends React.ElementType>(props: ComponentProps<TElement>, ref: Polymophic.Ref<TElement>) => {
<TElement extends React.ElementType>(props: ComponentProps<TElement>, ref: Polymorphic.Ref<TElement>) => {
const { as, children, className, color, ...rest } = props

const Element = as ?? __ELEMENT_TYPE__
Expand All @@ -45,5 +46,7 @@ const Component: ComponentType = React.forwardRef<React.ReactElement<ComponentOw
}
)

Component.displayName = 'Alert.Root'

export type { ComponentOwnProps as AlertOwnProps, ComponentProps as AlertProps }
export default Component
13 changes: 8 additions & 5 deletions packages/react/src/components/alert/AlertBody.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,25 @@

import React from 'react'

import type * as Polymophic from '~/utilities/polymorphic'
import type * as Polymorphic from '~/utilities/polymorphic'
import { useAlert } from '~/components/alert/use-alert.hook'

const __ELEMENT_TYPE__ = 'div'

type ComponentOwnProps = object

type ComponentProps<TElement extends React.ElementType = typeof __ELEMENT_TYPE__> = Polymophic.ComponentPropsWithRef<
type ComponentProps<TElement extends React.ElementType = typeof __ELEMENT_TYPE__> = Polymorphic.ComponentPropsWithRef<
TElement,
ComponentOwnProps
>

type ComponentType = <TElement extends React.ElementType = typeof __ELEMENT_TYPE__>(
type ComponentType = (<TElement extends React.ElementType = typeof __ELEMENT_TYPE__>(
props: ComponentProps<TElement>
) => React.ReactNode
) => Polymorphic.ExoticComponentReturn) &
Polymorphic.NamedExoticComponentType

const Component: ComponentType = React.forwardRef<React.ReactElement<ComponentOwnProps>, ComponentOwnProps>(
<TElement extends React.ElementType>(props: ComponentProps<TElement>, ref: Polymophic.Ref<TElement>) => {
<TElement extends React.ElementType>(props: ComponentProps<TElement>, ref: Polymorphic.Ref<TElement>) => {
const { as, children, className, ...rest } = props

const Element = as ?? __ELEMENT_TYPE__
Expand All @@ -42,5 +43,7 @@ const Component: ComponentType = React.forwardRef<React.ReactElement<ComponentOw
}
)

Component.displayName = 'Alert.Body'

export type { ComponentOwnProps as AlertBodyOwnProps, ComponentProps as AlertBodyProps }
export default Component
13 changes: 8 additions & 5 deletions packages/react/src/components/alert/AlertHeading.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,24 +4,25 @@ import type { HeadingProps } from 'react-aria-components'
import React from 'react'
import { Heading } from 'react-aria-components'

import type * as Polymophic from '~/utilities/polymorphic'
import type * as Polymorphic from '~/utilities/polymorphic'
import { useAlert } from '~/components/alert/use-alert.hook'

const __ELEMENT_TYPE__ = 'h1'

type ComponentOwnProps = HeadingProps

type ComponentProps<TElement extends React.ElementType = typeof __ELEMENT_TYPE__> = Polymophic.ComponentPropsWithRef<
type ComponentProps<TElement extends React.ElementType = typeof __ELEMENT_TYPE__> = Polymorphic.ComponentPropsWithRef<
TElement,
ComponentOwnProps
>

type ComponentType = <TElement extends React.ElementType = typeof __ELEMENT_TYPE__>(
type ComponentType = (<TElement extends React.ElementType = typeof __ELEMENT_TYPE__>(
props: ComponentProps<TElement>
) => React.ReactNode
) => Polymorphic.ExoticComponentReturn) &
Polymorphic.NamedExoticComponentType

const Component: ComponentType = React.forwardRef<React.ReactElement<ComponentOwnProps>, ComponentOwnProps>(
<TElement extends React.ElementType>(props: ComponentProps<TElement>, ref: Polymophic.Ref<TElement>) => {
<TElement extends React.ElementType>(props: ComponentProps<TElement>, ref: Polymorphic.Ref<TElement>) => {
const { as, children, className, level = 3, ...rest } = props

const Element = as ?? Heading
Expand All @@ -45,5 +46,7 @@ const Component: ComponentType = React.forwardRef<React.ReactElement<ComponentOw
}
)

Component.displayName = 'Alert.Heading'

export type { ComponentOwnProps as AlertHeadingOwnProps, ComponentProps as AlertHeadingProps }
export default Component
13 changes: 8 additions & 5 deletions packages/react/src/components/alert/AlertItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,25 @@

import React from 'react'

import type * as Polymophic from '~/utilities/polymorphic'
import type * as Polymorphic from '~/utilities/polymorphic'
import { useAlert } from '~/components/alert/use-alert.hook'

const __ELEMENT_TYPE__ = 'li'

type ComponentOwnProps = object

type ComponentProps<TElement extends React.ElementType = typeof __ELEMENT_TYPE__> = Polymophic.ComponentPropsWithRef<
type ComponentProps<TElement extends React.ElementType = typeof __ELEMENT_TYPE__> = Polymorphic.ComponentPropsWithRef<
TElement,
ComponentOwnProps
>

type ComponentType = <TElement extends React.ElementType = typeof __ELEMENT_TYPE__>(
type ComponentType = (<TElement extends React.ElementType = typeof __ELEMENT_TYPE__>(
props: ComponentProps<TElement>
) => React.ReactNode
) => Polymorphic.ExoticComponentReturn) &
Polymorphic.NamedExoticComponentType

const Component: ComponentType = React.forwardRef<React.ReactElement<ComponentOwnProps>, ComponentOwnProps>(
<TElement extends React.ElementType>(props: ComponentProps<TElement>, ref: Polymophic.Ref<TElement>) => {
<TElement extends React.ElementType>(props: ComponentProps<TElement>, ref: Polymorphic.Ref<TElement>) => {
const { as, children, className, ...rest } = props

const Element = as ?? __ELEMENT_TYPE__
Expand All @@ -42,5 +43,7 @@ const Component: ComponentType = React.forwardRef<React.ReactElement<ComponentOw
}
)

Component.displayName = 'Alert.Item'

export type { ComponentOwnProps as AlertItemOwnProps, ComponentProps as AlertItemProps }
export default Component
13 changes: 8 additions & 5 deletions packages/react/src/components/alert/AlertList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,25 @@

import React from 'react'

import type * as Polymophic from '~/utilities/polymorphic'
import type * as Polymorphic from '~/utilities/polymorphic'
import { useAlert } from '~/components/alert/use-alert.hook'

const __ELEMENT_TYPE__ = 'ul'

type ComponentOwnProps = object

type ComponentProps<TElement extends React.ElementType = typeof __ELEMENT_TYPE__> = Polymophic.ComponentPropsWithRef<
type ComponentProps<TElement extends React.ElementType = typeof __ELEMENT_TYPE__> = Polymorphic.ComponentPropsWithRef<
TElement,
ComponentOwnProps
>

type ComponentType = <TElement extends React.ElementType = typeof __ELEMENT_TYPE__>(
type ComponentType = (<TElement extends React.ElementType = typeof __ELEMENT_TYPE__>(
props: ComponentProps<TElement>
) => React.ReactNode
) => Polymorphic.ExoticComponentReturn) &
Polymorphic.NamedExoticComponentType

const Component: ComponentType = React.forwardRef<React.ReactElement<ComponentOwnProps>, ComponentOwnProps>(
<TElement extends React.ElementType>(props: ComponentProps<TElement>, ref: Polymophic.Ref<TElement>) => {
<TElement extends React.ElementType>(props: ComponentProps<TElement>, ref: Polymorphic.Ref<TElement>) => {
const { as, children, className, ...rest } = props

const Element = as ?? __ELEMENT_TYPE__
Expand All @@ -42,5 +43,7 @@ const Component: ComponentType = React.forwardRef<React.ReactElement<ComponentOw
}
)

Component.displayName = 'Alert.List'

export type { ComponentOwnProps as AlertListOwnProps, ComponentProps as AlertListProps }
export default Component
13 changes: 8 additions & 5 deletions packages/react/src/components/avatar/Avatar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,24 +3,25 @@
import type { AvatarVariantProps } from '@giantnodes/theme'
import React from 'react'

import type * as Polymophic from '~/utilities/polymorphic'
import type * as Polymorphic from '~/utilities/polymorphic'
import { AvatarContext, useAvatar, useAvatarValue } from '~/components/avatar/use-avatar.hook'

const __ELEMENT_TYPE__ = 'span'

type ComponentOwnProps = AvatarVariantProps

type ComponentProps<TElement extends React.ElementType = typeof __ELEMENT_TYPE__> = Polymophic.ComponentPropsWithRef<
type ComponentProps<TElement extends React.ElementType = typeof __ELEMENT_TYPE__> = Polymorphic.ComponentPropsWithRef<
TElement,
ComponentOwnProps
>

type ComponentType = <TElement extends React.ElementType = typeof __ELEMENT_TYPE__>(
type ComponentType = (<TElement extends React.ElementType = typeof __ELEMENT_TYPE__>(
props: ComponentProps<TElement>
) => React.ReactNode
) => Polymorphic.ExoticComponentReturn) &
Polymorphic.NamedExoticComponentType

const Component: ComponentType = React.forwardRef<React.ReactElement<ComponentOwnProps>, ComponentOwnProps>(
<TElement extends React.ElementType>(props: ComponentProps<TElement>, ref: Polymophic.Ref<TElement>) => {
<TElement extends React.ElementType>(props: ComponentProps<TElement>, ref: Polymorphic.Ref<TElement>) => {
const { as, children, className, color, radius, size, zoomed, ...rest } = props

const Element = as ?? __ELEMENT_TYPE__
Expand Down Expand Up @@ -51,5 +52,7 @@ const Component: ComponentType = React.forwardRef<React.ReactElement<ComponentOw
}
)

Component.displayName = 'Avatar.Root'

export type { ComponentOwnProps as AvatarOwnProps, ComponentProps as AvatarProps }
export default Component
13 changes: 8 additions & 5 deletions packages/react/src/components/avatar/AvatarGroup.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,24 +3,25 @@
import type { AvatarVariantProps } from '@giantnodes/theme'
import React from 'react'

import type * as Polymophic from '~/utilities/polymorphic'
import type * as Polymorphic from '~/utilities/polymorphic'
import { AvatarContext, useAvatarValue } from '~/components/avatar/use-avatar.hook'

const __ELEMENT_TYPE__ = 'span'

type ComponentOwnProps = AvatarVariantProps

type ComponentProps<TElement extends React.ElementType = typeof __ELEMENT_TYPE__> = Polymophic.ComponentPropsWithRef<
type ComponentProps<TElement extends React.ElementType = typeof __ELEMENT_TYPE__> = Polymorphic.ComponentPropsWithRef<
TElement,
ComponentOwnProps
>

type ComponentType = <TElement extends React.ElementType = typeof __ELEMENT_TYPE__>(
type ComponentType = (<TElement extends React.ElementType = typeof __ELEMENT_TYPE__>(
props: ComponentProps<TElement>
) => React.ReactNode
) => Polymorphic.ExoticComponentReturn) &
Polymorphic.NamedExoticComponentType

const Component: ComponentType = React.forwardRef<React.ReactElement<ComponentOwnProps>, ComponentOwnProps>(
<TElement extends React.ElementType>(props: ComponentProps<TElement>, ref: Polymophic.Ref<TElement>) => {
<TElement extends React.ElementType>(props: ComponentProps<TElement>, ref: Polymorphic.Ref<TElement>) => {
const { as, children, className, color, radius, size, zoomed, ...rest } = props

const Element = as ?? __ELEMENT_TYPE__
Expand All @@ -45,5 +46,7 @@ const Component: ComponentType = React.forwardRef<React.ReactElement<ComponentOw
}
)

Component.displayName = 'Avatar.Group'

export type { ComponentOwnProps as AvatarGroupOwnProps, ComponentProps as AvatarGroupProps }
export default Component
13 changes: 8 additions & 5 deletions packages/react/src/components/avatar/AvatarIcon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

import React from 'react'

import type * as Polymophic from '~/utilities/polymorphic'
import type * as Polymorphic from '~/utilities/polymorphic'
import { useAvatar } from '~/components/avatar/use-avatar.hook'

const __ELEMENT_TYPE__ = 'span'
Expand All @@ -11,17 +11,18 @@ type ComponentOwnProps = {
icon: React.ReactNode
}

type ComponentProps<TElement extends React.ElementType = typeof __ELEMENT_TYPE__> = Polymophic.ComponentPropsWithRef<
type ComponentProps<TElement extends React.ElementType = typeof __ELEMENT_TYPE__> = Polymorphic.ComponentPropsWithRef<
TElement,
ComponentOwnProps
>

type ComponentType = <TElement extends React.ElementType = typeof __ELEMENT_TYPE__>(
type ComponentType = (<TElement extends React.ElementType = typeof __ELEMENT_TYPE__>(
props: ComponentProps<TElement>
) => React.ReactNode
) => Polymorphic.ExoticComponentReturn) &
Polymorphic.NamedExoticComponentType

const Component: ComponentType = React.forwardRef<React.ReactElement<ComponentOwnProps>, ComponentOwnProps>(
<TElement extends React.ElementType>(props: ComponentProps<TElement>, ref: Polymophic.Ref<TElement>) => {
<TElement extends React.ElementType>(props: ComponentProps<TElement>, ref: Polymorphic.Ref<TElement>) => {
const { as, className, icon, ...rest } = props

const Element = as ?? __ELEMENT_TYPE__
Expand All @@ -44,5 +45,7 @@ const Component: ComponentType = React.forwardRef<React.ReactElement<ComponentOw
}
)

Component.displayName = 'Avatar.Icon'

export type { ComponentOwnProps as AvatarIconOwnProps, ComponentProps as AvatarIconProps }
export default Component
13 changes: 8 additions & 5 deletions packages/react/src/components/avatar/AvatarImage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,25 @@

import React from 'react'

import type * as Polymophic from '~/utilities/polymorphic'
import type * as Polymorphic from '~/utilities/polymorphic'
import { useAvatar } from '~/components/avatar/use-avatar.hook'

const __ELEMENT_TYPE__ = 'img'

type ComponentOwnProps = object

type ComponentProps<TElement extends React.ElementType = typeof __ELEMENT_TYPE__> = Polymophic.ComponentPropsWithRef<
type ComponentProps<TElement extends React.ElementType = typeof __ELEMENT_TYPE__> = Polymorphic.ComponentPropsWithRef<
TElement,
ComponentOwnProps
>

type ComponentType = <TElement extends React.ElementType = typeof __ELEMENT_TYPE__>(
type ComponentType = (<TElement extends React.ElementType = typeof __ELEMENT_TYPE__>(
props: ComponentProps<TElement>
) => React.ReactNode
) => Polymorphic.ExoticComponentReturn) &
Polymorphic.NamedExoticComponentType

const Component: ComponentType = React.forwardRef<React.ReactElement<ComponentOwnProps>, ComponentOwnProps>(
<TElement extends React.ElementType>(props: ComponentProps<TElement>, ref: Polymophic.Ref<TElement>) => {
<TElement extends React.ElementType>(props: ComponentProps<TElement>, ref: Polymorphic.Ref<TElement>) => {
const { as, children, className, ...rest } = props

const Element = as ?? __ELEMENT_TYPE__
Expand All @@ -42,5 +43,7 @@ const Component: ComponentType = React.forwardRef<React.ReactElement<ComponentOw
}
)

Component.displayName = 'Avatar.Image'

export type { ComponentOwnProps as AvatarImageOwnProps, ComponentProps as AvatarImageProps }
export default Component
13 changes: 8 additions & 5 deletions packages/react/src/components/avatar/AvatarNotification.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,24 +3,25 @@
import type { AvatarVariantProps } from '@giantnodes/theme'
import React from 'react'

import type * as Polymophic from '~/utilities/polymorphic'
import type * as Polymorphic from '~/utilities/polymorphic'
import { useAvatar } from '~/components/avatar/use-avatar.hook'

const __ELEMENT_TYPE__ = 'span'

type ComponentOwnProps = Pick<AvatarVariantProps, 'color'>

type ComponentProps<TElement extends React.ElementType = typeof __ELEMENT_TYPE__> = Polymophic.ComponentPropsWithRef<
type ComponentProps<TElement extends React.ElementType = typeof __ELEMENT_TYPE__> = Polymorphic.ComponentPropsWithRef<
TElement,
ComponentOwnProps
>

type ComponentType = <TElement extends React.ElementType = typeof __ELEMENT_TYPE__>(
type ComponentType = (<TElement extends React.ElementType = typeof __ELEMENT_TYPE__>(
props: ComponentProps<TElement>
) => React.ReactNode
) => Polymorphic.ExoticComponentReturn) &
Polymorphic.NamedExoticComponentType

const Component: ComponentType = React.forwardRef<React.ReactElement<ComponentOwnProps>, ComponentOwnProps>(
<TElement extends React.ElementType>(props: ComponentProps<TElement>, ref: Polymophic.Ref<TElement>) => {
<TElement extends React.ElementType>(props: ComponentProps<TElement>, ref: Polymorphic.Ref<TElement>) => {
const { as, children, className, color, ...rest } = props

const Element = as ?? __ELEMENT_TYPE__
Expand All @@ -43,5 +44,7 @@ const Component: ComponentType = React.forwardRef<React.ReactElement<ComponentOw
}
)

Component.displayName = 'Avatar.Notification'

export type { ComponentOwnProps as AvatarNotificationOwnProps, ComponentProps as AvatarNotificationProps }
export default Component
Loading

0 comments on commit c10f895

Please sign in to comment.