Merge pull request #1 from composable-com/main

Updating from main

composable-ui/next.config.js

@@ -14,8 +14,8 @@ const HEADERS = {
   // 'Content-Security-Policy': ;
   // Be sure to set your Content-Security-Policy (CSP) based on your desired security practices.
   // Read more about CSP and the available directives on https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy
-  'Permissions-Policy':
-    'camera=(self), microphone=(self), geolocation=(self), interest-cohort=(self)',
+  // For example, if you want to ensure only the site itself can use your camera and microphone, you can add the following to the Permissions-Policy: camera=(self), microphone=(self)
+  'Permissions-Policy': 'geolocation=(self), interest-cohort=(self)',
 }
 
 module.exports = () => {

composable-ui/package.json

@@ -70,6 +70,6 @@
     "jest": "^29.4.0",
     "jest-environment-jsdom": "^29.4.0",
     "tsconfig": "workspace:*",
-    "typescript": "^4.9.5"
+    "typescript": "^4.5.5"
   }
 }

composable-ui/src/components/cms/commerce-connector.tsx

@@ -1,36 +1,11 @@
 import { Button, Container, Flex, HStack, Text } from '@chakra-ui/react'
+import { CommerceConnectorProps, PriceProps } from '@composable/types'
 import { ProductCard } from '@composable/ui'
 import { useRouter } from 'next/router'
 
-export interface GenericConnectorProps {
-  sectionTitle?: string
-  ctaLabel?: string
-  ctaHref?: string
-  ctaHeight?: string
-  ctaMaxWidth?: string
-  ctaMinWidth?: string
-  products?: {
-    name: string
-    slug: string
-    brand?: string
-    img?: {
-      url?: string
-      alt?: string
-    }
-    price?: PriceProps
-  }[]
-}
-
-export interface PriceProps {
-  current: number
-  currentFormatted: string
-  regular?: number
-  regularFormatted?: string
-}
-
-export const CommerceConnector = (props: GenericConnectorProps) => {
+export const CommerceConnector = (props: CommerceConnectorProps) => {
   const {
-    sectionTitle,
+    title,
     ctaLabel,
     ctaHref,
     products,
@@ -48,8 +23,8 @@ export const CommerceConnector = (props: GenericConnectorProps) => {
         <Flex
           gap={{ base: '0.5rem', md: '0.625rem' }}
           mb={{
-            base: sectionTitle && ctaHref ? '8' : undefined,
-            md: sectionTitle && ctaHref ? '12' : undefined,
+            base: title && ctaHref ? '8' : undefined,
+            md: title && ctaHref ? '12' : undefined,
           }}
           justifyContent={'space-between'}
         >
@@ -58,7 +33,7 @@ export const CommerceConnector = (props: GenericConnectorProps) => {
             textStyle={{ base: 'Body-L', md: 'Body-XL' }}
             color={'primary'}
           >
-            {sectionTitle}
+            {title}
           </Text>
           {ctaLabel && ctaHref && (
             <Button onClick={() => router.push(ctaHref)}>{ctaLabel}</Button>

composable-ui/src/components/forms/login-form.tsx

@@ -288,7 +288,9 @@ export const LoginForm = ({
                     paddingTop={10}
                     spacing={6}
                   >
-                    <Text textStyle={'Desktop/M'}>{content.notAMemberYet}</Text>
+                    <Text textStyle={'Desktop/M'} pt={2} pb={4}>
+                      {content.notAMemberYet}
+                    </Text>
                     <Button
                       size={{ base: 'md', md: 'lg' }}
                       variant={'outline'}

composable-ui/src/server/api/routers/cms.ts

@@ -1,12 +1,18 @@
-import { createTRPCRouter, publicProcedure } from '../trpc'
 import { getPage } from '@composable/cms-generic'
-import { PageProps } from '@composable/types'
+import { PageSchema } from '@composable/types'
 import { z } from 'zod'
+import { createTRPCRouter, publicProcedure } from '../trpc'
 
 export const cmsRouter = createTRPCRouter({
   getPage: publicProcedure
     .input(z.object({ slug: z.string() }))
     .query(async ({ input }) => {
-      return getPage({ pageSlug: input.slug }) as PageProps
+      try {
+        const page = await getPage({ pageSlug: input.slug })
+        return PageSchema.parse(page)
+      } catch (err) {
+        console.log(err)
+        return null
+      }
     }),
 })

docs/docs/integrations/orchestration/_category_.json

@@ -0,0 +1,8 @@
+{
+  "label": "Orchestration",
+  "position": 7,
+  "link": {
+    "type": "generated-index",
+    "description": "Orchestration"
+  }
+}

docs/docs/integrations/orchestration/conscia.md

@@ -0,0 +1,46 @@
+# Conscia.ai Integration
+
+Conscia’s zero-code Digital Experience Orchestration (DXO) platform enables brands and organizations to fast-track the adoption of MACH and composable architecture into their existing tech stacks. For marketing, it offers centralized omnichannel control over the composable experience, with Personalization and A/B testing built in. For engineering teams, it offers zero code API and data orchestration, offloading the point to point integrations to the orchestration layer, simplifying the frontend code, and eliminating the need to build custom BFFs (Backend for Frontends). Conscia’s revolutionary approach embraces both legacy and modern backends, allowing it to act as the bridge between any backend and any frontend, and for this reason, justifiably claims the role of the ‘Brain’ of the Composable stack.
+
+This integration demonstrates Conscia's ability to orchestrate multiple data sources, stitch together data, transform data models, and enable switching out data sources by the business user without the front end being concerned. Using Salesforce Commere Cloud, Contentstack and Contentful as data sources, we have a created a Home Page Model template that recreates the Composable UI's homepage. 
+
+## Integration architecture
+
+To extend the storefront to pull in content from Conscia's DXO, a package called `conscia` has been created. This package contains a `getPage` data fetching function that queries the Conscia API and then extracts the data required from the response to drive the content components on the Composable UI homepage.
+
+## Integrating Conscia.ai with Composable UI
+
+### Set Up
+
+1. Gain access to a Conscia sandbox. (These are currently only available to SIs. Please talk to your partner manager about getting access to a sandbox.)
+1. Refer to the Conscia package [README](https://github.com/composable-com/composable-ui/blob/main/packages/conscia/README.md) to complete set up. 
+
+### Exploring the Conscia Sandbox
+
+The sandbox is pre-populated with the set of orchestration Components required to reproduce the Composable UI homepage. These Components are connected to Contentstack, Contentful, and Salesforce Commerce Cloud sandboxes. 
+
+Each Composable UI component data source is modeled with the same pattern of selector, mapper, and model. 
+- Selector Components pull data directly from a data source. 
+- Mapper Components transform the data as required. This could include remapping fields, stripping out extraneous data, and stitching together multiple data sources. 
+- Model Components provide the final response to the consumer.
+
+For example: 
+- `selector-contentstack-banner` connects to Contentstack's Banner content model. It also defines a number of Design Attributes that the business user is expected to supply values for via Experience Rules.
+- `mapper-contentstack-banner` takes the selector Component's response and maps only the necessary fields to the schema expected by Composable UI. It combines these fields with the Design Attributes into a single schema response.
+- `model-banner` provides a clean, agnostic final response, and includes logic to select either the Contenstack or Contentful banner mapper Component response based on the selection made in the `banner-picker` Component. 
+
+![alt_text](conscia-visualizer.png "Conscia Home Page Model Template")
+
+### Try this
+
+1. Go into Experience Rules
+2. Under Composable UI Storefront -> Home Page find the Hero Banner Source component
+3. Click Edit on the `**Default**` rule
+4. Change tabs to the Experience page
+5. Under `Attributes` -> `CMS Banner Selection`, select Contentstack (or Contentful, depending on which is already selected, choose the other one)
+6. Click Submit
+7. Reload the homepage and see a different hero banner has loaded
+
+## Related Resources
+
+- [Conscia.ai DXO Documentation](https://docs.conscia.ai/platform-overview)

docs/docs/integrations/search/klevu.md

@@ -0,0 +1,145 @@
+---
+sidebar_position: 5
+---
+
+# Integrating Klevu
+
+Klevu is a powerful AI-driven search solution designed to enhance e-commerce
+platforms. It offers advanced search capabilities, including autocomplete,
+natural language processing, and machine learning insights to improve the user
+experience. This guide outlines how to integrate Klevu components into the
+Composable-UI project, enhancing your site with Klevu's robust search
+functionalities.
+
+# Data Indexing in Klevu
+
+## Overview
+
+Klevu provides a robust solution for indexing data to enhance the search
+functionality in e-commerce platforms. This process involves the categorization
+and organization of your site's content, making it searchable and improving
+overall user experience.
+
+## Account
+
+Before starting you need a Klevu account. [You can create a trial account 
+that is free for 14 days.](https://box.klevu.com/merchant/signup)
+
+Please select API as integration method when welcome wizard asks you.
+
+Find API and REST key from **Store settings** -> **Shop info** 
+
+
+## Indexing Script
+Located in the scripts folder, Klevu offers an alternative method for indexing
+data. This script is tailored to interact with your site's data structure and
+Klevu's search API. It's important to note that the attributes in the script
+should be modified according to your specific data requirements and structure.
+
+## Environment Variables
+To securely interact with Klevu's API, you'll need to set up environment
+variables in a .env file. This file should include your unique Klevu API and
+REST keys, which can be found in the Klevu Merchant Center. Add these lines to
+your .env file:
+
+```env
+# Klevu API key that is found in the Klevu Merchant Center
+KLEVU_API_KEY=
+
+# Klevu REST key that is found in the Klevu Merchant Center
+KLEVU_REST_KEY=
+```
+
+## Modifying the Indexing Script
+Before running the script, ensure that it is tailored to your site's specific
+data structure. The script provided requires customization to match the
+attributes and data types you wish to index. This step is crucial for accurate
+and efficient search functionality.
+
+## Running the Script
+Once the script is customized and the environment variables are set, you can
+execute the indexing process with the following command:
+
+```bash
+pnpm run klevu-setup
+```
+
+This command will initiate the script, which interacts with Klevu's API to index
+your site's data, preparing it for an enhanced search experience.
+
+## Getting the `display` key to work
+
+`display` is a special property in the indexing. It can be used to pass any data
+from to the frontend. But for it to work you need contact `support@klevu.com` and
+request `additionalDataToReturn` to be enabled.
+
+# Installation and Setup
+
+1. **Navigating to the Project Directory:** Open your terminal and navigate to
+   your local `composable-ui` project directory and then move to `composable-ui` subfolder.
+   ```bash
+   cd path/to/composable-ui/composable-ui
+   ```
+
+2. **Installing Required Packages:** Use `pnpm` to install the necessary Klevu
+   packages:
+   ```bash
+   pnpm install @klevu/ui @klevu/ui-react @klevu/core
+   ```
+
+3. **Copy files from Klevu project to composable ui:** Move to Klevu package folder and copy files with automatic script
+   ```bash
+   cd ../packages/klevu
+   pnpm run copyfiles
+   ```
+
+4. **Go back to composable-ui frontend project:**
+   ```bash
+   cd ../../composable-ui
+   ```
+
+4. **Set the env variables:** Set the `.env` variables from the Klevu project you created. 
+
+   ```shell
+   NEXT_PUBLIC_KLEVU_SEARCH_URL=YOUR_KLEVU_SEARCH_URL
+   NEXT_PUBLIC_KLEVU_SEARCH_API_KEY=YOUR_KLEVU_SEARCH_API_KEY
+   NEXT_PUBLIC_KLEVU_ASSETS_PATH=http://localhost:3000
+   ```
+
+   `SEARCH_URL` format is following `https://[your Klevu API v2 search url]/cs/v2/search`
+
+  `ASSETS_PATH` is full url to your installation. It is required for icons to load properly.
+
+   You can find the Search URL in the same Store settings as the `API key` and `REST key`.
+   It is the last item in the page with title `APIv2 Cloud Search URL`
+
+
+5. **Adding styles:** Add following two imports to `composable-ui/pages/_app.tsx`
+
+   ```typescript
+   import '@klevu/ui/dist/klevu-ui/klevu-ui.css'
+   import 'klevustyle.css'
+   ```
+
+   You can modify the look and feel of the Klevu Components with `src/klevustyle.css`
+
+
+6. **Adding QuickSearch Component:** Integrate the `QuickSearch` component into
+   the header:
+   - First, open `composable-ui/src/components/layout/header.tsx`.
+   - Import the `QuickSearch` component:
+     ```javascript
+     import { QuickSearch } from 'components/klevu/klevu';
+     ```
+   - Add the `<QuickSearch />` component to the desired location within the
+     `header.tsx` file.
+
+   Detailed code can be found from `packages/klevu/docimages/quicksearch_example.png`
+
+
+## Running the Project
+After completing the above steps, you can start the project to see the Klevu
+components in action:
+```bash
+pnpm run dev
+```

packages/cms-generic/src/data/pages.json

@@ -201,8 +201,6 @@
         "containerMarginBottom": "5",
         "containerMarginTop": "5",
         "containerSize": "full",
-        "ctaMaxWidth": "362px",
-        "ctaMinWidth": "290px",
         "id": "44968ea0-70f9-494f-b88c-d7ffe4804597",
         "products": [
           {
@@ -269,8 +267,7 @@
             },
             "slug": "casual-short-sleeve-dress-in-bone"
           }
-        ],
-        "title": "Women collections"
+        ]
       },
       {
         "__typename": "BannerTextOnly",

packages/conscia/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ['custom'],
+}

packages/conscia/README.md

@@ -0,0 +1,38 @@
+# Integrating Conscia Components into Composable-UI
+
+Read more about the Conscia.ai composable orchestration integration with Composable UI and what it accomplishes [here](https://docs.composable.com/docs/integrations/orchestration/conscia).
+
+# Installation and Setup
+
+1. **Navigating to the Project Directory:** Open your terminal and navigate to your local `composable-ui` project directory and then move to `composable-ui` subfolder.
+   ```bash
+   cd path/to/composable-ui/composable-ui
+   ```
+1. **Install the @composable/conscia package**:
+   ```bash
+   pnpm install @composable/conscia
+   ```
+1. **Set the required environment variables:** 
+
+   ```shell
+   NEXT_PUBLIC_CONSCIA_BASE_URL=https://...conscia.io/api
+   NEXT_PUBLIC_CONSCIA_TOKEN=
+   NEXT_PUBLIC_CONSCIA_CUSTOMER_CODE=
+   ```
+1. **Update your storefront to use the Conscia data fetching service:**
+
+The `cmsRouter`, defined in `composable-ui/src/server/api/routers/cms.ts`, provides your storefront with a data fetching function called `getPage`, which retrieves the data that is used to populate the content on your storefront. By default this function returns data retrieved from a local file. 
+
+In order to use data from Conscia, the `cmsRouter` needs to use the `getPage` data fetching service defined in `@composable/conscia`, instead of from `@composable/cms-generic`. Change the code as follows:
+
+
+   ```javascript
+   // cms.ts - before changes
+   import { getPage } from '@composable/cms-generic'
+
+...
+
+   // cms.ts - after changes
+   import { getPage } from '@composable/conscia'
+   ```
+

packages/conscia/index.ts

@@ -0,0 +1 @@
+export * from './src'