flicker-alerts 1.0.66 → 1.0.67

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.
Files changed (4) hide show
  1. package/package.json +5 -5
  2. package/readme.md +108 -94
  3. package/style.css +0 -1
  4. package/.vscode/settings.json +0 -3
package/package.json CHANGED
@@ -1,8 +1,8 @@
1
1
  {
2
2
  "name": "flicker-alerts",
3
- "version": "1.0.66",
4
- "repository": "https://www.linkedin.com/in/bruno-carneiro-9a53aa190/",
5
- "homepage": "https://flickeralerts.netlify.app/",
3
+ "version": "1.0.67",
4
+ "linkedin": "https://www.linkedin.com/in/bruno-carneiro-9a53aa190/",
5
+ "demonstração": "https://flickeralerts.netlify.app/",
6
6
  "description": "Biblioteca para alertas animados",
7
7
  "main": "index.js",
8
8
  "types": "index.d.ts",
@@ -18,6 +18,6 @@
18
18
  "author": "https://www.linkedin.com/in/bruno-carneiro-9a53aa190/",
19
19
  "license": "MIT",
20
20
  "dependencies": {
21
- "flicker-alerts": "^1.0.66"
21
+ "flicker-alerts": "^1.0.67"
22
22
  }
23
- }
23
+ }
package/readme.md CHANGED
@@ -1,148 +1,162 @@
1
1
 
2
2
  # FlickerAlerts
3
3
 
4
- **FlickerAlerts** é uma biblioteca simples para criar alertas animados de sucesso, erro, aviso e informações. Eles podem ser exibidos automaticamente ou ser fechados manualmente pelo usuário.
4
+ **FlickerAlerts** é uma biblioteca leve e poderosa para criar alertas e modais animados com suporte a diferentes tipos de mensagens: sucesso, erro, aviso e informações. Fácil de integrar em projetos Angular, React ou em qualquer aplicação JavaScript moderna.
5
5
 
6
- ## Instalação
6
+ ---
7
+
8
+ ## 📦 Instalação
7
9
 
8
- Para instalar o **FlickerAlerts**, utilize o npm:
10
+ Instale a biblioteca usando o npm:
9
11
 
10
12
  ```bash
11
13
  npm install flicker-alerts
12
14
  ```
13
15
 
14
- ## Documentação de Uso
15
-
16
- **FlickerAlerts** é uma biblioteca simples para criar alertas animados de sucesso, erro, aviso e informações. Eles podem ser exibidos automaticamente ou ser fechados manualmente pelo usuário.
16
+ Se você não deseja usar o CDN para os estilos, também é possível importar o arquivo CSS diretamente do pacote instalado. Veja como configurar no Angular e no React.
17
17
 
18
- <h4>Importação</h4>
19
- <p>Esses links são essenciais para o funcionamento adequado dos estilos do Bootstrap e dos ícones do Font Awesome .</p>
20
- <p class="text-import"> <!-- Importação do Bootstrap -->
21
- "https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" <!-- Importação do Font Awesome -->
22
- "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
23
- "https://cdn.jsdelivr.net/npm/flicker-alerts/style.css"
24
- </p>
18
+ ---
25
19
 
20
+ ## 🚀 Uso
26
21
 
27
- ### Instalação
22
+ Após a instalação, importe a biblioteca no seu projeto e utilize a função `showAlert` ou `showModal` para criar alertas e modais.
28
23
 
29
- Instale via `npm`:
24
+ ### Exemplo Básico de Alerta:
30
25
 
31
- ```bash
32
- npm install flicker-alerts
26
+ ```javascript
27
+ import FlickerAlerts from 'flicker-alerts';
28
+
29
+ FlickerAlerts.showAlert({
30
+ type: 'success', // 'success', 'info', 'warning', 'danger'
31
+ title: 'Sucesso!',
32
+ message: 'Operação realizada com sucesso.',
33
+ position: 'top-right' // 'top-right', 'top-left', 'bottom-right', 'bottom-left', 'center'
34
+ });
33
35
  ```
34
36
 
35
- ### Uso
37
+ ---
36
38
 
37
- Após a instalação, a biblioteca será importada no seu código, e você não precisará mais incluir o arquivo `<script>` diretamente no HTML. Em vez disso, você utilizará a função `showAlert` em seus componentes.
39
+ ## 🔧 Integração por Framework
38
40
 
39
- ### Uso no Angular
41
+ ### Angular
40
42
 
41
- Com o **FlickerAlerts** instalado, importe-o no seu componente Angular e utilize-o conforme mostrado abaixo:
43
+ 1. **Importe e use:**
42
44
 
43
45
  ```typescript
44
46
  import FlickerAlerts, { FlickerModals } from 'flicker-alerts';
45
47
 
46
- export class AppComponent {
47
- showAlert() {
48
- FlickerAlerts.showAlert({
49
- type: 'success', // Opções: 'success', 'info', 'warning', 'danger'
50
- title: 'Título',
51
- message: 'Mensagem personalizada',
52
- position: 'top-right'
53
- // Opções: 'top-right', 'top-left',
54
- //'bottom-right', 'bottom-left', 'center',
55
- //'top-center', 'bottom-center'
56
- });
57
- }
58
- }
59
-
48
+ export class AppComponent {
49
+ showAlert() {
50
+ FlickerAlerts.showAlert({
51
+ type: 'warning',
52
+ title: 'Atenção!',
53
+ message: 'Algo deu errado.',
54
+ position: 'top-center'
55
+ });
56
+ }
57
+
58
+ showModal() {
59
+ FlickerModals.showModal({
60
+ type: 'warning',
61
+ title: 'Confirmação',
62
+ message: 'Deseja realmente continuar?',
63
+ onConfirm: () => console.log('Confirmado!'),
64
+ onCancel: () => console.log('Cancelado!')
65
+ });
66
+ }
67
+ }
60
68
  ```
61
- # Caso o Estilo Não Esteja Sendo Aplicado no Angular
62
- Se o estilo da biblioteca não estiver sendo aplicado corretamente, verifique se você adicionou o caminho para o arquivo CSS no angular.json.
63
69
 
64
- Abra o arquivo angular.json, e no campo styles dentro de angular.json, adicione o caminho para o CSS da biblioteca, como mostrado abaixo:
70
+ 2. **Adicione os estilos ao `angular.json`:**
65
71
 
72
+ Se você prefere não usar o CDN, pode configurar o Angular para importar o arquivo CSS diretamente do pacote instalado:
73
+
74
+ ```json
66
75
  "styles": [
67
- "node_modules/flicker-alerts/style.css"
76
+ "node_modules/flicker-alerts/style.css"
68
77
  ]
78
+ ```
69
79
 
80
+ Isso garante que o estilo seja incluído no build da aplicação. Caso prefira o CDN, basta adicioná-lo ao arquivo `index.html`.
70
81
 
71
82
  ---
72
83
 
73
- ### Uso no React
84
+ ### React
74
85
 
75
- Com o **FlickerAlerts** instalado, você pode usá-lo no seu componente React assim:
86
+ 1. **Importe e use:**
76
87
 
77
88
  ```javascript
78
89
  import FlickerAlerts, { FlickerModals } from 'flicker-alerts';
90
+ import 'flicker-alerts/style.css'; // Importa o CSS diretamente do pacote
91
+
92
+ const App = () => {
93
+ const showAlert = () => {
94
+ FlickerAlerts.showAlert({
95
+ type: 'info',
96
+ title: 'Informação',
97
+ message: 'Este é um alerta informativo.',
98
+ position: 'bottom-left'
99
+ });
100
+ };
101
+
102
+ const showModal = () => {
103
+ FlickerModals.showModal({
104
+ type: 'delete',
105
+ title: 'Confirmação de Exclusão',
106
+ message: 'Deseja realmente excluir este item?',
107
+ onConfirm: () => console.log('Item deletado!'),
108
+ onCancel: () => console.log('Ação cancelada.')
109
+ });
110
+ };
111
+
112
+ return (
113
+ <>
114
+ <button onClick={showAlert}>Mostrar Alerta</button>
115
+ <button onClick={showModal}>Mostrar Modal</button>
116
+ </>
117
+ );
118
+ };
119
+ ```
79
120
 
121
+ 2. **Adicione os estilos manualmente no React:**
80
122
 
123
+ Se você prefere não usar o CDN para o CSS, pode importar o arquivo diretamente do pacote no arquivo principal do React, como `index.js` ou `App.js`:
81
124
 
82
- const showAlert = () => {
83
- FlickerAlerts.showAlert({
84
- type: 'success', // Opções: 'success', 'info', 'warning', 'danger'
85
- title: 'Título',
86
- message: 'Mensagem personalizada',
87
- position: 'top-right'
88
- // Opções: 'top-right', 'top-left',
89
- //'bottom-right', 'bottom-left', 'center',
90
- //'top-center', 'bottom-center'
91
- });
92
- };
93
-
125
+ ```javascript
126
+ import 'flicker-alerts/style.css';
94
127
  ```
95
128
 
129
+ Essa abordagem é recomendada para garantir que o estilo seja incluído no build final da aplicação.
96
130
 
131
+ ---
97
132
 
98
- ### Modais
99
- ### Uso no Angular
100
-
101
- Com o **FlickerAlerts** instalado, você pode usá-lo no seu componente React assim:
102
-
103
- ```javascript
104
- import FlickerAlerts, { FlickerModals } from 'flicker-alerts';
105
-
106
- export class AppComponent {
107
- showModal() {
108
- FlickerModals.showModal({
109
- type: 'warning', // Tipos: 'warning', 'delete'
110
- title: 'Título do Modal',
111
- message: 'Mensagem personalizada para o modal.',
112
- onConfirm: () => { console.log('Confirmado!'); },
113
- onCancel: () => { console.log('Cancelado!'); }
114
- });
115
- }
116
- }
117
-
133
+ ## 📖 API
118
134
 
119
- ```
135
+ ### `FlickerAlerts.showAlert(config)`
120
136
 
121
- ### Uso no React
137
+ | Propriedade | Tipo | Descrição |
138
+ |-------------|------------|------------------------------------------------|
139
+ | `type` | `string` | Tipo do alerta: `success`, `info`, `warning`, `danger`. |
140
+ | `title` | `string` | Título do alerta. |
141
+ | `message` | `string` | Mensagem do alerta. |
142
+ | `position` | `string` | Posição: `top-right`, `top-left`, `bottom-right`, etc. |
122
143
 
123
- Com o **FlickerAlerts** instalado, você pode usá-lo no seu componente React assim:
144
+ ---
124
145
 
125
- ```javascript
126
- import FlickerAlerts, { FlickerModals } from 'flicker-alerts';
127
-
128
- const showModal = () => {
129
- FlickerModals.showModal({
130
- type: 'delete', // Tipos: 'warning', 'delete'
131
- title: 'Título do Modal',
132
- message: 'Mensagem personalizada para o modal.',
133
- onConfirm: () => { console.log('Deletado com sucesso!'); },
134
- onCancel: () => { console.log('Cancelado!'); }
135
- });
136
- };
137
-
146
+ ### `FlickerModals.showModal(config)`
138
147
 
139
- ```
148
+ | Propriedade | Tipo | Descrição |
149
+ |---------------|------------|---------------------------------------------------|
150
+ | `type` | `string` | Tipo do modal: `warning`, `delete`. |
151
+ | `title` | `string` | Título do modal. |
152
+ | `message` | `string` | Mensagem exibida no modal. |
153
+ | `onConfirm` | `function` | Callback para execução quando confirmado. |
154
+ | `onCancel` | `function` | Callback para execução quando cancelado. |
140
155
 
141
156
  ---
142
157
 
143
- # Caso o Estilo Não Esteja Sendo Aplicado no React
144
- No React, você não precisa de um arquivo de configuração centralizado como o angular.json. Para garantir que o estilo da biblioteca FlickerAlert seja aplicado corretamente, basta importar o arquivo CSS diretamente no seu código.
158
+ ## 💬 Suporte
145
159
 
146
- No arquivo principal, como index.js ou App.js, adicione a seguinte linha para importar o CSS:
160
+ Caso tenha dúvidas ou precise de ajuda, entre em contato com o desenvolvedor no [LinkedIn](https://www.linkedin.com/in/bruno-carneiro-9a51aa190/).
147
161
 
148
- import 'flicker-alerts/style.css';
162
+ ---
package/style.css CHANGED
@@ -11,7 +11,6 @@
11
11
  }
12
12
 
13
13
 
14
-
15
14
  .notification {
16
15
  margin: 20px;
17
16
  background-color: #ffffff;
package/.vscode/settings.json DELETED
@@ -1,3 +0,0 @@
1
- {
2
- "liveServer.settings.port": 5501
3
- }