lesli_view 0.1.0 → 1.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 19c9e421da50c64fc6a723625b31a04840e5480a9334ce506d453f70fe722e6f
-  data.tar.gz: e93732acb2d29e185d74e34b0e6e280598b63fdbd54928f18529d33bccbffed3
+  metadata.gz: 31a5258e0bd9bdf4d2872495e1f0d7b3b6220620173f0f384409143f13d38c09
+  data.tar.gz: 6c23c359228c5e18e6ef49d29b3e2ef1bc766a95ec871e18767fa903b2f66e36
 SHA512:
-  metadata.gz: 51d1dd1d6c660d63047174e2f1898c1972b995f8391b06a929d9abe341dbea183cb69118df8ce5f255282ec33aef993f18cb6db1c9dc8b2203f338a44ffd5c0c
-  data.tar.gz: 8274a450b83534a9add823c205d2aa295522bfda1d08b88fd024915cb6e00973d19eb2a861d26c478ae861a83073dc77efb24f04cf85b99bcae2bad74fce6a35
+  metadata.gz: 1387bd68d4f9ddff6fa36b567263ef2c529561fa4fe80c758379baaba3cca5f67e57b963a1638a6ecd00df96fa0078c44e57a7c594132afbd6e58fd0b3816ce8
+  data.tar.gz: edcb88a38f0517edd977dd5970be57a4b10e3026e723952df110ed2742c5457b3d854c0c09bef67425990dfaf9bbdc11bbc8e27c0cf332636cb996480af9b728

data/lib/lesli_view/charts/bar.rb

@@ -0,0 +1,41 @@
+=begin
+
+Lesli
+
+Copyright (c) 2025, 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 Framework.
+
+Made with ♥ by LesliTech
+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
+
+// · ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~
+// · 
+=end
+
+module LesliView
+    module Charts
+        class Bar < General
+            def type
+                "bar"
+            end
+        end
+    end
+end

data/lib/lesli_view/charts/general.html.erb

@@ -0,0 +1,94 @@
+<script>
+document.addEventListener("turbo:load", () => {
+    const chartId = "<%= id %>";
+    const chartElement = document.getElementById(chartId);
+
+    if (!chartElement) {
+        console.warn("Chart element not found:", chartId);
+        return;
+    }
+
+    // Clear previous chart instance (important for Turbo re-renders)
+    chartElement.innerHTML = "";
+
+    var options = {
+        series: <%= raw(series.to_json) %>,
+        labels: <%= raw(labels.to_json) %>,
+        grid: {
+            show: false,
+            padding: { top: 0, right: 0, bottom: 0, left: 0 }
+        },
+        chart: {
+            type: "<%= type %>",
+            height: "<%= height %>",
+            toolbar: { show: false },
+            events: {
+                markerClick: function(event, chartContext, { seriesIndex, dataPointIndex }) {
+                    emit("markerClick", { seriesIndex, dataPointIndex });
+                }
+            }
+        },
+        legend: {
+            show: true,
+            position: "top",
+            horizontalAlign: "center"
+        },
+        plotOptions: {
+            bar: {
+                borderRadius: 6,
+                borderRadiusApplication: 'end',
+                dataLabels: {
+                    position: 'top', // top, center, bottom
+                },
+            }
+        },
+        dataLabels: { enabled: true, offsetY: 20 },
+        stroke: {
+            show: true,
+            curve: "smooth",
+            lineCap: "round"
+        },
+        xaxis: {
+            categories: <%= raw(labels.to_json) %>,
+            tickPlacement: "between",
+            labels: {
+                show: true,
+                rotate: -65,
+                rotateAlways: false,
+                trim: false,
+                offsetY: 5,
+                style: { fontSize: "15px" }
+            }
+        },
+        yaxis: { show: true }
+    };
+
+    // Overrides for compact view
+    <% if compact %>
+        options.chart.sparkline = { enabled: true };
+
+        <% if type == "bar" %>
+            options.dataLabels.formatter= function (value, { seriesIndex, dataPointIndex, w }) {
+                const label = w.globals.labels[dataPointIndex]; 
+                return `${label}: ${value}`;
+            }
+        <% end %>
+    <% end %>
+
+    const chart = new ApexCharts(chartElement, options);
+    chart.render()
+});
+</script>
+
+<div class="lesli-charts lesli-charts-<%= type %> section box mb-0 p-0 pt-1">
+
+    <% if title.present? %>
+        <%= tag.h3(title, class: (compact ? "is-size-7 has-text-centered" : "ml-2")) %>
+    <% end %>
+
+    <% if subtitle.present? %>
+        <p class="ml-2"><b><%= subtitle %></b></p>
+    <% end %>
+
+    <div id="<%= id %>"></div>
+</div>

data/lib/lesli_view/charts/general.rb

@@ -0,0 +1,71 @@
+=begin
+
+Lesli
+
+Copyright (c) 2025, 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 Framework.
+
+Made with ♥ by LesliTech
+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
+
+// · ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~
+// · 
+=end
+
+module LesliView
+    module Charts
+        class General < ViewComponent::Base
+
+            attr_reader(
+                :id, 
+                :title, 
+                :subtitle, 
+                :labels, 
+                :series, 
+                :height, 
+                :compact
+            )
+
+            def initialize(
+                id: nil, 
+                title: nil, 
+                subtitle: nil, 
+                labels:nil, 
+                series:nil, 
+                serie: nil, 
+                height: "300px", 
+                compact: false
+            )
+                @id = id || "lesli-chart-#{rand(100)}" 
+                @title = title
+                @subtitle = subtitle
+                @labels = labels
+                @series = series || [{ name: title, data: serie }]
+                @height = height
+                @compact = compact
+            end
+
+            def type
+                nil
+            end
+        end
+    end
+end

data/lib/lesli_view/charts/line.rb

@@ -0,0 +1,41 @@
+=begin
+
+Lesli
+
+Copyright (c) 2025, 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 Framework.
+
+Made with ♥ by LesliTech
+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
+
+// · ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~
+// · 
+=end
+
+module LesliView
+    module Charts
+        class Line < General
+            def type
+                "line"
+            end
+        end
+    end
+end

data/lib/lesli_view/{element → components}/header.html.erb

@@ -1,9 +1,12 @@
 <section class="lesli-element-header is-flex">
     <div class="lesli-element-header-title is-flex is-align-items-center">
         <% if back %>
-            <button class="button is-info is-outlined mr-4" onclick="history.back()">
+            <%= link_to(
+                back || request.referer || root_path, 
+                class: "button is-info is-outlined mr-4",
+                data: { turbo_frame: '_top' }) do %>
                 <span class="material-icons">arrow_back</span>
-            </button>
+            <% end %>
         <% end %>
         <% if title.present? %>
             <h1 class="subtitle is-size-3"><%= title %></h1>

data/lib/lesli_view/{element → components}/header.rb

@@ -33,7 +33,7 @@ Building a better future, one line of code at a time.
 =end
 
 module LesliView
-    module Element
+    module Components
         class Header < ViewComponent::Base
             attr_reader :title, :back
 

data/lib/lesli_view/components/header.scss

@@ -0,0 +1,69 @@
+/*
+
+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/panel.html.erb

@@ -0,0 +1,37 @@
+
+<% attributes = {} %>
+<% attributes[:class] = "lesli-panel" %>
+<% attributes[:"x-data"] = "{ status: false }" %>
+<% attributes[:"x-cloak"] = true %>
+<% attributes[:"@#{id}.window"] = "status = !status" %>
+
+<%= content_tag(:section, **attributes) do %>
+    <% if overlay %>
+        <div 
+            class="lesli-panel-background overlay" 
+            x-transition
+            x-show="status"
+            x-on:click="status = !status">
+        </div>
+    <% end %>
+    <div 
+        class="lesli-panel-container box p-0"
+        x-show="status"
+        x-transition>
+        <div class="lesli-panel-header is-flex">
+            <div class="is-flex-grow-1">
+                <h5 class="is-size-5">
+                    <%= title %>
+                </h5>
+            </div>
+            <div class="hover" x-on:click="status = !status">
+                <span class="material-icons md-24">
+                    arrow_forward_ios
+                </span>
+            </div>
+        </div>
+        <div class="lesli-panel-body p-4">
+            <%= content %>
+        </div>
+    </div>
+<% end %>

data/lib/lesli_view/{element/form.rb → components/panel.rb}

@@ -33,18 +33,14 @@ Building a better future, one line of code at a time.
 =end
 
 module LesliView
-    module Element
-        class Form < ViewComponent::Base
-            attr_reader :flat, :title, :editable
-
-            def initialize(flat: false, title: nil, editable: true)
-                @flat = flat
-                @title = title
-                @editable = editable
-            end
-
-            def form_with_tag_options
-                { onsubmit: 'event.preventDefault(); submitForm();' }.map { |key, value| "#{key}=\"#{value}\"" }.join(' ').html_safe
+    module Components
+        class Panel < ViewComponent::Base
+            attr_reader :id, :title, :overlay
+        
+            def initialize(title, id="panel", overlay:true)
+                @id = id 
+                @title = title 
+                @overlay = overlay
             end
         end
     end

data/lib/lesli_view/components/panel.scss

@@ -0,0 +1,37 @@
+
+@use "lesli-css/sass/color";
+@use "lesli-css/sass/layout/scrollbar";
+
+
+section.lesli-panel {
+    
+    div.lesli-panel-background {
+        position: fixed;
+        z-index: 38;
+        height: 100%;
+        width: 100%;
+        top: 0;
+        left: 0;
+        &.overlay {
+            background: rgba(230, 230, 230, .5);
+        }
+    }
+
+    div.lesli-panel-container {
+        background-color: white;
+        position: fixed;
+        z-index: 40;
+        right: 0;
+        top: 0;
+        width: 600px;
+        height: 100%;
+        overflow-y: scroll;
+
+        @include scrollbar.lesli-scrollbar(hide);
+
+        .lesli-panel-header {
+            padding: 1rem 1rem .6rem;
+            border-bottom: 1px solid color.lesli-color(slate);
+        }
+    }
+}

data/lib/lesli_view/components/tabs.html.erb

@@ -0,0 +1,35 @@
+<div class="lesli-tabs" x-data="{ activeTab: '<%= tabs[0].tab_id %>' }">
+    <div class="tabs mb-0">
+        <ul>
+            <% tabs.each_with_index do |tab, index| %>
+                <% tab.set_tab_id(tab.tab_id, index) %>
+                <li :class="{ 'is-active': activeTab === '<%= tab.tab_id %>' }">
+                    <a @click="activeTab = '<%= tab.tab_id %>'" data-turbo="false">
+                        <% if tab.icon %>
+                            <span class="icon is-small">
+                                <span class="material-icons">
+                                    <%= tab.icon %>
+                                </span>
+                            </span>
+                        <% end %>
+                        <span>
+                            <%= tab.title %>
+                        </span>
+                    </a>
+                </li>
+            <% end %>
+        </ul>
+    </div>
+    <div class="tab-items">
+        <% tabs.each_with_index do |tab, index| %>
+            <div
+                id="<%= tab.tab_id %>"
+                class="tab-item"
+                x-show="activeTab === '<%= tab.tab_id %>'"
+                x-transition
+                x-cloak>
+                <%= tab %>
+            </div>
+        <% end %>
+    </div>
+</div>

data/lib/lesli_view/components/tabs.rb

@@ -0,0 +1,58 @@
+=begin
+<%= render LesliView::Elements::Tabs.new(active_tab: "tab1") do |tabs| %>
+    <% tabs.with_tab(tab_id: "tab1", title: "Tab 1") do  %>
+        hola
+    <% end %>
+    <% tabs.with_tab(tab_id: "tab2", title: "Tab 2") %>
+    <% tabs.with_tab(tab_id: "tab3", title: "Tab 3") %>
+    <% tabs.with_tab(tab_id: "tab4", title: "Tab 4", icon: "save") %>
+    <% tabs.with_tab(tab_id: "tab5", title: "Tab 5", icon: "edit") %>
+    <% tabs.with_tab(tab_id: "tab6", title: "Tab 6", icon: "delete") %>
+<% end %>
+=end
+
+module LesliView
+    module Components
+        class Tabs < ViewComponent::Base
+            renders_many :tabs, "TabComponent"
+
+            attr_reader :active_tab
+
+            def initialize(active_tab: nil)
+                @active_tab = active_tab
+            end
+
+            class TabComponent < ViewComponent::Base
+                attr_reader :tab_id, :title, :icon
+
+                def initialize(id:nil, title: nil, icon: nil)
+
+                    @tab_id = nil
+
+                    if title 
+                        @tab_id = title
+                        .downcase                           # string to lowercase
+                        .gsub(/[^0-9A-Za-z\s\-\_]/, '')     # remove special characters from string
+                        .gsub(/_/, '-')                     # replace underscores with dashes 
+                        .gsub(/\s+/, '-')                   # replace spaces or spaces with single dash
+                    end
+
+                    if id 
+                        @tab_id = id
+                    end 
+
+                    @title = title
+                    @icon = icon
+                end
+
+                def set_tab_id(tab_id, index)
+                    @tab_id = tab_id || "tab-#{index}"
+                end
+
+                def call
+                    content_tag :div, content
+                end
+            end
+        end
+    end
+end

data/lib/lesli_view/components/timeline.html.erb

@@ -0,0 +1,23 @@
+
+<div class="lesli-timelines">
+    <div class="py-6 pl-4">
+        <ul class="lesli-timeline lesli-timeline-split">
+            <% @activities.each do |activity| %>
+                <li class="lesli-timeline-item">
+                    <div class="lesli-timeline-info">
+                        <span><%= activity[:date] %></span>
+                    </div>
+                    <div class="lesli-timeline-marker"></div>
+                    <div class="lesli-timeline-content">
+                        <h3 class="lesli-timeline-title">
+                            <%= activity[:title] %>
+                        </h3>
+                        <p>
+                            <%= activity[:description] %>
+                        </p>
+                    </div>
+                </li>
+            <% end %>
+        </ul>
+    </div>
+</div>

data/lib/lesli_view/components/timeline.rb

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+=begin 
+
+Lesli
+
+Copyright (c) 2025, 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 Framework.
+
+Made with ♥ by LesliTech
+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
+
+// · ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~
+// · 
+=end
+
+module LesliView
+    module Components
+        class Timeline < ViewComponent::Base
+            attr_reader :activities
+
+            def initialize(activities: nil)
+                @activities = activities
+            end
+        end  
+    end
+end