loco_motion-rails 0.0.6 → 0.0.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6cfe2882401b7bdfd08a844df9df854c145e89889bacc1e283102e4aad59d6d3
-  data.tar.gz: df1222834a5606b7ffa9135bf90fb4d59e1fc699eea8d2bf52686e7f039d0c3f
+  metadata.gz: a020015ecb6d9ee0a705d25830f1951b00c60be6ee4046939b878d3a720bfbda
+  data.tar.gz: c9bc31844a168d4427423912be65f354387aba43f2c6d6711998cee947e2311d
 SHA512:
-  metadata.gz: 3f1ef92f5d9315db44ac50cb7c1be90f0924391c29b247d36930ae1758572dee93edafc0ba9f28ed496a8d29cb583c438ec77b50a08d73807cd79ca77d67aa38
-  data.tar.gz: 6ba44670ccdd89349da146dc31e15dbeff3e5753f6bf55fc3531b8bbcb4505d72dcbdb895b3abed018cf84ce8c4d44ce173d922d7ab4ea559ca9878863ec23b3
+  metadata.gz: f88796625ae5f6f7c7690563d0a687ed2d8932924d305cb12da0985fdcfdb00f629e6a25618afe5498ec6932af0e8c45b1cc3008a9f68d28940563f9f41f1fb0
+  data.tar.gz: 5f09dacd5dab790708428cb3e853e40fa59a5d20da58b4d11f9e99cca76bf940b1d3d311e55e8396b140acb2271eddb3df202175164ba59306acc041427d65cd

data/README.md

@@ -4,7 +4,7 @@
 Crazy fast Rails development with modern tools and components leveraging
 ViewComponent, TailwindCSS, DaisyUI and more!
 
-![image](./docs/assets/images/loco-chats.png)
+<img src="//loco-motion-docs.profoundry.us/images/loco-chats.png" width="500px" style="border: 1px solid #bbb; padding: 2px; border-radius: 10px;">
 
 _**DISCLAIMER**_
 
@@ -13,10 +13,12 @@ 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 plan to publish the docs site to a publicly available URL soon, but until
-then, you can run the docs by cloning the repository and running `make all` (or
-`make all-quick` if you've already run `make all` or `make rebuild` previously)
-and visiting http://localhost:3000/ in your browser.
+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]
 
 Please reach out by opening an
 [Issue](https://github.com/profoundry-us/loco_motion/issues) if you've found a
@@ -42,7 +44,6 @@ your solution is aligned with our goals.
 - [LocoMotion Components](#locomotion-components)
   - [Install](#install)
   - [Using Components](#using-components)
-  - [Setting a Base Component Class](#setting-a-base-component-class)
 - [Developing](#developing)
   - [Tooling](#tooling)
 - [TODO / Next Steps](#todo--next-steps)
@@ -460,16 +461,23 @@ recommned Rspec with [factory_bot](https://github.com/thoughtbot/factory_bot)
 and [Shoulda Matchers](https://github.com/thoughtbot/shoulda-matchers).
 
 Finally, although both libraries offer some functionality for testing your user
-interface, we recommend utilizing [Cypress](https://www.cypress.io/) instead as
-it more closely mimics the real user experience in a browser and it allows you
-to see in real-time what is happening, including in-browser debugging!
+interface, we recommend utilizing [Playwright](https://playwright.dev/) instead
+as it more closely mimics the real user experience in a browser and it allows
+you to see in real-time what is happening, including in-browser debugging!
+
+Although the common setup is to write your specs in JavaScript or TypeScript,
+you can actually write your End to End tests in Ruby / Rspec by utilizing the
+[playwright-ruby-client](https://playwright-ruby-client.vercel.app/)!
+
+We'll have some guides and examples for this coming soon!
 
 > [!NOTE]
-> One thing to note about Cypress, however, is that it is Javascript-based and
-> thus requires you to write tests in Javascript. If you are only famililar with
-> Ruby, you might want to stick with Rspec or Minitest when you first start your
-> project, and expand into using Cypress once you are comfortable learning a new
-> lanugage / framework.
+> We used to recommend [Cypress](https://www.cypress.io) for End-to-End tests,
+> but it's reliance on JavaScript and sometimes flakey tests caused us to search
+> out a new solution / recommendation.
+>
+> We plan to have a writeup soon (an ADR specifically) on exactly why we made
+> the switch.
 
 ## Authentication
 
@@ -670,9 +678,9 @@ a full set of UI components to help you build robust and full-featured apps.
 
 > [!CAUTION]
 > The LocoMotion components are being actively developed and are NOT ready for
-> production / public use (currently they are just some example components while
-> I get everything setup). I'm mainly adding the docs here so that I remember
-> how to set them up properly when they are ready for release.
+> production / public use! We have finished basic versions of the DaisyUI
+> Actions, DataDisplay, Navigation, and Feedback components, but we expect these
+> to change (possibly quite a bit) as we begin to use them in projects.
 
 ### Install
 
@@ -685,7 +693,7 @@ gem "loco_motion", github: "profoundry-us/loco_motion", branch: "main", require:
 
 # or
 
-gem "loco_motion-rails", "0.0.6", require: "loco_motion"
+gem "loco_motion-rails", "0.0.7", require: "loco_motion"
 ```
 
 Next add the following lines to the `contents` section of your
@@ -707,8 +715,8 @@ Next add the following lines to the `contents` section of your
 
 > [!WARNING]
 > Note that this will not output anything if it fails to find the right
-> directory, so your CSS may stop working if you update the gem and forget to
-> update this setting.
+> directory, so your CSS may not compile properly if this command fails or finds
+> the wrong gem or an older gem.
 
 Next, if you're using any of the components that require JavaScript (like the
 Countdown component), you'll need to add the library as a dependency and include
@@ -762,57 +770,35 @@ the following code and refresh your page.
 You should see a few buttons and the user info that we saved from OmniAuth
 represented as a Ruby hash! Any other content you have will be rendered below.
 
-### Setting a Base Component Class
-
-Sometimes, you may want to override the way that LocoMotion handles things, or
-provide some functionality yourself in a sub-class of our components. Since you
-can't have a class inherit from two classes, we give you a way to override the
-base class that all of our components inherit from.
-
-This allows you to define a class that inherits from `LocoMotion::BaseComponent`
-and then adds any special methods or overrides to our default components.
-
-Create a file called `app/components/application_component.rb` with the following
-contents:
-
-```ruby
-class ApplicationComponent < LocoMotion::BaseComponent
-end
-```
-
-Then add the following to `config/initializers/loco_motion.rb`.
-
-
-```ruby
-LocoMotion.configure do |config|
-
-  # Override the base component class to inherit from our ApplicationComponent
-  # so that we can add our own overrides / methods.
-  Rails.application.config.after_initialize do
-    config.base_component_class = ApplicationComponent
-  end
-
-end
-```
-
-> [!NOTE]
-> It doesn't have to inherit from `ApplicationComponent`, you can use any class
-> you want, so you could create a separate `CustomizedLocoMotionComponent` class
-> so that you don't have any conflicts with your `ApplicationComponent`.
-
 ## Developing
 
 To work on LocoMotion, first clone the repository and make sure you have Docker
 installed and running on your machine.
 
+Next, create a `.env.local` file with the following contents, making sure to
+replace the Unsplash keys with real ones (you can create your own account or ask
+Topher for his keys).
+
+```.env
+# .env.local
+UNSPLASH_ACCESS_KEY="<< INSERT ACCESS KEY >>"
+UNSPLASH_SECRET_KEY="<< INSERT SECRET KEY >>"
+```
+
 You should then be able to run `make rebuild` in the project directory and then
 `make all-quick` to start the services.
 
 > [!NOTE]
 >
-> We use `npm link` within the `docs/demo/bin/dev` script to enable quick
-> editing of the JavaScript library files so you don't have to publish a new
-> package during testing.
+> We use `yarn link` in the `docs/demo/bin/setup` script to enable quick editing
+> of the Javascript files so you don't have to publish new packages during
+> testing.
+>
+> For the Ruby gem, we point directly to it via the `:path` option in the
+> `Gemfile`. This means that we have a custom Heroku buildpack when we publish
+> the demo site to move the files into the appropriate places.
+>
+> See https://github.com/profoundry-us/loco_motion-buildpack for more info.
 
 From here, you can access the demo site at http://localhost:3000 and the YARD
 docs at http://localhost:8808/docs/yard
@@ -854,6 +840,37 @@ TailwindCSS Intellisense working properly.
   ],
 ```
 
+And because whitespace is important when developing inline components, you
+should also add the following which prevents VSCode from adding a newline to the
+bottom of your HAML files. This helps ensure that inline components don't have
+trailing whitespace when using something like the `succeed` helper.
+
+```json
+  "[haml]": {
+      "editor.formatOnSave": false
+  }
+```
+
+Alternatively, if your component is simple enough, moving the template inside
+the `_component.rb` file's `call` method can also alleviate this problem.
+
+So instead of
+
+```haml
+- # This file has a newline at the bottom which can cause problems
+= part(:component) do
+  = content
+
+```
+
+you could do something like this:
+
+```ruby
+def call
+  part(:component) { content }
+end
+```
+
 ## TODO / Next Steps
 
 There is a LOT left to be done. We're not currently seeking assistance, but if
@@ -863,18 +880,29 @@ the GitHub Discussions feature and let us know!
 - [x] Basic versions of DaisyUI Actions
 - [x] Basic versions of DaisyUI Data Display
 - [x] Basic versions of DaisyUI Navigation
-- [ ] Basic versions of DaisyUI Feedback
+- [x] Basic versions of DaisyUI Feedback
 - [ ] Basic versions of DaisyUI Data Input
 - [ ] Basic versions of DaisyUI Layout
 - [ ] Basic versions of DaisyUI Mockup
-- [ ] Get YARD docs rendering with (better) Markdown
+- [ ] ~~Get YARD docs rendering with (better) Markdown~~ _**Working for now**_
 - [x] Extract relevant pieces into a yard-loco_motion plugin
-- [ ] Publish Gem
+- [x] Publish Gem
 - [x] Publish NPM package
-- [ ] Update YARD plugin to add `@part`s
+- [x] Update YARD plugin to add `@part`s
+- [x] Update YARD plugin to add `@loco_example`s with language support
 - [x] Extract doc callouts into a doc component (and / or the Daisy component)
-- [ ] Choose and recommend / document a pagination gem
+- [ ] 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
-- [ ] Update demo site to allow for a different docs site using ENV var
+- [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
+- [x] See if we can build a `Tippable` concern that relevant components can
+      include to automatically add the tooltip param and classes where possible
+
+[1]: https://loco-motion.profoundry.us/
+[2]: https://loco-motion-demo-staging.profoundry.us/
+[3]: https://loco-motion-demo-staging.profoundry.us/api-docs

data/app/components/daisy/actions/button_component.rb

@@ -1,5 +1,7 @@
 # Here are the Button docs!
-class Daisy::Actions::ButtonComponent < LocoMotion.configuration.base_component_class
+class Daisy::Actions::ButtonComponent < LocoMotion::BaseComponent
+  prepend LocoMotion::Concerns::TippableComponent
+
   set_component_name :btn
 
   def initialize(*args, **kws, &block)
@@ -20,7 +22,8 @@ class Daisy::Actions::ButtonComponent < LocoMotion.configuration.base_component_
     @right_icon_css = config_option(:right_icon_css, @icon_css)
     @right_icon_html = config_option(:right_icon_html, @icon_html)
 
-    @simple_title = config_option(:title, @left_icon || @right_icon ? nil : "Submit")
+    default_title = @left_icon || @right_icon ? nil : "Submit"
+    @simple_title = config_option(:title, args[0] || default_title)
   end
 
   def before_render

data/app/components/daisy/actions/dropdown_component.rb

@@ -1,5 +1,5 @@
 # Here are the Button docs!
-class Daisy::Actions::DropdownComponent < LocoMotion.configuration.base_component_class
+class Daisy::Actions::DropdownComponent < LocoMotion::BaseComponent
 
   TitleComponent = LocoMotion::BasicComponent.build do
     def before_render

data/app/components/daisy/actions/modal_component.rb

@@ -1,12 +1,49 @@
-# This is a Modal component.
-# @!parse class Daisy::Actions::ModalComponent < LocoMotion::BaseComponent; end
-class Daisy::Actions::ModalComponent < LocoMotion.configuration.base_component_class
+#
+# The Modal component renders a modal dialog that can be opened and closed. It
+# includes a backdrop, a close icon, a title, and actions.
+#
+# @part dialog The main `<dialog>` container.
+# @part box The container for the modal content.
+# @part activator The container for the activator which opens the modal.
+# @part close_icon_wrapper The container for the close icon.
+# @part close_icon The default close icon.
+# @part backdrop The backdrop that covers the rest of the screen.
+# @part title Container for the default title for the modal.
+# @part actions Container for all modal actions.
+# @part start_actions Container for the left (start) aligned actions for the modal.
+# @part end_actions The end actions for the modal.
+#
+# @slot activator The activator for the modal.
+# @slot close_icon A custom close icon for the modal.
+# @slot title A custom title for the modal.
+# @slot start_actions Left (or start) aligned actions for the modal.
+# @slot end_actions Right (or end) aligned actions for the modal.
+#
+# @loco_example Basic Usage
+#   = daisy_modal(title: "Simple Modal") do |modal|
+#     - modal.with_activator do
+#       - onclick = "document.getElementById('#{modal.dialog_id}').showModal()"
+#       = daisy_button(css: 'btn-primary', html: { onclick: onclick }) do
+#         Open Modal
+#
+#     Here is some really long modal content that should go well past the
+#     spot where the close icon appears...
+#
+#     - modal.with_end_actions(css: "flex flex-row items-center gap-2") do
+#       %form{ method: :dialog }
+#         = daisy_button do
+#           Cancel
+#       %form{ action: "", method: :get }
+#         %input{ type: "hidden", name: "submitted", value: "true" }
+#         = daisy_button(css: "btn-primary") do
+#           Submit
+#
+class Daisy::Actions::ModalComponent < LocoMotion::BaseComponent
   set_component_name :modal
 
   define_parts :dialog, :box, :actions,
     :activator, :close_icon_wrapper, :close_icon,
-    :backdrop,
-    :title, :start_actions, :end_actions
+    :backdrop, :title, :start_actions, :end_actions
 
   renders_one :activator
   renders_one :close_icon
@@ -29,24 +66,29 @@ class Daisy::Actions::ModalComponent < LocoMotion.configuration.base_component_c
   # Instantiate a new Modal component. All options are expected to be passed as
   # keyword arguments.
   #
-  # @overload initialize(dialog_id: nil, closable: true, title: nil)
-  #   @param dialog_id [String] A specific ID you would like the dialog to use.
-  #     Auto-generates a random ID using `SecureRandom.uuid` if not provided.
+  # @param args [Array] Currently unused and passed through to the
+  #   BaseComponent.
+  # @param kws [Hash] The keyword arguments for the component.
   #
-  #   @param closable [Boolean] Whether or not the modal should allow closing.
-  #
-  #   @param title [String] A simple title that you would like the component to
-  #     render above the main content of the modal. Accessible through the
-  #     {simple_title} accessor.
+  # @option kws dialog_id [String] A specific ID you would like the dialog to
+  #   use. Auto-generates a random ID using `SecureRandom.uuid` if not provided.
+  # @option kws closable [Boolean] Whether or not the modal should allow
+  #   closing.
+  # @option kws title [String] A simple title that you would like the
+  #   component to render above the main content of the modal (see
+  #   {simple_title}).
   #
   def initialize(*args, **kws, &block)
     super
 
-    @dialog_id ||= SecureRandom.uuid
+    @dialog_id = config_option(:dialog_id, SecureRandom.uuid)
     @closable = config_option(:closable, true)
     @simple_title = config_option(:title)
   end
 
+  #
+  # Sets up the component with various CSS classes and HTML attributes.
+  #
   def before_render
     setup_component
     setup_backdrop

data/app/components/daisy/actions/swap_component.rb

@@ -1,4 +1,6 @@
-class Daisy::Actions::SwapComponent < LocoMotion.configuration.base_component_class
+class Daisy::Actions::SwapComponent < LocoMotion::BaseComponent
+  prepend LocoMotion::Concerns::TippableComponent
+
   class SwapOn < LocoMotion::BasicComponent
     def before_render
       add_css(:component, "swap-on")

data/app/components/daisy/actions/theme_controller_component.rb

@@ -1,5 +1,5 @@
 # Renders a very basic radio-button theme controller.
-class Daisy::Actions::ThemeControllerComponent < LocoMotion.configuration.base_component_class
+class Daisy::Actions::ThemeControllerComponent < LocoMotion::BaseComponent
   SOME_THEMES = ["light", "dark", "synthwave", "retro", "cyberpunk", "wireframe"].freeze
 
   def before_render

data/app/components/daisy/data_display/accordion_component.rb

@@ -1,5 +1,6 @@
 # The Accordion component shows sections that can be expanded or collapsed.
-class Daisy::DataDisplay::AccordionComponent < LocoMotion.configuration.base_component_class
+class Daisy::DataDisplay::AccordionComponent < LocoMotion::BaseComponent
+  prepend LocoMotion::Concerns::TippableComponent
 
   # Renders a single section of the accordion.
   class AccordionSectionComponent < LocoMotion::BasicComponent

data/app/components/daisy/data_display/avatar_component.rb

@@ -23,7 +23,9 @@
 # = daisy_avatar icon: "user", icon_css: "text-yellow-400"
 # ```
 #
-class Daisy::DataDisplay::AvatarComponent < LocoMotion.configuration.base_component_class
+class Daisy::DataDisplay::AvatarComponent < LocoMotion::BaseComponent
+  prepend LocoMotion::Concerns::TippableComponent
+
   set_component_name :avatar
 
   define_parts :wrapper, :img, :icon, :placeholder

data/app/components/daisy/data_display/badge_component.rb

@@ -3,7 +3,9 @@
 # background colors.
 #
 # @!parse class Daisy::DataDisplay::BadgeComponent < LocoMotion::BaseComponent; end
-class Daisy::DataDisplay::BadgeComponent < LocoMotion.configuration.base_component_class
+class Daisy::DataDisplay::BadgeComponent < LocoMotion::BaseComponent
+  prepend LocoMotion::Concerns::TippableComponent
+
   set_component_name :badge
 
   #
@@ -12,16 +14,28 @@ class Daisy::DataDisplay::BadgeComponent < LocoMotion.configuration.base_compone
   def initialize(*args, **kws, &block)
     super
 
-    set_tag_name(:component, :span)
+    @title = config_option(:title, args[0])
   end
 
   def before_render
     setup_component
   end
 
+  #
+  # Renders the badge component.
+  #
+  # Because this is an inline component which might be utlized alongside text,
+  # we utilize the `call` method instead of a template to ensure that no
+  # additional whitespace gets added to the output.
+  #
+  def call
+    part(:component) { @title || content }
+  end
+
   private
 
   def setup_component
+    set_tag_name(:component, :span)
     add_css(:component, "badge")
   end
 end

data/app/components/daisy/data_display/card_component.rb

@@ -1,4 +1,5 @@
-class Daisy::DataDisplay::CardComponent < LocoMotion.configuration.base_component_class
+class Daisy::DataDisplay::CardComponent < LocoMotion::BaseComponent
+  prepend LocoMotion::Concerns::TippableComponent
 
   Figure = LocoMotion::BasicComponent.build do
     define_part :image, tag_name: :img, css: "card-image"

data/app/components/daisy/data_display/carousel_component.rb

@@ -1,4 +1,4 @@
-class Daisy::DataDisplay::CarouselComponent < LocoMotion.configuration.base_component_class
+class Daisy::DataDisplay::CarouselComponent < LocoMotion::BaseComponent
   class ItemComponent < LocoMotion::BasicComponent
     def before_render
       add_css(:component, "carousel-item")

data/app/components/daisy/data_display/chat_component.rb

@@ -10,15 +10,12 @@
 # @slot footer [LocoMotion::BasicComponent] Renders a single footer.
 # @slot bubble [LocoMotion::BasicComponent] Renders one or more bubbles.
 #
-# ## Examples
+# @loco_example Basic Usage
+#   = daisy_chat(css: "border rounded-lg", html: { title: message.short_desc }) do |chat|
+#     - chat.with_bubble do
+#       I can't believe it's not the weekend yet!
 #
-# ```language-haml
-# = daisy_chat(css: "border rounded-lg", html: { title: message.short_desc }) do |chat|
-#   - chat.with_bubble do
-#     I can't believe it's not the weekend yet!
-# ```
-#
-class Daisy::DataDisplay::ChatComponent < LocoMotion.configuration.base_component_class
+class Daisy::DataDisplay::ChatComponent < LocoMotion::BaseComponent
   renders_one :avatar, Daisy::DataDisplay::AvatarComponent.build(css: "chat-image", icon_css: "size-6 text-base-100", wrapper_css: "w-10 rounded-full")
   renders_one :header, LocoMotion::BasicComponent.build(css: "chat-header [:where(&)]:text-neutral-500")
   renders_one :footer, LocoMotion::BasicComponent.build(css: "chat-footer [:where(&)]:text-neutral-500")

data/app/components/daisy/data_display/collapse_component.rb

@@ -1,4 +1,6 @@
-class Daisy::DataDisplay::CollapseComponent < LocoMotion.configuration.base_component_class
+class Daisy::DataDisplay::CollapseComponent < LocoMotion::BaseComponent
+  prepend LocoMotion::Concerns::TippableComponent
+
   define_parts :title, :wrapper
 
   renders_one :title

data/app/components/daisy/data_display/countdown_component.rb

@@ -1,4 +1,5 @@
-class Daisy::DataDisplay::CountdownComponent < LocoMotion.configuration.base_component_class
+class Daisy::DataDisplay::CountdownComponent < LocoMotion::BaseComponent
+  prepend LocoMotion::Concerns::TippableComponent
 
   define_parts :days, :hours, :minutes, :seconds
   define_modifiers :words, :letters

data/app/components/daisy/data_display/diff_component.rb

@@ -1,4 +1,4 @@
-class Daisy::DataDisplay::DiffComponent < LocoMotion.configuration.base_component_class
+class Daisy::DataDisplay::DiffComponent < LocoMotion::BaseComponent
   class ItemComponent < LocoMotion::BasicComponent
     def set_index(index)
       @index = index

data/app/components/daisy/data_display/kbd_component.rb

@@ -1,5 +1,7 @@
 # This is the Kbd (Keyboard) component.
-class Daisy::DataDisplay::KbdComponent < LocoMotion.configuration.base_component_class
+class Daisy::DataDisplay::KbdComponent < LocoMotion::BaseComponent
+  prepend LocoMotion::Concerns::TippableComponent
+
   set_component_name :kbd
 
   # Create a new kbd component.
@@ -13,6 +15,17 @@ class Daisy::DataDisplay::KbdComponent < LocoMotion.configuration.base_component
     setup_component
   end
 
+  #
+  # Renders the kbd (Keyboard) component.
+  #
+  # Because this is an inline component which might be utlized alongside text,
+  # we utilize the `call` method instead of a template to ensure that no
+  # additional whitespace gets added to the output.
+  #
+  def call
+    part(:component) { content }
+  end
+
   private
 
   def setup_component

data/app/components/daisy/data_display/stat_component.rb

@@ -1,5 +1,7 @@
 # This is the stats component.
-class Daisy::DataDisplay::StatComponent < LocoMotion.configuration.base_component_class
+class Daisy::DataDisplay::StatComponent < LocoMotion::BaseComponent
+  prepend LocoMotion::Concerns::TippableComponent
+
   set_component_name :stat
 
   define_parts :title, :value, :description, :figure

data/app/components/daisy/data_display/table_component.rb

@@ -2,7 +2,7 @@
 # The Table component is used to render HTML tables with rows, columns, and headers.
 #
 # @!parse class Daisy::DataDisplay::TableComponent < LocoMotion::BaseComponent; end
-class Daisy::DataDisplay::TableComponent < LocoMotion.configuration.base_component_class
+class Daisy::DataDisplay::TableComponent < LocoMotion::BaseComponent
 
   class HeadColumnComponent < LocoMotion::BasicComponent
     def before_render

data/app/components/daisy/data_display/timeline_component.rb

@@ -1,4 +1,4 @@
-class Daisy::DataDisplay::TimelineComponent < LocoMotion.configuration.base_component_class
+class Daisy::DataDisplay::TimelineComponent < LocoMotion::BaseComponent
   renders_many :events, Daisy::DataDisplay::TimelineEventComponent
 
   def before_render

data/app/components/daisy/data_display/timeline_event_component.rb

@@ -1,4 +1,4 @@
-class Daisy::DataDisplay::TimelineEventComponent < LocoMotion.configuration.base_component_class
+class Daisy::DataDisplay::TimelineEventComponent < LocoMotion::BaseComponent
   renders_one :start, LocoMotion::BasicComponent.build(css: "timeline-start")
   renders_one :middle, LocoMotion::BasicComponent.build(css: "timeline-middle")
   renders_one :end, LocoMotion::BasicComponent.build(css: "timeline-end")

data/app/components/daisy/feedback/alert_component.rb

@@ -1,7 +1,7 @@
 #
 # The AlertComponent displays an important message to users.
 #
-class Daisy::Feedback::AlertComponent < LocoMotion.configuration.base_component_class
+class Daisy::Feedback::AlertComponent < LocoMotion::BaseComponent
   define_parts :icon, :content_wrapper
 
   def initialize(*args, **kws, &block)

data/app/components/daisy/feedback/loading_component.rb

@@ -0,0 +1,11 @@
+class Daisy::Feedback::LoadingComponent < LocoMotion::BaseComponent
+  prepend LocoMotion::Concerns::TippableComponent
+
+  def before_render
+    add_css(:component, "loading")
+  end
+
+  def call
+    part(:component)
+  end
+end

data/app/components/daisy/feedback/progress_component.rb

@@ -0,0 +1,20 @@
+class Daisy::Feedback::ProgressComponent < LocoMotion::BaseComponent
+
+  def initialize(*args, **kws, &block)
+    super
+
+    @value = config_option(:value, nil)
+    @max = config_option(:max, 100)
+  end
+
+  def before_render
+    set_tag_name(:component, :progress)
+    add_css(:component, "progress")
+    add_html(:component, { value: @value, max: @max }) if @value != nil
+  end
+
+  def call
+    part(:component)
+  end
+
+end