@vixoniccom/aniversarios 1.4.0 → 1.4.1-dev.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vixoniccom/aniversarios",
   "alias": "Aniversarios",
-  "version": "1.4.0",
+  "version": "1.4.1-dev.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 appData={appData} start={start} anniversaries={anniversaries} />
+    <Render data={appData} start={start} anniversaries={anniversaries} />
   )
 }

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

@@ -1,15 +1,19 @@
 import React from 'react'
 import { AnniveraryDateUtils } from '../utils'
 import { FormattedText } from '../../../../FormattedText'
+import { TextFormat } from '@vixoniccom/modules'
 
 interface Props {
-  day: number,
-  month: number,
-  data: VixonicData
+  day: number
+  month: number
+  orientation?: string
+  dateDayFormat: TextFormat.Value
+  dateMonthFormat: TextFormat.Value
+  datePrimaryColor: string
+  abbreviatedMonths: boolean
 }
 
-export const CircleDate: React.FunctionComponent<Props> = ({ day, month, data }) => {
-  const { orientation, dateMonthFormat, datePrimaryColor, dateDayFormat } = data.parameters
+export const CircleDate: React.FunctionComponent<Props> = ({ day, month, orientation, dateMonthFormat, datePrimaryColor, dateDayFormat, abbreviatedMonths }) => {
   const sizeProp = AnniveraryDateUtils.utils(orientation)
   const daySize = (dateDayFormat?.fontSize || 100) * 400 / 100
   const monthSize = (dateMonthFormat?.fontSize || 100) * 400 / 100
@@ -20,7 +24,7 @@ export const CircleDate: React.FunctionComponent<Props> = ({ day, month, data })
         <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, true)} format={{...dateMonthFormat, fontSize: monthSize}} unit='px' />
+            <FormattedText text={AnniveraryDateUtils.getMonth(month, abbreviatedMonths)} 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,18 +1,22 @@
 import React from "react"
- import { AnniveraryDateUtils } from "../utils"
+import { AnniveraryDateUtils } from "../utils"
+import { TextFormat } from '@vixoniccom/modules'
 
 interface Props {
-  month: number
   day: number
-  data: VixonicData
+  month: number
+  orientation?: string
+  dateDayFormat: TextFormat.Value
+  dateMonthFormat: TextFormat.Value
+  datePrimaryColor: string
+  abbreviatedMonths: boolean
 }
 
-export const FlatDate: React.FunctionComponent<Props> = ({ month, day, data }: Props) => {
-   const { abbreviatedMonths, dateDayFormat, dateMonthFormat, orientation, datePrimaryColor } = data.parameters
+export const FlatDate: React.FunctionComponent<Props> = ({ month, day, abbreviatedMonths, dateDayFormat, dateMonthFormat, orientation, datePrimaryColor }: Props) => {
 
   const sizeProp = AnniveraryDateUtils.utils(orientation)
-  const monthSize = ((dateMonthFormat?.fontSize ?? 18.5) * 400) / 100
   const daySize = ((dateDayFormat?.fontSize ?? 57.5) * 400) / 100
+  const monthSize = ((dateMonthFormat?.fontSize ?? 18.5) * 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,16 +1,19 @@
 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
-  data: VixonicData
+  orientation?: string
+  dateDayFormat: TextFormat.Value
+  dateMonthFormat: TextFormat.Value
+  datePrimaryColor: string
+  abbreviatedMonths: boolean
 }
 
-export const OutlineDate: React.FunctionComponent<Props> = ({ day, month, data }: Props) => {
-   const { abbreviatedMonths, dateDayFormat, dateMonthFormat, orientation, datePrimaryColor } = data.parameters
+export const OutlineDate: React.FunctionComponent<Props> = ({ day, month, abbreviatedMonths, dateDayFormat, dateMonthFormat, orientation, datePrimaryColor }: Props) => {
   const sizeProp = AnniveraryDateUtils.utils(orientation)
 
   const parseFormat = (format: any, defaultSize: any) => {
@@ -20,8 +23,8 @@ export const OutlineDate: React.FunctionComponent<Props> = ({ day, month, data }
     }
   }
 
-  const [monthFormatState,] = useState(parseFormat(dateMonthFormat, 20))
-  const [dayFormatState,] = useState(parseFormat(dateDayFormat, 50))
+  const [dayFormatState,] = useState(parseFormat(dateDayFormat, 20))
+  const [monthFormatState,] = useState(parseFormat(dateMonthFormat, 50))
 
   return (
     <svg {...sizeProp} viewBox='0 0 100 100'>

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

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

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
-  data: VixonicData
+  dateDayFormat: TextFormat.Value
+  dateMonthFormat: TextFormat.Value
 }
 
-export const TextDate: React.FunctionComponent<Props> = ({ day, month, data }: Props) => {
-  const { dateMonthFormat, dateDayFormat } = data.parameters
-
+export const TextDate: React.FunctionComponent<Props> = ({ day, month, dateDayFormat, dateMonthFormat }: Props) => {
   return (
     <div style={{ display: 'flex', alignItems: 'center' }}>
       <FormattedText text={`${day}/`} format={dateDayFormat} />

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

@@ -3,6 +3,7 @@ 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,
@@ -13,15 +14,26 @@ const itemStyles = {
 }
 
 interface Props {
-  style: keyof typeof itemStyles,
-  day: number,
-  month: number,
-  data: VixonicData
+  style: keyof typeof itemStyles
+  day: number
+  month: number
+  orientation?: string
+  dateDayFormat: TextFormat.Value
+  dateMonthFormat: TextFormat.Value
+  datePrimaryColor: string
+  abbreviatedMonths: boolean
 }
 
-export const AnniversaryDate = ({ style, day, month, data }: Props) => {
+export const AnniversaryDate = ({ style, day, month, orientation, dateDayFormat, dateMonthFormat, datePrimaryColor, abbreviatedMonths }: Props) => {
   const StyledItem = itemStyles.hasOwnProperty(style) ? itemStyles[style] : itemStyles.text
   return (
-    <StyledItem day={day} month={month} data={data} />
+    <StyledItem day={day}
+      month={month}
+      orientation={orientation}
+      dateDayFormat={dateDayFormat}
+      dateMonthFormat={dateMonthFormat}
+      datePrimaryColor={datePrimaryColor}
+      abbreviatedMonths={abbreviatedMonths}
+    />
   )
 }

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

@@ -2,17 +2,45 @@ 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
-  data: VixonicData
+  parameters: VixonicParameters
+  downloadsPath: string
 }
 
-export const ClassicItem: React.FunctionComponent<Props> = ({ anniversary, data }: Props) => {
+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) => {
   let month = anniversary.month
   const cont = useRef(null)
-  const { parameters, downloadsPath } = data
-  const { orientation, separatorColor, separatorWidth, imageSize } = parameters
+  const { orientation, separatorColor, separatorWidth, imageSize, dateDayFormat, dateMonthFormat, datePrimaryColor, abbreviatedMonths  } = parameters  
   const [margins, setMargins] = useState(parseBorderMargin(parameters.itemMargins))
   const [state, setState] = useState({...parseParameters(parameters)})
 
@@ -49,7 +77,7 @@ export const ClassicItem: React.FunctionComponent<Props> = ({ anniversary, data
             <AnniversaryImage
               url={anniversary.image ? getPhotoUrl(anniversary.image, parameters, downloadsPath) : null}
               orientation={orientation}
-              size={Number(imageSize) || 100}
+              size={Number(imageSize) || 20}
               borderStyle={parameters.imageStyle}
             />
           }
@@ -97,7 +125,11 @@ export const ClassicItem: React.FunctionComponent<Props> = ({ anniversary, data
             style={parameters.dateStyle}
             day={anniversary.day}
             month={month}
-            data={data}
+            orientation={orientation}
+            dateDayFormat={dateDayFormat || dayFormatTemplate}
+            dateMonthFormat={dateMonthFormat || monthFormatTemplate}
+            datePrimaryColor={datePrimaryColor || 'transparent'}
+            abbreviatedMonths={!!abbreviatedMonths}
           />
         </div>
       )}

package/src/components/AnniversaryItem/index.tsx

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

package/src/components/FontLoader/index.tsx

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