From 1ea15a327092545872b0fb3e0e1cd0edf2b26444 Mon Sep 17 00:00:00 2001 From: Heitor Ramon Ribeiro Date: Mon, 3 Jan 2022 03:43:11 -0300 Subject: [PATCH 01/88] chore: add gitflow actions (#379) * chore: added base gitflow actions * chore: added base gitflow actions * chore: fixed versioning process --- .github/workflows/draft-release-pr.yml | 48 ++++++++++++++++++ .github/workflows/merge-release.yml | 49 +++++++++++++++++++ .../{publish.yml => publish-npm.yml} | 0 lerna.json | 3 +- 4 files changed, 99 insertions(+), 1 deletion(-) create mode 100644 .github/workflows/draft-release-pr.yml create mode 100644 .github/workflows/merge-release.yml rename .github/workflows/{publish.yml => publish-npm.yml} (100%) diff --git a/.github/workflows/draft-release-pr.yml b/.github/workflows/draft-release-pr.yml new file mode 100644 index 000000000..238db9d58 --- /dev/null +++ b/.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 noreply@github.com + + - 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/create-pull-request@1.0.0 + 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 :) diff --git a/.github/workflows/merge-release.yml b/.github/workflows/merge-release.yml new file mode 100644 index 000000000..572bf2d0d --- /dev/null +++ b/.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/create-release@1.0.0 + 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/create-pull-request@1.0.0 + 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. diff --git a/.github/workflows/publish.yml b/.github/workflows/publish-npm.yml similarity index 100% rename from .github/workflows/publish.yml rename to .github/workflows/publish-npm.yml diff --git a/lerna.json b/lerna.json index deb185c20..6bd7d296a 100644 --- a/lerna.json +++ b/lerna.json @@ -1,5 +1,6 @@ { "useWorkspaces": true, "npmClient": "yarn", - "version": "independent" + "version": "independent", + "ignoreChanges": ["internals/**"] } From 2ea26d481537f591781f628cc59767ff8118e3cc Mon Sep 17 00:00:00 2001 From: Marcin Kwiatkowski Date: Mon, 3 Jan 2022 15:13:32 +0100 Subject: [PATCH 02/88] docs: added roadmap to the docs (#380) closes #323 --- docs/.vuepress/config.js | 1 + docs/guide/roadmap.md | 33 +++++++++++++++++++++++++++++++++ 2 files changed, 34 insertions(+) create mode 100644 docs/guide/roadmap.md diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 3e4911718..105e1f6ac 100755 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -58,6 +58,7 @@ module.exports = { ['/guide/environments', 'Environments'], ['/guide/functional-catalog', 'Functional catalog'], ['/guide/about', 'About'], + ['/guide/roadmap', 'Roadmap'], ] }, { diff --git a/docs/guide/roadmap.md b/docs/guide/roadmap.md new file mode 100644 index 000000000..d8d0abb94 --- /dev/null +++ b/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 From 352b658bbef65b1f40eddea3b9c306743d8bfd75 Mon Sep 17 00:00:00 2001 From: Bartosz Herba Date: Mon, 10 Jan 2022 07:42:10 +0100 Subject: [PATCH 03/88] fix(theme): refactor and fix store switcher (#383) - update nuxt.config.js to handle de translation - fix issue with flag icon #362 - refactor store switcher component - add store name next to the language icon flag - add translation info in docs Co-authored-by: Bartosz Herba --- docs/guide/configuration.md | 25 +++++ .../src/composables/useConfig/index.ts | 2 +- .../src/composables/useStore/index.ts | 4 +- .../src/getters/storeConfigGetters.ts | 3 +- packages/composables/src/helpers/isoToCode.ts | 1 + packages/theme/components/AppHeader.vue | 6 +- .../{LocaleSelector.vue => StoreSwitcher.vue} | 94 ++++++------------ packages/theme/components/TopBar.vue | 6 +- .../composables/useMagentoConfiguration.ts | 1 + packages/theme/lang/de.js | 3 + packages/theme/nuxt.config.js | 24 ++--- .../icons/langs/{de-DE.webp => de.webp} | Bin .../icons/langs/{en-US.webp => en.webp} | Bin .../icons/langs/{nl-NL.webp => nl.webp} | Bin 14 files changed, 83 insertions(+), 86 deletions(-) create mode 100644 packages/composables/src/helpers/isoToCode.ts rename packages/theme/components/{LocaleSelector.vue => StoreSwitcher.vue} (68%) create mode 100644 packages/theme/lang/de.js rename packages/theme/static/icons/langs/{de-DE.webp => de.webp} (100%) rename packages/theme/static/icons/langs/{en-US.webp => en.webp} (100%) rename packages/theme/static/icons/langs/{nl-NL.webp => nl.webp} (100%) diff --git a/docs/guide/configuration.md b/docs/guide/configuration.md index 75b81c9e7..2e9a24427 100644 --- a/docs/guide/configuration.md +++ b/docs/guide/configuration.md @@ -38,3 +38,28 @@ Then on the `config` folder create a file `dev.json` with your configurations. "nuxtAppPort": 3000 // Define nuxt port } ``` + +## Languages (i18n) + +To properly translate theme content with the usage of i18n library you must add configuration in `nuxt.config.js`. Here is the sample configuration for an English translation. VSF also provides default configuration OOTB which can be overridden if necessary. + +By default VSF will map all locales ISO Codes into a locale code, eg. `en_US` will be mapped into `en` code therefore, to properly link the dictionary to Magento 2 store-view, you must set the locale `code` field to be exactly the same as ISO 639-1 alpha-2 code prefix. Mapping is handled by composable `isoToCode.js` helper function which is the extension point for implementing different strategies. + + +```json +i18n: { + ... + locales: [ + { + code: 'en', // This must match _US from the iso code + label: 'English', + file: 'en.js', // Points to a file in langDir directory + iso: 'en_US', + } + ], + defaultLocale: 'en', + langDir: 'lang/', + }, + ... + }, + ``` \ No newline at end of file diff --git a/packages/composables/src/composables/useConfig/index.ts b/packages/composables/src/composables/useConfig/index.ts index f1fc5c57e..9f2fe39b1 100644 --- a/packages/composables/src/composables/useConfig/index.ts +++ b/packages/composables/src/composables/useConfig/index.ts @@ -4,7 +4,7 @@ import { useConfigFactory, UseConfigFactoryParams } from '../../factories/useCon import { UseConfig } from '../../types/composables'; const factoryParams: UseConfigFactoryParams = { - loadConfig: async (context: Context, params) => { + loadConfig: async (context: Context) => { const { data } = await context.$magento.api.storeConfig(); return data.storeConfig || {}; diff --git a/packages/composables/src/composables/useStore/index.ts b/packages/composables/src/composables/useStore/index.ts index 5722400cd..845a75571 100644 --- a/packages/composables/src/composables/useStore/index.ts +++ b/packages/composables/src/composables/useStore/index.ts @@ -11,7 +11,7 @@ const factoryParams: UseStoreFactoryParams = { cart: useCart(), }; }, - load: async (context: Context, params): Promise => { + load: async (context: Context): Promise => { const { data } = await context.$magento.api.availableStores(); return data.availableStores || []; @@ -21,7 +21,7 @@ const factoryParams: UseStoreFactoryParams = { change: (context: Context, store) => { context.$magento.config.state.setStore(StoreConfigGetters.getCode(store)); context.$magento.config.state.setCurrency(StoreConfigGetters.getCurrency(store)); - context.$magento.config.state.setLocale(StoreConfigGetters.getCurrency(store)); + context.$magento.config.state.setLocale(StoreConfigGetters.getLocale(store)); context.cart.clear(); }, diff --git a/packages/composables/src/getters/storeConfigGetters.ts b/packages/composables/src/getters/storeConfigGetters.ts index e56db255c..31742df78 100644 --- a/packages/composables/src/getters/storeConfigGetters.ts +++ b/packages/composables/src/getters/storeConfigGetters.ts @@ -1,10 +1,11 @@ import { StoreConfig } from '@vue-storefront/magento-api'; +import { isoToCode } from '../helpers/isoToCode'; const getCode = (config: StoreConfig) => config.store_code; const getTitle = (config: StoreConfig) => config.default_title; const getName = (config: StoreConfig) => config.store_name; const getCurrency = (config: StoreConfig) => config.default_display_currency_code; -const getLocale = (config: StoreConfig) => config.locale.replace('_', '-'); +const getLocale = (config: StoreConfig) => isoToCode(config.locale); const allowGuestProductReview = (config: StoreConfig) => config.allow_guests_to_write_product_reviews; const enabledWishlist = (config: StoreConfig) => config.magento_wishlist_general_is_enabled; diff --git a/packages/composables/src/helpers/isoToCode.ts b/packages/composables/src/helpers/isoToCode.ts new file mode 100644 index 000000000..3c2f80496 --- /dev/null +++ b/packages/composables/src/helpers/isoToCode.ts @@ -0,0 +1 @@ +export const isoToCode = (isoLocale: string): string => isoLocale.slice(0, 2); diff --git a/packages/theme/components/AppHeader.vue b/packages/theme/components/AppHeader.vue index 03c1c4802..94c2e0008 100644 --- a/packages/theme/components/AppHeader.vue +++ b/packages/theme/components/AppHeader.vue @@ -28,7 +28,7 @@ /> @@ -94,7 +71,6 @@ import { SfImage, SfButton, SfList, - SfHeading, SfBottomModal, SfCharacteristic, } from '@storefront-ui/vue'; @@ -103,26 +79,18 @@ import { computed, defineComponent, } from '@nuxtjs/composition-api'; -import { useI18n } from '~/helpers/hooks/usei18n'; -import { useMagentoConfiguration } from '~/composables/useMagentoConfiguration'; import { useHandleChanges } from '~/helpers/magentoConfig/handleChanges'; export default defineComponent({ - name: 'LocaleSelector', + name: 'StoreSwitcher', components: { SfImage, SfButton, SfList, - SfHeading, SfBottomModal, SfCharacteristic, }, setup() { - const { - selectedCurrency, - selectedLocale, - } = useMagentoConfiguration(); - const { config, } = useConfig(); @@ -133,25 +101,15 @@ export default defineComponent({ } = useStore(); const { handleChanges } = useHandleChanges(); - - const { - locales, - locale, - } = useI18n(); const isLangModalOpen = ref(false); - const availableLocales = computed(() => [...locales].filter((i) => (Object.keys(i).length > 0 && typeof i === 'object' ? i.code !== locale : i !== locale))); const availableStores = computed(() => stores.value ?? []); return { - availableLocales, availableStores, changeStore, handleChanges, isLangModalOpen, - locale, - selectedCurrency, - selectedLocale, storeConfig: config, storeConfigGetters, storeGetters, @@ -163,7 +121,6 @@ export default defineComponent({ diff --git a/packages/theme/components/TopBar.vue b/packages/theme/components/TopBar.vue index 8acdd2255..ed492730b 100644 --- a/packages/theme/components/TopBar.vue +++ b/packages/theme/components/TopBar.vue @@ -19,7 +19,7 @@ */ --> - + @@ -27,14 +27,14 @@