ruby_ui 1.0.0.pre.alpha.4 → 1.0.0.rc1

data/lib/{rbui → ruby_ui}/button/button.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class Button < Base
     def initialize(type: :button, variant: :primary, size: :md, icon: false, **attrs)
       @type = type
@@ -35,45 +35,45 @@ module RBUI
     end
 
     def primary_classes
-      tokens(
+      [
         "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground shadow hover:bg-primary/90",
         size_classes
-      )
+      ]
     end
 
     def link_classes
-      tokens(
+      [
         "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-primary underline-offset-4 hover:underline",
         size_classes
-      )
+      ]
     end
 
     def secondary_classes
-      tokens(
+      [
         "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-secondary text-secondary-foreground hover:bg-opacity-80",
         size_classes
-      )
+      ]
     end
 
     def destructive_classes
-      tokens(
+      [
         "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
         size_classes
-      )
+      ]
     end
 
     def outline_classes
-      tokens(
+      [
         "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
         size_classes
-      )
+      ]
     end
 
     def ghost_classes
-      tokens(
+      [
         "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground",
         size_classes
-      )
+      ]
     end
 
     def default_classes

data/lib/ruby_ui/calendar/calendar.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class Calendar < Base
+    def initialize(selected_date: nil, input_id: nil, date_format: "yyyy-MM-dd", **attrs)
+      @selected_date = selected_date
+      @input_id = input_id
+      @date_format = date_format
+      super(**attrs)
+    end
+
+    def view_template
+      div(**attrs) do
+        RubyUI.CalendarHeader do
+          RubyUI.CalendarTitle
+          RubyUI.CalendarPrev
+          RubyUI.CalendarNext
+        end
+        RubyUI.CalendarBody # Where the calendar is rendered (Weekdays and Days)
+        RubyUI.CalendarWeekdays # Template for the weekdays
+        RubyUI.CalendarDays # Template for the days
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "p-3 space-y-4",
+        data: {
+          controller: "ruby-ui--calendar",
+          ruby_ui__calendar_selected_date_value: @selected_date&.to_s,
+          ruby_ui__calendar_format_value: @date_format,
+          ruby_ui__calendar_ruby_ui__calendar_input_outlet: @input_id
+        }
+      }
+    end
+  end
+end

data/lib/{rbui → ruby_ui}/calendar/calendar_body.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class CalendarBody < Base
     def view_template
       table(**attrs)
@@ -11,7 +11,7 @@ module RBUI
     def default_attrs
       {
         data: {
-          rbui__calendar_target: "calendar"
+          ruby_ui__calendar_target: "calendar"
         }
       }
     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/{rbui → ruby_ui}/calendar/calendar_days.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class CalendarDays < Base
     BASE_CLASS = "inline-flex items-center justify-center rounded-md text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-8 w-8 p-0 font-normal aria-selected:opacity-100"
 
@@ -17,13 +17,13 @@ module RBUI
       date_template("selectedDateTemplate") do
         button(
           data_day: "{{day}}",
-          data_action: "click->rbui--calendar#selectDay",
+          data_action: "click->ruby-ui--calendar#selectDay",
           name: "day",
           class:
-                tokens(
+                [
                   BASE_CLASS,
                   "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground"
-                ),
+                ],
           role: "gridcell",
           tabindex: "0",
           type: "button",
@@ -36,13 +36,13 @@ module RBUI
       date_template("todayDateTemplate") do
         button(
           data_day: "{{day}}",
-          data_action: "click->rbui--calendar#selectDay",
+          data_action: "click->ruby-ui--calendar#selectDay",
           name: "day",
           class:
-                tokens(
+                [
                   BASE_CLASS,
                   "bg-accent text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
-                ),
+                ],
           role: "gridcell",
           tabindex: "-1",
           type: "button"
@@ -54,13 +54,13 @@ module RBUI
       date_template("currentMonthDateTemplate") do
         button(
           data_day: "{{day}}",
-          data_action: "click->rbui--calendar#selectDay",
+          data_action: "click->ruby-ui--calendar#selectDay",
           name: "day",
           class:
-                tokens(
+                [
                   BASE_CLASS,
                   "bg-background text-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
-                ),
+                ],
           role: "gridcell",
           tabindex: "-1",
           type: "button"
@@ -72,13 +72,13 @@ module RBUI
       date_template("otherMonthDateTemplate") do
         button(
           data_day: "{{day}}",
-          data_action: " click->rbui--calendar#selectDay",
+          data_action: " click->ruby-ui--calendar#selectDay",
           name: "day",
           class:
-                tokens(
+                [
                   BASE_CLASS,
                   "bg-background text-muted-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
-                ),
+                ],
           role: "gridcell",
           tabindex: "-1",
           type: "button"
@@ -87,7 +87,7 @@ module RBUI
     end
 
     def date_template(target, &block)
-      template_tag(data: {rbui__calendar_target: target}) do
+      template(data: {ruby_ui__calendar_target: target}) do
         td(
           class:
                 "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected])]:rounded-md",

data/lib/{rbui → ruby_ui}/calendar/calendar_header.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class CalendarHeader < Base
     def view_template(&)
       div(**attrs, &)

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/{rbui → ruby_ui}/calendar/calendar_next.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class CalendarNext < Base
     def view_template(&block)
       button(**attrs) do
@@ -36,7 +36,7 @@ module RBUI
         class:
               "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input hover:bg-accent hover:text-accent-foreground h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute right-1",
         type: "button",
-        data_action: "click->rbui--calendar#nextMonth"
+        data_action: "click->ruby-ui--calendar#nextMonth"
       }
     end
   end

data/lib/{rbui → ruby_ui}/calendar/calendar_prev.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class CalendarPrev < Base
     def view_template(&block)
       button(**attrs) do
@@ -36,7 +36,7 @@ module RBUI
         class:
               "rdp-button_reset rdp-button inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input hover:bg-accent hover:text-accent-foreground h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute left-1",
         type: "button",
-        data_action: "click->rbui--calendar#prevMonth"
+        data_action: "click->ruby-ui--calendar#prevMonth"
       }
     end
   end

data/lib/{rbui → ruby_ui}/calendar/calendar_title.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class CalendarTitle < Base
     def initialize(default: "Month Year", **attrs)
       @default = default
@@ -19,7 +19,7 @@ module RBUI
         aria_live: "polite",
         role: "presentation",
         data: {
-          rbui__calendar_target: "title"
+          ruby_ui__calendar_target: "title"
         }
       }
     end

data/lib/{rbui → ruby_ui}/calendar/calendar_weekdays.rb

@@ -1,11 +1,11 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class CalendarWeekdays < Base
     DAYS = %w[Monday Tuesday Wednesday Thursday Friday Saturday Sunday].freeze
 
     def view_template
-      template_tag(data: {rbui__calendar_target: "weekdaysTemplate"}) do
+      template(data: {ruby_ui__calendar_target: "weekdaysTemplate"}) do
         thead(**attrs) do
           tr(class: "flex") do
             DAYS.each do |day|

data/lib/{rbui → ruby_ui}/card/card.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class Card < Base
     def view_template(&)
       div(**attrs, &)

data/lib/{rbui → ruby_ui}/card/card_content.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class CardContent < Base
     def view_template(&)
       div(**attrs, &)

data/lib/{rbui → ruby_ui}/card/card_description.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class CardDescription < Base
     def view_template(&)
       p(**attrs, &)

data/lib/{rbui → ruby_ui}/card/card_footer.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class CardFooter < Base
     def view_template(&)
       div(**attrs, &)

data/lib/{rbui → ruby_ui}/card/card_header.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class CardHeader < Base
     def view_template(&)
       div(**attrs, &)

data/lib/{rbui → ruby_ui}/card/card_title.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class CardTitle < Base
     def view_template(&)
       h3(**attrs, &)

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