cloudcommerce 0.22.0 → 0.22.2

package/ecomplus-stores/barra-doce/functions/ssr/src/components/ShopSidenavCategory.vue

@@ -0,0 +1,80 @@
+<template>
+  <li class="text-lg text-base-800">
+    <details
+      v-if="categoryTree.subcategories.length"
+      class="bg-white overflow-y-auto overflow-x-hidden z-10
+      open:absolute open:top-0 open:left-0 open:w-full open:h-full"
+      @toggle="isOpen = !isOpen"
+    >
+      <summary
+        class="cursor-pointer list-none px-6 py-3 active:bg-base-100 transition-colors"
+        :class="isOpen ? 'bg-base-100' : null"
+      >
+        <i :class="!isOpen
+          ? 'i-arrow-right-line float-right mb-0 mt-1 text-xl text-base-500'
+          : 'i-arrow-left-line text-lg'"></i>
+        <AImg
+          v-if="!isOpen && categoryTree.icon"
+          :picture="categoryTree.icon"
+          :alt="categoryTree.name"
+          class="w-auto h-5 inline mr-3"
+        />
+        <h3 class="inline" :class="isOpen ? 'ml-4 text-base' : null">
+          {{ categoryTree.name }}
+        </h3>
+      </summary>
+      <ul
+        class="mt-2 transition-opacity"
+        :class="isFaded ? 'opacity-20' : 'opacity-100'"
+        tabindex="-1"
+      >
+        <ShopSidenavCategory
+          v-for="(subcategoryTree, i) in categoryTree.subcategories"
+          :key="i"
+          :category-tree="subcategoryTree"
+        />
+        <li>
+          <a
+            :href="`/${categoryTree.slug}`"
+            class="block px-6 py-3 text-base underline active:bg-base-200"
+          >
+            {{ $t.i19seeAll$1Category.replace('$1', categoryTree.name) }}
+          </a>
+        </li>
+      </ul>
+    </details>
+    <a
+      v-else
+      :href="`/${categoryTree.slug}`"
+      class="block px-6 py-3 active:bg-base-200"
+    >
+      <AImg
+        v-if="!isOpen && categoryTree.icon"
+        :picture="categoryTree.icon"
+        :alt="categoryTree.name"
+        class="w-auto h-5 inline mr-3"
+      />
+      <h3 class="inline">{{ categoryTree.name }}</h3>
+    </a>
+  </li>
+</template>
+
+<script setup lang="ts">
+import type { CategoryTree, SubcategoryTree } from '@@sf/composables/use-shop-header';
+import { ref, watch } from 'vue';
+
+export interface Props {
+  categoryTree: CategoryTree | SubcategoryTree;
+}
+
+defineProps<Props>();
+const isOpen = ref(false);
+const isFaded = ref(true);
+watch(isOpen, (_isOpen) => {
+  if (_isOpen) {
+    setTimeout(() => { isFaded.value = false; }, 25);
+  } else {
+    isFaded.value = true;
+  }
+});
+</script>

package/ecomplus-stores/barra-doce/functions/ssr/src/env.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="@astrojs/image/client" />
+/// <reference types="vite-plugin-pwa/client" />
+/// <reference types="vue/ref-macros" />
+/// <reference types="@cloudcommerce/storefront/client" />
+/// <reference types="@cloudcommerce/storefront/server" />
+
+/* eslint-disable import/newline-after-import */
+
+declare module '*.vue' {
+  import { type DefineComponent } from 'vue';
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}

package/ecomplus-stores/barra-doce/functions/ssr/src/layouts/Base.astro

@@ -0,0 +1,15 @@
+---
+import SfBase from '@@sf/layouts/Base.astro';
+import InlineScripts from '~/scripts/InlineScripts.astro';
+import '~/assets/style.css';
+import 'uno.css';
+import '@fontsource/croissant-one/index.css';
+---
+
+<SfBase>
+  <Fragment slot="base-head">
+    <slot name="base-head" />
+  </Fragment>
+  <InlineScripts slot="before-head-end" />
+  <slot />
+</SfBase>

package/ecomplus-stores/barra-doce/functions/ssr/src/layouts/PageHeader.astro

@@ -0,0 +1,38 @@
+---
+import usePageHeader from '@@sf/layouts/use-page-header';
+import SharedData from '@@sf/components/SharedData.astro';
+import Picture from '@@sf/components/Picture.astro';
+import PitchBar from '~/components/PitchBar.vue';
+import ShopHeader from '~/components/ShopHeader.vue';
+
+const { routeContext } = Astro.locals;
+const { settings, isHomepage } = routeContext;
+const LogoHeading = isHomepage ? 'h1' : 'h2';
+const {
+  pitchBar,
+  shopHeader: { categories, ...shopHeader },
+} = await usePageHeader({ routeContext });
+---
+
+<slot name="pitch-bar">
+  {pitchBar.slides.length > 1 && <PitchBar {...pitchBar} client:idle />}
+  {pitchBar.slides.length === 1 && <PitchBar {...pitchBar} />}
+</slot>
+<SharedData field="categories" value={categories?.map(({ _id, ...c }) => c)} />
+<ShopHeader {...shopHeader} client:load>
+  <Fragment slot="logo">
+    <a href="/">
+      <LogoHeading>
+        <Picture
+          slot="logo-picture"
+          src={settings.logo}
+          alt={settings.name}
+          widths={[300]}
+          fetchpriority="high"
+          loading="eager"
+          class="hover:drop-shadow-sm max-w-[150px] mx-auto"
+        />
+      </LogoHeading>
+    </a>
+  </Fragment>
+</ShopHeader>

package/ecomplus-stores/barra-doce/functions/ssr/src/main/Fallback.astro

@@ -0,0 +1,10 @@
+---
+---
+
+<main>
+  <h1>Error :/</h1>
+  <p class="instructions">
+    Check out the <code>src/pages</code> directory to get started.<br/>
+    <strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message above.
+  </p>
+</main>

package/ecomplus-stores/barra-doce/functions/ssr/src/main/Home.astro

@@ -0,0 +1,29 @@
+---
+import { usePageHero } from '@@sf/layouts/use-page-main';
+import BannerPictures from '@@sf/components/BannerPictures.astro';
+import HeroSlider from '~/components/HeroSlider.vue';
+import Sections from '~/main/Sections.astro';
+
+const { routeContext } = Astro.locals;
+const { heroSlider } = await usePageHero({ routeContext });
+const heroSlides = heroSlider.slides;
+---
+
+<main>
+  {heroSlider.slides.length &&
+    <HeroSlider {...heroSlider} client:load>
+      {heroSlides[0] && <BannerPictures slot="picture-0" {...heroSlides[0]} index={0} />}
+      {heroSlides[1] && <BannerPictures slot="picture-1" {...heroSlides[1]} index={1} />}
+      {heroSlides[2] && <BannerPictures slot="picture-2" {...heroSlides[2]} index={2} />}
+      {heroSlides[3] && <BannerPictures slot="picture-3" {...heroSlides[3]} index={3} />}
+      {heroSlides[4] && <BannerPictures slot="picture-4" {...heroSlides[4]} index={4} />}
+      {heroSlides[5] && <BannerPictures slot="picture-5" {...heroSlides[5]} index={5} />}
+      {heroSlides[6] && <BannerPictures slot="picture-6" {...heroSlides[6]} index={6} />}
+      {heroSlides[7] && <BannerPictures slot="picture-7" {...heroSlides[7]} index={7} />}
+      {heroSlides[8] && <BannerPictures slot="picture-8" {...heroSlides[8]} index={8} />}
+      {heroSlides[9] && <BannerPictures slot="picture-9" {...heroSlides[9]} index={9} />}
+      <!-- https://github.com/withastro/astro/issues/5066#issuecomment-1277998365 -->
+    </HeroSlider>
+  }
+  <Sections />
+</main>

package/ecomplus-stores/barra-doce/functions/ssr/src/main/Sections.astro

@@ -0,0 +1,29 @@
+---
+import { usePageSections } from '@@sf/layouts/use-page-main';
+import BannersGrid from '~/components/BannersGrid.astro';
+import ProductShelf from '~/components/ProductShelf.vue';
+
+const { routeContext } = Astro.locals;
+const { sections } = await usePageSections({
+  routeContext,
+  handleCustomSection: async (type, content) => {
+    if (type === 'c:foo') return { props: { ...content, foo: 'bar' } };
+    return { props: content };
+  },
+});
+---
+
+<article class="my-9 md:my-12">
+  {sections.map(({ type, props }) => {
+    switch (type) {
+      case 'product-shelf':
+        return <ProductShelf {...props} client:visible />
+      case 'banners-grid':
+        return <BannersGrid {...props} />
+      case 'c:foo':
+        return <div data-foo={props.foo}></div>
+      default:
+        return <div data-section={type}></div>
+    }
+  })}
+</article>

package/ecomplus-stores/barra-doce/functions/ssr/src/main/Wildcard.astro

@@ -0,0 +1,18 @@
+---
+const { fetchingApiContext, apiContext } = Astro.locals.routeContext;
+
+await fetchingApiContext;
+const apiDoc = apiContext.doc;
+---
+
+<main>
+  {apiDoc &&
+    <h1>Hello <span class="text-gradient">{apiDoc.name}</span></h1>
+    <hr>
+    <div class="mt-3">
+      <mark>{apiDoc._id}</mark> from <i>{apiContext.resource}</i>
+      <p>{Math.random()}</p>
+      <em>Lorem ipsum dolor sit amet</em>
+    </div>
+  }
+</main>

package/ecomplus-stores/barra-doce/functions/ssr/src/pages/[...slug].astro

@@ -0,0 +1,40 @@
+---
+import api from '@cloudcommerce/api';
+import loadRouteContext, { RouteContext } from '@@sf/ssr-context';
+import BaseHead from '@@sf/layouts/BaseHead.astro';
+import Base from '~/layouts/Base.astro';
+import PageHeader from '~/layouts/PageHeader.astro';
+import WildcardMain from '~/main/Wildcard.astro';
+
+if (String(Astro.params.slug).endsWith('.css.map')) {
+  return new Response(null, { status: 404 });
+}
+
+let routeContext: RouteContext | undefined;
+let loadError: any;
+try {
+  routeContext = await loadRouteContext(Astro);
+} catch (err: any) {
+  if (err.astroResponse) {
+    return err.astroResponse;
+  }
+  loadError = err;
+}
+
+export async function getStaticPaths() {
+  return (await api.get('products?sort=-sales&limit=4&fields=slug'))
+    .data.result.map(({ slug }) => ({ params: { slug } }));
+}
+---
+
+<!DOCTYPE html>
+<html lang={routeContext?.lang.replace('_', '-')}>
+{routeContext &&
+  <Base>
+    <BaseHead slot="base-head" />
+    <PageHeader />
+    <WildcardMain />
+  </Base>
+}
+{loadError && <Fragment set:html={loadError.responseHTML} />}
+</html>

package/ecomplus-stores/barra-doce/functions/ssr/src/pages/_vue.ts

@@ -0,0 +1,3 @@
+import createApp from '@@sf/pages/_vue';
+
+export default createApp;

package/ecomplus-stores/barra-doce/functions/ssr/src/pages/fallback.astro

@@ -0,0 +1,25 @@
+---
+import loadRouteContext, { RouteContext } from '@@sf/ssr-context';
+import BaseHead from '@@sf/layouts/BaseHead.astro';
+import Base from '~/layouts/Base.astro';
+import PageHeader from '~/layouts/PageHeader.astro';
+import FallbackMain from '~/main/Fallback.astro';
+
+let routeContext: RouteContext;
+try {
+  routeContext = await loadRouteContext(Astro);
+} catch (err: any) {
+  return err.astroResponse;
+}
+
+// export const prerender = true;
+---
+
+<!DOCTYPE html>
+<html lang={routeContext?.lang.replace('_', '-')}>
+<Base>
+  <BaseHead slot="base-head" />
+  <PageHeader />
+  <FallbackMain />
+</Base>
+</html>

package/ecomplus-stores/barra-doce/functions/ssr/src/pages/index.astro

@@ -0,0 +1,35 @@
+---
+import loadRouteContext, { RouteContext } from '@@sf/ssr-context';
+import BaseHead from '@@sf/layouts/BaseHead.astro';
+import Base from '~/layouts/Base.astro';
+import PageHeader from '~/layouts/PageHeader.astro';
+import HomeMain from '~/main/Home.astro';
+
+let routeContext: RouteContext | undefined;
+let loadError: any;
+try {
+  routeContext = await loadRouteContext(Astro);
+  /* Faster SSR without store categories (default) prefetch:
+  routeContext = await loadRouteContext(Astro, {
+    apiPrefetchEndpoints: [],
+  });
+  */
+} catch (err: any) {
+  if (err.astroResponse) {
+    return err.astroResponse;
+  }
+  loadError = err;
+}
+---
+
+<!DOCTYPE html>
+<html lang={routeContext?.lang.replace('_', '-')}>
+{routeContext &&
+  <Base>
+    <BaseHead slot="base-head" />
+    <PageHeader />
+    <HomeMain />
+  </Base>
+}
+{loadError && <Fragment set:html={loadError.responseHTML} />}
+</html>

package/ecomplus-stores/barra-doce/functions/ssr/src/scripts/InlineScripts.astro

@@ -0,0 +1,10 @@
+<script is:inline>
+  window.$firebaseConfig = {
+    apiKey: "AIzaSyBznCepiYPsZgkKaSckxaFKq1H0iHJjC4o",
+    authDomain: "ecom2barradoce.firebaseapp.com",
+    projectId: "ecom2barradoce",
+    storageBucket: "ecom2barradoce.appspot.com",
+    messagingSenderId: "29309694331",
+    appId: "1:29309694331:web:9d7760b1b4f493e1348dde"
+  };
+</script>

package/ecomplus-stores/barra-doce/functions/ssr/tailwind.config.cjs

@@ -0,0 +1,19 @@
+process.env.STOREFRONT_BASE_DIR = __dirname;
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+const { genTailwindConfig } = require('@cloudcommerce/storefront/config/storefront.tailwind.cjs');
+
+const themeOptions = {
+  generalIcons: 'mingcute',
+  baseColor: 'zinc',
+  iconAliases: {
+    close: 'close-line',
+    'chevron-right': 'right-fill',
+    'chevron-left': 'left-fill',
+  },
+};
+
+module.exports = {
+  ...genTailwindConfig(themeOptions),
+  themeOptions,
+};

package/ecomplus-stores/barra-doce/functions/ssr/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "@cloudcommerce/storefront/tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@@i18n": ["./node_modules/@cloudcommerce/i18n/src/pt_br.ts"],
+      "@@sf/*": ["./node_modules/@cloudcommerce/storefront/src/lib/*"],
+      "~/*": ["./src/*"],
+      "content/*": ["./content/*"],
+    }
+  }
+}

package/ecomplus-stores/barra-doce/functions/ssr/uno.config.cjs

@@ -0,0 +1,5 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+const { genUnoCSSConfig } = require('@cloudcommerce/storefront/config/storefront.unocss.cjs');
+const tailwindConfig = require('./tailwind.config.cjs');
+
+export default genUnoCSSConfig(tailwindConfig);

package/ecomplus-stores/barra-doce/functions/with-apps/index.js

@@ -0,0 +1,12 @@
+import '@cloudcommerce/firebase/lib/init';
+import config from '@cloudcommerce/firebase/config';
+import mergeConfig from './config.json' assert { type: 'json' };
+
+config.set({
+  ...mergeConfig,
+  hello: 'from store',
+});
+
+export * from '@cloudcommerce/modules/firebase';
+
+export * from '@cloudcommerce/events/firebase';

package/ecomplus-stores/barra-doce/functions/with-apps/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "barra-doce-with-apps",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "echo '>> Run build from repository root'",
+    "serve": "firebase emulators:start --only functions",
+    "shell": "firebase functions:shell",
+    "start": "npm run shell",
+    "deploy": "firebase deploy --only functions",
+    "logs": "firebase functions:log"
+  },
+  "engines": {
+    "node": "18"
+  },
+  "main": "index.js",
+  "dependencies": {
+    "@cloudcommerce/events": "^0.22.1",
+    "@cloudcommerce/firebase": "^0.22.1",
+    "@cloudcommerce/modules": "^0.22.1"
+  }
+}

package/ecomplus-stores/barra-doce/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@ecomplus-stores/barra-doce",
+  "private": true,
+  "type": "module",
+  "description": "E-Com Plus Cloud Commerce starter store",
+  "scripts": {
+    "dev": "cloudcommerce",
+    "logs": "cloudcommerce logs",
+    "serve": "cloudcommerce serve",
+    "shell": "cloudcommerce shell",
+    "start": "cloudcommerce start",
+    "build": "cloudcommerce build",
+    "predeploy": "cloudcommerce predeploy",
+    "deploy": "cloudcommerce deploy",
+    "login": "cloudcommerce login",
+    "setup": "bash scripts/install.sh && cloudcommerce setup",
+    "setup:quiet": "cloudcommerce setup --no-deploy --no-commit"
+  },
+  "main": "functions/index.js",
+  "author": "E-Com Club Softwares para E-commerce <ti@e-com.club>",
+  "license": "Apache 2.0 with Commons Clause",
+  "bugs": {
+    "url": "https://github.com/ecomplus/cloud-commerce/issues"
+  },
+  "dependencies": {
+    "@cloudcommerce/cli": "^0.22.1"
+  }
+}

package/ecomplus-stores/barra-doce/scripts/install.sh

@@ -0,0 +1,14 @@
+#!/bin/bash
+
+if [ ! -d "./node_modules" ]; then
+  echo '>> Install root dev dependencies:'
+  npm ci
+fi
+echo '>> Install each function dependencies:'
+cd functions
+for d in */ ; do
+  cd $d
+  npm ci
+  cd ..
+done
+cd ..

package/ecomplus-stores/iluminim/.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

package/ecomplus-stores/iluminim/README.md

@@ -2,112 +2,30 @@
 
 [Cloud Commerce](https://github.com/ecomplus/cloud-commerce): the new Store template
 
-[:brazil: Tradução em português](./README.pt-BR.md)
-
 ## Getting started
 
-1. Start creating new project on [Firebase console](https://console.firebase.google.com/):
-    - Set a nice project name (ID) and remember it;
-    - Disable (recommended) Google Analytics for Firebase, will not be used by default;
-
-2. Go to _Creation > Firestore Database_ page (on sidebar) and _Create database_:
-    - Just bypass with default production mode and rules;
-    - Select region `us-east4` (recommended, or multi-region `nam5 (us-central)`);
-
-3. Go to _Creation > Authentication_ and click _Get started_:
-    - Click _Native providers > Email/password_ and enable _Email link (login without password)_;
-    - Optionally, add other provides by _Smartphone_ (SMS, generates additional costs) and/or social media;
-
-4. Go to :gear: _> Project configurations_ e edit:
-    - _Default location for GCP resources_: Same Firestore region (`us-east4`);
-    - _Public settings > Publicly displayed name_: Your store name;
-    - _Public settings > Support email_ (optional);
-
-5. Firebase free plan doesn't support sending external HTTP requests, so you'll need to upgrade to _Blaze_ (on demand) plan;
-
-6. [Use this template](https://github.com/ecomplus/store/generate) to generate a new repository for your store;
+[:us: First deployment and setup](./SETUP.md)
 
-Proceed with:
-- [Better way using command line](#first-deploy-on-cli)
-- [Only in browser](#browser-only-setup) (may be easier but less safe, not recommended)
+[:brazil: Primeiro deploy e configuração](./SETUP.pt-BR.md)
 
-#### First deploy on CLI
+## Local development
 
-7. Setup and first deploy from your terminal with [Firebase CLI](https://firebase.google.com/docs/cli):
 ```bash
-# Install `firebase-tools` and login
-npm install -g firebase-tools && firebase login
-```
-```bash
-# Clone your new store repository
-git clone git@github.com:{gh-user}/{new-store}.git
-cd {new-store}
 npm i
 ```
 
-<details open>
-<summary>With <a href="https://cloud.google.com/sdk/docs/install">gcloud CLI</a> (optional) installed</summary>
-
-```bash
-# Run project configuration and deploy on GitHub Actions
-FIREBASE_PROJECT_ID={project-id} npm run setup
-```
-
 > **Note**  
-> Account key created automatically with only required permissions using gcloud CLI (skip steps 6 and 7).
-
-</details>
+> Check VS Code (highly) recommend extensions in _store/.vscode/extensions.json_
 
-<details>
-<summary>Without gcloud CLI</summary>
+### Storefront
 
 ```bash
-# Run project configuration and first deploy
-FIREBASE_PROJECT_ID={project-id} npm run setup -- --no-gcloud
-npm run deploy
+npm run dev
 ```
 
-7. [Create a service account](https://console.cloud.google.com/iam-admin/serviceaccounts) for your Firebase project directly on Google Cloud Platform:
-    - Name it _Cloud Commerce GH Actions (YOUR REPOSITORY)_;
-    - Describe it _A service account with permission to deploy Cloud Commerce from the GitHub repository to Firebase_;
-    - Continue and select the following roles to the service account:
-        1. _Firebase Admin_
-        2. _API Keys Viewer_
-        3. _Cloud Run Viewer_
-        4. _Cloud Functions Admin_
-        5. _Artifact Registry Admin_
-        6. _App Engine Creator_
-        7. _App Engine Admin_
-        8. _Cloud Scheduler Admin_
-        8. _Service Account User_
-
-8. Back in the service accounts list, click the 3 dots (actions) and select _Manage keys_, generate and download a JSON key for the created account;
-
-</details>
-
-9. Set the following secrets to your GitHub repository (_Settings > Secrets > Actions_):
-    - `FIREBASE_SERVICE_ACCOUNT`: Paste the generated Google Cloud key JSON
-    - `ECOM_AUTHENTICATION_ID`: Get from CLI setup output
-    - `ECOM_API_KEY`: Get from CLI setup output
-
-:checkered_flag: :checkered_flag: :checkered_flag: **All done, congrats!**
-
----
-
-#### Browser-only setup
-
-> **Warning**  
-> This configuration option is less secure, we recommend [first deploy on CLI](#first-deploy-on-cli) instead.
-
-7. [Create a service account](https://console.cloud.google.com/iam-admin/serviceaccounts) for your Firebase project directly on Google Cloud Platform:
-    - Name it _Cloud Commerce GH Actions (YOUR REPOSITORY)_;
-    - Describe it _A service account with ALL permissions to deploy Cloud Commerce from the GitHub to Firebase_;
-    - Continue and select the role _Quick access > Basic > Proprietary_;
-
-8. Back in the service accounts list, click the 3 dots (actions) and select _Manage keys_, generate and download a JSON key for the created account;
+It starts serving the site at http://localhost:3000/.
 
-9. Set the following secrets to your GitHub repository (_Settings > Secrets > Actions_):
-    - `FIREBASE_SERVICE_ACCOUNT`: Paste the generated Google Cloud key JSON
-    - `ECOM_STORE_ID`: Copy your _Store ID_ on the [E-Com Plus admin](https://ecomplus.app/)
-    - `ECOM_AUTHENTICATION_ID`: Copy your _Authentication ID_ on the [E-Com Plus admin](https://ecomplus.app/)
-    - `ECOM_API_KEY`: Copy your _API Key_ on the [E-Com Plus admin](https://ecomplus.app/)
+Edit your store source in _functions/ssr_:
+- _src_: pages, components, styles and scripts sources;
+- _content_: JSON and Markdown content (editable with git-based CMS);
+- _public_: images and not-parsed static assets;