funicular-datepicker 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 830a8b55ec3f3f18ecfb150d04d641e1f7831c77c144d47401719d69a00a3376
+  data.tar.gz: 652c287646d6fca55fda72a6565d8b4e9ac06ed63fb4a0148c00b33897baf386
+SHA512:
+  metadata.gz: 7de6444bb5460fc04d45b42a8ecb04cf1505c70a160dc28e71b2d02b99a1e494ecd9692c95053a966dfdc9c7e2108f979f08f24cb621010da0926170df4d6cc7
+  data.tar.gz: 8efed1ffa7f2c60890a2e1f24d484c68084521e00ba97702a05c8ce1ad127b6531b54393380bbad572c32ff0d5f7bde40877f9594a8688897309a4714c6588a0

data/README.md

@@ -0,0 +1,11 @@
+# funicular-datepicker
+
+Date picker component for Funicular.
+
+Use it from an application Gemfile:
+
+```ruby
+group :funicular do
+  gem "funicular-datepicker"
+end
+```

data/assets/date_picker.css

@@ -0,0 +1,107 @@
+.funicular-date-picker {
+  position: relative;
+}
+
+.funicular-date-picker__input_row {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.funicular-date-picker__button,
+.funicular-date-picker__nav,
+.funicular-date-picker__footer_button {
+  border: 1px solid #d1d5db;
+  border-radius: 0.375rem;
+  background: #fff;
+  color: #374151;
+  cursor: pointer;
+}
+
+.funicular-date-picker__button {
+  padding: 0.5rem 0.75rem;
+  white-space: nowrap;
+}
+
+.funicular-date-picker__button:hover,
+.funicular-date-picker__nav:hover,
+.funicular-date-picker__footer_button:hover,
+.funicular-date-picker__day:hover {
+  background: #f3f4f6;
+}
+
+.funicular-date-picker__panel {
+  position: absolute;
+  z-index: 30;
+  top: calc(100% + 0.5rem);
+  left: 0;
+  width: 19rem;
+  border: 1px solid #d1d5db;
+  border-radius: 0.5rem;
+  background: #fff;
+  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  padding: 0.75rem;
+}
+
+.funicular-date-picker__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.75rem;
+}
+
+.funicular-date-picker__month {
+  font-weight: 600;
+  color: #111827;
+}
+
+.funicular-date-picker__nav {
+  width: 2rem;
+  height: 2rem;
+}
+
+.funicular-date-picker__grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 0.25rem;
+}
+
+.funicular-date-picker__weekday {
+  text-align: center;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: #6b7280;
+  padding: 0.25rem 0;
+}
+
+.funicular-date-picker__empty {
+  height: 2rem;
+}
+
+.funicular-date-picker__day {
+  height: 2rem;
+  border: 0;
+  border-radius: 0.375rem;
+  background: transparent;
+  color: #111827;
+  cursor: pointer;
+}
+
+.funicular-date-picker__day--selected {
+  background: #2563eb;
+  color: #fff;
+}
+
+.funicular-date-picker__day--selected:hover {
+  background: #1d4ed8;
+}
+
+.funicular-date-picker__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  margin-top: 0.75rem;
+}
+
+.funicular-date-picker__footer_button {
+  padding: 0.375rem 0.75rem;
+}

data/lib/components/date_picker_component.rb

@@ -0,0 +1,181 @@
+class DatePickerComponent < Funicular::Component
+  WEEKDAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
+  MONTH_NAMES = [
+    "January", "February", "March", "April", "May", "June",
+    "July", "August", "September", "October", "November", "December"
+  ]
+
+  def initialize_state
+    year, month, = parse_date(props[:value])
+    today_year, today_month = today_parts
+
+    {
+      calendar_open: false,
+      view_year: year || today_year,
+      view_month: month || today_month
+    }
+  end
+
+  def open_calendar
+    year, month, = parse_date(props[:value])
+    patch(
+      calendar_open: true,
+      view_year: year || state.view_year,
+      view_month: month || state.view_month
+    )
+  end
+
+  def close_calendar
+    patch(calendar_open: false)
+  end
+
+  def prev_month
+    if state.view_month == 1
+      patch(view_year: state.view_year - 1, view_month: 12)
+    else
+      patch(view_month: state.view_month - 1)
+    end
+  end
+
+  def next_month
+    if state.view_month == 12
+      patch(view_year: state.view_year + 1, view_month: 1)
+    else
+      patch(view_month: state.view_month + 1)
+    end
+  end
+
+  def clear
+    emit_change("")
+    patch(calendar_open: false)
+  end
+
+  def handle_input(event)
+    emit_change(event.target[:value].to_s)
+  end
+
+  def select_day(day)
+    value = date_string(state.view_year, state.view_month, day)
+    emit_change(value)
+    patch(calendar_open: false)
+  end
+
+  def render
+    div(class: "funicular-date-picker") do
+      div(class: "funicular-date-picker__input_row") do
+        input(
+          type: "text",
+          value: props[:value].to_s,
+          placeholder: props[:placeholder] || "YYYY-MM-DD",
+          class: props[:input_class] || "funicular-date-picker__input",
+          oninput: :handle_input,
+          onfocus: -> { open_calendar }
+        )
+        button(type: "button", class: "funicular-date-picker__button", onclick: -> { open_calendar }) { "Calendar" }
+      end
+
+      render_calendar if state.calendar_open
+    end
+  end
+
+  private
+
+  def render_calendar
+    div(class: "funicular-date-picker__panel") do
+      div(class: "funicular-date-picker__header") do
+        button(type: "button", class: "funicular-date-picker__nav", onclick: -> { prev_month }) { "<" }
+        div(class: "funicular-date-picker__month") do
+          "#{MONTH_NAMES[state.view_month - 1]} #{state.view_year}"
+        end
+        button(type: "button", class: "funicular-date-picker__nav", onclick: -> { next_month }) { ">" }
+      end
+
+      div(class: "funicular-date-picker__grid") do
+        WEEKDAYS.each do |day|
+          div(class: "funicular-date-picker__weekday") { day }
+        end
+
+        first_weekday(state.view_year, state.view_month).times do
+          div(class: "funicular-date-picker__empty") { "" }
+        end
+
+        selected_year, selected_month, selected_day = parse_date(props[:value])
+        (1..days_in_month(state.view_year, state.view_month)).each do |day|
+          selected = selected_year == state.view_year &&
+                     selected_month == state.view_month &&
+                     selected_day == day
+          button(
+            type: "button",
+            class: selected ? "funicular-date-picker__day funicular-date-picker__day--selected" : "funicular-date-picker__day",
+            onclick: -> { select_day(day) }
+          ) do
+            day.to_s
+          end
+        end
+      end
+
+      div(class: "funicular-date-picker__footer") do
+        button(type: "button", class: "funicular-date-picker__footer_button", onclick: -> { clear }) { "Clear" }
+        button(type: "button", class: "funicular-date-picker__footer_button", onclick: -> { close_calendar }) { "Close" }
+      end
+    end
+  end
+
+  def emit_change(value)
+    callback = props[:on_change]
+    callback.call(value) if callback
+  end
+
+  def parse_date(value)
+    return [nil, nil, nil] if value.nil?
+
+    parts = value.to_s.split("-")
+    return [nil, nil, nil] unless parts.size == 3
+
+    year = parts[0].to_i
+    month = parts[1].to_i
+    day = parts[2].to_i
+    return [nil, nil, nil] if year < 1 || month < 1 || month > 12
+    return [nil, nil, nil] if day < 1 || day > days_in_month(year, month)
+
+    [year, month, day]
+  end
+
+  def today_parts
+    now = Time.now
+    [now.year, now.month]
+  rescue
+    [2000, 1]
+  end
+
+  def days_in_month(year, month)
+    case month
+    when 2
+      leap_year?(year) ? 29 : 28
+    when 4, 6, 9, 11
+      30
+    else
+      31
+    end
+  end
+
+  def leap_year?(year)
+    (year % 4 == 0 && year % 100 != 0) || (year % 400 == 0)
+  end
+
+  def first_weekday(year, month)
+    offsets = [0, 3, 2, 5, 0, 3, 5, 1, 4, 6, 2, 4]
+    y = month < 3 ? year - 1 : year
+    (y + y / 4 - y / 100 + y / 400 + offsets[month - 1] + 1) % 7
+  end
+
+  def date_string(year, month, day)
+    "#{pad(year, 4)}-#{pad(month, 2)}-#{pad(day, 2)}"
+  end
+
+  def pad(number, width)
+    text = number.to_s
+    text = "0#{text}" while text.length < width
+    text
+  end
+end

data/lib/date_picker.rb

@@ -0,0 +1,7 @@
+module Funicular
+  module Plugins
+    module DatePicker
+      Component = DatePickerComponent
+    end
+  end
+end

metadata

@@ -0,0 +1,44 @@
+--- !ruby/object:Gem::Specification
+name: funicular-datepicker
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- HASUMI Hitoshi
+bindir: bin
+cert_chain: []
+date: 1980-01-02 00:00:00.000000000 Z
+dependencies: []
+description: A Funicular date picker component packaged as a Ruby-script CRubygem.
+email:
+- hasumikin@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- README.md
+- assets/date_picker.css
+- lib/components/date_picker_component.rb
+- lib/date_picker.rb
+homepage: https://github.com/hasumikin/funicular-datepicker
+licenses:
+- MIT
+metadata: {}
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: 3.2.0
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 4.0.10
+specification_version: 4
+summary: Date picker component for Funicular
+test_files: []