feat: add product card [MONET-1338]

[marcolink]

Purpose

Introduce a new design for the product card.

Approach

To not enforce this change from the start, we allow consumers to opt-in to the new version of the ProductCard.
Alternatively, we could release with a major version bump.

As foundation for the new ProductCard, the same component has been copied over from the ecommerce app, and changed to our needs.

We will also allow to render additional data (provider specific) from the consumer directly, by implementing an additionalDataRenderer Function on the Integration object.

We ship with two predefined renderer for additional data:

• RawDataRenderer renders any object as JSON string
• MetaDataRenderer renders a grey box with columns and data items

Testing steps

Since there is currently no consumer for this, but we build a new storybook instance on every build, a link can be found in the PR comments.

The screenshots are just meant to be examples. design is still changing - ideally, we deploy a PR based storybook instance on every push, to allow faster validations of changes.

How it works:

import {Integration, MetaDataRenderer, Product, setup} from '@contentful/ecommerce-app-base'

type CustomProduct = Product  & {
    productStatus: 'available' | 'out-of-stock'
}

const integration: Integration<CustomProduct> = {
    // the normal configuration here ...

    // opt-in to the new product card
    productCardVersion: 'v2',

    // implement your own renderer for additional data
    additionalDataRenderer: ({ product }) => {
        return <MetaDataRenderer columns={[{
                title: 'Additional product info',
                items: [ {
                    name: 'Status',
                    value: product.productStatus
                    }
                ]
            }
        ]} />
    }
}

// setup the app
setup(integration)

[lilbitner]

Just some minor comments after reviewing the code! Looking great. For some odd reason when I spin up Storybook locally, it is only showing a handful of the components that you added (missing ProductCard etc). This could absolutely be a 'me' issue but wondering if I am missing a step (pulling down branch, install, and npm run storybook).

[marcolink]

Just some minor comments after reviewing the code! Looking great. For some odd reason when I spin up Storybook locally, it is only showing a handful of the components that you added (missing ProductCard etc). This could absolutely be a 'me' issue but wondering if I am missing a step (pulling down branch, install, and npm run storybook).

Thanks for your review 🙏
Did you try to delete your node_modules folders (git clean -dfx) ? This is what worked for me.

[netlify]

✅ Deploy Preview for ecommerce-app-base-components ready!

Name	Link
🔨 Latest commit	f5a4522
🔍 Latest deploy log	https://app.netlify.com/sites/ecommerce-app-base-components/deploys/64eeee1683853c0008d2124e
😎 Deploy Preview	https://deploy-preview-4534--ecommerce-app-base-components.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[lilbitner]

This is looking great! Was able to look at everything in Storybook locally. Thank you for setting that up, as it makes for such easy visual and functional validation. I had a few minor comments and one more general question:

1. What is the outlook on deprecating the v1 of the productCard? Are we looking to measure the success of v2 somehow and then deprecate the old one eventually? Just want to make sure we document this process if this falls to us to address eventually!
2. Will there be documentation introduced within this package or the README to guide the user of the package for how to use v2 of the components?

[lilbitner]

is there a specific reason that this test is skipped?

[anho]

Great stuff, some minor comments+questions.

[anho]

Suggested change

	export type ProductsFn = (
	export type FetchProductsFn = (

[anho]

Does it make sense to make this generic like this:

type FetchFnResponse<I> = {
  pagination: Pagination
  items: I[]
}

[anho]

To make this more expressive this should include the a11y label besides the role.

[anho]

Suggested change

	export type ProductsFn<P extends Product = Product> = (
	export type FetchProductsFn<P extends Product = Product> = (

[anho]

Suggested change

	type ProductsFnResponse<P extends Product = Product> = {
	pagination: Pagination;
	products: P[];
	};
	type FetchFnResponse<Item = unknown> = {
	pagination: Pagination;
	items: Item[];
	};

[lilbitner]

Looks really great Marco! Thanks for putting so much thought and detail into this work, it really shows ✨ . Approving because code and local storybook looks awesome, but still curious about the following next-steps:

What is the outlook on deprecating the v1 of the productCard? Are we looking to measure the success of v2 somehow and then deprecate the old one eventually? Just want to make sure we document this process if this falls to us to address eventually!
Will there be documentation introduced within this package or the README to guide the user of the package for how to use v2 of the components?

Thanks in advance for final clarifications!

[marcolink]

Looks really great Marco! Thanks for putting so much thought and detail into this work, it really shows ✨ . Approving because code and local storybook looks awesome, but still curious about the following next-steps:

What is the outlook on deprecating the v1 of the productCard? Are we looking to measure the success of v2 somehow and then deprecate the old one eventually? Just want to make sure we document this process if this falls to us to address eventually! Will there be documentation introduced within this package or the README to guide the user of the package for how to use v2 of the components?

Thanks in advance for final clarifications!

@lilbitner To have at least some visibility of the API changes, I have re-generated the local docs, and added a link to the storybook instance to the readme. For all other questions, we can use the doc I shared earlier with you :)