Merge pull request #29 from MauMuller/development

Development

CHANGELOG.md

@@ -3,6 +3,118 @@ Aqui estão todos os commits realizados até o momento, acompanhe todos eles na
 
 **Commits:**
 
+- **feee2864056ca76e5866545052801fe7c50f6176**
+
+	Link para o commit: [Ver modificações do commit](https://github.com/MauMuller/valisk/commit/feee2864056ca76e5866545052801fe7c50f6176)
+
+	Autor: MauMuller - [https://github.com/MauMuller/](https://github.com/MauMuller/)
+
+	Data: 02/03/2023
+
+	```
+    📝 (readme & imgs_readme): Incremento de ilustração e criação de uma pasta para imagens
+
+    Resolvi criar uma pasta com todas as imagens que pretendo utilizar na documentação daqui em diante, facilitando até a busca. Além disso, incrementei uma imagem ilustativa na sessão `v-check` para mostrar qual é o erro que irá aparecer caso haja um problema.
+	```
+
+<br />
+
+- **638c43dc1a453b488021d160568f2e8317378c0e**
+
+	Link para o commit: [Ver modificações do commit](https://github.com/MauMuller/valisk/commit/638c43dc1a453b488021d160568f2e8317378c0e)
+
+	Autor: MauMuller - [https://github.com/MauMuller/](https://github.com/MauMuller/)
+
+	Data: 02/03/2023
+
+	```
+    🚚 (Tipos & ConfigEntryProps): Renomeação dos tipos e propriedades do useConfigEntry
+
+    Realizei a altração dos nomes dos tipos para facilitar ainda mais, removendo a redundancia 'type' de todos os tipos, além de trocar os 'entry' por 'props' para facilitar a utilização
+	```
+
+<br />
+
+- **206f39eb7cab9cff367713a5f8b2b484a75cd389**
+
+	Link para o commit: [Ver modificações do commit](https://github.com/MauMuller/valisk/commit/206f39eb7cab9cff367713a5f8b2b484a75cd389)
+
+	Autor: MauMuller - [https://github.com/MauMuller/](https://github.com/MauMuller/)
+
+	Data: 01/03/2023
+
+	```
+    🐛 (README.md): Ajustes de formatação na documentação
+
+    Incremento de um '.' no exemplo com a lib Material UI e adição de espaçamento dentre títulos
+	```
+
+<br />
+
+- **63d5c18ef86aa2302453cd59c4e4d992f9b23d70**
+
+	Link para o commit: [Ver modificações do commit](https://github.com/MauMuller/valisk/commit/63d5c18ef86aa2302453cd59c4e4d992f9b23d70)
+
+	Autor: MauMuller - [https://github.com/MauMuller/](https://github.com/MauMuller/)
+
+	Data: 01/03/2023
+
+	```
+    📝 (readme): sessão de erros + v-check
+
+    Dentro do useValisk foi adicionado uma funcionalidade que insere uma propriedade no elemento que o _masks(...) é inserido, isso devido a identificação de erros relacionados a esse método. Agora, caso algum elemento que não seja um input receber a função _masks(...), irá gerar um uma mensagem de erro no console informando qual é o tipo de elemento e o seu valor, além de encaminhar uma possivel solução logo abaixo.\n\nV-check apenas serve para identificar dentro da página quais são os elementos que possuem uma máscara e caso algum não seja um input, mostrar no console.\n\nAlém disso, também foi adicionado duas novas sessões dentro do readme, a primeira sobre v-check, como toda explicação acima. E a segunda com 'Erros comuns', para deixar mais fácil a descoberta de erros casos aconteça tenha uma possivel solução.\n\nPor fim, ainda foi adicionado mais um exemplo nos casos de uso, agora com a lib MUI, mostrando como fazer para usar a máscara nesse componente disponibilizado.
+	```
+
+<br />
+
+- **f59af5da163a6e267dc986a824fb4426dff90bca**
+
+	Link para o commit: [Ver modificações do commit](https://github.com/MauMuller/valisk/commit/f59af5da163a6e267dc986a824fb4426dff90bca)
+
+	Autor: MauMuller - [https://github.com/MauMuller/](https://github.com/MauMuller/)
+
+	Data: 01/03/2023
+
+	```
+    ♻️ (useValiskContext - hook): Foi preciso realizar vários testes e mudanças na estrutura de arquivo para esse hook
+
+    Após diversos testes, percebi que o useValiskContext não estava funcionando corretamente, e por conta disso, precisei refatorar a estrutura de pastas e arquivos do hook, porém, já está estável novamente
+	```
+
+<br />
+
+- **4132359baa32259516b67fcf82e30dc82664036e**
+
+	Link para o commit: [Ver modificações do commit](https://github.com/MauMuller/valisk/commit/4132359baa32259516b67fcf82e30dc82664036e)
+
+	Autor: MauMuller - [https://github.com/MauMuller/](https://github.com/MauMuller/)
+
+	Data: 01/03/2023
+
+	```
+    🔧 (vite.config.ts): Extração das dependencias para melhor desempenho
+
+    Incrementei nas configurações do vite uma extração das dependencias que eu não quero que sejam renderizadas juntamente com o bunlde, ou seja, agora a lib está mais leve do que antes
+	```
+
+<br />
+
+- **92300bd0773965ba620ee3e6ad61611181b44780**
+
+	Link para o commit: [Ver modificações do commit](https://github.com/MauMuller/valisk/commit/92300bd0773965ba620ee3e6ad61611181b44780)
+
+	Autor: MauMuller - [https://github.com/MauMuller/](https://github.com/MauMuller/)
+
+	Data: 27/02/2023
+
+	```
+    📝 (readme): Melhora no menu para navegação
+
+    Ajuste dos link que não funcionavam na documentação e foco dos links para manter mais centralizado as buscas
+	```
+
+<br />
+
 - **39b0374ee61b6e52dcbd82002c477e63c97c8e9e**
 
 	Link para o commit: [Ver modificações do commit](https://github.com/MauMuller/valisk/commit/39b0374ee61b6e52dcbd82002c477e63c97c8e9e)

README.md

@@ -30,9 +30,12 @@
 
 <div align="center">
 
-✅ Documentação completa com vários exemplos ilustrados, api de refência e casos de uso.<br/>
-✅ Integração com outras libs/frameworks de maneira fácil.<br/>
-✅ Suporte a JAVASCRIPT e TYPESCRIPT.<br/>
+  Tipos de uso <br />
+ `UNCONTROLLED` | `CONTROLLED` | `REACT-HOOK-FORMS`<br/>
+
+  Linguagens <br />
+ `JAVASCRIPT` | `TYPESCRIPT` <br/>
+
 
 </div>
 
@@ -63,6 +66,11 @@ Agora segue abaixo o menu para um **roadmap** de refencia sobre a Lib:
   - [Uncontrolled](#uncontrolled)
   - [Controlled](#controlled)
   - [React Hook Form](#react-hook-form)
+  - [Outros Exemplos `novo`](#outros-exemplos-novo)
+
+  <br />
+
+- [V-Check | Checagem de Elemento `nova sessão`](#v-check--checagem-de-elemento-nova-sessão)
 
   <br />
 
@@ -87,11 +95,19 @@ Agora segue abaixo o menu para um **roadmap** de refencia sobre a Lib:
 
   <br />
 
-  - [**useConfigEntry**](#-useconfigentry-novo)
+  - [**useConfigEntry `novo`**](#-useconfigentry-novo)
+
+  - [**ValiskProvider `novo`**](#-valiskprovider-novo)
 
-  - [**ValiskProvider**](#-valiskprovider-novo)
+  - [**useValiskContext `novo`**](#-usevaliskcontext-novo)
 
-  - [**useValiskContext**](#-usevaliskcontext-novo)
+  <br />
+
+- [Erros Comuns `nova sessão`](#erros-comuns-nova-sessão)
+
+  - [Utilizei o_masks(...), porém a máscara não está sendo inserida.](#utilizei-o-masks-porem-a-mascara-nao-esta-sendo-inserida)
+
+  <br />
 
 - [Dúvidas](#dúvidas)
 
@@ -606,7 +622,7 @@ Aqui iremos entrar em alguns exemplos de uso, porém o foco é apenas a apresent
   <details>
   <summary>Utilização do método _cleanVal e todas outras variações dos campos</summary>
 
-  ```JSX
+  ```TSX
   import { CSSProperties, useEffect, useState } from "react";
   import { useValisk } from "@libsdomau/valisk";
   import { useForm, SubmitHandler } from "react-hook-form";
@@ -800,6 +816,110 @@ Aqui iremos entrar em alguns exemplos de uso, porém o foco é apenas a apresent
 
 <br />
 
+- #### Outros Exemplos `novo`
+
+  <details>
+  <summary>MUI - Material UI</summary>
+
+  Aqui será usado apenas o componente **TextField** do `Material UI`, porém o mesmo vale para todos outros.
+
+  > OBS: Caso você tenha percebido, ao utilizar o componente do MUI, é necessário passar o **\_masks** da seguinte forma:
+  >
+  > **InputProps: { inputsProps: { ...\_masks(...) } }**
+  >
+  > Isso é necessário pois caso passe o \_masks apenas para o primeiro **inputProps**, não acontecerá nada em tela, mas no console você verá a mensagem de erro da sessão abaixo.
+  >
+  > Mensagem de erro + V-check
+  >
+  > O motivo disso é devido a tipo de elemento na qual o masks está sendo colocado, nesse caso, seria uma **Div**, invés de um **Input**, por conta disso é necessário essa utilização redundante.
+
+  ```TSX
+  import { useEffect, useState, FC, ReactNode } from "react";
+  import { TextField, IconButton } from "@mui/material";
+  import { useValisk } from "@libsdomau/valisk";
+
+  const Form: FC<ReactNode> = (children) => {
+    return <>{children}</>
+  }
+
+  function App() {
+    const [hideValue, setHideValue] = useState(true);
+
+    type Inputs = {
+      campo1: string;
+    };
+
+    const methodsValisk = useValisk<Inputs>({
+      password: { name: "campo1", hideValue },
+    });
+
+    console.log("1 Renderização");
+
+    const { _masks, _cleanValues, _forceUpdate, _getValues } = methodsValisk;
+
+    useEffect(() => {
+      _forceUpdate({
+        inputName: "campo1",
+        inputType: "uncontrolled",
+      });
+    }, [hideValue]);
+
+    return (
+      <div className="border border-red-600 h-screen items-center justify-center flex">
+        <Form>
+          <TextField
+            label="teste"
+            defaultValue="bah"
+            InputProps={{
+              inputProps: { ..._masks("campo1") },
+              endAdornment: (
+                <IconButton onClick={() => setHideValue(!hideValue)}> O </IconButton>
+              ),
+            }}
+          />
+        </Form>
+      </div>
+    );
+  }
+
+  export default App;
+  ```
+
+  Output:
+
+  | \*\*\* | O   |
+  | :----- | :-- |
+
+  <br />
+
+  Console:
+
+  ```SHELL
+  1 Renderização
+  ```
+
+  </details>
+
+<br />
+
+## V-Check | Checagem de Elemento `nova sessão`
+
+Antes de partir para as referências, é importante entender do que se trata esse atributo.
+
+**\_:"v-check"** é um atributo encontrado em todos os elementos que receberam o `_masks("...")`, ele serve como uma **identificação** dentro do body da página.
+
+Ele não possui nenhuma outra utilidade, apenas serve para mostrar quais elementos receberam o método mencionado acima.
+
+Sua criação é justamente para previr qualquer tipo de inserção em algum elemento que não seja um campo de texto.
+
+Então, caso a máscara não esteja funcionando do campo de texto em específico, recomendo que verifique se o **v-check** está incluido nesse input, caso não esteja, provavelmente seu componente possui algum elemento superior.
+
+Mas não fique precoupado, será informado no **console caso o elemento que possui o `_masks("...")` não seja um campo de texto**, por isso, fique de olho no console.
+
+![Error](./imgs_readme/error_message_lib.png)
+
+<br />
+
 ## API de Referência
 
 Nessa sessão você poderá tirar todas suas dúvidas quanto a parametros ou retornos dos métodos, assim como ententer os tipos e até mesmo verificar a sintaxe de utilização para variados casos de uso.
@@ -1784,8 +1904,6 @@ Inspirado no `FormProvider` do `react-hook-form`, o **ValiskProvider** tem a fun
 
 ## @ useValiskContext `novo`
 
-Usado em conjuto com o **ValiskProvider** e inspirado no `useFormContext`, essa é uma funcionalidade que realiza o consumo do valor passado para o Provider, ou seja, ele possui os mesmo métodos que o **useValisk**, usando eles como forma de apenas uma instância.
-
 - ### Entrada
 
   ***
@@ -1842,7 +1960,27 @@ Usado em conjuto com o **ValiskProvider** e inspirado no `useFormContext`, essa
     ```
 
 <br/>
-<br/>
+
+## Erros Comuns `nova sessão`
+
+Essa sessão foi criada para mostrar todos os erros comuns que podem acontecer com o uso da biblioteca, porém, **caso sua dúvida não esteja aqui, faça uma issue**, agradeço.
+
+  <details>
+    <summary id="utilizei-o-masks-porem-a-mascara-nao-esta-sendo-inserida">Utilizei o <code>_masks(...)</code>, porém a máscara não está sendo inserida.</summary>
+
+  <br />
+
+Existe uma grande chance de, neste caso, o problema estar no elemento superior, isso acontece normalmente com componentes que possuem algum campo de texto.
+
+O problema aqui é que o elemento que está recebendo o método `_masks(...)` não é o campo de texto, mas sim algum outro elemento dentro do componente (caso seja um componente).
+
+Para identificar isso, basta procurar pelos elemento que possuem o atributo `v-check` dentro do inspecionar da página, caso algum elemento não seja um campo de texto, ele não funcionará.
+
+Nesse caso, também haverá uma mensagem no console falando qual elemento está recebendo o método em específico.
+
+  </details>
+
+<br />
 
 ## Dúvidas
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@libsdomau/valisk",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "license": "MIT License",
   "description": "Mascaras UNCONTROLLED, CONTROLLED e integração com REACT-HOOK-FORMS",
   "main": "./dist/lib.umd.js",

src/functions/cleanValues/index.ts

@@ -1,4 +1,4 @@
-import { ValiskEntryType, PhoneTypes } from "../../types";
+import { ValiskProps, PhoneTypes } from "../../types";
 
 type Props<T> = {
   mask: PhoneTypes | Omit<keyof T, "phone">;
@@ -14,13 +14,13 @@ export const cleanValues = <T>(nameInputAndTypeMaskArr: Props<T>, props: T) => {
 
   type objMask =
     | {
-        mask: keyof Omit<ValiskEntryType<T>, "phone">;
+        mask: keyof Omit<ValiskProps<T>, "phone">;
         inputName: keyof T;
       }
     | undefined;
 
   for (const [key, value] of Object.entries(props as ObjectInput)) {
-    const keyMask = key as keyof Omit<ValiskEntryType<T>, "phone">;
+    const keyMask = key as keyof Omit<ValiskProps<T>, "phone">;
 
     const objectWithMask = nameInputAndTypeMaskArr.find(
       (obj) => obj.inputName === keyMask

src/hooks/ValiskProvider/index.tsx → src/hooks/ValiskContext/index.tsx

@@ -1,14 +1,20 @@
-import { FC, ReactNode, createContext } from "react";
+import { FC, ReactNode, createContext, useContext } from "react";
 import { ReturnValisk } from "../../types";
 
 interface Props<T> extends ReturnValisk<T> {
   children: ReactNode;
 }
 
-export const ValiskContext = createContext({});
+export const ValiskContext = createContext<ReturnValisk<any>>(
+  {} as ReturnValisk<any>
+);
 
 export const ValiskProvider: FC<Props<any>> = ({ children, ...rest }) => {
   return (
     <ValiskContext.Provider value={rest}>{children}</ValiskContext.Provider>
   );
 };
+
+export const useValiskContext = <T,>() => {
+  return useContext(ValiskContext) as ReturnValisk<T>;
+};