feat(types): improve & add type declarations #473
Conversation
|
|
@Pwuts is attempting to deploy a commit to the Chakra UI Team on Vercel. A member of the Team first needs to authorize it. |
|
I'm not sure about the code style of the project. The project originally barely contains any typescript, and neither ESLint nor Pretty complained about the code I wrote. Does this mean my code conforms to the project's code style? |
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit 1e37eb9:
|
|
This pull request is being automatically deployed with Vercel (learn more). chakra-ui-vue – ./🔍 Inspect: https://vercel.com/chakra-ui/chakra-ui-vue/9sM7SByxR1miMTCb9XWbxLKVYJgp [Deployment for 1e37eb9 failed] |
Thanks for this PR! About the linting, if it doesn't complain, then it most likely is good. We run checks in front of each commit, and when you open a pull request. :) |
There was a problem hiding this comment.
Thank you for this pull request @Pwuts Will add this to the next minor release
| export type Theme = { | ||
| breakpoints: { [key: string]: string } | ||
| zIndices: { [key: string]: string | number } | ||
| radii: { [key: string]: string } | ||
| opacity: { [key: string]: string } | ||
| borders: { [key: string]: string } | ||
| colors: { [key: string]: string | { [opacity: string]: string }} | ||
| fonts: { | ||
| heading: string | ||
| body: string | ||
| mono: string | ||
| } | ||
| fontSizes: { [key: string]: string } | ||
| fontWeights: { [key: string]: number } | ||
| letterSpacings: { [key: string]: string } | ||
| lineHeights: { [key: string]: string } | ||
| borderWidths: { [key: string]: string } | ||
| shadows: { [key: string]: string } | ||
| sizes: { [key: string]: string } | ||
| space: { [key: string]: string } | ||
| } | ||
|
|
||
| declare const theme: Theme |
There was a problem hiding this comment.
Hey @Pwuts Is it possible that we can derive a deep Partial from the original theme object here? Something like:
import theme from './src`
export type Theme = DeepPartial<typeof theme>There was a problem hiding this comment.
I think the definition of Theme shouldn't be partial, but it could be derived from the default theme, sure.
|
@codebender828 epic! I'll look into doing something similar for the theme and color mode providers, although that's not as straightforward since they are provider components and don't inject into the global Vue instance. |
Summary
themeand moved it tochakra-ui-theme$toastamong other things)Motivation and Context
Since this library isn't natively typed, it is hard to use in conjunction with typescript (e.g. Nuxt). I have attempted to somewhat improve the situation.
Partially fixes #469, and has potential to solve it entirely: depending on the response to this PR, I can also add
$chakraTheme,$chakraColorModeetc quite easily.How Has This Been Tested?
I used the example Nuxt app in
chakra-ui-nuxt/exampleand locally amended it to do type checking (by addinglang="ts"), andthis.$toastis now correctly recognized. Its options are also correctly auto-completed. I do not get any new errors, other than the errors emitted byyarn test:modulein the latest version of thedevelopbranch.Types of changes
Checklist:
I have updated the documentation accordingly.