# Core gem (required) gem "vident" # Choose your rendering engine (at least one required) gem "vident-view_component" # For ViewComponent support gem "vident-phlex" # For Phlex support

# app/components/button_component.rb class ButtonComponent < Vident::ViewComponent::Base # Define typed properties prop :text, String, default: "Click me" prop :url, _Nilable(String) prop :style, _Union(:primary, :secondary), default: :primary prop :clicked_count, Integer, default: 0 # Configure Stimulus integration stimulus do # Setup actions, including with proc to evaluate on instance  actions [:click, :handle_click], -> { [stimulus_scoped_event(:my_custom_event), :handle_this] if should_handle_this? } # Map the clicked_count prop as a Stimulus value values_from_props :clicked_count # Dynamic values using procs (evaluated in component context) values item_count: -> { @items.count }, api_url: -> { Rails.application.routes.url_helpers.api_items_path }, loading_duration: 1000 # or set static values # Static and dynamic classes classes loading: "opacity-50 cursor-wait", size: -> { @items.count > 10 ? "large" : "small" } end def call root_element do |component| # Wire up targets etc component.tag(:span, stimulus_target: :status) do @text end end end private # Configure your components root HTML element def root_element_attributes { element_tag: @url ? :a : :button, html_options: { href: @url }.compact } end # optionally add logic to determine initial classes def root_element_classes base_classes = "btn" case @style when :primary "#{base_classes} btn-primary" when :secondary "#{base_classes} btn-secondary" end end end

class CardComponent < Vident::ViewComponent::Base # Basic property with type prop :title, String # Property with default value prop :subtitle, String, default: "" # Nullable property prop :image_url, _Nilable(String) # Property with validation prop :size, _Union(:small, :medium, :large), default: :medium # Boolean property (creates predicate method) prop :featured, _Boolean, default: false end

class MyComponent < Vident::ViewComponent::Base prop :data, Hash, default: -> { {} } def after_component_initialize @processed_data = process_data(@data) end private def process_data(data) # Your initialization logic here data.transform_values(&:upcase) end end

# In your component class def root_element_classes ["card", featured? ? "card-featured" : nil] end private def root_element_attributes { html_options: { role: "article", "aria-label": title } } end

class MyComponent < Vident::ViewComponent::Base # Component code end # Or with an application base class class ApplicationComponent < Vident::ViewComponent::Base # Shared configuration end class MyComponent < ApplicationComponent # Component code end

class MyComponent < Vident::Phlex::HTML def view_template root do h1 { "Hello from Phlex!" } end end end

class ToggleComponent < Vident::ViewComponent::Base prop :expanded, _Boolean, default: false stimulus do # Define actions the controller responds to actions :toggle, :expand, :collapse # Define targets for DOM element references targets :button, :content # Define static values values animation_duration: 300 # Define dynamic values using procs (evaluated in component context) values item_count: -> { @items.count } values current_state: proc { expanded? ? "open" : "closed" } # Map values from component props values_from_props :expanded # Define CSS classes for different states classes expanded: "block", collapsed: "hidden", transitioning: "opacity-50" end end

class DynamicComponent < Vident::ViewComponent::Base prop :items, _Array(Hash), default: -> { [] } prop :loading, _Boolean, default: false prop :user, _Nilable(User) stimulus do # Mix static and dynamic values in a single call values( static_config: "always_same", item_count: -> { @items.count }, loading_state: proc { @loading ? "loading" : "idle" }, user_role: -> { @user&.role || "guest" }, api_endpoint: -> { Rails.application.routes.url_helpers.api_items_path } ) # Mix static and dynamic classes classes( base: "component-container", loading: -> { @loading ? "opacity-50 cursor-wait" : "" }, size: proc { @items.count > 10 ? "large" : "small" }, theme: -> { current_user&.dark_mode? ? "dark" : "light" } ) # Dynamic actions and targets actions -> { @loading ? [] : [:click, :submit] } targets -> { @expanded ? [:content, :toggle] : [:toggle] } end private def current_user @current_user ||= User.current end end

stimulus do # Single proc returns a single value (even if it's an array) actions -> { @expanded ? [:click, :submit] : :click } # Multiple procs provide multiple values actions -> { @can_edit ? :edit : nil }, -> { @can_delete ? :delete : nil }, :cancel # static value # This results in: [:edit, :delete, :cancel] (assuming both conditions are true) end

class MyComponent < Vident::ViewComponent::Base stimulus do # Define an action that responds to a scoped event actions -> { [stimulus_scoped_event_on_window(:data_loaded), :handle_data_loaded] } end def handle_click # Dispatch a scoped event from JavaScript # This would generate: "my-component:dataLoaded" puts stimulus_scoped_event(:data_loaded) # For window events, this generates: "my-component:dataLoaded@window"  puts stimulus_scoped_event_on_window(:data_loaded) end end # Available as both class and instance methods: MyComponent.stimulus_scoped_event(:data_loaded) # => "my-component:dataLoaded" MyComponent.new.stimulus_scoped_event(:data_loaded) # => "my-component:dataLoaded"

class CustomComponent < Vident::ViewComponent::Base private def root_element_attributes { element_tag: :article, stimulus_controllers: ["custom", "analytics"], stimulus_actions: [ [:click, :handleClick], [:custom_event, :handleCustom] ], stimulus_values: { endpoint: "/api/data", refresh_interval: 5000 }, stimulus_targets: { container: true } } end end

root_element do |greeter| input(type: "text", data: {**greeter.stimulus_target(:name)}, class: %(...)) trigger_or_default(greeter) greeter.tag(:span, stimulus_target: :output, class: "ml-4 #{greeter.class_list_for_stimulus_classes(:pre_click)}") do plain %( ... ) end end

class ParentComponent < Vident::ViewComponent::Base renders_one :a_nested_component, ButtonComponent stimulus do actions :handleTrigger end end

class LinkOrButtonComponent < Vident::ViewComponent::Base prop :url, _Nilable(String) private def root_element_attributes { element_tag: url? ? :a : :button, html_options: { href: url, type: url? ? nil : "button" }.compact } end end

class StyledComponent < Vident::ViewComponent::Base prop :variant, Symbol, default: :default private # Classes on the root element def root_element_classes ["base-class", variant_class] end def variant_class case @variant when :primary then "text-blue-600 bg-blue-100" when :danger then "text-red-600 bg-red-100" else "text-gray-600 bg-gray-100" end end end

class TailwindComponent < Vident::ViewComponent::Base prop :size, Symbol, default: :medium private def root_element_classes # Conflicts with size_class will be resolved automatically "p-2 text-sm #{size_class}" end def size_class case @size when :small then "p-1 text-xs" when :large then "p-4 text-lg" else "p-2 text-base" end end end

class ExpensiveComponent < Vident::ViewComponent::Base include Vident::Caching with_cache_key :to_h # Cache based on all attributes # or with_cache_key :id, :updated_at # Cache based on specific attributes end