@wrrdev/fenix-ui 1.0.0 → 1.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 +127 -3
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -3,6 +3,24 @@
|
|
|
3
3
|
Design System Web **nativo** — Web Components + Shadow DOM + Design Tokens.
|
|
4
4
|
Independente de framework: funciona em Vue, React, Angular, Svelte, HTML puro, Java/JSP, PHP, .NET.
|
|
5
5
|
|
|
6
|
+
## Instalação
|
|
7
|
+
|
|
8
|
+
```bash
|
|
9
|
+
npm i @wrrdev/fenix-ui
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
O pacote expõe **subpaths** por componente — importe apenas o que usa e o bundler aplica tree-shaking de verdade (veja [Arquitetura](#arquitetura-por-que-tree-shaking-de-verdade)):
|
|
13
|
+
|
|
14
|
+
```ts
|
|
15
|
+
import '@wrrdev/fenix-ui/button'; // registra <fx-button>
|
|
16
|
+
import { FenixUI } from '@wrrdev/fenix-ui'; // API de tema/tokens (índice)
|
|
17
|
+
|
|
18
|
+
FenixUI.theme('dark');
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
> 📦 Publicado no npm como [`@wrrdev/fenix-ui`](https://www.npmjs.com/package/@wrrdev/fenix-ui) — **v1.0.0**, acesso público (use `--access public` na primeira publicação de escopo).
|
|
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
|
+
|
|
6
24
|
## Arquitetura (por que tree-shaking de verdade)
|
|
7
25
|
|
|
8
26
|
```
|
|
@@ -50,17 +68,123 @@ document.body.append(el);
|
|
|
50
68
|
|
|
51
69
|
### CDN / HTML puro / JSP / .NET
|
|
52
70
|
|
|
71
|
+
Carregue o bundle **UMD** único: ele registra todos os componentes e expõe os globals
|
|
72
|
+
`FenixUI` (API de tema/tokens) e `FenixToast` (toasts imperativos).
|
|
73
|
+
|
|
53
74
|
```html
|
|
54
|
-
|
|
75
|
+
<!-- jsDelivr (recomendado) — link direto para uso -->
|
|
76
|
+
<script src="https://cdn.jsdelivr.net/npm/@wrrdev/fenix-ui@1.0.0/dist/fenix-ui.umd.min.js"></script>
|
|
77
|
+
|
|
78
|
+
<!-- alternativa: unpkg -->
|
|
79
|
+
<!-- <script src="https://unpkg.com/@wrrdev/fenix-ui@1.0.0/dist/fenix-ui.umd.min.js"></script> -->
|
|
80
|
+
|
|
81
|
+
<!-- ou a última versão publicada -->
|
|
82
|
+
<script src="https://cdn.jsdelivr.net/npm/@wrrdev/fenix-ui/dist/fenix-ui.umd.min.js"></script>
|
|
83
|
+
|
|
55
84
|
<script>
|
|
56
|
-
|
|
85
|
+
// tema claro/escuro em runtime (reflete em todos os componentes, incl. Shadow DOM)
|
|
86
|
+
FenixUI.theme('dark');
|
|
87
|
+
|
|
88
|
+
// toasts imperativo via global
|
|
89
|
+
FenixToast.success('Salvo!', 'Registro atualizado.');
|
|
57
90
|
</script>
|
|
58
91
|
|
|
92
|
+
<!-- pronto: estas tags já funcionam -->
|
|
59
93
|
<fx-button variant="danger" size="sm">Excluir</fx-button>
|
|
60
94
|
<fx-badge variant="success">Aprovado</fx-badge>
|
|
95
|
+
<fx-toast></fx-toast>
|
|
96
|
+
|
|
97
|
+
<!--
|
|
98
|
+
🔗 Links diretos para CDN (versão 1.0.0):
|
|
99
|
+
• https://cdn.jsdelivr.net/npm/@wrrdev/fenix-ui@1.0.0/dist/fenix-ui.umd.min.js
|
|
100
|
+
• https://unpkg.com/@wrrdev/fenix-ui@1.0.0/dist/fenix-ui.umd.min.js
|
|
101
|
+
-->
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
### Auto Import (plugin Vite/Rollup)
|
|
105
|
+
|
|
106
|
+
Cansado de importar componente por componente? O plugin `FenixAutoImport` percorre seus arquivos
|
|
107
|
+
(`.ts`, `.js`, `.tsx`, `.jsx`, `.vue`, `.html`, `.svelte`) em busca de tags `fx-*` conhecidas e injeta
|
|
108
|
+
o `import` do subpath de cada componente **automaticamente** — mantendo o tree-shaking: só entra no
|
|
109
|
+
bundle o que é usado, e ele não duplica imports já existentes.
|
|
110
|
+
|
|
111
|
+
### Instale
|
|
112
|
+
|
|
113
|
+
```bash
|
|
114
|
+
npm i @wrrdev/fenix-ui
|
|
115
|
+
npm i -D vite # ou rollup/webpack
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
### Configure no build
|
|
119
|
+
|
|
120
|
+
```ts
|
|
121
|
+
// vite.config.ts
|
|
122
|
+
import { defineConfig } from 'vite';
|
|
123
|
+
import { FenixAutoImport } from '@wrrdev/fenix-ui/auto-import';
|
|
124
|
+
|
|
125
|
+
export default defineConfig({
|
|
126
|
+
plugins: [FenixAutoImport()],
|
|
127
|
+
});
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
> Opcional: `FenixAutoImport({ packageName: '@minha-empresa/ui' })` reescreve todos os subpaths
|
|
131
|
+
> para apontar a outro escopo (útil em monorepos/forks). O padrão é `@wrrdev/fenix-ui`.
|
|
132
|
+
|
|
133
|
+
### Use sem importar
|
|
134
|
+
|
|
135
|
+
```html
|
|
136
|
+
<!-- Vue / React / Svelte / HTML -->
|
|
137
|
+
<fx-button variant="primary">Salvar</fx-button>
|
|
138
|
+
<fx-select clearable>
|
|
139
|
+
<option value="sp">São Paulo</option>
|
|
140
|
+
</fx-select>
|
|
141
|
+
|
|
142
|
+
<!-- O plugin injeta estes imports por você: -->
|
|
143
|
+
<!-- import '@wrrdev/fenix-ui/button'; -->
|
|
144
|
+
<!-- import '@wrrdev/fenix-ui/select'; -->
|
|
61
145
|
```
|
|
62
146
|
|
|
63
|
-
###
|
|
147
|
+
### Componentes suportados
|
|
148
|
+
|
|
149
|
+
| Tag | Subpath injetado |
|
|
150
|
+
|-----|------------------|
|
|
151
|
+
| `fx-button` | `@wrrdev/fenix-ui/button` |
|
|
152
|
+
| `fx-badge` | `@wrrdev/fenix-ui/badge` |
|
|
153
|
+
| `fx-spinner` | `@wrrdev/fenix-ui/spinner` |
|
|
154
|
+
| `fx-select` | `@wrrdev/fenix-ui/select` |
|
|
155
|
+
| `fx-multiselect` | `@wrrdev/fenix-ui/multiselect` |
|
|
156
|
+
| `fx-input` | `@wrrdev/fenix-ui/input` |
|
|
157
|
+
| `fx-switch` | `@wrrdev/fenix-ui/switch` |
|
|
158
|
+
| `fx-calendar` | `@wrrdev/fenix-ui/calendar` |
|
|
159
|
+
| `fx-datepicker` | `@wrrdev/fenix-ui/datepicker` |
|
|
160
|
+
| `fx-checkbox` | `@wrrdev/fenix-ui/checkbox` |
|
|
161
|
+
| `fx-radio` | `@wrrdev/fenix-ui/radio` |
|
|
162
|
+
| `fx-table` | `@wrrdev/fenix-ui/table` |
|
|
163
|
+
| `fx-floatlabel` | `@wrrdev/fenix-ui/floatlabel` |
|
|
164
|
+
| `fx-textarea` | `@wrrdev/fenix-ui/textarea` |
|
|
165
|
+
| `fx-dialog` | `@wrrdev/fenix-ui/dialog` |
|
|
166
|
+
| `fx-drawer` | `@wrrdev/fenix-ui/drawer` |
|
|
167
|
+
| `fx-toast` | `@wrrdev/fenix-ui/toast` |
|
|
168
|
+
| `fx-tooltip` | `@wrrdev/fenix-ui/tooltip` |
|
|
169
|
+
| `fx-tabs` | `@wrrdev/fenix-ui/tabs` |
|
|
170
|
+
| `fx-tab-panel` | `@wrrdev/fenix-ui/tabs` |
|
|
171
|
+
| `fx-progress` | `@wrrdev/fenix-ui/progress` |
|
|
172
|
+
| `fx-skeleton` | `@wrrdev/fenix-ui/skeleton` |
|
|
173
|
+
| `fx-alert` | `@wrrdev/fenix-ui/alert` |
|
|
174
|
+
| `fx-dropdown` | `@wrrdev/fenix-ui/dropdown` |
|
|
175
|
+
| `fx-dropdown-item` | `@wrrdev/fenix-ui/dropdown` |
|
|
176
|
+
| `fx-pagination` | `@wrrdev/fenix-ui/pagination` |
|
|
177
|
+
| `fx-autocomplete` | `@wrrdev/fenix-ui/autocomplete` |
|
|
178
|
+
|
|
179
|
+
### Compatibilidade com frameworks
|
|
180
|
+
|
|
181
|
+
| Framework | Suporte |
|
|
182
|
+
|-----------|---------|
|
|
183
|
+
| Vue 3 / Nuxt | ✅ via Vite/Rollup (inclusive SFC) |
|
|
184
|
+
| React / Next | ✅ via Vite/Rollup/Webpack (transform genérico) |
|
|
185
|
+
| HTML puro / JSP / .NET / PHP | ✅ use o bundle CDN (`fenix-ui.umd.min.js`) que registra tudo |
|
|
186
|
+
|
|
187
|
+
## Temas em runtime (sem recompilar)
|
|
64
188
|
|
|
65
189
|
```ts
|
|
66
190
|
FenixUI.theme('dark'); // claro | escuro
|
package/package.json
CHANGED