Feature/prop types

[koca]

What is the new behavior?

Type support for all theming and component props.
I've been playing/using this for couple of days already i can say that its a great experience. 🚀

gif:

Does this introduce a breaking change?

• Yes
• No

btw, you need to use Volar vscode extension to try this feature.

[changeset-bot]

🦋 Changeset detected

Latest commit: 1269675

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 28 packages

Name	Type
@chakra-ui/c-accordion	Patch
@chakra-ui/c-alert	Patch
@chakra-ui/c-button	Patch
@chakra-ui/c-close-button	Patch
@chakra-ui/c-code	Patch
@chakra-ui/c-color-mode	Patch
@chakra-ui/c-flex	Patch
@chakra-ui/c-focus-lock	Patch
@chakra-ui/c-icon	Patch
@chakra-ui/c-modal	Patch
@chakra-ui/c-motion	Patch
@chakra-ui/c-popper	Patch
@chakra-ui/c-portal	Patch
@chakra-ui/c-reset	Patch
@chakra-ui/c-scroll-lock	Patch
@chakra-ui/c-spinner	Patch
@chakra-ui/c-theme-provider	Patch
@chakra-ui/c-visually-hidden	Patch
@chakra-ui/vue-next	Patch
@chakra-ui/vue-layout	Patch
@chakra-ui/vue-system	Patch
@chakra-ui/vue-theme	Patch
@chakra-ui/vue-theme-tools	Patch
@chakra-ui/vue-utils	Patch
@chakra-ui/vue-a11y	Patch
@chakra-ui/vue-composables	Patch
@chakra-ui/vue-auto-import	Patch
@chakra-ui/vue-docs	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployments, click below or on the icon next to each commit.

chakra-ui-vue-next – ./

🔍 Inspect: https://vercel.com/chakra-ui/chakra-ui-vue-next/4axAL5P94UPQyKokkXGFmTuGsCvG
✅ Preview: https://chakra-ui-vue-next-git-feature-prop-types-chakra-ui.vercel.app

chakra-ui-vue-next-playground – ./

🔍 Inspect: https://vercel.com/chakra-ui/chakra-ui-vue-next-playground/7nAy2t1KfUSYKUVuqcnq3TXkLFuk
✅ Preview: https://chakra-ui-vue-next-playground-git-feature-prop-types-chakra-ui.vercel.app

[koca]

Which syntax is better? @codebender828 @carwack

Right now im using the first syntax which is IMO cleaner/better but the second one is less code to type idk.
So what do you think both looks fine for me, which one should we use?

1:

const CBoxImpl = defineComponent({
 // actual implementation
})

// export
export const CBox = CBoxImpl as ComponentWithProps<DeepPartial<BoxProps>>

2:

//export
export const CBox = defineComponent({
 // actual implementation
}) as ComponentWithProps<DeepPartial<BoxProps>>

[carwack]

Which syntax is better? @codebender828 @carwack

Right now im using the first syntax which is IMO cleaner/better but the second one is less code to type idk.
So what do you think both looks fine for me, which one should we use?

1:

const CBoxImpl = defineComponent({
 // actual implementation
})

// export
export const CBox = CBoxImpl as ComponentWithProps<DeepPartial<BoxProps>>

2:

//export
export const CBox = defineComponent({
 // actual implementation
}) as ComponentWithProps<DeepPartial<BoxProps>>

Me personally, I prefer nr 1. Because it's cleaner and easier to see what's going on.
And I do feel like it's nice to have the option to place all the exports at the end of the file

Great job here!

[codebender828]

Very nice work here! Thank you @koca

I've offered some suggestions for declaring the component types

[codebender828]

Thanks for the initial work done here @koca .

Gonna merge this