Component Library

/components /html /application /_error_messages.html.erb

<%= render 'error_messages', error_messages: ['Error 1', 'Very long long error message that is long', 'Short Message'] %>
  • Error 1
  • Very long long error message that is long
  • Short Message

/components /html /book_regions /_form.html.erb

<%= render 'book_regions/form', book: PriceBook.new(name: ''), form_action: "#", back_href: '#', region_options: ['Western Cape', 'Eastern Cape'] %>

Set Region


Back

/components /html /book_regions /_select_country.html.erb

<%= render 'book_regions/select_country', book: 0 %>

Select Country

/components /html /books /_form.html.erb

<% book = PriceBook.new(name: '') %> <%= render 'books/form', book: book, form_action: "#", back_href: '#', title: 'Edit Price Book', error_messages: book.errors.full_messages %>

Edit Price Book

Back

/components /html /books /_form_with_errors.html.erb

<% book = PriceBook.new(name: '').tap(&:save) %> <%= render 'books/form', book: book, form_action: "#", back_href: '#', title: 'Edit Price Book', error_messages: book.errors.full_messages %>

Edit Price Book

  • Name can't be blank
Back

/components /html /price_book_pages /_form.html.erb

<% page = PriceBook::Page.new %> <% params[:book_id] = 'dummy' %> <%= render 'price_book_pages/form', page: page, back_href: '#' %>
Back

/components /html /price_book_pages /_form_with_errors.html.erb

<% page = PriceBook::Page.new.tap(&:save) %> <%= render 'price_book_pages/form', page: page, back_href: '#' %>
  • name
  • category
  • unit
Back

/components /react /_price_book_app.erb

<% ['Bakery','Fresh','Frozen','Ready Meals', 'Food Cupboard', 'Snacks and Sweets', 'Drinks', 'Household', 'Pets','Baby', 'Health and Beauty', 'Other'] %> <%= props_component('PriceBookApp', pages: [{id: 1, name: 'Bread', category: 'Bakery', unit: 'grams', best_entry: {product_name: 'Woolworths White Bread', amount: 1, package_size: 700, package_unit: 'grams', price_per_package: 700 * 0.77, price_per_unit: 0.77, store_name: 'Woolworths', location: 'Cape Town', total_price: 13.95 }}, {id: 2, name: 'Large Eggs', category: 'Fresh', unit: 'items'}, {id: 3, name: 'Oven Chips', category: 'Frozen', unit: 'grams'}, {id: 4, name: 'Microwave Macaroni', category: 'Ready Meals', unit: 'grams'}, {id: 5, name: 'Beans in Tomato Sauce', category: 'Food Cupboard', unit: 'grams'}, {id: 6, name: 'Fizzers', category: 'Snacks and Sweets', unit: 'each'}, {id: 7, name: 'Beer', category: 'Drinks', unit: 'milliliters'}, {id: 8, name: 'Dish washing liquid', category: 'Household', unit: 'milliliters'}, {id: 9, name: 'Dog Food', category: 'Pets', unit: 'grams'}, {id: 10, name: 'Diapers', category: 'Baby', unit: 'grams'}, {id: 11, name: 'Toothbrushes', category: 'Health and Beauty', unit: 'each'}, {id: 12, name: 'Hammer', category: 'Other', unit: 'each'}]) %>

/components /react /_shopping_list_app.erb

<%= props_component('ShoppingListApp', initial_items: [{id: '1', amount: 1, name: "Bread", purchase_url: ""}, {id: '2', amount: 1, purchase_url: "", name: "We need a very long line here so we can see what it looks like"}, {id: '3', amount: 1, name: "Koo Beans", purchased_at: Time.current.to_s, unpurchase_url: ""}, {id: '4', amount: 2, name: 'Eggs', purchase_url: ''}], pages: [{name: 'Bread', category: 'Bakery', product_names: [], unit: 'grams', best_entry: {price_per_unit: 0.019928571428571427, price_per_package: 13.95, currency_symbol: 'R', amount: 1, package_size: '700'} }, {name: 'Eggs', category: 'Fresh', product_names: [], unit: 'each', best_entry: {price_per_unit: 1.444, price_per_package: 25.99, currency_symbol: 'R', amount: 3, package_size: '6'} }], shopping_list: {title: "My Shopping List", price_book_pages_url: '/components_json/price_book_pages_url.json', item_names_url: '/components_json/item_names_url.json'}, create_url: "") %>

/components /react /_shopping_list_index_app.erb

<%= props_component('ShoppingListsIndexApp', initial_lists: [{id: '0', title: '2016-03-21'}, {id: '1', title: 'Custom Name'}, {id: '2', title: '2016-02-21'}], create_url: "", authenticity_token: "") %>

/components /react /entries /_form_app.html.erb

<%= props_component 'EntriesFormApp', entry: {total_price: 100, date_on: Date.current, product_name: 'Hello', amount: 10, package_size: 2, store_id: "t"}, currency_symbol: '$$', create_url: "#", back_href: "#", new_store_href: "#", error_messages: [], local_suggestions: ["Beans", "Bread", "Tomatoes"], entry_names_url: '/components_json/item_names_url.json', selectable_stores: [['Pick n Pay - Canal Walk', 't'],['Checkers - Canal Walk', 'tt']], package_unit: "grams" %>

/components /react /entries /_form_app_with_errors.html.erb

<% price_entry = PriceEntry.new.tap(&:save) %> <%= props_component('EntriesFormApp', entry: {total_price: 100, date_on: Date.current, product_name: 'Hello', amount: 10, package_size: 2, store_id: "tt"}, package_unit: "KG", back_href: "#", new_store_href: "#", create_url: "#", error_messages: price_entry.errors.full_messages, local_suggestions: ["Beans", "Bread", "Tomatoes"], entry_names_url: '/components_json/item_names_url.json', selectable_stores: [['Pick n Pay - Canal Walk', 't'],['Checkers - Canal Walk', ' tt']]) %>