@wrrdev/fenix-ui 1.0.2 → 1.0.3
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 +6 -47
- package/package.json +3 -2
package/README.md
CHANGED
|
@@ -9,7 +9,7 @@ Independente de framework: funciona em Vue, React, Angular, Svelte, HTML puro, J
|
|
|
9
9
|
npm i @wrrdev/fenix-ui
|
|
10
10
|
```
|
|
11
11
|
|
|
12
|
-
O pacote expõe **subpaths** por componente — importe apenas o que usa e o bundler aplica tree-shaking
|
|
12
|
+
O pacote expõe **subpaths** por componente — importe apenas o que usa e o bundler aplica tree-shaking automático:
|
|
13
13
|
|
|
14
14
|
```ts
|
|
15
15
|
import '@wrrdev/fenix-ui/button'; // registra <fx-button>
|
|
@@ -18,39 +18,9 @@ import { FenixUI } from '@wrrdev/fenix-ui'; // API de tema/tokens (índice)
|
|
|
18
18
|
FenixUI.theme('dark');
|
|
19
19
|
```
|
|
20
20
|
|
|
21
|
-
> 📦
|
|
21
|
+
> 📦 npm: [`@wrrdev/fenix-ui`](https://www.npmjs.com/package/@wrrdev/fenix-ui) — **v1.0.3**, acesso público.
|
|
22
22
|
> Subpaths disponíveis: `./theme`, `./tokens`, `./button`, `./badge`, `./spinner`, `./select`, `./input`, `./switch`, `./textarea`, `./checkbox`, `./radio`, `./calendar`, `./datepicker`, `./multiselect`, `./table`, `./floatlabel`, `./dialog`, `./toast`, `./tooltip`, `./tabs`, `./progress`, `./skeleton`, `./alert`, `./drawer`, `./dropdown`, `./sidebar`, `./pagination`, `./autocomplete`, `./auto-import` e o curinga `./components/*`.
|
|
23
23
|
|
|
24
|
-
## Arquitetura (por que tree-shaking de verdade)
|
|
25
|
-
|
|
26
|
-
```
|
|
27
|
-
src/
|
|
28
|
-
├── core/ # NÚCLEO compartilhado
|
|
29
|
-
│ ├── tokens.ts # Design Tokens (claro/escuro) → var(--fx-*)
|
|
30
|
-
│ ├── theme.ts # API global: FenixUI.configure/theme/setTokens/resetTheme
|
|
31
|
-
│ ├── base.ts # FxElement: classe-base (Shadow DOM + render)
|
|
32
|
-
│ ├── define.ts # registro seguro no CustomElementRegistry
|
|
33
|
-
│ └── css.ts # helpers CSS
|
|
34
|
-
└── components/
|
|
35
|
-
├── button/ # cada componente importa APENAS o core
|
|
36
|
-
├── badge/
|
|
37
|
-
└── spinner/
|
|
38
|
-
```
|
|
39
|
-
|
|
40
|
-
O build usa **Rollup `preserveModules`**: o `dist/` espelha o `src/`, um arquivo por módulo.
|
|
41
|
-
Quando o cliente importa apenas um componente, o bundler dele puxa **somente** esse módulo +
|
|
42
|
-
o core compartilhado — nunca a biblioteca inteira:
|
|
43
|
-
|
|
44
|
-
```ts
|
|
45
|
-
// O cliente compila apenas Button + core (~9 kB não-minificado).
|
|
46
|
-
import '@wrrdev/fenix-ui/button';
|
|
47
|
-
import { FenixUI } from '@wrrdev/fenix-ui/theme';
|
|
48
|
-
|
|
49
|
-
FenixUI.theme('dark');
|
|
50
|
-
```
|
|
51
|
-
|
|
52
|
-
> Verificação real: bundle de consumidor contendo apenas `fx-button` e o core;
|
|
53
|
-
> `fx-badge`/`fx-spinner` ficaram **fora** do output do cliente.
|
|
54
24
|
|
|
55
25
|
## Consumo
|
|
56
26
|
|
|
@@ -95,7 +65,7 @@ Carregue o bundle **UMD** único: ele registra todos os componentes e expõe os
|
|
|
95
65
|
<fx-toast></fx-toast>
|
|
96
66
|
|
|
97
67
|
<!--
|
|
98
|
-
🔗 Links diretos para CDN (versão 1.0.
|
|
68
|
+
🔗 Links diretos para CDN (versão 1.0.3):
|
|
99
69
|
• https://cdn.jsdelivr.net/npm/@wrrdev/fenix-ui@latest/dist/fenix-ui.umd.min.js
|
|
100
70
|
• https://unpkg.com/@wrrdev/fenix-ui@latest/dist/fenix-ui.umd.min.js
|
|
101
71
|
-->
|
|
@@ -223,19 +193,8 @@ FenixUI.setTokens({
|
|
|
223
193
|
});
|
|
224
194
|
```
|
|
225
195
|
|
|
226
|
-
Presets sobrescrevem **apenas** os tokens informados — o restante herda do tema
|
|
227
|
-
base (claro/escuro) via deep merge (`deepMerge`).
|
|
228
|
-
|
|
229
|
-
## Scripts
|
|
230
|
-
|
|
231
|
-
| Comando | Ação |
|
|
232
|
-
|----------------------|-------------------------------------------------------------|
|
|
233
|
-
| `npm run dev` | Playground local (`index.html`) |
|
|
234
|
-
| `npm run test` | Testes unitários (Vitest + jsdom) |
|
|
235
|
-
| `npm run typecheck` | TypeScript estrito |
|
|
236
|
-
| `npm run build` | ESM modular + `.d.ts` + bundle CDN UMD |
|
|
196
|
+
Presets sobrescrevem **apenas** os tokens informados — o restante herda do tema base (claro/escuro).
|
|
237
197
|
|
|
238
|
-
## Convenções
|
|
239
198
|
|
|
240
|
-
|
|
241
|
-
|
|
199
|
+
> 📏 Convenções: elemento `fx-{component}` · token `--fx-{grupo}-{chave}` · tema `light | dark`
|
|
200
|
+
> Sem dependência de Tailwind/Vue/React; acessibilidade desde a primeira implementação.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wrrdev/fenix-ui",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.3",
|
|
4
4
|
"description": "FenixUI Design System Web nativo (Web Components + Shadow DOM + Design Tokens) com tree-shaking por componente.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "ISC",
|
|
@@ -147,7 +147,7 @@
|
|
|
147
147
|
},
|
|
148
148
|
"scripts": {
|
|
149
149
|
"dev": "vite",
|
|
150
|
-
"build": "npm run build:esm && npm run build:types && npm run build:cdn",
|
|
150
|
+
"build": "npm run prepack && npm run build:esm && npm run build:types && npm run build:cdn",
|
|
151
151
|
"build:esm": "vite build --config vite.config.ts",
|
|
152
152
|
"build:types": "tsc -p tsconfig.build.json",
|
|
153
153
|
"build:cdn": "vite build --config vite.cdn.config.ts",
|
|
@@ -155,6 +155,7 @@
|
|
|
155
155
|
"typecheck": "tsc --noEmit",
|
|
156
156
|
"test": "vitest run",
|
|
157
157
|
"test:watch": "vitest",
|
|
158
|
+
"prepack": "node scripts/update-readme-version.cjs",
|
|
158
159
|
"publish": "npm publish --access public --tag latest"
|
|
159
160
|
},
|
|
160
161
|
"devDependencies": {
|