Merge pull request #1688 from Human-Connection/configure-docker-to-work-with-storybook

Configure docker to work with storybook

CONTRIBUTING.md

@@ -50,17 +50,17 @@ But what do we do when waiting for merge into master \(wanting to keep PRs small
   * but what about when you are waiting for merge?
   * solutions
     * 1\) put 2nd PR into branch that the first PR is hitting - but requires update after merging
-    * 2\) prefer to leave exiting PR until it can be reviewed, and instead go and work on some other part of the codebase that is not impacted by the first PR
+    * 2\) prefer to leave existing PR until it can be reviewed, and instead go and work on some other part of the codebase that is not impacted by the first PR
 
 ### Code Review
 * Github setting in place - at least one review is required to merge
   - in principle anyone (who is not the PR owner) can review
-  - but often it will be the core developers (Robert, Ulf, Greg, Wolfgang?)
+  - but often it will be the core developers (Robert, Wolfgang, Matt, Alina, Alex)
   - once there is a review, and presuming no requested changes, PR opener can merge
 
 * CI/tests
   - the CI needs to pass
-    - linting  <-- autofix?
+    - linting (yarn lint --fix)
     - tests (unit, feature) (backend, frontend)
     - codecoverage
 

backend/README.md

@@ -72,6 +72,8 @@ To reset the database run:
 $ docker-compose exec backend yarn run db:reset
 # you could also wipe out your neo4j database and delete all volumes with:
 $ docker-compose down -v
+# if container is not running, run this command to set up your database indeces and contstraints
+$ docker-compose run neo4j db_setup
 ```
 {% endtab %}
 
@@ -88,6 +90,40 @@ $ yarn run db:reset
 {% endtab %}
 {% endtabs %}
 
+### Storybook
+
+We encourage contributors to use Storybook to test out new components in an isolated way, and benefit from its many features.
+See the docs for live examples and answers to FAQ, among other helpful information. ![Storybook docs](https://storybook.js.org/docs/basics/introduction/)
+
+{% tabs %}
+{% tab title="Docker" %}
+
+After you have started the application following the instructions above, in another terminal run:
+
+```bash
+$ docker-compose exec webapp yarn storybook
+```
+The output should look similar to this:
+
+![Storybook output](../.gitbook/assets/storybook-output.png)
+
+Click on the link http://localhost:3002/ to open the browser to your interactive storybook.
+
+{% endtab %}
+
+{% tab title="Without Docker" %}
+Run the following command: 
+
+```bash
+# in webapp/
+yarn storybook
+```
+
+Open http://localhost:3002/ in your browser
+
+{% endtab %}
+{% endtabs %}
+
 
 # Testing
 

docker-compose.yml

@@ -10,6 +10,7 @@ services:
         - "BUILD_COMMIT=${TRAVIS_COMMIT}"
     ports:
       - 3000:3000
+      - 3002:3002
     networks:
       - hc-network
     depends_on:
@@ -61,7 +62,6 @@ services:
       - 7474:7474
     volumes:
       - neo4j_data:/data
-
 networks:
   hc-network:
 volumes: