Create a new component

All files related to a component should have the component name, in snake case, for easy search and organization. To create a new component, you need to create a few files. These follow a specific structure, which is described below:

app/
 ├─ assets/javascript/controllers/
 │  └─ foo_controller.js
 │
 └─ components/
    ├─ foo.rb
    └─ foo/
       ├─ foo.html.erb
       ├─ foo.css
       ├─ inner_component.rb
       ├─ inner_component.css
       └─ inner_component.yml
test/components/
├─ previews/components/navigation/           # reflects folder structure in Lookbook
│  ├─ button_preview.rb                      # preview component
│  └─ button_preview/all.html.erb            # usage examples
├─ loopos_ui/documentation/button.md         # documentation
└─ loopos_ui/usage_documentation/button.md   # Info tab documentation (Design & usage)

Loopos UI provides a generator to create a new component. You can use it like so:

Eg: rails g loopos_ui:component foo

Our view components should also inherit from LoopComponent instead of ViewComponent::Base. LoopComponent is a custom class that inherits from ViewComponent::Base and adds some extra functionality (simillar to how models inherit from ApplicationRecord instead of directly from ActiveRecord::Base).

LoopComponents use Dry::Initializer, a gem that provides a DSL for defining attributes with default values. You can read more here: dry-initializer