ransack_search_element 0.0.2.pre.alpha

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: a6231963831824c4d45beb2710387ff159f2d8ceff31dfe15905678e95c8a62e
+  data.tar.gz: 158c5cb3a5c577d2969030635ad93ff61c25d3820ba76629a147eaa9ad233f9d
+SHA512:
+  metadata.gz: e8e734658728bfc5cacafec2e3483191f761d1429f68ba2c44b7377b72b7817a1df39ba47fa1e70d9f778903589e32a9daabc73b490fae96c7369425bdbec11b
+  data.tar.gz: 8ccae8b4e6d1c4b164d73f9ed88882bdcfc1c9ebaf95ab940f5bdb4a6dd5fabd8273babcaf71911dc6dcaf3c9ffe072b1af5cfc0d3b0e13334035f6f472b6aef

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2021 Arthur Dzieniszewski
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,50 @@
+# RansackSearchElement
+
+Generic [Ransack](https://github.com/activerecord-hackery/ransack) backed element
+to give a dynamic frontend for advanced searching and filtering, such as for
+exploratory joins. Still early in development (refactoring?), so contributions
+welcome. This is originally based on a set of React and Bootstrap elements.
+
+## Todo
+
+- [x] Write wrapper Rails tags
+- [ ] Rip out React and replace with Web Components
+- [ ] Rip out Bootstrap and replace with leaner default styles (possibly
+  customizable with sass?)
+- [ ] Decouple javascript further  
+- [ ] Write adapters to interface with other search backends? (big maybe)
+
+## Usage
+Use `ransack_search_tag` in your views, and supply it with more options 
+as of yet to be defined.
+
+## Installation
+
+```ruby
+gem 'ransack_search_element'
+```
+
+And then execute:
+```bash
+$ bundle
+```
+
+Or install it yourself as:
+```bash
+$ gem install ransack_search_element
+```
+
+You will also need to install the accompanying npm package, 
+`ransack-search-element`:
+
+```
+yarn add ransack-search-element
+```
+
+## Contributing
+Yeah just send it.
+
+![Alt](https://i.imgur.com/JNGUWm2.gif?noredirect)
+
+## License
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1,18 @@
+require "bundler/setup"
+
+APP_RAKEFILE = File.expand_path("test/dummy/Rakefile", __dir__)
+load "rails/tasks/engine.rake"
+
+load "rails/tasks/statistics.rake"
+
+require "bundler/gem_tasks"
+
+require "rake/testtask"
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << 'test'
+  t.pattern = 'test/**/*_test.rb'
+  t.verbose = false
+end
+
+task default: :test

data/app/assets/config/ransack_search_element_manifest.js

@@ -0,0 +1,3 @@
+//= link_directory ../stylesheets/ransack_search_element .css
+
+console.log('engine here')

data/app/assets/stylesheets/ransack_search_element/application.scss

@@ -0,0 +1,19 @@
+/*
+ * 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
+ */
+
+html {
+  background-color: red;
+}

data/app/controllers/ransack_search_element/application_controller.rb

@@ -0,0 +1,4 @@
+module RansackSearchElement
+  class ApplicationController < ActionController::Base
+  end
+end

data/app/helpers/ransack_search_element/application_helper.rb

@@ -0,0 +1,10 @@
+module RansackSearchElement
+  module ApplicationHelper
+    def ransack_search_tag(columns, queries)
+      tag.div is: "ransack-search", data: {
+        columns: columns,
+        queries: queries,
+      }.to_json
+    end
+  end
+end

data/app/javascript/ransack-search-element/components/FilterDropdown.tsx

@@ -0,0 +1,226 @@
+import React, { useMemo, useState } from "react";
+import QueryBuilder, {
+  AttributeInfo,
+  Filter,
+  options,
+} from "../utilities/QueryBuilder";
+
+import FilterRow from "./FilterRow";
+
+export type FilterDropdownProps = {
+  columns: {
+    root: {
+      [key: string]: AttributeInfo;
+    };
+    associations: {
+      [key: string]: {
+        [key: string]: AttributeInfo;
+      }[];
+    }[];
+  };
+  queries: {
+    [key: string]: string;
+  };
+  base: string;
+};
+
+/**
+ * This component handles the generation of filters for searching a model.
+ *
+ * @param props
+ * @returns {JSX.Element}
+ */
+export default (props: FilterDropdownProps): JSX.Element => {
+  const { columns, queries } = props;
+
+  const { root: colNames, associations } = columns;
+
+  const possible_values = Object.keys(colNames).concat(
+    associations.map((v) => Object.keys(v)[0]).flat()
+  );
+
+  const queryBuilder = useMemo(() => {
+    return new QueryBuilder(colNames, associations);
+  }, [columns, queries]);
+
+  const [filters, setFilters] = useState<{
+    [key: string]: Filter[];
+  }>(queryBuilder.parseQueries(queries));
+
+  /**
+   * The constructed query string to replace the current location when
+   * the user "filters". Consists of compounding attribute value with its
+   * comparison in the case of a real attribute for the model, or by compounding
+   * the association entity's name, with the attribute, and its comparison in
+   * the case of an association.
+   */
+  const searchValue =
+    window.location.pathname +
+    "?" +
+    Object.entries(filters)
+      .map(([k, v]) => {
+        return v
+          .map((x) => {
+            if (x["ass"] && k.indexOf(x["ass"]) !== 0) {
+              return (
+                `q[${x["ass"] + "_" + k + "_" + x["query"]}]` +
+                "=" +
+                (x["value"] || "")
+              );
+            } else {
+              return `q[${k + "_" + x["query"]}]` + "=" + (x["value"] || "");
+            }
+          })
+          .join("&");
+      })
+      .join("&");
+
+  return (
+    <div className="card shadow-sm mb-2" style={{ minHeight: "150px" }}>
+      <div className="card-body">
+        <div className="card-title">
+          <h4>Filters</h4>
+        </div>
+        {Object.keys(filters).map((v) => {
+          return filters[v].map((x, i) => (
+            <FilterRow
+              key={x}
+              idx={i}
+              attribute={v}
+              filters={filters}
+              setFilters={setFilters}
+              options={options}
+            />
+          ));
+        })}
+      </div>
+      <div className="card-footer d-flex align-items-center">
+        <div className="d-flex">
+          <div className="me-1">
+            <a role="button" className="btn btn-primary" href={searchValue}>
+              Filter
+            </a>
+          </div>
+          <div className="dropdown me-1">
+            <button
+              className="btn btn-secondary dropdown-toggle"
+              type="button"
+              id="dropdownMenuButton"
+              data-bs-toggle="dropdown"
+              aria-haspopup="true"
+              aria-expanded="false"
+            >
+              Add Filter
+            </button>
+            <ul className="dropdown-menu" aria-labelledby="dropdownMenuButton">
+              {Object.keys(colNames).map((v) => (
+                <li key={v}>
+                  <a
+                    href=""
+                    className="dropdown-item"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      let copy = { ...filters };
+                      const t = {};
+                      t["query"] = "eq";
+                      t["type"] = colNames[v]?.type || associations[v]?.type;
+                      t["label"] = colNames[v]?.label || associations[v]?.label;
+
+                      if (copy[v] instanceof Array) {
+                        copy[v].push(t);
+                      } else {
+                        copy[v] = [];
+                        copy[v].push(t);
+                      }
+
+                      setFilters(copy);
+                    }}
+                  >
+                    {colNames[v]?.label || associations[v]?.label}
+                  </a>
+                </li>
+              ))}
+              {associations?.length > 0 ? (
+                <li>
+                  <hr className="dropdown-divider" />
+                </li>
+              ) : null}
+              {associations?.map((x, i) => {
+                const association = Object.keys(associations[i])[0];
+                const attributes = associations[i][association];
+
+                return (
+                  <div className="dropdown dropend">
+                    <a
+                      className="dropdown-item dropdown-toggle"
+                      href="#"
+                      id="dropdown-layouts"
+                      data-bs-toggle="dropdown"
+                      aria-haspopup="true"
+                      aria-expanded="false"
+                    >
+                      {association}
+                    </a>
+                    <div
+                      className="dropdown-menu"
+                      aria-labelledby="dropdown-layouts"
+                    >
+                      {attributes.map((v) => {
+                        const attr = Object.keys(v)[0];
+                        const values = Object.values(v)[0];
+
+                        return (
+                          <li key={attr}>
+                            <a
+                              href=""
+                              className="dropdown-item"
+                              onClick={(e) => {
+                                e.preventDefault();
+                                let copy = { ...filters };
+
+                                const t = {};
+                                t["query"] = "eq";
+                                t["type"] = values.type;
+                                t["label"] = values.label;
+                                t["ass"] = values.ass;
+
+                                if (copy[attr] instanceof Array) {
+                                  copy[attr].push(t);
+                                } else {
+                                  copy[attr] = [];
+                                  copy[attr].push(t);
+                                }
+
+                                setFilters(copy);
+                              }}
+                            >
+                              {values.label}
+                            </a>
+                          </li>
+                        );
+                      })}
+                    </div>
+                  </div>
+                );
+              })}
+            </ul>
+          </div>
+        </div>
+        <div>
+          <a href={window.location.pathname}>
+            <button className="btn btn-danger">Reset</button>
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+/*
+
+
+ */
+
+/*
+
+ */

data/app/javascript/ransack-search-element/components/FilterRow.tsx

@@ -0,0 +1,115 @@
+import React from "react";
+import FormInput from "./FormInput";
+
+function getOptions(type) {
+  switch (type) {
+    case "datetime":
+      return [
+        ["Equals", "eq"],
+        ["Before", "lt"],
+        ["After", "gt"],
+        ["Before/on", "lteq"],
+        ["After/on", "gteq"],
+      ];
+    case "text":
+      return [
+        ["Contains", "cont"],
+        ["Equals", "eq"],
+      ];
+    default:
+      return [
+        ["Contains", "cont"],
+        ["Equals", "eq"],
+        ["Less than", "lt"],
+        ["Greater than", "gt"],
+        ["Less than/equal", "lteq"],
+        ["Greater than/equal", "gteq"],
+      ];
+  }
+}
+
+export default (props) => {
+  const { filters, setFilters, attribute, idx } = props;
+
+  const { query, value, type, label } = filters[attribute][idx];
+
+  const options = getOptions(type);
+
+  return (
+    <div
+      className="d-flex align-items-center filter-row w-100 mb-3"
+      style={{ maxWidth: "650px" }}
+      key={attribute}
+    >
+      <a
+        className="border rounded-circle me-4"
+        style={{
+          height: "35px",
+          width: "35px",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+        }}
+        href=""
+        onClick={(e) => {
+          e.preventDefault();
+          let copy = { ...filters };
+          delete copy[attribute][idx];
+
+          setFilters(copy);
+        }}
+      >
+        <i className="fas fa-times" />
+      </a>
+      <div
+        className="d-flex justify-content-start align-items-center me-3 mb-0"
+        style={{ minWidth: "100px" }}
+      >
+        <b>{label}</b>
+      </div>
+      <div className="w-auto me-3 mb-0">
+        <select
+          defaultValue={filters[attribute][idx]["query"]}
+          className="form-select rounded-pill"
+          style={{ minWidth: "100px" }}
+          onInput={(e) => {
+            const copy = { ...filters };
+            copy[attribute][idx] = copy[attribute][idx]
+              ? copy[attribute][idx]
+              : {};
+            copy[attribute][idx]["query"] = e.target.value;
+            setFilters(copy);
+          }}
+        >
+          {options.map(([k, val]) => (
+            <option
+              key={`${k}${val}`}
+              defaultValue={`${filters[attribute][idx]["query"] === val}`}
+              value={val}
+            >
+              {k}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      <div className="d-flex mb-0" style={{ minWidth: "100px" }}>
+        <FormInput
+          idx={idx}
+          name={attribute}
+          query={filters[attribute][idx]["query"]}
+          colType={filters[attribute][idx]["type"]}
+          className="form-control me-2"
+          filters={filters}
+          setFilters={setFilters}
+          onInput={(e) => {
+            let copy = { ...filters };
+            copy[attribute][idx]["value"] = e.target.value;
+            setFilters(copy);
+          }}
+          value={filters[attribute][idx]["value"]}
+        />
+      </div>
+    </div>
+  );
+};

data/app/javascript/ransack-search-element/components/FormInput.tsx

@@ -0,0 +1,98 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+
+import DatePicker from "react-datepicker";
+import { convertToDate } from "../utilities/dateConverter";
+
+/**
+ * Tries to handle the inputs generically.
+ * Unfortunately, lot of timezone stuff because we need to shift to and from the local time zone.
+ * @param props
+ * @returns {JSX.Element}
+ */
+export default (props) => {
+  const {
+    className,
+    style,
+    colType,
+    value,
+    onInput,
+    filters,
+    setFilters,
+    name,
+    query,
+    idx,
+  } = props;
+
+  const type = useMemo(() => {
+    if (colType === "datetime") return "datetime-local";
+    if (colType === "integer") return "number";
+    if (colType === "text") return "text";
+  }, []);
+
+  const ref = useRef();
+
+  const [date, setDate] = useState(
+    (() => {
+      const d = new Date();
+      d.setHours(d.getHours() - d.getTimezoneOffset() / 60);
+      return d;
+    })()
+  );
+
+  useEffect(() => {
+    if (colType === "datetime" && value) {
+      let copy = { ...filters };
+      const d = new Date(value);
+      d.setHours(d.getHours() + d.getTimezoneOffset() / 60);
+      copy[name][idx]["value"] = convertToDate(d);
+      setFilters(copy);
+      const adjusted_time = new Date(value);
+      adjusted_time.setHours(
+        adjusted_time.getHours() + adjusted_time.getTimezoneOffset() / 60
+      );
+      setDate(adjusted_time);
+    } else if (colType === "datetime") {
+      let copy = { ...filters };
+      copy[name][idx]["value"] = convertToDate(date);
+      setFilters(copy);
+      const adjusted_time = new Date(date);
+      adjusted_time.setHours(
+        adjusted_time.getHours() + adjusted_time.getTimezoneOffset() / 60
+      );
+      setDate(adjusted_time);
+    }
+  }, []);
+
+  switch (type) {
+    case "datetime-local":
+      return (
+        <DatePicker
+          ref={ref}
+          className={`${className} filter-input`}
+          selected={date}
+          onChange={(e: Date) => {
+            let copy = { ...filters };
+            copy[name][idx]["value"] = convertToDate(e);
+            setFilters(copy);
+            setDate(e);
+          }}
+        />
+      );
+      break;
+
+    default:
+      return (
+        <input
+          value={value}
+          onInput={(e) => {
+            e.preventDefault();
+            onInput(e);
+          }}
+          style={style}
+          className={className}
+          type={type}
+        />
+      );
+      break;
+  }
+};

data/app/javascript/ransack-search-element/index.ts

@@ -0,0 +1,44 @@
+import React from "react";
+import FilterDropdown, {
+  FilterDropdownProps,
+} from "./components/FilterDropdown";
+import ReactDOM from "react-dom";
+import registerNestedDropdown from "./utilities/registerNestedDropdown";
+
+/**
+ * Class to handle wrapping of the
+ *
+ * TODO: remove dependency on React and Bootstrap
+ * NOTE: possibly remove dependency on React by just wrapping around a form
+ * with a Stimulus controller. Refactor to expose ERB partials.
+ */
+class RansackSearch extends HTMLDivElement {
+  constructor() {
+    super();
+  }
+
+  connectedCallback() {
+    const data: FilterDropdownProps = {
+      columns: {
+        root: {},
+        associations: [],
+      },
+      queries: [],
+      ...(JSON.parse(this.getAttribute("data")) || {}),
+    };
+
+    ReactDOM.render(
+      [
+        React.createElement(FilterDropdown, {
+          ...data,
+        }),
+      ],
+      this,
+      () => {
+        registerNestedDropdown(this);
+      }
+    );
+  }
+}
+
+customElements.define("ransack-search", RansackSearch, { extends: "div" });

data/app/javascript/ransack-search-element/utilities/QueryBuilder.ts

@@ -0,0 +1,134 @@
+export type Filter = {
+  [key: string]: {
+    label: string;
+    query: string;
+    type: string;
+    value: string | number;
+    ass?: string;
+  };
+};
+
+export type AttributeInfo = {
+  type: string;
+  label: string;
+  ass?: string;
+};
+
+export const options = [
+  ["Contains", "cont"],
+  ["Equals", "eq"],
+  ["Less than", "lt"],
+  ["Greater than", "gt"],
+  ["Less than/equal", "lteq"],
+  ["Greater than/equal", "gteq"],
+];
+
+const options_values = options.map((v) => v[1]);
+
+/**
+ * Recursively iterate through relations with matching prefixes.
+ * Attempts to get the accompanying AttributeInfo given a full query.
+ * @param full_query
+ * @param ass
+ */
+const get_association = (
+  full_query,
+  ass
+): {
+  [association: string]: AttributeInfo;
+} => {
+  if (ass instanceof Array) {
+    return ass.find((dict) => {
+      return full_query.includes(Object.keys(dict)[0]);
+    });
+  }
+
+  const key = Object.keys(ass).find((k) => full_query.includes(k));
+
+  if (typeof key === "undefined") return null;
+
+  const remainder = full_query.slice(full_query.indexOf(key) + key.length + 1);
+
+  return get_association(remainder, ass[key]);
+};
+
+export default class QueryBuilder {
+  attributes = {};
+  associations;
+  possible_values = [];
+
+  constructor(attributes, associations) {
+    this.attributes = attributes;
+    this.associations = associations;
+
+    this.possible_values = Object.keys(attributes).concat(
+      associations.map((v) => Object.keys(v)[0]).flat()
+    );
+  }
+
+  parseQueries(queries) {
+    let s = queries || {};
+
+    let f = {};
+
+    if (Object.entries(s)?.length > 0) {
+      for (const [k, v] of Object.entries(s)) {
+        // sorting parameter
+        if (k === "s") continue;
+
+        const query = options_values
+          .filter((v) => k.includes(v))
+          .reduce((x, y) => (x.length > y.length ? x : y), "");
+
+        const attribute = this.possible_values
+          .filter((v) => k.includes(v))
+          .reduce((x, y) => (x.length > y.length ? x : y), "");
+
+        const asses = get_association(
+          k,
+          this.associations.reduce((acc, cur) => ({ ...acc, ...cur }), {})
+        );
+
+        if (asses) {
+          const full_ass_key = Object.keys(asses)[0];
+          const full_ass_values = Object.values(asses)[0];
+
+          const t = {};
+          t["query"] = query;
+          t["value"] = v;
+          t["type"] = full_ass_values?.type;
+          t["label"] = full_ass_values?.label;
+          t["ass"] = attribute;
+
+          if (query.length > 0 && attribute.length > 0) {
+            if (f[`${attribute}_${full_ass_key}`] instanceof Array) {
+              f[`${attribute}_${full_ass_key}`].push(t);
+            } else {
+              f[`${attribute}_${full_ass_key}`] = [];
+              f[`${attribute}_${full_ass_key}`].push(t);
+            }
+          }
+        } else {
+          const t = {};
+          t["query"] = query;
+          t["value"] = v;
+          t["type"] = this.attributes[attribute]?.type;
+          t["label"] = this.attributes[attribute]?.label;
+
+          if (query.length > 0 && attribute.length > 0) {
+            if (f[`${attribute}`] instanceof Array) {
+              f[`${attribute}`].push(t);
+            } else {
+              f[`${attribute}`] = [];
+              f[`${attribute}`].push(t);
+            }
+          }
+        }
+      }
+    } else {
+      return {};
+    }
+
+    return f;
+  }
+}

data/app/javascript/ransack-search-element/utilities/dateConverter.ts

@@ -0,0 +1,5 @@
+export function convertToDate(date) {
+    const offset = date.getTimezoneOffset();
+    const new_date = new Date(date.getTime() - offset * 60 * 1000);
+    return new_date.toISOString().split("T")[0];
+}

data/app/javascript/ransack-search-element/utilities/registerNestedDropdown.ts

@@ -0,0 +1,65 @@
+import { Dropdown } from "bootstrap";
+
+export default function (root: Document | HTMLElement) {
+  const CLASS_NAME = "has-child-dropdown-show";
+  Dropdown.prototype.toggle = (function (_orginal) {
+    return function () {
+      root.querySelectorAll("." + CLASS_NAME).forEach(function (e) {
+        e.classList.remove(CLASS_NAME);
+      });
+      let dd = this._element
+        .closest(".dropdown")
+        .parentNode.closest(".dropdown");
+      for (; dd && dd !== root; dd = dd.parentNode.closest(".dropdown")) {
+        dd.classList.add(CLASS_NAME);
+      }
+      return _orginal.call(this);
+    };
+  })(Dropdown.prototype.toggle);
+
+  root.querySelectorAll(".dropdown").forEach(function (dd) {
+    dd.addEventListener("hide.bs.dropdown", function (e) {
+      if (this.classList.contains(CLASS_NAME)) {
+        this.classList.remove(CLASS_NAME);
+        e.preventDefault();
+      }
+      if (
+        e.clickEvent &&
+        e.clickEvent
+          .composedPath()
+          .some(
+            (el) => el.classList && el.classList.contains("dropdown-toggle")
+          )
+      ) {
+        e.preventDefault();
+      }
+      e.stopPropagation(); // do not need pop in multi level mode
+    });
+  });
+
+  // for hover
+  function getDropdown(element) {
+    return Dropdown.getInstance(element) || new Dropdown(element);
+  }
+
+  root
+    .querySelectorAll(".dropdown-hover, .dropdown-hover-all .dropdown")
+    .forEach(function (dd) {
+      dd.addEventListener("mouseenter", function (e) {
+        let toggle = e.target.querySelector(
+          ':scope>[data-bs-toggle="dropdown"]'
+        );
+        if (!toggle.classList.contains("show")) {
+          getDropdown(toggle).toggle();
+        }
+      });
+      dd.addEventListener("mouseleave", function (e) {
+        let toggle = e.target.querySelector(
+          ':scope>[data-bs-toggle="dropdown"]'
+        );
+        if (toggle.classList.contains("show")) {
+          getDropdown(toggle).toggle();
+        }
+      });
+    });
+}

data/app/jobs/ransack_search_element/application_job.rb

@@ -0,0 +1,4 @@
+module RansackSearchElement
+  class ApplicationJob < ActiveJob::Base
+  end
+end

data/app/mailers/ransack_search_element/application_mailer.rb

@@ -0,0 +1,6 @@
+module RansackSearchElement
+  class ApplicationMailer < ActionMailer::Base
+    default from: 'from@example.com'
+    layout 'mailer'
+  end
+end

data/app/models/ransack_search_element/application_record.rb

@@ -0,0 +1,5 @@
+module RansackSearchElement
+  class ApplicationRecord < ActiveRecord::Base
+    self.abstract_class = true
+  end
+end

data/app/views/layouts/ransack_search_element/application.html.erb

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Ransack search element</title>
+  <%= csrf_meta_tags %>
+  <%= csp_meta_tag %>
+
+  <%= stylesheet_link_tag    "ransack_search_element/application", media: "all" %>
+</head>
+<body>
+
+<%= yield %>
+
+</body>
+</html>

data/config/routes.rb

@@ -0,0 +1,2 @@
+RansackSearchElement::Engine.routes.draw do
+end

data/lib/ransack_search_element/engine.rb

@@ -0,0 +1,21 @@
+module RansackSearchElement
+  class Engine < ::Rails::Engine
+    isolate_namespace RansackSearchElement
+
+    config.autoload_once_paths = %W(
+      #{root}/app/channels
+      #{root}/app/controllers
+      #{root}/app/controllers/concerns
+      #{root}/app/helpers
+      #{root}/app/models
+      #{root}/app/models/concerns
+      #{root}/app/jobs
+    )
+
+    initializer "ransack_search_element.helpers", before: :load_config_initializers do
+      ActiveSupport.on_load(:action_controller_base) do
+        helper RansackSearchElement::Engine.helpers
+      end
+    end
+  end
+end

data/lib/ransack_search_element/version.rb

@@ -0,0 +1,3 @@
+module RansackSearchElement
+  VERSION = '0.0.2-alpha'
+end

data/lib/ransack_search_element.rb

@@ -0,0 +1,5 @@
+require "ransack_search_element/version"
+require "ransack_search_element/engine"
+
+module RansackSearchElement
+end

data/lib/tasks/ransack_search_element_tasks.rake

@@ -0,0 +1,4 @@
+# desc "Explaining what the task does"
+# task :ransack_search_element do
+#   # Task goes here
+# end

metadata

@@ -0,0 +1,84 @@
+--- !ruby/object:Gem::Specification
+name: ransack_search_element
+version: !ruby/object:Gem::Version
+  version: 0.0.2.pre.alpha
+platform: ruby
+authors:
+- Arthur Dzieniszewski
+autorequire:
+bindir: bin
+cert_chain: []
+date: 2021-09-05 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 6.1.4
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 6.1.4
+description: Generic, advanced search element for Ransack.
+email:
+- arthurdzieniszewski@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- MIT-LICENSE
+- README.md
+- Rakefile
+- app/assets/config/ransack_search_element_manifest.js
+- app/assets/stylesheets/ransack_search_element/application.scss
+- app/controllers/ransack_search_element/application_controller.rb
+- app/helpers/ransack_search_element/application_helper.rb
+- app/javascript/ransack-search-element/components/FilterDropdown.tsx
+- app/javascript/ransack-search-element/components/FilterRow.tsx
+- app/javascript/ransack-search-element/components/FormInput.tsx
+- app/javascript/ransack-search-element/index.ts
+- app/javascript/ransack-search-element/utilities/QueryBuilder.ts
+- app/javascript/ransack-search-element/utilities/dateConverter.ts
+- app/javascript/ransack-search-element/utilities/registerNestedDropdown.ts
+- app/jobs/ransack_search_element/application_job.rb
+- app/mailers/ransack_search_element/application_mailer.rb
+- app/models/ransack_search_element/application_record.rb
+- app/views/layouts/ransack_search_element/application.html.erb
+- config/routes.rb
+- lib/ransack_search_element.rb
+- lib/ransack_search_element/engine.rb
+- lib/ransack_search_element/version.rb
+- lib/tasks/ransack_search_element_tasks.rake
+homepage: https://github.com/adzienis/ransack-search-element
+licenses:
+- MIT
+metadata:
+  allowed_push_host: https://rubygems.org/
+  homepage_uri: https://github.com/adzienis/ransack-search-element
+  source_code_uri: https://github.com/adzienis/ransack-search-element
+  changelog_uri: https://github.com/adzienis/ransack-search-element/CHANGELOG.md
+post_install_message:
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">"
+    - !ruby/object:Gem::Version
+      version: 1.3.1
+requirements: []
+rubygems_version: 3.2.15
+signing_key:
+specification_version: 4
+summary: Generic, advanced search element for Ransack.
+test_files: []