ruby_cms 0.2.1.1 → 1.0.0

data/lib/generators/ruby_cms/templates/javascript/controllers/ruby_ui/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/generators/ruby_cms/templates/javascript/controllers/ruby_ui/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/generators/ruby_cms/templates/javascript/controllers/ruby_ui/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/generators/ruby_cms/templates/javascript/controllers/ruby_ui/checkbox_group_controller.js

@@ -0,0 +1,21 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["checkbox"];
+
+  connect() {
+    this.#handleRequired();
+  }
+
+  onChange() {
+    this.#handleRequired();
+  }
+
+  #handleRequired() {
+    if (!this.element.hasAttribute("data-required")) return;
+
+    const checked = this.checkboxTargets.some(({ checked }) => checked);
+
+    this.checkboxTargets.forEach((checkbox) => (checkbox.required = !checked));
+  }
+}

data/lib/generators/ruby_cms/templates/javascript/controllers/ruby_ui/clipboard_controller.js

@@ -0,0 +1,54 @@
+import { Controller } from "@hotwired/stimulus"
+import { computePosition, flip, shift } from "@floating-ui/dom";
+
+// Connects to data-controller="accordion"
+export default class extends Controller {
+  static targets = ['trigger', 'source', 'successPopover', 'errorPopover']
+  static values = {
+    options: {
+      type: Object,
+      default: {},
+    },
+  }
+
+  copy() {
+    let sourceElement = this.sourceTarget.children[0];
+    if (!sourceElement) {
+      this.showErrorPopover();
+      return;
+    }
+    let textToCopy = sourceElement.tagName === 'INPUT' ? sourceElement.value : sourceElement.innerText;
+    navigator.clipboard.writeText(textToCopy).then(() => {
+      this.#showSuccessPopover();
+    }).catch(() => {
+      this.#showErrorPopover();
+    })
+  }
+
+  onClickOutside() {
+    if (!this.successPopoverTarget.classList.contains("hidden")) this.successPopoverTarget.classList.add("hidden");
+    if (!this.errorPopoverTarget.classList.contains("hidden")) this.errorPopoverTarget.classList.add("hidden");
+  }
+
+  #computeTooltip(popoverElement) {
+    computePosition(this.triggerTarget, popoverElement, {
+      placement: this.optionsValue.placement || "top",
+      middleware: [flip(), shift()],
+    }).then(({ x, y }) => {
+      Object.assign(popoverElement.style, {
+        left: `${x}px`,
+        top: `${y}px`,
+      });
+    });
+  }
+
+  #showSuccessPopover() {
+    this.#computeTooltip(this.successPopoverTarget);
+    this.successPopoverTarget.classList.remove("hidden");
+  }
+
+  #showErrorPopover() {
+    this.#computeTooltip(this.errorPopoverTarget);
+    this.errorPopoverTarget.classList.remove("hidden");
+  }
+}

data/lib/generators/ruby_cms/templates/javascript/controllers/ruby_ui/collapsible_controller.js

@@ -0,0 +1,47 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="accordion"
+export default class extends Controller {
+  static targets = ['content']
+  static values = {
+    open: {
+      type: Boolean,
+      default: false,
+    },
+  }
+
+  connect() {
+    // Set the initial state of the accordion
+    this.openValue ? this.open() : this.close()
+  }
+
+  // Toggle the 'open' value
+  toggle() {
+    this.openValue = !this.openValue
+  }
+
+  // Handle changes in the 'open' value
+  openValueChanged(isOpen, wasOpen) {
+    if (isOpen) {
+      this.open()
+    } else {
+      this.close()
+    }
+  }
+
+  // Open the accordion content
+  open() {
+    if (this.hasContentTarget) {
+      this.contentTarget.classList.remove('hidden')
+      this.openValue = true
+    }
+  }
+
+  // Close the accordion content
+  close() {
+    if (this.hasContentTarget) {
+      this.contentTarget.classList.add('hidden')
+      this.openValue = false
+    }
+  }
+}

data/lib/generators/ruby_cms/templates/javascript/controllers/ruby_ui/combobox_controller.js

@@ -0,0 +1,190 @@
+import { Controller } from "@hotwired/stimulus";
+import { computePosition, autoUpdate, offset, flip } from "@floating-ui/dom";
+
+// Connects to data-controller="ruby-ui--combobox"
+export default class extends Controller {
+  static values = {
+    term: String,
+  };
+
+  static targets = [
+    "input",
+    "toggleAll",
+    "popover",
+    "item",
+    "emptyState",
+    "searchInput",
+    "trigger",
+    "triggerContent",
+  ];
+
+  selectedItemIndex = null;
+
+  connect() {
+    this.updateTriggerContent();
+  }
+
+  disconnect() {
+    if (this.cleanup) {
+      this.cleanup();
+    }
+  }
+
+  inputChanged(e) {
+    this.updateTriggerContent();
+
+    if (e.target.type == "radio") {
+      this.closePopover();
+    }
+
+    if (this.hasToggleAllTarget && !e.target.checked) {
+      this.toggleAllTarget.checked = false;
+    }
+  }
+
+  inputContent(input) {
+    return input.dataset.text || input.parentElement.textContent;
+  }
+
+  toggleAllItems() {
+    const isChecked = this.toggleAllTarget.checked;
+    this.inputTargets.forEach((input) => (input.checked = isChecked));
+    this.updateTriggerContent();
+  }
+
+  updateTriggerContent() {
+    const checkedInputs = this.inputTargets.filter((input) => input.checked);
+
+    if (checkedInputs.length == 0) {
+      this.triggerContentTarget.innerText =
+        this.triggerTarget.dataset.placeholder;
+    } else if (checkedInputs.length === 1) {
+      this.triggerContentTarget.innerText = this.inputContent(checkedInputs[0]);
+    } else {
+      this.triggerContentTarget.innerText = `${checkedInputs.length} ${this.termValue}`;
+    }
+  }
+
+  openPopover(event) {
+    event.preventDefault();
+
+    this.updatePopoverPosition();
+    // Defer width update to avoid forced reflow
+    requestAnimationFrame(() => {
+      this.updatePopoverWidth();
+    });
+    this.triggerTarget.ariaExpanded = "true";
+    this.selectedItemIndex = null;
+    this.itemTargets.forEach((item) => (item.ariaCurrent = "false"));
+    this.popoverTarget.showPopover();
+  }
+
+  closePopover() {
+    this.triggerTarget.ariaExpanded = "false";
+    this.popoverTarget.hidePopover();
+  }
+
+  filterItems(e) {
+    if (["ArrowDown", "ArrowUp", "Tab", "Enter"].includes(e.key)) {
+      return;
+    }
+
+    const filterTerm = this.searchInputTarget.value.toLowerCase();
+
+    if (this.hasToggleAllTarget) {
+      if (filterTerm)
+        this.toggleAllTarget.parentElement.classList.add("hidden");
+      else this.toggleAllTarget.parentElement.classList.remove("hidden");
+    }
+
+    let resultCount = 0;
+
+    this.selectedItemIndex = null;
+
+    this.inputTargets.forEach((input) => {
+      const text = this.inputContent(input).toLowerCase();
+
+      if (text.indexOf(filterTerm) > -1) {
+        input.parentElement.classList.remove("hidden");
+        resultCount++;
+      } else {
+        input.parentElement.classList.add("hidden");
+      }
+    });
+
+    this.emptyStateTarget.classList.toggle("hidden", resultCount !== 0);
+  }
+
+  keyDownPressed() {
+    if (this.selectedItemIndex !== null) {
+      this.selectedItemIndex++;
+    } else {
+      this.selectedItemIndex = 0;
+    }
+
+    this.focusSelectedInput();
+  }
+
+  keyUpPressed() {
+    if (this.selectedItemIndex !== null) {
+      this.selectedItemIndex--;
+    } else {
+      this.selectedItemIndex = -1;
+    }
+
+    this.focusSelectedInput();
+  }
+
+  focusSelectedInput() {
+    const visibleInputs = this.inputTargets.filter(
+      (input) => !input.parentElement.classList.contains("hidden")
+    );
+
+    this.wrapSelectedInputIndex(visibleInputs.length);
+
+    visibleInputs.forEach((input, index) => {
+      if (index == this.selectedItemIndex) {
+        input.parentElement.ariaCurrent = "true";
+        input.parentElement.scrollIntoView({
+          behavior: "smooth",
+          block: "nearest",
+          inline: "nearest",
+        });
+      } else {
+        input.parentElement.ariaCurrent = "false";
+      }
+    });
+  }
+
+  keyEnterPressed(event) {
+    event.preventDefault();
+    const option = this.itemTargets.find((item) => item.ariaCurrent === "true");
+
+    if (option) {
+      option.click();
+    }
+  }
+
+  wrapSelectedInputIndex(length) {
+    this.selectedItemIndex =
+      ((this.selectedItemIndex % length) + length) % length;
+  }
+
+  updatePopoverPosition() {
+    this.cleanup = autoUpdate(this.triggerTarget, this.popoverTarget, () => {
+      computePosition(this.triggerTarget, this.popoverTarget, {
+        placement: "bottom-start",
+        middleware: [offset(4), flip()],
+      }).then(({ x, y }) => {
+        Object.assign(this.popoverTarget.style, {
+          left: `${x}px`,
+          top: `${y}px`,
+        });
+      });
+    });
+  }
+
+  updatePopoverWidth() {
+    this.popoverTarget.style.width = `${this.triggerTarget.offsetWidth}px`;
+  }
+}