@vixoniccom/aniversarios 1.4.1-dev.3 → 1.4.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vixoniccom/aniversarios",
   "alias": "Aniversarios",
-  "version": "1.4.1-dev.3",
+  "version": "1.4.1",
   "description": "Muestra el día que el trabajador está de aniversario en la empresa.",
   "main": "main.js",
   "author": "",

package/src/App.tsx

@@ -12,6 +12,6 @@ export const App: React.FunctionComponent<Props> = ({ start, appData, anniversar
   if (!appData) return null
 
   return (
-    <Render data={appData} start={start} anniversaries={anniversaries} />
+    <Render appData={appData} start={start} anniversaries={anniversaries} />
   )
 }

package/src/components/AnniversaryItem/components/AnniversaryDate/CircleDate/index.tsx

@@ -1,19 +1,15 @@
 import React from 'react'
 import { AnniveraryDateUtils } from '../utils'
 import { FormattedText } from '../../../../FormattedText'
-import { TextFormat } from '@vixoniccom/modules'
 
 interface Props {
-  day: number
-  month: number
-  orientation?: string
-  dateDayFormat: TextFormat.Value
-  dateMonthFormat: TextFormat.Value
-  datePrimaryColor: string
-  abbreviatedMonths: boolean
+  day: number,
+  month: number,
+  data: VixonicData
 }
 
-export const CircleDate: React.FunctionComponent<Props> = ({ day, month, orientation, dateMonthFormat, datePrimaryColor, dateDayFormat, abbreviatedMonths }) => {
+export const CircleDate: React.FunctionComponent<Props> = ({ day, month, data }) => {
+  const { orientation, dateMonthFormat, datePrimaryColor, dateDayFormat } = data.parameters
   const sizeProp = AnniveraryDateUtils.utils(orientation)
   const daySize = (dateDayFormat?.fontSize || 20) * 400 / 100
   const monthSize = (dateMonthFormat?.fontSize || 10) * 400 / 100
@@ -24,7 +20,7 @@ export const CircleDate: React.FunctionComponent<Props> = ({ day, month, orienta
         <circle fill={datePrimaryColor} cx='200' cy='200' r='200' />
         <foreignObject width='400' height='400'>
           <div style={{ height: 400, width: 400, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
-            <FormattedText text={AnniveraryDateUtils.getMonth(month, abbreviatedMonths)} format={{...dateMonthFormat, fontSize: monthSize}} unit='px' />
+            <FormattedText text={AnniveraryDateUtils.getMonth(month, true)} format={{...dateMonthFormat, fontSize: monthSize}} unit='px' />
             <FormattedText text={AnniveraryDateUtils.getZeroLeadedText(day)} format={{...dateDayFormat, fontSize: daySize}} unit='px' />
           </div>
         </foreignObject>

package/src/components/AnniversaryItem/components/AnniversaryDate/FlatDate/index.tsx

@@ -1,22 +1,18 @@
 import React from "react"
-import { AnniveraryDateUtils } from "../utils"
-import { TextFormat } from '@vixoniccom/modules'
+ import { AnniveraryDateUtils } from "../utils"
 
 interface Props {
-  day: number
   month: number
-  orientation?: string
-  dateDayFormat: TextFormat.Value
-  dateMonthFormat: TextFormat.Value
-  datePrimaryColor: string
-  abbreviatedMonths: boolean
+  day: number
+  data: VixonicData
 }
 
-export const FlatDate: React.FunctionComponent<Props> = ({ month, day, abbreviatedMonths, dateDayFormat, dateMonthFormat, orientation, datePrimaryColor }: Props) => {
+export const FlatDate: React.FunctionComponent<Props> = ({ month, day, data }: Props) => {
+   const { abbreviatedMonths, dateDayFormat, dateMonthFormat, orientation, datePrimaryColor } = data.parameters
 
   const sizeProp = AnniveraryDateUtils.utils(orientation)
-  const daySize = ((dateDayFormat?.fontSize ?? 20) * 400) / 100
   const monthSize = ((dateMonthFormat?.fontSize ?? 10) * 400) / 100
+  const daySize = ((dateDayFormat?.fontSize ?? 20) * 400) / 100
 
   const getFontFamily = (format: any) => {
     if (format?.font?.filename) return format.font.filename.replace('.', '-')

package/src/components/AnniversaryItem/components/AnniversaryDate/OutlineDate/index.tsx

@@ -1,19 +1,16 @@
 import React, { useState } from 'react'
-import { FormattedText } from '../../../../FormattedText'
+ import { FormattedText } from '../../../../FormattedText'
 import { AnniveraryDateUtils } from '../utils'
-import { TextFormat } from '@vixoniccom/modules'
+
 
 interface Props {
   day: number
   month: number
-  orientation?: string
-  dateDayFormat: TextFormat.Value
-  dateMonthFormat: TextFormat.Value
-  datePrimaryColor: string
-  abbreviatedMonths: boolean
+  data: VixonicData
 }
 
-export const OutlineDate: React.FunctionComponent<Props> = ({ day, month, abbreviatedMonths, dateDayFormat, dateMonthFormat, orientation, datePrimaryColor }: Props) => {
+export const OutlineDate: React.FunctionComponent<Props> = ({ day, month, data }: Props) => {
+   const { abbreviatedMonths, dateDayFormat, dateMonthFormat, orientation, datePrimaryColor } = data.parameters
   const sizeProp = AnniveraryDateUtils.utils(orientation)
 
   const parseFormat = (format: any, defaultSize: any) => {
@@ -23,8 +20,8 @@ export const OutlineDate: React.FunctionComponent<Props> = ({ day, month, abbrev
     }
   }
 
-  const [dayFormatState,] = useState(parseFormat(dateDayFormat, 20))
   const [monthFormatState,] = useState(parseFormat(dateMonthFormat, 10))
+  const [dayFormatState,] = useState(parseFormat(dateDayFormat, 20))
 
   return (
     <svg {...sizeProp} viewBox='0 0 100 100'>

package/src/components/AnniversaryItem/components/AnniversaryDate/TextCalendarDate/index.tsx

@@ -1,19 +1,15 @@
 import React, { useState } from 'react'
 import { FormattedText } from '../../../../FormattedText'
 import { AnniveraryDateUtils } from '../utils'
-import { TextFormat } from '@vixoniccom/modules'
 
 interface Props {
   day: number
   month: number
-  orientation?: string
-  dateDayFormat: TextFormat.Value
-  dateMonthFormat: TextFormat.Value
-  datePrimaryColor: string
-  abbreviatedMonths: boolean
+  data: VixonicData
 }
 
-export const TextCalendarDate: React.FunctionComponent<Props> = ({ day, month, dateMonthFormat, dateDayFormat, abbreviatedMonths, orientation }: Props) => {
+export const TextCalendarDate: React.FunctionComponent<Props> = ({ day, month, data }: Props) => {
+  const { dateMonthFormat, dateDayFormat, abbreviatedMonths, orientation } = data.parameters
   const sizeProp = AnniveraryDateUtils.utils(orientation, '100%')
 
   const parseFormat = (format: any, defaultSize: any) => {
@@ -23,8 +19,8 @@ export const TextCalendarDate: React.FunctionComponent<Props> = ({ day, month, d
     }
   }
 
-  const [monthFormatState,] = useState(parseFormat(dateMonthFormat, 20))
-  const [dayFormatState,] = useState(parseFormat(dateDayFormat, 10))
+  const [monthFormatState,] = useState(parseFormat(dateMonthFormat, 10))
+  const [dayFormatState,] = useState(parseFormat(dateDayFormat, 20))
 
   return (
     <svg {...sizeProp} viewBox='0 0 100 100'>

package/src/components/AnniversaryItem/components/AnniversaryDate/TextDate/index.tsx

@@ -1,15 +1,15 @@
 import React from 'react'
 import { FormattedText } from '../../../../FormattedText'
-import { TextFormat } from '@vixoniccom/modules'
 
 interface Props {
   day: number
   month: number
-  dateDayFormat: TextFormat.Value
-  dateMonthFormat: TextFormat.Value
+  data: VixonicData
 }
 
-export const TextDate: React.FunctionComponent<Props> = ({ day, month, dateDayFormat, dateMonthFormat }: Props) => {
+export const TextDate: React.FunctionComponent<Props> = ({ day, month, data }: Props) => {
+  const { dateMonthFormat, dateDayFormat } = data.parameters
+
   return (
     <div style={{ display: 'flex', alignItems: 'center' }}>
       <FormattedText text={`${day}/`} format={dateDayFormat} />

package/src/components/AnniversaryItem/components/AnniversaryDate/index.tsx

@@ -3,7 +3,6 @@ import { FlatDate } from './FlatDate'
 import { TextCalendarDate } from './TextCalendarDate'
 import { TextDate } from './TextDate'
 import { OutlineDate } from './OutlineDate'
-import { TextFormat } from '@vixoniccom/modules'
 
 const itemStyles = {
   calendarFlat: FlatDate,
@@ -14,26 +13,15 @@ const itemStyles = {
 }
 
 interface Props {
-  style: keyof typeof itemStyles
-  day: number
-  month: number
-  orientation?: string
-  dateDayFormat: TextFormat.Value
-  dateMonthFormat: TextFormat.Value
-  datePrimaryColor: string
-  abbreviatedMonths: boolean
+  style: keyof typeof itemStyles,
+  day: number,
+  month: number,
+  data: VixonicData
 }
 
-export const AnniversaryDate = ({ style, day, month, orientation, dateDayFormat, dateMonthFormat, datePrimaryColor, abbreviatedMonths }: Props) => {
+export const AnniversaryDate = ({ style, day, month, data }: Props) => {
   const StyledItem = itemStyles.hasOwnProperty(style) ? itemStyles[style] : itemStyles.text
   return (
-    <StyledItem day={day}
-      month={month}
-      orientation={orientation}
-      dateDayFormat={dateDayFormat}
-      dateMonthFormat={dateMonthFormat}
-      datePrimaryColor={datePrimaryColor}
-      abbreviatedMonths={abbreviatedMonths}
-    />
+    <StyledItem day={day} month={month} data={data} />
   )
 }

package/src/components/AnniversaryItem/components/ClassicItem/index.tsx

@@ -2,45 +2,17 @@ import React, { useEffect, useRef, useState } from "react"
 import { AnniversaryDate, AnniversaryImage, Separator } from '..'
 import { FormattedText } from "../../../FormattedText"
 import { getPhotoUrl, parseBorderMargin, parseParameters } from '../utils'
-import { TextFormat } from "@vixoniccom/modules"
 
 interface Props {
   anniversary: Anniversary
-  parameters: VixonicParameters
-  downloadsPath: string
+  data: VixonicData
 }
 
-const dayFormatTemplate: TextFormat.Value = {
-  'font': {
-    id: '7953953c-7029-4730-ae4d-cff4abd5288f',
-    filename: '7953953c-7029-4730-ae4d-cff4abd5288f.ttf',
-    __isAsset: true
-  },
-  fontSize: 20,
-  alignment: {
-    horizontal: 'center'
-  },
-  fontColor: '#ffffff'
-}
-
-const monthFormatTemplate: TextFormat.Value = {
-  'font': {
-    id: '7953953c-7029-4730-ae4d-cff4abd5288f',
-    filename: '7953953c-7029-4730-ae4d-cff4abd5288f.ttf',
-    __isAsset: true
-  },
-  fontSize: 20,
-  alignment: {
-    horizontal: 'center'
-  },
-  fontColor: '#ffffff'
-}
-
-
-export const ClassicItem: React.FunctionComponent<Props> = ({ anniversary, parameters, downloadsPath }: Props) => {
+export const ClassicItem: React.FunctionComponent<Props> = ({ anniversary, data }: Props) => {
   let month = anniversary.month
   const cont = useRef(null)
-  const { orientation, separatorColor, separatorWidth, imageSize, dateDayFormat, dateMonthFormat, datePrimaryColor, abbreviatedMonths  } = parameters  
+  const { parameters, downloadsPath } = data
+  const { orientation, separatorColor, separatorWidth, imageSize } = parameters
   const [margins, setMargins] = useState(parseBorderMargin(parameters.itemMargins))
   const [state, setState] = useState({...parseParameters(parameters)})
 
@@ -125,11 +97,7 @@ export const ClassicItem: React.FunctionComponent<Props> = ({ anniversary, param
             style={parameters.dateStyle}
             day={anniversary.day}
             month={month}
-            orientation={orientation}
-            dateDayFormat={dateDayFormat || dayFormatTemplate}
-            dateMonthFormat={dateMonthFormat || monthFormatTemplate}
-            datePrimaryColor={datePrimaryColor || 'transparent'}
-            abbreviatedMonths={!!abbreviatedMonths}
+            data={data}
           />
         </div>
       )}

package/src/components/AnniversaryItem/index.tsx

@@ -7,12 +7,11 @@ const itemStyles = {
 interface Props {
   style: 'standard' | 'custom',
   anniversary: Anniversary,
-  parameters: VixonicParameters,
-  downloadsPath: string
+  data: VixonicData
 }
 
-export const AnniversaryItem = ({ style, anniversary, parameters, downloadsPath }: Props) => {
+export const AnniversaryItem = ({ style, anniversary, data }: Props) => {
   const StyledItem = itemStyles.hasOwnProperty(style) ? itemStyles['standard'] : itemStyles.standard
 
-  return <StyledItem anniversary={anniversary} parameters={parameters} downloadsPath={downloadsPath} />
+  return <StyledItem anniversary={anniversary} data={data} />
 }

package/src/components/FontLoader/index.tsx

@@ -1,10 +1,10 @@
 interface Props {
   paths: Array<string>
-  parameters: VixonicParameters
-  downloadsPath: string
+  data: VixonicData
 }
 
-export const FontLoader = ({ paths, parameters, downloadsPath }: Props) => {
+export const FontLoader = ({ paths, data }: Props) => {
+  const { parameters, downloadsPath } = data
 
   const _getValueByPath = (path: string, obj: any): any => {
     const pathsArray = path.split('.')
@@ -30,7 +30,6 @@ export const FontLoader = ({ paths, parameters, downloadsPath }: Props) => {
           }
         `
     } catch (err) {
-      console.error('Error loading font:', err)
       return ''
     }
   })

package/src/components/Render/index.tsx

@@ -4,14 +4,14 @@ import { AnniversaryItem } from '../AnniversaryItem'
 import { ItemsContainer } from '../ItemsContainer'
 
 interface Props {
-  data: VixonicData
   start: boolean
+  appData: VixonicData
   anniversaries: Anniversary[]
 }
 
 
-export const Render = ({ start, data, anniversaries }: Props) => {
-  const { parameters, downloadsPath } = data
+export const Render = ({ start, appData, anniversaries }: Props) => {
+  const { parameters, downloadsPath } = appData
   const { backgroundImage,
     padding,
     defaultMessage = 'Sin ingresos',
@@ -28,14 +28,7 @@ export const Render = ({ start, data, anniversaries }: Props) => {
     ? `url("${downloadsPath}/${backgroundImage.filename}")` : ''
 
   const anniversaryItems = anniversaries.map((anniversary: Anniversary) => {
-    return (
-    <AnniversaryItem 
-      key={anniversary?.name} 
-      style={'standard'} 
-      anniversary={anniversary} 
-      parameters={parameters} 
-      downloadsPath={downloadsPath} 
-    />)
+    return <AnniversaryItem style={'standard'} anniversary={anniversary} data={appData} key={anniversary?.name} />
   })
 
   return (
@@ -49,7 +42,7 @@ export const Render = ({ start, data, anniversaries }: Props) => {
       backgroundSize: '100% 100%',
       padding: padding
     }}>
-      <FontLoader paths={['nameFormat.font', 'descriptionFormat.font', 'dateDayFormat.font', 'dateMonthFormat.font', 'optionalFormat.font']} parameters={parameters} downloadsPath={downloadsPath} />
+      <FontLoader paths={['nameFormat.font', 'descriptionFormat.font', 'dateDayFormat.font', 'dateMonthFormat.font', 'optionalFormat.font']} data={appData} />
       {(anniversaries.length > 0) ?
         <ItemsContainer
           items={anniversaryItems}
@@ -71,7 +64,7 @@ export const Render = ({ start, data, anniversaries }: Props) => {
           justifyContent: 'center',
           alignItems: 'center'
         }}>
-          <FormattedText text={defaultMessage.trim() || "No existen aniversarios"} format={parameters.defaultMessageFormat} />
+          <FormattedText text={defaultMessage.trim()} format={parameters.defaultMessageFormat} />
         </div>
       }
     </div >