@heroelc/fsociety 0.0.10 → 0.0.11
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 +327 -34
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,63 +1,356 @@
|
|
|
1
|
-
#
|
|
1
|
+
# fsociety
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
> Angular component library · Design system con tokens, mixins y componentes UI
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
[](https://www.npmjs.com/package/@heroelc/fsociety)
|
|
6
|
+
[](https://angular.io)
|
|
7
|
+
[](LICENSE)
|
|
8
|
+
[](https://heroelc.github.io/fsociety)
|
|
6
9
|
|
|
7
|
-
|
|
10
|
+
---
|
|
11
|
+
|
|
12
|
+
## Instalación
|
|
8
13
|
|
|
9
14
|
```bash
|
|
10
|
-
|
|
15
|
+
npm install @heroelc/fsociety
|
|
11
16
|
```
|
|
12
17
|
|
|
13
|
-
|
|
18
|
+
### Prerrequisitos
|
|
14
19
|
|
|
15
|
-
|
|
16
|
-
|
|
20
|
+
- Angular 19+
|
|
21
|
+
- Node 18+
|
|
22
|
+
- SCSS habilitado en el proyecto
|
|
23
|
+
|
|
24
|
+
---
|
|
25
|
+
|
|
26
|
+
## Setup rápido
|
|
27
|
+
|
|
28
|
+
### 1. Cargar los tokens en `styles.scss`
|
|
29
|
+
|
|
30
|
+
```scss
|
|
31
|
+
// src/styles.scss de tu app Angular
|
|
32
|
+
@use '@heroelc/fsociety/styles/tokens';
|
|
33
|
+
@use '@heroelc/fsociety/styles/mixins'; // opcional — clases utilitarias
|
|
17
34
|
```
|
|
18
35
|
|
|
19
|
-
|
|
36
|
+
Esto emite todas las CSS custom properties (`--fs-primary-base`, `--fs-primary-hover`, etc.) en `:root`, disponibles globalmente en toda la app.
|
|
20
37
|
|
|
21
|
-
|
|
38
|
+
### 2. Importar componentes
|
|
22
39
|
|
|
23
|
-
|
|
24
|
-
|
|
40
|
+
Los componentes son **standalone** — se importan directo en el `imports` del componente o módulo:
|
|
41
|
+
|
|
42
|
+
```typescript
|
|
43
|
+
import { FsButtonComponent } from '@heroelc/fsociety';
|
|
44
|
+
|
|
45
|
+
@Component({
|
|
46
|
+
standalone: true,
|
|
47
|
+
imports: [FsButtonComponent],
|
|
48
|
+
template: `<fs-button variant="primary">Guardar</fs-button>`
|
|
49
|
+
})
|
|
50
|
+
export class MyComponent {}
|
|
25
51
|
```
|
|
26
52
|
|
|
27
|
-
|
|
53
|
+
---
|
|
28
54
|
|
|
29
|
-
|
|
55
|
+
## Componentes
|
|
30
56
|
|
|
31
|
-
|
|
57
|
+
### `<fs-button>`
|
|
32
58
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
59
|
+
```html
|
|
60
|
+
<fs-button variant="primary" size="md">Guardar</fs-button>
|
|
61
|
+
<fs-button variant="secondary">Cancelar</fs-button>
|
|
62
|
+
<fs-button variant="outline" [disabled]="loading">Editar</fs-button>
|
|
63
|
+
<fs-button variant="ghost">Ver más →</fs-button>
|
|
64
|
+
<fs-button variant="danger">Eliminar</fs-button>
|
|
65
|
+
<fs-button [loading]="true">Guardando</fs-button>
|
|
66
|
+
```
|
|
37
67
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
68
|
+
| Input | Tipo | Default | Descripción |
|
|
69
|
+
|---|---|---|---|
|
|
70
|
+
| `variant` | `'primary' \| 'secondary' \| 'outline' \| 'ghost' \| 'danger'` | `'primary'` | Variante visual |
|
|
71
|
+
| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Tamaño |
|
|
72
|
+
| `disabled` | `boolean` | `false` | Estado deshabilitado |
|
|
73
|
+
| `loading` | `boolean` | `false` | Muestra spinner y deshabilita |
|
|
74
|
+
| `fullWidth` | `boolean` | `false` | Ocupa el 100% del contenedor |
|
|
75
|
+
| `iconLeft` | `string` | — | SVG path del ícono izquierdo |
|
|
76
|
+
| `iconRight` | `string` | — | SVG path del ícono derecho |
|
|
77
|
+
| `type` | `'button' \| 'submit' \| 'reset'` | `'button'` | Tipo HTML nativo |
|
|
42
78
|
|
|
43
|
-
|
|
79
|
+
| Output | Tipo | Descripción |
|
|
80
|
+
|---|---|---|
|
|
81
|
+
| `fsClick` | `EventEmitter<MouseEvent>` | Click (no emite si disabled o loading) |
|
|
44
82
|
|
|
45
|
-
|
|
83
|
+
---
|
|
46
84
|
|
|
47
|
-
|
|
48
|
-
|
|
85
|
+
### `<fs-badge>`
|
|
86
|
+
|
|
87
|
+
```html
|
|
88
|
+
<fs-badge color="primary">Angular</fs-badge>
|
|
89
|
+
<fs-badge color="danger" [dot]="true">Activo</fs-badge>
|
|
90
|
+
<fs-badge color="neutral" variant="outline">ESLint</fs-badge>
|
|
91
|
+
<fs-badge color="primary" [imgLeft]="'assets/icons/angular.svg'">Angular</fs-badge>
|
|
92
|
+
<fs-badge color="primary" [iconLeft]="svgPath" [removable]="true" (removed)="onRemove()">
|
|
93
|
+
TypeScript
|
|
94
|
+
</fs-badge>
|
|
95
|
+
<fs-badge color="secondary" [iconLeft]="svgPath" [iconOnly]="true"></fs-badge>
|
|
49
96
|
```
|
|
50
97
|
|
|
51
|
-
|
|
98
|
+
| Input | Tipo | Default | Descripción |
|
|
99
|
+
|---|---|---|---|
|
|
100
|
+
| `color` | `'primary' \| 'secondary' \| 'tertiary' \| 'success' \| 'warning' \| 'danger' \| 'neutral'` | `'neutral'` | Color |
|
|
101
|
+
| `variant` | `'filled' \| 'outline'` | `'filled'` | Variante visual |
|
|
102
|
+
| `size` | `'sm' \| 'md'` | `'md'` | Tamaño |
|
|
103
|
+
| `dot` | `boolean` | `false` | Punto de estado |
|
|
104
|
+
| `iconLeft` | `string` | — | SVG path ícono izquierdo (viewBox 0 0 24 24) |
|
|
105
|
+
| `iconRight` | `string` | — | SVG path ícono derecho |
|
|
106
|
+
| `imgLeft` | `string` | — | URL o ruta imagen izquierda (prioridad sobre iconLeft) |
|
|
107
|
+
| `imgRight` | `string` | — | URL o ruta imagen derecha |
|
|
108
|
+
| `imgLeftAlt` | `string` | `''` | Alt text para imgLeft |
|
|
109
|
+
| `imgRightAlt` | `string` | `''` | Alt text para imgRight |
|
|
110
|
+
| `iconOnly` | `boolean` | `false` | Badge circular sin label |
|
|
111
|
+
| `removable` | `boolean` | `false` | Muestra botón X |
|
|
52
112
|
|
|
53
|
-
|
|
113
|
+
| Output | Tipo | Descripción |
|
|
114
|
+
|---|---|---|
|
|
115
|
+
| `removed` | `EventEmitter<void>` | Emite al clickear el X |
|
|
54
116
|
|
|
55
|
-
|
|
56
|
-
|
|
117
|
+
---
|
|
118
|
+
|
|
119
|
+
### `<fs-tabs>`
|
|
120
|
+
|
|
121
|
+
```html
|
|
122
|
+
<fs-tabs [tabs]="tabs" [(activeTab)]="activeTab">
|
|
123
|
+
<div *ngIf="activeTab === 'experiencia'">...</div>
|
|
124
|
+
<div *ngIf="activeTab === 'sobre-mi'">...</div>
|
|
125
|
+
</fs-tabs>
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
```typescript
|
|
129
|
+
tabs = [
|
|
130
|
+
{ id: 'experiencia', label: 'Experiencia' },
|
|
131
|
+
{ id: 'sobre-mi', label: 'Sobre mí' },
|
|
132
|
+
{ id: 'formacion', label: 'Formación' },
|
|
133
|
+
];
|
|
134
|
+
activeTab = 'experiencia';
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
| Input | Tipo | Default | Descripción |
|
|
138
|
+
|---|---|---|---|
|
|
139
|
+
| `tabs` | `FsTab[]` | `[]` | Array de tabs `{ id, label, disabled? }` |
|
|
140
|
+
| `activeTab` | `string` | `''` | Id de la tab activa |
|
|
141
|
+
|
|
142
|
+
| Output | Tipo | Descripción |
|
|
143
|
+
|---|---|---|
|
|
144
|
+
| `activeTabChange` | `EventEmitter<string>` | Two-way binding |
|
|
145
|
+
| `tabChange` | `EventEmitter<FsTab>` | Emite el objeto FsTab completo |
|
|
146
|
+
|
|
147
|
+
**CSS custom properties configurables:**
|
|
148
|
+
|
|
149
|
+
```css
|
|
150
|
+
fs-tabs {
|
|
151
|
+
--fs-tab-bg: #0d1117;
|
|
152
|
+
--fs-tab-color: rgba(255,255,255,0.40);
|
|
153
|
+
--fs-tab-color-hover: rgba(255,255,255,0.70);
|
|
154
|
+
--fs-tab-color-active: #ffffff;
|
|
155
|
+
--fs-tab-border: rgba(255,255,255,0.08);
|
|
156
|
+
--fs-tab-hover-bg: rgba(255,255,255,0.03);
|
|
157
|
+
--fs-tab-indicator-from: var(--fs-primary-base);
|
|
158
|
+
--fs-tab-indicator-to: var(--fs-tertiary-base);
|
|
159
|
+
--fs-tab-indicator-glow: rgba(34,211,238,0.45);
|
|
160
|
+
}
|
|
161
|
+
```
|
|
162
|
+
|
|
163
|
+
---
|
|
164
|
+
|
|
165
|
+
### `<fs-alert>`
|
|
166
|
+
|
|
167
|
+
```html
|
|
168
|
+
<fs-alert type="info" title="Actualización disponible" [dismissible]="true">
|
|
169
|
+
Nueva versión disponible: v0.0.2
|
|
170
|
+
</fs-alert>
|
|
171
|
+
|
|
172
|
+
<fs-alert type="success" variant="accent" [autoDismiss]="3000">
|
|
173
|
+
Cambios guardados correctamente.
|
|
174
|
+
</fs-alert>
|
|
57
175
|
```
|
|
58
176
|
|
|
59
|
-
|
|
177
|
+
| Input | Tipo | Default | Descripción |
|
|
178
|
+
|---|---|---|---|
|
|
179
|
+
| `type` | `'info' \| 'success' \| 'warning' \| 'danger' \| 'neutral'` | `'info'` | Tipo semántico |
|
|
180
|
+
| `variant` | `'filled' \| 'accent'` | `'filled'` | filled = fondo · accent = borde izq. |
|
|
181
|
+
| `title` | `string` | — | Título en negrita |
|
|
182
|
+
| `dismissible` | `boolean` | `false` | Muestra botón X |
|
|
183
|
+
| `autoDismiss` | `number` | `0` | Auto-cierre en ms (0 = off) |
|
|
184
|
+
|
|
185
|
+
| Output | Tipo | Descripción |
|
|
186
|
+
|---|---|---|
|
|
187
|
+
| `dismissed` | `EventEmitter<void>` | Emite al cerrarse |
|
|
188
|
+
|
|
189
|
+
---
|
|
190
|
+
|
|
191
|
+
### `<fs-experience-card>`
|
|
192
|
+
|
|
193
|
+
```typescript
|
|
194
|
+
experience = {
|
|
195
|
+
company: 'Xcale Consulting',
|
|
196
|
+
role: 'Frontend Developer',
|
|
197
|
+
startDate: 'abr 2022',
|
|
198
|
+
current: true,
|
|
199
|
+
logoText: 'X CALE',
|
|
200
|
+
bullets: [
|
|
201
|
+
'Desarrollo de interfaces con Angular, migraciones v8→v16.',
|
|
202
|
+
'Configuración de pipelines en CodeBuild, ECS en AWS.',
|
|
203
|
+
],
|
|
204
|
+
bulletsPreview: 3,
|
|
205
|
+
badges: [
|
|
206
|
+
{ label: 'Angular', color: 'danger' },
|
|
207
|
+
{ label: 'TypeScript', color: 'primary' },
|
|
208
|
+
],
|
|
209
|
+
};
|
|
210
|
+
```
|
|
211
|
+
|
|
212
|
+
```html
|
|
213
|
+
<fs-experience-card
|
|
214
|
+
[experience]="experience"
|
|
215
|
+
variant="full"
|
|
216
|
+
[timeline]="true"
|
|
217
|
+
[timelineLast]="false"
|
|
218
|
+
/>
|
|
219
|
+
```
|
|
220
|
+
|
|
221
|
+
| Input | Tipo | Default | Descripción |
|
|
222
|
+
|---|---|---|---|
|
|
223
|
+
| `experience` | `FsExperienceCard` | — | Datos de la experiencia |
|
|
224
|
+
| `variant` | `'full' \| 'compact'` | `'full'` | full = con bullets · compact = solo header |
|
|
225
|
+
| `timeline` | `boolean` | `false` | Línea y dot de timeline |
|
|
226
|
+
| `timelineLast` | `boolean` | `false` | Último item (oculta línea hacia abajo) |
|
|
227
|
+
|
|
228
|
+
**CSS custom properties configurables:**
|
|
229
|
+
|
|
230
|
+
```css
|
|
231
|
+
fs-experience-card {
|
|
232
|
+
--fs-exp-radius: 12px; /* 0 para layout full width sin redondeo */
|
|
233
|
+
}
|
|
234
|
+
```
|
|
235
|
+
|
|
236
|
+
---
|
|
237
|
+
|
|
238
|
+
### `<fs-profile-card>`
|
|
239
|
+
|
|
240
|
+
```html
|
|
241
|
+
<fs-profile-card
|
|
242
|
+
name="John Doe"
|
|
243
|
+
handle="johndoe"
|
|
244
|
+
role="Frontend Developer"
|
|
245
|
+
avatarUrl="https://i.pravatar.cc/150?img=8"
|
|
246
|
+
bannerUrl="https://picsum.photos/seed/fsociety/800/200"
|
|
247
|
+
[verified]="true"
|
|
248
|
+
[showActions]="false"
|
|
249
|
+
[links]="links"
|
|
250
|
+
[badges]="badges"
|
|
251
|
+
[stats]="stats"
|
|
252
|
+
/>
|
|
253
|
+
```
|
|
254
|
+
|
|
255
|
+
```typescript
|
|
256
|
+
links = [
|
|
257
|
+
{ label: 'linkedin.com/in/johndoe', url: 'https://linkedin.com/in/johndoe' },
|
|
258
|
+
{ label: 'github.com/johndoe', url: 'https://github.com/johndoe' },
|
|
259
|
+
{ label: 'Buenos Aires, Argentina' },
|
|
260
|
+
];
|
|
261
|
+
badges = [
|
|
262
|
+
{ label: 'Angular', color: 'danger' },
|
|
263
|
+
{ label: 'TypeScript', color: 'primary' },
|
|
264
|
+
{ label: 'AWS', color: 'secondary' },
|
|
265
|
+
];
|
|
266
|
+
stats = [
|
|
267
|
+
{ value: '4+', label: 'años exp.' },
|
|
268
|
+
{ value: '12', label: 'proyectos' },
|
|
269
|
+
{ value: '985', label: 'seguidores' },
|
|
270
|
+
];
|
|
271
|
+
```
|
|
272
|
+
|
|
273
|
+
**CSS custom properties configurables:**
|
|
274
|
+
|
|
275
|
+
```css
|
|
276
|
+
fs-profile-card {
|
|
277
|
+
--fs-profile-radius: 14px; /* 0 para layout full width sin redondeo */
|
|
278
|
+
}
|
|
279
|
+
```
|
|
280
|
+
|
|
281
|
+
> **Obtener tu avatarUrl de GitHub:**
|
|
282
|
+
> Abrí `https://api.github.com/users/TU_USUARIO`, copiá el campo `id` y usá:
|
|
283
|
+
> `https://avatars.githubusercontent.com/u/TU_ID`
|
|
284
|
+
|
|
285
|
+
---
|
|
286
|
+
|
|
287
|
+
## Sistema de tokens
|
|
288
|
+
|
|
289
|
+
```scss
|
|
290
|
+
--fs-{color}-muted // 50 — badge bg, chip, alert sutil
|
|
291
|
+
--fs-{color}-subtle // 100 — ghost hover bg
|
|
292
|
+
--fs-{color}-tint // 200 — selected bg, focus fill
|
|
293
|
+
--fs-{color}-light // 300 — borders sobre fondos claros
|
|
294
|
+
--fs-{color}-soft // 400 — íconos, disabled
|
|
295
|
+
--fs-{color}-base // 500 — color principal
|
|
296
|
+
--fs-{color}-hover // 600 — hover en solid buttons
|
|
297
|
+
--fs-{color}-active // 700 — pressed
|
|
298
|
+
--fs-{color}-emphasis // 800 — texto sobre mismo color
|
|
299
|
+
--fs-{color}-contrast // 900 — texto dark sobre tint/muted
|
|
300
|
+
```
|
|
301
|
+
|
|
302
|
+
Colores disponibles: `primary · secondary · tertiary · neutral · success · warning · danger`
|
|
303
|
+
|
|
304
|
+
### Theming por app
|
|
305
|
+
|
|
306
|
+
```scss
|
|
307
|
+
@use '@heroelc/fsociety/styles/tokens' with (
|
|
308
|
+
$fs-primary-hex: #7c3aed,
|
|
309
|
+
$fs-secondary-hex: #0891b2,
|
|
310
|
+
$fs-tertiary-hex: #0d9488,
|
|
311
|
+
);
|
|
312
|
+
```
|
|
313
|
+
|
|
314
|
+
---
|
|
315
|
+
|
|
316
|
+
## Mixins y utilidades
|
|
317
|
+
|
|
318
|
+
```scss
|
|
319
|
+
@use '@heroelc/fsociety/styles/mixins' as m;
|
|
320
|
+
|
|
321
|
+
.mi-componente {
|
|
322
|
+
@include m.flex-center;
|
|
323
|
+
@include m.px(4); // padding-left + right: 16px
|
|
324
|
+
@include m.stack(16px); // flex-col + gap
|
|
325
|
+
@include m.truncate;
|
|
326
|
+
|
|
327
|
+
@include m.respond-to('md') {
|
|
328
|
+
@include m.flex-between;
|
|
329
|
+
}
|
|
330
|
+
}
|
|
331
|
+
```
|
|
332
|
+
|
|
333
|
+
O con clases utilitarias directamente en el HTML:
|
|
334
|
+
|
|
335
|
+
```html
|
|
336
|
+
<div class="flex-between px-6 py-4 gap-4">
|
|
337
|
+
<span class="truncate-2 text-sm font-medium">...</span>
|
|
338
|
+
<span class="uppercase-label">Frontend Developer</span>
|
|
339
|
+
</div>
|
|
340
|
+
```
|
|
341
|
+
|
|
342
|
+
Breakpoints: `sm` 640px · `md` 768px · `lg` 1024px · `xl` 1280px · `xxl` 1536px
|
|
343
|
+
|
|
344
|
+
---
|
|
345
|
+
|
|
346
|
+
## Contribuir
|
|
347
|
+
|
|
348
|
+
Issues y PRs bienvenidos en [github.com/heroelc/fsociety](https://github.com/heroelc/fsociety).
|
|
349
|
+
|
|
350
|
+
Documentación visual en Storybook: [heroelc.github.io/fsociety](https://heroelc.github.io/fsociety)
|
|
351
|
+
|
|
352
|
+
---
|
|
60
353
|
|
|
61
|
-
##
|
|
354
|
+
## Licencia
|
|
62
355
|
|
|
63
|
-
|
|
356
|
+
[MIT](LICENSE) © heroelc
|
package/package.json
CHANGED