feat(theme-base): theme base package as a foundation for custom theme…

…s (#1170)

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()
+}

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) {

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 = () => {

packages/theme-base/.gitignore

@@ -0,0 +1,7 @@
+node_modules
+node_modules_dev
+lerna-debug.log
+dist
+.DS_Store
+.yalc
+yalc.lock

packages/theme-base/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@shopware-pwa/theme-base",
+  "version": "0.0.1",
+  "author": "patzick <[email protected]>",
+  "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"
+  }
+}

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 };
+  }
+}

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%;
+}

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;
+  }
+}

packages/theme-base/src/cms/cmsMap.json

@@ -0,0 +1,5 @@
+{
+  "sections": {},
+  "blocks": {},
+  "elements": {}
+}

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();
+}

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>

packages/theme-base/src/locales/de-DE.json

@@ -0,0 +1 @@
+{}

packages/theme-base/src/locales/en-GB.json

@@ -0,0 +1 @@
+{}

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,
+  };
+};

packages/theme-base/src/pages/_.vue

@@ -0,0 +1,4 @@
+<script>
+import Pages from "@/pages/_lang/_";
+export default Pages;
+</script>

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>

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,
+};

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",
+  });
+}

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;