JS React => Ruby HYPERSTACK.

client_and_server.js

Mui = require('@material-ui/core');
Mui.default = Mui;

hyper_component.rb

class HyperComponent
  include Hyperstack::Component
  include Hyperstack::State::Observable
  param_accessor_style :accessors

  def __material_component(component_name, **options, &block)
    Mui.send(component_name, options, &block)
  end

  def __material_icon(icon_name, **options)
    __material_component("Icon", options) { icon_name.underscore }
  end

  def method_missing(method_name, *_args, **options, &block)
    classified_name = method_name.classify
    name_without_icon = method_name.sub("Icon", "")

    if classified_name == method_name && `Mui[#{method_name}]`
      __material_component(method_name, **options, &block)
    elsif name_without_icon != method_name && classified_name == method_name
      __material_icon(name_without_icon, **options, &block)
    else
      super
    end
  end
end

navbar.rb

module Page
  class Navbar < HyperComponent
    # <AppBar position="static">
    #   <Toolbar>
    #   <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
    #     <MenuIcon />
    #   </IconButton>
    #   <Typography variant="h6" className={classes.title}>
    #     News
    #   </Typography>
    #     <Button color="inherit">Login</Button>
    #   </Toolbar>
    # </AppBar>

    render do
      AppBar position: :static do
        Toolbar do
          IconButton edge: :start, color: :inherit, "aria-label": "menu" do
            MenuIcon()
          end

          Typography(variant: :h6) { "News" }

          Typography do
            Button(color: :inherit) { "Login" }
          end
        end
      end
    end
  end
end

note.md

I've added a Rails Direct upload integration hyperstack-org/hyperstack#273 (comment)