@vixoniccom/aniversarios 1.2.1 → 1.2.3-dev.0

package/src/test/parameters.json

@@ -1,106 +1,106 @@
 {
-    "parameters": {
-      "apiDomain": "https://docs.google.com/spreadsheets/d/1g-tvPAIk7tCXgn6DuwHp3zC8Gmx55C3wyxZkfSK4VcE/edit?usp=sharing",
-      "msj0": " No ingresos ",
-      "padding": "365px 25px 80px 40px",
-      "dataMode": "yearly",
-      "template": "standard",
-      "dateStyle": "circle",
-      "photosZip": {
-        "id": "d1093778-f3c9-42c8-9b07-9f8736390aeb",
-        "filename": "d1093778-f3c9-42c8-9b07-9f8736390aeb.zip",
-        "__isAsset": true,
-        "extension": "zip"
+  "parameters": {
+    "apiDomain": "https://docs.google.com/spreadsheets/d/1nxPf6Y97fPubVE9mWhShrWvcXAlndD4x-qSvdjgoIVk/edit?usp=sharing",
+    "msj0": "No ingresos",
+    "padding": "365px 25px 80px 40px",
+    "dataMode": "monthly",
+    "template": "standard",
+    "dateStyle": "circle",
+    "photosZip": {
+      "id": "d1093778-f3c9-42c8-9b07-9f8736390aeb",
+      "filename": "d1093778-f3c9-42c8-9b07-9f8736390aeb.zip",
+      "__isAsset": true,
+      "extension": "zip"
+    },
+    "imageStyle": "circle",
+    "nameFormat": {
+      "font": {
+        "id": "7953953c-7029-4730-ae4d-cff4abd5288f",
+        "filename": "7953953c-7029-4730-ae4d-cff4abd5288f.ttf",
+        "__isAsset": true
+      },
+      "fontSize": 3.8,
+      "alignment": {
+        "horizontal": "left"
+      },
+      "fontColor": "#585858"
+    },
+    "photosMode": "zip",
+    "updateTime": 60000,
+    "dateEnabled": true,
+    "excludePast": false,
+    "itemMargins": "5px",
+    "orientation": "h",
+    "datePosition": 1,
+    "imageEnabled": true,
+    "textPosition": 3,
+    "animationMode": "fade",
+    "animationTime": "5",
+    "containerRows": "3",
+    "dateAlignment": "center",
+    "dateDayFormat": {
+      "font": {
+        "id": "c705a739-312e-4334-9231-e73a05e9d382",
+        "filename": "c705a739-312e-4334-9231-e73a05e9d382.ttf",
+        "__isAsset": true
       },
-      "imageStyle": "circle",
-      "nameFormat": {
-        "font": {
-          "id": "7953953c-7029-4730-ae4d-cff4abd5288f",
-          "filename": "7953953c-7029-4730-ae4d-cff4abd5288f.ttf",
-          "__isAsset": true
-        },
-        "fontSize": 3.8,
-        "alignment": {
-          "horizontal": "left"
-        },
-        "fontColor": "#585858"
+      "fontSize": 55,
+      "alignment": {
+        "horizontal": "center"
       },
-      "photosMode": "zip",
-      "updateTime": 600000,
-      "dateEnabled": true,
-      "excludePast": false,
-      "itemMargins": "5px",
-      "orientation": "h",
-      "datePosition": 1,
-      "imageEnabled": true,
-      "textPosition": 3,
-      "animationMode": "fade",
-      "animationTime": "5",
-      "containerRows": "3",
-      "dateAlignment": "center",
-      "dateDayFormat": {
-        "font": {
-          "id": "c705a739-312e-4334-9231-e73a05e9d382",
-          "filename": "c705a739-312e-4334-9231-e73a05e9d382.ttf",
-          "__isAsset": true
-        },
-        "fontSize": 55,
-        "alignment": {
-          "horizontal": "center"
-        },
-        "fontColor": "#ffffff"
+      "fontColor": "#ffffff"
+    },
+    "imagePosition": 2,
+    "textAlignment": "center",
+    "animationOrder": false,
+    "animationSpeed": 1.5,
+    "imageAlignment": "center",
+    "backgroundImage": {
+      "id": "cumples",
+      "filename": "cumples.png",
+      "__isAsset": true
+    },
+    "dateMonthFormat": {
+      "font": {
+        "id": "7953953c-7029-4730-ae4d-cff4abd5288f",
+        "filename": "7953953c-7029-4730-ae4d-cff4abd5288f.ttf",
+        "__isAsset": true
+      },
+      "fontSize": 20,
+      "alignment": {
+        "horizontal": "center"
       },
-      "imagePosition": 2,
-      "textAlignment": "center",
-      "animationOrder": false,
-      "animationSpeed": 1.5,
-      "imageAlignment": "center",
-      "backgroundImage": {
-        "id": "cumples",
-        "filename": "cumples.png",
+      "fontColor": "#ffffff"
+    },
+    "containerColumns": "1",
+    "containerRowsGap": "5",
+    "datePrimaryColor": "#d13139",
+    "abbreviatedMonths": false,
+    "descriptionFormat": {
+      "font": {
+        "id": "7953953c-7029-4730-ae4d-cff4abd5288f",
+        "filename": "7953953c-7029-4730-ae4d-cff4abd5288f.ttf",
         "__isAsset": true
       },
-      "dateMonthFormat": {
-        "font": {
-          "id": "7953953c-7029-4730-ae4d-cff4abd5288f",
-          "filename": "7953953c-7029-4730-ae4d-cff4abd5288f.ttf",
-          "__isAsset": true
-        },
-        "fontSize": 20,
-        "alignment": {
-          "horizontal": "center"
-        },
-        "fontColor": "#ffffff"
+      "fontSize": 3.8,
+      "alignment": {
+        "horizontal": "left"
+      },
+      "fontColor": "#585858"
+    },
+    "descriptionEnabled": true,
+    "optionalEnabled": true,
+    "optionalFormat": {
+      "font": {
+        "id": "7953953c-7029-4730-ae4d-cff4abd5288f",
+        "filename": "7953953c-7029-4730-ae4d-cff4abd5288f.ttf",
+        "__isAsset": true
       },
-      "containerColumns": "1",
-      "containerRowsGap": "5",
-      "datePrimaryColor": "#d13139",
-      "abbreviatedMonths": false,
-      "descriptionFormat": {
-        "font": {
-          "id": "7953953c-7029-4730-ae4d-cff4abd5288f",
-          "filename": "7953953c-7029-4730-ae4d-cff4abd5288f.ttf",
-          "__isAsset": true
-        },
-        "fontSize": 3.8,
-        "alignment": {
-          "horizontal": "left"
-        },
-        "fontColor": "#585858"
+      "fontSize": 3.8,
+      "alignment": {
+        "horizontal": "left"
       },
-      "descriptionEnabled": true,
-      "optionalEnabled": true,
-      "optionalFormat": {
-        "font": {
-          "id": "7953953c-7029-4730-ae4d-cff4abd5288f",
-          "filename": "7953953c-7029-4730-ae4d-cff4abd5288f.ttf",
-          "__isAsset": true
-        },
-        "fontSize": 3.8,
-        "alignment": {
-          "horizontal": "left"
-        },
-        "fontColor": "#585858"
-      }
+      "fontColor": "#585858"
     }
-  }
+  }
+}

package/tsconfig.json

@@ -1,9 +1,9 @@
 {
   "compilerOptions": {
-    "target": "es2015",
-    "module": "es2015",
+    "target": "es6",
+    "module": "esnext",
     "moduleResolution": "node",
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "allowJs": true,
     "checkJs": true,
     "allowSyntheticDefaultImports": true,
@@ -25,4 +25,4 @@
   },
   "include": ["./src/**/*"],
   "exclude": ["./node_modules/**/*"]
-}
+}

package/src/components/FormattedText.tsx

@@ -1,81 +0,0 @@
-import React from 'react'
-import { isNumber } from 'lodash'
-
-const alignments = {
-  center: 'center',
-  left: 'flex-start',
-  right: 'flex-end'
-}
-
-type aligment = {
-  horizontal: keyof typeof alignments,
-  vertical: keyof typeof alignments
-}
-
-
-interface Props {
-  format?: any
-  lineHeight: number
-  maxChar?: number
-  style?: number
-  text: string
-  unit: string
-}
-export const FormattedText = ({ text, format, maxChar, lineHeight, style, unit }: Props) => {
-
-  const trimText = (text: any, maxChar: any) => {
-    const isValid = maxChar && isNumber(maxChar) && maxChar >= 3
-    if (isValid && (text && text.length > maxChar) || false) {
-      let returnText = text.substring(0, maxChar - 3)
-      returnText.substr(-1, 3)
-      return `${returnText.trim()}...`
-    }
-    return text
-  }
-
-  const checkNested = (obj: any, path: any): any => {
-    let arr = path.split('.')
-    if (arr.length > 0) {
-      if (obj.hasOwnProperty(arr[0])) {
-        if (arr.length > 1) return checkNested(obj[arr[0]], arr.splice(1).join('.'))
-        else return true
-      } else return false
-    }
-  }
-
-  const getHorizontalAlignment = (alignment: aligment) => {
-    if (alignment) {
-      let hA = alignment.horizontal
-      return alignments.hasOwnProperty(hA) ? alignments[alignment.horizontal] : 'flex-start'
-    }
-    return 'flex-start'
-  }
-
-  const renderText = maxChar ? trimText(text, maxChar) : text
-
-  let containerStyle = Object.assign({
-    display: 'inline-flex',
-    justifyContent: getHorizontalAlignment(format.alignment)
-  }, style)
-
-  return (
-    <div style={containerStyle}>
-      <span style={{
-        color: format.fontColor,
-        fontFamily: checkNested(format, 'font.filename') ? `"${format.font.filename.replace('.', '-')}"` : '',
-        fontSize: `${format.fontSize}${unit}`,
-        textAlign: checkNested(format, 'alignment.horizontal') ? format.alignment.horizontal : 'left',
-        lineHeight: lineHeight
-      }}>{renderText}</span>
-    </div>
-  )
-}
-
-
-
-FormattedText.defaultProps = {
-  format: {},
-  lineHeight: 1,
-  unit: 'vh',
-  maxChar: undefined
-}

package/src/components/anniversary-item/AnniversaryItem.tsx

@@ -1,22 +0,0 @@
-import React from 'react'
-import { ClasicItem } from './clasic/ClasicItem'
-
-const itemStyles = {
-  standard: ClasicItem
-}
-
-interface Props {
-  style: string,
-  anniversary: DataEmployee
-}
-
-export const AnniversaryItem = ({ style, anniversary }: Props) => {
-
-  // let StyledItem = itemStyles.hasOwnProperty(this.props.style) ? itemStyles['circle'] : itemStyles.standard
-  let StyledItem = itemStyles.hasOwnProperty(style) ? itemStyles['standard'] : itemStyles.standard
-
-  return <StyledItem anniversary={anniversary} />
-
-}
-
-

package/src/components/anniversary-item/clasic/ClasicItem.tsx

@@ -1,220 +0,0 @@
-import React, { useContext, useEffect, useRef, useState } from "react";
-import { AnniversaryImage } from "../shared/AnniversaryImage";
-import { Separator } from "../shared/separator/Separator";
-import { AnniversaryDate } from "../shared/anniversary-date/AnniversaryDate";
-import { FormattedText } from "../../FormattedText";
-import { ConfigureContext } from "../../../contex/configureContext/ConfigureContext";
-
-interface Props {
-  anniversary: DataEmployee;
-}
-
-export const ClasicItem = ({ anniversary }: Props) => {
-  const { configureState } = useContext(ConfigureContext);
-  const { parameters, downloadsPath } = configureState;
-
-  const { orientation, separatorColor, separatorWidth, imageSize } = parameters;
-  const cont = useRef(null);
-
-  const parseBorderMargin = (marginString: any) => {
-    let pattern = /(( )?[+-]?[0-9]+.?([0-9]+)?(px|em|ex|%|in|cm|mm|pt|pc))?/g;
-    let match = marginString ? marginString.match(pattern) : [""];
-    switch (match.length) {
-      case 1:
-        return { r: "4%", l: "4%" };
-      case 2:
-        return { r: match[0], l: match[0] };
-      default:
-        return { r: match[0], l: match[1] };
-    }
-  };
-
-  const parseElementStyles = (
-    margin: string,
-    position: number,
-    defaultPosition: number,
-    parameters: VixonicParameters
-  ) => {
-    const { orientation, separator } = parameters;
-    const marginAttr = orientation === "v" ? "marginBottom" : "marginRight";
-    const sizeAttr = orientation === "v" ? "width" : "height";
-    let pos = position !== undefined ? position : defaultPosition;
-    return {
-      order: pos,
-      [sizeAttr]: "100%",
-      [marginAttr]:
-        margin !== undefined && margin !== ""
-          ? `${margin}%`
-          : pos === 3 || separator === true
-          ? 0
-          : "4%",
-    };
-  };
-
-  const parseParameters = (parameters: any) => {
-    const imageAlignment = parameters.imageAlignment || "center";
-    const textAlignment = parameters.textAlignment || "center";
-    const dateAlignment = parameters.dateAlignment || "center";
-
-    return {
-      imageEnabled: parameters.imageEnabled,
-      imageStyle: Object.assign(
-        {
-          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", 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
-        )
-      ),
-    };
-  };
-
-  const [margins, setMargins] = useState(
-    parseBorderMargin(parameters.itemMargins)
-  );
-  const [state, setState] = useState(
-    Object.assign({}, parseParameters(parameters))
-  );
-
-  useEffect(() => {
-    setMargins(parseBorderMargin(parameters.itemMargins));
-    setState(Object.assign({}, parseParameters(parameters)));
-  }, []);
-  
-  const getPhotoUrl = (filename: string) => {
-    let mode = parameters.photosMode;
-    if (
-      mode === "zip" &&
-      parameters.photosZip &&
-      parameters.photosZip.filename !== undefined
-    ) {
-      return (
-        downloadsPath +
-        "/" +
-        parameters.photosZip.filename.replace(".zip", "/") +
-        filename
-      );
-    } else {
-      return filename; //this.props.parameters.photosUrl + filename
-    }
-  };
-
-  const separatorProps = {
-    orientation: orientation,
-    size: separatorWidth,
-    color: separatorColor,
-    margins:
-      orientation === "v"
-        ? `${margins.r} 0 ${margins.l} 0`
-        : `0 ${margins.r} 0 ${margins.l}`,
-  };
-
-  return (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: orientation === "v" ? "column" : "row",
-        backgroundColor: "transparent",
-        overflow: "hidden",
-        alignItems: "center",
-        height: "100%",
-        width: "100%",
-      }}
-      ref={cont}
-    >
-      {state.imageEnabled && parameters.imageStyle && (
-        <div style={state.imageStyle}>
-          {
-            <AnniversaryImage
-              url={anniversary.image ? getPhotoUrl(anniversary.image) : null}
-              orientation={orientation}
-              size={imageSize}
-              borderStyle={parameters.imageStyle}
-            />
-          }
-        </div>
-      )}
-      {state.imageEnabled && parameters.separator && (
-        <Separator order={state.imageStyle.order} {...separatorProps} />
-      )}
-      <div
-        style={{
-          ...state.textStyle,
-          flexDirection: "column",
-        }}
-      >
-        <FormattedText
-          text={anniversary.name}
-          format={parameters.nameFormat}
-          maxChar={Number(parameters.nameMaxChar)}
-          lineHeight={1.2}
-        />
-        {state.descriptionEnabled && (
-          <FormattedText
-            text={anniversary.position}
-            format={parameters.descriptionFormat}
-            maxChar={Number(parameters.descriptionMaxChar)}
-            lineHeight={1.2}
-          />
-        )}
-        {
-          state.optionalEnabled && (
-            <FormattedText
-              text={anniversary.optional}
-              format={parameters.optionalFormat}
-              maxChar={Number(parameters.descriptionMaxChar)}
-              lineHeight={1.2}
-            />
-          )
-        }
-      </div>
-      {parameters.separator && (
-        <Separator order={state.textStyle.order} {...separatorProps} />
-      )}
-      {state.dateEnabled && parameters.dateStyle && (
-        <div style={state.dateStyle}>
-          <AnniversaryDate
-            style={parameters.dateStyle}
-            day={anniversary.day}
-            month={anniversary.month}
-          />
-        </div>
-      )}
-      {state.dateEnabled && parameters.separator && (
-        <Separator order={state.dateStyle.order} {...separatorProps} />
-      )}
-    </div>
-  );
-};

package/src/components/anniversary-item/shared/anniversary-date/DateUtils.ts

@@ -1,33 +0,0 @@
-import PropTypes from 'prop-types'
-import { utils } from '../utils';
-
-const Months = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre']
-
-export class AnniveraryDateUtil {
-    
-  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)
-  }
-
-  static commonPropTypes() {
-    return {
-      day: PropTypes.number.isRequired,
-      dayFormat: PropTypes.object,
-      month: PropTypes.number.isRequired,
-      monthFormat: PropTypes.object,
-      primaryColor: PropTypes.string,
-      abbreviatedMonths: PropTypes.bool,
-      orientation: PropTypes.string
-    }
-  }
-}
- 

package/src/components/anniversary-item/shared/anniversary-date/circle/CircleDate.tsx

@@ -1,39 +0,0 @@
-import React, { useContext } from 'react'
-import { AnniveraryDateUtil } from '../DateUtils'
-import { FormattedText } from '../../../../FormattedText'
-import { ConfigureContext } from '../../../../../contex/configureContext/ConfigureContext'
-
-interface Props {
-  day: number,
-  month: number
-}
-
-export const CircleDate = ({ day, month }: Props) => {
-
-
-  const { configureState } = useContext(ConfigureContext)
-  const { orientation, dateMonthFormat, datePrimaryColor, dateDayFormat } = configureState.parameters
-  const sizeProp = AnniveraryDateUtil.utils(orientation)
-
-  let monthSize = (dateMonthFormat && dateMonthFormat.fontSize || 100) * 400 / 100
-  let daySize = (dateDayFormat && dateDayFormat.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 xmlns='http://www.w3.org/1999/xhtml' style={{ height: 400, width: 400, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}> */}
-          <div style={{ height: 400, width: 400, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
-            <FormattedText text={AnniveraryDateUtil.getMonth(month, true)} format={Object.assign({}, dateMonthFormat, { fontSize: monthSize })} unit='px' />
-            <FormattedText text={AnniveraryDateUtil.getZeroLeadedText(day)} format={Object.assign({}, dateDayFormat, { fontSize: daySize })} unit='px' />
-          </div>
-        </foreignObject>
-      </g>
-    </svg>
-  )
-}
-
-
-CircleDate.propTypes = AnniveraryDateUtil.commonPropTypes()
-