@vixoniccom/aniversarios 1.2.1-dev.1 → 1.2.1

package/src/components/AnniversaryItem/components/utils.ts

@@ -1,75 +0,0 @@
-export const utils = (orientation: string, size: number) => {
-  const sizeAttr = orientation === 'v' ? 'width' : 'height'
-  const percentage = size ? `${size}` : orientation === 'v' ? '40%' : '80%'
-  return { [sizeAttr]: percentage }
-}
-
-export const parseBorderMargin = (marginString: any) => {
-  const pattern = /(( )?[+-]?[0-9]+.?([0-9]+)?(px|em|ex|%|in|cm|mm|pt|pc))?/g
-  const match = marginString ? marginString.match(pattern) : ['']
-
-  switch (match.length) {
-    case 1:
-      return { r: '4%', l: '4%' }
-    case 2:
-      return { r: match[0], l: match[0] }
-    default:
-      return { r: match[0], l: match[1] }
-  }
-}
-
-const parseElementStyles = (margin: string, position: number, defaultPosition: number, parameters: VixonicParameters) => {
-  const { orientation, separator } = parameters
-  const marginAttr = orientation === 'v' ? 'marginBottom' : 'marginRight'
-  const sizeAttr = orientation === 'v' ? 'width' : 'height'
-  const pos = position !== undefined ? position : defaultPosition
-  return {
-    order: pos,
-    [sizeAttr]: '100%',
-    [marginAttr]: margin !== undefined && margin !== '' ? `${margin}%` : pos === 3 || separator === true ? 0 : '4%',
-  }
-}
-
-export const parseParameters = (parameters: any) => {
-  const imageAlignment = parameters.imageAlignment || 'center'
-  const textAlignment = parameters.textAlignment || 'center'
-  const dateAlignment = parameters.dateAlignment || 'center'
-
-  return {
-    imageEnabled: parameters.imageEnabled,
-    imageStyle: Object.assign(
-      {
-        flexShrink: 0,
-        display: 'flex',
-        justifyContent: imageAlignment,
-        alignItems: imageAlignment,
-      },
-      parseElementStyles(parameters.imageMargin, parameters.imagePosition, 1, parameters)
-    ),
-    descriptionEnabled: parameters.descriptionEnabled,
-    optionalEnabled: parameters.optionalEnabled,
-    textStyle: Object.assign(
-      { display: 'flex', flexDirection: 'column', justifyContent: textAlignment, flex: 1 },
-      parseElementStyles(parameters.textMargin, parameters.textPosition, 2, parameters)
-    ),
-    dateEnabled: parameters.dateEnabled,
-    dateStyle: Object.assign(
-      {
-        display: 'flex',
-        justifyContent: dateAlignment,
-        alignItems: dateAlignment,
-        flexShrink: 0,
-      },
-      parseElementStyles(parameters.dateMargin, parameters.datePosition, 3, parameters)
-    ),
-  }
-}
-
-export const getPhotoUrl = (filename: string, parameters: VixonicParameters, downloadsPath: string) => {
-  const mode = parameters.photosMode
-  if (mode === 'zip' && parameters.photosZip && parameters.photosZip.filename !== undefined) {
-    return downloadsPath + '/' + parameters.photosZip.filename.replace('.zip', '/') + filename
-  } else {
-    return filename
-  }
-}

package/src/components/AnniversaryItem/index.tsx

@@ -1,17 +0,0 @@
-import React from 'react'
-import { ClassicItem } from './components'
-
-const itemStyles = {
-  standard: ClassicItem
-}
-
-interface Props {
-  style: 'standard' | 'custom',
-  anniversary: DataEmployee
-}
-
-export const AnniversaryItem = ({ style, anniversary }: Props) => {
-  const StyledItem = itemStyles.hasOwnProperty(style) ? itemStyles['standard'] : itemStyles.standard
-
-  return <StyledItem anniversary={anniversary} />
-}

package/src/components/FormattedText/index.tsx

@@ -1,81 +0,0 @@
-import React from 'react'
-
-const alignments = {
-  center: 'center',
-  left: 'flex-start',
-  right: 'flex-end'
-}
-
-type Aligment = {
-  horizontal: keyof typeof alignments,
-  vertical: keyof typeof alignments
-}
-
-interface Props {
-  format?: any
-  lineHeight?: number
-  maxChar?: number
-  style?: number
-  text: string
-  unit?: string
-  paddingBottom?: string
-  paddingTop?: string
-}
-
-export const FormattedText: React.FunctionComponent<Props> = ({ text, format, maxChar, lineHeight, style, unit, paddingBottom, paddingTop }) => {
-  const trimText = (text: any, maxChar: any) => {
-    const isValid = maxChar && maxChar >= 3
-    if (isValid && (text && text.length > maxChar) || false) {
-      const returnText = text.substring(0, maxChar - 3)
-      returnText.substr(-1, 3)
-      return `${returnText.trim()}...`
-    }
-    return text
-  }
-
-  const checkNested = (obj: any, path: string): boolean => {
-    return path.split('.').every(segment => {
-      if (obj && obj.hasOwnProperty(segment)) {
-        obj = obj[segment]
-        return true
-      }
-      return false
-    })
-  }
-
-  const getHorizontalAlignment = (alignment: Aligment) => {
-    if (alignment) {
-      const hA = alignment.horizontal
-      return alignments.hasOwnProperty(hA) ? alignments[alignment.horizontal] : 'flex-start'
-    }
-    return 'flex-start'
-  }
-
-  const renderText = maxChar ? trimText(text, maxChar) : text
-  const containerStyle = Object.assign({
-    display: 'inline-flex',
-    justifyContent: getHorizontalAlignment(format.alignment)
-  }, style)
-
-  return (
-    <div style={containerStyle}>
-      <span style={{
-        color: format?.fontColor,
-        fontFamily: checkNested(format, 'font.filename') ? `'${format?.font?.filename?.replace('.', '-')}'` : '',
-        fontSize: `${format?.fontSize}${unit}`,
-        textAlign: checkNested(format, 'alignment.horizontal') ? format?.alignment?.horizontal : 'left',
-        lineHeight: lineHeight,
-        paddingBottom: paddingBottom,
-        paddingTop: paddingTop,
-        display: 'inline-flex'
-      }}>{renderText}</span>
-    </div>
-  )
-}
-
-FormattedText.defaultProps = {
-  format: {},
-  lineHeight: 1,
-  unit: 'vh',
-  maxChar: undefined
-}

package/src/components/ItemsContainer/components/animation.ts

@@ -1,130 +0,0 @@
-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: 'translateX(-100vw)',
-    },
-  },
-  slideLeft: {
-    in: {
-      translateX: () => {
-        return [`100vw`, '0vw']
-      },
-      easing: 'easeOutQuad',
-    },
-    out: {
-      translateX: () => {
-        return ['0vw', `-100vw`]
-      },
-      easing: 'easeInQuad',
-    },
-    init: {
-      transform: 'translateX(100vw)',
-    },
-  },
-}
-
-class Animation {
-  public mode: any
-  public duration: number
-  public speed: number
-  public stagger: number
-  public reverse: boolean
-
-  constructor() {
-    this.mode = animationModes.fade
-    this.duration = 10000
-    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
-          },
-          complete: () => {
-            finished()
-          },
-        },
-        this.mode.out
-      ),
-      `+=${offset}`
-    )
-    animation.play()
-  }
-}
-
-module.exports = exports = Animation

package/src/components/index.ts

@@ -1,13 +0,0 @@
-import { AnniversaryItem } from './AnniversaryItem';
-import { FontLoader } from './FontLoader';
-import { FormattedText } from './FormattedText';
-import { ItemsContainer } from './ItemsContainer';
-import { Render } from './Render';
-
-export {
-  AnniversaryItem,
-  FontLoader,
-  FormattedText,
-  ItemsContainer,
-  Render
-}

package/src/context/configureContext/ConfigureContext.tsx

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

package/src/context/configureContext/ConfigureProvider.tsx

@@ -1,72 +0,0 @@
-import React, { useReducer } from "react"
-import { ConfigureContext } from './ConfigureContext'
-import { anniversaryReducer } from "./configureReducer"
-
-const INITIAL_STATE: VixonicData = {
-  downloadsPath: '',
-  parameters: {
-    abbreviatedMonths: false,
-    animationMode: "",
-    animationOrder: false,
-    animationSpeed: 1.5,
-    animationTime: "",
-    backgroundImage: { id: "", filename: "", _isAsset: true },
-    apiDomain: "",
-    containerColumns: "",
-    containerRows: "",
-    containerRowsGap: "",
-    containerColumnsGap: "",
-    dataMode: "",
-    dateAlignment: "center",
-    dateDayFormat: { font: { filename: '', id: '', _isAsset: true }, fontSize: 55, alignment: { horizontal: "center" }, fontColor: "", },
-    dateEnabled: true,
-    dateMonthFormat: { font: { filename: '', id: '', _isAsset: true }, fontSize: 20, alignment: { horizontal: "center" }, fontColor: "" },
-    datePosition: 1,
-    datePrimaryColor: "",
-    dateStyle: "circle",
-    descriptionEnabled: true,
-    descriptionFormat: { font: { filename: '', id: '', _isAsset: true }, fontSize: 3.8, alignment: { horizontal: "center" }, fontColor: "" },
-    optionalEnabled: true,
-    optionalFormat: { font: { filename: '', id: '', _isAsset: true }, fontSize: 3.8, alignment: { horizontal: "center" }, fontColor: "" },
-    excludePast: false,
-    imageAlignment: "center",
-    imageEnabled: true,
-    imagePosition: 0,
-    imageStyle: "normal",
-    imageSize: 50,
-    itemMargins: "",
-    msj0: "",
-    nameFormat: { font: { filename: '', id: '', _isAsset: true }, fontSize: 3.8, alignment: { horizontal: "center" }, fontColor: "" },
-    orientation: "",
-    padding: "",
-    photosMode: "",
-    photosZip: { id: "0fb559ec-5da3-4b2d-95c4-d9623754c841", filename: "0fb559ec-5da3-4b2d-95c4-d9623754c841.zip", extension: "zip", _isAsset: true },
-    template: "",
-    textAlignment: "center",
-    textPosition: 0,
-    updateTime: 600000,
-    urlBaseApi: "",
-    imageMargin: "",
-    textMargin: "",
-    dateMargin: "",
-    separator: false
-  }
-}
-
-interface props {
-  children: JSX.Element | JSX.Element[]
-}
-
-export const AnniversaryProvider = ({ children }: props) => {
-  const [configureState, dispatch] = useReducer(anniversaryReducer, INITIAL_STATE)
-
-  const addConfiguration = (configure: VixonicData) => {
-    dispatch({ type: "addConfigure", payload: configure })
-  }
-
-  return (
-    <ConfigureContext.Provider value={{ configureState, addConfiguration }}>
-      {children}
-    </ConfigureContext.Provider>
-  )
-}

package/src/context/configureContext/configureReducer.ts

@@ -1,62 +0,0 @@
-type ConfigureAction = { type: 'addConfigure', payload: VixonicData }
-
-export const anniversaryReducer = (state: VixonicData, action: ConfigureAction) => {
-  const { downloadsPath, parameters } = action.payload
-  switch (action.type) {
-    case 'addConfigure':
-      return {
-        downloadsPath: downloadsPath,
-        parameters: {
-          abbreviatedMonths: parameters.abbreviatedMonths,
-          animationMode: parameters.animationMode,
-          animationOrder: parameters.animationOrder,
-          animationSpeed: parameters.animationSpeed,
-          animationTime: parameters.animationTime,
-          apiDomain: parameters.apiDomain,
-          backgroundImage: parameters.backgroundImage,
-          containerColumns: parameters.containerColumns,
-          containerColumnsGap: parameters.containerColumnsGap,
-          containerRows: parameters.containerRows,
-          containerRowsGap: parameters.containerRowsGap,
-          dataMode: parameters.dataMode,
-          dateAlignment: parameters.dateAlignment,
-          dateDayFormat: parameters.dateDayFormat,
-          dateEnabled: parameters.dateEnabled,
-          dateMonthFormat: parameters.dateMonthFormat,
-          datePosition: parameters.datePosition,
-          datePrimaryColor: parameters.datePrimaryColor,
-          dateStyle: parameters.dateStyle,
-          descriptionEnabled: parameters.descriptionEnabled,
-          descriptionFormat: parameters.descriptionFormat,
-          optionalEnabled: parameters.optionalEnabled,
-          optionalFormat: parameters.optionalFormat,
-          excludePast: parameters.excludePast,
-          imageAlignment: parameters.imageAlignment,
-          imageEnabled: parameters.imageEnabled,
-          imagePosition: parameters.imagePosition,
-          imageSize: parameters.imageSize,
-          imageStyle: parameters.imageStyle,
-          itemMargins: parameters.itemMargins,
-          msj0: parameters.msj0,
-          nameFormat: parameters.nameFormat,
-          orientation: parameters.orientation,
-          padding: parameters.padding,
-          photosMode: parameters.photosMode,
-          photosZip: parameters.photosZip,
-          template: parameters.template,
-          textAlignment: parameters.textAlignment,
-          textPosition: parameters.textPosition,
-          updateTime: parameters.updateTime,
-          urlBaseApi: parameters.urlBaseApi,
-          imageMargin: parameters.imageMargin,
-          textMargin: parameters.textMargin,
-          dateMargin: parameters.dateMargin,
-          separator: parameters.separator,
-          nameMaxChar: parameters.nameMaxChar,
-          descriptionMaxChar: parameters.descriptionMaxChar
-        }
-      }
-    default:
-      return state;
-  }
-}

package/src/context/dataContext/DataContex.tsx

@@ -1,8 +0,0 @@
-import { createContext } from 'react'
-
-type DataContext = {
-  dataEmployee: any,
-  addEmployee: (employee: DataEmployee[]) => void
-}
-
-export const DataContext = createContext<DataContext>({} as DataContext)

package/src/context/dataContext/DataProvider.tsx

@@ -1,25 +0,0 @@
-import React, { useReducer } from 'react'
-import { DataContext } from './DataContex'
-import { dataReducer } from './dataReducer'
-
-const INITIAL_STATE: Employees = {
-  dataEmployee: []
-}
-
-interface props {
-  children: JSX.Element | JSX.Element[]
-}
-
-export const DataProvider = ({ children }: props) => {
-  const [dataEmployee, dispatch] = useReducer(dataReducer, INITIAL_STATE)
-
-  const addEmployee = (employee: DataEmployee[]) => {
-    dispatch({ type: 'addAnniversary', payload: employee })
-  }
-
-  return (
-    <DataContext.Provider value={{ dataEmployee, addEmployee }}>
-      {children}
-    </DataContext.Provider>
-  )
-}

package/src/context/dataContext/dataReducer.ts

@@ -1,12 +0,0 @@
-type DataAction = { type: 'addAnniversary', payload: DataEmployee[] }
-
-export const dataReducer = (state: Employees, action: DataAction): Employees => {
-  switch (action.type) {
-    case 'addAnniversary':
-      return {
-        dataEmployee: action.payload
-      }
-    default:
-      return state
-  }
-}