Merge remote-tracking branch 'origin/main' into da/toggle

# Conflicts:
#	docs/app/components/shared/components_list.rb
#	docs/app/controllers/docs_controller.rb
#	docs/app/javascript/controllers/index.js
#	docs/config/routes.rb

Author: djalmaaraujo

docs/.devcontainer/compose.yaml

@@ -7,7 +7,10 @@ services:
       dockerfile: .devcontainer/Dockerfile
 
     volumes:
-    - ../../web:/workspaces/web:cached
+    - ../..:/workspaces/ruby_ui:cached
+    working_dir: /workspaces/ruby_ui/docs
+    ports:
+    - "3001:3000"
 
     # Overrides default command so things don't shut down after the process ends.
     command: sleep infinity

docs/.gitignore

@@ -6,6 +6,7 @@
 
 # Ignore bundler config.
 /.bundle
+/vendor/bundle
 
 # Ignore all logfiles and tempfiles.
 /log/*

docs/app/components/shared/components_list.rb

@@ -50,6 +50,7 @@ def components
           {name: "Tabs", path: docs_tabs_path},
           {name: "Textarea", path: docs_textarea_path},
           {name: "Theme Toggle", path: docs_theme_toggle_path},
+          {name: "Toast", path: docs_toast_path},
           {name: "Toggle", path: docs_toggle_path},
           {name: "Toggle Group", path: docs_toggle_group_path},
           {name: "Tooltip", path: docs_tooltip_path},

docs/app/controllers/docs/toast_demo_controller.rb

@@ -0,0 +1,58 @@
+# frozen_string_literal: true
+
+module Docs
+  class ToastDemoController < ApplicationController
+    def default = push(:default, "Event scheduled", "Friday at 3:00 PM")
+
+    def success = push(:success, "Saved successfully", "Your changes are live.")
+
+    def error = push(:error, "Something went wrong", "Please retry.")
+
+    def warning = push(:warning, "Heads up", "Storage almost full.")
+
+    def info = push(:info, "FYI", "New version available.")
+
+    def with_action
+      render turbo_stream: build_stream(:default, "Email archived", nil, action_label: "Undo")
+    end
+
+    private
+
+    def push(variant, title, description)
+      render turbo_stream: build_stream(variant, title, description)
+    end
+
+    def build_stream(variant, title, description, action_label: nil)
+      content = ToastFragment.new(
+        variant: variant,
+        title: title,
+        description: description,
+        action_label: action_label
+      ).call
+      turbo_stream.append("ruby-ui-toaster", content.html_safe)
+    end
+
+    class ToastFragment < Phlex::HTML
+      def initialize(variant:, title:, description:, action_label: nil)
+        @variant = variant
+        @title = title
+        @description = description
+        @action_label = action_label
+      end
+
+      def view_template
+        render RubyUI::ToastItem.new(variant: @variant) do
+          render RubyUI::ToastIcon.new(variant: @variant)
+          div(class: "flex flex-col gap-1 flex-1 min-w-0") do
+            render RubyUI::ToastTitle.new { @title }
+            render(RubyUI::ToastDescription.new { @description }) if @description
+          end
+          if @action_label
+            render RubyUI::ToastAction.new(label: @action_label, on: "click->ruby-ui--toast#dismiss")
+          end
+          render RubyUI::ToastClose.new
+        end
+      end
+    end
+  end
+end

docs/app/controllers/docs_controller.rb

@@ -222,6 +222,10 @@ def theme_toggle
     render Views::Docs::ThemeToggle.new
   end
 
+  def toast
+    render Views::Docs::Toast.new
+  end
+
   def toggle
     render Views::Docs::Toggle.new
   end

docs/app/javascript/controllers/index.js

@@ -7,12 +7,18 @@ import { application } from "./application"
 import IframeThemeController from "./iframe_theme_controller"
 application.register("iframe-theme", IframeThemeController)
 
+import ToastDemoController from "./toast_demo_controller"
+application.register("toast-demo", ToastDemoController)
+
 import RubyUi__AccordionController from "./ruby_ui/accordion_controller"
 application.register("ruby-ui--accordion", RubyUi__AccordionController)
 
 import RubyUi__AlertDialogController from "./ruby_ui/alert_dialog_controller"
 application.register("ruby-ui--alert-dialog", RubyUi__AlertDialogController)
 
+import RubyUi__AvatarController from "./ruby_ui/avatar_controller"
+application.register("ruby-ui--avatar", RubyUi__AvatarController)
+
 import RubyUi__CalendarController from "./ruby_ui/calendar_controller"
 application.register("ruby-ui--calendar", RubyUi__CalendarController)
 
@@ -91,6 +97,12 @@ application.register("ruby-ui--tabs", RubyUi__TabsController)
 import RubyUi__ThemeToggleController from "./ruby_ui/theme_toggle_controller"
 application.register("ruby-ui--theme-toggle", RubyUi__ThemeToggleController)
 
+import RubyUi__ToastController from "./ruby_ui/toast_controller"
+application.register("ruby-ui--toast", RubyUi__ToastController)
+
+import RubyUi__ToasterController from "./ruby_ui/toaster_controller"
+application.register("ruby-ui--toaster", RubyUi__ToasterController)
+
 import RubyUi__ToggleController from "./ruby_ui/toggle_controller"
 application.register("ruby-ui--toggle", RubyUi__ToggleController)
 

docs/app/javascript/controllers/ruby_ui/avatar_controller.js

@@ -0,0 +1,29 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["image", "fallback"];
+
+  connect() {
+    if (!this.hasImageTarget) return;
+
+    if (this.imageTarget.complete && this.imageTarget.naturalWidth > 0) {
+      this.showImage();
+    } else {
+      this.showFallback();
+    }
+  }
+
+  showImage() {
+    this.imageTargets.forEach((image) => image.classList.remove("hidden"));
+    this.fallbackTargets.forEach((fallback) =>
+      fallback.classList.add("hidden"),
+    );
+  }
+
+  showFallback() {
+    this.imageTargets.forEach((image) => image.classList.add("hidden"));
+    this.fallbackTargets.forEach((fallback) =>
+      fallback.classList.remove("hidden"),
+    );
+  }
+}

docs/app/javascript/controllers/ruby_ui/calendar_controller.js

@@ -6,6 +6,7 @@ export default class extends Controller {
     "calendar",
     "title",
     "weekdaysTemplate",
+    "disabledDateTemplate",
     "selectedDateTemplate",
     "todayDateTemplate",
     "currentMonthDateTemplate",
@@ -16,6 +17,10 @@ export default class extends Controller {
       type: String,
       default: null,
     },
+    minDate: {
+      type: String,
+      default: null,
+    },
     viewDate: {
       type: String,
       default: new Date().toISOString().slice(0, 10),
@@ -43,13 +48,21 @@ export default class extends Controller {
 
   selectDay(e) {
     e.preventDefault();
+    if (this.isDateDisabled(e.currentTarget.dataset.day)) return;
+
     // Set the selected date value
     this.selectedDateValue = e.currentTarget.dataset.day;
   }
 
   selectedDateValueChanged(value, prevValue) {
+    const selectedDate = this.selectedDate();
+    if (!selectedDate) {
+      this.updateCalendar();
+      return;
+    }
+
     // update the viewDateValue to the first day of month of the selected date (This will trigger updateCalendar() function)
-    const newViewDate = new Date(this.selectedDateValue);
+    const newViewDate = new Date(selectedDate);
     newViewDate.setDate(2); // set the day to the 2nd (to avoid issues with months with different number of days and timezones)
     this.viewDateValue = newViewDate.toISOString().slice(0, 10);
 
@@ -58,7 +71,7 @@ export default class extends Controller {
 
     // update the input value
     this.rubyUiCalendarInputOutlets.forEach((outlet) => {
-      const formattedDate = this.formatDate(this.selectedDate());
+      const formattedDate = this.formatDate(selectedDate);
       outlet.setValue(formattedDate);
     });
   }
@@ -101,10 +114,20 @@ export default class extends Controller {
 
   renderDay(day) {
     const today = new Date();
+    const selectedDate = this.selectedDate();
     let dateHTML = "";
     const data = { day: day, dayDate: day.getDate() };
 
-    if (day.toDateString() === this.selectedDate().toDateString()) {
+    if (this.isDateDisabled(day)) {
+      // disabledDate
+      dateHTML = Mustache.render(
+        this.disabledDateTemplateTarget.innerHTML,
+        data,
+      );
+    } else if (
+      selectedDate &&
+      day.toDateString() === selectedDate.toDateString()
+    ) {
       // selectedDate
       // Render the selected date template target innerHTML with Mustache
       dateHTML = Mustache.render(
@@ -137,13 +160,13 @@ export default class extends Controller {
   }
 
   selectedDate() {
-    return new Date(this.selectedDateValue);
+    return this.parseDate(this.selectedDateValue);
   }
 
   viewDate() {
-    return this.viewDateValue
-      ? new Date(this.viewDateValue)
-      : this.selectedDate();
+    return (
+      this.parseDate(this.viewDateValue) || this.selectedDate() || new Date()
+    );
   }
 
   getFullWeeksStartAndEndInMonth() {
@@ -246,4 +269,40 @@ export default class extends Controller {
         return "th";
     }
   }
+
+  minDate() {
+    return this.parseDate(this.minDateValue);
+  }
+
+  isDateDisabled(date) {
+    const minDate = this.minDate();
+    const candidate = this.parseDate(date);
+
+    if (!minDate || !candidate) return false;
+
+    return this.startOfDay(candidate) < this.startOfDay(minDate);
+  }
+
+  parseDate(value) {
+    if (!value) return null;
+    if (value instanceof Date) return new Date(value);
+
+    const isoDate = value.toString().match(/^(\d{4})-(\d{2})-(\d{2})/);
+    if (isoDate) {
+      return new Date(
+        Number(isoDate[1]),
+        Number(isoDate[2]) - 1,
+        Number(isoDate[3]),
+      );
+    }
+
+    const date = new Date(value);
+    return Number.isNaN(date.getTime()) ? null : date;
+  }
+
+  startOfDay(date) {
+    const normalizedDate = new Date(date);
+    normalizedDate.setHours(0, 0, 0, 0);
+    return normalizedDate;
+  }
 }