satis 1.0.66

data/app/components/satis/info/component.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module Satis
+  module Info
+    class Component < Satis::ApplicationComponent
+      renders_many :items, lambda { |*args|
+                             args.last.merge!(group: group)
+                             component = Satis::InfoItem::Component.new(*args)
+                             component.original_view_context = original_view_context
+                             component
+                           }
+
+      attr_reader :group, :options
+
+      def initialize(group: :main, **options)
+        super
+        @group = group
+        @options = options
+      end
+    end
+  end
+end

data/app/components/satis/info_item/component.html.slim

@@ -0,0 +1,7 @@
+- if content.present? || options[:content].present? || options[:show_always]
+  div class=options[:class]
+    dt.text-xs.uppercase.text-gray-400 = ct(".#{name}", default: name.to_s.humanize, scope: group)
+    dd.text-sm.text-gray-900.dark:text-gray-300
+      - if options[:icon]
+        i.mr-1 class=options[:icon]
+      = content || options[:content] || @placeholder

data/app/components/satis/info_item/component.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Satis
+  module InfoItem
+    class Component < Satis::ApplicationComponent
+      attr_reader :options, :name, :icon, :group
+
+      def initialize(name, *args, &block)
+        super
+        @name = name
+        @args = args
+        @options = args.extract_options!
+        @group = options[:group]
+        @icon = options[:icon]
+        @placeholder = options[:placeholder] || '—'
+      end
+    end
+  end
+end

data/app/components/satis/input/component.html.slim

@@ -0,0 +1,11 @@
+.sts-input
+  = form.custom_label(attribute, options[:label]) unless options[:label] == false
+  .sts-input__input-container class=input_container_class
+    - prefixes.each do |prefix|
+      = prefix
+    = input || form.string_field(attribute, { class: input_class }.merge(options.fetch(:input_html, {})))
+    - postfixes.each do |postfix|
+      = postfix
+  - if hint
+    small.form-text.text-muted= hint
+  = form.error_text(attribute) if form.has_error?(attribute)

data/app/components/satis/input/component.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module Satis
+  module Input
+    class Element < ViewComponent::Base
+      attr_reader :classes
+
+      def initialize(classes: nil, colored: true)
+        @classes = classes || ''
+        @classes += ' colored' if colored
+      end
+    end
+
+    class Component < Satis::ApplicationComponent
+      attr_reader :form, :attribute, :options
+
+      renders_one :label
+      renders_one :input
+      renders_one :hint
+      renders_many :prefixes, Element
+      renders_many :postfixes, Element
+
+      def initialize(form: nil, attribute: nil, **options)
+        @form = form
+        @attribute = attribute
+        @options = options
+      end
+
+      def input_class
+        [@options.fetch(:input_html, {}).fetch(:class, ''), 'sts-input__input', form.has_error?(attribute) && 'is-invalid'].join(' ')
+      end
+
+      def input_container_class
+        form.has_error?(attribute) && 'is-invalid'
+      end
+    end
+  end
+end

data/app/components/satis/input/component.scss

@@ -0,0 +1,50 @@
+.sts-input {
+  &__input-container {
+    @apply mt-1 flex border rounded h-12 text-gray-800 dark:text-gray-300 border-gray-300 dark:bg-gray-800 dark:border-gray-700 overflow-hidden;
+  }
+
+  &__label {
+
+  }
+
+  &__input-container {
+    &.is-invalid {
+      @apply border-red-300 text-red-900 placeholder-red-300 focus:outline-none focus:ring-red-500 focus:border-red-500;
+    }
+  }
+
+  &__input {
+    @apply flex-1 min-w-0 block w-full border-none py-2 px-3;
+    background: transparent;
+
+    &:focus {
+      box-shadow: none;
+    }
+  }
+
+  &__element {
+    @apply inline-flex items-center py-2 px-3;
+
+    &.colored {
+      background: rgba(1, 1, 1, 0.1);
+
+      .dark & {
+        background: rgba(255, 255, 255, 0.1);
+      }
+    }
+
+    input {
+      @apply -ml-3 -mr-3 -mt-2 -mb-2 w-full;
+
+      &:focus {
+        box-shadow: none;
+      }
+    }
+
+    * {
+      @apply border-none;
+
+      background-color: transparent;
+    }
+  }
+}

data/app/components/satis/input/element.html.slim

@@ -0,0 +1,2 @@
+span.sts-input__element class=classes
+  = content

data/app/components/satis/map/component.html.slim

@@ -0,0 +1,2 @@
+.satis-map data-controller="satis-map" data-satis-map-urls-value=@urls data-satis-map-longitude-value=@longitude data-satis-map-latitude-value=@latitude data-satis-map-zoom-level-value=@zoom_level data-satis-map-geo-json-url-value=@geo_json_url
+  .sts-map__map data-satis-map-target="container"

data/app/components/satis/map/component.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module Satis
+  module Map
+    class Component < Satis::ApplicationComponent
+      attr_reader :latitude, :longitude, :zoom_level, :geo_json_url
+
+      def initialize(latitude: 52.09083, longitude: 5.12222, zoom_level: 7, geo_json_url: nil)
+        super
+        @latitude = latitude
+        @longitude = longitude
+        @zoom_level = zoom_level
+        @geo_json_url = geo_json_url
+      end
+    end
+  end
+end

data/app/components/satis/map/component.scss

@@ -0,0 +1,9 @@
+@import "leaflet/dist/leaflet";
+
+.sts-map {
+  margin-bottom: 1rem;
+
+  .sts-map__map {
+    height: 400px;
+  }
+}

data/app/components/satis/map/component_controller.js

@@ -0,0 +1,37 @@
+// map_controller.js
+import ApplicationController from "../../../../frontend/controllers/application_controller"
+import L from "leaflet"
+
+export default class extends ApplicationController {
+  static targets = ["container"]
+  static values = { urls: String, latitude: Number, longitude: Number, zoomLevel: Number, geoJsonUrl: String }
+
+  connect() {
+    super.connect()
+
+    // Example https://leafletjs.com/examples/choropleth/
+    // Data https://public.opendatasoft.com/explore/?sort=modified&q=netherlands
+
+    this.map = L.map(this.containerTarget).setView([this.latitudeValue, this.longitudeValue], this.zoomLevelValue)
+    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }).addTo(this.map)
+
+    // this.map.setView() etc... as normal.
+
+    // Load layers and setup event handlers, for example:
+    fetch(this.geoJsonUrlValue)
+      .then((response) => response.json())
+      .then((data) => {
+        L.geoJSON(data, {
+          onEachFeature: (feature, layer) => {
+            layer.on("click", () => this.onClick(layer))
+          },
+        }).addTo(this.map)
+      })
+  }
+
+  disconnect() {
+    this.map.remove()
+  }
+
+  onClick(layer) {}
+}

data/app/components/satis/menu/component.html.slim

@@ -0,0 +1,13 @@
+div data-controller="satis-menu" data-action="mouseover->satis-menu#show mouseleave->satis-menu#hide"
+  - if content
+    = content
+  - else
+    button.inline-flex.items-center.justify-center.h-8.w-8.rounded-full.focus:outline-none.focus:ring-2.focus:ring-offset-2.focus:ring-primary-500.dark:text-gray-500 aria-expanded="false" aria-haspopup="true" type="button"
+      span.font-semibold.flex-1 class="#{menu.items.present? ? '' : 'text-gray-200'}"
+        i class=icon
+
+  - if menu.items.present?
+    ul.hidden.z-10.bg-white.dark:bg-gray-400.border.dark:border-gray-800.rounded-md.shadow-lg.min-w-max data-satis-menu-target="submenu" data-satis-menu-submenu-placement="bottom"
+      - menu.items.each do |item|
+        = render(Satis::MenuItem::Component.new(item: item))
+

data/app/components/satis/menu/component.md

@@ -0,0 +1 @@
+https://tailwindcomponents.com/component/nestable-dropdown-menu

data/app/components/satis/menu/component.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Satis
+  module Menu
+    class Component < Satis::ApplicationComponent
+      # renders_many :tabs, Tab::Component
+      attr_reader :menu, :icon
+
+      def initialize(menu, icon: nil)
+        super
+        @menu = menu
+        @icon = icon || 'fa-solid fa-ellipsis-vertical'
+      end
+    end
+  end
+end

data/app/components/satis/menu/component_controller.js

@@ -0,0 +1,62 @@
+import ApplicationController from "../../../../frontend/controllers/application_controller"
+// FIXME: Is this full path really needed?
+import { debounce } from "../../../../frontend/utils"
+import { createPopper } from "@popperjs/core"
+
+export default class extends ApplicationController {
+  static targets = ["submenu", "toggle"]
+
+  connect() {
+    super.connect()
+
+    if (this.hasSubmenuTarget) {
+      this.popperInstance = createPopper(this.element, this.submenuTarget, {
+        offset: [-20, 2],
+        placement: this.submenuTarget.getAttribute("data-satis-menu-submenu-placement") || "auto",
+        modifiers: [
+          {
+            name: "flip",
+            enabled: true,
+            options: {
+              boundary: this.element.closest(".satis-card"),
+            },
+          },
+          {
+            name: "preventOverflow",
+          },
+        ],
+      })
+    }
+  }
+
+  show(event) {
+    if (this.hasSubmenuTarget && (!this.hasToggleTarget || (this.hasToggleTarget && this.toggledOn))) {
+      this.submenuTarget.classList.remove("hidden")
+      this.submenuTarget.setAttribute("data-show", "")
+      this.popperInstance.update()
+    }
+  }
+
+  hide(event) {
+    if (this.hasSubmenuTarget) {
+      this.submenuTarget.classList.add("hidden")
+      this.submenuTarget.removeAttribute("data-show")
+    }
+  }
+
+  toggle(event) {
+    if (this.hasToggleTarget) {
+      this.toggleTarget.classList.toggle("hidden")
+      this.triggerEvent(this.toggleTarget, "toggle", { toggled: !this.toggleTarget.classList.contains("hidden"), id: this.toggleTarget.getAttribute("id") })
+      if (this.toggleTarget.classList.contains("hidden")) {
+        this.hide(event)
+      } else {
+        this.show(event)
+      }
+    }
+  }
+
+  get toggledOn() {
+    return !this.toggleTarget.classList.contains("hidden")
+  }
+}

data/app/components/satis/menu_item/component.html.slim

@@ -0,0 +1,16 @@
+li.rounded-sm.px-3.py-1.hover:bg-gray-100.dark:hover:bg-gray-200.flex.items-center data-controller="satis-menu" data-action="mouseover->satis-menu#show mouseleave->satis-menu#hide"
+  a.cursor-pointer.py-1.w-full.text-left.flex.items-center.outline-none.focus:outline-none href=item.link *item.link_attributes
+    span.pr-1.flex-shrink-0.w-6
+      - if item.icon.present?
+        i class=item.icon
+    span.pr-1.flex-1 = item.label
+    span.pr-1.flex-shrink-0.w-6
+      - if item.type == :toggle
+        i.fal.fa-check.hidden data-satis-menu-target="toggle" id="#{item.id}"
+
+  - if item.menu
+    ul.hidden.bg-white.border.rounded-md.shadow-lg data-satis-menu-target="submenu" data-satis-menu-submenu-placement="left"
+      - item.menu.items.each do |sub_item|
+        = render(Satis::MenuItem::Component.new(item: sub_item))
+
+

data/app/components/satis/menu_item/component.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module Satis
+  module MenuItem
+    class Component < Satis::ApplicationComponent
+      attr_reader :item
+
+      # renders_many :items
+      def initialize(**options)
+        @item = options[:item]
+      end
+    end
+  end
+end

data/app/components/satis/page/component.html.slim

@@ -0,0 +1,45 @@
+doctype html
+html lang="en"
+  head
+    = head
+  body
+    .h-screen.flex.overflow-hidden.bg-gray-100.dark:bg-gray-600 data-controller="satis-page"
+      / Off-canvas menu for mobile, show/hide based on off-canvas menu state.
+      .fixed.inset-0.flex.z-40.md:hidden.hidden aria-modal="true" role="dialog" data-satis-page-target="dialog"
+
+        .fixed.inset-0.bg-gray-600.bg-opacity-75.hidden aria-hidden="true" data-satis-page-target="overlay"
+
+        .relative.flex-1.flex.flex-col.max-w-xs.w-full.pt-5.pb-4.bg-white.transform.hidden data-satis-page-target="offCanvasMenu"
+
+          .absolute.top-0.right-0.-mr-12.pt-2.hidden data-satis-page-target="closeButton"
+            button.ml-1.flex.items-center.justify-center.h-10.w-10.rounded-full.focus:outline-none.focus:ring-2.focus:ring-inset.focus:ring-white data-action="satis-page#close"
+              span.sr-only Close sidebar
+              i.fal.fa-2x.fa-xmark.text-white aria-hidden="true"
+          = sidebar_mobile
+
+        .flex-shrink-0.w-14 aria-hidden="true"
+          / Dummy element to force sidebar to shrink to fit close icon
+
+      / SIDEBAR - for desktop
+      .hidden.md:flex.md:flex-shrink-0
+        .flex.flex-col.w-64
+          /! Sidebar component, swap this element with another sidebar if you like
+
+          .flex.flex-col.flex-grow.border-r.border-gray-200.pt-5.pb-4.bg-white.overflow-y-auto.dark:bg-gray-900.dark:border-gray-700
+            = sidebar
+
+      / TOPBAR
+      .flex.flex-col.w-0.flex-1.overflow-hidden
+        .relative.z-10.flex-shrink-0.flex.h-16.bg-white.shadow.dark:bg-gray-900.dark:border-gray-700
+          button.px-4.border-r.border-gray-200.text-gray-500.focus:outline-none.focus:ring-2.focus:ring-inset.focus:ring-primary-500.md:hidden data-action="satis-page#open"
+            span.sr-only Open sidebar
+            i.fal.fa-2x.fa-bars
+
+          .flex-1.px-4.flex.justify-between
+            = navbar
+
+        main.flex-1.relative.overflow-y-auto.focus:outline-none
+          .py-4
+            .max-w.mx-auto.px-4.sm:px-4.md:px-4
+              = body
+

data/app/components/satis/page/component.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module Satis
+  module Page
+    class Component < Satis::ApplicationComponent
+      renders_one :head
+      renders_one :navbar
+      renders_one :sidebar_mobile
+      renders_one :sidebar
+      renders_one :body
+
+      def initialize(**options); end
+    end
+  end
+end

data/app/components/satis/page/component_controller.js

@@ -0,0 +1,86 @@
+import ApplicationController from "../../../../frontend/controllers/application_controller"
+
+export default class extends ApplicationController {
+  static targets = ["closeButton", "openButton", "offCanvasMenu", "overlay", "dialog"]
+  connect() {
+    super.connect()
+  }
+
+  close(event) {
+    // | Entering: "transition-opacity ease-linear duration-300"
+    // | From: "opacity-0"
+    // | To: "opacity-100"
+    // | Leaving: "transition-opacity ease-linear duration-300"
+    // | From: "opacity-100"
+    // | To: "opacity-0"
+    // overlay
+    this.overlayTarget.classList.add("transition-opacity", "ease-linear", "duration-300", "opacity-0")
+
+    // | Entering: "transition ease-in-out duration-300 transform"
+    // | From: "-translate-x-full"
+    // | To: "translate-x-0"
+    // | Leaving: "transition ease-in-out duration-300 transform"
+    // | From: "translate-x-0"
+    // | To: "-translate-x-full"
+    // offCanvasMenu
+    this.offCanvasMenuTarget.classList.add("transition", "ease-in-out", "duration-1000")
+
+    // | Entering: "ease-in-out duration-300"
+    // | From: "opacity-0"
+    // | To: "opacity-100"
+    // | Leaving: "ease-in-out duration-300"
+    // | From: "opacity-100"
+    // | To: "opacity-0"
+    // closeButton
+    this.closeButtonTarget.classList.add("ease-in-out", "duration-300", "opacity-0")
+
+    setTimeout(() => {
+      this.dialogTarget.classList.add("hidden")
+      this.overlayTarget.classList.add("hidden")
+      this.offCanvasMenuTarget.classList.add("hidden")
+      this.closeButtonTarget.classList.add("hidden")
+
+      this.overlayTarget.classList.remove("transition-opacity", "ease-linear", "duration-300")
+      this.offCanvasMenuTarget.classList.remove("transition", "ease-in-out", "duration-300")
+      this.closeButtonTarget.classList.remove("ease-in-out", "duration-300")
+    }, 100)
+  }
+
+  open(event) {
+    this.dialogTarget.classList.remove("hidden")
+    this.overlayTarget.classList.remove("hidden")
+    this.offCanvasMenuTarget.classList.remove("hidden")
+    this.closeButtonTarget.classList.remove("hidden")
+
+    // | Entering: "transition-opacity ease-linear duration-300"
+    // | From: "opacity-0"
+    // | To: "opacity-100"
+    // | Leaving: "transition-opacity ease-linear duration-300"
+    // | From: "opacity-100"
+    // | To: "opacity-0"
+    // overlay
+    this.overlayTarget.classList.remove("opacity-0")
+    this.overlayTarget.classList.add("transition-opacity", "ease-linear", "duration-300", "opacity-100")
+
+    // | Entering: "transition ease-in-out duration-300 transform"
+    // | From: "-translate-x-full"
+    // | To: "translate-x-0"
+    // | Leaving: "transition ease-in-out duration-300 transform"
+    // | From: "translate-x-0"
+    // | To: "-translate-x-full"
+    // offCanvasMenu
+    this.offCanvasMenuTarget.classList.add("transition", "ease-in-out", "duration-1000")
+    this.offCanvasMenuTarget.classList.remove("-translate-x-full")
+    this.offCanvasMenuTarget.classList.add("transition", "ease-in-out", "duration-1000", "transform", "translate-x-0")
+
+    // | Entering: "ease-in-out duration-300"
+    // | From: "opacity-0"
+    // | To: "opacity-100"
+    // | Leaving: "ease-in-out duration-300"
+    // | From: "opacity-100"
+    // | To: "opacity-0"
+    // closeButton
+    this.closeButtonTarget.classList.remove("opacity-0")
+    this.closeButtonTarget.classList.add("ease-in-out", "duration-300", "opacity-100")
+  }
+}

data/app/components/satis/sidebar_menu/component.html.slim

@@ -0,0 +1,3 @@
+nav.flex-1.px-2.space-y-1 aria-label="Sidebar"
+  - @menu.items.each do |item|
+    = render(Satis::SidebarMenuItem::Component.new(item: item, menu_options: menu_options))

data/app/components/satis/sidebar_menu/component.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module Satis
+  module SidebarMenu
+    class Component < Satis::ApplicationComponent
+      attr_reader :menu, :menu_options
+
+      renders_many :items
+
+      def initialize(menu, **options)
+        super
+        @menu = menu
+        @menu_options = options
+      end
+    end
+  end
+end

data/app/components/satis/sidebar_menu/component_controller.js

@@ -0,0 +1,9 @@
+import ApplicationController from "../../../../frontend/controllers/application_controller"
+// FIXME: Is this full path really needed?
+import { debounce } from "../../../../frontend/utils"
+
+export default class extends ApplicationController {
+  connect() {
+    super.connect()
+  }
+}

data/app/components/satis/sidebar_menu/mobile/component.html.slim

@@ -0,0 +1,3 @@
+nav.px-2.space-y-1
+  - @menu.items.each do |item|
+    = render(Satis::SidebarMenuItem::Mobile::Component.new(item: item))

data/app/components/satis/sidebar_menu/mobile/component.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+module Satis
+  module SidebarMenu
+    module Mobile
+      class Component < ::Satis::SidebarMenu::Component
+      end
+    end
+  end
+end

data/app/components/satis/sidebar_menu_item/component.html.slim

@@ -0,0 +1,15 @@
+.sts-sidebar-menu-item class="#{item.level >= 1 ? 'pl-4' : ''}" data-controller="satis-sidebar-menu-item"
+  a.sts-sidebar-menu-item__link aria-controls="sub-menu-1" aria-expanded="false" href=item.link *item.link_attributes data-satis-sidebar-menu-item-target="link" data-action=data_actions
+    - if item.icon
+      i.sts-sidebar-menu-item__icon.fa-lg class=item.icon style="width: 20px;"
+    - else
+      i.sts-sidebar-menu-item__no-icon style="width: 20px;"
+
+    span.sts-sidebar-menu-item__label= item.label
+    - if item.menu
+      i.sts-sidebar-menu-item__menu-icon.fa-solid.fa-angle-right style="width: 20px;" data-satis-sidebar-menu-item-target="indicator"
+
+  - if item.menu
+    div.hidden data-satis-sidebar-menu-item-target="submenu"
+      - item.menu.items.each do |sub_item|
+        = render(Satis::SidebarMenuItem::Component.new(item: sub_item))

data/app/components/satis/sidebar_menu_item/component.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module Satis
+  module SidebarMenuItem
+    class Component < Satis::ApplicationComponent
+      attr_reader :item, :menu_options
+
+      # renders_many :items
+      def initialize(**options)
+        @item = options[:item]
+        @menu_options = options.fetch(:menu_options, {})
+        @actions = item.link_attributes.delete(:'data-action')
+      end
+
+      def data_actions
+        "click->satis-sidebar-menu-item#open #{@actions}"
+      end
+    end
+  end
+end

data/app/components/satis/sidebar_menu_item/component.scss

@@ -0,0 +1,27 @@
+.sts-sidebar-menu-item {
+  @apply pt-1;
+
+  & a.focus {
+    background: rgba(1, 1, 1, 0.1);
+
+    .dark & {
+      background: rgba(255, 255, 255, 0.3);
+    }
+  }
+
+  &__link {
+    @apply text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 hover:text-gray-900 w-full flex items-center pl-2 pr-1 py-2 text-left text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500
+  }
+  &__icon {
+    @apply mr-3 flex-shrink-0 h-6 w-6 text-gray-400 group-hover:text-gray-500;
+  }
+  &__no-icon {
+    @apply mr-3 flex-shrink-0 h-6;
+  }
+  &__label {
+    @apply flex-1;
+  }
+  &__menu-icon {
+    @apply text-gray-300 ml-3 flex-shrink-0 h-5 w-5 transform group-hover:text-gray-400 transition-colors ease-in-out duration-150;
+  }
+}