@sitecore-feaas/clientside 0.4.0-alpha.1 → 0.4.0-alpha.2

package/src/ui/FEAASPicker.tsx

@@ -40,9 +40,11 @@ export class FEAASPicker extends FEAASElement<FEAASPickerProps, typeof FEAASPick
   }
   render(
     { placeholder, context, mode, dialog, children, variant }: React.PropsWithChildren<FEAASPickerProps>,
-    { Picker, React, useLibrary, useSDK }: typeof FEAASPickerImports
+    { Picker, React, useContext, EnvironmentContext, useLibrary, useSDK, BYOC }: typeof FEAASPickerImports
   ) {
     const [renders, forceRender] = React.useReducer((c) => c + 1, 0)
+    const sdk = useSDK()
+    const env = useContext(EnvironmentContext)
     const collections = useLibrary('collections')
     const components = useLibrary('components')
     const datasources = useSDK('datasources')
@@ -50,26 +52,35 @@ export class FEAASPicker extends FEAASElement<FEAASPickerProps, typeof FEAASPick
     // @ts-ignore temporary workaround until we release all environments
     const rules = library.stylesheets?.first?.rules || library?.stylesheet?.styles
     const component = components.find((c) => c.id == context?.getAttribute('component'))
-    const componentName = context?.getAttribute('data-external-id')
-    const externalComponent = useSDK('externalComponents').find((c) => c.name == componentName)
+    const externalComponents = useSDK('externalComponents')
     var settings = context?.getAttribute('data')
     if (settings) {
       try {
         settings = JSON.parse(settings)
       } catch (e) {}
     }
+    if (context) {
+      var embedDefinition = sdk.ExternalComponent.getDefinition(context)
+      var isUnconfigured = embedDefinition && !embedDefinition.getConfiguration(context)
+      var externalComponent =
+        embedDefinition?.type == 'feaas'
+          ? components.find((c) => c.id == context.getAttribute('component'))
+          : BYOC?.getComponent(String(context.getAttribute('data-external-id')))
+    }
     return (
       <Picker
+        cdn={env.cdn}
         rules={rules}
         collections={collections}
         themeContext={context}
         placeholder={placeholder}
         component={component}
         embed={externalComponent}
+        externalComponents={externalComponents}
         datasources={datasources}
         data={settings}
         versionId={context?.getAttribute('version')}
-        mode={mode || (component || componentName ? 'context' : null)}
+        mode={mode || (isUnconfigured ? 'library' : externalComponent ? 'context' : null)}
         setAttribute={(context, attribute, value) => {
           if (attribute == 'data' && value) value = JSON.stringify(value)
           this.props.setAttribute(context, attribute, value)

package/src/ui/react.tsx

@@ -12,7 +12,7 @@ import {
   parseComponentSource,
   parseStylesheetSource
 } from './index.js'
-import * as BYOC from '@sitecore/byoc'
+import * as BYOC from '@sitecore/byoc/react'
 export * from '../headless.js'
 export { External, FEAASExternalPropsObject, getComponent, linkComponents, registerComponent } from './FEAASExternal.js'
 export * from './index.js'

package/types/ui/FEAASPicker.d.ts

@@ -51,7 +51,7 @@ export declare class FEAASPicker extends FEAASElement<FEAASPickerProps, typeof F
     };
     load(): Promise<typeof FEAASPickerImports>;
     connectedCallback(): void;
-    render({ placeholder, context, mode, dialog, children, variant }: React.PropsWithChildren<FEAASPickerProps>, { Picker, React, useLibrary, useSDK }: typeof FEAASPickerImports): JSX.Element;
+    render({ placeholder, context, mode, dialog, children, variant }: React.PropsWithChildren<FEAASPickerProps>, { Picker, React, useContext, EnvironmentContext, useLibrary, useSDK, BYOC }: typeof FEAASPickerImports): JSX.Element;
 }
 declare global {
     namespace JSX {

package/types/ui/FEAASPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FEAASPicker.d.ts","sourceRoot":"","sources":["../../src/ui/FEAASPicker.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,kBAAkB,MAAM,iCAAiC,CAAA;AAC1E,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAA;AAE5D,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,YAAY,CAAC,GAAG,EAAE,GAAG,CAAC;;;;;;;;;;;uBAY5B,GAAG,EAAE,KAAK,IAAI;;;EAIjD;AACD,MAAM,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAElE,qBAAa,WAAY,SAAQ,YAAY,CAAC,gBAAgB,EAAE,OAAO,kBAAkB,CAAC;IACxF,MAAM,CAAC,kBAAkB,WAAwE;IAEjG,YAAY;;;;;;;;;;;;;;OAEkB;IAE9B,QAAQ;;;;;;;;;;;;;;;IAIR,IAAI;IAGJ,iBAAiB;IAIjB,MAAM,CACJ,EAAE,WAAW,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,EACpG,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,EAAE,OAAO,kBAAkB;CA+CnE;AACD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,cAAc,EAAE,OAAO,CAAC,OAAO,kBAAkB,CAAC,CAAA;SACnD;KACF;CACF;AAED,OAAO,EAAE,WAAW,IAAI,MAAM,EAAE,CAAA"}
+{"version":3,"file":"FEAASPicker.d.ts","sourceRoot":"","sources":["../../src/ui/FEAASPicker.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,kBAAkB,MAAM,iCAAiC,CAAA;AAC1E,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAA;AAE5D,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,YAAY,CAAC,GAAG,EAAE,GAAG,CAAC;;;;;;;;;;;uBAY5B,GAAG,EAAE,KAAK,IAAI;;;EAIjD;AACD,MAAM,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAElE,qBAAa,WAAY,SAAQ,YAAY,CAAC,gBAAgB,EAAE,OAAO,kBAAkB,CAAC;IACxF,MAAM,CAAC,kBAAkB,WAAwE;IAEjG,YAAY;;;;;;;;;;;;;;OAEkB;IAE9B,QAAQ;;;;;;;;;;;;;;;IAIR,IAAI;IAGJ,iBAAiB;IAIjB,MAAM,CACJ,EAAE,WAAW,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,EACpG,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,kBAAkB,EAAE,UAAU,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,OAAO,kBAAkB;CA0DzG;AACD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,cAAc,EAAE,OAAO,CAAC,OAAO,kBAAkB,CAAC,CAAA;SACnD;KACF;CACF;AAED,OAAO,EAAE,WAAW,IAAI,MAAM,EAAE,CAAA"}

package/types/ui/react.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { HTMLNode, renderHTMLContent } from '../dom/html.js';
 import { FEAASCDNStylesheetParams, FEAASCDNStylesheetSource, FEAASComponentProps } from './index.js';
-import * as BYOC from '@sitecore/byoc';
+import * as BYOC from '@sitecore/byoc/react';
 export * from '../headless.js';
 export { External, FEAASExternalPropsObject, getComponent, linkComponents, registerComponent } from './FEAASExternal.js';
 export * from './index.js';

package/types/ui/react.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../src/ui/react.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,QAAQ,EAAoB,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAE9E,OAAO,EACL,wBAAwB,EACxB,wBAAwB,EACxB,mBAAmB,EAOpB,MAAM,YAAY,CAAA;AACnB,OAAO,KAAK,IAAI,MAAM,gBAAgB,CAAA;AACtC,cAAc,gBAAgB,CAAA;AAC9B,OAAO,EAAE,QAAQ,EAAE,wBAAwB,EAAE,YAAY,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AACxH,cAAc,YAAY,CAAA;AAC1B,OAAO,EAAE,iBAAiB,EAAE,CAAA;AAE5B,MAAM,MAAM,wBAAwB,GAAG,mBAAmB,GAAG;IAC3D,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,YAAY,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;CAC7B,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,UAAW,wBAAwB,GAAG,wBAAwB,gBAK9F,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,yBAAyB,iBAAwB,wBAAwB,yBAerF,CAAA;AAED;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,wBAAwB,eA8C/E;AAED;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAC7B,IAAI,EAAE,QAAQ,EACd,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,CAAC,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,EAC/G,GAAG,CAAC,EAAE,GAAG,GACR,KAAK,CAAC,SAAS,CA+BjB;AAED,eAAO,MAAM,8BAA8B,4CAAsC,CAAA;AACjF,eAAO,MAAM,uBAAuB,oBAAc,CAAA;AAClD,eAAO,MAAM,iBAAiB,uBAAiB,CAAA;AAC/C,eAAO,MAAM,sBAAsB,8BAAwB,CAAA;AAC3D,eAAO,MAAM,qBAAqB,2BAAqB,CAAA;AACvD,eAAO,MAAM,SAAS,4BAAsB,CAAA;AAC5C,eAAO,MAAM,eAAe,iBA3HkC,wBAAwB,yBA2H9B,CAAA;AACxD,eAAO,MAAM,UAAU,UA1IqB,wBAAwB,GAAG,wBAAwB,gBA0IjD,CAAA"}
+{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../src/ui/react.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,QAAQ,EAAoB,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAE9E,OAAO,EACL,wBAAwB,EACxB,wBAAwB,EACxB,mBAAmB,EAOpB,MAAM,YAAY,CAAA;AACnB,OAAO,KAAK,IAAI,MAAM,sBAAsB,CAAA;AAC5C,cAAc,gBAAgB,CAAA;AAC9B,OAAO,EAAE,QAAQ,EAAE,wBAAwB,EAAE,YAAY,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AACxH,cAAc,YAAY,CAAA;AAC1B,OAAO,EAAE,iBAAiB,EAAE,CAAA;AAE5B,MAAM,MAAM,wBAAwB,GAAG,mBAAmB,GAAG;IAC3D,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,YAAY,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;CAC7B,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,UAAW,wBAAwB,GAAG,wBAAwB,gBAK9F,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,yBAAyB,iBAAwB,wBAAwB,yBAerF,CAAA;AAED;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,wBAAwB,eA8C/E;AAED;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAC7B,IAAI,EAAE,QAAQ,EACd,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,CAAC,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,EAC/G,GAAG,CAAC,EAAE,GAAG,GACR,KAAK,CAAC,SAAS,CA+BjB;AAED,eAAO,MAAM,8BAA8B,4CAAsC,CAAA;AACjF,eAAO,MAAM,uBAAuB,oBAAc,CAAA;AAClD,eAAO,MAAM,iBAAiB,uBAAiB,CAAA;AAC/C,eAAO,MAAM,sBAAsB,8BAAwB,CAAA;AAC3D,eAAO,MAAM,qBAAqB,2BAAqB,CAAA;AACvD,eAAO,MAAM,SAAS,4BAAsB,CAAA;AAC5C,eAAO,MAAM,eAAe,iBA3HkC,wBAAwB,yBA2H9B,CAAA;AACxD,eAAO,MAAM,UAAU,UA1IqB,wBAAwB,GAAG,wBAAwB,gBA0IjD,CAAA"}

package/build/utils/string.js

@@ -1,13 +0,0 @@
-export function kebabCase(str) {
-    const KEBAB_REGEX = /[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g;
-    return str.replace(KEBAB_REGEX, function (match) {
-        return '-' + match.toLowerCase();
-    });
-}
-export function reverseKebabCase(str) {
-    const REVERSE_KEBAB_REGEX = /-[a-z\u00E0-\u00F6\u00F8-\u00FE]/g;
-    return str.replace(REVERSE_KEBAB_REGEX, function (match) {
-        return match.slice(1).toUpperCase();
-    });
-}
-//# sourceMappingURL=string.js.map

package/build/utils/string.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"string.js","sourceRoot":"","sources":["../../src/utils/string.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,SAAS,CAAC,GAAW;IACnC,MAAM,WAAW,GAAG,kCAAkC,CAAA;IACtD,OAAO,GAAG,CAAC,OAAO,CAAC,WAAW,EAAE,UAAU,KAAK;QAC7C,OAAO,GAAG,GAAG,KAAK,CAAC,WAAW,EAAE,CAAA;IAClC,CAAC,CAAC,CAAA;AACJ,CAAC;AACD,MAAM,UAAU,gBAAgB,CAAC,GAAW;IAC1C,MAAM,mBAAmB,GAAG,mCAAmC,CAAA;IAC/D,OAAO,GAAG,CAAC,OAAO,CAAC,mBAAmB,EAAE,UAAU,KAAK;QACrD,OAAO,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAA;IACrC,CAAC,CAAC,CAAA;AACJ,CAAC"}