GitBook: [master] 172 pages and 4 assets modified

Author: jonasjabari

docs/.gitbook/assets/coming_soon.png

@@ -1,4 +1,4 @@
-# Matestack UI Core Docs
+# Welcome
 
 Welcome to the docs of the Ruby gem `matestack-ui-core`!
 
@@ -8,24 +8,25 @@ You end up writing 50% less code while increasing productivity, maintainability
 
 The docs cover following main topics:
 
-**[Installation](/docs/start/100-installation/)**
+[**Installation**](start/100-installation.md)
 
 Learn how to properly set up and update matestack-ui-core with your existing Rails application.
 
-**[UI components in pure Ruby](/docs/ui_components/README.md)**
+[**UI components in pure Ruby**](ui_components/)
 
 Craft your UI based on your components written in pure Ruby. Utilizing Ruby's amazing language features, you're able to create a cleaner and more maintainable UI implementation.
 
-**[Reactive components in pure Ruby](/docs/reactive_components/README.md)**
+[**Reactive components in pure Ruby**](reactive_components/)
 
-*Optional feature*
+_Optional feature_
 
 What about going even one step further and implement **REACTIVE** UIs in pure Ruby? Matestack's reactive core components can be used with a simple Ruby DSL enabling you to create reactive UIs without touching JavaScript!
 
-**[Reactive apps in pure Ruby](/docs/reactive_apps/README.md)**
+[**Reactive apps in pure Ruby**](reactive_apps/)
 
-*Optional feature*
+_Optional feature_
 
-The last step in order to leverage the full Matestack power: Create app (~Rails layout) and page (Rails ~view) classes and implement dynamic page transitions without any JavaScript implementation required.
+The last step in order to leverage the full Matestack power: Create app \(~Rails layout\) and page \(Rails ~view\) classes and implement dynamic page transitions without any JavaScript implementation required.
+
+In order to get started quickly, you might want to start with the [getting-started-guide](start/150-getting_started.md)
 
-In order to get started quickly, you might want to start with the [getting-started-guide](/docs/start/150-getting_started)

docs/.gitbook/assets/concept.png

@@ -0,0 +1,147 @@
+# Table of contents
+
+* [Welcome](README.md)
+* [Start](start/README.md)
+  * [Create a reactive Twitter clone in pure Ruby](start/150-getting_started.md)
+  * [Core Contribution](start/400-contribute.md)
+  * [Community](start/300-community.md)
+  * [About Matestack](start/200-about.md)
+  * [Installation/Update guide](start/100-installation.md)
+* [UI Components in pure Ruby](ui_components/README.md)
+  * [Rails integration](ui_components/100-rails_integration.md)
+  * [Component registry](ui_components/200-registry.md)
+  * [Component API](ui_components/300-component_api.md)
+  * [Haml components](ui_components/500-haml_components.md)
+  * [Testing](ui_components/1400-testing.md)
+  * [Reusing views or partials](ui_components/400-reusing_views_or_partials.md)
+* [Reactivity in pure Ruby](reactive_components/README.md)
+  * [Action Cable](reactive_components/1000-action_cable.md)
+  * [Collection](reactive_components/700-collection.md)
+  * [Actions](reactive_components/200-actions.md)
+  * [Async](reactive_components/400-async.md)
+  * [Cable](reactive_components/500-cable.md)
+  * [Custom reactive components](reactive_components/800-custom_reactive_components.md)
+  * [Forms](reactive_components/300-forms.md)
+  * [Rails integration](reactive_components/100-rails_integration.md)
+  * [Event Hub](reactive_components/900-event_hub.md)
+  * [Isolated](reactive_components/600-isolated.md)
+* [SPA-like Apps in pure Ruby](reactive_apps/README.md)
+  * [Tutorial](reactive_apps/1000-tutorial/README.md)
+    * [Essential Guide 8: Styling and Notifications](reactive_apps/1000-tutorial/10_styling_notifications.md)
+    * [Essential Guide 8: Collection and async component](reactive_apps/1000-tutorial/08_collection_async.md)
+    * [Essential Guide 13: Wrap Up & Outlook](reactive_apps/1000-tutorial/13_wrap_up.md)
+    * [Essential Guide 5: Toggle Component](reactive_apps/1000-tutorial/05_toggle_component.md)
+    * [Essential Guide 11: Authentication](reactive_apps/1000-tutorial/11_authentication_devise.md)
+    * [Essential Guide 3: Person Index, Show, Transition](reactive_apps/1000-tutorial/03_index_show_transition.md)
+    * [Essential Guide 2: ActiveRecord & Database](reactive_apps/1000-tutorial/02_active_record.md)
+    * [Essential Guide 7: Partials and custom components](reactive_apps/1000-tutorial/07_partials_and_custom_components.md)
+    * [Essential Guide 4: Forms & Actions \(Create, Update, Delete\)](reactive_apps/1000-tutorial/04_forms_edit_new_create_update_delete.md)
+    * [Essential Guide 12: Heroku Deployment with Postgres](reactive_apps/1000-tutorial/12_heroku_deployment.md)
+    * [Essential Guide 6: Async Component](reactive_apps/1000-tutorial/06_async_component.md)
+    * [Essential Guide 9: Custom Vue.js components](reactive_apps/1000-tutorial/09_custom_vue_js_components.md)
+    * [Essential Guide 1: Setup](reactive_apps/1000-tutorial/01_setup.md)
+    * [Creating a SPA-like App with Matestack](reactive_apps/1000-tutorial/00_introduction.md)
+  * [Transitions](reactive_apps/400-transitions.md)
+  * [Authorization via Pundit or CanCanCan](reactive_apps/600-pundit.md)
+  * [Integrating Devise](reactive_apps/500-devise.md)
+  * [Page API](reactive_apps/300-page_api.md)
+  * [Rails integration](reactive_apps/100-rails_integration.md)
+  * [App API](reactive_apps/200-app_api.md)
+* [API](api/README.md)
+  * [Core Components](api/100-components/README.md)
+    * [Matestack Core Component: Samp](api/100-components/samp.md)
+    * [Matestack Core Component: Abbr](api/100-components/abbr.md)
+    * [Matestack Core Component: Aside](api/100-components/aside.md)
+    * [Matestack Core Component: Dt](api/100-components/dt.md)
+    * [Matestack Core Component: Br](api/100-components/br.md)
+    * [Matestack Core Component: Blockquote](api/100-components/blockquote.md)
+    * [Matestack Core Component: Form Select](api/100-components/form_select.md)
+    * [Matestack Core Component: Form Input](api/100-components/form_input.md)
+    * [Matestack Core Component: Article](api/100-components/article.md)
+    * [Matestack Core Component: Form Textarea](api/100-components/form_textarea.md)
+    * [Matestack Core Component: Code](api/100-components/code.md)
+    * [Matestack Core Component: Header](api/100-components/header.md)
+    * [Matestack Core Component: Area](api/100-components/area.md)
+    * [Matestack Core Component: U](api/100-components/u.md)
+    * [Matestack Core Component: Progress](api/100-components/progress.md)
+    * [Matestack Core Component: Legend](api/100-components/legend.md)
+    * [Matestack Core Component: Mark](api/100-components/mark.md)
+    * [Matestack Core Component: Optgroup](api/100-components/optgroup.md)
+    * [Matestack Core Component: Label](api/100-components/label.md)
+    * [Matestack Core Component: Noscript](api/100-components/noscript.md)
+    * [Matestack Core Component: Address](api/100-components/address.md)
+    * [Matestack Core Component: Form Submit](api/100-components/form_submit.md)
+    * [Matestack Core Component: S](api/100-components/s.md)
+    * [Matestack Core Component: Data](api/100-components/data.md)
+    * [Matestack Core Component: Span](api/100-components/span.md)
+    * [Matestack Core Component: Hr](api/100-components/hr.md)
+    * [Matestack Core Component: Q](api/100-components/q.md)
+    * [Matestack Core Component: Div](api/100-components/div.md)
+    * [Matestack Core Component: Dialog](api/100-components/dialog.md)
+    * [Matestack Core Component: Fieldset](api/100-components/fieldset.md)
+    * [Matestack Core Component: Em](api/100-components/em.md)
+    * [Matestack Core Component: Dl](api/100-components/dl.md)
+    * [Matestack Core Component: Datalist](api/100-components/datalist.md)
+    * [Matestack Core Component: Sup](api/100-components/sup.md)
+    * [Matestack Core Component: Table](api/100-components/table.md)
+    * [Matestack Core Component: Paragraph](api/100-components/paragraph.md)
+    * [Matestack Core Component: Ins](api/100-components/ins.md)
+    * [Matestack Core Component: kbd](api/100-components/kbd.md)
+    * [Matestack Core Component: Param](api/100-components/param.md)
+    * [Matestack Core Component: Bdo](api/100-components/bdo.md)
+    * [Matestack Core Component: Figure](api/100-components/figure.md)
+    * [Matestack Core Component: Iframe](api/100-components/iframe.md)
+    * [Matestack Core Component: Dfn](api/100-components/dfn.md)
+    * [Matestack Core Component: Form](api/100-components/form.md)
+    * [Matestack Core Component: rails\_view](api/100-components/rails_view.md)
+    * [Matestack Core Component: Del](api/100-components/del.md)
+    * [Matestack Core Component: Input](api/100-components/input.md)
+    * [Matestack Core Component: Plain](api/100-components/plain.md)
+    * [Matestack Core Component: Unescaped](api/100-components/unescaped.md)
+    * [Matestack Core Component: Rt](api/100-components/rt.md)
+    * [Matestack Core Component: Meter](api/100-components/meter.md)
+    * [Matestack Core Component: Output](api/100-components/output.md)
+    * [Matestack Core Component: Onclick](api/100-components/onclick.md)
+    * [Matestack Core Component: Dd](api/100-components/dd.md)
+    * [Matestack Core Component: Form Radio](api/100-components/form_radio.md)
+    * [Matestack Core Component: Var](api/100-components/var.md)
+    * [Matestack Core Component: Wbr](api/100-components/wbr.md)
+    * [Matestack Core Component: Small](api/100-components/small.md)
+    * [Matestack Core Component: Object](api/100-components/object.md)
+    * [Matestack Core Component: Bdi](api/100-components/bdi.md)
+    * [Matestack Core Component: Lists](api/100-components/list.md)
+    * [Matestack Core Component: Collection](api/100-components/collection.md)
+    * [Matestack Core Component: Rp](api/100-components/rp.md)
+    * [Matestack Core Component: Caption](api/100-components/caption.md)
+    * [Matestack Core Component: Section](api/100-components/section.md)
+    * [Matestack Core Component: Select](api/100-components/select.md)
+    * [Matestack Core Component: Nav](api/100-components/nav.md)
+    * [Matestack Core Component: Youtube](api/100-components/youtube.md)
+    * [Matestack Core Component: Img](api/100-components/img.md)
+    * [Matestack Core Component: Footer](api/100-components/footer.md)
+    * [Matestack Core Component: Pre](api/100-components/pre.md)
+    * [Matestack Core Component: Template](api/100-components/template.md)
+    * [Matestack Core Component: Ruby](api/100-components/ruby.md)
+    * [Matestack Core Component: Details](api/100-components/details.md)
+    * [Matestack Core Component: Textarea](api/100-components/textarea.md)
+    * [Matestack Core Component: Heading](api/100-components/heading.md)
+    * [Matestack Core Component: B](api/100-components/b.md)
+    * [Matestack Core Component: Link](api/100-components/link.md)
+    * [Matestack Core Component: Main](api/100-components/main.md)
+    * [Matestack Core Component: Icon](api/100-components/icon.md)
+    * [Matestack Core Component: Sub](api/100-components/sub.md)
+    * [Matestack Core Component: Strong](api/100-components/strong.md)
+    * [Matestack Core Component: Cite](api/100-components/cite.md)
+    * [Matestack Core Component: PG](api/100-components/pg.md)
+    * [Matestack Core Component: Action](api/100-components/action.md)
+    * [Matestack Core Component: Picture](api/100-components/picture.md)
+    * [Matestack Core Component: Form Checkbox](api/100-components/form_checkbox.md)
+    * [Matestack Core Component: Option](api/100-components/option.md)
+    * [Matestack Core Component: Transition](api/100-components/transition.md)
+    * [Matestack Core Component: Cable](api/100-components/cable.md)
+    * [Matestack Core Component: Async](api/100-components/async.md)
+    * [Matestack Core Component: Map](api/100-components/map.md)
+    * [matestack core component: Toggle](api/100-components/toggle.md)
+    * [Matestack Core Component: Video](api/100-components/video.md)
+    * [Matestack Core Component: Button](api/100-components/button.md)
+

docs/.gitbook/assets/demo_screenshot.png

@@ -3,3 +3,4 @@
 Matestack provides you with a wide set of core components that enable you to easily build your UI.
 
 Please use the sidebar to navigate to the component documentations.
+

docs/.gitbook/assets/logo.png

@@ -1,30 +1,34 @@
 # Matestack Core Component: Abbr
 
-The HTML `<abbr>` tag, implemented in Ruby. 
+The HTML `<abbr>` tag, implemented in Ruby.
 
 ## Parameters
+
 This component expects 1 required param and various optional configuration params and can either yield content or display what gets passed to the `text` configuration param.
 
 ### Title - required
+
 Expects a string with the meaning of the abbreviation contained within the tag.
 
-### Text (optional)
+### Text \(optional\)
+
 Expects a string which will be displayed as the content inside the `<abbr>` tag. If this is not passed, a block must be passed instead.
 
-### HMTL attributes (optional)
+### HMTL attributes \(optional\)
+
 This component accepts all the canonical [HTML global attributes](https://www.w3schools.com/tags/ref_standardattributes.asp) like `id` or `class`.
 
 ## Examples
 
-### Example 1 - render options[:text] param
+### Example 1 - render options\[:text\] param
 
 ```ruby
 abbr title: 'Hypertext Markup Language', text: 'HTML'
 ```
 
 returns
 
-```html
+```markup
 <abbr title="Hypertext Markup Language">HTML</abbr>
 ```
 
@@ -38,6 +42,7 @@ end
 
 returns
 
-```html
+```markup
 <abbr title="Cascading Style Sheets"><span>CSS</span></abbr>
 ```
+

docs/README.md

@@ -123,9 +123,9 @@ end
 
 #### Perform redirect
 
-We can also perform a redirect (full page load) that only gets triggered on success and also accepts further params:
+We can also perform a redirect \(full page load\) that only gets triggered on success and also accepts further params:
 
-Please be aware, that emiting a event doen't have an effect when performing a redirect instead of a transition, as the whole page (including the surrounding app) gets reloaded!
+Please be aware, that emiting a event doen't have an effect when performing a redirect instead of a transition, as the whole page \(including the surrounding app\) gets reloaded!
 
 ```ruby
 success: {
@@ -166,7 +166,6 @@ end
 
 Same applies for the `failure` configuration.
 
-
 ### Failure
 
 As counterpart to the success part of the action component, there is also the possibility to define the failure behavior. This is what gets triggered after the response to our action returns a failure code, usually in the range of `400` or `500` HTTP status codes.
@@ -190,7 +189,7 @@ failure: {
 }
 ```
 
-### ID (optional)
+### ID \(optional\)
 
 This parameter accepts a string of ids that the action component should have:
 
@@ -200,11 +199,11 @@ id: 'my-action-id'
 
 which renders as an HTML `id` attribute, like so:
 
-```html
+```markup
 <a id="my-action-id">...</a>
 ```
 
-### Class (optional)
+### Class \(optional\)
 
 This parameter accepts a string of classes that the action component should have:
 
@@ -214,7 +213,7 @@ class: 'my-action-class'
 
 which renders as an HTML `class` attribute, like so:
 
-```html
+```markup
 <a class="my-action-class">...</a>
 ```
 
@@ -228,7 +227,7 @@ See some common use cases for the action core component below:
 
 ### Example 1 - Async request with payload
 
-First, make sure our routes accept requests the way we want to use them.  Modify them in `config/routes.rb`
+First, make sure our routes accept requests the way we want to use them. Modify them in `config/routes.rb`
 
 ```ruby
 post '/action_test', to: 'action_test#test', as: 'action_test'
@@ -326,8 +325,7 @@ end
 
 ### Example 3.1: Async request with success event emit used for rerendering
 
-Below, we define an action component and an async component. The async component is documented [here](/docs/components/async.md),
-for now it is just important that it waits for our `action_config` success message and will get re-rendered.
+Below, we define an action component and an async component. The async component is documented [here](https://github.com/matestack/matestack-ui-core/tree/829eb2f5a7483ef4b78450a5429589ec8f8123e8/docs/components/async.md), for now it is just important that it waits for our `action_config` success message and will get re-rendered.
 
 ```ruby
 class ExamplePage < Matestack::Ui::Page
@@ -358,7 +356,7 @@ class ExamplePage < Matestack::Ui::Page
 end
 ```
 
-Now, if we click the button and everything goes well (which should be the case in this very simple example), we can see the timestamp gets updated - nice!
+Now, if we click the button and everything goes well \(which should be the case in this very simple example\), we can see the timestamp gets updated - nice!
 
 ### Example 3.2: Async request with success event emit used for notification
 
@@ -388,14 +386,14 @@ class ExamplePage < Matestack::Ui::Page
     }
   end
 
-end  
+end
 ```
 
 This time, after clicking our action component we should see the `good job!` message that was initially hidden and disappears again after 300ms.
 
 ### Example 3.3: Async request with failure event emit used for notification
 
-In the examples before, we always assumed (and made sure) that things went well. Now, it's the first time to use the `failure_action_test_path` to see how we can notify the user if things go wrong!
+In the examples before, we always assumed \(and made sure\) that things went well. Now, it's the first time to use the `failure_action_test_path` to see how we can notify the user if things go wrong!
 
 ```ruby
 class ExamplePage < Matestack::Ui::Page
@@ -546,6 +544,7 @@ end
 
 Now, we can visit `localhost:3000/action_test/page1` and see our first page, shown by the `This is Page 1` text.
 
-There, we can click on our button (`Click me!`) and get transfered to the second page. There, we see the `This is Page 2` text and, for 300ms, our `server says: good job!` success message. Neat!
+There, we can click on our button \(`Click me!`\) and get transfered to the second page. There, we see the `This is Page 2` text and, for 300ms, our `server says: good job!` success message. Neat!
+
+If we click the button \(`Click me!`\) on the second page, we get the failure message \(`server says: something went wrong!`\) and get sent back to page 2, just as we wanted to.
 
-If we click the button (`Click me!`) on the second page, we get the failure message (`server says: something went wrong!`) and get sent back to page 2, just as we wanted to.

docs/SUMMARY.md

@@ -3,12 +3,15 @@
 The HTML `<address>` tag, implemented in Ruby.
 
 ## Parameters
+
 This component can take various optional configuration params and either yield content or display what gets passed to the `text` configuration param.
 
-### Text (optional)
+### Text \(optional\)
+
 Expects a string which will be displayed as the content inside the `<address>` tag. If this is not passed, a block must be passed instead.
 
-### HMTL attributes (optional)
+### HMTL attributes \(optional\)
+
 This component accepts all the canonical [HTML global attributes](https://www.w3schools.com/tags/ref_standardattributes.asp) like `id` or `class`.
 
 ## Examples
@@ -27,24 +30,25 @@ end
 
 returns
 
-```html
+```markup
 <address>
   Codey McCodeface<br>
   1 Developer Avenue<br>
   Techville
 </address>
 ```
 
-### Example 2 - render options[:text] param
+### Example 2 - render options\[:text\] param
 
 ```ruby
 address text: 'PO Box 12345'
 ```
 
 returns
 
-```html
+```markup
 <address>
   PO Box 12345
 </address>
 ```
+