@vixoniccom/aniversarios 1.4.6-dev.1 → 1.4.7-dev.0

package/configuration.json

@@ -149,11 +149,41 @@
       "items": [
         {
           "type": "label",
-          "label": "Orientación"
+          "label": "Tema predefinido"
+        },
+        {
+          "id": "themePreset",
+          "label": "Tema",
+          "type": "select-input",
+          "description": "Elige un tema para aplicar un estilo visual completo. Selecciona \"Personalizado\" para configurar cada campo de estilo de forma individual.",
+          "items": [
+            {
+              "label": "Personalizado",
+              "value": "personalizado"
+            },
+            {
+              "label": "Aniversarios inferior",
+              "value": "preset1"
+            },
+            {
+              "label": "Aniversarios lista",
+              "value": "preset2"
+            },
+            {
+              "label": "Aniversarios vertical (1 persona)",
+              "value": "preset3"
+            }
+          ]
+        },
+        {
+          "type": "label",
+          "label": "Orientación",
+          "show": "({{themePreset}} === \"personalizado\" || !{{themePreset}})"
         },
         {
           "id": "orientation",
           "label": "Orientación",
+          "show": "({{themePreset}} === \"personalizado\" || !{{themePreset}})",
           "type": "select-input",
           "items": [
             {
@@ -170,11 +200,13 @@
         },
         {
           "type": "label",
-          "label": "Animación"
+          "label": "Animación",
+          "show": "({{themePreset}} === \"personalizado\" || !{{themePreset}})"
         },
         {
           "id": "animationMode",
           "label": "Tipo de animación",
+          "show": "({{themePreset}} === \"personalizado\" || !{{themePreset}})",
           "type": "select-input",
           "description": "Por defecto, Fundido.",
           "items": [
@@ -197,6 +229,7 @@
         {
           "id": "animationSpeed",
           "label": "Velocidad",
+          "show": "({{themePreset}} === \"personalizado\" || !{{themePreset}})",
           "type": "select-input",
           "items": [
             {
@@ -217,6 +250,7 @@
         {
           "id": "animationOrder",
           "label": "Orden",
+          "show": "({{themePreset}} === \"personalizado\" || !{{themePreset}})",
           "type": "switch",
           "defaultValue": false,
           "displayOnTrue": "Invertido",
@@ -225,6 +259,7 @@
         {
           "id": "animationTime",
           "label": "Tiempo",
+          "show": "({{themePreset}} === \"personalizado\" || !{{themePreset}})",
           "type": "number-input",
           "range": "[1:9999:]",
           "description": "Duración de cada grupo de datos (en segundos).",
@@ -232,11 +267,13 @@
         },
         {
           "type": "label",
-          "label": "Contenedor"
+          "label": "Contenedor",
+          "show": "({{themePreset}} === \"personalizado\" || !{{themePreset}})"
         },
         {
           "id": "containerColumns",
           "label": "Columnas",
+          "show": "({{themePreset}} === \"personalizado\" || !{{themePreset}})",
           "type": "number-input",
           "range": "[1:999:]",
           "description": "Cantidad de items horizontales. Por defecto, 1."
@@ -244,6 +281,7 @@
         {
           "id": "containerColumnsGap",
           "label": "Separador horizontal",
+          "show": "({{themePreset}} === \"personalizado\" || !{{themePreset}})",
           "type": "number-input",
           "range": "[1:100:]",
           "description": "Espacio entre columnas (en porcentaje). Por defecto, 1%."
@@ -251,6 +289,7 @@
         {
           "id": "containerRows",
           "label": "Filas",
+          "show": "({{themePreset}} === \"personalizado\" || !{{themePreset}})",
           "type": "number-input",
           "range": "[1:999:]",
           "description": "Cantidad de items verticales. Por defecto, 3."
@@ -258,6 +297,7 @@
         {
           "id": "containerRowsGap",
           "label": "Separador vertical",
+          "show": "({{themePreset}} === \"personalizado\" || !{{themePreset}})",
           "type": "number-input",
           "range": "[1:100:]",
           "description": "Espacio entre filas (en porcentaje). Por defecto, 5%."
@@ -280,6 +320,7 @@
         {
           "id": "padding",
           "label": "Márgenes",
+          "show": "({{themePreset}} === \"personalizado\" || !{{themePreset}})",
           "type": "text-input",
           "description": "CSS para dar espacio arriba/derecha/abajo/izquieda.",
           "required": false
@@ -293,11 +334,48 @@
       "items": [
         {
           "type": "label",
-          "label": "Textos"
+          "label": "Fuentes",
+          "show": "{{themePreset}} && {{themePreset}} !== \"personalizado\""
+        },
+        {
+          "id": "nameFont",
+          "label": "Fuente del nombre",
+          "show": "{{themePreset}} && {{themePreset}} !== \"personalizado\"",
+          "type": "text-format"
+        },
+        {
+          "id": "descriptionFont",
+          "label": "Fuente de la descripción",
+          "show": "{{themePreset}} && {{themePreset}} !== \"personalizado\"",
+          "type": "text-format"
+        },
+        {
+          "id": "optionalFont",
+          "label": "Fuente del campo opcional",
+          "show": "{{themePreset}} && {{themePreset}} !== \"personalizado\"",
+          "type": "text-format"
+        },
+        {
+          "id": "dateDayFont",
+          "label": "Fuente del día",
+          "show": "{{themePreset}} && {{themePreset}} !== \"personalizado\"",
+          "type": "text-format"
+        },
+        {
+          "id": "dateMonthFont",
+          "label": "Fuente del mes",
+          "show": "{{themePreset}} && {{themePreset}} !== \"personalizado\"",
+          "type": "text-format"
+        },
+        {
+          "type": "label",
+          "label": "Textos",
+          "show": "({{themePreset}} === \"personalizado\" || !{{themePreset}})"
         },
         {
           "id": "textPosition",
           "label": "Posición",
+          "show": "({{themePreset}} === \"personalizado\" || !{{themePreset}})",
           "type": "select-input",
           "items": [
             {
@@ -318,6 +396,7 @@
         {
           "id": "textAlignment",
           "label": "Alineación",
+          "show": "({{themePreset}} === \"personalizado\" || !{{themePreset}})",
           "type": "select-input",
           "items": [
             {
@@ -337,27 +416,32 @@
         },
         {
           "type": "label",
-          "label": "Nombre"
+          "label": "Nombre",
+          "show": "({{themePreset}} === \"personalizado\" || !{{themePreset}})"
         },
         {
           "id": "nameFormat",
           "label": "Formato",
+          "show": "({{themePreset}} === \"personalizado\" || !{{themePreset}})",
           "type": "text-format"
         },
         {
           "id": "nameMaxChar",
           "label": "Caracteres máximos",
+          "show": "({{themePreset}} === \"personalizado\" || !{{themePreset}})",
           "type": "number-input"
         },
         {
           "id": "textMargin",
           "label": "Margen",
+          "show": "({{themePreset}} === \"personalizado\" || !{{themePreset}})",
           "type": "text-input",
           "description": "Margen derecho de los textos (en porcentaje). Por defecto 4%."
         },
         {
           "id": "descriptionEnabled",
           "label": "Descripción",
+          "show": "({{themePreset}} === \"personalizado\" || !{{themePreset}})",
           "type": "switch",
           "defaultValue": true,
           "displayOnTrue": "habilitada",
@@ -366,23 +450,24 @@
         {
           "type": "label",
           "label": "Descripción",
-          "show": "{{descriptionEnabled}} === true"
+          "show": "({{themePreset}} === \"personalizado\" || !{{themePreset}}) && {{descriptionEnabled}} === true"
         },
         {
           "id": "descriptionFormat",
           "label": "Formato",
-          "show": "{{descriptionEnabled}} === true",
+          "show": "({{themePreset}} === \"personalizado\" || !{{themePreset}}) && {{descriptionEnabled}} === true",
           "type": "text-format"
         },
         {
           "id": "descriptionMaxChar",
           "label": "Caracteres máximos",
-          "show": "{{descriptionEnabled}} === true",
+          "show": "({{themePreset}} === \"personalizado\" || !{{themePreset}}) && {{descriptionEnabled}} === true",
           "type": "number-input"
         },
         {
           "id": "optionalEnabled",
           "label": "Campo opcional",
+          "show": "({{themePreset}} === \"personalizado\" || !{{themePreset}})",
           "type": "switch",
           "defaultValue": true,
           "displayOnTrue": "habilitado",
@@ -391,25 +476,28 @@
         {
           "type": "label",
           "label": "Campo opcional",
-          "show": "{{optionalEnabled}} === true"
+          "show": "({{themePreset}} === \"personalizado\" || !{{themePreset}}) && {{optionalEnabled}} === true"
         },
         {
           "id": "optionalFormat",
           "label": "Formato",
-          "show": "{{optionalEnabled}} === true",
+          "show": "({{themePreset}} === \"personalizado\" || !{{themePreset}}) && {{optionalEnabled}} === true",
           "type": "text-format"
         },
         {
           "type": "label",
-          "label": "Fotografía"
+          "label": "Fotografía",
+          "show": "({{themePreset}} === \"personalizado\" || !{{themePreset}})"
         },
         {
           "type": "label",
-          "label": "Imagen"
+          "label": "Imagen",
+          "show": "({{themePreset}} === \"personalizado\" || !{{themePreset}})"
         },
         {
           "id": "imageEnabled",
           "label": "Imagen",
+          "show": "({{themePreset}} === \"personalizado\" || !{{themePreset}})",
           "type": "switch",
           "defaultValue": true,
           "displayOnTrue": "habilitada",
@@ -418,7 +506,7 @@
         {
           "id": "imagePosition",
           "label": "Posición",
-          "show": "{{imageEnabled}} === true",
+          "show": "({{themePreset}} === \"personalizado\" || !{{themePreset}}) && {{imageEnabled}} === true",
           "type": "select-input",
           "items": [
             {
@@ -439,7 +527,7 @@
         {
           "id": "imageAlignment",
           "label": "Alineación",
-          "show": "{{imageEnabled}} === true",
+          "show": "({{themePreset}} === \"personalizado\" || !{{themePreset}}) && {{imageEnabled}} === true",
           "type": "select-input",
           "items": [
             {
@@ -460,7 +548,7 @@
         {
           "id": "imageStyle",
           "label": "Estilo",
-          "show": "{{imageEnabled}} === true",
+          "show": "({{themePreset}} === \"personalizado\" || !{{themePreset}}) && {{imageEnabled}} === true",
           "type": "select-input",
           "description": "Forma de enmarcar la fotografía.",
           "items": [
@@ -483,25 +571,27 @@
         {
           "id": "imageMargin",
           "label": "Margen",
-          "show": "{{imageEnabled}} === true",
+          "show": "({{themePreset}} === \"personalizado\" || !{{themePreset}}) && {{imageEnabled}} === true",
           "type": "text-input",
           "description": "Margen derecho de la imagen (en porcentaje). Por defecto 4%."
         },
         {
           "id": "imageSize",
           "label": "Tamaño",
-          "show": "{{imageEnabled}} === true",
+          "show": "({{themePreset}} === \"personalizado\" || !{{themePreset}}) && {{imageEnabled}} === true",
           "type": "number-input",
           "range": "[1:100:]",
           "description": "Tamaño de la imagen (en porcentaje)."
         },
         {
           "type": "label",
-          "label": "Fecha"
+          "label": "Fecha",
+          "show": "({{themePreset}} === \"personalizado\" || !{{themePreset}})"
         },
         {
           "id": "dateEnabled",
           "label": "Fecha",
+          "show": "({{themePreset}} === \"personalizado\" || !{{themePreset}})",
           "type": "switch",
           "defaultValue": true,
           "displayOnTrue": "habilitada",
@@ -510,7 +600,7 @@
         {
           "id": "datePosition",
           "label": "Posición",
-          "show": "{{dateEnabled}} === true",
+          "show": "({{themePreset}} === \"personalizado\" || !{{themePreset}}) && {{dateEnabled}} === true",
           "type": "select-input",
           "items": [
             {
@@ -531,7 +621,7 @@
         {
           "id": "dateAlignment",
           "label": "Alineación",
-          "show": "{{dateEnabled}} === true",
+          "show": "({{themePreset}} === \"personalizado\" || !{{themePreset}}) && {{dateEnabled}} === true",
           "type": "select-input",
           "items": [
             {
@@ -552,7 +642,7 @@
         {
           "id": "dateStyle",
           "label": "Estilo",
-          "show": "{{dateEnabled}} === true",
+          "show": "({{themePreset}} === \"personalizado\" || !{{themePreset}}) && {{dateEnabled}} === true",
           "type": "select-input",
           "description": "Forma de enmarcar la fotografía.",
           "items": [
@@ -583,19 +673,19 @@
         {
           "id": "dateDayFormat",
           "label": "Formato del día",
-          "show": "{{dateEnabled}} === true",
+          "show": "({{themePreset}} === \"personalizado\" || !{{themePreset}}) && {{dateEnabled}} === true",
           "type": "text-format"
         },
         {
           "id": "dateMonthFormat",
           "label": "Formato del mes",
-          "show": "{{dateEnabled}} === true",
+          "show": "({{themePreset}} === \"personalizado\" || !{{themePreset}}) && {{dateEnabled}} === true",
           "type": "text-format"
         },
         {
           "id": "abbreviatedMonths",
           "label": "Meses",
-          "show": "{{dateEnabled}} === true && ['calendarFlat', 'calendarText', 'outlines'].indexOf({{dateStyle}}) !== -1",
+          "show": "({{themePreset}} === \"personalizado\" || !{{themePreset}}) && {{dateEnabled}} === true && ['calendarFlat', 'calendarText', 'outlines'].indexOf({{dateStyle}}) !== -1",
           "type": "switch",
           "defaultValue": false,
           "displayOnTrue": "abreviados",
@@ -611,17 +701,19 @@
         {
           "id": "dateMargin",
           "label": "Margen",
-          "show": "{{dateEnabled}} === true",
+          "show": "({{themePreset}} === \"personalizado\" || !{{themePreset}}) && {{dateEnabled}} === true",
           "type": "text-input",
           "description": "Margen derecho de la fecha (en porcentaje). Por defecto 4%."
         },
         {
           "type": "label",
-          "label": "Separador"
+          "label": "Separador",
+          "show": "({{themePreset}} === \"personalizado\" || !{{themePreset}})"
         },
         {
           "id": "separator",
           "label": "Separador",
+          "show": "({{themePreset}} === \"personalizado\" || !{{themePreset}})",
           "type": "switch",
           "defaultValue": true,
           "displayOnTrue": "habilitado",
@@ -630,20 +722,20 @@
         {
           "id": "separatorWidth",
           "label": "Ancho",
-          "show": "{{separator}} === true",
+          "show": "({{themePreset}} === \"personalizado\" || !{{themePreset}}) && {{separator}} === true",
           "type": "number-input"
         },
         {
           "id": "separatorColor",
           "label": "Color",
-          "show": "{{separator}} === true",
+          "show": "({{themePreset}} === \"personalizado\" || !{{themePreset}}) && {{separator}} === true",
           "type": "color-picker",
           "output": "auto"
         },
         {
           "id": "itemMargins",
           "label": "Márgenes",
-          "show": "{{separator}} === true",
+          "show": "({{themePreset}} === \"personalizado\" || !{{themePreset}}) && {{separator}} === true",
           "type": "text-input",
           "description": "Un CSS de longitud de uno o dos valores.",
           "pattern": "^(( )?[+-]?[0-9]+.?([0-9]+)?(px|em|ex|%|in|cm|mm|pt|pc)){1,2}$"

package/package.json

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

package/src/components/Render/index.tsx

@@ -2,6 +2,9 @@ import { FontLoader } from '../FontLoader'
 import { FormattedText } from '../FormattedText'
 import { AnniversaryItem } from '../AnniversaryItem'
 import { ItemsContainer } from '../ItemsContainer'
+import preset1 from '../../presets/preset1.json'
+import preset2 from '../../presets/preset2.json'
+import preset3 from '../../presets/preset3.json'
 
 interface Props {
   start: boolean
@@ -9,9 +12,33 @@ interface Props {
   anniversaries: Anniversary[]
 }
 
+const PRESETS = { preset1, preset2, preset3 } as Record<string, Partial<VixonicParameters>>
 
 export const Render = ({ start, appData, anniversaries }: Props) => {
-  const { parameters, downloadsPath } = appData
+  const { parameters: rawParameters, downloadsPath } = appData
+
+  const withFont = (format: VixonicParameters['nameFormat'], fontFormat: VixonicParameters['nameFont']) => {
+    if (!fontFormat) return format
+    const { font, fontColor } = fontFormat
+    return { ...format, ...(font ? { font } : {}), ...(fontColor ? { fontColor } : {}) }
+  }
+
+  const activePreset = rawParameters.themePreset && rawParameters.themePreset !== 'personalizado'
+    ? PRESETS[rawParameters.themePreset]
+    : undefined
+
+  const parameters: VixonicParameters = activePreset
+    ? {
+        ...rawParameters,
+        ...activePreset,
+        nameFormat:        withFont(activePreset.nameFormat,        rawParameters.nameFont),
+        descriptionFormat: withFont(activePreset.descriptionFormat, rawParameters.descriptionFont),
+        optionalFormat:    withFont(activePreset.optionalFormat,    rawParameters.optionalFont),
+        dateDayFormat:     withFont(activePreset.dateDayFormat,     rawParameters.dateDayFont),
+        dateMonthFormat:   withFont(activePreset.dateMonthFormat,   rawParameters.dateMonthFont),
+      }
+    : rawParameters
+
   const { backgroundImage,
     padding,
     defaultMessage = 'Sin ingresos',
@@ -24,11 +51,13 @@ export const Render = ({ start, appData, anniversaries }: Props) => {
     containerColumnsGap = 1,
   } = parameters
 
+  const mergedData = { ...appData, parameters }
+
   const backgroundImageState = backgroundImage?.filename
     ? `url("${downloadsPath}/${backgroundImage.filename}")` : ''
 
   const anniversaryItems = anniversaries.map((anniversary: Anniversary) => {
-    return <AnniversaryItem style={'standard'} anniversary={anniversary} data={appData} key={anniversary?.name} />
+    return <AnniversaryItem style={'standard'} anniversary={anniversary} data={mergedData} key={anniversary?.name} />
   })
 
   return (
@@ -42,7 +71,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']} data={mergedData} />
       {(anniversaries.length > 0) ?
         <ItemsContainer
           items={anniversaryItems}

package/src/parameters.d.ts

@@ -1,88 +1,9 @@
 declare type VixonicData = {
   downloadsPath: string
-  services: {[key: string]: {data?: any; updatedAt?: number}}
+  services: { [key: string]: { data?: any, updatedAt?: number } }
   parameters: VixonicParameters
 }
 
 declare type VixonicParameters = Partial<{
-  displayService: 'AnniversaryAppService' | 'RexmasAnniversarieService' | 'BukAnniversarieService' | 'TalanaAnniversariesService'
-  documentService: {id: string}
-  rexmasService: {id: string}
-  bukService: {id: string}
-  talanaService: {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
-}>
+  displayService: 'AnniversaryAppService' | 'RexmasAnniversarieService' | 'BukAnniversarieService' | 'TalanaAnniversariesService', documentService: { id: string }, rexmasService: { id: string }, bukService: { id: string }, talanaService: { 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 } }, themePreset: 'personalizado' | 'preset1' | 'preset2' | 'preset3', 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, nameFont: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, descriptionFont: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, optionalFont: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, dateDayFont: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, dateMonthFont: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, 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
+}>

package/src/presets/preset1.json

@@ -0,0 +1,33 @@
+{
+  "orientation": "h",
+  "animationMode": "fade",
+  "animationSpeed": 1.5,
+  "animationOrder": false,
+  "animationTime": "10",
+  "containerColumns": "1",
+  "containerColumnsGap": "4",
+  "containerRows": "1",
+  "containerRowsGap": "2",
+  "padding": "27px 28px 30px 30px",
+  "textPosition": 1,
+  "textAlignment": "center",
+  "nameFormat": { "fontSize": 11, "fontColor": "#000000", "alignment": { "horizontal": "left" } },
+  "textMargin": "7",
+  "descriptionEnabled": true,
+  "descriptionFormat": { "fontSize": 9.5, "fontColor": "#000000", "alignment": { "horizontal": "left" } },
+  "optionalEnabled": false,
+  "imageEnabled": false,
+  "imagePosition": 3,
+  "imageAlignment": "center",
+  "imageStyle": "circle",
+  "imageMargin": "5",
+  "imageSize": "91",
+  "dateEnabled": false,
+  "datePosition": 1,
+  "dateAlignment": "center",
+  "dateStyle": "circle",
+  "dateDayFormat": { "fontSize": 45, "fontColor": "#ffffff" },
+  "dateMonthFormat": { "fontSize": 20, "fontColor": "#ffffff" },
+  "abbreviatedMonths": false,
+  "separator": false
+}