hp-design-system 0.0.16 → 1.0.1

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

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

package/package.json

@@ -1,24 +1,58 @@
 {
   "name": "hp-design-system",
-  "version": "0.0.16",
+  "version": "1.0.1",
   "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",
+    "lint": "eslint src/**/*.{js,vue,ts} --fix",
+    "lint:fix": "eslint src/**/*.{js,vue,ts} --fix",
+    "commitlint": "commitlint --config commitlinterrc.json"
   },
   "dependencies": {
     "@vitejs/plugin-vue": "^5.0.5",
     "vue": "^3.4.29"
   },
+  "lint-staged": {
+    "*.{js,vue,ts}": "npm run lint"
+  },
+  "husky": {
+    "hooks": {
+      "commit-msg": "npm run commitlint"
+    }
+  },
   "devDependencies": {
+    "@chromatic-com/storybook": "^1.5.0",
+    "@commitlint/cli": "^19.3.0",
+    "@commitlint/config-conventional": "^19.2.2",
+    "@commitlint/types": "^19.0.3",
+    "@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/eslint": "^8.56.10",
     "@types/node": "^20.14.8",
     "@types/vue": "^2.0.0",
     "@vue/runtime-dom": "^3.4.30",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "git-commit-msg-linter": "^2.7.0",
+    "hp-eslint-vue3": "^1.0.2",
+    "husky": "^7.0.4",
+    "lint-staged": "^15.2.7",
+    "prettier": "^3.3.2",
+    "pretty-quick": "^4.0.0",
     "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,12 +1,9 @@
 <template>
   <div>
-    OIEe
-    <HpButton :text="'Clique Aqui'"></HpButton>
+    <HpButton text="Clique Aqui"></HpButton>
   </div>
 </template>
 
 <script setup lang="ts">
-import { HpButton } from './components/index';
-
+import { HpButton } from './components/index'
 </script>
-

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

@@ -0,0 +1,40 @@
+// 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,12 +1,11 @@
-<template>
-TESTE
-  <button>{{ text }}</button>
-</template>
-
-<script setup lang="ts">
-import { defineProps } from 'vue';
-
-const props = defineProps({
-  text: { type: String, required: true }
-});
-</script>
+<template>
+  <button>{{ text }}</button>
+</template>
+
+<script setup lang="ts">
+import { defineProps } from 'vue'
+
+defineProps({
+  text: { type: String, required: true }
+})
+</script>

package/src/components/index.ts

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

package/src/index.ts

@@ -1,14 +1,14 @@
-import { App } from 'vue';
-import * as components from './components';
-
-function install(app: App) {
-  Object.keys(components).forEach(key => {
-    app.component(key, components[key as keyof typeof components]);
-  });
-}
-
-// import '../assets/main.scss';
-
-export default { install };
-
-export * from './components';
+import { App } from 'vue'
+import * as components from './components'
+
+function install (app: App) {
+  Object.keys(components).forEach((key) => {
+    app.component(key, components[key as keyof typeof components])
+  })
+}
+
+// import '../assets/main.scss';
+
+export default { install }
+
+export * from './components'

package/src/main.ts

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