@cntrl-site/sdk-nextjs 1.8.40 → 1.9.1

package/src/interactions/ItemInteractionCtrl.ts

@@ -1,78 +1,78 @@
-import { InteractionsRegistryPort, ItemInteractionCtrl } from './types';
-import { getTransition } from './getTransition';
-import { getStyleKeysFromCSSProperty } from './CSSPropertyNameMap';
-import { InteractionItemTrigger } from '@cntrl-site/sdk';
-
-export class ItemInteractionController implements ItemInteractionCtrl {
-  private transitionsInProgress: Set<string> = new Set();
-  private actionReceiver: ((type: 'play' | 'pause') => void) | undefined;
-
-  constructor(
-    private itemId: string,
-    private registry: InteractionsRegistryPort,
-    private onChange: () => void,
-  ) {
-    this.registry.register(itemId, this);
-  }
-
-  getState(keys: string[]) {
-    const stateProps = this.registry.getStatePropsForItem(this.itemId);
-    const styles = keys.reduce<Record<string, string | number>>((map, styleKey) => {
-      const prop = stateProps[styleKey];
-      if (prop?.value === undefined) return map;
-      map[styleKey] = prop.value;
-      return map;
-    }, {});
-    const transition = getTransition(stateProps, keys);
-    return {
-      styles,
-      transition
-    };
-  }
-
-  getHasTrigger(itemId: string, triggerType: InteractionItemTrigger['type']): boolean {
-    const triggers = this.registry.getItemAvailableTriggers(itemId);
-    return triggers.has(triggerType);
-  }
-
-  sendTrigger(type: 'click' | 'hover-in' | 'hover-out') {
-    this.registry.notifyItemTrigger(this.itemId, type);
-  }
-
-  receiveAction(type: 'play' | 'pause') {
-    this.actionReceiver?.(type);
-  }
-
-  setActionReceiver(action: (type: 'play' | 'pause') => void) {
-    this.actionReceiver = action;
-  }
-
-  handleTransitionStart = (types: string[]) => {
-    this.transitionsInProgress.clear();
-    for (const type of types) {
-      this.transitionsInProgress.add(type);
-    }
-  };
-
-  handleTransitionEnd = (cssPropKey: string) => {
-    if (cssPropKey.startsWith('border-') && cssPropKey.endsWith('-radius')) {
-      cssPropKey = 'border-radius';
-    }
-    if (cssPropKey.startsWith('border-') && cssPropKey.endsWith('-width')) {
-      cssPropKey = 'border-width';
-    }
-    const styleKeys = getStyleKeysFromCSSProperty(cssPropKey);
-    for (const key of styleKeys) {
-      const found = this.transitionsInProgress.has(key);
-      if (!found) continue;
-      this.transitionsInProgress.delete(key);
-      break;
-    }
-    if (this.transitionsInProgress.size !== 0) return;
-    this.registry.notifyTransitionEnd(this.itemId);
-  };
-
-  receiveChange() {
-    this.onChange();
-  }
-}
+import { InteractionsRegistryPort, ItemInteractionCtrl } from './types';
+import { getTransition } from './getTransition';
+import { getStyleKeysFromCSSProperty } from './CSSPropertyNameMap';
+import { FillLayer, InteractionItemTrigger } from '@cntrl-site/sdk';
+
+export class ItemInteractionController implements ItemInteractionCtrl {
+  private transitionsInProgress: Set<string> = new Set();
+  private actionReceiver: ((type: 'play' | 'pause') => void) | undefined;
+
+  constructor(
+    private itemId: string,
+    private registry: InteractionsRegistryPort,
+    private onChange: () => void,
+  ) {
+    this.registry.register(itemId, this);
+  }
+
+  getState<T>(keys: string[]) {
+    const stateProps = this.registry.getStatePropsForItem(this.itemId);
+    const styles = keys.reduce<Record<string, T>>((map, styleKey) => {
+      const prop = stateProps[styleKey];
+      if (prop?.value === undefined) return map;
+      map[styleKey] = prop.value as T;
+      return map;
+    }, {});
+    const transition = getTransition(stateProps, keys);
+    return {
+      styles,
+      transition
+    };
+  }
+
+  getHasTrigger(itemId: string, triggerType: InteractionItemTrigger['type']): boolean {
+    const triggers = this.registry.getItemAvailableTriggers(itemId);
+    return triggers.has(triggerType);
+  }
+
+  sendTrigger(type: 'click' | 'hover-in' | 'hover-out') {
+    this.registry.notifyItemTrigger(this.itemId, type);
+  }
+
+  receiveAction(type: 'play' | 'pause') {
+    this.actionReceiver?.(type);
+  }
+
+  setActionReceiver(action: (type: 'play' | 'pause') => void) {
+    this.actionReceiver = action;
+  }
+
+  handleTransitionStart = (types: string[]) => {
+    this.transitionsInProgress.clear();
+    for (const type of types) {
+      this.transitionsInProgress.add(type);
+    }
+  };
+
+  handleTransitionEnd = (cssPropKey: string) => {
+    if (cssPropKey.startsWith('border-') && cssPropKey.endsWith('-radius')) {
+      cssPropKey = 'border-radius';
+    }
+    if (cssPropKey.startsWith('border-') && cssPropKey.endsWith('-width')) {
+      cssPropKey = 'border-width';
+    }
+    const styleKeys = getStyleKeysFromCSSProperty(cssPropKey);
+    for (const key of styleKeys) {
+      const found = this.transitionsInProgress.has(key);
+      if (!found) continue;
+      this.transitionsInProgress.delete(key);
+      break;
+    }
+    if (this.transitionsInProgress.size !== 0) return;
+    this.registry.notifyTransitionEnd(this.itemId);
+  };
+
+  receiveChange() {
+    this.onChange();
+  }
+}

package/src/interactions/getTransition.ts

@@ -1,27 +1,27 @@
-import { CSSPropertyNameMap } from './CSSPropertyNameMap';
-
-export function getTransition(
-  state: Record<string, StateInfo>,
-  keys: string[]
-): string {
-  if (Object.keys(state).length === 0) return 'none';
-  const transitions = [];
-  for (const [key, params] of Object.entries(state)) {
-    if (!keys.includes(key) || !params.transition) continue;
-    const { transition: { duration, delay, timing } } = params;
-    const cssKey = CSSPropertyNameMap[key]!;
-    const nonZeroDuration = Math.max(duration, 0.01);
-    transitions.push(`${cssKey} ${nonZeroDuration}ms ${timing} ${delay}ms`);
-  }
-  return transitions.length > 0
-    ? transitions.join(', ')
-    : 'none';
-}
-
-type StateInfo = {
-  transition?: {
-    duration: number;
-    delay: number;
-    timing: string;
-  };
-};
+import { CSSPropertyNameMap } from './CSSPropertyNameMap';
+
+export function getTransition(
+  state: Record<string, StateInfo>,
+  keys: string[]
+): string {
+  if (Object.keys(state).length === 0) return 'none';
+  const transitions = [];
+  for (const [key, params] of Object.entries(state)) {
+    if (!keys.includes(key) || !params.transition) continue;
+    const { transition: { duration, delay, timing } } = params;
+    const cssKey = CSSPropertyNameMap[key]!;
+    const nonZeroDuration = Math.max(duration, 0.01);
+    transitions.push(`${cssKey} ${nonZeroDuration}ms ${timing} ${delay}ms`);
+  }
+  return transitions.length > 0
+    ? transitions.join(', ')
+    : 'none';
+}
+
+type StateInfo = {
+  transition?: {
+    duration: number;
+    delay: number;
+    timing: string;
+  };
+};

package/src/interactions/types.ts

@@ -1,36 +1,36 @@
-import { ArticleItemType, InteractionItemTrigger, ItemState } from '@cntrl-site/sdk';
-
-export interface ItemInteractionCtrl {
-  getState(keys: string[]): StateCSSInfo;
-  getHasTrigger(itemId: string, triggerType: InteractionItemTrigger['type']): boolean;
-  sendTrigger(type: 'click' | 'hover-in' | 'hover-out'): void;
-  handleTransitionEnd?: (styleKey: string) => void;
-  handleTransitionStart?: (styleKeys: string[]) => void;
-  receiveChange: () => void;
-  receiveAction: (type: 'play' | 'pause') => void;
-  setActionReceiver: (action: (type: 'play' | 'pause') => void) => void;
-}
-
-export interface InteractionsRegistryPort {
-  register(itemId: string, ctrl: ItemInteractionCtrl): void;
-  getStatePropsForItem(itemId: string): StateProps;
-  getItemAvailableTriggers(itemId: string): Set<InteractionItemTrigger['type']>;
-  notifyItemTrigger(itemId: string, type: TriggerType): void;
-  notifyTransitionEnd(itemId: string): void;
-}
-
-type StateCSSInfo = {
-  styles: Partial<Record<string, string | number>>;
-  transition?: string;
-};
-
-type StateProps = Record<keyof ItemState<ArticleItemType>, {
-  value?: string | number;
-  transition?: {
-    timing: string;
-    duration: number;
-    delay: number;
-  };
-}>;
-
-type TriggerType = 'click' | 'hover-in' | 'hover-out';
+import { ArticleItemType, FillLayer, InteractionItemTrigger, ItemState } from '@cntrl-site/sdk';
+
+export interface ItemInteractionCtrl {
+  getState<T>(keys: string[]): StateCSSInfo<T>;
+  getHasTrigger(itemId: string, triggerType: InteractionItemTrigger['type']): boolean;
+  sendTrigger(type: 'click' | 'hover-in' | 'hover-out'): void;
+  handleTransitionEnd?: (styleKey: string) => void;
+  handleTransitionStart?: (styleKeys: string[]) => void;
+  receiveChange: () => void;
+  receiveAction: (type: 'play' | 'pause') => void;
+  setActionReceiver: (action: (type: 'play' | 'pause') => void) => void;
+}
+
+export interface InteractionsRegistryPort {
+  register(itemId: string, ctrl: ItemInteractionCtrl): void;
+  getStatePropsForItem(itemId: string): StateProps<unknown>;
+  getItemAvailableTriggers(itemId: string): Set<InteractionItemTrigger['type']>;
+  notifyItemTrigger(itemId: string, type: TriggerType): void;
+  notifyTransitionEnd(itemId: string): void;
+}
+
+type StateCSSInfo<T> = {
+  styles: Partial<Record<string, T>>;
+  transition?: string;
+};
+
+type StateProps<T> = Record<keyof ItemState<ArticleItemType>, {
+  value?: T;
+  transition?: {
+    timing: string;
+    duration: number;
+    delay: number;
+  };
+}>;
+
+type TriggerType = 'click' | 'hover-in' | 'hover-out';

package/src/interactions/useItemInteractionCtrl.ts

@@ -1,18 +1,18 @@
-import { useMemo, useState } from 'react';
-import { ItemInteractionController } from './ItemInteractionCtrl';
-import { ItemInteractionCtrl } from './types';
-import { useInteractionsRegistry } from '../provider/InteractionsContext';
-
-export function useItemInteractionCtrl(itemId: string): ItemInteractionCtrl | undefined {
-  const [_, triggerRender] = useState(0);
-  const registry = useInteractionsRegistry();
-  const ctrl = useMemo(() => {
-    if (!registry) return;
-    return new ItemInteractionController(
-      itemId,
-      registry,
-      () => triggerRender(prev => prev + 1)
-    );
-  }, [itemId, registry]);
-  return ctrl;
-}
+import { useMemo, useState } from 'react';
+import { ItemInteractionController } from './ItemInteractionCtrl';
+import { ItemInteractionCtrl } from './types';
+import { useInteractionsRegistry } from '../provider/InteractionsContext';
+
+export function useItemInteractionCtrl(itemId: string): ItemInteractionCtrl | undefined {
+  const [_, triggerRender] = useState(0);
+  const registry = useInteractionsRegistry();
+  const ctrl = useMemo(() => {
+    if (!registry) return;
+    return new ItemInteractionController(
+      itemId,
+      registry,
+      () => triggerRender(prev => prev + 1)
+    );
+  }, [itemId, registry]);
+  return ctrl;
+}

package/src/provider/ArticleRectContext.ts

@@ -1,4 +1,4 @@
-import { createContext } from 'react';
-import { ArticleRectObserver } from '../utils/ArticleRectManager/ArticleRectObserver';
-
-export const ArticleRectContext = createContext<ArticleRectObserver | null>(null);
+import { createContext } from 'react';
+import { ArticleRectObserver } from '../utils/ArticleRectManager/ArticleRectObserver';
+
+export const ArticleRectContext = createContext<ArticleRectObserver | null>(null);

package/src/provider/CntrlContext.ts

@@ -1,5 +1,5 @@
-import { createContext } from 'react';
-import { CntrlSdkContext } from './CntrlSdkContext';
-import { cntrlSdkContext } from './defaultContext';
-
-export const CntrlContext = createContext<CntrlSdkContext>(cntrlSdkContext);
+import { createContext } from 'react';
+import { CntrlSdkContext } from './CntrlSdkContext';
+import { cntrlSdkContext } from './defaultContext';
+
+export const CntrlContext = createContext<CntrlSdkContext>(cntrlSdkContext);

package/src/provider/CntrlProvider.tsx

@@ -1,11 +1,11 @@
-import { FC, PropsWithChildren } from 'react';
-import { CntrlContext } from './CntrlContext';
-import { cntrlSdkContext } from './defaultContext';
-
-export const CntrlProvider: FC<PropsWithChildren<{}>> = ({ children }) => {
-  return (
-    <CntrlContext.Provider value={cntrlSdkContext}>
-      {children}
-    </CntrlContext.Provider>
-  );
-};
+import { FC, PropsWithChildren } from 'react';
+import { CntrlContext } from './CntrlContext';
+import { cntrlSdkContext } from './defaultContext';
+
+export const CntrlProvider: FC<PropsWithChildren<{}>> = ({ children }) => {
+  return (
+    <CntrlContext.Provider value={cntrlSdkContext}>
+      {children}
+    </CntrlContext.Provider>
+  );
+};

package/src/provider/CntrlSdkContext.ts

@@ -1,83 +1,83 @@
-import { CustomItemRegistry } from './CustomItemRegistry';
-import { Article, Section, Layout, Project, SectionHeight, components, Component as TComponent } from '@cntrl-site/sdk';
-import { CustomSectionRegistry } from './CustomSectionRegistry';
-import { Component } from 'react';
-
-interface SdkContextInitProps {
-  project: Project;
-  article: Article;
-}
-
-export class CntrlSdkContext {
-  private _layouts: Layout[] = [];
-  private _fonts?: Project['fonts'] = undefined;
-  private sectionHeightMap: Map<string, Record<string, SectionHeight>> = new Map();
-  private components: Map<string, TComponent> = new Map();
-
-  constructor(
-    public readonly customItems: CustomItemRegistry,
-    public readonly customSections: CustomSectionRegistry
-  ) {}
-
-  async resolveSectionData(sections: Section[]): Promise<Record<string, any>> {
-    const resolvers = sections.map(section => {
-      const resolver = section.name ? this.customSections.getResolver(section.name) : undefined;
-      if (!resolver) return;
-      return {
-        name: section.name,
-        resolver
-      };
-    }).filter(isDefined);
-    return Object.fromEntries(
-      await Promise.all(resolvers.map(async ({ name, resolver }) => [name, await resolver()]))
-    );
-  }
-
-  init({ project, article }: SdkContextInitProps) {
-    this.setLayouts(project.layouts);
-    this.setComponents(components);
-    this.setFonts(project.fonts);
-    this.setSectionsHeight(article.sections);
-  }
-
-  setLayouts(layouts: Layout[]) {
-    this._layouts = layouts;
-  }
-
-  private setComponents(components: TComponent[]) {
-    for (const component of components) {
-      this.components.set(component.id, component);
-    }
-  }
-
-  private setFonts(fonts: Project['fonts']) {
-    this._fonts = fonts;
-  }
-
-  setSectionsHeight(sections: Section[]) {
-    for (const section of sections) {
-      this.sectionHeightMap.set(section.id, section.height);
-    }
-  }
-
-  getSectionHeightData(sectionId: string) {
-    const sectionHeightData = this.sectionHeightMap.get(sectionId);
-    return sectionHeightData;
-  }
-
-  get layouts(): Layout[] {
-    return this._layouts;
-  }
-
-  get fonts(): Project['fonts'] | undefined {
-    return this._fonts;
-  }
-
-  getComponent(id: string): TComponent | undefined {
-    return this.components.get(id);
-  }
-}
-
-function isDefined<T>(value: T): value is Exclude<T, undefined> {
-  return value !== undefined;
-}
+import { CustomItemRegistry } from './CustomItemRegistry';
+import { Article, Section, Layout, Project, SectionHeight, components, Component as TComponent } from '@cntrl-site/sdk';
+import { CustomSectionRegistry } from './CustomSectionRegistry';
+import { Component } from 'react';
+
+interface SdkContextInitProps {
+  project: Project;
+  article: Article;
+}
+
+export class CntrlSdkContext {
+  private _layouts: Layout[] = [];
+  private _fonts?: Project['fonts'] = undefined;
+  private sectionHeightMap: Map<string, Record<string, SectionHeight>> = new Map();
+  private components: Map<string, TComponent> = new Map();
+
+  constructor(
+    public readonly customItems: CustomItemRegistry,
+    public readonly customSections: CustomSectionRegistry
+  ) {}
+
+  async resolveSectionData(sections: Section[]): Promise<Record<string, any>> {
+    const resolvers = sections.map(section => {
+      const resolver = section.name ? this.customSections.getResolver(section.name) : undefined;
+      if (!resolver) return;
+      return {
+        name: section.name,
+        resolver
+      };
+    }).filter(isDefined);
+    return Object.fromEntries(
+      await Promise.all(resolvers.map(async ({ name, resolver }) => [name, await resolver()]))
+    );
+  }
+
+  init({ project, article }: SdkContextInitProps) {
+    this.setLayouts(project.layouts);
+    this.setComponents(components);
+    this.setFonts(project.fonts);
+    this.setSectionsHeight(article.sections);
+  }
+
+  setLayouts(layouts: Layout[]) {
+    this._layouts = layouts;
+  }
+
+  private setComponents(components: TComponent[]) {
+    for (const component of components) {
+      this.components.set(component.id, component);
+    }
+  }
+
+  private setFonts(fonts: Project['fonts']) {
+    this._fonts = fonts;
+  }
+
+  setSectionsHeight(sections: Section[]) {
+    for (const section of sections) {
+      this.sectionHeightMap.set(section.id, section.height);
+    }
+  }
+
+  getSectionHeightData(sectionId: string) {
+    const sectionHeightData = this.sectionHeightMap.get(sectionId);
+    return sectionHeightData;
+  }
+
+  get layouts(): Layout[] {
+    return this._layouts;
+  }
+
+  get fonts(): Project['fonts'] | undefined {
+    return this._fonts;
+  }
+
+  getComponent(id: string): TComponent | undefined {
+    return this.components.get(id);
+  }
+}
+
+function isDefined<T>(value: T): value is Exclude<T, undefined> {
+  return value !== undefined;
+}

package/src/provider/CustomItemRegistry.ts

@@ -1,14 +1,14 @@
-import { CustomItemComponent } from './CustomItemTypes';
-
-export class CustomItemRegistry {
-  private definitions: Map<string, CustomItemComponent<string>> = new Map();
-
-  define<T extends string>(type: T, component: CustomItemComponent<T>): this {
-    this.definitions.set(type, component);
-    return this;
-  }
-
-  get(type: string): CustomItemComponent<string> | undefined {
-    return this.definitions.get(type);
-  }
-}
+import { CustomItemComponent } from './CustomItemTypes';
+
+export class CustomItemRegistry {
+  private definitions: Map<string, CustomItemComponent<string>> = new Map();
+
+  define<T extends string>(type: T, component: CustomItemComponent<T>): this {
+    this.definitions.set(type, component);
+    return this;
+  }
+
+  get(type: string): CustomItemComponent<string> | undefined {
+    return this.definitions.get(type);
+  }
+}

package/src/provider/CustomItemTypes.ts

@@ -1,3 +1,3 @@
-import { FC } from 'react';
-
-export type CustomItemComponent<T extends string> = FC<{}>;
+import { FC } from 'react';
+
+export type CustomItemComponent<T extends string> = FC<{}>;

package/src/provider/CustomSectionRegistry.ts

@@ -1,25 +1,25 @@
-import React, { PropsWithChildren } from 'react';
-
-export class CustomSectionRegistry {
-  private definitions: Map<string, CustomSection<any>> = new Map();
-
-  define<TData>(name: string, section: CustomSection<TData>): this {
-    this.definitions.set(name, section);
-    return this;
-  }
-
-  getComponent(name: string): CustomSectionComponent<any> | undefined {
-    return this.definitions.get(name)?.component;
-  }
-
-  getResolver(name: string): (() => Promise<any>) | undefined {
-    return this.definitions.get(name)?.dataResolver;
-  }
-}
-
-type CustomSection<TData = {}> = {
-  component: CustomSectionComponent<TData>,
-  dataResolver?: () => Promise<TData>
-};
-
-type CustomSectionComponent<TData> = React.FC<PropsWithChildren<{ data: TData }>>;
+import React, { PropsWithChildren } from 'react';
+
+export class CustomSectionRegistry {
+  private definitions: Map<string, CustomSection<any>> = new Map();
+
+  define<TData>(name: string, section: CustomSection<TData>): this {
+    this.definitions.set(name, section);
+    return this;
+  }
+
+  getComponent(name: string): CustomSectionComponent<any> | undefined {
+    return this.definitions.get(name)?.component;
+  }
+
+  getResolver(name: string): (() => Promise<any>) | undefined {
+    return this.definitions.get(name)?.dataResolver;
+  }
+}
+
+type CustomSection<TData = {}> = {
+  component: CustomSectionComponent<TData>,
+  dataResolver?: () => Promise<TData>
+};
+
+type CustomSectionComponent<TData> = React.FC<PropsWithChildren<{ data: TData }>>;