@synchat/webchat 0.0.22 → 0.0.24
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 +1 -1
- package/package.json +2 -2
- package/docs/ATOMIC-DESIGN.md +0 -60
- package/docs/synchat-logo.png +0 -0
package/README.md
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synchat/webchat",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.24",
|
|
4
4
|
"description": "Starter de biblioteca de componentes React + TypeScript com tsup.",
|
|
5
5
|
"author": "synchat <contato@synchat.com.br>",
|
|
6
6
|
"license": "MIT",
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
"files": [
|
|
19
19
|
"dist",
|
|
20
20
|
"README.md",
|
|
21
|
-
"docs"
|
|
21
|
+
"docs/synchat-logo.svg"
|
|
22
22
|
],
|
|
23
23
|
"repository": {
|
|
24
24
|
"type": "git",
|
package/docs/ATOMIC-DESIGN.md
DELETED
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
# Atomic Design no WebChat
|
|
2
|
-
|
|
3
|
-
O componente WebChat está organizado segundo **Atomic Design** (Brad Frost): átomos → moléculas → organismos. O **webchat** fica dentro de **organisms**; atoms e molecules são pastas de componentes reutilizáveis.
|
|
4
|
-
|
|
5
|
-
## Estrutura de pastas
|
|
6
|
-
|
|
7
|
-
```
|
|
8
|
-
lib/components/
|
|
9
|
-
├── atoms/ # Elementos mínimos
|
|
10
|
-
│ ├── FabIconButton.tsx # Botão circular com ícone (cores customizáveis)
|
|
11
|
-
│ ├── Spinner.tsx # Indicador de carregamento
|
|
12
|
-
│ └── index.ts
|
|
13
|
-
│
|
|
14
|
-
├── molecules/ # Agrupamentos de átomos
|
|
15
|
-
│ ├── FabTrigger.tsx # FAB com ícone de chat
|
|
16
|
-
│ ├── PanelHeader.tsx # Título do painel + botão fechar
|
|
17
|
-
│ ├── OutOfHoursCard.tsx # Card "Fora do horário" (ícone + textos)
|
|
18
|
-
│ ├── ChatForm.tsx # Formulário (nome, e-mail, telefone, mensagem + enviar)
|
|
19
|
-
│ └── index.ts
|
|
20
|
-
│
|
|
21
|
-
├── organisms/
|
|
22
|
-
│ └── webchat/ # Organismo WebChat (template + página)
|
|
23
|
-
│ ├── ChatPanelContent.tsx # Conteúdo do painel (loading, erro, inativo, fora do horário, form, sucesso)
|
|
24
|
-
│ ├── ChatPanel.tsx # Painel completo (cabeçalho + conteúdo)
|
|
25
|
-
│ ├── WebChatLayout.tsx # Template: FAB + painel
|
|
26
|
-
│ ├── WebChatPage.tsx # Página: fetch config, estado, handlers
|
|
27
|
-
│ ├── types.ts
|
|
28
|
-
│ ├── constants.ts
|
|
29
|
-
│ └── index.tsx
|
|
30
|
-
│
|
|
31
|
-
└── webchat/
|
|
32
|
-
└── index.tsx # Re-exporta atoms, molecules e organisms/webchat (API pública)
|
|
33
|
-
```
|
|
34
|
-
|
|
35
|
-
## Camadas
|
|
36
|
-
|
|
37
|
-
| Camada | Responsabilidade |
|
|
38
|
-
|-------------|------------------|
|
|
39
|
-
| **Atoms** | Componentes mínimos reutilizáveis (botão, spinner). Quase sem estado. |
|
|
40
|
-
| **Molecules** | Combinação de átomos com um propósito (FAB, cabeçalho, card, formulário). |
|
|
41
|
-
| **Organisms** | Blocos de UI complexos. **webchat** contém o painel, o layout e a página do widget. |
|
|
42
|
-
|
|
43
|
-
## Uso
|
|
44
|
-
|
|
45
|
-
- **Uso normal:** importe apenas o componente principal (exposto como `WebChat`).
|
|
46
|
-
```tsx
|
|
47
|
-
import { WebChat } from "@synchat/webchat";
|
|
48
|
-
<WebChat token="..." />
|
|
49
|
-
```
|
|
50
|
-
|
|
51
|
-
- **Uso avançado:** o pacote também exporta átomos, moléculas e o organismo webchat para customização.
|
|
52
|
-
```tsx
|
|
53
|
-
import { FabTrigger, ChatPanel, WebChatLayout } from "@synchat/webchat";
|
|
54
|
-
```
|
|
55
|
-
|
|
56
|
-
## Regra de dependência
|
|
57
|
-
|
|
58
|
-
- **Atoms** não importam molecules nem organisms.
|
|
59
|
-
- **Molecules** importam apenas atoms.
|
|
60
|
-
- **Organisms/webchat** importa molecules e atoms; contém template (WebChatLayout) e página (WebChatPage) do widget.
|
package/docs/synchat-logo.png
DELETED
|
Binary file
|