lesli_view 1.1.2 → 1.1.3

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

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

@@ -1,22 +1,24 @@
-<style>
-.lesli-view-widgets-date p.date {
-    font-weight: 200;
-    font-size: 4.2rem;
-}
+<section
+    class="lesli-date-widget h-full rounded-2xl border border-slate-200 bg-white p-4 shadow-sm"
+    aria-label="<%= accessible_date %>">
 
-.lesli-view-widgets-date p.month {
-    font-weight: 300;
-    font-size: 1.8rem;
-    color: #d2d2d2;
-}
-</style>
-<div class="lesli-view-widgets-date">
-    <div class="box has-text-centered">
-        <p class="date">
-            <%= @date.day %>
-        </h6>
-        <p class="month">
-            <%= @date.strftime("%B") %>
-        </p>
-    </div>
-</div>
+    <time
+        class="flex h-full min-h-40 items-center justify-center"
+        datetime="<%= date.iso8601 %>">
+
+        <span class="text-6xl font-light leading-none tracking-tight text-sky-600">
+            <%= date.day %>
+        </span>
+
+        <span class="mx-5 h-20 w-px shrink-0 bg-slate-200 sm:mx-6" aria-hidden="true"></span>
+
+        <span class="min-w-0 text-left">
+            <span class="block text-lg font-semibold capitalize tracking-tight text-slate-700">
+                <%= weekday_name %>
+            </span>
+            <span class="mt-1 block text-base font-medium capitalize text-slate-400">
+                <%= month_name %> <%= date.year %>
+            </span>
+        </span>
+    </time>
+</section>

data/lib/lesli_view/widgets/date.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 =begin
 
 Lesli
@@ -35,8 +37,31 @@ module LesliView
         class Date < ViewComponent::Base
             attr_reader :date
 
-            def initialize(date = Time.now)
-                @date = date
+            def initialize(date = Time.current)
+                @date = normalize_date(date) || ::Date.current
+            end
+
+            def month_name
+                I18n.l(date, format: "%B")
+            end
+
+            def weekday_name
+                I18n.l(date, format: "%A")
+            end
+
+            def accessible_date
+                I18n.l(date, format: :long)
+            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
         end
     end

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

@@ -1,44 +1,46 @@
-<style>
+<section
+    class="lesli-weather-widget h-full rounded-2xl border border-slate-200 bg-white p-4 shadow-sm"
+    aria-label="<%= accessible_label %>">
 
-.lesli-view-widgets-weather .box p.temperature {
-    font-weight: 200;
-    font-size: 4.2rem;
-}
+    <%
+    # Give each common weather family its own restrained accent color.
+    icon_colors, halo_color = case icon.to_s
+    when /sun|clear/
+        ["from-amber-50 to-yellow-100 text-amber-500 shadow-amber-100", "bg-amber-200"]
+    when /cloud|fog/
+        ["from-slate-50 to-slate-200 text-slate-500 shadow-slate-200", "bg-slate-300"]
+    when /snow/
+        ["from-cyan-50 to-sky-100 text-cyan-500 shadow-cyan-100", "bg-cyan-200"]
+    else
+        ["from-sky-50 to-blue-100 text-sky-600 shadow-sky-100", "bg-sky-200"]
+    end
+    %>
 
-.lesli-view-widgets-weather .box p.city {
-    font-weight: 300;
-    font-size: 1.8rem;
-    color: #d2d2d2;
-}
+    <div class="flex h-full min-h-40 items-center justify-center">
+        <div class="shrink-0 text-6xl font-light leading-none tracking-tight text-sky-600">
+            <%= display_temperature %>
+        </div>
 
-.lesli-view-widgets-weather .box .icon {
-    width: 50px;
-    height: 50px;
-    float: right;
-    font-size: 1.8rem;
-    margin: 20px 20px 0 0;
-    border-radius: 50%;    
-}
+        <div class="mx-5 h-20 w-px shrink-0 bg-slate-200 sm:mx-6" aria-hidden="true"></div>
 
-.lesli-view-widgets-weather .box .icon.sun {
-    color: white;
-    background: #ffcd41;
-    box-shadow: rgba(255, 255, 0, 0.2) 0 0 0 17px;
-}
+        <div class="flex min-w-0 items-center gap-3">
+            <div class="relative flex h-14 w-14 shrink-0 items-center justify-center">
+                <span
+                    class="absolute inset-0 rounded-full opacity-30 blur-sm motion-safe:animate-pulse <%= halo_color %>"
+                    aria-hidden="true"></span>
+                <span class="relative flex h-14 w-14 items-center justify-center rounded-full bg-gradient-to-br shadow-lg <%= icon_colors %>">
+                    <span class="material-symbols text-3xl leading-none" aria-hidden="true"><%= icon %></span>
+                </span>
+            </div>
 
-.lesli-view-widgets-weather .box .icon.cloud {
-    color: white;
-    background: #7cc8ff;
-    box-shadow: rgba(124, 200, 255, 0.25) 0 0 0 17px;
-}
-
-</style>
-<div class="lesli-view-widgets-weather">
-    <div class="box">
-        <span class="icon cloud">
-            <span class="ri-showers-line"></span>
-        </span>
-        <p class="temperature">26º</p>
-        <p class="city">Guatemala</p>
+            <div class="min-w-0">
+                <p class="truncate text-lg font-semibold tracking-tight text-slate-700">
+                    <%= location %>
+                </p>
+                <p class="mt-1 truncate text-sm font-medium text-slate-400">
+                    <%= condition_text %> · °<%= unit %>
+                </p>
+            </div>
+        </div>
     </div>
-</div>
+</section>

data/lib/lesli_view/widgets/weather.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 =begin
 
 Lesli
@@ -33,10 +35,47 @@ Building a better future, one line of code at a time.
 module LesliView
     module Widgets
         class Weather < ViewComponent::Base
-            attr_reader :date
+            attr_reader :date, :temperature, :location, :condition, :unit, :icon
 
-            def initialize(date = Time.now)
+            def initialize(
+                date = Time.current,
+                temperature: 26,
+                location: "Guatemala",
+                condition: nil,
+                unit: "C",
+                icon: "rainy"
+            )
                 @date = date
+                @temperature = temperature
+                @location = location
+                @condition = condition
+                @unit = normalize_unit(unit)
+                @icon = icon.presence || "rainy"
+            end
+
+            def display_temperature
+                "#{temperature.presence || "—"}°"
+            end
+
+            def condition_text
+                condition.presence || I18n.t("weather.conditions.showers", default: "Showers")
+            end
+
+            def accessible_label
+                [
+                    location.presence,
+                    "#{display_temperature}#{unit}",
+                    condition_text
+                ].compact.join(", ")
+            end
+
+            private
+
+            def normalize_unit(value)
+                value = value.to_s.upcase
+                return value if %w[C F].include?(value)
+
+                "C"
             end
         end
     end

data/readme.md

@@ -1,42 +1,174 @@
-<div align="center" class="documentation-header">
-    <img width="100" alt="LesliView logo" src="./docs/images/view-logo.svg" />
-    <h3 align="center">A Rails ViewComponent-based UI library for The Lesli Framework.</h3>
+<div align="center">
+    <h1 align="center">
+        <img width="100" alt="LesliView" src="./docs/images/view-logo.svg" />
+    </h1>
+    <h3 align="center">Reusable Rails components and form builders for the Lesli Framework.</h3>
 </div>
 
 <br />
-<hr/>
 
-<div align="center" class="documentation-statics">
-    <a target="blank" href="https://rubygems.org/gems/lesli_view">
+<div align="center">
+    <a target="_blank" href="https://github.com/LesliTech/LesliView/actions/workflows/main.yml">
+        <img
+            alt="LesliView test status"
+            src="https://img.shields.io/github/actions/workflow/status/LesliTech/LesliView/main.yml?branch=main&style=for-the-badge&logo=github&label=tests">
+    </a>
+    <a target="_blank" href="https://rubygems.org/gems/lesli_view">
         <img alt="Gem Version" src="https://img.shields.io/gem/v/lesli_view?style=for-the-badge&logo=ruby">
     </a>
+    <a target="_blank" href="https://codecov.io/github/LesliTech/LesliView">
+        <img alt="Codecov" src="https://img.shields.io/codecov/c/github/LesliTech/LesliView?style=for-the-badge&logo=codecov">
+    </a>
+    <a target="_blank" href="https://sonarcloud.io/project/overview?id=LesliTech_LesliView">
+        <img alt="Sonar Quality Gate" src="https://img.shields.io/sonar/quality_gate/LesliTech_LesliView?server=https%3A%2F%2Fsonarcloud.io&style=for-the-badge&logo=sonarqubecloud&label=Quality">
+    </a>
 </div>
 
-<hr/>
 <br />
 
+---
+
+<br />
+
+## Introduction
+
+LesliView is the official user-interface library for the [Lesli Framework](https://github.com/LesliTech/Lesli).
+
+It combines ViewComponent-powered building blocks, Rails form builders, and shared interface patterns to help Lesli applications remain consistent, reusable, and maintainable.
+
+<br />
+
+## Features
+
+- Reusable Rails ViewComponents
+- Form builders with consistent fields, inputs, and fieldsets
+- Application layout and navigation components
+- Buttons, tables, avatars, and empty states
+- Charts, calendars, counters, dates, and weather widgets
+- Tasks, discussions, activities, and attachment interfaces
+- Shared Tailwind-based presentation for Lesli applications
+
+<br />
+
+## Installation
 
-### Quick start
+Add LesliView to the Rails application:
 
 ```shell
-# Add LesliAdmin engine gem
 bundle add lesli_view
 ```
 
-### Documentation
-* [website](https://www.lesli.dev/)
-* [documentation](https://www.lesli.dev/gems/view/)
+Bundler installs ViewComponent and the other required runtime dependencies automatically.
+
+<br />
+
+## Usage
+
+### Render a component
+
+Render LesliView components from any Rails template:
+
+```erb
+<%= render(LesliView::Layout::Container.new("tickets")) do %>
+    <%= render(LesliView::Components::Header.new("Tickets")) %>
+<% end %>
+```
+
+### Render an element
+
+Elements provide smaller interface building blocks:
+
+```erb
+<%= render(
+    LesliView::Elements::Button.new(
+        "Create ticket",
+        icon: "add",
+        solid: true,
+        url: new_ticket_path
+    )
+) %>
+```
+
+### Use the form builder
+
+Pass the LesliView builder to Rails form helpers:
+
+```erb
+<%= form_with(
+    model: @ticket,
+    builder: LesliView::Forms::Builder
+) do |form| %>
+    <%= form.field_control_text :subject %>
+    <%= form.field_control_textarea :description %>
+    <%= form.field_control_submit "Save ticket" %>
+<% end %>
+```
+
+<br />
+
+## Library
+
+LesliView organizes its interface building blocks into focused groups:
+
+- **Charts:** bar, line, and general chart rendering
+- **Components:** headers, panels, tabs, timelines, and toolbars
+- **Elements:** avatars, buttons, empty states, and tables
+- **Forms:** standard and horizontal builders, fields, inputs, and fieldsets
+- **Items:** actions, activities, attachments, discussions, and tasks
+- **Layouts:** shared application containers
+- **Partials:** reusable engine information
+- **Widgets:** calendars, charts, counters, dates, and weather
+
+Detailed examples and available options are maintained in the [LesliView documentation](https://www.lesli.dev/gems/view/).
+
+<br />
+
+## Development
+
+Clone the repository and install its dependencies:
+
+```shell
+git clone https://github.com/LesliTech/LesliView.git
+cd LesliView
+bundle install
+```
+
+To develop LesliView inside a Rails workspace, reference the local source from the host application's `Gemfile`:
+
+```ruby
+gem "lesli_view", path: "gems/LesliView"
+```
+
+### Tests
+
+Run the default test task from the LesliView directory:
+
+```shell
+bundle exec rake
+```
+
+<br />
+
+## Documentation
+
+- [Lesli website](https://www.lesli.dev/)
+- [Documentation](https://www.lesli.dev/gems/view/)
+- [Release notes](https://github.com/LesliTech/LesliView/releases)
+- [Issue tracker](https://github.com/LesliTech/LesliView/issues)
+- [Source code](https://github.com/LesliTech/LesliView)
+
+<br />
 
+## Community
 
-### Connect with Lesli
+- [X: @LesliTech](https://x.com/LesliTech)
+- [hello@lesli.tech](mailto:hello@lesli.tech)
+- [https://www.lesli.tech](https://www.lesli.tech)
 
-* [X: @LesliTech](https://x.com/LesliTech)
-* [Email: hello@lesli.tech](hello@lesli.tech)
-* [Website: https://www.lesli.tech](https://www.lesli.tech)
+<br />
 
+## License
 
-### License
--------
 Copyright (c) 2026, Lesli Technologies, S. A.
 
 This program is free software: you can redistribute it and/or modify
@@ -50,19 +182,16 @@ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 GNU General Public License for more details.
 
 You should have received a copy of the GNU General Public License
-along with this program. If not, see http://www.gnu.org/licenses/.
+along with this program. If not, see [https://www.gnu.org/licenses/](https://www.gnu.org/licenses/).
 
-<br />
-<hr />
-<br />
-<br />
+The complete license text is available in the [license file](./license).
 
-<div align="center" class="has-text-centered">
-    <img width="200" alt="Lesli logo" src="https://cdn.lesli.tech/lesli/brand/app-logo.svg" />
-    <h3 align="center" class="mt-0">
-        The Open-Source SaaS Development Framework for Ruby on Rails.
-    </h3>
-</div>
+---
 
 <br />
 <br />
+
+<div align="center">
+    <img width="80" alt="Lesli icon" src="https://cdn.lesli.tech/lesli/brand/app-icon.svg" />
+    <h3 align="center">The Open-Source SaaS Development Framework for Ruby on Rails.</h3>
+</div>

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: lesli_view
 version: !ruby/object:Gem::Version
-  version: 1.1.2
+  version: 1.1.3
 platform: ruby
 authors:
 - The Lesli Development Team
@@ -54,7 +54,6 @@ files:
 - lib/lesli_view/charts/line.rb
 - lib/lesli_view/components/header.html.erb
 - lib/lesli_view/components/header.rb
-- lib/lesli_view/components/header.scss
 - lib/lesli_view/components/panel.html.erb
 - lib/lesli_view/components/panel.rb
 - lib/lesli_view/components/panel.scss
@@ -65,24 +64,27 @@ files:
 - lib/lesli_view/components/timeline.html.erb
 - lib/lesli_view/components/timeline.rb
 - lib/lesli_view/components/timeline.scss
+- lib/lesli_view/components/toolbar.css
 - lib/lesli_view/components/toolbar.html.erb
 - lib/lesli_view/components/toolbar.rb
-- lib/lesli_view/components/toolbar.scss
 - lib/lesli_view/elements/avatar.html.erb
 - lib/lesli_view/elements/avatar.rb
 - lib/lesli_view/elements/avatar.scss
+- lib/lesli_view/elements/button.css
 - lib/lesli_view/elements/button.html.erb
 - lib/lesli_view/elements/button.rb
 - lib/lesli_view/elements/empty.html.erb
 - lib/lesli_view/elements/empty.rb
+- lib/lesli_view/elements/table-chart.html.erb
+- lib/lesli_view/elements/table.css
 - lib/lesli_view/elements/table.html.erb
 - lib/lesli_view/elements/table.rb
-- lib/lesli_view/elements/table.scss
 - lib/lesli_view/engine.rb
 - lib/lesli_view/forms/builder.rb
 - lib/lesli_view/forms/builder_horizontal.rb
 - lib/lesli_view/forms/fields.rb
 - lib/lesli_view/forms/fieldset.rb
+- lib/lesli_view/forms/form.css
 - lib/lesli_view/forms/form.scss
 - lib/lesli_view/forms/inputs.rb
 - lib/lesli_view/items/actions.html.erb