lesli_view 1.1.2 → 1.1.4

data/lib/lesli_view/items/task.html.erb

@@ -30,9 +30,9 @@ Building a better future, one line of code at a time.
 // · 
 %>
 
-<li 
+<li
     id="<%= dom_id(@resource, @scope_key) %>"
-    class="lesli-items-tasks-item is-flex mt-3 mb-3 <%= "lesli-items-tasks-task-done" if @resource.done %>">
+    class="lesli-items-tasks-item rounded-xl border transition-colors <%= @resource.done ? "lesli-items-tasks-task-done cursor-not-allowed border-slate-200 bg-slate-50" : "border-slate-200 hover:border-slate-300 hover:bg-slate-50" %>">
     <%= form_with(
             url: helpers.polymorphic_path(@resource),
             method: :patch,
@@ -40,16 +40,21 @@ Building a better future, one line of code at a time.
             local: true
         ) do |form| %>
         <%= form.hidden_field :id, value: @resource.id %>
-        <%= form.button type: "submit", disabled: @resource.done? do %>
-            <p class="icon-text">
-                <span class="icon">
-                    <span class="material-symbols-outlined">
-                        <%= @resource.done ? "check_box"  : "check_box_outline_blank" %>
-                    </span>
+        <%= form.button(
+            type: "submit",
+            disabled: @resource.done?,
+            class: "flex w-full cursor-pointer items-center rounded-xl px-4 py-3 text-left text-sm font-medium text-slate-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--lesli-color-primary)] disabled:cursor-not-allowed"
+        ) do %>
+            <span class="flex min-w-0 items-center gap-3">
+                <span
+                    class="material-symbols-outlined shrink-0 text-xl leading-none <%= @resource.done ? "text-slate-400" : "text-[var(--lesli-color-primary)]" %>"
+                    aria-hidden="true">
+                    <%= @resource.done ? "check_box" : "check_box_outline_blank" %>
                 </span>
-                <span><%= @resource.title %></span>
-            </p>
+                <span class="min-w-0 break-words <%= "text-slate-500 line-through" if @resource.done %>">
+                    <%= @resource.title %>
+                </span>
+            </span>
         <% end %>
     <% end %>
 </li>
-

data/lib/lesli_view/items/tasks.html.erb

@@ -29,16 +29,9 @@ Building a better future, one line of code at a time.
 // · ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~
 // · 
 %>
-<style>
-.lesli-items-tasks {
-    .lesli-items-tasks-tasks-task-done p {
-        text-decoration: line-through;
-        opacity: 0.6;
-        cursor: not-allowed;
-    }
-}
-</style>
-<article class="lesli-items-tasks box p-6" id="<%= dom_id(@resource, :tasks) %>">
+<article
+    class="lesli-items-tasks rounded-2xl border border-slate-200 bg-white p-6 shadow-sm"
+    id="<%= dom_id(@resource, :tasks) %>">
     <div class="lesli-items-tasks-form">
         <% task_class = "#{@resource.class.name.deconstantize}::Items::Task".constantize %>
         <% scope_key = ActiveSupport::Inflector.underscore(task_class.name).tr("/", "_") %>
@@ -54,13 +47,15 @@ Building a better future, one line of code at a time.
             <%= form.field_control_submit "Add task" %>
         <% end %>
     </div>
-    <hr>
+    <hr class="my-6 border-0 border-t border-slate-200">
+
     <div class="lesli-items-tasks-container">
-        <ul id="<%="#{scope_key}-lesli-items-tasks-list"%>">
+        <ul
+            id="<%= "#{scope_key}-lesli-items-tasks-list" %>"
+            class="m-0 list-none space-y-3 p-0">
             <% @resource.tasks.each do |task| %>
                 <%= render(LesliView::Items::Task.new(task, scope_key)) %>
             <% end %>
         </ul>
     </div>
 </article>
-

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/partials/engine_spec.html.erb

@@ -1,51 +1,38 @@
-
-<style>
-    .partial-engine-spec div {
-        border-bottom: 1px solid silver;
-    }
-    .partial-engine-spec li {
-        font-size: 1.1rem;
-        margin-left: .4rem;
-    }
-</style>
 <div class="partial-engine-spec">
-    <div class="mb-3 pb-2">
-        <h5 class="is-title is-size-5 has-text-weight-semibold"><%= engine[:name] %></h5>
-        <p class="is-size-5"><%= engine[:summary] %></p>
+    <div class="mb-4 border-b border-slate-300 pb-3">
+        <h5 class="text-xl font-semibold text-slate-800"><%= engine[:name] %></h5>
+        <p class="mt-1 text-xl leading-7 text-slate-600"><%= engine[:summary] %></p>
     </div>
-    <ul>
-        <li class="mb-2">
-            <span class="icon-text">
-                <span class="material-symbols md-24">
-                    pest_control
-                </span>
-                <span></span>
+
+    <ul class="m-0 list-none space-y-2 p-0">
+        <li class="ml-1.5 flex items-center gap-2 text-[1.1rem] text-slate-600">
+            <span class="material-symbols shrink-0 text-2xl leading-none text-slate-400" aria-hidden="true">
+                pest_control
             </span>
-            Version: <%= engine[:version] %>
+            <span>Version: <%= engine[:version] %></span>
         </li>
-        <li class="mb-2">
-            <span class="icon-text">
-                <span class="material-symbols md-24">
-                    schedule
-                </span>
-                <span></span>
+
+        <li class="ml-1.5 flex items-center gap-2 text-[1.1rem] text-slate-600">
+            <span class="material-symbols shrink-0 text-2xl leading-none text-slate-400" aria-hidden="true">
+                schedule
             </span>
-            Build: <%= LesliDate::Formatter.new(Time.at(engine[:build].to_i)).date_time %>
+            <span>Build: <%= LesliDate::Formatter.new(Time.at(engine[:build].to_i)).date_time %></span>
         </li>
-        <li>
-            <span class="icon-text">
-                <span class="material-symbols md-24">
-                    library_books
-                </span>
-                <span></span>
+
+        <li class="ml-1.5 flex min-w-0 items-center gap-2 text-[1.1rem] text-slate-600">
+            <span class="material-symbols shrink-0 text-2xl leading-none text-slate-400" aria-hidden="true">
+                library_books
+            </span>
+            <span class="min-w-0 break-all">
+                <%= link_to_if(
+                    engine.dig(:metadata, "documentation_uri"),
+                    engine.dig(:metadata, "documentation_uri"),
+                    engine.dig(:metadata, "documentation_uri"),
+                    target: "_blank",
+                    rel: "noopener noreferrer",
+                    class: "font-sans text-[var(--lesli-color-primary)] underline-offset-4 hover:underline focus-visible:rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--lesli-color-primary)]"
+                ) %>
             </span>
-            <%= link_to_if(
-                engine.dig(:metadata, "documentation_uri"),
-                engine.dig(:metadata, "documentation_uri"), 
-                engine.dig(:metadata, "documentation_uri"), 
-                target: "_blank",
-                class: "is-family-sans-serif"
-            ) %>
         </li>
     </ul>
 </div>

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.4"
+    BUILD = ""
 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>

data/lib/lesli_view/widgets/chart.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 =begin
 
 Lesli
@@ -33,12 +35,53 @@ Building a better future, one line of code at a time.
 module LesliView
     module Widgets
         class Chart < ViewComponent::Base
+            CHART_COMPONENTS = {
+                bar: LesliView::Charts::Bar,
+                line: LesliView::Charts::Line
+            }.freeze
+
             attr_reader :title, :data, :type
 
-            def initialize(title=nil, data=nil, type: :bar)
+            def initialize(title = nil, data = nil, type: :bar)
                 @title = title
-                @data = data
-                @type = type
+                @data = normalize_data(data)
+                @type = normalize_type(type)
+            end
+
+            def chart_component
+                CHART_COMPONENTS.fetch(type)
+            end
+
+            def labels
+                data.map(&:first)
+            end
+
+            def dataset
+                data.map(&:last)
+            end
+
+            def data?
+                data.any?
+            end
+
+            def title_id
+                @title_id ||= "lesli-chart-widget-title-#{object_id}"
+            end
+
+            private
+
+            def normalize_data(value)
+                return [] if value.nil?
+                return value.to_a if value.respond_to?(:to_a)
+
+                []
+            end
+
+            def normalize_type(value)
+                value = value.to_s.downcase.to_sym
+                return value if CHART_COMPONENTS.key?(value)
+
+                :bar
             end
         end
     end

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

@@ -1,16 +1,18 @@
-<style>
-.lesli-view-widgets-count p {
-    font-size: 4rem;
-    font-weight: 600;
-}
-</style>
-<div class="lesli-view-widgets-count">
-    <div class="box">
-        <h6 class="is-title is-size-6 mb-0">
-            <%= title %>
-        </h6>
-        <p class="has-text-centered">
-            <%= number %>
-        </p>
+<section
+    class="lesli-count-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('metrics.count', default: 'Count') %>"<% end %>>
+
+    <div class="flex h-full min-h-40 flex-col">
+        <% if title.present? %>
+            <h2 id="<%= title_id %>" class="text-sm font-medium leading-5 text-slate-500">
+                <%= title %>
+            </h2>
+        <% end %>
+
+        <div class="flex flex-1 items-center justify-center py-4">
+            <p class="break-all text-center text-5xl font-semibold leading-none tracking-tight text-sky-600 tabular-nums sm:text-6xl">
+                <%= display_number %>
+            </p>
+        </div>
     </div>
-</div>
+</section>

data/lib/lesli_view/widgets/count.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 =begin
 
 Lesli
@@ -35,10 +37,20 @@ module LesliView
         class Count < ViewComponent::Base
             attr_reader :title, :number
 
-            def initialize(title=nil, number=nil)
+            def initialize(title = nil, number = nil)
                 @title = title
                 @number = number
             end
+
+            def display_number
+                return "—" if number.nil?
+
+                number
+            end
+
+            def title_id
+                @title_id ||= "lesli-count-title-#{object_id}"
+            end
         end
     end
 end