feat: new folders to template

README.md

@@ -8,6 +8,94 @@ Básicamente sou alguem leigo quando o assunto é JS, e as documentações dos f
 
 Caso goste, fique a vontade para usar o meu modelo.
 
+## Estrutura
+
+```bash
+app/
+├── App.tsx
+├── assets/
+│   ├── icons/
+│   └── images/
+├── components/
+├── constants/
+├── data/
+├── main.tsx
+├── pages/
+├── redux/
+├── routers/
+├── services/
+├── styles/
+│   ├── colors/
+│   ├── fonts/
+│   └── global.css
+├── tests/
+│   └── mocks/
+├── types/
+└── utils/
+
+docs/
+└── README.txt
+
+public/
+├── index.html
+└── ...
+
+.gitignore
+eslint.config.js
+package.json
+tsconfig.app.json
+tsconfig.json
+tsconfig.node.json
+vite.config.ts
+README.md
+```
+
+### app/
+
+- **App.tsx**: Componente principal da aplicação.
+- **assets/**: Contém ícones e imagens utilizados na aplicação.
+  - **icons/**: Ícones da aplicação.
+  - **images/**: Imagens da aplicação.
+- **components/**: Componentes reutilizáveis da aplicação.
+- **constants/**: Constantes utilizadas na aplicação.
+- **data/**: Dados persistidos (arquivos .json, .txt, etc).
+- **main.tsx**: Ponto de entrada da aplicação React.
+- **pages/**: Páginas da aplicação.
+- **redux/**: Configuração do Redux para gerenciamento de estado.
+- **routers/**: Configuração das rotas da aplicação.
+- **services/**: Serviços da aplicação (ex: chamadas de API).
+- **styles/**: Estilos da aplicação.
+  - **colors/**: Definições de cores.
+  - **fonts/**: Definições de fontes.
+  - **global.css**: Estilos globais da aplicação.
+- **tests/**: Testes da aplicação.
+  - **mocks/**: Dados de mocks para testes.
+- **types/**: Definições de tipos TypeScript.
+- **utils/**: Funções utilitárias.
+
+### docs/
+
+- **README.txt**: Documentação da aplicação.
+
+### public/
+
+- Arquivos públicos da aplicação.
+
+### Configuração e Build
+
+- **.gitignore**: Arquivos e diretórios ignorados pelo Git.
+- **eslint.config.js**: Configuração do ESLint.
+- **index.html**: Arquivo HTML principal.
+- **package.json**: Dependências e scripts do projeto.
+- **tsconfig.app.json**: Configuração do TypeScript para a aplicação.
+- **tsconfig.json**: Configuração principal do TypeScript.
+- **tsconfig.node.json**: Configuração do TypeScript para Node.js.
+- **vite.config.ts**: Configuração do Vite.
+
+### Raiz do Projeto
+
+- **README.md**: Documentação principal do projeto.
+
 ## Vite
 
 O Vite é uma ferramenta de build e servidor de desenvolvimento frontend que se destaca pela sua extrema velocidade e simplicidade. Ele visa proporcionar uma experiência de desenvolvimento mais ágil e eficiente, principalmente para aplicações web modernas.
@@ -23,6 +111,7 @@ O Vite é uma ferramenta de build e servidor de desenvolvimento frontend que se
 ## Bibliotecas Usadas neste Template
 
 - Axios: Uso de Requsições HTTP com Qualidade e Facilidade
+- Styles-Components: Facilidade de Estilizar Componentes, com qualidade de desenvolvimento
 
 ## OBS
 

app/App.tsx

@@ -0,0 +1,9 @@
+function App() {
+  return (
+    <div>
+      <p>Bem vindo ao meu Template</p>
+    </div>
+  )
+}
+
+export default App

app/components/README.txt

@@ -0,0 +1 @@
+Crie seus componentes nesta pasta

app/constants/README.txt

@@ -0,0 +1 @@
+Crie suas constantes nesta pasta

app/data/README.txt

@@ -0,0 +1 @@
+Coloque seus dados persistidos aqui! (arquivos.json, .txt e afins)

src/main.tsx → app/main.tsx

@@ -1,6 +1,5 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import './index.css'
 import App from './App.tsx'
 
 createRoot(document.getElementById('root')!).render(

app/pages/README.txt

@@ -0,0 +1 @@
+Crie suas páginas nesta pasta

app/redux/README.txt

@@ -0,0 +1 @@
+Configure seu redux aqui

app/routers/README.txt

@@ -0,0 +1 @@
+Crie suas rotas de navegação entre páginas nesta pasta

app/services/README.txt

@@ -0,0 +1 @@
+Crie seus serviços nesta pasta

app/styles/colors/index.ts

@@ -0,0 +1,47 @@
+const COLORS = {
+    inputBackgroundColor: "#caa165",
+    inputBorderColor: "#977a50",
+    logoColor: "#582000",
+    logoColorStrong: "#370e03",
+    black:"#000000",
+}
+
+/**
+Ajusta o brilho de uma cor hexadecimal.
+
+* Args:
+  - hex: Cor hexadecimal a ser ajustada.
+  - percent: Porcentagem de ajuste. Valores positivos aumentam o brilho e valores negativos diminuem.
+
+* Returns:
+    - Cor hexadecimal ajustada com o brilho.
+ **/
+export function adjustBrightness(hex: string, percent: number): string {
+    // Remove o símbolo # se estiver presente
+    hex = hex.replace(/^#/, '');
+
+    // Converte a cor hexadecimal para RGB
+    let r = parseInt(hex.substring(0, 2), 16);
+    let g = parseInt(hex.substring(2, 4), 16);
+    let b = parseInt(hex.substring(4, 6), 16);
+
+    // Ajusta o brilho
+    r = Math.min(255, Math.max(0, r + (r * percent) / 100));
+    g = Math.min(255, Math.max(0, g + (g * percent) / 100));
+    b = Math.min(255, Math.max(0, b + (b * percent) / 100));
+
+    // Converte de volta para hexadecimal
+    const newHex = (
+      (1 << 24) +
+      (r << 16) +
+      (g << 8) +
+      b
+    )
+      .toString(16)
+      .slice(1)
+      .toUpperCase();
+
+    return `#${newHex}`;
+  }
+
+export default COLORS;

app/styles/fonts/index.ts

@@ -0,0 +1,17 @@
+export const SIZES = { // 1 rem -> 16px
+    label: "1.4rem",
+    title: "1.8rem",
+    section: "3.0rem"
+}
+
+export const WEIGHTS = {
+    bold: "800",
+    regular: "400",
+    light: "300"
+}
+
+export const FONTS = {
+    primary: "Roboto, sans-serif",
+    secondary: "Montserrat, sans-serif"
+}
+

app/styles/global.css

@@ -0,0 +1,17 @@
+@import url('https://fonts.googleapis.com/css2?family=Playwrite+AU+SA:[email protected]&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
+
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+p {
+    font-family: "Roboto", serif;
+    font-optical-sizing: auto;
+    font-weight: 400;
+    font-style: normal;
+    font-variation-settings:
+      "wdth" 100;
+}

app/tests/README.txt

@@ -0,0 +1 @@
+Coloque seus testes aqui

app/tests/mocks/README.txt

@@ -0,0 +1 @@
+Coloque seus dados de mocks aqui

app/types/README.txt

@@ -0,0 +1 @@
+Coloque seus tipos de dados aqui

app/utils/README.txt

@@ -0,0 +1 @@
+Adicione suas funções úties (Conversões de tipos, formatos, etc) aqui

docs/README.txt

@@ -0,0 +1 @@
+Coloque a documentação de sua aplicação aqui

index.html

@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
+    <script type="module" src="/app/main.tsx"></script>
   </body>
 </html>