Vue2: Improve CSF3 types

[kasperpeulen]

What I did

This PR provides improved type safety for Vue2 stories (similar to what we changed to React, Svelte and Vue3) but requires vue-tsc instead of tsc (And the Volar VS Code extension for editor support):
https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin

To unlock the full potential of this PR, TS 4.9 is needed, for the new satisfies operator. But, this also improves the types for TS<4.9 users.

Typesafe args

We changed StoryObj and Meta to increase type safety for when the user provides args partially in meta.

Considering a Component like this:

<template>
    <button type="button" class="classes" @click="onClick" :disabled="disabled">{{ label }}</button>
</template>

<script lang="ts">
import Vue from 'vue';
import './button.css';

export default Vue.extend({
    name: 'my-button',

    props: {
        label: {
            type: String,
            required: true,
        },
        disabled: {
            type: Boolean,
            default: false,
        },
    },
    methods: {
        onClick(): void {
            this.$emit('onClick');
        },
    },
});
</script>

It is valid to provide args like this:

import Button from './Button.vue';

// ✅ valid
const meta = {
  component: Button,
  args: { disabled: false },
} satisfies Meta<typeof Button>;

// or const meta = Meta<typeof Button> = { ... } in TS<4.9

export default meta;

type Story = StoryObj<typeof meta>;

export const Basic: Story = {
  args: { label: 'good' }
};

While it is invalid to forget an arg, in either meta or the story:

// ❌ invalid
const meta = {
  component: Button,
} satisfies Meta<typeof Button>;

export const Basic: Story = {
  args: { label: 'good' }
};

// ❌ invalid
const meta = {
  component: Button,
  args: { label: 'good' }
} satisfies Meta<typeof Button>;

export const Basic: Story = {};

Changed Meta to make sure both a Component, as the Props of the component can be used:

const meta = {
  component: Button,
} satisfies Meta<typeof Button>;

export default meta;

export const meta = {
  component: Button,
} satisfies Meta<{label: string; disabled: boolean} >;

export default meta;

Typesafe decorators/loaders

Decorators now accept a new generic arg argument to be specified:

const withDecorator: DecoratorFn<{ decoratorArg: string }> = (
  Story,
  { args: { decoratorArg } }
) =>
  Vue.extend({
    components: { Story },
    template: `<div>Decorator: ${decoratorArg}<Story/></div>`,
  });

And the type of meta/story will check if this arg is part of the generic type:

type Props = ButtonProps & { decoratorArg: string };

const meta = satisfies<Meta<Props>>()({
  component: Button,
  args: { disabled: false },
  decorators: [withDecorator],
});

type Story = StoryObj<typeof meta>;
const Basic: Story = { args: { decoratorArg: 0, label: 'good' } };

I also fixed some typescript issues in other files in this package.

How to test

You can test it by running: yarn nx run @storybook/vue:check

[tmeasday]

LGTM. The tests are going to stand us in very good stead!

[shilman]

💯