hp-design-system 1.0.1 → 1.0.2

package/dist/types/components/teste/Teste.vue.d.ts

@@ -0,0 +1,146 @@
+declare const _default: import("vue").DefineComponent<{
+    textProp: {
+        type: StringConstructor;
+        default: string;
+    };
+    booleanProp: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    numberProp: {
+        type: NumberConstructor;
+        default: number;
+    };
+    rangeProp: {
+        type: NumberConstructor;
+        default: number;
+    };
+    radioProp: {
+        type: StringConstructor;
+        default: string;
+    };
+    inlineRadioProp: {
+        type: StringConstructor;
+        default: string;
+    };
+    checkProp: {
+        type: ArrayConstructor;
+        default: () => string[];
+    };
+    inlineCheckProp: {
+        type: ArrayConstructor;
+        default: () => string[];
+    };
+    selectProp: {
+        type: StringConstructor;
+        default: string;
+    };
+    multiSelectProp: {
+        type: ArrayConstructor;
+        default: () => string[];
+    };
+    objectProp: {
+        type: ObjectConstructor;
+        default: () => {
+            key1: string;
+            key2: string;
+        };
+    };
+    arrayProp: {
+        type: ArrayConstructor;
+        default: () => string[];
+    };
+    colorProp: {
+        type: StringConstructor;
+        default: string;
+    };
+    dateProp: {
+        type: StringConstructor;
+        default: string;
+    };
+    fileProp: {
+        type: ObjectConstructor;
+        default: null;
+    };
+}, any, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    textProp: {
+        type: StringConstructor;
+        default: string;
+    };
+    booleanProp: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    numberProp: {
+        type: NumberConstructor;
+        default: number;
+    };
+    rangeProp: {
+        type: NumberConstructor;
+        default: number;
+    };
+    radioProp: {
+        type: StringConstructor;
+        default: string;
+    };
+    inlineRadioProp: {
+        type: StringConstructor;
+        default: string;
+    };
+    checkProp: {
+        type: ArrayConstructor;
+        default: () => string[];
+    };
+    inlineCheckProp: {
+        type: ArrayConstructor;
+        default: () => string[];
+    };
+    selectProp: {
+        type: StringConstructor;
+        default: string;
+    };
+    multiSelectProp: {
+        type: ArrayConstructor;
+        default: () => string[];
+    };
+    objectProp: {
+        type: ObjectConstructor;
+        default: () => {
+            key1: string;
+            key2: string;
+        };
+    };
+    arrayProp: {
+        type: ArrayConstructor;
+        default: () => string[];
+    };
+    colorProp: {
+        type: StringConstructor;
+        default: string;
+    };
+    dateProp: {
+        type: StringConstructor;
+        default: string;
+    };
+    fileProp: {
+        type: ObjectConstructor;
+        default: null;
+    };
+}>>, {
+    textProp: string;
+    booleanProp: boolean;
+    numberProp: number;
+    rangeProp: number;
+    radioProp: string;
+    inlineRadioProp: string;
+    checkProp: unknown[];
+    inlineCheckProp: unknown[];
+    selectProp: string;
+    multiSelectProp: unknown[];
+    objectProp: Record<string, any>;
+    arrayProp: unknown[];
+    colorProp: string;
+    dateProp: string;
+    fileProp: Record<string, any>;
+}, {}>;
+export default _default;

package/dist/types/main.d.ts

@@ -1 +1,2 @@
 import './style.css';
+import 'virtual:svg-icons-register';

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

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

package/dist/types/views/tokens/Sizes.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/package.json

@@ -1,11 +1,12 @@
 {
   "name": "hp-design-system",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "type": "module",
   "main": "dist/hp-design-system.umd.js",
   "scripts": {
     "dev": "vite",
     "clean:cache": "rmdir /s /q node_modules\\.vite",
+    "generate-icons": "ts-node src/scripts/generateIconList.ts",
     "build": "rimraf dist && vue-tsc && vite build",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
@@ -16,7 +17,8 @@
   },
   "dependencies": {
     "@vitejs/plugin-vue": "^5.0.5",
-    "vue": "^3.4.29"
+    "@vue/compiler-sfc": "^3.4.35",
+    "vue": "^3.4.35"
   },
   "lint-staged": {
     "*.{js,vue,ts}": "npm run lint"
@@ -42,10 +44,11 @@
     "@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",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.10.0",
+    "eslint-plugin-prettier": "^4.2.1",
     "git-commit-msg-linter": "^2.7.0",
-    "hp-eslint-vue3": "^1.0.2",
+    "hp-eslint-vue3": "^1.0.20",
     "husky": "^7.0.4",
     "lint-staged": "^15.2.7",
     "prettier": "^3.3.2",
@@ -53,8 +56,10 @@
     "rimraf": "^5.0.1",
     "sass": "^1.63.6",
     "storybook": "^8.1.10",
-    "typescript": "^5.5.2",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.5.4",
     "vite": "^5.3.1",
+    "vite-plugin-svg-icons": "^2.0.1",
     "vue-tsc": "^2.0.21"
   },
   "files": [
@@ -68,5 +73,15 @@
       "import": "./dist/hp-design-system.es.js"
     },
     "./dist/style.css": "./dist/style.css"
+  },
+  "eslintConfig": {
+    "extends": "eslint:recommended",
+    "env": {
+      "browser": true,
+      "node": true
+    },
+    "parserOptions": {
+      "ecmaVersion": 12
+    }
   }
 }

package/src/App.vue

@@ -1,9 +1,32 @@
 <template>
-  <div>
-    <HpButton text="Clique Aqui"></HpButton>
+  <div
+    style="
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100vh;
+    "
+  >
+    <HpButton
+      label="Quero prosseguir"
+      icon="BE0010"
+      color="white"
+      icon-position="right"
+    ></HpButton>
+    <!-- <HpCheckbox
+      background-color="red"
+      border-color="green"
+      check-color="yellow"
+      label="TESTE"
+    ></HpCheckbox>
+
+    <Icon name="AA0010" size="lg" color="red" />
+    <Icon name="AA0010" size="md" color="green" />
+    <Icon name="AA0010" size="sm" color="blue" /> -->
   </div>
 </template>
 
 <script setup lang="ts">
-import { HpButton } from './components/index'
+import { HpButton, HpCheckbox } from './components/index'
+import Icon from './components/icons/Icon/Icon.vue'
 </script>

package/src/assets/main.scss

@@ -1,17 +1,10 @@
-@font-face {
-    font-family: 'myfont';
-    // src: url('fonts/myfont.woff');
-  }
-  
-  [class^='icon-'],
-  [class*=' icon-'] {
-    // font-family: 'myfont' !important;
-  }
-  
-  .icon-heart:before {
-    content: '\e9da';
-  }
-  
-  .global-example {
-    color: red;
-  }
+// @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/themes.scss

@@ -0,0 +1,21 @@
+// Light Mode Colors
+$light-background-color: #8f44fd;
+$light-border-color: #8f44fd;
+$light-check-color: #f9f9f9;
+
+// Dark Mode Colors
+$dark-background-color: #1e1e1e;
+$dark-border-color: #6f6f6f;
+$dark-check-color: #ffffff;
+
+// Default theme variables
+$background-color: $light-background-color;
+$border-color: $light-border-color;
+$check-color: $light-check-color;
+
+// Dark mode class
+.dark-mode {
+  $background-color: $dark-background-color;
+  $border-color: $dark-border-color;
+  $check-color: $dark-check-color;
+}

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

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

package/src/components/button/Button.vue

@@ -1,11 +1,100 @@
 <template>
-  <button>{{ text }}</button>
+  <button
+    class="button"
+    :aria-label="ariaLabel || label"
+    @click="handleClick"
+    :aria-disabled="disabled"
+  >
+    <span v-if="icon" class="button-icon">
+      <Icon :name="icon" size="sm" color="white" />
+    </span>
+    <span class="button-label">{{ label }}</span>
+  </button>
 </template>
 
 <script setup lang="ts">
-import { defineProps } from 'vue'
+import Icon from '../icons/Icon/Icon.vue'
 
-defineProps({
-  text: { type: String, required: true }
+const props = defineProps({
+  label: {
+    type: String,
+    required: true
+  },
+  ariaLabel: {
+    type: String,
+    default: ''
+  },
+  backgroundColor: {
+    type: String,
+    default: ''
+  },
+  labelColor: {
+    type: String,
+    default: ''
+  },
+  size: {
+    type: String,
+    default: ''
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  icon: {
+    type: String,
+    default: ''
+  },
+  iconPosition: {
+    type: String,
+    default: ''
+  }
 })
+
+const emit = defineEmits(['click'])
+
+const handleClick = (event: Event) => {
+  if (!props.disabled) {
+    emit('click', event)
+  }
+}
 </script>
+
+<style>
+.button {
+  display: flex;
+  align-items: center;
+  padding: 12px 24px;
+  border: 0;
+  border-radius: 8px;
+  min-width: 120px;
+  cursor: pointer;
+  outline: none;
+  font-size: 17px;
+  color: white;
+  font-weight: 600;
+}
+
+.button:hover {
+  transform: scale(1.0175);
+}
+
+.button:active {
+  transform: scale(0.985);
+}
+
+.button:focus {
+  border: 1px solid #333131;
+}
+
+.button:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.button-icon {
+  margin-right: 0.5rem;
+}
+.button-label {
+  display: block;
+}
+</style>

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

@@ -0,0 +1,68 @@
+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/Icon/Icon.vue

@@ -0,0 +1,59 @@
+<template>
+  <svg
+    :class="['icon', sizeClass]"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+    :style="{ fill: color }"
+  >
+    <use :xlink:href="`#icon-${name}`"></use>
+  </svg>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  name: {
+    type: String,
+    required: true
+  },
+  size: {
+    type: String,
+    default: 'md'
+  },
+  color: {
+    type: String,
+    default: 'currentColor'
+  }
+})
+
+const sizeClass = computed(() => {
+  return (
+    {
+      sm: 'icon-small',
+      md: 'icon-medium',
+      lg: 'icon-large'
+    }[props.size] || 'icon-medium'
+  )
+})
+</script>
+
+<style>
+.icon {
+  width: 2em;
+  height: 2em;
+  fill: currentColor;
+}
+.icon-small {
+  width: 1em;
+  height: 1em;
+}
+.icon-medium {
+  width: 2em;
+  height: 2em;
+}
+.icon-large {
+  width: 3em;
+  height: 3em;
+}
+</style>

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

@@ -0,0 +1,51 @@
+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" />`
+    }
+  }
+}