@dronico/droni-kit 1.0.1

package/.github/workflows/release.yml

@@ -0,0 +1,28 @@
+name: Release
+
+on:
+  push:
+    branches:
+      - main
+      - beta
+
+permissions:
+  contents: write
+  issues: write
+  pull-requests: write
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+      - run: npm i
+      - run: npm run build
+      - name: Release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: npm run release

package/.storybook/main.ts

@@ -0,0 +1,19 @@
+import type { StorybookConfig } from '@storybook/vue3-vite';
+
+const config: StorybookConfig = {
+  "stories": [
+    "../src/**/*.mdx",
+    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-essentials",
+    "@storybook/addon-onboarding",
+    "@chromatic-com/storybook",
+    "@storybook/experimental-addon-test"
+  ],
+  "framework": {
+    "name": "@storybook/vue3-vite",
+    "options": {}
+  }
+};
+export default config;

package/.storybook/preview.ts

@@ -0,0 +1,14 @@
+import type { Preview } from '@storybook/vue3'
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+       color: /(background|color)$/i,
+       date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

package/.storybook/vitest.setup.ts

@@ -0,0 +1,9 @@
+import { beforeAll } from 'vitest';
+import { setProjectAnnotations } from '@storybook/vue3';
+import * as projectAnnotations from './preview';
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+const project = setProjectAnnotations([projectAnnotations]);
+
+beforeAll(project.beforeAll);

package/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}

package/CHANGELOG.md

@@ -0,0 +1,24 @@
+## [1.0.1](https://github.com/Droni-app/droni-kit/compare/v1.0.0...v1.0.1) (2025-04-15)
+
+
+### Bug Fixes
+
+* public access ([d8b4a99](https://github.com/Droni-app/droni-kit/commit/d8b4a999d620d6f43f386e5d853722893992f8de))
+
+# 1.0.0 (2025-04-15)
+
+
+### Bug Fixes
+
+* node version ([29d60d7](https://github.com/Droni-app/droni-kit/commit/29d60d7fb761eb56124a4cc4f71bc1bb2c54f18c))
+* release node 22 ([dfa6321](https://github.com/Droni-app/droni-kit/commit/dfa6321d6912d5859164e19876e26c576979fa48))
+* remove cjs module ([40c2a53](https://github.com/Droni-app/droni-kit/commit/40c2a53fcfdb8391fcdc9ef3231d872aa7ed8cb8))
+* simple release ([9b621fb](https://github.com/Droni-app/droni-kit/commit/9b621fbd639f5c276ea87b3a5b7c2330f4867df0))
+* update package.json ([1fe5d74](https://github.com/Droni-app/droni-kit/commit/1fe5d74f263ea819e5067c50dfe66297cab499d8))
+
+
+### Features
+
+* dts plugin ([bee9bf6](https://github.com/Droni-app/droni-kit/commit/bee9bf68d7c86aab1d86c13b2f80883d1cd3f073))
+* init version ([e041521](https://github.com/Droni-app/droni-kit/commit/e0415211f2ed19162f87d6d21ad4d1bbf64746ea))
+* new action ([3295f9c](https://github.com/Droni-app/droni-kit/commit/3295f9ce5e6693ee93f4de293a726a983d387ecd))

package/README.md

@@ -0,0 +1,5 @@
+# Vue 3 + TypeScript + Vite
+
+This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).

package/dist/App.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/HelloWorld.vue.d.ts

@@ -0,0 +1,5 @@
+type __VLS_Props = {
+    msg: string;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/droni-kit.css

@@ -0,0 +1 @@
+:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}.card{padding:2em}#app{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.read-the-docs[data-v-cc337d8c]{color:#888}.logo[data-v-48d00746]{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo[data-v-48d00746]:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.vue[data-v-48d00746]:hover{filter:drop-shadow(0 0 2em #42b883aa)}

package/dist/droni-kit.js

@@ -0,0 +1,76 @@
+import { defineComponent as i, ref as g, createElementBlock as p, openBlock as u, Fragment as c, createElementVNode as t, toDisplayString as a, createTextVNode as l, createVNode as m, createApp as v } from "vue";
+const h = "/vite.svg", _ = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20aria-hidden='true'%20role='img'%20class='iconify%20iconify--logos'%20width='37.07'%20height='36'%20preserveAspectRatio='xMidYMid%20meet'%20viewBox='0%200%20256%20198'%3e%3cpath%20fill='%2341B883'%20d='M204.8%200H256L128%20220.8L0%200h97.92L128%2051.2L157.44%200h47.36Z'%3e%3c/path%3e%3cpath%20fill='%2341B883'%20d='m0%200l128%20220.8L256%200h-51.2L128%20132.48L50.56%200H0Z'%3e%3c/path%3e%3cpath%20fill='%2335495E'%20d='M50.56%200L128%20133.12L204.8%200h-47.36L128%2051.2L97.92%200H50.56Z'%3e%3c/path%3e%3c/svg%3e", f = { class: "card" }, k = /* @__PURE__ */ i({
+  __name: "HelloWorld",
+  props: {
+    msg: {}
+  },
+  setup(n) {
+    const s = g(0);
+    return (o, e) => (u(), p(c, null, [
+      t("h1", null, a(o.msg), 1),
+      t("div", f, [
+        t("button", {
+          type: "button",
+          onClick: e[0] || (e[0] = (r) => s.value++)
+        }, "count is " + a(s.value), 1),
+        e[1] || (e[1] = t("p", null, [
+          l(" Edit "),
+          t("code", null, "components/HelloWorld.vue"),
+          l(" to test HMR ")
+        ], -1))
+      ]),
+      e[2] || (e[2] = t("p", null, [
+        l(" Check out "),
+        t("a", {
+          href: "https://vuejs.org/guide/quick-start.html#local",
+          target: "_blank"
+        }, "create-vue"),
+        l(", the official Vue + Vite starter ")
+      ], -1)),
+      e[3] || (e[3] = t("p", null, [
+        l(" Learn more about IDE Support for Vue in the "),
+        t("a", {
+          href: "https://vuejs.org/guide/scaling-up/tooling.html#ide-support",
+          target: "_blank"
+        }, "Vue Docs Scaling up Guide"),
+        l(". ")
+      ], -1)),
+      e[4] || (e[4] = t("p", { class: "read-the-docs" }, "Click on the Vite and Vue logos to learn more", -1))
+    ], 64));
+  }
+}), d = (n, s) => {
+  const o = n.__vccOpts || n;
+  for (const [e, r] of s)
+    o[e] = r;
+  return o;
+}, V = /* @__PURE__ */ d(k, [["__scopeId", "data-v-cc337d8c"]]), L = /* @__PURE__ */ i({
+  __name: "App",
+  setup(n) {
+    return (s, o) => (u(), p(c, null, [
+      o[0] || (o[0] = t("div", null, [
+        t("a", {
+          href: "https://vite.dev",
+          target: "_blank"
+        }, [
+          t("img", {
+            src: h,
+            class: "logo",
+            alt: "Vite logo"
+          })
+        ]),
+        t("a", {
+          href: "https://vuejs.org/",
+          target: "_blank"
+        }, [
+          t("img", {
+            src: _,
+            class: "logo vue",
+            alt: "Vue logo"
+          })
+        ])
+      ], -1)),
+      m(V, { msg: "Vite + Vue" })
+    ], 64));
+  }
+}), w = /* @__PURE__ */ d(L, [["__scopeId", "data-v-48d00746"]]);
+v(w).mount("#app");

package/dist/droni-kit.umd.cjs

@@ -0,0 +1 @@
+(function(e,n){typeof exports=="object"&&typeof module<"u"?n(require("vue")):typeof define=="function"&&define.amd?define(["vue"],n):(e=typeof globalThis<"u"?globalThis:e||self,n(e.Vue))})(this,function(e){"use strict";const n="/vite.svg",i="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20aria-hidden='true'%20role='img'%20class='iconify%20iconify--logos'%20width='37.07'%20height='36'%20preserveAspectRatio='xMidYMid%20meet'%20viewBox='0%200%20256%20198'%3e%3cpath%20fill='%2341B883'%20d='M204.8%200H256L128%20220.8L0%200h97.92L128%2051.2L157.44%200h47.36Z'%3e%3c/path%3e%3cpath%20fill='%2341B883'%20d='m0%200l128%20220.8L256%200h-51.2L128%20132.48L50.56%200H0Z'%3e%3c/path%3e%3cpath%20fill='%2335495E'%20d='M50.56%200L128%20133.12L204.8%200h-47.36L128%2051.2L97.92%200H50.56Z'%3e%3c/path%3e%3c/svg%3e",c={class:"card"},d=e.defineComponent({__name:"HelloWorld",props:{msg:{}},setup(r){const l=e.ref(0);return(o,t)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("h1",null,e.toDisplayString(o.msg),1),e.createElementVNode("div",c,[e.createElementVNode("button",{type:"button",onClick:t[0]||(t[0]=s=>l.value++)},"count is "+e.toDisplayString(l.value),1),t[1]||(t[1]=e.createElementVNode("p",null,[e.createTextVNode(" Edit "),e.createElementVNode("code",null,"components/HelloWorld.vue"),e.createTextVNode(" to test HMR ")],-1))]),t[2]||(t[2]=e.createElementVNode("p",null,[e.createTextVNode(" Check out "),e.createElementVNode("a",{href:"https://vuejs.org/guide/quick-start.html#local",target:"_blank"},"create-vue"),e.createTextVNode(", the official Vue + Vite starter ")],-1)),t[3]||(t[3]=e.createElementVNode("p",null,[e.createTextVNode(" Learn more about IDE Support for Vue in the "),e.createElementVNode("a",{href:"https://vuejs.org/guide/scaling-up/tooling.html#ide-support",target:"_blank"},"Vue Docs Scaling up Guide"),e.createTextVNode(". ")],-1)),t[4]||(t[4]=e.createElementVNode("p",{class:"read-the-docs"},"Click on the Vite and Vue logos to learn more",-1))],64))}}),a=(r,l)=>{const o=r.__vccOpts||r;for(const[t,s]of l)o[t]=s;return o},p=a(d,[["__scopeId","data-v-cc337d8c"]]),m=a(e.defineComponent({__name:"App",setup(r){return(l,o)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[o[0]||(o[0]=e.createElementVNode("div",null,[e.createElementVNode("a",{href:"https://vite.dev",target:"_blank"},[e.createElementVNode("img",{src:n,class:"logo",alt:"Vite logo"})]),e.createElementVNode("a",{href:"https://vuejs.org/",target:"_blank"},[e.createElementVNode("img",{src:i,class:"logo vue",alt:"Vue logo"})])],-1)),e.createVNode(p,{msg:"Vite + Vue"})],64))}}),[["__scopeId","data-v-48d00746"]]);e.createApp(m).mount("#app")});

package/dist/stories/Button.stories.d.ts

@@ -0,0 +1,42 @@
+import { StoryObj } from '@storybook/vue3';
+declare const meta: {
+    title: string;
+    component: import('vue').DefineComponent<{
+        label: string;
+        primary?: boolean;
+        size?: "small" | "medium" | "large";
+        backgroundColor?: string;
+    }, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+        click: (id: number) => any;
+    }, string, import('vue').PublicProps, Readonly<{
+        label: string;
+        primary?: boolean;
+        size?: "small" | "medium" | "large";
+        backgroundColor?: string;
+    }> & Readonly<{
+        onClick?: ((id: number) => any) | undefined;
+    }>, {
+        primary: boolean;
+    }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLButtonElement>;
+    tags: string[];
+    argTypes: {
+        size: {
+            control: "select";
+            options: string[];
+        };
+        backgroundColor: {
+            control: "color";
+        };
+    };
+    args: {
+        primary: false;
+        onClick: import('@vitest/spy').Mock<(...args: any[]) => any>;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const Large: Story;
+export declare const Small: Story;
+export declare const Select: Story;

package/dist/stories/Button.vue.d.ts

@@ -0,0 +1,26 @@
+type __VLS_Props = {
+    /**
+     * The label of the button
+     */
+    label: string;
+    /**
+     * primary or secondary button
+     */
+    primary?: boolean;
+    /**
+     * size of the button
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * background color of the button
+     */
+    backgroundColor?: string;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    click: (id: number) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: ((id: number) => any) | undefined;
+}>, {
+    primary: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLButtonElement>;
+export default _default;

package/dist/stories/Header.stories.d.ts

@@ -0,0 +1,59 @@
+import { StoryObj } from '@storybook/vue3';
+declare const meta: {
+    title: string;
+    component: import('vue').DefineComponent<{
+        user: {
+            name: string;
+        } | null;
+    }, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+        createAccount: () => any;
+        login: () => any;
+        logout: () => any;
+    }, string, import('vue').PublicProps, Readonly<{
+        user: {
+            name: string;
+        } | null;
+    }> & Readonly<{
+        onCreateAccount?: (() => any) | undefined;
+        onLogin?: (() => any) | undefined;
+        onLogout?: (() => any) | undefined;
+    }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLElement>;
+    render: (args: any) => {
+        components: {
+            MyHeader: import('vue').DefineComponent<{
+                user: {
+                    name: string;
+                } | null;
+            }, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+                createAccount: () => any;
+                login: () => any;
+                logout: () => any;
+            }, string, import('vue').PublicProps, Readonly<{
+                user: {
+                    name: string;
+                } | null;
+            }> & Readonly<{
+                onCreateAccount?: (() => any) | undefined;
+                onLogin?: (() => any) | undefined;
+                onLogout?: (() => any) | undefined;
+            }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLElement>;
+        };
+        setup(this: void): {
+            args: any;
+        };
+        template: string;
+    };
+    parameters: {
+        layout: string;
+    };
+    args: {
+        onLogin: import('@vitest/spy').Mock<(...args: any[]) => any>;
+        onLogout: import('@vitest/spy').Mock<(...args: any[]) => any>;
+        onCreateAccount: import('@vitest/spy').Mock<(...args: any[]) => any>;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const LoggedIn: Story;
+export declare const LoggedOut: Story;

package/dist/stories/Header.vue.d.ts

@@ -0,0 +1,15 @@
+type __VLS_Props = {
+    user: {
+        name: string;
+    } | null;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    createAccount: () => any;
+    login: () => any;
+    logout: () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onCreateAccount?: (() => any) | undefined;
+    onLogin?: (() => any) | undefined;
+    onLogout?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLElement>;
+export default _default;

package/dist/stories/Page.stories.d.ts

@@ -0,0 +1,19 @@
+import { StoryObj } from '@storybook/vue3';
+declare const meta: {
+    title: string;
+    component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLElement>;
+    render: () => {
+        components: {
+            MyPage: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLElement>;
+        };
+        template: string;
+    };
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const LoggedIn: Story;
+export declare const LoggedOut: Story;

package/dist/stories/Page.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLElement>;
+export default _default;

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Vue + TS</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@dronico/droni-kit",
+  "author": "Gustavo Barragan <dev@droni.co>",
+  "version": "1.0.1",
+  "private": false,
+  "access": "public",
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "main": "dist/droni-kit.umd.js",
+  "module": "dist/droni-kit.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "release": "semantic-release"
+  },
+  "dependencies": {
+    "vue": "^3.5.13"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^3.2.6",
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/github": "^11.0.1",
+    "@semantic-release/npm": "^12.0.1",
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/addon-onboarding": "^8.6.12",
+    "@storybook/blocks": "^8.6.12",
+    "@storybook/experimental-addon-test": "^8.6.12",
+    "@storybook/test": "^8.6.12",
+    "@storybook/vue3": "^8.6.12",
+    "@storybook/vue3-vite": "^8.6.12",
+    "@types/node": "^22.14.1",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vitest/browser": "^3.1.1",
+    "@vitest/coverage-v8": "^3.1.1",
+    "@vue/tsconfig": "^0.7.0",
+    "playwright": "^1.51.1",
+    "semantic-release": "^24.2.3",
+    "storybook": "^8.6.12",
+    "typescript": "~5.7.2",
+    "vite": "^6.2.0",
+    "vite-plugin-dts": "^4.5.3",
+    "vitest": "^3.1.1",
+    "vue-tsc": "^2.2.4"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Droni-app/droni-kit.git"
+  }
+}

package/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/release.config.ts

@@ -0,0 +1,23 @@
+// release.config.ts
+export default {
+  branches: ['main', { name: 'beta', prerelease: true }],
+  plugins: [
+    "@semantic-release/commit-analyzer",
+    "@semantic-release/release-notes-generator",
+    [
+      "@semantic-release/changelog",
+      {
+        changelogFile: "CHANGELOG.md",
+      },
+    ],
+    "@semantic-release/npm",
+    [
+      "@semantic-release/git",
+      {
+        assets: ["package.json", "CHANGELOG.md"],
+        message: "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}",
+      },
+    ],
+    "@semantic-release/github",
+  ],
+};

package/src/App.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import HelloWorld from './components/HelloWorld.vue'
+</script>
+
+<template>
+  <div>
+    <a href="https://vite.dev" target="_blank">
+      <img src="/vite.svg" class="logo" alt="Vite logo" />
+    </a>
+    <a href="https://vuejs.org/" target="_blank">
+      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
+    </a>
+  </div>
+  <HelloWorld msg="Vite + Vue" />
+</template>
+
+<style scoped>
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.vue:hover {
+  filter: drop-shadow(0 0 2em #42b883aa);
+}
+</style>

package/src/assets/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

package/src/components/HelloWorld.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+defineProps<{ msg: string }>()
+
+const count = ref(0)
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+
+  <div class="card">
+    <button type="button" @click="count++">count is {{ count }}</button>
+    <p>
+      Edit
+      <code>components/HelloWorld.vue</code> to test HMR
+    </p>
+  </div>
+
+  <p>
+    Check out
+    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
+      >create-vue</a
+    >, the official Vue + Vite starter
+  </p>
+  <p>
+    Learn more about IDE Support for Vue in the
+    <a
+      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
+      target="_blank"
+      >Vue Docs Scaling up Guide</a
+    >.
+  </p>
+  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
+</template>
+
+<style scoped>
+.read-the-docs {
+  color: #888;
+}
+</style>

package/src/main.ts

@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import './style.css'
+import App from './App.vue'
+
+createApp(App).mount('#app')

package/src/stories/Button.stories.ts

@@ -0,0 +1,63 @@
+import { fn } from '@storybook/test';
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import Button from './Button.vue';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const meta = {
+  title: 'Example/Button',
+  component: Button,
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  argTypes: {
+    size: { control: 'select', options: ['small', 'medium', 'large'] },
+    backgroundColor: { control: 'color' },
+  },
+  args: {
+    primary: false,
+    // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+    onClick: fn(),
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary: Story = {
+  args: {
+    primary: false,
+    label: 'Button',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    primary: false,
+    label: 'Button',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    label: 'Button',
+    size: 'large',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    label: 'Button',
+    size: 'small',
+  },
+};
+
+export const Select: Story = {
+  args: {
+    primary: true,
+    label: "Button"
+  }
+};