From 824a3dfa0c3fac6bfe612d5807e5e4ca72bebdd8 Mon Sep 17 00:00:00 2001
From: patzick <13100280+patzick@users.noreply.github.com>
Date: Mon, 12 Oct 2020 11:30:50 +0200
Subject: [PATCH 1/4] feat: build theme base package

---
 packages/theme-base/.gitignore                |  7 ++
 packages/theme-base/package.json              | 17 ++++
 .../src/app/router.scrollBehavior.js          |  7 ++
 packages/theme-base/src/assets/scss/main.scss | 77 +++++++++++++++++++
 .../theme-base/src/assets/scss/variables.scss | 20 +++++
 packages/theme-base/src/cms/cmsMap.json       |  5 ++
 .../theme-base/src/helpers/formatPrice.js     | 20 +++++
 packages/theme-base/src/layouts/default.vue   | 20 +++++
 packages/theme-base/src/locales/de-DE.json    |  1 +
 packages/theme-base/src/locales/en-GB.json    |  1 +
 packages/theme-base/src/logic/useLocales.js   | 28 +++++++
 packages/theme-base/src/pages/_.vue           |  4 +
 packages/theme-base/src/pages/_lang/_.vue     | 17 ++++
 packages/theme-base/src/store/index.js        | 49 ++++++++++++
 14 files changed, 273 insertions(+)
 create mode 100644 packages/theme-base/.gitignore
 create mode 100644 packages/theme-base/package.json
 create mode 100644 packages/theme-base/src/app/router.scrollBehavior.js
 create mode 100644 packages/theme-base/src/assets/scss/main.scss
 create mode 100644 packages/theme-base/src/assets/scss/variables.scss
 create mode 100644 packages/theme-base/src/cms/cmsMap.json
 create mode 100644 packages/theme-base/src/helpers/formatPrice.js
 create mode 100644 packages/theme-base/src/layouts/default.vue
 create mode 100644 packages/theme-base/src/locales/de-DE.json
 create mode 100644 packages/theme-base/src/locales/en-GB.json
 create mode 100644 packages/theme-base/src/logic/useLocales.js
 create mode 100644 packages/theme-base/src/pages/_.vue
 create mode 100644 packages/theme-base/src/pages/_lang/_.vue
 create mode 100644 packages/theme-base/src/store/index.js

diff --git a/packages/theme-base/.gitignore b/packages/theme-base/.gitignore
new file mode 100644
index 000000000..9e6d3e7d8
--- /dev/null
+++ b/packages/theme-base/.gitignore
@@ -0,0 +1,7 @@
+node_modules
+node_modules_dev
+lerna-debug.log
+dist
+.DS_Store
+.yalc
+yalc.lock
\ No newline at end of file
diff --git a/packages/theme-base/package.json b/packages/theme-base/package.json
new file mode 100644
index 000000000..7c723a297
--- /dev/null
+++ b/packages/theme-base/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "@shopware-pwa/theme-base",
+  "version": "0.0.1",
+  "author": "patzick <13100280+patzick@users.noreply.github.com>",
+  "license": "MIT",
+  "baseTheme": "",
+  "private": true,
+  "scripts": {
+    "build": "shopware-pwa build-theme",
+    "dev": "shopware-pwa dev-theme",
+    "postinstall": "yarn build && cd ./dist && yarn link",
+    "release": "yarn build && cd ./dist && yarn publish"
+  },
+  "dependencies": {
+    "currency.js": "^2.0.3"
+  }
+}
diff --git a/packages/theme-base/src/app/router.scrollBehavior.js b/packages/theme-base/src/app/router.scrollBehavior.js
new file mode 100644
index 000000000..9a4946407
--- /dev/null
+++ b/packages/theme-base/src/app/router.scrollBehavior.js
@@ -0,0 +1,7 @@
+export default function (to, from, savedPosition) {
+  if (savedPosition) {
+    return savedPosition;
+  } else {
+    return { x: 0, y: 0 };
+  }
+}
diff --git a/packages/theme-base/src/assets/scss/main.scss b/packages/theme-base/src/assets/scss/main.scss
new file mode 100644
index 000000000..58ec3b792
--- /dev/null
+++ b/packages/theme-base/src/assets/scss/main.scss
@@ -0,0 +1,77 @@
+@import "@/assets/scss/variables.scss";
+
+// Global styles for theme
+
+html {
+  overflow-x: hidden;
+  height: 100vh;
+  overflow: auto;
+  scroll-behavior: smooth;
+}
+
+a {
+  text-decoration: none;
+  color: var(--c-link);
+  &:hover {
+    color: var(--c-link-hover);
+  }
+}
+
+/*Header styles*/
+h1 {
+  font-family: var(--font-family-secondary);
+  font-size: var(--h1-font-size);
+  font-weight: var(--h1-font-weight);
+  line-height: 1.6;
+  margin: 0;
+}
+
+h2 {
+  font-family: var(--font-family-secondary);
+  font-size: var(--h2-font-size);
+  font-weight: var(--h2-font-weight);
+  line-height: 1.6;
+  margin: 0;
+}
+
+h3 {
+  font-family: var(--font-family-secondary);
+  font-size: var(--h3-font-size);
+  font-weight: var(--h3-font-weight);
+  line-height: 1.6;
+  margin: 0;
+}
+
+h4 {
+  font-family: var(--font-family-secondary);
+  font-size: var(--h4-font-size);
+  font-weight: var(--h4-font-weight);
+  line-height: 1.6;
+  margin: 0;
+}
+
+h5 {
+  font-family: var(--font-family-secondary);
+  font-size: var(--h5-font-size);
+  font-weight: var(--h5-font-weight);
+  line-height: 1.6;
+  margin: 0;
+}
+
+body {
+  padding: 0;
+  margin: 0;
+  min-height: 100vh;
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-light);
+  font-size: var(--font-size-base);
+  line-height: 1.6;
+}
+
+#__nuxt {
+  height: 100vh;
+}
+
+#__layout {
+  height: 100%;
+}
diff --git a/packages/theme-base/src/assets/scss/variables.scss b/packages/theme-base/src/assets/scss/variables.scss
new file mode 100644
index 000000000..fe6ca35c5
--- /dev/null
+++ b/packages/theme-base/src/assets/scss/variables.scss
@@ -0,0 +1,20 @@
+$tablet: 768px;
+
+// Global variables for theme
+#__nuxt {
+  --boxed-mode-max-width: 1366px;
+  --bottom-navigation-height: 3.35rem;
+}
+
+@mixin for-tablet {
+  @media screen and (min-width: $tablet) {
+    @content;
+  }
+}
+
+@mixin sizing-mode-boxed {
+  @include for-desktop {
+    max-width: var(--boxed-mode-max-width);
+    margin: 0 auto;
+  }
+}
diff --git a/packages/theme-base/src/cms/cmsMap.json b/packages/theme-base/src/cms/cmsMap.json
new file mode 100644
index 000000000..e52c3e944
--- /dev/null
+++ b/packages/theme-base/src/cms/cmsMap.json
@@ -0,0 +1,5 @@
+{
+  "sections": {},
+  "blocks": {},
+  "elements": {}
+}
diff --git a/packages/theme-base/src/helpers/formatPrice.js b/packages/theme-base/src/helpers/formatPrice.js
new file mode 100644
index 000000000..b39e4c5b2
--- /dev/null
+++ b/packages/theme-base/src/helpers/formatPrice.js
@@ -0,0 +1,20 @@
+import currency from "currency.js";
+
+const defaultFormatPriceOptions = {
+  pattern: `# !`,
+  separator: ` `,
+  decimal: `,`,
+  symbol: `€`,
+  formatWithSymbol: true,
+};
+
+export function formatPrice(price, options) {
+  if (typeof price !== "number") {
+    return;
+  }
+
+  return currency(
+    price,
+    Object.assign(defaultFormatPriceOptions, options)
+  ).format();
+}
diff --git a/packages/theme-base/src/layouts/default.vue b/packages/theme-base/src/layouts/default.vue
new file mode 100644
index 000000000..28fcd59a6
--- /dev/null
+++ b/packages/theme-base/src/layouts/default.vue
@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <h1>
+      Welcome in your Blank Shopware PWA template. It is a base for your own
+      theme.
+    </h1>
+    <nuxt />
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  setup(props, { root }) {
+    return {};
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/packages/theme-base/src/locales/de-DE.json b/packages/theme-base/src/locales/de-DE.json
new file mode 100644
index 000000000..0967ef424
--- /dev/null
+++ b/packages/theme-base/src/locales/de-DE.json
@@ -0,0 +1 @@
+{}
diff --git a/packages/theme-base/src/locales/en-GB.json b/packages/theme-base/src/locales/en-GB.json
new file mode 100644
index 000000000..0967ef424
--- /dev/null
+++ b/packages/theme-base/src/locales/en-GB.json
@@ -0,0 +1 @@
+{}
diff --git a/packages/theme-base/src/logic/useLocales.js b/packages/theme-base/src/logic/useLocales.js
new file mode 100644
index 000000000..d32de2755
--- /dev/null
+++ b/packages/theme-base/src/logic/useLocales.js
@@ -0,0 +1,28 @@
+import { computed } from "@vue/composition-api";
+import languagesMap from "sw-plugins/languages";
+import { getApplicationContext } from "@shopware-pwa/composables";
+
+export const useLocales = (rootContext) => {
+  const { i18n, router } = getApplicationContext(
+    rootContext,
+    "useUICheckoutPage"
+  );
+
+  const availableLanguages = computed(() => Object.values(languagesMap) || []);
+  const currentLocale = computed(() => i18n.locale);
+
+  const changeLocale = async (localeCode) => {
+    if (localeCode === i18n.locale) return;
+    if (localeCode === i18n.fallbackLocale) {
+      router.push(rootContext.$route.fullPath.replace(/^\/[^\/]+/, ""));
+    } else {
+      router.push(`/${localeCode}${rootContext.$route.fullPath}`);
+    }
+  };
+
+  return {
+    availableLanguages,
+    changeLocale,
+    currentLocale,
+  };
+};
diff --git a/packages/theme-base/src/pages/_.vue b/packages/theme-base/src/pages/_.vue
new file mode 100644
index 000000000..88d2d37d2
--- /dev/null
+++ b/packages/theme-base/src/pages/_.vue
@@ -0,0 +1,4 @@
+<script>
+import Pages from "@/pages/_lang/_";
+export default Pages;
+</script>
diff --git a/packages/theme-base/src/pages/_lang/_.vue b/packages/theme-base/src/pages/_lang/_.vue
new file mode 100644
index 000000000..92175f10d
--- /dev/null
+++ b/packages/theme-base/src/pages/_lang/_.vue
@@ -0,0 +1,17 @@
+<template>
+  <h2>You can show your CMS page overriding "src/pages/_lang/_.vue" file.</h2>
+</template>
+<script>
+export default {
+  name: "DynamicRoute",
+  components: {},
+  watchQuery(newQuery, oldQuery) {
+    // Only execute component methods if currency changed
+    return newQuery.currencyId !== oldQuery.currencyId;
+  },
+  asyncData: async ({ params, app, error: errorView, query }) => {
+    return {};
+  },
+};
+</script>
+<style lang="scss" scoped></style>
diff --git a/packages/theme-base/src/store/index.js b/packages/theme-base/src/store/index.js
new file mode 100644
index 000000000..3b396c67f
--- /dev/null
+++ b/packages/theme-base/src/store/index.js
@@ -0,0 +1,49 @@
+export const state = () => ({
+  cart: null,
+  page: null,
+  user: null,
+  sessionContext: null,
+  locales: ["en-GB", "de-DE"],
+  locale: "en-GB",
+  initialListings: {},
+  appliedListings: {},
+});
+
+export const mutations = {
+  SET_CART(state, cart) {
+    state.cart = cart;
+  },
+  SET_PAGE(state, page) {
+    state.page = page;
+  },
+  SET_USER(state, user) {
+    state.user = user;
+  },
+  SET_SESSION_CONTEXT(state, sessionContext) {
+    state.sessionContext = sessionContext;
+  },
+  SET_LANG(state, locale) {
+    if (state.locales.includes(locale)) {
+      state.locale = locale;
+    }
+  },
+  SET_INITIAL_LISTING(state, { listingKey, initialListing }) {
+    state.initialListings = Object.assign({}, state.initialListings, {
+      [listingKey]: initialListing,
+    });
+  },
+  SET_APPLIED_LISTING(state, { listingKey, appliedListing }) {
+    state.appliedListings = Object.assign({}, state.appliedListings, {
+      [listingKey]: appliedListing,
+    });
+  },
+};
+
+export const getters = {
+  getCart: (state) => state.cart,
+  getPage: (state) => state.page,
+  getUser: (state) => state.user,
+  getSessionContext: (state) => state.sessionContext,
+  getInitialListings: (state) => state.initialListings,
+  getAppliedListings: (state) => state.appliedListings,
+};

From cb93113abafa57df168c82958f05b23de0e5f89d Mon Sep 17 00:00:00 2001
From: patzick <13100280+patzick@users.noreply.github.com>
Date: Mon, 12 Oct 2020 11:31:32 +0200
Subject: [PATCH 2/4] refactor: adjust theme to match theme base structure

---
 packages/default-theme/helpers/formatPrice.js | 20 +++++++++++++++++++
 packages/default-theme/helpers/index.js       | 11 +---------
 packages/nuxt-module/plugins/price-filter.js  |  2 +-
 3 files changed, 22 insertions(+), 11 deletions(-)
 create mode 100644 packages/default-theme/helpers/formatPrice.js

diff --git a/packages/default-theme/helpers/formatPrice.js b/packages/default-theme/helpers/formatPrice.js
new file mode 100644
index 000000000..89fb9d2e5
--- /dev/null
+++ b/packages/default-theme/helpers/formatPrice.js
@@ -0,0 +1,20 @@
+import currency from "currency.js"
+
+const defaultFormatPriceOptions = {
+  pattern: `# !`,
+  separator: ` `,
+  decimal: `,`,
+  symbol: `€`,
+  formatWithSymbol: true,
+}
+
+export function formatPrice(price, options) {
+  if (typeof price !== "number") {
+    return
+  }
+
+  return currency(
+    price,
+    Object.assign(defaultFormatPriceOptions, options)
+  ).format()
+}
diff --git a/packages/default-theme/helpers/index.js b/packages/default-theme/helpers/index.js
index 7f9af64d1..62788fe92 100644
--- a/packages/default-theme/helpers/index.js
+++ b/packages/default-theme/helpers/index.js
@@ -10,16 +10,7 @@ const defaultFormatPriceOptions = {
   formatWithSymbol: true,
 }
 
-export function formatPrice(price, options) {
-  if (typeof price !== "number") {
-    return
-  }
-
-  return currency(
-    price,
-    Object.assign(defaultFormatPriceOptions, options)
-  ).format()
-}
+export { formatPrice } from "./formatPrice"
 
 export const getSortingLabel = (sorting) => {
   if (!sorting || !sorting.field) {
diff --git a/packages/nuxt-module/plugins/price-filter.js b/packages/nuxt-module/plugins/price-filter.js
index ea2159a9c..70cc369b1 100644
--- a/packages/nuxt-module/plugins/price-filter.js
+++ b/packages/nuxt-module/plugins/price-filter.js
@@ -1,7 +1,7 @@
 import Vue from "vue";
 import { provide } from "@vue/composition-api";
 import { useCurrency } from "@shopware-pwa/composables";
-import { formatPrice } from "@/helpers";
+import { formatPrice } from "@/helpers/formatPrice";
 
 export default ({ app }) => {
   app.setup = () => {

From 54386aaacf19a335e9802e5d1fe39fed9a910480 Mon Sep 17 00:00:00 2001
From: patzick <13100280+patzick@users.noreply.github.com>
Date: Mon, 12 Oct 2020 11:32:44 +0200
Subject: [PATCH 3/4] chore: change build and dev scripts to match theme
 packages

---
 scripts/dev.js   | 32 +++++++++++++++++++++-----------
 scripts/utils.js |  4 ----
 2 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/scripts/dev.js b/scripts/dev.js
index 3a08d314a..d71fc6058 100644
--- a/scripts/dev.js
+++ b/scripts/dev.js
@@ -25,16 +25,26 @@ const target = args._.length
   : "shopware-6-client";
 const chokidar = require("chokidar");
 
-chokidar
-  .watch([path.join(__dirname, "..", "packages", target, "src")], {
-    ignoreInitial: true,
-  })
-  .on("all", async (event) => {
-    execa("yarn", ["build", target], {
-      stdio: "inherit",
-    });
+const packagePath = path.join(__dirname, "..", "packages", target);
+const pkg = require(path.join(packagePath, "package.json"));
+
+if (pkg.scripts && pkg.scripts.dev) {
+  execa("yarn", ["dev"], {
+    stdio: "inherit",
+    cwd: packagePath,
   });
+} else {
+  chokidar
+    .watch([path.join(packagePath, "src")], {
+      ignoreInitial: true,
+    })
+    .on("all", async (event) => {
+      execa("yarn", ["build", target], {
+        stdio: "inherit",
+      });
+    });
 
-execa("yarn", ["build", target], {
-  stdio: "inherit",
-});
+  execa("yarn", ["build", target], {
+    stdio: "inherit",
+  });
+}
diff --git a/scripts/utils.js b/scripts/utils.js
index 239aee2ec..5f0626249 100644
--- a/scripts/utils.js
+++ b/scripts/utils.js
@@ -14,10 +14,6 @@ const targets = (exports.targets = allTargets.filter((f) => {
   ) {
     return false;
   }
-  const pkg = require(`../packages/${f}/package.json`);
-  if (pkg.private && !pkg.buildOptions) {
-    return false;
-  }
   return true;
 }));
 

From 3c81313f1376e9f63e98122e2f2f9a36ac267e72 Mon Sep 17 00:00:00 2001
From: patzick <13100280+patzick@users.noreply.github.com>
Date: Mon, 12 Oct 2020 12:01:20 +0200
Subject: [PATCH 4/4] chore: publishing dist folder if contains package.json
 file

---
 scripts/release.js | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/scripts/release.js b/scripts/release.js
index 05a9a3d98..fc772de36 100644
--- a/scripts/release.js
+++ b/scripts/release.js
@@ -216,11 +216,18 @@ async function publishPackage(pkgName, version, runIfNotDry) {
   if (skippedPackages.includes(pkgName)) {
     return;
   }
-  const pkgRoot = getPkgRoot(pkgName);
+  let pkgRoot = getPkgRoot(pkgName);
   const pkgPath = path.resolve(pkgRoot, "package.json");
   const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf-8"));
   if (pkg.private) {
-    return;
+    // if package is private and has dist folder with package.json it tries to publish from dist folder
+    const pkgDistRoot = path.resolve(pkgRoot, "dist");
+    const pkgDistPath = path.resolve(pkgDistRoot, "package.json");
+    if (!fs.existsSync(pkgDistPath)) return;
+    const distPackage = JSON.parse(fs.readFileSync(pkgDistPath, "utf-8"));
+    if (distPackage.private) return;
+
+    pkgRoot = pkgDistRoot;
   }
 
   const releaseTag = isCanaryRelease ? "canary" : null;