ruby_ui 1.0.0.beta1 → 1.0.0.rc1

data/lib/ruby_ui/alert_dialog/alert_dialog_footer.rb

@@ -10,7 +10,7 @@ module RubyUI
 
     def default_attrs
       {
-        class: "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2"
+        class: "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 rtl:space-x-reverse"
       }
     end
   end

data/lib/ruby_ui/alert_dialog/alert_dialog_header.rb

@@ -10,7 +10,7 @@ module RubyUI
 
     def default_attrs
       {
-        class: "flex flex-col space-y-2 text-center sm:text-left"
+        class: "flex flex-col space-y-2 text-center sm:text-left rtl:sm:text-right"
       }
     end
   end

data/lib/ruby_ui/breadcrumb/breadcrumb.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class Breadcrumb < Base
+    def view_template(&)
+      nav(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        aria: {label: "breadcrumb"}
+      }
+    end
+  end
+end

data/lib/ruby_ui/breadcrumb/breadcrumb_ellipsis.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class BreadcrumbEllipsis < Base
+    def view_template(&)
+      span(**attrs) do
+        icon
+        span(class: "sr-only") { "More" }
+      end
+    end
+
+    private
+
+    def icon
+      svg(
+        xmlns: "http://www.w3.org/2000/svg",
+        class: "w-4 h-4",
+        viewbox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        stroke_width: "2",
+        stroke_linecap: "round",
+        stroke_linejoin: "round"
+      ) do |s|
+        s.circle(cx: "12", cy: "12", r: "1")
+        s.circle(cx: "19", cy: "12", r: "1")
+        s.circle(cx: "5", cy: "12", r: "1")
+      end
+    end
+
+    def default_attrs
+      {
+        aria: {hidden: true},
+        class: "flex h-9 w-9 items-center justify-center",
+        role: "presentation"
+      }
+    end
+  end
+end

data/lib/ruby_ui/breadcrumb/breadcrumb_item.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class BreadcrumbItem < Base
+    def view_template(&)
+      li(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "inline-flex items-center gap-1.5"
+      }
+    end
+  end
+end

data/lib/ruby_ui/breadcrumb/breadcrumb_link.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class BreadcrumbLink < Base
+    def initialize(href: "#", **attrs)
+      @href = href
+      super(**attrs)
+    end
+
+    def view_template(&)
+      a(href: @href, **attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "transition-colors hover:text-foreground"
+      }
+    end
+  end
+end

data/lib/ruby_ui/breadcrumb/breadcrumb_list.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class BreadcrumbList < Base
+    def view_template(&)
+      ol(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5"
+      }
+    end
+  end
+end

data/lib/ruby_ui/breadcrumb/breadcrumb_page.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class BreadcrumbPage < Base
+    def view_template(&)
+      span(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        aria: {disabled: true, current: "page"},
+        class: "font-normal text-foreground",
+        role: "link"
+      }
+    end
+  end
+end

data/lib/ruby_ui/breadcrumb/breadcrumb_separator.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class BreadcrumbSeparator < Base
+    def view_template(&block)
+      li(**attrs) do
+        if block
+          block.call
+        else
+          icon
+        end
+      end
+    end
+
+    private
+
+    def icon
+      svg(
+        xmlns: "http://www.w3.org/2000/svg",
+        class: "w-4 h-4",
+        viewbox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        stroke_width: "2",
+        stroke_linecap: "round",
+        stroke_linejoin: "round"
+      ) { |s| s.path(d: "m9 18 6-6-6-6") }
+    end
+
+    def default_attrs
+      {
+        aria: {hidden: true},
+        class: "[&>svg]:w-3.5 [&>svg]:h-3.5",
+        role: "presentation"
+      }
+    end
+  end
+end

data/lib/ruby_ui/calendar/calendar_controller.js

@@ -0,0 +1,249 @@
+import { Controller } from "@hotwired/stimulus";
+import Mustache from "mustache";
+
+export default class extends Controller {
+  static targets = [
+    "calendar",
+    "title",
+    "weekdaysTemplate",
+    "selectedDateTemplate",
+    "todayDateTemplate",
+    "currentMonthDateTemplate",
+    "otherMonthDateTemplate",
+  ];
+  static values = {
+    selectedDate: {
+      type: String,
+      default: null,
+    },
+    viewDate: {
+      type: String,
+      default: new Date().toISOString().slice(0, 10),
+    },
+    format: {
+      type: String,
+      default: "yyyy-MM-dd", // Default format
+    },
+  };
+  static outlets = ["ruby-ui--calendar-input"];
+
+  initialize() {
+    this.updateCalendar(); // Initial calendar render
+  }
+
+  nextMonth(e) {
+    e.preventDefault();
+    this.viewDateValue = this.adjustMonth(1);
+  }
+
+  prevMonth(e) {
+    e.preventDefault();
+    this.viewDateValue = this.adjustMonth(-1);
+  }
+
+  selectDay(e) {
+    e.preventDefault();
+    // Set the selected date value
+    this.selectedDateValue = e.currentTarget.dataset.day;
+  }
+
+  selectedDateValueChanged(value, prevValue) {
+    // update the viewDateValue to the first day of month of the selected date (This will trigger updateCalendar() function)
+    const newViewDate = new Date(this.selectedDateValue);
+    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);
+
+    // Re-render the calendar
+    this.updateCalendar();
+
+    // update the input value
+    this.rubyUiCalendarInputOutlets.forEach((outlet) => {
+      const formattedDate = this.formatDate(this.selectedDate());
+      outlet.setValue(formattedDate);
+    });
+  }
+
+  viewDateValueChanged(value, prevValue) {
+    this.updateCalendar();
+  }
+
+  adjustMonth(adjustment) {
+    const date = this.viewDate();
+    date.setDate(2); // set the day to the 2nd (to avoid issues with months with different number of days and timezones)
+    date.setMonth(date.getMonth() + adjustment);
+    return date.toISOString().slice(0, 10);
+  }
+
+  updateCalendar() {
+    // Update the title with month and year
+    this.titleTarget.textContent = this.monthAndYear();
+    this.calendarTarget.innerHTML = this.calendarHTML();
+  }
+
+  calendarHTML() {
+    return this.weekdaysTemplateTarget.innerHTML + this.calendarDays();
+  }
+
+  calendarDays() {
+    return this.getFullWeeksStartAndEndInMonth()
+      .map((week) => this.renderWeek(week))
+      .join("");
+  }
+
+  renderWeek(week) {
+    const days = week
+      .map((day) => {
+        return this.renderDay(day);
+      })
+      .join("");
+    return `<tr class="flex w-full mt-2">${days}</tr>`;
+  }
+
+  renderDay(day) {
+    const today = new Date();
+    let dateHTML = "";
+    const data = { day: day, dayDate: day.getDate() };
+
+    if (day.toDateString() === this.selectedDate().toDateString()) {
+      // selectedDate
+      // Render the selected date template target innerHTML with Mustache
+      dateHTML = Mustache.render(
+        this.selectedDateTemplateTarget.innerHTML,
+        data,
+      );
+    } else if (day.toDateString() === today.toDateString()) {
+      // todayDate
+      dateHTML = Mustache.render(this.todayDateTemplateTarget.innerHTML, data);
+    } else if (day.getMonth() === this.viewDate().getMonth()) {
+      // currentMonthDate
+      dateHTML = Mustache.render(
+        this.currentMonthDateTemplateTarget.innerHTML,
+        data,
+      );
+    } else {
+      // otherMonthDate
+      dateHTML = Mustache.render(
+        this.otherMonthDateTemplateTarget.innerHTML,
+        data,
+      );
+    }
+    return dateHTML;
+  }
+
+  monthAndYear() {
+    const month = this.viewDate().toLocaleString("en-US", { month: "long" });
+    const year = this.viewDate().getFullYear();
+    return `${month} ${year}`;
+  }
+
+  selectedDate() {
+    return new Date(this.selectedDateValue);
+  }
+
+  viewDate() {
+    return this.viewDateValue
+      ? new Date(this.viewDateValue)
+      : this.selectedDate();
+  }
+
+  getFullWeeksStartAndEndInMonth() {
+    const month = this.viewDate().getMonth();
+    const year = this.viewDate().getFullYear();
+
+    let weeks = [],
+      firstDate = new Date(year, month, 1),
+      lastDate = new Date(year, month + 1, 0),
+      numDays = lastDate.getDate();
+
+    let start = 1;
+    let end;
+    if (firstDate.getDay() === 1) {
+      end = 7;
+    } else if (firstDate.getDay() === 0) {
+      let preMonthEndDay = new Date(year, month, 0);
+      start = preMonthEndDay.getDate() - 6 + 1;
+      end = 1;
+    } else {
+      let preMonthEndDay = new Date(year, month, 0);
+      start = preMonthEndDay.getDate() + 1 - firstDate.getDay() + 1;
+      end = 7 - firstDate.getDay() + 1;
+      weeks.push({
+        start: start,
+        end: end,
+      });
+      start = end + 1;
+      end = end + 7;
+    }
+    while (start <= numDays) {
+      weeks.push({
+        start: start,
+        end: end,
+      });
+      start = end + 1;
+      end = end + 7;
+      end = start === 1 && end === 8 ? 1 : end;
+      if (end > numDays && start <= numDays) {
+        end = end - numDays;
+        weeks.push({
+          start: start,
+          end: end,
+        });
+        break;
+      }
+    }
+    // *** the magic starts here
+    return weeks.map(({ start, end }, index) => {
+      const sub = +(start > end && index === 0);
+      return Array.from({ length: 7 }, (_, index) => {
+        const date = new Date(year, month - sub, start + index);
+        return date;
+      });
+    });
+  }
+
+  formatDate(date) {
+    const format = this.formatValue;
+    const day = date.getDate();
+    const month = date.getMonth() + 1;
+    const year = date.getFullYear();
+    const hours = date.getHours();
+    const minutes = date.getMinutes();
+    const seconds = date.getSeconds();
+    const dayOfWeek = date.toLocaleString("en-US", { weekday: "long" });
+    const monthName = date.toLocaleString("en-US", { month: "long" });
+    const daySuffix = this.getDaySuffix(day);
+
+    const map = {
+      yyyy: year,
+      MM: ("0" + month).slice(-2),
+      dd: ("0" + day).slice(-2),
+      HH: ("0" + hours).slice(-2),
+      mm: ("0" + minutes).slice(-2),
+      ss: ("0" + seconds).slice(-2),
+      EEEE: dayOfWeek,
+      MMMM: monthName,
+      do: day + daySuffix,
+      PPPP: `${dayOfWeek}, ${monthName} ${day}${daySuffix}, ${year}`,
+    };
+
+    const formattedDate = format.replace(
+      /yyyy|MM|dd|HH|mm|ss|EEEE|MMMM|do|PPPP/g,
+      (matched) => map[matched],
+    );
+    return formattedDate;
+  }
+
+  getDaySuffix(day) {
+    if (day > 3 && day < 21) return "th";
+    switch (day % 10) {
+      case 1:
+        return "st";
+      case 2:
+        return "nd";
+      case 3:
+        return "rd";
+      default:
+        return "th";
+    }
+  }
+}

data/lib/ruby_ui/calendar/calendar_input_controller.js

@@ -0,0 +1,8 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="input"
+export default class extends Controller {
+  setValue(value) {
+    this.element.value = value
+  }
+}

data/lib/ruby_ui/carousel/carousel.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class Carousel < Base
+    def initialize(orientation: :horizontal, options: {}, **user_attrs)
+      @orientation = orientation
+      @options = options
+
+      super(**user_attrs)
+    end
+
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: ["relative group", orientation_classes],
+        role: "region",
+        aria_roledescription: "carousel",
+        data: {
+          controller: "ruby-ui--carousel",
+          ruby_ui__carousel_options_value: default_options.merge(@options).to_json,
+          action: %w[
+            keydown.right->ruby-ui--carousel#scrollNext:prevent
+            keydown.left->ruby-ui--carousel#scrollPrev:prevent
+          ]
+        }
+      }
+    end
+
+    def default_options
+      {
+        axis: (@orientation == :horizontal) ? "x" : "y"
+      }
+    end
+
+    def orientation_classes
+      (@orientation == :horizontal) ? "is-horizontal" : "is-vertical"
+    end
+  end
+end

data/lib/ruby_ui/carousel/carousel_content.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class CarouselContent < Base
+    def view_template(&)
+      div(class: "overflow-hidden", data: {ruby_ui__carousel_target: "viewport"}) do
+        div(**attrs, &)
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: [
+          "flex",
+          "group-[.is-horizontal]:-ml-4",
+          "group-[.is-vertical]:-mt-4 group-[.is-vertical]:flex-col"
+        ]
+      }
+    end
+  end
+end

data/lib/ruby_ui/carousel/carousel_controller.js

@@ -0,0 +1,60 @@
+import { Controller } from "@hotwired/stimulus";
+import EmblaCarousel from 'embla-carousel'
+
+const DEFAULT_OPTIONS = {
+  loop: true
+}
+
+export default class extends Controller {
+  static values = {
+    options: {
+      type: Object,
+      default: {},
+    }
+  }
+  static targets = ["viewport", "nextButton", "prevButton"]
+
+  connect() {
+    this.initCarousel(this.#mergedOptions)
+  }
+
+  disconnect() {
+    this.destroyCarousel()
+  }
+
+  initCarousel(options, plugins = []) {
+    this.carousel = EmblaCarousel(this.viewportTarget, options, plugins)
+
+    this.carousel.on("init", this.#updateControls.bind(this))
+    this.carousel.on("reInit", this.#updateControls.bind(this))
+    this.carousel.on("select", this.#updateControls.bind(this))
+  }
+
+  destroyCarousel() {
+    this.carousel.destroy()
+  }
+
+  scrollNext() {
+    this.carousel.scrollNext()
+  }
+
+  scrollPrev() {
+    this.carousel.scrollPrev()
+  }
+
+  #updateControls() {
+    this.#toggleButtonsDisabledState(this.nextButtonTargets, !this.carousel.canScrollNext())
+    this.#toggleButtonsDisabledState(this.prevButtonTargets, !this.carousel.canScrollPrev())
+  }
+
+  #toggleButtonsDisabledState(buttons, isDisabled) {
+    buttons.forEach((button) => button.disabled = isDisabled)
+  }
+
+  get #mergedOptions() {
+    return {
+      ...DEFAULT_OPTIONS,
+      ...this.optionsValue
+    }
+  }
+}

data/lib/ruby_ui/carousel/carousel_item.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class CarouselItem < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        role: "group",
+        aria_roledescription: "slide",
+        class: [
+          "min-w-0 shrink-0 grow-0 basis-full",
+          "group-[.is-horizontal]:pl-4",
+          "group-[.is-vertical]:pt-4"
+        ]
+      }
+    end
+  end
+end

data/lib/ruby_ui/carousel/carousel_next.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class CarouselNext < Base
+    def view_template(&)
+      Button(**attrs) do
+        icon
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        variant: :outline,
+        icon: true,
+        class: [
+          "absolute h-8 w-8 rounded-full",
+          "group-[.is-horizontal]:-right-12 group-[.is-horizontal]:top-1/2 group-[.is-horizontal]:-translate-y-1/2",
+          "group-[.is-vertical]:-bottom-12 group-[.is-vertical]:left-1/2 group-[.is-vertical]:-translate-x-1/2 group-[.is-vertical]:rotate-90"
+        ],
+        disabled: true,
+        data: {
+          action: "click->ruby-ui--carousel#scrollNext",
+          ruby_ui__carousel_target: "nextButton"
+        }
+      }
+    end
+
+    def icon
+      svg(
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        stroke_width: "2",
+        stroke_linecap: "round",
+        stroke_linejoin: "round",
+        xmlns: "http://www.w3.org/2000/svg",
+        class: "w-4 h-4"
+      ) do |s|
+        s.path(d: "M5 12h14")
+        s.path(d: "m12 5 7 7-7 7")
+      end
+    end
+  end
+end