hp-design-system 1.0.19 → 1.0.21

package/src/components/inputs/checkbox/Checkbox.vue

@@ -1,53 +0,0 @@
-<template>
-  <div
-    class="checkbox"
-    :style="{
-      '--background-color': backgroundColor || '#8f44fd',
-      '--border-color': borderColor || '#8f44fd',
-      '--check-color': checkColor || '#f9f9f9'
-    }"
-  >
-    <input
-      class="input"
-      id="check"
-      :checked="checked"
-      type="checkbox"
-      style="display: none"
-    />
-    <label class="check" for="check">
-      <span>
-        <svg width="12px" height="9px" viewbox="0 0 12 9">
-          <polyline points="1 5 4 8 11 1"></polyline>
-        </svg>
-      </span>
-    </label>
-    <span class="checkbox-label">{{ label }}</span>
-  </div>
-</template>
-
-<script setup lang="ts">
-defineProps({
-  checked: {
-    type: Boolean,
-    required: false
-  },
-  label: {
-    type: String,
-    required: false
-  },
-  backgroundColor: {
-    type: String,
-    required: false
-  },
-  checkColor: {
-    type: String,
-    required: false
-  },
-  borderColor: {
-    type: String,
-    required: false
-  }
-})
-</script>
-
-<style lang="scss" scoped src="./Checkbox.scss" />

package/src/components/teste/Teste.stories.ts

@@ -1,214 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/vue3'
-import Teste from './Teste.vue'
-
-const meta: Meta = {
-  title: 'Example/Teste',
-  component: Teste,
-  argTypes: {
-    textProp: {
-      control: 'text',
-      description: 'Texto exibido no componente',
-      table: {
-        category: 'Propriedades',
-        type: { summary: 'string' },
-        defaultValue: { summary: '' }
-      }
-    },
-    booleanProp: {
-      control: 'boolean',
-      description: 'Valor booleano para o componente',
-      table: {
-        category: 'Propriedades',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' }
-      }
-    },
-    numberProp: {
-      control: 'number',
-      description: 'Valor numérico para o componente',
-      table: {
-        category: 'Propriedades',
-        type: { summary: 'number' },
-        defaultValue: { summary: '0' }
-      }
-    },
-    rangeProp: {
-      control: { type: 'range', min: 0, max: 100, step: 1 },
-      description: 'Valor dentro do intervalo definido',
-      table: {
-        category: 'Propriedades',
-        type: { summary: 'number' },
-        defaultValue: { summary: '0' }
-      }
-    },
-    radioProp: {
-      control: 'radio',
-      options: ['Option 1', 'Option 2', 'Option 3'],
-      description: 'Opção selecionada',
-      table: {
-        category: 'Propriedades',
-        type: { summary: 'string' },
-        defaultValue: { summary: 'Option 1' }
-      }
-    },
-    inlineRadioProp: {
-      control: 'inline-radio',
-      options: ['Option 1', 'Option 2', 'Option 3'],
-      description: 'Opção selecionada em linha',
-      table: {
-        category: 'Propriedades',
-        type: { summary: 'string' },
-        defaultValue: { summary: 'Option 1' }
-      }
-    },
-    checkProp: {
-      control: 'check',
-      options: ['Option 1', 'Option 2', 'Option 3'],
-      description: 'Opções selecionadas',
-      table: {
-        category: 'Propriedades',
-        type: { summary: 'string[]' },
-        defaultValue: { summary: '[]' }
-      }
-    },
-    inlineCheckProp: {
-      control: 'inline-check',
-      options: ['Option 1', 'Option 2', 'Option 3'],
-      description: 'Opções selecionadas em linha',
-      table: {
-        category: 'Propriedades',
-        type: { summary: 'string[]' },
-        defaultValue: { summary: '[]' }
-      }
-    },
-    selectProp: {
-      control: 'select',
-      options: ['Option 1', 'Option 2', 'Option 3'],
-      description: 'Opção selecionada',
-      table: {
-        category: 'Propriedades',
-        type: { summary: 'string' },
-        defaultValue: { summary: 'Option 1' }
-      }
-    },
-    multiSelectProp: {
-      control: 'multi-select',
-      options: ['Option 1', 'Option 2', 'Option 3'],
-      description: 'Opções selecionadas',
-      table: {
-        category: 'Propriedades',
-        type: { summary: 'string[]' },
-        defaultValue: { summary: '[]' }
-      }
-    },
-    objectProp: {
-      control: 'object',
-      description: 'Objeto para o componente',
-      table: {
-        category: 'Propriedades',
-        type: { summary: 'object' },
-        defaultValue: { summary: '{}' }
-      }
-    },
-    arrayProp: {
-      control: 'object',
-      description: 'Array para o componente',
-      table: {
-        category: 'Propriedades',
-        type: { summary: 'array' },
-        defaultValue: { summary: '[]' }
-      }
-    },
-    colorProp: {
-      control: 'color',
-      description: 'Cor em formato hexadecimal, rgb ou nome da cor',
-      table: {
-        category: 'Propriedades',
-        type: { summary: 'string' },
-        defaultValue: { summary: '#000000' }
-      }
-    },
-    dateProp: {
-      control: 'date',
-      description: 'Data no formato ISO',
-      table: {
-        category: 'Propriedades',
-        type: { summary: 'string' },
-        defaultValue: { summary: new Date().toISOString().substr(0, 10) }
-      }
-    },
-    fileProp: {
-      control: 'file',
-      description: 'Arquivo selecionado',
-      table: {
-        category: 'Propriedades',
-        type: { summary: 'File' },
-        defaultValue: { summary: 'null' }
-      }
-    }
-  }
-}
-
-export default meta
-
-const Template: StoryFn<{
-  textProp: string
-  booleanProp: boolean
-  numberProp: number
-  rangeProp: number
-  radioProp: string
-  inlineRadioProp: string
-  checkProp: string[]
-  inlineCheckProp: string[]
-  selectProp: string
-  multiSelectProp: string[]
-  objectProp: Record<string, any>
-  arrayProp: any[]
-  colorProp: string
-  dateProp: string
-  fileProp: File | null
-}> = (args) => ({
-  components: { Teste },
-  setup() {
-    return { args }
-  },
-  template: '<Teste v-bind="args" />'
-})
-
-export const Primary = Template.bind({})
-Primary.args = {
-  textProp: 'Hello Storybook',
-  booleanProp: true,
-  numberProp: 42,
-  rangeProp: 50,
-  radioProp: 'Option 1',
-  inlineRadioProp: 'Option 1',
-  checkProp: ['Option 1', 'Option 3'],
-  inlineCheckProp: ['Option 1', 'Option 3'],
-  selectProp: 'Option 2',
-  multiSelectProp: ['Option 1', 'Option 2'],
-  objectProp: { key1: 'value1', key2: 'value2' },
-  arrayProp: ['Item 1', 'Item 2'],
-  colorProp: '#ff00ff',
-  dateProp: new Date().toISOString().substr(0, 10),
-  fileProp: null
-}
-
-export const Secondary = Template.bind({})
-Secondary.args = {
-  textProp: 'Secondary Story',
-  booleanProp: false,
-  numberProp: 24,
-  rangeProp: 25,
-  radioProp: 'Option 2',
-  inlineRadioProp: 'Option 2',
-  checkProp: ['Option 2'],
-  inlineCheckProp: ['Option 2'],
-  selectProp: 'Option 1',
-  multiSelectProp: ['Option 2', 'Option 3'],
-  objectProp: { keyA: 'valueA', keyB: 'valueB' },
-  arrayProp: ['Item A', 'Item B'],
-  colorProp: '#00ff00',
-  dateProp: new Date().toISOString().substr(0, 10),
-  fileProp: null
-}

package/src/components/teste/Teste.vue

@@ -1,96 +0,0 @@
-<template>
-  <div>
-    <h1>{{ textProp }}</h1>
-    <p>Boolean: {{ booleanProp }}</p>
-    <p>Number: {{ numberProp }}</p>
-    <p>Range: {{ rangeProp }}</p>
-    <p>Radio: {{ radioProp }}</p>
-    <p>Inline Radio: {{ inlineRadioProp }}</p>
-    <p>Check: {{ checkProp }}</p>
-    <p>Inline Check: {{ inlineCheckProp }}</p>
-    <p>Select: {{ selectProp }}</p>
-    <p>Multi-Select: {{ multiSelectProp }}</p>
-    <p>Object: {{ objectProp }}</p>
-    <p>Array: {{ arrayProp }}</p>
-    <p>
-      Color:
-      <span :style="{ backgroundColor: colorProp }">{{ colorProp }}</span>
-    </p>
-    <p>Date: {{ dateProp }}</p>
-    <p>File: {{ fileProp ? fileProp.name : 'No file selected' }}</p>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'Teste',
-  props: {
-    textProp: {
-      type: String,
-      default: 'Hello Storybook'
-    },
-    booleanProp: {
-      type: Boolean,
-      default: true
-    },
-    numberProp: {
-      type: Number,
-      default: 42
-    },
-    rangeProp: {
-      type: Number,
-      default: 50
-    },
-    radioProp: {
-      type: String,
-      default: 'Option 1'
-    },
-    inlineRadioProp: {
-      type: String,
-      default: 'Option 1'
-    },
-    checkProp: {
-      type: Array,
-      default: () => ['Option 1', 'Option 3']
-    },
-    inlineCheckProp: {
-      type: Array,
-      default: () => ['Option 1', 'Option 3']
-    },
-    selectProp: {
-      type: String,
-      default: 'Option 2'
-    },
-    multiSelectProp: {
-      type: Array,
-      default: () => ['Option 1', 'Option 2']
-    },
-    objectProp: {
-      type: Object,
-      default: () => ({ key1: 'value1', key2: 'value2' })
-    },
-    arrayProp: {
-      type: Array,
-      default: () => ['Item 1', 'Item 2']
-    },
-    colorProp: {
-      type: String,
-      default: '#ff00ff'
-    },
-    dateProp: {
-      type: String,
-      default: new Date().toISOString().substr(0, 10)
-    },
-    fileProp: {
-      type: Object,
-      default: null
-    }
-  }
-}
-</script>
-
-<style scoped>
-div {
-  padding: 20px;
-}
-</style>

package/src/index.ts

@@ -1,14 +0,0 @@
-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,7 +0,0 @@
-import { createApp } from 'vue'
-import App from './App.vue'
-import './style.scss'
-import 'virtual:svg-icons-register'
-
-const app = createApp(App)
-app.mount('#app')

package/src/shims-vue.d.ts

@@ -1,5 +0,0 @@
-declare module '*.vue' {
-  import { DefineComponent } from 'vue'
-  const component: DefineComponent<{}, {}, any>
-  export default component
-}

package/src/style.scss

@@ -1,47 +0,0 @@
-@font-face {
-  font-family: 'Quicksand';
-  src: url('@assets/fonts/Quicksand-Regular.ttf') format('truetype');
-  font-weight: normal;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Quicksand';
-  src: url('@assets/fonts/Quicksand-Bold.ttf') format('truetype');
-  font-weight: bold;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Quicksand';
-  src: url('@assets/fonts/Quicksand-Italic.ttf') format('truetype');
-  font-weight: normal;
-  font-style: italic;
-}
-
-@font-face {
-  font-family: 'Quicksand';
-  src: url('@assets/fonts/Quicksand-BoldItalic.ttf') format('truetype');
-  font-weight: bold;
-  font-style: italic;
-}
-
-* {
-  font-family: 'Quicksand', Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-}
-
-:root {
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-$teste: #3498db;

package/src/styles/colors.scss

@@ -1,28 +0,0 @@
-// 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/styles/theme.scss

@@ -1,33 +0,0 @@
-// 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;
-}
-
-// 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);
-  }
-}