warped 0.1.0 → 1.0.0

data/app/assets/javascript/warped/controllers/filter_controller.js

@@ -0,0 +1,76 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class FilterController extends Controller {
+  static targets = ["relation", "relationInput", "value", "valueInput", "panel", "badgeValue"]
+  static outlets = ["filter"]
+  static classes = ["empty", "collapsed"]
+
+
+  clickOutside(event) {
+    if (!this.element.contains(event.target)) {
+      this.close();
+    }
+  }
+
+  toggle() {
+    this.collapsedClasses.forEach(c => this.panelTarget.classList.toggle(c))
+
+    this.filterOutlets.forEach(outlet => {
+      if (this != outlet) {
+        outlet.close();
+      }
+    })
+  }
+
+  close() {
+    this.panelTarget.classList.add(...this.collapsedClasses)
+  }
+
+  collapsePanel() {
+    this.panelTarget.classList.add(...this.collapsedClasses)
+  }
+
+  uncollapsePanel() {
+    this.panelTarget.classList.remove(...this.collapsedClasses)
+  }
+
+  changeRelation() {
+    if (this.valueInputTarget.value) {
+      this.relationTarget.textContent = `${this.relationInputTarget.value}:`
+    }
+  }
+
+  changeValue() {
+    const currentFilterValue = this.valueInputTarget.value.trim()
+
+    this.valueTarget.textContent = currentFilterValue
+    this.changeRelation()
+
+    if (currentFilterValue) {
+      this.badgeValueTarget.classList.remove(...this.collapsedClasses)
+      this.element.classList.remove(this.emptyClass)
+    } else {
+      this.relationTarget.textContent = "";
+      this.badgeValueTarget.classList.add(...this.collapsedClasses)
+      this.element.classList.add(this.emptyClass)
+    }
+  }
+
+  clear(submit = true) {
+    this.valueTarget.textContent = ""
+    this.valueInputTarget.value = ""
+    this.relationInputTarget.value = ""
+    this.badgeValueTarget.classList.add("hidden")
+    this.element.classList.add(this.emptyClass)
+
+    if (submit) {
+      this.form.requestSubmit();
+    }
+  }
+
+  get form() {
+    return this.element.closest("form")
+  }
+}
+
+export { FilterController }

data/app/assets/javascript/warped/controllers/filters_controller.js

@@ -0,0 +1,21 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class FiltersController extends Controller {
+  static outlets = ["filter"]
+
+  clearAll(event) {
+    event.preventDefault();
+
+    this.filterOutlets.forEach(outlet => {
+      outlet.clear(false);
+    })
+
+    this.form.requestSubmit();
+  }
+
+  get form() {
+    return this.element;
+  }
+}
+
+export { FiltersController }

data/app/assets/javascript/warped/index.js

@@ -0,0 +1,2 @@
+import FilterController from "warped/controllers/filter_controller";
+import FiltersController from "warped/controllers/filters_controller";

data/app/assets/stylesheets/warped/application.css

@@ -0,0 +1,15 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the bottom of the
+ * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
+ * files in this directory. Styles in this file should be added after the last require_* statement.
+ * It is generally better to create a new file per style scope.
+ *
+ *= require_tree .
+ *= require_self
+ */

data/app/assets/stylesheets/warped/base.css

@@ -0,0 +1,23 @@
+:root {
+  /* colors */
+  --warped-base: white;
+  --warped-base-rgb: 255, 255, 255;
+
+  --warped-neutral: #1F2937;
+  --warped-neutral-rgb: 31, 41, 55;
+
+  --warped-neutral-content: #fbfbfb;
+  --warped-neutral-content-rgb: 251, 251, 251;
+
+  --warped-primary: #2563EB;
+  --warped-primary-rgb: 37, 99, 235;
+
+  --warped-primary-content: #fbfbfb;
+  --warped-primary-content-rgb: 251, 251, 251;
+
+  --warped-danger: #EF4444;
+  --warped-danger-rgb: 239, 68, 68;
+
+  /* roundness */
+  --warped-roundness: 0.5rem;
+}

data/app/assets/stylesheets/warped/filters.css

@@ -0,0 +1,115 @@
+.warped-filters {
+  width: 100%;
+  display: flex;
+  gap: 0.5rem;
+  background-color: var(--warped-base);
+  border-radius: var(--warped-roundness);
+  flex-wrap: wrap
+}
+
+.warped-filters--submit {
+  background-color: var(--warped-primary);
+  color: var(--warped-primary-content);
+  padding: 0.5rem;
+  border-radius: var(--warped-roundness);
+  font-size: 0.875rem;
+  cursor: pointer;
+}
+
+.warped-filters--clear {
+  background-color: var(--warped-neutral);
+  color: var(--warped-neutral-content);
+  padding: 0.5rem;
+  border-radius: var(--warped-roundness);
+  font-size: 0.875rem;
+  cursor: pointer;
+}
+
+.warped-filters--filter {
+  display: flex;
+  gap: 0.25rem;
+  height: 100%;
+  border-radius: var(--warped-roundness);
+  background-color: var(--warped-base);
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  position: relative;
+  border: 1px solid var(--warped-neutral);
+  align-items: center;
+}
+
+.warped-filters--filter-inactive {
+  border: 1px dashed var(--warped-neutral);
+}
+
+.warped-filters--filter--label {
+  font-size: 0.875rem;
+  color: var(--warped-neutral);
+  font-weight: 500;
+}
+
+.warped-filters--filter--icon {
+  height: 1.5rem;
+  width: 1.5rem;
+  color: var(--warped-neutral);
+  cursor: pointer;
+}
+
+.warped-filters--filter--value {
+  display: flex;
+  transition: all 200ms;
+  color: var(--warped-neutral);
+}
+
+.warped-filters--filter--panel-collapsed {
+  visibility: hidden;
+  opacity: 0;
+}
+
+.warped-filters--filter--value--values {
+  font-size: 0.875rem;
+  color: var(--warped-neutral);
+  font-weight: 600;
+}
+
+.warped-filters--filter--panel {
+  transition: all 200ms;
+  width: max-content;
+  position: absolute;
+  top: 2.5rem;
+  left: 0;
+  background-color: var(--warped-base);
+  border-radius: var(--warped-roundness);
+  padding: 0.5rem;
+  display: flex;
+  z-index: 40;
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
+}
+
+.warped-filters--filter--panel--remove {
+  cursor: pointer;
+  color: var(--warped-danger);
+  width: 2rem;
+  stroke-width: 2;
+}
+
+.warped-filters--filter--panel--select {
+  width: max-content;
+  padding-left: 0.5rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  border-top-left-radius: var(--warped-roundness);
+  border-bottom-left-radius: var(--warped-roundness);
+  border-right: 1px solid var(--warped-neutral);
+}
+
+.warped-filters--filter--panel--input {
+  width: max-content;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  border-top-right-radius: var(--warped-roundness);
+  border-bottom-right-radius: var(--warped-roundness);
+  border-left: 0;
+}

data/app/assets/stylesheets/warped/pagination.css

@@ -0,0 +1,74 @@
+.warped--pagination {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  width: 100%;
+  height: 2.5rem;
+}
+
+.warped--pagination--btn {
+  background-color: var(--warped-neutral);
+  color: var(--warped-neutral-content);
+  padding: 0.25rem 0.5rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-width: 2.5rem;
+}
+
+.warped--pagination--btn button {
+  height: 100%;
+  width: 100%;
+}
+
+.warped--pagination--btn:not(:last-child) {
+  border-right: 1px solid var(--warped-neutral-content);
+}
+
+.warped--pagination--btn:first-child {
+  border-top-left-radius: var(--warped-roundness);
+  border-bottom-left-radius: var(--warped-roundness);
+  width: 7rem;
+}
+
+.warped--pagination--btn:last-child {
+  border-top-right-radius: var(--warped-roundness);
+  border-bottom-right-radius: var(--warped-roundness);
+  width: 7rem;
+}
+
+.warped--pagination--btn:hover {
+  background-color: var(--warped-primary);
+  color: var(--warped-primary-content);
+}
+
+.warped--pagination--btn-disabled {
+  background-color: var(--warped-neutral);
+  color: var(--warped-neutral-content);
+  padding: 0.25rem 0.5rem;
+  cursor: not-allowed;
+}
+
+.warped--pagination--btn-disabled:hover {
+  background-color: var(--warped-neutral);
+}
+
+.warped--pagination--btn-active {
+  background-color: var(--warped-primary);
+  color: var(--warped-primary-content);
+  padding: 0.25rem 0.5rem;
+  cursor: pointer;
+}
+
+.warped--pagination--btn-inactive {
+  background-color: var(--warped-neutral);
+  color: var(--warped-neutral-content);
+  padding: 0.25rem 0.5rem;
+  cursor: pointer;
+}
+
+.warped--pagination--btn-gap:hover {
+  background-color: var(--warped-neutral);
+  color: var(--warped-neutral-content);
+  cursor: not-allowed;
+}

data/app/assets/stylesheets/warped/search.css

@@ -0,0 +1,33 @@
+.warped-searchbar {
+  display: flex;
+  width: 100%;
+  background-color: white;
+  border-radius: var(--warped-roundness);
+}
+
+.warped-searchbar--button {
+  background-color: var(--warped-neutral);
+  color: var(--warped-neutral-content);
+  stroke: var(--warped-neutral-content);
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  border-top-left-radius: var(--warped-roundness);
+  border-bottom-left-radius: var(--warped-roundness);
+}
+
+.warped-searchbar--button svg {
+  height: 1.25rem;
+  width: 1.25rem;
+}
+
+.warped-searchbar--input {
+  flex-grow: 1;
+  border-top: 1px solid var(--warped-neutral);
+  border-right: 1px solid var(--warped-neutral);
+  border-bottom: 1px solid var(--warped-neutral);
+  border-top-right-radius: var(--warped-roundness);
+  border-bottom-right-radius: var(--warped-roundness);
+  padding-left: 0.5rem;
+}

data/app/assets/stylesheets/warped/table.css

@@ -0,0 +1,114 @@
+/* This file contains all the styles necessary for Warped::Table to work */
+.warped-table {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  row-gap: 0.5rem;
+  background-color: var(--warped-base);
+  border-radius: var(--warped-roundness);
+  padding: 0.5rem;
+}
+
+.warped-table--container {
+  overflow-x: auto;
+}
+
+.warped-table--controls {
+  display: flex;
+  flex-direction: column;
+  row-gap: 0.5rem;
+}
+
+.warped-table--table {
+  width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+  display: table;
+}
+
+.warped-table--table--header {
+  display: table-header-group;
+  background-color: var(--warped-neutral);
+}
+
+.warped-table--table--header .warped-table--table--row .warped-table--table--cell {
+  font-weight: 500;
+  color: var(--warped-neutral-content);
+  border-right: 1px solid var(--warped-neutral-content);
+  padding: 0 0.25rem;
+  stroke: var(--warped-neutral-content);
+  stroke-width: 0.5;
+}
+
+.warped-table--table--header .warped-table--table--row .warped-table--table--cell form {
+  width: 100%;
+}
+
+.warped-table--table--header .warped-table--table--row .warped-table--table--cell form button {
+  display: flex;
+  gap: 0.25rem;
+  width: 100%;
+}
+
+.warped-table--table--header .warped-table--table--row .warped-table--table--cell form button svg {
+  width: 1.25rem;
+  height: 1.25rem;
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+.warped-table--table--header .warped-table--table--row .warped-table--table--cell:last-child {
+  border-right: none;
+}
+
+.warped-table--table--row {
+  display: table-row;
+}
+
+.warped-table--table--row:not(:last-child) {
+  border-bottom: 1px solid var(--warped-neutral);
+}
+
+.warped-table--table--cell {
+  display: table-cell;
+  padding: 0.25rem;
+  vertical-align: middle;
+}
+
+.warped-table--table--row-group {
+  display: table-row-group;
+}
+
+.warped-table--table--row-group>*+* {
+  border-top: 1px solid var(--warped-neutral);
+}
+
+.warped-table--table--row-group .warped-table--table--empty-row:only-child {
+  display: table-row;
+}
+
+.warped-table--table--row-group .warped-table--table--row:nth-child(odd) {
+  background-color: rgba(var(--warped-neutral-rgb), 0.1);
+}
+
+.warped-table--table--row-group .warped-table--table--empty-row {
+  display: none;
+  position: relative;
+  height: 3rem;
+}
+
+.warped-table--table--row-group .warped-table--table--empty-row .warped-table--table--cell {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  font-weight: 500;
+  padding-top: 0.5rem;
+}
+
+.warped-table--action {
+  padding: 0.25rem 0.5rem;
+  border-radius: var(--warped-roundness);
+  background-color: var(--warped-neutral);
+  color: var(--warped-neutral-content);
+}

data/app/views/warped/_actions.html.erb

@@ -0,0 +1,9 @@
+<%# locals: (resource:, actions:[])%>
+
+<div class="warped-table--table--cell">
+  <% actions.each do |action| %>
+    <% opts = action.options.deep_dup %>
+    <% action_class = "warped-table--action #{opts.delete(:class)}" %>
+    <%= link_to (action.name(resource)), action.path(resource), class: action_class, **opts %>
+  <% end %>
+</div>

data/app/views/warped/_cell.html.erb

@@ -0,0 +1,3 @@
+<div class="warped-table--table--cell">
+  <%= yield %>
+</div>

data/app/views/warped/_column.html.erb

@@ -0,0 +1,35 @@
+<%# locals: (path:, column:, turbo_action:) %>
+
+<div class="warped-table--table--cell">
+  <% if controller.class.include?(Warped::Controllers::Sortable::Ui) && sorted? && sortable_field?(column.parameter_name) %>
+    <% html_form_options = {}.tap do |hash| %>
+      <% hash.merge!(filter_url_params) if try(:filtered?) %>
+      <% hash.merge!(paginate_url_params) if try(:sorted?) %>
+      <% hash.merge!(search_url_params) if try(:searched?) %>
+    <% end %>
+
+    <% column_sorted = sorted_field?(column.parameter_name) %>
+    <% sort_direction = column_sorted ? current_action_sort_value.opposite_direction : default_sort_direction %>
+
+    <%= button_to(path, { "data-turbo-action" => turbo_action, method: :get, params: html_form_options.merge(sort_key: column.parameter_name, sort_direction: sort_direction) }) do %>
+      <% if column_sorted %>
+        <% if current_action_sort_value.asc? %>
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 15.75 7.5-7.5 7.5 7.5" />
+          </svg>
+        <% else %>
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
+          </svg>
+        <% end %>
+      <% else %>
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 15 12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9" />
+        </svg>
+      <% end %>
+      <span> <%= column.display_name %> </span>
+    <% end %>
+  <% else %>
+    <%= column.display_name %>
+  <% end %>
+</div>

data/app/views/warped/_filters.html.erb

@@ -0,0 +1,21 @@
+<%# locals: (path:, turbo_action:, **options) %>
+
+<% opts = options.deep_dup %>
+
+<% data = opts.delete(:data) { {} } %>
+<% data.merge!(controller: "filters #{data[:controller]}", filters_filter_outlet: ".warped-filters--filter", turbo_action:) %>
+
+<% html = opts.extract!(:html) %>
+<% html_class = opts.delete(:class) %>
+<% html.merge!(class: "warped-filters #{html_class}") %>
+
+<%= form_with url: path, method: :get, html:, data:, **opts do |f| %>
+  <%= f.submit "Filter", class: "warped-filters--submit" %>
+  <%= f.button "Clear", type: :reset, class: "warped-filters--clear", data: { action: "filters#clearAll" } %>
+
+  <% current_action_filters.each do |filter| %>
+    <%= render "warped/filters/filter", form: f, filter: filter %>
+  <% end %>
+
+  <%= render "warped/hidden_fields", form: f, modules: %i[sortable searchable] %>
+<% end %>

data/app/views/warped/_hidden_fields.html.erb

@@ -0,0 +1,19 @@
+<%# locals: (form:, modules:) %>
+
+<% Array.wrap(modules).each do |module_name| %>
+  <% if module_name.to_sym == :searchable && try(:searched?) %>
+    <%= form.hidden_field search_param, value: search_term %>
+  <% elsif module_name.to_sym == :filterable && try(:filtered?) %>
+    <% filter_url_params.each do |key, value| %>
+      <%= form.hidden_field key, value: %>
+    <% end %>
+  <% elsif module_name.to_sym == :sortable && try(:sorted?) %>
+    <% sort_url_params.each do |key, value| %>
+      <%= form.hidden_field key, value: %>
+    <% end %>
+  <% elsif module_name.to_sym == :pageable && try(:paginated?) %>
+    <% paginate_url_params.each do |key, value| %>
+      <%= form.hidden_field key, value: %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/views/warped/_pagination.html.erb

@@ -0,0 +1,34 @@
+<%# locals: (path:, turbo_action:, **options) %>
+
+<% opts = options.deep_dup %>
+<% pagination_class = "warped--pagination #{opts.delete(:class)}" %>
+
+<% uri = URI(path) %>
+
+<% html_form_options = {}.tap do |hash| %>
+  <% hash.merge!(sort_url_params) if try(:sorted?) %>
+  <% hash.merge!(filter_url_params) if try(:filtered?) %>
+  <% hash.merge!(search_url_params) if try(:searched?) %>
+<% end %>
+
+<%= tag.nav(class: pagination_class, role: "navigation", **opts) do %>
+  <% if pagination[:prev_page] -%> <%= button_to("Previous", path, { "data-turbo-action" => turbo_action, method: :get, form_class: "warped--pagination--btn", params: html_form_options.merge(page: pagination[:prev_page]) }) %>
+  <% else -%> <span class="warped--pagination--btn warped--pagination--btn-disabled" disabled>Previous</span>
+  <% end -%>
+
+  <% pagination[:series].each do |item| -%>
+    <% if    item.is_a?(Integer) -%> <%= button_to(item, path, { "data-turbo-action" => turbo_action, method: :get, form_class: "warped--pagination--btn warped--pagination--btn-inactive", params: html_form_options.merge(page: item) }) %>
+    <% elsif item.is_a?(String) -%> <span class="warped--pagination--btn warped--pagination--btn-active"><%= item %></span>
+    <% elsif item == :gap %>
+      <span class="warped--pagination--btn warped--pagination--btn-gap">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM12.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM18.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" />
+        </svg>
+      </span>
+    <% end -%>
+  <% end -%>
+
+  <% if pagination[:next_page] -%>  <%= button_to("Next", path, { "data-turbo-action" => turbo_action, method: :get, form_class: "warped--pagination--btn", params: html_form_options.merge(page: pagination[:next_page]) }) %>
+  <% else -%>  <span class=" warped--pagination--btn warped--pagination--btn-disabled" disabled>Next</span>
+  <% end -%>
+<% end %>

data/app/views/warped/_row.html.erb

@@ -0,0 +1,19 @@
+<%# locals: (resource:, columns:, path: nil, actions: nil) -%>
+
+<% element_tag = path.present? ? :a : :div %>
+
+<%= content_tag element_tag, **{ class: "warped-table--table--row" }.merge!(href: path).compact_blank do %>
+  <% if (block = yield).present? %>
+    <%= block %>
+  <% else %>
+    <% columns.each do |column| %>
+      <%= render "warped/cell" do %>
+        <%= column.content_for(resource) %>
+      <% end %>
+    <% end %>
+
+    <% if actions.present? %>
+      <%= render "warped/actions", actions:, resource: %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/views/warped/_search.html.erb

@@ -0,0 +1,21 @@
+<%# locals: (path:, turbo_action:, **options) %>
+
+<% opts = options.deep_dup %>
+
+<% html = opts.extract!(:html) %>
+<% html.merge!(class: "warped-searchbar #{opts.delete(:class)}") %>
+
+<% data = opts.delete(:data) { {} } %>
+<% data.merge!(turbo_action:) %>
+
+<%= form_with url: path, method: :get, data:, html:, **opts do |f| %>
+  <%= f.button type: :submit, class: "warped-searchbar--button", name: nil do %>
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+      <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
+    </svg>
+  <% end %>
+
+  <%= f.text_field search_param, autocomplete: "off", value: search_term, class: "warped-searchbar--input" %>
+
+  <%= render "warped/hidden_fields", form: f, modules: %i[pageable sortable filterable] %>
+<% end %>