@sitecore-feaas/clientside 0.2.0 → 0.2.2

package/src/ui/FEAASContext.tsx

@@ -1,14 +1,17 @@
 import type * as FEAASContextImports from '@sitecore-feaas/frontend/context'
 import type { AuthModel } from '@sitecore-feaas/sdk'
-import { FEAASBase, OptionalExcept } from '../components/FEAASBase.js'
+import { FEAASElement, OptionalExcept } from '../components/FEAASElement.js'
 import { ControlledPromise } from '../utils/promise.js'
+import type * as FEAAS from './index.js'
 
 export function FEAASContextProps(element: HTMLElement) {
   return {
     library: element?.getAttribute('library') as string,
     src: element?.getAttribute('src') ?? '/context.js',
-    frontend: element?.getAttribute('frontend') ?? 'https://components.sitecoreclud.io',
-    backend: element?.getAttribute('backend') ?? 'https://components.sitecoreclud.io/api',
+    // override environment
+    environment: element?.getAttribute('environment') ?? undefined,
+    frontend: element?.getAttribute('frontend') ?? 'https://components.sitecorecloud.io',
+    backend: element?.getAttribute('backend') ?? 'https://components.sitecorecloud.io/api',
     cdn: element?.getAttribute('cdn') ?? 'https://feaas.blob.core.windows.net',
     auth: null as Partial<AuthModel>,
     isolate: element?.getAttribute('isolate') == null || element?.getAttribute('isolate') == 'true'
@@ -20,7 +23,7 @@ export type FEAASContextProps = ReturnType<typeof FEAASContextProps>
  * Context provides shared parameters and react providers for its nested elements. It loads lazily once any of its
  * nested components load. Just placing it on the page without any consumers does not impose any overhead.
  */
-export class FEAASContext extends FEAASBase<FEAASContextProps, typeof FEAASContextImports> {
+export class FEAASContext extends FEAASElement<FEAASContextProps, typeof FEAASContextImports> {
   static observedAttributes = ['library', 'component', 'version', 'revision', 'hostname', 'template']
   getProps() {
     return FEAASContextProps(this)
@@ -35,7 +38,6 @@ export class FEAASContext extends FEAASBase<FEAASContextProps, typeof FEAASConte
   }
 
   isReadyToLoad() {
-    console.log('Is ready?', this.props, super.isReadyToLoad() && this.props.library != null)
     return super.isReadyToLoad() && this.props.library != null
   }
 
@@ -44,7 +46,7 @@ export class FEAASContext extends FEAASBase<FEAASContextProps, typeof FEAASConte
     return theme
   }
 
-  getRoot(): HTMLElement | FEAASBase<any, any> | ShadowRoot {
+  getRoot(): HTMLElement | FEAASElement<any, any> | ShadowRoot {
     if (this.getAttribute('isolate') === 'false') return this
     return this.shadowRoot || this.attachShadow({ mode: 'open' })
   }
@@ -60,14 +62,24 @@ export class FEAASContext extends FEAASBase<FEAASContextProps, typeof FEAASConte
   }
 
   /** Pull in children FEAAS react elements into the shadow DOM so they receieve the styles */
-  connectedCallback(): void {
+  connectedCallback() {
+    this.setAttribute('feaas-role', 'ui')
+    //if (this.props.isolate)
     Array.from(this.children).forEach((child) => {
       this.getRoot().appendChild(child)
     })
+    document.addEventListener('feaasMount', this)
+    document.addEventListener('feaasUnmount', this)
     super.connectedCallback()
   }
+  disconnectedCallback() {
+    document.removeEventListener('feaasMount', this)
+    document.removeEventListener('feaasUnmount', this)
+    super.disconnectedCallback()
+  }
 
   sdk: FEAASContextImports.SDK
+  clientside: typeof FEAAS
   onStatusChange: FEAASContextImports.SDKStatusCallback = (status, sdk) => {
     if (status == 'ready') {
       this.whenSDKReady.resolve(sdk)
@@ -92,6 +104,7 @@ export class FEAASContext extends FEAASBase<FEAASContextProps, typeof FEAASConte
     }
     return (
       <AppContext
+        environment={this.props.environment as any}
         backend={this.props.backend}
         libraryId={this.props.library}
         container={this.getRoot()}
@@ -102,6 +115,7 @@ export class FEAASContext extends FEAASBase<FEAASContextProps, typeof FEAASConte
           portalProps
         }}
         chakraProps={{
+          resetScope: ':where([feaas-role="ui"])',
           cssVarsRoot: ':host',
           resetCSS: true,
           toastOptions: {
@@ -121,6 +135,10 @@ declare global {
       'feaas-context': OptionalExcept<FEAASContextProps, 'library'>
     }
   }
+  interface DocumentEventMap {
+    feaasReady: CustomEvent<FEAASContextImports.SDK>
+  }
 }
 
+export { FEAASContext as Context }
 FEAASContext.register('feaas-context')

package/src/ui/FEAASEditor.tsx

@@ -1,5 +1,5 @@
 import type * as FEAASEditorImports from '@sitecore-feaas/frontend/editor'
-import { FEAASBase, OptionalExcept } from '../components/FEAASBase.js'
+import { FEAASElement, OptionalExcept } from '../components/FEAASElement.js'
 import { FEAASLoader } from '../components/FEAASLoader.js'
 
 export function getFramePosition(element: HTMLElement) {
@@ -38,7 +38,7 @@ export function getFramePosition(element: HTMLElement) {
     { left: 0, top: 0 }
   )
 }
-export function FEAASEditorProps(element: FEAASBase) {
+export function FEAASEditorProps(element: FEAASElement) {
   return {
     context: HTMLElement,
     frontend: element?.getContextAttribute('frontend'),
@@ -63,7 +63,7 @@ type Rect = {
   height: number
 }
 
-export class FEAASEditor extends FEAASBase<FEAASEditorProps, typeof FEAASEditorImports> {
+export class FEAASEditor extends FEAASElement<FEAASEditorProps, typeof FEAASEditorImports> {
   framePoint: Pick<Rect, 'top' | 'left'> = { top: 0, left: 0 }
   wrapperRect: Rect = { top: 0, left: 0, width: 0, height: 0 }
   bodyRect: Rect = { top: 0, left: 0, width: 0, height: 0 }
@@ -329,7 +329,7 @@ export class FEAASEditor extends FEAASBase<FEAASEditorProps, typeof FEAASEditorI
     this.setLoadingState()
   }
 
-  shouldFork(version: FEAASEditorImports.SDK.VersionModel) {
+  shouldFork(version: FEAASEditorImports.Model.VersionModel) {
     return version.forkOriginId == null && this.props.instance != null
   }
 
@@ -423,8 +423,8 @@ export class FEAASEditor extends FEAASBase<FEAASEditorProps, typeof FEAASEditorI
     this.setAttribute('state', 'ready')
   }
 
-  component: FEAASEditorImports.SDK.ComponentModel
-  version: FEAASEditorImports.SDK.VersionModel
+  component: FEAASEditorImports.Model.ComponentModel
+  version: FEAASEditorImports.Model.VersionModel
   closing: ReturnType<typeof setTimeout>
 
   render(
@@ -458,7 +458,7 @@ export class FEAASEditor extends FEAASBase<FEAASEditorProps, typeof FEAASEditorI
     const { React } = this.payload
     const sdk = useSDK()
     const library = useLibrary()
-    const [component, setComponent] = useState<FEAASEditorImports.SDK.ComponentModel>()
+    const [component, setComponent] = useState<FEAASEditorImports.Model.ComponentModel>()
     const { setConfirm } = useContext(ConfirmationContext)
     const usedId = instanceId || versionId
 

package/src/ui/FEAASExternal.tsx

@@ -1,26 +1,69 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { FEAASBase } from '../components/FEAASBase.js'
-import { ReactJSX, ReactModules } from '../components/FEAASElement.js'
+import { FEAASElement } from '../components/FEAASElement.js'
+import { ReactJSX, ReactModules } from '../components/FEAASReactElement.js'
 import { kebabCase, reverseKebabCase } from '../utils/string.js'
 import { Component, FEAASComponentProps } from './react.js'
+import type { ExternalComponent, ExternalComponentOptions, JSONSchema, UISchema } from '@sitecore-feaas/sdk'
 
-const convertSchemaPropertiesToKebabCase = (schema: any) => {
+/** Checks if title exists in a property and if not, it generates it from (kebab-cased) property key */
+const addTitles = (properties: { [key: string]: any }) =>
+  Object.keys(properties).reduce((acc: { [key: string]: any }, key) => {
+    if (properties[key].title) {
+      acc[key] = properties[key]
+    } else {
+      const title = key
+        .split('-')
+        .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+        .join(' ')
+      acc[key] = { ...properties[key], title }
+    }
+    return acc
+  }, {})
+
+/** Converts the keys of an object to kebab case. */
+const objectKeysToKebabCase = (object: { [key: string]: any } = {}) =>
+  Object.keys(object).reduce((acc: { [key: string]: any }, key) => {
+    acc[kebabCase(key)] = object[key]
+    return acc
+  }, {})
+
+const transformSchema = (schema: JSONSchema) => {
   if (!schema) return
+  if (!schema.properties) return schema
+  let properties, required
 
-  let kebabSchemaProperties, kebabRequiredProperties
-  if (schema.properties) {
-    kebabSchemaProperties = Object.keys(schema.properties).reduce((acc: { [key: string]: string }, key) => {
-      acc[kebabCase(key)] = schema.properties[key]
-      return acc
-    }, {})
+  /* kebab-case properties */
+  properties = objectKeysToKebabCase(schema.properties)
+  required = (schema.required || []).map((item: string) => kebabCase(item))
 
-    kebabRequiredProperties = (schema.required || []).map((item: string) => kebabCase(item))
-  }
-  return { ...schema, properties: kebabSchemaProperties, required: kebabRequiredProperties }
+  /* generate titles if not exist */
+  properties = addTitles(properties)
+
+  /* remove title from schema - it will be passed separately to use custom styling in the form */
+  const title: string = undefined
+  return { ...schema, properties, required, title }
 }
 
-export const parseProps = (propName: string, propValue: string, properties: any) => {
+const transformUiSchema = (uiSchema: UISchema, properties: { [key: string]: any }) => {
+  if (!uiSchema || !properties) return
+  let transformed: UISchema
+
+  /* kebab-case keys */
+  transformed = objectKeysToKebabCase(uiSchema)
+
+  /* use updown input widget as default for numbers */
+  const numberProperties = Object.keys(properties).filter((key) => /(integer|number)/.test(properties[key].type))
+  numberProperties.forEach((propertyName) => {
+    if (!transformed[propertyName]) transformed[propertyName] = { 'ui:widget': 'updown' }
+    else if (!transformed[propertyName]['ui:widget']) transformed[propertyName]['ui:widget'] = 'updown'
+  })
+
+  return transformed
+}
+/** Parses a property value based on its property name and type defined in the JSON properties object. */
+export const parseProps = (propName: string, propValue: string, properties: JSONSchema['properties']) => {
+  //@ts-ignore
   switch (properties?.[propName]?.type) {
     case 'string':
       return propValue
@@ -39,10 +82,10 @@ export const parseProps = (propName: string, propValue: string, properties: any)
   }
 }
 
-export function FEAASExternalProps(element: FEAASBase) {
+export function FEAASExternalProps(element: FEAASElement) {
   const attributes = element.getAttributeNames()
   const id = element.getAttribute('data-external-id')
-  const schema: any = FEAASExternal.registered[id]?.schema
+  const schema: JSONSchema = FEAASExternal.registered[id]?.schema
   const props = attributes.reduce((prev, curr) => {
     if (!curr.startsWith('data-attribute') && !['class', 'id', 'contenteditable'].includes(curr)) {
       const value = element.getAttribute(curr)
@@ -54,10 +97,12 @@ export function FEAASExternalProps(element: FEAASBase) {
   return props
 }
 
-export type RegisteredComponents = { [id: string]: { component: React.ElementType; schema: any } }
+export type RegisteredComponents = {
+  [id: string]: ExternalComponent
+}
 export type FEAASExternalProps = ReturnType<typeof FEAASExternalProps> & { dataExternalId: string }
 
-export default class FEAASExternal extends FEAASBase<FEAASExternalProps, ReactModules> {
+export default class FEAASExternal extends FEAASElement<FEAASExternalProps, ReactModules> {
   static registered: RegisteredComponents = {}
   static registrationCallback: NodeJS.Timeout
   load() {
@@ -75,10 +120,70 @@ export default class FEAASExternal extends FEAASBase<FEAASExternalProps, ReactMo
     return FEAASExternalProps(this)
   }
 
-  static registerComponent(component: React.FC, schema: any = {}) {
-    const id = schema.name || component.name
-    const enrichedSchema = { ...schema, title: id, type: 'object' }
-    FEAASExternal.registered[id] = { component, schema: enrichedSchema }
+  /**
+   * Register React component to be renderable as Sitecore component (in Components and Pages). Properties are defined
+   * as JSON schema, from which a configuration form will be produced using RJSF library. The library allows passing a
+   * UI schema that allows tight customization of form widgets, styles and its behavior.
+   *
+   * @example
+   *   FEAAS.External.registerComponent(MyComponent, {
+   *     // Name of a component as it will be presented to the user
+   *     name: 'My Component',
+   *     // Title of a component as it will be presented in the inputs form
+   *     title: 'My Component',
+   *     // Optional: Thumbnail image for component to be displayed in UI
+   *     thumbnail: 'http://examaple.com/component.jpg',
+   *     // Optional: Group components by name
+   *     group: 'Assorted components',
+   *     // Definitions of three configurable properties that MyComponent accepts
+   *     properties: {
+   *       // Color is a string, but only Red/Green/Blue are allowed
+   *       color: { type: 'string', enum: ['red', 'green', 'blue'] },
+   *       // Text is a property labelled as "Text summary"
+   *       text: { type: 'string', title: 'Text summary' },
+   *       // Count is a number with 1 as default value
+   *       count: { type: 'number', default: 1 }
+   *     },
+   *     // Optional UI schema customization
+   *     ui: {
+   *       // Present color choices as radio buttons
+   *       color: { 'ui:widget': 'radio' },
+   *       // Text is a textarea with 5 rows
+   *       text: { 'ui:widget': 'textarea', 'ui:options': { rows: 5 } },
+   *       // Count is a number field with spinner button
+   *       count: { 'ui:widget': 'updown' }
+   *     },
+   *     // Color and text area required properties
+   *     required: ['color', 'text']
+   *   })
+   *
+   * @param {React.ComponentType} component React component that will be rendered.
+   * @param {string} options.name Component name as presented to the user.
+   * @param {string} options.title Component title to be used in the inputs form. Defaults to component name.
+   * @param {JSONSchema['properties']} options.properties Object of properties.
+   * @param {JSONSchema['type']} options.properties[].type JSON Schema type of a property.
+   * @param {string} [options.properties[].title] Optional title displayed to the user.
+   * @param {string} [options.group] Optional Image to be displayed in the UI.
+   * @param {string} [options.thumbnail] Optional title displayed to the user.
+   * @param {UISchema} [options.ui] Optional component groupping.
+   * @see https://rjsf-team.github.io/react-jsonschema-form/docs/api-reference/uiSchema
+   * @see https://json-schema.org
+   */
+  static registerComponent(component: React.ComponentType, options: ExternalComponentOptions) {
+    if (!options.name)
+      throw new Error('Could not register external component. Please make sure you provide a name in the options')
+    const id = options.name
+    const { thumbnail, group, ui: uiSchema, ...schemaOptions } = options
+    const schema = { ...schemaOptions, type: 'object' } as JSONSchema
+    FEAASExternal.registered[id] = {
+      component,
+      name: id,
+      schema,
+      uiSchema,
+      thumbnail,
+      group,
+      title: schema?.title || id
+    }
     FEAASExternal.setRegistrationCallback()
   }
 
@@ -90,12 +195,16 @@ export default class FEAASExternal extends FEAASBase<FEAASExternalProps, ReactMo
         const components = Object.keys(FEAASExternal.registered).map((id) => ({
           ...FEAASExternal.registered[id],
           name: id,
-          schema: convertSchemaPropertiesToKebabCase(FEAASExternal.registered[id].schema)
+          schema: transformSchema(FEAASExternal.registered[id].schema),
+          uiSchema: transformUiSchema(
+            FEAASExternal.registered[id].uiSchema,
+            FEAASExternal.registered[id].schema?.properties
+          )
           //component: FEAASExternal.registered[name].component.toString()
         }))
 
         // send components from iframe to parent window
-        window?.parent?.postMessage(
+        window.parent?.postMessage(
           JSON.stringify({
             action: 'register-components',
             data: components
@@ -108,7 +217,7 @@ export default class FEAASExternal extends FEAASBase<FEAASExternalProps, ReactMo
 
   /*static loadComponents() {
     const components = JSON.parse(sessionStorage.getItem('feaas-external-components'))
-    components.forEach((c: { name: string; schema: any; component: React.FC }) => {
+    components.forEach((c: { name: string; schema: any; component: React.ComponentType }) => {
       const name = c.name
       const schema = c.schema
       const component = eval('(' + c.component + ')')
@@ -139,4 +248,5 @@ declare global {
 FEAASExternal.register('feaas-external')
 FEAASExternal.setRegistrationCallback()
 
+export const registerComponent = FEAASExternal.registerComponent
 export { FEAASExternal as External }

package/src/ui/FEAASPicker.tsx

@@ -1,11 +1,11 @@
 import type * as FEAASPickerImports from '@sitecore-feaas/frontend/picker'
-import { FEAASBase } from '../components/FEAASBase.js'
+import { FEAASElement } from '../components/FEAASElement.js'
 
-export function FEAASPickerProps(element: FEAASBase<any, any>) {
+export function FEAASPickerProps(element: FEAASElement<any, any>) {
   return {
     part: element?.getAttribute('part') || 'picker',
     slot: element?.getAttribute('part') || 'picker',
-    mode: element?.getAttribute('mode') as 'library' | 'element' | 'themes',
+    mode: element?.getAttribute('mode') as 'library' | 'element' | 'themes' | 'datasources',
     placeholder: element?.getAttribute('placeholder') || 'No theme',
     frontend: element?.getContextAttribute('frontend') ?? 'https://components.sitecorecloud.io',
     src: element?.getAttribute('src') ?? '/picker.js',
@@ -18,7 +18,7 @@ export function FEAASPickerProps(element: FEAASBase<any, any>) {
 }
 export type FEAASPickerProps = ReturnType<typeof FEAASPickerProps>
 
-export class FEAASPicker extends FEAASBase<FEAASPickerProps, typeof FEAASPickerImports> {
+export class FEAASPicker extends FEAASElement<FEAASPickerProps, typeof FEAASPickerImports> {
   static observedAttributes = ['library', 'mode', 'frontend', 'src', 'hidden', 'variant']
 
   defaultProps = {
@@ -32,7 +32,10 @@ export class FEAASPicker extends FEAASBase<FEAASPickerProps, typeof FEAASPickerI
   load() {
     return this.import(this.formatURL(this.props.src, this.props.frontend))
   }
-
+  connectedCallback() {
+    this.setAttribute('feaas-role', 'ui')
+    super.connectedCallback()
+  }
   render(
     { placeholder, context, mode, children, variant }: React.PropsWithChildren<FEAASPickerProps>,
     { Picker, React, useLibrary }: typeof FEAASPickerImports
@@ -66,4 +69,5 @@ declare global {
   }
 }
 
+export { FEAASPicker as Picker }
 FEAASPicker.register('feaas-picker')

package/src/ui/index.ts

@@ -1,4 +1,4 @@
-export * from '../headless.js'
-export * from './FEAASEditor.js'
-export * from './FEAASPicker.js'
-export * from './FEAASContext.js'
+export * from './FEAAS.js'
+import * as FEAAS from './FEAAS.js'
+
+FEAAS.Context.prototype.clientside = FEAAS

package/src/ui/react.tsx

@@ -1,7 +1,10 @@
+import { DatasourceModel, SDK } from '@sitecore-feaas/sdk'
+
 export * from './index.js'
 import { FEAASComponentProps, parseComponentSource } from './index.js'
 import React from 'react'
 import { renderHTMLContent } from '../dom/html.js'
+
 export { renderHTMLContent }
 export { External } from './FEAASExternal.js'
 
@@ -9,12 +12,14 @@ export function FEAASEmbed({ data, ...props }: FEAASComponentProps<any>) {
   if ('template' in props && props.template) {
     var html = renderHTMLContent(props.template, data || {})
   }
+
   if ('src' in props) {
     props = {
       ...parseComponentSource(props.src),
       ...props
     }
   }
+
   return (
     <feaas-component
       {...props}

package/src/ui/tsconfig.json

@@ -3,7 +3,7 @@
   "compilerOptions": {
     "declaration": true,
     "rootDir": ".",
-    "tsBuildInfoFile": "../../types/tsbuildinfo_ui",
+    "tsBuildInfoFile": "../../types/ui/tsbuildinfo",
     "declarationDir": "../../types/ui",
     "outDir": "../../build/ui"
   },

package/src/utils/fetch.ts

@@ -0,0 +1,44 @@
+type Data = object | any[]
+
+type DataSettings = { jsonpath: string; url: string }
+
+export const isDataSettings = (data: any): data is DataSettings =>
+  typeof data === 'object' && 'jsonpath' in data && 'url' in data
+
+const performFetch = async (
+  settings: Parameters<typeof fetch>[1] & {
+    url: Parameters<typeof fetch>[0]
+  }
+): Promise<Data> => {
+  try {
+    const response = await fetch(settings.url, settings)
+
+    if (!response) return {}
+
+    return await response.json()
+  } catch (e) {
+    return {}
+  }
+}
+
+export async function fetchData(data: DataSettings | Record<string, DataSettings | Data> | Data): Promise<Data> {
+  if (!data) return data
+
+  console.log(data)
+
+  if (isDataSettings(data)) return performFetch(data)
+
+  const keys = Object.keys(data)
+
+  const allRequests = await Promise.all(
+    keys.map((key: keyof typeof data) => (isDataSettings(data[key]) ? performFetch(data[key]) : null)).filter(Boolean)
+  )
+
+  return keys.reduce(
+    (obj, key: keyof typeof data) => ({
+      ...obj,
+      [key]: isDataSettings(data[key]) ? allRequests.shift() : data[key]
+    }),
+    {}
+  )
+}

package/test/FEAASBase.test.tsx

@@ -1,10 +1,10 @@
 import { describe, it, assert, beforeAll, expect } from 'vitest'
-import { FEAASBase, ReactPayload } from '../src/headless.js'
+import { FEAASElement, ReactPayload } from '../src/headless.js'
 import { JSDOM } from 'jsdom'
 
 describe('React', function () {
   describe('Error boundary', () => {
-    class FEAASErrorTest extends FEAASBase<{ throwAt: string }> {
+    class FEAASErrorTest extends FEAASElement<{ throwAt: string }> {
       static observedAttributes = ['test']
 
       log() {}

package/test/FEAASComponent.test.tsx

@@ -6,6 +6,7 @@ import { clearFetchCache } from '../src/fetch.js'
 const earliest = new Date(2000, 1, 1, 0, 0, 0)
 const earlier = new Date(2000, 1, 2, 0, 0, 0)
 const now = new Date(2000, 1, 2, 12, 0, 0)
+
 describe('Components', () => {
   beforeAll(() => {
     // vi.useFakeTimers()
@@ -15,7 +16,9 @@ describe('Components', () => {
     // vi.useRealTimers()
   })
   beforeEach(() => {
-    document.write()
+    document.open()
+    document.write('<html><head></head><body></body></html>')
+    document.close()
     clearFetchCache()
   })
   it('should load component using', async () => {