@contentful/experiences-components-react 1.0.2 → 1.0.3-beta.0

package/README.md

@@ -1,20 +1,6 @@
-# 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)
+# @contentful/experiences-components-react
 
+This package provides the default structure and basic components for the [Experiences SDK](https://www.contentful.com/developers/docs/experiences/set-up-experiences-sdk/). You can use these components directly to start building your experiences, or as examples to create your own components.
 
 ## Components
 
@@ -26,79 +12,6 @@ The following components are available:
 - [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.
-
-### 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'):
+## Documentation
 
-```tsx
-{ wrapComponent: true, wrapContainerTag: 'span' }
-```
+Please refer to our [Documentation](https://www.contentful.com/developers/docs/experiences/register-custom-components/#built-in-components) to learn more about it.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/experiences-components-react",
-  "version": "1.0.2",
+  "version": "1.0.3-beta.0",
   "description": "A basic set of components to use with Studio Experiences",
   "homepage": "https://github.com/contentful/experience-builder/tree/next/packages/components#readme",
   "repository": {
@@ -74,10 +74,10 @@
     "react-dom": ">=17.0.0"
   },
   "dependencies": {
-    "@contentful/experiences-core": "^1.0.2",
+    "@contentful/experiences-core": "1.0.3-beta.0",
     "@contentful/rich-text-react-renderer": "^15.17.2",
     "postcss-import": "^15.1.0",
     "style-inject": "^0.3.0"
   },
-  "gitHead": "165fe6aaf42e2b58032c4b78ab4b238d4ebfb8de"
+  "gitHead": "fb5795ffb70c011a5802c89ecac4128f6153a2ac"
 }