Merge pull request #7 from dmkenney/dev

Author: dmkenney

CHANGELOG.md

@@ -5,6 +5,15 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.2.0] - 2025-07-28
+
+### Added
+- HTML rendering support - Toasts can now render HTML content with the `html` option
+- Configurable animation duration - Animation timing can be customized (defaults to 400ms)
+
+### Fixed
+- DaisyUI style conflict documentation
+
 ## [0.1.0] - 2025-07-18
 
 Initial release

CONTRIBUTING.md

@@ -0,0 +1,174 @@
+# Contributing to Toast
+
+Thank you for your interest in contributing to Toast! This guide will help you get started with contributing to the project.
+
+## Table of Contents
+
+- [Development Setup](#development-setup)
+- [Development Workflow](#development-workflow)
+- [Testing](#testing)
+- [Code Style](#code-style)
+- [Submitting Changes](#submitting-changes)
+- [Reporting Issues](#reporting-issues)
+- [Feature Requests](#feature-requests)
+
+## Development Setup
+
+1. **Fork and clone the repository**
+   ```bash
+   git clone https://github.com/YOUR_USERNAME/toast.git
+   cd toast
+   ```
+
+2. **Install dependencies**
+   ```bash
+   mix deps.get
+   ```
+
+3. **Set up the demo application**
+   ```bash
+   cd demo
+   mix setup
+   ```
+
+## Development Workflow
+
+Toast includes a demo application in the `demo/` directory that makes development easier. We've created Mix tasks to streamline the development process:
+
+### Working with Local Changes
+
+1. **Switch to local development mode**
+   ```bash
+   cd demo
+   mix mode.local
+   ```
+   This creates a symlink from `demo/deps/toast` to your local toast project, allowing you to see changes immediately.
+
+2. **Check current mode**
+   ```bash
+   mix mode
+   ```
+   This shows whether you're using the local version or the published Hex package.
+
+3. **Switch to published mode**
+   ```bash
+   mix mode.published
+   ```
+   This uses the published Hex package, useful for testing the actual release.
+
+### Running the Demo
+
+```bash
+cd demo
+mix phx.server
+```
+
+Visit [`localhost:4000`](http://localhost:4000) to see the demo application with live examples of toast notifications.
+
+## Testing
+
+### Running Tests
+
+```bash
+# Run tests in the main project
+mix test
+
+# Run tests in the demo
+cd demo && mix test
+```
+
+### Testing Your Changes
+
+1. Make your changes to the toast library
+2. Ensure you're in local mode (`mix mode.local` in the demo directory)
+3. Test your changes in the demo application
+4. Write or update tests as needed
+
+## Code Style
+
+- Follow standard Elixir conventions
+- Run the formatter before committing: `mix format`
+- Write descriptive commit messages
+
+### JavaScript Code
+
+- The JavaScript hook is in `assets/js/toast.js`
+- Follow existing code patterns and style
+
+### CSS Styles
+
+- Styles are in `assets/css/toast.css`
+
+## Submitting Changes
+
+1. **Create a feature branch from `dev`**
+   ```bash
+   git checkout dev
+   git pull origin dev
+   git checkout -b feature/your-feature-name
+   ```
+
+2. **Make your changes**
+   - Write clear, focused commits
+   - Include tests for new functionality
+   - Update documentation as needed
+
+3. **Ensure all tests pass**
+   ```bash
+   mix test
+   mix format --check-formatted
+   ```
+
+4. **Push your branch and create a pull request**
+   - **IMPORTANT: Target the `dev` branch, not `main`**
+   - Provide a clear description of your changes
+   - Reference any related issues
+   - Include screenshots for UI changes
+
+### Pull Request Guidelines
+
+- **Target Branch**: All PRs should target the `dev` branch
+- **Title**: Use a clear, descriptive title
+- **Description**: Explain what changes you made and why
+- **Testing**: Describe how you tested your changes
+- **Breaking Changes**: Clearly note any breaking changes
+
+## Reporting Issues
+
+When reporting issues, please include:
+
+- Elixir/Erlang versions (`elixir --version`)
+- Phoenix version
+- LiveView version
+- Steps to reproduce the issue
+- Expected behavior
+- Actual behavior
+- Any error messages or logs
+
+## Feature Requests
+
+We welcome feature requests! Please:
+
+- Check existing issues to avoid duplicates
+- Provide a clear use case
+- Explain why the feature would be valuable
+- If possible, suggest an implementation approach
+
+## Publishing (Maintainers Only)
+
+When ready to publish a new version:
+
+1. Update the version in `mix.exs`
+2. Update the CHANGELOG.md
+3. From the demo directory, run:
+   ```bash
+   cd demo
+   mix toast_publish
+   ```
+   This automatically switches the demo to use the published version before publishing.
+
+## Questions?
+
+Feel free to open an issue for any questions about contributing. We're here to help!
+
+Thank you for contributing to Toast! 🍞

README.md

@@ -31,7 +31,7 @@ Add `toast` to your list of dependencies in `mix.exs`:
 ```elixir
 def deps do
   [
-    {:toast, "~> 0.1.0"}
+    {:toast, "~> 0.2.0"}
   ]
 end
 ```
@@ -146,6 +146,7 @@ Configure the toast container with these attributes:
   theme="light"
   rich_colors={false}
   max_toasts={3}
+  animation_duration={400}
 />
 ```
 
@@ -155,6 +156,7 @@ Configure the toast container with these attributes:
 | `theme` | string | `"light"` | Theme style: `"light"` or `"dark"` |
 | `rich_colors` | boolean | `false` | Use more vibrant colors for toast types |
 | `max_toasts` | integer | `3` | Maximum number of visible toasts |
+| `animation_duration` | integer | `400` | Duration of animations in milliseconds |
 
 ### Individual Toast Options
 
@@ -210,6 +212,28 @@ Toast.send_toast(:info, "Custom icon",
 )
 ```
 
+### HTML Content
+
+Toast supports rendering raw HTML in messages, titles, and descriptions using `Phoenix.HTML.raw/1`:
+
+```elixir
+# Basic HTML formatting
+Toast.send_toast(:info, Phoenix.HTML.raw("<strong>Bold</strong> and <em>italic</em> text"))
+
+# Rich HTML content
+Toast.send_toast(:success, Phoenix.HTML.raw("Payment processed"),
+  title: Phoenix.HTML.raw("Transaction <em>Complete</em>"),
+  description: Phoenix.HTML.raw("ID: <code>TXN-12345</code>")
+)
+
+# Mixed content (some fields escaped, some raw)
+Toast.send_toast(:info, "This is escaped: <script>",
+  description: Phoenix.HTML.raw("This is <strong>HTML</strong>")
+)
+```
+
+**⚠️ Security Warning**: Only use `Phoenix.HTML.raw/1` with trusted content. Never render user-generated HTML without proper sanitization as it can lead to XSS vulnerabilities.
+
 ### Update Existing Toasts
 
 Update a toast after it's displayed:
@@ -257,6 +281,7 @@ Toast uses CSS custom properties for easy theming:
   --toast-gap: 15px;
   --toast-width: 350px;
   --toast-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  --toast-animation-duration: 400ms;
 }
 
 /* Override specific toast types */

assets/css/toast.css

@@ -8,6 +8,7 @@
   width: 356px;
   max-width: calc(100vw - 32px);
   --front-toast-height: 0px;
+  --toast-animation-duration: 400ms;
   gap: 16px;
 }
 
@@ -78,7 +79,7 @@
   z-index: var(--z-index);
   left: 0;
   right: 0;
-  transition: transform 400ms ease, opacity 400ms ease, height 400ms ease;
+  transition: transform var(--toast-animation-duration) ease, opacity var(--toast-animation-duration) ease, height var(--toast-animation-duration) ease;
 }
 
 /* Top positions use relative positioning for front toast */
@@ -166,7 +167,7 @@
 
 /* Smooth transitions for toast content */
 .toast > * {
-  transition: opacity 400ms ease;
+  transition: opacity var(--toast-animation-duration) ease;
 }
 
 /* All toasts when expanded (hovering) - bottom positions */

assets/js/toast.js

@@ -7,8 +7,12 @@ export default {
     this.position = this.el.dataset.position || "bottom-right";
     this.gap = 15;
     this.maxToasts = parseInt(this.el.dataset.maxToasts) || null;
+    this.animationDuration = parseInt(this.el.dataset.animationDuration) || 400;
     this.expanded = false;
 
+    // Set CSS variable for animation duration
+    this.el.parentElement.style.setProperty('--toast-animation-duration', `${this.animationDuration}ms`);
+
     // Handle clear-flash events from server
     this.handleEvent("clear-flash", ({ key }) => {
       const flashEl = document.querySelector(`[data-phx-flash="${key}"]`);
@@ -50,6 +54,22 @@ export default {
   updated() {
     // Update maxToasts in case it changed
     this.maxToasts = parseInt(this.el.dataset.maxToasts) || null;
+    const newAnimationDuration = parseInt(this.el.dataset.animationDuration) || 400;
+    
+    // Check if animation duration changed
+    if (newAnimationDuration !== this.animationDuration) {
+      this.animationDuration = newAnimationDuration;
+      
+      // Update CSS variable for animation duration
+      this.el.parentElement.style.setProperty('--toast-animation-duration', `${this.animationDuration}ms`);
+      
+      // Update transition on all existing toasts
+      this.toasts.forEach((toastInfo) => {
+        if (toastInfo.element && toastInfo.element.getAttribute('data-mounted') === 'true') {
+          toastInfo.element.style.transition = `all ${this.animationDuration}ms cubic-bezier(0.21, 1.02, 0.73, 1)`;
+        }
+      });
+    }
 
     // Immediately update positions for all toasts when DOM changes
     const toastElements = Array.from(this.el.querySelectorAll('[id^="toasts-"]'));
@@ -165,7 +185,7 @@ export default {
 
       // Small delay to ensure layout is settled, then enable transitions and mount
       setTimeout(() => {
-        toastEl.style.transition = "all 400ms cubic-bezier(0.21, 1.02, 0.73, 1)";
+        toastEl.style.transition = `all ${this.animationDuration}ms cubic-bezier(0.21, 1.02, 0.73, 1)`;
         toastEl.setAttribute('data-mounted', 'true');
       }, 10);
 
@@ -356,7 +376,7 @@ export default {
           // Wait for animation to complete before removing
           setTimeout(() => {
             this.removeToastFromServer(toastId);
-          }, 300); // Animation duration
+          }, this.animationDuration); // Animation duration
         }
       } else {
         // Show toasts within limit
@@ -396,7 +416,7 @@ export default {
 
             // Also send event to parent LiveView to clear from Phoenix flash
             this.pushEvent("lv:clear-flash", { key: flashKey });
-          }, 300);
+          }, this.animationDuration);
         }
       }
     });