@sitecore-feaas/clientside 0.0.9 → 0.1.0

package/src/components/FEAASEditor.tsx

@@ -0,0 +1,291 @@
+import type * as FEAASEditorImports from '@sitecore-feaas/frontend/src/components/editor/Editor.jsx'
+import { FEAASBase, OptionalExcept } from './FEAASBase.js'
+
+export function getFramePosition(element: HTMLElement) {
+  let positions = []
+  if (element) {
+    let currentWindow = element.ownerDocument.defaultView as Window
+    let currentParentWindow
+    let rect
+    while (currentWindow !== window.top) {
+      currentParentWindow = currentWindow.parent
+      for (let idx = 0; idx < currentParentWindow.frames.length; idx++)
+        if (currentParentWindow.frames[idx] === currentWindow) {
+          for (let frameElement of currentParentWindow.document.getElementsByTagName('iframe')) {
+            if (frameElement.contentWindow === currentWindow) {
+              rect = frameElement.getBoundingClientRect()
+              const style = frameElement.contentWindow.getComputedStyle(frameElement)
+
+              positions.push({
+                left: rect.left + parseInt(style.borderLeftWidth),
+                top: rect.top + parseInt(style.borderTopWidth)
+              })
+            }
+          }
+          currentWindow = currentParentWindow as Window
+          break
+        }
+    }
+  }
+  return positions.reduce(
+    (accumulator, currentValue) => {
+      return {
+        left: accumulator.left + currentValue.left,
+        top: accumulator.top + currentValue.top
+      }
+    },
+    { left: 0, top: 0 }
+  )
+}
+export function FEAASEditorProps(element: FEAASBase = this) {
+  return {
+    context: HTMLElement,
+    frontend: element?.getContextAttribute('frontend'),
+    src: element?.getAttribute('src') ?? '/assets/editor.js',
+    library: element?.getAttribute('library'),
+    component: element?.getAttribute('component'),
+    version: element?.getAttribute('version'),
+    revision: element?.getAttribute('revision') || 'saved',
+    hidden: element?.getAttribute('hidden') != null,
+    for: element?.getAttribute('for')
+  }
+}
+type FEAASEditorProps = ReturnType<typeof FEAASEditorProps>
+type Rect = {
+  top: number
+  left: number
+  width: number
+  height: number
+}
+
+export class FEAASEditor extends FEAASBase<FEAASEditorProps, typeof FEAASEditorImports> {
+  chrome: HTMLElement
+  wrapper: HTMLElement
+
+  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 }
+
+  getProps() {
+    return FEAASEditorProps(this)
+  }
+
+  getTarget = () => {
+    return document.querySelector('iframe').contentWindow.document.getElementById(this.props.for)
+  }
+
+  load() {
+    /* @vite-ignore */
+    return import(this.formatURL(this.props.src, this.props.frontend))
+  }
+
+  onChromeMeasureElement = (element: HTMLElement, rect?: Rect) => {
+    if (rect == null) {
+      rect = element.getBoundingClientRect()
+    }
+    if (element.ownerDocument == document) {
+      return {
+        left: rect.left - this.bodyRect.left,
+        top: rect.top - this.bodyRect.top,
+        width: rect.width,
+        height: rect.height
+      }
+    }
+    return {
+      left: rect.left + this.framePoint.left - this.bodyRect.left,
+      top: rect.top + this.framePoint.top - this.bodyRect.top,
+      width: rect.width,
+      height: rect.height
+    }
+  }
+
+  onBeforeMeasure: FEAASEditorImports.EditorContext['onChromeBeforeMeasure'] = (refs) => {
+    if (refs.memoized.focusable) this.framePoint = getFramePosition(refs.memoized.focusable)
+    this.wrapperRect = this.wrapper.getBoundingClientRect()
+    this.bodyRect = this.wrapper.ownerDocument.body.parentElement.getBoundingClientRect()
+  }
+
+  onMeasure: FEAASEditorImports.EditorContext['onChromeMeasure'] = () => {}
+  onPosition: FEAASEditorImports.EditorContext['onChromePosition'] = ({ focusable, root }) => {
+    const chrome = this.wrapper.querySelector('.editor-chrome') as HTMLElement
+    const absolute = this.wrapper.querySelector('.ui.overlays') as HTMLElement
+    if (focusable) {
+      const topbarHeight = 64
+      const padding = 16
+      chrome.style.width = focusable.width + padding * 2 + 'px'
+      chrome.style.height = focusable.height + padding * 1 + topbarHeight + 'px'
+      chrome.style.left = focusable.left - padding + 'px'
+      chrome.style.top = focusable.top - topbarHeight + 'px'
+      if (absolute) {
+        absolute.style.left = root.left + 'px'
+        absolute.style.top = root.top + 'px'
+      }
+    } else {
+      chrome.style.left = '-1000px'
+      chrome.style.top = '-1000px'
+      // wrapper.style.left = '-1000px'
+      // wrapper.style.top = '-1000px'
+    }
+  }
+  /*
+  getRoot(): HTMLElement | FEAASBase<any, any> | ShadowRoot {
+    return this.shadowRoot || this.attachShadow({ mode: 'open' })
+  }
+  reactRoot: HTMLDivElement
+  getReactRoot() {
+    if (!this.reactRoot) {
+      this.reactRoot = document.createElement('div')
+      this.reactRoot.className = 'react-root'
+      this.getRoot().appendChild(this.reactRoot)
+    }
+    return this.reactRoot
+  }
+ */
+  renderReact(
+    { children, component: componentId, version: versionId }: React.PropsWithChildren<FEAASEditorProps>,
+    {
+      Editor,
+      VersionStatusList,
+      Version,
+      EditorUIUndo,
+      EditorUIMode,
+      React: { useEffect, useMemo, useState },
+      Chakra: { HStack, Box },
+      Chrome,
+      ReactDOM,
+      useSDK,
+      useSlots,
+      useModelObserver
+    }: typeof FEAASEditorImports
+  ) {
+    if (!this.payload) return
+    const { sdk } = useSDK()
+    const [component, setComponent] = useState<FEAASEditorImports.SDK.ComponentModel>()
+    const library = sdk.library
+    useEffect(() => {
+      return setComponent(library.components.getItem(componentId))
+    }, [componentId, library])
+    useEffect(() => {
+      component?.versions.fetch()
+    }, [component])
+
+    const target = useMemo(this.getTarget, [this.props.for])
+
+    const observedVersions = useModelObserver(component?.versions)
+    const versions = useMemo(() => {
+      return observedVersions?.filter((v) => v.id == versionId || !versionId) || []
+    }, [observedVersions])
+
+    if (!component) return
+    return useSlots<any, 'picker' | 'children'>(children, ({ picker, children }) => (
+      <Box ref={(el) => (this.wrapper = el)}>
+        <Box className='editor-wrapper' position='absolute' left={0} top={0}>
+          <Editor
+            sdk={sdk}
+            library={sdk.library}
+            component={component}
+            versions={versions}
+            context={{
+              onChromeMeasure: this.onMeasure,
+              onChromeBeforeMeasure: this.onBeforeMeasure,
+              onChromeMeasureElement: this.onChromeMeasureElement,
+              onChromePosition: this.onPosition
+            }}
+          >
+            {({ editor, status, isArchivedDisplayed }) => ({
+              after: children,
+              picker: picker,
+              chrome: editor && <Chrome />,
+              children: component
+                .reduceVersionRevisions(versions)
+                .filter((snapshot) => {
+                  return isArchivedDisplayed || !(snapshot.saved || snapshot.draft)?.deletedAt
+                })
+                .map((snapshot, index) => (
+                  <Box
+                    key={snapshot.head.id}
+                    position='absolute'
+                    left={0}
+                    top={0}
+                    className='editor-chrome'
+                    p={4}
+                    boxShadow={'2xl'}
+                    pointerEvents='none'
+                  >
+                    <Box
+                      className='borders'
+                      pointerEvents={'none'}
+                      left={0}
+                      width='4'
+                      top={0}
+                      bottom={0}
+                      backdropFilter='blur(2px)'
+                      background='rgb(244 244 244 / 80%)'
+                      position='absolute'
+                    ></Box>
+                    <Box
+                      className='borders'
+                      pointerEvents={'none'}
+                      right={0}
+                      width='4'
+                      top={0}
+                      bottom={0}
+                      backdropFilter='blur(2px)'
+                      background='rgb(244 244 244 / 80%)'
+                      position='absolute'
+                    ></Box>
+                    <Box
+                      className='borders'
+                      pointerEvents={'none'}
+                      top={0}
+                      height='16'
+                      left={0}
+                      right={0}
+                      backdropFilter='blur(2px)'
+                      background='rgb(244 244 244 / 80%)'
+                      position='absolute'
+                    ></Box>
+                    <Box
+                      className='borders'
+                      pointerEvents={'none'}
+                      bottom={0}
+                      height='4'
+                      left={0}
+                      right={0}
+                      backdropFilter='blur(2px)'
+                      background='rgb(244 244 244 / 80%)'
+                      position='absolute'
+                    ></Box>
+                    <Version version={snapshot.head} node={target}>
+                      {{
+                        left: (
+                          <HStack justifyContent='space-between'>
+                            <EditorUIUndo size='sm' editor={status == 'ready' ? editor : null} />
+                            <EditorUIMode size='sm' />
+                          </HStack>
+                        ),
+                        middle: <VersionStatusList />
+                      }}
+                    </Version>
+                  </Box>
+                ))
+            })}
+          </Editor>
+        </Box>
+      </Box>
+    ))
+  }
+
+  isReadyToLoad(): boolean {
+    return this.props.component != null && this.props.version != null
+  }
+}
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      'feaas-editor': OptionalExcept<FEAASEditorProps, 'component' | 'version'>
+    }
+  }
+}
+FEAASEditor.register('feaas-editor')

package/src/components/FEAASLoader.ts

@@ -0,0 +1,113 @@
+import { FEAASBase } from './FEAASBase.js'
+
+export function FEAASLoaderProps(element: HTMLElement = this) {
+  return {
+    hidden: element?.getAttribute('hidden') != null
+  }
+}
+type FEAASLoaderProps = ReturnType<typeof FEAASLoaderProps>
+
+export class FEAASLoader extends FEAASBase<FEAASLoaderProps, string> {
+  stylesheet: HTMLStyleElement
+  loader: HTMLDivElement
+
+  static observedAttributes = ['hidden']
+
+  attributeChangedCallback(name: string, oldValue: string, newValue: string): void {
+    if (name == 'hidden') {
+      this.style.setProperty('display', 'block', 'important')
+      this.style.setProperty('transition', 'opacity 0.3s', 'important')
+      if (newValue) {
+        this.style.setProperty('opacity', '0', 'important')
+        this.style.pointerEvents = 'none'
+      } else {
+        this.style.setProperty('opacity', '1', 'important')
+        this.style.pointerEvents = 'all'
+      }
+    }
+  }
+
+  connectedCallback() {
+    this.attributeChangedCallback('hidden', this.getAttribute('hidden'), this.getAttribute('hidden'))
+    this.stylesheet = document.createElement('style')
+    this.stylesheet.textContent = `
+  #loader {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #f6f6ff;
+    z-index: 1000;
+  }
+  @keyframes loader-circular-track {
+    0% {
+      stroke-dasharray: 1, 400;
+      stroke-dashoffset: 0;
+    }
+    50% {
+      stroke-dasharray: 400, 400;
+      stroke-dashoffset: -100;
+    }
+    100% {
+      stroke-dasharray: 400, 400;
+      stroke-dashoffset: -260;
+    }
+  }
+  
+  @keyframes loader-circular-spinner {
+    0% {
+      transform: rotate(0deg);
+    }
+  
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+  #loader .spinner {
+    width: 48px;
+    height: 48px;
+  }
+  `
+    this.loader = document.createElement('div')
+    this.loader.id = 'loader'
+    this.loader.innerHTML = `
+  <div class="spinner">
+    <svg
+      viewBox="0 0 100 100"
+      style="
+        animation: 2s linear 0s infinite normal none running loader-circular-spinner;
+        display: block;
+        width: 48px;
+        height: 48px;
+      "
+    >
+      <circle fill="transparent" cx="50" cy="50" r="42" stroke="rgba(0,0,0,0.1)" stroke-width="10px"></circle>
+      <circle
+        fill="transparent"
+        stroke="#5548D9"
+        cx="50"
+        cy="50"
+        r="42"
+        stroke-width="10px"
+        stroke-linecap="round"
+        style="animation: 1.5s linear 0s infinite normal none running loader-circular-track"
+      ></circle>
+    </svg>
+  </div>`
+    this.getRoot().appendChild(this.stylesheet)
+    this.getRoot().appendChild(this.loader)
+  }
+}
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      'feaas-loader': any
+    }
+  }
+}
+FEAASLoader.register('feaas-loader')

package/src/components/FEAASPicker.tsx

@@ -0,0 +1,98 @@
+import type * as FEAASPickerImports from '@sitecore-feaas/frontend/src/components/picker/Picker.jsx'
+import { FEAASBase } from './FEAASBase.js'
+
+export function FEAASPickerProps(element: FEAASBase<any, any> = this) {
+  return {
+    part: element?.getAttribute('part') || 'picker',
+    slot: element?.getAttribute('part') || 'slot',
+    mode: element?.getAttribute('mode') as 'library' | 'stylesheet',
+    frontend: element?.getContextAttribute('frontend') ?? 'https://components.sitecorecloud.io',
+    src: element?.getAttribute('src') ?? '/assets/picker.js',
+    hidden: element?.getAttribute('hidden') != null,
+    context: undefined as FEAASPickerImports.PickerProps['context'],
+    onClose: undefined as (...args: any[]) => {}
+  }
+}
+type FEAASPickerProps = ReturnType<typeof FEAASPickerProps>
+
+export class FEAASPicker extends FEAASBase<FEAASPickerProps, typeof FEAASPickerImports> {
+  getProps() {
+    return FEAASPickerProps(this)
+  }
+
+  load() {
+    /* @vite-ignore */
+    return import(this.formatURL(this.props.src, this.props.frontend))
+  }
+
+  renderReact(
+    { context, mode, children }: React.PropsWithChildren<FEAASPickerProps>,
+    { Picker, React, ReactDOM }: typeof FEAASPickerImports
+  ) {
+    return (
+      <Picker mode={mode || undefined} onClose={this.props.onClose} context={context}>
+        {children}
+      </Picker>
+    )
+  }
+}
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      'feaas-picker': Partial<typeof FEAASPickerImports>
+      'feaas-picker-lazy': Partial<typeof FEAASPickerImports>
+    }
+  }
+}
+
+FEAASPicker.register('feaas-picker')
+
+export function FEAASPickerLazyProps(element: FEAASBase<any, any> = this) {
+  return {
+    library: element?.getAttribute('library') || 'library',
+    mode: element?.getAttribute('mode') as 'library' | 'stylesheet',
+    frontend: element?.getContextAttribute('frontend') ?? 'https://components.sitecorecloud.io',
+    src: element?.getAttribute('src') ?? '/assets/picker.js',
+    hidden: element?.getAttribute('hidden') != null,
+    context: null as FEAASPickerImports.PickerProps['context'],
+    getToken: null as (options: any) => Promise<string>
+  }
+}
+type FEAASPickerLazyProps = ReturnType<typeof FEAASPickerLazyProps>
+
+export class FEAASPickerLazy extends FEAASBase<FEAASPickerLazyProps, typeof FEAASPickerImports> {
+  payload = null as any
+  getProps() {
+    return FEAASPickerLazyProps(this)
+  }
+
+  onClose = () => {
+    this.setAttribute('hidden', 'hidden')
+  }
+
+  render() {
+    const { frontend, library, getToken, src, mode, context } = this.props
+
+    if (this.children.length == 0)
+      this.innerHTML = `
+        <feaas-context src='/components/providers/ContextProvider.tsx' library='${library}'>
+          <feaas-picker mode='${mode}'> 
+          <feaas-loader />
+        </feaas-context>
+      `
+
+    this.refs.context.set({
+      frontend: frontend,
+      library: library,
+      getToken: getToken
+    })
+    this.refs.picker.set({
+      frontend: frontend,
+      context: context,
+      src: src,
+      mode: mode,
+      onClose: this.onClose
+    })
+  }
+}
+FEAASPickerLazy.register('feaas-picker-lazy')

package/src/components/FEAASStylesheet.ts

@@ -0,0 +1,43 @@
+import { fetchStylesheet } from '../cloud.js'
+import { FEAASBase } from './FEAASBase.js'
+
+export function FEAASStylesheetProps(element: FEAASBase = this) {
+  return {
+    library: element?.getContextAttribute('library'),
+    revision: (element?.getAttribute('revision') ?? 'published') as 'published' | 'staging' | 'saved' | number,
+    cdn: element?.getContextAttribute('cdn')
+  }
+}
+export type FEAASStylesheetProps = ReturnType<typeof FEAASStylesheetProps>
+
+export class FEAASStylesheet extends FEAASBase<FEAASStylesheetProps, string> {
+  stylesheet: HTMLStyleElement
+  getProps() {
+    return FEAASStylesheetProps(this)
+  }
+
+  isReadyToLoad(): boolean {
+    return this.props.library != null && this.props.revision != null && this.props.cdn != null
+  }
+
+  async load() {
+    fetchStylesheet(this.props, this.onLoad)
+  }
+
+  render() {
+    if (!this.stylesheet) {
+      this.stylesheet = document.createElement('style')
+      this.appendChild(this.stylesheet)
+    }
+    this.stylesheet.textContent = this.payload
+  }
+}
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      'feaas-stylesheet': Partial<FEAASStylesheetProps>
+    }
+  }
+}
+FEAASStylesheet.register('feaas-stylesheet')

package/src/components/index.tsx

@@ -0,0 +1,7 @@
+export { FEAASBase } from './FEAASBase.jsx'
+export { FEAASComponent } from './FEAASComponent.js'
+export { FEAASContext } from './FEAASContext.jsx'
+export { FEAASEditor } from './FEAASEditor.jsx'
+export { FEAASLoader } from './FEAASLoader.js'
+export { FEAASPicker } from './FEAASPicker.jsx'
+export { FEAASStylesheet } from './FEAASStylesheet.js'

package/src/index.ts

@@ -1,11 +1,4 @@
-export * from './dom.js'
-export * from './webcomponent.js'
-export * from './fetch.js'
-
-import * as DOM from './dom.js'
-import * as WEB from './webcomponent.js'
-
-export default {
-  ...DOM,
-  ...WEB
-}
+export * from './basic.js'
+export * from './components/FEAASEditor.jsx'
+export * from './components/FEAASPicker.jsx'
+export * from './components/FEAASContext.jsx'

package/test/components.js

@@ -0,0 +1,11 @@
+import { expect } from 'vitest';
+import { describe, it } from 'vitest';
+describe('Components', () => {
+    describe('<feaas-context>', () => {
+        it('render without data', () => {
+            const div = document.createElement('div');
+            div.innerHTML = '<feaas-context></feaas-context>';
+            expect('').toEqual('');
+        });
+    });
+});

package/test/components.ts

@@ -0,0 +1,12 @@
+import { expect } from 'vitest'
+import { describe, it, assert, beforeAll } from 'vitest'
+
+describe('Components', () => {
+  describe('<feaas-context>', () => {
+    it('render without data', () => {
+      const div = document.createElement('div')
+      div.innerHTML = '<feaas-context></feaas-context>'
+      expect('').toEqual('')
+    })
+  })
+})