@valcis/brand 2.0.0 → 2.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.
- package/README.md +139 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
# @valcis/brand
|
|
2
|
+
|
|
3
|
+
Componentes React de marca **valcis**: Logo SVG y Footer con soporte SSR.
|
|
4
|
+
|
|
5
|
+
## Instalación
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @valcis/brand
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Logo
|
|
12
|
+
|
|
13
|
+
Componente SVG puro, sin hooks ni estado. Compatible con React Server Components.
|
|
14
|
+
|
|
15
|
+
```tsx
|
|
16
|
+
import { Logo } from '@valcis/brand';
|
|
17
|
+
|
|
18
|
+
// Icono: <V>
|
|
19
|
+
<Logo variant="icon" size="md" />
|
|
20
|
+
|
|
21
|
+
// Completo: >valcis|
|
|
22
|
+
<Logo variant="full" size={40} />
|
|
23
|
+
|
|
24
|
+
// Animado con cursor blink
|
|
25
|
+
<Logo variant="full" size={32} animated />
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
### Props
|
|
29
|
+
|
|
30
|
+
| Prop | Tipo | Default | Descripción |
|
|
31
|
+
|------|------|---------|-------------|
|
|
32
|
+
| `variant` | `'icon' \| 'full'` | `'icon'` | Variante del logo |
|
|
33
|
+
| `size` | `number \| 'sm' \| 'md' \| 'lg' \| 'xl'` | `24` | Tamaño en px o preset |
|
|
34
|
+
| `animated` | `boolean` | `false` | Animación CSS-only (respeta `prefers-reduced-motion`) |
|
|
35
|
+
| `accentColor` | `string` | — | Color de brackets/chevron/cursor |
|
|
36
|
+
| `textColor` | `string` | — | Color de letras |
|
|
37
|
+
| `className` | `string` | — | Clase CSS adicional |
|
|
38
|
+
| `style` | `CSSProperties` | — | Estilos inline |
|
|
39
|
+
| `ariaLabel` | `string` | — | Label de accesibilidad (si se omite, es decorativo) |
|
|
40
|
+
|
|
41
|
+
### Presets de tamaño
|
|
42
|
+
|
|
43
|
+
| Preset | Pixels |
|
|
44
|
+
|--------|--------|
|
|
45
|
+
| `sm` | 16 |
|
|
46
|
+
| `md` | 24 |
|
|
47
|
+
| `lg` | 32 |
|
|
48
|
+
| `xl` | 48 |
|
|
49
|
+
|
|
50
|
+
## Footer
|
|
51
|
+
|
|
52
|
+
Footer de atribución con logo, contacto y modos de copyright.
|
|
53
|
+
|
|
54
|
+
```tsx
|
|
55
|
+
import { Footer } from '@valcis/brand';
|
|
56
|
+
|
|
57
|
+
// Uso básico
|
|
58
|
+
<Footer />
|
|
59
|
+
|
|
60
|
+
// Con datos SSR
|
|
61
|
+
<Footer initialDevInfo={devInfo} theme="dark" />
|
|
62
|
+
|
|
63
|
+
// Modo owner
|
|
64
|
+
<Footer mode="owner" />
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
### Props
|
|
68
|
+
|
|
69
|
+
| Prop | Tipo | Default | Descripción |
|
|
70
|
+
|------|------|---------|-------------|
|
|
71
|
+
| `theme` | `'light' \| 'dark'` | `'light'` | Tema visual |
|
|
72
|
+
| `mode` | `'owner' \| 'designer' \| 'partner'` | `'designer'` | Modo de copyright |
|
|
73
|
+
| `showYear` | `boolean` | `true` | Mostrar año |
|
|
74
|
+
| `showContact` | `boolean` | `true` | Mostrar email de contacto |
|
|
75
|
+
| `animatedLogo` | `boolean` | `true` | Animar el logo (cursor blink) |
|
|
76
|
+
| `variant` | `'inline' \| 'stacked'` | `'inline'` | Layout horizontal o vertical |
|
|
77
|
+
| `align` | `'left' \| 'center' \| 'right'` | `'center'` | Alineación |
|
|
78
|
+
| `position` | `'static' \| 'sticky' \| 'fixed'` | `'sticky'` | Posicionamiento CSS |
|
|
79
|
+
| `padding` | `'compact' \| 'normal' \| 'spacious' \| { x?, y? }` | `'normal'` | Densidad |
|
|
80
|
+
| `border` | `boolean \| 'top' \| 'bottom' \| 'both' \| 'none'` | `'top'` | Borde separador |
|
|
81
|
+
| `accentColor` | `string` | — | Color de acento (texto, links). No afecta al logo |
|
|
82
|
+
| `backgroundColor` | `string` | `'transparent'` | Fondo |
|
|
83
|
+
| `textColor` | `string` | — | Color de texto override |
|
|
84
|
+
| `as` | `'footer' \| 'div' \| 'section'` | `'div'` | Tag HTML |
|
|
85
|
+
| `className` | `string` | — | Clase CSS adicional |
|
|
86
|
+
| `initialDevInfo` | `DevInfo` | — | Datos pre-cargados (SSR) |
|
|
87
|
+
| `devInfoUrl` | `string` | — | URL alternativa del JSON |
|
|
88
|
+
|
|
89
|
+
### Modos de copyright
|
|
90
|
+
|
|
91
|
+
| Modo | Resultado |
|
|
92
|
+
|------|-----------|
|
|
93
|
+
| `owner` | © 2025 >valcis\| |
|
|
94
|
+
| `designer` | © 2025 · Diseñado por >valcis\| |
|
|
95
|
+
| `partner` | Powered by >valcis\| |
|
|
96
|
+
|
|
97
|
+
## SSR
|
|
98
|
+
|
|
99
|
+
```tsx
|
|
100
|
+
import { getDevInfo, Footer } from '@valcis/brand';
|
|
101
|
+
|
|
102
|
+
// Next.js
|
|
103
|
+
export async function getStaticProps() {
|
|
104
|
+
const devInfo = await getDevInfo();
|
|
105
|
+
return { props: { devInfo }, revalidate: 3600 };
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
export default function Page({ devInfo }) {
|
|
109
|
+
return <Footer initialDevInfo={devInfo} />;
|
|
110
|
+
}
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
## Assets estáticos
|
|
114
|
+
|
|
115
|
+
El paquete incluye SVGs en `assets/` para uso fuera de React:
|
|
116
|
+
|
|
117
|
+
```
|
|
118
|
+
@valcis/brand/assets/favicon.svg
|
|
119
|
+
@valcis/brand/assets/logo-icon.svg
|
|
120
|
+
@valcis/brand/assets/logo-icon-light.svg
|
|
121
|
+
@valcis/brand/assets/logo-icon-dark.svg
|
|
122
|
+
@valcis/brand/assets/logo-full.svg
|
|
123
|
+
@valcis/brand/assets/logo-full-light.svg
|
|
124
|
+
@valcis/brand/assets/logo-full-dark.svg
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
Las variantes sin sufijo son adaptativas (usan `prefers-color-scheme`).
|
|
128
|
+
|
|
129
|
+
## SVG paths
|
|
130
|
+
|
|
131
|
+
Para uso sin React, se exportan los paths SVG crudos:
|
|
132
|
+
|
|
133
|
+
```ts
|
|
134
|
+
import { V_CALLIGRAPHIC_PATH, BRACKET_LEFT_PATH, VIEWBOXES } from '@valcis/brand';
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
## Licencia
|
|
138
|
+
|
|
139
|
+
MIT
|