lesli_view 1.1.2 → 1.1.3

data/lib/lesli_view/forms/form.css

@@ -0,0 +1,171 @@
+/* Tailwind styles for LesliView::Forms builders. */
+
+@layer components {
+    .lesli-form-field {
+        @apply mb-4;
+    }
+
+    .lesli-form-label-wrapper {
+        @apply mb-2;
+    }
+
+    .lesli-form-label {
+        @apply block text-sm font-medium leading-5 text-slate-700;
+    }
+
+    .lesli-form-field-body {
+        @apply min-w-0;
+    }
+
+    .lesli-form-control {
+        @apply relative;
+    }
+
+    .lesli-form-input,
+    .lesli-form-select,
+    .lesli-form-control textarea,
+    .lesli-form-control trix-editor {
+        @apply block w-full rounded-xl border border-slate-300 bg-white px-3.5 py-2.5 text-sm text-slate-900 shadow-sm outline-none transition placeholder:text-slate-400 hover:border-slate-400 focus:border-sky-500 focus:ring-4 focus:ring-sky-500/10 disabled:cursor-not-allowed disabled:bg-slate-100 disabled:text-slate-500 disabled:opacity-75;
+    }
+
+    .lesli-form-input,
+    .lesli-form-select {
+        @apply h-11;
+    }
+
+    .lesli-form-control textarea,
+    .lesli-form-control trix-editor {
+        @apply min-h-32 resize-y;
+    }
+
+    .lesli-form-select-wrapper {
+        @apply relative;
+    }
+
+    .lesli-form-select {
+        @apply cursor-pointer appearance-none pr-10;
+    }
+
+    .lesli-form-select-wrapper::after {
+        @apply pointer-events-none absolute right-3.5 top-1/2 h-2 w-2 -translate-y-2 rotate-45 border-b-2 border-r-2 border-slate-400 content-[''];
+    }
+
+    .lesli-form-checkbox {
+        @apply h-4 w-4 cursor-pointer rounded border-slate-300 accent-sky-600 focus:ring-2 focus:ring-sky-500/30 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
+    }
+
+    .lesli-form-checkbox-label {
+        @apply inline-flex cursor-pointer items-center gap-2.5 text-sm text-slate-600;
+    }
+
+    .lesli-form-control.has-icon .lesli-form-input,
+    .lesli-form-control.has-icon .lesli-form-select {
+        @apply pl-11;
+    }
+
+    .lesli-form-icon {
+        @apply pointer-events-none absolute left-3.5 top-1/2 inline-flex h-5 w-5 -translate-y-1/2 items-center justify-center text-slate-400;
+    }
+
+    .lesli-form-icon .material-symbols-outlined {
+        @apply text-xl leading-none;
+    }
+
+    .lesli-form-help {
+        @apply mt-2 text-sm leading-5 text-slate-500;
+    }
+
+    .lesli-form-field.is-danger .lesli-form-input,
+    .lesli-form-field.is-danger .lesli-form-select,
+    .lesli-form-field.is-danger textarea,
+    .lesli-form-field.is-danger trix-editor {
+        @apply border-rose-400 focus:border-rose-500 focus:ring-rose-500/10;
+    }
+
+    .lesli-form-help.is-danger {
+        @apply text-rose-700;
+    }
+
+    .lesli-form-help.is-warning {
+        @apply text-amber-700;
+    }
+
+    .lesli-form-help.is-success {
+        @apply text-emerald-700;
+    }
+
+    .lesli-form-help.is-info {
+        @apply text-sky-700;
+    }
+
+    .lesli-form-button {
+        @apply inline-flex h-11 cursor-pointer items-center justify-center gap-2 rounded-xl border border-transparent px-4 text-sm font-semibold shadow-sm transition focus:outline-none focus:ring-4 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50;
+    }
+
+    .lesli-form-button.is-primary,
+    .lesli-form-button.is-info {
+        @apply bg-sky-600 text-white hover:bg-sky-700 focus:ring-sky-500/20;
+    }
+
+    .lesli-form-button.is-success {
+        @apply bg-emerald-600 text-white hover:bg-emerald-700 focus:ring-emerald-500/20;
+    }
+
+    .lesli-form-button.is-warning {
+        @apply bg-amber-500 text-amber-950 hover:bg-amber-600 focus:ring-amber-500/20;
+    }
+
+    .lesli-form-button.is-danger {
+        @apply bg-rose-600 text-white hover:bg-rose-700 focus:ring-rose-500/20;
+    }
+
+    .lesli-form-button.is-fullwidth {
+        @apply w-full;
+    }
+
+    .lesli-form-button-icon {
+        @apply inline-flex h-5 w-5 items-center justify-center;
+    }
+
+    .lesli-form-button-icon .material-symbols {
+        @apply text-xl leading-none;
+    }
+
+    .lesli-form-fieldset {
+        @apply mb-6 rounded-2xl border border-slate-200 bg-white p-6 shadow-sm;
+    }
+
+    .lesli-form-legend {
+        @apply -ml-1 mb-5 px-1 text-lg font-semibold text-slate-800;
+    }
+
+    .lesli-form-fieldset.is-info {
+        @apply border-sky-200 bg-sky-50/40;
+    }
+
+    .lesli-form-fieldset.is-success {
+        @apply border-emerald-200 bg-emerald-50/40;
+    }
+
+    .lesli-form-fieldset.is-warning {
+        @apply border-amber-200 bg-amber-50/50;
+    }
+
+    .lesli-form-fieldset.is-danger {
+        @apply border-rose-200 bg-rose-50/40;
+    }
+
+    @media (min-width: 768px) {
+        .lesli-form-field.is-horizontal {
+            @apply grid grid-cols-[minmax(8rem,1fr)_minmax(0,3fr)] items-start gap-5;
+        }
+
+        .lesli-form-field.is-horizontal > .lesli-form-label-wrapper {
+            @apply mb-0 pt-2.5 text-right;
+        }
+
+        .lesli-form-field.is-horizontal > .lesli-form-field-body {
+            @apply col-start-2;
+        }
+    }
+}

data/lib/lesli_view/forms/form.scss

@@ -31,57 +31,5 @@ Building a better future, one line of code at a time.
 */
 
 
-// · 
-.lesli-form-field {
-    .field:not(.is-horizontal) {
-        .field-label {
-            text-align: left;
-        }
-    }
-}
-
-
-.lesli-form-fieldset {
-    padding: 2.5rem 2rem;
-    border-radius: 5px;
-    //border: 1px solid #ccc;
-    background-color: #fff;
-    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
-
-    fieldset {
-        padding: 1.2rem;
-        border-radius: 5px;
-        border: 1px solid #ccc;
-        margin-bottom: 1rem;
-    }
-}
-
-
-form fieldset.is-warning {
-    border: 2px solid var(--bulma-warning);
-    background-color: var(--bulma-warning-95);
-}
-form fieldset.is-warning h5 {
-    color: var(--bulma-warning-bold);
-    font-weight: 600;
-}
-
-
-form fieldset.is-info {
-    border: 2px solid var(--bulma-info);
-    background-color: var(--bulma-info-95);
-}
-form fieldset.is-info h5 {
-    color: var(--bulma-info-bold);
-    font-weight: 600;
-}
-
-
-form fieldset.is-danger {
-    border: 2px solid var(--bulma-danger);
-    background-color: var(--bulma-danger-95);
-}
-form fieldset.is-danger h5 {
-    color: var(--bulma-danger-bold);
-    font-weight: 600;
-}
+// LesliView forms have migrated to Tailwind.
+// See lib/lesli_view/forms/form.css.

data/lib/lesli_view/forms/inputs.rb

@@ -2,17 +2,21 @@ module LesliView
     module Forms
         module Inputs
             def label(method, text = nil, options = {})
-                super(method, text, options.merge(class: 'label'))
+                options = options.symbolize_keys
+                options[:class] = merge_css_classes("lesli-form-label", options[:class])
+                super(method, text, options)
             end
 
             def check_box(method, options = {}, checked_value = "1", unchecked_value = "0")
-                value = @object.send(method)
+                options = options.symbolize_keys
+                options[:class] = merge_css_classes("lesli-form-checkbox", options[:class])
                 super(method, options, checked_value, unchecked_value)
             end
 
             def text_field(method, options = {})
-                value = @object.send(method) if @object
-                super(method, options.merge(value: value, class: 'input'))
+                options = options.symbolize_keys
+                options[:class] = merge_css_classes("lesli-form-input", options[:class])
+                super(method, options)
             end
 
             def text_editor(method, options = {})
@@ -26,22 +30,30 @@ module LesliView
 
 
             def email_field(method, options = {})
-                value = @object.send(method)
-                super(method, options.merge(value: value, class: 'input'))
+                options = options.symbolize_keys
+                options[:class] = merge_css_classes("lesli-form-input", options[:class])
+                super(method, options)
             end
 
             def password_field(method, options = {})
-                value = @object.send(method)
-                super(method, options.merge(value: value, class: 'input'))
+                options = options.symbolize_keys
+                options[:class] = merge_css_classes("lesli-form-input", options[:class])
+                options[:value] = @object.public_send(method) if @object && !options.key?(:value)
+                super(method, options)
+            end
+
+            def select(method, choices = nil, options = {}, html_options = {}, &block)
+                html_options = html_options.symbolize_keys
+                html_options[:class] = merge_css_classes("lesli-form-select", html_options[:class])
+                super(method, choices, options, html_options, &block)
+            end
+
+            def submit(value = nil, options = {})
+                options = options.symbolize_keys
+                options[:class] = merge_css_classes("lesli-form-button is-primary", options[:class])
+                super(value, options)
             end
 
-            def submit(value=nil, options = {})
-                # Extract and merge classes properly
-                default_classes = "button is-primary"
-                custom_classes = options[:class] || ""
-                merged_classes = "#{default_classes} #{custom_classes}".strip
-                super(value, options.merge(class: merged_classes))
-            end 
         end
     end
 end

data/lib/lesli_view/layout/container.html.erb

@@ -1,7 +1,13 @@
 
-<!-- app/components/lesli_application_container_component.html.erb -->
+<%
+    container_class = class_names(
+        "lesli-application-container mx-auto block w-full px-4 sm:px-6 lg:px-8",
+        dashboard ? "container" : "max-w-7xl"
+    )
+%>
+
 <turbo-frame
     id="<%= turbo_frame_id %>"
-    class="lesli-application-container container <%= 'is-fluid' if dashboard %>">
+    class="<%= container_class %>">
     <%= content %>
 </turbo-frame>

data/lib/lesli_view/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module LesliView
-    VERSION = "1.1.2"
-    BUILD = "1777174912"
+    VERSION = "1.1.3"
+    BUILD = "1789353654"
 end

data/lib/lesli_view/widgets/calendar.html.erb

@@ -1,135 +1,44 @@
-<style>
-.lesli-view-widgets-calendar .box {
-    padding: 14px;
-}
-
-.lesli-view-widgets-calendar-content .weekday,
-.lesli-view-widgets-calendar-content .days {
-    display: grid;
-    grid-template-columns: repeat(7, 1fr);
-}
-
-.lesli-view-widgets-calendar-content .weekday li,
-.lesli-view-widgets-calendar-content .days li {
-    display: grid;
-}
-
-.lesli-view-widgets-calendar-content .weekday li a,
-.lesli-view-widgets-calendar-content .days li a {
-    text-transform: uppercase;
-	display: grid;
-    place-items: center;
-    width: 100%;
-    height: 100%;
-	color: #747978;
-    font-size: 12px;
-}
-
-.lesli-view-widgets-calendar-content .weekday li a {
-    margin-bottom: 8px;
-}
-
-.lesli-view-widgets-calendar-content .days li a {
-    border-radius: 5px;   
-    font-weight: bold;
-    padding: 4px 0;
-}
-
-.lesli-view-widgets-calendar-content .days li .selected{
-    background-color: #F5A1A3!important;
-    color: #ffffff;
-}
-
-.lesli-view-widgets-calendar-content .days li a:hover{
-	background-color: #EEEDE9;
-}
-
-.lesli-view-widgets-calendar-content .days li .event{
-	color: #F5A1A3;
-}
-</style>
-<div class="lesli-view-widgets-calendar">
-    <div class="box">
-        <div class="lesli-view-widgets-calendar-content">
-            <ul class="weekday">
-                <li><a href="#" title="Sun" data-value="7">Sun</a></li>
-                <li><a href="#" title="Mon" data-value="1">Mon</a></li>
-                <li><a href="#" title="Tue" data-value="2">Tue</a></li>
-                <li><a href="#" title="Wed" data-value="3">Wed</a></li>
-                <li><a href="#" title="Thu" data-value="4">Thu</a></li>
-                <li><a href="#" title="Fri" data-value="5">Fri</a></li>
-                <li><a href="#" title="Say" data-value="6">Sat</a></li>
-            </ul>
-            <ul class="days" id="lesli-view-widgets-calendar-days">
-            </ul>
-        </div>
+<section
+    class="lesli-calendar-widget h-full rounded-2xl border border-slate-200 bg-white p-3 shadow-sm sm:p-4"
+    aria-label="<%= calendar_title %>">
+
+    <div class="grid grid-cols-7 gap-0.5">
+        <% weekdays.each do |abbreviated_name, full_name| %>
+            <div class="py-0.5 text-center text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+                <abbr class="no-underline" title="<%= full_name %>"><%= abbreviated_name %></abbr>
+            </div>
+        <% end %>
     </div>
-</div>
-<script>
-(() => {
-
-    const current = new Date();
-
-    const daysEl = document.getElementById('lesli-view-widgets-calendar-days');
-
-    // Example event days (YYYY-MM-DD)
-    const events = new Set([
-        '2026-01-08',
-        '2026-01-10',
-        '2026-01-27'
-    ]);
-
-    function renderCalendar(date) {
-        daysEl.innerHTML = '';
 
-        const year = date.getFullYear();
-        const month = date.getMonth();
-
-        // Monday-based week
-        const firstDay = new Date(year, month, 1);
-
-        const start = firstDay.getDay(); // 0 = Sunday, 6 = Saturday
-
-        const daysInMonth = new Date(year, month + 1, 0).getDate();
-
-        // Empty cells before first day
-        for (let i = 0; i < start; i++) {
-            daysEl.appendChild(document.createElement('li'));
-        }
-
-        // Days
-        for (let day = 1; day <= daysInMonth; day++) {
-            const li = document.createElement('li');
-            const a = document.createElement('a');
-
-            const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
-
-            a.textContent = day;
-            a.href = '#';
-            a.dataset.value = day;
-
-            if (events.has(dateStr)) a.classList.add('event');
-
-            if (
-                day === new Date().getDate() &&
-                month === new Date().getMonth() &&
-                year === new Date().getFullYear()
-            ) {
-                a.classList.add('selected');
-            }
-
-            a.addEventListener('click', e => {
-                e.preventDefault();
-                document
-                    .querySelectorAll('.days a.selected')
-                    .forEach(el => el.classList.remove('selected'));
-                a.classList.add('selected');
-            });
-
-            li.appendChild(a);
-            daysEl.appendChild(li);
-        }
-    }
-    renderCalendar(current);
-})();
-</script>
+    <div class="mt-0.5 grid grid-cols-7 gap-0.5">
+        <% calendar_days.each do |day| %>
+            <% if day.nil? %>
+                <span class="h-8 sm:h-9" aria-hidden="true"></span>
+            <% else %>
+                <% day_date = date_for(day) %>
+                <div
+                    class="relative flex h-8 items-center justify-center rounded-lg text-sm font-medium sm:h-9
+                        <%= if selected?(day)
+                            "bg-sky-600 text-white shadow-sm"
+                        elsif today?(day)
+                            "bg-sky-50 text-sky-700 ring-1 ring-inset ring-sky-200"
+                        else
+                            "text-slate-600"
+                        end %>">
+
+                    <time
+                        datetime="<%= day_date.iso8601 %>"
+                        aria-label="<%= I18n.l(day_date, format: :long) %>"
+                        <% if today?(day) %>aria-current="date"<% end %>><%= day %></time>
+
+                    <% if event?(day) %>
+                        <span
+                            class="absolute bottom-1 h-1 w-1 rounded-full <%= selected?(day) ? 'bg-white' : 'bg-rose-400' %>"
+                            aria-hidden="true"></span>
+                        <span class="sr-only"><%= I18n.t("date.has_events", default: "Has events") %></span>
+                    <% end %>
+                </div>
+            <% end %>
+        <% end %>
+    </div>
+</section>

data/lib/lesli_view/widgets/calendar.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 =begin
 
 Lesli
@@ -33,11 +35,83 @@ Building a better future, one line of code at a time.
 module LesliView
     module Widgets
         class Calendar < ViewComponent::Base
-            attr_reader :title, :number
+            WEEK_STARTS = {
+                sunday: 0,
+                monday: 1
+            }.freeze
+
+            attr_reader :title, :number, :date, :selected_date, :week_starts_on
 
-            def initialize(title=nil, number=nil)
+            def initialize(
+                title = nil,
+                number = nil,
+                date: ::Date.current,
+                events: [],
+                selected_date: ::Date.current,
+                week_starts_on: :sunday
+            )
                 @title = title
-                @number = number
+                @number = number # Retained for compatibility with the original positional API.
+                @date = normalize_date(date) || ::Date.current
+                @selected_date = normalize_date(selected_date)
+                @week_starts_on = normalize_week_start(week_starts_on)
+                @event_dates = Array(events).each_with_object({}) do |event, dates|
+                    event_date = normalize_date(event)
+                    dates[event_date] = true if event_date
+                end
+            end
+
+            def calendar_title
+                title.presence || I18n.l(date, format: "%B %Y")
+            end
+
+            def weekdays
+                abbreviated = Array(I18n.t("date.abbr_day_names"))
+                full = Array(I18n.t("date.day_names"))
+                offset = WEEK_STARTS.fetch(week_starts_on)
+
+                abbreviated.zip(full).rotate(offset)
+            end
+
+            def calendar_days
+                first_day = date.beginning_of_month
+                leading_blanks = (first_day.wday - WEEK_STARTS.fetch(week_starts_on)) % 7
+                days = Array.new(leading_blanks) + (1..date.end_of_month.day).to_a
+                days.concat(Array.new((7 - (days.length % 7)) % 7))
+            end
+
+            def date_for(day)
+                date.change(day: day)
+            end
+
+            def selected?(day)
+                selected_date == date_for(day)
+            end
+
+            def today?(day)
+                ::Date.current == date_for(day)
+            end
+
+            def event?(day)
+                @event_dates.key?(date_for(day))
+            end
+
+            private
+
+            def normalize_date(value)
+                return if value.nil?
+                return value.to_date if value.respond_to?(:to_date)
+
+                ::Date.parse(value.to_s)
+            rescue ArgumentError, TypeError
+                nil
+            end
+
+            def normalize_week_start(value)
+                value = value.to_s.downcase.to_sym
+                return value if WEEK_STARTS.key?(value)
+
+                :sunday
             end
         end
     end

data/lib/lesli_view/widgets/chart.html.erb

@@ -1,28 +1,27 @@
-<style>
-.lesli-view-widgets-chart {
-}
-</style>
+<section
+    class="lesli-chart-widget h-full rounded-2xl border border-slate-200 bg-white p-4 shadow-sm"
+    <% if title.present? %>aria-labelledby="<%= title_id %>"<% else %>aria-label="<%= I18n.t('charts.chart', default: 'Chart') %>"<% end %>>
 
-<%
-    # Determine the chart component class dynamically
-    chart_component = case type
-    when :bar
-        LesliView::Charts::Bar
-    when :line
-        LesliView::Charts::Line
-    else
-        nil # Handle unknown types gracefully
-    end
-%>
+    <div class="flex h-full min-h-40 flex-col">
+        <% if title.present? %>
+            <h2 id="<%= title_id %>" class="mb-3 text-sm font-medium leading-5 text-slate-500">
+                <%= title %>
+            </h2>
+        <% end %>
 
-<div class="lesli-view-widgets-chart">
-    <% if chart_component %>
-        <%= render(chart_component.new(
-            title: title,
-            labels: data.map{ |i| i[0] },
-            dataset: data.map{ |i| i[1] },
-            height: '132px',
-            compact: true
-        )) %>
-    <% end %>
-</div>
+        <% if data? %>
+            <div class="min-h-0 flex-1">
+                <%= render(chart_component.new(
+                    labels: labels,
+                    datasets: [{ label: title, data: dataset }],
+                    height: "10rem",
+                    compact: true
+                )) %>
+            </div>
+        <% else %>
+            <div class="flex flex-1 items-center justify-center text-sm text-slate-400">
+                <%= I18n.t("charts.empty", default: "No chart data") %>
+            </div>
+        <% end %>
+    </div>
+</section>