Merge branch 'master' into prepare_0.7.4_release

Author: jonasjabari

CODE_OF_CONDUCT.md

@@ -0,0 +1,76 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to making participation in our project and
+our community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, sex characteristics, gender identity and expression,
+level of experience, education, socio-economic status, nationality, personal
+appearance, race, religion, or sexual identity and orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment
+include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or
+ advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic
+ address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+ professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable
+behavior and are expected to take appropriate and fair corrective action in
+response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces
+when an individual is representing the project or its community. Examples of
+representing a project or community include using an official project e-mail
+address, posting via an official social media account, or acting as an appointed
+representative at an online or offline event. Representation of a project may be
+further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting the project team at [email protected]. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. The project team is
+obligated to maintain confidentiality with regard to the reporter of an incident.
+Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
+available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see
+https://www.contributor-covenant.org/faq

README.md

@@ -1,6 +1,7 @@
 ![](https://github.com/matestack/matestack-ui-core/workflows/specs/badge.svg)
 [![Gitter](https://badges.gitter.im/basemate/community.svg)](https://gitter.im/basemate/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
 [![Gem Version](https://badge.fury.io/rb/matestack-ui-core.svg)](https://badge.fury.io/rb/matestack-ui-core)
+[![Docs](https://img.shields.io/badge/docs-matestack-blue.svg)](https://www.matestack.org/docs/install)
 
 ![matestack logo](./logo.png)
 
@@ -21,7 +22,7 @@ dynamic Web-App.
 
 ### Current State: 
 
-We love to see more and more people using and contributing to matestack-ui-core. Our current version is 0.7.3 and it's not perfect yet. We recommend you to start using matestack-ui-core in a side project and report issues as this helps us to push matestack-ui-core towards a production ready 1.0.0. At basemate, we already use matestack-ui-core in production as we know how to handle current issues and bypass them with deep insights of the core implementation. We plan to invest time and money (yes, we're hiring) on following improvements:
+We love to see more and more people using and contributing to matestack-ui-core. Our current version is 0.7.4 and it's not perfect yet. We recommend you to start using matestack-ui-core in a side project and report issues as this helps us to push matestack-ui-core towards a production ready 1.0.0. At matestack, we already use matestack-ui-core in production as we know how to handle current issues and bypass them with deep insights of the core implementation. We plan to invest time and money (yes, we're hiring) on following improvements:
 
 * debugging and error handling
 * core refactoring, increased core maintainability and code quality

docs/components/async.md

@@ -54,7 +54,7 @@ end
 
 ### Hide_after
 
-The `hide_after` option lets us define a timespan after which the component gets hidden.
+The `hide_after` option lets us define a timespan in milliseconds after which the component gets hidden.
 
 ```ruby
 async hide_after: 1000 do
@@ -103,7 +103,7 @@ end
 ```
 
 #### delayed defer
-`defer: 2000` means that the content of the `async` component gets requested within a separate GET request `2000ms` after initial page load is done.
+`defer: 2000` means that the content of the `async` component gets requested within a separate GET request 2000 milliseconds after initial page load is done.
 ```ruby
 async defer: 2000 do
   div id: 'my-div' do
@@ -290,7 +290,7 @@ end
 
 ### Example 4: Hide after show on event
 
-On our example page, we wrap a simple timestamp in an async component and tell it to show up when the event `my_event` gets triggered and be hidden after 1000ms.
+On our example page, we wrap a simple timestamp in an async component and tell it to show up when the event `my_event` gets triggered and be hidden after 1000 milliseconds.
 
 ```ruby
 class ExamplePage < Matestack::Ui::Page

docs/concepts/component.md

@@ -219,26 +219,19 @@ This gets rendered into HTML as shown below. Notice that the `@foo` from the com
 To use *component instance scope slots*, first define slots within a static component:
 
 ```ruby
-class Components::Some::Component < Matestack::Ui::StaticComponent
+class Components::Other::Component < Matestack::Ui::StaticComponent
 
   def prepare
-    @foo = "foo from component"
+    @foo = "foo from other component"
   end
 
   def response
     components {
-      div id: "my-component" do
-        custom_other_component slots: {
-          my_slot_from_component: my_slot_from_component,
-          my_slot_from_page: @options[:my_slot_from_page]
-        }
-      end
-    }
-  end
-
-  def my_slot_from_component
-    slot {
-      span id: "my-slot-from-component" do
+      div id: "my-other-component" do
+        slot @options[:slots][:my_slot_from_component]
+        br
+        slot @options[:slots][:my_slot_from_page]
+        br
         plain @foo
       end
     }
@@ -247,22 +240,29 @@ class Components::Some::Component < Matestack::Ui::StaticComponent
 end
 ```
 
-And another component:
+and also in some component:
 
 ```ruby
-class Components::Other::Component < Matestack::Ui::StaticComponent
+class Components::Some::Component < Matestack::Ui::StaticComponent
 
   def prepare
-    @foo = "foo from other component"
+    @foo = "foo from component"
   end
 
   def response
     components {
-      div id: "my-other-component" do
-        slot @options[:slots][:my_slot_from_component]
-        br
-        slot @options[:slots][:my_slot_from_page]
-        br
+      div id: "my-component" do
+        custom_other_component slots: {
+          my_slot_from_component: my_slot_from_component,
+          my_slot_from_page: @options[:my_slot_from_page]
+        }
+      end
+    }
+  end
+
+  def my_slot_from_component
+    slot {
+      span id: "my-slot-from-component" do
         plain @foo
       end
     }
@@ -271,7 +271,7 @@ class Components::Other::Component < Matestack::Ui::StaticComponent
 end
 ```
 
-Then, put both components to use on the example page:
+Then, put both components (note that some component uses other component so that's how they're both in here) to use on the example page:
 
 ```ruby
 class Pages::ExamplePage < Matestack::Ui::Page
@@ -367,7 +367,7 @@ Not a fancy example, but this is the result:
 <div id="div-on-page">
   <div id="my-component">
     foo from page
-  </div>  
+  </div>
 </div>
 ```
 

docs/contribute/README.md

@@ -22,6 +22,7 @@ Feel free to take a look at other examples and copy their structure!
 Note: We will not approve pull requests that introduce new concepts or components without documentation. Same goes for existing concepts & components.
 If you change the behavior of an existing part of this project, make sure to also update the corresponding part of the documentation!
 
+
 ## Dockerized Core Dev
 
 We dockerized the core development in order to make it as convenient as possible to contribute to matestack-ui-core.
@@ -93,13 +94,6 @@ Otherwise the generated files will be owned by the `root` user and are only writ
 
 ## Core Components Generator
 
-Core Components are an essential part of the `matestack-ui-core` gem.
-If you are planning to contribute to Matestack you can start doing that by creating a core component. To help you getting started you can use the Core Component Generator.
-
-The generator will create a matestack core component to `app/concepts/matestack/ui/core`.
-
-Example:
-
 ```bash
 CURRENT_UID=$(id -u):$(id -g) docker-compose run --rm dummy bash
 rails generate matestack:core:component div
@@ -116,34 +110,49 @@ docs/components/div.md
 
 ## Dockerized Test Env
 
+bundle install
+yarn install
+cd spec/dummy
+yarn install # dependencies for the dummy app in testing
+cd ../..
+
+bundle exec rake db:create
+bundle exec rake db:schema:load
+```
+
+## Tests
+
 To assure this project is and remains in great condition, we heavily rely on automated tests. Tests are defined in `/spec` folder and can be executed by running:
 
 ```shell
 docker-compose run --rm test bash
 bundle exec rake db:setup #once initially
 bundle exec rspec spec/usage/components
+
 ```
 
 Tests follow quite the same rules as the documentation: Make sure to either add relevant tests (when introducing new concepts or components) or change existing ones to fit your changes (updating existing concepts and components). Pull requests that add/change concepts & components and do not come with corresponding tests will not be approved.
 
-### Note: Running tests on macOS
-
-Make sure you have installed `chromedriver` on your machine. You can install `chromedriver` via `brew` with
+## Core Components
 
-```shell
-brew cask install chromedriver
-```
+Core Components are an essential part of the `matestack-ui-core` gem.
+If you are planning to contribute to Matestack you can start doing that by creating a core component. To help you getting started you can use the Core Component Generator.
 
-You can then run your the testsuite with `bundle exec rspec`.
+The generator will create a matestack core component to `app/concepts/matestack/ui/core`.
 
-If you get an error about a version mismatch similar to this one:
+Example:
 
-`Chrome version must be between X and Y (Driver info: chromedriver=X.Y.Z)`
+```bash
+rails generate matestack:core:component div
+```
 
-Make sure you update your chromedriver by executing this command in the project root:
+This will create a component for the HTML `<div>` tag and will generate the following files:
 
-```shell
-rails app:webdrivers:chromedriver:update
+```bash
+app/concepts/matestack/ui/core/div/div.haml
+app/concepts/matestack/ui/core/div/div.rb
+spec/usage/components/div_spec.rb
+docs/components/div.md
 ```
 
 ## Release

docs/install/README.md

@@ -145,3 +145,9 @@ Rails.application.config.assets.paths << Rails.root.join('app/matestack/componen
 ## Websocket Integration
 
 If you want to use websockets, please read [this guide](/docs/integrations/websockets.md)
+
+## That's it!
+
+That's all you need to setup matestack!
+
+For your next steps in learning matestack we recommend you check out the basics [concepts](/docs/concepts/README.md) and follow the [hello world guide](/guides/10_hello_world.md) which shows you how to create your first matestack app!

guides/10_hello_world.md

@@ -97,7 +97,7 @@ All we got left to do is to start Rails by entering `rails server` in the consol
 
 We have successfully installed the `Matestack UI Core gem` to a Rails application and can now write our views in pure Ruby!
 
-Even though we have only seen static content in this hello world example, you may already see the potential in this approach - if not, go ahead and see how we can add client side dynamic with other Matestack components!
+Even though we have only seen static content in this hello world example, you may already see the potential in this approach - if not, go ahead and see how we can add client side dynamic with [other Matestack components](/docs/components#dynamic-core-components)!
 
 ## Next steps