@pcg/dynamic-components 1.0.0-alpha.0

package/src/dynamic-components/fractional-indexing.ts

@@ -0,0 +1,321 @@
+// License: CC0 (no rights reserved).
+
+// This is based on https://observablehq.com/@dgreensp/implementing-fractional-indexing
+
+export const BASE_62_DIGITS =
+  '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
+
+const SMALLEST_INTEGER = 'A00000000000000000000000000';
+
+const INTEGER_ZERO = 'a0';
+
+// `a` may be empty string, `b` is null or non-empty string.
+// `a < b` lexicographically if `b` is non-null.
+// no trailing zeros allowed.
+// digits is a string such as '0123456789' for base 10.  Digits must be in
+// ascending character code order!
+/**
+ * @param {string} a
+ * @param {string | null} b
+ * @param {string} digits
+ * @returns {string}
+ */
+const midpoint = (a: string, b: string | null, digits: string): string => {
+  if (b !== null && a >= b) {
+    throw new Error(a + ' >= ' + b);
+  }
+  if (a.slice(-1) === '0' || (b && b.slice(-1) === '0')) {
+    throw new Error('trailing zero');
+  }
+  if (b) {
+    // remove longest common prefix.  pad `a` with 0s as we
+    // go.  note that we don't need to pad `b`, because it can't
+    // end before `a` while traversing the common prefix.
+    let n = 0;
+    while ((a[n] || '0') === b[n]) {
+      n++;
+    }
+    if (n > 0) {
+      return b.slice(0, n) + midpoint(a.slice(n), b.slice(n), digits);
+    }
+  }
+  // first digits (or lack of digit) are different
+  const digitA = a ? digits.indexOf(a[0]) : 0;
+  const digitB = b !== null ? digits.indexOf(b[0]) : digits.length;
+  if (digitB - digitA > 1) {
+    const midDigit = Math.round(0.5 * (digitA + digitB));
+
+    return digits[midDigit];
+  } else {
+    // first digits are consecutive
+    if (b && b.length > 1) {
+      return b.slice(0, 1);
+    }
+
+    // `b` is null or has length 1 (a single digit).
+    // the first digit of `a` is the previous digit to `b`,
+    // or 9 if `b` is null.
+    // given, for example, midpoint('49', '5'), return
+    // '4' + midpoint('9', null), which will become
+    // '4' + '9' + midpoint('', null), which is '495'
+    return digits[digitA] + midpoint(a.slice(1), null, digits);
+  }
+};
+
+/**
+ * @param {string} int
+ * @return {void}
+ */
+
+const validateInteger = (int: string) => {
+  if (int.length !== getIntegerLength(int[0])) {
+    throw new Error('invalid integer part of order key: ' + int);
+  }
+};
+
+/**
+ * @param {string} head
+ * @return {number}
+ */
+
+const getIntegerLength = (head: string): number => {
+  if (head >= 'a' && head <= 'z') {
+    return head.charCodeAt(0) - 'a'.charCodeAt(0) + 2;
+  } else if (head >= 'A' && head <= 'Z') {
+    return 'Z'.charCodeAt(0) - head.charCodeAt(0) + 2;
+  } else {
+    throw new Error('invalid order key head: ' + head);
+  }
+};
+
+/**
+ * @param {string} key
+ * @return {string}
+ */
+
+const getIntegerPart = (key: string) => {
+  const integerPartLength = getIntegerLength(key[0]);
+  if (integerPartLength > key.length) {
+    throw new Error('invalid order key: ' + key);
+  }
+
+  return key.slice(0, integerPartLength);
+};
+
+/**
+ * @param {string} key
+ * @return {void}
+ */
+
+const validateOrderKey = (key: string) => {
+  if (key === SMALLEST_INTEGER) {
+    throw new Error('invalid order key: ' + key);
+  }
+  // getIntegerPart will throw if the first character is bad,
+  // or the key is too short.  we'd call it to check these things
+  // even if we didn't need the result
+  const i = getIntegerPart(key);
+  const f = key.slice(i.length);
+  if (f.slice(-1) === '0') {
+    throw new Error('invalid order key: ' + key);
+  }
+};
+
+// note that this may return null, as there is a largest integer
+/**
+ * @param {string} x
+ * @param {string} digits
+ * @return {string | null}
+ */
+const incrementInteger = (x: string, digits: string) => {
+  validateInteger(x);
+  const [head, ...digs] = x.split('');
+  let carry = true;
+  for (let i = digs.length - 1; carry && i >= 0; i--) {
+    const d = digits.indexOf(digs[i]) + 1;
+    if (d === digits.length) {
+      digs[i] = '0';
+    } else {
+      digs[i] = digits[d];
+      carry = false;
+    }
+  }
+  if (carry) {
+    if (head === 'Z') {
+      return 'a0';
+    }
+    if (head === 'z') {
+      return null;
+    }
+    const h = String.fromCharCode(head.charCodeAt(0) + 1);
+    if (h > 'a') {
+      digs.push('0');
+    } else {
+      digs.pop();
+    }
+
+    return h + digs.join('');
+  } else {
+    return head + digs.join('');
+  }
+};
+
+// note that this may return null, as there is a smallest integer
+/**
+ * @param {string} x
+ * @param {string} digits
+ * @return {string | null}
+ */
+
+const decrementInteger = (x: string, digits: string) => {
+  validateInteger(x);
+  const [head, ...digs] = x.split('');
+  let borrow = true;
+  for (let i = digs.length - 1; borrow && i >= 0; i--) {
+    const d = digits.indexOf(digs[i]) - 1;
+    if (d === -1) {
+      digs[i] = digits.slice(-1);
+    } else {
+      digs[i] = digits[d];
+      borrow = false;
+    }
+  }
+  if (borrow) {
+    if (head === 'a') {
+      return 'Z' + digits.slice(-1);
+    }
+    if (head === 'A') {
+      return null;
+    }
+    const h = String.fromCharCode(head.charCodeAt(0) - 1);
+    if (h < 'Z') {
+      digs.push(digits.slice(-1));
+    } else {
+      digs.pop();
+    }
+
+    return h + digs.join('');
+  } else {
+    return head + digs.join('');
+  }
+};
+
+// `a` is an order key or null (START).
+// `b` is an order key or null (END).
+// `a < b` lexicographically if both are non-null.
+// digits is a string such as '0123456789' for base 10.  Digits must be in
+// ascending character code order!
+/**
+ * @param {string | null} a
+ * @param {string | null} b
+ * @param {string=} digits
+ * @return {string}
+ */
+export const generateKeyBetween = (a: string | null, b: string | null, digits = BASE_62_DIGITS) => {
+  if (a !== null) {
+    validateOrderKey(a);
+  }
+  if (b !== null) {
+    validateOrderKey(b);
+  }
+  if (a !== null && b !== null && a >= b) {
+    throw new Error(a + ' >= ' + b);
+  }
+  if (a === null) {
+    if (b === null) {
+      return INTEGER_ZERO;
+    }
+
+    const ib = getIntegerPart(b);
+    const fb = b.slice(ib.length);
+    if (ib === SMALLEST_INTEGER) {
+      return ib + midpoint('', fb, digits);
+    }
+    if (ib < b) {
+      return ib;
+    }
+    const res = decrementInteger(ib, digits);
+    if (res === null) {
+      throw new Error('cannot decrement any more');
+    }
+
+    return res;
+  }
+
+  if (b === null) {
+    const ia = getIntegerPart(a);
+    const fa = a.slice(ia.length);
+    const i = incrementInteger(ia, digits);
+
+    return i === null ? ia + midpoint(fa, null, digits) : i;
+  }
+
+  const ia = getIntegerPart(a);
+  const fa = a.slice(ia.length);
+  const ib = getIntegerPart(b);
+  const fb = b.slice(ib.length);
+  if (ia === ib) {
+    return ia + midpoint(fa, fb, digits);
+  }
+  const i = incrementInteger(ia, digits);
+  if (i === null) {
+    throw new Error('cannot increment any more');
+  }
+  if (i < b) {
+    return i;
+  }
+
+  return ia + midpoint(fa, null, digits);
+};
+
+/**
+ * same preconditions as generateKeysBetween.
+ * n >= 0.
+ * Returns an array of n distinct keys in sorted order.
+ * If a and b are both null, returns [a0, a1, ...]
+ * If one or the other is null, returns consecutive "integer"
+ * keys.  Otherwise, returns relatively short keys between
+ * a and b.
+ * @param {string | null} a
+ * @param {string | null} b
+ * @param {number} n
+ * @param {string} digits
+ * @return {string[]}
+ */
+export const generateNKeysBetween = (a: string | null, b: string | null, n: number, digits = BASE_62_DIGITS): string[] => {
+  if (n === 0) {
+    return [];
+  }
+  if (n === 1) {
+    return [generateKeyBetween(a, b, digits)];
+  }
+  if (b === null) {
+    let c = generateKeyBetween(a, b, digits);
+    const result = [c];
+    for (let i = 0; i < n - 1; i++) {
+      c = generateKeyBetween(c, b, digits);
+      result.push(c);
+    }
+
+    return result;
+  }
+  if (a === null) {
+    let c = generateKeyBetween(a, b, digits);
+    const result = [c];
+    for (let i = 0; i < n - 1; i++) {
+      c = generateKeyBetween(a, c, digits);
+      result.push(c);
+    }
+    result.reverse();
+
+    return result;
+  }
+  const mid = Math.floor(n / 2);
+  const c = generateKeyBetween(a, b, digits);
+
+  return [
+    ...generateNKeysBetween(a, c, mid, digits),
+    c,
+    ...generateNKeysBetween(c, b, n - mid - 1, digits),
+  ];
+};

package/src/dynamic-components/index.ts

@@ -0,0 +1,6 @@
+export { generateKeyBetween } from './fractional-indexing.js';
+export * from './paths.js';
+export * from './registry/index.js';
+export * from './tools.js';
+export * from './types.js';
+

package/src/dynamic-components/paths.ts

@@ -0,0 +1,194 @@
+import { isString } from '@/assertions/index.js';
+import { isArrayKey } from '@/paths/index.js';
+
+import {
+  isCollectionComponent,
+  isColumnComponent, isRepeatableCollectionComponent, isRowComponent,
+} from './registry/index.js';
+import { DynamicComponent } from './types.js';
+
+/**
+ * Get array with components founded by rpath
+ *
+ * @example
+ * const components = [
+ *  {
+ *    id: "xxx",
+ *    component: "collection",
+ *    props: {
+ *      components: [
+ *        {
+ *           id: "yyy",
+ *           component: "text-input",
+ *           props: {
+ *             label: "Title"
+ *           }
+ *        }
+ *      ]
+ *    }
+ *  }
+ * ]
+ *
+ * const { pathWithComponents } = getComponentsSubtreeByRPath(components, ['xxx', 'yyy']);
+ *
+ * // pathWithComponents
+ * // [
+ * //   {
+ * //     id: "xxx",
+ * //     component: "collection",
+ * //     ...
+ * //   },
+ * //   {
+ * //     id: "yyy",
+ * //     component: "text-input",
+ * //     ...
+ * //  }
+ * // ]
+ *
+ */
+export const getComponentsSubtreeByRPath = (components: DynamicComponent[], rpath: string[]) => {
+  const pathWithComponents: DynamicComponent[] = [];
+
+  deepGetComponentsSubtreeByRPath(components, rpath, pathWithComponents);
+
+  return {
+    pathWithComponents,
+    complete: pathWithComponents.length === rpath.length,
+  };
+};
+
+const deepGetComponentsSubtreeByRPath = (components: DynamicComponent[], rpath: string[], pathWithComponents: DynamicComponent[]) => {
+  const id = rpath[0];
+
+  const component = components.find((cmp) => cmp.id === id);
+
+  if (!component) {
+    return;
+  }
+
+  pathWithComponents.push(component);
+
+  if (!Array.isArray(component.props.components)) {
+    return;
+  }
+
+  deepGetComponentsSubtreeByRPath(component.props.components, rpath.slice(1), pathWithComponents);
+};
+
+/**
+ * Get array with components founded by values path.
+ *
+ * @example
+ * const components = [
+ *  {
+ *    id: "xxx",
+ *    component: "collection",
+ *    props: {
+ *      name: "seo",
+ *      components: [
+ *        {
+ *           id: "yyy",
+ *           component: "text-input",
+ *           props: {
+ *             label: "Title",
+ *             name: "title",
+ *           }
+ *        }
+ *      ]
+ *    }
+ *  }
+ * ]
+ *
+ * const { pathWithComponents } = getComponentsSubtreeByPath(components, ['seo', 'title']);
+ *
+ * // pathWithComponents
+ * // [
+ * //   {
+ * //     id: "xxx",
+ * //     component: "collection",
+ * //     ...
+ * //   },
+ * //   {
+ * //     id: "yyy",
+ * //     component: "text-input",
+ * //     ...
+ * //  }
+ * // ]
+ *
+ */
+export const getComponentsSubtreeByPath = (components: DynamicComponent[], path: (string | number)[]) => {
+  const pathWithComponents: DynamicComponent[] = [];
+  const complete = true;
+
+  deepGetComponentsSubtreeByPath(components, path, pathWithComponents, complete);
+
+  return {
+    pathWithComponents,
+    complete,
+  };
+};
+
+const deepFindComponentPathKey = (components: DynamicComponent[], key: string): DynamicComponent | null => {
+  for (const component of components) {
+    if ((component.props.name && component.props.name === key) || component.id === key) {
+      return component;
+    }
+
+    if (isRowComponent(component) || isColumnComponent(component)) {
+      const result = deepFindComponentPathKey(component.props.components, key);
+      if (result) {
+        return result;
+      }
+    }
+  }
+
+  return null;
+};
+
+const deepGetComponentsSubtreeByPath = (
+  components: DynamicComponent[],
+  path: (string | number)[],
+  pathWithComponents: DynamicComponent[],
+  complete: boolean,
+) => {
+  const key = path[0];
+
+  if (!isString(key)) {
+    complete = false;
+
+    return;
+  }
+
+  const component = deepFindComponentPathKey(components, key);
+
+  if (!component) {
+    complete = false;
+
+    return;
+  }
+
+  pathWithComponents.push(component);
+
+  /**
+   * Deep dive if repeatable collection.
+   *
+   * If next key is array key find in props.components next key after array key
+   *
+   * @example
+   * path = ['fields', 'id:xxx', 'title']
+   *
+   * cpnst key = 'fields';
+   * const nextKey = 'id:xxx', // array key
+   * const nextKeyAfterArrayKey = 'title';
+   */
+  if (isRepeatableCollectionComponent(component)) {
+    const nextKey = path[1];
+    if (isArrayKey(nextKey) && path[2]) {
+      deepGetComponentsSubtreeByPath(component.props.components, path.slice(2), pathWithComponents, complete);
+    }
+  }
+
+  if (isCollectionComponent(component)) {
+    deepGetComponentsSubtreeByPath(component.props.components, path.slice(1), pathWithComponents, complete);
+  }
+};

package/src/dynamic-components/registry/chats.ts

@@ -0,0 +1,24 @@
+import { RichText } from '../../data-objects/rich-text.js';
+import { DynamicComponent } from '../types.js';
+
+/* Text Message */
+export interface DChatTextMessage extends DynamicComponent {
+  component: 'chat-text-message';
+  props: {
+    content: RichText;
+  };
+}
+
+export const isChatTextMessageComponent = (component: DynamicComponent): component is DChatTextMessage => component.component === 'chat-text-message';
+
+/* Message Delay */
+export interface DChatMessageDelay extends DynamicComponent {
+  component: 'chat-message-delay';
+  props: {
+    delay: number;
+    typing: boolean;
+  };
+}
+
+// eslint-disable-next-line max-len
+export const isChatMessageDelayComponent = (component: DynamicComponent): component is DChatMessageDelay => component.component === 'chat-message-delay';

package/src/dynamic-components/registry/content.ts

@@ -0,0 +1,118 @@
+import { RichText } from '../../data-objects/rich-text.js';
+import { DynamicComponent } from '../types.js';
+
+/* TEXT INPUT */
+export interface DRichText extends DynamicComponent {
+  component: 'rich-text';
+  props: {
+    content: RichText;
+  };
+}
+
+export const isRichTextComponent = (component: DynamicComponent): component is DRichText => component.component === 'rich-text';
+
+/* RowSettings */
+export interface DEmbedCode extends DynamicComponent {
+  component: 'embed-code';
+  props: {
+    js?: string;
+    css?: string;
+    html?: string;
+    visible?: string;
+  };
+}
+
+export const isEmbedCodeComponent = (component: DynamicComponent): component is DEmbedCode => {
+  return component.component === 'embed-code';
+};
+
+/* Image */
+export interface DImage extends DynamicComponent {
+  component: 'embed-code';
+  props: {
+    imageId: string;
+  };
+}
+
+export const isImageComponent = (component: DynamicComponent): component is DImage => component.component === 'image';
+
+/* Legacy Content */
+export interface DLegacyContent extends DynamicComponent {
+  component: 'legacy-content';
+  props: {
+    html: string;
+  };
+}
+
+export const isLegacyContentComponent = (component: DynamicComponent): component is DLegacyContent => component.component === 'legacy-content';
+
+/* Bible Quote */
+export interface DBibleQuote extends DynamicComponent {
+  component: 'bible-quote';
+  props: {
+    verseId: string;
+  };
+}
+
+export const isBibleQuoteComponent = (component: DynamicComponent): component is DBibleQuote => component.component === 'bible-quote';
+
+/* Bible Passage */
+export interface DBiblePassage extends DynamicComponent {
+  component: 'bible-passage';
+  props: {
+    passage: string;
+  };
+}
+
+export const isBiblePassageComponent = (component: DynamicComponent): component is DBiblePassage => component.component === 'bible-passage';
+
+/* TESTS */
+
+export interface TestItemVariant {
+  id: string;
+  content: RichText;
+  feedback?: RichText;
+  correct?: boolean;
+}
+
+export interface TestItem {
+  id: string;
+  content: RichText;
+  variants: TestItemVariant[];
+}
+
+export interface DTest extends DynamicComponent {
+  component: 'test';
+  props: {
+    title?: string;
+    items: TestItem[];
+    milestone?: string;
+  };
+}
+
+export const isTestComponent = (component: DynamicComponent): component is DTest => component.component === 'test';
+
+export interface DStatement extends DynamicComponent {
+  component: 'statement';
+  props: {
+    content: RichText;
+  };
+}
+
+export const isStatementComponent = (component: DynamicComponent): component is DStatement => component.component === 'statement';
+
+export interface DPractice extends DynamicComponent {
+  component: 'practice';
+  props: {
+    title?: string;
+    content: RichText;
+
+    /**
+     * Date when the practice should be checked in ISO 8601 format
+     * @example '2023-10-01T00:08:00Z'
+     */
+    checkAt?: string;
+  };
+}
+
+export const isPracticeComponent = (component: DynamicComponent): component is DPractice => component.component === 'practice';