hp-design-system 0.0.16 → 0.1.0

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

@@ -4,19 +4,19 @@ const i = /* @__PURE__ */ o({
   props: {
     text: { type: String, required: !0 }
   },
-  setup(t) {
-    return (e, m) => (r(), c(l, null, [
-      u(" TESTE "),
-      a("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: i
 }, Symbol.toStringTag, { value: "Module" }));
-function s(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 d = { install: s };

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/package.json

@@ -1,24 +1,35 @@
 {
   "name": "hp-design-system",
-  "version": "0.0.16",
+  "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

@@ -1,7 +1,6 @@
 <template>
   <div>
-    OIEe
-    <HpButton :text="'Clique Aqui'"></HpButton>
+    <HpButton text="Clique Aqui"></HpButton>
   </div>
 </template>
 

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,5 +1,5 @@
 <template>
-TESTE
+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,