feat: add product card [MONET-1338] (#4534)

* feat: add product card [MONET-1338]

* fix: import/export of modules [MONET-1338]

* fix: data-test-id spelling [MONET-1338]

* fix: storybook stories [MONET-1338]

* chore: fix linting issues [MONET-1338]

* chore: type namespaces [MONET-1338]

* feat: provieer agnostic product card [MONET-1305, MONET-1325]

* feat: add default additional data renderer [MONET-1325]

* feat: use shared image component for legacy product card  [MONET-1325]

* feat: add meta data renderer [MONET-1325]

* feat: add storybook decorators [MONET-1338]

* fix: rename renderer [MONET-1325]

* fix: apply change suggestions from @lilbitner [MONET-1325]

* fix simplify prop type [MONET-1325]

* chore: add tests for newly intorduced components [MONET-1325]

* chore: cleanup after tests [MONET-1325]

* fix: adjust to desing comments by @j-pea [MONET-1325]

* chore: switch to esbuild-jest for testing [MONET-1325]

* Revert "chore: switch to esbuild-jest for testing [MONET-1325]"

This reverts commit d46c047.

* chore: bump jest to 28 [MONET-1325]

* Revert "chore: bump jest to 28 [MONET-1325]"

This reverts commit 0a443b7.

* fix: more review changes [MONET-1325]

* chore: run test in band [MONET-1325]

* feat: meta data - render links [MONET-1325]

* feat: add link renderer [MONET-1325]

* fix: genric type for extended product [MONET-1325]

* fix: extract style definitions [MONET-1338]

* fix: remove dead link [MONET-1338]

* fix: cleanup types and remove unused code [MONET-1338]

* chore: update docs [NONE]

apps/optimizely/src/EditorPage/index.js

@@ -80,9 +80,9 @@ const getInitialValue = (sdk) => ({
 
 /**
  * Get entries linked to a list of entries
- * 
+ *
  * @description Due to Contentful auto-saving after the entry has been created but not before the getEntries might return incorrect response and require a retry until the linked has been created by Contentful
- * 
+ *
  */
 const getEntriesLinkedByIds = async (space, entryIds) => {
   const DELAY_IN_MILLISECONDS = 5000;
@@ -101,14 +101,13 @@ const getEntriesLinkedByIds = async (space, entryIds) => {
       return entriesRes;
     } else {
       retries++;
-      await new Promise(resolve => setTimeout(resolve, DELAY_IN_MILLISECONDS));
+      await new Promise((resolve) => setTimeout(resolve, DELAY_IN_MILLISECONDS));
     }
   }
 
   throw new Error('Failed to retrieve entries after retries');
 };
 
-
 const fetchInitialData = async (sdk, client) => {
   const { space, ids, locales } = sdk;
 

packages/ecommerce-app-base/.storybook/main.ts

@@ -7,6 +7,8 @@ const config: StorybookConfig = {
     '@storybook/addon-essentials',
     '@storybook/addon-onboarding',
     '@storybook/addon-interactions',
+    '@storybook/addon-designs',
+    '@storybook/addon-a11y',
   ],
   framework: {
     name: '@storybook/react-webpack5',

packages/ecommerce-app-base/.storybook/preview.ts → packages/ecommerce-app-base/.storybook/preview.tsx

@@ -1,7 +1,10 @@
 import type { Preview } from '@storybook/react';
+import { StoryFn } from '@storybook/react';
+import { GlobalStyles } from '@contentful/f36-components';
 
 const preview: Preview = {
   parameters: {
+    layout: 'centered',
     actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {
       matchers: {
@@ -10,6 +13,14 @@ const preview: Preview = {
       },
     },
   },
+  decorators: [
+    (Story: StoryFn) => (
+      <>
+        <GlobalStyles />
+        <Story />
+      </>
+    ),
+  ],
 };
 
 export default preview;

packages/ecommerce-app-base/README.md

@@ -45,12 +45,17 @@ setup({
       parameters: { config, currentValue },
     });
   },
-  isDisabled: () => false
+  isDisabled: () => false,
+  productCardVersion: 'v2'  
 });
 ```
 
 [Type Documentation](docs/README.md)
 
+## Components
+- [Storybook Components](https://ecommerce-app-base-components.netlify.app/) 
+
+
 ## Apps
 
 These Contentful apps use `@contentful/ecommerce-app-base`. Look at their source code to learn how they utilize this library: