@vixoniccom/aniversarios 1.2.3-dev.2 → 1.3.0-dev.0

package/.github/workflows/sonarqube.yml

@@ -0,0 +1,30 @@
+name: Sonarqube Analysis
+
+on:
+  push:
+    branches:
+      - development
+  pull_request:
+    types: [opened, synchronize, reopened]
+
+jobs:
+  sonarqube:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          # Disabling shallow clone is recommended for improving relevancy of reporting.
+          fetch-depth: 0
+
+      - name: SonarQube Scan
+        uses: sonarsource/sonarqube-scan-action@master
+        env:
+          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
+          SONAR_HOST_URL: ${{ secrets.SONAR_HOST_URL }}
+      
+      - name: SonarQube Quality Gate Check
+        uses: sonarsource/sonarqube-quality-gate-action@master
+        timeout-minutes: 5
+        env:
+          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
+          SONAR_HOST_URL: ${{ secrets.SONAR_HOST_URL }}

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 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.0](https://github.com/Vixonic/store-aniversarios/compare/v1.2.3-dev.2...v1.3.0-dev.0) (2025-07-14)
+
+
+### Features
+
+* Add support for photo mode in settings and related components ([5eeab44](https://github.com/Vixonic/store-aniversarios/commit/5eeab443f73553239c940941fc6740b41601228b))
+
 ### [1.2.3-dev.2](https://github.com/Vixonic/store-aniversarios/compare/v1.2.3-dev.1...v1.2.3-dev.2) (2025-07-11)
 
 ### [1.2.3-dev.1](https://github.com/Vixonic/store-aniversarios/compare/v1.2.3-dev.0...v1.2.3-dev.1) (2025-07-09)

package/configuration/dataGroup/DataInputs.ts

@@ -25,6 +25,16 @@ export const dataInputs = [
     serviceType: 'RexmasAnniversarieService',
     show: serviceEnabled.rexmasServiceEnabled
   }),
+  new SelectInput({
+    id: 'photoMode',
+    label: 'Modo de fotos',
+    items: [
+      { label: 'Zip', value: 'zip' },
+      { label: 'En linea', value: 'online' }
+    ],
+    defaultValue: 'zip',
+    description: 'Selecciona el modo de fotos. Por defecto, Zip.'
+  }),
   new SelectAssetKna({
     id: 'photosZip',
     label: 'Archivo Zip para fotos',

package/configuration.json

@@ -40,6 +40,23 @@
           "type": "service-input",
           "serviceType": "RexmasAnniversarieService"
         },
+        {
+          "id": "photoMode",
+          "label": "Modo de fotos",
+          "type": "select-input",
+          "description": "Selecciona el modo de fotos. Por defecto, Zip.",
+          "items": [
+            {
+              "label": "Zip",
+              "value": "zip"
+            },
+            {
+              "label": "En linea",
+              "value": "online"
+            }
+          ],
+          "defaultValue": "zip"
+        },
         {
           "id": "photosZip",
           "label": "Archivo Zip para fotos",

package/package.json

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

package/sonar-project.properties

@@ -0,0 +1 @@
+sonar.projectKey=Vixonic_store-aniversarios_cb1129c3-491c-4ada-ac60-75ab0fad0c6a

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

@@ -20,8 +20,8 @@ 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={Object.assign({}, dateMonthFormat, { fontSize: monthSize })} unit='px' />
-            <FormattedText text={AnniveraryDateUtils.getZeroLeadedText(day)} format={Object.assign({}, dateDayFormat, { fontSize: daySize })} 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>
       </g>

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

@@ -14,11 +14,10 @@ export const OutlineDate: React.FunctionComponent<Props> = ({ day, month, data }
   const sizeProp = AnniveraryDateUtils.utils(orientation)
 
   const parseFormat = (format: any, defaultSize: any) => {
-    return Object.assign(
-      {},
-      format,
-      { fontSize: format.fontSize || defaultSize }
-    )
+    return {
+      ...format,
+      fontSize: format.fontSize || defaultSize
+    }
   }
 
   const [monthFormatState,] = useState(parseFormat(dateMonthFormat, 20))

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

@@ -13,11 +13,10 @@ export const TextCalendarDate: React.FunctionComponent<Props> = ({ day, month, d
   const sizeProp = AnniveraryDateUtils.utils(orientation, '100%')
 
   const parseFormat = (format: any, defaultSize: any) => {
-    return Object.assign(
-      {},
-      format,
-      { fontSize: format.fontSize || defaultSize }
-    )
+    return {
+      ...format,
+      fontSize: format.fontSize || defaultSize
+    }
   }
 
   const [monthFormatState,] = useState(parseFormat(dateMonthFormat, 20))

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

@@ -12,14 +12,6 @@ const itemStyles = {
   outlines: OutlineDate
 }
 
-interface itemStyles {
-  calendarFlat: string
-  calendarText: string
-  circle: string
-  text: string
-  outlines: string
-}
-
 interface Props {
   style: keyof typeof itemStyles,
   day: number,

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

@@ -14,11 +14,11 @@ export const ClassicItem: React.FunctionComponent<Props> = ({ anniversary, data
   const { parameters, downloadsPath } = data
   const { orientation, separatorColor, separatorWidth, imageSize } = parameters
   const [margins, setMargins] = useState(parseBorderMargin(parameters.itemMargins))
-  const [state, setState] = useState(Object.assign({}, parseParameters(parameters)))
+  const [state, setState] = useState({...parseParameters(parameters)})
 
   useEffect(() => {
     setMargins(parseBorderMargin(parameters.itemMargins))
-    setState(Object.assign({}, parseParameters(parameters)))
+    setState({...parseParameters(parameters)})
   }, [])
 
   const separatorProps = {

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

@@ -1,5 +1,3 @@
-import React from 'react'
-
 interface Props {
   order: number | undefined
   size: number | undefined
@@ -12,12 +10,12 @@ export const Separator = ({ order, size, color, orientation, margins }: Props) =
   const getSizeStyle = (orientation: any, size: any) => {
     if (orientation === 'h') {
       return {
-        width: size || 0,
+        width: size ?? 0,
         height: '100%'
       }
     } else {
       return {
-        height: size || 0,
+        height: size ?? 0,
         width: '100%'
       }
     }

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

@@ -1,11 +1,20 @@
 export const utils = (orientation: string, size: number) => {
   const sizeAttr = orientation === 'v' ? 'width' : 'height'
-  const percentage = size ? `${size}` : orientation === 'v' ? '40%' : '80%'
+  let percentage: string
+  if (size) {
+    percentage = `${size}%`
+  } else {
+    percentage = 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 numberPattern = '[+-]?[0-9]+\\.?[0-9]*'
+  const unitPattern = '(px|em|ex|%|in|cm|mm|pt|pc)'
+  const spacePattern = '( )?'
+  const fullPattern = `(${spacePattern}${numberPattern}${unitPattern})?`
+  const pattern = new RegExp(fullPattern, 'g')
   const match = marginString ? marginString.match(pattern) : ['']
 
   switch (match.length) {
@@ -22,11 +31,11 @@ const parseElementStyles = (margin: string, position: number, defaultPosition: n
   const { orientation, separator } = parameters
   const marginAttr = orientation === 'v' ? 'marginBottom' : 'marginRight'
   const sizeAttr = orientation === 'v' ? 'width' : 'height'
-  const pos = position !== undefined ? position : defaultPosition
+  const pos =  position ?? defaultPosition
   return {
     order: pos,
     [sizeAttr]: '100%',
-    [marginAttr]: margin !== undefined && margin !== '' ? `${margin}%` : pos === 3 || separator === true ? 0 : '4%',
+    [marginAttr]: getMarginValue(margin, pos, separator)
   }
 }
 
@@ -37,39 +46,45 @@ export const parseParameters = (parameters: any) => {
 
   return {
     imageEnabled: parameters.imageEnabled,
-    imageStyle: Object.assign(
-      {
-        flexShrink: 0,
-        display: 'flex',
-        justifyContent: imageAlignment,
-        alignItems: imageAlignment,
-      },
-      parseElementStyles(parameters.imageMargin, parameters.imagePosition, 1, parameters)
-    ),
+    imageStyle: {
+      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)
-    ),
+    textStyle: {
+      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)
-    ),
+    dateStyle: {
+      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) {
+  const mode = parameters.photoMode
+  if (mode === 'zip' && parameters.photosZip?.filename !== undefined) {
     return downloadsPath + '/' + parameters.photosZip.filename.replace('.zip', '/') + filename
   } else {
     return filename
   }
 }
+
+const getMarginValue = (margin: string, pos: number, separator?: boolean): string | number => {
+  if (margin !== undefined && margin !== '') {
+    return `${margin}%`;
+  }
+  return pos === 3 || separator === true ? 0 : '4%';
+};

package/src/components/FormattedText/index.tsx

@@ -25,7 +25,7 @@ interface Props {
 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) {
+    if (isValid && (text && text.length > maxChar)) {
       const returnText = text.substring(0, maxChar - 3)
       returnText.substr(-1, 3)
       return `${returnText.trim()}...`
@@ -35,7 +35,7 @@ export const FormattedText: React.FunctionComponent<Props> = ({ text, format, ma
 
   const checkNested = (obj: any, path: string): boolean => {
     return path.split('.').every(segment => {
-      if (obj && obj.hasOwnProperty(segment)) {
+      if (obj?.hasOwnProperty(segment)) {
         obj = obj[segment]
         return true
       }
@@ -52,10 +52,11 @@ export const FormattedText: React.FunctionComponent<Props> = ({ text, format, ma
   }
 
   const renderText = maxChar ? trimText(text, maxChar) : text
-  const containerStyle = Object.assign({
+  const containerStyle = {
     display: 'inline-flex',
-    justifyContent: getHorizontalAlignment(format.alignment)
-  }, style)
+    justifyContent: getHorizontalAlignment(format.alignment),
+    ...(style as any)
+  }
 
   return (
     <div style={containerStyle}>

package/src/components/ItemsContainer/components/Item.tsx

@@ -16,9 +16,21 @@ interface Props {
   style: any
 }
 
+
+
 export const Item = ({ width, height, containerData, verticalGap, horizontalGap, children, style }: Props) => {
   const itemRef = useRef(null)
 
+  let topPosition = '0';
+  if (containerData.ic_rowIndex !== 0) {
+    topPosition = verticalGap ? `${verticalGap * containerData.ic_rowIndex}%` : '0';
+  }
+
+  let leftPadding = '0'
+  if (containerData.ic_columnIndex !== 0) {
+    leftPadding = horizontalGap ? `${horizontalGap}%` : '0';
+  }
+
   return (
     <div ref={itemRef}
       style={{
@@ -29,13 +41,9 @@ export const Item = ({ width, height, containerData, verticalGap, horizontalGap,
         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
+        top: topPosition,
+        paddingLeft: leftPadding,
+        ...style
       }}
     >
       {React.cloneElement(children, containerData)}

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

@@ -96,31 +96,27 @@ export class AnimationController {
       autoplay: false,
     })
     animation.add(
-      Object.assign(
-        {
-          targets: els,
-          duration: this.speed,
-          delay: function (_el: any, i: any, _l: any) {
-            return i * self.stagger
-          },
+      {
+        targets: els,
+        duration: this.speed,
+        delay: function (_el: any, i: any, _l: any) {
+          return i * self.stagger
         },
-        this.mode.in
-      )
+        ...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()
-          },
+      {
+        targets: els,
+        duration: this.speed,
+        delay: function (_el: any, _i: any, _l: any) {
+          return _i * self.stagger
         },
-        this.mode.out
-      ),
+        complete: () => {
+          finished()
+        },
+        ...this.mode.out
+      },
       `+=${offset}`
     )
     animation.play()

package/src/components/Render/index.tsx

@@ -21,7 +21,7 @@ export const Render = ({ start, appData, anniversaries }: Props) => {
     animationTime,
   } = parameters
 
-  const backgroundImageState = backgroundImage && backgroundImage.filename
+  const backgroundImageState = backgroundImage?.filename
     ? `url("${downloadsPath}/${backgroundImage.filename}")` : ''
 
   const anniversaryItems = anniversaries.map((anniversary: Anniversary) => {

package/src/parameters.d.ts

@@ -5,5 +5,5 @@ declare type VixonicData = {
 }
 
 declare type VixonicParameters = Partial<{
-  displayService: 'AnniversaryAppService' | 'RexmasAnniversarieService', documentService: { id: string }, rexmasService: { id: string }, photosZip: {id?: string, filename?: string, extension?: string}, updateTime: 600000 | 1800000 | 3600000 | 21600000 | 43200000 | 86400000 | 604800000, defaultMessage: string, defaultMessageFormat: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, orientation: 'h' | 'v', animationMode: 'fade' | 'slideRight' | 'slideLeft', animationSpeed: 2 | 1.5 | 1, animationOrder: boolean, animationTime: number, containerColumns: number, containerColumnsGap: number, containerRows: number, containerRowsGap: number, backgroundImage: {id?: string, filename?: string, extension?: string}, padding: string, textPosition: 1 | 2 | 3, textAlignment: 'start' | 'center' | 'end', nameFormat: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, nameMaxChar: number, textMargin: string, descriptionEnabled: boolean, descriptionFormat: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, descriptionMaxChar: number, optionalEnabled: boolean, optionalFormat: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, imageEnabled: boolean, imagePosition: 1 | 2 | 3, imageAlignment: 'start' | 'center' | 'end', imageStyle: 'normal' | 'rounded' | 'circle', imageMargin: string, imageSize: number, dateEnabled: boolean, datePosition: 1 | 2 | 3, dateAlignment: 'start' | 'center' | 'end', dateStyle: 'calendarFlat' | 'calendarText' | 'circle' | 'text' | 'outlines', dateDayFormat: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, dateMonthFormat: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, abbreviatedMonths: boolean, datePrimaryColor: string, dateMargin: string, separator: boolean, separatorWidth: number, separatorColor: string, itemMargins: string
+  displayService: 'AnniversaryAppService' | 'RexmasAnniversarieService', documentService: { id: string }, rexmasService: { id: string }, photoMode: 'zip' | 'online', photosZip: {id?: string, filename?: string, extension?: string}, updateTime: 600000 | 1800000 | 3600000 | 21600000 | 43200000 | 86400000 | 604800000, defaultMessage: string, defaultMessageFormat: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, orientation: 'h' | 'v', animationMode: 'fade' | 'slideRight' | 'slideLeft', animationSpeed: 2 | 1.5 | 1, animationOrder: boolean, animationTime: number, containerColumns: number, containerColumnsGap: number, containerRows: number, containerRowsGap: number, backgroundImage: {id?: string, filename?: string, extension?: string}, padding: string, textPosition: 1 | 2 | 3, textAlignment: 'start' | 'center' | 'end', nameFormat: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, nameMaxChar: number, textMargin: string, descriptionEnabled: boolean, descriptionFormat: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, descriptionMaxChar: number, optionalEnabled: boolean, optionalFormat: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, imageEnabled: boolean, imagePosition: 1 | 2 | 3, imageAlignment: 'start' | 'center' | 'end', imageStyle: 'normal' | 'rounded' | 'circle', imageMargin: string, imageSize: number, dateEnabled: boolean, datePosition: 1 | 2 | 3, dateAlignment: 'start' | 'center' | 'end', dateStyle: 'calendarFlat' | 'calendarText' | 'circle' | 'text' | 'outlines', dateDayFormat: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, dateMonthFormat: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, abbreviatedMonths: boolean, datePrimaryColor: string, dateMargin: string, separator: boolean, separatorWidth: number, separatorColor: string, itemMargins: string
 }>