TeePee Composites

What are composites

Composites are reusable elements/widgets that are interlinked with data from CMS systems (e.g. TeePee, HyGraph, etc). In this repository each composite is coupled to Ingenuity's TeePee CMS data structure.

Using a real example as reference the "GlobalFourBestSellers" composite would be capable of parsing the data format from TeePee. But inside of this composite it may then support multiple components imported via '@thg-altitude/components' to for carousels, pictures, icons.

To get the best out of a composite (and ensure it's capable of use across multiple tenants and storefronts) these are a helpful lists of do's and do not's.

Best Practices

1. Do not depend on global context (for e.g. Astro.local data).

It's common across storefronts to use Astro.locals or other global context(s) provide easy access to utils. Use of these global objects will only ensure your composite can't be reused across codebases. Utilise props not global context.

2. Do not heavily depend on components. Instead leverage slots to allow.

While it's common and an important to ensure a DRY codebase composite(s) the use of components needs to be carefully considered. Directly referencing elements (for e.g. Carousel's, Icons, ProductItems) increases the data requirements of the composite but also restrict how flexible and reusable they are across codebases.

Use <slot /> or named slots to decouple components from elements of business logic.

3. Do not depend on shared utils.

Where possible do not use shared utilities that are nuanced with a specific tenant or storefront solution. Being forced to use utils is a sign that best practice #2 isn't being followed.

Working Example

A 'GlobalFourBestSellers' is commonly made up of a carousel, carousel item and product item(s). A product item requires properties that warrant calculating price, currency and language.

Instead of modifying 'GlobalFourBestSellers' to recieve all of this information via props and feeing these into directly imported dependencies.

Moving the loop and the product items into the content of the slot you drastically increase the re-usability of the composite and the flexibility of whats possible in the storefront.