tailmix 0.4.6 → 0.4.8

data/examples/modal_component.rb

@@ -1,201 +1,69 @@
 # frozen_string_literal: true
 
 require_relative "../lib/tailmix"
+require_relative "helpers"
 
 class ModalComponent
   include Tailmix
   attr_reader :ui
 
   tailmix do
-    element :base, "fixed inset-0 z-50 flex items-center justify-center" do
-      dimension :open, default: true do
-        variant true, "visible opacity-100"
-        variant false, "invisible opacity-0"
-      end
-      stimulus.controller("modal").action_payload(:toggle, as: :toggle_data)
-    end
+    plugin :auto_focus, on: :open_button, delay: 100
+    state :open, default: false, toggle: true
 
-    element :overlay, "fixed inset-0 bg-black/50 transition-opacity" do
-      stimulus.context("modal").action(:click, :close)
-    end
-
-    element :panel, "relative bg-white rounded-lg shadow-xl transition-transform transform" do
-      dimension :size, default: :md do
-        variant :sm, "w-full max-w-sm p-4" do
-          classes "dark:text-slate-400", group: :dark_mode
-          classes "one two"
-        end
-        variant :md, "w-full max-w-md p-6"
-        variant :lg, "w-full max-w-lg p-8"
-      end
-      stimulus.context("modal").target("panel")
+    element :container do
     end
 
-    element :title, "text-lg font-semibold text-gray-900"
-    element :body, "mt-2 text-sm text-gray-600"
-    element :close_button, "absolute top-2 right-2 p-1 text-gray-400 rounded-full hover:bg-gray-100 hover:text-gray-600" do
-      stimulus.context("modal").action(:click, :close)
+    element :open_button do
+      # We attach the `click` event to our auto-generated action.
+      on :click, :toggle_open
     end
 
-    element :footer, "mt-4 pt-4 border-t flex justify-end"
-    element :confirm_button, "relative inline-flex items-center px-4 py-2 bg-blue-600 text-white font-semibold rounded-md hover:bg-blue-700" do
-      stimulus.controller("form-submission")
-              .action(:click, :submit)
-              .action_payload(:enter_pending_state, as: :pending_data)
+    element :base do
+      dimension :open do
+        variant true, "fixed inset-0 z-50 flex items-center justify-center visible opacity-100 transition-opacity"
+        variant false, "invisible opacity-0"
+      end
     end
 
-    element :spinner, "absolute inset-0 flex items-center justify-center hidden"
-
-    action :toggle, method: :toggle do
-      element :overlay do
-        classes "hidden"
-      end
-      element :panel do
-        classes "hidden"
+    element :overlay do
+      dimension :open do
+        variant true, "fixed inset-0 bg-black/50"
+        variant false, "hidden"
       end
+      on :click, :toggle_open
     end
 
-    action :lock, method: :add do
-      element :close_button do
-        classes "hidden"
-      end
-      element :panel do
-        data locked: true, reason: "processing"
+    element :panel, "relative bg-white rounded-lg shadow-xl" do
+      dimension :open do
+        variant true, "block"
+        variant false, "hidden"
       end
     end
 
-    action :enter_pending_state, method: :add do
-      element :confirm_button do
-        classes "opacity-75 cursor-not-allowed"
-      end
-      element :spinner do
-        classes "flex"
-      end
+    element :close_button, "absolute top-2 right-2 p-1 text-gray-500 rounded-full cursor-pointer" do
+      on :click, :toggle_open
     end
-  end
 
-  def initialize(size: :md, open: false)
-    @ui = tailmix(size: size, open: open)
+    element :title, "text-lg font-semibold text-gray-900 p-4 border-b"
+    element :body, "p-4 text-gray-900"
   end
 
-  def lock!
-    @ui.action(:lock).apply!
+  def initialize(open: false, id: nil)
+    @ui = tailmix(open: open, id: id)
   end
 end
 
-puts "-" * 100
-# puts ModalComponent.dev.docs
-# puts ""
-# puts "Scaffolds:"
-# puts ""
-# puts ModalComponent.dev.stimulus.scaffold
-# puts ""
-
-# >>>
-#
-# == Tailmix Docs for ModalComponent ==
-# Signature: `initialize(open: true, size: :md)`
-#
-# Dimensions:
-#   - open (default: true)
-#     - true:
-#       - classes : "visible opacity-100"
-#     - false:
-#       - classes : "invisible opacity-0"
-#   - size (default: :md)
-#     - :sm:
-#       - classes : "w-full max-w-sm p-4"
-#       - classes (group: :dark_mode): "dark:text-slate-400"
-#       - classes : "one two"
-#     - :md:
-#       - classes : "w-full max-w-md p-6"
-#     - :lg:
-#       - classes : "w-full max-w-lg p-8"
-#
-# Actions:
-#   - :toggle
-#   - :lock
-#   - :enter_pending_state
-#
-# Stimulus:
-#   - on `modal` controller:
-#     - Targets: panel
-#     - Actions: close
-#
-# Stimulus:
-#   - on `form-submission` controller:
-#     - Actions: submit
-#
-# Scaffolds:
-#
-# // Generated by Tailmix for the "modal" controller
-# // Path: app/javascript/controllers/modal_controller.js
-# import { Controller } from "@hotwired/stimulus"
-# import Tailmix from "tailmix"
-#
-# export default class extends Controller {
-#   static targets = ['panel']
-#   static values = { toggleData: Object }
-#
-#   connect() {
-#     console.log("modal controller connected to", this.element);
-#   }
-#   toggle(event) {
-#      if (event) event.preventDefault();
-#      Tailmix.run({ config: this.toggleDataValue, controller: this });
-#   }
-#
-#   close() {
-#     console.log('modal#close fired');
-#   }
-# }
-# ------------------------------------------------------------
-#
-# // Generated by Tailmix for the "form-submission" controller
-# // Path: app/javascript/controllers/form-submission_controller.js
-# import { Controller } from "@hotwired/stimulus"
-# import Tailmix from "tailmix"
-#
-# export default class extends Controller {
-#   static targets = []
-#   static values = { pendingData: Object }
-#
-#   connect() {
-#     console.log("form-submission controller connected to", this.element);
-#   }
-#   enterPendingState(event) {
-#      if (event) event.preventDefault();
-#      Tailmix.run({ config: this.pendingDataValue, controller: this });
-#   }
-#
-#   submit() {
-#     console.log('form-submission#submit fired');
-#   }
-# }
-# ------------------------------------------------------------
-
-
-
-
-modal = ModalComponent.new(size: :lg, open: true)
-# modal.lock!
-ui = modal.ui
 
+modal = ModalComponent.new(open: false, id: :user_profile_modal)
+ui = modal.ui
 
-def stringify_keys(obj)
-  case obj
-  when Hash
-    obj.transform_keys(&:to_s).transform_values { |v| stringify_keys(v) }
-  when Array
-    obj.map { |v| stringify_keys(v) }
-  else
-    obj
-  end
-end
 
 # puts "Definition:"
 # puts JSON.pretty_generate(stringify_keys(ModalComponent.tailmix_definition.to_h))
-# ui.action(:lock).apply!
+puts "-" * 100
+puts ModalComponent.dev.docs
+puts "-" * 100
 
 ModalComponent.dev.elements.each do |element_name|
   element = ui.send(element_name)

data/lib/tailmix/definition/builders/action_builder.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+require_relative "../payload_proxy"
+
+module Tailmix
+  module Definition
+    module Builders
+      class ActionBuilder
+        def initialize
+          @transitions = []
+        end
+
+        def set(state_key, value)
+          processed_value = if value.is_a?(PayloadValue)
+            { __type: 'payload_value', key: value.key }
+          else
+            value
+          end
+          @transitions << { type: :set, payload: { key: state_key.to_sym, value: processed_value } }
+        end
+
+        def toggle(state_key)
+          @transitions << { type: :toggle, payload: { key: state_key.to_sym } }
+        end
+
+        def refresh(state_key, params: {})
+          @transitions << { type: :refresh, payload: { key: state_key.to_sym, params: params } }
+        end
+
+        def dispatch(event_name, detail: {})
+          @transitions << { type: :dispatch, payload: { name: event_name, detail: detail } }
+        end
+
+        def build_definition
+          Result::Action.new(transitions: @transitions.freeze)
+        end
+      end
+    end
+  end
+end

data/lib/tailmix/definition/{contexts → builders}/actions/element_builder.rb

@@ -2,7 +2,7 @@
 
 module Tailmix
   module Definition
-    module Contexts
+    module Builders
       module Actions
         class ElementBuilder
           def initialize(default_method)

data/lib/tailmix/definition/{contexts → builders}/attribute_builder.rb

@@ -2,7 +2,7 @@
 
 module Tailmix
   module Definition
-    module Contexts
+    module Builders
       class AttributeBuilder
         def initialize
           @classes = []

data/lib/tailmix/definition/builders/component_builder.rb

@@ -0,0 +1,81 @@
+# frozen_string_literal: true
+
+require_relative "action_builder"
+require_relative "element_builder"
+require_relative "reactor_builder"
+require_relative "../payload_proxy"
+
+module Tailmix
+  module Definition
+    module Builders
+      class ComponentBuilder
+        attr_reader :component_name
+
+        def initialize(component_name:)
+          @states = {}
+          @actions = {}
+          @elements = {}
+          @component_name = component_name
+          @plugins = {}
+          @reactions = {}
+        end
+
+        def state(name, default: nil, endpoint: nil, toggle: false)
+          @states[name.to_sym] = { default: default, endpoint: endpoint }.compact
+          if toggle
+            action_name = :"toggle_#{name}"
+            action(action_name) { toggle name }
+          end
+        end
+
+        def action(name, &block)
+          builder = ActionBuilder.new
+          builder.instance_exec(PayloadProxy.new, &block)
+          @actions[name.to_sym] = builder
+        end
+
+        def element(name, classes = "", &block)
+          builder = ElementBuilder.new(name)
+          builder.attributes.classes(classes.split)
+          builder.instance_eval(&block) if block
+          @elements[name.to_sym] = builder
+        end
+
+        def plugin(name, options = {})
+          plugin_name = name.to_s.gsub(/_([a-z])/) { $1.upcase }
+          @plugins[plugin_name] = options
+        end
+
+        def react(on:, run: nil, **options, &block)
+          watched_states = Array(on)
+
+          # Processing the short form: `react on: :query, run: :search`
+          if run
+            builder = ReactorBuilder.new(watched_states.first)
+            builder.run(run, **options)
+            watched_states.each { |state| (@reactions[state] ||= []).concat(builder.build_rules) }
+            return
+          end
+
+          # Processing the full form with the block.
+          if block
+            builder = ReactorBuilder.new(watched_states.first)
+            builder.instance_eval(&block) # `instance_eval` чтобы не писать `r.`
+            watched_states.each { |state| (@reactions[state] ||= []).concat(builder.build_rules) }
+          end
+        end
+
+        def build_definition
+          Result::Context.new(
+            name: component_name,
+            states: @states.freeze,
+            actions: @actions.transform_values(&:build_definition).freeze,
+            elements: @elements.transform_values(&:build_definition).freeze,
+            reactions: @reactions.freeze,
+            plugins: @plugins.freeze
+          )
+        end
+      end
+    end
+  end
+end

data/lib/tailmix/definition/{contexts → builders}/dimension_builder.rb

@@ -4,7 +4,7 @@ require_relative "variant_builder"
 
 module Tailmix
   module Definition
-    module Contexts
+    module Builders
       class DimensionBuilder
         def initialize(default: nil)
           @variants = {}
@@ -13,12 +13,12 @@ module Tailmix
 
         def variant(name, classes = "", data: {}, aria: {}, &block)
           builder = VariantBuilder.new
+
           builder.classes(classes) if classes && !classes.empty?
           builder.data(data)
           builder.aria(aria)
 
           builder.instance_eval(&block) if block
-
           @variants[name] = builder.build_variant
         end
 

data/lib/tailmix/definition/builders/element_builder.rb

@@ -0,0 +1,83 @@
+# frozen_string_literal: true
+
+require_relative "attribute_builder"
+require_relative "dimension_builder"
+require_relative "variant_builder"
+
+module Tailmix
+  module Definition
+    module Builders
+      class ElementBuilder
+        def initialize(name)
+          @name = name
+          @default_attributes = {}
+          @dimensions = {}
+          @compound_variants = []
+          @event_bindings = []
+          @attribute_bindings = {}
+          @model_bindings = {}
+        end
+
+        def attributes
+          @attributes_builder ||= AttributeBuilder.new
+        end
+
+        def method_missing(name, *args, &block)
+          attribute_name = name.to_s.chomp("=").to_sym
+          @default_attributes[attribute_name] = args.first
+        end
+
+        def respond_to_missing?(*_args)
+          true
+        end
+
+        def on(event_name, action_name, with: nil, **options)
+          # `with` mapping: `{ payload_key => state_key }`
+          @event_bindings << { event: event_name, action: action_name, with: with, options: options }
+        end
+
+        def bind(attribute_name, to:)
+          @attribute_bindings[attribute_name.to_sym] = to.to_sym
+        end
+
+        def model(attribute_name, to:, on: :input, action: nil, debounce: nil)
+          @model_bindings[attribute_name.to_sym] = {
+            state: to.to_sym,
+            event: on,
+            action: action,
+            debounce: debounce
+          }.compact
+        end
+
+        def dimension(name, &block)
+          builder = DimensionBuilder.new
+          builder.instance_eval(&block)
+          @dimensions[name.to_sym] = builder.build_dimension
+        end
+
+        def compound_variant(on:, &block)
+          builder = VariantBuilder.new
+          builder.instance_eval(&block)
+
+          @compound_variants << {
+            on: on,
+            modifications: builder.build_variant
+          }
+        end
+
+        def build_definition
+          Result::Element.new(
+            name: @name,
+            attributes: attributes.build_definition,
+            default_attributes: @default_attributes.freeze,
+            dimensions: @dimensions.freeze,
+            compound_variants: @compound_variants.freeze,
+            event_bindings: @event_bindings.freeze,
+            attribute_bindings: @attribute_bindings.freeze,
+            model_bindings: @model_bindings.freeze
+          )
+        end
+      end
+    end
+  end
+end

data/lib/tailmix/definition/builders/reactor_builder.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+require_relative "rule_builder"
+
+module Tailmix
+  module Definition
+    module Builders
+      class ReactorBuilder
+        def initialize(watched_state)
+          @watched_state = watched_state
+          @rules = []
+        end
+
+        # Start a method for the rule chain: r.value("commercial")
+        def value(expected_value)
+          rule_builder = RuleBuilder.new(@watched_state)
+          rule_builder.value(expected_value)
+          @rules << rule_builder
+          rule_builder
+        end
+
+        # Alternative startup method: r.state(:zip_code)
+        def state(state_key)
+          rule_builder = RuleBuilder.new(state_key)
+          @rules << rule_builder
+          rule_builder
+        end
+
+        # Unconditional effect (always triggers on change)
+        def run(action_name, with: nil)
+          # We create an "empty" rule with a condition that is always true.
+          rule_builder = RuleBuilder.new(nil)
+          rule_builder.instance_variable_set(:@rule, { condition: { type: :always_true } })
+          rule_builder.run(action_name, with: with)
+          @rules << rule_builder
+        end
+
+        def build_rules
+          @rules.map(&:build_rule)
+        end
+      end
+    end
+  end
+end

data/lib/tailmix/definition/builders/rule_builder.rb

@@ -0,0 +1,58 @@
+# frozen_string_literal: true
+
+module Tailmix
+  module Definition
+    module Builders
+      class RuleBuilder
+        def initialize(source_state_key)
+          @rule = { condition: { type: :eql, source: { type: :state, key: source_state_key } } }
+        end
+
+        def value(expected_value)
+          @rule[:condition][:value] = expected_value
+          self
+        end
+        alias_method :is, :value
+
+        def is_not(expected_value)
+          @rule[:condition][:type] = :not_eql
+          @rule[:condition][:value] = expected_value
+          self
+        end
+
+        def is_truthy
+          @rule[:condition][:type] = :truthy
+          self
+        end
+
+        def set_state(payload)
+          add_effect(:set_state, payload: payload)
+        end
+
+        def run(action_name, with: nil)
+          add_effect(:run_action, name: action_name, with: with)
+        end
+
+        def dispatch(event_name, detail: {})
+          add_effect(:dispatch_event, name: event_name, detail: detail)
+        end
+
+        def call(element_name, method_name, *args)
+          add_effect(:call_method, element: element_name, method: method_name, args: args)
+        end
+
+        def build_rule
+          @rule
+        end
+
+        private
+
+        def add_effect(type, **payload)
+          @rule[:effects] ||= []
+          @rule[:effects] << { type: type, payload: payload }
+          self
+        end
+      end
+    end
+  end
+end

data/lib/tailmix/definition/builders/state_builder.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module Tailmix
+  module Definition
+    module Builders
+      class StateBuilder
+        def initialize
+          @data_source = {}
+        end
+
+        def endpoint(method, url:)
+          @data_source = { method: method, url: url }
+        end
+
+        def build_data_source
+          @data_source.empty? ? nil : @data_source.freeze
+        end
+      end
+    end
+  end
+end

data/lib/tailmix/definition/{contexts → builders}/variant_builder.rb

@@ -2,12 +2,13 @@
 
 module Tailmix
   module Definition
-    module Contexts
+    module Builders
       class VariantBuilder
         def initialize
           @class_groups = []
           @data = {}
           @aria = {}
+          @attributes = {}
         end
 
         def classes(class_string, options = {})
@@ -22,11 +23,25 @@ module Tailmix
           @aria.merge!(hash)
         end
 
+        def method_missing(name, *args, &block)
+          # `disabled true` -> { disabled: true }
+          # `placeholder "text"` -> { placeholder: "text" }
+          # `type "password"` -> { type: "password" }
+          attribute_name = name.to_s.chomp("=").to_sym
+          value = args.first
+          @attributes[attribute_name] = value
+        end
+
+        def respond_to_missing?(*_args)
+          true
+        end
+
         def build_variant
           Definition::Result::Variant.new(
             class_groups: @class_groups.freeze,
             data: @data.freeze,
-            aria: @aria.freeze
+            aria: @aria.freeze,
+            attributes: @attributes.freeze
           )
         end
       end