@cntrl-site/sdk-nextjs 1.0.19-alpha.2 → 1.0.19-alpha.4

package/lib/utils/StateStyles/StateStyles.js

@@ -1,89 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getTransitions = exports.getStateStyles = void 0;
-const color_1 = require("@cntrl-site/color");
-const getItemTopStyle_1 = require("../getItemTopStyle");
-const stateTransformationMap = {
-    'width': (width) => `width: ${width * 100}vw !important;`,
-    'height': (height) => `height: ${height * 100}vw !important;`,
-    'top': (top, anchorSide) => `top: ${(0, getItemTopStyle_1.getItemTopStyle)(top, anchorSide)} !important;`,
-    'left': (left) => `left: ${left * 100}vw !important;`,
-    'scale': (scale) => `transform: scale(${scale}) !important;`,
-    'angle': (angle) => `transform: rotate(${angle}deg) !important;`,
-    'opacity': (opacity) => `opacity: ${opacity} !important;`,
-    'radius': (radius) => `border-radius: ${radius * 100}vw !important;`,
-    'strokeWidth': (strokeWidth) => `border-width: ${strokeWidth * 100}vw !important;`,
-    'strokeColor': (strokeColor) => `border-color: ${color_1.CntrlColor.parse(strokeColor).toCss()} !important;`,
-    'fillColor': (fillColor) => `background-color: ${color_1.CntrlColor.parse(fillColor).toCss()} !important;`,
-    'blur': (blur) => `filter: blur(${blur * 100}vw) !important;`,
-    'backdropBlur': (backdropBlur) => `backdrop-filter: blur(${backdropBlur * 100}vw) !important;`,
-    'color': (color) => `color: ${color_1.CntrlColor.parse(color).toCss()} !important;`,
-    'letterSpacing': (letterSpacing) => `letter-spacing: ${letterSpacing * 100}vw !important;`,
-    'wordSpacing': (wordSpacing) => `word-spacing: ${wordSpacing * 100}vw !important;`
-};
-const CSSPropertyNameMap = {
-    'width': 'width',
-    'height': 'height',
-    'top': 'top',
-    'left': 'left',
-    'scale': 'transform',
-    'angle': 'transform',
-    'opacity': 'opacity',
-    'radius': 'border-radius',
-    'strokeWidth': 'border-width',
-    'strokeColor': 'border-color',
-    'fillColor': 'background-color',
-    'blur': 'filter',
-    'backdropBlur': 'backdrop-filter',
-    'letterSpacing': 'letter-spacing',
-    'wordSpacing': 'word-spacing',
-    'color': 'color'
-};
-function getStateStyles(values, state, anchorSide) {
-    if (!state)
-        return '';
-    const stateValues = values.reduce((acc, valueName) => {
-        // @ts-ignore
-        if (valueName in state && state[valueName] !== undefined) {
-            // @ts-ignore
-            const stateProperties = state[valueName];
-            const getter = stateTransformationMap[valueName];
-            return [
-                ...acc,
-                getter(stateProperties.value, anchorSide)
-            ];
-        }
-        return acc;
-    }, []);
-    if (!stateValues.length)
-        return '';
-    // @ts-ignore
-    const transitionStr = getTransitions(values, state);
-    stateValues.push(`transition: ${transitionStr};`);
-    return stateValues.join('\n');
-}
-exports.getStateStyles = getStateStyles;
-function getTransitions(values, state) {
-    if (!state)
-        return 'unset';
-    const transitionValues = values.reduce((acc, valueName) => {
-        // @ts-ignore TODO
-        if (valueName in state && state[valueName] !== undefined) {
-            // @ts-ignore TODO
-            const stateProperties = state[valueName];
-            return [
-                ...acc,
-                // @ts-ignore
-                `${CSSPropertyNameMap[valueName]} ${stateProperties.duration}ms ${stateProperties.timing} ${stateProperties.delay}ms`
-            ];
-        }
-        return acc;
-    }, []);
-    if (!transitionValues.length)
-        return 'unset';
-    return transitionValues.join(', ');
-}
-exports.getTransitions = getTransitions;
-// export function getStateTransitions<T extends ArticleItemType>(
-//
-// )

package/lib/utils/getStatesCSS.js

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getStatesCSS = void 0;
-const StateStyles_1 = require("./StateStyles/StateStyles");
-function getStatesCSS(itemId, classNamePrefix, keys, states, anchorSide) {
-    return states
-        ? Object.entries(states).map(([stateId, params]) => {
-            return `
-      .${classNamePrefix}-${itemId}-state-${stateId} {
-        ${(0, StateStyles_1.getStateStyles)(keys, params, anchorSide)};
-      }
-    `;
-        }).join('\n')
-        : '';
-}
-exports.getStatesCSS = getStatesCSS;

package/src/components/useStatesClassNames.ts

@@ -1,23 +0,0 @@
-import { ItemStateParams } from '@cntrl-site/sdk';
-import { useContext } from 'react';
-import { InteractionsContext } from '../provider/InteractionsContext';
-import { useCurrentLayout } from '../common/useCurrentLayout';
-
-export function useStatesClassNames(
-  itemId: string,
-  itemStates: Record<LayoutId, Record<StateId, ItemStateParams>>,
-  uniquePrefix: string, // unique in terms of item type, ie. rectangle, code-embed, group etc
-): string {
-  const { interactionsStatesMap } = useContext(InteractionsContext);
-  const { layoutId } = useCurrentLayout();
-  const activeStates = Object.values(interactionsStatesMap);
-  const statesForLayout = layoutId ? itemStates[layoutId] : {};
-  const stateClassNames = Object.keys(statesForLayout ?? {})
-    .filter((stateId) => activeStates.includes(stateId))
-    .map((stateId) => `${uniquePrefix}-${itemId}-state-${stateId}`)
-    .join(' ');
-  return stateClassNames;
-}
-
-type StateId = string;
-type LayoutId = string;

package/src/components/useStatesTransitions.ts

@@ -1,95 +0,0 @@
-import { ArticleItemType, ItemState, ItemStateParams, ItemStatesMap } from '@cntrl-site/sdk';
-import { useContext, useEffect, useMemo } from 'react';
-import { InteractionsContext } from '../provider/InteractionsContext';
-import { useCurrentLayout } from '../common/useCurrentLayout';
-
-type AllKeys<T> = T extends any ? keyof T : never;
-type StatePropertyKey = AllKeys<ItemStatesMap[keyof ItemStatesMap]>;
-
-export function useStatesTransitions(
-  el: HTMLElement | null,
-  state: ItemState<ArticleItemType>,
-  values: StatePropertyKey[]
-) {
-  const { interactionsStatesMap } = useContext(InteractionsContext);
-  const { layoutId } = useCurrentLayout();
-  const activeStates = Object.values(interactionsStatesMap);
-  const statesForLayout = useMemo(() => layoutId ? state[layoutId] : {}, [state, layoutId]);
-  const itemStatesIds = statesForLayout ? Object.keys(statesForLayout) : [];
-  const itemActiveStateId = activeStates.find((stateId) => itemStatesIds.includes(stateId));
-  useEffect(() => {
-    if (!itemActiveStateId || !el) return;
-    const state = statesForLayout[itemActiveStateId];
-    const transitionStr = getTransition(state, 'in', values);
-    const slowestProp = getSlowestProperty(state, 'in', values);
-    if (!transitionStr) return;
-    el.style.transition = transitionStr;
-    el.ontransitionend = (e) => {
-      e.stopPropagation();
-      if (e.target !== el || e.propertyName !== slowestProp) return;
-      el.style.transition = 'none';
-    };
-    return () => {
-      const transitionStr = getTransition(state, 'out', values);
-      const slowestProp = getSlowestProperty(state, 'out', values);
-      if (!transitionStr) return;
-      el.style.transition = transitionStr;
-      el.ontransitionend = (e) => {
-        e.stopPropagation();
-        if (e.target !== el || e.propertyName !== slowestProp) return;
-        el.style.transition = 'none';
-      };
-    };
-  }, [itemActiveStateId, statesForLayout, el]);
-}
-
-const CSSPropertyNameMap: Record<keyof ItemState<ArticleItemType>, string> = {
-  'width': 'width',
-  'height': 'height',
-  'top': 'top',
-  'left': 'left',
-  'scale': 'transform',
-  'angle': 'transform',
-  'opacity': 'opacity',
-  'radius': 'border-radius',
-  'strokeWidth': 'border-width',
-  'strokeColor': 'border-color',
-  'fillColor': 'background-color',
-  'blur': 'filter',
-  'backdropBlur': 'backdrop-filter',
-  'letterSpacing': 'letter-spacing',
-  'wordSpacing': 'word-spacing',
-  'color': 'color'
-};
-
-function getTransition(
-  state: ItemStateParams,
-  direction: 'in' | 'out',
-  values: string[]
-) {
-  return Object.entries(state)
-    .filter(([key]) => values.includes(key))
-    .map(([key, params]) => {
-      const cssKey = CSSPropertyNameMap[key];
-      if (!cssKey) {
-        throw new Error(`Cannot translate "${key}" to a CSS property.`);
-      }
-      return `${cssKey} ${params[direction].duration}ms ${params[direction].timing} ${params[direction].delay}ms`;
-    }, [])
-    .join(', ');
-}
-
-function getSlowestProperty(state: ItemStateParams, direction: 'in' | 'out', values: string[]): string {
-  const mappedEntries = Object.entries(state)
-    .filter(([key]) => values.includes(key))
-    .map(([key, params]) => {
-      const transitionParams = params[direction];
-      return {
-        key,
-        time: transitionParams.duration + transitionParams.delay
-      }
-    });
-  if (mappedEntries.length === 0) return '';
-  const { key } = mappedEntries.reduce((slowest, current) => current.time > slowest.time ? current : slowest);
-  return CSSPropertyNameMap[key];
-}

package/src/utils/StateStyles/StateStyles.ts

@@ -1,99 +0,0 @@
-import { StateParams, ArticleItemType, AnchorSide, ItemState, ItemStatesMap } from '@cntrl-site/sdk';
-import { CntrlColor } from '@cntrl-site/color';
-import { getItemTopStyle } from '../getItemTopStyle';
-
-type StateParamsGetter = (value: any, anchorSide?: AnchorSide) => string;
-type AllKeys<T> = T extends any ? keyof T : never;
-type StatePropertyKey = AllKeys<ItemStatesMap[keyof ItemStatesMap]>;
-
-const stateTransformationMap: Record<StatePropertyKey, StateParamsGetter> = {
-  'width': (width: number) => `width: ${width * 100}vw !important;`,
-  'height': (height: number) => `height: ${height * 100}vw !important;`,
-  'top': (top: number, anchorSide?: AnchorSide) => `top: ${getItemTopStyle(top, anchorSide)} !important;`,
-  'left': (left: number) => `left: ${left * 100}vw !important;`,
-  'scale': (scale: number) => `transform: scale(${scale}) !important;`,
-  'angle': (angle: number) => `transform: rotate(${angle}deg) !important;`,
-  'opacity': (opacity: number) => `opacity: ${opacity} !important;`,
-  'radius': (radius: number) => `border-radius: ${radius * 100}vw !important;`,
-  'strokeWidth': (strokeWidth: number) => `border-width: ${strokeWidth * 100}vw !important;`,
-  'strokeColor': (strokeColor: string) => `border-color: ${CntrlColor.parse(strokeColor).toCss()} !important;`,
-  'fillColor': (fillColor: string) => `background-color: ${CntrlColor.parse(fillColor).toCss()} !important;`,
-  'blur': (blur: number) => `filter: blur(${blur * 100}vw) !important;`,
-  'backdropBlur': (backdropBlur: number) => `backdrop-filter: blur(${backdropBlur * 100}vw) !important;`,
-  'color': (color: string) => `color: ${CntrlColor.parse(color).toCss()} !important;`,
-  'letterSpacing': (letterSpacing: number) => `letter-spacing: ${letterSpacing * 100}vw !important;`,
-  'wordSpacing': (wordSpacing: number) => `word-spacing: ${wordSpacing * 100}vw !important;`
-};
-
-const CSSPropertyNameMap: Record<keyof ItemState<ArticleItemType>, string> = {
-  'width': 'width',
-  'height': 'height',
-  'top': 'top',
-  'left': 'left',
-  'scale': 'transform',
-  'angle': 'transform',
-  'opacity': 'opacity',
-  'radius': 'border-radius',
-  'strokeWidth': 'border-width',
-  'strokeColor': 'border-color',
-  'fillColor': 'background-color',
-  'blur': 'filter',
-  'backdropBlur': 'backdrop-filter',
-  'letterSpacing': 'letter-spacing',
-  'wordSpacing': 'word-spacing',
-  'color': 'color'
-};
-
-export function getStateStyles<T extends ArticleItemType>(
-  values: Array<StatePropertyKey>,
-  state?: ItemStatesMap[T],
-  anchorSide?: AnchorSide
-): string {
-  if (!state) return '';
-
-  const stateValues = values.reduce<string[]>((acc, valueName) => {
-    // @ts-ignore
-    if (valueName in state && state[valueName] !== undefined) {
-      // @ts-ignore
-      const stateProperties = state[valueName] as StateParams<string | number>;
-      const getter = stateTransformationMap[valueName] as StateParamsGetter;
-      return [
-        ...acc,
-        getter(stateProperties.value, anchorSide)
-      ];
-    }
-    return acc;
-  }, []);
-
-  if (!stateValues.length) return '';
-  // @ts-ignore
-  const transitionStr = getTransitions(values, state);
-  stateValues.push(`transition: ${transitionStr};`);
-  return stateValues.join('\n');
-}
-
-export function getTransitions<T extends ArticleItemType>(
-  values: Array<StatePropertyKey>,
-  state?: ItemStatesMap[T]
-): string {
-  if (!state) return 'unset';
-  const transitionValues = values.reduce<string[]>((acc, valueName) => {
-    // @ts-ignore TODO
-    if (valueName in state && state[valueName] !== undefined) {
-      // @ts-ignore TODO
-      const stateProperties = state[valueName] as StateParams<string | number>;
-      return [
-        ...acc,
-        // @ts-ignore
-        `${CSSPropertyNameMap[valueName]} ${stateProperties!.duration}ms ${stateProperties!.timing} ${stateProperties!.delay}ms`
-      ];
-    }
-    return acc;
-  }, []);
-  if (!transitionValues.length) return 'unset';
-  return transitionValues.join(', ');
-}
-
-// export function getStateTransitions<T extends ArticleItemType>(
-//
-// )

package/src/utils/getStatesCSS.ts

@@ -1,24 +0,0 @@
-import { AnchorSide, ArticleItemType, ItemStatesMap } from '@cntrl-site/sdk';
-import { getStateStyles } from './StateStyles/StateStyles';
-
-type AllKeys<T> = T extends any ? keyof T : never;
-type StatePropertyKey = AllKeys<ItemStatesMap[keyof ItemStatesMap]>;
-
-export function getStatesCSS<T extends ArticleItemType>(
-  itemId: string,
-  classNamePrefix: string,
-  keys: Array<StatePropertyKey>,
-  states: Record<string, ItemStatesMap[T]> | undefined,
-  anchorSide?: AnchorSide
-) {
-  return states
-    ? Object.entries(states).map(([stateId, params]) => {
-      return `
-      .${classNamePrefix}-${itemId}-state-${stateId} {
-        ${getStateStyles(keys, params, anchorSide)};
-      }
-    `;
-    }).join('\n')
-    : '';
-}
-