argous 1.2.245 → 1.2.247

package/lib/components/BarraFerramentas/BarraFerramentas.js

@@ -1,16 +1,20 @@
 import { Compartilhar } from '..';
 import ThreadLog from '../../components/ThreadLog';
 import { usePrevious } from '../../utils';
-import { Box, CircularProgress, ClickAwayListener, Collapse, Divider, IconButton, makeStyles, MenuItem, MenuList, Paper, Popper, Toolbar, Tooltip, Typography, withStyles } from '@material-ui/core';
-import clsx from 'clsx';
-import { isArray, isNumber, isString, isEqual, isFunction } from 'lodash';
+import { TAB_ACTIVE_INDEX, TAB_ALIAS_INDEX, TAB_ICON_INDEX, TAB_LABEL_INDEX } from '../Programa/TabNavigationRail';
+import { Box, CircularProgress, ClickAwayListener, Collapse, Divider, IconButton, ListItemIcon, ListItemText, makeStyles, MenuItem, MenuList, Paper, Popper, Toolbar, Tooltip, Typography, useMediaQuery, useTheme, withStyles } from '@material-ui/core';
+import { isArray, isNumber, isEqual, isFunction } from 'lodash';
 import PropTypes from 'prop-types';
 import React, { useEffect, useRef, useState } from 'react';
 import { AiOutlineAppstoreAdd } from 'react-icons/ai';
 import { FaStar } from 'react-icons/fa';
+import { IoSettings } from 'react-icons/io5';
 import { MdShare, MdFormatListBulleted, MdArrowBack, MdEdit, MdDelete, MdSave, MdKeyboardArrowRight, MdFirstPage, MdKeyboardArrowLeft, MdLastPage, MdEditNote } from 'react-icons/md';
 
 
+const TAB_ICON_SIZE = 20;
+
+
 const useStyles = makeStyles(theme => ({
   root: {
     zIndex: 0,
@@ -98,14 +102,20 @@ function BarraFerramentas ({
   addWidget = () => '',
   snAnotacaoPrograma = false,
   openAnnotations = () => '',
-  toolbarLoading = {}
+  toolbarLoading = {},
+  selectedTab = [],
+  setSelectedTab = () => ''
 }) {
 
+  const theme = useTheme();
   const classes = useStyles({ habNavegador });
+  const xs = useMediaQuery(theme.breakpoints.only('xs'));
+
   const anchorMenu = useRef(null);
   const anchorCompartilhar = useRef(null);
+  const setSelectedTabRef = useRef(setSelectedTab);
+
   const [open, setOpen] = useState(false);
-  const [abaAtual, setAbaAtual] = useState(undefined);
   const [habEditar, setHabEditar] = useState(true);
   const [habSalvar, setHabSalvar] = useState(false);
   const [habExcluir, setHabExcluir] = useState(false);
@@ -117,13 +127,18 @@ function BarraFerramentas ({
   }, [open]);
 
   const previousAbas = usePrevious(abas);
+
   useEffect(() => {
+
     if (isEqual(abas, previousAbas)) return;
-    if (!abas.length) setAbaAtual(undefined);
-    else for (let i = 0; i < abas?.length; i++) {
+    if (!abas?.length) {
+      if (typeof setSelectedTabRef.current === 'function') setSelectedTabRef.current([]);
+    } else for (let i = 0; i < abas?.length; i++) {
+
       const aba = abas[i];
-      if (aba[1] === 'active') {
-        setAbaAtual(aba[0]);
+
+      if (aba[TAB_ACTIVE_INDEX] === 'active') {
+        if (typeof setSelectedTabRef.current === 'function') setSelectedTabRef.current(aba);
         break;
       }
     }
@@ -144,10 +159,16 @@ function BarraFerramentas ({
     setOpenCompartilhar(false);
   };
 
-  const selecionaAba = (index, item, alias) => event => {
+  const selecionaAba = (index, tab) => (event) => {
+
+    const alias = tab?.[TAB_ALIAS_INDEX];
+
     if (anchorMenu.current && anchorMenu?.current?.contains(event.target)) return;
-    if (isString(item)) setAbaAtual(item);
+    if (typeof setSelectedTabRef.current === 'function') {
+      if (tab?.length) setSelectedTabRef.current(tab);
+    }
     if (isNumber(index)) executaFuncao(alias || `T${index}`);
+
     setOpen(false);
   };
 
@@ -178,9 +199,10 @@ function BarraFerramentas ({
     );
   };
 
+
   return <>
-    <Toolbar className={classes.root} /*disableGutters*/ variant='dense'>
-      {(isArray(abas) && abas.length > 0) && (
+    <Toolbar className={classes.root} variant='dense'>
+      {(xs && isArray(abas) && (abas?.length > 0)) && (
         <IconButton id='botaoAbasBarraFerramentas' ref={anchorMenu} onClick={toggleAbas} className={classes.menuButton}>
           <MdFormatListBulleted />
         </IconButton>
@@ -188,12 +210,34 @@ function BarraFerramentas ({
       <Popper open={open} anchorEl={anchorMenu.current} role={undefined} transition keepMounted style={{ zIndex: 2, marginLeft: 10 }}>
         {({ TransitionProps }) => (
           <Collapse in={TransitionProps.in} timeout={100}>
-            <Paper style={{ maxHeight: '80vh', overflowY: 'auto' }}>
+            <Paper elevation={6} style={{ maxHeight: '80vh', overflowY: 'auto' }}>
               <ClickAwayListener onClickAway={selecionaAba()}>
                 <MenuList autoFocusItem={open} onKeyDown={handleListKeyDown}>
-                  {isArray(abas) && abas.map((item, key) => (
-                    <MenuItem className={clsx({ [classes.menuSelected]: abaAtual === item[0] })} key={key} onClick={selecionaAba(key, item[0], item[2])}>{item[0]}</MenuItem>
-                  ))}
+                  {(isArray(abas)) && abas.map((item, key) => {
+
+                    const Icon = item?.[TAB_ICON_INDEX];
+
+
+                    return (
+                      <MenuItem 
+                        key={key} 
+                        onClick={selecionaAba(key, item)} 
+                        selected={isEqual(item, selectedTab)}
+                      >
+                        <ListItemIcon>
+                          {(Icon) && (
+                            <Icon size={TAB_ICON_SIZE} />
+                          )}
+                          {(!Icon) && (
+                            <IoSettings size={TAB_ICON_SIZE} />
+                          )}
+                        </ListItemIcon>
+                        <ListItemText>
+                          {item?.[TAB_LABEL_INDEX]}
+                        </ListItemText>
+                      </MenuItem>
+                    );
+                  })}
                 </MenuList>
               </ClickAwayListener>
             </Paper>
@@ -201,8 +245,8 @@ function BarraFerramentas ({
         )}
       </Popper>
       <Typography component='div' variant='h6' className={classes.title}>
-        {(abaAtual) ? (
-          <Typography variant='subtitle1'>{abaAtual} <Typography variant='caption'>( {titulo} )</Typography></Typography>
+        {(selectedTab?.length) ? (
+          <Typography variant='subtitle1'>{selectedTab?.[TAB_LABEL_INDEX]} <Typography variant='caption'>( {titulo} )</Typography></Typography>
         ) : (
           <Typography variant='subtitle1'>{titulo}</Typography>
         )}

package/lib/components/Programa/Programa.d.ts

@@ -1,6 +1,8 @@
+import { TabArray } from './Tab';
 import { BoxProps } from '@material-ui/core';
 import * as React from 'react';
 
+
 export interface ProgramaProps extends BoxProps {
   code: string,
   children: React.ReactNode,
@@ -12,7 +14,20 @@ export interface ProgramaProps extends BoxProps {
   hideTitle: boolean, 
   programDidMount: () => void,
   bfHabNavegador: boolean,
-  bfAbas: Array<any>,
+  /**
+   * Abas para a barra de ferramentas
+   * 
+   * Array de arrays
+   * 
+   * Array da aba: [('Label' || undefined), ('active' || undefined), ('alias' || undefined), (Icon || undefined)]
+   * 
+   * - [0] Label: Rótulo da aba.
+   * - [1] Active: Quando 'active' inicia o programa com essa aba selecionada.
+   * - [2] Alias: O nome que será recebido na função 'bfExecutaFuncao'. Caso não forneça esse nome a função retorna 'T[index]'.
+   * - [3] Icon: JSX do ícone da aba.
+   * 
+   */
+  bfAbas?: Array<TabArray>,
   bfFerramentas: Array<any>,
   bfExecutaFuncao: (prm: string) => void,
   bfNmFuncaoVoltar: string,

package/lib/components/Programa/Programa.js

@@ -1,8 +1,10 @@
 import BarraFerramentas from './../BarraFerramentas';
 import PageCodeEasterEgg from './PageCodeEasterEgg';
+import TabNavigationRail from './TabNavigationRail';
 import * as argous from '../../actions';
 import { getProgram, toggleFavorite } from '../../api';
-import { Box, CircularProgress, Paper, Typography, useTheme } from '@material-ui/core';
+import { Box, CircularProgress, Paper, Typography, useMediaQuery, useTheme } from '@material-ui/core';
+import { isArray } from 'lodash';
 import PropTypes from 'prop-types';
 import React, { useEffect, useState } from 'react';
 import { FaExclamationTriangle } from 'react-icons/fa';
@@ -53,11 +55,25 @@ function Programa({
 }) {
 
   const theme = useTheme();
+  const xs = useMediaQuery(theme.breakpoints.only('xs'));
+
   const [programa, setPrograma] = useState({});
+  const [selectedTab, setSelectedTab] = useState([]);
   const [favoriteAnimationInsert, setFavoriteAnimationInsert] = useState(false);
   const [favoriteAnimationRemove, setFavoriteAnimationRemove] = useState(false);
   const [toolbarLoading/*, setToolbarLoading*/] = useState(initialStateToolbarLoading);
 
+  const tabNavigationRailRule = (!xs && isArray(bfAbas) && (bfAbas?.length > 1));
+
+  const styles = { 
+    bodyContainer: { 
+      display: 'flex', 
+      gap: 10 
+    }, 
+    childrenContainer: { 
+      width: (tabNavigationRailRule) ? 'calc(100% - 58px)' : '100%' 
+    } 
+  };
 
   useEffect(() => {
     (async () => {
@@ -139,7 +155,15 @@ function Programa({
           favoriteAnimationRemove={favoriteAnimationRemove}
           threads={threads}
           currentProgram={code}
-          {...{ addWidget, habWidget, snAnotacaoPrograma, openAnnotations, toolbarLoading }}
+          {...{ 
+            addWidget, 
+            habWidget, 
+            snAnotacaoPrograma, 
+            openAnnotations, 
+            toolbarLoading, 
+            selectedTab, 
+            setSelectedTab 
+          }} 
         />
         {dsErro ? (
           <Box textAlign='center' >
@@ -150,7 +174,20 @@ function Programa({
           <Box position='relative' top={20} left='50%' z-index={20} height={80} width={0} marginLeft='-20px'>
             <CircularProgress disableShrink/>
           </Box>
-        ) : children}
+        ) : (
+          <div style={styles.bodyContainer}>
+            {(tabNavigationRailRule) && (
+              <TabNavigationRail 
+                tabs={bfAbas} 
+                executesFunction={bfExecutaFuncao} 
+                {...{ selectedTab, setSelectedTab }} 
+              />
+            )}
+            <div style={styles.childrenContainer}>
+              {children}
+            </div>
+          </div>
+        )}
       </Paper>
       <PageCodeEasterEgg {...{ code }} />
     </Box>

package/lib/components/Programa/Tab.ts

@@ -0,0 +1,6 @@
+export interface TabArray { 
+  [0]: (string | undefined), 
+  [1]?: (string | undefined), 
+  [2]?: (string | undefined), 
+  [3]?: (JSX.Element | undefined) 
+}

package/lib/components/Programa/TabNavigationRail.js

@@ -0,0 +1,118 @@
+import { usePrevious } from '../../utils';
+import { alpha, IconButton, Paper, Tooltip, useTheme } from '@material-ui/core';
+import { isArray, isEqual, isNumber } from 'lodash';
+import React, { useEffect, useRef } from 'react';
+import { IoSettings } from 'react-icons/io5';
+
+
+export const TAB_LABEL_INDEX = 0;
+export const TAB_ACTIVE_INDEX = 1;
+export const TAB_ALIAS_INDEX = 2;
+export const TAB_ICON_INDEX = 3;
+
+const BUTTON_SIZE = 36;
+
+
+const TabNavigationRail = ({ 
+  tabs = [], 
+  selectedTab = [], 
+  setSelectedTab = () => '', 
+  executesFunction = () => '' 
+}) => {
+
+  const selectedTabRef = useRef(selectedTab);
+  const setSelectedTabRef = useRef(setSelectedTab);
+
+  const theme = useTheme();
+
+  const styles = { 
+    rail: { 
+      display: 'flex', 
+      flexDirection: 'column', 
+      alignItems: 'center', 
+      height: 'fit-content', 
+      gap: 5, 
+      padding: 5, 
+      borderRadius: 10, 
+      border: `1px solid ${theme.palette.divider}`, 
+      backgroundColor: theme.palette.background.paper 
+    }, 
+    button: { 
+      width: BUTTON_SIZE, 
+      height: BUTTON_SIZE, 
+      borderRadius: 5, 
+      color: theme.palette.text.secondary, 
+      border: '1px solid transparent', 
+      transition: 'color 100ms ease-in-out, border-color 100ms ease-in-out, background-color 100ms ease-in-out' 
+    }, 
+    activeButton: { 
+      color: theme.palette.primary.main, 
+      border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`, 
+      backgroundColor: alpha(theme.palette.primary.main, 0.1) 
+    }, 
+    icon: { 
+      fontSize: 20 
+    } 
+  };
+
+  const previousTabs = usePrevious(tabs);
+
+  useEffect(() => {
+
+    if (isEqual(tabs, previousTabs) || !!selectedTabRef.current?.length) return;
+    if (!tabs?.length) {
+      if (typeof setSelectedTabRef.current === 'function') setSelectedTabRef.current([]);
+    } else for (let index = 0; index < tabs?.length; index++) {
+
+      const tab = tabs[index];
+
+      if (tab?.[TAB_ACTIVE_INDEX] === 'active') {
+        if (typeof setSelectedTabRef.current === 'function') setSelectedTabRef.current(tab);
+        break;
+      }
+    }
+  }, [tabs, previousTabs]);
+
+  const navigate = (event, index, tab) => {
+
+    const alias = tab?.[TAB_ALIAS_INDEX];
+
+    if (typeof setSelectedTabRef.current === 'function') setSelectedTabRef.current(tab);
+    if (isNumber(index)) executesFunction(alias || `T${index}`);
+  };
+
+
+  return (
+    <Paper component='nav' elevation={1} style={styles.rail}>
+      {(isArray(tabs)) && tabs.map((tab, tabIndex) => {
+
+        const label = tab?.[TAB_LABEL_INDEX];
+        const Icon = tab?.[TAB_ICON_INDEX];
+        const active = isEqual(tab, selectedTab);
+
+
+        return (
+          <Tooltip key={label} title={label} placement='right'>
+            <IconButton 
+              size='small' 
+              aria-label={label} 
+              aria-current={(active) ? 'page' : undefined} 
+              onClick={(event) => navigate(event, tabIndex, tab)} 
+              style={{ ...styles.button, ...((active) ? styles.activeButton : {}) }}
+            >
+              {(Icon) && (
+                <Icon style={styles.icon} />
+              )}
+              {(!Icon) && (
+                <IoSettings style={styles.icon} />
+              )}
+            </IconButton>
+          </Tooltip>
+        );
+      })}
+    </Paper>
+  );
+};
+
+
+export default TabNavigationRail;

package/lib/utils/index.ts

@@ -477,91 +477,3 @@ export const numbersOnly = (value: string, type: string) => value ? value.replac
 export const lettersOnly = (valor: string) => valor ? valor.replace(/\W/g, '') : '';
 
 export const numbersLettersOnly = (valor: string) => valor ? valor.replace(/[^a-zA-Z0-9]+/g, '') : '';
-
-//  REMOVER
-// export const documentType = { 
-//   cpf: { 
-//     length: 11, 
-//     symbols: { 
-//       length: 3 
-//     }, 
-//     lengthWithSymbols: 14 
-//   }, 
-//   cnpj: { 
-//     length: 14, 
-//     symbols: { 
-//       length: 4 
-//     }, 
-//     lengthWithSymbols: 18 
-//   }, 
-//   rg: { 
-//     length: 10, 
-//     symbols: { 
-//       length: 0 
-//     }, 
-//     lengthWithSymbols: 10 
-//   }, 
-//   cnes: { 
-//     length: 7 
-//   }, 
-//   crm: { 
-//     length: 6 
-//   }, 
-//   unimedCard: { 
-//     length: 17 
-//   }, 
-//   cep: { 
-//     length: 8, 
-//     symbols: { 
-//       length: 1 
-//     }, 
-//     lengthWithSymbols: 9 
-//   }, 
-//   telephone: { 
-//     length: 11, 
-//     symbols: { 
-//       length: 2 
-//     }, 
-//     lengthWithSymbols: 13 
-//   } 
-// };
-
-
-// export const formatCpfCnpj = (value: (string|number)) => {
-//   if (!value) return '';
-//   if (isNumber(value)) value = value.toString();
-//   value = value.replace(/[^\d]/g, '');
-//   const valueLen = value.length;
-//   if (valueLen > 3 && valueLen < 7) value = `${value.substring(0, 3)}.${value.substring(3)}`;
-//   else if (valueLen > 6 && valueLen < 10) value = `${value.substring(0, 3)}.${value.substring(3, 6)}.${value.substring(6)}`;
-//   else if (valueLen > 8 && valueLen < 12) value = `${value.substring(0, 3)}.${value.substring(3, 6)}.${value.substring(6, 9)}-${value.substring(9)}`;
-//   else if (valueLen > 11 && valueLen < 13) value = `${value.substring(0, 2)}.${value.substring(2, 5)}.${value.substring(5, 8)}/${value.substring(8)}`;
-//   else if (valueLen > 12) value = `${value.substring(0, 2)}.${value.substring(2, 5)}.${value.substring(5, 8)}/${value.substring(8, 12)}-${value.substring(12, 14)}`;
-//   return value;
-// };
-
-// export const formataCpf = (value: string) => value?.replace(/[^\d]/, '').replace(/^(.{3})(.{3})(.{3})(.{2})$/, '$1.$2.$3-$4');
-
-// export function cpfTest(cpf: (string|number)) {
-
-//   if (typeof cpf === 'number') cpf = cpf.toString();
-//   if (!cpf || allCharactersSame(cpf)) return false;
-
-//   let sum = 0;
-//   let rest: number;
-
-//   for (let index = 1; index <= 9; index++) sum += (parseInt(cpf.substring(index - 1, index)) * (11 - index));
-//   rest = ((sum * 10) % 11);
-
-//   if ((rest === 10) || (rest === 11)) rest = 0;
-//   if (rest !== parseInt(cpf.substring(9, 10))) return false;
-
-//   sum = 0;
-//   for (let index = 1; index <= 10; index++) sum += (parseInt(cpf.substring(index - 1, index)) * (12 - index));
-//   rest = ((sum * 10) % 11);
-
-//   if ((rest === 10) || (rest === 11)) rest = 0;
-//   if (rest !== parseInt(cpf.substring(10, 11))) return false;
-
-//   return true;
-// }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "argous",
-  "version": "1.2.245",
+  "version": "1.2.247",
   "description": "Argous.",
   "main": "lib/index.js",
   "author": "Carlos Schneider",
@@ -105,6 +105,6 @@
     "react-paginate": "^7.1.2",
     "react-transition-group": "^4.4.1",
     "smooth-dnd": "^0.12.1",
-    "typescript": "4.2.3"
+    "typescript": "4.9.5"
   }
 }

package/lib/components/Editor/tinymce/README.md

@@ -1,73 +0,0 @@
-# TinyMCE
-
-The world's #1 open source rich text editor.
-
-**Using an old version of TinyMCE?** We recommend you to upgrade to TinyMCE 6 to continue receiving security updates, or consider [TinyMCE 5 LTS](https://www.tiny.cloud/long-term-support/) if you need more time to upgrade.
-
-Used and trusted by millions of developers, TinyMCE is the world’s most customizable, scalable, and flexible rich text editor. We’ve helped launch the likes of Atlassian, Medium, Evernote (and lots more that we can’t tell you), by empowering them to create exceptional content and experiences for their users.
-
-With more than 350M+ downloads every year, we’re also one of the most trusted enterprise-grade open source HTML editors on the internet. There’s currently more than 100M+ products worldwide, powered by Tiny. As a high powered WYSIWYG editor, TinyMCE is built to scale, designed to innovate, and thrives on delivering results to difficult edge-cases.
-
-You can access a [full featured demo of TinyMCE](https://www.tiny.cloud/docs/tinymce/6/premium-full-featured/) in the docs on the TinyMCE website.
-
-<p align="center">
-  <img alt="Screenshot of the TinyMCE Editor" src="https://www.tiny.cloud/storage/github-readme-images/tinymce-editor-6x.png"\>
-</p>
-
-## Get started with TinyMCE
-
-Getting started with the TinyMCE rich text editor is easy, and for simple configurations can be done in less than 5 minutes.
-
-[TinyMCE Cloud Deployment Quick Start Guide](https://www.tiny.cloud/docs/tinymce/6/cloud-quick-start/)
-
-[TinyMCE Self-hosted Deployment Guide](https://www.tiny.cloud/docs/tinymce/6/npm-projects/)
-
-TinyMCE provides a range of configuration options that allow you to integrate it into your application. Start customizing with a [basic setup](https://www.tiny.cloud/docs/tinymce/6/basic-setup/).
-
-Configure it for one of three modes of editing:
-
-- [TinyMCE classic editing mode](https://www.tiny.cloud/docs/tinymce/6/use-tinymce-classic/).
-- [TinyMCE inline editing mode](https://www.tiny.cloud/docs/tinymce/6/use-tinymce-inline/).
-- [TinyMCE distraction-free editing mode](https://www.tiny.cloud/docs/tinymce/6/use-tinymce-distraction-free/).
-
-## Features
-
-### Integration
-
-TinyMCE is easily integrated into your projects with the help of components such as:
-
-- [tinymce-react](https://github.com/tinymce/tinymce-react)
-- [tinymce-vue](https://github.com/tinymce/tinymce-vue)
-- [tinymce-angular](https://github.com/tinymce/tinymce-angular)
-
-With over 29 integrations, and 400+ APIs, see the TinyMCE docs for a full list of editor [integrations](https://www.tiny.cloud/docs/tinymce/6/integrations/).
-
-### Customization
-
-It is easy to [configure the UI](https://www.tiny.cloud/docs/tinymce/6/customize-ui/) of your rich text editor to match the design of your site, product or application. Due to its flexibility, you can [configure the editor](https://www.tiny.cloud/docs/tinymce/6/basic-setup/) with as much or as little functionality as you like, depending on your requirements.
-
-With [50+ powerful plugins available](https://www.tiny.cloud/tinymce/features/), and content editable as the basis of TinyMCE, adding additional functionality is as simple as including a single line of code.
-
-Realizing the full power of most plugins requires only a few lines more.
-
-### Extensibility
-
-Sometimes your editor requirements can be quite unique, and you need the freedom and flexibility to innovate. Thanks to TinyMCE being open source, you can view the source code and develop your own extensions for custom functionality to meet your own requirements.
-
-The TinyMCE [API](https://www.tiny.cloud/docs/tinymce/6/apis/tinymce.root/) is exposed to make it easier for you to write custom functionality that fits within the existing framework of TinyMCE [UI components](https://www.tiny.cloud/docs/tinymce/6/custom-ui-components/).
-
-### Extended Features and Support
-
-For the professional software teams that require more in-depth efficiency, compliance or collaborative features built to enterprise-grade standards, please [get in touch with our team](https://www.tiny.cloud/contact/).
-
-Tiny also offers dedicated SLAs and support for professional development teams.
-
-## Compiling and contributing
-
-In 2019 the decision was made to transition our codebase to a monorepo. For information on compiling and contributing, see: [contribution guidelines](https://github.com/tinymce/tinymce/blob/master/CONTRIBUTING.md).
-
-As an open source product, we encourage and support the active development of our software.
-
-## Want more information?
-
-Visit the [TinyMCE website](https://tiny.cloud/) and check out the [TinyMCE documentation](https://www.tiny.cloud/docs/).

package/lib/components/Editor/tinymce/langs/README.md

@@ -1,3 +0,0 @@
-This is where language files should be placed.
-
-Please DO NOT translate these directly, use this service instead: https://crowdin.com/project/tinymce