@mriqbox/ui-kit 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 +37 -36
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -5,9 +5,14 @@
|
|
|
5
5
|
|
|
6
6
|
Biblioteca oficial de componentes de UI para o ecossistema Mri.
|
|
7
7
|
|
|
8
|
-
Desenhada para ser moderna, responsiva e com suporte nativo a temas escuros (Dark Mode), utilizando **React**, **Tailwind CSS** e **
|
|
8
|
+
Desenhada para ser moderna, responsiva e com suporte nativo a temas escuros (Dark Mode), utilizando **React**, **Tailwind CSS**, **Radix UI** e seguindo a arquitetura do **shadcn/ui**.
|
|
9
9
|
|
|
10
|
-
##
|
|
10
|
+
## 🚀 Como usar
|
|
11
|
+
|
|
12
|
+
Você pode utilizar esta biblioteca de duas formas principais:
|
|
13
|
+
|
|
14
|
+
### 1. Pacote NPM (Uso Tradicional)
|
|
15
|
+
Ideal se você quer apenas usar os componentes prontos e receber atualizações automáticas.
|
|
11
16
|
|
|
12
17
|
```bash
|
|
13
18
|
pnpm add @mriqbox/ui-kit
|
|
@@ -15,59 +20,55 @@ pnpm add @mriqbox/ui-kit
|
|
|
15
20
|
npm install @mriqbox/ui-kit
|
|
16
21
|
```
|
|
17
22
|
|
|
18
|
-
|
|
23
|
+
**Uso:**
|
|
24
|
+
```tsx
|
|
25
|
+
import { Button } from '@mriqbox/ui-kit';
|
|
26
|
+
|
|
27
|
+
export default function MyComponent() {
|
|
28
|
+
return <Button>Clique aqui</Button>;
|
|
29
|
+
}
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
### 2. Shadcn CLI / Copy & Paste (Controle Total)
|
|
33
|
+
Ideal se você quer ter o código dos componentes no seu projeto para customizá-los livremente ("Own your UI").
|
|
34
|
+
|
|
35
|
+
Este projeto contém um arquivo `components.json` na raiz, permitindo o uso da CLI do shadcn.
|
|
36
|
+
|
|
37
|
+
**Adicionar componente via CLI:**
|
|
38
|
+
No diretório raiz deste projeto:
|
|
39
|
+
```bash
|
|
40
|
+
npx shadcn-ui@latest add button
|
|
41
|
+
```
|
|
42
|
+
Isso irá baixar o código do componente `Button` para `src/components/ui/button.tsx`.
|
|
19
43
|
|
|
20
|
-
|
|
44
|
+
## ⚙️ Configuração (Para uso via NPM)
|
|
21
45
|
|
|
22
|
-
|
|
46
|
+
Se você instalou via NPM, precisa configurar seu projeto para carregar os estilos corretamente.
|
|
23
47
|
|
|
48
|
+
### 1. Importar CSS Global
|
|
49
|
+
Adicione no seu arquivo de entrada (ex: `main.tsx` ou `App.tsx`):
|
|
24
50
|
```tsx
|
|
25
51
|
import '@mriqbox/ui-kit/dist/style.css';
|
|
26
52
|
```
|
|
27
53
|
|
|
28
|
-
### 2. Tailwind CSS
|
|
29
|
-
|
|
30
|
-
Para que o Tailwind da sua aplicação reconheça as classes da biblioteca, adicione o caminho do pacote ao seu `tailwind.config.js`:
|
|
54
|
+
### 2. Configurar Tailwind CSS
|
|
55
|
+
No seu `tailwind.config.js`, adicione o caminho da biblioteca para o `content`:
|
|
31
56
|
|
|
32
57
|
```js
|
|
33
58
|
module.exports = {
|
|
34
59
|
content: [
|
|
35
60
|
"./src/**/*.{ts,tsx}",
|
|
36
|
-
"./node_modules/@mriqbox/ui-kit/dist/**/*.{js,mjs}"
|
|
61
|
+
"./node_modules/@mriqbox/ui-kit/dist/**/*.{js,mjs}" // <--- Adicione esta linha
|
|
37
62
|
],
|
|
38
63
|
// ...
|
|
39
64
|
}
|
|
40
65
|
```
|
|
41
66
|
|
|
42
|
-
##
|
|
43
|
-
|
|
44
|
-
Importe os componentes diretamente do pacote:
|
|
45
|
-
|
|
46
|
-
```tsx
|
|
47
|
-
import { Button, Modal } from '@mriqbox/ui-kit';
|
|
48
|
-
|
|
49
|
-
function App() {
|
|
50
|
-
return (
|
|
51
|
-
<div>
|
|
52
|
-
<Button variant="primary">Clique Aqui</Button>
|
|
53
|
-
|
|
54
|
-
<Modal open={true}>
|
|
55
|
-
{/* Conteúdo do Modal */}
|
|
56
|
-
</Modal>
|
|
57
|
-
</div>
|
|
58
|
-
);
|
|
59
|
-
}
|
|
60
|
-
```
|
|
61
|
-
|
|
62
|
-
## Documentação
|
|
63
|
-
|
|
67
|
+
## 📚 Documentação
|
|
64
68
|
Para ver todos os componentes disponíveis e suas propriedades, consulte nosso Storybook:
|
|
69
|
+
[**Acessar Storybook**](https://ui.mriqbox.com.br)
|
|
65
70
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
## Desenvolvimento
|
|
69
|
-
|
|
70
|
-
Para rodar o projeto localmente:
|
|
71
|
+
## 🛠️ Desenvolvimento Local
|
|
71
72
|
|
|
72
73
|
1. Clone o repositório.
|
|
73
74
|
2. Instale dependências: `pnpm install`
|