hp-design-system 0.0.15 → 0.1.0

package/dist/hp-design-system.es.js

@@ -1,23 +1,26 @@
-import { defineComponent as o, openBlock as r, createElementBlock as c, toDisplayString as p } from "vue";
-const u = /* @__PURE__ */ o({
+import { defineComponent as o, openBlock as r, createElementBlock as c, Fragment as l, createTextVNode as u, createElementVNode as a, toDisplayString as p } from "vue";
+const i = /* @__PURE__ */ o({
   __name: "Button",
   props: {
     text: { type: String, required: !0 }
   },
-  setup(t) {
-    return (e, a) => (r(), c("button", null, p(t.text), 1));
+  setup(e) {
+    return (t, m) => (r(), c(l, null, [
+      u(" TESTEe "),
+      a("button", null, p(e.text), 1)
+    ], 64));
   }
 }), n = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  HpButton: u
+  HpButton: i
 }, Symbol.toStringTag, { value: "Module" }));
-function l(t) {
-  Object.keys(n).forEach((e) => {
-    t.component(e, n[e]);
+function s(e) {
+  Object.keys(n).forEach((t) => {
+    e.component(t, n[t]);
   });
 }
-const s = { install: l };
+const d = { install: s };
 export {
-  u as HpButton,
-  s as default
+  i as HpButton,
+  d as default
 };

package/dist/types/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<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;

package/dist/types/components/button/Button.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryFn } from '@storybook/vue3';
+declare const meta: Meta;
+export default meta;
+export declare const Example: StoryFn<{
+    text: string;
+}>;

package/dist/types/components/index.d.ts

@@ -1,2 +1,2 @@
-import HpButton from './Button.vue';
+import HpButton from './button/Button.vue';
 export { HpButton, };

package/dist/types/main.d.ts

@@ -0,0 +1 @@
+import './style.css';

package/package.json

@@ -1,24 +1,35 @@
 {
   "name": "hp-design-system",
-  "version": "0.0.15",
+  "version": "0.1.0",
   "type": "module",
   "main": "dist/hp-design-system.umd.js",
   "scripts": {
     "dev": "vite",
     "clean:cache": "rmdir /s /q node_modules\\.vite",
     "build": "rimraf dist && vue-tsc && vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@vitejs/plugin-vue": "^5.0.5",
     "vue": "^3.4.29"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^1.5.0",
+    "@storybook/addon-essentials": "^8.1.10",
+    "@storybook/addon-interactions": "^8.1.10",
+    "@storybook/addon-links": "^8.1.10",
+    "@storybook/blocks": "^8.1.10",
+    "@storybook/test": "^8.1.10",
+    "@storybook/vue3": "^8.1.10",
+    "@storybook/vue3-vite": "^8.1.10",
     "@types/node": "^20.14.8",
     "@types/vue": "^2.0.0",
     "@vue/runtime-dom": "^3.4.30",
     "rimraf": "^5.0.1",
     "sass": "^1.63.6",
+    "storybook": "^8.1.10",
     "typescript": "^5.5.2",
     "vite": "^5.3.1",
     "vue-tsc": "^2.0.21"

package/src/App.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <HpButton text="Clique Aqui"></HpButton>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { HpButton } from './components/index';
+
+</script>
+

package/src/components/button/Button.stories.ts

@@ -0,0 +1,39 @@
+// src/components/Button/Button.stories.ts
+import type { Meta, StoryFn } from '@storybook/vue3'; // Importa StoryFn em vez de Story
+import HpButton from './Button.vue';
+
+const meta: Meta = {
+  title: 'Componentes/Button',
+  component: HpButton,
+  argTypes: {
+    text: {
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Propriedades',
+        type: {
+          summary: 'string',
+          detail: 'Tipo de texto',
+        },
+        defaultValue: { summary: 'Label padrão' },
+      },
+      description: 'Texto do botão',
+    },
+  },
+};
+
+export default meta;
+
+const Template: StoryFn<{ text: string }> = (args) => ({ // Define explicitamente o tipo de args
+  components: { HpButton },
+  setup() {
+    return { args };
+  },
+  template: '<HpButton :text="args.text" />',
+});
+
+export const Example = Template.bind({});
+Example.args = {
+  text: 'Label',
+};

package/src/components/{Button.vue → button/Button.vue}

@@ -1,4 +1,5 @@
 <template>
+TESTEe
   <button>{{ text }}</button>
 </template>
 

package/src/components/index.ts

@@ -1,4 +1,4 @@
-import HpButton from './Button.vue'
+import HpButton from './button/Button.vue'
 
 export {
   HpButton,

package/src/main.ts

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