argous 1.2.217 → 1.2.218

package/dist/components/index.d.ts

@@ -157,13 +157,4 @@ export { default as HalfGauge } from './HalfGauge';
 export * from './HalfGauge';
 
 export { default as UserCard } from './UserCard';
-export * from './UserCard';
-
-export { default as TextToHtml } from './TextToHtml';
-export * from './TextToHtml';
-
-export { default as Zoom } from './Zoom';
-export * from './Zoom';
-
-export { default as Carousel } from './Carousel';
-export * from './Carousel';
+export * from './UserCard';

package/dist/components/index.js

@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AutoCompleteFavorites = exports.UtilAutoComplete = exports.ThreadLog = exports.TextArea = exports.Tabs = exports.TablePicker = exports.Stepper = exports.SimpleTable = exports.Select = exports.ProgressBar = exports.Programa = exports.Pagination = exports.OutputText = exports.OtpInput = exports.MultipleSelect = exports.MonthPicker = exports.ModalProvider = exports.MenuBar = exports.MaterialButton = exports.ListSelect = exports.InputTags = exports.Input = exports.ImageResizeButton = exports.ImageResize = exports.Highlight = exports.FormVisualizer = exports.FileUploader = exports.FilePreparer = exports.DropArea = exports.Compartilhar = exports.Collapse = exports.CartaoUsuario = exports.Calendar = exports.Cabecalho = exports.Button = exports.BarraFerramentas = exports.BarChart = exports.AutoComplete = exports.ArgousSimpleTable = exports.ArgousProgressBar = exports.ArgousPagination = exports.ArgousInput = exports.ArgousComplexTableToolbar = exports.ArgousComplexTableHead = exports.ArgousComplexTableBody = exports.ArgousComplexTable = exports.ArgousComplexPagination = exports.ArgousAvatar = exports.ArgousAction = exports.Alert = void 0;
-exports.Carousel = exports.Zoom = exports.TextToHtml = exports.UserCard = exports.HalfGauge = exports.PercentageDisplay = void 0;
+exports.UserCard = exports.HalfGauge = exports.PercentageDisplay = void 0;
 var Alert_1 = require("./Alert");
 Object.defineProperty(exports, "Alert", { enumerable: true, get: function () { return __importDefault(Alert_1).default; } });
 __exportStar(require("./Alert"), exports);
@@ -172,13 +172,3 @@ Object.defineProperty(exports, "HalfGauge", { enumerable: true, get: function ()
 __exportStar(require("./HalfGauge"), exports);
 var UserCard_1 = require("./UserCard");
 Object.defineProperty(exports, "UserCard", { enumerable: true, get: function () { return __importDefault(UserCard_1).default; } });
-__exportStar(require("./UserCard"), exports);
-var TextToHtml_1 = require("./TextToHtml");
-Object.defineProperty(exports, "TextToHtml", { enumerable: true, get: function () { return __importDefault(TextToHtml_1).default; } });
-__exportStar(require("./TextToHtml"), exports);
-var Zoom_1 = require("./Zoom");
-Object.defineProperty(exports, "Zoom", { enumerable: true, get: function () { return __importDefault(Zoom_1).default; } });
-__exportStar(require("./Zoom"), exports);
-var Carousel_1 = require("./Carousel");
-Object.defineProperty(exports, "Carousel", { enumerable: true, get: function () { return __importDefault(Carousel_1).default; } });
-__exportStar(require("./Carousel"), exports);

package/lib/components/index.d.ts

@@ -157,13 +157,4 @@ export { default as HalfGauge } from './HalfGauge';
 export * from './HalfGauge';
 
 export { default as UserCard } from './UserCard';
-export * from './UserCard';
-
-export { default as TextToHtml } from './TextToHtml';
-export * from './TextToHtml';
-
-export { default as Zoom } from './Zoom';
-export * from './Zoom';
-
-export { default as Carousel } from './Carousel';
-export * from './Carousel';
+export * from './UserCard';

package/lib/components/index.js

@@ -154,14 +154,4 @@ export * from './PercentageDisplay';
 export { default as HalfGauge } from './HalfGauge';
 export * from './HalfGauge';
 
-export { default as UserCard } from './UserCard';
-export * from './UserCard';
-
-export { default as TextToHtml } from './TextToHtml';
-export * from './TextToHtml';
-
-export { default as Zoom } from './Zoom';
-export * from './Zoom';
-
-export { default as Carousel } from './Carousel';
-export * from './Carousel';
+export { default as UserCard } from './UserCard';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "argous",
-  "version": "1.2.217",
+  "version": "1.2.218",
   "description": "Argous.",
   "main": "lib/index.js",
   "author": "Carlos Schneider",
@@ -98,7 +98,6 @@
   "dependencies": {
     "highlight.js": "^10.7.1",
     "jquery": "^3.6.0",
-    "react-colorful": "^5.6.1",
     "react-date-range": "0.9.4",
     "react-paginate": "^7.1.2",
     "react-transition-group": "^4.4.1",

package/lib/components/Carousel/Carousel.d.ts

@@ -1,71 +0,0 @@
-export interface CarouselProps {
-  /**
-   * ID
-   */
-  id: string, 
-  /**
-   * Left icon
-   */
-  leftIcon?: SVGElement, 
-  /**
-   * Right icon
-   */
-  rightIcon?: SVGElement, 
-  /**
-   * Number to represent the icon size in pixels
-   */
-  iconSize?: number, 
-  /**
-   * Value of scroll sensitivity
-   */
-  scrollSensitivity?: number, 
-  /**
-   * Number to represent the item spacing in pixels
-   */
-  itemSpacing?: number, 
-  /**
-   * Show buttons
-   */
-  buttons?: boolean, 
-  /**
-   * Show indicator
-   */
-  indicator?: boolean, 
-  /**
-   * Number to represent the indicator size in pixels
-   */
-  indicatorSize?: number, 
-  /**
-   * Number to represent the indicator gap in pixels
-   */
-  indicatorGap?: number, 
-  /**
-   * Number to represent the indicator padding in pixels
-   */
-  indicatorPadding?: number, 
-  /**
-   * Style to carousel element
-   */
-  carouselStyle?: object, 
-  /**
-   * Css class to button element
-   */
-  buttonClassName?: string, 
-  /**
-   * Css class to indicator element
-   */
-  indicatorClassName?: string, 
-  /**
-   * Css class to current indicator element
-   */
-  currentIndicatorClassName?: string, 
-  /**
-   * Function called on click
-   */
-  onClick?: (event: Event) => void
-}
-
-
-declare function Carousel(props: CarouselProps) : JSX.Element
-
-export default Carousel;

package/lib/components/Carousel/Carousel.js

@@ -1,218 +0,0 @@
-import { makeStyles } from '@material-ui/core';
-import clsx from 'clsx';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { IoIosArrowBack, IoIosArrowForward } from 'react-icons/io';
-
-
-const useStyles = makeStyles(theme => ({
-  container: {
-    height: '100%',
-    width: '100%'
-  },
-  carouselContainer: {
-    width: '100%',
-    height: ({ indicator, indicatorPadding }) => (indicator) ? `calc(100% - ${indicatorPadding * 2}px)` : '100%',
-    minWidth: '100%',
-    display: 'flex',
-    alignItems: 'center'
-  },
-  carousel: {
-    width: '100%',
-    height: '100%',
-    margin: 'auto',
-    display: 'flex',
-    alignItems: 'center',
-    flexDirection: 'row',
-    overflow: 'hidden',
-    scrollBehavior: 'smooth',
-    '&>*:not(:last-child)': {
-      marginRight: ({ itemSpacing }) => (itemSpacing || '')
-    }
-  },
-  button: {
-    display: 'flex',
-    alignItems: 'center',
-    cursor: 'pointer',
-    border: 0,
-    padding: 0,
-    backgroundColor: '#0000',
-    color: (theme.palette.type === 'light') ? 'rgba(0, 0, 0, .4)' : 'rgba(255, 255, 255, .5)',
-    '&:hover': {
-      color: (theme.palette.type === 'light') ? 'rgba(0, 0, 0, .6)' : 'rgba(255, 255, 255, .8)'
-    },
-    '&:disabled': {
-      color: (theme.palette.type === 'light') ? 'rgba(0, 0, 0, .23)' : 'rgba(255, 255, 255, .3)',
-      backgroundColor: 'transparent',
-      cursor: 'default',
-      pointerEvents: 'none'
-    }
-  },
-  leftButton: {
-    left: 0
-  },
-  rightButton: {
-    right: 0
-  },
-  indicator: {
-    display: 'flex',
-    flexWrap: 'wrap',
-    alignItems: 'center',
-    justifyContent: 'center',
-    gap: ({ indicatorGap }) => (indicatorGap || ''),
-    padding: ({ indicatorPadding, indicatorSize, iconSize }) => `${indicatorPadding - (indicatorSize / 2)}px ${iconSize}px`,
-    '& span': {
-      width: ({ indicatorSize }) => (indicatorSize || ''),
-      height: ({ indicatorSize }) => (indicatorSize || ''),
-      borderRadius: '50%',
-      backgroundColor: (theme.palette.type === 'light') ? 'rgba(0, 0, 0, .4)' : 'rgba(255, 255, 255, .5)',
-      transition: 'background-color 500ms'
-    }
-  },
-  currentIndicator: {
-    backgroundColor: (theme.palette.type === 'light') ? '#000 !important' : '#fff !important'
-  }
-}));
-
-
-const CAROUSEL_ID = 'carousel';
-
-const initialState = { 
-  position: 0, 
-  indicatorArray: [] 
-};
-
-
-const Carousel = ({ 
-  id, 
-  leftIcon: LEFT_ICON = IoIosArrowBack, 
-  rightIcon: RIGHT_ICON = IoIosArrowForward, 
-  iconSize = 20, 
-  scrollSensitivity = 2, 
-  itemSpacing = 6, 
-  children, 
-  buttons = true, 
-  indicator = false, 
-  indicatorSize = 6, 
-  indicatorGap = 10, 
-  indicatorPadding = 20, 
-  carouselStyle, 
-  onClick, 
-  buttonClassName, 
-  indicatorClassName, 
-  currentIndicatorClassName 
-}) => {
-
-  const classes = useStyles({ itemSpacing, indicator, indicatorSize, indicatorGap, indicatorPadding, iconSize });
-  const [state, setState] = useState(initialState);
-  const { position, indicatorArray } = state;
-  const carousel = useRef(null);
-  const childWidth = carousel.current?.children?.[0]?.offsetWidth;
-  const disabledButtonsRef = useRef(false);
-  const carouselId = (id) ? id : CAROUSEL_ID;
-  const leftButtonId = `${carouselId}-left-button`;
-  const rightButtonId = `${carouselId}-right-button`;
-
-  const logicSetState = ({ type, field, value }) => setState(states => ({ 
-    ...states, 
-    [type]: (type && field) ? { ...states[type], [field]: value } : value 
-  }));
-
-
-  const control = useCallback(e => {
-    if (disabledButtonsRef.current) return;
-
-    const childWidth = carousel.current?.children?.[0]?.offsetWidth;
-    const maxWidth = (childWidth * (carousel.current?.children?.length - 1));
-    const scrollLeft = carousel.current?.scrollLeft;
-    const leftButtonElement = document.getElementById(leftButtonId);
-    const rightButtonElement = document.getElementById(rightButtonId);
-    const childrenWidth = ((childWidth + itemSpacing) * carousel.current?.children?.length);
-    const childrenSmallerThanParent = (childrenWidth < carousel.current?.offsetWidth);
-
-    if (leftButtonElement) {
-      if ((scrollLeft === 0) || childrenSmallerThanParent) leftButtonElement.disabled = true;
-      else if (scrollLeft > 0) leftButtonElement.disabled = false;
-    }
-    if (rightButtonElement) {
-      if ((scrollLeft === maxWidth) || childrenSmallerThanParent) rightButtonElement.disabled = true;
-      else if (scrollLeft < maxWidth) rightButtonElement.disabled = false;
-    }
-
-    (position === children.length) && logicSetState({ type: 'position', value: (children.length - 1) });
-  }, [itemSpacing, leftButtonId, rightButtonId, position, children.length]);
-  useEffect(() => control(), [control]);
-  control();
-
-  const createIndicatorArray = useCallback(() => {
-    const childrenLength = carousel.current?.children?.length;
-    const newIndicatorArray = Array.from(Array(childrenLength).keys());
-    logicSetState({ type: 'indicatorArray', value: newIndicatorArray });
-  }, []);
-  useEffect(() => (indicator) && createIndicatorArray(), [indicator, children, createIndicatorArray]);
-
-  const handleCarouselClick = (e, direction) => {
-    if (!childWidth || (typeof childWidth !== 'number')) return;
-
-    let newPosition = position;
-    const scrollWidth = (childWidth * scrollSensitivity);
-    const leftButtonElement = document.getElementById(leftButtonId);
-    const rightButtonElement = document.getElementById(rightButtonId);
-
-    leftButtonElement.disabled = true;
-    rightButtonElement.disabled = true;
-    disabledButtonsRef.current = true;
-
-    if (direction === 'right') {
-      (carousel.current.scrollLeft += scrollWidth);
-      (position < (indicatorArray.length - 1)) && logicSetState({ type: 'position', value: (newPosition += 1) });
-    } else {
-      (carousel.current.scrollLeft -= scrollWidth);
-      (position > 0) && logicSetState({ type: 'position', value: (newPosition -= 1) });
-    }
-
-    (onClick && (typeof onClick === 'function')) && onClick(e);
-    setTimeout(() => {
-      leftButtonElement.disabled = false;
-      rightButtonElement.disabled = false;
-      disabledButtonsRef.current = false;
-      control();
-    }, ((childWidth <= 500) ? 500 : (childWidth * ((childWidth > 1000) ? 0.6 : 0.9)) || 500));
-  };
-
-
-  return <div id={carouselId} className={classes.container}>
-    <div className={classes.carouselContainer}>
-      {(buttons && LEFT_ICON) && (
-        <button id={leftButtonId} onClick={(e) => handleCarouselClick(e, 'left')} className={clsx(classes.button, classes.leftButton, buttonClassName)}>
-          <LEFT_ICON size={iconSize} className={classes.leftButton} />
-        </button>
-      )}
-      <div ref={carousel} style={{ ...carouselStyle }} className={classes.carousel}>
-        {children}
-      </div>
-      {(buttons && RIGHT_ICON) && (
-        <button id={rightButtonId} onClick={(e) => handleCarouselClick(e, 'right')} className={clsx(classes.button, classes.rightButton, buttonClassName)}>
-          <RIGHT_ICON size={iconSize} className={classes.rightButton} />
-        </button>
-      )}
-    </div>
-    {(indicator) && (
-      <div className={clsx(classes.indicator, indicatorClassName)}>
-        {indicatorArray.map((_, index) => (
-          <span 
-            key={`indicator-${index}`} 
-            className={
-              clsx({ 
-                [classes.currentIndicator]: (position === index), 
-                [currentIndicatorClassName]: (position === index) 
-              })
-            } 
-          />
-        ))}
-      </div>
-    )}
-  </div>;
-};
-
-
-export default Carousel;

package/lib/components/Carousel/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from './Carousel';
-export * from './Carousel';

package/lib/components/Carousel/index.js

@@ -1 +0,0 @@
-export { default } from './Carousel';

package/lib/components/TextToHtml/Cursor.js

@@ -1,24 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-
-
-const Cursor = ({ id, speed = 500, className }) => {
-
-  const cursorId = `${id}-cursor-component`;
-  const intervalIdRef = useRef(null);
-
-
-  useEffect(() => {
-    const cursorElement = document.getElementById(cursorId);
-    if (cursorElement) cursorElement.style.opacity = '1';
-    intervalIdRef.current = setInterval(() => {
-      if (cursorElement) cursorElement.style.opacity = (cursorElement.style.opacity === '0') ? '1' : '0';
-    }, speed);
-    return () => clearInterval(intervalIdRef.current);
-  });
-
-
-  return <span id={cursorId} className={`${className}`}>|</span>;
-};
-
-
-export default Cursor;

package/lib/components/TextToHtml/TextStyles.js

@@ -1,111 +0,0 @@
-import { ClickAwayListener, IconButton, makeStyles } from '@material-ui/core';
-import React, { useState } from 'react';
-import { RgbaColorPicker } from 'react-colorful';
-import { RiAlignCenter, RiAlignJustify, RiAlignLeft, RiAlignRight, RiFontColor, RiFontSize } from 'react-icons/ri';
-
-
-const ICON_SIZE = '2.5rem';
-const BOX_SHADOW = 'rgba(0, 0, 0, 0.3) 0px 1px 12px -2px';
-
-const useStyles = makeStyles(theme => ({
-  container: {
-    zIndex: 1,
-    position: 'absolute',
-    top: 0,
-    right: 0,
-    display: 'flex',
-    alignItems: 'flex-start',
-    justifyContent: 'flex-end',
-    gap: ({ defaultSpacing }) => (defaultSpacing) ? defaultSpacing : ''
-  },
-  button: {
-    padding: ({ defaultSpacing }) => (defaultSpacing) ? (defaultSpacing / 2) : '',
-    color: `rgba(${(theme.palette.type === 'light') ? '0, 0, 0' : '255, 255, 255'}, .7)`,
-    backgroundColor: `rgba(${(theme.palette.type === 'light') ? '255, 255, 255' : '0, 0, 0'}, .5)`,
-    '&:hover': {
-      backgroundColor: `rgba(${(theme.palette.type === 'light') ? '255, 255, 255' : '0, 0, 0'}, .7)`
-    }
-  },
-  colorPickerContainer: {
-    zIndex: 2,
-    position: 'absolute',
-    padding: '2rem'
-  },
-  colorPickerBoxShadow: {
-    borderRadius: 8,
-    webKitBoxShadow: BOX_SHADOW,
-    mozBoxShadow: BOX_SHADOW,
-    boxShadow: BOX_SHADOW
-  }
-}));
-
-
-const initialStateOpen = {
-  colorPicker: undefined
-};
-
-const initialState = {
-  open: initialStateOpen
-};
-
-
-const TextStyles = ({ color, setColor, defaultSpacing, toggleClickAway, handleFontSizeChange, textAlign, handleTextAlignChange }) => {
-
-  const classes = useStyles({ defaultSpacing });
-  const [state, setState] = useState(initialState);
-  const { open } = state;
-
-  const logicSetState = (type, field, value) => setState(values => ({ 
-    ...values, 
-    [type]: (type && field) ? { ...values[type], [field]: value } : value 
-  }));
-
-  const handleColorPickerOpen = e => {
-    toggleClickAway();
-    const elRect = e.target.parentElement.getBoundingClientRect();
-    logicSetState('open', 'colorPicker', elRect);
-  };
-
-  const handleColorPickerClose = e => {
-    toggleClickAway();
-    logicSetState('open', 'colorPicker', undefined);
-  };
-
-
-  return <div className={classes.container}>
-    <IconButton onClick={handleTextAlignChange} onTouchStart={handleTextAlignChange} className={classes.button}>
-      {(() => {
-        switch (textAlign) {
-          case 'start':
-            return <RiAlignLeft size={ICON_SIZE} />;
-          case 'end':
-            return <RiAlignRight size={ICON_SIZE} />;
-          case 'center':
-            return <RiAlignCenter size={ICON_SIZE} />;
-          case 'justify':
-            return <RiAlignJustify size={ICON_SIZE} />;
-          default:
-            return null;
-        }
-      })()}
-    </IconButton>
-    <IconButton onClick={handleColorPickerOpen} onTouchStart={handleColorPickerOpen} className={classes.button}>
-      <RiFontColor size={ICON_SIZE} />
-    </IconButton>
-    <IconButton onClick={handleFontSizeChange} onTouchStart={handleFontSizeChange} className={classes.button}>
-      <RiFontSize size={ICON_SIZE} />
-    </IconButton>
-    {(!!open.colorPicker) && (
-      <ClickAwayListener disableReactTree onClickAway={handleColorPickerClose}>
-        <div className={classes.colorPickerContainer}>
-          <div className={classes.colorPickerBoxShadow}>
-            <RgbaColorPicker color={color} onChange={setColor} />
-          </div>
-        </div>
-      </ClickAwayListener>
-    )}
-  </div>;
-};
-
-
-export default TextStyles;

package/lib/components/TextToHtml/TextToHtml.d.ts

@@ -1,38 +0,0 @@
-export interface TextToHtmlInitialValue { 
-  text?: string, 
-  cssText?: string 
-}
-
-export interface TextToHtmlProps {
-  /**
-   * Object containing properties to use as initial value
-   */
-  initialValue?: TextToHtmlInitialValue, 
-  /**
-   * Function called on change
-   * @param htmlString 
-   * @returns 
-   */
-  onChange?: (htmlString: string) => void, 
-  /**
-   * Function called on delete
-   * @param event 
-   * @param deleted 
-   * @param newCharacters 
-   * @returns 
-   */
-  onDelete?: (event: Event, deleted: object, newCharacters: Array<object>) => void, 
-  /**
-   * Number to represent the default spacing in pixels
-   */
-  defaultSpacing?: number, 
-  /**
-   * Function called to set external values
-   */
-  setExternalValues?: (state: object) => void
-}
-
-
-declare function TextToHtml(props: TextToHtmlProps) : JSX.Element
-
-export default TextToHtml;