@leonardofirme/package-npm 1.2.2 → 1.2.6
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 +59 -73
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,128 +1,114 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Package NPM | Leonardo Firme
|
|
2
2
|
|
|
3
|
-
Biblioteca de componentes UI de alto padrão e utilitários de infraestrutura para ERP/SaaS. Desenvolvida exclusivamente para o ecossistema **React 19**, **NextJS 16+** e **
|
|
3
|
+
Biblioteca de componentes UI de alto padrão e utilitários de infraestrutura para ERP/SaaS. Desenvolvida exclusivamente para o ecossistema **React 19**, **NextJS 16+** e **Tailwind CSS v4**.
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
|
|
9
9
|
|
|
10
|
+
---
|
|
10
11
|
|
|
11
|
-
## 🚀 Instalação
|
|
12
|
+
## 🚀 Instalação
|
|
12
13
|
|
|
13
|
-
|
|
14
|
+
Adicione o pacote ao seu projeto via NPM:
|
|
14
15
|
|
|
15
16
|
```bash
|
|
16
|
-
npm install @
|
|
17
|
+
npm install @leonardofirme/package-npm
|
|
17
18
|
|
|
18
19
|
```
|
|
19
20
|
|
|
20
|
-
## 🎨
|
|
21
|
+
## 🎨 Integração com Tailwind CSS v4
|
|
21
22
|
|
|
22
|
-
Para que o Tailwind identifique as classes utilitárias dentro do pacote
|
|
23
|
+
Para que o motor do Tailwind identifique e processe as classes utilitárias e o `dark:mode` dentro dos componentes do pacote, adicione a diretiva `@source` no seu arquivo CSS principal (ex: `globals.css`):
|
|
23
24
|
|
|
24
25
|
```css
|
|
25
26
|
@import "tailwindcss";
|
|
26
27
|
|
|
27
|
-
/*
|
|
28
|
-
@source "../../node_modules/@
|
|
28
|
+
/* Mapeia os componentes do pacote para o compilador do Tailwind */
|
|
29
|
+
@source "../../node_modules/@leonardofirme/package-npm/dist";
|
|
29
30
|
|
|
30
31
|
```
|
|
31
32
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
Este pacote utiliza dependências modernas para garantir performance e segurança. Elas são instaladas automaticamente, mas você pode referenciá-las conforme sua stack:
|
|
35
|
-
|
|
36
|
-
### UI & UX (Client Side)
|
|
33
|
+
---
|
|
37
34
|
|
|
38
|
-
|
|
39
|
-
* `clsx` & `tailwind-merge` (Gestão de Classes)
|
|
35
|
+
## 📦 Core de Dependências
|
|
40
36
|
|
|
41
|
-
|
|
37
|
+
O pacote gerencia e integra dependências modernas para garantir performance em aplicações complexas:
|
|
42
38
|
|
|
43
|
-
* `
|
|
39
|
+
* **Interface:** `framer-motion`, `lucide-react`, `sonner`.
|
|
40
|
+
* **Utilitários:** `clsx`, `tailwind-merge`.
|
|
41
|
+
* **Segurança:** Estruturas preparadas para integração com `next-auth` e `jsonwebtoken`.
|
|
44
42
|
|
|
45
43
|
---
|
|
46
44
|
|
|
47
|
-
## 🛠️ Guia de Uso
|
|
45
|
+
## 🛠️ Guia de Uso Profissional
|
|
48
46
|
|
|
49
|
-
###
|
|
47
|
+
### Componentes UI (Minimalist & Responsive)
|
|
50
48
|
|
|
51
|
-
|
|
49
|
+
Os componentes seguem o layout minimalista: `text-gray-800` (Light) e `text-gray-50` (Dark), prontos para dashboards ERP.
|
|
52
50
|
|
|
53
51
|
```tsx
|
|
54
|
-
import { Button } from '@leonardofirme/package-npm';
|
|
52
|
+
import { Button, Input } from '@leonardofirme/package-npm';
|
|
55
53
|
|
|
56
|
-
export default function
|
|
54
|
+
export default function LoginForm() {
|
|
57
55
|
return (
|
|
58
|
-
<
|
|
59
|
-
label="
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
56
|
+
<div className="space-y-4">
|
|
57
|
+
<Input label="E-mail" type="email" placeholder="seu@email.com" />
|
|
58
|
+
<Button
|
|
59
|
+
label="Acessar Sistema"
|
|
60
|
+
className="w-full"
|
|
61
|
+
onClick={() => {}}
|
|
62
|
+
/>
|
|
63
|
+
</div>
|
|
63
64
|
);
|
|
64
65
|
}
|
|
65
66
|
|
|
66
67
|
```
|
|
67
68
|
|
|
68
|
-
###
|
|
69
|
+
### Hooks de Infraestrutura
|
|
69
70
|
|
|
70
|
-
|
|
71
|
+
Controle de tema e estados globais de forma otimizada.
|
|
71
72
|
|
|
72
73
|
```tsx
|
|
73
74
|
import { useTheme } from '@leonardofirme/package-npm';
|
|
74
75
|
|
|
75
|
-
export function
|
|
76
|
+
export function ThemeSwitcher() {
|
|
76
77
|
const { theme, toggleTheme } = useTheme();
|
|
77
|
-
return
|
|
78
|
+
return (
|
|
79
|
+
<button onClick={toggleTheme}>
|
|
80
|
+
Tema atual: {theme === 'dark' ? 'Escuro' : 'Claro'}
|
|
81
|
+
</button>
|
|
82
|
+
);
|
|
78
83
|
}
|
|
79
84
|
|
|
80
85
|
```
|
|
81
86
|
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
**Caminho:** `.github/workflows/publish.yml`
|
|
87
|
-
|
|
88
|
-
```yaml
|
|
89
|
-
name: Publish Package
|
|
90
|
-
|
|
91
|
-
on:
|
|
92
|
-
push:
|
|
93
|
-
branches:
|
|
94
|
-
- main
|
|
95
|
-
|
|
96
|
-
jobs:
|
|
97
|
-
publish:
|
|
98
|
-
runs-on: ubuntu-latest
|
|
99
|
-
permissions:
|
|
100
|
-
contents: read
|
|
101
|
-
packages: write
|
|
102
|
-
steps:
|
|
103
|
-
- uses: actions/checkout@v4
|
|
104
|
-
- uses: actions/setup-node@v4
|
|
105
|
-
with:
|
|
106
|
-
node-version: '22'
|
|
107
|
-
registry-url: 'https://npm.pkg.github.com'
|
|
108
|
-
scope: '@LeonardoFirme'
|
|
109
|
-
|
|
110
|
-
- name: Install & Build
|
|
111
|
-
run: |
|
|
112
|
-
npm install
|
|
113
|
-
npm run build
|
|
114
|
-
env:
|
|
115
|
-
NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
|
116
|
-
|
|
117
|
-
- name: Publish
|
|
118
|
-
run: npm publish
|
|
119
|
-
env:
|
|
120
|
-
NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
|
87
|
+
---
|
|
88
|
+
|
|
89
|
+
## ⚙️ Pipeline de CI/CD
|
|
121
90
|
|
|
122
|
-
|
|
91
|
+
Garantimos a integridade do código através de builds automatizados. Cada versão passa por uma validação rigorosa de tipagem estática antes de ser disponibilizada.
|
|
92
|
+
|
|
93
|
+
**Workflow:** `.github/workflows/publish.yml`
|
|
94
|
+
|
|
95
|
+
* **Build:** `tsup` (CJS, ESM, DTS).
|
|
96
|
+
* **Validation:** `tsc --noEmit`.
|
|
97
|
+
* **Registry:** Publicação automática via GitHub Actions para o registro oficial do NPM.
|
|
98
|
+
|
|
99
|
+
---
|
|
100
|
+
|
|
101
|
+
## 👨💻 Autor e Mantenedor
|
|
102
|
+
|
|
103
|
+
Desenvolvido por **Leonardo Firme**. Focado em entregar estruturas escaláveis para o mercado de plataformas SaaS e sistemas de gestão.
|
|
104
|
+
|
|
105
|
+
* **GitHub Pessoal:** [LeonardoFirme](https://github.com/LeonardoFirme)
|
|
106
|
+
* **NPM Profile:** [@leonardofirme](https://www.npmjs.com/~leonardofirme)
|
|
123
107
|
|
|
124
108
|
---
|
|
125
109
|
|
|
126
|
-
|
|
110
|
+
## 📄 Licença
|
|
111
|
+
|
|
112
|
+
Uso disponível para a comunidade sob os termos de desenvolvimento de plataformas do ecossistema Leonardo Firme.
|
|
127
113
|
|
|
128
114
|
---
|
package/package.json
CHANGED