feat(storefront): Additional bannerListCmsField , pageHeroCmsFields and productShelfCmsFields

leomp12 · leomp12 · commit ae9a77dee53e · 2024-12-20T19:51:08.000-03:00
Extending CMS common field configurations from composables

Minor fixes and additional options on `CmsField` type
diff --git a/packages/storefront/src/decap-cms/cms-fields.d.ts b/packages/storefront/src/decap-cms/cms-fields.d.ts
@@ -23,6 +23,8 @@ export type CmsField = {
   fields?: Record<string, CmsField> | null,
   types?: Record<string, CmsField>,
   label?: string | Record<string, string>,
+  _dropped?: true,
+  _nullable?: true,
 } & Record<string, any>;
 
 export type CmsFields = Record<string, CmsField>;
@@ -62,15 +64,19 @@ export type InferCmsFieldOutput<F extends CmsField> =
 
 export type InferCmsOutput<FS extends CmsFields> = {
   [I in keyof FS as FS[I]['required'] extends true ? I : never]:
-    InferCmsFieldOutput<FS[I]>;
+    FS[I]['_dropped'] extends true ? never : InferCmsFieldOutput<FS[I]>;
 } & {
   [I in keyof FS as FS[I]['required'] extends true ? never : I]?:
-    InferCmsFieldOutput<FS[I]>;
+    FS[I]['_dropped'] extends true
+      ? never
+      : FS[I]['_nullable'] extends true
+        ? InferCmsFieldOutput<FS[I]> | null
+        : InferCmsFieldOutput<FS[I]>;
 };
 
 export type CmsComponent = Partial<Omit<CmsField, 'widget'>> & {
   label: string | Record<string, string>,
-  fields: CmsFields,
+  fields?: CmsFields,
 };
 
 export type CmsConfigExtend = {
diff --git a/packages/storefront/src/decap-cms/collections/get-configs-coll.ts b/packages/storefront/src/decap-cms/collections/get-configs-coll.ts
@@ -620,26 +620,18 @@ const getConfigsColl = ({
               widget: 'code',
               required: false,
               default_language: 'css',
-              allow_language_selection: false,
-              output_code_only: true,
             },
             {
               name: 'htmlHead',
               label: 'HTML <head>',
               widget: 'code',
               required: false,
-              default_language: 'html',
-              allow_language_selection: false,
-              output_code_only: true,
             },
             {
               name: 'htmlBody',
               label: 'HTML <body>',
               widget: 'code',
               required: false,
-              default_language: 'html',
-              allow_language_selection: false,
-              output_code_only: true,
             },
           ],
         },
diff --git a/packages/storefront/src/decap-cms/get-cms-config.ts b/packages/storefront/src/decap-cms/get-cms-config.ts
@@ -1,4 +1,4 @@
-import type { CmsField, CmsComponent, CmsConfigExtend } from './cms-fields';
+import type { CmsField, CmsFields, CmsConfigExtend } from './cms-fields';
 import type { ParsedCmsField } from './collections/get-configs-coll';
 import Deepmerge from '@fastify/deepmerge';
 import { i18n as _i18n } from '@ecomplus/utils';
@@ -31,8 +31,13 @@ export const getCmsConfig = async () => {
   }));
   const response = await afetch('/admin/config.json');
   const { components, mergeConfig } = await response.json() as CmsConfigExtend;
-  const parseNestedCmsFields = (cmsFields: CmsComponent['fields']) => {
+  const parseNestedCmsFields = (cmsFields: CmsFields) => {
     return Object.keys(cmsFields).map((name) => {
+      delete cmsFields[name]._dropped;
+      delete cmsFields[name]._nullable;
+      if (!cmsFields[name].label) {
+        cmsFields[name].widget = 'hidden';
+      }
       const nestedFields = cmsFields[name].fields;
       return {
         required: false,
@@ -47,7 +52,8 @@ export const getCmsConfig = async () => {
     label: 'Hero slider',
     ...(components.hero as any),
     widget: 'object' as const,
-    fields: parseNestedCmsFields(components.hero.fields),
+    fields: components.hero.fields
+      && parseNestedCmsFields(components.hero.fields),
   };
   const sectionsConfig = {
     name: 'sections',
@@ -64,7 +70,8 @@ export const getCmsConfig = async () => {
       name,
       ...components.sections,
       widget: 'object' as const,
-      fields: parseNestedCmsFields(components.sections[name].fields),
+      fields: components.sections[name].fields
+        && parseNestedCmsFields(components.sections[name].fields),
     })),
   };
   const collOptions = {
@@ -73,7 +80,7 @@ export const getCmsConfig = async () => {
     locale,
     markdownOptions: {
       buttons: [
-        'bold', 'italic', 'link',
+        'bold', 'italic', 'link', 'code',
         'heading-three', 'heading-four', 'heading-five',
         'quote', 'bulleted-list', 'numbered-list',
       ],
@@ -165,6 +172,14 @@ export const getCmsConfig = async () => {
         }
         return;
       }
+      if (field.widget === 'code') {
+        Object.assign(field, {
+          default_language: 'html',
+          allow_language_selection: false,
+          output_code_only: true,
+          ...field,
+        });
+      }
       if (field.widget === 'object' || field.widget === 'list') {
         if (field.collapsed === undefined) field.collapsed = true;
       }
diff --git a/packages/storefront/src/lib/composables/use-banner.ts b/packages/storefront/src/lib/composables/use-banner.ts
@@ -1,3 +1,4 @@
+import type { CmsField, CmsFields } from '@@sf/content';
 import { computed } from 'vue';
 import { parseShippingPhrase } from '@@sf/state/modules-info';
 
@@ -32,7 +33,7 @@ export const bannerCmsFields = ({
     label: { pt: 'Link no banner', en: 'Link in banner' },
   },
   title: {
-    widget: 'string',
+    widget: 'text',
     label: { pt: 'Título sobreposto', en: 'Overlapping title' },
   },
   subtitle: {
@@ -44,10 +45,18 @@ export const bannerCmsFields = ({
     label: { pt: 'Botão', en: 'Button' },
   },
   buttonLink: {
-    widget: 'number',
+    widget: 'string',
     label: { pt: 'Link do botão', en: 'Button link' },
   },
-}) as const;
+}) as const satisfies CmsFields;
+
+export const bannerListCmsField = ({
+  widget: 'list',
+  label: 'Banners',
+  label_singular: 'banner',
+  summary: '{{fields.title}}',
+  fields: bannerCmsFields,
+}) as const satisfies CmsField;
 
 export const useBanner = (props: Props) => {
   const parsedTitle = computed(() => {
diff --git a/packages/storefront/src/lib/composables/use-product-shelf.ts b/packages/storefront/src/lib/composables/use-product-shelf.ts
@@ -1,5 +1,6 @@
 import type { ResourceId, Collections, SearchItem } from '@cloudcommerce/types';
 import type { SectionPreviewProps } from '@@sf/state/use-cms-preview';
+import type { CmsFields } from '@@sf/content';
 import { ref, shallowReactive } from 'vue';
 import api from '@cloudcommerce/api';
 import { inStock as checkInStock } from '@ecomplus/utils';
@@ -8,7 +9,7 @@ import { useSectionPreview } from '@@sf/state/use-cms-preview';
 
 export type Props = Partial<SectionPreviewProps> & {
   collectionId?: ResourceId | null;
-  searchQuery?: `&${string}` | '';
+  searchQuery?: string; // `&${string} | ''`
   sort?: '-sales' | '-created_at' | 'price' | '-price' | '-price_discount' | string;
   title?: string | null;
   titleLink?: string | null;
@@ -20,6 +21,67 @@ export type Props = Partial<SectionPreviewProps> & {
   isRelatedProducts?: boolean;
 }
 
+export const productShelfCmsFields = ({
+  collectionIdAndInfo: {
+    widget: 'string',
+    label: { pt: 'Coleção', en: 'Collection' },
+    hint: { pt: 'ID da coleção', en: 'Collection ID' },
+    // `collectionIdAndInfo` parsed to `collectionId` server-side on `usePageMain`
+    _dropped: true,
+  },
+  sort: {
+    widget: 'select',
+    options: [{
+      label: { pt: 'Vendas', en: 'Sales' },
+      value: '-sales',
+    }, {
+      label: { pt: 'Data de criação', en: 'Creation date' },
+      value: '-created_at',
+    }, {
+      label: { pt: 'Menor preço', en: 'Lowest price' },
+      value: 'price',
+    }, {
+      label: { pt: 'Maior preço', en: 'Highest price' },
+      value: '-price',
+    }, {
+      label: { pt: 'Percentual de desconto', en: 'Discount percentage' },
+      value: '-price_discount',
+    }],
+  },
+  searchQuery: {
+    widget: 'string',
+    label: { pt: 'Query adicional', en: 'Additional query' },
+    hint: { pt: 'Ex.: &brands.slug!=minha-marca', en: 'E.g. &brands.slug!=my-brand' },
+  },
+  title: {
+    widget: 'string',
+    label: { pt: 'Título', en: 'Title' },
+    _nullable: true,
+  },
+  titleLink: {
+    widget: 'string',
+    label: { pt: 'Link no título', en: 'Title link' },
+    _nullable: true,
+  },
+  isShuffle: {
+    widget: 'boolean',
+    label: { pt: 'Embaralhar itens', en: 'Shuffle result items' },
+  },
+  isHeadless: {
+    widget: 'boolean',
+  },
+  limit: {
+    widget: 'number',
+    value_type: 'int',
+    label: { pt: 'Limite de itens', en: 'Items limit' },
+    default: 12,
+  },
+  page: {
+    widget: 'number',
+    value_type: 'int',
+  },
+}) as const satisfies CmsFields;
+
 const useProductShelf = (props: Props) => {
   const title = ref<string | null>(props.title || '');
   const titleLink = ref<string | null>(props.titleLink || '');
diff --git a/packages/storefront/src/lib/layouts/use-page-main.ts b/packages/storefront/src/lib/layouts/use-page-main.ts
@@ -1,9 +1,10 @@
 import type { ResourceId, Collections } from '@cloudcommerce/types';
-import type { PageContent } from '@@sf/content';
+import type { CmsFields, PageContent } from '@@sf/content';
 import type { RouteContext } from '@@sf/ssr-context';
 import type { Props as UseBannerProps } from '@@sf/composables/use-banner';
 import type { Props as UseProductShelfProps } from '@@sf/composables/use-product-shelf';
 import type { Props as UseSearchShowcaseProps } from '@@sf/composables/use-search-showcase';
+import { bannerListCmsField } from '@@sf/composables/use-banner';
 import { useSharedData } from '@@sf/composables/use-shared-data';
 import { useProductShelf } from '@@sf/composables/use-product-shelf';
 import { useSearchShowcase } from '@@sf/composables/use-search-showcase';
@@ -15,6 +16,19 @@ export type Props = {
   searchEngine?: UseSearchShowcaseProps['searchEngine'];
 }
 
+export const pageHeroCmsFields = ({
+  autoplay: {
+    widget: 'number',
+    value_type: 'int',
+    label: 'Autoplay',
+    hint: { pt: 'Milissegundos', en: 'Milliseconds' },
+  },
+  slides: {
+    ...bannerListCmsField,
+    required: true,
+  },
+}) as const satisfies CmsFields;
+
 type PageContentHero = Exclude<PageContent['hero'], undefined>;
 const now = Date.now();
 const parseBanners = (banners: PageContentHero['slides']) => {
