cloudcommerce 0.0.115 → 0.0.116

package/packages/ssr/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/ssr",
   "type": "module",
-  "version": "0.0.115",
+  "version": "0.0.116",
   "description": "E-Com Plus Cloud Commerce storefront SSR",
   "main": "lib/index.js",
   "exports": {
@@ -28,11 +28,11 @@
     "@cloudcommerce/api": "workspace:*",
     "@cloudcommerce/firebase": "workspace:*",
     "@ecomplus/utils": "^1.4.1",
-    "astro": "^1.4.7",
+    "astro": "^1.5.0",
     "firebase-admin": "^11.1.0",
     "firebase-functions": "^3.24.1",
     "image-size": "^1.0.2",
-    "vue": "^3.2.40"
+    "vue": "^3.2.41"
   },
   "devDependencies": {
     "@cloudcommerce/types": "workspace:*",

package/packages/storefront/astro.config.mjs

@@ -1,4 +1,4 @@
-import { readdirSync } from 'fs';
+import { existsSync } from 'fs';
 import { join as joinPath } from 'path';
 import * as dotenv from 'dotenv';
 // https://github.com/import-js/eslint-plugin-import/issues/1810
@@ -130,7 +130,10 @@ const _vitePWAOptions = {
 };
 
 const isSSG = process.env.BUILD_OUTPUT === 'static';
-const componentsSrc = joinPath(process.cwd(), 'src/components');
+
+// @@components tries ~/components with fallback to @@storefront/components
+const localComponentsDir = joinPath(process.cwd(), 'src/components');
+const libComponentsDir = joinPath(__dirname, 'src/lib/components');
 
 const genAstroConfig = ({
   site = `https://${domain}`,
@@ -155,21 +158,23 @@ const genAstroConfig = ({
       VitePWA(vitePWAOptions),
     ],
     resolve: {
-      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue', '.svelte'],
-      alias: {
-        '@@i18n': `@cloudcommerce/i18n/src/${lang}.ts`,
-        '@@storefront': joinPath(__dirname, 'src/lib'),
-        ...readdirSync(componentsSrc, { withFileTypes: true }).reduce((acc, dirent) => {
-          const { name } = dirent;
-          if (!dirent.isDirectory() && name.charAt(0) !== '.') {
-            const nameWithoutExt = name.replace(/\.\w+$/, '');
-            acc[`@@components/${name}`] = joinPath(componentsSrc, name);
-            acc[`@@components/${nameWithoutExt}`] = joinPath(componentsSrc, name);
-          }
-          return acc;
-        }, {}),
-        '@@components': joinPath(__dirname, 'src/lib/components'),
-      },
+      alias: [
+        { find: '@@i18n', replacement: `@cloudcommerce/i18n/src/${lang}.ts` },
+        { find: '@@storefront', replacement: joinPath(__dirname, 'src/lib') },
+        { find: '~', replacement: joinPath(process.cwd(), 'src') },
+        { find: 'content', replacement: joinPath(process.cwd(), 'content') },
+        {
+          find: '@@components',
+          replacement: '',
+          customResolver: (componentPath) => {
+            const localReplacement = joinPath(localComponentsDir, componentPath);
+            if (existsSync(localReplacement)) {
+              return localReplacement;
+            }
+            return joinPath(libComponentsDir, componentPath);
+          },
+        },
+      ],
     },
   },
 });

package/packages/storefront/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/storefront",
   "type": "module",
-  "version": "0.0.115",
+  "version": "0.0.116",
   "description": "E-Com Plus Cloud Commerce storefront with Astro",
   "main": "src/index.js",
   "repository": {
@@ -22,8 +22,7 @@
     "build:static": "BUILD_OUTPUT=static astro build",
     "preview": "astro preview",
     "astro": "astro",
-    "prepare-monorepo": "sh scripts/prepare-monorepo.sh",
-    "prerelease": "sh scripts/prerelease.sh"
+    "prepare-monorepo": "sh scripts/prepare-monorepo.sh"
   },
   "dependencies": {
     "@astrojs/image": "^0.9.3",
@@ -40,17 +39,17 @@
     "@iconify-json/logos": "^1.1.17",
     "@nanostores/vue": "^0.6.0",
     "@unocss/preset-icons": "^0.45.29",
-    "astro": "^1.4.7",
+    "astro": "^1.5.0",
     "color": "^4.2.3",
     "dotenv": "^16.0.3",
-    "firebase": "^9.11.0",
+    "firebase": "^9.12.1",
     "image-size": "^1.0.2",
     "nanostores": "^0.7.0",
     "rollup": "^2.79.1",
     "unocss": "^0.45.29",
-    "vite": "^3.1.7",
+    "vite": "^3.1.8",
     "vite-plugin-pwa": "^0.13.1",
-    "vue": "^3.2.40"
+    "vue": "^3.2.41"
   },
   "devDependencies": {
     "@babel/core": "^7.19.3"

package/packages/storefront/scripts/prepare-monorepo.sh

@@ -2,3 +2,9 @@
 
 rm -rf content && ln -s ../../store/functions/ssr/content content
 rm -rf public && ln -s ../../store/functions/ssr/public public
+rm -rf src/pages && ln -s ../../../store/functions/ssr/src/pages src/pages
+rm -rf src/layouts && ln -s ../../../store/functions/ssr/src/layouts src/layouts
+rm -rf src/main && ln -s ../../../store/functions/ssr/src/main src/main
+rm -rf src/components && ln -s ../../../store/functions/ssr/src/components src/components
+rm -rf src/scripts && ln -s ../../../store/functions/ssr/src/scripts src/scripts
+rm -rf src/assets && ln -s ../../../store/functions/ssr/src/assets src/assets

package/packages/storefront/src/env.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="astro/client" />
+/// <reference types="@astrojs/image/client" />
 /// <reference types="vite-plugin-pwa/client" />
 /// <reference types="../client" />

package/packages/storefront/src/lib/assets/pico.css

@@ -25,9 +25,9 @@
   --form-element-spacing-vertical: 0.75rem;
   --form-element-spacing-horizontal: 1rem;
   --nav-element-spacing-vertical: 1rem;
-  --nav-element-spacing-horizontal: 0.5rem;
+  --nav-element-spacing-horizontal: 0.65rem;
   --nav-link-spacing-vertical: 0.5rem;
-  --nav-link-spacing-horizontal: 0.5rem;
+  --nav-link-spacing-horizontal: 0.65rem;
   --form-label-font-weight: var(--font-weight);
   --transition: 0.15s ease-in-out;
   --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
@@ -40,22 +40,22 @@
 }
 @media (min-width: 576px) {
   :root {
-    --font-size: 17px;
+    --font-size: 16.5px;
   }
 }
 @media (min-width: 768px) {
   :root {
-    --font-size: 18px;
+    --font-size: 17px;
   }
 }
 @media (min-width: 992px) {
   :root {
-    --font-size: 19px;
+    --font-size: 17.65px;
   }
 }
 @media (min-width: 1200px) {
   :root {
-    --font-size: 20px;
+    --font-size: 18.5px;
   }
 }
 
@@ -749,13 +749,14 @@ button {
 [role=button] {
   display: inline-block;
   text-decoration: none;
+  cursor: pointer;
 }
 
 button,
 input[type=submit],
 input[type=button],
 input[type=reset],
-[role=button] {
+:where(a)[role=button] {
   --background-color: var(--primary);
   --border-color: var(--primary);
   --color: var(--primary-inverse);
@@ -914,7 +915,7 @@ textarea {
   border-width: 0;
 }
 
-input:not([type=checkbox], [type=radio], [type=range]) {
+:where(input):not([type=checkbox], [type=radio], [type=range]) {
   height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
 }
 
@@ -932,13 +933,13 @@ fieldset legend {
   font-weight: var(--form-label-font-weight, var(--font-weight));
 }
 
-input:not([type=checkbox], [type=radio]),
+:where(input):not([type=checkbox], [type=radio]),
 select,
 textarea {
   width: 100%;
 }
 
-input:not([type=checkbox], [type=radio], [type=range], [type=file]),
+:where(input):not([type=checkbox], [type=radio], [type=range], [type=file]),
 select,
 textarea {
   -webkit-appearance: none;
@@ -1035,7 +1036,7 @@ select:invalid {
   opacity: 1;
 }
 
-input:not([type=checkbox], [type=radio]),
+:where(input):not([type=checkbox], [type=radio]),
 select,
 textarea {
   margin-bottom: var(--spacing);

package/packages/storefront/src/lib/components/ADrawer.vue

@@ -18,6 +18,7 @@ const props = withDefaults(defineProps<Props>(), {
 });
 const emit = defineEmits(['update:modelValue']);
 const close = () => emit('update:modelValue', false);
+const container = ref(null);
 const article = ref(null);
 const outsideClickListener = (ev: MouseEvent) => {
   if (!article.value?.contains(ev.target)) {
@@ -30,14 +31,23 @@ const escClickListener = (ev: KeyboardEvent) => {
   }
 };
 watch(toRef(props, 'modelValue'), async (isOpen) => {
+  const header = container.value.closest('[class*="backdrop-"]');
   if (isOpen) {
     document.body.style.overflow = 'hidden';
+    if (header) {
+      header.style.backdropFilter = 'none';
+    }
     setTimeout(() => {
       document.addEventListener('click', outsideClickListener, { passive: true });
       document.addEventListener('keydown', escClickListener, { passive: true });
     }, 500);
   } else {
     document.body.style.overflow = null;
+    if (header) {
+      setTimeout(() => {
+        header.style.backdropFilter = null;
+      }, 500);
+    }
     document.removeEventListener('click', outsideClickListener);
     document.removeEventListener('keydown', escClickListener);
   }
@@ -48,28 +58,30 @@ const transition3dTx = computed(() => {
 </script>
 
 <template>
-  <Transition>
-    <dialog
-      v-if="modelValue"
-      class="offcanvas p-0"
-      :class="placement === 'end' ? 'justify-end' : 'justify-start'"
-      :open="modelValue"
-    >
-      <article
-        ref="article"
-        class="rounded-none h-full max-h-screen m-0"
+  <div ref="container">
+    <Transition>
+      <dialog
+        v-if="modelValue"
+        class="offcanvas p-0"
+        :class="placement === 'end' ? 'justify-end' : 'justify-start'"
+        :open="modelValue"
       >
-        <a
-          href="#close"
-          :aria-label="i19close"
-          class="close"
-          data-target="modal-example"
-          @click.prevent="close"
-        ></a>
-        <slot />
-      </article>
-    </dialog>
-  </Transition>
+        <article
+          ref="article"
+          class="rounded-none h-full max-h-screen m-0"
+        >
+          <a
+            href="#close"
+            :aria-label="i19close"
+            class="close"
+            data-target="modal-example"
+            @click.prevent="close"
+          ></a>
+          <slot />
+        </article>
+      </dialog>
+    </Transition>
+  </div>
 </template>
 
 <style>

package/packages/storefront/src/lib/components/LoginDrawer.vue

@@ -1,15 +1,10 @@
 <script lang="ts" setup>
 import { ref, defineAsyncComponent } from 'vue';
-import {
-  i19myAccountAndOrders,
-  i19myAccount,
-  i19myOrders,
-} from '@@i18n';
+import { i19myAccount, i19myOrders } from '@@i18n';
 import ADrawer from '@@components/ADrawer.vue';
 
 export interface Props {
   accountUrl?: string;
-  accountIconClass?: string;
   additionalLinks?: Array<{
     href: string;
     isBlank?: boolean;
@@ -19,7 +14,6 @@ export interface Props {
 
 withDefaults(defineProps<Props>(), {
   accountUrl: '/app/account',
-  accountIconClass: 'i-user-circle',
   additionalLinks: () => [],
 });
 const isVisible = ref(false);
@@ -39,16 +33,16 @@ const isLogged = ref(false);
 <template>
   <div class="login-offcanvas">
     <div @click="toggle">
-      <slot name="toggle" v-bind="{ isVisible }">
-        <a :href="accountUrl" :title="i19myAccountAndOrders">
-          <div :class="accountIconClass"></div>
-        </a>
-      </slot>
+      <slot name="toggle" v-bind="{ isVisible }" />
     </div>
     <ADrawer v-model="isVisible">
       <slot name="form">
         <div class="w-80">
-          <LoginForm @login="isLogged = true" @logout="isLogged = false" />
+          <LoginForm @login="isLogged = true" @logout="isLogged = false">
+            <template #button-content>
+              <slot name="form-button-content" />
+            </template>
+          </LoginForm>
         </div>
       </slot>
       <slot name="nav" v-bind="{ isLogged }">

package/packages/storefront/src/lib/components/LoginForm.vue

@@ -104,7 +104,9 @@ const customerName = useStore($customerName);
       </a>
     </small>
     <button type="submit">
-      {{ isSignUp ? i19signUp : i19accessMyAccount }}
+      <slot name="button-content" v-bind="{ isSignUp }">
+        {{ isSignUp ? i19signUp : i19accessMyAccount }}
+      </slot>
     </button>
     <a
       href="#"

package/packages/storefront/src/lib/layouts/Base.astro

@@ -1,9 +1,9 @@
 ---
 import type CmsCode from '@@storefront/types/cms-code';
 import type { PageContext } from '@@storefront/ssr-context';
-import BaseHead from './BaseHead.astro';
-import BaseStateJson from './BaseStateJson.astro';
-import BaseBody from './BaseBody.astro';
+import BaseHead from '@@storefront/layouts/BaseHead.astro';
+import BaseStateJson from '@@storefront/layouts/BaseStateJson.astro';
+import BaseBody from '@@storefront/layouts/BaseBody.astro';
 
 export interface Props {
   pageContext: PageContext;

package/packages/storefront/src/lib/layouts/BaseStateJson.astro

@@ -21,6 +21,11 @@ const {
 } = Astro.props as Props;
 
 let inlineClientJS = `
+window.ECOM_STORE_ID = ${storeId};
+window.ECOM_LANG = '${lang}';
+window.ECOM_CURRENCY = '${currency}';
+window.ECOM_CURRENCY_SYMBOL = '${currencySymbol}';
+window.ECOM_COUNTRY_CODE = '${countryCode}';
 window.storefront = ${JSON.stringify({
   settings: {
     ...settings,

package/packages/storefront/src/lib/ssr-context.ts

@@ -1,5 +1,6 @@
 import type { AstroGlobal } from 'astro';
 import type { BaseConfig } from '@cloudcommerce/config';
+import type { CategoriesList, BrandsList } from '@cloudcommerce/api/types';
 import type CmsSettings from './types/cms-settings';
 import api, { ApiError, ApiEndpoint } from '@cloudcommerce/api';
 import _getConfig from '../../storefront.config.mjs';
@@ -55,7 +56,11 @@ const loadPageContext = async (Astro: AstroGlobal, {
   let cmsContent: Record<string, any> | undefined;
   let apiResource: string | undefined;
   let apiDoc: Record<string, any> | undefined;
-  const apiState: { [k: string]: Record<string, any> } = {};
+  const apiState: {
+    categories?: CategoriesList,
+    brands?: BrandsList,
+    [k: string]: Record<string, any>,
+  } = {};
   const apiOptions = {
     fetch,
     isNoAuth: true,

package/packages/storefront/src/lib/state/customer-session.ts

@@ -43,7 +43,7 @@ const isAuthenticated = computed(session, ({ auth }) => {
   return auth && new Date(auth.expires).getTime() - Date.now() > 1000 * 10;
 });
 const customer = computed(session, (_session) => _session.customer);
-const customerName = computed(customer, (_customer) => getNickname(_customer));
+const customerName = computed(customer, (_customer) => getNickname(_customer) as string);
 const customerEmail = computed(customer, (_customer) => _customer.main_email);
 
 const setCustomerEmail = (email: string) => session.setKey('customer', {

package/packages/storefront/src/lib/types/cms-code.d.ts

@@ -1,4 +1,4 @@
-type CmsCode = typeof import('../../../content/code.json');
+type CmsCode = typeof import('content/code.json');
 
 export default CmsCode;
 

package/packages/storefront/src/lib/types/cms-contacts.d.ts

@@ -1,4 +1,4 @@
-type CmsContacts = typeof import('../../../content/contacts.json');
+type CmsContacts = typeof import('content/contacts.json');
 
 export default CmsContacts;
 

package/packages/storefront/src/lib/types/cms-header.d.ts

@@ -1,4 +1,4 @@
-type CmsHeader = typeof import('../../../content/header.json');
+type CmsHeader = typeof import('content/header.json');
 
 export default CmsHeader;
 

package/packages/storefront/src/lib/types/cms-settings.d.ts

@@ -1,4 +1,4 @@
-type CmsSettings = typeof import('../../../content/settings.json');
+type CmsSettings = typeof import('content/settings.json');
 
 export default CmsSettings;
 

package/packages/storefront/src/lib/types/cms-social.d.ts

@@ -1,4 +1,4 @@
-type CmsSocial = typeof import('../../../content/social.json');
+type CmsSocial = typeof import('content/social.json');
 
 export default CmsSocial;
 

package/packages/storefront/tailwind.config.cjs

@@ -1,8 +1,44 @@
+// IntelliSense for UnoCSS icons
+const defaultIcons = {
+  brandIcons: 'bxl',
+  brandIconsShortcuts: [
+    'facebook',
+    'twitter',
+    'instagram',
+    'linkedin',
+    'youtube',
+    'google',
+    'pinterest',
+    'tiktok',
+    'telegram',
+    'whatsapp',
+    'messenger',
+  ],
+  brandLogos: 'logos',
+  brandLogosShortcuts: [
+    'visa',
+    'mastercard',
+    'paypal',
+    'apple-pay',
+    'google-pay',
+    'amex',
+    'elo',
+    'hipercard',
+    'dinersclub',
+  ],
+  generalIcons: 'heroicons',
+};
+
 const genTailwindConfig = ({
   colorVariants = [
     '50',
     ...[...Array(9).keys()].map((i) => String((i + 1) * 100)),
   ],
+  brandIcons = defaultIcons.brandIcons,
+  brandIconsShortcuts = defaultIcons.brandIconsShortcuts,
+  brandLogos = defaultIcons.brandLogos,
+  brandLogosShortcuts = defaultIcons.brandLogosShortcuts,
+  generalIcons = defaultIcons.generalIcons,
 } = {}) => ({
   theme: {
     extend: {
@@ -28,6 +64,10 @@ const genTailwindConfig = ({
           },
           ...colors,
         }), {}),
+        gray: {
+          DEFAULT: 'var(--gray)',
+          accent: 'var(--gray-accent)',
+        },
       },
     },
   },
@@ -65,6 +105,40 @@ const genTailwindConfig = ({
           });
           return utilities;
         }, {}),
+        ...[{
+          iconset: generalIcons,
+        }, {
+          iconset: brandIcons,
+          shortcuts: brandIconsShortcuts,
+        }, {
+          iconset: brandLogos,
+          shortcuts: brandLogosShortcuts,
+        }].reduce((utilities, { iconset, shortcuts }) => {
+          if (iconset) {
+            if (!shortcuts) {
+              // eslint-disable-next-line
+              const { icons } = require(`@iconify-json/${iconset}`);
+              shortcuts = Object.keys(icons.icons);
+              if (!shortcuts.includes('shopping-cart')) {
+                shortcuts.push('shopping-cart');
+              }
+            }
+            shortcuts.forEach((shortcut) => {
+              if (typeof shortcut === 'string') {
+                utilities[`.i-${shortcut}`] = {
+                  '--iconify': iconset,
+                  '--icon': `"${shortcut}"`,
+                };
+              } else {
+                utilities[`.i-${shortcut[0]}`] = {
+                  '--iconify': iconset,
+                  '--icon': `"${shortcut[1]}"`,
+                };
+              }
+            });
+          }
+          return utilities;
+        }, {}),
       });
     },
   ],
@@ -72,7 +146,8 @@ const genTailwindConfig = ({
 
 const tailwindConfig = genTailwindConfig();
 
-module.exports = { ...tailwindConfig, genTailwindConfig };
+module.exports = { ...tailwindConfig, genTailwindConfig, defaultIcons };
 
 exports.genTailwindConfig = genTailwindConfig;
 exports.tailwindConfig = tailwindConfig;
+exports.defaultIcons = defaultIcons;

package/packages/storefront/tsconfig.json

@@ -2,10 +2,13 @@
   "extends": "astro/tsconfigs/base",
   "compilerOptions": {
     "jsx": "preserve",
+    "baseUrl": ".",
     "paths": {
       "@@i18n": ["./node_modules/@cloudcommerce/i18n/src/pt_br.ts"],
       "@@storefront/*": ["./src/lib/*"],
-      "@@components/*": ["./src/lib/components/*", "./src/lib/components/*.vue"],
+      "@@components/*": ["./src/components/*", "./src/lib/components/*"],
+      "~/*": ["./src/*"],
+      "content/*": ["./content/*"],
     }
   }
 }

package/packages/storefront/uno.config.ts

@@ -8,7 +8,7 @@ import {
 } from 'unocss';
 import presetIcons from '@unocss/preset-icons';
 import Color from 'color';
-import { genTailwindConfig } from './tailwind.config.cjs';
+import { genTailwindConfig, defaultIcons } from './tailwind.config.cjs';
 import getCMS from './storefront.cms.mjs';
 
 const { primaryColor, secondaryColor } = getCMS();
@@ -52,7 +52,7 @@ const _preflights: Preflight[] = [{
       ${Object.entries(colorCSSVars).map(([varName, value]) => `--${varName}:${value};`).join('')}
       --content-max-width: 80rem;
       --white: #fff;
-      --gray-50: #f9fafb;
+      --gray-100: #f3f4f6;
       --gray-200: #e5e7eb;
       --gray-400: #94a3b8;
       --gray-600: #4b5563;
@@ -61,7 +61,7 @@ const _preflights: Preflight[] = [{
       --gray-900: #111827;
       --gray: var(--gray-600);
       --gray-accent: var(--gray-800);
-      --surface-color: var(--gray-50);
+      --surface-color: var(--gray-100);
       --surface-border-color: var(--gray-200);
       --yiq-text-light: var(--white);
       --yiq-text-dark: var(--gray-900);
@@ -86,33 +86,11 @@ const _preflights: Preflight[] = [{
 
 const genUnoCSSConfig = ({
   colorVariants = _colorVariants,
-  brandIcons = 'bxl',
-  brandIconsShortcuts = [
-    'facebook',
-    'twitter',
-    'instagram',
-    'linkedin',
-    'youtube',
-    'google',
-    'pinterest',
-    'tiktok',
-    'telegram',
-    'whatsapp',
-    'messenger',
-  ],
-  brandLogos = 'logos',
-  brandLogosShortcuts = [
-    'visa',
-    'mastercard',
-    'paypal',
-    'apple-pay',
-    'google-pay',
-    'amex',
-    'elo',
-    'hipercard',
-    'dinersclub',
-  ],
-  generalIcons = 'heroicons',
+  brandIcons = defaultIcons.brandIcons,
+  brandIconsShortcuts = defaultIcons.brandIconsShortcuts,
+  brandLogos = defaultIcons.brandLogos,
+  brandLogosShortcuts = defaultIcons.brandLogosShortcuts,
+  generalIcons = defaultIcons.generalIcons,
   shoppingCartIcon = 'shopping-bag',
   preflights = _preflights,
 }: {
@@ -131,7 +109,10 @@ const genUnoCSSConfig = ({
     plugin({
       addUtilities: (utilities: Record<string, { [k: string]: string | number }>) => {
         Object.keys(utilities).forEach((selector) => {
-          rules.push([selector.replace('.', ''), utilities[selector]]);
+          // Skip icons selectors added on tailwind.config.cjs only for IntelliSense
+          if (!selector.startsWith('.i-')) {
+            rules.push([selector.replace('.', ''), utilities[selector]]);
+          }
         });
       },
     });