hp-design-system 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/.vscode/extensions.json +3 -0
  2. package/README.md +5 -0
  3. package/index.html +13 -0
  4. package/package.json +20 -0
  5. package/public/vite.svg +1 -0
  6. package/src/App.vue +30 -0
  7. package/src/assets/vue.svg +1 -0
  8. package/src/components/Button.vue +36 -0
  9. package/src/components/HelloWorld.vue +41 -0
  10. package/src/index.ts +11 -0
  11. package/src/main.ts +5 -0
  12. package/src/shims-vue.d.ts +5 -0
  13. package/src/style.css +79 -0
  14. package/src/vite-env.d.ts +1 -0
  15. package/tsconfig.app.json +27 -0
  16. package/tsconfig.json +23 -0
  17. package/tsconfig.node.json +13 -0
  18. package/vite.config.ts +22 -0
package/.vscode/extensions.json ADDED
@@ -0,0 +1,3 @@
1
+ {
2
+ "recommendations": ["Vue.volar"]
3
+ }
package/README.md ADDED
@@ -0,0 +1,5 @@
1
+ # Vue 3 + TypeScript + Vite
2
+
3
+ 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.
4
+
5
+ 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).
package/index.html ADDED
@@ -0,0 +1,13 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <link rel="icon" type="image/svg+xml" href="/vite.svg" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <title>Vite + Vue + TS</title>
8
+ </head>
9
+ <body>
10
+ <div id="app"></div>
11
+ <script type="module" src="/src/main.ts"></script>
12
+ </body>
13
+ </html>
package/package.json ADDED
@@ -0,0 +1,20 @@
1
+ {
2
+ "name": "hp-design-system",
3
+ "version": "0.0.1",
4
+ "type": "module",
5
+ "scripts": {
6
+ "dev": "vite",
7
+ "build": "vue-tsc -b && vite build",
8
+ "preview": "vite preview"
9
+ },
10
+ "dependencies": {
11
+ "vue": "^3.4.29"
12
+ },
13
+ "devDependencies": {
14
+ "@types/node": "^20.14.8",
15
+ "@vitejs/plugin-vue": "^5.0.5",
16
+ "typescript": "^5.2.2",
17
+ "vite": "^5.3.1",
18
+ "vue-tsc": "^2.0.21"
19
+ }
20
+ }
package/public/vite.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
package/src/App.vue ADDED
@@ -0,0 +1,30 @@
1
+ <script setup lang="ts">
2
+ import HpButton from './components/Button.vue'
3
+ </script>
4
+
5
+ <template>
6
+ <div>
7
+ <a href="https://vitejs.dev" target="_blank">
8
+ <img src="/vite.svg" class="logo" alt="Vite logo" />
9
+ </a>
10
+ <a href="https://vuejs.org/" target="_blank">
11
+ <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
12
+ </a>
13
+ </div>
14
+ <HpButton>TESTE</HpButton>
15
+ </template>
16
+
17
+ <style scoped>
18
+ .logo {
19
+ height: 6em;
20
+ padding: 1.5em;
21
+ will-change: filter;
22
+ transition: filter 300ms;
23
+ }
24
+ .logo:hover {
25
+ filter: drop-shadow(0 0 2em #646cffaa);
26
+ }
27
+ .logo.vue:hover {
28
+ filter: drop-shadow(0 0 2em #42b883aa);
29
+ }
30
+ </style>
package/src/assets/vue.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
package/src/components/Button.vue ADDED
@@ -0,0 +1,36 @@
1
+ <template>
2
+ <button @click="handleClick">
3
+ <slot></slot>
4
+ </button>
5
+ </template>
6
+
7
+ <script lang="ts">
8
+ import { defineComponent } from 'vue'
9
+
10
+ export default defineComponent({
11
+ name: 'HpButton',
12
+ emits: ['click'],
13
+ setup(_, { emit }) {
14
+ const handleClick = () => {
15
+ emit('click')
16
+ }
17
+
18
+ return { handleClick }
19
+ }
20
+ })
21
+ </script>
22
+
23
+ <style scoped>
24
+ button {
25
+ padding: 10px;
26
+ background-color: #42b983;
27
+ color: white;
28
+ border: none;
29
+ border-radius: 5px;
30
+ cursor: pointer;
31
+ }
32
+
33
+ button:hover {
34
+ background-color: #38a172;
35
+ }
36
+ </style>
package/src/components/HelloWorld.vue ADDED
@@ -0,0 +1,41 @@
1
+ <script setup lang="ts">
2
+ import { ref } from 'vue'
3
+
4
+ defineProps<{ msg: string }>()
5
+
6
+ const count = ref(0)
7
+ </script>
8
+
9
+ <template>
10
+ <h1>{{ msg }}</h1>
11
+
12
+ <div class="card">
13
+ <button type="button" @click="count++">count is {{ count }}</button>
14
+ <p>
15
+ Edit
16
+ <code>components/HelloWorld.vue</code> to test HMR
17
+ </p>
18
+ </div>
19
+
20
+ <p>
21
+ Check out
22
+ <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
23
+ >create-vue</a
24
+ >, the official Vue + Vite starter
25
+ </p>
26
+ <p>
27
+ Learn more about IDE Support for Vue in the
28
+ <a
29
+ href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
30
+ target="_blank"
31
+ >Vue Docs Scaling up Guide</a
32
+ >.
33
+ </p>
34
+ <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
35
+ </template>
36
+
37
+ <style scoped>
38
+ .read-the-docs {
39
+ color: #888;
40
+ }
41
+ </style>
package/src/index.ts ADDED
@@ -0,0 +1,11 @@
1
+ import { App } from 'vue'
2
+ import HpButton from './components/Button.vue'
3
+
4
+ const HpDesignSystem = {
5
+ install(app: App) {
6
+ app.component('HpButton', HpButton)
7
+ }
8
+ }
9
+
10
+ export default HpDesignSystem
11
+ export { HpButton }
package/src/main.ts ADDED
@@ -0,0 +1,5 @@
1
+ import { createApp } from 'vue'
2
+ import './style.css'
3
+ import App from './App.vue'
4
+
5
+ createApp(App).mount('#app')
package/src/shims-vue.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ declare module '*.vue' {
2
+ import { DefineComponent } from 'vue'
3
+ const component: DefineComponent<{}, {}, any>
4
+ export default component
5
+ }
package/src/style.css ADDED
@@ -0,0 +1,79 @@
1
+ :root {
2
+ font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
3
+ line-height: 1.5;
4
+ font-weight: 400;
5
+
6
+ color-scheme: light dark;
7
+ color: rgba(255, 255, 255, 0.87);
8
+ background-color: #242424;
9
+
10
+ font-synthesis: none;
11
+ text-rendering: optimizeLegibility;
12
+ -webkit-font-smoothing: antialiased;
13
+ -moz-osx-font-smoothing: grayscale;
14
+ }
15
+
16
+ a {
17
+ font-weight: 500;
18
+ color: #646cff;
19
+ text-decoration: inherit;
20
+ }
21
+ a:hover {
22
+ color: #535bf2;
23
+ }
24
+
25
+ body {
26
+ margin: 0;
27
+ display: flex;
28
+ place-items: center;
29
+ min-width: 320px;
30
+ min-height: 100vh;
31
+ }
32
+
33
+ h1 {
34
+ font-size: 3.2em;
35
+ line-height: 1.1;
36
+ }
37
+
38
+ button {
39
+ border-radius: 8px;
40
+ border: 1px solid transparent;
41
+ padding: 0.6em 1.2em;
42
+ font-size: 1em;
43
+ font-weight: 500;
44
+ font-family: inherit;
45
+ background-color: #1a1a1a;
46
+ cursor: pointer;
47
+ transition: border-color 0.25s;
48
+ }
49
+ button:hover {
50
+ border-color: #646cff;
51
+ }
52
+ button:focus,
53
+ button:focus-visible {
54
+ outline: 4px auto -webkit-focus-ring-color;
55
+ }
56
+
57
+ .card {
58
+ padding: 2em;
59
+ }
60
+
61
+ #app {
62
+ max-width: 1280px;
63
+ margin: 0 auto;
64
+ padding: 2rem;
65
+ text-align: center;
66
+ }
67
+
68
+ @media (prefers-color-scheme: light) {
69
+ :root {
70
+ color: #213547;
71
+ background-color: #ffffff;
72
+ }
73
+ a:hover {
74
+ color: #747bff;
75
+ }
76
+ button {
77
+ background-color: #f9f9f9;
78
+ }
79
+ }
package/src/vite-env.d.ts ADDED
@@ -0,0 +1 @@
1
+ /// <reference types="vite/client" />
package/tsconfig.app.json ADDED
@@ -0,0 +1,27 @@
1
+ {
2
+ "compilerOptions": {
3
+ "composite": true,
4
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
5
+ "target": "ES2020",
6
+ "useDefineForClassFields": true,
7
+ "module": "ESNext",
8
+ "lib": ["ES2020", "DOM", "DOM.Iterable"],
9
+ "skipLibCheck": true,
10
+
11
+ /* Bundler mode */
12
+ "moduleResolution": "bundler",
13
+ "allowImportingTsExtensions": true,
14
+ "resolveJsonModule": true,
15
+ "isolatedModules": true,
16
+ "moduleDetection": "force",
17
+ "noEmit": true,
18
+ "jsx": "preserve",
19
+
20
+ /* Linting */
21
+ "strict": true,
22
+ "noUnusedLocals": true,
23
+ "noUnusedParameters": true,
24
+ "noFallthroughCasesInSwitch": true
25
+ },
26
+ "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
27
+ }
package/tsconfig.json ADDED
@@ -0,0 +1,23 @@
1
+ {
2
+ "compilerOptions": {
3
+ "target": "esnext",
4
+ "useDefineForClassFields": true,
5
+ "module": "esnext",
6
+ "moduleResolution": "node",
7
+ "strict": true,
8
+ "jsx": "preserve",
9
+ "sourceMap": true,
10
+ "resolveJsonModule": true,
11
+ "esModuleInterop": true,
12
+ "lib": ["esnext", "dom"],
13
+ "skipLibCheck": true,
14
+ "types": ["vite/client", "node"]
15
+ },
16
+ "include": [
17
+ "src/**/*.ts",
18
+ "src/**/*.d.ts",
19
+ "src/**/*.tsx",
20
+ "src/**/*.vue"
21
+ ],
22
+ "exclude": ["node_modules"]
23
+ }
package/tsconfig.node.json ADDED
@@ -0,0 +1,13 @@
1
+ {
2
+ "compilerOptions": {
3
+ "composite": true,
4
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
5
+ "skipLibCheck": true,
6
+ "module": "ESNext",
7
+ "moduleResolution": "bundler",
8
+ "allowSyntheticDefaultImports": true,
9
+ "strict": true,
10
+ "noEmit": true
11
+ },
12
+ "include": ["vite.config.ts"]
13
+ }
package/vite.config.ts ADDED
@@ -0,0 +1,22 @@
1
+ import { defineConfig } from 'vite'
2
+ import vue from '@vitejs/plugin-vue'
3
+ import path from 'path'
4
+
5
+ export default defineConfig({
6
+ plugins: [vue()],
7
+ build: {
8
+ lib: {
9
+ entry: path.resolve(__dirname, 'src/index.ts'),
10
+ name: 'HpDesignSystem',
11
+ fileName: (format) => `hp-design-system.${format}.js`
12
+ },
13
+ rollupOptions: {
14
+ external: ['vue'],
15
+ output: {
16
+ globals: {
17
+ vue: 'Vue'
18
+ }
19
+ }
20
+ }
21
+ }
22
+ })