@adobe-commerce/elsie 1.0.0-alpha1

package/src/lib/slot.tsx

@@ -0,0 +1,425 @@
+import { cloneElement, ComponentChildren, RefObject, VNode } from 'preact';
+import {
+  StateUpdater,
+  useContext,
+  useState,
+  useRef,
+  useEffect,
+  useMemo,
+  useCallback,
+} from 'preact/hooks';
+import { IntlContext, Lang } from '@adobe/elsie/i18n';
+import { HTMLAttributes } from 'preact/compat';
+import { SlotQueueContext } from './render';
+
+import '@adobe/elsie/components/UIProvider/debugger.css';
+
+type MutateElement = (elem: HTMLElement) => void;
+
+interface State {
+  get: (key: string) => void;
+  set: (key: string, value: any) => void;
+}
+
+interface SlotElement {
+  appendChild: MutateElement;
+  prependChild: MutateElement;
+  appendSibling: MutateElement;
+  prependSibling: MutateElement;
+}
+
+interface PrivateContext<T> {
+  _setProps: (s: StateUpdater<{}>) => void;
+  _registerMethod: (
+    cb: (next: T & DefaultSlotContext<T>, state: State) => void
+  ) => void;
+  _htmlElementToVNode: (element: HTMLElement) => VNode;
+}
+
+interface DefaultSlotContext<T> extends PrivateContext<T> {
+  dictionary: Lang;
+  getSlotElement: (key: string) => SlotElement;
+  replaceWith: MutateElement;
+  appendChild: MutateElement;
+  prependChild: MutateElement;
+  appendSibling: MutateElement;
+  prependSibling: MutateElement;
+  onRender: (cb: (next: T & DefaultSlotContext<T>) => void) => void;
+  onChange: (cb: (next: T & DefaultSlotContext<T>) => void) => void;
+}
+
+type Context<T> = T & ThisType<DefaultSlotContext<T>>; // NOSONAR
+
+export type SlotProps<T = any> = (
+  ctx: T & DefaultSlotContext<T>,
+  element: HTMLDivElement | null
+) => Promise<void> | void;
+
+export type SlotMethod<P = any> = (
+  callback: (next: unknown, state: State) => P
+) => void;
+
+// Slot Hook
+export function useSlot<K, V extends HTMLDivElement>(
+  name: string,
+  // @ts-ignore
+  context: Context<K> = {},
+  callback?: SlotProps<K>,
+  children?: ComponentChildren,
+  render?: Function
+): [RefObject<V>, Record<string, any>] {
+  const slotsQueue = useContext(SlotQueueContext);
+
+  // HTML Element
+  const elementRef = useRef<V>(null);
+
+  const status = useRef<'pending' | 'ready' | 'loading'>('pending');
+
+  // Methods
+  const methodsRef = useRef<any>([]);
+
+  // Children VNodes
+  const [props, _setProps] = useState<Record<string, any>>({
+    children: [children],
+  });
+
+  // Attributes
+  const [_state, setState] = useState<any>({});
+
+  const state = useMemo(
+    () => ({
+      get: (key: string) => _state[key],
+      set: (key: string, value: any) => {
+        setState({ ...state, [key]: value });
+      },
+    }),
+    [_state]
+  );
+
+  /** Internationalization */
+  // @ts-ignore
+  const { intl }: any = useContext(IntlContext);
+
+  // @ts-ignore
+  context.dictionary = intl.dictionary;
+
+  /** Privates */
+  // @ts-ignore
+  context._setProps = (next: State<any>) => {
+    _setProps((prev) => {
+      // next props
+      const _next = typeof next === 'function' ? next(prev) : next;
+
+      // On render method...
+      if (render) {
+        const renderNode = cloneElement(render(prev), { key: 'render' });
+
+        // find index of existing render node
+        const index = prev.children.findIndex((n: any) => n?.key === 'render');
+
+        // replace existing render node
+        prev.children[index] = renderNode;
+      }
+
+      return _next;
+    });
+  };
+
+  const _registerMethod = useCallback((cb: Function) => {
+    if (typeof cb === 'function') {
+      methodsRef.current.push(cb);
+    } else {
+      console.warn('Skipped: Invalid _registerMethod', cb);
+    }
+  }, []);
+
+  // @ts-ignore
+  context._registerMethod = _registerMethod;
+
+  const _htmlElementToVNode = useCallback((elem: HTMLElement) => {
+    return (
+      <div
+        data-slot-html-element={elem.tagName.toLowerCase()}
+        ref={(refElem) => {
+          refElem?.appendChild(elem);
+        }}
+      />
+    );
+  }, []);
+
+  // @ts-ignore
+  context._htmlElementToVNode = _htmlElementToVNode;
+
+  /** Prebuilt Methods */
+  // @ts-ignore
+  context.getSlotElement = useCallback(
+    (key: string) => {
+      const element = elementRef.current?.querySelector(
+        `[data-slot-key="${key}"]`
+      );
+
+      log(
+        `🟦 "${name}" Slot getSlotElement: ${key}`,
+        elementRef.current?.cloneNode(true),
+        element?.cloneNode(true)
+      );
+
+      if (!element) return;
+
+      return {
+        appendChild: (elem: HTMLElement) => {
+          element.appendChild(elem);
+        },
+
+        prependChild: (elem: HTMLElement) => {
+          element.insertBefore(elem, element.firstChild);
+        },
+
+        appendSibling: (elem: HTMLElement) => {
+          const parent = element.parentNode;
+          parent?.insertBefore(elem, element.nextSibling);
+        },
+
+        prependSibling: (elem: HTMLElement) => {
+          const parent = element.parentNode;
+          parent?.insertBefore(elem, element);
+        },
+      };
+    },
+    [name]
+  );
+
+  // @ts-ignore
+  context.onRender = useCallback((cb: Function) => {
+    methodsRef.current.push(cb);
+  }, []);
+
+  /**
+   * @deprecated Use `onRender` instead.
+   */
+  // @ts-ignore
+  context.onChange = context.onRender;
+
+  // @ts-ignore
+  context.replaceWith = useCallback(
+    (elem: HTMLElement) => {
+      // @ts-ignore
+      _registerMethod((next) => {
+        // @ts-ignore
+        const children = _htmlElementToVNode(elem);
+
+        next._setProps({ children: [children] });
+      });
+    },
+    [_htmlElementToVNode, _registerMethod]
+  );
+
+  // @ts-ignore
+  context.appendChild = useCallback(
+    (elem: HTMLElement) => {
+      // @ts-ignore
+      _registerMethod((next) => {
+        // @ts-ignore
+        const vnode = _htmlElementToVNode(elem);
+
+        next._setProps((prev: any) => {
+          return {
+            ...prev,
+            children: [...prev.children, vnode],
+          };
+        });
+      });
+    },
+    [_htmlElementToVNode, _registerMethod]
+  );
+
+  // @ts-ignore
+  context.prependChild = useCallback(
+    (elem: HTMLElement) => {
+      // @ts-ignore
+      _registerMethod((next) => {
+        // @ts-ignore
+        const vnode = _htmlElementToVNode(elem);
+
+        next._setProps((prev: any) => {
+          return {
+            ...prev,
+            children: [vnode, ...prev.children],
+          };
+        });
+      });
+    },
+    [_htmlElementToVNode, _registerMethod]
+  );
+
+  // @ts-ignore
+  context.appendSibling = useCallback(
+    (elem: HTMLElement) => {
+      // @ts-ignore
+      _registerMethod(() => {
+        const parent = elementRef.current?.parentNode;
+
+        parent?.insertBefore(elem, elementRef.current?.nextSibling ?? null);
+      });
+    },
+    [_registerMethod]
+  );
+
+  // @ts-ignore
+  context.prependSibling = useCallback(
+    (elem: HTMLElement) => {
+      // @ts-ignore
+      _registerMethod(() => {
+        const parent = elementRef.current?.parentNode;
+
+        parent?.insertBefore(elem, elementRef.current);
+      });
+    },
+    [_registerMethod]
+  );
+
+  const handleLifeCycleRender = useCallback(async () => {
+    if (status.current === 'loading') return;
+
+    status.current = 'loading';
+
+    log(`🟨 "${name}" Slot Rendered`);
+
+    // Reset
+    const renderNode = render
+      ? cloneElement(render(props), { key: 'render' })
+      : null;
+    _setProps({ children: [renderNode ?? children] });
+
+    // Run all registered methods
+    methodsRef.current.forEach((method: any) => {
+      method(context, state);
+    });
+
+    status.current = 'ready';
+  }, [children, context, name, props, render, state]);
+
+  // Initialization
+  const handleLifeCycleInit = useCallback(async () => {
+    if (!callback) return;
+
+    try {
+      status.current = 'loading';
+
+      log(`🟩 "${name}" Slot Initialized`);
+      await callback(context as K & DefaultSlotContext<K>, elementRef.current);
+    } catch (error) {
+      console.error(`Error in "${callback.name}" Slot callback`, error);
+    } finally {
+      status.current = 'ready';
+
+      // first render
+      await handleLifeCycleRender();
+    }
+  }, [callback, context, handleLifeCycleRender, name]);
+
+  // Initialization
+  useEffect(() => {
+    handleLifeCycleInit().finally(() => {
+      if (slotsQueue) {
+        slotsQueue.value.delete(name);
+        slotsQueue.value = new Set(slotsQueue.value);
+      }
+    });
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Update
+  useEffect(() => {
+    handleLifeCycleRender();
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [JSON.stringify(context), JSON.stringify(_state)]);
+
+  return [elementRef, props];
+}
+
+// Slot Component
+interface SlotPropsComponent<T>
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'slot'> {
+  name: string;
+  slot?: SlotProps<T>;
+  context?: Context<T>;
+  render?: (props: Record<string, any>) => VNode | VNode[];
+}
+
+export function Slot<T>({
+  name,
+  context,
+  slot,
+  children,
+  render,
+  ...props
+}: Readonly<SlotPropsComponent<T>>) {
+  const slotsQueue = useContext(SlotQueueContext);
+
+  const [elementRef, slotProps] = useSlot<T, HTMLDivElement>(
+    name,
+    context,
+    slot,
+    children,
+    render
+  );
+
+  useMemo(() => {
+    if (!name) {
+      return console.warn('Slot "name" is required');
+    }
+
+    // add slot to queue
+    if (slotsQueue) {
+      slotsQueue.value.add(name);
+      slotsQueue.value = new Set(slotsQueue.value);
+    }
+  }, [name, slotsQueue]);
+
+  return (
+    <div {...props} ref={elementRef} data-slot={name}>
+      {slotProps.children}
+    </div>
+  );
+}
+
+// Debugger
+
+// @ts-ignore
+window.DROPINS = window.DROPINS || {};
+
+// @ts-ignore
+window.DROPINS.showSlots = async (state) => {
+  // cache state in session storage
+  window.sessionStorage.setItem(
+    'dropin-debugger--show-slots',
+    state.toString()
+  );
+
+  document.body.classList.toggle('dropin-debugger--show-slots', state);
+};
+
+let log: (...attrs: any) => void = () => {};
+
+// @ts-ignore
+window.DROPINS.logSlots = async (state) => {
+  // cache state in session storage
+  window.sessionStorage.setItem('dropin-debugger--log-slots', state.toString());
+
+  log = state ? (...attrs) => console.log(...attrs) : () => {};
+};
+
+/** Persistent Settings */
+
+// @ts-ignore
+window.DROPINS.showSlots(
+  window.sessionStorage.getItem('dropin-debugger--show-slots') === 'true'
+);
+
+// @ts-ignore
+window.DROPINS.logSlots(
+  window.sessionStorage.getItem('dropin-debugger--log-slots') === 'true'
+);

package/src/lib/tests.tsx

@@ -0,0 +1,38 @@
+import {
+  render as originalRender,
+  RenderOptions,
+  RenderResult,
+} from '@testing-library/preact';
+import fs from 'fs';
+import path from 'path';
+
+import { UIProvider } from '@adobe/elsie/components';
+
+export * from '@testing-library/preact';
+
+const directoryPath = path.relative(process.cwd(), 'src/i18n/'); // path to the JSON files (relative to this file
+
+const files = fs.readdirSync(directoryPath); // get a list of all files in the directory
+
+const jsonFiles = files.filter((file) => path.extname(file) === '.json'); // filter out only the JSON files
+
+const langDefinitions = jsonFiles.reduce((acc, file) => {
+  const filePath = path.join(directoryPath, file); // get the full path to the file
+  const rawData = fs.readFileSync(filePath); // read the file synchronously
+  const parsedData = JSON.parse(rawData as any); // parse the JSON data and return it
+  return { ...acc, [file.replace('.json', '')]: parsedData };
+}, {});
+
+export const render = (
+  ui: any,
+  options?: Omit<RenderOptions, 'queries'>
+): RenderResult => {
+  return originalRender(
+    <UIProvider lang={'en_US'} langDefinitions={langDefinitions}>
+      <div className="dropin-design">
+        {ui}
+      </div>
+    </UIProvider>,
+    options
+  );
+};

package/src/lib/types.ts

@@ -0,0 +1,7 @@
+import { FunctionComponent } from 'preact';
+
+export type Container<T, D = { [key: string]: any }> = FunctionComponent<
+  T & { initialData?: D }
+> & {
+  getInitialData?: (props: T) => Promise<D>;
+};

package/src/lib/vcomponent.tsx

@@ -0,0 +1,47 @@
+/*
+ADOBE CONFIDENTIAL
+Copyright 2023 Adobe
+All Rights Reserved.
+NOTICE: All information contained herein is, and remains
+the property of Adobe and its suppliers, if any. The intellectual
+and technical concepts contained herein are proprietary to Adobe
+and its suppliers and are protected by all applicable intellectual
+property laws, including trade secret and copyright laws.
+Dissemination of this information or reproduction of this material
+is strictly forbidden unless prior written permission is obtained
+from Adobe.
+*/
+
+import { VNode, ComponentChildren } from 'preact';
+import { classes } from '.';
+
+export type VComponentProps = {
+  node: VNode | VNode[];
+  children?: ComponentChildren;
+  [key: string]: any; // allow other unspecified props to be passed without any TS warning
+};
+
+export function VComponent({ node, ...props }: VComponentProps) {
+  if (!node) return null;
+
+  if (Array.isArray(node)) {
+    return (
+      <>
+        {node.map((n, key) => (
+          <VComponent
+            key={key}
+            node={n}
+            className={props.className}
+            {...props}
+          />
+        ))}
+      </>
+    );
+  }
+
+  // @ts-ignore
+  props.className = classes([node.props.className, props.className]);
+
+  // @ts-ignore
+  return <node.type ref={node.ref} key={node.key} {...node.props} {...props} />;
+}

package/static/assets/images/index.ts

@@ -0,0 +1,2 @@
+export { default as Card } from './Card.png';
+export { default as Image } from './example.jpg';

package/static/favicon.svg

@@ -0,0 +1,14 @@
+<svg version="1.2" baseProfile="tiny-ps" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 488 432" width="488" height="432">
+	<title>Adobe_Corporate_logo-svg</title>
+	<style>
+		tspan { white-space:pre }
+		.shp0 { fill: #fa0c00 } 
+	</style>
+	<g id="Layer">
+		<path id="Layer" class="shp0" d="M180.43 0L0 0L0 431.15L180.43 0Z" />
+		<path id="Layer" class="shp0" d="M307.37 0L487.57 0L487.57 431.15L307.37 0Z" />
+		<path id="Layer" class="shp0" d="M243.9 158.91L358.74 431.15L283.4 431.15L249.07 344.47L165.03 344.47L243.9 158.91Z" />
+	</g>
+	<g id="Layer">
+	</g>
+</svg>

package/storybook-stories.js

@@ -0,0 +1,12 @@
+const path = require('path');
+
+const { name } = require('./.elsie');
+
+module.exports = {
+  stories: [
+    {
+      directory: path.resolve(__dirname, './src'),
+      titlePrefix: name,
+    },
+  ],
+};

package/tests/__mocks__/browserMocks.ts

@@ -0,0 +1,19 @@
+// Mock Browser API's which are not supported by JSDOM, e.g. ServiceWorker, LocalStorage
+import { TextDecoder, TextEncoder } from 'util';
+import { BroadcastChannel } from 'worker_threads';
+
+Object.defineProperty(window, 'BroadcastChannel', {
+  value: BroadcastChannel,
+  writable: true,
+});
+
+// mock values which are used by the gql builder function (which for some reason is not provided)
+Object.defineProperty(window, 'TextDecoder', {
+  value: TextDecoder,
+  writable: true,
+});
+
+Object.defineProperty(window, 'TextEncoder', {
+  value: TextEncoder,
+  writable: true,
+});

package/tests/__mocks__/fileMocks.ts

@@ -0,0 +1,3 @@
+// This fixed an error related to the CSS and loading gif breaking my Jest test
+// See https://facebook.github.io/jest/docs/en/webpack.html#handling-static-assets
+export default 'test-file-stub';

package/types/icons.d.ts

@@ -0,0 +1,9 @@
+declare module '*.svg' {
+  import { SVGProps, FunctionComponent } from 'preact/compat';
+
+  const ReactComponent: FunctionComponent<
+    SVGProps<SVGSVGElement> & { title?: string }
+  >;
+
+  export default ReactComponent;
+}