loco_motion-rails 0.0.8 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7d4d1891389f5b0a860f930a6d4e6dbb9053b6a77e349cd0f43b9de22740482b
-  data.tar.gz: 2f99a232731636bfaeca166092c0fb4ca51ddae6300e420951d0c0791997e1d7
+  metadata.gz: 767e282b6b6bdd3838a976a9ee4b75e2b89d0e42282955076b00ffa9de3c092b
+  data.tar.gz: d87d11791dee9d2b92d1273d39f7eebbeffd9ff20b947ba208ae48692497d45d
 SHA512:
-  metadata.gz: ad963fe072e997ad83879704d8a5d9285f2e964371ee9c7418dfe7377db7950b09f43e3ff8555fad25aee3d141b7b6927ba5e70f965684d749057aaa1d6223c8
-  data.tar.gz: 367ecb0bf6b3b9d3ff77e6f596b12322fe1b1026bcecc619032c70e59ed94d344f3b18907e8dc8caf63b4d95343e351a808254b50da0db14c8a98b8282cb5a18
+  metadata.gz: 949e31fa02cbf137771872b6c35c3abfc1ccbaebe065ae74076693a2b19861bd274bb00c55688c7d688dd4e92f01ae72886e9945a7b95d1f634bde95d4b67f87
+  data.tar.gz: 2072ec0b0557723d23df2d1b41af5aaa48e786f81a95715e29833aa9b33cb3b78e90a4625568756f33ec5cfcbb3624e681518aa66a329f6c38003f91791741fb

data/README.md

@@ -6,19 +6,45 @@ ViewComponent, TailwindCSS, DaisyUI and more!
 
 <img src="//loco-motion-docs.profoundry.us/images/loco-chats.png" width="500px" style="border: 1px solid #bbb; padding: 2px; border-radius: 10px;">
 
-_**DISCLAIMER**_
+<!-- omit from toc -->
+## DISCLAIMER / CURRENT STATUS
 
 This project is in active development and many changes occur with every release!
-In particular, new Daisy components are being added frequently and older
-components are being updated with new features meaning the APIs are very likely
-to change!
+
+We've added a very basic / untested version of all DaisyUI 4 components. While
+we originally intended to take some time to flesh out and attempt to use these
+components, with the recent release of Tailwind 4 and DaisyUI 5, we feel our
+time is best spent updating all of the components and dependencies for these
+new releases.
+
+This means that we will **NOT** be making any bug fixes to the current branch
+(0.4.0), and will instead include any bug fixes / improvements into the 0.5.0
+branch which will also upgrade to Tailwind 4 and DaisyUI 5.
+
+ - Current Release **(0.4.0)** - Works with DaisyUI 4 and Tailwind 3
+ - Next Release **(0.5.0)** - Will work with DaisyUI 5 and Tailwind 4
+
+<!-- omit from toc -->
+## Additional Notes
+
+### DataInput Components
+
+Many of the DataInput elements (file input, text input, select dropdown, etc)
+were built rather hastily so that we would have a base version to start from.
+
+However, the new DaisyUI 5 components are implemented in a much cleaner way and
+we didn't want to invest too much time building these out and making them more
+ideal since we're about to change them.
+
+### Hosting / Sites
 
 We expect to settle on and purchase a real domain name in the near future, but
 for the time being, the latest documentation is available at the links below.
 
- - [Docs / Demo (Latest Release)][1]
- - [API Docs (Latest Release)][2]
- - [Docs / Demo (Main Branch / Staging)][3]
+ - [Latest Release][1]
+ - [Main / Staging][3]
+
+### Getting Help
 
 Please reach out by opening an
 [Issue](https://github.com/profoundry-us/loco_motion/issues) if you've found a
@@ -47,6 +73,8 @@ your solution is aligned with our goals.
   - [Install](#install)
   - [Using Components](#using-components)
 - [Developing](#developing)
+  - [Contributing](#contributing)
+  - [Releasing](#releasing)
   - [Tooling](#tooling)
 - [TODO / Next Steps](#todo--next-steps)
 
@@ -856,6 +884,20 @@ See the `Makefile` for all available commands.
 > make demo-restart
 > ```
 
+### Contributing
+
+If you're interested in contributing to LocoMotion, please check out our
+[CONTRIBUTING guide](docs/dev_guides/CONTRIBUTING.md) which provides detailed
+information about the contribution process, code standards, documentation
+requirements, and testing procedures.
+
+### Releasing
+
+For core team members who need to release new versions of LocoMotion, please
+refer to our [RELEASING guide](docs/dev_guides/RELEASING.md) for step-by-step
+instructions on version updates, building, testing, and publishing both the Ruby
+gem and NPM package.
+
 ### Tooling
 
 For VSCode, you may want to add the following to your settings to get
@@ -919,9 +961,9 @@ the GitHub Discussions feature and let us know!
 - [x] Basic versions of DaisyUI Data Display
 - [x] Basic versions of DaisyUI Navigation
 - [x] Basic versions of DaisyUI Feedback
-- [ ] Basic versions of DaisyUI Data Input
-- [ ] Basic versions of DaisyUI Layout
-- [ ] Basic versions of DaisyUI Mockup
+- [x] Basic versions of DaisyUI Data Input
+- [x] Basic versions of DaisyUI Layout
+- [x] Basic versions of DaisyUI Mockup
 - [x] ~~Get YARD docs rendering with (better) Markdown~~ _**Working for now**_
 - [x] Extract relevant pieces into a yard-loco_motion plugin
 - [x] Publish Gem
@@ -932,9 +974,9 @@ the GitHub Discussions feature and let us know!
 - [ ] Choose, recommend, and document a pagination gem
 - [ ] Discuss caching techniques / setup
 - [x] Create / publish a staging version of the demo site ([Demo Staging][2])
-- [ ] Create / publish a staging version of the docs site
-- [ ] Create / publish a production version of the demo site
-- [ ] Create / publish a production version of the docs site
+- [x] Create / publish a staging version of the docs site
+- [x] Create / publish a production version of the demo site
+- [x] Create / publish a production version of the docs site
 - [x] Update demo site to allow for a different docs site using ENV var
 - [x] Update README to suggest Playwright
 - [ ] Build some have docs / guides / examples for using playwright-ruby-client
@@ -946,6 +988,7 @@ the GitHub Discussions feature and let us know!
 - [ ] See if we can update the Join component to auto-add the `join-item` CSS
       under certain conditions
 - [ ] Add title and description content_for blocks to all examples for SEO purposes
+- [ ] Update to Tailwind 4 and DaisyUI 5
 
 [1]: https://loco-motion.profoundry.us/
 [2]: https://loco-motion-demo-staging.profoundry.us/

data/app/components/daisy/data_input/checkbox_component.rb

@@ -0,0 +1,92 @@
+# frozen_string_literal: true
+
+#
+# The Checkbox component renders a DaisyUI styled checkbox input.
+# It can be used standalone or with a form builder, and supports various styling
+# options including toggle mode for switch-like appearance.
+#
+# @loco_example Basic Usage
+#   = daisy_checkbox(name: "accept", id: "accept")
+#
+# @loco_example Checked Checkbox
+#   = daisy_checkbox(name: "accept", id: "accept", checked: true)
+#
+# @loco_example Toggle Checkbox
+#   = daisy_checkbox(name: "accept", id: "accept", toggle: true)
+#
+# @loco_example Disabled Checkbox
+#   = daisy_checkbox(name: "accept", id: "accept", disabled: true)
+#
+class Daisy::DataInput::CheckboxComponent < LocoMotion::BaseComponent
+  attr_reader :name, :id, :value, :checked, :toggle, :disabled, :required
+
+  #
+  # Instantiate a new Checkbox component.
+  #
+  # @param kws [Hash] The keyword arguments for the component.
+  #
+  # @option kws name [String] The name attribute for the checkbox input.
+  #
+  # @option kws id [String] The ID attribute for the checkbox input.
+  #
+  # @option kws value [String] The value attribute for the checkbox input.
+  #   Defaults to "1".
+  #
+  # @option kws checked [Boolean] Whether the checkbox is checked. Defaults to
+  #   false.
+  #
+  # @option kws toggle [Boolean] Whether the checkbox should be styled as a
+  #   toggle switch. Defaults to false.
+  #
+  # @option kws disabled [Boolean] Whether the checkbox is disabled. Defaults to
+  #   false.
+  #
+  # @option kws required [Boolean] Whether the checkbox is required for form
+  #   validation. Defaults to false.
+  #
+  def initialize(**kws)
+    super
+
+    @name = config_option(:name)
+    @id = config_option(:id)
+    @value = config_option(:value, "1")
+    @checked = config_option(:checked, false)
+    @toggle = config_option(:toggle, false)
+    @disabled = config_option(:disabled, false)
+    @required = config_option(:required, false)
+  end
+
+  #
+  # Calls the {setup_component} method before rendering the component.
+  #
+  def before_render
+    setup_component
+  end
+
+  #
+  # Sets up the component by configuring the tag name, CSS classes, and HTML
+  # attributes.
+  #
+  def setup_component
+    set_tag_name(:component, :input)
+
+    add_css(:component, @toggle ? "toggle" : "checkbox")
+
+    add_html(:component, {
+      type: "checkbox",
+      name: @name,
+      id: @id,
+      value: @value,
+      checked: @checked,
+      disabled: @disabled,
+      required: @required
+    })
+  end
+
+  #
+  # Renders the component inline with no additional whitespace.
+  #
+  def call
+    part(:component)
+  end
+end

data/app/components/daisy/data_input/file_input_component.rb

@@ -0,0 +1,92 @@
+# frozen_string_literal: true
+
+#
+# The FileInput component renders a DaisyUI styled file input.
+# It can be used standalone or with a form builder, and supports
+# various styling options including different sizes and variants.
+#
+# @loco_example Basic Usage
+#   = daisy_file_input(name: "document", id: "document")
+#
+# @loco_example With Accept Attribute
+#   = daisy_file_input(name: "image", id: "image", accept: "image/*")
+#
+# @loco_example With Multiple Files
+#   = daisy_file_input(name: "documents[]", id: "documents", multiple: true)
+#
+# @loco_example Disabled File Input
+#   = daisy_file_input(name: "document", id: "document", disabled: true)
+#
+class Daisy::DataInput::FileInputComponent < LocoMotion::BaseComponent
+  attr_reader :name, :id, :accept, :multiple, :disabled, :required
+
+  #
+  # Instantiate a new FileInput component.
+  #
+  # @param kws [Hash] The keyword arguments for the component.
+  #
+  # @option kws name [String] The name attribute for the file input.
+  #
+  # @option kws id [String] The ID attribute for the file input.
+  #
+  # @option kws accept [String] The accept attribute for the file input,
+  #   specifying allowed file types.
+  #
+  # @option kws multiple [Boolean] Whether the file input allows multiple file
+  #   selection. Defaults to false.
+  #
+  # @option kws disabled [Boolean] Whether the file input is disabled. Defaults to
+  #   false.
+  #
+  # @option kws required [Boolean] Whether the file input is required for form
+  #   validation. Defaults to false.
+  #
+  def initialize(**kws)
+    super
+
+    @name = config_option(:name)
+    @id = config_option(:id)
+    @accept = config_option(:accept, nil)
+    @multiple = config_option(:multiple, false)
+    @disabled = config_option(:disabled, false)
+    @required = config_option(:required, false)
+  end
+
+  #
+  # Calls the {setup_component} method before rendering the component.
+  #
+  def before_render
+    setup_component
+  end
+
+  #
+  # Sets up the component by configuring the tag name, CSS classes, and HTML
+  # attributes. Sets the tag to input with type 'file' and adds the 'file-input'
+  # CSS class.
+  #
+  # This configures the name, id, accept attribute, multiple state, disabled state,
+  # and required state of the file input.
+  #
+  def setup_component
+    set_tag_name(:component, :input)
+
+    add_css(:component, "file-input")
+
+    add_html(:component, {
+      type: "file",
+      name: @name,
+      id: @id,
+      accept: @accept,
+      multiple: @multiple,
+      disabled: @disabled,
+      required: @required
+    })
+  end
+
+  #
+  # Renders the component inline with no additional whitespace.
+  #
+  def call
+    part(:component)
+  end
+end

data/app/components/daisy/data_input/label_component.rb

@@ -0,0 +1,84 @@
+# frozen_string_literal: true
+
+#
+# The Label component renders a DaisyUI styled label for form inputs.
+# It can be used with any form input component and provides visual styling
+# consistent with other Daisy UI elements.
+#
+# @loco_example Basic Usage
+#   = daisy_label(for: "input_id") do
+#     My Label
+#
+# @loco_example With Label Title
+#   = daisy_label(for: "input_id", title: "My Label")
+#
+# @loco_example Required Label
+#   = daisy_label(for: "input_id", required: true) do
+#     My Required Label
+#
+class Daisy::DataInput::LabelComponent < LocoMotion::BaseComponent
+  attr_reader :for, :title, :required
+
+  #
+  # Instantiate a new Label component.
+  #
+  # @param kws [Hash] The keyword arguments for the component.
+  #
+  # @option kws for [String] The ID of the input element this label is for.
+  #   This connects the label to its associated form control for accessibility.
+  #
+  # @option kws title [String] The text content of the label. If not provided,
+  #   the content block will be used. If a content block is provided, it will
+  #   take precedence over the title option.
+  #
+  # @option kws required [Boolean] Whether the label is for a required input.
+  #   Defaults to false.
+  #
+  def initialize(**kws)
+    super
+
+    @for = config_option(:for)
+    @title = config_option(:title)
+    @required = config_option(:required, false)
+  end
+
+  #
+  # Calls the {setup_component} method before rendering the component.
+  #
+  def before_render
+    setup_component
+  end
+
+  #
+  # Sets up the component by configuring the tag name, CSS classes, and HTML
+  # attributes. Sets the tag to 'label' and adds the 'label' CSS class.
+  #
+  # This configures the 'for' attribute to connect the label to its input and
+  # adds appropriate styling for required inputs when needed.
+  #
+  def setup_component
+    set_tag_name(:component, :label)
+
+    add_css(:component, "label")
+
+    add_html(:component, {
+      for: @for
+    })
+  end
+
+  #
+  # Renders the component with its content.
+  #
+  def call
+    part(:component) do
+      if content?
+        content
+      elsif @title
+        content_tag(:span, @title, class: "label-text")
+      else
+        # Fallback to empty content
+        ""
+      end
+    end
+  end
+end

data/app/components/daisy/data_input/radio_button_component.rb

@@ -0,0 +1,87 @@
+# frozen_string_literal: true
+
+#
+# The Radio Button component renders a DaisyUI styled radio button input.
+# It can be used standalone or with a form builder, and is ideal for creating
+# option groups where users must select exactly one choice.
+#
+# @loco_example Basic Usage
+#   = daisy_radio(name: "option", id: "option1", value: "1")
+#
+# @loco_example Checked Radio Button
+#   = daisy_radio(name: "option", id: "option2", value: "2", checked: true)
+#
+# @loco_example Disabled Radio Button
+#   = daisy_radio(name: "option", id: "option3", value: "3", disabled: true)
+#
+class Daisy::DataInput::RadioButtonComponent < LocoMotion::BaseComponent
+  attr_reader :name, :id, :value, :checked, :disabled, :required
+
+  #
+  # Instantiate a new Radio Button component.
+  #
+  # @param kws [Hash] The keyword arguments for the component.
+  #
+  # @option kws name [String] The name attribute for the radio button input.
+  #
+  # @option kws id [String] The ID attribute for the radio button input.
+  #
+  # @option kws value [String] The value attribute for the radio button input.
+  #
+  # @option kws checked [Boolean] Whether the radio button is checked. Defaults to
+  #   false.
+  #
+  # @option kws disabled [Boolean] Whether the radio button is disabled. Defaults to
+  #   false.
+  #
+  # @option kws required [Boolean] Whether the radio button is required for form
+  #   validation. Defaults to false.
+  #
+  def initialize(**kws)
+    super
+
+    @name = config_option(:name)
+    @id = config_option(:id)
+    @value = config_option(:value)
+    @checked = config_option(:checked, false)
+    @disabled = config_option(:disabled, false)
+    @required = config_option(:required, false)
+  end
+
+  #
+  # Calls the {setup_component} method before rendering the component.
+  #
+  def before_render
+    setup_component
+  end
+
+  #
+  # Sets up the component by configuring the tag name, CSS classes, and HTML
+  # attributes. Sets the tag to input with type 'radio' and adds the 'radio' CSS class.
+  #
+  # This configures the name, id, value, disabled state, required state, and
+  # checked state of the radio button.
+  #
+  def setup_component
+    set_tag_name(:component, :input)
+
+    add_css(:component, "radio")
+
+    add_html(:component, {
+      type: "radio",
+      name: @name,
+      id: @id,
+      value: @value,
+      checked: @checked,
+      disabled: @disabled,
+      required: @required
+    })
+  end
+
+  #
+  # Renders the component inline with no additional whitespace.
+  #
+  def call
+    part(:component)
+  end
+end

data/app/components/daisy/data_input/range_component.rb

@@ -0,0 +1,95 @@
+# frozen_string_literal: true
+
+#
+# The Range component renders a DaisyUI styled range input slider.
+# It can be used standalone or with a form builder, and supports customization
+# of min/max values, step increments, and color variants.
+#
+# @loco_example Basic Usage
+#   = daisy_range(name: "volume", id: "volume", min: 0, max: 100, value: 50)
+#
+# @loco_example Range with Steps
+#   = daisy_range(name: "step_range", id: "step_range", min: 0, max: 100, step: 25)
+#
+# @loco_example Range with Different Colors
+#   = daisy_range(name: "primary_range", id: "primary_range", css: "range-primary")
+#   = daisy_range(name: "error_range", id: "error_range", css: "range-error")
+#
+class Daisy::DataInput::RangeComponent < LocoMotion::BaseComponent
+  attr_reader :name, :id, :min, :max, :step, :value, :disabled, :required
+
+  #
+  # Instantiate a new Range component.
+  #
+  # @param kws [Hash] The keyword arguments for the component.
+  #
+  # @option kws name [String] The name attribute for the range input.
+  #
+  # @option kws id [String] The ID attribute for the range input.
+  #
+  # @option kws min [Integer] The minimum value (default: 0).
+  #
+  # @option kws max [Integer] The maximum value (default: 100).
+  #
+  # @option kws step [Integer] The step increment (default: 1).
+  #
+  # @option kws value [Integer] The current value (default: min).
+  #
+  # @option kws disabled [Boolean] Whether the range input is disabled. Defaults to
+  #   false.
+  #
+  # @option kws required [Boolean] Whether the range input is required for form
+  #   validation. Defaults to false.
+  #
+  def initialize(**kws)
+    super
+
+    @name = config_option(:name)
+    @id = config_option(:id)
+    @min = config_option(:min, 0)
+    @max = config_option(:max, 100)
+    @step = config_option(:step, 1)
+    @value = config_option(:value, @min)
+    @disabled = config_option(:disabled, false)
+    @required = config_option(:required, false)
+  end
+
+  #
+  # Calls the {setup_component} method before rendering the component.
+  #
+  def before_render
+    setup_component
+  end
+
+  #
+  # Sets up the component by configuring the tag name, CSS classes, and HTML
+  # attributes. Sets the tag to input with type 'range' and adds the 'range' CSS class.
+  #
+  # This configures the min, max, step values along with name, id, value, disabled state, 
+  # and required state of the range input.
+  #
+  def setup_component
+    set_tag_name(:component, :input)
+
+    add_css(:component, "range")
+
+    add_html(:component, {
+      type: "range",
+      name: @name,
+      id: @id,
+      min: @min,
+      max: @max,
+      step: @step,
+      value: @value,
+      disabled: @disabled,
+      required: @required
+    })
+  end
+
+  #
+  # Renders the component inline with no additional whitespace.
+  #
+  def call
+    part(:component)
+  end
+end

data/app/components/daisy/data_input/rating_component.html.haml

@@ -0,0 +1,13 @@
+= part(:component) do
+  = part(:hidden_input)
+
+  - if items?
+    - items.each do |item|
+      - item.set_loco_parent(component_ref)
+      = item
+  - elsif content?
+    = content
+  - elsif star_items.present?
+    - star_items.each do |item|
+      - item.set_loco_parent(component_ref)
+      = render(item)