phlex_kit 0.2.0

data/app/javascript/phlex_kit/controllers/avatar_controller.js

@@ -0,0 +1,30 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Ported verbatim from ruby_ui's phlex-kit--avatar controller. Shows the image once
+// it has loaded (else the fallback). With no image target (fallback-only avatar)
+// connect() no-ops and the fallback stays visible.
+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"));
+  }
+}

data/app/javascript/phlex_kit/controllers/calendar_controller.js

@@ -0,0 +1,316 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Ported from ruby_ui's calendar controller with the mustache dependency
+// replaced: the day templates only use {{day}} / {{dayDate}}, so this tiny
+// interpolator covers them and only @hotwired/stimulus is needed. Identifiers
+// renamed ruby-ui -> phlex-kit; the week-row markup uses .pk-calendar-week
+// (calendar.css) instead of Tailwind utilities.
+function renderTemplate(template, data) {
+  return template.replace(/{{\s*(\w+)\s*}}/g, (_, key) => String(data[key] ?? ""));
+}
+
+export default class extends Controller {
+  static targets = [
+    "calendar",
+    "title",
+    "weekdaysTemplate",
+    "disabledDateTemplate",
+    "selectedDateTemplate",
+    "todayDateTemplate",
+    "currentMonthDateTemplate",
+    "otherMonthDateTemplate",
+  ];
+  static values = {
+    selectedDate: {
+      type: String,
+      default: null,
+    },
+    minDate: {
+      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 = ["phlex-kit--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();
+    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(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);
+
+    // Re-render the calendar
+    this.updateCalendar();
+
+    // update the input value
+    this.phlexKitCalendarInputOutlets.forEach((outlet) => {
+      const formattedDate = this.formatDate(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="pk-calendar-week">${days}</tr>`;
+  }
+
+  renderDay(day) {
+    const today = new Date();
+    const selectedDate = this.selectedDate();
+    let dateHTML = "";
+    const data = { day: day, dayDate: day.getDate() };
+
+    if (this.isDateDisabled(day)) {
+      // disabledDate
+      dateHTML = renderTemplate(
+        this.disabledDateTemplateTarget.innerHTML,
+        data,
+      );
+    } else if (
+      selectedDate &&
+      day.toDateString() === selectedDate.toDateString()
+    ) {
+      // selectedDate
+      // Render the selected date template
+      dateHTML = renderTemplate(
+        this.selectedDateTemplateTarget.innerHTML,
+        data,
+      );
+    } else if (day.toDateString() === today.toDateString()) {
+      // todayDate
+      dateHTML = renderTemplate(this.todayDateTemplateTarget.innerHTML, data);
+    } else if (day.getMonth() === this.viewDate().getMonth()) {
+      // currentMonthDate
+      dateHTML = renderTemplate(
+        this.currentMonthDateTemplateTarget.innerHTML,
+        data,
+      );
+    } else {
+      // otherMonthDate
+      dateHTML = renderTemplate(
+        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 this.parseDate(this.selectedDateValue);
+  }
+
+  viewDate() {
+    return (
+      this.parseDate(this.viewDateValue) || this.selectedDate() || new Date()
+    );
+  }
+
+  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";
+    }
+  }
+
+  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;
+  }
+}

data/app/javascript/phlex_kit/controllers/calendar_input_controller.js

@@ -0,0 +1,10 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Ported from ruby_ui's calendar-input controller (Stimulus-only upstream).
+// The calendar's outlet pushes the picked, formatted date into this element.
+// Connects to data-controller="phlex-kit--calendar-input"
+export default class extends Controller {
+  setValue(value) {
+    this.element.value = value
+  }
+}

data/app/javascript/phlex_kit/controllers/carousel_controller.js

@@ -0,0 +1,189 @@
+import { Controller } from "@hotwired/stimulus";
+
+const DEFAULT_OPTIONS = {
+  loop: true,
+  axis: "x",
+};
+
+// How far (fraction of a slide) or how fast (px/ms) a drag must travel to
+// advance instead of snapping back — tuned to embla's feel.
+const DRAG_DISTANCE_THRESHOLD = 0.25;
+const DRAG_VELOCITY_THRESHOLD = 0.5;
+
+// Ported from ruby_ui's carousel controller with the embla-carousel dependency
+// removed: a minimal translate-based engine (scrollNext/scrollPrev, loop, x/y
+// axis from the options value) moves the track directly, so only
+// @hotwired/stimulus is needed. Button disabled state mirrors embla's
+// canScrollNext/canScrollPrev, and pointer drag/swipe (threshold + velocity,
+// rubber-band at the ends when not looping, click suppression after a drag)
+// replaces embla's gesture engine.
+export default class extends Controller {
+  static values = {
+    options: {
+      type: Object,
+      default: {},
+    },
+  };
+  static targets = ["viewport", "nextButton", "prevButton"];
+
+  connect() {
+    this.index = 0;
+    this.track = this.viewportTarget.firstElementChild;
+    this.drag = null;
+    this.suppressClick = false;
+    this._onResize = () => this._applyTransform();
+    this._onPointerDown = this._onPointerDown.bind(this);
+    this._onPointerMove = this._onPointerMove.bind(this);
+    this._onPointerUp = this._onPointerUp.bind(this);
+    this._onClickCapture = this._onClickCapture.bind(this);
+    window.addEventListener("resize", this._onResize);
+    this.viewportTarget.addEventListener("pointerdown", this._onPointerDown);
+    this.viewportTarget.addEventListener("click", this._onClickCapture, true);
+    this._update();
+  }
+
+  disconnect() {
+    window.removeEventListener("resize", this._onResize);
+    this.viewportTarget.removeEventListener("pointerdown", this._onPointerDown);
+    this.viewportTarget.removeEventListener("click", this._onClickCapture, true);
+  }
+
+  scrollNext() {
+    this._goTo(this.index + 1);
+  }
+
+  scrollPrev() {
+    this._goTo(this.index - 1);
+  }
+
+  get slides() {
+    return this.track ? Array.from(this.track.children) : [];
+  }
+
+  get options() {
+    return { ...DEFAULT_OPTIONS, ...this.optionsValue };
+  }
+
+  _goTo(index) {
+    const count = this.slides.length;
+    if (count === 0) return;
+    if (this.options.loop) {
+      index = ((index % count) + count) % count;
+    } else {
+      index = Math.max(0, Math.min(index, count - 1));
+    }
+    this.index = index;
+    this._update();
+  }
+
+  _update() {
+    this._applyTransform();
+    const last = this.slides.length - 1;
+    const canNext = this.options.loop ? this.slides.length > 1 : this.index < last;
+    const canPrev = this.options.loop ? this.slides.length > 1 : this.index > 0;
+    this.nextButtonTargets.forEach((button) => (button.disabled = !canNext));
+    this.prevButtonTargets.forEach((button) => (button.disabled = !canPrev));
+  }
+
+  _applyTransform() {
+    if (!this.slides[this.index]) return;
+    this._translateTo(this._offsetOf(this.index));
+  }
+
+  // --- drag/swipe ---
+
+  _onPointerDown(e) {
+    if (e.button !== 0 || this.slides.length < 2) return;
+    this.suppressClick = false;
+    this.drag = {
+      start: this._pointerPos(e),
+      startedAt: performance.now(),
+      offset: this._offsetOf(this.index),
+      delta: 0,
+      moved: false,
+    };
+    try { this.viewportTarget.setPointerCapture(e.pointerId); } catch {}
+    this.viewportTarget.addEventListener("pointermove", this._onPointerMove);
+    this.viewportTarget.addEventListener("pointerup", this._onPointerUp);
+    this.viewportTarget.addEventListener("pointercancel", this._onPointerUp);
+  }
+
+  _onPointerMove(e) {
+    const drag = this.drag;
+    if (!drag) return;
+    drag.delta = this._pointerPos(e) - drag.start;
+    if (!drag.moved && Math.abs(drag.delta) > 5) {
+      drag.moved = true;
+      this.track.style.transition = "none";
+      this.viewportTarget.classList.add("dragging");
+    }
+    if (!drag.moved) return;
+
+    let offset = drag.offset - drag.delta;
+    if (!this.options.loop) {
+      // rubber-band past the ends
+      const max = this._offsetOf(this.slides.length - 1);
+      if (offset < 0) offset = offset / 3;
+      if (offset > max) offset = max + (offset - max) / 3;
+    }
+    this._translateTo(offset);
+  }
+
+  _onPointerUp() {
+    const drag = this.drag;
+    this.drag = null;
+    this.viewportTarget.removeEventListener("pointermove", this._onPointerMove);
+    this.viewportTarget.removeEventListener("pointerup", this._onPointerUp);
+    this.viewportTarget.removeEventListener("pointercancel", this._onPointerUp);
+    if (!drag || !drag.moved) return;
+
+    this.track.style.transition = "";
+    this.viewportTarget.classList.remove("dragging");
+    this.suppressClick = true; // a drag must not activate links in the slide
+
+    const elapsed = Math.max(performance.now() - drag.startedAt, 1);
+    const velocity = Math.abs(drag.delta) / elapsed;
+    const passed = Math.abs(drag.delta) > this._slideSize() * DRAG_DISTANCE_THRESHOLD
+      || velocity > DRAG_VELOCITY_THRESHOLD;
+
+    if (passed) {
+      drag.delta < 0 ? this.scrollNext() : this.scrollPrev();
+    } else {
+      this._applyTransform(); // snap back
+    }
+  }
+
+  _onClickCapture(e) {
+    if (!this.suppressClick) return;
+    this.suppressClick = false;
+    e.preventDefault();
+    e.stopPropagation();
+  }
+
+  // --- geometry ---
+
+  _pointerPos(e) {
+    return this.options.axis === "y" ? e.clientY : e.clientX;
+  }
+
+  _offsetOf(index) {
+    const slide = this.slides[index];
+    const first = this.slides[0];
+    if (!slide || !first) return 0;
+    return this.options.axis === "y"
+      ? slide.offsetTop - first.offsetTop
+      : slide.offsetLeft - first.offsetLeft;
+  }
+
+  _slideSize() {
+    const slide = this.slides[this.index];
+    if (!slide) return 1;
+    return (this.options.axis === "y" ? slide.offsetHeight : slide.offsetWidth) || 1;
+  }
+
+  _translateTo(offset) {
+    this.track.style.transform = this.options.axis === "y"
+      ? `translate3d(0, ${-offset}px, 0)`
+      : `translate3d(${-offset}px, 0, 0)`;
+  }
+}

data/app/javascript/phlex_kit/controllers/chart_controller.js

@@ -0,0 +1,135 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Ported from ruby_ui's chart controller with the bundled chart.js dependency
+// removed: if the host exposes chart.js as window.Chart the behaviour matches
+// upstream (token-derived default colors — mapped to the --pk-* theme — plus a
+// re-render on theme change); otherwise a "phlex-kit--chart:connect" event is
+// dispatched with { canvas, options } so the host can drive any charting
+// library it ships. Only @hotwired/stimulus is required.
+// Connects to data-controller="phlex-kit--chart"
+export default class extends Controller {
+  static values = {
+    options: {
+      type: Object,
+      default: {},
+    }
+  }
+
+  connect() {
+    if (this.chartLibrary()) {
+      this.initThemeObserver()
+      this.initChart()
+    } else {
+      // No window.Chart — hand the config to the host's own charting code.
+      this.dispatch("connect", { detail: { canvas: this.element, options: this.optionsValue } })
+    }
+  }
+
+  disconnect() {
+    this.themeObserver?.disconnect()
+    this.chart?.destroy()
+    if (!this.chart) {
+      this.dispatch("disconnect", { detail: { canvas: this.element } })
+    }
+  }
+
+  chartLibrary() {
+    return window.Chart
+  }
+
+  initChart() {
+    this.setDefaultColorsForChart()
+    const ctx = this.element.getContext("2d")
+    this.chart = new (this.chartLibrary())(ctx, this.mergeOptionsWithDefaults())
+  }
+
+  // Kit tokens are plain color values (hex / color-mix results), not the hsl
+  // triplets ruby_ui reads — return them as-is.
+  getThemeColor(name) {
+    return getComputedStyle(document.documentElement).getPropertyValue(`--${name}`).trim()
+  }
+
+  // shadcn-style series colors: dataset N takes --pk-chart-(N%5 + 1). Line/area
+  // datasets get a translucent fill of the same hue; circular charts color each
+  // slice instead (below).
+  seriesColor(index) {
+    return this.getThemeColor(`pk-chart-${(index % 5) + 1}`)
+  }
+
+  defaultThemeColor(index) {
+    const color = this.seriesColor(index)
+    const translucentFill = ["line", "radar"].includes(this.optionsValue.type)
+    return {
+      backgroundColor: this.isCircular() ? undefined : (translucentFill ? color + "33" : color),
+      hoverBackgroundColor: color,
+      borderColor: color,
+      borderWidth: 2,
+      pointRadius: 0,
+      pointHoverRadius: 4,
+      tension: 0.4,
+    }
+  }
+
+  isCircular() {
+    return ["pie", "doughnut", "polarArea"].includes(this.optionsValue.type)
+  }
+
+  setDefaultColorsForChart() {
+    const Chart = this.chartLibrary()
+    Chart.defaults.color = this.getThemeColor("pk-muted") // font color
+    Chart.defaults.borderColor = this.getThemeColor("pk-border") // border color
+    Chart.defaults.backgroundColor = this.getThemeColor("pk-bg") // background color
+
+    // tooltip colors
+    Chart.defaults.plugins.tooltip.backgroundColor = this.getThemeColor("pk-surface")
+    Chart.defaults.plugins.tooltip.borderColor = this.getThemeColor("pk-border")
+    Chart.defaults.plugins.tooltip.titleColor = this.getThemeColor("pk-text")
+    Chart.defaults.plugins.tooltip.bodyColor = this.getThemeColor("pk-muted")
+    Chart.defaults.plugins.tooltip.borderWidth = 1
+
+    // legend
+    Chart.defaults.plugins.legend.labels.boxWidth = 12
+    Chart.defaults.plugins.legend.labels.boxHeight = 12
+    Chart.defaults.plugins.legend.labels.borderWidth = 0
+    Chart.defaults.plugins.legend.labels.useBorderRadius = true
+    Chart.defaults.plugins.legend.labels.borderRadius = 2
+
+    // shadcn look: hairline grid, no axis borders, muted ticks
+    Chart.defaults.scale.grid = { ...Chart.defaults.scale.grid, color: this.getThemeColor("pk-border"), drawTicks: false }
+    Chart.defaults.scale.border = { ...Chart.defaults.scale.border, display: false }
+  }
+
+  refreshChart() {
+    this.chart?.destroy()
+    this.initChart()
+  }
+
+  // The kit themes via <html data-theme="...">, not a class — watch that.
+  initThemeObserver() {
+    this.themeObserver = new MutationObserver(() => {
+      this.refreshChart()
+    })
+    this.themeObserver.observe(document.documentElement, { attributeFilter: ["data-theme", "class"] })
+  }
+
+  mergeOptionsWithDefaults() {
+    return {
+      ...this.optionsValue,
+      data: {
+        ...this.optionsValue.data,
+        datasets: (this.optionsValue.data?.datasets || []).map((dataset, index) => {
+          const defaults = this.defaultThemeColor(index)
+          if (this.isCircular()) {
+            // one dataset, one color per slice
+            defaults.backgroundColor = (dataset.data || []).map((_, i) => this.seriesColor(i))
+            defaults.borderColor = this.getThemeColor("pk-surface")
+          }
+          return {
+            ...defaults,
+            ...dataset,
+          }
+        })
+      }
+    }
+  }
+}