Feat/conscia package sort (#36)

* attempting conscia component sort * component sort * undoing conscia install changes * updating image domain note
composable-com · Mar 25, 2024 · 020e5f5 · 020e5f5 · github-actions · Mar 25, 2024
1 parent 24e35af
commit 020e5f5
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 1 deletion.
diff --git a/packages/conscia/README.md b/packages/conscia/README.md
@@ -36,3 +36,18 @@ In order to use data from Conscia, the `cmsRouter` needs to use the `getPage` da
    import { getPage } from '@composable/conscia'
    ```
 
+:::note
+Don't forget to update the `composable-ui/next.config.js` file with the image domains that you will be receiving. Please refer to the Next.JS documentation on `remotePatterns` [here](https://nextjs.org/docs/app/api-reference/components/image#remotepatterns). For example, 
+
+```json
+images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: '**.contentstack.io',
+        port: '',
+      },
+    ],
+}
+```
+:::
diff --git a/packages/conscia/src/types.ts b/packages/conscia/src/types.ts
@@ -42,10 +42,12 @@ export type ConsciaHeroBanner = {
     description: string
     url: string
   }
+  sort_order?: number
 }
 
 export type ConsciaCTABanner = {
   __typename: BannerFullProps['__typename']
+  sort_order?: number
   containerMarginBottom?: number
   containerMarginTop?: number
   containerSize: BannerFullProps['containerSize']
@@ -67,6 +69,7 @@ export type ConsciaCTABanner = {
 
 export type ConsciaFeatureCardsHeader = {
   __typename: BannerTextOnlyProps['__typename']
+  sort_order?: number
   centered: BannerTextOnlyProps['centered']
   id: BannerTextOnlyProps['id']
   content: BannerTextOnlyProps['content']
@@ -77,6 +80,7 @@ export type ConsciaFeatureCardsHeader = {
 
 export interface ConsciaFeaturedProducts {
   __typename: CommerceConnectorProps['__typename']
+  sort_order?: number
   id: CommerceConnectorProps['id']
   title: CommerceConnectorProps['title']
   containerMarginBottom?: number
@@ -91,6 +95,7 @@ export interface ConsciaFeaturedProducts {
 
 export type ConsciaGrid = {
   __typename: GridProps['__typename']
+  sort_order?: number
   id: GridProps['id']
   columns: GridProps['columns']
   containerMarginBottom?: number
@@ -102,6 +107,7 @@ export type ConsciaGrid = {
 
 export type ConsciaTextCard = {
   __typename: TextCardProps['__typename']
+  sort_order?: number
   id: TextCardProps['id']
   title: TextCardProps['title']
   image: {

diff --git a/packages/conscia/src/utils/page.ts b/packages/conscia/src/utils/page.ts
@@ -30,7 +30,11 @@ export const transformPage = ({
   return {
     __typename: 'pageSlug',
     id: pageSlug,
-    items: Object.values(consciaPage.components).map(transformPageComponent),
+    items: Object.values(consciaPage.components)
+      .sort((a, b) => {
+        return (a.response.sort_order ?? 0) - (b.response.sort_order ?? 0)
+      })
+      .map(transformPageComponent),
     metaDescription: '',
     metaKeywords: [],
     metaTitle: '',