chore: release 1.0.0-rc.5.3

.github/workflows/deploy-vue-storefront-cloud.yml

@@ -4,6 +4,7 @@ on:
     branches:
       - main
       - develop
+      - release/*
 
 jobs:
   build:

.github/workflows/draft-release-pr.yml

@@ -0,0 +1,48 @@
+name: "Draft new release"
+
+on:
+  workflow_dispatch:
+    inputs:
+      version:
+        description: 'The version you want to release.'
+        required: true
+
+jobs:
+  draft-new-release:
+    name: "Draft a new release"
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Initialize mandatory git config
+        run: |
+          git config user.name "GitHub actions"
+          git config user.email [email protected]
+
+      - name: Create release branch
+        run: git checkout -b release/${{ github.event.inputs.version }}
+
+      - name: Bump version in package.json
+        run: lerna version "${{ github.event.inputs.version }}" --no-git-tag-version --no-changelog --ignore-changes "*/internals/**" -y
+
+      - name: Commit changelog and manifest files
+        id: make-commit
+        run: |
+          git add .
+          git commit --message "chore: release ${{ github.event.inputs.version }}"
+          echo "::set-output name=commit::$(git rev-parse HEAD)"
+      - name: Push new branch
+        run: git push origin release/${{ github.event.inputs.version }}
+
+      - name: Create pull request
+        uses: thomaseizinger/[email protected]
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          head: release/${{ github.event.inputs.version }}
+          base: main
+          title: "chore: release version ${{ github.event.inputs.version }}"
+          reviewers: ${{ github.actor }}
+          body: |
+            Hey @${{ github.actor }}!
+            Remeber to update this PR with the correct information, before merging it :)

.github/workflows/merge-release.yml

@@ -0,0 +1,49 @@
+name: "Publish new release"
+
+on:
+  pull_request:
+    branches:
+      - main
+    types:
+      - closed
+
+jobs:
+  release:
+    name: Publish new release
+    runs-on: ubuntu-latest
+    if: github.event.pull_request.merged == true
+    steps:
+      - name: Extract version from branch name (for release branches)
+        if: startsWith(github.event.pull_request.head.ref, 'release/')
+        run: |
+          BRANCH_NAME="${{ github.event.pull_request.head.ref }}"
+          VERSION=${BRANCH_NAME#release/}
+          echo "RELEASE_VERSION=$VERSION" >> $GITHUB_ENV
+      - name: Extract version from branch name (for hotfix branches)
+        if: startsWith(github.event.pull_request.head.ref, 'hotfix/')
+        run: |
+          BRANCH_NAME="${{ github.event.pull_request.head.ref }}"
+          VERSION=${BRANCH_NAME#hotfix/}
+          echo "RELEASE_VERSION=$VERSION" >> $GITHUB_ENV
+      - name: Create Release
+        uses: thomaseizinger/[email protected]
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          target_commitish: ${{ github.event.pull_request.merge_commit_sha }}
+          tag_name: ${{ env.RELEASE_VERSION }}
+          name: ${{ env.RELEASE_VERSION }}
+          draft: false
+          prerelease: false
+
+      - name: Merge main into develop branch
+        uses: thomaseizinger/[email protected]
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          head: main
+          base: develop
+          title: Merge main into develop branch
+          body: |
+            This PR merges the main branch back into develop.
+            This happens to ensure that the updates that happend on the release branch, i.e. CHANGELOG and manifest updates are also present on the develop branch.

.github/workflows/test.yml

@@ -23,11 +23,11 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v2
         with:
-          node-version: '16'
+          node-version: '16.13.0'
           cache: 'yarn'
 
       - name: Install dependencies
-        run: yarn install --frozen-lockfile
+        run: yarn install
 
       - name: Build packages
         run: yarn build

.gitignore

@@ -109,6 +109,7 @@ dist
 .yarn/install-state.gz
 .pnp.*
 .vscode/*
+.vscode
 !.vscode/settings.json
 !.vscode/tasks.json
 !.vscode/launch.json

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

docs/.vuepress/config.js

@@ -58,6 +58,7 @@ module.exports = {
           ['/guide/environments', 'Environments'],
           ['/guide/functional-catalog', 'Functional catalog'],
           ['/guide/about', 'About'],
+          ['/guide/roadmap', 'Roadmap'],
         ]
       },
       {
@@ -105,6 +106,7 @@ module.exports = {
       {
         title: 'Reference',
         children: [
+          ['/plugins/', 'Plugins'],
           ['/api-reference/', 'API Reference'],
         ]
       },

docs/guide/configuration.md

@@ -32,9 +32,42 @@ Then on the `config` folder create a file `dev.json` with your configurations.
 {
   "magentoGraphQl": "https://{YOUR_SITE_FRONT_URL}/graphql", // Define Magento GraphQL endpoint
   "enableMagentoExternalCheckout": false, // Flag if VSF will use External Checkout
-  "externalCheckoutUrl": "https://{YOUR_SITE_FRONT_URL}", // External checkout URL 
+  "externalCheckoutUrl": "https://{YOUR_SITE_FRONT_URL}", // External checkout URL
   "externalCheckoutSyncPath": "/vue/cart/sync", // External Checkout synchronization path
   "nuxtAppEnvironment": "development",  // Define nuxt application environment
   "nuxtAppPort": 3000 // Define nuxt port
 }
 ```
+
+## Multistore and localization
+
+Each Magento Store View need to have corresponding locale configuration object in `i18n.locales` array in `nuxt.config.js`.
+
+### Locale configuration object reference
+
+`code` (required) - unique identifier of the locale - corresponding to Magento store view code
+For other properties please follow official [nuxt-i18n docs](https://i18n.nuxtjs.org/options-reference#locales)
+
+### Sample configuration
+
+```json
+locales: [
+  {
+    code: 'default',
+    file: 'en.js',
+    iso: 'en_US',
+  },
+  {
+    code: 'german',
+    file: 'de.js',
+    iso: 'de_DE',
+  },
+],
+  ```
+So for this configuration you need to have two Magento store views with corresponding store codes: `default` and `german`
+
+## Translations
+
+There are two steps to translate whole storefront:
+1. Add translations in Magento for products and categories if necessary
+2. Add translations to files in the `lang` directory

docs/guide/override-queries.md

@@ -4,51 +4,79 @@ To override one or multiple queries without creating a custom composable for eac
 
 ## Examples
 
+### Overriding query
+In this example we will override `products` query by adding `image` field and one `custom_attribute`.
+
+---
+Because queries can be long so it will be best to keep all custom queries in a dedicated directory.
+Inside the theme's root create `customQueries` directory, then copy `productList.ts` file from api-client lib into the created directory. Now you can easily modify the query inside your custom queries catalog. As we wanted to add `image` and `custom_attribute`file after the modification will look like the following example:
+```typescript
+import gql from 'graphql-tag';
+
+export default gql`
+  query productsList($search: String = "", $filter: ProductAttributeFilterInput, $pageSize: Int = 10, $currentPage: Int = 1, $sort: ProductAttributeSortInput) {
+    products(search: $search, filter: $filter, pageSize: $pageSize, currentPage: $currentPage, sort: $sort) {
+      aggregations {
+        attribute_code
+        label
+        options {
+          label
+          value
+          count
+        }
+      }
+      items {
+        ...
+        image {
+          url
+          position
+          disabled
+          label
+        }
+        custom_attribute
+        ...
+      }
+      page_info {
+        current_page
+        page_size
+        total_pages
+      }
+      total_count
+    }
+  }
+`;
+
+```
+
+Once you prepared custom query you must register it so the application will know where it is and how to use it. Inside the theme's `middleware.config.js`, under `integrations.magento` add `customQueries` field. Import your custom query and configure it as in the following example:
+
 ```js
+import customProductsQuery from './customQueries/productList';
+
 const config = require('./config.js');
 const cookieNames = require('./enums/cookieNameEnum');
-import gql from 'graphql-tag';
 
 module.exports = {
   integrations: {
     magento: {
       customQueries: {
-        /**********************
-        ** HERE : use the default query key to override it.
-        ***********************/
-        'products': ({ query, variables, metadata }) => {
-          query = gql`
-            ...
-          `;
-          return { query, variables }
-        }
-      },
-      location: '@vue-storefront/magento-api/server',
-      configuration: {
-        api: config.get('magentoGraphQl'),
-        cookies: {
-          ...cookieNames,
-        },
-        defaultStore: 'default',
-        externalCheckout: {
-          enable: config.get('enableMagentoExternalCheckout'),
-          cmsUrl: config.get('externalCheckoutUrl'),
-          syncUrlPath: config.get('externalCheckoutSyncPath'),
-          stores: {
-            default: config.get('enableMagentoExternalCheckout'),
-          },
-        },
-        facets: {
-          available: ['color', 'size', 'price'],
-        },
-        customApolloHttpLinkOptions: {
-          useGETForQueries: false,
+        /** ********************
+         ** HERE : use the default query key to override it.
+         ********************** */
+        products: ({ query, variables }) => {
+          return { query: customProductsQuery, variables }; // Your custom query
         },
       },
+      ...
     },
   },
 };
 
 
 ```
 
+**Important**
+
+Keep in mind that only attributes present on `ProductInterface` are accessible via GraphQL without any additional modification on the Magento side. To be able to get any custom attributes you must extend GraphQL schema in the Magento2. Follow [Magento 2 documentation](https://devdocs.magento.com/guides/v2.4/graphql/develop/extend-existing-schema.html) to achieve that.
+
+

docs/guide/roadmap.md

@@ -0,0 +1,33 @@
+# Roadmap
+
+The current goal is to release a stable 1.0.0 version by the end of February. Details below.
+
+## January 2022
+
+- finish multi-store functionality
+- performance improvements
+  - analysis
+  - improve the speed of communication with Magento
+    - Redis Caching
+    - CDNs
+- Design QA & improvements
+
+## February 2022
+
+- performance improvements
+  - meet web core vitals or at least 80 score
+- Unit & integration tests for crucial functionalities
+- quality assurance
+- user acceptance tests
+- load tests
+
+### Milestone: Release stable 1.0.0 version by the end of February
+
+## March 2022
+
+- Accessibility tests & improvements
+- extensibility
+  - improve docs
+  - add the possibility to add plugins
+  - add the possibility to install external extensions
+  - theming

docs/plugins/index.md

@@ -0,0 +1,28 @@
+# Plugins
+
+Here you can find documentation for global Middlewares
+
+## i18n
+
+i18n plugin is responsible for handling store changes after URL changes.
+
+It checks if locale in i18n module is changes and update `vsf-store` and `vsf-locale` cookie to match new store on both
+client and server side.
+
+### Flow
+1. Start: load middleware
+2. Read current Magento Store Code from vsf-store cookie
+3. Is store code found?
+   2. No: Set default locale if isn't already set
+      1. End
+4. Yes: Check if current store code has corresponding locale in Nuxt.config.js
+   1. No: Set default locale if isn't already set
+      1. End
+5. Yes: If  corresponded locale is different than current locale
+   1. No: End
+6. Yes: set new locale
+7. Go forward (load  the page with correct locale and date)
+8. End
+
+
+![i18n flow](./i18n-plugin-diagram.png)