reflex_behaviors 0.0.2 → 0.0.3

data/app/assets/config/reflex_behaviors_manifest.js

@@ -0,0 +1 @@
+//= link reflex_behaviors.css

data/app/assets/stylesheets/devtools.css

@@ -0,0 +1,51 @@
+#reflex-behaviors-devtools {
+  background-color: ghostwhite;
+  border-radius: 10px;
+  border: solid 1px gainsboro;
+  bottom: 20px;
+  filter: drop-shadow(0 4px 3px rgba(0,0,0,.07));
+  left: 50%;
+  padding: 5px 10px;
+  position: fixed;
+  transform: translateX(-50%);
+  z-index: 10000;
+}
+
+#reflex-behaviors-devtools * {
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+#reflex-behaviors-devtools strong {
+  color: silver;
+  font-weight: 600;
+}
+
+#reflex-behaviors-devtools button[data-action='close'] {
+  background-color: gainsboro;
+  border-radius: 50%;
+  color: white;
+  font-size: 12px;
+  height: 18px;
+  line-height: 18px;
+  margin: 0 -5px 0 10px;
+  padding: 0 3px;
+  width: 18px;
+}
+
+#reflex-behaviors-devtools .devtool {
+  cursor: pointer;
+  display: inline-block;
+  margin-left: 5px;
+}
+
+#reflex-behaviors-devtools .devtool input[type='checkbox'] {
+  margin-bottom: 2px;
+}
+
+#reflex-behaviors-devtools .devtool input,
+#reflex-behaviors-devtools .devtool label {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+}

data/app/assets/stylesheets/reflex_behaviors.css

@@ -0,0 +1,4 @@
+/* TODO: precompile the stylesheet and host on a CDN
+ *= require_self
+ *= require_tree .
+ */

data/app/assets/stylesheets/toggle.css

@@ -0,0 +1,56 @@
+body[data-devtools~='toggle'] toggle-trigger {
+  box-sizing: border-box;
+  outline-offset: -2px;
+  outline: solid 1px salmon;
+}
+
+.reflex-behaviors-tooltip.trigger {
+  background-color: salmon;
+  border-bottom-left-radius: 0;
+  color: white;
+}
+
+.reflex-behaviors-tooltip.trigger .shared,
+.reflex-behaviors-tooltip.trigger strong{
+  color: darkred;
+}
+
+.reflex-behaviors-tooltip.trigger::after {
+  border-color: salmon transparent transparent transparent;
+  border-style: solid;
+  border-width: 5px;
+  content: "";
+  left: 5px;
+  margin-left: -5px;
+  position: absolute;
+  top: 100%;
+}
+
+body[data-devtools~='toggle'] toggle-target.debug {
+  box-sizing: border-box;
+  /*display: inline-block;*/
+  outline-offset: -2px;
+  outline: solid 1px lightskyblue;
+}
+
+.reflex-behaviors-tooltip.target {
+  background-color: lightskyblue;
+  border-top-left-radius: 0;
+  color: white;
+}
+
+.reflex-behaviors-tooltip.target .shared,
+.reflex-behaviors-tooltip.target strong {
+  color: blue;
+}
+
+.reflex-behaviors-tooltip.target::after {
+  border-color: transparent transparent lightskyblue transparent;
+  border-style: solid;
+  border-width: 5px;
+  bottom: 100%;
+  content: "";
+  left: 5px;
+  margin-left: -5px;
+  position: absolute;
+}

data/app/assets/stylesheets/tooltip.css

@@ -0,0 +1,18 @@
+.reflex-behaviors-tooltip {
+  border-radius: 5px;
+  filter: drop-shadow(0 4px 3px rgba(0,0,0,.07));
+  font-family: monospace;
+  opacity: 0.9;
+  padding: 8px;
+  position: absolute;
+  white-space: nowrap;
+  z-index: 10000;
+}
+
+.reflex-behaviors-tooltip hr {
+  border-top: solid 1px white;
+  height: 1px;
+  margin-bottom: 5px;
+  margin-top: 5px;
+  opacity: 0.2;
+}

data/app/helpers/reflex_behaviors/application_helper.rb

@@ -3,18 +3,25 @@
 require ReflexBehaviors::Engine.root.join("lib/reflex_behaviors/tag_builders")
 
 module ReflexBehaviors::ApplicationHelper
-  def friendly_partial_path(partial_path = nil, start: 1)
-    prefix = "app/views/"
-    partial_path ||= caller_locations(start, 1).first.path
-    partial_path = partial_path.split(prefix).last if partial_path.include?(prefix)
-    partial_path[0, partial_path.index(".") || partial_path.length].gsub(/\/_/, "/")
+  def idomatic_partial_path(partial_path)
+    partial_path.to_s.gsub("/_", "/").split(".").first
   end
 
   def current_partial_path
-    friendly_partial_path start: 2
+    path = nil
+    prefix = "app/views/"
+    start = 1
+    while path.nil? && start < 100
+      location = caller_locations(start, 1).first
+      path = location.path if location.path.include?(prefix)
+      start += 1
+    end
+    return "unknown" if path.nil?
+    path[(path.index(prefix) + prefix.length), path.rindex("/")]
   end
 
   def reflex_render(**kwargs)
+    kwargs[:partial] = idomatic_partial_path(kwargs[:partial])
     kwargs[:assigns] ||= {}
     kwargs[:assigns].each { |key, val| kwargs[:assigns][key] = transportable_value(val) }
     kwargs[:locals] ||= {}

data/app/javascript/devtools/index.js

@@ -0,0 +1,117 @@
+// Tasks
+// - [ ] audit css class names and refine
+// - [ ] extract stylesheet and host on cdn
+// - [ ] ensure tooltips don't overlap or run off screen
+// - [ ] add ability to remember start/stop in local storage
+// - [ ] isolate individual tools and register them (i.e. plugin framework)
+//       will probably have behaviors register any devtools they support
+//
+//       Tool markup example
+//
+//         <div name="TOOL_NAME" class="devtool">
+//           <input name="TOOL_NAME-checkbox" value="TOOL_NAME" type="checkbox">
+//           <label for="TOOL_NAME-checkbox">TOOL_LABEL</label>
+//         </div>
+
+let tray
+
+addEventListener('click', () => {
+  setTimeout(() => {
+    document
+      .querySelectorAll('.reflex-behaviors-tooltip')
+      .forEach(tooltip => tooltip.remove())
+  }, 300)
+})
+
+function tooltip (reflexElement, title, body, cssClass, position = 'top') {
+  const el = document.createElement('div')
+  el.classList.add('reflex-behaviors-tooltip', cssClass)
+  el.innerHTML = `<strong>${title}</strong><hr>${body}`
+  document.body.appendChild(el)
+
+  const coords = reflexElement.coordinates
+
+  if (position === 'top') {
+    el.style.top = `${Math.ceil(coords.top - el.offsetHeight - 5)}px`
+    el.style.left = `${Math.ceil(coords.left + 4)}px`
+  }
+
+  if (position === 'bottom') {
+    el.style.top = `${Math.ceil(coords.top + coords.height + 5)}px`
+    el.style.left = `${Math.ceil(coords.left + 4)}px`
+  }
+}
+
+function enabled () {
+  const tools = document.body.dataset.devtools || ''
+  return tools.trim().split(' ')
+}
+
+function isEnabled (tool) {
+  return enabled().includes(tool)
+}
+
+function enable (tool) {
+  if (isEnabled(tool)) return
+  const list = enabled()
+  list.push(tool)
+  document.body.dataset.devtools = list.join(' ').trim()
+}
+
+function disable (tool) {
+  const list = enabled()
+  const index = list.indexOf(tool)
+  if (index < 0) return
+  list.splice(index, 1)
+  document.body.dataset.devtools = list.join(' ').trim()
+}
+
+function stop () {
+  if (!tray) return
+  tray
+    .querySelectorAll('.devtool')
+    .forEach(devtool => disable(devtool.getAttribute('name')))
+  tray.remove()
+  tray = null
+}
+
+function start () {
+  stop()
+  tray = document.createElement('div')
+  tray.id = 'reflex-behaviors-devtools'
+  tray.innerHTML = `
+    <strong>DEVTOOLS</strong>
+    <div name="toggle" class="devtool">
+      <input name="toggle-checkbox" value="toggle" type="checkbox">
+      <label for="toggle-checkbox">toggles<small>(trigger/target)</small></label>
+    </div>
+    <button data-action='close'>X</button>
+  `
+  document.body.appendChild(tray)
+  tray
+    .querySelector('button[data-action=close]')
+    .addEventListener('click', () => stop())
+  tray.querySelectorAll('.devtool').forEach(devtool => {
+    devtool.querySelector('input').addEventListener('change', event => {
+      event.target.checked
+        ? enable(event.target.value)
+        : disable(event.target.value)
+    })
+    devtool.addEventListener('click', event => {
+      if (event.target.tagName.match(/input/i)) return
+      event.target
+        .closest('.devtool')
+        .querySelector('input')
+        .click()
+    })
+  })
+}
+
+export default {
+  disable,
+  enable,
+  isEnabled,
+  start,
+  stop,
+  tooltip
+}

data/app/javascript/elements/reflex_element.js

@@ -17,4 +17,19 @@ export default class ReflexElement extends HTMLElement {
       ).toString(16)
     )
   }
+
+  get viewStack () {
+    if (!this.dataset.viewStack) return []
+    return JSON.parse(this.dataset.viewStack)
+  }
+
+  get coordinates () {
+    const rect = this.getBoundingClientRect()
+    return {
+      left: rect.left + window.scrollX,
+      top: rect.top + window.scrollY,
+      width: this.offsetWidth,
+      height: this.offsetHeight
+    }
+  }
 }

data/app/javascript/elements/toggle_trigger_element.js

@@ -1,6 +1,50 @@
 import ReflexElement from './reflex_element'
+import devtools from '../devtools'
 
 export default class ToggleTriggerElement extends ReflexElement {
+  constructor () {
+    super()
+
+    this.addEventListener('mouseenter', event => {
+      if (devtools.isEnabled('toggle')) {
+        clearTimeout(this.mouseLeaveTimeout)
+        event.target.target.classList.add('debug')
+        event.target.showDebugTooltips()
+      }
+    })
+
+    this.addEventListener('mouseleave', event => {
+      if (devtools.isEnabled('toggle')) {
+        clearTimeout(this.mouseLeaveTimeout)
+        this.mouseLeaveTimeout = setTimeout(() => {
+          event.target.target.classList.remove('debug')
+          document
+            .querySelectorAll('.reflex-behaviors-tooltip')
+            .forEach(tooltip => tooltip.remove())
+        }, 250)
+      }
+    })
+  }
+
+  showDebugTooltips () {
+    const sharedViewPath = this.sharedViewPath
+    let shared = false
+    let title = `controls: ${this.controls}`
+    let body = this.viewStack.map(path => {
+      shared = shared || path === sharedViewPath
+      return `<div class='${shared ? 'shared' : null}'>${path}<div>`
+    })
+    devtools.tooltip(this, title, body.join(''), 'trigger', 'top')
+
+    shared = false
+    title = `id: ${this.target.id}`
+    body = this.target.viewStack.map(path => {
+      shared = shared || path === sharedViewPath
+      return `<div class='${shared ? 'shared' : null}'>${path}<div>`
+    })
+    devtools.tooltip(this.target, title, body.join(''), 'target', 'bottom')
+  }
+
   collapse () {
     try {
       this.target.remove()
@@ -10,6 +54,11 @@ export default class ToggleTriggerElement extends ReflexElement {
     }
   }
 
+  get sharedViewPath () {
+    const targetViewStack = this.target.viewStack
+    return this.viewStack.find(path => targetViewStack.includes(path))
+  }
+
   get controls () {
     return this.getAttribute('aria-controls')
   }

data/app/javascript/index.js

@@ -3,3 +3,10 @@ TurboReady.initialize(Turbo.StreamActions)
 
 import 'turbo_reflex'
 import './elements'
+import devtools from './devtools'
+
+const { enable, disable, start, stop } = devtools
+
+self.ReflexBehavors = {
+  devtools: { enable, disable, start, stop }
+}

data/lib/reflex_behaviors/engine.rb

@@ -8,6 +8,7 @@ module ReflexBehaviors
   end
 
   class Engine < ::Rails::Engine
+    config.assets.precompile << "reflex_behaviors_manifest.js"
     config.reflex_behaviors = ActiveSupport::OrderedOptions.new
 
     ActiveSupport.on_load(:action_controller) do

data/lib/reflex_behaviors/tag_builders/base_tag_builder.rb

@@ -9,6 +9,14 @@ module ReflexBehaviors
       def initialize(view_context)
         @view_context = view_context
       end
+
+      def view_stack
+        prefix = "app/views/"
+        locations = caller_locations.select { |location| location.path.include?(prefix) }
+        locations.each_with_object(Set.new) do |location, memo|
+          memo << location.path[(location.path.index(prefix) + prefix.length)..]
+        end
+      end
     end
   end
 end

data/lib/reflex_behaviors/tag_builders/toggle_tags_builder.rb

@@ -5,22 +5,39 @@ require_relative "base_tag_builder"
 module ReflexBehaviors::TagBuilders
   class ToggleTagsBuilder < BaseTagBuilder
     def target_tag(id, expanded: false, **kwargs, &block)
-      return unless expanded || target_expanded?(id)
-
       kwargs = kwargs.with_indifferent_access
       kwargs[:id] = id
       kwargs[:role] = "region"
+
       kwargs[:aria] ||= {}
-      kwargs[:aria] = target_aria(**kwargs[:aria])
+      kwargs[:aria][:label] ||= "Dynamic Content Region"
+      kwargs[:aria][:live] ||= "polite"
 
-      content_tag("toggle-target", nil, kwargs, &block)
+      kwargs[:data] ||= {}
+      kwargs[:data][:view_stack] = view_stack.to_json if Rails.env.development?
+
+      if expanded || target_expanded?(id)
+        content_tag("toggle-target", nil, kwargs, &block)
+      else
+        content_tag("toggle-target", nil, kwargs)
+      end
     end
 
-    def trigger_tag(target:, render:, disabled: false, aria: {}, data: {remember: false, auto_collapse: false}, **kwargs, &block)
+    def trigger_tag(target:, render:, action: :toggle, disabled: false, **kwargs, &block)
       kwargs = kwargs.with_indifferent_access
       kwargs[:id] ||= "#{target}-toggle-trigger"
-      kwargs[:aria] = trigger_aria(controls: target, expanded: target_expanded?(target), **aria)
-      kwargs[:data] = trigger_data(render: render, disabled: disabled, **data)
+
+      kwargs[:aria] ||= {}
+      kwargs[:aria][:atomic] ||= true
+      kwargs[:aria][:relevant] ||= "all"
+      kwargs[:aria].merge!(controls: target, expanded: target_expanded?(target))
+
+      kwargs[:data] ||= {}
+      kwargs[:data][:auto_collapse] = !!kwargs[:data][:auto_collapse]
+      kwargs[:data][:view_stack] = view_stack.to_json if Rails.env.development?
+      kwargs[:data][:remember] = !!kwargs[:data][:remember]
+      kwargs[:data][:render] = render
+      kwargs[:data][:turbo_reflex] = "ReflexBehaviors::ToggleReflex##{action}" unless disabled
 
       content_tag("toggle-trigger", nil, kwargs, &block)
     end
@@ -32,31 +49,5 @@ module ReflexBehaviors::TagBuilders
     def target_collapsed?(target)
       !target_expanded?(target)
     end
-
-    private
-
-    def trigger_aria(controls:, expanded:, **kwargs)
-      kwargs = kwargs.with_indifferent_access
-      kwargs[:atomic] ||= true
-      kwargs[:relevant] ||= "all"
-      kwargs.merge(controls: controls, expanded: !!expanded)
-    end
-
-    def trigger_data(render:, disabled: false, remember: false, auto_collapse: false, **kwargs)
-      kwargs = kwargs.with_indifferent_access
-      kwargs.merge(
-        turbo_reflex: disabled ? nil : "ReflexBehaviors::ToggleReflex#toggle",
-        render: render,
-        remember: !!remember,
-        auto_collapse: !!auto_collapse
-      )
-    end
-
-    def target_aria(**kwargs)
-      kwargs = kwargs.with_indifferent_access
-      kwargs[:label] ||= "Dynamic Content Region"
-      kwargs[:live] ||= "polite"
-      kwargs
-    end
   end
 end

data/lib/reflex_behaviors/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module ReflexBehaviors
-  VERSION = "0.0.2"
+  VERSION = "0.0.3"
 end

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reflex_behaviors",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Pre-built easy to use reactive TurboReflex behaviors for Rails/Hotwire apps.",
   "main": "app/javascript/index.js",
   "repository": "https://github.com/hopsoft/reflex_behaviors",

data/tags

@@ -213689,7 +213689,7 @@ VDash	node_modules/parse-srcset/tests/he.js	/^	var decodeMap = {'Aacute':'\\xC1'
 VDash	node_modules/simple-html-tokenizer/dist/es6/index.js	/^    Aacute: "Á", aacute: "á", Abreve: "Ă", abreve: "ă", ac: "∾", acd: "∿", acE: "∾̳",/;"	p	variable:namedCharRefs
 VDash	node_modules/simple-html-tokenizer/dist/simple-html-tokenizer.js	/^        Aacute: "Á", aacute: "á", Abreve: "Ă", abreve: "ă", ac: "∾", acd: "∿", acE: "∾/;"	p	variable:anonymousFunction3825d8d70300.namedCharRefs
 VDash	node_modules/simple-html-tokenizer/dist/types/generated/html5-named-char-refs.d.ts	/^    VDash: string;$/;"	C
-VERSION	lib/reflex_behaviors/version.rb	/^  VERSION = "0.0.2"$/;"	C	module:ReflexBehaviors
+VERSION	lib/reflex_behaviors/version.rb	/^  VERSION = "0.0.3"$/;"	C	module:ReflexBehaviors
 VERSION	node_modules/@angular/compiler/esm2015/src/output/source_map.js	/^const VERSION = 3;$/;"	C
 VERSION	node_modules/@angular/compiler/esm2015/src/version.js	/^export const VERSION = new Version('8.2.14');$/;"	C
 VERSION	node_modules/@angular/compiler/esm5/src/output/source_map.js	/^var VERSION = 3;$/;"	v
@@ -473563,7 +473563,7 @@ version	node_modules/yaml/dist/index.js	/^  version: '1.2'$/;"	p	variable:defaul
 version	node_modules/yaml/dist/test-events.js	/^    version: '1.2'$/;"	p	variable:testEvents.anonymousObjecta2b129440205
 version	node_modules/yaml/package.json	/^  "version": "1.8.3",$/;"	s
 version	node_modules/yocto-queue/package.json	/^	"version": "0.1.0",$/;"	s
-version	package.json	/^  "version": "0.0.1",$/;"	s
+version	package.json	/^  "version": "0.0.2",$/;"	s
 versionIncluded	node_modules/prettier-standard/src/vendor/node_modules/resolve/lib/core.js	/^function versionIncluded(specifierValue) {$/;"	f
 versionIncluded	node_modules/resolve/lib/core.js	/^function versionIncluded(specifierValue) {$/;"	f
 versionInfo	node_modules/graphql/version.d.ts	/^export const versionInfo: {$/;"	C

data/yarn.lock

@@ -165,9 +165,9 @@
   integrity sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA==
 
 "@types/node@*":
-  version "18.11.9"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.11.9.tgz#02d013de7058cea16d36168ef2fc653464cfbad4"
-  integrity sha512-CRpX21/kGdzjOpFsZSkcrXMGIBWMGNIHXXBVFSH+ggkftxg+XYP20TESbh+zFvFj3EQOl5byk0HTRn1IL6hbqg==
+  version "18.11.10"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.11.10.tgz#4c64759f3c2343b7e6c4b9caf761c7a3a05cee34"
+  integrity sha512-juG3RWMBOqcOuXC643OAdSA525V44cVgGV6dUDuiFtss+8Fk5x1hI93Rsld43VeJVIeqlP9I7Fn9/qaVqoEAuQ==
 
 "@types/unist@^2.0.0", "@types/unist@^2.0.2":
   version "2.0.6"

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: reflex_behaviors
 version: !ruby/object:Gem::Version
-  version: 0.0.2
+  version: 0.0.3
 platform: ruby
 authors:
 - Nate Hopkins (hopsoft)
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-11-30 00:00:00.000000000 Z
+date: 2022-12-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -152,7 +152,13 @@ files:
 - Rakefile
 - app/assets/builds/reflex_behaviors.js
 - app/assets/builds/reflex_behaviors.js.map
+- app/assets/config/reflex_behaviors_manifest.js
+- app/assets/stylesheets/devtools.css
+- app/assets/stylesheets/reflex_behaviors.css
+- app/assets/stylesheets/toggle.css
+- app/assets/stylesheets/tooltip.css
 - app/helpers/reflex_behaviors/application_helper.rb
+- app/javascript/devtools/index.js
 - app/javascript/elements/index.js
 - app/javascript/elements/reflex_element.js
 - app/javascript/elements/toggle_target_element.js