@grazziotin/react-components 1.0.0

package/.editorconfig

@@ -0,0 +1,13 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+end_of_line = crlf
+charset = utf-8
+trim_trailing_whitespace = false
+insert_final_newline = false

package/.eslintignore

@@ -0,0 +1,3 @@
+**/*.json
+**/*.jsx
+**/*.js

package/.eslintrc.json

@@ -0,0 +1,16 @@
+{
+  "plugins": [
+    "@tanstack/query"
+  ],
+  "extends": [
+    "@rocketseat/eslint-config/react",
+    "plugin:@tanstack/eslint-plugin-query/recommended"
+  ],
+  "rules": {
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-unused-vars": "warn",
+    "@tanstack/query/exhaustive-deps": "warn",
+    "@tanstack/query/no-rest-destructuring": "warn",
+    "@tanstack/query/stable-query-client": "warn"
+  }
+}

package/.prettierrc

@@ -0,0 +1,6 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "useTabs": false
+}

package/.vscode/settings.json

@@ -0,0 +1,18 @@
+{
+  "editor.tabSize": 2,
+  "files.eol": "\r\n",
+  "workbench.colorCustomizations": {
+    "activityBar.background": "#6a1b9a",
+    "titleBar.activeBackground": "#6a1b9a",
+    "titleBar.inactiveBackground": "#6a1b9a",
+    "titleBar.activeForeground": "#ffffff"
+  },
+  "eslint.format.enable": true,
+  "[typescriptreact]": {
+      "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+  },
+  "editor.formatOnSave": true,
+  "[typescript]": {
+      "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+  }
+}

package/README.md

@@ -0,0 +1 @@
+# react-components

package/dist/components/Inputs/Input/constants.d.ts

@@ -0,0 +1 @@
+export type InputPropsCustomTypes = 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week' | 'float' | 'real';

package/dist/components/Inputs/Input/constants.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Inputs/Input/index.d.ts

@@ -0,0 +1,20 @@
+import { TextFieldProps } from '@mui/material';
+import { InputPropsCustomTypes } from './constants';
+export type InputProps = TextFieldProps & {
+    shrink?: boolean;
+    readOnly?: boolean;
+    xs?: number;
+    onKeyEnter?: () => void;
+    order?: number;
+    render?: boolean;
+    qtdSolicitada?: number;
+    qtdSeparada?: number;
+    onQtdSeparadaChange?: (newValue: number) => void;
+    type?: InputPropsCustomTypes;
+};
+/**
+ * Input personalizado Mui
+ * @version 2.0.1
+ * @ViniciusCLoeblein
+ */
+export default function Input({ shrink, readOnly, onKeyEnter, size, type, ...rest }: Readonly<InputProps>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Inputs/Input/index.js

@@ -0,0 +1,59 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TextField, ThemeProvider } from '@mui/material';
+import { sx, standard, theme } from 'src/styles/sx';
+import { cn } from 'src/lib/utils';
+import { limitDecimais, mascaradorInputMoeda } from 'src/functions/mascaras';
+/**
+ * Input personalizado Mui
+ * @version 2.0.1
+ * @ViniciusCLoeblein
+ */
+export default function Input(_a) {
+    var shrink = _a.shrink, readOnly = _a.readOnly, onKeyEnter = _a.onKeyEnter, _b = _a.size, size = _b === void 0 ? 'small' : _b, _c = _a.type, type = _c === void 0 ? 'text' : _c, rest = __rest(_a, ["shrink", "readOnly", "onKeyEnter", "size", "type"]);
+    function onEnter(e) {
+        if (e.key === 'Enter' && onKeyEnter) {
+            onKeyEnter();
+        }
+        rest.onKeyDown && rest.onKeyDown(e);
+    }
+    var handleChange = function (e) {
+        var value = e.target.value;
+        if (['real', 'float'].includes(type)) {
+            value = value.replace(',', '.');
+            if (type === 'real') {
+                value = mascaradorInputMoeda(value);
+            }
+            else {
+                value = limitDecimais(value, 8);
+            }
+        }
+        rest.onChange &&
+            rest.onChange(__assign(__assign({}, e), { target: __assign(__assign({}, e.target), { value: value }) }));
+    };
+    var InputProps = __assign({ readOnly: readOnly }, rest.InputProps);
+    return (_jsx(ThemeProvider, { theme: theme, children: _jsx(TextField, __assign({}, rest, { sx: rest.variant === 'standard' ? standard : sx, onKeyDown: onEnter, InputLabelProps: __assign(__assign({}, rest.InputLabelProps), { shrink: shrink }), InputProps: InputProps, size: size, className: cn('select-none', rest.className), type: ['real', 'float'].includes(type) ? 'text' : type, onChange: handleChange, inputProps: __assign(__assign({}, rest.inputProps), { step: (type === 'real' && '0.01') ||
+                    (type === 'float' && '0.0000001') ||
+                    '1' }) })) }));
+}

package/dist/functions/mascaras/index.d.ts

@@ -0,0 +1,169 @@
+interface MascaradorCPFCNPJProps {
+    v: string | number;
+    autoComplete?: boolean;
+    ignoreCNPJ?: boolean;
+}
+/**
+ * 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 declare const mascaradorCPFCNPJ: ({ v, autoComplete, ignoreCNPJ, }: MascaradorCPFCNPJProps) => string;
+/**
+ * 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 declare const mascaradorTelefone: (v: string | number) => string;
+/**
+ * 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 declare const mascaradorMilhar: (valor: string | number) => string;
+/**
+ * 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 declare const mascaradorMilharDecimal: (v: string | number) => string;
+/**
+ * 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 declare const mascaradorValorReal: (v?: string | number | null) => string;
+/**
+ * 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 declare function formatarDataBR(data: Date | string): string;
+/**
+ * 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 declare function formatarMesAno(anoMes: string, dia?: string): string;
+/**
+ * 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 declare function mascaradorInputMoeda(v: string): string;
+/**
+ * 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 declare function formatarInputMoedaFloat(valor: string): number;
+/**
+ * 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 declare function mascaradorCodItem(v?: string | undefined): string | undefined;
+/**
+ * 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 declare function mascaradorCodItemRede(v: string): string;
+/**
+ * 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 declare function formatarDataParaString(data: Date): string;
+/**
+ * Mascara um CPF, adicionando pontos e traço.
+ *
+ * @param {string} cpf - O CPF a ser mascarado.
+ * @param {boolean} autoComplete - Indica se deve completar com zeros à esquerda.
+ * @returns {string} O CPF mascarado.
+ */
+interface MascararCPF {
+    cpfCnpj: string | number;
+    autoComplete?: boolean;
+}
+export declare function mascararCPF({ cpfCnpj, autoComplete, }: MascararCPF): string;
+/**
+ * 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 declare function mascararCNPJ({ cpfCnpj, autoComplete, }: MascararCPF): string;
+export declare function formatValuesToMoney<T>(obj: T, fieldsToFormat: (keyof T)[]): T;
+export declare function limitDecimais(value: string, limit: number): string;
+export {};