@vixoniccom/news-internal 0.4.21-dev.3 → 0.4.21-dev.31

package/build/test/parameters.json

@@ -37,30 +37,6 @@
         "qrCodeUrl": "https://vixonic.com/",
         "qrCodeTitle": "Entra a Vixonic",
         "expirationDate": ""
-      },
-      {
-        "$$hashKey": "object:583",
-        "description": "Miau",
-        "image": {
-          "__type": "kna-resource",
-          "filename": "cat.jpg"
-        },
-        "title": "Gato",
-        "qrCodeUrl": "https://vixonic.com/",
-        "qrCodeTitle": "Entra a Vixonic",
-        "expirationDate": ""
-      },
-      {
-        "$$hashKey": "object:653",
-        "description": "Guau",
-        "image": {
-          "__type": "kna-resource",
-          "filename": "dog.jpg"
-        },
-        "title": "Perro",
-        "qrCodeUrl": "https://mandomedio.com/",
-        "qrCodeTitle": "Entra a Mandomedio",
-        "expirationDate": "2026-05-30"
       }
     ],
     "padding": "25px 80px 120px 20px",
@@ -91,6 +67,19 @@
       },
       "fontColor": "#336699",
       "fontSize": "36"
-    }
+    },
+    "defaultMessageFormat": {
+      "font": {
+        "id": "7953953c-7029-4730-ae4d-cff4abd5288f",
+        "filename": "7953953c-7029-4730-ae4d-cff4abd5288f.ttf",
+        "__isAsset": true
+      },
+      "fontSize": 3.8,
+      "alignment": {
+        "horizontal": "left"
+      },
+      "fontColor": "#585858"
+    },
+    "defaultMessage": "No hay noticias disponibles en este momento."
   }
 }

package/configuration/appearanceGroup/generalInputs.ts

@@ -1,5 +1,5 @@
 import { Label, SelectInput, NumberInput } from '@vixoniccom/modules'
-import { NumberRangeValue, Slider } from '@vixoniccom/modules/dist/lib'
+import { NumberRangeValue, Slider, TextFormat, TextInput } from '@vixoniccom/modules/dist/lib'
 
 export const generalInputs = [
   new Label({ label: 'General' }),
@@ -51,5 +51,7 @@ export const generalInputs = [
       { label: 'Distribuidos', value: 'space-around' },
       { label: 'Separados', value: 'space-between' }
     ]
-  })
+  }),
+  new TextInput({ id: 'defaultMessage', label: 'Mensaje sin noticias', description: 'Mensaje a mostrar cuando no existen noticias o han caducado' }),
+  new TextFormat({ id: 'defaultMessageFormat', label: 'Formato del mensaje sin noticias' }),
 ]

package/configuration/newsGroup/index.ts

@@ -1,4 +1,4 @@
-import { List } from '@vixoniccom/modules'
+import { List, NumberRangeValue } from '@vixoniccom/modules'
 import { newsInputs } from './newsInputs'
 
 export const newsGroup = new List({
@@ -7,6 +7,7 @@ export const newsGroup = new List({
   description: 'Lista de noticias',
   sortable: true,
   itemSchema: [...newsInputs],
+  range: new NumberRangeValue(1, 200),
   itemDisplayClass: '2-lines',
   itemDisplayAttributes: {
     title: 'title',

package/configuration/newsGroup/newsInputs.ts

@@ -3,7 +3,7 @@ import { ShowValidations } from '../utils'
 
 export const newsInputs = [
   new TextInput({
-    id: 'title',
+    id: 'titleShort',
     label: 'Título corto',
     required: true,
     show: ShowValidations.shortTitleEnabled,
@@ -11,7 +11,7 @@ export const newsInputs = [
     pattern: '^(?!\\s*$).+',
   }),
   new TextInput({
-    id: 'title',
+    id: 'titleMedium',
     label: 'Título mediano',
     required: true,
     show: ShowValidations.mediumTitleEnabled,
@@ -19,7 +19,7 @@ export const newsInputs = [
     pattern: '^(?!\\s*$).+',
   }),
   new TextInput({
-    id: 'title',
+    id: 'titleLarge',
     label: 'Título largo',
     required: true,
     show: ShowValidations.largeTitleEnabled,
@@ -28,7 +28,7 @@ export const newsInputs = [
   }),
 
   new TextInput({
-    id: 'title',
+    id: 'titleExtraLarge',
     label: 'Título extra largo',
     required: true,
     show: ShowValidations.extraLargeTitleEnabled,
@@ -37,7 +37,7 @@ export const newsInputs = [
   }),
 
   new TextArea({
-    id: 'description',
+    id: 'descriptionShort',
     label: 'Descripción corta',
     required: true,
     show: ShowValidations.shortDescriptionEnabled,
@@ -47,7 +47,7 @@ export const newsInputs = [
   }),
 
   new TextArea({
-    id: 'description',
+    id: 'descriptionMedium',
     label: 'Descripción mediana',
     required: true,
     show: ShowValidations.mediumDescriptionEnabled,
@@ -57,7 +57,7 @@ export const newsInputs = [
   }),
 
   new TextArea({
-    id: 'description',
+    id: 'descriptionLarge',
     label: 'Descripción larga',
     required: true,
     show: ShowValidations.largeDescriptionEnabled,
@@ -67,7 +67,7 @@ export const newsInputs = [
   }),
 
   new TextArea({
-    id: 'description',
+    id: 'descriptionExtraLarge',
     label: 'Descripción extra larga',
     required: true,
     show: ShowValidations.extraLargeDescriptionEnabled,

package/configuration.json

@@ -7,7 +7,7 @@
       "type": "list",
       "itemSchema": [
         {
-          "id": "title",
+          "id": "titleShort",
           "label": "Título corto",
           "show": "{{titleEnabled}} === true && ({{newsSizeSelect}} === 'short')",
           "type": "text-input",
@@ -16,7 +16,7 @@
           "range": "[1:25]"
         },
         {
-          "id": "title",
+          "id": "titleMedium",
           "label": "Título mediano",
           "show": "{{titleEnabled}} === true && ({{newsSizeSelect}} === 'medium')",
           "type": "text-input",
@@ -25,7 +25,7 @@
           "range": "[1:40]"
         },
         {
-          "id": "title",
+          "id": "titleLarge",
           "label": "Título largo",
           "show": "{{titleEnabled}} === true && ({{newsSizeSelect}} === 'large')",
           "type": "text-input",
@@ -34,7 +34,7 @@
           "range": "[1:50]"
         },
         {
-          "id": "title",
+          "id": "titleExtraLarge",
           "label": "Título extra largo",
           "show": "{{titleEnabled}} === true && ({{newsSizeSelect}} === 'extra-large')",
           "type": "text-input",
@@ -43,7 +43,7 @@
           "range": "[1:70]"
         },
         {
-          "id": "description",
+          "id": "descriptionShort",
           "label": "Descripción corta",
           "show": "{{descriptionEnabled}} === true && ({{newsSizeSelect}} === 'short')",
           "type": "text-area",
@@ -53,7 +53,7 @@
           "html": true
         },
         {
-          "id": "description",
+          "id": "descriptionMedium",
           "label": "Descripción mediana",
           "show": "{{descriptionEnabled}} === true && ({{newsSizeSelect}} === 'medium')",
           "type": "text-area",
@@ -63,7 +63,7 @@
           "html": true
         },
         {
-          "id": "description",
+          "id": "descriptionLarge",
           "label": "Descripción larga",
           "show": "{{descriptionEnabled}} === true && ({{newsSizeSelect}} === 'large')",
           "type": "text-area",
@@ -73,7 +73,7 @@
           "html": true
         },
         {
-          "id": "description",
+          "id": "descriptionExtraLarge",
           "label": "Descripción extra larga",
           "show": "{{descriptionEnabled}} === true && ({{newsSizeSelect}} === 'extra-large')",
           "type": "text-area",
@@ -119,6 +119,7 @@
         }
       ],
       "description": "Lista de noticias",
+      "range": "[1:200]",
       "itemDisplayClass": "2-lines",
       "itemDisplayAttributes": {
         "title": "title",
@@ -250,6 +251,16 @@
           "required": true,
           "defaultValue": "center"
         },
+        {
+          "id": "defaultMessage",
+          "label": "Sin noticias",
+          "type": "text-input"
+        },
+        {
+          "id": "defaultMessageFormat",
+          "label": "Formato mensaje sin noticias",
+          "type": "text-format"
+        },
         {
           "type": "label",
           "label": "Elementos"

package/package.json

@@ -8,7 +8,7 @@
   "author": {
     "name": ""
   },
-  "version": "0.4.21-dev.3",
+  "version": "0.4.21-dev.31",
   "scripts": {
     "prepublish": "vixonic-module-packager --mode=build",
     "watch": "vixonic-module-packager --mode=watch",
@@ -36,7 +36,7 @@
     "@types/react-transition-group": "^4.4.12",
     "@types/uuid": "^9.0.1",
     "@vixoniccom/module-packager": "^2.13.0-dev.1",
-    "@vixoniccom/modules": "^2.22.0-dev.3",
+    "@vixoniccom/modules": "^2.25.0-dev.13",
     "standard-version": "^9.5.0"
   }
 }

package/src/components/App.tsx

@@ -10,16 +10,37 @@ export type Props = {
 
 export const App: React.FunctionComponent<Props> = ({ data }) => {
   const [news, setNews] = useState<NewsItem[]>([])
+  
+   const getPrefixBySize = (n: any, size: string, prefix: string): string => {
+    const prefixMap: { [key: string]: string } = {
+      'short': n[`${prefix}Short`],
+      'medium': n[`${prefix}Medium`],
+      'large': n[`${prefix}Large`],
+      'extra-large': n[`${prefix}ExtraLarge`]
+    }
+    return prefixMap[size] || n[`${prefix}Medium`] || ''
+  }
 
   const parseNews = (data?: VixonicData): NewsItem[] => {
     if (!data) return []
-    const { news } = data.parameters
+    const { news, newsSizeSelect } = data.parameters
     const parsedNews = news?.map((n) => {
       const { image, ...rest } = n
       let parsedImage
       const qrUrl = n.qrCodeUrl
       if (image?.filename) parsedImage = `${data.downloadsPath}/${image.filename}`
-      return { ...rest, image: parsedImage, id: uuid(), qrCodeUrl: qrUrl }
+    
+      let title = getPrefixBySize(n, newsSizeSelect ?? 'medium', 'title')
+      let description = getPrefixBySize(n, newsSizeSelect ?? 'medium', 'description')
+
+      return {
+         ...rest,
+          title,
+          description,
+          image: parsedImage,
+          id: uuid(),
+          qrCodeUrl: qrUrl 
+        }
     }).filter((n) => {
       const { expirationDate } = n
       const today = dayjs()

package/src/components/FontLoader.tsx

@@ -17,6 +17,7 @@ export const FontLoader: React.FunctionComponent<Props<any>> = (props) => {
           src: url("${parseFontUrl(props.downloadPath, font)}");
         }`
     } catch (err) {
+      console.error('Error loading font:', font, err)
       return ''
     }
   })

package/src/components/FormattedText/index.tsx

@@ -47,8 +47,8 @@ export const FormattedText: React.FunctionComponent<Props> = (props) => {
 
   const getHorizontalAlignment = (alignment: Aligment) => {
     if (alignment) {
-      const hA = alignment.horizontal
-      return alignments.hasOwnProperty(hA) ? alignments[alignment.horizontal] : 'flex-start'
+      const hA = alignment?.horizontal
+      return alignments.hasOwnProperty(hA) ? alignments[alignment?.horizontal] : 'flex-start'
     }
     return 'flex-start'
   }
@@ -79,9 +79,4 @@ export const FormattedText: React.FunctionComponent<Props> = (props) => {
   )
 }
 
-FormattedText.defaultProps = {
-  format: {},
-  lineHeight: 1,
-  unit: 'vh',
-  maxChar: undefined,
-}
+

package/src/components/NewsContainer/index.tsx

@@ -4,6 +4,7 @@ import { StandardItem } from '../StandardItem'
 import { GalleryItem } from '../GalleryItem'
 import { GradientItem } from '../GradientItem'
 import './styles.css'
+import { FormattedText } from '../FormattedText'
 
 type Props = {
   data: VixonicData
@@ -12,7 +13,7 @@ type Props = {
 
 export const NewsContainer: React.FunctionComponent<Props> = (props) => {
   const { parameters, downloadsPath } = props.data
-  const { animationSpeed } = parameters
+  const { animationSpeed, defaultMessage } = parameters
   const timerRef = useRef<number | undefined>(undefined)
   const [currentIndex, setCurrentIndex] = useState(0)
   const item = props.items.length > currentIndex ? props.items[currentIndex] : undefined
@@ -25,7 +26,7 @@ export const NewsContainer: React.FunctionComponent<Props> = (props) => {
   }, [currentIndex, props.items])
 
   const startTimeout = () => {
-    const showTime = props.data?.parameters?.showTime || 10
+    const showTime = props.data?.parameters?.showTime ?? 10
     const time = showTime * 1000
     timerRef.current = window.setTimeout(nextItem, time)
   }
@@ -36,36 +37,53 @@ export const NewsContainer: React.FunctionComponent<Props> = (props) => {
     setCurrentIndex(newIndex)
   }
 
-  if (parameters.template === 'gradient') {
-    return <TransitionGroup className='main-container' style={{
-      backgroundColor: parameters.gradientBackgroundColor || 'red'
-    }}>
-      {item &&
-        <CSSTransition key={item.id} classNames={parameters.animationType || 'fade'} timeout={(1750 / (animationSpeed || 1)) * 2}>
-          <div className={'news-item-container'}>
-            {
-              <GradientItem parameters={parameters} item={item} />
-            }
-          </div>
-        </CSSTransition>
-      }
-    </TransitionGroup>
-
-  } else {
-    return <TransitionGroup className='main-container' style={{
+  const getContainerStyles = () => {
+    if (parameters.template === 'gradient') {
+      return { backgroundColor: parameters.gradientBackgroundColor || 'red' }
+    }
+    return {
       padding: parameters.padding,
       backgroundImage: parameters.background && `url("${downloadsPath}/${parameters.background.filename}")`
-    }}>
-      {item &&
-        <CSSTransition key={item.id} classNames={parameters.animationType || 'fade'} timeout={(1750 / (animationSpeed || 1)) * 2}>
-          <div className={'news-item-container'}>
-            {parameters.template !== 'gallery'
-              ? <StandardItem parameters={parameters} item={item} />
-              : <GalleryItem parameters={parameters} item={item} />
-            }
-          </div>
-        </CSSTransition>
-      }
-    </TransitionGroup>
+    }
   }
+
+  const renderNewsItem = (item: NewsItem) => {
+    if (parameters.template === 'gradient') {
+      return <GradientItem parameters={parameters} item={item} />
+    }
+    if (parameters.template === 'gallery') {
+      return <GalleryItem parameters={parameters} item={item} />
+    }
+    return <StandardItem parameters={parameters} item={item} />
+  }
+
+  if (props.items.length === 0 || !item) {
+    return (
+      <div className='main-container' style={getContainerStyles()}>
+        <div style={{
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center'
+        }}>
+          <FormattedText text={defaultMessage || 'No existen noticias para mostrar'} format={parameters.defaultMessageFormat} />
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <TransitionGroup className='main-container' style={getContainerStyles()}>
+      <CSSTransition 
+        key={item.id} 
+        classNames={parameters.animationType || 'fade'} 
+        timeout={(1750 / (animationSpeed || 1)) * 2}
+      >
+        <div className={'news-item-container'}>
+          {renderNewsItem(item)}
+        </div>
+      </CSSTransition>
+    </TransitionGroup>
+  )
 }

package/src/parameters.d.ts

@@ -1,80 +1,127 @@
 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<{
+declare type VixonicParameters = 
+Partial<{
   news: {
-    title: string | string | string | string
-    description: string | string | string | string
-    image: { id?: string; filename?: string; extension?: string }
-    qrCodeUrl: string
-    qrCodeTitle: string
-    expirationDate: string
-    __id: string | undefined
-  }[]
-  newsSizeSelect: 'short' | 'medium' | 'large' | 'extra-large'
-  template: 'standard' | 'gallery' | 'gradient'
-  showTime: number
-  animationSpeed: number
-  animationType: 'fade' | 'crossFade'
-  textAlignment: 'flex-start' | 'flex-end' | 'center' | 'space-around' | 'space-between'
-  titleEnabled: boolean
-  titleFormat: {
-    fontSize?: number
-    fontColor?: string
-    alignment?: { horizontal?: 'left' | 'right' | 'center' }
-    font?: { filename: string; id: string; __isAsset: true }
-  }
-  titleLineHeight: number
-  descriptionEnabled: boolean
-  descriptionFormat: {
-    fontSize?: number
-    fontColor?: string
-    alignment?: { horizontal?: 'left' | 'right' | 'center' }
-    font?: { filename: string; id: string; __isAsset: true }
-  }
-  descriptionLineHeight: number
-  textSeparation: number
-  imageEnabled: boolean
-  imageSize: 'small' | 'medium' | 'large' | 'custom'
-  imageCustomSize: number
-  imagePosition: 'top' | 'right' | 'bottom' | 'left'
-  imageMode: 'contain' | 'cover' | 'fill' | 'none'
-  imageStyle: 'normal' | 'rounded' | 'circle' | 'hex'
-  imageSeparation: number
-  gradientBackgroundColor: string
-  gradientRate: number
-  gradientOrientation: 'left' | 'right'
-  gradientTitleEnabled: boolean
-  gradientTitle: string
-  gradientTitlePositionX: number
-  gradientTitlePositionY: number
-  gradientTitleFormat: {
-    fontSize?: number
-    fontColor?: string
-    alignment?: { horizontal?: 'left' | 'right' | 'center' }
-    font?: { filename: string; id: string; __isAsset: true }
-  }
-  barSize: 'small' | 'medium' | 'big'
-  barColor: string
-  barOpacity: number
-  iconVisible: boolean
-  iconColor: string
-  qrCodeEnabled: boolean
-  qrCodeWidth: number
-  qrCodeHeight: number
-  qrCodePositionX: number
-  qrCodePositionY: number
-  qrCodeBackgroundColor: string
-  qrCodeColor: string
-  QrCodeTitleFormat: {
-    fontSize?: number
-    fontColor?: string
-    alignment?: { horizontal?: 'left' | 'right' | 'center' }
-    font?: { filename: string; id: string; __isAsset: true }
-  }
-  background: { id?: string; filename?: string; extension?: string }
-  padding: string
-}>
+    titleShort: string, 
+    titleMedium: string, 
+    titleLarge: string, 
+    titleExtraLarge: string, 
+    descriptionShort: string, 
+    descriptionMedium: string, 
+    descriptionLarge: string, 
+    descriptionExtraLarge: string, 
+    image: {
+      id?: string, 
+      filename?: string, 
+      extension?: string
+    }, 
+    qrCodeUrl: string, 
+    qrCodeTitle: string, 
+    expirationDate: string, 
+    __id: string | undefined}[], 
+    newsSizeSelect: 'short' | 'medium' | 'large' | 'extra-large', 
+    template: 'standard' | 'gallery' | 'gradient', 
+    showTime: number, animationSpeed: number, 
+    animationType: 'fade' | 'crossFade', 
+    textAlignment: 'flex-start' | 'flex-end' | 'center' | 'space-around' | 'space-between',
+    defaultMessage: string
+    defaultMessageFormat: {
+      fontSize?: number,
+      fontColor?: string,
+      alignment?: {
+        horizontal?: 'left' | 'right' | 'center'},
+        font?: {
+          filename: string; 
+          id: string; 
+          __isAsset: true}
+    }
+    titleEnabled: boolean, 
+    titleFormat: { 
+      fontSize?: number, 
+      fontColor?: string, 
+      alignment?: { 
+        horizontal?: 'left' | 'right' | 'center' 
+      }, 
+      font?: { 
+        filename: string, 
+        id: string, 
+        __isAsset: true 
+      } 
+    }, 
+    titleLineHeight: number, 
+    descriptionEnabled: boolean, 
+    descriptionFormat: { 
+      fontSize?: number, 
+      fontColor?: string, 
+      alignment?: { 
+        horizontal?: 'left' | 'right' | 'center' 
+      }, 
+      font?: { 
+        filename: string, 
+        id: string, 
+        __isAsset: true 
+      } 
+    }, 
+    descriptionLineHeight: number, 
+    textSeparation: number, 
+    imageEnabled: boolean, 
+    imageSize: 'small' | 'medium' | 'large' | 'custom', 
+    imageCustomSize: number, 
+    imagePosition: 'top' | 'right' | 'bottom' | 'left', 
+    imageMode: 'contain' | 'cover' | 'fill' | 'none', 
+    imageStyle: 'normal' | 'rounded' | 'circle' | 'hex', 
+    imageSeparation: number, 
+    gradientBackgroundColor: string, 
+    gradientRate: number, 
+    gradientOrientation: 'left' | 'right', 
+    gradientTitleEnabled: boolean, 
+    gradientTitle: string, 
+    gradientTitlePositionX: number, 
+    gradientTitlePositionY: number, 
+    gradientTitleFormat: { 
+      fontSize?: number, 
+      fontColor?: string, 
+      alignment?: { 
+        horizontal?: 'left' | 'right' | 'center' 
+      }, 
+      font?: { 
+        filename: string, 
+        id: string, 
+        __isAsset: true 
+      } 
+    }, 
+    barSize: 'small' | 'medium' | 'big', 
+    barColor: string, 
+    barOpacity: number, 
+    iconVisible: boolean, 
+    iconColor: string, 
+    qrCodeEnabled: boolean, 
+    qrCodeWidth: number, 
+    qrCodeHeight: number, 
+    qrCodePositionX: number, 
+    qrCodePositionY: number, 
+    qrCodeBackgroundColor: string, 
+    qrCodeColor: string, 
+    QrCodeTitleFormat: { 
+      fontSize?: number, 
+      fontColor?: string, 
+      alignment?: { 
+        horizontal?: 'left' | 'right' | 'center' }, 
+        font?: { 
+          filename: string, 
+          id: string, 
+          __isAsset: true 
+        } 
+      }, 
+      background: {
+        id?: string, 
+        filename?: string, 
+        extension?: string
+      }, 
+      padding: string
+}>