faw_toast 1.0.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 9d9054fe80f547f53c0c5bd6609cac4df141296d3ee4fbd28ba01ec3f74fe49b
+  data.tar.gz: 559b7cb87dbaf08f34bf9b6bc9f6a2088b9b148eec850316967b3448eb9c968f
+SHA512:
+  metadata.gz: d0a8f13a9addd28afbf43dcb1c689d7a2ef418a9fce531e34bb7177afaad2289eb75b8c591894edb516ea1edbb9d1fec52518912fcb9de13b388597f1165e44c
+  data.tar.gz: ad1c7c85ddfdd1364ba1ded85c704c6427c7198cc0d797b760cd877c929f14dd0a9a36fc837747d010cffb37200dbb864d706c259230fc74865218c558e50a32

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2025 TODO: Write your name
+
+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 @@
+# FawToast
+
+A simple, configurable toast notification system for Rails applications. FawToast provides an easy way to display flash messages as toast notifications with minimal setup.
+
+## Features
+
+- Easy integration with Rails 7+ applications
+- CSS-only animations
+- Configurable toast duration and position
+- Customizable CSS classes for different flash types
+- Support for standard flash types plus additional success and info types
+- Simple to install and use
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'faw_toast'
+```
+
+And then execute:
+
+```bash
+bundle install
+```
+
+Or install it yourself as:
+
+```bash
+gem install faw_toast
+```
+
+After installing the gem, run the installation generator:
+
+```bash
+rails generate faw_toast:install
+```
+
+This will:
+1. Create a configuration initializer at `config/initializers/faw_toast.rb`
+2. Add the toast container to your application layout
+3. Import the required stylesheet and JavaScript controller
+
+## Usage
+
+FawToast works with Rails flash messages. You can use it like this:
+
+```ruby
+# In your controller
+def create
+  # Your logic here
+  flash[:success] = "Item was successfully created!"
+  redirect_to items_path
+end
+```
+
+FawToast supports the following flash types out of the box:
+- `:success` - Green border
+- `:alert` - Red border
+- `:info` - Sky blue border
+- `:notice` - Sky blue border
+- Any other type will use the default indigo border
+
+## Configuration
+
+You can configure FawToast by editing the initializer at `config/initializers/faw_toast.rb`:
+
+```ruby
+FawToast.configure do |config|
+  # Duration in seconds for which the toast will be displayed
+  config.duration_seconds = '7s'
+
+  # Position of the toast container
+  # Available options: 'top-right', 'top-left', 'bottom-right', 'bottom-left', 'top-center', 'bottom-center'
+  config.position = 'top-right'
+
+  # CSS classes for different flash types
+  config.css_classes = {
+    success: 'border-l-10 border-green-500',
+    alert: 'border-l-10 border-red-500',
+    info: 'border-l-10 border-sky-600',
+    notice: 'border-l-10 border-sky-600',
+    default: 'border-l-10 border-indigo-500'
+  }
+end
+```
+
+## How It Works
+
+FawToast uses CSS animations to show and hide toast notifications automatically. Each toast includes:
+
+1. A colored left border indicating the message type (success, alert, info, etc.)
+2. The flash message content
+3. A progress bar that indicates how much time is left before the toast disappears
+
+The toast appears with a slide-in animation, stays visible for the configured duration, and then slides out automatically. No JavaScript interaction is required for the basic functionality.
+
+## Development
+
+After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake spec` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/example/faw_toast.
+
+## License
+
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1,3 @@
+# frozen_string_literal: true
+
+require "bundler/gem_tasks"

data/app/assets/stylesheets/faw_toast.scss

@@ -0,0 +1,129 @@
+.faw-toast-container {
+  position: fixed;
+  z-index: 9999;
+  pointer-events: none;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+
+  &.faw-toast-top-right {
+    top: 1rem;
+    right: 1rem;
+  }
+
+  &.faw-toast-top-left {
+    top: 1rem;
+    left: 1rem;
+  }
+
+  &.faw-toast-bottom-right {
+    bottom: 1rem;
+    right: 1rem;
+  }
+
+  &.faw-toast-bottom-left {
+    bottom: 1rem;
+    left: 1rem;
+  }
+
+  &.faw-toast-top-center {
+    top: 1rem;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  &.faw-toast-bottom-center {
+    bottom: 1rem;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
+
+.faw-toast {
+  margin-bottom: 10px;
+  padding: 1rem;
+  border-radius: 4px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+  position: relative;
+  overflow: hidden;
+  animation: faw-toast-slideIn 0.3s ease-in-out, faw-toast-slideOut 0.3s ease-in-out var(--faw-toast-duration) forwards;
+  max-width: 24rem;
+  width: 100%;
+  pointer-events: auto;
+  background-color: white;
+
+  &.faw-toast-border-l-10 {
+    border-left-width: 10px;
+    border-left-style: solid;
+  }
+
+  &.faw-toast-border-green-500 {
+    border-left-color: #10b981;
+  }
+
+  &.faw-toast-border-red-500 {
+    border-left-color: #ef4444;
+  }
+
+  &.faw-toast-border-sky-600 {
+    border-left-color: #0284c7;
+  }
+
+  &.faw-toast-border-indigo-500 {
+    border-left-color: #6366f1;
+  }
+
+  .faw-toast-content {
+    flex: 1;
+  }
+
+  .faw-toast-close {
+    cursor: pointer;
+    color: #6b7280;
+
+    &:hover {
+      color: #111827;
+    }
+  }
+
+  .faw-toast-progress {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 3px;
+    background-color: rgba(0, 0, 0, 0.2);
+    width: 100%;
+    animation: faw-toast-progress var(--faw-toast-duration) linear;
+  }
+}
+
+@keyframes faw-toast-slideIn {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes faw-toast-slideOut {
+  from {
+    transform: translateX(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+}
+
+@keyframes faw-toast-progress {
+  from {
+    width: 100%;
+  }
+  to {
+    width: 0;
+  }
+}

data/app/javascript/faw_toast.js

@@ -0,0 +1,37 @@
+// Self-initializing toast handler
+document.addEventListener('DOMContentLoaded', function() {
+  console.log('DOMContentLoaded');
+  // Function to handle toast animations
+  function setupToastListeners() {
+    // Find all toast elements
+    const toasts = document.querySelectorAll('.faw-toast');
+
+    // Add animation end listeners to each toast
+    toasts.forEach(function(toast) {
+      toast.addEventListener('animationend', function(event) {
+        // Only remove the toast when the slideOut animation completes
+        if (event.animationName === 'faw-toast-slideOut') {
+          toast.remove();
+        }
+      });
+    });
+  }
+
+  // Initial setup
+  setupToastListeners();
+
+  // Also handle dynamically added toasts (for turbo/ajax)
+  const observer = new MutationObserver(function(mutations) {
+    mutations.forEach(function(mutation) {
+      if (mutation.addedNodes.length) {
+        setupToastListeners();
+      }
+    });
+  });
+
+  // Start observing the document for added nodes
+  observer.observe(document.body, {
+    childList: true,
+    subtree: true
+  });
+});

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

@@ -0,0 +1,9 @@
+<%# Toast partial for rendering flash messages %>
+<% if flash.any? %>
+  <% flash.each do |type, message| %>
+    <div class="faw-toast <%= flash_class(type) %>">
+      <%= message %>
+      <div class="faw-toast-progress"></div>
+    </div>
+  <% end %>
+<% end %>

data/lib/faw_toast/configuration.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module FawToast
+  class Configuration
+    attr_accessor :duration_seconds, :position, :css_classes
+
+    def initialize
+      @duration_seconds = "7s"
+      @position = 'top-right'
+      @css_classes = {
+        success: 'faw-toast-border-l-10 faw-toast-border-green-500',
+        alert: 'faw-toast-border-l-10 faw-toast-border-red-500',
+        info: 'faw-toast-border-l-10 faw-toast-border-sky-600',
+        notice: 'faw-toast-border-l-10 faw-toast-border-sky-600',
+        default: 'faw-toast-border-l-10 faw-toast-border-indigo-500'
+      }
+    end
+  end
+end

data/lib/faw_toast/engine.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module FawToast
+  class Engine < ::Rails::Engine
+    isolate_namespace FawToast
+
+    initializer "faw_toast.helpers" do
+      ActiveSupport.on_load(:action_controller) do
+        include FawToast::ToastHelper
+      end
+
+      ActiveSupport.on_load(:action_view) do
+        include FawToast::ToastHelper
+      end
+    end
+
+    initializer "faw_toast.flash_types" do
+      ActionController::Base.add_flash_types :success, :info
+    end
+  end
+end

data/lib/faw_toast/toast_helper.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module FawToast
+  module ToastHelper
+    def flash_class(type)
+      FawToast.configuration.css_classes[type.to_sym] || FawToast.configuration.css_classes[:default]
+    end
+
+    def render_toast
+      render partial: "faw_toast/toast"
+    end
+
+    def toast_container
+      content_tag :div, id: "faw-toast-container", class: "faw-toast-container faw-toast-#{FawToast.configuration.position}" do
+        render_toast
+      end
+    end
+
+    def toast_css_variables
+      # Generate a style tag with CSS variables based on configuration
+      content_tag :style do
+        ":root { --faw-toast-duration: #{FawToast.configuration.duration_seconds}; }".html_safe
+      end
+    end
+  end
+end

data/lib/faw_toast/version.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+module FawToast
+  VERSION = "1.0.0"
+end

data/lib/faw_toast.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+require_relative "faw_toast/version"
+require_relative "faw_toast/engine"
+require_relative "faw_toast/configuration"
+require_relative "faw_toast/toast_helper"
+
+module FawToast
+  class Error < StandardError; end
+
+  class << self
+    attr_writer :configuration
+
+    def configuration
+      @configuration ||= Configuration.new
+    end
+
+    def configure
+      yield(configuration)
+    end
+  end
+end

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

@@ -0,0 +1,80 @@
+# frozen_string_literal: true
+
+module FawToast
+  module Generators
+    class InstallGenerator < Rails::Generators::Base
+      source_root File.expand_path('templates', __dir__)
+
+      desc "Installs FawToast configuration"
+
+      def copy_initializer
+        template "faw_toast.rb", "config/initializers/faw_toast.rb"
+      end
+
+      def add_css_variables_to_layout
+        inject_into_file "app/views/layouts/application.html.erb", after: "<head>" do
+          <<-HTML
+
+  <%= toast_css_variables %>
+          HTML
+        end
+      end
+
+      def add_toast_container_to_layout
+        inject_into_file "app/views/layouts/application.html.erb", before: "</body>" do
+          <<-HTML
+  <%= toast_container %>
+          HTML
+        end
+      end
+
+      def add_stylesheet_import
+        if File.exist?("app/assets/stylesheets/application.scss")
+          append_to_file "app/assets/stylesheets/application.scss" do
+            "\n@import \"faw_toast\";\n"
+          end
+        else
+          say "Please manually import the FawToast stylesheet in your application", :red
+        end
+      end
+
+      def add_javascript_import
+        if File.exist?("app/javascript/application.js")
+          append_to_file "app/javascript/application.js" do
+            "import \"faw_toast\"\n"
+          end
+        elsif File.exist?("app/assets/javascripts/application.js")
+          append_to_file "app/assets/javascripts/application.js" do
+            "//= require faw_toast\n"
+          end
+        else
+          say "Please manually import the FawToast JavaScript in your application", :red
+        end
+      end
+
+      def update_tsconfig
+        gem_path = `bundle show faw_toast`.chomp
+
+        # Default tsconfig structure if file doesn't exist
+        tsconfig = if File.exist?("tsconfig.json")
+          JSON.parse(File.read("tsconfig.json"))
+        else
+          {
+            "compilerOptions" => {
+              "baseUrl" => ".",
+              "paths" => {}
+            }
+          }
+        end
+
+        tsconfig["compilerOptions"] ||= {}
+        tsconfig["compilerOptions"]["paths"] ||= {}
+        tsconfig["compilerOptions"]["paths"]["faw_toast"] = ["#{gem_path}/app/javascript/faw_toast.js"]
+
+        File.write("tsconfig.json", JSON.pretty_generate(tsconfig))
+
+        say "Updated tsconfig.json with FawToast paths", :green
+      end
+    end
+  end
+end

data/lib/generators/faw_toast/install/templates/faw_toast.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+FawToast.configure do |config|
+  # Duration in seconds for which the toast will be displayed
+  # config.duration_seconds = '7s'
+
+  # Position of the toast container
+  # Available options: 'top-right', 'top-left', 'bottom-right', 'bottom-left', 'top-center', 'bottom-center'
+  # config.position = 'top-right'
+
+  # CSS classes for different flash types
+  # config.css_classes = {
+  #   success: 'faw-toast-border-l-10 faw-toast-border-green-500',
+  #   alert: 'faw-toast-border-l-10 faw-toast-border-red-500',
+  #   info: 'faw-toast-border-l-10 faw-toast-border-sky-600',
+  #   notice: 'faw-toast-border-l-10 faw-toast-border-sky-600',
+  #   default: 'faw-toast-border-l-10 faw-toast-border-indigo-500'
+  # }
+end

metadata

@@ -0,0 +1,74 @@
+--- !ruby/object:Gem::Specification
+name: faw_toast
+version: !ruby/object:Gem::Version
+  version: 1.0.0
+platform: ruby
+authors:
+- alexwebgr
+autorequire:
+bindir: exe
+cert_chain: []
+date: 2025-04-26 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  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'
+description: FawToast provides an easy way to display flash messages as toast notifications
+  in Rails applications
+email:
+- info@example.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- LICENSE.txt
+- README.md
+- Rakefile
+- app/assets/stylesheets/faw_toast.scss
+- app/javascript/faw_toast.js
+- app/views/faw_toast/_toast.html.erb
+- lib/faw_toast.rb
+- lib/faw_toast/configuration.rb
+- lib/faw_toast/engine.rb
+- lib/faw_toast/toast_helper.rb
+- lib/faw_toast/version.rb
+- lib/generators/faw_toast/install/install_generator.rb
+- lib/generators/faw_toast/install/templates/faw_toast.rb
+homepage: https://github.com/alexwebgr/faw_toast
+licenses:
+- MIT
+metadata:
+  homepage_uri: https://github.com/alexwebgr/faw_toast
+  source_code_uri: https://github.com/alexwebgr/faw_toast
+  changelog_uri: https://github.com/alexwebgr/faw_toast/blob/main/CHANGELOG.md
+post_install_message:
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: 3.0.0
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.3.7
+signing_key:
+specification_version: 4
+summary: A simple, configurable toast notification system for Rails applications
+test_files: []