Merge pull request #313 from reactioncommerce/295-machikoyasuda-readme

docs(295): update readme w/ Stripe, Segment docs, Production network name

Author: willopez

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,37 @@
+---
+name: Bug report
+about: Create a report to help us improve
+
+---
+
+Type: **breaking|critical|major|minor**
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,14 @@
+---
+name: Feature request
+about: Suggest a new feature for this project
+
+---
+
+# Feature Name
+
+### Summary description
+
+### Rationale for why this feature is necessary
+
+### Expected use cases
+

CODE_OF_CONDUCT.md

@@ -0,0 +1,38 @@
+# Reaction Commerce Code of Conduct
+
+All Community Guidelines content is licensed under a [Creative Commons Attribution](https://creativecommons.org/licenses/by/3.0/) license.
+
+Like the technical community as a whole, the Reaction team and community is made up of a mixture of professionals and volunteers from all over the world, working on every aspect of the mission - including mentorship, teaching, and connecting people.
+
+Diversity is one of our huge strengths, but it can also lead to communication issues and unhappiness. To that end, we have a few ground rules that we ask people to adhere to. This code applies equally to founders, mentors, and those seeking help and guidance.
+
+This isn’t an exhaustive list of things that you can’t do. Rather, take it in the spirit in which it’s intended - a guide to make it easier to enrich all of us and the broader communities in which we participate.
+
+This code of conduct applies to all spaces managed by Reaction Commerce. This includes our [development chat room](https://gitter.im/reactioncommerce/reaction), [forums](https://forums.reactioncommerce.com), [blog](https://blog.reactioncommerce.com), mailing lists, [issue tracker](https://github.com/reactioncommerce/reaction/issues), [project boards](https://github.com/reactioncommerce/reaction/projects), Reaction events and meetups, and any other forums or service created by the core project team which the community uses for communication. In addition, violations of this code outside these spaces may affect a person's ability to participate within them.
+
+If you believe someone is violating the code of conduct, we ask that you report it by emailing <mailto:[email protected]>. For more details, please see our [Reporting Guidelines](https://docs.reactioncommerce.com/reaction-docs/master/reporting-guide).
+
+-   **Be friendly and patient.**
+
+-   **Be welcoming.** We strive to be a community that welcomes and supports people of all backgrounds and identities. This includes, but is not limited to members of any race, ethnicity, culture, national origin, color, immigration status, social and economic class, educational level, sex, sexual orientation, gender identity and expression, age, size, family status, political belief, religion, and mental and physical ability.
+
+-   **Be considerate.** Your work will be used by other people, and you in turn will depend on the work of others. Any decision you take will affect users and colleagues, and you should take those consequences into account when making decisions. Remember that we're a world-wide community, so you might not be communicating in someone else's primary language.
+
+-   **Be respectful.** Not all of us will agree all the time, but disagreement is no excuse for poor behavior and poor manners. We might all experience some frustration now and then, but we cannot allow that frustration to turn into a personal attack. It’s important to remember that a community where people feel uncomfortable or threatened is not a productive one. Members of the Reaction community should be respectful when dealing with other members as well as with people outside the Reaction community.
+
+-   **Be careful in the words that you choose.** We are a community of professionals, and we conduct ourselves professionally. Be kind to others. Do not insult or put down other participants. Harassment and other exclusionary behavior aren't acceptable. This includes, but is not limited to:
+
+    -   Violent threats or language directed against another person.
+    -   Discriminatory jokes and language.
+    -   Posting sexually explicit or violent material.
+    -   Posting (or threatening to post) other people's personally identifying information ("doxing").
+    -   Personal insults, especially those using racist or sexist terms.
+    -   Unwelcome sexual attention.
+    -   Advocating for, or encouraging, any of the above behavior.
+    -   Repeated harassment of others. In general, if someone asks you to stop, then stop.
+
+-   **When we disagree, try to understand why.** Disagreements, both social and technical, happen all the time and Reaction is no exception. It is important that we resolve disagreements and differing views constructively. Remember that we’re different. The strength of Reaction comes from its varied community, people from a wide range of backgrounds. Different people have different perspectives on issues. Being unable to understand why someone holds a viewpoint doesn’t mean that they’re wrong. Don’t forget that it is human to err and blaming each other doesn’t get us anywhere. Instead, focus on helping to resolve issues and learning from mistakes.
+
+## Questions?
+
+If you have questions, please see the [FAQs](https://docs.reactioncommerce.com/reaction-docs/master/guideline-faqs). If that doesn't answer your questions, feel free to [contact us](mailto:[email protected]).

CONTRIBUTING.md

@@ -0,0 +1,6 @@
+# Contributing
+
+At Reaction Commerce, we're dedicated to the open source community. In fact, we've designed our entire platform and business to grow from the passion and creativity that an open source community ignites. We've already attracted a small, dedicated team of open source contributors, and there's always room for more. 
+
+If you'd like to join us, check out our detailed [Contributing Guide](https://docs.reactioncommerce.com/reaction-docs/master/contributing-to-reaction).
+

README.md

@@ -1,76 +1,89 @@
 # Reaction Storefront Next.js Starter Kit
 [![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Freactioncommerce%2Freaction-next-starterkit.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Freactioncommerce%2Freaction-next-starterkit?ref=badge_shield)
 
-
 _**Note:** This project is a work in progress and should not be used in production at this time._
 
-Reference Storefront application for [Reaction Commerce](https://reactioncommerce.com/).
+Reference headless ecommerce storefront for [Reaction Commerce](https://reactioncommerce.com/) v 2.0.0.
+
+## Features
+
+- Headless ecommerce starter kit built with [Next.js](https://nextjs.org/), [React](https://reactjs.org/), [MobX](https://mobx.js.org/getting-started.html), [GraphQL](https://graphql.org/), [Apollo Client](https://www.apollographql.com/docs/react/)
+- [Reaction GraphQL API](https://github.com/reactioncommerce/reaction/tree/master/imports/plugins/core/graphql) integration
+- Server-side rendering
+- Payments with [Stripe](https://stripe.com/)
+- Analytics with [Segment](https://segment.com/)
+- Reusable, customizable, themeable ecommerce React components from the new [Reaction Component Library](https://github.com/reactioncommerce/reaction-component-library/) with [Styled Components](https://www.styled-components.com/)
+- Fully-configured test suite: Jest snapshot testing, Mocha integration testing
+- Written in ES6, configured with ES6
+- Containerized with Docker
 
 ## Getting Started
-_Follow steps as necessary. If you already have Reaction installed, you may be able to skip some of these steps._
 
-0. Prerequesites
+1. Requirements:
+
 - Install [Docker](https://docs.docker.com/install/) and [Docker Compose](https://docs.docker.com/compose/install/). Docker Compose is included when installing Docker on Mac and Windows, but will need to be installed separately on Linux.
+- Install [Node.js](https://nodejs.org/en/)
+- Install [Reaction Platform](https://github.com/reactioncommerce/reaction-platform)
+- Make sure you are not running any applications on ports `3000` and `4000`.
 
-1. Clone the main [Reaction repo](https://github.com/reactioncommerce/reaction) and checkout the `release-1.15.0` branch
-    ```sh
-    git clone [email protected]:reactioncommerce/reaction.git
-    cd reaction
-    git checkout release-1.15.0
+1. Follow the instructions at [Reaction Platform](https://github.com/reactioncommerce/reaction-platform) to run Reaction, Reaction Hydra and the starterkit with Reaction Platform.
 
-    # change directory to the parent of your reaction install
-    cd ..
-    ```
+After the initial bootstrapping, you can use `make start` to start all the necessary containers:
 
-2. Clone this repo
-    ```sh
-    git clone [email protected]:reactioncommerce/reaction-next-starterkit.git
-    ```
+```sh
+make start
+```
+
+1. Once the `make` process finishes, the Reaction Platform services will be accessible at the following URLs:
 
-3. Create a local docker network
+| Application  | URL                     |
+| ------------ | ----------------------- |
+| `starterkit` | localhost:4000          |
+| GraphQL API  | localhost:3000/graphiql |
+| `reaction`   | localhost:3000          |
 
-    You'll need to create a docker network for the GraphQL service and the Reaction Storefront to communicate
-    ```
-    docker network create api.reaction.localhost
-    ```
-    You can run `docker network ls` to verify the network has been created.
+Visit the storefront at `localhost:4000` and the GraphQL API playground at `localhost:3000/graphiql`.
 
-4. Start Reaction's GraphQL server
-    From your `reaction` directory run
-    ```
-    docker-compose up -d --build
-    ```
-    You'll need to run the full app at least once in order for step 5 to work. After this initial run, if you don't want to start the Reaction Meteor app, you can just run `docker-compose up -d devserver`
+1. To view the logs for the Starterkit, run: `docker-compose logs -f`
 
-5. Generate a Meteor login token
+## Configuration
 
-    _This process will be eliminated once we've built out the GraphQL API for authentication_
-    - Visit the Reaction Meteor shop [localhost:3000](http://localhost:3000)
-    - Open devtools and copy the Meteor.loginToken from `localStorage`.
+### Set up Stripe
 
-6. Setup the Storefront environment
+When running the storefront and Reaction for the first time, you will need to configure Stripe payment processing and shipping options to test a complete order checkout flow. After signing up for a Stripe API key, follow these steps:
 
-    Navigate to the `reaction-next-starterkit` directory and create a `.env` file.
-    ```sh
-    cp .env.example .env
-    ```
-7. Start the storefront application in development mode using Docker Compose
-    ```
-    docker-compose up -d --build
-    ```
+1. Add public Stripe API key (`STRIPE_PUBLIC_API_KEY`) to `.env`.
+2. Open the Reaction Classic app, at `http://localhost:3000`. Log in as an Admin user.
+3. Open **Payments**: Enable Stripe by checking the box. Add a Stripe secret key and public key.
+4. Open **Shipping**: Enable flat-rate shipping by checking the box. Enable at least one type of flat-rate shipping by clicking on the option in the table and checking the box.
 
-8. Visit the storefront on `localhost:4000`
+### Set up Analytics event tracking
 
+Read the docs for [setting up Segment or a custom analytics tracker](docs/tracking-events.md)
+
+## Documentation
+- [Starter Kit full documentation](./docs) 
+- [Reaction Component Library repository](https://github.com/reactioncommerce/reaction-component-library), [documentation](https://github.com/reactioncommerce/reaction-component-library/tree/master/docs), and [component documentation](https://stoic-hodgkin-c0179e.netlify.com/)
+- [Reaction Docs: Using GraphQL](https://docs.reactioncommerce.com/docs/graphql-using)
+- [Reaction Docs: Testing with Jest](https://docs.reactioncommerce.com/docs/testing-reaction)
+- [Reaction Docs: Develping with Docker](https://docs.reactioncommerce.com/docs/installation-docker-development
+)
 
 ## Development
 
-### Build and run in development mode with logs
+The Reaction Platform runs the Starterkit with Docker, so you will have to use Docker commands to view logs, run commands inside the container and more. To run commands specifically for the Starterkit, make sure to change directories into the `reaction-next-starterkit` directory within the `reaction-platform` repository:
+
+```sh
+cd reaction-next-starterkit
 ```
+
+### Build and run in development mode with logs
+```sh
 docker-compose up -d && docker-compose logs -f
 ```
 
 ### Running Commands inside the container
-```
+```sh
 docker-compose run --rm web [command]
 ```
 Run any command inside a Docker container and then remove the container. Use this to run any tooling operations. Remember your project directory will be mounted and things will usually just work.
@@ -140,56 +153,45 @@ Sometimes we need to test [`reaction-component-library`](https://github.com/reac
 
 ## Cleanup Containers
 Stop, and retain containers:
-```
+```sh
 docker-compose stop
 ```
 
 Stop, and remove containers:
-```
+```sh
 docker-compose down
 ```
 
 Stop, and remove containers, volumes and built images:
-```
+```sh
 docker-compose down -v --rmi local
 ```
 
-## Production
-Running the command below will build the starterkit for production.
+## Building and running the production app locally
 
-```
+Sometimes it is helpful during development to make a production build of the app and run that locally.
+
+Run this command to build a Docker image with the production build of the app in it:
+
+```sh
 docker build -t reaction-storefront --build-arg BUILD_ENV=production .
 ```
 
-To start the app in production mode execute:
+Then, to start the app on your machine, make sure the Reaction API container is already running and enter:
 
-```
+```sh
 docker run -d --name storefront -p ${port}:4000 --env-file .env --network api.reaction.localhost reaction-storefront
 ```
 
-To stop the docker container after starting it with the above command
-```
-docker stop storefront
-```
-
-_**NOTE:** Replace the `${port}` with the localhost port you'd like the application to run at. I'm partial to 4040_
-_**NOTE:** The above command is assuming ether the `devserver` or `reaction` is also running._
-
-## Documentation
-See our [full documentation](./docs)
+_**NOTE:** Replace the `${port}` with the localhost port you'd like the application to run at._
 
-## Features
- - [Docker](https://docs.docker.com)
- - [React](https://reactjs.org/)
- - [Apollo](https://www.apollographql.com/docs/react/)
- - [MobX](https://mobx.js.org/getting-started.html)
- - [nextjs](https://github.com/zeit/next.js/)
- - [Material UI](https://material-ui.com/)
+_**NOTE:** This is not the way to run the app in actual production deployment. This is only for running the production build locally for development, demo or trial purposes._
 
- ## Reference links for development
- ### CSS in JS
- - [Responsive Breakpoints](https://material-ui.com/layout/css-in-js/#responsive-breakpoints)
+To stop the Docker container after starting it with the above command, use:
 
+```sh
+docker stop storefront
+```
 
 ## License
 [![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Freactioncommerce%2Freaction-next-starterkit.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2Freactioncommerce%2Freaction-next-starterkit?ref=badge_large)