Export types for component props

[stephenhandley]

Description

Would be great if you could export types for component props in addition to the components so they can be re-used in wrapper components.

Problem Statement

Want to create wrapper components that leverage the types for component props in the generated components in components/ui.

Proposed Solution or API

Export the types for props of any exported components from generated code.

Example change for generated heading/index.ts line 220

// EDIT: export IHeadingProps
export { Heading, type IHeadingProps };

Alternatives

No response

Additional Information

No response

[akash3gtm]

It was a discussion we made as you can get the typing by using this :
type IHeadingProps = React.ComponentProps<typeof Heading>
or
type IButtonProps = React.ComponentProps<typeof Button>
type IButtonTextProps = React.ComponentProps<typeof ButtonText>

Also, because the user can use whichever styling library they want, if they don't want to use our default styling library and the typing will also change.

Hence we took this decision.

[akash3gtm]

Closing this issue.
Open another issue if you need help regarding anything else.

[stephenhandley]

@akash3gtm I'm trying to accomplish something like the following, but having to do a bunch of VariantType / as conversions

import React from 'react';
import type { VariantProps } from "@gluestack-ui/nativewind-utils";

import {
	AccordionContent,
	AccordionHeader,
	AccordionIcon,
	AccordionItem as AccordionItemUi,
	AccordionTitleText,
	AccordionTrigger,
	Accordion as AccordionUi
} from "./generated/accordion";

export type AccordionProps = {
	items: AccordionItemProps[];
} & VariantProps<typeof AccordionUi>;

export type AccordionItemProps = {
	title: string;
	icon?: Partial<React.ComponentProps<typeof AccordionIcon>>;
	content: string | React.ReactNode;
} & VariantProps<typeof AccordionItemUi>;

export type AccordionHeaderProps = VariantProps<typeof AccordionHeader>;

export type AccordionTriggerProps = VariantProps<typeof AccordionTrigger>;

export type AccordionTitleTextProps = VariantProps<typeof AccordionTitleText>;

export type AccordionContentProps = VariantProps<typeof AccordionContent>;

export function Accordion({ items, ...props }: AccordionProps) {
	return (
		<AccordionUi {...props}>
			{items.map((item) => (
				<AccordionItem key={item.title} {...item} />
			))}
		</AccordionUi>
	);
}

export function AccordionItem({ title, icon, content, ...props }: AccordionItemProps) {
	return (
		<AccordionItemUi {...props}>
			<AccordionHeader {...({} as AccordionHeaderProps)}>
				<AccordionTrigger {...({} as AccordionTriggerProps)}>
					{icon && <AccordionIcon {...icon} />}
					<AccordionTitleText {...({} as AccordionTitleTextProps)}>{title}</AccordionTitleText>
				</AccordionTrigger>
			</AccordionHeader>
			<AccordionContent {...({} as AccordionContentProps)}>{content}</AccordionContent>
		</AccordionItemUi>
	);
}

That's somewhat unwieldy having to do the variant props casting to get around type checks. Is there more idiomatic way to handle this with your library?

[akash3gtm]

Ohhh, You want to create a wrapper and only export the typings and props for variants and all the other props are already given.
Something like this... right?

[akash3gtm]

Please create a discussion and write your use-case with your needs there.
It will be easier to follow.