chore(vue): add vue typescript support (#726)

This PR brings official TypeScript declerations support for projects
with Vue 2.7 and above.
Added docs to storybook.

Output:
```ts

import type * as Baklava from '@Trendyol/baklava/dist/baklava'

declare module 'vue' {
  export interface GlobalComponents {
    BlAlert: import("vue").Component<Baklava.BlAlert>
    BlBadge: import("vue").Component<Baklava.BlBadge>
    BlButton: import("vue").Component<Baklava.BlButton>
    BlCheckboxGroup: import("vue").Component<Baklava.BlCheckboxGroup>
    BlDialog: import("vue").Component<Baklava.BlDialog>
    BlDrawer: import("vue").Component<Baklava.BlDrawer>
    BlDropdown: import("vue").Component<Baklava.BlDropdown>
    BlIcon: import("vue").Component<Baklava.BlIcon>
    BlInput: import("vue").Component<Baklava.BlInput>
    BlPagination: import("vue").Component<Baklava.BlPagination>
    BlPopover: import("vue").Component<Baklava.BlPopover>
    BlProgressIndicator: import("vue").Component<Baklava.BlProgressIndicator>
    BlRadioGroup: import("vue").Component<Baklava.BlRadioGroup>
    BlSelect: import("vue").Component<Baklava.BlSelect>
    BlSwitch: import("vue").Component<Baklava.BlSwitch>
    BlTabGroup: import("vue").Component<Baklava.BlTabGroup>
    BlTextarea: import("vue").Component<Baklava.BlTextarea>
    BlTooltip: import("vue").Component<Baklava.BlTooltip>
  }
}
```

---------

Co-authored-by: Aykut Saraç <aykut.sarac@trendyol.com>

docs/using-baklava-in-vue.stories.mdx

@@ -86,6 +86,13 @@ Also, you can add ignore rule as compiler options to your webpack or vite.
 }
 ```
 
+### TypeScript
+
+Baklava offers TypeScript support for Vue versions 2.7 and higher. To enable this support, you should create a file named `components.d.ts` within the "src" directory and include the following line:
+```ts
+/// <reference types="@trendyol/baklava/dist/baklava-vue.d.ts" />
+```
+
 #### Eslint Configuration
 
 Baklava components are developed with `kebab case`. Eslint uses `pascal case` by default. If you are using eslint in your project, it will automatically convert the baklava components to `pascal case`. To prevent this, you need to turn off the `pascal case` rule in your project.

package.json

@@ -28,7 +28,7 @@
  "start": "npm run storybook:dev",
  "analyze": "cem analyze",
  "commit": "commit",
- "build": "del-cli dist/ && npm run analyze && npm run generate-react-exports && tsc --emitDeclarationOnly && node scripts/build.js",
+ "build": "del-cli dist/ && npm run analyze && npm run generate-react-exports && tsc --emitDeclarationOnly && node scripts/build.js && npm run generate-vue-types",
  "build-storybook": "NODE_ENV=production storybook build -o storybook-static",
  "build-storybook-docs": "storybook build --docs",
  "serve": "node scripts/build.js --serve",
@@ -54,7 +54,8 @@
  "test:watch": "web-test-runner --coverage --watch",
  "test:debug": "web-test-runner --coverage --watch --debug",
  "test:headless": "web-test-runner --coverage --watch --debug --headless",
- "generate-react-exports": "node scripts/generate-react-exports.js"
+ "generate-react-exports": "node scripts/generate-react-exports.js",
+ "generate-vue-types": "node scripts/generate-vue-types.js"
  },
  "keywords": [
  "web-components",

scripts/generate-vue-types.js

@@ -0,0 +1,18 @@
+import fs from "fs";
+
+const components = JSON.parse(fs.readFileSync("./dist/custom-elements.json", "utf-8"));
+const declerations = components.modules.flatMap(module => module.declarations);
+const customElements = declerations.filter(declaration => declaration.customElement === true);
+const customElementNames = customElements.map(customElement => customElement.name);
+
+const code = `
+import type * as Baklava from '@trendyol/baklava/dist/baklava'
+
+declare module 'vue' {
+ export interface GlobalComponents {
+ ${customElementNames.map(component => `${component}: import("vue").Component<Baklava.${component}>`).join('\n ')}
+ }
+}
+`
+
+fs.writeFileSync("./dist/baklava-vue.d.ts", code);