@vixoniccom/aniversarios 1.2.1 → 1.2.3-dev.0

package/CHANGELOG.md

@@ -2,24 +2,45 @@
 
 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.2.1](https://github.com/Vixonic/store-aniversarios/compare/v1.2.0...v1.2.1) (2025-02-28)
+### [1.2.3-dev.0](https://github.com/Vixonic/store-aniversarios/compare/v1.2.2...v1.2.3-dev.0) (2025-07-04)
+
+### [1.2.2](https://github.com/Vixonic/store-aniversarios/compare/v1.2.1...v1.2.2) (2025-05-16)
+
+
+### Bug Fixes
+
+* code refactored ([c2ea956](https://github.com/Vixonic/store-aniversarios/commit/c2ea956088a70c3dd2d7704ea1610dec74200d69))
+* createItems now works properly ([33a4534](https://github.com/Vixonic/store-aniversarios/commit/33a45343b78f09f870ee36e746838fefb0552185))
+* show partial pages re-enabled ([6a4e4c2](https://github.com/Vixonic/store-aniversarios/commit/6a4e4c2092e77678f5c82f780f713935de0eb43b))
+
+### [1.2.1-dev.1](https://github.com/Vixonic/store-aniversarios/compare/v1.2.1-dev.0...v1.2.1-dev.1) (2025-05-05)
+
+
+### Bug Fixes
+
+* show partial pages re-enabled ([2fa3e85](https://github.com/Vixonic/store-aniversarios/commit/2fa3e853200edad4b8a90da526497761fcb51fa1))
+
+### [1.2.1-dev.0](https://github.com/Vixonic/store-aniversarios/compare/v1.2.0...v1.2.1-dev.0) (2025-05-02)
+
+### Bug Fixes
+
+- code refactored ([41cf858](https://github.com/Vixonic/store-aniversarios/commit/41cf85868e516175ee55640434247c5f70d5d579))
+- createItems now works properly ([db2623a](https://github.com/Vixonic/store-aniversarios/commit/db2623ab1156ca93bd5386598dd1c1dc486a46ff))
 
 ## [1.2.0](https://github.com/Vixonic/store-aniversarios/compare/v1.2.0-dev.1...v1.2.0) (2025-02-27)
 
 ## [1.2.0-dev.1](https://bitbucket.org/vixonic_dev/aniversarios/compare/v1.2.0-dev.0...v1.2.0-dev.1) (2025-02-13)
 
-
 ### Bug Fixes
 
-* change RedirectButton id ([b23c294](https://bitbucket.org/vixonic_dev/aniversarios/commit/b23c29432519b4f9c552cb3642257b3e57b99471))
+- change RedirectButton id ([b23c294](https://bitbucket.org/vixonic_dev/aniversarios/commit/b23c29432519b4f9c552cb3642257b3e57b99471))
 
 ## [1.2.0-dev.0](https://bitbucket.org/vixonic_dev/aniversarios/compare/v1.0.2...v1.2.0-dev.0) (2025-02-13)
 
-
 ### Features
 
-* add RedirectButton ([7a63b6d](https://bitbucket.org/vixonic_dev/aniversarios/commit/7a63b6dc525643ce909b69c0e1dc3a1ca33cce57))
-* ISC license was added to the project ([053ba36](https://bitbucket.org/vixonic_dev/aniversarios/commit/053ba36195a038099cf3ca2b62258ef80e5d6e97))
+- add RedirectButton ([7a63b6d](https://bitbucket.org/vixonic_dev/aniversarios/commit/7a63b6dc525643ce909b69c0e1dc3a1ca33cce57))
+- ISC license was added to the project ([053ba36](https://bitbucket.org/vixonic_dev/aniversarios/commit/053ba36195a038099cf3ca2b62258ef80e5d6e97))
 
 ## [1.1.0](https://bitbucket.org/vixonic_dev/aniversarios/compare/v1.1.0-beta.1...v1.1.0) (2024-10-01)
 
@@ -27,10 +48,9 @@ All notable changes to this project will be documented in this file. See [standa
 
 ## [1.1.0-beta.0](https://bitbucket.org/vixonic_dev/aniversarios/compare/v1.0.2...v1.1.0-beta.0) (2024-09-04)
 
-
 ### Features
 
-* ISC license was added to the project ([6996ea4](https://bitbucket.org/vixonic_dev/aniversarios/commit/6996ea4514daab0a1f70df791131e1e65e0f94ef))
+- ISC license was added to the project ([6996ea4](https://bitbucket.org/vixonic_dev/aniversarios/commit/6996ea4514daab0a1f70df791131e1e65e0f94ef))
 
 ### [1.0.2](https://bitbucket.org/rexmas_cl/aniversarios/compare/v1.0.2-beta.3...v1.0.2) (2023-08-30)
 

package/configuration.json

@@ -23,15 +23,40 @@
       "label": "Configuración",
       "description": "",
       "items": [
-        {
-          "id": "apiDomain",
-          "type": "text-input",
-          "required": true,
-          "label": "Link google sheets"
-        },
         {
           "type": "label",
           "label": "Datos"
+        },
+          {
+          "id": "displayService",
+          "label": "Selecciona la fuente de los cumpleaños",
+          "type": "select-input",
+          "description": "Selecciona la fuente de los cumpleaños. Por defecto, Documento.",
+          "items": [
+            {
+              "label": "Documento",
+              "value": "AnniversaryAppService"
+            },
+            {
+              "label": "Rexmas",
+              "value": "RexmasAnniversarieService"
+            }
+          ],
+          "defaultValue": "BirthdayAppService"
+        },
+        {
+          "id": "documentService",
+          "label": "Documento",
+          "show": "{{displayService}} === \"BirthdayAppService\"",
+          "type": "service-input",
+          "serviceType": "BirthdayAppService"
+        },
+        {
+          "id": "rexmasService",
+          "label": "Rexmas",
+          "show": "{{displayService}} === \"RexmasAnniversarieService\"",
+          "type": "service-input",
+          "serviceType": "RexmasAnniversarieService"
         },
         {
           "type": "select-input",
@@ -63,6 +88,10 @@
           "label": "Actualización",
           "defaultValue": 600000,
           "items": [
+            {
+              "label": "1 minuto",
+              "value": 60000
+            },
             {
               "label": "10 minutos",
               "value": 600000

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vixoniccom/aniversarios",
   "alias": "Aniversarios",
-  "version": "1.2.1",
+  "version": "1.2.3-dev.0",
   "description": "Muestra el día que el trabajador está de aniversario en la empresa.",
   "main": "main.js",
   "author": "",
@@ -19,22 +19,20 @@
   "dependencies": {
     "animejs": "^3.2.2",
     "axios": "^1.6.0",
-    "jquery": "^3.6.0",
     "localforage": "^1.10.0",
     "moment": "^2.29.4",
     "prop-types": "^15.8.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "use-state-with-callback": "^3.0.2"
   },
   "devDependencies": {
     "@types/animejs": "^3.1.13",
     "@types/lodash": "^4.17.0",
-    "@types/node": "^12.20.37",
-    "@types/react": "^17.0.35",
-    "@types/react-dom": "^17.0.11",
-    "@vixoniccom/module-packager": "^2.10.1-dev.1",
-    "@vixoniccom/modules": "^2.20.0-dev.1",
+    "@types/react": "^18.3.23",
+    "@types/react-dom": "^18.3.7",
+    "@vixoniccom/module-packager": "2.12.0-dev.10",
+    "@vixoniccom/modules": "^2.20.3-dev.0",
     "standard-version": "^9.5.0"
   }
 }

package/src/App.tsx

@@ -1,97 +1,89 @@
-import React, { useContext, useEffect, useState } from "react";
-import { ConfigureContext } from "./contex/configureContext/ConfigureContext";
-import { DataContext } from "./contex/dataContext/DataContex";
-import { Render } from "./components/Render";
-import { FormattedText } from "./components/FormattedText";
-import { getEmployees, getEmployeesYearly } from "./helpers/getEmployees";
-import { filterEmployees } from "./helpers/filterEmployees";
-import moment from "moment";
-import { getMonth } from "./helpers/utils";
-import localforage from "localforage";
+import React, { useContext, useEffect, useState } from "react"
+import { FormattedText, Render } from './components'
+import { ConfigureContext } from "./context/configureContext/ConfigureContext"
+import { DataContext } from "./context/dataContext/DataContex"
+import { getEmployees, getEmployeesYearly } from "./helpers/getEmployees"
+import { filterEmployees } from "./helpers/filterEmployees"
+import moment from "moment"
+import { getMonth } from "./helpers/utils"
+import localforage from "localforage"
 
 type Props = {
-  data: VixonicData;
-  start: boolean;
-};
+  data: VixonicData
+  start: boolean
+}
 
-type Msj =
-  | 'Ningún ingreso que mostrar'
+type Msj = 'Ningún ingreso que mostrar'
   | 'Cargando Empleados...'
   | 'Missing google sheets'
   | ""
-  | 'Invalid URL';
+  | 'Invalid URL'
 
-export const App = ({ data, start }: Props) => {
-  const { addConfiguration, configureState } = useContext(ConfigureContext);
-  const { addEmployee } = useContext(DataContext);
+export const App: React.FunctionComponent<Props> = ({ data, start }) => {
+  const { addConfiguration, configureState } = useContext(ConfigureContext)
+  const { addEmployee } = useContext(DataContext)
   const [dataState, setDataState] = useState(data)
-  const [msj, setMsj] = useState<Msj>("");
-  const { apiDomain, dataMode, excludePast } = configureState.parameters;
-  let updateTimer : any
+  const [msj, setMsj] = useState<Msj>("")
+  const { apiDomain, dataMode, excludePast } = configureState.parameters
+  let updateTimer: any
 
-
-  useEffect(()=> {
-    if(apiDomain){
-      localforage.config({
-        name: `url_request_${apiDomain}`
-      })
-    }
-  },[apiDomain])
-
-  useEffect(() => {
-    addConfiguration(data);
-    setDataState(configureState);
-  }, [data]);
-
-
-  const setUpdateTime =(updatedTime: number) => {
+  const setUpdateTime = (updatedTime: number) => {
     clearTimeout(updateTimer)
     updateTimer = setTimeout(getData, updatedTime)
   }
 
+  useEffect(() => {
+    if (apiDomain) localforage.config({ name: `url_request_${apiDomain}` })
+  }, [apiDomain])
+
+  useEffect(() => {
+    addConfiguration(data)
+    setDataState(configureState)
+  }, [data])
+
   useEffect(() => {
     const { updateTime } = configureState.parameters
 
     if (apiDomain && dataMode) {
-      localforage.getItem<{ items: any[], date: number, mode: string }>('anniversary-docs').then((data) => {  
-        if(!data || dataMode !== data.mode ) {
+      localforage.getItem<{ items: any[], date: number, mode: string }>('anniversary-docs').then((data) => {
+        if (!data || dataMode !== data.mode) {
           getData()
           setUpdateTime(updateTime!)
-          return  
+          return
         }
-      
+
         const now = Date.now()
         const targetDate = data?.date! + updateTime!
 
-        if(now >= targetDate){
+        if (now >= targetDate) {
           getData()
           setUpdateTime(updateTime!)
-        }else {
+        } else {
           data && addEmployee(data.items)
-          setMsj("");
-          setUpdateTime(targetDate-now)
+          setMsj("")
+          setUpdateTime(targetDate - now)
         }
       })
     }
-    if (!apiDomain) setMsj("Missing google sheets");
-  }, [dataState]);
+    if (!apiDomain) setMsj("Missing google sheets")
+  }, [dataState])
 
   const getData = async () => {
-    const urlValid = "https://docs.google.com/spreadsheets/d/";
+    const urlValid = "https://docs.google.com/spreadsheets/d/"
     let contractEmployees: any
     let employee: any = []
     try {
-      if (apiDomain !== undefined && apiDomain.includes(urlValid)) {
-        let month = Number(moment().format("M")) - 1;
-        let nextMonth = (month === 11) ?  0 : (month + 1); 
-        let monthTab = getMonth(month);
-        let nextMonthTab = getMonth(nextMonth);
+      if (apiDomain?.includes(urlValid)) {
+        const month = Number(moment().format("M")) - 1
+        const nextMonth = (month === 11) ? 0 : (month + 1)
+        const monthTab = getMonth(month)
+        const nextMonthTab = getMonth(nextMonth)
         if (dataMode !== 'yearly') {
-          contractEmployees = await getEmployees(apiDomain, dataMode, monthTab);
+          contractEmployees = await getEmployees(apiDomain, monthTab)
           const { values } = contractEmployees.data
           employee.push(...filterEmployees(values, dataMode, excludePast, month))
-          if( dataMode === 'weekly') {
-            contractEmployees = await getEmployees(apiDomain, dataMode, nextMonthTab);
+          if (dataMode === 'weekly') {
+            contractEmployees = await getEmployees(apiDomain, nextMonthTab)
             const { values: valuesnextMonth } = contractEmployees.data
             employee.push(...filterEmployees(valuesnextMonth, dataMode, excludePast, nextMonth))
           }
@@ -100,40 +92,34 @@ export const App = ({ data, start }: Props) => {
         if (dataMode === 'yearly') {
           setMsj('Cargando Empleados...')
           for (let numberMonth: number = 0; numberMonth <= 11; numberMonth++) {
-            contractEmployees = await getEmployeesYearly(apiDomain, numberMonth);
+            contractEmployees = await getEmployeesYearly(apiDomain, numberMonth)
             const { values } = contractEmployees.data
             employee.push(...filterEmployees(values, dataMode, excludePast, numberMonth))
           }
         }
 
         if (contractEmployees) {
-          addEmployee(employee);
-          setMsj("");
+          addEmployee(employee)
+          setMsj("")
           localforage.setItem('anniversary-docs', {
             items: employee,
             date: Date.now() + updateTimer,
             mode: dataMode
           })
         } else {
-          setMsj("Ningún ingreso que mostrar");
+          setMsj("Ningún ingreso que mostrar")
         }
       } else {
-        setMsj("Invalid URL");
+        setMsj("Invalid URL")
       }
     } catch (error) {
-      console.log(error);
+      console.log(error)
     }
-  };
+  }
 
   return msj !== "" ? (
-    <FormattedText
-      text={msj}
-      format={
-        configureState.parameters.nameFormat ||
-        configureState.parameters.descriptionFormat
-      }
-    />
+    <FormattedText text={msj} format={configureState.parameters.nameFormat || configureState.parameters.descriptionFormat} />
   ) : (
     <Render start={start} />
-  );
-};
+  )
+}

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

@@ -0,0 +1,31 @@
+import React, { useContext } from 'react'
+import { AnniveraryDateUtils } from '../utils'
+import { FormattedText } from '../../../../FormattedText'
+import { ConfigureContext } from '../../../../../context/configureContext/ConfigureContext'
+
+interface Props {
+  day: number,
+  month: number
+}
+
+export const CircleDate: React.FunctionComponent<Props> = ({ day, month }) => {
+  const { configureState } = useContext(ConfigureContext)
+  const { orientation, dateMonthFormat, datePrimaryColor, dateDayFormat } = configureState.parameters
+  const sizeProp = AnniveraryDateUtils.utils(orientation)
+  const daySize = (dateDayFormat?.fontSize || 100) * 400 / 100
+  const monthSize = (dateMonthFormat?.fontSize || 100) * 400 / 100
+
+  return (
+    <svg {...sizeProp} viewBox='0 0 400 400' xmlSpace='preserve'>
+      <g>
+        <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' />
+          </div>
+        </foreignObject>
+      </g>
+    </svg>
+  )
+}

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

@@ -0,0 +1,47 @@
+import React, { useContext } from "react"
+import { ConfigureContext } from "../../../../../context/configureContext/ConfigureContext"
+import { AnniveraryDateUtils } from "../utils"
+
+interface Props {
+  month: number
+  day: number
+}
+
+export const FlatDate: React.FunctionComponent<Props> = ({ month, day }: Props) => {
+  const { configureState } = useContext(ConfigureContext)
+  const { abbreviatedMonths, dateDayFormat, dateMonthFormat, orientation, datePrimaryColor } = configureState.parameters
+
+  const sizeProp = AnniveraryDateUtils.utils(orientation)
+  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('.', '-')
+    return ''
+  }
+
+  return (
+    <svg {...sizeProp} viewBox='0 0 400 400' xmlSpace='preserve'>
+      <g>
+        <path fill={datePrimaryColor} d='M349.5,393.5h-299c-24.3,0-44-19.7-44-44v-299c0-24.3,19.7-44,44-44h299c24.3,0,44,19.7,44,44v299C393.5,373.8,373.8,393.5,349.5,393.5z' />
+        <path fill='#FFFFFF' d='M349.5,389.5h-299c-22,0-40-18-40-40v-299c0-22,18-40,40-40h299c22,0,40,18,40,40v299C389.5,371.5,371.5,389.5,349.5,389.5z' />
+        <path fill={datePrimaryColor} d='M9,99.9V50.5c0-22.2,18.1-40.3,40.3-40.3h301.4c22.2,0,40.3,18.1,40.3,40.3v49.4H9z' />
+        <text fontFamily={`"${getFontFamily(dateMonthFormat)}"`}
+          textAnchor='middle'
+          alignmentBaseline='central' x='200' y='55'
+          fontSize={monthSize} preserveAspectRatio='none'
+          fill={dateMonthFormat?.fontColor || '#fff'} fontSizeAdjust=''>
+          {AnniveraryDateUtils.getMonth(month, abbreviatedMonths)}
+        </text>
+
+        <text fontFamily={`"${getFontFamily(dateDayFormat)}"`}
+          textAnchor='middle'
+          alignmentBaseline='central' x='200' y='245'
+          fontSize={daySize} preserveAspectRatio='none'
+          fill={dateDayFormat?.fontColor || '#fff'} fontSizeAdjust=''>
+          {AnniveraryDateUtils.getZeroLeadedText(day)}
+        </text>
+      </g>
+    </svg>
+  )
+}

package/src/components/{anniversary-item/shared/anniversary-date/outline/OutlineDate.tsx → AnniversaryItem/components/AnniversaryDate/OutlineDate/index.tsx}

@@ -1,7 +1,7 @@
-import React, { useContext, useEffect, useState } from 'react'
-import { ConfigureContext } from '../../../../../contex/configureContext/ConfigureContext'
+import React, { useContext, useState } from 'react'
+import { ConfigureContext } from '../../../../../context/configureContext/ConfigureContext'
 import { FormattedText } from '../../../../FormattedText'
-import { AnniveraryDateUtil } from '../DateUtils'
+import { AnniveraryDateUtils } from '../utils'
 
 
 interface Props {
@@ -9,15 +9,10 @@ interface Props {
   month: number
 }
 
-export const OutlineDate = ({ day, month }: Props) => {
-
-
-
+export const OutlineDate: React.FunctionComponent<Props> = ({ day, month }: Props) => {
   const { configureState } = useContext(ConfigureContext)
   const { abbreviatedMonths, dateDayFormat, dateMonthFormat, orientation, datePrimaryColor } = configureState.parameters
-
-
-  const sizeProp = AnniveraryDateUtil.utils(orientation)
+  const sizeProp = AnniveraryDateUtils.utils(orientation)
 
   const parseFormat = (format: any, defaultSize: any) => {
     return Object.assign(
@@ -27,21 +22,15 @@ export const OutlineDate = ({ day, month }: Props) => {
     )
   }
 
-  useEffect(() => {
-
-
-  }, [])
-
   const [monthFormatState,] = useState(parseFormat(dateMonthFormat, 20))
   const [dayFormatState,] = useState(parseFormat(dateDayFormat, 50))
 
-
   return (
     <svg {...sizeProp} viewBox='0 0 100 100'>
       <foreignObject x='20' y='35' width='60' height='50'>
         <div style={{ display: 'flex', alignItems: 'center', flexDirection: 'column', justifyContent: 'center', height: '100%' }}>
-          <FormattedText text={AnniveraryDateUtil.getMonth(month, abbreviatedMonths)} format={monthFormatState} unit='px' />
-          <FormattedText text={AnniveraryDateUtil.getZeroLeadedText(day)} format={dayFormatState} unit='px' />
+          <FormattedText text={AnniveraryDateUtils.getMonth(month, abbreviatedMonths)} format={monthFormatState} unit='px' />
+          <FormattedText text={AnniveraryDateUtils.getZeroLeadedText(day)} format={dayFormatState} unit='px' />
         </div>
       </foreignObject>
       <svg viewBox='0 0 300 300'>
@@ -51,10 +40,3 @@ export const OutlineDate = ({ day, month }: Props) => {
     </svg>
   )
 }
-
-
-OutlineDate.defaultProps = {
-  primaryColor: '#5B5959'
-}
-
-OutlineDate.propTypes = AnniveraryDateUtil.commonPropTypes()

package/src/components/{anniversary-item/shared/anniversary-date/text-calendar/TextCalendarDate.tsx → AnniversaryItem/components/AnniversaryDate/TextCalendarDate/index.tsx}

@@ -1,22 +1,17 @@
 import React, { useContext, useState } from 'react'
-import { ConfigureContext } from '../../../../../contex/configureContext/ConfigureContext'
+import { ConfigureContext } from '../../../../../context/configureContext/ConfigureContext'
 import { FormattedText } from '../../../../FormattedText'
-import { AnniveraryDateUtil } from '../DateUtils'
+import { AnniveraryDateUtils } from '../utils'
 
 interface Props {
   day: number
   month: number
 }
 
-export const TextCalendarDate = ({ day, month }: Props) => {
-
-
+export const TextCalendarDate: React.FunctionComponent<Props> = ({ day, month }: Props) => {
   const { configureState } = useContext(ConfigureContext)
-  const { dateMonthFormat, dateDayFormat, abbreviatedMonths,orientation  } = configureState.parameters
-
-
-  const sizeProp = AnniveraryDateUtil.utils(orientation, '100%')
-
+  const { dateMonthFormat, dateDayFormat, abbreviatedMonths, orientation } = configureState.parameters
+  const sizeProp = AnniveraryDateUtils.utils(orientation, '100%')
 
   const parseFormat = (format: any, defaultSize: any) => {
     return Object.assign(
@@ -33,14 +28,10 @@ export const TextCalendarDate = ({ day, month }: Props) => {
     <svg {...sizeProp} viewBox='0 0 100 100'>
       <foreignObject width='100' height='100'>
         <div style={{ display: 'flex', alignItems: 'center', flexDirection: 'column', justifyContent: 'center', height: '100%' }}>
-          <FormattedText text={AnniveraryDateUtil.getMonth(month, abbreviatedMonths)} format={monthFormatState} unit='px' />
-          <FormattedText text={AnniveraryDateUtil.getZeroLeadedText(day)} format={dayFormatState} unit='px' />
+          <FormattedText text={AnniveraryDateUtils.getMonth(month, abbreviatedMonths)} format={monthFormatState} unit='px' />
+          <FormattedText text={AnniveraryDateUtils.getZeroLeadedText(day)} format={dayFormatState} unit='px' />
         </div>
       </foreignObject>
     </svg>
   )
 }
-
-
-TextCalendarDate.propTypes = AnniveraryDateUtil.commonPropTypes()
-

package/src/components/{anniversary-item/shared/anniversary-date/text/TextDate.tsx → AnniversaryItem/components/AnniversaryDate/TextDate/index.tsx}

@@ -1,15 +1,13 @@
 import React, { useContext } from 'react'
-import PropTypes from 'prop-types'
 import { FormattedText } from '../../../../FormattedText'
-import { ConfigureContext } from '../../../../../contex/configureContext/ConfigureContext'
+import { ConfigureContext } from '../../../../../context/configureContext/ConfigureContext'
 
 interface Props {
   day: number
   month: number
 }
 
-export const TextDate = ({ day, month }: Props) => {
-
+export const TextDate: React.FunctionComponent<Props> = ({ day, month }: Props) => {
   const { configureState } = useContext(ConfigureContext)
   const { dateMonthFormat, dateDayFormat } = configureState.parameters
 
@@ -20,11 +18,3 @@ export const TextDate = ({ day, month }: Props) => {
     </div>
   )
 }
-
-TextDate.propTypes = {
-  day: PropTypes.number.isRequired,
-  dayFormat: PropTypes.object,
-  month: PropTypes.number.isRequired,
-  monthFormat: PropTypes.object
-}
-

package/src/components/{anniversary-item/shared/anniversary-date/AnniversaryDate.tsx → AnniversaryItem/components/AnniversaryDate/index.tsx}

@@ -1,9 +1,9 @@
 import React from 'react'
-import { CircleDate } from './circle/CircleDate'
-import { FlatDate } from './flat/FlatDate'
-import { TextCalendarDate } from './text-calendar/TextCalendarDate'
-import { TextDate } from './text/TextDate'
-import { OutlineDate } from './outline/OutlineDate'
+import { CircleDate } from './CircleDate'
+import { FlatDate } from './FlatDate'
+import { TextCalendarDate } from './TextCalendarDate'
+import { TextDate } from './TextDate'
+import { OutlineDate } from './OutlineDate'
 
 const itemStyles = {
   calendarFlat: FlatDate,
@@ -28,12 +28,8 @@ interface Props {
 }
 
 export const AnniversaryDate = ({ style, day, month }: Props) => {
-
-  let StyledItem = itemStyles.hasOwnProperty(style) ? itemStyles[style] : itemStyles.text
+  const StyledItem = itemStyles.hasOwnProperty(style) ? itemStyles[style] : itemStyles.text
   return (
-    <StyledItem 
-      day={day}
-      month={month} />
+    <StyledItem day={day} month={month} />
   )
 }
-

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

@@ -0,0 +1,18 @@
+import { utils } from '../utils'
+
+const Months = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre']
+
+export class AnniveraryDateUtils {
+  static getZeroLeadedText(text: any) {
+    return `0${text}`.slice(-2)
+  }
+
+  static getMonth(index: any, abbreviated: any) {
+    if (!abbreviated) return Months[index]
+    return Months[index].substring(0, 3).toUpperCase()
+  }
+
+  static utils(orientation: any, size: any = undefined) {
+    return utils(orientation, size)
+  }
+}