@grazziotin/react-components 1.0.0

package/dist/functions/mascaras/index.js

@@ -0,0 +1,381 @@
+/**
+ * Função para formatar um CPF ou CNPJ, adicionando as pontuações adequadas.
+ *
+ * @param {string} v - O valor do CPF ou CNPJ a ser formatado (como string ou number).
+ * @returns {string} O valor formatado com as pontuações de CPF ou CNPJ.
+ *
+ * @example
+ * const cpfCnpjFormatado = mascaradorCPFCNPJ('12345678901'); // Retorna '123.456.789-01'
+ * @author Flaviasoz, Nicolasfmc
+ * @version 1.6.0
+ */
+export var mascaradorCPFCNPJ = function (_a) {
+    var v = _a.v, autoComplete = _a.autoComplete, ignoreCNPJ = _a.ignoreCNPJ;
+    var value = v === null || v === void 0 ? void 0 : v.toString().replace(/\D/g, '');
+    if (!ignoreCNPJ) {
+        // Verifica se é um CPF (até 11 dígitos)
+        if ((value === null || value === void 0 ? void 0 : value.length) <= 11) {
+            var a = autoComplete ? value === null || value === void 0 ? void 0 : value.padStart(11, '0') : value;
+            return a
+                .replace(/(\d{3})(\d)/, '$1.$2')
+                .replace(/(\d{3})(\d)/, '$1.$2')
+                .replace(/(\d{3})(\d{1,2})$/, '$1-$2');
+        }
+        else {
+            // Se for um CNPJ
+            var a = autoComplete ? value === null || value === void 0 ? void 0 : value.padStart(14, '0') : value;
+            return a
+                .replace(/^(\d{2})(\d)/, '$1.$2')
+                .replace(/^(\d{2})\.(\d{3})(\d)/, '$1.$2.$3')
+                .replace(/\.(\d{3})(\d)/, '.$1/$2')
+                .replace(/(\d{4})(\d)/, '$1-$2');
+        }
+    }
+    else {
+        var a = autoComplete ? value === null || value === void 0 ? void 0 : value.padStart(11, '0') : value;
+        return a
+            .slice(0, 11)
+            .replace(/(\d{3})(\d)/, '$1.$2')
+            .replace(/(\d{3})(\d)/, '$1.$2')
+            .replace(/(\d{3})(\d{1,2})$/, '$1-$2');
+    }
+};
+/**
+ * Função para formatar um número de telefone, adicionando as pontuações adequadas.
+ *
+ * @param {string | number} v - O número de telefone a ser formatado (como string ou number).
+ * @returns {string} O número de telefone formatado com as pontuações adequadas.
+ *
+ * @example
+ * const telefoneFormatado = mascaradorTelefone('1234567890'); // Retorna '(12) 3456-7890'
+ * @author Flaviasoz
+ * @version 1.2.0
+ */
+export var mascaradorTelefone = function (v) {
+    v = v === null || v === void 0 ? void 0 : v.toString().replace(/\D/g, '');
+    if (v.length === 8) {
+        return v.replace(/(\d{4})(\d{4})/, '$1-$2');
+    }
+    else if (v.length === 9) {
+        return v.replace(/(\d{5})(\d{4})/, '$1-$2');
+    }
+    else if (v.length === 10) {
+        return v.replace(/(\d{2})(\d{4})(\d{4})/, '($1) $2-$3');
+    }
+    else if (v.length === 11) {
+        return v.replace(/(\d{2})(\d{5})(\d{4})/, '($1) $2-$3');
+    }
+    else if (v.length === 12) {
+        return v.replace(/(\d{2})(\d{2})(\d{4})(\d{4})/, '+$1 ($2) $3-$4');
+    }
+    else if (v.length === 13) {
+        return v.replace(/(\d{2})(\d{2})(\d{5})(\d{4})/, '+$1 ($2) $3-$4');
+    }
+    else {
+        return v;
+    }
+};
+/**
+ * Função para adicionar pontos de separação de milhar em um número.
+ *
+ * @param {string | number} valor - O valor numérico a ser formatado com pontos de separação de milhar.
+ * @returns {string} - O valor formatado com pontos de separação de milhar.
+ *
+ * @example
+ * const numeroFormatado = mascaradorMilhar(1234567); // Retorna '1.234.567'
+ * @author Flaviasoz
+ * @version 1.0.0
+ */
+export var mascaradorMilhar = function (valor) {
+    var _a;
+    return (_a = valor === null || valor === void 0 ? void 0 : valor.toString()) === null || _a === void 0 ? void 0 : _a.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
+};
+/**
+ * Função para adicionar pontos de separação de milhar e decimais em um número.
+ *
+ * @param {string | number} v - O valor numérico a ser formatado com pontos de separação de milhar.
+ * @returns {string} - O valor formatado com pontos de separação de milhar e duas casas decimais após a vírgula.
+ *
+ * @example
+ * const numeroFormatado = mascaradorMilharDecimal(1234567); // Retorna '1.234.567,00'
+ * @author Nicolasfmc
+ * @version 1.0.0
+ */
+export var mascaradorMilharDecimal = function (v) {
+    var res = '';
+    if (!v) {
+        v = 0;
+    }
+    res = v
+        .toLocaleString('pt-BR', {
+        style: 'currency',
+        currency: 'BRL',
+    })
+        .toString();
+    return res.replace('R$', '').trim();
+};
+/**
+ * Função para formatar um valor numérico como moeda brasileira (BRL).
+ *
+ * @param {string | number} v - O valor a ser formatado como moeda brasileira.
+ * @returns {string} O valor formatado como moeda brasileira (BRL), no formato de string.
+ * @example
+ * style: 'currency', // Estilo de formatação de moeda
+ *        currency: 'BRL',  // Tipo de moeda (Real brasileiro)
+ * const valorFormatado = mascaradorValorReal(12345.67); // Retorna 'R$ 12.345,67'
+ * @author Flaviasoz
+ * @version 1.0.0
+ */
+export var mascaradorValorReal = function (v) {
+    // Convertendo para um número, se for uma string
+    var valorNumerico = typeof v === 'string' ? parseFloat(v) : v !== null && v !== void 0 ? v : 0;
+    // Verificando se a conversão foi bem-sucedida
+    if (!isNaN(valorNumerico)) {
+        // Formatando o número como moeda
+        var valorFormatado = valorNumerico.toLocaleString('pt-BR', {
+            style: 'currency',
+            currency: 'BRL',
+        });
+        return valorFormatado;
+    }
+    else {
+        // Tratamento para casos em que a conversão não é bem-sucedida
+        return 'R$ 0,00';
+    }
+};
+/**
+ * Função para formatar uma data no formato 'YYYY-MM-DD' para 'DD/MM/YYYY'.
+ *
+ * @param {Date | string} data - A data a ser formatada (como objeto Date ou string).
+ * @returns {string} A data formatada no formato 'DD/MM/YYYY' ou '' se a entrada for inválida.
+ *
+ * @example
+ * const dataFormatada = formatarDataBR('2021-09-26'); // Retorna '26/09/2021'
+ * @author Flaviasoz
+ * @version 1.0.0
+ */
+export function formatarDataBR(data) {
+    var _a, _b, _c, _d;
+    var dataformata = (_d = (_c = (_b = (_a = data === null || data === void 0 ? void 0 : data.toString()) === null || _a === void 0 ? void 0 : _a.substring(0, 10)) === null || _b === void 0 ? void 0 : _b.split('-')) === null || _c === void 0 ? void 0 : _c.reverse()) === null || _d === void 0 ? void 0 : _d.join('/');
+    return dataformata || '';
+}
+/**
+ * Função para formatar uma data no formato 'yyyy-mm' e um dia para 'DD/MM/YYYY'.
+ *
+ * @param {string} anoMes - A string no formato 'yyyy-mm'.
+ * @param {string} [dia='01'] - A string representando o dia (opcional, padrão é '01' se não informado).
+ * @returns {string} A data formatada no formato 'DD/MM/YYYY' ou '' se a entrada for inválida.
+ *
+ * @example
+ * const dataFormatada = formatarMesAno('2023-01'); // Retorna '01/01/2023'
+ * const dataFormatadaComDia = formatarMesAno('2023-01', '10'); // Retorna '10/01/2023'
+ * @author Nicolasfmc
+ * @version 1.1.0
+ */
+export function formatarMesAno(anoMes, dia) {
+    if (dia === void 0) { dia = '01'; }
+    var ano = anoMes.substring(0, 4);
+    var mes = anoMes.substring(5, 7);
+    var diaFormatado = dia.padStart(2, '0');
+    return "".concat(diaFormatado, "/").concat(mes, "/").concat(ano);
+}
+/**
+ * Formata um valor numérico para uma string no formato de moeda brasileira (BRL).
+ *
+ * @param {string} v - Valor numérico a ser formatado.
+ * @returns {string} - Valor formatado como moeda brasileira.
+ * @example
+ * const valorFormatado = mascaradorInputMoeda('123456'); // Resultado: 'R$ 1.234,56'
+ * @author Flaviasoz
+ * @version 1.0.0
+ */
+export function mascaradorInputMoeda(v) {
+    var valor = v.replace(/\D/g, '');
+    // Formata para moeda
+    valor = (Number(valor) / 100).toLocaleString('pt-BR', {
+        style: 'currency',
+        currency: 'BRL',
+    });
+    return valor;
+}
+/**
+ * Converte uma string formatada como moeda brasileira para um número decimal.
+ *
+ * @param {string} valor - String no formato de moeda brasileira a ser convertida.
+ * @returns {number} - Valor convertido para número decimal.
+ * @example
+ * const valorDecimal = formatarInputMoedaFloat('R$1.234,56'); // Resultado: 1234.56
+ * @author Flaviasoz
+ * @version 1.0.0
+ */
+export function formatarInputMoedaFloat(valor) {
+    return parseFloat(valor.replace('R$', '').replaceAll('.', '').replace(',', '.'));
+}
+/**
+ * Função para formatar uma string numérica no formato '00.00.00.0.000'.
+ *
+ * @param {string} v - A string numérica a ser formatada.
+ * @returns {string} A string formatada no formato '00.00.00.0.000'.
+ * @example
+ * const stringFormatada = formatarStringNumerica('1234567890'); // Retorna '12.34.56.7.890'
+ * @author Nicolasfmc
+ * @version 1.0.0
+ */
+export function mascaradorCodItem(v) {
+    v = v === null || v === void 0 ? void 0 : v.replace(/\D/g, '');
+    if (v && (v === null || v === void 0 ? void 0 : v.length) < 10) {
+        v = v === null || v === void 0 ? void 0 : v.padEnd(10, '0');
+    }
+    return v === null || v === void 0 ? void 0 : v.replace(/(\d{2})(\d{2})(\d{2})(\d{1})(\d{3})/, '$1.$2.$3.$4.$5');
+}
+/**
+ * Função para formatar uma string numérica no formato dinâmico até '50.50.20.20.5.510'.
+ *
+ * @param {string} v - A string numérica a ser formatada.
+ * @returns {string} A string formatada dinamicamente conforme o número de dígitos.
+ * @example
+ * const stringFormatada = mascaradorCodItemRede('1010'); // Retorna '10.10'
+ * const stringFormatadaComNoveDigitos = mascaradorCodItemRede('505020205'); // Retorna '50.50.20.20.5'
+ * const stringFormatadaComDozeDigitos = mascaradorCodItemRede('505020205510'); // Retorna '50.50.20.20.5.510'
+ * @author Flaviasoz
+ * @version 1.0.1
+ */
+export function mascaradorCodItemRede(v) {
+    v = v.replace(/\D/g, ''); // Remove caracteres não numéricos
+    // Formatação dinâmica conforme o comprimento da string
+    if (v.length <= 2) {
+        return v;
+    }
+    else if (v.length <= 4) {
+        return v.replace(/(\d{2})(\d+)/, '$1.$2');
+    }
+    else if (v.length <= 6) {
+        return v.replace(/(\d{2})(\d{2})(\d+)/, '$1.$2.$3');
+    }
+    else if (v.length <= 8) {
+        return v.replace(/(\d{2})(\d{2})(\d{2})(\d+)/, '$1.$2.$3.$4');
+    }
+    else if (v.length === 9) {
+        return v.replace(/(\d{2})(\d{2})(\d{2})(\d{2})(\d+)/, '$1.$2.$3.$4.$5');
+    }
+    else if (v.length <= 11) {
+        return v.replace(/(\d{2})(\d{2})(\d{2})(\d{2})(\d{1})(\d+)/, '$1.$2.$3.$4.$5.$6');
+    }
+    else {
+        return v.replace(/(\d{2})(\d{2})(\d{2})(\d{2})(\d{1})(\d{3})/, '$1.$2.$3.$4.$5.$6');
+    }
+}
+/**
+ * Formata uma data para uma string no formato 'dia de mês de ano, hora'.
+ *
+ * @param {Date} data - A data a ser formatada.
+ * @returns {string} A data formatada no formato 'dia de mês de ano, hora'.
+ * @author Flaviasoz
+ */
+export function formatarDataParaString(data) {
+    var diasSemana = [
+        'Domingo',
+        'Segunda-feira',
+        'Terça-feira',
+        'Quarta-feira',
+        'Quinta-feira',
+        'Sexta-feira',
+        'Sábado',
+    ];
+    var meses = [
+        'Janeiro',
+        'Fevereiro',
+        'Março',
+        'Abril',
+        'Maio',
+        'Junho',
+        'Julho',
+        'Agosto',
+        'Setembro',
+        'Outubro',
+        'Novembro',
+        'Dezembro',
+    ];
+    var diaSemana = diasSemana[data.getDay()];
+    var dia = data.getDate();
+    var mes = meses[data.getMonth()];
+    var ano = data.getFullYear();
+    var hora = data.toLocaleTimeString('pt-BR', {
+        hour: '2-digit',
+        minute: '2-digit',
+    });
+    var dataFormatada = "".concat(diaSemana, ", ").concat(dia, " de ").concat(mes, " de ").concat(ano, ", ").concat(hora);
+    return dataFormatada;
+}
+export function mascararCPF(_a) {
+    var cpfCnpj = _a.cpfCnpj, _b = _a.autoComplete, autoComplete = _b === void 0 ? false : _b;
+    var value = cpfCnpj === null || cpfCnpj === void 0 ? void 0 : cpfCnpj.toString().replace(/\D/g, '');
+    var mask = autoComplete ? value === null || value === void 0 ? void 0 : value.padStart(11, '0') : value;
+    return mask
+        .replace(/(\d{3})(\d)/, '$1.$2')
+        .replace(/(\d{3})(\d)/, '$1.$2')
+        .replace(/(\d{3})(\d{1,2})$/, '$1-$2');
+}
+/**
+ * Mascara um CNPJ, adicionando pontos, barra e traço.
+ *
+ * @param {string} cnpj - O CNPJ a ser mascarado.
+ * @param {boolean} autoComplete - Indica se deve completar com zeros à esquerda.
+ * @returns {string} O CNPJ mascarado.
+ */
+export function mascararCNPJ(_a) {
+    var cpfCnpj = _a.cpfCnpj, _b = _a.autoComplete, autoComplete = _b === void 0 ? false : _b;
+    var value = cpfCnpj === null || cpfCnpj === void 0 ? void 0 : cpfCnpj.toString().replace(/\D/g, '');
+    var mask = autoComplete ? value === null || value === void 0 ? void 0 : value.padStart(14, '0') : value;
+    return mask
+        .replace(/^(\d{2})(\d)/, '$1.$2')
+        .replace(/^(\d{2})\.(\d{3})(\d)/, '$1.$2.$3')
+        .replace(/\.(\d{3})(\d)/, '.$1/$2')
+        .replace(/(\d{4})(\d)/, '$1-$2');
+}
+export function formatValuesToMoney(obj, fieldsToFormat) {
+    if (Array.isArray(obj)) {
+        return obj.map(function (item) { return formatValuesToMoney(item, fieldsToFormat); });
+    }
+    else if (typeof obj === 'object' && obj !== null) {
+        var newObj = {};
+        for (var key in obj) {
+            if (Object.hasOwn(obj, key)) {
+                if (fieldsToFormat.includes(key)) {
+                    var value = obj[key];
+                    if (typeof value === 'number') {
+                        newObj[key] = mascaradorInputMoeda(String(value.toFixed(2)));
+                    }
+                    else if (typeof value === 'string') {
+                        var numericValue = parseFloat(value.replace(/[^\d.-]+/g, ''));
+                        newObj[key] = isNaN(numericValue)
+                            ? value
+                            : mascaradorInputMoeda(String(numericValue.toFixed(2)));
+                    }
+                    else {
+                        newObj[key] = formatValuesToMoney(value, fieldsToFormat);
+                    }
+                }
+                else {
+                    newObj[key] = formatValuesToMoney(obj[key], fieldsToFormat);
+                }
+            }
+        }
+        return newObj;
+    }
+    else {
+        return obj;
+    }
+}
+export function limitDecimais(value, limit) {
+    value = value.replace(/[^\d.]/g, '').replace(',', '.');
+    var parts = value.split('.');
+    var oldVal = value;
+    if (parts.length > 2) {
+        return oldVal.slice(0, oldVal.length - 1);
+    }
+    if (parts.length > 1 && parts[1].length > limit) {
+        return oldVal.slice(0, oldVal.length - (parts[1].length - limit));
+    }
+    return value;
+}

package/dist/hooks/index.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Gancho personalizado para tornar os árbitros com estado
+ *
+ * @example
+ * ```ts
+ *  const [inputRef, setInputRef] = useStateRef<HTMLInputElement | null>(null);
+ *
+ *  <input type = "text" ref = {setInputRef} />
+ * ```
+ * @version 1.0.0
+ * @ViniciusCLoeblein
+ */
+export declare function useStateRef<T>(initialValue: T): [T, (node: T) => void];
+/**
+ * usa a dimensão passada por props para saber se a tela é menor, se for retorna True
+ * @ViniciusCLoeblein @Flaviasoz
+ * @version 1.2.0
+ */
+export declare function useDimension(width: number): boolean;
+export declare const useWindowWidth: () => number;

package/dist/hooks/index.js

@@ -0,0 +1,49 @@
+import { useCallback, useEffect, useState } from 'react';
+/**
+ * Gancho personalizado para tornar os árbitros com estado
+ *
+ * @example
+ * ```ts
+ *  const [inputRef, setInputRef] = useStateRef<HTMLInputElement | null>(null);
+ *
+ *  <input type = "text" ref = {setInputRef} />
+ * ```
+ * @version 1.0.0
+ * @ViniciusCLoeblein
+ */
+export function useStateRef(initialValue) {
+    var _a = useState(initialValue), state = _a[0], setState = _a[1];
+    var setRef = useCallback(function (node) {
+        setState(node);
+    }, []);
+    return [state, setRef];
+}
+/**
+ * usa a dimensão passada por props para saber se a tela é menor, se for retorna True
+ * @ViniciusCLoeblein @Flaviasoz
+ * @version 1.2.0
+ */
+export function useDimension(width) {
+    var _a = useState(false), state = _a[0], setState = _a[1];
+    var updateMobileState = useCallback(function () {
+        var newMobile = window.innerWidth <= width;
+        if (newMobile !== state) {
+            setState(newMobile);
+        }
+    }, [width, state]);
+    useEffect(function () {
+        updateMobileState();
+        window.addEventListener('resize', updateMobileState);
+        return function () { return window.removeEventListener('resize', updateMobileState); };
+    }, [updateMobileState]);
+    return state;
+}
+export var useWindowWidth = function () {
+    var _a = useState(window.innerWidth), width = _a[0], setWidth = _a[1];
+    useEffect(function () {
+        var handleResize = function () { return setWidth(window.innerWidth); };
+        window.addEventListener('resize', handleResize);
+        return function () { return window.removeEventListener('resize', handleResize); };
+    }, []);
+    return width;
+};

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Input } from './components/Inputs/Input';
+export type { InputProps } from './components/Inputs/Input';