@cntrl-site/sdk-nextjs 1.6.11 → 1.6.12

package/src/common/useCurrentLayout.ts

@@ -1,52 +1,52 @@
-import { useCntrlContext } from '../provider/useCntrlContext';
-import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
-import { ArticleRectContext } from '../provider/ArticleRectContext';
-
-interface LayoutData {
-  layoutId: string;
-  exemplary: number;
-  start: number;
-  end: number;
-}
-
-type UseCurrentLayoutReturn = {
-  layoutId: string | undefined;
-  layoutDeviation: number;
-};
-
-export const useCurrentLayout = (): UseCurrentLayoutReturn => {
-  const { layouts } = useCntrlContext();
-  const articleRectObserver = useContext(ArticleRectContext);
-  const layoutRanges = useMemo(() => {
-    const sorted = layouts.slice().sort((la, lb) => la.startsWith - lb.startsWith);
-    return sorted.reduce<LayoutData[]>((acc, layout, i, layouts) => {
-      const next = layouts[i + 1];
-      return [
-        ...acc,
-        {
-          layoutId: layout.id,
-          exemplary: layout.exemplary,
-          start: layout.startsWith,
-          end: next ? next.startsWith : Number.MAX_SAFE_INTEGER
-        }
-      ];
-    }, []);
-  }, [layouts]);
-  const getCurrentLayout = useCallback((articleWidth: number) => {
-    const range = layoutRanges.find(l => articleWidth >= l.start && articleWidth < l.end);
-    return range;
-  }, [layoutRanges]);
-  const [layoutId, setLayoutId] = useState<string | undefined>(undefined);
-  const [deviation, setDeviation] = useState(1);
-  useEffect(() => {
-    if (!articleRectObserver) return;
-    return articleRectObserver.on('resize', () => {
-      const articleWidth = articleRectObserver.width;
-      const { layoutId, exemplary } = getCurrentLayout(articleWidth)!;
-      setLayoutId(layoutId);
-      setDeviation(articleWidth / exemplary);
-    });
-  }, [articleRectObserver, getCurrentLayout]);
-
-  return { layoutId, layoutDeviation: deviation };
-};
+import { useCntrlContext } from '../provider/useCntrlContext';
+import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { ArticleRectContext } from '../provider/ArticleRectContext';
+
+interface LayoutData {
+  layoutId: string;
+  exemplary: number;
+  start: number;
+  end: number;
+}
+
+type UseCurrentLayoutReturn = {
+  layoutId: string | undefined;
+  layoutDeviation: number;
+};
+
+export const useCurrentLayout = (): UseCurrentLayoutReturn => {
+  const { layouts } = useCntrlContext();
+  const articleRectObserver = useContext(ArticleRectContext);
+  const layoutRanges = useMemo(() => {
+    const sorted = layouts.slice().sort((la, lb) => la.startsWith - lb.startsWith);
+    return sorted.reduce<LayoutData[]>((acc, layout, i, layouts) => {
+      const next = layouts[i + 1];
+      return [
+        ...acc,
+        {
+          layoutId: layout.id,
+          exemplary: layout.exemplary,
+          start: layout.startsWith,
+          end: next ? next.startsWith : Number.MAX_SAFE_INTEGER
+        }
+      ];
+    }, []);
+  }, [layouts]);
+  const getCurrentLayout = useCallback((articleWidth: number) => {
+    const range = layoutRanges.find(l => articleWidth >= l.start && articleWidth < l.end);
+    return range;
+  }, [layoutRanges]);
+  const [layoutId, setLayoutId] = useState<string | undefined>(undefined);
+  const [deviation, setDeviation] = useState(1);
+  useEffect(() => {
+    if (!articleRectObserver) return;
+    return articleRectObserver.on('resize', () => {
+      const articleWidth = articleRectObserver.width;
+      const { layoutId, exemplary } = getCurrentLayout(articleWidth)!;
+      setLayoutId(layoutId);
+      setDeviation(articleWidth / exemplary);
+    });
+  }, [articleRectObserver, getCurrentLayout]);
+
+  return { layoutId, layoutDeviation: deviation };
+};

package/src/common/useExemplary.ts

@@ -1,9 +1,9 @@
-import { useCntrlContext } from "../provider/useCntrlContext";
-import { useLayoutContext } from "../components/useLayoutContext";
-
-export const useExemplary = () => {
-  const { layouts } = useCntrlContext();
-  const layout = useLayoutContext();
-  const exemplary = layouts.find(l => l.id === layout)?.exemplary ?? 1;
-  return exemplary;
-};
+import { useCntrlContext } from "../provider/useCntrlContext";
+import { useLayoutContext } from "../components/useLayoutContext";
+
+export const useExemplary = () => {
+  const { layouts } = useCntrlContext();
+  const layout = useLayoutContext();
+  const exemplary = layouts.find(l => l.id === layout)?.exemplary ?? 1;
+  return exemplary;
+};

package/src/common/useItemFXData.ts

@@ -1,47 +1,47 @@
-import { ImageItem, KeyframeType, VideoItem } from '@cntrl-site/sdk';
-import { useKeyframeValue } from './useKeyframeValue';
-
-const baseVariables = `precision mediump float;
-uniform sampler2D u_image;
-uniform sampler2D u_pattern;
-uniform vec2 u_imgDimensions;
-uniform vec2 u_patternDimensions;
-uniform float u_time;
-uniform vec2 u_cursor;
-varying vec2 v_texCoord;`;
-
-export function useItemFXData(item: ImageItem | VideoItem, sectionId: string): FXData {
-  const { fragmentShader: shaderBody, FXControls } = item.commonParams;
-  const controls = FXControls ?? [];
-  const controlsVariables = controls.map((c) => `uniform ${c.type} ${c.shaderParam};`)
-    .join('\n');
-  const fragmentShader = `${baseVariables}\n${controlsVariables}\n${shaderBody}`;
-  const controlsValues = useKeyframeValue(
-    item,
-    KeyframeType.FXParams,
-    () => {
-      const defaultValue = controls.reduce<Record<string, ControlValue>>((acc, control) => {
-        if (Array.isArray(control.value)) {
-          acc[control.shaderParam] = control.value[0];
-        } else {
-          acc[control.shaderParam] = control.value;
-        }
-        return acc;
-      }, {});
-      return defaultValue;
-    },
-    (animator, scroll, value) => animator.getFXParams(value, scroll),
-    sectionId,
-  );
-  return {
-    fragmentShader,
-    controlsValues
-  };
-}
-
-type FXData = {
-  fragmentShader: string;
-  controlsValues: Record<string, ControlValue>;
-}
-
-type ControlValue = number;
+import { ImageItem, KeyframeType, VideoItem } from '@cntrl-site/sdk';
+import { useKeyframeValue } from './useKeyframeValue';
+
+const baseVariables = `precision mediump float;
+uniform sampler2D u_image;
+uniform sampler2D u_pattern;
+uniform vec2 u_imgDimensions;
+uniform vec2 u_patternDimensions;
+uniform float u_time;
+uniform vec2 u_cursor;
+varying vec2 v_texCoord;`;
+
+export function useItemFXData(item: ImageItem | VideoItem, sectionId: string): FXData {
+  const { fragmentShader: shaderBody, FXControls } = item.commonParams;
+  const controls = FXControls ?? [];
+  const controlsVariables = controls.map((c) => `uniform ${c.type} ${c.shaderParam};`)
+    .join('\n');
+  const fragmentShader = `${baseVariables}\n${controlsVariables}\n${shaderBody}`;
+  const controlsValues = useKeyframeValue(
+    item,
+    KeyframeType.FXParams,
+    () => {
+      const defaultValue = controls.reduce<Record<string, ControlValue>>((acc, control) => {
+        if (Array.isArray(control.value)) {
+          acc[control.shaderParam] = control.value[0];
+        } else {
+          acc[control.shaderParam] = control.value;
+        }
+        return acc;
+      }, {});
+      return defaultValue;
+    },
+    (animator, scroll, value) => animator.getFXParams(value, scroll),
+    sectionId,
+  );
+  return {
+    fragmentShader,
+    controlsValues
+  };
+}
+
+type FXData = {
+  fragmentShader: string;
+  controlsValues: Record<string, ControlValue>;
+}
+
+type ControlValue = number;

package/src/common/useKeyframeValue.ts

@@ -1,85 +1,85 @@
-import { KeyframeType, ItemAny } from '@cntrl-site/sdk';
-import isEqual from 'lodash.isequal';
-import { DependencyList, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
-import { ArticleRectContext } from '../provider/ArticleRectContext';
-import { KeyframesContext } from '../provider/KeyframesContext';
-import { AnimationData, Animator } from '../utils/Animator/Animator';
-import { useLayoutContext } from '../components/useLayoutContext';
-
-export type AnimatorGetter<T> = (animator: Animator, scroll: number, value: T) => T;
-type ItemParamGetter<T> = (item: ItemAny, layoutId: string | undefined) => T;
-const emptyDeps: DependencyList = [];
-
-export function useKeyframeValue<T>(
-  item: ItemAny,
-  type: KeyframeType,
-  itemParamsGetter: ItemParamGetter<T>,
-  animatorGetter: AnimatorGetter<T>,
-  sectionId: string,
-  deps: DependencyList = emptyDeps
-): T {
-  const animatorGetterRef = useRef(animatorGetter);
-  const itemParamsGetterRef = useRef(itemParamsGetter);
-
-  animatorGetterRef.current = animatorGetter;
-  itemParamsGetterRef.current = itemParamsGetter;
-
-  const articleRectObserver = useContext(ArticleRectContext);
-  const layoutId = useLayoutContext();
-  const keyframesRepo = useContext(KeyframesContext);
-  const keyframes = useMemo(() => keyframesRepo.getItemKeyframes(item.id).filter(kf => kf.type === type), [item.id, keyframesRepo, type]);
-  const paramValue = useMemo<T>(() => {
-    return itemParamsGetterRef.current(item, layoutId);
-  }, [item, layoutId, ...deps]);
-
-  const [adjustedValue, setAdjustedValue] = useState<T>(paramValue);
-  const adjustedValueRef = useRef<T>(adjustedValue);
-  adjustedValueRef.current = adjustedValue;
-
-  const animator = useMemo(() => {
-    if (!layoutId || !keyframes.length) return;
-    const animationData = keyframes
-      .filter(k => k.layoutId === layoutId)
-      .map<AnimationData<KeyframeType>>(({ position, type, value }) => ({
-        position,
-        type,
-        value
-      }));
-    return new Animator(animationData);
-  }, [keyframes, layoutId]);
-
-  const handleKeyframeValue = useCallback((scroll: number) => {
-    if (!animator) return;
-    const newValue = animatorGetterRef.current(animator, scroll, paramValue);
-    if (!isEqual(newValue, adjustedValueRef.current)) {
-      setAdjustedValue(newValue);
-    }
-  }, [animator, paramValue]);
-
-  useEffect(() => {
-    setAdjustedValue(paramValue);
-  }, [paramValue]);
-
-  useEffect(() => {
-    if (!articleRectObserver || !animator) return;
-    const scroll = articleRectObserver.getSectionScroll(sectionId);
-    handleKeyframeValue(scroll);
-  }, [articleRectObserver, handleKeyframeValue, animator]);
-
-  useEffect(() => {
-    if (!articleRectObserver || !animator) return;
-    return articleRectObserver.on('resize', () => {
-      const scroll = articleRectObserver.getSectionScroll(sectionId);
-      handleKeyframeValue(scroll);
-    });
-  }, [handleKeyframeValue, articleRectObserver, animator]);
-
-  useEffect(() => {
-    if (!articleRectObserver || !animator) return;
-    return articleRectObserver.on('scroll', () => {
-      const scroll = articleRectObserver.getSectionScroll(sectionId);
-      handleKeyframeValue(scroll);
-    });
-  }, [handleKeyframeValue, articleRectObserver, animator]);
-  return keyframes.length ? adjustedValue : paramValue;
-}
+import { KeyframeType, ItemAny } from '@cntrl-site/sdk';
+import isEqual from 'lodash.isequal';
+import { DependencyList, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { ArticleRectContext } from '../provider/ArticleRectContext';
+import { KeyframesContext } from '../provider/KeyframesContext';
+import { AnimationData, Animator } from '../utils/Animator/Animator';
+import { useLayoutContext } from '../components/useLayoutContext';
+
+export type AnimatorGetter<T> = (animator: Animator, scroll: number, value: T) => T;
+type ItemParamGetter<T> = (item: ItemAny, layoutId: string | undefined) => T;
+const emptyDeps: DependencyList = [];
+
+export function useKeyframeValue<T>(
+  item: ItemAny,
+  type: KeyframeType,
+  itemParamsGetter: ItemParamGetter<T>,
+  animatorGetter: AnimatorGetter<T>,
+  sectionId: string,
+  deps: DependencyList = emptyDeps
+): T {
+  const animatorGetterRef = useRef(animatorGetter);
+  const itemParamsGetterRef = useRef(itemParamsGetter);
+
+  animatorGetterRef.current = animatorGetter;
+  itemParamsGetterRef.current = itemParamsGetter;
+
+  const articleRectObserver = useContext(ArticleRectContext);
+  const layoutId = useLayoutContext();
+  const keyframesRepo = useContext(KeyframesContext);
+  const keyframes = useMemo(() => keyframesRepo.getItemKeyframes(item.id).filter(kf => kf.type === type), [item.id, keyframesRepo, type]);
+  const paramValue = useMemo<T>(() => {
+    return itemParamsGetterRef.current(item, layoutId);
+  }, [item, layoutId, ...deps]);
+
+  const [adjustedValue, setAdjustedValue] = useState<T>(paramValue);
+  const adjustedValueRef = useRef<T>(adjustedValue);
+  adjustedValueRef.current = adjustedValue;
+
+  const animator = useMemo(() => {
+    if (!layoutId || !keyframes.length) return;
+    const animationData = keyframes
+      .filter(k => k.layoutId === layoutId)
+      .map<AnimationData<KeyframeType>>(({ position, type, value }) => ({
+        position,
+        type,
+        value
+      }));
+    return new Animator(animationData);
+  }, [keyframes, layoutId]);
+
+  const handleKeyframeValue = useCallback((scroll: number) => {
+    if (!animator) return;
+    const newValue = animatorGetterRef.current(animator, scroll, paramValue);
+    if (!isEqual(newValue, adjustedValueRef.current)) {
+      setAdjustedValue(newValue);
+    }
+  }, [animator, paramValue]);
+
+  useEffect(() => {
+    setAdjustedValue(paramValue);
+  }, [paramValue]);
+
+  useEffect(() => {
+    if (!articleRectObserver || !animator) return;
+    const scroll = articleRectObserver.getSectionScroll(sectionId);
+    handleKeyframeValue(scroll);
+  }, [articleRectObserver, handleKeyframeValue, animator]);
+
+  useEffect(() => {
+    if (!articleRectObserver || !animator) return;
+    return articleRectObserver.on('resize', () => {
+      const scroll = articleRectObserver.getSectionScroll(sectionId);
+      handleKeyframeValue(scroll);
+    });
+  }, [handleKeyframeValue, articleRectObserver, animator]);
+
+  useEffect(() => {
+    if (!articleRectObserver || !animator) return;
+    return articleRectObserver.on('scroll', () => {
+      const scroll = articleRectObserver.getSectionScroll(sectionId);
+      handleKeyframeValue(scroll);
+    });
+  }, [handleKeyframeValue, articleRectObserver, animator]);
+  return keyframes.length ? adjustedValue : paramValue;
+}

package/src/common/useRegisterResize.ts

@@ -1,17 +1,17 @@
-import { useEffect } from 'react';
-import ResizeObserver from 'resize-observer-polyfill';
-
-export const useRegisterResize = (ref: HTMLElement | null, onResize?: (height: number) => void) => {
-  useEffect(() => {
-    if (!ref || !onResize) return;
-    const observer = new ResizeObserver((entries) => {
-      const [entry] = entries;
-      onResize(entry.target.clientHeight / window.innerWidth);
-    });
-    observer.observe(ref);
-    return () => {
-      observer.unobserve(ref);
-    };
-  }, [ref, onResize]);
-};
-
+import { useEffect } from 'react';
+import ResizeObserver from 'resize-observer-polyfill';
+
+export const useRegisterResize = (ref: HTMLElement | null, onResize?: (height: number) => void) => {
+  useEffect(() => {
+    if (!ref || !onResize) return;
+    const observer = new ResizeObserver((entries) => {
+      const [entry] = entries;
+      onResize(entry.target.clientHeight / window.innerWidth);
+    });
+    observer.observe(ref);
+    return () => {
+      observer.unobserve(ref);
+    };
+  }, [ref, onResize]);
+};
+

package/src/components/Article.tsx

@@ -1,66 +1,66 @@
-import { FC, useEffect, useId, useRef, useState } from 'react';
-import JSXStyle from 'styled-jsx/style';
-import { Article as TArticle } from '@cntrl-site/sdk';
-import { Section } from './Section/Section';
-import { Item } from './items/Item';
-import { useArticleRectObserver } from '../utils/ArticleRectManager/useArticleRectObserver';
-import { ArticleRectContext } from '../provider/ArticleRectContext';
-import { ArticleWrapper } from './ArticleWrapper';
-import { InteractionsProvider } from '../provider/InteractionsContext';
-
-interface Props {
-  article: TArticle;
-  sectionData: Record<SectionName, any>;
-}
-
-export const Article: FC<Props> = ({ article, sectionData }) => {
-  const articleRef = useRef<HTMLDivElement | null>(null);
-  const articleRectObserver = useArticleRectObserver(articleRef.current);
-  const id = useId();
-  const [articleHeight, setArticleHeight] = useState(1);
-
-  useEffect(() => {
-    if (!articleRectObserver) return;
-    return articleRectObserver.on('resize', (rect) => {
-      setArticleHeight(rect.height / rect.width);
-    });
-  }, [articleRectObserver]);
-
-  return (
-    <ArticleRectContext.Provider value={articleRectObserver}>
-      <InteractionsProvider article={article}>
-        <ArticleWrapper>
-          <div className="article" ref={articleRef}>
-            {article.sections.map((section, i) => {
-              const data = section.name ? sectionData[section.name] : {};
-              return (
-                <Section
-                  section={section}
-                  key={section.id}
-                  data={data}
-                >
-                  {article.sections[i].items.map(item => (
-                    <Item
-                      item={item}
-                      key={item.id}
-                      sectionId={section.id}
-                      articleHeight={articleHeight}
-                    />
-                  ))}
-                </Section>
-              );
-            })}
-          </div>
-        </ArticleWrapper>
-        <JSXStyle id={id}>{`
-       .article {
-         position: relative;
-         overflow: clip;
-       }
-      `}</JSXStyle>
-      </InteractionsProvider>
-    </ArticleRectContext.Provider>
-  );
-};
-
-type SectionName = string;
+import { FC, useEffect, useId, useRef, useState } from 'react';
+import JSXStyle from 'styled-jsx/style';
+import { Article as TArticle } from '@cntrl-site/sdk';
+import { Section } from './Section/Section';
+import { Item } from './items/Item';
+import { useArticleRectObserver } from '../utils/ArticleRectManager/useArticleRectObserver';
+import { ArticleRectContext } from '../provider/ArticleRectContext';
+import { ArticleWrapper } from './ArticleWrapper';
+import { InteractionsProvider } from '../provider/InteractionsContext';
+
+interface Props {
+  article: TArticle;
+  sectionData: Record<SectionName, any>;
+}
+
+export const Article: FC<Props> = ({ article, sectionData }) => {
+  const articleRef = useRef<HTMLDivElement | null>(null);
+  const articleRectObserver = useArticleRectObserver(articleRef.current);
+  const id = useId();
+  const [articleHeight, setArticleHeight] = useState(1);
+
+  useEffect(() => {
+    if (!articleRectObserver) return;
+    return articleRectObserver.on('resize', (rect) => {
+      setArticleHeight(rect.height / rect.width);
+    });
+  }, [articleRectObserver]);
+
+  return (
+    <ArticleRectContext.Provider value={articleRectObserver}>
+      <InteractionsProvider article={article}>
+        <ArticleWrapper>
+          <div className="article" ref={articleRef}>
+            {article.sections.map((section, i) => {
+              const data = section.name ? sectionData[section.name] : {};
+              return (
+                <Section
+                  section={section}
+                  key={section.id}
+                  data={data}
+                >
+                  {article.sections[i].items.map(item => (
+                    <Item
+                      item={item}
+                      key={item.id}
+                      sectionId={section.id}
+                      articleHeight={articleHeight}
+                    />
+                  ))}
+                </Section>
+              );
+            })}
+          </div>
+        </ArticleWrapper>
+        <JSXStyle id={id}>{`
+       .article {
+         position: relative;
+         overflow: clip;
+       }
+      `}</JSXStyle>
+      </InteractionsProvider>
+    </ArticleRectContext.Provider>
+  );
+};
+
+type SectionName = string;

package/src/components/ArticleWrapper.tsx

@@ -1,21 +1,21 @@
-import React, { CSSProperties, FC, PropsWithChildren } from 'react';
-import { useCurrentLayout } from '../common/useCurrentLayout';
-import { LayoutContext } from '../provider/LayoutContext';
-
-export const ArticleWrapper: FC<PropsWithChildren<{}>> = ({ children }) => {
-  const { layoutId, layoutDeviation } = useCurrentLayout();
-  const layoutDeviationStyle = {'--layout-deviation': layoutDeviation} as CSSProperties;
-
-  return (
-    <LayoutContext.Provider value={layoutId}>
-      <div
-        className="article-wrapper"
-        style={{
-          ...layoutDeviationStyle
-        }}
-      >
-        {children}
-      </div>
-    </LayoutContext.Provider>
-  );
-};
+import React, { CSSProperties, FC, PropsWithChildren } from 'react';
+import { useCurrentLayout } from '../common/useCurrentLayout';
+import { LayoutContext } from '../provider/LayoutContext';
+
+export const ArticleWrapper: FC<PropsWithChildren<{}>> = ({ children }) => {
+  const { layoutId, layoutDeviation } = useCurrentLayout();
+  const layoutDeviationStyle = {'--layout-deviation': layoutDeviation} as CSSProperties;
+
+  return (
+    <LayoutContext.Provider value={layoutId}>
+      <div
+        className="article-wrapper"
+        style={{
+          ...layoutDeviationStyle
+        }}
+      >
+        {children}
+      </div>
+    </LayoutContext.Provider>
+  );
+};