lesli_view 1.1.2 → 1.1.4

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,201 @@
-<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 />
 
+## Introduction
+
+LesliView is the official user-interface library for the [Lesli Framework](https://github.com/LesliTech/Lesli). It packages the framework's shared interface patterns as ViewComponent-powered components, Rails form builders, and domain-oriented views.
+
+Use LesliView to build consistent server-rendered interfaces without recreating common layouts, controls, forms, and application states in every Lesli engine.
+
+<br />
+
+## Why LesliView?
+
+LesliView provides:
+
+- A shared visual language across Lesli applications and engines
+- Composable, testable components built with ViewComponent
+- Rails-native form builders with consistent labels, controls, messages, and actions
+- Reusable views for common product concepts such as activities, attachments, discussions, and tasks
+- Responsive presentation based on Tailwind CSS utility classes
+- Accessible defaults for labels, button states, navigation, and page actions
+
+<br />
+
+## Quick Start
+
+### Requirements
+
+The current development baseline is:
+
+- Ruby 3.2 or newer
+- Rails 8.1
+- LesliAssets, configured in the host application's asset build
+
+ViewComponent and Lexxy are installed as runtime dependencies of LesliView.
+
+### Install with Lesli
+
+LesliView and LesliAssets are installed automatically with the main `lesli` gem. No additional gem or asset configuration is required in a standard Lesli application.
 
-### Quick start
+### Install in another Rails application
+
+Add LesliView to the application:
 
 ```shell
-# Add LesliAdmin engine gem
 bundle add lesli_view
 ```
 
-### Documentation
-* [website](https://www.lesli.dev/)
-* [documentation](https://www.lesli.dev/gems/view/)
+For the complete Lesli presentation layer, also install the shared assets package:
+
+```shell
+bundle add lesli_assets
+```
+
+The host application must configure LesliAssets in its asset build so the Lesli styles and icon fonts are available before rendering the components.
+
+<br />
+
+## Usage
+
+### Build a page header
+
+Compose a layout and header directly from an ERB template:
+
+```erb
+<%= render LesliView::Layout::Container.new("tickets") do %>
+    <%= render LesliView::Components::Header.new(
+        "Tickets",
+        "Manage customer requests and follow-up work.",
+        new_path: new_ticket_path,
+        new_label: "Create ticket"
+    ) %>
+<% end %>
+```
+
+### Render an action
+
+Elements provide focused interface primitives with consistent behavior and styling:
+
+```erb
+<%= render LesliView::Elements::Button.new(
+    "Create ticket",
+    icon: "add",
+    url: new_ticket_path
+) %>
+```
+
+### Build a form
+
+Pass the LesliView builder to the standard 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 public interface into focused groups:
+
+| Group | Included building blocks |
+| --- | --- |
+| 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 |
+
+See the [LesliView documentation](https://www.lesli.dev/gems/view/) for component options and additional examples.
+
+- [Installation](https://www.lesli.dev/gems/view/about/installation)
+- [Components](https://www.lesli.dev/gems/view/components)
+- [Elements](https://www.lesli.dev/gems/view/elements)
+- [Forms](https://www.lesli.dev/gems/view/forms)
+- [Charts](https://www.lesli.dev/gems/view/charts)
+- [Widgets](https://www.lesli.dev/gems/view/widgets)
+
+<br />
 
-### Connect with Lesli
+## Development
 
-* [X: @LesliTech](https://x.com/LesliTech)
-* [Email: hello@lesli.tech](hello@lesli.tech)
-* [Website: https://www.lesli.tech](https://www.lesli.tech)
+Clone the repository and install its dependencies:
 
+```shell
+git clone https://github.com/LesliTech/LesliView.git
+cd LesliView
+bundle install
+```
+
+Run the default test suite:
+
+```shell
+bundle exec rake
+```
+
+To develop LesliView inside a local Lesli workspace, reference the repository from the host application's `Gemfile`:
+
+```ruby
+gem "lesli_view", path: "gems/LesliView"
+```
+
+Then run `bundle install` from the host application so changes to the local gem are loaded immediately.
+
+<br />
+
+## Documentation
+
+- [Lesli website](https://www.lesli.dev/)
+- [LesliView documentation](https://www.lesli.dev/gems/view/)
+- [Releases and changelog](https://github.com/LesliTech/LesliView/releases)
+- [Issue tracker](https://github.com/LesliTech/LesliView/issues)
+- [Source code](https://github.com/LesliTech/LesliView)
+
+<br />
+
+## Community
+
+- [X: @LesliTech](https://x.com/LesliTech)
+- [hello@lesli.tech](mailto:hello@lesli.tech)
+- [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 +209,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.4
 platform: ruby
 authors:
 - The Lesli Development Team
@@ -54,49 +54,45 @@ 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
 - lib/lesli_view/components/tabs.html.erb
 - lib/lesli_view/components/tabs.rb
-- lib/lesli_view/components/tabs.scss
-- lib/lesli_view/components/tabs_spec.rb
 - 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
 - lib/lesli_view/items/actions.rb
 - lib/lesli_view/items/activities.html.erb
 - lib/lesli_view/items/activities.rb
-- lib/lesli_view/items/activities.scss
 - lib/lesli_view/items/attachments.html.erb
 - lib/lesli_view/items/attachments.rb
 - lib/lesli_view/items/discussion.html.erb
 - lib/lesli_view/items/discussion.rb
 - lib/lesli_view/items/discussions.html.erb
 - lib/lesli_view/items/discussions.rb
-- lib/lesli_view/items/discussions.scss
 - lib/lesli_view/items/task.html.erb
 - lib/lesli_view/items/task.rb
 - lib/lesli_view/items/tasks.html.erb

data/lib/lesli_view/components/header.scss

@@ -1,69 +0,0 @@
-/*
-
-Lesli
-
-Copyright (c) 2023, Lesli Technologies, S. A.
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-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/.
-
-Lesli · Ruby on Rails SaaS development platform.
-
-Made with ♥ by https://www.lesli.tech
-Building a better future, one line of code at a time.
-
-@contact  hello@lesli.tech
-@website  https://www.lesli.tech
-@license  GPLv3 http://www.gnu.org/licenses/gpl-3.0.en.html
-
-// · ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~
-// ·  
-*/
-
-
-// ·  
-@use "lesli-css/sass/helpers/breakpoint";
-
-
-// · 
-.lesli-element-header {
-    margin: 30px auto 30px;
-
-    .lesli-element-header-items {
-        gap: 0.5rem;
-        display: flex;
-        align-items: center;
-    }
-}
-
-
-// ·  
-@include breakpoint.lesli-breakpoint-mobile {
-    section.lesli-element-header {
-        flex-direction: column;
-
-        .lesli-element-header-title {
-            width: 100%;
-            margin-bottom: 1rem;
-        }
-    }
-}
-
-@include breakpoint.lesli-breakpoint-small {
-    section.lesli-element-header {
-        .lesli-element-header-title,
-        .lesli-element-header-items {
-            justify-content: center !important;
-        }
-    }
-}

data/lib/lesli_view/components/tabs.scss

@@ -1,49 +0,0 @@
-
-.lesli-tabs.is-vertical {
-    display: flex;
-
-    .tabs {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-
-        ul {
-            display: flex;
-            flex-direction: column;
-            border-bottom: none;
-            border-right: 1px solid #dbdbdb;
-            margin-right: 1.5rem;
-            min-width: 150px;
-        }
-
-        li {
-            width: 100%;
-            margin-bottom: 0.5rem;
-
-            &:last-child {
-                margin-bottom: 0;
-            }
-
-            a {
-                justify-content: flex-start;
-                padding: 0.75em 1em;
-                border-bottom: none;
-                border-right: 2px solid transparent;
-            }
-
-            &.is-active a {
-                border-right-color: var(--color-primary);
-                border-bottom-color: transparent;
-            }
-        }
-
-        .tab-content {
-            flex-grow: 1;
-            padding: 1rem;
-        }
-    }
-
-    .tab-items {
-        flex: 1;
-    }
-}