@vixoniccom/aniversarios 1.3.0-dev.0 → 1.3.0-dev.1

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [1.3.0-dev.1](https://github.com/Vixonic/store-aniversarios/compare/v1.3.0-dev.0...v1.3.0-dev.1) (2025-07-14)
+
+
+### Bug Fixes
+
+* Replace logical OR with nullish coalescing operator for default values in various components ([c9f2bba](https://github.com/Vixonic/store-aniversarios/commit/c9f2bbafcf44f38b1578b6946a19434f41e50f52))
+* Update maskId generation for unique identifiers in AnniversaryImage component ([6f5b452](https://github.com/Vixonic/store-aniversarios/commit/6f5b4525f640d8730488331c56aed5fb68378e56))
+* Update maskId generation for unique identifiers in AnniversaryImage component ([c9a3d43](https://github.com/Vixonic/store-aniversarios/commit/c9a3d43acc57f707a39a31f131fda6266f674f30))
+
 ## [1.3.0-dev.0](https://github.com/Vixonic/store-aniversarios/compare/v1.2.3-dev.2...v1.3.0-dev.0) (2025-07-14)
 
 

package/package.json

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

package/src/App.tsx

@@ -10,7 +10,7 @@ interface Props {
 export const App: React.FunctionComponent<Props> = ({ start, appData, anniversaries }) => {
 
   const parameters = appData?.parameters
-  const [aniversariesElements, setAnniversariesElements] = useState<Anniversary[]>(anniversaries)
+  const [anniversariesElements, setAnniversariesElements] = useState<Anniversary[]>(anniversaries)
 
   useEffect(() => {
     setAnniversariesElements(anniversaries)
@@ -19,8 +19,8 @@ export const App: React.FunctionComponent<Props> = ({ start, appData, anniversar
   if (!appData) return null
 
   return (
-    (aniversariesElements.length === 0) ?
+    (anniversariesElements.length === 0) ?
       <FormattedText text={parameters?.defaultMessage ?? 'No hay ingresos para mostrar'} format={parameters?.defaultMessageFormat} />
-      : <Render appData={appData} start={start} anniversaries={aniversariesElements} />
+      : <Render appData={appData} start={start} anniversaries={anniversariesElements} />
   )
 }

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

@@ -11,8 +11,8 @@ export const FlatDate: React.FunctionComponent<Props> = ({ month, day, data }: P
    const { abbreviatedMonths, dateDayFormat, dateMonthFormat, orientation, datePrimaryColor } = data.parameters
 
   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 daySize = ((dateDayFormat?.fontSize ?? 57.5) * 400) / 100
 
   const getFontFamily = (format: any) => {
     if (format?.font?.filename) return format.font.filename.replace('.', '-')
@@ -29,7 +29,7 @@ export const FlatDate: React.FunctionComponent<Props> = ({ month, day, data }: P
           textAnchor='middle'
           alignmentBaseline='central' x='200' y='55'
           fontSize={monthSize} preserveAspectRatio='none'
-          fill={dateMonthFormat?.fontColor || '#fff'} fontSizeAdjust=''>
+          fill={dateMonthFormat?.fontColor ?? '#fff'} fontSizeAdjust=''>
           {AnniveraryDateUtils.getMonth(month, abbreviatedMonths)}
         </text>
 
@@ -37,7 +37,7 @@ export const FlatDate: React.FunctionComponent<Props> = ({ month, day, data }: P
           textAnchor='middle'
           alignmentBaseline='central' x='200' y='245'
           fontSize={daySize} preserveAspectRatio='none'
-          fill={dateDayFormat?.fontColor || '#fff'} fontSizeAdjust=''>
+          fill={dateDayFormat?.fontColor ?? '#fff'} fontSizeAdjust=''>
           {AnniveraryDateUtils.getZeroLeadedText(day)}
         </text>
       </g>

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

@@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState } from 'react'
 import { AnniveraryDateUtils } from '../AnniversaryDate/utils'
 
 const defaultImg = require('../default-profile.png')
+let idCounter = 0
 const borderStyles = {
   normal: '0',
   rounded: '10',
@@ -18,7 +19,7 @@ interface Props {
 export const AnniversaryImage: React.FunctionComponent<Props> = ({ url, size, borderStyle, orientation }) => {
   const [urlState, setUrlState] = useState(url || defaultImg)
   const input = useRef<SVGImageElement>(null)
-  const maskId = `${Math.random() * 10}${Math.random() * 10}${Math.random() * 10}`
+  const maskId = `mask-${Date.now()}-${++idCounter}`
   const imageExist = (url: any) => {
     const isValidImage = url.substr(-3).toLowerCase() === 'png' || url.substr(-3).toLowerCase() === 'jpg' || url.substr(-4).toLowerCase() === 'jpeg'
     return isValidImage ? url : defaultImg

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

@@ -72,7 +72,7 @@ export const ClassicItem: React.FunctionComponent<Props> = ({ anniversary, data
         />
         {state.descriptionEnabled && (
           <FormattedText
-            text={anniversary.position || ''}
+            text={anniversary.position ?? ''}
             format={parameters.descriptionFormat}
             maxChar={Number(parameters.descriptionMaxChar)}
             lineHeight={1.2}
@@ -80,7 +80,7 @@ export const ClassicItem: React.FunctionComponent<Props> = ({ anniversary, data
         )}
         {state.optionalEnabled && (
           <FormattedText
-            text={anniversary.optional || ''}
+            text={anniversary.optional ?? ''}
             format={parameters.optionalFormat}
             maxChar={Number(parameters.descriptionMaxChar)}
             lineHeight={1.2}

package/src/components/AnniversaryItem/components/Separator/Separator.tsx

@@ -27,7 +27,7 @@ export const Separator = ({ order, size, color, orientation, margins }: Props) =
     <div style={{
       flexShrink: 0,
       order: order,
-      backgroundColor: color || '',
+      backgroundColor: color ?? '',
       margin: margins,
       ...sizeStyle
     }} />

package/src/components/FontLoader/index.tsx

@@ -1,5 +1,3 @@
-import PropTypes from 'prop-types'
-
 interface Props {
   paths: Array<string>
   data: VixonicData
@@ -40,13 +38,3 @@ export const FontLoader = ({ paths, data }: Props) => {
     <style>{fonts}</style>
   )
 }
-
-FontLoader.defaultProps = {
-  paths: []
-}
-
-FontLoader.propTypes = {
-  paths: PropTypes.arrayOf(PropTypes.string).isRequired,
-  data: PropTypes.object.isRequired
-}
-

package/src/components/FormattedText/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { CSSProperties } from 'react'
 
 const alignments = {
   center: 'center',
@@ -15,7 +15,7 @@ interface Props {
   format?: any
   lineHeight?: number
   maxChar?: number
-  style?: number
+  style?: CSSProperties
   text: string
   unit?: string
   paddingBottom?: string
@@ -55,7 +55,7 @@ export const FormattedText: React.FunctionComponent<Props> = ({ text, format, ma
   const containerStyle = {
     display: 'inline-flex',
     justifyContent: getHorizontalAlignment(format.alignment),
-    ...(style as any)
+    ...style
   }
 
   return (

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

@@ -75,10 +75,10 @@ export class AnimationController {
 
   configure(options: Partial<Options>) {
     this.mode = options.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 !== undefined ? options.reverse : true
+    this.duration = options.duration ?? 10000
+    this.speed = 1000 * (options.speed ?? 1)
+    this.stagger = this.speed / (options.stagger ?? 4)
+    this.reverse = options.reverse ?? true
   }
 
   getInitialStyle() {

package/src/components/Render/index.tsx

@@ -25,7 +25,7 @@ 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} />
+    return <AnniversaryItem style={'standard'} anniversary={anniversary} data={appData} key={anniversary?.name} />
   })
 
   return (

package/src/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html style="position: absolute; height:100%; width: 100%; overflow: hidden;">
+<html lang="es" xml:lang="es" style="position: absolute; height:100%; width: 100%; overflow: hidden;">
 <head>
 <title></title>
 <meta charset="utf-8">