# FlickerAlerts

**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.

---

## 📦 Instalação

Instale a biblioteca usando o npm:

```bash
npm install flicker-alerts
```

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.

---

## 🌍 Links Importantes

Esses links são essenciais para o funcionamento adequado dos estilos e ícones:

- **Bootstrap** (para estilos de layout):
  ```html
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
  ```

- **Font Awesome** (para ícones):
  ```html
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
  ```

- **Estilo do FlickerAlerts** (para os estilos da biblioteca):
  ```html
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flicker-alerts/style.css">
  ```

---

## 🚀 Uso

Após a instalação, importe a biblioteca no seu projeto e utilize a função `showAlert` ou `showModal` para criar alertas e modais.

### Exemplo Básico de Alerta:

```javascript
import { FlickerAlerts, FlickerModals } from 'flicker-alerts';

FlickerAlerts.showAlert({
  type: 'success', // 'success', 'info', 'warning', 'danger'
  title: 'Sucesso!',
  message: 'Operação realizada com sucesso.',
  position: 'top-right', // Você pode usar qualquer uma das opções abaixo:
  // 'top-right', 'top-left', 'bottom-right', 'bottom-left', 
  // 'center', 'top-center', 'bottom-center'
  duration: 5000 
});
```

---

## 🔧 Integração por Framework

### Angular

1. **Importe e use:**

```typescript
import { FlickerAlerts, FlickerModals } from 'flicker-alerts';

export class AppComponent {
  showAlert() {
    FlickerAlerts.showAlert({
      type: 'warning',
      title: 'Atenção!',
      message: 'Algo deu errado.',
      position: 'top-center',
      duration: 5000 
    });
  }

 const showModal = () => {
  FlickerModals.showModal({
    type: 'delete',
    title: 'Confirmação de Exclusão',
    message: 'Deseja realmente excluir este item?',
    onConfirm: () => {
      console.log('Item deletado!');
      // Exibir o alerta de sucesso após a exclusão
      FlickerAlerts.showAlert({
        type: 'success',
        title: 'Sucesso!',
        message: 'Item deletado com sucesso!',
        duration: 3000 // duração do alerta
      });
    },
    onCancel: () => {
      console.log('Ação cancelada.');
    }
  });
};

}
```

2. **Adicione os estilos ao `angular.json`:**

Se você prefere não usar o CDN, pode configurar o Angular para importar o arquivo CSS diretamente do pacote instalado:

```json
"styles": [
  "node_modules/flicker-alerts/style.css"
]
```

---

### React

1. **Importe e use:**

```javascript
import { FlickerAlerts, FlickerModals } from 'flicker-alerts';


const App = () => {
  const showAlert = () => {
    FlickerAlerts.showAlert({
      type: 'info',
      title: 'Informação',
      message: 'Este é um alerta informativo.',
      position: 'bottom-left',
      duration: 5000 
    });
  };

const showModal = () => {
  FlickerModals.showModal({
    type: 'delete',
    title: 'Confirmação de Exclusão',
    message: 'Deseja realmente excluir este item?',
    onConfirm: () => {
      console.log('Item deletado!');
      // Exibir o alerta de sucesso após a exclusão
      FlickerAlerts.showAlert({
        type: 'success',
        title: 'Sucesso!',
        message: 'Item deletado com sucesso!',
        duration: 3000 // duração do alerta
      });
    },
    onCancel: () => {
      console.log('Ação cancelada.');
    }
  });
};


 
};
```

2. **Adicione os estilos manualmente no React:**

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`:

```javascript
import 'flicker-alerts/style.css';
```

Essa abordagem é recomendada para garantir que o estilo seja incluído no build final da aplicação.

---

## 📖 API

### `FlickerAlerts.showAlert(config)`

| Propriedade | Tipo       | Descrição                                      |
|-------------|------------|------------------------------------------------|
| `type`      | `string`   | Tipo do alerta: `success`, `info`, `warning`, `danger`. |
| `title`     | `string`   | Título do alerta.                              |
| `message`   | `string`   | Mensagem do alerta.                            |
| `position`  | `string`   |Posição: `top-right`, `top-left`, `bottom-right`, `bottom-left`, `center`, `top-center`, `bottom-center`.|
| `duration`   | `number`   | Duração do alerta em milissegundos.            |

---

### `FlickerModals.showModal(config)`

| Propriedade   | Tipo       | Descrição                                         |
|---------------|------------|---------------------------------------------------|
| `type`        | `string`   | Tipo do modal: `warning`, `delete`.               |
| `title`       | `string`   | Título do modal.                                  |
| `message`     | `string`   | Mensagem exibida no modal.                        |
| `onConfirm`   | `function` | Callback para execução quando confirmado.         |
| `onCancel`    | `function` | Callback para execução quando cancelado.          |

---

## 💬 Suporte

Caso tenha dúvidas ou precise de ajuda, entre em contato com o desenvolvedor no [LinkedIn](https://www.linkedin.com/in/bruno-carneiro-9a51aa190/).

---