shadcn-ui 0.0.13 → 0.0.15

data/app/javascript/controllers/ui/select_controller.js

@@ -0,0 +1,130 @@
+import { Controller } from "@hotwired/stimulus";
+import { useClickOutside } from "stimulus-use";
+import { disableBodyScroll, enableBodyScroll, clearAllBodyScrollLocks } from "utils/bodyScrollLock";
+
+export default class UISelectController extends Controller {
+  static targets = ["value", "menu", "wrapper"];
+  static values = { value: String };
+
+  connect() {
+    useClickOutside(this);
+    this.valueTarget.textContent =
+      this.valueValue || this.valueTarget.textContent || "Select an option";
+    this.selectedOption = null;
+  }
+
+  disconnect() {
+    clearAllBodyScrollLocks();
+  }
+
+  clickOutside(event) {
+    this.menuTarget.classList.add("hidden");
+  }
+
+  toggle() {
+    this.menuTarget.classList.toggle("hidden");
+    this.wrapperTarget.querySelector("button").focus();
+
+    const optionList = this.menuTarget.children;
+    const currentValue = this.valueTarget.textContent;
+    let childElement = null;
+
+    if (!this.menuTarget.classList.contains("hidden")) {
+      this.adjustScrollPosition();
+      disableBodyScroll(this.menuTarget);
+    } else {
+      enableBodyScroll(this.menuTarget);
+    }
+
+    Array.from(optionList).forEach(function (child) {
+      if (currentValue == child.textContent) {
+        child.classList.add("bg-gray-200", "text-gray-900");
+        childElement = child;
+      }
+    });
+
+    if (childElement) {
+      this.selectedOption = childElement;
+      childElement.scrollIntoView({ behavior: "instant", block: "nearest", inline: "start" });
+    }
+  }
+
+  adjustScrollPosition() {
+    const menuHeight = this.menuTarget.offsetHeight;
+    const optionsHeight = this.menuTarget.scrollHeight;
+    if (optionsHeight > menuHeight) {
+      this.menuTarget.style.maxHeight = `${menuHeight}px`;
+      this.menuTarget.style.overflowY = "scroll";
+    } else {
+      this.menuTarget.style.maxHeight = "auto";
+      this.menuTarget.style.overflowY = "auto";
+    }
+  }
+
+  select(event) {
+    const option = event.target;
+    this.setSelectedOption(option);
+    this.selectCurrentOption();
+  }
+
+  setValue(value) {
+    this.valueValue = value;
+    this.valueTarget.textContent = value;
+  }
+
+  key(event) {
+    if (this.menuTarget.classList.contains("hidden")) return;
+
+    switch (event.key) {
+      case "Escape":
+        this.menuTarget.classList.add("hidden");
+        break;
+      case "ArrowUp":
+        this.selectPreviousOption(event);
+        break;
+      case "ArrowDown":
+        this.selectNextOption(event);
+        break;
+      case "Enter":
+        this.selectCurrentOption();
+        break;
+    }
+  }
+
+  selectPreviousOption(event) {
+    const selected = this.selectedOption; //this.options.querySelector(".selected")
+    const prevOption = selected ? selected.previousElementSibling : this.options.lastElementChild;
+    this.setSelectedOption(prevOption);
+  }
+
+  selectNextOption(event) {
+    const selected = this.selectedOption; //this.options.querySelector(".selected")
+    const nextOption = selected ? selected.nextElementSibling : this.options.firstElementChild;
+    this.setSelectedOption(nextOption);
+  }
+
+  selectCurrentOption() {
+    const selected = this.selectedOption;
+    if (selected) {
+      this.valueTarget.textContent = selected.textContent;
+      this.menuTarget.classList.add("hidden");
+
+      this.wrapperTarget.textContent = selected.getAttribute("value");
+      this.wrapperTarget.dispatchEvent(new Event("change"));
+    }
+  }
+
+  setSelectedOption(option) {
+    if (!option) return;
+
+    // Reset the previously selected option
+    if (this.selectedOption) {
+      this.selectedOption.classList.remove("bg-gray-200", "text-gray-900");
+    }
+
+    // Set the new selected option
+    option.classList.add("bg-gray-200", "text-gray-900");
+    this.selectedOption = option;
+    option.scrollIntoView({ behavior: "instant", block: "nearest", inline: "start" });
+  }
+}

data/app/javascript/utils/bodyScrollLock.js

@@ -0,0 +1,289 @@
+// Imported from https://github.com/willmcpo/body-scroll-lock/blob/master/lib/bodyScrollLock.js
+
+function _toConsumableArray(arr) {
+  if (Array.isArray(arr)) {
+    for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) {
+      arr2[i] = arr[i];
+    }
+
+    return arr2;
+  } else {
+    return Array.from(arr);
+  }
+}
+
+// Older browsers don't support event options, feature detect it.
+
+// Adopted and modified solution from Bohdan Didukh (2017)
+// https://stackoverflow.com/questions/41594997/ios-10-safari-prevent-scrolling-behind-a-fixed-overlay-and-maintain-scroll-posi
+
+var hasPassiveEvents = false;
+if (typeof window !== 'undefined') {
+  var passiveTestOptions = {
+    get passive() {
+      hasPassiveEvents = true;
+      return undefined;
+    }
+  };
+  window.addEventListener('testPassive', null, passiveTestOptions);
+  window.removeEventListener('testPassive', null, passiveTestOptions);
+}
+
+var isIosDevice = typeof window !== 'undefined' && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === 'MacIntel' && window.navigator.maxTouchPoints > 1);
+
+
+var locks = [];
+var documentListenerAdded = false;
+var initialClientY = -1;
+var previousBodyOverflowSetting = void 0;
+var previousBodyPosition = void 0;
+var previousBodyPaddingRight = void 0;
+
+// returns true if `el` should be allowed to receive touchmove events.
+var allowTouchMove = function allowTouchMove(el) {
+  return locks.some(function (lock) {
+    if (lock.options.allowTouchMove && lock.options.allowTouchMove(el)) {
+      return true;
+    }
+
+    return false;
+  });
+};
+
+var preventDefault = function preventDefault(rawEvent) {
+  var e = rawEvent || window.event;
+
+  // For the case whereby consumers adds a touchmove event listener to document.
+  // Recall that we do document.addEventListener('touchmove', preventDefault, { passive: false })
+  // in disableBodyScroll - so if we provide this opportunity to allowTouchMove, then
+  // the touchmove event on document will break.
+  if (allowTouchMove(e.target)) {
+    return true;
+  }
+
+  // Do not prevent if the event has more than one touch (usually meaning this is a multi touch gesture like pinch to zoom).
+  if (e.touches.length > 1) return true;
+
+  if (e.preventDefault) e.preventDefault();
+
+  return false;
+};
+
+var setOverflowHidden = function setOverflowHidden(options) {
+  // If previousBodyPaddingRight is already set, don't set it again.
+  if (previousBodyPaddingRight === undefined) {
+    var _reserveScrollBarGap = !!options && options.reserveScrollBarGap === true;
+    var scrollBarGap = window.innerWidth - document.documentElement.clientWidth;
+
+    if (_reserveScrollBarGap && scrollBarGap > 0) {
+      var computedBodyPaddingRight = parseInt(window.getComputedStyle(document.body).getPropertyValue('padding-right'), 10);
+      previousBodyPaddingRight = document.body.style.paddingRight;
+      document.body.style.paddingRight = computedBodyPaddingRight + scrollBarGap + 'px';
+    }
+  }
+
+  // If previousBodyOverflowSetting is already set, don't set it again.
+  if (previousBodyOverflowSetting === undefined) {
+    previousBodyOverflowSetting = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+  }
+};
+
+var restoreOverflowSetting = function restoreOverflowSetting() {
+  if (previousBodyPaddingRight !== undefined) {
+    document.body.style.paddingRight = previousBodyPaddingRight;
+
+    // Restore previousBodyPaddingRight to undefined so setOverflowHidden knows it
+    // can be set again.
+    previousBodyPaddingRight = undefined;
+  }
+
+  if (previousBodyOverflowSetting !== undefined) {
+    document.body.style.overflow = previousBodyOverflowSetting;
+
+    // Restore previousBodyOverflowSetting to undefined
+    // so setOverflowHidden knows it can be set again.
+    previousBodyOverflowSetting = undefined;
+  }
+};
+
+var setPositionFixed = function setPositionFixed() {
+  return window.requestAnimationFrame(function () {
+    // If previousBodyPosition is already set, don't set it again.
+    if (previousBodyPosition === undefined) {
+      previousBodyPosition = {
+        position: document.body.style.position,
+        top: document.body.style.top,
+        left: document.body.style.left
+      };
+
+      // Update the dom inside an animation frame
+      var _window = window,
+          scrollY = _window.scrollY,
+          scrollX = _window.scrollX,
+          innerHeight = _window.innerHeight;
+
+      document.body.style.position = 'fixed';
+      document.body.style.top = -scrollY + 'px';
+      document.body.style.left = -scrollX + 'px';
+
+      setTimeout(function () {
+        return window.requestAnimationFrame(function () {
+          // Attempt to check if the bottom bar appeared due to the position change
+          var bottomBarHeight = innerHeight - window.innerHeight;
+          if (bottomBarHeight && scrollY >= innerHeight) {
+            // Move the content further up so that the bottom bar doesn't hide it
+            document.body.style.top = -(scrollY + bottomBarHeight);
+          }
+        });
+      }, 300);
+    }
+  });
+};
+
+var restorePositionSetting = function restorePositionSetting() {
+  if (previousBodyPosition !== undefined) {
+    // Convert the position from "px" to Int
+    var y = -parseInt(document.body.style.top, 10);
+    var x = -parseInt(document.body.style.left, 10);
+
+    // Restore styles
+    document.body.style.position = previousBodyPosition.position;
+    document.body.style.top = previousBodyPosition.top;
+    document.body.style.left = previousBodyPosition.left;
+
+    // Restore scroll
+    window.scrollTo(x, y);
+
+    previousBodyPosition = undefined;
+  }
+};
+
+// https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Problems_and_solutions
+var isTargetElementTotallyScrolled = function isTargetElementTotallyScrolled(targetElement) {
+  return targetElement ? targetElement.scrollHeight - targetElement.scrollTop <= targetElement.clientHeight : false;
+};
+
+var handleScroll = function handleScroll(event, targetElement) {
+  var clientY = event.targetTouches[0].clientY - initialClientY;
+
+  if (allowTouchMove(event.target)) {
+    return false;
+  }
+
+  if (targetElement && targetElement.scrollTop === 0 && clientY > 0) {
+    // element is at the top of its scroll.
+    return preventDefault(event);
+  }
+
+  if (isTargetElementTotallyScrolled(targetElement) && clientY < 0) {
+    // element is at the bottom of its scroll.
+    return preventDefault(event);
+  }
+
+  event.stopPropagation();
+  return true;
+};
+
+export var disableBodyScroll = function disableBodyScroll(targetElement, options) {
+  // targetElement must be provided
+  if (!targetElement) {
+    // eslint-disable-next-line no-console
+    console.error('disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.');
+    return;
+  }
+
+  // disableBodyScroll must not have been called on this targetElement before
+  if (locks.some(function (lock) {
+    return lock.targetElement === targetElement;
+  })) {
+    return;
+  }
+
+  var lock = {
+    targetElement: targetElement,
+    options: options || {}
+  };
+
+  locks = [].concat(_toConsumableArray(locks), [lock]);
+
+  if (isIosDevice) {
+    setPositionFixed();
+  } else {
+    setOverflowHidden(options);
+  }
+
+  if (isIosDevice) {
+    targetElement.ontouchstart = function (event) {
+      if (event.targetTouches.length === 1) {
+        // detect single touch.
+        initialClientY = event.targetTouches[0].clientY;
+      }
+    };
+    targetElement.ontouchmove = function (event) {
+      if (event.targetTouches.length === 1) {
+        // detect single touch.
+        handleScroll(event, targetElement);
+      }
+    };
+
+    if (!documentListenerAdded) {
+      document.addEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined);
+      documentListenerAdded = true;
+    }
+  }
+};
+
+export var clearAllBodyScrollLocks = function clearAllBodyScrollLocks() {
+  if (isIosDevice) {
+    // Clear all locks ontouchstart/ontouchmove handlers, and the references.
+    locks.forEach(function (lock) {
+      lock.targetElement.ontouchstart = null;
+      lock.targetElement.ontouchmove = null;
+    });
+
+    if (documentListenerAdded) {
+      document.removeEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined);
+      documentListenerAdded = false;
+    }
+
+    // Reset initial clientY.
+    initialClientY = -1;
+  }
+
+  if (isIosDevice) {
+    restorePositionSetting();
+  } else {
+    restoreOverflowSetting();
+  }
+
+  locks = [];
+};
+
+export var enableBodyScroll = function enableBodyScroll(targetElement) {
+  if (!targetElement) {
+    // eslint-disable-next-line no-console
+    console.error('enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.');
+    return;
+  }
+
+  locks = locks.filter(function (lock) {
+    return lock.targetElement !== targetElement;
+  });
+
+  if (isIosDevice) {
+    targetElement.ontouchstart = null;
+    targetElement.ontouchmove = null;
+
+    if (documentListenerAdded && locks.length === 0) {
+      document.removeEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined);
+      documentListenerAdded = false;
+    }
+  }
+
+  if (isIosDevice) {
+    restorePositionSetting();
+  } else {
+    restoreOverflowSetting();
+  }
+};

data/app/javascript/utils/iso_date.js

@@ -0,0 +1,198 @@
+// Imported from https://raw.githubusercontent.com/airblade/stimulus-datepicker/main/src/iso_date.js
+
+export default class IsoDate {
+
+  // new IsoDate()
+  // new IsoDate('')
+  //
+  // new IsoDate(date)
+  //
+  // new IsoDate("2022-05-16")
+  //
+  // new IsoDate("2022", "05", "16")
+  constructor(dateOrYear, month, day) {
+    if (dateOrYear && month && day) {
+      this.yyyy = dateOrYear.toString()
+      this.mm   = this.zeroPad(month)
+      this.dd   = this.zeroPad(day)
+    } else if (dateOrYear instanceof Date) {
+      this.yyyy = dateOrYear.getFullYear().toString()
+      this.mm   = this.zeroPad(dateOrYear.getMonth() + 1)
+      this.dd   = this.zeroPad(dateOrYear.getDate())
+    } else if (dateOrYear) {
+      [this.yyyy, this.mm, this.dd] = dateOrYear.split('-')
+    } else {
+      const today = new Date()
+      this.yyyy = today.getFullYear().toString()
+      this.mm   = this.zeroPad(today.getMonth() + 1)
+      this.dd   = this.zeroPad(today.getDate())
+    }
+  }
+
+  toString() {
+    return [this.yyyy, this.mm, this.dd].join('-')
+  }
+
+  setDayOfMonth(dayOfMonth) {
+    const date = this.toDate()
+    date.setDate(dayOfMonth)
+    return new IsoDate(date)
+  }
+
+  // @param [Number] first day of the week (Sunday is 0)
+  firstDayOfWeek(weekStart) {
+    const date = this.toDate()
+    date.setDate(date.getDate() - (7 + date.getDay() - weekStart) % 7)
+    return new IsoDate(date)
+  }
+
+  // @param [Number] first day of the week (Sunday is 0)
+  lastDayOfWeek(weekStart) {
+    const date = this.toDate()
+    date.setDate(date.getDate() + (weekStart + 6 - date.getDay()) % 7)
+    return new IsoDate(date)
+  }
+
+  previousYear() {
+    return this.increment('yyyy', -1)
+  }
+
+  nextYear() {
+    return this.increment('yyyy', 1)
+  }
+
+  // @param [Boolean] whether to return the same day in the previous month (true)
+  //    or the same day of the week in the previous month (false).
+  previousMonth(sameDayOfMonth = true) {
+    if (sameDayOfMonth) {
+      return this.increment('mm', -1)
+    } else {
+      const month = this.mm
+      let isoDate = this.increment('dd', -28)
+      if (isoDate.mm == month) isoDate = isoDate.increment('dd', -7)
+      return isoDate
+    }
+  }
+
+  // @param [Boolean] whether to return the same day in the next month (true)
+  //    or the same day of the week in the next month (false).
+  nextMonth(sameDayOfMonth = true) {
+    if (sameDayOfMonth) {
+      return this.increment('mm', 1)
+    } else {
+      const month = this.mm
+      let isoDate = this.increment('dd', 28)
+      if (isoDate.mm == month) isoDate = isoDate.increment('dd', 7)
+      return isoDate
+    }
+  }
+
+  previousWeek() {
+    return this.increment('dd', -7)
+  }
+
+  nextWeek() {
+    return this.increment('dd', 7)
+  }
+
+  previousDay() {
+    return this.increment('dd', -1)
+  }
+
+  nextDay() {
+    return this.increment('dd', 1)
+  }
+
+  isWeekend() {
+    return [0, 6].includes(this.toDate().getDay())
+  }
+
+  isToday() {
+    return this.equals(new IsoDate())
+  }
+
+  isFirstDayOfWeek(weekStart) {
+    return this.toDate().getDay() == weekStart
+  }
+
+  isLastDayOfWeek(weekStart) {
+    const days = {0: 6, 1: 0, 2: 1, 3: 2, 4: 3, 5: 4, 6: 5}
+    return this.toDate().getDay() == days[weekStart]
+  }
+
+  equals(isoDate) {
+    return this.toString() == isoDate.toString()
+  }
+
+  before(isoDate) {
+    return this.toString() < isoDate.toString()
+  }
+
+  after(isoDate) {
+    return this.toString() > isoDate.toString()
+  }
+
+  // @param unit [String] 'dd' | 'mm' | 'yyyy'
+  // @param count [Number]
+  increment(unit, count) {
+    let date
+    if (unit == 'dd') {
+      date = this.toDate()
+      date.setDate(date.getDate() + count)
+    } else {
+      date = unit == 'yyyy'
+           ? new Date(+this.yyyy + count, +this.mm - 1)
+           : new Date(+this.yyyy, +this.mm - 1 + count)
+      const endOfMonth = IsoDate.daysInMonth(date.getMonth() + 1, date.getYear())
+      date.setDate(+this.dd > endOfMonth ? endOfMonth : +this.dd)
+    }
+    return new IsoDate(date)
+  }
+
+  static isValidStr(str) {
+    if (!/^\d{4}-\d{2}-\d{2}$/.test(str)) return false
+    return this.isValidDate(...str.split('-').map(s => +s))
+  }
+
+  // @param year [Number] four-digit year
+  // @param month [Number] month number (January is 1)
+  // @param day [Number] day in month
+  static isValidDate(year, month, day) {
+    if (year  < 1000 || year  > 9999) return false
+    if (month <    1 || month >   12) return false
+    if (day   <    1 || day   > this.daysInMonth(month, year)) return false
+    return true
+  }
+
+  // Returns the number of days in the month.
+  //
+  // @param month [Number] the month (1 is January)
+  // @param year [Number] the year (e.g. 2022)
+  // @return [Number] the number of days
+  static daysInMonth(month, year) {
+    if ([1, 3, 5, 7, 8, 10, 12].includes(month)) return 31
+    if ([4, 6, 9, 11].includes(month)) return 30
+    return this.isLeapYear(year) ? 29 : 28
+  }
+
+  static isLeapYear(year) {
+    if ((year % 400) == 0) return true
+    if ((year % 100) == 0) return false
+    return year % 4 == 0
+  }
+
+  // Returns a two-digit zero-padded string.
+  zeroPad(num) {
+    return num.toString().padStart(2, '0')
+  }
+
+  toDate() {
+    // Cannot use `new Date('YYYY-MM-DD')`: it is treated as UTC, not local.
+    return new Date(+this.yyyy, +this.mm - 1, +this.dd)
+  }
+
+  getMonthName() {
+    const month = ["January","February","March","April","May","June","July","August","September","October","November","December"]
+    return month[this.toDate().getMonth()];
+  }
+}

data/app/views/components/ui/_card.html.erb

@@ -1,4 +1,4 @@
-<div class="<%= tw("rounded-lg border bg-card text-card-foreground shadow-sm w-[350px]", options[:class]) %">
+<div class="<%= tw("rounded-lg border bg-card text-card-foreground shadow-sm w-[350px]", options[:class]) %>">
   <% if title || subtitle %>
   <div class="flex flex-col space-y-1.5 p-6">
     <% if title %>

data/app/views/components/ui/_date_picker.html.erb

@@ -0,0 +1,13 @@
+<div data-controller="ui--date-picker">
+  <button data-ui--date-picker-target="toggle"
+    class="inline-flex items-center whitespace-nowrap 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 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2 w-[280px] justify-start text-left font-normal text-muted-foreground" type="button">
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar mr-2 h-4 w-4">
+      <path d="M8 2v4"></path>
+      <path d="M16 2v4"></path>
+      <rect width="18" height="18" x="3" y="4" rx="2"></rect>
+      <path d="M3 10h18"></path>
+    </svg>
+    <span name=<%= name %> data-ui--date-picker-target="input"><%= value %></span>
+    <input type="hidden" name=<%=name%> value=<%value%> data-ui--date-picker-target="input">
+  </button>
+</div>

data/app/views/components/ui/_filter.html.erb

@@ -1,15 +1,18 @@
 <div data-controller="ui--filter">
-<%= render_card do %>
-  <div class="flex items-center">
-  <%= content_for :filter_icon %>
-  <%= render_input name: "filter", placeholder: "Filter items...", variant: :borderless, class: input_class, data: {"ui--filter-target": "source", action: "input->ui--filter#filter"} %></div>
-  <%= render_separator %>
-  <div class="<%= options[:class] %>">
-    <%= content_tag :div, role: "group" do
-      items.each do |item| %>
-        <div data-ui--filter-target="item"><%= list_item(value: item[:value], name: item[:name], selected: item[:selected]) %></div>
-      <% end
-    end %>
-  </div>
-<% end %>
+  <%= render_card do %>
+    <div class="flex items-center">
+      <%= content_for :filter_icon %>
+      <%= render_input name: "filter", placeholder: "Filter items...", variant: :borderless, class: input_class, data: {"ui--filter-target": "source", action: "input->ui--filter#filter"} %>
+    </div>
+    <%= render_separator %>
+    <div class="<%= options[:class] %>">
+      <%= content_tag :div, role: "group" do %>
+        <% items.each do |item| %>
+          <div data-ui--filter-target="item">
+            <%= list_item(value: item[:value], name: item[:name], selected: item[:selected]) %>
+          </div>
+        <% end %>
+      <% end %>
+    </div>
+  <% end %>
 </div>

data/app/views/components/ui/_list.html.erb

@@ -1,5 +1,5 @@
-<%= content_tag as, role: "group" do
-  items.each do |item| %>
+<%= content_tag as, role: "group" do %>
+  <% items.each do |item| %>
     <%= list_item(value: item[:value], name: item[:name], selected: item[:selected]) %>
-  <% end
-end %>
+  <% end %>
+<% end %>

data/app/views/examples/components/accordion/code/_usage.erb

@@ -7,10 +7,10 @@
 <% end %>
 
 # Title and Description Block
-<% render_accordion do %>
-  <%= accordion_title do e%>
+<%= render_accordion do %>
+  <%= accordion_title do %>
   <% end %>
 
-  <%= accordion_description do e%>
+  <%= accordion_description do %>
   <% end %>
 <% end %>