Skip to content

Commit

Permalink
fix: export own and element props separately (#76)
Browse files Browse the repository at this point in the history
* fix: export own and element props separately

* fix: additional find and replace T to TElement edits
PHILLIPS71 authored May 4, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
1 parent 05a9966 commit f6f02ef
Showing 80 changed files with 709 additions and 402 deletions.
16 changes: 11 additions & 5 deletions packages/react/src/components/alert/Alert.tsx
Original file line number Diff line number Diff line change
@@ -13,14 +13,20 @@ const __ELEMENT_TYPE__ = 'div'

type ComponentOwnProps = AlertVariantProps

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

type ComponentType = <T extends React.ElementType = typeof __ELEMENT_TYPE__>(
props: ComponentProps<T>
type ComponentType = <TElement extends React.ElementType = typeof __ELEMENT_TYPE__>(
props: ComponentProps<TElement>
) => React.ReactNode

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

const Element = as ?? __ELEMENT_TYPE__
@@ -45,7 +51,7 @@ const Component: ComponentType = React.forwardRef(
}
)

export type { ComponentOwnProps as AlertProps }
export type { ComponentOwnProps as AlertOwnProps, ComponentProps as AlertProps }
export default Object.assign(Component, {
Body: AlertBody,
Heading: AlertHeading,
16 changes: 11 additions & 5 deletions packages/react/src/components/alert/AlertBody.tsx
Original file line number Diff line number Diff line change
@@ -8,14 +8,20 @@ const __ELEMENT_TYPE__ = 'div'

type ComponentOwnProps = {}

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

type ComponentType = <T extends React.ElementType = typeof __ELEMENT_TYPE__>(
props: ComponentProps<T>
type ComponentType = <TElement extends React.ElementType = typeof __ELEMENT_TYPE__>(
props: ComponentProps<TElement>
) => React.ReactNode

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

const Element = as ?? __ELEMENT_TYPE__
@@ -38,5 +44,5 @@ const Component: ComponentType = React.forwardRef(
}
)

export type { ComponentOwnProps as AlertBodyProps }
export type { ComponentOwnProps as AlertBodyOwnProps, ComponentProps as AlertBodyProps }
export default Component
16 changes: 11 additions & 5 deletions packages/react/src/components/alert/AlertHeading.tsx
Original file line number Diff line number Diff line change
@@ -10,14 +10,20 @@ const __ELEMENT_TYPE__ = 'h1'

type ComponentOwnProps = HeadingProps

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

type ComponentType = <T extends React.ElementType = typeof __ELEMENT_TYPE__>(
props: ComponentProps<T>
type ComponentType = <TElement extends React.ElementType = typeof __ELEMENT_TYPE__>(
props: ComponentProps<TElement>
) => React.ReactNode

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

const Element = as ?? Heading
@@ -41,5 +47,5 @@ const Component: ComponentType = React.forwardRef(
}
)

export type { ComponentOwnProps as AlertHeadingProps }
export type { ComponentOwnProps as AlertHeadingOwnProps, ComponentProps as AlertHeadingProps }
export default Component
16 changes: 11 additions & 5 deletions packages/react/src/components/alert/AlertItem.tsx
Original file line number Diff line number Diff line change
@@ -8,14 +8,20 @@ const __ELEMENT_TYPE__ = 'li'

type ComponentOwnProps = {}

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

type ComponentType = <T extends React.ElementType = typeof __ELEMENT_TYPE__>(
props: ComponentProps<T>
type ComponentType = <TElement extends React.ElementType = typeof __ELEMENT_TYPE__>(
props: ComponentProps<TElement>
) => React.ReactNode

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

const Element = as ?? __ELEMENT_TYPE__
@@ -38,5 +44,5 @@ const Component: ComponentType = React.forwardRef(
}
)

export type { ComponentOwnProps as AlertItemProps }
export type { ComponentOwnProps as AlertItemOwnProps, ComponentProps as AlertItemProps }
export default Component
16 changes: 11 additions & 5 deletions packages/react/src/components/alert/AlertList.tsx
Original file line number Diff line number Diff line change
@@ -8,14 +8,20 @@ const __ELEMENT_TYPE__ = 'ul'

type ComponentOwnProps = {}

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

type ComponentType = <T extends React.ElementType = typeof __ELEMENT_TYPE__>(
props: ComponentProps<T>
type ComponentType = <TElement extends React.ElementType = typeof __ELEMENT_TYPE__>(
props: ComponentProps<TElement>
) => React.ReactNode

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

const Element = as ?? __ELEMENT_TYPE__
@@ -38,5 +44,5 @@ const Component: ComponentType = React.forwardRef(
}
)

export type { ComponentOwnProps as AlertListProps }
export type { ComponentOwnProps as AlertListOwnProps, ComponentProps as AlertListProps }
export default Component
10 changes: 5 additions & 5 deletions packages/react/src/components/alert/index.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
export type { AlertProps } from '@/components/alert/Alert'
export type { AlertBodyProps } from '@/components/alert/AlertBody'
export type { AlertHeadingProps } from '@/components/alert/AlertHeading'
export type { AlertItemProps } from '@/components/alert/AlertItem'
export type { AlertListProps } from '@/components/alert/AlertList'
export type * from '@/components/alert/Alert'
export type * from '@/components/alert/AlertBody'
export type * from '@/components/alert/AlertHeading'
export type * from '@/components/alert/AlertItem'
export type * from '@/components/alert/AlertList'

export { default as Alert } from '@/components/alert/Alert'
16 changes: 11 additions & 5 deletions packages/react/src/components/avatar/Avatar.tsx
Original file line number Diff line number Diff line change
@@ -13,14 +13,20 @@ const __ELEMENT_TYPE__ = 'span'

type ComponentOwnProps = AvatarVariantProps

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

type ComponentType = <T extends React.ElementType = typeof __ELEMENT_TYPE__>(
props: ComponentProps<T>
type ComponentType = <TElement extends React.ElementType = typeof __ELEMENT_TYPE__>(
props: ComponentProps<TElement>
) => React.ReactNode

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

const Element = as ?? __ELEMENT_TYPE__
@@ -51,7 +57,7 @@ const Component: ComponentType = React.forwardRef(
}
)

export type { ComponentOwnProps as AvatarProps }
export type { ComponentOwnProps as AvatarOwnProps, ComponentProps as AvatarProps }
export default Object.assign(Component, {
Group: AvatarGroup,
Image: AvatarImage,
16 changes: 11 additions & 5 deletions packages/react/src/components/avatar/AvatarGroup.tsx
Original file line number Diff line number Diff line change
@@ -9,14 +9,20 @@ const __ELEMENT_TYPE__ = 'span'

type ComponentOwnProps = AvatarVariantProps

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

type ComponentType = <T extends React.ElementType = typeof __ELEMENT_TYPE__>(
props: ComponentProps<T>
type ComponentType = <TElement extends React.ElementType = typeof __ELEMENT_TYPE__>(
props: ComponentProps<TElement>
) => React.ReactNode

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

const Element = as ?? __ELEMENT_TYPE__
@@ -41,5 +47,5 @@ const Component: ComponentType = React.forwardRef(
}
)

export type { ComponentOwnProps as AvatarGroupProps }
export type { ComponentOwnProps as AvatarGroupOwnProps, ComponentProps as AvatarGroupProps }
export default Component
16 changes: 11 additions & 5 deletions packages/react/src/components/avatar/AvatarIcon.tsx
Original file line number Diff line number Diff line change
@@ -10,14 +10,20 @@ type ComponentOwnProps = {
icon: React.ReactNode
}

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

type ComponentType = <T extends React.ElementType = typeof __ELEMENT_TYPE__>(
props: ComponentProps<T>
type ComponentType = <TElement extends React.ElementType = typeof __ELEMENT_TYPE__>(
props: ComponentProps<TElement>
) => React.ReactNode

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

const Element = as ?? __ELEMENT_TYPE__
@@ -40,5 +46,5 @@ const Component: ComponentType = React.forwardRef(
}
)

export type { ComponentOwnProps as AvatarIconProps }
export type { ComponentOwnProps as AvatarIconOwnProps, ComponentProps as AvatarIconProps }
export default Component
16 changes: 11 additions & 5 deletions packages/react/src/components/avatar/AvatarImage.tsx
Original file line number Diff line number Diff line change
@@ -8,14 +8,20 @@ const __ELEMENT_TYPE__ = 'img'

type ComponentOwnProps = {}

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

type ComponentType = <T extends React.ElementType = typeof __ELEMENT_TYPE__>(
props: ComponentProps<T>
type ComponentType = <TElement extends React.ElementType = typeof __ELEMENT_TYPE__>(
props: ComponentProps<TElement>
) => React.ReactNode

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

const Element = as ?? __ELEMENT_TYPE__
@@ -38,5 +44,5 @@ const Component: ComponentType = React.forwardRef(
}
)

export type { ComponentOwnProps as AvatarImageProps }
export type { ComponentOwnProps as AvatarImageOwnProps, ComponentProps as AvatarImageProps }
export default Component
16 changes: 11 additions & 5 deletions packages/react/src/components/avatar/AvatarNotification.tsx
Original file line number Diff line number Diff line change
@@ -9,14 +9,20 @@ const __ELEMENT_TYPE__ = 'span'

type ComponentOwnProps = Pick<AvatarVariantProps, 'color'>

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

type ComponentType = <T extends React.ElementType = typeof __ELEMENT_TYPE__>(
props: ComponentProps<T>
type ComponentType = <TElement extends React.ElementType = typeof __ELEMENT_TYPE__>(
props: ComponentProps<TElement>
) => React.ReactNode

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

const Element = as ?? __ELEMENT_TYPE__
@@ -39,5 +45,5 @@ const Component: ComponentType = React.forwardRef(
}
)

export type { ComponentOwnProps as AvatarNotificationProps }
export type { ComponentOwnProps as AvatarNotificationOwnProps, ComponentProps as AvatarNotificationProps }
export default Component
10 changes: 5 additions & 5 deletions packages/react/src/components/avatar/index.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
export type { AvatarProps } from '@/components/avatar/Avatar'
export type { AvatarGroupProps } from '@/components/avatar/AvatarGroup'
export type { AvatarIconProps } from '@/components/avatar/AvatarIcon'
export type { AvatarImageProps } from '@/components/avatar/AvatarImage'
export type { AvatarNotificationProps } from '@/components/avatar/AvatarNotification'
export type * from '@/components/avatar/Avatar'
export type * from '@/components/avatar/AvatarGroup'
export type * from '@/components/avatar/AvatarIcon'
export type * from '@/components/avatar/AvatarImage'
export type * from '@/components/avatar/AvatarNotification'

export { default as Avatar } from '@/components/avatar/Avatar'
24 changes: 12 additions & 12 deletions packages/react/src/components/breadcrumb/Breadcrumb.tsx
Original file line number Diff line number Diff line change
@@ -10,29 +10,29 @@ import { BreadcrumbContext, useBreadcrumb } from '@/components/breadcrumb/use-br

const __ELEMENT_TYPE__ = 'ol'

type ComponentOwnProps<D extends object> = BreadcrumbsProps<D> & BreadcrumbVariantProps
type ComponentOwnProps<TData extends object> = BreadcrumbsProps<TData> & BreadcrumbVariantProps

type ComponentProps<D extends object, T extends React.ElementType> = Polymophic.ComponentPropsWithRef<
T,
ComponentOwnProps<D>
>
type ComponentProps<
TData extends object,
TElement extends React.ElementType = typeof __ELEMENT_TYPE__,
> = Polymophic.ComponentPropsWithRef<TElement, ComponentOwnProps<TData>>

type ComponentType = <D extends object, T extends React.ElementType = typeof __ELEMENT_TYPE__>(
props: ComponentProps<D, T>
type ComponentType = <TData extends object, TElement extends React.ElementType = typeof __ELEMENT_TYPE__>(
props: ComponentProps<TData, TElement>
) => React.ReactNode

const Component: ComponentType = React.forwardRef(
<D extends object, T extends React.ElementType = typeof __ELEMENT_TYPE__>(
props: ComponentProps<D, T>,
ref: Polymophic.Ref<T>
<TData extends object, TElement extends React.ElementType = typeof __ELEMENT_TYPE__>(
props: ComponentProps<TData, TElement>,
ref: Polymophic.Ref<TElement>
) => {
const { as, children, className, size, separator, ...rest } = props

const Element = as ?? Breadcrumbs

const context = useBreadcrumb({ size, separator })

const component = React.useMemo<BreadcrumbsProps<D>>(
const component = React.useMemo<BreadcrumbsProps<TData>>(
() => ({
className: context.slots.base({ className }),
...rest,
@@ -50,7 +50,7 @@ const Component: ComponentType = React.forwardRef(
}
)

export type { ComponentOwnProps as BreadcrumbProps }
export type { ComponentOwnProps as BreadcrumbOwnProps, ComponentProps as BreadcrumbProps }
export default Object.assign(Component, {
Item: BreadcrumbItem,
})
Loading

0 comments on commit f6f02ef

Please sign in to comment.