#268 - export types (#269)

* refactor: refactored types and exported public types

* refactor: added consistent type imports

* chore(deps): updated dependencies

* chore: incremented version

* fix: ensure consitent type path

* refactor: rename folder symbol

* refactor: renamed folder symbols

* refactor: removed redundant paths to components in tests

.eslintrc.js

@@ -87,8 +87,8 @@ module.exports = {
         '@typescript-eslint/func-call-spacing': ['error', 'never'],
         '@typescript-eslint/comma-spacing': 'warn',
         '@typescript-eslint/keyword-spacing': 'warn',
-        // '@typescript-eslint/consistent-indexed-object-style': ['error', 'record'], // waiting on dependency updates
-        // '@typescript-eslint/consistent-type-imports': ['error', { prefer: 'type-imports' }],
+        '@typescript-eslint/consistent-indexed-object-style': ['error', 'record'],
+        '@typescript-eslint/consistent-type-imports': ['error', { prefer: 'type-imports' }],
         '@typescript-eslint/member-delimiter-style': 'warn',
         '@typescript-eslint/type-annotation-spacing': 'warn',
         '@typescript-eslint/naming-convention': [

jest.config.ts

@@ -1,6 +1,6 @@
 import { pathsToModuleNameMapper } from 'ts-jest/utils';
 import { compilerOptions } from './tsconfig.json';
-import { InitialOptionsTsJest } from 'ts-jest/dist/types';
+import type { InitialOptionsTsJest } from 'ts-jest/dist/types';
 
 export default {
     clearMocks: true,

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@karnama/vueish",
-    "version": "0.6.0",
+    "version": "0.6.1",
     "files": [
         "dist",
         "types"

src/DemoBoard.vue

@@ -65,10 +65,10 @@
 
 <script lang="ts">
 import { computed, defineComponent, getCurrentInstance, ref, watch } from 'vue';
-import UIToggle from '@components/toggle/UIToggle.vue';
-import LocalCache from '@helpers/cache/LocalCache';
-import { Router, RouteRecord } from 'vue-router';
-import UIButton from '@components/button/UIButton.vue';
+import UIToggle from 'components/toggle/UIToggle.vue';
+import LocalCache from '@/helpers/cache/LocalCache';
+import type { Router, RouteRecord } from 'vue-router';
+import UIButton from 'components/button/UIButton.vue';
 import { getIcon } from '@/helpers';
 import { getVersion } from '@/main';
 

src/components/avatar/Demo.vue

@@ -56,7 +56,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import type { Avatar } from '@/types';
+import type { Avatar } from 'types';
 
 export default defineComponent({
     name: 'Avatar',

src/components/avatar/UIAvatar.test.ts

@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils';
-import UIAvatar from '@components/avatar/UIAvatar.vue';
+import UIAvatar from './UIAvatar.vue';
 
 describe('UIAvatar', () => {
     it('should correctly display', () => {

src/components/avatar/UIAvatarGroup.test.ts

@@ -1,7 +1,7 @@
 import { mount } from '@vue/test-utils';
-import UIAvatarGroup from '@components/avatar/UIAvatarGroup.vue';
-import { Avatar } from '@/types';
-import UIAvatar from '@components/avatar/UIAvatar.vue';
+import UIAvatarGroup from './UIAvatarGroup.vue';
+import type { Avatar } from 'types';
+import UIAvatar from './UIAvatar.vue';
 
 const avatars: Avatar[] = [
     {},

src/components/avatar/UIAvatarGroup.vue

@@ -30,8 +30,8 @@
 <script lang="ts">
 import { computed, defineComponent } from 'vue';
 import type { PropType, VNode } from 'vue';
-import UIAvatar from '@components/avatar/UIAvatar.vue';
-import type { Avatar } from '@/types';
+import UIAvatar from 'components/avatar/UIAvatar.vue';
+import type { Avatar } from 'types';
 import { omit } from 'lodash-es';
 
 export default defineComponent({

src/components/badge/Demo.vue

@@ -16,7 +16,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { horizontal, vertical } from '@/types';
+import { horizontal, vertical } from 'types';
 
 export default defineComponent({
     name: 'Badge',

src/components/badge/UIBadge.test.ts

@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils';
-import UIBadge from '@components/badge/UIBadge.vue';
+import UIBadge from './UIBadge.vue';
 
 describe('UIBadge', () => {
     it('should correctly display', () => {

src/components/badge/UIBadge.vue

@@ -15,7 +15,7 @@
 <script lang="ts">
 import { defineComponent, computed, ref } from 'vue';
 import type { PropType } from 'vue';
-import { horizontal, vertical } from '@/types';
+import { horizontal, vertical } from 'types';
 
 export default defineComponent({
     name: 'UIBadge',

src/components/button-toggle/Demo.vue

@@ -51,7 +51,7 @@
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
-import type { Option } from '@/types';
+import type { Option } from 'types';
 
 export default defineComponent({
     name: 'ButtonToggle',

src/components/button-toggle/UIButtonToggle.test.ts

@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils';
 import UIButtonToggle from './UIButtonToggle.vue';
-import type { Option } from '@/types';
+import type { Option } from 'types';
 
 const options: Record<string, any>[] = [
     { label: 'Places', value: 'places' },

src/components/button-toggle/UIButtonToggle.vue

@@ -26,12 +26,13 @@
 <script lang="ts">
 import { defineComponent, watch } from 'vue';
 import type { PropType } from 'vue';
-import UIButtonGroup, { props } from '@components/button-group/UIButtonGroup.vue';
-import { large, category } from '@composables/style';
-import { useVModel, disabled, clearable } from '@composables/input';
-import UIButton from '@components/button/UIButton.vue';
+import UIButtonGroup, { props } from 'components/button-group/UIButtonGroup.vue';
+import { large, category } from 'composables/style';
+import { useVModel, disabled, clearable } from 'composables/input';
+import UIButton from 'components/button/UIButton.vue';
 import { isEqual, uniq } from 'lodash-es';
-import type { MaybeArray, Option } from '@/types';
+import type { MaybeArray } from 'types/utilities';
+import type { Option } from 'types';
 import { wrap } from '@/helpers';
 
 export default defineComponent({

src/components/button/Demo.vue

@@ -32,7 +32,7 @@
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
-import { styleTypes } from '@/types';
+import { styleTypes } from 'types';
 
 export default defineComponent({
     // eslint-disable-next-line vue/no-reserved-component-names

src/components/button/UIButton.test.ts

@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils';
 import UIButton from './UIButton.vue';
-import { styleTypes } from '@/types';
+import { styleTypes } from 'types';
 
 describe('UIButton', () => {
     it('should render correctly', async () => {

src/components/button/UIButton.vue

@@ -27,11 +27,11 @@
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue';
-import type { StyleType } from '@/types';
-import { category, large } from '@composables/style';
-import { label, disabled } from '@composables/input';
-import UISpinnerLoader from '@components/loader-spinner/UISpinnerLoader.vue';
-import UIFadeTransition from '@components/transitions/UIFadeTransition.vue';
+import type { StyleType } from 'types';
+import { category, large } from 'composables/style';
+import { label, disabled } from 'composables/input';
+import UISpinnerLoader from 'components/loader-spinner/UISpinnerLoader.vue';
+import UIFadeTransition from 'components/transitions/UIFadeTransition.vue';
 
 export default defineComponent({
     name: 'UIButton',

src/components/checkbox/UICheckbox.vue

@@ -38,10 +38,10 @@
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue';
-import { label, disabled, name, error } from '@composables/input';
+import { label, disabled, name, error } from 'composables/input';
 import { isEqual, omit } from 'lodash-es';
 import { getIcon } from '@/helpers';
-import UIExpandTransition from '@components/transitions/UIExpandTransition.vue';
+import UIExpandTransition from 'components/transitions/UIExpandTransition.vue';
 
 export default defineComponent({
     name: 'UICheckbox',

src/components/dropdown/UIDropdown.test.ts

@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils';
-import UIDropdown from '@components/dropdown/UIDropdown.vue';
+import UIDropdown from './UIDropdown.vue';
 import { h, nextTick } from 'vue';
 
 describe('UIDropdown', () => {

src/components/dropdown/UIDropdown.vue

@@ -25,7 +25,7 @@
 import { computed, defineComponent, ref, reactive } from 'vue';
 import type { PropType } from 'vue';
 import clickAway from '@/directives/click-away';
-import { getPxValue } from '@composables/style';
+import { getPxValue } from 'composables/style';
 
 export default defineComponent({
     name: 'UIDropdown',

src/components/file-input/UIFileInput.vue

@@ -83,14 +83,14 @@
 
 import { computed, defineComponent, ref, watch } from 'vue';
 import type { PropType } from 'vue';
-import { createFileList, getSizeString } from '@composables/utils';
-import { name, label, clearable, autofocus, disabled, positiveOptionalNumber, error } from '@composables/input';
-import { large } from '@composables/style';
+import { createFileList, getSizeString } from 'composables/utils';
+import { name, label, clearable, autofocus, disabled, positiveOptionalNumber, error } from 'composables/input';
+import { large } from 'composables/style';
 import { omit } from 'lodash-es';
 import { getIcon } from '@/helpers';
-import UIFadeTransition from '@components/transitions/UIFadeTransition.vue';
-import UIExpandTransition from '@components/transitions/UIExpandTransition.vue';
-import { FileError } from '@/types';
+import UIFadeTransition from 'components/transitions/UIFadeTransition.vue';
+import UIExpandTransition from 'components/transitions/UIExpandTransition.vue';
+import type { FileError } from 'types';
 
 export default defineComponent({
     name: 'UIFileInput',

src/components/file-uploader/UIFile.test.ts

@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils';
-import UIFile from '@components/file-uploader/UIFile.vue';
+import UIFile from './UIFile.vue';
 
 describe('UIFile', () => {
     const file = new File(['foo'], 'foo.txt', {

src/components/file-uploader/UIFile.vue

@@ -27,12 +27,13 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, PropType, ref, watch } from 'vue';
-import UIAvatar from '@components/avatar/UIAvatar.vue';
+import type { PropType } from 'vue';
+import { computed, defineComponent, onMounted, ref, watch } from 'vue';
+import UIAvatar from 'components/avatar/UIAvatar.vue';
 import { getIcon } from '@/helpers';
-import UISpinnerLoader from '@components/loader-spinner/UISpinnerLoader.vue';
-import UIFadeTransition from '@components/transitions/UIFadeTransition.vue';
-import { getSizeString, isImage as fileIsImage, getExtension } from '@composables/utils';
+import UISpinnerLoader from 'components/loader-spinner/UISpinnerLoader.vue';
+import UIFadeTransition from 'components/transitions/UIFadeTransition.vue';
+import { getSizeString, isImage as fileIsImage, getExtension } from 'composables/utils';
 
 // todo accept a composable (returns a ref for progress) for upload
 export default defineComponent({

src/components/file-uploader/UIFileUploader.vue

@@ -73,12 +73,12 @@ import { defineComponent, ref } from 'vue';
 import type { PropType } from 'vue';
 import UIFile from './UIFile.vue';
 import { getIcon } from '@/helpers';
-import UIButton from '@components/button/UIButton.vue';
-import { FileError } from '@/types';
-import UIFadeTransition from '@components/transitions/UIFadeTransition.vue';
-import UIExpandTransition from '@components/transitions/UIExpandTransition.vue';
-import { error } from '@composables/input';
-import { positiveOptionalNumber } from '@composables/input';
+import UIButton from 'components/button/UIButton.vue';
+import type { FileError } from 'types';
+import UIFadeTransition from 'components/transitions/UIFadeTransition.vue';
+import UIExpandTransition from 'components/transitions/UIExpandTransition.vue';
+import { error } from 'composables/input';
+import { positiveOptionalNumber } from 'composables/input';
 
 // todo - UIFile may make the uploader overflow if the side menu is open when using files with long titles
 export default defineComponent({

src/components/input/UIInput.vue

@@ -102,7 +102,8 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted, PropType, ref, watch } from 'vue';
+import type { PropType } from 'vue';
+import { defineComponent, onMounted, ref, watch } from 'vue';
 import {
     autofocus,
     label,
@@ -113,12 +114,12 @@ import {
     disabled,
     useVModel,
     error
-} from '@composables/input';
-import { large } from '@composables/style';
+} from 'composables/input';
+import { large } from 'composables/style';
 import { getIcon, getPrecision } from '@/helpers';
 import { omit } from 'lodash-es';
-import UIFadeTransition from '@components/transitions/UIFadeTransition.vue';
-import UIExpandTransition from '@components/transitions/UIExpandTransition.vue';
+import UIFadeTransition from 'components/transitions/UIFadeTransition.vue';
+import UIExpandTransition from 'components/transitions/UIExpandTransition.vue';
 
 const types = [
     'text',

src/components/loader-linear/UILinearLoader.test.ts

@@ -1,6 +1,6 @@
 import UILinearLoader from './UILinearLoader.vue';
 import { mount } from '@vue/test-utils';
-import { disableConsoleWarn, enableConsoleWarn } from '@helpers/test';
+import { disableConsoleWarn, enableConsoleWarn } from 'helpers/test';
 
 let wrapper: ReturnType<typeof mount>;
 

src/components/loader-linear/UILinearLoader.vue

@@ -15,7 +15,7 @@
 
 <script lang="ts">
 import { defineComponent, computed } from 'vue';
-import { inheritColor, progress, steps, determinate } from '@composables/style';
+import { inheritColor, progress, steps, determinate } from 'composables/style';
 
 export default defineComponent({
     name: 'UILinearLoader',

src/components/loader-spinner/UISpinnerLoader.vue

@@ -25,7 +25,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, ref, watch, onMounted, onUnmounted } from 'vue';
-import { inheritColor, determinate, steps, progress } from '@composables/style';
+import { inheritColor, determinate, steps, progress } from 'composables/style';
 
 export default defineComponent({
     name: 'UISpinnerLoader',

src/components/modal/UIModal.vue

@@ -54,8 +54,8 @@
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
-import UIButton from '@components/button/UIButton.vue';
-import UIPanel from '@components/panel/UIPanel.vue';
+import UIButton from 'components/button/UIButton.vue';
+import UIPanel from 'components/panel/UIPanel.vue';
 import type { PropType } from 'vue';
 import { getIcon } from '@/helpers';
 

src/components/pagination/UIPagination.vue

@@ -62,9 +62,9 @@
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue';
-import { useVModel, disabled } from '@composables/input';
+import { useVModel, disabled } from 'composables/input';
 import { getIcon } from '@/helpers';
-import UIButton from '@components/button/UIButton.vue';
+import UIButton from 'components/button/UIButton.vue';
 
 export default defineComponent({
     name: 'UIPagination',

src/components/panel/UIPanel.vue

@@ -54,12 +54,12 @@
 </template>
 
 <script lang="ts">
-import UIFadeTransition from '@components/transitions/UIFadeTransition.vue';
-import UIExpandTransition from '@components/transitions/UIExpandTransition.vue';
-import UILinearLoader from '@components/loader-linear/UILinearLoader.vue';
+import UIFadeTransition from 'components/transitions/UIFadeTransition.vue';
+import UIExpandTransition from 'components/transitions/UIExpandTransition.vue';
+import UILinearLoader from 'components/loader-linear/UILinearLoader.vue';
 import LocalCache from '@/helpers/cache/LocalCache';
 import { defineComponent, ref, computed, watch } from 'vue';
-import UISpinnerLoader from '@components/loader-spinner/UISpinnerLoader.vue';
+import UISpinnerLoader from 'components/loader-spinner/UISpinnerLoader.vue';
 
 let cache: LocalCache;
 

src/components/pill/Demo.vue

@@ -11,7 +11,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { styleTypes } from '@/types';
+import { styleTypes } from 'types';
 
 export default defineComponent({
     name: 'Pill',

src/components/pill/UIPill.vue

@@ -8,9 +8,9 @@
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue';
-import { label } from '@composables/input';
-import { category } from '@composables/style';
-import { StyleType } from '@/types';
+import { label } from 'composables/input';
+import { category } from 'composables/style';
+import type { StyleType } from 'types';
 
 const categoryClasses = {
     default: 'text-gray-700 bg-gray-200',

src/components/radio/UIRadio.test.ts

@@ -2,7 +2,7 @@ import { mount } from '@vue/test-utils';
 import type { DOMWrapper } from '@vue/test-utils';
 import UIRadio from './UIRadio.vue';
 import UIRadioGroup from './UIRadioGroup.vue';
-import { disableConsoleWarn, enableConsoleWarn } from '@helpers/test';
+import { disableConsoleWarn, enableConsoleWarn } from 'helpers/test';
 
 describe('UIRadio', () => {
     it('should bind attributes to the input', () => {