@contentful/experiences-components-react 0.0.1-alpha.10

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Contentful
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,112 @@
+# Experience Builder Components
+
+> Experience Builder is currently in a private alpha and not available publicly. If you are interested in participating in the alpha, please reach out to your Contentful account team.
+
+This folder contains the source code for the default/example components that can be used with Experience Builder. These components can be used as-is to kick start building your experiences, or used as an example for building your own components.
+
+## In this guide
+
+- [Components](#components)
+- [Getting started](#getting-started)
+  * [Installation](#installation)
+- [Styling](#styling)
+  * [Including default styles](#including-default-styles)
+  * [Adding custom styles](#adding-custom-styles)
+- [withExperienceBuilder util](#withexperiencebuilder-util)
+  * [Usage](#usage)
+
+
+## Components
+
+The following components are available:
+
+- [Button](src/components/Button/README.md)
+- [Heading](src/components/Heading/README.md)
+- [Image](src/components/Image/README.md)
+- [RichText](src/components/RichText/README.md)
+- [Text](src/components/Text/README.md)
+
+## Getting started
+
+### Installation
+
+```bash
+npm install @contentful/experiences-components-react
+```
+
+## Styling
+
+By default, the components are unstyled. This allows you to style the components to match your brand and design system. If you want a set of default styles to get started, see below.
+
+### Including default styles
+
+A set of optional, default styles are included with the components. To include them, import the `styles.css` file from the `@contentful/experiences-components-react` package:
+
+```jsx
+import '@contentful/experiences-components-react/styles.css';
+```
+
+### Adding custom styles
+
+Each component has a css class that you can use to add your own styles. The classes are named in the style of `cf-{component-name}` (ie `cf-button`).
+
+For example, to style the `Button` component, you can do the following:
+
+```css
+.cf-button {
+  /* your styles here */
+}
+```
+
+All components also support passing in custom class names via the `className` prop. This allows you to add your own class names to the component, which you can then use to style the component.
+
+## withExperienceBuilder util
+
+We provide a helper function (as a [higher-order-component](https://legacy.reactjs.org/docs/higher-order-components.html)) to make it easier to register your own custom components with Experience Builder. This function helps ensure your component has all the required props and is properly registered with Experience Builder.
+
+### Usage
+
+```jsx
+import { withExperienceBuilder } from '@/utils/withExperienceBuilder';
+import { MyComponent } from './MyComponent';
+
+export const ExperienceBuilderMyComponent = withExperienceBuilder(
+  // Your component
+  MyComponent,
+  // component registration configuration for EB
+  {
+    id: 'my-component',
+    name: 'My Component',
+    category: 'Custom',
+    variables: {
+      label: {
+        type: 'Text',
+        defaultValue: 'My Component',
+      },
+    },
+  },
+);
+```
+
+### Container wrapping
+
+By default, the `withExperienceBuilder` function will not wrap your component in a container. However, it is often useful to have your component wrapped. If the components is wrapped, all the styles generated from Experience Builder will be applied to the wrapping container instead of the component itself. This will make it so the additional styles don't interfere with your component's styles.
+
+To wrap your component, pass in the `wrapComponent` option:
+
+```jsx
+export const ExperienceBuilderMyComponent = withExperienceBuilder(
+  // Your component
+  MyComponent,
+  // component registration configuration for EB
+  { /* EB config */ },
+  // wrap the component with a container (defaults to false)
+  { wrapComponent: true }
+);
+```
+
+You can also provide the tag name the container will use (which defaults to 'div'):
+
+```tsx
+{ wrapComponent: true, wrapContainerTag: 'span' }
+```

package/dist/index.d.ts

@@ -0,0 +1,296 @@
+import { ComponentDefinition, OptimizedImageAsset, ExperienceTreeNode, ExperienceDataSource, ExperienceUnboundValues, StyleProps, ResolveDesignValueType } from '@contentful/experiences-core/types';
+import React$1, { RefObject, CSSProperties, SyntheticEvent } from 'react';
+import { EntityStore } from '@contentful/experiences-core';
+import { Document } from '@contentful/rich-text-types';
+
+interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * The URL to navigate to when the button is clicked. When provided, the button will be wrapped in an anchor tag.
+     * @default undefined
+     * @optional
+     * @example
+     * ```tsx
+     * <Button url="https://www.google.com" label="Go" />
+     * ```
+     */
+    url?: string;
+    /**
+     * The target to use when navigating to the URL (if `url` is provided).
+     * @default undefined
+     * @optional
+     * @example
+     * ```tsx
+     * <Button url="https://www.google.com" target="_blank" label="Go" />
+     * ```
+     */
+    target?: string;
+    /**
+     * When `url` is provided, this function will be called instead of navigating to the URL. This allows the developer to handle the navigation themselves.
+     * @default undefined
+     * @optional
+     * @example
+     * ```tsx
+     * <Button
+     *  url="https://www.google.com"
+     * target="_blank"
+     * onNavigate={(url, target) => {
+     * // dev can now do route via code
+     * }}
+     * label="Go"
+     * />
+     * ```
+     */
+    onNavigate?: (url: string, target?: string) => void;
+    /**
+     * The text to display in the button. If not provided, children will be used instead.
+     * @default undefined
+     * @optional
+     * @example
+     * ```tsx
+     * <Button label="Go" />
+     * ```
+     */
+    label?: string;
+    /**
+     * The children to display in the button. If label is provided, label will be used instead of this.
+     * @default null
+     * @optional
+     * @example
+     * ```tsx
+     * <Button>Go</Button>
+     * ```
+     */
+    children?: React$1.ReactNode;
+}
+declare const Button: React$1.FC<ButtonProps>;
+
+declare const ButtonComponentDefinition: ComponentDefinition;
+
+interface HeadingProps extends React$1.HTMLAttributes<HTMLHeadingElement> {
+    /**
+     * The text to display in the heading. If not provided, children will be used instead.
+     * @default undefined
+     * @optional
+     * @example
+     * ```tsx
+     * <Heading text="My Heading" />
+     * ```
+     */
+    text?: string;
+    /**
+     * The children to display in the heading. If text is provided, this will not be used.
+     * @default null
+     * @optional
+     * @example
+     * ```tsx
+     * <Heading>My Heading</Heading>
+     * ```
+     */
+    children?: React$1.ReactNode;
+    /**
+     * The type of heading to render
+     * @default h1
+     * @optional
+     * @example
+     * ```tsx
+     * <Heading type="h1">My Heading</Heading>
+     * ```
+     */
+    type?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+}
+declare const Heading: React$1.FC<HeadingProps>;
+
+declare const HeadingComponentDefinition: ComponentDefinition;
+
+interface RichTextProps extends Omit<React$1.HTMLAttributes<HTMLElement>, 'value'> {
+    /**
+     * Renders the text in a specific HTML tag.
+     * @default p
+     * @optional
+     * @example
+     * ```tsx
+     * <RichText as="span" value={document}/>
+     * ```
+     */
+    as?: 'p' | 'span' | 'div' | 'label' | 'caption' | 'small' | 'strong' | 'em';
+    /**
+     * The document to display
+     * @example
+     * ```tsx
+     * <RichText value={{
+        nodeType: BLOCKS.DOCUMENT,
+        data: {},
+        content: [
+          {
+            nodeType: BLOCKS.PARAGRAPH,
+            data: {},
+            content: [{ nodeType: 'text', value: 'abc', marks: [], data: {} }],
+          },
+        ],
+      }} />
+     * ```
+     */
+    value: Document;
+}
+declare const RichText: React$1.FC<RichTextProps>;
+
+declare const RichTextComponentDefinition: ComponentDefinition;
+
+interface TextProps extends React$1.HTMLAttributes<HTMLElement> {
+    /**
+     * The URL to navigate to when the text is clicked. When provided, the text will be wrapped in an anchor tag.
+     * @default undefined
+     * @optional
+     * @example
+     * ```tsx
+     * <Text url="https://www.google.com" label="Go">My Text</Text>
+     * ```
+     */
+    url?: string;
+    /**
+     * The target to use when navigating to the URL (if `url` is provided).
+     * @default undefined
+     * @optional
+     * @example
+     * ```tsx
+     * <Text url="https://www.google.com" target="_blank" label="Go">My Text</Text>
+     * ```
+     */
+    target?: string;
+    /**
+     * When `url` is provided, this function will be called instead of navigating to the URL. This allows the developer to handle the navigation themselves.
+     * @default undefined
+     * @optional
+     * @example
+     * ```tsx
+     * <Text
+     *   url="https://www.google.com"
+     *   target="_blank"
+     *   onNavigate={(url, target) => {
+     *     // dev can now handle routing via code
+     *   }}
+     *   label="Go">
+     *   My Text
+     * </Text>
+     * ```
+     */
+    onNavigate?: (url: string, target?: string) => void;
+    /**
+     * The text to display. If not provided, children will be used instead.
+     * @default undefined
+     * @optional
+     * @example
+     * ```tsx
+     * <Text value="My Text" />
+     * ```
+     */
+    value?: string;
+    /**
+     * The children to display in the text. If text is provided, text will be used instead of this.
+     * @default null
+     * @optional
+     * @example
+     * ```tsx
+     * <Text>My Text</Text>
+     * ```
+     */
+    children?: React$1.ReactNode;
+    /**
+     * Renders the text in a specific HTML tag.
+     * @default p
+     * @optional
+     * @example
+     * ```tsx
+     * <Text>My Text</Text>
+     * ```
+     */
+    as?: 'p' | 'span' | 'div' | 'label' | 'caption' | 'small' | 'strong' | 'em';
+}
+declare const Text: React$1.FC<TextProps>;
+
+declare const TextComponentDefinition: ComponentDefinition;
+
+interface ImageProps extends React$1.ImgHTMLAttributes<HTMLImageElement> {
+    cfImageAsset?: OptimizedImageAsset | string;
+}
+declare const Image: React$1.FC<ImageProps>;
+
+declare const ImageComponentDefinition: ComponentDefinition;
+
+type ContentfulContainerAsHyperlinkProps<EditorMode = boolean> = (EditorMode extends true ? {
+    editorMode?: EditorMode;
+    node: ExperienceTreeNode;
+    dataSource?: ExperienceDataSource;
+    unboundValues?: ExperienceUnboundValues;
+    resolveDesignValue?: any;
+    entityStore?: RefObject<EntityStore>;
+    areEntitiesFetched?: boolean;
+    renderDropzone: (node: ExperienceTreeNode, props?: Record<string, any>) => React$1.ReactNode;
+} : {
+    editorMode: EditorMode;
+}) & {
+    children?: React$1.ReactNode;
+    className?: string;
+    cfHyperlink?: StyleProps['cfHyperlink'];
+    cfOpenInNewTab?: StyleProps['cfOpenInNewTab'];
+    WrapperComponent?: React$1.ElementType;
+};
+
+declare const ContentfulContainer: React$1.FC<ContentfulContainerAsHyperlinkProps>;
+
+interface ColumnsBaseProps {
+    editorMode: boolean;
+    className?: string;
+    children?: React.ReactNode;
+}
+interface ColumnsEditorModeProps extends ColumnsBaseProps {
+    editorMode: true;
+    cfColumns: string;
+    node: ExperienceTreeNode;
+    renderDropzone: (node: ExperienceTreeNode, props?: Record<string, unknown>) => React.ReactNode;
+}
+interface ColumnsDeliveryModeProps extends ColumnsBaseProps {
+    editorMode: false;
+}
+interface SingleColumnEditorModeProps extends ColumnsBaseProps {
+    editorMode: true;
+    node: ExperienceTreeNode;
+    renderDropzone: (node: ExperienceTreeNode, props?: Record<string, unknown>) => React.ReactNode;
+    cfColumnSpan: string;
+    wrapperClassName: string;
+    ['data-ctfl-draggable-id']: string;
+    Tooltip: React.ReactNode;
+    innerRef: (element?: HTMLElement | null | undefined) => void;
+    draggableProps: Record<string, unknown>;
+    dragHandleProps: Record<string, unknown>;
+    style: CSSProperties;
+    className: string;
+    onMouseOver: (e: SyntheticEvent<Element, Event>) => void;
+    onMouseOut: (e: SyntheticEvent<Element, Event>) => void;
+    onMouseDown: (e: SyntheticEvent<Element, Event>) => void;
+    onMouseUp: (e: SyntheticEvent<Element, Event>) => void;
+    onClick: (e: SyntheticEvent<Element, Event>) => void;
+}
+interface SingleColumnDeliveryModeProps extends ColumnsBaseProps {
+    editorMode: false;
+}
+type ColumnsProps = ColumnsEditorModeProps | ColumnsDeliveryModeProps;
+type SingleColumnProps = SingleColumnEditorModeProps | SingleColumnDeliveryModeProps;
+
+declare const Columns: React$1.FC<ColumnsProps>;
+
+declare const SingleColumn: React$1.FC<SingleColumnProps>;
+
+type AssemblyProps<EditorMode = boolean> = EditorMode extends true ? {
+    children?: React$1.ReactNode;
+    className?: string;
+    cfHyperlink?: StyleProps['cfHyperlink'];
+    cfOpenInNewTab?: StyleProps['cfOpenInNewTab'];
+    editorMode?: EditorMode;
+    node: ExperienceTreeNode;
+    resolveDesignValue?: ResolveDesignValueType;
+    renderDropzone: (node: ExperienceTreeNode, props?: Record<string, any>) => React$1.ReactNode;
+} : Record<string, any>;
+declare const Assembly: React$1.FC<AssemblyProps>;
+
+export { Assembly, type AssemblyProps, Button, ButtonComponentDefinition, type ButtonProps, Columns, ContentfulContainer, Heading, HeadingComponentDefinition, type HeadingProps, Image, ImageComponentDefinition, type ImageProps, RichText, RichTextComponentDefinition, type RichTextProps, SingleColumn, Text, TextComponentDefinition, type TextProps };

package/dist/index.js

@@ -0,0 +1,609 @@
+import React, { forwardRef } from 'react';
+import styleInject from 'style-inject';
+import { documentToReactComponents } from '@contentful/rich-text-react-renderer';
+import { BLOCKS } from '@contentful/rich-text-types';
+
+const CONTENTFUL_DEFAULT_CATEGORY = 'Contentful';
+const CONTENTFUL_COMPONENTS = {
+    section: {
+        id: 'contentful-section',
+        name: 'Section',
+    },
+    container: {
+        id: 'contentful-container',
+        name: 'Container',
+    },
+    columns: {
+        id: 'contentful-columns',
+        name: 'Columns',
+    },
+    singleColumn: {
+        id: 'contentful-single-column',
+        name: 'Column',
+    },
+    button: {
+        id: 'contentful-button',
+        name: 'Button',
+    },
+    heading: {
+        id: 'contentful-heading',
+        name: 'Heading',
+    },
+    image: {
+        id: 'contentful-image',
+        name: 'Image',
+    },
+    richText: {
+        id: 'contentful-richText',
+        name: 'Rich Text',
+    },
+    text: {
+        id: 'contentful-text',
+        name: 'Text',
+    },
+};
+var PostMessageMethods;
+(function (PostMessageMethods) {
+    PostMessageMethods["REQUEST_ENTITIES"] = "REQUEST_ENTITIES";
+    PostMessageMethods["REQUESTED_ENTITIES"] = "REQUESTED_ENTITIES";
+})(PostMessageMethods || (PostMessageMethods = {}));
+
+function combineClasses(...classes) {
+    return classes
+        .filter((val) => val)
+        .map((c) => c.trim())
+        .join(' ');
+}
+
+const Button = ({ children, className, label, onClick, onNavigate, target, url, ...props }) => {
+    const classes = combineClasses('cf-button', className);
+    const handleClick = (event) => {
+        if (onNavigate && url) {
+            event.preventDefault();
+            onNavigate(url, target);
+        }
+        onClick && onClick(event);
+    };
+    const button = (React.createElement("button", { className: classes, "data-url": url, "data-target": target, onClick: handleClick, ...props }, label ? label : children));
+    return url ? (React.createElement("a", { href: url, target: target }, button)) : (button);
+};
+
+const ButtonComponentDefinition = {
+    id: CONTENTFUL_COMPONENTS.button.id,
+    name: CONTENTFUL_COMPONENTS.button.name,
+    category: CONTENTFUL_DEFAULT_CATEGORY,
+    builtInStyles: [
+        'cfMargin',
+        'cfMaxWidth',
+        'cfLetterSpacing',
+        'cfTextItalic',
+        'cfTextUnderline',
+        'cfTextBold',
+        'cfLineHeight',
+        'cfBorder',
+        'cfBorderRadius',
+    ],
+    tooltip: {
+        description: 'Drop onto the canvas to add button that can be used to trigger an action.',
+    },
+    variables: {
+        cfFontSize: {
+            displayName: 'Font Size',
+            type: 'Text',
+            group: 'style',
+            description: 'The font size of the button.',
+            defaultValue: '16px',
+        },
+        cfFontWeight: {
+            displayName: 'Font Weight',
+            type: 'Text',
+            group: 'style',
+            description: 'The font weight of the button.',
+            defaultValue: '600',
+        },
+        cfTextColor: {
+            displayName: 'Text Color',
+            type: 'Text',
+            group: 'style',
+            description: 'The text color of the button.',
+            defaultValue: 'rgba(255, 255, 255, 1)',
+        },
+        cfBackgroundColor: {
+            displayName: 'Background color',
+            type: 'Text',
+            group: 'style',
+            description: 'The background color of the button.',
+            defaultValue: 'rgba(0, 0, 0, 1)',
+        },
+        cfPadding: {
+            displayName: 'Padding',
+            type: 'Text',
+            group: 'style',
+            description: 'The padding of the button.',
+            defaultValue: '6px 12px 6px 12px',
+        },
+        cfWidth: {
+            displayName: 'Width',
+            type: 'Text',
+            group: 'style',
+            description: 'The width of the button.',
+            defaultValue: 'fit-content',
+        },
+        cfHeight: {
+            displayName: 'Height',
+            type: 'Text',
+            group: 'style',
+            description: 'The height of the button.',
+            defaultValue: 'fit-content',
+        },
+        cfTextAlign: {
+            displayName: 'Text Align',
+            type: 'Text',
+            group: 'style',
+            description: 'The text align of the button.',
+            defaultValue: 'center',
+        },
+        label: {
+            displayName: 'Label',
+            type: 'Text',
+            defaultValue: 'Button',
+        },
+        url: {
+            displayName: 'URL',
+            type: 'Text',
+            defaultValue: '/',
+        },
+        target: {
+            displayName: 'Target',
+            type: 'Text',
+            defaultValue: '',
+        },
+    },
+};
+
+var css_248z$5 = ".cf-heading {\n  white-space: pre-line;\n}\n";
+styleInject(css_248z$5);
+
+const Heading = ({ children, className, text, type = 'h1', ...props }) => {
+    const Tag = type;
+    const classes = combineClasses('cf-heading', className);
+    return (React.createElement(Tag, { className: classes, ...props }, text ? text : children));
+};
+
+const HeadingComponentDefinition = {
+    id: CONTENTFUL_COMPONENTS.heading.id,
+    name: CONTENTFUL_COMPONENTS.heading.name,
+    category: CONTENTFUL_DEFAULT_CATEGORY,
+    builtInStyles: [
+        'cfMargin',
+        'cfPadding',
+        'cfFontWeight',
+        'cfLetterSpacing',
+        'cfTextAlign',
+        'cfTextColor',
+        'cfTextTransform',
+        'cfTextItalic',
+        'cfTextUnderline',
+        'cfWidth',
+        'cfMaxWidth',
+        'cfBackgroundColor',
+        'cfBorder',
+        'cfBorderRadius',
+    ],
+    tooltip: {
+        description: 'Drop onto the canvas to add a heading.',
+    },
+    variables: {
+        // Built-in style variables with default values changed
+        cfHeight: {
+            displayName: 'Height',
+            type: 'Text',
+            group: 'style',
+            description: 'The height of the button.',
+            defaultValue: 'fit-content',
+        },
+        cfFontSize: {
+            displayName: 'Font Size',
+            type: 'Text',
+            group: 'style',
+            description: 'The font size of the heading.',
+            defaultValue: '32px',
+        },
+        cfLineHeight: {
+            displayName: 'Line Height',
+            type: 'Text',
+            group: 'style',
+            description: 'The line height of the heading.',
+            defaultValue: '48px',
+        },
+        cfTextBold: {
+            displayName: 'Bold',
+            type: 'Boolean',
+            group: 'style',
+            description: 'The text bold of the heading.',
+            defaultValue: true,
+        },
+        // Component specific variables
+        text: {
+            displayName: 'text',
+            type: 'Text',
+            description: 'The text to display in the heading.',
+            defaultValue: 'Heading',
+        },
+        type: {
+            displayName: 'Type',
+            type: 'Text',
+            defaultValue: 'h1',
+            description: 'Determines the HTML tag of the heading. Value can be h1, h2, h3, h4, h5, or h6.',
+            validations: {
+                in: [
+                    { value: 'h1', displayName: 'H1' },
+                    { value: 'h2', displayName: 'H2' },
+                    { value: 'h3', displayName: 'H3' },
+                    { value: 'h4', displayName: 'H4' },
+                    { value: 'h5', displayName: 'H5' },
+                    { value: 'h6', displayName: 'H6' },
+                ],
+            },
+        },
+    },
+};
+
+var css_248z$4 = ".cf-richtext {\n  white-space: pre-line;\n}\n";
+styleInject(css_248z$4);
+
+const RichText = ({ as = 'p', className, value, ...props }) => {
+    const classes = combineClasses('cf-richtext', className);
+    const Tag = as;
+    return documentToReactComponents(value, {
+        renderNode: {
+            [BLOCKS.PARAGRAPH]: (_node, children) => {
+                return (React.createElement(Tag, { className: classes, ...props }, children));
+            },
+        },
+    });
+};
+
+const RichTextComponentDefinition = {
+    id: CONTENTFUL_COMPONENTS.richText.id,
+    name: CONTENTFUL_COMPONENTS.richText.name,
+    category: CONTENTFUL_DEFAULT_CATEGORY,
+    builtInStyles: [
+        'cfMargin',
+        'cfPadding',
+        'cfFontWeight',
+        'cfLetterSpacing',
+        'cfTextTransform',
+        'cfMaxWidth',
+        'cfBackgroundColor',
+        'cfBorder',
+        'cfBorderRadius',
+    ],
+    tooltip: {
+        description: 'Drop onto the canvas to add text with Rich text formatting options.',
+    },
+    variables: {
+        // Built-in style variables with default values changed
+        cfLineHeight: {
+            displayName: 'Line Height',
+            type: 'Text',
+            group: 'style',
+            description: 'The line height of the heading.',
+            defaultValue: '24px',
+        },
+        cfTextAlign: {
+            displayName: 'Text Align',
+            type: 'Text',
+            group: 'style',
+            description: 'The text alignment of the heading.',
+            defaultValue: 'center',
+        },
+        cfWidth: {
+            displayName: 'Width',
+            type: 'Text',
+            group: 'style',
+            description: 'The width of the button.',
+            defaultValue: 'fit-content',
+        },
+        cfHeight: {
+            displayName: 'Height',
+            type: 'Text',
+            group: 'style',
+            description: 'The height of the button.',
+            defaultValue: 'fit-content',
+        },
+        value: {
+            displayName: 'Value',
+            description: 'The text to display.',
+            type: 'RichText',
+            defaultValue: {
+                nodeType: 'document',
+                data: {},
+                content: [
+                    {
+                        nodeType: 'paragraph',
+                        data: {},
+                        content: [
+                            {
+                                nodeType: 'text',
+                                value: 'Rich text',
+                                marks: [],
+                                data: {},
+                            },
+                        ],
+                    },
+                ],
+            },
+        },
+    },
+};
+
+var css_248z$3 = ".cf-text {\n  white-space: pre-line;\n}\n";
+styleInject(css_248z$3);
+
+const Text = ({ as = 'p', children, className, value, url, target, onNavigate, onClick, ...props }) => {
+    const handleClick = (event) => {
+        if (onNavigate && url) {
+            event.preventDefault();
+            onNavigate(url, target);
+        }
+        onClick && onClick(event);
+    };
+    const Tag = as;
+    const textAsTag = (React.createElement(Tag, { className: combineClasses('cf-text', className), onClick: handleClick, "data-url": url, ...(target ? { 'data-target': target } : {}), ...props }, value ? value : children));
+    if (!url) {
+        return textAsTag;
+    }
+    return (React.createElement("a", { className: "cf-text-link", href: url, ...(target ? { target } : {}) }, textAsTag));
+};
+
+const TextComponentDefinition = {
+    id: CONTENTFUL_COMPONENTS.text.id,
+    name: CONTENTFUL_COMPONENTS.text.name,
+    category: CONTENTFUL_DEFAULT_CATEGORY,
+    builtInStyles: [
+        'cfMargin',
+        'cfPadding',
+        'cfFontSize',
+        'cfFontWeight',
+        'cfLineHeight',
+        'cfLetterSpacing',
+        'cfTextColor',
+        'cfTextAlign',
+        'cfTextTransform',
+        'cfTextBold',
+        'cfTextItalic',
+        'cfTextUnderline',
+        'cfBackgroundColor',
+        'cfBorder',
+        'cfBorderRadius',
+        'cfWidth',
+        'cfMaxWidth',
+    ],
+    tooltip: {
+        description: 'Drop onto the canvas to add plain text.',
+    },
+    variables: {
+        cfHeight: {
+            displayName: 'Height',
+            type: 'Text',
+            group: 'style',
+            description: 'The height of the button.',
+            defaultValue: 'fit-content',
+        },
+        value: {
+            displayName: 'Value',
+            description: 'The text to display. If not provided, children will be used instead.',
+            type: 'Text',
+            defaultValue: 'Text',
+        },
+        as: {
+            displayName: 'As',
+            description: 'Renders the text in a specific HTML tag.',
+            type: 'Text',
+            defaultValue: 'p',
+            validations: {
+                in: [
+                    { value: 'p', displayName: 'p' },
+                    { value: 'span', displayName: 'span' },
+                    { value: 'div', displayName: 'div' },
+                    { value: 'label', displayName: 'label' },
+                    { value: 'caption', displayName: 'caption' },
+                    { value: 'small', displayName: 'small' },
+                    { value: 'strong', displayName: 'strong' },
+                    { value: 'em', displayName: 'em' },
+                ],
+            },
+        },
+        url: {
+            displayName: 'URL',
+            type: 'Text',
+            defaultValue: '',
+        },
+        target: {
+            displayName: 'Target',
+            type: 'Text',
+            defaultValue: '',
+        },
+    },
+};
+
+var css_248z$2 = ".cf-no-image {\n  position: relative;\n}\n\n.cf-no-image img {\n  background-color: var(--cf-color-gray100);\n  outline-offset: -2px;\n  outline: 2px solid rgba(var(--cf-color-gray400-rgb), 0.5);\n}\n\n[data-ctfl-draggable-id] .cf-no-image {\n  width: 100%;\n  height: 100%;\n}\n\n[data-ctfl-draggable-id] .cf-no-image img {\n  width: 100%;\n}\n\n.cf-no-image svg {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  height: var(--cf-text-3xl);\n  width: var(--cf-text-3xl);\n  max-height: 100%;\n  max-width: 100%;\n}\n\n.cf-no-image svg path {\n  fill: var(--cf-color-gray400);\n}\n";
+styleInject(css_248z$2);
+
+const Image = ({ className = '', src, cfImageAsset, ...props }) => {
+    if (!cfImageAsset && !src) {
+        return (React.createElement("div", { className: "cf-no-image" },
+            React.createElement("img", { className: className, src: "data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAA", ...props }),
+            React.createElement("svg", { fill: "none", viewBox: "0 0 17 16", xmlns: "http://www.w3.org/2000/svg" },
+                React.createElement("path", { fill: "#fff", d: "M13.5 2h-10a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1m-10 1h10v4.836l-1.543-1.543a1 1 0 0 0-1.414 0L3.836 13H3.5zm10 10H5.25l6-6 2.25 2.25zm-7-5.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3m0-2a.5.5 0 1 1 0 1 .5.5 0 0 1 0-1" }))));
+    }
+    if (typeof cfImageAsset === 'string') {
+        return React.createElement("img", { src: cfImageAsset, className: 'cf-image ' + className, ...props });
+    }
+    if (cfImageAsset) {
+        return (React.createElement("img", { src: cfImageAsset.url, srcSet: cfImageAsset.srcSet?.length ? cfImageAsset.srcSet?.join(', ') : undefined, sizes: cfImageAsset.sizes ? cfImageAsset.sizes : undefined, className: 'cf-image ' + className, ...props }));
+    }
+    if (src) {
+        return React.createElement("img", { src: src, className: 'cf-image ' + className, ...props });
+    }
+};
+
+const ImageComponentDefinition = {
+    id: CONTENTFUL_COMPONENTS.image.id,
+    name: CONTENTFUL_COMPONENTS.image.name,
+    category: CONTENTFUL_DEFAULT_CATEGORY,
+    builtInStyles: ['cfMargin', 'cfPadding', 'cfImageAsset', 'cfImageOptions'],
+    tooltip: {
+        description: 'Drop onto the canvas to upload an image.',
+    },
+    variables: {
+        alt: {
+            displayName: 'Alt',
+            type: 'Text',
+            description: 'Alternative text for the image',
+        },
+    },
+};
+
+var css_248z$1 = ".contentful-container {\n  position: relative;\n  display: flex;\n  box-sizing: border-box;\n  pointer-events: all;\n}\n\n.contentful-container::-webkit-scrollbar {\n  display: none; /* Safari and Chrome */\n}\n\n.cf-single-column-wrapper {\n  position: relative;\n}\n\n.cf-container-wrapper {\n  position: relative;\n  width: 100%;\n}\n\n.cf-container-label {\n  position: absolute;\n  pointer-events: none;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  overflow-x: clip;\n  font-family: var(--exp-builder-font-stack-primary);\n  font-size: 12px;\n  color: var(--exp-builder-gray400);\n  z-index: 10;\n}\n\n/* used by ContentfulSectionAsHyperlink.tsx */\n\n.contentful-container-link,\n.contentful-container-link:active,\n.contentful-container-link:visited,\n.contentful-container-link:hover,\n.contentful-container-link:read-write,\n.contentful-container-link:focus-visible {\n  color: inherit;\n  text-decoration: unset;\n  outline: unset;\n}\n";
+styleInject(css_248z$1);
+
+const Flex = forwardRef(({ id, children, onMouseEnter, onMouseUp, onMouseLeave, onMouseDown, onClick, flex, flexBasis, flexShrink, flexDirection, gap, justifyContent, justifyItems, justifySelf, alignItems, alignSelf, alignContent, order, flexWrap, flexGrow, className, cssStyles, ...props }, ref) => {
+    return (React.createElement("div", { id: id, ref: ref, style: {
+            display: 'flex',
+            flex,
+            flexBasis,
+            flexShrink,
+            flexDirection,
+            gap,
+            justifyContent,
+            justifyItems,
+            justifySelf,
+            alignItems,
+            alignSelf,
+            alignContent,
+            order,
+            flexWrap,
+            flexGrow,
+            ...cssStyles,
+        }, className: className, onMouseEnter: onMouseEnter, onMouseUp: onMouseUp, onMouseDown: onMouseDown, onMouseLeave: onMouseLeave, onClick: onClick, ...props }, children));
+});
+Flex.displayName = 'Flex';
+
+/* eslint-disable */ /* TODO: fix eslint errors */
+const ContentfulContainerAsHyperlink = (props) => {
+    const { cfHyperlink, cfOpenInNewTab, editorMode, className, children } = props;
+    if (editorMode === false) {
+        let anchorTagProps = {};
+        if (cfOpenInNewTab) {
+            anchorTagProps = {
+                target: '_blank',
+                rel: 'noopener noreferrer',
+            };
+        }
+        return (React.createElement("a", { className: combineClasses(className, 'contentful-container', 'contentful-container-link'), href: cfHyperlink, ...anchorTagProps }, children));
+    }
+    const { renderDropzone, node } = props;
+    const stopPropagationInEditorMode = (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+    };
+    return renderDropzone(node, {
+        ['data-test-id']: 'contentful-container',
+        className: combineClasses(className, 'contentful-container', 'contentful-container-link'),
+        zoneId: node.data.id,
+        WrapperComponent: 'a',
+        onClick: stopPropagationInEditorMode,
+    });
+};
+
+/* eslint-disable */
+const ContentfulContainer = (props) => {
+    const { className, editorMode, children, cfHyperlink } = props;
+    if (cfHyperlink) {
+        return React.createElement(ContentfulContainerAsHyperlink, { ...props }, children);
+    }
+    if (editorMode === false) {
+        return (React.createElement(Flex, { "data-test-id": "contentful-container", className: combineClasses(className, 'contentful-container') }, children));
+    }
+    // Extract properties that are only available in editor mode
+    const { renderDropzone, node } = props;
+    const isEmpty = !node.children.length;
+    const renderDropzoneComponent = () => {
+        return renderDropzone(node, {
+            ['data-test-id']: 'contentful-container',
+            id: 'ContentfulContainer',
+            className: combineClasses('contentful-container', className),
+            WrapperComponent: Flex,
+        });
+    };
+    // Perform ternary so that we only render the wrapper div if the container is empty
+    return isEmpty ? (React.createElement("div", { className: "cf-container-wrapper", "data-ctfl-draggable-id": node.data.id },
+        React.createElement("div", { className: "cf-container-label" }, node.data.blockId === CONTENTFUL_COMPONENTS.section.id ? 'Section' : 'Container'),
+        renderDropzoneComponent())) : (renderDropzoneComponent());
+};
+
+var css_248z = ".Columns {\n  display: flex;\n  gap: 24px;\n  grid-template-columns: repeat(12, 1fr);\n  flex-direction: column;\n  min-height: 0; /* NEW */\n  min-width: 0; /* NEW; needed for Firefox */\n}\n\n@media (min-width: 768px) {\n  .Columns {\n    display: grid;\n  }\n}\n\n.cf-single-column-wrapper {\n  position: relative;\n}\n\n.cf-single-column {\n  pointer-events: all;\n}\n\n.cf-single-column-label {\n  pointer-events: none;\n  position: absolute;\n  z-index: -1;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-family: var(--exp-builder-font-stack-primary);\n  font-size: 12px;\n  color: var(--exp-builder-gray400);\n  z-index: 100;\n}\n";
+styleInject(css_248z);
+
+const ColumnWrapper = forwardRef((props, ref) => {
+    return (React.createElement("div", { ref: ref, ...props, style: {
+            ...(props.style || {}),
+            display: 'grid',
+            gridTemplateColumns: 'repeat(12, [col-start] 1fr)',
+        } }, props.children));
+});
+ColumnWrapper.displayName = 'ColumnWrapper';
+const Columns = (props) => {
+    const { editorMode, className, children } = props;
+    if (!editorMode) {
+        return (React.createElement(ColumnWrapper, { className: combineClasses(className, 'Columns') }, children));
+    }
+    const { node, renderDropzone } = props;
+    return renderDropzone(node, {
+        ['data-test-id']: 'contentful-columns',
+        className: className,
+        WrapperComponent: ColumnWrapper,
+    });
+};
+
+const SingleColumn = (props) => {
+    const { className, editorMode, children } = props;
+    if (editorMode === false) {
+        return React.createElement(Flex, { className: className }, children);
+    }
+    const { renderDropzone, node, innerRef, Tooltip, style, dragHandleProps, draggableProps, cfColumnSpan, editorMode: edit, wrapperClassName, ...editorProps } = props;
+    const isEmpty = !node.children.length;
+    return (React.createElement("div", { ref: innerRef, ...dragHandleProps, ...draggableProps, ...editorProps, className: combineClasses(wrapperClassName, 'cf-single-column-wrapper', isEmpty ? 'cf-single-column-empty' : ''), style: {
+            ...style,
+            gridColumn: `span ${cfColumnSpan}`,
+        } },
+        Tooltip,
+        isEmpty && React.createElement("div", { className: "cf-single-column-label" }, "Column"),
+        renderDropzone(node, {
+            ['data-test-id']: 'contentful-single-column',
+            className: combineClasses('cf-single-column', className),
+            WrapperComponent: Flex,
+        })));
+};
+
+const assemblyStyle = { display: 'contents' };
+// Feel free to do any magic as regards variable definitions for assemblies
+// Or if this isn't necessary by the time we figure that part out, we can bid this part farewell
+const Assembly = (props) => {
+    if (props.editorMode) {
+        const { node } = props;
+        return props.renderDropzone(node, {
+            ['data-test-id']: 'contentful-assembly',
+            className: props.className,
+            style: assemblyStyle,
+        });
+    }
+    // Using a display contents so assembly content/children
+    // can appear as if they are direct children of the div wrapper's parent
+    return React.createElement("div", { "data-test-id": "assembly", ...props, style: assemblyStyle });
+};
+
+export { Assembly, Button, ButtonComponentDefinition, Columns, ContentfulContainer, Heading, HeadingComponentDefinition, Image, ImageComponentDefinition, RichText, RichTextComponentDefinition, SingleColumn, Text, TextComponentDefinition };
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../core/dist/constants.js","../../src/utils/combineClasses.ts","../../src/components/Button/Button.tsx","../../src/components/Button/index.ts","../../src/components/Heading/Heading.tsx","../../src/components/Heading/index.ts","../../src/components/RichText/RichText.tsx","../../src/components/RichText/index.ts","../../src/components/Text/Text.tsx","../../src/components/Text/index.ts","../../src/components/Image/Image.tsx","../../src/components/Image/index.ts","../../src/components/Layout/Flex.tsx","../../src/components/ContentfulContainer/ContentfulContainerAsHyperlink.tsx","../../src/components/ContentfulContainer/ContentfulContainer.tsx","../../src/components/Columns/Columns.tsx","../../src/components/Columns/SingleColumn.tsx","../../src/components/Assembly/Assembly.tsx"],"sourcesContent":["const SCROLL_STATES = {\n    Start: 'scrollStart',\n    IsScrolling: 'isScrolling',\n    End: 'scrollEnd',\n};\nconst OUTGOING_EVENTS = {\n    Connected: 'connected',\n    DesignTokens: 'registerDesignTokens',\n    HoveredSection: 'hoveredSection',\n    MouseMove: 'mouseMove',\n    NewHoveredElement: 'newHoveredElement',\n    ComponentSelected: 'componentSelected',\n    RegisteredComponents: 'registeredComponents',\n    RequestComponentTreeUpdate: 'requestComponentTreeUpdate',\n    ComponentDragCanceled: 'componentDragCanceled',\n    ComponentDropped: 'componentDropped',\n    ComponentMoved: 'componentMoved',\n    CanvasReload: 'canvasReload',\n    UpdateSelectedComponentCoordinates: 'updateSelectedComponentCoordinates',\n    UpdateHoveredComponentCoordinates: 'updateHoveredComponentCoordinates',\n    CanvasScroll: 'canvasScrolling',\n    CanvasError: 'canvasError',\n    ComponentMoveStarted: 'componentMoveStarted',\n    ComponentMoveEnded: 'componentMoveEnded',\n    OutsideCanvasClick: 'outsideCanvasClick',\n};\nconst INCOMING_EVENTS = {\n    RequestEditorMode: 'requestEditorMode',\n    ExperienceUpdated: 'componentTreeUpdated',\n    ComponentDraggingChanged: 'componentDraggingChanged',\n    ComponentDragCanceled: 'componentDragCanceled',\n    ComponentDragStarted: 'componentDragStarted',\n    ComponentDragEnded: 'componentDragEnded',\n    ComponentMoveEnded: 'componentMoveEnded',\n    CanvasResized: 'canvasResized',\n    SelectComponent: 'selectComponent',\n    HoverComponent: 'hoverComponent',\n    UpdatedEntity: 'updatedEntity',\n    AssembliesAdded: 'assembliesAdded',\n    AssembliesRegistered: 'assembliesRegistered',\n    InitEditor: 'initEditor',\n    MouseMove: 'mouseMove',\n};\nconst INTERNAL_EVENTS = {\n    ComponentsRegistered: 'cfComponentsRegistered',\n    VisualEditorInitialize: 'cfVisualEditorInitialize',\n};\nconst VISUAL_EDITOR_EVENTS = {\n    Ready: 'cfVisualEditorReady',\n};\nconst VISUAL_EDITOR_CONTAINER_ID = 'cf-visual-editor';\nconst CONTENTFUL_COMPONENT_CATEGORY = 'contentful-component';\nconst CONTENTFUL_DEFAULT_CATEGORY = 'Contentful';\nconst CONTENTFUL_COMPONENTS = {\n    section: {\n        id: 'contentful-section',\n        name: 'Section',\n    },\n    container: {\n        id: 'contentful-container',\n        name: 'Container',\n    },\n    columns: {\n        id: 'contentful-columns',\n        name: 'Columns',\n    },\n    singleColumn: {\n        id: 'contentful-single-column',\n        name: 'Column',\n    },\n    button: {\n        id: 'contentful-button',\n        name: 'Button',\n    },\n    heading: {\n        id: 'contentful-heading',\n        name: 'Heading',\n    },\n    image: {\n        id: 'contentful-image',\n        name: 'Image',\n    },\n    richText: {\n        id: 'contentful-richText',\n        name: 'Rich Text',\n    },\n    text: {\n        id: 'contentful-text',\n        name: 'Text',\n    },\n};\nconst ASSEMBLY_NODE_TYPE = 'assembly';\nconst ASSEMBLY_DEFAULT_CATEGORY = 'Assemblies';\nconst ASSEMBLY_BLOCK_NODE_TYPE = 'assemblyBlock';\nconst ASSEMBLY_NODE_TYPES = [ASSEMBLY_NODE_TYPE, ASSEMBLY_BLOCK_NODE_TYPE];\nconst LATEST_SCHEMA_VERSION = '2023-09-28';\nconst CF_STYLE_ATTRIBUTES = [\n    'cfHorizontalAlignment',\n    'cfVerticalAlignment',\n    'cfMargin',\n    'cfPadding',\n    'cfBackgroundColor',\n    'cfWidth',\n    'cfMaxWidth',\n    'cfHeight',\n    'cfImageAsset',\n    'cfImageOptions',\n    'cfBackgroundImageUrl',\n    'cfBackgroundImageOptions',\n    'cfFlexDirection',\n    'cfFlexWrap',\n    'cfBorder',\n    'cfBorderRadius',\n    'cfGap',\n    'cfFontSize',\n    'cfFontWeight',\n    'cfLineHeight',\n    'cfLetterSpacing',\n    'cfTextColor',\n    'cfTextAlign',\n    'cfTextTransform',\n    'cfTextBold',\n    'cfTextItalic',\n    'cfTextUnderline',\n    // For backwards compatibility\n    // we need to keep those in this constant array\n    // so that omit() in <VisualEditorBlock> and <CompositionBlock>\n    // can filter them out and not pass as props\n    'cfBackgroundImageScaling',\n    'cfBackgroundImageAlignment',\n    'cfBackgroundImageAlignmentVertical',\n    'cfBackgroundImageAlignmentHorizontal',\n];\nconst EMPTY_CONTAINER_HEIGHT = '80px';\nconst DEFAULT_IMAGE_WIDTH = '500px';\nvar PostMessageMethods;\n(function (PostMessageMethods) {\n    PostMessageMethods[\"REQUEST_ENTITIES\"] = \"REQUEST_ENTITIES\";\n    PostMessageMethods[\"REQUESTED_ENTITIES\"] = \"REQUESTED_ENTITIES\";\n})(PostMessageMethods || (PostMessageMethods = {}));\nconst SUPPORTED_IMAGE_FORMATS = ['jpg', 'png', 'webp', 'gif', 'avif'];\n\nexport { ASSEMBLY_BLOCK_NODE_TYPE, ASSEMBLY_DEFAULT_CATEGORY, ASSEMBLY_NODE_TYPE, ASSEMBLY_NODE_TYPES, CF_STYLE_ATTRIBUTES, CONTENTFUL_COMPONENTS, CONTENTFUL_COMPONENT_CATEGORY, CONTENTFUL_DEFAULT_CATEGORY, DEFAULT_IMAGE_WIDTH, EMPTY_CONTAINER_HEIGHT, INCOMING_EVENTS, INTERNAL_EVENTS, LATEST_SCHEMA_VERSION, OUTGOING_EVENTS, PostMessageMethods, SCROLL_STATES, SUPPORTED_IMAGE_FORMATS, VISUAL_EDITOR_CONTAINER_ID, VISUAL_EDITOR_EVENTS };\n//# sourceMappingURL=constants.js.map\n",null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,85 @@
+{
+  "name": "@contentful/experiences-components-react",
+  "version": "0.0.1-alpha.10",
+  "description": "A basic set of components to use with Studio Experiences",
+  "homepage": "https://github.com/contentful/experience-builder/tree/next/packages/components#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/contentful/experience-builder.git"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "style": "./styles.css",
+  "type": "module",
+  "publishConfig": {
+    "registry": "https://npm.pkg.github.com/"
+  },
+  "scripts": {
+    "clean": "rimraf dist && rimraf styles.css",
+    "predev": "npm run clean",
+    "dev": "rollup -c ./rollup.config.mjs --watch --environment DEV",
+    "prebuild": "npm run clean",
+    "build": "rollup -c ./rollup.config.mjs",
+    "lint": "eslint src --ext '.ts,.tsx,.js,.jsx' --max-warnings 0 --ignore-path ../../.eslintignore",
+    "lint:fix": "eslint src --ext '.ts,.tsx,.js,.jsx' --fix",
+    "test:component": "npx cypress run --component",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "depcruise": "depcruise src"
+  },
+  "author": "",
+  "license": "MIT",
+  "files": [
+    "readme.md",
+    "styles.css",
+    "package.json",
+    "dist/**/*.*"
+  ],
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^25.0.4",
+    "@rollup/plugin-node-resolve": "^15.2.1",
+    "@rollup/plugin-terser": "^0.4.3",
+    "@rollup/plugin-typescript": "^11.1.3",
+    "@storybook/addon-essentials": "^7.4.1",
+    "@storybook/addon-interactions": "^7.4.1",
+    "@storybook/addon-links": "^7.4.1",
+    "@storybook/addon-onboarding": "^1.0.8",
+    "@storybook/blocks": "^7.4.1",
+    "@storybook/react": "^7.4.1",
+    "@storybook/react-vite": "^7.4.1",
+    "@storybook/testing-library": "^0.2.0",
+    "@types/react": "^18.2.21",
+    "@typescript-eslint/eslint-plugin": "^7.0.2",
+    "@vitejs/plugin-react": "^4.0.4",
+    "cypress": "^13.1.0",
+    "eslint": "^8.49.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-storybook": "^0.8.0",
+    "prettier": "^3.0.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rimraf": "^5.0.1",
+    "rollup": "^4.12.0",
+    "rollup-plugin-dts": "^6.0.2",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-ts": "^3.4.5",
+    "storybook": "^7.4.1",
+    "tslib": "^2.6.2",
+    "typescript": "^5.2.2",
+    "vite": "^4.4.9",
+    "vite-plugin-svgr": "^4.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "dependencies": {
+    "@contentful/experiences-core": "0.0.1-alpha.10",
+    "@contentful/rich-text-react-renderer": "^15.17.2",
+    "postcss-import": "^15.1.0",
+    "style-inject": "^0.3.0"
+  },
+  "gitHead": "0ceb98b028d0d11f3c76c6c48e016fe8a10e9339"
+}

package/styles.css

@@ -0,0 +1,70 @@
+@import url(https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;1,400;1,600&display=swap);
+
+:root {
+  /* All sizing comments based of 16px base body font size */
+
+  /* color */
+  --cf-color-white: #fff;
+  --cf-color-black: #000;
+  --cf-color-gray100: #f7f9fa;
+  --cf-color-gray400: #aec1cc;
+  --cf-color-gray400-rgb: 174, 193, 204;
+
+  /* spacing */
+  --cf-spacing-0: 0rem; /* 0px */
+  --cf-spacing-1: 0.125rem; /* 2px */
+  --cf-spacing-2: 0.25rem; /* 4px */
+  --cf-spacing-3: 0.375rem; /* 6px */
+  --cf-spacing-4: 0.5rem; /* 8px */
+  --cf-spacing-5: 0.625rem; /* 10px */
+  --cf-spacing-6: 0.75rem; /* 12px */
+  --cf-spacing-7: 0.875rem; /* 14px */
+  --cf-spacing-8: 1rem; /* 16px */
+  --cf-spacing-9: 1.25rem; /* 20px */
+  --cf-spacing-10: 1.5rem; /* 24px */
+  --cf-spacing-11: 1.75rem; /* 28px */
+  --cf-spacing-12: 2rem; /* 32px */
+  --cf-spacing-13: 2.25rem; /* 36px */
+
+  /* font-size */
+  --cf-text-xs: 0.75rem; /* 12px */
+  --cf-text-sm: 0.875rem; /* 14px */
+  --cf-text-base: 1rem; /* 16px */
+  --cf-text-lg: 1.125rem; /* 18px */
+  --cf-text-xl: 1.25rem; /* 20px */
+  --cf-text-2xl: 1.5rem; /* 24px */
+  --cf-text-3xl: 2rem; /* 32px */
+  --cf-text-4xl: 2.75rem; /* 44px */
+
+  /* font-weight */
+  --cf-font-light: 300;
+  --cf-font-normal: 400;
+  --cf-font-medium: 500;
+  --cf-font-semibold: 600;
+  --cf-font-bold: 700;
+  --cf-font-extra-bold: 800;
+  --cf-font-black: 900;
+
+  /* border-radius */
+  --cf-border-radius-none: 0px; /* none */
+  --cf-border-radius-sm: 0.125rem; /* 2px */
+  --cf-border-radius: 0.25rem; /* 4px */
+  --cf-border-radius-md: 0.375rem; /* 6px */
+  --cf-border-radius-lg: 0.5rem; /* 8px */
+  --cf-border-radius-xl: 0.75rem; /* 12px */
+  --cf-border-radius-2xl: 1rem; /* 16px */
+  --cf-border-radius-3xl: 1.5rem; /* 24px */
+  --cf-border-radius-full: 9999px; /* full */
+
+  /* font-family */
+  --cf-font-family-sans: Archivo, Helvetica, Arial, sans-serif;
+  --cf-font-family-serif: Georgia, Cambria, Times New Roman, Times, serif;
+
+  /* max widths */
+  --cf-max-width-full: 100%;
+
+  /* component specific colors */
+  --cf-button-bg: var(--cf-color-black);
+  --cf-button-color: var(--cf-color-white);
+  --cf-text-color: var(--cf-color-black);
+}