Create DSL for layouts (similar to JSX) called RSX about r3bl-open-core HOT 7 CLOSED

tw_surface.box_start(TWBoxProps {
  styles: tw_surface.stylesheet.find_styles_by_ids(vec!["style1"]),
  id: COL_1_ID.into(),
  dir: Direction::Vertical,
  req_size: (50, 100).try_into()?,
})?;

tw_surface.box_start(box_props! {
  COL_1_ID,
  Direction::Vertical,
  (50, 100).try_into()?,
  get_styles! { from: tw_surface.stylesheet => ["style1", "style2"] }
})?;

box_start! {
  in: tw_surface,
  COL_1_ID,
  Direction::Vertical,
  (50, 100).try_into()?,
  ["style1", "style2"]
};

if let Some(shared_component) = self.component_registry.get(COL_2_ID) {
  let current_box = tw_surface.current_box()?;
  let queue = shared_component
    .write()
    .await
    .render(&self.has_focus, current_box, state, shared_store)
    .await?;
  tw_surface.render_buffer += queue;
}

render_component! {
  in: tw_surface,
  from: self.component_registry,
  id: COL_1_ID,
  has_focus: self.has_focus,
  state: state,
  shared_store: shared_store
};

make_box! {
  in:    tw_surface,
  id:    COL_1_ID,
  dir:   Direction::Vertical,
  size:  (50, 100).try_into()?,
  style: ["style1", "style2"],
  render: {
    from:         self.component_registry,
    component_id: COL_1_ID,
    has_focus:    self.has_focus,
    state:        state,
    shared_store: shared_store
  }
}

box_start! {
  in: tw_surface,
  COL_1_ID,
  Direction::Vertical,
  (50, 100).try_into()?,
  ["style1", "style2"]
};
render_component! {
  in: tw_surface,
  from: self.component_registry,
  id: COL_1_ID,
  has_focus: self.has_focus,
  state: state,
  shared_store: shared_store
};
tw_surface.box_end()?;

tw_surface.box_start(TWBoxProps {
  styles: tw_surface.stylesheet.find_styles_by_ids(vec!["style2"]),
  id: COL_2_ID.to_string(),
  dir: Direction::Vertical,
  req_size: (50, 100).try_into()?,
})?;

// OPTIMIZE: macro?
if let Some(shared_component) = self.component_registry.get(COL_2_ID) {
  let current_box = tw_surface.current_box()?;
  let queue = shared_component
    .write()
    .await
    .render(&self.has_focus, current_box, state, shared_store)
    .await?;
  tw_surface.render_buffer += queue;
}

tw_surface.box_end()?;

make_box! {
  in:    tw_surface,
  id:    COL_1_ID,
  dir:   Direction::Vertical,
  size:  (50, 100).try_into()?,
  style: ["style1"],
  render: {
    from:         self.component_registry,
    has_focus:    self.has_focus,
    state:        state,
    shared_store: shared_store
  }
}

let mut surface = surface_start! {
  stylesheet: style_helpers::create_stylesheet()?,
  pos: (0, 0).into(),
  size: (window_size.cols, window_size.rows - 1).into(), // Leave row at bottom for message.
};

self
  .create_main_container(&mut surface, state, shared_store)
  .await?;

surface.surface_end()?;

status_bar_helpers::render(&mut surface.render_buffer, window_size);

surface.render_buffer