flicker-alerts 1.0.65 → 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 -96
  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.65",
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.65"
21
+ "flicker-alerts": "^1.0.67"
22
22
  }
23
- }
23
+ }
package/readme.md CHANGED
@@ -1,150 +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.
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"
22
- <!-- Importação do Font Awesome -->
23
- "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
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.
24
17
 
25
- "https://cdn.jsdelivr.net/npm/flicker-alerts/style.css"
26
- </p>
18
+ ---
27
19
 
20
+ ## 🚀 Uso
28
21
 
29
- ### 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.
30
23
 
31
- Instale via `npm`:
24
+ ### Exemplo Básico de Alerta:
32
25
 
33
- ```bash
34
- 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
+ });
35
35
  ```
36
36
 
37
- ### Uso
37
+ ---
38
38
 
39
- 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
40
40
 
41
- ### Uso no Angular
41
+ ### Angular
42
42
 
43
- Com o **FlickerAlerts** instalado, importe-o no seu componente Angular e utilize-o conforme mostrado abaixo:
43
+ 1. **Importe e use:**
44
44
 
45
45
  ```typescript
46
46
  import FlickerAlerts, { FlickerModals } from 'flicker-alerts';
47
47
 
48
- export class AppComponent {
49
- showAlert() {
50
- FlickerAlerts.showAlert({
51
- type: 'success', // Opções: 'success', 'info', 'warning', 'danger'
52
- title: 'Título',
53
- message: 'Mensagem personalizada',
54
- position: 'top-right'
55
- // Opções: 'top-right', 'top-left',
56
- //'bottom-right', 'bottom-left', 'center',
57
- //'top-center', 'bottom-center'
58
- });
59
- }
60
- }
61
-
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
+ }
62
68
  ```
63
- # Caso o Estilo Não Esteja Sendo Aplicado no Angular
64
- Se o estilo da biblioteca não estiver sendo aplicado corretamente, verifique se você adicionou o caminho para o arquivo CSS no angular.json.
65
69
 
66
- 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`:**
67
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
68
75
  "styles": [
69
- "node_modules/flicker-alerts/style.css"
76
+ "node_modules/flicker-alerts/style.css"
70
77
  ]
78
+ ```
71
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`.
72
81
 
73
82
  ---
74
83
 
75
- ### Uso no React
84
+ ### React
76
85
 
77
- Com o **FlickerAlerts** instalado, você pode usá-lo no seu componente React assim:
86
+ 1. **Importe e use:**
78
87
 
79
88
  ```javascript
80
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
+ ```
81
120
 
121
+ 2. **Adicione os estilos manualmente no React:**
82
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`:
83
124
 
84
- const showAlert = () => {
85
- FlickerAlerts.showAlert({
86
- type: 'success', // Opções: 'success', 'info', 'warning', 'danger'
87
- title: 'Título',
88
- message: 'Mensagem personalizada',
89
- position: 'top-right'
90
- // Opções: 'top-right', 'top-left',
91
- //'bottom-right', 'bottom-left', 'center',
92
- //'top-center', 'bottom-center'
93
- });
94
- };
95
-
125
+ ```javascript
126
+ import 'flicker-alerts/style.css';
96
127
  ```
97
128
 
129
+ Essa abordagem é recomendada para garantir que o estilo seja incluído no build final da aplicação.
98
130
 
131
+ ---
99
132
 
100
- ### Modais
101
- ### Uso no Angular
102
-
103
- Com o **FlickerAlerts** instalado, você pode usá-lo no seu componente React assim:
104
-
105
- ```javascript
106
- import FlickerAlerts, { FlickerModals } from 'flicker-alerts';
107
-
108
- export class AppComponent {
109
- showModal() {
110
- FlickerModals.showModal({
111
- type: 'warning', // Tipos: 'warning', 'delete'
112
- title: 'Título do Modal',
113
- message: 'Mensagem personalizada para o modal.',
114
- onConfirm: () => { console.log('Confirmado!'); },
115
- onCancel: () => { console.log('Cancelado!'); }
116
- });
117
- }
118
- }
119
-
133
+ ## 📖 API
120
134
 
121
- ```
135
+ ### `FlickerAlerts.showAlert(config)`
122
136
 
123
- ### 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. |
124
143
 
125
- Com o **FlickerAlerts** instalado, você pode usá-lo no seu componente React assim:
144
+ ---
126
145
 
127
- ```javascript
128
- import FlickerAlerts, { FlickerModals } from 'flicker-alerts';
129
-
130
- const showModal = () => {
131
- FlickerModals.showModal({
132
- type: 'delete', // Tipos: 'warning', 'delete'
133
- title: 'Título do Modal',
134
- message: 'Mensagem personalizada para o modal.',
135
- onConfirm: () => { console.log('Deletado com sucesso!'); },
136
- onCancel: () => { console.log('Cancelado!'); }
137
- });
138
- };
139
-
146
+ ### `FlickerModals.showModal(config)`
140
147
 
141
- ```
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. |
142
155
 
143
156
  ---
144
157
 
145
- # Caso o Estilo Não Esteja Sendo Aplicado no React
146
- 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
147
159
 
148
- 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/).
149
161
 
150
- 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
- }