hp-design-system 1.0.6 → 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hp-design-system",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "type": "module",
   "main": "dist/hp-design-system.umd.js",
   "scripts": {

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/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;
 }