dlnk_toast 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 79d9562b09be7d950804a9a8ef92b03639b46ffc0482a1cc2cd2521ce6b3b258
+  data.tar.gz: f0d679777b69412f81931ab7bde6abc862bb9a0d113fd035422f33cb39067d51
+SHA512:
+  metadata.gz: 47c4823b8cc92e1e3189dcc6d31a678129f6272817dac0b708f8c4195bdeccaf195320f2564cb4a7c7048ae68d7cf94ad289040616f96843e268081526de7cfc
+  data.tar.gz: 35f1ca56f77df72772c85efc1e9675088a262d30bbe0a3fa13ff6927efcfcfc3b4795af2bf1527baeefdf920b4fa8db447e7a56ce42aae577c9672b57e3ac788

data/CHANGELOG.md

@@ -0,0 +1,14 @@
+# Changelog
+
+## [0.1.0] - 2026-02-24
+
+### Added
+- Initial release
+- Flash-based toast notifications with notice/alert support
+- Stimulus controller for pause/resume on hover
+- Vanilla CSS with CSS variables for customization
+- Responsive design with mobile support
+- Accessibility features (ARIA labels, roles)
+- i18n support (English, French)
+- Rails generator for easy installation
+- Configuration system for toast duration

data/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Cyril
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

data/README.md

@@ -0,0 +1,109 @@
+# DlnkToast
+
+Simple, elegant toast notifications for Rails 7+ applications using Hotwire and vanilla CSS.
+
+## Features
+
+- ✨ Flash-based notifications (notice/alert)
+- 🎯 Stimulus controller for UX (pause on hover, dismiss)
+- 🎨 Vanilla CSS with CSS variables for easy customization
+- 📱 Responsive design
+- ♿ Built-in accessibility (ARIA labels, roles)
+- 🌍 Internationalization (i18n) support
+- 🚀 Zero JavaScript bundle impact (uses importmap)
+
+## Installation
+
+Add to your Gemfile:
+
+```ruby
+gem "dlnk_toast"
+```
+
+Then run the installer:
+
+```bash
+bundle install
+bin/rails generate dlnk_toast:install
+```
+
+The installer will:
+- Create `config/initializers/dlnk_toast.rb`
+- Add the Stimulus controller to your importmap (if present)
+- Inject the toast partial into your layouts
+
+## Usage
+
+Use Rails flash messages as usual:
+
+```ruby
+def create
+  @user = User.new(user_params)
+  if @user.save
+    redirect_to @user, notice: "User created successfully"
+  else
+    render :new, alert: "Failed to create user"
+  end
+end
+```
+
+Your flash messages will automatically appear as toasts!
+
+## Customization
+
+### CSS Variables
+
+Override these in your `app/assets/stylesheets/application.css`:
+
+```css
+:root {
+  --dlnk-toast-bg: #1a1a1a;
+  --dlnk-toast-border: #1f1f1f;
+  --dlnk-toast-text: #ffffff;
+  --dlnk-toast-text-dim: #6B6B6B;
+  --dlnk-toast-accent: #D4A017;          /* Success color */
+  --dlnk-toast-error: #ef4444;           /* Alert color */
+  --dlnk-toast-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+}
+```
+
+### Duration
+
+Edit `config/initializers/dlnk_toast.rb`:
+
+```ruby
+DlnkToast.configure do |config|
+  config.duration = 5000  # milliseconds
+end
+```
+
+### Manual Rendering
+
+If you need to render toasts outside of layouts:
+
+```erb
+<%= render_toast %>
+```
+
+## Translations
+
+Translations are provided for English and French. Add custom ones to your locale files:
+
+```yaml
+# config/locales/en.yml
+en:
+  dlnk_toast:
+    close: "Close"
+```
+
+## Browser Support
+
+Works in all modern browsers that support CSS Grid, Flexbox, and CSS custom properties.
+
+## License
+
+MIT License. See LICENSE file for details.
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub.

data/app/assets/stylesheets/dlnk_toast/application.css

@@ -0,0 +1,142 @@
+/* DlnkToast: Toast Notifications for Rails + Hotwire */
+
+/* ─── CSS Variables (customize in your app) ─── */
+:root {
+  --dlnk-toast-bg: #1a1a1a;
+  --dlnk-toast-border: #1f1f1f;
+  --dlnk-toast-text: #ffffff;
+  --dlnk-toast-text-dim: #6B6B6B;
+  --dlnk-toast-accent: #D4A017;
+  --dlnk-toast-error: #ef4444;
+  --dlnk-toast-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+}
+
+/* ─── Animations ─── */
+@keyframes dlnk-toast-in {
+  from {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes dlnk-toast-out {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+}
+
+/* ─── Toast Component ─── */
+.dlnk-toast {
+  position: fixed;
+  top: 5rem;
+  right: 1rem;
+  z-index: 50;
+  max-width: 28rem;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.dlnk-toast--enter {
+  animation: dlnk-toast-in 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.dlnk-toast--exit {
+  animation: dlnk-toast-out 0.2s cubic-bezier(0.4, 0, 1, 1) both;
+}
+
+.dlnk-toast__body {
+  background: var(--dlnk-toast-bg);
+  border: 1px solid var(--dlnk-toast-border);
+  border-radius: 0.5rem;
+  box-shadow: var(--dlnk-toast-shadow);
+  overflow: hidden;
+}
+
+.dlnk-toast__content {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+}
+
+.dlnk-toast__icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  flex-shrink: 0;
+  stroke-width: 2;
+}
+
+.dlnk-toast__icon--success {
+  color: var(--dlnk-toast-accent);
+}
+
+.dlnk-toast__icon--error {
+  color: var(--dlnk-toast-error);
+}
+
+.dlnk-toast__message {
+  color: var(--dlnk-toast-text);
+  font-size: 0.875rem;
+  font-weight: 500;
+  flex: 1;
+}
+
+.dlnk-toast__close {
+  background: none;
+  border: none;
+  padding: 0;
+  color: var(--dlnk-toast-text-dim);
+  cursor: pointer;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: color 0.2s ease;
+}
+
+.dlnk-toast__close:hover {
+  color: var(--dlnk-toast-text);
+}
+
+.dlnk-toast__close-icon {
+  width: 1rem;
+  height: 1rem;
+  stroke-width: 2;
+}
+
+.dlnk-toast__progress-bar {
+  height: 0.125rem;
+  background: var(--dlnk-toast-border);
+}
+
+.dlnk-toast__progress {
+  height: 100%;
+  transition: width linear;
+}
+
+.dlnk-toast__progress--success {
+  background: var(--dlnk-toast-accent);
+}
+
+.dlnk-toast__progress--error {
+  background: var(--dlnk-toast-error);
+}
+
+/* ─── Responsive ─── */
+@media (max-width: 640px) {
+  .dlnk-toast {
+    top: 1rem;
+    right: 0.5rem;
+    left: 0.5rem;
+    max-width: none;
+  }
+}

data/app/helpers/dlnk_toast/toast_helper.rb

@@ -0,0 +1,7 @@
+module DlnkToast
+  module ToastHelper
+    def render_toast
+      render "dlnk_toast/toast"
+    end
+  end
+end

data/app/javascript/dlnk_toast/toast_controller.js

@@ -0,0 +1,71 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["progress"]
+  static values = { duration: { type: Number, default: 4000 } }
+
+  connect() {
+    this.remaining = this.durationValue
+    this.startTimer()
+    this.startProgress()
+  }
+
+  disconnect() {
+    this.clearTimer()
+  }
+
+  close() {
+    this.clearTimer()
+    this.element.classList.remove("dlnk-toast--enter")
+    this.element.classList.add("dlnk-toast--exit")
+    this.element.addEventListener("animationend", () => this.element.remove(), { once: true })
+  }
+
+  pause() {
+    this.clearTimer()
+    if (this.hasProgressTarget) {
+      const computed = getComputedStyle(this.progressTarget)
+      this.pausedWidth = computed.width
+      this.progressTarget.style.transition = "none"
+      this.progressTarget.style.width = this.pausedWidth
+    }
+  }
+
+  resume() {
+    if (this.hasProgressTarget) {
+      const currentPercent = (parseFloat(this.pausedWidth) / this.progressTarget.parentElement.offsetWidth) * 100
+      this.remaining = (currentPercent / 100) * this.durationValue
+      requestAnimationFrame(() => {
+        this.progressTarget.style.transition = `width ${this.remaining}ms linear`
+        this.progressTarget.style.width = "0%"
+      })
+    }
+    this.startTimerWithRemaining()
+  }
+
+  // private
+
+  startTimer() {
+    this.timer = setTimeout(() => this.close(), this.durationValue)
+  }
+
+  startTimerWithRemaining() {
+    this.timer = setTimeout(() => this.close(), this.remaining)
+  }
+
+  clearTimer() {
+    if (this.timer) {
+      clearTimeout(this.timer)
+      this.timer = null
+    }
+  }
+
+  startProgress() {
+    if (!this.hasProgressTarget) return
+    this.progressTarget.style.width = "100%"
+    requestAnimationFrame(() => {
+      this.progressTarget.style.transition = `width ${this.durationValue}ms linear`
+      this.progressTarget.style.width = "0%"
+    })
+  }
+}

data/app/views/dlnk_toast/_toast.html.erb

@@ -0,0 +1,51 @@
+<% if flash[:notice].present? %>
+  <div class="dlnk-toast dlnk-toast--enter dlnk-toast--notice"
+       role="status"
+       aria-live="polite"
+       data-controller="dlnk-toast"
+       data-dlnk-toast-duration-value="<%= DlnkToast.configuration.duration %>"
+       data-action="mouseenter->dlnk-toast#pause mouseleave->dlnk-toast#resume">
+    <div class="dlnk-toast__body">
+      <div class="dlnk-toast__content">
+        <svg class="dlnk-toast__icon dlnk-toast__icon--success" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
+        </svg>
+        <span class="dlnk-toast__message"><%= flash[:notice] %></span>
+        <button data-action="dlnk-toast#close" aria-label="<%= t('dlnk_toast.close') %>" class="dlnk-toast__close">
+          <svg class="dlnk-toast__close-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+          </svg>
+        </button>
+      </div>
+      <div class="dlnk-toast__progress-bar">
+        <div data-dlnk-toast-target="progress" class="dlnk-toast__progress dlnk-toast__progress--success" style="width: 100%"></div>
+      </div>
+    </div>
+  </div>
+<% end %>
+
+<% if flash[:alert].present? %>
+  <div class="dlnk-toast dlnk-toast--enter dlnk-toast--alert"
+       role="alert"
+       aria-live="assertive"
+       data-controller="dlnk-toast"
+       data-dlnk-toast-duration-value="<%= DlnkToast.configuration.duration %>"
+       data-action="mouseenter->dlnk-toast#pause mouseleave->dlnk-toast#resume">
+    <div class="dlnk-toast__body">
+      <div class="dlnk-toast__content">
+        <svg class="dlnk-toast__icon dlnk-toast__icon--error" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+        </svg>
+        <span class="dlnk-toast__message"><%= flash[:alert] %></span>
+        <button data-action="dlnk-toast#close" aria-label="<%= t('dlnk_toast.close') %>" class="dlnk-toast__close">
+          <svg class="dlnk-toast__close-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+          </svg>
+        </button>
+      </div>
+      <div class="dlnk-toast__progress-bar">
+        <div data-dlnk-toast-target="progress" class="dlnk-toast__progress dlnk-toast__progress--error" style="width: 100%"></div>
+      </div>
+    </div>
+  </div>
+<% end %>

data/config/locales/en.yml

@@ -0,0 +1,3 @@
+en:
+  dlnk_toast:
+    close: "Close"

data/config/locales/fr.yml

@@ -0,0 +1,3 @@
+fr:
+  dlnk_toast:
+    close: "Fermer"

data/lib/dlnk_toast/configuration.rb

@@ -0,0 +1,17 @@
+module DlnkToast
+  class Configuration
+    attr_accessor :duration
+
+    def initialize
+      @duration = 4000
+    end
+  end
+
+  def self.configuration
+    @configuration ||= Configuration.new
+  end
+
+  def self.configure
+    yield(configuration)
+  end
+end

data/lib/dlnk_toast/engine.rb

@@ -0,0 +1,22 @@
+module DlnkToast
+  class Engine < ::Rails::Engine
+    isolate_namespace DlnkToast
+
+    initializer "dlnk_toast.helpers" do
+      ActiveSupport.on_load(:action_controller_base) do
+        helper DlnkToast::ToastHelper
+      end
+    end
+
+    initializer "dlnk_toast.assets" do |app|
+      app.config.assets.paths << root.join("app/assets/stylesheets")
+      app.config.assets.paths << root.join("app/javascript")
+    end
+
+    initializer "dlnk_toast.i18n" do
+      Engine.root.glob("config/locales/**/*.yml").each do |locale|
+        I18n.load_path << locale unless I18n.load_path.include?(locale)
+      end
+    end
+  end
+end

data/lib/dlnk_toast/version.rb

@@ -0,0 +1,3 @@
+module DlnkToast
+  VERSION = "0.1.0"
+end

data/lib/dlnk_toast.rb

@@ -0,0 +1,6 @@
+require "dlnk_toast/version"
+require "dlnk_toast/configuration"
+require "dlnk_toast/engine"
+
+module DlnkToast
+end

data/lib/generators/dlnk_toast/install/install_generator.rb

@@ -0,0 +1,44 @@
+require "rails/generators"
+
+module DlnkToast
+  module Generators
+    class InstallGenerator < Rails::Generators::Base
+      source_root File.expand_path("templates", __dir__)
+
+      desc "Install DlnkToast into your Rails application"
+
+      def copy_initializer
+        copy_file "initializer.rb", "config/initializers/dlnk_toast.rb"
+        say "Created config/initializers/dlnk_toast.rb"
+      end
+
+      def add_importmap_pin
+        return unless File.exist?("config/importmap.rb")
+        append_to_file "config/importmap.rb", "\npin \"dlnk_toast\", preload: true"
+        say "Added dlnk_toast to importmap.rb"
+      end
+
+      def inject_toast_in_layouts
+        inject_into_file "app/views/layouts/application.html.erb", before: "</body>" do
+          "\n  <%= render 'dlnk_toast/toast' %>\n"
+        end
+        say "Added toast partial to app/views/layouts/application.html.erb"
+
+        if File.exist?("app/views/layouts/admin.html.erb")
+          inject_into_file "app/views/layouts/admin.html.erb", before: "</body>" do
+            "\n  <%= render 'dlnk_toast/toast' %>\n"
+          end
+          say "Added toast partial to app/views/layouts/admin.html.erb"
+        end
+      end
+
+      def display_next_steps
+        say "\n✓ DlnkToast installed successfully!"
+        say "\nNext steps:"
+        say "  1. Customize CSS variables in app/assets/stylesheets/application.css"
+        say "  2. Adjust toast duration in config/initializers/dlnk_toast.rb if needed"
+        say "  3. Flash notices/alerts will now appear as toasts!"
+      end
+    end
+  end
+end

data/lib/generators/dlnk_toast/install/templates/initializer.rb

@@ -0,0 +1,7 @@
+# DlnkToast Configuration
+# https://github.com/cyril/dlnk_toast
+
+DlnkToast.configure do |config|
+  # Toast visibility duration in milliseconds
+  config.duration = 4000
+end

metadata

@@ -0,0 +1,103 @@
+--- !ruby/object:Gem::Specification
+name: dlnk_toast
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Cyril
+bindir: bin
+cert_chain: []
+date: 1980-01-02 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: railties
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '7.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '7.0'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '13.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '13.0'
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '7.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '7.0'
+description: Flash-based toast notifications using Stimulus and vanilla CSS for Rails
+  7+ applications
+email:
+- contact@dlnk.fr
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- CHANGELOG.md
+- LICENSE
+- README.md
+- app/assets/stylesheets/dlnk_toast/application.css
+- app/helpers/dlnk_toast/toast_helper.rb
+- app/javascript/dlnk_toast/toast_controller.js
+- app/views/dlnk_toast/_toast.html.erb
+- config/locales/en.yml
+- config/locales/fr.yml
+- lib/dlnk_toast.rb
+- lib/dlnk_toast/configuration.rb
+- lib/dlnk_toast/engine.rb
+- lib/dlnk_toast/version.rb
+- lib/generators/dlnk_toast/install/install_generator.rb
+- lib/generators/dlnk_toast/install/templates/initializer.rb
+homepage: https://github.com/cyril/dlnk_toast
+licenses:
+- MIT
+metadata:
+  rubygems_mfa_required: 'true'
+  homepage_uri: https://github.com/cyril/dlnk_toast
+  source_code_uri: https://github.com/cyril/dlnk_toast.git
+  bug_tracker_uri: https://github.com/cyril/dlnk_toast/issues
+  changelog_uri: https://github.com/cyril/dlnk_toast/blob/main/CHANGELOG.md
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '3.0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 4.0.3
+specification_version: 4
+summary: Hotwire toast notifications for Rails
+test_files: []