From f7ee823c898a535785aae52422727400c6c44d13 Mon Sep 17 00:00:00 2001 From: owjs3901 Date: Wed, 17 Sep 2025 00:42:44 +0900 Subject: [PATCH] Add as typing --- .changeset/twelve-dryers-sing.md | 5 +++++ packages/react/src/components/Box.tsx | 7 +++++-- packages/react/src/components/Button.tsx | 7 +++++-- packages/react/src/components/Center.tsx | 7 +++++-- packages/react/src/components/Flex.tsx | 7 +++++-- packages/react/src/components/Grid.tsx | 7 +++++-- packages/react/src/components/Image.tsx | 7 +++++-- packages/react/src/components/Input.tsx | 7 +++++-- packages/react/src/components/Text.tsx | 7 +++++-- packages/react/src/components/VStack.tsx | 7 +++++-- packages/react/src/types/props/index.ts | 17 +++++++++++++++++ 11 files changed, 67 insertions(+), 18 deletions(-) create mode 100644 .changeset/twelve-dryers-sing.md diff --git a/.changeset/twelve-dryers-sing.md b/.changeset/twelve-dryers-sing.md new file mode 100644 index 00000000..54784606 --- /dev/null +++ b/.changeset/twelve-dryers-sing.md @@ -0,0 +1,5 @@ +--- +"@devup-ui/react": patch +--- + +Support props and custom component in as diff --git a/packages/react/src/components/Box.tsx b/packages/react/src/components/Box.tsx index d2531a0d..acbee4f4 100644 --- a/packages/react/src/components/Box.tsx +++ b/packages/react/src/components/Box.tsx @@ -1,9 +1,12 @@ -import type { DevupComponentProps } from '../types/props' +import type { + DevupComponentBaseProps, + DevupComponentProps, +} from '../types/props' import type { Merge } from '../types/utils' export function Box( // eslint-disable-next-line @typescript-eslint/no-unused-vars - props: Merge, DevupComponentProps>, + props: Merge, DevupComponentProps>, ): React.ReactElement { throw new Error('Cannot run on the runtime') } diff --git a/packages/react/src/components/Button.tsx b/packages/react/src/components/Button.tsx index 3a56bd2b..414abd02 100644 --- a/packages/react/src/components/Button.tsx +++ b/packages/react/src/components/Button.tsx @@ -1,9 +1,12 @@ -import type { DevupComponentProps } from '../types/props' +import type { + DevupComponentBaseProps, + DevupComponentProps, +} from '../types/props' import type { Merge } from '../types/utils' export function Button( // eslint-disable-next-line @typescript-eslint/no-unused-vars - props: Merge, DevupComponentProps>, + props: Merge, DevupComponentProps>, ): React.ReactElement { throw new Error('Cannot run on the runtime') } diff --git a/packages/react/src/components/Center.tsx b/packages/react/src/components/Center.tsx index 3b04b514..91cf0f54 100644 --- a/packages/react/src/components/Center.tsx +++ b/packages/react/src/components/Center.tsx @@ -1,9 +1,12 @@ -import type { DevupComponentProps } from '../types/props' +import type { + DevupComponentBaseProps, + DevupComponentProps, +} from '../types/props' import type { Merge } from '../types/utils' export function Center( // eslint-disable-next-line @typescript-eslint/no-unused-vars - props: Merge, DevupComponentProps>, + props: Merge, DevupComponentProps>, ): React.ReactElement { throw new Error('Cannot run on the runtime') } diff --git a/packages/react/src/components/Flex.tsx b/packages/react/src/components/Flex.tsx index cfc30109..b8314515 100644 --- a/packages/react/src/components/Flex.tsx +++ b/packages/react/src/components/Flex.tsx @@ -1,9 +1,12 @@ -import type { DevupComponentProps } from '../types/props' +import type { + DevupComponentBaseProps, + DevupComponentProps, +} from '../types/props' import type { Merge } from '../types/utils' export function Flex( // eslint-disable-next-line @typescript-eslint/no-unused-vars - props: Merge, DevupComponentProps>, + props: Merge, DevupComponentProps>, ): React.ReactElement { throw new Error('Cannot run on the runtime') } diff --git a/packages/react/src/components/Grid.tsx b/packages/react/src/components/Grid.tsx index 5fcdec42..769f15b8 100644 --- a/packages/react/src/components/Grid.tsx +++ b/packages/react/src/components/Grid.tsx @@ -1,9 +1,12 @@ -import type { DevupComponentProps } from '../types/props' +import type { + DevupComponentBaseProps, + DevupComponentProps, +} from '../types/props' import type { Merge } from '../types/utils' export function Grid( // eslint-disable-next-line @typescript-eslint/no-unused-vars - props: Merge, DevupComponentProps>, + props: Merge, DevupComponentProps>, ): React.ReactElement { throw new Error('Cannot run on the runtime') } diff --git a/packages/react/src/components/Image.tsx b/packages/react/src/components/Image.tsx index 8ab61153..a17d2dcd 100644 --- a/packages/react/src/components/Image.tsx +++ b/packages/react/src/components/Image.tsx @@ -1,9 +1,12 @@ -import type { DevupComponentProps } from '../types/props' +import type { + DevupComponentBaseProps, + DevupComponentProps, +} from '../types/props' import type { Merge } from '../types/utils' export function Image( // eslint-disable-next-line @typescript-eslint/no-unused-vars - props: Merge, DevupComponentProps>, + props: Merge, DevupComponentProps>, ): React.ReactElement { throw new Error('Cannot run on the runtime') } diff --git a/packages/react/src/components/Input.tsx b/packages/react/src/components/Input.tsx index caf9dcdb..1649fd32 100644 --- a/packages/react/src/components/Input.tsx +++ b/packages/react/src/components/Input.tsx @@ -1,9 +1,12 @@ -import type { DevupComponentProps } from '../types/props' +import type { + DevupComponentBaseProps, + DevupComponentProps, +} from '../types/props' import type { Merge } from '../types/utils' export function Input( // eslint-disable-next-line @typescript-eslint/no-unused-vars - props: Merge, DevupComponentProps>, + props: Merge, DevupComponentProps>, ): React.ReactElement { throw new Error('Cannot run on the runtime') } diff --git a/packages/react/src/components/Text.tsx b/packages/react/src/components/Text.tsx index 5a9cd0db..467afb4c 100644 --- a/packages/react/src/components/Text.tsx +++ b/packages/react/src/components/Text.tsx @@ -1,9 +1,12 @@ -import type { DevupComponentProps } from '../types/props' +import type { + DevupComponentBaseProps, + DevupComponentProps, +} from '../types/props' import type { Merge } from '../types/utils' export function Text( // eslint-disable-next-line @typescript-eslint/no-unused-vars - props: Merge, DevupComponentProps>, + props: Merge, DevupComponentProps>, ): React.ReactElement { throw new Error('Cannot run on the runtime') } diff --git a/packages/react/src/components/VStack.tsx b/packages/react/src/components/VStack.tsx index 2814af4d..f0af4296 100644 --- a/packages/react/src/components/VStack.tsx +++ b/packages/react/src/components/VStack.tsx @@ -1,9 +1,12 @@ -import type { DevupComponentProps } from '../types/props' +import type { + DevupComponentBaseProps, + DevupComponentProps, +} from '../types/props' import type { Merge } from '../types/utils' export function VStack( // eslint-disable-next-line @typescript-eslint/no-unused-vars - props: Merge, DevupComponentProps>, + props: Merge, DevupComponentProps>, ): React.ReactElement { throw new Error('Cannot run on the runtime') } diff --git a/packages/react/src/types/props/index.ts b/packages/react/src/types/props/index.ts index cb245892..9d1c13bb 100644 --- a/packages/react/src/types/props/index.ts +++ b/packages/react/src/types/props/index.ts @@ -44,3 +44,20 @@ export interface DevupComponentProps as?: T styleVars?: Record } +export type DevupComponentBaseProps = + DevupElementTypeProps & DevupComponentAdditionalProps + +export type DevupElementTypeProps = + T extends string ? React.ComponentProps : object + +export type DevupComponentAdditionalProps< + T extends React.ElementType, + P extends React.ComponentProps = React.ComponentProps, +> = + Partial

extends P + ? { + props?: P + } + : { + props: P + }