fix: rename renderer [MONET-1325]

apps/aws-amplify/src/components/config-screen/ConfigScreen.styles.ts

@@ -24,7 +24,7 @@ export const styles = {
     height: '300px',
     backgroundColor: AWSAmplifyBrand.primaryColor,
   }),
-  additionalDataWrapper: {
+  box: {
     width: '100%',
     marginTop: '22px',
   },

packages/ecommerce-app-base/src/AdditionalData/MetaData/MetaData.stories.tsx → packages/ecommerce-app-base/src/AdditionalDataRenderer/MetaDataRenderer/MetaDataRenderer.stories.tsx

@@ -1,10 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { columns } from '../../__mocks__/products';
-import { MetaData } from './MetaData';
+import { MetaDataRenderer } from './MetaDataRenderer';
 
-const meta: Meta<typeof MetaData> = {
-  title: 'AdditionalData/MetaData',
-  component: MetaData,
+const meta: Meta<typeof MetaDataRenderer> = {
+  title: 'AdditionalData/MetaDataRenderer',
+  component: MetaDataRenderer,
   tags: ['autodocs'],
   parameters: {
     layout: 'left',
@@ -13,7 +13,7 @@ const meta: Meta<typeof MetaData> = {
 
 export default meta;
 
-type Story = StoryObj<typeof MetaData>;
+type Story = StoryObj<typeof MetaDataRenderer>;
 
 export const Default: Story = {
   args: {

packages/ecommerce-app-base/src/AdditionalData/MetaData/MetaData.tsx → packages/ecommerce-app-base/src/AdditionalDataRenderer/MetaDataRenderer/MetaDataRenderer.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 import { Box, Caption } from '@contentful/f36-components';
 import { Row } from './Row';
 import { Column } from './Column';
 import { Container } from '../Container';
 
 type RowData = {
   name: string;
-  value: string;
+  value: string | ReactNode;
 };
 
 export type ColumnData = {
@@ -19,7 +19,7 @@ export type MetaDataProps = {
   columns: Array<ColumnData>;
 };
 
-export const MetaData: FC<MetaDataProps> = ({ columns }) => {
+export const MetaDataRenderer: FC<MetaDataProps> = ({ columns }) => {
   const renderMetaRow = (row: RowData) => {
     return (
       <Box key={row.name}>

packages/ecommerce-app-base/src/AdditionalData/MetaData/index.tsx → packages/ecommerce-app-base/src/AdditionalDataRenderer/MetaDataRenderer/index.tsx

@@ -1,3 +1,3 @@
-export { MetaData } from './MetaData';
+export { MetaDataRenderer } from './MetaDataRenderer';
 export { Column } from './Column';
 export { Row } from './Row';

packages/ecommerce-app-base/src/AdditionalData/RawData/RawData.stories.tsx → packages/ecommerce-app-base/src/AdditionalDataRenderer/RawDataRenderer/RawDataRenderer.stories.tsx

@@ -1,17 +1,17 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { RawData } from './index';
+import { RawDataRenderer } from './index';
 import { decorators } from '../../__mocks__/storybook/decorators';
 
-const meta: Meta<typeof RawData> = {
-  title: 'AdditionalData/RawData',
-  component: RawData,
+const meta: Meta<typeof RawDataRenderer> = {
+  title: 'AdditionalData/RawDataRenderer',
+  component: RawDataRenderer,
   tags: ['autodocs'],
   decorators: [decorators.WithFixedWidth()],
 };
 
 export default meta;
 
-type Story = StoryObj<typeof RawData>;
+type Story = StoryObj<typeof RawDataRenderer>;
 
 export const Default: Story = {
   args: {

packages/ecommerce-app-base/src/AdditionalData/RawData/RawData.tsx → packages/ecommerce-app-base/src/AdditionalDataRenderer/RawDataRenderer/RawDataRenderer.tsx

@@ -6,7 +6,7 @@ import { JSONObject } from '../../types';
 
 type Props = { value: JSONObject };
 
-export const RawData: FC<Props> = ({ value }) => {
+export const RawDataRenderer: FC<Props> = ({ value }) => {
   return (
     <Flex alignItems="flex-start" fullWidth={true} justifyContent="space-between">
       <pre

packages/ecommerce-app-base/src/AdditionalDataRenderer/RawDataRenderer/index.tsx

@@ -0,0 +1 @@
+export { RawDataRenderer } from './RawDataRenderer';

packages/ecommerce-app-base/src/AdditionalDataRenderer/index.tsx

@@ -0,0 +1,2 @@
+export { RawDataRenderer } from './RawDataRenderer';
+export { MetaDataRenderer } from './MetaDataRenderer';

packages/ecommerce-app-base/src/Editor/SortableList.stories.tsx

@@ -1,7 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { productsList } from '../__mocks__';
 import { SortableList } from './SortableList';
-import { GlobalStyles } from '@contentful/f36-components';
 import { integration } from '../__mocks__/storybook/integration';
 import { IntegrationProvider } from './IntegrationContext';
 import { Integration } from '../types';

packages/ecommerce-app-base/src/ProductCard/ProductCard/ProductCard.stories.tsx

@@ -4,8 +4,9 @@ import { DragHandle } from '@contentful/f36-components';
 import { products, productsList } from '../../__mocks__';
 import { decorators } from '../../__mocks__/storybook/decorators';
 import { columns } from '../../__mocks__/products';
-import { MetaData, RawData } from '../../AdditionalData';
+import { MetaDataRenderer, RawDataRenderer } from '../../AdditionalDataRenderer';
 import { Product } from '../../types';
+import * as React from 'react';
 import { ComponentProps } from 'react';
 
 const CARD_HEADER = 'Shopify Product';
@@ -101,17 +102,17 @@ export const Loading: Story = {
   },
 };
 
-type AdditionalDataType = ComponentProps<typeof MetaData>['columns'];
+type AdditionalDataType = ComponentProps<typeof MetaDataRenderer>['columns'];
 
-export const RawDataRenderer: Story = {
+export const RawData_Renderer: Story = {
   args: {},
   parameters: {
     ...designParams,
   },
   decorators: [
     decorators.WithIntegrationProvider<AdditionalDataType>({
       additionalDataRenderer: ({ product }: { product: Product<AdditionalDataType> }) => {
-        return <RawData value={{ columns: product.additionalData }} />;
+        return <RawDataRenderer value={{ columns: product.additionalData }} />;
       },
     }),
   ],
@@ -128,15 +129,15 @@ export const RawDataRenderer: Story = {
   },
 };
 
-export const MetaDataRenderer: Story = {
+export const MetaData_Renderer: Story = {
   args: {},
   parameters: {
     ...designParams,
   },
   decorators: [
     decorators.WithIntegrationProvider<AdditionalDataType>({
       additionalDataRenderer: ({ product }: { product: Product<AdditionalDataType> }) => {
-        return <MetaData columns={product.additionalData} />;
+        return <MetaDataRenderer columns={product.additionalData} />;
       },
     }),
   ],

packages/ecommerce-app-base/src/ProductCard/ProductCard/ProductCard.tsx

@@ -5,7 +5,6 @@ import { ExternalResource, ExternalResourceError, ProductCardType, RenderDragFn
 import ProductCardHeader from '../ProductCardHeader/ProductCardHeader';
 import ProductCardBody from '../ProductCardBody/ProductCardBody';
 import { useIntegration } from '../../Editor';
-import { RawData } from '../../AdditionalData';
 
 import { css } from 'emotion';
 import tokens from '@contentful/f36-tokens';

packages/ecommerce-app-base/src/SkuPicker/SkuPicker.stories.tsx

@@ -5,7 +5,6 @@ import logo from '../__mocks__/logo.svg';
 import { SkuPicker } from './SkuPicker';
 import { ProductsFn } from '../types';
 import { sdk } from '../__mocks__/storybook/sdk';
-import { GlobalStyles } from '@contentful/f36-components';
 import { productsList } from '../__mocks__';
 
 const meta: Meta<typeof SkuPicker> = {

packages/ecommerce-app-base/src/index.tsx

@@ -53,5 +53,5 @@ export function setup(integration: Integration) {
 
 // we should not export everything here
 export * from './types';
-export * from './AdditionalData';
+export * from './AdditionalDataRenderer';
 export { renderSkuPicker } from './SkuPicker/renderSkuPicker';

packages/ecommerce-app-base/src/types/product.ts

@@ -1,6 +1,6 @@
 // Internal - provider agnostic shape
 
-export type AdditionalDataDefaultType = any;
+export type AdditionalDataDefaultType = unknown;
 
 export type Product<AdditionalData = AdditionalDataDefaultType> = {
   sku: string;