@contentful/experiences-sdk-react 0.0.1-alpha.2

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,115 @@
+# @contentful/experiences-sdk-react
+
+Experience builder SDK by [Contentful](https://www.contentful.com/).
+
+## Documentation
+
+Please find more information about this sdk [on our Wiki page](https://github.com/contentful/experience-builder/wiki)
+
+## Installation
+
+```
+npm install @contentful/experiences-sdk-react
+```
+
+## Example Component:
+
+```tsx
+function MyButton({ buttonTitle, buttonUrl, ...props }) {
+  // WARNING:
+  //  - you must spread the props as last argument to enable canvas interactions and proper rendering on canvas
+  //  - be sure to ensure that onClick handlers are above the {...props} spreading so that they are stubbed
+  //    during EDITOR mode
+  return (
+    <button onClick={() => (window.location.href = buttonUrl)} {...props}>
+      {buttonTitle}
+    </button>
+  );
+}
+```
+
+## Setup example
+
+Please find more setup examples [on a dedicated Wiki page](https://github.com/contentful/experience-builder/wiki/Setup-examples)
+
+```tsx
+import {
+  defineComponents,
+  defineDesignTokens,
+  ExperienceRoot,
+  useFetchBySlug,
+} from '@contentful/experiences-sdk-react';
+
+import { createClient } from 'contentful';
+
+// component example can be found at the top of this document
+import { MyButton } from './components/MyButton';
+
+const client = createClient({
+  space: 'YOUR_SPACE_ID',
+  environment: 'YOUR_ENVIRONMENT_ID',
+  host: 'preview.contentful.com', // Supported values: 'preview.contentful.com' or 'cdn.contentful.com',
+  accessToken: 'YOUR_PREVIEW_OR_DELIVERY_TOKEN', // needs to be preview token if host = 'preview.contentful.com' and delivery token if 'cdn.contentful.com'
+});
+
+// 1. Define components outside of React
+defineComponents([
+  {
+    component: MyButton, // example component defined above in this file
+    definition: {
+      id: 'my-button',
+      name: 'MyButton',
+      variables: {
+        buttonTitle: { type: 'Text', defaultValue: 'Click me' },
+        buttonUrl: {
+          type: 'Text',
+          defaultValue: 'https://www.contentful.com/',
+        },
+      },
+    },
+  },
+]);
+
+// 2. Define design tokens (optional)
+defineDesignTokens({
+  spacing: { XS: '4px', S: '16px', M: '32px', L: '64px', XL: '128px' },
+  color: { Slate: '#94a3b8', Azure: 'azure', Orange: '#fdba74' },
+});
+
+const Home = () => {
+
+  // You could pull these values from your router, state, etc...
+  const localeCode = 'en-US';  // the initial locale to use
+  const slug = 'homePage'; // the slug of the experience to fetch
+  const mode = 'delivery'; // 'delivery' or 'preview'
+  const experienceTypeId = 'layout'; // the content id of the experience to fetch
+
+  // 3. Fetch the experience
+  const { experience, error, isLoading } = useFetchBySlug({
+    client,
+    slug,
+    mode,
+    experienceTypeId,
+    localeCode,
+  });
+
+  // 4. Handle loading state
+  if(isLoading) {
+    return <div>Loading...</div>
+  }
+
+  // 5. Handle errors
+  if (error) {
+    return <div>{error.message}</div>;
+  }
+
+  // 6. Render the experience
+  return (
+    <ExperienceRoot
+      experience={experience}
+      // The locale that will appear on the website first
+      locale={locale}
+    />
+  );
+};
+```

package/dist/VisualEditorInjectScript-DPer6DO3.js

@@ -0,0 +1,38 @@
+import { jsx } from 'react/jsx-runtime';
+import { useEffect } from 'react';
+import { VISUAL_EDITOR_CONTAINER_ID } from '@contentful/experiences-core/constants';
+
+/**
+ * The version can be any semver version or dist tag
+ * Examples: @latest, @dev, @pre, @0.0.1-pre-20231213T103332.0
+ *
+ * If the version is empty, unpkg will redirect to the latest version of the package
+ */
+const version = '@0.0.1-pre-20231213T210727.0';
+/**
+ * CDN URL for the visual editor script
+ *
+ * This can be changed to a local file path for development
+ *
+ * TODO: Reconsider unpkg
+ */
+const scriptUrl = `https://unpkg.com/@contentful/experience-builder-visual-editor${version}/dist/renderApp.js`;
+/**
+ * This component injects the visual editor script into the page
+ */
+function VisualEditorInjectScript() {
+    useEffect(() => {
+        const script = document.createElement('script');
+        script.type = 'module';
+        script.src = scriptUrl;
+        script.async = true;
+        document.body.appendChild(script);
+        return () => {
+            document.body.removeChild(script);
+        };
+    }, []);
+    return jsx("div", { id: VISUAL_EDITOR_CONTAINER_ID });
+}
+
+export { VisualEditorInjectScript as default };
+//# sourceMappingURL=VisualEditorInjectScript-DPer6DO3.js.map

package/dist/VisualEditorInjectScript-DPer6DO3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VisualEditorInjectScript-DPer6DO3.js","sources":["../../src/blocks/editor/VisualEditorInjectScript.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { VISUAL_EDITOR_CONTAINER_ID } from '@contentful/experiences-core/constants';\n\n/**\n * The version can be any semver version or dist tag\n * Examples: @latest, @dev, @pre, @0.0.1-pre-20231213T103332.0\n *\n * If the version is empty, unpkg will redirect to the latest version of the package\n */\nconst version = '@0.0.1-pre-20231213T210727.0';\n\n/**\n * CDN URL for the visual editor script\n *\n * This can be changed to a local file path for development\n *\n * TODO: Reconsider unpkg\n */\nconst scriptUrl = `https://unpkg.com/@contentful/experience-builder-visual-editor${version}/dist/renderApp.js`;\n\n/**\n * This component injects the visual editor script into the page\n */\nexport default function VisualEditorInjectScript() {\n  useEffect(() => {\n    const script = document.createElement('script');\n    script.type = 'module';\n    script.src = scriptUrl;\n    script.async = true;\n\n    document.body.appendChild(script);\n    return () => {\n      document.body.removeChild(script);\n    };\n  }, []);\n\n  return <div id={VISUAL_EDITOR_CONTAINER_ID} />;\n}\n"],"names":["_jsx"],"mappings":";;;;AAGA;;;;;AAKG;AACH,MAAM,OAAO,GAAG,8BAA8B,CAAC;AAE/C;;;;;;AAMG;AACH,MAAM,SAAS,GAAG,CAAiE,8DAAA,EAAA,OAAO,oBAAoB,CAAC;AAE/G;;AAEG;AACW,SAAU,wBAAwB,GAAA;IAC9C,SAAS,CAAC,MAAK;QACb,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;AAChD,QAAA,MAAM,CAAC,IAAI,GAAG,QAAQ,CAAC;AACvB,QAAA,MAAM,CAAC,GAAG,GAAG,SAAS,CAAC;AACvB,QAAA,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC;AAEpB,QAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;AAClC,QAAA,OAAO,MAAK;AACV,YAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;AACpC,SAAC,CAAC;KACH,EAAE,EAAE,CAAC,CAAC;AAEP,IAAA,OAAOA,GAAK,CAAA,KAAA,EAAA,EAAA,EAAE,EAAE,0BAA0B,GAAI,CAAC;AACjD;;;;"}

package/dist/VisualEditorLoader-CY2fhqS5.js

@@ -0,0 +1,28 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { VisualEditorMode } from '@contentful/experiences-core';
+
+const VisualEditorLoader = ({ visualEditorMode }) => {
+    const [VisualEditor, setVisualEditor] = useState(null);
+    useEffect(() => {
+        // Dynamically import the visual editor based on the configured mode
+        switch (visualEditorMode) {
+            case VisualEditorMode.InjectScript:
+                import('./VisualEditorInjectScript-DPer6DO3.js').then((module) => {
+                    setVisualEditor(() => module.default);
+                });
+                break;
+            // VisualEditorMode.LazyLoad:
+            default:
+                import('@contentful/experiences-visual-editor-react').then((module) => {
+                    setVisualEditor(() => module.default);
+                });
+        }
+    }, [visualEditorMode]);
+    if (!VisualEditor)
+        return null;
+    return jsx(VisualEditor, {});
+};
+
+export { VisualEditorLoader, VisualEditorLoader as default };
+//# sourceMappingURL=VisualEditorLoader-CY2fhqS5.js.map

package/dist/VisualEditorLoader-CY2fhqS5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VisualEditorLoader-CY2fhqS5.js","sources":["../../src/blocks/editor/VisualEditorLoader.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { VisualEditorMode } from '@contentful/experiences-core';\n\ntype VisualEditorLoaderProps = {\n  visualEditorMode: VisualEditorMode;\n};\n\nexport const VisualEditorLoader: React.FC<VisualEditorLoaderProps> = ({ visualEditorMode }) => {\n  const [VisualEditor, setVisualEditor] = useState<React.ComponentType | null>(null);\n\n  useEffect(() => {\n    // Dynamically import the visual editor based on the configured mode\n    switch (visualEditorMode) {\n      case VisualEditorMode.InjectScript:\n        import('./VisualEditorInjectScript').then((module) => {\n          setVisualEditor(() => module.default);\n        });\n        break;\n\n      // VisualEditorMode.LazyLoad:\n      default:\n        import('@contentful/experiences-visual-editor-react').then((module) => {\n          setVisualEditor(() => module.default);\n        });\n    }\n  }, [visualEditorMode]);\n\n  if (!VisualEditor) return null;\n\n  return <VisualEditor />;\n};\n\nexport default VisualEditorLoader;\n"],"names":["_jsx"],"mappings":";;;;MAOa,kBAAkB,GAAsC,CAAC,EAAE,gBAAgB,EAAE,KAAI;IAC5F,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAA6B,IAAI,CAAC,CAAC;IAEnF,SAAS,CAAC,MAAK;;QAEb,QAAQ,gBAAgB;YACtB,KAAK,gBAAgB,CAAC,YAAY;gBAChC,OAAO,wCAA4B,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,KAAI;oBACnD,eAAe,CAAC,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC;AACxC,iBAAC,CAAC,CAAC;gBACH,MAAM;;AAGR,YAAA;gBACE,OAAO,6CAA6C,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,KAAI;oBACpE,eAAe,CAAC,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC;AACxC,iBAAC,CAAC,CAAC;SACN;AACH,KAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;AAEvB,IAAA,IAAI,CAAC,YAAY;AAAE,QAAA,OAAO,IAAI,CAAC;IAE/B,OAAOA,GAAA,CAAC,YAAY,EAAA,EAAA,CAAG,CAAC;AAC1B;;;;"}

package/dist/index.d.ts

@@ -0,0 +1,122 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { EntityStore, VisualEditorMode } from '@contentful/experiences-core';
+export { EntityStore, VisualEditorMode, calculateNodeDefaultHeight, checkIsAssembly, checkIsAssemblyEntry, checkIsAssemblyNode, createExperience, defineDesignTokens, fetchById, fetchBySlug, supportedModes } from '@contentful/experiences-core';
+import * as _contentful_experiences_core_types from '@contentful/experiences-core/types';
+import { Experience, DeprecatedExperience, ExternalSDKMode, ComponentRegistration, ComponentRegistrationOptions } from '@contentful/experiences-core/types';
+export { ComponentDefinition, ExternalSDKMode, InternalSDKMode } from '@contentful/experiences-core/types';
+import { ContentfulClientApi } from 'contentful';
+import * as _contentful_experiences_core_dist_entity_EntityStore from '@contentful/experiences-core/dist/entity/EntityStore';
+export { ASSEMBLY_BLOCK_NODE_TYPE, ASSEMBLY_NODE_TYPE, ASSEMBLY_NODE_TYPES, CF_STYLE_ATTRIBUTES, CONTENTFUL_COMPONENTS, CONTENTFUL_COMPONENT_CATEGORY, CONTENTFUL_CONTAINER_ID, CONTENTFUL_SECTION_ID, DESIGN_COMPONENT_BLOCK_NODE_TYPE, DESIGN_COMPONENT_NODE_TYPE, DESIGN_COMPONENT_NODE_TYPES, INCOMING_EVENTS, LATEST_SCHEMA_VERSION, OUTGOING_EVENTS, SCROLL_STATES } from '@contentful/experiences-core/constants';
+
+type ExperienceRootProps = {
+    experience?: Experience<EntityStore> | DeprecatedExperience;
+    locale: string;
+    /**
+     * @deprecated
+     */
+    slug?: string;
+    visualEditorMode?: VisualEditorMode;
+};
+declare const ExperienceRoot: ({ locale, experience, slug, visualEditorMode, }: ExperienceRootProps) => react_jsx_runtime.JSX.Element | null;
+
+type UseExperienceBuilderProps = {
+    /**
+     * Id of the content type of the target experience
+     */
+    experienceTypeId: string;
+    /**
+     * Instance of a Delivery or Preview client from "contentful" package
+     */
+    client: ContentfulClientApi<undefined>;
+    /**
+     *  Mode defines the behaviour of the sdk.
+     * - `preview` - fetching and rendering draft data. Will automatically switch to `editor` mode if open from contentful web app.
+     * - `delivery` - fetching and rendering of published data. Can not be switched to `editor` mode. */
+    mode?: ExternalSDKMode;
+};
+/**
+ * @deprecated This hook is deprecated. Use fetchBySlug or fetchById instead
+ */
+declare const useExperienceBuilder: ({ experienceTypeId, client, mode, }: UseExperienceBuilderProps) => {
+    /**
+     * @deprecated please fetch the experience using `useFetchExperience` hook or fetch the data manually using `fetchers` or `client` and create experience with `createExperience` function
+     *
+     * @example
+     *
+     * import { useFetchExperience } from '@contentful/experiences-sdk-react'
+     *
+     * const { fetchBySlug, fetchById, experience, isFetching } = useFetchExperience({ client, mode })
+     */
+    experience: DeprecatedExperience;
+    /**
+     * @deprecated please import the function from the library
+     *
+     * @example
+     *
+     * import { defineComponents } from '@contentful/experiences-sdk-react'
+     */
+    defineComponents: (componentRegistrations: _contentful_experiences_core_types.ComponentRegistration[], options?: _contentful_experiences_core_types.ComponentRegistrationOptions | undefined) => void;
+};
+
+type useClientsideExperienceFetchersProps = {
+    /** @deprecated mode no longer required */
+    mode?: ExternalSDKMode;
+    client: ContentfulClientApi<undefined>;
+};
+/**
+ * @deprecated please use `useFetchBySlug` or `useFetchById` hooks instead
+ */
+declare const useFetchExperience: ({ client }: useClientsideExperienceFetchersProps) => {
+    fetchBySlug: ({ experienceTypeId, slug, localeCode, }: {
+        experienceTypeId: string;
+        slug: string;
+        localeCode: string;
+    }) => Promise<Experience<EntityStore> | undefined>;
+    fetchById: ({ experienceTypeId, id, localeCode, }: {
+        experienceTypeId: string;
+        id: string;
+        localeCode: string;
+    }) => Promise<Experience<EntityStore> | undefined>;
+    error: Error | undefined;
+    experience: Experience<EntityStore> | undefined;
+    isFetching: boolean;
+};
+
+type UseFetchByIdArgs = {
+    /** @deprecated mode no longer used */
+    mode?: ExternalSDKMode;
+    client: ContentfulClientApi<undefined>;
+    id: string;
+    experienceTypeId: string;
+    localeCode: string;
+};
+declare const useFetchById: ({ id, localeCode, client, experienceTypeId }: UseFetchByIdArgs) => {
+    error: Error | undefined;
+    experience: _contentful_experiences_core_types.Experience<_contentful_experiences_core_dist_entity_EntityStore.EntityStore> | undefined;
+    isLoading: boolean;
+    isEditorMode: boolean;
+};
+
+type UseFetchBySlugArgs = {
+    /** @deprecated mode no longer needed */
+    mode?: ExternalSDKMode;
+    client: ContentfulClientApi<undefined>;
+    slug: string;
+    experienceTypeId: string;
+    localeCode: string;
+};
+declare const useFetchBySlug: ({ slug, localeCode, client, experienceTypeId, }: UseFetchBySlugArgs) => {
+    error: Error | undefined;
+    experience: _contentful_experiences_core_types.Experience<_contentful_experiences_core_dist_entity_EntityStore.EntityStore> | undefined;
+    isLoading: boolean;
+    isEditorMode: boolean;
+};
+
+/**
+ * Registers multiple components and their component definitions at once
+ * @param componentRegistrations - ComponentRegistration[]
+ * @returns void
+ */
+declare const defineComponents: (componentRegistrations: ComponentRegistration[], options?: ComponentRegistrationOptions) => void;
+
+export { ExperienceRoot, defineComponents, useExperienceBuilder, useFetchById, useFetchBySlug, useFetchExperience };