Product resource lifecycle

A coherent product resource composition covering queryable indexes, validated forms, lifecycle details, edit-owned deletion, and a narrow hybrid shell.

Product administration

A complete product workflow spanning search, forms, details, lifecycle history, deletion, and narrow screens.

Complete screen

Northstar

Product details

Keep catalog identity, price, inventory, status, and customer-facing details current.

Product details need attention

Name can't be blank, Sku is invalid, Price must be greater than or equal to 0, Inventory count must be greater than or equal to 0, and Description can't be blank

ViewportFull width

Width

Preset

Rubytest/dummy/app/components/gallery/compositions/product_resource_page.rb

render NitroKit::AppShell.new(
  id: "gallery-product-resource-shell",
  layout: :hybrid,
  data: {
    gallery: "composition-surface",
    gallery_shell_preview: "true",
    gallery_composition: "product-resource",
    gallery_composition_state: state,
    gallery_mobile: state == "narrow" ? "true" : nil
  }.compact
) do |shell|
  shell.brand { strong { "Northstar" } }
  shell.navigation { render_product_navigation }
  shell.topbar { render_product_toolbar }
  shell.main do
    div(data: { gallery: "product-resource-main" }) do
      render NitroKit::Flex.new(
        dir: :col,
        gap: 6,
        align: :stretch,
        id: "gallery-product-resource-stack"
      ) do
        render_product_state
      end
    end
  end
end