Skip to content
This repository was archived by the owner on Sep 20, 2024. It is now read-only.

feat: add type definition of component #380

Merged
merged 5 commits into from
Feb 7, 2021
Merged

feat: add type definition of component #380

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2f190b3
feat: add types of component
odanado Jan 19, 2021
15ed202
feat: add type of Chakra
odanado Feb 6, 2021
b7c9389
fix: fix importing of types
odanado Feb 6, 2021
4b1c66d
Merge branch 'develop' into fix-issues-275
codebender828 Feb 7, 2021
b31c25f
Merge branch 'develop' into fix-issues-275
codebender828 Feb 7, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion packages/chakra-ui-core/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
"description": "Build Accessible and Responsive Vue.js websites and applications with speed ⚡️",
"main": "dist/cjs/index.js",
"module": "dist/esm/index.js",
"types": "types/index.d.ts",
"sideEffects": false,
"maintainers": [
"Jonathan Bakebwa <jonas@akkadu-team.com>"
Expand All @@ -27,7 +28,8 @@
},
"files": [
"dist",
"src"
"src",
"types"
],
"bundle-phobia": {
"max-size": "85KB",
Expand Down
32 changes: 1 addition & 31 deletions packages/chakra-ui-core/src/Chakra/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,39 +6,9 @@ import { createClientDirective } from '../directives'
import defaultTheme from '../../../chakra-ui-theme/src'
import useToast from '../CToast'

/**
* @typedef {Object} Theme Chakra UI Theme object
* @property {Object} breakpoints
* @property {Object} zIndices
* @property {Object} radii
* @property {Object} opacity
* @property {Object} borders
* @property {Object} colors
* @property {Object} borderWidths
* @property {Object} sizes
* @property {Object} shadows
* @property {Object} space
* @property {Object} fontSizes
* @property {Object} fonts
* @property {Object} fontWeights
* @property {Object} lineHeights
* @property {Object} letterSpacings
*/

/**
* @typedef {Object} Options
* @property {Theme} theme
* @property {Theme} extendTheme
* @property {Object} icons
* @property {Object} icons.extend
* @property {String} icons.iconPack
* @property {Object} icons.iconSet
*
*/

/**
* Chakra-ui Component library plugin
* @type {Chakra}
* @type {import("../../types").default}
*/
const Chakra = {
/**
Expand Down
34 changes: 34 additions & 0 deletions packages/chakra-ui-core/types/chakra.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import { PluginObject } from "vue"

export type Theme = {
breakpoints: any
zIndices: any
radii: any
opacity: any
borders: any
colors: any
borderWidths: any
sizes: any
shadows: any
space: any
fontSizes: any
fonts: any
fontWeights: any
lineHeights: any
letterSpacings: any
}

export type Options = {
theme: Theme
extendTheme: Theme
icons: {
extend: any
iconPack: string
iconSet: any
}
}

export type Chakra = PluginObject<Options>

declare let chakra: Chakra
export default chakra
148 changes: 148 additions & 0 deletions packages/chakra-ui-core/types/component.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,148 @@
import Vue from 'vue'

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you want to include declarations for the default export from @chakra-ui/vue also? Since the plugin has some options, I think it will be useful as well. You can find a good reference here:

chakra-ui-vue/packages/chakra-ui-core/src/Chakra/index.js

Lines 28 to 82 in e76b657

/**
* @typedef {Object} Options
* @property {Theme} theme
* @property {Theme} extendTheme
* @property {Object} icons
* @property {Object} icons.extend
* @property {String} icons.iconPack
* @property {Object} icons.iconSet
*
*/
/**
* Chakra-ui Component library plugin
* @type {Chakra}
*/
const Chakra = {
/**
*
* @param {Vue} Vue
* @param {Options} options
*/
install (Vue, options = {}) {
let packIcons = {}
const extendedIcons = options.icons ? options.icons.extend || {} : {}
if (options.icons) {
packIcons = parsePackIcons(options.icons.iconSet)
}
const icons = {
...internalIcons,
...packIcons,
...extendedIcons
}
// Recursively merge extended theme variables
const mergedTheme = merge(defaultTheme, options.extendTheme)
Vue.directive('chakra', createClientDirective(mergedTheme))
// Bind theme and icons to prototype
Vue.prototype.$chakra = {
theme: mergedTheme,
icons
}
const toast = useToast()
Vue.prototype.$toast = toast
/** Install dependent plugins */
Vue.use(VScrollLock)
}
}
export default Chakra

I think it can be improved since I last updated these.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fix in 15ed202 and b7c9389

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you @odanado

export class CAccordion extends Vue {}
export class CAccordionHeader extends Vue {}
export class CAccordionIcon extends Vue {}
export class CAccordionItem extends Vue {}
export class CAccordionPanel extends Vue {}
export class CAlert extends Vue {}
export class CAlertDescription extends Vue {}
export class CAlertDialog extends Vue {}
export class CAlertDialogBody extends Vue {}
export class CAlertDialogCloseButton extends Vue {}
export class CAlertDialogContent extends Vue {}
export class CAlertDialogFooter extends Vue {}
export class CAlertDialogHeader extends Vue {}
export class CAlertDialogOverlay extends Vue {}
export class CAlertIcon extends Vue {}
export class CAlertTitle extends Vue {}
export class CAnimateHeight extends Vue {}
export class CAspectRatioBox extends Vue {}
export class CAvatar extends Vue {}
export class CAvatarBadge extends Vue {}
export class CAvatarGroup extends Vue {}
export class CBadge extends Vue {}
export class CBox extends Vue {}
export class CBreadcrumb extends Vue {}
export class CBreadcrumbItem extends Vue {}
export class CBreadcrumbLink extends Vue {}
export class CBreadcrumbSeparator extends Vue {}
export class CButton extends Vue {}
export class CButtonGroup extends Vue {}
export class CCheckbox extends Vue {}
export class CCheckboxGroup extends Vue {}
export class CCircularProgress extends Vue {}
export class CCircularProgressLabel extends Vue {}
export class CCloseButton extends Vue {}
export class CCode extends Vue {}
export class CCollapse extends Vue {}
export class CColorModeProvider extends Vue {}
export class CControlBox extends Vue {}
export class CDarkMode extends Vue {}
export class CDivider extends Vue {}
export class CDrawer extends Vue {}
export class CDrawerBody extends Vue {}
export class CDrawerCloseButton extends Vue {}
export class CDrawerContent extends Vue {}
export class CDrawerFooter extends Vue {}
export class CDrawerHeader extends Vue {}
export class CDrawerOverlay extends Vue {}
export class CEditable extends Vue {}
export class CEditableInput extends Vue {}
export class CEditablePreview extends Vue {}
export class CFade extends Vue {}
export class CFlex extends Vue {}
export class CFormControl extends Vue {}
export class CFormErrorMessage extends Vue {}
export class CFormHelperText extends Vue {}
export class CFormLabel extends Vue {}
export class CFragment extends Vue {}
export class CGrid extends Vue {}
export class CHeading extends Vue {}
export class CIcon extends Vue {}
export class CIconButton extends Vue {}
export class CImage extends Vue {}
export class CInput extends Vue {}
export class CInputAddon extends Vue {}
export class CInputElement extends Vue {}
export class CInputGroup extends Vue {}
export class CInputLeftAddon extends Vue {}
export class CInputLeftElement extends Vue {}
export class CInputRightAddon extends Vue {}
export class CInputRightElement extends Vue {}
export class CLightMode extends Vue {}
export class CLink extends Vue {}
export class CList extends Vue {}
export class CListIcon extends Vue {}
export class CListItem extends Vue {}
export class CMenu extends Vue {}
export class CMenuButton extends Vue {}
export class CMenuDivider extends Vue {}
export class CMenuGroup extends Vue {}
export class CMenuItem extends Vue {}
export class CMenuItemOption extends Vue {}
export class CMenuList extends Vue {}
export class CMenuOptionGroup extends Vue {}
export class CModal extends Vue {}
export class CModalBody extends Vue {}
export class CModalCloseButton extends Vue {}
export class CModalContent extends Vue {}
export class CModalFooter extends Vue {}
export class CModalHeader extends Vue {}
export class CModalOverlay extends Vue {}
export class CNumberDecrementStepper extends Vue {}
export class CNumberIncrementStepper extends Vue {}
export class CNumberInput extends Vue {}
export class CNumberInputField extends Vue {}
export class CNumberInputStepper extends Vue {}
export class CPopover extends Vue {}
export class CPopoverArrow extends Vue {}
export class CPopoverBody extends Vue {}
export class CPopoverCloseButton extends Vue {}
export class CPopoverContent extends Vue {}
export class CPopoverFooter extends Vue {}
export class CPopoverHeader extends Vue {}
export class CPopoverTrigger extends Vue {}
export class CPopper extends Vue {}
export class CPopperArrow extends Vue {}
export class CPortal extends Vue {}
export class CProgress extends Vue {}
export class CProgressLabel extends Vue {}
export class CPseudoBox extends Vue {}
export class CRadio extends Vue {}
export class CRadioButtonGroup extends Vue {}
export class CRadioGroup extends Vue {}
export class CReset extends Vue {}
export class CRevealHeight extends Vue {}
export class CScale extends Vue {}
export class CSelect extends Vue {}
export class CSimpleGrid extends Vue {}
export class CSlide extends Vue {}
export class CSlideIn extends Vue {}
export class CSlider extends Vue {}
export class CSliderFilledTrack extends Vue {}
export class CSliderThumb extends Vue {}
export class CSliderTrack extends Vue {}
export class CSpinner extends Vue {}
export class CStack extends Vue {}
export class CStat extends Vue {}
export class CStatArrow extends Vue {}
export class CStatGroup extends Vue {}
export class CStatHelperText extends Vue {}
export class CStatLabel extends Vue {}
export class CStatNumber extends Vue {}
export class CSwitch extends Vue {}
export class CTab extends Vue {}
export class CTabList extends Vue {}
export class CTabPanel extends Vue {}
export class CTabPanels extends Vue {}
export class CTabs extends Vue {}
export class CTag extends Vue {}
export class CTagCloseButton extends Vue {}
export class CTagIcon extends Vue {}
export class CTagLabel extends Vue {}
export class CText extends Vue {}
export class CTextarea extends Vue {}
export class CThemeProvider extends Vue {}
export class CTooltip extends Vue {}
export class CVisuallyHidden extends Vue {}
4 changes: 4 additions & 0 deletions packages/chakra-ui-core/types/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
import Chakra from "./chakra"

export * from './component'
export default Chakra