hp-design-system 1.0.5 → 1.0.7

package/README.md

@@ -3,3 +3,41 @@
 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).
+
+hp-design-system/
+├── src/
+│ ├── components/
+│ │ ├── Button.vue
+│ │ ├── Checkbox.vue
+│ │ └── ... (outros componentes)
+│ ├── styles/
+│ │ ├── variables.scss # Variáveis globais, como cores
+│ │ ├── colors.scss # Tokens de cores para temas claro e escuro
+│ │ ├── theme.scss # Mixins e funções para aplicação de temas
+│ │ └── global.scss # Estilos globais da biblioteca
+│ ├── composables/
+│ │ └── useTheme.ts # Composable para gerenciar o estado do tema
+│ ├── assets/
+│ │ ├── fonts/
+│ │ │ └── VarelaRound-Regular.ttf
+│ │ └── icons/
+│ │ └── ... (ícones SVG)
+│ └── main.ts # Arquivo de entrada principal
+├── stories/ # Configuração e documentação do Storybook
+│ ├── Button.stories.ts
+│ ├── Checkbox.stories.ts
+│ └── ... (outras histórias)
+├── public/ # Arquivos públicos como favicon, imagens etc.
+│ └── ...
+├── .storybook/ # Configurações do Storybook
+│ ├── main.js
+│ ├── preview.js
+│ └── manager.js
+├── dist/ # Saída de build da biblioteca
+│ └── ...
+├── tests/ # Testes unitários
+│ └── ...
+├── package.json # Configurações de dependências e scripts
+├── tsconfig.json # Configuração do TypeScript
+├── vite.config.ts # Configuração do Vite
+└── README.md # Documentação do projeto

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

@@ -1,5 +1,5 @@
-import { computed as m, openBlock as a, createElementBlock as i, normalizeClass as h, normalizeStyle as d, createElementVNode as o, defineComponent as f, createVNode as g, createCommentVNode as k, toDisplayString as l, pushScopeId as S, popScopeId as P, createTextVNode as _ } from "vue";
-const C = ["xlink:href"], b = {
+import { computed as y, openBlock as c, createElementBlock as i, normalizeClass as m, normalizeStyle as d, createElementVNode as o, defineComponent as p, createVNode as h, createCommentVNode as k, toDisplayString as l, pushScopeId as g, popScopeId as P, createTextVNode as S } from "vue";
+const _ = ["xlink:href"], f = {
   __name: "Icon",
   props: {
     name: {
@@ -16,26 +16,26 @@ const C = ["xlink:href"], b = {
     }
   },
   setup(e) {
-    const n = e, t = m(() => ({
+    const n = e, t = y(() => ({
       sm: "icon-small",
       md: "icon-medium",
       lg: "icon-large"
     })[n.size] || "icon-medium");
-    return (c, r) => (a(), i("svg", {
-      class: h(["icon", t.value]),
+    return (a, r) => (c(), i("svg", {
+      class: m(["icon", t.value]),
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
       style: d({ fill: e.color })
     }, [
       o("use", {
         "xlink:href": `#icon-${e.name}`
-      }, null, 8, C)
+      }, null, 8, _)
     ], 6));
   }
-}, x = ["aria-label", "aria-disabled"], O = {
+}, C = ["aria-label", "aria-disabled"], x = {
   key: 0,
   class: "button-icon"
-}, v = { class: "button-label" }, I = /* @__PURE__ */ f({
+}, O = { class: "button-label" }, v = /* @__PURE__ */ p({
   __name: "Button",
   props: {
     label: {
@@ -73,26 +73,26 @@ const C = ["xlink:href"], b = {
   },
   emits: ["click"],
   setup(e, { emit: n }) {
-    const t = e, c = n, r = (u) => {
-      t.disabled || c("click", u);
+    const t = e, a = n, r = (u) => {
+      t.disabled || a("click", u);
     };
-    return (u, V) => (a(), i("button", {
+    return (u, R) => (c(), i("button", {
       class: "button",
       "aria-label": e.ariaLabel || e.label,
       onClick: r,
       "aria-disabled": e.disabled
     }, [
-      e.icon ? (a(), i("span", O, [
-        g(b, {
+      e.icon ? (c(), i("span", x, [
+        h(f, {
           name: e.icon,
           size: "sm",
           color: "white"
         }, null, 8, ["name"])
       ])) : k("", !0),
-      o("span", v, l(e.label), 1)
-    ], 8, x));
+      o("span", O, l(e.label), 1)
+    ], 8, C));
   }
-}), j = (e) => (S("data-v-7d29c03a"), e = e(), P(), e), w = ["checked"], z = /* @__PURE__ */ j(() => /* @__PURE__ */ o("label", {
+}), I = (e) => (g("data-v-7d29c03a"), e = e(), P(), e), w = ["checked"], B = /* @__PURE__ */ I(() => /* @__PURE__ */ o("label", {
   class: "check",
   for: "check"
 }, [
@@ -105,7 +105,7 @@ const C = ["xlink:href"], b = {
       /* @__PURE__ */ o("polyline", { points: "1 5 4 8 11 1" })
     ])
   ])
-], -1)), B = { class: "checkbox-label" }, H = /* @__PURE__ */ f({
+], -1)), H = { class: "checkbox-label" }, j = /* @__PURE__ */ p({
   __name: "Checkbox",
   props: {
     checked: {
@@ -130,7 +130,7 @@ const C = ["xlink:href"], b = {
     }
   },
   setup(e) {
-    return (n, t) => (a(), i("div", {
+    return (n, t) => (c(), i("div", {
       class: "checkbox",
       style: d({
         "--background-color": e.backgroundColor || "#8f44fd",
@@ -145,16 +145,16 @@ const C = ["xlink:href"], b = {
         type: "checkbox",
         style: { display: "none" }
       }, null, 8, w),
-      z,
-      o("span", B, l(e.label), 1)
+      B,
+      o("span", H, l(e.label), 1)
     ], 4));
   }
-}), y = (e, n) => {
+}), b = (e, n) => {
   const t = e.__vccOpts || e;
-  for (const [c, r] of n)
-    t[c] = r;
+  for (const [a, r] of n)
+    t[a] = r;
   return t;
-}, N = /* @__PURE__ */ y(H, [["__scopeId", "data-v-7d29c03a"]]), q = {
+}, z = /* @__PURE__ */ b(j, [["__scopeId", "data-v-7d29c03a"]]), N = {
   name: "Teste",
   props: {
     textProp: {
@@ -219,8 +219,8 @@ const C = ["xlink:href"], b = {
     }
   }
 };
-function T(e, n, t, c, r, u) {
-  return a(), i("div", null, [
+function q(e, n, t, a, r, u) {
+  return c(), i("div", null, [
     o("h1", null, l(t.textProp), 1),
     o("p", null, "Boolean: " + l(t.booleanProp), 1),
     o("p", null, "Number: " + l(t.numberProp), 1),
@@ -234,7 +234,7 @@ function T(e, n, t, c, r, u) {
     o("p", null, "Object: " + l(t.objectProp), 1),
     o("p", null, "Array: " + l(t.arrayProp), 1),
     o("p", null, [
-      _(" Color: "),
+      S(" Color: "),
       o("span", {
         style: d({ backgroundColor: t.colorProp })
       }, l(t.colorProp), 5)
@@ -243,35 +243,23 @@ function T(e, n, t, c, r, u) {
     o("p", null, "File: " + l(t.fileProp ? t.fileProp.name : "No file selected"), 1)
   ]);
 }
-const A = /* @__PURE__ */ y(q, [["render", T], ["__scopeId", "data-v-65be170a"]]), s = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const T = /* @__PURE__ */ b(N, [["render", q], ["__scopeId", "data-v-65be170a"]]), s = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  HpButton: I,
-  HpCheckbox: N,
-  HpIcon: b,
-  HpTeste: A
-}, Symbol.toStringTag, { value: "Module" })), R = {
-  primary: "#3498db",
-  secondary: "#2ecc71",
-  error: "#e74c3c",
-  warning: "#f39c12",
-  success: "#2ecc71"
-}, p = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  colors: R
+  HpButton: v,
+  HpCheckbox: z,
+  HpIcon: f,
+  HpTeste: T
 }, Symbol.toStringTag, { value: "Module" }));
-function E(e) {
+function A(e) {
   Object.keys(s).forEach((n) => {
     e.component(n, s[n]);
-  }), Object.keys(p).forEach((n) => {
-    e.component(n, p[n]);
   });
 }
-const M = { install: E };
+const D = { install: A };
 export {
-  I as HpButton,
-  N as HpCheckbox,
-  b as HpIcon,
-  A as HpTeste,
-  R as colors,
-  M as default
+  v as HpButton,
+  z as HpCheckbox,
+  f as HpIcon,
+  T as HpTeste,
+  D as default
 };

package/dist/types/{index.d.ts → src/index.d.ts}

@@ -5,4 +5,3 @@ declare const _default: {
 };
 export default _default;
 export * from './components';
-export * from './views/tokens';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hp-design-system",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "type": "module",
   "main": "dist/hp-design-system.umd.js",
   "scripts": {
@@ -72,7 +72,6 @@
     ".": {
       "types": "./dist/types/index.d.ts",
       "import": "./dist/hp-design-system.es.js"
-      
     },
     "./dist/style.scss": "./dist/style.scss",
     "./styles/colors.scss": "./styles/colors.scss"

package/src/App.vue

@@ -23,10 +23,11 @@
     <Icon name="AA0010" size="lg" color="red" />
     <Icon name="AA0010" size="md" color="green" />
     <Icon name="AA0010" size="sm" color="blue" /> -->
+    <HpIcon name="AA0020" size="lg" color="red" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { HpButton, HpCheckbox } from './components/index'
-import Icon from './components/icons/Icon/Icon.vue'
+import { HpButton, HpCheckbox, HpIcon } from './components/index'
+// import Icon from './components/icons/icon/Icon.vue'
 </script>

package/src/components/button/Button.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script setup lang="ts">
-import Icon from '../icons/Icon/Icon.vue'
+import Icon from '../icons/icon/Icon.vue'
 
 const props = defineProps({
   label: {

package/src/components/icons/iconList/IconList.vue

@@ -103,7 +103,7 @@
 <script setup>
 import { computed } from 'vue'
 import IconListButton from './components/IconListButton.vue'
-import AllIcons from '../../../../public/assets/icons/icons.json'
+import AllIcons from '@assets/icons/icons.json'
 
 const props = defineProps({
   color: {

package/src/components/icons/iconList/components/IconListButton.vue

@@ -14,7 +14,7 @@
 </template>
 
 <script lang="ts" setup>
-import Icon from '../../Icon/Icon.vue'
+import Icon from '../../icon/Icon.vue'
 
 defineProps({
   isDarkMode: {

package/src/components/index.ts

@@ -1,6 +1,6 @@
 import HpButton from './button/Button.vue'
 import HpCheckbox from './inputs/checkbox/Checkbox.vue'
-import HpIcon from './icons//Icon/Icon.vue'
+import HpIcon from './icons/icon/Icon.vue'
 import HpTeste from './teste/Teste.vue'
 
 export { HpButton, HpCheckbox, HpIcon, HpTeste }

package/src/index.ts

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

package/src/style.scss

@@ -1,27 +1,27 @@
 @font-face {
   font-family: 'Quicksand';
-  src: url('../public/assets/fonts/Quicksand-Regular.ttf') format('truetype');
+  src: url('@assets/fonts/Quicksand-Regular.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Quicksand';
-  src: url('../public/assets/fonts/Quicksand-Bold.ttf') format('truetype');
+  src: url('@assets/fonts/Quicksand-Bold.ttf') format('truetype');
   font-weight: bold;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Quicksand';
-  src: url('../public/assets/fonts/Quicksand-Italic.ttf') format('truetype');
+  src: url('@assets/fonts/Quicksand-Italic.ttf') format('truetype');
   font-weight: normal;
   font-style: italic;
 }
 
 @font-face {
   font-family: 'Quicksand';
-  src: url('../public/assets/fonts/Quicksand-BoldItalic.ttf') format('truetype');
+  src: url('@assets/fonts/Quicksand-BoldItalic.ttf') format('truetype');
   font-weight: bold;
   font-style: italic;
 }

package/src/styles/colors.scss

@@ -0,0 +1,28 @@
+// colors.scss
+
+// Paleta de Cores para o Modo Claro
+$color-primary-light: #3498db;
+$color-secondary-light: #2ecc71;
+$color-background-light: #ffffff;
+$color-text-light: #333333;
+
+// Paleta de Cores para o Modo Escuro
+$color-primary-dark: #2980b9;
+$color-secondary-dark: #27ae60;
+$color-background-dark: #121212;
+$color-text-dark: #ffffff;
+
+// Mapas de Cores
+$light-theme-colors: (
+  primary: $color-primary-light,
+  secondary: $color-secondary-light,
+  background: $color-background-light,
+  text: $color-text-light,
+);
+
+$dark-theme-colors: (
+  primary: $color-primary-dark,
+  secondary: $color-secondary-dark,
+  background: $color-background-dark,
+  text: $color-text-dark,
+);

package/src/{assets/themes.scss → styles/theme.scss}

@@ -19,3 +19,15 @@ $check-color: $light-check-color;
   $border-color: $dark-border-color;
   $check-color: $dark-check-color;
 }
+
+// theme.scss
+
+@mixin theme-colors($theme) {
+  background-color: map-get($theme, background);
+  color: map-get($theme, text);
+
+  // Exemplo de como usar as outras cores do tema
+  a {
+    color: map-get($theme, primary);
+  }
+}

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

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

package/dist/types/components/icons/Icon/Icon.stories.d.ts

@@ -1,8 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/vue3';
-declare const meta: Meta;
-export default meta;
-export declare const Default: StoryFn<{
-    name: string;
-    size: string;
-    color: string;
-}>;

package/dist/types/components/inputs/checkbox/Checkbox.stories.d.ts

@@ -1,10 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/vue3';
-declare const meta: Meta;
-export default meta;
-export declare const Example: StoryFn<{
-    checked: boolean;
-    label: string;
-    backgroundColor: string;
-    checkColor: string;
-    borderColor: string;
-}>;

package/dist/types/views/tokens/Colors.d.ts

@@ -1,7 +0,0 @@
-export declare const colors: {
-    primary: string;
-    secondary: string;
-    error: string;
-    warning: string;
-    success: string;
-};

package/dist/types/views/tokens/Colors.stories.d.ts

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

package/dist/types/views/tokens/Sizes.vue.d.ts

@@ -1,2 +0,0 @@
-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/views/tokens/index.d.ts

@@ -1,2 +0,0 @@
-import { colors } from './Colors';
-export { colors };

package/src/assets/main.scss

@@ -1,10 +0,0 @@
-// @font-face {
-//   font-family: 'VarelaRound';
-//   src: url('./fonts/Quicksand.ttf') format('truetype');
-//   font-weight: normal;
-//   font-style: normal;
-// }
-
-// * {
-//   font-family: 'Quicksand', sans-serif;
-// }

package/src/assets/styles/colors.scss

@@ -1,5 +0,0 @@
-$primary-color: #3498db;
-$secondary-color: #2ecc71;
-$error-color: #e74c3c;
-$warning-color: #f39c12;
-$success-color: #2ecc71;

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

@@ -1,39 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/vue3'
-import HpButton from './Button.vue'
-
-const meta: Meta = {
-  title: 'Componentes/Button',
-  component: HpButton,
-  argTypes: {
-    label: {
-      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<{ label: string }> = (args) => ({
-  // Define explicitamente o tipo de args
-  components: { HpButton },
-  setup() {
-    return { args }
-  },
-  template: '<HpButton :label="args.label" />'
-})
-
-export const Example = Template.bind({})
-Example.args = {
-  label: 'Label'
-}

package/src/components/icons/Icon/Icon.stories.ts

@@ -1,68 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/vue3'
-import Icon from './Icon.vue'
-import AllIcons from '../../../../public/assets/icons/icons.json'
-
-const meta: Meta = {
-  title: 'Foundation/Icons/Icon',
-  component: Icon,
-  argTypes: {
-    name: {
-      control: 'select',
-      options: AllIcons,
-      description: 'Identificador do ícone',
-      table: {
-        category: 'Propriedades',
-        disable: false,
-        sortOrder: 1
-      }
-    },
-    size: {
-      control: 'select',
-      options: ['sm', 'md', 'lg'],
-      description: 'Tamanho do ícone',
-      table: {
-        category: 'Propriedades',
-        type: {
-          summary: 'string',
-          detail: "sm(small): '1rem'\nmd(medium): '2rem'\nlg(large): '3rem'"
-        },
-        defaultValue: { summary: 'md' },
-        disable: false,
-        sortOrder: 2
-      }
-    },
-    color: {
-      control: 'color',
-      description: 'Cor em formato hexadecimal, rgb ou nome da cor',
-      table: {
-        category: 'Propriedades',
-        type: {
-          summary: 'string',
-          detail: "hex: '#ccc'\nrgb: 'rgb(204, 204, 204)'\nnome: 'grey'"
-        },
-        defaultValue: { summary: '#000000' },
-        disable: false,
-        sortOrder: 3
-      }
-    }
-  }
-}
-
-export default meta
-
-const Template: StoryFn<{ name: string; size: string; color: string }> = (
-  args
-) => ({
-  components: { Icon },
-  setup() {
-    return { args }
-  },
-  template: '<Icon :name="args.name" :size="args.size" :color="args.color" />'
-})
-
-export const Default = Template.bind({})
-Default.args = {
-  name: 'AA0010',
-  size: 'md',
-  color: '#ccc'
-}

package/src/components/icons/iconList/IconList.stories.ts

@@ -1,51 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/vue3'
-import IconList from './IconList.vue'
-
-// Definindo o tipo dos argumentos
-interface IconListArgs {
-  color: string
-}
-
-const meta: Meta = {
-  title: 'Foundation/Icons/AllIcons',
-  component: IconList,
-  argTypes: {
-    color: {
-      control: 'color',
-      description: 'Cor em formato hexadecimal, rgb ou nome da cor',
-      table: {
-        category: 'Propriedades',
-        type: {
-          summary: 'string',
-          detail: "hex: '#ccc'\nrgb: 'rgb(204, 204, 204)'\nnome: 'grey'"
-        },
-        defaultValue: { summary: '#000000' },
-        disable: false,
-        sortOrder: 3
-      }
-    }
-  }
-}
-
-export default meta
-
-const Template: StoryFn<IconListArgs> = (args) => ({
-  components: { IconList },
-  setup() {
-    return { args }
-  },
-  template: '<IconList v-bind="args" />'
-})
-
-export const Default = Template.bind({})
-Default.args = {
-  color: '#757abf'
-}
-
-Default.parameters = {
-  docs: {
-    source: {
-      code: `<IconList :color="color" />`
-    }
-  }
-}