Merge pull request #769 from reactioncommerce/akarshit-semantic-release

fix: enable semantic releae

Author: Akarshit

.circleci/config.yml

@@ -31,7 +31,7 @@ jobs:
             - reaction-v3-node-modules-{{ checksum "package.json" }}-{{ checksum "yarn.lock" }}
             - reaction-v3-node-modules-{{ .Branch }}
       - run:
-          name: Install NPM dependencies
+          name: Install yarn dependencies
           command: yarn install --production=false --frozen-lockfile --non-interactive
       - save_cache:
           key: reaction-v3-node-modules-{{ checksum "package.json" }}-{{ checksum "yarn.lock" }}
@@ -77,6 +77,18 @@ jobs:
           name: Run Unit Tests
           command: yarn run test:ci
 
+  release:
+    <<: *defaults
+    steps:
+      - checkout
+      - restore_cache:
+          keys:
+            - reaction-v3-node-modules-{{ checksum "package.json" }}-{{ checksum "yarn.lock" }}
+            - reaction-v3-node-modules-{{ .Branch }}
+      - run:
+          name: Push the latest version to npm
+          command: yarn run semantic-release --dry-run
+
   docker-build-push:
     <<: *defaults
     steps:
@@ -86,7 +98,11 @@ jobs:
           version: 19.03.13
       - run:
           name: Build and push production Docker image
-          command: ${CI_SCRIPTS} docker-build-tag-push . ${DOCKER_REPOSITORY}
+          command: |
+            VERSION=$(git describe --tags `git rev-list --tags --max-count=1` | cut -c2-100)
+            docker build -t ${DOCKER_REPOSITORY}:${VERSION} .
+            docker login -u ${DOCKER_USER} -p ${DOCKER_PASS}
+            docker push ${DOCKER_REPOSITORY}:${VERSION}
       - webhook/notify:
           endpoint: "${GITOPS_PR_WEBHOOK}"
 
@@ -111,9 +127,17 @@ workflows:
       - test-unit:
           requires:
             - install-dependencies
-      - docker-build-push:
-          context: reaction-publish-docker
+      - release:
+          context: reaction-publish-semantic-release
+          filters:
+            branches:
+              only:
+                - trunk
           requires:
             - dockerfile-lint
             - eslint
             - test-unit
+      - docker-build-push:
+          context: reaction-publish-docker
+          requires:
+            - release

.github/pull_request_template.md

@@ -3,24 +3,27 @@ Impact: **breaking|critical|major|minor**
 Type: **feature|bugfix|performance|test|style|refactor|docs|chore**
 
 ## Issue
+
 Description of the issue this PR is solving, why it's happening, and how to reproduce it. This may differ from the original ticket as you now have more information at your disposal.
 
 ## Solution
+
 Summarize your solution to the problem. Please include short descriptions of any solutions you tested before arriving at your final solution. This will help reviewers know why you decided to solve this problem in this particular way and will speed up the review process.
 
 If you're solving a UIX related issue, please attach screen-caps or gifs showing how your solution differs from the issue.
 
 ## Breaking changes
+
 If you have a breaking changes, list them here, otherwise list none.
 
 Examples of breaking changes include changing file names, moving files, deleting files, renaming functions or exports, or changes to code which might cause previous versions of Reaction or third-party code not to work as expected.
 
 Note any work that you did to mitigate the effect of any breaking changes such as creating migrations, deprecation warnings, etc.
 
-
 ## Testing
+
 1. List the steps needed for testing your change in this section.
 2. Assume that testers already know how to start the app, and do the basic setup tasks.
 3. Be detailed enough that someone can work through it without being too granular
 
-More detail for what each of these sections should include are available in our [Contributing Docs](https://docs.reactioncommerce.com/reaction-docs/trunk/contributing-to-reaction)
+More detail for what each of these sections should include are available in our [Contributing Docs](https://docs.reactioncommerce.com/reaction-docs/trunk/contributing-to-reaction). This project uses [semantic-release](https://semantic-release.gitbook.io/semantic-release/), please use their [commit message format.](https://semantic-release.gitbook.io/semantic-release/#commit-message-format).

README.md

@@ -5,6 +5,7 @@
 This Example Storefront is to serve as a reference on how to implement a web based storefront using the Reaction Commerce GraphQL API. You can fork this project as a jumping off point or create your own custom experience using your prefered client-side technology. While we believe our example storefront is full featured enough to use in production, it may be missing features your shop requires at this time.
 
 ## Features
+
 Reaction comes with a robust set of core commerce capabilities right out of the box. And since anything in our codebase can be extended, overwritten, or installed as a package, you may also customize anything on our platform.
 
 Check out the full list of Reaction [features](https://www.reactioncommerce.com/features) and [release history](https://reactioncommerce.com/roadmap) for more info.
@@ -25,7 +26,7 @@ This example storefront is built with [Next.js](https://nextjs.org/), [React](ht
 Follow the [Reaction Platform docs](https://docs.reactioncommerce.com/docs/installation-reaction-platform) to install and run all the services necessary to run the storefront:
 
 | Directory: Service                                                                            | URL                                              |
-|-----------------------------------------------------------------------------------------------|--------------------------------------------------|
+| --------------------------------------------------------------------------------------------- | ------------------------------------------------ |
 | [`reaction`](https://github.com/reactioncommerce/reaction): GraphQL API                       | [localhost:3000/graphql](localhost:3000/graphql) |
 | [`reaction`](https://github.com/reactioncommerce/reaction): GraphQL Playground developer tool | [localhost:3000/graphql](localhost:3000/graphql) |
 | [`reaction`](https://github.com/reactioncommerce/reaction): Reaction Admin                    | [localhost:4080](localhost:4080)                 |
@@ -51,32 +52,37 @@ When running the storefront and Reaction for the first time, you will need to co
 Read the docs for [setting up Segment or a custom analytics tracker](docs/tracking-events.md)
 
 ## Documentation
+
 - [Example Storefront full documentation](./docs)
 - [Example Storefront Component Library repository](https://github.com/reactioncommerce/reaction-component-library), [documentation](https://github.com/reactioncommerce/reaction-component-library/tree/master/docs), and [component documentation](http://designsystem.reactioncommerce.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: Developing with Docker](https://docs.reactioncommerce.com/docs/installation-docker-development
-)
+- [Reaction Docs: Developing with Docker](https://docs.reactioncommerce.com/docs/installation-docker-development)
 
 ## Development
 
 The Reaction Platform runs the storefront 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 storefront, make sure to change directories into the `example-storefront` directory within the `reaction-platform` repository:
+
 ```sh
 cd example-storefront
 ```
 
 ### Build and run in development mode with logs
+
 Create a symbolic link to use the development Docker image:
+
 ```
 ln -s docker-compose.dev.yml docker-compose.override.yml
 ```
 
 If running for the first time or environment variables in `.env.example` have changed execute the command below to update environment variables.
+
 ```
 ./bin/setup
 ```
 
 Start the storefront by executing:
+
 ```sh
 docker-compose up -d && docker-compose logs -f
 ```
@@ -94,26 +100,31 @@ docker-compose run --rm --service-ports web yarn start
 ```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. See Yarn section below for more examples.
 
 ### Run tests in container
 
 Run tests locally
+
 ```sh
 docker-compose run --rm web yarn test
 ```
 
 Run tests locally without cache (this can be helpful if changes aren't showing up)
+
 ```sh
 docker-compose run --rm web yarn test --no-cache
 ```
 
 To run Snyk security tests (this will run tests in the same way as CI)
+
 ```sh
 docker-compose run --rm web sh -c "cp package.json ../ && cp .snyk ../ && cd .. && snyk auth && snyk test"
 ```
 
 To run ESLint
+
 ```sh
 docker-compose run --rm web eslint src
 ```
@@ -129,13 +140,15 @@ You can use the Google Chrome DevTools to debug the code running in the Node.js
 
 Yarn & NPM should run inside the Docker container. We've taken steps to ensure that the node_modules are placed into a cacheable location. If you run Yarn locally, the node_modules are written directly to the project directory and take precedence over those from the Docker build.
 **Yarn Add**
+
 ```
 docker-compose run --rm web yarn add --dev [package]
 ```
 
 **Yarn Install**
 
 ⚠️ Always rebuild the image and start a new container after modifying yarn.lock or Dockerfile!
+
 ```
 docker-compose run --rm web yarn install
 docker-compose down --rmi local
@@ -155,25 +168,29 @@ Sometimes we need to test the [Example Storefront Component Library](https://git
 1. Inside your `.env` file, change `INTERNAL_GRAPHQL_URL` to equal `http://localhost:3000/graphql`, the same as the `EXTERNAL_GRAPHQL_URL`
 1. Start the storefront locally by running the command `export $(cat .env | xargs) && yarn dev`
 1. Your storefront should now be running at `localhost:4000`
-    - If you see errors about not being able to find peer dependency packages, that seems to be an issues with yarn linking. You can just temporarily `yarn add` each of those packages in the component library `package/dist` folder. (This folder is gitignored anyway.)
+   - If you see errors about not being able to find peer dependency packages, that seems to be an issues with yarn linking. You can just temporarily `yarn add` each of those packages in the component library `package/dist` folder. (This folder is gitignored anyway.)
 1. After your changes are tested, shut down the storefront by running the command `CTRL+C`
 1. Run `yarn unlink "@reactioncommerce/components"` in the storefront repo folder
 1. `cd` to the `package/dist` folder of the `reaction-component-library` repo. Run the command `yarn unlink` to unlink the local version of the component library
 1. Undo the renaming of your `.yarnrc` file
 1. Undo the URL change inside your `.env` file
 
 ## Clean up 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
 ```
@@ -187,6 +204,7 @@ Run this command to build a Docker image with the production build of the app in
 ```sh
 docker build --network=host -t  reactioncommerce/example-storefront:X.X.X .
 ```
+
 Where X.X.X indicates the tag version you want to use, i.e. `3.1.0`
 
 Then, to start the app on your machine, make sure the Reaction API container is already running and enter:
@@ -207,35 +225,44 @@ docker stop reaction-storefront
 
 ## Contribute
 
-Find a bug, a typo, or something that’s not documented well? We’d love for you to [open an issue](https://github.com/reactioncommerce/example-storefront/issues) telling us what we can improve!
+Find a bug, a typo, or something that’s not documented well? We’d love for you to [open an issue](https://github.com/reactioncommerce/example-storefront/issues) telling us what we can improve! This project uses [semantic-release](https://semantic-release.gitbook.io/semantic-release/), please use their [commit message format.](https://semantic-release.gitbook.io/semantic-release/#commit-message-format).
 
 Want to request a feature? Use our [Reaction Feature Requests repository](https://github.com/reactioncommerce/reaction-feature-requests) to file a request.
 
 We love your pull requests! Check our our [`Good First Issue`](https://github.com/reactioncommerce/example-storefront/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22) and [`Help Wanted`](https://github.com/reactioncommerce/example-storefront/issues?q=label%3A%22help+wanted%22) tags for good issues to tackle.
 
 ### Pull Request guidelines
+
 Pull requests should pass all automated tests, style, and security checks.
 
 #### Automated Tests
+
 Your code should pass all [acceptance tests and unit tests](https://docs.reactioncommerce.com/reaction-docs/trunk/testing-reaction). Run
+
 ```sh
 docker-compose run --rm web yarn test
 ```
+
 to run the test suites locally. If you're adding functionality to Reaction, you should add tests for the added functionality. You can run the tests locally without cache if necessary by passing the `--no-cache` flag. This can be helpful if changes aren't showing up.
+
 ```sh
 docker-compose run --rm web yarn test --no-cache
 ```
 
 To update a failing snapshot (if you've made changes to a component)
+
 ```sh
 docker-compose run --rm web yarn test -u
 ```
 
 #### Eslint
+
 We require that all code contributed to Reaction follows [Reaction's ESLint rules](https://github.com/reactioncommerce/reaction-eslint-config). You can run
+
 ```
 docker-compose run --rm web eslint src
 ```
+
 to run ESLint against your code locally.
 
 Please follow the [Reaction Code Style Guide](https://docs.reactioncommerce.com/docs/styleguide). Check out our guides to [JSDoc](https://docs.reactioncommerce.com/docs/jsdoc-style-guide), [Git](https://docs.reactioncommerce.com/docs/git-style-guide), [error handling](https://docs.reactioncommerce.com/docs/error-handling-guide), [logging](https://docs.reactioncommerce.com/docs/logging), and [React](https://docs.reactioncommerce.com/docs/react-best-practices).
@@ -245,7 +272,9 @@ We also request that you follow the our [pull request template](https://docs.rea
 Get more details in our [Contributing Guide](https://docs.reactioncommerce.com/docs/contributing-to-reaction).
 
 ### Developer Certificate of Origin
+
 We use the [Developer Certificate of Origin (DCO)](https://developercertificate.org/) in lieu of a Contributor License Agreement for all contributions to Reaction Commerce open source projects. We request that contributors agree to the terms of the DCO and indicate that agreement by signing all commits made to Reaction Commerce projects by adding a line with your name and email address to every Git commit message contributed:
+
 ```
 Signed-off-by: Jane Doe <[email protected]>
 ```
@@ -258,20 +287,20 @@ We use the [Probot DCO GitHub app](https://github.com/apps/dco) to check for DCO
 
 If you forget to sign your commits, the DCO bot will remind you and give you detailed instructions for how to amend your commits to add a signature.
 
-
 ## License
-   Copyright 2019 Reaction Commerce
 
-   Licensed under the Apache License, Version 2.0 (the "License");
-   you may not use this file except in compliance with the License.
-   You may obtain a copy of the License at
+Copyright 2019 Reaction Commerce
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
 
        http://www.apache.org/licenses/LICENSE-2.0
 
-   Unless required by applicable law or agreed to in writing, software
-   distributed under the License is distributed on an "AS IS" BASIS,
-   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-   See the License for the specific language governing permissions and
-   limitations under the License.
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
 
 [![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Freactioncommerce%2Fexample-storefront.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2Freactioncommerce%2Fexample-storefront?ref=badge_large)

hocs/inject.js

@@ -19,7 +19,7 @@ const withInjectedStores = (injections) => (PageComponent) => {
     );
   };
 
-    // Set the correct displayName in development
+  // Set the correct displayName in development
   if (process.env.NODE_ENV !== "production") {
     const displayName = PageComponent.displayName || PageComponent.name || "Component";
     WithInjectedStores.displayName = `withInjectedStores(${displayName})`;

hocs/withTranslation.js

@@ -9,7 +9,7 @@ const withTranslation = (namespace) => (PageComponent) => {
     );
   };
 
-    // Set the correct displayName in development
+  // Set the correct displayName in development
   if (process.env.NODE_ENV !== "production") {
     const displayName = PageComponent.displayName || PageComponent.name || "Component";
     WithInjectedStores.displayName = `withInjectedStores(${displayName})`;