@vixoniccom/birthdays 0.4.0 → 0.5.0-dev.0

package/CHANGELOG.md

@@ -1,7 +1,48 @@
-# Change Log
+# Changelog
 
 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.
 
+## [0.5.0-dev.0](https://bitbucket.org/vixonic_dev/birthdays/compare/v0.5.0-beta.0...v0.5.0-dev.0) (2025-02-10)
+
+
+### Features
+
+* add configuration folder ([49999bb](https://bitbucket.org/vixonic_dev/birthdays/commit/49999bbc9b2b3769897ca0223f82550ac9cf5062))
+* migrate source code to typescript ([e6c51d4](https://bitbucket.org/vixonic_dev/birthdays/commit/e6c51d4fd56bfd92ea78bba421bde1164e9a10a4))
+
+
+### Bug Fixes
+
+* add logs ([221c3a6](https://bitbucket.org/vixonic_dev/birthdays/commit/221c3a69b91dd752ac38be1e8a8fa62b99649d82))
+* change getData logic ([df9b623](https://bitbucket.org/vixonic_dev/birthdays/commit/df9b6233a517ce3ac19bfc644e5f3e6ab9e1efcc))
+* change logic in some components ([114b390](https://bitbucket.org/vixonic_dev/birthdays/commit/114b390aad0719d9fc78c47b82bc1f183bc7c2b3))
+* change logic of some components ([e0acff3](https://bitbucket.org/vixonic_dev/birthdays/commit/e0acff3c6abe4506eb9d1295591de7ccd623c185))
+* change parameter id ([bc8d003](https://bitbucket.org/vixonic_dev/birthdays/commit/bc8d003aac865e20c5db20dcd7437f13cc4572fb))
+* change variable in useEffect ([072fb43](https://bitbucket.org/vixonic_dev/birthdays/commit/072fb43f5b2e079ba02fadef30bd48154957cd57))
+* changing files ([217aebf](https://bitbucket.org/vixonic_dev/birthdays/commit/217aebf58c719aee30c497333cf945fc9008976c))
+* clear logic for requesting data ([3c3e55f](https://bitbucket.org/vixonic_dev/birthdays/commit/3c3e55fe76f9210d8f026a73c277e44edb9a3875))
+* code was reordered ([6bc9c10](https://bitbucket.org/vixonic_dev/birthdays/commit/6bc9c10d9e1aa6859f6c3da69c7179dcf5dcd8d3))
+* delete left js files ([6c0104f](https://bitbucket.org/vixonic_dev/birthdays/commit/6c0104ff47e2bdd352a03fa465df789f3b996d57))
+* fixed duplicated nameMaxChar ID ([4948abf](https://bitbucket.org/vixonic_dev/birthdays/commit/4948abf5ad0d728fd08b3a75c4228eac012e2e09))
+* fixed elements display ([f217e59](https://bitbucket.org/vixonic_dev/birthdays/commit/f217e59f69e082e975cab4b014fde8221dc0f85f))
+* fixed problem with showing data ([45ec7ec](https://bitbucket.org/vixonic_dev/birthdays/commit/45ec7ecbe2d0bc260497b7a336ccdc31c941d9dd))
+* lazy usestate was removed ([5e27862](https://bitbucket.org/vixonic_dev/birthdays/commit/5e278622d98d9f149304df092a0b95b9d6f88dfc))
+* now shows date field ([4457162](https://bitbucket.org/vixonic_dev/birthdays/commit/445716281c6fe104f6e629356d45c1a5367147e5))
+* refactor classicItem ([a90a2fd](https://bitbucket.org/vixonic_dev/birthdays/commit/a90a2fd936c39cc9e2b2ee93df5e07636631f80b))
+* refactoring code (still issues) ([b407575](https://bitbucket.org/vixonic_dev/birthdays/commit/b4075758a1c128384dab6525d7159f9fd4ca1334))
+* remove js files and fix logic issues ([f690f2a](https://bitbucket.org/vixonic_dev/birthdays/commit/f690f2af90ee9a8547c4c1d0be29e53b9924208d))
+* separator component was corrected ([82f2a10](https://bitbucket.org/vixonic_dev/birthdays/commit/82f2a102258a9ce4de692961b2994cfa6b5f94c4))
+* update dependencies versions and fix show parameter issue ([51c8a7d](https://bitbucket.org/vixonic_dev/birthdays/commit/51c8a7d91d7d858a799236b96496a9c699adb956))
+
+# [0.5.0-beta.0](https://bitbucket.org/vixonic_dev/birthdays/compare/v0.4.0...v0.5.0-beta.0) (2025-01-30)
+
+
+### Features
+
+* add RedirectButton to configuration ([b7f1687](https://bitbucket.org/vixonic_dev/birthdays/commits/b7f1687))
+
+
+
 # [0.4.0](https://bitbucket.org/vixonic_dev/birthdays/compare/v0.4.0-beta.0...v0.4.0) (2024-10-01)
 
 

package/configuration/appearanceGroup/AppearanceInputs.ts

@@ -0,0 +1,100 @@
+import {
+  Label,
+  NumberInput,
+  NumberRangeValue,
+  SelectAssetKna,
+  SelectInput,
+  Switch,
+  TextInput,
+} from '@vixoniccom/modules'
+
+export const appearanceInputs = [
+  new Label({ label: 'Orientación' }),
+  new SelectInput({
+    id: 'orientation',
+    required: true,
+    label: 'Orientación',
+    items: [
+      { label: 'Horizontal', value: 'h' },
+      { label: 'Vertical', value: 'v' },
+    ],
+    defaultValue: 'h',
+  }),
+
+  new Label({ label: 'Animación' }),
+  new SelectInput({
+    id: 'animationMode',
+    required: true,
+    label: 'Tipo de animación',
+    items: [
+      { label: 'Fundido', value: 'fade' },
+      { label: 'Izquierda - derecha', value: 'slideRight' },
+      { label: 'Derecha - izquierda', value: 'slideLeft' },
+    ],
+    defaultValue: 'fade',
+  }),
+  new SelectInput({
+    id: 'animationSpeed',
+    label: 'Velocidad',
+    items: [
+      { label: 'Lenta', value: 2 },
+      { label: 'Normal', value: 1.5 },
+      { label: 'Rápida', value: 1 },
+    ],
+    defaultValue: 1.5,
+  }),
+  new NumberInput({
+    id: 'animationTime',
+    label: 'Tiempo',
+    description: 'Duracion de cada grupo de datos (en segundos)',
+    required: true,
+    range: new NumberRangeValue(1, 9999),
+  }),
+  new Switch({
+    id: 'animationOrder',
+    label: 'Orden',
+    displayOnTrue: 'Invertido',
+    displayOnFalse: 'Normal',
+    defaultValue: false,
+  }),
+
+  new Label({ label: 'Contenedor' }),
+  new NumberInput({
+    id: 'containerColumns',
+    label: 'Columnas',
+    description: 'Cantidad de items horizontales',
+    range: new NumberRangeValue(1, 999),
+  }),
+  new NumberInput({
+    id: 'containerColumnsGap',
+    label: 'Separador horizontal',
+    description: 'Espacio entre columnas (en porcentaje)',
+    range: new NumberRangeValue(1, 100),
+  }),
+  new NumberInput({
+    id: 'containerRows',
+    label: 'Filas',
+    description: 'Cantidad de items verticales',
+    range: new NumberRangeValue(1, 999),
+  }),
+  new NumberInput({
+    id: 'containerRowsGap',
+    label: 'Separador horizontal',
+    description: 'Espacio entre filas (en porcentaje)',
+    range: new NumberRangeValue(1, 100),
+  }),
+
+  new Label({ label: 'Avanzado' }),
+  new SelectAssetKna({
+    id: 'backgroundImage',
+    label: 'Fondo',
+    required: false,
+    extensions: ['jpg', 'png'],
+  }),
+  new TextInput({
+    id: 'padding',
+    required: false,
+    label: 'Márgenes',
+    description: 'CSS para dar espacio arriba/derecha/abajo/izquieda',
+  }),
+]

package/configuration/appearanceGroup/index.ts

@@ -0,0 +1,8 @@
+import { Group } from '@vixoniccom/modules'
+import { appearanceInputs } from './AppearanceInputs'
+
+export const appearanceGroup = new Group({
+  id: 'appearanceGroup',
+  label: 'Apariencia',
+  items: [...appearanceInputs],
+})

package/configuration/dataGroup/DataInputs.ts

@@ -0,0 +1,71 @@
+import { Label, SelectAssetKna, SelectInput, Switch, TextFormat, TextInput } from '@vixoniccom/modules'
+import { ShowValidations } from '../utils'
+
+export const dataInputs = [
+  new Label({ label: 'Datos' }),
+  new TextInput({
+    id: 'url',
+    required: true,
+    label: 'Fuente',
+    description: 'Ubicación de los datos',
+  }),
+  new SelectInput({
+    id: 'photosMode',
+    label: 'Modo de fotos',
+    items: [
+      { label: 'Zip', value: 'zip' },
+      { label: 'En línea', value: 'online' },
+    ],
+    defaultValue: 'online',
+  }),
+  new TextInput({
+    id: 'photosUrl',
+    label: 'Fotos',
+    description: 'Ubicación donde se encuentran las fotos',
+    required: false,
+    show: ShowValidations.onlinePhotos,
+  }),
+  new SelectAssetKna({
+    id: 'photosZip',
+    label: 'Archivo Zip',
+    extensions: ['zip'],
+    show: ShowValidations.zipPhotos,
+  }),
+  new SelectInput({
+    id: 'updateTime',
+    label: 'Actualización',
+    items: [
+      { label: '10 minutos', value: 600000 },
+      { label: '30 minutos', value: 1800000 },
+      { label: '1 hora', value: 3600000 },
+      { label: '6 horas', value: 21600000 },
+      { label: '12 horas', value: 43200000 },
+      { label: 'Diario', value: 86400000 },
+      { label: 'Semanal', value: 604800000 },
+    ],
+    defaultValue: 86400000,
+  }),
+
+  new Label({ label: 'Funcionamiento' }),
+  new SelectInput({
+    id: 'dataMode',
+    label: 'Modo',
+    items: [
+      { label: 'Diario', value: 'daily' },
+      { label: 'Semanal', value: 'weekly' },
+      { label: 'Mensual', value: 'monthly' },
+      { label: 'Anual', value: 'yearly' },
+    ],
+    defaultValue: 'monthly',
+  }),
+  new Switch({
+    id: 'excludePast',
+    label: 'Filtrar cumpleaños pasados',
+    displayOnTrue: 'Los cumpleaños ya pasados no seran mostrados',
+    displayOnFalse: 'Se siguen mostrando los cumpleaños pasados',
+    defaultValue: true,
+  }),
+
+  new TextInput({ id: 'msj0', label: 'Sin cumpleaños' }),
+  new TextFormat({ id: 'formatMjs', label: 'Formato Mensaje sin cumpleaños' }),
+]

package/configuration/dataGroup/index.ts

@@ -0,0 +1,8 @@
+import { Group } from '@vixoniccom/modules'
+import { dataInputs } from './DataInputs'
+
+export const dataGroup = new Group({
+  id: 'dataGroup',
+  label: 'Configuración',
+  items: [...dataInputs],
+})

package/configuration/documentGroup/documentInputs.ts

@@ -0,0 +1,6 @@
+import { Label, RedirectButton } from '@vixoniccom/modules'
+
+export const documentInputs = [
+  new Label({ label: 'Documento' }),
+  new RedirectButton({ id: 'url', label: 'Ir al documento', description: 'Prueba' }),
+]

package/configuration/documentGroup/index.ts

@@ -0,0 +1,8 @@
+import { Group } from '@vixoniccom/modules'
+import { documentInputs } from './documentInputs'
+
+export const documentGroup = new Group({
+  id: 'documentGroup',
+  label: 'Documento',
+  items: [...documentInputs],
+})

package/configuration/index.ts

@@ -0,0 +1,9 @@
+import { Configuration } from '@vixoniccom/modules'
+import { dataGroup } from './dataGroup'
+import { appearanceGroup } from './appearanceGroup'
+import { documentGroup } from './documentGroup'
+import { standardGroup } from './standardGroup'
+
+export const configuration = new Configuration({
+  schema: [documentGroup, dataGroup, appearanceGroup, standardGroup],
+})

package/configuration/standardGroup/index.ts

@@ -0,0 +1,8 @@
+import { Group } from '@vixoniccom/modules'
+import { standardInputs } from './standardInputs'
+
+export const standardGroup = new Group({
+  id: 'standardGroup',
+  label: 'Estilo',
+  items: [...standardInputs],
+})

package/configuration/standardGroup/standardInputs.ts

@@ -0,0 +1,211 @@
+import {
+  ColorPicker,
+  Label,
+  NumberInput,
+  NumberRangeValue,
+  SelectInput,
+  Switch,
+  TextFormat,
+  TextInput,
+} from '@vixoniccom/modules'
+import { ShowValidations } from '../utils'
+
+export const standardInputs = [
+  new Label({ label: 'Textos' }),
+  new SelectInput({
+    id: 'textPosition',
+    label: 'Posición',
+    items: [
+      { label: 'Inicio', value: 1 },
+      { label: 'Centro', value: 2 },
+      { label: 'Final', value: 3 },
+    ],
+    defaultValue: 2,
+  }),
+  new SelectInput({
+    id: 'textAlignment',
+    label: 'Alineación',
+    items: [
+      { label: 'Inicio', value: 'start' },
+      { label: 'Centro', value: 'center' },
+      { label: 'Final', value: 'end' },
+    ],
+    defaultValue: 'center',
+  }),
+
+  new Label({ label: 'Nombre' }),
+  new TextFormat({ id: 'nameFormat', label: 'Formato' }),
+  new NumberInput({ id: 'nameMaxChar', label: 'Caracteres máximos' }),
+  new TextInput({
+    id: 'textMargin',
+    label: 'Margen',
+    description: 'Margen derecho de los textos (en porcentaje). Por defecto 4%',
+  }),
+
+  new Switch({
+    id: 'descriptionEnabled',
+    label: 'Habilitar descripción',
+    displayOnTrue: 'Descripción habilitada',
+    displayOnFalse: 'Descripción deshabilitada',
+    defaultValue: true,
+  }),
+
+  new Label({ label: 'Descripción', show: ShowValidations.descriptionEnabled }),
+  new TextFormat({ id: 'descriptionFormat', label: 'Formato', show: ShowValidations.descriptionEnabled }),
+  new NumberInput({ id: 'descriptionMaxChar', label: 'Caracteres máximos', show: ShowValidations.descriptionEnabled }),
+
+  new Switch({
+    id: 'optionalEnabled',
+    label: 'Habilitar campo opcional',
+    displayOnTrue: 'Campo opcional habilitado',
+    displayOnFalse: 'Campo opcional deshabilitado',
+    defaultValue: true,
+  }),
+
+  new Label({ label: 'Campo opcional', show: ShowValidations.optionalEnabled }),
+  new TextFormat({ id: 'optionalFormat', label: 'Formato', show: ShowValidations.optionalEnabled }),
+
+  new Label({ label: 'Fotografía' }),
+
+  new Label({ label: 'Imagen' }),
+  new Switch({
+    id: 'imageEnabled',
+    label: 'Habilitar imagen',
+    displayOnTrue: 'Imagen habilitada',
+    displayOnFalse: 'Imagen deshabilitada',
+    defaultValue: true,
+  }),
+  new SelectInput({
+    id: 'imagePosition',
+    label: 'Posición',
+    items: [
+      { label: 'Inicio', value: 1 },
+      { label: 'Centro', value: 2 },
+      { label: 'Final', value: 3 },
+    ],
+    defaultValue: 2,
+    show: ShowValidations.imageEnabled,
+  }),
+  new SelectInput({
+    id: 'imageAlignment',
+    label: 'Alineación',
+    items: [
+      { label: 'Inicio', value: 'start' },
+      { label: 'Centro', value: 'center' },
+      { label: 'Final', value: 'end' },
+    ],
+    defaultValue: 'center',
+    show: ShowValidations.imageEnabled,
+  }),
+  new SelectInput({
+    id: 'imageStyle',
+    label: 'Estilo',
+    description: 'Forma de enmarcar la fotografía',
+    required: true,
+    items: [
+      { label: 'Normal', value: 'normal' },
+      { label: 'Redondeado', value: 'rounded' },
+      { label: 'Círculo', value: 'circle' },
+    ],
+    defaultValue: 'normal',
+    show: ShowValidations.imageEnabled,
+  }),
+  new TextInput({
+    id: 'imageMargin',
+    label: 'Margen',
+    description: 'Margen derecho de la imagen (en porcentaje). Por defecto 4%',
+    show: ShowValidations.imageEnabled,
+  }),
+  new NumberInput({
+    id: 'imageSize',
+    label: 'Tamaño',
+    description: 'Tamaño de la imagen (en porcentaje)',
+    range: new NumberRangeValue(1, 100),
+    show: ShowValidations.imageEnabled,
+  }),
+
+  new Label({ label: 'Fecha' }),
+  new Switch({
+    id: 'dateEnabled',
+    label: 'Habilitar fecha',
+    displayOnTrue: 'Fecha habilitada',
+    displayOnFalse: 'Fecha deshabilitada',
+    defaultValue: true,
+  }),
+  new SelectInput({
+    id: 'datePosition',
+    label: 'Posición',
+    items: [
+      { label: 'Inicio', value: 1 },
+      { label: 'Centro', value: 2 },
+      { label: 'Final', value: 3 },
+    ],
+    defaultValue: 3,
+    show: ShowValidations.dateEnabled,
+  }),
+  new SelectInput({
+    id: 'dateAlignment',
+    label: 'Alineación',
+    items: [
+      { label: 'Inicio', value: 'start' },
+      { label: 'Centro', value: 'center' },
+      { label: 'Final', value: 'end' },
+    ],
+    defaultValue: 'center',
+    show: ShowValidations.dateEnabled,
+  }),
+  new SelectInput({
+    id: 'dateStyle',
+    label: 'Estilo',
+    description: 'Forma de enmarcar la fotografía',
+    required: true,
+    items: [
+      { label: 'Calendario simple', value: 'calendarFlat' },
+      { label: 'Calendario texto', value: 'calendarText' },
+      { label: 'Circular', value: 'circle' },
+      { label: 'Texto', value: 'text' },
+      { label: 'Líneas', value: 'outlines' },
+    ],
+    defaultValue: 'calendarFlat',
+    show: ShowValidations.dateEnabled,
+  }),
+  new TextFormat({ id: 'dateDayFormat', label: 'Formato del día', show: ShowValidations.dateEnabled }),
+  new TextFormat({ id: 'dateMonthFormat', label: 'Formato del mes', show: ShowValidations.dateEnabled }),
+  new Switch({
+    id: 'abbreviatedMonths',
+    label: 'Meses abreviados',
+    displayOnTrue: 'Meses abreviados',
+    displayOnFalse: 'Meses no abreviados',
+    defaultValue: false,
+    show: ShowValidations.abbreviatedMonthsCondition,
+  }),
+  new ColorPicker({
+    id: 'datePrimaryColor',
+    label: 'Color primario',
+    show: ShowValidations.dateColorCondition,
+  }),
+  new TextInput({
+    id: 'dateMargin',
+    label: 'Margen',
+    description: 'Margen derecho de la fecha (en porcentaje). Por defecto 4%',
+    show: ShowValidations.dateEnabled,
+  }),
+
+  new Label({ label: 'Separador' }),
+  new Switch({
+    id: 'separator',
+    label: 'Habilitar Separador',
+    displayOnTrue: 'Separador habilitado',
+    displayOnFalse: 'Separador deshabilitado',
+    defaultValue: true,
+  }),
+  new NumberInput({ id: 'separatorWidth', label: 'Ancho', show: ShowValidations.separatorEnabled }),
+  new ColorPicker({ id: 'separatorColor', label: 'Color', show: ShowValidations.separatorEnabled }),
+  new TextInput({
+    id: 'itemMargins',
+    label: 'Márgenes',
+    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}$',
+    show: ShowValidations.separatorEnabled,
+  }),
+]

package/configuration/utils.ts

@@ -0,0 +1,13 @@
+export const ShowValidations = {
+  onlinePhotos: "{{photosMode}} === 'online'",
+  zipPhotos: "{{photosMode}} === 'zip'",
+  descriptionEnabled: '{{descriptionEnabled}} === true',
+  optionalEnabled: '{{optionalEnabled}} === true',
+  imageEnabled: '{{imageEnabled}} === true',
+  dateEnabled: '{{dateEnabled}} === true',
+  abbreviatedMonthsCondition:
+    "{{dateEnabled}} === true && ['calendarFlat', 'calendarText', 'outlines'].indexOf({{dateStyle}}) !== -1",
+  dateColorCondition:
+    "({{dateEnabled}} === true && ['calendarFlat', 'circle', 'outlines'].indexOf({{dateStyle}}) !== -1)",
+  separatorEnabled: '{{separator}} === true',
+}