rails-datepicker 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: c51da7d226f8f410243d30109623c9c60e8f5443d63091974f318a775afaaa5c
+  data.tar.gz: 71b41a3dc594e10a95c6c579ba236f640116d5fd1188f4deaed1082c226ac9dc
+SHA512:
+  metadata.gz: 8277f456e3205227e6016d5bcba395c3ee266ddda0221536d5da5a6c070b5d372905ce00e52366d612b1bc41016e1c585a55a991f1478e61fd6941d49eb20594
+  data.tar.gz: a3c4819b1bdc4a08c0ec1580ddd5fd184837921d06cd9136e832ed2926272d3000778fc973c05708e3efa4a0d4c6d7cc9b213ab0655e436da9d53b60fb6284d5

data/CHANGELOG.md

@@ -0,0 +1,29 @@
+# Changelog
+
+All notable changes follow [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
+
+## Unreleased
+
+### Changed
+
+- Made popup calendars compact and independent of the form field width.
+- Added an English/Amharic switch for all calendar controls and labels.
+- Added `display_calendar` so Ethiopian calendar selection can display Gregorian results.
+
+- Renamed the gem from `stimulus-datepicker` to `rails-datepicker`, including its Ruby namespace, generator, Stimulus identifier, and asset names.
+- Made Ethiopian/Gregorian conversion accurate across Gregorian century boundaries.
+- Applied each field's locale to server-rendered labels and preserved caller-supplied ARIA descriptions.
+- Made disabled inline calendars inert and ensured unconstrained calendars keep selectable dates.
+- Added Puma as a declared development dependency so the browser test suite can boot.
+
+## 0.1.0 - 2026-10-15
+
+### Added
+
+- Ethiopian and Gregorian calendars with bidirectional conversion, leap years, Pagume, and New Year boundary coverage.
+- English and Amharic labels, configurable week start, date format, and Ethiopic numerals.
+- Accessible Stimulus 3 popover and inline calendars with keyboard navigation and responsive positioning.
+- Gregorian ISO form submission for Rails form builders, nested forms, and optional Simple Form input.
+- Tailwind CSS 4 light, dark, and automatic themes.
+- Rails installer for Importmap and Bun/esbuild applications.
+- Rails 8 dummy application, integration, generator, system, and JavaScript tests.

data/LICENSE.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Tamiru
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

data/README.md

@@ -0,0 +1,166 @@
+# rails-datepicker
+
+`rails-datepicker` is a Rails 8 datepicker for Ethiopian and Gregorian dates. It uses Stimulus 3, Turbo, vanilla JavaScript, and Tailwind CSS 4. Users can change the displayed calendar without changing the selected day; forms always submit a Gregorian ISO value (`YYYY-MM-DD`) that maps directly to an Active Record `date` column.
+
+## Requirements
+
+- Ruby 3.2 or newer
+- Rails 8.0
+- Stimulus 3 and Turbo
+- Tailwind CSS 4
+- Importmap, Bun, or another Rails JavaScript bundler
+
+No Bootstrap, DaisyUI, jQuery, React, or Vue dependency is used.
+
+## Installation
+
+Add the gem to the application:
+
+```ruby
+gem "rails-datepicker"
+```
+
+Then install it:
+
+```bash
+bundle install
+bin/rails generate rails_datepicker:install
+```
+
+The generator:
+
+- creates `config/initializers/rails_datepicker.rb`;
+- copies the Stimulus controller and calendar module into `app/javascript`;
+- adds the Importmap pin when `config/importmap.rb` exists;
+- copies and imports the Tailwind CSS 4 component source.
+
+Existing files go through the standard Rails generator collision prompt. Restart the asset watcher after installation. With Bun/esbuild, the installer rewrites the copied controller to a relative ES module import, so no package alias is needed. With Importmap, it retains the pinned module name and `stimulus-rails` discovers the copied controller automatically.
+
+If the Tailwind entrypoint uses a custom path, add this line after `@import "tailwindcss"`:
+
+```css
+@import "./rails_datepicker.css";
+```
+
+## Configuration
+
+```ruby
+RailsDatepicker.configure do |config|
+  config.default_calendar = :ethiopian
+  config.default_locale = :am
+  config.date_format = "YYYY-MM-DD"
+  config.theme = :auto
+  config.week_start = :sunday
+end
+```
+
+Valid calendars are `:ethiopian` and `:gregorian`; locales are `:am` and `:en`; themes are `:auto`, `:light`, and `:dark`; week starts are `:sunday` and `:monday`.
+
+## Rails form builders
+
+```erb
+<%= form_with model: @student do |f| %>
+  <%= f.label :birth_date %>
+  <%= f.datepicker_field :birth_date,
+    calendar: :ethiopian,
+    locale: :am %>
+<% end %>
+```
+
+The visible input has no `name`. A hidden input named `student[birth_date]` contains the canonical Gregorian date, so standard strong parameters and Active Record date casting work unchanged.
+
+Standalone helper:
+
+```erb
+<%= rails_datepicker_field(
+  :student,
+  :birth_date,
+  object: @student,
+  calendar: :ethiopian,
+  locale: :am
+) %>
+```
+
+Nested `fields_for` names and IDs are generated by the Rails builder. Standard HTML options such as `required`, `disabled`, `class`, `data`, and `aria` are preserved. Model validation errors are connected to the visible input with `aria-describedby`.
+
+## Field options
+
+```erb
+<%= f.datepicker_field :appointment_date,
+  calendar: :ethiopian,
+  locale: :am,
+  display_calendar: :gregorian,
+  date_format: "DD/MM/YYYY",
+  week_start: :monday,
+  theme: :auto,
+  ethiopic_numerals: true,
+  min: Date.current,
+  max: 2.years.from_now.to_date,
+  disabled_dates: holidays,
+  readonly: false,
+  inline: false,
+  years_before: 100,
+  years_after: 20 %>
+```
+
+`display_calendar: :gregorian` keeps the visible result and manual input Gregorian while the popup can use either calendar. Omit it to display the result in the active calendar. The popup has independent calendar and English/Amharic switches.
+
+`min`, `max`, and every `disabled_dates` entry are interpreted as canonical Gregorian dates. Manual input must exactly match `date_format`; invalid and unavailable dates use native constraint validation. `readonly: true` disables manual editing while retaining calendar selection. `inline: true` keeps the calendar visible.
+
+## Simple Form
+
+When Simple Form is installed, the engine loads `RailsDatepickerInput`:
+
+```erb
+<%= simple_form_for @student do |f| %>
+  <%= f.input :birth_date,
+    as: :rails_datepicker,
+    calendar: :ethiopian,
+    locale: :am %>
+<% end %>
+```
+
+Simple Form is optional and is not a runtime dependency.
+
+## Accessibility and Turbo
+
+- The input exposes combobox/dialog relationships and validation state.
+- Arrow keys move by day or week; Home/End move within a week; Page Up/Down move by month; Shift+Page Up/Down move by year; Escape closes and restores focus.
+- Focus starts on the selected date, today, or the first enabled date.
+- The popover flips above the field and clamps horizontally to remain inside the viewport.
+- Every controller instance owns and removes its document/window listeners in `disconnect()`, including Turbo Frame replacement and Turbo cache navigation.
+- Inline and popup instances are independent and work inside modal dialogs.
+
+## Calendar accuracy
+
+Conversion is anchored at 2015-01-01 Ethiopian / 2022-09-11 Gregorian and advances by the Ethiopian calendar's own year lengths, so it remains accurate across Gregorian century boundaries. Ethiopian leap years satisfy `year % 4 == 3`; Pagume has six days in those years and five otherwise. In the modern 1900–2098 range, Ethiopian New Year falls on September 12 when the following Gregorian year is a leap year, and September 11 otherwise.
+
+The Ruby and JavaScript suites include reference boundaries such as:
+
+| Ethiopian | Gregorian |
+|---|---|
+| 2015-01-01 | 2022-09-11 |
+| 2015-13-06 | 2023-09-11 |
+| 2016-01-01 | 2023-09-12 |
+
+Round-trip tests cover representative dates for every year from 1900 through 2100, with explicit reference assertions around the 2099/2100 century boundary.
+
+## Testing
+
+```bash
+bundle exec rake test
+npm test
+RUN_SYSTEM_TESTS=1 bundle exec ruby -Itest test/system/datepicker_test.rb
+```
+
+The test suite includes a Rails 8 dummy application and covers conversion, leap years, Pagume, New Year boundaries, strict input, restrictions, canonical form submission, Simple Form, multiple instances, Turbo Frame reconnection, keyboard navigation, and light/dark/inline rendering.
+
+## Publishing
+
+Build locally with `gem build rails-datepicker.gemspec`. Review the gem contents with `gem contents --show-install-dir rails-datepicker` after installing the artifact. Enable MFA on the RubyGems account before publishing. The gemspec requires MFA.
+
+The repository does not contain any automated publish step. Publishing to RubyGems and pushing to GitHub must be performed explicitly by a maintainer.
+
+## License
+
+MIT.

data/app/assets/stylesheets/rails_datepicker.css

@@ -0,0 +1,98 @@
+@layer components {
+  .rdp {
+    --rdp-bg: #ffffff;
+    --rdp-fg: #172033;
+    --rdp-muted: #64748b;
+    --rdp-border: #cbd5e1;
+    --rdp-accent: #2563eb;
+    --rdp-accent-fg: #ffffff;
+    --rdp-hover: #eff6ff;
+    --rdp-danger: #dc2626;
+    position: relative;
+    width: 100%;
+    color: var(--rdp-fg);
+    font-family: ui-sans-serif, system-ui, sans-serif;
+  }
+
+  /*
+   * Auto theme adopts common host design tokens (including DaisyUI) while
+   * retaining standalone fallbacks for applications without a token system.
+   */
+  .rdp--auto {
+    --rdp-bg: var(--color-base-100, #ffffff);
+    --rdp-fg: var(--color-base-content, #172033);
+    --rdp-muted: color-mix(in oklab, var(--color-base-content, #172033) 60%, transparent);
+    --rdp-border: var(--color-base-300, #cbd5e1);
+    --rdp-accent: var(--color-primary, #2563eb);
+    --rdp-accent-fg: var(--color-primary-content, #ffffff);
+    --rdp-hover: color-mix(in oklab, var(--color-primary, #2563eb) 12%, var(--color-base-100, #ffffff));
+    --rdp-danger: var(--color-error, #dc2626);
+  }
+
+  .rdp__input-group { position: relative; display: flex; align-items: stretch; width: 100%; }
+  .rdp__input {
+    width: 100%; min-height: 2.5rem; border: 1px solid var(--rdp-border); border-radius: .5rem;
+    background: var(--rdp-bg); color: var(--rdp-fg); padding: .5rem 2.5rem .5rem .75rem;
+    font-size: .875rem; line-height: 1.25rem; box-shadow: 0 1px 2px rgb(15 23 42 / .05);
+  }
+  .rdp__input:focus { border-color: var(--rdp-accent); outline: 2px solid color-mix(in srgb, var(--rdp-accent) 25%, transparent); outline-offset: 1px; }
+  .rdp__input[aria-invalid="true"] { border-color: var(--rdp-danger); }
+  .rdp__input:disabled { cursor: not-allowed; opacity: .6; }
+  .rdp__trigger { position: absolute; inset-block: 0; inset-inline-end: 0; display: grid; width: 2.5rem; place-items: center; color: var(--rdp-muted); border-radius: 0 .5rem .5rem 0; }
+  .rdp__trigger:hover { color: var(--rdp-accent); background: var(--rdp-hover); }
+  .rdp__trigger:focus-visible, .rdp__nav:focus-visible, .rdp__day:focus-visible, .rdp__footer-button:focus-visible, .rdp__locale-toggle:focus-visible, .rdp__calendar-toggle:focus-visible { outline: 2px solid var(--rdp-accent); outline-offset: 2px; }
+  .rdp__icon { width: 1.125rem; height: 1.125rem; }
+
+  .rdp__popover {
+    position: fixed; z-index: 1000; width: 18rem; border: 1px solid var(--rdp-border); border-radius: .75rem;
+    background: var(--rdp-bg); color: var(--rdp-fg); padding: .625rem; box-shadow: 0 8px 24px rgb(15 23 42 / .12);
+  }
+  .rdp__popover[hidden] { display: none; }
+  .rdp--inline .rdp__popover { position: relative; inset: auto; z-index: auto; width: 100%; margin-top: .5rem; box-shadow: none; }
+  .rdp__header { display: grid; grid-template-columns: 2rem minmax(0, 1fr) 2rem; gap: .25rem; align-items: center; }
+  .rdp__nav { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: .375rem; color: var(--rdp-muted); font-size: 1.25rem; }
+  .rdp__nav:hover { background: var(--rdp-hover); color: var(--rdp-accent); }
+  .rdp__selectors { display: grid; grid-template-columns: minmax(0, 1fr) 4.75rem; gap: .25rem; }
+  .rdp__select { min-width: 0; height: 2rem; border: 1px solid var(--rdp-border); border-radius: .375rem; background: var(--rdp-bg); color: var(--rdp-fg); padding: 0 .375rem; font-size: .75rem; }
+  .rdp__weekdays, .rdp__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .125rem; }
+  .rdp__weekdays { margin-top: .75rem; }
+  .rdp__weekday { padding-block: .25rem; overflow: hidden; color: var(--rdp-muted); text-align: center; font-size: .6875rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
+  .rdp__grid { margin-top: .25rem; }
+  .rdp__day { display: grid; height: 2rem; min-width: 0; padding: 0; place-items: center; border-radius: .375rem; font-size: .8125rem; }
+  .rdp__day:hover:not(:disabled) { background: var(--rdp-hover); color: var(--rdp-accent); }
+  .rdp__day--today { box-shadow: inset 0 0 0 1px var(--rdp-accent); color: var(--rdp-accent); font-weight: 700; }
+  .rdp__day--selected, .rdp__day--selected:hover { background: var(--rdp-accent); color: var(--rdp-accent-fg); font-weight: 700; }
+  .rdp__day:disabled { cursor: not-allowed; color: var(--rdp-muted); opacity: .35; text-decoration: line-through; }
+  .rdp__day--empty { visibility: hidden; }
+  .rdp__footer { display: flex; align-items: center; gap: .25rem; margin-top: .75rem; padding-top: .625rem; border-top: 1px solid var(--rdp-border); }
+  .rdp__footer-button, .rdp__locale-toggle, .rdp__calendar-toggle { border-radius: .375rem; padding: .375rem .25rem; color: var(--rdp-accent); font-size: .75rem; font-weight: 600; }
+  .rdp__footer-button:hover, .rdp__locale-toggle:hover, .rdp__calendar-toggle:hover { background: var(--rdp-hover); }
+  .rdp__locale-toggle { margin-inline-start: auto; }
+  .rdp__error { margin-top: .375rem; color: var(--rdp-danger); font-size: .75rem; }
+
+  .rdp--dark, .dark .rdp--auto {
+    --rdp-bg: #111827; --rdp-fg: #f8fafc; --rdp-muted: #94a3b8; --rdp-border: #475569;
+    --rdp-accent: #60a5fa; --rdp-accent-fg: #0f172a; --rdp-hover: #1e293b; --rdp-danger: #f87171;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .rdp--auto {
+    --rdp-bg: var(--color-base-100, #111827);
+    --rdp-fg: var(--color-base-content, #f8fafc);
+    --rdp-muted: color-mix(in oklab, var(--color-base-content, #f8fafc) 60%, transparent);
+    --rdp-border: var(--color-base-300, #475569);
+    --rdp-accent: var(--color-primary, #60a5fa);
+    --rdp-accent-fg: var(--color-primary-content, #0f172a);
+    --rdp-hover: color-mix(in oklab, var(--color-primary, #60a5fa) 14%, var(--color-base-100, #111827));
+    --rdp-danger: var(--color-error, #f87171);
+  }
+}
+
+@media (max-width: 360px) {
+  .rdp__popover { padding: .5rem; }
+}
+
+@media (forced-colors: active) {
+  .rdp__day--selected { outline: 2px solid Highlight; }
+}