@sitecore-content-sdk/react 0.1.0-beta.1

package/types/components/PlaceholderMetadata.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+import { ComponentRendering } from '@sitecore-content-sdk/core/layout';
+/**
+ *  Props containing the component data to render.
+ */
+export interface PlaceholderMetadataProps {
+    rendering: ComponentRendering;
+    placeholderName?: string;
+    children?: ReactNode;
+}
+export type CodeBlockAttributes = {
+    type: string;
+    chrometype: string;
+    className: string;
+    kind: string;
+    id?: string;
+};
+/**
+ * A React component to generate metadata blocks for a placeholder or rendering.
+ * It utilizes dynamic attributes based on whether the component acts as a placeholder
+ * or as a rendering to properly render the surrounding code blocks.
+ * @param {object} props The properties passed to the component.
+ * @param {ComponentRendering} props.rendering The rendering data.
+ * @param {string} [props.placeholderName] The name of the placeholder.
+ * @param {JSX.Element} props.children The child components or elements to be wrapped by the metadata code blocks.
+ * @returns {JSX.Element} A React fragment containing open and close code blocks surrounding the children elements.
+ */
+export declare const PlaceholderMetadata: ({ rendering, placeholderName, children, }: PlaceholderMetadataProps) => JSX.Element;

package/types/components/RichText.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { EditableFieldProps } from './sharedTypes';
+import { FieldMetadata } from '@sitecore-content-sdk/core/layout';
+export interface RichTextField extends FieldMetadata {
+    value?: string;
+}
+export interface RichTextProps extends EditableFieldProps {
+    [htmlAttributes: string]: unknown;
+    /** The rich text field data. */
+    field?: RichTextField;
+    /**
+     * The HTML element that will wrap the contents of the field.
+     * @default <div />
+     */
+    tag?: string;
+}
+export declare const RichText: React.FC<RichTextProps>;
+export declare const RichTextPropTypes: {
+    field: PropTypes.Requireable<PropTypes.InferProps<{
+        value: PropTypes.Requireable<string>;
+        metadata: PropTypes.Requireable<{
+            [x: string]: any;
+        }>;
+    }>>;
+    tag: PropTypes.Requireable<string>;
+    editable: PropTypes.Requireable<boolean>;
+    emptyFieldEditingComponent: PropTypes.Requireable<NonNullable<React.ComponentClass<unknown, any> | React.FC<unknown>>>;
+};

package/types/components/SitecoreContext.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ComponentFactory } from './sharedTypes';
+import { LayoutServiceContext, LayoutServiceData, RouteData } from '../index';
+export interface SitecoreContextProps {
+    componentFactory: ComponentFactory;
+    layoutData?: LayoutServiceData;
+    children: React.ReactNode;
+}
+export interface SitecoreContextState {
+    setContext: (value: SitecoreContextValue | LayoutServiceData) => void;
+    context: SitecoreContextValue;
+}
+export declare const SitecoreContextReactContext: React.Context<SitecoreContextState>;
+export declare const ComponentFactoryReactContext: React.Context<ComponentFactory>;
+export type SitecoreContextValue = LayoutServiceContext & {
+    itemId?: string;
+    route?: RouteData;
+};
+export declare class SitecoreContext extends React.Component<SitecoreContextProps, SitecoreContextState> {
+    static propTypes: {
+        children: PropTypes.Validator<any>;
+        componentFactory: PropTypes.Requireable<(...args: any[]) => any>;
+        layoutData: PropTypes.Requireable<PropTypes.InferProps<{
+            sitecore: PropTypes.Requireable<PropTypes.InferProps<{
+                context: PropTypes.Requireable<any>;
+                route: PropTypes.Requireable<any>;
+            }>>;
+        }>>;
+    };
+    static displayName: string;
+    constructor(props: SitecoreContextProps);
+    constructContext(layoutData?: LayoutServiceData): SitecoreContextValue;
+    componentDidUpdate(prevProps: SitecoreContextProps): void;
+    /**
+     * Update context state. Value can be @type {LayoutServiceData} which will be automatically transformed
+     * or you can provide exact @type {SitecoreContextValue}
+     * @param {SitecoreContextValue | LayoutServiceData} value New context value
+     */
+    setContext: (value: SitecoreContextValue | LayoutServiceData) => void;
+    render(): React.JSX.Element;
+}

package/types/components/Text.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { EditableFieldProps } from './sharedTypes';
+import { FieldMetadata } from '@sitecore-content-sdk/core/layout';
+export interface TextField extends FieldMetadata {
+    value?: string | number;
+}
+export interface TextProps extends EditableFieldProps {
+    [htmlAttributes: string]: unknown;
+    /** The text field data. */
+    field?: TextField;
+    /**
+     * The HTML element that will wrap the contents of the field.
+     */
+    tag?: string;
+    /**
+     * If false, HTML-encoding of the field value is disabled and the value is rendered as-is.
+     */
+    encode?: boolean;
+}
+export declare const Text: React.FC<TextProps>;

package/types/components/sharedTypes.d.ts

@@ -0,0 +1,28 @@
+import { ComponentType } from 'react';
+/**
+ * @param {string} componentName component to be imported from the component factory
+ * @param {string?} exportName component to be imported in case you export multiple components from the same file
+ */
+export type ComponentFactory = (componentName: string, exportName?: string) => JssComponentType | null;
+/**
+ * Component type returned from component builder / factory
+ */
+export type JssComponentType = ComponentType & {
+    render?: {
+        [key: string]: unknown;
+    };
+};
+/**
+ * Shared editing field props
+ */
+export interface EditableFieldProps {
+    /**
+     * Can be used to explicitly disable inline editing.
+     * @default true
+     */
+    editable?: boolean;
+    /**
+     * Custom element to render in Pages in edit mode if field value is empty
+     */
+    emptyFieldEditingComponent?: React.ComponentClass<unknown> | React.FC<unknown>;
+}

package/types/enhancers/withComponentFactory.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ComponentFactory } from '../components/sharedTypes';
+export interface ComponentFactoryProps {
+    componentFactory?: ComponentFactory;
+}
+/**
+ * @param {React.ComponentClass<T> | React.FC<T>} Component
+ */
+export declare function withComponentFactory<T extends ComponentFactoryProps>(Component: React.ComponentClass<T> | React.FC<T>): {
+    (props: T): JSX.Element;
+    displayName: string;
+};

package/types/enhancers/withDatasourceCheck.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ComponentRendering } from '@sitecore-content-sdk/core/layout';
+export declare const DefaultEditingError: () => JSX.Element;
+export interface WithDatasourceCheckProps {
+    rendering: ComponentRendering;
+}
+export interface WithDatasourceCheckOptions {
+    /**
+     * A component that is rendered when a datasource is missing during editing.
+     * If unspecified, a default component with message is displayed.
+     */
+    editingErrorComponent?: React.ComponentClass<unknown> | React.FC<unknown>;
+}
+/**
+ * Checks whether a Sitecore datasource is present and renders appropriately depending on page mode (normal vs editing).
+ * @param {WithDatasourceCheckOptions} [options]
+ * @returns
+ *  The wrapped component, if a datasource is present.
+ *  A null component (in normal mode) or an error component (in editing mode), if a datasource is not present.
+ */
+export declare function withDatasourceCheck(options?: WithDatasourceCheckOptions): <ComponentProps extends WithDatasourceCheckProps>(Component: React.ComponentType<ComponentProps>) => (props: ComponentProps) => React.JSX.Element;

package/types/enhancers/withEditorChromes.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const withEditorChromes: (WrappedComponent: React.ComponentClass<unknown> | React.FC<unknown>) => React.ComponentClass;

package/types/enhancers/withEmptyFieldEditingComponent.d.ts

@@ -0,0 +1,27 @@
+import React, { ComponentType } from 'react';
+import { GenericFieldValue, Field, FieldMetadata } from '@sitecore-content-sdk/core/layout';
+/**
+ * The HOC options
+ */
+export interface WithEmptyFieldEditingComponentOptions {
+    /**
+     * the default empty field component
+     */
+    defaultEmptyFieldEditingComponent: React.FC;
+    /**
+     * 'true' if forward reference is needed
+     */
+    isForwardRef?: boolean;
+}
+interface WithEmptyFieldEditingComponentProps {
+    field?: (Partial<Field> | GenericFieldValue) & FieldMetadata;
+    editable?: boolean;
+    emptyFieldEditingComponent?: React.ComponentClass | React.FC;
+}
+/**
+ * Returns the passed field component or default component in case field value is empty and edit mode is 'metadata'
+ * @param {ComponentType<FieldComponentProps>} FieldComponent the field component
+ * @param {WithEmptyFieldEditingComponentProps} options the options of the HOC;
+ */
+export declare function withEmptyFieldEditingComponent<FieldComponentProps extends WithEmptyFieldEditingComponentProps, RefElementType = HTMLElement>(FieldComponent: ComponentType<FieldComponentProps>, options: WithEmptyFieldEditingComponentOptions): React.ForwardRefExoticComponent<React.PropsWithoutRef<FieldComponentProps> & React.RefAttributes<RefElementType>> | ((props: FieldComponentProps) => React.JSX.Element);
+export {};

package/types/enhancers/withFieldMetadata.d.ts

@@ -0,0 +1,16 @@
+import React, { ComponentType } from 'react';
+interface WithMetadataProps {
+    field?: {
+        metadata?: {
+            [key: string]: unknown;
+        };
+    };
+    editable?: boolean;
+}
+/**
+ * Wraps the field component with metadata markup intended to be used for chromes hydration in Pages
+ * @param {ComponentType<FieldComponentProps>} FieldComponent the field component
+ * @param {boolean} isForwardRef set to 'true' if forward reference is needed
+ */
+export declare function withFieldMetadata<FieldComponentProps extends WithMetadataProps, RefElementType = HTMLElement>(FieldComponent: ComponentType<FieldComponentProps>, isForwardRef?: boolean): React.ForwardRefExoticComponent<React.PropsWithoutRef<FieldComponentProps> & React.RefAttributes<RefElementType>> | ((props: FieldComponentProps) => React.JSX.Element);
+export {};

package/types/enhancers/withPlaceholder.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { ComponentRendering, RouteData } from '@sitecore-content-sdk/core/layout';
+import { PlaceholderProps } from '../components/PlaceholderCommon';
+export interface WithPlaceholderOptions {
+    /**
+     * Function to map incoming placeholder props into rendering data to use for the placeholder data.
+     * Normally in a JSS component, props.rendering is passed the component data, and that is the default.
+     * However, if your component data is in a different prop, like say 'route' in a sample app,
+     * this lets you map that.
+     */
+    resolvePlaceholderDataFromProps?: (props: unknown) => ComponentRendering | RouteData;
+    /**
+     * Function to alter the placeholder props from within the HOC. Enables the props to be
+     * transformed before being used by the placeholder/HOC, for example to customize the
+     * error or missing component display
+     */
+    propsTransformer?: (props: PlaceholderProps) => PlaceholderProps;
+}
+export interface PlaceholderToPropMapping {
+    /**
+     * The name of the placeholder this component will expose
+     */
+    placeholder: string;
+    /**
+     * The name of the prop on your wrapped component that you would like the placeholder data injected on
+     */
+    prop: string;
+}
+export type WithPlaceholderSpec = (string | PlaceholderToPropMapping) | (string | PlaceholderToPropMapping)[];
+/**
+ * @param {WithPlaceholderSpec} placeholders
+ * @param {WithPlaceholderOptions} [options]
+ */
+export declare function withPlaceholder(placeholders: WithPlaceholderSpec, options?: WithPlaceholderOptions): (WrappedComponent: React.ComponentClass<PlaceholderProps> | React.FunctionComponent<PlaceholderProps>) => (props: import("@sitecore-content-sdk/core/utils").EnhancedOmit<PlaceholderProps, keyof import("./withSitecoreContext").WithSitecoreContextProps>) => React.JSX.Element;

package/types/enhancers/withSitecoreContext.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import { EnhancedOmit } from '@sitecore-content-sdk/core/utils';
+import { SitecoreContextValue } from '../components/SitecoreContext';
+export interface WithSitecoreContextOptions {
+    updatable?: boolean;
+}
+export interface WithSitecoreContextProps {
+    sitecoreContext: SitecoreContextValue;
+    updateSitecoreContext?: ((value: SitecoreContextValue) => void) | false;
+}
+export type WithSitecoreContextHocProps<ComponentProps> = EnhancedOmit<ComponentProps, keyof WithSitecoreContextProps>;
+/**
+ * @param {WithSitecoreContextOptions} [options]
+ */
+export declare function withSitecoreContext(options?: WithSitecoreContextOptions): <ComponentProps extends WithSitecoreContextProps>(Component: React.ComponentType<ComponentProps>) => (props: WithSitecoreContextHocProps<ComponentProps>) => React.JSX.Element;
+/**
+ * This hook grants acсess to the current Sitecore page context
+ * by default JSS includes the following properties in this context:
+ * - pageEditing - Provided by Layout Service, a boolean indicating whether the route is being accessed via the Sitecore Editor.
+ * - pageState - Like pageEditing, but a string: normal, preview or edit.
+ * - site - Provided by Layout Service, an object containing the name of the current Sitecore site context.
+ * @see https://jss.sitecore.com/docs/techniques/extending-layout-service/layoutservice-extending-context
+ * @param {WithSitecoreContextOptions} [options] hook options
+ * @example
+ * const EditMode = () => {
+ *    const { sitecoreContext } = useSitecoreContext();
+ *    return <span>Edit Mode is {sitecoreContext.pageEditing ? 'active' : 'inactive'}</span>
+ * }
+ * @example
+ * const EditMode = () => {
+ *    const { sitecoreContext, updateSitecoreContext } = useSitecoreContext({ updatable: true });
+ *    const onClick = () => updateSitecoreContext({ pageEditing: true });
+ *    return <span onClick={onClick}>Edit Mode is {sitecoreContext.pageEditing ? 'active' : 'inactive'}</span>
+ * }
+ * @returns {object} { sitecoreContext, updateSitecoreContext }
+ */
+export declare function useSitecoreContext(options?: WithSitecoreContextOptions): {
+    sitecoreContext: SitecoreContextValue;
+    updateSitecoreContext: (value: SitecoreContextValue | import("@sitecore-content-sdk/core/layout").LayoutServiceData) => void;
+};

package/types/index.d.ts

@@ -0,0 +1,30 @@
+export { constants, enableDebug, ClientError, CacheClient, CacheOptions, MemoryCacheClient, NativeDataFetcher, NativeDataFetcherResponse, NativeDataFetcherConfig, } from '@sitecore-content-sdk/core';
+export { EnhancedOmit } from '@sitecore-content-sdk/core/utils';
+export { isEditorActive, resetEditorChromes } from '@sitecore-content-sdk/core/editing';
+export { getContentStylesheetLink, getComponentLibraryStylesheetLinks, LayoutService, LayoutServiceData, LayoutServicePageState, LayoutServiceContext, LayoutServiceContextData, GraphQLLayoutService, RouteData, Field, Item, getChildPlaceholder, getFieldValue, ComponentRendering, ComponentFields, ComponentParams, EditMode, } from '@sitecore-content-sdk/core/layout';
+export { DictionaryPhrases, DictionaryService, GraphQLDictionaryService, } from '@sitecore-content-sdk/core/i18n';
+export { GraphQLClientError, RetryStrategy, DefaultRetryStrategy, GraphQLRequestClientFactoryConfig, GraphQLRequestClient, } from '@sitecore-content-sdk/core/graphql';
+export { mediaApi } from '@sitecore-content-sdk/core/media';
+export { ComponentFactory, JssComponentType } from './components/sharedTypes';
+export { Placeholder, PlaceholderComponentProps } from './components/Placeholder';
+export { Image, ImageProps, ImageField, ImageFieldValue, ImageSizeParameters, } from './components/Image';
+export { RichText, RichTextProps, RichTextPropTypes, RichTextField } from './components/RichText';
+export { Text, TextField } from './components/Text';
+export { DateField, DateFieldProps } from './components/Date';
+export { FEaaSComponent, FEaaSComponentProps, FEaaSComponentParams, fetchFEaaSComponentServerProps, } from './components/FEaaSComponent';
+export { FEaaSWrapper } from './components/FEaaSWrapper';
+export { ComponentLibraryLayout } from './components/ComponentLibraryLayout';
+export { BYOCComponent, BYOCComponentParams, BYOCComponentProps, fetchBYOCComponentServerProps, } from './components/BYOCComponent';
+export { BYOCWrapper } from './components/BYOCWrapper';
+export { Link, LinkField, LinkFieldValue, LinkProps, LinkPropTypes } from './components/Link';
+export { File, FileField } from './components/File';
+export { SitecoreContext, SitecoreContextState, SitecoreContextValue, SitecoreContextReactContext, } from './components/SitecoreContext';
+export { withSitecoreContext, useSitecoreContext, WithSitecoreContextOptions, WithSitecoreContextProps, WithSitecoreContextHocProps, } from './enhancers/withSitecoreContext';
+export { withEditorChromes } from './enhancers/withEditorChromes';
+export { withPlaceholder } from './enhancers/withPlaceholder';
+export { withDatasourceCheck } from './enhancers/withDatasourceCheck';
+export { ComponentBuilder, ComponentBuilderConfig } from './ComponentBuilder';
+export { withFieldMetadata } from './enhancers/withFieldMetadata';
+export { withEmptyFieldEditingComponent } from './enhancers/withEmptyFieldEditingComponent';
+export { EditingScripts } from './components/EditingScripts';
+export { DefaultEmptyFieldEditingComponentText, DefaultEmptyFieldEditingComponentImage, } from './components/DefaultEmptyFieldEditingComponents';

package/types/utils.d.ts

@@ -0,0 +1,17 @@
+import { ComponentFields } from '@sitecore-content-sdk/core/layout';
+/**
+ * "class" property will be transformed into or appended to "className" instead.
+ * @param {string} otherAttrs all other props included on the image component
+ * @returns {void}
+ */
+export declare const addClassName: (otherAttrs: {
+    [key: string]: unknown;
+}) => void;
+/**
+ * Used in FEAAS and BYOC implementations to convert datasource item field values into component props
+ * @param {ComponentFields} fields field collection from Sitecore
+ * @returns JSON object that can be used as props
+ */
+export declare const getDataFromFields: (fields: ComponentFields) => {
+    [key: string]: unknown;
+};