@vixoniccom/aniversarios 0.0.1-beta.0

package/src/components/anniversary-item/shared/anniversary-date/DateUtils.ts

@@ -0,0 +1,33 @@
+import PropTypes from 'prop-types'
+import { utils } from '../utils';
+
+const Months = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre']
+
+export class AnniveraryDateUtil {
+    
+  static getZeroLeadedText(text:any) {
+    return `0${text}`.slice(-2)
+  }
+
+  static getMonth(index:any, abbreviated:any) {
+    if (!abbreviated) return Months[index]
+    return Months[index].substring(0, 3).toUpperCase()
+  }
+
+  static utils(orientation:any, size :any = undefined) {
+    return utils(orientation, size)
+  }
+
+  static commonPropTypes() {
+    return {
+      day: PropTypes.number.isRequired,
+      dayFormat: PropTypes.object,
+      month: PropTypes.number.isRequired,
+      monthFormat: PropTypes.object,
+      primaryColor: PropTypes.string,
+      abbreviatedMonths: PropTypes.bool,
+      orientation: PropTypes.string
+    }
+  }
+}
+ 

package/src/components/anniversary-item/shared/anniversary-date/circle/CircleDate.tsx

@@ -0,0 +1,39 @@
+import React, { useContext } from 'react'
+import { AnniveraryDateUtil } from '../DateUtils'
+import { FormattedText } from '../../../../FormattedText'
+import { ConfigureContext } from '../../../../../contex/configureContext/ConfigureContext'
+
+interface Props {
+  day: number,
+  month: number
+}
+
+export const CircleDate = ({ day, month }: Props) => {
+
+
+  const { configureState } = useContext(ConfigureContext)
+  const { orientation, dateMonthFormat, datePrimaryColor, dateDayFormat } = configureState.parameters
+  const sizeProp = AnniveraryDateUtil.utils(orientation)
+
+  let monthSize = (dateMonthFormat && dateMonthFormat.fontSize || 100) * 400 / 100
+  let daySize = (dateDayFormat && dateDayFormat.fontSize || 100) * 400 / 100
+
+  return (
+    <svg {...sizeProp} viewBox='0 0 400 400' xmlSpace='preserve'>
+      <g>
+        <circle fill={datePrimaryColor} cx='200' cy='200' r='200' />
+        <foreignObject width='400' height='400'>
+          {/* <div xmlns='http://www.w3.org/1999/xhtml' style={{ height: 400, width: 400, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}> */}
+          <div style={{ height: 400, width: 400, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
+            <FormattedText text={AnniveraryDateUtil.getMonth(month, true)} format={Object.assign({}, dateMonthFormat, { fontSize: monthSize })} unit='px' />
+            <FormattedText text={AnniveraryDateUtil.getZeroLeadedText(day)} format={Object.assign({}, dateDayFormat, { fontSize: daySize })} unit='px' />
+          </div>
+        </foreignObject>
+      </g>
+    </svg>
+  )
+}
+
+
+CircleDate.propTypes = AnniveraryDateUtil.commonPropTypes()
+

package/src/components/anniversary-item/shared/anniversary-date/flat/FlatDate.tsx

@@ -0,0 +1,79 @@
+import React, { useContext } from "react";
+import { ConfigureContext } from "../../../../../contex/configureContext/ConfigureContext";
+import { AnniveraryDateUtil } from "../DateUtils";
+
+interface Props {
+  month: number;
+  day: number;
+}
+
+export const FlatDate = ({ month, day }: Props) => {
+  const { configureState } = useContext(ConfigureContext);
+  const {
+    abbreviatedMonths,
+    dateDayFormat,
+    dateMonthFormat,
+    orientation,
+    datePrimaryColor,
+  } = configureState.parameters;
+
+  const sizeProp = AnniveraryDateUtil.utils(orientation);
+  let monthSize = ((dateMonthFormat?.fontSize || 18.5) * 400) / 100;
+  let daySize = ((dateDayFormat?.fontSize || 57.5) * 400) / 100;
+  const getFontFamily = (format: any) => {
+    if (format && format.font && format.font.filename) {
+      return format.font.filename.replace(".", "-");
+    }
+    return "";
+  };
+  return (
+    <svg {...sizeProp} viewBox="0 0 400 400" xmlSpace="preserve">
+      <g>
+        <path
+          fill={datePrimaryColor}
+          d="M349.5,393.5h-299c-24.3,0-44-19.7-44-44v-299c0-24.3,19.7-44,44-44h299c24.3,0,44,19.7,44,44v299C393.5,373.8,373.8,393.5,349.5,393.5z"
+        />
+        <path
+          fill="#FFFFFF"
+          d="M349.5,389.5h-299c-22,0-40-18-40-40v-299c0-22,18-40,40-40h299c22,0,40,18,40,40v299C389.5,371.5,371.5,389.5,349.5,389.5z"
+        />
+        <path
+          fill={datePrimaryColor}
+          d="M9,99.9V50.5c0-22.2,18.1-40.3,40.3-40.3h301.4c22.2,0,40.3,18.1,40.3,40.3v49.4H9z"
+        />
+        <text
+          fontFamily={`"${getFontFamily(dateMonthFormat)}"`}
+          textAnchor="middle"
+          alignmentBaseline="central"
+          x="200"
+          y="55"
+          fontSize={monthSize}
+          preserveAspectRatio="none"
+          fill={dateMonthFormat?.fontColor || "#fff"}
+          fontSizeAdjust=""
+        >
+          {AnniveraryDateUtil.getMonth(month, abbreviatedMonths)}
+        </text>
+        <text
+          fontFamily={`"${getFontFamily(dateDayFormat)}"`}
+          textAnchor="middle"
+          alignmentBaseline="central"
+          x="200"
+          y="245"
+          fontSize={daySize}
+          preserveAspectRatio="none"
+          fill={dateDayFormat?.fontColor || "#fff"}
+          fontSizeAdjust=""
+        >
+          {AnniveraryDateUtil.getZeroLeadedText(day)}
+        </text>
+      </g>
+    </svg>
+  );
+};
+
+FlatDate.defaultProps = {
+  datePrimaryColor: "#5B5959",
+};
+
+FlatDate.propTypes = AnniveraryDateUtil.commonPropTypes();

package/src/components/anniversary-item/shared/anniversary-date/outline/OutlineDate.tsx

@@ -0,0 +1,60 @@
+import React, { useContext, useEffect, useState } from 'react'
+import { ConfigureContext } from '../../../../../contex/configureContext/ConfigureContext'
+import { FormattedText } from '../../../../FormattedText'
+import { AnniveraryDateUtil } from '../DateUtils'
+
+
+interface Props {
+  day: number
+  month: number
+}
+
+export const OutlineDate = ({ day, month }: Props) => {
+
+
+
+  const { configureState } = useContext(ConfigureContext)
+  const { abbreviatedMonths, dateDayFormat, dateMonthFormat, orientation, datePrimaryColor } = configureState.parameters
+
+
+  const sizeProp = AnniveraryDateUtil.utils(orientation)
+
+  const parseFormat = (format: any, defaultSize: any) => {
+    return Object.assign(
+      {},
+      format,
+      { fontSize: format.fontSize || defaultSize }
+    )
+  }
+
+  useEffect(() => {
+
+
+  }, [])
+
+  const [monthFormatState,] = useState(parseFormat(dateMonthFormat, 20))
+  const [dayFormatState,] = useState(parseFormat(dateDayFormat, 50))
+
+
+  return (
+    <svg {...sizeProp} viewBox='0 0 100 100'>
+      <foreignObject x='20' y='35' width='60' height='50'>
+        <div style={{ display: 'flex', alignItems: 'center', flexDirection: 'column', justifyContent: 'center', height: '100%' }}>
+          <FormattedText text={AnniveraryDateUtil.getMonth(month, abbreviatedMonths)} format={monthFormatState} unit='px' />
+          <FormattedText text={AnniveraryDateUtil.getZeroLeadedText(day)} format={dayFormatState} unit='px' />
+        </div>
+      </foreignObject>
+      <svg viewBox='0 0 300 300'>
+        <path fill={datePrimaryColor}
+          d='M35.11,164q0-37.73,0-75.46A57.4,57.4,0,0,1,37.32,72a34,34,0,0,1,6.46-12.35A31.3,31.3,0,0,1,57.5,50.32a51.33,51.33,0,0,1,12.9-2.69c2.44-.21,4.88-.19,7.32-.2,8,0,16,0,23.93,0h.61c1,0,1,0,1-1,0-7.84,0-15.68,0-23.52a6.53,6.53,0,0,1,2.57-5.4,6.42,6.42,0,0,1,7.08-.8,6.29,6.29,0,0,1,3.85,6c0,7.81,0,15.61,0,23.42,0,1.46-.19,1.31,1.29,1.31h26.58c1.42,0,1.33.23,1.33-1.28,0-7.71,0-15.41,0-23.12a6.62,6.62,0,0,1,2.89-5.75,6.43,6.43,0,0,1,6.94-.49,6.33,6.33,0,0,1,3.7,5.89c0,7.81,0,15.61,0,23.42,0,1.52-.2,1.33,1.36,1.33h26.27c1.32,0,1.22.14,1.22-1.18,0-7.74,0-15.48,0-23.22a6.62,6.62,0,0,1,2.56-5.51,6.42,6.42,0,0,1,7.08-.81,6.29,6.29,0,0,1,3.87,6c0,7.77,0,15.55,0,23.32,0,1.66-.24,1.42,1.47,1.43,8,0,16-.17,24,.11a47.11,47.11,0,0,1,17.4,3.75,30.67,30.67,0,0,1,16.93,17.89,48.7,48.7,0,0,1,2.91,13.06c.28,3,.35,6.1.35,9.15q0,74,0,148.06a57,57,0,0,1-2.4,17.17c-2.66,8.45-7.58,15.09-15.56,19.25a41.82,41.82,0,0,1-11,3.79,59.72,59.72,0,0,1-12,1.18q-74.24,0-148.47,0A52.82,52.82,0,0,1,57.69,278c-10-3.54-16.57-10.41-19.94-20.4a49.83,49.83,0,0,1-2.29-11.23c-.29-3-.35-6.09-.35-9.15Q35.11,200.61,35.11,164ZM251.4,89a38.39,38.39,0,0,0-1.66-11.84,21.13,21.13,0,0,0-14.1-14.37,35.43,35.43,0,0,0-11-1.77c-7.2-.06-14.39,0-21.59,0-.2,0-.41,0-.61,0-.37,0-.58.1-.56.51s0,.54,0,.81q0,11.91,0,23.83c0,.31,0,.61,0,.92A6.45,6.45,0,0,1,197.81,93a6.37,6.37,0,0,1-7.12-1.11,6.6,6.6,0,0,1-2.32-5.31c0-8.15,0-16.29,0-24.44,0-1.3.1-1.15-1.14-1.15H160.66c-.2,0-.41,0-.61,0-.39,0-.57.13-.54.52,0,.24,0,.47,0,.71q0,12,0,23.93c0,.34,0,.68,0,1a6.49,6.49,0,0,1-3.91,5.76,6.37,6.37,0,0,1-6.91-.72A6.71,6.71,0,0,1,146,86.42c0-8.11,0-16.22,0-24.34,0-1.36,0-1.14-1.15-1.14H117.94c-.2,0-.41,0-.61,0-.37,0-.58.1-.56.51s0,.54,0,.81q0,11.91,0,23.83c0,.34,0,.68,0,1a6.44,6.44,0,0,1-3.7,5.68,6.31,6.31,0,0,1-6.68-.34,6.54,6.54,0,0,1-3.13-5.82c0-8.25,0-16.5,0-24.74,0-.94,0-.95-.93-.95-9.1,0-18.19,0-27.29,0a34.25,34.25,0,0,0-10.22,1.58A21.14,21.14,0,0,0,50.12,77.7a37.8,37.8,0,0,0-1.4,8.92c0,.78,0,1.56,0,2.34q0,75.2,0,150.4A40.47,40.47,0,0,0,50,249.94c2.13,7.92,7,13.21,14.9,15.7a37.27,37.27,0,0,0,11.34,1.62q74,0,148.06,0a37.54,37.54,0,0,0,9-1.08c8.73-2.14,14.43-7.46,16.85-16.17a40,40,0,0,0,1.33-10.77q0-37.58,0-75.15T251.4,89Z' />
+      </svg>
+    </svg>
+  )
+}
+
+
+OutlineDate.defaultProps = {
+  primaryColor: '#5B5959'
+}
+
+OutlineDate.propTypes = AnniveraryDateUtil.commonPropTypes()

package/src/components/anniversary-item/shared/anniversary-date/text/TextDate.tsx

@@ -0,0 +1,30 @@
+import React, { useContext } from 'react'
+import PropTypes from 'prop-types'
+import { FormattedText } from '../../../../FormattedText'
+import { ConfigureContext } from '../../../../../contex/configureContext/ConfigureContext'
+
+interface Props {
+  day: number
+  month: number
+}
+
+export const TextDate = ({ day, month }: Props) => {
+
+  const { configureState } = useContext(ConfigureContext)
+  const { dateMonthFormat, dateDayFormat } = configureState.parameters
+
+  return (
+    <div style={{ display: 'flex', alignItems: 'center' }}>
+      <FormattedText text={`${day}/`} format={dateDayFormat} />
+      <FormattedText text={`${month + 1}`} format={dateMonthFormat} />
+    </div>
+  )
+}
+
+TextDate.propTypes = {
+  day: PropTypes.number.isRequired,
+  dayFormat: PropTypes.object,
+  month: PropTypes.number.isRequired,
+  monthFormat: PropTypes.object
+}
+

package/src/components/anniversary-item/shared/anniversary-date/text-calendar/TextCalendarDate.tsx

@@ -0,0 +1,46 @@
+import React, { useContext, useState } from 'react'
+import { ConfigureContext } from '../../../../../contex/configureContext/ConfigureContext'
+import { FormattedText } from '../../../../FormattedText'
+import { AnniveraryDateUtil } from '../DateUtils'
+
+interface Props {
+  day: number
+  month: number
+}
+
+export const TextCalendarDate = ({ day, month }: Props) => {
+
+
+  const { configureState } = useContext(ConfigureContext)
+  const { dateMonthFormat, dateDayFormat, abbreviatedMonths,orientation  } = configureState.parameters
+
+
+  const sizeProp = AnniveraryDateUtil.utils(orientation, '100%')
+
+
+  const parseFormat = (format: any, defaultSize: any) => {
+    return Object.assign(
+      {},
+      format,
+      { fontSize: format.fontSize || defaultSize }
+    )
+  }
+
+  const [monthFormatState,] = useState(parseFormat(dateMonthFormat, 20))
+  const [dayFormatState,] = useState(parseFormat(dateDayFormat, 20))
+
+  return (
+    <svg {...sizeProp} viewBox='0 0 100 100'>
+      <foreignObject width='100' height='100'>
+        <div style={{ display: 'flex', alignItems: 'center', flexDirection: 'column', justifyContent: 'center', height: '100%' }}>
+          <FormattedText text={AnniveraryDateUtil.getMonth(month, abbreviatedMonths)} format={monthFormatState} unit='px' />
+          <FormattedText text={AnniveraryDateUtil.getZeroLeadedText(day)} format={dayFormatState} unit='px' />
+        </div>
+      </foreignObject>
+    </svg>
+  )
+}
+
+
+TextCalendarDate.propTypes = AnniveraryDateUtil.commonPropTypes()
+

package/src/components/anniversary-item/shared/separator/Separator.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+ 
+
+interface Props {
+  order: number | undefined
+  size: number | undefined
+  color: string | undefined
+  orientation: string | undefined
+  margins: string | undefined
+}
+
+export const Separator = ({ order,size, color, orientation, margins  }: Props) => {
+
+  const getSizeStyle = (orientation: any, size: any) => {
+    if (orientation === 'h') {
+      return {
+        width: size || 0,
+        height: '100%'
+      }
+    } else {
+      return {
+        height: size || 0,
+        width: '100%'
+      }
+    }
+  }
+
+  if (order === 3) return null
+   const sizeStyle = getSizeStyle(orientation, size)
+  return (
+    <div style={{
+      flexShrink: 0,
+      order:  order,
+      backgroundColor: color || '',
+      margin: margins,
+      ...sizeStyle
+    }} />
+  )
+}
+
+ 

package/src/components/anniversary-item/shared/utils.ts

@@ -0,0 +1,10 @@
+export const utils =  (orientation:string, size:number) => {
+    const sizeAttr = orientation === 'v' ? 'width' : 'height'
+    const percentage = size
+      ? `${size}`
+      : orientation === 'v' ? '40%' : '80%'
+    return {
+      [sizeAttr]: percentage
+    }
+  }
+ 

package/src/components/items-container/Item.tsx

@@ -0,0 +1,52 @@
+import React, { useRef } from 'react'
+
+const aligments = {
+  start: 'flex-start',
+  center: 'center',
+  end: 'flex-end'
+}
+
+interface Props {
+  width: string
+  height: string
+  containerData: any
+  verticalGap: number
+  horizontalGap: number
+  children?: any
+  style: any
+}
+
+
+export const Item = ({ width, height, containerData, verticalGap, horizontalGap, children, style }: Props) => {
+
+  const itemRef = useRef(null)
+
+  return (
+    <div ref={itemRef}
+      style={{
+        overflow: 'hidden',
+        display: 'flex',
+        position: 'relative',
+        alignItems: aligments['center'],
+        justifyContent: aligments['center'],
+        width: width,
+        height: height,
+        top: containerData.ic_rowIndex === 0
+          ? '0'
+          : verticalGap
+            ? `${verticalGap * containerData.ic_rowIndex}%`
+            : '0',
+        paddingLeft: containerData.ic_columnIndex === 0
+          ? '0'
+          : horizontalGap
+            ? `${horizontalGap}%`
+            : '0'
+        , ...style
+      }}
+    >
+      {React.cloneElement(children, containerData)}
+    </div>
+  )
+}
+
+

package/src/components/items-container/ItemsContainer.tsx

@@ -0,0 +1,137 @@
+import React, { useContext, useState, useRef, useEffect } from 'react'
+import { Item } from './Item'
+import { ConfigureContext } from '../../contex/configureContext/ConfigureContext'
+import { useStateWithCallbackLazy } from 'use-state-with-callback';
+import { ReactElementLike } from 'prop-types';
+
+
+
+const stages = {
+  idle: 'idle',
+  prepared: 'prepared',
+  animating: 'animating'
+}
+
+
+
+interface Props {
+  items: ReactElementLike[],
+  animation: Animation,
+  animate: boolean
+}
+
+interface Animation {
+  mode: string | undefined
+  duration: number | undefined,
+  speed: number | undefined,
+  reverse: boolean | undefined
+}
+
+
+
+export const ItemsContainer = ({ animation, items, animate }: Props) => {
+
+  const { configureState } = useContext(ConfigureContext)
+  const { containerColumns, containerRows, containerRowsGap } = configureState.parameters
+  const container = useRef<HTMLDivElement>(null)
+  const [animations] = useState(new (require('./animation'))())
+  let itemsCount = Number(containerColumns) * Number(containerRows)
+  let columns = Number(containerColumns) | 1
+  let rows = Number(containerRows) | 1
+  let rowsGap = Number(containerRowsGap) | 0
+  let columnsGap = 1
+
+  const [show, setShow] = useState(false)
+  const [item, setItem] = useState([])
+  const [stage, setStage] = useStateWithCallbackLazy('idle')
+  const [lastIndex, setLastIndex] = useState(0)
+
+  const configure = () => {
+    animations.configure(animation)
+    itemsCount = Number(containerColumns) * Number(containerRows)
+    columns = Number(containerColumns) | 1
+    rows = Number(containerRows) | 1
+    rowsGap = Number(containerRowsGap) | 0
+    if (animate && stage === stages.idle) createItems(lastIndex, items)
+  }
+
+
+  useEffect(() => {
+    configure()
+  }, [animation])
+
+  useEffect(() => {
+    if (animate && stage === stages.prepared) {
+      setStage(stages.animating, () => {
+        if (null !== container.current) {
+          animations.animate(container.current.childNodes, () => {
+            createItems(lastIndex, items)
+          })
+        }
+      })
+    }
+  }, [item, animate])
+
+
+  const createItems = (lastIndex: number, items: any) => {
+    let count = 0
+    if (lastIndex >= (items.length - 1)) {
+      setLastIndex(lastIndex = 0)
+    }
+    let newItems = items.filter((_item: any, index: number) => {
+      return index >= lastIndex
+    }).map((item: any, index: any, arr: any) => {
+      if (count >= itemsCount) return null
+      setLastIndex(++lastIndex)
+      count++
+      return <Item
+        key={lastIndex} containerData={{
+          ic_index: index,
+          ic_rowIndex: index / columns,
+          ic_columnIndex: index % columns,
+          ic_firstChild: index === 0,
+          ic_lastChild: index === (arr.length - 1)
+        }} style={animations.getInitialStyle()}
+        // Item alignment. By default is center - center.
+        // alignment={alignment}
+        // Setup item width based on columns count.
+        width={`${(100 - (columnsGap * (columns - 1))) / columns}%`}
+        // Setup item height based on rows count. If 0 set up on auto.
+        height={`${(100 - (rowsGap * (rows - 1))) / rows}%`}
+        // Setup horizontal gap
+        horizontalGap={columnsGap}
+        // Setup vertical gap
+        verticalGap={rowsGap}>
+        {item}
+      </Item>
+    })
+
+
+    if (newItems.length > 0) {
+      setShow(true)
+      setStage(stages.prepared, () => { })
+      setItem(newItems)
+    } else {
+      setShow(false)
+      setStage(stages.idle, () => { })
+    }
+  }
+
+
+  return (
+    <div ref={container} style={{
+      opacity: show ? 1 : 0,
+      position: 'relative',
+      height: '100%',
+      width: '100%',
+      display: 'flex',
+      flexWrap: 'wrap',
+      alignContent: 'flex-start'
+    }}>
+      {item}
+    </div>
+  )
+}
+
+
+

package/src/components/items-container/animation.ts

@@ -0,0 +1,123 @@
+import anime from 'animejs'
+
+
+interface Options {
+    mode: keyof typeof animationModes
+    duration: number
+    speed: number
+    stagger: number
+    reverse: boolean
+}
+
+const animationModes = {
+    fade: {
+        in: {
+            opacity: [0, 1],
+            easing: 'linear'
+        },
+        out: {
+            opacity: [1, 0],
+            easing: 'linear'
+        },
+        init: {
+            opacity: 0
+        }
+    },
+    slideRight: {
+        in: {
+            translateX: () => {
+                return [`-100vw`, '0vw']
+            },
+            easing: 'easeOutQuad'
+        },
+        out: {
+            translateX: () => {
+                return ['0vw', `100vw`]
+            },
+            easing: 'easeInQuad'
+        },
+        init: {
+            transform: 'translate(0vw)'
+        }
+    },
+    slideLeft: {
+        in: {
+            translateX: (el: any) => {
+                return [`${el.parentNode.clientWidth}px`, '0px']
+            },
+            easing: 'easeOutQuad'
+        },
+        out: {
+            translateX: (el: any) => {
+                return ['0px', `${-el.parentNode.clientWidth}px`]
+            },
+            easing: 'easeInQuad'
+        },
+        init: {
+            transform: 'translate(0px)'
+        }
+    }
+}
+
+class Animation {
+
+    public mode: any
+    public duration: number
+    public speed: number
+    public stagger: number
+    public reverse: boolean
+
+
+    constructor() {
+        this.mode = animationModes.fade
+        this.duration = 5000
+        this.speed = 1000
+        this.stagger = 1000 / 4
+        this.reverse = true
+    }
+
+    configure(options: Options) {
+        this.mode = animationModes.hasOwnProperty(options.mode) ? animationModes[options.mode] : animationModes.fade
+        this.duration = options.duration || 10000
+        this.speed = 1000 * (options.speed || 1)
+        this.stagger = this.speed / (options.stagger || 4)
+        this.reverse = options.reverse
+    }
+
+    getInitialStyle() {
+        return this.mode.init
+    }
+
+    animate(listNodes: any, finished: any) {
+        let self = this
+        let els = [].slice.call(listNodes, 0)
+        if (this.reverse) els = els.reverse()
+        if (!els || els.length < 1) return
+        let offset = this.duration - (((els.length - 1) * this.stagger) + this.speed) * 2
+        offset = offset < 0 ? 0 : offset
+        let animation = anime.timeline({
+            autoplay: false
+        })
+        animation.add(Object.assign({
+            targets: els,
+            duration: this.speed,
+            delay: function (_el: any, i: any, _l: any) {
+                return i * self.stagger
+            }
+        }, this.mode.in))
+        animation.add(Object.assign({
+            targets: els,
+            duration: this.speed,
+            delay: function (_el: any, i: any, _l: any) {
+                return i * self.stagger
+            },
+            offset: `+=${offset}`,
+            complete: () => {
+                finished()
+            }
+        }, this.mode.out))
+        animation.play()
+    }
+}
+
+module.exports = exports = Animation

package/src/contex/configureContext/ConfigureContext.tsx

@@ -0,0 +1,9 @@
+import { createContext } from "react";
+
+
+type ConfigureContext = {
+    configureState: VixonicData
+    addConfiguration: (configure:VixonicData)=>void
+}
+ 
+export const ConfigureContext = createContext<ConfigureContext>({} as ConfigureContext);