chore: fix type errors and add typecheck (#122)

Author: tewshi

.github/workflows/ci.yml

@@ -86,6 +86,9 @@ jobs:
       - name: Test
         run: pnpm run coverage
 
+      - name: Typecheck
+        run: pnpm run typecheck
+
       - name: Typecheck example
         run: pnpm run --filter {example} typecheck
 

src/components/tables/DataTable.spec.ts

@@ -2,11 +2,19 @@ import { describe, expect, it } from 'vitest';
 import { type ComponentMountingOptions, mount } from '@vue/test-utils';
 import DataTable, { type TableColumn } from '@/components/tables/DataTable.vue';
 
-const createWrapper = (options?: ComponentMountingOptions<typeof DataTable>) =>
-  mount(DataTable, options);
+type User = {
+  id: number;
+  name: string;
+  title: string;
+  email: string;
+};
+
+const createWrapper = (
+  options?: ComponentMountingOptions<typeof DataTable<User>>,
+) => mount(DataTable<User>, options);
 
 describe('DataTable', () => {
-  const data = [
+  const data: User[] = [
     ...[...new Array(50)].map((_, index) => ({
       id: index + 1,
       name: `Lindsay Walton ${index}`,
@@ -15,7 +23,7 @@ describe('DataTable', () => {
     })),
   ];
 
-  const columns: TableColumn[] = [
+  const columns: TableColumn<User>[] = [
     {
       key: 'id',
       label: 'ID',

src/components/tables/DataTable.stories.ts

@@ -1,11 +1,25 @@
 import Button from '@/components/buttons/button/Button.vue';
 import TextField from '@/components/forms/text-field/TextField.vue';
 import Icon from '@/components/icons/Icon.vue';
-import DataTable, { type Props, type TableColumn } from './DataTable.vue';
+import DataTable, {
+  type TableColumn,
+  type Props as TableProps,
+} from './DataTable.vue';
 import type { Meta, StoryFn, StoryObj } from '@storybook/vue3';
 
+type User = {
+  id: number;
+  name: string;
+  title: string;
+  email: string;
+  role: string;
+  date: string;
+};
+
+type Props = TableProps<User, 'id'>;
+
 const render: StoryFn<Props> = (args) => ({
-  components: { DataTable, Button, Icon, TextField },
+  components: { DataTable: DataTable<User>, Button, Icon, TextField },
   setup() {
     const modelValue = computed({
       get() {
@@ -139,7 +153,7 @@ const data = [
   })),
 ];
 
-const columns: TableColumn[] = [
+const columns: TableColumn<User>[] = [
   {
     key: 'id',
     label: 'ID',
@@ -172,7 +186,7 @@ const columns: TableColumn[] = [
 
 const meta: Meta<Props> = {
   title: 'Components/Tables/DataTable',
-  component: DataTable,
+  component: DataTable as any,
   tags: ['autodocs'],
   render,
   argTypes: {
@@ -203,8 +217,8 @@ const meta: Meta<Props> = {
           'tfoot',
           'no-data',
           'empty-description',
-          '`header.${column.key}`',
-          '`item.${column.key}`',
+          '`header.${column.key.toString()}`',
+          '`item.${column.key.toString()}`',
         ],
       },
     },

src/components/tabs/tab-items/TabItems.spec.ts

@@ -16,33 +16,33 @@ vi.mock('@headlessui/vue', () => ({
 const createWrapper = (options?: ComponentMountingOptions<typeof TabItems>) =>
   mount(TabItems, {
     ...options,
+    global: { stubs: { TabItem } },
     slots: {
       default: [
-        h(TabItem, [h('div', 'Tab Content 1')]),
-        h(TabItem, [h('div', 'Tab Content 2')]),
-        h(TabItem, [h('div', 'Tab Content 3')]),
-        h(TabItem, [h('div', 'Tab Content 4')]),
+        { template: '<TabItem><div>Tab Content 1</div></TabItem>' },
+        { template: '<TabItem><div>Tab Content 2</div></TabItem>' },
+        { template: '<TabItem><div>Tab Content 3</div></TabItem>' },
+        { template: '<TabItem><div>Tab Content 4</div></TabItem>' },
       ],
     },
   });
 
 describe('Tabs/TabItems', () => {
   it('renders properly', async () => {
-    const modelValue = ref(0);
     const wrapper = createWrapper({
       props: {
-        modelValue,
+        modelValue: 0,
       },
     });
 
     await nextTick();
     await nextTick();
     expect(wrapper.text()).toBe('Tab Content 1');
 
-    set(modelValue, 1);
-    await nextTick();
+    await wrapper.setProps({ modelValue: 1 });
     await nextTick();
     await nextTick();
+
     expect(wrapper.text()).toBe('Tab Content 2');
   });
 });

src/components/tabs/tabs/Tabs.spec.ts

@@ -13,14 +13,15 @@ const createWrapper = (options?: ComponentMountingOptions<typeof Tabs>) =>
     global: {
       stubs: {
         RouterLink: RouterLinkStub,
+        Tab,
       },
     },
     slots: {
       default: [
-        h(Tab, [h('div', 'Tab 1')]),
-        h(Tab, [h('div', 'Tab 2')]),
-        h(Tab, [h('div', 'Tab 3')]),
-        h(Tab, [h('div', 'Tab 4')]),
+        { template: '<Tab><div>Tab 1</div></Tab>' },
+        { template: '<Tab><div>Tab 2</div></Tab>' },
+        { template: '<Tab><div>Tab 3</div></Tab>' },
+        { template: '<Tab><div>Tab 4</div></Tab>' },
       ],
     },
   });
@@ -30,7 +31,7 @@ describe('Tabs/Tabs', () => {
     const modelValue = ref();
     const wrapper = createWrapper({
       props: {
-        modelValue,
+        modelValue: get(modelValue),
         'onUpdate:modelValue': (e: any) => set(modelValue, e),
       },
     });
@@ -105,7 +106,7 @@ describe('Tabs/Tabs', () => {
     const modelValue = ref();
     const wrapper = createWrapper({
       props: {
-        modelValue,
+        modelValue: get(modelValue),
         'onUpdate:modelValue': (e: any) => set(modelValue, e),
       },
     });

src/components/tabs/tabs/Tabs.stories.ts

@@ -5,7 +5,9 @@ import Card from '@/components/cards/Card.vue';
 import Tab from '@/components/tabs/tab/Tab.vue';
 import TabItems from '@/components/tabs/tab-items/TabItems.vue';
 import TabItem from '@/components/tabs/tab-item/TabItem.vue';
-import Tabs, { type Props } from './Tabs.vue';
+import Tabs, { type Props as TabsProps } from './Tabs.vue';
+
+type Props = TabsProps & { class?: string };
 
 const render: StoryFn<Props> = (args) => ({
   components: { Tabs, Tab, TabItems, TabItem, Card, Icon },
@@ -124,7 +126,7 @@ export const DefaultWithArrow: Story = {
 export const VerticalWithArrow: Story = {
   args: {
     vertical: true,
-    className: 'w-[200px] h-[300px]',
+    class: 'w-[200px] h-[300px]',
   },
 };